/* ==========================================================================
   Sistema de Corrida Financiera - hoja de estilos unica
   --------------------------------------------------------------------------
   Estructura, siguiendo el patron de LabDentalCRM (Ardem):
     1. Tokens de marca 3E        (--3e-*)   fuente de verdad del color
     2. Remapeo a Bootstrap       (--bs-*)   Bootstrap consume nuestros tokens
     3. Tema oscuro               [data-bs-theme="dark"]
     4. Tipografia
     5. Componentes de aplicacion
   Los tokens se definen UNA vez y todo lo demas los referencia. Nunca escribir
   un hex suelto fuera del bloque 1.
   ========================================================================== */

/* ── 1. Tokens de marca 3E ───────────────────────────────────────────────── */
/* Paleta oficial: Morado Real primario, Naranja Brasa SOLO acento, Gris
   Pizarra neutro. Proporcion 60/30/10 - el naranja no es un segundo primario. */
:root {
  --3e-morado-50:  #f4f0fb;
  --3e-morado-100: #e6dcf6;
  --3e-morado-200: #cdb9ed;
  --3e-morado-300: #b596e4;
  --3e-morado-400: #9c73db;
  --3e-morado-500: #7a46c2;  /* Morado Real - primario */
  --3e-morado-600: #68389f;  /* hover */
  --3e-morado-700: #522c7d;
  --3e-morado-800: #3c205b;
  --3e-morado-900: #261439;

  --3e-naranja-100: #fce7d8;
  --3e-naranja-300: #f2ab77;
  --3e-naranja-500: #e8722a;  /* Naranja Brasa - acento */
  --3e-naranja-600: #c65c1c;
  --3e-naranja-700: #9c4715;

  --3e-gris-50:  #f9fafb;
  --3e-gris-100: #f3f4f6;
  --3e-gris-200: #e5e7eb;
  --3e-gris-300: #d1d5db;
  --3e-gris-400: #9ca3af;
  --3e-gris-500: #6b7280;  /* Gris Pizarra - neutro */
  --3e-gris-600: #4b5563;
  --3e-gris-700: #374151;
  --3e-gris-800: #1f2937;
  --3e-gris-900: #111827;

  /* Semanticos financieros. En un estado de resultados el color comunica signo,
     asi que nunca es el unico indicador: las perdidas ademas van entre
     parentesis, segun convencion contable. */
  --3e-positivo: #15803d;
  --3e-negativo: #b91c1c;
  --3e-advertencia: #b45309;

  /* Geometria y superficies.

     Tres planos, no dos, y el orden importa:
       fondo      - el lienzo, detras de todo
       superficie - lo que se levanta del lienzo: tarjetas, barras, tablas
       campo      - donde se teclea, dentro de una superficie

     Bootstrap pinta .card con --bs-body-bg, asi que por omision la tarjeta y el
     lienzo son el MISMO color y solo los separa un borde de 1px. Aqui el lienzo
     baja un escalon de la escala de grises para que la separacion se vea sin
     depender de la linea. Ver D53. */
  --3e-radius: 0.5rem;
  --3e-radius-sm: 0.3rem;
  --3e-sidebar-width: 15rem;
  --3e-topbar-height: 3.5rem;
  --3e-superficie: #ffffff;
  --3e-fondo: var(--3e-gris-100);
  --3e-campo: #ffffff;
  --3e-campo-inerte: var(--3e-gris-100);
  --3e-borde: var(--3e-gris-200);
  --3e-borde-campo: var(--3e-gris-300);
  --3e-texto: var(--3e-gris-900);
  --3e-texto-suave: var(--3e-gris-500);

  /* Tipografia de marca. Siempre con pila de reserva real. */
  --3e-fuente-titulo: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --3e-fuente-cuerpo: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --3e-fuente-cifras: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ── 2. Remapeo a Bootstrap ──────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--3e-morado-500);
  --bs-primary-rgb: 122, 70, 194;
  --bs-primary-text-emphasis: var(--3e-morado-700);
  --bs-primary-bg-subtle: var(--3e-morado-50);
  --bs-primary-border-subtle: var(--3e-morado-200);

  --bs-secondary: var(--3e-gris-500);
  --bs-secondary-rgb: 107, 114, 128;

  --bs-body-bg: var(--3e-fondo);
  --bs-body-color: var(--3e-texto);
  --bs-border-color: var(--3e-borde);
  --bs-border-radius: var(--3e-radius);
  --bs-border-radius-sm: var(--3e-radius-sm);

  --bs-body-font-family: var(--3e-fuente-cuerpo);
  --bs-link-color: var(--3e-morado-600);
  --bs-link-hover-color: var(--3e-morado-700);
  --bs-link-color-rgb: 104, 56, 159;
}

