/* =========================================================
   CALENDARIO LABORAL
   ========================================================= */
.calendario-container{
width:100%;
max-width:1100px;
margin:20px auto 40px;
background:#fff;
border:1px solid #dfe7e3;
border-radius:8px;
box-shadow:0 5px 18px rgba(0,0,0,.07);
overflow:hidden;
font-family:"Yanone Kaffeesatz",sans-serif;
box-sizing:border-box;
}
/* =========================================================
   TÍTULO
   ========================================================= */
.calendario-titulo{
display:flex;
align-items:flex-start;
gap:7px;
padding:15px 16px 10px;
background:#fff;
border-bottom:0;
line-height:1;
}
.calendario-icono{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:18px!important;
height:20px!important;
margin-top:0!important;
font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
font-size:15px!important;
line-height:20px!important;
flex-shrink:0!important;
position:static!important;
}
.calendario-titulo-texto{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
min-width:0;
}
.calendario-titulo-principal{
color:#0756a6;
/*font-family:Arial,sans-serif;*/
font-family:"Yanone Kaffeesatz",sans-serif;
font-size:18px;
font-weight:700;
line-height:20px;
white-space:nowrap;
}
.calendario-titulo-subtitulo{
margin-top:0;
color:#168447;
/*font-family:Arial,sans-serif;*/
font-family:"Yanone Kaffeesatz",sans-serif;
font-size:14px;
font-weight:400;
line-height:15px;
}
/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.calendario-navegacion{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:auto!important;
height:38px!important;
margin:2px 10px 0!important;
padding:3px 6px!important;
gap:3px!important;
background:#f1f7f4!important;
border:1px solid #e0eae5!important;
border-radius:6px 6px 0 0!important;
box-sizing:border-box!important;
position:static!important;
float:none!important;
}
.calendario-navegacion button{
box-sizing:border-box!important;
margin:0!important;
padding:0!important;
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
float:none!important;
transform:none!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
visibility:visible!important;
opacity:1!important;
z-index:auto!important;
}
/* =========================================================
   FLECHA ANTERIOR
   ========================================================= */
#calendario-prev{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
height:28px!important;
min-height:28px!important;
max-height:28px!important;
background:transparent!important;
color:#087a5a!important;
border:0!important;
border-radius:4px!important;
font-family:Arial,sans-serif!important;
font-size:23px!important;
font-weight:400!important;
line-height:28px!important;
cursor:pointer!important;
flex:0 0 28px!important;
}
/* =========================================================
   MES
   ========================================================= */
.calendario-mes{
width:auto!important;
min-width:0!important;
flex:1 1 auto!important;
text-align:center!important;
color:#087a5a!important;
font-size:14px!important;
font-weight:700!important;
white-space:nowrap!important;
line-height:28px!important;
margin:0!important;
padding:0!important;
position:static!important;
}
/* =========================================================
   FLECHA SIGUIENTE
   ========================================================= */
#calendario-next{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
height:28px!important;
min-height:28px!important;
max-height:28px!important;
background:transparent!important;
color:#087a5a!important;
border:0!important;
border-radius:4px!important;
font-family:Arial,sans-serif!important;
font-size:23px!important;
font-weight:400!important;
line-height:28px!important;
cursor:pointer!important;
flex:0 0 28px!important;
}
/* =========================================================
   BOTÓN HOY
   ========================================================= */
#calendario-hoy{
width:46px!important;
min-width:46px!important;
max-width:46px!important;
height:27px!important;
min-height:27px!important;
max-height:27px!important;
background:#168447!important;
color:#fff!important;
border:0!important;
border-radius:5px!important;
font-size:12px!important;
font-weight:700!important;
line-height:27px!important;
cursor:pointer!important;
flex:0 0 46px!important;
}
/* =========================================================
   EFECTOS
   ========================================================= */
#calendario-prev:hover,
#calendario-next:hover,
#calendario-prev:active,
#calendario-next:active{
background:#dfeee7!important;
color:#056447!important;
}
#calendario-prev:active,
#calendario-next:active{
transform:scale(1.18)!important;
}
#calendario-hoy:hover{
background:#116c39!important;
}
#calendario-hoy:active{
background:#116c39!important;
transform:scale(1.08)!important;
}
/* =========================================================
   EFECTO AL VOLVER A HOY
   ========================================================= */
.calendario-dia.hoy .numero.parpadeo{
animation:calendarioNumeroParpadeo .75s ease-in-out 2;
}
.calendario-semana div.parpadeo{
animation:calendarioSemanaParpadeo .75s ease-in-out 2;
}
@keyframes calendarioNumeroParpadeo{
0%,100%{
opacity:1;
transform:scale(1);
}
50%{
opacity:.2;
transform:scale(1.4);
}
}
@keyframes calendarioSemanaParpadeo{
0%,100%{
opacity:1;
transform:scale(1);
}
50%{
opacity:.2;
transform:scale(1.18);
}
}
/* =========================================================
   DÍAS DE LA SEMANA
   ========================================================= */
.calendario-semana{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:0;
margin:0 10px;
padding:0;
border-top:1px solid #d9e5df;
border-bottom:1px solid #d9e5df;
background:#f7faf8;
}
.calendario-semana div{
padding:6px 2px;
text-align:center;
color:#42534b;
font-size:11px;
font-weight:700;
line-height:16px;
transition:background .2s ease,color .2s ease;
}
.calendario-semana div.dia-semana-hoy{
background:#dcefe6;
color:#087a5a;
box-shadow:inset 0 -2px 0 #168447;
}
/* =========================================================
   CUADRÍCULA
   ========================================================= */
