@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

* {
	box-sizing: border-box;
	/* Padding y borde no incrementan el ancho */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

:root {
	--color-body: #ffffff;
	--color-text: #1d1c1c;
	--color-primary: #fb2434;
	--color-secondary: #4592f9;
	--color-tertiary: #ffabce;
	--color-accent: #ffbf3c;
	--color-clear: #ffffff;
	--color-blue: #87c1ef;
	--color-steel-blue: #17719e;
	--color-dark-blue: #1c5eb4;
	--color-yellow: #ffbf3c;
	--color-pink: #eb457f;
	--color-pink-light: #ffabce;
	--color-green: #77c562;
	--color-green-light: #c6d82d;
	--color-orange: #ff9c45;
	--color-purple: #cb92ee;
	--color-white: #ffffff;
	--color-gray: #666565;
	--color-link: var(--color-secondary);
	--color-bg-gray: #f2f2f2;
	--color-bg-menu: #ffffff;
	--color-cyan: #00ffff;
	--color-black: #1d1c1c;
	--color-success: #198754;
	--color-info: #0dcaf0;
	--color-warning: #ffc107;
	--color-danger: #dc3545;

	--base-color-primary: 251, 36, 52;
	--base-color-secondary: 69, 146, 249;
	--base-color-tertiary: 255, 171, 206;
	--base-color-accent: 255, 191, 60;

	/* TEXT */
	--text-color-primary: var(--color-primary);
	--text-color-secondary: var(--color-secondary);
	--text-color-accent: var(--color-accent);
	--text-color-general: var(--color-text);

	/* TEXT HEADERS */
	--text-color-h1: var(--color-primary);
	--text-color-h2: var(--color-secondary);
	--text-color-h3: var(--color-accent);
	--text-color-h4: var(--color-text);
	--text-color-h5: var(--color-text);
	--text-color-h6: var(--color-text);
	--text-color-p: var(--color-text);
	--text-color-body: var(--color-white);
	--text-color-icon: var(--color-steel-blue);

	/* TEXT COLORS */
	--text-color-gray: var(--color-gray);
	--text-color-menu: var(--color-menu);
	--text-color-clear: var(--color-clear);
	--text-color-blue: var(--color-blue);
	--text-color-dark-blue: var(--color-dark-blue);
	--text-color-yellow: var(--color-yellow);
	--text-color-pink: var(--color-pink);
	--text-color-pink-light: var(--color-pink-light);
	--text-color-green: var(--color-green);
	--text-color-green-light: var(--color-green-light);
	--text-color-orange: var(--color-orange);
	--text-color-purple: var(--color-purple);
	--text-color-white: var(--color-white);
	--text-color-link: var(--color-link);
	--text-color-black: var(--color-black);
	--text-color-danger: var(--color-danger);
	--text-color-success: var(--color-success);
	--text-color-info: var(--color-info);
	--text-color-warning: var(--color-warning);
	--text-color-loading: var(--color-primary);

	--text-color-icon-alert-danger: var(--color-danger);
	--text-color-icon-alert-success: var(--color-success);
	--text-color-icon-alert-info: var(--color-info);
	--text-color-icon-alert-warning: var(--color-warning);
	--text-color-icon-badge: var(--color-white);

	/* TEXT FORMS */
	--text-color-label: var(--color-text);
	--text-color-label-focus: var(--color-primary);
	--text-color-input: var(--color-text);
	--text-color-textarea: var(--color-text);
	--text-color-placeholder: var(--color-gray);
	--text-color-input-help: var(--color-gray);
	--text-color-danger-hover: var(--color-danger);
	--text-color-alert-success: var(--color-cyan);
	--text-color-alert-danger: var(--color-danger);
	--text-color-pagination: var(--color-black);

	--text-color-table-header: var(--color-primary);
	--bg-color-table-header: var(--color-white);
	--text-color-table-row: var(--color-text);
	--bg-color-table-row: var(--color-white);
	--text-color-table-action: var(--color-secondary);
	--text-color-list: var(--color-text);
	--text-color-card-muted: var(--color-gray);

	/* BACKGROUND */
	--bg-color-primary: var(--color-primary);
	--bg-color-secondary: var(--color-secondary);
	--bg-color-success: var(--color-success);
	--bg-color-accent: var(--color-accent);
	--bg-color-card: var(--color-white);

	/* SELECT2 */
	--select2-background-hover: var(--color-primary);
	--select2-background: var(--color-white);
	--select2-border: var(--color-gray);
	--select2-text: var(--color-text);

	/* BORDER */
	--border-color-primary: var(--color-primary);
	--border-color-secondary: var(--color-secondary);
	--border-color-tertiary: var(--color-tertiary);
	--border-color-accent: var(--color-accent);

	/* SELECT 2 */
	--tags-select2-background: var(--color-accent);
	--tags-select2-border: var(--color-accent);
	--tags-select2-text: var(--color-black);

	/* SHADOW */
	--shadow-color-primary: var(--color-primary);
	--shadow-color-secondary: var(--color-secondary);
	--shadow-color-tertiary: var(--color-tertiary);

	/* SCROLLBAR */
	--scrollbar-color: var(--color-primary);
	--scrollbar-track-color: var(--color-secondary);
	--scrollbar-thumb-color: var(--color-accent);
	--scrollbar-thumb-hover-color: var(--color-primary);

	/* FOOTER */
	--bg-footer-color: var(--color-primary);
	--text-footer-color: var(--text-color-clear);

	/* NAVBAR */
	--bg-navbar-color: var(--color-white);
	--text-navbar-color: var(--color-black);
	--text-navbar-color-hover: var(--color-primary);

	--bg-navbar-submenu-color: var(--color-white);
	--text-navbar-submenu-color: var(--color-black);
	--text-navbar-submenu-color-hover: var(--color-primary);

	--underline-navbar-color: var(--color-accent);

	/* MODAL */
	--bg-modal: var(--color-white);
	--text-modal-color: var(--color-text);
	--border-modal-color: var(--color-accent);
	--text-modal-title-color: var(--color-text);
	--bg-modal-btn-close: var(--color-primary);
	--text-modal-btn-close: var(--color-white);
	--bg-modal-btn-close-hover: var(--color-accent);
	--text-modal-btn-close-hover: var(--color-black);
	--bg-modal-btn-accept: var(--color-primary);
	--text-modal-btn-accept: var(--color-white);
	--bg-modal-btn-accept-hover: var(--color-accent);
	--text-modal-btn-accept-hover: var(--color-black);
	--bg-modal-btn-cancel: var(--color-accent);
	--text-modal-btn-cancel: var(--color-black);
	--bg-modal-btn-cancel-hover: var(--color-primary);
	--text-modal-btn-cancel-hover: var(--color-white);

	--font-body: Roboto, Helvetica Neue, Helvetica, sans-serif;
	--font-headers: "Montserrat", Helvetica Neue, Helvetica, sans-serif;
	--border-width: 3px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-body: #1d1c1c;
		--color-text: #ffffff;
		--color-clear: #ffffff;
		--color-bg-menu: #1d1c1c;
		--color-tertiary: #4e2e3b;

		--bg-navbar-color: var(--color-body);
		--bg-color-table-header: var(--color-black);
		--bg-navbar-submenu-color: var(--color-black);
		--bg-color-table-row: var(--color-black);
		--bg-modal: var(--color-black);

		--text-color-h1: var(--color-white);
		--text-color-h2: var(--color-white);
		--text-color-h3: var(--color-white);
		--text-color-h4: var(--color-white);
		--text-color-h5: var(--color-white);
		--text-color-h6: var(--color-white);
		--text-color-p: var(--color-white);
		--text-color-body: var(--color-white);
		--text-color-link: var(--color-white);
		--text-color-icon: var(--color-accent);
		--text-color-table-header: var(--color-white);
		--text-color-input: var(--color-white);
		--text-color-pagination: var(--color-white);
		--text-modal-color: var(--color-white);

		--text-navbar-color: var(--color-white);
		--text-navbar-submenu-color: var(--color-white);

		--select2-background-hover: var(--color-primary);
		--select2-background: var(--color-black);
		--select2-border: var(--color-black);
		--select2-text: var(--color-white);

		--bg-color-card: var(--color-black);
	}
}

