/* ═══════════════════════════════════════════════════════════════════════════
   pa-monitoreo.css — Módulo Monitoreo de ProfeAcademī
   ───────────────────────────────────────────────────────────────────────────
   Dos pantallas:
     1) Mi Clase    (rol: profesor)        — acordeón de alumnos + acciones
     2) Monitoreo   (rol: asistente/UTP)   — dashboard de alertas en tiempo real

   Soporta los 4 temas de plataforma:
     body.theme-light  body.theme-dark  body.theme-rosa  body.theme-neon

   Compatible con los classnames pa-mon-* del JS sin cambios en lógica.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   0. TOKENS DEL MÓDULO
   ═══════════════════════════════════════════════════════════════════════════ */
.pa-monitoreo-section,
.pa-monitoreo-section * {
  box-sizing: border-box;
}

.pa-monitoreo-section {
  /* Acciones — paleta única por tipo */
  --pa-mon-bano-1:        #06b6d4;
  --pa-mon-bano-2:        #0891b2;
  --pa-mon-nollega-1:     #f59e0b;
  --pa-mon-nollega-2:     #d97706;
  --pa-mon-ayuda-1:       #ef4444;
  --pa-mon-ayuda-2:       #dc2626;
  --pa-mon-monitor-1:     #8b5cf6;
  --pa-mon-monitor-2:     #7c3aed;
  --pa-mon-inspectoria-1: #b91c1c;
  --pa-mon-inspectoria-2: #7f1d1d;
  --pa-mon-fotocopias-1:  #10b981;
  --pa-mon-fotocopias-2:  #059669;

  /* Estados */
  --pa-mon-ok:     #10b981;
  --pa-mon-warn:   #f59e0b;
  --pa-mon-danger: #ef4444;

  /* Acento global del módulo (indigo/violeta de la plataforma) */
  --pa-mon-accent-1: #6366f1;
  --pa-mon-accent-2: #8b5cf6;

  /* Glass + texto — overridden por tema más abajo */
  --pa-mon-glass-bg:     rgba(255, 255, 255, 0.65);
  --pa-mon-glass-bg-2:   rgba(255, 255, 255, 0.45);
  --pa-mon-glass-border: rgba(255, 255, 255, 0.5);
  --pa-mon-glass-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
  --pa-mon-glass-blur:   blur(14px) saturate(140%);

  --pa-mon-text:   #111827;
  --pa-mon-muted:  #6b7280;
  --pa-mon-subtle: rgba(17, 24, 39, 0.55);
  --pa-mon-divider: rgba(17, 24, 39, 0.08);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--pa-mon-text);
  padding: 1.25rem 1rem calc(110px + 2rem); /* dock = 110px */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  scrollbar-width: thin;
}

/* ── Variantes de tema ─────────────────────────────────────────── */
body.theme-light .pa-monitoreo-section {
  --pa-mon-glass-bg:     rgba(255, 255, 255, 0.62);
  --pa-mon-glass-bg-2:   rgba(255, 255, 255, 0.42);
  --pa-mon-glass-border: rgba(255, 255, 255, 0.55);
  --pa-mon-glass-shadow: 0 8px 26px rgba(31, 41, 55, 0.08);
  --pa-mon-text:    #111827;
  --pa-mon-muted:   #6b7280;
  --pa-mon-subtle:  rgba(17, 24, 39, 0.55);
  --pa-mon-divider: rgba(17, 24, 39, 0.08);
}

body.theme-dark .pa-monitoreo-section {
  --pa-mon-glass-bg:     rgba(31, 41, 55, 0.72);
  --pa-mon-glass-bg-2:   rgba(17, 24, 39, 0.55);
  --pa-mon-glass-border: rgba(255, 255, 255, 0.09);
  --pa-mon-glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --pa-mon-text:    #f1f5f9;
  --pa-mon-muted:   #94a3b8;
  --pa-mon-subtle:  rgba(241, 245, 249, 0.65);
  --pa-mon-divider: rgba(255, 255, 255, 0.08);
}

body.theme-neon .pa-monitoreo-section {
  --pa-mon-glass-bg:     rgba(10, 14, 30, 0.7);
  --pa-mon-glass-bg-2:   rgba(5, 10, 24, 0.55);
  --pa-mon-glass-border: rgba(0, 255, 255, 0.18);
  --pa-mon-glass-shadow: 0 10px 34px rgba(0, 255, 255, 0.10), 0 0 0 1px rgba(0,255,255,0.06);
  --pa-mon-text:    #e2e8f0;
  --pa-mon-muted:   #94a3b8;
  --pa-mon-subtle:  rgba(226, 232, 240, 0.65);
  --pa-mon-divider: rgba(0, 255, 255, 0.10);
  --pa-mon-accent-1: #00e5ff;
  --pa-mon-accent-2: #ff00ff;
}