.btn-primary {
  --bs-btn-bg: var(--3e-morado-500);
  --bs-btn-border-color: var(--3e-morado-500);
  --bs-btn-hover-bg: var(--3e-morado-600);
  --bs-btn-hover-border-color: var(--3e-morado-600);
  --bs-btn-active-bg: var(--3e-morado-700);
  --bs-btn-active-border-color: var(--3e-morado-700);
  --bs-btn-disabled-bg: var(--3e-morado-300);
  --bs-btn-disabled-border-color: var(--3e-morado-300);
}

/* Bootstrap define --bs-card-bg DENTRO de la regla .card, no en :root, asi que
   remapearlo arriba no serviria de nada: la regla local volveria a ganar. Tiene
   que redefinirse aqui, sobre el mismo selector y despues de bootstrap.min.css. */
.card {
  --bs-card-bg: var(--3e-superficie);
  --bs-card-border-color: var(--3e-borde);
}

/* Los controles de captura no heredan del cuerpo: Bootstrap les pone
   background-color: var(--bs-body-bg) directo, asi que al oscurecer el lienzo
   saldrian grises dentro de una tarjeta blanca. El campo tiene su propio token. */
.form-control,
.form-select {
  background-color: var(--3e-campo);
  border-color: var(--3e-borde-campo);
}
/* Deshabilitado y solo lectura no son un campo: pierden el contraste contra su
   tarjeta en vez de ganarlo. Con --3e-fondo funcionaba en claro y en oscuro no,
   porque alli el lienzo y el campo son el mismo gris (medido). */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--3e-campo-inerte);
}

/* Acento: reservado para una sola llamada a la accion por pantalla. */
.btn-acento {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--3e-naranja-500);
  --bs-btn-border-color: var(--3e-naranja-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--3e-naranja-600);
  --bs-btn-hover-border-color: var(--3e-naranja-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--3e-naranja-700);
  --bs-btn-active-border-color: var(--3e-naranja-700);
}

/* ── 3. Tema oscuro ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --3e-superficie: var(--3e-gris-800);
  --3e-fondo: var(--3e-gris-900);
  /* El campo se HUNDE en la superficie en vez de levantarse: en oscuro, un input
     mas claro que su tarjeta parece un boton. Es la misma jerarquia invertida. */
  --3e-campo: var(--3e-gris-900);
  /* Un campo inerte se funde con la tarjeta: en claro pierde luz y en oscuro la
     gana, pero en los dos casos deja de parecer un hueco donde se teclea. */
  --3e-campo-inerte: var(--3e-gris-800);
  --3e-borde: var(--3e-gris-700);
  --3e-borde-campo: var(--3e-gris-600);
  --3e-texto: var(--3e-gris-100);
  --3e-texto-suave: var(--3e-gris-400);

  --bs-body-bg: var(--3e-fondo);
  --bs-body-color: var(--3e-texto);
  --bs-border-color: var(--3e-borde);

  /* El morado 500 no tiene contraste suficiente sobre fondo oscuro; se sube un
     par de pasos en la escala para conservar legibilidad. */
  --bs-primary: var(--3e-morado-300);
  --bs-primary-rgb: 181, 150, 228;
  --bs-link-color: var(--3e-morado-300);
  --bs-link-hover-color: var(--3e-morado-200);
  --bs-link-color-rgb: 181, 150, 228;

  --3e-positivo: #4ade80;
  --3e-negativo: #f87171;
  --3e-advertencia: #fbbf24;
}