[data-theme="dark"] {

	--color-body: #1d1c1c;
	--color-text: #ffffff;
	--color-clear: #ffffff;
	--color-bg-menu: #1d1c1c;
	--color-tertiary: #4e2e3b;

	--bg-navbar-color: var(--color-body);
	--bg-color-table-header: var(--color-black);
	--bg-navbar-submenu-color: var(--color-black);
	--bg-color-table-row: var(--color-black);
	--bg-modal: var(--color-black);

	--text-color-h1: var(--color-white);
	--text-color-h2: var(--color-white);
	--text-color-h3: var(--color-white);
	--text-color-h4: var(--color-white);
	--text-color-h5: var(--color-white);
	--text-color-h6: var(--color-white);
	--text-color-p: var(--color-white);
	--text-color-body: var(--color-white);
	--text-color-link: var(--color-white);
	--text-color-icon: var(--color-accent);
	--text-color-table-header: var(--color-white);
	--text-color-input: var(--color-white);
	--text-color-pagination: var(--color-white);
	--text-modal-color: var(--color-white);

	--text-navbar-color: var(--color-white);
	--text-navbar-submenu-color: var(--color-white);

	--select2-background-hover: var(--color-primary);
	--select2-background: var(--color-black);
	--select2-border: var(--color-black);
	--select2-text: var(--color-white);

	--bg-color-card: var(--color-black);
}


body {
	color: var(--color-body);
	background-color: var(--color-body) !important;
	font-family: var(--font-body);
	font-weight: 200;
	background-image: url('../img/bg_main.png'), url('../img/bg_point.png');
	background-repeat: no-repeat, repeat;
	background-size: cover, auto;
	background-position: center 50px, initial;
	background-attachment: fixed;
	padding-bottom: 80px;
}

body.clear {
	color: var(--color-body);
	background-color: #ffffff;
	font-family: var(--font-body);
	font-weight: 200;
	background-image: url('../img/bg-main-clear.jpg'), url('../img/bg_point.png');
	background-repeat: no-repeat, repeat;
	background-size: cover, auto;
	background-position: center 50px, initial;
	background-attachment: fixed;
	padding-bottom: 80px;
}

.text-color-body {
	color: var(--text-color-body) !important;
}

.text-color-general {
	color: var(--text-color-body) !important;
}

.text-color-primary {
	color: var(--text-color-primary) !important;
}

.text-color-secondary {
	color: var(--text-color-secondary) !important;
}

.text-color-accent {
	color: var(--text-color-accent) !important;
}

.text-color-clear {
	color: var(--text-color-clear) !important;
}

.text-color-blue {
	color: var(--text-color-blue) !important;
}

.text-color-dark-blue {
	color: var(--text-color-dark-blue) !important;
}

.text-color-yellow {
	color: var(--text-color-yellow) !important;
}

.text-color-pink {
	color: var(--text-color-pink) !important;
}

.text-color-pink-light {
	color: var(--text-color-pink-light) !important;
}

.text-color-green {
	color: var(--text-color-green) !important;
}

.text-color-green-light {
	color: var(--text-color-green-light) !important;
}

.text-color-orange {
	color: var(--text-color-orange) !important;
}

.text-color-purple {
	color: var(--text-color-purple) !important;
}

.text-color-link {
	color: var(--text-color-link) !important;
}

.text-color-gray {
	color: var(--text-color-gray) !important;
}

.text-color-black {
	color: var(--text-color-black) !important;
}

.text-color-menu {
	color: var(--text-color-menu) !important;
}

