:root{
  --bg:#0a0a0c; --card:#151519; --ink:#f2f3f5; --muted:#9aa0ab;
  --line:#26272d; --accent:#2f8fff; --accent-ink:#fff;
  --danger:#e0393e; --ok:#3ddc84;
  --radius:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);line-height:1.5}
h1{font-size:24px;margin:0 0 6px}
h2{font-size:19px;margin:0 0 10px}
h3{font-size:15px;margin:0 0 8px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* Header / footer */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 20px;background:#000;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1200}
.site-head a{color:#fff}
.site-head .brand{font-weight:700;font-size:15px;display:flex;align-items:center}
.site-head .logo{height:30px;width:auto;display:block}
.site-head nav{display:flex;align-items:center;gap:14px;font-size:14px;flex-wrap:wrap}
.site-head nav a.active{color:var(--accent);text-decoration:underline;text-underline-offset:4px}

/* Masthead del sitio público: logo grande centrado, no fijo (para no robar espacio al hacer scroll). */
.site-head--brand{position:static;justify-content:center;padding:18px 20px}
.site-head--brand .brand{display:block}
.site-head--brand .logo{height:auto;width:100%;max-width:480px}
.site-foot{border-top:1px solid var(--line);padding:20px;color:var(--muted);
  font-size:13px;text-align:center;background:#000}
.site-foot p{margin:6px auto;max-width:760px}

/* Hero */
.hero{max-width:720px;margin:0 auto;padding:36px 20px 8px;text-align:center}
.hero h1{font-size:26px}
.hero .lead{color:var(--muted)}

/* Botones */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border:0;border-radius:var(--radius);font:inherit;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn-lg{display:block;width:100%;text-align:center;padding:13px 20px;font-size:15px;margin:6px 0}
.btn-sm{padding:7px 12px;font-size:13px}
.btn.danger{background:var(--danger)}
.btn-wa{background:#25d366;color:#08290f}

/* Flash */
.flash-ok{background:#0e2a1d;border-bottom:1px solid #1e6f45;color:var(--ok);
  padding:12px 20px;text-align:center;font-weight:600}

.lead{color:var(--muted);margin:.2em 0 1em}

.fld{display:block;margin:16px 0}
.fld>span,.fld>legend{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.fld select,.fld input[type=text],.fld input[type=date],.fld input[type=time],
.fld input[type=number],.fld input[type=password],.fld input,.fld textarea{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;
  background:var(--card);color:var(--ink)}
.fld select:disabled{opacity:.6}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:14px;margin:6px 0;font-weight:400}
.chk input{width:auto;margin-top:3px}
.hint{font-size:12px;color:var(--muted);margin:8px 0 0}

/* ---- Formulario ---- */
.form-wrap{max-width:640px;margin:0 auto;padding:24px 20px 40px}
.form-wrap.narrow{max-width:420px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#form-msg{margin-top:12px;font-weight:600;min-height:1.4em}
#form-msg.ok{color:var(--ok)}
#form-msg.alert{color:var(--danger)}
.alert{background:#2a1113;border:1px solid #5a1d20;color:var(--danger);
  padding:10px 12px;border-radius:8px;margin:10px 0}

/* ---- Admin ---- */
.admin{padding:18px 20px;max-width:1200px;margin:0 auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{padding:7px 12px;border:1px solid var(--line);border-radius:20px;color:var(--ink);font-size:13px}
.tabs a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.grid{width:100%;border-collapse:collapse;background:var(--card);font-size:13px}
.grid th,.grid td{border:1px solid var(--line);padding:8px;vertical-align:top;text-align:left}
.grid .acts form{display:flex;flex-direction:column;gap:4px}
.grid .acts button{padding:5px 8px;font-size:12px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);border-radius:6px;cursor:pointer}
.grid .acts button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.grid tr.st-cancelado{opacity:.5}
.grid tr.st-pendiente{background:#241f0e}
.grid tr.st-confirmado{background:#0e1f24}
.grid tr.st-completado{background:#122412}

.panel-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:20px}
.row-inline{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.row-inline .fld{margin:0}
.row-inline .btn{align-self:flex-end;height:40px}

.dias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dia-card{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.franjas{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.franjas li{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.franjas li:last-child{border-bottom:0}
.inline{display:inline}
.btn-x{background:transparent;border:0;color:var(--danger);cursor:pointer;font-size:14px;padding:2px 6px}
.add-franja{display:flex;align-items:center;gap:6px;margin-top:6px}
.add-franja input[type=time]{padding:6px 8px;font-size:13px;width:auto}
.add-franja span{color:var(--muted);font-size:12px}

@media (max-width:760px){
  .form .row{grid-template-columns:1fr}
  .grid{display:block;overflow-x:auto;white-space:nowrap}
  .row-inline{flex-direction:column;align-items:stretch}
}