:root{
  --fondo:#f3f0e9; --papel:#fffdf9; --tinta:#1b2422; --suave:#5d6966; --linea:#e0dacd;
  --pri:#14342f; --pri-2:#1f4a43; --sobre-pri:#f4efe2; --acento:#c4622d; --acento-fondo:#fbe9dc;
  --ok:#1f6b4a; --ok-fondo:#dff1e6; --mal:#a3301f; --mal-fondo:#fbe3de; --ojo:#8a5a00; --ojo-fondo:#fbefcf;
  --r:14px; --sombra:0 1px 0 rgba(20,52,47,.06);
  --f:"Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fnum:"SF Mono","Cascadia Mono","Roboto Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--fondo:#111715;--papel:#19211f;--tinta:#ecebe4;--suave:#9aa6a2;--linea:#2b3633;
    --pri:#0d2622;--pri-2:#2f6a60;--sobre-pri:#e9e4d6;--acento:#e08a57;--acento-fondo:#3a2618;
    --ok:#6fcf9d;--ok-fondo:#15332a;--mal:#f08a78;--mal-fondo:#3a1c17;--ojo:#e6b64a;--ojo-fondo:#352a10;
    --sombra:none}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.5 var(--f);min-height:100dvh}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:1.5rem} h2{font-size:1.05rem} h3{font-size:.95rem}
.ico{width:22px;height:22px;flex:none}

/* Estructura */
main{padding:18px 16px calc(96px + env(safe-area-inset-bottom));max-width:1040px;margin:0 auto}
.sin-menu main{padding-bottom:32px;max-width:420px}
.lateral{display:none}
.tit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px;flex-wrap:wrap}
.inferior{position:fixed;inset:auto 0 0 0;display:grid;grid-template-columns:repeat(5,1fr);background:var(--pri);
  color:var(--sobre-pri);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:10}
.inferior a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;text-decoration:none;
  padding:6px 2px;border-radius:10px;opacity:.72}
.inferior a.on{opacity:1}
.inferior a.centro{opacity:1}
.inferior a.centro .ico{background:var(--acento);color:#fff;border-radius:50%;padding:9px;width:44px;height:44px;margin-top:-20px;
  box-shadow:0 0 0 5px var(--pri)}
