@import url(https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600&display=swap);
:root {
    /* ---- Tipografia ---- */
    --fuente-principal: 'Encode Sans', sans-serif;

    /* ---- Colores Primarios ---- */
    --primario: #152456;
    --primario-oscuro: #101B40;
    --primario-suave: #CFCFE5;
    --primario-claro: #E2E2F2;

    /* ---- Colores Secundarios ---- */
    --secundario: #FCB900;
    --secundario-oscuro: #E2A602;
    --secundario-suave: #FCDB7E;
    --secundario-claro: #FCEFCA;

    /* ---- Neutros ---- */
    --neutro-900: #0E0C34;
    --neutro-700: #3E3D5D;
    --neutro-500: #6E6E87;
    --neutro-300: #CFD0D8;
    --neutro-100: #F4F4F4;
    --neutro-0: #FEFEFE;

    /* ---- Colores de Sistema ---- */
    --exito: #43BD47;
    --exito-oscuro: #359939;
    --exito-suave: #CEF2DD;
    --exito-claro: #ECFDF3;

    --error: #FF647C;
    --error-oscuro: #FF647C;
    --error-suave: #FFB2B2;
    --error-claro: #FFE3E7;

    --alerta: #F99E4E;
    --alerta-oscuro: #E5842E;
    --alerta-suave: #FFDBBC;
    --alerta-claro: #FFF2E6;

    --info: #3B93F7;
    --info-oscuro: #1D4DB0;
    --info-suave: #cbd8ef;
    --info-claro: #e2e6f0;
    /* ---- Tama�os de Boton ---- */
    --btn-radio: 8px;

    /* XL */
    --btn-xl-alto: 48px;
    --btn-xl-padding-y: 13px;
    --btn-xl-padding-x: 24px;
    --btn-xl-fuente: 16px;
    --btn-xl-icono: 22px;
    --btn-xl-gap: 4px;
    --btn-xl-icono-padding-x: 16px;

    /* L */
    --btn-lg-alto: 40px;
    --btn-lg-padding-y: 9px;
    --btn-lg-padding-x: 24px;
    --btn-lg-fuente: 16px;
    --btn-lg-icono: 22px;
    --btn-lg-gap: 4px;
    --btn-lg-icono-padding-x: 16px;

    /* M */
    --btn-md-alto: 38px;
    --btn-md-padding-y: 8px;
    --btn-md-padding-x: 16px;
    --btn-md-fuente: 14px;
    --btn-md-icono: 20px;
    --btn-md-gap: 4px;
    --btn-md-icono-padding-x: 12px;

    /* S */
    --btn-sm-alto: 32px;
    --btn-sm-padding-y: 5px;
    --btn-sm-padding-x: 16px;
    --btn-sm-fuente: 14px;
    --btn-sm-icono: 20px;
    --btn-sm-gap: 2px;
    --btn-sm-icono-padding-x: 8px;
}

.btn-incaa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-principal);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--btn-radio);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-text-decoration: none;
    white-space: normal;
    word-break: break-word;
    height: auto;
    line-height: 120%;
    letter-spacing: 0%;
    gap: 0;
}
.btn-incaa:active {
    box-shadow:
        inset 2px 2px 10px -2px rgba(0, 0, 0, 0.25),
        inset -2px -2px 10px -2px rgba(0, 0, 0, 0.25),
        inset 2px -2px 10px -2px rgba(0, 0, 0, 0.15),
        inset -2px 2px 10px -2px rgba(0, 0, 0, 0.15) !important;
    outline-offset: -3px !important;
}
.btn-incaa:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: 2px;
}
@media (max-width: 767.98px) {
    .btn-incaa {
        width: 100% !important;
        text-align: center;
    }
}


/*TAMA�OS*/
.boton-xl {
    min-height: var(--btn-xl-alto);
    padding: var(--btn-xl-padding-y) var(--btn-xl-padding-x);
    font-size: var(--btn-xl-fuente);
    height: auto;
}

