/* Menu "Data B2B" (Homologacion de SKU, Maestra de productos, Consultador, Usuarios B2B retail, Usuarios empresa).
   Manual de marca Lyseon v1.2. Solo diseño. Todo acotado a .dbm-page (wrapper de cada pagina): Dash carga assets/
   global, esto no toca otras paginas. Usa !important porque assets/custom.css (global) fuerza label/h4/.Select-control/
   .btn-ghost/.dash-table-container en naranja/oscuro. */

.dbm-page {
  background: #F4F6F8;
  padding: 12px;
  min-height: 100vh;
  font-family: 'Open Sans', Arial, sans-serif;
}

/* tarjeta principal */
.dbm-page > .card {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 32, 91, .06);
  overflow: hidden;
  color: #333333;
}

/* cabecera Navy con kicker naranja (el kicker sale por CSS: no cambia el contenido de la pagina) */
.dbm-page > .card > .card-header {
  background: #00205B !important;
  border-bottom: none;
  padding: 16px 20px 12px;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.dbm-page > .card > .card-header::before {
  content: "DATA B2B";
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: #FF5722;
}
.dbm-page > .card > .card-header h4 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #FFFFFF !important;
  margin: 8px 0 0;
}
.dbm-page .card-body { padding: 12px 20px 16px; }

/* titulos, etiquetas, separadores */
.dbm-page h5, .dbm-page h6 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700;
  color: #00205B !important;
}
.dbm-page h5 { font-size: 14px; }
.dbm-page h6 { font-size: 12px; }
.dbm-page label,
.dbm-page .form-label {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  color: #555555 !important;
  margin-bottom: 4px;
}
.dbm-page hr {
  border: 0;
  border-top: 1px solid #DDDDDD;
  opacity: 1;
  margin: 12px 0;
}
.dbm-page .row { align-items: center; }

/* campos */
.dbm-page .form-control,
.dbm-page .form-select,
.dbm-page textarea,
.dbm-page input[type="text"],
.dbm-page input[type="number"],
.dbm-page input[type="password"] {
  background: #FFFFFF !important;
  border: 1px solid #DDDDDD !important;
  border-radius: 8px !important;
  color: #333333 !important;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
}
.dbm-page .form-control:focus,
.dbm-page .form-select:focus { border-color: #FF5722 !important; box-shadow: none !important; }
.dbm-page .Select-control {
  background: #FFFFFF !important;
  border: 1px solid #DDDDDD !important;
  border-radius: 8px !important;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  min-height: 34px;
  padding: 2px 6px;
  color: #333333 !important;
}
.dbm-page .Select.is-focused > .Select-control,
.dbm-page .Select-control:hover { border-color: #FF5722 !important; box-shadow: none !important; }
.dbm-page .Select--single > .Select-control .Select-value,
.dbm-page .Select-placeholder,
.dbm-page .Select-value-label { color: #555555 !important; }
.dbm-page .Select-menu-outer {
  background: #FFFFFF !important;
  border: 1px solid #DDDDDD !important;
  border-radius: 8px;
  z-index: 9999;
}
.dbm-page .Select-option { background: #FFFFFF !important; color: #333333 !important; font-size: 12px; }
.dbm-page .Select-option.is-focused { background: #E6E9EF !important; }
.dbm-page .Select--multi .Select-value { background: #E6E9EF; border: 1px solid #DDDDDD; color: #00205B; }
.dbm-page .Select--multi .Select-value-label { color: #00205B !important; }
.dbm-page .DateInput_input {
  background: #FFFFFF !important;
  border: 1px solid #DDDDDD !important;
  border-radius: 8px;
  color: #333333 !important;
  font-size: 12px;
  width: 120px;
}

/* botones: primario de la marca (naranja, texto Navy) */
.dbm-page .btn-ghost {
  background: #FF5722;
  color: #00205B;
  border: 1px solid #FF5722;
  border-radius: 8px;
  padding: 6px 10px;
  width: auto;
  min-width: max-content;
  justify-content: center;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
}
.dbm-page .btn-ghost i { margin-right: 5px; }
.dbm-page .btn-ghost:hover:not(:disabled) {
  background: #DF3500;
  border-color: #DF3500;
  color: #FFFFFF;
  box-shadow: none;
}
.dbm-page .btn-ghost:disabled { background: #E6E9EF; border-color: #DDDDDD; color: #555555; opacity: .8; }

/* tablas (dash_table): encabezado Navy con linea naranja, filas blancas/Soft, 11px centrado */
.dbm-page .dash-table-container .dash-header {
  background-color: #00205B !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-align: center !important;
  border: none !important;
  border-bottom: 2px solid #FF5722 !important;
  padding: 4px 6px !important;
}
.dbm-page .dash-table-container .dash-header * { color: #FFFFFF !important; }
.dbm-page .dash-table-container .dash-cell {
  background-color: #FFFFFF;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 400 !important;
  font-size: 11px !important;
  text-align: center !important;
  padding: 4px 6px !important;
  border: none !important;
  border-bottom: 1px solid #DDDDDD !important;
  color: #333333 !important;
  max-width: none !important;
}
.dbm-page .dash-table-container .dash-cell .dash-cell-value { text-align: center !important; }
.dbm-page .dash-table-container .dash-row-odd .dash-cell { background-color: #F4F6F8 !important; }
.dbm-page .dash-table-container .dash-row:hover .dash-cell {
  background-color: #E6E9EF !important;
  color: #333333 !important;
  font-weight: 400 !important;
}
.dbm-page .dash-table-container .dash-row-selected .dash-cell { background-color: #FFEEE9 !important; color: #333333 !important; }
.dbm-page .dash-table-container .dash-filter input::placeholder { color: #888888; }
.dbm-page .dash-table-container .dash-filter,
.dbm-page .dash-table-container .dash-filter input { background: #FFFFFF !important; color: #333333 !important; }
.dbm-page .dash-spreadsheet-container .previous-next-container,
.dbm-page .dash-spreadsheet-container .page-number {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  color: #333333;
}
.dbm-page .show-hide {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #00205B;
  background: transparent;
  border: 1px solid #00205B;
  border-radius: 4px;
  padding: 6px 16px;
}
.dbm-page .show-hide:hover { background: #001337; color: #FFFFFF; }

/* panel lateral de detalle: texto sobre blanco */
.dbm-page [id^="side-panel"] { font-family: 'Open Sans', Arial, sans-serif; }

/* barra de botones (Descargar / Actualizar): las columnas bootstrap originales (col-3 > col-4 > col-4) son tan angostas que
   los botones se cortaban; aca la columna se ajusta al contenido y queda pegada a la derecha. */
.dbm-page .card-body > .row > .col-3:last-child {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}
.dbm-page .card-body > .row > .col-3:last-child > .row {
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}
.dbm-page .card-body > .row > .col-3:last-child > .row > .col-4 {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
}
.dbm-page .card-body > .row > .col-3:last-child > .row > .col-4:empty { display: none; }

/* retoques: texto suelto (mensajes tipo "Debe iniciar sesion") y selector de fecha sin recorte */
.dbm-page .card-body { font-size: 12px; color: #333333; }
.dbm-page .DateInput { width: auto; }
.dbm-page .DateInput_input { width: 110px; }