/* ===========================================================================
   Portal de Clientes — SEDER
   ===========================================================================
   Comparte la identidad del panel de oficina (azul marino #0F2A44 + verde
   azulado #1AA5A0), pero NO copia su estructura: el panel es un escritorio de
   trabajo con menú lateral; este es un portal de consulta, así que la
   navegación va en una banda superior y el contenido respira debajo.

   Claro por omisión, con interruptor a oscuro. Los colores viven en un solo
   lugar (:root) para que cambiar la marca sea cambiar seis líneas.
   =========================================================================== */

:root {
  /* ---- Marca SEDER ---- */
  --marino:        #0F2A44;
  --marino-2:      #123a54;
  --marino-3:      #0a2137;
  --verde:         #1AA5A0;
  --verde-oscuro:  #0f857e;
  --verde-claro:   #7fd3ce;
  --verde-suave:   rgba(26, 165, 160, .12);

  --banda: linear-gradient(112deg, #0F2A44 0%, #123a54 46%, #10756e 100%);
  --realce: linear-gradient(135deg, #0F2A44 0%, #10756e 55%, #1AA5A0 130%);

  /* ---- Semáforo ---- */
  --rojo:      #d92d3c;
  --rojo-bg:   rgba(217, 45, 60, .10);
  --ambar:     #b8770a;
  --ambar-bg:  rgba(184, 119, 10, .12);
  --verde-ok:  #17845a;
  --verde-bg:  rgba(23, 132, 90, .12);

  /* ---- Superficies ---- */
  --fondo:      #eef1f7;
  --fondo-deco: radial-gradient(1100px 520px at 100% -15%, rgba(15,42,68,.07), transparent 62%),
                radial-gradient(900px 480px at -10% 108%, rgba(26,165,160,.09), transparent 58%);
  --tarjeta:    #ffffff;
  --tarjeta-2:  #f6f8fc;
  --tarjeta-3:  #eef2f8;
  --linea:      #e0e6f0;
  --linea-2:    #ccd5e4;

  --texto:      #17203a;
  --texto-2:    #5c6884;
  --texto-3:    #8f9ab4;
  --sobre-marca: #ffffff;

  --sombra-s: 0 1px 2px rgba(20,32,58,.05), 0 1px 3px rgba(20,32,58,.04);
  --sombra-m: 0 6px 18px rgba(20,32,58,.07), 0 2px 6px rgba(20,32,58,.05);
  --sombra-g: 0 22px 48px rgba(20,32,58,.14), 0 8px 20px rgba(20,32,58,.08);

  --r-s: 9px;
  --r:   13px;
  --r-g: 18px;

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  color-scheme: light;
}

[data-tema="oscuro"] {
  --verde:        #2fbdb5;
  --verde-claro:  #8fe0da;
  --verde-suave:  rgba(47, 189, 181, .16);
  --banda: linear-gradient(112deg, #0a1b2d 0%, #0f2a44 52%, #0d5f5a 100%);

  --rojo: #ff8a94;  --rojo-bg: rgba(255,138,148,.13);
  --ambar: #f0b44a; --ambar-bg: rgba(240,180,74,.13);
  --verde-ok: #4fd6a0; --verde-bg: rgba(79,214,160,.13);

  --fondo:     #0a1120;
  --fondo-deco: radial-gradient(1100px 520px at 100% -15%, rgba(26,165,160,.10), transparent 62%),
                radial-gradient(900px 480px at -10% 108%, rgba(15,42,68,.55), transparent 58%);
  --tarjeta:   #111c2f;
  --tarjeta-2: #16233a;
  --tarjeta-3: #1b2a43;
  --linea:     rgba(255,255,255,.09);
  --linea-2:   rgba(255,255,255,.17);

  --texto:   #e9eef8;
  --texto-2: #9fadc5;
  --texto-3: #74829e;

  --sombra-s: 0 1px 2px rgba(0,0,0,.35);
  --sombra-m: 0 8px 22px rgba(0,0,0,.40);
  --sombra-g: 0 24px 52px rgba(0,0,0,.55);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-ui);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background-image: var(--fondo-deco); background-attachment: fixed;
  display: flex; flex-direction: column;   /* el pie se va hasta abajo */
}
main { flex: 1 0 auto; }

/* ===========================================================================
   Banda superior — la firma visual del portal
   =========================================================================== */
.topbar {
  display: flex; align-items: center; gap: 15px;
  padding: 0 clamp(18px, 4vw, 46px);
  height: 74px;
  background: var(--banda);
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 2px 14px rgba(10, 25, 45, .22);
}
/* Filo verde: el detalle que amarra la banda con el acento de la marca */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--verde) 0%, rgba(26,165,160,0) 62%);
}
.topbar img {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,.10); padding: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.topbar-text { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-title {
  font-weight: 800; letter-spacing: .13em; font-size: 14.5px; color: #fff;
}
.topbar-sub { font-size: 11.5px; color: var(--verde-claro); letter-spacing: .1em; font-weight: 600; }

.topbar-derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-usuario { text-align: right; line-height: 1.35; }
.topbar-usuario b { display: block; font-size: 13.5px; color: #fff; font-weight: 700; }
.topbar-usuario span { font-size: 12px; color: rgba(255,255,255,.62); }

.btn-tema {
  width: 38px; height: 38px; flex: none; padding: 0;
  border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s;
}
.btn-tema:hover { background: rgba(255,255,255,.20); }

/* ===========================================================================
   Contenedores
   =========================================================================== */
.contenedor { max-width: 1460px; margin: 0 auto; padding: 30px clamp(18px, 4vw, 46px) 70px; }
.contenedor-angosto { max-width: 430px; margin: 0 auto; padding: 8vh 20px 60px; }

h1 { font-size: 27px; margin: 0 0 8px; font-weight: 800; letter-spacing: -.015em; }
.lead { color: var(--texto-2); margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; }
.seccion-titulo { font-size: 17px; font-weight: 750; margin: 0 0 4px; letter-spacing: -.01em; }
.helper-text { color: var(--texto-2); font-size: 13.5px; line-height: 1.6; }

/* ---- Chips de servicios ---- */
.serv-lista { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.lateral .serv-lista { flex-direction: column; align-items: stretch; }
.lateral .serv-chip { justify-content: flex-start; font-size: 12px; padding: 8px 13px; }
.serv-chip {
  background: var(--tarjeta); border: 1px solid var(--linea);
  color: var(--texto); box-shadow: var(--sombra-s);
  border-radius: 999px; padding: 7px 15px 7px 12px;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.serv-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave);
}

/* ===========================================================================
   Disposición: menú a la izquierda, contenido a la derecha
   ===========================================================================
   Antes las secciones iban en una tira horizontal arriba: con nueve opciones
   la última se salía de la pantalla y se perdía. En columna caben todas, se
   leen de un vistazo y de paso se aprovecha el espacio que quedaba vacío.
   =========================================================================== */
.disposicion {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.lateral {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 14px;
}
.lateral-tit {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 700; padding: 0 2px;
}

.menu {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 8px;
  box-shadow: var(--sombra-s);
}
.menu-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  background: none; border: none;
  color: var(--texto-2);
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: var(--r-s);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.menu-item i { font-size: 18px; opacity: .8; flex: none; }
.menu-item span { line-height: 1.3; }
.menu-item:hover { background: var(--tarjeta-3); color: var(--texto); }
.menu-item.is-active {
  background: var(--verde-suave); color: var(--verde-oscuro);
}
.menu-item.is-active i { opacity: 1; }
/* Marca de la sección activa, igual que en el panel de oficina */
.menu-item.is-active::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3.5px; height: 62%; border-radius: 0 4px 4px 0; background: var(--verde);
}
[data-tema="oscuro"] .menu-item.is-active { color: var(--verde-claro); }

/* Encabezado de la sección abierta */
.cab-seccion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--linea);
}
.cab-seccion h1 { margin: 0; font-size: 23px; }
.cab-seccion .barra-periodo { margin: 0; }

