/* Visor RASP.
   Los colores, tamaños y radios reproducen el visor generado por el cuaderno.
   Lo que cambia es la disposición: el mapa nunca encoge y los controles cuelgan
   del viewport, no del mapa. */

:root {
    --rv-ink: #22303c;
    --rv-mut: #6b7d8f;
    --rv-line: #d9e0e6;
    --rv-bar: rgba(51, 71, 91, .95);
    --rv-shadow: 0 6px 24px rgba(16, 32, 48, .22);
    --rv-tool: 44px;
    /* Ancho de la columna de detalle en escritorio. Lo comparten la propia
       columna y la barra inferior, que tiene que apartarse de ella. Hasta la
       mitad de la pantalla: el meteograma necesita sitio para sus 24 columnas,
       pero el mapa no puede quedarse en una rendija. */
    --rv-detail-w: clamp(420px, 50vw, 620px);
    /* Alto de la barra inferior; lo comparten el mapa y las hojas para no
       taparse entre ellos. */
    --rv-bar-h: 126px;
    /* El azul de lo seleccionado y el ámbar de «esto es ahora». Son dos ejes
       distintos y pueden coincidir en la misma fila, así que cada uno tiene su
       juego. Del ámbar hay dos tonos y no por gusto: el filete es una marca
       gráfica y le basta 3:1 (WCAG 2.2, 1.4.11), pero el texto necesita 4,5:1
       (1.4.3) y con #b87700 se queda en 3,70. */
    --rv-sel-fondo: #e7eef7;
    --rv-sel-line: #4a7fb5;
    --rv-hoy-ink: #8a5a00;
    --rv-hoy-filete: #b87700;
    --rv-hoy-fondo: #fdf1dc;
    --rv-hoy-line: #e6c187;
}

/* Texto que solo oye el lector de pantalla. Para lo que el visor dice con
   color y nada más: quien no distingue el ámbar del gris se queda sin el dato,
   y ponerlo a la vista cuesta píxeles que en algunas celdas no hay.

   Fuera del flujo —position: absolute— para que no mida ni empuje nada, y
   recortado en vez de escondido con display o visibility, que a esos dos los
   lectores de pantalla también los saltan. */
.rv-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 100dvh, no 100vh: en un móvil la barra del navegador se retrae y se despliega,
   y con vh los controles de abajo quedan fuera de alcance justo cuando el
   usuario intenta cambiar de hora. */
.rv-app {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--rv-ink);
    background: #f4f6f8;
    /* El recorte de pantallas con muesca lo absorbe la barra de tiempos, que
       es lo único acoplado al borde de abajo; un relleno aquí dejaría una
       franja del fondo asomando bajo ella. */
}

/* Aviso de error del marco. Va oculto y lo enseña Blazor poniéndole un
   display en línea cuando de verdad pasa algo.

   Tiene que estar aquí porque la regla que lo ocultaba venía de la hoja de
   MudBlazor, y el visor ya no la descarga —no usa ni un componente suyo—. Sin
   ella el cartel se quedaba clavado en el pie anunciando un error que no había
   ocurrido, que es peor que no avisar. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px 28px 11px 20px;
    background: #b3261e;
    color: #fff;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 12px;
    top: 8px;
    cursor: pointer;
}

/* ---------- mapa ---------- */

.rv-map {
    position: absolute;
    inset: 0;
    /* El mapa termina donde empieza la barra de tiempos: antes la barra
       flotaba encima y la franja inferior del dominio quedaba viva pero
       tapada. El alto real de la barra lo mide el módulo y lo deja en la
       variable; esta cifra es solo el arranque antes del primer cálculo. */
    bottom: var(--rv-bar-h);
    background: #dfe6ec;
}

/* Leaflet apila sus esquinas de controles a z-index 1000, por encima del detalle
   (950) y de la barra (960): el crédito del mapa se veía flotando sobre el
   sondeo. El zoom no se entera, porque vive fuera del mapa en su propio hueco. */
.rv-map .leaflet-top,
.rv-map .leaflet-bottom {
    z-index: 600;
}

/* La escala vive ahora abajo, sobre el canto de la barra; se levanta lo que
   mide la línea de créditos para no escribirse encima de ella. */
.rv-map .leaflet-bottom.leaflet-left {
    bottom: 18px;
}

/* Tarjeta de la altura del viento, centrada arriba sobre el mapa. Ocupa el
   sitio del antiguo aviso de «pulsa un punto», que solo servía la primera vez. */
/* El chip de producto y viento, centrado arriba sobre el mapa: el producto en
   el renglón principal y la altura del viento como subtítulo. El hueco entre
   los botones fijos de las dos esquinas es todo para el nombre del producto;
   si aun así no cabe, se recorta él, no el chip. */
.rv-chip {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    max-width: calc(100% - 148px);
    padding: 5px 14px 6px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--rv-line);
    border-radius: 14px;
    box-shadow: var(--rv-shadow);
    font: inherit;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-chip-linea {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    font-weight: 600;
    white-space: nowrap;
}

.rv-chip-ic {
    font-size: 15px;
}

/* El nombre del producto cede con puntos suspensivos antes que agrandar el chip. */
.rv-product-chip-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* El subtítulo del viento: más pequeño y sin peso, que es contexto del
   producto, no el protagonista. Pulsarlo abre el diálogo por su pestaña. */
.rv-chip-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--rv-mut);
    white-space: nowrap;
}

.rv-wind-chip-ic {
    color: #1b7f3b;
    font-size: 12px;
}

.rv-chip-sub.rv-off {
    color: var(--rv-mut);
    font-weight: 400;
}

.rv-chip-sub.rv-off .rv-wind-chip-ic {
    color: var(--rv-mut);
}

/* El relieve multiplica el color del producto en lugar de superponer gris: las
   laderas se oscurecen y el mapa conserva su escala cromática intacta. */
.rv-hillshade-pane {
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ---------- capas de referencia (capas-referencia.js) ----------
   Líneas, fondo y nombres se pintan en lienzos; aquí solo el de los nombres
   y las casillas de la tarjeta de capas. */
.rv-ref-nombres {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.rv-ref-casillas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    padding: 4px 0;
}

.rv-ref-casillas label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.rv-tip {
    position: absolute;
    z-index: 1200;
    display: none;
    pointer-events: none;
    background: #12181fee;
    color: #fff;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 3px 12px #0006;
    max-width: 270px;
}

.rv-tip b {
    color: #8fc8ff;
}

.rv-tip .s {
    color: #9fb0c0;
    font-size: 11px;
}

/* Marcador del punto consultado: cruz completa sobre el área del diagrama, para
   poder relacionar el dato con su hora y su altura de un vistazo. */
.rv-pick {
    position: absolute;
    z-index: 1150;
    pointer-events: none;
}

.rv-pick[hidden] {
    display: none;
}

.rv-pick-v,
.rv-pick-h {
    position: absolute;
    background: rgba(11, 107, 203, .55);
}

.rv-pick-v {
    left: 0;
    width: 1px;
}

.rv-pick-h {
    top: 0;
    height: 1px;
}

.rv-pick-d {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0b6bcb;
    box-shadow: 0 0 0 2px #fff;
}

/* Nivel de la cruz en la franja de viento del sondeo: perfil y hodógrafa. */
.rv-pick-viento {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1150;
    pointer-events: none;
}

.rv-pick-viento[hidden],
.rv-pick-viento span[hidden] {
    display: none;
}

.rv-pick-viento span {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid #0b6bcb;
    background: rgba(255, 255, 255, .6);
}


/* Globo del diagrama: ancho fijo y filas fijas. Con el contenido variable
   cambiaba de tamaño al recorrer el gráfico y bailaba tanto que no se podía
   leer. */
#rv-chart-tip,
.rv-cmp-tip {
    box-sizing: border-box;
    width: 214px;
    max-width: 214px;
    padding: 6px 9px;
    /* Se puede pulsar y arrastrar: su aspa la cierra y el resto la mueve. */
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

#rv-chart-tip.rv-tip-dragging {
    cursor: grabbing;
}

.rv-tip-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border: 0;
    background: none;
    color: #cfe0f0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.rv-tip-h {
    color: #8fc8ff;
    font-weight: 600;
    padding-bottom: 3px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    /* Con ancho fijo, un rótulo largo partía la caja: se sale del globo si no
       se deja partir. El aspa ocupa la esquina, de ahí el margen. */
    white-space: normal;
    overflow-wrap: anywhere;
    padding-right: 22px;
}

