:root {
  color-scheme: dark;
  --fondo: #091321;
  --panel: #132238;
  --panel-alterno: #17283f;
  --linea: #2d415b;
  --texto: #f7fbff;
  --texto-suave: #aabbd0;
}

* { box-sizing: border-box; }

body {
  min-width: 1000px;
  margin: 0;
  background: radial-gradient(circle at 50% -30%, #1a3558 0, var(--fondo) 47%);
  color: var(--texto);
  font-family: Inter, Arial, sans-serif;
}

.container { width: 100%; margin: 0 auto; padding: 12px 28px; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgb(170 187 208 / .22);
}

h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.brand p { margin: 3px 0 0; color: var(--texto-suave); font-size: 12px; }
.brand { display: flex; align-items: center; gap: 14px; }
.logo { width: 118px; max-height: 42px; object-fit: contain; filter: brightness(0) invert(1); }
.clock { min-width: 250px; text-align: right; }
.clock time { display: block; }
#fecha { color: var(--texto-suave); font-size: 12px; text-transform: capitalize; }
#hora { font-size: 27px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

.estado-carga { min-height: 16px; margin: 6px 0; color: var(--texto-suave); font-size: 11px; }
.estado-carga.error { color: #ffb4b4; }
.estado-carga:empty { display: none; }

.resumen { display: flex; justify-content: center; gap: 16px; margin-top: 14px; }
.indicador { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; min-width: 205px; padding: 12px 20px; border: 1px solid var(--linea); border-radius: 11px; background: var(--panel); }
.indicador span { color: var(--texto-suave); font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.indicador strong { grid-row: span 2; grid-column: 1; color: #fff; font-size: 38px; font-variant-numeric: tabular-nums; line-height: 1; }
.indicador small { color: var(--texto-suave); font-size: 12px; }
.indicador-uco { border-left: 5px solid #ef4444; }
.indicador-piso { border-left: 5px solid #22c55e; }

.pizarra {
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: rgb(9 19 33 / .72);
  box-shadow: 0 14px 32px rgb(0 0 0 / .22);
}

table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.sector-titulo th {
  height: auto;
  padding: 14px 20px !important;
  border-top: 5px solid var(--fondo);
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}
.sector-titulo:first-child th { border-top: 0; }
.sector-uco th { background: linear-gradient(90deg, #a51925, #661b2b 58%, #202338); border-left: 7px solid #ff5d68; }
.sector-intermedia th { background: linear-gradient(90deg, #a86009, #704010 58%, #202338); border-left: 7px solid #ffbd45; }
.sector-uti th { background: linear-gradient(90deg, #075d87, #0d3c5b 58%, #202338); border-left: 7px solid #38bdf8; }
.sector-hemodinamia th { background: linear-gradient(90deg, #8c245f, #4b2443 58%, #202338); border-left: 7px solid #f472b6; }
.sector-shockroom th { background: linear-gradient(90deg, #7a3f00, #4a2b1e 58%, #202338); border-left: 7px solid #fb923c; }
.sector-demanda th { background: linear-gradient(90deg, #0f766e, #164e63 58%, #202338); border-left: 7px solid #2dd4bf; }

/* Regla explícita para que la altura de las bandas no pueda reducirse. */
tr.sector-titulo > th {
  padding: 14px 20px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.encabezados th {
  height: 34px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
  background: #0d1a2b;
  color: #91a9c6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .075em;
  text-align: center;
  text-transform: uppercase;
}

td {
  padding: 7px 14px;
  border-bottom: 1px solid rgb(170 187 208 / .13);
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}
tbody tr:not(.sector-titulo):not(.encabezados):nth-child(even) { background: var(--panel-alterno); }
tbody tr:not(.sector-titulo):not(.encabezados):nth-child(odd) { background: var(--panel); }
tbody tr:last-child td { border-bottom: 0; }

/* Esta grilla se define una sola vez para toda la pizarra. */
.hab { width: 7%; font-weight: 800; font-variant-numeric: tabular-nums; }
.paciente { width: 17%; font-weight: 750; }
.edad { width: 5%; text-align: center; font-variant-numeric: tabular-nums; }
.diagnostico { width: 23%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ingreso { width: 13%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fecha-ingreso { color: #d9e6f5; }
.dias { display: inline-block; min-width: 36px; margin-left: 6px; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; text-align: center; }
.dias-normal { color: #b7f7c7; background: rgb(34 197 94 / .20); }
.dias-atencion { color: #ffd27a; background: rgb(245 158 11 / .18); }
.dias-criticos { color: #fff; background: #d62839; box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }
.cartel-ingreso { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; color: #fff; background: #e11d48; font-size: 10px; font-weight: 900; letter-spacing: .06em; animation: pulso-ingreso 1.8s ease-in-out infinite; }
@keyframes pulso-ingreso { 50% { background: #fb7185; box-shadow: 0 0 12px rgb(251 113 133 / .8); } }
.cartel-alta { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; color: #fff; background: #16a34a; font-size: 10px; font-weight: 900; letter-spacing: .06em; animation: pulso-alta 1.8s ease-in-out infinite; }
@keyframes pulso-alta { 50% { background: #4ade80; box-shadow: 0 0 12px rgb(74 222 128 / .8); } }
@media (prefers-reduced-motion: reduce) { .cartel-ingreso, .cartel-alta { animation: none; } }
.obra-social { width: 12%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medico { width: 13%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado { width: 10%; }

.badge { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #cf2633; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.badge-piso { background: #facc15; color: #2f2500; }
.fecha-piso { display: block; margin-top: 4px; color: var(--texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.vacio { padding: 48px 20px; color: var(--texto-suave); text-align: center; font-size: 20px; }

.programados { margin-top: 18px; padding: 14px 18px 17px; border: 1px solid #3a4f6d; border-radius: 12px; background: linear-gradient(90deg, #142840, #17223a); }
.programados:empty { display: none; }
.sin-programados { margin-top: 18px; padding: 17px 22px; border: 1px solid rgb(74 222 128 / .34); border-radius: 12px; background: rgb(22 101 52 / .16); color: #bbf7d0; font-size: 16px; font-weight: 700; text-align: center; }
.programados-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #dbeafe; font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.programados-titulo strong { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #38bdf8; color: #082033; font-size: 14px; }
.programados-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.programado { display: flex; align-items: center; min-width: 280px; flex: 1 1 30%; overflow: hidden; border-left: 4px solid #38bdf8; border-radius: 7px; background: rgb(5 14 27 / .44); }
.programado time { min-width: 62px; padding: 12px 10px; color: #7dd3fc; font-size: 17px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.programado-icono { display: block; margin-bottom: 2px; font-size: 18px; line-height: 1; }
.programado div { min-width: 0; padding: 8px 12px 8px 2px; }
.programado b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.programado small { display: -webkit-box; overflow: hidden; margin-top: 4px; color: #d7e8fb; font-size: 13px; font-weight: 650; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

body.recordatorio-abierto { overflow: hidden; }

.recordatorio-overlay[hidden] { display: none; }
.recordatorio-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgb(2 9 18 / .78);
  backdrop-filter: blur(4px);
}

.recordatorio-modal {
  width: min(620px, 92vw);
  overflow: hidden;
  border: 2px solid #f4c85b;
  border-radius: 20px;
  background: linear-gradient(145deg, #172d48, #0e2036);
  box-shadow: 0 30px 90px rgb(0 0 0 / .62), 0 0 0 7px rgb(244 200 91 / .11);
  text-align: center;
}

.recordatorio-modal > .recordatorio-horario,
.recordatorio-modal > h2,
.recordatorio-modal > .recordatorio-detalle,
.recordatorio-modal > .recordatorio-acciones { margin-right: 38px; margin-left: 38px; }
.recordatorio-icono {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 34px auto 18px;
  place-items: center;
  border: 1px solid #f4c85b;
  border-radius: 50%;
  background: rgb(244 200 91 / .13);
  font-size: 35px;
  animation: sonar-campana 1.2s ease-in-out 2;
}

.recordatorio-horario {
  margin-top: 0;
  margin-bottom: 10px;
  color: #f8d778;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.recordatorio-modal h2 {
  margin-top: 0;
  margin-bottom: 14px;
  color: #fff;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.recordatorio-detalle { margin-top: 0; margin-bottom: 24px; color: #c9dbef; font-size: 17px; }
.recordatorio-detalle strong { color: #fff; font-variant-numeric: tabular-nums; }
.recordatorio-acciones { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; }
.recordatorio-boton {
  min-width: 150px;
  padding: 11px 20px;
  border: 0;
  border-radius: 9px;
  background: #f4c85b;
  color: #172131;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.recordatorio-boton:hover { background: #ffda78; }
.recordatorio-boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.recordatorio-boton-secundario { border: 1px solid #7891ad; background: #1b3655; color: #fff; }
.recordatorio-boton-secundario:hover { background: #28496d; }
.recordatorio-barra { height: 7px; background: #29435e; }
.recordatorio-barra span { display: block; width: 100%; height: 100%; transform-origin: left; background: #f4c85b; }
.recordatorio-barra span.activo { animation: tiempo-recordatorio 120s linear forwards; }

@keyframes tiempo-recordatorio { to { transform: scaleX(0); } }
@keyframes sonar-campana {
  20% { transform: rotate(10deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .recordatorio-icono, .recordatorio-barra span.activo { animation: none; }
}