/* =================================================================== */
/* ======   CV UNIFICADO v2 (TEMA OSCURO ELEGANTE Y LEGIBLE)    ====== */
/* =================================================================== */

/* --- 1. Paleta de colores refinada --- */
:root {
    --color-fondo: #1a1d24;
    --color-contenedor: #2c3144; 
    --color-texto-principal: #f0f0f0;
    --color-texto-secundario: #a0a0b0;
    --color-borde: rgba(255, 255, 255, 0.15);
    --color-interactivo: #5dade2;
    --gemini-gradient: linear-gradient(125deg, #4e8cff, #d16aff, #ff8a5c);
    --fuente-principal: 'Montserrat', sans-serif;
}

/* --- 2. Fondo dinámico y estilos base --- */
body {
    font-family: var(--fuente-principal);
    margin: 0;
    background-color: var(--color-fondo);
    color: var(--color-texto-secundario);
    font-size: 10pt;
    font-weight: 400;
    line-height: 1.7;
    
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3e%3cpath fill='none' stroke='%232c3144' stroke-width='1' d='M0 20 C20 10 40 10 60 20 S80 30 100 20'/%3e%3c/svg%3e");
    animation: move-background 40s linear infinite;
}

@keyframes move-background {
    0% { background-position: 0 0; }
    100% { background-position: 400px 0; }
}

/* --- 3. Contenedor principal del CV --- */
.cv-container {
    max-width: 8.5in;
    min-height: 11in;
    margin: 30px auto;
    padding: 40px 50px;
    background-color: var(--color-contenedor);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    position: relative;
    box-sizing: border-box;
}

/* --- 4. Animación de apertura "Fade-in" --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- El resto de los estilos (adaptados al nuevo fondo) --- */
.main-header { display: flex; align-items: center; gap: 30px; margin-bottom: 25px; position: relative; }
.profile-picture { width: 130px; height: 130px; border-radius: 50%; border: 5px solid var(--color-borde); object-fit: cover; transition: transform 0.4s; }
.profile-picture:hover { transform: scale(1.05); }
.header-content { text-align: left; flex-grow: 1; }
.main-header h1 { font-size: 32pt; font-weight: 700; color: var(--color-texto-principal); margin: 0 0 5px 0; letter-spacing: 2px; }
.header-subtitle { font-size: 12pt; font-weight: 400; color: var(--color-texto-secundario); margin: 0 0 18px 0; letter-spacing: 1.5px; text-transform: uppercase; }

.contact-info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 9pt; }
.contact-info li { display: flex; align-items: center; color: var(--color-texto-secundario); }
.contact-info i { margin-right: 8px; color: var(--color-interactivo); }
.contact-info a { text-decoration: none; color: inherit; transition: color 0.3s; }
.contact-info a:hover { color: var(--color-interactivo); }

.highlight-text { background-image: var(--gemini-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.section-divider { border: 0; height: 1px; background-color: var(--color-borde); margin: 25px 0; }

h2 { text-align: center; font-size: 14pt; font-weight: 600; color: var(--color-texto-principal); margin: 0 0 30px 0; text-transform: uppercase; letter-spacing: 3px; position: relative; padding-bottom: 15px; }
h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background-image: var(--gemini-gradient); border-radius: 2px; }

h3 { font-size: 11pt; font-weight: 700; color: var(--color-texto-principal); margin-bottom: 5px; }

ul { padding-left: 1.5em; list-style-type: '▪  '; }
li { margin-bottom: 5px; padding-left: 5px; }
p { margin: 0 0 10px 0; }
.summary-section p { text-align: justify; font-size: 11pt; line-height: 1.8; color: var(--color-texto-principal); }

.two-column-section { display: flex; gap: 60px; }
.left-column, .right-column { width: 50%; }

.skills-pills-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; text-align: center; }
.skill-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; background-color: rgba(255, 255, 255, 0.08); color: var(--color-texto-principal); border-radius: 20px; font-size: 9pt; font-weight: 600; transition: all 0.3s ease; }
.skill-pill:hover { background-image: var(--gemini-gradient); color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.skill-pill:hover i { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: white; }
.skills-icons-container { display: none; }

.experience-section .job { margin-bottom: 15px; padding: 20px; border-radius: 8px; background-color: rgba(0,0,0,0.1); transition: transform 0.3s ease-out, background-color 0.3s ease-out; }
.experience-section .job:hover { transform: translateY(-5px); background-color: rgba(0,0,0,0.2); }

.web-view { display: block; }
.print-annexes { display: none; }

.certificate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 20px; }
.certificate-item { background-color: rgba(0,0,0,0.1); padding: 15px; border-radius: 8px; transition: background-color 0.3s; }
.certificate-item:hover { background-color: rgba(0,0,0,0.2); }
.certificate-item h4 { margin: 0 0 5px 0; color: var(--color-texto-principal); }
.certificate-link { text-decoration: none; color: var(--color-interactivo); font-weight: 700; }

