/* ============================================================
   CONTRASTE Y BUSCADORES — se carga al final de todos los estilos.

   1. Contraste de color (WCAG AA, 4.5:1 para texto normal):
      - El azul primario pasa de #0ea5e9 (blanco encima = 2.8:1) a #0369a1 (5.1:1).
        Las cabeceras azules, botones primarios, chips activos y enlaces lo heredan.
      - El texto gris "muted" pasa de #a1a1aa (2.4:1) a #64748b (4.8:1):
        encabezados de tabla, chips de filtro, placeholders, textos de ayuda.
      - Verde de botones de éxito #16a34a (3.3:1) → #15803d (4.5:1).
      - Botones de emisión rápida dentro de la cabecera azul: pastilla blanca con
        texto azul (7.6:1); la pantalla actual se resalta en azul marino.
   2. Lupa del buscador: iba superpuesta al texto porque arounda-soft fuerza
      padding 8px 12px !important en los inputs. Ahora ocupa un área propia a la
      derecha, con fondo y borde, y el texto tiene su espacio.
   ============================================================ */

/* ---------- 1. Paleta ---------- */
:root {
  --as-primary: #0369a1;
  --as-primary-dark: #075985;
  --hu-primary: #0369a1;
  --hu-primary-dark: #075985;
  --as-text-muted: #64748b;
  --as-success: #15803d;
  --ui-primary: #0369a1;
  --ui-primary-dark: #075985;
  --ui-navy: #0f172a;
  --ui-muted: #64748b;
  --ui-success: #15803d;
}

