/* =========================================================================
   VV-APP · CAPA DE APLICACIÓN MÓVIL (PWA SHELL)
   -------------------------------------------------------------------------
   Todo lo que convierte la guía en algo que se usa "en el terreno":
   dock flotante, bottom sheets, ficha de objetivo a pantalla completa y
   avisos flotantes.

   Reglas que se respetan aquí y NO se deben romper:
   · Targets >= 48px (WCAG 2.5.8 AAA; el mínimo AA es 24px).
   · Contraste AA en todo texto: se usan los tokens del tema, nunca colores
     fijos, para que claro y oscuro funcionen sin duplicar reglas.
   · CLS 0: el dock es `position: fixed` y el body reserva su hueco con
     padding, así que nada se recoloca cuando aparece.
   · prefers-reduced-motion: todas las transiciones se anulan al final.
   ========================================================================= */

:root {
    /* Alto real del dock + hueco de seguridad del iPhone. Se consume desde
       cualquier página para separar contenido del dock sin recalcularlo. */
    --vv-dock-h: 64px;
    --vv-dock-gap: 10px;
    --vv-safe-b: env(safe-area-inset-bottom, 0px);
    --vv-dock-space: calc(var(--vv-dock-h) + var(--vv-dock-gap) * 2 + var(--vv-safe-b));

    /* Cristal del dock y de las sheets. color-mix mantiene el tono del tema
       activo en vez de clavar un rgba() que en claro se ve sucio. */
    --vv-glass: color-mix(in srgb, var(--color-surface) 88%, transparent);
    --vv-glass-solid: var(--color-surface);
    --vv-hairline: color-mix(in srgb, var(--color-border) 90%, transparent);
    --vv-shadow: 0 8px 32px rgba(0, 0, 0, .38), 0 2px 8px rgba(0, 0, 0, .22);

    /* Texto/icono SOBRE el naranja de marca. Blanco sobre #FF5E14 da 2,9:1 y
       suspende AA (hace falta 4,5:1 en texto pequeno y 3:1 en iconos); este
       casi-negro da 6,9:1 y ademas se lee mejor en exterior con sol. */
    --vv-on-primary: #14181C;

    --vv-radius: 20px;
    --vv-radius-sm: 12px;
    --vv-ease: cubic-bezier(.22, 1, .36, 1);
    --vv-z-scrim: 99990;
    --vv-z-obj: 99993;
    --vv-z-sheet: 99995;
    --vv-z-dock: 99998;
    --vv-z-toast: 100000;
}

body.light-theme {
    --vv-shadow: 0 8px 32px rgba(31, 41, 55, .16), 0 2px 8px rgba(31, 41, 55, .08);
}

/* [hidden] es la única forma de ocultar estas capas desde JS, pero la regla del
   navegador (`[hidden]{display:none}`) tiene menos peso que cualquier clase que
   declare `display`. Sin esto, la ficha y las sheets se pintarían siempre. */
.vv-obj[hidden],
.vv-sheet[hidden],
.vv-dock__list[hidden],
.vv-obj__coords[hidden],
.vv-tile[hidden] { display: none !important; }

/* =========================================================================
   1 · DOCK FLOTANTE
   Antes era una barra pegada al borde inferior a todo lo ancho. Ahora es una
   píldora despegada: se lee como capa de app, deja ver el contenido bajo ella
   y no compite con la barra del navegador.
   ========================================================================= */

.vv-dock {
    position: fixed;
    left: var(--vv-dock-gap);
    right: var(--vv-dock-gap);
    bottom: calc(var(--vv-dock-gap) + var(--vv-safe-b));
    z-index: var(--vv-z-dock);

    display: none;                      /* Sólo móvil/tablet, ver media query */
    height: var(--vv-dock-h);
    padding: 0 6px;

    background: var(--vv-glass);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--vv-hairline);
    border-radius: var(--vv-radius);
    box-shadow: var(--vv-shadow);

    transition: transform .32s var(--vv-ease), opacity .2s linear;
    will-change: transform;
}

