/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: normal;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* RESET */
@font-face {
    font-family: Open Sans;
    src: url("fonts/OpenSans-VariableFont_wdth\,wght.ttf");
}

:root {
    font-family: "Open Sans";

    /* Color palette */
    --primary-900: rgb(32, 61, 84);
    --primary-800: rgb(26, 73, 113);
    --primary-700: rgb(35, 104, 162);
    --primary-500: rgb(49, 131, 200);
    --primary-300: rgb(99, 162, 216);
    --primary-200: rgb(170, 212, 245);
    --primary-100: rgb(239, 248, 255);

    --neutral-900: rgb(33, 41, 52);
    --neutral-800: rgb(95, 107, 122);
    --neutral-700: rgb(136, 149, 167);
    --neutral-500: rgb(184, 196, 206);
    --neutral-300: rgb(207, 214, 222);
    --neutral-200: rgb(225, 231, 236);
    --neutral-100: rgb(248, 249, 250);

    --secondary-900: rgb(18, 69, 68);
    --secondary-800: rgb(27, 101, 94);
    --secondary-700: rgb(42, 145, 135);
    --secondary-500: rgb(60, 174, 163);
    --secondary-300: rgb(110, 215, 211);
    --secondary-200: rgb(168, 238, 235);
    --secondary-100: rgb(231, 255, 254);

    --green-900: rgb(20, 82, 57);
    --green-800: rgb(25, 119, 65);
    --green-700: rgb(37, 157, 88);
    --green-500: rgb(56, 193, 114);
    --green-300: rgb(116, 217, 159);
    --green-200: rgb(168, 238, 193);
    --green-100: rgb(227, 252, 236);

    --yellow-900: rgb(92, 72, 19);
    --yellow-800: rgb(140, 109, 31);
    --yellow-700: rgb(202, 165, 61);
    --yellow-500: rgb(244, 202, 100);
    --yellow-300: rgb(250, 226, 159);
    --yellow-200: rgb(253, 243, 215);
    --yellow-100: rgb(255, 252, 244);

    --red-900: rgb(97, 24, 24);
    --red-800: rgb(137, 27, 27);
    --red-700: rgb(184, 32, 32);
    --red-500: rgb(220, 48, 48);
    --red-300: rgb(217, 94, 94);
    --red-200: rgb(245, 170, 170);
    --red-100: rgb(252, 232, 232);


    /* Button and Base */
    --btn-color: var(--neutral-500);
    --border-color: var(--neutral-700);
    --btn-color-hover: var(--neutral-300);

    /* Alert */
    --alert: var(--red-300);
    --border-alert: var(--red-500);
    --hover-alert: var(--red-200);

    /* Shadow */
    --box-shadow: 0px 2px 15px rgb(0 0 0 / 15%);
    --tooltip-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    --card-box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.1);
    --calendar-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}

.btn {
    padding: 0.5em 1em;
    font-weight: bold;
    font-family: inherit;
    border: 1px solid;
    border-radius: 0.25em;
    cursor: pointer;
    background-color: var(--btn-color);
    border-color: var(--border-color);
    font-size: 0.9em;
}

.btn:disabled {
    opacity: 0.5;
}

.btn:hover {
    background-color: var(--btn-color-hover);
}

.btn-primary {
    background-color: var(--primary-500);
    border-color: var(--primary-700);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-300);
    border-color: var(--primary-500);
}

.btn-green {
    background-color: var(--green-500);
    border-color: var(--green-700);
    color: white;
}

.btn-green:hover {
    background-color: var(--green-300);
    border-color: var(--green-500);
}

.alert {
    background-color: var(--alert);
    border-color: var(--border-alert);
    color: white;
}

button.alert:hover {
    background-color: var(--hover-alert);
    border-color: var(--red-300);
}

.invert {
    filter: invert(1);
}

.card {
    padding: 1em;
    border-radius: 0.25em;
    box-shadow: var(--box-shadow);
    width: fit-content;
}

.pop-up-bg{
    position: fixed;
    inset: 0;
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: rgb(211 211 211 / 70%);
    z-index: 2;
}

.pop-up {
    position: relative;
    padding: 1em;
    border-radius: 0.25em;
    background-color: white;
    box-shadow: var(--box-shadow);
}

.close-pop{
    content: "X";
    position: absolute;
    top: 1.85em;
    right: 1.9em;
    font-size: 9.6px;
    font-weight: bold;
    cursor: pointer;
    padding: 0em 0.4em;
    border-radius: 0.25em;
    background: red;
    color: white;
}

/* Alert Pop */
.info-grid {
    display: grid;
    gap: 0.5em;
    padding: 0.5em;
    background: white;
    border-radius: 0.25rem;
}

.info-grid .info-title {
    padding: 0.5em 0.5em 0 0.5em;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: 0.25rem;
    text-align: center;
}

.info-grid .info-msg {
    padding: 0.5em;
    font-size: 0.9em;
    border-radius: 0.25rem;
}

.hidden {
    display: none!important;
}

/* Basic Tags */
select {
    padding: 0.25em 0.5em;
    border-radius: 2px;
    font-family: inherit;
}

input {
    padding: 0.25em 0.5em;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    font-family: inherit;
}

