/* Temas (S13 §6/§7): cuatro paletas seleccionables desde "Mi perfil", vía
 * el atributo `data-theme` en `<html>` (`app/models.py::Tema`,
 * `app/routers/perfil.py::cambiar_tema`). `:root` de abajo es el tema `a`
 * — "Cielo alto contraste", el default de la app — y cada
 * `[data-theme="..."]` más abajo redefine las mismas variables con otros
 * valores. Los NOMBRES de variable se mantienen iguales entre temas
 * (`--forest`, `--citrus`, etc.) aunque cambien de color entre uno y otro
 * — cambiarlos habría significado tocar cada plantilla que los usa inline
 * (`style="color:var(--forest)"`) sin ningún beneficio funcional.
 *
 * Dos azules, no uno, porque el azul pedido por el cliente (#60A5FA) es
 * demasiado claro para llevar texto blanco encima (contraste ~2,6:1, bajo
 * el mínimo WCAG de 4,5:1): `--forest` es el tono oscuro para superficies
 * grandes con texto blanco (títulos, links, botón secundario); `--citrus`
 * es el tono pedido tal cual, reservado para donde el texto que va encima
 * lo decide `--on-citrus` (oscuro en los temas fríos, blanco en el
 * `original`, donde el `--citrus` de esa paleta es un naranja oscuro que sí
 * admite texto blanco). `--chrome` separa el color de la barra
 * superior/menú del de `--forest` — solo el tema `b` los distingue (barra
 * grafito, títulos y links en azul); en el resto son el mismo tono.
 * `--data-color` decide el color de los valores de tabla (`.num`,
 * `.status-row .val`): negro en los temas fríos (pedido explícito del
 * cliente para el tema `a`, extendido a `b`/`c` por ser la misma familia),
 * coloreado en el `original`, que es como arrancó el proyecto. */
:root {
  --forest: #1D4ED8;       /* antes verde bosque #1B4332 — azul oscuro: títulos, botones secundarios, links */
  --forest-dark: #1E3A8A;  /* fondo detrás del "shell", visible en los bordes en pantallas anchas */
  --citrus: #60A5FA;       /* el azul pedido por el cliente, tal cual — botón primario, hover/activo del nav, borde de notas */
  --citrus-tint: #DBEAFE;  /* versión pálida de --citrus, para fondos de pills/botón secundario/notas */
  --paper: #F8FAFC;        /* antes papel crema #FBF7F0 — fondo general, gris muy claro */
  --paper-line: #E2E8F0;   /* bordes */
  --ink: #1E293B;          /* texto general — nunca azul, ver nota de arriba */
  --sage: #16A34A;         /* verde de éxito (antes un verde más apagado) — dot de pills "activo"/"pagado" */
  --warn: #D97706;         /* ámbar de "pendiente" — semántico, deliberadamente aparte de los dos azules de marca */
  --warn-tint: #FEF3C7;
  --danger: #DC2626;       /* antes rojo tierra #B3401F — rojo más limpio, más a tono con el resto */
  --danger-tint: #FEE2E2;
  /* Gris neutro para lo que antes era un café cálido hardcodeado
   * (encabezados de tabla, subtítulos, footer) — no estaba en una
   * variable, así que quedaba desentonando solo si no se agregaba acá. */
  --muted: #64748B;
  --chrome: var(--forest);      /* barra superior / menú desplegable */
  --data-color: var(--ink);     /* .num, .status-row .val — negro pedido por el cliente */
  --on-citrus: var(--ink);      /* texto sobre fondo --citrus (botón primario, hover del nav) */
}

/* Tema B — "Grafito y cielo": misma familia fría de A, pero la barra
 * superior y el menú son grafito neutro en vez de azul — es la diferencia
 * que le da su nombre, separada vía --chrome de --forest (que sigue azul,
 * para títulos y links). */
[data-theme="b"] {
  --forest: #1D4ED8;
  --forest-dark: #0F172A;
  --citrus: #60A5FA;
  --citrus-tint: #DBEAFE;
  --paper: #F8FAFC;
  --paper-line: #E2E8F0;
  --ink: #1E293B;
  --sage: #16A34A;
  --warn: #D97706;
  --warn-tint: #FEF3C7;
  --danger: #DC2626;
  --danger-tint: #FEE2E2;
  --muted: #64748B;
  --chrome: #334155;
  --data-color: var(--ink);
  --on-citrus: var(--ink);
}

