/* Sistema de turnos: ajustes de layout de la pantalla de solicitud (sobre castelli-2026.css) */

/* Franja superior: Receta ONLINE + primer turno disponible */
.turnos-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    background: #F3F7F8;
    border: 1px solid #DCE6E8;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 22px;
}
.turnos-cta__receta {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.turnos-cta__receta span {
    font-weight: 600;
    color: #173A40;
}
.turnos-cta__proximo {
    flex: 1 1 240px;
    font-size: 14px;
    line-height: 1.5;
    color: #56676C;
}
.turnos-cta__proximo .zmdi { color: #0FB3B0; margin-right: 4px; }
.turnos-cta__proximo a { font-weight: 600; }

/* Calendario: que ocupe el ancho de su columna en vez de desbordar */
html body .date-picker-inline { padding: 12px 14px; }
html body .date-picker-inline .bootstrap-datetimepicker-widget {
    width: 100% !important;
    min-width: 0;
    padding: 0;
}
html body .date-picker-inline .bootstrap-datetimepicker-widget table { width: 100%; table-layout: fixed; }
html body .bootstrap-datetimepicker-widget table td.day { width: auto; }
html body .bootstrap-datetimepicker-widget table th.picker-switch { white-space: nowrap; }

/* Columna de horarios */
html body #calendario-wrapper .alert.horarios-info { margin: 0; line-height: 1.55; }
html body #table-horarios th { text-align: center; }
html body #table-horarios th span { color: #0A7F7D; }

@media (max-width: 767px) {
    .turnos-cta { padding: 14px 16px; }
    .turnos-cta__receta { width: 100%; justify-content: space-between; }
    html body #calendario-wrapper .col-sm-5 { margin-top: 18px; }
}

/* Neutralizar el skin del datepicker del tema admin (datepicker.css) para que mande castelli-2026 */
html body .date-picker-inline .datepicker table thead tr th,
html body .date-picker-inline .datepicker table tbody tr td {
    padding: 0;
    background: none;
    color: #173A40;
}
html body .date-picker-inline .datepicker table thead tr:first-child th { padding: 6px 0 10px; }
html body .date-picker-inline .datepicker table thead tr:first-child th:hover { background: #F3F7F8; }
html body .date-picker-inline .datepicker table thead tr th .glyphicon {
    width: 32px; height: 32px; line-height: 32px;
    border-radius: 50%;
    color: #173A40;
}
html body .date-picker-inline .datepicker table thead tr th:hover .glyphicon { background: #E3F4F3; }
html body .date-picker-inline .datepicker table thead tr:last-child th { padding: 4px 0 8px; color: #7F8F93; }
html body .date-picker-inline .datepicker table thead tr:last-child th:first-child,
html body .date-picker-inline .datepicker table thead tr:last-child th:last-child { padding-left: 0; padding-right: 0; }
html body .date-picker-inline .datepicker table tbody tr:last-child td { padding-bottom: 0; }
html body .date-picker-inline .datepicker table td.day {
    width: auto;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    position: static;
}
html body .date-picker-inline .datepicker table td.day:before { display: none; }
html body .date-picker-inline .datepicker table td.day.disabled { color: #B8C3C6; }
html body .date-picker-inline .datepicker table td.day.today.today { box-shadow: inset 0 0 0 2px #0FB3B0; }
html body .date-picker-inline .datepicker table td.day.active.active { color: #fff; background: #0A7F7D; }
html body .date-picker-inline .datepicker table thead tr:last-child:not(:only-child) { background: none; }
html body .date-picker-inline .datepicker table thead tr:last-child th { font-size: 12px; text-transform: uppercase; }

/* Móvil: menos padding, la tarjeta aprovecha el ancho */
@media (max-width: 767px) {
    html body .contact-us > .margen { margin: 24px 0 0; padding: 22px 14px; }
    html body .turnos-cta { padding: 12px 14px; gap: 10px 16px; margin-bottom: 16px; }
    html body .date-picker-inline { padding: 8px 6px; }
    html body #calendario-wrapper .alert.horarios-info { padding: 12px 14px; }
    html body #calendario-wrapper .col-sm-5 { margin-top: 14px; }
    html body #calendario-wrapper .row { margin-left: -10px; margin-right: -10px; }
    html body #calendario-wrapper .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }
}