/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


:root{
    --color-rojo: #D5441B;
    --border-radius: 0.5rem;
}


/* RESET */

button,
input,
optgroup,
select,
textarea,html 
input[type="button"],
input[type="reset"],
button[disabled],
html input[disabled],
button::-moz-focus-inner,
input::-moz-focus-inner, 
input[type="checkbox"],
input[type="radio"], 
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button, 
input[type="search"], 
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{
    border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

hr {
    /* border: none; */
    height: 1px;
    /* color: #ccc; */
    /* background-color: #ccc; */
    width: 100%;
    margin: 10px 0;

    border-top: 1px solid #666;
    border-bottom: none;
    border-left: none;
    border-right: none;

}

.hr-ptos {
    border-top: 1px dotted #666;
    border-bottom: none;
    border-left: none;
    border-right: none;
}


/* ----------------------------------------------------------- */

:root{
    --clr-cancelar: #eee;
}       

/* ----------------------------------------------------------- */

body, html {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: 'Sen', sans-serif; */
    /* font-family: 'Roboto', sans-serif; */
    
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-size: 14px;
    line-height: 20px;
    font-style: normal;

    background-color: var(--clr-fondo);
}

h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: var(--clr-oscuro);
}

b{
    font-weight: bold;
}

.container {
    /* position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out; */
    /* margin-bottom: 20px; */
}

.container-login{
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #eee;
}

.container:after {
    clear: both;
}

/* .container:before,
.container:after {
  display: table;
  content: " ";
} */

.container.open-sidebar {
    /* left: 260px; */
    left: 100%;
}

.bcover-img{
    border: 2px solid var(--clr-base);
}

.img-fluid{
    object-fit: cover;
    display: block;
}

/* ======================================================================== */

.p5{ padding: 5px; }
.p10{ padding: 10px; }
.p15{ padding: 15px; }
.p20{ padding: 20px !important; }
.p30{ padding: 30px !important; }

.m0 { margin: 0; }

.mt-0 { margin-top: 0px; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-60 { margin-top: 60px !important; }

.mb-5{ margin-bottom: 5px !important; }
.mb-10{ margin-bottom: 10px; }
.mb-20{ margin-bottom: 20px !important; }

.m1 { margin: 1rem; }
.mt1 { margin-top: 1rem; }
.mb1 { margin-bottom: 1rem; }

.p1 { padding: 1rem; }
.pt1 { padding-top: 1rem; }
.pb1 { padding-bottom: 1rem; }

.mr-5{ margin-right: 5px; }
.mr-10{ margin-right: 10px; }
.mr-20{ margin-right: 20px; }

.ml-5{ margin-left: 5px; }
.ml-10{ margin-left: 10px; }
.ml-20{ margin-left: 20px; }

.pt-5 { padding-top: 5px; }
.pt-10{ padding-top: 10px; }
.pt-20{ padding-top: 20px !important; }

.pl-5 { padding-left: 5px; }
.pl-10{ padding-left: 10px; }
.pl-20{ padding-left: 20px; }

.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }
.text-left{ text-align: left !important; }

.w100{ width: 100% !important; display: block;}
.w90{ width: 90%; }
.w80{ width: 80% !important;}
.w50, .fw50 { width: 50% !important;}
.w70{ width: 70% !important;}
.w60{ width: 60% !important;}
.w40{ width: 40% !important;}


.w10{ width: 10% !important;}
.w15{ width: 15% !important;}
.w20{ width: 20% !important;}
.w25{ width: 25% !important;}
.w30{ width: 30% !important;}

.text-mayusculas{
    text-transform: uppercase !important;
}

.mayusculas{
    text-transform: uppercase !important;
}

.text-gris{
    color: #666;
}

.text-gris-claro{
    color: #ddd;
}

.text-amarillo{
    color: #FFDF6B;
}

.text-big{
    font-size: 1.6em;
}

.text-mini{
    font-size: 0.8rem;
    line-height: 0.9rem !important;
}

.text-justify{
    text-align: justify;
}

.border{
    border: 1px solid #444;
}

.float-right{
    float: right;
}

.border-radius{
    border-radius: var(--border-radius);
}

.link-sin-borde{
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.link-sin-borde:hover{
    color: var(--clr-base);
}

.texto_portada a{
    text-decoration: underline;
}

/* ======================================================================== */

#sidebar {
    /* position: absolute; */
    /* left: -260px; */
    /* background: #DF314D; */
    /* background-color: var(--clr-base); */
    
    /* width: 260px; */
    width: 100%;


    /* height: 100%; */
    /* box-sizing: border-box; */
}

#sidebar ul {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

