/**
 * Base CSS - Paleta Colores UNAP
 * Universidad Arturo Prat
 * v1.0.0
 */

/* ---------------------------------------------
 * Variables del Sistema UNAP
 * --------------------------------------------- */
:root {
    /* Colores Principales */
    --unap-primary: #046cae;
    --unap-secondary: #445267;
    --unap-success: #0faec0;
    --unap-info: #565fa7;
    --unap-warning: #fab736;
    --unap-danger: #b72763;
    --unap-light: #a1c2f3;
    --unap-dark: #083351;

    --unap-primary-variant: #057dcc;

    /* Variantes Claras */
    --unap-primary-light: #e1eeff;
    --unap-secondary-light: #e9ecf2;
    --unap-success-light: #e0f7f8;
    --unap-info-light: #ebedf7;
    --unap-warning-light: #fff2d9;
    --unap-danger-light: #ffe0e8;

    --unap-primary-contrast: #d4e7ff;
    --unap-secondary-contrast: #dfe4ed;
    --unap-success-contrast: #d1f5f7;
    --unap-info-contrast: #e0e3f2;
    --unap-warning-contrast: #ffead6;
    --unap-danger-contrast: #ffd4e0;

    /* Variantes con Opacidad */
    --unap-primary-alpha: rgba(4, 108, 174, 0.4);
    --unap-secondary-alpha: rgba(68, 82, 103, 0.4);
    --unap-success-alpha: rgba(15, 174, 192, 0.4);
    --unap-info-alpha: rgba(86, 95, 167, 0.4);
    --unap-danger-alpha: rgba(183, 39, 99, 0.4);

    /* Gradientes */
    --unap-gradient-primary: linear-gradient(135deg, var(--unap-primary) 0%, var(--unap-success) 100%);
    --unap-gradient-info: linear-gradient(135deg, var(--unap-info) 0%, var(--unap-light) 100%);
    --unap-gradient-warning: linear-gradient(135deg, var(--unap-warning) 0%, #fff0f3 100%);
}

/* ---------------------------------------------
 * Utilidades de Color de Fondo
 * --------------------------------------------- */
/* Colores Base */
.bg-unap-primary { background-color: var(--unap-primary); }
.bg-unap-secondary { background-color: var(--unap-secondary); }
.bg-unap-success { background-color: var(--unap-success); }
.bg-unap-info { background-color: var(--unap-info); }
.bg-unap-warning { background-color: var(--unap-warning); }
.bg-unap-danger { background-color: var(--unap-danger); }
.bg-unap-light { background-color: var(--unap-light); }
.bg-unap-dark { background-color: var(--unap-dark); }

/* Variantes Claras */
.bg-unap-primary-light { background-color: var(--unap-primary-light); }
.bg-unap-secondary-light { background-color: var(--unap-secondary-light); }
.bg-unap-success-light { background-color: var(--unap-success-light); }
.bg-unap-info-light { background-color: var(--unap-info-light); }
.bg-unap-warning-light { background-color: var(--unap-warning-light); }
.bg-unap-danger-light { background-color: var(--unap-danger-light); }

.bg-unap-primary-contrast { background-color: var(--unap-primary-contrast); }
.bg-unap-secondary-contrast { background-color: var(--unap-secondary-contrast); }
.bg-unap-success-contrast { background-color: var(--unap-success-contrast); }
.bg-unap-info-contrast { background-color: var(--unap-info-contrast); }
.bg-unap-warning-contrast { background-color: var(--unap-warning-contrast); }
.bg-unap-danger-contrast { background-color: var(--unap-danger-contrast); }

/* Variantes con Opacidad */
.bg-unap-primary-alpha { background-color: var(--unap-primary-alpha); }
.bg-unap-secondary-alpha { background-color: var(--unap-secondary-alpha); }
.bg-unap-success-alpha { background-color: var(--unap-success-alpha); }
.bg-unap-info-alpha { background-color: var(--unap-info-alpha); }
.bg-unap-danger-alpha { background-color: var(--unap-danger-alpha); }

/* Gradientes */
.bg-unap-gradient-primary { background: var(--unap-gradient-primary); }
.bg-unap-gradient-info { background: var(--unap-gradient-info); }
.bg-unap-gradient-warning { background: var(--unap-gradient-warning); }

/* ---------------------------------------------
 * Utilidades de Borde
 * --------------------------------------------- */
.border-unap-primary { border: 1px solid var(--unap-primary); }
.border-unap-secondary { border: 1px solid var(--unap-secondary); }
.border-unap-success { border: 1px solid var(--unap-success); }
.border-unap-info { border: 1px solid var(--unap-info); }
.border-unap-warning { border: 1px solid var(--unap-warning); }
.border-unap-danger { border: 1px solid var(--unap-danger); }
.border-unap-light { border: 1px solid var(--unap-light); }
.border-unap-dark { border: 1px solid var(--unap-dark); }

.border-unap-primary-contrast { border: 1px solid var(--unap-primary-contrast); }
.border-unap-secondary-contrast { border: 1px solid var(--unap-secondary-contrast); }
.border-unap-success-contrast { border: 1px solid var(--unap-success-contrast); }
.border-unap-info-contrast { border: 1px solid var(--unap-info-contrast); }
.border-unap-warning-contrast { border: 1px solid var(--unap-warning-contrast); }
.border-unap-danger-contrast { border: 1px solid var(--unap-danger-contrast); }

/* ---------------------------------------------
 * Utilidades de Gradiente
 * --------------------------------------------- */
.unap-gradient-primary-to-success {
    background: linear-gradient(135deg, var(--unap-primary) 0%, var(--unap-success) 100%);
}

.unap-gradient-primary-to-info {
    background: linear-gradient(135deg, var(--unap-primary) 0%, var(--unap-info) 100%);
}

.unap-gradient-info-to-light {
    background: linear-gradient(135deg, var(--unap-info) 0%, var(--unap-light) 100%);
}

.unap-gradient-warning-to-light {
    background: linear-gradient(135deg, var(--unap-warning) 0%, var(--unap-light) 100%);
}

.unap-gradient-danger-to-warning {
    background: linear-gradient(135deg, var(--unap-danger) 0%, var(--unap-warning) 100%);
}

.unap-gradient-dark-to-primary {
    background: linear-gradient(135deg, var(--unap-dark) 0%, var(--unap-primary) 100%);
}

/* Gradientes horizontales */
.unap-gradient-primary-to-success-x {
    background: linear-gradient(90deg, var(--unap-primary) 0%, var(--unap-success) 100%);
}

.unap-gradient-primary-to-info-x {
    background: linear-gradient(90deg, var(--unap-primary) 0%, var(--unap-info) 100%);
}

.unap-gradient-info-to-light-x {
    background: linear-gradient(90deg, var(--unap-info) 0%, var(--unap-light) 100%);
}

/* Gradientes verticales */
.unap-gradient-primary-to-success-y {
    background: linear-gradient(180deg, var(--unap-primary) 0%, var(--unap-success) 100%);
}

.unap-gradient-primary-to-info-y {
    background: linear-gradient(180deg, var(--unap-primary) 0%, var(--unap-info) 100%);
}

.unap-gradient-info-to-light-y {
    background: linear-gradient(180deg, var(--unap-info) 0%, var(--unap-light) 100%);
}

/* ---------------------------------------------
 * Utilidades de Color de Texto
 * --------------------------------------------- */
.text-unap-primary { color: var(--unap-primary); }
.text-unap-secondary { color: var(--unap-secondary); }
.text-unap-success { color: var(--unap-success); }
.text-unap-info { color: var(--unap-info); }
.text-unap-warning { color: var(--unap-warning); }
.text-unap-danger { color: var(--unap-danger); }
.text-unap-light { color: var(--unap-light); }
.text-unap-dark { color: var(--unap-dark); }
.text-unap-primary-variant { color: var(--unap-primary-variant); }

.text-unap-primary-contrast { color: var(--unap-primary-contrast); }
.text-unap-secondary-contrast { color: var(--unap-secondary-contrast); }
.text-unap-success-contrast { color: var(--unap-success-contrast); }
.text-unap-info-contrast { color: var(--unap-info-contrast); }
.text-unap-warning-contrast { color: var(--unap-warning-contrast); }
.text-unap-danger-contrast { color: var(--unap-danger-contrast); }

.navbar-item {
    background-color: var(--unap-primary);
     transition: color 0.3s;
}

.navbar-item:hover {
    color: var(--unap-primary-light);
    background-color: var(--unap-dark);
     transform: scale(1.05);
}

.arrow-carrusel {
    background-color: var(--unap-primary);
    transition: color 0.3s;
}

.arrow-carrusel:hover {
    color: var(--unap-primary-light);
    background-color: var(--unap-info);
}

.articulo-contenido > *:first-child {
    margin-top: 0;
}
.articulo-contenido h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    margin-top: 2rem; /* 32px */
    margin-bottom: 1rem; /* 16px */
    color: #1f2937; /* gray-800 */
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}
.articulo-contenido h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    margin-top: 1.5rem; /* 24px */
    margin-bottom: 0.5rem; /* 8px */
    color: #374151; /* gray-700 */
}
.articulo-contenido p {
    margin-bottom: 1.25rem; /* 20px */
    line-height: 1.75;
    color: #374151; /* gray-700 */
}
.articulo-contenido ul {
    list-style-type: disc;
    margin-left: 1.5rem; /* 24px */
    margin-bottom: 1.25rem; /* 20px */
}
.articulo-contenido ol {
    list-style-type: decimal;
    margin-left: 1.5rem; /* 24px */
    margin-bottom: 1.25rem; /* 20px */
}
.articulo-contenido li {
    margin-bottom: 0.5rem; /* 8px */
}
.articulo-contenido a {
    color: #046cae;
    text-decoration: underline;
}
.articulo-contenido a:hover {
    color: #035a8a;
}
.articulo-contenido blockquote {
    border-left: 4px solid #d1d5db; /* gray-300 */
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #4b5563; /* gray-600 */
}
.articulo-contenido strong {
    font-weight: 600;
    color: #1f2937;
}

