@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    margin: 0;
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: #000;
}

.intro {
    position: fixed;
    inset: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.7s ease;
}

.intro.is-finished {
    opacity: 0;
    pointer-events: none;
}

.intro-video {
    position: absolute;
    width: 300px;
    max-width: 36vw;
}

.hidden { display: none !important; }

.main { width: 100%; height: 100%; position: relative; }
.background-video { width: 100%; height: 100%; object-fit: cover; }

.logo { position: absolute; top: 20px; width: 120px; }
.logo.left { left: 20px; }
.logo.right { right: 20px; }

.config-wrapper {
    position: fixed;
    top: 0;
    right: -30%;
    width: 30%;
    height: 100%;
    pointer-events: none;
    transition: right 0.45s ease, width 0.45s ease, opacity 0.3s ease;
    z-index: 30;
}
.config-wrapper.active { right: 0; }
/* Margen simétrico a ambos lados del panel: el mismo valor a izquierda y
   derecha (13% del ancho, o 250px como mínimo si la pantalla es más
   estrecha — el suelo de seguridad que evita pisar el logo RDI). Al usar
   el mismo margen en los dos lados con la misma fórmula, quedan siempre
   iguales, no solo protegido el izquierdo. */
.config-wrapper.form-expanded {
    width: calc(100% - 2 * max(13vw, 250px));
    right: -100%;
}
.config-wrapper.form-expanded.active {
    right: max(13vw, 250px);
}
.config-wrapper.tabs-hidden .side-tabs {
    opacity: 0;
    pointer-events: none;
}

/* Ancho base del panel izquierdo (Workplace/Technology/etc.) y estado
   base de su botón de cerrar. Declarados aquí, ANTES de cualquier
   media query del archivo, a propósito: si viviesen más abajo, junto
   al resto de reglas de .landing-info-wrapper, ganarían siempre por
   ir después en el archivo, sin importar el tamaño de pantalla (esto
   es justo lo que pasó y rompió el comportamiento responsive). */
.landing-info-wrapper {
    width: 30%;
}
.landing-info-close {
    display: none;
}


.side-tabs {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    opacity: 1;
    z-index: 40;
    transition: opacity 0.28s ease;
}

.side-tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transform-origin: center;
    background: #1d262d;
    color: #ffffff;
    padding: 18px 10px;
    cursor: pointer;
    border: none;
    border-radius: 0 12px 12px 0;
    box-shadow: none;
    transition: background 0.2s ease;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
}

.side-tab:hover {
    background: #5a85a8;
    color: #ffffff;
}

.side-tab.active {
    background: #5a85a8;
    color: #ffffff;
    transform: rotate(180deg);
}

.config-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background: rgba(22, 34, 46, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
    box-sizing: border-box;
    pointer-events: auto;
    box-shadow: none;
    overflow: hidden;
    z-index: 30;
    color: #ffffff;
}

.config-panel.country-dropdown-open {
    overflow: visible;
}

.config-panel.country-dropdown-open .form-row.two {
    overflow: visible;
}

.panel-header { margin-bottom: 24px; }
.panel-kicker {
    margin: 0 0 10px 0;
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.config-panel h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}
.panel-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.18);
    margin: 18px 0;
}

.panel-content { display: none; height: 100%; }
.panel-content.active { display: block; height: 100%; }
.panel-step { position: relative; height: 100%; }
.panel-step.step-transition-out-left { animation: panelStepOutLeft 0.28s ease forwards; }
.panel-step.step-transition-out-right { animation: panelStepOutRight 0.28s ease forwards; }
.panel-step.step-transition-in-left { animation: panelStepInLeft 0.38s ease forwards; }
.panel-step.step-transition-in-right { animation: panelStepInRight 0.38s ease forwards; }
#intro-step { display: flex; flex-direction: column; justify-content: flex-start; }
.panel-static { display: flex; align-items: flex-start; justify-content: flex-start; }

.panel-message { margin-bottom: 28px; }
.panel-message p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    font-weight: 400;
    text-align: left;
}
.panel-links {
    display: flex;
    gap: 26px;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.panel-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 4px;
}
.panel-links a:hover { color: #ffffff; border-bottom-color: rgba(255,255,255,0.8); }
.panel-cta { margin-bottom: 28px; }

/* ── Recovery block: single consolidated group ── */
.intro-recovery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.intro-recovery-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
}
.intro-recovery-row-wrap {
    margin-top: 12px;
}
.intro-recovery-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.intro-recovery-input,
.intro-recovery-button {
    flex: 0 0 47.5%;
    width: 47.5%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 6px;
    font-family: inherit;
}
.intro-recovery-gap {
    flex: 0 0 5%;
    width: 5%;
}
.intro-recovery-button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro-recovery-input {
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #ffffff;
    color: #1a2530;
    font-size: 12px;
    outline: none;
}
.intro-recovery-input::placeholder { color: #5c6470; }
.intro-recovery-input:focus {
    border-color: #4a8fa8;
}
.intro-recovery-button {
    white-space: nowrap;
}

/* Primary button */
.tech-button {
    display: inline-block;
    width: auto;
    padding: 13px 28px;
    border: none;
    background: #4a8fa8;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
    text-align: center;
    border-radius: 6px;
    box-shadow: none;
}
.tech-button:hover { background: #5ba8c4; }

/* Outline button (Restore) — white fill */
.tech-button-outline {
    padding: 0 6px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #ffffff;
    color: #5c6470;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: center;
}
.tech-button-outline:hover {
    background: #4a8fa8;
    color: #ffffff;
}

/* Scroll discreto único para todo el configurador — mismo aspecto que ya
   tenía el panel de resumen y el de detalle de sala. Se usa aquí y también
   en .step-split-right / .room-tab-panel (ver más abajo), así el scroll se
   ve y se comporta igual en cualquier parte de la web. */
.app-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.app-scroll::-webkit-scrollbar { width: 8px; }
.app-scroll::-webkit-scrollbar-track { background: transparent; }
.app-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.app-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
    background-clip: padding-box;
}

/* Los 4 pasos del formulario: SIEMPRE con su propio scroll interno (a
   cualquier ancho de ventana), en vez de depender de que el contenido
   quepa exacto — así nunca se recortan campos si la ventana es corta
   o estrecha. .config-panel sigue con overflow:hidden por fuera (para
   las animaciones de transición entre pasos); el scroll real ocurre
   aquí dentro, con el mismo aspecto que el resto de la web gracias a
   la clase .app-scroll (puesta en el HTML de cada uno). */
#form-step,
#rooms-step,
#user-step,
#thank-you-step {
    padding: 90px 50px 50px 50px;
    box-sizing: border-box;
}

#form-step { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.form-header-block {
    margin-bottom: 64px;
}
.form-header-title {
    white-space: normal;
    font-size: 28px;
}

.form-subtitle { margin-bottom: 12px; }

.step-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    column-gap: 18px;
    flex: 1;
    min-height: 0;
}

/* Las 3 páginas del formulario usan el mismo patrón: el contenido crece
   a su altura natural y es el propio paso (#form-step / #rooms-step /
   #user-step, con .app-scroll) quien hace scroll de toda la página si
   hace falta — un único scroll, sin contenedores anidados con su propio
   scroll interno (eso es lo que generaba zonas donde la rueda del ratón
   no scrolleaba nada, al no quedar claro qué contenedor debía capturar
   el gesto). align-items:start evita que el panel de resumen de la
   derecha se estire para igualar la altura del contenido, que puede
   ser más alto que la pantalla. */
.step-split-layout-form,
.step-split-layout-rooms {
    min-height: auto;
    align-items: start;
}
.step-split-layout-form .step-split-left,
.step-split-layout-rooms .step-split-left {
    min-height: auto;
}

.step-split-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.step-split-right {
    min-width: 0;
    min-height: 0;
    padding: 8px 10px 8px 8px;
    box-sizing: border-box;
}

.step-split-layout-form .step-split-right,
.step-split-layout-rooms .step-split-right {
    max-height: min(70vh, 640px);
}

.config-summary-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.config-summary-card {
    width: 95%;
    align-self: center;
    box-sizing: border-box;
    border: none;
    box-shadow: 0 0 16px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.14), 0 8px 18px rgba(0,0,0,0.18);
    padding: 11px;
    background: rgba(22, 34, 46, 0.65);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    transform-origin: center center;
    cursor: default;
}

.config-summary-card:hover {
    transform: scale(1.008);
    box-shadow: 0 0 20px rgba(0,0,0,0.24), 0 0 10px rgba(0,0,0,0.16), 0 10px 22px rgba(0,0,0,0.2);
    cursor: default;
}

.config-summary-card-value {
    font-size: 16px;
    line-height: 1.25;
    color: #ffffff;
    word-break: break-word;
}

.config-summary-card-project {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.config-summary-card-project .config-summary-card-value {
    text-align: left;
    font-weight: 700;
    flex: 1 1 auto;
    min-width: 0;
}

.config-summary-card-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.config-summary-card-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex: 0 0 auto;
}

.config-summary-card-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.config-summary-card-multiplier {
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    font-weight: 600;
}

.config-summary-card-room-wall {
    gap: 10px;
}

.config-summary-room-name {
    font-size: 14px;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
    font-weight: 600;
    word-break: break-word;
}


.config-summary-wall-section-header {
    display: block;
    width: 100%;
}

.config-summary-wall-section-title {
    display: block;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    margin-bottom: 6px;
}

