/* ══════════════════════════════════════════════════════════════════════
   TEMA "EXPEDIENTE"  ·  data-theme="expediente"
   ══════════════════════════════════════════════════════════════════════

   POR QUÉ EXISTE
   El sistema produce documentos legales — contratos, resoluciones,
   certificados de antigüedad — pero la interfaz no se parecía a lo que
   emite. Este tema trata la ficha del funcionario como el expediente que
   es: papel cálido, filetes en vez de tarjetas flotantes, etiquetas
   colgadas y un serif de display para los nombres y títulos.

   CÓMO SE ACTIVA
   Es un tema más, opt-in, junto a claro / oscuro / premium. Se elige en
   Configuración → Apariencia y se guarda en localStorage (`sgc_theme`).
   Ningún otro tema cambia por existir este archivo.

   ALCANCE DE ESTA PRIMERA ENTREGA
   Los tokens cubren la app entera: casi todo hereda de las variables
   --ds-* y sus alias. Las reglas específicas van sobre la ficha del
   funcionario (.hv2-*), que es la pantalla que se diseñó. Pantallas con
   colores escritos a mano en el HTML no cambian solas — se irán
   migrando a variables.

   LA TIPOGRAFÍA DE INTERFAZ NO SE TOCA
   Hay cientos de `font-family:'Inter',sans-serif` en estilos inline
   dentro del HTML, y ninguna hoja externa puede ganarles sin
   !important. Antes que ensuciar todo el tema con !important —o dejar
   dos sans mezcladas, que se ve peor que una sola— el serif entra solo
   como capa de display, en `--font-display`. Unificar la sans de
   interfaz es una limpieza mecánica aparte: sacar esas declaraciones
   inline y dejarlas heredar de --font.
   ══════════════════════════════════════════════════════════════════════ */

body.ui-2026[data-theme="expediente"],
body[data-theme="expediente"] {
  /* ── Tokens del design system ────────────────────────────────────── */
  --ds-page-bg:        #FAF8F4;   /* papel cálido, saturación muy baja */
  --ds-card:           #FFFFFF;
  --ds-card-elev:      none;      /* editorial: filetes, no sombras */
  --ds-card-elev-hi:   0 1px 2px rgba(35,32,27,.06);
  --ds-border:         #E3DED2;
  --ds-border-strong:  #CFC8BA;
  --ds-text:           #23201B;
  --ds-text-secondary: #4A443B;

  /* --ds-muted sube de un gris claro a #5A5348 (~6.9:1 sobre el papel).
     Es el arreglo de contraste pedido, y va en el token en vez de regla
     por regla: así toda etiqueta que ya use var(--muted) lo hereda. */
  --ds-muted:          #5A5348;

  --ds-surface:        #F4F1E9;

  /* Acento tinta, no color de marca: en un expediente el color se
     reserva para el estado, no para decorar. */
  --ds-accent:         #22303F;
  --ds-accent-soft:    #F1EDE2;
  --ds-accent-border:  #CFC8BA;

  /* Semánticos apagados al tono del papel — el rojo brillante sobre
     crema vibra y grita más de lo que el dato merece. */
  --ds-ok:             #2F5B44;
  --ds-ok-soft:        #E9EFEA;
  --ds-warn:           #8A6518;
  --ds-warn-soft:      #F7F3E8;
  --ds-err:            #8C2F2F;
  --ds-err-soft:       #F6E9E7;
  --ds-info:           #22303F;
  --ds-info-soft:      #EDF0F3;

  /* Radios chicos: el papel no tiene esquinas redondeadas. */
  --ds-radius:         4px;
  --ds-radius-sm:      3px;
  --ds-radius-pill:    999px;

  /* ── Alias que consume el resto de la app ────────────────────────── */
  --bg:             var(--ds-page-bg);
  --card:           var(--ds-card);
  --border:         var(--ds-border);
  --text:           var(--ds-text);
  --text-strong:    var(--ds-text);
  --text-secondary: var(--ds-text-secondary);
  --muted:          var(--ds-muted);
  --muted-light:    #6B655A;
  --surface:        var(--ds-surface);
  --accent:         var(--ds-accent);
  --accent-light:   var(--ds-accent-soft);
  --accent-border:  var(--ds-accent-border);
  --accent-dark:    #16222E;
  --ok:             var(--ds-ok);
  --ok-text:        var(--ds-ok);
  --ok-bg:          var(--ds-ok-soft);
  --ok-light:       var(--ds-ok-soft);
  --warn:           var(--ds-warn);
  --warn-dark:      #5E4713;
  --warn-bg:        var(--ds-warn-soft);
  --warn-light:     var(--ds-warn-soft);
  --warn-border:    rgba(138,101,24,.28);
  --err:            var(--ds-err);
  --err-text:       var(--ds-err);
  --err-bg:         var(--ds-err-soft);
  --err-border:     rgba(140,47,47,.28);
  --blue-light:     var(--ds-info-soft);
  --shadow:         none;
  --shadow-sm:      none;

  /* Serif de display. Spectral está dibujada para pantalla: aguanta los
     tamaños chicos de tabla mejor que una serif de libro, y tiene
     carácter en las mayúsculas, que acá importa porque los nombres van
     completos. El respaldo lleva métricas parecidas para que no salte
     al exportar a PDF, donde la fuente remota no siempre embebe. */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  color-scheme: light;
  background: var(--ds-page-bg);
  color: var(--ds-text);
}

