/* Kuota: sistema de diseño de la app (panel). Paleta "Arcilla de Coro".
   Pensado para Android económico a 360 px: sin imágenes ni librerías. */
:root{
  --crema:#F6EBDD; --blanco:#FFFCF7; --tinta:#1F1A17; --gris:#5F5650; --linea:#E6DACB;
  --arcilla:#C4532B; --arcilla-texto:#A8431F; --petroleo:#0F4C4A; --noche:#0C2E2D;
  --menta:#DCEBE6; --ocre:#E8A33D; --ocre-suave:#FBEBCF; --arcilla-suave:#F8E1D6;
  --f-texto:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-titulo:"Young Serif",Georgia,serif;
  --r:12px; --r-chico:8px; --toque:48px; --e1:8px; --e2:12px; --e3:16px; --e4:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 16px/1.5 var(--f-texto)}
h1,h2,h3,p{margin:0}
h1{font:400 28px/1.2 var(--f-titulo)}
h2{font-size:20px;line-height:1.3;font-weight:700}
h3{font-size:16px;font-weight:700}
.chico{font-size:14px;color:var(--gris)}
.pagina{max-width:560px;margin:0 auto;padding:var(--e3)}
.pila{display:grid;gap:var(--e2)}
.fila{display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
:focus-visible{outline:3px solid var(--petroleo);outline-offset:2px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e1);min-height:var(--toque);padding:0 var(--e3);
  border:2px solid transparent;border-radius:var(--r);font:700 16px/1 var(--f-texto);text-decoration:none;cursor:pointer}
.btn-pri{background:var(--arcilla);color:#fff}
.btn-sec{background:transparent;color:var(--petroleo);border-color:var(--petroleo)}
.btn-suave{background:var(--menta);color:var(--petroleo)}
.btn-ancho{width:100%}
.btn:disabled{background:var(--linea);color:var(--gris);border-color:transparent;cursor:not-allowed}

/* Tarjetas */
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:var(--e3)}
.dato{display:grid;gap:2px}
.dato b{font-size:28px;line-height:1.15}
.rejilla-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}

/* Montos: siempre $ primero y Bs debajo */
.monto b{display:block;font-size:20px;line-height:1.2}
.monto span{font-size:14px;color:var(--gris)}

/* Estados: llevan palabra, no dependen solo del color */
.estado{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.estado-pagado{background:var(--menta);color:var(--petroleo)}
.estado-pendiente{background:var(--ocre-suave);color:#6B4400}
.estado-vencido{background:var(--arcilla-suave);color:#8A3517}

/* Formularios */
.campo{display:grid;gap:6px}
.campo label{font-weight:600}
.campo input,.campo select{width:100%;min-height:var(--toque);padding:0 var(--e2);border:1.5px solid #8C7F74;border-radius:var(--r-chico);
  background:#fff;color:var(--tinta);font:400 16px var(--f-texto)}
.campo .ayuda{font-size:14px;color:var(--gris)}
.campo.error input{border-color:var(--arcilla-texto)}
.campo.error .ayuda{color:var(--arcilla-texto);font-weight:600}

/* Lista de clientes */
.lista{list-style:none;margin:0;padding:0;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r)}
.lista li{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);min-height:64px;padding:var(--e2) var(--e3)}
.lista li+li{border-top:1px solid var(--linea)}

/* Avisos */
.aviso{padding:var(--e2) var(--e3);border-radius:var(--r);background:var(--ocre-suave);color:#4F3200;font-size:15px}

/* Racha */
.sellos{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e1)}
.sello{aspect-ratio:1;display:grid;place-items:center;border:2px dashed #A99A8C;border-radius:50%;font-size:14px;color:var(--gris)}
.sello.lleno{background:var(--ocre);border:2px solid var(--ocre);color:var(--tinta);font-weight:700}

/* Barra inferior */
.barra{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--noche);padding-bottom:env(safe-area-inset-bottom)}
.barra a{display:grid;place-items:center;min-height:56px;color:#DCEBE6;font-size:14px;text-decoration:none}
.barra a[aria-current]{color:#fff;font-weight:700;box-shadow:inset 0 3px 0 var(--ocre)}

[hidden]{display:none!important}