@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;700;900&display=swap');


:root {
    --brand-orange: 16 100% 50%;

    --primary-50: 31 100% 97%;
    --primary-100: 34 100% 92%;
    --primary-200: 32 98% 83%;
    --primary-400: 27 96% 61%;
    --primary-500: 16 100% 62%;
    --primary-600: 17 88% 48%;
    --primary-800: 13 71% 34%;
    --primary-900: 12 76% 28%;

    --secondary-50: 270 100% 98%;
    --secondary-100: 270 100% 95%;
    --secondary-200: 270 91% 88%;
    --secondary-300: 258 90% 84%;
    --secondary-400: 258 90% 76%;
    --secondary-700: 263 70% 50%;
    --secondary-900: 268 85% 34%;

    --neutral-0: 0 0% 100%;
    --neutral-50: 210 40% 98%;
    --neutral-100: 214 32% 95%;
    --neutral-200: 214 32% 91%;
    --neutral-300: 213 27% 84%;
    --neutral-400: 215 20% 65%;
    --neutral-700: 215 25% 27%;
    --neutral-800: 217 33% 17%;
    --neutral-900: 222 47% 11%;

    --success: 152 76% 29%;

    --background: var(--neutral-50);
    --foreground: var(--neutral-900);

    --card: var(--neutral-0);
    --card-foreground: var(--neutral-900);

    --popover: var(--neutral-0);
    --popover-foreground: var(--neutral-900);

    --primary: var(--primary-900);
    --primary-foreground: var(--neutral-0);

    --secondary: var(--neutral-100);
    --secondary-foreground: var(--primary-900);

    --muted: var(--neutral-100);
    --muted-foreground: var(--neutral-400);

    --accent: var(--neutral-100);
    --accent-foreground: var(--primary-900);

    --destructive: 0 84% 60%;
    --destructive-foreground: var(--neutral-0);

    --border: var(--neutral-200);
    --input: var(--neutral-200);
    --ring: var(--primary-900);

    --radius: 0.5625rem;


}

body.swal2-height-auto {
    height: 100vh !important;
}

.search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_2002_2224' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2002_2224)'%3E%3Cpath d='M19.8 20.9832L13.3168 14.5C12.8168 14.9222 12.2364 15.2527 11.5758 15.4917C10.9151 15.7306 10.2121 15.85 9.46675 15.85C7.65942 15.85 6.12975 15.2236 4.87775 13.9707C3.62592 12.7181 3 11.2001 3 9.41675C3 7.63341 3.62642 6.11533 4.87925 4.8625C6.13192 3.60966 7.65275 2.98325 9.44175 2.98325C11.2306 2.98325 12.7486 3.60966 13.9958 4.8625C15.2431 6.11533 15.8668 7.63425 15.8668 9.41925C15.8668 10.1397 15.7501 10.8306 15.5168 11.4917C15.2834 12.1527 14.9445 12.7611 14.5 13.3167L21 19.7832L19.8 20.9832ZM9.45 14.1832C10.7695 14.1832 11.891 13.718 12.8145 12.7875C13.7382 11.857 14.2 10.7334 14.2 9.41675C14.2 8.10008 13.7382 6.97641 12.8145 6.04575C11.891 5.11525 10.7695 4.65 9.45 4.65C8.12133 4.65 6.99192 5.11525 6.06175 6.04575C5.13175 6.97641 4.66675 8.10008 4.66675 9.41675C4.66675 10.7334 5.13175 11.857 6.06175 12.7875C6.99192 13.718 8.12133 14.1832 9.45 14.1832Z' fill='%231F2937'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    padding-left: 2.5rem !important;
}


#navbar:not(.nav-open) #nav-collapse {
    position: absolute;
}

#navbar.nav-open {
    width: 20rem;
}

#navbar.nav-open .navbar-collapsed-show {
    display: none;
}

#navbar:not(.nav-open) .navbar-open-show {
    display: none;
}



/* --- Overlay --- */
#filterOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 998;
}

#sidenavOverlay {
    --right: 100%;
    position: relative;
    top: 0;
    right: calc(-1 * var(--right));
    min-width: min(100vw, 500px);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh; /* móvil: descuenta la barra del navegador para no cortar el fondo */
    overflow-x: hidden;
    transition: right 0.3s ease;
    z-index: 999;
}

.overlayContainer {
    visibility: hidden;
    transition: visibility 0.3s;
}

html.sidenav-open {
    overflow: hidden;
}

.sidenav-open {
    & .overlayContainer {
        visibility: visible;
    }

    & #filterOverlay {
        opacity: 1;
        visibility: visible;
    }

    & #sidenavOverlay {
        right: 0;
    }
}

.dropdown-bottom {
    top: 100%;
    left: 0;
}

.dropdown-top {
    bottom: 100%;
    left: 0;
}

.dropdown-left {
    right: 0;
    left: auto;
}

.dropdown-right {
    left: 0;
    right: auto;
}

.dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    outline: none;
}

.dropdown-item:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.dropdown-item:focus {
    background-color: #f3f4f6;
    color: #111827;
    outline: none;
}

