/* Notas de Gasto — estilos de la pestaña 🧾 Gastos (Pay Check).
   Prefijo .ex- en TODO para no chocar con nada de index.html. */

/* ── El botón de la pestaña va en CIAN, no en el ámbar de Pay Check ──
   Las otras tres pestañas son nómina; ésta es otro mundo (gastos, portal,
   tickets) y conviene que se note antes de entrar. */
#scr-pay .pc-tab-btn[data-tab="gastos"]{color:rgba(126,251,254,.55)}
#scr-pay .pc-tab-btn[data-tab="gastos"].active{
  background:rgba(126,251,254,.16);
  color:#7EFBFE;
  border-color:rgba(126,251,254,.45);
  box-shadow:0 2px 12px rgba(126,251,254,.22),inset 0 1px 0 rgba(255,255,255,.07);
}
html.day #scr-pay .pc-tab-btn[data-tab="gastos"]{color:#0E7490!important}
html.day #scr-pay .pc-tab-btn[data-tab="gastos"].active{
  background:rgba(14,116,144,.12)!important;color:#0E7490!important;
  border-color:rgba(14,116,144,.35)!important}

#pc-tab-gastos .ex-hero{text-align:center;padding:18px 14px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(40,106,236,.16),rgba(16,24,40,.34));
  border:1px solid rgba(126,251,254,.22)}
#pc-tab-gastos .ex-lbl{font-size:9.5px;letter-spacing:.2em;color:rgba(180,220,255,.8);font-weight:700}
#pc-tab-gastos .ex-big{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:42px;font-weight:700;
  color:#7EFBFE;text-shadow:0 0 30px rgba(126,251,254,.35);line-height:1.1;margin:6px 0 2px}
#pc-tab-gastos .ex-sub{font-size:11px;color:rgba(180,220,255,.52)}
/* El tope no es dinero cobrado. Esta línea es la que evita el "leí 128 € y
   cobré 40": va debajo del número grande, no en letra pequeña al final. */
#pc-tab-gastos .ex-real{font-size:11.5px;line-height:1.5;color:rgba(180,220,255,.72);
  margin-top:8px;padding:7px 10px;border-radius:10px;
  background:rgba(78,230,174,.08);border:1px solid rgba(78,230,174,.28)}
#pc-tab-gastos .ex-real b{color:#4EE6AE;font-weight:800}
/* auto-fit: con tres baldosas entran en fila en un móvil de 390 y bajan solas
   si el sitio no da. */
#pc-tab-gastos .ex-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:8px;margin-top:12px}
#pc-tab-gastos .ex-nube{margin-top:10px;font-size:10px;line-height:1.5;color:rgba(180,220,255,.52)}
#pc-tab-gastos .ex-nube.warn{color:rgba(255,176,103,.9)}
#pc-tab-gastos .ex-nube.ok{color:rgba(78,230,174,.9)}
#pc-tab-gastos .ex-nube b{color:rgba(255,176,103,1)}
#pc-tab-gastos .ex-tile.cash{background:rgba(78,230,174,.1);border-color:rgba(78,230,174,.4)}
#pc-tab-gastos .ex-tile.cash .n{color:#4EE6AE}

/* ── Barra de cobertura del tope ──
   Cuánto del máximo llevas justificado. Es el trabajo que queda, dicho sin
   números: la barra vacía es lo que hoy decían cuatro frases de «sin ticket». */
#pc-tab-gastos .ex-pbar{height:5px;border-radius:3px;background:rgba(255,255,255,.14);
  margin-top:11px;overflow:hidden}
#pc-tab-gastos .ex-pbar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#22D3EE,#4EE6AE)}
#pc-tab-gastos .ex-sub b{color:#F0F8FF;font-weight:700}
/* .ex-real nace verde (el aviso de «con tus tickets reclamas X»); estas dos
   variantes son el mismo bloque diciendo algo que va a peor. */
#pc-tab-gastos .ex-real.warn{background:rgba(255,176,103,.1);border-color:rgba(255,176,103,.4)}
#pc-tab-gastos .ex-real.warn b{color:#FFB067}
#pc-tab-gastos .ex-real.bad{background:rgba(255,128,149,.12);border-color:rgba(255,128,149,.45)}
#pc-tab-gastos .ex-real.bad b{color:#FF8095}
#pc-tab-gastos .ex-real.info{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
#pc-tab-gastos .ex-real.info b{color:#F0F8FF}

/* ── Los tres pasos ──
   Mando de estado, no una baldosa de dato: se pulsa, así que va con el mismo
   cian de selección que la tira de meses y no con el verde de los totales. */
#pc-tab-gastos .ex-pasos{display:flex;gap:7px;margin:14px 0 12px}
#pc-tab-gastos .ex-paso{flex:1;text-align:center;padding:9px 4px 8px;border-radius:12px;
  min-height:44px;display:flex;flex-direction:column;justify-content:center;
  cursor:pointer;background:rgba(16,24,40,.3);border:1px solid rgba(255,255,255,.14)}
#pc-tab-gastos .ex-paso .n{font-family:ui-monospace,monospace;font-size:17px;font-weight:700;
  color:#F0F8FF;line-height:1}
#pc-tab-gastos .ex-paso .l{font-size:8.5px;letter-spacing:.1em;font-weight:700;
  color:rgba(180,220,255,.62);margin-top:4px}
#pc-tab-gastos .ex-paso.on{background:rgba(126,251,254,.14);border-color:rgba(126,251,254,.5)}
#pc-tab-gastos .ex-paso.on .n,#pc-tab-gastos .ex-paso.on .l{color:#7EFBFE}
/* Ámbar sólo en el recuento de lo que bloquea el cobro, y sólo si hay algo. */
#pc-tab-gastos .ex-paso.urge .n{color:#FFB067}
#pc-tab-gastos .ex-paso.on.urge .n{color:#FFB067}

/* ══ LA CABECERA DE TIPO ══════════════════════════════════════════════════════
   «Que encima de estado ponga TICKET Horno inoperativo» (11-sep-2026), y con
   ella «que los tickets tuvieran un diseño… elegante».

   ── LA PRIMERA VERSIÓN LLEVABA OCHO TEXTURAS Y ESTABA MAL ──
   Una trama por concepto (rayas, cuadrícula, puntos). «Se ve bastante feo», y
   con razón: **una trama es ruido repetido**. Ocho tarjetas seguidas con ocho
   rayados distintos convierten la lista en una manta de retales, y cada trama
   compite con el rótulo que tiene justo encima — la textura llamaba la atención
   sobre sí misma en vez de sobre la nota. Se quitaron en Beta.816. No volver a
   añadirlas: si algún día parece buena idea, mirar una lista de seis notas
   seguidas antes de escribir una línea.

   ── LO QUE HAY AHORA: TRES CAPAS, NINGUNA REPETIDA ──
   1. **Lavado.** Un degradado del color del tipo que entra por la izquierda
      —donde está la tira— y se apaga antes del centro. Sin grano: un degradado
      no puede competir con el texto como sí lo hace una trama.
   2. **Línea de luz** abajo, del color del tipo y con su halo. Es lo que hace
      que la cabecera parezca una pieza y no un rectángulo pintado.
   3. **La marca del tipo en grande**, muy tenue, saliéndose por el borde
      derecho. Es la que distingue un concepto de otro de un vistazo, y es
      honesta: es el símbolo del propio concepto —el MISMO trazado que el icono
      pequeño— y no un rayado inventado. Una forma grande se lee de lejos; ocho
      rayados, no.

   Las tres salen del MISMO `--tcol` que la tira lateral y el icono: un color
   propio aquí sería una cuarta cosa que mantener sincronizada.

   ⚠️ NUNCA con el atajo `background`. Un `html.day …{background:#fff!important}`
   se llevaría por delante el degradado del lavado. `background-color` y
   `background-image` por separado, y los overrides de día también.

   La cabecera va a sangre (márgenes negativos contra el padding de la tarjeta).
   La tira de color de `.ex-day:before` es `position:absolute`, así que se pinta
   POR ENCIMA de esta banda y sigue de arriba abajo sin partirse. */
#pc-tab-gastos .ex-tipo{position:relative;overflow:hidden;
  display:flex;align-items:center;gap:8px;
  margin:-12px -13px 9px -15px;padding:8px 13px 8px 15px;
  border-bottom:1px solid color-mix(in srgb,var(--tcol) 34%,transparent);
  box-shadow:0 1px 10px -4px color-mix(in srgb,var(--tcol) 55%,transparent);
  background-color:transparent;
  background-image:linear-gradient(100deg,
    color-mix(in srgb,var(--tcol) 19%,transparent) 0%,
    color-mix(in srgb,var(--tcol) 8%,transparent) 38%,
    color-mix(in srgb,var(--tcol) 0%,transparent) 78%)}
/* La marca grande: fondo, no contenido. Se sale por el borde —está recortada
   por el `overflow:hidden` de la banda— para que se lea como una filigrana y no
   como un icono suelto mal colocado. */
#pc-tab-gastos .ex-tipo-marca{position:absolute;right:-9px;top:50%;
  transform:translateY(-50%);line-height:0;color:var(--tcol);opacity:.13;
  pointer-events:none}
#pc-tab-gastos .ex-tipo-ic{position:relative;flex:0 0 auto;line-height:0;color:var(--tcol)}
#pc-tab-gastos .ex-tipo-ic .ex-ic{width:15px;height:15px}
/* El rótulo va OPACO y no al 62 %. A 8,5 px sobre la banda teñida, el 62 % se
   quedaba entre 3,12:1 (médicos) y 4,36:1 (incidencia) — por debajo del 4,5:1 de
   AA. Es la línea pequeña del arrastre del IRPF otra vez: «parece gris» no es
   una medición. Lo mide `ticket-cabecera-test` en los ocho tipos y en los dos
   temas, y con el peor píxel de la banda, no con uno cualquiera. */
#pc-tab-gastos .ex-tipo-k{position:relative;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:8.5px;font-weight:800;letter-spacing:.22em;color:#C8E3FF;flex:0 0 auto}
#pc-tab-gastos .ex-tipo-v{position:relative;font-size:11px;font-weight:800;letter-spacing:.03em;
  color:var(--tcol);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── EL REBOTE AL PULSAR ──
   «Que al pulsar sobre el ticket se abra más fácilmente y que haga un rebote al
   pulsar que sea dinámico.» Dinámico = responde al dedo. La ENTRADA es larga y
   con salida suave, así que la tarjeta se hunde progresivamente mientras la
   tienes pulsada; la VUELTA lleva una curva que se pasa de largo, y como el
   rebote sale de la curva su amplitud es proporcional a lo que llegó a
   hundirse: un toque seco rebota poco, una pulsación mantenida rebota más.
   Cero trabajo por frame — lo compone el navegador. */
#pc-tab-gastos .ex-day{transition:transform .34s cubic-bezier(.34,1.4,.5,1)}
#pc-tab-gastos .ex-day.pulsando{transform:scale(.968);
  transition:transform .45s cubic-bezier(.22,.9,.3,1)}
/* La zona de toque es la tarjeta PLEGADA entera: cabecera de tipo, estado, fila
   principal y chips. El cuerpo queda fuera — tocar un botón de dentro no puede
   cerrar la tarjeta que estás leyendo. */
#pc-tab-gastos .ex-tap{cursor:pointer;touch-action:manipulation}
#pc-tab-gastos .ex-day.selble .ex-tap{cursor:inherit}
@media (prefers-reduced-motion: reduce){
  #pc-tab-gastos .ex-day,#pc-tab-gastos .ex-day.pulsando{transition:none;transform:none}
}

/* ── Cabecera de la tarjeta ── */
#pc-tab-gastos .ex-head{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
#pc-tab-gastos .ex-ico{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;margin-top:1px;
  background:color-mix(in srgb,var(--tcol) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--tcol) 45%,transparent);color:var(--tcol)}
#pc-tab-gastos .ex-ic{display:block}
#pc-tab-gastos .ex-hmid{flex:1;min-width:0}
#pc-tab-gastos .ex-hmid>span{display:block}
/* .52 daba 4,14:1 sobre la tarjeta de noche — por debajo del 4,5 de AA. */
#pc-tab-gastos .ex-caret{color:rgba(180,220,255,.75);line-height:0;margin-top:6px;
  transition:transform .18s;flex:0 0 auto;display:block}
#pc-tab-gastos .ex-tap.open .ex-caret{transform:rotate(180deg)}

/* ── Los chips: lo único que decide algo con la tarjeta plegada ── */
#pc-tab-gastos .ex-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
#pc-tab-gastos .ex-tkchip{font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:20px;
  cursor:pointer;background:rgba(255,176,103,.14);border:1px solid rgba(255,176,103,.45);
  color:#FFB067;white-space:nowrap}
#pc-tab-gastos .ex-tkchip:before{content:"📷 ";font-size:10px}
#pc-tab-gastos .ex-tkchip.ok{background:rgba(9,42,31,.58);border-color:rgba(52,224,161,.55);
  color:#4EE6AE;cursor:pointer}
#pc-tab-gastos .ex-tkchip.ok:before{content:""}
#pc-tab-gastos .ex-plazo{font-size:9px;font-weight:800;letter-spacing:.1em;padding:4px 8px;
  border-radius:6px;white-space:nowrap}
#pc-tab-gastos .ex-plazo.warn{background:rgba(255,176,103,.14);color:#FFB067}
#pc-tab-gastos .ex-plazo.bad{background:rgba(255,128,149,.16);color:#FF8095}
/* El `z-index:2` que llevaba esto existía para ganarle la capa al panel del
   deslizamiento, que colgaba de `.ex-day` y se pintaba encima del cuerpo
   tapando la papelera y el ⋯. Con el panel dentro de `.ex-swipe` ya no llega
   aquí: el parche sobra y se quita en vez de quedarse «por si acaso». */
#pc-tab-gastos .ex-body{margin-top:2px}

/* ── Tira de meses ──
   Chips y no desplegable: lo que hay que ver es justamente que existen OTROS
   meses con dinero dentro. El punto ámbar marca el mes con algo a menos de 20
   días de caducar. */
#pc-tab-gastos .ex-meses{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 6px;
  margin-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#pc-tab-gastos .ex-meses::-webkit-scrollbar{display:none}
/* ⚠️ `touch-action:manipulation` NO ES COSMÉTICO
   Sin él iOS mantiene la ventana de ~300 ms de «doble toque para ampliar»: el
   click llega tarde y, si el piloto —que no ha visto reaccionar nada— vuelve a
   tocar dentro de esa ventana, el navegador lo lee como doble toque y el click
   NO LLEGA NUNCA. Es exactamente el «tengo que darle muchas veces». Y dentro de
   un carril que rueda de lado el navegador tiene además que decidir si el dedo
   quiere desplazar o tocar, así que dos o tres píxeles de movimiento cancelan
   el toque; con `manipulation` se compromete antes.
   Va en TODOS los mandos de esta pestaña, no sólo en los meses. */
#pc-tab-gastos .ex-mchip,#pc-tab-gastos .ex-paso,#pc-tab-gastos .ex-tkchip,
#pc-tab-gastos .ex-tap,#pc-tab-gastos .ex-new,#pc-tab-gastos .ex-whyb,
#pc-tab-gastos .ex-req-go,.ex-btn,.ex-add,.ex-cp{touch-action:manipulation}
/* Y el blanco de toque llega a los 44 px que pide Apple: el chip medía 34. */
#pc-tab-gastos .ex-mchip{flex:0 0 auto;padding:9px 11px;min-height:44px;
  display:flex;flex-direction:column;justify-content:center;border-radius:11px;cursor:pointer;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-align:center;position:relative;
  border:1px solid rgba(255,255,255,.14);background:rgba(16,24,40,.34);color:rgba(180,220,255,.62)}
