:root{
  --verde:#0b5d3b; --verde2:#0e7a4e; --rojo:#c0392b; --rojo-bg:#fdecea;
  --amar:#b9770e; --amar-bg:#fef6e6; --verde-bg:#e7f6ee;
  --gris:#6b7280; --linea:#e5e7eb; --fondo:#f4f5f7; --tinta:#111827;
  --radio:14px; --sombra:0 1px 3px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta); line-height:1.45;
  -webkit-text-size-adjust:100%;
}

/* ── Barra superior ── */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.5rem;
  background:var(--verde); color:#fff; padding:.7rem 1rem;
  box-shadow:var(--sombra);
}
.brand{color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem}
.who{margin-left:auto; font-size:.85rem; opacity:.95}
.btn-ghost{color:#fff; border:1px solid rgba(255,255,255,.6); border-radius:10px;
  padding:.35rem .7rem; text-decoration:none; font-size:.85rem}

.wrap{max-width:720px; margin:0 auto; padding:1rem 1rem 5rem}
.foot{text-align:center; color:var(--gris); font-size:.75rem; padding:1.5rem 1rem 3rem}

/* ── Tarjetas y secciones ── */
.card{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:1rem; margin:.8rem 0; box-shadow:var(--sombra)}
h1{font-size:1.4rem; margin:.4rem 0 .2rem}
h2{font-size:1.1rem; margin:.2rem 0}
.muted{color:var(--gris); font-size:.9rem}

/* ── Secciones colapsables ── */
details.sec{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  margin:.7rem 0; box-shadow:var(--sombra); overflow:hidden}
details.sec>summary{
  cursor:pointer; list-style:none; padding:1rem;
  font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:.5rem;
}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"▸"; margin-left:auto; color:var(--gris); transition:.15s}
details.sec[open]>summary::after{transform:rotate(90deg)}
.sec-body{padding:0 1rem 1rem}
.sec .done{color:var(--verde2); font-size:.85rem}

/* ── Formularios (dedos grandes) ── */
label{display:block; font-weight:600; margin:.7rem 0 .25rem; font-size:.95rem}
input,select,textarea{
  width:100%; font-size:1.1rem; padding:.85rem .8rem;
  border:1.5px solid var(--linea); border-radius:12px; background:#fff; color:var(--tinta);
}
input[readonly]{background:#f0f1f3; color:#555}
input:focus,select,textarea:focus{outline:3px solid rgba(14,122,78,.25); border-color:var(--verde2)}
textarea{min-height:80px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.hint{font-size:.8rem; color:var(--gris); margin-top:.2rem}

/* ── Botones grandes ── */
.btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--verde); color:#fff; border:0; border-radius:14px;
  padding:1rem; font-size:1.15rem; font-weight:700; cursor:pointer; margin:.5rem 0;
}
.btn:active{transform:translateY(1px)}
.btn-sec{background:#fff; color:var(--verde); border:2px solid var(--verde)}
.btn-danger{background:var(--rojo)}
.btn-sm{padding:.5rem .8rem; font-size:.9rem; width:auto; display:inline-block}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ── Flash ── */
.flash{padding:.85rem 1rem; border-radius:12px; margin:.6rem 0; font-weight:600}
.flash-ok{background:var(--verde-bg); color:var(--verde)}
.flash-error{background:var(--rojo-bg); color:var(--rojo)}
.flash-info{background:var(--amar-bg); color:var(--amar)}

/* ── Semáforo / descuadre ── */
.descuadre-box{text-align:center; padding:1.4rem; border-radius:16px; margin:1rem 0}
.descuadre-box.ok{background:var(--verde-bg); border:2px solid var(--verde2)}
.descuadre-box.bad{background:var(--rojo-bg); border:2px solid var(--rojo)}
.descuadre-num{font-size:2.4rem; font-weight:800; letter-spacing:-1px}
.descuadre-box.ok .descuadre-num{color:var(--verde)}
.descuadre-box.bad .descuadre-num{color:var(--rojo)}
.pill{display:inline-block; padding:.2rem .7rem; border-radius:999px; font-size:.8rem; font-weight:700}
.pill.verde{background:var(--verde-bg); color:var(--verde)}
.pill.rojo{background:var(--rojo-bg); color:var(--rojo)}
.pill.gris{background:#eee; color:var(--gris)}

/* ── Alertas / bloqueos ── */
.alerta{background:var(--amar-bg); color:var(--amar); border-left:4px solid var(--amar);
  padding:.6rem .8rem; border-radius:8px; margin:.4rem 0; font-size:.9rem}
.bloqueo{background:var(--rojo-bg); color:var(--rojo); border-left:4px solid var(--rojo);
  padding:.6rem .8rem; border-radius:8px; margin:.4rem 0; font-size:.9rem; font-weight:600}

/* ── Tablas ── */
table{width:100%; border-collapse:collapse; font-size:.92rem}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
th,td{text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--linea); white-space:nowrap}
th{color:var(--gris); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ── Lecturas: bloque por surtidor ── */
.lect{border:1px solid var(--linea); border-radius:12px; padding:.7rem; margin:.6rem 0; background:#fafafa}
.lect h3{margin:.1rem 0 .4rem; font-size:1rem}

/* ── Fotos ── */
.foto-slot{margin:.5rem 0}
.foto-prev{margin-top:.5rem; display:flex; gap:.7rem; flex-wrap:wrap}
.foto-prev img{width:90px; height:90px; object-fit:cover; border-radius:10px; border:1px solid var(--linea)}
.foto-item{position:relative; display:inline-block}
.foto-del{position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%;
  border:2px solid #fff; background:var(--rojo); color:#fff; font-size:13px; line-height:1;
  cursor:pointer; box-shadow:var(--sombra); padding:0}
.foto-estado{font-size:.85rem; margin-top:.3rem}
.foto-ok{color:var(--verde2); font-weight:600}
.foto-pend{color:var(--rojo); font-weight:600}

/* ── Login ── */
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.6rem 0}
.pinpad button{font-size:1.5rem; padding:1rem; border:1.5px solid var(--linea); border-radius:14px; background:#fff}
.pin-display{letter-spacing:.6rem; text-align:center; font-size:1.8rem}

/* ── Solicitudes dinámicas ── */
.sol-fila{display:grid; grid-template-columns:1fr auto auto; gap:.5rem; align-items:center; margin:.4rem 0}
.sol-fila input{margin:0}
.sol-del{background:var(--rojo); color:#fff; border:0; border-radius:10px; padding:.6rem .8rem; font-size:1rem}

/* ── Checklist admin ── */
.turno-card{display:flex; align-items:center; gap:.7rem; padding:.9rem; border:1px solid var(--linea);
  border-radius:12px; margin:.5rem 0; background:#fff; text-decoration:none; color:inherit}
.turno-card .estado{margin-left:auto; text-align:right}
.dot{width:14px; height:14px; border-radius:50%; display:inline-block}
.dot.v{background:var(--verde2)} .dot.r{background:var(--rojo)} .dot.g{background:#cbd5e1}
.navdays{display:flex; align-items:center; gap:.5rem; justify-content:space-between; margin:.5rem 0}