/**
 * Overrides propios del proyecto Contagram sobre el template NexaDash.
 * Se carga globalmente (config/dz.php → global.css.bottom), así aplica a
 * TODAS las páginas y tablas.
 */

/* --------------------------------------------------------------------------
 * Paleta de marca (Pompei Sanitarios) — azul oscuro + celeste del isologo.
 * Colores tomados por muestreo de píxeles del logo real: azul oscuro
 * #0F1237, celeste #28ACE3.
 *
 * Alcance (decidido con el usuario):
 *  - Azul oscuro → --primary GLOBAL: botones, links, hover/active genéricos,
 *    topbar (--headerbg). Reemplaza el celeste-azulado (#1D69D6) que traía
 *    el template.
 *  - Celeste → NO toca --primary. Se usa puntualmente en 2 lugares:
 *    1) Íconos de la topbar (campana/sobre/pantalla completa).
 *    2) Botones/textos "secundarios": mapeado sobre el --bs-info de
 *       Bootstrap (2AA3E7 → 28ACE3), porque ya es la variante que usan
 *       algunas pantallas para acciones secundarias (`text-info`,
 *       `btn-outline-info`, iconos `text-info`, etc. — ver clientes/index).
 *       Así no hace falta tocar cada vista: heredan el celeste solas.
 * ------------------------------------------------------------------------ */
:root {
    --primary: #0F1237;
    --primary-hover: #23285e;
    --primary-dark: #05060d;
    --rgba-primary-1: rgba(15, 18, 55, 0.1);
    --rgba-primary-2: rgba(15, 18, 55, 0.2);
    --rgba-primary-3: rgba(15, 18, 55, 0.3);
    --rgba-primary-4: rgba(15, 18, 55, 0.4);
    --rgba-primary-5: rgba(15, 18, 55, 0.5);
    --rgba-primary-6: rgba(15, 18, 55, 0.6);
    --rgba-primary-7: rgba(15, 18, 55, 0.7);
    --rgba-primary-8: rgba(15, 18, 55, 0.8);
    --rgba-primary-9: rgba(15, 18, 55, 0.9);
    --bs-primary: #0F1237;
    --bs-primary-rgb: 15, 18, 55;
    --bs-info: #28ACE3;
    --bs-info-rgb: 40, 172, 227;
    --headerbg: #0F1237;
}

/* El customizer del template setea `data-headerbg="color_N"` en <body> (según
 * lo último elegido/guardado), y ESE nodo redefine `--headerbg` localmente
 * ahí — como es más cercano en el DOM a `.header` que nuestro `:root` de
 * arriba, gana por herencia (no es un tema de especificidad). Con el
 * selector por presencia de atributo (sin importar el valor) empatamos esa
 * especificidad y, al cargar después, ganamos por orden de cascada. */
[data-headerbg] {
    --headerbg: #0F1237;
}

/* --------------------------------------------------------------------------
 * Texto negro en vez de gris claro, para mejorar la legibilidad (pedido del
 * usuario). El template trae `--bs-body-color: #6F767E` (gris medio) en
 * :root, del que heredan tablas, formularios (`.form-control`, `.form-label`)
 * y texto general — sólo hace falta pisar las variables acá. `.text-muted`
 * usa `--bs-secondary-color` con !important sobre la propiedad, pero la
 * variable en sí no tiene !important, así que redefinirla alcanza igual.
 * El sidebar (`.deznav .metismenu`) SÍ hardcodea el gris directo en la regla
 * (no usa variable), así que necesita su propio override aparte.
 * ------------------------------------------------------------------------ */
:root {
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33, 37, 41;
}

.deznav .metismenu > li > a,
.deznav .metismenu a {
    color: #212529;
}

/* Números grandes de las tarjetas KPI (Clientes/Proveedores/Informe de Stock,
 * clase `.data-value` del template) — venían en gris medio hardcodeado, sin
 * pasar por ninguna variable Bootstrap. */
.data-value {
    color: #212529 !important;
}

/* Cabecera del sidebar (`.nav-header`, fondo = --nav-headbg) al mismo color
 * que la topbar (--headerbg), para que ambas cabeceras luzcan unificadas.
 * El logo (isologo + wordmark) venía en trazos oscuros (var(--primary) y
 * #1C2430/#6F767E) pensado para fondo blanco; sobre el navy pasa a blanco,
 * igual que hace el template en sus variantes de color de nav-header
 * (ver `[data-nav-headerbg="color_2"]` en style.css como referencia). */
:root {
    --nav-headbg: #0F1237;
}

[data-nav-headerbg] {
    --nav-headbg: #0F1237;
}

.nav-header .brand-logo .logo-abbr path,
.nav-header .brand-title path {
    fill: #fff !important;
}

.nav-header .hamburger svg path {
    fill: #fff !important;
}

/* El template le pone fondo claro (#F3F5F8) al boton hamburguesa cuando el
 * sidebar esta comprimido (.menu-toggle) - desentona con el header oscuro. */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .nav-control {
    background-color: transparent;
}

/* `.btn-info`/`.btn-outline-info`/`.badge-info` de NexaDash hardcodean el hex
 * en vez de leer `--bs-info-rgb` (a diferencia de `.text-info`/`.bg-info`/
 * `.border-info`, que sí lo leen y ya quedan celestes con el override de
 * arriba). Hay que repetir acá los mismos 3 estados (normal/hover/active)
 * que trae el template, sólo que centrados en el celeste de marca. */
.btn-info {
    --bs-btn-bg: #28ACE3;
    --bs-btn-border-color: #28ACE3;
    --bs-btn-hover-bg: #48bae7;
    --bs-btn-hover-border-color: #3cb4e6;
    --bs-btn-focus-shadow-rgb: 34, 148, 192;
    --bs-btn-active-bg: #53bee8;
    --bs-btn-active-border-color: #3cb4e6;
    --bs-btn-disabled-bg: #28ACE3;
    --bs-btn-disabled-border-color: #28ACE3;
}