.calendario-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:0;
margin:0 10px 10px;
background:#dfe5e2;
border-left:1px solid #dfe5e2;
border-right:1px solid #dfe5e2;
}
.calendario-dia{
width:100%;
aspect-ratio:1 / 1;
min-height:0;
display:flex;
align-items:center;
justify-content:center;
position:relative;
background:#fff;
border-right:1px solid #dfe5e2;
border-bottom:1px solid #dfe5e2;
cursor:pointer;
box-sizing:border-box;
transition:box-shadow .15s ease,background .15s ease;
}
.calendario-dia:nth-child(7n){
border-right:0;
}
.calendario-dia:hover{
box-shadow:inset 0 0 0 1px #168447;
z-index:1;
}
.calendario-dia .numero{
font-family:Arial,sans-serif;
font-size:13px;
color:#17221e;
}
.calendario-dia.otro-mes{
background:#e8ecea;
}
.calendario-dia.otro-mes .numero{
color:#8b9691;
}
.calendario-dia.descanso{
background:#e1e4e2;
}
.calendario-dia.festivo{
background:#fff500;
}
.calendario-dia.vacaciones{
background:#8fc34a;
}
.calendario-dia.inhabil{
background:#ffad00;
}
.calendario-dia.laboral{
background:#d8ead2;
}
/* =========================================================
   HOY
   ========================================================= */
.calendario-dia.hoy{
box-shadow:inset 0 0 0 2px #168447!important;
z-index:2;
}
.calendario-dia.hoy .numero{
font-weight:700;
color:#087a5a;
}
.calendario-dia.seleccionado{
box-shadow:inset 0 0 0 2px #168447!important;
z-index:3;
}
.calendario-dia.hoy.seleccionado{
box-shadow:inset 0 0 0 2px #087a5a!important;
}
/* =========================================================
   LEYENDA
   ========================================================= */
.calendario-leyenda{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin:0 10px 10px;
padding:3px 2px;
color:#555;
font-size:12px;
}
.calendario-leyenda>div{
display:flex;
align-items:center;
gap:4px;
}
.leyenda-color{
width:9px;
height:9px;
display:inline-block;
border-radius:2px;
flex-shrink:0;
}
.leyenda-color.descanso{
background:#d9dbda;
}
.leyenda-color.festivo{
background:#fff500;
}
.leyenda-color.vacaciones{
background:#8fc34a;
}
.leyenda-color.inhabil{
background:#ffad00;
}
/* =========================================================
   INFORMACIÓN DEL EVENTO
   ========================================================= */
.calendario-evento{
margin:0 10px 10px;
}
.evento-vacio{
padding:11px;
text-align:center;
color:#777;
background:#f7f8f8;
border-radius:6px;
font-size:12px;
}
.evento-info{
padding:6px 11px;
border-radius:6px;
background:#fffef0;
border-left:4px solid #d4c900;
}
.evento-info h3{
margin:0 0 2px;
color:#777000;
font-size:16px;
font-weight:400;
line-height:19px;
}
.evento-info p{
margin:2px 0;
color:#777;
font-size:12px;
line-height:16px;
}
.evento-info.festivo{
background:#fffef0;
border-left-color:#d4c900;
}
.evento-info.vacaciones{
background:#f3f9ed;
border-left-color:#75ad39;
}
.evento-info.inhabil{
background:#fff6e7;
border-left-color:#e89a00;
}
.evento-info.descanso{
background:#f4f5f5;
border-left-color:#aaa;
}
.evento-info.laboral{
background:#f0f8ed;
border-left-color:#168447;
}
/* =========================================================
   TABLET
   ========================================================= */
@media(max-width:900px){
.calendario-container{
max-width:100%;
}
}
/* =========================================================
   MÓVIL
   ========================================================= */
@media(max-width:700px){
.calendario-container{
width:100%;
max-width:100%;
margin:20px auto 30px;
}
.calendario-titulo{
padding:8px 14px 5px;
gap:6px;
}
.calendario-icono{
width:17px!important;
height:19px!important;
font-size:14px!important;
line-height:19px!important;
}
.calendario-titulo-principal{
font-size:16px;
line-height:19px;
}
.calendario-titulo-subtitulo{
font-size:12px;
line-height:14px;
}
.calendario-navegacion{
height:37px!important;
margin:2px 8px 0!important;
padding:3px 5px!important;
gap:2px!important;
}
#calendario-prev,
#calendario-next{
width:28px!important;
min-width:28px!important;
max-width:28px!important;
height:27px!important;
min-height:27px!important;
max-height:27px!important;
font-size:22px!important;
line-height:27px!important;
flex:0 0 28px!important;
}
.calendario-mes{
font-size:13px!important;
line-height:27px!important;
}
#calendario-hoy{
width:44px!important;
min-width:44px!important;
max-width:44px!important;
height:26px!important;
min-height:26px!important;
max-height:26px!important;
font-size:11px!important;
line-height:26px!important;
flex:0 0 44px!important;
}
.calendario-semana{
margin:0 8px;
}
.calendario-semana div{
padding:5px 2px;
font-size:10px;
line-height:15px;
}
.calendario-grid{
margin:0 8px 9px;
}
.calendario-dia{
aspect-ratio:1 / 1;
min-height:0;
}
.calendario-dia .numero{
font-size:12px;
}
.calendario-leyenda{
margin:0 8px 9px;
gap:8px;
font-size:12px;
}
.calendario-evento{
margin:0 8px 9px;
}
.evento-vacio{
padding:10px;
font-size:12px;
}
.evento-info{
padding:5px 10px;
}
.evento-info h3{
font-size:16px;
line-height:19px;
margin-bottom:1px;
}
.evento-info p{
font-size:12px;
line-height:15px;
margin:1px 0;
}
}