/* ================================================================
   HOJA DE VIDA – Jorge Palacios Mosquera
   styles.css
   ================================================================ */

/* ----------------------------------------------------------------
   VARIABLES DE DISEÑO
   ---------------------------------------------------------------- */
:root {
    --color-primary:      #1B3A6B;   /* Azul marino principal (header/sidebar) */
    --color-primary-dark: #122848;   /* Azul más oscuro para detalles */
    --color-primary-text: #e0e8f5;   /* Texto claro sobre fondo azul */
    --color-accent:       #9fc3e8;   /* Azul claro para énfasis */
    --color-white:        #ffffff;
    --color-body-text:    #222222;
    --color-muted:        #555555;
    --color-light:        #777777;
    --color-border:       rgba(255, 255, 255, 0.25);

    --font-main: Arial, 'Helvetica Neue', Helvetica, sans-serif;

    --sidebar-width: 200px;
    --page-width:    210mm;
}

/* ----------------------------------------------------------------
   RESET BÁSICO
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

/* ----------------------------------------------------------------
   BASE
   ---------------------------------------------------------------- */
body {
    font-family: var(--font-main);
    font-size: 9.5pt;
    line-height: 1.45;
    color: var(--color-body-text);
    background-color: #d8dde5;
}

a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Utilitario: subrayado sin cambiar fuente */
.text-underline {
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   CONTENEDOR PRINCIPAL (tamaño A4 aproximado)
   ---------------------------------------------------------------- */
.cv-container {
    width: var(--page-width);
    min-height: 297mm;
    margin: 24px auto;
    background: var(--color-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
.cv-header {
    background-color: var(--color-primary);
    color: var(--color-white);
    display:     flex;
    align-items: stretch;
    min-height:  130px;
}

/* Foto de perfil */
.header-photo {
    width:      var(--sidebar-width);
    min-width:  var(--sidebar-width);
    flex-shrink: 0;
    overflow:   hidden;
    background: var(--color-primary-dark);
}

.profile-photo {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center top;
    display:     block;
}

/* Información del header */
.header-info {
    flex:    1;
    padding: 18px 22px 14px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    border-left: 3px solid var(--color-primary-dark);
}

.header-name {
    font-size:      22pt;
    font-weight:    bold;
    color:          var(--color-white);
    letter-spacing: 0.5px;
    margin-bottom:  5px;
    line-height:    1.1;
}

.header-title {
    font-size:    10.5pt;
    color:        var(--color-primary-text);
    margin-bottom: 2px;
}

.header-contact {
    margin-top:      10px;
    display:         flex;
    flex-direction:  column;
    gap:             3px;
    font-size:       10.5pt;
    color:           var(--color-primary-text);
}

.header-contact a {
    color: var(--color-accent);
}

/* ----------------------------------------------------------------
   BODY: DOS COLUMNAS
   ---------------------------------------------------------------- */
.cv-body {
    display:     flex;
    align-items: stretch;
}

/* ----------------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------------- */
.sidebar {
    width:     var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: var(--color-primary);
    color:     var(--color-white);
    padding:   16px 13px;
}

/* Sección genérica del sidebar */
.sidebar-section {
    margin-bottom: 18px;
}

/* Título de sección en sidebar */
.sidebar-title {
    font-size:       9.5pt;
    font-weight:     bold;
    color:           var(--color-white);
    text-transform:  uppercase;
    letter-spacing:  0.4px;
    padding-bottom:  4px;
    margin-bottom:   8px;
    border-bottom:   2px solid var(--color-border);
}

/* Perfil: título con fondo ligeramente diferente */
#perfil .sidebar-title {
    background-color: rgba(255, 255, 255, 0.12);
    padding:          4px 8px;
    border-bottom:    none;
    margin-bottom:    9px;
}

/* Párrafos en sidebar */
.sidebar p {
    font-size:   7.5pt;
    line-height: 1.45;
    color:       var(--color-primary-text);
    text-align:  justify;
    margin-bottom: 6px;
}

/* ---- PROGRAMAS ---- */
.program-group {
    margin-bottom: 8px;
}

.program-group-title {
    font-size:   7.5pt;
    font-weight: bold;
    color:       var(--color-white);
    margin-bottom: 2px;
}

.program-list {
    list-style:  none;
    padding-left: 0;
}

.program-list li {
    font-size:    7.5pt;
    color:        var(--color-primary-text);
    padding-left: 10px;
    position:     relative;
    margin-bottom: 1px;
}

.program-list li::before {
    content:  '•';
    position: absolute;
    left:     1px;
    color:    var(--color-accent);
}

.program-sublabel {
    font-size:    7.5pt;
    font-weight:  bold;
    color:        var(--color-accent);
    margin-top:   4px;
    margin-bottom: 1px;
}

/* ---- IDIOMAS ---- */
.idioma-list {
    list-style: none;
    padding:    0;
}

.idioma-list li {
    font-size:     8.5pt;
    color:         var(--color-primary-text);
    margin-bottom: 3px;
}

.idioma-label {
    font-weight: bold;
    color:       var(--color-white);
}

/* ---- REFERENCIAS ---- */
.referencia-item {
    margin-bottom:  10px;
    padding-bottom: 9px;
    border-bottom:  1px solid var(--color-border);
}

.referencia-item:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.ref-name {
    font-weight:   bold;
    font-size:     8pt;
    color:         var(--color-white);
    margin-bottom: 1px;
}

.ref-company,
.ref-role,
.ref-contact {
    font-size:     7.5pt;
    color:         var(--color-primary-text);
    margin-bottom: 1px;
}

/* ---- HOBBIES ---- */
.hobby-list {
    list-style: none;
    padding:    0;
}

.hobby-list li {
    font-size: 8.5pt;
    color:     var(--color-primary-text);
    padding:   1px 0;
}

.hobby-list li::before {
    content: '• ';
    color:   var(--color-accent);
}

/* ----------------------------------------------------------------
   CONTENIDO PRINCIPAL
   ---------------------------------------------------------------- */
.main-content {
    flex:       1;
    padding:    18px 22px;
    background: var(--color-white);
}

/* ---- Sección ---- */
.section {
    margin-bottom: 20px;
}

.section-title {
    font-size:      13pt;
    font-weight:    bold;
    color:          var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom:  2.5px solid var(--color-primary);
    padding-bottom: 3px;
    margin-bottom:  12px;
}

/* ---- Item genérico (fila fecha + contenido) ---- */
.cv-item {
    display:       flex;
    gap:           12px;
    margin-bottom: 13px;
}

/* Bloque de metadatos (fecha / lugar) */
.item-meta {
    width:     112px;
    min-width: 112px;
    display:         flex;
    flex-direction:  column;
    gap:             2px;
    padding-top:     1px;
}

.item-date {
    font-size:   8.5pt;
    font-weight: bold;
    color:       var(--color-muted);
    line-height: 1.3;
}

.item-location {
    font-size:  7.5pt;
    color:      var(--color-light);
    font-style: italic;
}

/* Cuando un ítem no tiene fecha visible */
.cv-item--no-date .item-meta {
    width:     0;
    min-width: 0;
    display:   none;
}

/* ---- Contenido de cada ítem ---- */
.item-body {
    flex: 1;
}

/* Grado / título educativo */
.item-degree {
    font-size:    9.5pt;
    font-weight:  bold;
    color:        var(--color-body-text);
}

/* Institución */
.item-institution {
    font-size:  8.5pt;
    font-style: italic;
    color:      var(--color-muted);
    margin-top: 2px;
}

/* Nombre de empresa */
.company-name {
    font-size:       11pt;
    font-weight:     bold;
    color:           var(--color-primary);
    text-decoration: underline;
    margin-bottom:   2px;
}

/* Cargo / puesto */
.job-title {
    font-size:       9pt;
    font-style:      italic;
    color:           var(--color-muted);
    text-decoration: underline;
    margin-bottom:   4px;
}

/* Sector / área */
.item-sector {
    font-size:     8.5pt;
    color:         var(--color-muted);
    margin-bottom: 4px;
}

/* Etiqueta "Tareas realizadas:" */
.tasks-label {
    font-size:       8.5pt;
    font-weight:     bold;
    color:           var(--color-body-text);
    text-decoration: underline;
    margin-top:      4px;
    margin-bottom:   5px;
}

/* Grupo de área de tarea (p.ej. "En Desarrollo de Software:") */
.task-group {
    margin-bottom: 7px;
}

.task-area {
    font-size:   8.5pt;
    font-weight: bold;
    color:       var(--color-body-text);
    margin-bottom: 2px;
}

.task-group p {
    font-size:   8.5pt;
    text-align:  justify;
    margin-top:  2px;
}

/* Lista con bullets (actividades detalladas) */
.task-list {
    padding-left: 14px;
    margin-top:   4px;
}

.task-list li {
    font-size:     8.5pt;
    margin-bottom: 5px;
    text-align:    justify;
    list-style:    disc;
}

/* Párrafos de ítems de reconocimientos */
#reconocimientos .item-body p {
    font-size:     8.5pt;
    margin-bottom: 4px;
    text-align:    justify;
}

/* ----------------------------------------------------------------
   FIRMA
   ---------------------------------------------------------------- */
.cv-signature {
    margin-top:      36px;
    display:         flex;
    justify-content: center;
    padding-bottom:  20px;
}

.signature-block {
    text-align: center;
}

/* Espacio para firma manuscrita */
.signature-space {
    width:         180px;
    height:        50px;
    border-bottom: 1.5px solid var(--color-body-text);
    margin:        0 auto 6px;
}

.signature-name {
    font-size:    9pt;
    font-weight:  bold;
    color:        var(--color-body-text);
}

.signature-id,
.signature-city {
    font-size: 8.5pt;
    color:     var(--color-muted);
}

/* ================================================================
   RESPONSIVE – ESCRITORIO PRIORITARIO, AJUSTE BÁSICO MÓVIL
   ================================================================ */
@media screen and (max-width: 800px) {
    .cv-container {
        width:  100%;
        margin: 0;
        box-shadow: none;
    }

    .cv-body {
        flex-direction: column;
    }

    .sidebar {
        width:     100%;
        min-width: unset;
    }

    .header-photo {
        width:     100px;
        min-width: 100px;
    }

    .header-name {
        font-size: 16pt;
    }

    .item-meta {
        width:     88px;
        min-width: 88px;
    }
}

/* ================================================================
   ESTILOS DE IMPRESIÓN / EXPORTACIÓN PDF
   ================================================================ */
@media print {
    body {
        background: var(--color-white);
        font-size: 9pt;
    }

    .cv-container {
        width:      100%;
        margin:     0;
        box-shadow: none;
    }

    /* Evitar cortes de página dentro de secciones importantes */
    .section {
        page-break-inside: avoid;
    }

    .cv-item {
        page-break-inside: avoid;
    }

    /* Forzar colores de fondo al imprimir */
    .cv-header,
    .sidebar {
        -webkit-print-color-adjust: exact;
        print-color-adjust:         exact;
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
    }

    .sidebar-title,
    .ref-name,
    .idioma-label,
    .program-group-title {
        color: var(--color-white) !important;
    }

    .sidebar p,
    .ref-company,
    .ref-role,
    .ref-contact,
    .idioma-list li,
    .program-list li,
    .program-sublabel,
    .hobby-list li {
        color: var(--color-primary-text) !important;
    }

    a {
        color: var(--color-accent) !important;
        text-decoration: underline;
    }
}