/* Iconos personalizadps */
.icon-nexus-n {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('../img/icons/Nexus_N_transparent.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.icon-robotic-n {
    display: inline-block;
    width: 48px;
    height: 40px;
    background-image: url('../img/icons/robotic.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.icon-ca-unap-n {
    display: inline-block;
    width: 70px;
    height: 40px;
    background-image: url('../img/icons/campus_unap_logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Footer */
footer {
    background-color: var(--unap-secondary);
    text-align: center;
    padding: 10px 10px;
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.footer-content {
    display: flex;
    justify-content: center; /* Centra el contenido del footer */
    align-items: center;
    width: 100%;
}

.logo {
    max-height: 40px;
    height: auto;
    display: block;
}
.texto-footer{
    font-family: Montserrat, sans-serif;
    color: white;
    margin-left: 10px;
    padding: 5px;
}

/* Admin Panel */
.admin-wrapper {
    --unap-primary: #046cae;
    --unap-secondary: #445267;
    --unap-success: #0faec0;
    --unap-info: #565fa7;
    --unap-warning: #fab736;
    --unap-danger: #b72763;
    --unap-light: #a1c2f3;
    --unap-dark: #083351;
    font-family: 'Montserrat',sans-serif;
}
/* Estilo para el enlace activo en el menú de navegación */
.router-link-exact-active {
    background-color: var(--unap-primary);
    color: white;
    font-weight: 600;
}
.router-link-exact-active:hover {
    background-color: var(--unap-primary);
}

.font-mont {
    font-family: 'Montserrat',sans-serif;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    footer {
        padding: 4px;
    }

    footer p {
        font-size: 11px;
    }

    .logo {
        max-height: 40px;
    }
}

@media (max-width: 576px) {
    footer {
        padding: 3px;
    }

    footer p {
        font-size: 10px;
    }

    .logo {
        max-height: 30px;
    }
}