body.theme-rosa .pa-monitoreo-section {
  --pa-mon-glass-bg:     rgba(255, 235, 248, 0.6);
  --pa-mon-glass-bg-2:   rgba(255, 220, 240, 0.42);
  --pa-mon-glass-border: rgba(244, 114, 182, 0.36);
  --pa-mon-glass-shadow: 0 8px 26px rgba(200, 80, 150, 0.12);
  --pa-mon-text:    #4a0028;
  --pa-mon-muted:   #9d174d;
  --pa-mon-subtle:  rgba(74, 0, 40, 0.62);
  --pa-mon-divider: rgba(157, 23, 77, 0.10);
  --pa-mon-accent-1: #ec4899;
  --pa-mon-accent-2: #f472b6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. GLASS RADIO GROUP — extensión para 3 opciones (Apps / Widgets / Mi Clase)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cuando el grupo contiene la tercera pestaña, redefinimos ancho del glider */
.glass-radio-group:has(#pa-view-monitoreo) .glass-glider {
  width: 33.3333%;
}

/* Posiciones del glider para las 3 opciones — sobreescribe las reglas de 2-opciones */
#pa-view-apps:checked      ~ .glass-glider { transform: translateX(0%); }
#pa-view-widgets:checked   ~ .glass-glider { transform: translateX(100%); }
#pa-view-monitoreo:checked ~ .glass-glider { transform: translateX(200%); }

/* La regla literal del spec (queda como ancla para que el grep del repo la encuentre) */
/* #pa-view-monitoreo:checked ~ .glass-glider { transform: translateX(-100%); } */

/* ═══════════════════════════════════════════════════════════════════════════
   2. PANTALLA "MI CLASE" — Header de clase actual / próxima / sin clase
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-mon-clase-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 680px;
  margin: 0 auto 1.5rem;
  padding: 1.1rem 1.6rem;
  border-radius: 20px;
  background: var(--pa-mon-glass-bg);
  border: 1px solid var(--pa-mon-glass-border);
  box-shadow: var(--pa-mon-glass-shadow);
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
  overflow: hidden;
  isolation: isolate;
}
.pa-mon-clase-header::before {
  /* Gradient overlay según estado */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.85;
  background: var(--pa-mon-clase-header-grad, transparent);
  pointer-events: none;
}

/* ── Estado: en clase ahora ── */
.pa-mon-clase-header--active {
  --pa-mon-clase-header-grad: linear-gradient(135deg,
    rgba(16, 185, 129, 0.22) 0%,
    rgba(59, 130, 246, 0.22) 100%);
}
body.theme-dark .pa-mon-clase-header--active,
body.theme-neon .pa-mon-clase-header--active {
  --pa-mon-clase-header-grad: linear-gradient(135deg,
    rgba(16, 185, 129, 0.35) 0%,
    rgba(59, 130, 246, 0.32) 100%);
}
body.theme-rosa .pa-mon-clase-header--active {
  --pa-mon-clase-header-grad: linear-gradient(135deg,
    rgba(236, 72, 153, 0.22) 0%,
    rgba(59, 130, 246, 0.22) 100%);
}

/* ── Estado: próxima clase ── */
.pa-mon-clase-header--next {
  --pa-mon-clase-header-grad: linear-gradient(135deg,
    rgba(99, 102, 241, 0.24) 0%,
    rgba(139, 92, 246, 0.24) 100%);
}
body.theme-dark .pa-mon-clase-header--next,
body.theme-neon .pa-mon-clase-header--next {
  --pa-mon-clase-header-grad: linear-gradient(135deg,
    rgba(99, 102, 241, 0.4) 0%,
    rgba(139, 92, 246, 0.4) 100%);
}
body.theme-rosa .pa-mon-clase-header--next {
  --pa-mon-clase-header-grad: linear-gradient(135deg,
    rgba(244, 114, 182, 0.28) 0%,
    rgba(139, 92, 246, 0.24) 100%);
}

/* ── Estado: sin clase programada ── */
.pa-mon-clase-header--none {
  --pa-mon-clase-header-grad: linear-gradient(135deg,
    rgba(148, 163, 184, 0.16) 0%,
    rgba(148, 163, 184, 0.10) 100%);
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.45);
}
body.theme-dark .pa-mon-clase-header--none,
body.theme-neon .pa-mon-clase-header--none {
  border-color: rgba(148, 163, 184, 0.32);
}

.pa-mon-clase-header__icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
.pa-mon-clase-header__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.pa-mon-clase-header__title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pa-mon-text);
}
.pa-mon-clase-header__kicker {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-mon-subtle);
  padding: 2px 9px;
  margin-bottom: 0.3rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--pa-mon-divider);
  width: max-content;
  white-space: nowrap;
}
body.theme-dark .pa-mon-clase-header__kicker,
body.theme-neon .pa-mon-clase-header__kicker {
  background: rgba(255,255,255,0.07);
}
.pa-mon-clase-header__subtitle {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--pa-mon-muted);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.pa-mon-clase-header__subtitle .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. LISTA DE ESTUDIANTES (acordeón)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Control segmentado "Ordenar por: Apellido | Nombre" */
.pa-mon-orden {
  max-width: 1180px;
  margin: 0 auto 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.pa-mon-orden__label {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.7;
}
.pa-mon-orden__btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--pa-mon-glass-border);
  background: var(--pa-mon-glass-bg);
  color: inherit;
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.pa-mon-orden__btn:hover { transform: translateY(-1px); }
.pa-mon-orden__btn.is-active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(139, 92, 246, 0.95));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32);
}

