/* ============================================================================
   Angelus — capa de tema y componentes
   ----------------------------------------------------------------------------
   Se carga SIEMPRE despues de style.css. Define los tokens del sistema y
   reescribe unicamente las superficies que aparecen de verdad en estas
   pantallas (cabecera, tarjetas, tablas, panel de alertas, formularios).

   Reglas de la casa:
   · Ningun estado se comunica solo con color: siempre color + icono + texto.
   · Ningun color se escribe suelto en el markup: todo sale de un token.
   · El tema oscuro solo redefine tokens, nunca reglas de componente.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Tokens — tema claro
   -------------------------------------------------------------------------- */
:root {
  --ang-fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --ang-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --ang-radio:    14px;
  --ang-radio-sm:  9px;
  --ang-sombra:   0 1px 2px rgba(20,24,55,.05), 0 6px 20px -8px rgba(20,24,55,.16);
  --ang-sombra-sm:0 1px 2px rgba(20,24,55,.06);
  --ang-trans:    160ms cubic-bezier(.2,.6,.3,1);
  --ang-foco:     0 0 0 3px color-mix(in srgb, var(--ang-marca) 35%, transparent);

  --ang-fondo:        #f2f4fa;
  --ang-superficie:   #ffffff;
  --ang-superficie-2: #f7f8fd;
  --ang-superficie-3: #ebeef7;
  --ang-borde:        #e2e5f0;
  --ang-borde-2:      #ccd1e3;

  --ang-texto:   #171a2e;
  --ang-texto-2: #565c7a;
  --ang-texto-3: #6f7593;

  --ang-marca:       #2E37A4;
  --ang-marca-2:     #4E57CD;
  --ang-marca-suave: #e9ebf8;
  --ang-acento:      #00A79E;
  --ang-sobre-marca: #ffffff;   /* texto encima del color de marca */

  --ang-ok:    #12694a;  --ang-ok-fondo:   #e4f5ec;  --ang-ok-linea:   #1f9c6b;
  --ang-warn:  #8a5200;  --ang-warn-fondo: #fdf1de;  --ang-warn-linea: #d98a12;
  --ang-crit:  #ad1f1f;  --ang-crit-fondo: #fcebea;  --ang-crit-linea: #d93a3a;
  --ang-off:   #4a5070;  --ang-off-fondo:  #eceef6;  --ang-off-linea:  #8b92b0;

  --ang-mapa-filtro: none;

  --ang-fs-tile: 2.5rem;   /* numero grande de las fichas resumen */
  --ang-fs-vital: 1.15rem;
}

/* ----------------------------------------------------------------------------
   2. Tokens — tema oscuro
   El bloque se repite para las dos vias de activacion (preferencia del sistema
   y eleccion explicita) porque son selectores distintos; los valores son los
   mismos y no hay reglas de componente aca.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ang-fondo:        #0e1018;
    --ang-superficie:   #171a25;
    --ang-superficie-2: #1e2230;
    --ang-superficie-3: #262b3b;
    --ang-borde:        #272c3c;
    --ang-borde-2:      #3a4058;

    --ang-texto:   #e8eaf4;
    --ang-texto-2: #a9afc7;
    --ang-texto-3: #8b91ac;

    --ang-marca:       #8d95f5;
    --ang-marca-2:     #a8aef8;
    --ang-marca-suave: #1d2140;
    --ang-acento:      #2fd9cd;
    --ang-sobre-marca: #10131f;

    --ang-ok:    #5fd39b;  --ang-ok-fondo:   #12281f;  --ang-ok-linea:   #2f9d6d;
    --ang-warn:  #f2b15c;  --ang-warn-fondo: #2b2013;  --ang-warn-linea: #c9861f;
    --ang-crit:  #ff8f8f;  --ang-crit-fondo: #2e1517;  --ang-crit-linea: #e05252;
    --ang-off:   #9aa0bd;  --ang-off-fondo:  #1c2030;  --ang-off-linea:  #5a6180;

    --ang-sombra:    0 1px 2px rgba(0,0,0,.45), 0 8px 24px -10px rgba(0,0,0,.75);
    --ang-sombra-sm: 0 1px 2px rgba(0,0,0,.45);
    --ang-mapa-filtro: invert(1) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.8);
  }
}

:root[data-theme="dark"] {
  --ang-fondo:        #0e1018;
  --ang-superficie:   #171a25;
  --ang-superficie-2: #1e2230;
  --ang-superficie-3: #262b3b;
  --ang-borde:        #272c3c;
  --ang-borde-2:      #3a4058;

  --ang-texto:   #e8eaf4;
  --ang-texto-2: #a9afc7;
  --ang-texto-3: #8b91ac;

  --ang-marca:       #8d95f5;
  --ang-marca-2:     #a8aef8;
  --ang-marca-suave: #1d2140;
  --ang-acento:      #2fd9cd;
  --ang-sobre-marca: #10131f;

  --ang-ok:    #5fd39b;  --ang-ok-fondo:   #12281f;  --ang-ok-linea:   #2f9d6d;
  --ang-warn:  #f2b15c;  --ang-warn-fondo: #2b2013;  --ang-warn-linea: #c9861f;
  --ang-crit:  #ff8f8f;  --ang-crit-fondo: #2e1517;  --ang-crit-linea: #e05252;
  --ang-off:   #9aa0bd;  --ang-off-fondo:  #1c2030;  --ang-off-linea:  #5a6180;

  --ang-sombra:    0 1px 2px rgba(0,0,0,.45), 0 8px 24px -10px rgba(0,0,0,.75);
  --ang-sombra-sm: 0 1px 2px rgba(0,0,0,.45);
  --ang-mapa-filtro: invert(1) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.8);
}

/* ----------------------------------------------------------------------------
   3. Modo pared — la pantalla colgada en la sala de control.
   Sube el tamano de todo lo que hay que leer a tres metros y saca el cromo
   que solo sirve si hay un mouse delante.
   -------------------------------------------------------------------------- */
