/* ─── SHIMS Bootstrap 5 → Bootstrap 4 ───────────────────────────
   Añadimos las utilidades de BS5 que usamos y no están en BS4    */

/* Spacing BS5 (me-*, ms-*, pe-*, ps-*) */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: .25rem !important; }
.pe-2 { padding-right: .5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }

/* Font weight BS5 */
.fw-bold     { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal   { font-weight: 400 !important; }
.fw-light    { font-weight: 300 !important; }

/* Text alignment BS5 */
.text-end    { text-align: right !important; }
.text-start  { text-align: left !important; }

/* Float BS5 */
.float-end   { float: right !important; }
.float-start { float: left !important; }

/* Gap (flexbox — solo para contenedores flex, NO para .row) */
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Row gutters BS5 → BS4 (anula el g-* mal interpretado por el BS4 incluido) */
.row.g-1, .row.g-2, .row.g-3 { margin-right: -8px; margin-left: -8px; }
.row.g-1 > [class*="col"], .row.g-2 > [class*="col"], .row.g-3 > [class*="col"] {
    padding-right: 8px; padding-left: 8px;
    flex: unset; max-width: unset;
}

/* ─────────────────────────────────────────────────────────────── */

/*FONDOS PÁGINA PRINCIPAL Y VARIABLES*/
:root{
	/*--bg-portada:url(/_admin/imagenes/fondo-canion.jpg);*/
	/*--bg-portada:url(/_admin/imagenes/fondo-cafe.jpg);*/
	/*--bg-portada:url(/_admin/imagenes/fondo-codigo.jpg);*/
	/*--bg-portada:url(/_admin/imagenes/fondo-portatil.jpg);*/
	/*--bg-portada:url(/_admin/imagenes/fondo-abstracto.jpg);*/
	--bg-portada:url(/_admin/imagenes/fondo-white-black.jpg);
	--bs-border-radius: 0;
	--bs-danger-text-emphasis: #ef5350;
	--bs-toast-header-color: #333;
	--bs-border-radius-lg: 0;
	--bs-border-radius-sm: 0;
}

/* COLOR TOPBAR */
html[data-topbar-color=brand] .navbar-custom {
    background-color: #00aeef !important;
}
html[data-topbar-color=brand] .navbar-custom .topnav-menu .nav-link,
html[data-topbar-color=brand] .navbar-custom .button-menu-mobile {
    color: rgba(255,255,255,.85) !important;
}
html[data-topbar-color=brand] .navbar-custom .dropdown.show .nav-link {
    background-color: rgba(255,255,255,.15) !important;
}
html[data-topbar-color=brand] {
    --bs-topbar-bg: #00aeef;
}

/* Hamburger visible en desktop (app.min.css lo oculta en ≥992px, nosotros lo forzamos) */
.navbar-custom .button-menu-mobile {
    display: inline-block !important;
}

/* Selector empresa en topbar — aspecto coherente con el fondo azul */
.topbar-empresa-li {
    align-self: center;
}
.topbar-empresa-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 4px;
    font-size: 13px;
    height: 34px;
    padding: 0 28px 0 10px;
    min-width: 180px;
    max-width: 250px;
    cursor: pointer;
    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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
}
.topbar-empresa-select option { color: #323a46; background: #fff; }

/* COLOR MENÚ LATERAL */
html[data-menu-color=light] {
    --bs-menu-bg: #ffffff;
    --bs-menu-item-color: #607076;
    --bs-menu-item-hover: #00aeef;
    --bs-menu-item-active: #00aeef;
    --bs-menu-item-active-bg: rgba(0, 174, 239, 0.2);
}

html[data-two-column-color=brand] {
    --bs-twocolumn-sidebar-iconview-bg: #00aeef;
    --bs-twocolumn-iconview-item-color: #ffffff;
    --bs-twocolumn-iconview-icon-active-bg: rgba(255, 255, 255, 0.2);
}

pre code { color:var(--bs-code-color); }
.code-pre {
	display: block;
	overflow: auto;
	font-family: var(--bs-font-monospace);
	white-space: pre;
}

/* PÁGINA DE LOGIN */
.auth-fluid {
	background: var(--bg-portada, url(/_admin/imagenes/fondo-white-black.jpg)) center;
}
.mensajeini { /* color acorde a la foto de fondo */
	color: #607076;
}

/* TÍTULO DE PÁGINA */
.page-title-box {
	background-color: var(--bs-menu-bg);
	box-shadow: none;
	/* Usamos los márgenes del Gabala original: -27px para extenderse hasta el sidebar */
	margin: 0 -30px 24px !important;
	padding: 15px 30px !important;
}
.page-title-box .page-title {
	color: var(--bs-primary);
}
.page-title-box i {
	margin-left: 0px;
	margin-right: 10px;
	vertical-align: bottom;
}

/* LOGO Y TOPBAR */
.logo-box {
	left: 0 !important;
	width: 240px !important;
	background-color: var(--bs-topbar-bg) !important;
	border-bottom: none !important;
	box-shadow: none !important;
}
/* Logo imagen: rellena el ancho del sidebar */
.logo-box img {
	height: 68px !important;
	width: auto !important;
	max-width: 210px !important;
}
/* Sidebar colapsado: solo los 3 palitos, centrados */
html[data-sidebar-size=condensed] .logo-box img {
	height: 46px !important;
	width: auto !important;
	max-width: 46px !important;
}
.navbar-custom { box-shadow: none !important; border-bottom: none !important; }
.navbar-custom-hueco { height: 70px; width: 70px; }

li.nav-item > a.nav-link i:not(.i-tab-center) {
	margin-left: -10px;
	margin-right: 10px;
	vertical-align: bottom;
}

/* BOTÓN AYUDA — oculto por defecto, se muestra con JS si existe #ayudaVentana */
#btn_ayuda_header { display: none; }

/* LAYOUT TWO-COLUMN */
html[data-layout-mode=two-column] .sidebar-main-menu {
	width: 240px;
	box-shadow: none;
}
html[data-layout-mode=two-column] .sidebar-main-menu .logo-box {
	width: 240px !important;
}

/* PASSWORD EYE */
.password-eye:before {
	font-family: "remixicon"!important;
	content: "\ec95";
}
.show-password .password-eye:before {
    content: "\ec97";
}

.footer-alt { margin-bottom: 80px; }
.content-page { z-index: 1; margin-top: 0 !important; }

/* CARD Y SIDEBAR — sin sombra */
.card, .left-side-menu { box-shadow: none !important; }


/* IMAGEN BLANCA (invertir color para iconos sobre fondo oscuro) */
.img-blanco {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

/* UTILIDADES */
.ghost, .visible-con { display: none; }
.b { font-weight: 500; }
.ppp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-hover { pointer-events: none; }
.w-20px { width: 20px; }
.mini-font { font-size: 10px !important; }
.flip-h { transform: scaleX(-1); }

/* BADGE */
.badge {
	font-weight: 400;
	padding: 6px 8px;
	font-size: var(--bs-body-font-size);
	margin: -2px 0 -2px 0;
	border-radius: 0;
	border: 1px;
}
.mini-badge {
	padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
	font-size: var(--bs-badge-font-size);
	font-weight: var(--bs-badge-font-weight);
	margin: 0;
}

/* BOTONES */
.btn i { vertical-align: middle; }
.btn-white { background-color: #ffffff; }
.btn-white:hover { color: var(--bs-gray-700); }

/* FORMULARIOS */
label { font-weight: 400; }
.form-check input, .form-check label,
.form-check-inline input, .form-check-inline label { cursor: pointer; }
.form-control:disabled { border-color: #eeeff5; }
.help-block { font-size: 0.8rem; color: var(--bs-teal); }

/* Input imitación (solo lectura con apariencia de input) */
.input-imitacion {
	display: block;
	width: 100%;
	padding: .45rem .9rem;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	background-color: var(--bs-secondary-bg);
	background-clip: padding-box;
	border: 1px solid var(--bs-border-color);
}
.input-group > .input-imitacion {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}
.input-imitacion.disabled { border-color: #eeeff5; }
select option:disabled { color: var(--bs-gray-500); }

/* Input contador de caracteres */
/* Añadir clase .contador al input, el siguiente elemento hermano muestra "N car." */

/* CARD HEADER CON ACCIONES */
.card-header-text {
	display: flex;
	flex: 1;
	padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}
.card-header .actions {
	flex: 0 1 auto;
	padding: 9px 10px 2px 9px;
	text-align: right;
	margin-top: -4px;
	white-space: nowrap;
	align-content: center;
}
h5 { position: relative; }
.boton-h5 {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	line-height: 25px;
}

/* MÁRGENES NEGATIVOS EN TARJETAS */
.sin-card-margin { margin-left: -1.5rem; margin-right: -1.5rem; }

/* TOAST */
.toast {
	border: 3px solid rgb(26, 126, 106, .66);
}
.toast-header {
	border: 0;
	background-color: #1abc9c;
}
.toast-body { font-weight: 200; }

/* MODAL */
.modal-content {
	background-clip: border-box;
	box-shadow: 0 0 15px 0px rgba(0,0,0,.33) !important;
	border: 0;
}

/* SWEETALERT */
.swal2-popup { border-radius: 0; }
.swal2-content ul { list-style-type: none; }
.swal2-content ul li { margin-bottom: 10px; }
.swal2-modal .swal2-title { margin-bottom: 1em; }
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny { border-radius: 0; }

/* DATATABLES */
div.dataTables_wrapper div.dataTables_info { float: left; }
div.dt-buttons { display: table; margin-bottom: 10px; }
div.dataTables_length { float: left; }
table.dataTable.hover > tbody > tr:hover {
	box-shadow: inset 0 0 0 9999px rgba(0, 174, 239, 0.05);
}

/* Totales en tablas DataTables */
.tabla_totales {
	background-color: rgba(var(--bs-primary-rgb), .05) !important;
	border-bottom: 1px solid rgba(var(--bs-primary-rgb)) !important;
}
.table-striped > tbody > tr.tabla_totales td, tr.tabla_totales td {
	color: var(--bs-primary) !important;
	font-weight: 500;
}
.tr_totales_ant { border-bottom: 1px solid rgba(var(--bs-primary-rgb)) !important; }
.table-striped > tbody > tr.tabla_totales:nth-of-type(odd) > * { --bs-table-bg-type: none; }

/* Responsive DataTables — ícono expand/collapse personalizado con RemixIcon */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
	color: var(--bs-table-color);
	border: 0;
	font-family: footable;
	line-height: 1em;
	content: "\e021";
	background-color: transparent !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
	content: "\e01f";
}

/* TABLA EDITABLE INLINE */
.table-light { --bs-table-color: var(--bs-color-oscuro); }
table.tabla-editable td select {
	border: 0 !important;
	background-color: transparent;
	width: calc(100% + 16px);
	margin: -8px;
	padding: 8px;
	cursor: pointer;
}
table.tabla-editable td select:focus { background-color: rgb(235, 241, 245) !important; }
.tabla-editable-input, .tabla-editable-input:focus {
	color: #FFFFFF;
	background-color: var(--bs-primary);
	background-clip: padding-box;
	border: 0px !important;
	outline: none;
}
table tr.no-leido td:not(.actions) { color: #333 !important; font-weight: bold !important; }

/* TABS — estilo color sólido */
.nav-bordered { background-color: rgba(255, 255, 255, 0.5); }
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
	color: var(--bs-menu-item-active);
	border-bottom: 2px solid var(--bs-menu-item-active) !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: #ffffff;
	background-color: var(--bs-menu-item-active);
}
/* Tab desactivada */
.nav-tabs > li > a[href="#tab_disabled_msg"] {
	color: var(--bs-gray-400);
	font-weight: normal;
	border-bottom: 2px solid var(--bs-border-color) !important;
}
.nav-tabs a.nav-link[href="#tab_disabled_msg"]:hover {
	color: var(--bs-gray-400);
	border-bottom: 2px solid var(--bs-menu-item-active) !important;
}
.nav-tabs > .nav-item > a.nav-link { height: 100%; font-weight: 400; }

/* CHECK-LIST (checkbox con fondo que se activa al marcar) */
.check-list {
	background-color: rgba(200, 200, 200, 0.10) !important;
	border-color: rgba(200, 200, 200, 0.5) !important;
	color: #aaa;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
}
.check-list.activo {
	background-color: rgba(29, 175, 218, 0.25) !important;
	border-color: rgba(29, 175, 218, 0.5) !important;
	color: #3bafda;
}
.check-list .form-check label {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* EXPANDIR/COLAPSAR BLOQUES */
/* Usar: <button class="expandir" data-destino="id_bloque" data-toggle="cerrado">
         <i class="fa-chevron-down"></i></button>
   <div id="id_bloque" style="display:none">...</div> */

/* RESALTAR ETIQUETA DERECHA */
.resaltar-derecha {
	float: inline-end;
	background-color: rgba(0,0,0,.05);
	box-sizing: border-box;
	font-size: 11px;
	height: 17px;
	line-height: 16px;
	margin: 0;
	max-width: 64px;
	overflow: hidden;
	padding: 2px 5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* SPINNER */
.icon-spin { animation: spin 1s infinite linear; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* APARTADO (separador de sección con línea y título) */
.apartado { margin-top: -25px; font-size: 18px; color: var(--bs-primary); }
.apartado span { background-color: #fff; padding: 0 40px; }

/* AUTOCOMPLETE jQuery UI */
.ui-autocomplete { z-index: 99999; }
.ui-menu { list-style: none; padding: 2px; margin: 0; display: block; }
.ui-widget-content { border: 1px solid #ddd; background: #fff; color: #333; }
.ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: 0 !important; background-color: rgba(94, 194, 25, .18); }

/* DROPDOWN */
a.dropdown-item:hover, .dropdown-item:focus {
	background-color: rgba(var(--bs-primary-rgb), .18);
	color: var(--bs-dark);
	cursor: pointer;
}

/* SELECT2 Y SELECTIZE */
.selectize-input, .selectize-input.dropdown-active { border-radius: 0; }
.selectize-dropdown { padding: 0; }
.selectize-dropdown .active {
	background-color: rgba(var(--bs-primary-rgb), .18) !important;
	color: var(--bs-dark) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: rgba(var(--bs-primary-rgb), .18);
	color: var(--bs-dark);
}
.selectize-dropdown-content > div:hover {
	color: #FFFFFF !important;
	background-color: var(--bs-primary) !important;
}
.select2-container--default .select2-selection--single {
	background-color: #fff;
	border: 1px solid var(--bs-border-color);
	border-radius: 0;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
	background-color: var(--bs-primary);
	border-radius: 0;
}
.select2-container--default .select2-results__option[aria-disabled=true] { color: var(--bs-gray-500); }
.select2-container .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple { border-radius: 0; }
/* Select2 dentro de modal — z-index */
.modal-open .select2-container--open .select2-dropdown { z-index: 2000 !important; }

/* FORM-SWITCH tamaños */
.form-switch.form-switch-sm .form-check-input { height: 1rem; width: calc(1rem + 0.75rem); border-radius: 2rem; }
.form-switch.form-switch-md .form-check-input { height: 1.5rem; width: calc(2rem + 0.75rem); border-radius: 3rem; }
.form-switch.form-switch-lg .form-check-input { height: 2rem; width: calc(3rem + 0.75rem); border-radius: 4rem; }
.form-switch.form-switch-xl .form-check-input { height: 2.5rem; width: calc(4rem + 0.75rem); border-radius: 5rem; }
.form-check.form-check-solo {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	margin-top: 5px;
}

/* NESTABLE — listas drag & drop */
.dd { position:relative; display:block; margin:0; padding:0; max-width:600px; list-style:none; font-size:13px; line-height:20px; }
.dd-list { display:block; position:relative; margin:0; padding:0; list-style:none; }
.dd-list .dd-list { padding-left:30px; }
.dd-empty, .dd-item, .dd-placeholder { display:block; position:relative; margin:0; padding:0; min-height:20px; font-size:13px; line-height:20px; }
.dd-handle { display:block; height:30px; margin:5px 0; padding:5px 10px; color:#333; text-decoration:none; font-weight:700; border:1px solid #ccc; background:#fafafa; border-radius:3px; box-sizing:border-box; }
.dd-list .dd3-content {
	display: flex;
	font-weight: normal;
	background: rgb(var(--bs-success-rgb), .18);
	padding: 0;
}
.dd-list .dd3-content .dd-texto {
	display: flex;
	flex: 1;
	padding: 8px;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}
.dd3-content .actions, .card-header .actions {
	flex: 0 1 auto;
	padding: 9px 10px 2px 9px;
	text-align: right;
	margin-top: -4px;
	white-space: nowrap;
}
.dd-list .dd3-handle:before {
	content: "\ec40";
	font-family: remixicon;
	font-size: 20px;
	font-weight: 200;
	color: var(--bs-success);
}
.dd-list .dd3-content, .dd-list .dd-item .dd-handle, .dd-list .dd-item button { height: 38px !important; }
.dd-empty { display: none; }

/* FOTOS */
.fotos_list { overflow: hidden; }
.fotos_list .foto_placeholder { background: repeating-linear-gradient(45deg, #EAEAEA, #EAEAEA 10px, #EEEEEE 10px, #EEEEEE 20px); }
.fotos_list > div { position:relative; overflow:hidden; width:200px; height:auto; float:left; border-radius:10px; margin:8px; }
.thumb-img { border-radius: 2px; overflow: hidden; width: 100%; }

/* ════════════════════════════════════════════════════════════════
   COMPATIBILIDAD BOOTSTRAP 4 → 5  +  CLASES GABALA FALTANTES
   ════════════════════════════════════════════════════════════════ */

/* ── Espaciado / flexbox (BS5 → BS4) ────────────────────── */
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem  !important; }
.gap-3 { gap: 1rem   !important; }
.gap-4 { gap: 1.5rem !important; }
.text-end   { text-align: right !important; }
.float-end  { float: right !important; }
.ms-auto    { margin-left: auto !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem  !important; }
.me-3 { margin-right: 1rem   !important; }
.me-4 { margin-right: 1.5rem !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem  !important; }
.ms-3 { margin-left: 1rem   !important; }
.ms-4 { margin-left: 1.5rem !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }
.fw-normal   { font-weight: 400 !important; }
.flex-fill   { flex: 1 1 auto !important; }
.d-grid      { display: grid !important; }

/* ── Gutters de fila (BS5 → BS4) ────────────────────────── */
.row.g-2 { margin-right: -8px;  margin-left: -8px;  }
.row.g-2 > [class*="col"] { padding-right: 8px;  padding-left: 8px;  margin-bottom: 16px; }
.row.g-3 { margin-right: -12px; margin-left: -12px; }
.row.g-3 > [class*="col"] { padding-right: 12px; padding-left: 12px; margin-bottom: 24px; }

/* ── Formulario select (BS5 → BS4) ──────────────────────── */
.form-select {
    display: block; width: 100%;
    height: calc(1.5em + .9rem + 2px);
    padding: .45rem 1.9rem .45rem .9rem;
    font-size: .9rem; font-weight: 400; line-height: 1.5;
    color: #495057; background-color: #fff;
    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 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
    border: 1px solid #dee2e6; border-radius: .25rem;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.form-select:focus { border-color: #80cfee; outline: 0; box-shadow: 0 0 0 .2rem rgba(0,174,239,.25); }
.form-select-sm { padding: .25rem 1.75rem .25rem .5rem; font-size: .8rem; height: auto; }
.form-select[multiple] { background-image: none; height: auto; }

/* ── Form-check (BS5 compatible en BS4) ─────────────────── */
/* En BS4 form-check-input tiene position:absolute; lo reseteamos en flex */
.d-flex > .form-check-input,
label.d-flex .form-check-input,
.d-flex .form-check-input { position: static !important; margin: 0 !important; }

/* Form-switch (BS5 → BS4 fallback) */
.form-switch { padding-left: 2.5em; }
.form-switch .form-check-input {
    width: 2em; margin-left: -2.5em; border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e");
    background-position: left center; background-repeat: no-repeat; background-size: contain;
    transition: background-position .15s ease-in-out;
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ── Avatar / caja de icono ──────────────────────────────── */
.avatar-xs { height: 1.5rem;  width: 1.5rem; }
.avatar-sm { height: 2.5rem;  width: 2.5rem; }
.avatar-md { height: 3.5rem;  width: 3.5rem; }
.avatar-lg { height: 5rem;    width: 5rem; }
.avatar-title {
    align-items: center; display: flex; font-weight: 600;
    height: 100%; justify-content: center; width: 100%;
    color: #fff; border-radius: .25rem;
}

/* ── Colores "soft" (fondo suave + texto de color) ──────── */
.bg-soft-primary   { background-color: rgba(0,174,239,.15)   !important; }
.bg-soft-success   { background-color: rgba(10,207,151,.15)  !important; }
.bg-soft-warning   { background-color: rgba(255,188, 64,.15) !important; }
.bg-soft-danger    { background-color: rgba(250, 92,124,.15) !important; }
.bg-soft-info      { background-color: rgba(57, 175,209,.15) !important; }
.bg-soft-secondary { background-color: rgba(108,117,125,.15) !important; }
.text-primary   { color: #00aeef !important; }
.text-success   { color: #0acf97 !important; }
.text-warning   { color: #e5a13a !important; }
.text-danger    { color: #fa5c7c !important; }

/* ── Botones "soft" ─────────────────────────────────────── */
.btn-soft-primary   { color: #00aeef; background: rgba(0,174,239,.15);   border: 1px solid transparent; }
.btn-soft-primary:hover   { color: #fff; background: #00aeef; }
.btn-soft-secondary { color: #6c757d; background: rgba(108,117,125,.12); border: 1px solid transparent; }
.btn-soft-secondary:hover { color: #fff; background: #6c757d; }
.btn-soft-success   { color: #0acf97; background: rgba(10,207,151,.15);  border: 1px solid transparent; }
.btn-soft-success:hover   { color: #fff; background: #0acf97; }
.btn-soft-warning   { color: #e5a13a; background: rgba(255,188,64,.15);  border: 1px solid transparent; }
.btn-soft-warning:hover   { color: #fff; background: #e5a13a; }
.btn-soft-danger    { color: #fa5c7c; background: rgba(250,92,124,.15);  border: 1px solid transparent; }
.btn-soft-danger:hover    { color: #fff; background: #fa5c7c; }

/* ── Badges "soft" ──────────────────────────────────────── */
.badge-soft-primary   { color: #00aeef !important; background-color: rgba(0,174,239,.15)   !important; }
.badge-soft-secondary { color: #6c757d !important; background-color: rgba(108,117,125,.12) !important; }
.badge-soft-success   { color: #0acf97 !important; background-color: rgba(10,207,151,.15)  !important; }
.badge-soft-warning   { color: #c27c00 !important; background-color: rgba(255,188,64,.18)  !important; }
.badge-soft-danger    { color: #fa5c7c !important; background-color: rgba(250,92,124,.15)  !important; }

/* ── bg-opacity (BS5 → BS4) ─────────────────────────────── */
.bg-primary.bg-opacity-10 { background-color: rgba(0,174,239,.12)  !important; }
.bg-success.bg-opacity-10 { background-color: rgba(10,207,151,.12) !important; }
.bg-warning.bg-opacity-10 { background-color: rgba(255,188,64,.12) !important; }
.bg-danger.bg-opacity-10  { background-color: rgba(250,92,124,.12) !important; }

/* ── Tamaños de fuente ──────────────────────────────────── */
.font-10 { font-size: 10px !important; }
.font-12 { font-size: 12px !important; }
.font-13 { font-size: 13px !important; }
.font-14 { font-size: 14px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.font-20 { font-size: 20px !important; }
.font-24 { font-size: 24px !important; }

/* ── Utilidades de texto / tabla ────────────────────────── */
.header-title {
    font-size: .85rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #323a46; margin-bottom: 0;
}
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.waves-effect  { cursor: pointer; }

/* ─── SIDEBAR: ítem activo ──────────────────────────────────── */
#side-menu > li > a.active,
#side-menu > li.menuitem-active > a {
    color: #00aeef !important;
    background-color: rgba(0,174,239,.1);
    border-radius: 3px;
}
#side-menu > li > a.active i,
#side-menu > li.menuitem-active > a i {
    color: #00aeef !important;
}

/* Oculta caret de Bootstrap en dropdowns del topbar (usamos iconos propios) */
.navbar-custom .nav-user .dropdown-toggle::after { display: none; }
.navbar-custom .topbar-empresa-btn.dropdown-toggle::after { display: none; }

/* ─── DASHBOARD: stat cards ────────────────────────────────── */
.stat-card-icon {
    width: 48px; height: 48px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}

/* ─── TABLA: mejoras visuales ──────────────────────────────── */
.table thead th { border-top: 0; font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.table td { vertical-align: middle; }
.table-sm td, .table-sm th { padding: .4rem .75rem; }

/* ─── CARD HEADER ──────────────────────────────────────────── */
.card-header { font-weight: 600; font-size: .85rem; }

/* ─── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0; margin: 0; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; }

/* ─── BADGES mejorados ─────────────────────────────────────── */
.badge { font-size: .75rem; font-weight: 500; padding: .3em .6em; }
.badge-soft-primary, .badge-soft-secondary, .badge-soft-success,
.badge-soft-warning, .badge-soft-danger { border-radius: 10rem !important; padding: .3em .75em !important; }

/* ─── PORTAL empleado: cabecera azul ────────────────────────── */
.portal-header { background: #00aeef !important; }

/* ─── PORTAL: tarjetas de documentos ───────────────────────── */
.card.border-warning { border-width: 2px !important; }

/* ─── SELECT2 dentro del topbar ────────────────────────────── */
.navbar-custom .select2-container--default .select2-selection--single {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

/* RESPONSIVE */
@media (min-width: 992px) {
	html[data-layout-mode=two-column] .content-page { margin-left: calc(70px + 240px); }
}
@media (max-width: 991.98px) {
	.content-page, html[data-sidebar-size=condensed] .content-page { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 767.98px) {
	.card-body { padding: 1.5rem 1rem; }
	.sin-card-margin { margin-left: -1rem; margin-right: -1rem; }
}

/* PROCESO POR PASOS (iconos circulares) */
.process-steps { position: relative; margin: 0 0 40px; list-style: none; }
.process-steps li { position: relative; text-align: center; overflow: hidden; margin-bottom: 20px; }
.i-style, .i-bordered, .i-plain {
	--cnvs-i-size: 3.25rem;
	display: inline-block;
	width: var(--cnvs-i-size) !important;
	height: var(--cnvs-i-size) !important;
	line-height: var(--cnvs-i-size) !important;
	background-color: var(--bs-gray-800);
	text-align: center !important;
	font-size: calc(var(--cnvs-i-size) / 2.666666);
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
}
ul.process-steps li a {
	border: 1px solid var(--bs-primary);
	background-color: var(--bs-white);
	color: var(--bs-primary);
	transition: all 0.3s ease;
}
ul.process-steps li a:hover {
	background-color: var(--bs-primary);
	color: #ffffff;
}
span.activo { background-color: var(--bs-primary); color: var(--bs-white); cursor: default; }
span.sinacceso {
	background-color: var(--bs-white);
	color: rgba(var(--bs-emphasis-color-rgb), 0.5);
	border: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.5);
	cursor: not-allowed;
}
@media (min-width: 575.98px) {
	.process-steps li::before, .process-steps li::after {
		content: "";
		position: absolute;
		top: 30px;
		left: 0;
		width: 50%;
		border-top: 1px dashed var(--bs-gray-300);
	}
	.process-steps li::after { left: auto; right: 0; }
	.process-steps li:first-child::before, .process-steps li:last-child::after { display: none; }
}

/* ── Agrupación de usuarios por rol ──────────────────────── */
#tabla_usuarios td {
    padding: .7rem 1rem !important;
    vertical-align: middle !important;
}
#tabla_usuarios tr.grupo-inicio td {
    border-top: 2px solid #dee2e6 !important;
    padding-top: 2.5rem !important;
}
#tabla_usuarios tr.grupo-inicio td[data-grupo] {
    position: relative;
}
#tabla_usuarios tr.grupo-inicio td[data-grupo]::before {
    content: attr(data-grupo);
    position: absolute;
    top: .6rem;
    left: 1rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    white-space: nowrap;
}
#tabla_usuarios tr:first-child.grupo-inicio td {
    border-top: none !important;
    padding-top: 1.5rem !important;
}
/* Ocultar controles DataTables innecesarios para tabla pequeña */
#tabla_usuarios_wrapper .dataTables_length,
#tabla_usuarios_wrapper .dataTables_info,
#tabla_usuarios_wrapper .dataTables_paginate,
#tabla_usuarios_wrapper .dataTables_filter {
    display: none !important;
}