body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-y: scroll;
    scrollbar-width: none; /* Para Firefox */
    -ms-overflow-style: none; /* Para Internet Explorer y Edge */

}
body::-webkit-scrollbar {
    display: none; /* Para Chrome, Safari y Opera */
  }
#calendario {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.celda, .cabeceraMes{
    border: 1px solid #ccc;
}
.cabeceraMes{
    color: #000;
}
.mes {
    margin: 10px;
    text-align: center;
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
th {
    background-color: #f2f2f2;
}
.celda {
    -webkit-print-color-adjust:exact;
    cursor: pointer;
}
#leyenda {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 60px;
}
#leyenda div {
    padding: 5px;
    margin: 5px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
}
.color-muestra {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    -webkit-print-color-adjust:exact;
}
#coloresGuardados {
    margin-top: 10px;
}
#coloresGuardados button {
    margin: 2px;
    padding: 5px;
}
.cabecera_dias{
    -webkit-print-color-adjust:exact;
}
/*------------------------------RANGE-----------------------------------------------------*/
:root {
--color-principal-range: rgb(0, 0, 0);
}
.range-container {
position: relative;
}

input[type='range'] {
width: 300px;
margin: 18px 0;
-webkit-appearance: none;
}

input[type='range']:focus {
outline: none;
}

/* document.getElementById('lbTamano').value = '50'; */
input[type='range'] + #lbTamano {
background-color: #fff;
position: absolute;
top: -15px;
left: 110px;
width: 80px;
padding: 5px 0;
text-align: center;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Chrome & Safari */
input[type='range']::-webkit-slider-runnable-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 10px;
cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid var(--color-principal-range);
margin-top: -7px;
cursor: pointer;
}

/* Firefox */
input[type='range']::-moz-range-track {
background: var(--color-principal-range);
border-radius: 4px;
width: 100%;
height: 13px;
cursor: pointer;
}

input[type='range']::-moz-range-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid  var(--color-principal-range);
margin-top: -7px;
cursor: pointer;
}

/* IE */
input[type='range']::-ms-track {
background:  var(--color-principal-range);
border-radius: 4px;
width: 100%;
height: 13px;
cursor: pointer;
}

input[type='range']::-ms-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid  var(--color-principal-range);
margin-top: -7px;
cursor: pointer;
}
       
/*-------------------------------------------------------------------------------------------*/
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
  }
  
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/*kukukukukukukhip
.form-control:read-only,
.form-control[readonly] {
  background-color: #fff !important;
  opacity: 1 !important;
}

.form-control:read-only:focus,
.form-control[readonly]:focus {
  background-color: #fff !important;
  opacity: 1 !important;
}
*/

/*-----------------------------alert-----------------*/

    .custom-alert-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    /* Contenedor del alert */
    .custom-alert {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 300px;
    }

    /* Título del alert */
    .custom-alert h2 {
      margin-top: 0;
      font-size: 20px;
      color: #333;
    }

    /* Mensaje del alert */
    .custom-alert p {
      font-size: 16px;
      color: #666;
    }

    /* Botón de cerrar */
    .custom-alert button {
      margin-top: 15px;
      padding: 10px 20px;
      background-color: #007BFF;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .custom-alert button:hover {
      background-color: #0056b3;
    }

    /* Mostrar el alert */
    .custom-alert-overlay.active {
      visibility: visible;
      opacity: 1;
    }
.grisClaro{
/*
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;*/
  background-color: #f0f0f0 !important;
}

.effect_blur{
   animation:blur .75s ease-out infinite;
   text-shadow:0px 0px 1px #fff,
       0px 0px 2px #fff;
 }
 
 @keyframes blur{
  from{
      text-shadow:
    0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff;
  }
}
 


    /* CSS */
.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.1em;
  user-select: none;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox span.marca {
  width: 22px;
  height: 22px;
  border: 2px solid #e27730;
  border-radius: 6px;
  margin-right: 10px;
  display: inline-block;
  position: relative;
  background: #fff;
  transition: border-color 0.2s;
}

.custom-checkbox input[type="checkbox"]:checked + span {
  border-color: #e27730;
  background-color: #e27730;
}

.custom-checkbox span.marca::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  opacity: 0;
  transform: scale(0) rotate(45deg);
  transition: all 0.2s;
}

.custom-checkbox input[type="checkbox"]:checked + span.marca::after {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}