body{
    display:flex;
    flex-direction: column;
    min-height: 100vh;
}
footer{
    margin-top: auto;
    background-color: var(--grisNegro);
}
footer p{
    color: var(--grisMedio);
}
footer a{
    text-decoration: none;
}
footer img{
    max-width: 160px;
}

/*VARIABLES*/
:root{
--rojo:      #EA0201;
--rojoRGB:   234,2,1;
--negro:     #000;
--blanco:    #fff;
--blancoRGB: 255,255,255;
--verde:     #5ED050;
--aqua:      #00A99D;
--grisClaro: #E5E5E5;
--grisMedio: #B3B3B3;
--grisOscuro:#555;
--grisNegro:#21252a;
--amarillo:  #FFCE00;
--amarilloRGB: 255,206,0;
--fontOpen: "Open Sans", serif; 
--fontLight: 300;
--fontBold: 800;
}

.colorRojo{color:var(--rojo) !important}
.colorBlanco{color:var(--blanco) !important}
.colorAqua{color:var(--aqua) !important}
.colorNegro{color: var(--negro) !important}
.colorGrisMedio{color: var(--grisMedio) !important}
.colorGrisOscuro{color: var(--grisOscuro) !important}

/*botones*/
.btn-primary{
    border-color: var(--rojo);
    background-color: var(--rojo);
    color: var(--blanco);
    border-radius: 6px;
}
.btn-primary:hover,
.btn-primary:active{
    border-color: var(--rojo)!important;
    background-color: var(--rojo)!important;
    color: var(--blanco);
    border-radius: 6px;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--rojoRGB), .5) !important;
}


.btn-wide {
    width: 100%;
}

.btn-outline-primary{
    border-color: var(--rojo);
    background-color: transparent;
    color: var(--rojo);
    border-radius: 6px;
}
.btn-outline-primary:hover, 
.btn-outline-primary:active{
    border-color: var(--rojo) !important;
    background-color: var(--rojo) !important;
    color: var(--blanco) !important;
}
.btn-outline-primary:focus-visible{
    border-color: var(--rojo) !important;
    background-color: var(--rojo) !important;
    color: var(--blanco) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--rojoRGB), .5) !important;
}

.btn-outline-secondary{
    border-color: var(--grisOscuro);
    background-color: transparent;
    color: var(--grisOscuro);
    border-radius: 6px;
}
.btn-outline-secondary:hover, 
.btn-outline-secondary:active{
    border-color: var(--grisOscuro) !important;
    background-color: var(--grisOscuro) !important;
    color: var(--blanco) !important;
}

/* CHECK BUTTON */
.btnCheck input[type=checkbox]{display: none;}
.btnCheck .fa-plus{display: inline-block;}
.btnCheck .fa-check{display: none;}

.btnCheck input[type=checkbox]:checked ~ .fa-check{display: inline-block;}
.btnCheck input[type=checkbox]:checked ~ .fa-plus{display: none;}
.btnTextCheckAlt{display: none;}
.btnCheck input[type=checkbox]:checked ~ .btnTextCheck{display: none;}
.btnCheck input[type=checkbox]:checked ~ .btnTextCheckAlt{display: inline;}


/*Estados*/
.txtEstado-ok{color: var(--verde);}
.txtEstado-No{color: var(--rojo);}


/*tablas*/
.table{
    border:1px solid var(--grisClaro);
}
.table thead tr td{
    font-weight: var(--fontBold);
    color: var(--grisOscuro);
    background-color: var(--grisClaro);
    
}
.table tbody tr td{
    color: var(--grisOscuro);
    text-wrap:nowrap;
}
.tableMinTxt{
    font-size: .85rem !important;
}
.tableMinTxt .btn-sm{
    font-size: .85rem !important;
}

/*SITIO*/
html, body{
    background-color: var(--grisClaro);
}