.btn-outline-info {
    --bs-btn-color: #28ACE3;
    --bs-btn-border-color: #28ACE3;
    --bs-btn-hover-bg: #28ACE3;
    --bs-btn-hover-border-color: #28ACE3;
    --bs-btn-focus-shadow-rgb: 40, 172, 227;
    --bs-btn-active-bg: #28ACE3;
    --bs-btn-active-border-color: #28ACE3;
    --bs-btn-disabled-color: #28ACE3;
    --bs-btn-disabled-border-color: #28ACE3;
}

.badge-info {
    background-color: #28ACE3;
}

/* Topbar (`.header`, fondo = --headerbg de arriba): los íconos de
 * notificación venían con `fill="black"` fijo en el SVG y desaparecían
 * sobre el azul oscuro. Los pasamos a celeste (acento de marca) y a azul
 * oscuro sólo cuando el hover les pone un círculo blanco de fondo. */
.header-right .notification_dropdown > .nav-link > svg path {
    fill: #28ACE3 !important;
}

.header-right .notification_dropdown > .nav-link:hover > svg path {
    fill: var(--primary) !important;
}

/* Selector de idioma (demo del template, sin uso funcional en esta app):
 * el texto quedaba oscuro y se perdía sobre la topbar azul oscuro. */
.header .select-country .normal-select .btn,
.header .select-country .normal-select .dropdown-toggle::after {
    color: #fff;
}

/* Sidebar — ítem activo con fondo azul oscuro (--primary) sólido, texto e
 * ícono en blanco y borde también blanco. El hover (sin estar activo) se
 * mantiene en celeste, como distinción intermedia. Mismos selectores que
 * usa el template en `style.css` (misma especificidad); como este archivo
 * se carga después, gana por orden en la cascada — sin !important. */
.deznav .metismenu > li:hover > a,
.deznav .metismenu > li:focus > a {
    color: #28ACE3;
}

.deznav .metismenu > li:hover > a g [fill],
.deznav .metismenu > li:focus > a g [fill] {
    fill: #28ACE3;
}

.deznav .metismenu > li.mm-active > a {
    background-color: var(--primary);
    color: #fff;
    margin: 0 0.625rem;
    width: calc(100% - 1.25rem);
    border-radius: 0.5rem;
}

.deznav .metismenu > li.mm-active > a g [fill],
.deznav .metismenu > li.mm-active > a .menu-icon svg path {
    fill: #fff;
}

.deznav .metismenu > li.mm-active > a:before {
    content: none;
}

.deznav .metismenu ul a:hover,
.deznav .metismenu ul a:focus {
    color: #28ACE3;
}

.deznav .metismenu ul li:has(> a.mm-active) {
    background-color: var(--primary);
    color: #fff;
    margin: 0 0.625rem;
    width: calc(100% - 1.25rem);
    border-radius: 0.5rem;
}

.deznav .metismenu ul li:has(> a.mm-active) > a.mm-active {
    color: #fff;
}

.deznav .metismenu ul a.mm-active:before {
    content: none;
}

.deznav .metismenu ul li:has(> a.mm-active) .menu-crear-btn,
.deznav .metismenu ul li:has(> a.mm-active) .menu-crear-btn i {
    color: #fff;
}

.deznav .metismenu ul a:hover:before {
    background: rgba(40, 172, 227, 0.5);
}

/* Icono "+" al lado de un ítem de submenú (crea y abre el modal de alta
 * directo). El template asume un único <a> de ancho completo por <li> con
 * padding-left grande y un guioncito ":before" absoluto — sin este reset el
 * segundo <a> hereda ambos y el guioncito queda flotando antes del ícono. */
.deznav .metismenu ul li .menu-crear-btn {
    display: inline-flex !important;
    align-items: center;
    padding: 0 0.9375rem 0 0.5rem !important;
    flex: 0 0 auto;
}

.deznav .metismenu ul li .menu-crear-btn:before {
    content: none !important;
}

/* `.deznav .metismenu > li a > i` (style.css) fuerza font-family: 'Material
 * Icons' + font-weight normal en CUALQUIER <i> descendiente de un <a> bajo un
 * <li> de primer nivel — alcanza también a este ícono anidado y lo dibujaba
 * con el glyph equivocado (el "marcador raro"). Se lo devuelve a Font Awesome. */
.deznav .metismenu ul li .menu-crear-btn i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.75rem;
    margin-right: 0;
}

/* --------------------------------------------------------------------------
 * DataTables — scroll horizontal sólo del contenido de la tabla
 * Fix: el scroll horizontal (cuando hay muchas columnas) tiene que mover
 * sólo la <table>, no la paginación/length/info. Ver js/datatables-scroll-fix.js
 * (envuelve la <table> en este div al iniciar cada DataTable).
 * ------------------------------------------------------------------------ */
.table-responsive .dt-scroll-x {
    overflow-x: auto;
    max-width: 100%;
    /* dataTables_length/_filter (arriba) van flotados y dataTables_wrapper no
     * los clampea (no es un BFC). Nuestro wrapper, al tener overflow-x:auto,
     * SÍ es un BFC — y un BFC se acomoda AL LADO de floats en vez de debajo
     * si entra en el espacio restante, en vez de limpiarlos. Forzamos que
     * limpie los floats para que la tabla quede siempre debajo. */
    clear: both;
}

/* --------------------------------------------------------------------------
 * DataTables — paginación
 * Fix: los botones "Anterior/Siguiente" se apilaban en vertical (una letra
 * por línea) porque el texto rompía dentro de un contenedor angosto.
 * Forzamos que no se corten y que la barra de paginación fluya en horizontal.
 * Aplicar SIEMPRE en tablas nuevas (ya es global, no hace falta repetir).
 * ------------------------------------------------------------------------ */