/* Tema C — "Azul profundo": un solo azul más oscuro y saturado en vez del
 * par forest/chrome de A — más sobrio, sin la separación grafito de B. */
[data-theme="c"] {
  --forest: #1E3A8A;
  --forest-dark: #0F1E4D;
  --citrus: #60A5FA;
  --citrus-tint: #DBEAFE;
  --paper: #F8FAFC;
  --paper-line: #E2E8F0;
  --ink: #1E293B;
  --sage: #16A34A;
  --warn: #D97706;
  --warn-tint: #FEF3C7;
  --danger: #DC2626;
  --danger-tint: #FEE2E2;
  --muted: #64748B;
  --chrome: var(--forest);
  --data-color: var(--ink);
  --on-citrus: var(--ink);
}

/* Tema Original — el tema cálido con el que arrancó el proyecto (bosque +
 * papel + cítrico), antes de S13 §6. Valores tomados tal cual del
 * historial (`git show 42af466~1:app/static/style.css`); los tokens que no
 * existían todavía en ese momento (--citrus-tint, --warn, --warn-tint,
 * --danger-tint, --muted, --chrome, --data-color, --on-citrus) se
 * reconstruyen a partir de los literales hardcodeados que tenía cada uno
 * en esa versión (ej. `--citrus-tint` = el `#EAF3EC` que tenía
 * `.btn-secondary` como fondo). */
[data-theme="original"] {
  --forest: #1B4332;
  --forest-dark: #0F2C1D;
  --citrus: #E8871E;
  --citrus-tint: #EAF3EC;
  --paper: #FBF7F0;
  --paper-line: #E4DCC9;
  --ink: #2B2B2B;
  --sage: #74A57F;
  --warn: var(--citrus);
  --warn-tint: #FBEFE0;
  --danger: #B3401F;
  --danger-tint: #FBE7E0;
  --muted: #6b6558;
  --chrome: var(--forest);
  --data-color: var(--forest);
  --on-citrus: white;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--forest-dark);
  font-family: 'Inter', sans-serif;
  color: var(--ink);
}

.shell {
  max-width: 880px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(0, 0, 0, .35);
}

/* --- Topbar / navegación --- */
.topbar {
  background: var(--chrome);
  color: var(--paper);
  padding: 20px 24px;
  text-align: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 10px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.brand-logo { display: block; height: 140px; width: auto; }

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.topnav a {
  font-size: .82rem;
  color: var(--paper);
  text-decoration: none;
  background: rgba(255, 255, 255, .08);
  padding: 7px 12px;
  border-radius: 999px;
}

.topnav a:hover, .topnav a.active { background: var(--citrus); color: var(--on-citrus); }

.nav-group { position: relative; }

.nav-group summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--paper);
  background: rgba(255, 255, 255, .08);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-group summary::-webkit-details-marker { display: none; }

.nav-group summary::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.nav-group[open] summary { background: var(--citrus); color: var(--on-citrus); }
.nav-group[open] summary::after { border-top: none; border-bottom: 5px solid currentColor; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  background: var(--chrome);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  z-index: 20;
}

.nav-dropdown a {
  padding: 10px 14px;
  color: var(--paper);
  text-decoration: none;
  font-size: .82rem;
  white-space: nowrap;
}

.nav-dropdown a:hover { background: rgba(255, 255, 255, .12); }

/* Buscador global por folio/código de barra (S14) — su propia fila bajo
 * el nav, no dentro de `.topnav`: es un campo de texto, no un link, y
 * mezclarlo con las píldoras del nav le habría exigido un ancho fijo
 * incómodo en un `flex-wrap`. Se apila solo en pantallas angostas, igual
 * que el resto de las filas de la barra superior. */
.buscador-codigo {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.buscador-codigo input {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}
.buscador-codigo button {
  background: rgba(255, 255, 255, .12);
  border: none;
  color: var(--paper);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: .9rem;
}
.buscador-codigo button:hover { background: rgba(255, 255, 255, .24); }

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: .82rem;
}