.references-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: -10px; }
.reference-card { border-left: 4px solid; border-image-slice: 1; border-image-source: var(--gemini-gradient); padding: 15px 20px; }
.reference-card h4 { margin: 0 0 5px 0; color: var(--color-texto-principal); font-size: 11pt; }
.reference-card p { font-size: 9.5pt; margin: 0 0 10px 0; color: var(--color-texto-secundario); line-height: 1.5; }
.reference-card a { font-weight: 600; font-size: 9pt; color: var(--color-interactivo); text-decoration: none; }

.contact-form { display: flex; flex-direction: column; gap: 15px; max-width: 700px; margin: -10px auto 0 auto; }
.contact-form .form-row { display: flex; gap: 15px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--color-borde); background-color: rgba(255,255,255,0.05); color: var(--color-texto-principal); border-radius: 5px; font-family: var(--fuente-principal); font-size: 10pt; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-interactivo); box-shadow: 0 0 8px rgba(78, 140, 255, 0.2); }
.contact-form .submit-btn { background-image: var(--gemini-gradient); background-size: 200% auto; color: white; border: none; border-radius: 5px; padding: 12px 20px; font-family: var(--fuente-principal); font-size: 11pt; font-weight: 600; cursor: pointer; transition: background-position 0.4s ease, transform 0.2s; align-self: center; width: 200px; }
.contact-form .submit-btn:hover { background-position: right center; transform: translateY(-2px); }

.main-footer { text-align: center; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--color-borde); font-size: 9pt; color: #777; }

.languages-chart-container { display: flex; flex-direction: column; gap: 15px; margin-top: -10px; }
.language-bar { display: flex; align-items: center; gap: 15px; }
.language-name { width: 80px; font-weight: 600; font-size: 10pt; color: var(--color-texto-principal); }
.language-level { font-size: 9pt; color: var(--color-texto-secundario); width: 70px; text-align: left; }
.progress-bar-container { flex-grow: 1; height: 12px; background-color: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; }
.progress-bar-fill { width: 0; height: 100%; background-image: var(--gemini-gradient); border-radius: 6px; transition: width 1.2s ease-in-out, filter 0.3s, transform 0.3s; transform-origin: left; }
.language-bar:hover .progress-bar-fill { filter: brightness(1.15); transform: scaleX(1.02); }
.fade-in-section.is-visible .level-native { width: 100%; }
.fade-in-section.is-visible .level-advanced { width: 85%; }
.fade-in-section.is-visible .level-beginner { width: 30%; }
.languages-print-view { display: none; }

@media (max-width: 900px) {
    .cv-container { width: 100%; margin: 0; padding: 20px; border-radius: 0; border: none; }
    .main-header { flex-direction: column; text-align: center; gap: 15px; }
    .profile-picture { width: 100px; height: 100px; margin-right: 0; }
    .main-header h1 { font-size: 24pt; margin-bottom: 5px; }
    .header-subtitle { font-size: 11pt; }
    .contact-info { align-items: center; }
    .two-column-section, .contact-form .form-row { flex-direction: column; gap: 0; }
    .left-column, .right-column { width: 100%; }
    .two-column-section .right-column { margin-top: 40px; }
    .certificate-grid, .references-grid { grid-template-columns: 1fr; }
}

