/*Inicio Fonts*/
@font-face {
  font-family: 'Mulish-Black.';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-Black';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-BlackItalic';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-BlackItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-Bold';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-BoldItalic';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-ExtraBold';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-ExtraBoldItalic';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-ExtraBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-ExtraLight';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-ExtraLightItalic';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-ExtraLightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-Light';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-LightItalic';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-Medium';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-MediumItalic';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-Regular';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-SemiBold';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish-SemiBoldItalic';
  font-style: normal;
  src: url('/fonts/Mulish/Mulish-SemiBoldItalic.ttf') format('truetype');
}
/*Fin Fonts*/
.btn + .btn {
  margin-left: 8px;
}
.btn i {
  margin-left: 0.5rem !important;
}
:root {
  --primary-color: #e30616;
  --secondary-color: #f0eff0;
  --warning-color: #F3DEC4;
  --light-gray-color: #e2e2e2;
  --text-color-primary: #1d1d1b;
  --text-color-secondary: #f0eff0;
  --text-color-warning: #C36F00;
  --background-color: #F4F4F4;
  --bg-card: #FEFEFE;
  --font-family: "Mulish-Regular";
  --text-size-extralarge: 20px;
  --text-size-large: 18px;
  --text-size-medium: 16px;
  --text-size-small: 14px;
  --sidebar-bg: #EEEEEE;
  --sidebar-item-text: #1D1D1B;
  --sidebar-item-text-inverse: #FEFEFE;
  --sidebar-item-selected-bg: #1D1D1B;
  --sidebar-width-expanded: 270px;
  --sidebar-width-minimized: 70px;
}
body {
  font-family: "Mulish-Regular";
  color: var(--text-color-primary);
  background: var(--background-color) !important;
}
input,
button,
select,
optgroup,
textarea {
  font-family: Mulish-Regular;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color-primary);
  -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset;
  transition: background-color 5000s ease-in-out 0s;
}
:root .text-primary {
  color: var(--primary-color) !important;
}
.form-control {
  color: #1d1d1b;
  background-color: #e2e2e2;
  border: 1px solid #e2e2e2;
  border-radius: 0px;
  font-size: var(--text-size-medium) !important;
}
.form-control::placeholder {
  font-style: italic;
}
.form-control:focus {
  color: #1d1d1b;
  background-color: #EDEDED;
  border-color: #e2e2e2;
}
.form-control:disabled {
  color: #1d1d1b;
  background-color: #EDEDED !important;
  border-color: #e2e2e2;
}
html {
  font-family: Mulish-Regular;
}
html,
body {
  font-family: Mulish-Regular;
  font-size: 1rem !important;
  color: #1d1d1b !important;
}
.kt-portlet {
  /*-webkit-box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
  box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);*/
  background-color: var(--bg-card) !important;
  border-radius: 0px;
}
.kt-aside--minimize .kt-aside {
  margin-top: 0 !important;
}
.kt-aside--fixed.kt-aside--minimize-hover .kt-aside {
  margin-top: 0 !important;
  z-index: 99 !important;
  -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.08);
  box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.08);
}
#kt_aside {
  transition: width 0.3s ease !important;
}
.mobile-subscription-warning {
  background-color: var(--background-color) !important;
}
@media (min-width: 1025px) {
  .kt-header.kt-header--fixed {
    z-index: 98;
  }
  .kt-header--fixed.kt-aside--minimize .kt-header {
    left: 70px !important;
  }
}
/*Nuevos CSS*/
:root .btn {
  font-family: var(--font-family) !important;
  font-size: var(--text-size-medium);
}
.btn-primary-custom {
  background-color: #e30616 !important;
  color: #f0eff0 !important;
  border: 1px solid #FF0000 !important;
  border-radius: 0px !important;
  /*font-size: var(--text-size-small);*/
  height: 100%;
}
.btn-primary-custom i {
  margin-left: 1rem;
  margin-right: 1rem !important;
  padding-right: 0rem !important;
}
.btn-primary-custom:hover {
  background-color: #b9000d !important;
  color: var(--background-color) !important;
  border: 1px solid #b9000d !important;
}
.btn-outline-primary-custom {
  background-color: #D6D5D6 !important;
  color: #A09FA0 !important;
  border: 1px solid #A09FA0 !important;
  border-radius: 0px !important;
  /*font-size: var(--text-size-small);*/
  height: 100%;
}
.btn-outline-primary-custom i {
  margin-left: 10px;
  margin-right: 10px !important;
  padding-right: 0rem !important;
}
.btn-outline-primary-custom:hover {
  background-color: #a09fa0 !important;
  color: var(--background-color) !important;
  border: 1px solid #a09fa0 !important;
}
/*Boton outline-secondary*/
.btn-outline-secondary {
  background-color: #FFE5E5 !important;
  color: #FF0000 !important;
  border: 1px solid #FF0000;
  border-radius: 0px;
  /*font-size: var(--text-size-small) !important;*/
  /*height: calc(1.5em + 1.5rem + 2px) !important;*/
}
/*Boton outline-secondary*/
.btn-outline-secondary:hover {
  background-color: #FF0000 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF0000;
  border-radius: 0px;
  /*font-size: var(--text-size-small) !important;*/
  /*height: calc(1.5em + 1.5rem + 2px) !important;*/
}
.btn-outline-secondary:hover > i {
  color: #FFFFFF !important;
}
.btn-outline-secondary-custom {
  background-color: #FFE5E5 !important;
  color: #FF0000 !important;
  border: 1px solid #FF0000 !important;
  border-radius: 0!important;
  /*height: calc(1.5em + 1.5rem + 2px) !important;*/
}
/*Boton outline-secondary*/
.btn-outline-secondary-custom:hover {
  background-color: #FF0000 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF0000;
  /*height: calc(1.5em + 1.5rem + 2px) !important;*/
}
.btn-outline-secondary-custom :hover > i {
  color: #FFFFFF !important;
}
.btn-outline-warning-custom {
  background-color: var(--warning-color) !important;
  color: var(--text-color-warning) !important;
  border: 1px solid var(--text-color-warning) !important;
  border-radius: 0px !important;
  /*font-size: var(--text-size-small) !important;*/
  height: 100%;
}
.btn-outline-warning-custom i {
  margin-left: 10px;
  margin-right: 10px !important;
  padding-right: 0rem !important;
}
.btn-outline-warning-custom:hover {
  background-color: var(--text-color-warning) !important;
  color: var(--warning-color) !important;
  border: 1px solid var(--warning-color) !important;
}
.btn-small {
  font-size: var(--text-size-small) !important;
}
/*Toggle button group reutilizable*/
.btn-group-toggle-custom .btn {
  background-color: #D6D5D6 !important;
  color: #A09FA0 !important;
  border: 1px solid #A09FA0 !important;
  border-radius: 0px !important;
}
.btn-group-toggle-custom .btn:hover {
  background-color: #a09fa0 !important;
  color: var(--background-color) !important;
  border-color: #a09fa0 !important;
}
.btn-group-toggle-custom .btn.active {
  background-color: #e30616 !important;
  color: #f0eff0 !important;
  border: 1px solid #FF0000 !important;
}
.btn-group-toggle-custom .btn.active:hover {
  background-color: #b9000d !important;
  color: var(--background-color) !important;
  border-color: #b9000d !important;
}
.tableBtn i {
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .btn {
    padding: 0.55rem 0.5rem !important;
  }
  .btn i {
    padding: 0!important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  .tableBtn i {
    margin: 0 !important;
    padding: 0 !important;
  }
  .btn + .btn {
    margin-left: 5px;
  }
  .btn-primary-custom {
    font-size: small !important;
  }
  .btn-outline-primary-custom {
    font-size: small !important;
  }
  .btn-outline-secondary-custom {
    font-size: small !important;
  }
  .btn-outline-secondary {
    font-size: small !important;
  }
  .btn-outline-warning-custom {
    font-size: small !important;
  }
  /*.kt-portlet .kt-portlet__body {
        padding: 0 !important;
    }*/
}
/*Selects y dropdown*/
.select2-selection__rendered {
  background-color: #e2e2e2 !important;
  font-style: italic;
  color: #333333 !important;
  border: none;
  border-radius: 0px !important;
}
.dropdown-toggle {
  background-color: #e2e2e2 !important;
  font-style: italic;
  color: #333333 !important;
  border-radius: 0px !important;
}
.bootstrap-select .dropdown-menu.inner > li.selected > a .text,
.bootstrap-select .dropdown-menu.inner > li:hover > a .text {
  color: #ffffff !important;
}
/*Menu*/
.kt-user-card--custom {
  background-color: #E31524;
  display: flex;
  align-items: center;
  padding: 10px;
}
.kt-user-card__avatar-img {
  border-radius: 50% !important;
  height: 50px !important;
  filter: invert(1) brightness(1000%) saturate(0);
  width: auto !important;
}
.kt-user-card__name {
  color: white !important;
  font-size: 16px !important;
  padding-left: 2rem !important;
  font-weight: 100 !important;
}
.header-username {
  font-weight: bold;
}
.kt-header__topbar-user {
  padding: 0px !important;
}
.logout-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: 40px;
}
.logout-link {
  font-size: 14px;
  color: #333;
  text-decoration: underline;
  display: inline-block;
}
.icon-size {
  height: 35px;
  width: auto;
  display: block;
}
.icon-size-alarm {
  height: 1.4rem;
  width: auto;
  display: block;
}
.kt-header {
  background-color: var(--primary-color) !important;
  border-bottom: none !important;
}
/* Header: topbar items en fila horizontal (override a flex-direction:column del bundle) */
.kt-header__topbar {
  flex-direction: row !important;
  align-items: center !important;
}
/* Header: font-icons del topbar en blanco (theme toggle, impersonation, etc.) */
.kt-header .kt-header__topbar-icon i,
.kt-header .kt-header__topbar-wrapper > i {
  color: var(--sidebar-item-text-inverse) !important;
}
/* Header: campana de notificaciones (PNG monocromo) → invertir a blanco.
   Deuda técnica: idealmente migrar a Hugeicon (hgi-notification-*) editando
   headerNotificationBarTemplate en AppTopBar/Default.cshtml. */