.boton-lg {
    min-height: var(--btn-lg-alto);
    padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
    font-size: var(--btn-lg-fuente);
    height: auto;
}

.boton-md {
    min-height: var(--btn-md-alto);
    padding: var(--btn-md-padding-y) var(--btn-md-padding-x);
    font-size: var(--btn-md-fuente);
    height: auto;
}

.boton-sm {
    min-height: var(--btn-sm-alto);
    padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
    font-size: var(--btn-sm-fuente);
    height: auto;
    font-weight: 400;
}

/* ---- Tama�os Compuestos (con �cono) ---- */
.btn-compuesto {
    gap: var(--btn-md-gap);
}

.btn-compuesto.boton-xl {
    padding: var(--btn-xl-padding-y) var(--btn-xl-icono-padding-x);
    gap: var(--btn-xl-gap);
}

.btn-compuesto.boton-lg {
    padding: var(--btn-lg-padding-y) var(--btn-lg-icono-padding-x);
    gap: var(--btn-lg-gap);
}

.btn-compuesto.boton-md {
    padding: var(--btn-md-padding-y) var(--btn-md-icono-padding-x);
    gap: var(--btn-md-gap);
}

.btn-compuesto.boton-sm {
    padding: var(--btn-sm-padding-y) var(--btn-sm-icono-padding-x);
    gap: var(--btn-sm-gap);
}

/* iconos dentro de botones compuestos */
.btn-compuesto .btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-compuesto.boton-xl .btn-icono,
.btn-compuesto.boton-lg .btn-icono {
    width: var(--btn-xl-icono);
    height: var(--btn-xl-icono);
}

.btn-compuesto.boton-md .btn-icono,
.btn-compuesto.boton-sm .btn-icono {
    width: var(--btn-md-icono);
    height: var(--btn-md-icono);
}

.btn-compuesto .btn-icono svg {
    width: 100%;
    height: 100%;
}


/* PRIMARIO*/

/* --- clasico --- */
.btn-primario {
    background-color: var(--primario);
    color: var(--neutro-0) !important;
    border-color: var(--primario);
}
.btn-primario:hover {
    background-color: var(--primario-oscuro);
    border-color: var(--primario-oscuro);
}


/* --- verde --- */
.btn-primario-success {
    background-color: var(--exito);
    color: var(--neutro-0) !important;
    border-color: var(--exito);
}
.btn-primario-success:hover {
    background-color: var(--exito-oscuro);
    border-color: var(--exito-oscuro);
}


/* --- rojo--- */
.btn-primario-error {
    background-color: var(--error);
    color: var(--neutro-0) !important;
    border-color: var(--error);
}
.btn-primario-error:hover {
    background-color: var(--error-oscuro);
    border-color: var(--error-oscuro);
}


/* --- alerta --- */
.btn-primario-alerta {
    background-color: var(--alerta);
    color: var(--neutro-0) !important;
    border-color: var(--alerta);
}
.btn-primario-alerta:hover {
    background-color: var(--alerta-oscuro);
    border-color: var(--alerta-oscuro);
}


/* --- desactivado --- */
.btn-primario-disabled,
.btn-primario:disabled {
    background-color: var(--neutro-300);
    color: var(--neutro-500) !important;
    border-color: var(--neutro-300);
    cursor: not-allowed;
    pointer-events: none;
}


/*SECUNDARIO*/

/* --- clasico --- */
.btn-secundario {
    background-color: var(--primario-claro);
    color: var(--primario) !important;
    border-color: var(--primario-claro);
}
.btn-secundario:hover {
    background-color: var(--primario-suave);
    border-color: var(--primario-suave);
}


/* --- verde --- */
.btn-secundario-success {
    background-color: var(--exito-suave);
    color: var(--exito-oscuro) !important;
    border-color: var(--exito-suave);
}
.btn-secundario-success:hover {
    background-color: var(--exito-claro);
    border-color: var(--exito-claro);
}
.btn-secundario-info {
    background-color: var(--info-suave);
    color: var(--info-oscuro) !important;
    border-color: var(--info-suave);
}
.btn-secundario-info:hover {
    background-color: var(--info-claro);
    border-color: var(--info-claro);
}

