/* public/assets/css/ms.css */
:root{
    --ms-celeste: #01677B;
    --ms-celeste-claro: #00829B;
    --ms-celeste-oscuro: #014452;
    --ms-celeste-contraste: #ffffff;
    --ms-celeste-enfoque: rgba(1,68,82,0.18);

    --ms-magenta: #BB1353;
    --ms-magenta-claro: #E61566;
    --ms-magenta-oscuro: #82133B;
    --ms-magenta-contraste: #ffffff;
    --ms-magenta-enfoque: rgba(130,19,59,0.18);

    --ms-menta: #1D6931;
    --ms-menta-claro: #228841;
    --ms-menta-oscuro: #124121;
    --ms-menta-contraste: #ffffff;
    --ms-menta-enfoque: rgba(18,65,33,0.18);

    --ms-violeta: #784C94;
    --ms-violeta-claro: #8E66A4;
    --ms-violeta-oscuro: #592672;
    --ms-violeta-contraste: #ffffff;
    --ms-violeta-enfoque: rgba(120,76,148,0.18);

    --ms-uva: #923B73;
    --ms-uva-claro: #AE458B;
    --ms-uva-oscuro: #662951;
    --ms-uva-contraste: #ffffff;
    --ms-uva-enfoque: rgba(148, 76, 112, 0.18);

    --ms-rojo: #A21A18;
    --ms-rojo-claro: #BE1717;
    --ms-rojo-oscuro: #7E1716;
    --ms-rojo-contraste: #ffffff;
    --ms-rojo-enfoque: rgba(148, 76, 76, 0.18);

    --ms-gris: #545453;
    --ms-gris-claro: #797676;
    --ms-gris-oscuro: #141413;
    --ms-gris-contraste: #ffffff;
    --ms-gris-enfoque: rgba(0, 0, 0, 0.18);
}

.btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    border-width: 0.125rem;
    border-style: solid;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

