/*
    modern-shell.css
    1) Refresco visual del menu lateral (izquierda) - solo estilos, no toca
       la logica de appMenu.js.
    2) Boton flotante "Modo oscuro" + tema oscuro global, activado con la
       clase .dark-mode en <html> (ver public/js/darkMode.js).
    Todo con !important donde hace falta porque el shell de SmartAdmin usa
    estilos inline y clases muy especificas.
*/

/* ===================== MENU LATERAL: ESQUEMA DE COLOR ===================== */
/*
 * Por defecto (modo claro): fondo blanco, letras e iconos negros.
 * #left-panel (un <aside>) trae de fabrica un degradado oscuro fijo via
 * background-image (smartadmin-production.min.css: selector "aside"), y
 * nav ul li a trae color:#c0bbb7 fijo; hay que anular ambos.
 */
#left-panel {
    background: #ffffff !important;
    background-image: none !important;
}

#left-panel nav ul li a,
#left-panel .login-info a,
#left-panel .login-info a span {
    color: #1a1a1a !important;
}

/*
 * El <span> interno que envuelve el nombre de usuario trae de fabrica
 * background:#fff fijo (smartadmin-production.min.css), lo que dejaba el
 * texto blanco-sobre-blanco invisible en modo oscuro.
 */
#left-panel .login-info a span {
    background: transparent !important;
}

#left-panel nav ul ul {
    background: #f5f5f7 !important;
}

#left-panel nav ul ul li,
#left-panel nav > ul > li > ul {
    background: transparent !important;
}

#left-panel nav ul li > a {
    border-radius: 12px;
    margin: 3px 12px;
    padding: 14px 16px !important;
    transition: background .15s ease, color .15s ease;
}

#left-panel nav ul li > a:hover,
#left-panel nav ul li > a:focus,
#left-panel nav ul ul li > a:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #1a1a1a !important;
}

#left-panel nav > ul > li:hover,
#left-panel nav > ul > li.active {
    background: transparent !important;
}

#left-panel nav ul li.active > a,
#left-panel nav ul li.mm-active > a,
#left-panel nav ul li.open > a {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #1a1a1a !important;
    font-weight: 600;
}

#left-panel nav ul li.active > a > i,
#left-panel nav ul li.mm-active > a > i,
#left-panel nav ul li.open > a > i {
    opacity: 1;
    color: #2563eb;
}

/*
 * FA6 + v4-shims, combinados con la clase "fa-lg" que trae la BD en
 * app_menu.icono, dejaban el <i> con line-height calculado en ~1.25px (en vez
 * de un valor relativo normal). La caja del icono colapsaba casi a 0px de
 * alto pero el glyph seguia pintandose a su tamano real y se salia de esa
 * caja hacia arriba, superponiendose con la fila anterior del menu (se veia
 * como un "engranaje duplicado"). Se fuerza un tamano/alineacion propios,
 * con !important, para no depender de esa cascada.
 */
#left-panel nav ul li > a > i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 20px;
    text-align: center;
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    opacity: .72;
    color: #1a1a1a;
    transition: opacity .15s ease, color .15s ease;
}

#left-panel nav ul li > a:hover > i {
    opacity: 1;
}

/* Flecha de expandir/colapsar (<b class="collapse-sign">): en items de
   primer nivel se posicionaba de forma inconsistente (a veces se veia
   pegada a la izquierda, encima del icono). El submenu desplegado ya
   comunica el estado, asi que se oculta en vez de intentar reposicionarla. */
#left-panel nav > ul > li > a > .collapse-sign {
    display: none !important;
}

#left-panel nav ul ul li > a {
    border-radius: 10px;
    margin: 2px 12px;
}

/* ---- Tarjeta de usuario (login-info): sin placa blanca/brillante ---- */
#left-panel .login-info {
    border: none !important;
    box-shadow: none !important;
    padding: 16px 14px 12px !important;
    background: transparent !important;
}