.config-summary-wall-section-divider {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.config-summary-wall-media {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.config-summary-wall-spec {
    font-size: 12px;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.config-summary-wall-text-block {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-summary-wall-copy-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-summary-wall-description,
.config-summary-wall-cladding-copy {
    font-size: 11px;
    line-height: 1.35;
    color: #ffffff;
    text-align: left;
}

.config-summary-wall-stage {
    position: relative;
    min-height: 58px;
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.config-summary-wall-cladding {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
    pointer-events: none;
}

.config-summary-wall-figure {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.config-summary-wall-figure-placeholder {
    width: 118px;
    height: 74px;
    background: rgba(255, 255, 255, 0.08);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.16);
}

.config-summary-wall-figure-lcd {
    display: grid;
    gap: 1px;
    padding: 1px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.26);
}

.config-summary-wall-cell {
    display: block;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 0 0 1px rgba(65, 73, 84, 0.18);
}

.config-summary-workplace-section {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.config-summary-workplace-role-line {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-summary-workplace-role-label {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
}

.config-summary-workplace-role-items {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.config-summary-workplace-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
}

.config-summary-inline-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex: 0 0 auto;
}

.config-summary-inline-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.config-summary-workplace-multiplier,
.config-summary-workplace-count,
.config-summary-location-label,
.config-summary-feature-label {
    font-size: 11px;
    line-height: 1;
    color: #ffffff;
    font-weight: 600;
}

.config-summary-monitor-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.config-summary-monitor-value,
.config-summary-monitor-multiplier,
.config-summary-monitor-count {
    font-size: 11px;
    line-height: 1;
    color: #ffffff;
    font-weight: 600;
}

.config-summary-location-item {
    gap: 4px;
}

.config-summary-location-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.03em;
}

.config-summary-console-model-item {
    display: inline-flex;
    align-items: center;
}

.config-summary-console-model-image {
    width: 50px;
    height: 31px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
}

.config-summary-feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.config-summary-feature-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.step-split-divider {
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
}

.step-split-layout-form .project-form {
    height: auto;
}
.form-subtitle p {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: #ffffff;
}

.project-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
}

/* Sistema de filas de campos, unificado para las 3 páginas del formulario
   (Project details / Rooms / User data).
   - align-items: start evita que Grid estire las cajas de un campo para
     igualar la altura de una celda vecina más alta (esto era la causa real
     de que el hueco título-campo se viera distinto según la fila).
   - Las columnas usan auto-fit/minmax, así que cada fila reduce su número
     de columnas sola según el espacio disponible, sin necesitar un
     breakpoint específico por tipo de fila. */
/* ===========================================================
   SISTEMA DE CAMPOS — usado en las 3 páginas del formulario
   (Project details / Rooms / User data) y en el contenido de
   salas generado dinámicamente por JS (reutiliza estas mismas
   clases, así que hereda todo esto automáticamente).

   Dos piezas:
   .form-row   → fila que reparte sus .form-field entre sí.
   .form-field → una unidad label + input/select.

   Se usa Flexbox (no Grid) a propósito: con Grid, una celda con
   contenido más alto que sus vecinas (ej. un label con icono de
   info) estira TODA la fila y desalinea el hueco label→campo de
   las demás celdas aunque su "gap" sea idéntico. Con Flexbox +
   align-items:flex-start ese problema desaparece de raíz, y el
   wrap (flex-wrap + flex-basis en %) da el responsive sin tener
   que definir columnas fijas por breakpoint.
   =========================================================== */
.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 16px;
    position: relative;
    z-index: 1;
}

/* Proporción de cada campo dentro de su fila (ancho "ideal"; si no cabe,
   se envuelve solo a la línea siguiente gracias a flex-wrap). */
.form-row.one .form-field     { flex-basis: 100%; }
.form-row.two .form-field,
.form-row.env-row .form-field { flex-basis: calc(50% - 8px); min-width: 200px; }
.form-row.three .form-field   { flex-basis: calc(33.333% - 11px); min-width: 150px; }
.form-row.four .form-field    { flex-basis: calc(25% - 12px); min-width: 130px; }
.form-row.six .form-field     { flex-basis: calc(16.666% - 12px); min-width: 76px; }

/* Fila de Operators/Supervisors (Workplace > Users): 6 campos por línea
   en pantalla completa. Usa container queries (mide el ancho real del
   bloque, no el de toda la ventana) para que, si no caben los 6, salten
   SIEMPRE en grupos completos — 3+3 y, si hace falta, 2+2+2 — nunca deja
   un campo suelto en su propia línea. */
.users-row {
    column-gap: 10px;
}
@container (max-width: 620px) {
    .users-row .form-field {
        flex-basis: calc(33.333% - 8px);
        min-width: 0;
    }
}
@container (max-width: 360px) {
    .users-row .form-field {
        flex-basis: calc(50% - 6px);
    }
}

/* CONTENEDOR TEXTO + BACK */
.back-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* X universal de cerrar todo el panel (configurador expandido o pestañas
   de la derecha). Es una sola, fija en la esquina de #config-wrapper —
   no se mueve con el scroll del contenido y no depende de la animación
   de aparición de cada paso (evita el bug que ya vimos con elementos que
   a veces no llegaban a revelarse). Solo se muestra cuando el panel
   ocupa toda la pantalla, porque es el único caso en que "clic fuera
   para cerrar" deja de ser posible al no quedar fondo visible. */
.panel-close-x {
    display: none;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 40;
    pointer-events: auto;
    background: rgba(15, 23, 32, 0.35);
    border: none;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.panel-close-x:hover {
    color: #ffffff;
    background: rgba(15, 23, 32, 0.55);
}

/* TEXTO IZQUIERDA */
.form-title {
    margin: 0;
}

/* BOTÓN BACK (sin estilo feo por defecto) */
.back-inline {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* HOVER sutil */
.back-inline:hover {
    color: #ffffff;
}

/* Espaciado título-campo: un único valor, usado en las 3 páginas
   sin ninguna excepción por página. */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.form-field label,
.rooms-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    min-height: 14px;
}
.form-field input,
.country-trigger {
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(15, 23, 32, 0.18);
    border-radius: 6px;
    background: #ffffff;
    color: #0f1720;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

/* La lista de opciones que despliega un <select> nativo la dibuja el
   propio sistema operativo/navegador, fuera del control de la página —
   por eso nunca se podía redondear por mucho CSS que le pusiéramos al
   select o a su contenedor. La solución real es dejar de usar la lista
   nativa: el <select> se queda oculto (visualmente, no con display:none,
   para no perder su validación ni su valor) y hace de "fuente de la
   verdad" de los datos exactamente igual que antes; encima se construye
   un botón + una lista propios, hechos con <div>, que sí podemos
   redondear, colorear y animar al 100%. */
.select-shell {
    position: relative;
    height: 42px;
    border: 1px solid rgba(15, 23, 32, 0.18);
    border-radius: 6px;
    background: #ffffff;
    box-sizing: border-box;
    z-index: 1;
}
.select-shell.open {
    z-index: 500;
}
.select-shell select {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 0 34px 0 12px;
    border: none;
    background: none;
    font-size: 13px;
    font-family: inherit;
    color: #0f1720;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.custom-select-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.custom-select-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.custom-select-value.is-placeholder {
    color: #5c6470;
}
.custom-select-arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 7px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f1720' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
    transition: transform 0.15s ease;
}
.select-shell.open .custom-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select-dropdown {
    position: fixed;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 32, 0.18);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
    z-index: 20000;
    padding: 6px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 32, 0.28) transparent;
}
.custom-select-dropdown.hidden {
    display: none;
}
.custom-select-dropdown::-webkit-scrollbar { width: 8px; }
.custom-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 32, 0.24);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.custom-select-option {
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    color: #0f1720;
    cursor: pointer;
}
.custom-select-option:hover {
    background: rgba(15, 23, 32, 0.06);
}
.custom-select-option.active {
    background: rgba(74, 143, 168, 0.14);
    font-weight: 600;
}
.custom-select-option.is-disabled {
    color: rgba(15, 23, 32, 0.32);
    cursor: not-allowed;
}
.custom-select-option.is-disabled:hover {
    background: none;
}

.select-shell:focus-within {
    border-color: #0f1720;
    box-shadow: 0 0 0 3px rgba(15, 23, 32, 0.08);
}
.select-shell:has(select.field-error) {
    border-color: #e24b4a !important;
    border-width: 2px !important;
    background-color: #eef0f2 !important;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.15) !important;
}
.select-shell:has(select.field-error) .custom-select-value {
    color: #0f1720 !important;
}

.users-row .select-shell {
    height: 36px;
}
.users-row .custom-select-trigger,
.users-row .custom-select-option {
    font-size: 12px;
}

.room-card .select-shell {
    height: 34px;
}
.room-card .custom-select-trigger {
    font-size: 12px;
    padding: 0 28px 0 10px;
}
.room-card .custom-select-arrow {
    right: 10px;
}

.form-field input:focus,
.form-field select:focus,
.country-trigger:focus,
.country-search:focus {
    border-color: #0f1720;
    box-shadow: 0 0 0 3px rgba(15, 23, 32, 0.08);
}

/* Texto "vacío" (placeholder) consistente en toda la página del formulario.
   Mismo color/tipografía que ya usaba "Project name" cuando está sin
   rellenar, aplicado también a los <select> (que no tienen ::placeholder
   real) apoyándose en required + <option value="" hidden> ya presentes
   en el HTML, y al selector de país personalizado. */
.form-field input::placeholder {
    color: #5c6470;
    font-family: inherit;
    font-size: 13px;
    opacity: 1;
}

.form-field select:required:invalid {
    color: #5c6470;
}

.form-field select:required:valid {
    color: #0f1720;
}

.country-trigger-text.is-placeholder {
    color: #5c6470;
}

input.field-error,
.country-trigger.field-error {
    border-color: #e24b4a !important;
    border-width: 2px !important;
    background-color: #eef0f2 !important;
    color: #0f1720 !important;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.15) !important;
}
.country-trigger.field-error .country-trigger-text {
    color: #0f1720 !important;
}

/* Error de grupo: "selecciona al menos uno de..." — se aplica al
   contenedor de varias opciones (filas de VOIP) en vez de a un único
   campo. Escopado a estos grupos concretos, no a cualquier <div>, para
   no interferir con elementos que ya tienen su propio estilo de error
   (como la tarjeta de "Add room"). */
.voip-destinations-row.field-error,
.voip-simple-rows.field-error {
    border: 2px solid #e24b4a;
    border-radius: 8px;
    background-color: #eef0f2;
    padding: 8px;
    margin: -8px;
}

/* Pequeña vibración en el botón al intentar avanzar con errores sin
   corregir — refuerzo visual de "aquí no", sin ser molesto. */
@keyframes fieldShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.shake-error {
    animation: fieldShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.field-error-text {
    margin: 6px 0 0 0;
    color: #ff8a8a;
    font-size: 12px;
    line-height: 1.4;
}

/* Dentro de .form-field, el gap de 20px entre hermanos ya separa bastante;
   se compensa (sin pegarlo del todo) para que quede a una distancia
   cómoda del campo. */
.form-field > .field-error-text {
    margin-top: -6px;
}

.add-room-card.field-error {
    border-color: #e24b4a !important;
    border-width: 2px !important;
    background-color: #eef0f2 !important;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.15) !important;
}

.country-field,
.custom-country-select {
    position: relative;
    z-index: 1000;
}
.custom-country-select.open {
    z-index: 9999;
}
.country-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}
.country-trigger-left {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}
.country-trigger-flag,
.country-option-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.08);
    flex: 0 0 auto;
}
.country-trigger-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.country-trigger-arrow { margin-left: 10px; flex: 0 0 auto; }