/* ── 4. Tipografia ───────────────────────────────────────────────────────── */
body {
  font-family: var(--3e-fuente-cuerpo);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.titulo {
  font-family: var(--3e-fuente-titulo);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Toda cifra financiera va en monoespaciada tabular: las columnas de anios se
   alinean por digito y las magnitudes se comparan de un vistazo. */
.cifra,
.tabla-anual td.cifra,
.tabla-anual th.cifra {
  font-family: var(--3e-fuente-cifras);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Bootstrap pinta CADA celda de una .table con
     .table>:not(caption)>*>* { color: var(--bs-table-color) }
   que con especificidad 0,1,2 le gana a una clase suelta. Mientras estas tres
   fueron `.cifra-negativa` a secas, el rojo y el verde no se vieron NUNCA dentro
   de una tabla anual: la perdida del anio 0 salia en negro como cualquier otra
   cifra. Es D53 otra vez —Bootstrap pintando por debajo— y por eso van
   calificadas por celda. Ver D55. */
td.cifra-positiva,
th.cifra-positiva,
.cifra-positiva { color: var(--3e-positivo); }

td.cifra-negativa,
th.cifra-negativa,
.cifra-negativa { color: var(--3e-negativo); }

td.cifra-nula,
th.cifra-nula,
.cifra-nula     { color: var(--3e-texto-suave); }

/* Una casilla que se puede marcar tiene que parecerlo.

   Bootstrap dibuja la casilla vacia con `--bs-border-color`, que es el mismo gris
   claro del borde de una tabla. Dentro de una fila con fondo, el resultado se lee
   como una casilla INHABILITADA: Daniel intento marcar «Amortiza» en el catalogo
   de impuestos, dio por hecho que estaba bloqueada y pregunto donde se hacia. La
   casilla funcionaba.

   Tres estados y los tres distintos: vacia se ve como un campo donde se puede
   escribir, al pasar por encima toma el color de marca, e inhabilitada se apaga de
   verdad. No se toca la marcada, que Bootstrap ya pinta bien.

   Los interruptores quedan fuera: `role="switch"` tiene su propia forma y su
   propio affordance. Ver D58. */
.form-check-input:not([role="switch"]) {
  background-color: var(--3e-campo);
  border: 1.5px solid var(--3e-gris-400);
  cursor: pointer;
}

.form-check-input:not([role="switch"]):hover {
  border-color: var(--bs-primary);
}

/* La regla de arriba empata en especificidad con `.form-check-input:checked` de
   Bootstrap y va despues, asi que le pisaba el relleno: la casilla marcada quedaba
   con el marco morado, el fondo blanco y la palomita —que es una imagen blanca—
   invisible encima. Hay que repetir aqui el fondo, no solo el borde. */
.form-check-input:not([role="switch"]):checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:not([role="switch"]):disabled {
  background-color: var(--3e-campo-inerte);
  border-color: var(--3e-borde-campo);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Una casilla suelta en una celda centrada no tiene etiqueta que ampliar el area
   de clic, asi que crece un poco ella misma. */
.tabla-anual .form-check-input:not([role="switch"]),
table .form-check-input:not([role="switch"]) {
  width: 1.15em;
  height: 1.15em;
}

/* ── 5. Componentes de aplicacion ────────────────────────────────────────── */
.marca {
  font-family: var(--3e-fuente-titulo);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.marca-3e { color: var(--3e-morado-500); }
[data-bs-theme="dark"] .marca-3e { color: var(--3e-morado-300); }

.topbar {
  height: var(--3e-topbar-height);
  background-color: var(--3e-superficie);
  border-bottom: 1px solid var(--3e-borde);
}

.sidebar {
  width: var(--3e-sidebar-width);
  background-color: var(--3e-superficie);
  border-right: 1px solid var(--3e-borde);
}

.sidebar .nav-link {
  color: var(--3e-texto-suave);
  border-radius: var(--3e-radius-sm);
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
}
.sidebar .nav-link:hover { background-color: var(--3e-gris-100); color: var(--3e-texto); }
[data-bs-theme="dark"] .sidebar .nav-link:hover { background-color: var(--3e-gris-700); }
.sidebar .nav-link.active {
  background-color: var(--3e-morado-50);
  color: var(--3e-morado-700);
  font-weight: 600;
}
[data-bs-theme="dark"] .sidebar .nav-link.active {
  background-color: var(--3e-morado-800);
  color: var(--3e-morado-100);
}

.sidebar-grupo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--3e-texto-suave);
  padding: 0.5rem 0.7rem 0.25rem;
}

/* Las tablas de anios se desbordan a lo ancho en pantallas chicas. El scroll
   vive DENTRO de este contenedor: el body nunca se mueve horizontalmente. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla-anual {
  --bs-table-bg: var(--3e-superficie);
  margin-bottom: 0;
  font-size: 0.875rem;
}
.tabla-anual thead th {
  font-family: var(--3e-fuente-titulo);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--3e-texto-suave);
  border-bottom: 2px solid var(--3e-borde);
  white-space: nowrap;
}
/* La columna de concepto se congela al hacer scroll lateral: sin esto, en movil
   se ven cifras sin saber a que renglon pertenecen. */
.tabla-anual th.concepto,
.tabla-anual td.concepto {
  position: sticky;
  left: 0;
  background-color: var(--3e-superficie);
  min-width: 13rem;
  z-index: 1;
}
.tabla-anual tr.subtotal td { font-weight: 700; border-top: 1px solid var(--3e-borde); }
.tabla-anual tr.total td {
  font-weight: 800;
  border-top: 2px solid var(--3e-gris-400);
  border-bottom: 2px solid var(--3e-gris-400);
}

/* La escala o la unidad en que esta la cifra de arriba. Va pequeña y suave: acompaña
   al numero, no compite con el. Ver D60. */
.kpi-unidad {
  font-family: var(--3e-fuente-cuerpo);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--3e-texto-suave);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.kpi-card {
  background-color: var(--3e-superficie);
  border: 1px solid var(--3e-borde);
  border-radius: var(--3e-radius);
  padding: 1rem;
}
.kpi-card .kpi-etiqueta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--3e-texto-suave);
}
.kpi-card .kpi-valor {
  font-family: var(--3e-fuente-cifras);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Un KPI pendiente debe VERSE pendiente. Mostrar cero seria indistinguible de
   un modulo roto. */
.kpi-card.pendiente { border-style: dashed; opacity: 0.65; }
.kpi-card.pendiente .kpi-valor { color: var(--3e-texto-suave); font-size: 1rem; }

/* ── Grafica de trayectoria ──────────────────────────────────────────────────
   Morado la serie principal, naranja el acento. Nunca un arcoiris: dos series con
   dos colores de la marca, y cada una con su etiqueta directa al final de la linea
   ademas de un trazo distinto, para que se lea impresa en escala de grises. */
.grafica-scroll { overflow-x: auto; }
.grafica { width: 100%; min-width: 32rem; height: auto; display: block; }

.grafica .serie-principal { stroke: var(--3e-morado-500); fill: var(--3e-morado-500); }
.grafica .serie-acento    { stroke: var(--3e-naranja-500); fill: var(--3e-naranja-500); }
.grafica path { stroke-width: 2.5; fill: none; }
.grafica circle { stroke: none; }

.grafica .eje-marca { stroke: var(--3e-borde); stroke-width: 1; }
.grafica .eje-cero  { stroke: var(--3e-gris-400); stroke-width: 1.5; }

.grafica-eje-x { position: relative; height: 1.2rem; min-width: 32rem; }
.grafica-eje-x span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--3e-fuente-cifras);
  font-size: 0.68rem;
  color: var(--3e-texto-suave);
  white-space: nowrap;
}