#left-panel .login-info > span {
    background: rgba(15, 23, 42, 0.03) !important;
    border-radius: 14px;
    padding: 10px 12px !important;
    display: block;
    transition: background .15s ease;
}

#left-panel .login-info > span:hover {
    background: rgba(37, 99, 235, 0.08) !important;
}

/*
 * El avatar (public/theme/default/img/avatars/male.png) es un PNG
 * rectangular con fondo blanco solido; smartadmin-skins.min.css intenta
 * recortarlo en circulo (border-radius:50%) pero otra regla mas
 * especifica lo deja en 0, y ese fondo blanco sin recortar es lo que se
 * ve como una placa/recuadro brillante sobre el fondo oscuro.
 */
#left-panel .login-info img {
    border-radius: 50% !important;
    border: 2px solid rgba(37, 99, 235, 0.25) !important;
    overflow: hidden;
}

html.dark-mode #left-panel .login-info img {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Modo oscuro: fondo oscuro, letras e iconos blancos (mismo layout) */
html.dark-mode #left-panel {
    background: #101217 !important;
    background-image: none !important;
}

html.dark-mode #left-panel nav ul li a,
html.dark-mode #left-panel .login-info a,
html.dark-mode #left-panel .login-info a span {
    color: #ffffff !important;
}

html.dark-mode #left-panel nav ul ul {
    background: #181b22 !important;
}

html.dark-mode #left-panel nav ul li > a:hover,
html.dark-mode #left-panel nav ul li > a:focus,
html.dark-mode #left-panel nav ul ul li > a:hover {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #ffffff !important;
}

html.dark-mode #left-panel nav > ul > li:hover,
html.dark-mode #left-panel nav > ul > li.active {
    background: transparent !important;
}

html.dark-mode #left-panel nav ul li.active > a,
html.dark-mode #left-panel nav ul li.mm-active > a,
html.dark-mode #left-panel nav ul li.open > a {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #ffffff !important;
}

html.dark-mode #left-panel nav ul li.active > a > i,
html.dark-mode #left-panel nav ul li.mm-active > a > i,
html.dark-mode #left-panel nav ul li.open > a > i {
    opacity: 1;
    color: #60a5fa;
}

html.dark-mode #left-panel nav ul li > a > i {
    color: #ffffff;
}

html.dark-mode #left-panel .login-info > span {
    background: rgba(255, 255, 255, 0.04) !important;
}

html.dark-mode #left-panel .login-info > span:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/*
 * #ribbon es un contenedor vacio (5px) de SmartAdmin usado historicamente
 * para botones de accion; en este sistema no tiene contenido y su fondo
 * blanco fijo queda como una linea residual justo debajo de #header.
 */
html.dark-mode #ribbon {
    background: transparent !important;
}

/*
 * ===================== LOGO DE CABECERA (texto) =====================
 * Reemplaza la imagen jdtsystem.png por texto real "TAFUR SYSTEMS",
 * mismos colores que el logo de public/css/login.css (blanco + azul).
 * #header siempre usa un fondo azul oscuro (#214f75 en claro, #1e293b
 * en oscuro), asi que el mismo estilo blanco/azul sirve en ambos temas.
 */
#logo {
    display: inline-block;
    width: auto !important;
    height: 39px;
    line-height: 39px;
    margin-top: 0 !important;
}

.header-logo-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: #f8fafc;
    white-space: nowrap;
}

.header-logo-accent {
    color: #60a5fa;
    margin-left: 6px;
}

/* ===================== BOTON FLOTANTE MODO OSCURO ===================== */

#btn-dark-mode-toggle {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 10000;
    width: 68px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

#btn-dark-mode-toggle:hover {
    transform: translateY(-2px);
}

#btn-dark-mode-toggle:focus {
    outline: none;
}

#btn-dark-mode-toggle i {
    position: relative;
    z-index: 2;
    width: 16px;
    font-size: 14px;
    text-align: center;
    color: #cbd5e1;
    transition: color .2s ease;
}