/* Se esconde al bajar (más pantalla para leer) y vuelve al subir el dedo.
   Nunca se esconde con una sheet o la ficha abiertas: ahí es la única salida. */
.vv-dock.is-hidden { transform: translateY(calc(100% + var(--vv-dock-gap) + var(--vv-safe-b))); }

.vv-dock__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vv-dock__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    width: 100%;
    height: 100%;
    min-height: 48px;

    background: none;
    border: 0;
    border-radius: 14px;
    padding: 4px 2px;

    color: var(--color-text-secondary);
    font-family: var(--font-subheading, sans-serif);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, transform .18s var(--vv-ease);
}

.vv-dock__item i { font-size: 1.15rem; line-height: 1; }

.vv-dock__label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.vv-dock__item:hover,
.vv-dock__item:focus-visible { color: var(--color-primary); }

.vv-dock__item:active { transform: scale(.92); }

/* Estado activo: no basta con el color (WCAG 1.4.1 "uso del color"), así que
   además se pinta un punto bajo el icono. */
.vv-dock__item[aria-expanded="true"],
.vv-dock__item.is-active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.vv-dock__item.is-active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Foco visible con anillo: se ve sobre cristal claro y oscuro. */
.vv-dock__item:focus-visible,
.vv-sheet__close:focus-visible,
.vv-obj__back:focus-visible,
.vv-obj-act:focus-visible,
.vv-sheet-tab:focus-visible,
.vv-route-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Botón central elevado (FAB) --- */
.vv-dock__item--fab {
    justify-content: flex-start;
    padding-top: 0;
}

.vv-dock__fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin-top: -22px;
    border-radius: 50%;

    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-hover, #E04F0F));
    color: var(--vv-on-primary);
    font-size: 1.35rem;
    border: 4px solid var(--vv-glass-solid);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 45%, transparent);
    transition: transform .2s var(--vv-ease);
}

.vv-dock__item--fab .vv-dock__label { margin-top: 2px; color: var(--color-text-secondary); }
.vv-dock__item--fab:hover .vv-dock__fab,
.vv-dock__item--fab:focus-visible .vv-dock__fab { transform: scale(1.06); }
.vv-dock__item--fab:active .vv-dock__fab { transform: scale(.94); }

/* --- Contador del plan --- */
.vv-dock__badge {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;

    background: var(--color-primary);
    color: var(--vv-on-primary);
    font-family: var(--font-tactical, sans-serif);
    font-size: .625rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    /* PlanDeFuga.updateUI() pone display:flex en linea al actualizar el numero. */
    align-items: center;
    justify-content: center;
}

.vv-dock__badge[hidden] { display: none; }

/* El dock sustituye a la barra vieja allí donde se usa. */
body.vv-app-on .mobile-bottom-kit { display: none !important; }

@media (max-width: 1023px) {
    .vv-dock { display: block; }

    /* Hueco reservado de una sola vez: sin esto el último bloque de la página
       queda debajo del dock y no hay forma de leerlo. */
    body.vv-app-on { padding-bottom: calc(var(--vv-dock-space) + 8px) !important; }
}

/* =========================================================================
   2 · SCRIM Y BOTTOM SHEETS
   ========================================================================= */

.vv-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--vv-z-scrim);
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .28s var(--vv-ease);
}

.vv-scrim.is-open { opacity: 1; }

.vv-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--vv-z-sheet);

    display: flex;
    flex-direction: column;
    max-height: 86dvh;

    background: var(--vv-glass-solid);
    border-top: 1px solid var(--vv-hairline);
    border-radius: var(--vv-radius) var(--vv-radius) 0 0;
    box-shadow: var(--vv-shadow);

    transform: translateY(100%);
    transition: transform .34s var(--vv-ease);
}

.vv-sheet.is-open { transform: translateY(0); }

