/**
 * Sistema visual de Factucienda.
 *
 * Propio, NO el de NoSnake: productos distintos, compradores distintos.
 *
 * La referencia es el área personal de un banco. Eso son decisiones concretas:
 * barra lateral fija para navegar, una cifra grande que contesta "¿estoy bien?"
 * antes que ningún detalle, cifras de ancho fijo, superficies elevadas sobre
 * fondo apagado y movimiento que guía en vez de lucirse.
 *
 * ## Los colores de los gráficos están VALIDADOS, no elegidos a ojo
 *
 * El primer intento fue un semáforo verde/rojo. El validador lo tumbó: verde
 * #15803d y rojo #be123c tienen ΔE 1,4 en deuteranopia — el daltonismo más
 * común, cerca del 8 % de los hombres. Para esas personas el gráfico entero
 * era de un solo color, en una pantalla que habla de su dinero.
 *
 * El par bueno es azul contra naranja. Los pasos de modo oscuro están ELEGIDOS
 * aparte y validados contra su propio fondo; no son los claros aclarados.
 *
 *   claro    azul #1d4ed8  ·  naranja #c2410c  ·  gris #64748b
 *   oscuro   azul #3b82f6  ·  naranja #ea580c  ·  gris #78899e
 *
 * El gris incumple a propósito el suelo de croma del validador: esa comprobación
 * avisa de que un gris se lee como "sin datos", y aquí el gris ES la categoría
 * "no aplica". Excepción razonada, no descuido.
 *
 * Y el estado nunca se comunica solo con color: siempre lleva su palabra al
 * lado, porque esto se imprime y se lee en blanco y negro.
 */

:root {
  color-scheme: light dark;

  --marca:        #122c4f;
  --accion:       #0d9488;
  --accion-viva:  #0f766e;
  --accion-tenue: #ecfdf9;

  --texto:        #0f172a;
  --texto-2:      #475569;
  --texto-3:      #94a3b8;

  --fondo:        #f1f5f9;
  --superficie:   #ffffff;
  --superficie-2: #f8fafc;
  --linea:        #e2e8f0;

  /* Series de los gráficos: validadas. */
  --serie-ok:     #1d4ed8;
  --serie-falta:  #c2410c;
  --serie-na:     #64748b;

  /* Estados en texto y pastillas. */
  --verde-t: #15803d;  --verde-f: #dcfce7;
  --ambar-t: #b45309;  --ambar-f: #fef3c7;
  --rojo-t:  #be123c;  --rojo-f:  #ffe4e6;

  --r: 14px; --r-sm: 10px;
  --sombra:   0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.05);
  --sombra-2: 0 4px 16px rgba(15,23,42,.08);
  --lateral: 232px;
  --barra: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marca: #e2e8f0;
    --accion: #2dd4bf; --accion-viva: #5eead4; --accion-tenue: #0b2b28;
    --texto: #f1f5f9; --texto-2: #cbd5e1; --texto-3: #64748b;
    --fondo: #0b0f14; --superficie: #151a21; --superficie-2: #1b212a;
    --linea: #262e39;
    --serie-ok: #3b82f6; --serie-falta: #ea580c; --serie-na: #78899e;
    --verde-t: #4ade80; --verde-f: #10261a;
    --ambar-t: #fbbf24; --ambar-f: #2a1f08;
    --rojo-t:  #fb7185; --rojo-f:  #2b1119;
    --sombra: 0 1px 2px rgba(0,0,0,.4); --sombra-2: 0 8px 24px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

.cifra, .dato-valor, .importe, td, th { font-variant-numeric: tabular-nums; }

/* ================================================================ armazón == */

.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100dvh; }

.lateral {
  background: var(--superficie); border-right: 1px solid var(--linea);
  padding: 1.1rem .8rem; position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: .35rem;
}
.lateral .marca { padding: .4rem .6rem 1.2rem; }

.nav-enlace {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: var(--r-sm);
  color: var(--texto-2); text-decoration: none; font-weight: 500;
  border: 0; background: none; font: inherit; width: 100%; cursor: pointer;
  text-align: left; transition: background .15s, color .15s;
}
.nav-enlace:hover { background: var(--superficie-2); color: var(--texto); }
.nav-enlace[aria-current="page"] {
  background: var(--accion-tenue); color: var(--accion-viva); font-weight: 600;
}
.nav-enlace svg { flex: none; opacity: .85; }
.nav-cuenta {
  margin-left: auto; font-size: .78rem; font-weight: 700;
  background: var(--rojo-f); color: var(--rojo-t);
  padding: .05rem .45rem; border-radius: 999px;
}
.lateral hr { border: 0; border-top: 1px solid var(--linea); margin: .6rem .4rem; }