/* ── Estructura general ─────────────────────────────────────────────── */

body[data-theme="expediente"] .sidebar {
  background: #F4F1E9;
  border-right: 1px solid var(--ds-border);
}
body[data-theme="expediente"] .nav-item { color: #5A5348; }
body[data-theme="expediente"] .nav-item:hover { color: #23201B; background: rgba(35,32,27,.05); }
body[data-theme="expediente"] .nav-item.active {
  color: #23201B;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ds-border);
}
body[data-theme="expediente"] .nav-item .nav-ic { filter: grayscale(1); }

body[data-theme="expediente"] .ds-btn,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn {
  background: #fff;
  border: 1px solid var(--ds-border-strong);
  color: #3E382F;
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
}
body[data-theme="expediente"] .ds-btn:hover,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn:hover {
  background: #FCFBF8;
  border-color: #B8B0A0;
  color: #23201B;
}
body[data-theme="expediente"] .ds-btn.primary,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.primary {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: #fff;
}
body[data-theme="expediente"] .ds-btn.primary:hover,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-btn.primary:hover { background: #16222E; }

body[data-theme="expediente"] .fil-pill,
body[data-theme="expediente"] .search-field,
body[data-theme="expediente"] input,
body[data-theme="expediente"] select,
body[data-theme="expediente"] textarea {
  background-color: #fff;
  border-color: var(--ds-border-strong);
  color: #23201B;
  border-radius: var(--ds-radius-sm);
}

/* ── Ficha del funcionario: el expediente ───────────────────────────────
   OJO CON EL PREFIJO :is(#view-…). No es decorativo.

   Las 63 reglas .hv2-* de styles.css estan escritas como
   `:is(#view-hoja-vida, #view-funcionarios, #view-contratos,
   #view-permisos) .hv2-x`. La especificidad de :is() es la MAS ALTA de
   sus argumentos, y ahi hay IDs — asi que esas reglas valen (1,1,0).

   Una regla `body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-x` vale (0,2,1) y
   PIERDE, por mas atributos y clases que tenga: el contador de IDs se
   compara primero. La primera version de este archivo cometia ese
   error y el resultado fue peor que no hacer nada: la banda seguia
   oscura porque su `background` no se podia sobrescribir, pero el color
   del nombre SI cambiaba —la regla base de .hv2-name no define color,
   asi que no habia competencia— y el nombre quedaba en tinta oscura
   sobre fondo oscuro, ilegible.

   Por eso cada regla de abajo repite el mismo prefijo: (1,2,1) gana a
   (1,1,0) sin necesidad de !important. El test tema-expediente.test.js
   lo verifica calculando ambas especificidades. */

/* Sin la caja oscura flotante: la ficha es la hoja, no una tarjeta
   sobre otra. El corte duro oscuro/claro era lo que más pesaba. */
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-shell {
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 2px solid var(--ds-accent);   /* filete de cabecera */
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-band { color: var(--ds-text); padding: 22px 0 0; }

body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-name {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.14;
  color: var(--ds-text);
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-subtitle {
  font-size: 13px;
  color: var(--ds-text-secondary);
  margin-top: 9px;
}

/* El avatar con degradado es lenguaje de app, no de expediente. */
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-avatar {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  color: var(--ds-accent);
}

/* Antecedentes: etiquetas colgadas. La píldora con borde competía con
   su propio valor — el número es el dato, la etiqueta solo lo nombra. */
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metrics {
  gap: 32px;
  padding: 18px 0 16px;
  border-top: 1px solid var(--ds-border);
  margin-top: 20px;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: none;
  color: #5A5348;          /* ~6.9:1 — antes rondaba 3:1 */
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ds-text);
  margin-top: 3px;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-unit { font-size: 13px; font-weight: 400; color: #6B655A; }
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-sub { font-size: 11px; color: #6B655A; margin-top: 3px; }

body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-status-badge {
  border-radius: var(--ds-radius-sm);
  font-weight: 600;
  letter-spacing: .7px;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-status-badge.on {
  color: #2F5B44; background: #E9EFEA; border: 1px solid #C9D8CE;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-status-badge.off {
  color: #453F35; background: #F1EDE2; border: 1px solid var(--ds-border-strong);
}

/* Barra lateral de alertas y actividad */
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-row,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-activity-row {
  border-bottom: 1px solid #EFEBE1;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-title,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-activity-title {
  color: var(--ds-text);
  font-weight: 500;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-meta,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-activity-date {
  color: #6B655A;          /* subido desde #94a3b8 */
  font-variant-numeric: tabular-nums;
}

/* Filas de contrato y campos */
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-row-field-lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  color: #5A5348;
}
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-row-field-val { color: var(--ds-text); }
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-doc-row { border-bottom: 1px solid #EFEBE1; }

/* Encabezados de tabla: el mismo criterio de contraste. */
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) th {
  color: #453F35;
  font-weight: 600;
  letter-spacing: .6px;
}

/* Cifras siempre tabulares: en un expediente las fechas y montos se
   comparan en vertical, y con cifras proporcionales no alinean. */
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) td,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-metric-val,
body[data-theme="expediente"] :is(#view-hoja-vida, #view-funcionarios, #view-contratos, #view-permisos) .hv2-alert-meta {
  font-variant-numeric: tabular-nums;
}

/* ── Pantalla de login ──────────────────────────────────────────────────
   El login se dibuja antes de autenticar, pero data-theme ya está puesto
   en <body> (app-core lo aplica al cargar desde localStorage), así que
   puede seguir el tema como cualquier otra pantalla.

   Su hoja vive dentro de auth-cliente.js con selectores de una sola
   clase (.lg-title, .lg-screen…), así que estas reglas —body + clase—
   le ganan por especificidad sin necesidad de !important. */

body[data-theme="expediente"] #auth-modal {
  background: var(--ds-page-bg);
  /* Sin el orbe malva: dos lavados de tinta y ocre muy tenues, del mismo
     tono que el papel. */
  background-image:
    radial-gradient(760px circle at 80% -12%, rgba(34,48,63,.055), transparent 55%),
    radial-gradient(560px circle at 6% 104%, rgba(138,101,24,.045), transparent 50%);
}
body[data-theme="expediente"] #auth-modal a { color: #22303F; }
body[data-theme="expediente"] #auth-modal a:hover { color: #8A6518; }
body[data-theme="expediente"] #auth-modal input::placeholder { color: #8C8477; }

/* La hoja: filete y radio chico, sin vidrio ni sombra profunda. */
body[data-theme="expediente"] .lg-screen {
  background: #fff;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  box-shadow: 0 1px 2px rgba(35,32,27,.05);
  backdrop-filter: none;
}
body[data-theme="expediente"] .lg-orb { display: none; }
body[data-theme="expediente"] .lg-topbar {
  border-bottom: 1px solid var(--ds-border);
  background: #FCFBF8;
}
body[data-theme="expediente"] .lg-topbar-title { color: var(--ds-text); font-weight: 600; }

body[data-theme="expediente"] .lg-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ds-text);
}
body[data-theme="expediente"] .lg-subtitle { color: #5A5348; }

/* Rótulos de campo: mismo criterio de contraste que el resto del tema. */
body[data-theme="expediente"] #auth-modal label {
  color: #453F35;
  font-weight: 600;
}
body[data-theme="expediente"] #auth-modal input {
  background: #fff;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
}
body[data-theme="expediente"] #auth-modal input:focus {
  border-color: var(--ds-accent);
  outline: none;
}

body[data-theme="expediente"] .lg-btn-primary {
  background: var(--ds-accent);
  color: #fff;
  border-radius: var(--ds-radius-sm);
}
body[data-theme="expediente"] .lg-btn-primary:hover { background: #16222E; }
/* Deshabilitado con relleno propio, no bajando la opacidad de la tinta:
   sobre papel, un 60% de #22303F da un gris azulado turbio. */
body[data-theme="expediente"] .lg-btn-primary:disabled {
  opacity: 1;
  background: var(--ds-surface);
  color: #8C8477;
  border: 1px solid var(--ds-border-strong);
}
body[data-theme="expediente"] .lg-btn-google {
  background: #fff;
  color: #3E382F;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
}
body[data-theme="expediente"] .lg-btn-google:hover { background: #FCFBF8; }
body[data-theme="expediente"] .lg-footnote { color: #6B655A; }

/* La mascota se queda: es la personalidad del producto y no hay motivo
   para perderla. Solo cambia de paleta — malva a tinta— para que
   pertenezca a esta pantalla en vez de quedar como un injerto. */
body[data-theme="expediente"] .lg-lockbody {
  background: linear-gradient(145deg, #3C5064, #22303F);
  box-shadow: inset 0 -8px 16px rgba(12,18,25,.22), 0 8px 22px rgba(34,48,63,.20);
}
body[data-theme="expediente"] .lg-shackle { border-color: #1A2733; }
body[data-theme="expediente"] .lg-lid { background: #4E6076; }
body[data-theme="expediente"] .lg-pupil { background: #1A2733; }