:root[data-densidad="pared"] {
  --ang-fs-tile: 4.25rem;
  --ang-fs-vital: 1.65rem;
  --ang-radio: 18px;
}
:root[data-densidad="pared"] body { font-size: 17px; }
:root[data-densidad="pared"] .ang-perfil__txt,
:root[data-densidad="pared"] .breadcrumb,
:root[data-densidad="pared"] .ang-card-persona__accion { display: none; }
:root[data-densidad="pared"] .ang-card-persona__nombre { font-size: 1.5rem; }
:root[data-densidad="pared"] .ang-vital__valor { font-weight: 700; }
:root[data-densidad="pared"] .ang-tile__n { letter-spacing: -.03em; }

/* ----------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */
body,
body.login-body {
  font-family: var(--ang-fuente);
  background: var(--ang-fondo);
  color: var(--ang-texto);
  -webkit-font-smoothing: antialiased;
}

/* El template declara Public Sans y Rubik, que nunca se cargaron: unificamos. */
body h1, body h2, body h3, body h4, body h5, body h6,
body .card-title, body .page-title, body .breadcrumb,
body .form-control, body .btn, body table {
  font-family: var(--ang-fuente);
}

body a { color: var(--ang-marca); }
body a:hover { color: var(--ang-marca-2); }

:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ang-foco);
  border-radius: var(--ang-radio-sm);
}

.ang-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ang-sprite { display: none; }

.ang-i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.18em;
}
.ang-i--g { width: 1.5em; height: 1.5em; }

/* ----------------------------------------------------------------------------
   5. Chasis: cabecera y lienzo
   -------------------------------------------------------------------------- */
body .header.ang-header {
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 20px;
  background: var(--ang-superficie);
  border-bottom: 1px solid var(--ang-borde);
  box-shadow: none;
}
body .ang-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1.05rem; color: var(--ang-texto);
  text-decoration: none; width: auto; float: none; padding: 0;
}
body .ang-logo img { border-radius: 8px; }

.ang-header__acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.ang-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ang-texto-2);
  font-size: 18px; cursor: pointer; transition: var(--ang-trans);
}
.ang-iconbtn:hover { background: var(--ang-superficie-3); color: var(--ang-texto); }
.ang-iconbtn[aria-pressed="true"] { background: var(--ang-marca-suave); color: var(--ang-marca); }
.ang-iconbtn--sm { width: 30px; height: 30px; font-size: 15px; }

/* el sol y la luna se alternan segun el tema activo */
.ang-i--luna { display: none; }
:root[data-theme="dark"] .ang-i--sol { display: none; }
:root[data-theme="dark"] .ang-i--luna { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ang-i--sol { display: none; }
  :root:not([data-theme="light"]) .ang-i--luna { display: inline-block; }
}

.ang-badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px;
  background: var(--ang-crit-linea); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

/* indicador de frescura: el dato mas importante de un monitor */
.ang-header__estado {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--ang-superficie-3); border: 1px solid var(--ang-borde);
  font-size: .78rem; font-weight: 500; color: var(--ang-texto-2);
  font-variant-numeric: tabular-nums;
}
.ang-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ang-off-linea); flex: none; }
.ang-header__estado[data-frescura="viva"]  { color: var(--ang-ok);   background: var(--ang-ok-fondo);   border-color: var(--ang-ok-linea); }
.ang-header__estado[data-frescura="viva"]  .ang-punto { background: var(--ang-ok-linea); animation: ang-latir 2.4s ease-in-out infinite; }
.ang-header__estado[data-frescura="tibia"] { color: var(--ang-warn); background: var(--ang-warn-fondo); border-color: var(--ang-warn-linea); }
.ang-header__estado[data-frescura="tibia"] .ang-punto { background: var(--ang-warn-linea); }
.ang-header__estado[data-frescura="muerta"]{ color: var(--ang-crit); background: var(--ang-crit-fondo);border-color: var(--ang-crit-linea); }
.ang-header__estado[data-frescura="muerta"].ang-punto,
.ang-header__estado[data-frescura="muerta"] .ang-punto { background: var(--ang-crit-linea); }

@keyframes ang-latir { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .ang-punto { animation: none !important } }

