/* ===== Control de salud — estilos (pensado primero para celular) ===== */
:root {
  --primario: #0f766e; --primario-osc: #115e59; --primario-claro: #ccfbf1;
  --fondo: #f4f6f5; --tarjeta: #fff; --texto: #1c2826; --muted: #6b7a77; --borde: #dfe5e3;
  --verde: #15803d; --verde-bg: #dcfce7; --verde-borde: #86efac;
  --ambar: #b45309; --ambar-bg: #fef3c7; --ambar-borde: #fcd34d;
  --rojo: #b91c1c; --rojo-bg: #fee2e2; --rojo-borde: #fca5a5;
  --gris-bg: #eef1f0; --naranja: #c2410c; --naranja-bg: #ffedd5;
  --radio: 14px; --sombra: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--primario); }
h1 { font-size: 1.4rem; margin: .2em 0; }
h2 { font-size: 1.05rem; margin: 0 0 .6em; }
h3 { font-size: 1rem; margin: 0 0 .3em; }
.muted { color: var(--muted); }
.chico { font-size: .85rem; }
small { font-size: .78em; }

/* ---- cabecera + menú superior ---- */
.cabecera { position: sticky; top: 0; z-index: 30; background: var(--primario); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding-top: env(safe-area-inset-top); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px 6px; max-width: 1400px; margin: 0 auto; }
.barra-titulo { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.12rem; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.barra-logo { background: rgba(255,255,255,.18); border-radius: 9px; width: 32px; height: 32px; display: grid; place-items: center; }
.barra-der { display: flex; gap: 6px; align-items: center; }
.barra-turno, .barra-btn { color: #fff; text-decoration: none; background: rgba(255,255,255,.16); padding: 6px 11px; border-radius: 99px; font: inherit; font-size: .84rem; white-space: nowrap; border: 0; cursor: pointer; }
.barra-turno.sin-turno { background: #fbbf24; color: #422006; font-weight: 700; }
.barra-btn { background: #fbbf24; color: #422006; font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.barra-btn.activa { background: rgba(255,255,255,.16); color: #fff; font-weight: 500; }
.menu-superior { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 8px; max-width: 1400px; margin: 0 auto; -webkit-overflow-scrolling: touch; }
.menu-superior::-webkit-scrollbar { display: none; }
.menu-superior a { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px 11px; color: #d6f5ef; text-decoration: none; font-weight: 600; font-size: .9rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.menu-superior a span { font-size: 1.05rem; }
.menu-superior a:hover { color: #fff; background: rgba(255,255,255,.07); }
.menu-superior a.activo { color: #fff; border-bottom-color: #fbbf24; }
.menu-superior .menu-salir { margin-left: auto; }
@media (max-width: 520px) { .barra-btn #estado-alarma { display: none; } .barra-titulo { font-size: 1.02rem; } }

.contenido { max-width: 1400px; margin: 0 auto; padding: 14px; }
.pie { text-align: center; color: var(--muted); font-size: .75rem; margin: 22px 0 8px; }
.mt { margin-top: 10px; }
.pagina-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 12px; flex-wrap: wrap; }
.pagina-cab h1 { margin: 0; }

/* ---- tarjetas ---- */
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); padding: 14px; margin-bottom: 12px; box-shadow: var(--sombra); }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: .6em; flex-wrap: wrap; }
.tarjeta-cab h2 { margin: 0; }
.enlace { text-decoration: none; font-weight: 600; font-size: .9rem; }
.tarjeta-indicaciones { background: #f0fdfa; border: 1px solid #99f6e4; }
.tarjeta-indicaciones p { margin: 0; }

/* ---- turno ---- */
.tarjeta-turno { background: linear-gradient(135deg, #0f766e, #14917f); color: #fff; }
.tarjeta-turno .muted { color: #ccfbf1; }
.tarjeta-turno .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35); }
.tarjeta-turno .btn-primario { background: #fff; color: var(--primario); }
.tarjeta-turno textarea { background: rgba(255,255,255,.95); }
.tarjeta-turno label { color: #fff; }
.turno-info { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.turno-nombre { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.etq { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex: none; }
.avatar-chico { width: 40px; height: 40px; font-size: .9rem; background: var(--primario-claro); color: var(--primario-osc); }

/* ---- botones ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 11px;
  border: 1px solid var(--borde); background: #fff; color: var(--texto); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-bloque { display: flex; width: 100%; margin-top: 8px; }
.btn-chico { min-height: 36px; padding: 6px 12px; font-size: .88rem; }
.btn-llamar { background: var(--verde); border-color: var(--verde); color: #fff !important; }
.btn-wa { background: #25d366; border-color: #25d366; color: #fff; }
.btn-peligro-borde { color: var(--rojo); border-color: var(--rojo-borde); background: #fff; }
.btn-peligro { background: var(--rojo) !important; color: #fff !important; }
.botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- formularios ---- */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.form label small { font-weight: 400; color: var(--muted); }
input, select, textarea { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #cfd8d5; border-radius: 10px; background: #fff; color: var(--texto); width: 100%; min-height: 46px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: 0; border-color: var(--primario); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.check input { width: 24px; min-height: 24px; height: 24px; }
.grupo-titulo { font-weight: 700; color: var(--primario); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
input.nivel-alerta { background: var(--ambar-bg); border-color: var(--ambar-borde); }
input.nivel-peligro { background: var(--rojo-bg); border-color: var(--rojo-borde); }
input.nivel-ok { background: #f6fef9; border-color: var(--verde-borde); }
.caja-acceso { border: 1px dashed var(--borde); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.caja-acceso legend { font-weight: 700; padding: 0 6px; }
.ayuda-horario { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.ayuda-horario input { width: auto; min-height: 36px; padding: 5px 8px; }

/* ---- avisos ---- */
.aviso { padding: 11px 14px; border-radius: 12px; margin-bottom: 12px; background: #e0f2fe; border: 1px solid #bae6fd; }
.aviso-ok { background: var(--verde-bg); border-color: var(--verde-borde); }
.aviso-error { background: var(--rojo-bg); border-color: var(--rojo-borde); }
.aviso-alerta { background: var(--ambar-bg); border-color: var(--ambar-borde); }
.alertas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.alerta { display: block; border-radius: var(--radio); padding: 12px 14px; text-decoration: none; color: var(--texto); }
.alerta b { display: block; }
.alerta-roja { background: var(--rojo-bg); border: 1px solid var(--rojo-borde); }
.alerta-roja > b { color: var(--rojo); }
.alerta-amarilla { background: var(--ambar-bg); border: 1px solid var(--ambar-borde); }
.alerta-amarilla > b { color: var(--ambar); }

/* ---- medidas ---- */
.medidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.medida { border-radius: 12px; padding: 10px; background: var(--gris-bg); border: 1px solid transparent; }
.medida-nom { font-size: .74rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.medida-val { font-size: 1.45rem; font-weight: 800; line-height: 1.15; margin: 2px 0; }
.medida-val small { font-size: .62rem; font-weight: 600; color: var(--muted); }
.medida-hace { font-size: .72rem; color: var(--muted); }
.medida.nivel-ok { background: #f0fdf4; border-color: #bbf7d0; }
.medida.nivel-alerta { background: var(--ambar-bg); border-color: var(--ambar-borde); }
.medida.nivel-peligro { background: var(--rojo-bg); border-color: var(--rojo-borde); }
.medida.nivel-peligro .medida-val { color: var(--rojo); }
td.nivel-alerta, span.nivel-alerta { background: var(--ambar-bg); }
td.nivel-peligro, span.nivel-peligro { background: var(--rojo-bg); color: var(--rojo); font-weight: 700; }
span.nivel-alerta, span.nivel-peligro { padding: 0 4px; border-radius: 4px; }

/* ---- DOSIS (los botones de colores) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dosis { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; min-height: 56px; padding: 6px 10px;
  border-radius: 14px; border: 2px solid #cbd5d2; background: #fff; color: var(--texto); font: inherit; cursor: pointer; transition: transform .1s, background .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dosis b { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.dosis small { font-size: .7rem; font-weight: 600; white-space: nowrap; }
.dosis:active { transform: scale(.94); }
.dosis.est-pendiente { border-style: dashed; color: #475569; }
.dosis.est-proxima { background: var(--ambar-bg); border-color: #f59e0b; color: var(--ambar); }
.dosis.est-atrasada { background: var(--rojo-bg); border-color: #ef4444; color: var(--rojo); animation: latido 1.6s infinite; }
.dosis.est-dada { background: var(--verde); border-color: var(--verde); color: #fff; }
.dosis.est-omitida { background: var(--gris-bg); border-color: #94a3b8; color: #64748b; }
.dosis.est-omitida b { text-decoration: line-through; }
.dosis.est-rechazada { background: var(--naranja-bg); border-color: #fb923c; color: var(--naranja); }
.dosis.cargando { opacity: .55; }
.dosis.recien { animation: pop .5s; }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }

.lista-dosis { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fila-dosis { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fila-dosis > span { font-weight: 600; }
.med-nombre { font-weight: 700; font-size: 1.05rem; }
.med-cab { margin-bottom: 10px; }
.nota-med { background: #fffbeb; border-left: 3px solid #fbbf24; padding: 4px 8px; margin-top: 4px; border-radius: 4px; }
.etiqueta { display: inline-block; font-size: .7rem; font-weight: 700; background: var(--gris-bg); color: var(--muted); padding: 2px 8px; border-radius: 99px; vertical-align: middle; }

.resumen-dia { margin: 4px 2px 12px; }
.resumen-dia h2 { font-size: 1.2rem; margin-bottom: 6px; }
.progreso { height: 10px; border-radius: 99px; background: #e2e8e6; overflow: hidden; }
.progreso div { height: 100%; background: var(--verde); border-radius: 99px; transition: width .4s; }

.pestanas { display: flex; background: #e3e9e7; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 10px; }
.pestanas a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .9rem; }
.pestanas a.activo { background: #fff; color: var(--primario); box-shadow: var(--sombra); }
.pestanas-chicas { margin: 0; }
.pestanas-chicas a { padding: 5px 9px; font-size: .8rem; }
.nav-fecha { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.nav-fecha form { flex: 1; }

/* ---- vista semanal ---- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.semana { border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radio); min-width: 760px; font-size: .85rem; box-shadow: var(--sombra); }
.semana th, .semana td { border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); padding: 6px; vertical-align: top; text-align: center; }
.semana thead th { background: #f8faf9; font-size: .8rem; position: sticky; top: 0; }
.semana .col-med { position: sticky; left: 0; background: #fff; text-align: left; min-width: 130px; max-width: 150px; z-index: 1; font-size: .82rem; }
.semana .col-med small { display: block; color: var(--muted); font-weight: 400; }
.semana .hoy { background: #f0fdfa; }
.chips-compactos { gap: 4px; justify-content: center; }
.chips-compactos .dosis { min-width: 54px; min-height: 42px; padding: 3px 4px; border-radius: 10px; }
.chips-compactos .dosis b { font-size: .88rem; }
.chips-compactos .dosis small { font-size: .62rem; }

.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 2px 6px; font-size: .8rem; color: var(--muted); }
.leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; border: 2px solid; }
.leyenda .est-dada { background: var(--verde); border-color: var(--verde); }
.leyenda .est-proxima { background: var(--ambar-bg); border-color: #f59e0b; }
.leyenda .est-atrasada { background: var(--rojo-bg); border-color: #ef4444; }
.leyenda .est-pendiente { background: #fff; border: 2px dashed #cbd5d2; }
.leyenda .est-omitida { background: var(--gris-bg); border-color: #94a3b8; }
.leyenda .est-rechazada { background: var(--naranja-bg); border-color: #fb923c; }

/* ---- hoja de detalle (se abre al tocar una dosis ya marcada) ---- */
.hoja-fondo { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,22,.45); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; }
.hoja-fondo.visible { opacity: 1; }
.hoja { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(30px); transition: transform .2s; }
.hoja-fondo.visible .hoja { transform: none; }
.hoja-asa { width: 44px; height: 5px; border-radius: 99px; background: #d1d9d6; margin: 4px auto 12px; }
.detalle-actual { border-radius: 12px; padding: 10px 12px; margin: 10px 0 14px; border: 1px solid var(--borde); }
.detalle-actual.est-dada { background: var(--verde-bg); border-color: var(--verde-borde); }
.detalle-actual.est-omitida { background: var(--gris-bg); }
.detalle-actual.est-rechazada { background: var(--naranja-bg); border-color: #fdba74; }
.opciones-estado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.opciones-estado .op { position: relative; }
.opciones-estado input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; pointer-events: none; }
.opciones-estado span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 6px; border: 2px solid var(--borde); border-radius: 12px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.opciones-estado .est-dada input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; }
.opciones-estado .est-omitida input:checked + span { background: #64748b; border-color: #64748b; color: #fff; }
.opciones-estado .est-rechazada input:checked + span { background: #ea580c; border-color: #ea580c; color: #fff; }
.historial { margin-top: 14px; }
.historial summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.historial div { padding: 4px 0; border-bottom: 1px solid var(--borde); }

/* ---- toast ---- */
.toast { position: fixed; left: 12px; right: 12px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; max-width: 520px; margin: 0 auto;
  background: #1f2937; color: #fff; padding: 12px 14px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transform: translateY(20px); opacity: 0; transition: .25s; }
.toast.visible { transform: none; opacity: 1; }
.toast button { background: transparent; border: 1px solid #5eead4; color: #5eead4; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }

/* ---- listas ---- */
.contacto { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.contacto:last-child { border-bottom: 0; }
.contacto > div:first-child:not(.avatar) { flex: 1; }
.contacto-datos { flex: 1; min-width: 0; }
.contacto-botones { display: flex; gap: 6px; align-items: center; }
.contacto-botones form { margin: 0; }
.inactivo { opacity: .55; }
.remedio { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.remedio:last-child { border-bottom: 0; }
.remedio-datos { flex: 1; min-width: 200px; }
.remedio-botones { display: flex; gap: 6px; }
.remedio-botones form { margin: 0; }
.horas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.horas span { background: var(--primario-claro); color: var(--primario-osc); font-weight: 700; font-size: .8rem; padding: 2px 8px; border-radius: 6px; }
.turno-hist { border-left: 4px solid var(--borde); padding: 6px 0 8px 12px; margin-bottom: 10px; }
.turno-hist.abierto { border-left-color: var(--verde); }
.turno-hist-cab { display: flex; justify-content: space-between; gap: 8px; }
.acciones-fila { display: flex; gap: 14px; margin-top: 4px; }
.item-menu { display: flex; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--borde); text-decoration: none; color: var(--texto); }
.item-menu:last-child { border-bottom: 0; }
.item-menu small { display: block; }
.item-ico { font-size: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; background: var(--gris-bg); border-radius: 12px; flex: none; }

/* ---- tablas ---- */
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th { text-align: left; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 6px; border-bottom: 2px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 7px 6px; border-bottom: 1px solid var(--borde); }
.fila-dia td { background: #f0fdfa; font-weight: 700; color: var(--primario-osc); }
.fila-nota td { border-bottom: 1px solid var(--borde); font-size: .82rem; color: var(--muted); padding-top: 0; }

/* ---- reporte ---- */
.reporte-cab h1 { font-size: 1.25rem; }
.dia-reporte { margin: 16px 0 8px; padding: 6px 10px; background: var(--primario-claro); color: var(--primario-osc); border-radius: 8px; }
.bloque-hora { border-left: 3px solid var(--borde); margin: 0 0 10px 6px; padding-left: 12px; }
.bloque-hora-cab { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.evento { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: .88rem; }
.evento-hora { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 40px; }
.evento i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: #94a3b8; }
.evento i.est-dada { background: var(--verde); }
.evento i.est-atrasada { background: #ef4444; }
.evento i.est-rechazada { background: #fb923c; }
.evento i.signos { background: #ec4899; }
.evento i.turno { background: var(--primario); }
.filtros .botones .btn { flex: 1; }

/* ---- login ---- */
.pantalla-login { padding: 0; min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, #0f766e, #134e4a); }
.login-caja { background: #fff; width: min(400px, 92vw); padding: 26px 22px; border-radius: 20px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.login-caja .form { text-align: left; }
.logo { font-size: 2.6rem; }

@media (min-width: 700px) {
  .contenido { padding: 18px; }
  .medidas { grid-template-columns: repeat(6, 1fr); }
  .dosis { min-width: 86px; }
}
@media (max-width: 360px) { .medidas { grid-template-columns: repeat(2, 1fr); } .fila-2 { grid-template-columns: 1fr; } }

@media print {
  body { background: #fff; padding: 0; font-size: 12px; }
  .cabecera, .no-imprimir, .toast, .alarma-fondo, .pie { display: none !important; }
  .tarjeta { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .contenido { max-width: none; padding: 0; }
  td.nivel-peligro, span.nivel-peligro, td.nivel-alerta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.fila-2 > *, .form label { min-width: 0; }
input, select { min-width: 0; max-width: 100%; }
html, body { overflow-x: hidden; }

/* ===== v3 ===== */
.inicio-arriba { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.inicio-arriba > .tarjeta { margin: 0; }
.inicio-abajo { display: grid; grid-template-columns: 1fr; gap: 12px; }
.inicio-abajo > .tarjeta { margin: 0; }
@media (min-width: 900px) { .inicio-arriba { grid-template-columns: 2fr 3fr; } .inicio-abajo { grid-template-columns: 1fr 1fr; } }
.medidas { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.hoy-resumen { margin-top: 14px; }
.hoy-resumen > div:first-child { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.hoy-resumen b { font-size: 1.4rem; }
.progreso-claro { background: rgba(255,255,255,.25); }
.progreso-claro div { background: #86efac; }
section.alerta { margin-bottom: 12px; }

/* calendario semanal grande */
.calendario-tarjeta { padding: 14px 10px; }
.cal-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 4px 10px; }
.cal-cab h2 { margin: 0; font-size: 1.2rem; }
.cal-nav { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.calendario { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; table-layout: fixed; }
.calendario th, .calendario td { border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); padding: 5px; vertical-align: top; }
.calendario thead th { background: #f3f7f6; font-size: .9rem; padding: 8px 5px; text-align: center; }
.calendario thead th small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; }
.calendario thead th.hoy { background: var(--primario); color: #fff; }
.calendario thead th.hoy small { color: #ccfbf1; }
.calendario td.hoy { background: #f0fdfa; }
.calendario .cal-hora { width: 66px; position: sticky; left: 0; background: #fff; z-index: 1; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--primario-osc); }
.calendario thead .cal-hora { z-index: 3; background: #f3f7f6; color: var(--muted); font-size: .8rem; }
.calendario tr.fila-ahora .cal-hora { background: #fef3c7; }
.calendario tr.fila-ahora td { box-shadow: inset 0 3px 0 #f59e0b; }
.dosis-cal { display: flex; width: 100%; min-width: 0; min-height: 48px; align-items: flex-start; text-align: left; padding: 6px 8px; margin-bottom: 4px; border-radius: 10px; }
.dosis-cal b { font-size: .85rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.dosis-cal small { font-size: .7rem; font-weight: 600; white-space: normal; opacity: .9; }
.dosis-cal:last-child { margin-bottom: 0; }
.alerta .chips .dosis-cal { width: auto; min-width: 150px; }

/* personas */
.personas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.persona { border: 1px solid var(--borde); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.persona-cab { display: flex; gap: 10px; }
.persona-datos { flex: 1; min-width: 0; }
.persona-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.persona-botones form { margin: 0; }
.etiqueta-verde { background: var(--verde-bg); color: var(--verde); }

/* remedios: editor de horas */
.horas-editor { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#lista-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.hora-item { display: flex; gap: 4px; align-items: center; }
.hora-item input { width: 130px; font-size: 1.1rem; font-weight: 700; }
.hora-item .btn { min-height: 44px; padding: 6px 12px; }

/* reporte de remedios */
.fila-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); text-decoration: none; color: var(--texto); border: 1px solid var(--borde); display: flex; flex-direction: column; }
.kpi span { font-size: .78rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.kpi b { font-size: 1.9rem; line-height: 1.15; }
.kpi small { color: var(--muted); }
.kpi-verde { border-left: 5px solid var(--verde); } .kpi-verde b { color: var(--verde); }
.kpi-rojo { border-left: 5px solid #ef4444; } .kpi-rojo b { color: var(--rojo); }
.kpi-ambar { border-left: 5px solid #f59e0b; } .kpi-ambar b { color: var(--ambar); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pill-verde, .pill-a-tiempo { background: var(--verde-bg); color: var(--verde); }
.pill-rojo, .pill-muy-tarde { background: var(--rojo-bg); color: var(--rojo); }
.pill-tarde { background: var(--ambar-bg); color: var(--ambar); }
.pill-antes { background: #e0f2fe; color: #0369a1; }
.fila-no td { background: #fff7f7; }
.barra-pct { position: relative; height: 20px; background: #eef1f0; border-radius: 6px; min-width: 110px; overflow: hidden; }
.barra-pct div { height: 100%; background: #86efac; }
.barra-pct div.baja { background: #fca5a5; }
.barra-pct span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.tabla-detalle td { white-space: nowrap; }
.tabla-detalle td:nth-child(2), .tabla-detalle td:last-child { white-space: normal; }

/* ventana de alarma */
.alarma-fondo { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; animation: parpadeo 1.2s infinite alternate; }
@keyframes parpadeo { from { background: rgba(127,29,29,.45); } to { background: rgba(185,28,28,.72); } }
.alarma-caja { background: #fff; border-radius: 22px; padding: 22px 20px; width: min(440px, 100%); text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.alarma-icono { font-size: 3.2rem; animation: timbre .5s infinite alternate; }
@keyframes timbre { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.alarma-titulo { font-size: 1.3rem; font-weight: 800; margin: 6px 0 12px; }
.alarma-lista { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-bottom: 8px; }
.alarma-item { display: flex; gap: 12px; align-items: center; background: var(--ambar-bg); border: 1px solid var(--ambar-borde); border-radius: 12px; padding: 10px 12px; }
.alarma-item b { font-size: 1.3rem; color: var(--ambar); }
.alarma-item span { font-weight: 700; font-size: 1.05rem; }
.alarma-item small { display: block; font-weight: 500; color: var(--muted); }
.codigo { background: #f1f5f4; border-radius: 8px; padding: 8px 10px; font-size: .8rem; white-space: pre-wrap; word-break: break-all; }
@media print { .kpi { break-inside: avoid; } .calendario { min-width: 0; } }
.alarma-item.ya { background: var(--rojo-bg); border-color: var(--rojo-borde); }
.alarma-item.ya b { color: var(--rojo); }