.dataTables_wrapper .dataTables_paginate {
    white-space: nowrap;
    overflow: visible;
    /* El template (style.css) pone display:flex + flex-wrap:wrap acá. En
     * contenedores angostos (ej. bandeja de Mensajería) eso hace que
     * "Anterior/1/Siguiente" se apilen verticalmente en vez de quedar en una
     * sola fila. Forzamos flex en fila sin wrap. */
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    min-width: 2.25rem;
    padding: 0.35rem 0.85rem !important;
    margin: 0 2px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.4 !important;
    word-break: keep-all;
    overflow: visible;
}

/* El número de página activo (".current") viene envuelto en un <span> y el
 * template le fija height/width:24px + line-height:25px — con nuestro padding
 * de arriba eso hacía que el fondo redondeado quedara recortado arriba/abajo
 * en vez de contener el número completo. */
.dataTables_wrapper .dataTables_paginate span .paginate_button {
    height: auto !important;
    width: auto !important;
    line-height: 1.4 !important;
}

/* Los enlaces "Anterior" / "Siguiente" necesitan más ancho que los números */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    min-width: 5.5rem;
}

/* Contenedor de paginación (variante Bootstrap de DataTables) */
.dataTables_wrapper .dataTables_paginate ul.pagination {
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_paginate .page-link {
    white-space: nowrap !important;
}

/* Fila inferior del wrapper (info + paginación): que puedan convivir sin
 * comprimir la paginación hasta romper el texto. */
.dataTables_wrapper .row:last-child {
    align-items: center;
}

/* --------------------------------------------------------------------------
 * Formularios — controles compactos y uniformes (GLOBAL)
 * Los inputs/selects se veían demasiado altos. Los dejamos finos y a la MISMA
 * altura entre sí igualando padding + font-size + line-height (con border-box,
 * misma altura resultante para text/date/select). Labels más ajustados.
 * Regla GLOBAL: aplica a todo el proyecto, no repetir por pantalla.
 * ------------------------------------------------------------------------ */
.form-control,
.form-select {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    min-height: 0;          /* anular cualquier min-height/height heredado */
    height: auto;
}

/* Los select llevan la flecha nativa; mantenemos padding-right holgado. */
.form-select {
    padding-right: 2rem;
}

/* Variante chica (filas de contacto, etc.): aún más fina. */
.form-control-sm,
.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.78125rem;
}

.form-label {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #212529;
}

/* Contraste de inputs/selects: el default de NexaDash usa borde casi blanco
 * (#e6e6e6) y placeholder muy claro, y dentro de una card queda todo "lavado".
 * Subimos el contraste del borde (reposo y focus) y del placeholder, sin
 * perder el look flat del template. Regla GLOBAL.
 *
 * Fondo BLANCO, no gris (28/08/2026): el gris `#eef0f2` que había acá era casi
 * idéntico al `#e9ecef` de `:disabled`, así que un campo vacío y editable se
 * veía igual que uno bloqueado. Quien delimita el campo es el borde, que por eso
 * se refuerza a `#b9c0c8`. Si se vuelve a poner un fondo gris de reposo, hay que
 * oscurecer el de `:disabled` para que sigan distinguiéndose. */
.form-control,
.form-select {
    border-color: #b9c0c8;
    background-color: #fff;
}

.form-control::placeholder {
    color: #8a929b;
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    border-color: #28ACE3;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(40, 172, 227, 0.25);
}

/* Deshabilitados/readonly: diferenciarlos claramente de un campo editable
 * vacío (si no, un input vacío y uno bloqueado se confunden a simple vista). */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #dbdfe3;
}

/* Labels con más peso para separar visualmente "etiqueta" de "valor". */
.form-label {
    font-weight: 600;
}

/* Flecha nativa del <select>: la del navegador es gris clarito y pasa
 * desapercibida. La reemplazamos por un chevron propio en el celeste de
 * marca, así el control se lee como interactivo. */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2328ACE3' stroke-linecap='round' stroke-linewidth='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 14px;
}

/* Textareas: alto acorde al nuevo tamaño. */
textarea.form-control {
    min-height: auto;
    line-height: 1.4;
}

/* Icono "ojo" de mostrar/ocultar contraseña (login): style.css lo posiciona con
 * `top: 38px` fijo, calibrado para el alto de input viejo (~45px, antes del
 * override de arriba). Con el input compacto quedaba mal ubicado. Usamos `bottom`
 * en vez de `top`: el <span> es el último hijo en el flujo de `.position-relative`,
 * así que su borde inferior coincide con el del input sin importar cuánto mida el
 * label de arriba. */
.eye {
    top: auto;
    bottom: 0.5rem;
}

/* Botones compactos ("sm") por defecto en todo el proyecto.
 * OJO: NexaDash redefine `.btn` MÁS ABAJO en style.css con valores LITERALES
 * (`padding: 10px 20px; font-size: 14px`), que le ganan a un override por
 * variables `--bs-btn-*`. Por eso acá seteamos padding/font-size literales.
 * NO usar !important: `contagram-custom.css` carga después de style.css, así que
 * con igual especificidad (0,1,0) este `.btn` gana por orden. Y como los
 * `.btn-lg`/`.btn-sm` del template son `.btn.btn-lg`/`.btn.btn-sm` (0,2,0),
 * conservan su propio tamaño → un CTA grande con `.btn-lg` explícito sigue
 * funcionando. */
.btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Modal de cliente — ritmo vertical compacto (parecido al form de Contagram)
 * y scroll garantizado del cuerpo. El form es largo; que el modal-body scrollee
 * siempre y el header/footer queden fijos.
 * ------------------------------------------------------------------------ */