.text-color-danger {
	color: var(--text-color-danger) !important;
}

.text-color-danger-hover {
	color: var(--text-color-danger-hover) !important;
}

.text-color-label {
	color: var(--text-color-label) !important;
}

.text-color-label:focus {
	color: var(--text-color-label-focus) !important;
}

.text-color-placeholder::placeholder {
	color: var(--text-color-placeholder);
}

.text-color-input-help {
	color: var(--text-color-input-help);
}

.text-color-list {
	color: var(--text-color-list) !important;
}

.bg-color-body {
	background-color: var(--bg-color-body) !important;
}

.bg-color-text {
	background-color: var(--bg-color-text) !important;
}

.bg-color-primary {
	background-color: var(--bg-color-primary) !important;
}

.bg-color-secondary {
	background-color: var(--bg-color-secondary) !important;
}

.bg-color-accent {
	background-color: var(--bg-color-accent) !important;
}

.bg-color-clear {
	background-color: var(--bg-color-clear) !important;
}

.bg-color-blue {
	background-color: var(--bg-color-blue) !important;
}

.bg-color-dark-blue {
	background-color: var(--bg-color-dark-blue) !important;
}

.bg-color-yellow {
	background-color: var(--bg-color-yellow) !important;
}

.bg-color-pink {
	background-color: var(--bg-color-pink) !important;
}

.bg-color-pink-light {
	background-color: var(--bg-color-pink-light) !important;
}

.bg-color-green {
	background-color: var(--bg-color-green) !important;
}

.bg-color-green-light {
	background-color: var(--bg-color-green-light) !important;
}

.bg-color-orange {
	background-color: var(--bg-color-orange) !important;
}

.bg-color-purple {
	background-color: var(--bg-color-purple) !important;
}

.bg-color-link {
	background-color: var(--bg-color-link) !important;
}

.bg-color-gray {
	background-color: var(--bg-color-gray) !important;
}

.bg-color-menu {
	background-color: var(--bg-color-menu) !important;
}

.bg-color-danger {
	background-color: var(--bg-color-danger) !important;
}

.bg-color-danger-hover {
	background-color: var(--bg-color-danger-hover) !important;
}

.bg-color-footer {
	background-color: var(--bg-footer-color) !important;
}


h1 {
	font-weight: 700;
	font-family: var(--font-headers);
	line-height: 0.9em;
	color: var(--text-color-h1) !important;
	font-size: 1.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

h2 {
	font-weight: 600;
	font-size: 26px;
	font-family: var(--font-headers);
	color: var(--text-color-h2) !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

h3 {
	font-size: 1.5rem;
	margin-top: 20px;
	font-weight: 600;
	font-family: var(--font-headers);
	color: var(--text-color-h3) !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

h4 {
	font-family: var(--font-headers);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--text-color-h4) !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

h5 {
	font-family: var(--font-headers);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--text-color-h5) !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

h6 {
	font-family: var(--font-headers);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--text-color-h6) !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

p {
	font-size: 1.1rem;
	font-weight: 300;
	color: var(--text-color-p) !important;
}

a {
	color: var(--text-color-body);
}

a:link {
	color: var(--text-color-link);
	text-decoration: none;

}

a:visited {
	color: var(--text-color-link);
	text-decoration: none;

}

a:hover {
	color: var(--text-color-link);
	text-decoration: underline;
}

.z-0 {
	z-index: 0;
}

.z-9 {
	z-index: 9;
}

.text-small {
	font-size: 13px;
}

.page-item .page-link {
	box-shadow: none;
}

.page-item .page-link.number {
	z-index: 3;
	color: var(--text-color-primary);
	background-color: var(--bg-color-secondary);
	border-left-color: var(--border-color-primary);
	border-right-color: var(--border-color-primary);
	border-top-color: var(--border-color-secondary);
	border-bottom-color: var(--border-color-secondary);
	text-decoration: none;
}

.active>.page-link,
.page-item .page-link.number.active {
	z-index: 3;
	color: var(--text-color-secondary) !important;
	background-color: var(--bg-color-primary) !important;
	border-color: var(--color-dark-blue) !important;
	text-decoration: none;
}

.page-item .page-link.prev,
.page-item .page-link.next {
	cursor: pointer;
	background-color: var(--bg-color-secondary);
	color: var(--text-color-primary);
	border-color: var(--border-color-secondary);
}

.page-item.disabled .page-link {
	opacity: 0.65;
}

/*HEADER*/

header#header_nav {
	background-color: var(--bg-navbar-color);
	border-bottom: 1px solid var(--border-color-tertiary);
	position: fixed;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	top: 0;
	z-index: 999;
	box-shadow: 0px 5px 10px 0px var(--shadow-color-tertiary);
}

header#header_nav .logo {
	margin-left: 15px;
	margin-top: 3px;
	width: 85px;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;

}

[data-theme="dark"] header#header_nav .logo {
	content: url('../img/logo_blanco.png');
}

header#header_nav.hdr-small .logo {
	margin-left: 15px;
	margin-top: 8px;
	width: 65px;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

/* change header */

header#header_nav.hdr-small {
	background-color: var(--bg-navbar-color);
	padding: 0;
	height: 52px;
}

header#header_nav.hdr-small .toggle-button {
	top: 4px;
}

header#header_nav.hdr-small nav.main {
	top: 52px;
}

/* end change header */

/*NAV*/

nav.main {
	display: none;
	background-color: var(--bg-color-primary);
	position: absolute;
	top: 70px;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow: visible !important;
}

nav.main ul {
	padding-left: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 0;
	margin-left: 9px;
}

nav.main ul li {
	list-style-type: none;
	font-weight: 300;
	position: relative;
	display: block;
	height: auto;
	padding: 5px 0;
}

nav.main ul li a {
	color: var(--text-color-primary);
}

