/*
 * bs3-compat.css — Reimplementa en Bootstrap 5 las clases de Bootstrap 3.2
 * que SmartAdmin v1.4.1 y las vistas siguen usando, para no tener que tocar
 * las ~97 vistas de golpe. Los valores se copiaron literalmente desde
 * app/assets/css/bootstrap.min.css (BS3.2) para que el resultado visual
 * sea idéntico al actual.
 *
 * Cargar DESPUÉS de bs5-tokens.css y ANTES de smartadmin-production.min.css
 * (SmartAdmin sobreescribe algunos de estos selectores y debe ganar).
 *
 * A medida que cada módulo se migre a clases nativas de BS5 (Fase 3-4 del
 * plan), retirar aquí el bloque correspondiente (Fase 7).
 */

/* ===== Grid: col-xs-* (BS5 solo tiene col-*, sm, md, lg, xl, xxl) ===== */
/* Todo el bloque va dentro de <768px: bs3-compat.css se carga después de
   bootstrap.min.css (BS5), así que cualquier regla de col-xs-* sin media query
   (incluido "width:100%") ganaría por orden de cascada sobre col-sm-*/col-md-*/
   col-lg-* en CUALQUIER ancho de pantalla (BS5 también usa "width", no solo
   flex-basis). Bug detectado visualmente en el login de dos columnas. */
@media (max-width: 767.98px) {
	.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
	.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
		position: relative;
		padding-right: calc(var(--bs-gutter-x) * .5);
		padding-left: calc(var(--bs-gutter-x) * .5);
	}
	.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-xs-3 { flex: 0 0 auto; width: 25%; }
	.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-xs-6 { flex: 0 0 auto; width: 50%; }
	.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-xs-9 { flex: 0 0 auto; width: 75%; }
	.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-xs-12 { flex: 0 0 auto; width: 100%; }
}

