/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   CSS MÍNIMO
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Variables de color, pseudo-elementos, gradientes, transiciones
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~ Variables de color: modo claro ~~~~~~~~~~ */
:root {
    --bg-main: #FAF7F2;
    --surface-card: rgba(238, 237, 235, 0.8);
    --accent-primary: #C9B8D8;
    --accent-secondary: #E0D4ED;
    --text-primary: #3D3535;
    --text-secondary: #7A6E6E;
    --nav-bg: rgba(250, 247, 242, 0.8);
    --border-color: rgba(102, 89, 117, 0.2);
    --input-bg: #FFFFFF;
    --meta-color: #8A7B99;
    --gradient-end: #C9B8D8;

}

/* ~~~~~~~~~~ Variables de color: modo oscuro ~~~~~~~~~~ */
body.dark {
    --bg-main: #1E1520;
    --surface-card: #2C1F35;
    --accent-primary: #D4C0E8;
    --accent-secondary: #4A3A47;
    --text-primary: #F2E8F5;
    --text-secondary: #A090B0;
    --nav-bg: rgba(30, 21, 32, 0.8);
    --border-color: rgba(212, 192, 232, 0.35);
    --input-bg: #3A2D45;
    --meta-color: #D4C0E8;
    --gradient-end: #2E1F3D;

}

/* ~~~~~~~~~~ Gradiente de fondo del body ~~~~~~~~~~ */
body {
    background-image: radial-gradient(125% 125% at 50% 0%, var(--bg-main) 50%, var(--gradient-end) 100%);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ~~~~~~~~~~ Navegación: backdrop-filter ~~~~~~~~~~ */
.barra-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ~~~~~~~~~~ Indicador del enlace activo (pseudo-elemento) ~~~~~~~~~~ */
.nav-activo::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-primary);
}

/* ~~~~~~~~~~ Línea vertical de la línea de tiempo (pseudo-elemento) ~~~~~~~~~~ */
.linea-tiempo::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(201, 184, 216, 0.3);
}

/* ~~~~~~~~~~ Material Symbols ~~~~~~~~~~ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ~~~~~~~~~~ Line clamp para descripciones de proyecto ~~~~~~~~~~ */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ~~~~~~~~~~ Footer: fondo sólido para legibilidad ~~~~~~~~~~ */
body.dark footer {
    background-color: var(--bg-main);
}