#btn-dark-mode-toggle .dm-icon-sun {
    color: #f59e0b;
}

#btn-dark-mode-toggle .dm-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s ease;
    z-index: 1;
}

html.dark-mode #btn-dark-mode-toggle {
    background: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.4);
}

html.dark-mode #btn-dark-mode-toggle .dm-toggle-thumb {
    transform: translateX(32px);
    background: linear-gradient(135deg, #475569, #1e293b);
}

html.dark-mode #btn-dark-mode-toggle .dm-icon-sun {
    color: #64748b;
}

html.dark-mode #btn-dark-mode-toggle .dm-icon-moon {
    color: #e2e8f0;
}

/* ===================== MODO OSCURO GLOBAL ===================== */

/*
 * Paleta unificada modo oscuro (mismo tono navy/slate que el Dashboard,
 * ver --dm-* en dashboard-modern.css): fondo de pagina slate-900
 * (#0f172a), tarjetas/paneles/tablas slate-800 (#1e293b), inputs y
 * estados hover slate-700 (#334155). Antes esta seccion usaba una
 * paleta gris-carbon distinta (#14161c/#1b1e26/#232733) solo en el
 * shell general, lo que hacia que el Dashboard se viera "premium" y el
 * resto de pestañas planas/negras.
 */
html.dark-mode {
    --mu-bg-card: #1e293b;
    --mu-border: #334155;
    --mu-text: #ffffff;
    --mu-text-muted: #94a3b8;
}

html.dark-mode,
html.dark-mode body {
    background: #0f172a !important;
    color: #ffffff;
}

html.dark-mode #header {
    background: #1e293b !important;
    border-color: #334155;
}

html.dark-mode #header .header-search input,
html.dark-mode #search-fld {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

html.dark-mode #left-panel,
html.dark-mode #left-panel nav {
    background: #101217 !important;
}

html.dark-mode #main,
html.dark-mode #content-sys,
html.dark-mode #cont-general-tabs-sys,
html.dark-mode #cont-main-sys,
html.dark-mode .tab-pane {
    background: #0f172a !important;
    color: #ffffff;
}

html.dark-mode #cont-tabs-sys {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode #cont-tabs-sys li a {
    background: #1e293b !important;
    color: #b7bdc9 !important;
    border-color: #334155 !important;
}

html.dark-mode #cont-tabs-sys li.ui-tabs-active a,
html.dark-mode #cont-tabs-sys li.ui-state-active a {
    background: #334155 !important;
    color: #fff !important;
}

html.dark-mode .well,
html.dark-mode .panel,
html.dark-mode .panel-heading,
html.dark-mode .panel-body,
html.dark-mode .modal-content,
html.dark-mode .lv-header-section,
html.dark-mode .lv-header-section-info,
html.dark-mode .smart-form {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #334155 !important;
}

/*
 * Titulos de acordeon (Reportes: "Ventas por Local", "Productos por
 * Categoria segun Local", "Registro de Ventas/Compras" en Libros
 * Electronicos): Bootstrap fija .panel-title a{color:#333} directo
 * sobre el <a>, por lo que el color:#fff de .panel-heading de arriba
 * no lo alcanza (una regla que apunta directo al elemento gana sobre
 * el heredado del padre, sin importar la especificidad de este ultimo).
 */
html.dark-mode .panel-title,
html.dark-mode .panel-title a,
html.dark-mode .panel-title a span {
    color: #ffffff !important;
}

/*
 * Tablas: la tabla en si actua como "tarjeta" (fondo slate-800 unificado
 * con la cabecera), y las filas del cuerpo quedan transparentes (se ve
 * el mismo fondo de la tarjeta) con una linea divisoria fina y sutil en
 * vez de un color de fila propio - evita el efecto plano/rigido.
 */
html.dark-mode table,
html.dark-mode table.table,
html.dark-mode .dataTable {
    background: #1e293b !important;
    color: #ffffff !important;
}