.kt-header .icon-size-alarm {
  filter: invert(1) brightness(1000%) saturate(0);
}
/* Header: badge del contador de notificaciones sobre fondo rojo →
   fondo blanco con texto rojo, sólo dentro del header. */
.kt-header .kt-badge.kt-badge--primary.unread-notification-count {
  background-color: var(--sidebar-item-text-inverse) !important;
  color: var(--primary-color) !important;
}
/* Header: avatar default (silueta SVG, sin foto real subida) → invertir a blanco
   sobre el fondo rojo. La clase `is-default-avatar` la agrega un script en
   AppTopBar/Default.cshtml tras detectar Content-Type: image/svg+xml. */
.kt-header .header-profile-picture.is-default-avatar {
  filter: invert(1) brightness(1000%) saturate(0);
}
@media (min-width: 1024px) {
  .kt-header__topbar {
    flex-direction: column;
    align-items: end;
  }
}
.texto-logo {
  display: flex;
  justify-content: center;
  padding-left: 20px;
  font-size: var(--text-size-small) !important;
  color: var(--text-color-primary);
}
@media (max-width: 1024px) {
  .texto-logo {
    font-size: small !important;
  }
}
@media (max-width: 768px) {
  .texto-logo {
    font-size: x-small !important;
  }
  .kt-subheader .kt-subheader__main .kt-subheader__title {
    margin-left: 0px !important;
  }
}
.custom-menu-button {
  background-color: #e30616;
  border: none;
  width: 60px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-menu-button i {
  color: white;
  font-size: 24px;
}
.form-control-static {
  color: var(--text-color-primary);
}
.custom-file-label {
  background-color: var(--light-gray-color) !important;
  border-radius: 0 !important;
  color: var(--text-color-primary) !important;
}
.custom-file:focus-within .custom-file-label {
  border-color: var(--primary-color) !important;
}
.custom-file-label::after {
  color: var(--text-color-secondary) !important;
  background-color: var(--primary-color) !important;
  border-radius: 0 !important;
}
@media (max-width: 1024px) {
  .kt-header-mobile {
    padding: 0;
    padding-left: 15px;
    background-color: var(--primary-color) !important;
  }
}
/* ============================================
   SIDEBAR — diseño Figma (monocromático)
   ============================================ */
/* Contenedor */
.kt-aside-custom,
.kt-aside,
.kt-aside-menu,
.kt-aside-menu-custom {
  background-color: var(--sidebar-bg) !important;
  box-shadow: 40px 0px 33px -20px #001F400D !important;
}
/* Ancho expandido 302px (override del bundle Metronic) */
.kt-aside {
  width: var(--sidebar-width-expanded) !important;
}
.kt-aside--fixed .kt-wrapper,
.kt-wrapper {
  padding-left: var(--sidebar-width-expanded) !important;
}
@media (min-width: 1025px) {
  .kt-header--fixed .kt-header {
    left: var(--sidebar-width-expanded) !important;
  }
  .kt-subheader {
    left: var(--sidebar-width-expanded) !important;
  }
  /* Minimizado: 70px se conserva */
  .kt-aside--minimize .kt-aside {
    width: var(--sidebar-width-minimized) !important;
  }
  .kt-aside--minimize .kt-wrapper {
    padding-left: var(--sidebar-width-minimized) !important;
  }
  .kt-header--fixed.kt-aside--minimize .kt-header {
    left: var(--sidebar-width-minimized) !important;
  }
  .kt-aside--minimize .kt-subheader {
    left: var(--sidebar-width-minimized) !important;
  }
}
/* SVG icon base (legacy: aplica a items que aún usan <img> PNG) */
.svg-icon {
  height: 20px;
  filter: none;
  transition: filter 0.3s ease;
}
/* Hugeicons base en sidebar */
.kt-aside-menu-custom .kt-menu__link-icon i.hgi-stroke {
  font-size: 20px;
  line-height: 1;
  color: var(--sidebar-item-text);
  transition: color 0.3s ease;
}
/* Icono → blanco cuando el item Main (N1) está hover/selected/open (fondo oscuro).
   N2 y N3 NO cambian el color porque su fondo permanece claro en todos los estados. */
.kt-aside-menu-custom .menu-level-1.kt-menu__item--active > .kt-menu__link .svg-icon,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--open > .kt-menu__link .svg-icon,
.kt-aside-menu-custom .menu-level-1:hover > .kt-menu__link .svg-icon {
  filter: invert(1) brightness(1000%) saturate(0);
}
.kt-aside-menu-custom .menu-level-1.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon i.hgi-stroke,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--open > .kt-menu__link .kt-menu__link-icon i.hgi-stroke,
.kt-aside-menu-custom .menu-level-1:hover > .kt-menu__link .kt-menu__link-icon i.hgi-stroke {
  color: var(--sidebar-item-text-inverse);
}
/* ============================================
   NIVEL 1 — Main
   ============================================ */
.kt-aside-menu-custom .menu-level-1 > .kt-menu__link {
  height: 49px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  border-radius: 0;
  background-color: transparent;
}
.kt-aside-menu-custom .menu-level-1 > .kt-menu__link .kt-menu__link-icon {
  margin-right: 0;
}
.kt-aside-menu-custom .menu-level-1 > .kt-menu__link .kt-menu__link-text-custom {
  font-family: "Mulish-Regular";
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--sidebar-item-text) !important;
}
.kt-aside-menu-custom .menu-level-1 > .kt-menu__link .kt-menu__ver-arrow-custom {
  color: var(--sidebar-item-text) !important;
}
/* Hover / Selected / Dropdown-open (Main): fondo oscuro, bold blanco, píldora */
.kt-aside-menu-custom .menu-level-1:hover > .kt-menu__link,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--active > .kt-menu__link,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--open > .kt-menu__link {
  background-color: var(--sidebar-item-selected-bg) !important;
  border-radius: 0 16px 16px 0;
  width: 15.5rem;
}
.kt-aside-menu-custom .menu-level-1:hover > .kt-menu__link .kt-menu__link-text-custom,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--active > .kt-menu__link .kt-menu__link-text-custom,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--open > .kt-menu__link .kt-menu__link-text-custom {
  font-family: "Mulish-Bold";
  color: var(--sidebar-item-text-inverse) !important;
}
.kt-aside-menu-custom .menu-level-1:hover > .kt-menu__link .kt-menu__ver-arrow-custom,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--active > .kt-menu__link .kt-menu__ver-arrow-custom,
.kt-aside-menu-custom .menu-level-1.kt-menu__item--open > .kt-menu__link .kt-menu__ver-arrow-custom {
  color: var(--sidebar-item-text-inverse) !important;
}
/* ============================================
   NIVEL 2 — Secondary
   ============================================
   Principio: hover = preview del selected del propio nivel.
   En N2 el selected es transparente + subrayado (NO fondo oscuro). */
