@media (min-width: 1024px) {
  .lg\:w-4\/5 {
    width: 80%;
  }

  .lg\:-mt-16 {
    margin-top: -4rem;
  }

  .lg\:flex {
    display: flex;
  }
}

[dir="ltr"] .ltr\:right-0 {
  right: 0px;
}

[dir="rtl"] .ltr\:left-0 {
  left: 0px;
}

.bg-body {
  background-color: #ffffff !important;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.w-full {
  width: 100%;
}

.h-screen {
  height: 100vh;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.bottom-0 {
  bottom: 0px;
}

.top-0 {
  top: 0px;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.w-28 {
  width: 7rem;
}

.h-28 {
  height: 7rem;
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* Sidebar Overrides for all states (expanded and collapsed) */
.bg-purple-lighter {
  background-color: #ffffff !important;
}

.bg-lilac-900 {
  background-color: #0044d7 !important;
}

.menu-list {
  background-color: #ffffff !important;
}

.js-menu .w-14 {
  background-color: #0044d7 !important;
}

html body .js-menu .bg-lilac-900 {
  background-color: #0044d7 !important;
}

/* Forzar que los íconos de la barra lateral sean ligeramente translúcidos y blancos en hover */
.js-menu .w-14 .material-icons-outlined,
.js-menu .w-14 .material-icons {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.2s ease-in-out;
}

.js-menu .w-14 button:hover .material-icons-outlined,
.js-menu .w-14 a:hover .material-icons-outlined,
.js-menu .w-14 .material-icons-outlined:hover,
.js-menu .w-14 .material-icons-outlined.active,
.js-menu .w-14 button:hover .material-icons,
.js-menu .w-14 a:hover .material-icons,
.js-menu .w-14 .material-icons:hover,
.js-menu .w-14 .material-icons.active {
  color: #ffffff !important;
  transform: scale(1.1);
}

/* El círculo del avatar (activo por defecto) */
.js-menu .w-14 #menu-profile-icon {
  color: #ffffff !important;
}

/* Modernización del calendario selector de fechas (El-Date-Picker) para look SaaS Premium */
.el-date-editor--daterange.el-input__inner {
  border-radius: 0.5rem !important;
  /* Tailwind rounded-lg */
  border: 1px solid #e5e7eb !important;
  /* Tailwind border-gray-200 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  /* Tailwind shadow-sm */
  transition: all 0.2s ease-in-out !important;
  background-color: #ffffff !important;
  padding: 3px 12px 3px 16px !important;
  /* balance padding */
  align-items: center;
}

/* Anillo de enfoque cuando el calendario está activo */
.el-date-editor--daterange.el-input__inner.is-active,
.el-date-editor--daterange.el-input__inner:focus-within,
.el-date-editor--daterange.el-input__inner:hover {
  border-color: #0044d7 !important;
  /* Innvoice Primary Blue */
  box-shadow: 0 0 0 3px rgba(0, 68, 215, 0.15) !important;
}

/* Interiores: los inputs de texto de la fecha */
.el-range-editor .el-range-input {
  color: #111827 !important;
  /* text-gray-900 */
  font-weight: 500 !important;
  /* font-medium */
  font-size: 0.875rem !important;
  /* text-sm */
  background: transparent !important;
}

/* Placeholder text */
.el-range-editor .el-range-input::placeholder {
  color: #9ca3af !important;
  /* text-gray-400 */
  font-weight: 400 !important;
}

/* El guión separador entre fechas */
.el-range-editor .el-range-separator {
  color: #9ca3af !important;
  /* text-gray-400 */
  font-size: 0.875rem !important;
  width: auto !important;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
}

/* El icono del calendario y el de cerrar */
.el-range-editor .el-range__icon,
.el-range-editor .el-range__close-icon {
  color: #6b7280 !important;
  /* text-gray-500 */
  display: flex;
  align-items: center;
  font-size: 1rem !important;
}

/* Hacer que el icono se pinte azul cuando abres o haces hover */
.el-date-editor--daterange.el-input__inner:focus-within .el-range__icon,
.el-date-editor--daterange.el-input__inner:hover .el-range__icon {
  color: #0044d7 !important;
}

/* ----------------------------------------------------------------- */
/* ESTILIZACIÓN DEL PANEL DESPLEGABLE (Dropdown Panel) DEL CALENDARIO */
/* ----------------------------------------------------------------- */

/* El contenedor principal desplegado */
.el-picker-panel {
  border-radius: 0.75rem !important;
  /* rounded-xl */
  border: 1px solid #e5e7eb !important;
  /* border-gray-200 */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  /* shadow-xl */
  font-family: inherit !important;
  color: #111827 !important;
}

/* Barra lateral de accesos directos (Este mes, Este trimestre, etc) */
.el-picker-panel__sidebar {
  background-color: #f9fafb !important;
  /* bg-gray-50 */
  border-right: 1px solid #e5e7eb !important;
  border-top-left-radius: 0.75rem !important;
  border-bottom-left-radius: 0.75rem !important;
  width: 140px !important;
}

/* Opciones de la barra lateral */
.el-picker-panel__shortcut {
  color: #374151 !important;
  /* text-gray-700 */
  padding-left: 1rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.2s;
}

.el-picker-panel__shortcut:hover {
  color: #0044d7 !important;
  /* Innvoice Blue */
  background-color: rgba(0, 68, 215, 0.05) !important;
}

/* Ajuste del cuerpo del panel por la nueva barra lateral */
.el-date-range-picker.has-sidebar {
  width: auto !important;
}

.el-picker-panel__body {
  margin-left: 140px !important;
}

/* Cabeceras de mes (Ej: "2026 febrero") */
.el-date-range-picker__header {
  font-weight: 600 !important;
  color: #111827 !important;
  font-size: 1rem !important;
}

.el-date-range-picker__header div {
  font-size: 0.9375rem !important;
}

/* Flechas de navegación en cabeceras */
.el-picker-panel__icon-btn {
  color: #6b7280 !important;
}

.el-picker-panel__icon-btn:hover {
  color: #0044d7 !important;
}

/* Tabla de fechas: Cabecera de días (lun, mar, mié) */
.el-date-table th {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  border-bottom: none !important;
}

/* Tabla de fechas: Celdas base */
.el-date-table td {
  padding: 4px 0 !important;
}

.el-date-table td span {
  border-radius: 9999px !important;
  /* Full width/height rounded = circle */
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

/* Día de Hoy */
.el-date-table td.today span {
  color: #0044d7 !important;
  font-weight: bold !important;
}

/* Rango - Fechas intermedias (fondo azul claro) */
.el-date-table td.in-range div {
  background-color: rgba(0, 68, 215, 0.08) !important;
}

.el-date-table td.in-range.start-date div {
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
}

.el-date-table td.in-range.end-date div {
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
}

/* Selección inicial y final (fondo azul fuerte) */
.el-date-table td.start-date span,
.el-date-table td.end-date span,
.el-date-table td.current span,
.el-date-table td.start-date:hover span,
.el-date-table td.end-date:hover span {
  background-color: #0044d7 !important;
  color: #ffffff !important;
}

/* Flechita / Pico en la parte de arriba del dropdown (popper) */
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #ffffff !important;
}

.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #e5e7eb !important;
}

/* Invertir Año y Mes (De "2026 febrero" a "febrero 2026") usando CSS bidireccional puro */
.el-date-range-picker__header div {
  direction: rtl;
  unicode-bidi: isolate;
  display: inline-block;
}