/* Marswalk — planificador EVA (módulo 5, Hani)
 * Lenguaje visual de los mapas de uso diario (Google/Apple Maps): tarjetas blancas, azul de ruta,
 * banner verde de navegación, hoja inferior con la llegada. La superficie es la imagen real de Jezero. */
:root {
    --g-azul: #1a73e8;
    --g-ruta: #4285f4;
    --g-ruta-borde: #1557b0;
    --g-verde: #188038;
    --g-verde-nav: #0f7a3a;
    --g-rojo: #d93025;
    --g-ambar: #f9ab00;
    --g-texto: #202124;
    --g-texto-2: #5f6368;
    --g-borde: #dadce0;
    --g-fondo: #ffffff;
    --g-fondo-2: #f1f3f4;
    --g-sombra: 0 1px 2px rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
    --g-sombra-alta: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3);
    --g-f: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    /* nombres que usa perfil.js */
    --polvo: #202124; --basalto: #5f6368; --ocaso: #1a73e8; --sol: #f9ab00; --hematita: #d93025; --regolito: #ffffff;
}

body.modo-ruta .coords, body.modo-ruta .info, body.modo-ruta .legend, body.modo-ruta .controls { display: none; }
body.modo-ruta .maplibregl-ctrl-top-right { display: none; }