.country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    background: white;
    border: 1px solid rgba(15, 23, 32, 0.18);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
    z-index: 99999;
    padding: 10px 12px;
}
.country-search {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(15, 23, 32, 0.18);
    box-sizing: border-box;
    margin-bottom: 8px;
    color: #0f1720;
    font-family: inherit;
}
.country-options {
    max-height: 210px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 32, 0.28) transparent;
}
.country-options::-webkit-scrollbar { width: 8px; }
.country-options::-webkit-scrollbar-track { background: transparent; }
.country-options::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 32, 0.24);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.country-options::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 32, 0.4);
    background-clip: padding-box;
}
.country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    color: #0f1720;
    font-size: 13px;
    font-family: inherit;
}
.country-option:hover,
.country-option:focus {
    background: rgba(15, 23, 32, 0.06);
    outline: none;
}

.other-inline.hidden {
    visibility: hidden;
}

.rooms-grid-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 4px;
    flex: 0 0 auto;
    max-height: 260px;
    align-content: start;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.rooms-grid::-webkit-scrollbar { width: 8px; }
.rooms-grid::-webkit-scrollbar-track { background: transparent; }
.rooms-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.rooms-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
    background-clip: padding-box;
}

.room-card,
.add-room-card {
    border: 1px solid rgba(15,23,32,0.18);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(15,23,32,0.1);
    padding: 10px;
    background: #fff;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.room-card {
    position: relative;
    padding-top: 24px;
}

.room-card-delete {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: rgba(15,23,32,0.5);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.room-card-delete:hover {
    color: rgba(15,23,32,0.9);
}

.room-card input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(15,23,32,0.18);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}

.add-room-card {
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
}
.add-room-plus {
    font-size: 32px;
    line-height: 1;
    color: #000;
}
.add-room-text {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: #000;
}

.form-actions {
    margin-top: auto;
    padding-top: 2px;
}

.step-split-left-rooms .form-actions {
    margin-top: 18px;
}

.privacy-notice {
    margin: 0 0 12px 0;
    max-width: 480px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
}
.privacy-notice a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.privacy-notice a:hover {
    color: #ffffff;
}

.rooms-step-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.room-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: none;
    padding-bottom: 10px;
}

.room-tab {
    border: none;
    outline: none;
    box-shadow: none;
    appearance: none;
    background: rgba(22, 34, 46, 0.65);
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    border-radius: 0;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.room-tab::after {
    display: none;
}

.room-tab.has-error {
    box-shadow: inset 0 -3px 0 #e24b4a;
}
.room-tab.has-error::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e24b4a;
    margin-right: 6px;
    vertical-align: middle;
}

.room-tab.active {
    color: #ffffff;
    background: rgb(114, 124, 245);
    box-shadow: 0 8px 18px rgba(114, 124, 245, 0.28);
    transform: translateY(-1px);
}

.room-tab-panels {
    border: 1px solid rgba(15, 23, 32, 0.12);
    background: rgba(22, 34, 46, 0.65);
    padding: 14px;
    box-sizing: border-box;
    border-radius: 0;
}

.room-tab-panel {
    display: none;
    box-sizing: border-box;
}

.room-tab-panel.active {
    display: block;
}

.room-tab-placeholder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.room-tab-placeholder h3 {
    margin: 0;
    font-size: 20px;
    color: #ffffff;
}

.room-tab-placeholder p {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
}

.config-panel.reveal-instant .form-reveal > *,
.config-panel.reveal-instant .panel-reveal > *,
.config-panel.reveal-instant .demo-reveal > *,
.config-panel.reveal-instant .resources-reveal > *,
.config-panel.reveal-instant .form-reveal,
.config-panel.reveal-instant .intro-recovery-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.panel-reveal,
.demo-reveal,
.resources-reveal,
#form-step .form-reveal {
    overflow: hidden;
}

.panel-reveal > *:not(.intro-recovery-row),
.panel-reveal > span,
#form-step .form-reveal > *:not(#rooms-grid):not(.country-field),
.demo-reveal > *,
.resources-reveal > * {
    display: block;
    opacity: 0;
    transform: translateY(100%);
}

/* El .form-row (que también es .form-reveal) tiene como hijo directo al
   propio .form-field, y este SIEMPRE necesita seguir siendo flex (para que
   el gap label→campo funcione), aunque la animación de arriba fuerce
   display:block de forma genérica a los hijos de cualquier .form-reveal. */
#form-step .form-reveal > .form-field:not(#rooms-grid):not(.country-field) {
    display: flex;
}

#form-step .form-reveal > .country-field {
    display: flex;
    opacity: 0;
}

#form-step .form-reveal > #rooms-grid {
    opacity: 0;
    transform: translateY(100%);
}

.intro-recovery-row {
    opacity: 0;
    transform: translateY(100%);
}

.config-panel.revealed-intro .panel-reveal > *,
.config-panel.revealed-intro .panel-reveal > span,
.config-panel.revealed-intro .intro-recovery-row { animation: infoClipUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.config-panel.revealed-intro .panel-reveal:nth-child(1) > * { animation-delay: 0.08s; }
.config-panel.revealed-intro .panel-reveal:nth-child(2) > * { animation-delay: 0.28s; }
.config-panel.revealed-intro .panel-reveal:nth-child(3) > * { animation-delay: 0.48s; }
.config-panel.revealed-intro .panel-reveal:nth-child(4) > * { animation-delay: 0.68s; }
.config-panel.revealed-intro .panel-reveal:nth-child(5).intro-recovery-row-wrap .intro-recovery-row { animation-delay: 0.78s; }

.config-panel.revealed-form #form-step .form-reveal > *:not(.country-field) { animation: infoClipUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.config-panel.revealed-form #form-step .form-reveal:nth-child(1) > *:not(.country-field) { animation-delay: 0.05s; }
.config-panel.revealed-form #form-step .form-reveal:nth-child(2) > *:not(.country-field) { animation-delay: 0.18s; }
.config-panel.revealed-form #form-step .form-reveal:nth-child(3) > *:not(.country-field) { animation-delay: 0.31s; }
.config-panel.revealed-form #form-step .form-reveal:nth-child(4) > *:not(.country-field) { animation-delay: 0.44s; }
.config-panel.revealed-form #form-step .form-reveal:nth-child(5) > *:not(.country-field) { animation-delay: 0.57s; }
.config-panel.revealed-form #form-step .form-reveal:nth-child(6) > *:not(.country-field) { animation-delay: 0.70s; }

.config-panel.revealed-form #form-step .form-reveal > .country-field {
    animation: infoFadeOpacityOnly 0.5s ease forwards;
    animation-delay: 0.18s;
}

@keyframes infoFadeOpacityOnly {
    from { opacity: 0; }
    to { opacity: 1; }
}

.config-panel.revealed-demo .demo-reveal > * { animation: infoClipUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.config-panel.revealed-demo .demo-reveal-1 > * { animation-delay: 0.08s; }
.config-panel.revealed-demo .demo-reveal-2 > * { animation-delay: 0.28s; }

.config-panel.revealed-resources .resources-reveal > * { animation: infoClipUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.config-panel.revealed-resources .resources-reveal-1 > * { animation-delay: 0.08s; }
.config-panel.revealed-resources .resources-reveal-2 > * { animation-delay: 0.24s; }
.config-panel.revealed-resources .resources-reveal-3 > * { animation-delay: 0.40s; }
.config-panel.revealed-resources .resources-reveal-4 > * { animation-delay: 0.56s; }
.config-panel.revealed-resources .resources-reveal-5 > * { animation-delay: 0.72s; }


@keyframes panelStepOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-42px); }
}

@keyframes panelStepOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(42px); }
}

@keyframes panelStepInLeft {
    from { opacity: 0; transform: translateX(-42px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes panelStepInRight {
    from { opacity: 0; transform: translateX(42px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes panelFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.config-panel.revealed-rooms .form-reveal {
    animation: panelFadeUp 0.5s ease forwards;
}

.config-panel.revealed-rooms .form-reveal:nth-child(1) { animation-delay: 0.05s; }
.config-panel.revealed-rooms .form-reveal:nth-child(2) { animation-delay: 0.13s; }
.config-panel.revealed-rooms .form-reveal:nth-child(3) { animation-delay: 0.21s; }

#rooms-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#user-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.user-step-content {
    flex: 0 0 auto;
}

.user-form-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    align-items: start;
}

.user-preview-card {
    max-height: min(70vh, 520px);
}

.user-form-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.user-type-row {
    align-items: start;
}

.user-preview-card {
    border: 1px solid rgba(15, 23, 32, 0.12);
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.user-preview-image-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.config-panel.revealed-user .form-reveal {
    animation: panelFadeUp 0.5s ease forwards;
}

.config-panel.revealed-user .form-reveal:nth-child(1) { animation-delay: 0.05s; }
.config-panel.revealed-user .form-reveal:nth-child(2) { animation-delay: 0.13s; }
.config-panel.revealed-user .form-reveal:nth-child(3) { animation-delay: 0.21s; }

#thank-you-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.thank-you-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.thank-you-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #ffffff;
    max-width: 720px;
}

.thank-you-text a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.thank-you-text a:hover {
    border-bottom-color: rgba(255, 255, 255, 0.75);
}

.thank-you-reference {
    margin: 0;
}

.thank-you-reference-code {
    display: inline-block;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #ffffff;
}

.config-panel.revealed-thankyou .form-reveal {
    animation: panelFadeUp 0.5s ease forwards;
}

.config-panel.revealed-thankyou .form-reveal:nth-child(1) { animation-delay: 0.05s; }
.config-panel.revealed-thankyou .form-reveal:nth-child(2) { animation-delay: 0.13s; }
.config-panel.revealed-thankyou .form-reveal:nth-child(3) { animation-delay: 0.21s; }

.room-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.room-section h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #ffffff;
}

.room-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.room-block-divider {
    width: 100%;
    height: 1px;
    background: rgba(15, 23, 32, 0.18);
    margin: 4px -14px 0 -14px;
}

.room-block h4 {
    display: block;
    box-sizing: border-box;
    margin: 0 -14px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.2;
    color: #ffffff;
    background: rgb(88, 98, 112);
    border-radius: 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}
.room-section > .room-block:first-child > h4 {
    margin-top: -14px;
}

.workplace-subblock {
    display: flex;
    flex-direction: column;
    gap: 10px;
    container-type: inline-size;
}

.workplace-subblock h5 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

.features-row {
    align-items: end;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    font-size: 13px;
    color: #ffffff;
}

.checkbox-row input[type="checkbox"] {
    margin: 0;
}

.room-conditional-fields.hidden {
    display: none;
}

.room-block-placeholder {
    min-height: 56px;
    border: 1px dashed rgba(15, 23, 32, 0.18);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    box-sizing: border-box;
}

.checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #ffffff;
    cursor: pointer;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #ffffff;
}

/* Variante intencional: filas densas de 6 columnas (Operators, Monitors...)
   usan controles algo más compactos que el resto del formulario. No afecta
   al espaciado label→campo, que sigue siendo el mismo en toda la web. */
.users-row .form-field input,
.users-row .form-field select {
    height: 36px;
    font-size: 12px;
}

.users-row .form-field label {
    font-size: 10px;
}

.videowall-layout {
    display: block;
}

.videowall-diagram-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 220px;
}

.videowall-diagram-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.videowall-rectangle {
    width: 180px;
    height: 120px;
    border: 1px solid rgba(15, 23, 32, 0.22);
    background: rgba(15, 23, 32, 0.04);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 32, 0.04);
    transition: width 0.2s ease, height 0.2s ease;
}

