/* =========================================================
   CANTE DE LAS ESTRELLAS — sistema de diseño compartido
   Usado por: base.html, home, laboratorio, juega, entrenamiento
   y las paginas de contenido (proyecto, aprende, colabora, contacto)
   ========================================================= */

/* Fuente digital de 7 segmentos (numeros de Modulo/Cuantizacion), alojada
   localmente: DSEG7-Classic, licencia SIL OFL 1.1 (ver
   web/static/fonts/DSEG7-Classic/DSEG-LICENSE.txt). */
@font-face {
    font-family: "DSEG7-Classic";
    src: url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2") format("woff2"),
         url("../fonts/DSEG7-Classic/DSEG7Classic-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colores exactos de Figma: --Noche, --Rojo, --Crema, --azul-claro */
    --navy-950: #080633;
    --navy-900: #0b0b28;
    --navy-800: #10102f;
    --navy-700: #17173e;
    --navy-line: rgba(255, 255, 255, 0.14);

    --cream-100: #ffffe9;
    --cream-200: #fbf3c9;
    --cream-ink: #171730;

    --red: #ff2943;
    --red-dark: #d61f38;
    --blue: #b3c5ff;
    --blue-dark: #8ea4f2;
    --azul-oscuro: #5576ff;   /* azul medio de Figma: contador "1/8" del tutorial y relieve de su tarjeta */
    --black-btn: #101026;

    /* Franja lavanda del pie de pagina (medida del mockup pie-pagina.png) */
    --footer-band: #b9c6fa;

    --font-logo: "DotGothic16", monospace;
    --font-serif: "Playfair Display", "Georgia", serif;
    --font-serif-alt: "Instrument Serif", "Georgia", serif; /* serif elegante (H2 del sistema tipografico de Figma) */
    --font-mono: "Space Mono", "Courier New", monospace;
    --font-ui: "Barlow", "Ubuntu", Helvetica, Arial, sans-serif;
    --font-lab: "Archivo", "Archivo Condensed", "Barlow", sans-serif; /* fuente real de Figma (variable); font-stretch:condensed abajo imita el ancho estrecho */
    --font-led: "DSEG7-Classic", "Silkscreen", "VT323", "Space Mono", monospace;
    --font-footer: "Courier Prime", "Space Mono", monospace;

    /* =====================================================================
       SISTEMA TIPOGRAFICO (segun hoja de estilos de Figma)
       H1 / H3 = Archivo Extra Condensed Black (900) mayusculas. H2 = Instrument
       Serif con tracking, sin mayusculas forzadas. Intro = Archivo Extra
       Condensed Semibold mayusculas muy espaciado. Body/Body2/Body3 = Courier.
       La familia variable "Archivo" (cargada en base.html con eje wght 100..900)
       SI soporta 900 (Black): no hace falta aproximarlo con 700.
       ===================================================================== */
    --type-h1-font: var(--font-lab);
    --type-h1-size: 25px;
    --type-h1-weight: 900;          /* Black */
    --type-h1-tracking: 1px;

    --type-h2-font: var(--font-serif-alt);
    --type-h2-size: 36px;
    --type-h2-weight: 400;
    --type-h2-tracking: 0.20em;     /* 20% interletrado, como en Figma */

    --type-h3-font: var(--font-lab);
    --type-h3-size: 24px;
    --type-h3-weight: 900;          /* Black */
    --type-h3-tracking: 1px;

    --type-intro-font: var(--font-lab);
    --type-intro-size: 26px;
    --type-intro-weight: 600;       /* Semibold */
    --type-intro-tracking: 0.28em; /* 28% interletrado, como en Figma */

    --type-body-font: var(--font-footer);  /* Courier Prime */
    --type-body-size: 18px;
    --type-body2-size: 26px;
    --type-body3-size: 22px;
    --type-body-weight: 400;

    /* Enlaces dentro de texto: subrayado normal, negrita al pasar el raton */
    --type-link-weight: 400;
    --type-link-hover-weight: 700;

    /* Seleccion de texto (::selection): alto contraste, como en Figma */
    --type-selection-bg: var(--cream-100);
    --type-selection-color: var(--navy-950);

    /* =====================================================================
       PANEL DE VARIABLES — PÁGINAS DE CONTENIDO
       (Proyecto / Aprende / Colabora / Contacto)
       Estas 4 páginas comparten el mismo esqueleto ".content-*". Cambia
       aquí y afecta a las 4 a la vez. Recarga con Ctrl+F5 (no hay build).
       ===================================================================== */
    --content-bg: #fdf4cc;                 /* color de fondo de la página (crema amarillento, mas calido) */
    --content-ink: #2b1c10;                /* color del texto principal (marron oscuro) */
    --content-max-width: 660px;            /* ancho máximo de la columna de texto */
    --content-padding-y: 60px;             /* aire por arriba del contenido (bajo la barra roja) */

    /* -- Barra roja superior (título + "SALIR >>") -- */
    --content-topbar-bg: #ff2943;         /* color de la barra superior */
    --content-topbar-text: #ffffff;       /* color del texto de la barra */
    --content-topbar-size: 19px;          /* tamaño de letra de la barra */
    --content-topbar-tracking: 2px;       /* espaciado entre letras de la barra */
    --content-topbar-padding-y: 18px;     /* alto de la barra */
    --content-topbar-padding-x: 40px;     /* márgenes laterales de la barra */

    /* -- Marca de agua (silla / guitarra / flor / luna tenue de fondo, fija de arriba a abajo de la ventana) -- */
    --content-watermark-color: #b3c5ff;   /* color de la marca de agua */
    --content-watermark-opacity: 0.6;    /* opacidad de la marca de agua (0 = invisible) */
    --content-watermark-height: 100vh;    /* alto de la marca de agua (100vh = toda la ventana) */
    --content-watermark-shift: 0px;       /* desplazamiento horizontal respecto al centro (+ derecha, - izquierda) */

    /* -- Título principal (H1 del sistema tipográfico: Archivo Condensed Black, con rayitas a los lados) -- */
    --content-heading-font: var(--type-h1-font);
    --content-heading-weight: var(--type-h1-weight);
    --content-heading-size: var(--type-h1-size);
    --content-heading-tracking: var(--type-h1-tracking);
    --content-heading-rule-fraction: 75%;  /* largo de cada rayita respecto al hueco entre el borde y el título */
    --content-heading-edge: 3vw;           /* distancia de las rayitas al borde de la pantalla */

    /* -- Subtítulos de sección (H2 del sistema tipográfico: Instrument Serif, con tracking) -- */
    --content-h2-font: var(--type-h2-font);   /* subtitulos de seccion: Instrument Serif 36px, 20% (Figma) */
    --content-h2-weight: var(--type-h2-weight);
    --content-h2-size: var(--type-h2-size);
    --content-h2-tracking: var(--type-h2-tracking);

    /* -- Cuerpo de texto (Body del sistema tipográfico: Courier) -- */
    --content-body-font: var(--type-body-font);
    --content-body-size: var(--type-body-size);
    --content-body-line-height: 1.2;     /* interlineado de los párrafos */

    /* -- Formulario de Contacto (Nombre / E-mail / Mensaje) -- */
    --content-form-label-color: #8ea4f2;  /* color de las etiquetas del formulario */
    --content-form-border-color: #171730; /* color del borde de las cajas */
    --content-form-border-width: 2px;     /* grosor del borde de las cajas */
    --content-form-input-size: 15px;      /* tamaño de letra dentro de las cajas */
    --content-form-textarea-min-height: 180px; /* alto mínimo del cuadro "Mensaje" */
    --content-form-link-color: #8ea4f2;   /* color del enlace "ENVIAR >>" */
}

/* ---------- Brand lockup: "CANTE" + "DE LAS ESTRELLAS" ---------- */
.brand-lockup {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.brand-cante {
    font-family: var(--font-logo);
    font-size: 40px;
    letter-spacing: 6px;
    color: var(--cream-100);
    text-decoration: none;
    line-height: 1;
    user-select: none;
}

.brand-cante:hover { color: #fff; }

.brand-vertical {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    line-height: 1.6;
    color: var(--cream-100);
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    height: 90px;
    user-select: none;
}

/* Variante oscura para usarse sobre fondos claros (Juega) */
.brand-lockup.on-light .brand-cante,
.brand-lockup.on-light .brand-vertical { color: var(--cream-ink); }

/* ---------- Icon nav (Flor / Silla / Luna / Guitarra) ---------- */
.icon-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.icon-nav a {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.icon-nav a:hover { transform: translateY(-3px); filter: brightness(1.08); }

/* Al pasar el raton, el icono se sustituye por el nombre de la pagina
   (PROYECTO / APRENDE / COLABORA / CONTACTO), dentro del mismo cuadrado de
   color, en vez de un tooltip flotante aparte. */
.icon-nav a { position: relative; }
.icon-nav a img { transition: opacity .15s ease; }
.icon-nav-label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-lab); font-weight: 600; font-size: 18px;
    letter-spacing: 0.1em; text-align: center; text-transform: uppercase;
    color: var(--navy-950);
    opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.icon-nav a:hover img { opacity: 0; }
.icon-nav a:hover .icon-nav-label { opacity: 1; }

.icon-nav a svg { width: 30px; height: 30px; }

.icon-nav .icon-flor { background: var(--red); }
.icon-nav .icon-flor svg { fill: var(--navy-950); }

.icon-nav .icon-silla { background: var(--cream-100); }
.icon-nav .icon-silla svg { fill: var(--navy-950); }

.icon-nav .icon-luna { background: var(--blue); }
.icon-nav .icon-luna svg { fill: var(--navy-950); }

.icon-nav .icon-guitarra { background: var(--cream-100); }
.icon-nav .icon-guitarra svg { fill: var(--navy-950); }

/* Variante oscura de los iconos (para la pagina Juega, fondo claro) */
.icon-nav.on-light .icon-silla,
.icon-nav.on-light .icon-guitarra { background: var(--black-btn); }
.icon-nav.on-light .icon-silla svg,
.icon-nav.on-light .icon-guitarra svg { fill: var(--cream-100); }

/* ---------- Fader vertical (Módulo) ---------- */
.fader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 320px;
}

.fader-track {
    position: relative;
    flex: 1;
    width: 46px;
    display: flex;
    justify-content: center;
}

.fader-ticks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--navy-line) 0px,
        var(--navy-line) 2px,
        transparent 2px,
        transparent 16px
    );
    pointer-events: none;
    border-left: 1px solid var(--navy-line);
}

