/* Base rem del proyecto: el diseño usa rem asumiendo 1rem = 10px.
   El BS3 anterior fijaba esto en su CSS; BS4 ya no, así que se restaura aquí
   (balancoop.css carga después de Bootstrap, por lo que prevalece). */
html {
	font-size: 10px;
}

body {
	font-size: 13px;
	margin-top: 20px;
	padding-top: 70px;
	padding-bottom: 20px;
	background-color: #f9fbfc;
	font-family: "Nunito", sans-serif !important;
	/*	background: rgba(58,141,171,1);
	background: -moz-linear-gradient(left, rgba(58,141,171,1) 0%, rgba(56,114,173,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(58,141,171,1)), color-stop(100%, rgba(56,114,173,1)));
	background: -webkit-linear-gradient(left, rgba(58,141,171,1) 0%, rgba(56,114,173,1) 100%);
	background: -o-linear-gradient(left, rgba(58,141,171,1) 0%, rgba(56,114,173,1) 100%);
	background: -ms-linear-gradient(left, rgba(58,141,171,1) 0%, rgba(56,114,173,1) 100%);
	background: linear-gradient(to right, rgba(58,141,171,1) 0%, rgba(56,114,173,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a8dab', endColorstr='#3872ad', GradientType=1 );*/
}

:root {
	--radius: 0.625rem;
	--background: oklch(100% 0 0);
	--foreground: oklch(14.5% 0 0);
	--card: oklch(100% 0 0);
	--card-foreground: oklch(14.5% 0 0);
	--primary: oklch(20.5% 0 0);
	--primary-foreground: oklch(98.5% 0 0);
	--secondary: oklch(97% 0 0);
	--secondary-foreground: oklch(20.5% 0 0);
	--muted: oklch(97% 0 0);
	--muted-foreground: oklch(55.6% 0 0);
	--accent: oklch(97% 0 0);
	--accent-foreground: oklch(20.5% 0 0);
	--destructive: oklch(57.7% 0.245 27.325);
	--border: oklch(92.2% 0 0);
	--input: oklch(92.2% 0 0);
	--ring: oklch(70.8% 0 0);
}

legend * {
	color: #000;
	text-decoration: none;
}
legend a:hover {
	color: #000;
	text-decoration: none;
}
legend span {
	float: right;
}

#logo {
	height: 40px;
}

.navbar-nav > li > a {
	font-size: 1.5rem !important;
	font-weight: 600;
	color: rgb(42, 80, 111);
}

.dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-size: 1.5rem !important;
	font-weight: 600;
	line-height: 1.42857143;
	color: rgb(42, 80, 111);
	white-space: nowrap;
}

.btn-group-sm > .btn,
.btn-sm {
	padding: 5px 10px;
	font-size: 1.3rem !important;
	font-weight: 600;
	line-height: 1.5;
	border-radius: 3px;
}

.well {
	/* BS4 no tiene .well; se restauran padding/borde/radio que daba BS3 para que
	   siga siendo una caja que contiene su contenido. */
	padding: 1.9rem;
	margin-bottom: 2rem;
	border: 1px solid #f2f6fa;
	border-radius: 4px;
	background-color: #f9fbfc !important;
	border-color: #f2f6fa;
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1),
		0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 18px 0 rgba(0, 0, 0, 0.02) !important;

	transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* BS4 eliminó la utilidad .hide de BS3 (la reemplazó por .d-none). La app la usa
   intensivamente para mostrar/ocultar (clase estática en vistas y, sobre todo,
   ~70 toggles por JS: addClass/removeClass('hide')). Sin esta regla, todo lo que
   debería estar oculto se muestra (p.ej. los selects condicionales del importador).
   Se restaura el comportamiento de BS3. */
.hide {
	display: none !important;
}
/* BS4 eliminó .page-header (existía en BS3 como encabezado con divisor inferior).
   Se restaura para que los pocos usos heredados conserven el divisor sin reestructurar. */