nav.main ul li .submenu {
	display: none;
	position: relative;
	top: 100%;
	left: 0;
	background: var(--bg-navbar-submenu-color);
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	min-width: 180px;
	z-index: 1000;
	white-space: nowrap;
	/* Evita que los elementos del submenú se rompan en varias líneas */
	padding: 0;

}

/* Estilo de los subítems */
nav.main ul li .submenu li {
	display: block;
	height: auto;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-color-primary);
	transition: border-color 0.3s ease;
}

nav.main ul li .submenu li:hover {
	border-bottom-color: var(--border-color-accent);
	transition: border-color 0.3s ease;
}

nav.main ul li .submenu li a {
	color: var(--text-navbar-submenu-color);
	text-decoration: none;
	font-weight: 400;
	display: block;
	font-size: 14px;
}

nav.main ul li .submenu li a:hover {
	color: var(--text-navbar-submenu-color-hover);
}

/* Mostrar el submenú al hacer hover sobre Backoffice */
nav.main ul li.dropdown:hover .submenu {
	display: block;
}


/* Eliminar la línea del último elemento */
nav.main ul li .submenu li:last-child {
	border-bottom: none;
}

/*FOOTER*/

footer {
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 40px;
	width: 100%;
}

footer p {
	font-size: 0.9em;
	padding: 0;
	margin: 0;
}

footer .logo {
	margin: 0 5px;
	vertical-align: top;
}

footer.p-fixed {
	position: fixed;
	bottom: 0;
	margin-top: auto;
}

.menu-transition {
	cursor: pointer;
	display: block;
}

.hamburger-lines {
	height: 22px;
	width: 30px;
	position: absolute;
	top: 24px;
	right: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hamburger-lines .line {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--bg-color-primary);
}

.hamburger-lines .line1 {
	transform-origin: 0% 0%;
	transition: transform 0.4s ease-in-out;
}

.hamburger-lines .line2 {
	transition: transform 0.2s ease-in-out;
}

.hamburger-lines .line3 {
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;
}

.checkbox {
	display: none;
}

input[type="checkbox"]:checked~.hamburger-lines .line1 {
	transform: rotate(45deg);
}

input[type="checkbox"]:checked~.hamburger-lines .line2 {
	transform: scaleY(0);
}

input[type="checkbox"]:checked~.hamburger-lines .line3 {
	transform: rotate(-45deg);
}

.hdr-small .hamburger-lines {
	top: 12px !important;
}

/* -- CONTENIDO -- */

section.top {
	margin-top: 100px;
}

section.top-mobile {
	margin-top: 90px;
}

.bi {
	vertical-align: middle;
	margin-right: 6px;
	font-size: 0.85em;
	color: var(--text-color-icon);
}

h1.inicio {
	font-size: 1.6rem;
	font-weight: 400;
}

h1.inicio span {
	color: var(--color-secondary);
	font-weight: 600;
}

.ico-perfil {
	font-size: 2em;
	vertical-align: middle;
	margin-right: 10px;
}

.item-perfil {
	color: var(--text-color-clear);
}

.cerrar-sesion {
	cursor: pointer;
	font-size: 1.4em;
	vertical-align: middle;
	margin-left: 10px;
}

.arrow-misc-btn {
	width: 11px;
	vertical-align: text-top;
	margin: 0 5px;
}

.table-auto {
	width: auto;
}

.box-pdf a {
	background-color: var(--bg-color-primary);
	border-radius: 8px;
	color: var(--text-color-accent);
	display: inline-block;
	text-align: center;
	padding: 20px;
	width: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.box-pdf a:hover {
	text-decoration: none;
	background-color: var(--bg-color-primary);
	transform: translateY(-5px);
	box-shadow: 0 4px 15px var(--shadow-color-tertiary);
	/* Glow blanco suave */
	opacity: 0.9;
}

.box-pdf h3 {
	font-size: 1.2em;
	margin-top: 20px;
}

.box-pdf .ico {
	width: 160px;
}

/* Resumen mensual - cards */
.resumen-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--color-bg-menu);
	border: 1px solid var(--border-color-primary);
	border-radius: 12px;
	padding: 18px 20px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resumen-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(var(--base-color-primary), 0.15);
}

