/* Hoja de estilo de la web de uso: gestor, contable, empresas y personas.
 *
 * Antes había tres copias casi idénticas de la misma hoja, una por app, y cada plantilla
 * repetía a mano la cabecera y la barra de navegación. Todo eso vive aquí y en
 * `templates/base.html`. La del admin de Django no se toca: es otra web.
 *
 * La idea de fondo: tinta azul sobre papel. El acento marca lo navegable y nada más; el
 * color con significado (cuadra, vence, descuadra) va aparte, para que un rojo siempre
 * quiera decir lo mismo. Los importes se leen en columna, así que van a la derecha y con
 * cifras de ancho fijo.
 */

/* ————— Tokens ————— */

:root {
  --papel:       #F4F6FA;
  --superficie:  #FFFFFF;
  --hueco:       #EBEEF5;
  --linea:       #DDE2EC;
  --linea-firme: #B9C1D4;
  --texto:       #161A26;
  --suave:       #5C6377;
  --tinta:       #2E3C88;
  --tinta-flojo: #E7EAF7;
  --verde:       #1C6F52;
  --verde-flojo: #E2F0EA;
  --rojo:        #A93728;
  --rojo-flojo:  #F7E7E4;
  --ambar:       #8A5D0C;
  --ambar-flojo: #F7EEDC;

  /* Tres papeles tipográficos, ninguno que descargar: todos están ya en el sistema, así
     que no hay CDN que falle ni fuente que caiga a Times sin avisar. */
  --sans:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;

  --r: 3px;
  --sombra: 0 1px 2px rgba(22, 26, 38, .05), 0 6px 20px -12px rgba(22, 26, 38, .25);
}

/* El tema oscuro solo redefine tokens: ningún componente se estila dentro de la consulta
   de medios. Un cierre de mes a las once de la noche es un caso de uso real. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #10131A;
    --superficie:  #181C25;
    --hueco:       #1F2430;
    --linea:       #2A3040;
    --linea-firme: #414A5E;
    --texto:       #E5E9F1;
    --suave:       #99A1B5;
    --tinta:       #93A1EC;
    --tinta-flojo: #232941;
    --verde:       #4FBE94;
    --verde-flojo: #16302A;
    --rojo:        #EE857A;
    --rojo-flojo:  #35211F;
    --ambar:       #DDA83C;
    --ambar-flojo: #332918;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -12px rgba(0, 0, 0, .8);
  }
}

/* ————— Base ————— */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 2px; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 0; }

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

/* ————— Armazón: raíl a la izquierda, lienzo a la derecha ————— */

.armazon { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--hueco);
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 0 24px;
}

.marca { display: flex; align-items: baseline; gap: 8px; padding: 0 18px; text-decoration: none; color: inherit; }
.marca b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.marca span { font-size: 11px; color: var(--suave); letter-spacing: .1em; text-transform: uppercase; }

/* Ficha de contexto: qué cliente y qué ejercicio se está mirando. Es el error más caro de
   este oficio, así que deja de ser un formulario que se rellena y se olvida. */
.contexto {
  margin: 0 12px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contexto label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); font-weight: 600; }
.contexto .valor { font-weight: 600; font-size: 14px; line-height: 1.3; }
.contexto .documento { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.contexto .fila {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--linea); padding-top: 8px;
}
/* Cuando solo hay un cliente, el ejercicio es lo único de la ficha y no hay nada de lo que
   separarlo. */
.contexto .fila.sola { border-top: 0; padding-top: 0; }
.contexto a { font-size: 12px; text-decoration: none; border-bottom: 1px solid transparent; }
.contexto a:hover { border-bottom-color: currentColor; }

.grupo { display: flex; flex-direction: column; }
.grupo > span {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--suave);
  font-weight: 600; padding: 0 18px 6px;
}
.grupo a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 18px; font-size: 14px; color: var(--texto); text-decoration: none;
  border-left: 2px solid transparent; transition: background .12s ease;
}
.grupo a:hover { background: var(--tinta-flojo); }
.grupo a[aria-current="page"] {
  background: var(--tinta-flojo); border-left-color: var(--tinta);
  color: var(--tinta); font-weight: 600;
}
.grupo a .fuera { font-size: 11px; color: var(--suave); }

/* «Datos» va aparte: lo demás del raíl es consultar, y esto es meter y corregir. El aire
   y el filete dicen que es de otra naturaleza antes de que se lea la etiqueta. */
.grupo.aparte { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--linea-firme); }

.rail .pie { margin-top: auto; }