.grafica text { font-family: var(--3e-fuente-cifras); font-size: 0.68rem; }
/* Las marcas del eje viven en el margen izquierdo y se alinean contra el area de
   dibujo, para no invadir el carril donde cada serie escribe su nombre. Ver D56. */
.grafica .grafica-eje { fill: var(--3e-texto-suave); stroke: none; text-anchor: end; }
.grafica .grafica-serie { font-weight: 700; stroke: none; }

/* ── Punto de equilibrio ─────────────────────────────────────────────────────
   Tres rectas y dos marcas. Morado los ingresos, naranja el costo total —el unico
   acento— y gris el costo fijo, que es contexto y no protagonista. Cada recta lleva
   ademas su propio trazo: continuo, continuo mas grueso, y discontinuo, para que se
   distingan impresas en escala de grises. */
.grafica line.serie-principal { stroke-width: 2.5; }
.grafica line.serie-acento    { stroke-width: 2.5; }
.grafica .serie-apagada { stroke: var(--3e-gris-400); fill: var(--3e-texto-suave); }
.grafica line.serie-apagada { stroke-width: 1.5; stroke-dasharray: 6 4; }

/* El cruce: un circulo hueco, que no tapa las dos rectas que lo producen. */
.grafica .marca-equilibrio { stroke: var(--3e-morado-500); fill: none; stroke-width: 2; }
.grafica text.marca-equilibrio {
  fill: var(--3e-morado-500); stroke: none; font-weight: 700; text-anchor: middle;
}