.resumen-card__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background-color: rgba(var(--base-color-primary), 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.resumen-card__icon i {
	font-size: 1.6rem;
	color: var(--color-primary);
}

.resumen-card__body {
	flex: 1;
	min-width: 0;
}

.resumen-card__mes {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resumen-card__badge {
	font-size: 0.75rem;
	color: var(--color-gray);
}

.resumen-card__action {
	flex-shrink: 0;
	color: var(--color-secondary);
	font-size: 1.2rem;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.resumen-card:hover .resumen-card__action {
	opacity: 1;
}

.box-icono-inicio a {
	display: inline-block;
	width: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}


.box-icono-inicio a:hover {
	text-decoration: none;
	transform: translateY(-5px);
	box-shadow: 0 4px 15px var(--shadow-color-tertiary);
	/* Glow blanco suave */
}

.separador-top {
	border-top: 1px solid var(--border-color-primary);
}

.txt-perfil {
	color: var(--text-color-primary);
}

.txt-perfil .tit-perfil {
	color: var(--text-color-general);
	font-weight: 500;
}

.content-datos {
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	color: var(--text-color-clear);
	display: inline-block;

	padding: 20px 20px 10px;
	width: 100%;
}

/* Inicio - stat cards (ahorro + distribución) */
.inicio-stat-card {
	display: flex;
	align-items: center;
	gap: 16px;
	border-radius: 14px;
	padding: 20px 24px;
	height: 100%;
}

.inicio-stat-card--ahorro {
	background-color: var(--color-accent);
}

.inicio-stat-card--dist {
	background-color: var(--color-dark-blue);
}

.inicio-stat-card__icon {
	flex-shrink: 0;
	font-size: 2.2rem;
	line-height: 1;
}

.inicio-stat-card--ahorro .inicio-stat-card__icon {
	color: var(--color-dark-blue);
}

.inicio-stat-card--dist .inicio-stat-card__icon {
	color: var(--color-accent);
}

.inicio-stat-card__body {
	flex: 1;
}

.inicio-stat-card__label {
	margin: 0 0 4px;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.inicio-stat-card--ahorro .inicio-stat-card__label {
	color: var(--color-dark-blue);
}

.inicio-stat-card--dist .inicio-stat-card__label {
	color: rgba(255, 255, 255, 0.7);
}

.inicio-stat-card__value {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
}

.inicio-stat-card--ahorro .inicio-stat-card__value {
	color: var(--color-dark-blue);
}

.inicio-stat-card--dist .inicio-stat-card__value {
	color: var(--color-accent);
}

/* Inicio - nav cards (menú) */
.inicio-nav-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: var(--color-bg-menu);
	border: 1px solid var(--border-color-primary);
	border-radius: 12px;
	padding: 14px 16px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	width: 100%;
}

.inicio-nav-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(var(--base-color-primary), 0.12);
	border-color: var(--color-primary);
	text-decoration: none;
}

.inicio-nav-card__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background-color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.inicio-nav-card__icon .material-symbols-outlined {
	font-size: 24px;
	color: #fff;
}

.inicio-nav-card__label {
	flex: 1;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--color-text);
}

.inicio-nav-card__arrow {
	flex-shrink: 0;
	color: var(--color-gray);
	font-size: 0.85rem;
	transition: transform 0.2s ease;
}

.inicio-nav-card:hover .inicio-nav-card__arrow {
	transform: translateX(3px);
	color: var(--color-primary);
}

.row.menu-iconos {
	margin-left: 0px;
	margin-right: 0px;
}

.menu-iconos .cont-icono {
	background-color: var(--color-primary);
	text-align: center;
	border-radius: 5px;
	width: 100%;
	/* O usa un valor fijo si prefieres */
	aspect-ratio: 1/1;
	/* Mantiene la proporción cuadrada */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.menu-iconos .cont-icono .material-symbols-outlined {
	font-size: 32px;
	color: var(--text-color-clear);
}

.menu-iconos .txt {
	font-weight: 400;
	font-size: 0.75em;
	color: var(--text-color-clear);
	text-transform: uppercase;
	text-align: center;
	margin-top: 10px;
}

.cont-bateria {
	background-color: var(--color-yellow);
	margin-top: 6rem;
	border-radius: 10px;
	padding-bottom: 20px;
}

.distribucion .row {
	padding-left: 10px;
	padding-right: 10px;
}

.cont-bateria img {
	width: 70%;
	margin-top: -5rem;
}

.cont-bateria h2 {
	text-transform: uppercase;
	font-size: 1.2em;
}

.cont-bateria h3 {
	font-size: 2.6em;
	margin: 0;
	line-height: 0.9em;
}

strong,
.strong {
	font-weight: 600;
}

hr.hr-1-w {
	margin: 1rem 0;
	border: 0;
	border-top: 1px solid var(--border-color-tertiary);
	opacity: .25;
}

/* Forms */

input.form-control,
input.form-control:focus,
input.form-control:focus-visible {
	color: var(--text-color-input);
	background-color: transparent !important;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--border-color-primary);
}

input:-webkit-autofill {
	color: var(--text-color-input) !important;
	/* Color del texto */
	-webkit-text-fill-color: var(--text-color-input) !important;
	/* Hace que el texto sea blanco */
	transition: background-color 5000s ease-in-out 0s;
	/* Asegura que el color se mantenga */
}

.form-floating input:focus~label,
.form-floating select:focus~label {
	color: var(--text-color-label-focus);
	opacity: 1 !important;
}

/* Bootstrap 5: el label del select dentro de form-floating siempre flota */
.form-floating > select.form-select ~ label {
	opacity: 0.65;
	transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating i.icon {
	position: absolute;
	right: 10px;
	/* Ajusta la posición horizontal */
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2em;
	/* Tamaño del icono */
	color: var(--text-color-clear);
	/* pointer-events: none; */
}

.filtro-fecha label {
	font-size: 0.9em;
	margin-bottom: 5px;
}

select.form-select {
	font-size: 0.9em;
	color: var(--text-color-input);
	background-color: transparent !important;
	border-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid var(--border-color-primary);
	padding: .56rem .75rem;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	cursor: pointer;

	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffbf3c"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px;
	padding-right: 30px;
	/* Espacio para la flecha */
}

/* Opciones dentro del select */
.form-select option {
	background-color: var(--bg-color-card);
	color: var(--text-color-input);
	cursor: pointer;
}

textarea.form-control {
	font-size: 0.9em;
	color: var(--text-color-textarea) !important;
	background-color: transparent !important;
	border: 1px solid var(--border-color-primary);
	border-radius: 5px;
	padding: .56rem .75rem;
}

.filtro-fecha input.form-control {
	font-size: 0.9em;
	border: 1px solid var(--border-color-primary);
	border-radius: 5px;
	padding: .56rem .75rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(72%) sepia(57%) saturate(400%) hue-rotate(0deg);
	transform: scale(1.3);
	/* Aumenta el tamaño del icono */
}

form label {
	color: var(--text-color-label) !important;
	margin-bottom: 5px;
	background-color: transparent !important;
}

form label::after {
	background-color: transparent !important;
}

.input-group .input-group-text {
	background-color: transparent !important;
	border-color: var(--border-color-primary);
}

.msg-error {
	color: red;
	text-align: center;
}

.msg-success {
	color: var(--text-color-alert-success);
	text-align: center;
}

.form-abm .col-12:has(select) {
	border-bottom: 1px solid var(--border-color-tertiary);
	padding-bottom: 20px;
}

.form-abm .no-floating input::placeholder {
	color: var(--text-color-placeholder) !important;
	/* Fuerza el color */
	opacity: 1;
	/* Asegura que el color se vea bien */
}

.form-abm .no-floating textarea::placeholder {
	color: var(--text-color-placeholder) !important;
	/* También para textareas */
	opacity: 1;
}

.form-abm .no-floating label {
	margin-bottom: 0;
}

.range-output {
	color: var(--text-color-clear);
	font-weight: 500;
	margin-left: 10px;
}

/* PAGINADOR */
.page-item.disabled .page-link {
	border-color: var(--border-color-accent);
	background-color: var(--bg-color-accent);
	color: var(--text-color-input);
	opacity: 0.5;
}

.page-item.active .page-link {
	border-color: var(--border-color-primary) !important;
	background-color: var(--bg-color-primary) !important;
	color: var(--text-color-input) !important;
}

.page-item .page-link {
	border-color: var(--border-color-primary) !important;
	background-color: transparent !important;
	color: var(--text-color-input) !important;
}

.page-item .page-link:hover {
	background-color: var(--bg-color-accent) !important;
	color: var(--text-color-input) !important;
}

#detalle-table_info {
	color: var(--text-color-pagination);
}

.card .card-body {
	background-color: var(--bg-color-card);
}

.card .card-body .text-muted {
	color: var(--text-color-card-muted) !important;
}

/* TABLAS */

.td-truncate {
	max-width: 140px;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.td-truncate-sm {
	max-width: 90px;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.table {
	border-color: var(--border-color-primary) !important;
}

.table-custom {
	border-bottom: 2px solid var(--color-yellow);
	border-radius: 5px;
}

.table-custom tbody tr:hover,
.table-hover > tbody > tr:hover > * {
	color: var(--text-color-table-row) !important;
}

.table-custom thead tr th {
	color: var(--text-color-table-header);
	background-color: var(--bg-color-table-header) !important;
}

.table-custom tbody tr td {
	color: var(--text-color-table-row) !important;
	background-color: var(--bg-color-table-row) !important;
}

.table-custom tfoot tr td {
	color: var(--text-color-table-row);
	background-color: var(--bg-color-table-row) !important;
}

.table-custom th,
.table-custom td {
	border-bottom: 1px solid var(--border-color-primary);
	font-size: 0.9em;
}

.table-custom-lg th,
.table-custom-lg td {
	color: var(--text-color-clear);
	border-bottom: 1px solid var(--border-color-primary);
	font-size: 1.1em;
}

.tabla-r-back th {
	white-space: nowrap;
}

.tabla-r-back td {
	white-space: nowrap;
	overflow: visible;
	vertical-align: middle;
}

.tabla-r-back td.td-multiline {
	white-space: normal;
}

.tabla-r-back th i,
.tabla-r-back td i {
	font-size: 1.2em;
}

div.dt-container div.dt-search {
	min-width: 300px;
}

div.dt-container div.dt-search input {
	width: 100% !important;
}

/* Reset botones */

.btn-primary.btn-custom {
	background-color: var(--bg-color-primary);
	border: 0;
	color: var(--text-color-white);
	text-transform: uppercase;
	min-width: 150px;
	font-weight: 500;
	font-size: 15px;
	padding: 10px 20px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 3px;
}

.btn-primary .bi {
	color: var(--text-color-white);
}

.btn-primary.btn-custom:hover {
	background-color: var(--bg-color-accent);
	color: var(--text-color-black);
	text-decoration: none;
}

.btn-primary:hover .bi {
	color: var(--text-color-black);
}

.btn-primary.btn-custom:not(:disabled):not(.disabled).active,
.btn-primary.btn-custom:not(:disabled):not(.disabled):active,
.show>.btn-primary.btn-custom.dropdown-toggle {
	background-color: #797878;
}

.btn-secondary.btn-custom {
	background-color: var(--bg-color-secondary);
	border: 0;
	color: var(--text-color-white);
	text-transform: uppercase;
	min-width: 150px;
	padding: 0.7em;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.btn-secondary.btn-custom .bi {
	color: var(--text-color-white);
}

.btn-secondary.btn-custom:hover {
	background-color: var(--bg-color-accent) !important;
	color: var(--text-color-black) !important;
	text-decoration: none;
}

.btn-secondary.btn-custom:hover .bi {
	color: var(--text-color-black);
}

.btn-success.btn-custom {
	background-color: var(--bg-color-success);
	border: 0;
	color: var(--text-color-white);
	text-transform: uppercase;
	min-width: 150px;
	padding: 0.7em;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.btn-success.btn-custom .bi {
	color: var(--text-color-white);
}

.btn-success.btn-custom:hover {
	background-color: var(--bg-color-accent) !important;
	color: var(--text-color-black) !important;
}

.btn-success.btn-custom:hover .bi {
	color: var(--text-color-black);
}

.btn-outline-secondary.btn-custom {
	background-color: transparent;
	border: 1px solid var(--border-color-secondary);
	color: var(--text-color-secondary);
	text-transform: uppercase;
	min-width: 150px;
	padding: 0.7em;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.btn-outline-secondary.btn-custom .bi {
	color: var(--text-color-secondary);
}

.btn-outline-secondary.btn-custom:hover {
	background-color: var(--bg-color-accent) !important;
	border-color: var(--border-color-accent) !important;
	color: var(--text-color-black) !important;
	text-decoration: none;
}

.btn-outline-secondary.btn-custom:hover .bi {
	color: var(--text-color-black);
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
	color: #fff;
	background-color: #333;
	/* Reset Press Azul */
	outline: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

/* Reset Glow Azul*/

.form-control:focus,
.form-select:focus {
	color: var(--text-color-input);
	border-color: var(--border-color-accent) !important;
	background: transparent;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.form-control:focus label {
	color: var(--text-color-accent);
}

.form-check-input:checked {
	background-color: var(--bg-color-accent);
	border-color: var(--bg-color-accent);
}

.form-check-input:focus {
	border-color: var(--bg-color-accent);
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(var(--base-color-accent), .25);
}

/* ── Select2 overrides ─────────────────────────────────────────────────── */

/* Evita que el contenedor desborde la columna Bootstrap */
.select2-container {
	max-width: 100%;
	box-sizing: border-box;
}

.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
	background-color: transparent !important;
	border: 0;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	border-bottom: var(--border-color-primary) 1px solid !important;
	color: var(--text-color-black);
	font-size: 0.9em;
	min-height: 35px;
	padding: .4rem .75rem;
}

.select2-search .select2-container--default .select2-search--dropdown .select2-search__field {
	border-color: var(--border-color-primary);
}

.select2-dropdown {
	background-color: var(--select2-background) !important;
	border-color: var(--select2-border) !important;
	color: var(--select2-text) !important;
}

.select2-dropdown .select2-results__option {
	color: var(--select2-text) !important;
}

.select2-dropdown .select2-results__option:hover {
	background-color: var(--select2-background-hover) !important;
}

.select2-dropdown .select2-results__option--selected {
	background-color: var(--select2-background-hover) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--select2-background-hover) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text-color-input) !important;
}

.form-select option {
	background-color: var(--bg-color-card);
	color: var(--text-color-input);
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
	min-height: 68px !important;
}

#msg-loading {
  z-index: 9;
}

#msg-loading .text-primary {
  color: var(--text-color-loading) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50% !important;
	transform: translateY(-50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	padding: 2px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--tags-select2-background) !important;
	border-color: var(--tags-select2-border) !important;
	box-shadow: none;
	border-radius: 4px;
	font-size: 0.82em;
	padding: 2px 8px;
	margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice * {
	color: var(--tags-select2-text);
	text-shadow: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--text-color-secondary);
	opacity: 0.7;
	margin-right: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--text-color-secondary);
	opacity: 1;
	background: transparent;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
	color: var(--text-color-black);
	font-size: 0.9em;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--border-color-primary);
	border-radius: 0;
	color: var(--text-color-black);
	font-size: 0.9em;
	padding: .4rem .6rem;
}

.select2-results__option {
	color: var(--text-color-black);
	font-size: 0.9em;
	padding: .4rem .75rem;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--bg-color-primary);
	color: var(--text-color-secondary);
}