/* Uso: <button class="btn btn-magenta"> */
.btn-magenta{
    --texto: var(--ms-magenta-contraste);
    --fondo: var(--ms-magenta-claro);
    --borde: var(--ms-magenta-claro);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* hover / focus -> usa el dark */
.btn-magenta:hover,
.btn-magenta:focus{
    --fondo: var(--ms-magenta-oscuro);
    --borde: var(--ms-magenta-oscuro);

    background-color: var(--fondo) !important;
    color: var(--texto) !important;
    border-color: var(--borde) !important;

    box-shadow: 0 0 0 .25rem var(--ms-magenta-enfoque);
}

/* active / pressed */
.btn-magenta:active,
.btn-magenta.active{
    --fondo: var(--ms-magenta);
    --borde: var(--ms-magenta);

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: none;
}

/* disabled */
.btn-magenta:disabled,
.btn-magenta.disabled{
    opacity: .65;
    filter: grayscale(.02);
    pointer-events: none;
}

/* variante outline */
.btn-outline-magenta{
    --texto: var(--ms-magenta-claro);
    --fondo: transparent;
    --borde: var(--ms-magenta-claro);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
}

.btn-outline-magenta:hover,
.btn-outline-magenta:focus{
    --fondo: var(--ms-magenta-claro);
    --borde: var(--ms-magenta);
    color: var(--ms-magenta-contraste) !important;

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: 0 0 0 .25rem var(--ms-magenta-enfoque);
}

.btn-outline-magenta:active,
.btn-outline-magenta.active{
    --fondo: var(--ms-magenta);
    --borde: var(--ms-magenta);

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: none;
}

/* Uso: <button class="btn btn-menta"> */
.btn-menta{
    --texto: var(--ms-menta-contraste);
    --fondo: var(--ms-menta-claro);
    --borde: var(--ms-menta);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-menta:hover,
.btn-menta:focus{
    --fondo: var(--ms-menta);
    --borde: var(--ms-menta);

    background-color: var(--fondo) !important;
    color: var(--texto) !important;
    border-color: var(--borde) !important;

    box-shadow: 0 0 0 .25rem var(--ms-menta-enfoque);
}

.btn-menta:active,
.btn-menta.active{
    --fondo: var(--ms-menta);
    --borde: var(--ms-menta);

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: none;
}

.btn-menta:disabled,
.btn-menta.disabled{
    opacity: .65;
    filter: grayscale(.02);
    pointer-events: none;
}

/* variante outline */
.btn-outline-menta{
    --texto: var(--ms-menta-claro);
    --fondo: transparent;
    --borde: var(--ms-menta-claro);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
}

.btn-outline-menta:hover,
.btn-outline-menta:focus{
    --fondo: var(--ms-menta-claro);
    --borde: var(--ms-menta);
    color: var(--ms-menta-contraste) !important;

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: 0 0 0 .25rem var(--ms-menta-enfoque);
}

/* Uso: <button class="btn btn-violeta"> */
.btn-violeta{
    --texto: var(--ms-violeta-contraste);
    --fondo: var(--ms-violeta-claro);
    --borde: var(--ms-violeta);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-violeta:hover,
.btn-violeta:focus{
    --fondo: var(--ms-violeta);
    --borde: var(--ms-violeta);

    background-color: var(--fondo) !important;
    color: var(--texto) !important;
    border-color: var(--borde) !important;

    box-shadow: 0 0 0 .25rem var(--ms-violeta-enfoque);
}

.btn-violeta:active,
.btn-violeta.active{
    --fondo: var(--ms-violeta);
    --borde: var(--ms-violeta);

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: none;
}

.btn-violeta:disabled,
.btn-violeta.disabled{
    opacity: .65;
    filter: grayscale(.02);
    pointer-events: none;
}

/* variante outline */
.btn-outline-violeta{
    --texto: var(--ms-violeta-claro);
    --fondo: transparent;
    --borde: var(--ms-violeta-claro);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
}

.btn-outline-violeta:hover,
.btn-outline-violeta:focus{
    --fondo: var(--ms-violeta-claro);
    --borde: var(--ms-violeta);
    color: var(--ms-violeta-contraste) !important;

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: 0 0 0 .25rem var(--ms-violeta-enfoque);
}

/* Uso: <button class="btn btn-celeste"> */
.btn-celeste{
    --texto: var(--ms-celeste-contraste);
    --fondo: var(--ms-celeste-claro);
    --borde: var(--ms-celeste);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* hover / focus -> usa el dark */
.btn-celeste:hover,
.btn-celeste:focus{
    --fondo: var(--ms-celeste);
    --borde: var(--ms-celeste);

    background-color: var(--fondo) !important;
    color: var(--texto) !important;
    border-color: var(--borde) !important;

    box-shadow: 0 0 0 .25rem var(--ms-celeste-enfoque);
}

/* active / pressed */
.btn-celeste:active,
.btn-celeste.active{
    --fondo: var(--ms-celeste);
    --borde: var(--ms-celeste);

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: none;
}

/* disabled */
.btn-celeste:disabled,
.btn-celeste.disabled{
    opacity: .65;
    filter: grayscale(.02);
    pointer-events: none;
}

/* variante outline */
.btn-outline-celeste{
    --texto: var(--ms-celeste-claro);
    --fondo: transparent;
    --borde: var(--ms-celeste-claro);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
}

.btn-outline-celeste:hover,
.btn-outline-celeste:focus{
    --fondo: var(--ms-celeste-claro);
    --borde: var(--ms-celeste);
    color: var(--ms-celeste-contraste) !important;

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: 0 0 0 .25rem var(--ms-celeste-enfoque);
}

/* Uso: <button class="btn btn-gris"> */
.btn-gris{
    --texto: var(--ms-gris-contraste);
    --fondo: var(--ms-gris-claro);
    --borde: var(--ms-gris);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* hover / focus -> usa el dark */
.btn-gris:hover,
.btn-gris:focus{
    --fondo: var(--ms-gris);
    --borde: var(--ms-gris);

    background-color: var(--fondo) !important;
    color: var(--texto) !important;
    border-color: var(--borde) !important;

    box-shadow: 0 0 0 .25rem var(--ms-gris-enfoque);
}

/* active / pressed */
.btn-gris:active,
.btn-gris.active{
    --fondo: var(--ms-gris);
    --borde: var(--ms-gris);

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: none;
}

/* disabled */
.btn-gris:disabled,
.btn-gris.disabled{
    opacity: .65;
    filter: grayscale(.02);
    pointer-events: none;
}

/* variante outline */
.btn-outline-gris{
    --texto: var(--ms-gris-claro);
    --fondo: transparent;
    --borde: var(--ms-gris-claro);

    color: var(--texto) !important;
    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
}

.btn-outline-gris:hover,
.btn-outline-gris:focus{
    --fondo: var(--ms-gris-claro);
    --borde: var(--ms-gris);
    color: var(--ms-gris-contraste) !important;

    background-color: var(--fondo) !important;
    border-color: var(--borde) !important;
    box-shadow: 0 0 0 .25rem var(--ms-gris-enfoque);
}

.label-field {
    font-weight: bold;
    color: #5f5f5f;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-size: 14px;
    margin-top: 20px;
}

.section-divider {
    hr { background: var(--ms-celeste-claro); }

    strong, i, h6 { color: var(--ms-celeste-claro); }
}

.info-card {
    border-top: 3px solid var(--ms-celeste-claro);
    background-color: rgba(0, 0, 0, 0.10);
}

a.nav-link {
    color: var(--ms-celeste-claro);
}

a.nav-link:hover {
    color: var(--ms-celeste);
}

a.nav-link.disabled {
    color: var(--ms-gris-claro);
}

a.nav-link.completed {
    color: var(--ms-menta-claro);
}

a.nav-link.completed:hover {
    color: var(--ms-menta);
}

a.nav-link.completed::before {
    content: '✔ ';
}

a.nav-link.active {
    color: var(--ms-magenta-claro) !important;
}

a.nav-link.active:hover {
    color: var(--ms-magenta);
}

input[type="radio"]:checked + label {
    border-color: var(--ms-celeste-claro);
    color: var(--ms-celeste-claro);
    font-weight: bold;
}

.dropdown-p .dropdown-item,
.dropdown-p .dropdown-item i {
    color: #212529;
}

.dropdown-p .dropdown-item:hover,
.dropdown-p .dropdown-item:focus,
.dropdown-p .dropdown-item:hover i {
    background-color: var(--ms-celeste) !important;
    color: white !important;
}

/* SweetAlert2 Layout Fix - Prevent footer shift when modal opens */
html.swal2-html-shown {
    overflow: auto !important;
}

body.swal2-shown {
    overflow: visible !important;
    height: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow: visible !important;
    height: 100% !important;
}

.ms-error {
    display: block;
    color: white;
    font-weight: bold;
    background-color: var(--ms-rojo-claro);
    border-radius: 3px;
    padding: 2px 5px;
}

.ms-error:empty {
    display: none !important;
}

select.is-invalid + .select2-container .select2-selection,
select.is-invalid ~ .select2-container .select2-selection,
.select2-container .select2-selection.border-danger,
.select2-container .select2-selection.is-invalid {
    border-color: var(--ms-rojo-claro) !important;
}