/* ============================================================================
 * EL SISTEMA VISUAL DEL ASISTENTE
 *
 * Móvil primero, SIEMPRE. Esto se mira de pie, con una mano, con prisa y a
 * veces dentro de una tienda. De ahí salen las tres reglas que mandan sobre
 * cualquier gusto estético:
 *
 *   1. MENOS COSAS, MÁS GRANDES.  Su regla, dictada el 2026-09-03: "si veo
 *      muchas las borro, y no significa que la solucioné sino que me estorba
 *      el ruido". Todo adorno que no ayude a decidir, fuera.
 *   2. NO FALLA, SE CALLA.  Un error jamás se puede parecer a "no tienes
 *      nada". Por eso lo vacío es un recuadro punteado tranquilo y lo roto es
 *      un recuadro rojo, sólido y con signo. No se confunden ni de reojo.
 *   3. LOS DOS BOTONES NO SE PARECEN.  "Ya lo hice" resuelve; "Quitar" sólo
 *      calla. Distinto color, distinto peso, distinto tamaño y distinta
 *      forma. Confundirlos le cuesta una medicina.
 *
 * Todo lo visual sale de las variables de abajo. Si algo hay que cambiar, se
 * cambia ahí y cambia en todas las pantallas a la vez.
 * ========================================================================== */

/* ------------------------------------------------------------- 1. LOS TOKENS
 * Los nombres viejos (--fondo, --tarjeta, --acento...) se conservan tal cual:
 * gastos.html e index.html tienen estilos propios que los usan por nombre.
 * Romperlos aquí les rompería la pantalla a ellos, calladamente. */
:root {
  color-scheme: light dark;

  /* -- Escala tipográfica. Razón ~1.15, más corta y más fina que la anterior.
   *
   * REAFINADA EL 2026-10-02. La escala vieja llegaba a 46px porque la regla de entonces era
   * «menos cosas, más grandes». La de ahora es la de Javier del 2 de octubre: «compacto, pero
   * no amontonado… tipografía fina, limpia y moderna… reducir scroll innecesario».
   *
   * Lo que no cambia es el suelo: 16px en el cuerpo. Si baja, el iPhone hace zoom al enfocar
   * un campo y la pantalla salta. Eso no es gusto, es comportamiento del sistema. */
  --t-micro: 10.5px; /* etiquetas en mayúsculas, muy discretas */
  --t-mini:  12px;   /* metadatos, pies, el «por qué» de un resultado */
  --t-chico: 13.5px; /* texto secundario */
  --t-base:  16px;   /* cuerpo: nunca menos */
  --t-medio: 16px;   /* título de una fila o una tarjeta: peso, no tamaño */
  --t-grande:18px;   /* título de pantalla */
  --t-titan: 18px;   /* cifras de dinero */
  --t-heroe: 24px;   /* el número de hoy. Se lee primero por POSICION, no por tamaño */

  /* Pesos más finos: el máximo baja de 680 a 600. La jerarquía la hacen el contraste y la
   * posición, no el grosor. */
  --peso-normal: 400;
  --peso-medio:  480;
  --peso-fuerte: 560;

  /* -- Ritmo de espaciado. Base 4, y la escala se acorta: el salto grande (30, 40) servía
   * para separar tarjetas enormes y ya no hay tarjetas enormes. --e6 y --e7 se conservan por
   * nombre —las páginas los usan— pero valen menos. */
  --e1: 3px;  --e2: 6px;  --e3: 10px; --e4: 14px;
  --e5: 18px; --e6: 22px; --e7: 26px;

  /* -- Radios, finos. Una tarjeta con 16px de radio se ve «app de 2019»; con 8 se ve
   * instrumento. */
  --r-chico: 6px;
  --r:       8px;    /* el radio de una tarjeta (nombre viejo, se conserva) */
  --r-grande:10px;
  --r-pilula:999px;

  /* -- LINEAS FINAS. Su palabra exacta: «líneas y divisores finos». En una pantalla de
   * retina 0.5px es una línea de verdad; donde no se pueda, 1px del tono más suave. */
  /* EL ALTO DE UNA FILA DE LISTA · el token que hace sistemica la compactacion.
   *
   * Antes cada pantalla tenia su propia fila: .aviso en Hoy, .hallazgo y .cosa en Buscar, los
   * movimientos en Dinero. Medido el 2026-10-02: 119px, 115px y 78px. Javier reviso y lo que
   * nombro fue justo eso — «cada pendiente ocupa muchisimo alto», «parece una tarjeta grande»—
   * y pidio que la compactacion fuera SISTEMICA, «no una coleccion de parches por pantalla».
   *
   * Asi que ahora hay UNA fila, y estas dos variables mandan sobre las cuatro pantallas. */
  --fila-y: 7px;          /* el relleno vertical de una fila */
  --fila-gap: 10px;       /* entre el contenido y las acciones */
  /* LO QUE SE RESERVA A LA DERECHA DE UNA FILA, SIEMPRE LO MISMO.
   *
   * Era la causa de que Buscar se viera cargada, y no se notaba de una fila en una: cada fila
   * reservaba a la derecha lo que midieran SUS botones. «Hecho»+aspa son 97px, «Reabrir»+aspa
   * son 108, y una foto guardada no lleva ninguno. Asi que el borde derecho del contenido
   * quedaba DENTADO, y con el las cifras: una lista de resultados con los importes a tres
   * alturas distintas se lee como desorden aunque cada fila este bien.
   *
   * Reservando lo mismo en todas, las cifras forman columna y los botones tambien. No cuesta
   * ni un pixel de alto. */
  --acc-ancho: 100px;

  --hair: 0.5px;
  --borde: var(--hair) solid var(--raya);

  /* -- Movimiento: corto y con sentido. Nunca decorativo. */
  --v-rapido: 110ms;
  --v-medio:  180ms;
  --curva: cubic-bezier(.2, .7, .3, 1);

  /* -- Alturas de toque. El MINIMO de Apple sigue siendo 44, y se respeta — pero con relleno
   * invisible, no con altura visible. Un control de 36px de alto con 4px de relleno arriba y
   * abajo se toca igual de bien y ocupa un tercio menos de pantalla. Eso es lo que permite
   * que quepa más sin amontonar. */
  --alto-control: 30px;   /* lo que se VE */
  /* EL SUELO DE APPLE NO SE NEGOCIA. Lo baje a 38/42 al compactar y la prueba de diseño me
   * paro: son 44x44 los que hacen que un control se toque sin fallar, y Javier lo dijo
   * explicitamente — «no sacrifiques el area tactil necesaria».
   *
   * Y no cuesta alto: el area de toque de un control de fila la da un `::after` invisible, que
   * no ocupa sitio en la maquetacion. Se ve de 26px y se toca en 40. */
  --toque: 40px;          /* el area de toque, no la altura visible */
  --toque-grande: 44px;   /* el suelo de Apple, para las barras y lo que de verdad importa */

  /* ================= PALETA - CLARO (la de por defecto) =================
   * Un azul de marca, un rojo de peligro, un verde de bien, un ámbar de
   * "ojo", y grises con intención (fondo, tarjeta, tarjeta hundida, raya). */
  /* REAFINADA EL 2026-10-02. El fondo era #eef0f4 —un gris claro— con tarjetas blancas
   * encima: ese contraste es lo que hace que una pantalla parezca «una app con cajas». Ahora
   * el fondo es casi blanco y la tarjeta es blanca: la separación la hace LA LINEA, no el
   * escalón de color. Es la diferencia entre un tablero y un instrumento. */
  --fondo:     #fafafb;
  --tarjeta:   #ffffff;
  --tarjeta2:  #f4f5f7;   /* superficie hundida: campos, botones apagados */
  --raya:      #e7e8ec;   /* la línea de todos los días, muy suave */
  --raya-viva: #d0d3da;   /* raya que sí se tiene que ver */
  --texto:     #15181d;
  --suave:     #6b7280;   /* 5.1:1 sobre el fondo claro: se lee de verdad */
  /* LO SECUNDARIO · DISCRETO PERO LEGIBLE.
   *
   * Era #9aa0aa y daba 2.63:1 sobre la tarjeta blanca: por debajo del 4.5 que necesita un texto
   * de 12px. O sea que las etiquetas de seccion, el «por que» de un resultado y los nombres de
   * la navegacion NO SE LEIAN bien de dia. Lo encontro la prueba de contraste.
   *
   * Y no se arregla con otro gris: --suave ya esta en 4.83, al borde del minimo, asi que no cabe
   * uno MAS CLARO que tambien se lea. La jerarquia la hace entonces el TAMAÑO —12px contra
   * 10.5— y la posicion, que es justo lo que Javier pidio: «jerarquia mediante tamaño, peso,
   * posicion y contraste», en ese orden. */
  --tenue:     #70767f;   /* 4.58:1 · lo secundario, callado pero legible */
  /* Y lo que de verdad SOLO decora —los puntos que separan, las flechitas— puede ser mas flojo:
   * si no se ve, no se pierde informacion. Un token aparte para no confundir las dos cosas. */
  --decorativo:#a8adb6;

  --acento:      #0b5fd0;
  --acento-tinte:#e4edfc;
  --urgente:     #cf2b2b;
  --urgente-tinte:#fbe7e7;
  --ok:          #0c8f5f;
  /* EL VERDE PARA TEXTO, que no es el mismo que para rellenar.
   *
   * Medido: #0c8f5f sobre blanco da 4.11:1, y un texto de 12px necesita 4.5 para leerse. A 16px
   * en negrita sobre verde macizo pasaba de sobra; como letra fina sobre fondo claro, no. Éste
   * da 5.16:1.
   *
   * Es la diferencia entre un color que comunica y uno que decora: si la palabra «Hecho» no se
   * lee bien, el control más importante de la pantalla se vuelve un adorno. */
  --ok-texto:    #0a7d52;
  /* El contorno del boton que resuelve: el mismo verde, a menos de la mitad. No es un color
   * de texto, asi que no tiene que pasar contraste de lectura — solo insinuar el marco. */
  --ok-raya:     rgba(10, 125, 82, .42);
  --ok-tinte:    #e0f4ec;
  --aviso:       #a4610a;
  --aviso-tinte: #fbeedb;

  /* ═══ EL NARANJA · EL ACENTO SECUNDARIO · 2026-10-02 ═══════════════════════
   *
   * Javier: «siento que quedo demasiado neutra/plana. Quiero darle un poco mas de personalidad
   * usando acentos naranja muy sutiles, sin perder el estilo oscuro, elegante y minimalista».
   *
   * ES UN TOKEN APARTE Y NO `--aviso`, y la razon no es estetica: `--aviso` SIGNIFICA «ojo con
   * esto» —una medicina atrasada, un importe en disputa, una cola atascada— y si el mismo color
   * sirviera tambien de adorno, el ambar dejaria de querer decir nada. Un color que significa
   * dos cosas no significa ninguna.
   *
   * Asi que quedan TRES papeles, separados y sin solaparse:
   *
   *   --acento   azul      navegacion y accion activa. Manda.
   *   --naranja  naranja   jerarquia: de donde empieza algo, que seccion es, que esta abierto
   *   --aviso    ambar     ojo con esto. Nunca decora.
   *
   * Y el naranja NUNCA rellena una superficie: solo lineas de 1px, un borde parcial o un texto
   * pequeño. «NO quiero tarjetas completas con borde naranja ni grandes superficies naranjas.» */
  --naranja:      #c2560c;
  --naranja-raya: rgba(194, 86, 12, .28);   /* la linea de 1px, apenas ahi */
  --naranja-flojo:rgba(194, 86, 12, .10);   /* para un fondo de 2px, nunca de una caja */

  --sobre-acento:  #ffffff;   /* tinta encima del azul */
  --sobre-ok:      #ffffff;   /* tinta encima del verde */
  --sobre-urgente: #ffffff;   /* tinta encima del rojo */

  /* SOMBRAS CASI INEXISTENTES. Su palabra: «evitar sombras pesadas». La --1 desaparece del
   * todo —una tarjeta se separa con su línea— y las otras dos sólo existen para lo que
   * flota de verdad: la hoja de detalle y la barra de abajo. */
  --sombra-1: none;
  --sombra-2: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --sombra-3: 0 calc(-1 * var(--hair)) 0 var(--raya);
}

