/* --- CONFIGURACIÓN GLOBAL PARA CV_PATRON --- */
@page {
    size: A4;
    margin: 0;
}
* {
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: #EDEDEF;
}

/* --- ESTILOS ESPECÍFICOS PARA CV_PATRON --- */
body.cv-page {
    margin: 0;
    padding: 20px;
    background: #f7f9fb;
    min-height: 100vh;
    box-sizing: border-box;
}

@media print {
    body.cv-page { 
        padding: 0; 
        background: white; 
    }
    
    .page-container { 
        margin: 0 !important; 
        box-shadow: none !important; 
        page-break-after: always !important;
        width: 210mm !important;
        height: 297mm !important;
        /* Márgenes: 10mm laterales, 10mm arriba y abajo */
        padding: 10mm 10mm 8mm 10mm;
    }
    
    .page-container:last-child { page-break-after: auto !important; }
    
    /* Asegurar que las imágenes se impriman correctamente */
    img { 
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Mejorar la calidad de impresión */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* --- CONTENEDORES DE PÁGINA --- */
.page-container {
    background: transparent; /* permitir que se vea body #EDEDEF */
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
        /* Márgenes: 12mm arriba, 10mm laterales, 8mm abajo */
    padding: 12mm 13mm 8mm 13mm;
    box-sizing: border-box;
    
}

/* Página 0 - Carta de presentación */
.page-0 {
    background: white;
    padding: 22mm;
}

.carta-container {
    height: 100%;
}

.letter-header {
    text-align: right;
    font-family: Calibri;
    font-size: 12pt;
    margin-bottom: 20mm;
}

.letter-body {
    text-align: justify;
    font-family: Calibri;
    font-size: 12pt;
    line-height: 1.6;
}

.letter-footer {
    padding-top: 20mm;
    font-family: Calibri;
    font-size: 12pt;
}

.firma {
    margin: 0;
}

/* --- ESTILOS PARA PLACEHOLDERS --- */
.placeholder {
    color: #f97316;
    font-weight: 600;
    animation: blink 1s step-end infinite;
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px dashed #f97316;
}

.hidden { display: none; }

@keyframes blink { 
    50% { opacity: 0.5; } 
}

/* Variables CSS para el sidebar */
:root {
    --sb-sep-width: 20%;
    --sb-sep-gap: 5px;
    --sb-sep-color: #222222;
    --sb-sep-thickness: 2px;
}

/* =========================================
   ESTILOS COMUNES Y TIPOGRAFÍA
   ========================================= */
.body-text {
    text-align: justify;
    color: #444;
    line-height: 1.35;
    margin: 0;
    padding: 0;
}

/* Listas con viñetas personalizadas (NUEVO) */
.job-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 0;
}

.job-list li {
    position: relative;
    padding-left: 22px; /* espacio para el icono de la carpeta assets */
    margin-bottom: 3px;
    font-size: 11pt;
    color: #444;
    text-align: justify;
    line-height: 1.35;
}

.job-list li::before {  /* viñeta personalizada */
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em; /* centrar verticalmente con respecto al texto */
    width: 12px;
    height: 12px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("/assets/Bullet_arrow.png");
}

.body-text, .job-list li{ font-family: calibri; font-size: 10pt;}

td, div, p, ul {
    border: 0px dotted;
    margin: 0;
    padding: 0;
}

/* Enlaces */
a { color: #0000EE; text-decoration: none; }

/* =========================================
   PÁGINA 1
   ========================================= */
.page-1 {
    display: flex;
    font-size: 9pt;
    line-height: 1.35;
}

/* SIDEBAR P1 */
.sidebar {
    width: 34%;
    background-color: transparent;
    padding: 0 5mm 0 0;
    border-right: 2px dotted #bdc3c7;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin-bottom: 12px; 
}

.photo-container {
    width: 100px;
    height: 135px; /* caja elíptica vertical - reducida */
    border-radius: 50% / 60%; /* elipse vertical */
    padding: 0; /* eliminar marco blanco */
    background: transparent; /* transparente para que se vea el fondo debajo */
    overflow: hidden; /* recorta la imagen dentro de la elipse */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* sin sombra exterior */
    border: none; /* sin borde */
    position: relative;
}
.photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50% / 60%; /* mantener la misma elipse */
    box-shadow: none; /* quitar cualquier relieve interno */
}

.sb-name { font-family: 'Montserrat', sans-serif; font-size: 15pt; color: #333; margin: 0 0 5px 0; font-weight: 500; }
.sb-title-blue { font-family: 'Montserrat', sans-serif; color: #5d9cec; font-size: 10pt; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; margin-bottom: 3px; }

.sb-section { width: 100%; margin-top: 15px; }
.sb-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 10pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #333;

    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 0 0 9px 0;
    

    /* Reservar espacio a izquierda/derecha para las líneas */
    padding-left: calc(var(--sb-sep-width) + var(--sb-sep-gap));
    padding-right: calc(var(--sb-sep-width) + var(--sb-sep-gap));

    /* Dibujar las dos líneas como fondos separados (izquierda y derecha) */
    background-image:
        linear-gradient(var(--sb-sep-color), var(--sb-sep-color)),
        linear-gradient(var(--sb-sep-color), var(--sb-sep-color));
    background-repeat: no-repeat;
    background-size: var(--sb-sep-width) var(--sb-sep-thickness), var(--sb-sep-width) var(--sb-sep-thickness);
    background-position: left center, right center;
}

.sb-text {              line-height: 1.25; color: #666; margin-top: 4px; text-align: center; }
.sb-contact-details {   line-height: 1.35; color: #666; margin-top: 4px; text-align: left; }
    
/* EDUCACIÓN P1 */
.edu-block { margin-bottom: 0; font-size: 8pt; text-align: left; padding: 0; }
.edu-uni { font-size: 12pt; color: #5d9cec; font-weight:normal; text-transform: uppercase; }
.edu-detail { font-style: italic; color: #666; }
.sb-text, .sb-contact-details, .edu-detail { font-size: 8.75pt; }

/* SKILLS Grid */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; margin-top: 8px; }
.skill-item { display: flex; flex-direction: column; align-items: center; }
.skill-text { font-size: 6.1pt; height: 25px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 3px; line-height: 1; text-align: center; }
.skill-circle {
    width: 38px;               /* diámetro total equivalente al círculo previo (30 + 2*4) */
    height: 38px;
    border-radius: 50%;        /* mantener forma circular */
    object-fit: cover;         /* rellenar y recortar la imagen */
    display: block;
    border: none;              /* eliminar el anillo/borde exterior */
    opacity: 1;                /* restaurar opacidad por defecto */
}

/* Iconos de instituciones en EDUCATION */
.edu-detail img.edu-icon {
    height: 18px;              /* tamaño objetivo para la mayoría */
    width: auto;
    vertical-align: middle;
    margin-left: 8px;
    display: inline-block;

    /* reducir artefactos por reescalado cuando sea posible */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated; /* fallback para algunos navegadores */
    -webkit-transform: translateZ(0); /* forzar render en GPU */
}

/* Variante más pequeña cuando haga falta */
.edu-detail img.edu-icon.small {
    height: 14px;
    margin-left: 6px;
}

/* Universidad de Sevilla: el doble de tamaño (36px) */
.edu-detail img.edu-icon.us {
    height: 24px;
    margin-left: 0px;
    vertical-align: middle;
    /* si deseas más nitidez, usa una versión de mayor resolución del PNG */
}

/* EPFL: mitad del tamaño (50% de 18px = 9px) */
.edu-detail img.edu-icon.epfl {
    height: 9px;
    margin-left: 6px;
    /* si deseas más nitidez, usa una versión de mayor resolución del PNG */
}

/* MAIN CONTENT P1 */
.main-content-p1 {
    width: 66%;
    padding: 0 0 0 5mm;
    background-color: transparent;
    height: 100%;
}

/* JOB ITEM */
.job-title, .job-date {color: #5d9cec; font-size: 12.6pt; font-weight: 500;     padding-top: 10px; }
.job-title { font-weight: 500;}
.job-date { text-align: right; vertical-align: top;}
.job-reporting { font-size: 10pt; color: #666; margin: 0; padding: 0; }

/* =========================================
   PÁGINA 2
   ========================================= */
.page-2 {
    /* No necesita padding adicional porque .page-container ya tiene los márgenes */
    font-size: 9pt;
    line-height: 1.4;
    break-before: page; 
    
}

.row-header { vertical-align: top; padding-top: 0px; } /* Separación reducida entre bloques */


/* Estilos para las columnas de la tabla */
.col-base { vertical-align: top; padding: 0px 0px; }
.col-title { width: 100%; line-height: 1.1; text-align: left; }
.col-content { width: 100%; line-height: 1.1; text-align: justify; }
.col-bullets { width: 100%; line-height: 1.1; text-align: left; }
.col-date { width: auto; white-space: nowrap; min-width: 80px; text-align: right; line-height: 1.1; vertical-align: top;}
.col-reporting { width: 100%; line-height: 1.1; font-size: 9pt; text-align: left; }

/* Header para texto multilínea */
.sb-header.multiline { 
    padding-left: 15%; 
    padding-right: 15%; 
}