/*! ui-fixes.css — correcciones UI globales NetGob Logística (aditivo, no invasivo). */

/* ============================================================
   SweetAlert2 — seguro en móvil
   Evita: input/select que se desbordan por la derecha, títulos gigantes,
   contenido ancho (select de pertenencia / centro de costo) sin corte.
   ============================================================ */
.swal2-popup:not(.swal2-toast){
	width: min(92vw, 34em) !important;
	max-width: 92vw !important;
	box-sizing: border-box !important;
	padding: 1.25em 1em 1.5em !important;
	border-radius: 16px !important;
}
.swal2-toast .swal2-title{ font-size: .95rem !important; }
.swal2-toast .swal2-html-container{ font-size: .85rem !important; margin:.15rem 0 0 !important; }
.swal2-title{
	font-size: 1.45rem !important;
	line-height: 1.25 !important;
	padding: .3em .5rem 0 !important;
	word-break: break-word;
}
.swal2-html-container{
	font-size: 1rem !important;
	margin: .6em .5rem 0 !important;
	overflow-x: hidden !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}
/* Los controles del swal son hijos directos del popup: 100% del content-box
   (box-sizing border-box) + sin margen lateral => nunca se desbordan. */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file{
	width: 100% !important;
	max-width: 100% !important;
	margin: 1em 0 0 !important;
	box-sizing: border-box !important;
}
.swal2-actions{
	flex-wrap: wrap !important;
	gap: .5rem;
	padding: 0 .5rem;
	margin-top: 1.25em !important;
}
@media (max-width: 420px){
	.swal2-title{ font-size: 1.2rem !important; }
	.swal2-html-container{ font-size: .95rem !important; }
	.swal2-actions .swal2-styled{ margin: .2rem !important; }
}

/* ============================================================
   Menú móvil NetGob Logística — correcciones responsive del chrome (< 992px):
     1) Hamburguesa visible en el topbar (antes el único botón vivía dentro
        del sidebar oculto => menú inalcanzable en celular).
     2) .sidebar-overlay tenía el <div> pero sin estilos base => sin backdrop.
     3) El menú de usuario (IA, tema, avatar, dropdown) se derramaba fuera del
        topbar y flotaba sobre el contenido.
   Aditivo; único cambio de markup: el botón .topbar-burger en menu.php.
   Verificado en navegador headless (topbar en 1 fila + slide-in del sidebar
   con overlay), estados cerrado/abierto a 390px.
   ============================================================ */