@media (min-width:900px){
  body{display:grid;grid-template-columns:232px 1fr}
  body.sin-menu{display:block}
  .inferior{display:none}
  main{padding:32px 36px 48px;margin:0;width:100%}
  .lateral{display:flex;flex-direction:column;background:var(--pri);color:var(--sobre-pri);padding:22px 14px;
    position:sticky;top:0;height:100dvh}
  .lateral nav{display:flex;flex-direction:column;gap:2px;margin-top:26px}
  .lateral nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;text-decoration:none;opacity:.78;font-size:.95rem}
  .lateral nav a:hover{opacity:1;background:rgba(255,255,255,.06)}
  .lateral nav a.on{opacity:1;background:rgba(255,255,255,.12)}
  .lateral-pie{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:.85rem;padding:0 8px;gap:8px}
}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;line-height:1.15;padding:0 6px}
.marca small{display:block;font-weight:400;opacity:.65;font-size:.75rem}
.marca-d{width:36px;height:36px;border-radius:10px;background:var(--acento);color:#fff;display:grid;place-items:center;font-size:1.2rem}

/* Piezas */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:16px;box-shadow:var(--sombra)}
.tarjeta + .tarjeta,.tarjeta + .rej,.rej + .tarjeta,.tarjeta + h2{margin-top:14px}
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:22px 0 10px}
.sec a{font-size:.88rem;color:var(--suave)}
.rej{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.dato{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:13px 14px}
.dato small{display:block;color:var(--suave);font-size:.78rem}
.dato b{font:600 1.22rem/1.3 var(--fnum);letter-spacing:-.02em;white-space:nowrap}
.pos{color:var(--ok)} .neg{color:var(--mal)}
.num{font-family:var(--fnum);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.sub{color:var(--suave);font-size:.85rem}
.vacio{color:var(--suave);padding:22px 4px;text-align:center}

.lista{list-style:none;margin:0;padding:0;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.lista > li{border-top:1px solid var(--linea)}
.lista > li:first-child{border-top:0}
.fila{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;min-height:56px}
a.fila:hover{background:color-mix(in srgb,var(--pri-2) 6%,transparent)}
.fila .c{flex:1;min-width:0}
.fila .c b{display:block;font-weight:600;overflow-wrap:anywhere}
.fila .c span{display:block;color:var(--suave);font-size:.84rem;overflow-wrap:anywhere}
.fila .d{text-align:right;flex:none}
.punto{width:9px;height:9px;border-radius:50%;flex:none;background:var(--suave)}
.punto.gasto{background:var(--mal)} .punto.ingreso{background:var(--ok)}

.chip{display:inline-block;font-size:.74rem;padding:2px 9px;border-radius:99px;background:var(--linea);color:var(--tinta);white-space:nowrap}
.chip-en_curso,.chip-cobrada{background:var(--ok-fondo);color:var(--ok)}
.chip-presupuesto,.chip-pendiente{background:var(--ojo-fondo);color:var(--ojo)}
.chip-cancelada,.chip-anulada,.chip-vencida{background:var(--mal-fondo);color:var(--mal)}
.chip-tag{background:var(--acento-fondo);color:var(--acento)}

.aviso{padding:11px 14px;border-radius:12px;margin-bottom:14px;background:var(--ok-fondo);color:var(--ok)}
.aviso-error{background:var(--mal-fondo);color:var(--mal)}
.aviso-info{background:var(--ojo-fondo);color:var(--ojo)}

/* Formularios */
label{display:block;font-size:.84rem;color:var(--suave);margin-bottom:4px}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],input[type=month],
input[type=tel],input[type=search],select,textarea{width:100%;background:var(--papel);border:1px solid var(--linea);
  border-radius:11px;padding:11px 12px;min-height:46px}
textarea{min-height:92px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
input[type=file]{width:100%;font-size:.9rem}
.campos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.campos .ancho{grid-column:1/-1}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--linea);background:var(--papel);
  border-radius:11px;padding:10px 16px;min-height:44px;text-decoration:none;cursor:pointer;font-weight:550}
.btn:hover{border-color:var(--suave)}
.btn-pri{background:var(--pri-2);border-color:var(--pri-2);color:#fff}
.btn-pri:hover{background:var(--pri);border-color:var(--pri)}
.btn-pel{color:var(--mal)}
.btn-min{min-height:36px;padding:6px 12px;font-size:.88rem}
.enlace{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:inherit;opacity:.8}
.segmento{display:inline-flex;background:var(--linea);border-radius:11px;padding:3px;gap:3px}
.segmento label{margin:0;cursor:pointer}
.segmento input{position:absolute;opacity:0;pointer-events:none}
.segmento span{display:block;padding:8px 16px;border-radius:9px;color:var(--tinta);font-size:.92rem}
.segmento input:checked + span{background:var(--papel);font-weight:600}
.segmento input:focus-visible + span{outline:2px solid var(--acento)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filtros > *{flex:1 1 140px}
.barra{height:8px;border-radius:99px;background:var(--linea);overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;background:var(--acento);border-radius:99px}
.tabla-cat{width:100%;border-collapse:collapse}
.tabla-cat td{padding:7px 0;border-top:1px solid var(--linea)}
.tabla-cat tr:first-child td{border-top:0}
.tabla-cat td:last-child{text-align:right}
.tique{max-width:100%;border-radius:12px;border:1px solid var(--linea);display:block;margin-top:8px;max-height:420px}
.burbuja{background:var(--pri-2);color:#fff;border-radius:16px 16px 4px 16px;padding:10px 14px;margin:0 0 14px auto;max-width:86%;width:fit-content;overflow-wrap:anywhere}
.propuesta{border-left:4px solid var(--acento)}
.propuesta h2{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.login-caja{margin-top:12vh}
.login-caja .marca{margin-bottom:22px;color:var(--tinta)}
details summary{cursor:pointer;color:var(--suave);font-size:.9rem;padding:6px 0}
@media (prefers-reduced-motion:no-preference){.btn,.fila{transition:background .15s,border-color .15s}}