.dropdown-chevron {
    transition: all 0.3s ease;
    height: 100%;
    width: 100%;
    position: relative;
    padding-top: 13.33%;
}

div:has(> [data-dropdown]:not(.hidden))>[data-toggle="dropdown"] .dropdown-chevron {
    transform: rotate(180deg);

    padding-top: 26.66%;
}






.multicard-row.label {
    padding-right: 2rem;

    &:nth-last-child(2) {
        border-bottom-width: 0px;
    }
}


.multicard-row {
    min-width: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
    border-top-width: 1px;
    border-color: #cbd5e1;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;

    &:first-of-type {
        border-top-width: 0px;
    }
}



.multicard {
    &:has(.multicard-header-avatar) {
        margin-top: 4rem;
    }
}

.button {
    --bg: #fb923c;
    --border: #b45309;
    --text: #7c2d12;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 2.25rem;
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 200ms;
    border-radius: 0.5rem;
    border-width: 1px;
    text-align: center;
    flex: 1 1 0%;
    white-space: nowrap;

    background-color: var(--bg);
    border-color: var(--border);
    color: var(--text);


    &:hover {
        --bg: #f97316;
    }

    &:active {
        --bg: #ea580c;
    }
}

.button.light {
    --bg: #ffedd5;
    --border: #fb923c;
    --text: #7c2d12;

    &:hover {
        --bg: #fed7aa;
    }

    &:active {
        --bg: #fdba74;
    }
}

.button.success {
    --bg: #dcfce7;
    --border: #16a34a;
    --text: #166534;

    &:hover {
        --bg: #bbf7d0;
    }

    &:active {
        --bg: #86efac;
    }
}


.button.disabled {
    --bg: #f1f5f9;
    --border: #94a3b8;
    --text: #0f172a;
    pointer-events: none;
    opacity: 0.5;
}



div:has(> .card) {
    max-height: max-content;
}




/*- iconos / colores de areas -*/

:root {
    --areaColor: #9267DC;
    --areaTextColor: #fff;
    --fa-icon: "";

    --fallbackbg: linear-gradient(135deg, var(--areaColor) 0%, var(--areaColor) 50%,
            color-mix(in srgb, var(--areaColor) 40%, white) 50%,
            color-mix(in srgb, var(--areaColor) 40%, white) 100%);
}