.ang-perfil__btn {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 6px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ang-texto); cursor: pointer;
}
.ang-perfil__btn:hover { background: var(--ang-superficie-3); }
.ang-perfil__btn::after { color: var(--ang-texto-3); }
.ang-perfil__avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: var(--ang-marca-suave); color: var(--ang-marca); font-size: 17px;
}
.ang-perfil__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ang-perfil__txt strong { font-size: .85rem; font-weight: 600; }
.ang-perfil__txt small  { font-size: .72rem; color: var(--ang-texto-3); }

body .dropdown-menu {
  background: var(--ang-superficie); border: 1px solid var(--ang-borde);
  border-radius: var(--ang-radio-sm); box-shadow: var(--ang-sombra); padding: 6px;
}
body .dropdown-item {
  display: flex; align-items: center; gap: 9px;
  border-radius: 7px; padding: 8px 10px; color: var(--ang-texto-2); font-size: .88rem;
}
body .dropdown-item:hover { background: var(--ang-superficie-3); color: var(--ang-texto); }

body .page-wrapper { padding-top: 64px; background: var(--ang-fondo); }
body .page-wrapper > .content { padding: 22px; padding-bottom: 22px; }
@media (max-width: 575.98px) { body .page-wrapper > .content { padding: 14px; } }

/* ----------------------------------------------------------------------------
   6. Superficies
   -------------------------------------------------------------------------- */
body .card,
body .card-box,
body .good-morning-blk {
  background: var(--ang-superficie);
  border: 1px solid var(--ang-borde);
  border-radius: var(--ang-radio);
  box-shadow: var(--ang-sombra-sm);
  color: var(--ang-texto);
}
body .good-morning-blk::before { display: none; }   /* ilustracion decorativa del template */

body .card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border-bottom: 1px solid var(--ang-borde);
  padding: 14px 18px;
}
body .card-header h4, body .card-header h5 {
  margin: 0; font-size: .95rem; font-weight: 600; color: var(--ang-texto);
}
body .card-body { padding: 18px; }

body .breadcrumb { background: transparent; padding: 0; margin: 0 0 16px; font-size: .82rem; }
body .breadcrumb-item, body .breadcrumb-item a { color: var(--ang-texto-3); }
body .breadcrumb-item.active { color: var(--ang-texto-2); font-weight: 500; }

.ang-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 4px; }
.ang-titulo h1 { font-size: 1.45rem; font-weight: 600; margin: 0; letter-spacing: -.015em; }
.ang-sub { color: var(--ang-texto-2); font-size: .88rem; margin: 0; }

/* ----------------------------------------------------------------------------
   7. Fichas resumen (las cuatro de arriba del monitor)
   -------------------------------------------------------------------------- */
.ang-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 991.98px) { .ang-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)    { .ang-tiles { grid-template-columns: 1fr; } }

.ang-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px;
  background: var(--ang-superficie);
  border: 1px solid var(--ang-borde);
  border-left: 4px solid var(--ang-borde-2);
  border-radius: var(--ang-radio);
  box-shadow: var(--ang-sombra-sm);
}
.ang-tile__k {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ang-texto-3);
}
.ang-tile__n {
  font-size: var(--ang-fs-tile); font-weight: 600; line-height: 1.05;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ang-tile__pie { font-size: .76rem; color: var(--ang-texto-3); }

.ang-tile--ok   { border-left-color: var(--ang-ok-linea);   }
.ang-tile--ok   .ang-tile__k, .ang-tile--ok   .ang-tile__n { color: var(--ang-ok);   }
.ang-tile--warn { border-left-color: var(--ang-warn-linea); }
.ang-tile--warn .ang-tile__k, .ang-tile--warn .ang-tile__n { color: var(--ang-warn); }
.ang-tile--crit { border-left-color: var(--ang-crit-linea); }
.ang-tile--crit .ang-tile__k, .ang-tile--crit .ang-tile__n { color: var(--ang-crit); }
.ang-tile--total{ border-left-color: var(--ang-marca);      }
.ang-tile--total .ang-tile__k { color: var(--ang-texto-3); }

/* ----------------------------------------------------------------------------
   8. Tarjeta de persona monitoreada
   -------------------------------------------------------------------------- */
.ang-lista { display: flex; flex-direction: column; gap: 10px; }

.ang-card-persona {
  border: 1px solid var(--ang-borde);
  border-left: 5px solid var(--ang-off-linea);
  border-radius: var(--ang-radio-sm);
  background: var(--ang-superficie);
  padding: 13px 15px;
  transition: var(--ang-trans);
}
.ang-card-persona:hover { border-color: var(--ang-borde-2); box-shadow: var(--ang-sombra-sm); }

.ang-card-persona--ok   { border-left-color: var(--ang-ok-linea);   }
.ang-card-persona--warn { border-left-color: var(--ang-warn-linea); background: var(--ang-warn-fondo); }
.ang-card-persona--crit { border-left-color: var(--ang-crit-linea); background: var(--ang-crit-fondo); }
.ang-card-persona--off  { border-left-color: var(--ang-off-linea);  background: var(--ang-off-fondo);  }

.ang-card-persona__top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 11px; }
.ang-card-persona__nombre { font-size: 1rem; font-weight: 600; margin: 0 0 3px; }
.ang-card-persona__meta { margin-left: auto; text-align: right; flex: none; }

