/* Modo astronauta: visor tipo casco (HUD) sobre la vista en primera persona. Autor: Hamza. */

:root {
    --astro: #8fe9ff;
    --astro-tenue: rgba(143, 233, 255, .55);
    --astro-ambar: #ffc247;
    --astro-rojo: #ff6b5e;
    --astro-fondo: rgba(6, 14, 22, .46);
    --astro-f: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.astro-visor { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--astro);
    font: 500 13px/1.3 var(--astro-f); font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
body.navegando.astronauta .astro-visor { display: block; }

/* Cristal del casco: bordes oscurecidos y un aro curvo */
.astro-cristal { position: absolute; inset: 0;
    background: radial-gradient(ellipse 78% 82% at 50% 46%, transparent 62%, rgba(4, 8, 12, .55) 86%, rgba(2, 4, 6, .92) 100%); }
.astro-cristal::after { content: ''; position: absolute; inset: 10px 14px 12px; border: 1.5px solid rgba(143, 233, 255, .22);
    border-radius: 46% 46% 42% 42% / 30% 30% 34% 34%; }

/* Cinta de rumbo */
.astro-brujula { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: min(420px, 56vw); height: 44px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.astro-brujula .cinta { position: absolute; left: 50%; top: 0; height: 20px; will-change: transform; }
.astro-brujula .cinta span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--astro-tenue); padding-bottom: 7px;
    background: linear-gradient(var(--astro-tenue), var(--astro-tenue)) center bottom / 1px 5px no-repeat; }
.astro-brujula .cinta span.card { color: var(--astro); font-weight: 700; font-size: 12px; background-size: 2px 7px; }
.astro-brujula > i { position: absolute; left: 50%; top: 19px; width: 0; height: 0; transform: translateX(-50%);
    border: 5px solid transparent; border-bottom-color: var(--astro); }
.astro-brujula > b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px; letter-spacing: .04em; }

/* Siguiente maniobra */
.astro-maniobra { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
    padding: 8px 16px 8px 10px; border: 1px solid var(--astro-tenue); border-radius: 12px; background: var(--astro-fondo); max-width: min(520px, 78vw); }
.astro-maniobra .ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.astro-maniobra .ico svg { width: 40px; height: 40px; }
.astro-maniobra .dist { font: 700 26px/1.05 var(--astro-f); color: #fff; }
.astro-maniobra .txt { font-size: 13.5px; color: var(--astro); }
.astro-visor.emergencia .astro-maniobra { border-color: var(--astro-rojo); }
.astro-visor.emergencia .astro-maniobra .txt { color: var(--astro-rojo); }

/* Columnas laterales */
.astro-lado { position: absolute; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; width: 150px; }
.astro-lado.izq { left: 6%; }
.astro-lado.der { right: 6%; text-align: right; }
.astro-barra span, .astro-dato span { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--astro-tenue); }
.astro-barra > div { height: 6px; border: 1px solid var(--astro-tenue); border-radius: 4px; margin: 3px 0 2px; overflow: hidden; background: rgba(0, 0, 0, .3); }
.astro-barra > div i { display: block; height: 100%; background: var(--astro); transition: width .3s linear; }
.astro-barra b, .astro-dato b { font: 700 17px/1.1 var(--astro-f); color: #fff; }
.astro-barra.mal b, .astro-dato b.mal { color: var(--astro-ambar); }
.astro-barra.mal > div i { background: var(--astro-ambar); }
.astro-barra.critico b { color: var(--astro-rojo); }
.astro-barra.critico > div i { background: var(--astro-rojo); }
.astro-dato b { display: block; }

/* Alertas */
.astro-alertas { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 80vw; }
.astro-alertas span { padding: 4px 12px; border: 1px solid var(--astro-ambar); color: var(--astro-ambar); border-radius: 999px; background: var(--astro-fondo); font-size: 12.5px; }
.astro-alertas span.critico { border-color: var(--astro-rojo); color: var(--astro-rojo); }

/* Nota de procedencia: qué es dato y qué es textura generada */
.astro-nota { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); max-width: min(560px, 80vw); text-align: center;
    font-size: 10.5px; letter-spacing: .02em; color: rgba(143, 233, 255, .6); }

/* Con el visor puesto, el banner verde sobra y la hoja inferior se reduce a los mandos, en cristal oscuro */
body.navegando.astronauta .g-banner { display: none; }
body.navegando.astronauta .g-controles { display: none; }
body.navegando.astronauta .g-hoja { background: rgba(8, 16, 24, .72); color: #e8f4f8; border: 1px solid rgba(143, 233, 255, .25);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.navegando.astronauta .g-hoja .indic, body.navegando.astronauta .g-hoja .eta span { display: none; }
body.navegando.astronauta .g-hoja .eta b { color: #fff; }
body.navegando.astronauta .g-hoja .imprevistos span { color: rgba(232, 244, 248, .7); }
body.navegando.astronauta .g-hoja .g-chip { background: rgba(255, 255, 255, .08); color: #e8f4f8; border-color: rgba(143, 233, 255, .3); }
body.navegando.astronauta .g-hoja .g-chip[aria-pressed="true"] { background: rgba(143, 233, 255, .22); color: #fff; border-color: var(--astro); }
body.navegando.astronauta .g-hoja .g-redondo, body.navegando.astronauta .g-hoja .salir { background: rgba(255, 255, 255, .1); color: #e8f4f8; box-shadow: none; }

/* Control de altura de la cámara (solo con el modo astronauta) */
.astro-altura { display: none; align-items: center; gap: 6px; font: 500 12.5px var(--astro-f); color: #e8f4f8; white-space: nowrap; }
body.navegando.astronauta .astro-altura { display: inline-flex; }
.astro-altura input { width: 84px; accent-color: var(--astro); }
.astro-altura b { min-width: 38px; font-variant-numeric: tabular-nums; }

/* Pantallas estrechas: las columnas pasan a una fila bajo la maniobra */
@media (max-width: 720px) {
    .astro-lado { top: auto; transform: none; bottom: 230px; width: 42%; gap: 6px; }
    .astro-lado.izq { left: 5%; } .astro-lado.der { right: 5%; }
    .astro-barra b, .astro-dato b { font-size: 14px; }
    .astro-maniobra .dist { font-size: 21px; }
    .astro-alertas { bottom: 200px; }
}
@media (prefers-reduced-motion: reduce) { .astro-barra > div i { transition: none; } }

/* La hoja lleva más mandos con el modo astronauta: el tiempo restante no debe partirse en dos líneas */
body.navegando.astronauta .g-hoja .eta b { white-space: nowrap; font-size: 20px; }