/* ===================== PALETA - OSCURO (la del sistema) =====================
 * Él usa el iPhone en los dos modos. En oscuro las sombras casi no existen:
 * la profundidad la dan las rayas y el escalón de superficie, no la sombra. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:     #0c0d10;
    --tarjeta:   #14161a;
    --tarjeta2:  #1b1e24;
    --raya:      #23262d;   /* en oscuro la línea es TODA la separación */
    --raya-viva: #343841;
    --texto:     #e8eaef;
    --suave:     #9298a3;
    /* En oscuro el de antes daba 3.75:1, tambien corto. */
    --tenue:     #868d99;
    --decorativo:#5b616b;

    --acento:      #5aa6ff;
    --acento-tinte:#12233c;
    --urgente:     #ff6b6b;
    --urgente-tinte:#3a1618;
    --ok:          #3ecf8e;
    /* En oscuro el verde de siempre ya da 9.07:1 sobre la tarjeta, así que vale tal cual. */
    --ok-texto:    #3ecf8e;
    --ok-raya:     rgba(62, 207, 142, .40);
    --ok-tinte:    #0d2c22;
    --aviso:       #ffb454;
    --aviso-tinte: #33240d;

    /* En oscuro el naranja tiene que ser mas claro y menos saturado, o se come al ambar del
     * aviso y los dos dejan de distinguirse. */
    --naranja:      #ff8a3d;
    --naranja-raya: rgba(255, 138, 61, .30);
    --naranja-flojo:rgba(255, 138, 61, .12);

    --sobre-acento:  #06152b;
    --sobre-ok:      #04231a;
    --sobre-urgente: #2a0808;

    --sombra-1: none;
    --sombra-2: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .45);
    --sombra-3: 0 calc(-1 * var(--hair)) 0 var(--raya);
  }
}

/* ------------------------------------------------------------- 2. LA BASE */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* NI UNA CURSIVA EN NINGUNA PARTE. Instrucción de Javier, 2026-10-02, con esas palabras:
 * «absolutamente nada de cursivas». Se pone como regla global y no como disciplina, porque
 * `<em>` y `<i>` salen en cursiva por omisión del navegador: basta que alguien escriba uno
 * en un texto para que aparezca. Para matizar se usa color y tamaño.
 *
 * Y la tipografía se afina: `-webkit-font-smoothing` quita el engorde que el navegador le
 * pone al texto en Mac, que es justo lo que hace que una pantalla «fina» no se vea fina. */
* { font-style: normal !important; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Los titulares, más apretados que el cuerpo: a 19px un 1.35 deja un hueco que parece un
 * error de maquetación. */
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.011em; margin: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  /* 1.35 en vez de 1.45: en una lista compacta el interlineado es lo que más scroll ahorra,
   * y a 16px sigue siendo cómodo de leer. Los titulares bajan a 1.2 más abajo. */
  font: var(--t-base)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", system-ui, sans-serif;
  font-weight: var(--peso-normal);
  /* hueco para la caja de dictar, que va fija abajo, más el notch de abajo */
  padding: 0 0 calc(104px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* nada se desborda a lo ancho. Nunca. */
}

/* La columna. En el teléfono es todo el ancho menos el aire de los lados; en
 * la computadora sólo se ensancha hasta una medida cómoda de leer. */
.envoltura {
  max-width: 680px; margin: 0 auto;
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

img, svg, video { max-width: 100%; }

/* El foco de teclado se ve. Siempre, en todo lo que se puede enfocar. */
:focus-visible {
  outline: 2.5px solid var(--acento);
  outline-offset: 2px;
}
/* Con el dedo no hace falta anillo: lo que se toca ya se hunde solo. */
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--acento-tinte); color: var(--texto); }

/* ═══════════════════ EL ARMAZON · 2026-10-02 ══════════════════════════════
 *
 * Cuatro sitios, siempre los mismos y siempre en el mismo lugar. En el iPhone una barra
 * abajo —donde llega el pulgar—; en escritorio la misma barra se convierte en un carril
 * lateral estrecho, sin duplicar una línea de marcado.
 *
 * LA BARRA DE ARRIBA mide 44px y no lleva ni contadores ni estado: eso compite con el
 * contenido. Sólo el nombre, la fecha y dos controles compactos. */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: var(--hair) solid var(--raya);
  padding-top: env(safe-area-inset-top);
}
.barraInt {
  display: flex; align-items: center; gap: var(--e2);
  height: var(--toque-grande);
  max-width: 780px; margin: 0 auto; padding: 0 var(--e4);
}
.marca {
  font-size: var(--t-medio); font-weight: var(--peso-medio);
  letter-spacing: -.015em; flex: 0 0 auto;
}

/* Los controles de icono: 36px de lo que se ve, 40 de lo que se toca, sin fondo ni borde.
 * Un botón con marco al lado del nombre de la app es ruido. */
.iconoBtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: var(--toque); height: var(--toque); min-height: 0; padding: 0;
  background: none; border: 0; border-radius: var(--r-pilula); color: var(--suave);
}
.iconoBtn:active { background: var(--tarjeta2); transform: none; filter: none; }
.ico {
  width: 19px; height: 19px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* LOS CUATRO SITIOS. Abajo en el teléfono, con su línea fina arriba y el hueco del notch. */
.sitios {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  box-shadow: var(--sombra-3);
  padding-bottom: env(safe-area-inset-bottom);
}
.sitios button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  min-height: 50px; padding: var(--e1) 0 2px;
  background: none; border: 0; border-radius: 0;
  color: var(--tenue); font-size: var(--t-micro); font-weight: var(--peso-normal);
  letter-spacing: .01em;
}
.sitios button:active { transform: none; filter: none; background: none; }
.sitios button.activo { color: var(--acento); }
.sitios button.activo .ico { stroke-width: 1.8; }

/* Un sitio ocupa lo suyo y nada más. El cambio no anima de lado: en una app de consulta un
 * deslizamiento de 300ms es tiempo que él espera para nada. */
.sitio[hidden] { display: none; }

/* ESCRITORIO: la misma barra, de carril lateral. */
@media (min-width: 820px) {
  .sitios {
    top: 0; right: auto; bottom: 0; width: 68px;
    flex-direction: column; justify-content: flex-start; gap: 2px;
    padding: calc(env(safe-area-inset-top) + 56px) 0 0;
    border-right: var(--hair) solid var(--raya); box-shadow: none;
  }
  .sitios button { flex: 0 0 auto; min-height: 58px; }
  body { padding-left: 68px; }
  .barra { padding-left: 68px; }
}

h1 {
  font-size: var(--t-grande); font-weight: var(--peso-medio);
  margin: 0; letter-spacing: -.015em; line-height: 1.2;
}
.fecha {
  color: var(--suave); font-size: var(--t-mini); margin-left: auto;
  text-align: right; letter-spacing: .1px;
  flex: 0 1 auto; min-width: 0;
}
/* Sólo la primera letra en mayúscula. Con text-transform:capitalize salía
 * "Viernes, 4 De Septiembre", que en español está mal escrito. */
.fecha::first-letter { text-transform: uppercase; }

/* El "← Volver" de la pantalla de fotos: es un enlace, pero el pulgar lo toca
 * igual que a un botón, así que mide lo que mide un botón. */
header .volver {
  display: inline-flex; align-items: center; margin-left: auto;
  min-height: var(--toque); padding: 0 var(--e2); margin-right: calc(var(--e2) * -1);
  color: var(--suave); text-decoration: none;
  font-size: var(--t-chico); font-weight: var(--peso-medio);
}

/* "Ver mis fotos, gastos y estados de cuenta →" vive en index.html con un
 * estilo propio de 19px de alto. Aquí se le da la altura de un botón sin
 * tocarle el archivo a nadie. */
a#verGastos {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--toque);
}

/* El rótulo de una sección: se lee de reojo y no compite con nada. */
h2 {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 1px;
  color: var(--suave); margin: var(--e6) 0 var(--e3);
  font-weight: var(--peso-fuerte);
  padding-left: var(--e2);
  border-left: 1px solid var(--naranja-raya);
}

/* ================================================================ 4. HOY
 *
 * REESCRITO EL 2026-10-02. Era una tarjeta de 76px con el numero a 28px, centrado en una caja
 * de 62px de ancho. Javier lo reviso y dijo dos cosas: «la tarjeta del numero de pendientes es
 * demasiado grande» y «el 6 tiene demasiado protagonismo».
 *
 * La caja, el borde, el radio y la sombra desaparecen; queda una linea. Y el numero se lee
 * primero por POSICION —es lo primero de la pantalla— no por tamaño. Los COLORES de estado se
 * conservan enteros mas abajo: el verde solo cuando de verdad esta libre, el ambar para lo
 * callado y el rojo para lo roto. Eso informa, no decora. */
.resumen {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3) 0 var(--e2);
  background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0;
  transition: color var(--v-medio) var(--curva);
}
.resumen .n {
  font-size: var(--t-heroe); font-weight: var(--peso-medio); line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  flex: 0 0 auto; color: var(--suave);
}
.resumen .t {
  font-size: var(--t-chico); font-weight: var(--peso-normal);
  letter-spacing: 0; line-height: 1.3; color: var(--suave);
}
.resumen .c {
  flex: 1 1 100%; color: var(--tenue); font-size: var(--t-mini);
  margin-top: 1px; line-height: 1.35;
}