/* Quién ha entrado y el botón de salir, al pie del raíl. */
.salir {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 18px 0; margin: 0 0 -6px; border-top: 1px solid var(--linea);
}
.salir span {
  font-size: 12px; color: var(--suave); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lienzo { display: flex; flex-direction: column; min-width: 0; }

/* Barra de contexto: el título de la pantalla, de dónde son los datos y el estado. */
.barra-contexto {
  position: sticky; top: 0; z-index: 3;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  padding: 14px 26px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.barra-contexto h1 {
  font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 0; letter-spacing: -.01em;
}
.migas { font-size: 12px; color: var(--suave); margin: 0 0 2px; }
.acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.cuerpo { padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 26px; }
.cuerpo > p { margin: 0; max-width: 78ch; }
.cuerpo h2 {
  font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0;
  padding-bottom: 8px; border-bottom: 1px solid var(--linea);
}
.cuerpo h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; margin: 0; }

/* ————— Estados ————— */

.estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.correcto { background: var(--verde-flojo); color: var(--verde); }
.aviso    { background: var(--rojo-flojo);  color: var(--rojo); }
.pendiente{ background: var(--ambar-flojo); color: var(--ambar); }

/* Los mismos tres significados en un párrafo, sin píldora. */
p.correcto, p.aviso, p.pendiente {
  display: block; border-radius: var(--r); padding: 10px 14px; font-weight: 400;
  font-size: 15px; max-width: 78ch;
}
p.correcto::before, p.aviso::before, p.pendiente::before { display: none; }
p.correcto { border-left: 3px solid var(--verde); }
p.aviso    { border-left: 3px solid var(--rojo); }
p.pendiente{ border-left: 3px solid var(--ambar); }
td.aviso, span.aviso, h2.aviso, h3.aviso { background: none; }
h2.aviso, h3.aviso { color: var(--rojo); }

.vacio {
  color: var(--suave); font-style: italic; padding: 26px; text-align: center;
  border: 1px dashed var(--linea); border-radius: var(--r);
}

/* ————— Botones ————— */

.boton, button[type="submit"], input[type="submit"] {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--r);
  border: 1px solid var(--linea-firme); background: var(--superficie); color: var(--texto);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s ease, border-color .12s ease;
}
.boton:hover, button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--hueco); border-color: var(--tinta);
}
.boton.principal, button.principal {
  background: var(--tinta); border-color: var(--tinta); color: var(--superficie);
}
.boton.principal:hover, button.principal:hover { filter: brightness(1.08); background: var(--tinta); }

/* ————— Formularios ————— */

.formulario {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 13px 16px;
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > label, .formulario label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--suave); font-weight: 600;
}
.campo.casilla { flex-direction: row; align-items: center; gap: 7px; }
.campo.casilla label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--texto); }

/* Rejilla de un formulario de alta o edición: los campos en columnas que se apilan solas
   en pantalla estrecha. El `.formulario` de arriba es para las barras de una línea. */
.campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; padding: 16px;
}
.campos .campo > input, .campos .campo > select, .campos .campo > textarea { width: 100%; }
.pista { font-size: 12px; color: var(--suave); }

select, input[type="text"], input[type="number"], input[type="date"], input[type="password"],
input[type="email"], textarea {
  font: inherit; font-size: 14px; padding: 5px 9px;
  border: 1px solid var(--linea-firme); border-radius: var(--r);
  background: var(--superficie); color: var(--texto); min-width: 150px;
}
select:hover, input:hover { border-color: var(--tinta); }
.errores { color: var(--rojo); font-size: 13px; }
.errores ul { margin: 0; padding-left: 18px; }

