/* ============================================================
 *  DIBAL UIX v1.0 – Tempus Dominus Bootstrap4 Override
 * ============================================================ */

.dibal-theme .bootstrap-datetimepicker-widget {
    font-size: .85rem;
    color: var(--dibal-gray-800);
}

/* Contenedor principal tipo dropdown */
.dibal-theme .bootstrap-datetimepicker-widget.dropdown-menu {
    border-radius: .75rem;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 12px 30px rgba(15,23,42,.18);
    padding: .4rem;
    background-color: #ffffff;
}

/* Flechita del popover (top / bottom) */
.dibal-theme .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
.dibal-theme .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
    border-bottom-color: rgba(15,23,42,.18);
    border-top-color: rgba(15,23,42,.18);
}

.dibal-theme .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after,
.dibal-theme .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-bottom-color: #ffffff;
    border-top-color: #ffffff;
}

/* Tabla general */
.dibal-theme .bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0;
}

.dibal-theme .bootstrap-datetimepicker-widget table td,
.dibal-theme .bootstrap-datetimepicker-widget table th {
    text-align: center;
    border-radius: .4rem;
}

/* Encabezado (mes, año, prev/next) */
.dibal-theme .bootstrap-datetimepicker-widget table thead tr:first-child th {
    cursor: pointer;
    font-weight: 600;
    color: var(--dibal-gray-800);
}

.dibal-theme .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--dibal-gray-100);
}

/* Días de semana (Lu, Ma, …) */
.dibal-theme .bootstrap-datetimepicker-widget table thead tr:nth-child(2) th {
    font-size: .75rem;
    font-weight: 600;
    color: var(--dibal-gray-500);
}

/* Celdas días/horas/minutos/segundos */
.dibal-theme .bootstrap-datetimepicker-widget table td.day,
.dibal-theme .bootstrap-datetimepicker-widget table td.hour,
.dibal-theme .bootstrap-datetimepicker-widget table td.minute,
.dibal-theme .bootstrap-datetimepicker-widget table td.second {
    font-size: .82rem;
    color: var(--dibal-gray-800);
}

/* Hover día/hora/minuto/segundo */
.dibal-theme .bootstrap-datetimepicker-widget table td.day:hover,
.dibal-theme .bootstrap-datetimepicker-widget table td.hour:hover,
.dibal-theme .bootstrap-datetimepicker-widget table td.minute:hover,
.dibal-theme .bootstrap-datetimepicker-widget table td.second:hover {
    background: var(--dibal-primary-light);
    cursor: pointer;
}

/* Días de meses anterior / siguiente */
.dibal-theme .bootstrap-datetimepicker-widget table td.old,
.dibal-theme .bootstrap-datetimepicker-widget table td.new {
    color: var(--dibal-gray-400);
}

/* Día “hoy” (triangulito inferior derecho) */
.dibal-theme .bootstrap-datetimepicker-widget table td.today {
    position: relative;
}

.dibal-theme .bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--dibal-primary);
    border-top-color: rgba(0,0,0,.12);
}

/* Día seleccionado */
.dibal-theme .bootstrap-datetimepicker-widget table td.active,
.dibal-theme .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--dibal-primary);
    color: #ffffff;
    text-shadow: none;
}

.dibal-theme .bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: #ffffff;
}

/* Celdas deshabilitadas */
.dibal-theme .bootstrap-datetimepicker-widget table td.disabled,
.dibal-theme .bootstrap-datetimepicker-widget table td.disabled:hover,
.dibal-theme .bootstrap-datetimepicker-widget table th.disabled,
.dibal-theme .bootstrap-datetimepicker-widget table th.disabled:hover {
    background: transparent;
    color: var(--dibal-gray-400);
    cursor: not-allowed;
}

/* Vista meses / años (los span dentro de las celdas) */
.dibal-theme .bootstrap-datetimepicker-widget table td span {
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    margin-top: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    border-radius: .5rem;
    font-size: .82rem;
}

.dibal-theme .bootstrap-datetimepicker-widget table td span:hover {
    background: var(--dibal-primary-light);
}

.dibal-theme .bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--dibal-primary);
    color: #ffffff;
    text-shadow: none;
}

.dibal-theme .bootstrap-datetimepicker-widget table td span.old {
    color: var(--dibal-gray-400);
}

.dibal-theme .bootstrap-datetimepicker-widget table td span.disabled,
.dibal-theme .bootstrap-datetimepicker-widget table td span.disabled:hover {
    background: transparent;
    color: var(--dibal-gray-400);
    cursor: not-allowed;
}

/* ===========================
 *  TIMEPICKER
 * =========================== */

.dibal-theme .bootstrap-datetimepicker-widget .timepicker-hour,
.dibal-theme .bootstrap-datetimepicker-widget .timepicker-minute,
.dibal-theme .bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    font-weight: 700;
    font-size: 1.1em;
    margin: 0;
    color: var(--dibal-gray-900);
}

/* Botones + / - / AM-PM / Today / Clear */
.dibal-theme .bootstrap-datetimepicker-widget button[data-action],
.dibal-theme .bootstrap-datetimepicker-widget .btn[data-action] {
    padding: 6px;
    border-radius: var(--dibal-radius-pill);
}

/* Links del timepicker (flechas, AM/PM) */
.dibal-theme .bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn {
    color: var(--dibal-primary);
}

.dibal-theme .bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn:hover {
    color: var(--dibal-primary-dark);
}

/* Toggle AM/PM pill */
.dibal-theme .bootstrap-datetimepicker-widget .btn[data-action=togglePeriod] {
    text-align: center;
    width: 38px;
    height: 38px;
    border-radius: var(--dibal-radius-pill);
    border: 1px solid var(--dibal-gray-300);
    font-size: .8rem;
}

/* ===========================
 *  PICKER SWITCH (barra superior que cambia entre fecha / hora)
 * =========================== */

.dibal-theme .bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 2.4;
    height: 2.4em;
    width: 100%;
    border-radius: var(--dibal-radius-pill);
    font-weight: 600;
    color: var(--dibal-gray-800);
}

.dibal-theme .bootstrap-datetimepicker-widget .picker-switch td span:hover {
    background: var(--dibal-primary-light);
}

/* ===========================
 *  INPUT + ICONO (grupo de entrada)
 * =========================== */

.dibal-theme .input-group [data-toggle=datetimepicker] {
    cursor: pointer;
}

.dibal-theme .input-group .input-group-text {
    border-radius: .5rem 0 0 .5rem;
}

.dibal-theme .input-group .form-control.dibal-input {
    border-radius: 0 .5rem .5rem 0;
}

/* Opcional: icono calendario en color corporativo al hover */
.dibal-theme .input-group [data-toggle=datetimepicker] .input-group-text i.fa,
.dibal-theme .input-group [data-toggle=datetimepicker] .input-group-text i.fas {
    color: var(--dibal-gray-500);
}

.dibal-theme .input-group [data-toggle=datetimepicker]:hover .input-group-text i.fa,
.dibal-theme .input-group [data-toggle=datetimepicker]:hover .input-group-text i.fas {
    color: var(--dibal-primary);
}