input[type="range"].fader-input {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

input[type="range"].fader-input::-webkit-slider-runnable-track {
    width: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

input[type="range"].fader-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 34px;
    height: 46px;
    margin-left: -14px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--red), var(--red-dark));
    border: 1px solid rgba(0, 0, 0, 0.4);
    cursor: grab;
}

input[type="range"].fader-input::-moz-range-track {
    width: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

input[type="range"].fader-input::-moz-range-thumb {
    width: 34px;
    height: 46px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--red), var(--red-dark));
    border: 1px solid rgba(0, 0, 0, 0.4);
    cursor: grab;
}

.fader-label {
    font-family: var(--lab-font-labels);
    font-weight: 600;
    font-size: var(--lab-fs-fader-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream-100);
}

/* ---------- Slider horizontal (Cuantización) ---------- */
input[type="range"].quant-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
}

input[type="range"].quant-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid var(--navy-950);
    cursor: grab;
}

input[type="range"].quant-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid var(--navy-950);
    cursor: grab;
}

/* ---------- LED digit readout ---------- */
.led-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--red);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--red);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 10px;
}

input.led-box {
    text-align: center;
    outline: none;
}

.led-box.small { font-size: 20px; width: 68px; }
.led-box.large { font-size: 26px; width: 100px; }

/* ---------- Caja del MODULO: unidades grandes + centesimas pequenas ----------
   #moduloNumber (input real, sigue siendo la fuente de la verdad para el
   script de cada pagina) se oculta; lab-console.js anade aqui dentro dos
   campos visuales -unidades grandes y centesimas pequenas arriba a la
   derecha- que lo reflejan y escriben en el disparando un evento "input". */
.led-box.modulo-box {
    display: flex; align-items: center; justify-content: center;
    height: var(--lab-bottom-row-size);
    box-sizing: border-box;
    width: auto;
    padding: 0 22px;
    overflow: hidden;
}
/* Fila interna en flex, alineada arriba: los decimales (mas pequenos)
   quedan "pegados" a la parte superior derecha de las unidades, sin
   solaparse nunca (nada de position:absolute) sea cual sea su ancho. */
.modulo-number-row { display: flex; align-items: flex-start; }
.modulo-units-input {
    background: transparent; border: none; color: inherit; font-weight: 700;
    width: 3ch; text-align: right; outline: none; padding: 0;
    font-size: var(--lab-fs-modulo-number); line-height: 1; font-family: var(--lab-font-leds); letter-spacing: 1px;
}
.modulo-dec-input {
    background: transparent; border: none; color: inherit; font-weight: 700;
    width: 2.1ch; text-align: left; outline: none; padding: 0; margin-top: 2px;
    font-size: calc(var(--lab-fs-modulo-number) / 2); line-height: 1; font-family: var(--lab-font-leds); letter-spacing: 0.5px;
}

/* ---------- Toggle switch (Sonifica solo coincidencias) ---------- */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle-switch .track {
    width: 52px;
    height: 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--navy-line);
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-switch .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cream-100);
    transition: transform 0.2s ease;
}

.toggle-switch input:checked ~ .track { background: var(--blue); }
.toggle-switch input:checked ~ .track::after { transform: translateX(26px); }

.toggle-switch .toggle-label {
    font-family: var(--font-ui);
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ---------- Mute / sound button ---------- */
.mute-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--red);
    border: none;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

.mute-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.mute-btn svg { width: 22px; height: 22px; fill: var(--navy-950); }
.mute-btn .icon-on { display: none; }
.mute-btn .icon-off { display: block; }
.mute-btn input:checked ~ .icon-on { display: block; }
.mute-btn input:checked ~ .icon-off { display: none; }

/* Sonido activado: 3 barras tipo "onda de sonido" animadas en vez de un
   icono estatico, para que se note a simple vista que esta sonando. */
.eq-bars { display: none; align-items: center; justify-content: center; gap: 3px; width: 55%; height: 55%; }
.mute-btn input:checked ~ .icon-on.eq-bars { display: flex; }
.eq-bar { width: 18%; min-width: 3px; border-radius: 3px; background: var(--navy-950); height: 35%; animation: eq-bounce 0.9s ease-in-out infinite; }
.eq-bar:nth-child(1) { animation-delay: -0.3s; }
.eq-bar:nth-child(2) { animation-delay: -0.6s; }
.eq-bar:nth-child(3) { animation-delay: -0.15s; }
@keyframes eq-bounce { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* ---------- Botones ---------- */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.btn-pill:hover { filter: brightness(1.1); transform: translateY(-2px); }

.btn-red { background: var(--red); color: #fff; }
.btn-blue { background: var(--blue); color: var(--navy-950); }
.btn-cream { background: var(--cream-100); color: var(--navy-950); }
.btn-black { background: var(--black-btn); color: var(--cream-100); }

/* ---------- Sky circle (Imagen del cielo) ---------- */
.sky-circle {
    position: relative;
    overflow: hidden;                    /* cualquier hijo (p.ej. el visor de Aladin) queda recortado a circulo */
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid var(--cream-100);
    background-color: var(--navy-950);   /* el mismo color que el fondo de la pagina */
    background-image: url('../img/sky-chart.svg');
    background-size: cover;
    background-position: center;
}

/* =========================================================
   Páginas de contenido: Proyecto / Aprende / Colabora / Contacto
   (los tamaños/colores se controlan desde el panel :root --content-*)
   ========================================================= */
.content-page {
    min-height: 100vh;
    color: var(--content-ink);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Fondo de color: fijo, cubre siempre toda la ventana */
.content-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--content-bg);
    z-index: -2;
}

.content-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--content-topbar-bg);
    color: var(--content-topbar-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--content-topbar-padding-y) var(--content-topbar-padding-x);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--content-topbar-size);
    letter-spacing: var(--content-topbar-tracking);
    text-transform: uppercase;
}

.content-topbar a {
    color: var(--content-topbar-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--type-link-weight);
    letter-spacing: 1px;
    transition: font-weight .15s ease;
}
.content-topbar a:hover { font-weight: var(--type-link-hover-weight); }

.content-body {
    position: relative;
    z-index: 1;
    flex: 1;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--content-padding-y) 30px 90px 30px;
}

/* Marca de agua decorativa: fija, de arriba a abajo de toda la ventana, detrás del texto */
.content-watermark {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(calc(-50% + var(--content-watermark-shift)));
    height: var(--content-watermark-height);
    width: auto;
    opacity: var(--content-watermark-opacity);
    pointer-events: none;
    z-index: -1;
}

