/* Paleta de Medix (cliente), tomada de medix.com.mx: azul de marca para
   acciones y encabezados, celeste como acento. Todas las plantillas usan
   estas variables; no agregar colores sueltos. */
:root {
  --medix-azul: #2B498A;
  --medix-azul-oscuro: #1E3567;
  --medix-celeste: #3FA6DB;
  --medix-texto: #333333;
}

.sidenav-header {
  height: 7rem !important;
}

.bg-gradient-primary,
.navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon,
.text-gradient.text-primary {
  background-image: linear-gradient(310deg, var(--medix-azul-oscuro) 0%, var(--medix-azul) 100%);


}

.alert-primary {
    background-image: linear-gradient(310deg, var(--medix-azul-oscuro) 0%, var(--medix-azul) 100%);
}
.leaflet-popup-content-wrapper {
  background: white !important; /* fallback for old browsers */
}

div.dataTables_wrapper div.dataTables_filter {
  width: 100% !important;
  float: none !important;
  text-align: center !important;
}

.dt-search {
  float: right !important;
}

.dt-container {
  height: 70vh !important; /* 90% del alto de la ventana */
}

.text-primary {
  color: var(--medix-azul) !important;
}

.btn-primary {
  background-color: var(--medix-azul) !important;
  border-color: var(--medix-celeste) !important;
}


.fecha-container {
  min-width: 200px; /* Establece el ancho mínimo deseado */
  display: inline-block; /* Permite que el contenedor se expanda según sea necesario */
}

.navbar-vertical .navbar-brand>img, .navbar-vertical .navbar-brand-img {
    max-width: 100%!important;
    min-width: 100% !important;
    max-height: 100%!important;
}

/* Badges de estatus del dashboard: mismo ancho para todos */
.estatus-badge {
    min-width: 160px;
    text-align: center;
    display: inline-block;
}

/* select2 con el mismo look que los .form-control de Soft UI (altura,
   radio, borde, tipografia); el tema por defecto de select2 se ve
   chaparro y con otra fuente al lado de los inputs del formulario. */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 0.75rem;
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  background-color: #fff;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: #495057;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.5rem;
  color: #495057;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 1.25rem;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--medix-celeste);
  box-shadow: 0 0 0 2px rgba(63, 166, 219, 0.25);
  outline: 0;
}
.select2-container--default .select2-dropdown {
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--medix-azul);
}

/* Soft UI pinta la X de .btn-close en blanco (pensada para encabezados
   oscuros); sobre el encabezado blanco de los modales queda invisible. */
.modal-header .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23344767'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: 0.6;
}
.modal-header .btn-close:hover {
  opacity: 1;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: 0;
  border-color: var(--medix-celeste);
  box-shadow: 0 0 0 2px rgba(63, 166, 219, 0.25);
}

/* Detalle del expediente: todas las secciones (datos fiscales, vendedor,
   bancarios, documentos constitutivos, SAP) con las mismas columnas. */
