/*
 * claude-design.css — mejoras visuales (solo diseño, sin cambios funcionales)
 * Se carga después de los estilos de Acorn/Element y sobreescribe únicamente
 * tipografía, botones, formas, sombras y sidebar usando las variables del
 * tema activo (--primary, --separator, ...), por lo que respeta todos los
 * temas de color. Para revertir: quitar el <link> en los layouts.
 */

/* ============ 1. Tipografía: Poppins ============ */

:root {
    --font: 'Poppins', 'Nunito Sans', sans-serif;
    --font-heading: 'Poppins', 'Montserrat', sans-serif;
}

body,
.el-button,
.el-input__inner,
.el-textarea__inner,
.el-select-dropdown__item,
.el-form-item__label,
.el-table,
.el-dialog,
.el-message-box,
.el-message,
.el-notification,
.el-dropdown-menu__item,
.el-pagination,
.el-tabs__item,
.el-checkbox__label,
.el-radio__label,
.el-tooltip__popper,
.el-picker-panel,
.el-popover,
.swal2-popup,
.tooltip,
.popover {
    font-family: var(--font) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.modal-title,
.el-dialog__title,
.el-message-box__title {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* Poppins es más ancha que Inter Tight: compensación ligera */
body {
    letter-spacing: -0.005em;
}

/* no pisar las fuentes de íconos */
.bi, .bi::before { font-family: 'bootstrap-icons' !important; }
[class^='el-icon'], [class*=' el-icon'],
.el-input__icon, .el-select__caret {
    font-family: element-icons !important;
}
.fa, .fas, .far { font-family: 'Font Awesome 5 Free' !important; }
.fab { font-family: 'Font Awesome 5 Brands' !important; }

/* ============ 2. Botones ============ */

.btn,
.el-button {
    font-weight: 500;
    border-radius: var(--border-radius-md, 7px);
    transition: box-shadow 0.15s ease, transform 0.15s ease,
        background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:not(.btn-link):not(.disabled):not(:disabled):hover,
.el-button:not(.is-disabled):not(.el-button--text):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn:not(.btn-link):active,
.el-button:not(.el-button--text):active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-primary,
.el-button--primary {
    box-shadow: 0 2px 6px rgba(var(--primary-rgb, 36, 153, 227), 0.25);
}

.btn:focus-visible,
.el-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 36, 153, 227), 0.3);
}

/* botones pequeños de las tablas: un poco más de aire */
.btn-sm, .el-button--mini, .el-button--small {
    border-radius: var(--border-radius-sm, 6px);
}

/* ============ 3. Campos de formulario ============ */

.form-control,
.custom-select,
.el-input__inner,
.el-textarea__inner {
    border-radius: var(--border-radius-md, 7px);
    border-color: var(--separator, #ddd);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.custom-select:focus,
.el-input__inner:focus,
.el-textarea__inner:focus,
.el-input.is-focus .el-input__inner {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 36, 153, 227), 0.12);
}

.el-form-item__label,
label.form-label,
.form-group > label {
    font-weight: 500;
    color: var(--alternate, #7c7c7c);
}

/* ============ 4. Tarjetas y superficies ============ */

.card {
    border: 1px solid var(--separator-light, #f1f1f1);
    border-radius: var(--border-radius-lg, 10px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.modal-content,
.el-dialog {
    border-radius: var(--border-radius-lg, 10px);
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.el-dialog__header,
.modal-header {
    border-bottom: 1px solid var(--separator-light, #f1f1f1);
}

.dropdown-menu,
.el-select-dropdown,
.el-dropdown-menu,
.el-picker-panel,
.el-popover {
    border-radius: var(--border-radius-md, 7px);
    border: 1px solid var(--separator-light, #f1f1f1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    border-radius: var(--border-radius-sm, 6px);
    margin: 0 0.25rem;
    width: auto;
    transition: background-color 0.12s ease;
}

/* ============ 5. Tablas ============ */

.table thead th,
.el-table th > .cell,
.el-table__header th {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--alternate, #7c7c7c);
}

.table tbody tr,
.el-table__row {
    transition: background-color 0.12s ease;
}

.table-hover tbody tr:hover,
.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(var(--primary-rgb, 36, 153, 227), 0.05);
}

/* ============ 6. Sidebar ============ */

#nav .menu-container ul.menu > li > a,
#nav .menu-container ul.menu li ul li a {
    border-radius: var(--border-radius-md, 7px);
    transition: background-color 0.15s ease, color 0.15s ease;
}

#nav .menu-container ul.menu > li > a:hover {
    background-color: rgba(var(--primary-rgb, 36, 153, 227), 0.08);
}

#nav .menu-container ul.menu a.active {
    background-color: rgba(var(--primary-rgb, 36, 153, 227), 0.12);
    font-weight: 600;
}

#nav .menu-container ul.menu > li > a .label {
    letter-spacing: 0;
}

#nav .menu-container ul.menu i.bi {
    transition: transform 0.15s ease;
}

#nav .menu-container ul.menu > li > a:hover i.bi {
    transform: scale(1.1);
}

/* ============ 7. Detalles: scrollbars, badges, paginación ============ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(var(--muted-rgb, 176, 176, 176), 0.55);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--muted-rgb, 176, 176, 176), 0.85);
}

.badge {
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--border-radius-sm, 6px);
}

.page-link,
.el-pager li {
    border-radius: var(--border-radius-sm, 6px) !important;
    transition: background-color 0.12s ease;
}

.el-tag {
    border-radius: var(--border-radius-sm, 6px);
}

/* pestañas Element */
.el-tabs__item {
    font-weight: 500;
}