/* ===== Utilidades de flotado / visibilidad (eliminadas en BS5) ===== */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.hide { display: none !important; }
.show { display: block !important; }
/* Por defecto visibles; .hidden-* solo oculta DENTRO de su propio breakpoint (igual que BS3.2) */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767.98px) {
	.hidden-xs { display: none !important; }
	.visible-xs { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.hidden-sm { display: none !important; }
	.visible-sm { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.hidden-md { display: none !important; }
	.visible-md { display: block !important; }
}
@media (min-width: 1200px) {
	.hidden-lg { display: none !important; }
	.visible-lg { display: block !important; }
}

/* ===== Botones BS3 ===== */
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
.btn-default:hover, .btn-default:focus, .btn-default.active, .btn-default:active {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}
.btn-xs, .btn-group-xs > .btn {
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}
/* .btn-danger existe en BS5 pero con rojo; este proyecto compiló su propio BS3
   con .btn-danger recoloreado al azul corporativo (ver bootstrap.min.css línea 9:
   background-color:#00049E). Se restaura aquí porque BS5 gana por defecto. */
.btn-danger {
	color: #fff;
	background-color: #00049E;
	border-color: #00048e;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.active, .btn-danger:active {
	color: #fff;
	background-color: #00048e;
	border-color: #540114;
}

/* ===== Panels (BS5 los reemplazó por .card, SmartAdmin sigue usando .panel) ===== */
.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body { padding: 15px; }
.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle { color: inherit; }
.panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; }
.panel-footer {
	padding: 10px 15px;
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading {
	color: #333;
	background-color: #f5f5f5;
	border-color: #ddd;
}
.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.panel-success { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.panel-info { border-color: #bce8f1; }
.panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.panel-warning { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.panel-danger { border-color: #ebccd1; }
.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.panel-group .panel { border-radius: 4px; }
.panel-group .panel + .panel { margin-top: 5px; }

/* ===== Well / thumbnail / page-header / media / caret ===== */
.well {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 24px; border-radius: 6px; }
.thumbnail {
	display: block;
	padding: 4px;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.page-header {
	padding-bottom: 9px;
	margin: 40px 0 20px;
	border-bottom: 1px solid #eee;
}
.media-left, .media > .pull-left { padding-right: 10px; }
.media-right, .media > .pull-right { padding-left: 10px; }
.media-body { width: 10000px; }
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-circle { border-radius: 50%; }
.img-rounded { border-radius: 6px; }
.list-inline { padding-left: 0; list-style: none; margin-left: -5px; }
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }

/* ===== Labels (BS5 solo tiene .badge) ===== */
.label {
	display: inline;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
}
.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }

/* BS5 fija .form-control a font-size:1rem (16px); BS3.2 usaba 13px (ver
   bootstrap.min.css). your_style.css ya fuerza 12px en input[type=text]/
   textarea con !important, así que esto solo corrige <select> y el resto. */
.form-control { font-size: 13px; }
/* Las vistas usan <select class="form-control"> (patrón BS3); BS5 solo dibuja
   la flecha de apertura en <select class="form-select">, no en .form-control,
   así que estos selects quedaban sin ningún indicador. Se replica el mismo
   ícono/posición que usa .form-select nativamente. */
select.form-control {
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* !important: jquery.validate hace $(el).css("background","#FFF") en su
	   callback "success" (repetido en casi todas las vistas); el shorthand
	   "background" resetea background-image a "none" vía estilo inline,
	   borrando la flecha en cuanto el campo pasa la validación. */
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right .75rem center !important;
	background-size: 16px 12px !important;
	padding-right: 2.25rem;
	/* Muchas vistas traen style="height:22px" inline en el <select> (BS3, donde
	   con box-sizing:content-box igual terminaba renderizando ~32-36px). Con
	   box-sizing:border-box ese valor se respeta literalmente y el select
	   queda mucho más bajo que los <input>. Se ignora para igualar alturas. */
	min-height: 24px !important;
	min-height: calc(1.5em + .75rem + 2px);
    padding-left: 5px !important;
}

/* ===== Paginación BS3 (DataTables usa dataTables.bootstrap.min.js de 2014,
   que genera <ul class="pagination"><li><a> en vez de .page-item/.page-link
   de BS5; sin esto la paginación de DataTables queda sin estilo) ===== */
.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 18px 0;
	border-radius: 2px;
}
.pagination > li { display: inline; }
.pagination > li > a, .pagination > li > span {
	position: relative;
	float: left;
	padding: 6px 12px;
	line-height: 1.42857143;
	text-decoration: none;
	color: #3276b1;
	background-color: #fff;
	border: 1px solid #ddd;
	margin-left: -1px;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
	margin-left: 0;
	border-bottom-left-radius: 2px;
	border-top-left-radius: 2px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
	border-bottom-right-radius: 2px;
	border-top-right-radius: 2px;
}
.pagination > li > a:focus, .pagination > li > a:hover,
.pagination > li > span:focus, .pagination > li > span:hover {
	color: #214e75;
	background-color: #eee;
	border-color: #ddd;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
.pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
	z-index: 2;
	color: #fff;
	background-color: #3276b1;
	border-color: #3276b1;
	cursor: default;
}
.pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover,
.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover {
	color: #777;
	background-color: #fff;
	border-color: #ddd;
	cursor: not-allowed;
}

/* ===== Toolbar de DataTables (.dt-toolbar/.dt-toolbar-footer de SmartAdmin) =====
   Estos contenedores NO son `.row` (son solo `display:block;float:left`, ver
   smartadmin-production.min.css); en BS3 sus hijos `col-xs-12 col-sm-6` flotaban
   por sí solos. En BS5 esas mismas clases solo flotan dentro de un `.row` (flex),
   así que sin esto el buscador, "Exportar Excel" y la paginación quedan apilados
   verticalmente en vez de a los lados. */
.dt-toolbar > [class*="col-"], .dt-toolbar-footer > [class*="col-"] {
	float: left;
}
/* dataTables.bootstrap.min.js (build de 2014) genera el ícono de búsqueda con
   `glyphicon glyphicon-search`, una fuente de iconos de Bootstrap 3 que ya no
   se carga. Se sustituye por el glifo equivalente de Font Awesome (ya cargado). */
.glyphicon-search {
	font-family: "FontAwesome";
	font-style: normal;
	font-weight: normal;
	line-height: 1;
}
.glyphicon-search:before {
	content: "\f002";
}
/* El buscador de DataTables (label + .input-group-addon + input) depende de
   floats (smartadmin-production.min.css: label{float:right}, .input-group-addon
   {float:left;width:32px;height:32px}); el padding/borde genérico que este
   archivo agrega a .input-group-addon (más abajo) rompía ese tamaño fijo y
   deformaba el ícono. Se resetea aquí y se centra con flex, sin depender del
   float para el alineado vertical. */
.dataTables_filter {
	display: flex;
	align-items: center;
}
.dataTables_filter label {
	display: flex;
	align-items: center;
	float: none;
	margin: 1px;
}
.dataTables_filter .input-group-addon {
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border: 1;
	border-radius: 0;
	background: transparent;
    height: 33px !important;
}
.dataTables_filter input {
	margin-left: 0px;
}
/* Las columnas sin orden (ej. la de acciones) reciben la clase
   "sorting_disabled" en vez de "sorting"/"sorting_asc"/"sorting_desc", que son
   las únicas con color de fondo definido en smartadmin-production.min.css;
   sin esto esa columna queda blanca en vez de gris como el resto del header. */
table.dataTable thead > tr > th {
	background-color: #eee;
}

/* ===== Formularios BS3 (SmartAdmin .smart-form depende de estos) ===== */
.control-label { font-weight: 700; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
.input-group-addon {
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.has-error .form-control, .has-error .control-label, .has-error .help-block { color: #a94442; }
.has-error .form-control { border-color: #a94442; }
.has-success .form-control, .has-success .control-label, .has-success .help-block { color: #3c763d; }
.has-success .form-control { border-color: #3c763d; }
.has-warning .form-control, .has-warning .control-label, .has-warning .help-block { color: #8a6d3b; }
.has-warning .form-control { border-color: #8a6d3b; }
.form-control-static { padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; min-height: 34px; }

/* ===== checkbox/radio inline (BS5 usa .form-check-inline, markup distinto) ===== */
input[type="checkbox"], input[type="radio"] { margin: 4px 0 0; line-height: normal; }
.checkbox-inline, .radio-inline {
	display: inline-block;
	padding-left: 20px;
	margin-bottom: 0;
	vertical-align: middle;
	font-weight: 400;
	cursor: pointer;
}
.radio-inline input[type="radio"], .checkbox-inline input[type="checkbox"] {
	position: absolute;
	margin-left: -20px;
}
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-left: 10px; }

/* ===== Botones deshabilitados con clases propias (ej. btn-default2) =====
   No son variantes nativas de BS5, así que no definen --bs-btn-disabled-*.
   BS5 aplica border-color:var(--bs-btn-disabled-border-color), que al no
   estar definida cae al valor inicial "currentColor" (el color del texto,
   negro) en vez de heredar el borde gris propio de la clase. */
.btn-default2.disabled, .btn-default2:disabled {
	border-color: #ccc;
	opacity: .65;
}

/* ===== Tablas: your_style.css ya sobreescribe table-condensed, se respeta ===== */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
	padding: 5px;
}
/* BS5 solo fija el color de borde a nivel de <table> (--bs-table-border-color);
   como no lo hereda por celda, el algoritmo de border-collapse termina
   resolviendo cada borde contra el color de texto de la celda (currentColor):
   negro en <thead> (texto en negrita) y blanco/gris muy claro en <tbody>. Se
   fija el color explícito por celda para que sea uniforme en toda la tabla. */
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td {
	border-color: #ddd;
}

/* ===== Nav tabs / pills / dropdown (estructura BS3 sin nav-item/nav-link) ===== */
.nav-tabs {
	border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
	float: left;
	margin-bottom: -1px;
	list-style: none;
}
.nav-tabs > li > a {
	display: block;
	padding: 10px 15px;
	margin-right: 2px;
	line-height: 1.42857143;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	text-decoration: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li > a.active,
.nav-tabs > li > a.active:hover,
.nav-tabs > li > a.active:focus {
	color: #555;
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom-color: transparent;
	cursor: default;
}
.nav-pills > li { float: left; list-style: none; }
.nav-pills > li > a { display: block; padding: 10px 15px; border-radius: 4px; text-decoration: none; }
.nav-pills > li.active > a { color: #fff; background-color: #337ab7; }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
.dropdown-menu > li { list-style: none; }
.dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
	color: #262626;
	background-color: #f5f5f5;
}
.dropdown-menu .divider {
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5;
}

/* ===== Modal: .close de BS3 (BS5 usa .btn-close con SVG; SmartAdmin estiliza .close) ===== */
button.close {
	padding: 0;
	background-color: transparent;
	border: 0;
	appearance: none;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
}
button.close:hover, button.close:focus { color: #000; text-decoration: none; opacity: .5; }
/* El botón de cerrar viene ANTES del título en el HTML (patrón BS3, donde
   float:right lo empujaba a la derecha sin importar el orden). .modal-header
   de BS5 es flex, así que float no hace nada y aparece en el orden del DOM
   (a la izquierda). Se reordena visualmente sin tocar el markup. */
.modal-header .close {
	order: 2;
	margin-left: auto;
}

/* ===== Alertas: fade in / collapse in equivalentes a .show de BS5 ===== */
.fade.in, .collapse.in { opacity: 1; }
.collapse.in { display: block; }
.tab-pane.fade.in, .modal.fade.in { opacity: 1; }

/* La versión BS3 original cambiaba de pestaña sin crossfade visible; BS5
   anima la opacidad de .tab-pane.fade (~150ms) y durante ese lapso ambos
   paneles quedan en display:block, mostrando el contenido superpuesto.
   Se anula la transición para que el cambio sea instantáneo, como antes. */
.tab-pane.fade {
	transition: none;
	opacity: 1;
}

.fs-7 {
    font-size: 0.775rem !important;
}