.content-watermark svg { height: 100%; width: auto; fill: var(--content-watermark-color); }
.content-watermark img { height: 100%; width: auto; display: block; filter: brightness(1.12); }

.content-heading {
    font-family: var(--content-heading-font);
    text-align: center;
    font-weight: var(--content-heading-weight);
    font-size: var(--content-heading-size);
    letter-spacing: var(--content-heading-tracking);
    text-transform: uppercase;
    margin: 10px 0 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    /* Ocupa TODO el ancho de la ventana (aunque el texto este en una columna estrecha)
       para que las rayitas queden pegadas a los bordes del dispositivo. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 var(--content-heading-edge);
    box-sizing: border-box;
}

/* Dos rayitas paralelas a cada lado del titulo: cada una mide 3/4 del hueco que queda
   entre el borde y el titulo, y va pegada al borde (la izquierda a la izquierda, la
   derecha a la derecha). */
.content-heading .rule { flex: 1; display: flex; }
.content-heading .rule::before {
    content: ""; display: block; width: var(--content-heading-rule-fraction); height: 14px;
    border-top: 2px solid var(--content-ink); border-bottom: 2px solid var(--content-ink);
}
.content-heading .rule:last-child { justify-content: flex-end; }

.content-body h2 {
    font-family: var(--content-h2-font);
    text-align: center;
    font-size: var(--content-h2-size);
    font-weight: var(--content-h2-weight);
    font-style: normal;
    letter-spacing: var(--content-h2-tracking);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 44px 0 20px 0;
}

.content-body p {
    font-family: var(--content-body-font);
    font-size: var(--content-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--content-body-line-height);
    text-align: center;
    margin-bottom: 16px;
}

.content-body img { max-width: 100%; border-radius: 8px; }

/* Enlaces dentro del cuerpo de texto: subrayado normal, negrita al pasar el raton */
.content-body a, .content-form a, .q-body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--type-link-weight);
    transition: font-weight .15s ease;
}
.content-body a:hover, .content-form a:hover, .q-body a:hover {
    font-weight: var(--type-link-hover-weight);
}

/* Seleccion de texto: alto contraste. En fondo navy (Laboratorio/Tutorial/
   Portada), highlight crema + texto navy; en paginas de contenido (fondo
   crema) se invierte para que siga siendo legible. */
::selection { background: var(--type-selection-bg); color: var(--type-selection-color); }
.content-page ::selection { background: var(--content-ink); color: var(--content-bg); }

/* ---------- Clases sueltas del sistema tipográfico (por si se necesitan fuera de .content-*) ---------- */
.type-h1 { font-family: var(--type-h1-font); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-tracking); text-transform: uppercase; }
.type-h2 { font-family: var(--type-h2-font); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
.type-h3 { font-family: var(--type-h3-font); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); letter-spacing: var(--type-h3-tracking); text-transform: uppercase; }
.type-intro { font-family: var(--type-intro-font); font-size: var(--type-intro-size); font-weight: var(--type-intro-weight); letter-spacing: var(--type-intro-tracking); text-transform: uppercase; }
.type-body { font-family: var(--type-body-font); font-size: var(--type-body-size); font-weight: var(--type-body-weight); }
.type-body2 { font-family: var(--type-body-font); font-size: var(--type-body2-size); font-weight: var(--type-body-weight); }
.type-body3 { font-family: var(--type-body-font); font-size: var(--type-body3-size); font-weight: var(--type-body-weight); }

/* Formularios sobre página de contenido (Contacto) */
.content-form .form-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: start;
    gap: 18px;
    margin-bottom: 22px;
}
.content-form label {
    display: block;
    padding-top: 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--content-form-label-color);
}
.content-form input[type="text"],
.content-form input[type="email"],
.content-form textarea {
    width: 100%;
    background: transparent;
    border: var(--content-form-border-width) solid var(--content-form-border-color);
    border-radius: 0;
    padding: 12px;
    font-family: var(--font-mono);
    font-size: var(--content-form-input-size);
    color: var(--content-ink);
}
.content-form textarea { min-height: var(--content-form-textarea-min-height); resize: vertical; }
.content-form .checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    margin: 20px 0;
}
.content-form .checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--content-ink);
    cursor: pointer;
}
.content-form .submit-row { text-align: right; justify-content: flex-end; margin-top: 20px; }
.content-form .submit-row button {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--content-form-link-color);
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    transition: font-weight .15s ease;
}
.content-form .submit-row button:hover { font-weight: 900; }
@media (max-width: 560px) {
    .content-form .form-row { grid-template-columns: 1fr; gap: 6px; }
    .content-form label { padding-top: 0; }
}

/* ---------- Thanks card (post envío): mismo "posit" que la tarjeta del
   Tutorial (fondo azul, sombra desplazada, tipografia Courier Prime) ---------- */
.thanks-card {
    background: var(--tut-card-bg);
    color: var(--tut-card-text);
    border: none;
    border-radius: var(--tut-card-radius);
    padding: 30px 32px 24px 32px;
    max-width: 360px;
    font-family: var(--tut-card-font);
    box-shadow: var(--tut-card-relief);
}
.thanks-card h3 {
    font-size: 22px; margin-bottom: 14px; letter-spacing: 1.5px; text-align: center;
    font-family: var(--lab-font-labels); text-transform: uppercase;
}
.thanks-card p { font-family: var(--tut-card-font); font-size: var(--tut-card-text-size); line-height: var(--tut-card-line-height); margin-bottom: 20px; text-align: center; }
.thanks-card button {
    display: block; margin: 0 auto;
    background: none;
    border: none;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
    color: var(--tut-card-text);
    font-family: var(--lab-font-labels);
    font-size: 14px;
    padding: 0;
}

/* =========================================================
   Pie de pagina compartido (mockup Figma pie-pagina.png)
   Usado por: home, laboratorio (index) y juega (game)
   ========================================================= */
.site-footer {
    background: var(--footer-band);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 20px 40px;
}
.site-footer-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.site-footer-label {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--navy-950);
    flex-shrink: 0;
}
.site-footer img {
    height: 44px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.site-footer-inner > a { display: flex; align-items: center; transition: transform .15s ease; }
.site-footer-inner > a:hover { transform: translateY(-2px); }
@media (max-width: 900px) {
    .site-footer-inner { justify-content: center; gap: 16px 22px; }
    .site-footer img { height: 34px; }
}
.site-footer-credit {
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--navy-950);
}
.site-footer-credit a {
    color: inherit;
    text-decoration: underline;
}
.site-footer-credit a:hover { text-decoration: none; }

/* La portada / identificacion (home.html) tiene su propio panel de
   variables al principio de ese archivo (bloque :root --gw-*). */


/* =========================================================================
   ============  CONSOLA DEL LABORATORIO / TUTORIAL  ========================
   =========================================================================
   Estas reglas las comparten el Laboratorio (index.html) y el Tutorial
   (entrenamiento.html): el Tutorial ES el mismo Laboratorio con una
   tarjeta encima que va señalando cada control. Si cambias algo aqui,
   cambian LAS DOS paginas a la vez.

   PANEL DE VARIABLES: es este bloque :root de abajo. Cambia un valor,
   guarda y recarga (Ctrl+F5). CSS puro, sin build.

   IMPORTANTE sobre la alineacion inferior: --lab-columns-height es la
   altura que comparten las 3 columnas (circulo+iconos, fader+modulo,
   controles+enviar) para que sus partes de abajo terminen en la misma
   linea. Si agrandas mucho el circulo/fader/controles, sube tambien
   --lab-columns-height (si algo se desborda, sube este valor primero).
   ========================================================================= */