.videowall-axis-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}

.axis-y {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.videowall-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.videowall-type-row {
    align-items: start;
}

/* Mismo tamaño/estilo de texto para TODOS los checkboxes de Videowall,
   Workplace y VOIP (antes solo aplicaba a dos de los tres bloques, por
   eso "Include decorative cladding" o "Pop-up monitor..." se veían más
   grandes que "Height-adjustable workplaces"). */
.room-block .checkbox-row span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* FusionWall / LCD Wall: se reparten la fila al 50% cada uno y solo
   saltan de línea cuando de verdad no caben (antes tenían width:100%,
   así que SIEMPRE se apilaban, nunca se veían en la misma línea). */
.videowall-type-row .checkbox-row {
    flex: 1 1 calc(50% - 8px);
    min-width: 230px;
    width: auto;
}

.checkbox-label-with-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.field-info-trigger {
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.field-info-trigger:hover,
.field-info-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.lcd-wall-grid {
    display: grid;
    gap: 2px;
    padding: 2px;
    box-sizing: border-box;
    background: #cfd5dc;
}

.lcd-wall-cell {
    display: block;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 32, 0.12);
}

.videowall-diagram-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 260px;
}

.videowall-middle-band {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.videowall-cladding-frame {
    position: absolute;
    border: 1px solid rgba(15, 23, 32, 0.28);
    background: rgba(15, 23, 32, 0.02);
    box-sizing: border-box;
    pointer-events: none;
}

.videowall-rectangle {
    width: 180px;
    height: 120px;
    border: 1px solid rgba(15, 23, 32, 0.22);
    background: #d9dde2;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 32, 0.04);
    transition: width 0.2s ease, height 0.2s ease;
}

.cladding-top-measure,
.cladding-bottom-measure {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.side-measure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 28px;
}

.measure-line.horizontal {
    width: 120px;
    height: 1px;
    background: rgba(15, 23, 32, 0.35);
    position: relative;
}

.measure-line.horizontal::before,
.measure-line.horizontal::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 1px;
    height: 7px;
    background: rgba(15, 23, 32, 0.35);
}

.measure-line.horizontal::before {
    left: 0;
}

.measure-line.horizontal::after {
    right: 0;
}

.measure-line.vertical {
    width: 1px;
    height: 70px;
    background: rgba(15, 23, 32, 0.35);
    position: relative;
}

.measure-line.vertical::before,
.measure-line.vertical::after {
    content: "";
    position: absolute;
    left: -3px;
    width: 7px;
    height: 1px;
    background: rgba(15, 23, 32, 0.35);
}

.measure-line.vertical::before {
    top: 0;
}

.measure-line.vertical::after {
    bottom: 0;
}

.measure-text {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.videowall-cladding-frame.hidden,
.cladding-top-measure.hidden,
.cladding-bottom-measure.hidden,
.side-measure.hidden {
    display: none;
}

.videowall-diagram-core {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 120px;
}

.videowall-cladding-frame {
    position: absolute;
    border: 1px solid rgba(15, 23, 32, 0.28);
    background: rgba(15, 23, 32, 0.02);
    box-sizing: border-box;
    pointer-events: none;
}

.videowall-rectangle {
    position: relative;
    z-index: 1;
}

.voip-fields-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    overflow-x: hidden;
}

.voip-intro-copy {
    margin: 0;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.45;
}

.voip-columns-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.voip-column {
    min-width: 0;
    padding: 0 14px;
}

.voip-column:first-child {
    padding-left: 0;
}

.voip-column + .voip-column {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.voip-column-title {
    margin: 0 0 12px 0;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.voip-option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.voip-option-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.voip-checkbox-row {
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    margin-bottom: 0;
}

.voip-checkbox-row span {
    display: block;
    color: #ffffff;
    font-size: 10px;
    line-height: 1.2;
}

.checkbox-row.is-disabled {
    opacity: 0.45;
}

.checkbox-row input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.checkbox-row.is-disabled span {
    color: #8a929d;
}

.voip-inline-qty {
    width: 46px;
    min-width: 46px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid rgba(15, 23, 32, 0.18);
    background: #ffffff;
    color: #0f1720;
    font-size: 11px;
    box-sizing: border-box;
    text-align: center;
}

.voip-column-qty {
    flex: 0 0 46px;
    margin-top: 1px;
}

.voip-inline-qty.hidden {
    display: none !important;
}

.meeting-options-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.meeting-voip-columns-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.intro-video {
    position: absolute;
    width: 330px;
    height: 330px;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1);
}






/* Version v03 color update: windows and tabs */
.config-panel,
.config-panel .panel-kicker,
.config-panel h2,
.config-panel .panel-message p,
.config-panel .panel-links a,
.config-panel .form-subtitle p,
.config-panel .back-inline,
.config-panel .back-inline:hover,
.config-panel .form-field label,
.config-panel .rooms-section-label,
.config-panel .room-block h4,
.config-panel .room-tab,
.config-panel .room-tab-placeholder h3,
.config-panel .room-tab-placeholder p,
.config-panel .checkbox-row,
.config-panel .checkbox-row span,
.config-panel .measure-text,
.config-panel .videowall-axis-label,
.config-panel .room-card-delete,
.config-panel .panel-static {
    color: #ffffff;
}

.config-panel .panel-divider,
.config-panel .room-block-divider {
    background: rgba(255, 255, 255, 0.2);
}

.config-panel .room-card-delete {
    color: #000000;
}

.config-panel .room-card-delete:hover {
    color: #000000;
}

.config-panel .panel-links a {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.config-panel .panel-links a:hover {
    border-bottom-color: rgba(255, 255, 255, 0.9);
}


.demo-panel-step {
    align-items: flex-start;
    justify-content: center;
}

.demo-login-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demo-main-content {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.demo-bottom-area {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 50px 28px 50px;
    box-sizing: border-box;
}

.demo-intro-text,
.demo-input,
.demo-remember-row,
.demo-login-button {
    width: calc(100% - 220px);
    box-sizing: border-box;
}

.demo-intro-text {
    margin: 0;
    text-align: left;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.demo-input {
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #ffffff;
    color: #1a2530;
    font-size: 13px;
    outline: none;
    border-radius: 6px;
}

.demo-input::placeholder {
    color: #5c6470;
}

.demo-input:focus {
    border-color: #4a8fa8;
}

.demo-remember-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}

.demo-remember-row input {
    margin: 0;
}

.demo-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-bottom-area .demo-footer-text {
    margin: 0;
    text-align: left;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
}

.config-panel.demo-mode > .panel-header,
.config-panel.demo-mode > .panel-divider {
    display: none;
}

.config-panel.demo-mode .panel-content.active {
    height: 100%;
}

.config-panel.demo-mode .demo-panel-step {
    height: 100%;
}


.resources-panel-step {
    align-items: flex-start;
    justify-content: flex-start;
}

.resources-zone-top {
    bottom: 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.resources-zone-top > * {
    margin-top: 24px;
}
.resources-zone-top > *:first-child {
    margin-top: 0;
}

.resources-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05;
    color: #ffffff;
}

.resources-intro-text {
    margin: 0;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 1.6;
}

.panel-divider.resources-divider {
    margin: 24px 0 0 0;
}

.resources-section {
    margin: 0;
}

.resources-videos-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.resources-section-title {
    margin: 0 0 14px 0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resources-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.resources-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.resources-link:hover {
    color: rgba(255,255,255,0.7);
}

.resources-carousel-wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
}

.resources-carousel-arrow {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.resources-carousel-arrow:hover {
    color: #ffffff;
}

.resources-videos-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 32%);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px;
    scrollbar-width: none;
}

.resources-videos-carousel::-webkit-scrollbar {
    display: none;
}

.resources-video-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    text-align: left;
}

.resources-video-card:hover {
    opacity: 0.85;
}

.resources-video-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.resources-video-play {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 12px;
}

.resources-video-card-title {
    padding: 0;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    line-height: 1.3;
    min-height: 0;
}

.config-panel.resources-mode > .panel-header,
.config-panel.resources-mode > .panel-divider {
    display: none;
}

.config-panel.resources-mode .panel-content.active {
    height: 100%;
}

.config-panel.resources-mode .resources-panel-step {
    height: 100%;
}

.field-info-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.field-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 32, 0.46);
}

.field-info-dialog {
    position: relative;
    width: min(624px, calc(100vw - 48px));
    background: rgba(22, 34, 46, 0.65);
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: 28px 28px 24px;
    box-sizing: border-box;
    z-index: 1;
}

.field-info-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.field-info-title {
    margin: 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.field-info-body {
    margin-top: 20px;
}

.field-info-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 560px) {
    .field-info-layout {
        grid-template-columns: 1fr;
    }
}

.field-info-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field-info-media-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.field-info-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.field-info-text {
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
}

.field-info-text p {
    margin: 0;
}

.field-info-model-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.field-info-model-item {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 14px 0;
}

.field-info-model-item + .field-info-model-item {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.field-info-model-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.field-info-model-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.field-info-model-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-info-model-name {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
}

.field-info-model-text {
    font-size: 14px;
    line-height: 1.55;
    color: #ffffff;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 10, 18, 0.5);
    backdrop-filter: blur(12px);
}

.video-modal-dialog {
    position: relative;
    width: min(1100px, 86vw);
    z-index: 1;
}

.video-modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #0f1720;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.video-modal-frame-wrap {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.video-modal-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6.3;
    border: 0;
    background: #000000;
}

@media (max-width: 640px) {
    .video-modal-dialog {
        width: 92vw;
    }
    .video-modal-close {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
        font-size: 22px;
    }
    .video-modal-frame {
        aspect-ratio: 16 / 9;
    }
}

body.video-modal-open {
    overflow: hidden;
}


body {
    background: #2d3e4e;
}