/* Libre de verdad: la palomita en verde. Es el único estado en que el verde
 * es honesto; lo callado se pinta de ámbar, no de verde. */
.resumen:not(.hay):not(.critico):not(.callado):not(.roto) .n { color: var(--ok); }
.resumen.hay      { border-color: color-mix(in srgb, var(--acento) 35%, var(--raya)); }
.resumen.hay .n   { color: var(--acento); }

.resumen.critico  { background: var(--urgente-tinte); border-color: var(--urgente); }
.resumen.critico .n { color: var(--urgente); }
.resumen.critico .c { color: color-mix(in srgb, var(--urgente) 62%, var(--texto)); }

/* El silencio NO se pinta de verde: la pastilla sigue sin tomarse. */
.resumen.callado  { background: var(--aviso-tinte); border-color: var(--aviso); }
.resumen.callado .n { color: var(--aviso); font-size: var(--t-titan); letter-spacing: -1px; }
.resumen.callado.critico { background: var(--urgente-tinte); border-color: var(--urgente); }
.resumen.callado.critico .n { color: var(--urgente); }

/* Roto: rojo, sólido, con signo. Imposible leerlo como "no tienes nada". */
.resumen.roto     { background: var(--urgente-tinte); border-color: var(--urgente); }
.resumen.roto .n  { color: var(--urgente); }
.resumen.roto .t  { color: var(--urgente); }

/* ═══════════════ LA FILA · EL PRIMITIVO COMPARTIDO · 2026-10-02 ══════════
 *
 * UNA SOLA FILA PARA LAS CUATRO PANTALLAS. Hoy, Buscar, Dinero y Papeles usan esta misma caja;
 * lo único que cambia entre ellas es lo que va dentro.
 *
 * POR QUE, Y MEDIDO. Cada pantalla tenía su propia fila: `.aviso` en Hoy, `.hallazgo` y `.cosa`
 * en Buscar, los movimientos en Dinero. Medido con `node tools/densidad.mjs` el 2026-10-02:
 * 119px, 115px y 78px de alto. Javier lo revisó en su iPhone y lo que nombró fue exactamente
 * eso —«cada pendiente ocupa muchísimo alto», «parece una tarjeta grande»— y pidió que la
 * compactación fuera SISTEMICA: «no una colección de parches por pantalla».
 *
 * EL COSTE ESTABA EN LOS BOTONES, no en el texto. La fila de acciones debajo costaba 56px de
 * los 119 — casi la mitad. Sus palabras: «Ya lo hice domina cada fila con un botón verde
 * enorme» y «las acciones deben seguir siendo fáciles de tocar, pero visualmente mucho más
 * discretas».
 *
 * Así que las acciones pasan A LA DERECHA, centradas con el texto. Eso quita los 56px de golpe
 * sin quitar nada tocable: el control se ve de 26px y su área de toque son 38, con relleno
 * invisible. Caben trece filas donde cabían cinco.
 *
 * EN ESCRITORIO la misma fila se vuelve de UNA línea, con lo secundario en columna alineada —
 * «en desktop puede existir información secundaria en columnas o alineada horizontalmente»— y
 * baja a ~32px. */
.fila {
  display: flex; align-items: center; gap: var(--fila-gap);
  padding: var(--fila-y) 0;
  border-top: var(--hair) solid var(--raya);
  background: none;
}
.fila:first-child { border-top: 0 }

/* El contenido: título arriba, lo secundario debajo. `min-width:0` es lo que permite que un
 * título largo se recorte en vez de empujar las acciones fuera de la pantalla. */
.filaCuerpo { flex: 1 1 auto; min-width: 0 }

/* EL CUERPO DE UN AVISO QUE SE PUEDE ABRIR · 2026-10-03
 *
 * Lo mínimo para que se note que se toca, y nada más: el dedo no ve el cursor, así que lo que de
 * verdad lo dice es que se hunda al pulsar — igual que ya hace `.hallazgo:active` en Buscar.
 * Misma señal en las dos pantallas, que es media explicación menos.
 *
 * NI UN PIXEL DE ALTURA. No hay borde, ni fondo en reposo, ni flecha: Javier cerró el diseño
 * visual y esto no es un rediseño, es una pista. El `:active` ocupa cero y el `outline` del foco
 * sólo aparece con el teclado. */