/* La etiqueta de estado lleva icono + texto: el color nunca viaja solo. */
.ang-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent;
}
.ang-chip--ok   { color: var(--ang-ok);   background: var(--ang-ok-fondo);   border-color: var(--ang-ok-linea);   }
.ang-chip--warn { color: var(--ang-warn); background: var(--ang-warn-fondo); border-color: var(--ang-warn-linea); }
.ang-chip--crit { color: var(--ang-crit); background: var(--ang-crit-fondo); border-color: var(--ang-crit-linea); }
.ang-chip--off  { color: var(--ang-off);  background: var(--ang-off-fondo);  border-color: var(--ang-off-linea);  }
.ang-chip--nd   { color: var(--ang-texto-3); background: var(--ang-superficie-3); border-color: var(--ang-borde); }

.ang-edad {
  display: block; margin-top: 4px;
  font-size: .76rem; color: var(--ang-texto-3); font-variant-numeric: tabular-nums;
}
.ang-edad--vieja { color: var(--ang-crit); font-weight: 600; }

/* fila de signos vitales */
.ang-vitales {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  border-top: 1px dashed var(--ang-borde); padding-top: 11px;
}
@media (max-width: 480px) { .ang-vitales { grid-template-columns: repeat(3, 1fr); row-gap: 10px; } }

.ang-vital { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ang-vital__i { color: var(--ang-texto-3); font-size: 15px; }
.ang-vital__valor {
  font-size: var(--ang-fs-vital); font-weight: 600; line-height: 1.1;
  color: var(--ang-texto); font-variant-numeric: tabular-nums;
}
.ang-vital__u { font-size: .68rem; color: var(--ang-texto-3); }
.ang-vital--crit .ang-vital__i,
.ang-vital--crit .ang-vital__valor,
.ang-vital--crit .ang-vital__u { color: var(--ang-crit); }
.ang-vital--crit .ang-vital__valor { font-weight: 700; }
.ang-vital--nd .ang-vital__valor { color: var(--ang-texto-3); font-weight: 500; }

.ang-card-persona__accion { margin-top: 11px; text-align: right; }

.ang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 8px;
  border: 1px solid var(--ang-borde-2); background: var(--ang-superficie);
  color: var(--ang-texto-2); font-size: .82rem; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: var(--ang-trans);
}
.ang-btn:hover { border-color: var(--ang-marca); color: var(--ang-marca); background: var(--ang-marca-suave); }
.ang-btn--principal {
  background: var(--ang-marca); border-color: var(--ang-marca); color: var(--ang-sobre-marca);
}
.ang-btn--principal:hover { background: var(--ang-marca-2); border-color: var(--ang-marca-2); color: var(--ang-sobre-marca); }

/* ----------------------------------------------------------------------------
   9. Estados de carga, vacio y error — antes no existia ninguno y un tablero
   recien abierto era indistinguible de uno sin gente monitoreada.
   -------------------------------------------------------------------------- */
.ang-estado-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 44px 24px; text-align: center; color: var(--ang-texto-3);
}
.ang-estado-vacio .ang-i { width: 34px; height: 34px; stroke-width: 1.4; opacity: .55; }
.ang-estado-vacio h3 { font-size: .98rem; font-weight: 600; color: var(--ang-texto-2); margin: 0; }
.ang-estado-vacio p  { font-size: .84rem; margin: 0; max-width: 42ch; }
.ang-estado-vacio--error .ang-i { color: var(--ang-crit); opacity: 1; }

.ang-esqueleto { display: flex; flex-direction: column; gap: 10px; }
.ang-esqueleto span {
  display: block; height: 96px; border-radius: var(--ang-radio-sm);
  background: linear-gradient(90deg, var(--ang-superficie-2) 25%, var(--ang-superficie-3) 37%, var(--ang-superficie-2) 63%);
  background-size: 400% 100%;
  animation: ang-brillo 1.4s ease-in-out infinite;
}
@keyframes ang-brillo { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) { .ang-esqueleto span { animation: none } }

/* ----------------------------------------------------------------------------
   10. Mapa
   -------------------------------------------------------------------------- */
.ang-mapa { height: 70vh; min-height: 320px; border-radius: 0 0 var(--ang-radio) var(--ang-radio); }
.leaflet-tile-pane { filter: var(--ang-mapa-filtro); }
body .leaflet-container { background: var(--ang-superficie-3); font-family: var(--ang-fuente); }
body .leaflet-popup-content-wrapper, body .leaflet-popup-tip {
  background: var(--ang-superficie); color: var(--ang-texto); box-shadow: var(--ang-sombra);
}
body .leaflet-bar a {
  background: var(--ang-superficie); color: var(--ang-texto-2); border-bottom-color: var(--ang-borde);
}
body .leaflet-bar a:hover { background: var(--ang-superficie-3); color: var(--ang-texto); }

