:root{ --brand-grad: linear-gradient(90deg,#a50e0e,#c73333 60%,#1c7c3b); }
body{ background:#f7f9fb; }
.card { border:none; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.brand-bar{ background:var(--brand-grad); color:#fff; }
.brand-dot{width:10px;height:10px;border-radius:50%;}
.brand-green{background:#1c7c3b}
.brand-red{background:#dc3545}
.brand-blue{background:#3b82f6}
.brand-amber{background:#ffc107}
.brand-gray{background:#adb5bd}
.section-title{ font-weight:600; letter-spacing:.2px; }

.stepper { counter-reset: step; }
.stepper .step{ display:flex; align-items:center; gap:.5rem; color:#6c757d; font-weight:600; }
.stepper .step:not(:last-child)::after{ content:""; flex:1; height:2px; background:#e9ecef; margin:0 1rem; }
.stepper .step .badge{ width:32px; height:32px; display:inline-grid; place-items:center; border-radius:50%; font-weight:700; background:#e9ecef; color:#6c757d; }
.stepper .step.active .badge{ background:#0d6efd; color:#fff; }
.stepper .step.done   .badge{ background:#198754; color:#fff; }
.stepper .step.active, .stepper .step.done{ color:#212529; }

.service-btn{ border:1px solid #dee2e6; border-radius:12px; background:#fff; padding:1rem; width:100%; text-align:left; transition:.15s ease; }
.service-btn:hover{ border-color:#0d6efd; box-shadow:0 6px 18px rgba(13,110,253,.15); }
.service-btn.active{ border-color:#198754; box-shadow:0 6px 18px rgba(25,135,84,.18); }
.service-name{ font-weight:600; }
.service-time{ font-size:.875rem; color:#6c757d; }

.flatpickr-day.fp-disponible { background:#d1f7d6; border-color:#198754; color:#0a3622; }
.flatpickr-day.fp-completo   { background:#fad7d7; border-color:#dc3545; color:#58151c; }
.flatpickr-day.fp-sinpers    { background:#ffe6b3; border-color:#ffc107; color:#5a4500; }
.flatpickr-day.fp-cerrado    { background:#e9ecef; border-color:#adb5bd; color:#495057; }
.flatpickr-day.fp-festivo    { background:#dbeafe; border-color:#3b82f6; color:#0b3b77; }
.flatpickr-day.fp-pasado     { opacity:.55; }
.flatpickr-day[aria-disabled="true"] { cursor:not-allowed; text-decoration:line-through; }

.slot-btn{ min-width:110px; margin:.25rem; }
#confirmacion-final .big-check{ font-size:64px; line-height:1; }
#confirmacion-final .code-badge{ font-size:1.25rem; }

/* Leyenda visual (Paso 2) */
.legend { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; }
.legend-item { display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:#495057; }
.legend-dot { width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px rgba(0,0,0,.05) inset; }
.legend-green{ background:#1c7c3b; }
.legend-red{ background:#dc3545; }
.legend-amber{ background:#ffc107; }
.legend-blue{ background:#3b82f6; }
.legend-gray{ background:#adb5bd; }

/* ========================================================= */
/* Adaptación para Tablets (min-width: 768px) y más grande  */
/* ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Aumentar el tamaño de la fuente base para todo */
    body { font-size: 1.1rem; }
    
    /* Aumentar el padding y espaciado de las cards */
    .card-body { padding: 1.5rem !important; }

    /* Estilos del Stepper (Pasos) */
    .stepper .step { font-size: 1.1rem; }
    .stepper .step .badge { width: 40px; height: 40px; font-size: 1.1rem; }

    /* Botones de Servicio */
    .service-btn { padding: 1.25rem; }
    .service-name { font-size: 1.2rem; }
    .service-time { font-size: 1rem; }

    /* Formulario/Input Labels y Controles */
    .form-label { font-size: 1rem; }
    .form-control { padding: .75rem 1rem; font-size: 1rem; }
    .btn { padding: .75rem 1.25rem; font-size: 1rem; }

    /* Títulos de sección */
    .section-title { font-size: 1.25rem; }

    /* Botones de Horarios (Slots) */
    .slot-btn { min-width: 120px; font-size: 1rem; margin: .3rem; padding: .6rem 1rem; }

    /* ========================================================= */
    /* Agrandar el calendario (Flatpickr) para mejor interacción */
    /* ========================================================= */
    .flatpickr-calendar {
      max-width: none; /* Asegura que el contenedor pueda crecer */
      width: 100%;
      font-size: 1.1rem;
    }
    /* El encabezado del calendario */
    .flatpickr-calendar .flatpickr-months {
      font-size: 1.1rem;
    }
    /* Días de la semana */
    .flatpickr-calendar .flatpickr-weekday {
      font-size: 1rem;
    }
    /* Días del calendario (lo más importante) */
    .flatpickr-calendar .flatpickr-day {
      width: 14.28%; /* Para asegurar que haya 7 por fila */
      height: 38px; /* Altura del día */
      line-height: 38px; /* Centrar el texto */
      font-size: 1.1rem;
      margin: 0;
      border-radius: 6px; /* Bordes más suaves */
    }
    /* La semana/contenedor de días */
    .flatpickr-calendar .dayContainer {
        width: 100%;
    }
    /* Aumentar el tamaño de los botones de cambio de mes */
    .flatpickr-prev-month, .flatpickr-next-month {
      padding: 10px;
    }

    .flatpickr-innerContainer
    {
      display: contents;
    }

    /* Leyenda (paso 2) */
    .legend { font-size: 1rem; }
    .legend-dot { width: 14px; height: 14px; }
}

/* Estilos específicos para la confirmación final */
#confirmacion-final .big-check { font-size: 80px; }
#confirmacion-final .code-badge { font-size: 1.5rem; }