:root{ --bg:#0e1116; --panel:#161b22; --text:#e6edf3; --muted:#8b949e; --accent:#2f81f7; }
body.light{ --bg:#f5f7fb; --panel:#ffffff; --text:#0a0a0a; --muted:#666b74; --accent:#2f6af7; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:"Poppins", system-ui, Segoe UI, Roboto, Arial;text-decoration:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;background:#0d0f14;padding:16px;display:flex;flex-direction:column;gap:8px;transition:width .2s}
.sidebar.collapsed{width:64px}
.side-top{display:flex;align-items:center;justify-content:space-between}
.icon-btn{background:transparent;border:1px solid #242c36;color:var(--text);padding:4px 8px;border-radius:6px;cursor:pointer}
.sidebar h2{margin:0 0 12px 0}
.sidebar nav a{display:block;padding:8px;border-radius:6px}
.sidebar nav a:hover{background:#1f2630}
.sidebar .group{margin-top:8px;padding-top:8px;border-top:1px solid #242c36}
.sidebar .group-title{font-size:12px;color:var(--muted);margin:4px 0 6px 0;text-transform:uppercase}
.sidebar-footer{margin-top:auto;padding-top:8px;border-top:1px solid #242c36;display:flex;flex-direction:column;gap:8px}
.sidebar-footer .foot-link{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:inherit;text-align:left;padding:8px;border-radius:6px;cursor:pointer}
.sidebar-footer .foot-link:hover{background:#1f2630}
.sidebar-footer .foot-link { font-size:14px; }
.sidebar-footer .foot-link .label { font-size:14px; }
.content{flex:1;padding:16px;background:var(--bg);overflow:auto}
.topbar{height:60px;background:var(--panel);display:flex;align-items:center;justify-content:flex-end;padding:0 20px;border-bottom:1px solid #222;gap:8px;margin-bottom:0}
.topbar .spacer{flex:1}
.user-box{font-size:14px;color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid #242c36;border-radius:6px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #242c36;text-align:left;vertical-align:middle}
.login-container{max-width:360px;margin:10vh auto;padding:24px;background:var(--panel);border-radius:8px}
label{display:block;margin-top:8px;color:var(--muted)}
input{width:100%;padding:8px;margin-top:4px;border:1px solid #2b3440;border-radius:6px;background:#0d1218;color:var(--text)}
textarea{width:100%;padding:8px;margin-top:4px;border:1px solid #2b3440;border-radius:6px;background:#0d1218;color:var(--text);resize:vertical}
textarea::placeholder{color:var(--muted)}
body.light textarea{background:#ffffff;color:#111;border-color:#d1d5db}
button{margin-top:12px;padding:10px 12px;background:var(--accent);border:none;border-radius:6px;color:#fff;cursor:pointer}
.msg{margin-top:12px;color:#ff6b6b}

/* Dashboard */
.filters{display:flex;gap:8px;align-items:center;margin-bottom:12px}
/* Ajuste visual: selector de rango de tiempo en modo oscuro */
.filters select{
  background:#0f141b;
  color:var(--text);
  border:1px solid #2b3440;
  border-radius:10px;
  padding:8px 12px;
  outline:none;
}
.filters select:focus{
  border-color:#335bff;
  box-shadow:0 0 0 2px rgba(47,129,247,.25);
}
body.light .filters select{
  background:#ffffff;
  color:#111;
  border-color:#d1d5db;
}
.cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:12px;margin-bottom:16px}

/* ✅ FIX: aquí había un error de sintaxis (padding:12px box-shadow...) */
.card{
  background:var(--panel);
  border:1px solid #242c36;
  border-radius:8px;
  padding:12px;
  box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.card-title{font-size:12px;color:var(--muted)}
.card-value{font-size:22px;margin-top:4px}

:root{ --bg:#0e1116; --panel:#161b22; --text:#e6edf3; --muted:#8b949e; --accent:#2f81f7; }
body.light{ --bg:#f5f7fb; --panel:#ffffff; --text:#0a0a0a; --muted:#666b74; --accent:#2f6af7; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial} a{color:var(--text);text-decoration:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:8px;transition:width .2s}
.sidebar.collapsed{width:64px}
.side-top{display:flex;align-items:center;justify-content:space-between}
.icon-btn{background:transparent;border:1px solid #242c36;color:var(--text);padding:4px 8px;border-radius:6px;cursor:pointer}
.sidebar h2{margin:0 0 12px 0}
.sidebar nav a{display:block;padding:8px;border-radius:6px}
.sidebar nav a:hover{background:#1f2630}
.sidebar .group{margin-top:8px;padding-top:8px;border-top:1px solid #242c36}
.sidebar .group-title{font-size:12px;color:var(--muted);margin:4px 0 6px 0;text-transform:uppercase}
.content{flex:1;padding:16px}
.topbar{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-bottom:12px}
.topbar .spacer{flex:1}
.user-box{font-size:14px;color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid #242c36;border-radius:6px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #242c36;text-align:left}
.login-container{max-width:360px;margin:10vh auto;padding:24px;background:var(--panel);border-radius:8px}
label{display:block;margin-top:8px;color:var(--muted)}
input{width:100%;padding:8px;margin-top:4px;border:1px solid #2b3440;border-radius:6px;background:#0d1218;color:var(--text)}
button{margin-top:12px;padding:10px 12px;background:var(--accent);border:none;border-radius:6px;color:#fff;cursor:pointer}
.msg{margin-top:12px;color:#ff6b6b}

/* Dashboard */
.filters{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(4, minmax(140px, 1fr));gap:12px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid #242c36;border-radius:8px;padding:12px}
.card-title{font-size:12px;color:var(--muted)}
.card-value{font-size:22px;margin-top:4px}

/* Simple tabs for dashboard -> estilo tipo "pills" */
.tabs{display:flex;gap:10px;margin:8px 0 14px 0;background:var(--panel);border:1px solid #232a36;border-radius:12px;padding:8px}
.tab{padding:8px 12px;border:none;border-radius:10px;background:transparent;color:var(--text);cursor:pointer}
.tab.active{background:#1a2332}
.muted{color:var(--muted);font-size:13px}
:root{ --bg:#0e1116; --panel:#161b22; --text:#e6edf3; --muted:#8b949e; --accent:#2f81f7; }
body.light{ --bg:#f5f7fb; --panel:#ffffff; --text:#0a0a0a; --muted:#666b74; --accent:#2f6af7; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial} a{color:var(--text);text-decoration:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:8px;transition:width .2s}
.sidebar.collapsed{width:64px}
.side-top{display:flex;align-items:center;justify-content:space-between}
.icon-btn{background:transparent;border:1px solid #242c36;color:var(--text);padding:4px 8px;border-radius:6px;cursor:pointer}
.sidebar h2{margin:0 0 12px 0}
.sidebar nav a{display:block;padding:8px;border-radius:6px}
.sidebar nav a:hover{background:#1f2630}
.sidebar .group{margin-top:8px;padding-top:8px;border-top:1px solid #242c36}
.sidebar .group-title{font-size:12px;color:var(--muted);margin:4px 0 6px 0;text-transform:uppercase}
.content{flex:1;padding:16px}
.topbar{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-bottom:12px}
.topbar .spacer{flex:1}
.user-box{font-size:14px;color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid #242c36;border-radius:6px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #242c36;text-align:left}
.login-container{max-width:360px;margin:10vh auto;padding:24px;background:var(--panel);border-radius:8px}
label{display:block;margin-top:8px;color:var(--muted)}
input{width:100%;padding:8px;margin-top:4px;border:1px solid #2b3440;border-radius:6px;background:#0d1218;color:var(--text)}
button{margin-top:12px;padding:10px 12px;background:var(--accent);border:none;border-radius:6px;color:#fff;cursor:pointer}
.msg{margin-top:12px;color:#ff6b6b}

/* Dashboard */
.filters{display:flex;gap:10px;align-items:center;margin-bottom:12px;background:var(--panel);border:1px solid #232a36;border-radius:12px;padding:10px}
.filters select{min-width:220px}
.filters input{flex:1}
.cards{display:grid;grid-template-columns:repeat(4, minmax(140px, 1fr));gap:12px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid #242c36;border-radius:12px;padding:14px}
.cards.kpis .card, .cards .card{position:relative}
.cards.kpis .card:nth-child(1), .cards .card:nth-child(1){border-color:rgba(47,129,247,.35); box-shadow: inset 0 0 0 1px rgba(47,129,247,.25);}
.cards.kpis .card:nth-child(2), .cards .card:nth-child(2){border-color:rgba(138,88,255,.35); box-shadow: inset 0 0 0 1px rgba(138,88,255,.25);}
.cards.kpis .card:nth-child(3), .cards .card:nth-child(3){border-color:rgba(34,197,94,.35); box-shadow: inset 0 0 0 1px rgba(34,197,94,.25);}
.cards.kpis .card:nth-child(4), .cards .card:nth-child(4){border-color:rgba(245,158,11,.35); box-shadow: inset 0 0 0 1px rgba(245,158,11,.25);}
.kpi-value{font-size:26px;font-weight:700;margin-top:6px}
.kpi-delta{margin-top:6px;font-size:11px}
.kpi-delta.delta-up{color:#34d399}
.kpi-delta.delta-down{color:#f87171}
.card-title{font-size:12px;color:var(--muted)}
.card-value{font-size:22px;margin-top:4px}

/* Distribución fluida de tarjetas KPI (3 o menos -> sin huecos) */
.cards.kpis{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }

/* === TOPBAR / HEADER === */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: #1a1d24;
  border-bottom: 1px solid #232a36;
}
.topbar .left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-title {
  font-size: 16px;
  font-weight: 700;
}
.right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-btn, .circle-btn {
  background: transparent;
  border: none;
  color: #f2f3f5;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: 0.2s;
  font-family: 'Segoe UI Symbol','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji', system-ui, Segoe UI, Roboto, Arial;
  line-height: 1;
}
.icon-btn:hover, .circle-btn:hover {
  transform: scale(1.1);
  color: #22c55e;
}
.circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f1116;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === USER MENU === */
.user-wrap {
  position: relative;
}
.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-menu {
  position: absolute;
  right: 0;
  top: 44px;
  min-width: 240px;
  background: #11151d;
  color: #f2f3f5;
  border: 1px solid #232a36;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  display: none;
}
.user-menu.show {
  display: block;
}
.user-header {
  display: flex;
  gap: 10px;
  padding: 8px;
  align-items: center;
}
.avatar-mini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2a3242;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.user-name {
  font-weight: 700;
}
.user-role {
  font-size: 12px;
  color: #a0a4af;
  letter-spacing: 0.04em;
}
.menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #f2f3f5;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Segoe UI Symbol','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji', system-ui, Segoe UI, Roboto, Arial;
}
.menu-item:hover {
  background: #1a1f2a;
}
.menu-item.danger {
  color: #ffb4b4;
}
hr {
  border: none;
  border-top: 1px solid #232a36;
  margin: 8px 0;
}

/* === TEMA CLARO === */
body.light .topbar {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111;
}
body.light .circle-btn {
  background: #f3f4f6;
  color: #111;
}
body.light .user-menu {
  background: #fff;
  color: #111;
  border-color: #e5e7eb;
}
body.light .menu-item:hover {
  background: #f6f8fa;
}
/* Layout base */

/* Toolbar and search */
.toolbar{ display:flex; align-items:center; gap:8px; margin:12px 0; }
.toolbar .spacer{ flex:1; }
.toolbar .tools-left, .toolbar .tools-right{ display:flex; align-items:center; gap:8px; }
.search input{ background:#0f141b; color:var(--text); border:1px solid #2b3440; border-radius:10px; padding:10px 14px; min-width:220px; }
.pager{ display:flex; align-items:center; justify-content:space-between; margin:10px 2px; color:var(--muted); }

/* Pills and avatars */
.pill{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid #2b3440; font-size:12px; color:var(--text); background:#11151d; }
.pill.role{ background:#0f1a29; color:#86b7ff; border-color:#1d2a3a; }
.pill.success{ background:#0d1f16; color:#34d399; border-color:#1a3a2a; }
.avatar-chip{ width:22px; height:22px; border-radius:50%; background:#2a3242; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; margin-right:8px; }
.user-cell{ display:flex; align-items:center; gap:6px; }
.ops{ white-space:nowrap; }
.op-btn{ background:transparent; border:1px solid #2b3440; color:var(--text); border-radius:8px; padding:4px 8px; cursor:pointer; margin-right:4px; font-family:'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji','Twemoji Mozilla', system-ui, Segoe UI, Roboto, Arial; }
.op-btn.danger{ color:#ff9191; border-color:#4a2a2a; }
.layout { display:flex; min-height:100vh; }
.sidebar{
  width:240px; height:100vh; overflow-y:auto; overflow-x:hidden;
  background:#0f1116; border-right:1px solid #232a36; position:sticky; top:0;
}
.content{ flex:1; min-width:0; overflow:auto; background:#11151d; }

/* Colapsar/expandir (desktop) */
.sidebar.collapsed { width:72px; }
.sidebar.collapsed nav a { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Mostrar/ocultar en móvil (slide) */
@media (max-width:1024px){
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .25s ease; z-index:30; }
  .sidebar.open{ transform:translateX(0); }
  .content{ overflow:auto; }
}

/* Tema claro (lo mínimo para notar el cambio) */
body.light { background:#f6f8fa; color:#111; }
body.light .content{ background:#ffffff; color:#111; }
body.light .sidebar{ background:#ffffff; border-color:#e5e7eb; color:#111; }
body.light .topbar{ background:#ffffff; border-color:#e5e7eb; color:#111; }

/* === MODAL GENÉRICO === */
.modal { position: fixed; inset: 0; display: none; z-index: 2000; }
.modal.show { display: block; }
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal-dialog { position: relative; width: min(900px, 92vw); max-height: 90vh; margin: 5vh auto; background: var(--panel); color: var(--text); border:1px solid #232a36; border-radius: 12px; display:flex; flex-direction:column; box-shadow: 0 24px 56px rgba(0,0,0,.45); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid #232a36; }
.modal-body { padding: 16px; overflow:auto; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; padding: 12px 16px; border-top:1px solid #232a36; }

.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-grid.onecol { grid-template-columns: 1fr; }
/* Forzar mismo tamaño de campos en formularios de una columna (Clientes) */
.form-grid.onecol input,
.form-grid.onecol select,
.form-grid.onecol textarea { height: 36px; min-height: 36px; resize: none; }
/* Desactivar flechitas/handler de resize en Observaciones en cualquier formulario */
.form-grid textarea[name="observaciones"] { resize: none; }
/* Ocultar scroll/controles en Observaciones (todas las plataformas) */
.form-grid textarea[name="observaciones"] { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.form-grid textarea[name="observaciones"]::-webkit-scrollbar { display: none; }
/* Modal más pequeño para formularios compactos */
.modal-dialog.small { width: min(520px, 92vw); }
.modal-dialog.small .modal-body { padding: 12px; }
.modal-dialog.small .modal-header, .modal-dialog.small .modal-footer { padding: 10px 12px; }
.form-grid label { display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--muted); }
.form-grid input, .form-grid textarea, .form-grid select { width:100%; padding:10px; border:1px solid #2b3440; border-radius:8px; background:#0d1218; color:var(--text); }
.form-grid textarea { min-height: 110px; resize: vertical; }
@media (max-width: 720px){ .form-grid { grid-template-columns: 1fr; } }

/* Imagen de formularios: ocupar fila completa al final y crecer */
.form-grid label.image-full { grid-column: 1 / -1; display: grid; grid-template-rows: auto auto auto; gap: 0; justify-items: center; align-items: start; padding: 0; margin: 0; }
.form-grid label.image-full input[type="file"],
.form-grid label.image-full select { max-width: 360px; justify-self: center; }
.form-grid label.image-full .img-slot { display:inline-block; max-width:100%; border:0; border-radius:0; background:transparent; overflow:hidden; padding:0; margin:0; }
.form-grid label.image-full .img-slot .img-preview { display:block; width:auto; height:auto; max-width:100%; max-height:none; object-fit:contain; margin:0; }
.form-grid label.image-full .img-slot .img-preview { width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .15s ease; }
.form-grid label.image-full.has-preview .img-slot .img-preview { opacity:1; }

/* Password eye toggle */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 48px; margin: 0; }
.pwd-wrap .pwd-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  width: 36px; height: 36px; line-height: 36px; border-radius: 6px; margin: 0; z-index: 1;
  display:flex; align-items:center; justify-content:center;
}
.pwd-wrap .pwd-eye:hover { background: rgba(255,255,255,.06); }
body.light .pwd-wrap .pwd-eye:hover { background: rgba(0,0,0,.06); }
.pwd-wrap .pwd-eye svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Empresa: formulario compacto en 2 columnas y ancho contenido */
.company-form { display:block; }
.company-form .form-grid.compact { grid-template-columns: repeat(2, minmax(180px, 1fr)); gap:8px; max-width: 720px; margin: 0 auto; }
.company-form .form-grid.compact label { font-size:12px; }
.company-form .form-grid.compact input, .company-form .form-grid.compact textarea, .company-form .form-grid.compact select { padding:8px; }
/* Estaciones: limitar ancho y evitar líneas largas */
.stations-wrap{ max-width: 960px; margin: 0; }
.stations-wrap table{ table-layout: fixed; font-size:14px; }
.stations-wrap th, .stations-wrap td{ padding:10px 12px; }
.stations-wrap thead th{ font-weight:600; }
.stations-wrap tbody tr:hover{ background: rgba(255,255,255,0.03); }
.stations-wrap th:nth-child(1){ width: 20%; }
.stations-wrap th:nth-child(2){ width: 30%; }
.stations-wrap th:nth-child(3){ width: 50%; }
.stations-wrap td{ white-space: normal; word-break: break-word; }
/* Chips y celdas para Estaciones */
.stations-wrap .idcell{ display:flex; align-items:center; }
.chip{ display:inline-block; padding:4px 10px; border:1px solid #2b3440; border-radius:999px; background:#11151d; color:var(--text); font-size:12px; }
.idchip{ background:#0f141b; }
.stations-wrap.pretty table{ border-collapse:separate; border-spacing:0; }
.stations-wrap.pretty tbody tr + tr td{ border-top:1px solid #242c36; }
.stations-wrap .st-obs{ width:100%; min-height:56px; resize:vertical; padding:8px; border:1px solid #2b3440; border-radius:8px; background:#0d1218; color:var(--text); }
.form-grid input:-webkit-autofill,
.form-grid input:-webkit-autofill:hover,
.form-grid input:-webkit-autofill:focus,
.form-grid textarea:-webkit-autofill,
.form-grid select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px #0d1218 inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s;
}
body.light .form-grid input:-webkit-autofill,
body.light .form-grid input:-webkit-autofill:hover,
body.light .form-grid input:-webkit-autofill:focus,
body.light .form-grid textarea:-webkit-autofill,
body.light .form-grid select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111 !important;
}

.btn-primary { background: var(--accent); color:#fff; border:none; border-radius:8px; padding:10px 14px; cursor:pointer; }
.btn-secondary { background: transparent; color: var(--text); border:1px solid #2b3440; border-radius:8px; padding:10px 14px; cursor:pointer; }

body.light .modal-dialog{ background:#fff; color:#111; border-color:#e5e7eb; }
body.light .form-grid input, body.light .form-grid textarea, body.light .form-grid select{ background:#fff; color:#111; border-color:#e5e7eb; }

/* --- Cliente: layout de registro --- */
.form-section { margin-bottom: 14px; }
.section-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0; padding-top: 8px; border-top: 1px solid #232a36; }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (max-width:720px){ .grid-2{ grid-template-columns: 1fr; } }
/* Tres columnas para las gráficas del Panel, mismo tamaño */
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; align-items: stretch; }
@media (max-width:1200px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:720px){ .grid-3{ grid-template-columns: 1fr; } }

/* ✅ FIX: Layout del Panel - gap correcto para que al volver se vea como la imagen 2 */
.charts-grid.charts-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; align-items: stretch; }

.charts-grid .card.span-2 { grid-column: 1 / -1; }
@media (max-width:720px){ .charts-grid.charts-2 { grid-template-columns: 1fr; } }
.charts-grid .card { display:flex; flex-direction:column; padding:12px; border:1px solid #242c36; border-radius:12px; position:relative; background: var(--panel); }
.charts-grid .card { border-left: none; }
.charts-grid .card:first-child { border-left: none; }
.charts-grid .card.span-2 { border-left: none; border-top: 1px solid #232a36; }
body.light .charts-grid .card { border-left-color: #e5e7eb; }
body.light .charts-grid .card.span-2 { border-top-color: #e5e7eb; }
@media (max-width:720px){
  .charts-grid .card { border-left: none; border-top: 1px solid #232a36; }
  .charts-grid .card:first-child { border-top: none; }
  body.light .charts-grid .card { border-top-color: #e5e7eb; }
}
.charts-grid .card-title { position:static; margin-bottom:6px; }

/* Base (se queda, pero ahora la refinamos con reglas por canvas al final) */
.charts-grid canvas { flex:1 1 auto; width:100% !important; height:460px !important; display:block; }

.with-icon { position: relative; display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--muted); }
.with-icon input, .with-icon textarea { padding-left: 36px; background:#0d1218; color:var(--text); border:1px solid #2b3440; border-radius:8px; }
.with-icon .icon { position:absolute; left:10px; top:38px; opacity:.7; font-size:14px; }
.dropzone { border:1px dashed #2b3440; background:#0d1218; border-radius:12px; padding:18px; text-align:center; cursor:pointer; }
.dropzone.drag { background:#0f141b; }
.dropzone .circle { width:40px; height:40px; border-radius:50%; background:#222a36; color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
.dropzone .dz-text { font-size:14px; }
.dropzone .dz-hint { font-size:12px; }

body.light .with-icon input, body.light .with-icon textarea { background:#fff; color:#111; border-color:#e5e7eb; }
body.light .section-title { border-color:#e5e7eb; }
body.light .dropzone { background:#fff; border-color:#e5e7eb; }

/* --- Clientes: header y barra --- */
.page-header { margin: 6px 0 10px 0; }
.page-title { font-size: 22px; font-weight: 700; }
.page-subtitle { color: var(--muted); font-size: 12px; }
.nav-pills { display:flex; gap:10px; background: var(--panel); border:1px solid #232a36; border-radius:12px; padding:8px; margin: 8px 0 12px 0; }
.nav-pill { padding:8px 12px; border:none; background:transparent; color:var(--text); border-radius:10px; cursor:pointer; }
.nav-pill.active { background:#1a2332; }
.toolbar-bar { background: var(--panel); border:1px solid #232a36; border-radius:12px; padding:10px; }
.chip-btn { background:#11151d; color:var(--text); border:1px solid #2b3440; border-radius:18px; padding:8px 12px; margin-right:6px; cursor:pointer; }
.chip-btn.success { color:#34d399; border-color:#1a3a2a; background:#0d1f16; }

/* --- Reportes --- */
.filters-row { display:flex; gap:12px; flex-wrap:wrap; }
.filter { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.filter input, .filter select { padding:10px; border:1px solid #2b3440; border-radius:8px; background:#0d1218; color:var(--text); }
.cols-list { display:flex; gap:10px; flex-wrap:wrap; }
.cols-list label { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #2b3440; border-radius:999px; background:#11151d; color:var(--text); }
body.light .filter input, body.light .filter select { background:#fff; color:#111; border-color:#e5e7eb; }
body.light .cols-list label { background:#f6f8fa; border-color:#e5e7eb; }

/* Avatar uploader */
.avatar-uploader{ margin:10px 0; }
.avatar-preview{ width:72px; height:72px; border-radius:50%; background:#2a3242; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:8px; }
.avatar-preview.has-img{ background-size:cover; background-position:center; color:transparent; text-indent:-9999px; }
.avatar-actions{ display:flex; gap:8px; align-items:center; }
.avatar-btn.has-img, .avatar-mini.has-img{ background-size:cover !important; background-position:center !important; color:transparent !important; }

/* Products rows alignment: single full-width separator per row */
.products-only .products-table{ border-collapse:separate; border-spacing:0; }
.products-only .products-table th{ border-bottom:1px solid #242c36; }
.products-only .products-table td{ border-bottom:0 !important; }
.products-only .products-table tbody tr{ position:relative; }
.products-only .products-table tbody tr::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#242c36; pointer-events:none; }

/* Variables: ocupar todo el contenedor en 3 columnas responsivas */
.variables-form { padding: 12px; }
/* Variables: 3 columnas iguales, uniformes */
.variables-form .form-grid.vars-grid { grid-template-columns: repeat(3, 1fr); gap:16px; width: 100%; margin: 0; justify-items:stretch; align-items:start; }
/* Variables: tipografía uniforme y controles al 100% del ancho */
.variables-form .form-grid.vars-grid label { font-size:15px; align-items:flex-start; width:100%; }
.variables-form .form-grid.vars-grid input,
.variables-form .form-grid.vars-grid select,
.variables-form .form-grid.vars-grid textarea { padding:12px 14px; font-size:16px; border-radius:10px; min-height:44px; width:100%; min-width:0; box-sizing:border-box; }
/* Encabezados arriba y abajo del título */
.variables-form .vars-head { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:center; justify-items:center; margin: 4px 12px 8px; font-weight:600; color: var(--muted); }
/* También aplicar estilo cuando los encabezados estén fuera del contenedor */
.vars-head { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:center; justify-items:center; margin: 4px 12px 8px; font-weight:600; color: var(--muted); }
.variables-form .btn-primary { padding:12px 16px; font-size:14px; border-radius:10px; }
@media (max-width: 1100px){ .variables-form .form-grid.vars-grid { grid-template-columns: repeat(2, 1fr); } .variables-form .vars-head, .vars-head { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .variables-form .form-grid.vars-grid { grid-template-columns: 1fr; } .variables-form .vars-head, .vars-head { grid-template-columns: 1fr; } }

/* Contenedor general */
.profile-wrapper {
  max-width: 900px;
  margin: auto;
  padding: 20px;
}

/* Columnas lado a lado */
.profile-columns {
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: flex-start;
}

/* Tarjeta */
.profile-card {
  background: #1e1e1e;
  padding: 25px;
  border-radius: 16px;
  width: 360px;
  border: 1px solid #2e2e2e;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.profile-card h2 {
  text-align: center;
  color: white;
  margin-bottom: 18px;
}

/* Inputs */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  color: #ccc;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #fff;
}

/* Vista previa foto */
.photo-preview {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  background: #2b2b2b;
  border: 1px solid #444;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.photo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Botón de seleccionar archivo */
.upload-btn {
  display: block;
  text-align: center;
  background: #0d6efd;
  padding: 10px;
  border-radius: 10px;
  margin-top: 14px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  transition: 0.2s;
}

.upload-btn:hover {
  background: #0b5ed7;
}

.upload-btn input {
  display: none;
}

/* Botón guardar */
.save-container {
  margin-top: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.save-btn {
  width: 200px;
  padding: 12px;
  background: #28a745;
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: 0.25s;
}

.save-btn:hover {
  background: #218838;
}

/* Botón quitar foto */
.remove-btn{
  display:inline-block;
  margin-left:0;
  width: 200px;
  padding:12px 16px;
  background:#dc2626;
  border:none;
  border-radius:12px;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.remove-btn:hover{ background:#b91c1c; }

/* Empresa: centrar logotipo como el preview de proceso */
.company-form #logoPreview{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:contain;
  margin:8px auto 0 !important; /* centro */
  padding:0 !important;          /* sin marco extra */
  background:transparent !important;
}

/* Imagen de Proceso: centrar en modal y reducir espacio */
.modal.image-modal .modal-body { padding: 0; }
.modal.image-modal .modal-footer { display: none; }
.modal.image-modal .modal-body > .image-center { display:flex; align-items:center; justify-content:center; min-height: 70vh; }
.modal.image-modal .modal-body > .image-center img { display:block; max-width:100%; max-height:80vh; object-fit:contain; margin:0 auto; }
/* Imagen de Proceso: mostrar solo la imagen con cierre */
.modal.image-only .modal-dialog { display:none; }
.modal.image-only .modal-header, .modal.image-only .modal-footer { display:none; }
.modal.image-only { z-index: 2000; }
.modal.image-only .image-only-wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.modal.image-only .image-only-wrap img { max-width:96vw; max-height:92vh; object-fit:contain; display:block; border:none; box-shadow:none; background:transparent; }
.modal.image-only .image-close { position:fixed; top:12px; right:12px; z-index:1000; background:rgba(0,0,0,.7); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:999px; width:44px; height:44px; font-size:22px; line-height:44px; text-align:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.4); }
/* Generic centered alert/confirm modal */
.x-modal { position: fixed; inset: 0; display:none; align-items:center; justify-content:center; z-index: 3000; }
.x-modal.show { display:flex; }
.x-modal .x-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.55); }
.x-modal .x-dialog { position:relative; background: var(--panel); color: var(--text); border:1px solid #232a36; border-radius: 12px; min-width: min(420px, 92vw); max-width: 92vw; padding: 18px; text-align:center; box-shadow: 0 24px 56px rgba(0,0,0,.45); }
.x-modal .x-title { font-weight:600; margin-bottom: 6px; }
.x-modal .x-msg { font-size: 15px; color: var(--text); }
.x-modal .x-actions { display:flex; gap:10px; justify-content:center; margin-top: 16px; }
/* Hacer el botón Cancelar rojo dentro del confirm modal */
.x-modal .x-actions #xCancel{
  background:#dc2626;
  color:#fff;
  border:1px solid #7f1d1d;
}
.x-modal .x-actions #xCancel:hover{ background:#b91c1c; }
body.light .x-modal .x-dialog{ background:#fff; color:#111; border-color:#e5e7eb; }

/* Sidebar icons + collapsed behavior */
.sidebar nav a{ display:flex; align-items:center; gap:10px; }
.sidebar nav a .icon{ font-size:18px; width:24px; text-align:center; display:inline-block; font-family: 'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji','Twemoji Mozilla','Segoe UI Symbol', system-ui, Segoe UI, Roboto, Arial; line-height: 1; }
.sidebar nav a .label{ display:inline-block; }
.sidebar.collapsed nav a{ justify-content:center; }
.sidebar.collapsed nav a .label{ display:none; }

/* Footer items en sidebar (Ayuda/Salir) */
.sidebar-footer .foot-link .icon{ font-size:18px; width:24px; text-align:center; display:inline-block; font-family: 'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji','Twemoji Mozilla','Segoe UI Symbol', system-ui, Segoe UI, Roboto, Arial; line-height: 1; }
.sidebar-footer .foot-link .label{ display:inline-block; }
.sidebar.collapsed .sidebar-footer .foot-link{ justify-content:center; }
.sidebar.collapsed .sidebar-footer .foot-link .label{ display:none; }

/* ===== Panel: alturas específicas por gráfica (evita layout raro al volver) ===== */
.charts-grid #chart_line,
.charts-grid #chart_bar{
  height: 460px !important;
}

.charts-grid #chart_pie{
  height: 320px !important;
  max-height: 320px !important;
}

/* Opcional: si quieres que la tarjeta del pastel no quede tan alta */
.charts-grid .card:has(#chart_pie){
  min-height: 380px;
}

/* Panel: pastel más compacto y centrado */
.charts-grid .card canvas#chart_pie{
  height: 360px !important;
  max-height: 360px !important;
}
#procSearch {
  text-transform: uppercase;
}


.app-toast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.96);
  min-width:320px;
  max-width:520px;
  padding:14px 18px;
  border-radius:14px;
  text-align:center;
  font-weight:600;
  z-index:99999;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.app-toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.app-toast.success{ background: rgba(25,135,84,.92); color:#fff; }
.app-toast.info{ background: rgba(13,110,253,.92); color:#fff; }
.app-toast.danger{ background: rgba(220,53,69,.92); color:#fff; }
.app-toast b{ font-weight:800; }

/* ===== Proceso: imagen como fila inferior completa (sin romper el grid) ===== */
#modalForm .form-grid{
  align-content: start;
}

/* Solo el label de imagen ocupa las 2 columnas */
#modalForm .form-grid label.image-full{
  grid-column: 1 / -1;
  display: block !important;   /* 👈 NO flex aquí (esto fue lo que rompió) */
}

/* Caja de preview: fila grande al final */
#modalForm .form-grid label.image-full .img-preview-box{
  width: 100%;
  height: 320px;               /* 🔥 aquí defines el “área inferior” */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2b3440;
  background: #0d1218;
  margin-top: 10px;
}

/* Imagen llena la caja */
#modalForm .form-grid label.image-full .img-preview-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.file-preview {
  width: 100%;
  max-width: 520px;
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.file-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.is-hidden {
  display: none;
}


.modal-form input:disabled,
.modal-form select:disabled,
.modal-form textarea:disabled{
  opacity: .65;
  cursor: not-allowed;
}



/* Layout del modal en 2 columnas (si ya tienes algo similar, solo agrega lo de preview) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* Que el campo imagen tome buen espacio y se vea “pro” */
.field-file {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Caja del preview: ocupa TODO el espacio disponible del bloque */
.file-preview-box {
  width: 100%;
  min-height: 210px;              /* ajusta a tu gusto */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen centrada y escalada correctamente */
.file-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* ✅ centra y mantiene proporción */
  display: block;
}

/* Placeholder cuando no hay imagen */
.file-preview-placeholder {
  opacity: .7;
  font-size: 12px;
  padding: 12px;
  text-align: center;
}

/* input file alineado abajo y sin “romper” el grid */
.field-file input[type="file"] {
  width: 100%;
}

/* Responsive: en pantallas chicas 1 columna */
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
}


/* ===== Modal base ===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.modal{
  width: min(1100px, 96vw);
  max-height: 92vh;
  background: #0f141b;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-title{
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}
.modal-close{
  border: none;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 20px;
  cursor:pointer;
}
.modal-body{
  padding: 14px 16px;
  overflow: auto;
  max-height: calc(92vh - 56px - 66px);
}
.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ===== Form ===== */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.field label{
  font-size: 12px;
  color: rgba(255,255,255,.70);
}
.field input, .field select, .field textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  outline: none;
}
.field input::placeholder{ color: rgba(255,255,255,.35); }

.input-readonly{
  opacity: .85;
  cursor: not-allowed;
}

/* ===== File field (Imagen) ===== */
.field-file{
  display:flex;
  flex-direction:column;
  gap: 10px;
}



/* Contenedor del bloque imagen: input arriba, preview grande abajo */
.field-file-block{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Caja del preview grande */
.file-preview-box{
  width: 100%;
  min-height: 240px;            /* ajusta si quieres más alto */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* Imagen centrada y proporcional */
.file-preview-box img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* ✅ clave */
  display:block;
}

.file-preview-placeholder{
  opacity:.7;
  font-size:12px;
  padding:12px;
  text-align:center;
}


/* Columna derecha: normal (no forzamos alto) */
#modalForm .right-col{
  display:flex;
  flex-direction:column;
  gap: 14px;
  min-height: auto;      /* ✅ */
}

/* Panel imagen: NO se estira */
#modalForm .image-panel{
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 0;               /* ✅ no crecer */
  min-height: auto;      /* ✅ */
}

/* Preview FULL WIDTH sin fondo gris */
#modalForm .image-preview-full {
  grid-column: 1 / -1;
  width: 100%;
  height: 260px;        /* ajusta si quieres */
  
  background: transparent;   /* ✅ quitar gris */
  border: none;              /* ✅ quitar borde */
  border-radius: 0;          /* opcional */

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Imagen limpia */
#modalForm .image-preview-full img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


/* === Proceso (Registrar/Editar): bloque de Imagen grande en la columna derecha === */
.form-grid.proc-form .img-preview[data-preview-for="imagen"]{
  width: 100%;
  height: 240px;              /* ajusta si quieres más grande */
  object-fit: contain;
  display: block;
  border: 1px solid #2b3440;
  border-radius: 10px;
  background: #0d1218;
}

/* Mantener Imagen/Preview/Botón solo en la columna derecha */
.form-grid.proc-form label[data-field="imagen"],
.form-grid.proc-form .img-preview[data-preview-for="imagen"],
.form-grid.proc-form > .img-actions-row{
  grid-column: 2 / 3 !important;
}

/* El botón abajo del preview alineado como en tu ejemplo */
.form-grid.proc-form > .img-actions-row{
  justify-content: flex-start;
  margin-top: 8px;
}

/* Input OP readonly visual */
.form-grid input.readonly{
  opacity: .85;
  cursor: not-allowed;
}

/* Overlay: ocupa toda la pantalla */
.modal-overlay {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  background: rgba(0,0,0,.65);
  z-index: 9999;

  display: flex;
  align-items: center;      /* centro vertical */
  justify-content: center;  /* centro horizontal */

  padding: 24px;            /* para pantallas pequeñas */
}

/* Contenedor del modal */
.modal {
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;

  border-radius: 12px;
}




/* =========================================================
   ✅ FIX: Centrar modales (Registrar/Editar) SIEMPRE
   Motivo: en este archivo se redefine .modal más abajo con width/max-height,
   lo cual encoge el overlay y lo “pega” a la izquierda.
   Esta sección al final fuerza el overlay a ocupar toda la pantalla y centra .modal-dialog.
   ========================================================= */
.modal{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: none;
  z-index: 2000;

  /* centrado */
  align-items: center;
  justify-content: center;

  /* respiración en pantallas pequeñas */
  padding: 24px;
}

.modal.show{ display: flex !important; }

.modal-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.60) !important;
  backdrop-filter: blur(2px);
}

/* el cuadro del modal */
.modal-dialog{
  position: relative !important;
  margin: 0 !important;                 /* 👈 evita el “auto” raro */
  width: min(900px, 92vw) !important;
  max-height: calc(100vh - 48px) !important;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #232a36;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 56px rgba(0,0,0,.45);
}

/* scroll interno correcto */
.modal-body{
  overflow: auto;
}

/* variante compacta ya existente */
.modal-dialog.small{
  width: min(520px, 92vw) !important;
}

/* Si por alguna razón existe .modal-overlay en tu HTML, la hacemos compatible */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.60);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.show{ display:flex; }

/* =========================================================
   ✅ FIX: Sidebar - dejar SOLO 1 línea divisoria
   Quita el border-top del grupo para evitar doble línea
   ========================================================= */
.sidebar .group{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Contenedor general del perfil */
.profile-wrapper {
  min-height: calc(100vh - 120px); /* ajusta según tu header */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
}

/* El form centrado y con ancho controlado */
#profileForm {
  width: 100%;
  max-width: 980px; /* controla el ancho total */
}

/* Dos tarjetas centradas, con gap uniforme y misma “línea” */
.profile-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch; /* clave: ambas columnas estiran igual */
  justify-content: center;
}

/* Asegurar que ambas cards ocupen el alto disponible */
.profile-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Empuja el selector de imagen hacia abajo si sobra espacio */
.profile-card .upload-btn {
  margin-top: auto;
}

/* Preview con alto constante para que la card de foto “pese” igual */
.photo-preview {
  width: 100%;
  height: 240px;      /* ya lo traes inline, aquí lo normalizamos */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botones centrados debajo y con proporción visual */
.save-container {
  margin-top: 16px;
  display: flex;
  justify-content: center; /* clave: centrados */
  gap: 12px;
}

/* Responsive: en pantallas chicas, una columna */
@media (max-width: 820px) {
  .profile-columns {
    grid-template-columns: 1fr;
  }
  #profileForm {
    max-width: 520px;
  }
}
.profile-columns > .profile-card.card {
  min-height: 340px; /* ajusta a gusto */
}

.photo-preview {
  border: 1px solid rgba(255,255,255,.08); /* se ve bien en tema oscuro */
}

/* =========================================================
   LIGHT POLISH (pegar AL FINAL)
   Mejora contraste/estructura en modo claro SIN afectar dark
   ========================================================= */

body.light{
  /* fondo ligeramente gris para evitar “blanco plano” */
  background: #f6f8fc;
  color: #0f172a;
}

/* Tokens extra solo para light (no rompen tu sistema actual) */
body.light{
  --borderL: #e5e7eb;
  --borderL2:#d6dde8;
  --shadowSm: 0 1px 2px rgba(15,23,42,.06);
  --shadowMd: 0 10px 28px rgba(15,23,42,.12);
  --surfaceL: #ffffff;
  --surfaceL2:#f1f5ff;
}

/* CONTENT / PAGE */
body.light .content{
  background: #f6f8fc;     /* antes lo tenías blanco plano */
  color: #0f172a;
}

/* TOPBAR */
body.light .topbar{
  background: var(--surfaceL);
  border-bottom: 1px solid var(--borderL);
  box-shadow: var(--shadowSm);
}
body.light .user-box{ color:#64748b; }

/* SIDEBAR (aquí estabas hardcodeando oscuro) */
body.light .sidebar{
  background: var(--surfaceL);
  border-right: 1px solid var(--borderL);
  box-shadow: var(--shadowSm);
}
body.light .sidebar nav a{
  color:#334155;
}
body.light .sidebar nav a:hover{
  background: rgba(15,23,42,.04);
}
body.light .sidebar nav a.active{
  background: rgba(47,106,247,.12);
  color: #1d4ed8;
  border: 1px solid rgba(47,106,247,.22);
}
body.light .sidebar .group-title{ color:#64748b; }
body.light .sidebar-footer{ border-top:1px solid var(--borderL); }
body.light .sidebar-footer .foot-link:hover{ background: rgba(15,23,42,.04); }

/* CARDS / SECTIONS */
body.light .card,
body.light .toolbar-bar,
body.light .filters,
body.light .tabs,
body.light .nav-pills,
body.light .table-wrap{
  background: var(--surfaceL);
  border: 1px solid var(--borderL);
  border-radius: 14px;
  box-shadow: var(--shadowSm);
}

/* KPI Cards: que se vean más “premium” */
body.light .card{
  padding: 14px;
}
body.light .card-title{ color:#64748b; }
body.light .card-value,
body.light .kpi-value{ color:#0f172a; }

/* BOTONES */
body.light button,
body.light .btn-primary,
body.light .btn-secondary,
body.light .chip-btn,
body.light .op-btn{
  border-radius: 12px;
}
body.light .btn-secondary{
  border-color: var(--borderL2);
  color:#0f172a;
  background:#fff;
}
body.light .op-btn{
  border-color: var(--borderL2);
  color:#0f172a;
}
body.light .op-btn:hover{
  background: rgba(15,23,42,.04);
}

/* INPUTS */
body.light input,
body.light select,
body.light textarea,
body.light .search input,
body.light .filter input,
body.light .filter select,
body.light .form-grid input,
body.light .form-grid textarea,
body.light .form-grid select{
  background:#fff;
  color:#0f172a;
  border: 1px solid var(--borderL2);
  border-radius: 12px;
}
body.light input::placeholder,
body.light textarea::placeholder{
  color:#94a3b8;
}
body.light input:focus,
body.light select:focus,
body.light textarea:focus{
  outline:none;
  border-color:#2f6af7;
  box-shadow: 0 0 0 4px rgba(47,106,247,.18);
}

/* TABLAS: header más visible + zebra + hover */
body.light table{
  background:#fff;
}
body.light thead th{
  background: var(--surfaceL2);
  color:#0f172a;
  border-bottom: 1px solid var(--borderL);
  font-weight: 700;
}
body.light th, body.light td{
  border-bottom: 1px solid var(--borderL);
  color:#334155;
}
body.light tbody tr:nth-child(even){
  background: rgba(15,23,42,.02);
}
body.light tbody tr:hover{
  background: rgba(47,106,247,.07);
}

/* MODALES */
body.light .modal-dialog{
  background:#fff;
  border-color: var(--borderL);
  box-shadow: var(--shadowMd);
}
body.light .modal-header,
body.light .modal-footer{
  border-color: var(--borderL);
}
body.light .modal-backdrop{
  background: rgba(15,23,42,.45) !important;
}

/* CHIPS/TABS */
body.light .tab.active,
body.light .nav-pill.active{
  background: rgba(47,106,247,.14);
  color:#1d4ed8;
}