.header-actions { display: flex; flex-direction: row; align-items: center; gap: 25px; margin-top: 25px; }
.language-switch-container { display: flex; align-items: center; gap: 8px; }
.download-btn { position: static; background-image: var(--gemini-gradient); background-size: 200% auto; color: white; border: none; border-radius: 5px; padding: 10px 18px; font-family: var(--fuente-principal); font-size: 9pt; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background-position 0.4s ease, transform 0.2s; }
.download-btn:hover { background-position: right center; transform: translateY(-2px); }
.lang-label { font-size: 10pt; font-weight: 600; color: var(--color-texto-principal); transition: color 0.3s ease; }
body.show-en [data-lang-key="langLabelEs"] { color: #777; }
body:not(.show-en) [data-lang-key="langLabelEn"] { color: #777; }
.language-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.language-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-image: var(--gemini-gradient); }
input:checked + .slider:before { transform: translateX(26px); }

@media (max-width: 900px) {
    .header-actions { position: static; flex-direction: column; align-items: stretch; width: 100%; margin-top: 20px; gap: 15px; }
    .language-switch-container { justify-content: center; }
    .download-btn { width: 100%; justify-content: center; }
}

/* =================================================================== */
/* ======     NUEVOS ESTILOS DE IMPRESIÓN (PDF MEJORADO)        ====== */
/* =================================================================== */
@media print {
    @page {
        margin: 1.5cm; /* Margen estándar para impresión */
    }

    body {
        background: #fff !important;
        color: #333 !important; /* Un negro menos intenso, más agradable */
        font-size: 9.5pt;
        line-height: 1.45; /* Ligeramente más compacto */
    }

    /* --- Ocultar elementos no necesarios para el PDF --- */
    .profile-picture, .header-actions, .references-section, .certificates-section, .section-divider, .main-footer, .contact-form-section, .contact-divider, .skills-pills-container, .language-switch-container, .languages-chart-container, body > style, body > script {
        display: none !important;
    }

    /* --- Resetear estilos del contenedor --- */
    .cv-container {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
    }

    /* --- Resetear estilos de texto y animaciones --- */
    .highlight-text {
        background-image: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        color: inherit !important;
        font-weight: 600;
        border-bottom: 1px solid #ccc; /* Subrayado sutil para destacar */
    }
    .fade-in-section {
        opacity: 1 !important;
        transform: none !important;
    }

    /* --- Resetear estilos de tarjetas de experiencia --- */
    .experience-section .job, .experience-section .job:hover {
        padding: 0;
        box-shadow: none;
        transform: none;
        background: none !important;
    }

    /* --- Control de saltos de página --- */
    .two-column-section, .item {
        break-inside: avoid;
    }
    .job, p, ul {
        break-inside: auto;
    }
    .right-column > section {
        margin-top: 0;
    }
    
    /* --- Jerarquía y espaciado optimizado para 2 páginas --- */
    h2, h3, p, ul, li, .main-header h1, .header-subtitle, .contact-info, .certificate-item h4, .certificate-link, .reference-card h4, .reference-card p, .reference-card a, .skill-icon-item, .languages-print-view p {
        color: #333 !important;
        font-family: 'Montserrat', sans-serif;
    }
    
    .main-header {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 2px solid #333; /* Línea sólida debajo del encabezado */
    }

    h2 {
        font-size: 12pt;
        font-weight: 700;
        text-align: left; /* Títulos alineados a la izquierda para un look más formal */
        padding-bottom: 8px;
        margin-top: 18px;
        margin-bottom: 10px;
        letter-spacing: 2px;
    }
    /* El nuevo separador elegante */
    h2::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 2px !important;
        background-image: url("data:image/svg+xml,%3csvg width='100' height='2' viewBox='0 0 100 2' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 1 C 25 2, 75 0, 100 1' stroke='%23AAAAAA' fill='none' stroke-width='1'/%3e%3c/svg%3e") !important;
        border: none !important;
        border-radius: 0 !important;
    }
    section:first-of-type h2, .main-header + section h2 {
        margin-top: 0;
    }

    h3 {
        font-size: 10pt;
        font-weight: 600;
        margin-top: 8px;
        margin-bottom: 2px;
    }
    
    ul { margin-top: 2px; }
    li {
        margin-bottom: 2px;
    }
    .item, .job {
        margin-bottom: 8px;
    }
    .summary-section p {
        font-size: 10pt;
        line-height: 1.5;
        text-align: justify;
    }
    .two-column-section {
         gap: 30px; 
    }

    /* --- Mostrar elementos específicos para impresión --- */
    .skills-icons-container {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start; /* Alineado a la izquierda */
        gap: 10px 20px;
        margin-top: 5px;
    }
    .skill-icon-item {
        font-size: 9pt;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .languages-print-view {
        display: block !important;
        text-align: left; /* Alineado a la izquierda */
        margin-top: 5px;
    }
    .languages-print-view p {
        margin: 1px 0;
        font-weight: 400;
    }
}