:root {
    /* --- 1. LOGOS (las 2 imagenes de arriba: CANTE y DE LAS ESTRELLAS) --- */
    --lab-logo-cante-height: 68px;      /* alto del logo "CANTE" (matriz de puntos), arriba-izquierda */
    --lab-logo-estrellas-height: 82px;  /* alto del logo "DE LAS ESTRELLAS", arriba-derecha */
    --lab-header-margin-bottom: 48px;   /* separacion entre esa fila de logos y el resto de la pagina */

    /* --- 2. LOS 4 ICONOS DE NAVEGACION (flor / silla / luna / guitarra) --- */
    --lab-icon-size: 100px;             /* ancho y alto de cada boton de icono (imagen cuadrada) */
    --lab-icon-radius: 18px;            /* redondeo de esquinas de cada boton */
    --lab-icon-row-max-width: 560px;    /* ancho de toda la fila de 4 iconos */

    /* --- 2b. FILA INFERIOR: caja de MODULO, huecos de favoritos y ENVIAR DATO
       comparten esta misma altura, para quedar perfectamente alineados --- */
    --lab-bottom-row-size: 100px;

    /* --- 3. CIRCULO DEL CIELO (el mapa estelar) --- */
    --lab-circle-size: 610px;           /* diametro maximo del circulo */
    --lab-circle-border-width: 6px;     /* grosor del borde del circulo */
    --lab-circle-to-icons-gap: 20px;    /* distancia vertical entre el circulo y la fila de iconos */

    /* --- 4. FADER / BARRA DEL MODULO (la barra vertical roja) --- */
    --lab-fader-track-width: 64px;      /* ancho total de la barra (incluye los 2 rieles de rayitas) */
    --lab-fader-track-height: 512px;    /* ALTO de la barra */
    --lab-fader-thumb-size: 68px;       /* tamano del tirador rojo "reloj de arena" */
    --lab-fader-rail-width: 14px;       /* ancho de cada riel de rayitas */

    /* --- 5. ALTURA COMPARTIDA DE LAS 3 COLUMNAS (ver nota arriba) --- */
    --lab-columns-height: 730px;

    /* --- 6. FAMILIAS DE LETRA --- */
    --lab-font-labels: var(--font-lab); /* ESTRELLA, CUANTIZACION, MODULO, SONIFICA..., botones */
    --lab-font-leds: var(--font-led);   /* los numeros del display de Modulo y Cuantizacion */

    /* --- 7. TAMANOS DE LETRA --- */
    --lab-fs-field-label: 28px;      /* etiquetas "ESTRELLA" / "CUANTIZACION" */
    --lab-fs-select: 26px;           /* texto dentro del desplegable de ESTRELLA */
    --lab-fs-fader-label: 26px;      /* la palabra "MODULO" */
    --lab-fav-row-offset: 46px;      /* aire extra entre la caja roja del MODULO y el primer boton de favoritos */
    --lab-fader-label-gap: 30px;     /* aire entre la palabra MODULO y el cuadro rojo con el valor */
    --lab-fs-modulo-number: 42px;    /* numero dentro de la caja roja de Modulo */
    --lab-fs-quant-number: 46px;     /* numero dentro de la caja de Cuantizacion */
    --lab-fs-sonifica-label: 24px;   /* "SONIFICA SOLO COINCIDENCIAS" */
    --lab-fs-buttons: 24px;          /* texto de TUTORIAL / JUEGA */
    --lab-fs-submit: 24px;           /* texto de ENVIAR DATO */
    --lab-fs-footer: 14px;           /* texto del pie */

    /* --- 8. DISTANCIAS GENERALES DE LA CUADRICULA --- */
    --lab-grid-gap: 60px;            /* separacion horizontal entre las 3 columnas */
    --lab-grid-max-width: 1600px;    /* ancho maximo de toda la cuadricula */

    /* --- 9. PIE DE PAGINA --- */
    --lab-footer-margin-top: 35px;   /* distancia entre los controles y el pie de pagina */

    /* --- 10. ZOOM / AJUSTE A LA PANTALLA --- */
    --lab-page-zoom: 1;              /* zoom MAXIMO (en pantallas grandes). 1 = tamano real: en monitores
                                        anchos la consola llega a ocupar --lab-grid-max-width entero. */
    --lab-fit-width: 1600;           /* ancho "natural" de la consola (px, sin unidad): si la ventana
                                        es mas estrecha, la consola se encoge en proporcion para caber */
    --lab-fit-height: 900;           /* alto "natural" de la consola SIN el pie de pagina (px, sin unidad):
                                        la consola cabe entera en pantalla y el pie queda debajo, se ve
                                        haciendo scroll (no se fuerza a caber, al contrario que en el home) */
    --lab-fit-max-zoom: 3;           /* zoom MAXIMO al AGRANDAR en pantallas grandes (monitores 2K/4K, ventanas
                                        mayores de 1600x900): la consola crece en proporcion hasta llenar la
                                        ventana en vez de quedarse pequena con espacio vacio alrededor.
                                        Por debajo de 1600x900 no cambia nada. 1 = no agrandar nunca. */
    --lab-fit-min-zoom: 0.35;        /* zoom minimo: por debajo de esto no encoge mas (evita que sea ilegible) */

    /* --- 11. SELECTOR DE SONIDOS --- */
    --lab-fs-soundbank-label: 28px;  /* la etiqueta "SONIDOS" */
    --lab-fs-soundbank-select: 22px; /* texto dentro del desplegable de Sonidos */
    --lab-quant-margin-top: 65px;   /* separacion encima de CUANTIZACION */
    --lab-soundbank-margin-top: 55px;/* separacion encima del desplegable de Sonidos */

    /* --- 12. MODAL (edad/estudios en el Lab; despedida en el Tutorial) --- */
    --lab-modal-bg: #10102f;         /* color de fondo del modal */
    --lab-modal-text: #ffffe9;       /* color del texto del modal */
    --lab-modal-max-width: 400px;    /* ancho del modal */

    /* --- 13. TUTORIAL: tarjeta de pasos y foco --- */
    --tut-card-bg: #b3c5ff;          /* color de fondo de la tarjeta del tutorial */
    --tut-card-text: #080633;        /* color del texto de la tarjeta */
    --tut-card-width: 380px;         /* ancho de la tarjeta */
    --tut-card-padding: 30px 28px 22px 28px; /* aire interior de la tarjeta */
    --tut-card-radius: 0;            /* esquinas de la tarjeta: cuadradas */
    --tut-card-font: var(--font-footer); /* tipografia del texto de la tarjeta: Courier Prime */
    --tut-card-text-size: 18px;      /* tamano de letra de la tarjeta */
    --tut-card-line-height: 1.4;     /* interlineado de la tarjeta (Auto/comoda lectura) */
    --tut-card-shadow-color: var(--azul-oscuro); /* relieve: mismo azul que el contador "1/8" (medido en Figma) */
    /* Relieve "plegado": 14 copias de 1px desplazadas en diagonal (izquierda/abajo, 14px medido
       en Figma) rellenan todo el espacio entre la tarjeta clara y la oscura, de modo que la
       esquina superior izquierda y la inferior derecha quedan UNIDAS por una recta diagonal.
       Para cambiar la profundidad, hay que anadir/quitar capas de esta lista. */
    --tut-card-relief: -1px 1px 0 0 var(--tut-card-shadow-color), -2px 2px 0 0 var(--tut-card-shadow-color), -3px 3px 0 0 var(--tut-card-shadow-color), -4px 4px 0 0 var(--tut-card-shadow-color), -5px 5px 0 0 var(--tut-card-shadow-color), -6px 6px 0 0 var(--tut-card-shadow-color), -7px 7px 0 0 var(--tut-card-shadow-color), -8px 8px 0 0 var(--tut-card-shadow-color), -9px 9px 0 0 var(--tut-card-shadow-color), -10px 10px 0 0 var(--tut-card-shadow-color), -11px 11px 0 0 var(--tut-card-shadow-color), -12px 12px 0 0 var(--tut-card-shadow-color), -13px 13px 0 0 var(--tut-card-shadow-color), -14px 14px 0 0 var(--tut-card-shadow-color);
    --tut-counter-size: 14px;        /* tamano del contador "1/8" */
    --tut-counter-color: var(--azul-oscuro); /* color del contador "1/8": mismo azul que el relieve */
    --tut-btn-size: 14px;            /* tamano de "ATRAS" / "SIGUIENTE" */
    --tut-dim-color: rgba(6, 6, 20, 0.88); /* con que se oscurece todo menos el control resaltado */
}

.lab-page {
    /* El zoom de fitConsole tambien escala esta altura: con zoom > 1 (pantallas grandes)
       100vh se convertia en mas que la ventana y el pie quedaba lejisimos. Con zoom <= 1
       sigue valiendo exactamente 100vh, como antes. */
    min-height: min(100vh, calc(100vh / var(--lab-zoom, 1)));
    width: 100%;
    padding: 30px 40px 0 40px;
    position: relative;
    overflow: hidden;
    zoom: var(--lab-page-zoom);
}

