/* Portal DOOH reusa el design system completo de Portal Marketing (styles.css, sin tocarlo)
   con el mismo branding y estructura visual — la única diferencia pedida es el color principal:
   celeste en vez de violeta/lila. Todo el sistema de componentes (.fp-btn, glow, focus rings,
   etc.) está armado sobre la variable --fp-violet, así que overridearla acá alcanza para
   re-temizar todo sin duplicar una sola regla de CSS. */
:root {
  --fp-violet: #0ea5e9;
  --fp-violet-dark: #0284c7;
  --fp-violet-rgb: 14, 165, 233;
  --fp-glow: 0 0 0 1px rgba(14, 165, 233, 0.16), 0 0 20px -6px rgba(14, 165, 233, 0.4);
}

:root[data-theme="dark"] {
  --fp-violet: #38bdf8;
  --fp-violet-dark: #0ea5e9;
  --fp-violet-rgb: 56, 189, 248;
  --fp-glow: 0 0 0 1px rgba(56, 189, 248, 0.22), 0 0 26px -4px rgba(14, 165, 233, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fp-violet: #38bdf8;
    --fp-violet-dark: #0ea5e9;
    --fp-violet-rgb: 56, 189, 248;
    --fp-glow: 0 0 0 1px rgba(56, 189, 248, 0.22), 0 0 26px -4px rgba(14, 165, 233, 0.45);
  }
}

/* ==========================================================================
   Tablero — hero "Reproduciendo ahora" con borde animado (moving border) y
   tarjetas de estadísticas con acento de color. Específico de Portal DOOH,
   por eso vive acá y no en el styles.css compartido con Marketing.
   ========================================================================== */

@property --dooh-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.dooh-hero {
  position: relative;
  border-radius: 20px;
  padding: 2px;
  background: conic-gradient(from var(--dooh-angle), #0ea5e9, #22d3ee, #38bdf8, #22c55e, #f5a524, #ef4444, #0ea5e9);
  animation: dooh-spin 7s linear infinite;
  margin-bottom: 22px;
}
.dooh-hero__inner {
  border-radius: 18px;
  background: var(--fp-surface);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
.dooh-hero__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 0%, rgba(var(--fp-violet-rgb), 0.14), transparent 55%);
  pointer-events: none;
}
@keyframes dooh-spin {
  to { --dooh-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .dooh-hero { animation: none; background: linear-gradient(120deg, #0ea5e9, #22d3ee, #22c55e); }
}

.dooh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fp-mustard);
  border: 1px solid var(--fp-mustard);
  border-radius: 20px;
  padding: 3px 12px;
}
.dooh-hero__eyebrow--live {
  color: var(--fp-success);
  border-color: var(--fp-success);
}
.dooh-hero__eyebrow--alert {
  color: var(--fp-danger);
  border-color: var(--fp-danger);
}
.dooh-hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
  animation: dooh-pulse 1.6s ease-in-out infinite;
}
@keyframes dooh-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.dooh-hero__title {
  font-size: 26px;
  font-weight: 800;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--fp-text) 0%, var(--fp-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.dooh-hero__subtitle {
  font-size: 13px;
  color: var(--fp-text-muted);
  margin-top: 2px;
}
.dooh-hero__progress {
  height: 8px;
  border-radius: 4px;
  background: var(--fp-surface-2);
  overflow: hidden;
  margin-top: 16px;
  position: relative;
}
.dooh-hero__progress-fill {
  /* El JS actualiza esto con transform:scaleX() cada 500ms mientras el spot avanza, NO con
     width — width fuerza layout/repaint en cada write; scaleX() es puro trabajo de compositor
     (GPU), sin tildes aunque se actualice seguido. width:100% + transform-origin:left es lo que
     hace que scaleX(0.4) efectivamente se vea como "40% lleno" en vez de estirar el elemento. */
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee);
  background-size: 200% 100%;
  animation: dooh-progress-shimmer 2.4s linear infinite;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
@keyframes dooh-progress-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Tarjetas de estadísticas del dispositivo, cada una con un acento de color propio. */
.dooh-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  border: 1px solid var(--fp-border);
  background: color-mix(in srgb, var(--fp-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 16px;
  border-left: 3px solid var(--dooh-accent, var(--fp-violet));
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dooh-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--fp-glow);
  border-color: color-mix(in srgb, var(--dooh-accent, var(--fp-violet)) 45%, var(--fp-border));
}
.dooh-stat-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--dooh-accent, var(--fp-violet)) 16%, transparent);
  color: var(--dooh-accent, var(--fp-violet));
}
.dooh-stat-card__label {
  font-size: 11px;
  color: var(--fp-text-muted);
  display: block;
}
.dooh-stat-card__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-text);
  display: block;
}
.dooh-stat-card__caption {
  font-size: 11px;
  color: var(--fp-text-muted);
}