/* ----------------------------------------------------------------------------
   11. Panel lateral de alertas
   -------------------------------------------------------------------------- */
body .notification-box.ang-panel {
  top: 64px; width: 330px; margin-right: -330px;
  background: var(--ang-superficie); box-shadow: var(--ang-sombra);
}
body .notification-box.ang-panel.ang-abierto { margin-right: 0; }
body .sidebar-overlay.ang-overlay { display: none; }
body .sidebar-overlay.ang-overlay.ang-abierto { display: block; opacity: 1; }
@media (max-width: 420px) {
  body .notification-box.ang-panel { width: 100%; margin-right: -100%; }
}
body .ang-panel .msg-sidebar {
  background: var(--ang-superficie); border-left: 1px solid var(--ang-borde); height: 100%;
}
.ang-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--ang-borde);
  font-weight: 600; font-size: .92rem; color: var(--ang-texto);
}
body .ang-panel__body { width: auto; height: calc(100vh - 64px - 53px); overflow-y: auto; }
.ang-noti-lista { list-style: none; margin: 0; padding: 6px; }

.ang-noti a {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 11px; border-radius: var(--ang-radio-sm);
  color: inherit; text-decoration: none; transition: var(--ang-trans);
}
.ang-noti a:hover { background: var(--ang-superficie-3); }
.ang-noti__icono {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--ang-superficie-3); color: var(--ang-texto-2); font-size: 15px;
}
.ang-noti--sinleer .ang-noti__icono { background: var(--ang-crit-fondo); color: var(--ang-crit); }
.ang-noti__cuerpo { flex: 1; min-width: 0; }
.ang-noti__fila { display: flex; align-items: baseline; gap: 8px; }
.ang-noti__fila strong { font-size: .85rem; font-weight: 600; color: var(--ang-texto); }
.ang-noti__fila time { margin-left: auto; font-size: .72rem; color: var(--ang-texto-3); flex: none; }
.ang-noti__detalle { display: block; font-size: .79rem; color: var(--ang-texto-2); margin-top: 2px; }
.ang-noti--sinleer .ang-noti__detalle b { color: var(--ang-crit); }

.ang-noti-vacio, .ang-noti-cargando {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 38px 18px; text-align: center; color: var(--ang-texto-3); font-size: .85rem;
}
.ang-noti-vacio .ang-i { width: 26px; height: 26px; color: var(--ang-ok); }
.ang-noti-vacio p, .ang-noti-cargando p { margin: 0; }

body .sidebar-overlay.ang-overlay { background: rgba(9,11,20,.5); z-index: 100; }

/* ----------------------------------------------------------------------------
   12. Tablas y formularios
   -------------------------------------------------------------------------- */
body .table { color: var(--ang-texto); margin: 0; }
body .table > :not(caption) > * > * { background: transparent; border-bottom-color: var(--ang-borde); padding: 11px 14px; }
body .table thead th {
  background: var(--ang-superficie-2); color: var(--ang-texto-3);
  font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--ang-borde);
}
body .table tbody tr:hover > * { background: var(--ang-superficie-2); }
body .dataTables_wrapper .dataTables_filter input,
body .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--ang-superficie); border: 1px solid var(--ang-borde);
  color: var(--ang-texto-2) !important; border-radius: 7px;
}
body .dataTables_wrapper .dataTables_filter { padding: 10px 14px 0; }
body .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--ang-marca); color: var(--ang-sobre-marca) !important; border-color: var(--ang-marca); }

body .form-control, body .select2-container--default .select2-selection--single {
  background: var(--ang-superficie); border: 1px solid var(--ang-borde-2);
  color: var(--ang-texto); border-radius: var(--ang-radio-sm); min-height: 42px;
}
body .form-control::placeholder { color: var(--ang-texto-3); }
body .form-control:focus { border-color: var(--ang-marca); box-shadow: var(--ang-foco); background: var(--ang-superficie); color: var(--ang-texto); }
body label, body .focus-label { color: var(--ang-texto-2); font-size: .82rem; font-weight: 500; }
body .login-danger { color: var(--ang-crit-linea); }

body .btn-primary {
  background: var(--ang-marca); border-color: var(--ang-marca); color: var(--ang-sobre-marca);
  border-radius: var(--ang-radio-sm); min-height: 44px; font-weight: 500;
}
body .btn-primary:hover, body .btn-primary:focus { background: var(--ang-marca-2); border-color: var(--ang-marca-2); }

body .text-success { color: var(--ang-ok) !important; }
body .text-danger  { color: var(--ang-crit) !important; }
body .text-warning { color: var(--ang-warn) !important; }
body .text-muted   { color: var(--ang-texto-3) !important; }

/* ----------------------------------------------------------------------------
   13. Login
   La plantilla posicionaba los dos paneles en absolute sin alto de referencia,
   asi que el formulario nunca quedaba centrado. Se reemplaza por una grilla.
   -------------------------------------------------------------------------- */
body.login-body .main-wrapper.login-body {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ang-fondo);
}
body.login-body .container-fluid,
body.login-body .container-fluid > .row { display: contents; }