/* ————— Cifras de cabecera ————— */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 0; }
.cifra {
  border: 1px solid var(--linea); border-radius: var(--r); padding: 13px 15px;
  background: var(--superficie); display: flex; flex-direction: column; gap: 3px;
}
.cifra dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); font-weight: 600; }
.cifra dd { margin: 0; font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cifra .pie { font-size: 12px; color: var(--suave); }
.cifra.marcada { border-left: 3px solid var(--ambar); }

/* ————— Fichas ————— */

.ficha { border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.ficha > header {
  padding: 11px 16px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ficha > header h2, .ficha > header h3 { border: 0; padding: 0; }
.ficha > header .nota { font-size: 12px; color: var(--suave); }
.ficha > p { margin: 0; padding: 12px 16px; max-width: 78ch; }

/* ————— El libro: la tabla ————— */

/* Se desborda dentro de su ficha, nunca el cuerpo de la página. */
.rebosa { overflow-x: auto; }
.alta { max-height: 420px; overflow-y: auto; }

table.libro { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.libro th, table.libro td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--linea); }
table.libro thead th {
  position: sticky; top: 0; z-index: 2; background: var(--superficie);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--suave);
  font-weight: 600; border-bottom: 1px solid var(--linea-firme); white-space: nowrap;
}
/* Con cuarenta apuntes en pantalla, la raya fina cansa menos que la banda cebreada. */
table.libro tbody tr:hover td { background: var(--hueco); }
table.libro tbody tr:last-child td { border-bottom: 0; }

.importe { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
th.importe { text-align: right; }
.cuenta { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.cuenta a { text-decoration: none; }
.cuenta a:hover { text-decoration: underline; }

/* La regla que parte el debe del haber y el filete doble bajo el total: las dos
   convenciones del libro de papel que siguen sirviendo en pantalla. */
th.debe, td.debe { border-left: 1px solid var(--linea-firme); }
table.libro tr.total td {
  font-weight: 600; background: var(--hueco);
  border-top: 1px solid var(--linea-firme);
  border-bottom: 3px double var(--linea-firme);
}
table.libro tr.asiento td {
  background: var(--tinta-flojo); font-weight: 600; border-bottom-color: var(--linea-firme);
}
table.libro tr.asiento .numero { font-family: var(--mono); color: var(--tinta); }
table.libro tr.apunte td:first-child { border-left: 2px solid var(--tinta-flojo); }
table.libro td.negativo { color: var(--rojo); }
/* Cabecera intermedia dentro de una misma tabla (ingresos / gastos, activo / pasivo). */
table.libro tr.seccion th {
  background: var(--superficie); border-top: 1px solid var(--linea-firme);
  font-family: var(--serif); font-size: 14px; text-transform: none; letter-spacing: 0;
  color: var(--texto); position: static;
}

/* Tabla de dos columnas para pares dato/valor, sin cabecera. */
table.libro.pares td:first-child { color: var(--suave); }

/* ————— El balance, como un libro abierto ————— */

.abierto { display: grid; grid-template-columns: 1fr 1fr; }
.abierto > div:first-child { border-right: 1px solid var(--linea-firme); }
.abierto h3, .abierto h4 {
  margin: 0; padding: 10px 12px; font-family: var(--serif); font-size: 15px; font-weight: 600;
  border-bottom: 1px solid var(--linea-firme); text-align: center;
}

.parejas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }

/* ————— Ficha de datos del cliente ————— */

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; }
.datos > div { padding: 11px 16px; border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); }
.datos dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); font-weight: 600; }
.datos dd { margin: 0; font-size: 15px; }
.datos dd.mono { font-family: var(--mono); font-size: 14px; }
.logo { max-width: 220px; height: auto; padding: 16px; }

/* En qué organización se está trabajando, bajo la marca del raíl. Discreta a propósito:
   se consulta una vez al entrar y luego estorba. */
.organizacion {
  margin: -14px 0 0; padding: 0 18px;
  font-size: 12px; color: var(--suave); font-weight: 600;
}

/* ————— La pantalla de acceso ————— */

/* Es la única pantalla sin raíl, y por eso no hereda el armazón: quien todavía no ha
   entrado no tiene a dónde navegar, así que enseñarle la navegación desactivada sería
   enseñarle el mapa de una casa en la que no está. Se centra sobre el papel y ya está. */
.acceso {
  max-width: 390px; margin: 0 auto; padding: 11vh 20px 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.acceso .marca { padding: 0; justify-content: center; }
.acceso form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; }
/* Una sola columna: son dos campos y en rejilla se pondrían uno al lado del otro, que en
   un formulario de acceso se lee como si fueran alternativos. */
.acceso .campos { grid-template-columns: 1fr; padding-bottom: 0; }
.acceso .acciones { padding: 0 16px; }
.acceso .acciones button { width: 100%; justify-content: center; }
.acceso p.aviso { margin: 16px 16px 0; }
.acceso > .pista { text-align: center; margin: 0; }

/* El error de un campo concreto, debajo de él. Rojo porque en esta aplicación el rojo
   quiere decir siempre lo mismo, y aquí quiere decir «esto hay que corregirlo». */
.campo .error { font-size: 12px; color: var(--rojo); }

@media (max-width: 860px) {
  .armazon { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--linea); }
  .rail .pie { margin-top: 0; }
  .abierto { grid-template-columns: 1fr; }
  .abierto > div:first-child { border-right: 0; border-bottom: 1px solid var(--linea-firme); }
  .cuerpo, .barra-contexto { padding-left: 16px; padding-right: 16px; }
}