/* ===========================================================================
   Barra de periodo
   =========================================================================== */
.barra-periodo {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin: 24px 0 20px;
}
.barra-periodo .etiqueta { font-size: 13px; color: var(--texto-2); }
.periodo-btns {
  display: inline-flex; padding: 3px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 11px; box-shadow: var(--sombra-s);
}
.periodo-btns button {
  background: transparent; border: none; border-radius: 8px;
  color: var(--texto-2); font-family: inherit; font-size: 13.5px; font-weight: 650;
  padding: 8px 17px; cursor: pointer;
  transition: background .14s, color .14s;
}
.periodo-btns button:hover { color: var(--texto); background: var(--tarjeta-3); }
.periodo-btns button.is-active {
  background: var(--realce); color: #fff; box-shadow: 0 2px 8px rgba(15,42,68,.28);
}

/* ===========================================================================
   Indicadores
   =========================================================================== */
.kpi-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Cinco indicadores: se acomodan solos según el ancho que haya */
.kpi-fila-5 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.kpi {
  position: relative; overflow: hidden;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 19px 22px;
  box-shadow: var(--sombra-s);
  transition: box-shadow .18s, transform .18s;
}
.kpi:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); }
/* Barrita de color a la izquierda: dice el estado sin necesidad de leer */
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--linea-2);
}
.kpi-num {
  font-size: 33px; font-weight: 800; font-family: var(--font-mono);
  line-height: 1.08; letter-spacing: -.02em; color: var(--texto);
}
.kpi-lbl {
  display: block; font-size: 12.5px; color: var(--texto-2);
  margin-top: 6px; font-weight: 550;
}
.kpi.alerta::before { background: var(--rojo); }
.kpi.alerta .kpi-num { color: var(--rojo); }
.kpi.bien::before { background: var(--verde-ok); }
.kpi.bien .kpi-num { color: var(--verde-ok); }

