/* src/sensores/mando.css
 *
 * The look of the mando (mando.js): four buttons, two knobs, two sliders. The same sheet is
 * used on the computer, under the sky, and on the phone, where the panel fills the page.
 *
 * Colours come from the brand's tokens when the page has them (design/communication/shared/
 * brand.css: --superficie, --linea, --texto, --vc-celeste...); the fallbacks are the night
 * palette of «La luna en el ocular», so the panel is right on a page without tokens too.
 * No orange here: orange is the page's one main action (¡Despegar!).
 *
 * Two things in this file are behaviour, not decoration:
 *   touch-action: none on every control, or the browser scrolls/zooms the page under a finger
 *     and the knob never sees the movement;
 *   the sizes: every target is at least 56 px, the smallest a child's finger hits reliably.
 */

.vc-mando {
    --m-fondo: var(--superficie, #152238);
    --m-pieza: var(--superficie2, #1B2B47);
    --m-linea: var(--linea, #2A3D60);
    --m-texto: var(--texto, #F4EFE3);
    --m-texto2: var(--texto2, #A9B8CF);
    --m-celeste: var(--vc-celeste, #6CC4EE);
    --m-tinta: var(--vc-tinta, #152238);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px 24px;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    background: var(--m-fondo);
    color: var(--m-texto);
    font-family: var(--vc-font, 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', sans-serif);
    font-size: 16px;
    line-height: 1.25;
    /* between the controls a finger may still scroll a long page; a double tap never zooms */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.vc-mando *,
.vc-mando *::before,
.vc-mando *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ buttons */

.vc-mando__botones {
    display: grid;
    grid-template-columns: repeat(4, minmax(56px, 1fr));
    gap: 10px;
    padding-bottom: 5px;   /* room for the buttons' «thickness» */
}

.vc-mando__boton {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0;
    min-width: 56px;
    min-height: 68px;
    padding: 6px 4px;
    border: 0;
    border-radius: 18px;
    background: var(--m-color);
    color: var(--m-tinta);
    box-shadow: 0 5px 0 var(--m-sombra);
    font: inherit;
    cursor: pointer;
    touch-action: none;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}

.vc-mando__palabra { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.vc-mando__letra { font-size: 28px; font-weight: 800; line-height: 1; }

.vc-mando__boton--a { --m-color: var(--vc-celeste, #6CC4EE); --m-sombra: #3C8FB8; }
.vc-mando__boton--b { --m-color: var(--vc-amarillo, #FFD04A); --m-sombra: #C2940F; }
.vc-mando__boton--c { --m-color: var(--vc-verde, #4CC38A); --m-sombra: #2C8A5E; }
.vc-mando__boton--d { --m-color: var(--vc-azul, #3E63DD); --m-sombra: #263F9A; color: var(--vc-papel, #FFF9F0); }

/* pressed: the button goes down into its own shadow */
.vc-mando__boton.es-presionado {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--m-sombra);
}

/* ------------------------------------------------------------------ knobs and sliders: the label */

.vc-mando__perillas { display: flex; justify-content: space-around; gap: 16px; }
.vc-mando__deslizadores { display: grid; gap: 8px; }

.vc-mando__control { display: grid; gap: 4px; min-width: 0; }
.vc-mando__perillas .vc-mando__control { justify-items: center; }

.vc-mando__rotulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: var(--m-texto2);
}

.vc-mando__cifra {
    min-width: 3ch;
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--m-texto);
}

/* ------------------------------------------------------------------ a knob
   --valor (0..100) is set by mando.js; the ring fills over 270 degrees, the gap is at the bottom */

.vc-mando__perilla {
    --valor: 50;
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(from 225deg,
        var(--m-celeste) calc(var(--valor) * 2.7deg),
        var(--m-linea) 0 270deg,
        transparent 0);
    cursor: grab;
    touch-action: none;
}

.vc-mando__perilla.es-presionado { cursor: grabbing; }

/* the body of the knob, inside the ring */
.vc-mando__perilla::before {
    content: '';
    position: absolute;
    top: 9px; right: 9px; bottom: 9px; left: 9px;   /* not «inset»: an iPhone two years behind does not know it */
    border-radius: 50%;
    background: var(--m-pieza);
    border: 2px solid var(--m-linea);
}

/* the mark that shows where it points: turns with the value, -135..+135 degrees */
.vc-mando__aguja {
    position: absolute;
    top: 9px; right: 9px; bottom: 9px; left: 9px;
    transform: rotate(calc(var(--valor) * 2.7deg - 135deg));
}

.vc-mando__aguja::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 7px;
    width: 6px;
    height: 22px;
    margin-left: -3px;
    border-radius: 3px;
    background: var(--m-texto);
}

/* ------------------------------------------------------------------ a slider
   56 px tall: mando.js relies on the thumb's travel stopping half that height from each end */

.vc-mando__deslizador {
    --valor: 50;
    position: relative;
    height: 56px;
    min-width: 170px;
    cursor: pointer;
    touch-action: none;
}

.vc-mando__carril {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 50%;
    height: 12px;
    margin-top: -6px;
    border-radius: 6px;
    background: var(--m-linea);
    overflow: hidden;
}

.vc-mando__lleno {
    width: calc(var(--valor) * 1%);
    height: 100%;
    background: var(--m-celeste);
}

.vc-mando__pulgar {
    position: absolute;
    top: 6px;
    left: calc(28px + (100% - 56px) * var(--valor) / 100 - 22px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--m-texto);
    border: 4px solid var(--m-celeste);
}

.vc-mando__deslizador.es-presionado .vc-mando__pulgar { transform: scale(1.08); }

/* ------------------------------------------------------------------ keyboard focus */

.vc-mando__boton:focus-visible,
.vc-mando__perilla:focus-visible,
.vc-mando__deslizador:focus-visible {
    outline: 3px solid var(--m-texto);
    outline-offset: 3px;
}

.vc-mando__deslizador:focus-visible { border-radius: 28px; }

@media (prefers-reduced-motion: reduce) {
    .vc-mando__boton { transition: none; }
}