/*
    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 ===================== */
/*
 * Sidebar en navy de marca, mas oscuro en modo oscuro (--t-sidebar-bg
 * cambia solo con el tema, ver theme-tokens.css) -- el texto/iconos ya
 * eran blancos en ambos casos, asi que no necesitan reglas aparte.
 * #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: var(--t-sidebar-bg) !important;
    background-image: none !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* El tema base fija 15px de padding lateral en #left-panel; INTRANET
       SDJ lo deja en 0 y maneja todo el espaciado (tarjeta de usuario,
       Dashboard, items de menu, credito) con margin:8px propio en cada
       hijo -- mismo criterio aca, para que los items queden mas anchos
       (204px en vez de 176px) y uniformes en ambos sistemas. */
    padding: 0 !important;
    z-index: 910 !important;
}

/* el <nav> ocupa todo el alto restante (debajo de la tarjeta de usuario) y
   scrollea internamente -- mismo patron que INTRANET SDJ -- para que el
   sidebar siempre llegue al borde inferior de la pantalla sin importar
   cuantos modulos tenga el usuario. */
#left-panel > nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* El tema base pone el <ul> al 114% de ancho con overflow-y:scroll propio
   -- un truco clasico para esconder la scrollbar nativa empujandola fuera
   del recorte del padre. Como el scroll ya lo maneja el <nav> de arriba,
   ese 114% sobraba: alargaba el ancho real disponible para los <li> mas
   alla de los 220px del sidebar, dejando los items de menu mas angostos
   de lo que deberian (~210px en vez de 204px). Mismo ajuste que INTRANET
   SDJ: el <ul> vuelve a 100%, sin su propio scroll/padding-derecha. */
#left-panel nav > ul {
    width: 100% !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

#left-panel nav ul li a {
    color: #ffffff !important;
}

/* Tarjeta de usuario: card blanca fija con texto oscuro, independiente del
   fondo navy del sidebar (mismo patron que INTRANET SDJ). */
#left-panel .login-info a,
#left-panel .login-info a span {
    color: #1a1a1a !important;
    /* smartadmin-production.min.css trae ".login-info span{text-align:center}"
       de fabrica -- eso centraba el nombre dentro de su caja flex (que crece
       para llenar el espacio libre), dejandolo visualmente pegado al chevron
       de la derecha en vez de justo despues del avatar. Se anula para que
       el nombre quede alineado a la izquierda, pegado al avatar. */
    text-align: left !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: rgba(0, 0, 0, 0.12) !important;
}

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

#left-panel nav ul li > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    margin: 1px 8px;
    padding: 6px 8px !important;
    font-size: 12.5px !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(255, 255, 255, 0.08) !important;
    color: #ffffff !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: var(--t-sidebar-active) !important;
    color: #ffffff !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: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

/*
 * 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: 24px;
    height: 24px;
    text-align: center;
    font-size: 12px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    opacity: 1;
    color: var(--t-sidebar-icon);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}

#left-panel nav ul li > a:hover > i {
    background: rgba(255, 255, 255, 0.12);
}

/* en los submenus el icono no lleva el "chip" de fondo (mismo patron que
   INTRANET SDJ: solo los items de primer nivel llevan la caja). */
#left-panel nav ul ul li > a > i {
    background: transparent;
    width: auto;
    height: auto;
}

/* Con el <a> en flex (arriba), el <span> del texto necesita poder
   encogerse y truncar en vez de forzar overflow/wrap cuando el label es
   largo (ej. "Comunicaciones de Baja", "Kardex de Productos"). */
#left-panel nav ul li > a > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Flecha de expandir/colapsar (<b class="collapse-sign"><em class="fa
 * fa-caret-down/up"></em></b>, generada por el plugin jarvismenu -ver
 * appMenu.js-): antes se ocultaba porque con el <a> en flujo normal se
 * posicionaba de forma inconsistente (a veces pegada a la izquierda,
 * encima del icono). Ahora que #left-panel nav ul li > a es flex, se
 * empuja de forma confiable al extremo derecho de la fila con
 * margin-left:auto, para que el usuario vea de un vistazo que ese item
 * se puede desglosar.
 */
#left-panel nav > ul > li > a > .collapse-sign {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    opacity: .45;
    transition: opacity .15s ease;
}