/* ───────── Selector de modo ───────── */
.mw-modo {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 0;
    background: var(--g-fondo); border-radius: 999px; box-shadow: var(--g-sombra); padding: 3px; font-family: var(--g-f);
}
.mw-modo button { all: unset; cursor: pointer; padding: 8px 16px; border-radius: 999px; font: 500 14px var(--g-f); color: var(--g-texto-2); }
.mw-modo button[aria-pressed="true"] { background: #e8f0fe; color: var(--g-azul); }
.mw-modo button:focus-visible { outline: 2px solid var(--g-azul); outline-offset: 2px; }
body.navegando .mw-modo { display: none; }

/* Acceso directo a la zona de alta resolución (solo al explorar) */
.mw-ir-jezero {
    all: unset; cursor: pointer; position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 6;
    background: var(--g-fondo); color: var(--g-azul); border-radius: 999px; box-shadow: var(--g-sombra);
    padding: 6px 14px; font: 500 13px var(--g-f); white-space: nowrap;
}
.mw-ir-jezero:hover { background: #e8f0fe; }
.mw-ir-jezero:focus-visible { outline: 2px solid var(--g-azul); outline-offset: 2px; }
body.modo-ruta .mw-ir-jezero { display: none; }

/* ───────── Panel de indicaciones ───────── */
.g-panel {
    position: absolute; top: 12px; left: 12px; bottom: 12px; width: 392px; z-index: 5; display: none; flex-direction: column;
    background: var(--g-fondo); color: var(--g-texto); border-radius: 12px; box-shadow: var(--g-sombra-alta);
    font: 400 14px/1.43 var(--g-f); overflow: hidden;
}
body.modo-ruta .g-panel { display: flex; }
body.navegando .g-panel { display: none; }
.g-cabecera { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--g-borde); }
.g-cabecera .ico { width: 36px; height: 36px; border-radius: 50%; background: var(--g-azul); color: #fff; display: grid; place-items: center; flex: none; }
.g-cabecera .ico svg { width: 20px; height: 20px; }
.g-cabecera h1 { margin: 0; font: 500 18px/1.2 var(--g-f); }
.g-cabecera p { margin: 2px 0 0; color: var(--g-texto-2); font-size: 12.5px; }
.g-scroll { overflow-y: auto; flex: 1; scrollbar-width: thin; }
.g-sec { padding: 14px 16px; border-bottom: 1px solid var(--g-borde); }
.g-sec:last-child { border-bottom: 0; }
.g-sec h2 { margin: 0 0 10px; font: 500 15px var(--g-f); }
.g-nota { color: var(--g-texto-2); font-size: 12.5px; margin: 6px 0 0; }

/* Lista de puntos de paso (estilo "Cómo llegar") */
.g-pasos { list-style: none; margin: 0; padding: 0; position: relative; }
.g-paso { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; position: relative; }
.g-paso::before { content: ''; position: absolute; left: 13px; top: -6px; height: 14px; border-left: 2px dotted #9aa0a6; }
.g-paso:first-child::before { display: none; }
.g-paso .pin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--g-f); border: 2px solid #5f6368; background: #fff; color: var(--g-texto); box-sizing: border-box; }
.g-paso .pin.base { background: var(--g-azul); border-color: var(--g-azul); color: #fff; }
.g-paso .pin.base svg { width: 15px; height: 15px; }
.g-paso .pin.inicio { border-color: #188038; background: #fff; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 13px #188038; }
.g-paso .pin.fin { border: 0; background: #d93025; color: #fff; }
.g-paso .pin.fin svg { width: 15px; height: 15px; }
.g-paso .acciones { display: flex; align-items: center; gap: 2px; }
.g-paso .enlace { all: unset; cursor: pointer; color: var(--g-azul); font-size: 13px; font-weight: 500; padding: 4px 8px; border-radius: 14px; }
.g-paso .enlace:hover { background: #e8f0fe; }
.g-paso .enlace:focus-visible { outline: 2px solid var(--g-azul); }
.g-paso .nombre { cursor: pointer; }
.g-paso .nombre b { font-weight: 500; display: block; }
.g-paso .nombre small { color: var(--g-texto-2); font-size: 12.5px; }
.g-paso .quitar { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--g-texto-2); font-size: 18px; }
.g-paso .quitar:hover { background: var(--g-fondo-2); }
.g-paso .quitar:focus-visible, .g-otra button:focus-visible { outline: 2px solid var(--g-azul); }
.g-otras { margin-top: 8px; }
.g-otras summary { cursor: pointer; color: var(--g-azul); font-weight: 500; font-size: 14px; list-style: none; padding: 6px 0; }
.g-otras summary::-webkit-details-marker { display: none; }
.g-otra { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 0 6px 40px; }
.g-otra b { font-weight: 500; }
.g-otra small { display: block; color: var(--g-texto-2); font-size: 12.5px; }
.g-otra button { all: unset; cursor: pointer; color: var(--g-azul); font-weight: 500; padding: 4px 10px; border-radius: 16px; }
.g-otra button:hover { background: #e8f0fe; }

/* Salida */
.g-salida { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.g-salida .hora { font: 400 22px var(--g-f); }
.g-salida .hora small { font-size: 13px; color: var(--g-texto-2); margin-left: 6px; }
.g-salida input[type="date"] { font: 400 14px var(--g-f); border: 1px solid var(--g-borde); border-radius: 8px; padding: 6px 8px; color: var(--g-texto); }
.g-salida input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--g-azul); }

/* Opciones de ruta */
.g-opciones { display: grid; gap: 8px; }
.g-opcion {
    all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    padding: 12px 14px; border: 1px solid var(--g-borde); border-radius: 10px; position: relative;
}
.g-opcion:hover { background: #f8f9fa; }
.g-opcion[aria-pressed="true"] { border-color: var(--g-azul); box-shadow: inset 4px 0 0 var(--g-azul); background: #f8fbff; }
.g-opcion:focus-visible { outline: 2px solid var(--g-azul); outline-offset: 2px; }
.g-opcion .t { font: 500 20px/1.2 var(--g-f); }
.g-opcion .t.no { color: var(--g-rojo); font-size: 16px; }
.g-opcion .nom { font-weight: 500; text-align: right; }
.g-opcion .det { color: var(--g-texto-2); font-size: 13px; grid-column: 1 / -1; }
.g-opcion .rec { font-size: 12.5px; font-weight: 500; color: var(--g-verde); grid-column: 1 / -1; }
.g-razon { font-size: 13px; color: var(--g-texto-2); margin: 10px 0 0; }

.g-acciones { display: flex; gap: 8px; margin-top: 14px; }
.g-boton {
    all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 22px; border-radius: 999px; font: 500 14px var(--g-f); background: var(--g-azul); color: #fff; position: relative; overflow: hidden;
}
.g-boton:hover { background: #1765cc; box-shadow: var(--g-sombra); }
.g-boton svg { width: 18px; height: 18px; }
.g-boton.sec { background: #fff; color: var(--g-azul); border: 1px solid var(--g-borde); }
.g-boton.sec:hover { background: #f8fbff; }
.g-boton[disabled] { opacity: .75; cursor: progress; }
.g-boton:focus-visible { outline: 2px solid var(--g-azul); outline-offset: 2px; }
.g-boton .barra { position: absolute; left: 0; bottom: 0; height: 3px; background: #8ab4f8; transition: width .2s; }

/* Avisos */
.g-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.g-avisos li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 7px 4px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.g-avisos li:hover { background: var(--g-fondo-2); }
.g-avisos li svg { width: 20px; height: 20px; }
.g-avisos li.critica svg { color: var(--g-rojo); } .g-avisos li.precaucion svg { color: var(--g-ambar); } .g-avisos li.info svg { color: var(--g-azul); }

.g-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.g-dato b { display: block; font: 500 16px var(--g-f); }
.g-dato span { color: var(--g-texto-2); font-size: 12px; }

.g-perfil { position: relative; height: 130px; margin-top: 4px; }
.g-perfil canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; cursor: ew-resize; }
.g-perfil canvas:focus-visible { outline: 2px solid var(--g-azul); border-radius: 6px; }

.g-sec details > summary { cursor: pointer; font: 500 15px var(--g-f); list-style: none; display: flex; justify-content: space-between; }
.g-sec details > summary::after { content: '⌄'; color: var(--g-texto-2); }
.g-sec details[open] > summary::after { content: '⌃'; }
.g-sec details > summary::-webkit-details-marker { display: none; }
.g-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; }
.g-fila label { color: var(--g-texto-2); font-size: 13px; }
.g-fila input { width: 100px; font: 400 14px var(--g-f); border: 1px solid var(--g-borde); border-radius: 8px; padding: 6px 8px; }
.g-fila-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.g-chip { all: unset; cursor: pointer; padding: 6px 12px; border: 1px solid var(--g-borde); border-radius: 8px; font: 500 13px var(--g-f); color: var(--g-texto); background: #fff; }
.g-chip:hover { background: var(--g-fondo-2); }
.g-chip[aria-pressed="true"] { background: #e8f0fe; border-color: #e8f0fe; color: var(--g-azul); }
.g-chip:focus-visible { outline: 2px solid var(--g-azul); }
.g-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.g-tabla th { text-align: left; color: var(--g-texto-2); font-weight: 500; padding: 4px; border-bottom: 1px solid var(--g-borde); }
.g-tabla td { padding: 4px; border-bottom: 1px solid #f1f3f4; }
.g-tabla tr[data-tramo] { cursor: pointer; } .g-tabla tr[data-tramo]:hover td { background: var(--g-fondo-2); }
.g-fuentes { margin: 8px 0 0; padding-left: 18px; color: var(--g-texto-2); font-size: 12.5px; } .g-fuentes li { margin: 3px 0; } .g-fuentes b { color: var(--g-texto); font-weight: 500; }

/* ───────── Botones redondos del mapa ───────── */
.g-controles { position: absolute; right: 12px; bottom: 32px; z-index: 5; display: none; flex-direction: column; gap: 10px; }
body.modo-ruta .g-controles { display: flex; }
body.navegando .g-controles { bottom: 190px; }
.g-redondo {
    all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--g-sombra);
    display: grid; place-items: center; color: var(--g-texto-2); font: 500 13px var(--g-f);
}
.g-redondo:hover { color: var(--g-texto); background: #f8f9fa; }
.g-redondo[aria-pressed="true"] { color: var(--g-azul); }
.g-redondo svg { width: 22px; height: 22px; }
.g-redondo:focus-visible { outline: 2px solid var(--g-azul); outline-offset: 2px; }
.g-capas-pop {
    position: absolute; right: 64px; bottom: 32px; z-index: 6; display: none; width: 300px; padding: 14px; background: #fff;
    border-radius: 12px; box-shadow: var(--g-sombra-alta); font-family: var(--g-f); color: var(--g-texto);
}
.g-capas-pop.abierto { display: block; }
.g-capas-pop h3 { margin: 0 0 10px; font: 500 15px var(--g-f); }
.g-capas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-capa { all: unset; cursor: pointer; text-align: center; font-size: 12px; line-height: 1.3; color: var(--g-texto-2); }
.g-capa i { display: block; height: 52px; border-radius: 8px; margin-bottom: 4px; border: 2px solid transparent; background: var(--m); }
.g-capa[aria-pressed="true"] { color: var(--g-azul); font-weight: 500; }
.g-capa[aria-pressed="true"] i { border-color: var(--g-azul); }
.g-capa:focus-visible i { outline: 2px solid var(--g-azul); outline-offset: 2px; }

/* ───────── Navegación: banner verde + hoja inferior ───────── */
.g-banner {
    position: absolute; top: 12px; left: 12px; z-index: 6; display: none; width: min(440px, calc(100% - 24px));
    background: var(--g-verde-nav); color: #fff; border-radius: 12px; box-shadow: var(--g-sombra-alta); font-family: var(--g-f); overflow: hidden;
}
body.navegando .g-banner { display: block; }
.g-banner .prin { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 14px 16px; }
.g-banner .prin svg { width: 60px; height: 60px; }
.g-banner .dist { font: 500 30px/1.1 var(--g-f); }
.g-banner .txt { font: 400 18px/1.25 var(--g-f); margin-top: 2px; }
.g-banner .luego { display: none; align-items: center; gap: 10px; padding: 8px 16px; background: #0b6130; font-size: 15px; }
.g-banner .luego.visible { display: flex; }
.g-banner .luego svg { width: 22px; height: 22px; }
.g-banner.emergencia { background: #a50e0e; } .g-banner.emergencia .luego { background: #7d0b0b; }

.g-hoja {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 6; display: none; width: min(760px, calc(100% - 24px));
    background: #fff; color: var(--g-texto); border-radius: 16px; box-shadow: var(--g-sombra-alta); font-family: var(--g-f); padding: 12px 16px 14px;
    box-sizing: border-box;
}
body.navegando .g-hoja { display: block; }
.g-hoja .fila1 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.g-hoja .salir { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--g-borde); display: grid; place-items: center; color: var(--g-rojo); }
.g-hoja .salir svg { width: 22px; height: 22px; }
.g-hoja .salir:focus-visible { outline: 2px solid var(--g-azul); }
.g-hoja .eta b { font: 500 24px var(--g-f); color: var(--g-verde); }
.g-hoja .eta b.mal { color: var(--g-rojo); }
.g-hoja .eta span { display: block; color: var(--g-texto-2); font-size: 14px; }
.g-hoja .reproductor { display: flex; gap: 6px; align-items: center; }
.g-hoja .barra-progreso { height: 6px; background: var(--g-fondo-2); border-radius: 3px; margin: 12px 0 10px; position: relative; cursor: pointer; }
.g-hoja .barra-progreso i { position: absolute; inset: 0 auto 0 0; background: var(--g-azul); border-radius: 3px; }
.g-hoja .indic { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--g-texto-2); }
.g-hoja .indic b { color: var(--g-texto); font-weight: 500; }
.g-hoja .indic .mal b { color: var(--g-rojo); }
.g-hoja .imprevistos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.g-hoja .imprevistos span { color: var(--g-texto-2); font-size: 13px; margin-right: 4px; }

.g-aviso {
    position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 8; display: none; max-width: 520px;
    background: #323232; color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: var(--g-sombra-alta); font: 14px/1.45 var(--g-f);
}
.g-aviso.visible { display: block; }
.g-aviso.critico { background: #a50e0e; }
.g-aviso strong { font-weight: 500; display: block; }
.g-aviso button { all: unset; cursor: pointer; color: #8ab4f8; font-weight: 500; margin-top: 6px; display: inline-block; }
body.navegando .g-aviso { top: auto; bottom: 200px; }

/* ───────── Marcadores ───────── */
.g-m-base { width: 34px; height: 34px; border-radius: 50%; background: var(--g-azul); border: 2px solid #fff; display: grid; place-items: center; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: pointer; }
.g-m-base svg { width: 18px; height: 18px; }
.g-m-parada { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #3c4043; display: grid; place-items: center; font: 500 12px var(--g-f); color: #202124; box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: pointer; box-sizing: border-box; }
.g-m-parada.siguiente { border-color: var(--g-azul); color: var(--g-azul); animation: g-latido 1.6s ease-out infinite; }
@keyframes g-latido { 0% { box-shadow: 0 0 0 0 rgba(26,115,232,.55), 0 2px 6px rgba(0,0,0,.4); } 100% { box-shadow: 0 0 0 16px rgba(26,115,232,0), 0 2px 6px rgba(0,0,0,.4); } }
@media (prefers-reduced-motion: reduce) { .g-m-parada.siguiente { animation: none; box-shadow: 0 0 0 4px rgba(26,115,232,.4); } }
.g-m-parada.omitida { width: 14px; height: 14px; border-color: #9aa0a6; font-size: 0; opacity: .9; }
.g-m-inicio { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 5px solid #188038; box-shadow: 0 2px 6px rgba(0,0,0,.4); box-sizing: border-box; }
.g-m-fin { width: 34px; height: 40px; display: grid; place-items: start center; }
.g-m-fin .gota { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #d93025; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); display: grid; place-items: center; color: #fff; box-sizing: border-box; }
.g-m-fin .gota svg { width: 15px; height: 15px; transform: rotate(45deg); }
.g-m-chip { background: #fff; color: var(--g-texto); font: 500 12px var(--g-f); padding: 4px 10px 4px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.g-m-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.g-punto { width: 18px; height: 18px; border-radius: 50%; background: var(--g-ruta); border: 3px solid #fff; box-shadow: 0 0 0 10px rgba(66,133,244,.22), 0 1px 4px rgba(0,0,0,.4); box-sizing: border-box; }
.g-punto.emergencia { background: var(--g-rojo); box-shadow: 0 0 0 10px rgba(217,48,37,.22), 0 1px 4px rgba(0,0,0,.4); }
.g-flecha-nav { width: 52px; height: 52px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.maplibregl-popup.g-popup .maplibregl-popup-content { font: 13px/1.45 var(--g-f); color: var(--g-texto); border-radius: 10px; padding: 12px 14px; max-width: 290px; box-shadow: var(--g-sombra-alta); }
.g-popup h3 { margin: 0 0 4px; font: 500 16px var(--g-f); }
.g-popup p { margin: 4px 0; }
.g-popup .meta { color: var(--g-texto-2); }

@media (max-width: 760px) {
    .mw-modo button { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
    /* En Explorar, arriba están los paneles del mapa base: el selector baja sobre la escala */
    body:not(.modo-ruta) .mw-modo { top: auto; bottom: 64px; }
    .g-panel { width: auto; right: 10px; left: 10px; top: 58px; bottom: 46vh; }
    .g-controles { bottom: 20px; right: 10px; gap: 8px; }
    .g-redondo { width: 40px; height: 40px; }
    .g-capas-pop { right: 58px; bottom: 20px; width: min(300px, calc(100vw - 80px)); }
    .g-banner { left: 10px; width: calc(100% - 20px); }
    .g-banner .prin { grid-template-columns: 48px 1fr; padding: 10px 12px; }
    .g-banner .prin svg { width: 46px; height: 46px; }
    .g-banner .dist { font-size: 24px; }
    .g-banner .txt { font-size: 15px; }
    .g-hoja { width: calc(100% - 20px); padding: 10px 12px; }
    .g-hoja .fila1 { grid-template-columns: auto 1fr; gap: 10px; }
    .g-hoja .reproductor { grid-column: 1 / -1; }
    .g-hoja .imprevistos span { display: none; }
    body.navegando .g-controles { bottom: auto; top: 150px; }
    .g-aviso { max-width: calc(100% - 24px); }
}

/* ───────── Tu cuerpo en esta ruta ───────── */
.g-cuerpo-entrada .g-fila label small { display: block; font-size: 11.5px; }
.g-veredicto { margin: 10px 0 8px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; background: var(--g-fondo-2); }
.g-veredicto.ok { background: #e6f4ea; color: #0d652d; }
.g-veredicto.exigente { background: #fef7e0; color: #7a4f01; }
.g-veredicto.dura { background: #fce8e6; color: #a50e0e; }
.g-cuerpo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.g-cuerpo li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t tipo" "v v"; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--g-fondo-2); }
.g-cuerpo li .t { grid-area: t; color: var(--g-texto-2); font-size: 12.5px; }
.g-cuerpo li b { grid-area: v; font: 500 14px var(--g-f); }
.g-tipo { grid-area: tipo; font-size: 11px; padding: 1px 8px; border-radius: 999px; cursor: help; align-self: start; }
.g-tipo.medido, .g-tipo.umbral { background: #e8f0fe; color: var(--g-azul); }
.g-tipo.modelo { background: var(--g-fondo-2); color: var(--g-texto-2); }