.superior {
  position: sticky; top: 0; z-index: 20; height: var(--barra);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem;
  background: color-mix(in srgb, var(--fondo) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.superior h1 { font-size: 1.05rem; margin: 0; flex: 1; letter-spacing: -.01em; }
.menu-movil { display: none; background: none; border: 0; padding: .4rem; color: var(--texto); }

.lienzo { padding: 1.75rem 1.5rem 5rem; max-width: 980px; }

.marca { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
         color: var(--marca); text-decoration: none; display: block; }
.marca span { color: var(--accion); }

.sesion { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--texto-2); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accion-tenue);
          color: var(--accion-viva); display: grid; place-items: center;
          font-weight: 700; font-size: .8rem; border: 1px solid var(--linea); }
.enlace-sobrio { background: none; border: 0; padding: 0; font: inherit;
                 color: var(--texto-2); text-decoration: underline; cursor: pointer; }
.enlace-sobrio:hover { color: var(--accion-viva); }

/* ============================================================== contenido == */

main.centro { max-width: 440px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
body.portada { display: grid; place-items: center; min-height: 100dvh; padding: 1.25rem; }
body.portada main { padding: 0; width: 100%; }

h1 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4rem; }
h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
     color: var(--texto-3); margin: 2rem 0 .8rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.entradilla { color: var(--texto-2); margin-bottom: 1.75rem; }
.tenue { color: var(--texto-2); font-size: .875rem; }
.mini  { color: var(--texto-3); font-size: .8rem; }