.dooh-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* Reproductor del spot estimado actual — columna izquierda del bloque principal, estirado en
   alto para empatar exactamente con la columna derecha (título + timeline + estadísticas). */
.dooh-player {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0f1a;
  border: 1px solid var(--fp-border);
}
.dooh-player__video {
  width: 100%;
  height: 100%;
  /* cover, no contain: la caja del reproductor tiene un tamaño fijo (ver JS syncPlayerHeight) y
     los videos reales vienen en resoluciones distintas — cover los agranda o achica a todos por
     igual para llenar esa caja, en vez de dejar franjas negras (letterbox) con los más chicos. */
  object-fit: cover;
  display: block;
  background: #000;
}
/* Botones de control remoto (Reiniciar PC / Encender-Apagar energía) — celeste (--fp-violet ya
   es celeste en este tema, ver comentario arriba) con un resplandor exterior más claro al pasar
   el cursor. El modificador --off atenúa el color cuando el último pedido conocido fue apagar. */
.dooh-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--fp-violet);
  color: var(--fp-violet);
  background: rgba(var(--fp-violet-rgb), 0.08);
  cursor: pointer;
  transition: box-shadow .18s ease, background .18s ease, transform .12s ease;
}
.dooh-control-btn:hover:not(:disabled) {
  box-shadow: 0 0 0 4px rgba(var(--fp-violet-rgb), 0.18), 0 0 22px -2px rgba(var(--fp-violet-rgb), 0.55);
  background: rgba(var(--fp-violet-rgb), 0.14);
  transform: translateY(-1px);
}
.dooh-control-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.dooh-control-btn--off {
  border-color: var(--fp-text-muted);
  color: var(--fp-text-muted);
  background: rgba(148, 163, 184, 0.08);
}
.dooh-control-btn--off:hover:not(:disabled) {
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18), 0 0 22px -2px rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.14);
}
.dooh-player__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--fp-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* Bloque principal: reproductor (columna izquierda, protagonista) + columna derecha (título,
   subtítulo, timeline real del video y fila de estadísticas). El alto del reproductor lo fija JS
   (mide la columna derecha, que es contenido estable) en vez de align-items:stretch — con stretch,
   una vez que el <video> real cargaba metadata, el propio reproductor terminaba agrandando la fila
   entera. align-self:flex-start en ambos hijos saca a los dos del cálculo automático de alto. */
.dooh-hero__main {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 16px;
}
.dooh-hero__main .dooh-player {
  /* 288x192 — la región real que la placa emisora captura del escritorio (no 16:9). El alto lo
     fija JS (dooh-hero-height-sync) tomando el de la columna derecha; el ancho sale solo de ese
     alto vía aspect-ratio. Fijo y estable: no se mueve aunque cambie el video adentro.
     height:220px es un valor de arranque (~el alto típico de la columna derecha) — sin esto, antes
     de que corra el JS (que espera a DOMContentLoaded) el navegador no tiene un alto definido para
     resolver el aspect-ratio y cae a un tamaño mucho más grande, dando el flash de "arranca gigante
     y se achica". El JS pisa este valor apenas mide el alto real; si difiere, el ajuste es chico y
     ya no se nota. */
  flex: 0 0 auto;
  align-self: flex-start;
  aspect-ratio: 288 / 192;
  height: 220px;
  min-width: 220px;
  max-width: 640px;
}