.datos-expediente .list-group-item > div {
  width: 100%;
  min-width: 0;
}
.datos-expediente table {
  width: 100%;
  table-layout: fixed;
  margin-bottom: 0;
}
.datos-expediente td,
.datos-expediente th {
  font-size: 0.75rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.datos-expediente tr > td:first-child {
  width: 38%;
  color: #67748e;
}
.datos-expediente tr > td:nth-child(2) {
  color: #344767;
  font-weight: 600;
}
.historial-evento {
  min-width: 0;
  overflow-wrap: anywhere;
}
.datos-expediente table.tabla-columnas tr > td:first-child {
  width: auto;
  color: #344767;
}

/* "Mostrar N entradas", el total y la paginacion de DataTables quedaban
   pegados al borde de la tarjeta; se alinean con el contenido. */
div.dt-container div.dt-layout-row:not(.dt-layout-table),
div.dt-container > .dt-length,
div.dt-container > .dt-search,
div.dt-container > .dt-info,
div.dt-container > .dt-paging {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
div.dt-container .dt-length select {
  min-width: 4.5rem;
}

/* Observaciones del revisor en el portal del proveedor: el alert-warning de
   Soft UI usa degradado con texto blanco y no se leia. */
.aviso-observaciones {
  background-color: #fff6e5;
  border-left: 4px solid #f5a623;
  border-radius: 0.5rem;
  color: #3d3d3d;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
}


/* Componentes de Soft UI llevados a la paleta de Medix. */
.bg-gradient-dark {
  background-image: linear-gradient(310deg, var(--medix-azul-oscuro) 0%, var(--medix-azul) 100%) !important;
}
.bg-gradient-info {
  background-image: linear-gradient(310deg, #2E8FC4 0%, var(--medix-celeste) 100%) !important;
}
.btn-outline-dark {
  color: var(--medix-azul) !important;
  border-color: var(--medix-azul) !important;
}
.btn-outline-dark:hover {
  background-color: var(--medix-azul) !important;
  color: #fff !important;
}
.btn-link.text-dark,
a.text-dark:not(.btn) {
  color: var(--medix-azul) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--medix-celeste) !important;
  box-shadow: 0 0 0 2px rgba(63, 166, 219, 0.25) !important;
}
.texto-medix {
  color: var(--medix-azul) !important;
}
.banner-medix {
  background: linear-gradient(to right, var(--medix-azul-oscuro), var(--medix-azul));
}
.swal2-styled.swal2-confirm {
  background-color: var(--medix-azul) !important;
}
.btn-dark {
  background-color: var(--medix-azul) !important;
  border-color: var(--medix-azul) !important;
}
.btn-dark:hover {
  background-color: var(--medix-azul-oscuro) !important;
}
/* Ambar y verde sobrios: los de Soft UI (rojo-naranja y verde lima)
   chocaban con el azul de Medix. */
.bg-gradient-warning {
  background-image: linear-gradient(310deg, #D98A1E 0%, #F0B54A 100%) !important;
}
.bg-gradient-success {
  background-image: linear-gradient(310deg, #23864E 0%, #3BAE6B 100%) !important;
}
.bg-gradient-secondary {
  background-image: linear-gradient(310deg, #6B778C 0%, #8E99AD 100%) !important;
}

/* ==========================================================================
   Refresco visual (2026-10): estilo plano sobre Soft UI.
   Colores solidos (sin degradados), una sola familia tipografica, nada en
   mayusculas sostenidas, tarjetas con borde fino y casi sin sombra.
   ========================================================================== */
:root {
  --fondo: #F4F6FA;
  --superficie: #FFFFFF;
  --borde: #E2E7EF;
  --texto: #1F2937;
  --texto-secundario: #5B6474;
  --radio: 12px;
}

/* Soft UI fija "Open Sans" en muchos elementos; se reemplaza en todos menos
   en los iconos (Font Awesome y Nucleo usan su propia fuente). */
body,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.ni):not([class^="fa-"]):not([class*=" fa-"]):not([class^="ni-"]):not([class*=" ni-"]) {
  font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
}
body,
.bg-gray-100,
.main-content-bg {
  background-color: var(--fondo) !important;
  color: var(--texto);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--medix-azul-oscuro);
  letter-spacing: 0;
}
p, .text-sm, .text-xs {
  color: var(--texto-secundario);
}

/* Tarjetas: borde fino, sombra apenas visible. */
.card {
  border: 1px solid var(--borde) !important;
  border-radius: var(--radio) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}
.card.card-plain {
  border: 0 !important;
  box-shadow: none !important;
}

/* Botones: solidos, en minuscula normal, sin efecto de "levantarse". */
.btn {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 0.55rem 1.1rem;
}
.btn:hover,
.btn:focus {
  transform: none !important;
  box-shadow: none !important;
}
.btn-sm {
  font-size: 0.8125rem !important;
  padding: 0.4rem 0.85rem;
}
.btn:focus-visible {
  outline: 2px solid var(--medix-celeste) !important;
  outline-offset: 2px;
}
.btn-outline-secondary {
  color: var(--texto) !important;
  border-color: var(--borde) !important;
  background-color: var(--superficie) !important;
}
.btn-outline-secondary:hover {
  background-color: var(--fondo) !important;
}

/* Fondos solidos en lugar de degradados. */
.bg-gradient-dark,
.bg-gradient-primary,
.navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon {
  background-image: none !important;
  background-color: var(--medix-azul) !important;
}
.btn.bg-gradient-dark:hover,
.btn.bg-gradient-primary:hover {
  background-color: var(--medix-azul-oscuro) !important;
}
.bg-gradient-info {
  background-image: none !important;
  background-color: var(--medix-celeste) !important;
}

/* Estatus: pastilla de fondo tenue con texto oscuro. */
.badge {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.7rem !important;
}
.estatus-badge.bg-gradient-secondary {
  background-image: none !important;
  background-color: #EEF1F5 !important;
  color: #4B5563 !important;
}
.estatus-badge.bg-gradient-info {
  background-image: none !important;
  background-color: #E3F2FB !important;
  color: #1D6E99 !important;
}
.estatus-badge.bg-gradient-warning {
  background-image: none !important;
  background-color: #FDF1DC !important;
  color: #8A5A0B !important;
}
.estatus-badge.bg-gradient-success {
  background-image: none !important;
  background-color: #E2F3E9 !important;
  color: #1C6B3E !important;
}

/* Menu lateral: la seccion actual con fondo azul tenue, sin tarjeta flotante. */
.navbar-vertical .navbar-nav .nav-link.active {
  background-color: #E8EEF8 !important;
  box-shadow: none !important;
  color: var(--medix-azul) !important;
  font-weight: 600;
}
.navbar-vertical .navbar-nav .nav-link .icon {
  box-shadow: none !important;
  border: 1px solid var(--borde);
}

/* Tablas: encabezados legibles en lugar de mayusculas diminutas. */
.table thead th {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--texto-secundario) !important;
  opacity: 1 !important;
  border-bottom: 1px solid var(--borde) !important;
}
.table td {
  border-color: var(--borde) !important;
}
div.dt-container .dt-search input,
div.dt-container .dt-length select {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  background-color: var(--superficie);
}

/* Formularios. */
.form-control,
.form-select,
.select2-container--default .select2-selection--single {
  border-color: var(--borde) !important;
  border-radius: 8px !important;
}
label,
.form-label {
  color: var(--texto) !important;
  font-weight: 600 !important;
}

/* Encabezado del expediente: nombre, estatus, acciones y datos clave. */
.encabezado-expediente h4 {
  font-size: 1.5rem;
  font-weight: 700;
}
.datos-clave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}
.datos-clave dt {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--texto-secundario);
  margin-bottom: 0.15rem;
}
.datos-clave dd {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Inicio de sesion y recuperacion de contrasena. */
.acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: var(--fondo);
}
.acceso-tarjeta {
  width: 100%;
  max-width: 420px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2.25rem 2rem;
}
.acceso-logo {
  display: block;
  height: 44px;
  margin-bottom: 1.75rem;
}
.acceso-tarjeta h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.acceso-tarjeta .btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Encabezado del portal del proveedor: blanco, para que el logo (turquesa y
   gris) se lea; el azul lo apagaba. */