.landing-main {
    background: #2d3e4e;
    overflow: hidden;
}

.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 30px 28px 0 50px;
    box-sizing: border-box;
    z-index: 50;
    background: transparent;
    pointer-events: none;
}

.landing-logo {
    display: flex;
    align-items: flex-start;
    pointer-events: auto;
}

.landing-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
}

/* Menú hamburguesa: sustituye a las pestañas verticales SOLO cuando el
   panel de la derecha pasa a ocupar toda la pantalla (móvil) — a esos
   anchos las pestañas quedarían fuera de la pantalla al abrir el panel,
   así que este botón fijo en la cabecera es la única forma de cambiar
   entre Configurator / Platform Demo / Resources. Oculto el resto de
   tamaños, donde las pestañas laterales ya funcionan bien. */
.mobile-menu-button {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: rgba(15, 23, 32, 0.35);
    cursor: pointer;
}
.mobile-menu-button span {
    display: block;
    width: 16px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}
.mobile-menu-button:hover {
    background: rgba(15, 23, 32, 0.55);
}
.mobile-menu-button.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.mobile-menu-button.open span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-button.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu-dropdown {
    position: fixed;
    top: 64px;
    right: 18px;
    z-index: 51;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(15, 23, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    min-width: 200px;
}
.mobile-menu-dropdown.hidden {
    display: none;
}
.mobile-menu-item {
    background: none;
    border: none;
    color: #ffffff;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
}
.mobile-menu-item:hover,
.mobile-menu-item.active {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
    .mobile-menu-button {
        display: flex;
    }
    .side-tabs {
        display: none;
    }
}

/* Móvil girado en horizontal: el ancho supera los 640px, pero sigue siendo
   un móvil (táctil y con poca altura), así que se mantiene el menú
   hamburguesa en lugar de volver a mostrar las pestañas laterales. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 640px) {
    .mobile-menu-button {
        display: flex;
    }
    .side-tabs {
        display: none;
    }
}

.landing-logo img {
    display: block;
    width: auto;
    object-fit: contain;
}

.landing-logo-left img {
    max-height: 35px;
}

.landing-logo-right img {
    max-height: 90px;
}

/* Portátil 14"/15" y tablets grandes: logos un punto más pequeños que en
   escritorio, para no verse desproporcionados según se estrecha la
   ventana (antes solo había un salto brusco de escritorio a móvil). */
@media (max-width: 1200px) {
    .landing-logo-left img {
        max-height: 30px;
    }
    .landing-logo-right img {
        max-height: 74px;
    }
}

.landing-wrap {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 20px 20px;
    box-sizing: border-box;
    background: #2d3e4e;
}

.landing-stage {
    position: relative;
    width: min(900px, 78vw, 78vh);
    aspect-ratio: 1 / 1;

    /* ---- PANEL DE CONTROL DEL CENTRO ----
       Todo lo que hay dentro (fondo, flechas, iconos) se mide en % de ESTE
       contenedor, así que cambiar estos números reescala todo el conjunto
       sin descuadrar nada. */
    --arrows-size: 65%;   /* tamaño de las flechas respecto al stage */
}

.landing-stage-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    z-index: 3;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Contenedor que gira. Tamaño = --arrows-size, definido arriba en .landing-stage.
   Se centra con top/left 50% + translate(-50%,-50%), así que el punto de
   rotación permanece en el centro exacto del stage sea cual sea el tamaño. */
.landing-arrows-rotor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--arrows-size);
    height: var(--arrows-size);
    transform: translate(-50%, -50%);
    display: block;
}

.landing-arrows-rotor img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.landing-hotspots {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.landing-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    cursor: pointer;
    z-index: 4;
}

.landing-hotspot {
    width: 13.5%;
}

.landing-icon-image {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    transition: transform 240ms ease;
}

.landing-hotspot:hover .landing-icon-image,
.landing-hotspot:focus-visible .landing-icon-image {
    transform: scale(1.2);
    filter: none;
}

.landing-hotspot:focus-visible {
    outline: none;
}

/* Posiciones calculadas a partir de dónde caen realmente las letras
   de cada zona dentro de fondo.png (arriba/derecha/abajo/izquierda),
   teniendo en cuenta el letterboxing vertical que genera object-fit:contain
   al encajar la imagen (650x603, no cuadrada) dentro del stage cuadrado. */
.landing-hotspot.workplace {
    top: 15%;
    left: 50%;
    width: 22%;
}

.landing-hotspot.technology {
    top: 53%;
    left: 87%;
    width: 17%;
}

.landing-hotspot.audiovisual {
    top: 84.5%;
    left: 50%;
    width: 18%;
}

.landing-hotspot.environment {
    top: 53%;
    left: 14%;
    width: 12.5%;
}

.landing-hover-modal {
    position: absolute;
    z-index: 5;
    width: min(320px, 70vw);
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(7, 12, 22, 0.92);
    border: 1px solid rgba(191, 217, 211, 0.35);
    color: #e5edf5;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translate(-50%, -42%) scale(0.96);
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms ease;
}

.landing-hover-modal.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.landing-hover-modal h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #bfd9d3;
}

.landing-hover-modal p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.landing-arrows-rotor {
    z-index: 2;
    pointer-events: none;
    transform-origin: 50% 50%;
    animation: orbit360 14s linear infinite;
}

@keyframes orbit360 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================================
   RESPONSIVE — Configurador (Project details / Rooms / User data)
   Dos escalones: tablet (<=980px) y móvil (<=640px). Las columnas
   de campos (.form-row) ya son fluidas por sí solas (auto-fit) y
   no necesitan media query propia; esto solo apila los paneles de
   dos columnas y ajusta márgenes/tamaños de texto.
   ============================================================ */

/* El formulario de Budget (form-expanded) necesita pasar a pantalla
   completa en un punto más ancho que el resto del panel: con el 74% de
   ancho por defecto, en portátiles de gama media (980-1200px) el borde
   izquierdo del panel podía quedar lo bastante cerca del logo RDI como
   para solaparse visualmente con él. A partir de aquí, salta directo al
   100% — sin ninguna franja intermedia de riesgo. */
@media (max-width: 1200px) {
    .config-wrapper.form-expanded {
        width: 100%;
        right: -100%;
    }
    .config-wrapper.form-expanded.active {
        right: 0;
    }
    .config-wrapper.form-expanded .panel-close-x {
        display: flex;
        top: 84px;
    }
}

@media (max-width: 980px) {
    .config-wrapper {
        width: 55%;
        right: -55%;
    }
    .config-wrapper.active {
        right: 0;
    }

    .landing-info-wrapper {
        width: 55%;
    }

    #form-step,
    #rooms-step,
    #user-step,
    #thank-you-step {
        padding: 88px 36px 36px 36px;
    }

    .form-header-title {
        white-space: normal;
        font-size: 24px;
    }

    /* Apila el panel de campos y el de resumen/vídeo en vez de aplastarlos.
       El scroll ya lo gestiona el step (#form-step, etc.) como único
       contenedor con scroll, así que aquí no se añade otro. */
    .step-split-layout {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    .step-split-divider {
        display: none;
    }
    .step-split-right,
    .step-split-layout-form .step-split-right {
        max-height: 360px;
    }

    .user-form-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .user-preview-card {
        order: -1;
        min-height: 200px;
    }

    .videowall-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .config-wrapper,
    .config-wrapper.form-expanded {
        width: 100%;
        right: -100%;
    }
    .config-wrapper.active,
    .config-wrapper.form-expanded.active {
        right: 0;
    }

    .panel-close-x {
        display: flex;
        top: 84px;
    }

    .landing-info-wrapper {
        width: 100%;
    }
    .landing-info-close,
    body .landing-info-close {
        display: flex;
        top: 84px !important;
    }

    #form-step,
    #rooms-step,
    #user-step,
    #thank-you-step {
        padding: 84px 18px 22px 18px;
    }

    .form-header-block {
        margin-bottom: 28px;
    }
    .form-header-title {
        white-space: normal;
        font-size: 19px;
    }
    .config-panel h2 {
        font-size: 22px;
    }
    .panel-kicker,
    .landing-info-kicker {
        font-size: 11px;
    }

    .form-row.two .form-field,
    .form-row.env-row .form-field,
    .form-row.three .form-field,
    .form-row.four .form-field {
        flex-basis: 100%;
        min-width: 130px;
    }

    .rooms-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .tech-button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .landing-header {
        height: 74px;
        padding: 14px 18px;
    }

    .landing-logo-left img {
        max-height: 30px;
    }

    .landing-logo-right img {
        max-height: 50px;
    }

    .landing-wrap {
        padding: 88px 15px 15px 15px;
    }

    .landing-stage {
        width: min(88vw, 88vh);
    }

    .landing-hover-modal {
        width: min(270px, 78vw);
        padding: 12px 14px;
    }

    .landing-hover-modal p {
        font-size: 12px;
    }
}


/* v72 landing labels + left sliding info panel */
.landing-hover-modal {
    display: none !important;
}

.landing-info-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, width 0.45s ease;
    z-index: 30;
}

.landing-info-wrapper.active {
    pointer-events: auto;
    opacity: 1;
}

.landing-info-wrapper.closing {
    pointer-events: none;
    opacity: 0;
}

.landing-info-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(22, 34, 46, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
    z-index: 1000;
    color: #ffffff;
}

.landing-info-panel.content-swapping .landing-info-content {
    transition: opacity 0.16s ease;
    opacity: 0.25;
}

/* .landing-info-zone-top: clase compartida que TAMBIÉN usan el panel de
   introducción del configurador y el panel de Resources (no solo el
   panel "Workplace" de la home) — por eso se mantiene independiente de
   .landing-info-content, que es específica del panel de la home. */
.landing-info-zone-top {
    position: absolute;
    top: 160px;
    left: 0;
    right: 0;
    padding: 0 50px;
}
.landing-info-zone-top > .panel-reveal,
.landing-info-zone-top > .landing-info-reveal,
.landing-info-zone-top > .resources-reveal {
    margin-top: 40px;
}
.landing-info-zone-top > .panel-reveal:first-child,
.landing-info-zone-top > .landing-info-reveal:first-child,
.landing-info-zone-top > .resources-reveal:first-child {
    margin-top: 0;
}

/* Columna única que fluye de arriba a abajo, específica del panel
   "Workplace"/hotspots de la home — antes eran dos bloques con posición
   fija (uno pegado arriba, otro pegado abajo) que se solapaban entre sí
   cuando el texto o la imagen eran más altos de lo previsto. Ahora cada
   pieza sigue a la anterior de forma natural, y si el contenido no cabe
   en el alto disponible, es el propio panel (.landing-info-panel, con
   overflow-y:auto) el que hace scroll. */