.rv-tip-t {
    width: 100%;
    border-collapse: collapse;
    line-height: 1.35;
}

.rv-tip-t td {
    padding: 0;
    white-space: nowrap;
    vertical-align: top;
}

/* El nombre de la fila no se parte (con «anywhere» la tabla lo estrujaba a
   una letra por línea en cuanto un valor era largo); lo que parte, por los
   espacios, es el valor. */
.rv-tip-t td:first-child {
    color: #9fb0c0;
    white-space: nowrap;
    padding-right: 8px;
}

.rv-tip-t td:last-child {
    white-space: normal;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* El navegador no suaviza nunca, ni con «Interpolar» puesto: la interpolación
   la hace el propio ráster sobre el valor y antes de escalonarlo, mientras que
   dejársela aquí difuminaría los colores ya puestos y se comería los saltos de
   la escala, que es justo lo que se quiere ver. */
.rasp-raster {
    image-rendering: pixelated;
}

/* Zoom y «mi posición» a media altura del borde izquierdo: la derecha es de la
   columna de herramientas, que en móvil llegaba hasta aquí y se les montaba
   encima. El z-index queda por debajo de la barra (900), el detalle (950) y
   las hojas (1000): cuando una tarjeta se abre debe taparlos, no competir. */
.rv-zoom-slot {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 700;
}

/* «Mi posición», debajo del zoom y con un hueco que dice que no es zoom. */
.rv-locate {
    display: block;
    width: var(--rv-tool);
    height: var(--rv-tool);
    margin-top: 10px;
    border: 1px solid var(--rv-line);
    border-radius: 10px;
    background: #fff;
    color: var(--rv-ink);
    font-size: 19px;
    box-shadow: var(--rv-shadow);
    cursor: pointer;
}

.rv-locate.rv-busy {
    color: var(--rv-mut);
}

.rv-zoom-slot .leaflet-control-zoom {
    margin: 0;
    border: 0;
    box-shadow: none;
    /* Los controles de Leaflet flotan de serie; aquí conviven en columna con
       el botón de posición y el flotado los montaba uno sobre otro. */
    float: none;
}

.rv-zoom-slot .leaflet-control-zoom a {
    width: var(--rv-tool);
    height: var(--rv-tool);
    line-height: var(--rv-tool);
    font-size: 20px;
    color: var(--rv-ink);
    background: #fff;
    border: 1px solid var(--rv-line);
    box-shadow: var(--rv-shadow);
}

.rv-zoom-slot .leaflet-control-zoom a:first-child {
    border-radius: 10px 10px 0 0;
}

.rv-zoom-slot .leaflet-control-zoom a:last-child {
    border-radius: 0 0 10px 10px;
    border-top: 0;
}


/* ---------- botones flotantes ---------- */

.rv-tools {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 800;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Detalle, suelto en la esquina superior izquierda: la misma esquina por la
   que entra su columna en escritorio, así el botón se convierte en el panel.
   Mientras el panel está abierto no existe —lo taparía en escritorio y la
   hoja lo cubre en móvil, y el cierre ya lo trae el propio panel—. */
.rv-tool-detalle {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 800;
}

.rv-app.rv-detail-open .rv-tool-detalle {
    display: none;
}

/* En escritorio no hay nada plegado: el grupo no forma caja y sus botones son
   hijos de la columna, exactamente como antes de que existiera. */
.rv-tools-mas {
    display: contents;
}

/* Icono arriba y palabra debajo. Un poco más anchos que los 44 px de base:
   la palabra necesita sitio y es la que hace el botón comprensible. */
.rv-tool {
    width: 54px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--rv-ink);
    background: #fff;
    border: 1px solid var(--rv-line);
    border-radius: 10px;
    box-shadow: var(--rv-shadow);
    cursor: pointer;
    font: inherit;
    padding: 0;
}

/* Va después de .rv-tool y no antes: las dos reglas pesan lo mismo y decide el
   orden, así que puesta arriba la ganaba el display:flex de .rv-tool y el botón
   de menú se colaba también en escritorio, donde no hay nada que desplegar. */
.rv-tool-menu {
    display: none;
}

.rv-tool-ic {
    font-size: 16px;
    line-height: 1;
}

/* Compartir: los tres nodos unidos, que es el dibujo que se reconoce como
   compartir en cualquier sistema. La flecha que había (⤴) no lo es en ninguno.
   Es el mismo icono que ya lleva el botón «Más» de la hoja de compartir.

   Va de máscara y no de imagen para que tome el color de quien lo lleva: en la
   columna de herramientas es tinta, y en la cabecera de la modal, gris. Y mide
   1em, así que crece con el tamaño de letra del botón. */
.rv-ic-share {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* El icono se centra en el botón, que hasta ahora llevaba texto. */
#rv-sites-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* El glifo de la lupa (⌕) es minúsculo a 16 px; se sube solo aquí para que
   pese lo mismo que los demás iconos. Los puntos del menú (⋯), lo mismo. */
#rv-btn-search .rv-tool-ic,
#rv-btn-menu .rv-tool-ic {
    font-size: 24px;
    margin: -4px 0 -3px;
}

/* Desplegado se marca como cualquier otro botón activo: si no, no hay forma de
   saber que la lista de abajo cuelga de él. */
.rv-tools.abierto .rv-tool-menu {
    background: var(--rv-bar);
    color: #fff;
}

.rv-tools.abierto .rv-tool-menu .rv-tool-lb {
    color: #d7e3ee;
}

.rv-tool-lb {
    font-size: 9px;
    line-height: 1;
    color: var(--rv-mut);
}

.rv-tool[aria-pressed="true"] .rv-tool-lb {
    color: #d7e3ee;
}

/* La guía es un enlace con aspecto de botón: sin subrayado y con la misma caja.
   La interrogación, algo más gruesa, para que pese como los demás iconos. */
a.rv-tool {
    box-sizing: border-box;
    text-decoration: none;
}

.rv-tool-guia .rv-tool-ic {
    font-size: 18px;
    font-weight: 700;
}


.rv-tool[aria-pressed="true"] {
    background: var(--rv-bar);
    color: #fff;
}

/* ---------- barra inferior: leyenda y horas ----------
   Anclada a la aplicación, nunca al mapa: al abrir el detalle no se mueve. */

/* Por encima del detalle (950): aunque este ocupe la pantalla entera, la hora
   se sigue pudiendo cambiar sin cerrarlo, que es justo lo que se quiere hacer
   mientras se mira un meteograma. El cuerpo del detalle ya reserva su alto. */
/* Acoplada al borde, a sangre: no es una isla flotando sobre el mapa sino el
   remate de la aplicación, y el mapa termina en su canto superior. Flotando
   tapaba la franja inferior del dominio —flechas y despegues vivos pero
   invisibles— y en móvil sus márgenes solo desperdiciaban pantalla. */
.rv-timebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    background: var(--rv-bar);
    color: #fff;
    box-shadow: 0 -2px 10px rgba(16, 32, 48, .18);
    /* La muesca del teléfono se absorbe aquí, que es lo único pegado al borde. */
    padding: 6px 8px calc(4px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Título del producto a la izquierda y run a la derecha, un solo renglón. */
.rv-bar-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 16px;
}

.rv-legend-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: none;
    border: 0;
    color: #fff;
    padding: 0 0 0 8px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* El título no cede: cualquier reparto flex le afeitaba fracciones de
       píxel y ya asomaban los puntos suspensivos. El recorte es todo para el
       rótulo del run; el tope solo protege de un nombre de producto larguísimo
       en una pantalla estrecha. */
    min-width: 0;
    flex: none;
    max-width: 62%;
}