html.dark-mode table thead th,
html.dark-mode table.table thead th {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html.dark-mode table td,
html.dark-mode table th {
    border-color: rgba(148, 163, 184, 0.14) !important;
}

html.dark-mode .table-hover > tbody > tr {
    background: transparent !important;
}

html.dark-mode .table-hover > tbody > tr:hover {
    background: rgba(148, 163, 184, 0.08) !important;
}

/*
 * fullgrid.css marca la columna ordenada (ej. "Fecha de Emision" en
 * Emision de Comprobantes) con td.sorting_1/2/3 y un fondo gris claro
 * fijo, mas especifico que las reglas genericas de tabla de arriba.
 * Se deja transparente para que la fila conserve el mismo look sutil.
 */
html.dark-mode table.fullgrid tr td.sorting_1,
html.dark-mode table.fullgrid tr td.sorting_2,
html.dark-mode table.fullgrid tr td.sorting_3,
html.dark-mode td.sorting_1,
html.dark-mode td.sorting_2,
html.dark-mode td.sorting_3 {
    background-color: transparent !important;
    color: #ffffff !important;
}

/*
 * Toolbar/pie de fullgrid.css (usado en Maestros: Marca, Categorias,
 * Productos, Series, Terceros, Caja, y en general casi toda grilla del
 * sistema): .fullgrid-dt-toolbar y .fullgrid-dt-toolbar-footer traen
 * fondo #fafafa fijo, y .fullgrid_info un gris claro fijo.
 */
html.dark-mode .fullgrid-dt-toolbar,
html.dark-mode .fullgrid-dt-toolbar-footer {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

html.dark-mode .fullgrid_info {
    color: #94a3b8 !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(148, 163, 184, 0.04) !important;
}

/*
 * Inputs de filtro rapido de fullgrid (debajo de cada cabecera) y
 * formularios en general: fondo translucido y borde suave que se
 * integran con la tarjeta en vez del contraste fuerte anterior.
 */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control,
html.dark-mode .smart-form label.input input,
html.dark-mode .smart-form label.textarea textarea,
html.dark-mode .smart-form label.select select,
html.dark-mode .chosen-container-single .chosen-single {
    background: rgba(148, 163, 184, 0.08) !important;
    color: #ffffff !important;
    border-color: #475569 !important;
    border-radius: 8px !important;
}

html.dark-mode table.fullgrid thead input,
html.dark-mode table.fullgrid thead select {
    border-radius: 8px !important;
}

/*
 * El popup flotante de "chosen" (.chosen-drop/.chosen-results) NO es un
 * input dentro de una tarjeta, es una capa que se superpone sobre
 * cualquier contenido debajo (la grilla, otros campos, etc). Con el
 * mismo fondo translucido de los inputs (8% opacidad) quedaba
 * practicamente transparente y el texto de las opciones se mezclaba con
 * lo que hubiera detras (reportado en Emitir Comprobante > Tipo Doc.).
 * Necesita un fondo solido propio.
 */
html.dark-mode .chosen-container .chosen-drop,
html.dark-mode .chosen-container .chosen-results {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #475569 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html.dark-mode .chosen-container .chosen-results li {
    background: transparent !important;
}

html.dark-mode .chosen-container .chosen-results li.highlighted {
    background: #214f75 !important;
}

html.dark-mode .chosen-container .chosen-search input {
    background: rgba(148, 163, 184, 0.08) !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/*
 * Autocompletado de jQuery UI (buscador de "Producto" en el detalle de
 * Venta/Cotizacion, etc.): mismo problema de fondo que el popup de
 * chosen, aqui el widget trae fondo blanco fijo en vez de transparente,
 * pero igual desentona/rompe la estetica oscura.
 */
html.dark-mode .ui-autocomplete,
html.dark-mode .ui-menu.ui-widget-content {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html.dark-mode .ui-autocomplete .ui-menu-item,
html.dark-mode .ui-autocomplete .ui-menu-item-wrapper,
html.dark-mode .ui-autocomplete li {
    background: transparent !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html.dark-mode .ui-autocomplete .ui-state-active,
html.dark-mode .ui-autocomplete .ui-state-focus,
html.dark-mode .ui-autocomplete .ui-state-hover {
    background: #214f75 !important;
    color: #ffffff !important;
    border-color: #214f75 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter input,
html.dark-mode .dataTables_wrapper .dataTables_length select {
    background: rgba(148, 163, 184, 0.08) !important;
    color: #ffffff !important;
    border-color: #475569 !important;
    border-radius: 8px !important;
}

html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html.dark-mode .btn-default,
html.dark-mode .btn-white {
    background: #334155 !important;
    color: #ffffff !important;
}

/*
 * Botones globales (Nuevo/Excel/Filtrar/Acciones, ver seccion "BOTONES
 * GLOBALES (.btn)" en modern-ui.css): en modo oscuro se quita el borde
 * duro y se reemplaza por una sombra suave para dar elevacion sin perder
 * el color vibrante de cada variante (.btn-primary/.btn-success/etc).
 */
html.dark-mode .btn {
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

html.dark-mode .btn:hover,
html.dark-mode .btn:focus {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html.dark-mode a {
    color: #6ea8fe;
}

/*
 * .lv-breadcrumb (ruta superior tipo "chevron": Panel > Modulo > Submodulo)
 * ya trae su propio fondo (amarillo #fac11f para los pasos recorridos,
 * gris oscuro #333 para el paso actual) y texto blanco con text-shadow
 * (generic.css). La regla "html.dark-mode a" de arriba lo pisaba con
 * azul, dejando texto azul sobre amarillo con bajo contraste.
 */
html.dark-mode .lv-breadcrumb a,
html.dark-mode .lv-breadcrumb a i {
    color: #ffffff !important;
}

/*
 * Textos secundarios (telefono/email/direccion) en Empresa > Datos de la
 * Empresa usan .txt-color-darken (gris muy oscuro fijo, ilegible sobre
 * fondo oscuro).
 */
html.dark-mode .txt-color-darken {
    color: #e2e8f0 !important;
}

/*
 * Empresa > Datos de la Empresa: placeholder del logo cuando la empresa
 * no tiene uno cargado (antes se insertaba <img src="public/img/"> que
 * el navegador mostraba como icono de imagen rota).
 */
.d-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    font-size: 34px;
    color: #b8bcc4;
    background: rgba(15, 23, 42, 0.04);
}

html.dark-mode .d-logo-placeholder {
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
}

html.dark-mode [id$="d_img_logo"] {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Foto de producto (Productos > Nuevo/Editar) */
html.dark-mode .modern-photo-preview {
    background: rgba(255, 255, 255, 0.04);
    border-color: #334155;
    color: #64748b;
}

/*
 * legend{border-bottom:1px solid #e5e5e5} (bootstrap.min.css) se usa
 * como divisor visual dentro de formularios (<fieldset><legend></legend
 * ></fieldset>, ej. Nuevo Comprobante) y queda como una linea clara
 * fija sobre el fondo oscuro.
 */
html.dark-mode legend {
    border-color: #334155 !important;
    color: #ffffff !important;
}

/*
 * Algunas vistas (ej. Kardex de Productos) envuelven la caja de filtros
 * en un <div style="background: #fff;..."> inline en vez de una clase,
 * y usan pestañas internas .nav-tabs.bordered (Bootstrap) que traen
 * fondo blanco fijo aparte del .tab-pane que ya se oscurece arriba.
 */
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#fff"] {
    background: #1e293b !important;
}

html.dark-mode .nav-tabs.bordered,
html.dark-mode .nav-tabs.bordered + .tab-content {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .nav-tabs > li > a {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html.dark-mode .nav-tabs > li.active > a {
    background: #334155 !important;
    color: #ffffff !important;
}

/*
 * Pie de formularios (footer con el boton Grabar) y textos en gris de
 * labels/textos secundarios: .smart-form footer usa un fondo casi
 * blanco fijo, y .smart-form .label / .text-muted usan un gris oscuro
 * (#333) que no cambia con el body{color} general porque tienen su
 * propio color explicito.
 */
html.dark-mode .smart-form footer {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .smart-form .label,
html.dark-mode .text-muted,
html.dark-mode label.label,
html.dark-mode .control-label {
    color: #ffffff !important;
}

/*
 * El modo oscuro del panel (.dash-modern) se maneja por completo en
 * public/css/dashboard-modern.css via variables --dm-*, cargado despues
 * de este archivo.
 */

/* tarjetas modern-ui.css: heredan por variables, solo ajustes puntuales */
html.dark-mode .modern-form-card-header,
html.dark-mode .modern-totals-card {
    background: #0f172a !important;
}

html.dark-mode .modern-total-highlight {
    background: #214f75;
}

html.dark-mode .modern-btn-tax {
    background: #334155;
    border-color: #214f75;
    color: #7fa8ff;
}

html.dark-mode .modern-btn-tax:hover,
html.dark-mode .modern-btn-tax:focus {
    background: #2b3550;
    color: #a9c6ff;
}

html.dark-mode .modern-btn-tax.active {
    background: #214f75;
    color: #fff;
}

/*
 * "<fieldset><legend></legend></fieldset>" vacio: hack heredado del tema
 * SmartAdmin usado como separador visual entre secciones de un
 * .smart-form/.form (ver formNewVenta.js, formEditVenta.js, etc.). Su
 * fondo viene hardcodeado en blanco (rgba(255,255,255,.9)) desde
 * smartadmin-production.min.css y nunca se adapto a modo oscuro, por lo
 * que se veia como una franja blanca flotando sobre el fondo oscuro.
 */
html.dark-mode .smart-form fieldset,
html.dark-mode .form fieldset {
    background: transparent !important;
}

/*
 * Empresa > Formato de Impresion: la vista previa del ticket
 * (.ticket_fae / .ticket_body, en formIndex.js del modulo empresa)
 * simula un papel de impresora real y debe verse igual sin importar
 * el tema, por eso queda excluida del modo oscuro.
 */
html.dark-mode .ticket_fae {
    background: #333 !important;
}

html.dark-mode .ticket_body,
html.dark-mode .ticket_body table,
html.dark-mode .ticket_body table thead th,
html.dark-mode .ticket_body td.sorting_1,
html.dark-mode .ticket_body td.sorting_2,
html.dark-mode .ticket_body td.sorting_3 {
    background: #fff !important;
    color: #000 !important;
    border-color: #ddd !important;
}

html.dark-mode .ticket_body,
html.dark-mode .ticket_body * {
    color: #000 !important;
}

html.dark-mode .ticket_body input,
html.dark-mode .ticket_body select,
html.dark-mode .ticket_body textarea,
html.dark-mode .ticket_body .form-control {
    background: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
}

/* =====================================================================
   MENU LATERAL: indicador de item activo + tarjeta usuario (empresa/version)
   ===================================================================== */

/* Barra vertical de acento en el item activo, estilo Linear/Odoo */
#left-panel nav ul li.active > a,
#left-panel nav ul li.mm-active > a,
#left-panel nav ul li.open > a {
    position: relative;
}

#left-panel nav > ul > li.active > a::before,
#left-panel nav > ul > li.mm-active > a::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #2563eb;
}

html.dark-mode #left-panel nav > ul > li.active > a::before,
html.dark-mode #left-panel nav > ul > li.mm-active > a::before {
    background: #60a5fa;
}

/* Tarjeta de usuario: foto de perfil y nombre lado a lado (no apilados) */
#left-panel .login-info a {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

#left-panel .login-info img {
    flex: 0 0 auto;
    margin: 0 !important;
}

#left-panel .login-info .lp-user-meta {
    display: block;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
}

#left-panel .login-info .lp-user-name {
    display: block;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#left-panel .login-info > span > a > i.fa-angle-down {
    flex: 0 0 auto;
}

#left-panel .lp-version {
    display: block;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .03em;
    color: rgba(26, 26, 26, 0.35);
    padding: 10px 0 14px;
}

html.dark-mode #left-panel .lp-version {
    color: rgba(255, 255, 255, 0.3);
}

/* =====================================================================
   HEADER MODERNO: buscador, iconos de accion, dropdown de perfil/roles
   ===================================================================== */
#header {
    /* Azul propio del header (distinto del --t-primary usado en botones/KPIs) */
    background: #0b3c5d !important;
    border-bottom: 1px solid #082c45;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

html.dark-mode #header {
    background: #101217 !important;
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

/* Logo: fondo del header es azul, por lo que el texto va en blanco con
   buen contraste (WCAG AA) en vez del tono oscuro usado sobre fondo claro. */
#header .header-logo-text {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff !important;
}

#header .header-logo-accent {
    color: #BFDBFE !important;
}