.landing-info-content {
    padding: 160px 50px 40px 50px;
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.landing-info-content > .landing-info-reveal {
    margin-top: 40px;
}
.landing-info-content > .landing-info-reveal:first-child {
    margin-top: 0;
}
.landing-info-content > .landing-info-reveal-5 {
    margin-top: 14px;
}

.landing-info-kicker {
    margin: 0 0 18px 0;
    font-size: 12px;
    letter-spacing: 0.52em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.landing-info-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05;
    color: #ffffff;
}

.landing-info-subtitle {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.landing-info-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
}

/* Image clip reveal container (handled by landing-info-reveal system) */
.landing-info-image-clip {
    margin-top: 22px;
}

/* Image zoom container */
.landing-info-image-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 16/9;
}

.landing-info-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.8);
    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.62s;
}

.landing-info-wrapper.revealed .landing-info-image {
    transform: scale(1);
}

/* Link */
.landing-info-more {
    margin: 0;
    font-size: 12px;
}

.landing-info-more a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    letter-spacing: 0.03em;
}

.landing-info-more a:hover {
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,0.8);
}

/* Reveal animations — clip reveal, Populous style */
.landing-info-reveal {
    overflow: hidden;
}

.landing-info-reveal > *,
.landing-info-reveal.landing-info-kicker,
.landing-info-reveal.landing-info-title,
.landing-info-reveal.landing-info-subtitle,
.landing-info-reveal.landing-info-text,
.landing-info-reveal.landing-info-more {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: none;
}

.landing-info-wrapper.revealed .landing-info-reveal > *,
.landing-info-wrapper.revealed .landing-info-reveal.landing-info-kicker,
.landing-info-wrapper.revealed .landing-info-reveal.landing-info-title,
.landing-info-wrapper.revealed .landing-info-reveal.landing-info-subtitle,
.landing-info-wrapper.revealed .landing-info-reveal.landing-info-text,
.landing-info-wrapper.revealed .landing-info-reveal.landing-info-more {
    animation: infoClipUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.landing-info-wrapper.revealed .landing-info-reveal-1 > *,
.landing-info-wrapper.revealed .landing-info-reveal-1 { animation-delay: 0.08s; }
.landing-info-wrapper.revealed .landing-info-reveal-2 > *,
.landing-info-wrapper.revealed .landing-info-reveal-2 { animation-delay: 0.28s; }
.landing-info-wrapper.revealed .landing-info-reveal-3 > *,
.landing-info-wrapper.revealed .landing-info-reveal-3 { animation-delay: 0.48s; }
.landing-info-wrapper.revealed .landing-info-reveal-4 > *,
.landing-info-wrapper.revealed .landing-info-reveal-4 { animation-delay: 0.68s; }
.landing-info-wrapper.revealed .landing-info-reveal-5 > *,
.landing-info-wrapper.revealed .landing-info-reveal-5 { animation-delay: 0.88s; }

@keyframes infoClipUp {
    from {
        opacity: 1;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

@media (max-width: 768px) {
    .landing-info-zone-top { top: 110px; padding: 0 24px; }
    .landing-info-content { padding: 110px 24px 24px 24px; }
    .landing-info-title   { font-size: 24px; }
    .landing-info-subtitle { font-size: 15px; }
    .landing-info-text    { font-size: 13px; }
}

/* v82: force left panel close button to top-right. Solo visible cuando
   el panel ocupa toda la pantalla (mismo criterio que el panel derecho). */
.landing-info-close {
    position: absolute;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(15, 23, 32, 0.35);
    border: none;
    border-radius: 999px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
}
.landing-info-close:hover {
    background: rgba(15, 23, 32, 0.55);
}

/* ── Página única: vídeo siempre de fondo + rueda 360º en panel central ──
   Ya no hay dos "páginas" ni navegación por scroll. El vídeo ocupa siempre
   el fondo y la rueda vive en un panel central (mismo aspecto que el
   configurador desplegado) que sube desde abajo con la flecha inferior. */
.movie-stage {
    position: fixed;
    inset: 0;
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
    background: #000000;
    overflow: hidden;
}

/* Escritorio: el panel ocupa la franja central que dejan libres el panel
   izquierdo (30%) y el configurador (30%), así pueden convivir los tres. */
.landing-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 30%;
    right: 30%;
    width: auto;
    height: auto;
    z-index: 20;
    padding: 90px 24px 96px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 34, 46, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(100%);
    visibility: hidden;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.9s;
}
body.wheel-open .landing-wrap {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.landing-stage {
    width: min(34vw, calc(100vh - 210px));
}

@media (max-width: 980px) {
    .landing-wrap {
        left: 0;
        right: 0;
        padding: 90px 15px 96px 15px;
    }
    .landing-stage {
        width: min(80vw, calc(100vh - 210px));
    }
}

/* Asa inferior central: barra fina + texto. Abre la rueda ("360º VIEW") y
   la cierra ("CLOSE"). Sin círculo ni fondo; la zona pulsable es amplia
   para el dedo aunque lo visible sea pequeño. */
.wheel-toggle {
    position: fixed;
    left: 50%;
    bottom: 10px;
    z-index: 25;
    min-width: 120px;
    min-height: 48px;
    padding: 10px 18px 8px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    background: none;
    color: #ffffff;
    cursor: pointer;
    transform: translateX(-50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.wheel-toggle-handle {
    display: block;
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    transition: width 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    animation: wheelHandleNudge 2.6s ease-in-out infinite;
}
.wheel-toggle-label {
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1;
    padding-left: 0.2em; /* compensa el espaciado final para centrar */
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    transition: color 0.25s ease;
}
.wheel-toggle-label-close {
    display: none;
}
.wheel-toggle:hover .wheel-toggle-handle,
.wheel-toggle:focus-visible .wheel-toggle-handle {
    width: 56px;
    background: #5ba8c4;
    box-shadow: 0 0 10px rgba(91, 168, 196, 0.8);
}
.wheel-toggle:hover .wheel-toggle-label,
.wheel-toggle:focus-visible .wheel-toggle-label {
    color: #ffffff;
}
.wheel-toggle:focus-visible {
    outline: none;
}
body.wheel-open .wheel-toggle-label-open {
    display: none;
}
body.wheel-open .wheel-toggle-label-close {
    display: block;
}
body.wheel-open .wheel-toggle-handle {
    animation: none;
}
/* Con los controles del vídeo a la vista, o sin sitio para la rueda, el
   asa desaparece. */
body.video-controls-visible:not(.wheel-open) .wheel-toggle,
body.wheel-toggle-blocked .wheel-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
}
@keyframes wheelHandleNudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}


/* cover: el vídeo llena siempre la pantalla sin bandas negras, recortando
   lo que sobre. En pantalla completa se cambia a contain (ver más abajo). */
.movie-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

/* Pantalla completa: se ve el vídeo entero aunque aparezcan márgenes negros */
.movie-stage.is-fullscreen .movie-video {
    object-fit: contain;
}
.movie-stage.is-fullscreen .rotate-hint {
    display: none;
}

/* ── Controles del vídeo ── */
.video-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 34px 28px 18px 28px;
    background: linear-gradient(to top, rgba(10, 14, 20, 0.88) 0%, rgba(10, 14, 20, 0.6) 60%, rgba(10, 14, 20, 0) 100%);
    color: #ffffff;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;
}
.movie-stage.controls-visible .video-controls {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.video-timeline-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.video-time {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.85);
    min-width: 52px;
}
.video-time-duration {
    text-align: right;
    color: rgba(255, 255, 255, 0.5);
}

/* Línea temporal segmentada: un tramo por capítulo, separados por un hueco
   fino. El hueco y la marca vertical indican dónde empieza cada capítulo. */
.video-timeline {
    position: relative;
    flex: 1 1 auto;
    height: 28px;
    cursor: pointer;
    touch-action: none;
}

.video-timeline-segments {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    display: flex;
    gap: 3px;
    transition: height 0.18s ease;
}
.video-timeline:hover .video-timeline-segments {
    height: 5px;
}

.video-segment {
    position: relative;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 6px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.18s ease;
}
.video-segment:hover,
.video-segment.is-active {
    background: rgba(255, 255, 255, 0.34);
}

.video-segment-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: #5ba8c4;
    box-shadow: 0 0 8px rgba(91, 168, 196, 0.65);
}

.video-timeline-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 16px;
    border-radius: 1px;
    background: #e9f7fc;
    box-shadow: 0 0 0 1px rgba(91, 168, 196, 0.85), 0 0 12px rgba(91, 168, 196, 0.9);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
    transition: height 0.18s ease;
}
.video-timeline:hover .video-timeline-thumb {
    height: 20px;
}

/* Marca de inicio de capítulo: línea vertical fina en el hueco entre tramos */
.video-marker {
    position: absolute;
    top: 50%;
    left: -1.5px;
    width: 14px;
    height: 28px;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}
.video-segment:first-child .video-marker {
    left: 0;
}
.video-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 11px;
    background: rgba(255, 255, 255, 0.55);
    transform: translate(-50%, -50%);
    transition: height 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.video-segment:hover .video-marker::before,
.video-segment.is-active .video-marker::before {
    height: 17px;
    background: #5ba8c4;
    box-shadow: 0 0 8px rgba(91, 168, 196, 0.9);
}

/* Etiqueta del capítulo: cristal oscuro, esquinas rectas, acento azul */
.video-marker-label {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 50%;
    transform: translate(-50%, 4px);
    white-space: nowrap;
    padding: 8px 14px 8px 16px;
    background: rgba(8, 14, 22, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(91, 168, 196, 0.35);
    border-radius: 2px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* barra de acento a la izquierda */
.video-marker-label::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 2px;
    background: #5ba8c4;
    box-shadow: 0 0 8px rgba(91, 168, 196, 0.9);
}
/* conector fino hasta la marca */
.video-marker-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 6px;
    background: rgba(91, 168, 196, 0.7);
}
/* Las marcas de los extremos alinean su etiqueta hacia dentro para que no
   se salga de la pantalla. */
.video-marker.align-start .video-marker-label {
    left: 6px;
    transform: translate(0, 4px);
}
.video-marker.align-start .video-marker-label::after {
    left: 0;
}
.video-marker.align-end .video-marker-label {
    left: auto;
    right: 6px;
    transform: translate(0, 4px);
}
.video-marker.align-end .video-marker-label::after {
    left: auto;
    right: 0;
}
.video-segment:hover .video-marker-label,
.video-segment.is-active .video-marker-label,
.video-marker:focus-visible .video-marker-label {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
/* Si se pasa el ratón por otro tramo, manda el del ratón */
.video-timeline-segments:hover .video-segment.is-active:not(:hover) .video-marker-label {
    opacity: 0;
    visibility: hidden;
}
.video-segment:hover .video-marker.align-start .video-marker-label,
.video-segment.is-active .video-marker.align-start .video-marker-label,
.video-segment:hover .video-marker.align-end .video-marker-label,
.video-segment.is-active .video-marker.align-end .video-marker-label {
    transform: translate(0, 0);
}

.video-buttons-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 10px;
}