/* ============ Poppins en TODO el sistema (2026-08-02) ============
   La lista de selectores de arriba dejaba fuera bloques enteros (menú,
   modales de terceros, tablas custom, PDFs de vista previa). Regla
   general que excluye SOLO las fuentes de iconos: pisarles la
   font-family rompe los glifos (tofu). */
body,
body :where(:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class^="el-icon"]):not([class*=" el-icon"]):not([class^="cs-"]):not([class^="bi-"]):not([class*=" bi-"]):not([data-acorn-icon])) {
    font-family: 'Poppins', 'Nunito Sans', system-ui, sans-serif !important;
}

/* ============ Sidebar tenant: tipografía uniforme (2026-08-02) ============
   Los ítems cuyo texto va en <span class="label"> quedaban en 13px y los de
   texto suelto heredaban los 14px del <a> → submenús con tamaños distintos.
   Se fija un único tamaño para todos los niveles; los <i> (fuentes de
   iconos) se dejan intactos, solo se les normaliza el tamaño visual. */
#nav #menu a,
#nav #menu a span,
#nav #menu a span.label,
#nav #menu ul a,
#nav #menu ul ul a {
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0;
}
#nav #menu > li > a { font-weight: 500 !important; }
#nav #menu ul a { font-weight: 400 !important; }
#nav #menu a i,
#nav #menu a [data-cs-icon],
#nav #menu a [class^="bi-"],
#nav #menu a [class*=" bi-"] {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* =======================================================================
   Marca Fakturaya + identidad del tenant en el sidebar (2026-08-04)
   Logo Fakturaya arriba; debajo, entre separadores, razón social y RUC.
   ======================================================================= */
.fx-side-brand { text-align: center; padding: 8px 12px 0; width: 100%; }
.fx-side-brand a { display: inline-block; }
.fx-side-brand-logo {
    height: 44px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain !important;
    display: inline-block;
}
.fx-side-company {
    margin-top: 10px;
    padding: 10px 4px;
    border-top: 1px solid var(--separator, rgba(15, 23, 42, 0.12));
    border-bottom: 1px solid var(--separator, rgba(15, 23, 42, 0.12));
}
.fx-side-company-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}
.fx-side-company-ruc {
    font-size: 11.5px;
    opacity: .75;
    margin-top: 2px;
}

/* =======================================================================
   COLOR DE MARCA UNIFICADO (2026-08-04): naranja Fakturaya #ec3f0a en
   todos los tenants (tema base light-blue fijado en los layouts; el
   editor de colores quedó desactivado en acorn/js/base/init.js).
   ======================================================================= */
html[data-color] {
    --primary: #ec3f0a !important;
    --primary-darker: #c93305 !important;
    --primary-rgb: 236, 63, 10 !important;
}

/* Sidebar riel angosto: isotipo; expandido (hover/pin): logo + empresa */
.fx-side-brand { width: 100%; text-align: center; padding: 10px 8px 0; }
.fx-side-brand a { display: inline-block; }
.fx-side-brand-iso {
    height: 38px !important; width: 38px !important;
    object-fit: contain !important; display: inline-block !important;
}
.fx-side-brand-logo {
    display: none !important; height: 46px !important; width: auto !important;
    max-width: 200px !important; object-fit: contain !important;
}
.fx-side-company {
    display: none !important; margin-top: 10px; padding: 10px 6px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
.fx-side-company-name { font-size: 12.5px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.fx-side-company-ruc { font-size: 11.5px; opacity: .75; margin-top: 2px; }
/* Sidebar ABIERTO = dos mecanismos de Acorn: expansión por hover (CSS puro
   en escritorio) Y apertura por JS (nav.js pone data-menu-animate='show').
   Se cubren AMBOS; los display con !important garantizan que nunca se vean
   los dos logos a la vez. */
html[data-menu-animate='show'] .fx-side-brand-iso,
#nav:hover .fx-side-brand-iso { display: none !important; }
html[data-menu-animate='show'] .fx-side-brand-logo,
#nav:hover .fx-side-brand-logo { display: inline-block !important; }
html[data-menu-animate='show'] .fx-side-company,
#nav:hover .fx-side-company { display: block !important; }

/* Sidebar ANCLADO (pinned, el default desde 2026-08-04): expandido
   permanente -> logo completo + empresa SIN necesidad de hover */
html[data-behaviour='pinned'] .fx-side-brand-iso { display: none !important; }
html[data-behaviour='pinned'] .fx-side-brand-logo { display: inline-block !important; }
html[data-behaviour='pinned'] .fx-side-company { display: block !important; }

/* Editor de colores DESACTIVADO (2026-08-04): color estandarizado a la
   marca; el boton flotante (paint-roller, chunk 94896) y el panel quedan
   ocultos para todos los tenants */
#settingsButton, #settings, .settings-button { display: none !important; }

/* Modal "Agregar Producto o Servicio" (documents/create): con nombres de
   producto largos, la lista desplegable de Element UI se ensanchaba fuera del
   modal. Dos causas: (1) cada opción usa white-space:nowrap; (2) el popper
   .el-select-dropdown trae min-width inline (= ancho del input) pero sin
   max-width, así que el contenido en una sola línea lo estiraba (~965px en un
   modal de 700px).
   Fix: se permite el salto de línea en la opción, y se pone width:0 al popper
   para que gane su min-width inline (el ancho real del input); así el texto
   hace wrap dentro de ese ancho en vez de estirar la caja. Auto-ajustable: no
   fija ningún px.
   Acotado con :has() a los dropdowns cuyas opciones traen overflow-tooltip
   (clase el-tooltip) — el buscador de productos. Los selects de valores cortos
   (Moneda, Tipo de operación, Serie…) NO tienen esa clase y quedan intactos,
   sin wrap forzado. */
.el-select-dropdown.el-popper:has(.el-select-dropdown__item.el-tooltip) {
    width: 0 !important;
}
.el-select-dropdown__item.el-tooltip {
    white-space: normal !important;
    height: auto !important;
    min-height: 34px;
    line-height: 1.35;
    padding-top: 6px;
    padding-bottom: 6px;
    word-break: break-word;
}

/* ============================================================
   SIDEBAR OSCURO (2026-08-07, pedido usuario): fondo negro,
   textos blancos, acentos naranja; logo variante para fondo
   oscuro (logo-sidebar-dark.png en los layouts).
   ============================================================ */
#nav.nav-container,
#nav .nav-content {
  background: #101418 !important;
}

#nav { border-color: rgba(255, 255, 255, .06) !important; }

/* enlaces del menú */
#nav .menu a,
#nav .menu a span.label,
#nav .menu a i {
  color: #e7ecf3 !important;
}

