/* El color del negocio llena el encabezado: así no se registra un gasto en el negocio equivocado.
   La lista de gastos sale del encabezado como la tirilla de una caja registradora. */
:root{
  --neg:#2A2622; --tinta:#1E1B18; --gris:#6A645D; --linea:#DDD9D1; --papel:#FEFDFA; --fondo:#E9E6DF;
  --campo:#F3F1EB; --error:#A32A12; --error-suave:#FBEBE6; --aviso:#7A5300; --aviso-suave:#FBF2D9;
  --ok:#0E5A43; --ok-suave:#E2F1EA;
  --titulo:'Sofia Sans Extra Condensed','Arial Narrow',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--tinta);font-family:'Sofia Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.35;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:3px solid #E0A526;outline-offset:2px}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}
.oculto-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* Entrada */
.entrada{flex:1;background:var(--neg);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:32px 24px calc(32px + env(safe-area-inset-bottom))}
.logos-entrada{display:flex;gap:16px;margin-bottom:12px}
.logos-entrada img{object-fit:contain}
.entrada h1{font-family:var(--titulo);font-weight:800;font-size:72px;line-height:.95;margin:0}
.entrada p{margin:0;color:#D8D3CB}
.entrada input{margin-top:16px;width:100%;height:76px;border:0;border-radius:6px;background:var(--papel);color:var(--tinta);text-align:center;font-family:var(--titulo);font-weight:700;font-size:48px;letter-spacing:.2em}
.entrada .error{background:none;color:#FFC9B8;padding:0;border:0}

/* Encabezado del negocio */
.cabeza{background:var(--neg);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 16px 18px;display:flex;flex-direction:column;gap:12px}
.fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.marca{display:flex;align-items:center;gap:12px}
.marca img{object-fit:contain;flex-shrink:0}
.marca-texto{flex:1;min-width:0}
.saludo{font-weight:500;color:rgba(255,255,255,.86)}
.btn-texto{min-height:44px;padding:0 4px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}
.sedes{display:flex;gap:4px;background:rgba(255,255,255,.14);padding:4px;border-radius:8px}
.sedes button{flex:1;min-height:48px;border-radius:5px;color:#fff;font-weight:700}
.sedes button.on{background:var(--papel);color:var(--neg)}
.negocio-unico{font-weight:800;font-size:20px;line-height:1.15;margin:0}
.mes{display:flex;align-items:center;gap:6px;margin-top:2px}
.mes button{width:44px;height:44px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1}
.mes button:disabled{opacity:.3}
.mes span{flex:1;text-align:center;font-weight:600;text-transform:capitalize}
.total{font-family:var(--titulo);font-weight:800;font-size:clamp(68px,22vw,92px);line-height:.95;margin:2px 0 0;letter-spacing:-.005em}
.total small{font-size:.55em;font-weight:700;margin-right:.08em;vertical-align:.32em}
.resumen{margin:0;color:rgba(255,255,255,.86);font-size:16px}

.btn-foto{display:flex;align-items:center;justify-content:center;gap:12px;min-height:72px;background:var(--papel);color:var(--neg);border-radius:8px;font-weight:800;font-size:21px;cursor:pointer;margin-top:4px}
.btn-foto:focus-within{outline:3px solid #E0A526;outline-offset:2px}
.btn-foto svg{flex-shrink:0}
.otras{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-otro{display:flex;align-items:center;justify-content:center;min-height:52px;border:1.5px solid rgba(255,255,255,.55);border-radius:8px;color:#fff;font-weight:700;font-size:16px;cursor:pointer;text-align:center;padding:4px 8px}
.btn-otro:focus-within{outline:3px solid #E0A526;outline-offset:2px}

/* La tirilla */
.tirilla{position:relative;background:var(--papel);margin:0 12px 38px;padding:8px 16px 18px;box-shadow:0 2px 3px rgba(40,30,20,.14)}
.tirilla::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(rgba(0,0,0,.2),transparent);pointer-events:none}
.tirilla::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:linear-gradient(135deg,var(--papel) 50%,transparent 50%) 0 0/14px 10px repeat-x,linear-gradient(225deg,var(--papel) 50%,transparent 50%) 0 0/14px 10px repeat-x}
.vistas{display:flex;gap:18px;border-bottom:2px dashed var(--linea);margin-bottom:2px}
.vistas button{min-height:48px;font-weight:700;color:var(--gris);border-bottom:3px solid transparent;margin-bottom:-2px}
.vistas button.on{color:var(--tinta);border-bottom-color:var(--neg)}
.dia{margin:14px 0 2px;font-size:15px;font-weight:700;color:var(--gris);text-transform:capitalize}
.gasto{display:flex;width:100%;gap:12px;align-items:center;text-align:left;min-height:62px;padding:8px 0;border-bottom:1px dashed var(--linea)}
.gasto .info{flex:1;min-width:0}
.gasto .quien{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gasto .que{display:block;font-size:15px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gasto .cuanto{font-family:var(--titulo);font-weight:700;font-size:27px;line-height:1;white-space:nowrap}
.gasto.nuevo{animation:imprime 2.4s ease-out}
@keyframes imprime{0%,35%{background:var(--aviso-suave)}100%{background:transparent}}
.foto-marca{color:var(--gris);flex-shrink:0;display:flex}
.vacio{padding:26px 4px 12px;color:var(--gris)}
.vacio strong{display:block;color:var(--tinta);font-size:19px;margin-bottom:4px}
.cat-fila{display:block;width:100%;text-align:left;padding:12px 0;border-bottom:1px dashed var(--linea)}
.cat-fila .fila{font-weight:700}
.cat-fila .fila span:last-child{font-family:var(--titulo);font-size:25px;line-height:1}
.barra{height:8px;background:var(--campo);margin-top:6px}
.barra i{display:block;height:100%;background:var(--neg)}
.cat-fila small{color:var(--gris);font-size:14px}
.filtro{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:6px 10px;background:var(--campo);font-weight:600}
.pie{display:flex;justify-content:center;margin-top:12px;color:var(--gris)}

/* Formulario */
.barra-form{background:var(--neg);color:#fff;padding:calc(6px + env(safe-area-inset-top)) 8px 10px 4px}
.barra-form .fila{justify-content:flex-start;gap:4px}
.volver{width:48px;height:48px;font-size:26px;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-form{object-fit:contain;flex-shrink:0;margin-right:4px}
.barra-form h1{margin:0;font-size:19px;font-weight:800;line-height:1.15}
.barra-form .sedes{margin:6px 8px 2px 12px}
.form{flex:1;display:flex;flex-direction:column;gap:18px;padding:16px 16px 118px;background:var(--papel)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo>label,.campo>.etq{font-weight:700;font-size:16px}
.campo input,.campo textarea{width:100%;min-height:52px;border:1.5px solid var(--linea);border-radius:6px;background:var(--campo);padding:10px 12px;font-size:18px}
.campo input:focus,.campo textarea:focus{border-color:var(--neg);background:#fff;outline:none;box-shadow:0 0 0 2px var(--neg)}
.campo textarea{resize:vertical;min-height:72px}
.campo.mal input{border-color:var(--error)}
.valor-caja{display:flex;align-items:center;gap:6px;border:1.5px solid var(--linea);border-radius:6px;background:var(--campo);padding:0 12px}
.valor-caja:focus-within{border-color:var(--neg);background:#fff;box-shadow:0 0 0 2px var(--neg)}
.valor-caja span{font-family:var(--titulo);font-weight:700;font-size:38px;color:var(--gris)}
.campo .valor-caja input{border:0;background:none;box-shadow:none;padding:0;height:72px;font-family:var(--titulo);font-weight:800;font-size:52px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;padding:0 14px;border:1.5px solid var(--linea);border-radius:6px;background:#fff;font-weight:600;font-size:16px}
.chip.on{background:var(--neg);border-color:var(--neg);color:#fff}
.nota{padding:11px 13px;border-radius:6px;font-size:16px;font-weight:500}
.nota.ok{background:var(--ok-suave);color:var(--ok)}
.nota.aviso{background:var(--aviso-suave);color:var(--aviso)}
.error,.nota.error{background:var(--error-suave);color:var(--error);padding:11px 13px;border-radius:6px;font-weight:600;margin:0}
.nota .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.foto-caja{display:flex;gap:12px;align-items:center}
.foto-caja button.mini{width:76px;height:96px;border-radius:5px;overflow:hidden;flex-shrink:0;border:1px solid var(--linea)}
.foto-caja img{width:100%;height:100%;object-fit:cover;display:block}
.btn-linea{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border:1.5px solid var(--linea);border-radius:6px;background:#fff;font-weight:700;cursor:pointer}
.btn-linea:focus-within{outline:3px solid #E0A526;outline-offset:2px}
.btn-peligro{min-height:48px;color:var(--error);font-weight:700;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.mas summary{cursor:pointer;font-weight:700;color:var(--gris);min-height:44px;display:flex;align-items:center}
.mas .campo{margin-top:8px}
.guardar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--papel);border-top:1px solid var(--linea);z-index:5}
.btn-guardar{width:100%;min-height:62px;border-radius:8px;background:var(--neg);color:#fff;font-weight:800;font-size:20px}

/* Lectura de la foto */
.leyendo{flex:1;background:var(--neg);color:#fff;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));gap:14px}
.leyendo h1{margin:0;font-family:var(--titulo);font-weight:800;font-size:44px;line-height:1}
.leyendo p{margin:0;color:rgba(255,255,255,.86)}
.visor{position:relative;flex:1;min-height:280px;max-height:62dvh;border-radius:6px;overflow:hidden;background:rgba(0,0,0,.28)}
.visor img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.visor i{position:absolute;left:0;right:0;height:3px;background:#FFD45E;box-shadow:0 0 16px 4px rgba(255,212,94,.7);animation:escanea 2.2s ease-in-out infinite alternate}
@keyframes escanea{from{top:3%}to{top:97%}}
.leyendo .btn-otro{width:100%}

.ampliada{position:fixed;inset:0;z-index:20;background:rgba(15,12,10,.94);display:flex;align-items:center;justify-content:center;padding:12px;width:100%}
.ampliada img{max-width:100%;max-height:100%;display:block}

.aviso-flotante{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));z-index:15;background:var(--tinta);color:#fff;padding:14px 18px;border-radius:8px;font-weight:700;width:calc(100% - 32px);max-width:448px;text-align:center}

@media (prefers-reduced-motion:reduce){
  .gasto.nuevo{animation:none;background:var(--aviso-suave)}
  .visor i{animation:none;top:50%}
}