#left-panel nav > ul > li > a > .collapse-sign em {
    font-size: 12px;
}

#left-panel nav ul li > a:hover > .collapse-sign,
#left-panel nav ul li.active > a > .collapse-sign,
#left-panel nav ul li.mm-active > a > .collapse-sign,
#left-panel nav ul li.open > a > .collapse-sign {
    opacity: .9;
}

#left-panel nav ul ul li > a {
    border-radius: 8px;
    margin: 1px 8px 1px 30px;
    padding: 6px 8px !important;
    font-size: 12.5px !important;
}

/*
 * ---- Tarjeta de usuario (login-info): card blanca -- mismo patron de caja
 * que INTRANET SDJ: el fondo/padding va en el contenedor EXTERIOR
 * (.login-info, con margin para separarlo del borde del sidebar) y el
 * <span> interior (envoltorio de fabrica) queda neutro. Antes el fondo
 * blanco estaba en el <span> interior CON su propio padding, encima del
 * padding del contenedor exterior -- esa doble capa de padding (41px por
 * lado en total) le dejaba casi sin ancho al nombre del usuario, que se
 * truncaba ("Tafur ...").
 */
#left-panel .login-info {
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: var(--t-shadow-sm) !important;
    border-radius: 14px !important;
    margin: 10px 8px 14px !important;
    padding: 6px 8px !important;
    width: auto !important;
    transition: background .15s ease;
}

#left-panel .login-info:hover {
    background: #f5f5f7 !important;
}

#left-panel .login-info > span {
    box-sizing: border-box !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    display: block;
}

/*
 * 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. Tambien se
 * fija un tamano explicito (el tema base trae 2 reglas de ancho distintas
 * -25px y 30px- segun el contexto, lo que dejaba el resultado ambiguo).
 */
#left-panel .login-info img {
    width: 30px !important;
    height: 30px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 2px solid rgba(37, 99, 235, 0.25) !important;
    overflow: hidden;
}

/*
 * El sidebar cambia de tono via --t-sidebar-bg (ver #left-panel arriba),
 * por lo que no necesita un juego de reglas "html.dark-mode #left-panel
 * ..." aparte -- el texto/iconos blancos y el resto de la paleta del menu
 * ya sirven igual de bien sobre el navy claro que sobre el navy oscuro.
 */

/* Acceso directo "Dashboard" (reemplaza al logo "TAFUR SYSTEMS" del
   header) -- mismo estilo que los items de #void_menu, mismo patron que
   INTRANET SDJ. */
#left-panel .sidebar-dashboard-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 8px;
    margin: 0 8px 10px;
    border-radius: 8px;
    transition: background .15s ease;
}

#left-panel .sidebar-dashboard-link:hover,
#left-panel .sidebar-dashboard-link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

#left-panel .sidebar-dashboard-link > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: var(--t-sidebar-icon);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

/*
 * #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;
}

/* ===================== TOGGLE MODO OSCURO (icono del header) =====================
   Antes era un boton flotante con switch deslizante fuera del header; ahora
   es un icono mas dentro de la fila de acciones del header (mismo trato
   que #fullscreen/#logout/etc via .btn-header, incluido el color
   navy/blanco que cambia solo con el tema -- ver var(--t-header-fg)). Solo
   se ve un icono a la vez: luna en modo claro (indica la accion: pasar a
   oscuro), sol en modo oscuro (indica: volver a claro). */
#btn-dark-mode-toggle .dm-icon-sun {
    display: none;
}

html.dark-mode #btn-dark-mode-toggle .dm-icon-moon {
    display: none;
}

html.dark-mode #btn-dark-mode-toggle .dm-icon-sun {
    display: inline;
}

/* ===================== 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;
}

/*
 * #header y #left-panel NO entran en este "modo oscuro global": ambos
 * mantienen su color fijo (header blanco, sidebar navy) sin importar el
 * tema, ver las reglas propias de cada uno mas arriba en este archivo.
 */

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;
}

/*
 * Botones globales (ver "BOTONES GLOBALES (.btn)" en modern-ui.css): el
 * estilo es contorno del color sobre el fondo del panel, y relleno al pasar
 * el mouse. En oscuro el contorno usa la version clara de cada color, que es
 * la que se lee sobre fondo oscuro; como esos tonos son pasteles, al
 * rellenar el texto pasa a oscuro y no a blanco -- mismo criterio que ya se
 * aplico a las etiquetas de estado.
 */
