@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

body{
    font-family: 'Inter', sans-serif;
    background: #f5f7fb;
    color: #334155;
}
h1,h2,h3,h4,h5{
    font-weight: 600;
}


.text-color-agendamiento {
    color: #0a1f44bf;
}
.btn-sucursal {
    height: 40px; overflow: hidden; line-height: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    white-space: normal; word-break: break-word; text-align: center; 
    display: flex; justify-content: center; align-items: center;
}
.btn-servicio {
    height: 20px; overflow: hidden; line-height: 1;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    white-space: normal; word-break: break-word; text-align: center; 
    display: flex; justify-content: center; align-items: center;
}
.btn-especialista {
    height: 20px; overflow: hidden; line-height: 1;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    white-space: normal; word-break: break-word; text-align: center; 
    display: flex; justify-content: center; align-items: center;
}

.font-s-p8 { font-size: .8rem; }
.font-s-p875 { font-size: .875rem; }

.error-campo { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }

@media (min-width: 600px) {
    .contenido-agendamiento-max-width {
        max-width: 750px;
    }
}

/* ====== Rediseño agendamiento ====== */
:root {
    --agenda-azul: #0a1f44;
    --agenda-azul-num: #1565d8;
    --agenda-verde: #28a745;
    --agenda-borde: #e5e9f2;
    --agenda-gris: #8a94a6;
    --agenda-sel-gris: #dfe5ee;
}

@media (min-width: 992px) {
    .contenido-agendamiento-max-width { max-width: 1080px; }
}

.agenda-card { border-radius: 12px; }