.video-buttons-center {
    display: flex;
    align-items: center;
    gap: 22px;
}

.video-buttons-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
}

.video-control-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
}
.video-control-button:hover {
    background: rgba(255, 255, 255, 0.1);
}
.video-control-button svg {
    width: 24px;
    height: 24px;
    display: block;
}

.video-play-button {
    width: 56px;
    height: 56px;
    border: 2px solid #5ba8c4;
    background: rgba(255, 255, 255, 0.06);
}
.video-play-button svg {
    width: 26px;
    height: 26px;
}

/* ── Barra de volumen (solo PC: ratón y hover) ──
   Oculta por defecto; se despliega a la derecha del icono de volumen al
   pasar el ratón. En pantallas táctiles no aparece. */
.video-volume {
    display: flex;
    align-items: center;
}
.video-volume-slider {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .video-volume-slider {
        display: block;
        position: relative;
        width: 0;
        height: 28px;
        margin-left: 0;
        opacity: 0;
        overflow: hidden;
        cursor: pointer;
        outline: none;
        transition: width 0.22s ease, opacity 0.22s ease, margin-left 0.22s ease;
    }
    .video-volume:hover .video-volume-slider,
    .video-volume:focus-within .video-volume-slider,
    .video-volume-slider.is-dragging {
        width: 88px;
        margin-left: 6px;
        opacity: 1;
        overflow: visible;
    }

    .video-volume-track {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 3px;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.2);
    }
    .video-volume-fill {
        height: 100%;
        width: 0;
        background: #5ba8c4;
        box-shadow: 0 0 8px rgba(91, 168, 196, 0.65);
    }
    .video-volume-thumb {
        position: absolute;
        top: 50%;
        left: 0;
        width: 3px;
        height: 14px;
        border-radius: 1px;
        background: #e9f7fc;
        box-shadow: 0 0 0 1px rgba(91, 168, 196, 0.85), 0 0 12px rgba(91, 168, 196, 0.9);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
}

/* Con los controles a la vista, el aviso de girar el móvil sube para no
   taparlos. */
.movie-stage.controls-visible .rotate-hint {
    bottom: 150px;
}

@media (max-width: 640px) {
    .video-controls {
        padding: 30px 14px 12px 14px;
    }
    .video-timeline-row {
        gap: 10px;
    }
    .video-time {
        font-size: 11px;
        min-width: 44px;
    }
    .video-buttons-center {
        gap: 12px;
    }
    .video-buttons-right {
        gap: 4px;
    }
    .video-control-button svg {
        width: 22px;
        height: 22px;
    }
    .video-play-button {
        width: 50px;
        height: 50px;
    }
}

.rotate-hint {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    background: rgba(15, 23, 32, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: #ffffff;
    text-align: center;
    max-width: min(280px, 80vw);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    animation: rotateHintFade 0.3s ease;
}
.rotate-hint.hidden {
    display: none;
}
.rotate-hint-icon {
    width: 30px;
    height: 30px;
    color: #bfd9d3;
    animation: rotateHintSpin 1.8s ease-in-out infinite;
}
.rotate-hint p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}
.rotate-hint-dismiss {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
}
.rotate-hint-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
}
@keyframes rotateHintFade {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes rotateHintSpin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
}


@keyframes movieTechFlicker {
    0%, 100% {
        opacity: 0.98;
        text-shadow:
            0 0 8px rgba(255,255,255,0.92),
            0 0 18px rgba(255,255,255,0.52),
            0 0 30px rgba(114,124,245,0.34);
    }
    12% {
        opacity: 0.5;
    }
    18% {
        opacity: 1;
    }
    42% {
        opacity: 0.62;
    }
    48% {
        opacity: 1;
    }
    72% {
        opacity: 0.82;
    }
}

@keyframes movieTechRays {
    0%, 100% {
        opacity: 0.9;
        filter: blur(0.6px) drop-shadow(0 0 8px rgba(255,255,255,0.55));
    }
    50% {
        opacity: 0.45;
        filter: blur(0.6px) drop-shadow(0 0 14px rgba(255,255,255,0.8));
    }
}


/* movie-closing removed: with continuous transitions, .movie-mode toggling
   alone handles both opening and closing, and reversing mid-transition. */


/* v88: workplace carousel */
.landing-workplace-carousel {
    width: 100%;
}

.landing-workplace-carousel-viewport {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.landing-workplace-carousel-track {
    display: flex;
    width: 100%;
    transform: translateX(0);
    transition: transform 0.6s ease;
    will-change: transform;
}

.landing-workplace-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 16 / 6.3;
    background: rgba(255, 255, 255, 0.03);
}

.landing-workplace-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-info-wrapper.revealed .landing-info-reveal-5 { animation-delay: 0.54s; }

@media (max-width: 768px) {
    .landing-workplace-carousel-slide {
        aspect-ratio: 4 / 3;
    }
}


/* v92 workplace and VOIP refinements */
.voip-simple-layout {
    gap: 12px;
}

.voip-simple-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voip-simple-row {
    display: grid;
    gap: 10px 14px;
    width: 100%;
    align-items: start;
}

.voip-source-row-one.is-three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voip-source-row-one.is-two-columns,
.voip-source-row-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.voip-destinations-row {
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 10px 18px;
}

.voip-simple-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.voip-simple-item > .field-error-text {
    flex-basis: 100%;
    margin: 4px 0 0 0;
}

.voip-simple-item.has-qty {
    align-items: center;
}

.voip-simple-item .voip-checkbox-row {
    flex: 1;
}

.voip-simple-item .voip-checkbox-row span {
    display: block;
    color: #ffffff;
    font-size: 10px;
    line-height: 1.2;
}

.voip-simple-qty {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    margin-top: 0;
}

.voip-auto-note {
    margin: 6px 0 0 28px;
    color: #ff6b6b;
    font-size: 11px;
    line-height: 1.3;
}


/* ===========================================================
   v2026-10 · Mejoras UX del configurador
   =========================================================== */

/* Indicador de pasos: debajo del título, con el mismo ancho que él y una
   línea que une los pasos y se pinta en azul según se avanza. */
.form-header-block {
    width: fit-content;
    max-width: 100%;
}
.config-stepper {
    display: flex;
    align-items: center;
    width: 100%;
    list-style: none;
    margin: 30px 0 0 0;
    padding: 0;
}
.config-stepper-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.45);
}
.config-stepper-item:last-child {
    flex: 0 0 auto;
}
/* Tramo de línea hasta el siguiente paso */
.config-stepper-item:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 16px;
    height: 1px;
    margin: 0 14px 0 4px;
    background: rgba(255, 255, 255, 0.2);
}
.config-stepper-item.is-done::after {
    background: #4a8fa8;
    box-shadow: 0 0 6px rgba(91, 168, 196, 0.6);
}
.config-stepper-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 10px;
    letter-spacing: 0;
}
.config-stepper-item.is-done {
    color: rgba(255, 255, 255, 0.7);
}
.config-stepper-item.is-done .config-stepper-number {
    border-color: #4a8fa8;
    color: #5ba8c4;
}
.config-stepper-item.is-active {
    color: #ffffff;
}
.config-stepper-item.is-active .config-stepper-number {
    border-color: #4a8fa8;
    background: #4a8fa8;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(91, 168, 196, 0.55);
}
/* Móvil: se mantienen círculos y líneas, pero solo se lee el paso actual */
@media (max-width: 640px) {
    .config-stepper {
        margin-top: 22px;
    }
    .config-stepper-item:not(.is-active) .config-stepper-label {
        display: none;
    }
    .config-stepper-item:not(:last-child)::after {
        margin: 0 10px 0 2px;
    }
}

/* Back (izquierda) y Next/Submit (derecha), mismo estilo */
.form-actions-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.form-actions-buttons .tech-button {
    flex: 0 0 auto;
    width: auto;
}
@media (max-width: 640px) {
    .form-actions-buttons .tech-button {
        flex: 1 1 0;
        width: auto;
    }
}

/* Pestaña de sala activa: azul de la web en lugar del morado */
.room-tab.active {
    background: #4a8fa8;
    box-shadow: 0 8px 18px rgba(74, 143, 168, 0.28);
}

/* Avisos informativos (no son errores): mismo tono que el resto */
.voip-auto-note,
.form-hint {
    margin: 8px 0 0 0;
    padding-left: 10px;
    border-left: 2px solid #5ba8c4;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.4;
}
.voip-auto-note {
    margin-left: 28px;
}

/* Interruptor "Include operators / supervisors" */
.workplace-role-toggle {
    margin-top: 4px;
}
.workplace-role-fields.hidden {
    display: none;
}

/* Diálogo propio (sustituye a alert/confirm del navegador) */
.app-dialog-box {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(22, 34, 46, 0.9);
    width: min(480px, calc(100vw - 48px));
}
.app-dialog-text {
    margin: 16px 0 24px 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    white-space: pre-line;
}
.app-dialog-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.app-dialog-cancel.hidden {
    display: none;
}

/* Mensaje breve (toast) arriba al centro */
.app-toast {
    position: fixed;
    top: 22px;
    left: 50%;
    z-index: 2200;
    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 16px 12px 16px;
    box-sizing: border-box;
    background: rgba(8, 14, 22, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(91, 168, 196, 0.35);
    border-left: 2px solid #5ba8c4;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.app-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.app-toast.is-error {
    border-left-color: #e24b4a;
    border-color: rgba(226, 75, 74, 0.4);
}

/* Con la rueda abierta no se muestra el aviso de girar el móvil */
body.wheel-open .rotate-hint {
    display: none;
}

/* La animación de entrada del paso 1 fuerza display:block a sus hijos;
   la fila Back + Next tiene que seguir siendo flex. */
#form-step #project-form .form-reveal > .form-actions-buttons {
    display: flex;
}

/* Opción excluyente atenuada (videowall, pop-up, micrófonos): sigue
   pudiéndose pulsar y sustituye a la marcada. */
.checkbox-row.is-dimmed {
    opacity: 0.45;
    transition: opacity 0.2s ease;
}
.checkbox-row.is-dimmed:hover {
    opacity: 0.8;
}
.exclusive-hint {
    margin-top: 10px;
}
.workplace-subblock.hidden {
    display: none;
}