.topbar-burger{
	display:none; border:0; background:transparent; color:#fff;
	font-size:1.2rem; line-height:1; padding:.35rem .55rem; margin-right:.35rem;
	border-radius:8px; cursor:pointer;
}
.topbar-burger:hover, .topbar-burger:focus{ background:rgba(255,255,255,.14); color:#fff; outline:none; }
.sidebar-overlay{ display:none; }

@media (max-width:991.98px){
	.topbar-burger{ display:inline-flex; align-items:center; }
	.sidebar-overlay{
		position:fixed; inset:0; background:rgba(8,21,44,.55); z-index:1035;
		-webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
	}
	body:not(.sidebar-open) .sidebar-overlay{ display:none; }
	body.sidebar-open .sidebar-overlay{ display:block; }

	.topbar .container-fluid{ flex-wrap:nowrap !important; }
	.topbar .navbar-collapse{
		display:flex !important; flex-basis:auto !important; flex-grow:1 !important;
		align-items:center; min-width:0;
	}
	.topbar .navbar-nav{ flex-direction:row !important; align-items:center; }
	.topbar .navbar-nav.mr-auto{ display:none !important; }
	.topbar .navbar-nav.ml-auto{ margin-left:auto !important; }
	.topbar .navbar-brand{ margin-right:.25rem; min-width:0; }
	.topbar .brand-logo{ height:26px; }

	.topbar .dropdown-menu{
		position:absolute !important; right:.5rem !important; left:auto !important;
		width:min(20rem,92vw) !important; max-width:92vw !important;
	}
}

@media (max-width:575.98px){
	.topbar .nav-username{ display:none !important; }
}

/* ============================================================
   MODALES — cabecera clara + seguras en móvil (global; 145 modales).

   CAMBIO 2026-08-10: el header dejó de ser navy (#0b4c8c con texto
   blanco). Era la última isla del tema anterior; el resto del sistema
   ya es claro. Ahora usa los tokens del @theme (superficie-2 / tinta /
   borde-suave), así que el MODO OSCURO se resuelve SOLO: las variables
   se redefinen bajo html[data-dark="1"] en ~/tailwind/src/app.css.
   Aquí no se escribe ni una regla dark: ni un color literal (§4b de
   ~/tailwind/GUIA_DISENO.md).

   *** FONDO Y TEXTO VAN EN EL MISMO BLOQUE, A PROPÓSITO ***
   Aclarar el fondo sin invertir los textos deja los títulos de las 145
   modales BLANCOS SOBRE BLANCO (es el fallo que costó una jornada en el
   sidebar el 2026-08-10). Quien toque una de las dos cosas está obligado
   a ver la otra. Por eso no están repartidas por el archivo.

   POR QUÉ CSS Y NO UTILIDADES tw:: el markup de las 145 modales no se
   puede editar. Usa <h3>/<h4> sueltos (no .modal-title), .close con
   <span>&times;</span>, y en varias pantallas .text-dark o iconos
   .text-gold con !important que hay que neutralizar. Esto es el mínimo
   para cubrirlas todas sin tocar un solo PHP.

   Verificado con capturas reales a 390px (form legada grande y modal-sm):
     - Móvil: header fijo + body con scroll + botones alcanzables; sin
       desborde horizontal (se neutralizan anchos fijos legados
       width:NNNpx / addons BS3).
   ============================================================ */

/* POR QUÉ `.modal-header.modal-header` REPETIDO en los textos: netgob-custom
   pinta el modo oscuro con selectores que llevan el atributo del <html> y por
   tanto pesan más que una sola clase:
     L1750  html[data-dark="1"] h1..h6            (0,1,2)  -> ganaba a los <h3> legados
     L2134  html[data-dark="1"] .text-dark        (0,2,1)  -> ganaba a .modal-title.text-dark
   Repetir la clase es CSS válido (matchea el mismo elemento) y sube este
   bloque a (0,2,1)/(0,3,0), suficiente para mandar en AMBOS modos sin tocar
   netgob-custom.css y sin escribir una sola regla dark: aquí. El !important
   es obligatorio porque todas las reglas rivales lo usan. */

/* --- Superficie del header. Se separa del cuerpo con un borde, no con
   color: nada de gradientes. netgob-custom L1597 la pintaba navy y le
   ponía un borde inferior dorado de 2px; el dorado está retirado. --- */
.modal-header{
	background:var(--tw-color-superficie-2) !important;
	border-bottom:1px solid var(--tw-color-borde-suave) !important;
}

/* --- Título en `tinta`. Cubre el markup legado (<h1>..<h6> sueltos) y el
   moderno (.modal-title), incluido .modal-title.text-dark. --- */
.modal-header.modal-header h1,.modal-header.modal-header h2,.modal-header.modal-header h3,
.modal-header.modal-header h4,.modal-header.modal-header h5,.modal-header.modal-header h6,
.modal-header.modal-header .modal-title{ color:var(--tw-color-tinta) !important; margin:0; }

/* Iconos dentro del título: heredan el color del título. Varias pantallas
   los traen en .text-gold (#E8A520, !important), que sobre el header claro
   queda en ~1.9:1 — invisible. */
.modal-header.modal-header h1 i,.modal-header.modal-header h2 i,.modal-header.modal-header h3 i,
.modal-header.modal-header h4 i,.modal-header.modal-header h5 i,.modal-header.modal-header h6 i,
.modal-header.modal-header .modal-title i{ color:inherit !important; }

/* --- Texto secundario suelto en el header (subtítulos, contadores).
   Solo hijos directos: lo que va DENTRO de un título hereda `tinta`.
   Nota: un <span> suelto y pelado lo sigue pintando netgob-custom L1756
   (html[data-dark="1"] span:not(...)x4, (0,5,2)) en modo oscuro; queda en
   --dm-text, legible (10.2:1). No se escala la especificidad por eso. --- */
.modal-header.modal-header > small,
.modal-header.modal-header > span,
.modal-header.modal-header > p{ color:var(--tw-color-tinta-suave) !important; }

/* --- Botón de cierre. La caja la da bootstrap5/compat/bs4-compat.css L50
   (.close: flex, 1.5em, margin-left:auto); aquí SOLO el color.
   text-shadow:none quita el halo blanco heredado de BS4, que sobre fondo
   claro emborrona la ×. --- */
.modal-header.modal-header .close{ color:var(--tw-color-tinta) !important; opacity:.75; text-shadow:none !important; }
.modal-header.modal-header .close > span{ color:inherit !important; }
.modal-header.modal-header .close:hover,
.modal-header.modal-header .close:focus{ color:var(--tw-color-tinta) !important; opacity:1; }

@media (max-width:767.98px){
	.modal-dialog:not(.modal-fullscreen){
		margin:.5rem auto !important; max-width:calc(100vw - 1rem) !important; width:auto !important;
	}
	.modal-content{
		max-height:calc(100dvh - 1rem) !important; margin-top:0 !important;
		display:flex !important; flex-direction:column !important;
	}
	.modal-body{
		overflow:auto !important; flex:1 1 auto !important; min-height:0 !important;
		-webkit-overflow-scrolling:touch;
	}
	.modal-body .form-control,
	.modal-body input,
	.modal-body select,
	.modal-body textarea{ max-width:100% !important; }
	.modal-body .input-group-addon{ width:auto !important; }
	.modal-footer{
		position:sticky; bottom:0; z-index:2;
		padding:.7rem 1rem !important; gap:.5rem; flex-wrap:wrap;
	}
	.modal-footer .btn{ flex:1 1 auto; min-height:44px; }
	.modal-header .close{ padding:.15rem .55rem; font-size:1.7rem; line-height:1; }
}

/* ============================================================
   Tablas anchas en móvil/tablet — scroll horizontal usable.
   Problema (verificado con captura): DataTables envuelve la tabla en
   .dataTables_wrapper con overflow-x:visible; como html,body tienen
   overflow-x:hidden, las columnas finales (incl. "Acciones") quedaban
   RECORTADAS e inalcanzables. Fix: el wrapper scrollea en horizontal.
   (Las tablas en .table-responsive ya scrolleaban; esto cubre las 353
   DataTables que no están envueltas.)
   ============================================================ */
@media (max-width:991.98px){
	.dataTables_wrapper{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
	.dataTables_wrapper::-webkit-scrollbar{ height:7px; }
	.dataTables_wrapper::-webkit-scrollbar-thumb{ background:var(--gold-400,#E8A520); border-radius:4px; }
	.dataTables_wrapper::-webkit-scrollbar-track{ background:var(--navy-900,#08152C); }
}

/* ============================================================
   TEMA CLARO del cromo — elimina el azul casi-negro que fatiga la vista.
   Topbar y sidebar en superficie clara con texto oscuro y acentos azul
   institucional (#0b4c8c) / dorado. Aditivo y reversible (respaldo previo).
   Verificado en visor (desktop + móvil abierto) antes de desplegar.
   ============================================================ */

/* ---------------- TOPBAR claro ---------------- */
.topbar{
	background:#ffffff !important;
	border-bottom:3px solid #0b4c8c !important;
	box-shadow:0 2px 10px rgba(11,76,140,.08) !important;
}
.brand-version{ color:#0b4c8c !important; }
.topbar .theme-toggle-btn,
.topbar .theme-toggle-btn .theme-icon-moon{ color:#0b4c8c !important; }
.topbar .theme-toggle-btn:hover{ background:#eef3f9 !important; }
.topbar .avatar-initial{ background:#0b4c8c !important; color:#fff !important; }
.topbar .ia-engine-btn{ color:#0f2942 !important; }
.topbar .ia-engine-btn .ia-icon{ color:#c8891a !important; }
.topbar-burger{ color:#0b4c8c !important; }
.topbar-burger:hover,.topbar-burger:focus{ background:#eef3f9 !important; color:#0b4c8c !important; }

/* ---------------- SIDEBAR claro ---------------- */
.app-sidebar{ background:#ffffff !important; border-right:1px solid #e2e8f0 !important; }
.sidebar-header{ background:#f6f9fc !important; color:#0b4c8c !important; border-bottom:1px solid #e8eef5 !important; }
.sidebar-header .btn-outline-light{ color:#0b4c8c !important; border-color:#cdd9e6 !important; }
.sidebar-search{ background:#ffffff !important; border-bottom:1px solid #eef2f7 !important; }
#sidebarFilter{ background:#f2f6fb !important; color:#0f2942 !important; border:1px solid #dbe4ee !important; }
#sidebarFilter::placeholder{ color:#8aa0b8 !important; }
.sidebar-search .search-wrapper i{ color:#8aa0b8 !important; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:#c9d6e5 !important; }

.sidebar-link{ color:#334155 !important; }
.sidebar-link i{ color:#7c93ab !important; }

/* Links del menú principal: eran barras navy (netgob-custom línea 283). ID para ganar. */
#app-sidebar .sidebar-item > .sidebar-link{
	background:transparent !important;
	border-left:3px solid transparent !important;
	border-bottom:1px solid #eef2f7 !important;
	text-shadow:none !important;
}
#app-sidebar .sidebar-item > .sidebar-link i{ color:#7c93ab !important; }
#app-sidebar .sidebar-item > .sidebar-link span{ color:#334155 !important; }
#app-sidebar .sidebar-item > .sidebar-link:hover{ background:#f1f5f9 !important; border-left-color:#e8a520 !important; }
#app-sidebar .sidebar-item > .sidebar-link:hover span,
#app-sidebar .sidebar-item > .sidebar-link:hover i{ color:#0b4c8c !important; }

.submenu{ background:#f8fafc !important; }
.submenu-title{ color:#6b7c90 !important; }

/* #app-sidebar (ID) para ganar al <style> inline de menuSideBar.php (mismo selector con .app-sidebar) */
#app-sidebar .sidebar-link.active,
#app-sidebar .sidebar-item.active > .sidebar-link,
#app-sidebar .submenu li.active > .sidebar-link{
	background:#e9f1fb !important; color:#0b4c8c !important;
	border-left:4px solid #e8a520 !important;
	font-weight:700 !important;
}
#app-sidebar .sidebar-link.active i,
#app-sidebar .sidebar-item.active > .sidebar-link i,
#app-sidebar .submenu li.active > .sidebar-link i{ color:#0b4c8c !important; }

.sidebar-footer{ background:#f6f9fc !important; border-top:1px solid #e8eef5 !important; }
.sidebar-footer .sidebar-link{ color:#64748b !important; }
.sidebar-footer .sidebar-link i{ color:#94a3b8 !important; }
.sidebar-link-danger,
.sidebar-link-danger i{ color:#c0392b !important; }

/* ------ Encabezado de tabla ------ */
/* EL FONDO DEL THEAD YA NO SE PINTA AQUI (2026-08-10). Vivia suelto en el
   bloque del cromo, ganandole al `table.table thead th` de netgob-custom.css
   por ir en una hoja posterior: el FONDO lo ponia este archivo (#0b4c8c) y el
   TEXTO lo ponia el otro (white). Dos archivos distintos, sin saberlo, y basta
   con aclarar uno para dejar 511 encabezados en blanco sobre claro.
   Fondo y texto viven ahora JUNTOS en ~/tailwind/src/app.css
   (@layer components, `table.table thead th`). No reintroduzcas aqui un
   background de thead. */
/* .modal-header YA NO SE PINTA AQUÍ (2026-08-10). Su fondo vive junto al
   color de sus textos en el bloque "MODALES — cabecera clara" de más
   arriba. Separarlos es exactamente lo que deja 145 títulos invisibles:
   no reintroduzcas un background de .modal-header en este bloque. */
/* Borde de modal más liviano (era 2px navy casi-negro) */
.modal-content{ border:1px solid #d9e2ec !important; box-shadow:0 14px 40px rgba(8,33,63,.18) !important; }

/* ============================================================
   LEGIBILIDAD DEL SIDEBAR CLARO — corrección de contraste.
   Problema: el bloque de tema claro de más arriba pintó los <a> pero
   casi nunca los <span>, que es el nodo que realmente muestra el texto.
   Resultado: sobre el fondo claro del submenú (#f8fafc) seguían mandando
   los colores heredados del tema oscuro y las opciones eran INVISIBLES
   (contraste medido 1.05:1 en texto de submenú y 1.14:1 en el ítem activo).

   Reglas de css/netgob-custom.css que ganaban hoy:
     L189  li[id^="menu_"] > .sidebar-link      (0,2,0) !important
     L200  li[id^="menu_"] .sidebar-link i      (0,2,1) !important
     L371  .submenu .sidebar-link span          (0,2,1)   <- culpable principal
     L333  .submenu-toggle::after               (caret real, blanco translúcido)
     L551  .submenu-title { opacity:.8 }        (atenúa cualquier color)

   POR QUÉ #app-sidebar: netgob-custom.css no usa ese ID ni una sola vez,
   así que anclar en él suma especificidad de ID (1,x,x) y gana a los
   li[id^="menu_"] sin escalar clases. El !important es obligatorio porque
   las reglas rivales también lo usan.

   POR QUÉ #app-sidebar REPETIDO (#app-sidebar#app-sidebar): netgob-custom
   L218-246 define el "activo por página" con DOS IDs —
     body:has(#tabla_productos) #menu_4_link13 > .sidebar-link i { color:#fff }
   y :has() aporta la especificidad de su argumento más específico, así que
   esas reglas pesan (2,1,1)/(2,1,2) y le ganaban a un solo #app-sidebar
   (1,x,x): en ~12 pantallas el ícono del ítem activo quedaba BLANCO sobre
   #e9f1fb (1.14:1). Repetir el mismo ID es CSS válido y estándar (matchea
   el mismo elemento) y sube este bloque a (2,x,x) con más clases que el
   rival, por lo que gana sin tocar netgob-custom.css. No existe en el
   proyecto ningún selector de sidebar con 3 IDs.

   Alcance: SOLO el sidebar. No se toca el nivel 1 (ya legible 10.35:1),
   ni el topbar, ni nada fuera de #app-sidebar.

   MODO OSCURO (html[data-dark="1"]): el fondo del cromo queda BLANCO en
   ambos modos (el tema claro de arriba lo fija con !important), pero en
   dark las reglas de netgob-custom pasaban los textos a blanco:
     L1879 html[data-dark="1"] span:not(.badge):not(.nav-username)
           :not(.brand-version):not(.theme-icon) { color:var(--dm-text) }
     L2096 html[data-dark="1"] .submenu-title { opacity:.6 }
   NO se duplican selectores con prefijo html[data-dark="1"]: esa regla
   L1879 pesa (0,5,2) — CERO IDs — y todo este bloque va anclado en
   #app-sidebar#app-sidebar (2,x,x), así que ya gana en ambos modos.
   Verificado: netgob-custom.css no tiene ninguna regla dark con ID sobre
   el sidebar. Lo único que NO se resuelve por color es la opacidad de
   .submenu-title, por eso abajo se fuerza opacity:1. Aquí no se rediseña
   el modo oscuro: solo se garantiza texto legible sobre el blanco ya
   desplegado.
   ============================================================ */

/* ---- Texto de los ítems de submenú: 9.90:1 sobre #f8fafc ---- */
#app-sidebar#app-sidebar .submenu li > a.sidebar-link,
#app-sidebar#app-sidebar .submenu li > a.sidebar-link span{
	color:#334155 !important;
}
/* Iconos de submenú: secundarios pero legibles, 3.80:1 sobre #f8fafc
   (venían en oro var(--gold-400) por netgob-custom L200, 2.04:1) */
#app-sidebar#app-sidebar .submenu li > a.sidebar-link i{
	color:#6b8299 !important;
}

/* ---- Encabezado de grupo dentro del submenú: 5.75:1 sobre #f8fafc ----
   (era #6b7c90 = 4.09:1). Se conservan mayúsculas y tamaño heredados.
   opacity:1 es imprescindible: netgob-custom L557 lo baja a .8 y L2097
   (modo oscuro) a .6, lo que degradaba el resultado a ~2.5:1 aunque el
   color computado fuese correcto. La opacidad no es "mayúsculas ni tamaño". */
#app-sidebar#app-sidebar .submenu .submenu-title,
#app-sidebar#app-sidebar li.submenu-title{
	color:#55647a !important;
	opacity:1 !important;
}

/* ---- Ítem activo: azul institucional sobre el #e9f1fb del tema, 7.60:1 ----
   El <span> DEBE ir explícito: es el nodo que pintaba netgob-custom L371.
   El <i> también, por las reglas body:has(...) de L240-246 (blanco, 2 IDs). */
#app-sidebar#app-sidebar .submenu li.active > a.sidebar-link,
#app-sidebar#app-sidebar .submenu li.active > a.sidebar-link span,
#app-sidebar#app-sidebar .submenu li.active > a.sidebar-link i,
#app-sidebar#app-sidebar .submenu li > a.sidebar-link.active,
#app-sidebar#app-sidebar .submenu li > a.sidebar-link.active span,
#app-sidebar#app-sidebar .submenu li > a.sidebar-link.active i{
	color:#0b4c8c !important;
	font-weight:700 !important;
}
/* Mismo tratamiento para el "activo por página" de netgob-custom L218-246,
   que no agrega la clase .active sino que se resuelve por body:has(). */
#app-sidebar#app-sidebar .submenu li[id^="menu_"] > a.sidebar-link i{
	color:#6b8299 !important;
}
#app-sidebar#app-sidebar .submenu li[id^="menu_"].active > a.sidebar-link i{
	color:#0b4c8c !important;
}

/* ---- "Subir a Producción" (li#btn_traspaso_produccion): rojo, 5.20:1 ---- */
#app-sidebar#app-sidebar .submenu a.sidebar-link.sidebar-link-danger,
#app-sidebar#app-sidebar .submenu a.sidebar-link.sidebar-link-danger span,
#app-sidebar#app-sidebar .submenu a.sidebar-link.sidebar-link-danger i,
#app-sidebar#app-sidebar a.sidebar-link.sidebar-link-danger,
#app-sidebar#app-sidebar a.sidebar-link.sidebar-link-danger span,
#app-sidebar#app-sidebar a.sidebar-link.sidebar-link-danger i{
	color:#c0392b !important;
}

/* Hover de submenú (y el rojo de "Subir a Producción" que manda sobre él):
   trasladado a ~/tailwind/src/app.css el 2026-08-17, bloque "HOVER DEL
   SUBMENU DEL SIDEBAR". El fondo era el literal #eef4fd, que no volteaba en
   modo noche y dejaba el texto en 1.09:1. */

/* ---- Footer: el <span> no estaba cubierto y heredaba blanco (en modo
   oscuro pasaba a rgba(255,255,255,.85) = 1.06:1 por L1879).
   Texto 6.67:1 e iconos 4.58:1 sobre el #f6f9fc del footer. ---- */
#app-sidebar#app-sidebar .sidebar-footer .sidebar-link,
#app-sidebar#app-sidebar .sidebar-footer .sidebar-link span{
	color:#4a5a6e !important;
}
#app-sidebar#app-sidebar .sidebar-footer .sidebar-link i{
	color:#5f7488 !important;
}
#app-sidebar#app-sidebar .sidebar-footer .sidebar-link:hover,
#app-sidebar#app-sidebar .sidebar-footer .sidebar-link:hover span,
#app-sidebar#app-sidebar .sidebar-footer .sidebar-link:hover i{
	color:#0b4c8c !important;
}

/* ---- Marca del header ("NetGob Logística"): dependía de herencia y en
   modo oscuro caía a blanco (1.06:1). Explícito, 8.19:1 sobre #f6f9fc. ---- */
#app-sidebar#app-sidebar .sidebar-header,
#app-sidebar#app-sidebar .sidebar-header span{
	color:#0b4c8c !important;
}