html.dark-mode .btn-primary,
html.dark-mode .btn-success,
html.dark-mode .btn-danger,
html.dark-mode .btn-warning,
html.dark-mode .btn-info,
html.dark-mode .btn-default,
html.dark-mode .btn-white {
    background-color: transparent !important;
}

html.dark-mode .btn-primary {
    border-color: #8ab4f8 !important;
    color: #8ab4f8 !important;
}

html.dark-mode .btn-success {
    border-color: var(--t-success) !important;
    color: var(--t-success) !important;
}

html.dark-mode .btn-danger {
    border-color: var(--t-danger) !important;
    color: var(--t-danger) !important;
}

html.dark-mode .btn-warning {
    border-color: var(--t-warning) !important;
    color: var(--t-warning) !important;
}

html.dark-mode .btn-info {
    border-color: var(--t-info) !important;
    color: var(--t-info) !important;
}

html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus,
html.dark-mode .btn-primary.active,
html.dark-mode .open > .btn-primary.dropdown-toggle {
    background-color: #8ab4f8 !important;
    border-color: #8ab4f8 !important;
    color: #0f172a !important;
}

html.dark-mode .btn-success:hover,
html.dark-mode .btn-success:focus,
html.dark-mode .btn-success.active,
html.dark-mode .open > .btn-success.dropdown-toggle {
    background-color: var(--t-success) !important;
    border-color: var(--t-success) !important;
    color: #0f172a !important;
}

html.dark-mode .btn-danger:hover,
html.dark-mode .btn-danger:focus,
html.dark-mode .btn-danger.active,
html.dark-mode .open > .btn-danger.dropdown-toggle {
    background-color: var(--t-danger) !important;
    border-color: var(--t-danger) !important;
    color: #0f172a !important;
}

html.dark-mode .btn-warning:hover,
html.dark-mode .btn-warning:focus,
html.dark-mode .btn-warning.active,
html.dark-mode .open > .btn-warning.dropdown-toggle {
    background-color: var(--t-warning) !important;
    border-color: var(--t-warning) !important;
    color: #0f172a !important;
}

html.dark-mode .btn-info:hover,
html.dark-mode .btn-info:focus,
html.dark-mode .btn-info.active,
html.dark-mode .open > .btn-info.dropdown-toggle {
    background-color: var(--t-info) !important;
    border-color: var(--t-info) !important;
    color: #0f172a !important;
}

html.dark-mode .btn-default,
html.dark-mode .btn-white {
    border-color: #475569 !important;
    color: var(--t-text) !important;
}

html.dark-mode .btn-default:hover,
html.dark-mode .btn-default:focus,
html.dark-mode .btn-default.active,
html.dark-mode .btn-white:hover,
html.dark-mode .open > .btn-default.dropdown-toggle {
    background-color: #334155 !important;
    border-color: #64748b !important;
    color: var(--t-text) !important;
}

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;
}

/*
 * Las pestañas (.nav-tabs) ya no necesitan reglas de modo oscuro aparte:
 * el componente global de modern-components.css usa tokens --t-tab-* que
 * cambian solos con el tema (antes aca se pintaban como cajas oscuras,
 * un estilo que ya no aplica al diseño de texto + subrayado).
 */

/*
 * 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: tarjeta de usuario (avatar/nombre/rol/version)
   ===================================================================== */

/* 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: 8px;
}

#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;
    /* Es un <span> tambien, asi que hereda el mismo max-width:105px!important
       de smartadmin-skins.min.css que .lp-user-name/#sidebar-role-label --
       capaba el ancho del wrapper entero (y por lo tanto el de sus dos
       hijos) muy por debajo del espacio real que le da flex:1 1 auto. */
    max-width: none !important;
}