.tarjeta { background: var(--superficie); border: 1px solid var(--linea);
           border-radius: var(--r); padding: 1.5rem; box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 1rem; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* La cifra que contesta "¿estoy bien?" antes que ningún detalle. */
.heroe { padding: 1.75rem; }
.heroe .dato-valor { font-size: 2.9rem; }
.dato-valor { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.dato-etiqueta { color: var(--texto-2); font-size: .875rem; margin-top: .2rem; }
.dato.alerta .dato-valor, .heroe.alerta .dato-valor { color: var(--rojo-t); }

/* ================================================================ gráficos == */

.grafico { width: 100%; display: block; overflow: visible; }

/* Barra apilada: 2px de hueco entre trozos, extremos redondeados. */
.trozo { transition: opacity .15s; cursor: pointer; }
.trozo:hover { opacity: .82; }

.leyenda { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin-top: .9rem; }
.leyenda-item { display: flex; align-items: center; gap: .45rem;
                font-size: .85rem; color: var(--texto-2); }
.leyenda-punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.leyenda-valor { color: var(--texto); font-weight: 600; }

.globo {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--texto); color: var(--superficie);
  padding: .45rem .65rem; border-radius: 8px; font-size: .82rem;
  box-shadow: var(--sombra-2); white-space: nowrap; opacity: 0;
  transition: opacity .12s;
}
.globo.visible { opacity: 1; }
.globo b { font-variant-numeric: tabular-nums; }

.eje { fill: var(--texto-3); font-size: 11px; }
.rejilla-linea { stroke: var(--linea); stroke-width: 1; }

/* ================================================================ estados == */

.pastilla { display: inline-flex; align-items: center; gap: .35rem;
            padding: .2rem .6rem; border-radius: 999px;
            font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pastilla::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastilla.ok   { background: var(--verde-f); color: var(--verde-t); }
.pastilla.ojo  { background: var(--ambar-f); color: var(--ambar-t); }
.pastilla.mal  { background: var(--rojo-f);  color: var(--rojo-t); }
.pastilla.gris { background: var(--superficie-2); color: var(--texto-2); }

.aviso { padding: .9rem 1rem; border-radius: var(--r-sm); margin: 1rem 0; font-size: .9rem; }
.aviso.ok  { background: var(--verde-f); color: var(--verde-t); }
.aviso.ojo { background: var(--ambar-f); color: var(--ambar-t); }
.aviso.mal { background: var(--rojo-f);  color: var(--rojo-t); }
.aviso strong { display: block; margin-bottom: .1rem; }

.lista { display: flex; flex-direction: column; }
.fila { display: flex; align-items: center; gap: 1rem; padding: .85rem 0;
        border-bottom: 1px solid var(--linea); }
.fila:last-child { border-bottom: 0; }
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-pie { color: var(--texto-2); font-size: .82rem; }
.importe { font-weight: 700; letter-spacing: -.01em; }

/* ================================================================= campos == */

.campo { margin-bottom: 1.75rem; }
.campo > label, .pregunta { display: block; font-weight: 600; margin-bottom: .25rem; }
.ayuda { display: block; color: var(--texto-2); font-size: .875rem; margin-bottom: .75rem; }

input[type=email], input[type=text], select {
  width: 100%; padding: .8rem .9rem; font: inherit; color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--linea);
  border-radius: var(--r-sm); transition: border-color .15s, background .15s;
}
input::placeholder { color: var(--texto-3); }
input:focus, select:focus { background: var(--superficie); border-color: var(--accion); }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

.opciones { display: grid; gap: .5rem; }
.opcion { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem;
          border: 1.5px solid var(--linea); border-radius: var(--r-sm);
          cursor: pointer; background: var(--superficie); transition: .15s; }
.opcion:hover { border-color: var(--texto-3); }
.opcion input { margin-top: .2rem; accent-color: var(--accion); flex: none; width: 18px; height: 18px; }
.opcion strong { display: block; font-weight: 600; }
.opcion small { color: var(--texto-2); display: block; margin-top: .1rem; }
.opcion:has(input:checked) { border-color: var(--accion); background: var(--accion-tenue); }

button { font: inherit; font-weight: 600; border-radius: var(--r-sm);
         border: 1.5px solid transparent; cursor: pointer; transition: .15s; }
.principal { background: var(--accion); color: #fff; width: 100%;
             padding: .9rem 1.25rem; font-size: 1rem; box-shadow: var(--sombra); }
.principal:hover:not(:disabled) { background: var(--accion-viva); box-shadow: var(--sombra-2); }
.principal:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.secundario { background: var(--superficie); color: var(--texto); border-color: var(--linea);
              width: 100%; padding: .9rem 1.25rem; font-size: 1rem;
              display: flex; align-items: center; justify-content: center; gap: .65rem; }
.secundario:hover { border-color: var(--texto-3); background: var(--superficie-2); }

.separador { display: flex; align-items: center; gap: .8rem; color: var(--texto-3);
             font-size: .8rem; margin: 1.25rem 0; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--linea); }

.pasos { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.paso { flex: 1; height: 4px; border-radius: 2px; background: var(--linea); }
.paso.hecho { background: var(--accion); }

[hidden] { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================= motion == */
/*
 * El movimiento acompaña la lectura del dato: la cifra sube desde cero y las
 * barras crecen desde la línea base, que es la dirección en la que se leen.
 * Nada se mueve porque sí.
 *
 * Y todo se apaga con `prefers-reduced-motion`. Para quien tiene trastorno
 * vestibular una animación no es un adorno: le marea.
 */
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.entra { animation: aparecer .35s ease-out both; }
.entra:nth-child(2) { animation-delay: .05s; }
.entra:nth-child(3) { animation-delay: .1s; }
.entra:nth-child(4) { animation-delay: .15s; }

.trozo, .barra-mes { transition: width .7s cubic-bezier(.22,1,.36,1), height .7s cubic-bezier(.22,1,.36,1), y .7s cubic-bezier(.22,1,.36,1), x .7s cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================== móvil == */

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--sombra-2);
  }
  .lateral.abierta { transform: none; }
  .menu-movil { display: block; }
  .lienzo { padding: 1.25rem 1rem 4rem; }
  .heroe .dato-valor { font-size: 2.2rem; }
  .tarjeta { padding: 1.25rem; }
}

/* ---------------------------------------------------------------- soltar -- */
/*
 * La zona de subida es el único sitio donde el cliente ESCRIBE, así que tiene
 * que verse que se puede pulsar y que acepta arrastrar. Es un `button` de
 * verdad para el teclado, no un div con un click encima.
 */