/* HOJA default (sin submenu): padding 10px 20px 10px 64px */
.kt-aside-menu-custom .menu-level-2:not(.kt-menu__item--submenu) > .kt-menu__link {
  height: 49px;
  padding: 10px 20px 10px 64px;
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: transparent;
}
/* DROPDOWN default (con submenu, cerrado): padding 13px 63px */
.kt-aside-menu-custom .menu-level-2.kt-menu__item--submenu:not(.kt-menu__item--open) > .kt-menu__link {
  height: 49px;
  padding: 13px 63px;
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: transparent;
}
/* Texto default N2 */
.kt-aside-menu-custom .menu-level-2 > .kt-menu__link .kt-menu__link-text-custom {
  font-family: "Mulish-Regular";
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--sidebar-item-text) !important;
  text-decoration: none !important;
  position: relative;
}
/* Chevron N2 siempre color texto */
.kt-aside-menu-custom .menu-level-2 > .kt-menu__link .kt-menu__ver-arrow-custom {
  color: var(--sidebar-item-text) !important;
}
/* HOJA hover = HOJA selected: transparente + padding 7px 62px (subrayado se renderiza vía ::after) */
.kt-aside-menu-custom .menu-level-2:not(.kt-menu__item--submenu):hover > .kt-menu__link,
.kt-aside-menu-custom .menu-level-2:not(.kt-menu__item--submenu).kt-menu__item--active > .kt-menu__link {
  background-color: transparent !important;
  padding: 7px 62px;
}
/* DROPDOWN hover = DROPDOWN open: transparente + padding 7px 63px (subrayado se renderiza vía ::after) */
.kt-aside-menu-custom .menu-level-2.kt-menu__item--submenu:hover > .kt-menu__link,
.kt-aside-menu-custom .menu-level-2.kt-menu__item--submenu.kt-menu__item--open > .kt-menu__link {
  background-color: transparent !important;
  padding: 7px 63px;
}
/* ============================================
   NIVEL 3 — Tertiary
   ============================================ */
