.dia_pill {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 0.6rem;
    font: 600 0.68rem "Ubuntu", sans-serif;
    color: var(--texto_menor_enfasis);
    cursor: pointer;
}

.dia_pill.activo { background: var(--base); color: var(--base_clara); }

/* Hueco libre: chip informativo entre reservas ("Libre 9:00–16:00 · 7h"),
   con "+" para crear una reserva ahí mismo. Reemplaza a la grilla estilo
   Google Calendar — no colapsa con varios empleados porque siempre se
   filtra a uno solo (ver .chip en chips.css para ese filtro). */
.hueco_libre {
    background: transparent;
    border: 1.5px dashed var(--borde_tarjeta_interna);
    border-radius: 0.7rem;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hueco_libre_boton {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in oklch, var(--base) 15%, var(--tarjeta_interna));
    color: var(--base);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 0.8rem sans-serif;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.hueco_libre_boton:hover { transform: scale(1.1); }

.reserva_agenda {
    background: color-mix(in oklch, var(--base) 12%, var(--tarjeta_interna));
    border: 1.5px solid var(--base);
    border-radius: 0.7rem;
    padding: 0.65rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.reserva_agenda_hora {
    font: 700 0.78rem "Ubuntu", sans-serif;
    color: var(--base);
    flex-shrink: 0;
    min-width: 4.2rem;
}

.reserva_agenda_info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.reserva_agenda_cliente {
    font: 700 0.82rem "Ubuntu", sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reserva_agenda_servicio {
    font: 400 0.72rem "Ubuntu", sans-serif;
    color: var(--texto_menor_enfasis);
}

/* FINALIZADO sigue en la agenda (a diferencia de CANCELADO, que
   calendario.js ni pide) pero atenuado - ya pasó, no compite visualmente
   con lo pendiente (ver reglas_negocio.md "Reserva"). */
.reserva_agenda.finalizada,
.superposicion_fila.finalizada {
    opacity: 0.5;
}

/* Grupo de reservas superpuestas (mismo profesional, horarios que se
   cruzan - la app lo permite con aviso al crear/reprogramar, ver
   reglas_negocio.md "Reserva"). --importante (tono de aviso), no --mal:
   no es un error, ya se confirmó. Cada fila adentro sigue siendo
   clickeable para editar esa reserva puntual. */
.superposicion_grupo {
    border: 1.5px solid var(--importante);
    background: color-mix(in oklch, var(--importante) 10%, var(--tarjeta_interna));
    border-radius: 0.8rem;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.superposicion_titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.35rem 0.3rem;
    font: 700 0.68rem "Ubuntu", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: color-mix(in oklch, var(--importante) 70%, var(--texto));
}

.superposicion_fila {
    background: var(--tarjeta_interna);
    border: 1px solid var(--borde_tarjeta_interna);
    border-radius: 0.6rem;
    padding: 0.55rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.superposicion_fila_hora {
    font: 700 0.76rem "Ubuntu", sans-serif;
    color: var(--importante);
    flex-shrink: 0;
    min-width: 4.2rem;
}

.superposicion_fila_info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.superposicion_fila_cliente {
    font: 700 0.8rem "Ubuntu", sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.superposicion_fila_servicio {
    font: 400 0.71rem "Ubuntu", sans-serif;
    color: var(--texto_menor_enfasis);
}

.fab_nueva_reserva {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--base);
    color: var(--base_clara);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 1.5rem sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .4);
    transition: transform .15s ease;
}

.fab_nueva_reserva:hover { transform: scale(1.06); }