#pc-tab-gastos .ex-mchip span{display:block;font-family:ui-monospace,monospace;font-size:10.5px;
  font-weight:700;letter-spacing:0;margin-top:3px;color:rgba(180,220,255,.45)}
#pc-tab-gastos .ex-mchip.on{background:rgba(126,251,254,.14);border-color:rgba(126,251,254,.5);
  color:#7EFBFE}
#pc-tab-gastos .ex-mchip.on span{color:#7EFBFE}
#pc-tab-gastos .ex-mchip.urge:after{content:"";position:absolute;top:5px;right:6px;width:6px;height:6px;
  border-radius:50%;background:#FFB067;box-shadow:0 0 6px rgba(255,176,103,.8)}
#pc-tab-gastos .ex-tile{background:rgba(16,24,40,.3);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:9px 8px;text-align:center}
#pc-tab-gastos .ex-tile .n{font-family:ui-monospace,monospace;font-size:16px;font-weight:700;color:#F0F8FF}
#pc-tab-gastos .ex-tile .l{font-size:8.5px;letter-spacing:.1em;color:rgba(180,220,255,.52);margin-top:3px;font-weight:700}
#pc-tab-gastos .ex-tile.ok{background:rgba(9,42,31,.58);border-color:rgba(52,224,161,.55)}
#pc-tab-gastos .ex-tile.ok .n{color:#4EE6AE}
#pc-tab-gastos .ex-tile.warn{background:rgba(255,138,40,.16);border-color:rgba(255,150,60,.55)}
#pc-tab-gastos .ex-tile.warn .n{color:#FFB067}

#pc-tab-gastos .ex-sect{font-size:9.5px;letter-spacing:.2em;color:rgba(180,220,255,.52);
  font-weight:700;margin:18px 4px 8px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px}
#pc-tab-gastos .ex-sect .c{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:0;
  text-align:right;flex-shrink:0}
#pc-tab-gastos .ex-new{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;
  border-radius:12px;border:1px dashed rgba(126,251,254,.42);background:rgba(126,251,254,.06);
  color:#7EFBFE;font-size:12px;font-weight:700;cursor:pointer}
#pc-tab-gastos .ex-empty{text-align:center;color:rgba(180,220,255,.52);font-size:12px;
  padding:18px 10px;line-height:1.6}

/* tarjeta con tira de color por tipo de gasto */
/* El padding de la tarjeta se declara UNA vez y se usa dos: aquí y en el
   sangrado de `.ex-swipe`. Escrito dos veces, el día que cambie uno el panel
   deja un canalón claro y vuelve el reporte. */
#pc-tab-gastos .ex-day{--swp:0;--exPadT:12px;--exPadR:13px;--exPadB:12px;--exPadL:15px;
  border-radius:16px;padding:var(--exPadT) var(--exPadR) var(--exPadB) var(--exPadL);margin-bottom:9px;position:relative;
  overflow:hidden;background:rgba(16,24,40,.44);border:1px solid rgba(126,251,254,.34)}
#pc-tab-gastos .ex-day:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tcol,#7EFBFE)}
#pc-tab-gastos .ex-day.done{opacity:.55;border-color:rgba(255,255,255,.14)}
#pc-tab-gastos .ex-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#pc-tab-gastos .ex-dd{font-family:ui-monospace,monospace;font-size:11px;color:rgba(180,220,255,.8);letter-spacing:.06em}
#pc-tab-gastos .ex-title{font-size:13.5px;font-weight:700;margin-top:3px;color:#F0F8FF}
#pc-tab-gastos .ex-route{font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(180,220,255,.52);margin-top:3px;line-height:1.5}
#pc-tab-gastos .ex-amt{font-family:ui-monospace,monospace;font-size:19px;font-weight:700;color:#7EFBFE;
  text-align:right;white-space:nowrap}
#pc-tab-gastos .ex-amt small{display:block;font-size:8.5px;letter-spacing:.1em;
  color:rgba(180,220,255,.52);font-weight:700;font-family:inherit}
#pc-tab-gastos .ex-day.done .ex-amt{color:#4EE6AE}
#pc-tab-gastos .ex-right{display:flex;align-items:flex-start;gap:4px}
/* Papelera igual que la del logbook (.ld-fdel): el mismo icono y la misma
   opacidad .55 — con .35 el icono se quedaba en 1,07:1 sobre la tarjeta
   oscura. Discreto está bien en un botón destructivo; invisible no. */
/* ⚠ Antes era un 🗑 suelto de 13 px al final de la fila de botones: medido con
   la tarjeta desplegada salía de **21 px de ancho** junto a dos botones de 133,
   la mitad del mínimo de 44 que se toca con el pulgar. Así llegó el reporte
   —«ha desaparecido la papelera»—: no había desaparecido, era intocable.
   Ahora va en su propia fila, ABAJO A LA DERECHA, con su aro, su rótulo y 44 px
   de alto. Discreto está bien en un botón destructivo; invisible no. */
/* ── Deslizar a la izquierda ────────────────────────────────────────────────
   ⚠ El envoltorio `.ex-swipe` es EXACTAMENTE lo que se desliza, y el panel va
   `inset:0` de él. Antes el panel colgaba de `.ex-day`: medía 151 px de alto
   contra los 139 de la zona táctil —los 12 del padding sobraban por abajo y el
   rojo asomaba en forma de L—, y llevaba su propio radio de 14 dentro de una
   tarjeta de 16, dejando una uña del fondo claro entre los dos («el azul tapa la
   línea roja»). Un solo radio, y el recorte lo hace el envoltorio.
   El ancho lo repite `SW_ANCHO` en expense.js: si uno cambia, cambian los dos. */
#pc-tab-gastos .ex-day{position:relative}
/* SANGRA a los cuatro lados hasta el borde de la tarjeta y restituye el padding
   por dentro: su caja de margen queda EXACTAMENTE donde estaba la zona táctil,
   así que nada se mueve, y el panel —`inset:0` de aquí— llega al borde en vez de
   dejar el canalón claro de 13 px que el piloto ve como «el azul tapa la línea
   roja». Sin radio propio: el recorte y la curva los pone `.ex-day`
   (`overflow:hidden` + 16 px), y así hay UN solo radio y ninguna uña entre dos. */
#pc-tab-gastos .ex-swipe{position:relative;overflow:hidden;
  margin:calc(-1 * var(--exPadT)) calc(-1 * var(--exPadR))
         calc(-1 * var(--exPadB)) calc(-1 * var(--exPadL));
  padding:var(--exPadT) var(--exPadR) var(--exPadB) var(--exPadL)}
/* NACE FUERA DE LA TARJETA (`left:100%`) y entra con el gesto, recortado por el
   `overflow:hidden` del envoltorio. Antes estaba QUIETO debajo de la zona táctil
   y se destapaba al apartarse ésta, lo que obliga a que la zona táctil sea
   OPACA — y esta tarjeta es de cristal (`rgba(16,24,40,.44)`): el rojo se
   transparentaba por encima del importe con la tarjeta CERRADA. No es un
   problema de pintura sino de geometría, así que se arregla con geometría: si
   el panel está fuera, no hay nada que tapar. */
#pc-tab-gastos .ex-swipe-del{position:absolute;top:0;left:100%;bottom:0;width:96px;
  transform:translateX(var(--dx,0px));
  transition:transform .18s cubic-bezier(.2,.8,.3,1);will-change:transform;
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  padding-right:11px;cursor:pointer;color:#fff;
  /* SÓLIDO, y la profundidad la da la sombra interior de abajo. El primer
     intento fundía el borde izquierdo con un rojo transparente, y sobre la
     tarjeta clara eso no leía como profundidad: leía como una banda lavada y
     sucia de medio centímetro. Lo que separa los dos planos es la SOMBRA que
     proyecta la tarjeta, no un degradado que se aclara.
     El radial se queda: pone la luz donde está el icono, que es adonde tiene que
     ir la mirada. */
  background:
    radial-gradient(58% 76% at 70% 46%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(90deg, #6B1020 0%, #7E1429 26%, #8D1731 66%, #971A36 100%);
  /* La tarjeta que se aparta proyecta su sombra AQUÍ DENTRO. Es lo que da la
     sensación de que una capa se levanta sobre otra en vez de destaparse un
     rectángulo pintado, y no cuesta un solo frame: es una sombra interior. */
  box-shadow:inset 17px 0 22px -13px rgba(0,0,0,.55)}
/* La flecha, pegada al borde izquierdo y discreta: dice de qué lado está el
   borrado sin competir con el icono. */
#pc-tab-gastos .ex-swipe-del .fl{display:flex;opacity:.6;flex-shrink:0}
#pc-tab-gastos .ex-swipe-del .ac{display:flex;flex-direction:column;align-items:center;gap:4px;
  /* CRECE con el gesto (`--swp`, que escribe el arrastre). Con el panel a medio
     abrir el contenido entra pequeño y llega a su tamaño justo al destaparse. */
  transform:scale(calc(.58 + .42 * var(--swp, 1)));
  opacity:calc(.2 + .8 * var(--swp, 1));
  transition:transform .2s cubic-bezier(.2,.9,.3,1.25), opacity .2s ease}
#pc-tab-gastos .ex-swipe-del .ac{will-change:transform}
#pc-tab-gastos .ex-swipe-del .dk{width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.17);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
    0 3px 9px rgba(80,0,18,.34)}
#pc-tab-gastos .ex-swipe-del .tx{font-size:9.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;opacity:.94}
/* La flecha se queda SIEMPRE. Desvanecerla al abrir del todo la escondía justo
   en el único momento en que el piloto la está mirando — y es la que dice de qué
   lado está el borrado. */
/* La zona táctil y el panel se mueven JUNTOS, los dos con `--dx`.
   ⚠ Aquí había un `background:inherit` para taparle el panel a la zona táctil.
   Heredaba el fondo de `.ex-day` mientras era hija suya; al meterla dentro de
   `.ex-swipe` —que no declara ninguno— pasó a heredar TRANSPARENTE y el panel
   se veía a través, con la tarjeta cerrada. Y restituir la cadena tampoco
   valía: de noche el fondo de la tarjeta es `rgba(16,24,40,.44)`, o sea que una
   copia suya deja pasar el 56 % del rojo igual. Un fondo no puede tapar lo que
   no debería estar ahí. */
#pc-tab-gastos .ex-tap{position:relative;z-index:1;
  transform:translateX(var(--dx,0px));
  transition:transform .18s cubic-bezier(.2,.8,.3,1);will-change:transform}
#pc-tab-gastos .ex-day.sw{--swp:1;--dx:-96px}
/* El canto de la tarjeta que se aparta: una línea de luz de un píxel. Sin ella
   la tarjeta y el panel se tocan a hueso y parecen el mismo plano. */
#pc-tab-gastos .ex-swipe .ex-tap::after{content:'';position:absolute;top:0;bottom:0;
  right:calc(-1 * var(--exPadR));width:1px;background:rgba(255,255,255,.5);
  opacity:var(--swp, 0);pointer-events:none}
#pc-tab-gastos .ex-day.sw .ex-swipe .ex-tap::after{opacity:1;transition:opacity .2s}
html.day #pc-tab-gastos .ex-swipe .ex-tap::after{background:rgba(255,255,255,.9)}
/* Mientras el dedo arrastra manda el estilo en línea, no la transición. La
   marca es `--dx` en la TARJETA: es lo que escribe el gesto. */
#pc-tab-gastos .ex-day[style*="--dx"] .ex-tap,
#pc-tab-gastos .ex-day[style*="--dx"] .ex-swipe-del{transition:none}

/* ⋯ — todas las transiciones del estado. 44 px, como la papelera: un mando que
   no se puede tocar es un mando que no existe. */
#pc-tab-gastos .ex-mas{flex:0 0 auto;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;cursor:pointer;font-family:inherit;font-size:17px;line-height:1;
  border:1px solid rgba(126,251,254,.28);background:rgba(126,251,254,.08);color:#7EFBFE}
#pc-tab-gastos .ex-mas:active{background:rgba(126,251,254,.2)}
html.day #pc-tab-gastos .ex-mas{border-color:rgba(8,145,178,.34);
  background:rgba(8,145,178,.08);color:#0E7490}

/* ── EL BOTÓN DE BORRAR ───────────────────────────────────────────────────────
   ⚠️ SIN `#pc-tab-gastos` DELANTE, Y ESO ES EL ARREGLO, NO UN DESCUIDO.
   La hoja de detalle (`#ex-sheet`) se cuelga de `<body>`, no de la pestaña
   —`sheetEl()` hace `document.body.appendChild`—, así que un selector anclado en
   `#pc-tab-gastos` NO la alcanza. El botón de dentro de la hoja se quedaba sin
   una sola regla y el navegador le pintaba su botón de fábrica: la pastilla gris
   con letra negra que llegó fotografiada, idéntica en los dos temas porque un
   estilo de agente de usuario no sabe de temas.

   Lo peor es que el código afirmaba lo contrario: el comentario de su `<button>`
   dice «la MISMA papelera que la tarjeta» y el selector lo desmentía en silencio.
   Es la familia de `window.RST_IATA_ICAO` —algo que dice hacerse y no se hace,
   sin un solo error— esta vez por alcance de CSS.
   `.ex-btn`, que también se usa en la hoja, ya estaba sin anclar por esto mismo:
   ahí está la pista de que era el patrón correcto desde el principio. */
.ex-row-del{justify-content:flex-end;margin-top:8px}
.ex-del{display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 15px;border-radius:12px;cursor:pointer;line-height:1;
  flex:0 0 auto;font-family:inherit;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;-webkit-appearance:none;appearance:none;
  border:1px solid rgba(248,113,113,.34);background:rgba(248,113,113,.10);
  color:rgba(252,165,165,.95);transition:background .15s,border-color .15s,transform .13s}
.ex-del svg{flex-shrink:0;opacity:.95}
.ex-del:active{background:rgba(248,113,113,.22);border-color:rgba(248,113,113,.55);
  transform:scale(.97)}

/* ── EL PORQUÉ: barra del día + frases ──
   El eje va en tiempo real (UTC por dentro, único monótono al cruzar husos)
   pero SIEMPRE se rotula en hora local: rotularlo en UTC haría pensar que la
   app calcula mal cuando lo que estaría mal es la pantalla. */
#pc-tab-gastos .ex-whybar{margin-top:9px;text-align:right}
#pc-tab-gastos .ex-whyb{font-size:10.5px;font-weight:700;color:rgba(126,251,254,.75);
  cursor:pointer;border-bottom:1px dotted rgba(126,251,254,.45);padding-bottom:1px}
#pc-tab-gastos .ex-why{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}

#pc-tab-gastos .ex-tl{position:relative;height:44px;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
#pc-tab-gastos .ex-tl-bands,#pc-tab-gastos .ex-tl-segs{position:absolute;inset:0}
#pc-tab-gastos .ex-band{position:absolute;top:0;bottom:0;display:flex;align-items:flex-start;
  justify-content:center;padding-top:2px;font-size:10px;opacity:.28;
  background:rgba(255,255,255,.07);border-left:1px dashed rgba(255,255,255,.18);
  border-right:1px dashed rgba(255,255,255,.18)}
#pc-tab-gastos .ex-band.cat{opacity:.4}
#pc-tab-gastos .ex-band.on{opacity:1;background:rgba(126,251,254,.16);
  border-color:rgba(126,251,254,.55);box-shadow:inset 0 0 12px rgba(126,251,254,.25)}
#pc-tab-gastos .ex-seg{position:absolute;bottom:5px;height:15px;border-radius:4px;
  font-family:ui-monospace,monospace;font-size:8px;display:flex;align-items:center;
  justify-content:center;color:rgba(255,255,255,.75);overflow:hidden;white-space:nowrap}