/* --- rojo --- */
.btn-secundario-error {
    background-color: var(--error-claro);
    color: var(--error-oscuro) !important;
    border-color: var(--error-claro);
}
.btn-secundario-error:hover {
    background-color: var(--error-suave);
    border-color: var(--error-suave);
}

/* --- alerta --- */
.btn-secundario-alerta {
    background-color: var(--alerta-suave);
    color: var(--alerta-oscuro) !important;
    border-color: var(--alerta-suave);
}
.btn-secundario-alerta:hover {
    background-color: var(--alerta-claro);
    border-color: var(--alerta-claro);
}


/* --- desactivado --- */
.btn-secundario-disabled,
.btn-secundario:disabled {
    background-color: var(--neutro-100);
    color: var(--neutro-500) !important;
    border-color: var(--neutro-100);
    cursor: not-allowed;
    pointer-events: none;
}


/* OUTLINED */

/* --- clasico--- */
.btn-outlined-primario {
    background-color: var(--primario-claro);
    color: var(--primario) !important;
    border-color: var(--primario);
}
.btn-outlined:hover {
    background-color: var(--primario-claro);
    border-color: var(--primario-oscuro);
    color: var(--primario-oscuro);
}


/* --- verde --- */
.btn-outlined-success {
    background-color: var(--exito-claro);
    color: var(--exito) !important;
    border-color: var(--exito);
}
.btn-outlined-success:hover {
    background-color: var(--exito-claro);
    border-color: var(--exito-oscuro);
    color: var(--exito-oscuro);
}
.btn-outlined-info {
    background-color: var(--info-claro);
    color: var(--info) !important;
    border-color: var(--info);
}
.btn-outlined-info:hover {
    background-color: var(--info-claro);
    color: var(--info-oscuro);
    border-color: var(--info-oscuro);
}

/* --- rojo --- */
.btn-outlined-error {
    background-color: var(--error-claro);
    color: var(--error) !important;
    border-color: var(--error);
}
.btn-outlined-error:hover {
    background-color: var(--error-claro);
    border-color: var(--error-oscuro);
    color: var(--error-oscuro);
}


/* --- alerta --- */
.btn-outlined-alerta {
    background-color: var(--alerta-claro);
    color: var(--alerta) !important;
    border-color: var(--alerta);
}
.btn-outlined-alerta:hover {
    background-color: var(--alerta-claro);
    border-color: var(--alerta-oscuro);
    color: var(--alerta-oscuro);
}


/* --- desactivado--- */
.btn-outlined-disabled,
.btn-outlined:disabled {
    background-color: var(--neutro-100);
    color: var(--neutro-500) !important;
    border-color: var(--neutro-300);
    cursor: not-allowed;
    pointer-events: none;
}


/* TEXTO*/

/* ---clasico--- */
.btn-texto {
    background-color: transparent;
    color: var(--primario) !important;
    border-color: transparent;
}
.btn-texto:hover {
    background-color: var(--primario-claro);
}


/* --- verde --- */
.btn-texto-success {
    background-color: transparent;
    color: var(--exito-oscuro) !important;
    border-color: transparent;
}
.btn-texto-success:hover {
    background-color: var(--exito-claro);
}


/* --- rojo --- */
.btn-texto-error {
    background-color: transparent;
    color: var(--error-oscuro) !important;
    border-color: transparent;
}
.btn-texto-error:hover {
    background-color: var(--error-claro);
}


/* --- alerta --- */
.btn-texto-alerta {
    background-color: transparent;
    color: var(--alerta-oscuro) !important;
    border-color: transparent;
}
.btn-texto-alerta:hover {
    background-color: var(--alerta-claro);
}


/* --- desactivado --- */
.btn-texto-disabled,
.btn-texto:disabled {
    background-color: transparent;
    color: var(--neutro-500) !important;
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
}