body.login-body .login-wrap {
  position: static; height: auto; width: auto;
  display: grid; place-items: center; padding: 40px;
  background: linear-gradient(150deg, #4E57CD 0%, #2E37A4 55%, #1f2672 100%);
  border-radius: 0;
}
body.login-body .login-wrap .login-sec { position: static; background-image: none; height: auto; }
body.login-body .log-img img { max-width: min(380px, 70%); height: auto; }

body.login-body .login-wrap-bg {
  position: static; height: auto; padding: 40px 24px;
  display: grid; place-items: center; background: var(--ang-fondo);
}
body.login-body .login-wrapper { height: auto; width: 100%; max-width: 420px; display: block; }
body.login-body .loginbox,
body.login-body .login-right { background: transparent; border: 0; box-shadow: none; padding: 0; width: 100%; }

body.login-body .login-right-wrap {
  background: var(--ang-superficie);
  border: 1px solid var(--ang-borde);
  border-radius: var(--ang-radio);
  box-shadow: var(--ang-sombra);
  padding: 32px;
}
body.login-body h2 { color: var(--ang-texto); font-size: 1.45rem; font-weight: 600; margin: 0 0 4px; }

/* El formulario del login usa .input-block: etiqueta arriba, campo debajo. */
/* .login-body es flex con align-items:center tanto en <body> como en el
   wrapper: eso impedia que la grilla ocupara el alto completo. */
body.login-body { display: block; }
body.login-body .main-wrapper.login-body { align-items: stretch; }

body.login-body .input-block { position: relative; margin-bottom: 18px; }
/* La etiqueta flotante del template esta bien, pero traia `background:#fff`
   fijo: en tema oscuro dejaba un parche blanco sobre el borde del campo. */
body .login-wrapper .loginbox .login-right .login-right-wrap .input-block label {
  top: -9px; left: 12px; padding: 0 5px;
  background: var(--ang-superficie);
  color: var(--ang-texto-2); font-size: .72rem; font-weight: 500;
}
body.login-body .toggle-password {
  position: absolute; right: 14px; top: 38px;
  color: var(--ang-texto-3); cursor: pointer; font-size: 16px;
}

.ang-error {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  padding: 10px 13px; border-radius: var(--ang-radio-sm);
  background: var(--ang-crit-fondo); border: 1px solid var(--ang-crit-linea);
  color: var(--ang-crit); font-size: .85rem;
}

@media (max-width: 991.98px) {
  body.login-body .main-wrapper.login-body { grid-template-columns: 1fr; }
  body.login-body .login-wrap { padding: 28px; min-height: 30vh; }
  body.login-body .log-img img { max-width: min(240px, 60%); }
}

/* ----------------------------------------------------------------------------
   14. Marcadores del mapa — mismo lenguaje de estado que las tarjetas.
   -------------------------------------------------------------------------- */
.ang-pin {
  display: block; width: 18px; height: 18px; margin: 2px;
  border-radius: 50%; border: 3px solid var(--ang-superficie);
  background: var(--ang-off-linea);
  box-shadow: 0 0 0 1.5px var(--ang-off-linea), 0 2px 6px rgba(0,0,0,.35);
}
.ang-pin--ok   { background: var(--ang-ok-linea);   box-shadow: 0 0 0 1.5px var(--ang-ok-linea),   0 2px 6px rgba(0,0,0,.35); }
.ang-pin--warn { background: var(--ang-warn-linea); box-shadow: 0 0 0 1.5px var(--ang-warn-linea), 0 2px 6px rgba(0,0,0,.35); }
.ang-pin--off  { background: var(--ang-off-linea);  box-shadow: 0 0 0 1.5px var(--ang-off-linea),  0 2px 6px rgba(0,0,0,.35); }

/* el nombre largo no debe empujar la hora fuera de la tarjeta */
.ang-card-persona__top > div:first-child { min-width: 0; }
.ang-card-persona__top .ang-chip { margin-top: 2px; }

/* ----------------------------------------------------------------------------
   15. Ficha — bloques propios
   -------------------------------------------------------------------------- */
.ang-ficha-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px;
}
.ang-ficha-cabecera h1 { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -.015em; }
.ang-ficha-cabecera .ang-sub { width: 100%; }

.ang-medida { display: flex; align-items: center; gap: 12px; }
.ang-medida__i {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 12px; background: var(--ang-superficie-3); color: var(--ang-texto-2); font-size: 19px;
}
.ang-medida__v { font-size: 1.3rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ang-medida__k { font-size: .76rem; color: var(--ang-texto-3); }

.ang-signo__valor {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 1.8rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ang-signo__valor small { font-size: .82rem; font-weight: 500; color: var(--ang-texto-3); }
.ang-signo--crit .ang-signo__valor { color: var(--ang-crit); }
.ang-signo__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

.ang-barra {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--ang-superficie-3); overflow: hidden;
}
.ang-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--ang-ok-linea); transition: width var(--ang-trans); }
.ang-barra--crit > i { background: var(--ang-crit-linea); }
.ang-escala { display: flex; justify-content: space-between; margin: 6px 0 0; padding: 0; list-style: none; font-size: .72rem; color: var(--ang-texto-3); }