.rv-legend-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-legend-unit {
    color: #c6d3df;
    font-size: 11px;
    flex: none;
}

/* 24 px justos: rampa de 11, marca de 3 y rótulo de 10. El lienzo dibuja esas
   alturas fijas desde arriba, así que el margen estaba abajo, vacío. */
.rv-legend-canvas {
    width: calc(100% - 16px);
    height: 24px;
    margin: 0 8px;
    display: block;
}

.rv-timerow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.rv-tnav {
    display: flex;
    align-items: center;
    /* 3 px y no 4: con el botón de reproducción son seis controles y en un
       móvil de 360 px cada píxel de hueco cuenta. */
    gap: 3px;
}

.rv-tnav button {
    min-width: 42px;
    height: 40px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}

.rv-tnav button:active {
    background: rgba(255, 255, 255, .25);
}

.rv-tnav .rv-now {
    min-width: 112px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Aire a los lados: con la zona horaria el texto llegaba a rozar el borde
       del botón. */
    padding: 0 12px;
}

.rv-caret {
    font-size: 10px;
    color: #c6d3df;
}

/* Reproduciendo se marca igual que un botón activo de la barra. */
.rv-play.on {
    background: rgba(255, 255, 255, .3);
}

/* «Ahora» en la cabecera del selector de hora. */
.rv-time-now {
    min-height: 36px;
    padding: 0 14px;
    margin-left: auto;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 600;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-runinfo {
    color: #b9c7d4;
    font-size: 11px;
    padding: 0 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* A la derecha del renglón del título, cediendo antes que él: su parte
       importante —la fecha del run— va delante y sobrevive al recorte. */
    margin-left: auto;
    min-width: 0;
    flex: 0 12 auto;
}

/* ---------- hojas (producto, capas) ---------- */

.rv-sheet {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(var(--rv-bar-h) + 8px);
    z-index: 1000;
    max-height: min(60dvh, 460px);
    /* El selector de producto usa toda la altura disponible: son 37 productos
       en seis categorías y con media pantalla obliga a desplazarse dentro de una
       lista que ya está plegada. */
    background: #fff;
    border: 1px solid var(--rv-line);
    border-radius: 12px;
    box-shadow: var(--rv-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rv-sheet[hidden] {
    display: none;
}

.rv-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rv-line);
    font-weight: 600;
}

.rv-sheet-sub {
    color: var(--rv-mut);
    font-size: 11px;
    font-weight: 400;
}

.rv-sheet-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    font-size: 16px;
    color: var(--rv-mut);
    cursor: pointer;
}

.rv-sheet-body,
.rv-sheet-search {
    padding: 10px 12px;
}

.rv-sheet-search input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    font: inherit;
    /* 16px o más: por debajo, Safari en iOS hace zoom al enfocar el campo y
       descoloca todo el visor. */
    font-size: 16px;
}

/* Alto completo: arranca bajo la barra superior segura y llega hasta la barra
   de tiempo, sin el tope de 60dvh del resto de hojas. */
.rv-product-sheet {
    top: calc(8px + env(safe-area-inset-top));
    max-height: none;
}

.rv-product-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 6px 8px;
}

/* ---------- categorías del selector de producto ---------- */

.rv-cat {
    border-bottom: 1px solid var(--rv-line);
}

.rv-cat[hidden] {
    display: none;
}

.rv-cat-head {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: var(--rv-ink);
    text-align: left;
    cursor: pointer;
}

.rv-cat-ic {
    width: 20px;
    text-align: center;
    color: var(--rv-mut);
}

.rv-cat-count {
    margin-left: auto;
    color: var(--rv-mut);
    font-weight: 400;
    font-size: 11px;
}

.rv-cat-arw {
    color: var(--rv-mut);
    font-size: 10px;
    transition: transform .15s;
}

.rv-cat.on .rv-cat-arw {
    transform: rotate(90deg);
}

/* Plegada por defecto: con 37 productos, la lista abierta entera obliga a
   desplazarse mucho para encontrar nada. */
.rv-cat-items {
    display: none;
    padding-bottom: 6px;
}

.rv-cat.on .rv-cat-items {
    display: block;
}

.rv-fav {
    width: 26px;
    flex: none;
    text-align: center;
    color: #d3dae1;
    font-size: 14px;
}

.rv-fav.on {
    color: #f0b429;
}

.rv-product {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-radius: 8px;
    font: inherit;
    text-align: left;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-product:active {
    background: #eef2f6;
}

.rv-product[aria-selected="true"] {
    background: var(--rv-sel-fondo);
    font-weight: 600;
}

.rv-product[hidden] {
    display: none;
}

.rv-product-meta {
    color: var(--rv-mut);
    font-size: 11px;
    flex: none;
}

.rv-product-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* La traducción del producto a lenguaje llano, debajo del nombre. */
.rv-product-desc {
    color: var(--rv-mut);
    font-size: 11px;
    line-height: 1.3;
}

/* ---------- tarjeta de altura del viento ---------- */

/* Referencia como par de botones segmentados: son dos valores y un desplegable
   para dos opciones es un clic de más. */
.rv-wtabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    overflow: hidden;
}

.rv-wtabs button {
    min-width: 62px;
    min-height: 38px;
    border: 0;
    border-left: 1px solid var(--rv-line);
    background: #fff;
    font: inherit;
    font-weight: 600;
    color: var(--rv-mut);
    cursor: pointer;
}

.rv-wtabs button:first-child {
    border-left: 0;
}

.rv-wtabs button.on {
    background: var(--rv-bar);
    border-color: var(--rv-bar);
    color: #fff;
    font-weight: 600;
}

/* Las pestañas del diálogo del chip: el mismo control segmentado que AGL/ASL,
   con clase propia porque aquel lleva un manejador enganchado a su clase. Los
   botones son algo más anchos: aquí hacen de título de la hoja. */
.rv-sheet-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    overflow: hidden;
}

.rv-sheet-tabs button {
    min-width: 96px;
    min-height: 34px;
    border: 0;
    border-left: 1px solid var(--rv-line);
    background: #fff;
    font: inherit;
    font-weight: 600;
    color: var(--rv-mut);
    cursor: pointer;
}

.rv-sheet-tabs button:first-child {
    border-left: 0;
}

.rv-sheet-tabs button.on {
    background: var(--rv-bar);
    border-color: var(--rv-bar);
    color: #fff;
}

.rv-wind-card .rv-note {
    padding-top: 4px;
}

/* ---------- tarjeta «Mapa» ----------
   Fondo, referencias, relieve, producto, viento y despegues en una sola hoja,
   con secciones plegables. El cuerpo se desplaza por dentro, con la cabecera
   y su cierre siempre a la vista. */
.rv-map-sheet .rv-sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding-top: 2px;
}

.rv-map-sec {
    border-bottom: 1px solid var(--rv-line);
    padding-bottom: 6px;
}

.rv-map-sec:last-child {
    border-bottom: 0;
}

.rv-map-sec > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
}

.rv-map-sec > summary::-webkit-details-marker {
    display: none;
}

.rv-map-sec > summary::after {
    content: '▾';
    color: var(--rv-mut);
    font-size: 12px;
    transition: transform .15s ease;
}

.rv-map-sec:not([open]) > summary::after {
    transform: rotate(-90deg);
}

.rv-map-sec > .rv-note {
    margin-top: 6px;
}

/* ---------- representación del viento (dentro de «Mapa») ---------- */