.lab-page #background-container { position: fixed; inset: 0; z-index: -2; }
.lab-page .background {
    position: fixed; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    z-index: -2; opacity: 0; transition: opacity 1s ease-in-out;
}
.lab-page .background.visible { opacity: 0.03; }
.lab-page::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: var(--navy-950);   /* fondo plano y homogeneo, sin degradado */
}

.lab-page #estrellapulsante-container { display: none; }
.lab-page .estrellapulsante {
    position: absolute; border-radius: 50%; border: 1.5px solid #625f70;
    background-color: transparent; width: 50px; height: 50px;
    animation: oscillate 2s infinite ease-in-out; pointer-events: auto;
}
.lab-page .estrellapulsante::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px;
    background-color: #fff; border-radius: 50%; transform: translate(-50%, -50%);
}
@keyframes oscillate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.lab-grid {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    gap: var(--lab-grid-gap);
    align-items: start;
    max-width: var(--lab-grid-max-width);
    margin: 0 auto;
}

.lab-col-circle {
    display: flex; flex-direction: column;
    gap: var(--lab-circle-to-icons-gap);
    align-items: center;
    justify-content: space-between;
    height: var(--lab-columns-height);
}
.lab-col-circle .sky-circle { max-width: var(--lab-circle-size); border-width: var(--lab-circle-border-width); }

.lab-col-fader {
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-between;
    height: var(--lab-columns-height);
}
.lab-col-fader .fader-wrap { height: var(--lab-fader-track-height); }
/* Bloque MODULO + cuadro rojo: todo centrado en el MISMO eje vertical que las dos
   barras. El triangulo ▶ va en posicion absoluta (fuera del flujo) para que no
   desplace el cuadro rojo del centro. */
.fader-readout-block { display: flex; flex-direction: column; align-items: center; width: 100%; }
.fader-readout-block .fader-label { margin-bottom: var(--lab-fader-label-gap); text-align: center; }
.modulo-readout-row { position: relative; display: flex; align-items: center; justify-content: center; }
.modulo-readout-row .play-triangle { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 21px; }
/* Hueco entre la caja roja del MODULO y los 3 botones de favoritos: mas aire, y la flecha ▶
   queda centrada en el (ni pegada a la caja ni metida dentro del primer boton). */
.lab-col-right .submit-row { width: calc(100% - var(--lab-fav-row-offset)); margin-left: var(--lab-fav-row-offset); }
/* Toda la columna derecha (ESTRELLA, CUANTIZACION, SONIDOS, SONIFICA..., interruptor y
   TUTORIAL) arranca en el MISMO eje vertical que el primer boton de favoritos. */
.lab-col-right .right-top-group { padding-left: var(--lab-fav-row-offset); }
.lab-col-right .lab-buttons-row { width: calc(100% - var(--lab-fav-row-offset)); margin-left: var(--lab-fav-row-offset); }

.lab-col-right {
    display: flex; flex-direction: column;
    justify-content: space-between;
    height: var(--lab-columns-height);
}

/* Fila etiqueta + control */
.lab-field-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.lab-field-row label { margin-bottom: 0; font-family: var(--lab-font-labels); font-size: var(--lab-fs-field-label); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-100); }
.lab-field-row.soundbank-row label { font-size: var(--lab-fs-soundbank-label); }
.soundbank-row .lab-select-custom { font-size: var(--lab-fs-soundbank-select); }

.fader-label, .sonifica-label, .lab-buttons-row a, .btn-red-submit { font-family: var(--lab-font-labels) !important; }

.lab-buttons-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 20px; }
.submit-row { display: flex; width: 100%; margin-top: 32px; gap: 12px; align-items: center; }
.submit-row .fav-row { flex-shrink: 0; }
.submit-row .btn-red-submit { flex: 1; }
/* Aviso de "Gracias" al enviar una estrella: posit flotante centrado en
   pantalla (mismo estilo de tarjeta que la del Tutorial), en vez de un
   bloque mas dentro de la columna. */
#message-box {
    display: none;
    position: fixed; inset: 0; z-index: 6000;
    align-items: center; justify-content: center;
    background: rgba(6, 6, 20, 0.65);
    padding: 20px;
}

/* Fader vertical: linea central + rieles de rayitas + tirador reloj de arena */
.fader-track-custom { position: relative; width: var(--lab-fader-track-width); height: var(--lab-fader-track-height); margin: 0 auto; }
.fader-center-line { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 3px; background-color: var(--cream-100); z-index: 1; }
.fader-rail-left { position: absolute; left: 0; top: 0; bottom: 0; width: var(--lab-fader-rail-width); background-image: repeating-linear-gradient(to bottom, var(--cream-100) 0px, var(--cream-100) 3px, transparent 3px, transparent 28px); }
.fader-rail-right { position: absolute; right: 0; top: 0; bottom: 0; width: var(--lab-fader-rail-width); background-image: repeating-linear-gradient(to bottom, var(--cream-100) 0px, var(--cream-100) 3px, transparent 3px, transparent 28px); }
.fader-input-custom {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    writing-mode: vertical-lr; direction: rtl;
    appearance: none; -webkit-appearance: none;
    background: transparent; cursor: pointer; z-index: 10;
}
.fader-input-custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--lab-fader-thumb-size); height: var(--lab-fader-thumb-size);
    background-color: var(--red);
    background-image: linear-gradient(to bottom, transparent 47%, var(--navy-950) 47%, var(--navy-950) 53%, transparent 53%);
    clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%, 20% 50%);
    cursor: grab;
}
.fader-input-custom::-moz-range-thumb {
    width: var(--lab-fader-thumb-size); height: var(--lab-fader-thumb-size); border: none;
    background-color: var(--red);
    background-image: linear-gradient(to bottom, transparent 47%, var(--navy-950) 47%, var(--navy-950) 53%, transparent 53%);
    clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%, 20% 50%);
    cursor: grab;
}