#sidebar ul li {
    margin: 0;
}

#sidebar ul li a {
    padding: 15px 15px;
    /* font-weight: 100; */
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    border-bottom: 1px solid  #eee; /* #C9223D; */
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}

/*#sidebar ul li:hover a {
    background: #444;
    background-color: var(--clr-neutro2);
}*/

#sidebar .active, #sidebar .active-alum {
    background-color: #444;
    color: #fff;
}


#sidebar .active::before {
    /* font-family: "Font Awesome 5 Free";  */
    font-weight: 900; 
    content: ">";
    /* margin-right: 10px; */
}


#sidebar .active-alum::before {
    /* font-family: "Font Awesome 5 Free";  */
    font-weight: 900; 
    /* content: "\f2bd"; */
    /* margin-right: 10px; */
}



.main-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px 10px 0 10px;
    width: 100%;
}

.main-content .content h1{
    /* font-weight: 100; */
}

.main-content .content p{
    width: 100%;
    line-height: 160%;
}

.main-content #sidebar-toggle {
    /* background: #DF314D; */
    background-color: var(--clr-base);
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
    margin-right: 10px;
}

.main-content #sidebar-toggle .bar{
    display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;   
}

.main-content #sidebar-toggle .bar:last-child{
    margin-bottom: 0;   
}

/* para encuestas -------------------------------------------------------- */

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

.oculto{
	display: none;
}


/* ======================================================================== */

.marca{
    padding: 5px 8px;
    width: 100%;
    background-color: #ccc;
    border-radius: var(--border-radius);    
}

.bg-color{
    /* background-color: #DF314D !important; */
    background-color: var(--clr-base) !important;
    color: #fff !important;
}

.bg-color a{
    color: #fff !important;
}

.bg-color .activo{
    color: #fff !important;
    font-weight: bold;
    /* font-size: 1.2em;     */
    background-color: #222;
    padding: 3px 8px;
    border-radius: var(--border-radius);
    /* text-decoration: underline solid #fff 3px; */
}

.bg-fondo{
    background-color: var(--clr-fondo) !important;
}

.bg-amarillo{
    background-color: #F2F5C8 !important;
}

.bg-gris{
    background-color: var(--clr-neutro) !important;
}

.bg-gris-2{
    background-color: var(--clr-neutro2) !important;
}

.bg-verde{
    background-color: var(--clr-verde);  /* #A5E1AD; */
    color: #fff;
}

.bg-naranja{
    background-color: #F7A440;
}

.bg-rojo{
    background-color: #F55C47;
    color: #fff !important;
}

.bg-negro{
    color: #fff !important;
    background-color: #444;
}

.bg-blanco{
    background-color: #fff;
}

.bg-azul{
    background-color: var(--clr-azul) !important;
}

.txt-verde{
    color: #A5E1AD;
}

.txt-amarillo {
    color: #FFD93D;
}

.txt-naranja{
    color: #F7A440;
}

.txt-rojo{
    color: var(--clr-rojo);
}

.txt-gris{
    color: #666 !important;
}

.radius{
    border-radius: var(--border-radius);
}

/* ======================================================================== */

.bullet{
    border-radius: var(--border-radius);
    padding: 3px 5px;
    font-size: 0.8em;
}


/* ======================================================================== */

.content{
    display: flex;
    flex-direction: row;
    flex-flow: column wrap;
    /* width: 100%; */
}

.bloque-100{
    padding: 15px 12px !important;
    background-color: #fff;
    width: 100%;
    margin-bottom: 5px;
    border-radius: var(--border-radius);
}

.bloque{
    padding: 15px 12px !important;
    background-color: var(--clr-fondo-claro);
    width: 100%;
    margin-bottom: 5px;
    border-radius: var(--border-radius);
    flex-basis: 100%;

    /* border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; */
    border: 1px solid #e5e5e5;
    border-top: none;    
}


.bloque-tit{
    padding: 10px 12px !important;
    background-color: var(--clr-fondo-claro);
    width: 100%;
    margin-bottom: 5px;
    border-radius: var(--border-radius);
    flex-basis: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    gap: 1em;

    /* border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; */
    border: 1px solid #e5e5e5;
    border-top: none;    
}



.bloque-login{
    padding: 15px 20px !important;
    background-color: var(--clr-fondo-claro);
    width: 340px !important;
    margin-bottom: 5px;
    border-radius: var(--border-radius);
    height: 550px;
    /* border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; */
    border: 1px solid #e5e5e5;
    border-top: none;    
    font-size: 0.9em;
}



.bloque-vacio{
    width: 100%;
    margin-bottom: 5px;
    flex-basis: 100%;
}