.rv-wstyles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rv-wstyles button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 10px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: #fff;
    color: var(--rv-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rv-wstyles button:hover {
    background: var(--rv-sel-fondo);
}

.rv-wstyles button.on {
    background: var(--rv-sel-fondo);
    border-color: var(--rv-sel-line);
    box-shadow: inset 3px 0 0 var(--rv-sel-line);
}

.rv-wstyle-ic {
    flex: 0 0 34px;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    color: var(--rv-sel-line);
}

.rv-wstyle-ic small {
    font-size: 10px;
    font-weight: 600;
    color: var(--rv-ink);
    margin-left: 1px;
}

.rv-wstyle-tx {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rv-wstyle-tx small {
    color: var(--rv-mut);
    font-size: 11px;
}

#rv-btn-map .rv-tool-ic {
    font-size: 18px;
}

/* ---------- selector de día y hora ---------- */

.rv-time-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 8px;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

.rv-time-col {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rv-time-head {
    position: sticky;
    top: 0;
    background: #fff;
    color: var(--rv-mut);
    font-size: 11px;
    padding: 2px 4px 4px;
}

.rv-time-col button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-time-col button.on {
    background: var(--rv-bar);
    border-color: var(--rv-bar);
    color: #fff;
    font-weight: 600;
}

.rv-time-col .sub {
    color: var(--rv-mut);
    font-size: 11px;
}

.rv-time-col button.on .sub {
    color: #c6d3df;
}

.rv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

.rv-row input[type="range"] {
    width: 55%;
}

.rv-select {
    height: 40px;
    min-width: 130px;
    padding: 0 8px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 16px;
}

.rv-hr {
    border: 0;
    border-top: 1px solid var(--rv-line);
    margin: 8px 0;
}

.rv-note {
    color: var(--rv-mut);
    font-size: 11px;
    margin: 4px 0 0;
}

/* Explicaciones plegadas tras un «¿por qué?»: los controles quedan a la vista
   y la pedagogía a un toque. */
.rv-why {
    margin: 2px 0 4px;
}

.rv-why summary {
    color: #0b6bcb;
    font-size: 11px;
    cursor: pointer;
    min-height: 28px;
    display: flex;
    align-items: center;
}

/* Leyenda de los despegues en los colores reales del mapa. */
.rv-site-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11px;
    color: var(--rv-ink);
    margin-top: 2px;
}

.rv-site-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rv-site-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* ---------- compartir ---------- */

/* Modal centrado y bloqueante: el fondo cubre el visor entero y se traga los
   toques; por encima de todo lo demás, incluida la burbuja del diagrama. */
.rv-modal {
    position: absolute;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rv-modal[hidden] {
    display: none;
}

.rv-modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 48, .45);
}