#modal-cliente .modal-body .mb-3 {
    margin-bottom: 0.6rem !important;
}

#modal-cliente .modal-body hr {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

#modal-cliente .modal-body h6 {
    margin-bottom: 0.5rem !important;
}

/* Garantía de scroll: aunque el template ya lo define para
 * .modal-dialog-scrollable, lo reforzamos por si el contenido supera la
 * altura de viewport en pantallas chicas (laptops). Regla GLOBAL: aplica a
 * cualquier modal del proyecto con esa clase (Cliente, Producto, Proveedor,
 * y los que se agreguen a futuro) — antes estaba sólo en #modal-cliente y el
 * mismo problema reapareció en #modal-producto por no estar generalizada. */
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 12rem);
}

/* Botón ColVis ("Columnas") — extensión Buttons de DataTables.
 * El template NexaDash trae `.dt-buttons { display:none }` en style.css
 * (pensado para otras pantallas del template); lo revertimos acá. */
.dt-buttons {
    display: inline-block !important;
}
.dataTables_wrapper .dt-buttons {
    float: none;
    margin: 0;
}

/* buttons.dataTables.min.css define `button.dt-button` con su propio look
 * (gradiente, borde, padding) con más especificidad (0,1,1) que nuestro
 * `.btn` de arriba (0,1,0) — le gana aunque cargue después. El botón trae
 * también las clases de Bootstrap (`btn btn-outline-secondary`, ver
 * `columns: function` en cada *.js), así que acá apagamos el look propio de
 * DataTables para que quede idéntico al resto de los botones de la barra
 * (Filtros, Ver Totales, Exportar). */
.dt-buttons button.dt-button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 500;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    overflow: visible;
}
.dt-buttons button.dt-button.btn:active:not(.disabled),
.dt-buttons button.dt-button.btn.active:not(.disabled) {
    box-shadow: none;
    background-image: none;
}

/* --------------------------------------------------------------------------
 * Columna "Acciones" como PRIMERA columna (fidelidad estructural a
 * Contagram): sólo el caret nativo de Bootstrap (sin ícono de tres puntos ni
 * texto), en una columna angosta. Regla GLOBAL — usar la clase
 * `dt-acciones-caret` en el <th>/<td> de acciones cuando es la primera
 * columna de la tabla.
 * ------------------------------------------------------------------------ */
th.dt-acciones-caret,
td.dt-acciones-caret {
    width: 2.5rem;
    text-align: center;
}
td.dt-acciones-caret .dropdown-toggle {
    padding: 0.25rem 0.5rem;
}
td.dt-acciones-caret .dropdown-toggle::after {
    margin-left: 0;
}

/* ------------------------------------------------------------------------
 * Select2 (buscador en selects de datos dinámicos): alinear su alto y tipografía
 * con los form-control/form-select compactos del proyecto. Regla GLOBAL.
 *
 * OJO — gotcha ya pisado una vez (24/07/2026): `public/css/style.css` (NexaDash)
 * define `.select2-selection__rendered { min-height: 2.813rem }` (~45px) en el
 * SPAN INTERNO, no en `.select2-selection--single`. Un override que sólo resetea
 * el contenedor externo (height/min-height/padding) NO alcanza: el hijo con
 * min-height grande sigue empujando al padre (height:auto) a ~52px. Cualquier
 * ajuste futuro de alto de Select2 tiene que resetear min-height en AMBOS
 * niveles (contenedor Y `.select2-selection__rendered`), si no vuelve a pasar.
 * ------------------------------------------------------------------------ */
.select2-container--default .select2-selection--single {
    height: auto;
    min-height: 0;
    padding: 0.375rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    border: 1px solid #b9c0c8;
    border-radius: 0.5rem;
    background-color: #fff;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #28ACE3;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(40, 172, 227, 0.25);
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #dbdfe3;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: 0;
    padding: 0;
    line-height: 1.4;
    color: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8a929b;
}
/* style.css (NexaDash) oculta el botón "x" de allowClear con display:none
 * global — se reactiva y se reposiciona a la izquierda de la flecha, que en
 * este override queda fija en right:4px (ver arriba). */
.select2-container--default .select2-selection--single .select2-selection__clear {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    margin: 0;
    font-size: 1rem;
    color: #8a929b;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #495057;
}
/* Select2 multi-selección (Proveedor/Categoría/Etiqueta/Usuario, etc. en los paneles de
 * Filtros de Compras/Ventas/Presupuestos): el template NexaDash sólo pinta el fondo gris de
 * `--single` (arriba); `--multiple` queda blanco por default (`style.css` no le define
 * `background-color` fuera del tema oscuro) y desentona con el resto de los filtros de la misma
 * fila. Mismo fondo/borde que `--single` para que ambos se vean como parte del mismo panel. */
.select2-container--default .select2-selection--multiple {
    min-height: 0;
    padding: 0.235rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    border: 1px solid #b9c0c8;
    border-radius: 0.5rem;
    background-color: #fff;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #28ACE3;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(40, 172, 227, 0.25);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0.15rem 0;
    font-size: 0.75rem;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0.1rem 0;
}

.select2-container .select2-search--dropdown .select2-search__field {
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
}
.select2-container--default .select2-results__option {
    font-size: 0.8125rem;
}
/* El dropdown debe superar el z-index del modal de Bootstrap. */
.select2-container--open {
    z-index: 1060;
}

/* --------------------------------------------------------------------------
 * Headers de tabla — fondo azul principal de marca con texto blanco.
 * Nació en la tabla de ítems de Ventas/Compras/Presupuestos (`#tabla-items`)
 * y gustó; se generaliza a TODAS las tablas de la app (DataTables incluidas)
 * para que quede consistente en todo el CRM. Regla GLOBAL.
 * ------------------------------------------------------------------------ */