.badge-area::before {
    content: var(--fa-icon);
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.area-icon-before::before {
    content: var(--fa-icon);
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.25em;
}

.area-afi {
    --areaColor: #ff9100;
    --fa-icon: "\f5a2";
}

.area-arteycultura {
    --areaColor: #288a4a;
    --fa-icon: "\f1fc";
}

.area-pastoral,
.area-pastoraluniversitaria {
    --areaColor: #ffe9b1;
    --fa-icon: "\f654";
}

.area-compromisosocial {
    --areaColor: #0F66AB;
    --fa-icon: "\f4c4";
}


.area-deportes {
    --areaColor: #ff5900;
    --fa-icon: "\f44e";
}

.area-bloqueanahuacelectivo {
    --areaColor: #ff5900;
    --fa-icon: "\f02d";
}

.area-cae,
.area-centrodeatencionestudiantil {
    --areaColor: #9400c5;
    --fa-icon: "\f004";
}

.area-cafi,
.area-formacionintegral {
    --areaColor: #cc5500;
    --fa-icon: "\f19d";
}

.area-mentorias {
    --areaColor: #288a4a;
    --fa-icon: "\f51c";
}

.area-programasdeliderazgoyexcelencia {
    --areaColor: #ff5900;
    --fa-icon: "\f19d";
}

.area-relacionesestudiantiles {
    --areaColor: #0069a3;
    --fa-icon: "\f19c";
}

.area-rutadeliderazgo {
    --areaColor: #5D428C;
    --fa-icon: "\f6ec";
}

[data-afi="0"] {
    display: none;
}


/* calendar */

.calendar-cell {
    --cell-padding: min(0.75rem, 2vh);
    padding-top: var(--cell-padding);
    padding-bottom: var(--cell-padding);

    padding-left: 0.75rem;
    padding-right: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    border-right: 1px solid rgb(100 116 139);
    border-bottom: 1px solid rgb(100 116 139);

    position: relative;
    min-height: 0;
    max-height: 8rem;
    line-height: 1;
    font-size: min(1rem, max(0.875rem, 2.75vh));


    &:hover {
        background-color: rgb(248 250 252);
    }


    &:nth-child(7n) {
        border-right: none;
    }

    &:nth-last-child(-n + 7) {
        border-bottom: none;
    }

    &.has-event {
        background-color: #fed7aa;

        &:hover {
            background-color: #ffedd5;
        }
    }

    &.selected {
        background-color: #7c2d12;
        color: #fff7ed;

        &:hover {
            background-color: #9a3412;
        }
    }
}

.cell-disabled {
    color: rgb(148 163 184);
    background-color: rgb(226 232 240);
}

.calendar-day {
    --padding: 0.1875rem;
    margin-bottom: calc(-1 * var(--padding));
    align-self: flex-start;
    line-height: 1;
    padding: var(--padding);
    padding-bottom: calc(var(--padding) - 0.075em);
    padding-top: calc(var(--padding) + 0.075em);
    position: absolute;
    top: var(--padding);
    left: var(--padding);
}


.today .calendar-day {
    border-radius: 9999px;
    border: 1.5px solid #ea580c;
    color: #ea580c;
}

.has-event.today .calendar-day {
    color: #fb923c;
    border-color: #fb923c;
}

.calendar-header {
    font-weight: 500;
    text-align: center;
    font-size: 17px;
}

.calendar-event-counter {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

    max-height: 3rem;
    aspect-ratio: 1 / 1;

    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9999px;
    font-weight: 500;
    font-size: 1.5rem;

    background-color: #fb923c;
    color: #7c2d12;
}



.credencial {
    --max-height: calc(100vh - 6rem);
    aspect-ratio: 36/56;
    max-height: var(--max-height);
    max-width: calc(var(--max-height) * 36 / 56);
    font-size: max(10px, min(1em, 3vh));
    align-self: flex-start;
    flex: 0;
    width: 100%;
    height: 100%;
    padding: 5%;
    background-color: #27272a;
    color: white;
    text-align: center;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: flex-start;
    gap: 2.5%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='auto' viewBox='0 0 360 120' fill='none'%3E%3Cpath d='M0 0C0 33.138 26.862 60 60 60C60 26.862 33.138 0 0 0Z' fill='white' /%3E%3Cpath d='M60 60C26.862 60 0 86.862 0 120H60V60Z' fill='%23997847' /%3E%3Cpath d='M90 60C73.431 60 60 73.431 60 90C60 106.569 73.431 120 90 120H120V90C120 73.431 106.569 60 90 60Z' fill='white' /%3E%3Cpath d='M177 60C177 74.913 164.913 87 150 87C135.087 87 123 74.913 123 60H120V120H123C123 105.087 135.087 93 150 93C164.913 93 177 105.087 177 120H180V60H177Z' fill='%23997847' /%3E%3Cpath d='M150 87C164.913 87 177 74.913 177 60H123C123 74.913 135.087 87 150 87Z' fill='white' /%3E%3Cpath d='M150 93C135.087 93 123 105.087 123 120H177C177 105.087 164.913 93 150 93Z' fill='white' /%3E%3Cpath d='M210 60H180V120H240V90C223.431 90 210 76.569 210 60Z' fill='white' /%3E%3Cpath d='M210 60C210 76.569 223.431 90 240 90V60H210Z' fill='%23997847' /%3E%3Cpath d='M270 120C286.569 120 300 106.569 300 90C300 73.4315 286.569 60 270 60C253.431 60 240 73.4315 240 90C240 106.569 253.431 120 270 120Z' fill='%23997847' /%3E%3Cpath d='M300 60C300 93.138 326.862 120 360 120C360 86.862 333.138 60 300 60Z' fill='white' /%3E%3C/svg%3E");
}


/* forms */

.form-input,
#select {
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #a3a3a3;
    background-color: #fff;
}

.select2-container .select2-selection--multiple {
    padding: 0.875rem 1rem !important;
    padding-top: calc(0.875rem - 5px) !important;
    padding-left: calc(1rem - 5px) !important;

    border-radius: 0.5rem !important;
    border: 1px solid #a3a3a3 !important;
    background-color: #fff;
}




#select {
    padding: 0;
}

select:not([multiple]).form-input {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 1em) center;
}


.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-input:focus,
.form-input:focus-visible,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 1px #fb923c;
    outline: none;
    z-index: 1;
}





:has(>label + [required]) label::after,
:has(>label + div>[required]) label::after {
    content: "*";
    color: red;
    margin-left: 0.25ch;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

a[data-field] {
    margin: 0.25rem;
    border-radius: 0.5rem;
}

[data-field].active {
    background-color: oklch(96.8% 0.007 247.896)
}

[data-field].active::after {
    content: "\F012C";
    font: normal normal normal 1.1em / 1 "Material Design Icons";
    display: inline-block;
    margin-right: 0.25rem;
    float: right;
    position: relative;
    bottom: -0.1em;
}


/* spinner */

.spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: spin 1s linear infinite;

    position: relative;
    bottom: -0.05em;
    margin-right: 0.2em;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading {
    position: relative;
}

.loading::after {
    --size: 1.5rem;
    content: "";
    position: absolute;
    inset: 0;
    margin: 1rem auto;

    width: var(--size);
    height: var(--size);

    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: spin 1s linear infinite;
}


/* toasts */

.toastify {
    background: white;
    box-shadow: none;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    border-radius: 0.5rem;
}



        .checklist-circle {
            margin-left: 0.5rem;
            width: 1.25rem;
            height: 1.25rem;
            border-width: 1.5px;
            border-style: solid;
            border-color: currentColor;
            border-radius: 9999px;
        }


        .checked {
            background-color: #068c49;
            border-color: #068c49;
            background-size: cover;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Ctitle%3Echeck%3C/title%3E%3Cpath d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' /%3E%3C/svg%3E");
        }