.rv-share-card {
    position: relative;
    width: min(380px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(16, 32, 48, .35);
    overflow: hidden;
    animation: rv-modal-in .16s ease-out;
}

@keyframes rv-modal-in {
    from { transform: translateY(10px) scale(.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rv-share-card { animation: none; }
}

/* Vista previa de lo que se manda: título, hora y el enlace recortado. */
.rv-share-prev {
    background: #f2f5f8;
    border: 1px solid var(--rv-line);
    border-radius: 10px;
    padding: 10px 12px;
}

.rv-share-prev-t {
    font-weight: 600;
}

.rv-share-prev-s {
    color: var(--rv-mut);
    font-size: 12px;
    margin-top: 1px;
}

.rv-share-prev-url {
    color: #0b6bcb;
    font-size: 11px;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rejilla de destinos, como una hoja de compartir nativa: círculo de marca y
   palabra debajo. */
.rv-share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 4px;
    margin-top: 14px;
}

.rv-share-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 4px 0;
    font: inherit;
    font-size: 11px;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-share-opt[hidden] {
    display: none;
}

.rv-share-ic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(16, 32, 48, .25);
}

.rv-share-ic svg {
    width: 24px;
    height: 24px;
}

.rv-share-opt:active .rv-share-ic {
    transform: scale(.94);
}

.rv-share-ic-neutral {
    background: #5f6b76;
}

/* ---------- buscador de lugares ---------- */

/* A la izquierda de la columna de botones, a la altura del suyo. */
.rv-search {
    position: absolute;
    top: 10px;
    right: 72px;
    z-index: 900;
    width: min(320px, calc(100vw - 92px));
    background: #fff;
    border: 1px solid var(--rv-line);
    border-radius: 10px;
    box-shadow: var(--rv-shadow);
    overflow: hidden;
}

.rv-search[hidden] {
    display: none;
}

.rv-search input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 0;
    font: inherit;
    /* 16px o más: por debajo, Safari en iOS hace zoom al enfocar. */
    font-size: 16px;
    outline: none;
}

.rv-search-list:not(:empty) {
    border-top: 1px solid var(--rv-line);
    max-height: min(46dvh, 330px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.rv-search-item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-search-item:hover,
.rv-search-item:focus {
    background: #eef2f6;
}

.rv-search-item .sub {
    display: block;
    color: var(--rv-mut);
    font-size: 11px;
}

.rv-search-empty {
    padding: 10px 12px;
    color: var(--rv-mut);
    font-size: 12px;
}

/* ---------- previsión simple ---------- */

.rv-prev[hidden] {
    display: none;
}

.rv-prev {
    padding: 4px 8px 8px;
}

.rv-prev-dia {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    padding: 6px 4px 4px;
    font-weight: 600;
    color: var(--rv-mut);
    font-size: 12px;
    text-transform: capitalize;
    border-bottom: 1px solid var(--rv-line);
}

/* El día de hoy y la hora de ahora van en ámbar, y la hora que se está mirando
   en el azul de siempre. Son dos cosas distintas —una sitúa, la otra manda— y
   pueden coincidir, así que ocupan ejes que no se pisan: el ámbar vive en el
   texto y en un filete a la izquierda; el azul, en el fondo de la tarjeta. */
.rv-prev-dia.hoy {
    color: var(--rv-hoy-ink);
    border-bottom-color: var(--rv-hoy-line);
    box-shadow: inset 3px 0 0 var(--rv-hoy-filete);
}

/* Solo la del día. La hora no lleva píldora: su columna mide 52 px fijos y
   ésta pedía 88, así que se salía de la celda y tapaba el icono del cielo. */
.rv-prev-hoy {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--rv-hoy-fondo);
    color: var(--rv-hoy-ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* Tarjeta de una hora. Solo lectura: sin cursor de botón ni estados. */
.rv-prev-card {
    display: grid;
    grid-template-columns: 52px 34px 48px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 2px 6px;
    border-bottom: 1px solid #eef2f6;
}

/* La hora que se está mirando. Es la marca fuerte de la lista: la misma familia
   de azul con la que el visor señala lo seleccionado en todas partes. */
.rv-prev-card.on {
    background: var(--rv-sel-fondo);
    border-radius: 8px;
    border-bottom-color: transparent;
    outline: 1px solid var(--rv-sel-line);
}

/* Este momento. Solo sitúa, así que no toca el fondo —que es del azul— y se
   queda en un filete a la izquierda. Cuando las dos coinciden se ven las dos. */
.rv-prev-card.ahora {
    box-shadow: inset 3px 0 0 var(--rv-hoy-filete);
    border-radius: 8px;
}

.rv-prev-card.ahora .rv-prev-hora {
    color: var(--rv-hoy-ink);
}

.rv-prev-hora {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.rv-prev-ic {
    font-size: 20px;
    text-align: center;
}

.rv-prev-temp {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

.rv-prev-lluvia {
    color: var(--rv-mut);
    font-size: 12px;
}

.rv-prev-viento {
    color: var(--rv-mut);
    font-size: 12px;
    text-align: right;
}

/* ---------- modal de condiciones por despegue ---------- */

/* Pantalla completa: no es un diálogo sino una vista. */
/* A pantalla completa, sin marco ni esquinas: esto es una tabla larga, y cada
   píxel que se le quita por los bordes o por la cabecera es una fila menos a la
   vista. El hueco de arriba es el de la barra de estado del teléfono. */
#rv-sites-modal {
    padding: 0;
}

.rv-sites-panel {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f4f6f8;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Cabecera de un renglón: título y los tres botones. El título no parte nunca en
   dos —en un teléfono se llevaba dos alturas de línea— y si no cabe, se recorta. */
.rv-sites-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 4px;
    flex: none;
}

.rv-sites-head h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-sites-head .rv-sheet-close {
    width: 36px;
    height: 36px;
    flex: none;
}

/* Vive dentro del desplegable del botón (i) de la cabecera: en columna, que hay
   sitio de sobra a lo alto y cada entrada se lee de una pasada. */
.rv-sites-leyenda {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    color: var(--rv-ink);
    flex: none;
}

.rv-sites-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Las muestras son cuadros y no puntos: lo que explican es la parrilla, y por eso
   miden lo que un cuadro de la parrilla en un teléfono. */
.rv-sites-leyenda i {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

/* Las del cielo, cuadros cualesquiera con su dibujo: el color de debajo no
   significa nada ahí, solo hace de cuadro. Va como `background-color` porque el
   atajo `background` borraría el dibujo. */
.rv-sites-leyenda i.rv-sites-nublado,
.rv-sites-leyenda i.rv-sites-mojado {
    background-color: #cfd8dc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72% 72%;
}

/* Chips de día: uno por día del run, el elegido en oscuro. */
.rv-sites-dias {
    display: flex;
    gap: 6px;
    padding: 2px 10px 6px;
    overflow-x: auto;
    flex: none;
}

.rv-sites-dias button {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--rv-line);
    border-radius: 18px;
    background: #fff;
    font: inherit;
    color: var(--rv-ink);
    cursor: pointer;
    white-space: nowrap;
    text-transform: capitalize;
}

.rv-sites-dias button.on {
    background: var(--rv-bar);
    border-color: var(--rv-bar);
    color: #fff;
    font-weight: 600;
}

.rv-sites-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rv-sites-vacio {
    color: var(--rv-mut);
    padding: 20px 4px;
}

.rv-sites-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(16, 32, 48, .10);
    padding: 10px 12px;
    cursor: pointer;
}

.rv-sites-card.on {
    outline: 1.5px solid #2a6f77;
}

.rv-sites-fila {
    display: grid;
    grid-template-columns: 14px minmax(120px, 1.3fr) minmax(90px, 1fr) minmax(110px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.rv-sites-punto {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.rv-sites-nombre b {
    display: block;
}

.rv-sites-nombre small,
.rv-sites-viento small,
.rv-sites-termica small {
    display: block;
    color: var(--rv-mut);
    font-size: 11px;
}

.rv-sites-viento b,
.rv-sites-termica b {
    font-size: 15px;
}

/* La franja horaria: un cuadrado por hora, de 7 a 22. */
.rv-sites-franja {
    text-align: right;
}

.rv-sites-cuadros {
    display: inline-flex;
    gap: 2px;
}

/* El cuadro, y el sitio donde se dibuja el cielo que lleva dentro.

   El dibujo ocupa el 72% del cuadro, en proporción y no en píxeles: así crece con
   él y siempre queda color a la vista por los cuatro lados —el color es el juicio
   del viento y tiene que seguir leyéndose—.

   `display` explícito porque estos <i> son elementos en línea: sin blocar, el
   ancho y el alto no les valdrían de nada. */
.rv-sites-cuadros i {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72% 72%;
}

/* En un teléfono la fila se reparte el ancho de su columna en vez de llevar una
   medida fija: quince cuadros de veinticuatro no caben, y dejarlos fijos y más
   pequeños abría un hueco a la derecha que rompía el borde de la tarjeta. Ahora
   acaban donde acaba todo lo demás.
   El tope los deja crecer solo hasta la medida de escritorio: un día con dos
   horas —el del arranque del run— no tiene por qué salir con dos cuadros
   enormes. */
@media (max-width: 720px) {
    .rv-sites-cuadros {
        display: flex;
    }

    .rv-sites-cuadros i {
        flex: 1 1 0;
        width: auto;
        max-width: 24px;
        height: auto;
        aspect-ratio: 1;
    }
}

/* El cielo de esa hora, dentro del cuadro: nube si está tapado, nube lloviendo
   si además cae agua. Nunca los dos —llover es estar nublado y algo más—, y por
   eso el nublado se retira cuando llueve en vez de fiarlo al orden de las reglas.
   El resto del cuadro sigue siendo el juicio del viento.

   Dibujadas aquí y no puestas de emoji: los colores de un emoji los decide el
   sistema y son claros —la nube es casi blanca—, así que sobre estos pasteles no
   se veían. En pizarra hay contraste sobre los cuatro fondos, sale igual en
   cualquier aparato y el dibujo cae centrado sin depender de las métricas de una
   tipografía.

   Las dos siluetas no se confunden ni a doce píxeles: la nube es ancha y chata,
   la gota estrecha y de punta. */
.rv-sites-cuadros i.nublado:not(.mojado),
.rv-sites-leyenda i.rv-sites-nublado {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%2337474f'%3E%3Ccircle cx='9.5' cy='11' r='5'/%3E%3Ccircle cx='16' cy='12.5' r='4'/%3E%3Crect x='5' y='12' width='14' height='5' rx='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

.rv-sites-cuadros i.mojado,
.rv-sites-leyenda i.rv-sites-mojado {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2337474f' d='M12 3C12 3 5.6 11.2 5.6 14.8a6.4 6.4 0 0 0 12.8 0C18.4 11.2 12 3 12 3z'/%3E%3C/svg%3E");
}

.rv-sites-franja small {
    display: block;
    color: var(--rv-mut);
    font-size: 11px;
    margin-top: 2px;
}

/* Las horas del despegue desplegado.

   En escritorio, una rejilla de siete columnas que se alinean entre filas: una
   tabla, en la práctica. En un teléfono, dos renglones por hora —lo que decide
   arriba, lo que acompaña debajo— y ni un píxel de desplazamiento lateral, que
   es lo que había antes y no lo encuentra nadie dentro de una lista que ya se
   recorre a lo largo.

   El marcado es el mismo para los dos: los envoltorios de cada hora y de cada
   renglón desaparecen aquí con `display: contents`, y sus hijos pasan a ser
   celdas de la rejilla grande, que es lo que las alinea entre filas. La raya
   separadora va en las celdas y no en la fila, porque la fila ya no pinta nada;
   por eso el hueco entre columnas es relleno de la celda y no `column-gap`: así
   la raya sale de un tirón. */
.rv-horas {
    display: grid;
    grid-template-columns: repeat(7, auto);
    justify-content: start;
    align-items: center;
    margin-top: 10px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.rv-hora,
.rv-hora-l1,
.rv-hora-l2 {
    display: contents;
}

/* Solo las celdas, no los `span` que puedan llevar dentro. */
.rv-hora-l1 > span,
.rv-hora-l2 > span {
    padding: 4px 16px 4px 0;
    border-top: 1px solid #eef2f6;
}

.rv-hora-cab span {
    border-top: 0;
    color: var(--rv-mut);
}

/* El nombre del dato lo dice la cabecera de la rejilla; repetido en cada celda
   sería una columna de palabras iguales. */
.rv-hora-lb {
    display: none;
}

@media (max-width: 720px) {
    .rv-horas {
        display: block;
    }

    .rv-hora {
        display: block;
        padding: 6px 2px;
        border-top: 1px solid #eef2f6;
    }

    .rv-hora-cab {
        display: none;
    }

    .rv-hora-l1 > span,
    .rv-hora-l2 > span {
        padding: 0;
        border-top: 0;
    }

    .rv-hora-l1 {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .rv-hora-h {
        flex: none;
        width: 46px;
        font-weight: 600;
    }

    /* El juicio, pegado al borde derecho: es lo que se busca al recorrer la
       lista con el pulgar. */
    .rv-hora-e {
        margin-left: auto;
        text-align: right;
    }

    /* Lo que acompaña, en el segundo renglón y con su nombre delante: sin la
       cabecera de la rejilla, «1504» a secas no dice de qué habla. */
    .rv-hora-l2 {
        display: flex;
        flex-wrap: wrap;
        gap: 0 12px;
        margin-top: 1px;
        color: var(--rv-mut);
        font-size: 12px;
    }

    /* Aquí no hay cabecera, así que cada dato dice su nombre. */
    .rv-hora-lb {
        display: inline;
    }

    .rv-hora-l2 .rv-hora-nd {
        display: none;
    }
}

.rv-sites-acciones {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.rv-sites-acciones button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 600;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-sites-acciones .rv-sites-primario {
    background: #2a6f77;
    border-color: #2a6f77;
    color: #fff;
}

/* El botón (i) de esta cabecera tiene dos botones más a su derecha, así que el
   desplegable, que cuelga de él hacia la izquierda, se salía de la pantalla en un
   teléfono. Se estrecha lo justo para caber; el contenido es corto y lo aguanta. */
@media (max-width: 720px) {
    #rv-sites-leyenda {
        max-width: min(250px, calc(100vw - 100px));
    }
}

/* La nota vive en el desplegable, debajo de los colores que explica. */
.rv-sites-nota {
    margin: 9px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--rv-line);
    color: var(--rv-mut);
    font-size: 11px;
    line-height: 1.4;
}

/* En pantallas estrechas la fila se parte en dos alturas. */
@media (max-width: 720px) {
    .rv-sites-fila {
        grid-template-columns: 14px 1fr auto;
        gap: 6px 10px;
    }

    .rv-sites-card {
        padding: 8px 10px;
    }

    .rv-sites-termica {
        grid-column: 2;
    }

    /* El rótulo, al lado de su valor y no debajo: apilados gastaban dos alturas
       de línea para decir una cosa, y a la derecha sobraba el renglón entero. */
    .rv-sites-termica small {
        display: inline;
        margin-left: 6px;
    }

    .rv-sites-franja {
        grid-column: 2 / 4;
        text-align: left;
    }
}

/* ---------- indicador de carga ---------- */

.rv-cargando {
    position: absolute;
    left: 12px;
    bottom: calc(var(--rv-bar-h) + 14px);
    z-index: 980;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #12181fee;
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 3px 12px #0006;
    pointer-events: none;
}

.rv-cargando[hidden] {
    display: none;
}

.rv-spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rv-girar .8s linear infinite;
}

@keyframes rv-girar {
    to { transform: rotate(360deg); }
}

/* ---------- avisos flotantes ---------- */

/* Confirmaciones transitorias, sobre la barra de tiempo y por debajo de las
   hojas: informan sin pedir nada. */
.rv-toast {
    position: absolute;
    left: 50%;
    bottom: calc(var(--rv-bar-h) + 14px);
    transform: translateX(-50%);
    z-index: 990;
    max-width: min(86vw, 420px);
    background: #12181fee;
    color: #fff;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12px;
    box-shadow: 0 3px 12px #0006;
    text-align: center;
    pointer-events: none;
}

.rv-toast[hidden] {
    display: none;
}

/* Cartel de primera visita. Se parece al toast pero se puede cerrar, y solo
   existe hasta el primer toque al mapa. */
.rv-hint {
    position: absolute;
    left: 50%;
    bottom: calc(var(--rv-bar-h) + 14px);
    transform: translateX(-50%);
    z-index: 985;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: min(88vw, 440px);
    background: rgba(255, 255, 255, .96);
    color: var(--rv-ink);
    border: 1px solid var(--rv-line);
    border-radius: 10px;
    padding: 8px 6px 8px 14px;
    font-size: 12px;
    box-shadow: var(--rv-shadow);
}

.rv-hint[hidden] {
    display: none;
}

.rv-hint button {
    width: 34px;
    height: 34px;
    flex: none;
    border: 0;
    background: none;
    color: var(--rv-mut);
    font-size: 14px;
    cursor: pointer;
}

.rv-wind {
    pointer-events: none;
}

/* ---------- hoja de detalle ----------
   Se superpone al mapa en tres posiciones. El mapa conserva su tamaño, así que
   el usuario puede arrastrarlo para sacar su punto de debajo de la hoja. */

/* En móvil ocupa la pantalla entera o no está: abierta o cerrada, sin posición
   intermedia. Un sondeo o un meteograma en media pantalla no se leen, y la hoja
   a medias no se entendía como un paso hacia ninguna parte; el mapa sigue
   estando a un gesto de distancia. */
.rv-detail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    height: 100dvh;
    background: #fff;
    box-shadow: 0 -8px 28px rgba(16, 32, 48, .25);
    display: flex;
    flex-direction: column;
    /* La barra de horas flota por encima de la hoja: lo que ocupa se descuenta
       aquí, así el pie acaba por encima de ella y no debajo. El modelo de caja
       va explícito porque la hoja se ancla por abajo con un alto fijo: sin él,
       el relleno la empujaría fuera de la pantalla por arriba. */
    box-sizing: border-box;
    padding-bottom: var(--rv-bar-h);
    transition: transform .28s ease;
    will-change: transform;
}

.rv-detail[data-state="closed"] {
    transform: translateY(100%);
}

.rv-detail[data-state="full"] {
    transform: translateY(0);
    /* A pantalla completa las esquinas redondeadas dejan asomar el mapa por los
       lados y parece un fallo de pintado. */
    border-radius: 0;
    /* Hueco para la barra de estado del teléfono. */
    padding-top: env(safe-area-inset-top);
}

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

/* Cierra la hoja. No se arrastra —solo hay abierto y cerrado—, así que el
   puntero es el de un botón y no el de algo que se agarra. */
.rv-detail-grip {
    height: 20px;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rv-grip-bar {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: #c6d0d9;
}

/* Pestañas y aspa comparten renglón: la cabecera con título y coordenadas se
   llevaba 50 px de alto para repetir lo que ya dice la chincheta del mapa, y ese
   alto sale del diagrama. Las coordenadas están ahora en el pie. */
.rv-detail-bar {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--rv-line);
}

.rv-tabs {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    padding-left: 6px;
}

.rv-tabs button {
    flex: 1 1 0;
    min-height: 40px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    color: var(--rv-mut);
    cursor: pointer;
}

.rv-tabs button.on {
    color: var(--rv-ink);
    font-weight: 600;
    border-bottom-color: var(--rv-bar);
}

/* El hueco de la barra inferior lo reserva la hoja, no el cuerpo: reservándolo
   dentro del cuerpo quedaban 60 px de vacío entre el diagrama y la leyenda, y
   además la leyenda y el pie caían justo debajo, tapados por la propia barra. */
.rv-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 4px 0;
    display: flex;
    flex-direction: column;
}

/* El lienzo se come el hueco que quede: a pantalla completa el diagrama crece
   en vez de dejar un vacío debajo. El módulo lo dimensiona por la densidad de
   pantalla al dibujar. */
.rv-chart-wrap {
    flex: 1 1 auto;
    min-height: 120px;
    position: relative;   /* ancla del globo del diagrama */
    /* El meteograma se estira para que sus columnas quepan anchas y su lienzo
       no baja de una altura legible: lo que no quepa se desplaza aquí dentro
       —en las dos direcciones—, que es donde los ejes fijos pueden acompañar. */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* El eje de alturas: un lienzo clavado al borde izquierdo visible. El soporte
   no ocupa sitio (0×0) para no desplazar al diagrama; el lienzo cuelga
   absoluto de él y se pinta con la misma geometría vertical que el diagrama. */
.rv-axis-y-pin {
    position: sticky;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 30;
    pointer-events: none;
}

.rv-axis-y-pin canvas {
    position: absolute;
    left: 0;
    top: 0;
}

/* El eje de horas: una franja clavada al borde inferior visible. Esta sí ocupa
   sus 30 px en el flujo, que el diagrama descuenta de su alto. */
.rv-axis-x-pin {
    position: sticky;
    bottom: 0;
    height: 30px;
    z-index: 20;
    pointer-events: none;
}

.rv-axis-x-pin canvas {
    display: block;
    height: 30px;
}

/* El sondeo cabe entero y dibuja sus rótulos como siempre. */
.rv-chart-wrap.rv-ejes-off .rv-axis-y-pin,
.rv-chart-wrap.rv-ejes-off .rv-axis-x-pin {
    display: none;
}

.rv-chart-wrap.rv-ejes-off #rv-chart {
    height: 100%;
    min-height: 0;
}

/* ---------- herramientas plegadas en móvil ----------
   Siete botones de 50 px son 390 px de columna: en un teléfono eso es media
   pantalla de mapa tapada por cosas que se usan de vez en cuando. Quedan a la
   vista la lupa —que se usa constantemente— y el menú; lo demás baja al
   desplegarlo y se repliega en cuanto se elige algo. */
@media (max-width: 899px) {
    .rv-tool-menu {
        display: flex;
    }

    .rv-tools-mas {
        display: none;
        flex-direction: column;
        gap: 6px;
    }

    .rv-tools.abierto .rv-tools-mas {
        display: flex;
    }

    /* Desplegado en apaisado no cabe entero: antes que salirse de la pantalla,
       se desplaza. El relleno lateral deja sitio a la sombra de los botones,
       que si no la recorta el propio desplazamiento. */
    .rv-tools {
        max-height: calc(100dvh - var(--rv-bar-h) - 20px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 6px;
        margin-right: -6px;
    }
}

/* Barra compacta mientras el detalle tapa el mapa: solo las horas. Así el
   diagrama recupera unos 80 px de alto que se estaban yendo en un margen.
   Solo en pantallas pequeñas: en escritorio el mapa sigue a la vista al lado de
   la columna, y su leyenda hace falta. */
@media (max-width: 899px) {
    .rv-app.rv-detail-open {
        --rv-bar-h: 60px;
    }

    .rv-app.rv-detail-open .rv-bar-head,
    .rv-app.rv-detail-open .rv-legend-canvas {
        display: none;
    }

    .rv-app.rv-detail-open .rv-timebar {
        padding: 4px 8px;
    }
}

/* ---------- controles y leyenda del diagrama ---------- */

.rv-chart-ctl {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 2px 8px 0;
    color: var(--rv-mut);
    font-size: 12px;
}

/* 34 px, los del propio desplegable: el mínimo de 40 solo añadía aire por
   arriba y por abajo, y ese aire se lo quitaba al diagrama. */
.rv-chart-ctl label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
}

/* En un teléfono los rótulos de los mandos parten la cabecera en dos renglones,
   y ese renglón de más se lo quita al diagrama. Los desplegables se explican
   solos —«3000 m», «Skew-T log-p»— y lo que decían las etiquetas sigue en el
   `title` y en el `aria-label`; de «Ri gradiente» queda «Ri», que es como se
   nombra en la leyenda. En escritorio hay sitio y se leen enteros. */
@media (max-width: 899px) {
    .rv-ctl-lb {
        display: none;
    }

    .rv-chart-ctl {
        gap: 10px;
    }
}

/* Y lo mismo con el renglón entero, por lo mismo: el módulo lo esconde en la
   previsión y en los datos —donde no hay diagrama que ajustar— y seguía a la
   vista con «Alt. máx.» encima de una lista de horas, que no ajusta nada. */
.rv-chart-ctl[hidden] {
    display: none;
}

/* Sin esto, el `hidden` de estos mandos no hace nada: el `display: flex` de
   arriba le gana a la hoja del navegador, y los controles que solo valen para el
   sondeo —cómo se dibuja, el subeje de Richardson, la altura máxima— seguían a la
   vista en el meteograma aunque el módulo los diera por ocultos. Es el mismo
   remate que llevan .rv-pick, .rv-sheet y compañía. */
.rv-chart-ctl label[hidden] {
    display: none;
}

.rv-select-sm {
    height: 34px;
    min-width: 108px;
    font-size: 14px;
}

.rv-check input {
    width: 20px;
    height: 20px;
}

/* Desplegable de la leyenda, colgado del botón (i) de la cabecera del diagrama.
   Antes la leyenda iba fija al pie de la columna: dos renglones permanentes para
   explicar unos trazos que no cambian mientras se mira el diagrama, y ese alto
   se lo quitaba al diagrama. Ahora sale por encima y no le quita nada.

   Va al final del renglón de mandos, apartado de ellos: los mandos cambian lo
   que se dibuja y esto solo lo explica. */
.rv-legend-menu {
    position: relative;
    display: flex;
}

/* Coordenadas y paso de malla del punto, en el hueco muerto del renglón de
   mandos: son quien empuja la leyenda al borde derecho. Si no caben, se
   recortan con puntos suspensivos antes que partir el renglón en dos. */
.rv-chart-coords {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

/* Cuadrado y de la misma altura que los mandos de al lado. */
.rv-legend-btn {
    width: 34px;
    height: 34px;
    border: 0;
    background: none;
    color: var(--rv-mut);
    font-size: 17px;
    cursor: pointer;
}

/* El botón se retira mientras no haya leyenda que enseñar: sin punto todavía,
   la cabecera está a la vista pero el diagrama aún no ha dicho qué dibuja. */
.rv-legend-btn[hidden] {
    display: none;
}

.rv-legend-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    box-sizing: border-box;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--rv-shadow);
}

.rv-legend-pop[hidden] {
    display: none;
}

/* El piquito lo ata a su botón: sin él es una tarjeta que aparece suelta. */
.rv-legend-pop::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 13px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-left: 1px solid var(--rv-line);
    border-top: 1px solid var(--rv-line);
    transform: rotate(45deg);
}

/* Dentro del desplegable la leyenda va en lista, no en renglones corridos: hay
   sitio de sobra a lo alto y cada entrada se lee de una pasada. */
.rv-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    color: var(--rv-ink);
}

.rv-leg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rv-sw {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* La velocidad vertical se anuncia como el disco que es. */
.rv-sw-pt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Las series de línea se anuncian como una raya, no como un bloque de color. */
.rv-sw-ln {
    height: 3px;
    border-radius: 2px;
}

/* Las discontinuas necesitan sitio para que se vea que lo son: con 14 px cabe
   una raya y media y el patrón no se lee. Sin redondeo, que difumina el corte
   entre raya y hueco justo cuando el hueco es lo que hay que ver. */
.rv-sw-dash {
    width: 22px;
    border-radius: 0;
}

.rv-leg-note {
    color: var(--rv-mut);
    padding-top: 7px;
    border-top: 1px solid var(--rv-line);
}

.rv-chart-wrap[hidden],
.rv-data[hidden] {
    display: none;
}

/* El ancho lo fija el módulo al dibujar: lo que pidan las columnas en el
   meteograma, y en el sondeo lo que quepa sin achatarlo. Cuando pide menos del
   hueco, se centra en lugar de quedarse pegado a la izquierda. El alto
   descuenta la franja del eje de horas y no baja de 220 px: antes que
   aplastarse, el diagrama se desplaza verticalmente con su eje a cuestas. */
#rv-chart {
    width: 100%;
    height: calc(100% - 30px);
    min-height: 220px;
    display: block;
    margin: 0 auto;
}

.rv-values caption {
    text-align: left;
    padding-bottom: 6px;
    color: var(--rv-mut);
}

.rv-unit {
    color: var(--rv-mut);
    font-size: 11px;
}

.rv-detail-empty {
    color: var(--rv-mut);
}

.rv-values {
    width: 100%;
    border-collapse: collapse;
}

/* La pestaña de datos, por grupos: los mismos con los que se elige el producto
   —térmica, nubes, viento, temperatura, estabilidad— y en el mismo orden. Una
   tabla corrida de doce cifras obliga a leerlas todas para encontrar una. */
.rv-grupo + .rv-grupo {
    margin-top: 14px;
}

.rv-grupo-t {
    display: flex;
    align-items: center;
    gap: var(--rv-grupo-hueco);
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rv-mut);
}

.rv-grupo-ic {
    width: var(--rv-grupo-ic);
    font-size: 13px;
    line-height: 1;
}

/* Los rótulos entran hasta debajo del nombre del grupo, no debajo de su icono,
   que se queda colgando fuera: así el ojo ve dos niveles —el grupo y lo que
   contiene— sin necesidad de líneas ni cajas. Las cifras no se mueven, que
   alinearlas en una columna es lo que permite compararlas de un vistazo. */
.rv-grupo {
    --rv-grupo-ic: 14px;
    --rv-grupo-hueco: 6px;
}

.rv-grupo .rv-values td:first-child {
    padding-left: calc(var(--rv-grupo-ic) + var(--rv-grupo-hueco));
}

/* El suelo abre la pestaña y se despega del resto: no es una predicción, es el
   sitio desde el que se miden todas las demás. */
.rv-grupo-suelo {
    margin-bottom: 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rv-line);
}

.rv-datos-hora {
    margin: 0 0 10px;
    color: var(--rv-mut);
}

/* Aclaración a media voz, debajo de su celda: cabe la frase sin robarle sitio
   a la cifra, que es lo que se viene a leer. */
.rv-nota {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--rv-mut);
    white-space: normal;
}