.kt-aside-menu-custom .menu-level-3 > .kt-menu__link {
  height: 49px;
  padding: 10px 20px 10px 109px;
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: transparent;
}
.kt-aside-menu-custom .menu-level-3 > .kt-menu__link .kt-menu__link-text-custom {
  font-family: "Mulish-Regular";
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--sidebar-item-text) !important;
  text-decoration: none !important;
  position: relative;
}
/* Hover N3 = Selected N3: transparente + padding 7px 62px 7px 108px (subrayado vía ::after) */
.kt-aside-menu-custom .menu-level-3:hover > .kt-menu__link,
.kt-aside-menu-custom .menu-level-3.kt-menu__item--active > .kt-menu__link {
  background-color: transparent !important;
  padding: 7px 62px 7px 108px;
}
/* ============================================
   BARRA DECORATIVA (subrayado fijo 53×2px) para N2 y N3
   ============================================
   Reemplaza el text-decoration: underline del diseño Figma. La barra va
   debajo del texto y mide siempre 53px, independiente de la longitud del texto. */
.kt-aside-menu-custom .menu-level-2.kt-menu__item--active > .kt-menu__link .kt-menu__link-text-custom::after,
.kt-aside-menu-custom .menu-level-2.kt-menu__item--open > .kt-menu__link .kt-menu__link-text-custom::after,
.kt-aside-menu-custom .menu-level-2:hover > .kt-menu__link .kt-menu__link-text-custom::after,
.kt-aside-menu-custom .menu-level-3.kt-menu__item--active > .kt-menu__link .kt-menu__link-text-custom::after,
.kt-aside-menu-custom .menu-level-3:hover > .kt-menu__link .kt-menu__link-text-custom::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 53px;
  height: 2px;
  background-color: #1D1D1B;
}
.dropdown-item.active,
.dropdown-item:active {
  color: #ffffff !important;
  text-decoration: none;
  background-color: #e30616 !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: #ffffff !important;
  text-decoration: none;
  background-color: #e30616 !important;
}
.dropdown-menu > li:hover {
  color: #ffffff !important;
  text-decoration: none;
  background-color: #e30616 !important;
}
.dropdown-menu > li:hover > a {
  color: #ffffff !important;
}
@media (min-width: 1025px) {
  .kt-header--fixed.kt-subheader--fixed .kt-subheader {
    background-color: #F4F4F4 !important;
    /*-webkit-box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.08);
        box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.08);*/
  }
}
/*.kt-aside .kt-aside-menu-custom {
    margin: 15px 0; }*/