.select2-container--default .select2-results__option--selected {
	background-color: rgba(var(--base-color-primary), 0.12);
	color: var(--text-color-black);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--border-color-accent) !important;
	box-shadow: none !important;
	outline: none;
}

.select2-exclusive-error {
	color: var(--text-color-danger);
	font-size: 0.8em;
	margin-top: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background-color: var(--bg-color-clear);
}

/* ── Alerts ─────────────────────────────────────────────────────────── */

.alert.alert-success .bi {
  color: var(--text-color-icon-alert-success);
}

.alert.alert-danger .bi {
  color: var(--text-color-icon-alert-danger);
}

.alert.alert-warning .bi {
  color: var(--text-color-icon-alert-warning);
}

.alert.alert-info .bi {
  color: var(--text-color-icon-alert-info);
}

.badge .bi {
  color: var(--text-color-icon-badge);
}

.badge-todas {
	font-size: 0.75em;
	font-style: italic;
	opacity: 0.75;
}

.transition {
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

footer .logo.logo-footer {
	max-width: 200px;
}

footer.p-md-fixed {
	position: fixed;
	bottom: 0;
	margin-top: auto;
	background-color: var(--bg-footer-color);
}

footer .footer-text {
	color: var(--text-color-clear);
	font-weight: 400;
}

/****************************/
/* MEDIA QUERIES */
/****************************/

/* 768 */
@media screen and (min-width: 768px) {}

/* 992 */
@media screen and (min-width: 992px) {}

/* 1280 */
@media screen and (min-width: 1270px) {

	section.top {
		margin-top: 130px;
	}

	.toggle-button {
		display: none;
	}

	header#header_nav {
		height: 70px;
	}

	header#header_nav .logo {
		margin-left: 5px;
		margin-top: 6px;
		width: 90px;
		-webkit-transition: all 0.5s ease-in-out 0s;
		transition: all 0.5s ease-in-out 0s;
	}

	header#header_nav.hdr-small .logo {
		margin-left: 5px;
		margin-top: 8px;
		width: 75px;
		-webkit-transition: all 0.5s ease-in-out 0s;
		transition: all 0.5s ease-in-out 0s;
	}

	nav.main {
		position: relative;
		top: 0;
		background: transparent;
		display: block !important;
		overflow: hidden;
		padding-top: unset;
		padding-bottom: unset;
	}

	nav.main ul {
		margin-left: 0;
		padding-top: 2px;
		padding-bottom: 0;
	}

	nav.main ul li {
		font-size: 14px;
		height: unset;
		padding: 0;
	}

	nav.main>ul>li.nav_search,
	nav.main ul li.nav_user {
		display: block;
		margin-top: 0;
		margin-left: 12px;
		margin-right: 12px;
	}

	nav.main>ul>li>a {
		display: inline-block;
		padding: 4px 10px;
		border-bottom: 4px solid transparent;
		color: var(--text-navbar-color);
		font-weight: 300;
		position: relative;
	}

	nav.main>ul>li>a::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0%;
		height: 1px;
		background-color: var(--underline-navbar-color);
		transition: width 0.3s ease;
	}

	nav.main>ul>li>a:hover {
		color: var(--text-navbar-color-hover);
		text-decoration: none;
	}

	nav.main>ul>li>a:hover::after {
		width: 100%;
	}

	nav.main>ul>li.item-perfil {
		margin-left: 15px;
		padding-right: 10px;

	}

	nav.main>ul>li.item-perfil a {
		border-left: 1px solid var(--border-color-tertiary);
		padding-left: 30px;
	}

	header#header_nav.hdr-small nav.main {
		top: 0px;
	}

	header#header_nav.hdr-small nav.main>ul>li>a {
		padding: 0px 10px 0px;
	}

	nav.main ul li .submenu {
		position: absolute;
	}

	.w-arrow:before {
		margin-right: 12px;
		transform: scale(1);
		/* Reduce el tamaño al 70% */
	}

	.cerrar-sesion {
		margin-left: 0px;
	}

	h1.inicio {
		font-size: 2.5em;
	}

}

