@charset "UTF-8";
@font-face {
  font-family: "Roboto Flex";
  src: url("../fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
}
.control-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.calculadora-form {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 0.3rem;
  background-color: rgb(45.7692307692, 51.1538461538, 59.2307692308);
  border: 1px solid #222;
  box-shadow: 0 0 10px #222;
  color: #fcfcfc;
  flex-direction: column;
  width: 50vw;
  margin: auto;
  max-width: 400px;
  /* Usamos > :first-child para afectar SOLO a las etiquetas principales y salvar las letras de los días (L,M,X) */
}
.calculadora-form fieldset > label:first-child {
  flex: 0 0 19ch;
}

.contenedor-dias-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 0rem;
  justify-content: space-between; /* Distribuye el espacio uniformemente */
  /* se replica el estilo de fieldset input y usando las variables globales  de varss*/
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid #444c58;
  background-color: rgb(34.6538461538, 38.7307692308, 44.8461538462);
  min-width: 0; /* Previene que el contenedor fuerce un desbordamiento */
}

.dia-clase-item {
  display: flex;
  flex-direction: column; /* Apila la letra arriba y el checkbox abajo */
  align-items: center; /* Centra el checkbox respecto a la letra horizontalmente */
  justify-content: center;
  gap: 1px;
  padding: 3px 3px;
  flex: 1; /* Permite que cada recuadro ocupe una fracción igual dentro del contenedor */
  white-space: nowrap;
}
.dia-clase-item label {
  margin: 0;
  cursor: pointer;
  flex: 0 1 auto; /* para anular el flex:1 heredado de _common.scss */
  min-width: 0; /* Anula el min-width: 14ch heredado de _common.scss */
  color: #fcfcfc;
  font-size: 0.75rem;
}

.contenedor-fechas-excluidas {
  display: flex;
  flex-direction: column; /* Apila los subcontenedores verticalmente */
  gap: 0.8rem; /* Separación entre el botón superior y las fechas inferiores */
  /* Se replica el estilo de fieldset input para mantener la armonía */
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid #444c58;
  background-color: rgb(45.7692307692, 51.1538461538, 59.2307692308);
  width: 100%;
}
.contenedor-fechas-excluidas:empty {
  display: none; /*para que se oculte cuando esta vacio*/
}

.contenedor-top-ex {
  display: flex;
  justify-content: flex-start; /* Alinea el botón a la izquierda */
}

.contenedor-bottom-ex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
}

.fecha-excluida-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #242424;
  color: #fcfcfc;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.fecha-excluida-item .boton-eliminar-fecha {
  cursor: pointer;
  font-weight: bold;
  padding: 0.2rem;
  transition: color 0.1s ease-in-out; /* Controla la velocidad del cambio al hacer hover (0.1 segundos) */
}
.fecha-excluida-item .boton-eliminar-fecha:hover {
  color: #2372cc;
}

.alerta {
  opacity: 0.75;
  font-size: 0.75rem;
  color: #fcfcfc;
  margin-top: 0.5rem;
}/*# sourceMappingURL=calculadora.css.map */