.vv-sheet__grabber {
    flex: 0 0 auto;
    width: 40px; height: 4px;
    margin: 8px auto 2px;
    border-radius: 2px;
    background: var(--color-border);
}

.vv-sheet__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--vv-hairline);
}

.vv-sheet__title {
    margin: 0;
    font-family: var(--font-tactical, sans-serif);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.vv-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid var(--vv-hairline);
    border-radius: 50%;
    color: var(--color-text-primary);
    font-size: 1.1rem;
    cursor: pointer;
}

.vv-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 14px calc(var(--vv-dock-space) + 12px);
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.vv-sheet__body::-webkit-scrollbar { width: 6px; }
.vv-sheet__body::-webkit-scrollbar-track { background: transparent; }
.vv-sheet__body::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }

/* --- Pestañas de la sheet de INTEL --- */
.vv-sheet__tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 14px;
    border-bottom: 1px solid var(--vv-hairline);
}

.vv-sheet__tabs::-webkit-scrollbar { display: none; }

.vv-sheet-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--vv-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-subheading, sans-serif);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: all .18s ease;
}

.vv-sheet-tab[aria-selected="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--vv-on-primary);
}

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

/* --- Hoja de ruta (lista lineal de objetivos) --- */
.vv-route { margin: 0; padding: 0; list-style: none; }

.vv-route-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--vv-hairline);
    border-radius: 10px;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
}

.vv-route-item:last-child { border-bottom: 0; }
.vv-route-item:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.vv-route-item.is-current { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }

.vv-route-num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    color: var(--color-primary);
    font-family: var(--font-tactical, sans-serif);
    font-size: .8rem;
    font-weight: 700;
}

.vv-route-body { flex: 1 1 auto; min-width: 0; }

.vv-route-name {
    display: block;
    font-family: var(--font-subheading, sans-serif);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-primary);
}

.vv-route-meta {
    display: block;
    margin-top: 2px;
    font-size: .72rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vv-route-item > .fa-chevron-right { flex: 0 0 auto; color: var(--color-text-secondary); font-size: .8rem; }

/* --- Bloques genéricos dentro de las sheets --- */
.vv-list { margin: 0; padding: 0; list-style: none; }

.vv-list li {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vv-hairline);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.vv-list li:last-child { border-bottom: 0; }
.vv-list li > i { flex: 0 0 auto; margin-top: 3px; color: var(--color-primary); }
.vv-list strong { color: var(--color-text-primary); }
.vv-list a { color: var(--color-primary); text-decoration: underline; }

.vv-list--warn li > i { color: #FFB020; }

.vv-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vv-hairline);
    font-size: .85rem;
}

.vv-kv:last-child { border-bottom: 0; }
.vv-kv__k { color: var(--color-text-secondary); }
.vv-kv__v { color: var(--color-text-primary); font-weight: 600; text-align: right; }

.vv-day {
    margin-bottom: 14px;
    border: 1px solid var(--vv-hairline);
    border-radius: var(--vv-radius-sm);
    overflow: hidden;
}

.vv-day__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    font-family: var(--font-tactical, sans-serif);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.vv-day__body { padding: 4px 12px 10px; }

.vv-day__row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--vv-hairline);
}

.vv-day__row:last-child { border-bottom: 0; }
.vv-day__row > i { flex: 0 0 auto; margin-top: 3px; color: var(--color-primary); }
.vv-day__row a { color: var(--color-primary); text-decoration: underline; }

/* --- Rejilla de enlaces (Kit, Más) --- */
.vv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.vv-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    border: 1px solid var(--vv-hairline);
    border-radius: var(--vv-radius-sm);
    color: var(--color-text-primary);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, background-color .18s ease;
}

.vv-tile:hover,
.vv-tile:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
.vv-tile > i { flex: 0 0 auto; font-size: 1rem; color: var(--color-primary); }
.vv-tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.vv-empty {
    padding: 28px 12px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: .875rem;
}

