/* Filevolution · sistema de diseño sobre Bootstrap 5.3 (análisis, apartado 11; medidas de docs/bocetos).
   Clases propias con prefijo fv-. Lo de una sola pantalla va en css/vistas/<ruta>.css. Muestrario: #/guia (desarrollo). */

/* ================================================================ Tipografías (assets/fonts, licencia OFL) */

/* Bricolage Grotesque variable (peso 200–800 y tamaño óptico 12–96): títulos */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/assets/fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-opsz-normal.woff2') format('woff2-variations'),
         url('/assets/fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-opsz-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/assets/fonts/bricolage-grotesque/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations'),
         url('/assets/fonts/bricolage-grotesque/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Sans 400, 500 y 600: texto */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('/assets/fonts/instrument-sans/instrument-sans-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('/assets/fonts/instrument-sans/instrument-sans-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('/assets/fonts/instrument-sans/instrument-sans-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('/assets/fonts/instrument-sans/instrument-sans-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('/assets/fonts/instrument-sans/instrument-sans-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('/assets/fonts/instrument-sans/instrument-sans-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================ Variables */

:root {
    /* Marca */
    --fv-granate: #801624;
    --fv-granate-hover: #5E0F1A;
    --fv-texto: #2F2F30;
    --fv-secundario: #53565A;
    --fv-crema: #F0ECE2;
    --fv-gris: #E4E5E8;
    --fv-lima: #DAE02C;
    --fv-oscuro: #454B40;
    --fv-rosa: #F5E6E9;
    --fv-rosa-medio: #EBD3D7;
    --fv-rosa-fuerte: #E6C2C9;
    --fv-rosa-texto: #F1D3D8;      /* texto suave sobre granate */

    /* Tonos de foto (análisis) y sus derivados claros de los bocetos */
    --fv-dorado: #D2BA83;
    --fv-azul: #506B84;
    --fv-verde: #7C9AA0;
    --fv-petroleo: #004E5D;
    --fv-arena: #E6D7B5;
    --fv-arena-oscura: #CDBF9E;
    --fv-piedra: #DCD6C6;
    --fv-cielo: #B7CDD1;
    --fv-verde-claro: #C6D3D5;
    --fv-verde-medio: #9FB4B9;
    --fv-azul-claro: #C3CDD8;
    --fv-azul-medio: #8DA0B3;

    /* Estados */
    --fv-ok: #1F6B3A;
    --fv-ok-fondo: #E6F2EA;
    --fv-aviso: #8A4B0C;
    --fv-aviso-fondo: #FDF1E3;
    --fv-peligro: #B42318;

    /* Tipografía */
    --fv-fuente-texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fv-fuente-titulos: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;

    /* Formas y sombras */
    --fv-radio-campo: 14px;
    --fv-radio-archivo: 18px;
    --fv-radio-mosaico: 20px;
    --fv-radio-hero: 28px;
    --fv-radio-tarjeta: 32px;
    --fv-sombra-flotante: 0 16px 40px rgba(47, 47, 48, 0.28);
    --fv-sombra-menu: 0 16px 40px rgba(47, 47, 48, 0.16);
    --fv-anillo-foco: 0 0 0 0.25rem rgba(128, 22, 36, 0.25);
    --fv-alto-nav-inferior: 0px;   /* lo cambia la barra inferior del móvil */

    /* Bootstrap 5.3 con los colores de la marca (cambiar --bs-primary no basta: ver más abajo) */
    --bs-primary: #801624;
    --bs-primary-rgb: 128, 22, 36;
    --bs-primary-text-emphasis: #5E0F1A;
    --bs-primary-bg-subtle: #F5E6E9;
    --bs-primary-border-subtle: #EBD3D7;
    --bs-dark: #2F2F30;
    --bs-dark-rgb: 47, 47, 48;
    --bs-link-color: #801624;
    --bs-link-color-rgb: 128, 22, 36;
    --bs-link-hover-color: #5E0F1A;
    --bs-link-hover-color-rgb: 94, 15, 26;
    --bs-focus-ring-color: rgba(128, 22, 36, 0.25);
    --bs-code-color: #801624;
    --bs-body-font-family: var(--fv-fuente-texto);
    --bs-body-color: #2F2F30;
    --bs-body-color-rgb: 47, 47, 48;
    --bs-body-bg: #FFFFFF;
    --bs-emphasis-color: #2F2F30;
    --bs-emphasis-color-rgb: 47, 47, 48;
    --bs-secondary-color: #53565A;
    --bs-secondary-color-rgb: 83, 86, 90;
    --bs-heading-color: #2F2F30;
    --bs-tertiary-bg: #F0ECE2;
    --bs-tertiary-bg-rgb: 240, 236, 226;
    --bs-border-color: #E4E5E8;
    --bs-border-radius: 14px;
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 20px;
    --bs-border-radius-xl: 28px;
    --bs-border-radius-xxl: 32px;
    --bs-form-invalid-color: #B42318;
    --bs-form-invalid-border-color: #B42318;
}

/* ================================================================ Base */

body {
    background: var(--bs-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .fv-titulo {
    font-family: var(--fv-fuente-titulos);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--fv-texto);
}

h1, .h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); letter-spacing: -0.045em; line-height: 0.95; }
h2, .h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
h3, .h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
h4, .h4 { font-size: 1.25rem; letter-spacing: -0.02em; }

/* "Hola, [Nombre]" del panel y del inicio del cliente */
.fv-titulo-gigante { font-size: clamp(48px, 7vw, 92px); letter-spacing: -0.05em; line-height: 0.9; }
/* Título de un contenedor o un álbum sobre su banner */
.fv-titulo-hero { font-size: clamp(44px, 6vw, 76px); letter-spacing: -0.045em; line-height: 0.95; }

.fv-entradilla { max-width: 460px; font-size: 18px; line-height: 1.5; color: var(--fv-secundario); }
.fv-texto-secundario { color: var(--fv-secundario); }
.fv-texto-pequeno { font-size: 13px; }

a { text-underline-offset: 2px; }

/* Hito 12: el título que recibe el foco al cambiar de pantalla (nucleo/router.js) no se pulsa: sin anillo */
:is(h1, h2)[tabindex="-1"]:focus { outline: none; }

a:focus-visible, button:focus-visible, [tabindex]:not(:is(h1, h2)[tabindex="-1"]):focus-visible {
    outline: 3px solid rgba(128, 22, 36, 0.45);
    outline-offset: 2px;
}

::selection { background: var(--fv-rosa-medio); }

/* Contenido de cada vista */
.fv-principal {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 28px 64px;
}

.fv-seccion { margin-bottom: 36px; }
.fv-seccion > h2 { margin: 0 0 16px; }

/* ================================================================ Bootstrap: lo que lleva el azul fijo */

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #801624;
    --bs-btn-border-color: #801624;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #5E0F1A;
    --bs-btn-hover-border-color: #5E0F1A;
    --bs-btn-focus-shadow-rgb: 128, 22, 36;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #5E0F1A;
    --bs-btn-active-border-color: #5E0F1A;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #801624;
    --bs-btn-disabled-border-color: #801624;
}

.btn-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #2F2F30;
    --bs-btn-border-color: #2F2F30;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #454B40;
    --bs-btn-hover-border-color: #454B40;
    --bs-btn-focus-shadow-rgb: 47, 47, 48;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #454B40;
    --bs-btn-active-border-color: #454B40;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #2F2F30;
    --bs-btn-disabled-border-color: #2F2F30;
}

.btn-outline-primary {
    --bs-btn-color: #801624;
    --bs-btn-border-color: #801624;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #801624;
    --bs-btn-hover-border-color: #801624;
    --bs-btn-focus-shadow-rgb: 128, 22, 36;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #5E0F1A;
    --bs-btn-active-border-color: #5E0F1A;
    --bs-btn-disabled-color: #801624;
    --bs-btn-disabled-border-color: #801624;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #C08A92;
    box-shadow: var(--fv-anillo-foco);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #801624;
    border-color: #801624;
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C08A92'/%3e%3c/svg%3e");
}

/* Después de :focus, para que encendido y con foco la bola siga blanca */
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #801624;
    --bs-dropdown-border-color: #E4E5E8;
    --bs-dropdown-border-radius: 20px;
    --bs-dropdown-box-shadow: var(--fv-sombra-menu);
}

.nav-pills { --bs-nav-pills-link-active-bg: #2F2F30; }

.pagination {
    --bs-pagination-color: #801624;
    --bs-pagination-hover-color: #5E0F1A;
    --bs-pagination-focus-color: #5E0F1A;
    --bs-pagination-focus-box-shadow: var(--fv-anillo-foco);
    --bs-pagination-active-bg: #801624;
    --bs-pagination-active-border-color: #801624;
}

.progress, .progress-stacked { --bs-progress-bar-bg: #801624; }

.list-group {
    --bs-list-group-active-bg: #801624;
    --bs-list-group-active-border-color: #801624;
}

/* ================================================================ Botones en píldora */

.fv-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-family: var(--fv-fuente-texto);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fv-boton:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-boton:disabled, .fv-boton[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }

.fv-boton-primario { background: var(--fv-granate); color: #FFFFFF; }
.fv-boton-primario:hover { background: var(--fv-granate-hover); color: #FFFFFF; }

.fv-boton-oscuro { background: var(--fv-texto); color: #FFFFFF; }
.fv-boton-oscuro:hover { background: var(--fv-oscuro); color: #FFFFFF; }

.fv-boton-blanco { background: #FFFFFF; color: var(--fv-texto); }
.fv-boton-blanco:hover { background: #F7F5EF; color: var(--fv-texto); }
/* Sobre un banner o una foto (la «Presentación» del álbum, 18/10/2026) */
.fv-boton-translucido { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); }
.fv-boton-translucido:hover { background: rgba(255, 255, 255, 0.3); color: #FFFFFF; }

/* Blanco con borde: "Ver todos" sobre fondo blanco */
.fv-boton-borde { background: #FFFFFF; color: var(--fv-texto); box-shadow: inset 0 0 0 1px var(--fv-gris); }
.fv-boton-borde:hover { background: #FAF9F6; color: var(--fv-texto); box-shadow: inset 0 0 0 1px #C9CBD0; }

.fv-boton-fantasma { background: transparent; color: var(--fv-texto); font-weight: 500; }
.fv-boton-fantasma:hover { background: rgba(47, 47, 48, 0.06); color: var(--fv-texto); }

/* Cancelar, descartar: fantasma en rojo */
.fv-boton-peligro { background: transparent; color: var(--fv-peligro); font-weight: 500; }
.fv-boton-peligro:hover { background: rgba(180, 35, 24, 0.08); color: var(--fv-peligro); }

.fv-boton-compacto { min-height: 44px; padding: 0 18px; font-size: 14px; }
.fv-boton-grande { min-height: 56px; padding: 0 28px; font-size: 17px; }
.fv-boton-bloque { display: flex; width: 100%; }
.fv-boton-redondo { width: 44px; height: 44px; min-height: 44px; padding: 0; }
.fv-boton-redondo.fv-boton-grande { width: 56px; height: 56px; }

/* ================================================================ Campos */

.fv-etiqueta {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--fv-secundario);
}

.fv-campo {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--fv-radio-campo);
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: box-shadow 0.15s ease;
}

.fv-campo::placeholder { color: #85878B; opacity: 1; }
.fv-campo:focus { outline: none; box-shadow: inset 0 0 0 2px var(--fv-granate); }
.fv-campo:disabled { opacity: 0.6; }

textarea.fv-campo { min-height: 120px; padding: 15px 16px; resize: vertical; }

select.fv-campo {
    appearance: none;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232F2F30' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 14px;
}

.fv-campo.is-invalid,
.was-validated .fv-campo:invalid { box-shadow: inset 0 0 0 2px var(--fv-peligro); }

/* Buscador en píldora */
.fv-buscador {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 20px 0 48px;
    border: 0;
    border-radius: 999px;
    background: var(--fv-crema) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cg fill='none' stroke='%2353565A' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/g%3e%3c/svg%3e") no-repeat 18px center / 18px 18px;
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 15px;
}

.fv-buscador::placeholder { color: #85878B; opacity: 1; }
/* Hito 12: un texto que no cabe (en el móvil, «Buscar en este contenedor»), con puntos suspensivos */
.fv-buscador { text-overflow: ellipsis; }
.fv-buscador:focus { outline: none; box-shadow: inset 0 0 0 2px var(--fv-granate); }

/* Buscador, filtros y orden encima de un explorador */
.fv-barra-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 24px 0 28px;
}

.fv-barra-herramientas .fv-buscador { flex: 1 1 260px; width: auto; }

/* ================================================================ Chips de filtro, insignias y pastillas */

.fv-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--fv-gris);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fv-chip:hover { border-color: #C9CBD0; color: var(--fv-texto); }
.fv-chip:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-chip[aria-pressed="true"],
.fv-chip.activo {
    border-color: var(--fv-texto);
    background: var(--fv-texto);
    color: #FFFFFF;
    font-weight: 500;
}

/* Contador lima (Recibidos, repetidos…) */
.fv-insignia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--fv-lima);
    color: var(--fv-texto);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* Estado en píldora: "Sin descargar", "Hecho", "En espera"… */
.fv-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--fv-crema);
    color: var(--fv-oscuro);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.fv-pastilla-ok { background: var(--fv-ok-fondo); color: var(--fv-ok); }
.fv-pastilla-aviso { background: var(--fv-aviso-fondo); color: var(--fv-aviso); }
.fv-pastilla-lima { background: var(--fv-lima); color: var(--fv-texto); }
.fv-pastilla-blanca { background: #FFFFFF; color: var(--fv-texto); }
.fv-pastilla-velo { background: rgba(255, 255, 255, 0.85); color: var(--fv-texto); }   /* sobre banners e imágenes */

/* ================================================================ Interruptor ("Avisar al cliente al terminar") */

/* <input type="checkbox" role="switch" class="fv-interruptor">: pista de 56 × 28 y bola de 22 */
.fv-interruptor {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 56px;
    height: 28px;
    margin: 8px 0;
    border: 0;
    border-radius: 999px;
    background: #C9CBD0 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3e%3ccircle cx='11' cy='11' r='11' fill='%23fff'/%3e%3c/svg%3e") no-repeat 3px center / 22px 22px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.2s ease, background-position 0.2s ease;
}

.fv-interruptor:checked { background-color: var(--fv-granate); background-position: 31px center; }
.fv-interruptor:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-interruptor:disabled { opacity: 0.5; cursor: default; }

/* Fila con texto y su interruptor (toda la fila es la etiqueta) */
.fv-interruptor-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    background: #FFFFFF;
    cursor: pointer;
}

.fv-interruptor-fila-texto { flex: 1; min-width: 0; }
.fv-interruptor-fila-titulo { display: block; font-size: 15px; font-weight: 600; }
.fv-interruptor-fila-ayuda { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--fv-secundario); }

/* ================================================================ Avatares */

.fv-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fv-rosa-medio);
    color: var(--fv-texto);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.fv-avatar-mediano { width: 32px; height: 32px; font-size: 12px; }
.fv-avatar-mini { width: 24px; height: 24px; font-size: 10px; }

/* Tonos de la paleta; utiles.tonoAvatar(nombre) da siempre el mismo para la misma persona */
.fv-tono-1 { background: var(--fv-rosa-medio); }
.fv-tono-2 { background: var(--fv-arena); }
.fv-tono-3 { background: var(--fv-verde-claro); }
.fv-tono-4 { background: var(--fv-cielo); }
.fv-tono-5 { background: var(--fv-dorado); }
.fv-tono-6 { background: var(--fv-azul-claro); }

/* Varias personas, solapadas */
.fv-avatares { display: inline-flex; }
.fv-avatares > .fv-avatar { border: 2px solid #FFFFFF; }
.fv-avatares > .fv-avatar + .fv-avatar { margin-left: -10px; }
.fv-avatares > .fv-avatar-mediano + .fv-avatar-mediano { margin-left: -7px; }
.fv-avatares > .fv-avatar-mini + .fv-avatar-mini { margin-left: -5px; }

/* ================================================================ Tarjetas */

.fv-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 28px;
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-crema);
    color: var(--fv-texto);
}

.fv-tarjeta-borde { border: 1px solid var(--fv-gris); background: #FFFFFF; }
.fv-tarjeta-lima { background: var(--fv-lima); }
.fv-tarjeta-rosa { background: var(--fv-rosa); }
.fv-tarjeta-cielo { background: var(--fv-cielo); }
.fv-tarjeta-granate { background: var(--fv-granate); color: #FFFFFF; }
.fv-tarjeta-oscura { background: var(--fv-oscuro); color: #FFFFFF; }
.fv-tarjeta-granate .fv-texto-secundario { color: var(--fv-rosa-texto); }
.fv-tarjeta-oscura .fv-texto-secundario { color: #BFC3B8; }
.fv-tarjeta-granate :is(h1, h2, h3, h4, .fv-titulo), .fv-tarjeta-oscura :is(h1, h2, h3, h4, .fv-titulo) { color: inherit; }

a.fv-tarjeta { text-decoration: none; transition: transform 0.15s ease; }
a.fv-tarjeta:hover { transform: translateY(-2px); color: inherit; }
a.fv-tarjeta-granate:hover, a.fv-tarjeta-oscura:hover { color: #FFFFFF; }

/* Icono en círculo blanco de los accesos rápidos */
.fv-icono-circulo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-size: 26px;
}

.fv-tarjeta-granate .fv-icono-circulo { color: var(--fv-granate); }

/* ================================================================ Carpetas: mosaico 2fr / 1fr */

.fv-rejilla-carpetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.fv-carpeta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--fv-texto);
    text-decoration: none;
}

.fv-carpeta:hover { color: var(--fv-texto); }

.fv-mosaico {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 160px;
    overflow: hidden;
    border-radius: var(--fv-radio-mosaico);
    background: var(--fv-crema);
    transition: transform 0.15s ease;
}

.fv-carpeta:hover .fv-mosaico { transform: translateY(-2px); }
.fv-mosaico > :first-child { grid-row: 1 / span 2; }
.fv-mosaico > img { width: 100%; height: 100%; object-fit: cover; }

.fv-mosaico-uno { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.fv-mosaico-dos { grid-template-rows: 1fr; }
.fv-mosaico-dos > :first-child, .fv-mosaico-trio > :first-child { grid-row: auto; }
/* Álbum: tres columnas iguales */
.fv-mosaico-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; }

/* Carpeta sin imágenes: la extensión dominante, en grande */
.fv-mosaico-documento {
    display: flex;
    align-items: flex-end;
    padding: 18px;
    font-family: var(--fv-fuente-titulos);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #CBC5B5;
}

/* Etiqueta encima del mosaico: "Material nuevo", "Álbum", "1 exclusión" */
.fv-mosaico-etiqueta { position: absolute; top: 10px; left: 10px; z-index: 1; }
/* «Privado» (18/10/2026): contenedor o álbum que solo ve el SUPER, arriba a la derecha de su tarjeta */
.fv-etiqueta-privado { position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }

.fv-carpeta-pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fv-carpeta-nombre { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fv-carpeta-cuenta { flex: none; font-size: 13px; color: var(--fv-secundario); }

/* Botón de reproducir sobre un vídeo */
.fv-reproducir {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-size: 16px;
}

/* ================================================================ Archivos: rejilla irregular */

.fv-rejilla { columns: 4 220px; column-gap: 16px; }

.fv-archivo {
    position: relative;
    margin: 0 0 18px;
    break-inside: avoid;
}

.fv-archivo-vista {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--fv-radio-archivo);
    background: var(--fv-crema);
    color: var(--fv-texto);
    text-decoration: none;
}

.fv-archivo-vista:hover { color: var(--fv-texto); }
.fv-archivo-vista > img { display: block; width: 100%; height: auto; }

/* Sin miniatura: la extensión en grande */
.fv-archivo-icono {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    padding: 20px;
}

.fv-archivo-ext {
    font-family: var(--fv-fuente-titulos);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    overflow-wrap: anywhere;
}

.fv-archivo-tamano { font-size: 13px; color: var(--fv-secundario); }
.fv-archivo-rosa { background: var(--fv-rosa); }
.fv-archivo-rosa .fv-archivo-ext { color: var(--fv-granate); }

.fv-archivo-pie {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 4px 0;
    font-size: 13px;
}

.fv-archivo-pie > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-archivo-tipo { flex: none; color: var(--fv-secundario); }

/* Seleccionado */
.fv-archivo.seleccionado .fv-archivo-vista { outline: 3px solid var(--fv-granate); outline-offset: 3px; }

.fv-check {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fv-granate);
    color: #FFFFFF;
    font-size: 14px;
}

.fv-archivo.seleccionado .fv-check { display: flex; }

/* ================================================================ Hero con banner (contenedor, álbum) */

.fv-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 280px;
    padding: 24px 32px 32px;
    overflow: hidden;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-cielo) center / cover no-repeat;
    color: var(--fv-texto);
}

.fv-hero-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.fv-hero .fv-titulo-hero { margin: 0; }

/* Ruta: Contenedores / Empresa / Carpeta */
.fv-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    list-style: none;
}

.fv-migas :is(a, span) {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--fv-texto);
    text-decoration: none;
}

.fv-migas a:hover { background: #FFFFFF; color: var(--fv-texto); }

.fv-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.fv-hero .fv-acciones-info { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Píldora blanca informativa: "4 personas", "Actividad", "Ajustes" */
.fv-pildora {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

a.fv-pildora:hover { color: var(--fv-texto); box-shadow: inset 0 0 0 1px var(--fv-gris); }
.fv-pildora:has(> .fv-avatares:first-child) { padding-left: 6px; }
.fv-pildora .fv-avatares > .fv-avatar { width: 32px; height: 32px; font-size: 11px; }
.fv-pildora .fv-avatares > .fv-avatar + .fv-avatar { margin-left: -7px; }

/* ================================================================ Barra flotante de selección */

.fv-barra-seleccion {
    position: fixed;
    bottom: calc(28px + var(--fv-alto-nav-inferior));
    left: 50%;
    z-index: 1030;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 6px 6px 6px 20px;
    border-radius: 999px;
    background: var(--fv-texto);
    color: #FFFFFF;
    box-shadow: var(--fv-sombra-flotante);
    transform: translateX(-50%);
}

.fv-barra-seleccion-cuenta { margin-right: 10px; font-size: 15px; font-weight: 600; }

.fv-barra-seleccion :is(button, a) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.fv-barra-seleccion :is(button, a):hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

.fv-barra-seleccion .fv-barra-seleccion-cerrar {
    justify-content: center;
    width: 44px;
    padding: 0;
    background: var(--fv-oscuro);
    font-size: 18px;
}

/* ================================================================ Cabecera y navegación (componentes/cabecera.js) */

.fv-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 16px 28px;
    background: #FFFFFF;
}

/* En tableta y ordenador, la cabecera se queda arriba al bajar (18/10/2026); en el móvil manda la barra inferior.
   Por debajo de las franjas de aviso, las ventanas y el visor */
@media (min-width: 768px) {
    #cabecera:not(:empty) { position: sticky; top: 0; z-index: 1020; box-shadow: 0 1px 0 rgba(47, 47, 48, 0.08); }
}

/* Logotipo de Estratagema | filevolution */
.fv-marca {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--fv-texto);
    font-family: var(--fv-fuente-titulos);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    text-decoration: none;
}

.fv-marca:hover { color: var(--fv-texto); }
.fv-marca img { display: block; width: auto; height: 20px; }
.fv-marca-separador { width: 1px; height: 22px; margin: 0 4px; background: var(--fv-gris); }

/* Grupo de píldoras sobre crema; la activa, en oscuro */
.fv-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--fv-crema);
}

.fv-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--fv-texto);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-nav a:hover { background: rgba(47, 47, 48, 0.07); color: var(--fv-texto); }
.fv-nav a[aria-current="page"] { background: var(--fv-texto); color: #FFFFFF; }

.fv-cabecera-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Hito 12: en una tableta (o una ventana estrecha), la navegación del equipo no cabe con el logotipo y "+ Enviar": va en su
   propia fila, debajo, y "+ Enviar" y el avatar se quedan arriba a la derecha */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .fv-cabecera-equipo .fv-nav { order: 3; }
}

/* Avatar que abre el menú de la cuenta */
.fv-boton-avatar {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.fv-boton-avatar:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* .fv-menu: el mismo aspecto para los menús de acciones de una fila */
.fv-menu-cuenta, .fv-menu {
    min-width: 248px;
    padding: 8px;
    border: 1px solid var(--fv-gris);
    border-radius: 20px;
    box-shadow: var(--fv-sombra-menu);
}

.fv-menu { min-width: 220px; }

.fv-menu-cuenta-titular { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; }
.fv-menu-cuenta-titular strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fv-menu-cuenta-titular small { display: block; font-size: 13px; color: var(--fv-secundario); }

:is(.fv-menu-cuenta, .fv-menu) .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--fv-texto);
    font-size: 15px;
}

:is(.fv-menu-cuenta, .fv-menu) .dropdown-item i { width: 18px; color: var(--fv-secundario); text-align: center; }
:is(.fv-menu-cuenta, .fv-menu) .dropdown-item:hover, :is(.fv-menu-cuenta, .fv-menu) .dropdown-item:focus { background: var(--fv-crema); color: var(--fv-texto); }
:is(.fv-menu-cuenta, .fv-menu) .dropdown-divider { margin: 6px 4px; border-color: var(--fv-gris); opacity: 1; }
.fv-menu .fv-menu-peligro, .fv-menu .fv-menu-peligro i { color: var(--fv-peligro); }

/* Barra inferior del móvil: iconos con texto corto y "+ Enviar" redondo en el centro */
.fv-nav-inferior {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: none;
    align-items: stretch;
    justify-content: space-around;
    min-height: 64px;
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--fv-gris);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.fv-nav-inferior a {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    max-width: 96px;
    padding: 4px 0;
    border-radius: 14px;
    color: var(--fv-secundario);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.15;
    text-decoration: none;
}

.fv-nav-inferior a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fv-nav-icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 28px;
    border-radius: 999px;
    font-size: 17px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-nav-icono .fv-insignia {
    position: absolute;
    top: -5px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
}

.fv-nav-inferior a[aria-current="page"] { color: var(--fv-texto); font-weight: 600; }
.fv-nav-inferior a[aria-current="page"] .fv-nav-icono { background: var(--fv-texto); color: #FFFFFF; }

.fv-nav-inferior .fv-enviar-redondo {
    flex: 0 0 52px;
    align-self: center;
    width: 52px;
    height: 52px;
    margin: 0 2px;
    padding: 0;
    border-radius: 50%;
    background: var(--fv-granate);
    color: #FFFFFF;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(128, 22, 36, 0.35);
    transform: translateY(-14px);
}

.fv-nav-inferior .fv-enviar-redondo:hover { background: var(--fv-granate-hover); color: #FFFFFF; }
/* Hito 12: en #/enviar, el «+» sigue en blanco (no toma el oscuro de la página actual) */
.fv-nav-inferior .fv-enviar-redondo[aria-current="page"] { background: var(--fv-granate-hover); color: #FFFFFF; }

@media (max-width: 767.98px) {
    .fv-principal { padding: 8px 16px 40px; }

    .fv-cabecera { flex-wrap: nowrap; padding: 12px 16px; }
    .fv-cabecera .fv-nav, .fv-cabecera .fv-enviar { display: none; }
    .fv-marca { font-size: 22px; }
    .fv-marca img { height: 18px; }

    .fv-nav-inferior { display: flex; }
    body.con-nav-inferior {
        --fv-alto-nav-inferior: 72px;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .fv-hero { min-height: 220px; padding: 20px; }
    .fv-tarjeta { padding: 22px; border-radius: var(--fv-radio-hero); }
}

@media (max-width: 575.98px) {
    .fv-rejilla { columns: 2 140px; column-gap: 12px; }
    .fv-rejilla-carpetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .fv-mosaico { height: 120px; border-radius: 16px; }
    .fv-archivo-icono { min-height: 150px; padding: 16px; }
    .fv-archivo-ext { font-size: 36px; }
    .fv-barra-seleccion { padding-left: 16px; border-radius: 28px; }
}

/* ================================================================ Formularios (nucleo/formularios.js) */

.fv-formulario { display: flex; flex-direction: column; gap: 16px; }

.fv-formulario .form-text { margin-top: 8px; font-size: 13px; color: var(--fv-secundario); }
.invalid-feedback { margin-top: 8px; font-size: 13px; }

/* Contraseña con botón de ver u ocultar */
.fv-campo-clave { position: relative; }
.fv-campo-clave .fv-campo { padding-right: 60px; }

.fv-ver-clave {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fv-secundario);
    font-size: 16px;
    cursor: pointer;
}

.fv-ver-clave:hover { background: rgba(47, 47, 48, 0.07); color: var(--fv-texto); }
.fv-ver-clave:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* El error va debajo del campo con su botón; con el error a la vista, la ayuda sobra */
.was-validated .fv-campo-clave:has(:invalid) ~ .invalid-feedback { display: block; }
.was-validated .fv-campo-clave:has(:invalid) ~ .form-text { display: none; }
.fv-campo-clave:has(.is-invalid) ~ .invalid-feedback { display: block; }   /* un error del servidor (contraseña de carpeta) */

/* Dos campos en una fila (contraseña y repetición); si no caben, uno debajo de otro */
.fv-campos-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }

/* Dos botones a partes iguales */
.fv-botones-par { display: flex; flex-wrap: wrap; gap: 10px; }
.fv-botones-par > * { flex: 1 1 180px; }

/* Botón con aspecto de enlace ("¿Has olvidado la contraseña?") */
.fv-enlace {
    align-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--fv-granate);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: text-decoration-color 0.15s ease;
}

.fv-enlace:hover { color: var(--fv-granate-hover); text-decoration-color: currentColor; }
.fv-enlace:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* Botón esperando la respuesta (enEspera): sin apagarse del todo */
.fv-boton[aria-busy="true"]:disabled { opacity: 0.75; }
.fv-boton .spinner-border-sm { --bs-spinner-width: 1em; --bs-spinner-height: 1em; --bs-spinner-border-width: 0.15em; }

/* Aparición de un paso (respeta prefers-reduced-motion: ver el final) */
@keyframes fv-aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.fv-aparecer { animation: fv-aparecer 0.22s ease-out both; }

/* ================================================================ Entrada (bocetos Main y Entrada-pasos) */

/* Las páginas sin sesión van a todo el ancho, sin el margen de .fv-principal */
.fv-principal:has(> .fv-entrada), .fv-principal:has(> .fv-publica) { max-width: none; padding: 0; }

.fv-entrada {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1440px;
    /* Deja ver el pie (con la versión) sin bajar (18/10/2026) */
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    margin: 0 auto;
    padding: clamp(16px, 2vw, 24px);
}

.fv-entrada-panel {
    display: flex;
    flex: 1.6 1 520px;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-width: 0;
    min-height: 460px;
    padding: clamp(24px, 3.4vw, 44px);
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-granate);
    color: #FFFFFF;
}