.filaCuerpo.abre { cursor: pointer; -webkit-tap-highlight-color: transparent }
.filaCuerpo.abre:active { background: var(--tarjeta2); border-radius: var(--r-chico) }
.filaCuerpo.abre:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-chico);
}
/* y sin el marco del navegador cuando el foco llega con el dedo o el ratón */
.filaCuerpo.abre:focus:not(:focus-visible) { outline: 0 }
.filaTit {
  font-size: var(--t-base); font-weight: var(--peso-normal);
  line-height: 1.25; letter-spacing: -.005em;
  overflow-wrap: anywhere;
  /* TRES LINEAS DE TECHO, Y EL NUMERO SALE DE SUS DATOS, NO DE MI GUSTO.
   *
   * Hace falta un techo: sin el, un titulo largo hace una fila de cuatro o cinco lineas y una
   * sola asi descuadra la lectura de la lista entera.
   *
   * Pero el techo recorta, y recortar esconde. Asi que medi el ancho real y conte los titulos
   * de verdad que hay en produccion:
   *
   *   al titulo le quedan 228px en un iPhone de 390   ~27 caracteres por linea
   *   52 titulos reales · mediana 32 · p90 66 · el mas largo 90
   *
   *   con techo de 2 lineas (54 car.)   se recortan 7 de 52   el 13%
   *   con techo de 3 lineas (81 car.)   se recorta  1 de 52
   *
   * Empece por dos porque sonaba razonable. Los datos dijeron tres. Y tres no alarga ninguna
   * fila normal —un techo acota, no estira—, asi que la densidad medida no se mueve.
   *
   * Y NO SE PIERDE NADA AUN ASI, que es la condicion que no se negocia: el texto entero va en
   * el `title` del elemento, la fila se abre, y lo que corre prisa vive en `.filaOjo`, que no
   * se trunca nunca. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
/* El peso sólo donde hay jerarquía de verdad: lo que urge. «mucho menos bold». */
.fila.urge .filaTit { font-weight: var(--peso-medio) }
/* LA SEGUNDA LINEA · en flex, para que la cifra no compita con el título.
 *
 * En Buscar el título peleaba a lo ancho con el monto, el «Hecho» y la X: en un teléfono de
 * 390px al título le quedaban unos 180px y se partía en tres líneas. Javier lo señaló.
 *
 * La cifra baja a esta segunda línea, pegada a la derecha. NO cuesta ni un píxel de alto —esta
 * línea ya existía— y al título le quedan unos 95px más. */
.filaMeta {
  display: flex; align-items: baseline; gap: var(--e2);
  font-size: var(--t-mini); color: var(--suave); line-height: 1.3; margin-top: 1px;
  flex-wrap: wrap;
}
.filaMeta .texto {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filaMeta .monto { flex: 0 0 auto }
.filaMeta .sep { color: var(--decorativo); margin: 0 4px }

/* LO QUE IMPORTA NO SE TRUNCA.
 *
 * El texto en naranja de un aviso —«lleva 3 días», «vence hoy»— se cortaba a media palabra:
 * «Es…». Javier: «evita truncar información útil como el texto naranja que termina en Es…».
 *
 * Así que va en su propia línea, se envuelve entero, y lleva su línea naranja de 1px a la
 * izquierda. Sólo aparece cuando LA HAY, así que las filas normales siguen midiendo lo mismo:
 * la densidad no se toca, que es la otra condición. */
.filaOjo {
  flex: 1 1 100%;
  font-size: var(--t-mini); color: var(--naranja); line-height: 1.3; margin-top: 2px;
  padding-left: var(--e2);
  border-left: 1px solid var(--naranja-raya);
  overflow-wrap: anywhere;
}
.filaMeta .ojo { color: var(--aviso) }

/* Las acciones: a la derecha, centradas, y discretas. */
.filaAcc {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end;
  gap: var(--e2);
  min-width: var(--acc-ancho);   /* para que el borde derecho no quede dentado */
}

/* Una cifra alineada a la derecha, con cifras de ancho fijo para que las columnas cuadren. */
.fila .monto {
  flex: 0 0 auto; font-size: var(--t-chico); font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* LA FRANJA DE COLOR que dice de qué tipo es sin leer una palabra. Se conserva —se lee de
 * reojo— pero pasa de 4px a 2 y sólo aparece cuando significa algo. */
.fila.critico { border-left: 2px solid var(--urgente); padding-left: var(--e2) }
.fila.insiste { border-left: 2px solid var(--aviso); padding-left: var(--e2) }

/* ESCRITORIO · la fila se vuelve de una línea y aprovecha el ancho. */
@media (min-width: 820px) {
  .fila { padding: calc(var(--fila-y) - 1px) 0 }
  .filaCuerpo { display: flex; align-items: baseline; gap: var(--e4); min-width: 0 }
  /* En escritorio la fila es de una linea, asi que el techo de dos no aplica: vuelve a ser un
   * bloque normal que se recorta con puntos suspensivos. Sin esto, `-webkit-box` y `nowrap`
   * se pelean y el recorte sale a media palabra. */
  .filaTit {
    display: block; -webkit-line-clamp: none;
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .filaMeta {
    flex: 0 0 auto; margin-top: 0; max-width: 42%;
    text-align: right;
  }
}

/* ═══════════════ LOS DOS CONTROLES QUE MANDAN ════════════════════════════
 *
 * ESTA ES LA REGLA MAS IMPORTANTE DEL PRODUCTO Y NO SE UNIFORMA POR ESTETICA.
 *
 *   «Ya lo hice»  -> verde macizo, con palomita Y CON PALABRA. RESUELVE la cosa.
 *   «Quitar»      -> sin relleno, gris, punteado, SOLO UN ASPA. Sólo CALLA; vuelve.
 *
 * Distinto color + distinto relleno + distinto borde + distinto ancho + uno lleva palabra y el
 * otro no. Con el pulgar, con prisa y de reojo no se pueden confundir. Confundirlos le cuesta
 * una medicina, así que de los dos sólo el secundario se queda sin texto.
 *
 * Y SE TOCAN BIEN AUNQUE SE VEAN FINOS: 26px de alto visible, 38 de área real. El relleno
 * invisible lo da el `::after`, que no ocupa sitio en la maquetación. Es lo que Javier pidió:
 * «el control puede verse fino aunque tenga un hit target cómodo». */
.fila .filaAcc button {
  position: relative;
  min-height: 26px; padding: 0 var(--e2); flex: 0 0 auto;
  border-radius: var(--r-pilula);
  font-size: var(--t-mini); font-weight: var(--peso-normal);
  line-height: 1;
}
/* EL AREA DE TOQUE, invisible y sin ocupar: 38px en los dos ejes. */
.fila .filaAcc button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, var(--toque)); height: var(--toque);
  transform: translate(-50%, -50%);
}
/* EL QUE RESUELVE · letras y contorno, no relleno.
 *
 * Javier, 2026-10-02: «realmente ese color verde que han hecho en el botón de hecho no me gusta
 * mucho… a lo mejor las letras ponerlas verdes y el contorno también».
 *
 * Y NO NARANJA, que fue su otra idea: el naranja significa ya «jerarquía y estado» en toda la
 * pantalla, así que de botón principal volvería a competir con lo que acabamos de separar. El
 * verde significa «esto queda resuelto», que es exactamente lo que hace.
 *
 * LA REGLA DE SEGURIDAD SIGUE EN PIE, y es la más importante del producto: de confundir este
 * control con el que sólo calla depende una medicina. Siguen diferenciándose en CUATRO cosas:
 *
 *   color    verde contra gris
 *   borde    continuo contra punteado
 *   ancho    se ensancha con su palabra contra un cuadrado de 26px
 *   dentro   palomita Y PALABRA contra un aspa sola
 *
 * Lo que se pierde es el relleno; lo que queda sigue siendo imposible de confundir de reojo. */
.fila .filaAcc button.hecho {
  background: transparent;
  /* EL CONTORNO BAJA DE TONO, LA LETRA NO.
   *
   * A contorno verde entero, una lista de diez resultados es una columna de diez pastillas
   * verdes gritando, y el titulo —que es lo que se viene a leer— queda debajo. Javier: «evita
   * que Hecho y X compitan tanto con el contenido principal».
   *
   * Pero la LETRA se queda en el verde medido de 5.16:1, porque de leerla depende saber que
   * boton es. Baja el marco, no el mensaje. Las cuatro diferencias siguen enteras: la letra
   * sigue siendo verde contra gris, el borde continuo contra punteado, se sigue ensanchando
   * con su palabra, y sigue llevando palomita Y palabra. */
  border: 1px solid var(--ok-raya);
  color: var(--ok-texto);
  font-weight: var(--peso-medio); padding: 0 10px;
}
/* Al pulsarlo sí se rellena un instante: es la única confirmación de que el toque entró, y sin
 * ella un control sin fondo se siente muerto. */
.fila .filaAcc button.hecho:active {
  background: var(--ok-tinte); transform: scale(.97);
}
.fila .filaAcc button.hecho::before { content: "\2713"; margin-right: 4px; font-weight: 600 }
.fila .filaAcc button.callar {
  background: transparent;
  /* El que solo calla se aparta mas aun: el aspa pasa al gris de lo que solo decora, porque
   * nunca es lo que se viene a hacer. Conserva su punteado, que es una de las cuatro. */
  color: var(--decorativo);
  border: var(--hair) dashed var(--raya);
  width: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
/* «REABRIR» · EL QUE NO TENIA NINGUNA REGLA.
 *
 * No habia `.fila .filaAcc button.chico` en ninguna parte, y tampoco hay un reset global de
 * `button`: asi que una fila cancelada pintaba su «Reabrir» CON EL CROMO GRIS DEL NAVEGADOR
 * —fondo de sistema, borde en relieve y otra tipografia—. Fuera del diseño por completo.
 *
 * Y no se veia nunca al revisar, porque hay que cerrar algo primero para que aparezca. Es
 * exactamente el caso que Javier pidio mirar: «filas con estado cancelado/reabierto».
 *
 * Va callado a proposito: reabrir no es lo que se viene a hacer, es deshacer. */
/* Y VA SIN CAJA, QUE ES LO QUE LO HACE SECUNDARIO. LA MEDICION NO DEJO OTRA SALIDA.
 *
 * Javier, 2026-10-02: «"Reabrir" se ve demasiado apagado y parece deshabilitado. Hazlo
 * claramente reconocible como accion disponible, manteniendolo secundario frente a "Hecho"».
 *
 * Mi primer intento fue subirle el borde. No se puede, y los numeros lo dicen sin margen:
 *
 *   para no verse deshabilitado, un borde de control necesita       >= 2.3:1
 *   pero el borde de «Hecho» es rgba al 42%, y mezclado se ve a        1.86:1
 *
 *   --raya (lo que tenia)  1.22:1   parece apagado
 *   --raya-viva            1.50:1   parece apagado
 *   --decorativo           2.25:1   parece apagado
 *   el gris mas flojo que SE VE  2.63:1   ya le gana a «Hecho»
 *
 * No hay ni un gris que quepa entre los dos. El borde era la herramienta equivocada: lo que lo
 * hacia parecer apagado era precisamente tener una caja tan tenue que se leia como apagada.
 *
 * ASI QUE LA CAJA SE VA Y EL TEXTO SUBE. La jerarquia la hace entonces LA CAJA, que es como se
 * ha hecho siempre: «Hecho» tiene marco, «Reabrir» es una palabra. Y la palabra pasa al gris
 * de siempre de lo secundario —4.83:1, por encima del minimo de lectura— con peso medio para
 * que no se confunda con el texto de al lado. Mas presente que antes y sin caja que la apague.
 *
 * No entra ningun color nuevo y no cambia ni un pixel de alto. */
.fila .filaAcc button.chico {
  background: transparent; border: 0;
  /* `font: inherit` va PRIMERO: es una propiedad compuesta y borraria el peso si fuera
   * despues. Es el tipo de error que no se ve, porque el texto sigue saliendo — solo sale
   * con otro peso. */
  font: inherit; font-size: var(--t-mini); font-weight: var(--peso-medio);
  color: var(--suave);
  padding: 0 var(--e2);
}
/* Y al pulsarla contesta, que es la otra mitad de «no esta deshabilitada»: un control sin caja
 * y sin respuesta al toque se siente muerto aunque se lea bien. */
.fila .filaAcc button.chico:active {
  color: var(--texto); transform: scale(.97);
}
.fila .filaAcc button.callar::before { content: none }
.fila .filaAcc button.callar .ico { width: 13px; height: 13px }

/* «Quitar las 5 del ruido»: va solo, al pie de la lista, y es un callar. */
#quitartodo button.callar {
  width: 100%; min-height: var(--alto-control); margin-top: var(--e2);
  font-size: var(--t-mini); color: var(--tenue);
}

/* LA LISTA que las contiene lleva el marco UNA vez, no doce. */
/* EL MARCO LO LLEVA LA LISTA, NO EL CONTENEDOR.
 *
 * Antes el borde estaba en `#archivo` y `#lista` directamente, así que un rótulo puesto dentro
 * —«LO ÚLTIMO QUE GUARDASTE»— quedaba pegado al borde de arriba y parecía montado encima. Era
 * justo lo que Javier señaló.
 *
 * Ahora el rótulo va FUERA y el marco envuelve sólo las filas. Y de paso se arregla lo de las
 * «cajas dentro de cajas»: hay un marco por lista, no uno por contenedor.
 *
 * LA LINEA NARANJA DE 1px ES EL ACENTO PRINCIPAL DE TODA LA PASADA. Una lista empieza con una
 * línea naranja finísima arriba: dice «aquí empieza algo» sin una palabra, sin una caja y sin
 * color de relleno. Es exactamente lo que pidió — «líneas naranja muy finas, idealmente 1px,
 * sólo donde ayuden a crear jerarquía». */
.lista {
  background: var(--tarjeta);
  border: var(--borde); border-radius: var(--r);
  border-top: 1px solid var(--naranja-raya);
  padding: 0 var(--e3);
}

/* ═══════════════ EL RESUMEN DE HOY · una línea, no una tarjeta ═══════════
 *
 * Era una tarjeta de 76px con la cifra a 28px. Sus palabras: «la tarjeta del número de
 * pendientes es demasiado grande» y «el 6 tiene demasiado protagonismo».
 *
 * Ahora es una línea: la cifra a 24px pero al lado del texto, no encima, y sin caja propia. La
 * jerarquía la hace la POSICION —es lo primero de la pantalla— y no el tamaño. */


/* ---------------------------------------------- 7. LO VACÍO Y LO ROTO
 * Vacío = recuadro punteado, tranquilo, sin drama.
 * Roto  = recuadro rojo, sólido, con un signo delante. No se parecen. */
.nadie {
  color: var(--suave); font-size: var(--t-chico);
  padding: var(--e5) var(--e4); text-align: center;
  border: 1.5px dashed var(--raya-viva); border-radius: var(--r);
  background: color-mix(in srgb, var(--tarjeta) 55%, transparent);
  line-height: 1.45;
}
.nadie.roto {
  color: var(--urgente); font-weight: var(--peso-fuerte);
  font-size: var(--t-base);
  border: 1.5px solid var(--urgente);
  background: var(--urgente-tinte);
  text-align: left;
}
.nadie.roto::before {
  content: "\26A0"; display: block; font-size: 17px; line-height: 1;
  margin-bottom: var(--e2);
}

/* --------------------------------------- 8. LO CALLADO (existe, no grita) */
details.callados {
  margin-top: var(--e3);
  border: var(--hair) solid var(--raya); border-radius: var(--r);
  background: color-mix(in srgb, var(--tarjeta) 60%, transparent);
  overflow: hidden;
}
details.callados summary {
  color: var(--suave); font-size: var(--t-chico); cursor: pointer;
  padding: var(--e3) var(--e4); min-height: var(--toque);
  display: flex; align-items: center; gap: var(--e2);
  list-style: none; font-weight: var(--peso-medio);
}
details.callados summary::-webkit-details-marker { display: none; }
details.callados summary::after {
  content: "\25BE"; margin-left: auto; font-size: 15px; line-height: 1;
  transition: transform var(--v-medio) var(--curva);
}
details.callados[open] summary::after { transform: rotate(180deg); }
.callado {
  color: var(--suave); font-size: var(--t-chico);
  padding: var(--e3) var(--e4); border-top: 1px solid var(--raya);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ 9. PESTAÑAS */
.pestanas {
  display: flex; gap: var(--e2); margin: var(--e4) 0 var(--e2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: 0 0 auto; min-height: var(--alto-control); font-size: var(--t-chico);
  font-weight: var(--peso-medio); border-radius: var(--r-pilula);
  padding: 0 var(--e4); background: transparent; border-color: var(--raya-viva);
  color: var(--suave);
}
.pestanas button.activa {
  background: var(--acento); border-color: var(--acento);
  color: var(--sobre-acento); font-weight: var(--peso-fuerte);
}

/* La fila de filtros se desliza; el degradado de la derecha es lo único que
 * lo dice. Sin él, "Citas", "En camino" y "Pagos" no existen. */
.deslizable { position: relative; }
.deslizable::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 36px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--fondo) 78%);
}

/* ==================================================== 10. EL ARCHIVO
 * Pesa menos que hoy a propósito: renglones más juntos, letra más chica,
 * sin sombra. Es para consultar, no para decidir ahora mismo. */
input[type=search], input[type=text], input[type=password],
input[type=number], input[type=date], textarea, select {
  font: inherit; font-size: var(--t-base);   /* 16px o el iPhone hace zoom */
  width: 100%; background: var(--tarjeta); color: var(--texto);
  border: var(--hair) solid var(--raya-viva); border-radius: var(--r-chico);
  padding: var(--e3); min-height: var(--toque);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--v-rapido) var(--curva);
}
input::placeholder, textarea::placeholder { color: var(--suave); opacity: .85; }
input[type=search]:focus, textarea:focus { border-color: var(--acento); }