/* Cabecera de la empresa con imagen de fondo */
.agenda-cabecera {
    display: flex; align-items: center; gap: 20px;
    border-radius: 14px; padding: 24px 30px; overflow: hidden;
    min-height: 168px;
    background-color: #eef4fc;
    background-image: linear-gradient(to right, rgba(238,244,252,.96) 0%, rgba(238,244,252,.80) 24%, rgba(238,244,252,.25) 42%, rgba(238,244,252,0) 56%), url("../img/cabeceraAgendamiento.png");
    background-size: 0% 0%, auto 100%; /* background-position: center, right center; */ background-repeat: no-repeat;
    box-shadow: 0 1px 3px rgba(10,31,68,.08);
}
.agenda-cabecera-logo {
    flex: 0 0 auto; width: 92px; height: 92px; border-radius: 16px; overflow: hidden;
    border: 1px solid #d3e2f6; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(10,31,68,.08);
}
.agenda-cabecera-logo img { width: 100%; height: 100%; object-fit: contain; }
.agenda-cabecera-info { min-width: 0; max-width: 60%; }
.agenda-cabecera-nombre { font-size: 1.7rem; font-weight: 700; color: var(--agenda-azul); margin: 0 0 8px; line-height: 1.15; }
.agenda-cabecera-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.agenda-cabecera-datos span { color: #5a6b85; font-size: .9rem; font-weight: 500; }
.agenda-cabecera-datos i { color: var(--agenda-azul-num); margin-right: 6px; }
.agenda-cabecera-sep { color: #b3c2da; font-weight: 400; }
@media (max-width: 575px) { .agenda-cabecera-sep { display: none; } }
.agenda-cabecera-detalle { color: #5a6b85; font-size: .85rem; margin: 10px 0 0; line-height: 1.4; }

@media (max-width: 991px) {
    .agenda-cabecera-info { max-width: 70%; }
}
@media (max-width: 575px) {
    .agenda-cabecera {
        flex-direction: column; text-align: center; padding: 20px; gap: 14px;
        background-image: linear-gradient(rgba(238,244,252,.94), rgba(238,244,252,.94)), url("../img/cabeceraAgendamiento1.png");
        background-position: center; background-size: 0% 0%, 100% 130%;
    }
    .agenda-cabecera-info { max-width: 100%; }
    .agenda-cabecera-nombre { font-size: 1.4rem; }
    .agenda-cabecera-datos { justify-content: center; }
    .agenda-cabecera-datos span { color: #000; }
}

/* Paso a dos columnas: info izquierda, contenido derecha */
.agenda-paso { display: flex; gap: 24px; align-items: flex-start; }
.agenda-paso-info { flex: 0 0 240px; display: flex; gap: 12px; }
.agenda-paso-contenido { flex: 1; min-width: 0; }
.agenda-paso-num {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--agenda-azul-num); color: #fff; font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.agenda-paso-num.completado { background: var(--agenda-verde); }
.agenda-paso-titulo { font-weight: 700; color: var(--agenda-azul); margin: 0; font-size: 1.05rem; }
.agenda-paso-sub { color: var(--agenda-gris); font-size: .85rem; margin: 2px 0 0; }

@media (max-width: 767px) {
    .agenda-paso { flex-direction: column; gap: 14px; align-items: stretch; }
    .agenda-paso-info { flex: none; }
    .agenda-paso-contenido { width: 100%; }
}

/* Paso fecha+hora: calendario izquierda, sesiones derecha; en móvil apilado */
.agenda-fechahora { display: flex; flex-direction: column; gap: 16px; }
.agenda-fechahora-cal { flex: 0 0 auto; }
.agenda-fechahora-sesiones { flex: 1; min-width: 0; }
@media (min-width: 992px) {
    .agenda-fechahora { flex-direction: row; gap: 24px; align-items: flex-start; }
}
.agenda-fechahora-sesiones .agenda-horas-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }

/* Calendario */
.agenda-calendario { max-width: 320px; margin: 0 auto; border: 1px solid var(--agenda-borde); border-radius: 10px; padding: 12px; }
.agenda-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.agenda-cal-titulo { font-weight: 600; color: var(--agenda-azul); text-transform: capitalize; font-size: .95rem; }
.agenda-cal-nav { border: none; background: transparent; color: var(--agenda-azul-num); cursor: pointer; padding: 4px 10px; font-size: .9rem; border-radius: 6px; }
.agenda-cal-nav:hover { background: #eaf1fb; }
.agenda-cal-nav:disabled { color: #c7ccd6; cursor: not-allowed; background: transparent; }
.agenda-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.agenda-cal-dias-sem span { font-size: .7rem; color: var(--agenda-gris); padding: 4px 0; font-weight: 600; }
.agenda-cal-dia { padding: 7px 0; font-size: .85rem; border-radius: 50%; cursor: pointer; color: var(--agenda-azul); transition: background .12s ease; }
.agenda-cal-dia:hover:not(.vacio):not(.pasado) { background: #55c16e; }
.agenda-cal-dia.vacio { cursor: default; }
.agenda-cal-dia.pasado { color: #c7ccd6; cursor: not-allowed; }
.agenda-cal-dia.seleccionado { background: var(--agenda-verde); color: #fff; }

/* Tarjeta de opción (sucursal / servicio) */
.agenda-opcion-card {
    position: relative; display: flex; align-items: center; gap: 10px; height: 100%;
    border: 1px solid var(--agenda-borde); border-radius: 10px; padding: 12px; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.agenda-opcion-card:hover { border-color: var(--agenda-azul-num); }
.agenda-opcion-card.seleccionada { border-color: var(--agenda-azul-num); background: var(--agenda-sel-gris); box-shadow: none; }
.agenda-opcion-icon { color: var(--agenda-azul-num); font-size: 1.1rem; flex: 0 0 auto; }
.agenda-opcion-info { display: flex; flex-direction: column; min-width: 0; }
.agenda-opcion-nombre { font-weight: 600; color: var(--agenda-azul); font-size: .9rem; }
.agenda-opcion-dir { color: var(--agenda-gris); font-size: .78rem; }
.agenda-opcion-check { position: absolute; top: 8px; right: 8px; color: var(--agenda-verde); }

/* Especialista */
.agenda-especialista-card {
    display: flex; align-items: center; gap: 12px; border: 1px solid var(--agenda-borde);
    border-radius: 10px; padding: 12px; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.agenda-especialista-card:hover { border-color: var(--agenda-azul-num); }
.agenda-especialista-card.seleccionada { border-color: var(--agenda-azul-num); background: var(--agenda-sel-gris); box-shadow: none; }
.agenda-especialista-avatar { font-size: 1.9rem; color: var(--agenda-gris); flex: 0 0 auto; }
.agenda-especialista-info { min-width: 0; }
.agenda-especialista-meta { display: flex; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.agenda-rating { color: #f4a900; font-size: .8rem; }
.agenda-badge-disp { background: #e6f7ec; color: var(--agenda-verde); font-size: .72rem; padding: 1px 8px; border-radius: 20px; }

/* Aviso (sin datos disponibles) - naranja tirando a rojo */
.agenda-aviso {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid #f5b9ab; background: #fdeeea; border-radius: 10px; padding: 14px 16px;
}
.agenda-aviso-icon { font-size: 1.5rem; color: #d62f12; flex: 0 0 auto; }
.agenda-aviso-titulo { display: block; font-weight: 600; color: #8f2410; font-size: .92rem; }
.agenda-aviso-texto { color: #b03b21; font-size: .8rem; }

.agenda-aviso-error { border-color: #f5c6cb; background: #fdecea; }
.agenda-aviso-error .agenda-aviso-icon { color: #d9342b; }
.agenda-aviso-error .agenda-aviso-titulo { color: #721c24; }
.agenda-aviso-error .agenda-aviso-texto { color: #a02622; }

/* Aviso de éxito (cita registrada) */
.agenda-aviso-success { border-color: #b7e4c7; background: #eafaf0; }
.agenda-aviso-success .agenda-aviso-icon { color: var(--agenda-verde); }
.agenda-aviso-success .agenda-aviso-titulo { color: #1c6b35; }
.agenda-aviso-success .agenda-aviso-texto { color: #2e7d4f; }

/* Dropdown personalizado de especialista */
.agenda-select { position: relative; }
.agenda-select-trigger {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    border: 1px solid var(--agenda-borde); border-radius: 10px; padding: 12px;
    background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.agenda-select-trigger:hover { border-color: var(--agenda-azul-num); }
.agenda-select-trigger.seleccionado { border-color: var(--agenda-azul-num); background: var(--agenda-sel-gris); }
.agenda-select-trigger.abierto { border-color: var(--agenda-azul-num); box-shadow: 0 0 0 2px rgba(21,101,216,.15); }
.agenda-select-placeholder { color: var(--agenda-gris); font-size: .9rem; }
.agenda-select-arrow { margin-left: auto; color: var(--agenda-gris); transition: transform .15s ease; }
.agenda-select-trigger.abierto .agenda-select-arrow { transform: rotate(180deg); }
.agenda-select-panel {
    position: static; margin-top: 6px;
    background: #fff; border: 1px solid var(--agenda-borde); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(10,31,68,.12); max-height: 280px; overflow-y: auto; padding: 6px;
}
.agenda-select-opcion {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 10px; border-radius: 8px; cursor: pointer; transition: background .12s ease;
}
.agenda-select-opcion:hover { background: #f1f5fc; }
.agenda-select-opcion.seleccionada { background: var(--agenda-sel-gris); }
.agenda-select-opcion .agenda-opcion-check { position: static; margin-left: auto; color: var(--agenda-verde); }

/* Horas: móvil 3 / tablet 4 / escritorio 5 por fila, ocupando todo el ancho */
.agenda-horas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 768px) {
    .agenda-horas-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
    .agenda-horas-grid { grid-template-columns: repeat(5, 1fr); }
}
.agenda-hora-slot {
    width: 100%; border: 1px solid var(--agenda-borde); background: #fff; border-radius: 8px;
    padding: 8px 0; font-size: .85rem; color: var(--agenda-azul); cursor: pointer;
    transition: all .15s ease;
}
.agenda-hora-slot:hover { border-color: var(--agenda-azul-num); }
.agenda-hora-slot.seleccionada { background: var(--agenda-sel-gris); color: var(--agenda-azul); border-color: var(--agenda-azul-num); font-weight: 600; }

/* Inputs con icono */
.agenda-label { color: var(--agenda-azul); font-size: .85rem; font-weight: 600; margin-bottom: 4px; display: block; }
.agenda-input-icon { position: relative; }
.agenda-input-icon > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--agenda-gris); z-index: 2; }
.agenda-input-icon .form-control { padding-left: 32px; }

/* Resumen: 1 dato por fila en móvil, 2 columnas en tablet/escritorio */
.agenda-resumen { display: grid; grid-template-columns: 1fr; gap: 14px 24px; }
@media (min-width: 768px) {
    .agenda-resumen { grid-template-columns: repeat(2, 1fr); }
}
.agenda-resumen-item { display: flex; align-items: center; gap: 8px; }
.agenda-resumen-item i { color: var(--agenda-azul-num); }
.agenda-resumen-item span { display: flex; flex-direction: column; font-weight: 600; color: var(--agenda-azul); font-size: .85rem; }
.agenda-resumen-item small { color: var(--agenda-gris); font-weight: 400; font-size: .72rem; }

/* Barra de acciones */
.agenda-acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 16px 0 24px; }
.agenda-btn-cancelar { border: 1px solid var(--agenda-borde); color: #6b7280; padding: 10px 28px; }
.agenda-btn-cancelar:hover { background: #f1f3f7; color: #6b7280; }
.agenda-btn-confirmar { background: var(--agenda-verde); color: #fff; padding: 10px 28px; }
.agenda-btn-confirmar:hover { background: #218838; color: #fff; }
.agenda-btn-confirmar:disabled { opacity: .55; cursor: not-allowed; }

/* Ajuste móvil */
@media (max-width: 575px) {
    .agenda-paso { gap: 10px; }
    .agenda-paso-titulo { font-size: .98rem; }
    .agenda-btn-cancelar, .agenda-btn-confirmar { flex: 1 1 100%; }
}