/* hover y activo: naranja sobre fondo tenue */
#nav .menu a:hover,
#nav .menu a:hover i,
#nav .menu a:hover span.label {
  color: #ff7a45 !important;
}

#nav .menu a.active,
#nav .menu a.active i,
#nav .menu a.active span.label {
  color: #ff7a45 !important;
}

#nav .menu a.active {
  background: rgba(236, 63, 10, .14) !important;
  border-color: rgba(236, 63, 10, .55) !important;
}

/* submenús */
#nav .menu ul.collapse a,
#nav .menu .collapse a span.label {
  color: #b6c0cd !important;
}

#nav .menu ul.collapse a:hover,
#nav .menu ul.collapse a.active {
  color: #ff7a45 !important;
}

/* bloque de marca: empresa y RUC */
#nav .fx-side-company-name { color: #f4f6f9 !important; }
#nav .fx-side-company-ruc { color: #94a3b8 !important; }
#nav .fx-side-brand { border-color: rgba(255, 255, 255, .08) !important; }
#nav .fx-side-brand a { border-color: rgba(255, 255, 255, .08) !important; }

/* separadores internos del sidebar */
#nav hr,
#nav .separator {
  border-color: rgba(255, 255, 255, .08) !important;
  opacity: 1;
}

/* usuario (nombre + rol) */
#nav .user-container .name,
#nav .user-container a,
#nav .user-container .user span {
  color: #e7ecf3 !important;
}

#nav .user-container small,
#nav .user-container .text-muted {
  color: #94a3b8 !important;
}

/* iconos de acceso rápido bajo el usuario */
#nav .user-container ~ div a i,
#nav .quick-icons a i {
  color: #b6c0cd !important;
}

/* scrollbar del sidebar */
#nav ::-webkit-scrollbar-thumb { background: #2b3440; }

/* riel colapsado y bordes redondeados de items activos mantienen contraste */
#nav .menu a { transition: color .15s, background .15s; }

/* --- ajustes sidebar oscuro (2026-08-07 tarde): hover gris oscuro,
       separadores visibles del bloque de marca --- */

/* hover: nunca blanco; gris oscuro con texto naranja */
#nav .menu a:hover,
#nav .menu li a:hover,
#nav .menu ul.collapse a:hover {
  background: #1c232c !important;
}

#nav .user-container a:hover,
#nav .user-container .user:hover {
  background: #1c232c !important;
}

/* iconos de acceso rápido y cualquier botón dentro del sidebar */
#nav a.btn:hover,
#nav button:hover {
  background: #1c232c !important;
  color: #ff7a45 !important;
}

/* separadores del logo y de razón social/RUC: visibles sobre negro */
#nav .fx-side-company,
.fx-side-company {
  border-top-color: rgba(255, 255, 255, .25) !important;
  border-bottom-color: rgba(255, 255, 255, .25) !important;
}

/* --- Cerrar sesión al pie del menú lateral (2026-08-07) --- */
#nav .menu .fx-logout-item {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

#nav .menu .fx-logout-item a,
#nav .menu .fx-logout-item a i,
#nav .menu .fx-logout-item a span.label {
  color: #f8b4a0 !important;
}

#nav .menu .fx-logout-item a:hover,
#nav .menu .fx-logout-item a:hover i,
#nav .menu .fx-logout-item a:hover span.label {
  color: #ff7a45 !important;
  background: #1c232c !important;
}

/* --- Bloque de usuario (nombre + estado instancia) al pie del sidebar
       (2026-08-07, pedido usuario): orden de columna en .nav-content --- */
#nav .nav-content {
  flex-direction: column;
}

#nav .nav-content .fx-side-brand { order: 0; }
#nav .nav-content .menu-container { order: 1; }

#nav .nav-content .user-container {
  order: 2;
  margin-top: auto;
  padding-top: 10px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

/* --- iconos rápidos y pin/tema ARRIBA; usuario+estado abajo (2026-08-07) --- */
#nav .nav-content > .fx-quick-icons { order: 0; }
#nav .nav-content > ul.menu-icons { order: 0; }
#nav .nav-content .menu-container { order: 1; }
#nav .nav-content .user-container { order: 2; }

.fx-quick-icons {
  text-align: center;
  padding: 2px 8px 0;
}

.fx-quick-icons a {
  color: #b6c0cd !important;
  display: inline-block;
}