.fv-entrada-panel-arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fv-entrada-panel-arriba img { display: block; width: auto; height: 30px; }

.fv-entrada-web {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 14px;
    font-weight: 500;
}

/* Mosaico decorativo de archivos */
.fv-entrada-mosaico {
    align-self: flex-end;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-auto-rows: 84px;
    gap: 12px;
    width: min(100%, 460px);
}

.fv-entrada-mosaico > span { position: relative; border-radius: 20px; }
.fv-entrada-mosaico-alto { grid-row: span 3; }
.fv-entrada-mosaico-video { grid-row: span 2; }

.fv-entrada-mosaico-pdf {
    grid-row: span 2;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    background: var(--fv-rosa);
    color: var(--fv-granate);
    font-family: var(--fv-fuente-titulos);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.fv-entrada-mosaico .fv-reproducir { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 14px; }

.fv-entrada-titulo {
    display: flex;
    align-items: center;
    gap: 0.12em;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(48px, 8.4vw, 124px);
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.fv-entrada-titulo::before {
    content: "";
    flex: none;
    width: 0.3em;
    height: 0.3em;
    border-radius: 999px;
    background: #FFFFFF;
}

.fv-entrada-lema { max-width: 520px; margin: 20px 0 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; line-height: 1.35; }

.fv-entrada-lado {
    display: flex;
    flex: 1 1 360px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 24px 0;
}

.fv-entrada-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    max-width: 440px;
    padding: clamp(28px, 3.4vw, 44px);
    border: 1px solid var(--fv-gris);
    border-radius: var(--fv-radio-tarjeta);
    background: #FFFFFF;
}

/* Título de una tarjeta de entrada, invitación o enlace */
.fv-titulo-tarjeta { margin: 0; font-size: clamp(32px, 3.2vw, 40px); letter-spacing: -0.04em; line-height: 0.95; }
.fv-titulo-tarjeta-grande { font-size: clamp(36px, 3.6vw, 46px); }
.fv-titulo-tarjeta:focus { outline: none; }

.fv-texto-tarjeta { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fv-oscuro); }
.fv-texto-tarjeta strong { color: var(--fv-texto); font-weight: 600; overflow-wrap: anywhere; }

/* Paso 1: cómo funciona el acceso */
.fv-entrada-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--fv-gris);
    font-size: 14px;
    line-height: 1.45;
    color: var(--fv-secundario);
}

.fv-entrada-info p { display: flex; align-items: center; gap: 12px; margin: 0; }
.fv-entrada-info .fv-entrada-info-titulo { font-weight: 600; color: var(--fv-texto); }

.fv-icono-mini {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-size: 15px;
}

.fv-icono-mini-rosa { background: var(--fv-rosa); color: var(--fv-granate); }

/* "Revisa tu correo" */
.fv-icono-grande {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--fv-rosa);
    color: var(--fv-granate);
    font-size: 36px;
}

/* Paso 2: el email elegido, con "Cambiar" */
.fv-email-elegido {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 6px 6px 8px;
    border-radius: 999px;
    background: var(--fv-crema);
}

.fv-email-elegido-arroba {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fv-rosa-medio);
    font-size: 13px;
    font-weight: 600;
}

.fv-email-elegido-texto { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* Tableta: el panel arriba (o al lado) sin el mosaico ni su altura mínima */
@media (max-width: 991.98px) {
    .fv-entrada-panel { min-height: 0; }
    .fv-entrada-mosaico { display: none; }
}

/* Móvil: el panel arriba y más bajo */
@media (max-width: 767.98px) {
    .fv-entrada { gap: 16px; padding: 12px; }
    .fv-entrada-panel { flex-basis: 100%; gap: 28px; padding: 24px; border-radius: var(--fv-radio-hero); }
    .fv-entrada-panel-arriba img { height: 24px; }
    .fv-entrada-titulo { font-size: 48px; }
    .fv-entrada-lema { margin-top: 12px; font-size: 17px; }
    .fv-entrada-lado { justify-content: flex-start; padding: 0 0 12px; }
    .fv-entrada-tarjeta { gap: 24px; padding: 24px 20px; border-radius: var(--fv-radio-hero); }
}

/* ================================================================ Páginas de un enlace (bocetos Invitacion y Estados-enlace) */

.fv-publica { min-height: 100vh; min-height: 100dvh; }
.fv-cabecera-web { margin-left: auto; font-size: 14px; color: var(--fv-secundario); }
.fv-publica-contenido { max-width: 600px; margin: 0 auto; padding: 12px 28px 64px; }

.fv-tarjeta-publica {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(28px, 3vw, 40px);
    border: 1px solid var(--fv-gris);
    border-radius: var(--fv-radio-tarjeta);
    background: #FFFFFF;
}

/* Quién invita */
.fv-invita { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--fv-oscuro); }
.fv-invita .fv-avatar { width: 40px; height: 40px; font-size: 13px; }
.fv-invita strong { color: var(--fv-texto); font-weight: 600; }

/* Su mensaje */
.fv-mensaje { margin: 0; padding: 16px 18px; border-radius: 20px; background: var(--fv-crema); }
.fv-mensaje .fv-etiqueta { margin-bottom: 6px; }
.fv-mensaje blockquote { font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }

/* Dato fijo: "Email [nombre@empresa.com]" */
.fv-dato-fijo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--fv-secundario); }
.fv-dato-fijo .fv-pastilla { min-height: 32px; color: var(--fv-texto); font-weight: 500; white-space: normal; overflow-wrap: anywhere; }

/* Enlace no disponible: tarjeta crema con un signo grande */
.fv-tarjeta-estado {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(28px, 3vw, 36px);
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-crema);
}

.fv-tarjeta-estado-signo {
    font-family: var(--fv-fuente-titulos);
    font-size: clamp(96px, 10vw, 132px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.8;
    color: #CBC5B5;
}

@media (max-width: 767.98px) {
    .fv-publica-contenido { padding: 4px 16px 40px; }
    .fv-tarjeta-publica, .fv-tarjeta-estado { padding: 24px 20px; border-radius: var(--fv-radio-hero); }
}

@media (max-width: 575.98px) {
    .fv-cabecera-web { display: none; }
}

/* ================================================================ Panel de la agencia (boceto Agencia-panel; hito 12) */

/* Filas de bloques que se reparten el ancho (2 · 1 arriba, 3 · 2 en medio) y, en el móvil, una columna */
.fv-panel { display: flex; flex-direction: column; gap: 20px; }
.fv-panel-fila { display: flex; flex-wrap: wrap; gap: 20px; }
.fv-panel-fila[hidden], .fv-panel-bloque[hidden], .fv-panel-error[hidden] { display: none; }

/* Lo que llega con los datos aparece suave (sin movimiento con prefers-reduced-motion: ver el final) */
.fv-panel-entra { animation: fv-panel-entra 0.25s ease both; }
@keyframes fv-panel-entra { from { opacity: 0; } to { opacity: 1; } }

.fv-hero-inicio {
    display: flex;
    flex: 2 1 520px;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-width: 0;
    min-height: 360px;
    padding: 32px;
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-crema);
}

.fv-hero-inicio .fv-titulo-gigante { overflow-wrap: anywhere; }

/* "[avatar] Nombre · ROL · Empresa" */
.fv-quien {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
}

.fv-quien > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Recibidos pendientes: el número grande sobre lima y los 3 más recientes */
.fv-panel-recibidos {
    display: flex;
    flex: 1 1 340px;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 28px;
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-lima);
    color: var(--fv-texto);
}

.fv-panel-recibidos-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fv-panel-recibidos-cabeza .fv-boton { flex: none; }
.fv-panel-recibidos-numero { display: block; min-height: 96px; font-size: 120px; letter-spacing: -0.06em; line-height: 0.8; }
.fv-panel-recibidos-texto { display: block; margin-top: 14px; font-size: 26px; letter-spacing: -0.035em; line-height: 1; }
.fv-panel-recibidos-lista { display: flex; flex-direction: column; }

.fv-panel-recibido {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    min-height: 69px;
    padding: 12px 0;
    border-top: 1px solid rgba(47, 47, 48, 0.14);
    color: var(--fv-texto);
    text-decoration: none;
}

.fv-panel-recibido:hover { color: var(--fv-texto); }
.fv-panel-recibido:hover .fv-panel-recibido-quien { text-decoration: underline; text-underline-offset: 2px; }
.fv-panel-recibido > .fv-avatar { border: 2px solid #FFFFFF; }
.fv-panel-recibido-texto { display: flex; flex-direction: column; min-width: 0; }
.fv-panel-recibido-quien, .fv-panel-recibido-que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-panel-recibido-quien { font-size: 15px; font-weight: 600; }
.fv-panel-recibido-que { font-size: 13px; color: var(--fv-oscuro); }
.fv-panel-recibido .fv-pastilla { font-size: 12px; }
.fv-pastilla-velo-claro { background: rgba(255, 255, 255, 0.55); color: var(--fv-texto); }
.fv-panel-recibidos-vacio { margin: 0; padding-top: 14px; border-top: 1px solid rgba(47, 47, 48, 0.14); font-size: 15px; line-height: 1.45; }

/* Accesos rápidos: tres tarjetas iguales */
/* (no .fv-accesos: es la pantalla de Accesos de una carpeta, hito 8) */
.fv-accesos-rapidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fv-acceso { justify-content: space-between; gap: 28px; min-height: 230px; }

.fv-acceso-titulo {
    display: block;
    font-family: var(--fv-fuente-titulos);
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.fv-acceso-texto { display: block; margin-top: 8px; font-size: 15px; }
.fv-tarjeta-granate .fv-acceso-texto { color: var(--fv-rosa-texto); }
.fv-tarjeta-cielo .fv-acceso-texto { color: var(--fv-oscuro); }
.fv-tarjeta-oscura .fv-acceso-texto { color: #BFC3B8; }
.fv-tarjeta-oscura .fv-icono-circulo { color: var(--fv-texto); }

/* Cabecera de un bloque: su título y "Ver todos" */
.fv-panel-bloque-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fv-panel-bloque-cabeza h2 { font-size: 28px; letter-spacing: -0.035em; }

/* Mis últimos envíos */
.fv-panel-envios {
    display: flex;
    flex: 3 1 520px;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--fv-gris);
    border-radius: var(--fv-radio-tarjeta);
    background: #FFFFFF;
}

.fv-panel-envios-lista { display: flex; flex-direction: column; }

.fv-panel-envio {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--fv-gris);
    color: var(--fv-texto);
    text-decoration: none;
}

.fv-panel-envio:hover { color: var(--fv-texto); }
.fv-panel-envio:hover .fv-panel-envio-titulo { text-decoration: underline; text-underline-offset: 2px; }
.fv-panel-envio-imagen { display: block; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 18px; }
.fv-panel-envio-imagen .fv-mosaico { height: 100%; gap: 3px; border-radius: 0; }
.fv-panel-envio-imagen .fv-mosaico-envio-icono { align-items: center; justify-content: center; padding: 6px; }
.fv-panel-envio-imagen .fv-mosaico-envio-ext { font-size: 17px; letter-spacing: -0.02em; }
.fv-panel-envio-imagen .fv-reproducir { transform: scale(0.6); }
.fv-panel-envio-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fv-panel-envio-titulo, .fv-panel-envio-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-panel-envio-titulo { font-size: 16px; font-weight: 600; }
.fv-panel-envio-meta { font-size: 14px; color: var(--fv-secundario); }

/* «2 de 3 descargas»: una barrita por destinatario; verde si todos, naranja si algunos */
.fv-panel-descargas { display: flex; align-items: center; gap: 12px; }
.fv-panel-barras { display: flex; gap: 4px; }
.fv-panel-barras > span { width: 26px; height: 10px; border-radius: 5px; background: var(--fv-gris); }
.fv-panel-descargas-todos .fv-panel-barras > .llena { background: var(--fv-ok); }
.fv-panel-descargas-algunos .fv-panel-barras > .llena { background: var(--fv-aviso); }
.fv-panel-descargas-texto { padding: 5px 12px; border-radius: 999px; background: var(--fv-crema); color: var(--fv-oscuro); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fv-panel-descargas-todos .fv-panel-descargas-texto { background: var(--fv-ok-fondo); color: var(--fv-ok); }
.fv-panel-descargas-algunos .fv-panel-descargas-texto { background: var(--fv-aviso-fondo); color: var(--fv-aviso); }

.fv-panel-envios-vacio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fv-gris);
    color: var(--fv-secundario);
    font-size: 15px;
    line-height: 1.45;
}

.fv-panel-envios-vacio p { flex: 1 1 260px; }
.fv-panel-envios-vacio strong { color: var(--fv-texto); font-weight: 600; }

/* Destacados: la tarjeta rosa, junto a los envíos */
.fv-panel .fv-destacados-equipo { display: flex; flex: 2 1 340px; flex-direction: column; gap: 18px; min-width: 0; margin: 0; }
.fv-panel .fv-destacados-equipo > h2 { margin: 0; }
.fv-destacado[hidden] { display: none; }
.fv-destacados-equipo .fv-destacado-imagen.fv-archivo-rosa { background-color: #FFFFFF; }   /* un PDF, sobre la tarjeta rosa */

/* Contenedores recientes: el primero, más ancho */
.fv-panel-contenedores { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.fv-panel-contenedores .fv-panel-bloque-cabeza h2 { font-size: 30px; }
.fv-panel-contenedores-lista { display: flex; flex-wrap: wrap; gap: 20px; }
.fv-panel-contenedores-lista > .fv-vacio { flex: 1 1 100%; }

.fv-panel-contenedor { display: flex; flex: 1 1 260px; flex-direction: column; gap: 12px; min-width: 0; color: var(--fv-texto); text-decoration: none; }
.fv-panel-contenedor:first-child { flex: 2 1 420px; }
.fv-panel-contenedor:hover { color: var(--fv-texto); }
.fv-panel-contenedor:focus-visible { outline: 3px solid rgba(128, 22, 36, 0.45); outline-offset: 4px; border-radius: var(--fv-radio-hero); }

.fv-panel-contenedor-imagen {
    position: relative;
    display: block;
    height: 240px;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-cielo) center / cover no-repeat;
    transition: transform 0.15s ease;
}

.fv-panel-contenedor:hover .fv-panel-contenedor-imagen { transform: translateY(-2px); }
.fv-panel-contenedor-imagen .fv-mosaico-etiqueta { top: 14px; left: 14px; }
.fv-panel-contenedor.caducado .fv-panel-contenedor-imagen { opacity: 0.55; }
.fv-panel-contenedor-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }

.fv-panel-contenedor-nombre {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-family: var(--fv-fuente-titulos);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fv-panel-contenedor:first-child .fv-panel-contenedor-nombre { font-size: 26px; }
.fv-panel-contenedor-personas { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fv-secundario); }
.fv-panel-contenedor-personas .fv-avatar { width: 28px; height: 28px; }

/* Sin el panel (red o servidor): un aviso y "Reintentar" */
.fv-panel-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 18px 22px;
    border-radius: 20px;
    background: var(--fv-crema);
    font-size: 15px;
}

/* Tableta: los accesos, más bajos */
@media (max-width: 991.98px) {
    .fv-acceso { min-height: 190px; padding: 24px; }
}

/* Móvil: una columna; el saludo, compacto, para que los recibidos y los accesos rápidos queden arriba */
@media (max-width: 767.98px) {
    .fv-panel, .fv-panel-fila { gap: 16px; }
    .fv-hero-inicio { min-height: 0; gap: 20px; padding: 22px; border-radius: var(--fv-radio-hero); }
    .fv-hero-inicio .fv-titulo-gigante { font-size: 44px; }
    .fv-hero-inicio .fv-entradilla { margin-top: 10px !important; font-size: 15px; }
    .fv-panel-recibidos, .fv-panel-envios, .fv-panel .fv-destacados-equipo { padding: 22px; border-radius: var(--fv-radio-hero); }
    .fv-panel-recibidos-numero { min-height: 70px; font-size: 88px; }
    .fv-panel-recibidos-texto { margin-top: 10px; font-size: 22px; }
    .fv-panel-bloque-cabeza h2, .fv-panel-contenedores .fv-panel-bloque-cabeza h2 { font-size: 24px; }
    .fv-panel-contenedores { margin-top: 8px; }
    .fv-panel-contenedor-imagen { height: 180px; }
    .fv-panel-contenedor-nombre, .fv-panel-contenedor:first-child .fv-panel-contenedor-nombre { font-size: 22px; }
}

/* Móvil estrecho: los tres accesos en una fila, pequeños (el texto de cada uno, solo para quien no ve la tarjeta); en las
   filas de recibidos y envíos, la pastilla baja bajo el texto */
@media (max-width: 575.98px) {
    .fv-accesos-rapidos { gap: 8px; }
    .fv-acceso { gap: 10px; min-height: 116px; padding: 14px 12px; border-radius: 24px; }
    .fv-acceso .fv-icono-circulo { width: 40px; height: 40px; font-size: 17px; }
    .fv-acceso-titulo { font-size: 15px; letter-spacing: -0.02em; line-height: 1.1; }
    .fv-acceso-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .fv-panel-recibido { grid-template-columns: 44px minmax(0, 1fr); }
    .fv-panel-recibido > .fv-pastilla { grid-column: 2; justify-self: start; margin-top: -4px; }
    .fv-panel-envio { grid-template-columns: 56px minmax(0, 1fr); }
    .fv-panel-envio-imagen { width: 56px; height: 56px; border-radius: 16px; }
    .fv-panel-envio > .fv-panel-descargas { grid-column: 2; }
    .fv-panel-bloque-cabeza h2, .fv-panel-contenedores .fv-panel-bloque-cabeza h2 { font-size: 22px; }
    .fv-panel .fv-destacados-equipo .fv-rejilla-destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
    .fv-panel .fv-destacados-equipo .fv-destacado-imagen { height: 120px; }
}

/* ================================================================ Páginas de gestión (Configuración del SUPER) */

.fv-pagina-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.fv-pagina-titulo { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.fv-config-envios { gap: 28px; margin-bottom: 24px; padding: 32px; }
.fv-config-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; }
/* Cuentas del equipo y Correo, una debajo de otra a todo el ancho (18/10/2026) */
.fv-config-columnas { display: flex; flex-direction: column; gap: 24px; }
.fv-config-columnas > .fv-tarjeta { padding: 32px; }
.fv-correo-prueba { max-width: 520px; }

/* Tarjeta con su título y un botón */
.fv-tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.fv-grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.fv-grupo > legend { float: none; width: auto; margin: 0 0 12px; padding: 0; }

/* Opciones en píldora: un radio nativo por opción (teclado y lectores de pantalla) */
.fv-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-opcion { position: relative; margin: 0; }
.fv-opcion input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fv-opcion-caja {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 72px;
    padding: 0 22px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--fv-texto);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-opcion-caja-fila { flex-direction: row; align-items: center; gap: 6px; }
.fv-opcion-caja:hover { background: #FAF9F6; }
.fv-opcion input:checked + .fv-opcion-caja { background: var(--fv-texto); color: #FFFFFF; }
.fv-opcion input:focus-visible + .fv-opcion-caja { box-shadow: var(--fv-anillo-foco); }

.fv-opcion-valor { font-family: var(--fv-fuente-titulos); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.fv-opcion-nota { margin-top: 4px; font-size: 12px; color: var(--fv-secundario); }
.fv-opcion input:checked + .fv-opcion-caja .fv-opcion-nota { color: var(--fv-lima); }
.fv-opcion-unidad { font-size: 14px; }

/* Lista de personas */
.fv-lista { display: flex; flex-direction: column; gap: 8px; }

/* Avatar · datos · rol y estado · menú; en móvil, rol y estado bajan bajo los datos */
.fv-fila-persona {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 14px;
    padding: 14px 16px;
    border-radius: 22px;
    background: #FFFFFF;
}

.fv-fila-persona.desactivada .fv-avatar, .fv-fila-persona.desactivada .fv-fila-persona-datos { opacity: 0.55; }
.fv-avatar-grande { width: 52px; height: 52px; font-size: 16px; }
.fv-fila-persona-datos { display: flex; flex-direction: column; min-width: 0; }
.fv-fila-persona-marcas { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; max-width: 220px; }
.fv-fila-persona-nombre { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.fv-fila-persona-detalle { font-size: 14px; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-fila-persona-detalle:empty { display: none; }
.fv-fila-persona-detalle ~ .fv-fila-persona-detalle { font-size: 13px; }

/* Rol en píldora oscura: "SUPER", "ADMIN" */
.fv-rol {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--fv-texto);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* Datos de solo lectura (Plataforma) */
.fv-datos { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.fv-datos > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fv-datos dt { font-size: 13px; font-weight: 400; color: var(--fv-secundario); }
.fv-datos dd { margin: 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.fv-tarjeta-oscura .fv-datos dt { color: #BFC3B8; }

/* Tarjeta "Correo" de Configuración (hito 6b): datos en texto normal, botones de prueba y su resultado */
.fv-datos-compactos { gap: 14px; }
.fv-datos-compactos dd { font-size: 15px; font-weight: 500; line-height: 1.45; }
.fv-correo-certificado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fv-correo-prueba .fv-campo { background: #FFFFFF; }   /* sobre la tarjeta crema */
.fv-correo-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.fv-correo-resultado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

/* Nota sobre rosa */
.fv-nota-rosa { margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--fv-rosa); font-size: 13px; line-height: 1.5; color: var(--fv-texto); }

/* Lista sencilla (resultado de una invitación) */
.fv-lista-simple { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; font-size: 15px; list-style: none; }
.fv-lista-simple li { padding: 10px 14px; border-radius: 14px; background: var(--fv-crema); overflow-wrap: anywhere; }
.fv-lista-simple li span { color: var(--fv-secundario); }

@media (max-width: 767.98px) {
    .fv-pagina-cabeza > .fv-boton { width: 100%; }
    .fv-config-envios, .fv-config-columnas > .fv-tarjeta { padding: 22px; }
    .fv-opcion-caja { min-height: 60px; padding: 0 18px; }
    .fv-opcion-valor { font-size: 24px; }
    .fv-fila-persona { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; }
    .fv-fila-persona-marcas { grid-column: 2; grid-row: 2; justify-content: flex-start; max-width: none; }
}

/* ================================================================ Contenedores y carpetas (hito 3) */

/* Más piezas comunes: estados en rojo, botones del acento y de borrar, menú "···" */
.fv-pastilla-peligro { background: #FBE9E7; color: var(--fv-peligro); }
.fv-pastilla-rosa { background: var(--fv-rosa); color: var(--fv-granate); font-weight: 500; white-space: normal; }

.fv-boton-acento { background: var(--fv-acento, var(--fv-granate)); color: var(--fv-acento-texto, #FFFFFF); }
.fv-boton-acento:hover { background: var(--fv-acento, var(--fv-granate)); color: var(--fv-acento-texto, #FFFFFF); filter: brightness(0.92); }

.fv-boton-rojo { background: var(--fv-peligro); color: #FFFFFF; }
.fv-boton-rojo:hover { background: #912018; color: #FFFFFF; }
.fv-boton-rojo-borde { background: #FFFFFF; color: var(--fv-peligro); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.45); }
.fv-boton-rojo-borde:hover { background: #FBE9E7; color: var(--fv-peligro); }

.fv-enlace-pequeno { min-height: 32px; padding: 0 4px; font-size: 13px; }

/* Tarjetas que son botones (accesos rápidos del inicio) */
button.fv-tarjeta { border: 0; font: inherit; text-align: left; cursor: pointer; transition: transform 0.15s ease; }
button.fv-tarjeta:hover { transform: translateY(-2px); }

/* Pestañas en píldoras sobre crema (Clientes · Proveedores) */
.fv-pestanas { display: flex; flex: none; gap: 2px; padding: 4px; border-radius: 999px; background: var(--fv-crema); }

.fv-pestanas > button {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-pestanas > button:hover { background: rgba(47, 47, 48, 0.07); }
.fv-pestanas > button[aria-selected="true"] { background: var(--fv-texto); color: #FFFFFF; }
.fv-pestanas > button:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-pagina-intro { max-width: 380px; font-size: 15px; line-height: 1.5; }

/* Desplegable en píldora con borde (orden de una lista): como el "Más recientes ▾" de los bocetos */
.fv-selector-pildora {
    flex: none;
    min-height: 48px;
    padding: 0 44px 0 18px;
    border: 0;
    border-radius: 999px;
    background: #FFFFFF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232F2F30' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 18px center / 12px 12px;
    box-shadow: inset 0 0 0 1px var(--fv-gris);
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
}

.fv-selector-pildora:hover { box-shadow: inset 0 0 0 1px #C9CBD0; }
.fv-selector-pildora:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* Lista de contenedores (boceto Agencia-contenedores) */
.fv-rejilla-contenedores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 28px 22px;
}

.fv-rejilla-contenedores[aria-busy="true"]:empty { min-height: 240px; }

.fv-tarjeta-contenedor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--fv-radio-hero);
    background: none;
    color: var(--fv-texto);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.fv-tarjeta-contenedor:hover { color: var(--fv-texto); }
.fv-tarjeta-contenedor:focus-visible { outline: 3px solid rgba(128, 22, 36, 0.45); outline-offset: 4px; }

.fv-tarjeta-contenedor-imagen {
    position: relative;
    display: block;
    height: 190px;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-cielo) center / cover no-repeat;
    transition: transform 0.15s ease;
}

.fv-tarjeta-contenedor:hover .fv-tarjeta-contenedor-imagen { transform: translateY(-2px); }
.fv-tarjeta-contenedor-imagen .fv-mosaico-etiqueta { top: 14px; left: 14px; }

.fv-tarjeta-contenedor-nombre {
    display: block;
    font-family: var(--fv-fuente-titulos);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.fv-tarjeta-contenedor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--fv-secundario); }
/* Cuántos archivos tiene (19/10/2026): lo primero y más marcado */
.fv-tarjeta-contenedor-archivos { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fv-texto); }
.fv-panel-contenedor-archivos { font-weight: 600; color: var(--fv-texto); white-space: nowrap; }
.fv-tarjeta-contenedor.caducado .fv-tarjeta-contenedor-nombre { color: var(--fv-secundario); }

/* "+ Nuevo contenedor" */
.fv-tarjeta-contenedor-nueva .fv-tarjeta-contenedor-imagen { display: flex; align-items: center; justify-content: center; background: var(--fv-rosa); }
.fv-tarjeta-contenedor-nueva:hover .fv-tarjeta-contenedor-imagen { background: var(--fv-rosa-medio); }

.fv-mas-circulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--fv-granate);
    color: #FFFFFF;
    font-size: 28px;
}

.fv-rejilla-nota { grid-column: 1 / -1; margin: 0; color: var(--fv-secundario); }

/* Cabecera personalizada de una carpeta (componentes/cabecera-contenedor.js) y su vista previa:
   variables que pone aplicarAspecto(): fondo, texto, acento y banner (con un velo oscuro abajo) */
.fv-personalizada {
    --fv-hero-fondo: var(--fv-cielo);
    --fv-hero-texto: var(--fv-texto);
    --fv-acento: var(--fv-granate);
    --fv-acento-texto: #FFFFFF;
    position: relative;
    isolation: isolate;
    background: var(--fv-hero-fondo) center / cover no-repeat;
    color: var(--fv-hero-texto);
}

.fv-personalizada.con-banner { background-image: var(--fv-hero-banner); }

/* Velo más denso abajo, donde van el título y los botones: el texto blanco se lee también sobre un banner casi blanco
   (al menos 3:1, lo que pide WCAG para texto grande) */
.fv-personalizada.con-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(22, 22, 24, 0.74) 0%, rgba(22, 22, 24, 0.58) 45%, rgba(22, 22, 24, 0.2) 80%, rgba(22, 22, 24, 0.06) 100%);
    pointer-events: none;
}

.fv-personalizada.con-banner :is(.fv-titulo-hero, .fv-previa-titulo) { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28); }

.fv-hero-carpeta .fv-titulo-hero { color: inherit; overflow-wrap: anywhere; }
/* Sin la ruta (19/10/2026: en el explorador va encima del contenido): el título y los botones, abajo, como antes */
.fv-hero-carpeta.sin-migas { justify-content: flex-end; min-height: 240px; }
.fv-hero-texto { min-width: 0; }
.fv-hero-carpeta .fv-acciones-info[hidden], .fv-hero-carpeta .fv-acciones[hidden] { display: none; }

/* Tramo actual de la ruta y sección actual, con el acento o en oscuro */
.fv-hero-carpeta .fv-migas a[aria-current="page"] { background: var(--fv-acento); color: var(--fv-acento-texto); font-weight: 600; }
.fv-pildora[aria-current="page"] { background: var(--fv-texto); color: #FFFFFF; }
a.fv-pildora[aria-current="page"]:hover { color: #FFFFFF; box-shadow: none; }
.fv-pildora i { color: var(--fv-secundario); }
.fv-pildora-peligro { color: var(--fv-peligro); }
.fv-pildora-peligro i { color: inherit; }
/* «Privado» (18/10/2026): contenedor que solo ve el SUPER */
.fv-pildora-oscura { background: var(--fv-oscuro); color: #FFFFFF; }
.fv-pildora-oscura i { color: inherit; }
a.fv-pildora-oscura:hover { background: var(--fv-oscuro); color: #FFFFFF; opacity: 0.9; }

.fv-hero-compacto { min-height: 200px; gap: 22px; padding: 22px 28px 24px; }
.fv-hero-compacto .fv-titulo-hero { font-size: clamp(36px, 5vw, 60px); }
.fv-hero-compacto .fv-acciones-info { margin-top: 14px; }

/* Fondo de página de la carpeta: detrás de todo, con un velo crema al 85 % */
body.con-fondo-pagina::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgba(240, 236, 226, 0.85), rgba(240, 236, 226, 0.85)), var(--fv-fondo-pagina) center / cover no-repeat;
    pointer-events: none;
}

/* Explorador (componentes/explorador.js) */
.fv-explorador { margin-top: 32px; }
.fv-explorador-seccion { margin-bottom: 36px; }
.fv-explorador-seccion > h2 { margin: 0 0 16px; font-size: 26px; letter-spacing: -0.03em; }

.fv-carpeta-caja { position: relative; min-width: 0; }

.fv-mosaico-etiquetas {
    position: absolute;
    top: 10px;
    right: 60px;
    left: 10px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fv-mosaico-etiquetas .fv-pastilla { padding: 4px 10px; font-size: 12px; }

.fv-carpeta-menu { position: absolute; top: 10px; right: 10px; z-index: 2; }

.fv-boton-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--fv-texto);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(47, 47, 48, 0.12);
}

.fv-boton-menu:hover { background: #FFFFFF; }
.fv-boton-menu:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* Carpeta vacía o que ya no existe */
.fv-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 24px;
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-crema);
    text-align: center;
}

.fv-vacio-titulo { margin: 4px 0 0; font-size: 28px; }
.fv-vacio .fv-texto-secundario { max-width: 420px; }
.fv-vacio-grande { margin-top: 12px; padding: 72px 24px; }
.fv-vacio-grande .fv-vacio-titulo { font-size: clamp(32px, 4vw, 44px); }

/* Ventana "Nuevo contenedor": para un cliente o un proveedor (radio nativo con su caja) */
.fv-tipos-contenedor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fv-tipo-contenedor { position: relative; margin: 0; }
.fv-tipo-contenedor input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fv-tipo-contenedor-caja {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-tipo-contenedor-punto { width: 40px; height: 40px; border-radius: 50%; }
.fv-tipo-contenedor input:checked + .fv-tipo-contenedor-caja { background: var(--fv-texto); color: #FFFFFF; }
.fv-tipo-contenedor input:focus-visible + .fv-tipo-contenedor-caja { box-shadow: var(--fv-anillo-foco); }

.fv-nota-icono { display: flex; gap: 10px; align-items: flex-start; }
.fv-nota-icono i { margin-top: 3px; color: var(--fv-granate); }

/* Confirmar un borrado */
.fv-icono-peligro { width: 56px; height: 56px; background: #FBE9E7; color: var(--fv-peligro); font-size: 22px; }
.fv-texto-confirmar { color: var(--fv-texto); font-weight: 600; overflow-wrap: anywhere; }

/* Ajustes de una carpeta (boceto Agencia-ajustes): formulario y, a la derecha (debajo en móvil), la vista previa */
.fv-ajustes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; margin-top: 36px; }
.fv-ajustes[hidden] { display: none; }
.fv-ajustes-formulario { display: flex; flex: 1 1 420px; flex-direction: column; gap: 36px; min-width: 0; }
.fv-ajustes-seccion { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fv-ajustes-seccion + .fv-ajustes-seccion { padding-top: 32px; border-top: 1px solid var(--fv-gris); }
.fv-ajustes-seccion h2 { margin: 0; font-size: 28px; }
.fv-ajustes-acciones { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.fv-ajustes-acciones > [data-guardar] { flex: 1 1 220px; }

/* Caducidad: píldoras de radio nativo */
.fv-opcion-chip { position: relative; margin: 0; }
.fv-opcion-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fv-opcion-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--fv-gris);
    color: var(--fv-texto);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fv-opcion-chip span:hover { box-shadow: inset 0 0 0 1px #C9CBD0; }
.fv-opcion-chip input:checked + span { background: var(--fv-texto); box-shadow: none; color: #FFFFFF; font-weight: 500; }
.fv-opcion-chip input:focus-visible + span { box-shadow: var(--fv-anillo-foco); }

.fv-resaltar { border-radius: 24px; animation: fv-resaltar 1.6s ease; }

@keyframes fv-resaltar {
    0%, 100% { box-shadow: 0 0 0 0 rgba(218, 224, 44, 0); }
    25%, 60% { box-shadow: 0 0 0 6px rgba(218, 224, 44, 0.9); }
}

.fv-caducidad-resultado { margin: 14px 0 6px; font-size: 15px; font-weight: 500; }

.fv-aviso-caducado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #FBE9E7;
    color: var(--fv-peligro);
    font-size: 14px;
    line-height: 1.45;
}

.fv-aviso-caducado[hidden] { display: none; }
.fv-aviso-caducado > span { flex: 1 1 220px; }

/* Lo que manda desde arriba (caducidad o contraseñas de la cadena) */
.fv-nota-heredada { margin: 10px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--fv-aviso-fondo); color: var(--fv-aviso); font-size: 13px; line-height: 1.5; }
.fv-nota-heredada[hidden] { display: none; }

/* Banner y fondo */
.fv-imagenes-ajuste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.fv-imagen-ajuste, .fv-color-ajuste { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fv-ajuste-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 22px; }
.fv-origen { font-size: 12px; font-weight: 600; color: var(--fv-secundario); }
.fv-ajuste-botones { display: flex; flex-wrap: wrap; gap: 6px; }

.fv-imagen-ajuste-muestra {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--fv-crema) center / cover no-repeat;
}

.fv-imagen-ajuste-vacia { font-size: 13px; color: var(--fv-secundario); }

.fv-progreso-imagen { position: absolute; right: 12px; bottom: 12px; left: 12px; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.75); }
.fv-progreso-imagen[hidden] { display: none; }
.fv-progreso-imagen > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--fv-granate); transition: width 0.2s ease; }

/* Colores: selector nativo y campo hex */
.fv-colores-ajuste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }

.fv-color-campo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: var(--fv-crema);
}

.fv-color-campo input[type="color"] {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.fv-color-campo input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fv-color-campo input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(47, 47, 48, 0.12); }
.fv-color-campo input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.fv-color-campo input[type="color"]:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-color-campo-texto { display: flex; flex-direction: column; min-width: 0; }
.fv-color-campo-titulo { font-size: 15px; font-weight: 500; }

.fv-color-hex {
    width: 100%;
    max-width: 110px;
    min-height: 28px;
    margin-left: -6px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fv-secundario);
    font-family: inherit;
    font-size: 13px;
    text-transform: uppercase;
}

.fv-color-hex:focus { outline: none; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--fv-granate); color: var(--fv-texto); }

/* Contraseña */
.fv-ajustes-clave-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fv-clave-actual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 12px 12px 18px; border-radius: 20px; background: var(--fv-crema); }
.fv-clave-actual[hidden] { display: none; }
.fv-clave-actual-texto { display: inline-flex; flex: 1 1 160px; align-items: center; gap: 8px; font-weight: 500; }
.fv-clave-actual-texto i { color: var(--fv-secundario); }

/* Vista previa "Así lo verá el cliente" */
.fv-vista-previa {
    position: sticky;
    top: 16px;
    display: flex;
    flex: 1.3 1 460px;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 24px;
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-crema);
}

.fv-vista-previa-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fv-vista-previa-cabeza h2 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }

.fv-previa { overflow: hidden; border-radius: 24px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(47, 47, 48, 0.06); }

.fv-previa-barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #FFFFFF; }
.fv-previa-marca { display: flex; align-items: center; gap: 6px; font-family: var(--fv-fuente-titulos); font-size: 15px; font-weight: 800; letter-spacing: -0.04em; }
.fv-previa-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--fv-granate); }
.fv-previa-nav { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fv-crema); font-size: 11px; }
.fv-previa-nav > span { padding: 4px 10px; border-radius: 999px; }
.fv-previa-nav > .activo { background: var(--fv-texto); color: #FFFFFF; }
.fv-previa-enviar { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--fv-granate); color: #FFFFFF; font-size: 11px; font-weight: 600; white-space: nowrap; }

.fv-previa-pagina { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: #FFFFFF; }

.fv-previa-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 170px;
    padding: 16px 18px;
    border-radius: 20px;
}

.fv-previa-migas { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--fv-texto); font-size: 11px; }
.fv-previa-hero-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }

.fv-previa-titulo {
    min-width: 0;
    font-family: var(--fv-fuente-titulos);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    overflow-wrap: anywhere;
}

.fv-previa-subir { padding: 8px 14px; border-radius: 999px; background: var(--fv-acento); color: var(--fv-acento-texto); font-size: 12px; font-weight: 600; white-space: nowrap; }

.fv-previa-carpetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fv-previa-carpetas > span { display: flex; flex-direction: column; gap: 6px; }
.fv-previa-mosaico { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 84px; overflow: hidden; border-radius: 14px; }
.fv-previa-mosaico > :first-child { grid-row: 1 / span 2; }
.fv-previa-video { display: block; position: relative; background: var(--fv-oscuro); }
.fv-previa-video > span { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #FFFFFF; }
.fv-previa-linea { width: 60%; height: 8px; border-radius: 4px; background: var(--fv-gris); }
.fv-previa-archivos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fv-previa-archivos > span { height: 96px; border-radius: 14px; }

.fv-previa-pdf {
    display: flex;
    align-items: flex-end;
    padding: 10px;
    background: var(--fv-rosa);
    color: var(--fv-granate);
    font-family: var(--fv-fuente-titulos);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

/* Zona de borrado, al pie de los ajustes */
.fv-zona-borrar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: 56px;
    padding: 24px 28px;
    border: 1px solid #F3CFCA;
    border-radius: var(--fv-radio-hero);
    background: #FFF8F7;
}

.fv-zona-borrar[hidden] { display: none; }
.fv-zona-borrar h2 { margin: 0; font-size: 24px; }

@media (max-width: 991.98px) {
    .fv-vista-previa { position: static; }
}

@media (max-width: 767.98px) {
    .fv-tarjeta-contenedor-imagen { height: 170px; }
    .fv-tarjeta-contenedor-nombre { font-size: 24px; }
    .fv-hero-compacto { min-height: 180px; padding: 20px; }
    .fv-ajustes { gap: 32px; margin-top: 28px; }
    .fv-vista-previa { padding: 16px; border-radius: var(--fv-radio-hero); }
    .fv-previa-pagina { padding: 12px; }
    .fv-previa-barra .fv-previa-nav { display: none; }
    .fv-previa-archivos > span { height: 72px; }
    .fv-zona-borrar { padding: 22px; }
    .fv-zona-borrar > .fv-boton { width: 100%; }
}

@media (max-width: 575.98px) {
    .fv-barra-herramientas .fv-pestanas, .fv-barra-herramientas .fv-selector-pildora { width: 100%; }
    .fv-pestanas > button { flex: 1 1 0; }
    .fv-vacio { padding: 36px 20px; }
}

/* ================================================================ Ventanas (modal de Bootstrap) */

.fv-modal .modal-content { border: 0; border-radius: var(--fv-radio-hero); box-shadow: var(--fv-sombra-flotante); }
.fv-modal-cuerpo { display: flex; flex-direction: column; gap: 20px; padding: 28px; }
/* Nunca más alta que la ventana: crece con su contenido hasta el alto de la página y, a partir de ahí, se desplaza su
   interior (18/10/2026; como modal-dialog-scrollable de Bootstrap). El selector de contenedor tiene su propia lista. */
.fv-modal .modal-dialog { height: calc(100% - var(--bs-modal-margin) * 2); }
.fv-modal .modal-content { max-height: 100%; overflow: hidden; }
.fv-modal .fv-modal-cuerpo:not(.fv-selector) { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fv-modal-titulo { margin: 0; font-size: 28px; letter-spacing: -0.035em; line-height: 1; }
.modal-backdrop { --bs-backdrop-bg: #2F2F30; --bs-backdrop-opacity: 0.4; }

/* Campo de emails como chips (componentes/emails.js) */
.fv-emails {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 8px;
    border-radius: var(--fv-radio-campo);
    background: var(--fv-crema);
    cursor: text;
    transition: box-shadow 0.15s ease;
}

.fv-emails:focus-within { box-shadow: inset 0 0 0 2px var(--fv-granate); }
.fv-emails.is-invalid { box-shadow: inset 0 0 0 2px var(--fv-peligro); }

.fv-emails input {
    flex: 1 1 160px;
    min-width: 0;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 15px;
}

.fv-emails input:focus { outline: none; }
.fv-emails input::placeholder { color: #85878B; opacity: 1; }

.fv-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 36px;
    padding: 0 2px 0 12px;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 14px;
}

.fv-email-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fv-email-chip button {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fv-secundario);
    cursor: pointer;
}

.fv-email-chip button:hover { background: var(--fv-crema); color: var(--fv-texto); }
.fv-email-chip.no-valido { background: #FBE9E7; color: var(--fv-peligro); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.35); }

@media (max-width: 575.98px) {
    .fv-modal-cuerpo { padding: 22px 18px; }
}

/* ================================================================ Archivos y subidas (hito 4) */

/* Tarjeta de un archivo (componentes/explorador.js): un botón con el alto de su id (--fv-alto) y el aspecto de su
   grupo hasta que haya miniaturas (hito 5) */
.fv-archivo-vista {
    width: 100%;
    height: var(--fv-alto, 220px);
    padding: 0;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.fv-archivo-vista:hover { transform: translateY(-2px); }
.fv-archivo-vista:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-archivo-vista.fv-archivo-icono { min-height: 0; padding: 20px; }
.fv-archivo-crema { background: var(--fv-crema); }
.fv-archivo-gris { background: var(--fv-gris); }
.fv-archivo-gris .fv-archivo-ext { color: var(--fv-oscuro); }
.fv-archivo-audio { background: var(--fv-verde-claro); }
.fv-archivo-grupo-icono { position: absolute; top: 20px; right: 20px; font-size: 20px; color: var(--fv-oscuro); }
.fv-archivo-ext i { font-size: 40px; }
.fv-archivo-video .fv-reproducir { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 18px; }

/* La extensión deja sitio al círculo de marca cuando se ve (como en el boceto Cliente-contenedor) */
.fv-archivo-icono .fv-archivo-ext { transition: padding-left 0.15s ease; }
:is(.fv-archivo:hover, .fv-archivo.seleccionado, body.con-seleccion .fv-archivo) .fv-archivo-icono .fv-archivo-ext { padding-left: 36px; }

@media (hover: none) {
    .fv-archivo > .fv-archivo-icono .fv-archivo-ext { padding-left: 36px; }
}

/* Pie: nombre y extensión; debajo, quién lo subió, cuándo y cuánto ocupa */
.fv-archivo-pie { flex-direction: column; gap: 2px; }
.fv-archivo-pie-linea { display: flex; justify-content: space-between; gap: 8px; }
.fv-archivo-nombre { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fv-archivo-detalle { overflow: hidden; color: var(--fv-secundario); text-overflow: ellipsis; white-space: nowrap; }

/* Círculo de marca de archivos y carpetas: al pasar el ratón o con el foco; en táctil y con algo elegido, siempre */
.fv-check {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #FFFFFF;
    background: rgba(47, 47, 48, 0.32);
    box-shadow: 0 1px 4px rgba(47, 47, 48, 0.25);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.fv-check i { opacity: 0; }
.fv-check:focus-visible { outline: none; opacity: 1; box-shadow: var(--fv-anillo-foco); }
:is(.fv-archivo, .fv-carpeta-caja):hover > .fv-check, body.con-seleccion .fv-check { opacity: 1; }
.seleccionado > .fv-check { border-color: var(--fv-granate); background: var(--fv-granate); opacity: 1; }
.seleccionado > .fv-check i { opacity: 1; }

@media (hover: none) {
    .fv-check { opacity: 1; }
}

.fv-carpeta-caja { -webkit-touch-callout: none; }
.fv-carpeta-caja .fv-carpeta { -webkit-user-select: none; user-select: none; }
.fv-carpeta-caja .fv-check { top: 12px; left: 12px; }
.fv-carpeta-caja .fv-mosaico-etiquetas { left: 50px; }
.fv-carpeta-caja.seleccionado .fv-mosaico { outline: 3px solid var(--fv-granate); outline-offset: 3px; }

/* Carga por páginas */
.fv-centinela { height: 1px; }
.fv-cargando { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; font-size: 14px; color: var(--fv-secundario); }

/* "···" de la barra flotante: hacia arriba, con el aspecto de los menús */
.fv-barra-seleccion .dropdown-menu { margin-bottom: 8px; }
.fv-barra-seleccion [data-cuenta] { white-space: nowrap; }

/* En un móvil, la barra en una línea: "Descargar" solo con su icono */
@media (max-width: 575.98px) {
    .fv-barra-seleccion .fv-barra-texto { display: none; }
}

/* Ventana "Nombre repetido" (boceto Comun-subida): radio nativo dentro de su caja */
.fv-repetido-cabecera { display: flex; align-items: center; gap: 14px; }
.fv-repetido .fv-modal-titulo { font-size: 26px; line-height: 1.05; overflow-wrap: anywhere; }

.fv-repetido-icono {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-family: var(--fv-fuente-titulos);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.fv-repetido-icono.fv-subida-icono-documento { background: var(--fv-crema); }

.fv-eleccion {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 16px 18px;
    border: 2px solid var(--fv-gris);
    border-radius: 20px;
    background: #FFFFFF;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fv-eleccion input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fv-granate); }
.fv-eleccion strong { font-size: 16px; font-weight: 600; }
.fv-eleccion-ayuda { display: block; margin-top: 2px; font-size: 14px; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-eleccion.elegida { border-color: var(--fv-granate); background: var(--fv-rosa); }
.fv-eleccion:has(input:focus-visible) { box-shadow: var(--fv-anillo-foco); }

.fv-casilla-fila { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-size: 15px; cursor: pointer; }
.fv-casilla-fila input { flex: none; width: 20px; height: 20px; }

/* Capa "Suelta para subir a…" (arrastrar archivos encima de una carpeta) */
.fv-soltar {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 3px dashed var(--fv-granate);
    background: rgba(128, 22, 36, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.fv-soltar.visible { opacity: 1; visibility: visible; }

.fv-soltar-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 420px;
    padding: 28px 36px;
    border-radius: var(--fv-radio-hero);
    background: #FFFFFF;
    box-shadow: var(--fv-sombra-flotante);
    font-size: 18px;
    text-align: center;
    overflow-wrap: anywhere;
}

.fv-soltar .fv-icono-circulo { background: var(--fv-granate); color: #FFFFFF; }

/* Panel de subida (componentes/subidas.js; boceto Comun-subida): abajo a la derecha, fijo; en móvil, encima de la
   barra inferior. Con algo elegido en el explorador, sube para no tapar la barra flotante */
.fv-subidas {
    position: fixed;
    right: 24px;
    bottom: calc(24px + var(--fv-alto-nav-inferior));
    z-index: 1032;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 380px;
    max-width: calc(100vw - 32px);
}

.fv-subidas[hidden] { display: none; }
body.con-seleccion .fv-subidas { bottom: calc(100px + var(--fv-alto-nav-inferior)); }

.fv-subidas-caja {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 48px - var(--fv-alto-nav-inferior));
    padding: 20px 20px 18px;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-crema);
    box-shadow: var(--fv-sombra-flotante);
}

.fv-subidas[data-modo="interrumpida"] .fv-subidas-caja { background: var(--fv-aviso-fondo); }
.fv-subidas.plegado .fv-subidas-caja { display: none; }

/* Plegado: una píldora con el porcentaje */
.fv-subidas-pildora {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px 0 10px;
    border: 0;
    border-radius: 999px;
    background: var(--fv-texto);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--fv-sombra-flotante);
    cursor: pointer;
}

.fv-subidas.plegado .fv-subidas-pildora { display: inline-flex; }
.fv-subidas-pildora:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-subidas.plegado { width: auto; }   /* solo la píldora: nada invisible tapa la página */

.fv-subidas-cabecera { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.fv-subidas-titulo { flex: 1; min-width: 0; margin: 0; font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; }

.fv-subidas-icono {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-texto);
    cursor: pointer;
}

.fv-subidas-icono[hidden] { display: none; }
.fv-subidas-icono:hover { background: #F7F5EF; }
.fv-subidas-icono:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-subidas-cuerpo { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Recipiente que se llena según los bytes subidos, con la ola animada */
.fv-recipiente {
    position: relative;
    flex: none;
    align-self: center;
    width: 210px;
    height: 150px;
    overflow: hidden;
    border: 3px solid var(--fv-granate);
    border-radius: 26px;
    background: #FFFFFF;
}

.fv-recipiente-llenado { position: absolute; right: 0; bottom: 0; left: 0; height: 0; background: var(--fv-rosa-fuerte); transition: height 0.4s ease; }

.fv-ola {
    position: absolute;
    top: -12px;
    left: 0;
    width: 200%;
    height: 14px;
    color: var(--fv-rosa-fuerte);
    animation: fv-ola 3s linear infinite;
}

.fv-ola svg { display: block; width: 100%; height: 14px; fill: currentColor; }

@keyframes fv-ola {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.fv-recipiente-porcentaje {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fv-fuente-titulos);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--fv-texto);
}

.fv-recipiente-porcentaje span { margin-left: 2px; font-size: 22px; }
.fv-subidas.en-pausa .fv-ola { animation-play-state: paused; }

/* Interrumpida: borde discontinuo y los tonos de aviso, sin ola */
.fv-subidas[data-modo="interrumpida"] .fv-recipiente { border-style: dashed; border-color: var(--fv-aviso); }
.fv-subidas[data-modo="interrumpida"] .fv-recipiente-llenado { background: #F6DDBE; }
.fv-subidas[data-modo="interrumpida"] .fv-ola { display: none; }
.fv-subidas[data-modo="interrumpida"] .fv-recipiente-porcentaje { color: var(--fv-aviso); }

.fv-recipiente.fv-recipiente-mini { width: 30px; height: 24px; border-width: 2px; border-radius: 8px; }
.fv-subidas-pildora .fv-recipiente-llenado { background: var(--fv-rosa-fuerte); }

.fv-subidas-resumen { margin: 0; font-size: 14px; line-height: 1.45; text-align: center; color: var(--fv-secundario); }
.fv-subidas[data-modo="interrumpida"] .fv-subidas-resumen { font-size: 15px; color: var(--fv-texto); }

/* Una fila por archivo suelto o por carpeta arrastrada */
.fv-subidas-lista { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fv-subida-fila { display: flex; align-items: flex-start; gap: 12px; }

.fv-subida-icono {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 14px;
    font-family: var(--fv-fuente-titulos);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fv-subida-icono-carpeta { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; place-items: stretch; place-content: stretch; gap: 2px; }
.fv-subida-icono-video { color: #FFFFFF; font-size: 12px; }
.fv-subida-icono-pdf { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-subida-icono-documento { background: #FFFFFF; color: var(--fv-texto); }
.fv-subida-icono-otro { background: var(--fv-gris); color: var(--fv-oscuro); }

.fv-subida-texto { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.fv-subida-linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; font-size: 14px; }
.fv-subida-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-subida-linea .fv-pastilla { flex: none; padding: 2px 10px; font-size: 12px; }
.fv-subida-cuenta { flex: none; font-size: 13px; color: var(--fv-secundario); }
.fv-subida-barra { height: 6px; overflow: hidden; border-radius: 999px; background: #FFFFFF; }
.fv-subida-barra > span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--fv-granate); transition: width 0.3s ease; }
.fv-subida-fila.con-error .fv-subida-barra > span { background: var(--fv-peligro); }
.fv-subida-detalle { font-size: 12.5px; line-height: 1.4; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-subida-detalle a { color: var(--fv-granate); }
.fv-subida-error { color: var(--fv-peligro); }

.fv-subidas-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fv-subidas-acciones:empty { display: none; }
.fv-subidas-acciones .dropup { width: 100%; }
.fv-subidas-acciones .dropdown-menu { width: 100%; }
.fv-subidas-botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 767.98px) {
    .fv-subidas { right: 12px; left: 12px; width: auto; max-width: none; bottom: calc(12px + var(--fv-alto-nav-inferior)); }
    .fv-subidas.plegado { left: auto; }
    body.con-seleccion .fv-subidas { bottom: calc(96px + var(--fv-alto-nav-inferior)); }
    .fv-subidas-caja { max-height: calc(100vh - 120px - var(--fv-alto-nav-inferior)); padding: 16px 16px 14px; }
    .fv-recipiente { width: 170px; height: 118px; }
    .fv-recipiente-porcentaje { font-size: 40px; }
}

@media (max-width: 575.98px) {
    .fv-archivo-vista { height: calc(var(--fv-alto, 220px) * 0.62); }
    .fv-archivo-vista.fv-archivo-icono { min-height: 0; padding: 14px; }
    .fv-archivo-video .fv-reproducir { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 15px; }
    .fv-archivo-grupo-icono { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .fv-ola { animation: none; }
    .fv-archivo-vista:hover { transform: none; }
}

/* ================================================================ Miniaturas (hito 5; componentes/explorador.js) */

/* Con miniatura o esperándola: la proporción real (--fv-proporcion, entre 9:16 y 2:1) en vez del alto fijo */
.fv-archivo-vista.fv-archivo-miniatura,
.fv-archivo-vista.fv-archivo-esperando { height: auto; aspect-ratio: var(--fv-proporcion, 4 / 3); }
.fv-archivo-vista.fv-archivo-miniatura.fv-archivo-video { background: var(--fv-oscuro); }

/* La imagen aparece suave al cargar (la clase "cargada" la pone el explorador) */
.fv-miniatura { opacity: 0; transition: opacity 0.35s ease; }
.fv-miniatura.cargada { opacity: 1; }
.fv-archivo-miniatura > .fv-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Esperando la miniatura: un brillo suave que recorre la tarjeta */
.fv-archivo-esperando {
    background: linear-gradient(100deg, var(--fv-crema) 30%, #F8F5EE 50%, var(--fv-crema) 70%);
    background-size: 300% 100%;
    animation: fv-brillo 1.6s ease-in-out infinite;
}

.fv-archivo-esperando.fv-archivo-video { background-image: linear-gradient(100deg, var(--fv-oscuro) 30%, #565D50 50%, var(--fv-oscuro) 70%); }

@keyframes fv-brillo {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* Duración de un vídeo: 0:20, 1:02:15 */
.fv-duracion {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(47, 47, 48, 0.72);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* Imagen sin vista previa: su extensión sobre el tono (como el resto de tarjetas de icono) */
.fv-archivo-icono.fv-archivo-imagen .fv-archivo-ext { color: var(--fv-oscuro); }

/* Mosaico de carpeta con sus muestras: las imágenes aparecen sobre el crema */
.fv-mosaico > .fv-miniatura { display: block; min-width: 0; min-height: 0; }

@media (max-width: 575.98px) {
    .fv-duracion { right: 8px; bottom: 8px; padding: 2px 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .fv-archivo-esperando { animation: none; }
}

/* ================================================================ Visor (hito 5; componentes/visor.js, boceto Comun-visor) */

body.con-visor { overflow: hidden; }

/* Encima de la cabecera, la barra de selección y el panel de subidas; debajo de las ventanas y los avisos */
.fv-visor {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    background: var(--fv-texto);
    color: #FFFFFF;
    outline: none;
}

.fv-visor :is(button, a):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(218, 224, 44, 0.85); }

.fv-visor-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; }
.fv-visor-titulo { display: flex; flex: 1 1 240px; align-items: center; gap: 12px; min-width: 0; }

.fv-visor-posicion {
    display: flex;
    flex: none;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--fv-lima);
    color: var(--fv-texto);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.fv-visor-nombre-caja { min-width: 0; }

.fv-visor-nombre {
    margin: 0;
    overflow: hidden;
    color: #FFFFFF;
    font-family: var(--fv-fuente-titulos);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fv-visor-tipo { font-size: 13px; color: #BFC3B8; }

.fv-visor-acciones { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fv-oscuro); }

.fv-visor-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #FFFFFF;
    font-size: 20px;
}

.fv-visor-boton:hover { background: rgba(255, 255, 255, 0.08); }
.fv-visor-boton[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); }

.fv-visor-descargar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-size: 15px;
    font-weight: 600;
}

.fv-visor-descargar:hover { background: #F7F5EF; }

.fv-visor-cerrar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fv-oscuro);
    color: #FFFFFF;
    font-size: 22px;
}

.fv-visor-cerrar:hover { background: #565D50; }

.fv-visor-cuerpo { display: flex; flex: 1; gap: 20px; min-height: 0; padding: 4px 20px 24px; }

/* La escena: el archivo entre las dos flechas. Los gestos (deslizar, arrastrar) los lleva el visor */
.fv-visor-escena {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 76px;
    touch-action: none;
}

.fv-visor-contenido { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }

.fv-visor-flecha {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.fv-visor-flecha:disabled { opacity: 0.3; }
.fv-visor-anterior { left: 4px; }
.fv-visor-siguiente { right: 4px; }

/* Imagen: ajustada a la escena; ampliada (visor.js: rueda, pellizco, doble clic o lupa) con transform desde su centro,
   ocupando toda la escena, también bajo las flechas (18/10/2026, zoom tipo Fancybox) */
.fv-visor-lienzo { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; touch-action: none; }

.fv-visor-imagen {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    transform-origin: 50% 50%;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.28s;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.fv-visor-imagen.moviendo { transition: none; }
.fv-visor-escena.con-zoom { overflow: hidden; }
.fv-visor-escena.con-zoom .fv-visor-lienzo { cursor: grab; }
.fv-visor-escena.con-zoom .fv-visor-lienzo.arrastrando { cursor: grabbing; }
.fv-visor-escena.con-zoom .fv-visor-imagen { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
    .fv-visor-imagen { transition: none; }
}

/* Vídeo y PDF */
.fv-visor-video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }

/* Vídeo del visor con Video.js (componentes/reproductor.js, 18/10/2026): los colores y la letra de la marca */
.fv-visor-contenido > .video-js { width: 100%; height: 100%; }
.video-js.fv-videojs { overflow: hidden; border-radius: 12px; background-color: transparent; font-family: var(--fv-fuente-texto, inherit); font-size: 14px; }
.video-js.fv-videojs .vjs-tech { object-fit: contain; }
.video-js.fv-videojs .vjs-poster { background-color: transparent; }
.video-js.fv-videojs .vjs-poster img { object-fit: contain; }
.video-js.fv-videojs .vjs-big-play-button {
    width: 84px;
    height: 84px;
    margin-top: -42px;
    margin-left: -42px;
    border: 0;
    border-radius: 50%;
    background-color: var(--fv-granate);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    font-size: 48px;
    line-height: 84px;
    transition: transform 0.15s, background-color 0.15s;
}
.video-js.fv-videojs:hover .vjs-big-play-button,
.video-js.fv-videojs .vjs-big-play-button:focus { background-color: var(--fv-granate-hover); transform: scale(1.06); }
.video-js.fv-videojs .vjs-big-play-button .vjs-icon-placeholder::before { line-height: 84px; }
.video-js.fv-videojs .vjs-control-bar { height: 3.6em; padding: 0 6px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
.video-js.fv-videojs .vjs-play-progress,
.video-js.fv-videojs .vjs-volume-level { background-color: var(--fv-lima); }
.video-js.fv-videojs .vjs-play-progress::before,
.video-js.fv-videojs .vjs-volume-level::before { color: var(--fv-lima); }
.video-js.fv-videojs .vjs-slider { background-color: rgba(255, 255, 255, 0.25); }
.video-js.fv-videojs .vjs-load-progress div { background-color: rgba(255, 255, 255, 0.35); }
.video-js.fv-videojs .vjs-menu-button-popup .vjs-menu .vjs-menu-content { border-radius: 10px; background-color: rgba(47, 47, 48, 0.95); }
.video-js.fv-videojs .vjs-menu li.vjs-selected { background-color: var(--fv-lima); color: #2F2F30; }
.video-js.fv-videojs .vjs-control:focus-visible { outline: 2px solid var(--fv-lima); outline-offset: -2px; }

/* Móvil: sin saltar 10 s, volumen (los botones del teléfono) ni imagen en imagen, para que quepa la barra de progreso */
@media (max-width: 575.98px) {
    .video-js.fv-videojs .vjs-control { width: 3.2em; }
    .video-js.fv-videojs .vjs-skip-backward-10,
    .video-js.fv-videojs .vjs-skip-forward-10,
    .video-js.fv-videojs .vjs-volume-panel,
    .video-js.fv-videojs .vjs-picture-in-picture-control { display: none; }
    .video-js.fv-videojs .vjs-progress-control { width: auto; flex: 1 1 auto; }
}
.fv-visor-pdf { width: 100%; height: 100%; border: 0; border-radius: 12px; background: #FFFFFF; }

/* Audio: su tarjeta con el icono y la duración, y el reproductor */
.fv-visor-audio { display: flex; flex-direction: column; gap: 18px; width: min(100%, 480px); }

.fv-visor-audio-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    aspect-ratio: 4 / 3;
    padding: 28px;
    border-radius: 24px;
    background: var(--fv-verde-claro);
    color: var(--fv-texto);
}

.fv-visor-audio-tarjeta > i { position: absolute; top: 28px; right: 28px; font-size: 28px; color: var(--fv-oscuro); }
.fv-visor-audio-ext { font-family: var(--fv-fuente-titulos); font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.fv-visor-audio-duracion { font-size: 15px; color: var(--fv-secundario); font-variant-numeric: tabular-nums; }
.fv-visor-reproductor { width: 100%; }

/* Sin vista previa: icono grande con la extensión, el motivo y Descargar */
.fv-visor-sin-vista { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 420px; text-align: center; }

.fv-visor-icono {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 240px;
    height: 200px;
    padding: 24px;
    overflow: hidden;
    border-radius: 24px;
    color: var(--fv-texto);
    text-align: left;
}

.fv-visor-icono .fv-archivo-ext { font-size: 56px; }
.fv-visor-icono.fv-archivo-icono .fv-archivo-ext { padding-left: 0; } /* aquí no hay círculo de selección */
.fv-visor-icono.fv-archivo-video .fv-reproducir { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 18px; }
.fv-visor-sin-vista-texto { margin: 0; color: #E4E5E8; font-size: 16px; line-height: 1.5; }
.fv-visor-sin-vista-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Información: a la derecha en escritorio */
.fv-visor-info {
    display: none;
    flex: 0 0 320px;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    overflow-y: auto;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-oscuro);
    font-size: 14px;
}

.con-info .fv-visor-info { display: flex; }
.fv-visor-info-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.fv-visor-info-titulo {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--fv-fuente-titulos);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.fv-visor-info-cerrar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-size: 18px;
}

.fv-visor-info-cuerpo { display: flex; flex-direction: column; gap: 18px; }
.fv-visor-persona { display: flex; align-items: center; gap: 12px; }
.fv-visor-etiqueta { font-size: 12px; font-weight: 400; color: #BFC3B8; }
.fv-visor-valor { margin: 2px 0 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.fv-visor-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.fv-visor-dato { padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); }
.fv-visor-dato-ancho { grid-column: 1 / -1; }
.fv-visor-ruta { display: flex; flex-wrap: wrap; gap: 6px; }

.fv-visor-ruta a {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: none;
}

.fv-visor-ruta a:hover { background: rgba(255, 255, 255, 0.24); color: #FFFFFF; }

/* Tableta y móvil: la información, como hoja inferior (cerrada al abrir) */
@media (max-width: 991.98px) {
    .fv-visor-cuerpo { gap: 0; padding: 0 0 12px; }
    .fv-visor-escena { padding: 0 12px; }
    .fv-visor-flecha { width: 44px; height: 44px; margin-top: -22px; font-size: 16px; }
    .fv-visor-anterior { left: 8px; }
    .fv-visor-siguiente { right: 8px; }

    .fv-visor-info {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: flex;
        max-height: 72vh;
        border-radius: var(--fv-radio-hero) var(--fv-radio-hero) 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
        visibility: hidden;
        transform: translateY(100%);
        transition: transform 0.25s ease, visibility 0.25s;
    }

    .con-info .fv-visor-info { visibility: visible; transform: none; }
    .fv-visor-info-cerrar { display: flex; }
}

@media (max-width: 575.98px) {
    .fv-visor-cabecera { flex-wrap: nowrap; gap: 8px; padding: 12px; }
    .fv-visor-titulo { flex: 1 1 0; gap: 8px; }
    .fv-visor-posicion { min-height: 28px; padding: 0 10px; font-size: 12px; }
    .fv-visor-nombre { font-size: 17px; }
    .fv-visor-tipo { font-size: 12px; }
    .fv-visor-descargar { width: 44px; padding: 0; }
    .fv-visor-descargar-texto { display: none; }
    .fv-visor-cerrar { width: 44px; height: 44px; font-size: 20px; }
    .fv-visor-icono { width: 200px; height: 170px; }
    .fv-visor-icono .fv-archivo-ext { font-size: 46px; }
    .fv-visor-audio-ext { font-size: 52px; }
}

/* ================================================================ Envíos (hito 6) */

/* Fondo de las pantallas de envío (componentes/fondos.js): debajo, un degradado con los colores de la marca; encima,
   cuando ha llegado, la foto elegida al azar con un velo suave (más denso a la izquierda, donde va la tarjeta) */
body.con-fondo-envio { background: var(--fv-piedra); }

body.con-fondo-envio::before,
body.con-fondo-envio::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body.con-fondo-envio::before {
    background:
        radial-gradient(60% 70% at 88% 10%, rgba(128, 22, 36, 0.5), rgba(128, 22, 36, 0) 70%),
        radial-gradient(55% 60% at 8% 92%, rgba(210, 186, 131, 0.8), rgba(210, 186, 131, 0) 70%),
        radial-gradient(70% 70% at 72% 88%, rgba(183, 205, 209, 0.95), rgba(183, 205, 209, 0) 70%),
        linear-gradient(160deg, var(--fv-rosa-medio) 0%, var(--fv-crema) 45%, var(--fv-piedra) 100%);
}

body.con-fondo-envio::after {
    background:
        linear-gradient(90deg, rgba(22, 22, 24, 0.34) 0%, rgba(22, 22, 24, 0.12) 50%, rgba(22, 22, 24, 0.04) 100%),
        var(--fv-fondo-envio, none) center / cover no-repeat;
    opacity: 0;
    transition: opacity 0.6s ease;
}

body.fondo-envio-foto::after { opacity: 1; }

/* La cabecera de la app, translúcida sobre el fondo */
body.con-fondo-envio .fv-cabecera { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(14px); }

/* Píldoras y avisos propios de los envíos */
.fv-pastilla-oscura { background: var(--fv-texto); color: #FFFFFF; }
.fv-pastilla-marca { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-pastilla-punto::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fv-pastilla-no-disponible { align-self: flex-start; padding: 3px 10px; font-size: 12px; font-weight: 500; }
.fv-pildora-aviso { background: var(--fv-aviso-fondo); color: var(--fv-aviso); }
.fv-pildora-aviso i { color: inherit; }

/* ---------------------------------------------------------------- Nuevo envío (#/enviar; boceto Agencia-nuevo-envio) */

.fv-pagina-envio { display: flex; align-items: center; min-height: calc(100vh - 170px); min-height: calc(100dvh - 170px); }

.fv-envio-tarjeta {
    width: 100%;
    max-width: 420px;
    margin-left: clamp(0px, 4vw, 56px);
    overflow: hidden;
    border-radius: var(--fv-radio-hero);
    background: #FFFFFF;
    box-shadow: var(--fv-sombra-flotante);
}

.fv-envio-arriba { display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 20px; }
.fv-envio-abajo { display: flex; flex-direction: column; gap: 14px; padding: 20px 28px 28px; border-top: 1px solid var(--fv-gris); }

/* "+ Añade archivos" con "una carpeta" y "desde un contenedor" */
.fv-envio-anadir { display: flex; align-items: center; gap: 16px; }

.fv-envio-mas {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fv-granate);
    color: #FFFFFF;
    font-size: 26px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.fv-envio-mas:hover { background: var(--fv-granate-hover); transform: scale(1.04); }
.fv-envio-mas:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-envio-anadir-titulo {
    font-family: var(--fv-fuente-titulos);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.fv-envio-anadir-enlaces { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 2px; }
.fv-envio-anadir-enlaces .fv-enlace { align-self: auto; min-height: 44px; padding: 0; font-size: 14px; }
.fv-envio-anadir-enlaces .fv-enlace[hidden] { display: none; }

/* Lo que se envía: archivo o carpeta, su procedencia, su tamaño y × */
.fv-envio-elementos { display: flex; flex-direction: column; max-height: 264px; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.fv-envio-elementos:empty { display: none; }

.fv-envio-elemento {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border-top: 1px solid var(--fv-gris);
    font-size: 14px;
}

.fv-envio-elemento-icono {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--fv-crema);
    color: var(--fv-oscuro);
    font-size: 14px;
}

.fv-envio-elemento-texto { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.fv-envio-elemento-nombre { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fv-envio-elemento-origen { font-weight: 400; color: var(--fv-secundario); }
.fv-envio-elemento-detalle { font-size: 12px; color: var(--fv-secundario); }
.fv-envio-elemento-tamano { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--fv-secundario); }

.fv-envio-quitar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fv-secundario);
    font-size: 16px;
    cursor: pointer;
}

.fv-envio-quitar:hover { background: var(--fv-crema); color: var(--fv-texto); }
.fv-envio-quitar:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* Total frente al máximo (en rojo si se pasa) */
.fv-envio-total { display: flex; flex-direction: column; gap: 6px; }
.fv-envio-barra { height: 6px; overflow: hidden; border-radius: 3px; background: var(--fv-crema); }
.fv-envio-barra > span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--fv-granate); transition: width 0.3s ease; }
.fv-envio-total-texto { font-size: 13px; color: var(--fv-secundario); }
.fv-envio-total.se-pasa .fv-envio-barra > span { background: var(--fv-peligro); }
.fv-envio-total.se-pasa .fv-envio-total-texto { color: var(--fv-peligro); font-weight: 600; }

/* Para, mensaje, caducidad y Enviar */
.fv-envio-abajo .fv-emails { min-height: 48px; padding: 6px; }
.fv-envio-error { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--fv-peligro); }
.fv-envio-error:empty { display: none; }
textarea.fv-envio-mensaje { min-height: 52px; padding: 12px 16px; resize: vertical; }

.fv-envio-plazos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fv-envio-plazos-etiqueta { margin-right: 4px; font-size: 13px; color: var(--fv-secundario); }
.fv-envio-plazos .fv-opcion-chip { flex: 1 1 0; min-width: 0; }
.fv-envio-plazos .fv-opcion-chip span { justify-content: center; width: 100%; padding: 0 8px; }
.fv-envio-hasta { margin: -4px 0 0; font-size: 13px; color: var(--fv-secundario); }
.fv-envio-abajo [data-enviar] { margin-top: 4px; }
.fv-envio-pie { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--fv-secundario); }

/* Enviando: el recipiente grande y redondo, el porcentaje y Cancelar */
.fv-envio-progreso,
.fv-envio-hecho { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 28px 32px; text-align: center; }

.fv-recipiente-envio { width: 220px; height: 220px; border-radius: 50%; }
.fv-recipiente-envio .fv-recipiente-porcentaje { font-size: 64px; }
.fv-recipiente-envio .fv-recipiente-porcentaje span { font-size: 28px; }
.fv-recipiente-envio.con-problema { border-style: dashed; border-color: var(--fv-aviso); }
.fv-recipiente-envio.con-problema .fv-recipiente-llenado { background: #F6DDBE; }
.fv-recipiente-envio.con-problema .fv-ola { display: none; }
.fv-recipiente-envio.con-problema .fv-recipiente-porcentaje { color: var(--fv-aviso); }

.fv-envio-progreso-titulo { margin: 6px 0 0; font-size: 28px; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.fv-envio-progreso-texto { margin: 8px 0 0; font-size: 14px; color: var(--fv-secundario); }
.fv-envio-progreso-error { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--fv-aviso); }

/* ¡Enviado! */
.fv-envio-hecho { padding-top: 48px; }

.fv-envio-hecho-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--fv-ok-fondo);
    color: var(--fv-ok);
    font-size: 48px;
}

.fv-envio-hecho-titulo { margin: 0; font-size: 44px; letter-spacing: -0.045em; line-height: 0.95; }
.fv-envio-hecho-titulo:focus { outline: none; }
.fv-envio-hecho-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fv-oscuro); }
.fv-envio-hecho [data-otro] { margin-top: 8px; }

/* ---------------------------------------------------------------- Selector "desde un contenedor" (selector-contenedor.js) */

.fv-modal-selector .modal-content { height: calc(100dvh - 3.5rem); max-height: 880px; }
.fv-selector { flex: 1 1 auto; min-height: 0; gap: 14px; }
.fv-selector-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.fv-selector-migas button {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.fv-selector-migas button:hover { background: var(--fv-piedra); }
.fv-selector-migas button[aria-current="page"] { background: var(--fv-texto); color: #FFFFFF; font-weight: 500; }
.fv-selector-migas button:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-selector .fv-buscador[hidden] { display: none; }

.fv-selector-cuerpo { flex: 1 1 auto; min-height: 200px; margin: 0 -28px; padding: 4px 28px; overflow-y: auto; overscroll-behavior: contain; }
.fv-selector-cuerpo .fv-explorador-seccion { margin-bottom: 24px; }
.fv-selector-cuerpo .fv-explorador-seccion > h2 { font-size: 22px; }

/* Aquí se elige: los círculos de marca, siempre a la vista */
.fv-selector .fv-check { opacity: 1; }
.fv-selector .fv-archivo-icono .fv-archivo-ext { padding-left: 36px; }

.fv-selector-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--fv-gris); }
.fv-selector-cuenta { flex: 1 1 auto; font-size: 14px; color: var(--fv-secundario); }
.fv-selector-cuenta strong { color: var(--fv-texto); font-weight: 600; }

/* ---------------------------------------------------------------- Tarjetas de envío (Mis envíos y Todos los envíos) */

.fv-rejilla-envios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 24px; }
.fv-rejilla-envios-todos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.fv-rejilla-vacia { grid-column: 1 / -1; }
.fv-mas-envios { display: flex; justify-content: center; margin-top: 28px; }
.fv-mas-envios[hidden] { display: none; }

/* Mosaico: hasta 3 miniaturas o, sin ninguna, la extensión de su primer archivo en grande */
.fv-mosaico-envio { height: 180px; }
.fv-mosaico-envio.fv-mosaico-uno > :first-child { grid-row: auto; }
.fv-mosaico-envio > .fv-miniatura { width: 100%; height: 100%; object-fit: cover; }

.fv-mosaico-envio-icono { display: flex; align-items: flex-end; padding: 18px; color: var(--fv-oscuro); }
.fv-mosaico-envio-pdf { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-mosaico-envio-documento { background: var(--fv-crema); color: #CBC5B5; }

/* Sin miniaturas y con una pastilla abajo a la izquierda ("1 ya no disponible", "12 archivos"): la extensión, a la derecha */
.fv-tarjeta-envio-imagen:has(.fv-tarjeta-envio-aviso) .fv-mosaico-envio-icono,
.fv-tarjeta-todos-imagen .fv-mosaico-envio-icono { justify-content: flex-end; }

.fv-mosaico-envio-ext {
    font-family: var(--fv-fuente-titulos);
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.9;
}

.fv-tarjeta-envio {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 10px 10px 18px;
    border: 1px solid var(--fv-gris);
    border-radius: var(--fv-radio-hero);
    background: #FFFFFF;
    color: var(--fv-texto);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.fv-tarjeta-envio:hover { color: var(--fv-texto); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(47, 47, 48, 0.1); }
.fv-tarjeta-envio.caducado .fv-mosaico-envio, .fv-tarjeta-todos.caducado .fv-mosaico-envio { opacity: 0.75; filter: grayscale(0.6); }

.fv-tarjeta-envio-imagen { position: relative; display: block; }
.fv-tarjeta-envio-etiquetas { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.fv-tarjeta-envio-etiquetas .fv-pastilla, .fv-tarjeta-envio-aviso { padding: 4px 10px; font-size: 12px; }
.fv-tarjeta-envio-aviso { position: absolute; bottom: 10px; left: 10px; z-index: 1; }

.fv-tarjeta-envio-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 0 8px; }

.fv-tarjeta-envio-titulo {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--fv-fuente-titulos);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.fv-tarjeta-envio-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--fv-secundario); }
.fv-tarjeta-envio-para { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fv-tarjeta-envio-emails { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

/* Sin terminar: borde discontinuo, lo que falta y sus dos acciones */
.fv-tarjeta-envio-borrador { border-style: dashed; border-color: #CBC5B5; }
.fv-tarjeta-envio-enlace { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.fv-tarjeta-envio-enlace:hover { color: inherit; }
.fv-tarjeta-envio-falta { margin: 0; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--fv-aviso); }
.fv-tarjeta-envio-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; }

/* Descargas «2 de 3»: un punto por destinatario; lima si todos, naranja si algunos */
.fv-descargas {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fv-crema);
    color: var(--fv-oscuro);
    font-size: 13px;
    font-weight: 600;
}

.fv-descargas-todos { background: var(--fv-lima); color: var(--fv-texto); }
.fv-descargas-algunos { background: var(--fv-aviso-fondo); color: var(--fv-aviso); }
.fv-descargas-puntos { display: flex; gap: 4px; }
.fv-descargas-puntos > span { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.fv-descargas-puntos > span.lleno { background: currentColor; }

/* Todos los envíos (solo SUPER; boceto Super-todos-envios) */
.fv-filtros-envios { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.fv-filtros-envios-grupos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.fv-separador-vertical { width: 1px; height: 28px; background: var(--fv-gris); }

.fv-tarjeta-todos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 14px 14px 20px;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-crema);
}

.fv-tarjeta-todos-imagen { position: relative; }
.fv-tarjeta-todos .fv-mosaico-envio-documento { background: #FFFFFF; }   /* sobre la tarjeta crema */
.fv-tarjeta-todos-origen { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 12px; }
.fv-tarjeta-todos-cuantos { position: absolute; bottom: 12px; left: 12px; z-index: 1; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.fv-tarjeta-todos-quien { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.fv-tarjeta-todos-quien .fv-avatar { width: 48px; height: 48px; font-size: 15px; }
.fv-tarjeta-todos-remitente { display: flex; flex-direction: column; min-width: 0; }
.fv-tarjeta-todos-nombre { overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fv-tarjeta-todos-detalle { font-size: 13px; color: var(--fv-secundario); }
.fv-tarjeta-todos-para { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 6px; font-size: 14px; }
.fv-tarjeta-todos-para .fv-avatares > .fv-avatar { border-color: var(--fv-crema); }
.fv-tarjeta-todos-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 0 6px; }

/* ---------------------------------------------------------------- Detalle de un envío (#/envios/{id}; boceto Agencia-detalle-envio) */

.fv-envio-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
    padding: 24px 32px 32px;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-piedra);
}

.fv-envio-cabecera-texto { display: flex; flex: 1 1 420px; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; }
.fv-envio-cabecera-texto .fv-titulo-hero { overflow-wrap: anywhere; }
.fv-envio-cabecera .fv-migas a { gap: 6px; padding-left: 10px; }
.fv-envio-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fv-envio-chips .fv-pildora { min-height: 40px; gap: 8px; }
.fv-envio-cabecera-lado { display: flex; flex: 0 1 320px; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 20px; min-width: 0; }
.fv-envio-cabecera-mosaico { display: block; width: 100%; }
.fv-envio-cabecera-mosaico .fv-mosaico-envio { height: 150px; }
.fv-envio-cabecera-mosaico .fv-mosaico-envio-ext { font-size: 52px; }

.fv-detalle-mensaje { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; padding: 24px 28px; border-radius: var(--fv-radio-hero); background: var(--fv-crema); }

.fv-detalle-mensaje-comilla {
    flex: none;
    font-family: var(--fv-fuente-titulos);
    font-size: 64px;
    font-weight: 800;
    line-height: 0.7;
    color: var(--fv-granate);
}

.fv-detalle-mensaje p { font-size: 18px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }

.fv-envio-seccion { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fv-envio-seccion-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 30px; }

.fv-envio-seccion-titulo .fv-insignia {
    height: 28px;
    min-width: 28px;
    padding: 0 10px;
    border-radius: 14px;
    font-family: var(--fv-fuente-texto);
    font-size: 14px;
    letter-spacing: 0;
}

.fv-envio-seccion > [data-archivos] { padding: 8px 16px; border: 1px solid var(--fv-gris); border-radius: 24px; }
.fv-envio-columnas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; margin-top: 36px; }
.fv-envio-destinatarios { flex: 999 1 480px; }
.fv-envio-registro { flex: 1 1 340px; }

/* Destinatarios: avatar con su marca de estado, email, progreso y última descarga */
.fv-lista-destinatarios { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.fv-fila-destinatario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 18px 14px 14px;
    border: 1px solid var(--fv-gris);
    border-radius: 24px;
}

.fv-fila-destinatario-avatar { position: relative; width: 52px; height: 52px; font-size: 16px; }

.fv-fila-destinatario-marca {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--fv-gris);
}

.fv-fila-destinatario-marca-todo { background: var(--fv-ok); }

.fv-fila-destinatario-marca-todo::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

/* A medias: un arco de tres cuartos sobre naranja claro */
.fv-fila-destinatario-marca-parcial { background: var(--fv-aviso-fondo); }

.fv-fila-destinatario-marca-parcial::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--fv-aviso);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
}

/* Abierto sin descargar: un punto */
.fv-fila-destinatario-marca-abierto { background: var(--fv-crema); }

.fv-fila-destinatario-marca-abierto::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fv-oscuro);
}

.fv-fila-destinatario-texto { display: flex; flex: 1 1 200px; flex-direction: column; gap: 4px; min-width: 0; }
.fv-fila-destinatario-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.fv-fila-destinatario-email .fv-pastilla { padding: 3px 10px; font-size: 12px; }
.fv-fila-destinatario-progreso { display: block; max-width: 220px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--fv-crema); }
.fv-fila-destinatario-progreso > span { display: block; height: 100%; border-radius: 3px; background: var(--fv-aviso); }
.fv-fila-destinatario-detalle { font-size: 13px; color: var(--fv-secundario); }

/* Registro de descargas: una línea de tiempo (los zip, en granate) */
.fv-registro { position: relative; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.fv-registro::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 11px; width: 2px; background: var(--fv-gris); }
.fv-registro:has(> .fv-registro-vacio)::before { display: none; }
.fv-registro-entrada { position: relative; display: flex; gap: 16px; }

.fv-registro-punto {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    border: 5px solid var(--fv-crema);
    border-radius: 50%;
    background: var(--fv-texto);
}

.fv-registro-entrada.zip .fv-registro-punto { border-color: var(--fv-rosa); background: var(--fv-granate); }
.fv-registro-texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; }
.fv-registro-fecha { font-size: 13px; color: var(--fv-secundario); }
.fv-registro-quien { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.fv-registro-quien > span:last-child { min-width: 0; }
.fv-registro-que { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-registro-que .fv-pastilla { max-width: 100%; }
.fv-registro-que .fv-pastilla-rosa b { font-family: var(--fv-fuente-titulos); font-weight: 800; letter-spacing: -0.02em; }
.fv-registro-archivo { display: inline-block; overflow: hidden; color: var(--fv-texto); font-weight: 400; text-overflow: ellipsis; }
.fv-registro-vacio { padding: 16px 20px; border-radius: 20px; background: var(--fv-crema); font-size: 14px; color: var(--fv-secundario); }

.fv-envio-nota {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 36px 0 0;
    padding: 16px 20px;
    border-radius: 20px;
    background: var(--fv-crema);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fv-oscuro);
}

.fv-envio-nota i { flex: none; color: var(--fv-granate); }

/* ---------------------------------------------------------------- Lista de archivos de un envío (lista-envio.js) */

.fv-lista-envio, .fv-lista-envio-dentro { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fv-lista-envio-fila { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 6px 4px; }

.fv-lista-envio-casilla { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; margin: 0; cursor: pointer; }
.fv-lista-envio-casilla .form-check-input { width: 20px; height: 20px; margin: 0; cursor: pointer; }

/* Icono cuadrado: la miniatura o la extensión sobre su tono (componentes/envios.js, iconoArchivo) */
.fv-icono-archivo {
    position: relative;
    display: flex;
    flex: none;
    align-items: flex-end;
    width: 64px;
    height: 64px;
    padding: 8px;
    overflow: hidden;
    border: 0;
    border-radius: var(--fv-radio-archivo);
    background: var(--fv-crema);
    color: var(--fv-oscuro);
    font-family: var(--fv-fuente-titulos);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

button.fv-icono-archivo { cursor: pointer; }
.fv-icono-archivo > i { font-size: 18px; }
.fv-icono-archivo-pdf { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-icono-archivo-documento { background: var(--fv-crema); }
.fv-icono-archivo-otro { background: var(--fv-gris); }
.fv-icono-archivo-audio { align-items: center; justify-content: center; background: var(--fv-verde-claro); }
.fv-icono-archivo-video { align-items: center; justify-content: center; }

.fv-icono-archivo-video > i,
.fv-icono-archivo-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-size: 10px;
}

.fv-icono-archivo-miniatura { padding: 0; }
.fv-icono-archivo-miniatura > .fv-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-icono-archivo-play { position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -15px; }

/* Ya no está disponible: borde discontinuo, sin tono, y el nombre tachado */
.fv-icono-archivo.fv-icono-archivo-apagado { border: 2px dashed var(--fv-gris); background: transparent; color: #CBC5B5; }   /* también sobre los tonos (utilidades) */
.fv-icono-archivo-apagado > i { background: var(--fv-crema); color: #CBC5B5; }

/* Carpeta: su mosaico en pequeño */
.fv-icono-archivo.fv-mosaico { display: grid; gap: 2px; height: 64px; padding: 0; cursor: pointer; }
.fv-carpeta:hover .fv-icono-archivo.fv-mosaico { transform: none; }

.fv-lista-envio-texto { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }

button.fv-lista-envio-abrir {
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.fv-lista-envio-abrir:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-lista-envio-nombre { max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fv-lista-envio-ruta { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; color: var(--fv-secundario); }
.fv-lista-envio-meta { font-size: 13px; color: var(--fv-secundario); }
.fv-lista-envio-fila.no-disponible .fv-lista-envio-nombre { font-weight: 500; text-decoration: line-through; color: var(--fv-secundario); }

.fv-lista-envio-boton {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fv-lista-envio-boton:hover { background: var(--fv-piedra); }
.fv-lista-envio-boton:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-lista-envio-descargar { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-lista-envio-descargar:hover { background: var(--fv-rosa-medio); }
.fv-lista-envio-plegar { background: none; }
.fv-lista-envio-plegar:hover { background: var(--fv-crema); }
.fv-lista-envio-plegar i { transition: transform 0.2s ease; }
.fv-lista-envio-grupo.abierta > .fv-lista-envio-fila .fv-lista-envio-plegar i { transform: rotate(180deg); }

/* Lo de dentro de una carpeta, sangrado y algo más pequeño */
.fv-lista-envio-dentro { margin: 0 0 6px 30px; padding-left: 14px; border-left: 2px solid var(--fv-crema); }
.fv-lista-envio-dentro .fv-lista-envio-fila { min-height: 64px; }
.fv-lista-envio-dentro .fv-icono-archivo { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }

/* ---------------------------------------------------------------- Página del destinatario (#/e/{token}; bocetos Descarga-envio y Estados-enlace) */

.fv-pagina-destinatario { display: flex; flex-direction: column; }

.fv-cabecera-destinatario { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 28px; }
.fv-cabecera-destinatario .fv-marca { padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); }
.fv-cabecera-destinatario-empresa { min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; }

.fv-destinatario-zona { display: flex; flex: 1 1 auto; align-items: center; padding: 16px 28px 56px; }

.fv-destinatario-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: var(--fv-granate);
}

.fv-tarjeta-destinatario {
    width: 100%;
    max-width: 440px;
    margin-left: clamp(0px, 4vw, 56px);
    overflow: hidden;
    border-radius: var(--fv-radio-hero);
    background: #FFFFFF;
    box-shadow: var(--fv-sombra-flotante);
}

.fv-tarjeta-destinatario-cabeza { display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 22px; }
.fv-destinatario-remitente { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--fv-secundario); }
.fv-destinatario-remitente strong { color: var(--fv-texto); font-weight: 600; overflow-wrap: anywhere; }
.fv-destinatario-titulo { margin: 0; font-size: clamp(48px, 5vw, 64px); letter-spacing: -0.05em; line-height: 0.9; }
.fv-destinatario-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.fv-destinatario-chips .fv-pastilla { min-height: 28px; padding: 0 12px; font-weight: 500; }

.fv-destinatario-mensaje {
    margin: 0;
    padding: 14px 16px;
    border-radius: 20px 20px 20px 6px;
    background: var(--fv-crema);
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--fv-oscuro);
}

/* "Descargar todo" y "Descargar selección (N)" (esta, en rosa y apagada hasta que se marca algo) */
.fv-destinatario-acciones { display: flex; flex-direction: column; gap: 8px; }
.fv-destinatario-descargar { width: 100%; min-height: 64px; gap: 12px; padding: 0 24px; font-size: 18px; }
.fv-destinatario-seleccion { width: 100%; min-height: 52px; gap: 10px; background: var(--fv-rosa); color: var(--fv-granate); }
.fv-destinatario-seleccion:hover { background: var(--fv-rosa-medio); color: var(--fv-granate); }
.fv-destinatario-acciones .fv-texto-corto { display: none; }
.fv-destinatario-lista { padding: 8px 16px 12px; border-top: 1px solid var(--fv-gris); }

/* «2 archivos elegidos · Quitar selección», encima de la lista */
.fv-destinatario-elegidos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 4px 4px 0; font-size: 13px; font-weight: 600; }

.fv-destinatario-pie {
    margin: 0;
    padding: 14px 28px 22px;
    border-top: 1px solid var(--fv-gris);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--fv-secundario);
}

/* Código, no disponible y fallos: su pastilla y su tarjeta, sobre el fondo */
.fv-destinatario-estado { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 520px; margin-left: clamp(0px, 4vw, 56px); }
.fv-destinatario-estado > .fv-pastilla { align-self: flex-start; min-height: 32px; padding: 0 14px; }
.fv-pagina-destinatario :is(.fv-tarjeta-publica, .fv-tarjeta-estado) { border: 0; box-shadow: var(--fv-sombra-flotante); }
.fv-titulo-tarjeta:focus { outline: none; }

/* Seis casillas del código */
.fv-codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }

.fv-codigo-cifra {
    width: 100%;
    min-width: 0;
    height: 68px;
    padding: 0;
    border: 0;
    border-radius: var(--fv-radio-campo);
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-family: var(--fv-fuente-titulos);
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    caret-color: var(--fv-granate);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.fv-codigo-cifra:focus { outline: 3px solid var(--fv-granate); outline-offset: -3px; background: #FFFFFF; }
.fv-codigo.con-error .fv-codigo-cifra { box-shadow: inset 0 0 0 2px var(--fv-peligro); }
.fv-codigo-error { margin: 10px 0 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--fv-peligro); }
.fv-codigo-error:empty { margin: 0; }
.fv-codigo-reenviar:disabled { opacity: 0.8; color: var(--fv-secundario); }

@media (max-width: 767.98px) {
    /* El selector, a pantalla completa (modal-fullscreen-md-down): sin esquinas redondeadas */
    .fv-modal-selector .modal-content { height: 100%; max-height: none; border-radius: 0; }
    .fv-envio-cabecera { gap: 20px; padding: 20px; }
    .fv-envio-cabecera-texto { flex-basis: 100%; gap: 24px; }
    .fv-envio-cabecera-lado { flex-basis: 100%; align-items: stretch; }
    .fv-envio-cabecera-mosaico { display: none; }
    .fv-envio-cabecera-lado .fv-acciones > .fv-boton { flex: 1 1 auto; }
    .fv-detalle-mensaje { gap: 12px; padding: 18px 20px; }
    .fv-detalle-mensaje-comilla { font-size: 52px; }
    .fv-detalle-mensaje p { font-size: 16px; }
    .fv-envio-seccion-titulo { font-size: 26px; }
    .fv-envio-seccion > [data-archivos] { padding: 4px 10px; }
}

@media (max-width: 575.98px) {
    /* Nuevo envío: la tarjeta a todo el ancho */
    .fv-pagina-envio { align-items: flex-start; min-height: 0; }
    .fv-envio-tarjeta { max-width: none; margin-left: 0; border-radius: 24px; }
    .fv-envio-arriba { padding: 22px 18px 16px; }
    .fv-envio-abajo { padding: 16px 18px 22px; }
    .fv-envio-plazos-etiqueta { flex-basis: 100%; }
    .fv-envio-progreso, .fv-envio-hecho { padding: 32px 18px 24px; }
    .fv-recipiente-envio { width: 180px; height: 180px; }
    .fv-recipiente-envio .fv-recipiente-porcentaje { font-size: 52px; }
    .fv-envio-hecho-titulo { font-size: 38px; }
    .fv-selector-cuerpo { margin: 0 -18px; padding: 4px 18px; }
    .fv-selector-pie > .fv-boton-primario { flex: 1 1 auto; }

    .fv-separador-vertical { display: none; }
    .fv-lista-envio-fila { gap: 10px; }
    .fv-icono-archivo { width: 56px; height: 56px; border-radius: 16px; font-size: 19px; }
    .fv-icono-archivo.fv-mosaico { height: 56px; }
    .fv-lista-envio-dentro { margin-left: 12px; padding-left: 10px; }
    .fv-lista-envio-dentro .fv-icono-archivo { width: 48px; height: 48px; }
    .fv-lista-envio-boton { width: 44px; height: 44px; }   /* hito 12: 44 px como mínimo para el dedo */

    /* Página del destinatario: la tarjeta a todo el ancho y los dos botones de descarga, fijos abajo y juntos */
    .fv-cabecera-destinatario { padding: 12px 16px; }
    .fv-cabecera-destinatario-empresa { display: none; }   /* la tarjeta ya dice «de Estratagema» */
    .fv-destinatario-zona { align-items: flex-start; padding: 4px 16px 24px; }
    .fv-tarjeta-destinatario, .fv-destinatario-estado { max-width: none; margin-left: 0; }
    .fv-tarjeta-destinatario { border-radius: 24px; }
    .fv-tarjeta-destinatario-cabeza { gap: 16px; padding: 22px 20px 18px; }
    .fv-destinatario-lista { padding: 4px 10px 8px; }
    .fv-destinatario-pie { padding: 14px 20px 18px; }
    .fv-pagina-destinatario.con-envio { padding-bottom: 104px; }

    .fv-destinatario-acciones {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        flex-direction: row;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 -8px 24px rgba(47, 47, 48, 0.14);
        backdrop-filter: blur(12px);
    }

    .fv-destinatario-acciones > .fv-boton { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 0 14px; font-size: 16px; }
    .fv-destinatario-acciones .fv-texto-largo { display: none; }
    .fv-destinatario-acciones .fv-texto-corto { display: inline; }
    .fv-codigo { gap: 6px; }
    .fv-codigo-cifra { height: 56px; font-size: 26px; }
}

/* ================================================================ Invitaciones y acceso externo (hito 7) */

/* ---------------------------------------------------------------- Piezas comunes */

.fv-pastilla-granate { background: var(--fv-granate); color: #FFFFFF; }
.fv-pastilla-arena { background: var(--fv-arena); color: var(--fv-texto); }
.fv-texto-peligro, .fv-texto-peligro:hover { color: var(--fv-peligro); }
.fv-campo-blanco { background: #FFFFFF; }   /* sobre una tarjeta crema */

/* La píldora "N personas" de la cabecera del contenedor, como botón */
button.fv-pildora { border: 0; font-family: inherit; cursor: pointer; }
button.fv-pildora:hover { box-shadow: inset 0 0 0 1px var(--fv-gris); }
button.fv-pildora:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* Opciones en un segmento sobre crema: Lectura · Edición */
.fv-segmentos { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--fv-crema); }
.fv-segmentos label { position: relative; margin: 0; }
.fv-segmentos input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fv-segmentos span {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    color: var(--fv-texto);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-segmentos span:hover { background: rgba(47, 47, 48, 0.07); }
.fv-segmentos input:checked + span { background: var(--fv-texto); color: #FFFFFF; }
.fv-segmentos input:focus-visible + span { box-shadow: var(--fv-anillo-foco); }
.fv-segmentos-compactos span { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* Casilla con su texto (privacidad) */
.fv-casilla { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 12px; margin: 0; padding: 0; }
.fv-casilla .form-check-input { float: none; width: 22px; height: 22px; margin: 1px 0 0; border-color: #B9BBBF; cursor: pointer; }
.fv-casilla .form-check-label { font-size: 15px; line-height: 1.5; cursor: pointer; }
.fv-casilla .invalid-feedback { grid-column: 2; margin-top: 0; }

/* Mosaico pequeño (la empresa de una invitación) */
.fv-mosaico-mini { display: grid; flex: none; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; }
.fv-mosaico-mini > :first-child { grid-row: 1 / span 2; background: var(--fv-cielo); }
.fv-mosaico-mini > :nth-child(2) { background: var(--fv-arena); }
.fv-mosaico-mini > :nth-child(3) { background: var(--fv-verde-claro); }

/* "Usamos una cookie técnica…" */
.fv-nota-cookie { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--fv-secundario); }

/* ---------------------------------------------------------------- Pie común y aviso de cookies (componentes/pie.js) */

.fv-pie { padding: 4px 28px calc(24px + env(safe-area-inset-bottom)); }

.fv-pie-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 8px;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fv-secundario);
}

.fv-pie a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
/* En el móvil (o con el dedo), los enlaces del pie con su zona de 44 px; el del aviso de cookies, más alto sin mover el texto */
@media (max-width: 767.98px), (pointer: coarse) {
    .fv-pie-contenido { gap: 0 8px; }
    .fv-pie a { display: inline-flex; align-items: center; min-height: 44px; }
    .fv-aviso-cookies p a { display: inline-block; margin: -14px 0; padding: 14px 0; }
}
.fv-pie a:hover { color: var(--fv-texto); text-decoration: underline; }

/* Sobre la foto de fondo de los envíos, en blanco sobre un velo propio (la foto puede ser clara abajo); sobre el
   degradado de la marca (sin fotos), el color secundario de siempre */
body.fondo-envio-foto .fv-pie-contenido {
    width: fit-content;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(22, 22, 24, 0.42);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.92);
}

body.fondo-envio-foto .fv-pie a:hover { color: #FFFFFF; }

/* Informativo, no de consentimiento: abajo a la izquierda, por encima de la barra inferior del móvil */
.fv-aviso-cookies {
    position: fixed;
    bottom: calc(16px + var(--fv-alto-nav-inferior) + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 1040;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 12px 12px 20px;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: var(--fv-sombra-menu);
    font-size: 14px;
    line-height: 1.45;
    animation: fv-aparecer 0.25s ease-out both;
}

.fv-aviso-cookies p { flex: 1 1 260px; }
.fv-aviso-cookies .fv-boton { flex: none; }
body.con-visor .fv-aviso-cookies { display: none; }
body.con-seleccion .fv-aviso-cookies { bottom: calc(100px + var(--fv-alto-nav-inferior)); }

/* ---------------------------------------------------------------- Página de cookies (#/cookies) */

.fv-cookies { display: flex; flex-direction: column; gap: 36px; max-width: 980px; margin: 0 auto; }
.fv-publica .fv-cookies { padding: 12px 28px 32px; }
.fv-cookies-cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fv-cookies-cabeza .fv-entradilla { max-width: 680px; }
.fv-cookies-seccion > h2 { margin: 0 0 16px; }
.fv-cookies-seccion p { max-width: 720px; font-size: 16px; line-height: 1.55; color: var(--fv-oscuro); }

.fv-tabla-cookies { display: flex; flex-direction: column; gap: 8px; }

.fv-tabla-cookies-fila {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr) minmax(0, 1.2fr);
    gap: 8px 20px;
    padding: 16px 20px;
    border-radius: 20px;
    background: var(--fv-crema);
    font-size: 15px;
    line-height: 1.5;
}

.fv-tabla-cookies-titulos { padding-top: 0; padding-bottom: 0; background: none; font-size: 13px; color: var(--fv-secundario); }
.fv-tabla-cookies-fila > :first-child { display: flex; flex-direction: column; gap: 2px; }
.fv-tabla-cookies code { color: var(--fv-granate); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.fv-tabla-cookies small { font-size: 12px; color: var(--fv-secundario); }

/* ---------------------------------------------------------------- Entrada: el código de "Revisa tu correo" */

.fv-entrada-codigo { gap: 14px; padding-top: 22px; border-top: 1px solid var(--fv-gris); }

/* ---------------------------------------------------------------- Aceptar una invitación de cliente: banner y colores de su carpeta */

.fv-invitacion-cliente { gap: 0; padding: 0; overflow: hidden; }

.fv-invitacion-banner {
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    padding: 20px;
    border-radius: 0;
}

.fv-invitacion-banner .fv-pastilla { min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; white-space: normal; }
.fv-invitacion-cuerpo { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 3vw, 40px); }

.fv-nota-invitacion { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--fv-crema); font-size: 14px; line-height: 1.5; color: var(--fv-oscuro); }
.fv-nota-invitacion strong { color: var(--fv-texto); }

.fv-nota-invitacion-marca {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fv-lima);
    color: var(--fv-texto);
    font-size: 13px;
}

/* Proveedor: su empresa, fijada por Estratagema */
.fv-empresa-fija { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--fv-crema); }
.fv-empresa-fija-texto { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fv-empresa-fija-texto strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.fv-empresa-fija .fv-pastilla { background: #FFFFFF; }

/* ---------------------------------------------------------------- Ventana "Invitar personas" (componentes/invitar.js) */

.fv-roles-invitar { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-rol-invitar { position: relative; margin: 0; }
.fv-rol-invitar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fv-rol-invitar-caja {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--fv-gris);
    color: var(--fv-texto);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-rol-invitar-caja small { font-size: 12px; font-weight: 400; color: var(--fv-secundario); }
.fv-rol-invitar-caja:hover { box-shadow: inset 0 0 0 1px #C9CBD0; }
.fv-rol-invitar input:checked + .fv-rol-invitar-caja { background: var(--fv-texto); box-shadow: none; color: #FFFFFF; }
.fv-rol-invitar input:checked + .fv-rol-invitar-caja small { color: #C9CBD0; }
.fv-rol-invitar input:focus-visible + .fv-rol-invitar-caja { box-shadow: var(--fv-anillo-foco); }
.fv-grupo-fijo .fv-rol-invitar-caja { cursor: default; }

.fv-destino-invitar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 20px; background: var(--fv-crema); }
.fv-destino-invitar-texto { flex: 1 1 180px; min-width: 0; font-size: 15px; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-destino-invitar-texto.elegido { color: var(--fv-texto); font-weight: 600; }
.fv-destino-invitar .fv-boton { background: #FFFFFF; }

.fv-empresa-invitar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--fv-crema); }
.fv-empresa-invitar-texto { display: flex; flex-direction: column; min-width: 0; }
.fv-empresa-invitar-texto strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

/* Mientras el selector de carpeta está abierto encima */
.fv-modal-oculta { visibility: hidden; }

/* Selector en modo carpeta (selector-contenedor.js, elegirCarpeta) */
.fv-selector-carpeta .fv-selector-cuerpo { min-height: 160px; }
.fv-lista-carpetas { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

.fv-fila-carpeta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fv-fila-carpeta:hover { background: var(--fv-piedra); }
.fv-fila-carpeta:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-fila-carpeta > .fa-chevron-right { color: var(--fv-secundario); font-size: 13px; }
.fv-fila-carpeta-icono { color: var(--fv-arena-oscura); font-size: 18px; }
.fv-fila-carpeta-nombre { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.fv-fila-carpeta-detalle { font-size: 13px; color: var(--fv-secundario); white-space: nowrap; }
.fv-lista-carpetas-vacia { padding: 16px 4px; font-size: 14px; color: var(--fv-secundario); }

/* ---------------------------------------------------------------- Espacios: inicio del cliente y "Mis contenedores" */

.fv-inicio-cliente { display: flex; flex-direction: column; gap: 48px; }
.fv-inicio-cliente-saludo { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.fv-inicio-cliente-saludo .fv-entradilla { max-width: 440px; }

.fv-rejilla-espacios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 24px; }
.fv-rejilla-espacios[aria-busy="true"]:empty { min-height: 220px; }

/* Tarjeta de un espacio (componentes/espacios.js): banner o mosaico de muestras, candado, etiquetas, nombre y una línea */
.fv-tarjeta-espacio {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fv-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fv-tarjeta-espacio:focus-visible { outline: 3px solid rgba(128, 22, 36, 0.45); outline-offset: 4px; border-radius: 26px; }
.fv-espacio-imagen { width: 100%; height: 220px; border-radius: 26px; }
.fv-tarjeta-espacio:hover .fv-espacio-imagen { transform: translateY(-2px); }
.fv-espacio-banner { display: block; background-position: center; background-size: cover; background-repeat: no-repeat; }

.fv-espacio-etiquetas { position: absolute; top: 14px; right: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.fv-espacio-etiquetas .fv-pastilla { padding: 6px 12px; }

.fv-tarjeta-espacio-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fv-tarjeta-espacio-nombre { font-family: var(--fv-fuente-titulos); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.fv-tarjeta-espacio-meta { font-size: 14px; color: var(--fv-secundario); }

/* Proveedor: tarjetas grandes con la flecha */
.fv-rejilla-espacios-grande { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.fv-tarjeta-espacio-grande { gap: 16px; }
.fv-tarjeta-espacio-grande .fv-espacio-imagen { gap: 5px; height: 300px; border-radius: var(--fv-radio-tarjeta); }
.fv-tarjeta-espacio-grande .fv-espacio-etiquetas { top: 16px; right: 16px; left: 16px; }
.fv-tarjeta-espacio-grande .fv-espacio-etiquetas .fv-pastilla { padding: 8px 14px; }
.fv-tarjeta-espacio-grande .fv-tarjeta-espacio-nombre { font-size: 30px; letter-spacing: -0.035em; line-height: 1; }

.fv-tarjeta-espacio-flecha {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-texto);
    font-size: 20px;
}

/* ---------------------------------------------------------------- Perfil de clientes y proveedores (#/perfil) */

.fv-perfil { max-width: 560px; margin: 0 auto; }
.fv-perfil-tarjeta { gap: 22px; padding: 28px; border-radius: var(--fv-radio-hero); }
.fv-perfil-cabeza { display: flex; align-items: center; gap: 16px; }
.fv-avatar-perfil { width: 72px; height: 72px; font-family: var(--fv-fuente-titulos); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.fv-perfil-titulo { margin: 0; font-size: 28px; letter-spacing: -0.035em; line-height: 1; }
.fv-perfil-subtitulo { margin: 0; font-size: 20px; letter-spacing: -0.03em; }
.fv-perfil-clave { padding-top: 22px; border-top: 1px solid rgba(47, 47, 48, 0.12); }

.fv-perfil-datos { display: flex; flex-direction: column; margin: 0; padding: 4px 16px; border-radius: 20px; background: #FFFFFF; }
.fv-perfil-datos > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 12px 0; }
.fv-perfil-datos > div + div { border-top: 1px solid var(--fv-gris); }
.fv-perfil-datos dt { font-size: 14px; font-weight: 400; color: var(--fv-secundario); }
.fv-perfil-datos dd { min-width: 0; margin: 0; font-size: 15px; font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Usuarios: lista (#/usuarios; boceto Agencia-usuarios) */

.fv-usuarios-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 15px; color: var(--fv-secundario); }
.fv-rejilla-usuarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.fv-rejilla-usuarios[aria-busy="true"]:empty { min-height: 240px; }

.fv-tarjeta-usuario {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-crema);
    color: var(--fv-texto);
    text-decoration: none;
    transition: transform 0.15s ease;
}

.fv-tarjeta-usuario:hover { color: var(--fv-texto); transform: translateY(-2px); }
.fv-tarjeta-usuario:focus-visible { outline: 3px solid rgba(128, 22, 36, 0.45); outline-offset: 3px; }
.fv-tarjeta-usuario-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fv-avatar-usuario { width: 88px; height: 88px; font-family: var(--fv-fuente-titulos); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
/* Rol: en blanco; ADMIN y SUPER, en oscuro (boceto) */
.fv-rol-tarjeta { padding: 6px 12px; background: #FFFFFF; color: var(--fv-texto); font-size: 12px; letter-spacing: 0.04em; }
.fv-rol-tarjeta.fv-rol-equipo { background: var(--fv-texto); color: #FFFFFF; }
.fv-tarjeta-usuario-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Nombres, emails y empresas largos: con puntos suspensivos (el nombre, en dos líneas como mucho) */
.fv-tarjeta-usuario-titulo {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--fv-fuente-titulos);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}
.fv-tarjeta-usuario-titulo.es-email { font-family: var(--fv-fuente-texto); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }   /* sin nombre aún */
.fv-tarjeta-usuario-email, .fv-tarjeta-usuario-empresa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-tarjeta-usuario-email { font-size: 14px; color: var(--fv-secundario); }
.fv-tarjeta-usuario-empresa { font-size: 15px; font-weight: 500; }
/* Desactivada: en blanco con borde y en gris (boceto) */
.fv-tarjeta-usuario.desactivada { box-shadow: inset 0 0 0 1px var(--fv-gris); background: #FFFFFF; color: var(--fv-secundario); }
.fv-tarjeta-usuario.desactivada:hover { color: var(--fv-secundario); }
.fv-tarjeta-usuario.desactivada .fv-avatar-usuario { background: var(--fv-crema); color: var(--fv-secundario); }
.fv-tarjeta-usuario.desactivada .fv-rol-tarjeta { background: var(--fv-crema); color: var(--fv-texto); }
.fv-tarjeta-usuario.desactivada .fv-tarjeta-usuario-email { color: inherit; }
/* Invitado: en rosa (boceto) */
.fv-pastilla-invitado { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-tarjeta-usuario-empresa:empty { display: none; }
.fv-tarjeta-usuario-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.fv-tarjeta-usuario-acceso { font-size: 13px; color: var(--fv-secundario); }

.fv-nota-equipo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 32px 0 0; font-size: 14px; line-height: 1.45; color: var(--fv-secundario); }

/* ---------------------------------------------------------------- Ficha de una persona (#/usuarios/{id}; boceto Agencia-ficha-usuario) */

.fv-ficha-cabeza {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 280px;
    padding: 24px 32px 32px;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-arena);
}

.fv-ficha-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.fv-ficha-quien { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; min-width: 0; }
.fv-avatar-ficha { width: 136px; height: 136px; border: 4px solid #FFFFFF; font-family: var(--fv-fuente-titulos); font-size: 48px; font-weight: 800; letter-spacing: -0.04em; }
.fv-ficha-texto { min-width: 0; }
.fv-ficha-texto .fv-titulo-hero { font-size: clamp(40px, 6vw, 76px); overflow-wrap: anywhere; }
.fv-ficha-texto .fv-titulo-hero.es-email { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.03em; }   /* sin nombre aún */
.fv-ficha-datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 500; }
.fv-ficha-dato { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; overflow-wrap: anywhere; }
.fv-ficha-dato:has(> :is(.fv-rol, .fv-pastilla):first-child) { padding-left: 6px; }
.fv-ficha-dato .fv-pastilla { padding: 5px 10px; font-size: 12px; }

.fv-ficha-seccion { margin: 40px 0 0; }
.fv-ficha-seccion > h2, .fv-ficha-seccion-cabeza h2 { font-size: 28px; letter-spacing: -0.03em; }
.fv-ficha-seccion > h2 { margin: 0 0 16px; }
.fv-ficha-seccion-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

.fv-rejilla-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 28px 24px; }
.fv-acceso-tarjeta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fv-acceso-enlace { display: flex; flex-direction: column; gap: 6px; color: var(--fv-texto); text-decoration: none; }
.fv-acceso-enlace:hover { color: var(--fv-texto); }
.fv-acceso-enlace:focus-visible { outline: 3px solid rgba(128, 22, 36, 0.45); outline-offset: 4px; border-radius: 20px; }
.fv-acceso-imagen { position: relative; display: block; height: 180px; margin-bottom: 6px; border-radius: var(--fv-radio-mosaico); background: var(--fv-cielo) center / cover no-repeat; transition: transform 0.15s ease; }
.fv-acceso-enlace:hover .fv-acceso-imagen { transform: translateY(-2px); }
.fv-acceso-imagen .fv-mosaico-etiqueta { top: 12px; left: 12px; }
.fv-acceso-caducada { position: absolute; top: 12px; right: 12px; }
.fv-acceso-tarjeta.caducada .fv-acceso-imagen { opacity: 0.55; }
.fv-acceso-nombre { font-family: var(--fv-fuente-titulos); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.fv-acceso-ruta { font-size: 14px; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-acceso-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fv-acceso-permiso { font-size: 14px; color: var(--fv-secundario); }
.fv-acceso-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fv-secundario); }

.fv-lista-dispositivos li strong { font-weight: 600; }

.fv-aviso-ficha { display: flex; align-items: center; gap: 12px; margin: 40px 0 0; padding: 16px 20px; border-radius: 20px; background: var(--fv-crema); font-size: 14px; line-height: 1.45; color: var(--fv-oscuro); }

.fv-aviso-ficha-signo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-peligro);
    font-size: 18px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- Móvil */

@media (max-width: 767.98px) {
    .fv-pie { padding: 4px 16px 20px; }
    .fv-aviso-cookies { right: 12px; left: 12px; max-width: none; padding: 12px 12px 12px 16px; font-size: 13px; }
    .fv-aviso-cookies .fv-boton { width: 100%; }

    /* La página del destinatario lleva sus dos botones de descarga fijos abajo: ni el pie ni el aviso los tapan */
    body:has(.fv-pagina-destinatario.con-envio) .fv-pie { margin-bottom: 84px; }
    body:has(.fv-pagina-destinatario.con-envio) .fv-aviso-cookies { bottom: calc(96px + env(safe-area-inset-bottom)); }

    .fv-publica .fv-cookies { padding: 4px 16px 24px; }
    .fv-tabla-cookies-titulos { display: none; }
    .fv-tabla-cookies-fila { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px; }

    .fv-invitacion-banner { min-height: 150px; padding: 16px; }
    .fv-invitacion-cuerpo { padding: 24px 20px; }

    .fv-inicio-cliente { gap: 32px; }
    .fv-espacio-imagen { height: 180px; }
    .fv-tarjeta-espacio-grande .fv-espacio-imagen { height: 220px; }
    .fv-tarjeta-espacio-grande .fv-tarjeta-espacio-nombre { font-size: 26px; }

    .fv-perfil-tarjeta { padding: 22px 18px; }

    .fv-ficha-cabeza { min-height: 0; padding: 20px; }
    .fv-avatar-ficha { width: 96px; height: 96px; font-size: 34px; }
    .fv-ficha-pie .fv-acciones { width: 100%; }
    .fv-ficha-pie .fv-acciones .fv-boton { flex: 1 1 auto; }
    .fv-avatar-usuario { width: 72px; height: 72px; font-size: 26px; }
}

/* Pestañas en un móvil estrecho (las cuatro de Usuarios): más compactas y, si aun así no caben, desplazables */
@media (max-width: 575.98px) {
    .fv-pestanas { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .fv-pestanas::-webkit-scrollbar { display: none; }
    .fv-pestanas > button { flex: none; padding: 0 13px; font-size: 14px; }
}

/* ================================================================ Exclusiones, accesos y zonas de fuera (hito 8) */

/* ---------------------------------------------------------------- Candado: carpeta o espacio con una contraseña pendiente */

.fv-mosaico-candado, .fv-espacio-candado {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 47, 48, 0.12);
}

.fv-mosaico-candado i, .fv-espacio-candado i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fv-texto);
    color: #FFFFFF;
    font-size: 18px;
}

.fv-carpeta-cuenta .fa-lock { font-size: 12px; }

/* ---------------------------------------------------------------- Contraseña de una carpeta (componentes/clave-carpeta.js; boceto Estados-enlace) */

.fv-clave-pagina { display: flex; justify-content: center; padding: 12px 0 24px; }
.fv-clave-pagina .fv-clave-carpeta { width: 100%; max-width: 560px; border: 1px solid var(--fv-gris); border-radius: var(--fv-radio-tarjeta); background: #FFFFFF; overflow: hidden; }
.fv-clave-carpeta-cabeza { display: flex; align-items: center; justify-content: center; height: 150px; background: var(--fv-piedra); }

.fv-clave-carpeta-cabeza > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--fv-texto);
    color: #FFFFFF;
    font-size: 30px;
}

.fv-clave-carpeta-cuerpo { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 3vw, 36px); }
.fv-clave-carpeta-titulo { margin: 0; font-size: clamp(32px, 3vw, 38px); letter-spacing: -0.04em; line-height: 0.95; overflow-wrap: anywhere; }
.fv-clave-carpeta-cuerpo .fv-texto-secundario { font-size: 16px; line-height: 1.5; color: var(--fv-oscuro); }
.fv-modal-clave .modal-content { overflow: hidden; }
.fv-modal-clave .fv-clave-carpeta-cabeza { height: 130px; }

/* ---------------------------------------------------------------- Contenedor de fuera: chips de la cabecera y nota (vistas/contenedor.js) */

.fv-pildora-blanca i { color: var(--fv-texto); }
.fv-pildora-permiso { gap: 8px; padding-left: 8px; }

.fv-pildora-permiso i {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fv-lima);
    color: var(--fv-texto);
    font-size: 13px;
}

.fv-nota-explorador { max-width: 620px; margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--fv-secundario); }

/* ---------------------------------------------------------------- Accesos de una carpeta (#/contenedor/{id}/accesos; boceto Agencia-accesos) */

/* Rejilla de una columna, no flex en columna: en flex, Chrome mide el alto de una sección con un ancho menor y las tarjetas
   (auto-fill) dejan un hueco debajo */
.fv-accesos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 24px; }
.fv-accesos-seccion { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 96px; }
.fv-accesos-seccion h2 { font-size: 30px; letter-spacing: -0.035em; }
.fv-accesos-seccion-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.fv-accesos-seccion-cabeza .fv-texto-secundario { font-size: 14px; }

/* Aviso: hay subcarpetas con exclusiones */
.fv-aviso-exclusiones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 18px 16px 16px; border-radius: 24px; background: var(--fv-aviso-fondo); color: #5C3608; }

.fv-aviso-exclusiones-icono {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-aviso);
    font-size: 19px;
}

.fv-aviso-exclusiones-texto { flex: 1 1 320px; font-size: 15px; line-height: 1.5; }
.fv-aviso-exclusiones-texto strong { font-weight: 600; color: var(--fv-aviso); }
.fv-aviso-exclusiones .fv-boton { font-weight: 600; }

/* Personas con acceso */
.fv-rejilla-personas-acceso { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.fv-tarjeta-acceso { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px; border-radius: var(--fv-radio-hero); background: var(--fv-crema); }
.fv-tarjeta-acceso-quien { display: flex; align-items: center; gap: 14px; }
.fv-avatar-acceso { width: 56px; height: 56px; font-size: 17px; }
.fv-avatar-pendiente { border: 2px dashed #CBC5B5; background: #FFFFFF; color: var(--fv-secundario); }
.fv-tarjeta-acceso-nombre { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fv-tarjeta-acceso-nombre a { color: var(--fv-texto); font-size: 16px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.fv-tarjeta-acceso-nombre a:hover { color: var(--fv-granate); text-decoration: underline; }
.fv-tarjeta-acceso-nombre span { font-size: 13px; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-tarjeta-acceso-quien .fv-rol { flex: none; background: #FFFFFF; color: var(--fv-oscuro); }

.fv-chips-acceso { display: flex; flex-wrap: wrap; gap: 6px; }

.fv-chip-acceso {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--fv-oscuro);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.fv-chip-acceso:hover { color: var(--fv-texto); box-shadow: inset 0 0 0 1px #C9CBD0; }
a.fv-chip-acceso:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-chip-aqui { background: var(--fv-rosa); color: var(--fv-granate); font-weight: 500; }
.fv-chip-excluido { background: var(--fv-lima); color: var(--fv-texto); font-weight: 600; }
.fv-chip-pendiente { background: var(--fv-aviso-fondo); color: var(--fv-aviso); font-weight: 500; }

.fv-tarjeta-acceso-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.fv-tarjeta-acceso .fv-acceso-permiso { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fv-tarjeta-acceso .fv-segmentos { background: #FFFFFF; }

.fv-acceso-permiso-texto {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    min-height: 48px;
    padding: 8px 18px;
    border-radius: 24px;
    background: #FFFFFF;
    color: var(--fv-secundario);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.fv-acceso-permiso-texto a { color: var(--fv-texto); font-weight: 600; text-underline-offset: 3px; }
.fv-tarjeta-acceso-pie .fv-boton-fantasma { padding: 0 14px; }

/* Exclusiones por subcarpeta */
.fv-rejilla-exclusiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px 20px; }
.fv-tarjeta-exclusion { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fv-tarjeta-exclusion-enlace { display: flex; flex-direction: column; gap: 4px; color: var(--fv-texto); text-decoration: none; }
.fv-tarjeta-exclusion-enlace:hover { color: var(--fv-texto); }
.fv-tarjeta-exclusion-enlace:hover .fv-mosaico { transform: translateY(-2px); }
.fv-tarjeta-exclusion-enlace:focus-visible { outline: 3px solid rgba(128, 22, 36, 0.45); outline-offset: 4px; border-radius: 20px; }
.fv-tarjeta-exclusion-enlace .fv-mosaico { margin-bottom: 8px; }
.fv-tarjeta-exclusion-enlace .fv-mosaico-etiquetas { right: 10px; }
.fv-tarjeta-exclusion-nombre { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.fv-tarjeta-exclusion-ruta { font-size: 13px; color: var(--fv-secundario); overflow-wrap: anywhere; }

.fv-lista-excluidos { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fv-excluido { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fv-excluido-quien { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 8px; border-radius: 999px; background: var(--fv-crema); }
.fv-excluido-texto { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }

/* "Añadir exclusión" */
.fv-tarjeta-anadir { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: var(--fv-texto); font: inherit; text-align: left; cursor: pointer; }

.fv-tarjeta-anadir-caja {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    border-radius: var(--fv-radio-mosaico);
    background: var(--fv-crema);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.fv-tarjeta-anadir-caja > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    font-size: 22px;
}

.fv-tarjeta-anadir:hover .fv-tarjeta-anadir-caja { background: var(--fv-piedra); transform: translateY(-2px); }
.fv-tarjeta-anadir:focus-visible { outline: none; }
.fv-tarjeta-anadir:focus-visible .fv-tarjeta-anadir-caja { box-shadow: var(--fv-anillo-foco); }
.fv-tarjeta-anadir-texto { font-size: 16px; font-weight: 600; }

/* Ventana "¿A quién excluyes…?" */
.fv-lista-elegir { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.fv-eleccion-persona { align-items: center; }
.fv-eleccion-persona input { margin: 0; }
.fv-eleccion-persona > span:last-child { min-width: 0; }

/* ---------------------------------------------------------------- Invitar: exclusiones de las subcarpetas (componentes/invitar.js) */

.fv-excluir-invitar { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: var(--fv-aviso-fondo); }

/* Flotando deja de ser la leyenda "dibujada" en el borde y queda dentro de la caja, como un elemento más (con más peso que
   `.fv-grupo > legend`, que la deja sin flotar) */
.fv-excluir-invitar > .fv-excluir-invitar-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #5C3608;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.fv-excluir-invitar-aviso i { margin-top: 3px; color: var(--fv-aviso); }
.fv-lista-excluir { display: flex; flex-direction: column; gap: 6px; }
.fv-casilla-excluir { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 16px; background: #FFFFFF; cursor: pointer; }
.fv-casilla-excluir input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fv-granate); }
.fv-casilla-excluir:has(input:focus-visible) { box-shadow: var(--fv-anillo-foco); }
.fv-casilla-excluir-texto { display: flex; flex-direction: column; min-width: 0; }
.fv-casilla-excluir-texto strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.fv-casilla-excluir-texto .fv-eleccion-ayuda { font-size: 13px; }

/* ---------------------------------------------------------------- Ficha de una persona: exclusiones de cada acceso */

/* La pastilla "N exclusiones" y, debajo, cada subcarpeta con "Quitar exclusión" a la derecha */
.fv-acceso-exclusiones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.fv-acceso-exclusiones .fv-pastilla { padding: 5px 10px; font-size: 12px; }
.fv-acceso-excluidas { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; padding: 0; list-style: none; }
.fv-acceso-excluidas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; }
.fv-acceso-excluidas a { min-width: 0; color: var(--fv-texto); font-weight: 500; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Selector de personas del equipo (componentes/selector-personas.js) */

.fv-selector-personas { display: flex; flex-wrap: wrap; gap: 8px 12px; }

.fv-persona-elegible {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 112px;
    padding: 6px 2px;
    border: 0;
    border-radius: 20px;
    background: none;
    color: var(--fv-texto);
    font-family: inherit;
    cursor: pointer;
}

.fv-persona-elegible:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-persona-elegible .fv-avatar { position: relative; width: 72px; height: 72px; font-size: 20px; transition: box-shadow 0.15s ease; }
.fv-persona-elegible:hover .fv-avatar { box-shadow: 0 0 0 3px var(--fv-gris); }
.fv-persona-elegible[aria-pressed="true"] .fv-avatar { background: var(--fv-granate); color: #FFFFFF; }

.fv-persona-marca {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--fv-granate);
    color: #FFFFFF;
    font-size: 11px;
}

.fv-persona-elegible[aria-pressed="true"] .fv-persona-marca { display: flex; }
.fv-persona-elegible-nombre { font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.fv-persona-elegible-cargo { font-size: 13px; line-height: 1.2; text-align: center; color: var(--fv-secundario); }
.fv-persona-elegible-cargo:empty { display: none; }

/* ---------------------------------------------------------------- "Avisar al equipo" (componentes/avisar.js; boceto Proveedor-avisar) */

.fv-modal-avisar { --bs-modal-width: 560px; }
.fv-avisar { gap: 22px; }
.fv-avisar-cabeza { display: flex; align-items: flex-start; gap: 14px; }
.fv-avisar-cabeza > div { flex: 1; min-width: 0; }
.fv-avisar-cabeza strong { font-weight: 600; color: var(--fv-texto); overflow-wrap: anywhere; }
.fv-avisar-cabeza .fv-boton-redondo { flex: none; background: var(--fv-crema); }

.fv-avisar-mosaico {
    display: grid;
    flex: none;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    overflow: hidden;
}

.fv-avisar-mosaico > :first-child { grid-row: 1 / span 2; }
.fv-avisar-personas, .fv-avisar-personas [data-selector] { display: flex; flex-direction: column; gap: 12px; }
.fv-avisar-pregunta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.fv-avisar-pie { display: flex; flex-direction: column; gap: 10px; }
.fv-avisar-nota { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; color: var(--fv-secundario); text-align: center; }

@media (max-width: 767.98px) {
    .fv-aviso-exclusiones .fv-boton { width: 100%; }
    .fv-tarjeta-acceso { padding: 18px; }
    .fv-accesos-seccion h2 { font-size: 26px; }
    .fv-clave-carpeta-cabeza { height: 120px; }
    .fv-persona-elegible { width: 96px; }
    .fv-persona-elegible .fv-avatar { width: 64px; height: 64px; font-size: 18px; }
}

/* ================================================================ Operaciones, papelera, actividad y destacados (hito 9) */

/* Piezas comunes */
.fv-pastilla-oscura { background: var(--fv-texto); color: #FFFFFF; }
.fv-texto-granate { color: var(--fv-granate); }
.fv-boton-rosa { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-boton-rosa:hover { background: var(--fv-rosa-medio); color: var(--fv-granate); }
.fv-entradilla-ancha { max-width: 560px; }

/* Botones en pestañas que se pulsan (Copiar · Mover) */
.fv-pestanas > button[aria-pressed="true"] { background: var(--fv-texto); color: #FFFFFF; }

/* Chips que en el móvil se desplazan en lugar de partirse en varias líneas */
@media (max-width: 575.98px) {
    .fv-chips-tipo, .fv-chips-desplazables { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .fv-chips-tipo::-webkit-scrollbar, .fv-chips-desplazables::-webkit-scrollbar { display: none; }
    .fv-chips-tipo > .fv-chip, .fv-chips-desplazables > .fv-chip { flex: none; }
}

/* ---------------------------------------------------------------- Barra de herramientas del explorador (componentes/explorador.js) */

.fv-explorador > .fv-barra-explorador { margin: 0 0 28px; }
.fv-barra-explorador-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fv-barra-explorador .fv-selector-pildora { min-height: 44px; }

/* En el móvil: la vista junto al buscador; debajo, los tipos y, en otra fila, la fecha y el orden a medias */
@media (max-width: 575.98px) {
    .fv-barra-explorador .fv-buscador { flex: 1 1 0; min-width: 0; }
    .fv-barra-explorador .fv-vistas { order: 1; }
    .fv-barra-explorador .fv-chips-tipo { order: 2; flex-basis: 100%; }
    .fv-barra-explorador-pie { order: 3; flex: 1 1 100%; flex-wrap: nowrap; }
    .fv-barra-explorador .fv-selector-pildora { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Vista: mosaico o lista */
.fv-vistas { display: flex; flex: none; gap: 2px; padding: 2px; border-radius: 999px; background: var(--fv-crema); }

.fv-vistas > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fv-texto);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-vistas > button:hover { background: rgba(47, 47, 48, 0.07); }
.fv-vistas > button[aria-pressed="true"] { background: var(--fv-texto); color: #FFFFFF; }
.fv-vistas > button:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

/* Mientras llega lo pedido con otros filtros, lo de antes se atenúa */
.fv-explorador[aria-busy="true"] :is([data-seccion], [data-vacio], [data-sin-resultados]) { opacity: 0.55; transition: opacity 0.15s ease; }

/* Búsqueda: «Resultados para «…»» y la ruta de cada resultado */
.fv-busqueda-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; }
.fv-busqueda-cabeza[hidden] { display: none; }
.fv-busqueda-titulo { margin: 0; font-size: 26px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.fv-resultado-ruta { display: block; overflow: hidden; font-size: 13px; color: var(--fv-secundario); text-overflow: ellipsis; white-space: nowrap; }
.fv-carpeta .fv-resultado-ruta { margin-top: -6px; }

/* ---------------------------------------------------------------- Estrella (componentes/destacados.js) */

.fv-estrella {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(47, 47, 48, 0.18);
    color: var(--fv-texto);
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.fv-estrella[aria-pressed="true"] { background: var(--fv-lima); opacity: 1; }
.fv-estrella:focus-visible { outline: none; opacity: 1; box-shadow: var(--fv-anillo-foco); }
:is(.fv-archivo, .fv-carpeta-caja):hover > .fv-estrella, body.con-seleccion .fv-estrella { opacity: 1; }

@media (hover: none) {
    .fv-estrella { opacity: 1; }
}

/* En una carpeta del equipo, junto a su menú "···" (y las etiquetas, antes de los dos) */
.fv-carpeta-caja.con-menu > .fv-estrella { right: 58px; }
.fv-carpeta-caja.con-estrella .fv-mosaico-etiquetas { right: 62px; }
.fv-carpeta-caja.con-estrella.con-menu .fv-mosaico-etiquetas { right: 110px; }

/* En las filas de la lista, sin fondo hasta que está marcada */
.fv-fila-acciones .fv-estrella { position: static; width: 40px; height: 40px; background: none; box-shadow: none; font-size: 16px; opacity: 1; }
.fv-fila-acciones .fv-estrella:hover { background: rgba(47, 47, 48, 0.07); }
.fv-fila-acciones .fv-estrella[aria-pressed="true"] { background: var(--fv-lima); }

/* En el visor, en lima cuando está marcada */
.fv-visor-estrella[aria-pressed="true"] { color: var(--fv-lima); }

/* ---------------------------------------------------------------- Vista de lista del explorador */

.fv-tabla-explorador { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }

.fv-tabla-explorador th {
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--fv-gris);
    font-size: 13px;
    font-weight: 500;
    color: var(--fv-secundario);
    text-align: left;
    white-space: nowrap;
}

.fv-tabla-explorador th button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.fv-tabla-explorador th button:hover { color: var(--fv-texto); }
.fv-tabla-explorador th button:focus-visible { outline: none; border-radius: 8px; box-shadow: var(--fv-anillo-foco); }
.fv-tabla-explorador th button i { font-size: 11px; opacity: 0; }
.fv-tabla-explorador th.ordenada { color: var(--fv-texto); }
.fv-tabla-explorador th.ordenada button i { opacity: 1; }

.fv-tabla-explorador td { padding: 8px 10px; border-bottom: 1px solid var(--fv-gris); vertical-align: middle; }
.fv-fila-explorador:hover > td { background: #FAF8F3; }
.fv-fila-explorador.seleccionado > td { background: var(--fv-rosa); }

.fv-col-marca { width: 46px; padding-right: 0 !important; }
.fv-col-nombre { width: 100%; max-width: 0; }
.fv-col-autor { width: 20%; min-width: 120px; max-width: 220px; overflow: hidden; color: var(--fv-secundario); text-overflow: ellipsis; white-space: nowrap; }
.fv-col-fecha { width: 110px; color: var(--fv-secundario); white-space: nowrap; }
.fv-col-tamano { width: 110px; color: var(--fv-secundario); text-align: right; white-space: nowrap; }
th.fv-col-tamano { text-align: right; }
.fv-col-acciones { width: 96px; text-align: right; white-space: nowrap; }

/* La casilla de elegir, siempre a la vista. Relativa y sin desplazar (no static): en táctil, su ::after de 44 px se medía
   contra la página entera y tapaba todo con el último archivo de la lista (iPad, 19/10/2026) */
.fv-fila-explorador .fv-check { position: relative; inset: auto; opacity: 1; border-color: #C9CBD0; background: #FFFFFF; box-shadow: none; }
.fv-fila-explorador .fv-check i { color: #FFFFFF; }
.fv-fila-explorador.seleccionado .fv-check { border-color: var(--fv-granate); background: var(--fv-granate); }
.fv-fila-explorador.seleccionado .fv-check i { opacity: 1; }

.fv-fila-enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fv-texto);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.fv-fila-enlace:hover { color: var(--fv-texto); }
.fv-fila-enlace:focus-visible { outline: none; border-radius: 10px; box-shadow: var(--fv-anillo-foco); }

.fv-fila-icono {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--fv-crema);
    color: var(--fv-oscuro);
    font-family: var(--fv-fuente-titulos);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fv-fila-icono.fv-mosaico { display: grid; align-items: stretch; justify-content: stretch; height: 40px; gap: 2px; border-radius: 10px; transition: none; }
.fv-carpeta:hover .fv-fila-icono.fv-mosaico, .fv-fila-enlace:hover .fv-fila-icono.fv-mosaico { transform: none; }
.fv-fila-icono > img { width: 100%; height: 100%; object-fit: cover; }
.fv-fila-icono.fv-archivo-rosa { color: var(--fv-granate); }
.fv-fila-icono.fv-archivo-video { color: #FFFFFF; font-size: 12px; }
.fv-fila-icono.fv-archivo-esperando { aspect-ratio: auto; }

.fv-fila-texto { display: flex; flex-direction: column; min-width: 0; }
.fv-fila-nombre { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fv-fila-nombre .fa-lock { font-size: 11px; color: var(--fv-secundario); }
.fv-fila-ruta, .fv-fila-movil { overflow: hidden; font-size: 12px; color: var(--fv-secundario); text-overflow: ellipsis; white-space: nowrap; }
.fv-fila-movil { display: none; }

.fv-fila-acciones { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.fv-fila-acciones .fv-carpeta-menu { position: static; }
.fv-fila-hueco { display: block; flex: none; width: 40px; }   /* el sitio del menú "···" en las filas de archivos: las estrellas alineadas */

/* A 390 px: la fecha y el tamaño, bajo el nombre */
@media (max-width: 575.98px) {
    .fv-tabla-explorador :is(.fv-col-autor, .fv-col-fecha, .fv-col-tamano) { display: none; }
    .fv-fila-movil { display: block; }
    .fv-tabla-explorador td { padding: 8px 6px; }
    .fv-col-acciones { width: auto; }
}

@media (max-width: 767.98px) {
    .fv-tabla-explorador .fv-col-autor { display: none; }
}

/* ---------------------------------------------------------------- Carpetas que parecen carpetas (19/10/2026, petición del usuario)
   En el explorador, una carpeta no se confunde con un archivo: en el mosaico, pestaña y marco del color de carpeta, su icono y el
   nombre más marcado con lo que tiene debajo; en la lista, el icono de carpeta, fondo propio, nombre en negrita y «›» */

.fv-carpeta-caja { --fv-carpeta: var(--fv-dorado); --fv-carpeta-oscuro: #9A7D3E; }

.fv-carpeta-forma {
    position: relative;
    display: block;
    padding-top: 14px;
    transition: transform 0.15s ease;
}

.fv-carpeta-forma::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    max-width: 130px;
    height: 24px;
    border-radius: 12px 14px 0 0;
    background: var(--fv-carpeta);
}

.fv-carpeta-forma > .fv-mosaico {
    height: 150px;
    border: 5px solid var(--fv-carpeta);
    border-top-left-radius: 0;
}

.fv-carpeta-caja .fv-carpeta:hover .fv-mosaico { transform: none; }
.fv-carpeta-caja .fv-carpeta:hover .fv-carpeta-forma { transform: translateY(-2px); }
.fv-carpeta-caja.seleccionado .fv-carpeta-forma > .fv-mosaico { outline-offset: 2px; }

/* Lo que va encima del mosaico, bajado lo que ocupa la pestaña */
.fv-carpeta-caja > .fv-check { top: 27px; left: 13px; }
.fv-carpeta-caja > :is(.fv-estrella, .fv-carpeta-menu) { top: 26px; right: 13px; }
.fv-carpeta-caja.con-menu > .fv-estrella { right: 61px; }

.fv-carpeta-caja .fv-carpeta-pie { align-items: center; justify-content: flex-start; gap: 10px; }
.fv-carpeta-icono { flex: none; font-size: 24px; color: var(--fv-carpeta-oscuro); }
.fv-carpeta-textos { display: flex; flex-direction: column; min-width: 0; }
.fv-carpeta-caja .fv-carpeta-nombre {
    display: -webkit-box;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.fv-carpeta-caja .fv-carpeta-cuenta { font-size: 13px; }

.fv-fila-es-carpeta > td { background: #FBF8F1; }
.fv-fila-es-carpeta:hover > td { background: #F4EEE0; }
.fv-fila-icono-carpeta { background: var(--fv-arena); color: #9A7D3E; font-size: 20px; }
.fv-fila-es-carpeta .fv-fila-nombre { font-weight: 700; }
.fv-fila-entrar { flex: none; margin-left: auto; padding: 0 4px 0 10px; font-size: 12px; color: var(--fv-secundario); }

/* ---------------------------------------------------------------- Ubicación junto al contenido (19/10/2026; explorador.js, ponerUbicacion)
   La ruta hasta la carpeta que se ve, justo encima de sus carpetas y archivos, con «Subir un nivel» a la de arriba */

.fv-ubicacion {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0 0 22px;
    padding: 6px 14px 6px 6px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--fv-gris);
}

.fv-ubicacion-arriba {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--fv-crema);
    color: var(--fv-texto);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.fv-ubicacion-arriba:hover { background: var(--fv-arena); color: var(--fv-texto); }
.fv-ubicacion-arriba:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-ubicacion-ruta {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    font-size: 14px;
}

.fv-ubicacion-ruta > li { display: flex; flex: 0 3 auto; align-items: center; min-width: 0; }
.fv-ubicacion-ruta > li + li::before { content: '›'; flex: none; padding: 0 8px; font-size: 18px; line-height: 1; color: var(--fv-secundario); }
.fv-ubicacion-ruta a {
    display: block;
    max-width: 200px;
    padding: 6px 4px;
    overflow: hidden;
    border-radius: 8px;
    color: var(--fv-secundario);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fv-ubicacion-ruta a:hover { color: var(--fv-texto); text-decoration: underline; }
.fv-ubicacion-ruta a:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-ubicacion-ruta > li[aria-current] { flex: 0 1 auto; gap: 8px; font-weight: 700; color: var(--fv-texto); }
.fv-ubicacion-ruta > li[aria-current] > i { flex: none; font-size: 16px; color: #9A7D3E; }
.fv-ubicacion-ruta > li[aria-current] > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En el móvil, «Subir un nivel» solo con su flecha y la ruta, desde el final */
@media (max-width: 575.98px) {
    .fv-ubicacion { gap: 8px; padding-right: 10px; }
    .fv-ubicacion-arriba { justify-content: center; width: 44px; min-height: 44px; padding: 0; }
    .fv-ubicacion-arriba > span { display: none; }
    .fv-ubicacion-ruta > li:not(:nth-last-child(-n+2)) { display: none; }
    .fv-ubicacion-ruta > li:nth-last-child(2):not(:first-child)::before { content: '…'; padding-left: 0; font-size: 14px; }
    .fv-ubicacion-ruta > li:last-child::before { padding: 0 6px; }
    .fv-ubicacion-ruta a { max-width: 120px; }
    .fv-carpeta-caja .fv-carpeta-nombre { font-size: 16px; }
}

@media (pointer: coarse) {
    .fv-ubicacion-arriba { min-height: 44px; }
}

/* ---------------------------------------------------------------- Copiar o mover: selector de destino (selector-contenedor.js) */

.fv-selector-nota { margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--fv-crema); font-size: 13px; line-height: 1.5; color: var(--fv-oscuro); }
.fv-selector-nota[hidden] { display: none; }

.fv-arbol, .fv-arbol-hijas { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fv-arbol[hidden], .fv-arbol-hijas[hidden] { display: none; }
.fv-arbol-hijas { padding-left: 24px; }
.fv-arbol-fila { display: flex; align-items: center; gap: 2px; }

.fv-arbol-flecha {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--fv-secundario);
    font-size: 12px;
    cursor: pointer;
}

.fv-arbol-flecha:hover { background: rgba(47, 47, 48, 0.07); }
.fv-arbol-flecha:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-arbol-flecha:disabled { cursor: default; opacity: 0.4; }
.fv-arbol-flecha i { transition: transform 0.15s ease; }
.fv-arbol-flecha[aria-expanded="true"] i { transform: rotate(90deg); }

.fv-arbol-elegir {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 52px;
    padding: 0 10px;
    border: 0;
    border-radius: 18px;
    background: none;
    color: var(--fv-texto);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.fv-arbol-elegir:hover { background: var(--fv-crema); }
.fv-arbol-elegir:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-arbol-elegir[aria-pressed="true"] { background: var(--fv-rosa); color: var(--fv-granate); font-weight: 600; }
.fv-arbol-elegir:disabled { cursor: not-allowed; opacity: 0.45; }
.fv-arbol-elegir:disabled:hover { background: none; }

.fv-arbol-mosaico { flex: none; width: 36px; height: 36px; gap: 2px; border-radius: 10px; transition: none; }
.fv-arbol-mosaico-contenedor { width: 40px; height: 40px; border-radius: 12px; }
.fv-arbol-nodo[data-nivel="1"] > .fv-arbol-fila .fv-arbol-elegir { font-weight: 600; }
.fv-arbol-texto { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fv-arbol-nombre, .fv-arbol-detalle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-arbol-detalle { font-size: 12px; font-weight: 400; color: var(--fv-secundario); }
.fv-arbol-detalle:empty { display: none; }

.fv-arbol-marca {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fv-granate);
    color: #FFFFFF;
    font-size: 13px;
}

.fv-arbol-elegir[aria-pressed="true"] .fv-arbol-marca { display: flex; }

.fv-nueva-aqui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fv-nueva-aqui[hidden] { display: none; }
.fv-nueva-aqui .fv-campo { flex: 1 1 220px; width: auto; min-height: 48px; }
.fv-nueva-aqui .invalid-feedback { flex-basis: 100%; margin-top: 0; }

.fv-aviso-destino { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--fv-aviso-fondo); color: var(--fv-aviso); font-size: 14px; line-height: 1.5; }
.fv-aviso-destino[hidden] { display: none; }
.fv-aviso-destino > i { margin-top: 3px; }
.fv-aviso-destino-error { background: #FBE9E7; color: var(--fv-peligro); }

@media (max-width: 575.98px) {
    .fv-selector-pie-destino > [data-nueva] { flex: 1 1 100%; }
    .fv-selector-pie-destino > .fv-selector-cuenta { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- Papelera (componentes/papelera.js; bocetos Agencia-papelera y *-papelera-perfil) */

.fv-rejilla-papelera { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 28px 20px; }
.fv-rejilla-papelera[aria-busy="true"]:empty { min-height: 240px; }

.fv-borrado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fv-borrado-imagen { position: relative; height: 220px; overflow: hidden; border-radius: 20px; background: var(--fv-crema); }

/* Lo borrado, atenuado */
.fv-borrado-vista { position: absolute; inset: 0; opacity: 0.55; }
.fv-borrado-vista.fv-archivo-icono { min-height: 0; padding: 20px; justify-content: flex-end; }
.fv-borrado-vista.fv-archivo-icono .fv-archivo-ext { font-size: 56px; }
.fv-borrado-vista.fv-mosaico { height: auto; border-radius: 0; transition: none; }
.fv-borrado-miniatura > img { width: 100%; height: 100%; object-fit: cover; }

.fv-borrado-reemplazado { position: absolute; top: 12px; left: 12px; z-index: 2; }
.fv-borrado-dias { position: absolute; top: 12px; right: 12px; z-index: 2; }
.fv-borrado-tipo { position: absolute; bottom: 12px; left: 12px; z-index: 2; }

.fv-borrado-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 4px; }
.fv-borrado-nombre { margin: 0; overflow: hidden; font-family: var(--fv-fuente-texto); font-size: 16px; font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.fv-borrado-dato { font-size: 13px; line-height: 1.4; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-borrado-dato[hidden] { display: none; }
.fv-borrado-recuperar { align-self: flex-start; }

/* Papelera y perfil en la misma página (clientes y proveedores) */
.fv-perfil.con-papelera { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; max-width: none; }
.fv-papelera-fuera { display: flex; flex: 999 1 560px; flex-direction: column; gap: 28px; min-width: 0; }
.fv-papelera-fuera[hidden] { display: none; }
.fv-perfil.con-papelera > .fv-perfil-tarjeta { flex: 1 1 320px; }
.fv-papelera-fuera .fv-rejilla-papelera { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 24px; }

/* ---------------------------------------------------------------- Actividad (#/contenedor/{id}/actividad; boceto Agencia-actividad) */

.fv-barra-actividad { margin: 24px 0 32px; }
.fv-barra-actividad-pie { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.fv-barra-actividad-pie .fv-selector-pildora { min-height: 44px; max-width: 100%; }

.fv-actividad { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; }
.fv-actividad-historial { flex: 999 1 560px; min-width: 0; }
.fv-actividad-titulo { margin: 0 0 22px; font-size: 30px; letter-spacing: -0.035em; }
.fv-actividad-aparte { flex: 1 1 280px; gap: 16px; padding: 24px; border-radius: var(--fv-radio-hero); }
.fv-actividad-aparte > .fv-pastilla { align-self: flex-start; }
.fv-actividad-aparte-titulo { margin: 0; font-family: var(--fv-fuente-titulos); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.fv-actividad-aparte-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fv-oscuro); }

/* Línea de tiempo: el avatar de quien lo hizo sobre la línea y la tarjeta del evento */
.fv-linea-tiempo { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fv-linea-tiempo:not(:empty)::before { content: ''; position: absolute; top: 24px; bottom: 24px; left: 23px; width: 2px; background: var(--fv-gris); }
.fv-linea-tiempo[aria-busy="true"]:empty { min-height: 200px; }
.fv-evento { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.fv-evento-avatar { width: 48px; height: 48px; border: 4px solid #FFFFFF; box-sizing: border-box; font-size: 14px; }

.fv-evento-tarjeta {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 24px;
    background: var(--fv-crema);
}

.fv-evento-imagen { position: relative; display: flex; flex: none; width: 56px; height: 64px; overflow: hidden; border-radius: 16px; background: #FFFFFF; }
.fv-evento-imagen.fv-archivo-icono { min-height: 0; padding: 8px; justify-content: flex-end; }
.fv-evento-imagen .fv-archivo-ext { font-size: 17px; }
.fv-evento-imagen .fv-archivo-grupo-icono { display: none; }
.fv-evento-imagen .fv-reproducir { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 10px; }
.fv-evento-imagen.fv-mosaico { display: grid; height: 64px; gap: 2px; border-radius: 16px; transition: none; }
.fv-evento-miniatura > img { width: 100%; height: 100%; object-fit: cover; }
.fv-evento-borrado { opacity: 0.5; }

.fv-evento-texto { flex: 1 1 240px; min-width: 0; }
.fv-evento-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; }
.fv-evento-nombre { font-weight: 600; }
.fv-evento-etiqueta { font-size: 13px; color: var(--fv-secundario); }
.fv-evento-elemento { margin-top: 4px; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.fv-evento-elemento a { color: inherit; text-decoration-color: rgba(47, 47, 48, 0.3); }
.fv-evento-detalle { font-size: 13px; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-evento-fecha { font-size: 13px; color: var(--fv-secundario); white-space: nowrap; }

/* La acción, en su píldora (los colores del boceto) */
.fv-verbo { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.fv-verbo-subir { background: var(--fv-granate); color: #FFFFFF; }
.fv-verbo-borrar { padding: 3px 11px; border: 1px solid var(--fv-peligro); background: #FFFFFF; color: var(--fv-peligro); }
.fv-verbo-mover { background: var(--fv-lima); color: var(--fv-texto); }
.fv-verbo-copiar { background: var(--fv-ok-fondo); color: var(--fv-ok); }
.fv-verbo-renombrar { background: var(--fv-aviso-fondo); color: var(--fv-aviso); }
.fv-verbo-descargar { background: var(--fv-cielo); color: var(--fv-texto); }
.fv-verbo-otro { background: #FFFFFF; color: var(--fv-oscuro); }

@media (max-width: 575.98px) {
    .fv-barra-actividad-pie { width: 100%; margin-left: 0; }
    .fv-barra-actividad-pie .fv-selector-pildora { flex: 1 1 0; width: auto; min-width: 0; }
    .fv-linea-tiempo:not(:empty)::before { left: 17px; }
    .fv-evento { gap: 10px; }
    .fv-evento-avatar { width: 36px; height: 36px; border-width: 3px; font-size: 12px; }
    .fv-evento-tarjeta { padding: 12px; border-radius: 20px; }
}

/* ---------------------------------------------------------------- Destacados de los inicios (bocetos Agencia-panel y Cliente-inicio) */

.fv-destacados[hidden] { display: none; }
.fv-rejilla-destacados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 18px; }

.fv-destacado {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fv-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fv-destacado:focus-visible { outline: none; border-radius: 20px; box-shadow: var(--fv-anillo-foco); }
.fv-destacado:hover .fv-destacado-imagen { transform: translateY(-2px); }

.fv-destacado-imagen { position: relative; display: block; height: 140px; overflow: hidden; border-radius: 20px; transition: transform 0.15s ease; }
.fv-destacado-imagen.fv-mosaico { display: grid; }
.fv-destacado-imagen.fv-archivo-icono { display: flex; min-height: 0; padding: 16px; justify-content: flex-end; }
.fv-destacado-imagen .fv-archivo-ext { font-size: 36px; }
.fv-destacado-miniatura { background: var(--fv-crema); }
.fv-destacado-miniatura > img { width: 100%; height: 100%; object-fit: cover; }

.fv-destacado-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fv-destacado-nombre, .fv-destacado-ruta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-destacado-nombre { font-size: 14px; font-weight: 500; }
.fv-destacado-ruta { font-size: 13px; color: var(--fv-secundario); }
.fv-destacado-ruta[hidden] { display: none; }

/* Equipo: la tarjeta rosa del panel */
.fv-destacados-equipo { margin-top: 28px; padding: 28px; border-radius: var(--fv-radio-tarjeta); background: var(--fv-rosa); }
.fv-destacados-equipo > h2 { display: flex; align-items: center; gap: 10px; font-size: 28px; letter-spacing: -0.035em; }
.fv-destacados-equipo > h2 > i { font-size: 22px; color: var(--fv-granate); }
.fv-destacados-equipo .fv-rejilla-destacados { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 16px; }
.fv-destacados-equipo .fv-destacado-imagen { height: 160px; }
.fv-destacados-equipo .fv-destacado-nombre { font-size: 16px; font-weight: 600; }
.fv-destacados-debajo { margin-top: 40px; }

/* ---------------------------------------------------------------- Panel de subida: "Avisar al cliente al terminar" (boceto Comun-subida) */

.fv-subidas-avisar { flex: none; }
.fv-subidas-avisar[hidden] { display: none; }

/* ================================================================ Envíos de clientes (hito 10) */

/* Panel de subida: un interruptor "Avisar al cliente al terminar" por carpeta de destino */
.fv-subidas-avisos { display: flex; flex-direction: column; gap: 8px; }
.fv-subidas-avisos:empty { display: none; }

/* La píldora "Resuelto" (Mis envíos y Todos los envíos) */
.fv-pastilla-resuelto { background: #FFFFFF; color: var(--fv-oscuro); box-shadow: inset 0 0 0 1px var(--fv-gris); }

/* ---------------------------------------------------------------- Inicio del cliente: "Envía archivos a Estratagema" (boceto Cliente-inicio) */

.fv-inicio-cliente-arriba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; align-items: stretch; }
.fv-inicio-cliente-arriba .fv-inicio-cliente-saludo { justify-content: flex-end; }

.fv-tarjeta-enviar-agencia {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    min-height: 280px;
    padding: 32px;
    border: 0;
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-granate);
    color: #FFFFFF;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.fv-tarjeta-enviar-agencia:hover { background: var(--fv-granate-hover); transform: translateY(-2px); }
.fv-tarjeta-enviar-agencia:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-tarjeta-enviar-agencia-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fv-granate);
    font-size: 30px;
}

.fv-tarjeta-enviar-agencia-titulo { display: block; font-family: var(--fv-fuente-titulos); font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.fv-tarjeta-enviar-agencia-texto { display: block; margin-top: 12px; font-size: 15px; color: var(--fv-rosa-texto); }

/* ---------------------------------------------------------------- Nuevo envío del cliente (vistas/enviar-cliente.html; boceto Cliente-nuevo-envio) */

.fv-envio-para { margin-bottom: 10px; font-size: 13px; color: var(--fv-secundario); }
.fv-envio-personas .fv-buscador { margin-bottom: 10px; }
.fv-envio-motivo { margin: -8px 0 0; font-size: 13px; line-height: 1.45; text-align: center; color: var(--fv-secundario); }
.fv-envio-motivo:empty { display: none; }
.fv-pastilla-espacios { margin-right: 6px; padding: 2px 8px; background: var(--fv-rosa); color: var(--fv-granate); font-size: 11px; font-weight: 500; }

/* El equipo en pequeño: avatares de 52 px con su nombre y cargo; los elegidos, en granate con la marca lima */
.fv-selector-personas-compacto { gap: 6px 4px; }
.fv-selector-personas-compacto .fv-persona-elegible { width: 70px; gap: 5px; padding: 4px 0; }
.fv-selector-personas-compacto .fv-persona-elegible .fv-avatar { width: 52px; height: 52px; font-size: 15px; }
.fv-selector-personas-compacto .fv-persona-marca { right: -3px; bottom: -3px; width: 20px; height: 20px; background: var(--fv-lima); color: var(--fv-texto); font-size: 9px; }
.fv-selector-personas-compacto .fv-persona-elegible-nombre { font-size: 12px; font-weight: 400; }
.fv-selector-personas-compacto .fv-persona-elegible-cargo { font-size: 11px; }

/* ---------------------------------------------------------------- Mis envíos del cliente (boceto Cliente-mis-envios) */

.fv-rejilla-mis-envios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; }

.fv-tarjeta-mi-envio {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: none;
    color: var(--fv-texto);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.fv-tarjeta-mi-envio:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-tarjeta-mi-envio-imagen { position: relative; display: block; }
.fv-tarjeta-mi-envio-imagen .fv-mosaico-envio { height: 240px; border-radius: 26px; }
.fv-tarjeta-mi-envio:hover .fv-mosaico-envio { transform: translateY(-2px); }
.fv-tarjeta-mi-envio-estado { position: absolute; top: 14px; left: 14px; z-index: 1; }
.fv-tarjeta-mi-envio-cuerpo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fv-tarjeta-mi-envio-textos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fv-tarjeta-mi-envio-titulo { font-family: var(--fv-fuente-titulos); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; overflow-wrap: anywhere; }
.fv-tarjeta-mi-envio-meta { font-size: 14px; color: var(--fv-secundario); }
.fv-tarjeta-mi-envio-quien { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.fv-tarjeta-mi-envio-quien .fv-avatar { width: 36px; height: 36px; font-size: 12px; }
.fv-tarjeta-mi-envio-cuantos { font-size: 12px; color: var(--fv-secundario); }
.fv-tarjeta-mi-envio-para { font-size: 14px; color: var(--fv-oscuro); }

/* "Qué significa cada estado" */
.fv-leyenda-estados { margin-top: 36px; padding: 24px 28px; border-radius: var(--fv-radio-hero); background: var(--fv-crema); }
.fv-leyenda-estados h2 { margin: 0 0 16px; font-size: 22px; }
.fv-leyenda-estados-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px 28px; }
.fv-leyenda-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--fv-oscuro); }

/* Su detalle, en una ventana: para quién, el mensaje y la lista de archivos (sin descargas) */
.fv-detalle-mi-envio { display: flex; flex-direction: column; gap: 20px; }
.fv-detalle-mi-envio-para { display: flex; align-items: center; gap: 10px; font-size: 15px; }

/* ---------------------------------------------------------------- Recibidos del equipo (boceto Agencia-recibidos) */

.fv-recibidos-entradilla { max-width: 560px; }
.fv-recibidos-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }

/* "Pendientes" con su número en lima */
.fv-chip-con-numero:has(.fv-insignia:not([hidden])) { padding-right: 8px; }
.fv-chip-con-numero .fv-insignia { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; font-size: 13px; }

.fv-lista-recibidos { display: flex; flex-direction: column; gap: 28px; }

.fv-recibido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 28px;
    padding: 20px;
    border-radius: var(--fv-radio-tarjeta);
    background: var(--fv-crema);
}

/* Sus dos primeros elementos, el primero más ancho */
.fv-recibido-mosaico { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; min-height: 300px; }
.fv-recibido-mosaico-uno { grid-template-columns: 1fr; min-height: 240px; }
.fv-recibido-pieza { position: relative; min-width: 0; overflow: hidden; border-radius: 22px; }
.fv-recibido-pieza.fv-mosaico { height: auto; min-height: 120px; border-radius: 22px; }
.fv-recibido-pieza-foto { background: var(--fv-crema); }
.fv-recibido-pieza-foto > .fv-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-recibido-pieza-etiqueta { position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }

.fv-recibido-pieza-archivo { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 120px; padding: 16px; color: var(--fv-oscuro); }
.fv-recibido-pieza-pdf, .fv-recibido-pieza-documento { background: var(--fv-rosa); color: var(--fv-granate); }
.fv-recibido-pieza-archivo.fv-fondo-oscuro { color: #FFFFFF; }
.fv-recibido-pieza-ext { font-family: var(--fv-fuente-titulos); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.fv-recibido-mosaico-uno .fv-recibido-pieza-ext { font-size: 72px; letter-spacing: -0.05em; line-height: 0.9; }
.fv-recibido-pieza-nombre { font-size: 13px; color: var(--fv-oscuro); overflow-wrap: anywhere; }
.fv-fondo-oscuro .fv-recibido-pieza-nombre { color: rgba(255, 255, 255, 0.85); }

.fv-recibido-cuerpo { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 8px 8px 4px; }
.fv-recibido-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fv-recibido-avatar { width: 56px; height: 56px; font-size: 17px; }
.fv-recibido-quien-texto { flex: 1 1 160px; min-width: 0; }
.fv-recibido-empresa { margin: 0; font-size: 28px; letter-spacing: -0.03em; line-height: 1; overflow-wrap: anywhere; }
.fv-recibido-nombre { margin-top: 4px; font-size: 15px; color: var(--fv-secundario); }
.fv-recibido-para { display: flex; align-items: center; gap: 10px; font-size: 15px; }

/* El mensaje del cliente, en su globo */
.fv-recibido-mensaje {
    margin: 0;
    padding: 16px 18px;
    border-radius: 6px 20px 20px 20px;
    background: #FFFFFF;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.fv-recibido-resumen { font-size: 14px; color: var(--fv-secundario); overflow-wrap: anywhere; }
.fv-recibido-no-disponibles { color: var(--fv-aviso); font-weight: 500; }

.fv-recibido-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.fv-recibido-acciones .fv-boton-grande { min-height: 52px; padding: 0 22px; font-size: 16px; }

/* Resuelto: «Guardado en … por …» o «Borrado por …» */
.fv-recibido-resolucion { display: flex; align-items: flex-start; gap: 10px; margin: auto 0 0; padding: 14px 16px; border-radius: 18px; background: #FFFFFF; font-size: 14px; line-height: 1.45; }
.fv-recibido-resolucion i { flex: none; margin-top: 2px; color: var(--fv-granate); }
.fv-recibido-resolucion a { color: var(--fv-granate); font-weight: 600; }
.fv-recibido-resolucion-borrado i { color: var(--fv-secundario); }
.fv-recibido-resolucion + .fv-recibido-acciones { margin-top: 0; }

/* La nota del recordatorio semanal */
.fv-recibidos-nota { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; font-size: 14px; line-height: 1.45; color: var(--fv-secundario); }
.fv-recibidos-nota-icono { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fv-crema); color: var(--fv-texto); }

/* Su detalle (#/recibidos/{id}): la tarjeta y, debajo, los archivos con su selección y sus descargas */
.fv-recibido-detalle { margin-top: 8px; }
.fv-recibido-detalle .fv-recibido-mosaico { min-height: 260px; }
.fv-recibido-archivos { margin-top: 36px; }
.fv-recibido-archivos-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.fv-recibido-descargas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fv-recibido-elegidos { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--fv-secundario); }
.fv-lista-sin-descargas .fv-lista-envio-descargar { display: none; }
.fv-lista-sin-descargas .fv-lista-envio-casilla { visibility: hidden; }

/* ---------------------------------------------------------------- Papelera: el envío recibido (boceto Agencia-papelera) */

.fv-borrado-envio { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 20px; background: var(--fv-piedra); }
.fv-borrado-envio .fv-avatar { width: 44px; height: 44px; border: 2px solid #FFFFFF; font-size: 14px; }
.fv-borrado-envio-texto { font-family: var(--fv-fuente-titulos); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--fv-oscuro); }

/* ---------------------------------------------------------------- Móvil */

@media (max-width: 767.98px) {
    .fv-tarjeta-enviar-agencia { min-height: 200px; gap: 28px; padding: 24px; border-radius: var(--fv-radio-hero); }
    .fv-tarjeta-enviar-agencia-mas { width: 56px; height: 56px; font-size: 24px; }
    .fv-tarjeta-mi-envio-imagen .fv-mosaico-envio { height: 200px; }
    .fv-recibido { gap: 18px; padding: 14px; border-radius: var(--fv-radio-hero); }
    .fv-recibido-mosaico { min-height: 200px; }
    .fv-recibido-mosaico-uno { min-height: 180px; }
    .fv-recibido-mosaico-uno .fv-recibido-pieza-ext { font-size: 56px; }
    .fv-recibido-cuerpo { padding: 4px 4px 2px; }
    .fv-recibido-empresa { font-size: 24px; }
    .fv-recibido-acciones .fv-boton { flex: 1 1 auto; justify-content: center; }
    .fv-recibido-descargas { width: 100%; }
    .fv-recibido-descargas .fv-boton { flex: 1 1 auto; justify-content: center; }
    .fv-leyenda-estados { padding: 20px; }
}

/* ================================================================ Álbumes (hito 11) */

/* ---------------------------------------------------------------- Mosaico de un álbum (componentes/albumes.js, htmlImagenAlbum) */

.fv-album-imagen-banner { position: relative; display: block; overflow: hidden; background-color: var(--fv-oscuro); background-position: center; background-size: cover; background-repeat: no-repeat; }
.fv-album-imagen.fv-mosaico { background: var(--fv-crema); }

/* ---------------------------------------------------------------- Lista del equipo (#/albumes; boceto Agencia-albumes) */

.fv-rejilla-albumes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 32px 24px; }

.fv-tarjeta-album {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fv-texto);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.fv-tarjeta-album:hover { color: var(--fv-texto); }
.fv-tarjeta-album:focus-visible { outline: none; border-radius: 28px; box-shadow: var(--fv-anillo-foco); }
.fv-tarjeta-album-imagen { position: relative; display: block; height: 300px; overflow: hidden; border-radius: 28px; transition: transform 0.15s ease; }
.fv-tarjeta-album:hover .fv-tarjeta-album-imagen { transform: translateY(-2px); }
.fv-tarjeta-album-imagen > .fv-album-imagen { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.fv-tarjeta-album-chips { position: absolute; top: 18px; right: 18px; left: 18px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.fv-tarjeta-album-chips .fv-pastilla { padding: 6px 12px; font-weight: 500; }
.fv-tarjeta-album-chips .fv-pastilla-lima, .fv-tarjeta-album-chips .fv-pastilla-aviso { font-weight: 600; }

/* El título, encima: oscuro sobre los tonos; blanco con un velo sobre el banner o las fotos */
.fv-tarjeta-album-titulo {
    position: absolute;
    right: 24px;
    bottom: 26px;
    left: 24px;
    z-index: 2;
    font-family: var(--fv-fuente-titulos);
    font-size: clamp(34px, 3.6vw, 46px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.92;
    overflow-wrap: anywhere;
}

.fv-tarjeta-album.con-imagen .fv-tarjeta-album-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(47, 47, 48, 0.12) 0%, rgba(47, 47, 48, 0) 35%, rgba(47, 47, 48, 0.62) 100%);
    pointer-events: none;
}

.fv-tarjeta-album.con-imagen .fv-tarjeta-album-titulo { color: #FFFFFF; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.25); }
.fv-tarjeta-album-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; }
.fv-tarjeta-album-meta > :first-child { min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.fv-tarjeta-album-meta > :last-child:not(:first-child) { flex: none; font-size: 13px; color: var(--fv-secundario); }

/* Caducado · oculto: atenuada */
.fv-tarjeta-album.apagada { color: var(--fv-secundario); }
.fv-tarjeta-album.apagada .fv-tarjeta-album-imagen { background: var(--fv-crema); }
.fv-tarjeta-album.apagada .fv-album-imagen { opacity: 0.35; }
.fv-tarjeta-album.apagada .fv-tarjeta-album-titulo { color: var(--fv-secundario); text-shadow: none; }
.fv-tarjeta-album.apagada .fv-tarjeta-album-imagen::after { display: none; }
.fv-tarjeta-album.apagada .fv-tarjeta-album-meta > :first-child { color: var(--fv-oscuro); }

/* ---------------------------------------------------------------- "Nuevo álbum" y "Al álbum" */

.fv-dato-fijo-album {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 0;
    padding: 10px 16px;
    border-radius: var(--fv-radio-campo);
    background: var(--fv-crema);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.fv-dato-fijo-album > i { flex: none; color: var(--fv-secundario); }
.fv-dato-fijo-album a { color: var(--fv-texto); }

.fv-al-album-lista { display: flex; flex-direction: column; gap: 8px; max-height: min(50vh, 420px); overflow-y: auto; }

.fv-al-album-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--fv-gris);
    border-radius: 20px;
    background: #FFFFFF;
    color: var(--fv-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.fv-al-album-fila:hover { border-color: #C9CBD0; background: #FBFAF6; }
.fv-al-album-fila:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-al-album-mosaico { flex: none; width: 64px; height: 64px; border-radius: 14px; }
.fv-al-album-mosaico.fv-mosaico { gap: 2px; }
.fv-al-album-texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.fv-al-album-texto strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.fv-al-album-texto span { font-size: 13px; color: var(--fv-secundario); }
.fv-al-album-mas { flex: none; color: var(--fv-granate); }

/* ---------------------------------------------------------------- Cabecera de un álbum (editor, invitado y página pública) */

.fv-album-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 380px;
    padding: 56px 28px 44px;
    overflow: hidden;
    border-radius: var(--fv-radio-tarjeta);
    background-color: var(--fv-oscuro);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #FFFFFF;
    text-align: center;
}

/* Con banner, un velo para que el texto se lea. Hito 12: más denso hacia abajo, donde va el texto pequeño (el resumen, la
   entradilla): sobre un banner casi blanco, el blanco se lee (4,5:1 en el texto pequeño; el título, grande, con su sombra) */
.fv-album-hero.con-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 22, 24, 0.34) 0%, rgba(22, 22, 24, 0.56) 45%, rgba(22, 22, 24, 0.64) 100%);
}

.fv-album-hero > * { position: relative; z-index: 1; }
.fv-pastilla-translucida { padding: 6px 14px; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; font-weight: 500; white-space: normal; }
.fv-album-hero.con-banner .fv-pastilla-translucida { background: rgba(47, 47, 48, 0.42); backdrop-filter: blur(8px); }

.fv-album-hero-titulo {
    max-width: 100%;
    margin: 0;
    color: #FFFFFF;
    font-family: var(--fv-fuente-titulos);
    font-size: clamp(44px, 7.5vw, 100px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.9;
    overflow-wrap: anywhere;
}

.fv-album-hero.con-banner .fv-album-hero-titulo { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.3); }
.fv-album-hero-texto { max-width: 560px; margin: 0; font-size: 17px; line-height: 1.55; color: #E4E5E8; white-space: pre-line; overflow-wrap: anywhere; }
.fv-album-hero.con-banner .fv-album-hero-texto { color: #FFFFFF; }
.fv-album-hero-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.fv-album-hero-resumen { font-size: 14px; color: #BFC3B8; }
.fv-album-hero.con-banner .fv-album-hero-resumen { color: rgba(255, 255, 255, 0.88); }

.fv-album-hero-cambiar {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.fv-album-hero-cambiar:hover { background: rgba(255, 255, 255, 0.24); }
.fv-album-hero-cambiar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
.fv-album-hero.con-banner .fv-album-hero-cambiar { background: rgba(47, 47, 48, 0.42); backdrop-filter: blur(8px); }

/* La estrella: junto a "Ver como invitado" (editor) o arriba a la derecha (álbum) */
.fv-estrella.fv-estrella-hero { position: relative; top: auto; right: auto; z-index: 1; width: 48px; height: 48px; opacity: 1; }
.fv-estrella.fv-album-hero-estrella { position: absolute; top: 14px; right: 14px; }

/* ---------------------------------------------------------------- Editor (#/albumes/{id}; boceto Agencia-album-editor) */

.fv-album-editor { display: flex; flex-direction: column; gap: 24px; }
.fv-album-editor[hidden] { display: none; }
.fv-album-editor-arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fv-album-editor h2 { display: flex; align-items: center; gap: 10px; font-family: var(--fv-fuente-titulos); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.fv-insignia.fv-insignia-grande { min-width: 0; height: auto; padding: 4px 12px; border-radius: 999px; font-family: var(--fv-fuente-texto); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.fv-album-editor-columnas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.fv-album-editor-fotos { display: flex; flex: 999 1 520px; flex-direction: column; gap: 16px; min-width: 0; }
.fv-album-editor-ajustes { display: flex; flex: 1 1 340px; flex-direction: column; gap: 16px; min-width: 0; }
.fv-album-editor-fotos-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fv-album-editor-fotos-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* La rejilla del editor: cuadrada, para ordenar arrastrando */
.fv-rejilla-editor-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }

.fv-pieza-editor {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--fv-radio-mosaico);
    background: var(--fv-crema);
    touch-action: auto;
}

.fv-pieza-editor-ver { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ordenable .fv-pieza-editor-ver { cursor: grab; }
.fv-pieza-editor-ver:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--fv-granate); border-radius: inherit; }
.fv-pieza-editor-ver > .fv-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.fv-pieza-editor-icono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--fv-secundario); }
.fv-pieza-editor.esperando { background: linear-gradient(100deg, var(--fv-crema) 30%, #F8F5EE 50%, var(--fv-crema) 70%); background-size: 300% 100%; animation: fv-brillo 1.6s ease-in-out infinite; }
.fv-pieza-editor.esperando .fv-pieza-editor-icono { display: none; }
.fv-pieza-editor .fv-reproducir { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 15px; }
.fv-pieza-editor .fv-duracion { top: 10px; right: auto; bottom: auto; left: 56px; }

.fv-pieza-editor-likes {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--fv-lima);
    color: var(--fv-texto);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fv-pieza-editor-likes:disabled { background: rgba(255, 255, 255, 0.94); color: var(--fv-secundario); cursor: default; }
.fv-pieza-editor-likes:focus-visible, .fv-pieza-editor-quitar:focus-visible, .fv-pieza-editor-mover:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }

.fv-pieza-editor-quitar, .fv-pieza-editor-mover {
    position: absolute;
    top: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(47, 47, 48, 0.18);
    color: var(--fv-texto);
    font-size: 17px;
    cursor: pointer;
}

.fv-pieza-editor-quitar { right: 10px; }
.fv-pieza-editor-quitar:hover { background: #FFFFFF; color: var(--fv-peligro); }

/* El asa de ordenar (con el dedo, solo desde ella; con el ratón, desde toda la pieza): al pasar por encima o siempre en táctil */
.fv-pieza-editor-mover { left: 10px; font-size: 15px; cursor: grab; touch-action: none; opacity: 0; transition: opacity 0.15s ease; }
.fv-pieza-editor:hover .fv-pieza-editor-mover, .fv-pieza-editor-mover:focus-visible { opacity: 1; }
.fv-rejilla-editor-album:not(.ordenable) .fv-pieza-editor-mover { display: none; }
.fv-rejilla-editor-album:not(.ordenable) .fv-pieza-editor .fv-duracion { left: 10px; }

@media (hover: none) {
    .fv-pieza-editor-mover { opacity: 1; }
}

/* Mientras se arrastra: el hueco y la pieza que sigue al puntero */
.fv-pieza-editor.arrastrando { opacity: 0.35; outline: 2px dashed var(--fv-oscuro); outline-offset: -2px; }
.fv-pieza-editor.arrastrando > * { visibility: hidden; }

.fv-pieza-fantasma {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1090;
    margin: 0;
    list-style: none;
    box-shadow: 0 18px 40px rgba(47, 47, 48, 0.28);
    opacity: 0.95;
    pointer-events: none;
    cursor: grabbing;
}

body.fv-ordenando, body.fv-ordenando * { cursor: grabbing !important; user-select: none; }

.fv-album-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 44px 24px;
    border: 2px dashed var(--fv-gris);
    border-radius: 28px;
    color: var(--fv-secundario);
    text-align: center;
}

.fv-album-vacio[hidden] { display: none; }
.fv-album-vacio p { max-width: 460px; font-size: 15px; line-height: 1.5; }

.fv-album-nota-carpeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--fv-secundario); }

/* Ajustes del álbum: Datos, Invitados y Acceso público por QR */
.fv-album-ajuste { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--fv-gris); border-radius: 28px; background: #FFFFFF; }
.fv-album-ajuste-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fv-album-ajuste-cabeza h2 { line-height: 1; }
.fv-album-ajuste .fv-formulario { gap: 16px; }

.fv-album-banner-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

.fv-album-banner-muestra {
    position: relative;
    flex: none;
    width: 96px;
    height: 56px;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--fv-oscuro);
    background-position: center;
    background-size: cover;
}

.fv-album-banner-muestra .fv-progreso-imagen { right: 8px; bottom: 8px; left: 8px; height: 5px; }
.fv-caducidad-resultado.caducado { color: var(--fv-aviso); }

.fv-album-invitados { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fv-album-invitado { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; }
.fv-album-invitado + .fv-album-invitado { border-top: 1px solid var(--fv-gris); }
.fv-album-invitado.desactivada > .fv-avatar, .fv-album-invitado.desactivada .fv-album-invitado-datos { opacity: 0.55; }
.fv-album-invitado-datos { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.fv-album-invitado-linea { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fv-album-invitado-nombre { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; color: var(--fv-texto); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.fv-album-invitado-nombre:hover { color: var(--fv-granate); text-decoration: underline; }
.fv-album-invitado-detalle { overflow: hidden; font-size: 13px; color: var(--fv-secundario); text-overflow: ellipsis; white-space: nowrap; }
.fv-album-invitado .fv-pastilla { flex: none; padding: 3px 9px; font-size: 11px; letter-spacing: 0.02em; }
.fv-album-invitado .fv-boton { flex: none; }
.fv-album-invitados-vacio { padding: 6px 0; font-size: 14px; color: var(--fv-secundario); }

.fv-album-qr { display: flex; flex-direction: column; gap: 12px; }
.fv-album-qr[hidden] { display: none; }
.fv-album-qr-imagen { display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 24px; background: var(--fv-crema); }
.fv-album-qr-imagen img { display: block; width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; border-radius: 14px; background: #FFFFFF; }
.fv-album-qr-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-album-qr-botones > .fv-boton, .fv-album-qr-botones > .dropdown { flex: 1 1 130px; }
.fv-album-qr-botones > .fv-boton { justify-content: center; }
/* Hito 12: "Cambiar enlace", con el acceso activo o desactivado (con su nota) */
.fv-album-cambiar-enlace { display: flex; flex-direction: column; gap: 8px; }
.fv-album-cambiar-enlace[hidden] { display: none; }
.fv-album-cambiar-enlace .fv-enlace { gap: 8px; }
.fv-album-editor-acciones { display: flex; flex-direction: column; gap: 10px; }

/* "Likes recibidos" (y los de un archivo) */
.fv-likes-album-lista { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fv-likes-album-fila { display: flex; align-items: flex-start; gap: 12px; }

.fv-likes-album-imagen {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--fv-crema);
    color: var(--fv-secundario);
}

.fv-likes-album-imagen > .fv-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-likes-album-datos { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; }
.fv-likes-album-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fv-likes-album-nombre { min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.fv-likes-album-numero { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--fv-lima); font-size: 14px; font-weight: 600; }
.fv-likes-album-personas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fv-likes-album-persona { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--fv-crema); font-size: 13px; }
.fv-likes-album-persona.quitado { color: var(--fv-secundario); }

/* ---------------------------------------------------------------- Álbum de un invitado (#/album/{id}; boceto Cliente-album) */

.fv-album { display: flex; flex-direction: column; gap: 24px; }
.fv-album[hidden] { display: none; }

/* "Ver como invitado" (equipo) */
.fv-album-franja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 8px 8px 8px 20px;
    border-radius: 999px;
    background: var(--fv-texto);
    color: #FFFFFF;
}

.fv-album-franja[hidden] { display: none; }
.fv-album-franja-texto { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.fv-album-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fv-album-barra[hidden] { display: none; }

/* La rejilla irregular (componentes/albumes.js): columnas, cada pieza en la más corta */
.fv-rejilla-album { display: flex; align-items: flex-start; gap: 14px; }
.fv-rejilla-album-columna { display: flex; flex: 1 1 0; flex-direction: column; gap: 14px; min-width: 0; }

.fv-foto-album { position: relative; margin: 0; overflow: hidden; border-radius: var(--fv-radio-mosaico); background: var(--fv-crema); }
.fv-foto-album.esperando { background: linear-gradient(100deg, var(--fv-crema) 30%, #F8F5EE 50%, var(--fv-crema) 70%); background-size: 300% 100%; animation: fv-brillo 1.6s ease-in-out infinite; }
.fv-foto-album-ver { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.fv-foto-album-ver:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--fv-granate); border-radius: inherit; }
.fv-foto-album-ver > .fv-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-foto-album-icono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--fv-secundario); }
.fv-foto-album.esperando .fv-foto-album-icono { display: none; }
.fv-foto-album .fv-reproducir { width: 60px; height: 60px; margin: -30px 0 0 -30px; font-size: 18px; }
.fv-foto-album .fv-duracion { top: 12px; right: 12px; bottom: auto; }

.fv-foto-album-like {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--fv-texto);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fv-foto-album-like.activo { background: var(--fv-granate); color: #FFFFFF; }
.fv-foto-album-like:disabled { cursor: progress; }

.fv-foto-album-descargar {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--fv-texto);
    font-size: 16px;
    cursor: pointer;
}

.fv-foto-album-like:focus-visible, .fv-foto-album-descargar:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-foto-album-descargar:hover { background: #FFFFFF; }

/* El corazón del visor (componentes/visor.js) */
.fv-visor-like { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.fv-visor-like:hover { background: rgba(255, 255, 255, 0.08); }
.fv-visor-like[aria-pressed="true"] { background: var(--fv-granate); }

/* ---------------------------------------------------------------- Página pública (#/a/{token}; boceto Album-publico) */

.fv-album-publico { min-height: 100vh; }
.fv-album-publico > .fv-destinatario-cargando { margin: 120px auto; }
.fv-album-publico-empresa { font-size: 14px; color: var(--fv-secundario); }
.fv-album-publico-zona { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 1320px; margin: 0 auto; padding: 4px 28px 40px; }
.fv-album-publico-zona[hidden] { display: none; }
.fv-album-publico-ayuda { margin: 2px 0 0; font-size: 14px; color: var(--fv-secundario); text-align: center; }
.fv-album-publico-pie { display: flex; justify-content: center; margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--fv-gris); }
.fv-album-publico-pie p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--fv-secundario); text-align: center; }
.fv-album-publico-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fv-granate); }
.fv-album-publico > .fv-destinatario-zona { justify-content: center; min-height: 60vh; }
.fv-album-publico .fv-destinatario-estado { margin: 0 auto; }

/* ---------------------------------------------------------------- "Tus espacios", destacados, ficha y bienvenida */

a.fv-tarjeta-espacio, a.fv-destacado { color: var(--fv-texto); text-decoration: none; }
a.fv-tarjeta-espacio:hover, a.fv-destacado:hover { color: var(--fv-texto); }
.fv-espacio-imagen.fv-album-imagen-banner { transition: transform 0.15s ease; }

.fv-rejilla-albumes-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.fv-album-ficha { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fv-album-ficha-enlace { display: flex; flex-direction: column; gap: 4px; color: var(--fv-texto); text-decoration: none; }
.fv-album-ficha-enlace:hover { color: var(--fv-texto); }
.fv-album-ficha-enlace:focus-visible { outline: none; border-radius: 18px; box-shadow: var(--fv-anillo-foco); }
.fv-album-ficha-imagen { height: 120px; margin-bottom: 4px; border-radius: 18px; transition: transform 0.15s ease; }
.fv-album-ficha-imagen.fv-mosaico { gap: 3px; }
.fv-album-ficha-enlace:hover .fv-album-ficha-imagen { transform: translateY(-2px); }
.fv-album-ficha.caducado .fv-album-imagen > :not(.fv-album-ficha-estado) { opacity: 0.4; }
.fv-album-ficha-estado { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 10px; font-size: 12px; }
.fv-album-ficha-titulo { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.fv-album-ficha-contenedor { font-size: 13px; color: var(--fv-secundario); overflow-wrap: anywhere; }

/* Bienvenida de un invitado a un álbum (#/invitacion): su banner con «Álbum · [Empresa]» y su título */
.fv-invitacion-banner.fv-invitacion-album { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; min-height: 240px; }
.fv-invitacion-album-titulo { position: relative; margin: 0; font-family: var(--fv-fuente-titulos); font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; color: #FFFFFF; overflow-wrap: anywhere; }
.fv-invitacion-album.con-banner .fv-invitacion-album-titulo { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3); }

/* ---------------------------------------------------------------- Móvil */

@media (max-width: 767.98px) {
    .fv-album-hero { min-height: 300px; padding: 64px 20px 32px; border-radius: var(--fv-radio-hero); }
    .fv-album-editor .fv-album-hero { padding-top: 72px; }
    .fv-album-hero-texto { font-size: 16px; }
    .fv-album-editor-columnas { gap: 28px; }
    .fv-album-editor-fotos-botones { width: 100%; }
    .fv-album-editor-fotos-botones > .fv-boton, .fv-album-editor-fotos-botones > .dropdown { flex: 1 1 auto; }
    .fv-album-editor-fotos-botones > .dropdown > .fv-boton, .fv-album-editor-fotos-botones > .fv-boton { width: 100%; justify-content: center; }
    .fv-rejilla-editor-album { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
    .fv-album-ajuste { padding: 20px 18px; border-radius: var(--fv-radio-hero); }
    .fv-album-franja { border-radius: 24px; }
    .fv-rejilla-album, .fv-rejilla-album-columna { gap: 10px; }
    .fv-foto-album .fv-reproducir { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 15px; }
    .fv-album-publico-zona { padding: 4px 16px 28px; }
    .fv-tarjeta-album-imagen { height: 260px; }
}

@media (max-width: 575.98px) {
    .fv-album-editor-arriba > .fv-boton { min-height: 44px; padding: 0 20px; }
    .fv-album-publico-empresa { display: none; }   /* el pie ya dice «Compartido por Estratagema» */
    .fv-pieza-editor-quitar, .fv-pieza-editor-mover { top: 6px; width: 36px; height: 36px; }
    .fv-pieza-editor-quitar { right: 6px; }
    .fv-pieza-editor-mover { left: 6px; }
    .fv-pieza-editor-likes { bottom: 6px; left: 6px; min-height: 30px; padding: 0 10px; font-size: 13px; }
    .fv-foto-album-like { bottom: 8px; left: 8px; min-height: 44px; padding: 0 12px; }            /* hito 12: 44 px para el dedo */
    .fv-foto-album-descargar { right: 8px; bottom: 8px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .fv-pieza-editor.esperando, .fv-foto-album.esperando { animation: none; }
}

/* ================================================================ Textos largos (hito 12) */

/* Nombres, emails y títulos largos, con puntos suspensivos sin romper nada (el texto entero, al pasar el ratón: title) */
.fv-hero .fv-titulo-hero, .fv-ficha-texto .fv-titulo-hero { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.fv-migas .fv-migas-tramo { display: block; max-width: 100%; overflow: hidden; line-height: 36px; text-overflow: ellipsis; white-space: nowrap; }
.fv-ficha-texto, .fv-ficha-dato { max-width: 100%; }
.fv-ficha-dato[data-email] { display: block; overflow: hidden; line-height: 40px; text-overflow: ellipsis; white-space: nowrap; }
.fv-tarjeta-acceso-nombre a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fv-tarjeta-acceso-nombre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-selector-pildora { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ Zonas táctiles (hito 12) */

/* En el móvil y con el dedo, 44 px como mínimo. Donde lo que se ve es más pequeño (el círculo de marca, los botones de las
   piezas del editor, las migas, los enlaces dentro de un texto), un ::after transparente agranda la zona que se pulsa sin mover
   nada; el interruptor, con un borde transparente arriba y abajo; lo demás, a 44 px */
@media (max-width: 767.98px), (pointer: coarse) {
    .fv-check::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
    .fv-pieza-editor-quitar::after, .fv-pieza-editor-mover::after { content: ''; position: absolute; inset: -4px; }
    .fv-pieza-editor-likes::after { content: ''; position: absolute; inset: -7px 0; }
    .fv-migas :is(a, span) { min-height: 44px; }
    .fv-migas .fv-migas-tramo { line-height: 44px; }
    #vista a:not([class]) { position: relative; }
    #vista a:not([class])::after { content: ''; position: absolute; inset: -14px 0; }
    .fv-album-invitado-nombre, .fv-tarjeta-acceso-nombre a { padding-block: 11px; margin-block: -11px; }
    .fv-casilla .form-check-label { padding-block: 11px; margin-block: -11px; }   /* la casilla de la privacidad, con su etiqueta */
    .fv-boton-menu { width: 44px; height: 44px; }
    .fv-nav a { min-height: 44px; }
    .fv-lista-envio-casilla { width: 44px; height: 44px; margin: 0 -10px; }
    .fv-segmentos label > span { min-height: 44px; }
    .fv-color-hex { min-height: 44px; }
    .fv-emails input { min-height: 44px; }
    .fv-interruptor { height: 44px; margin: 0; border: 8px solid transparent; border-right-width: 0; border-left-width: 0; background-clip: padding-box; }
}

/* ================================================================ Franjas de aviso (hito 12; nucleo/franjas.js) */

/* Arriba de todo y pegadas al desplazarse: la versión nueva (en oscuro) y la falta de conexión (en naranja) */
.fv-franjas { position: sticky; top: 0; z-index: 1035; }
.fv-franjas:empty { display: none; }
.fv-franja { padding: 8px 28px; font-size: 14px; line-height: 1.4; }
.fv-franja-contenido { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: 1280px; margin: 0 auto; }
.fv-franja-contenido > i { flex: none; font-size: 15px; }
.fv-franja-contenido > p { flex: 1 1 220px; min-width: 0; font-weight: 500; }
.fv-franja-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-franja-botones:empty { display: none; }
.fv-franja-version { background: var(--fv-texto); color: #FFFFFF; }
.fv-franja-sin-conexion { background: var(--fv-aviso-fondo); color: var(--fv-aviso); }
.fv-boton-franja { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.fv-boton-franja:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

@media (max-width: 767.98px) {
    .fv-franja { padding: 8px 16px; font-size: 13px; }
}

/* ================================================================ SweetAlert2 (customClass en nucleo/utiles.js) */

.fv-swal.swal2-popup {
    padding: 28px 24px 24px;
    border-radius: var(--fv-radio-hero);
    color: var(--fv-texto);
    font-family: var(--fv-fuente-texto);
}

.fv-swal .swal2-title {
    padding-top: 0.4em;
    color: var(--fv-texto);
    font-family: var(--fv-fuente-titulos);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.fv-swal .swal2-html-container { color: var(--fv-secundario); font-size: 16px; line-height: 1.5; }
.fv-swal .swal2-actions { gap: 10px; margin-top: 24px; }
.fv-swal .swal2-actions .fv-boton { min-width: 128px; }
.fv-swal .swal2-icon.swal2-question { border-color: var(--fv-rosa-medio); color: var(--fv-granate); }

/* ================================================================ Presentación de un álbum (componentes/presentacion.js, 18/10/2026) */

body.con-presentacion { overflow: hidden; }
body.con-presentacion .fv-aviso-cookies { display: none; }

.fv-presentacion {
    --fv-presentacion-duracion: 6.2s;
    --fv-presentacion-segundos: 5s;
    position: fixed;
    inset: 0;
    z-index: 1060;
    overflow: hidden;
    background: #111111;
    color: #FFFFFF;
    touch-action: none;
    outline: none;
}

.fv-presentacion.sin-controles { cursor: none; }

.fv-presentacion-escena, .fv-presentacion-diapo { position: absolute; inset: 0; }
.fv-presentacion-diapo { opacity: 0; transition: opacity 1.2s ease; }
.fv-presentacion-diapo.visible { opacity: 1; }
.fv-presentacion-diapo.sin-fundido { transition: none; }

/* Detrás, la misma foto desenfocada llenando la pantalla; delante, la foto entera */
.fv-presentacion-fondo { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(36px) brightness(0.45) saturate(1.2); }
.fv-presentacion-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 24px;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    animation: var(--fv-presentacion-duracion) linear both;
}

/* El movimiento: muy poco, para que se note sin marear */
.fv-movimiento-acercar { animation-name: fv-presentacion-acercar; }
.fv-movimiento-alejar { animation-name: fv-presentacion-alejar; }
.fv-movimiento-derecha { animation-name: fv-presentacion-derecha; }
.fv-movimiento-izquierda { animation-name: fv-presentacion-izquierda; }
.fv-movimiento-subir { animation-name: fv-presentacion-subir; }
.fv-presentacion.pausada .fv-presentacion-foto { animation-play-state: paused; }

@keyframes fv-presentacion-acercar { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes fv-presentacion-alejar { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes fv-presentacion-derecha { from { transform: scale(1.06) translateX(-1.6%); } to { transform: scale(1.06) translateX(1.6%); } }
@keyframes fv-presentacion-izquierda { from { transform: scale(1.06) translateX(1.6%); } to { transform: scale(1.06) translateX(-1.6%); } }
@keyframes fv-presentacion-subir { from { transform: scale(1.05) translateY(1.4%); } to { transform: scale(1.05) translateY(-1.4%); } }

/* Barra fina del tiempo de cada foto, arriba */
.fv-presentacion-progreso { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.fv-presentacion-progreso span { display: block; width: 100%; height: 100%; background: var(--fv-lima); transform: scaleX(0); transform-origin: 0 50%; }
.fv-presentacion-progreso span.corriendo { animation: fv-presentacion-progreso var(--fv-presentacion-segundos) linear forwards; }
.fv-presentacion.pausada .fv-presentacion-progreso span { animation-play-state: paused; }
@keyframes fv-presentacion-progreso { to { transform: scaleX(1); } }

.fv-presentacion-cerrar, .fv-presentacion-controles { transition: opacity 0.3s; }
.fv-presentacion.sin-controles .fv-presentacion-cerrar,
.fv-presentacion.sin-controles .fv-presentacion-controles { opacity: 0; pointer-events: none; }

.fv-presentacion-cerrar {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: 16px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    font-size: 20px;
    backdrop-filter: blur(8px);
}

.fv-presentacion-controles {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.fv-presentacion-controles button {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #FFFFFF;
    font-size: 16px;
}

.fv-presentacion-controles button:hover, .fv-presentacion-cerrar:hover { background: rgba(255, 255, 255, 0.16); }
.fv-presentacion-controles button:focus-visible, .fv-presentacion-cerrar:focus-visible { outline: 2px solid var(--fv-lima); outline-offset: 2px; }
.fv-presentacion-controles .fv-presentacion-principal { width: 52px; height: 52px; background: var(--fv-granate); font-size: 18px; }
.fv-presentacion-controles .fv-presentacion-principal:hover { background: var(--fv-granate-hover); }
.fv-presentacion-posicion { padding: 0 10px; font-size: 14px; font-variant-numeric: tabular-nums; opacity: 0.85; }
.fv-presentacion-segundos { font-size: 14px !important; font-weight: 600; }

@media (max-width: 575.98px) {
    .fv-presentacion-foto { padding: 0; }
    .fv-presentacion-posicion { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fv-presentacion-foto { animation: none; }
    .fv-presentacion-diapo { transition-duration: 0.4s; }
}

/* ================================================================ Utilidades (al final: mandan sobre los componentes) */

/* Fondos de la paleta: tonos de espera de miniaturas, mosaicos y banners por defecto */
.fv-fondo-crema { background-color: var(--fv-crema); }
.fv-fondo-rosa-medio { background-color: var(--fv-rosa-medio); }
.fv-fondo-arena { background-color: var(--fv-arena); }
.fv-fondo-arena-oscura { background-color: var(--fv-arena-oscura); }
.fv-fondo-dorado { background-color: var(--fv-dorado); }
.fv-fondo-piedra { background-color: var(--fv-piedra); }
.fv-fondo-cielo { background-color: var(--fv-cielo); }
.fv-fondo-verde-claro { background-color: var(--fv-verde-claro); }
.fv-fondo-azul-claro { background-color: var(--fv-azul-claro); }
.fv-fondo-oscuro { background-color: var(--fv-oscuro); }

/* ================================================================ Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    a.fv-tarjeta:hover, button.fv-tarjeta:hover, .fv-carpeta:hover .fv-mosaico, .fv-tarjeta-contenedor:hover .fv-tarjeta-contenedor-imagen { transform: none; }
}

/* ================================================================ Archivos compartidos sueltos (19/10/2026; sql/018)
   La página de un archivo (#/archivo/{id}, vistas/archivo.js), su tarjeta en el inicio del cliente (espacios.js), la ventana
   «Compartir archivo» (compartir-archivo.js) y su sección en la ficha de una persona (usuario.js) */

.fv-volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 600; color: var(--fv-secundario); text-decoration: none; }
.fv-volver:hover { color: var(--fv-texto); }

.fv-archivo-pagina { max-width: 1080px; margin: 0 auto; }
.fv-archivo-pagina-tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 24px;
    border-radius: var(--fv-radio-tarjeta);
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--fv-gris);
}

.fv-archivo-pagina-vista {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 62vh;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--fv-radio-hero);
    background: var(--fv-crema);
    cursor: zoom-in;
}

.fv-archivo-pagina-vista > img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }
.fv-archivo-pagina-vista:focus-visible { outline: none; box-shadow: var(--fv-anillo-foco); }
.fv-archivo-pagina-ext { font-family: var(--fv-fuente-titulos); font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: #CBC5B5; }
.fv-archivo-pagina-play {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--fv-texto);
    font-size: 22px;
}

.fv-archivo-pagina-texto { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fv-archivo-pagina-antetitulo { margin: 0; font-size: 14px; font-weight: 600; color: var(--fv-granate); }
.fv-archivo-pagina-nombre { margin: 0; font-family: var(--fv-fuente-titulos); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.fv-archivo-pagina-meta { margin: 0; color: var(--fv-secundario); }

.fv-archivo-pagina-enviar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--fv-crema);
    color: var(--fv-texto);
    text-decoration: none;
}

.fv-archivo-pagina-enviar:hover { background: var(--fv-arena); color: var(--fv-texto); }
.fv-archivo-pagina-enviar > span:last-child { display: flex; flex-direction: column; font-size: 14px; color: var(--fv-secundario); }
.fv-archivo-pagina-enviar strong { font-size: 15px; color: var(--fv-texto); }
.fv-archivo-pagina-enviar .fv-tarjeta-enviar-agencia-mas { flex: none; width: 44px; height: 44px; font-size: 16px; }

@media (max-width: 767.98px) {
    .fv-archivo-pagina-tarjeta { grid-template-columns: 1fr; gap: 20px; padding: 14px; }
    .fv-archivo-pagina-vista { min-height: 220px; }
    .fv-archivo-pagina-nombre { font-size: 26px; }
}

/* Tarjeta del inicio: la miniatura entera o la extensión en grande */
.fv-espacio-archivo { display: flex; align-items: center; justify-content: center; background: var(--fv-crema); }
.fv-espacio-archivo > .fv-miniatura { width: 100%; height: 100%; object-fit: cover; }
.fv-espacio-archivo-ext { font-family: var(--fv-fuente-titulos); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; color: #CBC5B5; }
.fv-espacio-etiquetas .fv-pastilla i { margin-right: 6px; }

/* Ventana «Compartir archivo» */
.fv-compartir .fv-nota-rosa i { margin-right: 4px; color: var(--fv-granate); }
.fv-lista-compartido { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fv-lista-compartido > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--fv-crema); }
.fv-lista-compartido-texto { display: flex; flex-direction: column; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.fv-lista-compartido-texto .fv-texto-secundario { font-size: 13px; }
.fv-compartir-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Ficha de una persona: sus archivos compartidos */
.fv-lista-compartidos-ficha { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fv-compartido-ficha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--fv-gris); }
.fv-compartido-ficha.no-vigente { opacity: 0.6; }
.fv-compartido-ficha-enlace { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--fv-texto); text-decoration: none; }
.fv-compartido-ficha-texto { display: flex; flex-direction: column; min-width: 0; }
.fv-compartido-ficha-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-compartido-ficha-texto span { font-size: 13px; color: var(--fv-secundario); overflow-wrap: anywhere; }

/* «Abrir su ficha» junto a un email no enviado (19/10/2026; ventanas.js, pintarRechazados) */
.fv-enlace-ficha { display: inline-block; margin-left: 8px; font-weight: 600; color: var(--fv-granate); }

/* Enlace público de un archivo en la ventana «Compartir» (19/10/2026; compartir-archivo.js) */
.fv-enlace-publico { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--fv-crema); }
.fv-enlace-publico .fv-etiqueta i { margin-right: 4px; color: var(--fv-granate); }
.fv-enlace-publico .fv-texto-secundario { font-size: 13px; }
.fv-enlace-publico-fila { display: flex; gap: 8px; min-width: 0; }
.fv-enlace-publico-fila .fv-campo { flex: 1 1 auto; min-width: 0; background: #FFFFFF; font-size: 13px; }
.fv-enlace-publico-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-enlace-publico-acciones:not(:has(:not([hidden]))) { display: none; }

/* La página pública de un archivo (#/p/{token}; archivo-publico.js): más ancha que las de entrar, para ver bien el archivo */
.fv-pagina-archivo-publico .fv-publica-contenido { max-width: 1080px; }
.fv-pagina-archivo-publico .fv-archivo-pagina-nombre { overflow-wrap: break-word; }