/* Columna derecha: stack vertical de título/subtítulo, timeline y estadísticas. Alto estable
   (solo texto + 3 tarjetas de tamaño fijo) — es la referencia que JS usa para fijar el reproductor. */
.dooh-hero__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0%;
  align-self: flex-start;
  min-width: 300px;
}

.dooh-plays-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}
.dooh-plays-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  padding: 12px 8px 14px;
  background: var(--fp-surface-2);
  text-align: center;
}
.dooh-plays-box__gauge {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dooh-plays-box__gauge svg {
  position: absolute;
  inset: 0;
}
.dooh-plays-box__value {
  position: relative;
  font-size: 20px;
  font-weight: 800;
  color: var(--fp-text);
}
.dooh-plays-box__pct {
  font-size: 9.5px;
  color: var(--fp-text-muted);
  opacity: 0.8;
}
.dooh-plays-box__label {
  font-size: 10.5px;
  color: var(--fp-text-muted);
  line-height: 1.25;
}

/* Anillo compacto por fila en la tabla de la playlist — mismo lenguaje visual que las 3 cajas
   grandes de arriba, a escala de una celda. El número va centrado sobre el anillo, ambos con el
   mismo eje (position:relative en el contenedor + absolute en el svg, sin desplazamientos). */
.dooh-mini-gauge-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.dooh-mini-gauge-cell svg {
  position: absolute;
  inset: 0;
}
.dooh-mini-gauge-cell__value {
  position: relative;
  font-size: 10px;
  font-weight: 700;
  color: var(--fp-text);
  line-height: 1;
}

@media (max-width: 640px) {
  .dooh-hero__main { flex-direction: column; }
  .dooh-hero__main .dooh-player { width: 100%; max-width: 100%; min-width: 0; }
  .dooh-hero__identity { flex-basis: auto; min-width: 0; }
}

/* Resalta la fila del ítem que está sonando ahora en la tabla de playlist — se le agrega/saca
   esta clase también desde JS al avanzar la reproducción en tiempo real, sin recargar la página. */
.dooh-row--current {
  background: var(--fp-surface-2);
  box-shadow: inset 3px 0 0 var(--fp-violet);
}
.dooh-row--current .dooh-row__label {
  font-weight: 700;
  color: var(--fp-violet);
}

/* Panel "Salida real de pantalla" — la captura real de la región LED, arriba del hero estimado. */
.dooh-output-panel {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  background: color-mix(in srgb, var(--fp-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dooh-output-panel__thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: #0b0f1a;
  border: 1px solid var(--fp-border);
}
.dooh-output-panel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dooh-output-panel__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-text-muted);
}
.dooh-output-panel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 260px;
  min-width: 0;
}
.dooh-output-panel__status {
  font-size: 14px;
  font-weight: 700;
}
.dooh-output-panel__detail {
  font-size: 11.5px;
  color: var(--fp-text-muted);
  overflow-wrap: break-word;
}
.dooh-output-panel__meta {
  font-size: 10.5px;
  color: var(--fp-text-muted);
  margin-top: 2px;
}

/* Mismo alto/ancho/padding/estructura que .dooh-output-panel (comparten todas las clases hijas) —
   solo cambia el borde/thumb a celeste para distinguirlo como el panel de geolocalización. */
.dooh-output-panel--geo {
  border-color: rgba(var(--fp-violet-rgb), 0.4);
}
.dooh-output-panel--geo .dooh-output-panel__thumb {
  background: rgba(var(--fp-violet-rgb), 0.1);
}

/* Monitor de ping en tiempo real — un solo bloque de ancho completo, partido a la mitad
   (internet | red local) en vez de dos tarjetas separadas que mostraban lo mismo. Se actualiza
   solo por polling (ver script en dooh_dashboard/index.php) — esto tiene que leerse de un
   vistazo, como un monitor de señal, no como una tarjeta estadística grande. */
