/* Sistema de Rotativas — Enfermeras 24 Horas */
:root {
  --bg: #f5f7f8;
  --panel: #ffffff;
  --texto: #1d2a33;
  --suave: #5b6b76;
  --borde: #dde4e8;
  --primario: #0f7c8c;
  --primario-osc: #0a5e6a;
  --primario-claro: #e3f3f5;
  --noche: #3d4a8f;
  --noche-claro: #e7e9f7;
  --ok: #1e7a45;
  --ok-claro: #e3f4ea;
  --error: #b3261e;
  --error-claro: #fbe9e7;
  --aviso: #8a5a00;
  --aviso-claro: #fff4d6;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(16, 38, 48, .06), 0 2px 8px rgba(16, 38, 48, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--texto);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--primario); }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
.sub { color: var(--suave); margin-bottom: 1.25rem; }
.muted { color: var(--suave); font-size: .88rem; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- Layout ---------- */
.barra {
  background: var(--primario-osc); color: #fff;
  position: sticky; top: 0; z-index: 10;
}
.barra-in { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; }
.marca { font-weight: 700; padding: 12px 0; white-space: nowrap; color: #fff; text-decoration: none; }
.marca small { font-weight: 400; opacity: .8; }
.nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: #d6eef1; text-decoration: none; padding: 14px 10px; white-space: nowrap; font-size: .92rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a.activo { color: #fff; border-bottom-color: #7fd3de; }
.nav .badge { background: #e8553f; color: #fff; }
.salir button { background: none; border: 0; color: #d6eef1; cursor: pointer; font: inherit; padding: 8px 0; }
.contenido { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.angosto { max-width: 680px; }

.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; }
.grid { display: grid; gap: 18px; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }

/* ---------- Mensajes ---------- */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: .95rem; }
.flash.ok { background: var(--ok-claro); color: var(--ok); }
.flash.error { background: var(--error-claro); color: var(--error); }

/* ---------- Botones y formularios ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--primario); background: var(--primario); color: #fff;
  padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: 42px;
}
.btn:hover { background: var(--primario-osc); }
.btn.sec { background: #fff; color: var(--primario); }
.btn.sec:hover { background: var(--primario-claro); }
.btn.wa { background: #1f9d55; border-color: #1f9d55; }
.btn.chico { padding: 5px 10px; min-height: 32px; font-size: .88rem; }
.btn.peligro { background: #fff; color: var(--error); border-color: #e3b6b2; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label.campo { display: block; margin-bottom: 12px; }
label.campo span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: 0; border-color: var(--primario); }
.inline input, .inline select { width: auto; }
.check { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }

/* ---------- Tablas ---------- */
.tabla-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td input[type=text] { min-width: 100px; text-align: right; }

/* ---------- Etiquetas ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--primario-claro); color: var(--primario-osc); white-space: nowrap; }
.badge.noche { background: var(--noche-claro); color: var(--noche); }
.badge.feriado { background: var(--aviso-claro); color: var(--aviso); }
.badge.festividad { background: #fde8f0; color: #9b1f55; }
.badge.gris { background: #edf0f2; color: var(--suave); }
.badge.rojo { background: var(--error-claro); color: var(--error); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--suave); font-size: .85rem; }

/* ---------- Cobertura (barras) ---------- */
.cob { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.cob-dia { text-align: center; font-size: .8rem; color: var(--suave); }
.cob-barras { display: flex; gap: 3px; justify-content: center; align-items: flex-end; height: 90px; margin-bottom: 6px; }
.cob-barras div { width: 14px; border-radius: 4px 4px 0 0; background: var(--primario); min-height: 2px; position: relative; }
.cob-barras div.n { background: var(--noche); }
.cob-num { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; }
.leyenda { display: flex; gap: 14px; font-size: .82rem; color: var(--suave); margin-top: 10px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--primario); margin-right: 5px; vertical-align: -1px; }
.leyenda i.n { background: var(--noche); }

/* ---------- Grilla de disponibilidad ---------- */
.grilla th.dia-col { text-align: center; }
.grilla td.celda { text-align: center; padding: 6px 4px; }
.grilla .punto { display: inline-block; min-width: 22px; padding: 1px 5px; border-radius: 5px; font-size: .72rem; font-weight: 700; margin: 1px; }
.grilla .punto.d { background: var(--primario-claro); color: var(--primario-osc); }
.grilla .punto.n { background: var(--noche-claro); color: var(--noche); }
.grilla .vacio { color: #c3ccd2; }
.grilla tfoot td { font-weight: 600; background: #fafbfc; }
.grilla th.especial { color: var(--aviso); }

/* ---------- Portal / formulario semanal ---------- */
.portal-cab { background: var(--primario-osc); color: #fff; padding: 18px 16px 22px; }
.portal-cab .in { max-width: 680px; margin: 0 auto; }
.portal-cab h1 { font-size: 1.3rem; }
.portal-cab p { color: #d6eef1; margin: 0; }
.semana { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden; scroll-margin-top: 10px; }
.semana-cab { padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.semana-cab h2 { margin: 0; }
.semana-cab .muted { margin: 2px 0 0; }
.semana.cerrada .semana-cab { background: #fafbfc; }
.dia-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--borde); }
.dia-fila:last-of-type { border-bottom: 0; }
.dia-fila .nom { font-weight: 600; }
.dia-fila .nom small { display: block; font-weight: 400; color: var(--suave); }
.dia-fila .nom .badge { white-space: normal; }
.chips { display: flex; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 42px; padding: 0 10px;
  border: 1.5px solid var(--borde); border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--suave); background: #fff;
  user-select: none;
}
.chip input:checked + span { background: var(--primario); border-color: var(--primario); color: #fff; }
.chip.noche input:checked + span { background: var(--noche); border-color: var(--noche); }
.chip input:focus-visible + span { outline: 2px solid var(--texto); outline-offset: 2px; }
.chip input:disabled + span { opacity: .55; cursor: not-allowed; }
.chip .candado { position: absolute; top: -6px; right: -6px; background: var(--aviso); color: #fff; border-radius: 999px; font-size: .62rem; padding: 1px 5px; font-weight: 700; pointer-events: none; }
.btn-24 { height: 42px; min-width: 48px; border: 1.5px dashed var(--borde); border-radius: 9px; background: #fff; color: var(--suave); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
.btn-24:hover { border-color: var(--primario); color: var(--primario); }
.btn-24:disabled { opacity: .4; cursor: not-allowed; }
.semana-pie { padding: 12px 16px; background: #fafbfc; border-top: 1px solid var(--borde); display: flex; gap: 10px; flex-wrap: wrap; }
.semana-pie .btn { flex: 1; min-width: 150px; }
.aviso-cerrada { padding: 10px 16px; background: var(--aviso-claro); color: var(--aviso); font-size: .9rem; }
.hist li { margin-bottom: 4px; }

@media (max-width: 480px) {
  .chip span { min-width: 56px; }
  .dia-fila { padding: 10px 12px; }
  .panel { padding: 14px; }
  .tabla-wrap { margin: 0 -14px; padding: 0 14px; }
}
.link-caja { display: flex; gap: 8px; }
.link-caja input { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.resultado dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; }
.resultado dt { color: var(--suave); }
.resultado dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.resultado .total { border-top: 1px solid var(--borde); padding-top: 6px; }