/* Gastos Sitelec — el sistema de diseño
 * =====================================================================
 * UNO SOLO. Ninguna pantalla inventa colores ni reinventa piezas: si algo
 * necesita un color que no está aquí, el color está mal — se usa el que hay o
 * se añade AQUÍ.
 *
 * Los tokens vienen de la versión anterior, que estaban afinados y funcionaban
 * bien en claro y en oscuro. Lo que cambia es lo demás.
 *
 * LO PRIMERO DE TODO, y no es un detalle: [hidden] tiene que ganar.
 */

/* ── [hidden] GANA SIEMPRE ──────────────────────────────────────────────
   El navegador oculta lo marcado con `hidden` desde su hoja de estilos, que es
   la MÁS DÉBIL de todas: cualquier regla del autor con `display` la anula. Un
   `video{display:block}` inocente deja un elemento "oculto" ocupando sitio y
   TAPANDO los botones de debajo — se pulsa y no pasa nada, sin ningún error.
   Costó media noche. Se corta de raíz y para toda la aplicación. */
[hidden]{display:none !important}

/* ── LOS COLORES SON LOS DE SITELEC ───────────────────────────────────
 *
 * No están inventados ni heredados: se sacaron de grupositelec.es midiendo qué
 * colores usa de verdad la web corporativa (los más presentes por superficie).
 * La marca es VERDE AZULADO, no el ámbar que arrastraba la versión anterior:
 *
 *     #17565E  verde azulado oscuro — el color base de la web
 *     #0C393F  su versión más oscura
 *     #1BE4BB  turquesa brillante — el acento vivo
 *     #5BC5B2  turquesa suave
 *     #21A195  el intermedio
 *
 * Cómo se reparten aquí:
 *   claro   el acento es el #17565E, que sobre blanco se lee bien y es serio.
 *   oscuro  ese verde no se ve sobre fondo oscuro, así que el acento pasa al
 *           #5BC5B2 y la tinta del acento se vuelve oscura. El turquesa vivo
 *           (#1BE4BB) se reserva para «bien hecho», que es donde luce.
 *   El rojo NO es de marca a propósito: un error tiene que romper la armonía,
 *   que para eso está.
 */
:root{
  --bg:#F2F6F6;
  --surface:#FFFFFF;
  --surface-2:#E4EDEC;
  --ink:#0C1F21;
  --ink-2:#42585A;
  --ink-3:#748A8B;
  --line:#CFDEDC;
  --line-strong:#AFC6C3;

  --accent:#17565E;        /* el de la marca */
  --accent-ink:#FFFFFF;
  --accent-soft:#E1F1F0;
  --accent-line:#A9D5CF;

  --ok:#0F7A66;
  --ok-soft:#DDF3ED;
  --danger:#9E2018;
  --danger-soft:#FBE4E2;

  --shadow:0 1px 2px rgba(12,31,33,.07), 0 8px 24px -12px rgba(12,31,33,.24);
  /* El aire de dentro de una pantalla. Es una variable y no un 14 suelto
     porque hay quien tiene que RESTARLO: una cabecera pegajosa se pega al
     borde de la caja que hace scroll, y ese borde esta justo a este ancho. */
  --pad-cuerpo:14px;
  --radius:14px;
  --radius-sm:9px;
  --sans:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
}

/* El modo oscuro se construye sobre el verde azulado más oscuro de la marca
   (#0C393F), no sobre un gris neutro: así sigue pareciendo Sitelec de noche. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081618;
    --surface:#0F2427;
    --surface-2:#173237;
    --ink:#E2EEEC;
    --ink-2:#9DB3B2;
    --ink-3:#6E8583;
    --line:#1E3B40;
    --line-strong:#2E5257;

    --accent:#5BC5B2;
    --accent-ink:#04211F;
    --accent-soft:#0F312E;
    --accent-line:#1F5651;

    --ok:#1BE4BB;
    --ok-soft:#0B2E29;
    --danger:#F0796F;
    --danger-soft:#2C1614;

    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --bg:#081618; --surface:#0F2427; --surface-2:#173237;
  --ink:#E2EEEC; --ink-2:#9DB3B2; --ink-3:#6E8583;
  --line:#1E3B40; --line-strong:#2E5257;
  --accent:#5BC5B2; --accent-ink:#04211F; --accent-soft:#0F312E; --accent-line:#1F5651;
  --ok:#1BE4BB; --ok-soft:#0B2E29; --danger:#F0796F; --danger-soft:#2C1614;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.75);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

/* NI REBOTE NI ARRASTRE. `body{overflow:hidden}` ya quitaba el scroll general,
   pero en el movil se seguia colando el rebote --el tiron elastico al llegar al
   final-- y el gesto de «tirar para recargar» de Android, que en una aplicacion
   que ya se refresca sola solo sirve para perder lo que estabas mirando.
   Va en html Y en body: uno solo no basta en todos los navegadores. */
html,body{overscroll-behavior:none}

/* NI ZOOM DE PAGINA. Con dos dedos se ampliaba la aplicacion entera: los
   botones se salen, la cabecera se va, y para volver hay que pellizcar al
   reves. Una interfaz de aplicacion no es un documento y no se lee acercandose.
   `touch-action: pan-y` deja el gesto que SI hace falta --arrastrar para
   recorrer la lista-- y quita el pellizco y el doble toque.
   Y NO se usa `user-scalable=no` en el viewport: eso lo ignora iOS desde hace
   años y ademas se lo quita a quien lo necesita de verdad en TODA la pagina.
   Aqui se quita solo donde estorba, y el visor de la foto lo vuelve a pedir
   para si -- que es donde ampliar tiene sentido. */
html,body{touch-action:pan-y}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.45 var(--sans);
  -webkit-text-size-adjust:100%;
  display:flex; flex-direction:column; overflow:hidden;
  /* ── LA ALTURA, Y POR QUE `svh` Y NO `dvh` (medido el 23/08) ─────────
   *
   * `vh` primero, como fallback: un navegador que no entienda la unidad de
   * abajo tira la regla entera y se queda un `body` sin altura, con la barra de
   * botones fuera de la pantalla. Se escribe la mala primero y la buena encima.
   *
   * Y `svh` --el viewport PEQUEÑO-- y no `dvh`. `dvh` es el de AHORA MISMO, que
   * crece y encoge segun se esconde la barra del navegador; `svh` es siempre el
   * mas pequeño de los dos. Con `dvh`, mientras la barra se retrae la pagina
   * mide mas que lo que se ve, y lo ultimo de abajo --que es el boton verde--
   * se queda debajo del borde.
   *
   * Medido en su movil con el cuaderno: el ultimo boton acaba en 640 y el
   * viewport mide 654. Cabe por CATORCE pixeles. Eso explica que pase «siempre»
   * y que subir el hueco de 26 a 34 no lo arreglara: no era el hueco, era que
   * el margen es de una linea de texto. */
  height:100vh;
  height:100svh;
}

/* ── Esqueleto ──────────────────────────────────────────────────────── */
.cabecera{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--line); background:var(--surface);
}
/* EL NOMBRE DE LA PANTALLA CABE EN DOS RENGLONES ANTES DE CORTARSE.
   ─────────────────────────────────────────────────────────────────────
   Era `nowrap` con puntos suspensivos, y en el movil del usuario --letra del
   sistema al 150%-- la pantalla de las facturas conseguidas se anunciaba como
   «Facturas consegui…». Saber en que pantalla estas es lo unico que hace la
   cabecera; si eso se corta, no hace nada.

   Y no se puede arreglar con un tamaño menor: los tres botones de al lado
   --atras, campana y salir-- miden 38 px FIJOS y no encogen con la letra, asi
   que al titulo le quedan unos 212 px pase lo que pase mientras el texto crece
   un 50%. La unica salida que no esconde nada es dejarlo bajar de renglon.

   Dos como mucho: a partir de ahi la cabecera se comeria la pantalla, y con
   dos caben todos los nombres que hay. El corte sigue existiendo, pero como
   ultimo recurso y no como primera respuesta. */
.cabecera .marca{
  font-size:15px; font-weight:700; flex:1; min-width:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; line-height:1.2;
}
.cabecera .donde{font-size:12.5px;color:var(--ink-3)}
.atras{
  flex:0 0 auto; width:38px; height:38px; padding:0;
  background:transparent; border:0; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; border-radius:999px;
}
.atras:active{background:var(--surface-2)}

/* El botón de cerrar sesión, en la otra punta de la cabecera. Mismo redondel de
   38 px que la flecha de atrás y no un botón con la palabra «Salir»: al lado de
   un título que ya se come el ancho con puntos suspensivos, dos palabras más
   dejan la cabecera sin sitio en un móvil estrecho.

   `:disabled` es el rato que tarda el servidor en borrar la cookie. Sin la
   opacidad, un segundo toque sobre un botón que ya está trabajando parece que
   no ha hecho nada. */
.cabecera .salir{
  flex:0 0 auto; width:38px; height:38px; padding:0;
  background:transparent; border:0; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; border-radius:999px;
}
.cabecera .salir:active{background:var(--surface-2)}
.cabecera .salir:disabled{opacity:.45}

/* ── LA CAMPANA DE LOS AVISOS DE FACTURA (spec 042) ──────────────────
   Misma forma que el boton de salir: son hermanos en la cabecera, y que uno
   fuera mas grande que el otro se veria. */
.cabecera .campana{
  flex:0 0 auto; width:38px; height:38px; padding:0; position:relative;
  background:transparent; border:0; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; border-radius:999px;
}
.cabecera .campana:active{background:var(--surface-2)}
/* El numero, encima y a la derecha. `min-width` y no `width`: con 99+ dentro,
   un ancho fijo cortaria el texto. */
/* EL NUMERO DE AVISOS, ENTERO Y SIN TAPAR LA CAMPANA.
   Medido en el movil del usuario: la chapa media 17x16 px y su contenido pedia
   17x24, o sea que el «1» salia recortado por arriba y por abajo.

   SON DOS COSAS, Y LA SEGUNDA ES UNA TRAMPA. La primera: con la letra del
   sistema al 150% el digito se dibuja a 15,75 px y no cabe en una caja de 16.
   La segunda: el `line-height:16px` TAMBIEN lo agranda el navegador --a 24--,
   asi que escribir aqui 24 lo dejaria en 36 y el numero seguiria sin caber. Por
   eso el centrado se hace con flex y `line-height:1`, que al ser un numero se
   queda pegado al tamaño real de la letra en vez de multiplicarse otra vez.

   Y LA CHAPA NO CRECE TANTO COMO LA LETRA, que fue el primer intento y salio
   mal: sacando el alto de `--letra` a secas la chapa se ponia en 24 px sobre un
   icono de 21 y TAPABA EL 69% DE LA CAMPANA --el usuario lo vio en cuanto se
   subio--. Una chapa es un adorno de la barra, no texto que se lea de corrido,
   asi que crece a la cuarta parte de deprisa (16 px de base, 4 mas por cada
   100% de aumento) y el numero se compensa al reves --`12px / --letra`-- para
   que se DIBUJE siempre a 12 px, con la letra del sistema como este.
   Asi queda en 18x18 y tapa el 20%. Medido con las tres formas que toma:
   «1» 18 px de ancho, «12» 22 y «99+» 28, las tres enteras y dentro del boton. */