.ang-sindato {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--ang-radio-sm);
  background: var(--ang-superficie-2); border: 1px dashed var(--ang-borde-2);
  color: var(--ang-texto-3); font-size: .83rem;
}

/* ----------------------------------------------------------------------------
   16. Escala de IMC
   La barra de progreso anterior iba de 0 a 50 y debajo tenia tres etiquetas
   repartidas a espacios iguales, que no se correspondian con ningun tramo.
   Aca la pista dibuja los cuatro tramos reales sobre una escala 0–40 y la
   aguja marca el valor de la persona en su posicion verdadera.
   -------------------------------------------------------------------------- */
.ang-imc { position: relative; padding-top: 4px; }
.ang-imc__pista {
  height: 12px; border-radius: 999px; border: 1px solid var(--ang-borde);
  background: linear-gradient(to right,
    var(--ang-warn-linea) 0 46.25%,     /* < 18.5  bajo peso   */
    var(--ang-ok-linea)   46.25% 62.5%, /* 18.5–25 normal      */
    var(--ang-warn-linea) 62.5% 75%,    /* 25–30   sobrepeso   */
    var(--ang-crit-linea) 75% 100%);    /* > 30    obesidad    */
}
.ang-imc__aguja {
  position: absolute; top: 0; width: 3px; height: 20px; margin-left: -1.5px;
  border-radius: 2px; background: var(--ang-texto);
  box-shadow: 0 0 0 2px var(--ang-superficie);
  transition: left var(--ang-trans);
}
.ang-imc__escala {
  display: grid; grid-template-columns: 46.25fr 16.25fr 12.5fr 25fr;
  margin: 7px 0 0; padding: 0; list-style: none;
  font-size: .68rem; color: var(--ang-texto-3); text-align: center;
}
.ang-imc__escala li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ang-punto-alerta {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ang-crit-linea);
}
.ang-btn--sm { padding: 3px 9px; font-size: .75rem; }
.ang-btn[disabled] { opacity: .5; pointer-events: none; }

/* Apex dibuja su propio texto: lo alineamos al tema. */
body .apexcharts-tooltip { background: var(--ang-superficie) !important; border-color: var(--ang-borde) !important; color: var(--ang-texto) !important; }
body .apexcharts-tooltip-title { background: var(--ang-superficie-2) !important; border-color: var(--ang-borde) !important; }
body .apexcharts-text tspan { fill: var(--ang-texto-3); }

/* ----------------------------------------------------------------------------
   17. Avisos y formularios
   -------------------------------------------------------------------------- */
.ang-aviso {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; margin-bottom: 16px;
  border-radius: var(--ang-radio-sm); border: 1px solid transparent;
  font-size: .86rem;
}
.ang-aviso--ok    { background: var(--ang-ok-fondo);   border-color: var(--ang-ok-linea);   color: var(--ang-ok);   }
.ang-aviso--error { background: var(--ang-crit-fondo); border-color: var(--ang-crit-linea); color: var(--ang-crit); }
.ang-aviso--info  { background: var(--ang-marca-suave);border-color: var(--ang-marca);      color: var(--ang-marca);}

.ang-form label { display: block; margin-bottom: 5px; }
.ang-form .btn-primary { min-width: 180px; }

body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ang-texto); line-height: 40px; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
body .select2-dropdown { background: var(--ang-superficie); border-color: var(--ang-borde); color: var(--ang-texto); }
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ang-marca); }

/* El isotipo es un PNG de una sola tinta: en oscuro necesita levantar brillo. */
:root[data-theme="dark"] .ang-logo img { filter: brightness(1.75) saturate(1.2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ang-logo img { filter: brightness(1.75) saturate(1.2); }
}

/* ----------------------------------------------------------------------------
   18. Telefono
   La cabecera tiene presupuesto fijo de ancho: lo primero que cede es lo que
   solo sirve con un mouse y una pared delante.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #ang-pared { display: none; }              /* el modo pared no aplica en un telefono */
  .ang-tiles { grid-template-columns: repeat(2, 1fr); }
}

.ang-estado__pre { margin-right: .28em; }

@media (max-width: 575.98px) {
  :root { --ang-fs-tile: 2.1rem; }
  body .header.ang-header { padding: 0 12px; gap: 8px; }
  .ang-header__acciones { gap: 2px; }
  .ang-iconbtn { width: 34px; height: 34px; }
  .ang-perfil__txt { display: none; }
  .ang-perfil__btn { padding: 4px; }
  .ang-header__estado { padding: 4px 9px; font-size: .72rem; white-space: nowrap; }
  .ang-estado__pre { display: none; }   /* queda "recién" / "hace 4 min" */
  .ang-tile { padding: 12px 14px; }
  .ang-tile__pie { display: none; }          /* la glosa se lee en pantalla grande */
  body .card-header { flex-wrap: wrap; row-gap: 4px; }
  #ang-orden { display: none; }
  .ang-card-persona__nombre { font-size: .95rem; }
}