@media (max-width: 1024px) {
  .kt-aside-close {
    background-color: #F4F4F4 !important;
  }
  .kt-aside-close > i {
    color: #e30616 !important;
  }
}
/*Sobrecargas style-bundles*/
/*Modal*/
:root .modal .modal-content {
  border-radius: 0px;
}
.modal-content {
  background-color: var(--bg-card) !important;
}
.modal .modal-content .modal-header .modal-title {
  font-weight: bold !important;
  font-size: var(--text-size-large) !important;
  font-family: var(--font-family) !important;
  color: var(--text-color-primary) !important;
}
.modal-header {
  padding: 1.25rem 1.25rem !important;
  border-bottom: none !important;
}
.modal-body {
  padding: 0 1.25rem !important;
  border-bottom: none !important;
}
.modal-header .close {
  padding: 1rem !important;
}
.modal .modal-content .modal-header .close {
  color: var(--text-color-primary) !important;
}
.modal-footer {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem !important;
  border-top: none !important;
}
/*Modal*/
.kt-form.kt-form--label-right .form-group label:not(.kt-checkbox):not(.kt-radio):not(.kt-option) {
  text-align: left;
}
.form-group label {
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--text-color-primary);
  font-weight: normal;
}
.custom-file {
  background-color: var(--secondary-color);
  border-radius: 0 !important;
}
.btnCerrar {
  padding-right: 0 !important;
}
.btnCerrar i {
  color: white !important;
}
/*Wizard Inicio*/
.kt-wizard-v1__nav-item::before,
.kt-wizard-v1__nav-item::after {
  content: none !important;
  background: none !important;
  border: none !important;
}
.kt-wizard-v1__nav-item {
  flex: 0 0 150px;
  height: 4px;
  margin-right: 8px;
  background-color: #ccc;
  border: none;
  border-radius: 2px;
}
@media (max-width: 768px) {
  .kt-wizard-v1__nav-item {
    flex: 0 0 50px !important;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items {
    flex-direction: row !important;
  }
}
.kt-wizard-v1__nav,
.kt-grid__item {
  border: none !important;
}
.kt-wizard-v1__nav-item[data-ktwizard-state="current"] {
  background-color: red;
}
/*Wizard Fin*/
.custom-form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  align-content: center;
}
@media (max-width: 768px) {
  .custom-form-actions {
    flex-direction: column;
    gap: 10px;
  }
}
.input-group span.input-group-btn button {
  border-radius: 0px !important;
  /*height: calc(1.5em + 1.3rem + 2px) !important;*/
}
/*Customizacion de tablas*/
.custom-table {
  background-color: transparent !important;
}
.custom-table th,
.custom-table td {
  border: 0px solid #dee2e6 !important;
  padding: 0.75rem !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.custom-table td {
  font-size: var(--text-size-small) !important;
}
.custom-table thead th {
  background-color: transparent !important;
  font-family: Mulish-Regular !important;
  font-weight: bold !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: #1b1b1d !important;
  border-bottom: 2px solid #bac7bf !important;
  text-align: center !important;
}
.custom-table tbody tr:hover {
  background-color: #e9ecef !important;
}
.custom-table .EditRow,
.custom-table .RemoveRow {
  color: #e30616 !important;
  cursor: pointer !important;
}
.custom-table th {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.dataTables_wrapper table.custom-table thead {
  background-color: transparent !important;
}
.dataTables_wrapper table.custom-table tbody tr.odd,
.dataTables_wrapper table.custom-table tbody tr.even {
  background-color: transparent !important;
}
.dataTables_wrapper table.custom-table tbody tr.odd > .sorting_1,
.dataTables_wrapper table.custom-table tbody tr.even > .sorting_1 {
  background-color: transparent !important;
}
table.dataTable thead .sorting:after {
  color: transparent !important;
}
table.dataTable thead .sorting:before {
  color: transparent !important;
}
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
  top: 50% !important;
  left: 50% !important;
  height: 12px !important;
  width: 12px !important;
}
:root table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
[data-bs-theme=light] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
:root table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
[data-bs-theme=light] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
:root table.dataTable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
[data-bs-theme=light] table.dataTable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
:root table.dataTable.dtr-column.collapsed > tbody > tr > th.dtr-control:before,
[data-bs-theme=light] table.dataTable.dtr-column.collapsed > tbody > tr > th.dtr-control:before {
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: #78829D;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3crect opacity='0.3' x='2' y='2' width='20' height='20' rx='5' fill='%2378829D'/%3e%3crect x='10.8891' y='17.8033' width='12' height='2' rx='1' transform='rotate%28-90 10.8891 17.8033%29' fill='%2378829D'/%3e%3crect x='6.01041' y='10.9247' width='12' height='2' rx='1' fill='%2378829D'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg%20xmlns%3d%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3d%220%200%20448%20512%22%3e%3cpath%20d%3d%22M256%2080c0%2d17.7%2d14.3%2d32%2d32%2d32s%2d32%2014.3%2d32%2032l0%20144L48%20224c%2d17.7%200%2d32%2014.3%2d32%2032s14.3%2032%2032%2032l144%200%200%20144c0%2017.7%2014.3%2032%2032%2032s32%2d14.3%2032%2d32l0%2d144%20144%200c17.7%200%2032%2d14.3%2032%2d32s%2d14.3%2d32%2d32%2d32l%2d144%200%200%2d144z%22%2f%3e%3c%2fsvg%3e ") !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
table.dataTable.dtr-column.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-column.collapsed > tbody > tr.parent > th.dtr-control:before {
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: #1b1b1d !important;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3crect opacity='0.3' x='2' y='2' width='20' height='20' rx='5' fill='%233E97FF'/%3e%3crect x='6.0104' y='10.9247' width='12' height='2' rx='1' fill='%233E97FF'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg%20xmlns%3d%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3d%220%200%20448%20512%22%3e%3cpath%20d%3d%22M432%20256c0%2017.7%2d14.3%2032%2d32%2032L48%20288c%2d17.7%200%2d32%2d14.3%2d32%2d32s14.3%2d32%2032%2d32l352%200c17.7%200%2032%2014.3%2032%2032z%22%2f%3e%3c%2fsvg%3e ") !important;
}
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
  content: " " !important;
}
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
  border-radius: 0 !important;
}
.dataTables_wrapper div.bottom div.dataTables_paginate ul li a {
  background-color: var(--background-color) !important;
}
.dataTables_wrapper div.bottom div.dataTables_paginate ul li.active a {
  background: var(--primary-color) !important;
  color: var(--text-color-secondary) !important;
}
.dataTables_wrapper div.bottom div.dataTables_paginate ul li.active a {
  border-radius: 0 !important;
}
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  background-color: #e30616 !important;
}
table.dataTable tbody td.control.responsive {
  min-width: 20px !important;
}
.dataTables_wrapper .dataTable td {
  color: var(--text-color-primary) !important;
}
.dataTables_wrapper table.custom-table tbody tr.odd.parent,
.dataTables_wrapper table.custom-table tbody tr.even.parent {
  background-color: #F3F3F3 !important;
}
table.dataTable > tbody > tr.child {
  background-color: #F3F3F3 !important;
  border: 5px !important;
}
table.dataTable > tbody > tr.child:hover {
  background-color: #F3F3F3 !important;
}
.dataTables_wrapper .child .dtr-details > li .dtr-title {
  text-align: start !important;
  border-bottom: none !important;
  font-weight: bold !important;
}
.dataTables_wrapper .child .dtr-details > li .dtr-data {
  text-align: start !important;
  border-bottom: none !important;
}
table.dataTable.nowrap th,
table.dataTable.nowrap td.child {
  white-space: normal;
}
/*Subheader global*/
.subheader-custom {
  transition: box-shadow 0.3s ease;
  /*min-height: 5% !important;*/
}
.subheader-custom.has-shadow {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1);
}
.kt-subheader .kt-subheader__main .kt-subheader__desc {
  padding: 0 0.5rem 0.3rem 0 !important;
  font-size: var(--text-size-small) !important;
  font-weight: 500;
  color: var(--text-color-primary) !important;
}
.subheader-custom-subtitle {
  font-size: 1.5rem;
}
.subheader-custom-subtitle {
  font-family: Mulish-Bold !important;
  font-size: var(--text-size-large) !important;
  color: var(--text-color-primary) !important;
}
.subheader-custom .kt-subheader__main {
  padding: 1.5rem 0.5rem !important;
}
.kt-content {
  padding: 10px 0 !important;
}
/* Header */
.kt-subheader__title {
  font-size: var(--text-size-large) !important;
  color: var(--text-color-primary) !important;
}
.kt-subheader__slash {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}
.kt-subheader .kt-subheader__main .kt-subheader__separator.kt-subheader__separator--v {
  width: 2px !important;
  height: 16px !important;
  transform: rotate(15deg);
  margin-bottom: 5px;
}
.kt-subheader .kt-subheader__main .kt-subheader__separator {
  display: block;
  border-radius: 0px !important;
  background: #1d1d1b !important;
  margin: 0 1rem 0 0;
}
.kt-subheader .kt-subheader__main .kt-subheader__title {
  margin-left: 5px !important;
  padding: 0 1rem 0 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: #434349;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (max-width: 1024px) {
  .kt-content {
    padding: 0 !important;
  }
  .subheader-custom .kt-subheader__main {
    padding: 0 0.5rem !important;
  }
  .kt-subheader .kt-grid__item .subheader-custom {
    margin-bottom: -10px !important;
  }
}
.dtr-control.responsive::before {
  background-color: #e30616 !important;
}
.dropdown-menu {
  border: 0 !important;
  margin: 0;
  border-radius: 0;
  min-width: 14rem;
  padding: 0;
  box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
  padding: 1rem 0;
  border-radius: 0 !important;
}
.kt-svg-icon g [fill] {
  fill: var(--primary-color) !important;
}
/*Alerts*/
.swal-modal {
  width: 478px;
  opacity: 0;
  pointer-events: none;
  background-color: var(--bg-card) !important;
  text-align: center;
  border-radius: 0!important;
  position: static;
  margin: 20px auto;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  z-index: 10001;
  transition: opacity 0.2s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s;
}
.swal-text {
  font-size: 16px;
  position: relative;
  float: none;
  line-height: normal;
  vertical-align: top;
  text-align: center !important;
  display: inline-block;
  margin: 0;
  padding: 0 10px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.64);
  max-width: calc(100% - 20px);
  overflow-wrap: break-word;
  box-sizing: border-box;
}
.swal-button {
  background-color: var(--primary-color) !important;
  color: var(--text-color-secondary) !important;
  border: none;
  box-shadow: none;
  border-radius: 0 !important;
  font-weight: 600;
  font-size: var(--text-size-small) !important;
  padding: 10px 24px;
  margin: 0;
  cursor: pointer;
}
.swal-icon {
  width: 80px;
  height: 80px;
  border-width: 4px;
  border-style: solid;
  border-radius: 50%;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  margin: 20px auto;
  border-color: var(--primary-color) !important;
}
/* HOTFIX: Se ocultan los elementos decorativos del icono de éxito de SweetAlert */
.swal-icon--success:before {
  display: none !important;
}
.swal-icon--success:after {
  display: none !important;
}
.swal-icon--success__hide-corners {
  display: none !important;
}
[class*="swal-icon--"][class*="__body"],
[class*="swal-icon--"][class*="__dot"] {
  background-color: var(--primary-color) !important;
}
.btn [class^="fa-"],
.btn [class*=" fa-"] {
  font-size: var(--text-size-small) !important;
}
.note-popover.popover {
  display: none !important;
  max-width: none;
}
/*table.dataTable td:first-child,
table.dataTable th:first-child {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
}*/
.accordion.accordion-solid .card .card-header .card-title.collapsed {
  border-radius: 0 !important;
}
.accordion.accordion-solid .card .card-header .card-title {
  border-radius: 0 !important;
}
.accordion.accordion-solid .card .card-body {
  border: 1px solid #F3F3F3 !important;
  background-color: #F3F3F3 !important;
}
.accordion .card .card-body {
  font-size: var(--text-size-medium) !important;
}
.accordion.accordion-solid .card .card-header .card-title {
  font-size: var(--text-size-medium) !important;
  padding: 1rem !important;
}
.accordion.accordion-toggle-plus .card .card-header .card-title.collapsed:after,
.accordion.accordion-toggle-plus .card .card-header .card-title:after {
  color: var(--primary-color) !important;
}
.btn.btn-label-brand {
  border-radius: 0 !important;
  background-color: #FFE5E5 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #F3F3F3 !important;
}
.bootstrap-switch {
  border-radius: 20px !important;
  border: none !important;
  box-shadow: none !important;
}
.bootstrap-switch .bootstrap-switch-container {
  border-radius: 20px;
  background: var(--light-gray-color) !important;
  /*box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.7);*/
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
  background: var(--light-gray-color) !important;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
  border-radius: 20px !important;
  background: transparent !important;
  color: #333 !important;
}
.bootstrap-switch .bootstrap-switch-label {
  background: transparent !important;
  color: var(--text-color-primary) !important;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
  background: var(--primary-color) !important;
  color: var(--light-gray-color) !important;
  border-radius: 20px;
  width: 50%;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
  background: #6C6C6C !important;
  color: var(--text-color-secondary) !important;
  border-radius: 20px;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
  width: 50% !important;
}
.bootstrap-switch.bootstrap-switch--air .bootstrap-switch {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.bootstrap-select {
  margin-right: 0.5rem !important;
}
.select2-container {
  margin-right: 0.5rem !important;
}
@media (max-width: 576px) {
  .select2-container {
    margin-right: 0 !important;
  }
  .bootstrap-select {
    margin-right: 0 !important;
  }
}
/* ======================================================
   Modal multi-paso — Compartido entre Cliente y Empleado
   Scoped bajo .modal-cliente / .modal-empleado
   ====================================================== */
/* Container */
.modal-cliente,
.modal-empleado {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
}
/* Border-radius en header/footer para mantener esquinas redondeadas sin overflow:hidden */
.modal-cliente .modal-header-cliente:first-child,
.modal-empleado .modal-header-cliente:first-child {
  border-radius: 16px 16px 0 0;
}
.modal-cliente .footer-cliente:last-child,
.modal-empleado .footer-cliente:last-child {
  border-radius: 0 0 16px 16px;
}
/* Header inline */
.modal-cliente .modal-header-cliente,
.modal-empleado .modal-header-cliente {
  padding: 1.25rem 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.modal-cliente .modal-title-cliente,
.modal-empleado .modal-title-cliente {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color-primary);
  font-family: var(--font-family);
  margin: 0;
}
.modal-cliente .modal-subtitle,
.modal-empleado .modal-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color-primary);
  font-family: var(--font-family);
  margin-bottom: 0.25rem;
}
.modal-cliente .modal-subtitle-secondary,
.modal-empleado .modal-subtitle-secondary {
  font-size: 0.875rem;
  color: #6B7280;
  font-family: var(--font-family);
  margin-bottom: 1rem;
}
.modal-cliente .modal-pregunta,
.modal-empleado .modal-pregunta {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color-primary);
  font-family: var(--font-family);
  margin: 1rem 0;
}
/* Boton cerrar (X) */
.modal-cliente .btn-close-cliente,
.modal-empleado .btn-close-cliente {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-color-primary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}
.modal-cliente .btn-close-cliente:hover,
.modal-empleado .btn-close-cliente:hover {
  opacity: 1;
}
/* Boton Regresar */
.modal-cliente .btn-back-step,
.modal-empleado .btn-back-step {
  background: none;
  border: none;
  color: #6B7280;
  font-size: 0.875rem;
  font-family: var(--font-family);
  padding: 0;
  cursor: pointer;
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
}
.modal-cliente .btn-back-step:hover,
.modal-empleado .btn-back-step:hover {
  color: var(--text-color-primary);
}
.modal-cliente .btn-back-step i,
.modal-empleado .btn-back-step i {
  margin-right: 0.35rem;
}
/* Cards de seleccion */
.modal-cliente .card-seleccion,
.modal-empleado .card-seleccion {
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  margin-bottom: 12px;
  background: #FFFFFF;
}
.modal-cliente .card-seleccion:hover,
.modal-empleado .card-seleccion:hover {
  border-color: #e30616;
}
.modal-cliente .card-seleccion .card-titulo,
.modal-empleado .card-seleccion .card-titulo {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-color-primary);
  font-family: var(--font-family);
  margin-bottom: 4px;
}
.modal-cliente .card-seleccion .card-descripcion,
.modal-empleado .card-seleccion .card-descripcion {
  font-size: 0.875rem;
  color: #6B7280;
  font-family: var(--font-family);
  margin: 0;
}
/* Inputs */
.modal-cliente .form-control,
.modal-empleado .form-control {
  border-radius: 8px !important;
  border: 1px solid #E5E7EB !important;
  font-family: var(--font-family);
  background-color: #FFFFFF !important;
}
.modal-cliente .form-control::placeholder,
.modal-empleado .form-control::placeholder {
  color: #9CA3AF;
}
.modal-cliente .field-auto-filled,
.modal-empleado .field-auto-filled {
  background-color: #E8E8E8 !important;
}
/* Selectpicker override — .dropdown-toggle vence la regla de Metronic style.bundle.css */
.modal-cliente .bootstrap-select > .dropdown-toggle,
.modal-empleado .bootstrap-select > .dropdown-toggle {
  border-radius: 8px !important;
  border: 1px solid #E5E7EB !important;
  background-color: #FFFFFF !important;
  font-style: normal !important;
}
/* Selectpicker auto-filled (campo rellenado por SAT) — especificidad maxima */
.modal-cliente .bootstrap-select > button.btn.dropdown-toggle.field-auto-filled,
.modal-cliente .bootstrap-select > button.field-auto-filled,
.modal-empleado .bootstrap-select > button.btn.dropdown-toggle.field-auto-filled,
.modal-empleado .bootstrap-select > button.field-auto-filled {
  background-color: #E8E8E8 !important;
  background: #E8E8E8 !important;
}
/* Select2 override - container y rendered (vence .select2-selection__rendered #EDEDED de Metronic) */
.modal-cliente .select2-container--default .select2-selection--multiple,
.modal-empleado .select2-container--default .select2-selection--multiple {
  border-radius: 8px !important;
  border: 1px solid #E5E7EB !important;
  background-color: #FFFFFF !important;
}
.modal-cliente .select2-selection__rendered,
.modal-empleado .select2-selection__rendered {
  background-color: transparent !important;
  font-style: normal !important;
}
/* Select2 auto-filled (clase .field-auto-filled en .select2-container) */
.modal-cliente .select2-container.field-auto-filled .select2-selection--multiple,
.modal-empleado .select2-container.field-auto-filled .select2-selection--multiple {
  background-color: #E8E8E8 !important;
}
.modal-cliente .select2-container.field-auto-filled .select2-selection__rendered,
.modal-empleado .select2-container.field-auto-filled .select2-selection__rendered {
  background-color: #E8E8E8 !important;
}
/* Select2 override - dropdown (renderizado dentro del modal via dropdownParent) */
.modal-cliente .select2-container--default .select2-dropdown,
.modal-empleado .select2-container--default .select2-dropdown {
  border-radius: 8px !important;
  border: 1px solid #E5E7EB !important;
}
.modal-cliente .select2-container--default .select2-results__option--highlighted[aria-selected],
.modal-empleado .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #FFF5F5;
  color: var(--text-color-primary);
}
/* Body del modal */
.modal-cliente .modal-body-cliente,
.modal-empleado .modal-body-cliente {
  padding: 0.75rem 1.25rem 1rem;
}
/* Footer */
.modal-cliente .footer-cliente,
.modal-empleado .footer-cliente {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  justify-content: center;
  gap: 12px;
}
/* Boton Guardar / Siguiente / Finalizar (primario pill) */
.modal-cliente .btn-guardar-cliente,
.modal-empleado .btn-guardar-cliente {
  background: #e30616;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 10px 28px;
  font-weight: 600;
  font-size: 0.875rem;
  font-family: var(--font-family);
  cursor: pointer;
}
.modal-cliente .btn-guardar-cliente:hover,
.modal-empleado .btn-guardar-cliente:hover {
  background: #b9000d;
  color: #FFFFFF;
}
/* Boton Cancelar (outline pill) */
.modal-cliente .btn-cancelar-cliente,
.modal-empleado .btn-cancelar-cliente {
  background: transparent;
  color: #e30616;
  border: 1.5px solid #e30616;
  border-radius: 999px;
  padding: 10px 28px;
  font-weight: 600;
  font-size: 0.875rem;
  font-family: var(--font-family);
  cursor: pointer;
}
.modal-cliente .btn-cancelar-cliente:hover,
.modal-empleado .btn-cancelar-cliente:hover {
  background: #FFF5F5;
}
/* Boton Consultar datos */
.modal-cliente .btn-consultar-datos,
.modal-empleado .btn-consultar-datos {
  background: #6B7280;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.875rem;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
}
.modal-cliente .btn-consultar-datos .fa-search,
.modal-empleado .btn-consultar-datos .fa-search {
  color: #FFFFFF;
}
.modal-cliente .btn-consultar-datos:hover,
.modal-empleado .btn-consultar-datos:hover {
  background: #4B5563;
}
.modal-cliente .btn-consultar-datos:disabled,
.modal-empleado .btn-consultar-datos:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Labels */
.modal-cliente .form-group label,
.modal-empleado .form-group label {
  font-family: var(--font-family);
  font-size: 0.875rem;
  color: var(--text-color-primary);
  font-weight: 500;
}
.modal-cliente .required-asterisk,
.modal-empleado .required-asterisk {
  color: #e30616;
}
/* Responsive */
@media (max-width: 768px) {
  .modal-cliente .footer-cliente,
  .modal-empleado .footer-cliente {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-cliente .btn-guardar-cliente,
  .modal-cliente .btn-cancelar-cliente,
  .modal-empleado .btn-guardar-cliente,
  .modal-empleado .btn-cancelar-cliente {
    width: 100%;
    text-align: center;
  }
}
/* ======================================================
   Modal Empleado — Estilos exclusivos (acordeon, contador)
   ====================================================== */
/* Contador de pasos (pill oscuro) */
.modal-empleado .paso-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--font-family);
  font-weight: 600;
  background: #1F2937;
  color: #FFFFFF;
  border-radius: 99px;
  padding: 2px 10px;
  line-height: 1.4;
}
/* Wrapper de subtitulo + contador (flex space-between) */
.modal-empleado .subtitulo-con-contador {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
/* Acordeon de secciones */
.modal-empleado .seccion-acordeon {
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #FFFFFF;
  transition: border-color 0.2s;
}
.modal-empleado .seccion-acordeon .seccion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-family);
  color: var(--text-color-primary);
  user-select: none;
}
.modal-empleado .seccion-acordeon .seccion-header .seccion-chevron {
  font-size: 0.75rem;
  color: #6B7280;
  transition: transform 0.2s;
}
/* Base: fa-chevron-down apunta abajo (seccion cerrada, "click para expandir")
   Activa: rotado 180deg apunta arriba (seccion abierta, "click para colapsar") */