.dooh-ping-strip {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  background: var(--fp-surface);
}
.dooh-ping-strip__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fp-text);
  margin-bottom: 8px;
}
.dooh-ping-strip__halves {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dooh-ping-strip__half {
  --dooh-ping-color: var(--fp-text-muted);
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 3px 0 0 var(--dooh-ping-color);
  padding-left: 10px;
}
.dooh-ping-strip__divider {
  width: 1px;
  align-self: stretch;
  background: var(--fp-border);
  flex-shrink: 0;
}
.dooh-ping-strip__half-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--fp-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.dooh-ping-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dooh-ping-color);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--dooh-ping-color);
  animation: dooh-ping-pulse 2s ease-in-out infinite;
}
@keyframes dooh-ping-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.dooh-ping-strip__value {
  font-size: 14px;
  font-weight: 800;
  color: var(--dooh-ping-color);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 50px;
}
.dooh-ping-strip__bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--fp-border);
  overflow: hidden;
  min-width: 40px;
}
.dooh-ping-strip__fill {
  display: block;
  height: 100%;
  background: var(--dooh-ping-color);
  border-radius: 3px;
  transition: width 0.4s ease, background 0.4s ease;
}
.dooh-ping-strip__status {
  font-size: 11px;
  font-weight: 700;
  color: var(--dooh-ping-color);
  white-space: nowrap;
  flex-shrink: 0;
}
.dooh-ping-strip__loss {
  font-size: 10.5px;
  color: var(--fp-danger);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .dooh-ping-strip__halves { flex-direction: column; align-items: stretch; gap: 10px; }
  .dooh-ping-strip__divider { display: none; }
  .dooh-ping-strip__half-label { display: none; }
}

/* Clima y pronóstico — un solo bloque de ancho completo (clima actual + próximos días +
   alerta si el pronóstico anticipa tormenta/viento fuerte/lluvia intensa). */
.dooh-weather-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--fp-border);
}
.dooh-weather-block__alert {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--fp-danger);
  color: var(--fp-danger);
  border-radius: var(--fp-radius-md);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.dooh-weather-block__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.dooh-weather-block__current {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.dooh-weather-block__temp {
  font-size: 26px;
  font-weight: 800;
  color: var(--fp-text);
}
.dooh-weather-block__cond {
  font-size: 13px;
  color: var(--fp-text-muted);
}
.dooh-weather-block__feels {
  font-size: 12px;
  color: var(--fp-text-muted);
}
.dooh-weather-block__meta {
  font-size: 10.5px;
  color: var(--fp-text-muted);
}
.dooh-weather-block__forecast {
  display: flex;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.dooh-weather-block__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  padding: 8px 10px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  background: var(--fp-surface-2);
}
.dooh-weather-block__day-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fp-text-muted);
  text-transform: uppercase;
}
.dooh-weather-block__day-temp {
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-text);
}
.dooh-weather-block__day-precip {
  font-size: 9.5px;
  color: var(--fp-info);
}
@media (max-width: 640px) {
  .dooh-weather-block__row { flex-direction: column; align-items: flex-start; }
  .dooh-weather-block__forecast { justify-content: flex-start; }
}

/* ==========================================================================
   Mapa DOOH — Leaflet auto-hosteado, tiles reales de OSM oscurecidos con un
   filtro CSS (evita depender de un segundo proveedor de tiles solo para el
   modo oscuro). Panel lateral fuera del mapa en sí (nunca tapa el contenido).
   ========================================================================== */
.dooh-map-wrap {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  height: 620px;
}
.dooh-map-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.dooh-map-canvas-wrap--fullscreen {
  height: 100vh;
  background: #0b0f1a;
}
.dooh-map-canvas {
  position: absolute;
  inset: 0;
  border-radius: var(--fp-radius-lg);
  border: 1px solid var(--fp-border);
  overflow: hidden;
  background: #0b0f1a;
}
.dooh-map-canvas-wrap--fullscreen .dooh-map-canvas {
  border-radius: 0;
  border: none;
}
.dooh-map-tiles-dark {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.9);
}

/* Pestañas Operativo/Comercial — mismo lenguaje de botón que el resto del portal
   (.fp-btn-subtle), no un sistema de tabs nuevo. La activa se marca con un subrayado de acento,
   igual al patrón que ya usa el nav principal para el link activo. */