/* ===========================================================================
   Tablas
   =========================================================================== */
.tabla-wrap {
  margin-top: 20px; background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sombra-s);
}
.tabla-cli { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-cli th {
  text-align: left; padding: 12px 20px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 700;
  background: var(--tarjeta-2);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.tabla-cli td { padding: 13px 20px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-cli tbody tr:last-child td { border-bottom: none; }
.tabla-cli tbody tr { transition: background .12s; }
.tabla-cli tbody tr:hover { background: var(--tarjeta-2); }
.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.malo    { color: var(--rojo);     font-weight: 700; }
.regular { color: var(--ambar);    font-weight: 700; }
.bueno   { color: var(--verde-ok); font-weight: 700; }

.vacio { padding: 46px 20px; text-align: center; color: var(--texto-2); font-size: 14.5px; }
.vacio-bien { color: var(--verde-ok); font-weight: 600; }

/* ===========================================================================
   Tarjetas y formularios (pantalla de acceso)
   =========================================================================== */
.card {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-g); padding: 30px 28px;
  box-shadow: var(--sombra-g);
}
.contenedor-angosto .card { position: relative; overflow: hidden; }
.contenedor-angosto .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--realce);
}

.field-label {
  display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 700; margin: 17px 0 7px;
}
.field-label:first-child { margin-top: 0; }
.input {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px;
  background: var(--tarjeta-2); color: var(--texto);
  border: 1px solid var(--linea-2); border-radius: var(--r-s); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:focus {
  border-color: var(--verde); background: var(--tarjeta);
  box-shadow: 0 0 0 3.5px var(--verde-suave);
}
.input::placeholder { color: var(--texto-3); }
.input-clave {
  font-family: var(--font-mono); font-size: 19px;
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
}

.btn {
  width: 100%; padding: 13px 18px; margin-top: 18px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: none; border-radius: var(--r-s); cursor: pointer;
  background: var(--realce); color: #fff;
  box-shadow: 0 3px 12px rgba(15,42,68,.25);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.09); box-shadow: 0 5px 16px rgba(15,42,68,.30); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }

.btn-ghost {
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--linea-2); box-shadow: var(--sombra-s);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--verde-suave); border-color: var(--verde); filter: none;
  box-shadow: var(--sombra-s);
}
.btn-salir {
  width: auto; margin: 0; padding: 9px 16px; font-size: 13.5px; font-weight: 650;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  color: #fff; box-shadow: none;
}
.btn-salir:hover { background: rgba(255,255,255,.20); filter: none; box-shadow: none; }