.oSans-light {
  font-family: "Open Sans", serif !important;
  font-optical-sizing: auto;
  font-weight: 300 !important;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.oSans-regular {
    font-family: "Open Sans", serif !important;
    font-optical-sizing: auto;
    font-weight: 400 !important;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }
.oSans-bold {
font-family: "Open Sans", serif !important;
font-optical-sizing: auto;
font-weight: 700 !important;
font-style: normal;
font-variation-settings:
    "wdth" 100;
}

/*NAVBAR*/
.navbar{
    background-color: var(--grisNegro);
}
.navbar-brand img{
    max-height: 80px;
}
.nav-link{
    font-family:"Open Sans", serif;
    font-size: 14px;
    color: var(--blanco);
}
.nav-link:hover{
    color: var(--rojo);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: var(--rojo);
}
.navbar-toggler{
    border: none;
}
.navbar-toggler-icon{
    color: var(--grisOscuro);
}

/*panel*/
.panel{
    background-color: var(--blanco);
    padding: 30px;
    border-radius: 6px;
    margin-bottom: 15px;
}
.panel h1{
    font-family: var(--fontOpen);
    font-weight: var(--fontLight);
    color: var(--grisOscuro);
    font-size: 26px;
}
.panelLink{
    display: block;
    background-color: var(--blanco);
    padding: 10px 30px;
    border-radius: 6px;
    margin-bottom: 15px;
    text-decoration: none;
    transition: .15s;
    font-size: 14px;
}
.panelLink:hover{
    background-color: var(--aqua);
    color: var(--blanco) !important;
}
.panelLinkRojo{
    display: block;
    background-color: var(--rojo);
    padding: 10px 30px;
    border-radius: 6px;
    margin-bottom: 15px;
    text-decoration: none;
    transition: .15s;
    font-size: 14px;
    color: var(--blanco);
}
.panelLinkRojo:hover{
    background-color: var(--aqua);
    color: var(--blanco) !important;
}
.panelBorde{
    border: 1px solid var(--grisClaro);
}


/*Listas*/
.listas{
    color: var(--grisOscuro);
    font-weight: var(--fontLight);
    font-size: 14px;
    list-style: none;
    padding-left: 0;
}
.listas li{
    border-bottom: 1px solid var(--grisClaro);
    padding:5px;
}
.listas li strong{
    font-weight: 700;
}
.listas li i{
    color: var(--grisMedio);
}
.alumnoEnLista{
    text-decoration: none;
    color: var(--grisOscuro);
    transition: .15s;
}
.alumnoEnLista.select, .alumnoEnLista.select i, .alumnoEnLista:hover, .alumnoEnLista:hover i{
    color: var(--rojo);
}

/* TAG ESTADOS ALUMNO*/
.tagHabilitado{
    background-color: var(--verde);
    display: inline-block; 
    color: var(--blanco);
    text-align: center;
    padding: 3px 20px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}
.tagInhabilitado{
    background-color: var(--rojo);
    display: inline-block; 
    color: var(--blanco);
    text-align: center;
    padding: 3px 20px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}
.tagAqua{
    background-color: var(--blanco);
    border:1px solid var(--aqua);
    color: var(--aqua);
    opacity: .7;
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-block;
}
.tagGris{
    background-color: var(--blanco);
    border:1px solid var(--grisMedio);
    color: var(--grisMedio);
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-block;
}
@media (max-width: 480px) {
    .tagHabilitado, .tagInhabilitado, .tagAqua, .tagGris{
        font-size: 14px;
        padding: 3px 8px;
        border-radius: 12px;
        font-weight: 400;
        margin-bottom: 5px;
    }
  }




/*FORMS*/
.panel input::placeholder{
    color: var(--grisMedio);
}

/*Alert*/
.alert{
    border: 1px solid var(--amarillo);
    display: flex;
    align-items: center;
    color: var(--grisOscuro);
    background-color: rgba(var(--amarilloRGB),.06);
}
.alert i{
    font-size: 42px;
    margin-right: 15px;
    color: var(--amarillo);
}
.alert p{
    margin-bottom: 0;
}

/*CARD*/

.cardBOrderOscuro{
    padding: 15px;
    border:1px solid var(--grisClaro);
    border-radius:6px;
    color: var(--negro);
    text-align: center;
    font-size: 14px;
}
.cardBOrderOscuro i{
    font-size: 40px;
    color: var(--aqua);
}
.cardBOrderOscuro h4{
    color: var(--grisOscuro);
    font-size: 20px;
    margin-top: 10px;
}

/*TOPBAR*/
.topbar{
    background-color: var(--rojo);
    color: var(--blanco);
    padding: 5px 10px;
    font-size: .8rem;
    text-align: right;
}
.topbar .topbarTxt{
    color: rgba(var(--blancoRGB),.6);
}
.topbar .topbarTxt a{
    color: var(--blanco);
    text-decoration: none;
}

/*INDEX*/
.topHero{
    background-image: url(img/img-hero.jpg);
    background-position: right top;
}
.panelHome{
    background-color: transparent;
}
.panelHome h1{
    color: var(--grisOscuro);
    font-size: 2.4rem;
    font-weight: 300;
    margin-bottom: 0;
}
.panelHome h3{
    color: var(--rojo);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0;
}
.panelHome h4{
    color: var(--negro);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0;
}
.panelHome p{
    color: var(--grisOscuro);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 300;
}

@media (min-width: 993px) {
    .topHero{
        background-image: url(img/img-hero.jpg);
        background-position: left top;
    }
    .panelHome{
        box-shadow: 0 0 15px var(--grisClaro);
        background-color: var(--blanco);
    }
}

.seccionBlanco{background-color: var(--blanco);}
.seccionGrisClaro{background-color: #eee}
.seccionRojo{background-color: var(--rojo);}

.secciones h2{
    font-size: 2.4rem;
    font-weight: 300;
}
.secciones h3{
    font-size: 2rem;
    font-weight: 300;
}

.secciones p{
    font-weight: 300;
    line-height: 1.6;
}
.secciones ul{
    list-style: none;
    padding-left: 0;
}
.secciones ul li i{
    margin-right: 10px;
    color: var(--rojo);
}