#left-panel .login-info .lp-user-name {
    display: block;
    font-weight: 700;
    /* !important en font-size/max-width por el mismo motivo que
       #sidebar-role-label abajo: smartadmin-skins.min.css fija
       "font-size:16px;max-width:105px" en ".smart-style-2 .login-info a
       span" y le gana a una regla sin !important -- el max-width de 105px
       en particular truncaba el nombre antes de llenar el ancho real
       disponible en la card (~150px). */
    font-size: 13px !important;
    max-width: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Subtitulo de rol debajo del nombre -- mismo dato (defaultNameRol, ver
   footer.phtml) y mismo patron visual que INTRANET SDJ. */
#left-panel .login-info #sidebar-role-label {
    display: block;
    color: rgba(26, 26, 26, 0.65) !important;
    font-weight: 400;
    /* smartadmin-skins.min.css trae ".smart-style-2 .login-info a span"
       con font-size:16px!important -- hace falta igualar con !important
       para poder bajarlo al tamano de subtitulo (mismo patron que el
       bug de #hide-menu visto antes). */
    font-size: 11px !important;
    max-width: none !important;
    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;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--t-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, 0.35);
    padding: 4px 12px 14px;
}

/* Flecha "Colapsar menu" del propio tema (retrae el sidebar a solo
   iconos): se oculta a pedido -- el sidebar se queda siempre expandido,
   mismo criterio que INTRANET SDJ. */
#left-panel .minifyme {
    display: none !important;
}

/* =====================================================================
   HEADER MODERNO: buscador, iconos de accion, dropdown de perfil/roles
   ===================================================================== */
#header {
    /* El header sigue el tema claro/oscuro del contenido igual que el
       sidebar (cada uno con su propio tono, ver --t-sidebar-bg): blanco+
       navy en claro, oscuro+blanco en oscuro -- mismo tono que el resto
       del sistema (--t-card). Ver --t-header-fg en theme-tokens.css para
       el color de texto/iconos, que cambia junto con el fondo. */
    background: var(--t-card) !important;
    border-bottom: 1px solid var(--t-border);
    box-shadow: var(--t-shadow-sm);
    /* El header ya no cubre la columna del sidebar -- mismo patron que
       INTRANET SDJ -- para que el sidebar (ahora height:100vh) se vea de
       alto completo sin que el header le tape la esquina superior. Se
       corre lo que el sidebar realmente ocupa en cada estado (normal /
       colapsado a iconos / oculto en movil), igual que el propio tema
       hace con #main. */
    left: 220px !important;
    width: calc(100% - 220px) !important;
}

body.minified #header {
    left: 45px !important;
    width: calc(100% - 45px) !important;
}

body.hidden-menu #header {
    left: 10px !important;
    width: calc(100% - 10px) !important;
}

body.mobile-view-activated #header {
    left: 0 !important;
    width: 100% !important;
}

/* Botones circulares de accion del header (colapsar, tour, fullscreen, voz, logout):
   navy sobre blanco en modo claro, blanco sobre oscuro en modo oscuro
   (--t-header-fg cambia solo con el tema, ver theme-tokens.css). */
#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: var(--t-header-fg) !important;
}

/* smartadmin-skins.min.css trae ".smart-style-2 #hide-menu a > i{color:
   #C5C6CA!important}" -- esa combinacion clase+ID le gana en especificidad
   a la regla generica de arriba, dejando SOLO este icono gris fijo (ni
   navy en claro ni blanco en oscuro). Se le agrega el ID #header encima
   para superarla. */
#header #hide-menu a > i {
    color: var(--t-header-fg) !important;
}

/*
 * Los botones/formulario del header (.btn-header, buscador, dropdown de
 * rol) son flotantes con altura propia (40/42/35px) dentro de un #header
 * de 49px -- el tema base no los centra verticalmente, solo los deja
 * pegados arriba, con todo el espacio libre acumulado abajo. Se les da un
 * margin-top puntual para centrarlos.
 */
#header .btn-header {
    margin-top: 5px;
    transition: background var(--t-transition, .15s ease);
    border-radius: var(--t-radius-sm, 8px);
}

#header .header-search {
    margin-top: 9px;
}

#header #ulRol {
    margin-top: 7px;
}

#header .btn-header:hover {
    background: rgba(0, 65, 117, 0.08) !important;
}

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

html.dark-mode #header .btn-header:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

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

/* Buscador global del header: pill sutil sobre el fondo del header
   (--t-bg/--t-border ya cambian solos con el tema -- mas oscuros que
   --t-card tanto en claro como en oscuro, dando el mismo contraste sutil
   en ambos modos). */