.page-header {
	padding-bottom: 0.9rem;
	margin: 4rem 0 2rem;
	border-bottom: 1px solid #eee;
}
/* BS3 .panel-title vivía en el header de los paneles (ahora .card-header) con
   font-size 16px y sin márgenes. En un <h3> los márgenes por defecto rompían la
   cabecera; se restaura el comportamiento BS3 (hereda el color del header, p.ej.
   blanco sobre .bg-primary). */
.panel-title {
	margin: 0;
	font-size: 1.6rem;
	color: inherit;
}

footer {
	color: #444444;
	text-align: center;
}

#cont_inicio img {
	/* 	padding-top: 40px;
	padding-right: 16px; */
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	display: flex !important;
}

.navbar-brand {
	height: 64px;
	padding: 0 15px !important;
	font-size: 18px;
	line-height: 30px;
	display: flex;
	align-items: center;
}

.container-menu-top {
	display: flex;
	align-items: center;
}

@media (min-width: 768px) {
	.navbar-header {
		float: none;
		display: flex;
		align-items: center;
	}
}

#logo_empresa {
	max-width: 180px;
	height: auto;
}

/* Forzar círculo perfecto cuando el logo está en la tarjeta de sesión */
.session-logo #logo_empresa {
	width: 120px !important;
	height: 120px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	object-fit: contain !important;
	display: block;
}
#panel_filtros {
	padding: 0.4em;
	margin: 0.3em;
}
#tabla_empresas,
#tabla_productos {
	max-width: 1280px !important;
	overflow-x: scroll !important;
	overflow-y: hidden !important;
}
#tabla_paises {
	max-width: 300px !important;
}
#tabla_departamentos,
tabla_ciudades,
#tabla_barrios {
	max-width: 300px !important;
	overflow-x: scroll !important;
	overflow-y: hidden !important;
}
.alerta {
	color: #ffa500;
}
.clear {
	clear: both;
}
.col-sm-1 {
	border: 1px solid #000;
}
.contenedor_balance {
	padding-left: 2em;
}
.derecha {
	float: right;
}
.error {
	color: #f00;
}
.exito {
	color: #008000;
}
.alinear_centro {
	text-align: center;
}
.alinear_derecha {
	text-align: right;
}
/* Badges de peso/conteo (verde/rojo). En BS3 el .badge base daba texto blanco y
   forma de píldora; BS4 no, por eso el número quedaba gris sobre color y la caja
   cuadrada. Se restaura el look BS3 en estas clases (siempre van sobre fondo de
   color, así que el blanco es seguro). */
.badge-exito,
.badge-error {
	color: #fff;
	border-radius: 1rem;
	min-width: 1.8rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}
.badge-exito {
	background-color: #62b55d;
}
.badge-error {
	background-color: #cd1717;
}
.icono_balance {
	color: #000;
	float: right;
	text-decoration: none;
}
.icono {
	text-decoration: none;
	color: #000;
	cursor: pointer;
}
.info {
	color: #00f;
}
.oculto {
	display: none;
}
.mensaje {
	font-size: 0.9em;
}

table.dataTable tr.odd {
	background-color: #f2f6fa;
}

table.dataTable tr.odd td.sorting_1 {
	background-color: #e6eff7;
}

table.dataTable tr.even td.sorting_1 {
	background-color: #f2f6fa;
}

table.dataTable thead th {
	border-bottom: 1px solid #cccccc;
	padding: 7px 18px 7px 10px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
	border-top: 1px solid #eeeeee !important;
}

.btn-group-xs > .btn,
.btn-xs {
	padding: 7px 7px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.menu {
	position: fixed;
	background: #ffffff;
	height: 64px;
	display: flex;
	align-items: center;
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1),
		0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 18px 0 rgba(0, 0, 0, 0.02);
}

.menu_principal a {
	color: rgb(42, 80, 111) !important;
	font-size: 14px;
}

.menu_principal :hover {
	color: #444444 !important;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a:hover {
	color: #fff;
	background-color: #3f90d3;
}

