/* Megacontrol — hoja de estilos propia, sin frameworks.
   Azul corporativo sobrio + grises neutros, con variante oscura automática. */

:root {
  --primario: #1f4e79;
  --primario-oscuro: #163a5a;
  --primario-texto: #ffffff;
  --fondo: #f4f6f8;
  --superficie: #ffffff;
  --borde: #d5dbe1;
  --texto: #1c2733;
  --texto-suave: #5b6b7b;
  --aviso: #b26a00;
  --aviso-fondo: #fff3e0;
  --error: #b3261e;
  --primario-suave: rgba(31, 78, 121, 0.1);
  --sombra: 0 8px 28px rgba(20, 40, 60, 0.18);
  --radio: 6px;
  /* Gráfica comparativa (v1.1): azul corporativo = año seleccionado; ámbar apagado =
     año anterior (contexto). Par VALIDADO con el validador de paletas dataviz (modo
     luz, superficie --fondo): banda de luminosidad, suelo de croma, separación CVD y
     contraste OK. Ver src/routes/svg-barras.js. */
  --grafica-actual: #2f6cae;
  --grafica-anterior: #a38a30;
  /* Separador de grupos de columnas (tabla mensual): más marcado que la rejilla
     (--borde) pero sin competir con el texto. */
  --borde-grupo: #a9b6c2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primario: #4a86c5;
    --primario-oscuro: #3a6ea3;
    --primario-texto: #ffffff;
    --fondo: #121821;
    --superficie: #1b232e;
    --borde: #2c3846;
    --texto: #e4e9ef;
    --texto-suave: #9aa8b6;
    --aviso: #e0a44a;
    --aviso-fondo: #3a2c14;
    --error: #f2857e;
    --primario-suave: rgba(74, 134, 197, 0.2);
    --sombra: 0 8px 28px rgba(0, 0, 0, 0.55);
    /* Par VALIDADO en modo oscuro (superficie --fondo #121821). */
    --grafica-actual: #4a86c5;
    --grafica-anterior: #ad9040;
    --borde-grupo: #45586c;
  }
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
  padding-top: 56px; /* deja hueco a la barra fija */
}
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.2; }

/* Barra superior fija */
.barra-superior {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background: var(--primario);
  color: var(--primario-texto);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 50;
}
.barra-superior .marca {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primario-texto);
}
.barra-superior .navegacion {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.barra-superior .navegacion a { color: var(--primario-texto); opacity: 0.9; }
.barra-superior .navegacion a:hover { opacity: 1; }
.barra-superior .usuario {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.usuario-email { font-size: 0.85rem; opacity: 0.9; }

/* Presencia en tiempo real (v1.1): el chip vive a la derecha de la barra, junto al
   usuario (margin-left:auto empuja el bloque presencia+usuario a la derecha). */
/* margin-left:auto empuja el bloque presencia+usuario a la derecha SIEMPRE (aunque el
   chip esté vacío), para que el usuario no salte al aparecer/desaparecer la presencia. */
.presencia { margin-left: auto; display: flex; align-items: center; }
.presencia-chip {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--primario-texto);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El aviso de choque viaja OCULTO dentro de #presencia; app.js lo reubica en el panel. */
#presencia .aviso-choque { display: none; }
.aviso-choque {
  background: var(--aviso-fondo);
  color: var(--aviso);
  border: 1px solid var(--aviso);
  border-radius: var(--radio);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
  font-weight: 600;
}
.aviso-choque-slot:empty { display: none; }
.aviso-choque-slot .aviso-choque { display: block; }

/* Contenido principal */
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; }

/* Tablas: cabecera fija y scroll horizontal en el envoltorio */
.tabla-envoltorio {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
table { border-collapse: collapse; width: 100%; }
th, td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
thead th {
  position: sticky;
  top: 0;
  background: var(--superficie);
  z-index: 1;
  border-bottom: 2px solid var(--borde);
}
tbody tr:hover { background: rgba(31, 78, 121, 0.06); }

/* Formularios: etiqueta encima, campos a todo el ancho */
form .campo { margin-bottom: 1rem; }
form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--texto-suave);
}
input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
}
.error-campo {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--error);
}

