/* planners.css */

/* Estilo general para contenedor del planner */
.planner-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* Título del fármaco */
.planner-title {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Sección de información del fármaco */
.drug-info {
  margin-bottom: 2rem;
  text-align: center;
}

.drug-info h3 {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #2980b9;
  text-align: center;
}

.drug-info p {
  margin: 0.2rem 0 0.5rem;
  font-size: 1rem;
  color: #333;
  line-height: 1.4;
}

/* Ajuste específico para listas que siguen a párrafos */
.drug-info p + ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

.drug-info .alternativeLabel {
  background-color: #eef6fc;
  border-left: 4px solid #3498db;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-style: italic;
}

/* Formulario del planner */
.planner-form label {
  display: block;
  margin: 0.5rem 0 0.2rem;
  font-weight: 500;
  color: #2c3e50;
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

.planner-form h3 {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #2980b9;
  text-align: center;
}

.planner-form input[type="date"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 180px;
  margin-bottom: 1rem;
  text-align: center;
}

.planner-form input[type="number"] {
  padding: 0.4rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 60px;
  margin-bottom: 1rem;
  text-align: center;
  appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}

.planner-form input[type="number"]::-webkit-inner-spin-button,
.planner-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.planner-form, #results-container {
  max-width: 800px;
  margin: 0 auto 2rem;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

/* Opcional: poner un fondo o bordes diferentes para diferenciarlos */
.planner-form {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
}

#results-container {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0,0,0,0.03);
  min-height: 120px; /* para que no "salte" mucho al cargar */
}

/* Asegura que el contenido no haga crecer el contenedor */
#results {
  overflow-wrap: break-word;
  word-break: break-word;
}


.phase-options {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.phase-options label {
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: 0.5rem;
}

/* Botón de cálculo */
.calculate-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.8rem 1.6rem;
  font-size: 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 1rem;
  font-weight: bold;
  display: block;
  margin: 1rem auto 0;
}

.calculate-btn:hover {
  background-color: #2980b9;
}

/* Resultado de fechas */
.result-section {
  margin-top: 2rem;
}

.result-section ul {
  list-style: none;
  padding: 0;
}

.result-section li {
  font-size: 1.1rem;
  color: #2c3e50;
  margin: 0.3rem 0;
  text-align: center;
}

.result-label {
  font-weight: bold;
  color: #2980b9;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Ajustes visuales del input de fecha */
input[type="date"] {
  padding: 0.4rem;
  font-size: 1rem;
  text-align: center;
  border: 1.5px solid #bbb;
  border-radius: 6px;
  width: 180px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  display: block;
}

/* Títulos de las fases (Inducción, Mantenimiento) */
.phase-title {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #2c3e50;
    font-size: 1.1em;
    list-style: none;
}

/* Fechas de cada fase */
.phase-date {
    
    margin-bottom: 3px;
    list-style: none;
}

#datesList {
    list-style-type: none; /* Esto quita los puntos/viñetas */
    padding-left: 0;      /* Opcional: Esto quita el espacio por defecto a la izquierda */
}


/* Estilos para el contenedor principal de las opciones */
fieldset {
    border: 1px solid #ccc; /* Un borde sutil para el recuadro */
    border-radius: 8px;      /* Esquinas redondeadas para un look más suave */
    padding: 15px 20px;      /* Espacio interno para que no se vea apretado */
    margin-bottom: 20px;     /* Espacio debajo del fieldset si hay más contenido */
    background-color: #f9f9f9; /* Un fondo ligeramente gris para destacarlo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Una pequeña sombra para darle profundidad */
}


/* Estilos para el título del fieldset */
legend {
    font-size: 1.1em;        /* Un poco más grande que el texto normal */
    font-weight: bold;       /* Negrita para el título */
    color: #333;             /* Un color de texto oscuro pero no negro puro */
    padding: 0 10px;         /* Espacio alrededor del texto del legend */
    background-color: #f9f9f9; /* Mismo fondo que el fieldset para que se integre bien */
    border-radius: 5px;      /* Esquinas redondeadas para el legend */
    margin-left: -5px;       /* Ajusta la posición si es necesario */
}

/* Estilos para las etiquetas de los checkboxes */
fieldset label {
    display: inline-block;   /* Asegura que estén en línea y permite aplicar margen */
    margin-right: 20px;      /* Espacio entre "Inducción" y "Mantenimiento" */
    cursor: pointer;         /* Indica que es clickeable */
    font-size: 1em;          /* Tamaño de fuente estándar */
    color: #555;             /* Color de texto para las opciones */
}

ul.no-bullets {
  list-style-type: none !important;
  padding-left: 1.2em; /* Ajusta este valor si quieres más o menos sangría */
  margin: 0;
}

fieldset {
  max-width: 300px; 
  margin-left: auto;
  margin-right: auto;
}

#maintenanceDoseField {
  display: none;
}
#maintenanceDoseField.visible {
  display: block;
}