#header .header-search {
    border-radius: 999px !important;
    background: var(--t-bg) !important;
    border: 1px solid var(--t-border) !important;
    transition: border-color var(--t-transition, .15s ease), background var(--t-transition, .15s ease);
    /* El tema base trae el input a 30px de alto + su propio padding
       vertical, quedando el pill entero (42px) notablemente mas alto que
       los botones circulares de al lado (40px, y ~28px de circulo visible
       dentro). Se fuerza una altura fija menor e igual de "compacta" que
       esos botones. */
    height: 30px !important;
    display: flex;
    align-items: center;
}

#header .header-search:focus-within {
    border-color: var(--t-header-fg) !important;
    background: var(--t-card) !important;
}

#header .header-search input {
    background: transparent !important;
    color: var(--t-header-fg) !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 nuevo se veia como un recuadro superpuesto. */
    border: none !important;
    border-radius: inherit !important;
    height: 100% !important;
    padding: 0 10px !important;
    line-height: normal !important;
}

/* El boton de lupa y el de cancelar (X) se posicionan con
   "position:absolute; top:10px" fijo en el tema base -- pensado para el
   alto original del pill (42px). Con el pill mas bajo (30px) hay que
   centrarlos de nuevo, con un metodo que no dependa de un alto fijo. */
#header .header-search button,
#header .header-search #cancel-search-js {
    top: 50% !important;
    transform: translateY(-50%);
}

/*
 * El centrado geometrico de arriba deja el icono de la lupa 5px mas
 * arriba que los demas iconos del header (#hide-menu, #fullscreen, etc):
 * esos se centran via "line-height" del tema base, que por como el
 * navegador calcula el alto de linea de una fuente de iconos, termina
 * empujando el glifo un poco mas abajo que un centrado geometrico puro.
 * Se nudgea el icono (no el boton, que se queda con su area de clic
 * centrada) para igualar la posicion visual exacta de sus vecinos.
 */
#header .header-search button i {
    position: relative;
    top: 5px;
}

#header .header-search input::placeholder {
    color: rgba(0, 65, 117, 0.5) !important;
}

html.dark-mode #header .header-search input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Dropdown de roles / perfil: sigue el tema del contenido (no el del
   header), como el resto de dropdowns/paneles del sistema. */
#header .header-dropdown-list .dropdown-menu {
    background: var(--t-card) !important;
    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 {
    color: var(--t-text) !important;
    border-radius: var(--t-radius-sm, 8px) !important;
}

/* =====================================================================
   RESPONSIVE: el shell (menu/header) no tenia @media propios
   ===================================================================== */

@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;
    }
}


/* =====================================================================
   MODO OSCURO: textos que se quedaban en un color de tema claro

   Repaso hecho midiendo el contraste real de cada texto contra el fondo
   que efectivamente lo pinta (componiendo las capas con alfa), pantalla
   por pantalla. Lo que sigue son los casos donde el texto quedaba
   practicamente negro sobre fondo oscuro.
   ===================================================================== */

/*
 * Etiquetas de checkbox y radio dentro de .smart-form. SmartAdmin las fija
 * en #404040 con un selector mas especifico (.smart-form .checkbox) que el
 * de modern-components (.smart-form label), asi que ganaba el gris casi
 * negro. Se ve en "Solo mis ordenes" (Ordenes de Servicio), en el bloque
 * Pagado/Credito de Emitir Comprobante y en cualquier formulario con
 * casillas.
 */
html.dark-mode .smart-form .checkbox,
html.dark-mode .smart-form .radio,
html.dark-mode .smart-form .toggle,
html.dark-mode .smart-form .checkbox span,
html.dark-mode .smart-form .radio span,
html.dark-mode .smart-form .toggle span {
    color: var(--t-text) !important;
}

/*
 * Clases de texto de Bootstrap 3: sus colores estan pensados para fondo
 * blanco (verde #3c763d, rojo #a94442...) y sobre el fondo oscuro quedan
 * casi negros. Se remapean a los tokens del tema, que ya tienen su version
 * clara para modo oscuro. Se ven en los importes de la grilla de ordenes.
 */