.rv-values th,
.rv-values td {
    padding: 7px 4px;
    border-bottom: 1px solid var(--rv-line);
    text-align: left;
    vertical-align: top;
}

.rv-values td:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rv-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--rv-mut);
}

/* ---------- escritorio ----------
   Con sitio de sobra, el detalle deja de ser una hoja y se convierte en una
   columna fija a la izquierda, como en el visor original. */

@media (min-width: 900px) {
    .rv-detail {
        left: 0;
        top: 0;
        right: auto;
        width: var(--rv-detail-w);
        height: 100dvh;
        border-radius: 0;
        border-right: 1px solid var(--rv-line);
        box-shadow: var(--rv-shadow);
        transition: transform .28s ease;
    }

    .rv-detail[data-state="closed"] {
        transform: translateX(-100%);
    }

    .rv-detail[data-state="full"] {
        transform: translateX(0);
        /* En escritorio es una columna lateral, no una hoja: sin las esquinas
           redondeadas ni el hueco de barra de estado que pide el móvil. */
        border-radius: 0;
        padding-top: 0;
    }

    .rv-detail-grip {
        display: none;
    }

    /* Aquí la barra de horas va al lado, sobre lo que queda de mapa: la columna
       no tiene que apartarse de ella. */
    .rv-detail {
        padding-bottom: 8px;
    }

    /* La misma barra apilada que en móvil —título y run, rampa, mandos—: probé
       un solo renglón y el ancho sobraba, pero el nombre del producto y la
       rampa se pisaban el sitio. Dos renglones caben de sobra. */

    /* Con la columna de detalle abierta, la barra arranca donde acaba la
       columna: es el remate del mapa que queda, no de la columna. */
    .rv-app.rv-detail-visible .rv-timebar {
        left: var(--rv-detail-w);
    }

    /* Y el mapa se aparta de la columna, en vez de seguir extendido por debajo.
       Tapado no es lo mismo que ausente: la mitad izquierda del mapa quedaba
       viva pero incapaz de recibir un clic, así que los despegues que caían ahí
       —justo los de alrededor del que se acababa de abrir— dejaban de poder
       pulsarse. Al encogerlo, todo lo que se ve se puede pulsar. */
    .rv-app.rv-detail-visible .rv-map {
        left: var(--rv-detail-w);
    }

    /* El chip se centra también sobre lo que queda de mapa. */
    .rv-app.rv-detail-visible .rv-chip {
        left: calc(50% + var(--rv-detail-w) / 2);
    }

    /* Tarjetas laterales en escritorio: todas las hojas sobre el mapa (Mapa,
       producto, viento, hora) y la de compartir se despliegan pegadas al borde
       derecho, justo debajo de la columna de botones y alineadas con ella,
       hasta encima de la barra inferior, con desplazamiento interno. Buscar y
       Despegues se quedan como están: el buscador va en la cabecera y la de
       despegues es una modal a pantalla completa.
       La altura de la columna, aquí y solo aquí: botones de 50 px con 6 de
       separación (56 por botón) desde 10 px arriba, más 8 px de aire. Hoy son
       cuatro (Buscar, Mapa, Despegues, Compartir); si cambia, cambiar
       --rv-col-botones. */
    :root {
        --rv-col-botones: 4;
        --rv-lateral-top: calc(10px + var(--rv-col-botones) * 56px + 2px);
        --rv-lateral-max: calc(100dvh - var(--rv-lateral-top) - var(--rv-bar-h) - 8px);
    }

    .rv-sheet {
        top: var(--rv-lateral-top);
        bottom: auto;
        left: auto;
        right: 10px;
        width: 360px;
        max-height: var(--rv-lateral-max);
    }

    .rv-sheet > .rv-sheet-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        min-height: 0;
    }

    /* Compartir sigue siendo una modal —fondo oscuro, foco dentro—, pero su
       tarjeta se coloca donde las demás. */
    #rv-share-modal {
        align-items: flex-start;
        justify-content: flex-end;
        padding: var(--rv-lateral-top) 10px 0 0;
    }

    #rv-share-modal .rv-share-card {
        width: 360px;
        max-height: var(--rv-lateral-max);
        overflow-y: auto;
    }
}