/* Botones */
.boton {
  display: inline-block;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--primario);
  color: var(--primario-texto);
}
.boton:hover { background: var(--primario-oscuro); text-decoration: none; }
.boton-secundario {
  background: transparent;
  color: var(--primario);
  border-color: currentColor;
}
.boton-secundario:hover { background: var(--primario-suave); }
/* Sobre el fondo azul de la barra, la variante secundaria es blanca. */
.barra-superior .boton-secundario { color: var(--primario-texto); }
.barra-superior .boton-secundario:hover { background: rgba(255, 255, 255, 0.12); }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--borde);
  color: var(--texto);
}
.badge-aviso { background: var(--aviso-fondo); color: var(--aviso); }

/* Panel lateral (lo rellena htmx): oculto fuera de pantalla por defecto */
.panel {
  position: fixed;
  top: 56px; right: 0; bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  box-shadow: var(--sombra);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
  z-index: 40;
  padding: 1.25rem;
}
.panel.abierto { transform: translateX(0); }

/* Bloque de error genérico */
.error { max-width: 640px; }

/* Listado CRUD: cabecera con acción, barra de filtros y filas clicables */
.listado-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.listado-cabecera h1 { margin: 0; }
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.barra-filtros .campo,
.barra-filtros .filtro { margin: 0; }
.barra-filtros label { margin-bottom: 0.15rem; font-size: 0.85rem; }
/* Enlaces de export (CSV/Excel): a la derecha de la barra de filtros */
.exportar-enlaces { margin-left: auto; display: flex; gap: 0.5rem; }
tbody tr.fila-editable { cursor: pointer; }
tbody tr.fila-vacia td { color: var(--texto-suave); text-align: center; }
.paginacion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.paginacion-actual { color: var(--texto-suave); font-size: 0.9rem; }

/* Panel lateral: cabecera, acciones y campos derivados (solo lectura) */
.panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.panel-cabecera h2 { margin: 0; }
.panel-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.panel-acciones .boton-secundario { margin-left: auto; }
.campo-derivado input:disabled {
  background: var(--fondo);
  color: var(--texto-suave);
  cursor: not-allowed;
}
/* Banner de error a nivel de formulario (formErrors de Zod, restricciones de BD) */
.error-formulario {
  background: var(--aviso-fondo);
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: var(--radio);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}
.boton-peligro {
  background: transparent;
  color: var(--error);
  border-color: currentColor;
}
.boton-peligro:hover { background: var(--error); color: var(--primario-texto); }

/* Admin: banner de éxito, texto de ayuda y fold de cambios en la auditoría */
.ok-formulario {
  background: var(--aviso-fondo);
  color: var(--exito, var(--primario));
  border: 1px solid var(--exito, var(--primario));
  border-radius: var(--radio);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}
.admin-config { max-width: 32rem; }
.ayuda { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--texto-suave); }
.admin details summary { cursor: pointer; color: var(--primario); }
.admin details pre {
  margin: 0.25rem 0 0.5rem;
  padding: 0.5rem;
  overflow-x: auto;
  background: var(--fondo-suave, rgba(127, 127, 127, 0.08));
  border-radius: var(--radio);
  font-size: 0.8rem;
}

/* Dashboard de totales: cabecera con selector de año, tarjetas por área y tabla mensual */
.dashboard-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dashboard-cabecera h1 { margin: 0; }
.dashboard-anio {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.dashboard-anio label { margin-bottom: 0.15rem; font-size: 0.85rem; }
.dashboard-anio input { width: 6rem; }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 6px rgba(20, 40, 60, 0.06);
}
.tarjeta-area {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}
.tarjeta-importe {
  margin: 0 0 0.35rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}