html.dark-mode #header .header-logo-text {
    color: #f1f5f9 !important;
}

html.dark-mode #header .header-logo-accent {
    color: #60a5fa !important;
}

/* Botones circulares de accion del header (colapsar, tour, fullscreen, voz, logout):
   iconos/enlaces en blanco translucido para contraste sobre el fondo azul. */
#header .btn-header a,
#header .btn-header i,
#header #ulRol > li > a,
#header #ulLang .dropdown-toggle,
#header .header-search button i,
#header .header-search #cancel-search-js i {
    color: rgba(255, 255, 255, 0.9) !important;
}

#header .btn-header {
    transition: background var(--t-transition, .15s ease);
    border-radius: var(--t-radius-sm, 8px);
}

#header .btn-header:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

#header .btn-header:hover a,
#header .btn-header:hover i {
    color: #ffffff !important;
}

html.dark-mode #header .btn-header:hover {
    background: rgba(59, 130, 246, 0.14) !important;
}

/* Buscador global del header: overlay blanco translucido sobre el azul */
#header .header-search {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    transition: border-color var(--t-transition, .15s ease), background var(--t-transition, .15s ease);
}

#header .header-search:focus-within {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.24) !important;
}

#header .header-search input {
    background: transparent !important;
    color: #ffffff !important;
    /* smartadmin-skins.min.css (.smart-style-2 .header-search > input) trae un
       borde propio (1px solid #0f1217, radio 4px) pensado para el header
       original; sobre el pill translucido nuevo se veia como un recuadro
       oscuro superpuesto. Se anula aqui. */
    border: none !important;
    border-radius: inherit !important;
}

