:root{
  --fondo:#f6f5f1; --tarjeta:#fff; --texto:#1d2521; --suave:#5d6b64; --linea:#dcdad2;
  --acento:#1f5f4a; --acento-fondo:#e3f0ea; --aviso:#8a5a00; --aviso-fondo:#fff4d6;
  --error:#a32626; --error-fondo:#fbe5e5; --ok:#1f5f4a;
}
@media (prefers-color-scheme:dark){
  :root{--fondo:#151a17;--tarjeta:#1e2521;--texto:#e8ece9;--suave:#9aa8a0;--linea:#33403a;
    --acento:#6cc4a3;--acento-fondo:#223a31;--aviso:#f1c66b;--aviso-fondo:#3a3014;--error:#ff8f8f;--error-fondo:#401d1d;--ok:#6cc4a3}
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:1000px;margin:0 auto;padding:12px 16px 90px}
h1{font-size:1.35rem;margin:.6rem 0}
h2{font-size:1.1rem;margin:1.2rem 0 .5rem}
.suave{color:var(--suave);font-size:.9rem}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;padding:14px;margin:10px 0}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fila>.crece{flex:1 1 200px}
button,.boton{font:inherit;min-height:44px;padding:8px 16px;border-radius:10px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--texto);cursor:pointer}
button.primario{background:var(--acento);border-color:var(--acento);color:#fff}
@media (prefers-color-scheme:dark){button.primario{color:#10231b}}
button.peligro{border-color:var(--error);color:var(--error)}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;width:100%;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--texto)}
textarea{min-height:90px;font-family:ui-monospace,Consolas,monospace;font-size:.9rem}
label{display:block;font-size:.88rem;color:var(--suave);margin:8px 0 3px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 12px}
.dias{display:flex;gap:6px;flex-wrap:wrap}
.dias label{display:flex;align-items:center;gap:4px;margin:0;padding:6px 10px;border:1px solid var(--linea);border-radius:10px;min-height:44px;color:var(--texto)}
.dias input{width:auto;min-height:0}
.casilla{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--texto)}
.casilla input{width:auto;min-height:0}
nav.menu{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--tarjeta);border-top:1px solid var(--linea);z-index:5;overflow-x:auto}
nav.menu a{flex:1 0 auto;min-width:72px;text-align:center;padding:10px 8px;color:var(--suave);text-decoration:none;font-size:.82rem;min-height:56px}
nav.menu a.activa{color:var(--acento);font-weight:600;border-top:3px solid var(--acento);padding-top:7px}
@media (min-width:760px){
  nav.menu{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--linea)}
  nav.menu a{font-size:.95rem;min-height:48px}
  nav.menu a.activa{border-top:0;border-bottom:3px solid var(--acento);padding-top:10px}
  main{padding-bottom:30px}
}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--linea);vertical-align:top}
th{color:var(--suave);font-weight:600;font-size:.82rem}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-scroll{overflow-x:auto}
.etiqueta{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.78rem;background:var(--acento-fondo);color:var(--acento)}
.etiqueta.aviso{background:var(--aviso-fondo);color:var(--aviso)}
.etiqueta.error{background:var(--error-fondo);color:var(--error)}
.mensaje{padding:10px 12px;border-radius:10px;margin:10px 0;background:var(--acento-fondo);color:var(--texto)}
.mensaje.aviso{background:var(--aviso-fondo)}
.mensaje.error{background:var(--error-fondo);color:var(--error)}
.total{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.cuadricula{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.login{max-width:380px;margin:12vh auto;padding:0 16px}
.explica{font-size:.85rem;color:var(--suave)}
.pos{color:var(--ok)} .neg{color:var(--error)}
@media (max-width:640px){
  .apilar thead{display:none}
  .apilar tr{display:block;border:1px solid var(--linea);border-radius:10px;margin:8px 0;padding:6px 8px;background:var(--tarjeta)}
  .apilar td{display:flex;justify-content:space-between;gap:10px;border:0;padding:3px 0;text-align:right}
  .apilar td::before{content:attr(data-et);color:var(--suave);text-align:left;font-size:.82rem}
}