.soltar {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 2rem 1rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--linea); border-radius: var(--r);
  background: var(--superficie-2); color: var(--texto-2);
  transition: border-color .15s, background .15s;
}
.soltar:hover, .soltar:focus-visible { border-color: var(--accion); color: var(--texto); }
.soltar.encima { border-color: var(--accion); background: var(--accion-tenue); }
.soltar strong { color: var(--texto); }
.soltar svg { color: var(--accion); margin-bottom: .2rem; }

/* ------------------------------------------------------------ desplegable -- */
/*
 * La hoja "Cuadre" del Excel tiene diecisiete columnas. En un móvil eso no se
 * puede leer, y esto se mira desde el sofá. Así que cada cargo es una fila con
 * lo que contesta "¿está bien?" y se despliega con TODO el detalle cuando lo
 * pides. Es un <button> de verdad, no un div con un click: funciona con teclado
 * y un lector de pantalla anuncia si está abierto.
 */
.desplegable { border-bottom: 1px solid var(--linea); }
.desplegable:last-child { border-bottom: 0; }

.fila-pulsable {
  width: 100%; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; border-bottom: 0; border-radius: var(--r-sm);
  padding: .85rem .5rem; margin: 0 -.5rem;
}
.fila-pulsable:hover { background: var(--superficie-2); }
.flecha { color: var(--texto-3); transition: transform .2s; flex: none; }
.desplegable.abierto .flecha { transform: rotate(180deg); }

.detalle {
  display: grid; gap: .1rem .5rem; grid-template-columns: 1fr;
  padding: .25rem .5rem 1.1rem; margin-bottom: .3rem;
}
.detalle-dato {
  display: flex; gap: 1rem; justify-content: space-between;
  padding: .35rem 0; border-bottom: 1px dotted var(--linea);
  font-size: .875rem;
}
.detalle-dato:last-of-type { border-bottom: 0; }
.detalle-etiqueta { color: var(--texto-2); flex: none; }
.detalle-valor { text-align: right; font-variant-numeric: tabular-nums; }
.detalle-valor.malo  { color: var(--rojo-t);  font-weight: 600; }
.detalle-valor.bueno { color: var(--verde-t); font-weight: 600; }
.detalle-acciones { display: flex; gap: 1rem; padding-top: .7rem; }

@media (min-width: 700px) {
  /* En pantalla ancha, dos columnas: cabe el doble sin desplazarse. */
  .detalle { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .detalle-acciones { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------- clip -- */
/*
 * Acceso de un clic al PDF, y solo en las filas que lo tienen. Es un span con
 * rol de botón porque va DENTRO de la fila desplegable, y un <button> anidado
 * en otro <button> es HTML inválido: el navegador lo desanida y el desplegable
 * deja de funcionar.
 */
.clip {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 8px; color: var(--texto-3); cursor: pointer;
  transition: background .15s, color .15s;
}
.clip:hover, .clip:focus-visible { background: var(--accion-tenue); color: var(--accion-viva); }

/* ---------------------------------------------------------------- filtros -- */
.filtros { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtro {
  padding: .4rem .8rem; font-size: .85rem; font-weight: 500;
  border: 1px solid var(--linea); background: var(--superficie);
  color: var(--texto-2); border-radius: 999px;
}
.filtro:hover { border-color: var(--texto-3); color: var(--texto); }
.filtro[aria-pressed="true"] {
  background: var(--accion-tenue); border-color: var(--accion);
  color: var(--accion-viva); font-weight: 600;
}

.motivos { margin: 0; padding-left: 1.15rem; color: var(--texto-2); font-size: .9rem; }
.motivos li { margin-bottom: .3rem; }

/* Un cobro se lee como lo contrario de un pago sin tener que leer la etiqueta. */
.importe.entrada { color: var(--verde-t); }

/* ------------------------------------------------------------- nota-fila -- */
/*
 * La explicación de por qué un documento está donde está, debajo de su propia
 * fila. Va sangrada y en tono menor: acompaña a la fila, no compite con ella.
 */
.nota-fila {
  margin: -.4rem 0 .9rem; padding: .6rem .8rem;
  border-left: 2px solid var(--linea);
  background: var(--superficie-2); border-radius: 0 8px 8px 0;
  color: var(--texto-2); font-size: .84rem; line-height: 1.5;
}
.nota-fila.buena { border-left-color: var(--verde-t); }