/* Texto secundario / placeholders */
.content-wrapper ::placeholder { color: #6b7280 !important; opacity: 1 !important; }
.content-wrapper .text-muted { color: var(--ui-muted) !important; }
.content-wrapper table thead th { color: #475569 !important; }
.vp-legend__item { color: #475569 !important; }
.vp-legend__item.active { background: var(--ui-primary) !important; color: #fff !important; }
.vp-bulk-cb-disabled { color: #94a3b8 !important; }

/* Botones primarios y de éxito */
.content-wrapper .btn-primary, .content-wrapper .btn-info, .content-wrapper .btn-stock,
.content-wrapper .btn-succes-envia, .modal .btn-primary {
  background-color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important;
}
.content-wrapper .btn-primary:hover, .content-wrapper .btn-info:hover, .modal .btn-primary:hover {
  background-color: var(--ui-primary-dark) !important; border-color: var(--ui-primary-dark) !important;
}
.content-wrapper .btn-success, .modal .btn-success, .content-wrapper .btn.btn-succes-envia {
  background-color: var(--ui-success) !important; border-color: var(--ui-success) !important; color: #fff !important;
}
.content-wrapper .btn-success:hover, .modal .btn-success:hover { background-color: #166534 !important; border-color: #166534 !important; }
/* Paginación */
.content-wrapper .pagination > li > a, .content-wrapper .pagination > li > span { color: var(--ui-primary) !important; }
.content-wrapper .pagination > .active > a, .content-wrapper .paginate_button.current {
  background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important;
}

/* Cabeceras azules: fondo más profundo */
body.skin-blue .content-header.dashboard-header,
body.skin-blue .content-header:not(.dashboard-header),
.dashboard-header-modern, .vp-hero, .cp-hero, .pp-hero, .ip-hero {
  background: var(--ui-primary) !important;
}
/* Botones de emisión rápida dentro de la cabecera: pastilla blanca, texto azul; activo en azul marino */
.content-header.dashboard-header .btns-dash a,
.content-header.dashboard-header .btns-dash .btns-dash-modern a,
.dashboard-header-modern .btns-dash-modern a,
.vp-hero__actions a, .vp-hero__actions button, .cp-hero__actions a, .cp-hero__actions button,
.pp-hero__actions a, .pp-hero__actions button, .ip-hero__actions a {
  background: #ffffff !important; color: var(--ui-primary) !important; border: 1px solid #ffffff !important;
}
.content-header.dashboard-header .btns-dash a i, .dashboard-header-modern .btns-dash-modern a i,
.vp-hero__actions a i, .cp-hero__actions a i, .pp-hero__actions a i, .ip-hero__actions a i { color: inherit !important; }
.content-header.dashboard-header .btns-dash a:hover, .dashboard-header-modern .btns-dash-modern a:hover,
.vp-hero__actions a:hover, .cp-hero__actions a:hover, .pp-hero__actions a:hover, .ip-hero__actions a:hover {
  background: #e0f2fe !important; color: var(--ui-primary-dark) !important;
}
.content-header.dashboard-header .btns-dash a.er-activo,
.dashboard-header-modern .btns-dash-modern a.er-activo,
.vp-hero__actions a.active, .vp-hero__actions .btn-fac.activo {
  background: var(--ui-navy) !important; color: #ffffff !important; border-color: var(--ui-navy) !important;
}
.content-header.dashboard-header .btns-dash a.er-activo i { color: #fff !important; }
/* Botones de acción del hero (Nuevo, Stock...) con texto azul sobre blanco: ya pasan; el "Stock" translúcido no */
.vp-hero__actions button.btn-bol, .pp-hero__actions button.btn-bol { background: #ffffff !important; color: var(--ui-primary) !important; }

/* Porcentajes de "Los más vendidos" (colores claros heredados del gráfico) */
.content-wrapper li > a > span.pull-right, .content-wrapper li > span.pull-right { filter: brightness(.6) saturate(1.5); font-weight: 700; }

/* Chips de estado SUNAT y etiquetas pálidas */
.content-wrapper .label-default { background: #64748b !important; }

/* ---------- 2. Buscador: lupa a la derecha en su propia área ---------- */
.vp-toolbar .input-search, .cp-toolbar .input-search, .pp-toolbar .input-search,
.contenedor-busqueda .input-search {
  position: relative !important;
}
.vp-toolbar .input-search::before, .cp-toolbar .input-search::before, .pp-toolbar .input-search::before {
  left: auto !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 42px !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  border-left: 1px solid #e2e8f0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  pointer-events: none;
}
.vp-toolbar .input-search input, .cp-toolbar .input-search input, .pp-toolbar .input-search input,
.vp-toolbar #searchVentas, .cp-toolbar #search, .pp-toolbar #searchProducto {
  padding: 0 52px 0 14px !important;   /* espacio para el área de la lupa */
  background: #fff !important;
  color: #0f172a !important;
}
/* Quitar la "x" nativa de type=search para que no choque con la lupa */
.vp-toolbar input[type="search"]::-webkit-search-cancel-button,
.cp-toolbar input[type="search"]::-webkit-search-cancel-button,
.pp-toolbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Tema oscuro: mantener legibilidad del área de la lupa */
body.tema-oscuro .vp-toolbar .input-search::before, body.tema-oscuro .cp-toolbar .input-search::before,
body.tema-oscuro .pp-toolbar .input-search::before { background: #2a3140 !important; border-left-color: #394150 !important; color: #cbd5e1 !important; }
body.tema-oscuro .vp-toolbar .input-search input, body.tema-oscuro .cp-toolbar .input-search input,
body.tema-oscuro .pp-toolbar .input-search input { background: #1f242d !important; color: #e8eaed !important; }
body.tema-oscuro .content-wrapper ::placeholder { color: #9aa3b2 !important; }
body.tema-oscuro .content-wrapper table thead th { color: #cbd5e1 !important; }
body.tema-oscuro .vp-legend__item { color: #cbd5e1 !important; }

/* Porcentajes de "Los más vendidos": el color viene en línea desde la paleta del gráfico
   (verde/amarillo claros, 1.6:1). Texto oscuro legible; el punto de color de la fila conserva el tono. */
.content-wrapper a > span.pull-right, .content-wrapper li span.pull-right,
.content-wrapper .products-list span.pull-right, .content-wrapper .chart-legend span.pull-right {
  color: #1e293b !important; filter: none !important; font-weight: 700 !important;
}

/* Barra superior: nombre comercial en blanco sobre el azul oscuro (antes texto oscuro, 2:1) */
.main-header .logo, .main-header .logo b, .main-header .logo .logo-lg, .cabecera-m .logo { color: #ffffff !important; }

/* ---------- 3. Cabecera azul en UNA sola fila (escritorio y tablet) ----------
   El título se encoge (tamaño fluido y puntos suspensivos si hace falta) y los
   botones de emisión rápida nunca saltan a una segunda línea. */
@media (min-width: 768px) {
  .content-header.dashboard-header > .box.container-fluid > .col-lg-12 {
    flex-wrap: nowrap !important; gap: 10px !important; align-items: center !important;
  }
  .content-header.dashboard-header .col-lg-12 > .col-md-3,
  .content-header.dashboard-header .col-lg-12 > .col-md-2 {
    flex: 0 1 auto !important; min-width: 0 !important; max-width: 34% !important;
  }
  .content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child,
  .content-header.dashboard-header .col-lg-12 > .col-md-2 > button:first-child {
    font-size: clamp(12px, 1.05vw, 15px) !important; padding: 8px 12px !important; gap: 8px !important;
    max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child > i,
  .content-header.dashboard-header .col-lg-12 > .col-md-2 > button:first-child > i { width: 28px !important; height: 28px !important; flex: 0 0 auto; }
  .content-header.dashboard-header .col-lg-12 > .btns-dash,
  .content-header.dashboard-header .btns-dash {
    flex: 1 1 auto !important; min-width: 0 !important; flex-wrap: nowrap !important; justify-content: flex-end !important;
  }
  .content-header.dashboard-header .btns-dash .btns-dash-modern,
  .dashboard-header-modern .btns-dash-modern {
    flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 6px !important; min-width: 0;
  }
  .content-header.dashboard-header .btns-dash .btns-dash-modern a,
  .dashboard-header-modern .btns-dash-modern a {
    white-space: nowrap !important; flex: 0 0 auto !important; padding: 7px 10px !important; font-size: clamp(11px, 0.9vw, 12.5px) !important;
  }
  .dashboard-header-modern { flex-wrap: nowrap !important; gap: 10px !important; }
  .dashboard-header-modern .dash-title { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 1.1vw, 17px) !important; }
}
/* Pantallas medianas (tablet horizontal / portátil pequeño): botones más compactos aún */
@media (min-width: 768px) and (max-width: 1199px) {
  .content-header.dashboard-header .btns-dash .btns-dash-modern a,
  .dashboard-header-modern .btns-dash-modern a { padding: 6px 8px !important; font-size: 11px !important; gap: 4px !important; }
  .content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child { font-size: 12px !important; padding: 6px 10px !important; }
}

/* Corrección: el bloque de botones conserva su ancho natural (no se encoge ni se monta
   sobre el título); el título ocupa el espacio restante y puede partir en 2 líneas. */
@media (min-width: 768px) {
  .content-header.dashboard-header .col-lg-12 > .btns-dash,
  .content-header.dashboard-header .btns-dash { flex: 0 0 auto !important; min-width: 0 !important; }
  .content-header.dashboard-header .col-lg-12 > .col-md-3,
  .content-header.dashboard-header .col-lg-12 > .col-md-2 { flex: 1 1 auto !important; max-width: none !important; min-width: 0 !important; }
  .content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child,
  .content-header.dashboard-header .col-lg-12 > .col-md-2 > button:first-child {
    white-space: normal !important; text-overflow: clip !important; line-height: 1.15 !important; text-align: left !important;
    font-size: clamp(12px, 1vw, 14px) !important; max-height: 44px; overflow: hidden !important;
  }
  .dashboard-header-modern .dash-title { flex: 1 1 auto; white-space: normal; text-overflow: clip; line-height: 1.15; max-height: 40px; overflow: hidden; }
  .dashboard-header-modern .btns-dash-modern { flex: 0 0 auto; }
}
@media (min-width: 768px) and (max-width: 1440px) {
  .content-header.dashboard-header .btns-dash .btns-dash-modern a,
  .dashboard-header-modern .btns-dash-modern a { padding: 6px 9px !important; font-size: 11.5px !important; gap: 4px !important; }
}

/* Dos niveles de compactación para que título y 8 botones compartan SIEMPRE una fila:
   1200–1440 px: pastillas más pequeñas; 768–1199 px: pastillas solo con icono (tooltip en title)
   salvo la pantalla actual, que conserva su nombre. */
@media (min-width: 1200px) and (max-width: 1440px) {
  .content-header.dashboard-header .btns-dash .btns-dash-modern,
  .dashboard-header-modern .btns-dash-modern { gap: 4px !important; }
  .content-header.dashboard-header .btns-dash .btns-dash-modern a,
  .dashboard-header-modern .btns-dash-modern a { padding: 5px 7px !important; font-size: 11px !important; gap: 4px !important; }
  .content-header.dashboard-header .btns-dash .btns-dash-modern a i,
  .dashboard-header-modern .btns-dash-modern a i { font-size: 12px !important; }
  .content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child { font-size: 12px !important; padding: 6px 10px !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .content-header.dashboard-header .btns-dash .btns-dash-modern,
  .dashboard-header-modern .btns-dash-modern { gap: 4px !important; }
  .content-header.dashboard-header .btns-dash .btns-dash-modern a:not(.er-activo),
  .dashboard-header-modern .btns-dash-modern a:not(.er-activo) { font-size: 0 !important; padding: 8px 10px !important; gap: 0 !important; line-height: 1 !important; }
  .content-header.dashboard-header .btns-dash .btns-dash-modern a:not(.er-activo) i,
  .dashboard-header-modern .btns-dash-modern a:not(.er-activo) i { font-size: 14px !important; }
  .content-header.dashboard-header .btns-dash .btns-dash-modern a.er-activo,
  .dashboard-header-modern .btns-dash-modern a.er-activo { font-size: 11px !important; padding: 6px 10px !important; }
  .content-header.dashboard-header .col-lg-12 > .col-md-3 > button:first-child { font-size: 13px !important; padding: 7px 12px !important; }
}

/* ---------- 4. Tablas de administración (proveedores, sucursales, usuarios, cajas...) compactas ----------
   La columna Acciones salía estrecha y los dos botones del .btn-group se apilaban (fila de 93 px). */
.content-wrapper table.tablas > tbody > tr > td,
.content-wrapper table.tablas > thead > tr > th { padding: 7px 10px !important; vertical-align: middle !important; }
.content-wrapper table.tablas > thead > tr > th { white-space: nowrap !important; font-size: 12px !important; }
.content-wrapper table.tablas td .btn-group { display: inline-flex !important; flex-wrap: nowrap !important; gap: 4px !important; white-space: nowrap !important; }
.content-wrapper table.tablas td .btn-group > .btn,
.content-wrapper table.tablas td > .btn {
  float: none !important; padding: 5px 9px !important; min-height: 30px !important; height: 30px !important; font-size: 12px !important; line-height: 1.2 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; border-radius: 7px !important;
}
.content-wrapper table.tablas td:last-child { white-space: nowrap !important; width: 1% !important; }
.content-wrapper table.tablas .toggle.btn { height: 28px !important; min-height: 28px !important; }

/* ---------- 5. Modal "Agregar productos o servicios" (#modalProductosVenta) ----------
   Escritorio: el modal medía 900px y la tabla 938px (el botón de configurar quedaba
   fuera); la columna Cantidad tenía un input de 197px. Ahora el modal usa el ancho
   disponible, la tabla cabe entera y las filas son compactas.
   Panel de precios por producto (.super-contenedor-precios): rejilla ordenada
   etiqueta/campo en 2 pares por fila (1 par en móvil). */
@media (min-width: 768px) {
  #modalProductosVenta .modal-dialog.modal-lg { width: min(96vw, 1180px) !important; margin: 24px auto !important; }
  #modalProductosVenta .modal-body { padding: 14px 16px !important; }
  #modalProductosVenta .modal-body .col-12 { padding: 0 !important; }
  #modalProductosVenta table.tabla-add { width: 100% !important; table-layout: auto !important; margin: 0 !important; }
  #modalProductosVenta table.tabla-add th, #modalProductosVenta table.tabla-add td {
    padding: 6px 8px !important; font-size: 13px !important; vertical-align: middle !important; line-height: 1.25 !important;
  }
  #modalProductosVenta table.tabla-add thead th { font-size: 11px !important; white-space: nowrap !important; }
  #modalProductosVenta table.tabla-add tr.contenedor-items td:nth-child(3) { min-width: 180px; }
  #modalProductosVenta table.tabla-add .cantidad-stock {
    width: 64px !important; height: 32px !important; min-height: 32px !important; padding: 2px 6px !important; text-align: center; font-size: 13px !important;
  }
  #modalProductosVenta table.tabla-add .btn-stock { padding: 3px 8px !important; min-height: 0 !important; height: 26px !important; font-size: 12px !important; border-radius: 6px !important; }
  #modalProductosVenta table.tabla-add .btn-prod { width: 40px !important; white-space: nowrap !important; }
  #modalProductosVenta table.tabla-add .btn-prod .btn, #modalProductosVenta table.tabla-add .btn-prod .btn-group .btn {
    width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 7px !important;
  }
  #modalProductosVenta .modal-body .form-control, #modalProductosVenta .modal-body select.form-control { height: 36px !important; min-height: 36px !important; font-size: 13px !important; }
  #modalProductosVenta .modal-footer { padding: 8px 12px !important; }
}

/* Panel de precios por producto: común a escritorio y móvil */
#modalProductosVenta .super-contenedor-precios {
  display: block; padding: 10px 12px !important; margin: 4px 0 !important; border-radius: 10px;
  background: rgba(3, 105, 161, .06); border: 1px solid rgba(3, 105, 161, .18);
}
body.tema-oscuro #modalProductosVenta .super-contenedor-precios { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
#modalProductosVenta .super-contenedor-precios .desc-productos h3 {
  font-size: 13px !important; font-weight: 700 !important; margin: 0 0 8px !important; line-height: 1.2 !important;
}
#modalProductosVenta .super-contenedor-precios .contenedor-precios {
  display: grid !important; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 6px 10px; align-items: center;
  width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; float: none !important;
}
#modalProductosVenta .super-contenedor-precios .contenedor-precios > label {
  font-size: 11px !important; font-weight: 600 !important; margin: 0 !important; white-space: nowrap; line-height: 1.2 !important;
}
#modalProductosVenta .super-contenedor-precios .pre-css,
#modalProductosVenta .super-contenedor-precios select.pre-css, #modalProductosVenta .super-contenedor-precios input.pre-css {
  width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; margin: 0 !important;
  padding: 4px 8px !important; font-size: 12px !important; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #0f172a;
}
body.tema-oscuro #modalProductosVenta .super-contenedor-precios .pre-css { background: #1f242d; color: #e8eaed; border-color: #394150; }
#modalProductosVenta .super-contenedor-precios input[readonly].pre-css { background: #f1f5f9; }
body.tema-oscuro #modalProductosVenta .super-contenedor-precios input[readonly].pre-css { background: #2a3140; }
/* bloques que ocupan toda la fila */
#modalProductosVenta .super-contenedor-precios .btngroup-precio-mayor-normal,
#modalProductosVenta .super-contenedor-precios .contenedor_icbper,
#modalProductosVenta .super-contenedor-precios .btn-grupos,
#modalProductosVenta .super-contenedor-precios .contenedor-precios:nth-of-type(2) > label:nth-of-type(4) { grid-column: 1 / -1 !important; }
#modalProductosVenta .super-contenedor-precios .btngroup-precio-mayor-normal { display: flex !important; gap: 6px !important; width: 100% !important; margin: 2px 0 !important; }
#modalProductosVenta .super-contenedor-precios .btngroup-precio-mayor-normal .btn {
  flex: 1 1 0 !important; float: none !important; font-size: 11px !important; line-height: 1.2 !important; padding: 5px 6px !important; min-height: 36px !important; border-radius: 7px !important;
}
#modalProductosVenta .super-contenedor-precios .contenedor_icbper { display: flex !important; align-items: center !important; gap: 8px !important; }
#modalProductosVenta .super-contenedor-precios .contenedor_icbper .modo-contenedor-icbper { width: auto !important; margin: 0 !important; }
#modalProductosVenta .super-contenedor-precios .contenedor_icbper .pre-css { width: 110px !important; }
#modalProductosVenta .super-contenedor-precios .btn-grupos { display: flex !important; justify-content: flex-end !important; gap: 6px !important; margin-top: 2px !important; }
#modalProductosVenta .super-contenedor-precios .btn-grupos .btn { min-height: 34px !important; height: 34px !important; width: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
#modalProductosVenta .super-contenedor-precios .btn-grupos .closeModalProductos { background: #dc2626 !important; border-color: #dc2626 !important; }

/* Móvil: un par etiqueta/campo por fila; la fila de precios ocupa el ancho de la tabla */
@media (max-width: 767px) {
  #modalProductosVenta .super-contenedor-precios { padding: 8px !important; }
  #modalProductosVenta .super-contenedor-precios .contenedor-precios { grid-template-columns: max-content minmax(0, 1fr); gap: 5px 8px; }
  #modalProductosVenta .super-contenedor-precios .desc-productos h3 { font-size: 10px !important; }
  #modalProductosVenta .super-contenedor-precios .contenedor-precios > label { font-size: 9px !important; }
  #modalProductosVenta .super-contenedor-precios .pre-css { height: 26px !important; min-height: 26px !important; font-size: 9px !important; padding: 2px 6px !important; }
  #modalProductosVenta .super-contenedor-precios .btngroup-precio-mayor-normal .btn { font-size: 9px !important; min-height: 30px !important; }
  #modalProductosVenta .super-contenedor-precios .btn-grupos .btn { height: 28px !important; min-height: 28px !important; width: 38px !important; }
  #modalProductosVenta table.tabla-add tr:not(.contenedor-items) > td[colspan] { display: table-cell !important; padding: 0 !important; }
}

/* ---------- 6. Avatar/logo del panel lateral ---------- */
/* Al colapsar el menú (sidebar-mini, 50px) la imagen perdía todo ancho y se mostraba a su tamaño natural (500px). */
.main-sidebar .user-panel2 .image img { width: 120px !important; height: 120px !important; max-width: 100% !important; object-fit: cover; }
@media (min-width: 768px) {
  body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel2 { padding: 10px 4px 8px !important; }
  body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel2 .image, body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel2 .image img { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; margin: 0 auto !important; }
  body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel2 > .info { display: none !important; }
}

/* ---------- 7. Guía de remisión: bloque opcional de conductor y vehículo ---------- */
.datos-opcionales { background: rgba(3, 105, 161, .06) !important; border: 1px solid rgba(3, 105, 161, .18) !important; border-radius: 10px !important; margin-left: 0 !important; margin-right: 0 !important; }
.datos-opcionales label { color: #0f172a !important; font-weight: 600 !important; }
.datos-opcionales label small, .datos-opcionales .text-muted { color: #475569 !important; }
body.tema-oscuro .datos-opcionales { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .14) !important; }
body.tema-oscuro .datos-opcionales label { color: #e2e8f0 !important; }
body.tema-oscuro .datos-opcionales label small, body.tema-oscuro .datos-opcionales .text-muted { color: #a3aab8 !important; }

/* ---------- 8. Comprobantes: la tabla de ítems no debe encogerse junto a los botones flotados ---------- */
.row.nuevoProducto .table-responsive.items-c { clear: both !important; width: 100% !important; float: none !important; }
/* Botón "generar código" del modal de producto: arounda-soft pintaba el addon de blanco y el icono era blanco */
.input-group-addon.bar-code-btn { background: var(--ui-primary, #0369a1) !important; border-color: var(--ui-primary, #0369a1) !important; color: #fff !important; cursor: pointer !important; }
.input-group-addon.bar-code-btn i { color: #fff !important; animation: none !important; }
.input-group-addon.bar-code-btn:hover i { animation: 2s rotate linear infinite !important; }
/* ===== Leyenda "Estado SUNAT" (Guías): íconos iguales a la columna SUNAT, separados y legibles ===== */
.contenedor-estados-sunat {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 12px; margin: 0 0 10px; border-radius: 10px;
  background: var(--as-bg-alt, #f8fafc); border: 1px solid var(--as-border, #e2e8f0);
  font-size: 13px; color: #334155;
}
.contenedor-estados-sunat > div { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.contenedor-estados-sunat .sunat-estado { font-weight: 700; color: #0f172a; }
.contenedor-estados-sunat label { display: inline-block; width: 20px; height: 20px; margin: 0; flex: 0 0 20px;
  background-size: 18px 18px; background-position: center; background-repeat: no-repeat; }
.contenedor-estados-sunat label.estadosunat { display: none; }
.contenedor-estados-sunat label.aceptado  { background-image: url("../img/success.png"); }
.contenedor-estados-sunat label.rechazado { background-image: url("../img/svg/rechazo.svg"); }
.contenedor-estados-sunat label.noenviado { background-image: url("../img/svg/get_cdr.svg"); }
.contenedor-estados-sunat label.baja      { background-image: url("../img/cruz.png"); }
body.tema-oscuro .contenedor-estados-sunat { background: #1f242d; border-color: #334155; color: #cbd5e1; }
body.tema-oscuro .contenedor-estados-sunat .sunat-estado { color: #e8eaed; }
@media (max-width: 767px) { .contenedor-estados-sunat { font-size: 11px; gap: 4px 10px; padding: 6px 8px; } }

/* Título del encabezado azul de los reportes: arounda-soft.css solo lo estilizaba cuando la columna
   era col-md-3 o col-md-2; con col-md-4 (Ganancia por producto, etc.) quedaba gris sobre azul. */
.content-header.dashboard-header .col-lg-12 > [class*="col-md-"]:not(.btns-dash) > button:first-child {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--as-radius-md, 10px) !important;
  font-weight: 600 !important;
  text-align: left;
}
.content-header.dashboard-header .col-lg-12 > [class*="col-md-"]:not(.btns-dash) > button:first-child i { color: #fff !important; }

/* ---------- Utilidades para reportes ----------
   plantilla.css deja .table-responsive con overflow-x: inherit (para no recortar los menús
   desplegables de algunas tablas), así que las tablas anchas ensanchaban toda la página.
   .rep-scroll   → la tabla se desplaza de lado dentro de su caja.
   .rep-opc      → columna secundaria: se oculta en celular.
   .rep-pie-ancho / .rep-pie-corto → celda de "TOTAL" para PC / para celular. */
.rep-scroll { overflow-x: auto !important; max-width: 100%; -webkit-overflow-scrolling: touch; }
.rep-nw { white-space: nowrap; }
.rep-pie-corto { display: none; }
@media (max-width: 767px) {
  .rep-opc { display: none !important; }
  .rep-pie-ancho { display: none !important; }
  .rep-pie-corto { display: table-cell; }
}
/* Tarjetas de totales: nota con el monto en dólares incluido */
.info-box .info-box-number small.rep-usd { display: block; font-size: 11px; font-weight: 600; color: #6b7785; white-space: nowrap; }

/* Filtro por tipo de comprobante (Reporte de ventas / compras): texto legible y el tipo elegido
   resaltado. Antes el texto heredaba un gris oscuro sobre fondos oscuros y no se veía cuál
   estaba seleccionado. */
.contenedor-radios { gap: 6px; padding-left: 0 !important; }
.contenedor-radios label.btn-radios,
.contenedor-radios label {
  background: #fff !important;
  color: #1f3b63 !important;
  border: 1px solid #b8c4d3 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  transition: background .15s, color .15s, border-color .15s;
}
.contenedor-radios label i { color: inherit !important; }
.contenedor-radios label:hover { border-color: #0b5cad !important; color: #0b5cad !important; }
.contenedor-radios label:has(+ input:checked) {
  background: #0b5cad !important;
  border-color: #0b5cad !important;
  color: #fff !important;
}
body.tema-oscuro .contenedor-radios label { background: #172436 !important; color: #e6edf6 !important; border-color: #36496a !important; }
body.tema-oscuro .contenedor-radios label:has(+ input:checked) { background: #6cb2ff !important; color: #08121f !important; border-color: #6cb2ff !important; }