.campana-cuenta{
  position:absolute; top:0; right:0;
  min-width:calc(16px + 4px * (var(--letra, 1) - 1));
  height:calc(16px + 4px * (var(--letra, 1) - 1));
  padding:0 4px; border-radius:999px; background:var(--malo,#c0392b); color:#fff;
  font-size:calc(12px / var(--letra, 1)); font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
/* ── LA LISTA: UNA HOJA QUE BAJA DESDE ARRIBA, NO UN DESPLEGABLE ────
   Esto nacio como un desplegable de escritorio --anclado arriba a la derecha,
   con `margin-left:auto` y 460px de ancho-- y estaba MAL: esta aplicacion se
   usa en el movil y manana sera una aplicacion movil. Un panel pegado a una
   esquina es un menu de raton; lo que hace una aplicacion de telefono es tapar
   la pantalla con una hoja que baja de arriba y se cierra tocando fuera.

   Va a ancho completo y por encima de TODO, tambien de la cabecera, que es por
   lo que la hoja lleva su propia barra con el titulo y la X: si tapara el boton
   de la campana sin dar otra salida, no habria como cerrarla.

   `position:fixed` y no `absolute`: anclada al documento, bajaba con el scroll
   de la pagina. Anclada a la ventana, se queda donde se abrio. */
.campana-lista{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:stretch;
  background:rgba(15,23,42,.38);
}
/* La hoja. A ancho completo en el movil; en una pantalla grande se centra y se
   le pone tope, que una linea de texto de 1.400px no se lee. */
.campana-panel{
  width:100%; max-width:560px; margin:0 auto;
  display:flex; flex-direction:column; min-height:0;
  max-height:min(86vh,680px);
  background:var(--surface); border-radius:0 0 14px 14px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  animation:campana-baja .16s ease-out;
}
/* Sin animacion para quien la tenga desactivada en el sistema. */
@media (prefers-reduced-motion:reduce){ .campana-panel{animation:none} }
@keyframes campana-baja{ from{transform:translateY(-10px);opacity:.4} }

/* La barra de la hoja. `env(safe-area-inset-top)`: en un iPhone la muesca se
   come esta franja, y el titulo quedaria debajo del reloj. */
/* LA CABECERA DE LA HOJA, CON CUATRO COSAS QUE NO CABEN.
   Medido en el movil del usuario con la letra del sistema al 150%: «Avisos»
   68 px, «1 sin leer» 82, «Marcar todos leídos» 210 y la X 38, mas 30 de
   huecos = 428 px para los 360 que hay. SOBRAN 68.

   Y EL QUE PAGABA TODO EL DEFICIT ERA «1 SIN LEER», porque era el unico que
   se podia encoger: el chip y la X llevan `flex:0 0 auto` y «Avisos» es una
   palabra sola. Quedaba metido en 34 px de ancho y 88 de alto --el contador
   partido en TRES renglones-- y la cabecera se iba igualmente a 401 px de
   ancho, o sea que la X se salia de la pantalla.

   Tres cosas, y ninguna es achicar el contador:
     · LA X SE SALE DEL REPARTO (`position:absolute`). Es lo unico que no puede
       moverse de sitio ni desaparecer: si algun dia no cabe algo, que no sea
       la salida. El hueco se lo guarda el `padding-right`.
     · EL CONTADOR NO SE PARTE (`nowrap` y sin encoger): «1 sin leer» en tres
       renglones no es un contador, es una mancha.
     · Y el chip se acorta y se achica, que es de donde salen de verdad los
       68 px que faltaban.
   Con eso la cabecera pasa de 109 px a 63 y la lista de avisos empieza 46 px
   mas arriba. El `flex-wrap` es el seguro: en un movil mas estrecho se parte
   en dos renglones en vez de empujar nada fuera. */
.campana-cabeza{
  position:relative;
  flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  padding-right:60px;            /* el sitio de la X, que va por encima */
  border-bottom:1px solid var(--line);
}
.campana-cabeza .titulo{font-weight:700;font-size:15px}
.campana-cabeza .hueco{flex:1 1 auto}
.campana-cabeza .hint{white-space:nowrap; flex:0 0 auto}
.campana-cabeza .chip{font-size:11.5px; padding:6px 10px; min-height:32px}
/* La X, del tamano de un dedo: 38px es lo que miden los otros botones de la
   cabecera, y este se pulsa en un movil en marcha. */
.campana-cerrar{
  position:absolute; right:12px; top:calc(10px + env(safe-area-inset-top,0px));
  flex:0 0 auto; width:38px; height:38px; padding:0; font-size:19px;
  background:transparent; border:0; color:var(--ink-2); border-radius:999px;
  display:flex; align-items:center; justify-content:center;
}
.campana-cerrar:active{background:var(--surface-2)}
/* Lo que scrollea es SOLO esto, no la hoja entera: asi la barra de arriba con
   la X no se va nunca de la pantalla. */
.campana-cuerpo{
  flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:8px 10px 12px;
}
.fila-aviso{
  padding:11px 8px; border-bottom:1px solid var(--line); cursor:pointer;
}
.fila-aviso:last-child{border-bottom:0}
.fila-aviso:active{background:var(--surface-2)}
/* Lo ya leido se queda, pero apagado: la lista sirve para ver lo nuevo. */
.fila-aviso.leido{opacity:.55}
/* El punto de «sin leer». Se ve de un vistazo cual es nuevo sin leer el texto. */
.fila-aviso .punto{
  display:inline-block; width:8px; height:8px; border-radius:999px;
  background:var(--malo,#c0392b); margin-right:7px; vertical-align:middle;
}

main{flex:1 1 auto;min-height:0;position:relative}
.pantalla{
  position:absolute; inset:0; display:none;
  flex-direction:column; min-height:0;
}
.pantalla.viva{display:flex}
/* `overscroll-behavior:contain`: al llegar al final de una lista, el gesto NO
   pasa a lo que hay detras. Es lo que hace que se sienta aplicacion y no
   pagina web. */
.cuerpo{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--pad-cuerpo);
        overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
        touch-action:pan-y}

/* ── Estado y avisos: FUERA de las pantallas ────────────────────────────
   Van aquí a propósito. En la versión anterior vivían dentro de una vista, y
   app.css oculta las vistas inactivas: un fallo al validar o al borrar se
   escribía en un elemento invisible y el empleado no veía NADA. */
.estado{
  flex:0 0 auto; padding:4px 14px; font-size:12.5px; color:var(--ink-3);
  display:flex; gap:14px; flex-wrap:wrap; min-height:0;
}
.estado:empty{display:none}
.estado b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
/* EL AVISO. Por defecto va en verde, y en rojo SOLO con la clase `mal`.
   Estaba fijo en la paleta de peligro, asi que un mensaje de exito salia igual
   que un error: al cambiar el modo de envio, la confirmacion
   «modo_envio: pruebas -> produccion» aparecia en rojo y se leia como que el
   cambio habia fallado. Habia fallado justo lo contrario. */
.aviso{
  flex:0 0 auto; margin:0 12px 8px; padding:10px 12px;
  background:var(--ok-soft); color:var(--ok);
  border:1px solid var(--ok); border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; line-height:1.35;
}
.aviso.mal{
  background:var(--danger-soft); color:var(--danger); border-color:var(--danger);
}
.aviso:empty{display:none}

.acciones{
  flex:0 0 auto; display:flex; flex-direction:column; gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--line); background:var(--surface);

  /* EL HUECO DE ABAJO.
   *
   * Ya no compensa nada. Antes eran 34 px de suelo para pelear con
   * `viewport-fit=cover`: la pagina se dibujaba debajo de la barra del sistema y
   * en su Android `env(safe-area-inset-bottom)` reportaba 0, asi que la barra
   * tapaba el ultimo boton. Se subio de 26 a 34 y siguio tapado.
   *
   * Se quito el `cover` del viewport (ver index.html), asi que el navegador ya
   * coloca la pagina dentro del area segura y aqui basta con aire normal. Se
   * mantiene el `env()` por si algun navegador informa de algo real. */
  /* Y AIRE DE VERDAD ABAJO. Eran 14 px, y medido en su movil el ultimo boton
     acababa a 14 px del borde: cabia por los pelos. Con 22 hay margen para una
     barra de sistema un poco mas alta o una linea de texto de mas, que es lo
     que hacia que se cortara unas veces si y otras no. */
  padding-bottom: max(22px, calc(10px + env(safe-area-inset-bottom, 0px)));

  /* Y SI NO CABEN, QUE SE PUEDAN ALCANZAR. La ficha de un ticket puede tener
     cuatro botones; en una pantalla corta y con el teclado abierto, el ultimo
     se salia y no habia forma de llegar a el. Ahora la barra se queda como
     mucho con media pantalla y se recorre por dentro. */
  /* `svh` por lo mismo que el `body`: con `vh` esto se mide contra el viewport
     GRANDE, asi que la barra podia reservarse mas de la mitad de lo que de
     verdad se ve. */
  max-height: 50vh;
  max-height: 50svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fila{display:flex;gap:8px}
.fila>*{flex:1}

/* ── Piezas ─────────────────────────────────────────────────────────── */
.btn{
  appearance:none;-webkit-appearance:none;
  font:inherit; font-weight:650; font-size:15.5px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:14px 16px; min-height:52px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--surface-2); color:var(--ink);
  cursor:pointer; text-decoration:none;
  transition:transform .08s ease, background .15s ease;
}

/* LOS BOTONES QUE VAN EN UNA FILA SE REPARTEN EL ANCHO A PARTES IGUALES.
   ─────────────────────────────────────────────────────────────────────
   Sin esto cada uno pedía lo que midiera su texto y `.fila` no encoge: en la
   cámara, con la letra del sistema al 150%, «Luz: automática» y «Cámara 1 de
   2» se llevaban el sitio y «Ver la bandeja» salía cortado contra el borde
   derecho. Un botón que está pero al que no se puede llegar.

   `min-width:0` es lo que de verdad lo arregla, y es el mismo motivo que en
   `.item-txt`: un elemento flexible NO baja por defecto del ancho de su
   palabra más larga, así que sin esa línea el reparto no serviría de nada.
   El texto parte dentro del botón, que es peor que caber de una pieza y
   muchísimo mejor que no estar. */
.acciones .fila > .btn{ flex:1 1 0; min-width:0; }

/* CUATRO EN UN RENGLON, APRETADOS. Lo pone `pintarAcciones()` contando los
   botones de cada fila.
   Es lo que deja que «¿Ha salido bien?» enseñe la foto. Alli hay cinco
   acciones y la foto se llevaba 237 px de 748 --un 32% de la pantalla-- con
   395 px de botones y filtros debajo. Las cuatro secundarias en un solo
   renglón bajan la barra de 272 px a 160 y la foto sube a 348, casi la mitad
   de la pantalla, SIN QUITAR NINGUNA: el usuario pidió que la imagen
   destacase y que las opciones siguieran estando.
   Con cuatro el hueco es de 84 px y de ahi salen los numeros: 4 px de relleno
   a cada lado dejan 76 para el texto, y a 12,5 px --18,75 dibujados con la
   letra del sistema al 150%-- entran las etiquetas largas de los dos estados
   de cada boton, medidas en el movil: «Recortar» y «Repetir». */
.acciones .fila[data-botones="3"] > .btn,
.acciones .fila[data-botones="4"] > .btn{
  font-size:12.5px; padding-left:4px; padding-right:4px;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.42}
.btn-principal{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-suave{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
/* CON BORDE, QUE SIN EL NO PARECE UN BOTON.
   ─────────────────────────────────────────────────────────────────────
   `.btn` deja el borde transparente y este nunca lo encendia, asi que un
   fantasma era texto suelto y nada mas. En oscuro colaba a medias --letra
   clara sobre fondo oscuro ya destaca-- pero en modo claro, sobre el blanco de
   la barra de botones, «Bajar en Excel» y «Actualizar» se leian como dos
   enlaces perdidos en medio. Lo dijo el usuario con la captura delante el
   14/09/2026.
   Sigue siendo el mas flojo de los tres --sin relleno, mientras que `.btn-suave`
   lleva fondo propio y el principal va macizo-- pero ahora se ve donde empieza
   y donde acaba, que es lo minimo para algo que hay que acertar con el dedo. */
.btn-fantasma{
  background:transparent; color:var(--ink-2);
  border-color:var(--line-strong);
  min-height:44px; font-weight:600;
}
.btn-peligro{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
/* El botón de un par que YA está puesto. Va deshabilitado --no hay nada que
   pulsar en lo que ya es-- y por eso el .btn:disabled de arriba lo dejaba
   desvaído: se leía como el apagado de los dos. Aquí se le quita el desvaído y
   se le pone el acento, para que el puesto sea el que canta. */
.btn-puesto, .btn-puesto:disabled{
  opacity:1; cursor:default;
  background:var(--accent-soft); color:var(--accent);
  border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
}
/* El botón que se usa en CADA ticket no puede ser el trozo que sobra de una
   fila: va solo y grande. */
.btn-disparar{min-height:64px;font-size:17.5px;font-weight:750}

/* ── LA BARRA PEQUEÑA DE LOS BOTONES SECUNDARIOS ──────────────────────
 *
 * Un `.btn` normal mide 52 px de alto y su etiqueta 15,5 px. En la fila de la
 * ficha del gasto van tres, y `.fila>*{flex:1}` los deja a 113 px en un móvil
 * de 390: ahí «Sin cambios que guardar» partía en CUATRO líneas y arrastraba a
 * la fila entera a esa altura. Con la fila, la papelera y «Validar», la barra
 * se quedaba con la mitad de la pantalla y la foto y los campos --lo que se
 * viene a repasar-- con la otra mitad. Lo midió el usuario en su móvil: «los
 * botones ocupan demasiado», «solo una línea», «todo más pequeño, mucho más»,
 * «lo veo muy angosto todo, es poco usable».
 *
 * ESTO NO ES `.btn` MÁS PEQUEÑO PARA TODA LA APLICACIÓN. El principal --el
 * verde de abajo, el que se pulsa en cada ticket-- se queda como está: es el
 * único que se usa doce veces al día y el que marca dónde descansa el pulgar.
 * Lo que se encoge es lo de al lado, que se usa una vez de cada veinte. Así
 * queda como la barra de la bandeja, que es la que el usuario puso de ejemplo:
 * una línea pequeña arriba y el botón grande abajo.
 *
 * `white-space:nowrap` ES LA MITAD DEL ARREGLO, y no un adorno. Sin él la
 * altura de la barra la decide la etiqueta más larga del gasto que se esté
 * mirando --«Leer ahora» ocupa una línea y «Sin cambios que guardar» tres--, o
 * sea que la misma pantalla mide distinto en cada ticket. Eso es lo otro que
 * dijo el usuario: «unos tiquet no pueden ocupar más que otros». Con él, la
 * barra mide siempre lo mismo, y a cambio las etiquetas TIENEN que caber en
 * una o dos palabras («Guardar», «Releer»): la de este lado ya no puede
 * explicarse, y lo que haga falta explicar va a `.estado`, justo encima.
 *
 * `min-width:0` deja que el flex los estreche en vez de sacar la fila de la
 * pantalla, y `overflow:hidden` es el freno del móvil estrecho: en uno de 320
 * px son 93 px por botón y una etiqueta de más se recortaría por el lado en
 * vez de romper la fila. */
.btn-mini{
  min-height:40px; padding:9px 10px;
  font-size:13.5px; font-weight:600;
  white-space:nowrap; min-width:0; overflow:hidden;
}
/* El fantasma ya viene sin fondo ni borde: de mini solo necesita ser más bajo.
   Va después de `.btn-fantasma{min-height:44px}` para que gane. */
.btn-fantasma.btn-mini{min-height:34px; font-size:13.5px}

.chip{
  flex:0 0 auto; font:inherit; font-size:13.5px; font-weight:600;
  padding:9px 14px; min-height:42px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
}
.chip.puesto{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* LAS PASTILLAS DE TRATO, MÁS PEQUEÑAS QUE EL RESTO — y sólo ésas.
   ─────────────────────────────────────────────────────────────────────
   Son las cuatro de «¿Ha salido bien?»: Sin tocar, Escaneado, Gris, Texto.
   Con la medida normal de `.chip` no caben las cuatro en un móvil con la letra
   del sistema al 150%: primero se salía la última por el borde, y al dejarlas
   partir en dos filas se comieron un renglón entero de una pantalla donde lo
   que hay que mirar es la FOTO. Lo pidió el usuario dos veces —«se podrían
   hacer más pequeños», «quiero que ocupe menos toda esa pantalla»— y la
   segunda tenía razón: aquí no se toca con guante mientras se sujeta un
   ticket, se está mirando una foto ya hecha y se decide con calma.
   El resto de `.chip` de la aplicación NO cambia: el paginador de hojas y los
   de la cámara siguen con sus 42 px, que ahí sí se tocan con prisa. */
#revisarFiltros .chip{
  font-size:11.5px; padding:6px 9px; min-height:32px;
}
#revisarFiltros{gap:6px}
/* La pastilla apagada. `.chip` no heredaba el `.btn:disabled` de arriba --no es
   un `.btn`--, asi que la flecha del paginador en la primera hoja se veia
   exactamente igual que la que si funciona: se toca, no pasa nada, y parece la
   pantalla colgada. */
.chip:disabled{opacity:.42}

/* LA PASTILLA QUE ES UN ENLACE, no un boton. `.chip` no dice `display`, asi
   que un <button> sale inline-block --y se pinta bien-- pero un <a> sale
   INLINE: ignora el `min-height`, el relleno de arriba y abajo no empuja
   nada, y encima llega subrayado. Se veia en «Facturas recibidas», donde
   «Ver el documento» es el unico enlace con esta forma de toda la
   aplicacion: salia pegado al nombre del fichero y con la raya debajo.
   Se arregla solo para los enlaces y no en `.chip` a secas: los botones ya
   estan bien, y cambiarles el display por esto seria tocar cuarenta sitios
   para arreglar uno. */
a.chip{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}

/* El paginador de hojas de un PDF (spec 036). Las flechas van anchas porque son
   lo que mas se toca de esa fila y un caracter solo deja una diana de 14 px. */
.chip.flecha{min-width:52px;font-size:18px;line-height:1;padding:9px 12px}
/* Y la cuenta NO es un boton: sin borde ni fondo, para que no se toque
   esperando que haga algo. `tabular-nums` la deja quieta al pasar de 9 a 10.  */
.chip.cuenta{
  display:flex; align-items:center; border-color:transparent; background:none;
  color:var(--ink-2); font-variant-numeric:tabular-nums; padding:9px 4px;
}

/* La raya que parte una pantalla en dos mitades que hacen cosas distintas.
   En kilometraje: arriba el formulario --lo que se viene a hacer-- y abajo lo
   ya apuntado con sus mandos. Sin ella las dos mitades se leen como un unico
   formulario larguisimo, y el «Buscar» parecia un campo mas del trayecto que se
   esta escribiendo. Lo dijo el usuario mirando la pantalla.

   Mas margen arriba que abajo a proposito: la raya tiene que ir pegada a lo que
   abre, no flotando en medio. */
.separador{
  height:0; border:0; border-top:1px solid var(--line);
  margin:24px 0 6px;
}

/* El desplegable de viaje que va DENTRO de cada fila de kilometraje.
   Pequeño y sin etiqueta a proposito: la fila es para leerla, y este mando solo
   se usa cuando algo esta mal puesto. Con el tamaño de `.campo select` cada
   trayecto ocuparia el doble y la lista dejaria de poder recorrerse. */
.viaje-fila{
  margin-top:6px; font:inherit; font-size:12.5px; max-width:100%;
  padding:5px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
}

.item{
  width:100%; text-align:left; font:inherit; color:inherit;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 13px; margin-bottom:9px;
  display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center;
}
.item:active{background:var(--surface-2)}

/* UNA PASTILLA ES UNA FORMA, NO UN TROZO DE TEXTO CON COLOR.
   No declaraba `display`, o sea que era `inline`, y un elemento en linea que no
   cabe SE PARTE EN DOS CAJAS, una en cada renglon. Con fondo y `border-radius`
   de 999 px eso se ve como dos medias pastillas con los extremos cortados.
   Medido en el movil del usuario en la entrada «Facturas recibidas» del menu,
   con la letra del sistema al 150%: «1 sin revisar» salia en dos trozos --«1
   sin» al final de un renglon, «revisar» al principio del siguiente-- ocupando
   256x60 px. Con `inline-block` es UNA caja de 146x30 que, si no cabe, baja
   entera al renglon de abajo.

   Y NO SE LE PONE `nowrap`, que era la otra forma de arreglarlo: la pastilla
   larga de la Bandeja --«con su factura, lista para enviar»-- tiene que poder
   partirse, y eso es justo lo que arreglo la v177. Con `inline-block` sigue
   partiendose POR DENTRO y sigue siendo una sola forma, que es lo que se
   queria: comprobado midiendola en 146 px de ancho.

   `vertical-align:middle` porque con `inline-block` la linea base que cuenta es
   la del ULTIMO renglon de dentro: una pastilla de dos renglones al lado de un
   titulo se subiria sola. Y `max-width:100%` para que en una caja estrecha se
   parta por dentro en vez de asomar por el costado. */
.pill{
  display:inline-block; max-width:100%; vertical-align:middle;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:3px 7px; border-radius:999px;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);
}
.pill-borrador{background:var(--surface-2);color:var(--ink-3)}
.pill-leida{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.pill-validada{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.pill-enviando{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.pill-enviada{background:var(--surface-2);color:var(--ink-3)}
.pill-error{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
/* La chapa del gasto con un aviso de repetido SIN CONTESTAR. Roja como la del
   envío fallido y por el mismo motivo: es trabajo parado. Hasta que se
   conteste, «Validar» lo rechaza el servidor. */
.pill-repetido{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
/* «¿ya lo subiste?» (spec 052): una pregunta, no un fallo. Con el color de
   acento y no con el de peligro: lo que hay que hacer es contestar, y la
   respuesta más probable es «sí, es este». */
.pill-cruce{background:var(--surface);color:var(--accent);border-color:var(--accent)}

/* ── QUE PAPEL ES: FACTURA, TICKET O DESCARTABLE (spec 049) ──────────
 *
 * LA CHAPA QUE HABLA DEL PAPEL y no del estado. Va detras de las otras a
 * proposito: primero por donde va el gasto, y luego que es.
 *
 * EL ICONO VIVE AQUI Y NO EN LAS PANTALLAS. Esta chapa la pintan TRES --la
 * bandeja, «Mis gastos» y la ficha-- y un SVG copiado tres veces es la forma
 * segura de que dentro de un mes no se parezcan. Las pantallas escriben la
 * clase y el texto que les manda el servidor, y nada mas.
 *
 * Con `mask` y `currentColor`, no con el color metido dentro del `data:`: los
 * colores salen de las variables y esas cambian ENTERAS en modo oscuro. Un
 * negro pintado dentro del SVG seria un icono negro sobre fondo negro.
 *
 * Y el `::before` cuelga solo de las tres clases que TIENEN icono, no de la
 * comun: «¿qué es?» no lleva, y sin `mask` que lo recorte pintaria un
 * cuadrado macizo de 13 px, porque el `background-color` se ve entero. */
.pill-papel{ display:inline-flex; align-items:center }
.pill-papel-factura::before,
.pill-papel-ticket::before,
.pill-papel-descartable::before{
  content:""; width:13px; height:13px; margin-right:4px;
  display:inline-block; flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-size:contain;       mask-size:contain;
  -webkit-mask-position:center;    mask-position:center;
}

/* LA FACTURA ES LA BUENA: no hay nada que pedirle a nadie. En el verde de
   «listo para enviar», porque es la misma clase de noticia. */
.pill-papel-factura{
  background:var(--ok-soft); color:var(--ok); border-color:var(--ok);
}
.pill-papel-factura::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%201.8h5l3%203v9.4H4z'/%3E%3Cpath%20d='M9%201.8v3h3'/%3E%3Cpath%20d='M6%208.4h4M6%2011h4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%201.8h5l3%203v9.4H4z'/%3E%3Cpath%20d='M9%201.8v3h3'/%3E%3Cpath%20d='M6%208.4h4M6%2011h4'/%3E%3C/svg%3E");
}

/* ── EL TICKET, GRIS PERO CON SU ICONO ────────────────────────────────
 *
 * El 23/09/2026 (spec 049, Q3) se decidio apagado: gris, sin icono y en
 * minuscula, porque es el caso NORMAL y una chapa llamativa en casi todas las
 * tarjetas no distingue nada. El 24/09 el usuario lo cambio al verlo en la
 * ficha, al lado de las otras dos: «porque ticket no tiene icono?». Ahora
 * lleva icono --un recibo con el corte en zigzag-- y mayusculas como las
 * demas, en todas partes. SIGUE GRIS: el color es lo que deja que la vista
 * vaya a lo raro (la factura en verde, el descartable discontinuo, el
 * «¿qué es?» en azul).
 *
 * Y LLEVA CHAPA en vez de no llevar ninguna. Sin ella, «sin chapa»
 * significaria a la vez «es un ticket» y «no lo ha contestado nadie», que de
 * cara a quien mira son dos cosas muy distintas.
 *
 * GRIS, PERO NO APAGADO. Hasta el 24/09 iba en `--ink-3` con borde `--line`,
 * y en el desplegable del filtro «Tipo» el usuario lo leyo como una opcion
 * desactivada: ese gris es el de lo que no se puede pulsar. Ahora el texto y el
 * borde son los del descartable; lo que los separa es el borde continuo. */
.pill-papel-ticket{
  background:var(--surface-2); color:var(--ink-2); border-color:var(--line-strong);
}
.pill-papel-ticket::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%201.8h8v12.4l-1.3-1-1.4%201-1.3-1-1.3%201-1.4-1-1.3%201z'/%3E%3Cpath%20d='M6%205.6h4M6%208.4h4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%201.8h8v12.4l-1.3-1-1.4%201-1.3-1-1.3%201-1.4-1-1.3%201z'/%3E%3Cpath%20d='M6%205.6h4M6%208.4h4'/%3E%3C/svg%3E");
}

/* DESCARTABLE: ni bueno ni malo, esta FUERA DE JUEGO. De ahi el borde
   discontinuo y no el rojo de los avisos: no es un problema que resolver --no
   hay nada roto-- es algo que ya no se le va a pedir a nadie. */
.pill-papel-descartable{
  background:var(--surface-2); color:var(--ink-2); border-color:var(--line-strong);
  border-style:dashed;
}
.pill-papel-descartable::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Ccircle%20cx='8'%20cy='8'%20r='5.8'/%3E%3Cpath%20d='M3.9%2012.1%2012.1%203.9'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Ccircle%20cx='8'%20cy='8'%20r='5.8'/%3E%3Cpath%20d='M3.9%2012.1%2012.1%203.9'/%3E%3C/svg%3E");
}

/* «SIN TIPO» SI ES TRABAJO: falta una respuesta que solo puede dar una
   persona mirando el papel. Por eso va en el color de «por repasar» y no
   apagada. (Fue «¿qué es?» hasta el 24/09/2026.) */
.pill-papel-falta{
  background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line);
  text-transform:none; letter-spacing:.02em; font-weight:600;
}

/* ── LAS TRES PASTILLAS DE LA FICHA (spec 049) ───────────────────────
 *
 * Las mismas `.pill-papel-*` de las listas, pero aqui hay TRES a la vez y solo
 * una vale. De las otras dos no se puede decir nada con el color --no son
 * «este gasto es una factura», son «podria serlo»-- asi que se apagan y solo
 * la puesta se pinta de lo suyo. Al reves --las tres encendidas-- la ficha
 * estaria afirmando tres cosas contradictorias a la vez.
 *
 * SON BOTONES Y NO UN <select>: son tres, caben, y un desplegable esconde las
 * opciones justo cuando lo que se quiere es ver de un vistazo cual esta puesta
 * y cambiarla de un toque. Es la misma decision que las pastillas del filtro
 * de la bandeja. */
.tipo-papel{ margin:10px 0 14px }
.tipo-papel-tit{ display:block; margin-bottom:5px }
.tipo-papel-ops{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:5px }
.tipo-papel-ops .pill{ cursor:pointer }

/* Las que no valen: contorno y nada mas. */
.tipo-papel-ops .pill-papel:not(.puesta){
  background:transparent; color:var(--ink-3); border-color:var(--line);
}
/* Y la que vale, con su color y un aro que la separa de las otras dos. En una
   pantalla en blanco y negro --o para quien no distingue el color-- el aro es
   lo unico que dice cual esta elegida, asi que no es adorno. */
.tipo-papel-ops .pill-papel.puesta{ box-shadow:inset 0 0 0 1px currentColor }

/* SIN CONTESTAR, LA PREGUNTA SE VE. Es lo unico de esta caja que es una tarea,
   y con el titulo en gris como los demas se perdia entre los datos. */
.tipo-papel-suelto .tipo-papel-tit{ color:var(--accent); font-weight:700 }

/* Y donde ya no se puede tocar, se ven pero no invitan: el servidor lo niega
   (`tipo_editable`) y la pantalla no promete lo que el va a rechazar. */
.tipo-papel .pill[disabled]{ cursor:default; opacity:.55 }

/* ── EN LA PANTALLA DE LA FOTO: CUATRO BOTONES DE 44 PX EN UNA FILA ─────
 *
 * Medido en un movil de 360 px (24/09/2026): las pastillas median 21 px de
 * alto, el «¿Qué es?» 20 en su propio renglon encima, y el renglon del
 * correo empezaba en el mismo pixel en que acababan ellas. El usuario: «alguien
 * mas torpe con el dedo va a pulsar sobre factura y le va a dar a la opcion
 * del correo o a la del que es». Lo recomendado para un dedo son 44-48 px.
 *
 * Ahora es una rejilla de cuatro --Factura, Ticket, Descartable y la «i»--
 * con el icono ENCIMA del texto para que «DESCARTABLE» quepa en un tercio
 * de la pantalla, y aire antes del correo.
 *
 * 36 PX Y NO 44. Con 44 quedaban mas altos que los propios botones de esa
 * pantalla --los filtros miden 32-- y el usuario los vio «demasiado
 * grandes». Con 36 siguen siendo casi el doble de las pastillas de antes,
 * con 6 px entre uno y otro, y no gritan mas que la foto.
 *
 * `display:contents` en la caja de las opciones: los botones pasan a ser
 * hijos de la rejilla sin tocar el HTML que comparten con la ficha. */
.tipo-papel-camara{ display:grid; grid-template-columns:repeat(3, 1fr) 36px;
  gap:6px; margin:6px 0 8px }
.tipo-papel-camara[hidden]{ display:none }
.tipo-papel-camara .tipo-papel-ops{ display:contents }
/* `.tipo-papel-ops` en el selector NO SOBRA: la leyenda de debajo tambien
   lleva chapas `.pill-papel`, y sin el se volvian botones de 36 px y la
   leyenda media 286 px de alto. */
.tipo-papel-camara .tipo-papel-ops .pill-papel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; height:36px; min-width:0; padding:0 4px; box-sizing:border-box;
  border-radius:9px; font-size:9.5px; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tipo-papel-camara .tipo-papel-ops .pill-papel::before{ margin:0; width:13px; height:13px }
.tipo-papel-camara .tipo-papel-info{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; box-sizing:border-box;
  border:1px solid var(--line); border-radius:9px; color:var(--ink-3);
}
.tipo-papel-camara .tipo-papel-i{ width:16px; height:16px; flex-basis:16px }
/* La leyenda, DEBAJO de los cuatro botones y a lo ancho. Se probo flotando
   encima de la foto (24/09/2026) y no funciono: la fila vive dentro de
   `.cuerpo`, con overflow:auto, que la recortaba; y fija a la pantalla
   tampoco quedo bien. El usuario: «lo dejamos como estaba antes». */
.tipo-papel-camara .tipo-papel-leyenda{ grid-column:1 / -1; margin:4px 0 0 }

/* ── QUE ES CADA UNO ──────────────────────────────────────────────────
 *
 * La pregunta es un boton que no parece boton: se lee igual que antes, y la
 * «i» en su circulo dice que se toca. Abierta, la «i» se rellena: se ve que
 * esta desplegada sin buscar donde. La leyenda y la linea de la elegida
 * solo existen cuando se piden; cerradas no ocupan ni un pixel.
 *
 * «Demasiado colapsados», dijo el usuario de la primera version: tres
 * renglones de 12 px pegados. Ahora cada tipo lleva SU chapa delante --la
 * misma de las listas-- y aire entre uno y otro. */
.tipo-papel-info{ display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:2px 0; margin:0;
  font-family:inherit; text-align:left; cursor:pointer }
.tipo-papel .tipo-papel-info.tipo-papel-tit{ display:flex; width:fit-content;
  margin-bottom:6px }
/* LA «i» DIBUJADA, NO ESCRITA. Una letra dentro de un circulo no se centra
   nunca del todo: cada fuente pone su linea base y su cursiva en un sitio.
   Con `mask` y `currentColor`, como las chapas: sigue al color del texto y
   al modo oscuro. Abierta, el circulo se llena y la «i» queda calada. */
.tipo-papel-i{ display:inline-block; width:16px; height:16px; flex:0 0 16px;
  background-color:currentColor; opacity:.6; transition:opacity .15s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ccircle%20cx='8'%20cy='8'%20r='6.7'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3Ccircle%20cx='8'%20cy='5'%20r='1.05'%20fill='%23000'/%3E%3Crect%20x='7.25'%20y='7'%20width='1.5'%20height='4.7'%20rx='.75'%20fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ccircle%20cx='8'%20cy='8'%20r='6.7'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3Ccircle%20cx='8'%20cy='5'%20r='1.05'%20fill='%23000'/%3E%3Crect%20x='7.25'%20y='7'%20width='1.5'%20height='4.7'%20rx='.75'%20fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat }
.tipo-papel-info[aria-expanded="true"] .tipo-papel-i{ opacity:1; color:var(--accent);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='%23000'%20fill-rule='evenodd'%20d='M8%20.6a7.4%207.4%200%201%200%200%2014.8A7.4%207.4%200%200%200%208%20.6zM8%203.95a1.05%201.05%200%201%200%200%202.1a1.05%201.05%200%200%200%200-2.1zM7.25%207.75a.75.75%200%200%201%201.5%200v3.2a.75.75%200%200%201-1.5%200z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='%23000'%20fill-rule='evenodd'%20d='M8%20.6a7.4%207.4%200%201%200%200%2014.8A7.4%207.4%200%200%200%208%20.6zM8%203.95a1.05%201.05%200%201%200%200%202.1a1.05%201.05%200%200%200%200-2.1zM7.25%207.75a.75.75%200%200%201%201.5%200v3.2a.75.75%200%200%201-1.5%200z'/%3E%3C/svg%3E") }

.tipo-papel-leyenda{ flex-basis:100%; box-sizing:border-box;
  margin:10px 0 4px; padding:12px 14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px }
.tipo-papel-defs{ display:grid; grid-template-columns:auto 1fr;
  gap:12px 14px; align-items:start; margin:0 }
.tipo-papel-defs dt{ margin:0; padding-top:1px }
.tipo-papel-defs dd{ margin:0; font-size:13px; line-height:1.45; color:var(--ink-2) }
.tipo-papel-defs dd::first-letter{ text-transform:uppercase }
/* LAS DE LA LEYENDA, NEUTRAS: las tres con el contorno y el color de las
   que no estan elegidas, cada una con su icono. Con su color de verdad, la
   factura salia en verde entre dos grises y parecia la marcada: «no le veo
   sentido a que factura salga como marcado si no he seleccionado ninguna».
   Aqui se explica que es cada una; el color es solo para lo elegido. */
.tipo-papel-defs .pill{ cursor:default }
.tipo-papel-defs .pill-papel{
  background:transparent; color:var(--ink-2); border-color:var(--line-strong);
  border-style:solid;
}
/* En un movil estrecho la chapa arriba y el texto debajo: con la columna
   de la chapa al lado, al texto le quedarian cuatro palabras por renglon. */
@media (max-width:360px){
  .tipo-papel-defs{ grid-template-columns:1fr; gap:4px }
  .tipo-papel-defs dd{ margin-bottom:8px }
  .tipo-papel-defs dd:last-child{ margin-bottom:0 }
}

.tipo-papel-dice{ display:block; flex-basis:100%; margin-top:8px;
  font-size:13px; line-height:1.45; color:var(--ink-2) }
.tipo-papel-dice b{ color:var(--ink-1, inherit) }
.tipo-papel-leyenda[hidden], .tipo-papel-dice[hidden]{ display:none }

/* ── EL DESPLEGABLE DEL TIPO EN LOS FILTROS (ver App.chipTipo) ─────────
 *
 * La pastilla lleva una flechita dibujada que gira al abrir, y el menu cae
 * pegado a ella, flotando sobre la lista y del ancho de lo que lleva --no a
 * todo lo ancho, que empujaba la lista--. Cada opcion mide 40 px, y lleva la
 * chapa de verdad a la izquierda y cuantos y la ✓ a la derecha. */
.chip-tipo-caja{ position:relative; display:inline-block }
/* Mientras el menu esta abierto, la cabecera donde vive la fila no lo
   recorta (ver dejarAsomar() en nueva.js). */
.cuerpo.deja-asomar{ overflow:visible }
.chip-tipo{ display:inline-flex; align-items:center; gap:6px }
.chip-tipo-flecha{ width:7px; height:7px; margin-top:-3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .15s, margin .15s; opacity:.7 }
.chip-tipo[aria-expanded="true"] .chip-tipo-flecha{ transform:rotate(-135deg); margin-top:3px }

.filtro-tipo-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:40;
  min-width:210px; box-sizing:border-box; padding:4px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.18) }
.filtro-tipo-menu.a-la-derecha{ left:auto; right:0 }
.filtro-tipo-menu[hidden]{ display:none }
.filtro-tipo-op{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; width:100%; min-height:40px; box-sizing:border-box; padding:5px 10px;
  border:0; border-radius:8px; background:none; color:var(--ink);
  font:inherit; text-align:left; cursor:pointer }
.filtro-tipo-op:active{ background:var(--surface-2) }
.filtro-tipo-op.puesta{ background:var(--accent-soft) }
.filtro-tipo-todos{ font-size:14px; font-weight:600 }
.filtro-tipo-der{ display:inline-flex; align-items:center; gap:10px }
.filtro-tipo-op .cuantos{ font-size:13px; color:var(--ink-3) }
/* La que no tiene ninguno sale, pero apagada: se puede elegir y dice 0. */
.filtro-tipo-op.vacia .pill-papel{ opacity:.45 }
.filtro-tipo-marca{ width:14px; font-weight:700; color:var(--accent); text-align:center }
/* La foto del OTRO gasto, dentro del aviso de repetido: pequeña a propósito.
   Es para reconocer el papel de un vistazo --se toca y se ve entera-- y no
   para leerle el NIF. Con las 46vh de la ficha, el aviso empujaba fuera de la
   pantalla los dos botones, que son justo lo que hay que pulsar. */
.aviso-caja .foto-ticket{max-height:22vh;margin-bottom:8px}

/* ── LA CABECERA DE UN TICKET DE SOPORTE, QUE ABRE Y CIERRA ───────────
   Un `<button>` de verdad y no un `<div>` con un oyente: en el movil el blanco
   de un dedo tiene que ser la fila entera y no una flecha de 12px, y con
   teclado un div no se puede pulsar ni recibe el foco. Aqui se le quita todo
   lo que un boton trae de serie --fondo, borde, relleno, la tipografia del
   sistema-- y se queda solo el comportamiento. */
.cab-ticket{
  display:flex; width:100%; align-items:flex-start; gap:10px;
  font:inherit; color:inherit; text-align:left;
  background:none; border:0; padding:0; cursor:pointer;
}
/* El asunto se come el hueco que sobra y empuja la chapa a la derecha.
   `min-width:0` para que un asunto largo pueda encogerse: sin el, un elemento
   flexible no baja de su contenido y saca la chapa fuera de la tarjeta. */
.cab-ticket b{ flex:1 1 auto; min-width:0; overflow-wrap:break-word }
.cab-ticket .flecha{
  flex:0 0 auto; color:var(--ink-3); font-size:12px; line-height:1.5;
}
/* Y la chapa no se encoge. Sin esto, un asunto largo la aplasta hasta partir
   «EN CURSO» en dos renglones de cuatro letras. */
.cab-ticket .pill{ flex:0 0 auto }

/* EL ULTIMO MENSAJE, con el ticket cerrado: UNA linea y puntos suspensivos.
   Es lo que contesta a «¿tengo que abrir esto?» sin abrirlo. Va con la
   especificidad de `.aviso-caja` delante porque ahi dentro hay un
   `.aviso-caja p` que gana a una clase suelta y le pondria otro color. */
.aviso-caja p.ultimo{
  margin:6px 0 0; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.aviso-caja p.ultimo b{ color:var(--ink-3); font-weight:700 }

/* ── LA CONVERSACION DE UN TICKET DE SOPORTE ──────────────────────────
   Quien dijo que, en orden, dentro de la tarjeta del ticket.

   UNA RAYA A LA IZQUIERDA Y NO BURBUJAS DE CHAT. Las burbujas alineadas a un
   lado y a otro necesitan la mitad del ancho cada una, y en un movil en
   vertical eso deja un parrafo de tres palabras por linea. La raya cuesta 3px,
   se lee igual de bien y el texto sigue ocupando la columna entera. El color es
   lo unico que distingue quien habla, y va acompañado del nombre escrito: en
   una pantalla en escala de grises el color solo no dice nada. */
.conver{ display:flex; flex-direction:column; gap:10px; margin:10px 0 }
.conver .dice{
  border-left:3px solid var(--line-strong); padding:1px 0 1px 10px;
}
.conver .dice.admin{ border-left-color:var(--accent) }
.conver .dice .quien{
  display:block; font-size:12px; font-weight:700; color:var(--ink-3);
}
.conver .dice.admin .quien{ color:var(--accent) }
/* `pre-wrap`: los saltos de linea son los que escribio quien lo mando, y
   `break-word` porque en un ticket de soporte se pegan URLs y mensajes de error
   sin espacios que, sin esto, sacan la tarjeta de la pantalla a lo ancho. */
.conver .dice p{
  margin:2px 0 0; white-space:pre-wrap; overflow-wrap:break-word;
  color:var(--ink);
}

.hint{font-size:13.5px;color:var(--ink-3);font-weight:500}
.vacio{text-align:center;color:var(--ink-3);padding:40px 20px;font-size:14.5px}
/* EL RENGLÓN DEL VACÍO QUE PONE UN FILTRO («14 gastos tuyos están «pagado con
   la tarjeta, falta el ticket» ›»). Un botón vestido de enlace, en el color de
   acento, porque es lo único del mensaje que se pulsa. El `padding` vertical
   es para el dedo: sin él, la zona que se toca es solo la altura de la letra. */
.vacio .ir-filtro{
  background:none; border:0; padding:8px 4px; margin:2px 0;
  font:inherit; font-weight:600; color:var(--accent); cursor:pointer;
}

/* ── LAS ESPERAS SE VEN ────────────────────────────────────────────────
 *
 * Una peticion que tarda medio segundo no es un problema; que no se note que
 * esta en marcha, si. Pasaba al borrar un trayecto de kilometraje: se pulsaba
 * «Borrar», la pantalla no hacia NADA --el boton seguia ahi, la fila seguia
 * ahi-- y un momento despues la fila desaparecia de golpe. Sin saber si se
 * habia pulsado bien, lo normal es volver a pulsar.
 *
 * Dos piezas, y las dos valen para cualquier pantalla:
 *   .rueda           la ruedecita que gira, dentro de un boton o de un texto
 *   .lista-esperando lo que ya se esta viendo mientras llega lo nuevo
 */
@keyframes girar{ to{ transform:rotate(360deg) } }
.rueda{
  display:inline-block; width:13px; height:13px; vertical-align:-2px;
  margin-right:7px; border-radius:50%;
  border:2px solid var(--line-strong); border-top-color:var(--accent);
  animation:girar .7s linear infinite;
}

/* La lista de antes mientras llega la de ahora: se apaga y NO SE PUEDE TOCAR.
   Lo segundo importa tanto como lo primero -- son datos que ya no mandan, y
   pulsar «Borrar» en una fila que esta a punto de ser sustituida por otra es
   exactamente el accidente que esto evita. */
.lista-esperando{ opacity:.45; pointer-events:none }

/* Quien pide menos movimiento no se queda sin la señal: la rueda sigue, pero
   despacio y sin llamar la atencion. Apagarla del todo dejaria el mismo hueco
   mudo que se esta arreglando. */
@media (prefers-reduced-motion: reduce){
  .rueda{ animation-duration:2.2s }
}

label.campo{display:block;margin-bottom:14px;font-size:13px;color:var(--ink-3)}
/* Los `select` se estilan IGUAL que los `input`. Sin esto, en un formulario con
   los dos mezclados --como el de configuracion-- cada navegador pinta el select
   a su manera: mas bajo, con otro borde y con otra tipografia. Quedaba como si
   estuviera a medio hacer. */
label.campo input,
label.campo select,
label.campo textarea,
.campo input,
.campo select,
.campo textarea{
  display:block; width:100%; margin-top:5px;
  font:inherit; font-size:16px; /* 16 o iOS hace zoom al enfocar */
  padding:12px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  /* La flecha del select la pone el sistema y en algunos Android tapa el texto:
     se quita la de serie y se dibuja una con un degradado, que se ve igual en
     todos. */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
/* EL TEXTAREA, con las mismas reglas que un input y tres cosas mas.
   No habia ninguno en toda la aplicacion hasta la pantalla de soporte, y sin
   esto sale con la tipografia del sistema, de 13px y con su borde de serie:
   dentro de un formulario donde los demas campos son los de arriba, se lee como
   un trozo de otra pagina.

   `resize:vertical` y no libre: a lo ancho solo se puede empeorar --se sale de
   la columna-- y a lo alto es justo lo que hace falta cuando lo que se esta
   contando no cabe en seis lineas. En un movil el tirador no existe, asi que la
   altura de partida (rows) tiene que valer ya sola. */
label.campo textarea,
.campo textarea{
  min-height:96px; line-height:1.45; resize:vertical;
  /* Sin esto Firefox lo pinta con la tipografia del sistema aunque el `font`
     este heredado del bloque de arriba: `font:inherit` en un textarea no arrastra
     la familia en todos los navegadores. */
  font-family:inherit;
}

label.campo select,
.campo select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right:34px;
}
/* Al enfocar, que se vea DONDE se esta escribiendo. En un formulario de quince
   campos, sin esto se pierde el sitio en cuanto se mira el teclado. */
label.campo input:focus,
label.campo select:focus,
label.campo textarea:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* La ayuda debajo del campo, separada del siguiente. Sin el margen, la ayuda de
   uno se leia como la etiqueta del de abajo. */
label.campo .hint,
.campo .hint{ display:block; margin:5px 0 0; }
/* Un campo tocado y sin guardar. Con el color de acento y no con rojo: no es un
   error, es "esto todavia no esta guardado". */
.campo input.tocado, .campo select.tocado, .campo textarea.tocado,
label.campo input.tocado, label.campo select.tocado{
  border-color:var(--accent); background:var(--accent-soft);
}
pre{
  white-space:pre-wrap; word-break:break-word; margin:0;
  font:12px/1.45 var(--mono);
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); padding:10px; border-radius:var(--radius-sm);
  max-height:44vh; overflow:auto;
}
details{margin-top:10px}
summary{font-size:13.5px;color:var(--ink-2);padding:7px 0;cursor:pointer}

.cuenta{
  display:inline-block; min-width:20px; padding:1px 6px; margin-left:7px;
  border-radius:999px; background:var(--accent); color:var(--accent-ink);
  font-size:11.5px; font-weight:700; text-align:center;
}

/* Los tiradores de las esquinas van SEPARADOS del vértice y unidos por un
   hilo. Un punto encima de la esquina lo tapa el propio dedo justo cuando hay
   que colocarlo: «el punto de los bordes tapa las esquinas, tendría que ser
   algo más como con offsets». Se posicionan desde JavaScript en coordenadas de
   pantalla, así que aquí solo va lo que no cambia.

   Y NO RECIBEN EL TOQUE, a propósito: el editor entero es transparente a los
   gestos y quien decide qué se ha agarrado es la geometría, en
   `empezarArrastre`. Un círculo de 22 px de radio contra un dedo que acierta
   con 10 de error hace que se falle el agarre; por cercanía, no. */
#editorEsquinas{position:absolute;inset:0;pointer-events:none}
#editorEsquinas .tirador{cursor:grab}

/* AQUÍ LOS GESTOS SON DE LA PANTALLA, NO DEL NAVEGADOR. Sin `touch-action:none`
   el navegador se lleva el arrastre —desplazar, tirar para recargar, su propio
   zoom— y manda un `pointercancel` a mitad de colocar una esquina: la esquina
   se queda a medio camino y parece que el móvil no va. Va sin condición y no
   sólo al ajustar, porque el pellizco para acercar la foto también existe
   mirándola.

   Y `overflow:hidden`, que es lo que recorta la foto acercada: sin él se sale
   por encima de los botones y del pie. */
#revisarCaja{overflow:hidden;touch-action:none;
  /* Y EL MENU DE PULSACION LARGA, FUERA. Colocando una esquina el dedo se
     queda quieto encima de la foto medio segundo, que es exactamente el gesto
     con el que Chrome abre su menu de «descargar imagen» sobre cualquier
     <img>: sale el modal, se traga el arrastre y la esquina se queda a medias.
     Lo vio el usuario en su movil.
     `touch-action:none` no lo tapa --eso frena el desplazamiento y el zoom del
     navegador, que es otra cosa--. La que lo tapa de verdad en Android es
     cancelar el evento `contextmenu`, en `pantalla-revisar.js`; estas dos
     propiedades son para iOS, donde el menu se llama `touch-callout`, y para
     que ademas no se seleccione nada al arrastrar. */
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ── La cámara ───────────────────────────────────────────────────────── */
.camara{position:relative;background:#000;flex:1 1 auto;min-height:0}
.camara video,.camara img{width:100%;height:100%;object-fit:contain;display:block}
.camara canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  pointer-events:none;   /* el toque para enfocar es del vídeo */
}
.pista{
  position:absolute; left:0; right:0; bottom:10px; text-align:center;
  font-size:14.5px; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.9);
  color:#fff; padding:0 12px;
}
.pista.listo{color:#3fb950}
.pista.espera{color:#e8c76a}
/* Estos dos son fijos a propósito: van sobre el vídeo, que es la escena real,
   y tienen que leerse igual en claro y en oscuro. */

/* ── VER LA FOTO A PANTALLA COMPLETA ────────────────────────────────────
   El boton flota sobre la esquina de la foto, asi que no cuesta alto --que es
   todo lo que esta pantalla tiene que dar-- y ademas queda donde el pulgar
   no se apoya al sujetar el movil.
   Redondo y oscuro con el icono en blanco: va encima de una foto que puede
   ser blanca (un ticket) o negra (las bandas de una foto apaisada), y un
   boton del color del tema desapareceria sobre una de las dos. */
.ver-grande{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff;
  cursor:pointer;
}
.ver-grande:active{background:rgba(0,0,0,.75)}
.ver-grande[hidden]{display:none}

/* ── EL PIE Y EL CONTEXTO, EN UN RENGLON ────────────────────────────────
   `min-width:0` en el pie es lo que le deja encogerse: sin el, un pie largo
   --«Hoja 2 de un gasto que ya está · Texto (tu ajuste)»-- empuja al contexto
   fuera de la caja en vez de partirse.
   Y el contexto NO se encoge (`flex:0 0 auto`): es corto, y si se parte
   «tarjeta ·1111» en dos renglones se come justo lo que se venia a ahorrar. */
.revisar-linea{ display:flex; align-items:flex-start; gap:10px }
.revisar-linea > #revisarPie{ flex:1 1 auto; min-width:0; margin:0 }
.revisar-contexto{ flex:0 0 auto; text-align:right; font-weight:700 }
.revisar-contexto:empty{ display:none }

/* ── El correo al que pedirle la factura ─────────────────────────────────
   Un renglon de texto que se lee de refilon y solo crece si se toca. No lleva
   fondo ni borde a proposito: con ellos parece un aviso --algo que hay que
   atender-- y esto es una oferta que uno de cada veinte tickets acepta.
   Los 44 px de alto no son del texto, son del dedo: es lo mismo que mide
   `.btn-fantasma`, y esta pantalla se usa con el movil en una mano. */
.revisar-correo{ padding:0 0 6px }
/* SOLO DONDE HAY TEXTO, no a todo lo ancho: el hueco de la derecha abria
   el campo sin querer. El usuario: «pinchas en el vacio que existe ahi y se
   abre el input». Los 44 px de alto se quedan, que son del dedo. */
.correo-di{
  appearance:none; -webkit-appearance:none;
  display:inline-block; width:auto; max-width:100%; text-align:left;
  background:none; border:0; padding:11px 0; min-height:44px;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
/* Con correo puesto deja de ser una pregunta y pasa a ser un dato del gasto,
   como «tarjeta ·1111»: con el color de acento y sin subrayado. */
.correo-di.puesto{ color:var(--accent); text-decoration:none; font-weight:700 }
.correo-input{
  display:block; width:100%; margin:0 0 8px;
  font:inherit; font-size:16px;  /* 16 o iOS hace zoom al enfocar */
  padding:12px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.correo-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.miniatura{
  position:absolute; right:10px; bottom:10px; width:82px;
  border-radius:var(--radius-sm); border:2px solid #3fb950;
  box-shadow:var(--shadow);
}

/* ── Aviso de que el destino es de pruebas ───────────────────────────── */
.pruebas{
  background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger);
  border-radius:var(--radius-sm); padding:9px 12px; margin-bottom:12px;
  font-size:13.5px; font-weight:600;
}

/* ── EL AVISO DE QUE ESTÁS SUPLANTANDO A OTRO ──────────────────────────────
   A todo el ancho y pegado bajo la cabecera, no dentro de una pantalla: es lo
   único que dice en qué cuenta estás, así que tiene que verse pases donde
   pases. Color de peligro y con relleno --no un borde fino-- porque olvidarse
   de que se está en la piel de otro y ponerse a crear gastos es justo lo que
   hay que evitar. El botón de volver va DENTRO, siempre a mano. */
/* ── EL AVISO DE «ESTAS VIENDO LA APP COMO OTRO» ───────────────────────
 * Medido en el movil del usuario con la letra del sistema al 150%, y estaba
 * mal de tres maneras a la vez:
 *
 *   1. NO SE LEIA. `color:#fff` sobre `--danger` vale en el tema claro --rojo
 *      oscuro-- pero en el OSCURO `--danger` es un salmon claro (#F0796F), y
 *      blanco sobre salmon son 2,74:1 cuando el minimo es 4,5:1. Al boton le
 *      pasaba lo mismo al reves: salmon sobre blanco. Con `--danger-soft`
 *      --que es el par de `--danger` y se da la vuelta con el tema-- son
 *      6,23:1 en los dos temas.
 *   2. EL TEXTO SE SALIA DE SU CAJA. El aviso era una fila flex y el texto se
 *      quedaba con 196 px de los 356 --el resto se lo llevaba el boton--,
 *      pero una direccion de correo es UNA palabra: pedia 256 px y asomaba
 *      por debajo del boton. `overflow-wrap` y un `<wbr>` tras la arroba (lo
 *      pone `auth.js`, con el porque) lo dejan partir por un sitio decente.
 *   3. SE COMIA 163 px DE 748, en TODAS las pantallas.
 *
 * El boton FLOTA y el texto le da la vuelta, que es lo que baja el alto a 130:
 * en una fila flex el boton se lleva su columna entera --o su renglon entero
 * si envuelve-- y aqui solo estorba en el primer renglon. `flow-root` es lo
 * que mantiene el flotante dentro de la caja aunque el texto sea corto:
 * comprobado con una linea, el aviso se queda en 62 px y el boton no asoma.
 *
 * Y NO SE ACORTA EL TEXTO. Es un aviso de seguridad --estas viendo datos de
 * otra persona-- y las dos direcciones importan: la de quien miras y la tuya.
 * Lo que si baja de rango es la segunda, que es la que ya sabes. */
.suplantando{
  display:flow-root;
  background:var(--danger); color:var(--danger-soft);
  padding:8px 14px; font-size:13.5px; font-weight:650;
}
.suplantando .quien{display:block; overflow-wrap:anywhere}
/* El plegador: una flecha hacia arriba, que es a donde se va el aviso. Va
   pegado al borde y mas discreto que «Volver a ser tu», que es la accion que
   importa. */
.suplantando .plegar{
  float:right; margin:0 0 4px 6px; padding:7px 9px; min-height:36px;
  background:transparent; color:var(--danger-soft); border:0;
  cursor:pointer; display:flex; align-items:center;
}
/* ── PLEGADO: LA MARCA EN LA CABECERA ──────────────────────────────────
   El aviso se puede quitar de en medio --en un movil ocupa 130 px de 748 y
   sale en todas las pantallas-- pero NO puede desaparecer: un administrador
   que olvida que esta viendo los datos de otra persona borra, envia o valida
   en nombre de quien no es. Asi que plegarlo deja esta marca puesta en la
   cabecera, del mismo rojo del aviso, y tocandola vuelve el aviso entero.
   Rellena y no de contorno como los otros botones de la cabecera: ahi es lo
   unico que no es una herramienta, es una advertencia. */
.chapa-suplantar{
  flex:0 0 auto; display:flex; align-items:center;
  min-height:38px; padding:0 11px; max-width:40%;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--danger); color:var(--danger-soft);
  font:inherit; font-weight:700; font-size:11.5px;
}
/* Un nombre larguisimo se corta con puntos en vez de empujar al titulo fuera.
   MEDIDO en el telefono: con el nombre puesto el titulo se queda en 191 px y
   los titulos de dos palabras --«Facturas recibidas», «Gasto de la empresa»--
   bajan a dos renglones, o sea que la cabecera pasa de 57 px a 73 mientras se
   suplanta. Se acepta a sabiendas: son 16 px contra los 130 del aviso, el
   titulo no se corta (se parte, que para eso lleva el recorte a dos renglones)
   y lo que se gana es saber A QUIEN estas viendo sin tener que desplegar. */
.chapa-suplantar .nombre{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.chapa-suplantar[hidden]{display:none}
.chapa-suplantar:active{opacity:.8}
.suplantando .quien b{font-weight:800}
.suplantando .yo{display:block; font-size:11.5px; font-weight:600; opacity:.9}
.suplantando button{
  float:right; margin:0 0 4px 10px;
  font:inherit; font-weight:700; font-size:13px;
  padding:7px 12px; min-height:36px; border-radius:999px; cursor:pointer;
  background:var(--danger-soft); color:var(--danger); border:0;
}
.suplantando button:disabled{opacity:.6}


/* ── Bandeja y ficha del gasto ─────────────────────────────────────────
   Piezas de las pantallas de la Fase 2. */
.item{
  display:flex; align-items:center; gap:10px; width:100%;
  text-align:left; font:inherit; padding:12px 14px;
  background:var(--surface); color:var(--ink);
  border:0; border-bottom:1px solid var(--line); cursor:pointer;
}
.item-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.item-txt b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── LA TARJETA DE LA BANDEJA, EN RENGLONES Y NO EN COLUMNAS ───────────
 *
 * Medido en el movil del usuario con la letra del sistema al 150%: cada
 * tarjeta media 265 px y en los 442 que le quedan a la lista eso es UNA
 * tarjeta y media.
 *
 * Y LA CULPA NO ERA DEL CONCEPTO, era de las pastillas. El reparto salia asi:
 *
 *     texto 131 px   |   columna derecha 187 px
 *
 * o sea que la derecha se llevaba el 57% del ancho sin tener nada largo que
 * enseñar --el importe son 81 px--: lo que la estiraba era la pastilla de
 * estado, «lista para enviar», 187 px. Con 131 px el concepto se desplegaba
 * en SIETE renglones.
 *
 * Es la tercera vez que estas pastillas rompen esta pantalla --la v176 las
 * hizo partirse, la v177 tuvo que deshacerlo a medias-- y el motivo de fondo
 * siempre fue el mismo: UNA ETIQUETA DE ESTADO NO ES UNA COLUMNA DE DATOS.
 * Metida en una, el ancho de la fila entera depende de lo largo que sea su
 * texto, y ese texto lo decide el estado del gasto, no el diseño.
 *
 * Asi que las pastillas se bajan a su propio renglon y arriba quedan las dos
 * cosas que SI son cortas y estables --el proveedor y el importe--:
 *
 *     TEST CORREOS                          24,26 €
 *     2026-09-12 · GASTO DE PRUEBA (spec 040) - no…
 *     [lista para enviar]
 *
 *     tarjeta                 265 -> 156 px
 *     ancho del concepto      131 -> 328 px
 *     renglones del concepto    7 -> 2
 *     tarjetas de un vistazo  1,7 -> 2,8
 *
 * El concepto se corta a dos renglones como en «Mis gastos», y eso ANTES NO SE
 * PODIA: la linea terminaba diciendo lo que le falta al gasto y cortarla
 * escondia la tarea. Medido: se leia hasta «...no es un gasto real, se » y el
 * «· falta importe y fecha» quedaba fuera. Por eso el «falta» es ahora una
 * pastilla mas (ver `pantalla-lista.js`), que ademas es donde se ve de un
 * vistazo en vez de al final de un renglon largo. */
.item-apilado{ flex-direction:column; align-items:stretch; gap:5px }
.item-cab{ display:flex; gap:10px; align-items:baseline }
/* El proveedor se corta con puntos suspensivos, como siempre; el importe no se
   toca, que es corto y es el otro dato por el que se reconoce el gasto. */
/* EL `:not(.item-eur)` ES EL ARREGLO, Y NO SOBRA (17/09/2026).
   ─────────────────────────────────────────────────────────────────────
   El importe TAMBIEN es un `<b>` dentro de `.item-cab` (`pantalla-lista.js`
   :442), asi que sin esto lo cogia esta regla. Y la cogia GANANDO: `.item-cab
   > b` tiene una clase y un elemento, y `.item-eur` --que declara `flex:0 0
   auto` justo debajo-- solo una clase. Mas especifico manda, asi que el importe
   se quedaba con `flex:1 1 auto` y NO con el suyo.

   Con los dos hermanos creciendo a partes iguales, el importe no se iba a la
   derecha: se quedaba a media tarjeta, y ADEMAS EN UN SITIO DISTINTO EN CADA
   FILA, porque el reparto depende de lo largo que sea el nombre. En la captura
   del usuario: «5,90 €» de «TAXI 57» a 410 px y «18,70 €» de «AIRPORT FOOD
   OUTLETS, S.L.» a 480. Una columna de importes que no esta en columna se lee
   mal aunque cada numero este bien.

   Y de paso le quitaba al importe el `overflow:hidden` con puntos suspensivos,
   que es justo lo que `.item-der b` tiene prohibido unas lineas mas arriba y
   por el mismo motivo: un importe recortado parece otro numero.

   SE ARREGLA AQUI Y NO SUBIENDO `.item-eur`: lo que estaba mal no es que al
   importe le faltara peso, es que esta regla nunca quiso hablar de el. El
   `:not()` lo dice. */
.item-cab > b:not(.item-eur){
  flex:1 1 auto; min-width:0; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item-eur{ flex:0 0 auto; white-space:nowrap; font-size:15px }
.item-sub{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.item-chapas{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.item-chapas:empty{ display:none }
/* LO QUE LE FALTA AL GASTO, con su propia pinta: solo el borde, para que no se
   confunda con las pastillas de estado, que van rellenas. No es un estado --es
   lo que hay que ir a poner-- y tampoco es un error: a un borrador le falta
   algo por definicion. */
.pill-falta{
  background:var(--surface); color:var(--ink-2); border-color:var(--line-strong);
}

/* EN «MIS GASTOS», EL CONCEPTO SE QUEDA EN DOS RENGLONES.
   ─────────────────────────────────────────────────────────────────────
   Medido en el movil del usuario con la letra del sistema al 150%: una fila
   media 265 px porque el concepto se desplegaba en seis renglones, y en los
   491 px que le quedan a la lista eso es UN gasto y medio. Con dos renglones
   la fila baja a 118 y se ven dos enteros, y desplazando, cuatro por pantalla
   en vez de dos. El nombre del proveedor ya se cortaba asi desde siempre (la
   regla de aqui arriba); esto es lo mismo para la linea de debajo.

   Y SOLO EN «MIS GASTOS», no en la bandeja, aunque el problema del alto sea el
   mismo. Alli esa misma linea termina diciendo lo que le FALTA al gasto --«·
   falta el importe y la fecha»--, que es justo lo que hay que hacer con el; si
   se corta por la mitad, lo que se esconde es la tarea. En «Mis gastos» esa
   coletilla no existe: son gastos ya cerrados y la linea es solo fecha y
   concepto, o sea contexto para reconocerlo. Cortarla ahi no quita nada que
   haya que hacer, y el concepto entero sigue estando dentro de la ficha.
   Si algun dia la bandeja necesita esto, primero hay que sacar el «falta» de
   esa linea. */
#p-gastos .item-txt .hint{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

/* Y LOS FILTROS, MAS PEQUEÑOS. Son los de periodo, viaje y tarjeta de «Mis
   gastos»: cuatro pastillas suman 477 px de ancho para 356 disponibles, asi
   que dos filas son inevitables --achicandolas tampoco caben en una-- pero
   pasan de 114 px de alto a 91. Aqui no se toca con guante ni con prisa: se
   esta repasando lo gastado, sentado. Es el mismo criterio que en las cuatro
   de «¿Ha salido bien?», y por eso tampoco toca al resto de `.chip`. */
#filtrosGastos{gap:6px}
#filtrosGastos .chip{font-size:11.5px; padding:6px 10px; min-height:32px}

/* ── PROVEEDORES EN UN MOVIL ────────────────────────────────────────────
   Medido en el telefono del usuario --384 px de ancho, letra del sistema al
   150%-- con el aviso de fichas sin contacto ya plegado: el primer proveedor
   empezaba en el pixel 791 de una pantalla de 748. O sea que se entraba en el
   directorio y no se veia UN solo proveedor sin desplazar. Lo de arriba se
   arregla en `pantalla-proveedores.js`; lo que queda son las pastillas.

   LOS CINCO FILTROS suman 746 px para 356 disponibles: tres renglones, 170 px.
   Achicados caben en dos y se quedan en 110. Mismo criterio que en «Mis
   gastos»: el directorio se mira sentado, no con guante ni con prisa. */
#chipsProveedores{gap:6px}
#chipsProveedores .chip{font-size:11.5px; padding:6px 10px; min-height:32px}

/* Y LAS TRES ACCIONES DE CADA PROVEEDOR --«Ver mis 3 gastos», «Los 3 sin
   factura», «Pedirle las facturas»-- suman 566 px: otros tres renglones, 174
   px, Y ESTOS SE PAGAN UNA VEZ POR PROVEEDOR. Con dos renglones la ficha
   entera baja de 301 px a 199, que es la diferencia entre ver dos proveedores
   y ver cuatro.
   Aqui el minimo se queda en 36 px y no en 32 como en los filtros: estas tres
   no filtran, ABREN pantallas y una de ellas manda un correo. Equivocarse de
   pastilla cuesta mas que volver a tocar un filtro. */
#cuerpoProveedores .fila .chip{font-size:12px; padding:7px 11px; min-height:36px}

/* EL CORREO NO CABE Y SE SALIA POR DEBAJO DE LA COLUMNA DERECHA. La linea de
   cada ficha es «sin NIF · alguien@investigo.grupositelec.es» y ese correo es
   una sola palabra de 41 caracteres: sin sitio donde partir, el navegador la
   deja asomar fuera de su caja --172 px de hueco para 342 de texto-- y se
   pisa con el numero de facturas. `anywhere` le da permiso a partirla por
   donde sea.
   Y DOS RENGLONES COMO TOPE, que si no la fila crece de 127 px a 177 y lo que
   se gana arriba se pierde aqui. Con dos caben enteros los casos que hay que
   leer de un vistazo --medidos los cuatro en el telefono-- : «B12345678 · sin
   correo», «sin NIF · sin correo» y un correo normal tipo «pepe@bar.es». Lo
   unico que se corta es una direccion corporativa larga, y ahi lo que importa
   --que TIENE correo-- ya se ha leido; entera esta en su ficha. Es el mismo
   criterio que el nombre del proveedor de la linea de arriba, que se corta
   desde siempre. */
#cuerpoProveedores .item-txt .hint{
  overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

/* Y EL TITULAR DEL AVISO SE PARTE EN VEZ DE CORTARSE. `.item-txt b` lleva
   `nowrap` con puntos suspensivos porque ahi suele ir un nombre de proveedor,
   que cortado se sigue reconociendo. Este no es un nombre, es una frase: «17
   fichas sin datos de contacto.» ocupa 328 px de los 328 que hay, asi que en
   cualquier telefono un poco mas estrecho se leeria «17 fichas sin datos…».
   Una frase cortada no dice nada. */
.item-txt b.prov-falta-tit{white-space:normal; overflow:visible; text-overflow:clip}

/* LA COLUMNA DERECHA TIENE QUE PODER ENCOGER, y antes decia `flex:0 0 auto`.
   ─────────────────────────────────────────────────────────────────────
   Con los estados de siempre --«por repasar», «enviada»-- la pastilla medía
   poco y no se notaba. El 10/09/2026 entro `recibida`, que se lee «con su
   factura, lista para enviar» (`pantalla-lista.js:99`) y mide el doble que
   cualquier otra. Como esta columna no podia encoger, se llevaba todo el
   ancho que pedia y al concepto le quedaban unos cien pixeles: en un movil de
   384 px de CSS eso es UNA PALABRA POR RENGLON, y la pastilla ademas se salia
   por la derecha arrastrando al importe.

   Visto el 11/09/2026 en el Samsung, y NO era cosa de la aplicacion movil:
   pasa igual en el Chrome del mismo telefono. Lo que la app hizo fue
   enseñarlo, porque el WebView de Android aplica el tamaño de letra del
   sistema --ese movil lo tiene al 150%-- y el navegador no.

   `max-width` en vez de dejarla encoger a secas porque sin tope la pastilla se
   parte en cuatro renglones de dos palabras y queda peor que el problema.
   Con la mitad del ancho, parte en dos y las dos columnas se leen. */
.item-der{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  /* `flex-shrink:0` Y el tope. Es el segundo intento, y el primero estaba mal:
     con `0.4` encogia TODO por igual, asi que «POR REPASAR» --que cabe de
     sobra-- tambien se partia en dos renglones, y una pastilla de dos
     renglones con el borde redondo de 999px se convierte en un pegote. El
     usuario lo dijo al verlo: «mira que feo sale el posible repetido».
     Con `0` la pastilla no encoge nunca, y el que la acota es el `max-width`:
     las cortas se quedan en un renglon y solo la larga --«con su factura,
     lista para enviar»-- llega al tope y parte. Que era lo que habia que
     arreglar, y solo eso. */
  flex:0 0 auto; min-width:0; max-width:60%;
}
/* Y la pastilla, alineada a la derecha cuando parte en dos renglones: si no,
   el segundo renglon queda centrado debajo del primero y parece otra cosa.
   El 60% de arriba sale de probarlo: con 52% cabia igual, pero el estado largo
   se partia en CUATRO renglones de dos palabras y la fila crecia el doble. */
.item-der .pill{text-align:right}
/* El importe NO se parte nunca. Con la columna ya encogiendo, a 256 px --que
   es lo que mide esto en un movil con la letra al 150%-- «28,45 €» se rompia
   entre el numero y el simbolo, y un importe en dos renglones se lee mal y
   parece otro numero. */
.item-der b{white-space:nowrap}

/* Los avisos van en caja y con color, no como una línea más de texto: si dice
   que hay dos tickets en la foto, tiene que costar no verlo. */
/* Un chip flojo: la accion destructiva de la papelera. Mismo tamanio que el
   normal --que se pueda pulsar con el dedo-- pero sin peso visual: la accion
   que se usa ahi es «Sacar», y «Borrar del todo» no puede competir con ella. */
.chip-flojo{
  margin-top:4px; color:var(--ink-2); border-color:var(--line);
  background:transparent; font-weight:500;
}
.chip-flojo:hover{ color:var(--danger); border-color:var(--danger); }

.aviso-caja{
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:10px 12px; margin:0 0 12px; background:var(--surface-2);
  font-size:13.5px;
}
.aviso-caja.malo{border-color:var(--danger);background:var(--danger-soft)}
.aviso-caja.malo b{color:var(--danger)}
.aviso-caja.bueno{border-color:var(--ok);background:var(--ok-soft)}
.aviso-caja ul{margin:6px 0 0;padding-left:18px}
.aviso-caja p{margin:4px 0 0;color:var(--ink-2)}
/* AIRE ENTRE EL TEXTO Y LO QUE HAY QUE PULSAR. Los botones de un aviso van
   sueltos detras del parrafo o de la lista, y sin margen quedaban tocando la
   ultima linea: en la relectura, «Poner estos datos» pisaba el renglon del
   concepto. Un boton que decide algo --aceptar una lectura, descartarla-- tiene
   que verse como una cosa aparte de lo que se esta leyendo.
   `>` A PROPOSITO, solo los hijos directos: los avisos que ya agrupan sus
   botones en un `.fila` llevan su propio margen arriba, y ahi esto sumaria dos
   veces y descuadraria la fila. */
.aviso-caja > .chip{margin-top:10px}

.foto-ticket{
  display:block; width:100%; max-height:46vh; object-fit:contain;
  background:#000; border-radius:var(--radius-sm); margin-bottom:12px;
}
/* ── LA FICHA QUE SE LEE, Y LA QUE SE CORRIGE ──────────────────────────
   11/09/2026, dicho por el usuario mirando su movil: «los gastos en movil
   ocupan demasiado espacio, no puedes ver una imagen completa y los inputs
   aparecen editables todo el rato».

   LA CUENTA QUE LO EXPLICA. Un dato con su `<label>` y su `<input>` mide 82 px
   (13 px de etiqueta + 5 de hueco + 45 de caja + 14 de margen). La ficha tiene
   trece --diez campos y tres selectores--, o sea 1.070 px SOLO de formulario,
   mas la foto y los avisos: dos pantallas y media de movil.

   El mismo dato en un renglon mide 28. Los trece, 364. Con eso la foto y lo que
   pone el ticket caben juntos en la primera pantalla, que es lo que se venia a
   arreglar. */
.dato{
  display:flex; gap:10px; justify-content:space-between; align-items:baseline;
  padding:5px 0; border-bottom:1px solid var(--line);
  font-size:14px; line-height:1.35;
}
.dato:last-child{border-bottom:0}
.dato-et{color:var(--ink-3); font-size:13px; flex:0 0 auto}
/* EL VALOR MANDA SOBRE LA ETIQUETA cuando no caben los dos: `min-width:0` para
   que pueda encogerse dentro del flex --sin el, un proveedor largo desborda la
   columna en vez de partirse-- y alineado a la derecha, que es donde el ojo
   busca los importes al repasarlos en vertical. */
.dato-v{
  color:var(--ink); font-weight:600; text-align:right;
  min-width:0; overflow-wrap:anywhere;
}
/* Un obligatorio que falta se ve TAMBIEN leyendo: es la unica pista de por que
   «Validar» esta gris, sin tener que abrir el formulario para descubrirlo. */
.dato.falta .dato-v{color:var(--danger)}
/* EL PROVEEDOR QUE LLEVA A SU FICHA: un botón vestido de valor, en el color de
   acento para que se vea que se pulsa. Sin el reset, el navegador le pone su
   borde y su fondo gris y el renglón deja de parecerse a los de al lado. */
.dato-enlace{
  background:none; border:0; padding:0; font:inherit; font-weight:600;
  cursor:pointer;
  color:var(--accent);
}

/* El boton que abre la ficha, encima de los datos sobre los que manda. */
.fila-editar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 10px;
}
.fila-editar .hint{margin:0}
/* AQUI DENTRO NO HAY FANTASMAS, y es un aviso para el que venga a tocar esto.
   `.btn-fantasma` viene sin fondo y sin borde a proposito (`.btn-mini`, mas
   arriba): en la barra de abajo se entiende --ocupa el ancho entero y esta en
   una barra-- pero suelto en mitad del cuerpo se lee como un texto gris y nadie
   lo toca. Paso el 11/09/2026 con «Dejar de editar», y lo dijo el usuario con
   la pantalla delante: «tambien tiene que ser un boton, ahora solo se ve el
   texto». Por eso los dos de esta fila son `.btn-suave`, que trae borde. */
.fila-editar .btn{flex:0 0 auto}

/* Y LA FOTO CRECE CUANDO NO HAY FORMULARIO DEBAJO. 46vh era el techo con los
   trece campos abiertos empujando; leyendo, la mitad de la pantalla que ocupaban
   se le devuelve al papel, que es la unica prueba de que el gasto existe. */
.leyendo .foto-ticket{max-height:62vh}

.campos{margin-bottom:10px}
label.campo.falta input{border-color:var(--danger)}
/* Y el mismo rojo para los campos de Configuración, que son `div.campo` y no
   `label.campo` -- la regla de arriba no los alcanzaba. Se pone cuando el
   servidor rechaza el ajuste al guardar, con el motivo debajo del campo. */
.campo.falta input, .campo.falta select, .campo.falta textarea{
  border-color:var(--danger); background:var(--danger-soft);
}
.cuadra{color:var(--ok);font-size:13.5px;margin:4px 0 10px}
.no-cuadra{color:var(--danger);font-size:13.5px;font-weight:700;margin:4px 0 10px}

.qr-caja{
  border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:var(--radius-sm); padding:10px 12px; margin:0 0 12px;
  font-size:13.5px;
}
.qr-caja ul{margin:6px 0;padding-left:18px}
.qr-caja a{color:var(--accent);font-weight:700}


/* ── La miniatura del último ticket ────────────────────────────────────
   Se ve de reojo mientras se encuadra el siguiente, y es la prueba más barata
   de que el anterior está a salvo. Arriba a la derecha, pequeña y sin estorbar
   al encuadre. */
/* `.camara img.miniatura` y no `.miniatura` a secas: la regla de arriba
   (`.camara video,.camara img`) la pone al 100% de ancho y alto, y con menos
   especificidad esta perdia. La miniatura salia ocupando la pantalla entera
   encima del visor. */
.camara img.miniatura{
  position:absolute; top:10px; right:10px; width:56px; height:auto;
  border-radius:6px; border:2px solid rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(0,0,0,.5); pointer-events:none;
}

/* ── El cartel de instalar ─────────────────────────────────────────────── */
.instalar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:12px;
  font-size:13.5px;
}
.instalar .inst-txt{flex:1 1 180px}
.instalar .inst-no{
  font:inherit; font-size:13px; background:none; border:0;
  color:var(--ink-3); text-decoration:underline; padding:8px;
}


/* ── Mis gastos y ajustes ──────────────────────────────────────────────── */
.item-quieto{cursor:default}
/* Y SI LA COLETILLA NO CABE AL LADO, BAJA ENTERA. En «Gasto de la empresa»,
   con la letra del sistema al 150%, el importe se lleva 171 px de los 328 y a
   «24 gastos · media 103,56 €» le quedaban 147: salia en TRES renglones al
   lado del numero. En su propio renglon cabe de una vez y encima el bloque
   baja de 137 px a 125. `wrap` a secas y no un salto forzado: en una pantalla
   ancha siguen uno al lado del otro, como hasta ahora. */
.total-gordo{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:14px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
/* LA PUERTA A LOS MOVIMIENTOS COMPARTE RENGLON CON LOS ESTADOS, PERO NO
   OFICIO (23/09/2026). Los de al lado acotan lo que se esta viendo y este se va
   a otra pantalla, asi que se pinta como un enlace y no como una pastilla: sin
   relleno, sin borde y en el color de acento. Si se pareciera a un filtro, o se
   pulsaria creyendo que filtra, o no se pulsaria nunca.
   Vive ahi porque es donde no cuesta alto: medido a 320/360/390/430 px, en tres
   de los cuatro anchos entra sin añadir un solo pixel, y antes tenia un renglon
   propio que costaba ~40 siempre. */
.chip.puerta-tarjeta{
  border-color:transparent; background:none; color:var(--accent);
  padding-left:6px; padding-right:6px;
}

/* Y EL TOTAL NO SE PARTE. Es la misma enfermedad que en `.item-der b`: en el
   movil del usuario, con la letra del sistema al 150%, «41,39 €» salia como
   «41,39» en un renglon y «€» en el siguiente, debajo. Un importe cortado por
   la mitad se lee como otro numero, y este es el numero por el que se abre la
   pantalla. Visto el 14/09/2026 en «Mis gastos». */
.total-gordo>span:first-child{
  font-size:26px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap;
}
#cuerpoAjustes h2{font-size:15px;margin:18px 0 8px}
#cuerpoAjustes h2:first-child{margin-top:0}
.quitar{font:inherit;font-size:13px;background:none;border:0;color:var(--danger);padding:8px}

/* ── Las cuentas, una tarjeta plegada por persona ──────────────────────
   La pantalla de Usuarios. Cada cuenta traia sus cuatro botones puestos, y con
   la plantilla entera la lista era un muro de mandos por el que habia que bajar
   para llegar a la persona que se buscaba. Ahora la cabecera dice lo que se
   viene a leer --quien es, como esta, cuando entro-- y los botones salen al
   abrir esa fila, de una en una. El porque entero, en pantalla-usuarios.js. */
.usr-tarj{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); margin-bottom:8px; overflow:hidden;
}
/* La abierta se despega de las demas: mientras se le tocan los mandos tiene que
   verse DONDE empieza y donde acaba la fila que se esta cambiando. */
.usr-tarj.abierta{border-color:var(--line-strong);background:var(--surface-2)}

/* TODA LA CABECERA ES EL BOTON. Con el dedo se acierta un blanco de dos lineas
   de alto; una flecha de doce pixeles a la derecha, no. */
.usr-cab{
  display:flex; align-items:center; gap:10px; width:100%;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  background:none; border:0; padding:10px 12px;
}
.usr-cab:hover,.usr-cab:focus-visible{background:var(--surface-2)}
.usr-quien{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0}
/* El correo es la identidad y puede ser larguisimo: se corta con puntos antes
   que empujar las chapas fuera de la tarjeta. */
.usr-linea{display:flex;align-items:baseline;gap:7px;min-width:0}
.usr-linea b{
  font-size:14.5px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.usr-linea .hint{flex:0 0 auto;font-size:12.5px}
/* Las chapas y el ultimo acceso comparten renglon y se van a la linea de abajo
   solas si no caben: en el movil son cuatro chapas en una tarjeta estrecha. */
.usr-chapas{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.usr-chapas .hint{font-size:12px}
.usr-flecha{
  flex:0 0 auto; color:var(--ink-3); font-size:18px; line-height:1;
  transition:transform .15s ease;
}
.usr-tarj.abierta .usr-flecha{transform:rotate(90deg)}

.usr-detalle{padding:2px 12px 12px;border-top:1px solid var(--line)}
.usr-detalle .hint{margin:8px 0 0}
/* Los mandos, separados de lo que se lee: pegados al ultimo renglon de texto
   parecian el pie de esa frase y no la botonera de la cuenta. */
.usr-mandos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* «Entrar como» va en la linea del estado, como enlace a la derecha, y no con
   los mandos: asi no hay un «Desactivar» al lado ni debajo del que se usa a
   diario, y la tarjeta tiene una fila de botones menos. El margen negativo le
   da al dedo 44 px de alto sin que la linea crezca. */
.usr-estado{display:flex;align-items:center;gap:8px;margin-top:8px}
.usr-detalle .usr-estado .hint{margin:0;flex:1 1 auto;min-width:0}
.usr-entrar{
  flex:0 0 auto;font:inherit;font-size:14px;font-weight:700;
  color:var(--accent);background:none;border:0;cursor:pointer;
  min-height:44px;margin:-10px -6px -10px 0;padding:0 6px 0 10px;
}
.usr-entrar:disabled{opacity:.5;cursor:default}


/* ── La papelera, un gasto tirado por linea ────────────────────────────
 *
 * MISMA TARJETA PLEGADA QUE USUARIOS, y por el mismo motivo: cada gasto
 * traia seis renglones puestos --proveedor, numero, motivo, fechas, a donde
 * vuelve y dos botones-- y en un movil entraban dos gastos. La papelera se
 * mira para BUSCAR algo concreto («¿donde fue a parar la del taxi?»), y para
 * buscar hace falta ver la lista entera, no dos fichas completas.
 *
 * En la linea va lo justo para reconocerlo: quien, con que numero de factura,
 * y cuanto. El resto sale al abrir. El porque entero, en pantalla-papelera.js.
 */
.pap-tarj{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); margin-bottom:8px; overflow:hidden;
}
.pap-tarj.abierta{border-color:var(--line-strong);background:var(--surface-2)}

/* TODA LA LINEA ES EL BOTON DE ABRIR, no una flecha de doce pixeles. */
.pap-cab{
  display:flex; align-items:center; gap:10px; width:100%;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  background:none; border:0; padding:11px 13px;
}
.pap-cab:hover,.pap-cab:focus-visible{background:var(--surface-2)}
/* El proveedor puede ser larguisimo y el numero de factura tambien: se cortan
   con puntos antes que empujar el importe fuera de la tarjeta. */
.pap-quien{display:flex;align-items:baseline;gap:7px;flex:1 1 auto;min-width:0}
.pap-quien b{
  font-size:14.5px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* EL NUMERO NO ENCOGE, el nombre si: «637...» no sirve para nada y «TAXIS
   EIVISSA - RADIO T...» se reconoce igual. Con el tope del 45 % un numero
   larguisimo tampoco se puede comer la linea entera. */
.pap-quien .hint{
  flex:0 0 auto; font-size:12.5px; min-width:0; max-width:45%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* El importe no encoge nunca: es la otra mitad de «cual de estos era». */
.pap-total{flex:0 0 auto;font-size:14.5px;font-variant-numeric:tabular-nums}
.pap-flecha{
  flex:0 0 auto; color:var(--ink-3); font-size:18px; line-height:1;
  transition:transform .15s ease;
}
.pap-tarj.abierta .pap-flecha{transform:rotate(90deg)}

.pap-detalle{padding:2px 13px 12px;border-top:1px solid var(--line)}
.pap-detalle p{margin:8px 0 0}
/* EL MOTIVO SIGUE MANDANDO dentro del pliegue: es lo primero y va en negro,
   no en la letra pequeña de las fechas. Es lo que se viene a leer. */
.pap-motivo{font-size:14.5px;font-weight:650}

/* LOS BOTONES, EN FILA Y AL PIE. Antes iban en una columna a la derecha, a
   media altura de la ficha: quedaban flotando junto al texto --el «Sacar» a
   la altura del motivo, no del gasto-- y el importe encima se leia como su
   etiqueta. Al pie se ve donde acaba cada gasto, y «Sacar» --lo que se viene
   a hacer-- cae a la derecha del todo, en el lado del pulgar. */
.pap-mandos{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px}
.pap-mandos .chip{margin-top:0}


/* ── Estadísticas ──────────────────────────────────────────────────────
   Barras hechas con un div de ancho variable. Dicen lo mismo que una librería
   de gráficos de 200 KB que hay que bajar por 4G. */
.linea-dato{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 14px; border-bottom:1px solid var(--line);
}
/* ── LA ETIQUETA Y LA BARRA, UNA ENCIMA DE OTRA ────────────────────────
   Estaban en la misma fila y la etiqueta tenia el 34% fijo: 112 px. En el
   movil del usuario, con la letra del sistema al 150%, eso son CATORCE
   CARACTERES, y la lista que peor lo llevaba era justo «En que se gasta»,
   cuyo unico trabajo es decir en que se gasta. Medido alli: «VIESSMANN SONDA
   TEMPERATURA CONTACTO NTC y otros» pedia 619 px para 112, «Ensallos de
   vehiculo Land Rover, viaje Murcia» 478. Lo que se leia era «VIESSMANN
   SOND…», o sea nada.

   Apiladas, la etiqueta pasa de 112 px a 250 y la barra las cruza enteras a lo
   ancho, que ademas es como mejor se comparan. La fila crece de 75 px a 89
   cuando el concepto ocupa dos renglones --y solo entonces--: el alto lo
   seguia marcando la columna de la derecha, que ya traia importe y numero
   apilados.

   DOS RENGLONES COMO TOPE, igual que en «Mis gastos»: con eso entran enteros
   todos los conceptos de esta pantalla menos uno, y el que sobra se corta por
   el final, no a los catorce caracteres. */
.linea-izq{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px}
.linea-et{
  font-size:13.5px; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.barra{width:100%;height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.barra>span{display:block;height:100%;background:var(--accent);border-radius:999px}
.linea-val{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.linea-val b{font-size:13.5px}
#cuerpoAdmin h2{font-size:15px;margin:18px 0 6px;padding:0 14px}
#cuerpoAdmin .hint{padding:0 14px}
#cuerpoAdmin .aviso-caja{margin:12px 14px}
#cuerpoAdmin .total-gordo{margin-bottom:4px}

/* ── Una linea de datos que se puede abrir ─────────────────────────────
   Las personas de «Gasto de la empresa» llevan a sus gastos. Tienen que
   parecer tocables: una linea identica a las de al lado que ademas responde al
   toque es peor que ninguna, porque nadie la prueba. */
.linea-abrible {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 6px;
  margin-left: -6px;
}
.linea-abrible:hover,
.linea-abrible:focus-visible { background: rgba(127,127,127,.12); }
.linea-abrible .linea-et::after { content: " ›"; opacity: .5; }


/* =========================================================================
   LA FOTO DEL TICKET, EN GRANDE
   ========================================================================= */

/* El boton que envuelve a la miniatura. Sin borde ni fondo: tiene que parecer
   la foto de siempre, solo que ahora se puede tocar. */
.foto-abrir{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; position:relative;
}
.foto-lupa{
  position:absolute; right:8px; bottom:8px;
  background:rgba(0,0,0,.62); color:#fff;
  font-size:12px; padding:4px 9px; border-radius:999px;
  pointer-events:none;
}

/* Cada hoja del gasto, con su papelera encima.
   El envoltorio existe para poder colocarla: `.foto-abrir` ya es `relative`,
   pero un <button> dentro de otro <button> no es HTML valido. */
.foto-hoja{ position:relative; }
.foto-quitar{
  position:absolute; top:8px; left:8px;
  /* 40 px de lado. Es el minimo que se acierta con el pulgar sin mirar, y esta
     pantalla se usa de pie en la calle con una mano. */
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
  border:2px solid #fff; border-radius:999px;
  background:#c62828; color:#fff;
  /* La sombra no es adorno: el rojo sobre la foto de un ticket --papel blanco
     casi siempre-- se pierde en cuanto la foto sale sobreexpuesta. */
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  cursor:pointer;
}
.foto-quitar:active{ background:#8e1f1f; }

/* El dibujo de la papelera, que va DENTRO del fichero y no lo pone el sistema:
   el emoji que habia aqui lo dibujaba cada uno a su manera --un contorno gris
   casi invisible en Windows, un emoji en color en el WebView de Android-- y el
   color de un emoji no se puede cambiar desde aqui.
   `currentColor` lo ata al `color` del boton: hoy blanco, y lo que se ponga
   manana sin tener que volver a tocar el dibujo. */
.ico-papelera{
  width:20px; height:20px; display:block;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ── LAS DOS CARAS DE UNA HOJA ─────────────────────────────────────────
   De cada hoja se guardan dos ficheros: la ESCANEADA --aplanada y con el filtro
   que se eligiera-- y la FOTO ORIGINAL, tal cual salio de la camara. Estas
   flechas pasan de una a la otra.

   DEBAJO DE LA FOTO Y NO FLOTANDO SOBRE ELLA. Encima ya hay dos cosas --la
   papelera arriba a la izquierda y la lupa abajo a la derecha-- y en la foto
   vertical de un ticket largo, que es la forma normal, una tercera cae justo
   sobre el total.

   El margen de arriba es negativo a proposito: `.foto-ticket` trae 12 px
   propios y con ellos la fila se queda flotando lejos de su hoja, mas cerca de
   la de abajo. Con tres hojas seguidas eso es leer el pie de la hoja
   equivocada. */
.foto-caras{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:-6px 0 14px;
}
.foto-cara-paso{
  /* 40 px, el mismo pulgar que `.foto-quitar` y por la misma razon: esto se usa
     de pie en la calle y con una mano. */
  width:40px; height:40px; padding:0; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; line-height:1;
  border:1px solid var(--line-strong); border-radius:999px;
  background:var(--surface); color:var(--ink);
  cursor:pointer;
}
.foto-cara-paso:active{ background:var(--surface-2); }
/* Ancho minimo para que «Escaneada · 1/2» y «Foto original · 2/2» no muevan las
   flechas de sitio al cambiar: un boton que se desplaza bajo el dedo se falla
   al segundo toque. */
.foto-cara-cual{
  font-size:12.5px; color:var(--ink-2);
  min-width:10.5em; text-align:center;
}

/* ── LAS FOTOS QUE SE LE MANDAN AL COMERCIO ────────────────────────────
   11/09/2026: el correo con el que se le pide la factura a un proveedor lleva
   ahora las fotos del ticket, y se ven --y se quitan-- en el recuadro donde se
   escribe el correo. Antes ahi solo habia texto: se mandaba el numero, la fecha
   y el importe, y muchos tickets no traen numero.

   EN FILA Y CON SCROLL LATERAL, no en rejilla: son una, dos o tres casi
   siempre, y una fila se lee como «esto es lo que va dentro del sobre». Con
   `overflow-x` para que una factura de seis hojas no parta el recuadro en un
   movil -- es la misma salida que se le da a las tablas. */
.adjuntos{
  display:flex; gap:10px; margin:8px 0 2px;
  overflow-x:auto; padding-bottom:4px;
}
.adjunto{ position:relative; flex:0 0 auto; width:92px; }
.adjunto-ver{
  display:block; width:92px; height:92px; padding:0; border:0;
  border-radius:var(--radius-sm); overflow:hidden;
  background:#000; cursor:zoom-in;
}
.adjunto-ver img{ width:100%; height:100%; object-fit:cover; display:block; }
/* La quitada se queda PUESTA y en gris, con su boton de devolverla: que
   desaparezca obligaria a cerrar el recuadro --y perder lo escrito-- para
   recuperar una foto quitada sin querer. */
.adjunto-fuera .adjunto-ver{ opacity:.32; }
.adjunto-fuera .adjunto-pie{ color:var(--danger); }
.adjunto-quitar{
  position:absolute; top:4px; left:4px;
  /* 32 y no los 40 de `.foto-quitar`: alli el aspa va sobre una foto a pantalla
     completa y aqui sobre una de 92 px, donde 40 taparia media hoja. Sigue por
     encima del minimo tactil comodo con el pulgar. */
  width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1;
  border:2px solid #fff; border-radius:999px;
  background:#c62828; color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  cursor:pointer;
}
.adjunto-fuera .adjunto-quitar{ background:var(--ok); }
.adjunto-quitar:active{ filter:brightness(.85); }
.adjunto-pie{
  display:block; margin-top:4px;
  font-size:11.5px; line-height:1.25; color:var(--ink-3);
}
.foto-quitar:disabled{ opacity:.5; }

.visor{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.93);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overscroll-behavior:none;
}
/* `touch-action: none` y NO `pinch-zoom`.
   Se probo con pinch-zoom y no funciona: las restricciones de touch-action de
   los ancestros se ACUMULAN y no se pueden reabrir desde un hijo, y la
   aplicacion lleva `pan-y` en html y body para que la interfaz no se amplie con
   dos dedos. Asi que aqui se le pide al navegador que no toque NINGUN gesto, y
   el zoom lo hace App.verFoto con punteros -- que ademas amplia la foto sola en
   vez de la pantalla entera. */
.visor-lienzo{
  flex:1 1 auto; width:100%; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:12px;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}
/* La foto entra entera y se acerca con el gesto. `max-width/height` y no
   `width:100%`: un ticket es alto y estrecho, y estirarlo a lo ancho lo deja
   ilegible justo donde estan los importes. */
.visor-lienzo img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  background:#fff;               /* los tickets en gris se leen mejor sobre blanco */
  border-radius:4px;
  /* El origen en el centro, que es contra lo que calcula App.verFoto. Y sin
     transicion: con ella, el pellizco va a rastras del dedo. */
  transform-origin:center center;
  will-change:transform;
  -webkit-user-drag:none;
}
.visor-cerrar{
  position:absolute; top:12px; right:12px; z-index:2;
  width:44px; height:44px;       /* 44 px: lo que hace falta para un dedo */
  border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:19px; cursor:pointer;
}
.visor-pie{
  flex:0 0 auto; margin:0; padding:10px 14px;
  color:rgba(255,255,255,.72); font-size:12.5px; text-align:center;
}

/* =========================================================================
   EL COTEJO CONTRA EL QR
   ========================================================================= */

.cotejo{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(127,127,127,.28); }
.cotejo ul{ margin:6px 0 0; padding-left:20px; }
.cotejo li{ margin:3px 0; font-size:13.5px; }
.cotejo li.no-cuadra{ color:#c0392b; }

/* =========================================================================
   EN EL ORDENADOR
   =========================================================================

   Esto se hizo para el movil y ahi es donde se usa, pero se abre en el PC para
   repasar y para mirar los totales de la empresa. Sin esto, en un monitor de 27
   pulgadas las filas se estiran a lo ancho de la pantalla y leerlas es seguir
   con el dedo de un extremo al otro.

   Se centra con un ancho maximo, como una hoja. No se convierte en otra cosa:
   dos interfaces que mantener es como se acaba teniendo una rota. */
@media (min-width: 900px) {
  body{
    max-width:880px; margin:0 auto;
    box-shadow:0 0 0 1px rgba(127,127,127,.18);
  }
}


/* =========================================================================
   PANTALLAS CORTAS
   =========================================================================

   Un Samsung con el zoom del sistema subido deja el viewport en 339x735 en vez
   de los 412 de fabrica -- y quien lo sube suele necesitarlo, asi que no es un
   caso raro que se pueda ignorar. Con tres botones apilados, la barra de abajo
   se comia casi la mitad de la pantalla y la lista se quedaba en nada.

   Se aprieta la barra, NO las listas: los botones bajan a 44 px, que es lo
   minimo para un dedo y no se toca por debajo de ahi. El texto no encoge --si
   alguien ha subido el zoom es justamente para leer-- solo el aire de alrededor.
   Con esto se recuperan unos 40 px para la lista. */
@media (max-height: 640px) {
  .acciones{ gap:6px; padding-top:8px; }
  .acciones .btn{ min-height:44px; padding-top:10px; padding-bottom:10px; }

  /* Y la barra no puede pasar de un tercio: por debajo de eso, la lista deja
     de ser una lista. Lo que no quepa se recorre dentro. */
  .acciones{ max-height:38vh; max-height:38svh; }
}

/* La cabecera de cada viaje en «Mis gastos». Pegajosa: en una lista larga, al
   bajar sigues sabiendo de que viaje es lo que estas mirando -- que es toda la
   gracia de agruparlo. */
.grupo-viaje{
  /* `top` NEGATIVO, y no cero. Chrome pega el elemento al borde del CONTENIDO
     de la caja que hace scroll, o sea 14 px por debajo de donde se ve el
     recorte -- asi que con `top:0` la cabecera se quedaba flotando un poco mas
     abajo del borde y por esa franja de 14 px seguian pasando las lineas de
     los gastos: se leia media fila POR ENCIMA del nombre del viaje, que es
     justo lo contrario de lo que tiene que hacer una cabecera pegajosa.
     Restando el hueco, se pega al borde de verdad y lo que sube por debajo
     queda tapado. El hueco de antes de bajar no se pierde: solo se come
     cuando la cabecera ya esta pegada. */
  position:sticky; top:calc(-1 * var(--pad-cuerpo)); z-index:1;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.grupo-viaje b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grupo-viaje span{color:var(--ink-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.grupo-viaje.plegable{cursor:pointer;user-select:none}
.grupo-viaje .flecha{color:var(--ink-3);font-size:11px;margin-right:2px}

/* ── Y ESA MISMA CABECERA, EN CONFIGURACION ────────────────────────
 *
 * La misma clase y no una nueva: es la misma cosa --una cabecera que agrupa lo
 * de debajo y se pliega al tocarla-- y en la lista de gastos ya está probada,
 * pegajosa incluida.
 *
 * Lo único que cambia es el hueco de alrededor. Allí detrás de la cabecera van
 * filas de lista, que traen su propia raya; aquí van campos de formulario, y
 * sin un hueco por encima el título se pega al último campo del grupo anterior
 * y los dos parecen del mismo grupo. */
/* Y AQUI LA CABECERA ES UN <button>, no un div: hacía falta para que los
   grupos se abran con el teclado y para que el lector de pantalla los cuente
   como lo que son. El precio es deshacerle al botón lo que el navegador le pone
   de serie --tipo de letra, borde, ancho, texto centrado-- igual que hace
   `.usr-cab`, que es la misma cabecera plegable en la pantalla de Usuarios. El
   `font-size` se repite a mano porque `font:inherit` se lleva por delante el de
   `.grupo-viaje`, y ese es el tamaño del contador de la derecha. */
#cuerpoConfig .grupo-viaje{
  margin:18px 0 10px;
  width:100%; text-align:left; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  font:inherit; font-size:13px; color:inherit;
  border:0; border-bottom:1px solid var(--line);
}
/* El resalte al pasar por encima y al llegar tabulando, como en Usuarios y en
   la Papelera. Con `--surface-3` no: la cabecera ya es `--surface-2`, así que
   se marca al revés, con la raya de abajo más fuerte. */
#cuerpoConfig .grupo-viaje:hover,
#cuerpoConfig .grupo-viaje:focus-visible{ border-bottom-color:var(--line-strong) }
/* La flecha, un punto más pequeña que en la lista de gastos porque el glifo es
   otro: aquí va el triángulo grande (▼/▶) para que se lea como una flecha y no
   como una rayita. El porqué, en `cabeceraGrupo()`. */
#cuerpoConfig .grupo-viaje .flecha{ font-size:10px }

/* ── Y EL ANCLAJE DE SCROLL, FUERA ──────────────────────────────
 *
 * ESTO ARREGLA «LOS GRUPOS SE ABREN HACIA ARRIBA», que es lo que se vio al
 * probarlos, y no es una manía: sin esta línea la pantalla hace justo eso.
 *
 * El navegador elige un nodo de referencia entre lo que se está viendo y, si
 * aparece contenido POR ENCIMA de él, mueve el scroll para que ese nodo no se
 * despegue del sitio. Es de agradecer cuando lo que crece es una imagen que
 * acaba de cargar; aquí es al revés: al desplegar un grupo, el navegador
 * compensa empujando hacia arriba la cabecera que acabas de tocar, así que los
 * campos aparecen donde estabas mirando y parece que el panel se abre al revés.
 *
 * SOLO LE PASA A ESTA PANTALLA, y por eso la regla no va en `.cuerpo`: las
 * demás se repintan enteras --`innerHTML` nuevo-- y ahí no hay ancla que
 * conservar. Configuración es la única que enseña y esconde un trozo EN SITIO,
 * porque repintarla vaciaría el campo de la contraseña.
 *
 * Con el anclaje quitado, la cabecera se queda donde está y los campos crecen
 * por debajo, que es lo que hace cualquier panel plegable. Donde no está
 * implementado (Safari) no hay nada que quitar, y la línea no molesta. */
#cuerpoConfig{ overflow-anchor:none }

/* El hueco de los campos de un grupo. `[hidden]` ya lo esconde el navegador,
   pero escrito aquí queda claro que este div se enseña y se esconde -- y no se
   lo puede llevar por delante un `display` que le caiga encima mañana. */
#cuerpoConfig .cfg-campos[hidden]{ display:none }

/* ── Los tres widgets del inicio (spec 025) ────────────────────────────
 *
 * TRES EN UNA FILA, y una de ellas doble, en un movil de 360 px: cada tarjeta
 * se queda en unos 110 px. La cifra es lo unico que no se puede cortar, asi
 * que manda ella y todo lo demas cede.
 *
 * `minmax(0, 1fr)` y no `1fr` a secas: el minimo por defecto de una columna de
 * grid es `auto`, o sea el contenido, asi que un importe largo ENSANCHA su
 * columna y saca la fila de la pantalla en vez de ajustarse. Con `minmax(0,1fr)`
 * las tres columnas miden lo mismo pase lo que pase.
 */
/* ── Y EL MINIMO SE MIDE EN `em`, QUE ES LO QUE CAMBIA CON LA LETRA ───
 *
 * Arriba está escrito el criterio: «la cifra es lo unico que no se puede
 * cortar». Pues se cortaba. En el Samsung del usuario --letra del sistema al
 * 150%-- el inicio enseñaba «41,3…» donde pone lo gastado este mes, que es
 * justo el numero por el que se abre esa pantalla.
 *
 * Y el motivo es fino: el ANCHO de la pantalla no cambia cuando se sube la
 * letra del sistema --siguen siendo 384 px de CSS-- pero el TEXTO sí. O sea
 * que ninguna regla escrita en px o en vw puede enterarse de que la letra ha
 * crecido: `repeat(3, ...)` reparte los mismos 114 px por tarjeta para una
 * cifra que ahora mide metro y medio de lo que medía.
 *
 * Y `em` TAMPOCO SE ENTERA, aunque lo parezca. Fue el primer intento y salio
 * mal; esto esta medido dentro del propio WebView del movil, no supuesto:
 *
 *     font-size del body      24px     <- el texto se DIBUJA a 24
 *     un `div` de 6.4em       102,4px  <- pero el DISEÑO calcula con 16
 *
 * O sea que el navegador pinta el texto un 50% mas grande que lo que la
 * maquetacion cree que mide, y `em` esta del lado de la maquetacion. Ninguna
 * unidad de CSS ve las dos cosas a la vez.
 *
 * Quien las ve es `--letra`, que la mide `nueva.js` al arrancar dividiendo una
 * por otra (ver `medirLaLetra`, con el porque entero). Vale 1 cuando no hay
 * nada raro, asi que en un navegador de escritorio esto es exactamente lo de
 * siempre.
 *
 * Y EL 6,4em ESTÁ MEDIDO, no elegido a ojo. El movil mas estrecho que este
 * fichero se toma en serio son los 360 px que dice el comentario de arriba:
 * menos los 14+14 del cuerpo quedan 332, menos dos huecos de 8 quedan 316, o
 * sea 105 px por tarjeta. El minimo tiene que caber ahi con la letra normal
 * --6,4em son 102 px-- o los moviles corrientes perderian la tercera columna,
 * que es lo que hoy funciona bien. Con la letra al 150% el `calc` lo sube a
 * 154 px, las tres no caben de ninguna manera y la fila se parte, que es
 * justo lo que se quiere. Si alguien toca este numero, que rehaga la cuenta.
 */
.resumen{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(calc(6.4em * var(--letra, 1)), 1fr));
  gap:8px;
  margin-bottom:12px;
}
.resumen[hidden]{display:none}

.widget{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 8px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); color:inherit;
  font:inherit; text-align:left;
  min-width:0;                 /* lo mismo que el minmax, para el contenido */
}
button.widget{cursor:pointer}
button.widget:active{background:var(--surface)}

/* La cifra. `clamp` para que en un movil estrecho encoja sola en vez de
   desbordar: 15px es el suelo en el que «12.345,67 €» todavia se lee. */
.widget-cifra{
  font-size:clamp(15px, 5.2vw, 22px);
  font-weight:700; letter-spacing:-.02em; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.widget-et{
  font-size:11.5px; font-weight:600; color:var(--ink-3);
  line-height:1.25;
}
/* Mientras no hay numero. Un hueco vacio parece un fallo; una raya, no. */
.widget-cifra.cargando{color:var(--ink-3); font-weight:600}

/* La tarjeta DOBLE: UNA caja con dos mitades separadas por una raya.
 *
 * No son dos tarjetas sueltas: dos cajas apiladas dejarian la tercera columna
 * mas alta que las otras dos y la fila quedaria escalonada. Y no es un boton
 * dentro de otro --HTML invalido, y en Android se comporta raro, que ya se
 * pago en la lista de proveedores--: la caja es un `div` y cada mitad es su
 * propio boton, porque llevan a sitios distintos (FR-005). */
.widget-doble{padding:0; overflow:hidden}
.widget-mitad{
  display:flex; flex-direction:column; gap:1px;
  width:100%; padding:8px;
  border:0; background:none; color:inherit; font:inherit; text-align:left;
  cursor:pointer; min-width:0;
}
.widget-mitad:active{background:var(--surface)}
.widget-mitad + .widget-mitad{border-top:1px solid var(--line)}
/* En la doble las cifras van un punto mas pequeñas: son dos en el hueco de
   una, y lo que no puede pasar es que se corten. */
.widget-mitad .widget-cifra{font-size:clamp(14px, 4.4vw, 19px)}

/* Y TUMBADA CUANDO LA FILA SE PARTE. Lo pone `colocarElResumen()` en
   `nueva.js`, que cuenta las columnas que ha resuelto la rejilla; el porque
   entero esta alli. Resumido: si no caben tres columnas, la doble se queda
   sola en su fila ocupando UNA --con un hueco vacio de 182 x 161 px al
   lado, medido en el movil del usuario con la letra al 150%-- y encima
   apilando sus dos mitades. Ocupando la fila entera y en horizontal pasa de
   161 px a 91, y el resumen de 249 a 178.
   La raya que las separa se muda de arriba al costado: sigue siendo la misma
   raya, la que dice que son dos cosas distintas --lo que TU no has enviado y
   lo que te deben ELLOS-- dentro de una sola caja. */
.resumen[data-doble="ancha"] .widget-doble{ grid-column:1 / -1; flex-direction:row }
.resumen[data-doble="ancha"] .widget-mitad{ flex:1 1 0 }
.resumen[data-doble="ancha"] .widget-mitad + .widget-mitad{
  border-top:0; border-left:1px solid var(--line);
}

/* Las tres columnas, igual de altas aunque una lleve dos cifras. */
.resumen{align-items:stretch}
.resumen>*{height:100%}

/* =====================================================================
   EL REGISTRO DE PETICIONES (spec 032)
   =====================================================================

   Va al final y con todo prefijado `reg-` a proposito: es una pantalla de
   administrador, la usan dos personas, y no tiene por que poder romper nada de
   lo que ve un empleado.

   POR QUE UN COLOR POR METODO. En una lista de doscientas filas todas iguales,
   el metodo es lo primero que se busca --«ensename los POST que fallan»-- y
   leerlo como texto obliga a parar en cada linea. Con color se encuentra de un
   barrido. Los colores son los de siempre en las herramientas de API (verde
   leer, ambar escribir, azul reemplazar, rojo borrar), asi que quien haya visto
   un Postman en su vida no tiene que aprender nada.

   Y EL CODIGO HTTP CON LA MISMA LOGICA: 2xx verde, 3xx gris, 4xx ambar, 5xx
   rojo. No es decoracion: es que «que ha fallado» se conteste sin leer. */

:root{
  --m-get:#0F7A66;  --m-get-bg:#DDF3ED;
  --m-post:#8A5A00; --m-post-bg:#FBEFD6;
  --m-put:#1D4E89;  --m-put-bg:#DEEAF8;
  --m-del:#9E2018;  --m-del-bg:#FBE4E2;
  --m-otro:#42585A; --m-otro-bg:#E4EDEC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --m-get:#1BE4BB;  --m-get-bg:#0B2E29;
    --m-post:#F2C46B; --m-post-bg:#31240C;
    --m-put:#7FB4F0;  --m-put-bg:#122437;
    --m-del:#F0796F;  --m-del-bg:#2C1614;
    --m-otro:#9DB3B2; --m-otro-bg:#173237;
  }
}
:root[data-theme="dark"]{
  --m-get:#1BE4BB;  --m-get-bg:#0B2E29;
  --m-post:#F2C46B; --m-post-bg:#31240C;
  --m-put:#7FB4F0;  --m-put-bg:#122437;
  --m-del:#F0796F;  --m-del-bg:#2C1614;
  --m-otro:#9DB3B2; --m-otro-bg:#173237;
}

/* ── Las dos pastillas: metodo y codigo ──────────────────────────────
   Ancho MINIMO fijo y centradas: asi los metodos quedan en columna aunque
   midan «GET» o «DELETE», y la lista se lee de arriba abajo por el color sin
   que el ojo tenga que reencontrar el margen en cada fila. */
.reg-met, .reg-cod{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.03em; line-height:1;
  padding:5px 8px; border-radius:6px; flex:0 0 auto;
}
.reg-met{ min-width:58px; }
.reg-cod{ min-width:38px; }

.reg-met.get   { color:var(--m-get);  background:var(--m-get-bg);  }
.reg-met.post  { color:var(--m-post); background:var(--m-post-bg); }
.reg-met.put   { color:var(--m-put);  background:var(--m-put-bg);  }
.reg-met.delete{ color:var(--m-del);  background:var(--m-del-bg);  }
.reg-met.otro  { color:var(--m-otro); background:var(--m-otro-bg); }

.reg-cod.ok  { color:var(--m-get);  background:var(--m-get-bg);  }
.reg-cod.info{ color:var(--m-otro); background:var(--m-otro-bg); }
.reg-cod.avi { color:var(--m-post); background:var(--m-post-bg); }
.reg-cod.mal { color:var(--m-del);  background:var(--m-del-bg);  }

/* ── La fila ─────────────────────────────────────────────────────────
   Una fila no es un aviso: es un renglon de una lista larga. Con `aviso-caja`
   --que es lo que habia-- doscientas filas eran doscientas cajas con borde y
   fondo, y eso convierte una lista en una pared. Aqui el separador es una raya
   y ya. */
/* `color:inherit` NO ES ADORNO: ESTO ES UN <button>.
   Sin el, el navegador le pone su color por defecto --negro-- y todo lo que
   lleve dentro y no diga el suyo lo hereda. En el tema oscuro eso es NEGRO
   SOBRE CASI NEGRO: medido en el movil del usuario, el correo de cada persona
   en «Lecturas» salia en rgb(0,0,0) sobre rgb(8,22,24), o sea 1,14:1 de
   contraste cuando el minimo legible es 4,5:1. No era que se leyera mal: es
   que no se veia.
   Se salvaban los textos que si declaran color --los pies con `--ink-3`, las
   pastillas-- y por eso la fila parecia medio bien y el fallo se leia como un
   problema de sitio. `font:inherit` sin `color:inherit` es la trampa: parece
   que ya se ha heredado todo. */
.reg-fila{
  display:block; width:100%; text-align:left; font:inherit; color:inherit;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:11px 2px; cursor:pointer;
}
.reg-fila:last-of-type{ border-bottom:0 }
.reg-fila:hover{ background:var(--surface-2) }
/* La que ha fallado se marca por el BORDE IZQUIERDO y no por el fondo: en una
   lista donde falla el 20 %, veinte fondos rojos se leen como una pantalla
   rota. Una raya al margen se cuenta de un vistazo sin gritar. */
.reg-fila.mal{ border-left:3px solid var(--m-del); padding-left:9px }
.reg-fila.abierta{ background:var(--surface-2) }

.reg-cab{ display:flex; align-items:center; gap:8px }
.reg-endpoint{
  font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto;
}
/* La hora a la derecha y en columna: «hace 3 h» para situarse y el reloj exacto
   debajo, que es lo que se compara con lo que cuenta el empleado por telefono. */
.reg-hora{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  flex:0 0 auto; font-size:11.5px; color:var(--ink-3); line-height:1.25;
}
.reg-hora .exacta{ font-family:var(--mono); font-size:10.5px; opacity:.8 }

.reg-meta{
  margin:5px 0 0 66px; font-size:12.5px; color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
}
.reg-meta .quien{ color:var(--ink-2); font-weight:600 }
.reg-meta .anon{ font-style:italic }
/* La suplantacion no es un adorno: sin esto, «un admin miro que ve Juan» queda
   escrito como «Juan uso la aplicacion». */
.reg-meta .suplanta{
  color:var(--m-put); background:var(--m-put-bg);
  padding:1px 6px; border-radius:5px; font-size:11.5px; font-weight:600;
}
.reg-meta .ms{ font-family:var(--mono) }
.reg-meta .lento{ color:var(--m-post); font-weight:700 }
.reg-fatal{
  color:var(--m-del); background:var(--m-del-bg);
  padding:1px 6px; border-radius:5px; font-size:11px; font-weight:700;
}
/* `display:block` no sobra: dentro de la fila son <span>, y a un elemento en
   linea el margen de arriba no le hace nada. */
.reg-error{ display:block; margin:5px 0 0 66px; font-size:13px; color:var(--ink-2) }
.reg-abrir{ display:block; margin:5px 0 0 66px; font-size:12px;
            color:var(--accent); font-weight:600 }

/* ── El detalle desplegado ───────────────────────────────────────────── */
.reg-detalle{
  margin:8px 0 4px 66px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.reg-detalle textarea{
  width:100%; font-family:var(--mono); font-size:12px; line-height:1.5;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:8px; background:var(--bg); color:var(--ink); resize:vertical;
}
.reg-detalle .por-que{ margin:0; color:var(--ink-2); font-size:13px }
.reg-detalle .por-que b{ color:var(--ink) }

/* ── El resumen de arriba ────────────────────────────────────────────
   Numeros grandes y nada mas. La pregunta que contesta --«¿que esta roto AHORA
   mismo?»-- se responde de un vistazo o no se responde: si hay que leer una
   frase, la pantalla se abre una vez y no se vuelve. */
.reg-resumen{
  display:flex; gap:10px; margin:0 0 12px; flex-wrap:wrap;
}
/* EL MINIMO DE LA TARJETA CUENTA CON LA LETRA DEL SISTEMA, como la rejilla
   del inicio (ver `--letra` en `nueva.js`). Con 90 px fijos, en el movil del
   usuario al 150% entraban TRES tarjetas por fila y dentro no cabia nada:
   «14,73 €» salia en dos renglones y «coste estimado» en otros dos, con lo que
   la tira medía 263 px. A 135 px de minimo entran dos por fila, la cifra va
   entera y la tira baja a 220. Con la letra normal son los 90 de siempre. */
.reg-dato{
  flex:1 1 calc(90px * var(--letra, 1)); padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line);
}
/* La de fallos de Registro es un <button> (lleva a Fallos): sin esto el
   navegador le pone su letra y centra el texto, y deja de parecerse a las otras
   dos tarjetas de la tira. */
button.reg-dato{ font:inherit; text-align:left; cursor:pointer; color:inherit }

/* LA PUERTA A OTRA PANTALLA (`App.puerta()` en nueva.js): la misma pinta que
   las entradas del menú de inicio, que es lo que era antes. Y el texto a la
   izquierda por lo mismo que allí: un <button> lo centra, y con la letra del
   sistema al 150% la frase parte y el segundo renglón se iba al medio. */
.btn.btn-puerta{
  width:100%; margin-bottom:10px; flex-direction:column; align-items:flex-start;
  text-align:left; gap:2px;
}
.btn-puerta .frase{ font-weight:500; font-size:13px; opacity:.8 }
.reg-dato.mal{ background:var(--m-del-bg); border-color:var(--m-del) }
.reg-dato.bien{ background:var(--m-get-bg); border-color:var(--m-get) }
.reg-dato .cifra{
  display:block; font-size:26px; font-weight:750; line-height:1.1; color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;              /* «14,73 €» no se parte entre el numero y el € */
}
.reg-dato.mal .cifra{ color:var(--m-del) }
.reg-dato.bien .cifra{ color:var(--m-get) }
.reg-dato .rotulo{
  display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3);
  font-weight:600; letter-spacing:.01em;
}

.reg-peores{ margin:0 0 12px }
.reg-peores .chip{ font-family:var(--mono); font-size:12.5px }

/* ── Los filtros ─────────────────────────────────────────────────────
   En rejilla, y CADA CAMPO CON SU ETIQUETA. Un `input type=date` suelto no dice
   si es el principio o el final del rango --en el movil ni siquiera enseña el
   marcador de posicion, solo «dd/mm/aaaa»--, asi que dos seguidos son una
   adivinanza. Lo dijo el usuario mirando la pantalla. */
/* Desde el 25/09/2026 van dentro de `.plegable`, que ya pone el borde y el
   fondo: con los suyos propios salia una caja dentro de otra. */
.reg-filtros{
  background:var(--surface-2);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
/* DOS COLUMNAS, no «las que quepan». Con `minmax(150px,1fr)` entraban tres y
   «Hasta el día» se quedaba solo en una fila para él, separado de «Desde el
   día» — que es justo el par que hay que leer junto. A 190px caben dos, y
   entonces las parejas salen solas: los dos textos arriba, las dos fechas
   debajo. En un móvil estrecho cae a una columna, que también está bien. */
.reg-rejilla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}
.reg-filtros .rotulo{
  display:block; font-size:12px; font-weight:650; color:var(--ink-2);
  margin:0 0 4px;
}
.reg-filtros input{
  width:100%; font:inherit; font-size:14px; padding:9px 10px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); min-height:42px;
}
.reg-filtros input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.reg-mandos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.reg-mandos .chip{ flex:0 0 auto }
.reg-paginas{ display:flex; gap:8px; margin-top:12px }


/* =========================================================================
   LECTURAS: QUE CUESTA LEER, Y DE QUIEN  (spec 035)
   =========================================================================

   Reutiliza casi todo del bloque del REGISTRO de arriba --`reg-fila`,
   `reg-detalle`, `reg-resumen`, `reg-cod`-- porque son la misma clase de
   pantalla: una lista larga de administrador con numeros. Aqui abajo solo esta
   lo que no existia. */

/* La barra del reparto. NO es `.barra`, que vive dentro de una fila flex de
   «Gasto de la empresa» con `flex:1 1 auto` y aqui saldria de un pixel: esta va
   suelta, a lo ancho de la fila. */
/* ── EL CORREO Y EL IMPORTE, CADA UNO CON SU SITIO ─────────────────────
   Los dos eran `flex:0 1 auto` y se peleaban por los 352 px. Medido en el
   movil del usuario al 150%: «ifernandez@grupositelec.es» pide 303 px y el
   importe se quedaba con 47, o sea que «7,25 €» salia en DOS renglones --el
   € debajo del numero-- y aun asi la cabecera se iba a 360 px y desbordaba la
   fila. Las dos cosas ilegibles a la vez.
   El importe es corto y no se toca (`0 0 auto` y `nowrap`); el correo se queda
   con lo que sobra y, si no cabe, PARTE --`min-width:0` es lo que se lo
   permite, que si no una direccion es una palabra suelta que no se puede
   romper--. No cuesta alto: la cabecera ya medía 70 px por culpa del importe
   partido, asi que lo que antes era un importe roto ahora es la segunda linea
   del correo.
   SOLO EN ESTA PANTALLA. `.reg-cab` lo comparte el Registro de peticiones, y
   alli los hijos son `.reg-endpoint` y `.reg-hora`, que tienen sus propias
   reglas: un `.reg-cab > span` a secas se las pisaria. */
#cuerpoLecturas .reg-cab{ align-items:flex-start }
#cuerpoLecturas .reg-cab > b{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere }
#cuerpoLecturas .reg-cab > span{ flex:0 0 auto; white-space:nowrap }

.lec-barra{
  height:6px; margin:6px 0 0; border-radius:999px;
  background:var(--surface-2); overflow:hidden;
}
.lec-barra>span{
  display:block; height:100%; border-radius:999px; background:var(--accent);
  /* Un minimo visible: quien ha gastado poco tiene que verse que ha gastado
     algo. Una barra de cero pixeles y una de nada se leen igual. */
  min-width:2px;
}

/* El titulillo que separa «Por persona» de «Por modelo». Son dos respuestas a
   dos preguntas distintas y sin separarlas se leen como una tabla larga. */
.lec-sub{
  font-size:14px; margin:20px 0 2px; color:var(--ink);
}
.lec-sub:first-child{ margin-top:6px }

/* La tarjeta de un modelo. No es `reg-fila` porque NO se abre: llevaria
   `cursor:pointer` y prometeria un toque que no hace nada. */
.lec-mod{
  padding:11px 2px; border-bottom:1px solid var(--line);
}
.lec-mod:last-of-type{ border-bottom:0 }

/* Una lectura suelta dentro del detalle de una persona. Mas apretada que una
   fila de la lista: son doscientas y se leen en vertical. */
.lec-fila{
  padding:7px 0; border-bottom:1px dashed var(--line);
  font-size:13px;
}
.lec-fila:last-of-type{ border-bottom:0 }
.lec-fila .avi{ color:var(--m-post); font-weight:600 }
.lec-fila .mal{ color:var(--m-del);  font-weight:600 }

/* La etiquetita de «relectura», «cola del servidor» o «despliegue». Dice de
   donde viene una lectura sin gastar una columna en ello. */
.chip-mini{
  display:inline-block; padding:1px 6px; border-radius:5px;
  font-size:10.5px; font-weight:600; vertical-align:1px;
  color:var(--m-otro); background:var(--m-otro-bg);
}

/* ── EL TROZO DEL TICKET DONDE CASO LA BUSQUEDA (spec 037) ───────────────
 *
 * Va debajo del proveedor y de la fecha, dentro de la misma linea del gasto.
 * Monoespaciada porque es una copia literal de un papel de caja: las columnas
 * de importes del ticket se leen asi, y en proporcional se descolocan. Usa
 * `--mono`, que es la del proyecto.
 *
 * Y en UNA linea con puntos suspensivos: el servidor manda ~120 caracteres,
 * pero en una pantalla estrecha eso son tres renglones por gasto, y quince
 * resultados llenarian la pantalla de papel. Con `nowrap` cada gasto sigue
 * ocupando lo que ocupaba, que es lo que mantiene la lista siendo un indice.
 */
.trozo-casado{
  display:block;
  margin-top:4px;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.35;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Lo buscado, marcado. Se pinta a mano y no se deja el `mark` de serie: el
   amarillo del navegador no se entera del tema y en modo oscuro deja texto
   negro sobre amarillo chillon. Con `--accent-soft` y `--accent` va a juego, y
   cambia solo cuando cambia el tema. */
.trozo-casado mark{
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid var(--accent-line);
  border-radius:4px;
  padding:0 2px;
  font-weight:700;
}

/* Cuando caso por un campo fijo y NO por el papel. No se fabrica un trozo de
   ticket que no existe: se dice cual fue y se acabo. Esos campos ya estan
   pintados en la propia linea, asi que nombrarlos basta. */
.trozo-campo{
  display:block;
  margin-top:3px;
  font-style:italic;
}

/* ── Pagos sin ticket ──────────────────────────────────────────────────
 *
 * SIN PLIEGUE, al contrario que la papelera. Alli la ficha son seis renglones y
 * se busca uno entre veinte, asi que plegar gana sitio; aqui cada fila son tres
 * datos y la lista deberia estar casi siempre vacia. Plegar seria un toque para
 * esconder algo que ya cabe.
 *
 * El porque de cada decision, en pantalla-avisos.js.
 */
.avi-filtros{display:flex;gap:8px;margin-bottom:12px}

/* LA LISTA VACIA ES UNA BUENA NOTICIA y se pinta como una frase, no como un
   error: en negro, del tamanio del texto normal y sin icono de aviso. */
.avi-vacio{font-size:15px;font-weight:650;margin:18px 0 4px}

.avi-tarj{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); margin-bottom:8px; padding:11px 13px;
}
/* Lo ya cerrado se queda, pero apagado: esta en «Todo» para poder deshacer, no
   para competir por la atencion con lo que de verdad falta. */
.avi-tarj.cerrada{background:var(--surface-2);opacity:.72}

.avi-cab{display:flex;align-items:baseline;gap:10px}
.avi-quien{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
/* El comercio puede ser larguisimo: se corta con puntos antes que empujar el
   importe fuera de la tarjeta. */
.avi-quien b{
  font-size:14.5px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* EL IMPORTE MANDA. Aqui no se viene a leer, se viene a reconocer: «los 26,25
   de La Salve» se identifica por el numero antes que por el nombre. Por eso va
   mas grande que el comercio -- justo al revés que en la papelera, donde el que
   manda es el motivo. Y no encoge nunca. */
.avi-total{
  flex:0 0 auto; font-size:17px; font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* EL TEXTO CRUDO DEL BANCO, y solo sale cuando no se ha sabido leer el pago.
   En monoespaciada y con el fondo hundido para que se lea como lo que es --lo
   que decia la notificacion, palabra por palabra-- y no como un dato de la
   aplicacion. */
.avi-crudo{
  margin:9px 0 0; padding:8px 10px; border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--ink-2);
  font-family:var(--mono); font-size:12.5px; line-height:1.45;
}

/* POR QUE ESTE AVISO NO ES UN GASTO. Va pegado a la cabecera del pago y antes
   de los mandos: primero que pasa, luego que hacer. En gris y sin borde --no es
   un error, es una explicacion-- y con el `hint` de dentro todavia mas flojo,
   que es la coletilla de «enseña este texto a quien lleva la aplicacion». */
.avi-porque{
  margin:8px 0 0; color:var(--ink-2); font-size:13px; line-height:1.5;
}
.avi-porque b{color:var(--ink-1);font-weight:650}
.avi-porque .hint{display:inline}

/* ── LOS PAGOS QUE LLEVAN DEMASIADO SIN SU FOTO ──────────────────────
   Un bloque aparte y ARRIBA DEL TODO, con el borde marcado, porque es lo unico
   de esta pantalla que se puede perder de verdad: un aviso por revisar espera
   sin coste, y un ticket de hace veinte dias ya casi no se puede pedir.
   Sin rojo y sin iconos de alarma: quien pago sabe mejor que la aplicacion si
   ese ticket todavia se consigue, y un bloque que grita se aprende a saltar. */
.avi-esperando{
  border:1px solid var(--line-fuerte, var(--line)); border-radius:var(--radius-sm);
  background:var(--surface-2); padding:12px 13px; margin-bottom:14px;
}
.avi-esperando > b{font-size:14.5px;display:block}
.avi-esperando > .hint{margin:4px 0 0}

/* Cada gasto en una linea: nombre e importe como en las tarjetas de arriba, y
   el boton al final. `flex-wrap` porque en un movil estrecho el boton baja
   solo en vez de aplastar el nombre del comercio. */
.avi-espera-fila{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
}
.avi-espera-fila .chip{margin-top:0;flex:0 0 auto}

/* Los mandos al pie y en fila, como en la papelera: se ve donde acaba cada
   pago, y lo que se viene a hacer --la foto-- cae a la derecha del todo, en el
   lado del pulgar. */
.avi-mandos{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-end; gap:8px; margin-top:12px;
}
.avi-mandos .chip{margin-top:0}
.avi-mandos > .hint{margin-right:auto}

/* El boton de hacer la foto: el unico con peso de toda la fila. No es `.chip
   .puesto` --esa es la pastilla ELEGIDA de un filtro, y aqui no hay nada
   elegido-- pero lleva el mismo color de marca, que es el que la aplicacion usa
   para «esto es lo que has venido a hacer». */
.avi-foto{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  font-weight:700;
}

/* Las filas del resumen de la bandeja. Son botones enteros --toda la linea es
   la diana, no la flecha de doce pixeles-- y llevan el importe delante porque
   es por lo que se reconoce el pago. El nombre se corta con puntos antes que
   empujar la flecha fuera. */
.avi-fila{
  display:flex; align-items:baseline; gap:9px; width:100%;
  font:inherit; font-size:13.5px; color:inherit; text-align:left; cursor:pointer;
  background:none; border:0; border-top:1px solid rgba(127,127,127,.25);
  padding:9px 2px; margin:0;
}
.avi-fila:first-of-type{margin-top:8px}
.avi-fila > span:nth-child(2){
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.avi-fila-eur{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.avi-fila-mas{flex:0 0 auto;color:var(--ink-3);font-size:16px;line-height:1}

/* ── LAS DOS PASTILLAS DE UN GASTO QUE VIENE DEL BANCO (spec 041) ────
 *
 * `pill-sin-foto` va DESPUES de `pill-borrador` en el fichero, y por eso gana:
 * las dos van en el mismo elemento y la de estado sola dejaria un gris apagado
 * --el de «sin leer», que quiere decir «espera, ya viene»--. Aqui no viene
 * nada solo: hace falta que alguien haga la foto, y eso se pide en el color de
 * la aplicacion y no en el de lo que ya esta resuelto.
 *
 * `pill-banco` es lo contrario: apagada a proposito. No es algo que hacer, es
 * de donde sale el dato, y una fila con dos pastillas encendidas no tiene
 * ninguna. */
.pill-sin-foto{
  background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line);
}
.pill-banco{
  background:var(--surface-2); color:var(--ink-2); border-color:var(--line);
  display:inline-flex; align-items:center;
}

/* ── LA FILA DE «FACTURAS RECIBIDAS», QUE SE ABRE (v165) ─────────────
 *
 * Es la `.item` de «Mis gastos» --misma fila, mismo `item-txt`/`item-der`-- con
 * tres cosas propias, y por eso lleva su clase en vez de tocar `.item`: allí
 * las filas NAVEGAN a otra pantalla, y aquí se despliegan en su sitio.
 *
 * 1. LA FLECHA, que es lo que dice que la fila se abre. Sin ella no hay forma
 *    de saberlo: se prueba tocando, y lo que se toca de una lista en esta
 *    aplicación normalmente cambia de pantalla.
 *
 * 2. «VER EL DOCUMENTO», MÁS BAJO. Los 42 px de `.chip` son el tamaño de lo
 *    que se toca en una caja de aviso, y dentro de una fila de lista mandan
 *    sobre el alto de la fila ENTERA: la lista corta salía con filas de 90 px,
 *    que es justo lo que se venía a arreglar. Con 34 px sigue habiendo diana de
 *    sobra para un dedo, y la fila mide lo que mide su texto.
 *
 * 3. LA PASTILLA Y EL ENLACE EN LÍNEA, no apilados. `item-der` es una columna
 *    porque en «Mis gastos» lleva el importe y debajo el estado; aquí son dos
 *    cosas del mismo tamaño y una encima de otra suma alto por nada. Con
 *    `flex-wrap` para el móvil estrecho: cuando no caben, el enlace baja solo
 *    en vez de aplastar el nombre del fichero.
 */
.item-recibido > .flecha{
  color:var(--ink-3); font-size:11px; flex:0 0 auto;
}
.item-recibido .item-der{
  flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:flex-end;
}
.item-recibido .chip{
  min-height:34px; padding:6px 12px; font-size:13px;
}
/* Y LA FICHA, PEGADA A SU FILA. `.aviso-caja` trae 12 px de hueco por debajo
   --va suelta dentro de una pantalla-- y `.item` otros 9 por arriba, así que
   entre la fila y su propio detalle quedaba más aire que entre dos documentos
   distintos: se leía como si la ficha fuera de la fila de abajo. */
.item-recibido + .aviso-caja{
  margin-top:-4px; margin-bottom:14px;
}

/* ── EL FILTRO POR ESTADO (spec 043) ──────────────────────────────────
   Pastillas `.chip` y no `.pill`: la `.pill` es la INSIGNIA que cuenta por
   dónde va un gasto --no se toca, solo se lee-- y la `.chip` es el botón de
   42 px pensado para pulsarse con el dedo mientras se sujeta un ticket. Usar
   la insignia como botón enseñaría que las insignias de las tarjetas también
   se pulsan, y no.

   SE PARTEN, NO SE ARRASTRAN, y esto ESTABA ESCRITO ANTES que la spec 043:
   `#filtrosGastos` lo decidió el 14/09/2026 mirando la pantalla con la letra
   del sistema al 150%. Con `overflow-x:auto` el último filtro queda cortado
   contra el borde y NADA DICE que la fila se pueda mover, así que es un filtro
   que existe sin que se sepa.

   Aquí se probó primero deslizando --los nombres son largos, «con su factura,
   listo para enviar»-- y se vio en vivo el mismo defecto: con la pastilla
   puesta fuera de pantalla, la bandeja sale recortada y el motivo está a un
   arrastre que nadie va a dar, porque no sabe que hay algo ahí. Se corrigió a
   mano llevando la pastilla a la vista, que es tapar con código un problema que
   el `wrap` no tiene.

   El precio es un renglón más cuando hay cinco estados. Se paga.

   `flex:0 0 auto` en el contenedor: como el buscador de al lado, no crece y le
   deja a la lista todo el alto que sobra. */
.filtro-estados{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  flex:0 0 auto; padding:2px 0 8px;
}

/* La cuenta, dentro de la pastilla y más floja que el nombre: lo que se busca
   es el estado, y el número es el dato de apoyo. En la pastilla puesta hereda
   el color del acento, que ya contrasta. */
.filtro-estados .cuantos{
  opacity:.65; font-weight:700; margin-left:5px; font-variant-numeric:tabular-nums;
}

/* ── LOS FILTROS PLEGADOS (28/09/2026, ver `filtrosAbiertos` en
   pantalla-lista.js) ──────────────────────────────────────────────────
   En el móvil, un renglón: el botón que dice lo que está puesto. Las
   pastillas van debajo, a todo lo ancho, solo mientras están abiertas.
   La flecha es la misma del desplegable del tipo. */
.filtro-plegar{ display:inline-flex; align-items:center; gap:8px; max-width:100% }
.filtro-plegar[aria-expanded="true"] .chip-tipo-flecha{ transform:rotate(-135deg); margin-top:3px }
.filtro-pastillas{ display:none; flex:1 1 100%; flex-wrap:wrap; gap:6px; align-items:center }
.filtro-pastillas.abiertas{ display:flex }

/* En ancho caben en una fila: el botón sobra y las pastillas se ven siempre,
   como antes. 720 px, el mismo corte que Movimientos. */
@media (min-width: 720px){
  .filtro-plegar{ display:none }
  .filtro-pastillas{ display:flex; flex:0 1 auto }
}

/* ── LA CASILLA DE «ESTE SÍ» (spec 043) ───────────────────────────────
   Lo pidió el usuario: «tengo 5 para enviar pero solo quiero enviar 2».

   ── VA ENCIMA DE LA TARJETA, NO AL LADO ────────────────────────────

   La primera versión la ponía en la fila, a la izquierda, y el usuario la vio y
   dijo las dos cosas que estaban mal: «los checkbox son enormes, además de que
   hace que la tarjeta sea más pequeña».

   Las dos salían del mismo sitio: EN LA FILA, LA CASILLA OCUPA SITIO. Metía
   52 px de sangría, o sea que la tarjeta perdía 52 px de ancho -- y como solo
   la llevan los enviables, las demás quedaban descolgadas a la izquierda y la
   lista se leía como un fallo de pintado, no como «este se puede elegir».

   Fuera del flujo no pasa ninguna de las dos: la tarjeta conserva su ancho
   entero, todas las filas empiezan en la misma raya, y la casilla se apoya en
   el hueco que la fila de pastillas deja a la derecha -- que está vacío en
   todas las tarjetas, porque las pastillas se alinean a la izquierda.

   36 px Y NO 44. En la fila hacían falta 44 porque estaban pegadas al botón que
   abre la ficha y un dedo gordo no distingue; aquí la casilla vive en una
   esquina vacía, así que puede ser más pequeña sin que un toque haga lo
   contrario de lo que se quería. Y 36 sigue estando por encima de lo que se
   puede tocar con guante.

   `padding-right` EN LA FILA DE PASTILLAS Y NO EN LA TARJETA: así las pastillas
   parten antes de llegar a la casilla, y el importe --que va arriba y alineado
   a la derecha-- no se mueve ni un píxel. Poniéndolo en la tarjeta entera, el
   importe se correría 44 px y volveríamos a encoger lo que se quería salvar. */
.item-marcable{ position:relative; display:block; margin-bottom:9px }
.item-marcable > .item{ margin-bottom:0 }
.item-marcable .item-chapas{ padding-right:44px }

/* ── `.marca-enviar` Y NO `.marca`, Y ESTO ROMPIO LA CABECERA ──────────
   Se llamaba `.marca` a secas, y `.marca` YA EXISTIA: es el TITULO de la
   cabecera (`<span class="marca" id="titulo">`), que se estila en
   `.cabecera .marca` unas dos mil lineas mas arriba.

   Esa regla gana en las propiedades que declara --tiene mas especificidad-- asi
   que el `font-size` y el `flex:1` del titulo seguian bien. Pero las que solo
   estaban aqui --`position:absolute`, `width:36px`, `height:36px`, el borde--
   se le aplicaron SIN QUE NADA LAS DISPUTARA: el titulo de la aplicacion se
   convirtio en un cuadradito absoluto pegado a una esquina, y por eso
   desaparecio de la cabecera y la campana y el boton de salir se corrieron a la
   izquierda a ocupar su hueco.

   Lo vio el usuario. Y estuvo DOS COMMITS a la vista en mis propias capturas,
   pintado como una caja con borde en mitad de la cabecera: lo mire y lo lei
   como un campo de texto de la pantalla, no como el titulo roto.

   La leccion es de nombres, no de CSS: en una hoja de 2.600 lineas y sin
   ambitos, una clase de una palabra corriente --`marca`, `item`, `fila`-- ya
   esta cogida. Se comprueba antes de escribirla. */
.marca-enviar{
  position:absolute; right:10px; bottom:10px;
  width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font:inherit; font-size:16px; font-weight:800; line-height:1;
  background:var(--surface); color:var(--accent);
  border:2px solid var(--line-strong); border-radius:9px;
  cursor:pointer;
}
.marca-enviar.puesta{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}
.marca-enviar:active{background:var(--surface-2)}
.marca-enviar.puesta:active{background:var(--accent)}


/* ═══════════════════════════════════════════════════════════════════
   MOVIMIENTOS DE LA TARJETA (spec 044)
   ═══════════════════════════════════════════════════════════════════

   «He hecho todos estos; me faltan estos», mes a mes.

   POR QUE NO REUSA `.avi-*`. Aquella lista se pinta para que este casi
   siempre VACIA --un pago llega, se fotografia, desaparece--. Esta se pinta
   para una cuenta de un mes entero: el primer extracto que se midio traia 263
   movimientos, y una lista de 263 tarjetas como las de alli es un scroll sin
   forma. Aqui manda el resumen y la fila es mas plana.

   El porque de cada decision, en pantalla-movimientos.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── El selector de mes ─────────────────────────────────────────── */
.mov-mes{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.mov-mes-nombre{font-size:15.5px;font-weight:650;min-width:11ch;text-align:center}

/* ── El resumen, que es a lo que se viene ───────────────────────── */
.mov-resumen{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); padding:14px 15px; margin-bottom:16px;
}
/* UN SOLO NUMERO EN GRANDE: el que se puede bajar. Los otros tres estan para
   que la cuenta cuadre con el extracto del banco, no para competir con este. */
.mov-grande{font-size:16px;line-height:1.3;margin-bottom:6px}
.mov-grande strong{font-size:26px;font-variant-numeric:tabular-nums;margin-right:2px}
.mov-alerta strong{color:var(--danger)}
.mov-bien strong{color:var(--ok)}
.mov-flojo{color:var(--ink-3);font-size:13px;line-height:1.5}

/* ── El interruptor de columna, solo en estrecho ─────────────────── */
.mov-cual{display:flex;gap:8px;margin-bottom:12px}
.mov-cual .chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ── Las dos columnas ────────────────────────────────────────────── */
/* EN ESTRECHO SE VE UNA, la que diga el interruptor. Apilarlas sin mas dejaria
   «Hechos» debajo de una lista de treinta pendientes, o sea invisible; y
   ensenar las dos a la vez en 360 px es leer dos veces el mismo scroll. */
.mov-cols{display:block}
.mov-cols .mov-col{display:none}
.mov-ve-pendientes .mov-col:first-child{display:block}
.mov-ve-hechos    .mov-col:last-child{display:block}

.mov-tit{font-size:14px;font-weight:700;margin:0 0 10px;display:flex;gap:8px;align-items:baseline}
.mov-n{color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.mov-vacio{color:var(--ink-3);font-size:14px;margin:0 0 8px}

/* ── Cada movimiento ─────────────────────────────────────────────── */
.mov{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); margin-bottom:8px; padding:10px 12px;
}
/* LO CERRADO SE QUEDA, PERO APAGADO. Esconderlo haria que la suma del mes no
   cuadrase con el papel del banco, y una cuenta que no cuadra no la usa nadie.
   Mismo criterio que `.avi-tarj.cerrada`. */
.mov-cerrado{background:var(--surface-2);opacity:.7}
/* Y lo que hay que mirar lleva una raya al lado: es lo unico de esta pantalla
   que pide una DECISION, no una foto. */
.mov-a_mirar{border-left:3px solid var(--accent)}

.mov-cab{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
/* EL IMPORTE MANDA, igual que en «Pagos sin ticket» y por lo mismo: aqui no se
   viene a leer, se viene a reconocer. Y `tabular-nums` para que las columnas
   de cifras queden a plomo, que es lo que permite sumarlas de un vistazo. */
.mov-importe{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.mov-importe.abono{color:var(--ok)}
.mov-dia{color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums;flex:0 0 auto}

/* El comercio viene CRUDO del banco --«ANTHROPIC IRELAND        +1415»-- asi
   que se corta con puntos antes que romper la caja en tres renglones. */
.mov-comercio{
  font-size:13.5px;color:var(--ink-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mov-pie{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;align-items:center}
.mov-pie.mov-flojo{margin-top:6px}

/* «¿ES ESTE?» (spec 052): la pregunta de un pago que se parece a un ticket que
   ya está subido. Con el borde de color de «a mirar», que es la misma clase de
   duda, y el ticket propuesto como una fila que se puede pulsar para abrirlo.
   Los dos botones se reparten el ancho y PUEDEN PARTIR EL TEXTO: `.btn-mini`
   corta con `nowrap`, y en un móvil con la letra grande «No, son distintos» se
   quedaba a medias. */
.mov-pregunta{margin-top:10px;padding:10px 12px;border-left:3px solid var(--accent);
  background:var(--surface-2);border-radius:var(--radius-sm)}
.mov-pregunta-texto{font-size:14px;line-height:1.45;font-weight:600}
.mov-propuesto{appearance:none;-webkit-appearance:none;font:inherit;font-size:13.5px;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:7px 10px;margin-top:8px;width:100%;
  text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-pregunta .mov-pie > .btn{flex:1 1 0;white-space:normal;line-height:1.25}
/* «A mirar» (spec 052, Historia 2): cada candidato con su «Es este» al lado. */
.mov-candidato{display:flex;gap:8px;align-items:center;margin-top:8px}
.mov-candidato .mov-propuesto{margin-top:0;flex:1 1 auto;min-width:0}
.mov-candidato .btn{flex:0 0 auto}

/* ── Y EN ANCHO, LAS DOS A LA VEZ ────────────────────────────────── */
/* 720 px es donde dos columnas de fichas dejan de apretarse. Por encima el
   interruptor sobra: ensenarlo seria ofrecer esconder media pantalla que ya
   cabe entera. */
@media (min-width: 720px){
  .mov-cual{display:none}
  .mov-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .mov-cols .mov-col{display:block}
}

/* LA TARJETA DE LOS TICKETS DE LA TARJETA (spec 044) OCUPA LA FILA ENTERA.
   No es un cuarto widget de la rejilla: aparece solo cuando hay algo que
   traer --la mayor parte del tiempo no esta-- y meterla como columna dejaria
   la fila de tres desparejada justo los dias en que si sale. Ancha y debajo
   se lee como lo que es: un aviso, no una cifra mas del panel. */
.widget-ancho{grid-column:1 / -1}
.widget-ancho .widget-cifra{color:var(--danger)}

/* La caja de filtrar por comercio, entre el resumen y las columnas: se busca
   DENTRO de lo que ya se esta mirando, no en toda la aplicacion, y por eso va
   pegada a la lista y no arriba del todo. */
.mov-busca{display:block;margin-bottom:12px}

/* ── CERRAR: «de aqui ya no traigo mas tickets» (spec 044, US4) ──────
 *
 * PLEGADA Y PEGADA AL BUSCADOR desde el 22/09/2026. Estaba al FINAL de la
 * pantalla --detras de la lista entera y del panel de reglas-- porque se
 * decide mirando lo que falta; pero en un mes con cuarenta movimientos eso
 * son tres pantallas de scroll hasta unos campos de fecha que nadie iba a
 * buscar. Lo dijo el usuario mirandolo: «que aparezcan los filtros abajo del
 * todo es algo horrible».
 *
 * Lo que resuelve la mudanza sin perder aquello: plegada mide UNA LINEA, asi
 * que no le quita sitio a la lista, y se abre sola al escribir un comercio --
 * que es justo el momento en que aparece el boton de «no pedir los de X». */
/* ── LA CAJA PLEGABLE, Y LA USAN DOS PANTALLAS ───────────────────────
   «Movimientos de la tarjeta» y la ficha del proveedor deciden EXACTAMENTE la
   misma cosa --de este comercio no se pide ticket-- y hasta el 23/09/2026 una
   iba plegada y la otra desplegada y con otro aspecto. Lo dijo el usuario:
   «copia el estilo para que sean iguales».
   Se llamaba `.mov-cerrar-caja`, y ese prefijo mentia en cuanto lo usara otra
   pantalla: dos copias del mismo CSS es la forma segura de que dentro de un
   mes ya no se parezcan. */
.plegable{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); margin:0 0 14px;
}
/* La cabecera: el triangulo propio en vez del del navegador, que con
   `display:flex` no se pinta en Chrome y ademas no se puede colocar. */
.plegable > summary{
  cursor:pointer; padding:10px 12px; font-size:14px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  list-style:none;
}
.plegable > summary::-webkit-details-marker{display:none}
.plegable[open] > summary{border-bottom:1px solid var(--line)}
.plegable-flecha{
  display:inline-block; color:var(--ink-3); font-size:12px;
  transition:transform .15s ease;
}
.plegable[open] .plegable-flecha{transform:rotate(90deg)}
.plegable-tit{font-weight:600}
/* Lo elegido, a la derecha y en flojo: con la caja cerrada es la unica
   forma de saber que hay algo puesto dentro. */
.plegable-estado{margin-left:auto;font-size:13px;color:var(--ink-3)}
/* El cuerpo. EN BLOQUE Y NO EN FILA: `display:flex` dejaba el «¿para quien?»,
   sus botones y el aviso TODO EN LA MISMA LINEA. Se vio en una captura. */
.plegable-cuerpo{display:block;padding:12px 14px 14px;margin:0}

/* La vista previa antes de confirmar. Enmarcada y con el color de aviso
   porque lo que se va a hacer no se ve luego en ninguna parte: los
   movimientos no desaparecen, solo dejan de pedir su ticket. */
.mov-propuesta{
  margin-top:18px; padding:13px 14px;
  border:1px solid var(--danger); border-radius:var(--radius-sm);
  background:var(--surface);
}
.mov-propuesta p{margin:0 0 8px;font-size:14px;line-height:1.5}
.mov-ejemplos{margin:0 0 4px;padding-left:18px;font-size:13px;line-height:1.7}
.mov-ejemplos li{color:var(--ink-2)}

/* Lo que uno tiene cerrado. Una decision que no se puede mirar ni deshacer no
   es una decision: a los dos meses nadie se acuerda de por que de ese comercio
   no le piden nunca el ticket. */
.mov-cierres{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.mov-cierre{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;font-size:13.5px;
}
.mov-cierre + .mov-cierre{border-top:1px solid var(--line)}
/* La cuenta de cada regla, a la derecha y sin encogerse (spec 045). Una regla
   sin su numero no se puede auditar, asi que es lo ultimo que puede partirse:
   con `flex` por defecto, «217 movimientos» se parte en dos lineas en un movil
   estrecho antes que el texto largo de la izquierda, que si puede. */
.mov-cierre > .mov-flojo{flex:0 0 auto;text-align:right;white-space:nowrap}
/* El bloque de administracion de Movimientos: las tarjetas que nadie ha dado
   de alta y los listados que han llegado (spec 044, T032).

   SEPARADO CON UN BORDE Y NO CON UN COLOR DE AVISO. No es una alerta --lo que
   hay debajo es trabajo de administracion, no un fallo-- pero tampoco es una
   seccion mas: quien no sea administracion no lo ve nunca, asi que tiene que
   leerse como «esta parte es de otra persona». */
.mov-admin{margin-top:26px;padding-top:16px;border-top:2px solid var(--line)}
.mov-admin-tit{
  margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.mov-sindueno{
  border:1px solid var(--danger);border-radius:10px;
  padding:12px 14px;font-size:14px;line-height:1.5;
}
.mov-sindueno ul{margin:8px 0 0;padding-left:20px}
.mov-sindueno li{line-height:1.7}
.mov-sindueno .hint{margin:10px 0 0}
.mov-extractos{margin-top:18px}
.mov-extractos h4{margin:0 0 8px;font-size:14px}
.mov-extracto{padding:10px 0}
.mov-extracto + .mov-extracto{border-top:1px solid var(--line)}
.mov-extracto-cab{font-size:14px;display:flex;gap:8px;flex-wrap:wrap}
/* El enlace de bajar es un `a` y no un `button`: lo que hace es traer un
   fichero, y un `a download` lo resuelve el navegador solo --con su barra de
   descargas y su reintento-- sin que esta pantalla tenga que saber nada. */
.mov-extracto a.chip{margin-top:8px;display:inline-block;text-decoration:none}

/* ── MARCAR UN PROVEEDOR: EL PERIODO Y EL BOTON (spec 045, v41) ────────
 *
 * El bloque «Facturas de este proveedor» es lo PRIMERO de la ficha desde el
 * 22/09/2026, y lleva dentro todo lo que hace falta para decidir: como lo
 * escribe el banco, desde y hasta cuando, lo que va a pasar, y el boton.
 *
 * A ANCHO DE TELEFONO los tres campos se apilan solos: `flex-wrap` y un
 * `flex-basis` de 150 px hacen que en un movil estrecho vayan uno debajo de
 * otro y en cuanto hay sitio se pongan en fila. Sin ancho fijo en ninguno: un
 * `<input type=date>` con la letra del sistema al 150% mide mas de lo que uno
 * cree, y es lo que empuja al de al lado fuera de la pantalla. */
.prov-periodo{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.prov-periodo > .hint{flex:1 1 100%;margin:0 0 2px}
.prov-periodo .campo{flex:1 1 150px;min-width:140px;margin:0}

/* LO QUE VA A PASAR, DICHO ANTES DE PULSAR.
 *
 * Con la raya roja de `--danger` a la izquierda y no con el recuadro entero:
 * esto no es un error, es la consecuencia -- pero es lo unico de la aplicacion
 * que decide por gente que no esta delante, y sin fechas es para siempre. El
 * color de texto se queda en `--ink-2` a proposito: rojo sobre rojo suave se
 * lee como «algo ha fallado». */
.prov-aviso-marca{
  margin:8px 0 10px;padding:9px 12px;font-size:13.5px;line-height:1.5;
  border-left:3px solid var(--danger);background:var(--surface-2);color:var(--ink-2);
}
.prov-aviso-marca b{color:var(--ink)}

/* LA PASTILLA QUE HACE LA COSA, al lado de la que solo mira.
 *
 * `--danger-soft` de fondo con `--danger` de letra, que es la pareja que ya
 * usan `.btn-peligro` y `.pill-error`: es la unica que se lee en los dos temas
 * -- `color:#fff` sobre `--danger` se pierde en el oscuro, donde `--danger` es
 * un salmon claro. */
.chip-hacer{
  background:var(--danger-soft);color:var(--danger);border-color:var(--danger);
}

/* Las reglas que ya se deshicieron, plegadas (22/09/2026). El panel contesta
   «por que no me piden este ticket» y eso lo contestan las VIVAS; las otras son
   historial, y con cinco deshechas debajo lo que hay que leer ocupaba un tercio
   de la lista. `<details>` no necesita estado: repintar no lo cierra. */
.mov-deshechas{margin-top:2px}
.mov-deshechas > summary{
  cursor:pointer; padding:8px 0; font-size:13px; color:var(--ink-3);
  list-style-position:inside;
}
.mov-deshechas[open] > summary{color:var(--ink-2)}