html.dark-mode .text-success {
    color: var(--t-success) !important;
}

html.dark-mode .text-danger {
    color: var(--t-danger) !important;
}

html.dark-mode .text-warning {
    color: var(--t-warning) !important;
}

html.dark-mode .text-info {
    color: var(--t-info) !important;
}

html.dark-mode .text-primary {
    color: var(--t-primary) !important;
}

/*
 * Menu de la rueda de acciones de las grillas: se queda blanco a proposito,
 * como pidio el usuario, pero entonces sus opciones tienen que ser oscuras.
 * La regla generica "html.dark-mode a" las pintaba de azul claro, ilegible
 * sobre blanco.
 */
html.dark-mode .dropdown-menu {
    background: #ffffff !important;
    border-color: #d9dde3 !important;
}

html.dark-mode .dropdown-menu > li > a,
html.dark-mode .dropdown-menu > li > a i,
html.dark-mode .dropdown-menu > li > a span {
    color: #1f2937 !important;
}

html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus {
    background: #eef2f5 !important;
    color: #111827 !important;
}

html.dark-mode .dropdown-menu .divider {
    background-color: #e5e9f1 !important;
}

/*
 * El menu de la cuenta, en el header, si sigue el tema oscuro: tiene sus
 * propias reglas mas arriba (#header .header-dropdown-list .dropdown-menu)
 * y no debe volverse blanco con lo de aqui arriba.
 */
html.dark-mode #header .dropdown-menu {
    background: var(--t-card) !important;
    border-color: var(--t-border) !important;
}

html.dark-mode #header .dropdown-menu > li > a,
html.dark-mode #header .dropdown-menu > li > a i,
html.dark-mode #header .dropdown-menu > li > a span {
    color: var(--t-text) !important;
}

html.dark-mode #header .dropdown-menu > li > a:hover,
html.dark-mode #header .dropdown-menu > li > a:focus {
    background: var(--t-primary-soft) !important;
    color: var(--t-text) !important;
}

/*
 * La vista previa del ticket (Empresa > Formato de Impresion) simula papel
 * blanco y por eso pinta todo su contenido en negro. El "*" alcanzaba
 * tambien al boton Grabar que vive dentro de esa area, dejandolo con texto
 * negro sobre azul.
 */
html.dark-mode .ticket_body .btn-primary,
html.dark-mode .ticket_body .btn-primary i,
html.dark-mode .ticket_body .btn-primary span {
    color: #214f75 !important;
}

html.dark-mode .ticket_body .btn-primary:hover,
html.dark-mode .ticket_body .btn-primary:hover i,
html.dark-mode .ticket_body .btn-primary:hover span,
html.dark-mode .ticket_body .btn-primary:focus,
html.dark-mode .ticket_body .btn-primary:focus i,
html.dark-mode .ticket_body .btn-primary:focus span {
    color: #ffffff !important;
}

html.dark-mode .ticket_body .btn-primary {
    background-color: #ffffff !important;
    border-color: #214f75 !important;
}

html.dark-mode .ticket_body .btn-primary:hover,
html.dark-mode .ticket_body .btn-primary:focus {
    background-color: #214f75 !important;
}

/*
 * Pie del menu lateral: estaba al 35% de blanco sobre el navy oscuro y
 * quedaba por debajo del minimo legible.
 */
html.dark-mode #left-panel .lp-version,
html.dark-mode .lp-version {
    color: rgba(255, 255, 255, 0.62) !important;
}

/*
 * Etiquetas de estado (.label-success / -info / -warning / -danger). En modo
 * oscuro modern-components les da como fondo los tokens claros del tema
 * (verde menta, cian, ambar, rojo salmon) pero el texto seguia forzado a
 * blanco, que sobre esos pasteles queda por debajo de 2:1. Se les pone el
 * texto oscuro, que es lo que pide un fondo claro. En modo claro no cambian:
 * ahi el fondo es el color saturado de Bootstrap y el blanco es correcto.
 */
html.dark-mode .label-success,
html.dark-mode .label-info,
html.dark-mode .label-warning,
html.dark-mode .label-danger,
html.dark-mode label.label-success,
html.dark-mode label.label-info,
html.dark-mode label.label-warning,
html.dark-mode label.label-danger {
    color: #0f172a !important;
}