/* Lo que de verdad se vende, contra lo que haria falta vender. */
.grafica .marca-real { stroke: var(--3e-gris-400); fill: var(--3e-texto-suave); stroke-width: 1; }
.grafica line.marca-real { stroke-dasharray: 3 3; }
.grafica text.marca-real { stroke: none; text-anchor: middle; }

.toast-container { z-index: 1090; }

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.abierto { transform: translateX(0); }
}

@media print {
  .sidebar, .topbar, .no-imprimir { display: none !important; }
  body { background: #fff; }
}

/* Alpine quita este atributo al inicializar. Sin la regla, un elemento que empieza
   oculto parpadea visible hasta que el componente arranca.

   Se usa para el estado inicial y NUNCA para alternar despues: en la build CSP de
   Alpine, x-show oculta pero no vuelve a mostrar (medido; ver D9 en DECISIONS.md).
   Mostrar y ocultar en caliente se hace con x-bind:class y la clase d-none. Ojo: el
   enlace de clase se SUMA a las clases estaticas, asi que un d-none escrito a mano en
   el marcado gana siempre sobre el getter. */
[x-cloak] { display: none !important; }

/* ── Sensibilidad (tarea 19) ─────────────────────────────────────────────
   El color de una celda de la malla dice SI EL PROYECTO FUNCIONA, no si la
   cifra es grande. Son tres estados y un cuarto para el fallo, y se leen
   igual en claro y en oscuro porque el fondo es tenue y el texto no cambia. */
.barra-tornado {
    height: 1rem;
    border-radius: 2px;
    background: var(--3e-morado-500);
    min-width: 2px;
}

.tabla-anual td.viab-bien { background: transparent; }
.tabla-anual td.viab-no-conviene { background: rgba(232, 114, 42, 0.16); }
.tabla-anual td.viab-inviable { background: rgba(214, 57, 57, 0.20); font-weight: 700; }
.tabla-anual td.viab-fallo { background: var(--3e-gris-200, #eee); font-style: italic; }

.tabla-anual tr.viab-no-conviene td { background: rgba(232, 114, 42, 0.10); }
.tabla-anual tr.viab-inviable td { background: rgba(214, 57, 57, 0.12); }
.tabla-anual tr.viab-fallo td { font-style: italic; }