/* ============================================================================
   PULSAR — Estilos especificos de la vista INSTRUCTOR
   ============================================================================ */

/* El dashboard entra en una sola pantalla: cabecera y pestanas fijas, y el
   panel ocupa el resto (con scroll interno solo si una pestana se pasa). */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cronometro del ejercicio (cabecera) */
/* Cabecero JUSTIFICADO: un solo contenedor con 4 grupos (marca · sesion ·
   herramientas · cuenta) que se reparten con space-between llenando cada linea
   (como un parrafo justificado); al estrecharse envuelven y siguen llenando. */
.cabecera {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.8rem;
  padding: 0.45rem 1.1rem;
}
.cabecera h1 { font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.45rem); margin: 0; white-space: nowrap; }
.cab-marca { display: flex; align-items: center; min-width: 0; }
.cab-sesion { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cab-tools, .cab-cuenta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.cabecera .btn-orden, .cabecera .informe-link, .cabecera .salir, .cabecera .cuenta-box { font-size: 0.83rem; padding: 0.32rem 0.65rem; line-height: 1.25; }
.cabecera .cuenta-box { padding: 0.32rem 0.2rem; }
@media (max-width: 1080px) {
  .cabecera { padding: 0.4rem 0.8rem; gap: 0.3rem 0.5rem; }
  .cabecera .btn-orden, .cabecera .informe-link, .cabecera .salir, .cabecera .cuenta-box { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
  .cuenta-plan { display: none; }
}
/* Pestañas de PREPARAR: ocupan la linea completa y se reparten (justificadas). */
.prep-acordeon { flex: 1 1 100%; justify-content: space-between; }
.informe-link {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--c-titulo);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
}
.informe-link:hover { background: var(--c-btn); }
.codigo-sesion {
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.15rem;
  color: var(--c-acento);
  border: 1px solid #2c4a3c;
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
}
.cronometro {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.crono-display {
  font-size: 1.6rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--c-acento);
  min-width: 5ch;
  text-align: center;
}
.cronometro button {
  font-size: 1rem;
  padding: 0.3rem 0.6rem;
}

/* --- Pestanas del dashboard --- */
.pestanas {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;            /* separacion entre las dos cajas (grupos) */
  padding: 0.3rem 0.8rem 0;
  flex-wrap: wrap;        /* si no cabe, baja el GRUPO entero (caja), no las pestanas sueltas */
}
.pestana {
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
/* Cada grupo de pestanas en su CAJA: se mantiene junto y con su color. */
.pestana-caja {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.35rem 0;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
}
.pestana-caja.op { background: rgba(46, 230, 166, 0.07); border-color: rgba(46, 230, 166, 0.35); }
.pestana-caja.prep { background: rgba(96, 150, 220, 0.07); border-color: rgba(96, 150, 220, 0.35); }
/* PREPARAR en ACORDEÓN: cada subgrupo tiene su TONO (hue --sg-h) para
   distinguirlo de un vistazo. Cabeceras (pills) + las pestañas del abierto. */
.prep-acordeon { flex-wrap: wrap; row-gap: 0.25rem; }
.prep-sub-cab {
  font-family: inherit; font-size: 0.8rem; border-radius: 999px;
  padding: 0.3rem 0.75rem; margin: 0 0.1rem; cursor: pointer; white-space: nowrap; align-self: center;
  color: hsl(var(--sg-h, 210) 58% 76%);
  background: hsl(var(--sg-h, 210) 45% 16% / 0.85);
  border: 1px solid hsl(var(--sg-h, 210) 55% 50%);
}
.prep-sub-cab:hover { color: hsl(var(--sg-h, 210) 70% 86%); border-color: hsl(var(--sg-h, 210) 62% 60%); }
.prep-sub-cab.abierto { color: hsl(var(--sg-h, 210) 75% 88%); background: hsl(var(--sg-h, 210) 55% 24%); border-color: hsl(var(--sg-h, 210) 65% 62%); font-weight: 600; }
.prep-sub-cab.tiene-activa:not(.abierto) { border-color: hsl(var(--sg-h, 210) 55% 55%); box-shadow: inset 0 0 0 1px hsl(var(--sg-h, 210) 55% 45%); }
.prep-sub-n { opacity: 0.7; font-size: 0.72rem; margin-left: 0.15rem; }
/* Las pestañas del subgrupo ABIERTO toman su tono (sutil); la activa, más fuerte. */
.prep-acordeon .pestana.pst-prep { color: hsl(var(--sg-h, 210) 55% 76%); border-color: hsl(var(--sg-h, 210) 45% 44%); background: hsl(var(--sg-h, 210) 40% 15% / 0.6); }
.prep-acordeon .pestana.pst-prep:hover { color: hsl(var(--sg-h, 210) 70% 86%); border-color: hsl(var(--sg-h, 210) 55% 55%); }
.prep-acordeon .pestana.pst-prep.activa { color: hsl(var(--sg-h, 210) 78% 88%); background: hsl(var(--sg-h, 210) 52% 24%); border-color: hsl(var(--sg-h, 210) 62% 58%); font-weight: 600; }
/* Etiqueta de GRUPO (OPERAR / PREPARAR): es un TÍTULO de sección, no una pestaña.
   Mayúsculas, peso fuerte y un separador a la derecha lo dejan claro; no es clicable. */
.pestana-grupo {
  align-self: stretch;
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0 0.55rem 0 0.4rem;
  margin-right: 0.25rem;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  opacity: 0.92;
  cursor: default;
}
.pestana-caja.op .pestana-grupo { color: var(--c-acento); }
.pestana-caja.prep .pestana-grupo { color: #9bc4ff; }

/* Pestanas compactas para que quepan en una linea. */
.pestana {
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
}
.pestana:hover { background: var(--c-btn); color: var(--c-text); }
/* Tinte por grupo */
.pestana.pst-op { color: #8fd9bd; }
.pestana.pst-op.activa { color: var(--c-acento); background: #133024; border-color: #2c6a52; }
.pestana.pst-prep { color: #9fc0e6; }
.pestana.pst-prep.activa { color: #bcdcff; background: #16263c; border-color: #34557e; }
.pestana.activa {
  color: var(--c-acento);
  background: var(--c-btn);
  border-color: var(--c-border2);
  font-weight: bold;
}

/* --- Controles especificos dentro de una tarjeta (ritmo, capno, PIC...) ---
   Se disponen en 2 columnas para que la tarjeta no quede demasiado alta. */
.controles-param {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 0.4rem;
}
.titulo-param {
  grid-column: 1 / -1;       /* el titulo ocupa toda la fila */
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--c-acento);
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}
.control-param {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.control-param label { font-size: 0.72rem; color: var(--c-muted); }
.control-param select,
.control-param input[type="number"] {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: 7px;
  padding: 0.22rem 0.35rem;
  width: 100%;
  min-width: 0;
}
.control-param label { font-size: 0.7rem; }

/* --- Configuracion de "Mi panel" --- */
.config-mipanel {
  grid-column: 1 / -1;            /* ocupa todo el ancho del grid */
  border: 1px dashed var(--c-border2);
  border-radius: 12px;
  background: var(--c-surface);
  padding: 1rem;
}
.lista-mipanel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem 1rem;
  margin-top: 0.6rem;
}
.item-mipanel {
  font-size: 0.9rem;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

/* Alta de alumno en la pestana Sesion */
.alta-alumno {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
  flex-wrap: wrap;               /* si no cabe, el boton baja de linea (no se sale de la columna) */
}
.alta-alumno button { flex: 0 0 auto; }   /* los botones no se encogen ni desbordan */
.alta-alumno input {
  flex: 1 1 auto;
  min-width: 0;                  /* permite encoger el input (evita que empuje el boton fuera) */
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.alta-alumno button { padding: 0.5rem 1rem; }
.item-mipanel button.menos { font-size: 0.8rem; padding: 0.2rem 0.5rem; }

/* Editor de checklist (pestana Sesion) */
.lista-checklist { margin: 0.4rem 0; }
.item-checklist-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--c-text);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--c-border);
}
.item-checklist-edit button.menos { font-size: 0.8rem; padding: 0.2rem 0.5rem; flex: 0 0 auto; }

/* Asignaciones de evaluadores */
.asign-evaluador {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin: 0.4rem 0;
}
.asign-nombre { font-weight: bold; color: var(--c-titulo2); margin-bottom: 0.3rem; }
.asign-cajas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.2rem 0.8rem;
}

/* Botones de intervencion (evolucion) */
.botones-intervencion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0 0.6rem;
}
.botones-intervencion button {
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  text-align: left;
}
.botones-intervencion button.menos { color: #ff9b9b; border-color: #4a2c2c; background: #1a1010; }
.botones-intervencion button.menos:hover { background: #2a1818; }
.botones-intervencion button.mas { color: #cfe3ff; border-color: #2c4a3c; background: #0e1a14; }
.botones-intervencion button.mas:hover { background: #15281f; }
/* ATAJOS de Evolucion como CHIPS pastel (empeora=rojo, mejora=verde), con ⓘ y
   justificados (crecen para llenar la fila). Legibles en oscuro y en claro. */
.atajo-wrap { display: inline-flex; flex: 1 1 auto; align-items: stretch; min-width: 8rem; }
.botones-intervencion .atajo-btn { flex: 1 1 auto; text-align: center; border-radius: 7px 0 0 7px; padding: 0.4rem 0.55rem; font-size: 0.84rem; }
.atajo-info { flex: 0 0 auto; cursor: pointer; font-size: 0.72rem; padding: 0 0.4rem; border-radius: 0 7px 7px 0; border: 1px solid var(--c-border2); border-left: none; background: var(--c-btn); color: var(--c-muted); }
.atajo-info:hover { background: var(--c-btn-hover); color: var(--c-text); }
.botones-intervencion .atajo-btn.menos { color: #7a1620; border: 1px solid #d99a9a; background: #f0cfcf; }
.botones-intervencion .atajo-btn.menos:hover { background: #e7b9b9; }
.botones-intervencion .atajo-btn.mas { color: #14512b; border: 1px solid #9ccfaa; background: #cfe9d6; }
.botones-intervencion .atajo-btn.mas:hover { background: #bce0c6; }
.atajo-quitar { flex: 0 0 auto; }
/* Cada CATEGORIA de atajos en un area con su tinte de color (para localizarla). */
.evol-subgrupo { background: hsl(var(--gh, 210) 55% 45% / 0.08); border: 1px solid hsl(var(--gh, 210) 45% 50% / 0.28); border-radius: 8px; padding: 0.35rem 0.45rem; }
.evol-subgrupo .evol-cat { color: hsl(var(--gh, 210) 62% 72%); margin: 0 0 0.15rem 0.1rem; }
body.tema-claro .evol-subgrupo { background: hsl(var(--gh, 210) 60% 55% / 0.10); border-color: hsl(var(--gh, 210) 45% 55% / 0.4); }
body.tema-claro .evol-subgrupo .evol-cat { color: hsl(var(--gh, 210) 55% 32%); }
/* Tabla del popup de info del atajo. */
.atajo-info-tabla { display: flex; flex-direction: column; gap: 0.12rem; margin: 0.45rem 0; }
.atajo-info-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 0.7rem; font-size: 0.82rem; padding: 0.28rem 0.45rem; border-radius: 6px; background: var(--c-canvas); }
.atajo-info-fila span:nth-child(2), .atajo-info-fila span:nth-child(3) { font-variant-numeric: tabular-nums; text-align: right; }
.atajo-info-cab { background: transparent; color: var(--c-muted); font-weight: 600; }

/* Boton grande de PCR */
.boton-pcr {
  font-family: inherit; font-size: 1.2rem; font-weight: bold;
  color: #fff; background: var(--c-peligro); border: 1px solid var(--c-peligro-borde);
  border-radius: 10px; padding: 0.7rem 1.4rem; cursor: pointer;
}
.boton-pcr:hover { background: #c92a3a; }

/* Boton RCP / Masaje (toggle del artefacto), a la derecha del PCR (mismo tamano,
   hereda .btn-pcr-mini). Amarillo brillante. */
.btn-masaje { color: #2a2200; background: #ffd400; border: 1px solid #d4af00; font-weight: bold; }
.btn-masaje:hover { background: #ffe24a; }
/* ROSC (recuperacion de la PCR): verde, contrapunto del rojo de PCR. */
.btn-rosc { color: #06301c; background: #22c55e; border: 1px solid #16a34a; font-weight: bold; }
.btn-rosc:hover { background: #4ade80; }

/* Activos = PARPADEAN (PCR rojo, Masaje amarillo) para que se vea que estan en marcha. */
.boton-pcr.activo { color: #fff; animation: parpadeo-pcr 0.7s steps(1, end) infinite; }
.btn-masaje.activo { color: #2a2200; animation: parpadeo-masaje 0.7s steps(1, end) infinite; }
@keyframes parpadeo-pcr {
  0%, 49% { background: var(--c-peligro); box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); }
  50%, 100% { background: #ff4d5e; box-shadow: 0 0 12px 3px rgba(255, 77, 94, 0.85); }
}
@keyframes parpadeo-masaje {
  0%, 49% { background: #ffd400; box-shadow: 0 0 0 0 rgba(255, 212, 0, 0); }
  50%, 100% { background: #fff48a; box-shadow: 0 0 12px 3px rgba(255, 212, 0, 0.9); }
}

/* ============================================================================
   Pestana EVOLUCION — todo en una sola pantalla (sin scroll exterior)
   ============================================================================ */
/* Para esta pestana el panel deja de ser rejilla y se vuelve un contenedor de
   alto fijo que su hijo .evol-panel rellena al 100%. */
.panel.panel-evolucion,
.panel:has(.evol-panel) {
  display: block;
  overflow: hidden;
  padding: 0.6rem 1rem;
}

/* Pestanas que incrustan otra pagina (Informe, Meta-debriefing) en un iframe. */
.panel.panel-iframe { display: block; overflow: hidden; padding: 0; }
.iframe-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.iframe-barra { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.7rem; border-bottom: 1px solid var(--c-border); font-size: 0.85rem; color: var(--c-muted); }
.iframe-barra a { margin-left: auto; text-decoration: none; }
.iframe-panel { flex: 1 1 0; min-height: 0; width: 100%; border: 0; background: var(--c-bg); }
.evol-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Cabecera (titulo + ayuda) en una linea */
/* Cabecera común de sección (mismo patrón en Evolución/Sonidos/Biblioteca/Sesión/Debrief/Dispositivos). */
.evol-cabe, .snd-cabe, .biblio-cabe, .sesion-cabe, .debrief-cabe, .disp-cabe { flex: 0 0 auto; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.evol-titulo { font-size: 1.05rem; font-weight: bold; color: var(--c-titulo2); }
.evol-ayuda { font-size: 0.8rem; color: var(--c-muted); line-height: 1.4; }

/* Evolucion en 3 COLUMNAS: Variables | Empeoramiento | Mejoria, con toolbar arriba. */
.evol-toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--c-border); }
.evol-cuerpo { flex: 1 1 0; min-height: 0; display: flex; gap: 0.5rem; }
.evol-cuerpo.evol-3col { flex-direction: row; align-items: stretch; }
.evol-col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; }
.evol-col-vars { flex: 1.4 1 0; }
.evol-col-det, .evol-col-mej { border-left: 1px solid var(--c-border); padding-left: 0.5rem; }
.evol-col-tit { position: sticky; top: 0; z-index: 1; flex: 0 0 auto; background: var(--c-surface); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); padding: 0.25rem 0.3rem; border-bottom: 1px solid var(--c-border); }
.evol-col-tit.det { color: #ff9b9b; }
.evol-col-tit.mej { color: #9be0a8; }
.evol-col-vars .evol-grid { grid-template-columns: 1fr; }
/* Variables agrupadas en desplegables (menos contaminacion visual). */
.evol-grupo-var { border: 1px solid var(--c-border); border-radius: 8px; margin-bottom: 0.35rem; padding: 0 0.4rem; background: var(--c-canvas); }
.evol-grupo-var[open] { padding-bottom: 0.35rem; }
.evol-grupo-var .evol-grid { flex: none; overflow: visible; min-height: 0; }
.evol-grupo-var-sum { list-style: none; cursor: pointer; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.4rem 0.1rem; user-select: none; }
.evol-grupo-var-sum::-webkit-details-marker { display: none; }
.evol-grupo-var-sum::before { content: "▸"; display: inline-block; width: 1.1em; opacity: 0.85; }
.evol-grupo-var[open] > .evol-grupo-var-sum::before { content: "▾"; }
/* (estilos antiguos de tarjetas, sin uso tras pasar a columnas) */
.evol-grupo { display: flex; flex-direction: column; gap: 0.3rem; }
.evol-grupo-tit {
  font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--c-border); color: var(--c-muted);
}
.evol-grupo-det { border-color: #4a2c2c; }
.evol-grupo-det .evol-grupo-tit { color: #ff9b9b; }
.evol-grupo-mej { border-color: #2c4a3c; }
.evol-grupo-mej .evol-grupo-tit { color: #9be0a8; }
.evol-grupo-mis .evol-grupo-tit { color: #ffd24a; }
/* PCR/Masaje/Atajos: critico -> arriba del todo, a todo el ancho. */
.evol-grupo-pcr { order: -1; flex-basis: 100%; }
.evol-grupo-pcr .evol-grupo-tit { color: #ff8a8a; }
.evol-subgrupo { display: flex; flex-direction: column; gap: 0.2rem; }
.evol-grupo .evol-cat { margin: 0.1rem 0 0 0.1rem; }
.evol-grupo .botones-intervencion { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.evol-grupo .botones-intervencion button { font-size: 0.8rem; padding: 0.3rem 0.55rem; }
.evol-grupo-pcr .evol-pcr { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.evol-grupo-pcr .evol-crear-btn { align-self: flex-start; }
/* Pantallas estrechas: variables arriba, acciones debajo (altura limitada + scroll). */
/* Barra de tiempo por defecto + casilla "todas" */
.evol-tdefault {
  flex: 0 0 auto;
  min-width: 0;                 /* no desbordar la columna izquierda */
  display: flex;
  flex-wrap: wrap;              /* si no cabe, baja de linea (no se monta sobre la derecha) */
  align-items: center;
  gap: 0.3rem 0.4rem;
  font-size: 0.82rem;
  color: var(--c-muted);
}
.evol-panel .evol-tdefault .fe-num { width: 4rem; flex: 0 0 auto; }
.evol-todo { display: flex; align-items: center; gap: 0.3rem; color: var(--c-titulo2); cursor: pointer; }

/* Rejilla de variables: tantas columnas como quepan */
.evol-grid {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0.3rem 0.5rem;
}
/* Una variable = ojo + casilla + nombre + ACTUAL + → + objetivo + segundos */
.evol-cel {
  display: grid;
  grid-template-columns: auto auto minmax(64px, 1fr) auto auto 54px 54px auto auto;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  cursor: pointer;
}
.evol-aplicar {
  font-size: 0.8rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer;
  color: #9be0a8; background: #0e1a14; border: 1px solid #2c4a3c; border-radius: 6px;
}
.evol-aplicar:hover { background: #15281f; }
.evol-ojo {
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.15rem 0.25rem;
  border: 1px solid var(--c-border2);
  border-radius: 6px;
  background: var(--c-bg);
  cursor: pointer;
  opacity: 0.5;            /* oculto: atenuado */
  filter: grayscale(1);
}
.evol-ojo.on {
  opacity: 1;
  filter: none;
  border-color: var(--c-acento);
  background: rgba(90, 155, 230, 0.22);  /* visible para el alumno: realce azul tenue */
}
.evol-cel .fe-actual {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--c-acento);        /* valor actual EN VIVO, destacado */
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
  text-align: right;
}
.evol-cel .fe-nombre {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Selector de variables: boton + MODAL (no se solapa con nada) */
.evol-vars-btn { flex: 0 0 auto; align-self: flex-start; }
.vars-caja { max-width: min(94vw, 860px); width: 94vw; text-align: left; }
.vars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; max-height: 60vh; overflow-y: auto; padding: 0.2rem; }
.vars-grupo { display: flex; flex-direction: column; gap: 0.15rem; border: 1px solid var(--c-border); border-left: 3px solid var(--cc, #9aa3af); border-radius: 8px; padding: 0.4rem 0.5rem; }
.vars-grupo-h { font-weight: 700; font-size: 0.82rem; color: var(--cc, #cfe3ff); display: flex; align-items: center; gap: 0.3rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--c-border); cursor: pointer; }
.vars-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; color: var(--c-text); cursor: pointer; }
.vars-acc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0; }
.vars-fila { justify-content: flex-end; }
.evol-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.evol-cel .fe-flecha { color: var(--c-muted2); font-size: 0.8rem; }
.evol-cel .fe-seg { font-size: 0.72rem; color: var(--c-muted); }
.evol-cel input[type="checkbox"] { width: 17px; height: 17px; }

/* Panel "CASO EN DESARROLLO" (pestana Evolucion): resumen del caso cargado. */
.cd-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-acento); border-radius: 10px; padding: 0.5rem 0.7rem; margin-bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cd-cab { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cd-tit { font-size: 1rem; color: var(--c-titulo); }
.cd-mod { font-size: 0.72rem; color: #f1c40f; font-weight: 600; }
.cd-acc { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cd-cerrar { color: #e57373; }
.cd-grupo { font-size: 0.75rem; color: var(--c-muted); background: var(--c-canvas); border: 1px solid var(--c-border); border-radius: 999px; padding: 0.05rem 0.5rem; }
.cd-ctx { font-size: 0.85rem; }
.cd-ctx summary { cursor: pointer; color: var(--c-muted); }
.cd-ctx-cuerpo { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem 0.2rem 0; color: var(--c-text); }
.cd-ctx-libre { color: var(--c-muted); font-style: italic; white-space: pre-wrap; line-height: 1.5; margin-top: .3rem; }
.cd-escena { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: var(--c-canvas); border-radius: 8px; padding: 0.35rem 0.55rem; }
.cd-escena-info { color: var(--c-titulo); }
.cd-escena-timer { font-variant-numeric: tabular-nums; color: var(--c-acento); font-weight: 600; }
.cd-escena-adv, .cd-escena-run { margin-left: auto; }
.cd-vars { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.cd-vars-lab { font-size: 0.8rem; color: var(--c-muted); }
.cd-var-chip { font-size: 0.75rem; color: var(--c-text); background: var(--c-canvas); border: 1px solid var(--c-border); border-radius: 999px; padding: 0.05rem 0.5rem; }
.cd-vars-vacio { font-size: 0.8rem; color: var(--c-muted); }
/* Complementarios del caso (D1) */
.cd-comp { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed var(--c-border); }
.cd-comp-cab { display: flex; align-items: center; gap: 0.4rem; }
.cd-comp-lab { font-size: 0.8rem; color: var(--c-muted); }
.cd-comp-add { font-size: 0.72rem; }
.cd-comp-fila { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.cd-comp-chip { display: inline-flex; align-items: center; gap: 0.15rem; }
.cd-comp-del { border: none; background: transparent; color: var(--c-muted); cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0 0.15rem; }
.cd-comp-del:hover { color: var(--c-danger, #c0392b); }
.cd-comp-act { border: 1px solid var(--c-border); background: var(--c-canvas); color: var(--c-text); cursor: pointer; font-size: 0.75rem; line-height: 1; border-radius: 6px; padding: 0.1rem 0.3rem; }
.cd-comp-act.activa { background: #2ee6a6; color: #04121a; border-color: #2ee6a6; font-weight: bold; }
.cd-comp-sug { margin-top: 0.4rem; font-size: 0.82rem; }
.cd-comp-sug > summary { cursor: pointer; color: var(--c-muted); }
.cd-comp-sug-lista { margin: 0.3rem 0 0.2rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.cd-comp-sug-lista li { color: var(--c-text); }
.cd-guardar { background: #1e6f52; color: #eafff5; border-color: #2ee6a6; }
.cd-guardar.pendiente { animation: cdGuardarPulso 1.1s ease-in-out infinite; }
@keyframes cdGuardarPulso { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.comp-sel-tag { margin-left: 0.4rem; font-size: 0.72rem; color: #4fd1ff; }
.comp-sel-fila { display: flex; align-items: center; gap: 0.4rem; }
.comp-sel-fila .item-mipanel { flex: 1 1 auto; min-width: 0; margin: 0; }
.comp-sel-del { flex: 0 0 auto; }
/* Rejilla compacta de variables monitorizadas en el editor de caso */
.ce-vars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.1rem 0.6rem; margin: 0.3rem 0 0.6rem; max-height: 240px; overflow-y: auto; padding: 0.2rem; border: 1px solid var(--c-border); border-radius: 8px; }
.ce-var-chk { font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; }

/* Regla BASE de .fe-num: garantiza aspecto de campo aunque el input este fuera
   de un contexto con estilo propio (p.ej. el nombre de escena en el modal). */
.fe-num {
  background: var(--c-canvas);
  color: var(--c-text);
  border: 1px solid #2a3550;
  border-radius: 5px;
  padding: 0.22rem 0.34rem;
  box-sizing: border-box;
  font: inherit;
}

/* Inputs numericos pequenos (compartidos en la pestana) */
.evol-panel .fe-num {
  width: 100%;
  box-sizing: border-box;
  padding: 0.22rem 0.3rem;
  background: var(--c-canvas);
  color: var(--c-text);
  border: 1px solid #2a3550;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.82rem;
  text-align: center;
}

/* Columna lateral: etiquetas, PCR, creador plegado */
.evol-etq {
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  color: var(--c-muted2);
  margin-top: 0.2rem;
}
.evol-side .botones-intervencion { gap: 0.3rem; }
.evol-side .botones-intervencion button { font-size: 0.82rem; padding: 0.3rem 0.5rem; }
/* Subtitulo por DISPOSITIVO dentro de Deterioro/Mejora (Respirador, ECMO...) */
.evol-cat {
  width: 100%; font-size: 0.66rem; font-weight: bold; letter-spacing: 0.05rem;
  text-transform: uppercase; color: var(--c-acento); opacity: 0.85; margin: 0.25rem 0 0.05rem 0.3rem;
}
.evol-side .evol-cat { flex: 1 1 100%; }
.btn-x { flex: 0 0 auto; }
.evol-pcr { display: flex; gap: 0.4rem; align-items: center; }
.evol-pcr select { flex: 1 1 auto; min-width: 0; }
.btn-pcr-mini { font-size: 0.95rem; padding: 0.35rem 0.7rem; flex: 0 0 auto; }
.evol-crear { margin-top: 0.3rem; }
.evol-crear summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--c-titulo);
  padding: 0.3rem 0;
}
.evol-crear .evol-nom { margin: 0.3rem 0; text-align: left; }
.evol-add { display: flex; gap: 0.3rem; align-items: center; margin: 0.3rem 0; }
.evol-add select { flex: 1 1 auto; min-width: 0; }
.evol-add .fe-num { width: 52px; flex: 0 0 auto; }
/* ----- Escala UNIFICADA de botones de accion pequenos (listas/tarjetas) -----
   .mas/.menos heredaban el boton base (1rem) y desentonaban al lado de .btn-mini
   (0.82rem). Se igualan todos. Los contextos con tamano propio (intervencion,
   controles +/-, evolucion) tienen mayor especificidad y conservan el suyo. */
.mas, .menos, .btn-mini, .btn-x { font-size: 0.82rem; padding: 0.3rem 0.6rem; border-radius: 7px; line-height: 1.15; }
.btn-x { padding: 0.3rem 0.5rem; }

/* Barra inferior fija: Detener + Actualizar */
.evol-barra {
  flex: 0 0 auto;
  display: flex;
  gap: 0.6rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--c-border);
}
.boton-detener {
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: #ffd24a;
  background: #1a1810;
  border: 1px solid #4a4225;
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.boton-detener:hover { background: #2a2614; }
.boton-estabilizar {
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: var(--c-titulo);
  background: #10202e;
  border: 1px solid #2c4a6a;
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.boton-estabilizar:hover { background: #16304a; }
.boton-actualizar {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-bg);
  background: var(--c-acento);
  border: 1px solid #3f7fd1;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  flex: 1 1 auto;
}
.boton-actualizar:hover { background: #7db4ee; }
.boton-actualizar:active { transform: scale(0.99); }


/* ============================================================================
   Pestana SONIDOS — todo en una sola pantalla
   ============================================================================ */
.panel.panel-sonidos,
.panel:has(.sonidos-panel) {
  display: block;
  overflow: hidden;
  padding: 0.6rem 1rem;
}
.sonidos-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Barra de los dos canales */
.snd-canales { flex: 0 0 auto; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.snd-canal {
  flex: 1 1 280px;
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}
.snd-canal-tit { font-size: 0.85rem; font-weight: bold; color: var(--c-titulo); margin-bottom: 0.3rem; }
.snd-canal-fila { display: flex; align-items: center; gap: 0.5rem; }
.snd-salida { flex: 1 1 auto; min-width: 0; }
.snd-vol { flex: 0 0 90px; }

/* Cuerpo: biblioteca (izq) + lateral (der) */
/* Barra de herramientas (editar, nuevo, intercom, micro, parar) */
.snd-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.snd-intercom {
  font-family: inherit;
  font-weight: bold;
  color: var(--c-titulo2);
  background: var(--c-btn);
  border: 1px solid #2c4a6a;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.snd-intercom.hablando { background: var(--c-peligro); border-color: #ff6b6b; color: #fff; }
.btn-mini.grabando { background: var(--c-peligro); color: #fff; border-color: #ff6b6b; }

/* Editor de un sonido */
.snd-editor {
  flex: 0 0 auto;
  background: var(--c-surface);
  border: 1px solid #2c4a6a;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.snd-editor-tit { font-weight: bold; color: var(--c-titulo); }
.snd-editor-fila { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.snd-ed-nom { flex: 1 1 150px; min-width: 0; text-align: left; }
.snd-ed-emoji { width: 64px; text-align: center; }
.snd-ed-estado { font-size: 0.82rem; color: var(--c-muted); }
.snd-ed-guardar { flex: 0 0 auto; padding: 0.5rem 1.2rem; }
.snd-ed-quitar { margin-left: auto; padding: 0.5rem 1rem; }

/* Rejilla de tarjetas de sonido */
.snd-lib {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0.5rem;
}
.snd-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.4rem 0.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  color: var(--c-text);
  cursor: pointer;
  touch-action: manipulation;
}
.snd-card:hover { background: var(--c-btn); }
.snd-card:active { transform: scale(0.98); }
.snd-card.sel { border-color: var(--c-titulo); box-shadow: inset 0 0 0 1px var(--c-titulo); }
.snd-card.activo { background: #16384a; border-color: var(--c-acento); color: var(--c-acento); }
.snd-loop { border-style: dashed; }
.snd-ico { font-size: 1.8rem; line-height: 1; height: 1.9rem; display: flex; align-items: center; justify-content: center; }
.snd-ico img { max-height: 1.9rem; max-width: 100%; border-radius: 4px; }
.snd-card .snd-nom { font-size: 0.82rem; text-align: center; }
.snd-card .snd-can { font-size: 0.66rem; color: var(--c-muted2); }
.snd-card.activo .snd-can { color: var(--c-acento); }
.snd-sel-btn { margin-top: 0.25rem; font-size: 0.72rem; padding: 0.2rem 0.4rem; width: 100%; }
.snd-sel-btn.activo { background: #16304a; color: var(--c-titulo); border-color: #2c4a6a; }

/* ============================================================================
   Pestanas ANALITICA / RX (biblioteca de resultados e imagenes)
   ============================================================================ */
.panel.panel-biblio,
.panel:has(.biblio-panel) {
  display: block;
  overflow: hidden;
  padding: 0.6rem 1rem;
}
.biblio-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.biblio-crear { flex: 0 0 auto; }
.biblio-crear summary { cursor: pointer; font-size: 0.95rem; color: var(--c-titulo); padding: 0.3rem 0; }
.biblio-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.biblio-form .biblio-inp { flex: 1 1 200px; min-width: 0; text-align: left; }
.biblio-file { flex: 1 1 160px; min-width: 0; color: var(--c-muted); }
.biblio-btn-crear { flex: 0 0 auto; padding: 0.5rem 1.2rem; font-size: 1rem; }

/* Cuerpo agrupado (scroll interno solo aqui) */
.biblio-cuerpo { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.biblio-grupo { margin-top: 0.3rem; }
.biblio-grupo-tit {
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  color: var(--c-acento);
  border-bottom: 1px solid var(--c-border);
  padding: 0.35rem 0.3rem 0.25rem;
  cursor: pointer;
  list-style: none;               /* quitamos el triángulo nativo, ponemos el nuestro */
  display: flex; align-items: center; gap: 0.4rem;
  border-radius: 6px 6px 0 0;
}
.biblio-grupo-tit::-webkit-details-marker { display: none; }
.biblio-grupo-tit::before { content: "▸"; color: var(--c-muted); transition: transform 0.15s; font-size: 0.85em; }
.biblio-grupo[open] > .biblio-grupo-tit::before { transform: rotate(90deg); }
.biblio-grupo-tit:hover { background: var(--c-surface); }
.biblio-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.45rem;
  padding: 0.4rem 0;
}
.biblio-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.biblio-card-bloq { opacity: 0.55; filter: grayscale(0.5); }

/* --- Perifericos del centro (camara IP / altavoz / sensores) --- */
/* Pestana Perifericos: ocupa el alto, en 2 columnas tipo tarjeta (cada una
   scrollea solo si su contenido crece; la pagina no scrollea). */
.panel.panel-perif { display: block; overflow: hidden; padding: 0.5rem 0.9rem; }
.perif-cont { height: 100%; min-height: 0; display: flex; gap: 0.8rem; }
.perif-col {
  flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 12px; padding: 0.5rem 0.8rem 0.7rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.perif-col-tit {
  font-weight: 700; font-size: 0.8rem; color: var(--c-acento);
  text-transform: uppercase; letter-spacing: 0.04rem;
  border-bottom: 1px solid var(--c-border); padding-bottom: 0.35rem; margin-bottom: 0.1rem;
}
@media (max-width: 760px) {
  .perif-cont { flex-direction: column; overflow-y: auto; }
  .perif-col { overflow: visible; }
}
.perif-alta {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; padding: 0.7rem;
}
.perif-alta-fila { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.perif-campos { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.perif-campo { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; color: var(--c-muted); }
.perif-inp { min-width: 9rem; }
.perif-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.5rem; align-items: stretch; }
.perif-grupo-tit { grid-column: 1 / -1; font-weight: 600; color: var(--c-text); margin-top: 0.5rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; border-left: 3px solid var(--c-acento); padding-left: 0.45rem; }
/* B5: dos columnas (kit / destinos) diferenciadas por color; tarjetas de igual altura por fila. */
.perif-cont > .perif-col:nth-of-type(1) .perif-col-tit { color: hsl(210, 75%, 64%); border-bottom-color: hsla(210, 75%, 55%, 0.5); }
.perif-cont > .perif-col:nth-of-type(1) .perif-grupo-tit { border-left-color: hsl(210, 70%, 55%); }
.perif-cont > .perif-col:nth-of-type(2) .perif-col-tit { color: hsl(152, 60%, 56%); border-bottom-color: hsla(152, 60%, 48%, 0.5); }
.perif-cont > .perif-col:nth-of-type(2) .perif-grupo-tit { border-left-color: hsl(152, 55%, 48%); }
/* Una tarjeta que se EXPANDE (editar / emparejar móvil) ocupa toda la fila para tener sitio. */
.perif-fila-abierta { grid-column: 1 / -1; }
.perif-lista > .evol-ayuda { grid-column: 1 / -1; }
/* Fondo de PÁGINA (no surface) para que la tarjeta resalte dentro de la columna surface. */
.perif-fila {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.45rem;
}
/* Realce suave compartido por todas las tarjetas de las bibliotecas. */
.eval-chk-card, .curso-card, .caso-card, .disp-guardado, .perif-fila { transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
.eval-chk-card:hover, .curso-card:hover, .caso-card:hover, .disp-guardado:hover, .perif-fila:hover {
  border-color: var(--c-border3, var(--c-acento)); box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
.perif-fila-bloq { opacity: 0.6; }
.perif-fila-cab { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
.perif-nom { font-weight: 600; }
.perif-acc { display: flex; gap: 0.35rem; flex-wrap: wrap; }
/* Cuando la tarjeta se expande a todo el ancho, recupera la fila horizontal. */
.perif-fila-abierta .perif-fila-cab { flex-direction: row; align-items: center; flex-wrap: wrap; }
.perif-fila-abierta .perif-acc { margin-left: auto; }
/* Tarjeta de DESTINO compacta: horizontal, ancho completo, todo en una linea
   (icono pequeno en el nombre, tipo y botones Probar/Editar/quitar en linea). */
.alm-card { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 0.4rem 0.6rem; }
.alm-card .perif-fila-cab { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
.alm-card .perif-acc { margin-left: auto; flex-wrap: nowrap; }
.perif-badge { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid transparent; }
.perif-est-off  { color: var(--c-muted); border-color: var(--c-border); }
.perif-est-warn { color: #c98a00; border-color: #c98a0055; }
.perif-est-ok   { color: #1f9d55; border-color: #1f9d5555; }
.perif-est-err  { color: #d23; border-color: #d2333355; }
/* Camara-movil: panel de emparejamiento + visor en directo */
.perif-movil { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 0.2rem; border-top: 1px dashed var(--c-border); }
.perif-movil-ayuda { font-size: 0.8rem; color: var(--c-muted); }
.perif-movil-fila { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.perif-movil-qr { width: 160px; height: 160px; background: #fff; border-radius: 8px; padding: 6px; align-self: flex-start; }
/* Explorador de carpetas del servidor (destino disco) */
.fs-lista { display: flex; flex-direction: column; gap: 0.2rem; max-height: 46vh; overflow-y: auto; margin: 0.4rem 0; }
.fs-item { text-align: left; font-family: inherit; font-size: 0.9rem; cursor: pointer; border: 1px solid var(--c-border); background: var(--c-btn); color: var(--c-text); border-radius: 6px; padding: 0.3rem 0.5rem; }
.fs-item:hover { background: var(--c-btn-hover); }
.cam-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.cam-modal-caja { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 92vw; max-height: 90vh; }
.cam-modal-tit { font-weight: 600; }
.cam-modal-video { width: min(80vw, 900px); max-height: 70vh; background: #000; border-radius: 8px; }
.cam-modal-est { font-size: 0.82rem; color: var(--c-muted); }
.grab-rotulo { font-size: 0.8rem; color: var(--c-muted); margin-top: 0.4rem; font-weight: 600; }
/* Tira de miniaturas de camaras en directo (Evolucion) */
.cam-tira { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.3rem 0.1rem; }
.cam-mini { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.2rem; }
.cam-mini-video { width: 160px; height: 90px; object-fit: cover; background: #000; border-radius: 8px; border: 1px solid var(--c-border); cursor: pointer; }
.cam-mini-pie { font-size: 0.72rem; color: var(--c-muted); text-align: center; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Clips de video en el debriefing */
.debrief-clips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.debrief-clip { display: flex; flex-direction: column; gap: 0.15rem; }
.debrief-clip-video { width: 220px; max-height: 140px; background: #000; border-radius: 6px; }
.debrief-clip-et { font-size: 0.72rem; color: var(--c-muted); }
.debrief-clip-arc { font-size: 0.68rem; }
.debrief-clip-ext { width: 220px; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--c-canvas); border: 1px dashed var(--c-border2); border-radius: 6px; color: var(--c-muted); font-size: 0.78rem; padding: 0.3rem; }
.biblio-grupos-chips { display: flex; flex-wrap: wrap; gap: .35rem; width: 100%; margin-top: .3rem; }
.biblio-grupo-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; background: rgba(120,180,255,.12); border: 1px solid var(--c-border2); border-radius: 999px; padding: .12rem .2rem .12rem .55rem; }
/* Botón ⛶ (ver en grande) en la esquina del thumbnail. */
.biblio-card { position: relative; }
.biblio-fs { position: absolute; top: 6px; right: 6px; z-index: 2; background: rgba(0,0,0,.55); color: #fff;
  border: 0; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1; }
.biblio-fs:hover { background: rgba(0,0,0,.8); }
/* Visor GRANDE (imagen/GIF/vídeo) casi a pantalla completa. */
.media-grande { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; }
.media-grande-el { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 6px; background: #000; }
.media-grande-x { position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,.12); color: #fff;
  border: 0; border-radius: 8px; width: 40px; height: 40px; font-size: 20px; cursor: pointer; }
.media-grande-fs { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 8px; padding: .5rem 1rem; cursor: pointer; }
/* ===== Visita guiada (tour) ===== */
.tour-ov { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.tour-ov.sinfoco { background: rgba(0,0,0,.62); pointer-events: auto; }
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.62), 0 0 0 3px #4fd1a1 inset; outline: 2px solid #4fd1a1; transition: all .25s ease; pointer-events: none; }
.tour-card { position: fixed; z-index: 100001; width: min(92vw, 330px); background: var(--c-surface, #16202c); color: var(--c-texto, #e9eef4);
  border: 1px solid #4fd1a1; border-radius: 12px; padding: .8rem .9rem; box-shadow: 0 12px 40px rgba(0,0,0,.5); pointer-events: auto; }
.tour-tit { font-weight: 800; font-size: 1.02rem; margin-bottom: .25rem; }
.tour-txt { font-size: .88rem; line-height: 1.45; opacity: .95; }
.tour-acc { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.tour-n { font-size: .78rem; opacity: .7; }
.tour-btns { display: flex; gap: .35rem; }
.tour-btns button { border: 1px solid var(--c-border2, #2b3a4a); background: rgba(120,180,255,.14); color: inherit; border-radius: .5rem; padding: .3rem .6rem; cursor: pointer; font-size: .82rem; }
.tour-next { background: #2f9e6e !important; border-color: #2f9e6e !important; color: #fff !important; font-weight: 700; }
.tour-skip { opacity: .8; }
/* Menú del asistente (¿qué quieres hacer?) */
.tour-menu { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100001;
  width: min(94vw, 440px); max-height: 86vh; overflow-y: auto; background: var(--c-surface, #16202c);
  color: var(--c-texto, #e9eef4); border: 1px solid #4fd1a1; border-radius: 14px; padding: 1rem; box-shadow: 0 14px 44px rgba(0,0,0,.55); }
.tour-menu-tit { font-weight: 800; font-size: 1.05rem; margin-bottom: .6rem; }
.tour-menu-it { display: block; width: 100%; text-align: left; margin: .3rem 0; padding: .6rem .7rem; cursor: pointer;
  border: 1px solid var(--c-border2, #2b3a4a); background: rgba(120,180,255,.10); color: inherit; border-radius: 10px; font-size: .92rem; }
.tour-menu-it:hover { background: rgba(79,209,161,.16); border-color: rgba(79,209,161,.5); }
.tour-menu-pie { margin-top: .7rem; font-size: .85rem; opacity: .9; display: flex; justify-content: space-between; align-items: center; }
.tour-menu-pie button { background: none; border: 1px solid var(--c-border2,#2b3a4a); color: inherit; border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
/* Modo claro: forzar contraste legible en el asistente (tarjetas + menú). */
body.tema-claro .tour-card, body.tema-claro .tour-menu { background: #ffffff; color: #14202c; border-color: #2f9e6e; }
body.tema-claro .tour-tit, body.tema-claro .tour-txt, body.tema-claro .tour-menu-tit, body.tema-claro .tour-n { color: #14202c; }
body.tema-claro .tour-menu-it { color: #14202c; background: rgba(30,110,180,.08); border-color: #cdd7e0; }
body.tema-claro .tour-menu-it:hover { background: rgba(47,158,110,.15); }
body.tema-claro .tour-btns button, body.tema-claro .tour-menu-pie button, body.tema-claro .tour-menu-pie a { color: #14202c; }
.tour-menu-it.destacada { background: rgba(79,209,161,.18); border-color: rgba(79,209,161,.55); font-weight: 600; }
/* Chat de ayuda con IA (fallback del asistente) */
.tour-chat { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100001;
  width: min(94vw, 480px); max-height: 88vh; display: flex; flex-direction: column; background: var(--c-surface, #16202c);
  color: var(--c-texto, #e9eef4); border: 1px solid #4fd1a1; border-radius: 14px; padding: 1rem; box-shadow: 0 14px 44px rgba(0,0,0,.55); }
.tour-chat-nota { font-size: .8rem; opacity: .85; margin: .2rem 0 .5rem; line-height: 1.35; }
.tour-chat-log { flex: 1 1 auto; min-height: 8rem; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; padding: .3rem 0; }
.tour-chat-msg { max-width: 88%; padding: .5rem .7rem; border-radius: 12px; font-size: .9rem; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.tour-chat-msg.user { align-self: flex-end; background: rgba(79,209,161,.20); border: 1px solid rgba(79,209,161,.4); }
.tour-chat-msg.assistant { align-self: flex-start; background: rgba(120,180,255,.12); border: 1px solid var(--c-border2,#2b3a4a); }
.tour-chat-msg.pend { align-self: flex-start; opacity: .7; font-style: italic; }
.tour-chat-msg.error { align-self: flex-start; background: rgba(230,90,80,.15); border: 1px solid rgba(230,90,80,.5); }
.tour-chat-fila { display: flex; gap: .4rem; align-items: flex-end; margin-top: .5rem; }
.tour-chat-in { flex: 1 1 auto; resize: vertical; min-height: 2.4rem; padding: .45rem .6rem; border-radius: 10px;
  border: 1px solid var(--c-border2,#2b3a4a); background: var(--c-bg,#0e1620); color: inherit; font: inherit; }
.tour-chat-env { flex: 0 0 auto; padding: .5rem .8rem; border-radius: 10px; border: 1px solid rgba(79,209,161,.55);
  background: rgba(79,209,161,.2); color: inherit; cursor: pointer; font-weight: 600; }
.tour-chat-env:disabled { opacity: .5; cursor: default; }
.tour-chat-recetas { background: none; border: 1px solid var(--c-border2,#2b3a4a); color: inherit; border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
body.tema-claro .tour-chat { background: #ffffff; color: #14202c; border-color: #2f9e6e; }
body.tema-claro .tour-chat-msg.assistant { background: rgba(30,110,180,.08); border-color: #cdd7e0; }
body.tema-claro .tour-chat-in { background: #f4f7fa; color: #14202c; border-color: #cdd7e0; }
body.tema-claro .tour-chat-recetas, body.tema-claro .tour-chat-nota { color: #14202c; }
/* Cámara local (HDMI/USB) en la pestaña Grabación: preview en directo + cabecera */
.cam-local-box { margin: .45rem 0; border: 1px solid var(--c-border2,#2b3a4a); border-radius: 10px; overflow: hidden; background: #000; }
.cam-local-cab { display: flex; align-items: center; gap: .5rem; padding: .3rem .55rem; background: var(--c-surface,#16202c); font-size: .86rem; }
.cam-local-cab .cam-mini-est { margin-left: auto; font-size: .78rem; color: var(--c-muted,#8b98a5); white-space: nowrap; }
.cam-local-cab .mini-x { border: 1px solid var(--c-border2,#2b3a4a); background: none; color: inherit; border-radius: 8px; padding: .2rem .5rem; cursor: pointer; font-size: .78rem; }
.cam-local-cab .mini-x:hover { background: rgba(230,90,80,.16); border-color: rgba(230,90,80,.5); }
.cam-local-vid { width: 100%; max-height: 320px; display: block; background: #000; object-fit: contain; }
/* "Configurar qué ver": diseñador de distribuciones de proyección */
.proy-wrap { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.proy-col { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
/* Reparto ~50/50: distribución/recuadros a la izquierda, VISTA PREVIA GRANDE a la derecha
   (hasta la mitad del ancho de pantalla para ver bien el montaje). */
.proy-wrap > .proy-col:first-child { flex: 1 1 26rem; }
.proy-wrap > .proy-col:last-child { flex: 1 1 26rem; max-width: 50%; }
.proy-celdas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .35rem .6rem; margin-top: .2rem; }
.proy-celdas-grid .proy-celda-fila { margin: 0; }
.proy-celdas-grid .proy-desfib-pick { grid-column: 1 / -1; }
.proy-dists { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0; }
.proy-dist-b { padding: .3rem .6rem; border: 1px solid var(--c-border2,#2b3a4a); background: rgba(120,180,255,.08); color: inherit; border-radius: 8px; cursor: pointer; font-size: .82rem; }
.proy-dist-b.sel { background: rgba(79,209,161,.2); border-color: rgba(79,209,161,.55); font-weight: 600; }
.proy-celda-fila { display: flex; align-items: center; gap: .4rem; margin: .2rem 0; font-size: .88rem; }
/* Selector de constantes del desfibrilador (E1) */
.proy-desfib-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .1rem 0 .5rem 1.2rem; font-size: .82rem; color: var(--c-muted); }
.proy-desfib-op { display: inline-flex; align-items: center; gap: .2rem; color: var(--c-text); }
/* QR ampliado (E2) */
.qr-zoom-modal { z-index: 4000; }
.qr-zoom-caja { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.qr-zoom-img { width: min(80vmin, 560px); height: auto; background: #fff; padding: .6rem; border-radius: 12px; }
.qr-zoom-url { font-size: .75rem; color: var(--c-muted); word-break: break-all; max-width: min(80vmin, 560px); text-align: center; }
.proy-acc { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.proy-guardada { display: flex; align-items: center; gap: .4rem; margin: .2rem 0; font-size: .85rem; }
.proy-guardada-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proy-prev { display: grid; gap: 3px; width: 100%; aspect-ratio: 16/9; background: #05070d; padding: 3px; border-radius: 8px; border: 1px solid var(--c-border2,#2b3a4a); }
.proy-prev.d-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.proy-prev.d-2h { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.proy-prev.d-2v { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.proy-prev.d-2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.proy-prev.d-3x3 { grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); }
.proy-prev.d-medioCuartos { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
.proy-prev.d-medioCuartos > .proy-prev-c:nth-child(1) { grid-row: 1/3; }
.proy-prev-c { background: rgba(120,180,255,.10); border: 1px solid var(--c-border2,#2b3a4a); border-radius: 5px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .72rem; color: var(--c-titulo,#cfe0f5); padding: .2rem; overflow: hidden; }
.mini-x { border: 1px solid var(--c-border2,#2b3a4a); background: none; color: inherit; border-radius: 8px; padding: .2rem .5rem; cursor: pointer; font-size: .78rem; }
.mini-x:hover { background: rgba(230,90,80,.16); border-color: rgba(230,90,80,.5); }
/* ===== Calculadora de presupuestos (super-admin) — dashboard a ancho completo ===== */
/* CLAVE: el .panel base es una rejilla de columnas de 208px; sin esto el panel
   quedaría metido en una sola celda estrecha. display:block = ancho completo. */
.panel:has(.presu-panel), .panel.panel-presupuestos { display: block; overflow-y: auto; padding: .6rem .9rem; }
.presu-panel { width: 100%; }
.presu-cuerpo { display: flex; flex-direction: column; gap: 1.1rem; }
.presu-bloque-cab { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.presu-bloque h3, .presu-bloque-cab h3, .presu-calc h3 { margin: .2rem 0; color: var(--c-titulo); }

/* Tarjetas de plan (4 en fila; se adaptan) */
.presu-planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: .5rem; }
@media (max-width: 1200px) { .presu-planes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .presu-planes { grid-template-columns: 1fr; } }
.presu-plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--c-border2,#2b3a4a); border-radius: 14px; padding: .9rem; background: var(--c-surface); }
.presu-plan.popular { border-color: var(--c-acento,#4fd1a1); box-shadow: 0 0 0 1px var(--c-acento,#4fd1a1) inset; }
.presu-plan-badge { position: absolute; top: -.65rem; right: .8rem; background: var(--c-acento,#4fd1a1); color: #05231a; font-size: .68rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; }
.presu-plan-nom { font-weight: 800; font-size: 1.1rem; color: var(--c-titulo); }
.presu-plan-para { font-size: .78rem; color: var(--c-muted,#8b98a5); min-height: 2.2em; margin: .1rem 0 .3rem; }
.presu-plan-precio { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.presu-plan-anual { font-size: .8rem; color: var(--c-muted,#8b98a5); }
.presu-plan-ia { color: #2f9e6e; font-weight: 700; font-size: .84rem; margin: .45rem 0; padding: .25rem .4rem; background: rgba(79,209,161,.10); border-radius: 8px; }
.presu-plan-feats { margin: .2rem 0 0; padding-left: 1.05rem; font-size: .82rem; color: var(--c-text); line-height: 1.5; }

/* Calculadora: 2 columnas internas (entradas | resultado) */
.presu-calc { border: 1px solid var(--c-border); border-radius: 14px; padding: 1rem; }
.presu-calc-cols { display: grid; grid-template-columns: 1.05fr 1.1fr; gap: 1.3rem; align-items: start; margin-top: .6rem; }
@media (max-width: 920px) { .presu-calc-cols { grid-template-columns: 1fr; } }
.presu-rotulo { font-weight: 700; color: var(--c-titulo); font-size: .9rem; margin: .5rem 0 .3rem; }
.presu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.presu-campo { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.presu-campo-lab { color: var(--c-muted,#8b98a5); }
.presu-campo input { width: 100%; }
.presu-addons { display: flex; flex-direction: column; gap: .35rem; }
.presu-addon { display: flex; align-items: center; gap: .4rem; font-size: .86rem; }
/* Resultado destacado */
.presu-totales { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.presu-tot { border: 1px solid var(--c-border2,#2b3a4a); border-radius: 10px; padding: .55rem .7rem; display: flex; flex-direction: column; }
.presu-tot span { font-size: .74rem; color: var(--c-muted,#8b98a5); }
.presu-tot b { font-size: 1.5rem; }
.presu-tot-anual { background: rgba(79,209,161,.10); border-color: rgba(79,209,161,.45); }
.presu-suelo { font-size: .8rem; color: #e0a030; margin-bottom: .4rem; }
.presu-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.presu-tabla th, .presu-tabla td { border: 1px solid var(--c-border2,#2b3a4a); padding: .32rem .5rem; text-align: left; }
.presu-tabla th { background: rgba(120,180,255,.10); }
.presu-tabla td:last-child, .presu-tabla th:last-child { text-align: right; white-space: nowrap; }
.presu-crit { color: var(--c-muted,#8b98a5); font-size: .8rem; }
.presu-unico { margin: .5rem 0; font-size: .88rem; }
body.tema-claro .presu-tabla th { background: rgba(30,110,180,.08); }
body.tema-claro .presu-plan-badge { color: #063; }
/* Datos del cliente + PDF + solicitudes del formulario */
.presu-cliente { display: flex; flex-direction: column; gap: .4rem; margin: .2rem 0 .6rem; }
.presu-cliente-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .5rem; }
.presu-cliente input, .presu-cliente textarea { width: 100%; }
.presu-pdf { margin-top: .7rem; width: 100%; }
.presu-solis { border-top: 1px solid var(--c-border); padding-top: .7rem; }
.presu-soli-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem; margin-top: .5rem; }
.presu-soli { border: 1px solid var(--c-border2,#2b3a4a); border-radius: 10px; padding: .6rem .7rem; background: var(--c-surface); display: flex; flex-direction: column; gap: .25rem; }
.presu-soli.atendida { opacity: .55; }
.presu-soli-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.presu-soli-fecha { font-size: .73rem; color: var(--c-muted,#8b98a5); white-space: nowrap; }
.presu-soli-l { font-size: .82rem; color: var(--c-text); }
.presu-soli-exp { font-size: .82rem; background: rgba(120,180,255,.08); border-radius: 6px; padding: .3rem .45rem; }
.presu-soli-acc { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; align-items: center; }
.presu-cliente-box h3 { margin: .2rem 0; }
.presu-tacha { text-decoration: line-through; color: var(--c-muted,#8b98a5); font-size: .8rem; margin-left: .45rem; font-weight: 400; }
.presu-cond { background: rgba(255,176,50,.06); border: 1px solid rgba(255,176,50,.35); border-radius: 10px; padding: .5rem .9rem; }
.presu-cond h3 { margin: .1rem 0; }
.presu-cond-lista { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--c-text); line-height: 1.55; }
.presu-comp { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; font-size: .8rem; align-items: center; }
.presu-comp-i { padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--c-border2,#2b3a4a); }
.presu-comp-i.inc { background: rgba(230,90,80,.12); border-color: rgba(230,90,80,.4); }
.presu-comp-i.aho { background: rgba(79,209,161,.12); border-color: rgba(79,209,161,.4); }
.presu-comp-i small { opacity: .8; }
.presu-pay { width: 100%; margin-top: .5rem; }
/* Puente academia: lista de ediciones importadas. */
.academia-lista { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.academia-edi { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  background: rgba(120,180,255,.10); border: 1px solid var(--c-border2); border-radius: .5rem; padding: .3rem .6rem; font-size: .85rem; }
.biblio-filtro { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .3rem 0 .6rem; }
.biblio-filtro select { max-width: 18rem; }
.biblio-filtro input { flex: 1 1 12rem; min-width: 8rem; }
.biblio-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
  cursor: pointer;
  display: block;
}
.biblio-etq { font-size: 0.78rem; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biblio-pac { font-size: 0.7rem; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biblio-mostrar { font-size: 0.74rem; padding: 0.25rem 0.3rem; }
.biblio-del {
  position: absolute;
  /* Arriba-IZQUIERDA para no solaparse con el botón ⛶ de pantalla completa (arriba-derecha). */
  top: 0.5rem; left: 0.5rem;
  z-index: 2;
  background: rgba(11,16,32,0.8);
}
.biblio-mostrar {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--c-bg);
  background: var(--cc, var(--c-acento));
  border: none;
  border-radius: 6px;
  padding: 0.3rem;
  cursor: pointer;
}
.biblio-mostrar:hover { filter: brightness(1.1); }

/* Selector de DESTINO (a que pantalla publicas) — chips por canal */
.pub-wrap { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.4rem; }
.pub-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pub-chips-lab { font-size: 0.82rem; color: var(--c-muted); font-weight: 600; }
.pub-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font: inherit;
  padding: 0.25rem 0.6rem; border-radius: 999px; color: var(--c-text);
  background: var(--c-surface); border: 1.5px solid var(--c-border2);
}
.pub-chip:hover { border-color: var(--cc); }
.pub-chip.on { border-color: var(--cc); box-shadow: inset 0 0 0 1px var(--cc); }
.pub-chip-ic { font-size: 0.95rem; }
.pub-chip-nm { font-weight: 600; font-size: 0.82rem; }
.pub-chip-st { font-size: 0.74rem; color: var(--c-muted); max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Un canal con algo visible: punto de color del canal */
.pub-chip.activo .pub-chip-ic::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--cc); vertical-align: middle; }
.pub-chip.activo .pub-chip-st { color: var(--cc); }

/* Barra de publicacion al alumno */
.biblio-pub {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.6rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--cc, #20465a);
  border-radius: 10px;
  font-size: 0.85rem;
}
.biblio-pub.vacia { color: var(--c-muted); background: var(--c-surface); border-style: dashed; border-color: var(--c-border2); }
.biblio-pub-lab { font-weight: bold; color: var(--c-titulo); }
.biblio-pub-info { color: var(--c-text); min-width: 0; }
.biblio-pub-modo { margin-left: auto; }
.biblio-pub-cerrar { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

/* ============================================================================
   Pestana SESION — una sola pantalla (2 columnas, solo las columnas scrollean)
   ============================================================================ */
.panel.panel-sesion {
  display: block;
  overflow: hidden;
  padding: 0.5rem 0.9rem;
}
.sesion-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Barra de fase del ejercicio (Iniciar/Pausar/Finalizar) */
.fase-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--c-border2);
  background: var(--c-surface);
}
/* Tintes TRANSLUCIDOS (funcionan en claro y oscuro; antes eran casi negros y en
   claro no se leia el texto): en curso=verde, pausa=ambar, fin=rojo. */
.fase-bar.fase-curso { border-color: #2ea87a; background: rgba(46, 230, 166, 0.13); }
.fase-bar.fase-pausa { border-color: #c98a00; background: rgba(241, 196, 15, 0.13); }
.fase-bar.fase-fin { border-color: #d9534f; background: rgba(214, 69, 69, 0.12); }
.fase-etq { font-weight: bold; color: var(--c-titulo2); margin-right: auto; }
.fase-bar.fase-curso .fase-etq { color: #1f9d6b; }
.fase-bar.fase-pausa .fase-etq { color: #a9791a; }
.fase-bar.fase-fin .fase-etq { color: #c2453f; }
body.tema-claro .fase-bar.fase-curso .fase-etq { color: #157a51; }
body.tema-claro .fase-bar.fase-pausa .fase-etq { color: #8a6410; }
body.tema-claro .fase-bar.fase-fin .fase-etq { color: #b3352f; }
.fase-btn {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--c-text);
  background: var(--c-btn);
  border: 1px solid #2c4a6a;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  text-decoration: none;
}
.fase-btn:hover { background: var(--c-btn-hover); }
.fase-btn.iniciar { color: var(--c-bg); background: var(--c-acento); border-color: #3f7fd1; }
.fase-btn.iniciar:hover { background: #7db4ee; }
.fase-btn.finalizar { color: #fff; background: var(--c-peligro); border-color: var(--c-peligro-borde); }
.fase-btn.finalizar:hover { background: #c92a3a; }
.fase-btn.grabando { color: #fff; background: var(--c-peligro); border-color: var(--c-peligro-borde); animation: grab-pulse 1.4s ease-in-out infinite; }
@keyframes grab-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,86,106,0.5); } 50% { box-shadow: 0 0 0 5px rgba(224,86,106,0); } }
.fase-btn.informe { color: var(--c-titulo); }
.sesion-cuerpo { flex: 1 1 0; min-height: 0; display: flex; gap: 0.8rem; }
/* Cada columna como TARJETA, mas agradable visualmente. */
.sesion-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;   /* SOLO la columna scrollea si su contenido crece */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 0.3rem 0.8rem 0.7rem;
}
/* Cabecera de cada seccion: con separador, mas presencia. */
.sesion-col .titulo-param {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.82rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--c-border);
}
/* Secciones agrupadas por color (paleta categorica --gh) en la pestana Sesion.
   Tinte definido + barra lateral saturada + titulo legible = grupos distinguibles. */
.sesion-grupo {
  border-radius: 10px; padding: 0 0.7rem; margin-bottom: 0.5rem;
  border: 1px solid hsl(var(--gh, 210) 40% 50% / 0.45);
  border-left: 4px solid hsl(var(--gh, 210) 70% 56%);
  background: hsl(var(--gh, 210) 60% 46% / 0.13);
}
.sesion-grupo[open] { padding-bottom: 0.6rem; }
.sesion-grupo .titulo-param { border-bottom: none; margin: 0.45rem 0 0.4rem; }
/* Cabecera plegable: en reposo se ve SOLO el titulo; al pulsar se despliega. */
.sesion-grupo-sum { list-style: none; cursor: pointer; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 0.1rem; user-select: none; color: hsl(var(--gh, 210) 68% 74%); }
.sesion-grupo-sum::-webkit-details-marker { display: none; }
.sesion-grupo-sum::before { content: "▸"; display: inline-block; width: 1.1em; font-size: 0.75rem; opacity: 0.9; }
.sesion-grupo[open] > .sesion-grupo-sum::before { content: "▾"; }
.sesion-grupo-sum:hover { filter: brightness(1.2); }
body.tema-claro .sesion-grupo-sum { color: hsl(var(--gh, 210) 62% 34%); }
body.tema-claro .sesion-grupo { background: hsl(var(--gh, 210) 70% 55% / 0.12); }
/* Cabecera de categoria del checklist (color segun lo que evalua). */
.cl-cat-cab {
  font-weight: 700; font-size: 0.82rem; color: var(--c-text);
  padding: 0.25rem 0.5rem; border-radius: 0 6px 6px 0; margin: 0.55rem 0 0.25rem;
}
/* Inputs y selects homogeneos y bonitos en toda la pestana Sesion. */
.panel-sesion input[type="text"],
.panel-sesion select,
.panel-sesion textarea {
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
}
.panel-sesion input[type="text"]:focus,
.panel-sesion select:focus,
.panel-sesion textarea:focus { outline: none; border-color: var(--c-acento); }
.panel-sesion .alta-alumno { gap: 0.4rem; margin: 0.4rem 0; }
.panel-sesion .alta-alumno button { white-space: nowrap; }
/* Listas (alumnos / checklist) como filas con hover. */
.sesion-col .item-mipanel {
  padding: 0.35rem 0.5rem;
  border-radius: 7px;
  background: var(--c-surface);
  margin: 0.2rem 0;
  justify-content: space-between;
}
.sesion-col .item-mipanel:hover { background: var(--c-btn); }
/* "Anadir item" fijo arriba de la columna del checklist al hacer scroll. */
.sesion-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--c-surface);
  padding-bottom: 0.4rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--c-border);
}
.sesion-sticky .titulo-param { margin-top: 0.2rem; }
.sesion-sticky .alta-alumno { margin: 0.3rem 0 0; }
@media (max-width: 760px) {
  .sesion-cuerpo { flex-direction: column; }
}

/* ============================================================================
   Pestana CASOS — una sola pantalla; guardar/importar fijo, lista agrupada
   ============================================================================ */
.panel.panel-casos { display: block; overflow: hidden; padding: 0.5rem 0.9rem; }
.casos-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.casos-sticky { flex: 0 0 auto; }
.ctx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-bottom: 0.4rem; }
.ctx-grid .fe-num { width: 100%; box-sizing: border-box; }
.casos-contexto {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.6rem;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.3rem;
}
.casos-cuerpo { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-right: 0.2rem; }
.casos-grupo-tit {
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  color: var(--c-acento);
  padding: 0.4rem 0.6rem;
  margin-top: 0.4rem;
  border-radius: 8px 8px 0 0;
  background: var(--c-surface);
  border: 1px solid #20465a;
  border-bottom: none;
  position: sticky;       /* el titulo de grupo queda fijo al hacer scroll */
  top: 0;
  z-index: 1;
}
/* Items de caso mas legibles: tipo lista con buen contraste y tamano. */
.casos-cuerpo .item-checklist-edit {
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--c-border);
  border-top: none;
  background: var(--c-surface);
}
.casos-cuerpo .item-checklist-edit:hover { background: #131c2e; }

/* Cabecera PLEGABLE de Casos (deja sitio a la lista) */
.casos-sticky > .casos-sum { cursor: pointer; font-weight: 700; font-size: 0.84rem; white-space: nowrap; color: var(--c-titulo2); padding: 0.4rem 0.6rem; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); }
.casos-sticky[open] > .casos-sum { border-radius: 8px 8px 0 0; }
.casos-sticky[open] { border: 1px solid var(--c-border); border-radius: 8px; padding: 0 0.5rem 0.5rem; margin-bottom: 0.3rem; }

/* Lista de casos en REJILLA multi-columna de tarjetas (sin filas largas con scroll) */
.casos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem; margin: 0 0 0.6rem; padding: 0.4rem 0.3rem; border: 1px solid #20465a; border-top: none; border-radius: 0 0 8px 8px; }
.caso-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0.6rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }
.caso-card:hover { border-color: var(--c-border2); }
.caso-card.bloq { opacity: 0.55; }
.caso-card-nom { font-size: 0.86rem; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caso-card-acc { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.caso-card-cargar { flex: 1 1 auto; }
.caso-card-dl { text-decoration: none; padding: 0.15rem 0.45rem; border: 1px solid var(--c-border2); border-radius: 6px; }
/* El toggle de curación (🌍 solo yo / Todos) ocupa su propia fila: nunca se sale de la tarjeta. */
.caso-card-acc .cur-btn { flex: 1 1 100%; margin-top: 0.15rem; text-align: center; }

/* ============================================================================
   Pestana DEBRIEFING (instructor): eventos + captura real del monitor
   ============================================================================ */
.panel.panel-debrief { display: block; overflow: hidden; padding: 0.5rem 0.9rem; }
.debrief-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.debrief-cuerpo {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0.6rem;
}
.debrief-ev {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
}
.debrief-ev-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--c-titulo2); font-size: 0.9rem; }
.debrief-ev-nota { font-size: 0.9rem; color: var(--c-text); margin: 0.3rem 0; }
/* Observaciones por alumno (acta) en el Debriefing */
.debrief-obs { flex: 0 0 auto; margin-bottom: 0.3rem; }
.debrief-obs > summary { cursor: pointer; font-weight: bold; color: var(--c-titulo); padding: 0.2rem 0; }
.debrief-obs-fila { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.3rem 0; }
.debrief-obs-nom { flex: 0 0 110px; color: var(--c-titulo2); font-size: 0.88rem; padding-top: 0.3rem; }
.debrief-obs-ta {
  flex: 1 1 auto; min-width: 0; min-height: 2.2rem; resize: vertical;
  font-family: inherit; font-size: 0.88rem; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: 8px; padding: 0.35rem 0.5rem;
}
.curso-logo-prev { max-height: 34px; max-width: 90px; object-fit: contain; border-radius: 4px; background: #fff; }
.debrief-mini { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; padding: 0.4rem; background: var(--c-canvas); border-radius: 8px; }
.debrief-mini-v { font-size: 0.82rem; }
.debrief-mini-r { font-size: 0.78rem; color: var(--c-muted); width: 100%; }
.debrief-sincaptura { font-size: 0.74rem; color: var(--c-muted); margin-top: 0.3rem; font-style: italic; }
.debrief-thumb {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: #000;
  cursor: zoom-in;
  display: block;
}
.debrief-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}
.debrief-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ============================================================================
   Pestana DISPOSITIVOS (builder con vista previa)
   ============================================================================ */
.panel.panel-disp { display: block; overflow: hidden; padding: 0.5rem 0.9rem; }
.disp-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.disp-cuerpo { flex: 1 1 0; min-height: 0; display: flex; gap: 0.8rem; }
.disp-prev {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; background: var(--c-canvas); border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
}
/* Marco con la MISMA proporcion que la imagen: asi los recuadros (% del marco)
   calzan EXACTO con la foto, sin descuadre por el letterbox. */
.disp-prev-marco { position: relative; max-width: 100%; max-height: 100%; }
.disp-prev-marco .disp-prev-img { width: 100%; height: 100%; display: block; }
.disp-prev-img { max-width: 100%; max-height: 100%; display: block; }
.disp-prev-vacio { color: var(--c-muted2); font-size: 0.95rem; }
/* Rectangulos editables (pantalla / botones) sobre la imagen. */
.disp-rect {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--c-acento);
  background: rgba(90, 155, 230, 0.12);
  cursor: move;
  font-size: 0.68rem; color: var(--c-acento); font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; user-select: none; touch-action: none;
}
.disp-rect.btn { border-color: #ffd24a; background: rgba(255, 210, 74, 0.14); color: #ffd24a; }
.disp-ctrl {
  flex: 0 0 290px; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.25rem;
  border-left: 1px solid var(--c-border); padding-left: 0.7rem;
}
.disp-ctrl input[type="text"], .disp-ctrl select {
  font-family: inherit; font-size: 0.88rem; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-border2); border-radius: 7px; padding: 0.35rem 0.5rem;
}
.disp-campos, .disp-boton-fila { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.15rem 0; }
.disp-boton-fila select { flex: 1 1 90px; min-width: 0; }
.disp-campo { display: flex; align-items: center; gap: 0.15rem; font-size: 0.78rem; color: var(--c-muted); }
.disp-campo input { background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border2); border-radius: 6px; padding: 0.2rem; text-align: center; }
.disp-acc { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.disp-acc .boton-actualizar { flex: 0 0 auto; padding: 0.45rem 1rem; font-size: 0.95rem; }
.disp-guardado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; padding: 0.5rem 0.4rem 0.45rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }
.disp-guardado-nom { max-width: 100%; font-weight: 600; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disp-guardado-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin-top: 0.1rem; }
.disp-reemplaza { font-size: 0.68rem; color: var(--c-acento); font-weight: 600; }
.disp-ocultos { margin: 0.2rem 0 0.6rem; font-size: 0.82rem; color: var(--c-muted); }
.disp-ocultos summary { cursor: pointer; }
.disp-oculto-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.2rem 0.2rem; }
/* Editor de la rueda del desfibrilador (asignar funcion a cada posicion). */
.rueda-editor { flex: 0 0 auto; border: 1px solid var(--c-border3); border-radius: 9px; padding: 0.3rem 0.5rem; margin-bottom: 0.3rem; background: var(--c-surface); }
.rueda-editor summary { cursor: pointer; font-weight: bold; color: var(--c-titulo); font-size: 0.9rem; }
.rueda-ayuda { font-size: 0.74rem; color: var(--c-muted); margin: 0.3rem 0; }
.rueda-fila { display: flex; gap: 0.35rem; align-items: center; margin: 0.2rem 0; }
.rueda-fila input[type="color"] { width: 2rem; height: 1.8rem; padding: 0; border: 1px solid var(--c-border2); border-radius: 6px; background: var(--c-bg); }
.rueda-et { flex: 1 1 90px; min-width: 0; }
.rueda-an { width: 56px; }
.rueda-fn { flex: 1 1 120px; min-width: 0; }
.rueda-acc { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
/* Tarjeta de un control (boton o rueda) en el builder. */
.disp-control { border: 1px solid var(--c-border3); border-radius: 9px; padding: 0.4rem 0.45rem; margin: 0.3rem 0; background: var(--c-surface); }
.disp-control-cab { display: flex; gap: 0.3rem; align-items: center; }
.disp-control-tit { flex: 1 1 auto; font-size: 0.8rem; color: var(--c-muted); }
.disp-control-cab select { flex: 1 1 auto; }
.disp-control-acc, .disp-control-nom { width: 100%; margin-top: 0.25rem; }
.disp-campo-ancho { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.76rem; color: var(--c-muted); margin: 0.2rem 0; }
.disp-efecto { border-top: 1px dashed var(--c-border2); margin-top: 0.4rem; padding-top: 0.4rem; }
.disp-efecto select[multiple] { height: auto; }
/* Rueda (dial) en la vista previa: redonda y de otro color que los botones. */
.disp-rect.dial { border-color: #57d3ff; background: rgba(87, 211, 255, 0.14); color: #57d3ff; border-radius: 50%; }
.disp-rect.btn.mcp { border-color: #b388ff; background: rgba(179, 136, 255, 0.16); color: #b388ff; }
.disp-rect.slot { border-color: var(--c-acento); background: rgba(90, 155, 230, 0.14); color: var(--c-acento); }
.disp-rect.slot.slot-solido { background: rgba(4, 8, 14, 0.82); border-color: #cfe3ff; color: #cfe3ff; }
.disp-slot-curva { display: flex; gap: 0.3rem; align-items: center; font-size: 0.8rem; color: var(--c-muted); margin: 0.2rem 0; }
/* FILAS delgadas para botones y curvas (una linea por control). */
.disp-filas { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.2rem; }
.disp-fila { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; border: 1px solid var(--c-border); border-radius: 7px; padding: 0.2rem 0.35rem; background: var(--c-surface); }
.disp-fila select, .disp-fila input[type="text"] { padding: 0.2rem 0.35rem; font-size: 0.82rem; }
.disp-fila-sel { flex: 0 0 auto; max-width: 8.5rem; }
.disp-fila-nom { flex: 1 1 70px; min-width: 50px; }
.disp-fila .disp-campo input { width: 36px; }
.disp-fila-curva { display: flex; align-items: center; gap: 0.12rem; font-size: 0.95rem; color: var(--c-acento); cursor: pointer; }
.disp-nuevo { margin: 0.4rem 0; font-size: 0.9rem; }
/* Pestana DIVIDIDA A LA MITAD: imagen GRANDE a la izquierda, controles a la
   derecha. Las tarjetas se distribuyen en MOSAICO (varias por fila) y todo es
   compacto para minimizar el scroll. */
.disp-cuerpo { gap: 0.7rem; }
.disp-prev { flex: 1 1 50%; }
.disp-ctrl { flex: 1 1 50%; padding-bottom: 1rem; gap: 0.15rem; }
.disp-controles-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.2rem; }
.disp-controles-grid .disp-control { flex: 1 1 165px; max-width: none; margin: 0; padding: 0.3rem 0.35rem; }
.disp-guardados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; margin-bottom: 0.55rem; }
/* Densidad: secciones y campos mas juntos en la mitad de controles. */
.disp-ctrl .evol-etq { margin: 0.3rem 0 0.05rem; }
.disp-ctrl .disp-campos { margin: 0.1rem 0; }
.disp-control-acc, .disp-control-nom { margin-top: 0.2rem; }
/* Division SIEMPRE en vertical (izquierda/derecha). Solo en moviles muy estrechos
   se apila para que quepa. */
.disp-cuerpo { flex-direction: row; }
@media (max-width: 700px) {
  .disp-cuerpo { flex-direction: column; }
  .disp-prev { flex: 0 0 42%; }
  .disp-ctrl { flex: 1 1 auto; border-left: none; border-top: 1px solid var(--c-border); padding-left: 0; padding-top: 0.5rem; }
}

/* --- Modo prueba (teaser): parametros/ritmos bloqueados --- */
.tarjeta.bloqueado-demo { opacity: 0.55; }
.tarjeta.bloqueado-demo .candado { margin-left: 0.3rem; }
.banner-demo {
  grid-column: 1 / -1;
  background: #2a2410;
  border: 1px solid #6b5a1f;
  color: #ffd24a;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  font-weight: bold;
}

/* Aviso temporal (toast) */
.toast-aviso {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  background: var(--c-peligro);
  color: #fff;
  font-weight: bold;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  transition: transform 0.25s ease;
  pointer-events: none;
}
.toast-aviso.visible { transform: translateX(-50%) translateY(0); }

/* Barra de seleccion de ritmo (en desuso tras el rediseno, se conserva por compatibilidad) */
.barra-ritmo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.5rem 0;
  flex-wrap: wrap;
}
.barra-ritmo label {
  font-size: 0.95rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}
.barra-ritmo select {
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--c-text);
  background: var(--c-btn);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  min-width: 240px;
  cursor: pointer;
}
.barra-ritmo input[type="number"] {
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 0.5rem;
  width: 70px;
  text-align: center;
}
.barra-ritmo .sufijo { font-size: 0.95rem; color: var(--c-muted); }

.panel {
  flex: 1 1 0;            /* ocupa el alto restante de la pantalla */
  min-height: 0;
  overflow-y: auto;       /* scroll interno solo si una pestana se pasa */
  align-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
}

.tarjeta {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  padding: 0.4rem 0.55rem;
  overflow-x: hidden;     /* recorta solo en horizontal; nunca el alto */
  min-width: 0;           /* permite que la tarjeta se encoja dentro del grid */
}

/* Boton "Ordenar pantalla" (cabecera) y modo de reordenamiento */
.btn-orden {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--c-titulo);
  background: var(--c-btn);
  border: 1px solid #2c4a6a;
  border-radius: 8px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-orden:hover { background: var(--c-btn-hover); }
.btn-orden.activo { background: var(--c-acento); color: var(--c-bg); border-color: #3f7fd1; font-weight: bold; }

/* Boton "Marcar momento" (pestana Evolucion): destacado en ambar */
.btn-marcar {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1205;
  background: #f1c40f;
  border: 1px solid #c9a200;
  border-radius: 8px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-marcar:hover { background: #ffd633; }

/* Codigo de sesion clicable (abre el QR) */
.codigo-clic { cursor: pointer; text-decoration: underline dotted; }
.codigo-clic:hover { color: var(--c-acento); }
/* Modal del QR para unirse a la sesion */
.qr-modal {
  position: fixed; inset: 0; z-index: 9999; background: rgba(2, 6, 14, 0.8);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.qr-caja {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px;
  padding: 1.3rem 1.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.7rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.qr-tit { font-weight: 700; font-size: 1.15rem; color: var(--c-titulo2); }
.qr-img { width: min(72vw, 300px); height: auto; background: #fff; border-radius: 10px; padding: 0.5rem; }
.qr-cod { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.3rem; color: var(--c-text); }
.qr-sub { font-size: 0.85rem; color: var(--c-muted); max-width: 300px; }
.kit-cmd { font-family: Consolas, monospace; font-size: 0.82rem; color: #cfe3ff; background: #0a1730;
  border: 1px solid var(--c-border); border-radius: 6px; padding: 0.5rem 0.6rem; max-width: 360px; word-break: break-all; }

/* Modal de PROYECCION: panel grande que aprovecha la pantalla. Cabecera y pie
   fijos; la rejilla de tarjetas crece y hace scroll SOLO si no cabe. */
.proy-caja {
  width: 96vw; max-width: 1180px; height: 92vh; max-height: 92vh;
  padding: 0.9rem 1.1rem; gap: 0.5rem; text-align: left;
}
.proy-caja .qr-tit { flex: 0 0 auto; text-align: center; }
.proy-caja .qr-sub { flex: 0 0 auto; max-width: none; text-align: center; }
.proy-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem;
  padding: 0.2rem;
}
.proy-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  background: var(--c-bg, #0d1730); border: 1px solid var(--c-border); border-radius: 12px; padding: 0.6rem;
}
.proy-qr { width: 100%; max-width: 130px; aspect-ratio: 1; height: auto; background: #fff; border-radius: 8px; padding: 0.3rem; }
.proy-ti { font-weight: 700; font-size: 0.9rem; color: var(--c-text); text-align: center; line-height: 1.15; }
.proy-de { font-size: 0.72rem; color: var(--c-muted); text-align: center; line-height: 1.2; }
.proy-acc { display: flex; gap: 0.35rem; margin-top: auto; padding-top: 0.2rem; }
.proy-acc .btn-mini { text-decoration: none; padding: 0.25rem 0.55rem; }
.proy-caja > .btn-mini { flex: 0 0 auto; align-self: center; padding: 0.35rem 1.4rem; }

/* Modal del creador de ATAJOS de evolucion (deterioro/mejoria) */
.atajo-modal {
  position: fixed; inset: 0; z-index: 9999; background: rgba(2, 6, 14, 0.8);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.atajo-caja {
  width: min(94vw, 560px); max-height: 88vh; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
  padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.atajo-tit { font-weight: 700; font-size: 1.15rem; color: var(--c-titulo2); }
.atajo-sub { font-weight: 600; font-size: 0.85rem; color: var(--c-titulo); border-bottom: 1px solid var(--c-border); padding-bottom: 0.25rem; margin-top: 0.3rem; }
.atajo-lista { display: flex; flex-direction: column; gap: 0.3rem; }
.atajo-add { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.atajo-add select { flex: 1 1 140px; min-width: 0; }
.atajo-add input { width: 5.5rem; }
.atajo-acc { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

/* Disenador de GUION (escenas/cajones) */
.panel.panel-guion { display: block; overflow: hidden; padding: 0.5rem 0.9rem; }
.guion-cont { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.guion-cab { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.guion-total { color: var(--c-titulo); font-weight: 600; margin-left: auto; }
.guion-lista { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.guion-cajon { display: flex; align-items: center; gap: 0.6rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.5rem 0.7rem; }
.guion-cajon-info { display: flex; align-items: center; gap: 0.7rem; flex: 1 1 auto; min-width: 0; }
.guion-cajon-num { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-btn); color: var(--c-titulo); font-weight: 700; }
.guion-cajon-nom { font-weight: 600; }
.guion-cajon-meta { font-size: 0.8rem; color: var(--c-muted); }
.guion-cajon-acc { display: flex; gap: 0.3rem; flex: 0 0 auto; }
.guion-add { align-self: flex-start; }
.guion-ejec { margin: 0.5rem 0 0.3rem; }
.guion-run { background: #f1c40f; color: #1a1205; border-color: #c9a200; font-weight: 700; }
.guion-run:disabled { opacity: 0.6; cursor: default; }

/* --- Barra del GUION en vivo (fija, siempre visible mientras corre) --- */
.barra-guion {
  position: fixed; left: 50%; bottom: 0.7rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: center;
  background: var(--c-surface); border: 1px solid var(--c-border2); border-radius: 12px;
  padding: 0.45rem 0.8rem; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); z-index: 9500;
  max-width: 96vw;
}
.bg-info { font-size: 0.95rem; color: var(--c-text); }
.bg-info b { color: var(--c-titulo); }
.bg-tiempo { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-titulo); background: var(--c-btn); border-radius: 8px; padding: 0.15rem 0.5rem; }
.bg-ramas { display: inline-flex; gap: 0.25rem; }
.bg-rama { font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 0.3rem 0.7rem; border: 1px solid #2c4a6a; background: var(--c-btn); color: var(--c-text); opacity: 0.7; }
.bg-rama.fav.on { background: #1d7a4d; border-color: #2ecc71; color: #eafff3; opacity: 1; }
.bg-rama.des.on { background: #9c2b2b; border-color: #ff8e8e; color: #fff0f0; opacity: 1; }
.bg-ramas.pendiente .bg-rama { animation: bgPulse 1s ease-in-out infinite; }
@keyframes bgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.5); } 50% { box-shadow: 0 0 0 4px rgba(241, 196, 15, 0); } }
.bg-hint { font-size: 0.8rem; color: #f1c40f; font-weight: 600; }
.bg-accion { font-family: inherit; font-size: 0.88rem; cursor: pointer; border-radius: 8px; padding: 0.3rem 0.7rem; border: 1px solid #2c4a6a; background: var(--c-btn); color: var(--c-titulo); }
.bg-accion:hover { background: var(--c-btn-hover); }
.bg-accion.stop { color: #ff8e8e; font-weight: 700; }
.guion-fav { color: #2ecc71; }
.guion-des { color: #ff8e8e; }
.guion-sonidos { display: flex; flex-direction: column; gap: 0.1rem; max-height: 150px; overflow-y: auto; }
/* En modo orden, las tarjetas indican que se pueden arrastrar. */
.panel-orden .tarjeta {
  cursor: grab;
  outline: 1px dashed #2c4a6a;
  touch-action: none;   /* permite arrastrar con el dedo sin que la pagina haga scroll */
}
.panel-orden .tarjeta:hover { outline-color: var(--c-acento); }
.panel-orden .tarjeta.arrastrando { opacity: 0.4; }
.panel-orden .tarjeta.destino-orden { outline: 2px solid var(--c-acento); outline-offset: 1px; }
/* Copia que sigue al puntero mientras se arrastra. */
.clon-arrastre {
  position: fixed;
  z-index: 4000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

/* Ajustes avanzados de la tarjeta, plegados (compacta por defecto). */
.tarjeta-mas { margin-top: 0.3rem; }
.tarjeta-mas > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--c-titulo);
  list-style: none;
  padding: 0.15rem 0;
  user-select: none;
}
.tarjeta-mas > summary::-webkit-details-marker { display: none; }
.tarjeta-mas[open] > summary { color: var(--c-acento); }

/* Selector de variables de Mi panel, plegable. */
details.mipanel-picker > summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--c-acento);
  list-style: none;
}
details.mipanel-picker > summary::-webkit-details-marker { display: none; }

.tarjeta .nombre { font-size: 0.9rem; color: var(--c-text); line-height: 1.15; }
.tarjeta .id { font-size: 0.72rem; color: #58616b; }

.tarjeta .valor-grande {
  font-size: 1.35rem;
  font-weight: bold;
  margin: 0.1rem 0;
}
.tarjeta .unidad { font-size: 0.9rem; color: var(--c-muted); font-weight: normal; }

/* Fila de botones:  [-5][-1]  [ valor ]  [+1][+5]
   Usamos una REJILLA (grid) de 5 columnas fijas: los dos botones de bajar a la
   izquierda, el campo flexible en el centro, los dos de subir a la derecha.
   Asi siempre quedan simetricos y en una sola fila, sin saltos raros. */
.controles {
  display: grid;
  grid-template-columns: auto auto minmax(44px, 1fr) auto auto;
  gap: 0.25rem;
  align-items: stretch;
  margin: 0.25rem 0;
}
.controles button {
  min-width: 30px;
  padding: 0.2rem 0;       /* mismo alto, ancho marcado por min-width */
  font-weight: 600;
}
.controles button.menos { color: #ff9b9b; border-color: #4a2c2c; } /* bajar = rojo */
.controles button.menos:hover { background: #2a1818; }
.controles button.mas { color: #cfe3ff; border-color: #2c4a3c; }   /* subir = verde */
.controles button.mas:hover { background: #15281f; }

.controles input[type="number"] {
  min-width: 0;            /* CLAVE: permite que el campo baje de su ancho natural */
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  color: var(--c-text);
  border-radius: 7px;
  padding: 0.2rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
}

/* Etiqueta de un componente (Sistolica / Diastolica) encima de sus controles */
.etq-componente {
  font-size: 0.8rem;
  color: var(--c-muted);
  margin: 0.3rem 0 0.1rem;
}

/* Variable BLOQUEADA: la controla el alumno desde su pantalla-dispositivo */
.var-bloqueada {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; color: #ffd27a;
  background: rgba(255, 170, 60, 0.08);
  border: 1px dashed rgba(255, 170, 60, 0.4);
  border-radius: 8px; padding: 0.4rem 0.6rem; margin-top: 0.2rem;
}
.var-bloqueada .var-bloq-val { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* Nota para parametros derivados (se calculan solos) */
.nota-derivado {
  font-size: 0.8rem;
  color: var(--c-muted);
  font-style: italic;
  margin: 0.3rem 0;
  padding: 0.3rem 0.5rem;
  border: 1px dashed var(--c-border2);
  border-radius: 8px;
}

/* Interruptor de "monitorizado" */
.fila-monitor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--c-border);
}
.fila-monitor label { font-size: 0.82rem; color: var(--c-muted); }
.cuenta-box { font-size: 0.85rem; color: var(--c-muted); margin-left: 0.4rem; white-space: nowrap; }
.cuenta-plan { font-style: normal; color: var(--c-accent, #4ea1ff); margin-left: 0.35rem; }
.cuenta-plan-sel { max-width: 13rem; }
/* Panel de CUENTAS (super-admin). */
.panel.panel-cuentas { display: block; overflow-y: auto; padding: 0.6rem 1rem; }
.cuentas-crear { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.cuentas-fila-crear { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.3rem; }
.cuentas-fila-crear input { flex: 1 1 130px; min-width: 0; }
.cuentas-error { color: #ff7a7a; font-size: 0.85rem; min-height: 1em; margin-top: 0.3rem; }
.cuentas-lista { display: flex; flex-direction: column; gap: 0.35rem; }
.cuenta-fila { display: flex; align-items: center; gap: 0.6rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.4rem 0.7rem; }
.cuenta-info { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cuenta-admin { color: var(--c-acento); font-weight: bold; }
.cuenta-niv { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--c-muted); }

/* --- Historial de cursos + buscador de legajos --- */
.panel.panel-historial { display: block; overflow-y: auto; padding: 0.6rem 1rem; }
.hist-buscador { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.6rem 0.8rem; margin: 0.6rem 0 0.8rem; }
.hist-fila { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.35rem; }
.hist-rotulo { font-size: 0.8rem; color: var(--c-muted); }
.hist-in { flex: 1 1 150px; min-width: 0; font-family: inherit; padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid #2c4a6a; background: var(--c-btn); color: var(--c-text); }
.hist-total { font-size: 0.85rem; color: var(--c-muted); margin: 0.3rem 0; }
.hist-tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.hist-tabla th { position: sticky; top: 0; background: var(--c-surface); color: var(--c-titulo); text-align: left; padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--c-border2); }
.hist-tabla td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--c-border); }
.hist-tabla tbody tr:hover { background: rgba(90, 155, 230, 0.08); }

/* --- Biblioteca de evaluacion (items + plantillas) --- */
.panel.panel-evaluacion { display: block; overflow-y: auto; padding: 0.6rem 1rem; }
.eval-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; align-items: start; }
@media (max-width: 900px) { .eval-cols { grid-template-columns: 1fr; } }
.eval-sec { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.6rem 0.7rem; }
.eval-filtro { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; margin: 0.4rem 0; }
.eval-chip { font-family: inherit; font-size: 0.8rem; cursor: pointer; border-radius: 999px; padding: 0.25rem 0.6rem; border: 1px solid #2c4a6a; background: var(--c-btn); color: var(--c-text); }
.eval-chip.on { background: var(--c-acento); color: var(--c-bg); border-color: #3f7fd1; font-weight: 600; }
.eval-lista { display: flex; flex-direction: column; gap: 0.2rem; max-height: 46vh; overflow-y: auto; }
.eval-plantilla { display: flex; flex-direction: column; gap: 0.25rem; }
.eval-editor { background: var(--c-bg); border: 1px dashed var(--c-border2); border-radius: 8px; padding: 0.4rem 0.5rem; margin: 0.2rem 0 0.4rem; }
.eval-editor-lista { display: flex; flex-direction: column; gap: 0.1rem; max-height: 38vh; overflow-y: auto; margin: 0.3rem 0; }
.eval-vista { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: 0.3rem 0.5rem; margin: 0.2rem 0; max-height: 40vh; overflow-y: auto; }

/* Cursos (plan formativo) */
.panel.panel-cursos { display: block; overflow-y: auto; padding: 0.6rem 1rem; }
.curso-wrap { display: flex; flex-direction: column; gap: 0.25rem; }
.curso-editor { background: var(--c-bg); border: 1px dashed var(--c-border2); border-radius: 8px; padding: 0.4rem 0.5rem; margin: 0.2rem 0 0.5rem; }
.curso-escenarios { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.3rem 0; }
.curso-matriculas { margin-top: 0.6rem; border-top: 1px solid var(--c-border); padding-top: 0.5rem; }
.curso-matlista { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; max-height: 40vh; overflow-y: auto; }

/* Curso en la sesion (multi-escenario) */
.prog-panel { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; background: var(--c-surface); border: 1px solid var(--c-border2); border-radius: 8px; padding: 0.4rem 0.7rem; margin: 0.4rem 0; }
.prog-lab { color: var(--c-muted); font-size: 0.9rem; }
/* B1: aviso de "rota la pantalla" en TABLET vertical (no en monitores grandes). */
.aviso-orientacion { display: none; }
@media (orientation: portrait) and (max-width: 1024px) {
  .aviso-orientacion {
    position: fixed; inset: 0; z-index: 6000; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; gap: 0.5rem;
    background: var(--c-bg); color: var(--c-text); font-size: 1.4rem; padding: 2rem;
  }
  .aviso-orientacion small { color: var(--c-muted); font-size: 0.95rem; }
}
/* Tablero del curso (matriz subgrupo x caso) */
.tablero-panel { background: var(--c-surface); border: 1px solid var(--c-border2); border-radius: 8px; padding: 0.5rem 0.7rem; margin: 0.4rem 0; }
.tablero-cab { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; font-size: 0.9rem; }
.tablero-grid { display: grid; gap: 0.3rem; align-items: stretch; overflow-x: auto; }
.tablero-grid .tb-esq { font-size: 0.72rem; color: var(--c-muted); display: flex; align-items: center; }
.tablero-grid .tb-colh { font-size: 0.74rem; font-weight: 600; color: var(--c-text); text-align: center; padding: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablero-grid .tb-rowh { font-size: 0.76rem; font-weight: 600; color: var(--c-text); display: flex; align-items: center; padding-right: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablero-grid .tb-cel { display: flex; align-items: center; gap: 0.2rem; }
.tb-btn { flex: 1 1 auto; font-size: 0.72rem; padding: 0.3rem 0.2rem; border-radius: 6px; border: 1px solid var(--c-border2); cursor: pointer; background: var(--c-canvas); color: var(--c-text); white-space: nowrap; }
.tb-btn.tb-pendiente:hover { background: var(--c-surface2, #1e2c4a); }
.tb-btn.tb-curso { background: hsla(40, 90%, 50%, 0.22); border-color: hsl(40, 80%, 50%); color: var(--c-text); font-weight: 600; }
.tb-btn.tb-hecho { background: hsla(150, 60%, 45%, 0.25); border-color: hsl(150, 55%, 45%); color: var(--c-text); font-weight: 600; }
.tb-btn.tb-noasig { opacity: 0.4; }
.tb-asig { display: flex; align-items: center; }
.tablero-resumen { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px dashed var(--c-border); display: flex; flex-direction: column; gap: 0.15rem; }
.tb-res-linea { font-size: 0.78rem; color: var(--c-muted); }
.tb-res-linea b { color: var(--c-text); }
/* Eventos de dispositivo (respirador / ECMO) en Evolución */
.evt-disp { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0; }
.evt-grupo { background: var(--c-surface); border: 1px solid var(--c-border2); border-radius: 8px; padding: 0.4rem 0.6rem; }
.evt-tit { font-size: 0.8rem; font-weight: 600; color: var(--c-titulo); margin-bottom: 0.3rem; }
.evt-fila { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.evt-btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 7px; border: 1px solid var(--c-border2); background: var(--c-canvas); color: var(--c-text); cursor: pointer; }
.evt-btn:hover { border-color: var(--c-acento); }
.evt-btn.activo { background: hsla(0, 70%, 50%, 0.25); border-color: hsl(0, 70%, 55%); font-weight: 600; }
.evt-btn.evt-normal.activo { background: hsla(150, 55%, 45%, 0.25); border-color: hsl(150, 55%, 48%); }
.prog-info { color: var(--c-text); font-size: 0.95rem; flex: 1 1 auto; }
.prog-info b { color: var(--c-titulo); }

/* Panel de FALLOS ECMO (motor de causas): catálogo por categoría con severidad + inicio. */
.fallos-ecmo .fallos-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.fallos-cab-acc { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.fallos-ecmo .fallos-sub { font-weight: 400; opacity: 0.7; font-size: 0.78rem; }
.fallos-cat-tit { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-acento); margin: 0.4rem 0 0.2rem; }
/* UNA sola FILA: los 9 fallos se ajustan al ancho (flex sin envolver). */
.fallos-grid { display: flex; flex-wrap: nowrap; gap: 0.35rem; }
.fallo-card { flex: 1 1 0; min-width: 0; border: 1px solid var(--c-border2); border-left: 3px solid #4a5565; border-radius: 8px; padding: 0.3rem 0.4rem; background: var(--c-canvas); display: flex; flex-direction: column; gap: 0.22rem; }
.fallo-cat { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-titulo2); opacity: 0.75; }
/* Color de borde por categoría (siempre visible; el estado activo tiñe el fondo). */
.fallo-card[data-cat="precarga"] { border-left-color: #5a9be6; }
.fallo-card[data-cat="paciente"] { border-left-color: #e0554f; }
.fallo-card[data-cat="membrana"] { border-left-color: #b07cf0; }
.fallo-card[data-cat="circuito"] { border-left-color: #f0a04b; }
.fallo-card[data-cat="acceso"] { border-left-color: #39d0d8; }
.fallo-card.activo { background: hsla(3, 62%, 45%, 0.14); box-shadow: inset 0 0 0 1px hsl(3 62% 52% / 0.5); }
.fallo-btn { font-size: 0.78rem; text-align: left; padding: 0.28rem 0.35rem; border-radius: 6px; border: 1px solid var(--c-border2); background: var(--c-surface); color: var(--c-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fallo-btn:hover { border-color: var(--c-acento); }
.fallo-card.activo .fallo-btn { background: hsla(3, 65%, 50%, 0.22); border-color: hsl(3, 65%, 55%); font-weight: 600; color: #ffdedb; }
.fallo-elapsed { font-variant-numeric: tabular-nums; font-weight: 700; opacity: 0.9; }
.fallo-ctrls { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.fallo-sev-box { flex: 1 1 auto; display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.fallo-sev { flex: 1 1 auto; min-width: 24px; accent-color: #e0554f; cursor: pointer; }
.fallo-sev-lab { font-size: 0.66rem; color: var(--c-titulo2); font-variant-numeric: tabular-nums; width: 2.1em; text-align: right; flex: 0 0 auto; }
.fallo-onset { font-size: 0.66rem; padding: 0.12rem 0.15rem; border-radius: 6px; border: 1px solid var(--c-border2); background: var(--c-surface); color: var(--c-text); flex: 0 1 auto; max-width: 5rem; min-width: 0; }

/* Bloque de debriefing del motor de fallos ECMO (dentro de la pestaña Debriefing). */
.debrief-ecmo { border: 1px solid var(--c-border); border-radius: 10px; padding: 0.5rem 0.7rem; margin-bottom: 0.6rem; background: var(--c-surface); }
.debrief-ecmo > summary { cursor: pointer; font-weight: 600; color: var(--c-titulo); }
.debrief-ecmo-resumen { margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.debrief-ecmo-fallo { border-left: 3px solid #e0554f; padding: 0.3rem 0.5rem; background: var(--c-canvas); border-radius: 6px; }
.de-fallo-tit { font-size: 0.9rem; }
.de-t { color: var(--c-muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.de-teach { font-size: 0.82rem; color: var(--c-titulo2); margin-top: 0.15rem; }
.de-dx { font-size: 0.82rem; color: var(--c-text); margin-top: 0.1rem; }
.de-ok { color: #4fd1a1; }
.de-no { color: #ff8a8a; }
.debrief-ecmo-metrica { font-size: 0.85rem; color: var(--c-text); margin: 0.3rem 0; padding: 0.3rem 0.5rem; background: var(--c-canvas); border-radius: 6px; }
.debrief-ecmo-malas { font-size: 0.85rem; color: #ffb37a; margin: 0.3rem 0; }
.debrief-ecmo-tl { margin-top: 0.5rem; border-top: 1px solid var(--c-border2); padding-top: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.de-tl-row { font-size: 0.82rem; color: var(--c-text); }

/* Cargador de plantillas en la pestana Sesion */
.cl-biblioteca { margin: 0.3rem 0 0.5rem; }
.cl-plantillas { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.3rem 0; }
.cl-plantilla-sel { font-family: inherit; font-size: 0.85rem; border-radius: 8px; padding: 0.3rem 0.5rem; border: 1px solid #2c4a6a; background: var(--c-canvas); color: var(--c-text); width: 100%; box-sizing: border-box; cursor: pointer; }
/* Pantalla central de GRABACION (pestana 🎥): tarjetas consistentes. */
.panel.panel-grabacion, .panel.panel-proyeccion { display: block; overflow-y: auto; }
.grabc-panel { display: flex; flex-direction: column; gap: 0.7rem; }
.grabc-cuerpo { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-start; }
.grabc-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.grabc-col-ancha { flex: 1.3 1 380px; }
.grabc-card { border: 1px solid hsl(var(--gh, 210) 40% 50% / 0.4); border-radius: 12px; background: var(--c-surface); overflow: hidden; }
.grabc-card-tit { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; padding: 0.55rem 0.85rem; color: hsl(var(--gh, 210) 68% 74%); background: hsl(var(--gh, 210) 55% 45% / 0.12); border-bottom: 1px solid hsl(var(--gh, 210) 40% 50% / 0.35); }
.grabc-card-ico { font-size: 1.05rem; }
.grabc-card-body { padding: 0.7rem 0.85rem; }
.grabc-card-body .perif-col { padding: 0; }
.grabc-meta-fila { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.6rem; }
.grabc-grabar { font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; border-radius: 8px; padding: 0.45rem 0.95rem; color: #fff; background: var(--c-peligro); border: 1px solid var(--c-peligro-borde); }
.grabc-grabar:hover { filter: brightness(1.12); }
.grabc-grabar.grabando { background: #7a1420; animation: parpadeo-pcr 1s steps(1, end) infinite; }
.grabc-estado { font-size: 0.82rem; color: var(--c-muted); }
.grabc-estado.on { color: #ff8a7a; font-weight: 600; }
body.tema-claro .grabc-card-tit { color: hsl(var(--gh, 210) 60% 34%); }
.cl-plantilla-btn { font-family: inherit; font-size: 0.85rem; cursor: pointer; border-radius: 8px; padding: 0.25rem 0.7rem; border: 1px solid #2c4a6a; background: #143a2a; color: #d5ffe9; font-weight: 600; }
.cl-plantilla-btn:hover:not(:disabled) { background: #1d6f4d; }
.cl-plantilla-btn:disabled { opacity: 0.5; cursor: default; }
.cl-selector-lista { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; margin: 0.4rem 0; }

/* Subgrupos de alumnos en la pestana Sesion */
.subg-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 0.4rem 0.6rem; margin: 0.3rem 0 0.5rem; }
.subg-ctr { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin: 0.3rem 0; font-size: 0.85rem; }
.subg-n { width: 3.4rem; }
.subg-nom { flex: 0 1 9rem; }
.subg-lista { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.subg-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--c-btn); border: 1px solid var(--c-border); border-radius: 6px; padding: 0.2rem 0.5rem; }
.subg-row.activo { border-color: var(--c-acento); background: rgba(90, 155, 230, 0.16); }
.subg-activo { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.subg-warn { color: #ffb3b3; }
.sg-sel { margin: 0 0.3rem; max-width: 9rem; }

/* ============================================================================
   TEMA CLARO (solo instructor; el monitor del alumno es siempre oscuro).
   Las superficies usan var(--c-*); aqui solo se redefinen esos tokens, asi que
   el cambio es COMPLETO. Unos pocos ajustes para la base (estilos.css) y acentos.
   ============================================================================ */
body.tema-claro {
  --c-bg: #eceff4;
  --c-surface: #ffffff;
  --c-canvas: #e7ebf2;
  --c-btn: #e6eaf1;
  --c-btn-hover: #d9e0ea;
  --c-border: #ccd3df;
  --c-border2: #c2cad8;
  --c-border3: #d4dae5;
  --c-text: #0a1420;            /* casi negro: maximo contraste del texto */
  --c-muted: #3a4759;           /* gris-azul oscuro (texto secundario legible) */
  --c-muted2: #51607a;
  --c-titulo: #0a3a78;          /* titulos/labels: azul OSCURO intenso */
  --c-titulo2: #0c2a52;         /* cabeceras: azul muy oscuro */
  --c-acento: #3a78c8;          /* azul un poco mas oscuro: legible sobre blanco */
  --c-peligro: #c62330; --c-peligro-borde: #a81826;
  background: var(--c-bg); color: var(--c-text);
}
/* El "ojo" de visible-al-alumno: en claro, realce azul tenue (no caja oscura). */
body.tema-claro .evol-ojo { background: #ffffff; }
body.tema-claro .evol-ojo.on { background: #d8e8fb; border-color: #3f7fd1; }
/* Base compartida (estilos.css usa hex fijos): forzamos claro. */
body.tema-claro button { background: var(--c-btn); color: var(--c-text); border-color: var(--c-border2); }
body.tema-claro button:hover { background: var(--c-btn-hover); }
body.tema-claro .cabecera { background: #ffffff; border-bottom: 1px solid var(--c-border); }
body.tema-claro h1, body.tema-claro .marca, body.tema-claro .evol-titulo, body.tema-claro .pestana.activa { color: #0d2c54; }
body.tema-claro .salir:hover { background: #e7d8d8; }
/* Pestañas en modo CLARO: texto y bordes en AZUL MARINO casi negro. */
body.tema-claro .pestana,
body.tema-claro .pestana.pst-op,
body.tema-claro .pestana.pst-prep { color: #0c2348; border-color: #20355c; }
body.tema-claro .pestana.activa,
body.tema-claro .pestana.pst-op.activa,
body.tema-claro .pestana.pst-prep.activa { color: #061230; background: #dce7f8; border-color: #0c2348; font-weight: bold; }
body.tema-claro .pestana-grupo,
body.tema-claro .pestana-caja.op .pestana-grupo,
body.tema-claro .pestana-caja.prep .pestana-grupo { color: #0c2348; }
body.tema-claro .pestana-caja.op,
body.tema-claro .pestana-caja.prep { border-color: #20355c; }

/* MODO CLARO — colores calculados por HUE (grupos/pestañas/tarjetas). En claro
   necesitan tinte CLARO + texto OSCURO (los del tema oscuro son tintes oscuros).
   Sin esto, en claro los grupos se ven planos/apagados ("todo parece lo mismo"). */
body.tema-claro .sesion-grupo { background: hsl(var(--gh, 210) 72% 55% / 0.15); border-color: hsl(var(--gh, 210) 45% 62%); }
body.tema-claro .sesion-grupo-sum { color: hsl(var(--gh, 210) 60% 30%); }
body.tema-claro .prep-sub-cab { color: hsl(var(--sg-h, 210) 62% 30%); background: hsl(var(--sg-h, 210) 70% 58% / 0.14); border-color: hsl(var(--sg-h, 210) 55% 55%); }
body.tema-claro .prep-sub-cab:hover { color: hsl(var(--sg-h, 210) 66% 22%); border-color: hsl(var(--sg-h, 210) 60% 45%); }
body.tema-claro .prep-sub-cab.abierto { color: hsl(var(--sg-h, 210) 68% 20%); background: hsl(var(--sg-h, 210) 72% 55% / 0.24); border-color: hsl(var(--sg-h, 210) 60% 42%); }
body.tema-claro .prep-acordeon .pestana.pst-prep { color: hsl(var(--sg-h, 210) 62% 30%); background: hsl(var(--sg-h, 210) 70% 62% / 0.12); border-color: hsl(var(--sg-h, 210) 50% 58%); }
body.tema-claro .prep-acordeon .pestana.pst-prep:hover { color: hsl(var(--sg-h, 210) 66% 20%); }
body.tema-claro .prep-acordeon .pestana.pst-prep.activa { color: hsl(var(--sg-h, 210) 70% 18%); background: hsl(var(--sg-h, 210) 72% 55% / 0.26); border-color: hsl(var(--sg-h, 210) 60% 42%); }
body.tema-claro .grabc-card { background: #ffffff; border-color: hsl(var(--gh, 210) 45% 62%); }
body.tema-claro .grabc-card-tit { color: hsl(var(--gh, 210) 60% 30%); background: hsl(var(--gh, 210) 70% 55% / 0.12); border-bottom-color: hsl(var(--gh, 210) 45% 60%); }
body.tema-claro .cd-panel { background: #ffffff; }

/* Aviso de cesion de derechos en los puntos de subida de contenido */
.aviso-cesion {
  flex: 1 1 100%;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--c-muted);
  background: rgba(241, 196, 15, 0.08);
  border: 1px solid rgba(241, 196, 15, 0.35);
  border-radius: 7px;
}
.aviso-cesion b { color: var(--c-titulo2); }

/* Botones de la barra superior, FIJOS en la esquina superior derecha (misma zona):
   ⤢ minimiza cuando la barra esta visible; ⤡ la muestra cuando esta minimizada. */
.btn-barra-toggle {
  position: fixed; top: 4px; right: 8px; z-index: 300;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border2); border-radius: 8px; padding: 0.25rem 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.btn-barra-toggle.btn-expandir { display: none; }       /* expandir oculto por defecto */
.cabecera { padding-right: 2.6rem; }                     /* hueco para el boton fijo */
body.cab-min .cabecera { display: none; }
body.cab-min #btnCompactar { display: none; }            /* al minimizar, ocultamos el de minimizar */
body.cab-min .btn-barra-toggle.btn-expandir { display: inline-flex; }
/* Toolbar de Evolucion: que el selector y la transicion convivan en una linea */
.evol-toolbar .evol-vars-btn { margin-right: 0.2rem; }
.evol-toolbar .evol-pcr { display: inline-flex; gap: 0.4rem; align-items: center; }
/* Grupos de la toolbar de Evolucion: cada bloque como una seccion ordenada
   (fondo tenue + borde), sin empujes anarquicos a los bordes. */
.evol-tb-grupo { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; padding: 0.25rem 0.4rem; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-canvas); }
.evol-tb-emergencia { border-color: hsl(0 55% 50% / 0.5); background: hsl(0 60% 45% / 0.08); }
.evol-pcr-sub { display: inline-flex; align-items: center; gap: 0.3rem; }
.evol-pcr-sub + .evol-pcr-sub { border-left: 1px solid var(--c-border2); padding-left: 0.4rem; margin-left: 0.1rem; }
.evol-toolbar .evol-pcr select { flex: 0 1 auto; width: 10.5rem; min-width: 6.5rem; max-width: 46vw; text-overflow: ellipsis; }

/* Panel SUPER-ADMIN: cola de verificacion / biblioteca global */
.panel.panel-global { display: block; overflow-y: auto; padding: 0.6rem 1rem; }
.global-panel { display: flex; flex-direction: column; gap: 0.6rem; }
.global-resumen { font-size: 0.85rem; color: var(--c-titulo2); }
.global-sec { border: 1px solid var(--c-border); border-radius: 10px; padding: 0.4rem 0.7rem; background: var(--c-bg); }
.global-sec > summary { cursor: pointer; font-weight: 700; color: var(--c-titulo); padding: 0.2rem 0; }
.global-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem; margin-top: 0.4rem; }
.global-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }
.global-item.es-global { border-color: #2c4a3c; }
.global-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; background: #000; cursor: pointer; flex: 0 0 auto; }
.global-info { flex: 1 1 0; min-width: 0; }
.global-nom { font-weight: 600; font-size: 0.86rem; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-meta { font-size: 0.74rem; color: var(--c-muted); }
.global-acc { flex: 0 0 auto; }
.global-acc .boton-actualizar { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* Cursos en REJILLA de tarjetas compactas (el editor abierto va a todo el ancho) */
.curso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
/* ----- Tarjeta TILE (formato de Sonidos): icono arriba, contenido centrado ----- */
/* ----- Crear/editar VARIABLES ----- */
.tarjeta-crear-var { display: flex; align-items: center; justify-content: center; border-style: dashed !important; background: transparent; min-height: 90px; }
.btn-crear-var { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 100%; background: transparent; border: none; color: var(--c-muted); font-weight: 600; cursor: pointer; padding: 0.6rem; }
.btn-crear-var:hover { color: var(--c-titulo); background: transparent; }
.btn-crear-var .ccv-mas { font-size: 1.6rem; line-height: 1; }
.var-acc { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.var-ed-caja { max-width: min(94vw, 560px); width: 94vw; text-align: left; max-height: 88vh; overflow-y: auto; }
.var-ed-cuerpo { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0; }
.var-ed-fila { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.var-ed-lab { flex: 0 0 11rem; font-size: 0.85rem; color: var(--c-muted); }
.var-ed-dep { border-left: 3px solid var(--c-border2); padding-left: 0.6rem; margin: 0.2rem 0 0.2rem 0.3rem; display: flex; flex-direction: column; gap: 0.35rem; }
.var-ed-puntos { display: flex; flex-direction: column; gap: 0.3rem; }
.var-ed-punto { display: flex; align-items: center; gap: 0.3rem; }
.var-ed-ayuda { font-size: 0.78rem; color: var(--c-muted); }
.var-ed-acc { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; }
.tarjeta-tile { align-items: center; text-align: center; }
.tarjeta-tile .curso-card-acc, .tarjeta-tile .perif-acc { justify-content: center; }
.tarjeta-tile .curso-card-ver { flex: 0 0 auto; }
.tarjeta-tile .perif-fila-cab { align-items: center; }
.tile-ico { font-size: 1.7rem; line-height: 1; height: 1.95rem; display: flex; align-items: center; justify-content: center; }
.tile-ico img { max-height: 1.95rem; max-width: 100%; border-radius: 4px; }
.curso-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.65rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }
.curso-card.abierto { border-color: var(--c-acento); box-shadow: inset 0 0 0 1px var(--c-acento); }
.curso-card-nom { font-weight: 700; font-size: 0.9rem; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curso-card-meta { font-size: 0.76rem; color: var(--c-muted); }
.curso-card-acc { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.1rem; }
.curso-card-ver { flex: 1 1 auto; }

/* ============================================================================
   EVALUACION rediseñada: checklists como TARJETAS + editor modal con pool/filtros
   ============================================================================ */
.eval-barra-top { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.3rem 0 0.5rem; }
.eval-chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; margin-bottom: 0.7rem; }
.eval-chk-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.65rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }
.eval-chk-nom { font-weight: 700; font-size: 0.92rem; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eval-chk-meta { font-size: 0.76rem; color: var(--c-muted); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
/* Color por etiqueta/tema (primarios/secundarios): BORDE lateral fuerte como
   distintivo. Sin tinte de fondo ni texto coloreado (evita el lavado amarillo y
   problemas de contraste). Aplicable a cualquier tarjeta via .card-coloreada. */
.card-coloreada { border-left: 5px solid hsl(var(--et-h), 70%, 50%); }
/* B2: en las tarjetas de CASO/EXAMEN, el título lleva FONDO DE COLOR al ancho de la
   tarjeta (como las de variables), sin desbordar (ellipsis) y con tooltip al pasar. */
.caso-card.card-coloreada { border-left: none; padding: 0; overflow: hidden; }
.caso-card.card-coloreada > .caso-card-nom {
  background: hsl(var(--et-h), 42%, 38%);
  color: #f3f8ff;
  padding: 0.35rem 0.55rem;
  border-radius: 9px 9px 0 0;
}
.caso-card.card-coloreada > :not(.caso-card-nom) { margin-left: 0.55rem; margin-right: 0.55rem; }
.caso-card.card-coloreada > .caso-card-acc { margin-bottom: 0.5rem; }
:root[data-theme="light"] .caso-card.card-coloreada > .caso-card-nom { background: hsl(var(--et-h), 55%, 42%); }
.eval-et-chip { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  color: #fff; background: hsl(var(--et-h), 62%, 44%); border: 1px solid hsl(var(--et-h), 60%, 38%); }
.eval-chk-acc { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; flex-wrap: wrap; }
/* Contenido OCULTADO por una org: solo lo ve el super-admin, atenuado y rayado. */
.eval-borrado { opacity: 0.62; border-style: dashed !important; background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(220,80,80,0.06) 7px, rgba(220,80,80,0.06) 14px); }
.eval-borrado-et { font-size: 0.75rem; color: #c44; font-weight: 600; }
.eval-chk-usar { flex: 1 1 auto; }
.eval-pool-det { border: 1px solid var(--c-border); border-radius: 10px; padding: 0 0.6rem 0.4rem; background: var(--c-bg); }
.eval-pool-det > summary { cursor: pointer; font-weight: 700; color: var(--c-titulo2); padding: 0.45rem 0.2rem; }

/* Editor modal de checklist */
.eval-ed-caja { width: min(94vw, 720px); max-width: 720px; max-height: 92vh; text-align: left; display: flex; flex-direction: column; gap: 0.5rem; }
.eval-ed-datos { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.eval-ed-datos .proy-nom { flex: 1 1 200px; }
.eval-ed-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.eval-ed-busca { flex: 1 1 160px; min-width: 120px; }
.eval-ed-count { font-size: 0.8rem; color: var(--c-titulo2); }
.eval-ed-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--c-border); border-radius: 8px; padding: 0.4rem 0.5rem; background: var(--c-bg); }
.eval-ed-item { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.86rem; color: var(--c-text); padding: 0.15rem 0; cursor: pointer; }
.eval-ed-item input { margin-top: 0.15rem; }

/* Fuentes mas legibles en el pool de items */
.eval-lista .item-checklist-edit { font-size: 0.88rem; }
.eval-lista .cl-cat-cab, .eval-ed-lista .cl-cat-cab { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-acento); margin: 0.35rem 0 0.15rem; }

/* ============================================================================
   RESPONSIVE — Móvil / tablet en VERTICAL (≤760px). El escritorio y el tablet
   APAISADO (>760px) NO se tocan: siguen con "todo en una pantalla, sin scroll".
   En estrecho relajamos esa regla: la página puede scrollear y todo se apila a
   una columna, con toques más cómodos. (Fase 1 accesibilidad/responsive.)
   ============================================================================ */
@media (max-width: 760px) {
  /* La página puede crecer y scrollear (en vez de comprimirlo todo sin éxito). */
  body { overflow-y: auto; overflow-x: hidden; }

  /* Pestañas: con el acordeón de PREPARAR ya caben; que envuelvan en varias filas
     en vez de una tira horizontal inservible. */
  .pestanas { flex-wrap: wrap; }
  .prep-acordeon { width: 100%; }

  /* El panel y los paneles "de una pantalla" pasan a alto NATURAL (fluyen en la
     página) en vez de tener scroll interno con alto fijo. */
  .panel,
  .panel.panel-evolucion, .panel:has(.evol-panel),
  .panel.panel-sonidos, .panel:has(.sonidos-panel),
  .panel.panel-biblio, .panel:has(.biblio-panel),
  .panel.panel-perif, .panel.panel-sesion, .panel.panel-casos,
  .panel.panel-disp, .panel.panel-debrief,
  .panel.panel-guion, .panel.panel-iframe {
    overflow: visible; height: auto; min-height: 0;
  }
  .evol-panel, .sonidos-panel, .biblio-panel, .sesion-panel, .casos-panel,
  .disp-panel, .debrief-panel, .perif-cont, .guion-cont {
    height: auto; min-height: 0;
  }
  /* Las pestañas con iframe (Informe / Meta-debriefing) recortaban sin scroll:
     en móvil el wrap fluye y el iframe toma un alto útil (no height:100% en columna). */
  .iframe-wrap { height: auto; min-height: 0; }
  .iframe-panel { flex: 0 0 auto; height: 80vh; min-height: 420px; }
  /* Filas de dos columnas -> apiladas. */
  .evol-cuerpo, .evol-cuerpo.evol-3col, .sesion-cuerpo, .disp-cuerpo, .perif-cont { flex-direction: column; }
  .evol-col, .sesion-col, .perif-col, .disp-prev, .disp-ctrl { overflow: visible; min-height: 0; }
  .disp-prev { flex: 0 0 auto; min-height: 38vh; }

  /* Rejillas cuyo minmax no cabe -> una columna. */
  .panel { grid-template-columns: 1fr; }
  .evol-grid, .vars-grid, .lista-mipanel { grid-template-columns: 1fr; }
  .snd-canal { flex: 1 1 100%; }

  /* Toque cómodo en los controles pequeños. */
  .mas, .menos, .btn-mini, .btn-x, .pestana, .boton-actualizar, .boton-detener, .fase-btn { min-height: 40px; }

  /* La barra fija del guion (abajo, siempre visible en vivo) tapaba el contenido
     ahora que la página scrollea: dejamos hueco al final y la ceñimos al ancho. */
  body:has(.barra-guion) { padding-bottom: 84px; }
  .barra-guion { left: 8px; right: 8px; transform: none; max-width: none; width: auto; flex-wrap: wrap; }

  /* Anchos fijos en px que forzaban scroll horizontal -> se adaptan. */
  .qr-caja, .qr-caja img, .perif-movil-qr, .cam-mini-video, .cam-mini-pie,
  .debrief-clip-video, .debrief-clip-ext { max-width: 100%; height: auto; }
  input[type="text"], input[type="number"], input[type="search"], select, textarea { max-width: 100%; }
}

/* Nivel TELÉFONO ESTRECHO (≤600px): tipografía y toque más generosos, sin la
   densidad pensada para apaisado. Sube el tamaño base para que 0.7–0.8rem no
   queden minúsculos, y todo control ocupa el ancho cómodo. */
@media (max-width: 600px) {
  :root { font-size: 17px; }
  .panel { padding: 0.55rem; gap: 0.55rem; }
  .alta-alumno { flex-wrap: wrap; gap: 0.4rem; }
  .alta-alumno input, .alta-alumno select { flex: 1 1 100%; max-width: 100%; }
  .alta-alumno button { flex: 1 1 auto; }
  .atajo-caja { width: 94vw; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
  .evol-cel .fe-num { width: 4.2rem; }
}

/* RESPONSIVE Fase 3 — descongestionar las pantallas densas en móvil (≤760px).
   La celda de variable (9 columnas) se solapaba: pasa a FLUJO con salto de línea. */
@media (max-width: 760px) {
  /* Cada variable de Evolución: nombre en su línea y los controles debajo, que
     se reacomodan (sin solaparse) en vez de comprimir 9 columnas. */
  .evol-cel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; padding: 0.4rem 0.5rem; }
  .evol-cel .fe-nombre { flex: 1 1 100%; white-space: normal; }
  .evol-cel .fe-num { width: 56px; }
  /* Más aire entre tarjetas y dentro de los paneles. */
  .panel { gap: 0.6rem; padding: 0.6rem; }
  .evol-grid { gap: 0.5rem; }
  /* Rejillas de 2 columnas que se aprietan -> una sola. */
  .ctx-grid { grid-template-columns: 1fr; }
  .controles-param { grid-template-columns: 1fr; }
  /* Mi panel y selectores de variables: una columna cómoda. */
  .vars-grid { gap: 0.6rem; }
}

/* Banner del modo DEMO (prospecto sin cuenta). */
.banner-demo-fijo {
  flex: 0 0 auto; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.4rem 1rem; font-size: 0.88rem;
  background: linear-gradient(90deg, #2a2410, #1a1810); color: #ffd24a;
  border-bottom: 1px solid #4a4225;
}
.banner-demo-cta {
  margin-left: auto; text-decoration: none; font-weight: 700; white-space: nowrap;
  color: #0b1020; background: #ffd24a; border-radius: 8px; padding: 0.3rem 0.8rem;
}
.banner-demo-cta:hover { background: #ffe27a; }

/* Controles PTZ del visor de cámara IP (cruceta + zoom). */
.ptz-wrap { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 0.4rem 0; flex-wrap: wrap; }
.ptz-cruz { display: grid; grid-template-columns: repeat(3, 2.4rem); grid-template-rows: repeat(3, 2.4rem); gap: 0.25rem; }
.ptz-zoom { display: flex; align-items: center; gap: 0.4rem; }
.ptz-lab { font-size: 0.8rem; color: var(--c-muted); }
.ptz-btn {
  font: inherit; font-weight: 700; cursor: pointer; border-radius: 8px; padding: 0;
  width: 2.4rem; height: 2.4rem; color: #e6edf3; background: #1a2230; border: 1px solid #3a4660;
  touch-action: none; user-select: none;
}
.ptz-btn:hover { background: #243047; }
.ptz-btn:active { background: #3f7fd1; color: #0b1020; }
.ptz-stop { color: #9aa6b5; }

/* Boton "Vincular kit" con kit conectado: realce verde. */
.btn-orden.kit-on, .informe-link.kit-on { border-color: #2ee6a6; color: #9bffd0; }

/* ============================================================================
   DISPOSITIVOS — criterio de diseño UNIFICADO (tipografía, tamaños, diagramación)
   Una sola escala de fuentes, controles de una talla y secciones con cabecera
   coherente, tanto en la lista como en el editor. Scoped a .disp-panel.
   ============================================================================ */
/* 1) Cabeceras de sección IGUALES en todo el módulo (lista y editor). */
.disp-panel .evol-etq {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-titulo); opacity: 1; margin: 0.7rem 0 0.35rem;
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--c-border);
}
.disp-panel .evol-etq:first-child { margin-top: 0.1rem; }
/* 2) Inputs y selects con UNA sola talla/forma en todo el editor. */
.disp-ctrl input[type="text"], .disp-ctrl select,
.disp-fila input[type="text"], .disp-fila select {
  font-size: 0.84rem; padding: 0.34rem 0.5rem; border-radius: 8px; min-height: 2rem;
  border: 1px solid var(--c-border2); background: var(--c-bg); color: var(--c-text); box-sizing: border-box;
}
/* 3) Columna de controles: más aire y respiración entre secciones. */
.disp-ctrl { flex-basis: 340px; gap: 0.45rem; padding-left: 0.9rem; }
/* 4) Filas y tarjetas de control: MISMA tarjeta (borde/radio/fondo/padding). */
.disp-fila, .disp-control { border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); padding: 0.4rem 0.5rem; margin: 0; }
.disp-filas { gap: 0.35rem; }
/* 5) Etiquetas pequeñas y títulos de control: un solo tamaño/color. */
.disp-campo, .disp-campo-ancho, .disp-control-tit, .disp-slot-curva, .disp-fila-curva { font-size: 0.76rem; color: var(--c-muted); }
/* 6) Campos numéricos x/y/w/h: mismo tamaño, alineados. */
.disp-campo input { width: 42px; height: 1.8rem; border-radius: 6px; }
.disp-fila .disp-campo input { width: 40px; }
/* 7) Barra de guardado: separada del resto, jerarquía clara. */
.disp-acc { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid var(--c-border); gap: 0.5rem; }
/* 8) Botón "Nuevo dispositivo": coherente con la barra superior. */
.disp-nuevo { font-size: 0.86rem; }

/* ============================================================================
   PERIFÉRICOS — criterio de diseño UNIFICADO (fuentes, tamaños, diagramación)
   Mismo lenguaje que Dispositivos: una escala tipográfica, controles de una
   talla y CTAs contenidas (el botón "Añadir" dejaba de ser proporcionado).
   ============================================================================ */
/* 1) Textos de ayuda/intro a un solo tamaño y con buen interlineado. */
.perif-col > .evol-ayuda, .perif-movil-ayuda { font-size: 0.82rem; color: var(--c-muted); line-height: 1.35; margin: 0; }
/* 2) Inputs y selects del formulario: UNA sola talla/forma. */
.perif-alta input, .perif-alta select, .perif-inp {
  font-size: 0.88rem; padding: 0.42rem 0.55rem; border-radius: 8px; min-height: 2.3rem;
  border: 1px solid var(--c-border2); background: var(--c-bg); color: var(--c-text); box-sizing: border-box;
}
/* 3) El botón "Añadir ..." deja de ser un botonazo: CTA proporcionada. */
.perif-alta .boton-actualizar {
  font-size: 0.92rem; font-weight: 700; padding: 0.5rem 1.1rem; border-radius: 8px;
  flex: 0 0 auto; align-self: flex-start; min-width: 12rem;
}
/* 4) Etiquetas de campo coherentes. */
.perif-campo { font-size: 0.76rem; color: var(--c-muted); }
/* 5) Cabecera de columna y de grupo: misma familia que el resto. */
.perif-col-tit { font-size: 0.8rem; }
.perif-grupo-tit { font-size: 0.72rem; }
/* 6) Tarjeta de periférico/destino: nombre y estado a un tamaño. */
.perif-nom { font-size: 0.9rem; font-weight: 600; }
.perif-badge { font-size: 0.72rem; }
/* 7) Caja de alta un poco más aireada. */
.perif-alta { gap: 0.55rem; padding: 0.8rem; }

/* Curación de visibilidad (super-admin): interruptor y toggles por elemento. */
.cur-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.3rem 0 0.5rem; padding: 0.45rem 0.7rem; border-radius: 8px; background: rgba(46,230,166,0.08); border: 1px solid rgba(46,230,166,0.35); font-size: 0.82rem; }
.cur-bar > span { flex: 1 1 auto; }
.cur-btn { font-size: 0.74rem; }
.cur-btn.cur-on { border-color: #2ee6a6; color: #9bffd0; }

/* Versión de la app en la cabecera. */
.app-version { font-size: 0.62rem; font-weight: 600; color: var(--c-muted); border: 1px solid var(--c-border2); border-radius: 6px; padding: 0.05rem 0.35rem; vertical-align: middle; margin-left: 0.3rem; }

/* Generador de casos con IA (pestaña Casos). */
.ia-gen { border: 1px solid rgba(120,160,255,0.35); background: rgba(90,130,255,0.06); }
.ia-gen > summary { color: #bcd0ff; }
.ia-prompt { min-height: 70px; }
.ia-estado { font-size: 0.8rem; color: var(--c-muted); margin-left: 0.5rem; align-self: center; }
.ia-aviso { font-size: 0.82rem; color: var(--c-muted); padding: 0.4rem 0.2rem; }
/* Requisitos obligatorios del caso (duración/alumnos/perfiles/objetivos). */
.ia-req { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.4rem 0; padding: 0.55rem; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-canvas); }
.ia-req-fila { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ia-req-lbl { font-size: 0.8rem; color: var(--c-titulo); font-weight: 600; }
.ia-req-num { width: 5rem; }
.ia-perfiles { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ia-perfil-chip { font-family: inherit; font-size: 0.78rem; cursor: pointer; border-radius: 999px; padding: 0.22rem 0.6rem; border: 1px solid var(--c-border2); background: var(--c-btn); color: var(--c-muted); }
.ia-perfil-chip:hover { color: var(--c-text); }
.ia-perfil-chip.on { background: var(--c-acento); color: #fff; border-color: var(--c-acento); font-weight: 600; }
.casos-filtros { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.2rem 0 0.4rem; }
/* Caso IA pendiente de validar. */
.caso-badge-ia { font-size: 0.7rem; font-weight: 600; color: #c98a00; background: rgba(241, 196, 15, 0.12); border: 1px solid rgba(241, 196, 15, 0.4); border-radius: 6px; padding: 0.12rem 0.4rem; margin: 0.1rem 0; display: inline-block; }
.caso-card-validar { background: #1f7a44 !important; color: #fff !important; border-color: #2ea86a !important; }
/* Búsqueda de casos con IA. */
.casos-ia-buscar { display: flex; gap: 0.4rem; align-items: center; margin: 0.2rem 0 0.5rem; }
.casos-ia-buscar .prog-bus { flex: 1 1 auto; }
.casos-ia-cab { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; border-radius: 8px; background: rgba(90, 130, 255, 0.08); border: 1px solid rgba(120, 160, 255, 0.35); }
.casos-ia-cab button { margin-left: auto; }
.casos-ia-motivo { font-size: 0.78rem; color: var(--c-acento); font-style: italic; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px dashed var(--c-border); }
.ia-objetivos { display: flex; flex-direction: column; gap: 0.3rem; }
.ia-obj-fila { display: flex; align-items: center; gap: 0.35rem; }
.ia-obj-inp { flex: 1 1 auto; }

/* Modal de edición de caso (contexto, voz, personajes). */
.caso-edit-caja { text-align: left; max-width: 560px; max-height: 86vh; overflow-y: auto; }
.ce-campo { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.ce-campo > span { font-size: 0.72rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ce-campo input, .ce-campo textarea { width: 100%; }
.ce-campo textarea { min-height: 56px; resize: vertical; }
.ce-personajes { margin-top: 10px; border-top: 1px solid var(--c-border2); padding-top: 8px; }
.ce-pj-tit { font-size: 0.72rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ce-pj { display: grid; grid-template-columns: 0.8fr 0.8fr 2fr auto; gap: 5px; align-items: start; margin-bottom: 6px; }
.ce-pj textarea { min-height: 38px; resize: vertical; }
.ce-acc { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; position: sticky; bottom: 0; background: inherit; padding-top: 8px; }

/* Exámenes teóricos tipo test. */
.examen-builder, .examen-hacer { text-align: left; }
.examen-preguntas { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0; }
.ex-preg { border: 1px solid var(--c-border); border-radius: 10px; padding: 0.55rem 0.7rem; background: var(--c-surface); }
.ex-preg-head { display: flex; justify-content: space-between; align-items: center; }
.ex-preg-num { font-size: 0.74rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ex-enun { width: 100%; min-height: 44px; resize: vertical; margin: 0.35rem 0; }
.ex-ops { display: flex; flex-direction: column; gap: 0.3rem; }
.ex-op { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem; align-items: center; }
.ex-op .ex-op-txt { width: 100%; }
.ex-exp { width: 100%; margin-top: 0.4rem; }
.eh-preg { border: 1px solid var(--c-border); border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.5rem; background: var(--c-surface); }
.eh-enun { font-weight: 600; margin-bottom: 0.4rem; }
.eh-op { display: block; padding: 0.2rem 0.4rem; border-radius: 6px; }
.eh-op.eh-ok { background: rgba(46,230,166,0.18); }
.eh-op.eh-ko { background: rgba(255,107,138,0.18); }
.eh-exp { font-size: 0.82rem; color: var(--c-muted); margin-top: 0.3rem; font-style: italic; }

/* Programas de especialidad / guías + selector de marco en los generadores. */
.prog-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.6rem 0; }
.ia-marco { display: flex; gap: 0.4rem; margin: 0.4rem 0; flex-wrap: wrap; }
.ia-marco select { flex: 1 1 auto; }

/* Programas agrupados por especialidad (colapsables). */
.prog-grupo { margin: 0.4rem 0; }
.prog-grupo > summary { cursor: pointer; }

/* ---- Programas y guías: maquetado cuidado, color por temática, buscable ---- */
.prog-subir { margin-bottom: 0.7rem; }
.prog-bar { margin: 0.2rem 0 0.7rem; }
.prog-bus { width: 100%; box-sizing: border-box; padding: 0.34rem 0.7rem; font-size: 0.82rem;
  border-radius: 8px; border: 1px solid var(--c-border2, #34405e); background: var(--c-surface, #141b2e); color: var(--c-text, #e8edf7); }
.prog-bus:focus { outline: none; border-color: hsl(210, 70%, 55%); box-shadow: 0 0 0 3px rgba(70,130,255,0.18); }
.prog-grupos { display: flex; flex-direction: column; gap: 0.6rem; }
.prog-grupo { border: 1px solid var(--c-border, #28324c); border-left: 5px solid hsl(var(--et-h, 210), 65%, 55%);
  border-radius: 12px; background: linear-gradient(180deg, hsla(var(--et-h,210),50%,50%,0.06), transparent 60%); overflow: hidden; margin: 0; }
.prog-grupo-cab { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; cursor: pointer; list-style: none; user-select: none; }
.prog-grupo-cab::-webkit-details-marker { display: none; }
.prog-grupo-cab::before { content: "▸"; color: hsl(var(--et-h,210),60%,62%); transition: transform 0.15s; font-size: 0.85rem; }
.prog-grupo[open] > .prog-grupo-cab::before { transform: rotate(90deg); }
.prog-grupo-n { margin-left: auto; font-size: 0.74rem; font-weight: 700; color: var(--c-muted, #93a0bd);
  background: rgba(255,255,255,0.06); border-radius: 999px; padding: 0.05rem 0.5rem; }
/* Tiles COMPACTOS (como las tarjetas de evaluación): varios casos por fila, tamaño fijo,
   sin estirarse. Agrupados por tipo con su cabecera; cada caso es su propia tarjeta. */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 240px)); gap: 0.55rem; padding: 0.2rem 0.7rem 0.8rem; }
.prog-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--c-border, #28324c); border-left: 4px solid hsl(var(--et-h,210), 65%, 55%); border-radius: 10px;
  background: hsla(var(--et-h,210), 45%, 50%, 0.09); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
.prog-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.28); background: hsla(var(--et-h,210), 50%, 50%, 0.16); }
.prog-card-top { display: flex; align-items: center; gap: 0.4rem; }
.prog-ico { font-size: 1.15rem; }
.prog-tipo { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #fff; background: hsl(var(--et-h,210), 55%, 42%); border-radius: 999px; padding: 0.08rem 0.5rem; }
.prog-del { margin-left: auto; background: transparent; border: none; color: var(--c-muted, #93a0bd); cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0.1rem 0.25rem; border-radius: 6px; }
.prog-del:hover { color: #fff; background: #c0395a; }
.prog-nom { font-size: 0.9rem; font-weight: 700; color: var(--c-text, #e8edf7); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prog-sub { font-size: 0.72rem; color: var(--c-muted, #93a0bd); }

/* Título del desplegable de subir programa: mismo tamaño que el resto. */
.prog-subir > .casos-sum { font-size: 0.84rem; font-weight: 700; }
/* Paleta de color del grupo (al editar un programa). */
.prog-colores { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.prog-sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.prog-sw.sel { border-color: var(--c-text, #fff); box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.prog-sw-auto { width: auto; border-radius: 12px; padding: 0 0.5rem; font-size: 0.72rem; color: var(--c-muted); background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; }

/* Fila superior de Programas: botón de subir (una línea) + buscador juntos. */
.programas-panel { width: 100%; box-sizing: border-box; }
.prog-top { display: flex; gap: 0.6rem; align-items: center; width: 100%; margin-bottom: 0.7rem; }
.prog-toggle { white-space: nowrap; flex: 0 0 auto; }
.prog-top .prog-bus { flex: 1 1 auto; min-width: 220px; width: auto; margin: 0; }
.prog-grupos, .prog-subir-panel { width: 100%; box-sizing: border-box; }
.prog-subir-panel { margin-bottom: 0.7rem; padding: 0.5rem 0.6rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }

/* ---- Consistencia de fuentes entre pestañas (referencia: Programas) ---- */
/* Summaries plegables (pool de ítems, etc.) al tamaño general. */
.eval-pool-det > summary, .casos-panel summary, .encuestas-panel summary { font-size: 0.84rem; font-weight: 700; }
/* Truncado real de nombres en tarjetas (evita desbordes con textos largos). */
.caso-card { min-width: 0; overflow: hidden; }
.caso-card-nom { min-width: 0; max-width: 100%; }
/* Los paneles de pestaña ocupan todo el ancho (no el del contenido). */
.encuestas-panel, .examenes-panel, .casos-panel, .guion-cont, .panel-evaluacion > div { width: 100%; box-sizing: border-box; }
/* El texto que explica la plantilla de encuesta, a todo el ancho. */
.encuestas-panel > .evol-ayuda { display: block; width: 100%; }
/* Guion: títulos al tamaño general (estaban grandes). */
.guion-cont .evol-titulo, .guion-cont .guion-total { font-size: 0.9rem; }

/* Pestañas de CONTENIDO en una sola columna a todo el ancho (no en grid de 208px),
   para que los textos aprovechen el ancho y ocupen menos líneas. */
.panel:has(.programas-panel),
.panel:has(.encuestas-panel),
.panel:has(.examenes-panel),
.panel:has(.casos-panel),
.panel:has(.guion-cont) { display: block; }

/* Sonido grabado solo en este equipo: botón para subirlo al servidor. */
.snd-subir { margin-top: 0.3rem; width: 100%; font-size: 0.74rem; padding: 0.25rem 0.4rem; border-radius: 7px;
  border: 1px solid #3f7fd1; background: rgba(90,155,230,0.18); color: #cfe0ff; cursor: pointer; }
.snd-subir:hover { background: rgba(90,155,230,0.32); }

/* --- Favoritos ⭐ (estrella en tarjetas + panel en Mi panel) --- */
.fav-btn { background: transparent; border: 0; color: #f0b429; font-size: 1.15rem; line-height: 1;
  cursor: pointer; padding: 0 .2rem; opacity: .5; transition: transform .12s, opacity .12s; }
.fav-btn.on { opacity: 1; }
.fav-btn:hover { opacity: 1; transform: scale(1.18); }
.fav-btn:active { transform: scale(.9); }
.snd-card { position: relative; }
.snd-card .snd-fav { position: absolute; top: 2px; right: 4px; z-index: 2; }
.fav-panel { background: rgba(255,255,255,0.03); border: 1px solid var(--c-border2); border-radius: .7rem;
  margin-bottom: .8rem; overflow: hidden; }
.fav-panel > summary { cursor: pointer; padding: .55rem .8rem; font-weight: 700; list-style: none;
  background: rgba(255,255,255,0.04); }
.fav-panel > summary::-webkit-details-marker { display: none; }
.fav-cuerpo { padding: .3rem .8rem .7rem; }
.fav-h { font-size: .82rem; font-weight: 700; opacity: .72; margin: .55rem 0 .32rem; }
.fav-vacio { font-size: .82rem; opacity: .6; padding: .1rem 0 .3rem; }
.fav-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.fav-chip { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border2); border-radius: .6rem; padding: .22rem .32rem .22rem .55rem; max-width: 100%; }
.fav-chip-nom { font-size: .84rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-chip-btn { padding: .15rem .55rem; font-size: .8rem; }
body.tema-claro .fav-panel { background: rgba(0,0,0,0.02); }
body.tema-claro .fav-panel > summary { background: rgba(0,0,0,0.03); }
body.tema-claro .fav-chip { background: rgba(0,0,0,0.03); }

/* --- Configuraciones (presets) 🎛️ --- */
.cfg-guardar { margin: .4rem 0 .5rem; width: 100%; }
.cfg-lista { display: flex; flex-direction: column; gap: .35rem; }
.cfg-fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--c-border2); border-radius: .6rem; padding: .35rem .5rem; }
.cfg-txt { display: flex; flex-direction: column; min-width: 0; }
.cfg-nom { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-sub { font-size: .74rem; opacity: .62; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-acc { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.cfg-btn { padding: .18rem .55rem; font-size: .8rem; }
body.tema-claro .cfg-fila { background: rgba(0,0,0,0.03); }

/* --- Secuencia de sonidos 🔗 --- */
.snd-seq { margin: .5rem 0; border: 1px solid var(--c-border2); border-radius: .7rem; overflow: hidden; background: rgba(255,255,255,0.03); }
.snd-seq > summary { cursor: pointer; padding: .5rem .8rem; font-weight: 700; list-style: none; background: rgba(255,255,255,0.04); }
.snd-seq > summary::-webkit-details-marker { display: none; }
.snd-seq-cuerpo { padding: .4rem .8rem .7rem; }
.snd-seq-lista { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.snd-seq-chip { display: flex; align-items: center; gap: .4rem; background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border2); border-radius: .5rem; padding: .25rem .45rem; }
.snd-seq-n { font-size: .78rem; opacity: .6; min-width: 1.4rem; }
.snd-seq-nom { flex: 1; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snd-seq-mv { padding: .1rem .4rem; font-size: .8rem; }
.snd-seq-acc { display: flex; gap: .4rem; flex-wrap: wrap; }
.snd-add-seq { margin-top: .25rem; width: 100%; font-size: .72rem; padding: .2rem .3rem; border-radius: 7px;
  border: 1px solid var(--c-border2); background: rgba(255,255,255,0.06); color: inherit; cursor: pointer; }
.snd-add-seq:hover { background: rgba(255,255,255,0.14); }
body.tema-claro .snd-seq, body.tema-claro .snd-seq-chip { background: rgba(0,0,0,0.02); }
body.tema-claro .snd-add-seq { background: rgba(0,0,0,0.04); }

/* --- Orden de sonidos por escena (guion) 🔗 --- */
.guion-orden-tit { font-size: .8rem; font-weight: 700; opacity: .75; margin: .5rem 0 .3rem; }
.guion-orden { display: flex; flex-wrap: wrap; gap: .35rem; }
.guion-orden-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem;
  background: rgba(255,255,255,0.06); border: 1px solid var(--c-border2); border-radius: .5rem; padding: .18rem .2rem .18rem .5rem; }
.guion-orden-mv { padding: .05rem .35rem; font-size: .78rem; }
body.tema-claro .guion-orden-chip { background: rgba(0,0,0,0.03); }

/* --- Documento adicional para la IA 📎 --- */
.ia-docadic { margin: .4rem 0; border: 1px solid var(--c-border2); border-radius: .6rem; background: rgba(255,255,255,0.03); overflow: hidden; }
.ia-docadic > summary { cursor: pointer; padding: .45rem .7rem; font-size: .85rem; font-weight: 600; list-style: none; }
.ia-docadic > summary::-webkit-details-marker { display: none; }
.ia-docadic-txt { width: 100%; min-height: 4.5rem; margin: .3rem 0; }
.ia-docadic .ia-docadic-img { font-size: .8rem; }
body.tema-claro .ia-docadic { background: rgba(0,0,0,0.02); }

/* --- Panel de organización (super-admin): cortesía / descuento / cuentas --- */
.org-panel { border: 1px solid var(--c-border2); border-radius: .7rem; margin-bottom: .55rem; background: rgba(255,255,255,0.03); overflow: hidden; }
.org-panel > summary.org-sum { cursor: pointer; padding: .55rem .8rem; list-style: none; font-size: .9rem; }
.org-panel > summary.org-sum::-webkit-details-marker { display: none; }
.org-cuerpo { padding: .3rem .8rem .7rem; display: flex; flex-direction: column; gap: .5rem; }
.org-bloque { border-top: 1px solid var(--c-border2); padding-top: .5rem; }
.org-fila { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .3rem; }
.org-estado { font-size: .82rem; color: #7fd0a0; margin: .2rem 0; }
.org-cuentas { display: flex; flex-direction: column; gap: .15rem; margin-top: .25rem; }
.org-cuenta { font-size: .82rem; opacity: .82; }
body.tema-claro .org-panel { background: rgba(0,0,0,0.02); }

/* Cuenta dentro del panel de organización: texto + acción de cortesía */
.org-cuenta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.org-cuenta-txt { flex: 1; min-width: 0; }
.org-cuenta-cort { font-size: .78rem; padding: .12rem .5rem; }

/* Estado de conexión de cámara (diagnóstico WebRTC) */
.cam-mini-est { font-size: .68rem; text-align: center; opacity: .85; padding: .1rem 0; }
.cam-modal-est { font-size: .85rem; text-align: center; opacity: .9; padding: .3rem 0; }

/* Indicador global de grabación 🔴 REC + previsualización en vivo */
.rec-indicador { position: fixed; top: 10px; right: 12px; z-index: 60; display: inline-flex; align-items: center; gap: .4rem;
  background: #b31414; color: #fff; border: 0; border-radius: 999px; padding: .35rem .8rem; font: 700 .82rem/1 system-ui, sans-serif;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.rec-indicador:hover { background: #d21a1a; }
.rec-indicador:active { transform: scale(.96); }
.rec-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #fff; animation: recPulse 1.1s infinite; }
@keyframes recPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec-vivo-caja { max-width: min(94vw, 900px); }
.rec-vivo-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rec-vivo-celda { background: #050505; border-radius: 8px; overflow: hidden; }
.rec-vivo-video { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; display: block; }

/* --- Escena: atajos nombrados + recordatorios (editor + runner) --- */
.guion-atajos { display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0; }
.guion-atajo-card { border: 1px solid var(--c-border2); border-radius: .5rem; padding: .35rem .5rem; background: rgba(255,255,255,0.04); }
.guion-atajo-cab { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; }
.guion-atajo-cab .fe-num { flex: 1; }
.guion-rec { display: flex; flex-direction: column; gap: .3rem; margin: .3rem 0; }
.guion-rec-row { display: flex; align-items: center; gap: .35rem; }
.guion-rec-min { width: 4.5rem; }
.guion-rec-txt { flex: 1; min-width: 8rem; }
/* Botones de atajo en la barra del guion en vivo */
.bg-atajos { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.bg-atajo { background: rgba(120,180,255,.16); border: 1px solid rgba(120,180,255,.5); color: inherit;
  border-radius: 999px; padding: .25rem .7rem; font-size: .82rem; cursor: pointer; }
.bg-atajo:hover { background: rgba(120,180,255,.3); }
.bg-atajo:active { transform: scale(.95); }
/* Banner de recordatorio temporizado */
.guion-recordatorio { position: fixed; left: 50%; transform: translateX(-50%); bottom: 78px; z-index: 70;
  display: flex; align-items: center; gap: .6rem; max-width: min(92vw, 640px);
  background: #7a5b00; color: #fff; border: 1px solid #b98900; border-radius: .7rem; padding: .6rem .9rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.4); font: 600 .95rem/1.3 system-ui, sans-serif;
  cursor: move; user-select: none; touch-action: none; }
.guion-recordatorio .gr-grip { cursor: move; opacity: .7; font-size: 1.1rem; letter-spacing: -2px; }
.guion-recordatorio .gr-ico { font-size: 1.3rem; }
.guion-recordatorio .gr-txt { flex: 1; }
.guion-recordatorio .gr-ok { background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: .5rem; padding: .3rem .7rem; cursor: pointer; font-weight: 700; }
.guion-recordatorio .gr-ok:hover { background: rgba(255,255,255,.34); }

/* --- Línea temporal del guion en Evolución --- */
.cd-timeline { margin: .4rem 0; }
.tl-barra { position: relative; display: flex; width: 100%; height: 30px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--c-border2); background: rgba(255,255,255,0.03); }
.tl-seg { position: relative; min-width: 0; border-right: 1px solid rgba(0,0,0,.35); cursor: pointer;
  display: flex; align-items: center; padding: 0 .4rem; background: rgba(120,160,220,.14); transition: background .15s; }
.tl-seg:last-child { border-right: 0; }
.tl-seg:hover { background: rgba(120,160,220,.3); }
.tl-seg.pasada { background: rgba(120,200,150,.16); }
.tl-seg.actual { background: rgba(240,180,70,.32); box-shadow: inset 0 0 0 2px rgba(240,180,70,.7); }
.tl-seg-txt { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.tl-playhead { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #e23; box-shadow: 0 0 6px #e23; pointer-events: none; }
.tl-playhead::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e23; }
/* Marcador de recordatorio en la línea temporal: línea ámbar + ⏰; hover = texto. */
.tl-record { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; z-index: 3;
  display: flex; align-items: flex-start; justify-content: center; font-size: 10px; line-height: 1; cursor: help; }
.tl-record::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7px; width: 2px; background: rgba(255,190,70,.92); }
/* Caso CARGADO en la sesión: realce de la tarjeta + badge. */
.caso-card.cargado { outline: 2px solid rgba(90,210,150,.8); outline-offset: -1px; }
.caso-badge-cargado { font-size: .72rem; color: #57d38c; font-weight: 700; white-space: nowrap; }
.org-hist-row { font-size: .8rem; padding: .12rem 0; border-bottom: 1px dotted var(--c-border2); }
#btnAltavozMovil.altavoz-on { background: rgba(90,210,150,.22); border-color: rgba(90,210,150,.8); color: #6fe0a0; }
/* ===== Pestaña Guion: vista en vivo ===== */
.guion-vacio { text-align: center; padding: 2.5rem 1rem 1.5rem; color: var(--c-muted); }
.guion-vacio-ic { font-size: 2.6rem; }
.guion-vacio-t { font-weight: 700; font-size: 1.05rem; margin: .3rem 0; color: var(--c-titulo); }
.guion-vacio-d { max-width: 44rem; margin: 0 auto; font-size: .9rem; line-height: 1.5; }
.guion-run-est { color: #6fe0a0; font-weight: 700; margin-right: .6rem; }
/* La fila de escena admite un panel desplegado debajo (flex-wrap) y un fondo de progreso. */
.guion-cajon { position: relative; flex-wrap: wrap; overflow: hidden; }
.guion-cajon-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(90,200,140,.20), rgba(90,200,140,.10)); transition: width .5s linear; }
.guion-cajon.actual { box-shadow: inset 0 0 0 2px rgba(240,180,70,.7); }
.guion-cajon.pasada .guion-cajon-num { background: rgba(90,200,140,.5); }
.guion-cajon-info, .guion-cajon-acc { position: relative; z-index: 1; }
.guion-cajon-chev { flex: 0 0 auto; width: 1rem; color: var(--c-muted); }
.guion-cajon-marcas { position: relative; height: 12px; margin-top: 2px; }
.guion-cajon-mk { position: absolute; top: -1px; transform: translateX(-50%); font-size: 10px; line-height: 1; cursor: help; }
/* Panel de control desplegado (ocupa toda la fila, debajo). */
.guion-ctrl { position: relative; z-index: 1; flex: 1 1 100%; margin-top: .5rem; padding-top: .5rem;
  border-top: 1px dashed var(--c-border2); display: flex; flex-direction: column; gap: .5rem; }
.guion-ctrl-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.guion-ctrl-plan { font-size: .82rem; color: var(--c-muted); display: flex; flex-direction: column; gap: .15rem; }
.guion-vared { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.guion-vared select { max-width: 15rem; }
.guion-vared-act { padding: .3rem .7rem; }
.tl-pie { font-size: .78rem; opacity: .8; margin-top: .25rem; }
/* Popup del plan de escena */
.plan-escena-caja { max-width: min(94vw, 560px); text-align: left; }
.plan-h { font-size: .84rem; font-weight: 700; opacity: .8; margin: .6rem 0 .25rem; }
.plan-lista { display: flex; flex-direction: column; gap: .2rem; }
.plan-li { font-size: .86rem; background: rgba(255,255,255,0.05); border: 1px solid var(--c-border2); border-radius: .4rem; padding: .22rem .5rem; }
.plan-acc { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
body.tema-claro .tl-barra, body.tema-claro .plan-li { background: rgba(0,0,0,0.03); }

/* --- Controles del guion en vivo, INLINE en el panel del caso (ya no barra fija) --- */
.cd-guion-fila { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.cd-guion-lbl { font-size: .82rem; opacity: .8; font-weight: 600; }
.cd-escena-stop { padding: .2rem .6rem; font-size: .82rem; }
.cd-guion-rumbo.pendiente { animation: rumboPulse 1.4s infinite; }
@keyframes rumboPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.cd-rama { border: 1px solid var(--c-border2); background: rgba(255,255,255,0.05); color: inherit;
  border-radius: 999px; padding: .28rem .8rem; font-size: .85rem; font-weight: 600; cursor: pointer; }
.cd-rama.fav.on { background: rgba(120,200,150,.3); border-color: rgba(120,200,150,.7); }
.cd-rama.des.on { background: rgba(230,120,120,.3); border-color: rgba(230,120,120,.7); }
.cd-rama:hover { filter: brightness(1.15); }
.cd-rama:active { transform: scale(.95); }
.cd-guion-atajos { gap: .35rem; }
.cd-atajo { background: rgba(120,180,255,.16); border: 1px solid rgba(120,180,255,.5); color: inherit;
  border-radius: 999px; padding: .26rem .7rem; font-size: .82rem; cursor: pointer; }
.cd-atajo:hover { background: rgba(120,180,255,.3); }
.cd-atajo:active { transform: scale(.95); }
.cd-guion-ayuda { font-size: .76rem; opacity: .62; margin-top: .35rem; line-height: 1.4; }

/* --- Revisor de caso (solo lectura, antes de validar) --- */
.revisar-caja { max-width: min(94vw, 640px); text-align: left; max-height: 86vh; overflow-y: auto; }
.rev-h { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; margin: .7rem 0 .3rem; border-bottom: 1px solid var(--c-border2); padding-bottom: .2rem; }
.rev-p { font-size: .88rem; line-height: 1.5; margin: .2rem 0; }
.rev-libre { white-space: pre-wrap; opacity: .85; font-style: italic; }
.rev-escena { border: 1px solid var(--c-border2); border-radius: .5rem; margin: .3rem 0; overflow: hidden; background: rgba(255,255,255,0.03); }
.rev-escena > summary { cursor: pointer; padding: .4rem .6rem; font-weight: 600; font-size: .86rem; }
.rev-escena-cuerpo { padding: .3rem .6rem .5rem; }
.rev-li { font-size: .82rem; line-height: 1.45; margin: .15rem 0; }
body.tema-claro .rev-escena { background: rgba(0,0,0,0.02); }

/* Línea meta en la tarjeta de caso (público · duración · participantes) */
.caso-card-meta { font-size: .74rem; opacity: .72; margin: .15rem 0 .1rem; line-height: 1.3; }

/* Escenas del guion como subtítulos desplegables en el briefing */
.cd-escenas-brief > .cd-ctx-cuerpo { display: flex; flex-direction: column; gap: .25rem; }
.cd-escena-brief { border: 1px solid var(--c-border2); border-radius: .45rem; overflow: hidden; background: rgba(255,255,255,0.03); }
.cd-escena-brief > summary { cursor: pointer; padding: .3rem .55rem; font-size: .84rem; font-weight: 600; }
.cd-escena-brief-cuerpo { padding: .25rem .55rem .4rem; }
body.tema-claro .cd-escena-brief { background: rgba(0,0,0,0.02); }

/* --- Evolución: acordeón horizontal de las 3 columnas (pulsar título amplía) --- */
.evol-col-tit { user-select: none; }
.evol-3col.evol-tiene-foco .evol-col:not(.foco) { flex: 0 0 2.3rem; overflow: hidden; cursor: pointer; opacity: .85; }
.evol-3col.evol-tiene-foco .evol-col:not(.foco) > :not(.evol-col-tit) { display: none; }
.evol-3col.evol-tiene-foco .evol-col:not(.foco) .evol-col-tit { writing-mode: vertical-rl; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 0; height: auto; position: static; }
.evol-3col.evol-tiene-foco .evol-col:not(.foco):hover { opacity: 1; background: rgba(255,255,255,0.04); }
.evol-3col.evol-tiene-foco .evol-col.foco { flex: 1 1 0; }
/* Justificación de la fila de control de escena: acciones a la derecha */
.cd-guion-fila .cd-escena-adv { margin-left: auto; }
.evol-barra-marcar { flex: 0 0 auto; }
/* En móvil las columnas se apilan: desactiva el colapso vertical del acordeón */
@media (max-width: 820px) {
  .evol-3col.evol-tiene-foco .evol-col:not(.foco) { flex: 1 1 auto; overflow-y: auto; }
  .evol-3col.evol-tiene-foco .evol-col:not(.foco) > :not(.evol-col-tit) { display: block; }
  .evol-3col.evol-tiene-foco .evol-col:not(.foco) .evol-col-tit { writing-mode: horizontal-tb; }
}

/* --- Elementos flotantes arrastrables (REC, toast de avisos) --- */
.rec-indicador { cursor: move; touch-action: none; }
.toast-aviso { touch-action: none; }
.toast-aviso.visible { cursor: move; }
.arrastrando { cursor: grabbing !important; box-shadow: 0 10px 30px rgba(0,0,0,.5) !important; }

/* Toggle "enfocar variables de la escena" en la fila de control */
.cd-foco-var.on { background: rgba(120,180,255,.22); border-color: rgba(120,180,255,.6); font-weight: 700; }

/* --- Ergonomía TÁCTIL (tablet/móvil en la sala): objetivos de toque cómodos.
   Solo afecta a punteros "coarse" (dedo); con ratón/trackpad no cambia nada. --- */
@media (pointer: coarse) {
  .fe-num, input[type="number"], input[type="text"], input[type="search"], input[type="password"], input[type="email"], select { min-height: 38px; font-size: 0.98rem; }
  button, .informe-link, .salir { min-height: 38px; }
  .pestana { min-height: 40px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .prep-sub-cab { min-height: 34px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  .evol-ojo { min-width: 32px; min-height: 30px; font-size: 1rem; }
  .botones-intervencion .atajo-btn { padding: 0.6rem 0.6rem; font-size: 0.9rem; }
  .cd-rama, .cd-atajo, .bg-atajo, .fav-chip-btn, .cfg-btn { min-height: 36px; }
  /* Deja respirar las filas de la rejilla de Evolución al tocar */
  .evol-cel { padding-top: 0.4rem; padding-bottom: 0.4rem; }
}

/* --- Táctil en EVOLUCIÓN: es un panel DENSO de "una pantalla". Los objetivos de
   toque grandes (40px) lo hacían crecer verticalmente y dejaban Variables + la barra
   Actualizar fuera de pantalla sin scroll. Aquí se COMPACTAN sus controles internos
   (siguen siendo tocables ~30px) para que TODO quepa en la tablet sin scroll. --- */
@media (pointer: coarse) {
  .evol-panel button, .evol-panel input, .evol-panel select, .evol-panel a.informe-link,
  .evol-toolbar button, .evol-toolbar input, .evol-toolbar select,
  .cd-guion-fila button, .cd-rama, .cd-atajo, .bg-atajo,
  .evol-cel input, .evol-cel button, .evol-ojo, .fe-num,
  .botones-intervencion .atajo-btn { min-height: 30px; }
  .evol-cel { padding-top: 0.22rem; padding-bottom: 0.22rem; }
  .cd-guion-fila { gap: 0.35rem; }
}

/* Más compactación en táctil para que Evolución quepa sin scroll (tablet):
   oculta la línea "Variables:" del panel del caso (duplica la columna Variables) y
   la ayuda del guion (ocupa 2 líneas); aprieta separaciones. */
@media (pointer: coarse) {
  .cd-vars { display: none; }
  .cd-guion-ayuda { display: none; }
  .evol-panel { gap: 0.3rem; }
  .cd-panel { gap: 0.25rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .evol-cabe { margin: 0; }
}

/* ============================================================================
   RESPONSIVE TÁCTIL SISTÉMICO (tablet/móvil)
   Los paneles "de una sola pantalla" (overflow:hidden, alto exacto) clipaban las
   últimas filas en la altura de una tablet. En punteros táctiles pasan a SCROLL y
   flujo natural: NADA se pierde. La barra de acciones queda fija abajo (accesible).
   Con ratón (pantalla grande) NO cambia nada.
   ============================================================================ */
@media (pointer: coarse) {
  .panel.panel-evolucion, .panel:has(.evol-panel),
  .panel.panel-perif, .panel.panel-casos, .panel.panel-debrief,
  .panel.panel-disp, .panel.panel-guion { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Cuerpos que forzaban alto EXACTO -> alto natural (crecen y el panel scrollea) */
  .evol-panel { height: auto; min-height: 100%; }
  .perif-cont, .disp-cuerpo, .sesion-cuerpo { height: auto; min-height: auto; }
  /* Apila las secciones que estaban en columnas lado a lado (Evolución/Sesión/Disp) */
  .evol-cuerpo.evol-3col, .perif-cont, .disp-cuerpo, .sesion-cuerpo { flex-direction: column; }
  .evol-col { flex: 0 0 auto; overflow-y: visible; min-height: auto; border-left: 0; padding-left: 0; }
  .evol-col-det, .evol-col-mej { border-top: 1px solid var(--c-border); padding-top: 0.4rem; margin-top: 0.3rem; }
  /* El acordeón horizontal se desactiva en táctil (apilamos, no colapsamos) */
  .evol-3col.evol-tiene-foco .evol-col:not(.foco) { flex: 0 0 auto; overflow: visible; }
  .evol-3col.evol-tiene-foco .evol-col:not(.foco) > :not(.evol-col-tit) { display: block; }
  .evol-3col.evol-tiene-foco .evol-col:not(.foco) .evol-col-tit { writing-mode: horizontal-tb; }
  /* Barra de acciones (Detener/Estabilizar/Marcar/Actualizar) SIEMPRE accesible */
  .evol-barra { position: sticky; bottom: 0; z-index: 3; background: var(--c-bg); padding-top: 0.4rem; }
  /* Ya no hace falta ocultar estas (el scroll da sitio): las devolvemos */
  .cd-vars, .cd-guion-ayuda { display: flex; }
  .cd-guion-ayuda { display: block; }
}

/* --- Vista previa de dispositivo (solo lectura) --- */
.disp-prev-caja { max-width: min(95vw, 760px); }
.disp-prev-solo { width: 100%; display: flex; justify-content: center; margin: .3rem 0; }
.disp-prev-solo .disp-prev-marco { position: relative; max-height: 68vh; max-width: 100%; margin: 0 auto; }
.disp-prev-solo .disp-prev-img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; }
.disp-prev-slot { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #7ef0c0;
  font-size: clamp(.55rem, 2.4vw, 1.15rem); background: rgba(0,0,0,.35); border: 1px solid rgba(126,240,192,.4); border-radius: 4px; }
.disp-prev-solo .disp-rect.screen { display: flex; align-items: center; justify-content: center; color: #9fc7ff; border-color: rgba(120,170,255,.5); background: rgba(20,40,80,.35); font-size: .8rem; }
.disp-prev-solo .disp-rect.btn { display: flex; align-items: center; justify-content: center; font-size: .7rem; opacity: .85; }

/* --- Resultados por escena (guion): editor + runner --- */
.guion-res { display: flex; flex-direction: column; gap: .3rem; margin: .3rem 0; }
.guion-res-lista { display: flex; flex-wrap: wrap; gap: .35rem; }
.guion-res-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem;
  background: rgba(120,180,255,.12); border: 1px solid var(--c-border2); border-radius: .5rem; padding: .18rem .2rem .18rem .5rem; }
.cd-guion-res .cd-resultado, button.cd-resultado { background: rgba(120,180,255,.18); border: 1px solid rgba(120,180,255,.55);
  color: inherit; border-radius: 999px; padding: .26rem .7rem; font-size: .82rem; cursor: pointer; }
button.cd-resultado:hover { background: rgba(120,180,255,.32); }
button.cd-resultado:active { transform: scale(.95); }
/* Resultado marcado "solo Resultados" (no al alumno): tono violeta para distinguirlo. */
button.cd-resultado.solo-res { background: rgba(180,140,255,.20); border-color: rgba(180,140,255,.6); }
button.cd-resultado.solo-res:hover { background: rgba(180,140,255,.34); }
/* Toggle de destino dentro del chip del editor. */
.guion-res-dest { font-size: .72rem; border: 1px solid var(--c-border2); background: rgba(120,180,255,.14);
  color: inherit; border-radius: 999px; padding: .1rem .45rem; cursor: pointer; white-space: nowrap; }
.guion-res-dest:hover { background: rgba(120,180,255,.28); }
.guion-res-dest.solo { background: rgba(180,140,255,.22); border-color: rgba(180,140,255,.55); }
/* Selector de sonido propio por rama (favorable/desfavorable) en el editor de escena. */
.guion-rama-son { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .5rem; font-size: .82rem; flex-wrap: wrap; }
.guion-rama-son-lbl { opacity: .85; }
.guion-rama-son.guion-fav .guion-rama-son-lbl { color: #57d38c; }
.guion-rama-son.guion-des .guion-rama-son-lbl { color: #ff8f8f; }
.guion-rama-son select { max-width: 16rem; }
/* Evaluadores conectados (chips con ✕ para quitar). */
.asign-conectados { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .6rem; }
.asign-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem;
  background: rgba(120,180,255,.12); border: 1px solid var(--c-border2); border-radius: 999px; padding: .12rem .2rem .12rem .55rem; }
/* Botón "Actualizar" pendiente: hay cambios tecleados que el alumno aún no ve. */
@keyframes pulsarPend { 0%,100% { box-shadow: 0 0 0 0 rgba(255,176,50,.0); } 50% { box-shadow: 0 0 0 5px rgba(255,176,50,.5); } }
.boton-actualizar.pendiente { animation: pulsarPend 1.05s ease-in-out infinite;
  outline: 2px solid rgba(255,190,70,.9); outline-offset: 1px; }