.fx-quick-icons a:hover { color: #ff7a45 !important; }

.fx-quick-icons ul.menu-icons { margin-bottom: 4px; }

/* pin (contraer) y modo claro/oscuro */
#nav .nav-content > ul.menu-icons a,
#nav .nav-content > ul.menu-icons a i {
  color: #b6c0cd !important;
}

#nav .nav-content > ul.menu-icons a:hover,
#nav .nav-content > ul.menu-icons a:hover i {
  color: #ff7a45 !important;
}

/* --- ajustes sidebar (2026-08-07 noche): iconos superiores en blanco y
       con aire respecto a la línea; dropdown de usuario legible --- */
.fx-quick-icons {
  padding-top: 14px !important;
}

.fx-quick-icons a,
.fx-quick-icons a i,
#nav .nav-content > ul.menu-icons a,
#nav .nav-content > ul.menu-icons a i {
  color: #ffffff !important;
}

.fx-quick-icons a:hover,
.fx-quick-icons a:hover i,
#nav .nav-content > ul.menu-icons a:hover,
#nav .nav-content > ul.menu-icons a:hover i {
  color: #ff7a45 !important;
}

#nav .nav-content > ul.menu-icons { padding-top: 2px; }

/* dropdown del usuario (Administrador): fondo blanco y texto oscuro SIEMPRE;
   anula el hover oscuro genérico del sidebar que lo dejaba ilegible */
#nav .dropdown-menu.user-menu,
body > .dropdown-menu.user-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45);
}

#nav .dropdown-menu.user-menu a,
body > .dropdown-menu.user-menu a,
#nav .dropdown-menu.user-menu span,
body > .dropdown-menu.user-menu span,
#nav .dropdown-menu.user-menu label,
#nav .dropdown-menu.user-menu li {
  color: #1e293b !important;
}

#nav .dropdown-menu.user-menu a:hover,
body > .dropdown-menu.user-menu a:hover {
  background: #fff4ee !important;
  color: #ec3f0a !important;
}

#nav .dropdown-menu.user-menu a:hover span,
body > .dropdown-menu.user-menu a:hover span,
#nav .dropdown-menu.user-menu a:hover i {
  color: #ec3f0a !important;
}

/* el dropdown del usuario ahora vive al PIE del sidebar: forzarlo a abrir
   HACIA ARRIBA dentro del nav (overflow:hidden lo recortaba abajo) */
#nav .user-container { position: relative; }

#nav .user-container .dropdown-menu.user-menu.show,
body > .dropdown-menu.user-menu.show {
  position: fixed !important;
  top: auto !important;
  left: 12px !important;
  right: auto !important;
  bottom: 88px !important;
  width: 264px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2000 !important;
  max-height: 60vh;
  overflow-y: auto;
}

/* menú de usuario re-colgado en body con toggle propio (.fx-open) */
body > .dropdown-menu.user-menu {
  display: none;
}

body > .dropdown-menu.user-menu.fx-open {
  display: block !important;
  position: fixed !important;
  left: 12px !important;
  bottom: 88px !important;
  top: auto !important;
  right: auto !important;
  width: 264px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3000 !important;
  padding: 8px;
}

body > .dropdown-menu.user-menu.fx-open a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
}

/* ============================================================
   Sidebar con esquinas RECTAS (pedido usuario 2026-08-07):
   Acorn redondea las esquinas derechas del nav vertical.
   ============================================================ */
html[data-placement='vertical'] .nav-container,
html[data-placement='vertical'] .nav-container .nav-shadow,
html[data-placement='horizontal'] .nav-container.mobile-side-ready,
html[data-placement='horizontal'] .nav-container.mobile-side-ready .nav-shadow {
    border-radius: 0 !important;
}

/* ============================================================
   RIEL CONTRAÍDO (2026-08-08, pedido usuario): con el sidebar
   desanclado (unpinned) el riel de 80px se veía roto:
   - .fx-quick-icons (fila de atajos, 166px) desbordaba y los
     iconos salían recortados por ambos lados;
   - los iconos del menú quedaban ~8px a la izquierda del centro;
   - el bloque de usuario (102px, "Administrador…") sobresalía
     con el texto cortado.
   Estas reglas SOLO aplican al estado riel real: unpinned, sin
   hover y sin apertura JS (data-menu-animate='show'); cualquier
   estado expandido queda intacto. */
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .fx-quick-icons {
    display: none !important;
}
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .menu-container ul.menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .menu-container ul.menu > li > a > i {
    margin: 0 !important;
}
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .menu-container ul.menu > li > a .label {
    display: none !important;
}
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .user-container .name,
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .user-container .profile {
    display: none !important;
}
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .user-container,
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .user-container .user {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
}
/* El isotipo respira un poco más en el riel */
html[data-behaviour='unpinned']:not([data-menu-animate='show']) #nav:not(:hover) .fx-side-brand {
    padding-top: 14px;
    padding-bottom: 6px;
}

/* ── Cards de producto POS: borde definido para individualidad (2026-08-09) ──
   Antes solo sombra y se fundían entre sí; borde 1px gris + hover con acento.
   Va aquí (y no en pos.css) porque el layout tenant no renderiza @stack('styles'). */
.card:has(> .card-body.pointer) {
    border: 1px solid #dfe3ea !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:has(> .card-body.pointer):hover {
    border-color: rgba(236, 63, 10, 0.55) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-2px);
}
.card:has(> .card-body.pointer) > .card-footer {
    border-top: 1px solid #eef0f4;
}