#pc-tab-gastos .ex-seg.cat{background:rgba(255,255,255,.16)}
#pc-tab-gastos .ex-seg.self{background:linear-gradient(180deg,#7EFBFE,#22D3EE);color:#00202b;font-weight:700}
#pc-tab-gastos .ex-seg.ground{opacity:.75;height:10px;bottom:7px}
#pc-tab-gastos .ex-tl-ax{display:flex;justify-content:space-between;margin-top:4px;
  font-family:ui-monospace,monospace;font-size:8.5px;color:rgba(180,220,255,.52)}

#pc-tab-gastos .ex-why-row{margin-top:9px;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
#pc-tab-gastos .ex-why-row.on{background:rgba(126,251,254,.07);border-color:rgba(126,251,254,.3)}
#pc-tab-gastos .ex-why-h{font-size:10.5px;color:rgba(180,220,255,.8);margin-bottom:3px}
#pc-tab-gastos .ex-why-h b{color:#F0F8FF}
#pc-tab-gastos .ex-why-t{font-size:11px;line-height:1.55;color:rgba(180,220,255,.72)}
#pc-tab-gastos .ex-why-t b{color:#7EFBFE;font-weight:700}
#pc-tab-gastos .ex-why-foot{margin-top:10px;font-size:9.5px;line-height:1.5;
  color:rgba(180,220,255,.45);display:flex;justify-content:space-between;gap:10px;align-items:flex-end}
#pc-tab-gastos .ex-why-foot b{color:rgba(180,220,255,.7)}
#pc-tab-gastos .ex-why-bug{flex-shrink:0;color:#FFB067;border-bottom:1px dotted rgba(255,176,103,.5);
  cursor:pointer;font-weight:700;white-space:nowrap}

/* el porqué en modo día */
html.day #pc-tab-gastos .ex-whyb{color:#0E7490;border-bottom-color:rgba(14,116,144,.45)}
html.day #pc-tab-gastos .ex-why{border-top-color:rgba(2,132,199,.2)}
html.day #pc-tab-gastos .ex-tl{background:#F1F5F9;border-color:rgba(15,23,42,.12)}
html.day #pc-tab-gastos .ex-band{background:rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.18);opacity:.5}
html.day #pc-tab-gastos .ex-band.on{opacity:1;background:rgba(2,132,199,.18);
  border-color:rgba(2,132,199,.5);box-shadow:none}
html.day #pc-tab-gastos .ex-seg.cat{background:rgba(15,23,42,.22);color:#F8FAFC}
html.day #pc-tab-gastos .ex-seg.self{background:linear-gradient(180deg,#0EA5E9,#0369A1);color:#fff}
html.day #pc-tab-gastos .ex-tl-ax{color:#455E75}
html.day #pc-tab-gastos .ex-why-row{background:#F8FAFC;border-color:rgba(15,23,42,.1)}
html.day #pc-tab-gastos .ex-why-row.on{background:#E0F2FE;border-color:rgba(2,132,199,.35)}
html.day #pc-tab-gastos .ex-why-h{color:#475569} html.day #pc-tab-gastos .ex-why-h b{color:#0F172A}
html.day #pc-tab-gastos .ex-why-t{color:#455E75} html.day #pc-tab-gastos .ex-why-t b{color:#0E7490}
html.day #pc-tab-gastos .ex-why-foot{color:#64748B}
html.day #pc-tab-gastos .ex-why-foot b{color:#475569}
html.day #pc-tab-gastos .ex-why-bug{color:#B45309;border-bottom-color:rgba(180,83,9,.45)}

/* separador de mes */
#pc-tab-gastos .ex-mes{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;margin:14px 4px 7px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.1)}
#pc-tab-gastos .ex-mes .m{font-size:11px;font-weight:800;letter-spacing:.14em;color:#7EFBFE}
#pc-tab-gastos .ex-mes .s{font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(180,220,255,.52)}

#pc-tab-gastos .ex-chip{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.1em;
  padding:2px 7px;border-radius:5px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.06);color:rgba(180,220,255,.8);vertical-align:2px}
#pc-tab-gastos .ex-chip.tipo{background:color-mix(in srgb,var(--tcol) 16%,transparent);
  border-color:color-mix(in srgb,var(--tcol) 50%,transparent);color:var(--tcol)}
#pc-tab-gastos .ex-chip.int{background:rgba(90,200,250,.14);border-color:rgba(90,200,250,.45);color:#7AD6FB}
#pc-tab-gastos .ex-chip.ok{background:rgba(9,42,31,.58);border-color:rgba(52,224,161,.55);color:#4EE6AE}

#pc-tab-gastos .ex-slots{margin-top:11px}
#pc-tab-gastos .ex-slotbar{height:26px;border-radius:7px;display:flex;overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
#pc-tab-gastos .ex-sl{flex:1;display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(255,255,255,.07);font-size:11px;opacity:.3}
#pc-tab-gastos .ex-sl:last-child{border-right:0}
#pc-tab-gastos .ex-sl.on{background:linear-gradient(180deg,rgba(126,251,254,.26),rgba(126,251,254,.1));opacity:1}
#pc-tab-gastos .ex-sl.cat{background:rgba(255,255,255,.05);opacity:.55;filter:grayscale(1)}
#pc-tab-gastos .ex-sl.vou{background:rgba(183,156,255,.14);opacity:.75}
#pc-tab-gastos .ex-slotlbl{display:flex;margin-top:5px;font-family:ui-monospace,monospace;
  font-size:8px;color:rgba(180,220,255,.52)}
#pc-tab-gastos .ex-slotlbl div{flex:1;text-align:center}
#pc-tab-gastos .ex-legend{font-size:9.5px;color:rgba(180,220,255,.52);margin-top:7px;line-height:1.6}
#pc-tab-gastos .ex-legend b{color:#7EFBFE;font-weight:700}
#pc-tab-gastos .ex-legend i{font-style:normal;color:rgba(196,176,255,.9)}

#pc-tab-gastos .ex-lines{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:9px}
#pc-tab-gastos .ex-ln{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:4px 0;font-size:11.5px}
#pc-tab-gastos .ex-ln .k{color:rgba(180,220,255,.8)}
#pc-tab-gastos .ex-ln .k b{font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
  color:rgba(180,220,255,.62);margin-right:2px}
#pc-tab-gastos .ex-ln .k span{font-family:ui-monospace,monospace;font-size:10px;color:rgba(180,220,255,.52)}
#pc-tab-gastos .ex-ln .v{font-family:ui-monospace,monospace;font-size:11.5px;color:#F0F8FF;
  white-space:nowrap;text-align:right}
#pc-tab-gastos .ex-ln .v i{display:block;font-style:normal;font-size:9px;letter-spacing:.04em;
  color:#4EE6AE;margin-top:2px}
#pc-tab-gastos .ex-ln .v i.no,
#pc-tab-gastos .ex-ln .v i.over{color:rgba(255,176,103,.85)}
#pc-tab-gastos .ex-amt em{display:block;font-style:normal;font-family:ui-monospace,monospace;
  font-size:9.5px;font-weight:700;color:#4EE6AE;margin-top:2px}

/* ── Desglose del mes ──
   La tarjeta cuenta una nota; esto cuenta el mes: de qué día sale cada euro,
   qué tope pone el convenio y cuánto ticket llevas en esa línea. */
#pc-tab-gastos .ex-dsgbar{text-align:right;margin:-3px 4px 8px}
/* Una sola fila de cabecera: cuánto hay y la puerta al desglose. */
#pc-tab-gastos .ex-mesbar{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:0 4px 9px}
#pc-tab-gastos .ex-mesbar .m{font-family:ui-monospace,monospace;font-size:10.5px;
  color:rgba(180,220,255,.62)}
#pc-tab-gastos .ex-dsgbox{margin:0 0 10px}
#pc-tab-gastos .ex-dsg{border-radius:12px;padding:9px 11px;
  background:rgba(16,24,40,.44);border:1px solid rgba(126,251,254,.22)}
#pc-tab-gastos .ex-dsg-r{display:grid;grid-template-columns:52px 1fr 62px 62px;gap:6px;
  align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px}
#pc-tab-gastos .ex-dsg-r:last-of-type{border-bottom:0}
#pc-tab-gastos .ex-dsg-r .d{font-family:ui-monospace,monospace;font-size:9.5px;
  color:rgba(180,220,255,.62)}
#pc-tab-gastos .ex-dsg-r .c{color:rgba(240,248,255,.9);line-height:1.35}
#pc-tab-gastos .ex-dsg-r .c span{display:block;font-family:ui-monospace,monospace;font-size:9px;
  color:rgba(180,220,255,.45);margin-top:2px}
#pc-tab-gastos .ex-dsg-r .t,#pc-tab-gastos .ex-dsg-r .k{font-family:ui-monospace,monospace;
  font-size:10.5px;text-align:right;white-space:nowrap}
#pc-tab-gastos .ex-dsg-r .t{color:#F0F8FF}
#pc-tab-gastos .ex-dsg-r .k{color:#4EE6AE}
#pc-tab-gastos .ex-dsg-r .k.no,
#pc-tab-gastos .ex-dsg-r .k.over{color:rgba(255,176,103,.85)}
#pc-tab-gastos .ex-dsg-r.hd{font-size:8.5px;letter-spacing:.12em;font-weight:800;
  color:rgba(180,220,255,.45);border-bottom-color:rgba(255,255,255,.12)}
#pc-tab-gastos .ex-dsg-r.hd .d,#pc-tab-gastos .ex-dsg-r.hd .t,#pc-tab-gastos .ex-dsg-r.hd .k{
  font-family:inherit;font-size:8.5px;color:rgba(180,220,255,.45)}
#pc-tab-gastos .ex-dsg-r.tot{border-top:1px solid rgba(255,255,255,.14);border-bottom:0;
  margin-top:2px;font-weight:700}
#pc-tab-gastos .ex-dsg-r.tot .d{color:rgba(180,220,255,.8)}
#pc-tab-gastos .ex-dsg-r.tot .c b{color:#4EE6AE}
#pc-tab-gastos .ex-dsg-f{margin-top:8px;font-size:9.5px;line-height:1.5;color:rgba(180,220,255,.45)}
#pc-tab-gastos .ex-dsg-f b{color:rgba(180,220,255,.72)}