.form-login input{
    padding: 10px;
}

/* ============================================ */


.menu-horizontal{
    overflow: auto;
    /* white-space: nowrap; */
    color:#fff;
    margin-bottom: 10px;
    border-radius: var(--border-radius);
    padding: 10px;
    text-transform: uppercase;
}

.menu-horizontal a {
    display: inline-block;
    color:#fff;
    text-align: center;
    /* font-weight: bold; */
    padding: 5px;
    text-decoration: none;
    text-transform: uppercase;
}

.menu-horizontal a:hover {
    color:#ccc !important;
    text-decoration: none;
}




/* ================================================ */


.bloque_aviso{
    background-color: var(--clr-fondo-claro);
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 5px;
}

/* ================================================ */

.header{
    /* background-color: #ccc; */
    /* background-color: var(--clr-neutro2); */
    background-color: var(--clr-base);
    color: #fff;
    width: 100%;
    line-height: 30px;
    padding: 10px;
    height: 50px;
    display: block;
}

.header-android .header{
    padding: 20px 10px 10px 10px !important;
    height: 60px !important;
}

.nav-donde{
    padding: 10px 10px !important;
}

.doble-div, .triple-div, .div-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.doble-separado {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 2px;
    /* gap: 0.2rem; */
}

.info-alumno{
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
    margin-bottom: 2px;
}

.triple-div, .doble-separado, .div-menu{
    justify-content: space-between;
}

.mosaico-div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.mosaico-bloque{
    padding: 15px 12px !important;
    background-color: var(--clr-fondo-claro);
    margin-bottom: 5px;
    border-radius: var(--border-radius);
    flex-basis: 32.75%;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #e5e5e5;
    border-top: none;    
}


.info-alumno{

}

.info-alumno img{
    border-radius: var(--border-radius);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    object-fit: cover;
    width: 100%;
    max-width: 100px !important;
} 

.info-alumno .div-1 img {
    border-radius: var(--border-radius);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    object-fit: cover !important;
    /* width: 100%; */
    max-height: 100px;
    /* max-width: 100px !important; */
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================================= */

.calendario{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.calendario a{
    text-decoration: none;
    color: #444;
}

.calendario .celda{
    width: 13.4%; /* calc((100% - 30px) / 7);*/
    background-color: var(--clr-fondo);
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin: 1px;
    margin-bottom: 1px;
    /* padding: 6px 0; */
}

.calendario .celda:nth-child(7n){
    /* border: 1px solid red; */
    margin-right: 0;
}

.calendario .celda-activa{
    background-color: #444 !important;
    color: #fff !important; 
}

.calendario .celda-activa a{
    color: #fff;
    font-weight: bold;
}

.calendario .bt-cal-dia, .calendario .bt-cal-reserva{
    cursor: pointer !important;
}

.calendario .celda:hover{
    border: 1px solid #444;
    cursor: pointer;
}

.calendario .celda-festivo{
    background-color: #999 !important;
    color: #fff !important; 
}

.calendario .celda-acceso{
    background-color: var(--clr-verde) !important;
}

.calendario .celda-ausencia-x{
    background-color: var(--clr-rojo) !important;
}

.calendario .celda-ausencia-j{
    background-color: var(--clr-info) !important;
}

.calendario .celda-aviso-asistencia a{
    border-bottom: 3px solid var(--clr-verde);
}

.calendario .celda-aviso-ausencia a{
    border-bottom: 3px solid var(--clr-rojo);
}

.calendario .celda-aviso a{
    border-bottom: 3px solid var(--clr-oscuro);
}



.calendario .celda-res-pendiente, .bg-res-pendiente{   
    background-color: var(--clr-azul) !important; 
}

.calendario .celda-res-cancelada, .bg-res-cancelada{    
    background-color: var(--clr-rojo) !important;
}

.calendario .celda-res-confirmada, .bg-res-confirmada{   
    background-color: var(--clr-verde) !important; 
    color: #fff;
}

.calendario .celda-res-proceso, .bg-res-proceso{   
    background-color: var(--clr-oscuro) !important; 
}


/* ================================================ */

.div-row-x{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    gap: 0.5em;
}

.div-col-centro{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 1em;
}

input, textarea{
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius); 
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    width: 96% !important;
    margin: 2px 5px 5px 5px;
}

select{
    /* appearance: none; */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius); 
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    width: 96% !important;
    margin: 2px 5px 5px 5px;
}

input[type='date']{
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius); 
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    width: 160px !important;
    margin: 2px 5px 5px 5px;
}