.banner-medix {
  background: var(--superficie) !important;
  border-bottom: 1px solid var(--borde);
}

/* Linea de tiempo del expediente (detalle) */
.linea-tiempo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--borde);
}
.linea-tiempo__etapa {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.linea-tiempo__marca {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border: 2px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: #fff;
  font-size: 0.625rem;
}
.linea-tiempo__etapa--hecha .linea-tiempo__marca {
  background: var(--medix-azul);
  border-color: var(--medix-azul);
}
.linea-tiempo__etapa--actual .linea-tiempo__marca {
  border-color: var(--medix-azul);
  box-shadow: 0 0 0 3px rgba(43, 73, 138, 0.15);
}
.linea-tiempo__titulo {
  margin: 0;
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 600;
}
.linea-tiempo__etapa--pendiente .linea-tiempo__titulo {
  color: var(--texto-secundario);
  font-weight: 500;
}
.linea-tiempo__detalle {
  margin: 0;
  color: var(--texto-secundario);
  font-size: 0.75rem;
}
.linea-tiempo__devuelto {
  margin: 0.25rem 0 0;
  color: #B45309;
  font-size: 0.75rem;
  font-weight: 600;
}
@media (max-width: 767.98px) {
  .linea-tiempo {
    grid-template-columns: 1fr;
  }
}

/* Filtros por etapa del tablero */
.filtros-etapa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filtro-etapa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 500;
}
.filtro-etapa:hover {
  border-color: var(--medix-celeste);
}
.filtro-etapa:focus-visible {
  outline: 2px solid var(--medix-celeste);
  outline-offset: 2px;
}
.filtro-etapa.activo {
  background: var(--medix-azul);
  border-color: var(--medix-azul);
  color: #fff;
}
.filtro-etapa__conteo {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Portal del proveedor en pasos */
.barra-pasos {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.barra-pasos__paso {
  flex: 1 1 0;
  min-width: 0;
}
.barra-pasos__paso a {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.625rem;
  border-top: 3px solid var(--borde);
  color: var(--texto-secundario);
  font-size: 0.8125rem;
  text-decoration: none;
}
.barra-pasos__paso a:focus-visible {
  outline: 2px solid var(--medix-celeste);
  outline-offset: 2px;
}
.barra-pasos__paso--completo a {
  border-top-color: var(--medix-celeste);
  color: var(--texto);
}
.barra-pasos__paso--actual a {
  border-top-color: var(--medix-azul);
  color: var(--medix-azul);
  font-weight: 600;
}
.barra-pasos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75rem;
}
.barra-pasos__paso--completo .barra-pasos__numero {
  background: var(--medix-celeste);
  border-color: var(--medix-celeste);
  color: #fff;
}
.navegacion-pasos {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}
.navegacion-pasos > :last-child {
  margin-left: auto;
}
/* En pantallas angostas basta el "Paso N de M" y el titulo. */
@media (max-width: 767.98px) {
  .barra-pasos {
    display: none;
  }
}