.lab-select-custom {
    width: 280px; background: transparent; border: 3px solid var(--blue); color: var(--blue);
    padding: 10px 14px; border-radius: 0; font-family: var(--lab-font-labels); font-size: var(--lab-fs-select); text-transform: uppercase;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B3C5FF%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.lab-select-custom option { background: var(--navy-900); }

.white-led { border: 3px solid var(--blue); color: var(--blue); background: transparent; border-radius: 0; padding: 12px 0; text-align: center; }
/* La caja de CUANTIZACION ya no muestra el numero: muestra la nota. */
.quant-note-box { cursor: pointer; }
.quant-note-icon { width: 55%; height: 55%; color: inherit; flex-shrink: 0; }
.quant-note-icon.is-spinning { animation: quant-note-spin .5s ease; }
@keyframes quant-note-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.red-led { border: 4px solid var(--red); color: var(--red); background: transparent; border-radius: 2px; padding: 6px 12px; }
#quantReadout { font-family: var(--lab-font-leds); font-size: var(--lab-fs-quant-number); line-height: 1; }
#moduloNumber { font-family: var(--lab-font-leds) !important; }

/* La Cuantizacion ya no se arrastra: se pulsa el numero para pasar al siguiente (4/6/8/9) */
#quantSlider { display: none !important; }
#quantReadout { cursor: pointer; transition: filter .15s ease, transform .15s ease; }
#quantReadout:hover { filter: brightness(1.2); }
#quantReadout:active { transform: scale(0.94); }

/* Interruptor "Sonifica" con estilo de contorno */
.lab-page .toggle-switch { transform: translateY(-15px); }
/* Interruptor: la bola clara tiene el diametro del ALTO TOTAL del carril y se funde con su
   borde (sin canal oscuro alrededor): a la izquierda = desactivado, a la derecha = activado. */
.lab-page .toggle-switch .track { border: 3px solid var(--cream-100); background: transparent; height: 46px; width: 90px; }
.lab-page .toggle-switch input:checked ~ .track { background: transparent; }
.lab-page .toggle-switch .track::after { background: var(--cream-100); width: 46px; height: 46px; top: -3px; left: -3px; border-radius: 50%; }
.lab-page .toggle-switch input:checked ~ .track::after { transform: translateX(44px); }

/* Sonido+compartir a la derecha, alineados con el INTERRUPTOR de
   "sonifica solo coincidencias" (no con su etiqueta): align-items
   flex-end alinea la BASE de .sonifica-left (que es el interruptor,
   ultimo elemento de esa columna) con la base del bloque de botones;
   el margin-bottom negativo del interruptor termina de centrar su
   trazo con el de los botones cuadrados (64px vs 38px de alto: mitad
   de la diferencia, 13px). Mismo comportamiento en escritorio y movil. */
.sonifica-container { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 60px; }
.sonifica-left { display: flex; flex-direction: column; gap: 15px; }
.sonifica-label { font-family: var(--lab-font-labels); font-size: var(--lab-fs-sonifica-label); font-weight: 600; letter-spacing: 0.28em; color: var(--cream-100); line-height: 1.3; }
.sonifica-buttons { display: flex; align-items: center; gap: 10px; }
.mute-custom { width: 76px; height: 76px; border-radius: 16px; }
.mute-custom svg { width: 32px; height: 32px; }

.lab-share-btn {
    background: url("../img/icons/boton-compartir-cut.png") center/cover no-repeat;
}
.lab-share-btn svg { display: none; }

/* ---------- Tarjeta para compartir (circulo + estrella + modulo + "forma" del audio) ---------- */
.lab-share-overlay {
    position: fixed; inset: 0; z-index: 6000; background: rgba(6,6,20,0.72);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lab-share-overlay.is-open { opacity: 1; pointer-events: auto; }
.lab-share-modal {
    position: relative; background: var(--navy-950); border: 1px solid var(--blue);
    border-radius: 0; padding: 18px; width: fit-content; max-width: 94vw; text-align: center;
    transform: scale(0.96); opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.lab-share-overlay.is-open .lab-share-modal { transform: scale(1); opacity: 1; }
/* La tarjeta es vertical (9:16, formato short/story): se ajusta al alto de la pantalla. */
.lab-share-canvas-img { height: min(74vh, 780px); width: auto; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 0; display: block; margin: 0 auto 16px; background: var(--navy-900); }
.lab-share-actions { display: flex; gap: 12px; justify-content: center; }
.lab-share-close {
    position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--navy-900); color: var(--cream-100); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

.icon-nav-custom { display: flex; justify-content: space-between; width: 100%; max-width: var(--lab-icon-row-max-width); }
.icon-nav-custom a { width: var(--lab-icon-size); height: var(--lab-icon-size); border-radius: var(--lab-icon-radius); display: flex; justify-content: center; align-items: center; }
.icon-nav-custom a svg { width: 40px; height: 40px; }
.icon-nav-photo a { background: none; padding: 0; }
.icon-nav-photo a img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.btn-pill-round { border-radius: 12px; font-weight: 600; letter-spacing: 0; font-size: var(--lab-fs-buttons); border: none; text-align: center; padding: 20px 28px; }
.btn-red-submit {
    display: flex; align-items: center; justify-content: center;
    height: var(--lab-bottom-row-size); box-sizing: border-box; padding: 0 28px;
    color: var(--navy-950); font-size: var(--lab-fs-submit); font-weight: 600; letter-spacing: 0;
    border-radius: 12px; white-space: nowrap;
}
.play-triangle { font-size: 20px; margin-left: 16px; user-select: none; }

/* Modal (edad/estudios en el Lab; despedida en el Tutorial) */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); justify-content: center; align-items: center; }
.modal-content {
    background-color: var(--lab-modal-bg); padding: 30px; border: 1px solid var(--blue); border-radius: 8px;
    width: 80%; max-width: var(--lab-modal-max-width); text-align: center; box-shadow: 0 0 30px rgba(142,164,242,0.15);
    font-family: var(--font-ui); color: var(--lab-modal-text);
}
.modal-content h2 { margin-bottom: 20px; font-family: var(--font-serif); }
.modal-content label { display: block; margin-top: 10px; text-align: left; color: var(--cream-100); opacity: 0.8; }
.modal-content input {
    width: 100%; margin-top: 5px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--blue);
    border-radius: 4px; background-color: rgba(0,0,0,0.3); color: var(--cream-100); font-family: var(--font-ui);
}
.buttons-section { margin-top: 20px; display: flex; justify-content: space-around; gap: 12px; }
.buttons-section .btn-pill { flex: 1; }

/* ---------- "DE LAS ESTRELLAS" arriba a la derecha (imagen real, arte final) ---------- */
.lab-brand-right-img {
    height: var(--lab-logo-estrellas-height);
    width: auto;
    display: block;
    user-select: none;
}

/* ---------- Fader del MODULO en DOS barras: unidades (izq) + centesimas (dcha) ---------- */
.fader-bars-row { display: flex; gap: 20px; justify-content: center; }
.fader-track-fine { position: relative; width: 38px; height: var(--lab-fader-track-height); margin: 0 auto; }
.fader-input-fine {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    writing-mode: vertical-lr; direction: rtl;
    appearance: none; -webkit-appearance: none;
    background: transparent; cursor: pointer; z-index: 10;
}
.fader-input-fine::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
    background-color: var(--red); border: 3px solid var(--navy-950); cursor: grab;
}
.fader-input-fine::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--navy-950);
    background-color: var(--red); cursor: grab;
}

/* ---------- Desplegable personalizado (ESTRELLA / SONIDOS) ----------
   El <select> real se queda oculto (sigue siendo la fuente de la verdad
   para el resto del script de cada pagina); esto es solo la capa visual,
   creada por static/js/lab-console.js, que refleja sus cambios sobre el
   <select> con un evento "change" normal. */
.lab-dropdown {
    position: relative; width: 420px;
    --dd-border-width: 4px;              /* grosor del borde de la caja y de cada opcion */
    --dd-border-color: var(--blue);
    --dd-text-color: var(--blue);
    --dd-open-color: var(--red);         /* borde de la caja mientras esta abierto (igual que ESTUDIOS) */
}
.lab-dropdown-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: transparent; border: var(--dd-border-width) solid var(--dd-border-color); color: var(--dd-text-color);
    border-radius: 0;
    padding: 10px 14px; font-family: var(--lab-font-labels); font-size: var(--lab-fs-select);
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
}
.lab-dropdown.is-open .lab-dropdown-toggle { border-color: var(--dd-open-color); }
.soundbank-row .lab-dropdown { width: 420px; }
.soundbank-row .lab-dropdown-toggle { font-size: var(--lab-fs-soundbank-select); }
.lab-dropdown-toggle .lab-dropdown-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: left; }
.lab-dropdown-arrow { width: 14px; height: 14px; flex-shrink: 0; margin-left: 10px; transition: transform .2s ease; }
.lab-dropdown.is-open .lab-dropdown-arrow { transform: rotate(180deg); }
/* El menu abre hacia abajo y cada opcion es su propio "cuadrado" con borde (como ESTUDIOS).
   El menu en si no lleva borde: el margen negativo (= grosor del borde) funde el borde de
   una fila con el de la siguiente en una sola linea. */
.lab-dropdown-menu {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
    max-height: 320px; overflow-y: auto;
    background: var(--navy-900); border: none;
}
.lab-dropdown.is-open .lab-dropdown-menu { display: block; }
.lab-dropdown-row {
    padding: 12px 14px; font-family: var(--lab-font-labels); font-size: var(--lab-fs-select);
    font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--dd-text-color); cursor: pointer;
    border: var(--dd-border-width) solid var(--dd-border-color);
    margin-top: calc(-1 * var(--dd-border-width));
}
.lab-dropdown-row:first-child { margin-top: 0; }
.lab-dropdown-row:hover,
.lab-dropdown-row.is-selected { text-decoration: underline; text-decoration-color: var(--dd-border-color); text-underline-offset: 3px; }

