/* === Variables Divino === */
:root {
  --divino-red: #b5121b;
  --divino-red-dark: #8e0f14;
  --divino-border: #e0e0e0;
  --divino-text: #333;
  --divino-shadow: rgba(0,0,0,.1);
  --divino-font: 'Roboto','Segoe UI',sans-serif;
}

/* ========================= */
/* 1) CAMPOS DE ENTRADA BASE */
/* ========================= */

/* Nativos + campos de texto usados por pickers */
input[type="date"],
input[type="datetime-local"],
input[type="text"].date,
input[type="text"].datetime,
.ms-DatePicker .ms-TextField-field,
.ms-TextField-field[type="text"][aria-haspopup="dialog"],
.form-control.datepicker,
.form-control.datetimepicker {
  font-family: var(--divino-font) !important;
  color: var(--divino-text);
  background:#fff;
  border:1px solid var(--divino-border) !important;
  border-radius:4px !important;
  padding:10px 12px !important;
  width:100%;
  box-shadow:0 1px 3px var(--divino-shadow);
  transition: box-shadow .25s, border-color .25s;
}

/* Hover / Focus */
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="text"].date:hover,
input[type="text"].datetime:hover,
.ms-DatePicker .ms-TextField-field:hover,
.form-control.datepicker:hover,
.form-control.datetimepicker:hover {
  border-color:#cfcfcf !important;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="text"].date:focus,
input[type="text"].datetime:focus,
.ms-DatePicker .ms-TextField-field:focus,
.form-control.datepicker:focus,
.form-control.datetimepicker:focus {
  border-color: var(--divino-red) !important;
  box-shadow: 0 0 0 3px rgba(181,18,27,.2) !important;
  outline: none !important;
}

/* Indicador webkit (navegadores Chromium) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: opacity(.85);
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  filter: opacity(1) brightness(1.1);
}

/* ================================= */
/* 2) FLUENT UI / OFFICE (PowerPages) */
/* ================================= */

/* Callout emergente */
.ms-DatePicker-callout,
.ms-Callout.ms-DatePicker-callout {
  background:#fff;
  border:1px solid var(--divino-border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  overflow:hidden;
  animation: divinoFadeIn .2s ease-out;
  z-index: 9999;
}

/* Encabezado (mes y año) */
.ms-DatePicker-header,
.ms-DatePicker-monthAndYear {
  background: linear-gradient(90deg,var(--divino-red),var(--divino-red-dark));
  color:#fff;
  text-align:center;
  font-weight:500;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

/* Navegación */
.ms-DatePicker-prevMonth,
.ms-DatePicker-nextMonth {
  color:#fff;
  cursor:pointer;
  transition: opacity .2s;
}
.ms-DatePicker-prevMonth:hover,
.ms-DatePicker-nextMonth:hover { opacity:.85; }

/* Días semana */
.ms-DatePicker-weekday {
  text-align:center;
  color:var(--divino-red-dark);
  font-weight:600;
  font-size:.85rem;
  padding:6px 0;
  background:#fafafa;
  border-bottom:1px solid #f0f0f0;
}

/* Celdas de día */
.ms-DatePicker-day {
  width:36px; height:36px; line-height:36px;
  border-radius:6px;
  color:var(--divino-text);
  text-align:center;
  transition: background-color .2s, box-shadow .2s, color .2s;
  cursor:pointer;
}
.ms-DatePicker-day:hover {
  background: rgba(181,18,27,.08);
}

/* Día actual */
.ms-DatePicker-day--today {
  border:2px solid var(--divino-red);
  color:var(--divino-red);
  font-weight:600;
}

/* Seleccionado */
.ms-DatePicker-day--highlighted,
.ms-DatePicker-day--highlighted:hover {
  background: linear-gradient(90deg,var(--divino-red),var(--divino-red-dark));
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 6px rgba(181,18,27,.3);
}

/* Fuera de mes */
.ms-DatePicker-day--outsideMonth { color:#bdbdbd; }

/* Botón Hoy */
.ms-DatePicker-goToday {
  border-top:1px solid #eee;
  text-align:center;
  padding:8px;
  color:var(--divino-red);
  background:#fff;
  transition: background .2s;
}
.ms-DatePicker-goToday:hover { background: rgba(181,18,27,.08); }

/* ===================================== */
/* 3) jQuery UI Datepicker (clásico UI)  */
/* ===================================== */

.ui-datepicker {
  font-family: var(--divino-font);
  background:#fff;
  border:1px solid var(--divino-border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  animation: divinoFadeIn .2s ease-out;
  z-index: 9999 !important;
}

.ui-datepicker .ui-datepicker-header {
  background: linear-gradient(90deg,var(--divino-red),var(--divino-red-dark));
  color:#fff;
  border:0;
  padding:10px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor:pointer; color:#fff; opacity:.95;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { opacity:.8; }

.ui-datepicker th {
  color:var(--divino-red-dark);
  font-weight:600;
  background:#fafafa;
  border-bottom:1px solid #f0f0f0;
  padding:6px 0;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display:inline-block;
  width:32px; height:32px; line-height:32px;
  text-align:center;
  color:var(--divino-text);
  border-radius:6px;
  transition: background-color .2s, color .2s;
  text-decoration:none;
}
.ui-datepicker td a:hover { background: rgba(181,18,27,.08); }

/* Hoy */
.ui-datepicker td .ui-state-highlight {
  border:2px solid var(--divino-red);
  color:var(--divino-red) !important;
  font-weight:600;
}

/* Seleccionado */
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active:hover {
  background: linear-gradient(90deg,var(--divino-red),var(--divino-red-dark)) !important;
  color:#fff !important;
  font-weight:600;
}

.input-group-addon {
    border: 1px solid var(--divino-border) !important;
    border-radius: 0px 4px 4px 0px !important;
}

.datetimepicker input{
  border-radius: 4px 0px 0px 4px !important;
}
/* Fuera de mes */
.ui-datepicker .ui-datepicker-other-month a { color:#bdbdbd; }

/* =============================================== */
/* 4) Bootstrap Datetimepicker (Eonasdan/Tempus)   */
/* =============================================== */

.bootstrap-datetimepicker-widget {
  font-family: var(--divino-font);
  background:#fff;
  border:1px solid var(--divino-border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  overflow:hidden;
  animation: divinoFadeIn .2s ease-out;
  position: absolute !important;
  z-index: 999999 !important; /* sobre modales */
 
}

html[dir=ltr] .iconBorder {
    padding: 0 !important;
}

.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .datepicker > div > table thead tr:first-child th {
  /*background: linear-gradient(90deg,var(--divino-red),var(--divino-red-dark));
  color:#fff;*/
  border:0;
}

.bootstrap-datetimepicker-widget table th {
  color:var(--divino-red-dark);
  font-weight:600;
  background:#fafafa;
  border-bottom:1px solid #f0f0f0;
}

.bootstrap-datetimepicker-widget table td.day,
.bootstrap-datetimepicker-widget table td.hour,
.bootstrap-datetimepicker-widget table td.minute,
.bootstrap-datetimepicker-widget table td.second {
  border-radius:6px;
  transition: background-color .2s, color .2s;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
  background: rgba(181,18,27,.08);
}

/* Hoy */
.bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: var(--divino-red);
}

/* Seleccionado */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td.active:active {
  background: linear-gradient(90deg,var(--divino-red),var(--divino-red-dark)) !important;
  color:#fff !important;
}

/* Reajuste botones internos del datepicker */
.ms-DatePicker button,
.ms-DatePicker .btn,
.ui-datepicker button,
.bootstrap-datetimepicker-widget button,
.bootstrap-datetimepicker-widget tr td button{
  all: unset;                 /* borra herencias globales */
  background: none !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
  font: inherit !important;
  font-size: small !important;
  cursor: pointer;
  line-height: 1;
  box-shadow: none !important;
}
/* =================== */
@keyframes divinoFadeIn {
  from { opacity:0; transform: translateY(4px); }
  to   { opacity:1; transform: translateY(0); }
}