/* ============================================================================
   Tesis - estilos de la interfaz (UI). Diseño de referencia: docs/diseno.md §8, §9.
   Los colores son la paleta exacta declarada por Checo (requisitos §8): NO se altera.
   Sin negro puro (#000000) en ningún token. Contraste AA en el texto legible.
   ============================================================================ */

/* ---- Tokens de tema: 7 hex modo claro + 7 hex modo oscuro (14 declarados) ---- */
:root {
  /* Modo claro (requisitos §8) */
  --fondo: #F8FAFC;
  --superficie: #FFFFFF;
  --sidebar: #EEF3F8;
  --primario: #2563EB;
  --secundario: #0D9488;
  --texto: #0F172A;
  --acento: #F59E0B;

  /* Neutros derivados por opacidad del texto (diseno.md §8.3): no son hex nuevos */
  --texto-primario: var(--texto);
  --texto-secundario: color-mix(in srgb, var(--texto) 70%, transparent);
  --texto-atenuado: color-mix(in srgb, var(--texto) 55%, transparent);
  --texto-deshabilitado: color-mix(in srgb, var(--texto) 40%, transparent);
  --borde-susurro: color-mix(in srgb, var(--texto) 12%, transparent);
  --borde-fuerte: color-mix(in srgb, var(--texto) 20%, transparent);

  --radio-boton: 6px;
  --radio-tarjeta: 10px;
  --radio-panel: 14px;
  --u: 8px; /* unidad base de espaciado */
  --fuente: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tam-base: 16px;
  --alto-linea: 1.5;
  --tactil: 44px;
}

[data-tema="oscuro"] {
  /* Modo oscuro (requisitos §8) */
  --fondo: #0B1220;
  --superficie: #111827;
  --sidebar: #121C2E;
  --primario: #60A5FA;
  --secundario: #2DD4BF;
  --texto: #E5E7EB;
  --acento: #FBBF24;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { overflow-x: clip; max-width: 100%; }
body {
  margin: 0;
  max-width: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--tam-base);
  line-height: var(--alto-linea);
}
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; font-weight: 600; }
h1 { font-size: 24px; line-height: 1.3; }
h2 { font-size: 18px; line-height: 1.4; font-weight: 500; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primario); }

:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.oculto { display: none !important; }

/* ---- Controles ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tactil); padding: 0 16px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-boton);
  background: var(--superficie); color: var(--texto);
  font-weight: 500; cursor: pointer;
}
.btn:hover { border-color: var(--primario); }
/* El ACENTO marca SOLO la acción principal de la pantalla (CA-35, diseno.md §3.3). */
.btn-accion {
  background: var(--acento);
  border-color: var(--acento);
  color: #0B1220; /* texto oscuro fijo del tema, nunca #000000 */
  font-weight: 600;
}
.btn-accion:hover { filter: brightness(0.95); }
.btn:disabled { color: var(--texto-deshabilitado); cursor: default; border-color: var(--borde-susurro); }

.campo { display: block; margin-bottom: calc(var(--u) * 2); }
.campo span { display: block; margin-bottom: 4px; color: var(--texto-secundario); font-size: 14px; }
.campo input, .campo select {
  width: 100%; min-height: var(--tactil); padding: 0 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-boton);
  background: var(--superficie); color: var(--texto);
}
.aviso-error { color: var(--secundario); font-size: 14px; min-height: 1.4em; }
.aviso-error[data-tono="malo"] { color: #B91C1C; } /* rojo de aviso: hex propuesto, pendiente de Checo */
.aviso-ok { color: var(--secundario); }
.dato-meta { color: var(--texto-atenuado); font-size: 14px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-susurro);
  border-radius: var(--radio-tarjeta);
}

/* ---- Pantalla de acceso (única vista SIN sesión) ---- */
.acceso {
  min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--u) * 3);
  background: var(--fondo);
}
.acceso .caja { width: min(420px, 100%); padding: calc(var(--u) * 4); }
.acceso .marca { text-align: center; font-size: 28px; font-weight: 600; margin-bottom: calc(var(--u) * 3); color: var(--texto); }
.acceso .nota { margin-top: calc(var(--u) * 2); color: var(--texto-atenuado); font-size: 14px; text-align: center; }

/* ---- Armazón con sesión: menú IZQUIERDO + panel ---- */
.armazon { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }

.menu-lateral {
  background: var(--sidebar);
  border-right: 1px solid var(--borde-susurro);
  display: flex; flex-direction: column; padding: calc(var(--u) * 2);
  position: sticky; top: 0; height: 100dvh;
}
.menu-lateral .marca { font-size: 20px; font-weight: 600; padding: calc(var(--u)) calc(var(--u) * 1.5) calc(var(--u) * 2); }
.menu-lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.entrada {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: var(--tactil); padding: 0 calc(var(--u) * 1.5);
  border: 0; border-radius: var(--radio-boton); background: transparent;
  color: var(--texto-atenuado); cursor: pointer; text-align: left;
  border-left: 3px solid transparent; /* barra de estado activo */
}
.entrada svg { width: 20px; height: 20px; flex: none; }
.entrada:hover { color: var(--texto); }
.entrada[aria-current="page"] {
  background: color-mix(in srgb, var(--primario) 12%, transparent);
  color: var(--texto);
  border-left-color: var(--primario);
  font-weight: 500;
}
.entrada[aria-current="page"] svg { color: var(--primario); }
.menu-lateral .pie { border-top: 1px solid var(--borde-susurro); padding-top: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 2); }
.menu-lateral .usuario { display: flex; align-items: center; gap: 8px; color: var(--texto-secundario); font-size: 14px; margin-bottom: 6px; word-break: break-all; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primario); color: #0B1220; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }

/* Barra superior: solo en pantallas chicas */
.barra-movil { display: none; align-items: center; gap: 8px; padding: calc(var(--u)) calc(var(--u) * 1.5); background: var(--sidebar); border-bottom: 1px solid var(--borde-susurro); position: sticky; top: 0; z-index: 3; }
.barra-movil .marca { font-weight: 600; flex: 1; }
.btn-icono { min-width: var(--tactil); min-height: var(--tactil); padding: 0; border: 1px solid var(--borde-susurro); background: var(--superficie); border-radius: var(--radio-boton); cursor: pointer; display: grid; place-items: center; }
.btn-icono svg { width: 22px; height: 22px; }

.panel { padding: calc(var(--u) * 3); max-width: 100%; }
.panel .cabecera { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 3); flex-wrap: wrap; }
.panel .cabecera .titulos { flex: 1; min-width: 0; }
.panel .cabecera .acciones { display: flex; gap: 8px; }
.lectura { max-width: 760px; }
.bloque { padding: calc(var(--u) * 2.5); margin-bottom: calc(var(--u) * 2); }
.bloque h2 { margin-bottom: calc(var(--u) * 1.5); }
.vacio { color: var(--texto-atenuado); padding: calc(var(--u) * 3); text-align: center; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.5) 0; border-bottom: 1px solid var(--borde-susurro); flex-wrap: wrap; }
.zona-subida { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-tarjeta); padding: calc(var(--u) * 3); text-align: center; background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde-susurro); }
.tabla th { color: var(--texto-atenuado); font-weight: 500; font-size: 14px; }

/* Interruptor de accesibilidad */
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: var(--tactil); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .pista { width: 44px; height: 26px; border-radius: 999px; background: var(--borde-fuerte); position: relative; transition: background 0.15s; flex: none; }
.interruptor .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--superficie); transition: transform 0.15s; }
.interruptor input:checked + .pista { background: var(--primario); }
.interruptor input:checked + .pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--primario); outline-offset: 2px; }

/* ---- MODO ACCESIBILIDAD (CA-36, diseno.md §7) ---- */
[data-accesible="1"] { --tam-base: 18px; --alto-linea: 1.7; --tactil: 48px; }
[data-accesible="1"] .dato-meta, [data-accesible="1"] .campo span { color: var(--texto-secundario); }
[data-accesible="1"] .interruptor .pista, [data-accesible="1"] .interruptor .pista::after { transition: none; }
[data-accesible="1"] * { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- CELULAR (CA-37): el menú se repliega a barra superior + panel deslizante ---- */
@media (max-width: 1023px) {
  .armazon { grid-template-columns: 1fr; }
  .barra-movil { display: flex; }
  .menu-lateral {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 82vw); z-index: 4;
    transform: translateX(-100%); transition: transform 0.2s ease; height: 100dvh;
  }
  .menu-lateral[data-abierto="1"] { transform: translateX(0); }
  .velo { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 3; }
  .panel { padding: calc(var(--u) * 2); }
  .panel .cabecera { gap: calc(var(--u)); }
  .tabla thead { display: none; }
  .tabla tr { display: block; border: 1px solid var(--borde-susurro); border-radius: var(--radio-tarjeta); margin-bottom: 8px; padding: 6px 10px; }
  .tabla td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
  .tabla td::before { content: attr(data-col); color: var(--texto-atenuado); font-size: 13px; }
}