.table thead th,
.dataTable thead th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background-color: var(--primary);
    color: #fff;
}

/* El sort arrow/ícono de DataTables hereda `color: inherit` en la mayoría de
 * los temas, pero por las dudas forzamos blanco para que no se pierda sobre
 * el fondo azul oscuro. */
.dataTable thead th.sorting:before,
.dataTable thead th.sorting:after,
.dataTable thead th.sorting_asc:before,
.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_desc:before,
.dataTable thead th.sorting_desc:after {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
 * Toastr — recupera sus colores propios (verde/rojo/celeste/naranja).
 * Bootstrap 5 también define un componente ".toast" (no relacionado) con la
 * misma especificidad; como carga después que toastr.min.css, su
 * background-color: var(--bs-toast-bg) le gana a .toast-success/.toast-error/
 * etc. y todos los toasts terminaban con el mismo azul oscuro de marca en vez
 * de su color de estado. Se sube la especificidad con el ID del contenedor.
 * ------------------------------------------------------------------------ */
#toast-container > .toast-success {
    background-color: #51a351 !important;
}
#toast-container > .toast-error {
    background-color: #bd362f !important;
}
#toast-container > .toast-info {
    background-color: #2f96b4 !important;
}
#toast-container > .toast-warning {
    background-color: #f89406 !important;
}

/* --------------------------------------------------------------------------
 * Spinner de carga en botones (window.AppBtn.loading, ver elements/btn-loading).
 * El helper reemplaza el HTML del botón por este spinner mientras dura la
 * llamada AJAX; `currentColor` hace que el spinner tome el color de texto que
 * ya tenía el botón (funciona igual para btn-primary, btn-outline-*, btn-light, etc.).
 * ------------------------------------------------------------------------ */
.btn-loading-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-loading-spin 0.75s linear infinite;
}

@keyframes btn-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------------
 * Select2 "catálogo editable" (spec 028): la fila fija "Crear X" usa
 * text-primary sobre fondo blanco, pero el resultado resaltado de Select2
 * pinta el fondo con el mismo azul primario (_form-addons-select2.scss) — sin
 * esta regla el texto queda invisible (azul sobre azul) al recorrer el
 * dropdown con el teclado o el mouse.
 * ------------------------------------------------------------------------ */