.tarjeta-delta { margin: 0 0 0.5rem; font-weight: 600; }
.tarjeta-delta-nota {
  margin-left: 0.35rem;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.tarjeta-presupuesto { margin: 0; font-size: 0.9rem; color: var(--texto-suave); }

/* Delta interanual: verde positivo / rojo negativo / neutro cuando es 0 (sin color:
   un 0 no es ni mejora ni empeora). Tarjetas y celdas de la tabla. */
.delta-pos { color: #1e7a3d; }
.delta-neg { color: var(--error); }
.delta-cero { color: var(--texto-suave); }
@media (prefers-color-scheme: dark) {
  .delta-pos { color: #5ad07f; }
}

.tabla-dashboard th { text-align: center; }
.tabla-dashboard td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-dashboard td.celda-mes { font-weight: 600; text-align: left; }

/* Agrupación visual por área (feedback de usuario): separador vertical al inicio de
   cada grupo y tinte NEUTRO muy sutil en el grupo central (Online) — nada de colores
   semánticos: el azul/ámbar de la gráfica significan años, no áreas. */
.tabla-dashboard .grupo-inicio { border-left: 2px solid var(--borde-grupo); }
.tabla-dashboard td.grupo-alterno { background-color: rgba(127, 127, 127, 0.05); }
/* En el thead (sticky) el tinte se pinta SOBRE un fondo sólido para que las celdas
   que pasan por debajo no se transparenten. */
.tabla-dashboard thead th.grupo-alterno {
  background: linear-gradient(rgba(127, 127, 127, 0.05), rgba(127, 127, 127, 0.05)) var(--superficie);
}

/* Columna Mes fija en el scroll horizontal (clase celda-mes en th y td): fondo sólido
   del tema para tapar el contenido que pasa por debajo. Capas: celdas normales (auto)
   < columna Mes (2) < thead sticky (3) < celda esquina "Mes" (4), sticky en AMBOS ejes
   (left de esta regla + top del `thead th` global ya existente). */
.tabla-dashboard .celda-mes {
  position: sticky;
  left: 0;
  background: var(--superficie);
  z-index: 2;
}
.tabla-dashboard thead th { z-index: 3; }
.tabla-dashboard thead th.celda-mes { z-index: 4; }
/* Que el resaltado de fila al pasar el ratón no "se corte" en la columna fija: mismo
   tinte del hover pintado sobre fondo sólido. */
.tabla-dashboard tbody tr:hover td.celda-mes {
  background: linear-gradient(rgba(31, 78, 121, 0.06), rgba(31, 78, 121, 0.06)) var(--superficie);
}

/* Gráfica comparativa de producción mensual (v1.1): leyenda, SVG y tooltip flotante.
   Los colores de las barras salen de --grafica-actual / --grafica-anterior (definidas
   arriba para ambos temas); el SVG en línea hereda esas variables del documento. */
.grafica-comparativa { margin-top: 1.5rem; }
.grafica-leyenda {
  display: flex;
  gap: 1.25rem;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.grafica-leyenda-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.grafica-leyenda-muestra {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 2px;
  display: inline-block;
}
.grafica-leyenda-actual { background: var(--grafica-actual); }
.grafica-leyenda-anterior { background: var(--grafica-anterior); }
.grafica-barras { display: block; width: 100%; height: auto; }
.grafica-barras .grafica-sin-datos {
  fill: var(--texto-suave);
  font-size: 14px;
  font-style: italic;
}
.grafica-hit { cursor: default; }
/* Tooltip: div posicionado por app.js (position:fixed), nunca captura el ratón. */
.grafica-tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  max-width: 90vw;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-variant-numeric: tabular-nums;
}
.grafica-tooltip[hidden] { display: none; }

/* Reportes (Tarea 12): pestañas compartidas, barra de filtros + export y tabla */
.reportes-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--borde);
}
.reportes-tabs a {
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  color: var(--texto-suave);
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.reportes-tabs a:hover { color: var(--texto); }
.reportes-tabs a.activa { color: var(--primario); border-bottom-color: var(--primario); }
.reportes-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.reportes-export { display: flex; gap: 0.5rem; }
.reportes th.num, .reportes td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reportes tfoot tr.fila-total td {
  font-weight: 700;
  border-top: 2px solid var(--borde);
  background: var(--primario-suave);
}