/* Ajustes de contraste para el calendario de Flatpickr: texto siempre negro,
   fondo claro. Evita el problema del selector nativo de fecha (texto blanco
   sobre celeste al editar un día/mes/año). */

.flatpickr-calendar {
    color: #222;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Cuando el calendario es "static" (dentro de un <dialog>, ver
   site-datepicker.js), queda en el flujo normal del DOM en vez de flotar
   sobre <body>, así que necesita su propio z-index para no quedar tapado
   por los campos que vienen después en el modal (Estado, Puntaje, etc). */
.flatpickr-calendar.static {
    z-index: 1000;
}

.flatpickr-day {
    color: #222;
}

.flatpickr-day.today {
    border-color: #1b1b1b;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #1b1b1b;
    border-color: #1b1b1b;
    color: #fff;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
span.flatpickr-weekday {
    color: #222;
}

/* El input visible que escribe/lee el usuario (altInput) usa el mismo
   estilo que el resto de los campos del formulario. */
input.flatpickr-input,
input.flatpickr-alt-input {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #222;
    background: #fff;
}

/* Flatpickr copia las clases del input original al altInput visible, pero
   no los estilos en línea. Esta clase mantiene el campo de fecha angosto
   dentro de filas en flex (ej. tabla de Fechas del taller). */
input.input-fecha-compacta {
    width: auto;
    min-width: 10rem;
}

/* Selección de texto legible dentro del campo de fecha (ahora es un input de
   texto normal, así que esto sí funciona, a diferencia del control nativo). */
input.flatpickr-alt-input::selection {
    background: #cfe3ff;
    color: #000;
}

/* Campo de texto + botón de calendario aparte (ver site-datepicker.js).
   El clic en el campo NUNCA abre el calendario: solo permite escribir la
   fecha directamente (ej. "07-10-2026"). El calendario es opcional, vía el
   botón 📅, útil para fechas cercanas pero no obligatorio para fechas
   lejanas como una fecha de nacimiento. */
.campo-fecha-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    /* Necesario para que el calendario "static" de Flatpickr (usado dentro
       de un <dialog>, ver site-datepicker.js) se ancle a este wrapper. Sin
       esto, position:absolute del calendario no encuentra un ancestro
       posicionado y termina calculado respecto a todo el documento -- se
       dibuja, pero fuera de lo visible. */
    position: relative;
}

.campo-fecha-wrapper input.flatpickr-alt-input {
    flex: 1 1 auto;
    /* Sin esto, un <input> dentro de un flex container no se achica/estira
       más allá de su ancho de contenido por defecto (min-width: auto) y el
       flex-grow no tiene efecto visible. */
    min-width: 0;
    width: auto;
}

/* Cuando el campo está dentro de un <dialog> (calendario "static", ver
   site-datepicker.js), Flatpickr inserta un <div class="flatpickr-wrapper">
   propio ENTRE .campo-fecha-wrapper y el input visible -- así que la regla
   de arriba (que apunta directo al input) deja de ser hijo directo del flex
   container y no tiene ningún efecto. Sin esto, el input queda con un ancho
   colapsado (por el width:100% de arriba compitiendo contra el
   display:inline-block de tamaño automático de .flatpickr-wrapper), lo que
   además descuadra la posición del calendario "static" que cuelga de este
   mismo div. */
.campo-fecha-wrapper > .flatpickr-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

/* Variante angosta para filas en flex (ej. tabla de Fechas del taller):
   aquí NO queremos que el campo de fecha ocupe todo el ancho disponible. */
.campo-fecha-wrapper-compacta {
    width: auto;
    flex: 0 0 auto;
}

.campo-fecha-wrapper-compacta input.flatpickr-alt-input {
    flex: 0 0 auto;
    width: 10rem;
    min-width: 10rem;
}

.boton-calendario {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}

.boton-calendario:hover {
    background: #f0f0f0;
}