/* ---------- Favoritos de MODULO (3 huecos por estrella) ---------- */
.fav-row { display: flex; gap: 12px; }
.fav-slot {
    width: var(--lab-bottom-row-size); height: var(--lab-bottom-row-size); border-radius: 16px; flex-shrink: 0;
    background: var(--navy-950); border: 1px solid var(--cream-100); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: transform 0.15s ease;
    /* Mantener pulsado 2s abre el dialogo de borrar (ver lab-console.js): que el
       movil no lo confunda con seleccionar texto o abrir su propio menu. */
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.fav-slot:hover { transform: translateY(-2px); }
.fav-slot::before {
    content: "+"; color: var(--cream-100); font-size: 34px; font-weight: 700; line-height: 1;
    font-family: var(--font-ui);
}
.fav-slot.is-saved, .fav-slot.is-active { border: none; }
.fav-slot.is-saved::before, .fav-slot.is-active::before { content: ""; }
.fav-slot.is-saved { background-image: url("../img/icons/fav-slot-saved.png"); }
.fav-slot.is-active { background-image: url("../img/icons/fav-slot-active.png"); }
.fav-slot.is-pulse { animation: fav-pulse 0.4s ease; }
@keyframes fav-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- Ventana emergente de escritorio para Proyecto/Aprende/Colabora/Contacto ----------
   Al pulsar uno de los 4 iconos en pantallas anchas (donde se ven, no en
   movil), la pagina se abre dentro de un iframe flotante sobre la consola
   en vez de navegar fuera. Ctrl/Cmd/clic-central siguen abriendo en
   pestana nueva con normalidad (no se intercepta ese caso). */
.lab-icon-modal-overlay {
    position: fixed; inset: 0; z-index: 5000; background: rgba(6,6,20,0.65);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lab-icon-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.lab-icon-modal {
    position: fixed; top: 20%; left: 12.5%; width: 75%; bottom: 0;
    z-index: 5001; background: var(--cream-100); border-radius: 0; overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,0.45);
    opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.lab-icon-modal.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lab-icon-modal iframe { width: 100%; height: 100%; border: none; display: block; background: var(--cream-100); }
@media (max-width: 1000px) {
    .lab-icon-modal, .lab-icon-modal-overlay { display: none !important; }
}

/* ---------- Menu movil (hamburguesa + panel lateral) ----------
   La consola sigue sin apilarse NUNCA (ver nota de responsive mas abajo: en
   vertical se sigue obligando a girar el telefono). Esto solo sustituye,
   en pantallas estrechas YA EN HORIZONTAL, la fila de 4 iconos y el texto
   "DE LAS ESTRELLAS" por un boton de menu (deja mas sitio); el panel que
   abre repite esos mismos 4 enlaces, mas grandes y facil de pulsar. */
.lab-mobile-menu-btn { display: none; }
.lab-brand-delas-mobile { display: none; }

@media (max-width: 1000px) {
    .icon-nav-custom { display: none !important; }
    .lab-mobile-menu-btn {
        display: flex; align-items: center; justify-content: center;
        width: 60px; height: 60px; margin-left: auto; border: none; background: transparent;
        color: var(--cream-100); cursor: pointer; flex-shrink: 0; padding: 0;
        /* La consola entera se encoge con "zoom" (fitConsole en base.html) segun
           el alto de pantalla disponible; en movil apaisado ese zoom puede bajar
           mucho y dejar el boton demasiado pequeno para pulsarlo. Lo compensamos
           en sentido contrario (base.html expone --lab-zoom), con un tope para
           que tampoco crezca de mas si el zoom es muy bajo. */
        transform: scale(min(2.4, calc(1 / var(--lab-zoom, 1))));
        transform-origin: right center;
    }
    .brand-lockup.on-light .lab-mobile-menu-btn,
    .brand-lockup-game .lab-mobile-menu-btn { color: var(--game-ink, var(--cream-ink)); }
    .lab-mobile-menu-btn svg { width: 42px; height: 42px; }
    .lab-col-circle { justify-content: center; }

    /* "DE LAS ESTRELLAS" no cabe al lado del logo en movil (sustituido por el
       boton de menu); se muestra en su lugar, en pequeno, debajo del logo. */
    /* Como en escritorio, pero PEGADITO al logo: "DE LAS ESTRELLAS" (la imagen de
       arriba a la derecha) se coloca justo a la derecha de "CANTE" y el menu
       hamburguesa se queda arriba a la derecha. .lab-brand-slot pasa a
       display:contents para que su imagen y su boton sean hijos directos de
       la cabecera y se puedan ordenar sin tocar el HTML. */
    .brand-lockup, .brand-lockup-game { align-items: center !important; }
    .lab-brand-slot { display: contents; }
    .sonifica-container { flex-wrap: nowrap; }
    .sonifica-left { flex-direction: row; align-items: center; gap: 14px; }
    .lab-page .toggle-switch { transform: none; }
    .lab-brand-right-img { height: calc(var(--lab-logo-cante-height) * 0.9); margin-left: 12px; }
}

.lab-mobile-panel-overlay {
    position: fixed; inset: 0; z-index: 3999; background: rgba(6,6,20,0.55);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.lab-mobile-panel-overlay.is-open { opacity: 1; pointer-events: auto; }

.lab-mobile-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 4000;
    width: clamp(280px, 55vw, 480px);
    background: var(--red); overflow: hidden;
    transform: translateX(100%); transition: transform .3s ease;
    display: flex; flex-direction: column;
}
.lab-mobile-panel.is-open { transform: translateX(0); }
/* Al pulsar Proyecto / Aprende / Colabora / Contacto, la pagina se abre DENTRO de este mismo panel
   (media pantalla), sin salir del Laboratorio. Su propio enlace "Salir >>" cierra todo. */
.lab-mobile-panel-view {
    position: absolute; inset: 0; z-index: 3; background: var(--cream-100);
    transform: translateX(100%); transition: transform .28s ease; visibility: hidden;
}
.lab-mobile-panel.has-view .lab-mobile-panel-view { transform: translateX(0); visibility: visible; }
.lab-mobile-panel-view iframe { width: 100%; height: 100%; border: none; display: block; background: var(--cream-100); }
.lab-mobile-panel.has-view .lab-mobile-panel-close { display: none; }
.lab-mobile-panel-close {
    position: absolute; top: 22px; right: 22px; width: 30px; height: 30px;
    border: none; background: transparent; color: var(--navy-950); cursor: pointer; z-index: 2;
}
.lab-mobile-panel-close svg { width: 100%; height: 100%; }
.lab-mobile-panel-links { position: relative; z-index: 1; margin: auto 0; display: flex; flex-direction: column; }
.lab-mobile-panel-links a {
    font-family: var(--lab-font-labels); font-weight: 700; font-size: 32px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--navy-950); text-decoration: none;
    padding: 14px 32px; text-align: center;
}
.lab-mobile-panel-icon { position: absolute; opacity: 0.9; pointer-events: none; z-index: 0; }
.lab-mobile-panel-icon img { display: block; width: 100%; height: auto; }
.lab-mobile-panel-icon.icon-flor { top: 6%; right: 10%; width: 24%; }
.lab-mobile-panel-icon.icon-silla { top: 28%; left: 6%; width: 28%; }
.lab-mobile-panel-icon.icon-luna { bottom: 24%; right: 8%; width: 24%; }
.lab-mobile-panel-icon.icon-guitarra { bottom: 4%; left: 12%; width: 22%; }
@media (max-width: 560px) {
    .lab-mobile-panel { width: 78vw; }
    .lab-mobile-panel-links a { font-size: 24px; padding: 10px 20px; }
}

/* ---------- RESPONSIVE de la consola (Laboratorio / Tutorial / Juega) ----------
   La consola NUNCA se apila en 1 columna: siempre son 3 columnas, y se
   escala de forma CONTINUA para caber en cualquier pantalla (horizontal).
   El zoom real lo calcula un pequeño script en base.html a partir de
   --lab-fit-width / --lab-fit-height / --lab-page-zoom / --lab-fit-min-zoom
   y lo aplica como `zoom` en línea sobre .lab-page. Este valor de aquí es
   solo el de partida (antes de que corra el script), para que no parpadee.
   En VERTICAL (tablet/móvil de pie) se obliga a girar — ver #rotate-device. */
@media (orientation: landscape) and (max-height: 480px) {
    .lab-page.lab-page { padding: 10px 16px 0; }
}

/* ============================================================
   "Gira la pantalla": overlay a pantalla completa cuando se abre una
   pagina de consola (Laboratorio / Tutorial / Juega) en VERTICAL en un
   movil o tablet. La consola es horizontal por diseño y no se apila.
   Las paginas de contenido (Aprende, Proyecto...) NO lo muestran.
   ============================================================ */
#rotate-device { display: none; }
@media (orientation: portrait) and (max-width: 1024px) {
    /* En la portada tambien: el aviso va ANTES del video de introduccion */
    body:has(.lab-page) #rotate-device,
    body:has(.gateway-page) #rotate-device,
    body:has(#intro-video-screen) #rotate-device {
        display: flex;
        position: fixed; inset: 0; z-index: 100000;
        flex-direction: column; align-items: center; justify-content: center;
        gap: 26px; text-align: center; padding: 36px;
        background: radial-gradient(circle at 50% 32%, #17173e 0%, var(--navy-950) 72%);
        color: var(--cream-100);
    }
    body:has(.lab-page) { overflow: hidden; }
    body:has(.lab-page) .main-content { visibility: hidden; }
}
.rotate-phone {
    width: 96px; height: 96px;
    transform-origin: 50% 50%;
    animation: rotate-hint 2.6s ease-in-out infinite;
}
.rotate-phone .rp-body { fill: none; stroke: var(--blue); stroke-width: 5; }
.rotate-phone .rp-dot { fill: var(--blue); stroke: none; }
.rotate-phone .rp-arrow { fill: var(--red); stroke: none; }
@keyframes rotate-hint {
    0%, 28% { transform: rotate(0deg); }
    58%, 100% { transform: rotate(-90deg); }
}
.rotate-title {
    font-family: var(--font-lab); font-stretch: extra-condensed;
    font-weight: 700; font-size: 38px; letter-spacing: 0.1em; color: #fff; text-transform: uppercase;
}
.rotate-sub {
    font-family: var(--font-footer);
    font-size: 15px; line-height: 1.4; letter-spacing: 1px;
    color: var(--blue); max-width: 300px;
}

/* ---------- TUTORIAL: tarjeta de pasos + foco (spotlight) ---------- */
#spotlight {
    position: fixed; box-shadow: 0 0 0 9999px var(--tut-dim-color); border-radius: 8px;
    pointer-events: none; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9998;
}
#tutorial-tooltip {
    position: fixed; background: var(--tut-card-bg); border: none; color: var(--tut-card-text);
    padding: var(--tut-card-padding); border-radius: var(--tut-card-radius); z-index: 9999;
    width: var(--tut-card-width); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--tut-card-relief);
    display: flex; flex-direction: column; gap: 14px; opacity: 0; pointer-events: auto;
    font-family: var(--tut-card-font);
    /* En pantallas bajas (movil en horizontal) la tarjeta con GIF no debe
       salirse por arriba/abajo: si no cabe, que haga scroll ella sola. */
    max-height: 86vh; overflow-y: auto;
}
/* Mientras hay un desplegable o una ventana emergente abierta, se quita el
   oscurecido para que se vea con normalidad (ver entrenamiento.html). */