/* input[type='checkbox'], input[type='radio']{
    width: auto;
} */

input[type='checkbox'], input[type='radio']{
    -webkit-appearance: checkbox;
    text-align: left !important;
    width: 20px !important;
}

.input-linea{
    float: left;
}

/* --- */

.numero{
    width: 160px !important;
    text-align: center;
}

/* --- */


.chlinea{
    margin-bottom: 2px;
    line-height: 20px;
    display: flex;
    justify-content:flex-start;
    align-items: center;    
}

.form-bloque{
    margin: 20px 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
}


.form-bloque .label-form, .label-form{
    color: #000;
    font-weight: normal;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    font-size: 0.9rem;
}

label{
    color: #666;
    font-weight: normal;
}

.aviso_ok{
    padding: 5px 8px;
    width: 100%;
    background-color: var(--clr-verde);
    border-radius: var(--border-radius);
}

.aviso_ok::before {
    /* font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f058"; */
    margin-right: 10px;
    content: '*';
  }


.aviso_info{
    padding: 5px 8px;
    width: 100%;
    background-color: var(--clr-info);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}

.aviso_info::before {
    /* font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f05a"; */
    margin-right: 5px;
    content: '*';
  }

.aviso_obs{
    padding: 5px 8px;
    width: 100%;
    background-color: var(--clr-info);
    border-radius: var(--border-radius);
}

.aviso_obs::before {
    /* font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f075"; */
    margin-right: 5px;
    content: '*';
  }


.aviso_error, .aviso_error_st{
    padding: 5px 8px;
    width: 100%;
    background-color: var(--clr-rojo); 
    border-radius: var(--border-radius);
    color: #fff;
}

.aviso_gris{
    padding: 8px;
    width: 100%;
    background-color: #eeeeee;
    border-radius: var(--border-radius);
}


.txtayuda{
    /* padding: 5px 8px; */
    line-height: 14px !important;
    /* font-weight: 100; */
    font-size: 0.9em;
    color: #666;
}

.txtayuda::before {
    /* font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f059";*/
    margin-right: 5px;
    content: '*';
  }

/* ================================================ */

.btn {
    text-decoration: none;
    padding: 10px;
    border-radius: var(--border-radius);
    min-width: 100px;
    text-align: center;
    border: 1px solid #444;
    background-color: transparent;
    color: #444;
    cursor: pointer;
    font-size: 0.9em !important;
    text-transform: uppercase;
}

.btn-mini {
    text-decoration: none;
    padding: 5px;
    border-radius: var(--border-radius);
    /* min-width: 100px; */
    text-align: center;
    border: 1px solid #444;
    background-color: #444;
    text-transform: uppercase;
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
}