.error-msg:empty { display: none; }   /* si no hay error, no se dibuja nada */
.error-msg {
  color: var(--rojo); background: var(--rojo-bg);
  border: 1px solid var(--rojo); border-radius: var(--r-s);
  padding: 11px 13px; font-size: 13.5px; margin-top: 14px; line-height: 1.5;
}

.spinner {
  display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: girar .7s linear infinite; vertical-align: -2px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ===========================================================================
   Pie
   =========================================================================== */
.pie {
  border-top: 1px solid var(--linea);
  margin-top: auto; padding: 20px clamp(18px, 4vw, 46px);
  color: var(--texto-3); font-size: 12.5px;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--tarjeta);
}
.pie b { color: var(--verde-oscuro); letter-spacing: .06em; }
[data-tema="oscuro"] .pie b { color: var(--verde-claro); }

/* ===========================================================================
   Pantallas chicas
   =========================================================================== */
@media (max-width: 1080px) {
  .kpi-fila { grid-template-columns: repeat(2, 1fr); }
  /* En pantallas angostas el menú se acuesta arriba del contenido */
  .disposicion { grid-template-columns: 1fr; gap: 18px; }
  .lateral { position: static; }
  .lateral .serv-lista { flex-direction: row; }
  .menu { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu-item { white-space: nowrap; }
  .menu-item.is-active::before { display: none; }
}
@media (max-width: 760px) {
  .topbar { height: 64px; }
  .topbar img { width: 36px; height: 36px; }
  .topbar-usuario { display: none; }
  .contenedor { padding: 22px 16px 50px; }
  h1 { font-size: 22px; }
  .tabla-wrap { overflow-x: auto; }
  .tabla-cli th, .tabla-cli td { padding: 11px 13px; font-size: 13px; }
}
@media (max-width: 520px) {
  .kpi-fila { grid-template-columns: 1fr; }
  .kpi-num { font-size: 28px; }
}

/* ===========================================================================
   Selector de servicio
   =========================================================================== */
.lateral .serv-chip {
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.lateral .serv-chip b { font-weight: 800; margin-right: 4px; }
.lateral .serv-chip:hover { border-color: var(--linea-2); }
.lateral .serv-chip.is-active {
  border-color: var(--verde); background: var(--verde-suave);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.lateral .serv-chip.is-active::before { box-shadow: 0 0 0 3px rgba(26,165,160,.25); }

/* ===========================================================================
   Tarjetas del resumen: ahora son botones que llevan a su detalle
   =========================================================================== */
button.kpi {
  font-family: inherit; text-align: left; cursor: pointer; width: 100%;
}
button.kpi:hover { border-color: var(--verde); }
button.kpi:active { transform: translateY(0); }
button.kpi::after {
  content: "›"; position: absolute; right: 14px; top: 13px;
  color: var(--texto-3); font-size: 19px; line-height: 1;
  opacity: 0; transition: opacity .14s, transform .14s; transform: translateX(-3px);
}
button.kpi:hover::after { opacity: 1; transform: translateX(0); }

/* Botón chico dentro de una tabla */
.btn-fila {
  width: auto; margin: 0; padding: 6px 13px; font-size: 13px; font-weight: 650;
  box-shadow: none;
}

/* ===========================================================================
   Ventana sobrepuesta (expediente de una persona)
   =========================================================================== */
.modal-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 20, 36, .62);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 20px 20px;
  overflow-y: auto;
}
.modal {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-g); box-shadow: var(--sombra-g);
  width: 100%; max-width: 720px; overflow: hidden;
}
.modal-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--linea);
  background: var(--tarjeta-2);
}
.modal-tit { font-size: 17px; font-weight: 750; }
.modal-cuerpo { padding: 6px 0 4px; }
.modal-cuerpo .tabla-cli th:first-child,
.modal-cuerpo .tabla-cli td:first-child { padding-left: 22px; }
.modal-cuerpo .tabla-cli th:last-child,
.modal-cuerpo .tabla-cli td:last-child { padding-right: 22px; }
.modal-cuerpo > .helper-text { padding: 18px 22px; }