/* 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} /* ── 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-head.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} #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-head,#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 */ #pc-tab-gastos .ex-day{border-radius:16px;padding:12px 13px 12px 15px;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. */ #pc-tab-gastos .ex-del{background:none;border:none;cursor:pointer;font-size:13px; padding:2px 4px;opacity:.55;transition:opacity .15s;flex-shrink:0;line-height:1} #pc-tab-gastos .ex-del:active{opacity:1} /* ── 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} html.day #pc-tab-gastos .ex-del{opacity:.8} /* ── 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)} 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} .ex-opt .t{flex:1;font-size:13px;font-weight:700;color:#EAF4FF} .ex-opt .h{font-size:10.5px;color:rgba(180,220,255,.55);margin-top:2px} .ex-opt>div:first-child{flex:1;min-width:0} .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)} /* 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} /* ── 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} }