/* Fuera de la vista pero dentro del documento: el encabezado y la
   presentación de la portada, para lectores de pantalla y buscadores. Es la
   técnica de siempre de «solo para lectores de pantalla»; display:none los
   sacaría también del árbol de accesibilidad. */
.rv-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Las hojas reciben el foco al abrirse (ver toggleSheet): el contenedor no
   necesita marco de foco, lo llevan sus controles. */
.rv-sheet:focus { outline: none; }

/* Comparador de runs (solo administración). */
.rv-cmp-btn {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--rv-sel-line);
    border-radius: 8px;
    background: var(--rv-sel-fondo);
    color: var(--rv-ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.rv-cmp-btn[hidden] { display: none; }
.rv-cmp-btn:disabled { opacity: .5; cursor: default; }
#rv-cmp-modal { padding: 0; z-index: 2000; }
.rv-cmp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    animation: rv-modal-in .16s ease-out;
}
.rv-cmp-pick { flex: 1; padding: 12px 16px 16px; overflow: auto; min-height: 0; }
/* Sin desplazamiento vertical: los diagramas llenan el alto que queda. */
.rv-cmp-view { flex: 1; display: flex; flex-direction: column; padding: 12px 16px 12px; overflow: hidden; min-height: 0; }
.rv-cmp-pick[hidden], .rv-cmp-view[hidden] { display: none; }
.rv-cmp-sub { margin: 0 0 10px; color: var(--rv-mut); font-size: 14px; }
.rv-cmp-list { display: flex; flex-direction: column; gap: 6px; }
.rv-cmp-list label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.rv-cmp-list small { color: var(--rv-mut); }
.rv-cmp-acc { display: flex; justify-content: flex-end; margin-top: 14px; }
.rv-cmp-bar { flex: none; display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; }
/* Un run por columna, lado a lado; si no caben, se desplaza a lo ancho. */
.rv-cmp-grid { flex: 1; min-height: 0; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; }
.rv-cmp-item { flex: none; display: flex; flex-direction: column; border: 1px solid var(--rv-line); border-radius: 10px; overflow: hidden; }
.rv-cmp-head { padding: 6px 10px; background: var(--rv-sel-fondo); font-size: 13px; color: var(--rv-ink); display: flex; gap: 12px; flex-wrap: wrap; }
.rv-cmp-head b { font-weight: 600; }
/* Mismo aspecto en todas las columnas, para que los diagramas se comparen a igual escala. */
/* overflow-x: scroll y no auto: la barra ocupa su sitio en TODAS las columnas,
   haya o no desplazamiento, y así los lienzos miden lo mismo de alto y las
   alturas del eje común caen en el mismo píxel. */
.rv-cmp-lienzo { position: relative; flex: 1; min-height: 0; overflow-x: scroll; overflow-y: hidden; }
.rv-cmp-lienzo canvas { display: block; height: 100%; cursor: crosshair; }
/* En el comparador la burbuja no se arrastra ni tiene aspa: se marca pulsando. */
.rv-cmp-tip { pointer-events: none; }
.rv-cmp-tip .rv-tip-h { padding-right: 0; }
.rv-cmp-msg { padding: 16px; color: var(--rv-mut); font-size: 14px; }