/* ---------------------------------------------
 * Base Paleta colores UNAP
 * --------------------------------------------- */

/* Añadido por Felix Guerrero*/
/* Paleta de colores */
/**
 * 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;

    /* Variantes Claras */
    --unap-primary-light: #0596f1;
    --unap-secondary-light: #7f9cc9;
    --unap-success-light: #38cbd7;
    --unap-info-light: #7683e7;
    --unap-warning-light: #ffd48a;
    --unap-danger-light: #f33255;

    /* 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-warning-alpha: rgba(250, 183, 54, 0.43);
    --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); }

/* 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); }

/* ---------------------------------------------
 * 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-white { color: white; }
.text-unap-black { color: black; }
.text-unap-gray { color: gray; }
.text-unap-muted { color: #6c757d; }


/* Estilos base para botones */
[class*="btn-unap"] {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Botones sólidos */
.btn-unap-primary {
    background-color: var(--unap-primary);
    color: white;
    border: 1px solid var(--unap-primary);
}

.btn-unap-secondary {
    background-color: var(--unap-secondary);
    color: white;
    border: 1px solid var(--unap-secondary);
}

.btn-unap-success {
    background-color: var(--unap-success);
    color: white;
    border: 1px solid var(--unap-success);
}

.btn-unap-info {
    background-color: var(--unap-info);
    color: white;
    border: 1px solid var(--unap-info);
}

.btn-unap-warning {
    background-color: var(--unap-warning);
    color: var(--unap-dark);
    border: 1px solid var(--unap-warning);
}

.btn-unap-danger {
    background-color: var(--unap-danger);
    color: white;
    border: 1px solid var(--unap-danger);
}

.btn-unap-light {
    background-color: var(--unap-light);
    color: var(--unap-dark);
    border: 1px solid var(--unap-light);
}

.btn-unap-dark {
    background-color: var(--unap-dark);
    color: white;
    border: 1px solid var(--unap-dark);
}

/* Botones outline */
.btn-unap-ol-primary {
    background-color: transparent;
    color: var(--unap-primary);
    border: 1px solid var(--unap-primary);
}

.btn-unap-ol-secondary {
    background-color: transparent;
    color: var(--unap-secondary);
    border: 1px solid var(--unap-secondary);
}

.btn-unap-ol-success {
    background-color: transparent;
    color: var(--unap-success);
    border: 1px solid var(--unap-success);
}

.btn-unap-ol-info {
    background-color: transparent;
    color: var(--unap-info);
    border: 1px solid var(--unap-info);
}

.btn-unap-ol-warning {
    background-color: transparent;
    color: var(--unap-warning);
    border: 1px solid var(--unap-warning);
}

.btn-unap-ol-danger {
    background-color: transparent;
    color: var(--unap-danger);
    border: 1px solid var(--unap-danger);
}

.btn-unap-ol-light {
    background-color: transparent;
    color: var(--unap-light);
    border: 1px solid var(--unap-light);
}

.btn-unap-ol-dark {
    background-color: transparent;
    color: var(--unap-dark);
    border: 1px solid var(--unap-dark);
}

.btn-unap-success-solid-outline {
    background-color: var(--unap-success);
    color: var(--unap-primary-light);
    border: 1px solid var(--unap-success);
    transition: background-color 0.3s, color 0.3s;
}

.btn-unap-success-solid-outline:hover {
    background-color: var(--unap-primary-light);
    color: var(--unap-success);
}

/* Hover estados para botones sólidos - usando variantes alpha */
.btn-unap-primary:hover {
    background-color: var(--unap-primary-light);
    border-color: var(--unap-primary-alpha);
    color: white;
}

.btn-unap-secondary:hover {
    background-color: var(--unap-secondary-light);
    border-color: var(--unap-secondary-alpha);
    color: white;
}

.btn-unap-success:hover {
    background-color: var(--unap-success-light);
    border-color: var(--unap-success-alpha);
    color: white;
}

.btn-unap-info:hover {
    background-color: var(--unap-info-light);
    border-color: var(--unap-info-alpha);
    color: white;
}

.btn-unap-warning:hover {
    background-color: var(--unap-warning-light);
    border-color: var(--unap-warning-alpha);
    color: white;
}

.btn-unap-danger:hover {
    background-color: var(--unap-danger-light);
    border-color: var(--unap-danger-alpha);
    color: white;
}

/* Hover estados para botones outline - usando variantes light */
.btn-unap-ol-primary:hover {
    background-color: var(--unap-primary-light);
    color: white;
}

.btn-unap-ol-secondary:hover {
    background-color: var(--unap-secondary-light);
    color: white;
}

.btn-unap-ol-success:hover {
    background-color: var(--unap-success-light);
    color: white;
}

.btn-unap-ol-info:hover {
    background-color: var(--unap-info-light);
    color: white;
}

.btn-unap-ol-warning:hover {
    background-color: var(--unap-warning-light);
    color: white;
}

.btn-unap-ol-danger:hover {
    background-color: var(--unap-danger-light);
    color: white;
}

/* Estados deshabilitados */
[class*="btn-unap"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ---------------------------------------------
 * Fin base Paleta colores UNAP
 * --------------------------------------------- */

/* ---------------------------------------------
 * micro-estilos
/* --------------------------------------------- */

.w-100 { max-width: 100rem; }
.w-120 { max-width: 120rem; }
.w-130 { max-width: 130rem; }
.w-150 { max-width: 150rem; }
.w-180 { max-width: 180rem; }
.w-200 { max-width: 200rem; }

.max-w-100 { max-width: 100rem; }
.max-w-120 { max-width: 120rem; }
.max-w-130 { max-width: 130rem; }
.max-w-150 { max-width: 150rem; }
.max-w-180 { max-width: 180rem; }
.max-w-200 { max-width: 200rem; }

/* Centra los elementos horizontalmente con espacio alrededor */
.flex-center-nowrap-around {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

/* Centra los elementos horizontalmente con espacio entre ellos */
.flex-center-nowrap-between {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

/* Centra los elementos horizontalmente y los alinea al inicio del contenedor */
.flex-start-nowrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.flex-center-nowrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

/* Centra los elementos horizontalmente y los alinea al final del contenedor */
.flex-end-nowrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* Centra los elementos horizontalmente y verticalmente */
.flex-center-nowrap-both {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/* Centra los elementos horizontalmente con espacio alrededor */
.flex-center-wrap-around {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* Centra los elementos horizontalmente con espacio entre ellos */
.flex-center-wrap-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Centra los elementos horizontalmente y los alinea al inicio del contenedor */
.flex-start-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.flex-center-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Centra los elementos horizontalmente y los alinea al final del contenedor */
.flex-end-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Centra los elementos horizontalmente y verticalmente */
.flex-center-wrap-both {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}