/* ══════════ MÓVIL: sidebar/nav usable (2026-08-09) ══════════
   En data-dimension='mobile' Acorn colapsa el nav a barra horizontal 64px
   con hamburguesa (#mobileMenuButton) que abre drawer (.mobile-side-ready).
   Nuestro .fx-side-brand (logo+empresa, width:100%) inflaba la fila a ~320px
   y el overflow:hidden del nav lo recortaba todo: hamburguesa invisible.
   Barra compacta: solo logo a la izquierda + hamburguesa; empresa, iconos
   rápidos y usuario viven en el drawer. */
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content { position: relative; }
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .fx-side-brand {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .fx-side-brand-iso { display: none !important; }
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .fx-side-brand-logo {
    display: inline-block !important;
    height: 40px !important;
    width: auto !important;
    max-width: 200px;
}
/* toggle: anclado dentro de la barra, centrado vertical, sin pestaña colgante */
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .mobile-buttons-container {
    position: absolute !important;
    right: 10px;
    top: 0;
    bottom: 0;
    height: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .mobile-buttons-container > a {
    height: auto !important;
    padding: 8px 10px;
    border-radius: 10px !important;
}
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .mobile-buttons-container > a i { font-size: 22px; }
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .fx-side-company { display: none !important; }
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content .fx-quick-icons { display: none !important; }
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content > .user-container { display: none !important; }

/* Drawer abierto: vuelve el bloque completo de marca + usuario + accesos */
html[data-dimension='mobile'] #nav.mobile-side-ready .nav-content .fx-side-brand {
    width: 100% !important;
    flex-direction: column;
    text-align: center;
    padding: 10px 8px 0 !important;
}
html[data-dimension='mobile'] #nav.mobile-side-ready .nav-content .fx-side-company {
    display: block !important;
    padding-bottom: 8px;
}
html[data-dimension='mobile'] #nav.mobile-side-ready .nav-content .fx-quick-icons {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    order: 1 !important;   /* arriba, como en escritorio: tras la marca, antes del menú */
    width: 100%;
    padding: 4px 0 6px;
}
html[data-dimension='mobile'] #nav.mobile-side-ready .nav-content .fx-side-brand { order: 0 !important; }
html[data-dimension='mobile'] #nav.mobile-side-ready .nav-content > .menu-icons { order: 2 !important; }
html[data-dimension='mobile'] #nav.mobile-side-ready .nav-content > .menu-container { order: 3 !important; }
html[data-dimension='mobile'] #nav.mobile-side-ready .nav-content > .user-container {
    display: flex !important;
    order: 9 !important;   /* usuario al pie del drawer */
}

/* Header móvil sin esquinas redondeadas (2026-08-09, pedido usuario) */
html[data-dimension='mobile'] #nav:not(.mobile-side-ready),
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-content,
html[data-dimension='mobile'] #nav:not(.mobile-side-ready) .nav-shadow {
    border-radius: 0 !important;
}

/* ── Barra de scroll horizontal VISIBLE en datatables (2026-08-14) ─────────
   El tema (styles.css, body.custom-scrollbar) pinta scrollbars de 6px con
   fondo transparente: en monitores pequeños la tabla de /documents (y
   cualquier listado ancho) SÍ scrollea, pero nadie ve la barra y no
   descubren que los botones de acciones están a la derecha. */
.table-responsive {
    overflow-x: auto;
    scrollbar-width: auto;                             /* Firefox */
    scrollbar-color: rgba(var(--muted-rgb, 110, 120, 140), 0.75) rgba(var(--muted-rgb, 110, 120, 140), 0.15);
}
body.custom-scrollbar .table-responsive::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 12px;
    width: 8px;
    background: rgba(var(--muted-rgb, 110, 120, 140), 0.15);
    border-radius: 6px;
}
body.custom-scrollbar .table-responsive::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(var(--muted-rgb, 110, 120, 140), 0.75);
    border-radius: 6px;
}
body.custom-scrollbar .table-responsive::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--muted-rgb, 110, 120, 140), 1);
}

/* Barra proxy flotante (script en documents/index.blade): scrollbar
   horizontal pegada al borde inferior de la ventana mientras la tabla
   está a la vista */
#fx-hscroll-proxy {
    /* sticky DENTRO de la card, como hermana inmediata de .table-responsive:
       acompaña el borde inferior de la pantalla mientras la tabla está a la
       vista y reposa bajo la tabla al llegar al final */
    position: sticky;
    bottom: 0;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 5;
    /* fondo SÓLIDO con el color de card del tema (claro u oscuro): sin él la
       barra se transparentaba sobre las filas y en modo oscuro no se veía */
    background: var(--foreground, #fff);
    border-top: 1px solid rgba(var(--muted-rgb, 110, 120, 140), 0.5);
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.18);
    border-radius: 8px 8px 0 0;
    display: none;
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: rgb(var(--muted-rgb, 110, 120, 140)) transparent;
}
#fx-hscroll-proxy > div {
    height: 1px;
}
body.custom-scrollbar #fx-hscroll-proxy::-webkit-scrollbar,
#fx-hscroll-proxy::-webkit-scrollbar {
    height: 16px;
    background: transparent;
}
body.custom-scrollbar #fx-hscroll-proxy::-webkit-scrollbar-thumb,
#fx-hscroll-proxy::-webkit-scrollbar-thumb {
    background: rgb(var(--muted-rgb, 110, 120, 140));
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* ── Dropdowns de acciones dentro de datatables (2026-08-12) ───────────────
   El contenedor .table-responsive lleva overflow:auto para el scroll
   horizontal, y eso RECORTA los menús desplegables de la columna Acciones
   (no es un problema de z-index: el clipping ocurre igual con z-index alto).
   Mientras haya un menú abierto se libera el overflow del contenedor. */