.modal-empleado .seccion-acordeon.activa .seccion-header .seccion-chevron {
  transform: rotate(180deg);
}
.modal-empleado .seccion-acordeon .seccion-body {
  padding: 0 18px 14px;
}
.modal-empleado .seccion-acordeon:not(.activa) .seccion-body {
  display: none;
}
.modal-empleado .seccion-acordeon.activa .seccion-header {
  border-bottom: 1.5px solid #E5E7EB;
}
/* Bloque de datos auto-rellenados (modificador de .seccion-acordeon) */
.modal-empleado .seccion-acordeon.bloque-auto-rellenado {
  background: #FAFAFA;
}
.modal-empleado .seccion-acordeon.bloque-auto-rellenado .seccion-header {
  background: #FAFAFA;
}
/* Boton agregar subcontratacion (outline rojo) */
.modal-empleado .btn-agregar-subcontratacion {
  background: transparent;
  color: #e30616;
  border: 1.5px solid #e30616;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 500;
  font-size: 0.8rem;
  font-family: var(--font-family);
  cursor: pointer;
}
.modal-empleado .btn-agregar-subcontratacion:hover {
  background: #FFF5F5;
}
/* Permitir que items con texto largo del menu lateral crezcan sin solaparse.
   Aplica en todos los breakpoints (no solo mobile) porque también ocurre en
   desktop minimizado al pasar el mouse sobre items con submenu. */
