/* NuboDrive Web — tu nube, en el navegador.
   Un cielo que es el de la hora que es (cielo.js), materiales translúcidos que flotan sobre el
   contenido, tipografía grande y prieta, y movimiento con muelle: nada salta, todo llega. Tema
   claro u oscuro según el del equipo. El azul es el del icono de NuboDrive. */

@font-face { font-family: "Inter"; src: url("inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
    color-scheme: light dark;
    --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --azul: #0071f2;
    --azul-suave: rgba(0, 113, 242, 0.12);
    --rojo: #d70015;
    --verde: #1a7f37;
    --fondo: #f5f5f7;
    --hoja: #ffffff;
    --tinta: #1d1d1f;
    --tinta-2: #6e6e73;
    --raya: rgba(0, 0, 0, 0.09);
    --raya-fuerte: rgba(0, 0, 0, 0.16);
    --relleno: rgba(118, 118, 128, 0.12);
    --relleno-fuerte: rgba(118, 118, 128, 0.22);
    --cristal: rgba(255, 255, 255, 0.72);
    --cristal-grueso: rgba(252, 252, 254, 0.84);
    --cristal-borde: rgba(255, 255, 255, 0.55);
    --sombra-flota: 0 28px 70px -18px rgba(0, 10, 40, 0.38), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
    --sombra-baldosa: 0 24px 60px -30px rgba(4, 20, 70, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --carpeta-detras: #1f8bf5;
    --carpeta-delante: #56b4ff;
    --muelle: cubic-bezier(0.2, 0.9, 0.25, 1);
    --alto-barra: 3.5rem;
    --mapa-fondo: #f2f3f0;
}
@media (prefers-color-scheme: dark) {
    :root {
        --azul: #0a84ff;
        --azul-suave: rgba(10, 132, 255, 0.2);
        --rojo: #ff453a;
        --verde: #30d158;
        --fondo: #000000;
        --hoja: #1c1c1e;
        --tinta: #f5f5f7;
        --tinta-2: #a1a1a6;
        --raya: rgba(255, 255, 255, 0.12);
        --raya-fuerte: rgba(255, 255, 255, 0.2);
        --relleno: rgba(118, 118, 128, 0.24);
        --relleno-fuerte: rgba(118, 118, 128, 0.36);
        --cristal: rgba(28, 28, 30, 0.72);
        --cristal-grueso: rgba(36, 36, 38, 0.86);
        --cristal-borde: rgba(255, 255, 255, 0.1);
        --sombra-flota: 0 28px 70px -18px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.14);
        --sombra-baldosa: 0 24px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
        --carpeta-detras: #0a6fd6;
        --carpeta-delante: #3a9df5;
        --mapa-fondo: #45516e;
    }
}

/* El cielo, por horas. --sobre-cielo es la tinta que se lee encima de él. */
:root, :root[data-cielo="dia"] { --cielo: linear-gradient(180deg, #1976ec 0%, #4fa9f8 46%, #bfe6ff 100%); --luz-1: #ffffff; --luz-2: #40e0e0; --luz-3: #9ad7ff; --sobre-cielo: #04204d; --sobre-cielo-2: rgba(4, 32, 77, 0.74); }
:root[data-cielo="amanecer"] { --cielo: linear-gradient(180deg, #4668d4 0%, #a892e0 40%, #ffbfa6 76%, #ffe4c2 100%); --luz-1: #ffe0bf; --luz-2: #ff9db4; --luz-3: #8fb2ff; --sobre-cielo: #241b4d; --sobre-cielo-2: rgba(36, 27, 77, 0.74); }
:root[data-cielo="atardecer"] { --cielo: linear-gradient(180deg, #141f5c 0%, #563c98 38%, #dd6689 74%, #ffac6e 100%); --luz-1: #ff8a68; --luz-2: #b35bd0; --luz-3: #2a3ea8; --sobre-cielo: #ffffff; --sobre-cielo-2: rgba(255, 255, 255, 0.82); }
:root[data-cielo="noche"] { --cielo: linear-gradient(180deg, #02040f 0%, #091238 52%, #142a72 100%); --luz-1: #1b3aa6; --luz-2: #0f2a9c; --luz-3: #0a6fd6; --sobre-cielo: #ffffff; --sobre-cielo-2: rgba(255, 255, 255, 0.8); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--relleno-fuerte) transparent; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--fondo); color: var(--tinta); font: 400 0.9375rem/1.45 var(--fuente); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; accent-color: var(--azul); caret-color: var(--azul); overflow-x: hidden; }
::selection { background: color-mix(in srgb, var(--azul) 28%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 60%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--azul); text-decoration: none; }
img { max-width: 100%; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
svg.icono { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sin-js { margin: 3rem auto; max-width: 30rem; text-align: center; }

/* ── El cielo ── */
/* Las tres luces son degradados quietos, no manchas desenfocadas que se mueven: se ven igual y no
   cuestan nada en cada cuadro. Con ellas moviéndose, todo el cristal de encima había que rehacerlo
   sin parar, y en un equipo sin tarjeta gráfica cada cuadro tardaba más de un segundo. */
.cielo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
    radial-gradient(circle 46vmax at 13vmax 7vmax, color-mix(in srgb, var(--luz-1) 85%, transparent) 0%, color-mix(in srgb, var(--luz-1) 70%, transparent) 30%, transparent 100%),
    radial-gradient(circle 46vmax at calc(100% - 9vmax) 37vmax, color-mix(in srgb, var(--luz-2) 60%, transparent) 0%, color-mix(in srgb, var(--luz-2) 48%, transparent) 30%, transparent 100%),
    radial-gradient(circle 46vmax at 49vmax calc(100% + 3vmax), color-mix(in srgb, var(--luz-3) 70%, transparent) 0%, color-mix(in srgb, var(--luz-3) 56%, transparent) 30%, transparent 100%),
    var(--cielo); }
.cielo .estrellas { position: absolute; inset: 0; opacity: 0; background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 19% 41%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 31% 9%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 44% 27%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 57% 12%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 66% 36%, #fff 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 78% 8%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 88% 24%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 93% 47%, #fff 60%, transparent 62%), radial-gradient(1.2px 1.2px at 13% 58%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 37% 52%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 72% 55%, #fff 60%, transparent 62%); }
:root[data-cielo="noche"] .cielo .estrellas { opacity: 0.85; }
:root[data-cielo="atardecer"] .cielo .estrellas { opacity: 0.3; }
/* El sol —o la luna— donde toca a esa hora, y un horizonte de nubes. Quietos, como las luces. */
:root, :root[data-cielo="dia"] { --astro-x: 79%; --astro-y: 15%; --astro-lado: 7vmax; --astro: radial-gradient(circle, #ffffff 0 58%, #fff5cc 100%); --astro-halo: 0 0 5vmax 1.5vmax rgba(255, 255, 255, 0.6), 0 0 24vmax 9vmax rgba(255, 255, 255, 0.3); --nube: rgba(255, 255, 255, 0.92); --nube-2: rgba(255, 255, 255, 0.6); }
:root[data-cielo="amanecer"] { --astro-x: 17%; --astro-y: 80%; --astro-lado: 13vmax; --astro: radial-gradient(circle, #fff3dc 0 40%, #ffc98f 100%); --astro-halo: 0 0 7vmax 2vmax rgba(255, 214, 160, 0.7), 0 0 30vmax 12vmax rgba(255, 190, 150, 0.4); --nube: rgba(255, 240, 228, 0.9); --nube-2: rgba(255, 205, 190, 0.6); }
:root[data-cielo="atardecer"] { --astro-x: 81%; --astro-y: 82%; --astro-lado: 15vmax; --astro: radial-gradient(circle, #ffd9a0 0 35%, #ff8a5c 100%); --astro-halo: 0 0 8vmax 2vmax rgba(255, 150, 100, 0.65), 0 0 34vmax 13vmax rgba(255, 120, 110, 0.38); --nube: rgba(120, 78, 168, 0.62); --nube-2: rgba(255, 158, 140, 0.4); }
:root[data-cielo="noche"] { --astro-x: 80%; --astro-y: 17%; --astro-lado: 6vmax; --astro: radial-gradient(circle at 36% 34%, #ffffff 0 30%, #dde6ff 62%, #b4c2ec 100%); --astro-halo: inset -0.9vmax -0.5vmax 0 0 rgba(12, 22, 70, 0.3), 0 0 4vmax 1vmax rgba(190, 206, 255, 0.4), 0 0 20vmax 7vmax rgba(120, 150, 255, 0.16); --nube: rgba(34, 54, 128, 0.6); --nube-2: rgba(20, 34, 96, 0.5); }
.cielo .astro { position: absolute; left: var(--astro-x); top: var(--astro-y); width: var(--astro-lado); height: var(--astro-lado); border-radius: 50%; translate: -50% -50%; background: var(--astro); box-shadow: var(--astro-halo); transition: opacity 0.5s ease-out; animation: asomar-astro 1.8s var(--muelle) both; }
/* El sol y la luna son de la entrada y del Inicio: detrás de una hoja llena de fotos o de archivos, estorban */
:root[data-pantalla]:not([data-pantalla="inicio"]) .cielo .astro { opacity: 0; }
@keyframes asomar-astro { from { opacity: 0; transform: translateY(5vmax) scale(0.9); } }
.cielo .nubes { position: absolute; inset: auto 0 0 0; height: 52vh; background:
    radial-gradient(ellipse 22vmax 6.5vmax at 56% 95%, var(--nube-2) 0 35%, transparent 72%),
    radial-gradient(ellipse 34vmax 13vmax at 10% 106%, var(--nube) 0 42%, transparent 74%),
    radial-gradient(ellipse 30vmax 11vmax at 37% 110%, var(--nube) 0 42%, transparent 74%),
    radial-gradient(ellipse 40vmax 15vmax at 71% 112%, var(--nube) 0 42%, transparent 74%),
    radial-gradient(ellipse 26vmax 9.5vmax at 97% 104%, var(--nube) 0 42%, transparent 74%); }

/* ── Botones y campos ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 2.125rem; padding: 0 0.95rem; border: 0; border-radius: 999px; background: var(--relleno); color: var(--tinta); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; transition: background-color 0.2s ease-out, transform 0.12s ease-out, filter 0.2s ease-out; }
.boton:hover { background: var(--relleno-fuerte); }
.boton:active { transform: scale(0.96); }
.boton .icono { width: 1.1rem; height: 1.1rem; }
.boton--principal { background: var(--azul); color: #fff; font-weight: 600; }
.boton--principal:hover { background: var(--azul); filter: brightness(1.08); }
.boton--peligro { color: var(--rojo); }
.boton[disabled] { opacity: 0.5; pointer-events: none; }
.boton-icono { display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinta); transition: background-color 0.2s ease-out, transform 0.12s ease-out; }
.boton-icono:hover { background: var(--relleno); }
.boton-icono:active { transform: scale(0.92); }
.segmentos { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--relleno); }
.segmentos button { height: 1.875rem; padding: 0 0.85rem; border: 0; border-radius: 999px; background: none; font-size: 0.875rem; font-weight: 500; transition: background-color 0.25s ease-out, box-shadow 0.25s ease-out; }
.segmentos button[aria-pressed="true"] { background: var(--hoja); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.05); font-weight: 600; }
.segmentos--iconos button { width: 2.25rem; padding: 0; display: inline-grid; place-items: center; }
.segmentos button[disabled] { opacity: 0.35; pointer-events: none; }
.segmentos--iconos button:active { background: var(--relleno-fuerte); }
.segmentos--iconos .icono { width: 1.05rem; height: 1.05rem; }

/* ── La entrada: una hoja de cristal sobre el cielo ── */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; padding: clamp(1.25rem, 4vh, 3rem) clamp(1.25rem, 5vw, 4.5rem) calc(1.5rem + env(safe-area-inset-bottom)); color: var(--sobre-cielo); }
.entrada-escena { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 25rem); align-items: center; gap: clamp(2rem, 6vw, 6.5rem); width: min(100%, 73rem); margin: 0 auto; }
/* Lo de la izquierda va llegando de arriba abajo, una cosa detrás de otra */
.entrada-relato > * { animation: asomar 1s var(--muelle) both; }
.entrada-relato > :nth-child(2) { animation-delay: 0.08s; }
.entrada-relato > :nth-child(3) { animation-delay: 0.16s; }
.entrada-relato > :nth-child(4) { animation-delay: 0.24s; }
@keyframes asomar { from { opacity: 0; transform: translateY(22px); } }
.entrada-marca { display: flex; align-items: center; gap: 0.85rem; font-size: 1.4375rem; font-weight: 650; letter-spacing: -0.025em; }
.entrada-marca img { height: 2.625rem; }
.entrada-lema { margin-top: clamp(1.5rem, 6vh, 3.25rem); font-size: clamp(2.75rem, 6.1vw, 5.25rem); line-height: 0.98; font-weight: 700; letter-spacing: -0.045em; }
.entrada-lema span { display: block; }
.entrada-bajada { max-width: 31rem; margin-top: 1.4rem; color: var(--sobre-cielo-2); font-size: clamp(1.125rem, 1.55vw, 1.375rem); line-height: 1.35; letter-spacing: -0.015em; text-wrap: pretty; }
.entrada-que { display: grid; gap: 0.95rem; margin: clamp(1.75rem, 5.5vh, 3rem) 0 0; padding: 0; list-style: none; }
.entrada-que li { display: flex; align-items: center; gap: 0.95rem; }
.entrada-que .glifo { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 13px; background: var(--cristal); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: var(--azul); box-shadow: inset 0 0 0 0.5px var(--cristal-borde), 0 10px 22px -12px rgba(4, 16, 64, 0.45); }
.entrada-que .glifo .icono { width: 1.35rem; height: 1.35rem; }
.entrada-que strong { display: block; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; }
.entrada-que li > span:last-child > span { color: var(--sobre-cielo-2); font-size: 0.9375rem; }
/* Dónde bajarse la app: una línea bajo la ventana de entrada, sin fondo (lo pidió el usuario: «debajo de la
   ventana de login, minimalista»). Guarda su sitio desde el principio y aparece cuando el panel dice las direcciones */
.entrada-lado { min-width: 0; }
.entrada-apps { margin-top: 1.15rem; text-align: center; visibility: hidden; }
.entrada-apps.lista { visibility: visible; animation: aparecer 0.6s ease-out both; }
.entrada-apps p { margin-bottom: 0.4rem; color: var(--sobre-cielo-2); font-size: 0.75rem; letter-spacing: 0.01em; }
.entrada-apps ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.35rem; }
.entrada-apps a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; border-radius: 999px; color: var(--sobre-cielo); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; opacity: 0.86; transition: opacity 0.2s ease-out, background-color 0.2s ease-out; }
.entrada-apps a:hover { opacity: 1; background: color-mix(in srgb, var(--sobre-cielo) 12%, transparent); }
.entrada-apps .marca { flex: none; width: 1rem; height: 1rem; fill: currentColor; }
.entrada-cristal { padding: 2.4rem 2.1rem 1.9rem; border: 1px solid var(--cristal-borde); border-radius: 30px; background: var(--cristal); -webkit-backdrop-filter: blur(36px) saturate(180%); backdrop-filter: blur(36px) saturate(180%); box-shadow: 0 44px 110px -34px rgba(4, 16, 64, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.06); color: var(--tinta); text-align: center; animation: llegar 0.9s 0.12s var(--muelle) both; }
@keyframes llegar { from { opacity: 0; transform: translateY(18px) scale(0.965); } }
.entrada-cristal h2 { font-size: 1.875rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.entrada-frase { max-width: 19rem; margin: 0.5rem auto 1.6rem; color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.entrada-ayuda { max-width: 20rem; margin: 1.5rem auto 0; padding-top: 1.1rem; border-top: 0.5px solid var(--raya-fuerte); color: var(--tinta-2); font-size: 0.8125rem; line-height: 1.4; text-wrap: balance; }
.campos { position: relative; border-radius: 15px; background: var(--hoja); box-shadow: inset 0 0 0 1px var(--raya-fuerte); text-align: left; overflow: hidden; transition: box-shadow 0.2s ease-out; }
.campos:focus-within { box-shadow: inset 0 0 0 1.5px var(--azul), 0 0 0 4px color-mix(in srgb, var(--azul) 20%, transparent); }
.campo { display: block; }
.campo input { display: block; width: 100%; height: 3.3rem; padding: 0 3.5rem 0 1.1rem; border: 0; border-radius: 0; background: none; font-size: 1.0625rem; letter-spacing: -0.01em; outline: none; }
.campo input::placeholder { color: var(--tinta-2); opacity: 1; }
.campo-clave { display: grid; grid-template-rows: 0fr; border-top: 1px solid transparent; transition: grid-template-rows 0.5s var(--muelle), border-color 0.3s ease-out; }
.campo-clave > .campo { min-height: 0; overflow: hidden; }
.campos.con-clave .campo-clave { grid-template-rows: 1fr; border-top-color: var(--raya); }
.campos-ir { position: absolute; right: 0.6rem; bottom: 0.6rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: var(--azul); color: #fff; transition: transform 0.12s ease-out, background-color 0.25s ease-out, color 0.25s ease-out; }
.campos-ir:active { transform: scale(0.9); }
.campos-ir[disabled] { background: var(--relleno-fuerte); color: var(--tinta-2); pointer-events: none; }
.campos-ir .icono { width: 1.15rem; height: 1.15rem; stroke-width: 2.1; }
.campos-ir .girando { display: none; width: 1.05rem; height: 1.05rem; border: 2.2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: girar 0.75s linear infinite; }
.campos-ir[aria-busy="true"] { background: var(--azul); color: #fff; pointer-events: none; }
.campos-ir[aria-busy="true"] .icono { display: none; }
.campos-ir[aria-busy="true"] .girando { display: block; }
@keyframes girar { to { transform: rotate(360deg); } }
.campos.no { animation: negar 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes negar { 15% { transform: translateX(-9px); } 35% { transform: translateX(7px); } 55% { transform: translateX(-5px); } 75% { transform: translateX(3px); } }
.entrada-fallo { margin-top: 0.8rem; color: var(--rojo); font-size: 0.9375rem; font-weight: 500; text-wrap: balance; }
/* El segundo paso: el código que llega por correo */
.campos--codigo .campo input { height: 3.7rem; padding: 0 3.3rem; text-align: center; text-indent: 0.3em; font-size: 1.625rem; font-weight: 600; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.campos--codigo .campo input::placeholder { font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.01em; text-indent: 0; }
.campos--codigo .campos-ir { bottom: 0.8rem; }
#form-codigo:not([hidden]), .entrada-yendo:not([hidden]) { animation: asomar 0.6s var(--muelle) both; }
.entrada-nota { max-width: 19rem; margin: 0.6rem auto 0; color: var(--tinta-2); font-size: 0.8125rem; line-height: 1.4; text-wrap: balance; }
.entrada-otros { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 1.2rem; margin-top: 1.15rem; }
.entrada-otros button { padding: 0.35rem 0.15rem; border: 0; background: none; color: var(--azul); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.entrada-otros button:not([disabled]):hover { text-decoration: underline; text-underline-offset: 0.18em; }
.entrada-otros button[disabled] { color: var(--tinta-2); }
.entrada-yendo { display: grid; place-items: center; padding: 0.4rem 0 0.9rem; }
.entrada-yendo .girando { width: 1.8rem; height: 1.8rem; border: 2.6px solid var(--relleno-fuerte); border-top-color: var(--azul); border-radius: 50%; animation: girar 0.75s linear infinite; }
.interruptor { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1.35rem; color: var(--tinta-2); font-size: 0.9375rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor i { position: relative; width: 2.55rem; height: 1.55rem; border-radius: 999px; background: var(--relleno-fuerte); transition: background-color 0.25s ease-out; flex: none; }
.interruptor i::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.55rem - 4px); height: calc(1.55rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); transition: transform 0.35s var(--muelle); }
.interruptor input:checked + i { background: #34c759; }
.interruptor input:checked + i::after { transform: translateX(1rem); }
.interruptor input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--azul) 60%, transparent); outline-offset: 2px; }
.idiomas { justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.2rem; padding-top: 1.75rem; }
.idiomas button { padding: 0.32rem 0.7rem; border: 0; border-radius: 999px; background: none; color: var(--sobre-cielo-2); font-size: 0.875rem; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.idiomas button:hover { color: var(--sobre-cielo); }
.idiomas button[aria-current="true"] { background: var(--cristal); color: var(--tinta); font-weight: 600; }
/* En un portátil bajo (a dos columnas y con poca altura) todo se aprieta un poco: la entrada tiene que caber sin desplazarse */
@media (min-width: 56.01rem) and (max-height: 47rem) {
    .entrada { padding-top: 1rem; padding-bottom: 0.9rem; }
    .entrada-lema { margin-top: 1.1rem; font-size: clamp(2.5rem, 8.2vh, 4.5rem); }
    .entrada-bajada { margin-top: 0.9rem; }
    .entrada-que { gap: 0.6rem; margin-top: 1.3rem; }
    .idiomas { padding-top: 0.9rem; }
}
/* El logotipo de NuboLink es la marca, en la entrada y dentro. Tiene dos versiones: sobre el cielo
   manda la hora (oscuro de día, claro al atardecer y de noche); sobre el cristal de la barra, el tema. */
.logo-oscuro, .logo-claro { display: block; width: auto; }
.logo-claro { display: none; }
:root[data-cielo="atardecer"] .logo-oscuro, :root[data-cielo="noche"] .logo-oscuro { display: none; }
:root[data-cielo="atardecer"] .logo-claro, :root[data-cielo="noche"] .logo-claro { display: block; }
.app.bajando .barra .logo-oscuro { display: block; }
.app.bajando .barra .logo-claro { display: none; }
@media (prefers-color-scheme: dark) {
    .app.bajando .barra .logo-oscuro { display: none; }
    .app.bajando .barra .logo-claro { display: block; }
}

/* ── La aplicación: una barra de cristal y el contenido por debajo ── */
/* El cielo de la hora que es se ve en todas las pantallas: lo de cada una va encima, en hojas de cristal */
.app { min-height: 100vh; min-height: 100dvh; }
/* El cristal de la barra va en una capa suya: si lo llevara la barra, lo que flota dentro de ella
   (las pestañas, en el móvil) dejaría de colocarse respecto a la ventana. */
.barra { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: var(--alto-barra); padding: 0 1.25rem; color: var(--sobre-cielo); transition: color 0.3s ease-out; }
/* Arriba del todo la barra va sobre el cielo; al bajar, lo que pasa por debajo se ve a través de su cristal */
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cristal); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 0.5px 0 var(--raya); opacity: 0; transition: opacity 0.3s ease-out; }
.app.bajando .barra { color: var(--tinta); }
.app.bajando .barra::before { opacity: 1; }
.barra-marca { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start; color: inherit; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; }
.barra-marca img { height: 1.6875rem; }
.pestanas { position: relative; display: flex; padding: 3px; border-radius: 999px; background: var(--cristal); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); color: var(--tinta); }
.pestanas a { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.4rem; padding: 0.36rem 1.1rem; border-radius: 999px; color: inherit; font-weight: 500; transition: opacity 0.2s ease-out; }
.pestanas a[aria-current="page"] { font-weight: 600; }
.pestanas a:active { opacity: 0.6; }
.pestanas .icono { display: none; }
.pestanas-luz { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--hoja); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.05); transition: transform 0.5s var(--muelle), width 0.5s var(--muelle); }
.barra-fin { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.buscar { position: relative; }
.buscar .icono { position: absolute; z-index: 1; left: 0.6rem; top: 50%; translate: 0 -50%; width: 1.05rem; height: 1.05rem; color: var(--tinta-2); pointer-events: none; }
.buscar input { width: 11.5rem; height: 2.125rem; padding: 0 0.8rem 0 2.05rem; border: 0; border-radius: 999px; background: var(--cristal); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); color: var(--tinta); outline-offset: 1px; transition: width 0.45s var(--muelle), background-color 0.2s ease-out; }
.buscar input::placeholder { color: var(--tinta-2); opacity: 1; }
.buscar input:focus { width: 17rem; }
.cuenta-idioma { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.2rem 0 0.3rem; padding: 0.35rem 0.7rem; color: var(--tinta-2); font-size: 0.9375rem; }
.cuenta-idioma select { max-width: 10rem; padding: 0.3rem 0.5rem; border: 0; border-radius: 9px; background: var(--relleno); color: var(--tinta); font: inherit; }
.avatar { display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(160deg, #40c8ff, var(--azul) 55%, #1020b0); color: #fff; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.02em; flex: none; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12); transition: transform 0.12s ease-out; }
button.avatar:active { transform: scale(0.92); }
.avatar--grande { width: 2.9rem; height: 2.9rem; font-size: 1rem; }
main:focus { outline: none; }

/* ── Lo que flota: menús de cristal que nacen de lo que se pulsa ── */
.flota { position: fixed; inset: auto; margin: 0; min-width: 14rem; max-width: calc(100vw - 1.5rem); padding: 0.4rem; border: 0; border-radius: 18px; background: var(--cristal-grueso); -webkit-backdrop-filter: blur(44px) saturate(190%); backdrop-filter: blur(44px) saturate(190%); box-shadow: var(--sombra-flota); color: var(--tinta); opacity: 0; transform: scale(0.9); transform-origin: var(--origen, top right); transition: opacity 0.16s ease-out, transform 0.36s var(--muelle), display 0.36s allow-discrete, overlay 0.36s allow-discrete; }
.flota:popover-open { opacity: 1; transform: scale(1); }
@starting-style { .flota:popover-open { opacity: 0; transform: scale(0.9); } }
.flota::backdrop { background: transparent; }
.flota-accion { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.55rem 0.7rem; border: 0; border-radius: 11px; background: none; color: inherit; font-size: 0.9375rem; text-align: left; transition: background-color 0.12s ease-out; }
.flota-accion:hover, .flota-accion:focus-visible { background: var(--relleno); outline: none; }
.flota-accion:active { background: var(--relleno-fuerte); }
.flota-accion .icono { width: 1.15rem; height: 1.15rem; color: var(--tinta-2); }
.flota-accion--peligro, .flota-accion--peligro .icono { color: var(--rojo); }
.flota hr { height: 0.5px; margin: 0.35rem 0.5rem; border: 0; background: var(--raya-fuerte); }
.flota-pregunta { padding: 0.6rem 0.75rem 0.4rem; font-size: 0.9375rem; font-weight: 600; }
.flota-pregunta span { display: block; margin-top: 0.15rem; color: var(--tinta-2); font-size: 0.8125rem; font-weight: 400; }
.cuenta-menu { width: 17.5rem; padding: 0.5rem; }
.cuenta-quien { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.6rem 0.8rem; }
.cuenta-quien strong { display: block; font-size: 1.0625rem; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.cuenta-quien span span, .cuenta-quien div > span { color: var(--tinta-2); font-size: 0.8125rem; overflow-wrap: anywhere; }
.cuenta-espacio { margin: 0 0.6rem 0.6rem; padding: 0.8rem 0.9rem; border-radius: 13px; background: var(--relleno); font-size: 0.8125rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.medidor { height: 0.4rem; margin-bottom: 0.55rem; border-radius: 999px; background: var(--relleno-fuerte); overflow: hidden; }
.medidor i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #40c8ff, var(--azul)); transition: width 0.9s var(--muelle); }

/* Avisos: una cápsula que sube desde abajo */
.avisos { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 60; translate: -50% 0; display: grid; justify-items: center; gap: 0.5rem; width: max-content; max-width: calc(100vw - 2rem); pointer-events: none; }
.aviso { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--cristal-grueso); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); box-shadow: var(--sombra-flota); font-weight: 500; text-wrap: balance; animation: subir 0.5s var(--muelle) both; }
.aviso--mal { color: var(--rojo); }
.aviso { pointer-events: auto; }
.aviso-accion { margin: -0.2rem -0.5rem -0.2rem 0.3rem; padding: 0.3rem 0.8rem; border: 0; border-radius: 999px; background: var(--azul-suave); color: var(--azul); font: inherit; font-weight: 650; }
.aviso-accion:hover { background: color-mix(in srgb, var(--azul) 22%, transparent); }
.aviso .icono { width: 1.1rem; height: 1.1rem; color: var(--verde); stroke-width: 2.2; }
.aviso.fuera { opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 0.25s ease-in, transform 0.25s ease-in; }
@keyframes subir { from { opacity: 0; transform: translateY(18px) scale(0.94); } }

/* Subidas: un panel que acompaña mientras se sube */
.subidas { position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 40; width: min(21rem, calc(100vw - 2rem)); max-height: 60vh; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 20px; background: var(--cristal-grueso); -webkit-backdrop-filter: blur(44px) saturate(190%); backdrop-filter: blur(44px) saturate(190%); box-shadow: var(--sombra-flota); animation: subir 0.5s var(--muelle) both; }
.subidas-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 0.6rem 0.6rem 1.1rem; font-weight: 650; letter-spacing: -0.01em; }
.subidas ul { overflow-y: auto; padding: 0 0.5rem 0.6rem; }
.subida { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.1rem 0.75rem; padding: 0.5rem 0.6rem; border-radius: 11px; }
.subida .nombre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subida .estado { grid-column: 1; font-size: 0.8125rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.subida .estado--mal { color: var(--rojo); }
.subida .anillo { grid-row: 1 / span 2; grid-column: 2; width: 1.75rem; height: 1.75rem; rotate: -90deg; }
.subida .anillo circle { fill: none; stroke-width: 3; }
.subida .anillo .pista { stroke: var(--relleno-fuerte); }
.subida .anillo .hecho { stroke: var(--azul); stroke-linecap: round; transition: stroke-dashoffset 0.3s ease-out, stroke 0.3s ease-out; }
.subida.bien .anillo .hecho { stroke: var(--verde); }
.subida .boton { grid-row: 1 / span 2; grid-column: 2; height: 1.75rem; padding: 0 0.7rem; font-size: 0.8125rem; }

/* ── Inicio: el cielo, un saludo y baldosas de cristal ── */
.inicio { max-width: 70rem; margin: 0 auto; padding: clamp(1.5rem, 5vh, 3.5rem) 1.5rem 6rem; }
.saludo { color: var(--sobre-cielo); }
.saludo h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.saludo p { margin-top: 0.5rem; color: var(--sobre-cielo-2); font-size: 1.1875rem; letter-spacing: -0.012em; }
.saludo p::first-letter { text-transform: uppercase; }
.baldosas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.15rem; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.baldosa { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.2rem 1.3rem 1.35rem; border: 1px solid var(--cristal-borde); border-radius: 26px; background: var(--cristal); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); box-shadow: var(--sombra-baldosa); color: var(--tinta); transition: transform 0.45s var(--muelle), box-shadow 0.45s ease-out; animation: llegar 0.8s var(--muelle) both; }
.baldosa:nth-child(2) { animation-delay: 0.06s; }
.baldosa:nth-child(3) { animation-delay: 0.12s; }
.baldosa:nth-child(4) { animation-delay: 0.18s; }
a.baldosa:hover { transform: translateY(-3px); box-shadow: 0 34px 70px -30px rgba(4, 20, 70, 0.6), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
a.baldosa:active { transform: scale(0.985); transition-duration: 0.12s; }
.baldosa--fotos { grid-column: span 7; }
.baldosa--archivos { grid-column: span 5; grid-row: span 2; }
.baldosa--videos { grid-column: span 4; }
.baldosa--espacio { grid-column: span 3; }
.baldosa-titulo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; color: inherit; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; }
.baldosa-titulo .glifo { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--azul); color: #fff; }
.baldosa-titulo .glifo .icono { width: 1.1rem; height: 1.1rem; stroke-width: 1.9; }
.baldosa--videos .glifo { background: #ff5a36; }
.baldosa--archivos .glifo { background: #34a7ff; }
.baldosa--espacio .glifo { background: #8e8e93; }
.baldosa-titulo .ir { margin-left: auto; width: 1rem; height: 1rem; color: var(--tinta-2); }
.baldosa-nota { margin-top: 0.85rem; color: var(--tinta-2); font-size: 0.875rem; }
.mosaico { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 2 / 1; border-radius: 15px; overflow: hidden; }
.mosaico > * { position: relative; min-height: 0; background: var(--relleno); overflow: hidden; }
.mosaico > :first-child { grid-row: span 2; }
.mosaico img, .tira img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease-out; }
.mosaico img.puesta, .tira img.puesta { opacity: 1; }
.tira { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; aspect-ratio: 2.2 / 1; border-radius: 15px; overflow: hidden; }
.tira > * { position: relative; background: var(--relleno); overflow: hidden; }
.tira .chapa { position: absolute; left: 0.45rem; bottom: 0.45rem; }
.recientes { display: grid; margin: -0.25rem -0.45rem; }
.recientes li + li { box-shadow: 0 -0.5px 0 var(--raya); }
.recientes a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.55rem 0.45rem; border-radius: 12px; color: inherit; transition: background-color 0.15s ease-out; }
.recientes a:hover { background: var(--relleno); }
.recientes .nombre { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recientes .detalle { display: block; color: var(--tinta-2); font-size: 0.8125rem; }
.recientes .hoja { width: 1.85rem; height: 2.25rem; }
.rosca { position: relative; width: min(100%, 8.5rem); margin: 0.2rem auto 0; }
.rosca svg { display: block; width: 100%; rotate: -90deg; }
.rosca circle { fill: none; stroke-width: 9; }
.rosca .pista { stroke: var(--relleno-fuerte); }
.rosca .lleno { stroke: var(--azul); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--muelle); }
.rosca b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.baldosa--espacio .baldosa-nota { text-align: center; font-variant-numeric: tabular-nums; }
.vacio-baldosa { flex: 1; display: grid; place-content: center; padding: 1.5rem 0.5rem; color: var(--tinta-2); text-align: center; text-wrap: balance; }

/* ── Cabecera de cada pantalla ── */
/* Lo de cada pantalla va en una hoja de cristal sobre el cielo. Sin desenfoque propio: el cielo ya
   es difuso, y una hoja tan alta desenfocando en cada cuadro pesaría sin que se notara. */
.vista { width: calc(100% - 2rem); max-width: 104rem; min-height: calc(100vh - var(--alto-barra) - 1.75rem); min-height: calc(100dvh - var(--alto-barra) - 1.75rem); margin: 0.5rem auto 1.25rem; padding: 1.6rem 1.5rem 3rem; border-radius: 28px; background: color-mix(in srgb, var(--hoja) 93%, transparent); box-shadow: var(--sombra-baldosa), inset 0 0 0 0.5px var(--cristal-borde); }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.35rem; }
.cabecera h1 { font-size: 2.125rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.cabecera .acciones { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.3rem; margin-bottom: 0.2rem; color: var(--tinta-2); font-size: 0.9375rem; }
.migas a { color: var(--azul); }
.migas a:hover { text-decoration: underline; }
.migas .icono { width: 0.8rem; height: 0.8rem; }

/* ── Fotos: de borde a borde, por meses ── */
.mes { position: relative; margin-bottom: 1.6rem; }
.mes h2 { position: sticky; top: calc(var(--alto-barra) + 0.6rem); z-index: 5; display: inline-block; margin: 0 0 0.6rem; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--cristal); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 0 0 0.5px var(--raya); font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; }
.mes h2::first-letter { text-transform: uppercase; }
.mes h2 span { margin-left: 0.4rem; color: var(--tinta-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.rejilla { display: grid; grid-template-columns: repeat(var(--columnas, 6), minmax(0, 1fr)); gap: 2px; border-radius: 14px; overflow: hidden; }
.foto { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--relleno); overflow: hidden; transition: transform 0.12s ease-out; }
.foto:active { transform: scale(0.97); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease-out, transform 0.7s var(--muelle); }
.foto img.puesta { opacity: 1; }
@media (hover: hover) { .foto:hover img.puesta { transform: scale(1.045); } }
.foto:focus-visible { outline-offset: -3px; z-index: 1; }
.foto--sin { display: grid; place-items: center; color: var(--tinta-2); }
.foto--sin .icono { width: 1.6rem; height: 1.6rem; }
.chapa { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.12rem 0.45rem 0.12rem 0.3rem; border-radius: 999px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; }
.chapa .icono { width: 0.8rem; height: 0.8rem; fill: currentColor; stroke: none; }
.foto .chapa { position: absolute; left: 0.4rem; bottom: 0.4rem; }
.centinela { height: 1px; }
.cargando { padding: 1.5rem 0; color: var(--tinta-2); text-align: center; }
.vacio { display: grid; justify-items: center; gap: 0.35rem; padding: clamp(3rem, 12vh, 7rem) 1.5rem; color: var(--tinta-2); text-align: center; }
.vacio .icono, .vacio .carpeta { width: 4.5rem; height: 4.5rem; margin-bottom: 0.75rem; opacity: 0.5; stroke-width: 1.1; }
.vacio strong { color: var(--tinta); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; }
.vacio p { max-width: 26rem; font-size: 1.0625rem; text-wrap: balance; }

/* ── Archivos: en cuadrícula o en lista ── */
.carpeta { display: block; }
.carpeta-detras { fill: var(--carpeta-detras); }
.carpeta-delante { fill: var(--carpeta-delante); }
.hoja { position: relative; display: block; width: 3.6rem; height: 4.4rem; flex: none; }
.hoja svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.14)); }
.hoja-papel { fill: #ffffff; stroke: rgba(0, 0, 0, 0.1); stroke-width: 1; }
.hoja-doblez { fill: #e7e9ee; }
.hoja b { position: absolute; left: 50%; bottom: 17%; translate: -50% 0; padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--tipo, #8e8e93); color: #fff; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }
.recientes .hoja b { font-size: 0.4375rem; padding: 0 0.2rem; bottom: 14%; }
/* Archivos se maneja como un escritorio: a un lado «Nuevo» y las secciones; en el centro, lo que
   hay. Un clic elige (azul), dos abren; lo elegido se arrastra a una carpeta. */
.vista--archivos { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 0 1.75rem; align-items: start; }
.lateral { position: sticky; top: calc(var(--alto-barra) + 1.6rem); display: grid; gap: 1.2rem; }
.nuevo { justify-self: start; height: 2.875rem; padding: 0 1.4rem 0 1.05rem; gap: 0.5rem; font-size: 1rem; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--azul) 80%, transparent); }
.nuevo .icono { width: 1.25rem; height: 1.25rem; stroke-width: 2.1; }
.lateral nav { display: grid; gap: 0.15rem; }
.lateral nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.8rem; border-radius: 12px; color: var(--tinta); font-weight: 500; transition: background-color 0.15s ease-out, color 0.15s ease-out; }
.lateral nav a:hover { background: var(--relleno); }
.lateral nav a[aria-current="page"] { background: var(--azul-suave); color: var(--azul); font-weight: 600; }
.lateral nav a.soltar { background: var(--azul); color: #fff; }
.lateral nav .icono { width: 1.25rem; height: 1.25rem; }
.lateral-espacio { padding: 1rem 0.8rem 0; border-top: 0.5px solid var(--raya-fuerte); color: var(--tinta-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.contenido { min-width: 0; }
.migas a.soltar { border-radius: 6px; background: var(--azul); color: #fff; box-shadow: 0 0 0 4px var(--azul); }
.nota-papelera { margin: -0.6rem 0 1.1rem; color: var(--tinta-2); }
.zona { min-height: 55vh; -webkit-user-select: none; user-select: none; }
.zona [role="listbox"] { outline: none; }

/* La barra de lo elegido: cuántos son y qué se puede hacer con ellos */
/* Lo elegido: una cápsula que aparece sobre los botones de la cabecera. No ocupa sitio en la página
   (cuelga de un ancla sin altura): si al elegir algo la lista bajara, el segundo clic de un doble
   clic caería en otra fila. Al bajar por la lista se queda arriba, a la vista. */
.vista--archivos .cabecera { min-height: 2.875rem; }
.eligiendo .cabecera .acciones { visibility: hidden; }
.eleccion-ancla { position: sticky; top: calc(var(--alto-barra) + 0.6rem + 2.875rem + 1.35rem); z-index: 6; height: 0; }
.eleccion { position: absolute; right: 0; bottom: 1.35rem; display: flex; align-items: center; gap: 0.35rem; max-width: 100%; min-height: 2.875rem; padding: 0.3rem 0.6rem 0.3rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--azul) 13%, var(--hoja)); box-shadow: 0 10px 26px -14px rgba(0, 40, 130, 0.45), inset 0 0 0 0.5px color-mix(in srgb, var(--azul) 35%, transparent); animation: materializar 0.3s var(--muelle) both; }
.eleccion strong { margin-right: 0.6rem; padding: 0 0.6rem 0 0.2rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eleccion-acciones { display: flex; gap: 0.1rem; }
.eleccion .boton-icono:hover { background: color-mix(in srgb, var(--azul) 16%, transparent); }
.boton-icono--peligro { color: var(--rojo); }

.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: 0.35rem 0.6rem; align-content: start; }
.elemento { position: relative; min-width: 0; border-radius: 18px; cursor: default; -webkit-touch-callout: none; transition: background-color 0.15s ease-out, opacity 0.15s ease-out; }
.cuadricula .elemento { padding: 1rem 0.6rem 0.8rem; text-align: center; }
.elemento:hover { background: var(--relleno); }
.elemento.elegido { background: color-mix(in srgb, var(--azul) 15%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--azul) 50%, transparent); }
[role="listbox"]:focus-visible .elemento.enfocado { box-shadow: inset 0 0 0 2px var(--azul); }
.elemento.soltar { background: var(--azul); color: #fff; }
.elemento.soltar .detalle, .elemento.soltar .col { color: rgba(255, 255, 255, 0.82); }
.elemento.llevado { opacity: 0.4; }
.elemento .figura { display: grid; place-items: center; height: 5.4rem; margin-bottom: 0.6rem; pointer-events: none; }
.elemento .figura .carpeta { width: 5.6rem; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 70, 170, 0.22)); }
.elemento .figura img { display: block; max-width: 7rem; max-height: 5.4rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.12); opacity: 0; transition: opacity 0.35s ease-out; }
.elemento .figura img.puesta { opacity: 1; }
.elemento .nombre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.875rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.elemento .detalle { display: block; margin-top: 0.15rem; color: var(--tinta-2); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cuadricula .col { display: none; }
.elemento .estrella { position: absolute; top: 0.55rem; left: 0.6rem; color: #f5a623; }
.elemento .estrella .icono { display: block; width: 1rem; height: 1rem; }
.elemento .mas { position: absolute; top: 0.4rem; right: 0.4rem; width: 1.75rem; height: 1.75rem; background: var(--cristal-grueso); box-shadow: 0 0 0 0.5px var(--raya); opacity: 0; transition: opacity 0.18s ease-out, transform 0.12s ease-out, background-color 0.2s ease-out; }
.elemento:hover .mas, .elemento.elegido .mas, .elemento .mas:focus-visible { opacity: 1; }
@media (hover: none) { .elemento .mas { opacity: 1; background: none; box-shadow: none; } }
.elemento .mas .icono { width: 1.1rem; height: 1.1rem; }
.elemento input.renombre { width: 100%; padding: 0.2rem 0.4rem; border: 0; border-radius: 7px; background: var(--hoja); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--azul), 0 0 0 3px color-mix(in srgb, var(--azul) 20%, transparent); font-size: 0.875rem; font-weight: 500; text-align: center; outline: none; -webkit-user-select: text; user-select: text; }

/* En lista: columnas, con su cabecera para ordenar */
.listado-caja { --columnas: 2.4rem minmax(0, 1fr) 9.5rem 6rem 2rem; border-radius: 18px; background: var(--hoja); box-shadow: 0 0 0 0.5px var(--raya); overflow: hidden; }
.listado-caja--donde { --columnas: 2.4rem minmax(0, 1.5fr) minmax(0, 1fr) 9.5rem 6rem 2rem; }
.listado-cabeza, .listado .elemento { display: grid; grid-template-columns: var(--columnas); align-items: center; gap: 0.85rem; padding: 0.45rem 0.55rem 0.45rem 0.9rem; }
.listado-cabeza { padding-block: 0.55rem; box-shadow: 0 0.5px 0 var(--raya-fuerte); color: var(--tinta-2); font-size: 0.8125rem; font-weight: 600; }
.listado-cabeza button { display: inline-flex; align-items: center; gap: 0.25rem; justify-self: start; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.listado-cabeza button:hover, .listado-cabeza button[aria-sort] { color: var(--tinta); }
.listado-cabeza .icono { width: 0.85rem; height: 0.85rem; stroke-width: 2.2; }
.listado .elemento { border-radius: 0; }
.listado .elemento + .elemento { box-shadow: 0 -0.5px 0 var(--raya); }
.listado .elemento.elegido { box-shadow: 0 -0.5px 0 var(--raya); }
.listado .elemento .figura { height: 2.4rem; margin: 0; }
.listado .elemento .figura .carpeta { width: 2.3rem; filter: none; }
.listado .elemento .figura img { max-width: 2.4rem; max-height: 2.4rem; border-radius: 5px; }
.listado .elemento .hoja { width: 1.85rem; height: 2.25rem; }
.listado .elemento .hoja b { font-size: 0.4375rem; padding: 0 0.2rem; bottom: 14%; }
.listado .elemento .nombre { display: block; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9375rem; }
.listado .elemento .detalle { display: none; }
.listado .col { min-width: 0; color: var(--tinta-2); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* En lista la estrella va en la esquina del dibujo: fuera de la rejilla, para no correr las columnas */
.listado .elemento .estrella { top: 0.3rem; left: 0.4rem; }
.listado .elemento .estrella .icono { width: 0.8rem; height: 0.8rem; }
.listado .elemento .mas { position: static; width: 2rem; height: 2rem; opacity: 1; background: none; box-shadow: none; }
.listado .elemento input.renombre { text-align: left; font-size: 0.9375rem; }
.listado .elemento--nueva { grid-template-columns: 2.4rem minmax(0, 1fr); }

/* El recuadro que elige al arrastrar, y lo que se lleva al arrastrar archivos */
.lazo { position: fixed; z-index: 30; border: 1px solid var(--azul); border-radius: 4px; background: color-mix(in srgb, var(--azul) 14%, transparent); pointer-events: none; }
.fantasma { position: fixed; top: -200px; left: -200px; max-width: 16rem; padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--azul); color: #fff; font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La ventana para elegir a dónde se mueve algo */
.dialogo { width: min(27rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100dvh - 4rem)); padding: 1.4rem 1.4rem 1.2rem; border: 0; border-radius: 24px; background: var(--cristal-grueso); -webkit-backdrop-filter: blur(44px) saturate(190%); backdrop-filter: blur(44px) saturate(190%); box-shadow: var(--sombra-flota); color: var(--tinta); }
.dialogo[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0.6rem; animation: materializar 0.3s var(--muelle) both; }
.dialogo::backdrop { background: rgba(0, 12, 40, 0.3); }
.dialogo h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dialogo .migas { margin: 0; }
.dialogo .migas .enlace { padding: 0; border: 0; background: none; color: var(--azul); font: inherit; }
.dialogo-lista { min-height: 9rem; margin: 0.2rem -0.5rem; padding: 0; list-style: none; overflow-y: auto; }
.dialogo-lista button { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; }
.dialogo-lista button:hover { background: var(--relleno); }
.dialogo-lista .carpeta { width: 2.1rem; height: 1.75rem; }
.dialogo-lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogo-lista .icono { width: 0.9rem; height: 0.9rem; color: var(--tinta-2); }
.dialogo-nada { padding: 2.2rem 1rem; color: var(--tinta-2); text-align: center; }
.dialogo-pie { display: flex; justify-content: flex-end; gap: 0.6rem; padding-top: 0.4rem; }

.esqueleto { animation: latir 1.4s ease-in-out infinite alternate; }
.esqueleto .elemento { height: 9.2rem; background: var(--relleno); }
@keyframes latir { to { opacity: 0.45; } }
.soltar-aqui { position: fixed; inset: calc(var(--alto-barra) + 0.75rem) 0.75rem 0.75rem; z-index: 30; display: grid; place-items: center; border-radius: 28px; background: color-mix(in srgb, var(--azul) 16%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 2.5px var(--azul); pointer-events: none; animation: aparecer 0.25s ease-out both; }
.soltar-aqui span { padding: 0.8rem 1.4rem; border-radius: 999px; background: var(--azul); color: #fff; font-size: 1.0625rem; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0, 60, 180, 0.6); }
@keyframes aparecer { from { opacity: 0; } }

/* ── El visor: la foto llega desde su miniatura y vuelve a ella ── */
.visor { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: #fff; overflow: hidden; }
.visor::backdrop { background: none; }
.visor-fondo { position: absolute; inset: 0; background: #000; opacity: 0; }
.visor-escena { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 4.75rem 4.5rem 1.75rem; touch-action: none; }
.visor-escena img, .visor-escena video { display: block; max-width: 100%; max-height: 100%; border-radius: 6px; will-change: transform; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.visor-escena video { width: 100%; height: 100%; background: #000; }
.visor-escena .nota { max-width: 28rem; color: #d1d1d6; font-size: 1.0625rem; text-align: center; text-wrap: balance; }
.visor-barra { position: absolute; top: 0.9rem; left: 0.9rem; right: 0.9rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; transition: opacity 0.35s ease-out; }
.visor-titulo { min-width: 0; padding: 0.4rem 1.1rem; border-radius: 999px; background: rgba(40, 40, 44, 0.62); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); text-align: center; line-height: 1.25; }
.visor-titulo strong { display: block; max-width: min(46vw, 30rem); font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-titulo span { color: #c7c7cc; font-size: 0.75rem; }
.visor-botones { display: flex; justify-content: flex-end; gap: 0.5rem; }
.visor-boton, .visor-paso { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%; background: rgba(40, 40, 44, 0.62); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); color: #fff; transition: background-color 0.2s ease-out, transform 0.12s ease-out, opacity 0.35s ease-out; }
.visor-boton:hover, .visor-paso:hover { background: rgba(72, 72, 78, 0.78); }
.visor-boton:active, .visor-paso:active { transform: scale(0.92); }
.visor-boton[aria-expanded="true"] { background: #fff; color: #000; }
.visor :focus-visible { outline-color: rgba(255, 255, 255, 0.85); }
.visor-paso { position: absolute; top: 50%; translate: 0 -50%; }
.visor-paso--antes { left: 0.9rem; }
.visor-paso--despues { right: 0.9rem; }
.visor-paso[disabled] { opacity: 0; pointer-events: none; }
.visor.reposo .visor-barra, .visor.reposo .visor-paso { opacity: 0; }
.visor-ficha, .visor-confirmar { position: absolute; top: 4.5rem; right: 0.9rem; border-radius: 20px; background: rgba(44, 44, 48, 0.78); -webkit-backdrop-filter: blur(44px) saturate(190%); backdrop-filter: blur(44px) saturate(190%); box-shadow: 0 28px 70px -18px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.14); animation: materializar 0.4s var(--muelle) both; transform-origin: top right; }
@keyframes materializar { from { opacity: 0; transform: scale(0.92); filter: blur(6px); } }
.visor-ficha { z-index: 2; width: min(20rem, calc(100vw - 1.8rem)); padding: 1.1rem 1.25rem 1.3rem; }
.visor-ficha h2 { margin-bottom: 0.9rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; }
.visor-ficha dl { display: grid; gap: 0.75rem; }
.visor-ficha dt { color: #aeaeb2; font-size: 0.75rem; }
.visor-ficha dd { font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.visor-ficha a { color: #64b5ff; }
.visor-confirmar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: min(17.5rem, calc(100vw - 1.8rem)); padding: 1rem; }
.visor-confirmar p { grid-column: 1 / -1; margin-bottom: 0.35rem; font-weight: 600; }
.visor-confirmar p span { display: block; margin-top: 0.15rem; color: #aeaeb2; font-size: 0.8125rem; font-weight: 400; }
.visor-confirmar .boton { background: rgba(120, 120, 128, 0.36); color: #fff; }
.visor-confirmar .boton--peligro { background: #ff453a; color: #fff; font-weight: 600; }

/* ── Tableta y móvil ── */
@media (max-width: 47.99rem) {
    .barra { grid-template-columns: 1fr auto; padding: 0 0.9rem; }
    .barra-marca span { font-size: 1.125rem; }
    .pestanas { position: fixed; left: 50%; bottom: calc(0.7rem + env(safe-area-inset-bottom)); z-index: 20; translate: -50% 0; padding: 4px; background: var(--cristal); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--sombra-flota); }
    .pestanas a { flex-direction: column; gap: 0.1rem; min-width: 4.6rem; padding: 0.4rem 0.9rem; font-size: 0.6875rem; }
    .pestanas .icono { display: block; width: 1.4rem; height: 1.4rem; }
    .pestanas-luz { top: 4px; bottom: 4px; background: var(--relleno-fuerte); box-shadow: none; }
    .buscar input { width: 2.125rem; padding: 0; color: transparent; }
    .buscar input::placeholder { color: transparent; }
    .buscar input:focus { width: min(15rem, calc(100vw - 9.5rem)); padding: 0 0.8rem 0 2.05rem; color: inherit; }
    .buscar input:focus::placeholder { color: var(--tinta-2); }
    .vista { width: calc(100% - 0.8rem); min-height: calc(100dvh - var(--alto-barra) - 0.65rem); margin: 0.25rem auto 0.4rem; padding: 1.1rem 0.9rem 6.5rem; border-radius: 24px; }
    .vista--fotos { padding-inline: 0; }
    .vista--fotos .cabecera, .vista--fotos .mes h2 { margin-inline: 0.9rem; }
    .vista--fotos .rejilla { border-radius: 0; }
    .cabecera h1 { font-size: 1.875rem; }
    .inicio { padding: 1rem 0.9rem 7.5rem; }
    .baldosas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem; }
    .baldosa { border-radius: 22px; padding: 1.05rem 1.05rem 1.15rem; }
    .baldosa--fotos, .baldosa--archivos { grid-column: 1 / -1; grid-row: auto; }
    .baldosa--videos, .baldosa--espacio { grid-column: span 3; }
    .vista--archivos { display: block; }
    .lateral { position: static; display: block; margin-bottom: 1rem; }
    .lateral nav { display: flex; gap: 0.4rem; margin-inline: -0.9rem; padding: 0.1rem 0.9rem; overflow-x: auto; scrollbar-width: none; }
    .lateral nav a { flex: none; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--relleno); font-size: 0.875rem; white-space: nowrap; }
    .lateral nav .icono { width: 1.05rem; height: 1.05rem; }
    .lateral-espacio { display: none; }
    .nuevo { position: fixed; right: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); z-index: 19; width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 50%; box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--azul) 85%, transparent), 0 2px 6px rgba(0, 0, 0, 0.2); }
    .nuevo span { display: none; }
    .nuevo .icono { width: 1.6rem; height: 1.6rem; }
    .eleccion strong span { display: none; }
    .eleccion strong { margin-right: 0.2rem; padding-right: 0.5rem; font-size: 1.0625rem; }
    .eleccion .boton-icono { width: 2.5rem; height: 2.5rem; }
    .listado-caja, .listado-caja--donde { --columnas: 2.4rem minmax(0, 1fr) 2.25rem; }
    .listado-cabeza, .listado .col { display: none; }
    .listado .elemento { padding-block: 0.55rem; row-gap: 0; }
    .listado .elemento .figura { grid-row: span 2; }
    .listado .elemento .detalle { display: block; grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .listado .elemento .mas { grid-column: 3; grid-row: 1 / span 2; }
    .cuadricula { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: 0.2rem 0.3rem; }
    .elemento .figura { height: 4.6rem; }
    .elemento .figura .carpeta { width: 4.7rem; }
    .elemento .figura img { max-width: 5.6rem; max-height: 4.6rem; }
    .subidas { right: 0.75rem; bottom: calc(9.8rem + env(safe-area-inset-bottom)); }
    .avisos { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
    .visor-escena { padding: 4.5rem 0 5rem; }
    .visor-escena img, .visor-escena video { border-radius: 0; }
    .visor-titulo strong { max-width: 38vw; }
    .visor-paso { display: none; }
    .visor-ficha { top: auto; right: 0.6rem; left: 0.6rem; bottom: calc(0.6rem + env(safe-area-inset-bottom)); width: auto; transform-origin: bottom center; }
}
@media (max-width: 56rem) {
    /* en estrecho, el sol alto y la luna suben a la esquina: si no, se meten en el lema */
    :root, :root[data-cielo="dia"], :root[data-cielo="noche"] { --astro-x: 86%; --astro-y: 7%; }
    .entrada { padding-inline: 1.1rem; }
    .entrada-escena { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: min(100%, 27rem); padding-top: 0.5rem; }
    .entrada-relato { display: contents; }
    .entrada-marca { font-size: 1.25rem; }
    .entrada-marca img { height: 2.125rem; }
    .entrada-lema { margin-top: 1.5rem; font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
    .entrada-bajada { margin: 0.9rem 0 1.6rem; font-size: 1.0625rem; }
    .entrada-lado { order: 4; }
    .entrada-apps ul { gap: 0.2rem 0.1rem; }
    .entrada-apps a { gap: 0.3rem; padding-inline: 0.4rem; }   /* que las cuatro quepan en una línea en un móvil estrecho */
    .entrada-cristal { padding: 1.9rem 1.4rem 1.5rem; border-radius: 26px; }
    .entrada-que { order: 5; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.5rem; }
    .entrada-que li { flex-direction: column; gap: 0.45rem; text-align: center; }
    .entrada-que strong { font-size: 0.8125rem; font-weight: 600; }
    .entrada-que li > span:last-child > span { display: none; }
}
@media (min-width: 48rem) and (max-width: 70rem) {
    .vista--archivos { grid-template-columns: 11rem minmax(0, 1fr); gap: 0 1.1rem; }
    .baldosa--fotos, .baldosa--archivos { grid-column: 1 / -1; grid-row: auto; }
    .baldosa--videos, .baldosa--espacio { grid-column: span 6; }
}

/* ── El mapa: una hoja más sobre el cielo, con sus mandos de cristal encima ── */
.vista--mapa { position: fixed; inset: calc(var(--alto-barra) + 0.5rem) 1rem 1rem; z-index: 1; border-radius: 28px; background: var(--mapa-fondo); box-shadow: var(--sombra-baldosa); overflow: hidden; }
/* con dos clases, para que mande sobre la hoja de estilos de la biblioteca (que lo deja sin altura) */
.vista--mapa .mapa-lienzo { position: absolute; inset: 0; background: var(--mapa-fondo); }
.mapa-lienzo.maplibregl-map { font: inherit; }
.mapa-lienzo .maplibregl-canvas { outline: none; }
.mapa-rotulo, .mapa-botones, .mapa-zona, .mapa-aviso { background: var(--cristal-grueso); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 12px 32px -14px rgba(0, 10, 40, 0.4), 0 0 0 0.5px var(--raya-fuerte); }
.mapa-zona[hidden], .mapa-aviso[hidden] { display: none; }
.mapa-rotulo { position: absolute; top: 0.9rem; left: 0.9rem; display: flex; align-items: baseline; gap: 0.65rem; max-width: calc(100% - 1.8rem); padding: 0.55rem 1.05rem 0.6rem; border-radius: 999px; }
.mapa-rotulo h1 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.mapa-rotulo span { min-width: 0; color: var(--tinta-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-rotulo .enlace { padding: 0; border: 0; background: none; color: var(--azul); font-weight: 600; }
.mapa-controles { position: absolute; right: 0.9rem; bottom: 1.1rem; display: grid; gap: 0.6rem; }
.mapa-botones { display: grid; border-radius: 14px; overflow: hidden; }
.mapa-botones button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--tinta); transition: background-color 0.2s ease-out; }
.mapa-botones button + button { box-shadow: 0 -0.5px 0 var(--raya-fuerte); }
.mapa-botones button:hover { background: var(--relleno); }
.mapa-botones button:active { background: var(--relleno-fuerte); }
.mapa-botones button[disabled] { opacity: 0.35; pointer-events: none; }
.mapa-botones .icono { width: 1.25rem; height: 1.25rem; }
.mapa-zona { position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.3rem; height: 2.75rem; padding: 0 0.85rem 0 1.2rem; border: 0; border-radius: 999px; color: var(--tinta); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform 0.2s var(--muelle); }
.mapa-zona:active { transform: scale(0.96); }
.mapa-zona .icono { width: 1rem; height: 1rem; color: var(--tinta-2); }
.mapa-firma { position: absolute; left: 1.1rem; bottom: 0.5rem; color: var(--tinta-2); font-size: 0.6875rem; text-shadow: 0 0 3px var(--mapa-fondo), 0 0 3px var(--mapa-fondo), 0 0 3px var(--mapa-fondo); }
.mapa-firma a { color: inherit; }
.mapa-firma a:hover { text-decoration: underline; }
.mapa-aviso { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 0.35rem; width: min(24rem, calc(100% - 2.5rem)); padding: 1.75rem 1.5rem 1.6rem; border-radius: 26px; text-align: center; text-wrap: balance; }
.mapa-aviso .icono { width: 3rem; height: 3rem; margin-bottom: 0.4rem; color: var(--azul); stroke-width: 1.3; }
.mapa-aviso strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.mapa-aviso p { color: var(--tinta-2); }
.mapa-aviso .boton { margin-top: 0.75rem; }

/* Cada foto, o cada montón de fotos, es una estampa con su marco blanco clavada en su sitio */
.chincheta { cursor: pointer; }
.chincheta:hover, .chincheta:focus-within { z-index: 1000 !important; }
.chincheta-cuerpo { position: relative; display: block; width: 3.75rem; height: 3.75rem; padding: 0; border: 0; border-radius: 16px; background: none; isolation: isolate; animation: chincheta-llega 0.4s var(--muelle) backwards; transition: transform 0.22s var(--muelle); -webkit-tap-highlight-color: transparent; }
.chincheta-cuerpo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: 0 8px 18px -6px rgba(0, 10, 40, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.14); }
.chincheta-cuerpo--varias::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: #fff; box-shadow: 0 4px 10px -4px rgba(0, 10, 40, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.14); transform: rotate(8deg) translate(2px, -1px); }
.chincheta-foto { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 13px; background: #e9e9ee; color: #8e8e93; overflow: hidden; }
.chincheta-foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease-out; }
.chincheta-foto img.puesta { opacity: 1; }
.chincheta-foto .icono { width: 1.5rem; height: 1.5rem; }
.chincheta-cuerpo b { position: absolute; top: -0.5rem; right: -0.5rem; min-width: 1.5rem; height: 1.5rem; padding: 0 0.42rem; border-radius: 999px; background: var(--azul); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 10, 40, 0.3); }
@media (hover: hover) { .chincheta-cuerpo:hover { transform: scale(1.09); } }
.chincheta-cuerpo:active { transform: scale(0.94); }
.chincheta-cuerpo:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
@keyframes chincheta-llega { from { opacity: 0; transform: scale(0.45); } }
@media (max-width: 47.99rem) {
    .pestanas a { min-width: 4.3rem; padding-inline: 0.6rem; }
    .vista--mapa { inset: calc(var(--alto-barra) + 0.25rem) 0.4rem 0.4rem; border-radius: 24px; }
    .mapa-rotulo { top: 0.7rem; left: 0.7rem; max-width: calc(100% - 1.4rem); }
    .mapa-controles { right: 0.7rem; bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
    .mapa-zona { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
    .mapa-firma { left: 0.9rem; bottom: calc(4.1rem + env(safe-area-inset-bottom)); }
}

/* ── Quien pide menos movimiento, menos transparencia o más contraste ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
    :root { --cristal: var(--hoja); --cristal-grueso: var(--hoja); }
    * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
    :root { --cristal: var(--hoja); --cristal-grueso: var(--hoja); --raya: var(--raya-fuerte); --tinta-2: var(--tinta); }
}

/* Navegadores sin piezas flotantes propias (popover): se abren y cierran con un atributo */
.flota:not(:popover-open):not([open]) { display: none; }
.flota[open] { display: block; opacity: 1; transform: none; z-index: 70; }