/* =========================================================================
   3 · FICHA DE OBJETIVO A PANTALLA COMPLETA
   Imagen, acciones, dirección y coordenadas quedan CLAVADAS; sólo el bloque
   de descripción hace scroll (con la barra en naranja).
   ========================================================================= */

.vv-obj {
    position: fixed;
    inset: 0;
    z-index: var(--vv-z-obj);
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    transform: translateX(100%);
    transition: transform .32s var(--vv-ease);
    overscroll-behavior: contain;
}

.vv-obj.is-open { transform: translateX(0); }

/* --- Barra superior --- */
.vv-obj__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
    background: var(--vv-glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--vv-hairline);
}

.vv-obj__back {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--vv-hairline);
    border-radius: 50%;
    color: var(--color-text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.vv-obj__back:active { transform: scale(.93); }

.vv-obj__num {
    flex: 0 0 auto;
    font-family: var(--font-tactical, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
}

.vv-obj__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-subheading, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- Bloque fijo: imagen + acciones + geo --- */
.vv-obj__media {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    /* Se encoge en pantallas bajas para no comerse la descripción. */
    height: clamp(140px, 26dvh, 240px);
    background: var(--color-border);
    overflow: hidden;
}

.vv-obj__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.vv-obj__copy {
    position: absolute;
    right: 8px; bottom: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .65rem;
}

/* Acciones: fila con scroll horizontal. Cabe todo sin apretujar iconos. */
.vv-obj__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vv-hairline);
}

.vv-obj__actions::-webkit-scrollbar { display: none; }

.vv-obj-act {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 74px;
    min-height: 58px;
    padding: 8px 10px;

    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    border: 1px solid var(--vv-hairline);
    border-radius: var(--vv-radius-sm);
    color: var(--color-text-primary);
    font-family: var(--font-subheading, sans-serif);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
}

.vv-obj-act > i { font-size: 1.05rem; color: var(--color-primary); }
.vv-obj-act:hover, .vv-obj-act:focus-visible { border-color: var(--color-primary); }
.vv-obj-act:active { transform: scale(.94); }

/* !important a proposito: window.PlanDeFuga (main.js) pinta el boton guardado
   con estilos EN LINEA (color y borde naranjas). Sin !important quedaria texto
   naranja sobre fondo naranja, ilegible. Una declaracion !important de la hoja
   gana a un estilo en linea normal, que es justo lo que hace falta aqui. */
.vv-obj-act[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary) !important;
    color: var(--vv-on-primary) !important;
}

.vv-obj-act[aria-pressed="true"] > i { color: var(--vv-on-primary) !important; }

/* --- Dirección + coordenadas --- */
.vv-obj__geo {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vv-hairline);
    background: color-mix(in srgb, var(--color-text-primary) 3%, transparent);
}