.ex-row{display:flex;gap:7px;margin-top:11px}
.ex-btn{flex:1;text-align:center;padding:10px;border-radius:10px;font-size:11.5px;font-weight:700;
  cursor:pointer;border:1px solid rgba(126,251,254,.4);background:rgba(126,251,254,.13);color:#7EFBFE}
.ex-btn.ghost{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(180,220,255,.8)}
.ex-btn.solid{background:linear-gradient(180deg,#2ee6c0,#16b493);border-color:transparent;color:#00231b}
.ex-btn.danger{border-color:rgba(255,107,129,.55);color:#FF8095}
.ex-btn:active{transform:scale(.98)}
.ex-note{font-size:10.5px;color:rgba(180,220,255,.52);line-height:1.55;margin-top:9px}
.ex-note b{color:#FFB067}
.ex-plan{font-size:10px;color:rgba(180,220,255,.62);line-height:1.55;padding:9px 11px;border-radius:11px;
  border:1px solid rgba(255,150,60,.55);background:rgba(255,138,40,.16);margin-top:9px}
.ex-plan b{color:#FFB067}

/* hoja inferior */
/* SIN backdrop-filter, a propósito. Era un blur A PANTALLA COMPLETA: cada vez
   que se abría la hoja, el compositor tenía que capturar toda la página que hay
   detrás —con sus otros backdrop-filter ya compuestos—, desenfocarla y
   recomponerla. Con la CPU a 1/6 (un móvil de gama media) abrir costaba 75 ms
   con blur y 30 ms sin él, y en un iPhone dentro de la PWA es peor: es el mismo
   motivo por el que `html.zooming` los apaga todos.
   El fondo sube de .72 a .88 y tapa igual; lo que se pierde es un desenfoque
   que nadie mira, porque encima hay una hoja opaca. */
.ex-sheet{position:fixed;inset:0;background:rgba(0,8,26,.88);
  display:none;align-items:flex-end;justify-content:center;z-index:9999}
.ex-sheet.on{display:flex}
.ex-sheetin{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#062147,#001233);border:1px solid rgba(255,255,255,.14);
  border-bottom:0;padding:16px 16px calc(26px + env(safe-area-inset-bottom))}
.ex-grab{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 auto 14px}
.ex-lbl2{font-size:9.5px;letter-spacing:.2em;color:rgba(180,220,255,.52);font-weight:700}
.ex-sh-t{font-size:15px;font-weight:700;margin:5px 0 3px;color:#F0F8FF}
.ex-sh-s{font-size:11px;color:rgba(180,220,255,.52);margin-bottom:12px}
.ex-sh-s b{color:#F0F8FF}
.ex-grp{font-size:9px;letter-spacing:.16em;color:rgba(180,220,255,.52);font-weight:700;margin:14px 2px 7px}
.ex-cp{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;
  border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  margin-bottom:7px;cursor:pointer}
.ex-cp .k{font-size:9px;letter-spacing:.14em;color:rgba(180,220,255,.52);font-weight:700}
.ex-cp .v{font-family:ui-monospace,monospace;font-size:12.5px;margin-top:3px;color:#F0F8FF}
.ex-cp .h{font-size:9px;color:rgba(180,220,255,.52);margin-top:3px}
.ex-cp .c{font-size:14px;color:#7EFBFE;opacity:.8}
.ex-cp.copied{border-color:rgba(52,224,161,.55);background:rgba(9,42,31,.58)}
.ex-cp.copied .c:after{content:" ✓"}
.ex-cp.iso{border-color:rgba(255,150,60,.55);background:rgba(255,138,40,.16)}
.ex-cp.iso .k{color:#FFB067}
.ex-in{width:100%;padding:9px 10px;border-radius:10px;font-family:ui-monospace,monospace;font-size:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(126,251,254,.4);color:#F0F8FF;outline:none}

/* tickets */
.ex-tk{border:1px dashed rgba(255,255,255,.24);border-radius:12px;padding:10px;margin-bottom:7px;
  background:rgba(255,255,255,.025)}
.ex-tkhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ex-tkhead .k{font-size:9px;letter-spacing:.14em;color:rgba(180,220,255,.52);font-weight:700}
.ex-tkhead .n{font-family:ui-monospace,monospace;font-size:11px;color:rgba(180,220,255,.8)}
.ex-thumbs{display:flex;gap:7px;flex-wrap:wrap}
.ex-th{position:relative;width:64px}
.ex-th img,.ex-noimg{width:64px;height:80px;object-fit:cover;border-radius:8px;
  border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);color:rgba(180,220,255,.5);font-size:20px}
.ex-th .a{font-family:ui-monospace,monospace;font-size:10px;color:#7EFBFE;text-align:center;margin-top:3px}
.ex-th .x,.ex-th .dl{position:absolute;width:20px;height:20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:11px;cursor:pointer}
.ex-th .x{top:-6px;right:-6px;background:rgba(48,13,23,.9);border:1px solid rgba(255,107,129,.55);color:#FF8095}
.ex-th .dl{bottom:24px;right:-6px;background:rgba(16,24,40,.92);border:1px solid rgba(255,255,255,.24);color:#7EFBFE}
/* ════════ QUÉ FALTA PARA COBRARLA ════════
   El cristal (`backdrop-filter`) sale barato AQUÍ y no en cualquier sitio: este
   bloque vive dentro del cuerpo PLEGADO de la tarjeta, así que sólo se compone
   cuando el piloto abre una — no hay veinte desenfoques compitiendo al rodar la
   lista, que es lo que costó 75 ms por apertura en la hoja de gastos. */
#pc-tab-gastos .ex-falta{margin-top:11px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  backdrop-filter:blur(10px) saturate(1.25);-webkit-backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px -12px rgba(0,0,0,.6)}
#pc-tab-gastos .ex-falta-h{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
#pc-tab-gastos .ex-falta-h .t{font-size:8.5px;letter-spacing:.18em;font-weight:800;
  color:rgba(180,220,255,.8)}
#pc-tab-gastos .ex-falta-h .p{font-family:ui-monospace,monospace;font-size:11px;font-weight:700;
  color:rgba(180,220,255,.72);padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
/* Cuando ya no falta nada el bloque cambia de voz, no sólo de número. */
#pc-tab-gastos .ex-falta.full{border-color:rgba(78,230,174,.4)}
#pc-tab-gastos .ex-falta.full .ex-falta-h{border-bottom-color:rgba(78,230,174,.28)}
#pc-tab-gastos .ex-falta.full .ex-falta-h .t,
#pc-tab-gastos .ex-falta.full .ex-falta-h .p{color:#4EE6AE}

/* Cada requisito: rótulo pequeño, ESTADO GRANDE, y la cuenta que lo sostiene. */
#pc-tab-gastos .ex-req{padding:10px 12px 11px 15px;position:relative;
  border-top:1px solid rgba(255,255,255,.07)}
#pc-tab-gastos .ex-req:first-of-type{border-top:0}
#pc-tab-gastos .ex-req:before{content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:3px;border-radius:0 3px 3px 0;background:var(--rc)}
#pc-tab-gastos .ex-req.warn{--rc:#FFB067}
#pc-tab-gastos .ex-req.part{--rc:#7EFBFE}
#pc-tab-gastos .ex-req.ok{--rc:#4EE6AE}
#pc-tab-gastos .ex-req-k{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.1em;
  font-weight:700;color:rgba(180,220,255,.62)}
#pc-tab-gastos .ex-req-b{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:3px}
/* El estado con color: es lo único que hay que leer al pasar la lista. Grande,
   pero no tanto que grite — a 19 px se comía la tarjeta.
   ⚠️ Por debajo de 18,66 px en negrita WCAG deja de contarlo como texto grande
   y el listón sube de 3:1 a 4,5:1. Los seis colores se han vuelto a medir con
   el listón nuevo (el peor, el verde de día, da 6,53:1). */
#pc-tab-gastos .ex-req-v{font-size:15px;font-weight:800;letter-spacing:.02em;line-height:1.15;
  color:var(--rc)}
#pc-tab-gastos .ex-req.ok .ex-req-v{text-shadow:0 0 22px rgba(78,230,174,.28)}
#pc-tab-gastos .ex-req-s{font-family:ui-monospace,monospace;font-size:10.5px;
  color:rgba(180,220,255,.62);margin-top:3px}
#pc-tab-gastos .ex-req-go{flex:0 0 auto;font-size:10.5px;font-weight:800;padding:7px 12px;
  border-radius:9px;cursor:pointer;white-space:nowrap;
  background:color-mix(in srgb,var(--rc) 16%,transparent);color:var(--rc);
  border:1px solid color-mix(in srgb,var(--rc) 45%,transparent)}
#pc-tab-gastos .ex-req-go:active{transform:scale(.97)}

/* ── La casilla de «se está subiendo» ──
   Mismo tamaño que la miniatura y en su sitio de la tira: el ticket se ve
   ocupar su hueco antes de existir, que es lo que faltaba. */
.ex-th.cargando{width:64px}
.ex-carga{width:64px;height:80px;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:4px;text-align:center;
  border:1px solid rgba(126,251,254,.45);background:rgba(126,251,254,.09)}
.ex-carga .t{font-size:8px;line-height:1.25;font-weight:700;color:#7EFBFE}
/* El giro es un TRAZADO (un borde), no un carácter: no depende de la fuente
   del aparato ni se lo sustituye un emoji. */
.ex-spin{width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  border:2.5px solid rgba(126,251,254,.25);border-top-color:#7EFBFE;
  animation:ex-spin .8s linear infinite}
@keyframes ex-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ex-spin{animation-duration:2.6s}}
/* La marca de «aún sin subir». Arriba a la IZQUIERDA: la derecha es de la ✕. */
.ex-th .nb{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(60,36,10,.92);border:1px solid rgba(255,176,103,.6);color:#FFB067}
.ex-ic-nb{display:block}
/* Y la marca no se queda sola: debajo se dice qué significa y qué va a pasar. */
.ex-nosub{margin-top:8px;font-size:10px;line-height:1.5;color:rgba(255,176,103,.92);
  display:flex;gap:5px;align-items:baseline}
.ex-nosub b{color:#FFB067;font-weight:800}
.ex-nosub svg{flex:0 0 auto;position:relative;top:1px}

.ex-add{position:relative;width:64px;height:80px;border-radius:8px;border:1px dashed rgba(126,251,254,.45);
  background:rgba(126,251,254,.07);color:#7EFBFE;font-size:22px;display:flex;flex-direction:column;
  gap:4px;align-items:center;justify-content:center;cursor:pointer}
.ex-add .i{font-size:20px;line-height:1}
.ex-add .l{font-size:9px;letter-spacing:.06em;font-weight:700;opacity:.85}
/* ✦ = plan Pro (la IA lee el ticket). Antes era el propio glifo del botón; al
   partirlo en cámara/galería pasa a esquina para no comerse el icono. */
.ex-add.pro::after{content:'✦';position:absolute;top:3px;right:5px;font-size:9px;opacity:.75}
.ex-sum{font-family:ui-monospace,monospace;font-size:11px;margin-top:9px;color:rgba(180,220,255,.8);line-height:1.7}
.ex-sum b{color:#7EFBFE} .ex-sum .over{color:#FFB067} .ex-sum .okc{color:#4EE6AE}

/* selector de tipo */
.ex-tsel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.ex-topt{display:flex;align-items:center;gap:8px;padding:11px 10px;border-radius:12px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
  background:color-mix(in srgb,var(--c) 11%,rgba(16,24,40,.35))}
.ex-topt .i{font-size:15px}
.ex-topt .l{font-size:11.5px;font-weight:700;color:var(--c);line-height:1.3}
.ex-topt .l span{opacity:.72;font-weight:400}
.ex-topt:active{transform:scale(.98)}

/* ── Nº de ISO: enlace en la tarjeta y fila editable en la hoja ──────────────
   La fila vacía imita a las ex-cp de al lado a propósito: en la hoja todas las
   filas son "esto va en el portal", y ésta es la única que además se rellena. */
.ex-lnk{color:#7EFBFE;font-weight:700;text-decoration:underline;cursor:pointer}
.ex-cp.iso .v{font-family:ui-monospace,monospace;letter-spacing:.5px}
.ex-cp.vacio{opacity:.9;border-style:dashed}
.ex-cp.vacio .v{font-style:italic;opacity:.8}
.ex-isoed{margin:-4px 0 8px;padding:6px 10px;border-radius:9px;cursor:pointer;
  font-size:10.5px;font-weight:700;color:rgba(180,220,255,.85);
  background:rgba(126,251,254,.08);border:1px dashed rgba(126,251,254,.28)}
.ex-isoed:active{transform:scale(.99)}
html.day .ex-lnk{color:#0E7490}
html.day .ex-isoed{color:#475569;background:rgba(14,116,144,.07);border-color:rgba(14,116,144,.3)}

/* ── Iconos del selector de tipo ─────────────────────────────────────────────
   ✈ ⚠ 🅿 ⚕ son glifos de TEXTO: se pintan con `color`, al revés que 🛏 🔥 🎓 📋,
   que traen el suyo. Sin color propio heredaban el de la hoja y en modo noche
   salían invisibles — justo esos cuatro y ningún otro. Se les da el color del
   tipo, el mismo que ya lleva su etiqueta. */
.ex-topt .i{color:var(--c)}
html.day .ex-topt .i{color:color-mix(in srgb,var(--c) 45%,#0F172A)}

/* Lienzo propio de la pestaña — noche */
#pc-tab-gastos{
  background:
    radial-gradient(900px 500px at 20% -10%, #062a63 0%, transparent 60%),
    linear-gradient(160deg,#001940 0%,#000F32 70%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:14px 12px 18px; margin:0 -2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODO DÍA — versión azulada
   ★ Los alfa de la paleta de noche (rgba(180,220,255,.52)…) sobre blanco dan
   contraste 1.2: ilegibles. Aquí NO se reutiliza ninguno: cada color es opaco
   y está medido sobre el fondo real de esta pestaña.
   ══════════════════════════════════════════════════════════════════════════ */
html.day #pc-tab-gastos{
  background:linear-gradient(160deg,#E8F1FC 0%,#F6FAFE 60%);
  border-color:rgba(2,132,199,.18);
  box-shadow:0 4px 18px rgba(15,23,42,.10);
}
/* ── RELIEVE ──
   Con sombras al 6% y bordes al 18% todo quedaba plano: azul pálido sobre azul
   pálido. Aquí las cotas suben de verdad — sombra en dos capas (uno de contacto
   + un halo azul que separa del fondo), bordes visibles y texto más oscuro. */
html.day #pc-tab-gastos .ex-hero{
  background:linear-gradient(180deg,#CFE3F8 0%,#EAF3FD 55%,#FFFFFF 100%);
  border:1.5px solid rgba(2,132,199,.42);
  box-shadow:0 1px 2px rgba(15,23,42,.10), 0 14px 34px -14px rgba(2,132,199,.55),
             inset 0 1px 0 rgba(255,255,255,.9)}
html.day #pc-tab-gastos .ex-big{color:#064E70;text-shadow:0 1px 0 rgba(255,255,255,.85);
  letter-spacing:-.5px}
html.day #pc-tab-gastos .ex-lbl{color:#0B6E8A;font-weight:800}
html.day #pc-tab-gastos .ex-sub,
html.day #pc-tab-gastos .ex-empty{color:#3C5468}
html.day #pc-tab-gastos .ex-tile .l{color:#3C5468;font-weight:800}
/* los rótulos de sección con un acento a la izquierda: dan estructura y
   rompen la monotonía de la lista */
html.day #pc-tab-gastos .ex-sect{color:#0B6E8A;font-weight:800;
  border-left:3px solid #0EA5E9;padding-left:8px;margin-left:0}
html.day #pc-tab-gastos .ex-tile{background:#FFF;border:1.5px solid rgba(2,132,199,.3);
  box-shadow:0 1px 2px rgba(15,23,42,.07)}
html.day #pc-tab-gastos .ex-tile .n{color:#0F172A}
html.day #pc-tab-gastos .ex-tile.ok{background:#E7FBF3;border-color:#34D399}
html.day #pc-tab-gastos .ex-tile.ok .n{color:#036B4B}
html.day #pc-tab-gastos .ex-tile.warn{background:#FFF3E4;border-color:#FB923C}
html.day #pc-tab-gastos .ex-tile.warn .n{color:#9A3412}

html.day #pc-tab-gastos .ex-new{background:rgba(2,132,199,.1);
  border:1.5px dashed rgba(2,132,199,.55);color:#0B6E8A;font-weight:800}

/* la tarjeta despega del fondo: contacto + halo, y el color del tipo se
   derrama hacia dentro para que la tira no sea una raya suelta */
html.day #pc-tab-gastos .ex-day{
  background:linear-gradient(180deg,#FFFFFF,#FBFDFF);
  border:1.5px solid rgba(2,132,199,.3);
  box-shadow:0 1px 2px rgba(15,23,42,.09), 0 10px 26px -14px rgba(2,132,199,.5)}
html.day #pc-tab-gastos .ex-day:before{width:6px;
  box-shadow:6px 0 14px -6px color-mix(in srgb,var(--tcol) 75%,transparent)}
html.day #pc-tab-gastos .ex-day.done{border-color:rgba(15,23,42,.14);box-shadow:none}
html.day #pc-tab-gastos .ex-dd{color:#334155;font-weight:700}
html.day #pc-tab-gastos .ex-route,
html.day #pc-tab-gastos .ex-ln .k{color:#3C5468}
html.day #pc-tab-gastos .ex-ln .k span,
html.day #pc-tab-gastos .ex-slotlbl{color:#52697E}
html.day #pc-tab-gastos .ex-title{color:#0B1220;font-size:14px}
html.day #pc-tab-gastos .ex-ln .v{color:#0B1220}
html.day #pc-tab-gastos .ex-amt{color:#064E70;text-shadow:0 1px 0 rgba(255,255,255,.8)}
html.day #pc-tab-gastos .ex-amt small{color:#52697E;font-weight:800}
/* la barra de franjas también estaba plana */
html.day #pc-tab-gastos .ex-slotbar{background:#EEF4FA;border:1.5px solid rgba(2,132,199,.28);
  box-shadow:inset 0 1px 3px rgba(15,23,42,.08)}
html.day #pc-tab-gastos .ex-sl.on{background:linear-gradient(180deg,#7DD3FC,#38BDF8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
html.day #pc-tab-gastos .ex-sl.cat{background:rgba(15,23,42,.1)}
html.day #pc-tab-gastos .ex-sl.vou{background:rgba(139,92,246,.28)}
html.day #pc-tab-gastos .ex-day.done .ex-amt{color:#047857}
html.day #pc-tab-gastos .ex-mes{border-bottom-color:rgba(2,132,199,.22)}
html.day #pc-tab-gastos .ex-mes .m{color:#0E7490}
html.day #pc-tab-gastos .ex-mesbar .m{color:#3C5468}
html.day #pc-tab-gastos .ex-mes .s{color:#455E75}
/* En modo día el panel es claro —y la hoja de detalle también (`#F6FAFE`)—: el
   rojo claro de noche se queda en un fantasma. Manda el rojo oscuro, que es el
   que la app ya usa en día. Sin `#pc-tab-gastos`, por lo mismo que el bloque de
   noche: la hoja cuelga de `<body>` y ese ancla no la alcanza.
   Las DOS paletas hacen falta aquí de verdad: este botón sí cambia de fondo
   —navy `#001233` de noche, casi blanco de día—, al revés que la tarjeta del día
   del roster, que no cambia y por eso lleva una sola. */
html.day .ex-del{border-color:rgba(185,28,28,.38);
  background:rgba(185,28,28,.07);color:#B91C1C}
html.day .ex-del:active{background:rgba(185,28,28,.16)}
/* ── Rediseño de la lista, en modo día ──
   Los alfa de la noche sobre panel casi blanco dan 1,2:1. Cada color es opaco y
   medido sobre el fondo real de esta pestaña, igual que el resto del bloque. */
html.day #pc-tab-gastos .ex-pbar{background:#D5E2EE}
html.day #pc-tab-gastos .ex-pbar i{background:linear-gradient(90deg,#0EA5E9,#059669)}
html.day #pc-tab-gastos .ex-sub b{color:#0B1220}
html.day #pc-tab-gastos .ex-real.warn{background:#FFF3E4;border-color:#FB923C;color:#37506A}
html.day #pc-tab-gastos .ex-real.warn b{color:#9A3412}
html.day #pc-tab-gastos .ex-real.bad{background:#FEF2F2;border-color:#FCA5A5;color:#37506A}
html.day #pc-tab-gastos .ex-real.bad b{color:#B91C1C}
html.day #pc-tab-gastos .ex-real.info{background:#F1F6FB;border-color:rgba(2,132,199,.28);color:#37506A}
html.day #pc-tab-gastos .ex-real.info b{color:#0B1220}
html.day #pc-tab-gastos .ex-paso{background:#FFF;border:1.5px solid rgba(2,132,199,.3);
  box-shadow:0 1px 2px rgba(15,23,42,.07)}
html.day #pc-tab-gastos .ex-paso .n{color:#0F172A}
html.day #pc-tab-gastos .ex-paso .l{color:#3C5468;font-weight:800}
html.day #pc-tab-gastos .ex-paso.on{background:#E0F2FE;border-color:#0284C7}
html.day #pc-tab-gastos .ex-paso.on .n,html.day #pc-tab-gastos .ex-paso.on .l{color:#0B4A6F}
html.day #pc-tab-gastos .ex-paso.urge .n,
html.day #pc-tab-gastos .ex-paso.on.urge .n{color:#9A3412}
/* El color del tipo (ámbar #FBB040, violeta #C4B0FF…) es de paleta de NOCHE: en
   un icono sobre blanco se queda en un fantasma. Se oscurece hacia la tinta,
   que es lo que ya hace el selector de tipo (.ex-topt .i) unas líneas arriba. */
html.day #pc-tab-gastos .ex-ico{background:color-mix(in srgb,var(--tcol) 20%,#FFF);
  border-color:color-mix(in srgb,var(--tcol) 55%,#FFF);
  color:color-mix(in srgb,var(--tcol) 45%,#0F172A)}
/* ── La cabecera de tipo, de día ──
   La tarjeta pasa a blanca y los ocho colores de tipo están elegidos contra un
   fondo OSCURO: son pasteles (#C4B0FF, #9BDEFF, #4EE6AE…) y sobre blanco se
   quedan en fantasma, tanto el rótulo como el lavado. Se mezclan hacia el negro
   para el texto y hacia el blanco para el fondo — la misma receta que ya usa
   `.ex-ico` aquí al lado, no una paleta nueva. Y la marca grande sube de opacidad:
   al 13 % sobre blanco no se ve, y al 22 % sobre oscuro sería una mancha. */
html.day #pc-tab-gastos .ex-tipo{
  border-bottom-color:color-mix(in srgb,var(--tcol) 55%,#FFF);
  box-shadow:0 1px 10px -4px color-mix(in srgb,var(--tcol) 70%,#FFF);
  background-image:linear-gradient(100deg,
    color-mix(in srgb,var(--tcol) 30%,#FFF) 0%,
    color-mix(in srgb,var(--tcol) 12%,#FFF) 38%,
    color-mix(in srgb,var(--tcol) 0%,#FFF) 78%)}
html.day #pc-tab-gastos .ex-tipo-marca{opacity:.22;
  color:color-mix(in srgb,var(--tcol) 62%,#0F172A)}
html.day #pc-tab-gastos .ex-tipo-ic{color:color-mix(in srgb,var(--tcol) 45%,#0F172A)}
html.day #pc-tab-gastos .ex-tipo-k{color:#475569}
html.day #pc-tab-gastos .ex-tipo-v{color:color-mix(in srgb,var(--tcol) 30%,#0F172A)}
html.day #pc-tab-gastos .ex-caret{color:#52697E}
html.day #pc-tab-gastos .ex-tkchip{background:#FFF3E4;border-color:#FB923C;color:#9A3412}
html.day #pc-tab-gastos .ex-tkchip.ok{background:#E7FBF3;border-color:#34D399;color:#036B4B}
html.day #pc-tab-gastos .ex-plazo.warn{background:#FFF3E4;color:#9A3412}
html.day #pc-tab-gastos .ex-plazo.bad{background:#FEF2F2;color:#B91C1C}

html.day #pc-tab-gastos .ex-legend{color:#455E75}
html.day #pc-tab-gastos .ex-legend b{color:#0E7490}
html.day #pc-tab-gastos .ex-legend i{color:#6D28D9}
html.day #pc-tab-gastos .ex-lines{border-top-color:rgba(15,23,42,.1)}
html.day #pc-tab-gastos .ex-slotbar{background:#F1F5F9;border-color:rgba(15,23,42,.1)}
html.day #pc-tab-gastos .ex-sl{border-right-color:rgba(15,23,42,.08)}
html.day #pc-tab-gastos .ex-sl.on{background:rgba(2,132,199,.2)}
html.day #pc-tab-gastos .ex-sl.cat{background:rgba(15,23,42,.05)}
html.day #pc-tab-gastos .ex-sl.vou{background:rgba(139,92,246,.16)}
/* meses, tres números y desglose en modo día — los verdes y ámbares de la
   noche pierden contraste sobre blanco, así que bajan de tono */
html.day #pc-tab-gastos .ex-real{background:#E7FBF3;border-color:#34D399;color:#37506A}
html.day #pc-tab-gastos .ex-real b{color:#036B4B}
html.day #pc-tab-gastos .ex-nube{color:#52697E}
html.day #pc-tab-gastos .ex-nube.warn{color:#9A3412}
html.day #pc-tab-gastos .ex-nube.ok{color:#036B4B}
html.day #pc-tab-gastos .ex-tile.cash{background:#E7FBF3;border-color:#34D399}
html.day #pc-tab-gastos .ex-tile.cash .n{color:#036B4B}
html.day #pc-tab-gastos .ex-mchip{background:#FFF;border:1.5px solid rgba(2,132,199,.28);color:#3C5468}
html.day #pc-tab-gastos .ex-mchip span{color:#52697E}
html.day #pc-tab-gastos .ex-mchip.on{background:#E0F2FE;border-color:#0284C7;color:#0B4A6F}
html.day #pc-tab-gastos .ex-mchip.on span{color:#0B4A6F}
html.day #pc-tab-gastos .ex-mchip.urge:after{background:#C2410C;box-shadow:none}
html.day #pc-tab-gastos .ex-ln .k b{color:#52697E}
html.day #pc-tab-gastos .ex-ln .v i{color:#036B4B}
html.day #pc-tab-gastos .ex-ln .v i.no,
html.day #pc-tab-gastos .ex-ln .v i.over{color:#9A3412}
html.day #pc-tab-gastos .ex-amt em{color:#036B4B;text-shadow:none}
html.day #pc-tab-gastos .ex-dsg{background:#FFF;border:1.5px solid rgba(2,132,199,.28)}
html.day #pc-tab-gastos .ex-dsg-r{border-bottom-color:rgba(15,23,42,.08)}
html.day #pc-tab-gastos .ex-dsg-r .d{color:#52697E}
html.day #pc-tab-gastos .ex-dsg-r .c{color:#0B1220}
html.day #pc-tab-gastos .ex-dsg-r .c span{color:#52697E}
html.day #pc-tab-gastos .ex-dsg-r .t{color:#0B1220}
html.day #pc-tab-gastos .ex-dsg-r .k{color:#036B4B}
html.day #pc-tab-gastos .ex-dsg-r .k.no,
html.day #pc-tab-gastos .ex-dsg-r .k.over{color:#9A3412}
html.day #pc-tab-gastos .ex-dsg-r.hd,
html.day #pc-tab-gastos .ex-dsg-r.hd .d,
html.day #pc-tab-gastos .ex-dsg-r.hd .t,
html.day #pc-tab-gastos .ex-dsg-r.hd .k{color:#52697E}
html.day #pc-tab-gastos .ex-dsg-r.tot .d{color:#334155}
html.day #pc-tab-gastos .ex-dsg-r.tot .c b{color:#036B4B}
html.day #pc-tab-gastos .ex-dsg-f{color:#52697E}
html.day #pc-tab-gastos .ex-dsg-f b{color:#334155}
/* el color del tipo se oscurece: en claro, el ámbar puro no se lee */
html.day #pc-tab-gastos .ex-chip.tipo{
  background:color-mix(in srgb,var(--tcol) 20%,#fff);
  border-color:color-mix(in srgb,var(--tcol) 55%,#fff);
  color:color-mix(in srgb,var(--tcol) 45%,#0F172A)}
html.day #pc-tab-gastos .ex-chip.int{background:#E0F2FE;border-color:#7DD3FC;color:#075985}
html.day #pc-tab-gastos .ex-chip.ok{background:#ECFDF5;border-color:#6EE7B7;color:#047857}

/* controles y hoja, también en claro */
/* el botón principal, relleno: en claro un borde suave no se lee como botón */
html.day .ex-btn{background:linear-gradient(180deg,#0EA5E9,#0284C7);
  border:1px solid #0369A1;color:#fff;font-weight:800;
  box-shadow:0 1px 2px rgba(15,23,42,.15),inset 0 1px 0 rgba(255,255,255,.28)}
html.day .ex-btn.ghost{background:#FFF;border:1.5px solid rgba(15,23,42,.18);color:#334155;
  box-shadow:0 1px 2px rgba(15,23,42,.06)}
html.day .ex-btn.solid{background:linear-gradient(180deg,#10B981,#059669);color:#fff}
html.day .ex-btn.danger{border-color:#FCA5A5;color:#B91C1C;background:#FEF2F2}
html.day .ex-note{color:#455E75} html.day .ex-note b{color:#B45309}
html.day .ex-plan{background:#FFF7ED;border-color:#FDBA74;color:#7C2D12}
html.day .ex-plan b{color:#B45309}
html.day .ex-sheet{background:rgba(15,23,42,.62)}
html.day .ex-sheetin{background:linear-gradient(180deg,#F6FAFE,#E8F1FC);
  border-color:rgba(2,132,199,.22)}
html.day .ex-grab{background:rgba(15,23,42,.2)}
html.day .ex-lbl2,html.day .ex-grp,html.day .ex-sh-s{color:#455E75}
html.day .ex-sh-t,html.day .ex-sh-s b{color:#0F172A}
html.day .ex-cp{background:#FFF;border-color:rgba(2,132,199,.18)}
html.day .ex-cp .k{color:#455E75} html.day .ex-cp .v{color:#0F172A}
html.day .ex-cp .h{color:#64748B} html.day .ex-cp .c{color:#0E7490}
html.day .ex-cp.copied{background:#ECFDF5;border-color:#6EE7B7}
html.day .ex-cp.iso{background:#FFF7ED;border-color:#FDBA74}
html.day .ex-cp.iso .k{color:#B45309}
html.day .ex-in{background:#FFF;border-color:rgba(2,132,199,.38);color:#0F172A}
html.day .ex-tk{background:#FFF;border-color:rgba(2,132,199,.25)}
html.day .ex-tkhead .k{color:#455E75} html.day .ex-tkhead .n{color:#475569}
html.day .ex-add{background:rgba(2,132,199,.08);border-color:rgba(2,132,199,.42);color:#0E7490}
html.day .ex-th .a{color:#0E7490}
html.day .ex-noimg{background:#F1F5F9;color:#64748B}
/* modo día: los alfa de noche sobre panel blanco dan 1,2:1 — cada color opaco */
html.day .ex-carga{background:#E0F2FE;border-color:#0284C7}
html.day .ex-carga .t{color:#0B4A6F}
html.day .ex-spin{border-color:rgba(2,132,199,.25);border-top-color:#0284C7}
html.day .ex-th .nb{background:#FFF3E4;border-color:#FB923C;color:#9A3412}
html.day .ex-nosub{color:#7C4A16}
html.day .ex-nosub b{color:#9A3412}
/* ── «Qué falta» en modo día ──
   El panel de la tarjeta es casi blanco: el cristal se hace con un velo CLARO y
   los tres colores bajan de tono, porque los de noche sobre blanco se quedan en
   fantasmas (el cian #7EFBFE da 1,3:1). Medidos uno a uno. */
html.day #pc-tab-gastos .ex-falta{
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(240,248,255,.55));
  border-color:rgba(2,132,199,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px -12px rgba(2,132,199,.7)}
html.day #pc-tab-gastos .ex-falta-h{border-bottom-color:rgba(2,132,199,.2)}
html.day #pc-tab-gastos .ex-falta-h .t{color:#0B6E8A}
html.day #pc-tab-gastos .ex-falta-h .p{color:#3C5468;background:#FFF;border-color:rgba(2,132,199,.28)}
html.day #pc-tab-gastos .ex-falta.full{border-color:#34D399}
html.day #pc-tab-gastos .ex-falta.full .ex-falta-h{border-bottom-color:rgba(52,211,153,.5)}
html.day #pc-tab-gastos .ex-falta.full .ex-falta-h .t,
html.day #pc-tab-gastos .ex-falta.full .ex-falta-h .p{color:#036B4B}
html.day #pc-tab-gastos .ex-req{border-top-color:rgba(15,23,42,.09)}
html.day #pc-tab-gastos .ex-req.warn{--rc:#9A3412}
html.day #pc-tab-gastos .ex-req.part{--rc:#0B4A6F}
html.day #pc-tab-gastos .ex-req.ok{--rc:#036B4B}
html.day #pc-tab-gastos .ex-req-k{color:#3C5468}
html.day #pc-tab-gastos .ex-req-s{color:#3C5468}
html.day #pc-tab-gastos .ex-req.ok .ex-req-v{text-shadow:none}
html.day #pc-tab-gastos .ex-req-go{background:color-mix(in srgb,var(--rc) 12%,#FFF);
  border-color:color-mix(in srgb,var(--rc) 40%,#FFF)}
html.day .ex-sum{color:#475569} html.day .ex-sum b{color:#0E7490}
html.day .ex-sum .over{color:#B45309} html.day .ex-sum .okc{color:#047857}
html.day .ex-topt{border-color:color-mix(in srgb,var(--c) 45%,#fff);
  background:color-mix(in srgb,var(--c) 14%,#fff)}
html.day .ex-topt .l{color:color-mix(in srgb,var(--c) 45%,#0F172A)}

/* ══════════════════════════════════════════════════════════════════════════
   ENVIAR LA NOTA A VUELING — botón, estado y confirmación en dos pasos
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El botón de tres estados ──
   Mismo molde que el resto de botones del módulo (.ex-btn: borde de 1px, fondo
   translúcido, texto del color) — sólo cambia el COLOR, que es el que cuenta en
   qué punto está la nota:
       cian  ✈ ENVIAR    lo que te toca hacer
       VERDE ✓ ENVIADA   está en Vueling — el hito que importa
       oro   € PAGADA    cobrada, cerrada
       rojo  ↻ / ✕       no salió, o la tumbaron
   El verde es para ENVIADA a propósito: enviarla es lo que depende de ti y lo
   que se te olvida; cobrarla llega solo. El oro remata el ciclo sin competir
   con el verde — y no es el ámbar de "atención", que aquí sería mentira.
   Nada de degradados ni brillos: la app es sobria y este botón no es especial,
   es el mismo botón contando otra cosa. */
.ex-btn.cic{flex:1;font-weight:800;letter-spacing:.02em}
.ex-btn.cic.go  {border-color:rgba(126,251,254,.55);background:rgba(126,251,254,.16);color:#7EFBFE}
.ex-btn.cic.sent{border-color:rgba(78,230,174,.6);background:rgba(78,230,174,.16);color:#4EE6AE}
.ex-btn.cic.paid{border-color:rgba(245,197,66,.6);background:rgba(245,197,66,.15);color:#F5C542}
.ex-btn.cic.err {border-color:rgba(255,128,149,.55);background:rgba(255,128,149,.14);color:#FF8095}
.ex-btn.cic .ex-dots{margin-right:5px}
.ex-sent-note{flex:1;text-align:center;padding:10px;border-radius:10px;font-size:11px;
  font-weight:700;color:#4EE6AE;background:rgba(78,230,174,.1);
  border:1px solid rgba(78,230,174,.32)}

/* ── La tarjeta entera se tiñe del estado ──
   El borde y un velo de fondo; la barra vertical de la izquierda NO se toca,
   que ésa dice de qué tipo es la nota. Los velos son bajos a propósito (.06-.10):
   con seis tarjetas seguidas en pantalla, más color sería una verbena. */
#pc-tab-gastos .ex-day.st-sent{border-color:rgba(78,230,174,.45);
  background:linear-gradient(180deg,rgba(78,230,174,.09),rgba(16,24,40,.44))}
#pc-tab-gastos .ex-day.st-paid{border-color:rgba(245,197,66,.45);
  background:linear-gradient(180deg,rgba(245,197,66,.09),rgba(16,24,40,.44))}
#pc-tab-gastos .ex-day.st-err,
#pc-tab-gastos .ex-day.st-rej{border-color:rgba(255,128,149,.45);
  background:linear-gradient(180deg,rgba(255,128,149,.09),rgba(16,24,40,.44))}
#pc-tab-gastos .ex-day.st-sending{border-color:rgba(126,251,254,.5);
  background:linear-gradient(180deg,rgba(126,251,254,.08),rgba(16,24,40,.44))}
/* Una nota enviada o cobrada ya NO se apaga: antes "pasada" significaba
   archivada y se atenuaba al 55%, pero ahora tiene su propio color y apagarlo
   sería quitarle justo la información que acabamos de darle. */
#pc-tab-gastos .ex-day.done.st-sent,
#pc-tab-gastos .ex-day.done.st-paid,
#pc-tab-gastos .ex-day.done.st-rej{opacity:1}

/* ── El chip de estado, a la derecha del importe ── */
.ex-envio{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  padding:5px 9px 5px 7px;border-radius:999px;border:1px solid;
  font-size:9px;font-weight:800;letter-spacing:.11em;white-space:nowrap}
/* El símbolo, a pelo y del color del chip. Metido en un círculo relleno se
   volvía una bolita negra: a 14px no cabe un glifo legible en negativo. */
.ex-envio .i{display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;font-weight:900}
.ex-envio i{font-style:normal;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:8.5px;letter-spacing:0;opacity:.72;font-weight:600}
.ex-envio.ok  {color:#4EE6AE;border-color:rgba(78,230,174,.5);background:rgba(78,230,174,.12)}
.ex-envio.paid{color:#F5C542;border-color:rgba(245,197,66,.6);
  background:linear-gradient(135deg,rgba(245,197,66,.2),rgba(245,197,66,.07))}
.ex-envio.bad {color:#FF8095;border-color:rgba(255,128,149,.5);background:rgba(255,128,149,.12);cursor:pointer}
.ex-envio.warn{color:#FFB067;border-color:rgba(255,176,103,.5);background:rgba(255,176,103,.12);cursor:pointer}
.ex-envio.go  {color:#7EFBFE;border-color:rgba(126,251,254,.5);background:rgba(126,251,254,.12)}
/* Tres puntos que respiran: dice "está pasando algo" sin ocupar sitio ni girar
   como una ruedecita, que en una lista larga marea. */
.ex-dots{display:inline-flex;gap:3px;align-items:center;margin-left:1px}
.ex-dots b{width:3px;height:3px;border-radius:50%;background:currentColor;
  animation:exDot 1.15s ease-in-out infinite}
.ex-dots b:nth-child(2){animation-delay:.16s}
.ex-dots b:nth-child(3){animation-delay:.32s}
@keyframes exDot{0%,60%,100%{opacity:.25;transform:translateY(0)}
                 30%{opacity:1;transform:translateY(-2px)}}

/* ── La confirmación ──
   SIN backdrop-filter, por lo mismo que la hoja de tickets: un blur a pantalla
   completa se nota en el iPad cada vez que algo repinta detrás. Fondo sólido. */
/* ⚠️ POR ENCIMA DE LA HOJA (.ex-sheet va a 9999).
   Con 9600 esto se abría DETRÁS: el piloto tocaba «motivo» y no pasaba nada
   aparente — el selector estaba ahí, tapado por la hoja, y sólo se veía al
   cerrarla. Un modal que sale de otro modal tiene que ir siempre por encima
   del que lo abre; si mañana la hoja sube de número, esto sube detrás. */
.ex-send{position:fixed;inset:0;z-index:10050;display:none}
.ex-send.on{display:block}
.ex-send-back{position:absolute;inset:0;background:rgba(3,10,22,.72)}
.ex-send-box{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(460px,100%);max-height:88vh;overflow:auto;
  border-radius:22px 22px 0 0;border:1px solid rgba(126,251,254,.24);border-bottom:none;
  background:linear-gradient(180deg,#101B2E,#0A1220);
  box-shadow:0 -18px 50px rgba(0,0,0,.55);
  animation:exUp .26s cubic-bezier(.2,.9,.3,1)}
@media(min-width:520px){
  .ex-send-box{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:22px;
    border-bottom:1px solid rgba(126,251,254,.24);animation:exPop .22s cubic-bezier(.2,.9,.3,1)}
}
@keyframes exUp{from{transform:translate(-50%,26px);opacity:0}}
@keyframes exPop{from{transform:translate(-50%,-46%);opacity:0}}

.ex-send-h{padding:22px 20px 16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(59,130,246,.16),transparent)}
.ex-send-h.go{background:linear-gradient(180deg,rgba(34,211,238,.2),transparent)}
.ex-send-h.stop{background:linear-gradient(180deg,rgba(255,176,103,.18),transparent)}
.ex-send-ic{width:46px;height:46px;margin:0 auto 10px;border-radius:50%;font-size:21px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(126,251,254,.14);border:1px solid rgba(126,251,254,.4)}
.ex-send-h.stop .ex-send-ic{background:rgba(255,176,103,.14);border-color:rgba(255,176,103,.45)}
.ex-send-t{font-size:16px;font-weight:800;color:#EAF4FF;letter-spacing:-.01em}
.ex-send-s{font-size:11px;color:rgba(180,220,255,.6);margin-top:4px}
.ex-send-s b{color:#7EFBFE}

.ex-send-body{padding:16px 18px 6px}
.ex-send-k{font-size:8.5px;letter-spacing:.2em;font-weight:800;color:rgba(180,220,255,.5);
  margin:13px 0 5px}
.ex-send-k:first-child{margin-top:0}
.ex-send-k span{letter-spacing:.02em;font-weight:600;text-transform:none;opacity:.72}
.ex-send-v{font-size:13px;font-weight:700;color:#EAF4FF}
.ex-send-txt{width:100%;box-sizing:border-box;padding:10px 11px;border-radius:11px;resize:vertical;
  font-family:inherit;font-size:12.5px;line-height:1.45;
  background:rgba(8,14,26,.65);border:1px solid rgba(126,251,254,.26);color:#EAF4FF}
.ex-send-txt:focus{outline:none;border-color:rgba(126,251,254,.6)}

.ex-send-lines{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.09)}
.ex-send-l{display:flex;align-items:center;gap:9px;padding:9px 11px;font-size:11.5px;
  background:rgba(255,255,255,.028)}
.ex-send-l+.ex-send-l{border-top:1px solid rgba(255,255,255,.07)}
.ex-send-l .d{flex:0 0 62px;color:rgba(180,220,255,.62);font-weight:700;font-size:10.5px}
.ex-send-l .s{flex:1;color:#EAF4FF;font-weight:600}
.ex-send-l .m{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:700;color:#7EFBFE}
.ex-send-tot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;
  padding:11px 13px;border-radius:12px;
  background:linear-gradient(135deg,rgba(126,251,254,.14),rgba(59,130,246,.08));
  border:1px solid rgba(126,251,254,.3)}
.ex-send-tot span{font-size:9px;letter-spacing:.2em;font-weight:800;color:rgba(180,220,255,.7)}
.ex-send-tot b{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:19px;color:#7EFBFE}
.ex-send-tk{margin-top:9px;font-size:11px;color:rgba(180,220,255,.62)}

.ex-send-warn{font-size:12px;line-height:1.6;color:rgba(255,215,190,.92);
  padding:12px 13px;border-radius:12px;
  background:rgba(255,138,40,.13);border:1px solid rgba(255,150,60,.42)}
.ex-send-warn b{color:#FFB067}
.ex-pegas{margin:0;padding-left:18px;font-size:12px;line-height:1.65;color:rgba(180,220,255,.82)}
.ex-pegas li+li{margin-top:7px}
.ex-pegas b{color:#FFB067}

/* La casilla es el segundo cerrojo: sin marcarla el botón se queda apagado y no
   hace nada aunque se pulse (comprobado también en el JS, no sólo con CSS). */
.ex-send-chk{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 12px;
  border-radius:12px;cursor:pointer;font-size:12px;color:rgba(180,220,255,.85);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.ex-send-chk input{width:17px;height:17px;accent-color:#22D3EE;flex:0 0 auto}
.ex-send-foot{display:flex;gap:9px;padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
.ex-send-foot .ex-btn{margin:0}
.ex-btn.off{opacity:.4;pointer-events:none;filter:grayscale(.5)}

/* ── Modo día ──
   Los alfa de la paleta nocturna sobre blanco se quedan en contraste 1.x. Aquí
   van todos opacos, como en el resto del módulo. */
html.day .ex-btn.send{background:linear-gradient(135deg,#0891B2,#2563EB);color:#fff;
  box-shadow:0 3px 12px rgba(37,99,235,.28)}
html.day .ex-btn.send.retry{background:linear-gradient(135deg,#EA580C,#C2410C);color:#fff}
html.day .ex-sent-note{color:#047857;background:#ECFDF5;border-color:#6EE7B7}
html.day .ex-envio.ok  {color:#047857;background:#ECFDF5;border-color:#6EE7B7}
html.day .ex-envio.paid{color:#92400E;background:#FEF3C7;border-color:#F5C542;box-shadow:none}
/* #0E7490 (el cian de día del módulo) sobre este fondo se quedaba en 4.29, y el
   texto del botón es pequeño y en negrita — no llega a "texto grande", así que
   el mínimo son 4.5. Un tono más oscuro y a 5.6. Medido, no estimado. */
html.day .ex-btn.cic.go  {background:rgba(2,132,199,.1);border-color:rgba(2,132,199,.45);color:#155E75}
html.day .ex-btn.cic.sent{background:#ECFDF5;border-color:#6EE7B7;color:#047857}
html.day .ex-btn.cic.paid{background:#FEF3C7;border-color:#F5C542;color:#92400E}
html.day .ex-btn.cic.err {background:#FEF2F2;border-color:#FCA5A5;color:#B91C1C}
html.day #pc-tab-gastos .ex-day.st-sent{background:#F0FDF9;border-color:#6EE7B7}
html.day #pc-tab-gastos .ex-day.st-paid{background:#FFFBEB;border-color:#F5C542}
html.day #pc-tab-gastos .ex-day.st-err,
html.day #pc-tab-gastos .ex-day.st-rej{background:#FEF2F2;border-color:#FCA5A5}
html.day #pc-tab-gastos .ex-day.st-sending{background:#ECFEFF;border-color:#67E8F9}
html.day .ex-envio.bad {color:#B91C1C;background:#FEF2F2;border-color:#FCA5A5}
html.day .ex-envio.warn{color:#B45309;background:#FFF7ED;border-color:#FDBA74}
html.day .ex-envio.go  {color:#0E7490;background:#ECFEFF;border-color:#67E8F9}
html.day .ex-envio .i{color:#fff}
html.day .ex-send-back{background:rgba(15,23,42,.55)}
html.day .ex-send-box{background:linear-gradient(180deg,#F6FAFE,#E8F1FC);
  border-color:rgba(2,132,199,.22)}
html.day .ex-send-h{border-bottom-color:rgba(2,132,199,.14);
  background:linear-gradient(180deg,rgba(2,132,199,.1),transparent)}
html.day .ex-send-h.stop{background:linear-gradient(180deg,rgba(234,88,12,.12),transparent)}
html.day .ex-send-ic{background:#ECFEFF;border-color:#67E8F9}
html.day .ex-send-h.stop .ex-send-ic{background:#FFF7ED;border-color:#FDBA74}
html.day .ex-send-t{color:#0F172A}
html.day .ex-send-s{color:#455E75} html.day .ex-send-s b{color:#0E7490}
html.day .ex-send-k{color:#455E75} html.day .ex-send-v{color:#0F172A}
html.day .ex-send-txt{background:#FFF;border-color:rgba(2,132,199,.3);color:#0F172A}
html.day .ex-send-lines{border-color:rgba(2,132,199,.18)}
html.day .ex-send-l{background:#FFF}
html.day .ex-send-l+.ex-send-l{border-top-color:rgba(2,132,199,.14)}
html.day .ex-send-l .d{color:#64748B} html.day .ex-send-l .s{color:#0F172A}
html.day .ex-send-l .m{color:#0E7490}
html.day .ex-send-tot{background:#ECFEFF;border-color:#67E8F9}
html.day .ex-send-tot span{color:#455E75} html.day .ex-send-tot b{color:#0E7490}
html.day .ex-send-tk{color:#455E75}
html.day .ex-send-warn{background:#FFF7ED;border-color:#FDBA74;color:#7C2D12}
html.day .ex-send-warn b{color:#B45309}
html.day .ex-pegas{color:#334155} html.day .ex-pegas b{color:#B45309}
html.day .ex-send-chk{background:#FFF;border-color:rgba(2,132,199,.18);color:#334155}

/* Quien haya pedido menos movimiento en el sistema, que no lo tenga. */
@media (prefers-reduced-motion: reduce){
  .ex-btn.send:after{display:none}
  .ex-dots b{animation:none;opacity:.7}
  .ex-send-box{animation:none}
}

/* ── Aviso de notas rechazadas ──
   Rojo mientras haya rechazos sin abrir; apagado cuando ya los has visto. No
   desaparece nunca: son 599 € en la cuenta con la que se probó, y el histórico
   tiene que seguir a mano. */
#pc-tab-gastos .ex-rech{display:flex;align-items:center;gap:11px;margin-top:10px;
  padding:12px 13px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(16,24,40,.42)}
#pc-tab-gastos .ex-rech.nuevo{border-color:rgba(255,128,149,.55);
  background:linear-gradient(180deg,rgba(255,128,149,.14),rgba(16,24,40,.42))}
#pc-tab-gastos .ex-rech-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;
  color:rgba(180,220,255,.6);background:rgba(255,255,255,.08)}
#pc-tab-gastos .ex-rech.nuevo .ex-rech-ic{color:#2B0710;background:#FF8095}
#pc-tab-gastos .ex-rech-tx{flex:1;min-width:0}
#pc-tab-gastos .ex-rech-tx b{display:block;font-size:12.5px;font-weight:800;color:rgba(180,220,255,.85)}
#pc-tab-gastos .ex-rech.nuevo .ex-rech-tx b{color:#FF8095}
#pc-tab-gastos .ex-rech-tx span{display:block;font-size:10.5px;margin-top:2px;color:rgba(180,220,255,.55)}
#pc-tab-gastos .ex-rech-go{flex:0 0 auto;font-size:18px;color:rgba(180,220,255,.4)}

/* La lista, dentro de la hoja de siempre */
.ex-rj{margin-top:10px;padding:11px 12px;border-radius:12px;
  border:1px solid rgba(255,128,149,.3);background:rgba(255,128,149,.07)}
.ex-rj-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ex-rj-h .n{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11.5px;font-weight:700;color:#FF8095}
.ex-rj-h .m{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;font-weight:700;color:#EAF4FF}
.ex-rj-d{font-size:10px;letter-spacing:.1em;color:rgba(180,220,255,.5);margin-top:2px}
.ex-rj-r{font-size:12px;line-height:1.5;color:rgba(255,215,220,.9);margin-top:7px;
  padding-top:7px;border-top:1px solid rgba(255,128,149,.2)}

html.day #pc-tab-gastos .ex-rech{background:#FFF;border-color:rgba(2,132,199,.18)}
html.day #pc-tab-gastos .ex-rech.nuevo{background:#FEF2F2;border-color:#FCA5A5}
html.day #pc-tab-gastos .ex-rech-ic{color:#64748B;background:#F1F5F9}
html.day #pc-tab-gastos .ex-rech.nuevo .ex-rech-ic{color:#fff;background:#DC2626}
html.day #pc-tab-gastos .ex-rech-tx b{color:#334155}
html.day #pc-tab-gastos .ex-rech.nuevo .ex-rech-tx b{color:#B91C1C}
html.day #pc-tab-gastos .ex-rech-tx span{color:#475569}   /* 4.35 → 6.0 sobre el rojo claro */
html.day #pc-tab-gastos .ex-rech-go{color:#94A3B8}
html.day .ex-rj{background:#FEF2F2;border-color:#FCA5A5}
html.day .ex-rj-h .n{color:#B91C1C} html.day .ex-rj-h .m{color:#0F172A}
html.day .ex-rj-d{color:#64748B} html.day .ex-rj-r{color:#7F1D1D;border-top-color:#FCA5A5}

/* ── Enviar varias de una vez ──
   El enlace vive en la cabecera de la sección, no en un menú: lo que no se ve
   no se usa. */
#pc-tab-gastos .ex-selbtn{float:right;font-size:10px;font-weight:800;letter-spacing:.06em;
  cursor:pointer;color:#7EFBFE;text-transform:none}
html.day #pc-tab-gastos .ex-selbtn{color:#155E75}

/* La tarjeta entera hace de casilla — en el móvil, acertar en un cuadradito de
   18px con prisa es pedir demasiado. La casilla es la señal, no el objetivo. */
#pc-tab-gastos .ex-day.selble{cursor:pointer;padding-right:40px}
#pc-tab-gastos .ex-day.marcada{border-color:rgba(126,251,254,.75);
  box-shadow:0 0 0 1px rgba(126,251,254,.35) inset}
#pc-tab-gastos .ex-tick{position:absolute;top:12px;right:12px;width:22px;height:22px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#04131F;
  border:1.5px solid rgba(126,251,254,.5);background:rgba(126,251,254,.08)}
#pc-tab-gastos .ex-day.marcada .ex-tick{background:#7EFBFE;border-color:#7EFBFE}
html.day #pc-tab-gastos .ex-day.marcada{border-color:#0891B2;box-shadow:0 0 0 1px rgba(8,145,178,.3) inset}
html.day #pc-tab-gastos .ex-tick{border-color:rgba(2,132,199,.45);background:#fff;color:#fff}
html.day #pc-tab-gastos .ex-day.marcada .ex-tick{background:#0891B2;border-color:#0891B2}

/* La barra del recuento. Fija abajo, por encima de la barra de pestañas de la
   app; se crea y se destruye con el modo, para que no tape la última tarjeta
   cuando no está en uso. */
.ex-selbar{position:fixed;left:0;right:0;bottom:0;z-index:9500;display:flex;align-items:center;gap:9px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,18,32,.94),#0A1220);
  border-top:1px solid rgba(126,251,254,.28);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.ex-selbar-tx{flex:1;min-width:0}
.ex-selbar-tx b{display:block;font-size:13px;font-weight:800;color:#7EFBFE}
.ex-selbar-tx span{display:block;font-size:10.5px;color:rgba(180,220,255,.6);margin-top:1px}
.ex-selbar .ex-btn{flex:0 0 auto;padding:9px 14px}
html.day .ex-selbar{background:linear-gradient(180deg,rgba(255,255,255,.96),#F6FAFE);
  border-top-color:rgba(2,132,199,.28)}
html.day .ex-selbar-tx b{color:#155E75}
html.day .ex-selbar-tx span{color:#475569}

/* ── La franja de ESTADO, arriba de cada nota ──
   Ocupa el ancho entero y va la primera: es lo que se busca al abrir la
   pestaña. El rótulo "ESTADO" en pequeño y apagado, la palabra en grande y con
   el color; a la derecha, el número de la nota en el portal cuando existe. */
#pc-tab-gastos .ex-estado{display:flex;align-items:center;gap:7px;
  margin:-2px -3px 9px;padding:6px 9px;border-radius:9px;
  border:1px solid transparent;background:rgba(255,255,255,.05)}
#pc-tab-gastos .ex-estado .k{font-size:8px;letter-spacing:.2em;font-weight:800;
  color:rgba(180,220,255,.45)}
#pc-tab-gastos .ex-estado .v{font-size:10.5px;letter-spacing:.14em;font-weight:900}
#pc-tab-gastos .ex-estado .n{margin-left:auto;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:9px;color:rgba(180,220,255,.55)}
#pc-tab-gastos .ex-estado .q{margin-left:auto;font-size:9.5px;font-weight:700;opacity:.85}
#pc-tab-gastos .ex-estado .n+.q{margin-left:8px}

#pc-tab-gastos .ex-estado.es-go     {background:rgba(126,251,254,.09);border-color:rgba(126,251,254,.28)}
#pc-tab-gastos .ex-estado.es-go .v  {color:#7EFBFE}
#pc-tab-gastos .ex-estado.es-sending{background:rgba(126,251,254,.09);border-color:rgba(126,251,254,.28)}
#pc-tab-gastos .ex-estado.es-sending .v{color:#7EFBFE}
#pc-tab-gastos .ex-estado.es-sent   {background:rgba(78,230,174,.12);border-color:rgba(78,230,174,.35)}
#pc-tab-gastos .ex-estado.es-sent .v{color:#4EE6AE}
#pc-tab-gastos .ex-estado.es-paid   {background:rgba(245,197,66,.12);border-color:rgba(245,197,66,.38)}
#pc-tab-gastos .ex-estado.es-paid .v{color:#F5C542}
#pc-tab-gastos .ex-estado.es-rej,
#pc-tab-gastos .ex-estado.es-err    {background:rgba(255,128,149,.12);border-color:rgba(255,128,149,.38);cursor:pointer}
#pc-tab-gastos .ex-estado.es-rej .v,
#pc-tab-gastos .ex-estado.es-err .v,
#pc-tab-gastos .ex-estado.es-rej .q,
#pc-tab-gastos .ex-estado.es-err .q{color:#FF8095}

html.day #pc-tab-gastos .ex-estado{background:#F1F5F9;border-color:rgba(2,132,199,.14)}
html.day #pc-tab-gastos .ex-estado .k{color:#64748B}
html.day #pc-tab-gastos .ex-estado .n{color:#64748B}
html.day #pc-tab-gastos .ex-estado.es-go,
html.day #pc-tab-gastos .ex-estado.es-sending{background:#ECFEFF;border-color:#67E8F9}
html.day #pc-tab-gastos .ex-estado.es-go .v,
html.day #pc-tab-gastos .ex-estado.es-sending .v{color:#155E75}
html.day #pc-tab-gastos .ex-estado.es-sent{background:#ECFDF5;border-color:#6EE7B7}
html.day #pc-tab-gastos .ex-estado.es-sent .v{color:#047857}
html.day #pc-tab-gastos .ex-estado.es-paid{background:#FEF3C7;border-color:#F5C542}
html.day #pc-tab-gastos .ex-estado.es-paid .v{color:#92400E}
html.day #pc-tab-gastos .ex-estado.es-rej,
html.day #pc-tab-gastos .ex-estado.es-err{background:#FEF2F2;border-color:#FCA5A5}
html.day #pc-tab-gastos .ex-estado.es-rej .v,
html.day #pc-tab-gastos .ex-estado.es-err .v,
html.day #pc-tab-gastos .ex-estado.es-rej .q,
html.day #pc-tab-gastos .ex-estado.es-err .q{color:#B91C1C}

/* ── NUEVA: la acaba de detectar el roster y aún no la has abierto ──
   Violeta, que no compite con el semáforo del ciclo (cian→verde→oro) y dice
   "esto es nuevo" sin decir "esto va mal". Es dinero que el piloto ni sabía
   que le tocaba: si se pinta como "pendiente" se pierde entre lo demás. */
#pc-tab-gastos .ex-day.st-new{border-color:rgba(196,176,255,.5);
  background:linear-gradient(180deg,rgba(196,176,255,.1),rgba(16,24,40,.44))}
#pc-tab-gastos .ex-estado.es-new{background:rgba(196,176,255,.13);border-color:rgba(196,176,255,.4)}
#pc-tab-gastos .ex-estado.es-new .v{color:#C4B0FF}
.ex-btn.cic.new{border-color:rgba(196,176,255,.6);background:rgba(196,176,255,.16);color:#C4B0FF}
html.day #pc-tab-gastos .ex-day.st-new{background:#F5F3FF;border-color:#C4B5FD}
html.day #pc-tab-gastos .ex-estado.es-new{background:#F5F3FF;border-color:#C4B5FD}
html.day #pc-tab-gastos .ex-estado.es-new .v{color:#5B21B6}
html.day .ex-btn.cic.new{background:#F5F3FF;border-color:#C4B5FD;color:#5B21B6}

/* ── La fecha de la línea: se toca y se cambia ──
   No es un campo más de "copiar y pegar": es el único dato del envío que, mal
   puesto, no da error sino un rechazo días después. Por eso lleva el lápiz a la
   vista y, cuando el piloto la ha movido, lo dice. */
.ex-cp.fecha{cursor:pointer;border-color:rgba(126,251,254,.4)}
.ex-cp.fecha .v{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.5px}
.ex-cp.fecha .c{color:#7EFBFE}
.ex-cp.fecha.movida{border-color:rgba(245,197,66,.6);background:rgba(245,197,66,.12)}
.ex-cp.fecha.movida .k,.ex-cp.fecha.movida .c{color:#F5C542}
html.day .ex-cp.fecha{border-color:rgba(2,132,199,.4);background:#FFF}
html.day .ex-cp.fecha .c{color:#155E75}
html.day .ex-cp.fecha.movida{background:#FEF3C7;border-color:#F5C542}
html.day .ex-cp.fecha.movida .k,html.day .ex-cp.fecha.movida .c{color:#92400E}

/* El motivo: en las incidencias es un desplegable cerrado del portal, así que
   se enseña cuál va a salir y se elige aquí — llegar al portal y encontrarse el
   campo en rojo sin saber cuál poner es exactamente lo que había que evitar. */
.ex-cp.motivo{cursor:pointer;border-color:rgba(126,251,254,.4)}
.ex-cp.motivo .c{color:#7EFBFE}
html.day .ex-cp.motivo{border-color:rgba(2,132,199,.4);background:#FFF}
html.day .ex-cp.motivo .c{color:#155E75}

/* ── Selector de opciones: se toca, no se escribe ──
   Filas altas (48px de zona de toque) porque esto se usa de pie en una
   terminal, con una mano y con prisa. La elegida lleva su marca y su color, no
   sólo un cambio de fondo que en un móvil al sol no se ve. */
.ex-opts{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.ex-opt{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);min-height:22px}
/* El rótulo y su pista van APILADOS. Eran hermanos en la misma fila, así que
   la pista se llevaba media anchura y, al entrar el disco del icono, «La he
   pasado yo a mano» salía partido en CUATRO líneas. En una columna el título
   se lee de un tirón y la pista queda donde tiene que estar: debajo. */
.ex-opt .tx{flex:1;min-width:0}
.ex-opt .t{font-size:13px;font-weight:700;color:#EAF4FF}
.ex-opt .h{font-size:10.5px;color:rgba(180,220,255,.55);margin-top:2px;line-height:1.35}
.ex-opt .c{flex:0 0 auto;font-size:14px;font-weight:900;color:#7EFBFE}
.ex-opt.on{border-color:rgba(126,251,254,.6);background:rgba(126,251,254,.13)}
.ex-opt.on .t{color:#7EFBFE}
.ex-opt.ghost{background:transparent;border-style:dashed}
.ex-opt.ghost .t{color:rgba(180,220,255,.7);font-weight:600}
.ex-opt:active{transform:scale(.99)}

/* ── Que las opciones SE DISTINGAN ─────────────────────────────────────────
   «No se distingue. Queda demasiado igual» (11-sep-2026, con la hoja del ⋯ y
   la de confirmación). Medido: en modo día las dos primeras filas salían
   IDÉNTICAS —`rgb(255,255,255)`, borde `rgba(2,132,199,.18)`, texto
   `rgb(15,23,42)`, 13 px/700—, y «Eliminar la nota» era la MÁS apagada de las
   tres: gris pizarra sobre transparente, sin un solo píxel rojo. La única
   acción que no se puede deshacer, anunciada como la menos importante.

   Dos canales, y cada uno dice una cosa distinta:
   · el DISCO con su icono dibujado da a cada fila una FORMA — se lee antes que
     ningún texto cuando tres filas son del mismo blanco;
   · el TONO (`--ocol`) dice de qué va: verde hecho · oro dinero · pizarra
     deshacer · rojo irreversible.
   El tinte de fila se lo queda SÓLO el rojo: si todas se tiñen, volvemos a
   «todas iguales» con más color. */
.ex-opt .ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ocol,#7EFBFE);
  background:color-mix(in srgb,var(--ocol,#7EFBFE) var(--odisc,15%),transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ocol,#7EFBFE) 34%,transparent)}
.ex-opt.t-ok{--ocol:#34D399}
.ex-opt.t-pay{--ocol:#F5C542}
/* El tinte de noche va al 17 %: al 10 % sobre la hoja oscura el compuesto
   salía rgb(36,28,45) contra el rgb(22,31,46) del vecino — más rojo que él por
   14 puntos de R, que es menos de lo que se ve. Medido, no mirado. */
.ex-opt.t-danger{--ocol:#FF6B81;
  border-color:rgba(255,107,129,.5);background:rgba(255,107,129,.17)}
.ex-opt.t-danger .t{color:#FF8B9C}
.ex-opt.ghost .ic{--ocol:rgba(180,220,255,.75)}
/* Una hoja que BORRA no puede llevar su icono en cian, que en esta app es el
   color de «todo va bien». */
.ex-send-h.t-danger .ex-send-ic{background:rgba(255,107,129,.14);
  border-color:rgba(255,107,129,.5);color:#FF8B9C}
.ex-send-ic.dib{display:flex;align-items:center;justify-content:center}
/* Una lista larga no puede empujar los botones fuera de la pantalla. */
.ex-send-body .ex-opts{max-height:52vh;overflow:auto;-webkit-overflow-scrolling:touch}

html.day .ex-opt{background:#FFF;border-color:rgba(2,132,199,.18)}
html.day .ex-opt .t{color:#0F172A}
html.day .ex-opt .h{color:#475569}
html.day .ex-opt .c{color:#0E7490}
html.day .ex-opt.on{background:#ECFEFF;border-color:#67E8F9}
html.day .ex-opt.on .t{color:#155E75}
html.day .ex-opt.ghost{background:transparent}
html.day .ex-opt.ghost .t{color:#475569}
/* La paleta de día se declara entera: sobre una tarjeta blanca el verde y el
   oro de noche no llegan a 4,5:1 y el rojo claro se lava. */
/* Sobre la fila BLANCA de modo día un lavado al 15 % apenas tiñe: medido, el
   disco verde y el dorado se quedaban a 44 de distancia, y el color del disco
   es justo lo que distingue dos filas que comparten fondo. Al 24 % se separan
   de verdad sin que el disco compita con el rótulo que tiene al lado. */
html.day .ex-opt .ic{--odisc:24%}
html.day .ex-opt.t-ok{--ocol:#0F766E}
html.day .ex-opt.t-pay{--ocol:#B45309}
html.day .ex-opt.t-danger{--ocol:#BE123C;
  border-color:rgba(190,18,60,.42);background:#FFF1F2}
html.day .ex-opt.t-danger .t{color:#9F1239}
html.day .ex-opt.ghost .ic{--ocol:#475569}
html.day .ex-send-h.t-danger .ex-send-ic{background:#FFF1F2;
  border-color:#FDA4AF;color:#BE123C}
/* El «Cancelar» del pie iba en BLANCO OPACO y peso 800: el mando que no hace
   nada era lo más marcado de la hoja, por encima de las propias opciones. Se
   apaga — sólo en el pie de esta hoja, que es donde compite. */
html.day .ex-send-foot .ex-btn.ghost{background:transparent;
  border-color:rgba(15,23,42,.16);color:#475569;font-weight:700}

/* ── Entrar en la cuenta de Vueling (desde Gastos) ──
   Pantalla propia, no la de "Sincronizar eCrews": esa se queda como está para
   el roster. Aquí sólo se necesita la sesión de Microsoft, y el calendario ni
   se toca. */
.ex-lg-num{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:52px;font-weight:800;
  letter-spacing:.1em;text-align:center;color:#7EFBFE;margin:6px 0 14px;
  text-shadow:0 0 30px rgba(126,251,254,.35)}
html.day .ex-lg-num{color:#0E7490;text-shadow:none}
/* El correo y la contraseña, con el mismo molde que el resto de campos. */
input.ex-send-txt{display:block}
input.ex-send-txt::placeholder{color:rgba(180,220,255,.35)}
html.day input.ex-send-txt::placeholder{color:#94A3B8}

/* ══════════════════════════════════════════════════════════════════════════
   "SE HA ENVIADO" — la confirmación
   Mandar una nota es de las poquísimas cosas de la app que salen del teléfono
   y no se pueden deshacer. Tiene que quedar CLARO, y con el número delante.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sin marco: la pantalla de éxito ES la hoja, no una tarjeta dentro de ella. */
.ex-send-box.limpio{background:linear-gradient(180deg,#0B2A22,#0A1220);
  border-color:rgba(78,230,174,.45)}
html.day .ex-send-box.limpio{background:linear-gradient(180deg,#ECFDF5,#F6FAFE);
  border-color:#6EE7B7}

.ex-ok{position:relative;text-align:center;padding:34px 22px calc(26px + env(safe-area-inset-bottom))}

/* El halo: un verde muy abierto detrás del check, que crece una vez. No es
   decoración — es lo que hace que el ojo vaya al centro antes de leer nada. */
.ex-ok-halo{position:absolute;top:6px;left:50%;width:190px;height:190px;margin-left:-95px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(78,230,174,.28),rgba(78,230,174,0) 70%);
  animation:exHalo .9s ease-out both}
@keyframes exHalo{from{transform:scale(.4);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:.9}}

/* El check se DIBUJA. Medio segundo, y es lo que convierte "ha pasado algo" en
   "ha salido bien": un icono que aparece de golpe no dice lo mismo. */
.ex-ok-mark{position:relative;width:96px;height:96px;margin:0 auto 16px}
.ex-ok-mark svg{width:100%;height:100%;display:block}
/* Estado base neutro: quién dibuja qué lo deciden las clases `cargando`,
   `bien` y `mal` — si el trazo se animara desde aquí, el aro aparecería ya
   cerrado en verde antes de saber cómo ha ido. */
.ex-ok-mark .c{stroke-width:2.5;fill:none;stroke-dasharray:145;stroke-dashoffset:0}
.ex-ok-mark .t{stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0}
@keyframes exTrazo{to{stroke-dashoffset:0}}

.ex-ok-t{font-size:21px;font-weight:800;letter-spacing:-.01em;color:#EAF4FF;
  animation:exSube .4s ease-out .6s both}
/* El número: es lo que el piloto va a buscar en el portal. En mono y grande. */
.ex-ok-n{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:15px;font-weight:700;
  letter-spacing:.06em;color:#4EE6AE;margin-top:8px;padding:7px 14px;display:inline-block;
  border-radius:999px;background:rgba(78,230,174,.12);border:1px solid rgba(78,230,174,.4);
  animation:exSube .4s ease-out .72s both}
.ex-ok-e{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:30px;font-weight:700;
  color:#EAF4FF;margin-top:14px;animation:exSube .4s ease-out .8s both}
.ex-ok-s{font-size:12px;color:rgba(255,176,103,.95);margin-top:8px;
  animation:exSube .4s ease-out .86s both}
.ex-ok-p{font-size:12.5px;line-height:1.6;color:rgba(180,220,255,.7);margin:16px 0 20px;
  animation:exSube .4s ease-out .92s both}
.ex-ok .ex-btn{max-width:260px;margin:0 auto;animation:exSube .4s ease-out 1s both}
@keyframes exSube{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

html.day .ex-ok-t{color:#0F172A}
html.day .ex-ok-n{color:#047857;background:#ECFDF5;border-color:#6EE7B7}
html.day .ex-ok-e{color:#0F172A}
html.day .ex-ok-s{color:#B45309}
html.day .ex-ok-p{color:#475569}
html.day .ex-ok-halo{background:radial-gradient(circle,rgba(16,185,129,.18),rgba(16,185,129,0) 70%)}
html.day .ex-ok-mark .c,html.day .ex-ok-mark .t{stroke:#059669}

/* ── Y la tarjeta que acaba de salir se ilumina ──
   Al cerrar la confirmación se vuelve a una lista con varias notas: esto es lo
   que dice CUÁL es la que se ha ido. Tres pulsos y se apaga sola. */
#pc-tab-gastos .ex-day.recien{animation:exRecien 1.35s ease-out 3}
@keyframes exRecien{
  0%{box-shadow:0 0 0 0 rgba(78,230,174,.5)}
  40%{box-shadow:0 0 0 7px rgba(78,230,174,0)}
  100%{box-shadow:0 0 0 0 rgba(78,230,174,0)}
}

@media (prefers-reduced-motion: reduce){
  .ex-ok-halo,.ex-ok-t,.ex-ok-n,.ex-ok-e,.ex-ok-s,.ex-ok-p,.ex-ok .ex-btn{animation:none;opacity:1;transform:none}
  .ex-ok-mark .c,.ex-ok-mark .t{animation:none;stroke-dashoffset:0}
  #pc-tab-gastos .ex-day.recien{animation:none;box-shadow:0 0 0 2px rgba(78,230,174,.5)}
}

/* ── El botón del desglose ──
   Era un texto subrayado con puntitos que además cambiaba de longitud al
   abrirlo («ver desglose del mes» / «ocultar desglose»): la versión larga no
   cabía y se partía en dos líneas, rompiendo la fila del mes.
   Ahora es una pastilla con su chevron: dice siempre lo mismo, ocupa siempre lo
   mismo, y lo que gira es la flecha. */
#pc-tab-gastos .ex-dsgb{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 10px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(126,251,254,.9);
  border:1px solid rgba(126,251,254,.3);background:rgba(126,251,254,.08);
  transition:background .15s ease,border-color .15s ease}
#pc-tab-gastos .ex-dsgb svg{flex:0 0 auto;opacity:.85;transition:transform .22s cubic-bezier(.4,0,.2,1)}
#pc-tab-gastos .ex-dsgb.on{background:rgba(126,251,254,.16);border-color:rgba(126,251,254,.55);
  color:#7EFBFE}
#pc-tab-gastos .ex-dsgb.on svg{transform:rotate(180deg)}
#pc-tab-gastos .ex-dsgb:active{transform:scale(.97)}
/* La fila: el recuento a la izquierda, el botón a la derecha, y el recuento
   cede sitio si hace falta en vez de empujar al botón a otra línea. */
#pc-tab-gastos .ex-mesbar{align-items:center}
#pc-tab-gastos .ex-mesbar .m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

html.day #pc-tab-gastos .ex-dsgb{color:#155E75;border-color:rgba(2,132,199,.35);
  background:rgba(2,132,199,.07)}
/* #0E7490 sobre el fondo del estado abierto se quedaba en 4.09 — el texto es
   pequeño y en negrita, así que el mínimo son 4.5. Medido, no estimado. */
html.day #pc-tab-gastos .ex-dsgb.on{background:rgba(2,132,199,.14);border-color:rgba(2,132,199,.55);
  color:#0B4A5C}

@media (prefers-reduced-motion: reduce){
  #pc-tab-gastos .ex-dsgb svg{transition:none}
}

/* ── "Te la han rechazado" ──
   La misma pantalla que el éxito, en rojo y sin celebración: la nota ha
   llegado, pero no la van a pagar. El motivo va en grande porque es lo único
   accionable — dice qué hay que cambiar para volver a mandarla. */
.ex-send-box.limpio.mal{background:linear-gradient(180deg,#2A0F14,#0A1220);
  border-color:rgba(255,128,149,.45)}
html.day .ex-send-box.limpio.mal{background:linear-gradient(180deg,#FEF2F2,#F6FAFE);
  border-color:#FCA5A5}
.ex-ok.mal .ex-ok-mark .c,.ex-ok.mal .ex-ok-mark .t{stroke:#FF8095;filter:none}
html.day .ex-ok.mal .ex-ok-mark .c,html.day .ex-ok.mal .ex-ok-mark .t{stroke:#DC2626}
.ex-ok.mal .ex-ok-n{color:#FF8095;background:rgba(255,128,149,.12);border-color:rgba(255,128,149,.4)}
html.day .ex-ok.mal .ex-ok-n{color:#B91C1C;background:#FEF2F2;border-color:#FCA5A5}
/* El motivo, con las palabras de la Compañía, tal cual las escribe. */
.ex-ok-motivo{font-size:13.5px;line-height:1.55;font-weight:600;color:#FFD7DC;
  margin:16px 0 4px;padding:13px 14px;border-radius:13px;text-align:left;
  background:rgba(255,128,149,.12);border:1px solid rgba(255,128,149,.35);
  animation:exSube .4s ease-out .8s both}
html.day .ex-ok-motivo{color:#7F1D1D;background:#FEF2F2;border-color:#FCA5A5}
@media (prefers-reduced-motion: reduce){ .ex-ok-motivo{animation:none} }

/* ══════════════════════════════════════════════════════════════════════════
   EL CÍRCULO QUE SE TRANSFORMA
   La misma pantalla desde que pulsas Enviar: el aro gira mientras va, y ese
   MISMO aro se cierra en verde con su check o en rojo con su cruz. No son dos
   avisos, es uno que termina — y por eso se lee como un desenlace.
   ══════════════════════════════════════════════════════════════════════════ */

/* Mientras espera: el aro da vueltas con un hueco, en cian (el color de "en
   marcha" del módulo). El símbolo aún no existe. */
.ex-ok.cargando .ex-ok-mark svg{animation:exGira 1.1s linear infinite}
.ex-ok.cargando .c{stroke:#7EFBFE;stroke-linecap:round;
  stroke-dasharray:105 145;stroke-dashoffset:0;animation:none}
.ex-ok.cargando .t{opacity:0}
.ex-ok.cargando .ex-ok-halo{background:radial-gradient(circle,rgba(126,251,254,.22),rgba(126,251,254,0) 70%);
  animation:exLate 1.8s ease-in-out infinite}
@keyframes exGira{to{transform:rotate(360deg)}}
@keyframes exLate{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:.9;transform:scale(1)}}

/* Al terminar: el aro deja de girar, se cierra entero y se dibuja el símbolo.
   El cambio de color va con transición, así que se ve MUTAR — que es justo lo
   que hace que parezca un resultado y no otra pantalla. */
.ex-ok.bien .ex-ok-mark svg,
.ex-ok.mal  .ex-ok-mark svg{animation:none;transform:rotate(0)}
.ex-ok.bien .c,.ex-ok.mal .c{stroke-dasharray:145;stroke-dashoffset:0;
  transition:stroke .45s ease}
.ex-ok.bien .c{stroke:#4EE6AE}
.ex-ok.mal  .c{stroke:#FF8095}
/* El símbolo se traza (no aparece de golpe): medio segundo, y es lo que
   convierte "ha pasado algo" en "ha salido así". */
.ex-ok.bien .check,.ex-ok.mal .cruz{opacity:1;stroke-dasharray:40;stroke-dashoffset:40;
  animation:exTrazo .34s cubic-bezier(.4,0,.2,1) .12s forwards}
.ex-ok.bien .check{stroke:#4EE6AE}
.ex-ok.mal  .cruz {stroke:#FF8095}
.ex-ok.bien .cruz,.ex-ok.mal .check{opacity:0}
.ex-ok.bien .ex-ok-halo{background:radial-gradient(circle,rgba(78,230,174,.28),rgba(78,230,174,0) 70%);
  animation:exHalo .9s ease-out both}
.ex-ok.mal .ex-ok-halo{background:radial-gradient(circle,rgba(255,128,149,.24),rgba(255,128,149,0) 70%);
  animation:exHalo .9s ease-out both}
/* Lo que aparece debajo (número, importe, motivo) entra al acabar el trazo. */
.ex-ok-cuerpo{animation:exSube .4s ease-out .3s both}

html.day .ex-ok.cargando .c{stroke:#0E7490}
html.day .ex-ok.bien .c,html.day .ex-ok.bien .check{stroke:#059669}
html.day .ex-ok.mal  .c,html.day .ex-ok.mal  .cruz {stroke:#DC2626}
html.day .ex-ok.cargando .ex-ok-halo{background:radial-gradient(circle,rgba(2,132,199,.16),rgba(2,132,199,0) 70%)}

/* Sin movimiento: el aro se queda quieto y el símbolo aparece ya dibujado. */
@media (prefers-reduced-motion: reduce){
  .ex-ok.cargando .ex-ok-mark svg,.ex-ok.cargando .ex-ok-halo{animation:none}
  .ex-ok.bien .check,.ex-ok.mal .cruz{animation:none;stroke-dashoffset:0}
  .ex-ok-cuerpo{animation:none}
}

/* ── Las tres fechas, rotuladas · grupos de ENVIADO (14-sep-2026) ───────────────
   SERVICIO / TICKET / ENVIADA en una fila que se parte sola en el móvil. El
   rótulo va pequeño y apagado: lo que se lee es la fecha. */
#pc-tab-gastos .ex-hmid>.ex-fechas{display:flex;flex-wrap:wrap;gap:3px 12px}
#pc-tab-gastos .ex-fechas .f{white-space:nowrap}
#pc-tab-gastos .ex-fechas .f i{font-style:normal;font-size:7.5px;letter-spacing:.18em;font-weight:800;
  color:rgba(180,220,255,.45);margin-right:5px}
#pc-tab-gastos .ex-fechas .f.warn{color:#FFB067}
#pc-tab-gastos .ex-fechas .f.warn i{color:rgba(255,176,103,.7)}
/* El total del recibo, en gris: es contexto, no dinero a cobrar. */
#pc-tab-gastos .ex-amt em.de{color:rgba(180,220,255,.55);font-weight:600}
#pc-tab-gastos .ex-dup{margin-top:9px;padding:7px 10px;border-radius:9px;font-size:10.5px;line-height:1.45;
  background:rgba(255,176,103,.12);border:1px solid rgba(255,176,103,.38);color:#FFB067}
#pc-tab-gastos .ex-dup b{color:inherit}
#pc-tab-gastos .ex-gsect{margin-top:16px}
#pc-tab-gastos .ex-gsect.bad{color:#FF8095}
#pc-tab-gastos .ex-mesbar.plegable{cursor:pointer;justify-content:flex-start;gap:8px;
  color:rgba(180,220,255,.62)}
#pc-tab-gastos .ex-mesbar.plegable svg{transition:transform .2s ease}
#pc-tab-gastos .ex-mesbar.plegable.abierto svg{transform:rotate(180deg)}

html.day #pc-tab-gastos .ex-fechas .f i{color:#64748B}
html.day #pc-tab-gastos .ex-fechas .f.warn,
html.day #pc-tab-gastos .ex-fechas .f.warn i{color:#9A3412}
html.day #pc-tab-gastos .ex-amt em.de{color:#52697E}
html.day #pc-tab-gastos .ex-dup{background:#FFF3E4;border-color:#FB923C;color:#9A3412}
html.day #pc-tab-gastos .ex-gsect.bad{color:#B91C1C}
html.day #pc-tab-gastos .ex-mesbar.plegable{color:#3C5468}