.select2-results__option--highlighted .select2-resultado-crear {
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * Fondos planos pedidos por el cliente: contenido principal más claro que el
 * sidebar, para diferenciar visualmente ambas zonas.
 * ------------------------------------------------------------------------ */
.content-body {
    background-color: #edeef0;
}
.deznav {
    background-color: #f3f5f8;
}

/* ---------------------------------------------------------------------------
 * Cards de "totales"/KPIs (Ventas, Presupuestos, Productos): el ícono circular
 * y la tipografía de style.css (NexaDash) vienen pensados para paneles anchos
 * (3.3125rem/53px de ícono, 2rem/32px de font-size, número en 1.5rem/24px) --
 * en paneles de 5 tarjetas por fila (20% de ancho c/u) eso no entra en el
 * card-body y se rompe/desborda. Se reduce a la mitad, global (única vista
 * que usa .widget-stat en toda la app son estas 3 pantallas).
 * ------------------------------------------------------------------------ */
.widget-stat .media > span {
    height: 1.75rem;
    width: 1.75rem;
    min-width: 1.75rem;
    padding: 0.35rem;
    font-size: 1rem;
}
.widget-stat .media .media-body h3,
.widget-stat .media .media-body .h3,
.widget-stat .media .media-body h4,
.widget-stat .media .media-body .h4 {
    font-size: 1.05rem;
}
/* ---------------------------------------------------------------------------
 * Sidebar — fuente e íconos más grandes (pedido del cliente). Sube tanto los
 * ítems de primer nivel como los de submenú (dropdown), el botón "+" que crea
 * y abre el modal de alta, y los SVG de cada ítem. El template fija el
 * width/height del SVG como atributo HTML (no CSS): una regla de ancho/alto
 * en CSS le gana igual, porque los atributos de presentación tienen la
 * especificidad más baja de la cascada.
 * ------------------------------------------------------------------------ */
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li > a {
    font-size: 0.95rem;
}
.deznav .metismenu ul a {
    font-size: 0.9rem;
}
.deznav .metismenu .menu-icon svg {
    width: 27px;
    height: 27px;
}
.deznav .metismenu ul li .menu-crear-btn i {
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
 * Botón "Acciones" de las tablas (dropdown que reusa el color del estado de
 * la fila, ej. `btn-outline-{{ $badge }}`): pedido del cliente, que se vean
 * siempre "rellenos" (como al hacer hover), no en outline.
 *
 * No alcanza con las variables `--bs-btn-*`: `.btn-outline-primary` tiene,
 * más abajo en `style.css` (línea ~29366), una regla APARTE que fija
 * `color: var(--primary)` / `border-color: var(--primary)` en el estado
 * NORMAL sin pasar por ninguna variable `--bs-btn-*` — y este proyecto
 * redefine `--primary` a #0F1237 (navy oscuro), que es el texto ilegible que
 * se vio sobre el fondo azul. Esa regla sólo existe para "primary" (las
 * demás variantes sí son 100% var-driven), así que acá se fuerza `color` y
 * `border-color` en valor final (no variable) para blindarse contra
 * cualquier literal que la gane por especificidad — no sólo por primary.
 * Selector por atributo (no lista cada color) para no repetir esta regla por
 * cada variante; no hay otro `.dropdown-toggle` con `btn-outline-*` en el
 * resto de la app (verificado), así que no impacta dropdowns de otro tipo.
 * ------------------------------------------------------------------------ */
.dropdown-toggle[class*="btn-outline-"] {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    color: #fff !important;
}

.widget-stat .media .media-body p {
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
 * Buscador de catálogo con foco persistente (spec 071) — reemplaza Select2
 * en `#f-producto` de Venta/Compra/Presupuesto. Ver `resources/js/buscador-catalogo.js`
 * para el porqué (foco independiente del panel, imposible con Select2).
 * Estilo compacto igual que `.form-control` (mismo padding/font-size/line-height
 * de la sección "Formularios" de arriba).
 * ------------------------------------------------------------------------ */
.buscador-catalogo-wrapper {
    position: relative;
}

.buscador-catalogo-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    /* Por encima de cualquier card y, dentro de un modal, por encima del propio modal
     * (Bootstrap 5 usa 1055 para `.modal`; ver también `.select2-container--open` arriba). */
    z-index: 1065;
    max-height: 16rem;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #b9c0c8;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 18, 55, 0.15);
    padding: 0.25rem 0;
}

.buscador-catalogo-opcion {
    padding: 0.375rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
    color: #212529;
}

.buscador-catalogo-opcion--resaltada,
.buscador-catalogo-opcion:hover {
    background-color: rgba(40, 172, 227, 0.15);
}

.buscador-catalogo-estado {
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    color: #8a929b;
}

.buscador-catalogo-error {
    color: #bd362f;
}

/* --------------------------------------------------------------------------
 * PivotTable.js ("Arma tu Informe" / Rankings, spec 069) — fix de ancho de
 * la celda de dimensiones (filas/columnas).
 *
 * La tabla interna del pivot (`table.pvtUi`, sin `table-layout` fijo) reparte
 * el espacio sobrante entre sus celdas según el algoritmo de layout "auto"
 * del navegador. Cuando la celda `.pvtRows`/`.pvtCols` (el pool de
 * dimensiones puestas en fila/columna) tiene poco contenido — un par de
 * etiquetas ("Mes ▾", "Clientes ▾") — el navegador igual le asigna la mayor
 * parte del ancho disponible, empujando la tabla de datos real
 * (`.pvtRendererArea`) casi entera fuera de la vista y dejando un hueco en
 * blanco enorme a la izquierda. Truco estándar de CSS para forzar que una
 * celda de tabla se ajuste a su contenido y la otra absorba el resto:
 * `width: 1%` + `white-space: nowrap` (no afecta el apilado vertical de las
 * etiquetas, que lo controla el `display` del propio `<li>`, no el
 * `white-space` de la celda).
 * ------------------------------------------------------------------------ */
.pvtUi {
    table-layout: fixed;
    width: 100%;
}

.pvtUi td.pvtCols,
.pvtUi td.pvtVals {
    width: 1px;
    white-space: nowrap;
}

/*
 * Eje de Filas (pool `.pvtRows`) — ancho acotado vía `<colgroup>`.
 *
 * El ancho NO se puede fijar desde la celda. Con `table-layout: fixed` el navegador
 * calcula los anchos de columna a partir de la PRIMERA fila de la tabla, y en el
 * `table.pvtUi` que arma PivotTable.js esa primera fila es `pvtUiCell` (vacía) +
 * `.pvtUnused` (el pool horizontal de dimensiones sin usar). `.pvtRows` recién
 * aparece en la CUARTA fila, así que cualquier `width` puesto sobre ella se ignora
 * y las dos columnas terminan 50/50: el pool medía 769px de aire y empujaba la
 * tabla de resultados al centro de la pantalla (verificado en el navegador el
 * 28/08/2026; es el motivo por el que originalmente se eliminó la celda del DOM).
 *
 * La forma de fijar anchos con `fixed` sin depender de qué hay en la primera fila
 * es un `<colgroup>`, que define las columnas directamente. Lo inserta el
 * `onRefresh` de `informes-pivot.js`; acá sólo viven los anchos.
 *
 * 190px entra cómodo una etiqueta de dimensión ("Vendedores ▾") sin desperdiciar.
 */
.pvtUi > colgroup > col.pvtColEje {
    width: 190px;
}

.pvtUi td.pvtRows {
    vertical-align: top;
}

/*
 * El pool arranca VACÍO en "Crear Informe" (el usuario todavía no arrastró nada).
 * Sin altura mínima la caja colapsa y no se ve dónde soltar; con la altura del
 * `.pvtRendererArea` al lado quedaría un rectángulo hueco larguísimo. Se le fija
 * una altura chica de "zona de drop" y se la despega del borde.
 */
.pvtUi td.pvtRows:empty {
    min-height: 2.5rem;
}


/* ==========================================================================
 * Informe de Gastos — árbol Categoría → Subcategoría
 *
 * Calca la estructura de Contagram (tarjeta por categoría, subcategorías
 * colapsables que muestran sólo su total, pie con el total de la categoría)
 * con la estética del template. Los montos usan `tabular-nums` porque en una
 * columna de totales alineada a la derecha las cifras tienen que caer una
 * debajo de la otra: con la figura proporcional del template, un "1" angosto
 * corre toda la fila y la lectura vertical se pierde.
 * ------------------------------------------------------------------------ */

.gastos-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--bs-border-color, #e6e6e6);
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: .5rem;
    overflow: hidden;
}

.gastos-resumen__celda {
    background: var(--bs-body-bg, #fff);
    padding: .75rem 1rem;
    text-align: center;
}

.gastos-resumen__rotulo {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #7b7b7b);
}

.gastos-resumen__valor {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gastos-resumen__valor--total {
    font-size: 1.35rem;
    color: var(--bs-primary, #0d6efd);
}

.gasto-cat {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.gasto-cat__head {
    padding: .6rem 1rem;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    color: #fff;
    background: var(--bs-primary, #0d6efd);
}

/* Subcategoría: el header entero es el disparador, no sólo el chevron. */
.gasto-sub + .gasto-sub {
    border-top: 1px solid var(--bs-border-color, #eee);
}

.gasto-sub__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem 1rem;
    border: 0;
    background: transparent;
    text-align: left;
    transition: background-color .15s ease;
}

.gasto-sub__head:hover,
.gasto-sub--abierta > .gasto-sub__head {
    background: rgba(0, 0, 0, .025);
}

.gasto-sub__chevron {
    width: .75rem;
    color: var(--bs-secondary-color, #7b7b7b);
    transition: transform .15s ease;
}

.gasto-sub--abierta > .gasto-sub__head .gasto-sub__chevron {
    transform: rotate(90deg);
}

.gasto-sub__nombre {
    font-weight: 500;
    color: var(--bs-primary, #0d6efd);
}

.gasto-sub__rotulo {
    margin-left: auto;
    font-size: .8rem;
    color: var(--bs-secondary-color, #7b7b7b);
}

.gasto-sub__monto {
    min-width: 8.5rem;
    padding: .15rem .5rem;
    border-radius: .35rem;
    background: rgba(0, 0, 0, .05);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.gasto-sub__body {
    padding: 0 1rem 0 2rem;
    animation: gasto-sub-in .16s ease;
}

@keyframes gasto-sub-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gasto-sub__body { animation: none; }
    .gasto-sub__chevron { transition: none; }
}

.gasto-sub__vacio,
.gasto-sub__cargando {
    margin: 0;
    padding: .5rem 0 .75rem;
    color: var(--bs-secondary-color, #7b7b7b);
}

.gasto-detalle th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color, #7b7b7b);
}

.gasto-detalle td {
    font-variant-numeric: tabular-nums;
}

/* Una descripción larga empujaba Medio de Pago y Total fuera de la pantalla (el template deja
   las celdas en nowrap). Con layout fijo las columnas cortas tienen ancho propio y la
   descripción se queda con el resto y hace salto de línea. */
.gasto-detalle {
    table-layout: fixed;
    width: 100%;
    min-width: 42rem; /* en pantallas angostas scrollea dentro de .table-responsive */
}

.gasto-detalle th:nth-child(1) { width: 4.5rem; }
.gasto-detalle th:nth-child(2) { width: 6.75rem; }
.gasto-detalle th:nth-child(4) { width: 11rem; }
.gasto-detalle th:nth-child(5) { width: 13rem; }

.gasto-detalle td:nth-child(3),
.gasto-detalle td:nth-child(4) {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.gasto-detalle td:nth-child(5) {
    white-space: nowrap !important;
}

.gasto-detalle__id {
    color: var(--bs-secondary-color, #7b7b7b);
}

.gasto-cat__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--bs-border-color, #e6e6e6);
    background: rgba(0, 0, 0, .02);
}

.gasto-cat__foot-rotulo {
    font-weight: 600;
}

.gasto-cat__foot-monto {
    min-width: 8.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ==========================================================================
   Tesorería — reordenamiento de cuentas por drag & drop (spec 085)
   ========================================================================== */

/* Columna del handle: sólo tiene que alcanzar para el icono. */
.cuenta-handle-col {
    width: 28px;
    padding-right: 0;
    text-align: center;
}

/* El handle no es un botón "de acción": no compite visualmente con el lápiz de
   editar. Sin borde ni fondo, color apagado, y el cursor cuenta la historia. */
button.js-mover-cuenta {
    border: 0;
    background: none;
    padding: 0 .25rem;
    line-height: 1;
    color: #a1a5b7;
    cursor: grab;
}

button.js-mover-cuenta:hover {
    color: #6c757d;
}

button.js-mover-cuenta:active {
    cursor: grabbing;
}

/* El handle también se opera con teclado (ArrowUp/ArrowDown): el foco tiene que
   verse, si no la navegación por tab queda a ciegas. */
button.js-mover-cuenta:focus-visible {
    outline: 2px solid #4361ee;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Fila fantasma que marca dónde va a caer la fila arrastrada. Necesita alto
   propio porque un <tr> vacío colapsa a 0 y el hueco no se vería. */
tr.cuenta-orden-placeholder {
    height: 34px;
    background-color: rgba(67, 97, 238, .08);
    outline: 1px dashed rgba(67, 97, 238, .4);
}

/* --------------------------------------------------------------------------
 * Preloader del cruce (Rankings / "Arma tu Informe", 28/08/2026).
 *
 * El cruce se rehace ante cualquier cambio de filtro, rango, Dato o Accion, y
 * entre el pedido del dataset y el dibujado de PivotTable.js pasan segundos sin
 * ninguna señal en pantalla: el usuario no sabía si estaba cargando o si no
 * había pasado nada.
 *
 * Overlay por encima del contenedor en vez de modal bloqueante: el cruce
 * anterior se sigue viendo atenuado, que es la referencia de que algo se está
 * recalculando. `pointer-events` bloquea el arrastre de dimensiones mientras
 * tanto — soltar una dimensión a mitad del cálculo dispara otro refresh encima.
 * ------------------------------------------------------------------------ */
#pivot-cargando {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* `flex-start` y no `center`: con un cruce largo el overlay mide lo que la tabla (cientos de
       px) y un spinner centrado verticalmente cae fuera de la pantalla, justo cuando el usuario
       necesita verlo. Arriba queda siempre a la vista. */
    justify-content: flex-start;
    padding-top: 3rem;
    /* Sin color propio: toma el fondo de la tarjeta y funciona en claro y oscuro. */
    background-color: rgba(255, 255, 255, 0.72);
    /* Con el cruce recién vacío la zona mide 0 y el spinner quedaría invisible. */
    min-height: 8rem;
}

#pivot-cargando:not(.d-none) ~ .table-responsive {
    opacity: 0.35;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Pestañas del informe (detalle · Rankings · Arma tu Informe) — 28/08/2026.
 *
 * El template dibuja estas tabs y sus desplegables casi sin contraste:
 * el `.dropdown-menu` viene con fondo #fcfcfc y `box-shadow: none`, así que
 * abierto sobre la tarjeta blanca del informe parecía transparente y las
 * vistas guardadas se leían encimadas con el contenido de atrás; y la tab
 * activa tenía fondo y borde del MISMO color (#fcfcfc), o sea que no se
 * distinguía de las inactivas.
 *
 * Se acota todo a `#pestanas-informe` y a su menú para no alterar los
 * desplegables del header ni del sidebar, que sí están bien.
 * ------------------------------------------------------------------------ */

/* Fondo blanco pleno + sombra: es un panel flotante y tiene que leerse como tal. */
#pestanas-informe .dropdown-menu {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
    padding: .35rem;
    min-width: 15rem;
}

/* El gris #6f767e del template sobre blanco queda lavado para un ítem accionable. */
#pestanas-informe .dropdown-item {
    color: #3e4954;
    border-radius: .375rem;
    padding: .5rem .75rem;
}

#pestanas-informe .dropdown-item:hover,
#pestanas-informe .dropdown-item:focus {
    background-color: #f1f5f9;
    color: #1f2937;
}

/* La papelera vive en la misma fila que el nombre: se mantiene apagada hasta que
   el mouse entra en la fila, para que no compita con el nombre de la vista. */
#pestanas-informe .dropdown-menu li {
    border-radius: .375rem;
}

#pestanas-informe .dropdown-menu li:hover {
    background-color: #f1f5f9;
}

#pestanas-informe .js-borrar-vista {
    opacity: 0;
    padding: .25rem .5rem;
    transition: opacity .15s ease-in-out;
}

#pestanas-informe .dropdown-menu li:hover .js-borrar-vista,
#pestanas-informe .js-borrar-vista:focus {
    opacity: 1;
}

/* "Crear Informe" es la acción, no una vista más: se separa de la lista. */
#pestanas-informe .js-crear-informe {
    font-weight: 600;
}

#pestanas-informe .js-crear-informe::after {
    content: '';
    display: block;
    margin: .35rem -.35rem -.1rem;
    border-bottom: 1px solid #e9ecef;
}

/* Tab activa con forma real: hasta ahora su fondo y su borde eran del mismo
   color que el resto y no se distinguía cuál estaba abierta. */
#pestanas-informe .nav-link {
    color: #6f767e;
    border-radius: .5rem .5rem 0 0;
    padding: .6rem 1rem;
    font-weight: 500;
}

#pestanas-informe .nav-link:hover {
    color: #1f2937;
    background-color: #f8fafc;
}