#spotlight.is-dimless { box-shadow: none; }
body.tut-overlay-open #tutorial-tooltip { opacity: 0 !important; pointer-events: none !important; }
#tutorial-arrow { display: none; }
#tut-content { text-align: center; font-family: var(--tut-card-font); font-size: var(--tut-card-text-size); line-height: var(--tut-card-line-height); letter-spacing: 0.5px; }
#tut-content strong { font-family: inherit; color: var(--tut-card-text); }
#tut-dynamic-text { font-family: inherit; font-weight: 700; }
.tut-media { width: 100%; border-radius: 5px; margin-top: 10px; }
.tut-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.tut-counter { font-size: var(--tut-counter-size); color: var(--tut-counter-color); font-weight: 700; letter-spacing: 2px; font-family: var(--tut-card-font); }
.tut-btn { border: none; background: none; padding: 4px 6px; font-weight: 700; cursor: pointer; font-family: var(--font-lab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tut-card-text); font-size: var(--tut-btn-size); }
#tut-next-btn:hover, #tut-prev-btn:hover { text-decoration: underline; }
#tut-prev-btn { opacity: 0.6; }
/* Ultimo paso: FINALIZAR con mas peso visual (fondo rojo de accion primaria,
   como Explorar/Enviar dato), en vez de texto plano. */
.tut-btn-primary {
    background: var(--azul-oscuro); color: var(--cream-100);
    padding: 10px 22px; border-radius: 8px; font-weight: 700;
    transition: filter .2s ease, transform .2s ease;
}
.tut-btn-primary:hover { text-decoration: none !important; filter: brightness(1.1); transform: translateY(-2px); }

/* Tarjeta del Tutorial en pantallas estrechas: mas pequena y con margen
   garantizado (en movil se ancla abajo centrada, ver entrenamiento.html) */
@media (max-width: 900px) {
    #tutorial-tooltip { width: min(var(--tut-card-width), 86vw); }
}
@media (max-width: 560px) {
    #tutorial-tooltip { padding: 20px 18px 14px 18px; }
    #tut-content { font-size: 13px; }
}

/* ---------- MOVIL APAISADO (pantalla ancha y baja) ----------
   SOLO afecta a moviles en horizontal; escritorio y tablets grandes no cambian.
   Disposicion segun el diseno de movil: circulo grande pegado a la izquierda, barras del Modulo en el
   centro (con la caja roja pequena debajo) y columna de controles pegada a la derecha. Las 3 columnas
   son de ancho fijo y el ancho sobrante se reparte en los DOS huecos entre ellas (space-between), asi
   no se pierde espacio a los lados en pantallas muy alargadas. El zoom se calcula por el alto
   (--lab-fit-height), por eso la altura natural esta compactada. */
@media (orientation: landscape) and (max-height: 520px) {
    :root {
        --lab-logo-cante-height: 78px;
        --lab-header-margin-bottom: 46px;
        --lab-grid-max-width: none;           /* la cuadricula y la cabecera ocupan TODO el ancho */
        --lab-columns-height: 632px;
        --lab-circle-size: 585px;
        --lab-fader-track-height: 480px;
        --lab-bottom-row-size: 95px;          /* favoritos y ENVIAR DATO */
        --lab-fs-modulo-number: 32px;
        --lab-quant-margin-top: 47px;
        --lab-soundbank-margin-top: 46px;
        --lab-fav-row-offset: 0px;            /* aqui hay hueco real entre las columnas: no hace falta desplazar */
        --lab-fit-width: 1560;               /* ancho minimo natural: con menos (movil 16:9) las columnas se pisarian */
        --lab-fit-height: 766;
    }
    .lab-page.lab-page { padding: 6px 16px 0; }
    .lab-grid {
        grid-template-columns: var(--lab-circle-size) 100px minmax(675px, 780px);
        justify-content: space-between;
        gap: 0;
    }
    .lab-col-circle { justify-content: flex-end; }          /* el circulo baja hasta alinearse con la fila inferior */
    .sonifica-container { margin-top: 44px; }
    .lab-dropdown, .soundbank-row .lab-dropdown { width: 470px; }
    /* Caja roja del Modulo: mas pequena que los huecos de favoritos, alineada abajo bajo las barras */
    .led-box.modulo-box { height: calc(var(--lab-bottom-row-size) * 0.7); padding: 0 14px; }
    /* Menu hamburguesa: mas discreto (raya de ~25px) */
    .lab-mobile-menu-btn { width: 40px; height: 40px; }
    .lab-mobile-menu-btn svg { width: 32px; height: 32px; }
    /* Desplegables con triangulo relleno (▼), como en el diseno */
    .lab-dropdown-arrow { display: none; }
    .lab-dropdown-toggle::after {
        content: ""; flex-shrink: 0; margin-left: 12px;
        border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 11px solid currentColor;
        transition: transform .2s ease;
    }
    .lab-dropdown.is-open .lab-dropdown-toggle::after { transform: rotate(180deg); }
}

/* Movil apaisado (pantalla baja): tarjeta del tutorial mas compacta para que quepa y deje ver el control */
@media (max-height: 520px) {
    #tutorial-tooltip { padding: 14px 16px 10px 16px; gap: 8px; max-height: 92vh; }
    #tut-content { font-size: 13px; line-height: 1.3; letter-spacing: 0; }
    .tut-media { max-height: 32vh; object-fit: contain; margin-top: 4px; }
    .tut-footer { margin-top: 6px; }
    .tut-btn { font-size: 12px; }
    .tut-counter { font-size: 12px; }
}

button:disabled { opacity: 0.4; cursor: not-allowed !important; }

/* ---------- Tarjeta de despedida del Tutorial (tras ENVIAR DATO): misma estetica que
   las tarjetas azules del tutorial (fondo azul claro, relieve, esquinas cuadradas) ---------- */
.modal-content.tut-card-style {
    background: var(--tut-card-bg); color: var(--tut-card-text);
    border: none; border-radius: var(--tut-card-radius);
    box-shadow: var(--tut-card-relief);
    width: min(var(--tut-card-width), 86vw); max-width: none;
    padding: var(--tut-card-padding);
    font-family: var(--tut-card-font);
}
.modal-content.tut-card-style h2 {
    font-family: var(--tut-card-font); font-weight: 700; font-size: 20px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--tut-card-text); margin-bottom: 16px;
}
.modal-content.tut-card-style p {
    color: var(--tut-card-text); font-family: var(--tut-card-font);
    font-size: var(--tut-card-text-size); line-height: var(--tut-card-line-height); margin-bottom: 22px;
}
.modal-content.tut-card-style .buttons-section { flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }