/* ============================================================
   FORMULARIO CSS v2.0 — Nuevos campos ATS + Indicador de progreso
   ============================================================ */

/* ── Estilos base de paneles (móvil/tablet) — ver bloque WORKSPACE más abajo ── */
/* #cv-workspace, #cv-form-panel, #cv-preview-panel se definen en el bloque
   WORKSPACE SPLIT-SCREEN (~línea 900+) para mantener una única fuente de verdad. */

/* ============================================================
   SELECTOR DE IDIOMA EN CV — lang-switcher--cv
   Variante compacta para el header del editor de CV.
   Reutiliza las clases .lang-btn y .lang-btn--active de portal.css
   ============================================================ */
.lang-switcher--cv {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(94, 129, 172, 0.2);
    border-radius: 20px;
    padding: 2px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-left: auto;
    flex-shrink: 0;
}

/* Botones dentro del selector del CV — ligeramente más pequeños */
.lang-switcher--cv .lang-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.9rem;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: unset !important;
    color: inherit !important;
}

.lang-switcher--cv .lang-btn:hover {
    background: rgba(94, 129, 172, 0.18);
    transform: scale(1.1);
}

.lang-switcher--cv .lang-btn:active {
    transform: scale(0.95);
}

.lang-switcher--cv .lang-btn--active {
    background: rgba(94, 129, 172, 0.22) !important;
    border-color: rgba(94, 129, 172, 0.65) !important;
    box-shadow: 0 0 6px rgba(94, 129, 172, 0.28);
}

/* Ajuste del app-header para acomodar el selector */
.app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.app-header h1 {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En móvil muy pequeño: ocultar el selector del CV (el del portal es suficiente) */
@media (max-width: 360px) {
    .lang-switcher--cv {
        display: none;
    }
}

/* ── Cabecera del panel derecho ── */
.cv-preview-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(94, 129, 172, 0.15);
    flex-shrink: 0;
}

.cv-preview-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(122, 163, 212, 0.7);
    font-family: 'Inter', system-ui, sans-serif;
}

.cv-preview-panel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4a6fa5;
    flex-shrink: 0;
    /* Pulso suave para indicar "en vivo" */
    animation: panelDotPulse 2.5s ease-in-out infinite;
}

@keyframes panelDotPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.3); }
}

.cv-preview-panel-badge {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(74, 111, 165, 0.8);
    background: rgba(74, 111, 165, 0.1);
    border: 1px solid rgba(74, 111, 165, 0.25);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ── Estado vacío del panel derecho ── */
.cv-preview-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    line-height: 1;
}

.cv-preview-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(122, 163, 212, 0.5);
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0;
}

.cv-preview-empty-hint {
    font-size: 0.82rem;
    color: rgba(122, 163, 212, 0.35);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

.cv-preview-empty-hint strong {
    color: rgba(122, 163, 212, 0.55);
}

/* Líneas decorativas que simulan texto de CV */
.cv-preview-empty-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 200px;
    margin-top: 8px;
}

.cv-preview-empty-lines span {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: rgba(74, 111, 165, 0.08);
    animation: shimmer 2s ease-in-out infinite;
}

.cv-preview-empty-lines span:nth-child(1) { width: 80%; animation-delay: 0s; }
.cv-preview-empty-lines span:nth-child(2) { width: 65%; animation-delay: 0.15s; }
.cv-preview-empty-lines span:nth-child(3) { width: 90%; animation-delay: 0.3s; }
.cv-preview-empty-lines span:nth-child(4) { width: 55%; animation-delay: 0.45s; }
.cv-preview-empty-lines span:nth-child(5) { width: 75%; animation-delay: 0.6s; }
.cv-preview-empty-lines span:nth-child(6) { width: 60%; animation-delay: 0.75s; }

@keyframes shimmer {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.8; }
}

/* BLOQUE ELIMINADO: definiciones duplicadas de workspace/paneles
   con display:grid y position:sticky — reemplazadas por el bloque
   definitivo con display:flex + position:fixed (líneas ~1126+).
   Mantener solo una fuente de verdad evita conflictos de cascada. */

/* ============================================================
   CABECERA DEL PANEL DE VISTA PREVIA (desktop)
   ============================================================ */
.cv-preview-panel-header {
    display: none;
}

@media (min-width: 1200px) {
    .cv-preview-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px 12px;
        border-bottom: 1px solid rgba(94, 129, 172, 0.15);
        margin-bottom: 16px;
        flex-shrink: 0;
    }

    .cv-preview-panel-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(122, 163, 212, 0.65);
        font-family: 'Inter', system-ui, sans-serif;
    }

    .cv-preview-panel-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4a6fa5;
        animation: panelDotPulse 2.5s ease-in-out infinite;
        flex-shrink: 0;
    }

    @keyframes panelDotPulse {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50%       { opacity: 1;   transform: scale(1.3); }
    }

    .cv-preview-panel-badge {
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        color: rgba(74, 111, 165, 0.8);
        background: rgba(74, 111, 165, 0.1);
        border: 1px solid rgba(74, 111, 165, 0.25);
        padding: 2px 8px;
        border-radius: 6px;
        font-family: 'Inter', system-ui, sans-serif;
    }
}

/* ============================================================
   ESTADO VACÍO DEL PANEL DERECHO
   ============================================================ */
#cv-preview-empty-state {
    display: none;
}

@media (min-width: 1200px) {
    #cv-preview-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 80px 24px;
        text-align: center;
        flex: 1;
    }

    #cv-preview-empty-state.hidden {
        display: none;
    }

    .cv-preview-empty-icon {
        font-size: 3.5rem;
        opacity: 0.25;
        filter: grayscale(0.5);
    }

    .cv-preview-empty-title {
        font-size: 1rem;
        font-weight: 600;
        color: rgba(122, 163, 212, 0.5);
        font-family: 'Inter', system-ui, sans-serif;
        margin: 0;
    }

    .cv-preview-empty-hint {
        font-size: 0.82rem;
        color: rgba(122, 163, 212, 0.35);
        font-family: 'Inter', system-ui, sans-serif;
        line-height: 1.7;
        margin: 0;
    }

    /* Líneas decorativas que simulan texto de CV */
    .cv-preview-empty-lines {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 180px;
        margin-top: 8px;
    }

    .cv-preview-empty-lines span {
        display: block;
        height: 8px;
        border-radius: 4px;
        background: rgba(94, 129, 172, 0.1);
        animation: shimmer 2s ease-in-out infinite;
    }

    .cv-preview-empty-lines span:nth-child(1) { width: 100%; animation-delay: 0s; }
    .cv-preview-empty-lines span:nth-child(2) { width: 80%;  animation-delay: 0.15s; }
    .cv-preview-empty-lines span:nth-child(3) { width: 90%;  animation-delay: 0.3s; }
    .cv-preview-empty-lines span:nth-child(4) { width: 70%;  animation-delay: 0.45s; }
    .cv-preview-empty-lines span:nth-child(5) { width: 85%;  animation-delay: 0.6s; }
    .cv-preview-empty-lines span:nth-child(6) { width: 60%;  animation-delay: 0.75s; }

    @keyframes shimmer {
        0%, 100% { opacity: 0.4; }
        50%       { opacity: 0.8; }
    }
}

/* ============================================================
   APP CONTAINER (FORMULARIO)
   ============================================================ */
#app-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.app-header h1 {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    flex: 1;
    text-align: center;
    margin: 0;
}

.btn-back {
    background: transparent;
    border: 1px solid rgba(94, 129, 172, 0.4);
    color: var(--accent-bright);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    width: auto;
    white-space: nowrap;
}

.btn-back:hover {
    background: rgba(94, 129, 172, 0.15);
    border-color: var(--accent-bright);
    transform: none;
}

/* ============================================================
   FORMULARIO
   ============================================================ */
#cv-form, .cv-diseño {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* INPUTS */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444;
    border-radius: 8px;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.95rem;
}

input:focus, textarea:focus {
    background-color: #333;
    border-color: #5e81ac;
    outline: none;
}

h3 { color: var(--accent); }
hr { border: 0; border-top: 1px solid var(--border-main); margin: 20px 0; }

button {
    background-color: #4a6fa5;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    width: 100%;
    font-family: inherit;
}

button:hover:not(:disabled) { background-color: #5d8bc9; transform: translateY(-2px); }
button:disabled { cursor: not-allowed !important; background-color: #a0a0a0 !important; }

#btnDatosFicticios {
    background-color: transparent;
    border: 1px solid #4a6fa5;
    color: #a0a0a0;
    margin-top: 10px;
    font-size: 0.85rem;
}

#btnLimpiar {
    background-color: transparent;
    border: 1px solid #d9534f;
    color: #a0a0a0;
    margin-top: 10px;
    font-size: 0.85rem;
}

#btnLimpiar:hover {
    background-color: rgba(217, 83, 79, 0.1);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Estado "Generando..." del botón Vista Previa */
#btnVistaPrevia.btn-generando {
    background: linear-gradient(135deg, #3a5a8a, #4a6fa5);
    opacity: 0.85;
    letter-spacing: 0.04em;
    animation: pulseGenerando 0.9s ease-in-out infinite;
}

@keyframes pulseGenerando {
    0%, 100% { opacity: 0.75; }
    50%       { opacity: 1; }
}

/* ============================================================
   SWITCH
   ============================================================ */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #444; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #5b7da8; }
input:checked + .slider:before { transform: translateX(20px); }

/* ============================================================
   TOGGLE MONOGRAMA — fila compacta + tooltip CSS puro
   (antes: sin CSS propio → heredaba el estilo del <button>
   genérico de arriba: width:100% + fondo azul sólido, por eso
   se veía como un bloque azul gigante con el "?" enorme).
   ============================================================ */
.form-field-wrap--toggle {
    margin-bottom: 14px;
}

.rv-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(94, 129, 172, 0.18);
    border-radius: 10px;
    padding: 10px 14px;
    transition: border-color 0.2s, background 0.2s;
}

.rv-toggle-row:hover {
    border-color: rgba(94, 129, 172, 0.32);
    background: rgba(255, 255, 255, 0.045);
}

.rv-toggle-label-group {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.rv-toggle-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #d0dff0;
    white-space: nowrap;
}

/* Botón de ayuda "?" — círculo pequeño. Se anula explícitamente
   TODO lo heredado del <button> genérico (width, padding, fondo,
   transform en hover) para que no vuelva a "explotar" visualmente. */
.rv-toggle-help {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(122, 163, 212, 0.4) !important;
    color: #7aa3d4 !important;
    font-size: 0.62rem !important;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.rv-toggle-help:hover,
.rv-toggle-help:focus-visible {
    background: rgba(94, 129, 172, 0.25) !important;
    border-color: #7aa3d4 !important;
    color: #d0dff0 !important;
    transform: none !important;
}

/* Tooltip CSS puro: reutiliza el aria-label ya traducido por
   RvI18n.applyAriaLabels() en los 3 idiomas — sin JS adicional
   y sin el atributo muerto "data-i18n-title-key" que existía
   antes (ninguna función del motor i18n lo procesaba). */
.rv-toggle-help::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1e2535;
    color: #e0e0e0;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    width: 200px;
    max-width: 60vw;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(94, 129, 172, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 40;
}

.rv-toggle-help::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #1e2535;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 40;
}

.rv-toggle-help:hover::after,
.rv-toggle-help:hover::before,
.rv-toggle-help:focus-visible::after,
.rv-toggle-help:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* En pantallas muy angostas, el tooltip se ancla a la derecha
   del icono para no salirse del viewport por la izquierda. */
@media (max-width: 420px) {
    .rv-toggle-help::after {
        left: auto;
        right: -6px;
        transform: translateY(4px);
    }
    .rv-toggle-help::before {
        left: auto;
        right: 4px;
        transform: translateY(4px);
    }
    .rv-toggle-help:hover::after,
    .rv-toggle-help:hover::before,
    .rv-toggle-help:focus-visible::after,
    .rv-toggle-help:focus-visible::before {
        transform: translateY(0);
    }
}

.rv-toggle-switch {
    margin: 0;
    flex-shrink: 0;
}

/* ============================================================
   CAMPOS DINÁMICOS
   ============================================================ */

#extraFields {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #444;
}

.opciones-extra-trigger {
    display: block;
    text-align: center;
    color: #5e81ac;
    cursor: pointer;
    margin: 20px 0;
    font-weight: 500;
}

.extra-settings-container {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #a0a0a0;
    font-size: 0.9rem;
}

/* ============================================================
   SECCIONES MODULARES (EXPERIENCIA / EDUCACIÓN)
   ============================================================ */
.modular-section {
    width: 100%;
    margin-bottom: 8px;
}

.modular-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.modular-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5e81ac;
}

/* Botón premium "+ Añadir" */
.btn-add-item {
    width: 100%;
    background: transparent;
    border: 1px dashed #4a6fa5;
    color: #7aa3d4;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
    margin-bottom: 0;
    letter-spacing: 0.02em;
}

.btn-add-item:hover:not(:disabled) {
    background: rgba(74, 111, 165, 0.12);
    border-color: #7aa3d4;
    color: #a8c8f0;
    box-shadow: 0 0 12px rgba(74, 111, 165, 0.2);
    transform: none;
}

.btn-add-icon {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
}

/* ── SUBFORMULARIO COLAPSABLE ── */
.subform-card {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                margin-top 0.3s ease;
    margin-top: 0;
}

.subform-card.open {
    max-height: 700px;
    opacity: 1;
    margin-top: 12px;
}

.subform-inner {
    background: #1e2535;
    border: 1px solid #3a4a6a;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subform-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.subform-row-years {
    align-items: center;
}

.subform-input {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    box-sizing: border-box;
}

.subform-input-year {
    flex: 0 0 100px;
    min-width: 80px;
}

.subform-actual-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a0a0a0;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.subform-actual-label input[type="checkbox"] {
    width: auto !important;
    min-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #5e81ac;
    cursor: pointer;
}

.subform-desc-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

.subform-textarea {
    width: 100% !important;
    min-height: 90px;
    max-height: 200px;
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.desc-counter {
    font-size: 0.72rem;
    color: #666;
    text-align: right;
    margin-top: 4px;
    transition: color 0.2s;
    align-self: flex-end;
}

.desc-counter.warn {
    color: #e0a040;
}

.desc-counter.limit {
    color: #e05050;
    font-weight: 700;
}

.subform-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-subform-save {
    flex: 1;
    background: linear-gradient(135deg, #4a6fa5, #5e81ac);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    width: auto;
    letter-spacing: 0.03em;
}

.btn-subform-save:hover:not(:disabled) {
    background: linear-gradient(135deg, #5d8bc9, #7aa3d4);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(74, 111, 165, 0.35);
}

.btn-subform-cancel {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid #555;
    color: #888;
    padding: 10px 16px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    width: auto;
}

.btn-subform-cancel:hover:not(:disabled) {
    border-color: #888;
    color: #ccc;
    background: rgba(255,255,255,0.04);
    transform: none;
}

/* ── TARJETAS RESUMEN DE ÍTEMS ── */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.item-card {
    background: #1e2535;
    border: 1px solid #3a4a6a;
    border-left: 3px solid #4a6fa5;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    animation: fadeInUp 0.25s ease forwards;
}

.item-card-info {
    flex: 1;
    min-width: 0;
}

.item-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #d0dff0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card-subtitle {
    font-size: 0.8rem;
    color: #7aa3d4;
    font-style: italic;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card-dates {
    font-size: 0.75rem;
    color: #666;
    margin-top: 3px;
}

.item-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.btn-item-edit,
.btn-item-delete {
    width: auto !important;
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border: 1px solid transparent;
    line-height: 1.4;
}

.btn-item-edit {
    background: rgba(74, 111, 165, 0.15);
    border-color: #4a6fa5;
    color: #7aa3d4;
}

.btn-item-edit:hover:not(:disabled) {
    background: rgba(74, 111, 165, 0.3);
    color: #a8c8f0;
    transform: none;
}

.btn-item-delete {
    background: rgba(217, 83, 79, 0.1);
    border-color: #d9534f;
    color: #d9534f;
}

.btn-item-delete:hover:not(:disabled) {
    background: rgba(217, 83, 79, 0.25);
    color: #ff7070;
    transform: none;
}

/* ── PERFIL PROFESIONAL ── */
#seccion-perfil {
    margin-bottom: 4px;
}

#seccion-perfil textarea {
    min-height: 110px;
    height: 110px;
    max-height: 110px;
    resize: none;
    margin-bottom: 4px !important;
}

#perfil-counter {
    display: block;
    margin-bottom: 8px;
}

/* ── SISTEMA DE CHIPS ── */
.chip-section {
    margin-bottom: 16px;
}

.chip-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    min-height: 44px;
    cursor: text;
    transition: border-color 0.2s;
}

.chip-field:focus-within {
    border-color: #5e81ac;
}

.chip-container {
    display: contents;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(74, 111, 165, 0.18);
    border: 1px solid rgba(94, 129, 172, 0.5);
    color: #a8c8f0;
    padding: 4px 10px 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    animation: fadeInUp 0.2s ease forwards;
    flex-shrink: 0;
}

.chip-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove {
    background: transparent;
    border: none;
    color: rgba(168, 200, 240, 0.6);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    width: auto !important;
    min-width: unset;
    transition: color 0.15s;
    flex-shrink: 0;
}

.chip-remove:hover:not(:disabled) {
    color: #ff7070;
    background: transparent;
    transform: none;
}

.chip-input {
    flex: 1;
    min-width: 140px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 0.9rem;
    padding: 4px 6px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.chip-input::placeholder {
    color: #666;
}

.chip-hint {
    font-size: 0.72rem;
    color: #555;
    margin: 4px 0 0 2px;
}

.chip-hint kbd {
    background: #333;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.7rem;
    color: #888;
    font-family: inherit;
}

/* ── VALIDACIÓN INLINE DE CAMPOS ── */
.field-group {
    display: contents;
}

.field-group input {
    width: 100%;
}

.field-error {
    display: block;
    font-size: 0.75rem;
    color: #e05050;
    margin-top: -10px;
    margin-bottom: 10px;
    padding-left: 2px;
    min-height: 0;
    transition: opacity 0.2s;
    grid-column: span 2;
}

.field-error:empty {
    display: none;
}

input.input-error,
input.input-error:focus {
    border-color: #e05050 !important;
    box-shadow: 0 0 0 2px rgba(224, 80, 80, 0.18);
}

/* ── BOTÓN SCROLL TO TOP ── */
#btnScrollTop {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 42px !important;
    height: 42px;
    padding: 0 !important;
    background: rgba(74, 111, 165, 0.85);
    border: 1px solid rgba(122, 163, 212, 0.4);
    color: #fff;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

#btnScrollTop.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#btnScrollTop:hover:not(:disabled) {
    background: rgba(93, 139, 201, 0.95);
    transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE — FORMULARIO (tablet/desktop sin split-screen)
   ============================================================ */
@media (min-width: 768px) {
    #app-container { max-width: 800px; }
    #cv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

    .modular-section,
    #btnVistaPrevia, #btnDatosFicticios, #btnLimpiar,
    #extra-content, #extraFields, .opciones-extra-trigger, .extra-settings-container {
        grid-column: span 2;
    }

    textarea { min-height: 120px; max-height: 300px; overflow-y: auto; }

    .subform-row {
        flex-wrap: nowrap;
    }
}

/* FIX AUDITORÍA (zoom de Safari en tablet/landscape): la regla de 16px
   real solo se aplicaba hasta 767px, pero el layout móvil/tablet de esta
   app (una sola columna, sin split-screen) se mantiene hasta 1199px. Un
   iPhone en horizontal o una tablet en portrait caían en el hueco
   768-1199px, donde los inputs no llegaban a los 16px reales necesarios
   para que iOS Safari no dispare su auto-zoom al enfocar un campo (los
   demás navegadores no tienen este comportamiento, por eso "solo pasa en
   Safari"). Se amplía el rango para cubrir TODO el layout no-desktop. */
@media (max-width: 1199px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .subform-input,
    .subform-textarea,
    .chip-input {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    body { padding: 0 !important; }
    #app-container { padding: 10px !important; }
    #cv-form { padding: 20px 15px !important; border-radius: 12px; }
    button { padding: 16px !important; font-size: 1rem; }

    /* Chips más compactos en móvil */
    .chip {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .btn-add-item { padding: 14px 16px !important; }
    .btn-subform-save,
    .btn-subform-cancel { padding: 12px 14px !important; }

    .btn-item-edit,
    .btn-item-delete { padding: 6px 10px !important; font-size: 0.75rem !important; }

    .opciones-extra-trigger {
        background: #2a2a2a;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #444;
        margin: 15px 0;
    }

    .subform-input-year {
        flex: 1;
        min-width: 80px;
    }

    #btnScrollTop {
        bottom: 90px;
        right: 16px;
    }
}

/* ============================================================
   WORKSPACE SPLIT-SCREEN
   ─────────────────────────────────────────────────────────────
   Arquitectura:
   · #cv-workspace: flex row en desktop, columna en móvil/tablet.
   · #cv-form-panel: panel izquierdo — formulario con scroll propio.
   · #cv-preview-panel: panel derecho — "mesa de trabajo" A4.

   Breakpoints:
   · < 1200px: columna única. #cv-preview-panel oculto.
                La vista previa (#vistaPrevia) aparece debajo del form.
   · ≥ 1200px: dos paneles fijos. Cada uno con scroll independiente.
                #vistaPrevia (dentro del form) se oculta.
   ============================================================ */

/* ── Contenedor raíz ── */
#cv-workspace {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 10;
    /* Centrar el workspace en pantallas muy anchas */
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Panel izquierdo: formulario ── */
#cv-form-panel {
    width: 100%;
    flex-shrink: 0;
}

/* ── Panel derecho: oculto en móvil/tablet ── */
#cv-preview-panel {
    display: none;
}

/* ── Desktop ≥ 1200px: activar split-screen ── */
@media (min-width: 1200px) {

    /* Workspace: fila fija que ocupa toda la pantalla.
       NO se pone overflow aquí — cada panel hijo gestiona su propio scroll.
       overflow-x/y: hidden en un flex fixed crea scroll containers que recortan hijos. */
    #cv-workspace {
        flex-direction: row;
        align-items: stretch;
        height: 100vh;
        position: fixed;
        inset: 0;
        z-index: 5;
        /* Sin overflow — los paneles hijos tienen su propio overflow-y: auto */
    }

    /* Panel izquierdo: ancho fijo, scroll propio */
    #cv-form-panel {
        flex: 0 0 540px;
        width: 540px;
        height: 100vh;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid rgba(94, 129, 172, 0.15);
        scrollbar-width: thin;
        scrollbar-color: rgba(94, 129, 172, 0.3) transparent;
    }

    #cv-form-panel::-webkit-scrollbar { width: 5px; }
    #cv-form-panel::-webkit-scrollbar-thumb {
        background: rgba(94, 129, 172, 0.3);
        border-radius: 4px;
    }

    /* app-container dentro del panel izquierdo:
       - position:static para no crear stacking context que recorte la barra
       - animation:none para evitar que opacity:0 inicial oculte la barra
       - z-index:auto para no interferir con el stacking del panel */
    #cv-form-panel #app-container {
        max-width: 100%;
        padding: 24px 24px 40px;
        margin: 0;
        height: auto;
        position: static;
        z-index: auto;
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Ocultar la vista previa inline (debajo del form) en desktop */
    #cv-form-panel #vistaPrevia {
        display: none !important;
    }

    /* Panel derecho: "mesa de trabajo" — ocupa el resto */
    #cv-preview-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        height: 100vh;
        /* overflow:hidden en el contenedor — el scroll lo gestiona #cv-preview-panel-inner */
        overflow: hidden;
        /* Fondo de mesa de trabajo */
        background:
            radial-gradient(ellipse at 30% 15%, rgba(74, 111, 165, 0.07) 0%, transparent 55%),
            radial-gradient(ellipse at 70% 85%, rgba(94, 129, 172, 0.05) 0%, transparent 55%),
            #111827;
        /* Contexto de posicionamiento para el CTA sticky */
        position: relative;
    }

    /* Cabecera sticky del panel derecho */
    .cv-preview-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 24px 10px;
        background: rgba(10, 14, 26, 0.9);
        border-bottom: 1px solid rgba(94, 129, 172, 0.12);
        flex-shrink: 0;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        gap: 12px;
    }

    .cv-preview-panel-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(122, 163, 212, 0.7);
        font-family: 'Inter', system-ui, sans-serif;
    }

    .cv-preview-panel-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4a6fa5;
        flex-shrink: 0;
        animation: panelDotPulse 2.5s ease-in-out infinite;
    }

    @keyframes panelDotPulse {
        0%, 100% { box-shadow: 0 0 4px rgba(74, 111, 165, 0.4); }
        50%       { box-shadow: 0 0 10px rgba(74, 111, 165, 0.9); }
    }

    .cv-preview-panel-badge {
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        color: rgba(74, 111, 165, 0.85);
        background: rgba(74, 111, 165, 0.1);
        border: 1px solid rgba(74, 111, 165, 0.22);
        padding: 2px 8px;
        border-radius: 5px;
        font-family: 'Inter', system-ui, sans-serif;
    }

    /* Área scrollable del panel derecho */
    #cv-preview-panel-inner {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 32px 24px 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        scrollbar-width: thin;
        scrollbar-color: rgba(94, 129, 172, 0.2) transparent;
    }

    #cv-preview-panel-inner::-webkit-scrollbar { width: 5px; }
    #cv-preview-panel-inner::-webkit-scrollbar-thumb {
        background: rgba(94, 129, 172, 0.2);
        border-radius: 4px;
    }

    /* El #vistaPrevia dentro del panel derecho */
    #cv-preview-panel-inner #vistaPrevia {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        margin-top: 0 !important;
    }

    /* Ocultar FAB en desktop (el panel ya es visible) */
    #fabVerCV {
        display: none !important;
    }
}

/* ── Estado vacío del panel derecho ── */
#cv-preview-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 32px;
    gap: 16px;
    min-height: 380px;
    opacity: 0.75;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#cv-preview-empty-state.hidden {
    display: none;
}

.cv-preview-empty-icon {
    font-size: 3.5rem;
    animation: floatIcon 3.5s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.cv-preview-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0;
}

.cv-preview-empty-hint {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.65;
    max-width: 260px;
    margin: 0;
}

.cv-preview-empty-hint strong {
    color: rgba(122, 163, 212, 0.7);
    font-weight: 600;
}

/* Líneas decorativas animadas que simulan texto de CV */
.cv-preview-empty-lines {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    max-width: 200px;
    margin-top: 20px;
}

.cv-preview-empty-lines span {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: rgba(94, 129, 172, 0.2);
    animation: emptyLinePulse 2.2s ease-in-out infinite;
}

.cv-preview-empty-lines span:nth-child(1) { width: 80%; animation-delay: 0s; }
.cv-preview-empty-lines span:nth-child(2) { width: 60%; animation-delay: 0.18s; }
.cv-preview-empty-lines span:nth-child(3) { width: 90%; animation-delay: 0.36s; }
.cv-preview-empty-lines span:nth-child(4) { width: 50%; animation-delay: 0.54s; }
.cv-preview-empty-lines span:nth-child(5) { width: 72%; animation-delay: 0.72s; }
.cv-preview-empty-lines span:nth-child(6) { width: 38%; animation-delay: 0.90s; }

@keyframes emptyLinePulse {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.7; }
}

/* ============================================================
   CARRUSEL DE PÁGINAS A4 — Universal (Desktop + Móvil/Tablet)
   ─────────────────────────────────────────────────────────────
   Arquitectura:
   · .cv-a4-carousel: contenedor del carrusel, centrado en el panel
   · .cv-a4-carousel-viewport: ventana que muestra 1 página a la vez
   · .cv-a4-carousel-track: pista que se desplaza con translateX
   · .cv-a4-carousel-nav: barra de navegación (prev/page-info/next)
   · .cv-a4-carousel-progress: barra de progreso tipo "stories" (móvil)
   · .cv-a4-zoom-fab: botón de zoom flotante persistente (móvil)

   MÓVIL/TABLET — misma arquitectura física que desktop:
   · .cv-a4-carousel--mobile: variante móvil/tablet
   · Las páginas A4 se renderizan a su tamaño físico REAL (794px,
     idéntico a desktop) y se escalan con transform:scale() según
     el ancho real disponible, medido con ResizeObserver — nunca
     con un cap arbitrario, para que tablet aproveche todo su ancho.
   · "Peek": cada slide es ligeramente más angosto que el viewport,
     dejando ver un asomo del borde de la página siguiente/anterior
     (ver `aplicarEscalaMobil` en cv.js).
   · Swipe táctil con snap + barra de progreso + FAB de zoom.
   ============================================================ */

/* Contenedor principal del carrusel */
.cv-a4-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

/* Viewport: muestra exactamente 1 página A4 */
.cv-a4-carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 3px;
    /* Sombra de "mesa de trabajo" */
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

/* ── VARIANTE MÓVIL/TABLET ─────────────────────────────────── */
.cv-a4-carousel--mobile {
    max-width: 100%;
    width: 100%;
}

.cv-a4-carousel--mobile .cv-a4-carousel-viewport {
    width: 100%;
    overflow: hidden;
    background: #f0f2f8;
    border-radius: 4px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
    position: relative;
    /* La altura la calcula JS a partir del ancho real medido — SIN
       aspect-ratio fijo: entraba en conflicto con la altura exacta
       calculada por `aplicarEscalaMobil`, siendo la causa raíz del
       corte inferior reportado en móvil (el viewport podía quedar
       más bajo que la página real escalada). */
}

/* El track en móvil: contiene los slides en fila, con gap real
   (separación visual entre páginas) y permite scroll vertical de
   la página (touch-action:pan-y) mientras el gesto horizontal lo
   captura el swipe manual de CarruselA4._habilitarSwipe(). */
.cv-a4-carousel--mobile .cv-a4-carousel-track {
    display: flex;
    flex-direction: row;
    height: 100%;
    touch-action: pan-y;
    cursor: grab;
    /* Transición con micro-rebote — coherente con el resto de la marca */
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cv-a4-carousel--mobile .cv-a4-carousel-track:active {
    cursor: grabbing;
}

/* Cada slide en móvil: ancho = página escalada (calculado por JS) */
.cv-a4-carousel--mobile .cv-a4-carousel-slide {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

/* La página A4 dentro del slide móvil: escala proporcional al viewport */
.cv-a4-carousel--mobile .cv-a4-page {
    transform-origin: top left;
    flex-shrink: 0;
}

/* ── Barra de progreso tipo "stories" (móvil) ─────────────────
   Sustituye a los dots genéricos: comunica de un vistazo cuántas
   páginas hay y en cuál se encuentra el usuario, con el mismo
   lenguaje visual que Instagram Stories — pero sin auto-avance,
   ya que aquí la navegación es manual (swipe/botones). ── */
.cv-a4-carousel-progress {
    display: flex;
    gap: 6px;
    width: 100%;
    padding: 0 2px;
}

.cv-a4-carousel-progress-segment {
    flex: 1;
    height: 4px;
    border-radius: 3px;
    background: rgba(94, 129, 172, 0.18);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.cv-a4-carousel-progress-segment.is-done {
    background: rgba(74, 111, 165, 0.55);
}

.cv-a4-carousel-progress-segment.is-current {
    background: #4a6fa5;
    transform: scaleY(1.5);
    box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.18);
}

/* ── FAB de zoom flotante — persistente, estilo "glass" ───────
   Reemplaza al hint de texto que desaparecía a los 3s: siempre
   visible, no depende de que el usuario recuerde el aviso. Abre
   el lightbox existente sobre la página actualmente en pantalla. ── */
.cv-a4-zoom-fab {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    width: 38px !important;
    height: 38px !important;
    min-width: unset;
    min-height: unset;
    border-radius: 50%;
    background: rgba(10, 15, 30, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, border-color 0.2s;
    padding: 0 !important;
}

.cv-a4-zoom-fab:hover {
    background: rgba(74, 111, 165, 0.55);
    border-color: rgba(255, 255, 255, 0.5);
}

.cv-a4-zoom-fab:active {
    transform: scale(0.9);
}


/* ── FAB "Obtener PDF" en móvil ──────────────────────────────
   Barra fija en la parte inferior de la pantalla.
   Solo visible en móvil cuando hay vista previa generada.
── */
.cv-fab-pdf-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    padding: 12px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(10, 15, 30, 0.98) 0%, rgba(10, 15, 30, 0.85) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(74, 111, 165, 0.2);
    /* Estado inicial: oculto debajo de la pantalla */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.cv-fab-pdf-bar.visible {
    transform: translateY(0);
    opacity: 1;
}

.cv-fab-pdf-bar .cv-blur-btn {
    width: 100%;
    margin: 0;
}

/* ── Lightbox A4 — wrap scrollable ──────────────────────────── */
/* FIX AUDITORÍA (hoja "perdida" en un vacío enorme en móvil/tablet):
   Un teléfono en vertical es proporcionalmente MUCHO más alto y estrecho
   que una hoja A4 (0.46 vs 0.707 ancho/alto). Esto significa que, para
   que la hoja quepa respetando su proporción REAL (sin deformarla), el
   ancho disponible del teléfono siempre será el factor limitante — y
   siempre quedará algo de espacio vertical sobrante. Es matemáticamente
   inevitable si no se deforma el documento. La solución no es "forzar"
   más tamaño (ya se reduce el padding reservado al mínimo posible, ver
   `calcularAnchoLightbox` en cv.js), sino tratar ese espacio sobrante
   como parte INTENCIONAL del diseño — un fondo tipo "sala de exposición"
   con una suave luz de foco detrás de la hoja, coherente con los colores
   de marca (el mismo azul #4a6fa5 que ya usa la mesa de trabajo desktop),
   en vez de un vacío negro plano que se siente "roto". */
.rv-lightbox-a4-overlay {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: center;
    /* Padding reducido al mínimo — el resto del "espacio de seguridad"
       real para no solapar los controles flotantes lo calcula cv.js
       (ver calcularAnchoLightbox), que dimensiona la propia hoja. */
    padding: 20px 10px max(20px, env(safe-area-inset-bottom, 20px));
    touch-action: pan-x pan-y pinch-zoom;
    /* Fondo "sala de exposición": spotlight de marca centrado que se
       apaga hacia los bordes — sustituye el negro plano anterior. */
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(74, 111, 165, 0.20) 0%, transparent 62%),
        radial-gradient(ellipse at 50% 100%, rgba(94, 129, 172, 0.08) 0%, transparent 50%),
        #060810;
}

/* Franjas de contraste arriba/abajo — dan a los controles flotantes
   (✕ y barra de navegación) una "repisa" visual propia en vez de
   flotar aislados sobre el spotlight, igual que los visores de foto/
   documento premium (gradiente de contraste bajo la barra de UI). */
.rv-lightbox-a4-overlay::before,
.rv-lightbox-a4-overlay::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10000;
    pointer-events: none;
}

.rv-lightbox-a4-overlay::before {
    top: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(3, 4, 8, 0.65), transparent);
}

.rv-lightbox-a4-overlay::after {
    bottom: 0;
    height: 110px;
    background: linear-gradient(to top, rgba(3, 4, 8, 0.7), transparent);
}

/* FIX AUDITORÍA (hoja no centrada verticalmente): antes align-items
   estaba en flex-start, así que cuando la hoja (ya con su tamaño
   "contain" calculado en JS) era más baja que el espacio disponible,
   quedaba pegada arriba en vez de centrada — visualmente descompensado
   respecto al resto de controles (botón ✕, nav inferior). Con el nuevo
   cálculo de calcularAnchoLightbox() la hoja YA siempre cabe en pantalla
   (nunca se desborda), así que centrar verticalmente es seguro: no hay
   riesgo de "esconder" contenido por overflow, solo mejora estética. */
.rv-lightbox-a4-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
}

/* FIX AUDITORÍA (contraste del botón ✕): el botón de cierre genérico
   (.rv-lightbox-close) usa un fondo blanco translúcido pensado para
   overlays oscuros de imagen. En el lightbox A4 la hoja es blanca y
   ocupa casi toda la pantalla, así que ese mismo estilo se "lava" y
   pierde contraste. Aquí se fuerza un fondo oscuro sólido (independiente
   de lo que haya detrás) para garantizar legibilidad siempre. */
.rv-lightbox-a4-overlay .rv-lightbox-close {
    background: rgba(20, 26, 45, 0.65);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.rv-lightbox-a4-overlay .rv-lightbox-close:hover {
    background: rgba(20, 26, 45, 0.85);
}

/* ── Navegación prev/next del lightbox A4 (FIX 6) ──
   Reutiliza el estilo de botón del carrusel (.cv-a4-carousel-btn),
   pero con una barra "glass" oscura para mantener el contraste sobre
   la hoja blanca ampliada, coherente con el resto de controles
   flotantes de la marca (FAB de zoom, etc.). */
.rv-lightbox-a4-nav {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom, 20px));
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 20, 35, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.rv-lightbox-a4-nav .cv-a4-carousel-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

.rv-lightbox-a4-nav .cv-a4-carousel-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.rv-lightbox-a4-nav .cv-a4-carousel-page-info {
    color: rgba(255, 255, 255, 0.9);
    min-width: 42px;
}

/* Pista: contiene todas las páginas en fila horizontal */
.cv-a4-carousel-track {
    display: flex;
    flex-direction: row;
    /* La transición se aplica solo cuando NO está en modo "sin animación" */
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* FIX AUDITORÍA (swipe accidental): permite que el navegador gestione
       el scroll vertical nativo; el JS solo toma el control cuando detecta
       que el gesto es predominantemente horizontal (ver _habilitarSwipe). */
    touch-action: pan-y;
}

/* Sin animación al regenerar (para no perder el foco) */
.cv-a4-carousel-track.no-transition {
    transition: none !important;
}

/* Cada slide ocupa exactamente el 100% del viewport */
.cv-a4-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* Barra de navegación: prev | dots | next */
.cv-a4-carousel-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}

/* Botones prev/next */
.cv-a4-carousel-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(94, 129, 172, 0.3);
    background: rgba(74, 111, 165, 0.08);
    color: rgba(122, 163, 212, 0.8);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    flex-shrink: 0;
    /* Tamaño táctil mínimo */
    min-width: 36px;
    min-height: 36px;
    /* Evitar que hereden width:100% del button global */
    width: 36px !important;
    padding: 0 !important;
}

.cv-a4-carousel-btn:hover:not(:disabled) {
    background: rgba(74, 111, 165, 0.2);
    border-color: rgba(94, 129, 172, 0.6);
    color: #a8c8f0;
    transform: scale(1.08);
}

.cv-a4-carousel-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    transform: none;
}

/* Dots indicadores de página */
.cv-a4-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cv-a4-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(94, 129, 172, 0.3);
    transition: background 0.25s, transform 0.25s, width 0.25s;
    cursor: pointer;
    flex-shrink: 0;
}

.cv-a4-carousel-dot.active {
    background: #4a6fa5;
    transform: scale(1.3);
    width: 18px;
    border-radius: 4px;
}

/* Texto de página: "1 / 2" */
.cv-a4-carousel-page-info {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(122, 163, 212, 0.5);
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: 0.08em;
    min-width: 36px;
    text-align: center;
}

/* ============================================================
   LABELS DE CAMPO — v2.0
   ============================================================ */
.form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(122, 163, 212, 0.7);
    margin-bottom: 5px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Asterisco de campo obligatorio */
.form-label--required::after {
    content: ' *';
    color: #e05050;
    font-weight: 700;
}

/* Hint "* Obligatorio" en la cabecera de sección */
.modular-section-required-hint {
    font-size: 0.68rem;
    color: rgba(224, 80, 80, 0.6);
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: 0.04em;
    margin-left: auto;
}

/* Wrapper de campo con label */
.form-field-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    width: 100%;
}

.form-field-wrap input,
.form-field-wrap textarea,
.form-field-wrap select {
    margin-bottom: 0 !important;
}

/* Fila de 2 columnas para campos cortos (teléfono + ciudad) */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ICONO DE SECCIÓN + TOGGLE ICON
   ============================================================ */
.modular-section-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.modular-section-toggle-icon {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(94, 129, 172, 0.7);
    margin-left: auto;
    transition: transform 0.25s ease, color 0.2s;
    line-height: 1;
    flex-shrink: 0;
}

/* Cuando la sección está expandida, rotar el icono */
.modular-section-header[aria-expanded="true"] .modular-section-toggle-icon {
    transform: rotate(45deg);
    color: rgba(122, 163, 212, 0.9);
}

/* Cabecera de sección colapsable: cursor pointer */
.modular-section-header.opciones-extra-trigger {
    cursor: pointer;
    padding: 10px 14px;
    background: rgba(74, 111, 165, 0.06);
    border: 1px solid rgba(74, 111, 165, 0.18);
    border-radius: 8px;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
    gap: 10px;
}

.modular-section-header.opciones-extra-trigger:hover {
    background: rgba(74, 111, 165, 0.12);
    border-color: rgba(74, 111, 165, 0.35);
}

/* Label dentro de chip-section */
.chip-section-label {
    margin-bottom: 8px;
    display: block;
}

/* ============================================================
   SELECT — Estilo oscuro coherente con el formulario
   ============================================================ */
.form-select {
    width: 100%;
    padding: 11px 36px 11px 12px;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Flecha personalizada SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235e81ac' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    margin-bottom: 0;
}

.form-select:focus {
    border-color: #5e81ac;
    outline: none;
    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
}

.form-select option {
    background-color: #1e2535;
    color: #ffffff;
}

/* Placeholder option (valor vacío) */
.form-select option[value=""] {
    color: #666;
}

/* FIX AUDITORÍA: mismo motivo que el bloque de inputs de arriba —
   ampliado a 1199px para cubrir todo el rango de layout móvil/tablet
   (ver nota completa junto al primer bloque de font-size:16px). */
@media (max-width: 1199px) {
    .form-select {
        font-size: 16px !important;
    }
}

/* ============================================================
   INDICADOR DE PROGRESO — 4 pasos
   ============================================================ */
.cv-progress-bar {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: rgba(74, 111, 165, 0.05);
    border: 1px solid rgba(74, 111, 165, 0.12);
    border-radius: 10px;
}

.cv-progress-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

/* Paso individual */
.cv-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    position: relative;
}

/* Dot del paso */
.cv-progress-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(94, 129, 172, 0.25);
    background: rgba(74, 111, 165, 0.06);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

/* Paso activo (siguiente a completar) */
.cv-progress-step--active .cv-progress-step-dot {
    border-color: rgba(94, 129, 172, 0.6);
    background: rgba(74, 111, 165, 0.15);
    animation: stepPulse 1.8s ease-in-out infinite;
}

@keyframes stepPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(74, 111, 165, 0.15); }
}

/* Paso completado */
.cv-progress-step--done .cv-progress-step-dot {
    border-color: #4a6fa5;
    background: #4a6fa5;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(74, 111, 165, 0.4);
}

/* Check dentro del dot completado */
.cv-progress-step--done .cv-progress-step-dot::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.65rem;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

/* Label del paso */
.cv-progress-step-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(122, 163, 212, 0.35);
    font-family: 'Inter', system-ui, sans-serif;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.cv-progress-step--active .cv-progress-step-label {
    color: rgba(122, 163, 212, 0.65);
}

.cv-progress-step--done .cv-progress-step-label {
    color: rgba(122, 163, 212, 0.85);
}

/* Conector entre pasos */
.cv-progress-connector {
    flex: 1;
    height: 2px;
    background: rgba(94, 129, 172, 0.15);
    border-radius: 2px;
    margin: 0 4px;
    margin-bottom: 22px; /* alinear con el centro del dot */
    transition: background 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Conector activo: relleno parcial animado */
.cv-progress-connector--active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #4a6fa5, transparent);
    animation: connectorFlow 1.5s ease-in-out infinite;
}

@keyframes connectorFlow {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Conector completado */
.cv-progress-connector--done {
    background: #4a6fa5;
}

/* ============================================================
   BOTONES DE ACCIÓN DEL FORMULARIO — v2.0
   ============================================================ */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    align-items: stretch;
}

/* Botón principal: Vista Previa */
.btn-primary-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #4a6fa5 0%, #5e81ac 100%);
    color: #fff;
    border: none;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    letter-spacing: 0.03em;
    width: auto;
    box-shadow: 0 4px 16px rgba(74, 111, 165, 0.25);
}

.btn-primary-action:hover:not(:disabled) {
    background: linear-gradient(135deg, #5d8bc9 0%, #7aa3d4 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 111, 165, 0.4);
}

.btn-primary-action-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Estado "Generando..." */
.btn-primary-action.btn-generando {
    opacity: 0.85;
    animation: pulseGenerando 0.9s ease-in-out infinite;
}

/* Botón secundario: Limpiar */
.btn-secondary-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(217, 83, 79, 0.35);
    color: rgba(217, 83, 79, 0.7);
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    width: auto;
    white-space: nowrap;
}

.btn-secondary-action:hover:not(:disabled) {
    background: rgba(217, 83, 79, 0.1);
    border-color: rgba(217, 83, 79, 0.7);
    color: #e05050;
    transform: translateY(-1px);
}

/* Estado de confirmación (¿Confirmar?) */
.btn-secondary-action[style*="border-color: rgb(231, 76, 60)"],
.btn-secondary-action[style*="border-color:#e74c3c"] {
    animation: shakeMini 0.3s ease;
}

@keyframes shakeMini {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-3px); }
    75%       { transform: translateX(3px); }
}

/* ============================================================
   GRID DEL FORMULARIO — v2.0 (con labels)
   ============================================================
   En desktop ≥ 768px el formulario usa grid de 2 columnas.
   Las secciones modulares y los botones ocupan span 2.
   ============================================================ */
@media (min-width: 768px) {
    #cv-form {
        display: block; /* Resetear el grid anterior — ahora usamos flex-column */
    }

    /* Las secciones ya tienen su propio layout interno */
    .modular-section { width: 100%; }

    /* Botones de acción: fila completa */
    .form-actions { width: 100%; }
}