#pestanas-informe .nav-link.active {
    color: #1f2937;
    font-weight: 600;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* Los tooltips largos se cortaban: el template los define con `white-space: nowrap`
   (style.css ~37276) y un `max-width: 500px`. Al no poder envolver, el texto seguía
   de largo pero el fondo terminaba en los 500px, y la frase quedaba cortada a la
   mitad sobre el contenido de la tabla.

   Se les devuelve el salto de línea y se les acota el ancho a algo legible: un
   tooltip de una sola línea de 500px es incómodo de leer aunque entre. Aplica a
   todos los tooltips del proyecto, no sólo al aviso de orden cancelada de Ventas. */
.tooltip-inner {
    white-space: normal;
    max-width: 320px;
    text-align: left;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * Tabla de ítems de Venta/Compra/Presupuesto (#tabla-items): un nombre de
 * producto largo en la columna "Producto" (sin límite de ancho, a propósito:
 * el usuario prefiere ver la descripción completa antes que recortada) hacía
 * que el navegador comprimiera las demás columnas por debajo de lo necesario
 * — el `width` en px que resources/js/ventas.js|compras.js|presupuestos.js
 * pone inline en las celdas de Cant./Costo/Desc. %/IVA es sólo una sugerencia
 * para `table-layout: auto` (el default), no un mínimo real, así que el
 * input de Costo se veía comprimido y el número no entraba completo.
 *
 * La solución NO es acotar ni truncar la columna Producto (dos variantes ya
 * probadas y descartadas — ver historial de este bloque): es ponerle
 * `min-width` de verdad a las columnas angostas, que el navegador sí
 * respeta aunque el layout siga siendo automático, y dejar que la columna
 * Producto envuelva su texto (`white-space: normal`, no es el default de
 * una celda con `<span>` corto) — si la descripción es larga, la FILA crece
 * verticalmente en vez de truncar o forzar scroll horizontal. La descripción
 * completa siempre se ve.
 * ------------------------------------------------------------------------ */
#tabla-items td:first-child {
    white-space: normal;
    word-break: break-word;
}
#tabla-items td:nth-child(2),  /* Cant. */
#tabla-items td:nth-child(4) { /* Desc. % */
    min-width: 90px;
}
#tabla-items td:nth-child(3),  /* Costo/Precio */
#tabla-items td:nth-child(6) { /* IVA */
    min-width: 110px;
}

/* Informe de Stock: las columnas Detalle y Producto tienen ancho fijo y el texto baja de línea
   (crecen en alto, no en ancho). La tabla es `nowrap`, así que hay que pisarlo sólo para ellas. */
#tabla-informe-stock th.col-detalle,
#tabla-informe-stock td.col-detalle,
#tabla-informe-stock th.col-producto,
#tabla-informe-stock td.col-producto {
    white-space: normal;
    overflow-wrap: anywhere;
}
#tabla-informe-stock th.col-detalle,
#tabla-informe-stock td.col-detalle {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
}
#tabla-informe-stock th.col-producto,
#tabla-informe-stock td.col-producto {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
}