.table-responsive:has(.dropdown-menu.show),
.table-responsive:has(.show > .dropdown-menu) {
    overflow: visible !important;
}
/* EXCEPCIÓN /documents: liberar el overflow mataba el scrollLeft del
   contenedor — al abrir el kebab (⋮) con la tabla scrolleada a la derecha,
   la vista saltaba de vuelta a la izquierda y el menú quedaba anclado FUERA
   de la pantalla. Se mantiene el scroll y el menú abre dentro del aire
   inferior (padding-bottom) del contenedor. */
.fx-documents-page .table-responsive:has(.dropdown-menu.show),
.fx-documents-page .table-responsive:has(.show > .dropdown-menu) {
    overflow-x: auto !important;
    overflow-y: auto !important;
}
/* aire para el menú kebab (~453px de alto) sin alterar el layout */
.fx-documents-page .table-responsive {
    padding-bottom: 480px;
    margin-bottom: -480px;
}

/* la columna Cliente adaptativa vive en la regla #scroll2 …:nth-child(3) a
   (bloque histórico del listado, más específico); ver ahí */
/* EXCEPCIÓN /cash: ahí la columna Acciones va anclada (sticky) al contenedor,
   y si el contenedor deja de scrollear el sticky se ancla a la VENTANA y los
   botones saltan fuera de la card. Como el menú abre hacia la izquierda dentro
   de la columna anclada (y el contenedor lleva padding-bottom de sobra), no
   hace falta liberar el overflow para que se vea completo. */
.fx-cash-page .table-responsive:has(.dropdown-menu.show),
.fx-cash-page .table-responsive:has(.show > .dropdown-menu) {
    overflow-x: auto !important;
    overflow-y: auto !important;
}
/* El menú por encima de encabezados/paginación del propio datatable */
.table-responsive .dropdown-menu.show,
.table .dropdown-menu.show {
    z-index: 1080;
}

/* ── Columna de acciones legible (2026-08-12) ──────────────────────────────
   Los botones se apilaban desalineados en varias filas; se agrupan
   alineados a la derecha con separación uniforme. */
.table td .btn-group.flex-wrap {
    display: inline-flex;
    vertical-align: middle;
}
.table td .btn-group + .btn,
.table td .btn + .btn-group,
.table td .btn-group + .btn-group {
    margin-left: 4px;
}
.table td .btn-sm {
    margin-bottom: 4px;
    white-space: nowrap;
}

/* Encabezados del datatable sin cortes raros a mitad de palabra */
.table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

/* Celda de acciones: los botones se apilaban escalonados y desalineados.
   Se alinean a la derecha en una rejilla flexible con separación uniforme. */
.table td:last-child:has(> .btn-group),
.table td:last-child:has(> .btn) {
    /* OJO: nada de display:flex aquí — saca la celda del flujo de la tabla y
       los botones se desbordan fuera del alto de la fila. */
    text-align: right;
    white-space: normal;
    padding-top: 6px;
    padding-bottom: 6px;
}
.table td:last-child > .btn-group,
.table td:last-child > .btn {
    display: inline-flex;
    vertical-align: middle;
    float: none;
    margin: 2px;
}
/* Los botones DENTRO de un btn-group heredaban margin-bottom/right sueltos
   (reglas .btn-sm de tabla + tema) y desalineaban la línea base: el botón
   suelto (margin 2px) quedaba 2px más abajo que los agrupados. El espaciado
   lo pone el propio grupo; dentro, margen cero. */
.table td:last-child > .btn-group > .btn {
    /* !important: el tema (styles.css) trae .btn-group > .btn con
       margin-right:5px !important y descuadra el grupo */
    margin: 0 !important;
}
/* El "lift" global de hover (translateY(-1px)) hace saltar los botones en
   las celdas de acciones: parecen alinearse al pasar el mouse y separarse
   después. Dentro de datatables el feedback queda solo en la sombra. */
.table td .btn:not(.btn-link):not(.disabled):not(:disabled):hover {
    transform: none;
}
/* Todas las celdas centradas verticalmente: el texto quedaba desalineado
   respecto a los botones de acción. */
.table td { vertical-align: middle; }
.table th:last-child { text-align: right; }
/* Botones de acción compactos: caben varios por línea sin ensanchar la
   tabla (un min-width en la columna desbordaba el contenedor). */
.table td:last-child > .btn-group > .btn-sm,
.table td:last-child > .btn-sm {
    font-size: 11px;
    padding: 4px 8px;
}

/* ==========================================================================
   Modales Nota de ingreso / Nota de salida (/inventory) — 2026-08-12
   Iban al 90% del ancho de pantalla para que entraran los nombres largos de
   producto; ahora el ancho es contenido y los nombres parten en varias líneas.
   ========================================================================== */
.gk-modal-mov {
    max-width: 96vw;      /* el ancho base (780px) viene del atributo del diálogo */
}
.gk-modal-mov .el-select,
.gk-modal-mov .el-date-editor,
.gk-modal-mov .el-input {
    width: 100%;
}
.gk-modal-mov .el-dialog__body {
    padding-top: 14px;
    padding-bottom: 14px;
}
.gk-modal-mov .el-dialog__body .row > [class*='col-'] {
    margin-bottom: 8px;
}
/* el nombre del producto seleccionado tampoco debe estirar el campo */
.gk-modal-mov .el-select .el-input__inner {
    text-overflow: ellipsis;
}