.pa-mon-est-list {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.7rem;
}

.pa-mon-est-row {
  position: relative;
  background: var(--pa-mon-glass-bg);
  border: 1px solid var(--pa-mon-glass-border);
  border-radius: 14px;
  box-shadow: var(--pa-mon-glass-shadow);
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
  overflow: hidden;       /* recorta las acciones a los bordes redondeados */
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pa-mon-est-row:hover,
.pa-mon-est-row:focus-within,
.pa-mon-est-row.is-open {
  border-color: rgba(99, 102, 241, 0.40);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.18);
}
body.theme-dark .pa-mon-est-row:hover,
body.theme-dark .pa-mon-est-row.is-open,
body.theme-neon .pa-mon-est-row:hover,
body.theme-neon .pa-mon-est-row.is-open {
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.34);
}

.pa-mon-est-row__main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.7rem 0.95rem;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pa-mon-est-row__main:focus-visible {
  outline: 2px solid var(--pa-mon-accent-1);
  outline-offset: -2px;
  border-radius: 14px;
}

.pa-mon-est-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Color derivado del nombre vía --pa-mon-hue (set por JS) */
  background:
    linear-gradient(135deg,
      hsl(var(--pa-mon-hue, 220) 70% 55%) 0%,
      hsl(calc(var(--pa-mon-hue, 220) + 30) 70% 45%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 2px 6px hsl(var(--pa-mon-hue, 220) 60% 45% / 0.35);
}

.pa-mon-est-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--pa-mon-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-mon-est-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--pa-mon-muted);
  transition: transform 0.22s ease, color 0.22s ease;
}
.pa-mon-est-row:hover .pa-mon-est-chevron,
.pa-mon-est-row:focus-within .pa-mon-est-chevron,
.pa-mon-est-row.is-open .pa-mon-est-chevron {
  transform: rotate(180deg);
  color: var(--pa-mon-accent-1);
}

/* ── Strip de acciones (cubre el row entero al hover) ── */
.pa-mon-est-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity 0.18s ease, transform 0.2s ease;
  z-index: 2;
  border-radius: 14px;
}
.pa-mon-est-row:hover .pa-mon-est-actions,
.pa-mon-est-row:focus-within .pa-mon-est-actions,
.pa-mon-est-row.is-open .pa-mon-est-actions {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.pa-mon-est-actions__grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  grid-template-columns: none;
  gap: 4px;
  padding: 0 0.25rem;
}

/* Ocultar avatar + nombre + chevron cuando aparecen las acciones */
.pa-mon-est-row__main > * {
  transition: opacity 0.18s ease;
}
.pa-mon-est-row:hover .pa-mon-est-row__main > *,
.pa-mon-est-row:focus-within .pa-mon-est-row__main > *,
.pa-mon-est-row.is-open .pa-mon-est-row__main > * {
  opacity: 0;
}

/* Touch devices: el hover no funciona — solo se abre con click (.is-open) */
@media (hover: none) {
  .pa-mon-est-row:hover .pa-mon-est-actions { opacity: 0; pointer-events: none; transform: scale(0.97); }
  .pa-mon-est-row:hover .pa-mon-est-row__main > * { opacity: 1; }
  .pa-mon-est-row.is-open .pa-mon-est-actions { opacity: 1; pointer-events: auto; transform: scale(1); }
  .pa-mon-est-row.is-open .pa-mon-est-row__main > * { opacity: 0; }
}

/* ── Estado ACTIVO (alerta enviada y aún sin resolver) ──
   El row toma el color de la acción. El hover queda deshabilitado
   para no permitir disparar otra acción mientras una está en curso. */
