/* src/sensores/simulado.css
 *
 * The look of the panel of sensors by hand (simulado.js). Same tokens and fallbacks as
 * mando.css: the brand's when the page has them, the night palette otherwise.
 */

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

    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 20px;
    background: var(--s-fondo);
    color: var(--s-texto);
    font-family: var(--vc-font, 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', sans-serif);
    font-size: 16px;
    line-height: 1.3;
}

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

.vc-simulado__ayuda { margin: 0 0 4px; color: var(--s-texto2); }

/* two lines per sensor, so the panel also fits a narrow column:
     label ................ where the number comes from
     [ slider --------------------------------- ] number   */
.vc-simulado__fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cabeza cabeza" "barra cifra";
    align-items: center;
    column-gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--s-linea);
}

/* the first line spans the row: what the pill says does not change how wide the slider is */
.vc-simulado__cabeza {
    grid-area: cabeza;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.vc-simulado__rotulo { flex: 1 1 auto; min-width: 0; font-weight: 500; }

.vc-simulado__barra {
    grid-area: barra;
    width: 100%;
    min-width: 0;   /* a range input has its own idea of how narrow it may get */
    height: 40px;   /* the whole height takes the pointer, not only the thin track */
    margin: 0;
    accent-color: var(--s-celeste);
    cursor: pointer;
}

/* locked: the live sensor is moving it */
.vc-simulado__barra:disabled { cursor: default; opacity: 0.75; }

.vc-simulado__cifra {
    grid-area: cifra;
    min-width: 3.5ch;
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.vc-simulado__origen {
    flex: none;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid var(--s-linea);
    font-size: 13px;
    color: var(--s-texto2);
    white-space: nowrap;
}

/* a real sensor is speaking */
.vc-simulado__origen.es-viva {
    border-color: var(--s-celeste);
    color: var(--s-texto);
}

/* the sensor is not there, and the row says why */
.vc-simulado__origen.es-falta {
    border-style: dashed;
    color: var(--s-texto);
}

.vc-simulado__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* secondary buttons: an outline, with text. The page's one filled orange button is ¡Despegar! */
.vc-simulado__boton {
    min-height: 48px;
    padding: 8px 18px;
    border: 2px solid var(--s-celeste);
    border-radius: 16px;
    background: var(--s-pieza);
    color: var(--s-texto);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.vc-simulado__boton:active { transform: translateY(2px); }

.vc-simulado__boton:focus-visible,
.vc-simulado__barra:focus-visible {
    outline: 3px solid var(--s-texto);
    outline-offset: 2px;
}

/* The reasons, whole («No hay permiso para usar la cámara.»): for a screen reader only. They are
   out of the flow and one pixel big, so the panel is never taller for having something to say
   (a page that places this element in its own grid changes nothing: it is not in the flow). */
.vc-simulado { position: relative; }
.vc-simulado .vc-simulado__avisos {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.vc-simulado__avisos p { margin: 0; }