.cosa {
  background: var(--tarjeta); border: var(--hair) solid var(--raya);
  border-radius: var(--r-chico);
  padding: var(--e3) var(--e4); margin-bottom: var(--e2);
}
.cosa .cab { display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; }
.cosa .tit {
  font-weight: var(--peso-medio); flex: 1 1 auto; min-width: 0;
  font-size: var(--t-chico); letter-spacing: -.1px; overflow-wrap: anywhere;
}
.cosa.cerrada { opacity: .72; }
.cosa.cerrada .tit { color: var(--suave); text-decoration: line-through; }
.cosa .monto {
  font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte);
  font-size: var(--t-chico); white-space: nowrap;
}
.cosa .meta {
  color: var(--suave); font-size: var(--t-mini); margin-top: 3px;
  line-height: 1.4; overflow-wrap: anywhere;
}
.cosa .botones { margin-top: var(--e3); gap: var(--e2); }

.etiqueta {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .6px;
  font-weight: var(--peso-fuerte);
  background: var(--tarjeta2); border: var(--hair) solid var(--raya); color: var(--suave);
  border-radius: var(--r-pilula); padding: 2px 8px; white-space: nowrap;
}

/* ======================================================= 11. EL DINERO
 * La cifra es lo más grande de la tarjeta; el rótulo, lo más chico. */
.cajas { display: flex; gap: var(--e3); }
.caja {
  flex: 1 1 0; min-width: 0;
  background: var(--tarjeta); border: var(--hair) solid var(--raya);
  border-radius: var(--r); padding: var(--e4);
  box-shadow: var(--sombra-1);
}
.caja .n {
  font-size: var(--t-titan); font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
  line-height: 1.1; margin-top: var(--e1); overflow-wrap: anywhere;
}
.caja .e {
  color: var(--suave); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .9px; font-weight: var(--peso-fuerte);
}

table { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
th {
  text-align: left; color: var(--suave); font-weight: var(--peso-fuerte);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .8px;
  padding: var(--e2) var(--e1);
}
td { padding: var(--e3) var(--e1); border-top: 1px solid var(--raya); }
/* El día no se parte en dos renglones: "09-" / "04" no es una fecha. */
td:first-child { white-space: nowrap; color: var(--suave); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sale  { color: var(--urgente); }
.entra { color: var(--ok); }

/* ================================================= 12. LA CAJA DE DICTAR
 * Fija abajo: es donde llega el pulgar, y ahí es donde tiene que estar lo
 * que más usa. El micrófono del teclado del iPhone dicta aquí dentro. */
.dictar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--raya);
  box-shadow: var(--sombra-3);
  padding: var(--e3) 0 calc(var(--e3) + env(safe-area-inset-bottom));
}
.dictar .interior {
  max-width: 680px; margin: 0 auto;
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  display: flex; gap: var(--e2); align-items: flex-end;
}
.dictar textarea {
  resize: none; max-height: 110px; min-height: var(--toque-grande);
  border-radius: var(--r-chico); background: var(--tarjeta);
  padding: var(--e3);
}
.dictar button {
  flex: 0 0 auto; min-width: 76px; min-height: var(--toque-grande);
  background: var(--acento); border-color: var(--acento);
  color: var(--sobre-acento); font-weight: var(--peso-fuerte);
  border-radius: var(--r-chico); box-shadow: var(--sombra-1);
}

/* --------------------------------------------- 13. LO QUE ENTENDÍ (2 pasos)
 * Nada se guarda sin que él lo vea. Este recuadro tiene que destacar. */
.propuesta {
  background: var(--tarjeta); border: 1.5px solid var(--acento);
  border-radius: var(--r); padding: var(--e4);
  margin-top: var(--e4); box-shadow: var(--sombra-2);
}
.propuesta .q {
  color: var(--acento); font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: 1px; font-weight: var(--peso-fuerte);
}
.propuesta .i {
  font-size: var(--t-medio); font-weight: var(--peso-fuerte);
  letter-spacing: -.2px; margin: var(--e2) 0 var(--e3); line-height: 1.3;
  overflow-wrap: anywhere;
}
/* "Va a cerrar: los tenis de Amazon" - el nombre exacto, antes de cerrarlo. */
.propuesta .ojo {
  color: var(--aviso); font-weight: var(--peso-fuerte); font-size: var(--t-chico);
  background: var(--aviso-tinte); border-radius: var(--r-chico);
  padding: var(--e2) var(--e3); margin-bottom: var(--e3);
}
.propuesta button.cual {
  display: block; width: 100%; margin-bottom: var(--e2); text-align: left;
  flex: none; padding: var(--e3) var(--e4); min-height: var(--toque);
  background: var(--tarjeta2);
}

/* ------------------------------------------------------ 14. EL AVISO CORTO
 * (el recuadro que sale abajo y se va solo a los 4 segundos) */
#tost {
  border-radius: var(--r-chico) !important;
  line-height: 1.4;
  box-shadow: var(--sombra-2) !important;
}

/* ------------------------------------------------------- 15. LA PUERTA */
.puerta {
  max-width: 380px; margin: 0 auto;
  text-align: center;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: env(safe-area-inset-top) var(--e5)
           calc(var(--e5) + env(safe-area-inset-bottom));
}
.puerta h1 { font-size: var(--t-heroe); margin: 0 0 var(--e2); letter-spacing: -.02em; }
.puerta p { color: var(--suave); font-size: var(--t-chico); margin: 0; }
.puerta form { margin-top: var(--e6); display: flex; flex-direction: column; gap: var(--e3); }
.puerta input { text-align: center; min-height: var(--toque-grande); }
.puerta button {
  background: var(--acento); border-color: var(--acento); color: var(--sobre-acento);
  min-height: var(--toque-grande); font-weight: var(--peso-fuerte);
  border-radius: var(--r-chico); box-shadow: var(--sombra-1);
}
.mal {
  color: var(--urgente); font-size: var(--t-chico); min-height: 20px;
  font-weight: var(--peso-medio);
}

/* ============================================== 16. EL CARTEL ROJO DE ARRIBA
 *
 * Cuando algo falla, SE VE. Va pegado arriba del todo, en rojo, con el texto
 * en grande y con un botón para reintentar. El fallo que aquí cuesta caro no
 * es el que revienta: es el que se pinta como una lista vacía y se lee en el
 * teléfono como "hoy no tengo medicinas". */
/* FIJO, NO PEGAJOSO. Y la diferencia importa el día que falle algo.
 *
 * Con `sticky` el cartel depende de dónde esté en el documento y de que ningún
 * ancestro se vuelva un contenedor de scroll: basta un `overflow` en un div de
 * por medio para que degrade a estático y se quede arriba del documento, fuera de
 * la pantalla. Hoy funciona —`#alarma` es hijo directo de `body`, como la
 * cabecera— pero funciona por donde está colocado, no por lo que pide.
 *
 * `fixed` lo pide de verdad: se ve esté él donde esté, y no le obliga a subir
 * hasta arriba para enterarse de que algo falló. Decisión de Javier el
 * 2026-10-01, después de que un intento suyo de guardar una nota no diera señal
 * de vida y hubiera que reconstruir qué pasó.
 *
 * OJO AL PONER COSAS ENCIMA: `position: fixed` se rompe si un ancestro tiene
 * `transform`, `filter`, `backdrop-filter`, `perspective`, `contain` o
 * `will-change`. Hoy ni `html` ni `body` los tienen —la cabecera sí tiene
 * `backdrop-filter`, pero es su HERMANA, no su madre— y hay una prueba que lo
 * vigila. No meter el cartel dentro de la cabecera ni de la caja de dictar. */
.alarma {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--urgente); color: var(--sobre-urgente);
  padding: calc(var(--e3) + env(safe-area-inset-top)) var(--e4) var(--e3);
  font-size: var(--t-chico); font-weight: var(--peso-fuerte);
  display: flex; flex-direction: column; gap: var(--e2);
  box-shadow: var(--sombra-2);
  line-height: 1.35;
}
.alarma[hidden] { display: none; }
.alarma .que { font-size: var(--t-base); letter-spacing: -.15px; }
.alarma .det {
  font-weight: var(--peso-normal); font-size: var(--t-mini); opacity: .85;
  word-break: break-word;
}
.alarma button {
  background: var(--sobre-urgente); color: var(--urgente);
  border-color: var(--sobre-urgente); font-weight: var(--peso-fuerte);
  flex: 0 0 auto; align-self: flex-start;
  min-height: var(--toque); font-size: var(--t-chico); padding: 0 var(--e3);
  border-radius: var(--r-pilula);
}

/* ------------------------------------------- 17. PANTALLA GRANDE (el extra)
 * En la computadora sólo se ensancha la columna y respira un poco más. */
@media (min-width: 720px) {
  .resumen { padding: var(--e6) var(--e5); }
  .resumen .n { font-size: 56px; min-width: 78px; }
  .aviso { padding: var(--e4) var(--e5); }
}

/* ------------------------------------------------ 18. SIN MOVIMIENTO
 * Si el teléfono pide menos movimiento, no hay movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  button:active, .boton:active { transform: none; }
}

/* El pie legal de la pantalla de entrar. Discreto: no compite con la caja de
 * la contraseña, que es a lo que él viene. Existe porque Google necesita
 * llegar al aviso de privacidad y a los terminos SIN entrar. */
.puerta .legal {
  margin-top: var(--e6);
  font-size: var(--t-mini, 12px);
  color: var(--suave);
  opacity: .75;
}
.puerta .legal a { color: inherit; text-decoration: underline; }
.puerta .legal a:hover { color: var(--acento); }

/* ═══════════════════ LAS HOJAS · 2026-10-02 ══════════════════════════════
 *
 * LA DECISION DE NAVEGACION MAS IMPORTANTE DEL REDISEÑO: nada abre una página nueva.
 *
 * Pulsar un resultado, un aviso o un gasto abre una hoja ENCIMA de lo que estaba mirando. Al
 * cerrarla, lo de debajo sigue exactamente como estaba: mismo scroll, misma búsqueda, mismo
 * sitio. Sin recargar y sin volver a buscar. Eso es lo que Javier pidió como «regresar sin
 * perder contexto», y con páginas separadas no se puede cumplir.
 *
 * En el iPhone sube desde abajo y deja ver un poco de lo de atrás —así se entiende que no te
 * has ido—. En escritorio entra por la derecha y la lista se queda al lado, visible. */