/* X de cerrar el configurador: siempre visible con el panel abierto */
.config-wrapper.active .panel-close-x {
    display: flex;
    top: 118px;
    right: 22px;
}
@media (min-width: 1201px) {
    .config-wrapper.form-expanded.active .panel-close-x {
        top: 22px;
    }
}
@media (max-width: 768px) {
    .config-wrapper.active .panel-close-x {
        top: 84px;
        right: 18px;
    }
}

/* Pantallas bajas (móvil en horizontal): menos margen para que la rueda
   tenga un tamaño útil. */
@media (max-height: 520px) {
    .landing-wrap {
        padding-top: 64px;
        padding-bottom: 62px;
    }
    .landing-stage {
        width: min(80vw, calc(100vh - 132px));
    }
    .wheel-toggle {
        bottom: 4px;
        min-height: 44px;
        gap: 6px;
    }
}

/* Móvil: el contenido de cada paso empieza por debajo de la X de cerrar */
@media (max-width: 640px) {
    #form-step,
    #rooms-step,
    #user-step,
    #thank-you-step {
        padding-top: 128px;
    }
}

/* Cierre del configurador desplegado: sale entero hacia la derecha */
.config-wrapper.is-closing,
.config-wrapper.form-expanded.active.is-closing {
    right: -100%;
}
.config-wrapper.no-transition,
.config-wrapper.no-transition .side-tabs {
    transition: none !important;
}


/* ===========================================================
   v2026-10-11 · Guía en el formulario + salas en el paso 2
   =========================================================== */

/* Nivel 1: ayuda breve bajo un campo y línea de introducción de bloque */
.field-help {
    margin: -2px 0 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}
.block-intro {
    margin: 12px 0 4px 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
.field-optional {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.45);
}

/* Paso 1: bloque opcional "Tell us more about your project" */
.form-section-intro {
    margin-top: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.form-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}
.form-section-intro .block-intro {
    margin-top: 4px;
}

/* Paso 3: comentarios */
.form-field textarea {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 32, 0.18);
    border-radius: 6px;
    background: #ffffff;
    color: #0f1720;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
    outline: none;
}
.form-field textarea::placeholder {
    color: #5c6470;
}
.form-field textarea:focus {
    border-color: #0f1720;
    box-shadow: 0 0 0 3px rgba(15, 23, 32, 0.08);
}

/* Paso 2: cabecera de cada sala (tipo + nombre) */
.room-identity {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
}
.room-type-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.room-type-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.room-type-card:hover {
    border-color: rgba(91, 168, 196, 0.7);
}
.room-type-card.is-selected {
    border-color: #5ba8c4;
    background: rgba(74, 143, 168, 0.18);
    box-shadow: inset 0 0 0 1px #5ba8c4;
}
.room-type-icon svg {
    width: 48px;
    height: 32px;
    display: block;
    fill: none;
    stroke: #5ba8c4;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.room-type-title {
    font-size: 13px;
    font-weight: 700;
}
.room-type-text {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}
.room-type-cards.field-error {
    outline: 2px solid #e24b4a;
    outline-offset: 4px;
    border-radius: 8px;
}
@media (max-width: 480px) {
    .room-type-cards {
        grid-template-columns: 1fr;
    }
}

/* Paso 2: pestañas de salas con borrar y "+ Add room" */
.room-tab-wrap {
    display: inline-flex;
    align-items: stretch;
    transition: box-shadow 0.22s ease;
}
.room-tab-wrap .room-tab.active {
    transform: none;
    box-shadow: none;
}
.room-tab-wrap.active {
    box-shadow: 0 8px 18px rgba(74, 143, 168, 0.28);
}
.room-tab-delete {
    width: 28px;
    border: none;
    background: rgba(22, 34, 46, 0.65);
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
.room-tab-delete:hover {
    color: #ffffff;
}
.room-tab-wrap.active .room-tab-delete {
    background: #4a8fa8;
    color: rgba(255, 255, 255, 0.8);
}
.room-tab.room-tab-add {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
}
.room-tab.room-tab-add:hover {
    border-color: #5ba8c4;
    color: #ffffff;
}
.room-tab-limit {
    align-self: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.workplace-role-fields > .field-help {
    margin-top: 10px;
}
.room-identity {
    margin-bottom: 24px;
}

/* Subtítulo dentro de la franja gris de cada bloque */
.room-block h4 .room-block-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}
/* La nota de videowall queda separada de las casillas */
.room-block h4 + .block-intro {
    margin-top: 14px;
}

/* Your details: misma composición que los otros pasos (formulario a la
   izquierda, línea en medio, imagen a la derecha) */
.step-split-layout-user {
    min-height: auto;
    align-items: start;
}
.step-split-right-user .user-preview-card {
    max-height: min(70vh, 560px);
}
@media (max-width: 980px) {
    /* En pantallas estrechas la imagen pasa arriba, como antes */
    .step-split-right-user {
        order: -1;
    }
}

.step-split-layout-user .form-actions {
    margin-top: 22px;
}


/* ===========================================================
   v2026-10-12 · Selectores en ventana emergente y ajustes
   =========================================================== */

/* Tarjetas de tipo de sala más compactas: icono y título en línea */
.room-type-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 9px 12px;
}
.room-type-icon svg {
    width: 34px;
    height: 23px;
}
.room-type-text {
    grid-column: 1 / -1;
}

/* VOIP: subtítulo en la misma línea que el título */
.room-block h4 .room-block-subtitle-inline {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
}

/* Menos separación vertical entre opciones que pasan a otra línea */
.videowall-type-row {
    row-gap: 2px;
}
.videowall-type-row .checkbox-row,
.workplace-role-toggle .checkbox-row {
    min-height: 30px;
}
.workplace-subblock {
    gap: 4px;
}
.workplace-role-fields {
    margin-bottom: 8px;
}

/* Campo que abre un selector emergente (mismo aspecto que un desplegable) */
.option-picker {
    position: relative;
    width: 100%;
    height: 42px;
    padding: 0 30px 0 12px;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 32, 0.18);
    border-radius: 6px;
    background: #ffffff;
    color: #0f1720;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.option-picker::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 7px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f1720' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.option-picker.is-placeholder {
    color: #5c6470;
}
.option-picker:focus-visible {
    outline: none;
    border-color: #0f1720;
    box-shadow: 0 0 0 3px rgba(15, 23, 32, 0.08);
}
.users-row .option-picker {
    height: 36px;
    font-size: 12px;
}
.option-picker.field-error {
    border: 2px solid #e24b4a;
    background: #eef0f2;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.15);
}

/* Ventana del selector */
.option-picker-dialog {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: rgba(22, 34, 46, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.option-picker-hint {
    margin: 8px 0 18px 0;
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}
.option-picker-group-title {
    margin: 16px 0 8px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.option-picker-body > .option-picker-group-title:first-child {
    margin-top: 0;
}
.option-picker-grid {
    display: grid;
    gap: 12px;
}
.option-picker-grid-models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.option-picker-grid-monitors {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.option-picker-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.option-picker-card:hover:not([disabled]) {
    border-color: rgba(91, 168, 196, 0.7);
}
.option-picker-card.is-selected {
    border-color: #5ba8c4;
    background: rgba(74, 143, 168, 0.18);
    box-shadow: inset 0 0 0 1px #5ba8c4;
}
.option-picker-card[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.option-picker-card-title {
    font-size: 13px;
    font-weight: 700;
}
.option-picker-card-text {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
.option-picker-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.option-picker-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.option-picker-card-monitor {
    align-items: center;
    text-align: center;
}
.option-picker-drawing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
}
.option-picker-drawing svg {
    max-width: 100%;
    height: 34px;
    fill: rgba(91, 168, 196, 0.22);
    stroke: #5ba8c4;
    stroke-width: 0.8;
    stroke-linecap: round;
}
@media (max-width: 640px) {
    .option-picker-grid-models {
        grid-template-columns: 1fr;
    }
    .option-picker-grid-monitors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Aviso "Add at least a videowall…": que no lo tape la franja gris siguiente */
.room-identity + .field-error-text {
    margin: -14px 0 28px 0;
}


/* ===========================================================
   v2026-10-12 b · (i) al pasar el ratón, PCs, monitores
   =========================================================== */
.info-popover {
    position: fixed;
    z-index: 2150;
    width: min(380px, calc(100vw - 16px));
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 14px 16px;
    box-sizing: border-box;
    background: rgba(8, 14, 22, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(91, 168, 196, 0.35);
    border-left: 2px solid #5ba8c4;
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.info-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.info-popover p {
    margin: 0 0 8px 0;
}
.info-popover p:last-child {
    margin-bottom: 0;
}
.info-popover-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}
.info-popover-media {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.info-popover-media img {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
}
.info-popover-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    margin-top: 10px;
}
.info-popover-thumb {
    display: block;
    width: 72px;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.info-popover-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.info-popover-item-title {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px !important;
}

/* Monitores: pulgadas dentro de cada pantalla */
.option-picker-drawing svg text {
    fill: #e9f7fc;
    stroke: none;
    font-family: inherit;
    font-size: 5px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
}
.option-picker-card-monitor {
    justify-content: center;
    min-height: 72px;
}

/* PCs: consola / armario técnico */
.option-picker-drawing-pc svg {
    height: 38px;
}
.option-picker-drawing-pc .pc-rack {
    fill: rgba(255, 255, 255, 0.04);
}
.option-picker-drawing-pc .pc-desk {
    fill: none;
    stroke-width: 1.2;
}
.option-picker-drawing-pc .pc-led {
    fill: #5ba8c4;
    stroke: none;
}
.option-picker-group-text {
    margin: -4px 0 10px 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}


/* Shared submission dialog and status feedback. */
.submit-confirmation {
    width: min(560px, calc(100vw - 40px)); box-sizing: border-box;
    padding: 28px; border: 1px solid rgba(255, 255, 255, 0.2);
    background: #16222e; color: #ffffff; font-family: inherit;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.submit-confirmation::backdrop { background: rgba(15, 23, 32, 0.65); }
.submit-confirmation h3 { margin-top: 0; }
.submit-confirmation p { line-height: 1.55; overflow-wrap: anywhere; }
.submit-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.submit-status { padding: 16px; border-left: 3px solid #5ba8c4; background: rgba(255, 255, 255, 0.06); color: #ffffff; line-height: 1.55; }
.submit-status[data-state="success"] { border-color: #74c9a0; }
.submit-status[data-state="error"] { border-color: #ef9a9a; }
.submit-status[data-state="unknown"] { border-color: #e9c46a; }