#header .header-search input::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
}

html.dark-mode #header .header-search {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark-mode #header .header-search input {
    color: #f1f5f9 !important;
}

/* Dropdown de roles / perfil */
#header .header-dropdown-list .dropdown-menu {
    border: 1px solid var(--t-border, #e5e9f1) !important;
    border-radius: var(--t-radius, 12px) !important;
    box-shadow: var(--t-shadow-lg, 0 8px 28px rgba(15,23,42,.12)) !important;
    padding: 6px !important;
    margin-top: 8px !important;
}

#header .header-dropdown-list .dropdown-menu > li > a {
    border-radius: var(--t-radius-sm, 8px) !important;
}

html.dark-mode #header .header-dropdown-list .dropdown-menu {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark-mode #header .header-dropdown-list .dropdown-menu > li > a {
    color: #f1f5f9 !important;
}

/* =====================================================================
   RESPONSIVE: el shell (menu/header) no tenia @media propios
   ===================================================================== */
@media (max-width: 1366px) {
    #left-panel .login-info > span {
        padding: 8px 10px !important;
    }
}

@media (max-width: 1024px) {
    #header .header-search {
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    #header .header-search {
        display: none;
    }

    #left-panel .lp-version {
        padding-bottom: 60px;
    }
}

@media (max-width: 480px) {
    #header .header-logo-accent {
        display: none;
    }
}