.hoja {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--texto) 22%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: hojaFondo var(--v-medio) var(--curva);
}
.hoja[hidden] { display: none; }
@keyframes hojaFondo { from { opacity: 0 } to { opacity: 1 } }

.hojaCaja {
  width: 100%; max-width: 640px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--fondo);
  border-top-left-radius: var(--r-grande); border-top-right-radius: var(--r-grande);
  box-shadow: var(--sombra-2);
  animation: hojaSube var(--v-medio) var(--curva);
}
@keyframes hojaSube { from { transform: translateY(14px) } to { transform: none } }

/* La cabecera de una hoja: 44px, línea fina abajo, el título centrado y pegada arriba
 * mientras se baja por el contenido. */
.hojaCab {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--e2);
  height: var(--toque-grande); padding: 0 var(--e3);
  border-bottom: var(--hair) solid var(--raya);
}
.hojaCab strong {
  flex: 1 1 auto; min-width: 0; font-size: var(--t-medio); font-weight: var(--peso-medio);
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hojaCab .iconoBtn:first-child { margin-left: calc(var(--e1) * -1) }
.hojaCuerpo {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--e3) var(--e4) calc(var(--e5) + env(safe-area-inset-bottom));
}

@media (min-width: 820px) {
  .hoja { align-items: stretch; justify-content: flex-end; }
  .hojaCaja {
    max-width: 460px; max-height: none; height: 100%;
    border-radius: 0; border-left: var(--hair) solid var(--raya);
    animation: hojaEntra var(--v-medio) var(--curva);
  }
  @keyframes hojaEntra { from { transform: translateX(16px) } to { transform: none } }
}

/* ═══════════════════ LO QUE ESPERA DECISION · UNA LINEA ══════════════════ */
#cuadre {
  position: sticky; top: calc(env(safe-area-inset-top) + var(--toque-grande)); z-index: 29;
  background: var(--tarjeta2);
  border-bottom: var(--hair) solid var(--raya);
}
.cuadreFila {
  display: flex; align-items: center; gap: var(--e2);
  max-width: 780px; margin: 0 auto; padding: var(--e2) var(--e4);
  min-height: var(--toque);
}
.cuadreN {
  font-size: var(--t-chico); font-weight: var(--peso-fuerte);
  color: var(--texto); flex: 0 0 auto;
}
.cuadreT {
  flex: 1 1 auto; font-size: var(--t-chico); color: var(--suave); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cuadre .chico { flex: 0 0 auto; color: var(--acento); background: none; border: 0; }
@media (min-width: 820px) { #cuadre { top: 0 } }

/* ═══════════════════ LA BUSQUEDA, EN EL CENTRO ═══════════════════════════ */
.buscaCaja {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--tarjeta2); border: var(--borde); border-radius: var(--r-chico);
  padding: 0 var(--e2); margin: var(--e3) 0 var(--e2);
}
.buscaCaja .lupa { color: var(--tenue) }
.buscaCaja input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none; color: var(--texto);
  font: inherit; font-size: var(--t-base);   /* 16: si baja, el iPhone hace zoom */
  min-height: var(--toque); padding: 0;
}
.buscaCaja input::-webkit-search-cancel-button { display: none }

#masFiltros { margin: 0 0 var(--e3) }
#masFiltros > summary {
  list-style: none; cursor: pointer;
  font-size: var(--t-mini); color: var(--tenue);
  padding: var(--e1) 0; min-height: 24px;
}
#masFiltros > summary::-webkit-details-marker { display: none }
#masFiltros > summary::after { content: " ›"; }
#masFiltros[open] > summary::after { content: " ⌄"; }

/* ═══════════════════ LA HOJA DE «AÑADIR ALGO» ════════════════════════════ */
.atajosMas { display: flex; gap: var(--e2); margin-top: var(--e3) }
.atajosMas .chico {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2); min-height: var(--toque);
}

/* La caja de dictar ya NO va fija abajo: vive dentro de la hoja. Antes reservaba 104px en
 * todas las pantallas, siempre, incluso buscando — eso es scroll regalado en las cuatro. */
.hoja .dictar {
  position: static; background: none; box-shadow: none; padding: 0; border: 0;
}
.hoja .dictar .interior { max-width: none; padding: 0 }

/* ═══════════════ LO QUE VIVIA EN <style> DENTRO DE index.html ═════════════
 *
 * Estaba repartido en tres bloques <style> dentro del HTML, que es como se acaba teniendo el
 * mismo valor escrito en dos sitios. Ahora vive aquí, una vez, y compacto. */

/* El permiso de la campana: una línea discreta, no un botón de bloque. Y sólo aparece cuando
 * de verdad hace falta — el resto del tiempo no existe. */
#permiso {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%; margin: var(--e3) 0 0;
  min-height: var(--toque); padding: 0 var(--e3);
  font-size: var(--t-chico); text-align: left;
  background: var(--tarjeta2); color: var(--suave);
  border: var(--borde); border-radius: var(--r-chico);
}

/* LOS DOS BOTONES DE FOTO. Siguen siendo dos, del mismo tamaño y los dos a la vista — eso lo
 * pidió él y no se toca. Lo que cambia es la forma: eran dos bloques de 96px de alto con un
 * emoji de 28px; ahora son dos controles en fila de 44, con su icono fino. */
#dosBotones { display: flex; gap: var(--e2); margin: var(--e3) 0 0; }
.botonFoto {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  gap: var(--e2); min-height: var(--toque-grande); padding: 0 var(--e3);
  background: var(--acento); color: var(--sobre-acento);
  border: var(--hair) solid transparent; border-radius: var(--r-chico);
  font-size: var(--t-chico); font-weight: var(--peso-medio);
  text-align: center; line-height: 1.2;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.botonFoto.claro {
  background: var(--tarjeta2); color: var(--texto); border-color: var(--raya);
}
.botonFoto:active { filter: brightness(.95); }

#estadoSubida {
  margin: var(--e2) 0 0; padding: var(--e2) var(--e3);
  background: var(--tarjeta2); border: var(--borde); border-radius: var(--r-chico);
  font-size: var(--t-chico);
}

/* El enlace a los papeles: una fila con su flecha, no un renglón centrado en gris que no se
 * ve. Lo que lleva a otra pantalla se parece a algo que se puede tocar. */
#verGastos {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  min-height: var(--toque); margin: var(--e3) 0 0; padding: 0 var(--e3);
  background: var(--tarjeta); border: var(--borde); border-radius: var(--r-chico);
  color: var(--texto); font-size: var(--t-chico); text-decoration: none;
}
#verGastos .ico { color: var(--tenue) }

/* ═══════════════ LO QUE NO CUADRA · las filas de la hoja ═════════════════ */
.prop { padding: var(--e3) 0; border-top: var(--hair) solid var(--raya); }
.prop:first-child { border-top: 0; padding-top: 0; }
/* Un desacuerdo se distingue de una propuesta, y la diferencia importa: en una propuesta el
 * dato todavía no está puesto; en un desacuerdo ya hay dos valores dentro y ninguno manda. */
.prop.desacuerdo { border-left: 2px solid var(--aviso); padding-left: var(--e3); }
.propDe { font-size: var(--t-medio); font-weight: var(--peso-medio); letter-spacing: -.01em; }
.propCual { font-size: var(--t-mini); color: var(--suave); margin: 2px 0 var(--e2); }
.propDice {
  display: flex; gap: var(--e3); align-items: baseline;
  padding: var(--e2) 0; font-size: var(--t-chico);
  border-top: var(--hair) dashed var(--raya);
}
.propDice .v { font-weight: var(--peso-fuerte); white-space: nowrap; }
.propDice .q { flex: 1 1 auto; color: var(--suave); font-size: var(--t-mini); line-height: 1.35; }
.propBotones { display: flex; gap: var(--e2); margin-top: var(--e3); }
.propBotones button {
  flex: 1 1 0; min-height: var(--toque); border-radius: var(--r-chico);
  font-size: var(--t-chico); border: var(--borde);
}
.propBotones .si {
  background: var(--acento); color: var(--sobre-acento);
  border-color: transparent; font-weight: var(--peso-medio);
}
.propBotones .no { background: transparent; color: var(--suave); }