/* Desplegable del buscador de productos: nombre largo en 2+ líneas */
.gk-select-wrap {
    max-width: 640px;
}
.gk-select-wrap .el-select-dropdown__item {
    white-space: normal;
    height: auto;
    min-height: 34px;
    line-height: 1.35;
    padding-top: 6px;
    padding-bottom: 6px;
}

@media (max-width: 767.98px) {
    .gk-modal-mov {
        width: 96vw !important;
        margin-top: 4vh !important;
    }
    .gk-select-wrap {
        max-width: 92vw;
    }
}

/* ===== Cajas (/cash) — datatable responsivo (2026-08-12) =====
   En monitores <=1440 la columna Acciones (Reporte, Reporte Productos, Cerrar
   caja, Editar, Eliminar, C. Electrónico) se recortaba y la fila de filtros
   desbordaba la página. */
.fx-cash-page .table-responsive {
    /* !important: al abrir un dropdown el tema pone overflow:visible y la
       columna fija dejaba de anclarse al contenedor (saltaba fuera de la card) */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* fila de filtros: los checkboxes pasan a su propia línea completa (el
   col-lg-2 original los partía en 3 renglones bajo ~1600px) */
.fx-cash-page .card .row > div:has(> .el-checkbox) {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin-right: 1rem;
}

/* fila de filtros: que envuelva en vez de empujar el ancho de la página */
.fx-cash-page .el-checkbox {
    display: inline-flex;
    align-items: flex-start;
    white-space: normal;
    max-width: 100%;
}
.fx-cash-page .el-checkbox__label {
    white-space: normal;
    line-height: 1.25;
}

/* columna Acciones compacta: los botones envuelven sin recortarse
   (mismo margen 2px que el botón suelto para que compartan línea base) */
.fx-cash-page table.table td .btn-group {
    margin: 2px;
}
.fx-cash-page table.table td .btn {
    padding: .2rem .45rem;
    font-size: .72rem;
    line-height: 1.3;
}
.fx-cash-page table.table th,
.fx-cash-page table.table td {
    vertical-align: middle;
}
.fx-cash-page table.table th:last-child,
.fx-cash-page table.table td:last-child {
    min-width: 185px;
    max-width: 250px;
}
.fx-cash-page table.table td:last-child .btn-group {
    max-width: 100%;
}

/* Filtros de /cash en UNA sola línea (2026-08-14): la fila venía en columnas
   de rejilla (4+3+2+2+2+2 > 12) y el filtro de fechas caía a otra línea.
   La fila pasa a flex con controles compactos de ancho fijo; en pantallas
   angostas envuelve sola. La fila se identifica porque es la única del card
   con los checkboxes (banco / IGV). */
.fx-cash-page .card .row:has(> div > .el-checkbox) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}
.fx-cash-page .card .row:has(> div > .el-checkbox) > div[class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0 0 4px 0;
    margin: 0;
}
.fx-cash-page .card .row:has(> div > .el-checkbox) .el-select .el-input__inner {
    width: 165px;
}
.fx-cash-page .card .row:has(> div > .el-checkbox) .el-input > input[placeholder="Buscar"] {
    width: 190px;
}
/* los date-pickers llevan width:100% inline desde el template */
.fx-cash-page .card .row:has(> div > .el-checkbox) .el-date-editor {
    width: 170px !important;
}
.fx-cash-page .card .row:has(> div > .el-checkbox) .el-date-editor--daterange {
    width: 250px !important;
}

/* los menús Reporte/Reporte Productos traen la posición HARDCODEADA en el
   template (left:0 + translate3d) y se salían por la derecha: se anclan al
   borde derecho del botón para abrir hacia adentro */
.fx-cash-page table.table td .dropdown-menu[style*="translate3d"] {
    left: auto !important;
    right: 0 !important;
    transform: translate3d(0, 42px, 0) !important;
}
/* espacio de scroll para que el menú desplegado no lo corte el contenedor */
.fx-cash-page .table-responsive {
    padding-bottom: 190px;
    margin-bottom: -190px;
}

/* en pantallas angostas la tabla scrollea, pero la columna Acciones queda
   ANCLADA a la derecha para que cierre/exportar sigan siempre a la vista */