/* 1366 */
@media screen and (min-width: 1360px) {}

/* 1440 */
@media screen and (min-width: 1400px) {
	section.top {
		margin-top: 140px;
	}

	header#header_nav {
		height: 80px;
	}

	nav.main ul li {
		font-size: 16px;
		height: unset;
		padding: 0;
	}

	.menu-iconos .cont-icono .material-symbols-outlined {
		font-size: 40px;
	}

	.menu-iconos .txt {
		font-size: 0.9em;
	}

}


/* 1680 */
@media screen and (min-width: 1680px) {
	section.top {
		margin-top: 150px;
	}
}

#table-auditoria-container,
#form-container {
	display: none;
}

.btn-danger {
	border: 0;
	text-transform: uppercase;
	min-width: 150px;
	padding: 0.7em;
	font-weight: 500;
}

.border-primary {
	border-color: var(--border-color-primary) !important;
}

.table-responsive.tabla-r-back.mt-4 {
	overflow-x: auto;
}

/* Enhanced table-responsive with custom scrollbar */
.table-responsive {
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
	scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar {
	height: 12px;
}

.table-responsive::-webkit-scrollbar-track {
	background: var(--scrollbar-track-color);
	border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
	background: var(--scrollbar-color);
	border-radius: 10px;
	border: 2px solid var(--scrollbar-track-color);
}

.table-responsive::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover-color);
}