/* ═══════════════ LO GASTADO ESTE MES ════════════════════════════════════ */
.gastadoCaja {
  padding: var(--e3) var(--e4);
  background: var(--tarjeta); border: var(--borde); border-radius: var(--r);
  margin: var(--e3) 0;
}
.gastadoCifra {
  font-size: var(--t-heroe); font-weight: var(--peso-medio);
  letter-spacing: -.025em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.gastadoPie { font-size: var(--t-mini); color: var(--suave); margin-top: 2px; }
.gastadoAviso { font-size: var(--t-mini); color: var(--aviso); margin-top: var(--e2); }

/* ═══════════════ LAS CUATRO CATEGORIAS DEL DINERO · 2026-10-03 ═══════════════
 *
 * Cuatro cifras que NO se mezclan y que no se restan entre sí. Se reutiliza todo lo que ya
 * había —la caja, la cifra, el pie, los tokens de color— y lo único nuevo es la rejilla y la
 * señal de «tocable» y «abierta».
 *
 * DOS Y DOS, NO CUATRO EN FILA. En el iPhone, cuatro columnas dejan cada cifra en 70px y
 * «$14 981,11» se parte en tres líneas. Dos por fila caben enteras, y en escritorio entran las
 * cuatro porque la rejilla se adapta sola.
 *
 * NINGUNA ES MAS GRANDE QUE OTRA, a propósito. Hacer «Salió» el titular y las demás pequeñas
 * sería decidir por él cuál importa, y la que hoy importa es «Debe»: son tres facturas, dos de
 * ellas con la fecha pasada. */
.catsDinero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2);
  margin: var(--e3) 0 var(--e2);
}
@media (min-width: 560px) {
  .catsDinero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.catDinero {
  padding: var(--e3); min-width: 0;
  background: var(--tarjeta); border: var(--borde); border-radius: var(--r);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.catDinero:active { background: var(--tarjeta2) }
.catDinero:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px }
.catDinero:focus:not(:focus-visible) { outline: 0 }
/* LA ABIERTA SE MARCA CON UNA RAYA, no con un fondo: el fondo movería el peso visual de las
 * cifras y la comparación entre ellas es justo para lo que están. */
.catDinero.abierta { border-color: var(--acento) }
.catEtiq {
  color: var(--suave); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .9px; font-weight: var(--peso-fuerte);
}
.catCifra {
  font-size: var(--t-grande); font-weight: var(--peso-medio);
  letter-spacing: -.02em; line-height: 1.1; margin-top: 2px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.catPie { font-size: var(--t-micro); color: var(--tenue); margin-top: 2px }

/* EL COLOR DICE LA DIRECCION, y sólo en la cifra. Salió y entró ya tienen su color en toda la
 * aplicación —`.sale` y `.entra`— y se reutilizan tal cual. «Debe» va en ámbar porque es un
 * «ojo con esto» y no una pérdida, y «cancelados» en el gris decorativo porque su importe NO
 * cuenta: pintarlo como dinero de verdad sería contradecir lo que dice. */
.catDinero.sale    .catCifra { color: var(--urgente) }
.catDinero.entra   .catCifra { color: var(--ok) }
.catDinero.debe    .catCifra { color: var(--aviso) }
.catDinero.anulado .catCifra { color: var(--tenue); text-decoration: line-through }

/* EL PIE DE LAS CUATRO: que esto NO es un estado de cuenta. Va en ámbar porque es una
 * advertencia sobre lo que se está leyendo, no decoración. */
.dineroPie {
  font-size: var(--t-mini); color: var(--aviso); margin-bottom: var(--e3);
}
/* Y LO QUE ES CADA CATEGORIA, con las palabras del núcleo. En secundario legible, no en el gris
 * decorativo: explica por qué un número no se suma con otro, y eso hay que poder leerlo. */
.dineroQueEs {
  font-size: var(--t-mini); color: var(--tenue);
  margin: var(--e1) 0 var(--e2); line-height: 1.4;
}

/* ═══════════════ EL HUECO DE ABAJO ══════════════════════════════════════
 * Ya no hay caja de dictar fija, así que el relleno baja de 104px a lo que mide la barra de
 * los cuatro sitios. Son ~54px de scroll recuperados en las cuatro pantallas. */
body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
@media (min-width: 820px) { body { padding-bottom: var(--e5); } }

/* ═══════════════ EL RESULTADO DE UNA BUSQUEDA ════════════════════════════
 * Una fila, no una tarjeta. El «por qué» en pequeño y discreto: sin él, un resultado que no
 * contiene la palabra buscada parece un error del buscador. */
.hallazgo {
  padding: var(--e3) 0; border-top: var(--hair) solid var(--raya); cursor: pointer;
}
.hallazgo:first-child { border-top: 0 }
.hallazgo:active { background: var(--tarjeta2) }
.hCab { display: flex; align-items: baseline; gap: var(--e2) }
.hTit {
  flex: 1 1 auto; min-width: 0; font-size: var(--t-medio); font-weight: var(--peso-medio);
  letter-spacing: -.01em; overflow-wrap: anywhere;
}
.hMeta { font-size: var(--t-mini); color: var(--suave); margin-top: 2px }
.hPorque { font-size: var(--t-mini); color: var(--tenue); margin-top: 2px }

/* ═══════════════ EL EXPEDIENTE ═══════════════════════════════════════════ */
.objCtx { font-size: var(--t-mini); color: var(--suave); margin: 0 0 var(--e3) }
.objDisputa {
  font-size: var(--t-mini); color: var(--aviso);
  padding: var(--e2) var(--e3); margin: 0 0 var(--e3);
  background: var(--aviso-tinte); border-radius: var(--r-chico);
}
.comoVer, .comoSe {
  background: none; border: 0; min-height: 0; padding: 0; flex: 0 0 auto;
  color: var(--acento); font-size: inherit; text-decoration: underline;
}

/* El rótulo de una sección dentro de la hoja: se lee de reojo y no compite. */
/* EL ENCABEZADO · ALINEADO CON LOS TITULOS, Y UNA SOLA MARCA NARANJA.
 *
 * «LO ULTIMO QUE GUARDASTE» parecia montado sobre un borde raro, y eran dos cosas a la vez:
 *
 *   1 · NO ESTABA ALINEADO. El rotulo arrancaba a 7px (6 de relleno + 1 de su marca) y los
 *       titulos de las filas a 10, porque la lista mete `--e3` por dentro. Tres pixeles: lo
 *       justo para que el ojo note que algo no cuadra sin saber decir que.
 *   2 · HABIA DOS MARCAS NARANJA PEGADAS. La del rotulo y la linea de arriba de la lista, una
 *       debajo de la otra. Dos acentos a 3px de distancia no hacen jerarquia: hacen ruido.
 *
 * Ahora arranca donde arrancan los titulos, la marca es UNA —la del rotulo, que es la que
 * Javier dijo conservar— y van mas juntos para que se lean como un bloque. */
.rotulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); font-weight: var(--peso-medio);
  margin: var(--e4) 0 var(--e1);
  padding-left: calc(var(--e3) - 1px);   /* 9 + 1 de la marca = los 10 del titulo */
  border-left: 1px solid var(--naranja-raya);
}
/* Si la lista viene justo debajo de un rotulo, la marca ya la lleva el rotulo: aqui vuelve a
 * ser la raya de todos los dias. La lista que va SOLA si conserva su linea naranja. */
.rotulo + .lista { border-top: var(--borde) }
.rotulo:first-child { margin-top: 0 }

/* UN DATO. Etiqueta a la izquierda, valor a la derecha, y el «?» de la procedencia — que es
 * lo que nunca se había podido tocar desde la pantalla. */
.dato {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e2) 0; border-top: var(--hair) solid var(--raya);
}
.dato:first-of-type { border-top: 0 }
.dLabel { flex: 0 0 auto; font-size: var(--t-chico); color: var(--suave) }
.dValor {
  flex: 1 1 auto; text-align: right; font-size: var(--t-base);
  font-weight: var(--peso-medio); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dato .comoSe {
  width: 20px; height: 20px; border-radius: var(--r-pilula);
  background: var(--tarjeta2); color: var(--tenue);
  font-size: var(--t-micro); text-decoration: none; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.dato .comoSe.abierto { background: var(--acento); color: var(--sobre-acento) }
.dato.disputa .dValor { color: var(--aviso) }
.dDisputa { flex: 1 1 100%; font-size: var(--t-micro); color: var(--aviso) }

/* LA PROCEDENCIA, cuando se pide. Sangrada y en tono menor: es la respuesta a una pregunta,
 * no una sección de la ficha. */
.procedencia {
  flex: 1 1 100%; margin: var(--e2) 0 0;
  padding: var(--e2) var(--e3);
  background: var(--tarjeta2); border-radius: var(--r-chico);
  font-size: var(--t-mini);
}
.pFila + .pFila { margin-top: var(--e2); padding-top: var(--e2);
  border-top: var(--hair) solid var(--raya); }
.pQuien { color: var(--texto) }
.pCita { color: var(--suave); margin-top: 2px; line-height: 1.35 }
.pDoc { display: inline-block; margin-top: var(--e1); color: var(--acento) }

/* Las relaciones y el historial: filas finas, tocables, que llevan a otro expediente. */
.rel, .hFila, .papel {
  display: flex; align-items: baseline; gap: var(--e2);
  padding: var(--e2) 0; border-top: var(--hair) solid var(--raya);
  font-size: var(--t-chico); cursor: pointer;
}
.rel:active, .hFila:active { background: var(--tarjeta2) }
.relComo, .hCuando { flex: 0 0 auto; color: var(--tenue); font-size: var(--t-mini) }
.relQue, .hQue { flex: 1 1 auto; min-width: 0; color: var(--texto); overflow-wrap: anywhere }
.papel { cursor: default; justify-content: space-between }
.papel a { color: var(--acento); flex: 0 0 auto }

/* El pliegue del historial: un control compacto, no un acordeón con marco. */
.pliegue { margin: var(--e4) 0 0; border-top: var(--hair) solid var(--raya) }
.pliegue > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--toque); font-size: var(--t-chico); color: var(--texto);
}
.pliegue > summary::-webkit-details-marker { display: none }
.pliegue > summary::after { content: "›"; color: var(--decorativo) }
.pliegue[open] > summary::after { content: "⌄" }
.plCuerpo { padding-bottom: var(--e2) }

/* ═══════════════ ESCRITORIO DE VERDAD · 2026-10-02 ════════════════════════
 *
 * «En escritorio NO quiero una versión móvil centrada en una columna estrecha. Diseña
 * realmente para el ancho disponible.» Eran 680px centrados con el resto en blanco.
 *
 * Lo que NO se hace: estirar el texto a 1400px. Una línea de 200 caracteres no se lee. Lo que
 * se hace es usar el ancho para poner LO SECUNDARIO AL LADO en vez de debajo — que es lo que
 * él propuso: «información secundaria en columnas o alineada horizontalmente». Así la fila
 * baja de 51px a 32 y caben 21 en vez de 13, sin que ninguna línea se alargue. */
@media (min-width: 820px) {
  .envoltura { max-width: 1040px; }
  .barraInt { max-width: 1040px; }
  .cuadreFila { max-width: 1040px; }

  /* El contenido de un sitio, en dos columnas cuando de verdad hay dos cosas que mirar.
   * `auto-fit` con un mínimo: si no caben dos, se queda una sola, sin reglas aparte. */
  .sitio[data-sitio="dinero"] .enColumnas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--e5) var(--e6); align-items: start;
  }
}

/* ═══════════════ DINERO · compacto, y horizontal en escritorio ═══════════
 *
 * «El total superior y los cuadros Salió/Entró son demasiado altos.» Medido: la cifra del mes
 * costaba 81px y cada caja otros tantos.
 *
 * La caja del total desaparece: la cifra va en línea con su explicación, como el resumen de
 * Hoy. Y las dos cajas pasan a ser dos columnas de una sola fila con un divisor fino en medio —
 * no dos tarjetas. «Evitar encerrar cada dato en un rectángulo.» */
.gastadoCaja {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3) 0 var(--e2);
  background: none; border: 0; border-radius: 0; margin: 0;
}
.gastadoCifra {
  font-size: var(--t-heroe); font-weight: var(--peso-medio);
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.gastadoPie { font-size: var(--t-mini); color: var(--suave); margin: 0 }
.gastadoAviso { flex: 1 1 100%; font-size: var(--t-mini); color: var(--aviso); margin-top: 2px }

/* Salió / Entró: dos columnas, un divisor fino, ninguna tarjeta. */
.cajas {
  display: flex; gap: 0;
  border: var(--borde); border-radius: var(--r);
  background: var(--tarjeta);
  margin: var(--e2) 0 var(--e4);
}
.caja {
  flex: 1 1 0; min-width: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: var(--e3) var(--e4);
}
.caja + .caja { border-left: var(--hair) solid var(--raya) }
.caja .e {
  color: var(--tenue); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .05em; font-weight: var(--peso-normal);
}
.caja .n {
  font-size: var(--t-titan); font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  line-height: 1.15; margin-top: 1px; overflow-wrap: anywhere;
}

/* El rótulo de sección, más discreto y con menos aire por arriba. */
h2 {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); font-weight: var(--peso-medio);
  margin: var(--e5) 0 var(--e2);
}