h3 {
    font-weight: bold;
    font-size: 1.2em;
    margin-block: 1em;
}

/* Color Coded */
.bg-green {
    background-color: lightgreen;
    border-color: #00ff29!important;
}

.bg-orange {
    background-color: #fdcf7a;
    border-color: #e7a288!important;
}

.bg-red {
    background-color: #efa2a2;
    border-color: var(--border-alert)!important;
}

/* Inline Styles */
.borderless {
    border: none;
}

.tooltip-boxSh {
    box-shadow: var(--tooltip-box-shadow);
}

.card-boxSh {
    box-shadow: var(--card-box-shadow);
}

.nogap {
    gap: 0!important;
}

.p1 {
    padding: 1em;
}

.p2 {
    padding: 2em;
}

.p3 {
    padding: 3em;
}

.span2 {
    grid-column: span 2;
}

/* Icons */
i {
    font-size: 1.5em;
}

i.click {
    cursor: pointer;
}

i.click:hover {
    color: var(--btn-color-hover)
}

/* FLEX */
.d-flex {
    display: flex;
    gap: 1em;
}

.d-grid {
    display: grid;
    gap: 1em;
}

.d-flex.all-center,
.d-grid.all-center {
    justify-content: center;
    align-items: center;
    justify-items: center;
}

/* Menu Principal */

.menu-principal {
    height: 80px;
    background-color: var(--primary-900);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1em;
    padding: 0.2em 1em;
}

/* Esto queda comentado porque no estoy usando la fila horarios
.menu-principal .logo {
    grid-row: span 2;
} */

.menu-principal .row-datos{
    display: flex;
    align-items: center;
    gap: 1em;
    color: white;
}

.menu-principal .row-datos .help-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.menu-principal .row-datos .help-icons > :not(.disabled):hover {
    color: var(--primary-300);
    border: solid 1px var(--primary-300);
}

.menu-principal .row-datos .help-icons > .disabled {
    color: #ffffff80;
    border: solid 1px #ffffff80;
}

.help-icons > * {
    min-width: 30px;
    display: flex!important;
    align-items: center;
    justify-content: center;
    border: solid 1px white;
    border-radius: 0.25rem;
    padding: 3px;
}

.menu-principal .row-clases {
    display: flex;
    align-items: end;
    gap: 1em;
    color: white;
}

.menu-principal .row-clases .clase {
    display: flex;
    gap: 0.5em;
}

.menu-principal .navegacion {
    display: none;
}

@media (max-width: 991px) {
    .menu-principal {
        height: 80px;
        background-color: var(--primary-900);
        display: grid;
        grid-template-columns: calc(80px + 1em) 1fr;
        width: 100vw;
        gap: 0.5em;
        padding: 0.5em;
        box-sizing: border-box;
    }

    .menu-principal .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-row: auto;
    }

    .menu-principal .logo img{
        width: 60px;
        /* filter: invert(1); */
    }

    .menu-principal .row-datos {
        display: grid;
        /* grid-template-columns: 1fr 1px; */
        color: white;
        gap: 0;
    }

    .menu-principal .row-datos .help-icons {
        margin-left: auto;
        display: flex;
        /* Borrar despues */
        display: none;
        gap: 0.5em;
        position: absolute;
        flex-direction: column;
        align-items: flex-end;
        right: 1em;
        background: lightseagreen;
        border-radius: 0.25rem;
        padding: 0.25em;
        z-index: 4;
    }

    .menu-principal .navegacion {
        display: grid;
        position: absolute;
        top: 0.5em;
        right: 1em;
        width: 150px;
    }

    .menu-principal .navegacion > button:first-of-type {
        width: fit-content;
        justify-self: right;
        padding: 0.2em 0.5em;
    }

    .menu-principal .navegacion ul {
        display: none;
        visibility: hidden;
    }

    .menu-principal .navegacion ul.show {
        visibility: visible;
        display: grid;
        gap: 0.1em;
        background: lightgray;
        justify-items: stretch;
        padding: 0.2em;
        border-radius: 0.25rem 0 0.25rem 0.25rem;
        position: relative;
        top: -2px;
        z-index: 40;
    }

    .menu-principal .navegacion ul.show > * {
        font-size: 0.7em;
    }

    .menu-principal .docente {
        display: none;
    }

    .menu-principal .row-clases {
        display: none;
    }
}

/* Loading Screen */
.loadingSBG{
    position: fixed;
    inset: 0;
    background-color: #21252991;
    z-index: 99;

    display: grid;
    justify-items: center;
    align-items: center;
    --loadingLogoWidth: 80px;
    --loadingLogoHeight: 95px;
}

.loadingSBr{
    width: calc(var(--loadingLogoWidth) + 50px);
    height: calc(var(--loadingLogoHeight) + 50px);
    border-radius: 50%;
    border: solid 8px transparent;
    border-top: dotted 8px var(--primary-500);
    animation: spinner 2s ease-in-out infinite;
}

.loadingSI{
    /* Width and Height tienen que ser iguales al tamaño de la imagen */
    width: var(--loadingLogoWidth);
    height: var(--loadingLogoHeight);
    background-image: url('../images/icons/loading.png');
    animation: loading 2s infinite;
}

@keyframes loading {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes spinner {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}