/* Custom table styling to work with Bootstrap */
.table-custom th {
	white-space: nowrap;
	min-width: 100px;
	padding: 2px 10px;
}

.table-custom td {
	white-space: nowrap;
	min-width: 80px;
	padding: 2px 10px;
}

.table-custom td.td-multiline {
	white-space: normal;
	min-width: 120px;
	max-width: 200px;
	word-break: break-word;
}

/* Currency columns alignment */
.table-custom td[data-currency="true"] {
	text-align: right;
	font-family: 'Courier New', monospace;
}

.paginacion-label {
	color: var(--text-color-clear);
	font-size: 0.9em;
}

@media screen and (max-width: 1270px) {
	#pagination-container {
		margin-bottom: 65px;
	}

	#pagination-container>div {
		align-items: start !important;
		flex-direction: column !important;
	}

	#pagination-container>div>div {
		margin: 10px 0 !important;
	}
}

input:-internal-autofill-selected {
	background-color: transparent !important;
}

.form-control:disabled {
	background-color: inherit;
	opacity: 0.5;
}

table #reclamos-table-body .consulta_abm_mesa_ayuda {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 200px;
}

/* Custom Modal Styles */
.modal-backdrop {
	background-color: rgba(var(--base-color-primary), 0.8) !important;
}

.modal-dialog {
	margin: 1.75rem auto;
}

.modal-content {
	background-color: var(--bg-modal);
	border: 2px solid var(--border-modal-color);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(var(--base-color-primary), 0.3);
}

.modal-header {
	background-color: var(--bg-modal);
	color: var(--text-modal-color);
	border-bottom: 2px solid var(--color-yellow);
	border-radius: 8px 8px 0 0;
	padding: 15px;
}

.modal-header .modal-title {
	font-family: var(--font-headers);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--text-modal-title-color);
}

.modal-header .btn-close {
	background: var(--bg-modal-btn-close) !important;
	background-image: none !important;
	border: none;
	color: var(--text-modal-btn-close) !important;
	font-size: 1.2rem;
	opacity: 1;
	filter: none;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-header .btn-close::after {
	content: "\2715";
	font-size: 1.2rem;
	line-height: 1;
	color: inherit;
}

.modal-header .btn-close:hover {
	background: var(--bg-modal-btn-close-hover) !important;
	background-image: none !important;
	color: var(--text-modal-btn-close-hover) !important;
	opacity: 0.8;
}

.modal-body {
	background-color: var(--bg-modal);
	color: var(--text-modal-color);
	padding: 2rem 1.5rem;
	font-size: 1.1rem;
	font-weight: 400;
	text-align: center;
}

.modal-body .form-label {
	font-size: 1rem;
	font-family: var(--font-body);
}

.modal-footer {
	background-color: var(--bg-modal);
	border-top: 1px solid var(--border-modal-color);
	border-radius: 0 0 8px 8px;
	padding: 1.5rem;
	justify-content: center;
	gap: 1rem;
}

.modal-footer .btn {
	min-width: 120px;
	padding: 0.75rem 1.5rem;
	font-weight: 500;
	text-transform: uppercase;
	border-radius: 5px;
	font-size: 0.9rem;
	background-color: var(--bg-modal-btn-accept);
	color: var(--text-modal-btn-accept);
}

.modal-footer .btn:hover {
	background-color: var(--bg-modal-btn-accept-hover) !important;
	color: var(--text-modal-btn-accept-hover);
}

.modal-footer .btn-secondary {
	background-color: var(--bg-modal-btn-cancel);
	color: var(--text-modal-btn-cancel);
}

.modal-footer .btn-secondary:hover {
	background-color: var(--bg-modal-btn-cancel-hover) !important;
	color: var(--text-modal-btn-cancel-hover);
}

.modal-body .form-control,
.modal-body .form-select {
	font-size: 14px;
}

.modal-body .form-select:focus {
	border-color: var(--border-modal-color) !important;
}

/* ── Field tooltip icon ───────────────────────────────────────────────────── */

.field-with-tip {
	position: relative;
}

.field-tip {
	position: absolute;
	top: 0px;
	right: 18px;
	font-size: 0.72rem;
	color: var(--text-color-secondary);
	cursor: pointer;
	z-index: 999;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.field-tip:hover {
	opacity: 1;
}