.user-row .who { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.user-row img { width: 24px; height: 24px; border-radius: 50%; }
.user-row a { color: var(--paper); opacity: .8; }

.btn-lock {
  background: none;
  border: none;
  color: var(--paper);
  opacity: .8;
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.btn-lock:hover { opacity: 1; }

/* --- Contenido --- */
.content { padding: 24px; }

h1 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  color: var(--forest);
  margin: 0 0 4px;
}

h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--forest);
  margin: 24px 0 10px;
}

.subtitle { color: var(--muted); font-size: .88rem; margin: 0 0 20px; }

.card {
  background: white;
  border: 1.5px solid var(--paper-line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}

/* --- Formularios --- */
label { display: block; font-size: .82rem; margin: 12px 0 4px; color: var(--muted); }

/* `<details>` genérico dentro de un form (no el `.nav-group` del topbar,
 * que tiene su propio estilo de desplegable): un toggle discreto para
 * campos secundarios, sin la pastilla/flecha del menú de navegación. */
details summary { cursor: pointer; font-size: .82rem; color: var(--forest); }
details summary:hover { text-decoration: underline; }

select, input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], textarea {
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--paper-line);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  background: white;
  color: var(--ink);
}

textarea { resize: vertical; min-height: 70px; }

fieldset { border: 1.5px dashed var(--paper-line); border-radius: 10px; margin: 14px 0; padding: 12px; }
legend { font-size: .82rem; color: var(--muted); padding: 0 6px; }

.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 140px; }

/* --- Buscador de proveedor (static/buscador_proveedor.js) --- */
.buscador-proveedor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.buscador-proveedor-texto { flex: 1 1 220px; min-width: 0; }
.filtro-tipo { display: inline-flex; gap: 4px; }
.filtro-tipo .btn { padding: 6px 10px; font-size: .8rem; }
.filtro-tipo .btn[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }
.buscador-cuenta { flex: 0 0 auto; font-size: .78rem; color: var(--muted); }
/* `.btn` fija su propio `display` y le gana al atributo `hidden`: sin esto un
 * botón "oculto" con JS seguía a la vista. */
.btn[hidden] { display: none; }
.buscador-proveedor .alta-abrir { padding: 6px 10px; font-size: .8rem; }
.buscador-proveedor .alta-abrir.destacado { background: var(--forest); color: #fff; }
.alta-proveedor { border: 1.5px dashed var(--paper-line); border-radius: 10px; padding: 2px 12px 12px; margin: 6px 0 10px; }
.alta-proveedor .alta-mensaje { margin: 10px 0 0; }
.alta-proveedor .alta-acciones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

button, .btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.btn-primary { background: var(--citrus); color: var(--on-citrus); }
.btn-secondary { background: var(--citrus-tint); color: var(--forest); }
.btn-danger { background: var(--danger); color: white; }
.btn-block { width: 100%; }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 8px 0; }

th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1.5px solid var(--paper-line);
}

td { padding: 9px 6px; border-bottom: 1px dashed var(--paper-line); }
.num { font-family: 'IBM Plex Mono', monospace; color: var(--data-color); font-weight: 600; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
th, td { white-space: nowrap; }

/* La columna de acción (Detalle/Anular/Ver) queda fija al borde derecho de
 * la tabla con scroll horizontal — si no, en una tabla ancha hay que
 * desplazarse hasta el final de cada fila solo para abrir el detalle. */
.table-scroll td.col-accion,
.table-scroll th.col-accion {
  position: sticky;
  right: 0;
  background: var(--paper);
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .2);
}

/* --- Estados / pills --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  background: var(--citrus-tint);
  color: var(--forest);
  padding: 4px 10px;
  border-radius: 999px;
}

.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.pill-warn { background: var(--warn-tint); color: var(--warn); }
.pill-warn .dot { background: var(--warn); }
.pill-danger { background: var(--danger-tint); color: var(--danger); }
.pill-danger .dot { background: var(--danger); }
.pill-success { background: var(--citrus-tint); color: var(--forest); }
.pill-success .dot { background: var(--sage); }

/* Marca compacta para una tabla angosta: mismo significado que un pill,
 * sin ensanchar la columna — la descripción completa va en una leyenda
 * aparte, no repetida en cada fila (ver "Reverso de IVA" en cuenta_estado). */