.dooh-map-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--fp-border);
  margin: 14px 0 0;
}
.dooh-map-tab {
  background: none;
  border: none;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dooh-map-tab:hover { color: var(--fp-text); }
.dooh-map-tab--active {
  color: var(--fp-violet);
  border-bottom-color: var(--fp-violet);
}
.dooh-map-tab-panel { margin-top: 4px; }

/* Toolbar vertical del mapa — flota sobre el canvas (no sobre el panel lateral, que queda afuera
   de .dooh-map-canvas-wrap), mismo tratamiento visual que .dooh-map-panel (vidrio esmerilado). */
.dooh-map-toolbar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: var(--fp-radius-lg);
  border: 1px solid var(--fp-border);
  background: color-mix(in srgb, var(--fp-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dooh-map-toolbar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dooh-map-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fp-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dooh-map-toolbar__btn:hover {
  background: color-mix(in srgb, var(--fp-violet) 12%, transparent);
  color: var(--fp-text);
}
.dooh-map-toolbar__btn--active {
  background: color-mix(in srgb, var(--fp-violet) 18%, transparent);
  border-color: var(--fp-violet);
  color: var(--fp-violet);
}
.dooh-map-toolbar__divider {
  width: 24px;
  height: 1px;
  background: var(--fp-border);
  margin: 2px 0;
}
.dooh-map-toolbar__layers {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 4px 2px 2px;
  align-items: flex-start;
}
.dooh-map-toolbar__layers-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fp-text-muted);
  margin-bottom: 1px;
}
.dooh-map-toolbar__layers label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--fp-text);
  white-space: nowrap;
  cursor: pointer;
}
.dooh-map-toolbar__layers input[type="checkbox"] {
  accent-color: var(--fp-violet);
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.dooh-map-panel {
  flex: 0 0 280px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  background: color-mix(in srgb, var(--fp-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 18px;
  overflow-y: auto;
}
.dooh-map-panel__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
}
.dooh-map-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dooh-map-legend__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--fp-text-muted);
}
.dooh-map-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.dooh-map-dot--screen-activa { background: #38bdf8; box-shadow: 0 0 8px 1px rgba(56,189,248,0.7); }
.dooh-map-dot--screen-alerta { background: #ef4444; box-shadow: 0 0 8px 1px rgba(239,68,68,0.7); }
.dooh-map-dot--client-con-spot { background: #22c55e; }
.dooh-map-dot--client-sin-spot { background: #ef4444; }
.dooh-map-dot--client-sin-campana { background: #94a3b8; }

/* Marcadores custom (L.divIcon) — un punto + un halo animado (pulse) detras, cada uno con su
   color segun estado. dimmed/selected los toca el click de un cliente en el mapa (JS). */
.dooh-map-marker {
  position: relative;
  width: 18px;
  height: 18px;
}
.dooh-map-marker__dot {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(11,15,26,0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dooh-map-marker__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.55;
  animation: dooh-map-pulse 2.2s ease-out infinite;
}
@keyframes dooh-map-pulse {
  0% { transform: scale(0.5); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
.dooh-map-marker--screen-activa .dooh-map-marker__dot,
.dooh-map-marker--screen-activa .dooh-map-marker__pulse { background: #38bdf8; }
.dooh-map-marker--screen-alerta .dooh-map-marker__dot,
.dooh-map-marker--screen-alerta .dooh-map-marker__pulse { background: #ef4444; }
.dooh-map-marker--client-con-spot .dooh-map-marker__dot,
.dooh-map-marker--client-con-spot .dooh-map-marker__pulse { background: #22c55e; }
.dooh-map-marker--client-sin-spot .dooh-map-marker__dot,
.dooh-map-marker--client-sin-spot .dooh-map-marker__pulse { background: #ef4444; }
.dooh-map-marker--client-sin-campana .dooh-map-marker__dot,
.dooh-map-marker--client-sin-campana .dooh-map-marker__pulse { background: #94a3b8; }
.dooh-map-marker--client-sin-campana .dooh-map-marker__pulse { animation: none; opacity: 0; }
.dooh-map-marker--device .dooh-map-marker__dot,
.dooh-map-marker--device .dooh-map-marker__pulse { background: #ffffff; }
.dooh-map-marker--device .dooh-map-marker__dot { box-shadow: 0 0 10px 2px rgba(255,255,255,0.8); }

.dooh-map-marker--selected .dooh-map-marker__dot {
  transform: scale(1.5);
  box-shadow: 0 0 14px 3px currentColor;
}
.dooh-map-marker--dimmed .dooh-map-marker__dot { opacity: 0.25; }
.dooh-map-marker--dimmed .dooh-map-marker__pulse { opacity: 0; }

/* Conexion cliente -> pantalla: linea punteada con un "moving border" (el dash se desplaza
   solo, sensacion de flujo continuo) + glow suave. La seleccionada se ve mas intensa. */
.dooh-map-connection {
  stroke-dasharray: 8 7;
  animation: dooh-map-flow 1.4s linear infinite;
  filter: drop-shadow(0 0 3px rgba(56,189,248,0.7));
  transition: opacity 0.25s ease;
}
.dooh-map-connection--selected {
  filter: drop-shadow(0 0 6px rgba(56,189,248,0.95));
}
@keyframes dooh-map-flow {
  to { stroke-dashoffset: -30; }
}
@media (prefers-reduced-motion: reduce) {
  .dooh-map-connection { animation: none; }
  .dooh-map-marker__pulse { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
  .dooh-map-wrap { flex-direction: column; height: auto; }
  .dooh-map-canvas-wrap { height: 420px; }
  .dooh-map-panel { flex: 0 0 auto; max-height: 320px; }
  .dooh-map-toolbar { top: 8px; right: 8px; padding: 6px; gap: 4px; }
  .dooh-map-toolbar__btn { width: 28px; height: 28px; }
  .dooh-map-toolbar__layers { display: none; }
}

/* Interruptor on/off (recuperación automática en Técnica) — checkbox real por accesibilidad,
   visualmente oculto detrás de un switch estilo iOS. */
.dooh-toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.dooh-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.dooh-toggle-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dooh-toggle-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fp-text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}
.dooh-toggle-switch input:checked ~ .dooh-toggle-switch__track {
  background: color-mix(in srgb, var(--fp-success) 25%, var(--fp-surface-2));
  border-color: var(--fp-success);
}
.dooh-toggle-switch input:checked ~ .dooh-toggle-switch__track .dooh-toggle-switch__thumb {
  transform: translateX(18px);
  background: var(--fp-success);
}
.dooh-toggle-switch input:disabled ~ .dooh-toggle-switch__track {
  opacity: 0.5;
}

/* Panel de control técnico (Técnica) — estética "sala de control": fondo oscuro fijo, líneas
   marcadas, luces de estado con glow real (no decorativo — el color siempre sale de datos
   reales: agent_online, output_status, severidad de incidencias). */
.dooh-panel {
  background: color-mix(in srgb, #060b14 92%, var(--fp-surface));
  border: 1px solid color-mix(in srgb, var(--fp-border) 60%, #1a2740);
  border-radius: 14px;
  padding: 18px 18px 20px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
}
.dooh-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 32px);
  pointer-events: none;
}
.dooh-panel__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  position: relative;
}
.dooh-panel__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e7edf7;
}
.dooh-panel__sub {
  font-size: 11px;
  color: color-mix(in srgb, #e7edf7 55%, transparent);
}
.dooh-console-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  position: relative;
}
.dooh-console {
  background: color-mix(in srgb, #0c1524 88%, var(--fp-surface));
  border: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  border-radius: 10px;
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dooh-console--stats {
  align-items: center;
  text-align: center;
  justify-content: center;
}
.dooh-console__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dooh-console__row--head {
  border-bottom: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  padding-bottom: 8px;
}
.dooh-console__row--switch {
  justify-content: space-between;
  border-top: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  padding-top: 8px;
  margin-top: 2px;
}
.dooh-console__name {
  font-size: 12.5px;
  color: #e7edf7;
}
.dooh-console__label {
  font-size: 11px;
  color: color-mix(in srgb, #e7edf7 62%, transparent);
}
.dooh-console__dials {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.dooh-console__dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dooh-console__dial-label {
  font-size: 9.5px;
  line-height: 1.25;
  text-align: center;
  color: color-mix(in srgb, #e7edf7 60%, transparent);
}
.dooh-console__big-value {
  font-size: 30px;
  font-weight: 800;
  color: #e7edf7;
}

/* Panel "Estadísticas de Servicio Técnico" — mismo lenguaje visual que .dooh-console, columnas
   más anchas porque acá adentro van gráficos de barra, no gauges chicos. */
.dooh-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.dooh-stats-block {
  background: color-mix(in srgb, #0c1524 88%, var(--fp-surface));
  border: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  border-radius: 10px;
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dooh-stats-block--center {
  align-items: center;
  text-align: center;
  justify-content: center;
}
.dooh-stats-note {
  font-size: 10.5px;
  color: color-mix(in srgb, #e7edf7 55%, transparent);
  margin: 0;
}
.dooh-stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dooh-stats-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: #e7edf7;
  border-bottom: 1px solid color-mix(in srgb, #2a3d5c 50%, var(--fp-border));
  padding-bottom: 5px;
}
.dooh-stats-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.dooh-stats-list li strong {
  color: var(--fp-violet);
  font-weight: 700;
}

/* Luz LED — el glow (box-shadow) se apaga por completo en estado "off" para no simular actividad falsa. */
.dooh-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #33415c;
}
.dooh-led--on {
  background: var(--fp-success);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--fp-success) 70%, transparent);
}
.dooh-led--off {
  background: #33415c;
  box-shadow: none;
}
.dooh-led--alert {
  background: var(--fp-danger);
  box-shadow: 0 0 7px 2px color-mix(in srgb, var(--fp-danger) 75%, transparent);
  animation: dooh-led-pulse 1.4s ease-in-out infinite;
}
@keyframes dooh-led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Consola con alerta activa — acento rojo a la izquierda, mismo patrón que las tarjetas de
   referencia (barra de color lateral) para que salte a la vista sin tener que leer texto. */
.dooh-console--critical {
  border-left: 3px solid var(--fp-danger);
  box-shadow: inset 3px 0 12px -6px color-mix(in srgb, var(--fp-danger) 60%, transparent);
}
.dooh-console--normal {
  border-left: 3px solid transparent;
}

/* Tarjeta "Acciones técnicas" — consola de comandos por pantalla: cada acción es independiente,
   con su propio botón, chip de estado y separador. El reinicio de emergencia vive acá también,
   pero con tratamiento visual propio (ver .dooh-emergency-btn) para que nunca se confunda con
   una acción de rutina. */
.dooh-console--actions {
  gap: 8px;
}
.dooh-action-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dooh-action-divider {
  height: 1px;
  background: color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  margin: 1px 0;
}

.dooh-cmd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, #0c1524 92%, var(--fp-surface));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.dooh-cmd:active { transform: scale(0.97); }
.dooh-cmd:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.dooh-cmd--reboot {
  border: 1px solid color-mix(in srgb, var(--fp-danger) 55%, #2a3d5c);
  color: color-mix(in srgb, var(--fp-danger) 80%, #e7edf7);
}
.dooh-cmd--reboot:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fp-danger) 14%, #0c1524);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--fp-danger) 60%, transparent);
}
.dooh-cmd--ping {
  border: 1px solid color-mix(in srgb, var(--fp-info) 55%, #2a3d5c);
  color: color-mix(in srgb, var(--fp-info) 80%, #e7edf7);
}
.dooh-cmd--ping:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fp-info) 14%, #0c1524);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--fp-info) 60%, transparent);
}

/* Reinicio de EMERGENCIA — identidad visual propia y deliberadamente distinta de los botones de
   rutina: círculo rojo con glow pulsante permanente (como una baliza), no una pill más con otro
   texto. Nunca se deshabilita — la guardia técnica tiene que poder insistir aunque un pedido
   anterior (normal o de emergencia) siga trabado. */
.dooh-emergency-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
}
.dooh-emergency-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ff5468, var(--fp-danger) 72%);
  border: 2px solid color-mix(in srgb, var(--fp-danger) 70%, #fff);
  cursor: pointer;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fp-danger) 16%, transparent), 0 0 22px -2px color-mix(in srgb, var(--fp-danger) 85%, transparent);
  transition: transform 0.12s ease;
}
.dooh-emergency-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--fp-danger) 55%, transparent);
  animation: dooh-emergency-ring 1.8s ease-out infinite;
}
@keyframes dooh-emergency-ring {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}
.dooh-emergency-btn:hover { transform: scale(1.06); }
.dooh-emergency-btn:active { transform: scale(0.95); }
.dooh-emergency-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fp-danger) 88%, #e7edf7);
}

/* Chips de estado de comando — el color SIEMPRE sale de fp_dooh_reboot_status()/fp_dooh_ping_test_status(),
   nunca hardcodeado por acción, para que el texto y el color no puedan desincronizarse. */
.dooh-status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: color-mix(in srgb, #e7edf7 65%, transparent);
}
.dooh-status-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #33415c;
}
.dooh-status-chip--inactivo .dooh-status-chip__dot { background: #33415c; }
.dooh-status-chip--progreso .dooh-status-chip__dot {
  background: var(--fp-info);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--fp-info) 70%, transparent);
  animation: dooh-led-pulse 1.2s ease-in-out infinite;
}
.dooh-status-chip--ok .dooh-status-chip__dot {
  background: var(--fp-success);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--fp-success) 70%, transparent);
}
.dooh-status-chip--error .dooh-status-chip__dot {
  background: var(--fp-danger);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--fp-danger) 70%, transparent);
}

/* Bloque ancho de estabilidad eléctrica — ocupa todo el ancho de la grilla (grid-column: 1/-1)
   para tener lugar de sobra y no quedar apretado: estado actual a la izquierda, acción de
   actualizar a la derecha, footer con recuperación automática, y el log de eventos abajo. Sin
   sensor real conectado (ver DoohScreenElectricalCheck) — el hint queda siempre visible. */
.dooh-electrical-panel {
  grid-column: 1 / -1;
  background: color-mix(in srgb, #0c1524 88%, var(--fp-surface));
  border: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  border-radius: 10px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dooh-electrical-panel__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.dooh-electrical-panel__title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e7edf7;
}
.dooh-electrical-panel__hint {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--fp-mustard) 75%, #e7edf7);
}
.dooh-electrical-panel__body {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.dooh-electrical-panel__status {
  flex: 1 1 220px;
}
.dooh-electrical-panel__actions {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dooh-electrical-panel__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  padding-top: 10px;
}

.dooh-electrical-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dooh-electrical-option {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  background: transparent;
  color: #e7edf7;
  font-size: 10.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dooh-electrical-option:hover:not(:disabled) {
  border-color: var(--fp-mustard);
  background: color-mix(in srgb, var(--fp-mustard) 16%, transparent);
}
.dooh-electrical-option:disabled { opacity: 0.5; cursor: not-allowed; }
.dooh-electrical-note {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  background: color-mix(in srgb, #0c1524 92%, var(--fp-surface));
  color: #e7edf7;
  font-size: 10.5px;
  width: 100%;
}

/* Consola de eventos — reinicios + chequeos eléctricos mezclados en orden cronológico, mismo
   patrón visual de "log técnico" que las listas de alertas en tiempo real de la referencia. */
.dooh-timeline {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid color-mix(in srgb, #2a3d5c 70%, var(--fp-border));
  padding-top: 8px;
}
.dooh-timeline__item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dooh-timeline__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #33415c;
}
.dooh-timeline__dot--ok { background: var(--fp-success); }
.dooh-timeline__dot--error { background: var(--fp-danger); }
.dooh-timeline__dot--progreso { background: var(--fp-info); }
.dooh-timeline__text {
  flex: 1 1 auto;
  font-size: 10.5px;
  color: color-mix(in srgb, #e7edf7 72%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dooh-timeline__time {
  font-size: 9.5px;
  color: color-mix(in srgb, #e7edf7 45%, transparent);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .dooh-console-grid { grid-template-columns: 1fr; }
  .dooh-electrical-panel__body { flex-direction: column; gap: 14px; }
}