:root{
  --rojo:#C4453D; --rojo-d:#9E332C; --verde:#3C5E3B; --verde-d:#2A4429;
  --crema:#FBF8F3; --tinta:#2B2620; --linea:#E4DDCF; --panel:#FFFFFF;
  --ok:#3C5E3B;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --crema:#1C1A16; --tinta:#EFE9DD; --linea:#3A362E; --panel:#252119;
  }
}
:root[data-theme="dark"]{
  --crema:#1C1A16; --tinta:#EFE9DD; --linea:#3A362E; --panel:#252119;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%;}
*{box-sizing:border-box;}
body{
  margin:0; height:100%; background:var(--crema); color:var(--tinta);
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.45;
}
.vista{display:none;} .vista.on{display:block;}
.inicio-wrap{padding:60px 20px 20px; text-align:center; max-width:420px; margin:0 auto;}
.inicio-titulo{font-size:28px; margin:0 0 4px;}
.inicio-sub{opacity:0.6; margin:0 0 28px; font-size:14px;}
.home-btn{
  display:block; width:100%; margin:0 auto 16px; padding:22px 16px;
  border-radius:16px; border:1px solid var(--linea); background:var(--panel);
  font-size:18px; font-weight:800; letter-spacing:0.02em; color:var(--tinta); cursor:pointer;
}
.home-btn:active{background:var(--verde); color:#fff; border-color:var(--verde);}
header{
  padding:18px 16px 14px; border-bottom:1px solid var(--linea);
  position:sticky; top:env(safe-area-inset-top,0px); background:var(--crema); z-index:5;
}
header h1{margin:0 0 2px; font-size:20px; letter-spacing:-0.01em;}
header p{margin:0; font-size:13px; opacity:0.65;}
nav{display:flex; gap:6px; overflow-x:auto; padding:10px 16px; border-bottom:1px solid var(--linea); background:var(--crema); position:sticky; top:56px; z-index:5;}
nav button{
  flex:none; padding:8px 14px; border-radius:20px; border:1px solid var(--linea);
  background:var(--panel); color:var(--tinta); font-size:13.5px; font-weight:600; cursor:pointer;
}
nav button.on{background:var(--verde); color:#fff; border-color:var(--verde);}
main{padding:16px; max-width:640px; margin:0 auto;}
section{display:none;} section.on{display:block;}
.subnav{display:flex; gap:6px; margin-bottom:14px;}
.subnav button{flex:1; padding:8px 6px; border-radius:9px; border:1px solid var(--linea); background:var(--panel); color:var(--tinta); font-size:12.5px; font-weight:600; cursor:pointer;}
.subnav button.on{background:var(--tinta); color:var(--crema); border-color:var(--tinta);}
.subsec{display:none;} .subsec.on{display:block;}
.card{background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:16px; margin-bottom:14px;}
h2{font-size:16px; margin:0 0 12px;}
label{display:block; font-size:12.5px; font-weight:600; opacity:0.75; margin:10px 0 4px;}
label:first-child{margin-top:0;}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:9px;
  background:var(--crema); color:var(--tinta); font-size:15px; font-family:inherit;
}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.btn{
  margin-top:14px; width:100%; padding:12px; border:none; border-radius:9px;
  background:var(--rojo); color:#fff; font-size:15px; font-weight:700; cursor:pointer;
}
.btn:active{background:var(--rojo-d);}
.btn.sec{background:var(--verde);} .btn.sec:active{background:var(--verde-d);}
.list-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--linea); gap:10px;}
.list-row:last-child{border-bottom:none;}
.list-row .nom{font-weight:600;}
.mini{font-size:12px; padding:6px 10px; border-radius:7px; border:1px solid var(--linea); background:transparent; color:var(--tinta); cursor:pointer;}
.mini.del{color:var(--rojo); border-color:var(--rojo);}
.quick{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.quick .mini{flex:none;}
.reg{border-bottom:1px solid var(--linea); padding:10px 0;}
.reg:last-child{border-bottom:none;}
.reg .top{display:flex; justify-content:space-between; font-weight:600;}
.reg .meta{font-size:12.5px; opacity:0.7; margin-top:2px;}
.empty{opacity:0.55; font-size:13.5px; padding:8px 0;}
.bar-row{margin:10px 0;}
.bar-lbl{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;}
.bar-track{background:var(--linea); border-radius:6px; height:10px; overflow:hidden;}
.bar-fill{background:var(--verde); height:100%; border-radius:6px;}
table{width:100%; border-collapse:collapse; font-size:13px; margin-top:8px;}
th,td{padding:7px 6px; text-align:left; border-bottom:1px solid var(--linea);}
th{font-size:11.5px; text-transform:uppercase; opacity:0.6; font-weight:700;}
.tot{font-weight:700;}
.pivbar-row{margin:10px 0;}
.pivbar-lbl{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;}
.pivbar-track{background:transparent; border-radius:6px; height:22px; overflow:hidden; display:flex; width:100%;}
.pivbar-seg{height:100%;}
.legend{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; font-size:12px;}
.legend .sw{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle;}
.hint{font-size:12px; opacity:0.6; margin-top:6px;}
/* ---- agregados versión PHP ---- */
a.home-btn{text-decoration:none; text-align:center;}
a.mini{display:inline-block; color:var(--tinta);}
.home-btn:hover{border-color:var(--verde);}
.btn[disabled]{opacity:.6;}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--tinta); color:var(--crema); padding:10px 16px; border-radius:10px; font-size:14px; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw;}
.toast.on{opacity:1;}
.toast.err{background:var(--rojo);}
.tag{font-size:11px; padding:2px 7px; border-radius:6px; border:1px solid var(--linea); opacity:.75; font-weight:600;}
.baja .nom{opacity:.5; text-decoration:line-through;}
.acciones{display:flex; gap:6px; flex:none;}
code{background:var(--linea); padding:1px 5px; border-radius:5px;}
header .usr{font-size:12px; opacity:.6;}
/* el encabezado ya no queda fijo (para que la barra de pestañas no lo tape) */
header{position:static;}
nav{top:env(safe-area-inset-top,0px);}