@media (max-width: 1400px) {
    .fx-cash-page table.table th:last-child,
    .fx-cash-page table.table td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: var(--foreground, #fff);
        box-shadow: -7px 0 7px -7px rgba(15, 23, 42, .35);
    }
    .fx-cash-page table.table tbody tr:hover td:last-child {
        background-color: var(--background-light, var(--foreground, #fff));
    }
}

@media (max-width: 1500px) {
    .fx-cash-page table.table {
        font-size: .8rem;
    }
    .fx-cash-page table.table th {
        font-size: .72rem;
        white-space: normal;
    }
}

/* Menú "más acciones" (⋮): sin el caret de Bootstrap, el icono ya indica
   que despliega. */
.table td .btn-outline-secondary.dropdown-toggle > i.bi-three-dots-vertical + .caret,
.table td .btn-outline-secondary.dropdown-toggle::after {
    display: none !important;
}
.table td .btn-outline-secondary.dropdown-toggle {
    padding-left: 8px;
    padding-right: 8px;
    line-height: 1;
}

/* ── Contadores de notificaciones del sidebar (2026-08-12) ─────────────────
   Los badges salían con texto negro y fondo transparente sobre el nav oscuro
   (#101418): eran ilegibles. Se pintan como pastilla roja con número blanco. */
#nav .notification-icon .badge.cart-item-count,
#nav .menu-icons .badge.cart-item-count,
.nav-content .badge.cart-item-count {
    background-color: #dc3545 !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}
/* El icono acompañante también legible sobre el fondo oscuro */
#nav .notification-icon.body-color,
#nav .notification-icon.body-color > i {
    color: #fff !important;
}

/* ── Dashboard móvil: sin scroll horizontal de página (2026-08-13) ─────────
   En ≤767px varias tablas del dashboard empujaban el body hasta ~552px de
   ancho (tabla mensual VENTAS/COMPRAS metida en un .col-6 fijo al 50%, top
   clientes, ventas por producto…) y toda la página quedaba desbordada.
   Regla: la página nunca scrollea de lado; la tarjeta ancha scrollea sola. */
@media (max-width: 767.98px) {
    main > .container { overflow-x: clip; }
    .card-dashboard .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* La tabla mensual y el card de gráficos anexo viven en dos .col-6 de
       ancho fijo (50%) dentro de un d-flex SIN wrap: en móvil el contenedor
       permite salto de línea y cada card se apila a ancho completo (el de
       gráficos baja debajo de la tabla, ya no quedan apretados de lado) */
    .d-flex.justify-content-center:has(> .col-6 .card-dashboard) {
        flex-wrap: wrap;
    }
    .d-flex.justify-content-center > .col-6:has(.card-dashboard) {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================================
   /documents: datatable a ancho completo sin huecos internos (4
   iteraciones con el usuario). El navegador repartia el espacio
   sobrante entre columnas creando vacios visuales. Esquema final:
   cada columna se pega a su contenido (nowrap en th y td), Cliente
   es la unica flexible (min 210px / max 340px, nombres largos en
   wrap) y TODO el sobrante lo absorbe la columna de iconos de
   accion (siempre en una linea, anclados a la derecha), donde se
   lee como margen natural. data-v-d77223e2 = scope del componente
   Vue del listado de comprobantes.
   ============================================================ */
#scroll2 table th[data-v-d77223e2],
#scroll2 table td[data-v-d77223e2] {
    white-space: nowrap;
}
#scroll2 table th[data-v-d77223e2]:last-child {
    width: 100%;
}
#scroll2 table td[data-v-d77223e2]:last-child {
    text-align: left !important; /* pisa .text-end de Bootstrap */
}
#scroll2 table td[data-v-d77223e2]:nth-child(3) {
    white-space: normal;
}
#scroll2 table td[data-v-d77223e2]:nth-child(3) a {
    display: inline-block;
    /* Adaptativo (2026-08-14): antes min-width clamp(220px,20vw,430px) dejaba
       un lateral vacío enorme con nombres cortos ("Clientes - Varios").
       width:max-content + tope = el ancho lo dicta el nombre: corto → columna
       angosta; largo → se planta en el tope y envuelve en 2-3 líneas (sin el
       tope como ancho firme, la tabla lo colapsaba a la palabra más larga). */
    width: max-content;
    max-width: clamp(220px, 20vw, 400px);
    white-space: normal;
    line-height: 1.3;
    vertical-align: top;
}
#scroll2 table th[data-v-d77223e2]:nth-child(5),
#scroll2 table td[data-v-d77223e2]:nth-child(5) { text-align: center; }
/* En monitores muy anchos (2K+) una fila edge-to-edge deja desiertos
   inevitables: se limita el card del listado y se centra, conservando
   las proporciones de una pantalla ~1900 con aire simetrico a los lados. */
@media (min-width: 2000px) {
    #main-wrapper:has(#scroll2) {
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== Nota de venta: modo simple (2026-08-13) =====
   El script inline de tenant/sale_notes/form.blade.php marca con .fx-sn-extra
   los campos poco usados y con .fx-sn-paytable la tabla de pagos. */
body.fx-sn-simple .fx-sn-extra { display: none !important; }
body.fx-sn-simple .fx-sn-paytable th:nth-child(4),
body.fx-sn-simple .fx-sn-paytable td:nth-child(4),
body.fx-sn-simple .fx-sn-paytable th:nth-child(5),
body.fx-sn-simple .fx-sn-paytable td:nth-child(5) { display: none !important; }
.fx-sn-togglebar { text-align: right; margin: 0 0 4px; }
#fx-sn-toggle {
    font-size: 12px;
    color: #8a8f98;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
#fx-sn-toggle:hover { color: #dc3545; text-decoration: underline; }

/* Nota de venta v2 (2026-08-13): buscador fuera, Fec. Emisión en la fila de
   Establecimiento/Serie/Moneda (Cliente a 4/12 en modo simple) y bloque de
   pagos reubicado al final de .form-body por el script del blade */
.fx-sn-hide { display: none !important; }
@media (min-width: 992px) {
    body.fx-sn-simple .fx-sn-cliente {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* Nota de venta v3 (2026-08-13, repasada con wakaru module-38060):
   - El buscador (configuration.search_advance_items) es el .row.mt-2 anidado
     dentro de la fila de cabecera .row.mt-1: se oculta estructuralmente.
   - El bloque de pagos es v-if payment_condition_id==='01' y NO se mueve
     (Vue pierde el ancla al re-crearlo); el script mete las filas de botones
     y datatable dentro de la cabecera marcándolas .fx-sn-moved, por eso el
     ocultamiento del buscador las excluye y ellas fuerzan ancho completo. */
body.fx-sn-js .form-body > .row.mt-1 > .row.mt-2:not(.fx-sn-moved) { display: none !important; }
.fx-sn-moved { flex: 0 0 100%; max-width: 100%; }