/* Contenedor general del datepicker */
.daterangepicker {
    border: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    /* border-radius: 8px; */
    border-radius: 4px;
    /* padding: 18px 20px; */
    padding: 16px 10px;
    background: #fff;
    width: auto;
    max-width: 820px;
}

/* Mostrar los dos calendarios con separación como en la imagen */
.daterangepicker .drp-calendar {
    background: transparent;
    border: 0;
    margin: 0 14px;
}

/* Cabecera (Mes y año) centrada y en negrita */
.daterangepicker .drp-calendar .calendar-table thead tr th.selectable,
.daterangepicker .drp-calendar .calendar-table thead tr th.month {
    font-weight: 700;
    font-size: 18px;
    color: #333;
    text-align: center;
}

/* Ocultar subtítulos innecesarios y centrar el título del mes */
.daterangepicker .drp-calendar .calendar-table thead tr:first-child th {
    vertical-align: middle;
}

/* Flechas personalizadas (izq / derecha) */
.daterangepicker .drp-calendar .calendar-table thead th.prev.available,
.daterangepicker .drp-calendar .calendar-table thead th.next.available {
    width: 40px;
    color: #6b6b6b;
    font-size: 18px;
}
.daterangepicker .drp-calendar .calendar-table thead th.prev.available:before,
.daterangepicker .drp-calendar .calendar-table thead th.next.available:before {
    font-family: "FontAwesome";
}

/* Puedes usar SVG inline para flechas: */
.daterangepicker .drp-calendar .calendar-table thead th.prev.available {
    background: none;
}
.daterangepicker .drp-calendar .calendar-table thead th.prev.available:after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23646a6f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>');
    background-repeat: no-repeat;
    vertical-align: middle;
}
.daterangepicker .drp-calendar .calendar-table thead th.next.available:after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23646a6f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>');
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Día de semana: iniciales grandes y centradas */
.daterangepicker .drp-calendar .calendar-table thead tr.thweekday th {
    color: #6b6b6b;
    font-weight: 700;
    font-size: 12px;
    padding-bottom: 12px;
}

/* Celdas del calendario */
.daterangepicker .drp-calendar .calendar-table td {
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    font-size: 15px;
    color: #4a4a4a;
}

/* Días fuera de mes (más pálidos) */
.daterangepicker .drp-calendar .calendar-table td.off,
.daterangepicker .drp-calendar .calendar-table td.off.disabled {
    color: #d1d1d1;
}

/* Días disponibles (hover) */
.daterangepicker .drp-calendar .calendar-table td.available:hover {
    background: rgba(235, 115, 0, 0.08);
    cursor: pointer;
    color: #333;
}

/* Día seleccionado: círculo naranja (exacto) */
.daterangepicker .drp-calendar .calendar-table td.active,
.daterangepicker .drp-calendar .calendar-table td.start-date,
.daterangepicker .drp-calendar .calendar-table td.end-date {
    background: var(--colorSmartTercero) !important;
    /* background: #f3701a; */
    color: #fff !important;
    box-shadow: none;
    transform: none;
}

/* Rango intermedio (suave) */
.daterangepicker .drp-calendar .calendar-table td.in-range {
    background: #e3e3e3ad;
    /* background: rgba(243,112,26,0.08); */
    color: #333;
    /* border-radius: 4px; */
    border-radius: 50%;
}

/* Ajustes de espaciado entre los dos calendarios (linea divisoria ligera) */
.daterangepicker .drp-calendar.left {
    margin-right: 1px;
    padding: 8px 0 0px 0px;
}
.daterangepicker .drp-calendar.right {
    margin-left: 1px;
}

/* Quitar fondo del header inferior (botones) para look limpio */
.daterangepicker .ranges,
.daterangepicker .drp-selected {
    display: none; /* ocultar presets/selección si no los usas */
}

/* Ajuste tipográfico general */
.daterangepicker,
.daterangepicker * {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Pequeño ajuste para que las semanas no se vean comprimidas */
.daterangepicker .drp-calendar .calendar-table table {
    margin-bottom: 0;
}

/* Separador vertical sutil en el centro (opcional) */
/* .daterangepicker:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(0,0,0,0.04);
  transform: translateX(-50%);
  border-radius: 1px;
} */

/* person */
.drp-calendar .calendar-table .table-condensed thead > tr:nth-child(1) {
    border-bottom: 2px solid #e1e1e1;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    font-size: 17px;
}
/* .daterangepicker .drp-calendar */
/* Garantizar que la caja sea responsiva (mobile: stacks) */
.daterangepicker .drp-calendar .calendar-table thead th.prev.available,
.daterangepicker .drp-calendar .calendar-table thead th.next.available {
    position: relative;
}
.daterangepicker .calendar-table .next span {
    position: absolute;
    top: 42%;
}
.daterangepicker .calendar-table .prev span {
    position: absolute;
    top: 42%;
    left: 46%;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #19183b26 !important;
}
.daterangepicker .calendar-table th:nth-child(1) {
    color: var(--colorThree);
}
.drp-calendar.left .off.ends.active.start-date.available,
.drp-calendar.left .off.ends.active.end-date.in-range.available,
.drp-calendar.left .off.ends.in-range.available {
    background: none !important;
    color: inherit !important;
    box-shadow: none !important;
}
.drp-calendar.left .off.ends.in-range.available,
.drp-calendar.left .off.ends.active.end-date.in-range.available,
.drp-calendar.left .off.ends.active.start-date.available {
    color: #d1d1d1 !important;
}
@media (max-width: 720px) {
    /* .daterangepicker { max-width: 340px; padding: 12px; } */
    .daterangepicker { max-width: 340px; padding: 12px; }
    .daterangepicker .drp-calendar { margin: 0; display:block; width:100%; max-width: 100%;}
    .daterangepicker:after { display:none; }
}