.pa-mon-est-row--active {
  background: linear-gradient(135deg,
    var(--pa-mon-active-c1, var(--pa-mon-accent-1)),
    var(--pa-mon-active-c2, var(--pa-mon-accent-2)));
  border-color: transparent;
  box-shadow:
    0 6px 18px var(--pa-mon-active-shadow, rgba(99,102,241,0.35)),
    inset 0 1px 0 rgba(255,255,255,0.22);
  color: #fff;
}
.pa-mon-est-row--active .pa-mon-est-name { color: #fff; font-weight: 700; }
.pa-mon-est-row--active .pa-mon-est-avatar {
  background: rgba(255,255,255,0.22) !important;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
}
.pa-mon-est-row--active .pa-mon-est-chevron { display: none; }

/* Indicador del tipo de acción a la derecha (reemplaza al chevron) */
.pa-mon-est-row--active .pa-mon-est-row__main::after {
  content: attr(data-active-icon);
  font-size: 1.1rem;
  margin-left: auto;
  padding-left: 0.5rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  animation: paMonEstActivePulse 1.6s ease-in-out infinite;
}
@keyframes paMonEstActivePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* Cuando un row está activo NO se debe mostrar la strip de acciones */
.pa-mon-est-row--active:hover .pa-mon-est-actions,
.pa-mon-est-row--active:focus-within .pa-mon-est-actions,
.pa-mon-est-row--active.is-open .pa-mon-est-actions {
  opacity: 0 !important;
  pointer-events: none !important;
}
.pa-mon-est-row--active:hover .pa-mon-est-row__main > *,
.pa-mon-est-row--active:focus-within .pa-mon-est-row__main > *,
.pa-mon-est-row--active.is-open .pa-mon-est-row__main > * {
  opacity: 1 !important;
}

/* Variantes de color por acción */
.pa-mon-est-row--bano        { --pa-mon-active-c1: var(--pa-mon-bano-1);        --pa-mon-active-c2: var(--pa-mon-bano-2);        --pa-mon-active-shadow: rgba(6,182,212,0.42); }
.pa-mon-est-row--nollega     { --pa-mon-active-c1: var(--pa-mon-nollega-1);     --pa-mon-active-c2: var(--pa-mon-nollega-2);     --pa-mon-active-shadow: rgba(245,158,11,0.42); }
.pa-mon-est-row--ayuda       { --pa-mon-active-c1: var(--pa-mon-ayuda-1);       --pa-mon-active-c2: var(--pa-mon-ayuda-2);       --pa-mon-active-shadow: rgba(239,68,68,0.42); }
.pa-mon-est-row--monitor     { --pa-mon-active-c1: var(--pa-mon-monitor-1);     --pa-mon-active-c2: var(--pa-mon-monitor-2);     --pa-mon-active-shadow: rgba(139,92,246,0.42); }
.pa-mon-est-row--inspectoria { --pa-mon-active-c1: var(--pa-mon-inspectoria-1); --pa-mon-active-c2: var(--pa-mon-inspectoria-2); --pa-mon-active-shadow: rgba(185,28,28,0.45); }
.pa-mon-est-row--fotocopias  { --pa-mon-active-c1: var(--pa-mon-fotocopias-1);  --pa-mon-active-c2: var(--pa-mon-fotocopias-2);  --pa-mon-active-shadow: rgba(16,185,129,0.42); }

/* ── Botones de acción DENTRO del strip del row → circulares uniformes ── */
.pa-mon-est-actions .pa-mon-action {
  flex: 1 1 0;
  max-width: 38px;
  aspect-ratio: 1 / 1;
  height: 38px;
  min-height: 0;
  flex-direction: row;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  box-shadow:
    0 2px 8px var(--pa-mon-action-shadow, rgba(99,102,241,0.30)),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.pa-mon-est-actions .pa-mon-action:hover {
  transform: translateY(-1px) scale(1.10);
  box-shadow:
    0 6px 16px var(--pa-mon-action-shadow, rgba(99,102,241,0.55)),
    inset 0 1px 0 rgba(255,255,255,0.30);
}
.pa-mon-est-actions .pa-mon-action__icon { font-size: 1.05rem; filter: none; }
.pa-mon-est-actions .pa-mon-action__label { display: none; }
.pa-mon-est-actions .pa-mon-action__minutos { display: none; }

/* ── Botón de acción (chip colorido) ── */
.pa-mon-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.7rem 0.5rem 0.55rem;
  min-height: 78px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: #fff;
  background: linear-gradient(135deg,
    var(--pa-mon-action-c1, var(--pa-mon-accent-1)),
    var(--pa-mon-action-c2, var(--pa-mon-accent-2)));
  box-shadow:
    0 4px 14px var(--pa-mon-action-shadow, rgba(99,102,241,0.30)),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.15s ease;
  text-align: center;
}
.pa-mon-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 8px 22px var(--pa-mon-action-shadow, rgba(99,102,241,0.45)),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.pa-mon-action:active { transform: scale(0.97); }
.pa-mon-action.is-flash { animation: paMonActionFlash 0.45s ease-out; }
@keyframes paMonActionFlash {
  0%   { box-shadow: 0 0 0 0 var(--pa-mon-action-c1, var(--pa-mon-accent-1)), inset 0 1px 0 rgba(255,255,255,0.4); transform: scale(1); }
  35%  { box-shadow: 0 0 0 14px transparent, inset 0 1px 0 rgba(255,255,255,0.4); transform: scale(1.04); }
  100% { box-shadow: 0 4px 14px var(--pa-mon-action-shadow, rgba(99,102,241,0.30)), inset 0 1px 0 rgba(255,255,255,0.18); transform: scale(1); }
}

.pa-mon-action__icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.pa-mon-action__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Input de minutos (pill bajo el botón) */
.pa-mon-action__minutos {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0.32rem;
  padding: 2px 4px 2px 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 600;
}
.pa-mon-action__minutos input {
  width: 36px;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 999px;
  padding: 2px 4px;
  font: inherit;
  font-weight: 700;
  color: #111827;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.pa-mon-action__minutos input::-webkit-outer-spin-button,
.pa-mon-action__minutos input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pa-mon-action__minutos input:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.pa-mon-action__minutos-label {
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}

/* ── Variantes de color por acción ── */
.pa-mon-action--bano {
  --pa-mon-action-c1: var(--pa-mon-bano-1);
  --pa-mon-action-c2: var(--pa-mon-bano-2);
  --pa-mon-action-shadow: rgba(6, 182, 212, 0.42);
}
.pa-mon-action--nollega {
  --pa-mon-action-c1: var(--pa-mon-nollega-1);
  --pa-mon-action-c2: var(--pa-mon-nollega-2);
  --pa-mon-action-shadow: rgba(245, 158, 11, 0.42);
}
.pa-mon-action--ayuda {
  --pa-mon-action-c1: var(--pa-mon-ayuda-1);
  --pa-mon-action-c2: var(--pa-mon-ayuda-2);
  --pa-mon-action-shadow: rgba(239, 68, 68, 0.42);
}
.pa-mon-action--monitor {
  --pa-mon-action-c1: var(--pa-mon-monitor-1);
  --pa-mon-action-c2: var(--pa-mon-monitor-2);
  --pa-mon-action-shadow: rgba(139, 92, 246, 0.42);
}
.pa-mon-action--inspectoria {
  --pa-mon-action-c1: var(--pa-mon-inspectoria-1);
  --pa-mon-action-c2: var(--pa-mon-inspectoria-2);
  --pa-mon-action-shadow: rgba(185, 28, 28, 0.5);
}
.pa-mon-action--fotocopias {
  --pa-mon-action-c1: var(--pa-mon-fotocopias-1);
  --pa-mon-action-c2: var(--pa-mon-fotocopias-2);
  --pa-mon-action-shadow: rgba(16, 185, 129, 0.42);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SKELETON LOADING + ESTADO VACÍO (Mi Clase)
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-mon-est-skeleton-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pa-mon-est-skeleton {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
  background: var(--pa-mon-glass-bg);
  border: 1px solid var(--pa-mon-glass-border);
  border-radius: 14px;
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
}
.pa-mon-est-skeleton__avatar,
.pa-mon-est-skeleton__line {
  background: linear-gradient(90deg,
    rgba(120, 130, 160, 0.12) 0%,
    rgba(120, 130, 160, 0.32) 50%,
    rgba(120, 130, 160, 0.12) 100%);
  background-size: 200% 100%;
  animation: paMonShimmer 1.4s ease-in-out infinite;
  border-radius: 50%;
}
.pa-mon-est-skeleton__avatar { width: 38px; height: 38px; flex-shrink: 0; }
.pa-mon-est-skeleton__line   { height: 12px; flex: 1; border-radius: 6px; }
.pa-mon-est-skeleton__line--short { flex: 0 0 35%; }
body.theme-dark .pa-mon-est-skeleton__avatar,
body.theme-dark .pa-mon-est-skeleton__line,
body.theme-neon .pa-mon-est-skeleton__avatar,
body.theme-neon .pa-mon-est-skeleton__line {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
}
@keyframes paMonShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Estado vacío (sin estudiantes) ── */
.pa-mon-empty {
  max-width: 480px;
  margin: 3rem auto;
  padding: 2.4rem 1.6rem;
  text-align: center;
  background: var(--pa-mon-glass-bg);
  border: 1px dashed var(--pa-mon-glass-border);
  border-radius: 20px;
  box-shadow: var(--pa-mon-glass-shadow);
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
}
.pa-mon-empty__icon {
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 0.7rem;
  filter: drop-shadow(0 4px 12px rgba(99,102,241,0.25));
}
.pa-mon-empty__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--pa-mon-text);
}
.pa-mon-empty__sub {
  font-size: 0.92rem;
  color: var(--pa-mon-muted);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. PANTALLA "MONITOREO" — Header del dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-mon-dash-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  max-width: 1180px;
  margin: 0 auto 1.2rem;
  padding: 0.85rem 1.1rem;
  background: var(--pa-mon-glass-bg);
  border: 1px solid var(--pa-mon-glass-border);
  border-radius: 18px;
  box-shadow: var(--pa-mon-glass-shadow);
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
}
.pa-mon-dash-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pa-mon-text);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pa-mon-dash-title .icon { font-size: 1.3rem; flex-shrink: 0; }