/* La miniatura de una foto dentro de una fila: cuadrada y pequeña, no flotando a la derecha
 * con 64x80 y empujando el texto. */
.fila .miniatura { flex: 0 0 auto; display: block; line-height: 0 }
.fila .miniatura img {
  width: 34px; height: 34px; object-fit: cover;
  border-radius: var(--r-chico); border: var(--hair) solid var(--raya);
}
/* La flechita que dice «esto se abre»: discreta y sólo donde se abre algo. */
.fila .flechita { flex: 0 0 auto; color: var(--decorativo); width: 15px; height: 15px }
/* UNA FILA CERRADA SE APAGA ENTERA, no solo su titulo.
 *
 * Antes se tachaba el titulo y la cifra se quedaba a todo contraste: lo mas vivo de una fila
 * cancelada era su importe. La jerarquia al reves. */
.fila.cerrada .filaTit { text-decoration: line-through; color: var(--suave) }
.fila.cerrada .filaMeta, .fila.cerrada .filaMeta .monto { color: var(--tenue) }

/* ═══════════════ PAPELES · lo que vivía en gastos.html ════════════════════
 *
 * ABSORBIDA EL 2026-10-02. Javier sobre la página vieja: «rompe completamente el lenguaje
 * visual nuevo: botones gigantes, emojis, tarjetas enormes y tipografía grande».
 *
 * Su CSS estaba DENTRO del HTML, con sus propios valores a mano. Aquí se reescribe en el
 * sistema: los mismos nombres de clase —`gastos.js` los genera y no se le toca el código— con
 * las medidas del resto de la aplicación. Toda su funcionalidad intacta. */

/* Los dos atajos de los estados de cuenta: controles compactos, no botones de bloque. */
.dosAtajos { display: flex; gap: var(--e2); margin: var(--e2) 0 }
.dosAtajos .chico, .dosAtajos label.chico {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2); min-height: var(--toque); cursor: pointer;
  font-size: var(--t-mini); border-radius: var(--r-chico);
  background: var(--tarjeta2); border: var(--borde); color: var(--texto);
}

/* UNA FOTO SIN REVISAR. Era `.recibo`, una tarjeta con borde, radio grande y sombra; ahora es
 * una fila del sistema con su miniatura a la izquierda. */
.recibo {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) 0; border-top: var(--hair) solid var(--raya);
  background: none; border-radius: 0; box-shadow: none;
}
.recibo:first-child { border-top: 0 }
.recibo.dudoso { border-left: 2px solid var(--aviso); padding-left: var(--e2) }
.conFoto { display: flex; gap: var(--e3); align-items: flex-start; flex: 1 1 auto; min-width: 0 }
.conFoto .miniatura {
  flex: 0 0 auto; width: 46px; height: 46px; object-fit: cover; display: block;
  border-radius: var(--r-chico); border: var(--hair) solid var(--raya);
}
.conFoto .campos { flex: 1 1 auto; min-width: 0 }

/* «¿Qué creo que es?» · la pregunta y sus opciones. Era un bloque con cinco botones de 56px;
 * ahora son cinco controles en rejilla que caben en dos filas. */
.quees { flex: 1 1 100%; min-width: 0 }
.quees .pregunta { font-size: var(--t-chico); color: var(--suave); margin-bottom: var(--e2) }
.quees .opciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--e2);
}
.quees .opciones button {
  min-height: var(--toque); font-size: var(--t-mini); text-align: left;
  padding: 0 var(--e3); border-radius: var(--r-chico);
}
.quees .opciones button.ancho { grid-column: 1 / -1 }
.porque { font-size: var(--t-mini); color: var(--tenue); margin-top: var(--e2) }
.ojeada { font-size: var(--t-mini); color: var(--suave); margin-top: var(--e1) }
.clase-chip, .chip {
  display: inline-block; font-size: var(--t-micro); color: var(--suave);
  background: var(--tarjeta2); border: var(--hair) solid var(--raya);
  border-radius: var(--r-pilula); padding: 1px 6px; margin-left: var(--e1);
}

/* Los campos de un gasto por revisar: pares etiqueta/valor, no cajas. */
.campo { display: flex; align-items: center; gap: var(--e2); padding: var(--e1) 0 }
.campo > span:first-child { flex: 0 0 auto; font-size: var(--t-mini); color: var(--suave) }
input.dato, .dato input, textarea#textoEstado {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--alto-control); padding: 0 var(--e2);
  font: inherit; font-size: var(--t-base);   /* 16: si baja, el iPhone hace zoom */
  background: var(--tarjeta2); color: var(--texto);
  border: var(--borde); border-radius: var(--r-chico);
}
textarea#textoEstado {
  width: 100%; min-height: 84px; padding: var(--e2); line-height: 1.4; resize: vertical;
}
input.dato.grande { font-weight: var(--peso-medio) }

/* Las acciones de una foto: a la derecha y compactas, como en toda fila. */
.acciones { display: flex; gap: var(--e2); align-items: center; flex: 0 0 auto }
.acciones button { min-height: var(--alto-control); font-size: var(--t-mini); padding: 0 var(--e2) }
.acciones button.guardar { background: var(--ok); border-color: var(--ok); color: var(--sobre-ok) }
.acciones button.tirar { background: transparent; color: var(--tenue); border-style: dashed }
.otros { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e2) }
.otros button { min-height: var(--alto-control); font-size: var(--t-mini) }
.otros .e { font-size: var(--t-mini); color: var(--tenue) }

/* La tabla de movimientos de un estado: filas finas, cifras alineadas. */
table.movs { width: 100%; border-collapse: collapse; font-size: var(--t-chico) }
table.movs th {
  text-align: left; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .05em; color: var(--tenue); font-weight: var(--peso-normal);
  padding: var(--e1) 0; border-bottom: var(--hair) solid var(--raya);
}
table.movs td { padding: var(--e2) 0; border-top: var(--hair) solid var(--raya); vertical-align: top }
table.movs .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.sale { color: var(--urgente) }
.entra { color: var(--ok) }

.pista { font-size: var(--t-mini); color: var(--tenue); line-height: 1.45; margin: var(--e5) 0 0 }
#subiendo:not(:empty), .aviso-lectura {
  margin: var(--e2) 0; padding: var(--e2) var(--e3);
  background: var(--tarjeta2); border: var(--borde); border-radius: var(--r-chico);
  font-size: var(--t-chico);
}
#detalleEstado > div { margin-top: var(--e4) }

/* Las barras de un reparto por categoría: finas, sin relleno de color de fondo. */
.barras div { display: flex; align-items: center; gap: var(--e2); padding: 2px 0; font-size: var(--t-mini) }
.barras .n { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--suave) }
.barras .b { height: 3px; border-radius: var(--r-pilula); background: var(--acento); flex: 0 0 auto }

/* ESCRITORIO · los papeles también aprovechan el ancho. */
@media (min-width: 820px) {
  .sitio[data-sitio="papeles"] .quees .opciones {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .recibo { align-items: center }
}

/* La página vieja de gastos ya no se enlaza desde ningún sitio —su contenido vive en Papeles—
 * pero sigue en el disco por si hace falta volver a ella. Usaba `class="fila"` en su cabecera
 * para un flex cualquiera, y ahora `.fila` es el primitivo de lista: se le cambió el nombre a
 * `cabFila` para que no herede la caja equivocada. */
header .cabFila { display: flex; align-items: baseline; gap: var(--e3) }

/* ═══════════════ LOS ACENTOS NARANJA · 2026-10-02 ═════════════════════════
 *
 * Javier: «puedes usar pequeños acentos naranja en encabezados, indicadores, estados o bordes
 * parciales; NO quiero tarjetas completas con borde naranja ni grandes superficies naranjas».
 *
 * Y la regla que ordena todo: «mantén el azul para navegación/acción activa y usa el naranja
 * como acento secundario. No deben competir.»
 *
 * Así que el naranja aparece en CUATRO sitios y en ninguno más, y en los cuatro es una línea de
 * 1px o un texto pequeño — nunca un relleno:
 *
 *   1  arriba de una lista       dice «aquí empieza algo»
 *   2  a la izquierda de un      dice «esta sección es otra cosa»
 *      rótulo o un h2
 *   3  en lo que pide atención   el «lleva 3 días» que antes se truncaba
 *   4  en el indicador de que    lo que espera decisión, que es un ESTADO y no una acción
 *      algo espera                  — por eso no es azul */

/* 4 · LO QUE ESPERA DECISION. Era una banda gris que no decía nada. Ahora una línea naranja de
 *     1px arriba y el número en naranja: es un estado, no un botón, así que no lleva azul. */
#cuadre {
  border-top: 1px solid var(--naranja-raya);
  background: var(--tarjeta);
}
.cuadreN { color: var(--naranja) }
/* El «Revisar» SI es una acción, así que se queda azul. Los dos colores conviven en la misma
 * línea sin competir porque dicen cosas distintas: uno el estado, el otro lo que se puede hacer. */
#cuadre .chico { color: var(--acento) }

/* EL ESTADO DEL RESUMEN DE HOY, con el naranja en su sitio.
 *
 * Estaba en azul cuando había pendientes, y el azul es de navegación y acción: competían. Ahora
 * la escala entera dice una cosa cada color, y ninguno se repite:
 *
 *   libre       verde      la palomita. El único momento en que el verde es honesto
 *   hay algo    naranja    un estado, no una acción
 *   callado     ámbar      ojo: lo callaste y vuelve
 *   roto        rojo       está roto */
.resumen.hay .n { color: var(--naranja) }
.resumen.hay { border-color: transparent }

/* LA CABECERA DE UNA HOJA, con su línea de 1px. Marca el borde entre «lo que estabas mirando» y
 * «esto que se abrió encima» sin una sombra ni un relleno. */
.hojaCab { border-bottom: 1px solid var(--naranja-raya) }

/* LA TABLA DE MOVIMIENTOS, en el mismo lenguaje: su encabezado lleva la línea fina y las cifras
 * van alineadas con ancho fijo. Una tabla de números es lo correcto aquí — y es lo que Javier
 * dijo que ya le gustaba— así que sólo se afina. */
table { width: 100%; border-collapse: collapse; font-size: var(--t-chico) }
table th {
  text-align: left; padding: var(--e1) 0;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); font-weight: var(--peso-normal);
  border-bottom: 1px solid var(--naranja-raya);
}
table td { padding: var(--e2) 0; border-top: var(--hair) solid var(--raya); vertical-align: top }
table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }

/* Y LO QUE NO LLEVA NARANJA, dicho a propósito para que nadie lo añada: la navegación de los
 * cuatro sitios, el botón que resuelve, los enlaces y el foco de un campo. Todo eso es acción o
 * navegación, y es azul o verde. Si el naranja se metiera ahí dejaría de significar nada. */