.marca-reverso {
  color: var(--forest);
  font-weight: 700;
  cursor: help;
  margin-left: 2px;
}

/* Agrupa visualmente las líneas de una misma recepción en un listado con
 * varias filas por recepción (ej. estado de cuenta: fruta + IVA) — "para no
 * confundirse" (pedido del cliente, reunión 2026-09-01). El color se asigna
 * por orden de aparición, no por `movimiento_id % N`: así dos recepciones
 * consecutivas nunca coinciden en color por azar del módulo. */
.fila-recepcion-0 { background: var(--citrus-tint); }
.fila-recepcion-1 { background: var(--warn-tint); }
.fila-recepcion-2 { background: #E7EEF7; }
.fila-recepcion-3 { background: #F5E9EF; }
.fila-recepcion-4 { background: #EFEAF7; }
.fila-recepcion-5 { background: #F2F2E4; }

.note {
  font-size: .8rem;
  color: var(--forest);
  border: 1.5px dashed var(--citrus);
  background: var(--citrus-tint);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0;
}

/* `.aviso-error` es el mismo aspecto para los avisos que escribe el JS al vuelo
 * (alta rápida, cuenta bancaria). Clase aparte a propósito: los tests y la
 * pantalla localizan el error del servidor como `.error`, y un aviso oculto con
 * esa clase sería un segundo elemento que lo confunde. */
.error,
.aviso-error {
  font-size: .82rem;
  color: var(--danger);
  border: 1.5px solid var(--danger);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0;
  background: var(--danger-tint);
}

/* Diálogo de confirmación de pago (S13 §4) — primer <dialog> nativo del
 * proyecto: mismo lenguaje visual que .card, con el fondo semitransparente
 * que da ::backdrop. */
dialog {
  border: none;
  border-radius: 14px;
  padding: 20px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(15, 23, 42, .55); }  /* neutro, no depende del tema */

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--paper-line);
  font-size: .88rem;
}

.status-row:last-child { border-bottom: none; }
.status-row .val { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--data-color); }

/* Paginación del listado de movimientos (S13 §1) */
.paginacion {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.paginacion-info { font-size: .82rem; color: var(--muted); }

footer {
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
  padding: 20px 24px;
  font-family: 'IBM Plex Mono', monospace;
}

/* --- Responsive (celular) --- */
@media (max-width: 640px) {
  .topbar { padding: 16px 16px; }
  .content { padding: 14px; }
  .brand-logo { height: 88px; }

  /* Apila los campos a ancho completo en vez de repartirlos en 2-3
     columnas angostas — más confiable que depender del cálculo de
     min-width/flex-wrap en pantallas chicas. */
  .form-row { flex-direction: column; }

  /* Nombre de usuario y "Cerrar sesión" no deben amontonarse si el
     nombre es largo. */
  .user-row { flex-wrap: wrap; gap: 8px; }

  /* Pares etiqueta/valor: si no entran en una línea, que bajen de
     línea en vez de superponerse. */
  .status-row { flex-wrap: wrap; }
  .status-row .val { text-align: left; }
}

/* RUT con dígito verificador incorrecto (S18, static/rut.js) */
input.rut-invalido { border-color: #b3261e; outline-color: #b3261e; }


/* Botón con aspecto de enlace (S20, M3): "Cerrar sesión" pasó de enlace GET a
   formulario POST, sin cambiar cómo se ve. */
.form-enlinea { display: inline; margin: 0; }
.link-button {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-decoration: inherit; cursor: pointer;
}
.link-button:hover { text-decoration: underline; }


/* Proforma de facturación (S21): en pantalla es una hoja dentro de la página; al imprimir, solo la hoja. */
.proforma { max-width: 900px; }
.proforma-cabecera { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.proforma-aviso { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.proforma h3 { margin: 18px 0 6px; }
.proforma-instruccion { margin: 4px 0; }
.proforma-pie { margin-top: 18px; font-size: .8rem; color: var(--muted, #64748B); }
@media print {
  .topbar, nav, footer, .no-print { display: none !important; }
  body { background: #fff; }
  .proforma { max-width: none; }
  .card { box-shadow: none; }
}

/* `hidden` tiene que ganarle a los `display` de las clases (S21: bloques que aparecen y desaparecen). */
[hidden] { display: none !important; }