/* Estilo de las paginas del sitio (login, registro, administracion): mismos
   tokens, banda azul y componentes que el dashboard "Programa entrega semanal". */
:root{
  color-scheme:light;
  --bg:#f1f4f6; --surface:#ffffff; --ink:#0e1a24; --ink2:#465564; --muted:#75838f;
  --grid:#e3e8ec; --line:rgba(14,26,36,.11); --wash:#f6f8fa;
  --accent:#0067b1; --accent-hi:#004f8a; --accent-wash:rgba(0,103,177,.10); --on-accent:#ffffff;
  --good-ink:#0a6b0a; --crit-ink:#b42a2a;
  --shadow:0 1px 2px rgba(14,26,36,.06),0 4px 14px rgba(14,26,36,.05);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0c1318; --surface:#141d24; --ink:#eef3f6; --ink2:#b3bfca; --muted:#8593a0;
    --grid:#222d36; --line:rgba(255,255,255,.11); --wash:#18232b;
    --accent:#4fa8e8; --accent-hi:#7cc0f2; --accent-wash:rgba(79,168,232,.16); --on-accent:#062544;
    --good-ink:#4cc94c; --crit-ink:#ff8080; --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
/* tema elegido con el boton claro/oscuro (menu.js pone data-theme en <html>) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c1318; --surface:#141d24; --ink:#eef3f6; --ink2:#b3bfca; --muted:#8593a0;
  --grid:#222d36; --line:rgba(255,255,255,.11); --wash:#18232b;
  --accent:#4fa8e8; --accent-hi:#7cc0f2; --accent-wash:rgba(79,168,232,.16); --on-accent:#062544;
  --good-ink:#4cc94c; --crit-ink:#ff8080; --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
.tema-flot{position:fixed;top:14px;right:14px;z-index:10;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);font-size:17px;line-height:1;cursor:pointer}
.tema-flot:hover{background:var(--wash)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.4;padding:20px 16px 48px}
.app{max-width:1100px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
h1,h2,p{margin:0}
a{color:var(--accent-hi)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.hero-band{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(120deg,rgba(0,18,42,.86),rgba(0,64,118,.58)),url("/static/hero.png") center 35%/cover no-repeat}
.hero-band .top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:18px 20px}
.eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#bfe0ff}
.hero-band h1{color:#fff;font-size:26px;font-weight:700;letter-spacing:-.015em}
.hero-band .meta{color:#dcedfb;margin-top:2px}
.hdr-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hdr-actions .who{color:#eaf4ff;font-size:13px;margin-right:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:8px;color:var(--ink);white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--wash)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--accent-hi)}
.btn.danger{color:var(--crit-ink)}
.hero-band .btn{background:rgba(255,255,255,.94);border-color:transparent;color:#0b2338}
.hero-band .btn:hover{background:#fff}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.card>h2{font-size:14.5px;font-weight:650;margin-bottom:12px}
.sub{color:var(--muted);font-size:12.5px}

/* login / registro */
.auth{max-width:420px;margin:6vh auto 0;display:flex;flex-direction:column;gap:14px}
.auth .hero-band .top{padding:22px 22px 18px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:12.5px;color:var(--ink2);font-weight:600}
.field input,.field select,select.inline{height:36px;border:1px solid var(--line);border-radius:8px;background:var(--wash);padding:0 10px}
.msg{border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.msg.error{background:rgba(208,59,59,.10);color:var(--crit-ink)}
.msg.ok{background:rgba(12,163,12,.10);color:var(--good-ink)}
.links{font-size:13px;color:var(--ink2);text-align:center;margin-top:4px}

/* tablas de administracion */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--grid);vertical-align:middle}
th{background:var(--wash);color:var(--ink2);font-weight:600;white-space:nowrap}
/* encabezado que ordena (Consulta de citas, 27-oct): mismo aspecto que las tablas del i-C@C 360 */
th:has(> .th-orden){padding:0}
.th-orden{display:flex;align-items:center;gap:6px;padding:7px 8px;color:inherit;text-decoration:none;white-space:nowrap}
.th-orden::after{content:"↕";font-size:11px;opacity:.35}
.th-orden:hover{color:var(--accent-hi);background:var(--accent-wash)}
th[aria-sort="ascending"] .th-orden,th[aria-sort="descending"] .th-orden{color:var(--accent-hi)}
th[aria-sort="ascending"] .th-orden::after{content:"▲";opacity:1;font-size:9px}
th[aria-sort="descending"] .th-orden::after{content:"▼";opacity:1;font-size:9px}
td form{display:flex;gap:6px;align-items:center;margin:0}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:var(--accent-wash);color:var(--ink2)}
.badge.admin{background:var(--accent);color:var(--on-accent)}
.badge.inactivo{background:rgba(208,59,59,.12);color:var(--crit-ink)}
.vacio{color:var(--muted)}
@media (max-width:640px){.hero-band h1{font-size:22px}}