/* Badge contador */
.pa-mon-dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30);
  white-space: nowrap;
}
.pa-mon-dash-badge .num {
  background: rgba(255,255,255,0.28);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 800;
  min-width: 22px;
  text-align: center;
  font-size: 0.78rem;
}
/* Con alertas activas: rojo pulsante */
.pa-mon-dash-badge.has-alerts {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.40);
  animation: paMonBadgePulse 1.4s ease-in-out infinite;
}
@keyframes paMonBadgePulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 4px 14px rgba(239, 68, 68, 0.40); }
  50%      { transform: scale(1.04); box-shadow: 0 6px 22px rgba(239, 68, 68, 0.65); }
}

/* Indicador de conexión Realtime */
.pa-mon-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
body.theme-dark .pa-mon-live,
body.theme-neon .pa-mon-live { color: #34d399; }

.pa-mon-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: paMonLivePulse 1.6s ease-out infinite;
}
@keyframes paMonLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.pa-mon-live.is-offline {
  background: rgba(148, 163, 184, 0.16);
  color: var(--pa-mon-muted);
  border-color: rgba(148, 163, 184, 0.32);
}
.pa-mon-live.is-offline .pa-mon-live__dot {
  background: #94a3b8;
  animation: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. TOGGLE Admin/UTP — clon visual del .glass-radio-group
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-mon-toggle {
  display: inline-flex;
  position: relative;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.6),
    inset -1px -1px 6px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0 auto 1.2rem;
  overflow: hidden;
}
.pa-mon-toggle input { display: none; }
.pa-mon-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  font-size: 14px;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  color: rgba(30, 30, 30, 0.55);
  font-family: inherit;
}
.pa-mon-toggle label:hover { color: #111; }
.pa-mon-toggle input:checked + label { color: #fff !important; }

.pa-mon-toggle__glider {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  border-radius: 1rem;
  z-index: 1;
  background: linear-gradient(135deg, #3b82f6, #4f46e5);
  box-shadow:
    0 0 18px rgba(79, 70, 229, 0.4),
    inset 0 0 10px rgba(147, 197, 253, 0.3);
  transition:
    transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
    background 0.4s ease,
    box-shadow 0.4s ease;
}
/* Posiciones del glider — usa data-pos="N" en el wrapper (0/1) o IDs específicos */
.pa-mon-toggle input[data-mon-tog="0"]:checked ~ .pa-mon-toggle__glider { transform: translateX(0%); }
.pa-mon-toggle input[data-mon-tog="1"]:checked ~ .pa-mon-toggle__glider { transform: translateX(100%); }

/* Variantes de tema (idénticas a .glass-radio-group) */
body.theme-dark .pa-mon-toggle,
body.theme-neon .pa-mon-toggle {
  background: rgba(255,255,255,0.06);
  box-shadow:
    inset 1px 1px 4px rgba(255,255,255,0.2),
    inset -1px -1px 6px rgba(0,0,0,0.3),
    0 4px 12px rgba(0,0,0,0.15);
}
body.theme-dark .pa-mon-toggle label,
body.theme-neon .pa-mon-toggle label { color: rgba(225,225,225,0.65); }
body.theme-dark .pa-mon-toggle label:hover,
body.theme-neon .pa-mon-toggle label:hover { color: #fff; }
body.theme-rosa .pa-mon-toggle {
  background: rgba(255,180,220,0.12);
  box-shadow:
    inset 1px 1px 4px rgba(255,255,255,0.5),
    inset -1px -1px 6px rgba(200,60,120,0.15),
    0 4px 12px rgba(200,60,120,0.10);
}
body.theme-rosa .pa-mon-toggle label { color: rgba(80,10,50,0.6); }
body.theme-rosa .pa-mon-toggle label:hover { color: #4a0028; }
body.theme-rosa .pa-mon-toggle input:checked + label { color: #fff !important; }

body.theme-dark .pa-mon-toggle__glider {
  background: linear-gradient(135deg, #c0c0c055, #e0e0e0);
  box-shadow: 0 0 18px rgba(192,192,192,0.5), inset 0 0 10px rgba(255,255,255,0.4);
}
body.theme-rosa .pa-mon-toggle__glider {
  background: linear-gradient(135deg, #f472b6, #ec4899);
  box-shadow: 0 0 18px rgba(244,114,182,0.55), inset 0 0 10px rgba(255,200,240,0.4);
}
body.theme-neon .pa-mon-toggle__glider {
  background: linear-gradient(135deg, #00ffff88, #00e5ff);
  box-shadow: 0 0 18px rgba(0,255,255,0.55), inset 0 0 10px rgba(200,255,255,0.4);
}

/* Wrapper centrador para el toggle */
.pa-mon-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. GRID DE TARJETAS DE ALERTA
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-mon-card-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-flow: row;          /* relleno horizontal antes que vertical */
  gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7b. BARRA DE FILTROS POR TIPO DE ACCIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-mon-filter-bar {
  max-width: 1180px;
  margin: 0 auto 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.5rem;
  background: var(--pa-mon-glass-bg);
  border: 1px solid var(--pa-mon-glass-border);
  border-radius: 14px;
  box-shadow: var(--pa-mon-glass-shadow);
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
}

.pa-mon-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem 0.42rem 0.7rem;
  border: 1px solid var(--pa-mon-divider);
  background: transparent;
  color: var(--pa-mon-muted);
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.pa-mon-filter-chip:hover {
  border-color: var(--pa-mon-accent-1);
  color: var(--pa-mon-text);
  transform: translateY(-1px);
}
.pa-mon-filter-chip__icon { font-size: 1rem; line-height: 1; }
.pa-mon-filter-chip__label { font-weight: 600; }
.pa-mon-filter-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--pa-mon-divider);
  color: var(--pa-mon-text);
  font-size: 0.72rem;
  font-weight: 800;
}
.pa-mon-filter-chip.is-empty { opacity: 0.5; }
.pa-mon-filter-chip.is-empty:hover { opacity: 1; }

/* Variante "Todas" */
.pa-mon-filter-chip--all.is-active {
  background: linear-gradient(135deg, var(--pa-mon-accent-1), var(--pa-mon-accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.pa-mon-filter-chip--all.is-active .pa-mon-filter-chip__count {
  background: rgba(255,255,255,0.28);
  color: #fff;
}

/* Variantes por acción cuando están activas — usan los tokens de paleta */
.pa-mon-filter-chip--bano.is-active        { background: linear-gradient(135deg, var(--pa-mon-bano-1),        var(--pa-mon-bano-2));        color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(6,182,212,0.40); }
.pa-mon-filter-chip--nollega.is-active     { background: linear-gradient(135deg, var(--pa-mon-nollega-1),     var(--pa-mon-nollega-2));     color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(245,158,11,0.40); }
.pa-mon-filter-chip--ayuda.is-active       { background: linear-gradient(135deg, var(--pa-mon-ayuda-1),       var(--pa-mon-ayuda-2));       color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(239,68,68,0.40); }
.pa-mon-filter-chip--monitor.is-active     { background: linear-gradient(135deg, var(--pa-mon-monitor-1),     var(--pa-mon-monitor-2));     color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(139,92,246,0.40); }
.pa-mon-filter-chip--inspectoria.is-active { background: linear-gradient(135deg, var(--pa-mon-inspectoria-1), var(--pa-mon-inspectoria-2)); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(185,28,28,0.45); }
.pa-mon-filter-chip--fotocopias.is-active  { background: linear-gradient(135deg, var(--pa-mon-fotocopias-1),  var(--pa-mon-fotocopias-2));  color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(16,185,129,0.40); }

.pa-mon-filter-chip.is-active .pa-mon-filter-chip__count {
  background: rgba(255,255,255,0.28);
  color: #fff;
}

.pa-mon-filter-chip:focus-visible {
  outline: 3px solid rgba(99,102,241,0.5);
  outline-offset: 2px;
}

.pa-mon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem 0.9rem;
  background: var(--pa-mon-glass-bg);
  border: 1px solid var(--pa-mon-glass-border);
  border-left: 5px solid var(--pa-mon-card-accent, var(--pa-mon-accent-1));
  border-radius: 16px;
  box-shadow: var(--pa-mon-glass-shadow);
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
  overflow: hidden;
  isolation: isolate;
  animation: paMonCardIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes paMonCardIn {
  0%   { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Flash de color al entrar (borde izquierdo) */
.pa-mon-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(135deg,
    var(--pa-mon-card-accent, var(--pa-mon-accent-1)) 0%,
    transparent 40%);
  opacity: 0;
  animation: paMonCardFlash 0.55s ease-out both;
}
@keyframes paMonCardFlash {
  0%   { opacity: 0.25; }
  100% { opacity: 0; }
}

/* Variantes de color por acción */
.pa-mon-card--bano        { --pa-mon-card-accent: var(--pa-mon-bano-1); }
.pa-mon-card--nollega     { --pa-mon-card-accent: var(--pa-mon-nollega-1); }
.pa-mon-card--ayuda       { --pa-mon-card-accent: var(--pa-mon-ayuda-1); }
.pa-mon-card--monitor     { --pa-mon-card-accent: var(--pa-mon-monitor-1); }
.pa-mon-card--inspectoria { --pa-mon-card-accent: var(--pa-mon-inspectoria-1); }
.pa-mon-card--fotocopias  { --pa-mon-card-accent: var(--pa-mon-fotocopias-1); }

/* ── Header de la tarjeta ── */
.pa-mon-card__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.pa-mon-card__action-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}
.pa-mon-card__action-name {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--pa-mon-card-accent, var(--pa-mon-accent-1));
  flex: 1;
  min-width: 0;
}
.pa-mon-card__corner-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pa-mon-card-accent, var(--pa-mon-accent-1));
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(0,0,0,0.18);
}
body.theme-dark .pa-mon-card__corner-badge,
body.theme-neon .pa-mon-card__corner-badge {
  box-shadow:
    0 0 0 3px rgba(31, 41, 55, 0.7),
    0 0 14px var(--pa-mon-card-accent, var(--pa-mon-accent-1));
}

/* ── Datos del estudiante ── */
.pa-mon-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pa-mon-card__est-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pa-mon-text);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.pa-mon-card__curso {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pa-mon-card-accent, var(--pa-mon-accent-1));
}
.pa-mon-card__curso .icon {
  font-size: 0.95rem;
  opacity: 0.85;
}
.pa-mon-card__profe {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--pa-mon-muted);
  margin-top: 0.1rem;
}

/* ── Timer con anillo SVG ── */
.pa-mon-card__timer {
  position: relative;
  align-self: center;
  margin: 0.3rem auto 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pa-mon-card__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pa-mon-card__ring-track {
  stroke: var(--pa-mon-divider);
  stroke-width: 8;
  fill: none;
}
.pa-mon-card__ring-fill {
  stroke: var(--pa-mon-ring-color, #10b981);
  stroke-width: 8;
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s linear, stroke 0.4s ease;
  filter: drop-shadow(0 0 6px var(--pa-mon-ring-color, #10b981));
}
.pa-mon-card__time {
  position: relative;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--pa-mon-text);
  letter-spacing: 0.02em;
}
/* Texto alternativo cuando no hay timer (muestra hora de salida) */
.pa-mon-card__salida {
  align-self: center;
  margin: 0.4rem auto 0.2rem;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pa-mon-card-accent, var(--pa-mon-accent-1));
  background: rgba(255,255,255,0.4);
  border: 1px solid var(--pa-mon-divider);
}
body.theme-dark .pa-mon-card__salida,
body.theme-neon .pa-mon-card__salida {
  background: rgba(255,255,255,0.06);
}

/* ── Botón resolver ── */
.pa-mon-card__resolver {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  margin-top: auto;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 10px;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.32);
  transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.pa-mon-card__resolver:hover {
  filter: brightness(1.10);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.50);
}
.pa-mon-card__resolver:active { transform: scale(0.97); }
.pa-mon-card__resolver .icon { font-size: 1rem; }

/* ── Estado vencido ── */
.pa-mon-card.is-vencido {
  animation:
    paMonBlink 1s ease-in-out infinite,
    paMonShake 0.7s ease-in-out infinite;
  border-color: var(--pa-mon-danger);
}
@keyframes paMonBlink {
  0%, 100% { box-shadow: var(--pa-mon-glass-shadow), 0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: var(--pa-mon-glass-shadow), 0 0 0 6px rgba(239, 68, 68, 0.40); }
}
@keyframes paMonShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.pa-mon-card__vencido-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.55);
}
.pa-mon-card.is-vencido .pa-mon-card__corner-badge { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. ESTADO VACÍO (Monitoreo)
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-mon-card-empty {
  grid-column: 1 / -1;
  max-width: 520px;
  margin: 2rem auto;
  padding: 2.6rem 1.6rem;
  text-align: center;
  background: var(--pa-mon-glass-bg);
  border: 1px dashed var(--pa-mon-glass-border);
  border-radius: 22px;
  box-shadow: var(--pa-mon-glass-shadow);
  backdrop-filter: var(--pa-mon-glass-blur);
  -webkit-backdrop-filter: var(--pa-mon-glass-blur);
}
.pa-mon-card-empty__icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #10b981;
  font-size: 2.6rem;
  filter: drop-shadow(0 6px 16px rgba(16, 185, 129, 0.28));
}
.pa-mon-card-empty__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pa-mon-text);
  margin-bottom: 0.35rem;
}
.pa-mon-card-empty__sub {
  font-size: 0.9rem;
  color: var(--pa-mon-muted);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .pa-monitoreo-section { padding: 1rem 0.8rem calc(110px + 1.5rem); }
  .pa-mon-clase-header { padding: 0.9rem 1.1rem; }
  .pa-mon-clase-header__icon { font-size: 1.8rem; }
  .pa-mon-clase-header__title { font-size: 1.3rem; }
  .pa-mon-dash-header { padding: 0.7rem 0.85rem; }
  .pa-mon-dash-title { font-size: 1.1rem; }
  .pa-mon-card-grid { grid-template-columns: 1fr; }
  .pa-mon-est-list  { grid-template-columns: 1fr; }
  .pa-mon-est-actions__grid { gap: 0.5rem; padding: 0.7rem; }
  .pa-mon-action { min-height: 70px; padding: 0.6rem 0.4rem 0.5rem; }
  .pa-mon-action__icon { font-size: 1.35rem; }
  .pa-mon-action__label { font-size: 0.74rem; }
}

@media (max-width: 420px) {
  .pa-mon-est-actions__grid { grid-template-columns: 1fr 1fr; }
  .pa-mon-toggle label { min-width: 88px; padding: 0.55rem 1rem; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. ACCESIBILIDAD
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .pa-mon-card,
  .pa-mon-card.is-vencido,
  .pa-mon-dash-badge.has-alerts,
  .pa-mon-live__dot,
  .pa-mon-est-skeleton__avatar,
  .pa-mon-est-skeleton__line {
    animation: none !important;
  }
  .pa-mon-card__ring-fill { transition: none !important; }
}

.pa-mon-action:focus-visible,
.pa-mon-card__resolver:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}