@media (max-width: 359.98px) {
  .ang-tiles { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   19. Tabla de alertas de la ficha
   Vive en una columna angosta: el buscador ocupa el ancho completo y la
   columna de accion se reduce a un boton con etiqueta accesible.
   -------------------------------------------------------------------------- */
body #alertas-table_wrapper .dataTables_filter { width: 100%; padding: 12px 14px 4px; }
body #alertas-table_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 8px; width: 100%; font-size: .78rem; }
body #alertas-table_wrapper .dataTables_filter input { flex: 1; min-width: 0; margin: 0; padding: 6px 10px; }
body #alertas-table th:first-child, body #alertas-table td:first-child { width: 26px; padding-right: 0; }
body #alertas-table th:last-child,  body #alertas-table td:last-child  { width: 40px; text-align: right; padding-left: 0; }
body #alertas-table td { vertical-align: middle; font-size: .84rem; }
body #alertas-table_wrapper .dataTables_paginate { padding: 10px 14px; }

/* ----------------------------------------------------------------------------
   20. DataTables 2.x
   La plantilla trae reglas para las clases viejas (paginate_button) que aqui no
   existen: esta version usa dt-*. Sin esto la paginacion queda blanca sobre
   blanco en tema oscuro.
   -------------------------------------------------------------------------- */
body .dt-container .dt-layout-row { margin: 0; align-items: center; }
body .dt-container .dt-layout-cell { padding: 10px 14px; }
body .dt-container .dt-layout-row.dt-layout-table .dt-layout-cell { padding: 0; }

body .dt-search { display: flex; align-items: center; gap: 8px; width: 100%; }
body .dt-search label { margin: 0; font-size: .78rem; color: var(--ang-texto-2); white-space: nowrap; }
body .dt-search .dt-input {
  flex: 1; min-width: 0; padding: 6px 10px;
  background: var(--ang-superficie-2); border: 1px solid var(--ang-borde);
  border-radius: 7px; color: var(--ang-texto); font-size: .82rem;
}
body .dt-search .dt-input:focus { outline: none; border-color: var(--ang-marca); box-shadow: var(--ang-foco); }

body .dt-paging { display: flex; justify-content: center; }
body .dt-paging nav { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
body .dt-paging .dt-paging-button {
  background: var(--ang-superficie-2) !important;
  background-image: none !important;
  border: 1px solid var(--ang-borde) !important;
  color: var(--ang-texto-2) !important;
  border-radius: 7px !important;
  padding: 5px 11px; font-size: .8rem; min-width: 34px; cursor: pointer;
}
body .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--ang-superficie-3) !important; color: var(--ang-texto) !important;
  border-color: var(--ang-borde-2) !important;
}
body .dt-paging .dt-paging-button.current {
  background: var(--ang-marca) !important; border-color: var(--ang-marca) !important;
  color: var(--ang-sobre-marca) !important;
}
body .dt-paging .dt-paging-button.disabled {
  background: transparent !important; border-color: transparent !important;
  color: var(--ang-texto-3) !important; opacity: .45; cursor: default;
}
body .dt-info { color: var(--ang-texto-3); font-size: .78rem; }
body table.dataTable { border: 0 !important; }
body table.dataTable thead th { border-bottom: 1px solid var(--ang-borde) !important; }
body .dt-container .dt-empty-footer tbody tr:last-child > * { border-bottom: 0; }

/* La tabla de alertas vive en una columna angosta. */
body #alertas-table th:first-child, body #alertas-table td:first-child { width: 22px; padding-right: 0; }
body #alertas-table th:last-child,  body #alertas-table td:last-child  { width: 38px; text-align: right; padding-left: 0; }
body #alertas-table td { vertical-align: middle; font-size: .84rem; }

/* ----------------------------------------------------------------------------
   21. Lecturas viejas
   Un dispositivo sin señal sigue mostrando su ultima medicion, y eso esta
   bien: es la informacion que hay. Lo que no puede pasar es que se vea igual
   que un dato en vivo. El rojo de alerta queda reservado para lo que esta
   pasando ahora; lo viejo se muestra atenuado y rotulado.
   -------------------------------------------------------------------------- */
.ang-vital--viejo .ang-vital__i,
.ang-vital--viejo .ang-vital__valor,
.ang-vital--viejo .ang-vital__u { color: var(--ang-texto-3); }
.ang-vital--viejo .ang-vital__valor { font-weight: 500; }

.ang-ultima {
  margin: 0 0 6px; padding-top: 9px;
  border-top: 1px dashed var(--ang-borde);
  font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ang-texto-3);
}
/* la fila de signos ya no repite el borde superior cuando hay rotulo */
.ang-ultima + .ang-vitales { border-top: 0; padding-top: 0; }

.ang-signo--viejo .ang-signo__valor { color: var(--ang-texto-3); }
.ang-signo--viejo .ang-signo__valor small { color: var(--ang-texto-3); }

.ang-aviso--viejo {
  background: var(--ang-off-fondo); border-color: var(--ang-off-linea); color: var(--ang-off);
}
.ang-viejo .ang-barra > i { background: var(--ang-off-linea); }