.ui-autocomplete-input {
	z-index: 5000;
}
.ui-autocomplete {
	z-index: 1061 !important;
}
.blue {
	color: #428bca;
}
.float-right {
	float: right;
}
.report-tranfer {
	color: #ffffff;
	background-color: #428bca;
	padding-top: 15px;
	padding-bottom: 15px;
	border: 5px solid #f5f5f5;
	border-radius: 8px;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.report-tranfer .badge {
	color: #428bca;
	background-color: #ffffff;
}

.modal-body {
	position: relative;
	padding: 15px;
}

.modal-body .container {
	width: auto !important;
}

.modal {
	overflow-y: scroll;
}

@media print {
	a,
	.consulta {
		display: none;
	}

	.container {
		width: 100%;
	}

	.benefit {
		border-bottom: 1px solid green;
		padding-bottom: 10px;
		padding-top: 10px;
		width: 100%;
		display: table;
		content: " ";
		clear: both;
	}

	.well {
		background-color: #fff !important;
		width: 100%;
		border: none;
		border-radius: none;
	}

	h3 {
		display: inline-block;
		margin-bottom: 2%;
		width: 100%;
	}

	.benefit .benefit-box .title-panel {
		font-size: 12px;
		min-height: 37px;
		font-weight: 600;
	}

	.benefits-box {
		min-height: 250px;
		display: inline-block;
		width: 100%;
	}

	.benefits-box-middle {
		min-height: 250px;
		width: 50%;
	}

	.report-boxes {
		width: 100%;
	}

	.report-boxes td {
		width: 50%;
		padding-left: 10px;
		padding-right: 10px;
	}

	.alinear_centro {
		text-align: center;
	}
	.table {
		border-collapse: collapse !important;
	}
	.table-bordered th,
	.table-bordered td {
		border: 1px solid #ddd !important;
	}

	body {
		margin: 0;
		padding: 0 !important;
		min-width: 768px;
	}

	a[href]:after {
		content: none;
	}

	.noprint,
	div.alert,
	header,
	.group-media,
	.btn,
	.footer,
	form,
	#comments,
	.nav,
	ul.links.list-inline,
	ul.action-links {
		display: none !important;
	}

	.report-transfer .header .text {
		width: 89%;
		display: inline-block;
	}

	.report-transfer .header .logo {
		width: 10%;
		display: inline-block;
	}

	.report-transfer .header .logo img {
		width: 60px;
		height: 60px;
	}
	.report-transfer .info {
		color: green;
	}
	.benefit {
		border-bottom: 1px solid green;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.benefits-box > div {
		width: 100%;
	}

	.benefits-box .panel .row {
		width: 90%;
	}

	.row::before,
	.row::after {
		content: " ";
		display: table;
	}

	.row::after {
		clear: both;
	}
}

textarea:active,
select:active,
input[type="text"]:active,
input[type="password"]:active,
input[type="datetime"]:active,
input[type="datetime-local"]:active,
input[type="date"]:active,
input[type="month"]:active,
input[type="time"]:active,
input[type="week"]:active,
input[type="number"]:active,
input[type="email"]:active,
input[type="url"]:active,
input[type="search"]:active,
input[type="tel"]:active,
input[type="color"]:active,
.uneditable-input:active,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.dataTables_filter input[type="color"]:focus,
.uneditable-input:focus {
	background-color: #f9fbfc;
	border-color: #e8eaed;
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1),
		0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 18px 0 rgba(0, 0, 0, 0.02) !important;
	transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dataTables_filter input {
	padding: 6px 12px;
	font-size: 14px;
	background-color: #fff;
	background-image: none;
	color: #555;
	border: 1px solid rgba(234, 236, 237, 0.8);
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out 0.15s,
		-webkit-box-shadow ease-in-out 0.15s;
	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	margin: 0 7px 0 7px;
}

.dataTables_filter input[type="color"]:focus,
.dataTables_filter input[type="color"]:active,
.dataTables_filter input:focus,
.dataTables_filter input:active {
	background-color: #f9fbfc !important;
	border-color: #e8eaed !important;
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1),
		0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 18px 0 rgba(0, 0, 0, 0.02) !important;
	transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid rgba(234, 236, 237, 0.8);
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out 0.15s,
		-webkit-box-shadow ease-in-out 0.15s;
	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

label {
	padding: 8px 0 0 0;
}

#mensajeActualizacion {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

.table-responsive {
	width: 100%;
	overflow-x: auto;
	border: 1px solid oklch(87.2% 0.01 258.338);
	border-radius: 7px;
	margin-top: 20px;
}

/* BS4: DataTables dejaba de estirar la tabla y su wrapper a todo el ancho
   (el .table-responsive de BS4 fuerza overflow/box y cambia el cálculo de
   ancho de DataTables). Se fuerza ancho completo para TODAS las listas. */
.dataTables_wrapper {
	width: 100%;
}
table.dataTable {
	width: 100% !important;
	margin: 0 !important;
}

.dataTables_length {
	margin-top: 10px;
	margin-left: 20px;
	font-size: 1.2rem;
	color: var(--muted-foreground) !important;
}

#tabla_datos_length label {
	color: var(--muted-foreground) !important;
	display: flex !important;
	align-items: center;
	gap: 10px !important;
	font-size: 1.2rem;
}

/* Botón secundario estilo shadcn/ui */
.paginate_enabled_next,
.paginate_enabled_previous {
	/* Layout y flexbox */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	/* Texto */
	white-space: nowrap;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.35rem;

	/* Estilo visual */
	border-radius: 0.375rem;
	border: none;
	background: oklch(92.8% 0.006 264.531) !important;
	background-image: none !important;
	color: oklch(21% 0.034 264.665);

	/* Dimensiones */
	height: 2.25rem;
	padding: 0.5rem 1rem;

	/* Transiciones */
	transition: all 0.2s ease;

	/* Estados */
	outline: none;
	cursor: pointer;
}

.paginate_enabled_next:hover,
.paginate_enabled_previous:hover {
	background-color: oklch(87.2% 0.01 258.338) !important;
	cursor: pointer;
}

.paginate_enabled_next:focus-visible,
.paginate_enabled_previous:focus-visible {
	border: 1px solid oklch(21% 0.034 264.665) !important;
	box-shadow: 0 0 0 3px oklch(21% 0.034 264.665 / 0.5) !important;
	cursor: pointer;
}

.paginate_enabled_next:disabled,
.paginate_enabled_previous:disabled {
	pointer-events: none;
	opacity: 0.5;
}

.paginate_enabled_next[aria-invalid="true"],
.paginate_enabled_previous[aria-invalid="true"] {
	border: 1px solid oklch(62.8% 0.258 29.234);
	box-shadow: 0 0 0 3px oklch(62.8% 0.258 29.234 / 0.2);
	cursor: not-allowed;
}

/* Iconos dentro del botón */
.paginate_enabled_next svg,
.paginate_enabled_previous svg {
	pointer-events: none;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Ajuste de padding cuando hay iconos */
.paginate_enabled_next:has(> svg),
.paginate_enabled_previous:has(> svg) {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.dataTables_filter {
	margin-right: 20px;
	font-size: 1.2rem;
	color: var(--muted-foreground) !important;
}

.dataTables_filter label {
	color: var(--muted-foreground) !important;
}

.dataTables_info {
	margin-left: 20px;
	margin-top: 10px;
	font-weight: 600;
	font-size: 1.2rem;
	margin-bottom: 10px;
	color: var(--muted-foreground) !important;
}

.dataTables_paginate {
	margin-right: 20px;
	margin-top: 10px;
	font-weight: 600;
	font-size: 1.2rem;
	margin-bottom: 10px;
	color: var(--muted-foreground) !important;
}

.dataTables_paginat a {
	color: var(--muted-foreground) !important;
}

/* Botones deshabilitados */
.paginate_disabled_next,
.paginate_disabled_previous {
	/* Layout y flexbox */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	/* Texto */
	white-space: nowrap;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.35rem;

	/* Estilo visual */
	border-radius: 0.375rem;
	border: none;
	background: oklch(96.7% 0.003 264.542) !important;
	background-image: none !important;
	color: oklch(75% 0.006 264.531);

	/* Dimensiones */
	height: 2.25rem;
	padding: 0.5rem 1rem;

	/* Transiciones */
	transition: all 0.2s ease;

	/* Estados */
	outline: none;
	cursor: not-allowed;
	opacity: 0.6;
	pointer-events: none;
}

.paginate_disabled_next:hover,
.paginate_disabled_previous:hover {
	background: oklch(96.7% 0.003 264.542) !important;
	opacity: 0.6;
}

.paginate_disabled_next:focus-visible,
.paginate_disabled_previous:focus-visible {
	border: none;
	box-shadow: none;
}

/* Iconos dentro del botón deshabilitado */
.paginate_disabled_next svg,
.paginate_disabled_previous svg {
	pointer-events: none;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	opacity: 0.6;
}

/* Ajuste de padding cuando hay iconos */
.paginate_disabled_next:has(> svg),
.paginate_disabled_previous:has(> svg) {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/* (zebra/sorting de la tabla: se gestiona en tables.css con la familia slate;
   se quitó el override neutro oklch(97% 0 0) !important que desentonaba) */

/* =========================================================================
   Compatibilidad navbar Bootstrap 4 (migración BS3 -> BS4)
   El menú conserva <ul>/<li> dentro de .dropdown-menu; BS4 no resetea esa
   lista, así que se neutraliza el padding/viñetas y se reestablece el
   comportamiento que daba BS3.
   ========================================================================= */
.navbar .dropdown-menu {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
}
.navbar .dropdown-menu > li {
	list-style: none;
}
/* El item "Cerrar sesión" se alinea a la derecha (BS3 usaba float:right, que
   no funciona en el navbar flex de BS4). */
.navbar-nav .derecha {
	margin-left: auto;
}
.navbar-nav .derecha.float-right,
.derecha {
	float: none;
}
/* Submenús anidados (dropdown-submenu) del menú de asociados: BS4 no los
   soporta de forma nativa. Se despliegan al pasar el cursor. */
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
}
.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}
.dropdown-submenu > a::after {
	display: inline-block;
	margin-left: 0.5em;
	content: "\00bb"; /* » indica submenú */
}
/* BS3 aplicaba font-weight:700 a todos los <label>; BS4 no. Se restaura para
   conservar la apariencia de los formularios. Esto hace que la clase BS3
   .control-label (inexistente en BS4) quede como no-op inofensiva y evita
   editarla en cientos de vistas. */
label {
	font-weight: 700;
}
/* BS4 dimensiona sus componentes en rem asumiendo base 16px, pero el proyecto
   fija html=10px (para su CSS propio), lo que encoge botones/inputs/selects
   nativos de BS4 (~62%). Se restauran a tamaños equivalentes a los de BS3.
   Nota: .btn-sm ya lo controla el CSS propio del proyecto (1.3rem !important). */
.btn {
	font-size: 1.4rem;
	padding: 0.6rem 1.2rem;
}
.btn-lg,
.btn-group-lg > .btn {
	font-size: 1.8rem;
	padding: 0.8rem 1.6rem;
}
/* BS4 eliminó .btn-xs (existía en BS3). Se restaura para los botones extra
   pequeños (p. ej. íconos de ayuda) usados en varias vistas. */
.btn-xs,
.btn-group-xs > .btn {
	font-size: 1.2rem;
	padding: 0.2rem 0.6rem;
	line-height: 1.5;
	border-radius: 0.3rem;
}
.form-control {
	font-size: 1.4rem;
	padding: 0.5rem 1rem;
	height: auto;
}
.form-control-sm {
	font-size: 1.3rem;
	padding: 0.35rem 0.8rem;
	height: auto;
}
.custom-select {
	font-size: 1.4rem;
	height: auto;
	padding: 0.5rem 2rem 0.5rem 1rem;
}
.input-group-text {
	font-size: 1.4rem;
}
.modal-title {
	font-size: 1.8rem;
}
/* Las vistas heredadas de BS3 ponen el botón .close ANTES del .modal-title en el
   DOM. En BS4 el .modal-header es flex con justify-content:space-between y .close
   tiene margin-left:auto, lo que descoloca la X y el título. En vez de reordenar
   los 82 modales a mano, se corrige visualmente con flex order: título primero,
   X al final. */
.modal-header .modal-title {
	-ms-flex-order: 1;
	order: 1;
}
.modal-header .close {
	-ms-flex-order: 2;
	order: 2;
}
.badge {
	font-size: 1.1rem;
}
/* BS4 exige que las .col-* vivan dentro de un .row. Muchas vistas heredadas de
   BS3 tienen columnas sueltas dentro de .container (BS3 lo toleraba con floats;
   BS4 las apila al 50%/33%). Se hace que cualquier contenedor con columnas
   directas se comporte como una fila flex, evitando añadir .row en cientos de
   vistas. Requiere :has() (Chrome/Edge/Safari/Firefox actuales). */
.container:has(> [class*="col-"]),
.container-fluid:has(> [class*="col-"]),
.well:has(> [class*="col-"]),
.card-body:has(> [class*="col-"]),
.modal-body:has(> [class*="col-"]) {
	display: flex;
	flex-wrap: wrap;
}
/* Solo los .container actúan como .row (sin padding lateral). Las cajas con
   estilo propio (.well, .card-body, .modal-body) conservan su padding. */
.container:has(> [class*="col-"]),
.container-fluid:has(> [class*="col-"]) {
	padding-left: 0;
	padding-right: 0;
}
/* Columnas heredadas que NO están dentro de un .row (frecuente en vistas
   cargadas por AJAX dentro de divs con id, p. ej. #cont_categorias). En BS3 las
   columnas flotaban, por eso el markup ya trae <div class="clear"> para
   limpiarlas; BS4 las apila al ancho de su columna. Se restaura el float de BS3
   para que fluyan en grilla. En los contenedores que ya se vuelven flex (.row y
   las cajas con :has de arriba) el float es ignorado, así que no interfiere. */
:not(.row) > [class*="col-"] {
	float: left;
}
/* Sus contenedores deben CONTENER esas columnas flotadas para no colapsar (p. ej.
   un <form> con columnas sueltas pierde su alto y el botón se desborda fuera del
   .well). Se usa un clearfix con ::after (NO flow-root): el clearfix envuelve los
   floats internos sin crear un BFC, de modo que el contenedor sigue ocupando todo
   el ancho y NO esquiva floats vecinos (flow-root sí los esquivaba: hacía que
   #cont_categorias se corriera a la derecha del botón flotante "Crear balance").
   Los .row y las cajas con :has de arriba ya contienen vía flex; esto cubre el
   resto. */
:not(.row):not(.container):not(.container-fluid):not(.well):not(.card-body):not(.modal-body):has(> [class*="col-"])::after {
	content: "";
	display: block;
	clear: both;
}
/* El ancho por defecto del modal cambió de 600px (BS3) a 500px (BS4), lo que
   apretaba los formularios. Se restaura 600px para los modales sin tamaño
   especial (no afecta a .modal-sm / .modal-lg / .modal-xl). */
@media (min-width: 576px) {
	.modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl) {
		max-width: 600px;
	}
}
/* Compatibilidad de modales en vistas híbridas (reportes que cargan su propio
   Bootstrap 3 dentro del template BS4). El JS de BS4 muestra el modal con la
   clase .show, pero BS3 usa .in: su `.fade{opacity:0}` deja el contenedor del
   modal transparente, su `.modal-backdrop.fade{opacity:0}` no atenúa y su
   `.modal.fade .modal-dialog{translate -25%}` desplaza el diálogo. Se re-afirma
   el estado visible de BS4 con suficiente especificidad (.fade.show) para ganar
   sobre BS3 sin importar el orden de carga. Son los mismos valores que ya usa
   BS4, así que en páginas 100% BS4 no cambian nada. */
.modal.fade.show {
	opacity: 1;
}
.modal.fade.show .modal-dialog {
	transform: none;
}
.modal-backdrop.fade.show {
	opacity: 0.5;
}