/* src/interfaz/estilos.css
 *
 * The look of the computer's page (index.html): the bar, the editor and the sky side by side,
 * what is drawn over the sky, the board under it (mando, sensors, devices) and the explorer of
 * examples.
 *
 * Colours and the typeface are the brand's tokens (importado/marca.css, the copy of
 * design/communication/shared/brand.css) in their dark set: <html data-theme="dark">. Nothing
 * here names a colour of the palette by its value, except the two translucent nights that sit
 * over the sky (the tokens are opaque).
 *
 * Four rules this sheet keeps:
 *   · THE PAGE NEVER SCROLLS. Everything lives in a grid as tall as the window; a part that can
 *     grow (a panel, the cards, the notices, the explorer of examples) scrolls or clips inside
 *     itself. Anything hidden is display: none - an absolutely placed element that is only
 *     invisible still stretches the page;
 *   · NOTHING WRITTEN OVER THE SKY SITS ON ANYTHING ELSE. Cards, notices, the alpaca's bubble
 *     and the clock are cells of one grid (.sobre), not boxes pinned to the four corners;
 *   · ORANGE IS ¡DESPEGAR! AND NOTHING ELSE (.vc-btn-accion, from the brand's sheet). Every
 *     other button is the celeste outline (.vc-btn);
 *   · no bare `button` or `dialog` selectors: Blockly's own dialog and the panels of the other
 *     modules (mando, simulado, the pairing panel) bring their own looks.
 */

:root {
    --alto-panel: 208px;          /* the board under the sky: the mando's two rows fit in it */
    --noche-velo: rgba(14, 24, 48, 0.78);
    --tinta-velo: rgba(21, 34, 56, 0.9);
}

html, body { height: 100%; margin: 0; }

body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--vc-font);
    font-size: 16px;
    line-height: 1.4;
}

[hidden] { display: none !important; }

.sin-js {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;
    display: grid; place-items: center; margin: 0; padding: 24px; text-align: center;
    background: var(--fondo); color: var(--texto); font-size: 20px; font-weight: 500;
}

/* ------------------------------------------------------------------ the bar */

.barra {
    position: relative;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--linea);
    background: var(--fondo);
}

.barra__marca { display: flex; align-items: center; gap: 14px; }
.barra__marca .vc-logo { color: var(--texto); }
/* what this page is, beside the logo: only where the bar has room for it */
.barra__rotulo { display: none; color: var(--texto2); font-weight: 500; white-space: nowrap; }
@media (min-width: 1500px) { .barra__rotulo { display: block; } }

.barra__grupo { display: flex; align-items: center; gap: 8px; }
.barra__vuelo { margin-left: auto; }

/* big buttons, with words. The shapes and colours are the brand's .vc-btn / .vc-btn-accion */
.boton {
    min-height: 44px;
    padding: 0 16px;
    font-size: 16px;
    white-space: nowrap;
}
.boton:hover:not(:disabled) { background: rgba(108, 196, 238, 0.14); }
.boton:disabled { opacity: 0.4; cursor: default; }
.boton--despegar { min-height: 48px; padding: 0 24px; font-size: 18px; }
.boton--despegar:hover:not(:disabled) { background: #FF8C2E; }      /* the brand's own hover for the action */
.boton--ancho { min-width: 96px; }                                   /* «Pausa» and «Seguir» take the same room */
.boton--chico { min-height: 36px; padding: 0 12px; font-size: 14px; }

.velocidad { display: flex; align-items: center; gap: 8px; color: var(--texto2); font-size: 14px; font-weight: 500; }
.velocidad select {
    min-height: 44px;
    padding: 0 10px;
    border: 2px solid var(--linea);
    border-radius: 14px;
    background: var(--superficie2);
    color: var(--texto);
    font: 500 16px var(--vc-font);
    cursor: pointer;
}
.velocidad select:focus-visible { outline: 3px solid var(--vc-celeste); outline-offset: 3px; }

/* ------------------------------------------------------------------ editor | sky */

.taller {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(540px, 46vw, 880px);
    min-height: 0;
}

.taller__editor { position: relative; min-width: 0; min-height: 0; }
#editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.taller__lado {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--linea);
}

/* ------------------------------------------------------------------ the sky and what is over it */

.cielo { position: relative; min-height: 0; overflow: hidden; background: var(--fondo); }
.cielo canvas#cielo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }

/* without a sky the box says why; what is written over the sky (notices, the bubble) still shows */
.cielo__falta {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
    display: grid; place-items: center; margin: 0; padding: 24px 24px 96px; text-align: center;
    background: var(--fondo); font-size: 18px; font-weight: 500;
}