.btn:hover, .btn-mini:hover{
    background-color: #444 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}

.btn-primary{
    /* background-color: #ccc; */
    background-color: var(--clr-base);
    border-color: var(--clr-base);
    color: #fff !important;
    display: block;
    width: 100%;
}

.btn-secundario {
    background-color: var(--clr-neutro);
    border-color: var(--clr-neutro);
    color: #444 !important;
}

.btn-cancelar {
    background-color: var(--clr-cancelar) !important;
    border-color: var(--clr-cancelar) !important;
    color: #444;

    display: block;
    width: 100%;
    margin-top: 2px;
    width: 100%;
}

.link-bco, .link-bco a{
    color: #fff !important;
}

.link-bco:hover, .link-bco a:hover{
    color: #222 !important;
}

.link-gris, .link-gris a{
    color: #222 !important;
}

.link-gris-2, .link-gris-2 a{
    color: #999 !important;
}

.link-gris-2.activo{
    color: #222 !important;
}

.link-gris:hover, .link-gris a:hover{
    color: #fff !important;
}

/* ========================= */

.menu-comedor{
    padding: 2px 0;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: stretch;    
}

.menu-comedor img{
    object-fit: cover;
    border-radius: var(--border-radius);
}


/* ========================== */

.iconos-div {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.icono-link {
    font-size: 9px;
    text-transform: uppercase;
    width: calc((100% - 50px) / 4);
    height: auto;

    border: 1px solid #eee;
    border-radius: var(--border-radius);
    text-align: center;
    padding: 10px 5px;
    margin: 5px;
    background-color: #fff;
    border-color: #999;  /*var(--clr-base); */
}

.icono-link label {
    display: block;
    margin-top: 4px;
}

.icono-link a {
    text-decoration: none;
    color: #444;
}

.icono-link:hover {
    background-color: #ccc;
    /* color: #fff !important; */
    border-color: #666;
}

/* .icono-link a:hover {
    color: #fff;
} */

.icono-link.activo{
    background-color: var(--clr-base) !important;
    border-color: var(--clr-base) !important;
    color: #fff;
}

.icono-link.activo a, .icono-link.activo label{
    color: #fff !important;
}


/* ======================================================================= */

.div-footer{
    font-size: 0.8em !important;
    color: #444;
    padding: 20px 0;
    margin-top: 10px;
    width: 100%;
}

.div-footer a{
    font-size: 1em !important;
    color: #444;
}

.div-footer a:hover{
    color: var(--clr-base);
}

.div-footer-logos{
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.div-footer-logos img{
    margin-right: 10px;
}


/* ====== card se usa en el blog ================================================================== */


.cards-uno{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
}

.cards{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

.card{
    /* dentro de cada media query */
    /* flex-grow: 2; */
}

.card-texto a{
    padding: 5px 10px;
    position: relative;
    background-color: var(--clr-base);
    color: #fff !important;
    top: 0;
    margin: 5px 5px 5px 30px;
    border-radius: var(--border-radius);
    font-size: 1em;
    font-weight: 400;
    text-align: right;
}

.card img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: var(--border-radius);
}

.foto {
    width: 1200px;
}

.mfp-img {
}


/* ==================== familiares autorizados ============================ */

.div_fam{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start; 
    gap: 1em;  
    width: 100%;
    margin-bottom: 20px;
  }
  
.div_fam_item{
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;

    font-size: 0.9em;

}

.div_fam_item div:first-child{
    width: 90px;
    text-align: center;
}

.div_fam_item div:not(:first-child){
    padding: 1em;
    width: 50%;
}
    
.div_fam_item img{
    display: block;
    max-width: 100%;
    height: auto;
}




.recogidas_lista{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
}  

.recogidas_lista_item{
    width: 100%;
    /* border: 1px solid #ccc; */
    margin-top: 0.5em;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;

    background-color: #eee;
    padding: 0.4em 0.2em;
    border-radius: var(--border-radius);
    font-size: 0.9em;
}

.recogidas_lista_item div:first-child{
    font-weight: bold;
}

.recogidas_lista_item div:not(:first-child){
    padding-left: 1.5em;
}

/* ======================================================================== */
/* checkbox - radio como botones */

.div_pregunta{
    max-width: 400px;    
    margin: 4px;
    background-color: #f5f5f5;
    color: #444;
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  
  .div_pregunta:hover,  
  .div_pregunta_hor:hover,
  .div_tab_hor:hover,
  .div_pregunta_mini:hover{
    background-color: #eee;
  }
  
  .div_pregunta label, 
  .div_pregunta_hor label, 
  .div_tab_hor label{
    float: left;
    line-height: 3.0em;
    width: 100% !important;
    cursor: pointer;
  }

  .div_pregunta_mini label {
    float: left;
    font-size: 0.9rem;
    line-height: 2.0em;
    width: 100% !important;
    cursor: pointer;
  }
  
  .div_pregunta label span, 
  .div_pregunta_hor label span,
  .div_pregunta_mini label span{
    text-align: left;
    padding: 0 1rem;
    display: block;
  }
  
  .div_tab_hor label span {
    text-align: center;
    padding: 0 1rem;
    display: block;
  }

  .div_pregunta label input, 
  .div_pregunta_hor label input,
  .div_tab_hor label input,
  .div_pregunta_mini label input {
    position: absolute;
    display: none;
    color: #fff !important;
  }
  
  .div_pregunta label input + span, 
  .div_pregunta_hor label input + span, 
  .div_tab_hor label input + span,
  .div_pregunta_mini label input + span {
    color: #444;
  }
  
  
  .div_pregunta input:checked + span, 
  .div_pregunta_hor input:checked + span, 
  .div_tab_hor input:checked + span,
  .div_pregunta_mini input:checked + span {
    color: #fff;
  }
  
  .div_pregunta input:checked + span, 
  .div_pregunta_hor input:checked + span, 
  .div_tab_hor input:checked + span{
    background-color: #666;
    color: #fff;
  }
  

  .div_pregunta_mini input:checked + span {
    border: 1px solid #ccc;
    background-color: #ccc;
    color: #444;
  }

  .div_pregunta_hor{
    max-width: 400px;    
    margin: 4px;
    background-color: #f5f5f5;
    color: #444;
    border-radius: var(--border-radius);
    overflow: hidden;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    gap: 1em;
  }


  .div_pregunta_mini{
    max-width: 100%;    
    margin: 2px;
    background-color: #f5f5f5;
    color: #444;
    border-radius: var(--border-radius);
    overflow: hidden;
  }


  .div_tab_hor{
    max-width: 100%;    
    margin: 4px;
    background-color: #f5f5f5;
    color: #444;
    border-radius: var(--border-radius);
    overflow: hidden;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    gap: 1em;
  }

/* ---- menu tab con scroll horizontal ------- */  


.scrollmenu {
    overflow: auto;
    white-space: nowrap;
    /* margin-bottom: 2rem; */
    padding: 0.5rem 0;
}

.scrollmenu a {
    display: inline-block;
    color: #444;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #fff;
    border-radius: 0.5rem;
    cursor: pointer;
}

.scrollmenu_a:hover{
    background-color: #444 !important;
    color: #fff !important;
    transition: all 0.2s ease-in-out;
}

.scrollmenu_activo{
    background-color: var(--clr-base) !important;
    color: #fff !important;
    transition: all 0.2s ease-in-out;
}

/* ---- mostramos menus-platos-promociones como tarjetas --- */


.div_tarjetas {
    overflow-x: auto;
    /* max-width: 920px; */
    /* white-space: nowrap; */

    /* width: 100%; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items:  flex-start;
    align-content: flex-start;
    gap: 0.5em;

    margin-bottom: 2rem;
}

.tarjeta {     

    color: #444;
    min-width: 22rem;
    text-decoration: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #eee;
    border-radius: var(--border-radius);

    background-color: rgb(255, 255, 255);
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;

    /* display: flex;
    flex-direction: column;
    overflow: hidden;*/
    /* text-align: left; */

    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tarjeta__img{
    height: 12rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tarjeta__img img{
    width: 100%;
    object-fit: cover;
    transition: all 0.4s ease-out;    
}

.tarjeta__contenido{
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: #444;    
}

.tarjeta__titulo{
    text-wrap: balance;
    font-weight: bold;
    font-size: 1.2rem;
}

.tarjeta__info{
    line-height: 1.3rem !important;
    margin-top: 0.5rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 5; */
}

.tarjeta__pie{
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;    
}

.tarjeta__precio{
    background-color: var(--clr-base);
    color: #fff;
    z-index: 1;
    position: absolute;
    bottom: 1.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    left: 1.25rem;
    font-weight: bold;
    font-size: 1.2rem;
}


.tarjeta h4{
    font-size: 1.4rem;
    font-weight: 800;
}


/* ================================================ */
/* para las reservas y pedidos */

.div_platos{
    margin-bottom: 2rem;
    padding: 0.5rem 0;

    width: 100%;

    display: flex;
    flex-direction: column;
    /* flex-wrap: nowrap; */
    /* justify-content: space-between;
    align-items:  flex-start;
    align-content: flex-start; */
    gap: 0.5em;    
}

.div_plato{
    width: 100%;
    color: #444;
    text-align: left;

    min-width: 18rem;
    text-decoration: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #eee;
    border-radius: 0.5rem;

    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);    

    display: flex;

    overflow: hidden;
    transition: all 0.2s ease-in-out;    
}

.div_plato__img{
    min-width: 250px;
    max-height: 15rem;

    position: relative;
    overflow: hidden;
    padding: 0;
    display: block;
    background-color: #f5f5f5;
}

.div_plato__img img{
    object-fit: contain;
    /* object-position: center center; */
    /* transition: all 0.4s ease-out; */
    height: 100%;
    width: 100%;
    display: block;
}

.div_plato__contenido{
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: #444;    
}


.div_plato__titulo{
    text-wrap: balance;
    font-weight: bold;
    font-size: 1.2rem;
}

.div_plato__info{
    margin-top: 0.5rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 5; */
}

.div_plato__precio{
    /* width: 8rem; */
    /* padding-right: 1.25rem; */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
}

.div_plato__boton{
    /* mix-width: 100px; */
    margin-top: 1rem;
    /* background-color: #f5f5f5;
    color: #444;
    border-radius: var(--border-radius);
    overflow: hidden; */
    /* width: 30px !important; */
}
  
.div_plato__boton label:hover{
    background-color: #666 !important;
}

.div_plato__boton label{
    float: left;
    line-height: 2.0em;
    /* width: 30px !important; */
    width: 100%;
    cursor: pointer;
    transition: all 0.4s ease-out;
}

.div_plato__boton label span{
    text-align: center;
    padding: 0 0.1rem;
    display: block;
}

.div_plato__boton label input {
    position: absolute;
    display: none;
    color: #fff !important;
}

.div_plato__boton label input + span {
    color: #444;
}

.div_plato__boton input:checked + span {
    color: #ffffff;
}

.div_plato__boton input:checked + span {
    background-color: var(--clr-base);
    color: #fff;
}

/* para poner los platos de un menu en dos columnas en PC */
.div_plato__doble{
    /* max-width: 30rem; */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}

.valores_nutricionales{
    color: #666;
    font-size: 0.8rem;
    padding: 0.2rem 0 0 0.8rem;
}

.alergenos{
    width: 100%;
    color: #666;
    /* margin-top: 1rem; */
}

.alergenos svg{
    margin-right: 0.15rem;
}


.div-botonera {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    gap: 0.5rem;
}

.div-botonera div{
    width: 100% !important;
}


.lista-precios{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    gap: 1em;
}

/* .lista-precios div:nth-child(1){
    width: 80%;
    text-align: left;
}

.lista-precios div:nth-child(2){
    width: 10%;
    text-align: right;
}

.lista-precios div:nth-child(3){
    width: 10%;
    text-align: right;
} */


/* -------------------------- */


.div_cols_contador {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-start;
    gap: 0.1rem;
}


.div_cols {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    gap: 0.1rem;
}

.cols2{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.5rem;
}

.cols2 div{
    width: 50%;
}

.input_falso{
    border: none;
    padding: 2px;
    background-color: #eee;
    text-align: center;
    width: 30px !important;
    height: 30px;
}

.div_mosaico{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-template-rows: auto;
    grid-gap: 0.2rem;
}


/* ---- vaidar CCC ---------- */
input.valido {
    border: 2px solid green;
}

input.invalido {
    border: 2px solid red;
}

#validacion-mensaje-ccc {
    margin-top: 10px;
    font-size: 0.9rem;
}



/* ======================================================================== */
/* ======================================================================== */

/* pantalla grande */
@media screen and (min-width: 980px) { 

    body{
        font-size: 14px;
    }

    .header{
        background: var(--clr-base) !important;
        color: var(--clr-blanco);
    }

    .solo-tel{
        display: none;
    }    

    #sidebar {
        width: 340px;
        background-color: var(--clr-blanco);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 1px solid #e5e5e5;
        border-top: none;
    }

    #sidebar ul li a {
        color: #444;
        padding: 10px 10px;
    }


    #sidebar ul li:hover a {
        background: #444;
        color: var(--clr-blanco);
        /* background: var(--clr-oscuro) !important; */
        font-weight: bold;
    }    

    .container{
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .main-content .header{
        display: none;
    }

    .content{
        margin-top: 0;
    }


    .bloque-100 {
        flex: 1;
    }
 
    .bloque-20 {
        flex: 0.20;
    }

    .bloque-25 {
        flex: 0.25;
    }

    .bloque-30 {
        flex: 0.30;
    }

    .bloque-40 {
        flex: 0.40;
    }

    .bloque-50 {
      flex: 0.5;
    }

    .bloque-60 {
        flex: 0.60;
    }    

    .bloque-70 {
        flex: 0.70;
    }

    .bloque-75 {
        flex: 0.75;
    }
    
    .form-bloque > label{
        font-size: 0.9em;
    }    

    .doble-div .bloque:first-child,
    .doble-div .bloque-vacio:first-child {
        margin-right: 5px;
    }

    .triple-div .bloque {
        margin-right: 5px;
    }

    .triple-div .bloque:nth-child(3) {
        margin-right: 0;
    }

    .mosaico-div .mosaico-bloque {
        margin-right: 5px;
    }

    input, select, textarea, input[type='date']{
        font-size: 1em;
    }


    .info-alumno .div-1{
        width: 12%;
    }

    .info-alumno .div-2{
        width: 80%;
    }

    .info-alumno .div-3{
        width: 8%;
    }

    .info-alumno .div-3-sinfoto{
        width: 20%;
    }

    /* .info-alumno img{
        object-fit: cover;
        width: 100%;
        max-width: 100px !important;
    } */

    .div-menu-1{ width: 90%; }
    .div-menu-2{ 
        width: 10%; 
        text-align: center;
        font-size: 1.8em; 
    }

    /* .menu-horizontal .activo {
        color: #fff;
    } */

    .card{
        background-color: #fff;
        margin: 5px;
        height: 200px;
        width: 32.2%;
        position: relative;
        border-radius: var(--border-radius);
    }


    .div_plato{
        flex-direction: row;
    }

    .div_plato__img{
        max-height: 16rem;
        max-width: 16rem;
    }

    .div_plato__contenido{
        width: 33%;
    }

}


/* ======================================================================== */


/* PANTALLA TELÉFONO*/
@media screen and (max-width: 980px) { 

    ::-webkit-scrollbar {display: none;}

    .mt-tel{
        margin-top: 20px;
    }

    .center-tel{
        text-align: center !important;
        margin: 0 auto;
    }

    .solo-pc{
        display: none;
    }

    .menu-horizontal a {
        margin-right: 15px;
    }

    body{
        font-size: 14px;
    }
    
    footer{
        display: none;
    }

    .bloque, .bloque_aviso{
        margin-right: 0 !important;

        /* word-break: break-all !important; */
    }

    .main-content{
        margin-bottom: 20px !important;
    }
  
    .calendario{
        margin: 0 auto;
    }

    .calendario .celda{
        width: 13.5%; /* calc((100% - 30px) / 7);*/
    }    

    .container {
        position: relative;
        height: 100%;
        width: 100%;
        left: 0;
        -webkit-transition:  left 0.4s ease-in-out;
        -moz-transition:  left 0.4s ease-in-out;
        -ms-transition:  left 0.4s ease-in-out;
        -o-transition:  left 0.4s ease-in-out;
        transition:  left 0.4s ease-in-out;
        margin-bottom: 20px;
    }

    .header{
        width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
        left: 0; /* Posicionamos la cabecera al lado izquierdo */
        top: 0; /* Posicionamos la cabecera pegada arriba */
        position: fixed; /* Hacemos que la cabecera tenga una posición fija */
    }

    #sidebar {
        position: absolute;
        background-color: var(--clr-base);
        /* left: -260px; */
        left: -100%;
        min-height: 1200px !important;
        box-sizing: border-box;
    }

    #sidebar ul li:hover a {
        background: #444;
    }    

    .content{
        margin-top: 28px;
        margin-bottom: 30px;
    }

    input, select, textarea, input[type='date']{
        width: 90%;
    }

    input, select, textarea{
        padding: 14px 10px !important;
        /* -webkit-appearance: none; */
        font-size: 1.2em;
        color: #444 !important;
    }

    input[type='checkbox'], input[type='radio']{
        -webkit-appearance: checkbox;
        text-align: left !important;
        width: 20px !important;
    }

    .form-bloque > label{
        font-size: 0.9em;
    }


    input[type='date']{
        -webkit-appearance: none;
        font-size: 1.2em;
        padding: 14px 10px;
        border: 1px solid #ccc;
        border-radius: var(--border-radius); 
        background-color: #fff;
        font-family: Arial, Helvetica, sans-serif;
    }

    .btn {
        padding: 10px;
        font-size: 1em;
    }


    .info-alumno .div-1{
        width: 24%;
    }

    .info-alumno .div-2{
        width: 62%;
    }

    .info-alumno .div-3{
        width: 14%;
    }

    .info-alumno .div-3-sinfoto{
        width: 38%;
        text-align: right;
    }

    .info-alumno img{
        max-width: 100px !important;
        max-height: 150px !important;
    }

    .div-menu-1{ 
        width: 90% !important; 
        padding-right: 15px !important;
    }
    .div-menu-2{ 
        width: 10% !important; 
        font-size: 1.8em;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border-left: 1px solid #ccc !important; */
        padding-left: 15px !important;
    }


    .mosaico-bloque{
        flex-basis: 100%;
    }

    .bloque-75{
        width: 100%;
    }

    .txt_ayuda{
        font-size: 0.9em;
    }

    .card{
        background-color: #fff;
        margin: 3px;
        height: 150px;
        width: 48%;
        position: relative;
        border-radius: var(--border-radius);
    }

    .div_fam_item h3{
        font-size: 1.4em;
    }

    .div_fam_item{
        /* flex-direction: column; */
        flex-wrap:  wrap;
    }

    .div_fam_item div:first-child(){
        width: 40%;
    }

    .div_fam_item div:nth-child(2){
        width: 60%;
    }


    .div_fam_item div:last-child(){
        width: 100%;
    }


    /* ---- FORM ALTAS ----- */

    #form_alta_1 .w50{
        width: 95% !important;
    }



    .div_plato{
        flex-direction: column;
    }

    .div_plato__img{
        max-height: 15rem;
    }

    .div_tarjetas{
        flex-direction: column;
    }

    .tarjeta{
        width: 100%;
    }

    #pedidos_accion .w50, .fw50{
        width: 100% !important;
    }


    /* ------------ */

    .div_cols_contador {
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-content: flex-start;
        gap: 0.1rem;
    }

    .div_cols_contador > button{
        background-color: #fff !important;
    }
    
    .input_falso{
        border: none;
        width: 30px !important;
        padding-top: 0;
        padding-bottom: 0;
        height: 20px !important;
        margin: 0 !important;
    }


}