.vv-obj__addr {
    display: flex;
    gap: 8px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.vv-obj__addr > i { flex: 0 0 auto; margin-top: 3px; color: var(--color-primary); }

.vv-obj__coords {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.vv-obj__coords code {
    flex: 1 1 auto;
    padding: 7px 10px;
    background: var(--color-background);
    border: 1px dashed var(--vv-hairline);
    border-radius: 8px;
    font-family: var(--font-tactical, monospace);
    font-size: .8rem;
    letter-spacing: .02em;
    color: var(--color-primary);
    user-select: all;
}

.vv-copy-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 48px; min-height: 40px;
    padding: 0 12px;
    background: none;
    border: 1px solid var(--vv-hairline);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.vv-copy-btn:hover, .vv-copy-btn:focus-visible { color: var(--color-primary); border-color: var(--color-primary); }
.vv-copy-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* --- Descripción: LO ÚNICO que hace scroll --- */
.vv-obj__desc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 14px calc(var(--vv-dock-space) + 16px);

    color: var(--color-text-primary);
    font-family: var(--font-body, sans-serif);
    font-size: .95rem;
    line-height: 1.7;

    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.vv-obj__desc::-webkit-scrollbar { width: 6px; }
.vv-obj__desc::-webkit-scrollbar-track { background: color-mix(in srgb, var(--color-primary) 14%, transparent); border-radius: 3px; }
.vv-obj__desc::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }

.vv-obj__desc p { margin: 0 0 1em; }
.vv-obj__desc strong { color: var(--color-primary); }
.vv-obj__desc a { color: var(--color-primary); text-decoration: underline; }

.vv-obj__desc .canalla-box {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--vv-radius-sm);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.vv-obj__desc .canalla-title {
    margin: 0 0 8px;
    font-family: var(--font-tactical, sans-serif);
    font-size: .8rem;
    letter-spacing: .05em;
    color: var(--color-primary);
}

/* Con la ficha o una sheet abierta, el fondo no debe hacer scroll. */
body.vv-locked { overflow: hidden; }

/* =========================================================================
   4 · AVISOS FLOTANTES (TOASTS)
   ========================================================================= */

.vv-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--vv-dock-space) + 8px);
    z-index: var(--vv-z-toast);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}

.vv-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;

    background: var(--vv-glass-solid);
    border: 1px solid var(--vv-hairline);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--vv-radius-sm);
    box-shadow: var(--vv-shadow);

    color: var(--color-text-primary);
    font-family: var(--font-subheading, sans-serif);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;

    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .24s var(--vv-ease), transform .24s var(--vv-ease);
}

.vv-toast.is-in { opacity: 1; transform: translateY(0) scale(1); }
.vv-toast > i { flex: 0 0 auto; font-size: 1rem; color: var(--color-primary); }
.vv-toast--ok { border-left-color: #22C55E; }
.vv-toast--ok > i { color: #22C55E; }
.vv-toast--warn { border-left-color: #FFB020; }
.vv-toast--warn > i { color: #FFB020; }

/* =========================================================================
   5 · ESCRITORIO
   La ficha y las sheets son móvil. En >=1024px la ficha se convierte en un
   diálogo centrado, para poder reutilizar el mismo detalle sin rehacerlo.
   ========================================================================= */

@media (min-width: 1024px) {
    .vv-dock { display: none !important; }

    .vv-toasts {
        left: auto;
        right: 24px;
        bottom: 24px;
        transform: none;
        align-items: flex-end;
    }

    .vv-obj {
        inset: 50% auto auto 50%;
        width: min(980px, 92vw);
        height: min(88vh, 860px);
        transform: translate(-50%, -50%) scale(.96);
        opacity: 0;
        pointer-events: none;
        border: 1px solid var(--vv-hairline);
        border-radius: var(--vv-radius);
        box-shadow: var(--vv-shadow);
        overflow: hidden;
        transition: opacity .24s var(--vv-ease), transform .24s var(--vv-ease);
    }

    .vv-obj.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .vv-obj__media { height: 280px; }
    .vv-obj__actions { flex-wrap: wrap; overflow-x: visible; }
    .vv-obj__desc { padding-bottom: 20px; font-size: 1rem; }

    .vv-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(560px, 92vw);
        transform: translate(-50%, -50%) scale(.96);
        opacity: 0;
        pointer-events: none;
        max-height: 80vh;
        border: 1px solid var(--vv-hairline);
        border-radius: var(--vv-radius);
        transition: opacity .24s var(--vv-ease), transform .24s var(--vv-ease);
    }

    .vv-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
    .vv-sheet__grabber { display: none; }
    .vv-sheet__body { padding-bottom: 18px; }
}

/* =========================================================================
   6 · MOVIMIENTO REDUCIDO
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .vv-dock,
    .vv-sheet,
    .vv-scrim,
    .vv-obj,
    .vv-toast,
    .vv-dock__item,
    .vv-dock__fab {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .vv-dock.is-hidden { transform: none; }
}