.intervalos-wrap {
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(18, 38, 63, .06);
}

.intervalos-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.intervalos-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.intervalos-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: #64748b;
}

.intervalos-badge {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.intervalos-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 14px;
}

@media (max-width: 992px) {
    .intervalos-grid {
        grid-template-columns: 1fr;
    }
}

.intervalos-card {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 14px;
    background: #fbfdff;
}

.intervalos-card-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
}

.fechas-list,
.intervalos-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fecha-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e8edf5;
    background: #fff;
    cursor: pointer;
    transition: all .15s ease;
    text-align: left;
}

.fecha-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 38, 63, .08);
}

.fecha-item.active {
    border-color: #0ea5e9;
    box-shadow: 0 10px 22px rgba(14, 165, 233, .18);
}

.fecha-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0ea5e9;
}

.fecha-text {
    font-weight: 800;
    color: #0f172a;
}

.fecha-chip {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 8px;
    border-radius: 999px;
    background: #ecfeff;
    border: 1px solid #cffafe;
    color: #155e75;
}

.intervalo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e8edf5;
    background: #fff;
    cursor: pointer;
    transition: all .15s ease;
    text-align: left;
}

.intervalo-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 38, 63, .08);
}

.intervalo-item.selected {
    border-color: #22c55e;
    box-shadow: 0 10px 22px rgba(34, 197, 94, .16);
}

.intervalo-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.intervalo-time {
    font-weight: 900;
    color: #0f172a;
}

.intervalo-meta {
    font-size: 12px;
    color: #64748b;
}

.intervalo-cta {
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    border-radius: 10px;
}

.empty-state {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px dashed #dbe3ef;
    border-radius: 12px;
    background: #fff;
}

.empty-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    margin-top: 4px;
}

.empty-title {
    font-weight: 900;
    color: #0f172a;
}

.empty-desc {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.hint {
    font-size: 13px;
    color: #64748b;
    padding: 10px 4px;
}

.skeleton-row {
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: sk 1.2s ease infinite;
}

@keyframes sk {
    0% {
        background-position: 100% 0
    }
    100% {
        background-position: 0 0
    }
}

.intervalos-msg {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    display: none;
}

.intervalos-msg.info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

.intervalos-msg.success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #14532d;
}

.intervalos-msg.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #7f1d1d;
}


/* Calendar (Flatpickr) */

.calendar-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid #e8edf5;
    background: #fff;
    font-weight: 800;
    color: #0f172a;
    cursor: pointer;
}

.calendar-input:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.calendar-hint {
    font-size: 12px;
    color: #64748b;
}

.flatpickr-calendar {
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(18, 38, 63, .18) !important;
    border: 1px solid #e9edf3 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

.calendar-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid #e8edf5;
    background: #fff;
    font-weight: 800;
    color: #0f172a;
    cursor: pointer;
}

.calendar-input:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.calendar-hint {
    font-size: 12px;
    color: #64748b;
}

.flatpickr-calendar {
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(18, 38, 63, .18) !important;
    border: 1px solid #e9edf3 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}


/* Animaciones premium para aparición de intervalos */

.intervalos-pop {
    animation: intervalosContainerPop .35s ease both;
}

@keyframes intervalosContainerPop {
    from {
        opacity: .0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.intervalo-anim {
    opacity: 0;
    transform: translateY(10px);
    animation: intervaloIn .38s ease forwards;
}

@keyframes intervaloIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== Select de intervalos (UI compacta) ===== */

.intervalos-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.intervalos-select-wrap.disabled {
    opacity: .65;
    pointer-events: none
}

.intervalos-select {
    width: 100%;
    height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    background: #fff;
    font-weight: 600
}

.intervalos-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15)
}

.intervalos-select-meta {
    font-size: 13px;
    color: rgba(0, 0, 0, .65)
}


/* ===== Loading localidades (pro) ===== */

.localidades-loading {
    padding: 18px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.ll-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 14px;
}


/* Spinner */

.ll-header .spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #d1d5db;
    border-top-color: #4fb4d5;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* Skeleton rows */

.ll-skeleton .row {
    height: 18px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: linear-gradient( 90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}