/* ============================================================================
   PULSAR — Estilos del PANEL DE RESPIRADOR (vent.js)
   Compartido por la pantalla proyectada (alumno) y la previsualizacion del
   instructor. El color de acento lo fija --disp-accent (o el de respaldo).
   ============================================================================ */
.vent-panel { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: #060a14; color: #e6edf3; }
.vent-cab { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.7rem; border-bottom: 1px solid #1c2740; }
.vent-tit { font-weight: 700; color: var(--disp-accent, #5a9be6); letter-spacing: 0.04em; }
.vent-cab-acc { margin-left: auto; display: flex; gap: 0.5rem; }
.vent-btn { font: inherit; cursor: pointer; color: #e6edf3; background: #14213c; border: 1px solid #2c4a6a; border-radius: 8px; padding: 0.25rem 0.6rem; }
.vent-btn:hover { background: #1b2c4e; }
.vent-btn-hold { background: #2a2140; border-color: #6a4aa0; color: #e7d7ff; }
.vent-btn-hold:hover { background: #372a55; }
.vent-maniobra-badge { flex: 0 0 auto; text-align: center; font-size: 0.85rem; font-weight: 700; color: #1a1030; background: linear-gradient(90deg,#ffd27a,#ffc06b); padding: 0.35rem 0.7rem; letter-spacing: 0.2px; }
.vent-cuerpo { flex: 1 1 0; min-height: 0; display: flex; gap: 0.5rem; padding: 0.5rem; }
.vent-ondas { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.vent-cell { flex: 1 1 0; min-height: 0; border: 1px solid #1c2740; border-radius: 8px; overflow: hidden; background: #0a0f1c; }
.vent-canvas { display: block; width: 100%; height: 100%; }
/* Columna de valores MÁS ANCHA: rejilla de 2 celdas por fila con valores GRANDES
   (aprovecha el ancho, antes cada valor dejaba mucho hueco). La rueda va al fondo. */
.vent-vals { flex: 0 0 clamp(240px, 32vw, 460px); display: flex; flex-direction: column; gap: 0.5rem; }
.vent-vals-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 0.45rem; }
.vent-val { min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: #0a0f1c; border: 1px solid #1c2740; border-left: 3px solid var(--disp-accent, #5a9be6); border-radius: 8px; padding: 0.2rem 0.5rem; overflow: hidden; }
.vent-val-lab { font-size: clamp(0.62rem, 1.5vh, 0.95rem); color: #8b98a5; text-transform: uppercase; letter-spacing: 0.05em; }
.vent-val-linea { display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; max-width: 100%; }
.vent-val-num { font-size: clamp(2rem, 6.5vh, 4.4rem); font-weight: 800; line-height: 1; color: var(--disp-accent, #e6edf3); }
.vent-val-u { font-size: clamp(0.58rem, 1.4vh, 0.88rem); color: #8b98a5; }
/* Alarma: valor fuera de rango (Ppico/VT/EtCO2/FR). */
.vent-val.alarma { border-color: #e05050; border-left-color: #e05050; animation: vent-alarma 1s steps(1) infinite; }
.vent-val.alarma .vent-val-num { color: #ff6a6a; }
@keyframes vent-alarma { 0% { background: #1e0f10; } 50% { background: #2f1518; } }
/* Controles interactivos del respirador (el alumno ajusta los settings). */
.vent-val.vent-val-int { align-items: stretch; }
.vent-val-ctrl { display: flex; gap: 5px; justify-content: flex-end; margin-top: 4px; }
.vent-val-b { width: clamp(26px, 4.5vh, 38px); height: clamp(26px, 4.5vh, 38px); border-radius: 7px; border: 1px solid #3a4654; background: #17202c; color: #eaf1fb; font-size: 1.2rem; font-weight: bold; cursor: pointer; line-height: 1; }
.vent-val-b:active { background: #2a3644; }
.vent-menu { position: absolute; right: 0.8rem; top: 2.4rem; z-index: 30; background: #11203c; border: 1px solid #2c4a6a; border-radius: 10px;
  padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.vent-menu-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.9rem; }
.vent-menu select { font: inherit; background: #0d1730; color: #e6edf3; border: 1px solid #2c4a6a; border-radius: 6px; padding: 0.2rem 0.4rem; }

/* Previsualizacion del respirador dentro del instructor (modal). */
.vent-prev-caja { width: 92vw; max-width: 1100px; height: 88vh; max-height: 88vh; padding: 0.9rem 1rem; gap: 0.5rem; }
.vent-prev-caja .qr-tit { flex: 0 0 auto; }
.vent-prev-host { flex: 1 1 auto; min-height: 0; display: flex; }
.vent-prev-caja > .btn-mini { flex: 0 0 auto; align-self: center; padding: 0.35rem 1.4rem; }

/* ============================================================================
   RUEDA DE CONTROL GIRATORIA — consola interactiva del respirador (tema oscuro).
   Misma UX que la rueda de la consola ECMO: chips (elegir) + rueda (girar) + −/+.
   ============================================================================ */
.vent-rueda-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.45rem; border-top: 1px solid #1c2740; background: #0a1120; border-radius: 8px; }
.vent-sel { display: flex; flex-wrap: wrap; gap: 0.3rem; width: 100%; justify-content: center; }
.vent-sel-b { flex: 1 1 27%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0.3rem 0.2rem; border-radius: 8px; border: 1px solid #2c4a6a; background: #14213c; color: #cfe0f5; cursor: pointer; min-width: 60px; }
.vent-sel-b.activo { background: #1560c4; color: #fff; border-color: #4a8fe0; }
.vent-sel-lab { font-size: clamp(0.5rem, 1.3vh, 0.72rem); opacity: 0.85; }
.vent-sel-val { font-size: clamp(0.8rem, 2vh, 1.2rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.vent-rueda { position: relative; flex: 0 0 auto; width: clamp(84px, 15vh, 130px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.vent-rueda:active, .vent-rueda.girando { cursor: grabbing; }
.vent-rueda-in { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 34%, #2a3852, #131c2c); border: 4px solid #33445e; box-shadow: 0 5px 12px rgba(0,0,0,0.4), inset 0 2px 10px rgba(255,255,255,0.08); display: flex; align-items: flex-start; justify-content: center; }
.vent-rueda.girando .vent-rueda-in { box-shadow: 0 0 0 3px rgba(74,143,224,0.55), 0 6px 14px rgba(0,0,0,0.45), inset 0 2px 10px rgba(255,255,255,0.12); }
.vent-rueda-marca { width: 11%; aspect-ratio: 1; margin-top: 6%; border-radius: 50%; background: #4a8fe0; box-shadow: 0 0 5px rgba(74,143,224,0.9); }
.vent-rueda-centro { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 2; }
.vent-c-lab { font-size: clamp(0.5rem, 1.3vh, 0.72rem); color: #9fc0e8; font-weight: 700; }
.vent-c-val { font-size: clamp(1rem, 3vh, 1.8rem); color: #fff; font-weight: bold; line-height: 1; font-variant-numeric: tabular-nums; }
.vent-c-un { font-size: clamp(0.44rem, 1.1vh, 0.62rem); color: #7f95ad; }
.vent-mm { display: flex; gap: 0.4rem; }
.vent-mm-b { width: clamp(34px, 5.5vh, 48px); height: clamp(30px, 4.5vh, 40px); border-radius: 8px; border: 1px solid #2c4a6a; background: #14213c; color: #9fc0e8; font-size: 1.3rem; font-weight: bold; cursor: pointer; line-height: 1; }
.vent-mm-b:active { background: #1b2c4e; }