#kt_aside_menu .kt-menu__link {
  min-height: 40px !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
@media (max-width: 1024px) {
  /* Resets de los overrides desktop del sidebar (302px expandido) que en mobile
       no aplican: el aside es overlay flotante, no consume espacio del wrapper. */
  .kt-aside--fixed .kt-wrapper,
  .kt-wrapper {
    padding-left: 0 !important;
  }
  .kt-header--fixed .kt-header {
    left: 0 !important;
  }
  .kt-subheader {
    left: 0 !important;
  }
  /* Aside como overlay fixed: oculto por defecto (left negativo).
       Cuando el usuario tap en hamburguesa, Metronic agrega .kt-aside--on al body
       y eso lo desliza a la vista. Receta basada en el comportamiento de Metronic v5
       (Cuprum), pero adaptada al stacking de v7. */
  #kt_aside,
  .kt-aside {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -255px !important;
    width: 255px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1001 !important;
    flex: none !important;
    transition: left 0.3s ease !important;
  }
  body.kt-aside--on #kt_aside,
  body.kt-aside--on .kt-aside {
    left: 0 !important;
  }
  /* Anular height inline que el JS de KTMenu aplica al menu y permitir que el
       contenido fluya naturalmente. El aside es quien scrollea. */
  #kt_aside_menu_wrapper,
  .kt-aside-menu-wrapper {
    height: auto !important;
    overflow: visible !important;
    flex: none !important;
  }
  #kt_aside_menu,
  .kt-aside-menu {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #kt_aside_menu .kt-menu__nav {
    height: auto !important;
    /* Padding extra al final para asegurar que el último item completo
           (incluyendo submenús expandidos como Administración) sea alcanzable
           por el scroll. Valor empírico que cubre el offset entre scrollHeight
           del aside y la posición real del último item. */
    padding-bottom: 300px !important;
  }
  /* Topbar (donde están campana + usuario) en color corporativo en mobile,
       para mantener consistencia visual con el header desktop. */
  .kt-header__topbar {
    background-color: var(--primary-color) !important;
  }
  /* Header mobile y toggler hamburguesa por encima del overlay (1000) y aside
       (1001) para que el tap en la hamburguesa siempre llegue al toggler y haga
       el toggle correctamente, sin ser interceptado por el overlay. */
  .kt-header-mobile,
  #kt_aside_mobile_toggler {
    z-index: 1002 !important;
    position: relative !important;
  }
}
/* Toggler del aside (desktop): un solo SVG que se voltea horizontalmente
   y cambia de color cuando el sidebar está minimizado. */
#kt_aside_toggler svg {
  transition: transform 0.3s ease;
}
#kt_aside_toggler svg path {
  transition: stroke 0.3s ease;
}
/* Cuando el sidebar está minimizado:
   - Voltear el icono horizontalmente (flecha apunta al lado contrario, "expandir").
   - Pintar el stroke en color corporativo para indicar el estado. */
body.kt-aside--minimize #kt_aside_toggler svg {
  transform: scaleX(-1);
}
body.kt-aside--minimize #kt_aside_toggler svg path {
  stroke: var(--primary-color) !important;
}
.kt-aside__brand {
  margin-top: 2rem;
  margin-bottom: 1rem;
}