/* Everything written over the sky, in one grid. The guide's overlay (src/capa.js, z-index 4)
   is under it; the sky is dragged through it (pointer-events: none), except where something
   can be pressed.

       cards (the top, as wide as the notices leave)  | notices
       alpaca | her bubble
       alpaca | ........................ who points · where and when

   The bubble has a row of its own: a long sentence makes that row taller and the room of the
   cards shorter, and never covers the clock or a card. */
.sobre {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 6px 8px;
    padding: 12px;
    pointer-events: none;
}

/* variables and the values a program shows: small cards, each with the colour of its block
   category. A few are a column; many (pantalla.js says so) flow in rows, smaller; and if even
   so they do not fit, their corner scrolls. */
.carteles {
    grid-column: 1 / 3; grid-row: 1;
    display: flex; flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 6px;
    min-width: 0; min-height: 0;
    overflow: hidden;
}
.carteles[data-muchos="si"] { flex-flow: row wrap; gap: 4px 6px; }
.carteles[data-desborda="si"] { overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
.cartel {
    flex: none;
    display: inline-flex; align-items: baseline; gap: 10px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 4px 12px 4px 10px;
    border-left: 6px solid var(--cartel-color, var(--vc-celeste));
    border-radius: 10px;
    background: var(--tinta-velo);
    font-size: 15px;
}
.carteles[data-muchos="si"] .cartel { gap: 6px; padding: 2px 8px 2px 6px; border-left-width: 4px; font-size: 13.5px; }
.cartel__nombre { flex: 0 1 auto; max-width: 14em; color: var(--texto2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartel__valor { flex: 0 1 auto; min-width: 2ch; max-width: 16em; font-weight: 800; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* short notices: what a block could not do, what the page just did */
.avisos {
    grid-column: 3; grid-row: 1;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    max-width: 340px; min-height: 0;
    overflow: hidden;
}
.aviso {
    flex: none;
    margin: 0;
    padding: 8px 14px;
    border-radius: 14px;
    background: var(--vc-papel);
    color: var(--vc-tinta);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.aviso--error { border-left: 6px solid #E05A4E; }                    /* the brand sheet's error red (.vc-toast.error) */
.aviso__bloque { display: block; font-size: 13px; font-weight: 400; opacity: 0.8; }
/* a notice is read, not touched: the sky under it can still be dragged. Only what can be pressed takes the mouse */
.aviso__accion {
    pointer-events: auto;
    margin-left: 8px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--vc-tinta); font: 800 15px var(--vc-font); text-decoration: underline; text-underline-offset: 3px;
}
/* more notices are waiting for their turn */
.avisos__cola {
    flex: none;
    margin: 0; padding: 2px 10px; border-radius: 999px;
    background: var(--noche-velo); color: var(--texto); font-size: 13px; font-weight: 500;
}

/* the alpaca, on her colour field, and what she says */
.alpaca {
    grid-column: 1; grid-row: 2 / 4; align-self: end;
    display: grid; place-items: end center;
    width: 56px; height: 56px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--vc-grad-azul);
}
.alpaca img { display: block; width: 48px; height: auto; }
.burbuja {
    grid-column: 2 / 4; grid-row: 2; justify-self: start; align-self: end;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 14px;
    max-width: min(24em, 100%);
    border-radius: 18px 18px 18px 4px;
    background: var(--vc-papel);
    color: var(--vc-tinta);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    /* a very long sentence is said whole and written up to here */
    max-height: calc(1.3em * 5 + 20px);
    overflow: hidden;
}

/* the last row: who points (with a telescope), and where and when the sky is */
.pie {
    grid-column: 2 / 4; grid-row: 3;
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px;
    min-width: 0;
}
.reloj {
    margin: 0; padding: 4px 12px;
    max-width: 100%; box-sizing: border-box;
    border-radius: 999px;
    background: var(--noche-velo);
    color: var(--texto);
    font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modo {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 10px;
    margin: 0; padding: 4px 12px;
    max-width: 100%; box-sizing: border-box;
    border-radius: 16px;
    background: var(--vc-celeste);
    color: var(--vc-tinta);
    font-size: 14px; font-weight: 800;
}
.modo > span { white-space: nowrap; }
.modo__perilla { font-weight: 500; }
.modo__salir {
    pointer-events: auto;
    padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--vc-tinta); font: 800 14px var(--vc-font); text-decoration: underline; text-underline-offset: 3px;
}
.modo__salir:focus-visible { outline: 3px solid var(--vc-tinta); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ the board under the sky */

.tablero { min-width: 0; border-top: 1px solid var(--linea); background: var(--superficie); }

.tablero__cabeza {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px 0;
    border-bottom: 1px solid var(--linea);
}
.pestanas { display: flex; gap: 2px; margin-right: auto; }
.pestana {
    min-height: 40px;
    padding: 6px 10px 4px;
    border: 0;
    border-bottom: 4px solid transparent;
    background: transparent;
    color: var(--texto2);
    font: 800 15px var(--vc-font);
    cursor: pointer;
}
.pestana[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--vc-celeste); }
.pestana:focus-visible { outline: 3px solid var(--vc-celeste); outline-offset: -3px; }
/* a sensor of this tab is on (the camera, the microphone) */
.pestana[data-viva="si"]::after {
    content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px;
    border-radius: 50%; background: var(--vc-celeste); vertical-align: middle;
}

.casilla { display: inline-flex; align-items: center; gap: 6px; color: var(--texto2); font-size: 14px; white-space: nowrap; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--vc-celeste); }

/* the two devices: a mark that is a ring while nothing is connected, and a tick once one is */
.aparatos { display: flex; gap: 6px; }
.aparatos .boton { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.punto { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--campo); box-sizing: border-box; }
[data-conectado="si"] .punto { border-color: var(--vc-verde); background: var(--vc-verde); }
[data-conectado="si"] .punto::after { content: ''; width: 3px; height: 6px; margin-top: -2px; border: solid var(--vc-tinta); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* trying the telescope without one: the button looks held down */
.aparatos .boton[data-probando="si"] { background: rgba(108, 196, 238, 0.2); }

.tablero__panel { height: var(--alto-panel); box-sizing: border-box; padding: 10px 12px; overflow: auto; }

/* the mando on the computer: the same controls as on the phone (src/sensores/mando.css), packed
   in two rows - buttons and knobs, then the two sliders. Every target stays 56 px or more. */
#panel-mando .vc-mando {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 24px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
#panel-mando .vc-mando__botones { grid-template-columns: repeat(4, 60px); gap: 8px; }
#panel-mando .vc-mando__boton { min-height: 60px; border-radius: 16px; }
#panel-mando .vc-mando__letra { font-size: 24px; }
#panel-mando .vc-mando__perillas { justify-content: flex-start; gap: 24px; }
#panel-mando .vc-mando__perilla { width: 64px; height: 64px; }
#panel-mando .vc-mando__aguja::after { top: 5px; height: 14px; }
#panel-mando .vc-mando__deslizadores { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
#panel-mando .vc-mando__deslizador { min-width: 0; }

/* the sensors: who is on, and one row per measure (src/sensores/simulado.css), in two columns */
.fuentes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.fuente {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 1px 10px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--texto2);
    font-size: 13px;
    white-space: nowrap;
}
.fuente::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--campo); }
.fuente[data-estado="activa"] { border-color: var(--vc-celeste); color: var(--texto); }
.fuente[data-estado="activa"]::before { background: var(--vc-celeste); }
.fuente[data-estado="pidiendo"]::before { background: var(--vc-amarillo); }

#simulado .vc-simulado {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 0 24px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
}
#simulado .vc-simulado__ayuda { display: none; }                     /* the rows say «a mano» themselves */
#simulado .vc-simulado__fila { padding: 2px 0; }
#simulado .vc-simulado__rotulo { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#simulado .vc-simulado__barra { height: 22px; }
#simulado .vc-simulado__origen { font-size: 12px; }
#simulado .vc-simulado__botones { align-self: center; margin-top: 0; }
#simulado .vc-simulado__boton { min-height: 40px; padding: 4px 14px; font-size: 14px; }

/* ------------------------------------------------------------------ the small window of the devices */

.ventanita {
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 12px 12px 20px;
    border: 0;
    border-radius: 24px;
    background: var(--superficie);
    color: var(--texto);
    font-family: var(--vc-font);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.ventanita::backdrop { background: rgba(14, 24, 48, 0.7); }
.ventanita__nota { margin: 4px 16px 14px; color: var(--texto2); font-size: 14px; text-align: center; }
.ventanita form { display: flex; justify-content: center; margin: 0; }
/* the panel is the other module's (src/sesion/panel.js): here it only has to fit a 720 px window */
.ventanita .vc-tel { gap: 8px; padding: 8px 12px; }
.ventanita .vc-tel__qr { width: min(180px, 100%); }
.ventanita .vc-tel__pista { max-width: none; }
.ventanita .vc-tel__sin { gap: 6px; }

/* ------------------------------------------------------------------ the explorer of examples */

.biblioteca {
    width: min(1120px, calc(100vw - 48px));
    height: min(760px, calc(100vh - 48px));
    max-width: none; max-height: none;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: var(--superficie);
    color: var(--texto);
    font-family: var(--vc-font);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.biblioteca[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.biblioteca::backdrop { background: rgba(14, 24, 48, 0.7); }

.biblio__cabeza {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 16px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--linea);
}
.biblio__titulo { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.biblio__buscar { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--texto2); font-size: 14px; font-weight: 500; }
.biblio__buscar input {
    flex: 1; min-width: 0; max-width: 420px; min-height: 44px; box-sizing: border-box;
    padding: 0 14px;
    border: 2px solid var(--campo);
    border-radius: 14px;
    background: var(--superficie2);
    color: var(--texto);
    font: 500 16px var(--vc-font);
}
.biblio__buscar input::placeholder { color: var(--texto2); opacity: 1; }
.biblio__buscar input:focus-visible { outline: 3px solid var(--vc-celeste); outline-offset: 2px; }
.biblio__filtros { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.biblio__rotulo { margin-right: 4px; color: var(--texto2); font-size: 14px; font-weight: 500; }
.biblio__filtro {
    min-height: 36px; padding: 0 14px;
    border: 2px solid var(--campo);
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    font: 500 14px var(--vc-font);
    cursor: pointer;
}
.biblio__filtro:hover { border-color: var(--vc-celeste); }
.biblio__filtro[aria-pressed="true"] { border-color: var(--vc-celeste); background: var(--vc-celeste); color: var(--vc-tinta); font-weight: 800; }
.biblio__filtro:focus-visible, .biblio__categoria:focus-visible, .ficha:focus-visible { outline: 3px solid var(--vc-celeste); outline-offset: 2px; }

.biblio__cuerpo { display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 1fr); min-height: 0; }
.biblio__categorias {
    display: grid; align-content: start; gap: 2px;
    min-height: 0; overflow: auto;
    margin: 0; padding: 10px 12px;
    border-right: 1px solid var(--linea);
}
.biblio__categoria {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px;
    padding: 5px 12px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--texto);
    font: inherit; line-height: 1.25; text-align: left;
    cursor: pointer;
}
.biblio__categoria:hover { background: var(--superficie2); }
.biblio__categoria[aria-pressed="true"] { border-color: var(--vc-celeste); background: var(--superficie2); }
.biblio__cat-nombre { font-weight: 800; }
.biblio__cat-cuantos { color: var(--texto2); font-size: 14px; font-variant-numeric: tabular-nums; }
.biblio__cat-desc { grid-column: 1 / -1; color: var(--texto2); font-size: 13px; }

.biblio__lista {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-content: start; gap: 12px;
    min-height: 0; overflow: auto;
    padding: 16px;
}
.biblio__vacio { grid-column: 1 / -1; margin: 24px 8px; color: var(--texto2); font-size: 16px; }
.ficha {
    display: grid; align-content: start; gap: 6px;
    padding: 14px 14px 12px;
    border: 2px solid var(--linea);
    border-radius: 18px;
    background: var(--superficie2);
    color: var(--texto);
    font: inherit; line-height: 1.3; text-align: left;
    cursor: pointer;
    min-width: 0;                /* a card is as wide as its column, whatever it holds */
}
.ficha:hover { border-color: var(--vc-celeste); }
.ficha__titulo { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.ficha__descripcion { color: var(--texto2); font-size: 14.5px; }
.ficha__datos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dato { padding: 1px 9px; border: 1px solid var(--campo); border-radius: 999px; font-size: 13px; white-space: nowrap; }
.dato--necesita { border-color: var(--vc-celeste); }
.dato--telescopio { border-color: var(--vc-celeste); background: var(--vc-celeste); color: var(--vc-tinta); font-weight: 800; }
/* a note may be a short sentence («Perilla: la rueda del mouse o las teclas + y −»): it wraps inside its card */
.dato--nota { border-style: dashed; border-radius: 12px; color: var(--texto2); white-space: normal; }

@media (max-width: 900px) {
    .biblio__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .biblio__categorias { grid-auto-flow: column; grid-auto-columns: max-content; border-right: 0; border-bottom: 1px solid var(--linea); }
    .biblio__cat-desc { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .aviso, .burbuja { animation: vc-llega 160ms ease-out; }
    @keyframes vc-llega { from { opacity: 0; transform: translateY(4px); } }
}