:root {
--header-bg-color: #ffffff;
--header-icon-color: #b19662;
--header-txtcolor: #0e1e32;
--sidebar-bg-color: #000000;
--sidebar-linkcolor: #aeb8c6;
--sidebar-icon-color: #8fa4ba;
--submenu-bg-color: #586069;
--submenu-linkcolor: #f0f1f3;
--main-bg-color: #f7f5ef;
--main-txtcolor: #0e1e32;
--main-title-bg: #ffffff;
--main-title-txtcolor: #0e1e32;
--footer-bg-color: #132641;
--bottomsidebar-bg-color: #000000;
--bottomsidebar-txtcolor: #aeb8c6;
}
/* ===== PaySay Light — mapea las 14 vars del JSON ===== */
:root {
	/* JSON -> internas (con fallback) */
	--sidebar-bg-color: linear-gradient(165deg, rgba(16, 28, 46, 0.7) 0%, rgba(24, 44, 70, 0.52) 45%, rgba(8, 16, 28, 0.78) 100%);


	/* ===== Extras SOLO en CSS (no JSON) ===== */
	/* Superficies (equivalentes a tu dark: surface-1/2/3) */
	--surface-1: #ffffff;
	/* cards / tablas */
	--surface-2: #fbf8f1;
	/* headers internos de tabla / chips suaves */
	--surface-3: white !important;
	/* zebra */

	/* Bordes/sombras suaves en Light */
	--line: rgba(14, 30, 50, .10);
	--line-strong: rgba(14, 30, 50, .16);
	--elev-1:  0 28px 55px rgba(14, 30, 50, 0.14);
	--elev-in: inset 0 0 0 1px rgba(14, 30, 50, .06);

	/* Paleta dorados/arena (acento PaySay) */
	--champagne: #e8cfa1;
	--sand-200: #f6e7c3;
	--sand-400: #d7b87a;
	--sand-500: #c89a4c;

	/* Estados */
	--primary: #0e7490;
	/* azul verdoso suave para links/filtros */
	--success: #1f8f55;
	--warning: #b7791f;
	--danger: #c24141;


	/* Tipografía */
	--font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/* ===== Base ===== */
html,
body {
	background: var(--main-bg-color);
	color: var(--main-txtcolor);
	font-family: var(--font-sans);
	height: 100%;
}

/* ===== Breadcrumb ===== */

.navbar>.container-fluid{
}

.header .navbar-brand {
	display: flex;
	top: 100px;
}


.header .navbar-brand img{
	position: absolute;
	top: 10px;
	width: 220px;
	height: auto;
	left: -240px;
}
.main .breadcrumb {
	background: transparent;
	color: #6b7280;
	border-bottom: 1px solid var(--sand-400);
	border-radius: 10px;
}

.main .breadcrumb a {
	color: var(--primary);
	text-decoration: none;
}

.main .breadcrumb a:hover {
	text-decoration: underline;
}

/* ===== Cards / contenedores ===== */
.box-content,
.card,
.card-body {
	background: var(--surface-1);
	border-radius: 0 0 16px 16px;
	box-shadow: var(--elev-1);
}

.card-body {
	padding: 16px;
}

/* ===== Títulos / headers internos ===== */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 4px;
	margin-bottom: 8px;
}

.section-title {
	font-weight: 700;
	color: var(--main-title-txtcolor);
}

/* ===== Inputs ===== */
.form-control,
.form-select,
.input-group-text {
	background: #ffffff;
	color: var(--main-txtcolor);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--elev-in);
}

.form-control::placeholder {
	color: #9aa3af;
}

.form-control:focus,
.form-select:focus {
	outline: none;
	border-color: rgba(14, 116, 144, .35);
	box-shadow: 0 0 0 3px rgba(14, 116, 144, .18);
}

/* ===== Botones ===== */
.btn {
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #ffffff;
	color: #374151;
	font-weight: 600;
}

.btn-ghost {
	background: #fff;
	border: 1px solid var(--line);
}

.btn-ghost:hover {
	background: #f8fafc;
}

/* Botón dorado (primario) estilo PaySay */
.btn-primary {
	background: linear-gradient(135deg, #f0d9a1 0%, #d5b676 35%, #c29a55 65%, #ad7e39 100%);
	color: #ffffff;
	border-color: rgba(255, 255, 255, .28);
	box-shadow: 0 15px 35px rgba(177, 150, 98, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.btn-primary:hover {
	filter: brightness(.98);
	transform: translateY(-1px);
	border-color: transparent;
}

/* ===== Listas ===== */
.list-group {
	background: var(--surface-1);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.list-group-item {
	background: var(--surface-1);
	border-color: var(--line);
}

/* ===== Tablas (zebra clara + hover) ===== */
.table {
	color: var(--main-txtcolor);
	background: var(--surface-1);
	border: 1px solid var(--line);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
 }

.table thead th {
	background: rgba(177, 150, 98, 0.2) !important;
	color: #374151;
	font-weight: 700;
}

.table thead th:first-child {
	border-top-left-radius: 12px;
}

.table thead th:last-child {
	border-top-right-radius: 12px;
}

.table td,
.table th {
	border-color: var(--line);
	vertical-align: middle;
	border-bottom: 1px solid rgba(177, 150, 98, 0.1);
	box-shadow: none;

}

.table-striped>tbody>tr:nth-of-type(odd)>* {
	background-color: var(--surface-3);
}

.table-hover>tbody>tr:hover>* {
	background: rgba(177, 150, 98, 0.05);
}

/* Badges estilo chips (success/warning/danger) */
.table .badge {
	background: rgba(255, 193, 7, 0.2) !important;
    color: #856404 !important;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    margin-left: auto;
}

.main h2{
	font-weight: 900;
}

.main-admin .table_title {
	padding-left: 0;
	padding-right: 0;
	border-bottom: solid 3px (var(--main-title-bg)*2);
	border-radius: 26px 26px 0 0;
}
.main-admin .table_title span{
	width: 100%;
	font-family: "Inter", sans-serif;
    font-weight: 600;
	font-size: 1.25rem;
	border-bottom: 1px solid rgba(177, 150, 98, 0.1);

}



/* ===== Paginación ===== */
div.dataTables_wrapper div.dataTables_paginate li.page-item,
div.dataTables_wrapper div.dataTables_paginate li.page-item a {
	background: #ffffff;
	color: #374151;
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--elev-1);
	font-weight: 700;
}

div.dataTables_wrapper div.dataTables_paginate li.page-item.active a {
	color: #0e1e32;
    background: linear-gradient(135deg, #f3dfba 0%, #d7b87a 40%, #c49e58 100%);
    box-shadow: 0 16px 32px rgba(177, 150, 98, 0.45);
    border-color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {

	.container-fluid .main {
		margin-left: 266px;
		width: calc(98vw - 250px) !important;
	}

	.fixed-top{
		left: 250px;
	}
}

/* ===== Sidebar ===== */
.sidebar {
	color: var(--sidebar-linkcolor);
	backdrop-filter: blur(24px);
	box-shadow: rgba(10, 20, 35, 0.16) 18px 0px 40px;
	z-index: 1000;
	background: var(--sidebar-bg-color) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
	width: 250px;
	padding-left: 1rem;
	padding-right: 1rem;

}

.sidebar .nav-link {
	z-index: 0;
	padding: 1rem 5rem;
	color: rgba(255, 255, 255, 0.78);
	text-shadow: none;
	border-radius: 14px;
	margin-bottom: 0.6rem;
	backdrop-filter: blur(10px);
	border: 1px solid transparent;
}


.sidebar .navbar-nav{
	width: 100%;
	border-top: none;
}

#chatToggle i {
	color: #b19662 !important;
}

.sidebar .nav-link, .sidebar .collapse .nav-link {
	transition: all 0.3s ease;
}

.sidebar .nav-link:hover, .sidebar .collapse .nav-link:hover {
	transform: translateX(8px);
	border-color: rgba(177, 150, 98, 0.55);
	box-shadow: 0 14px 30px rgba(8, 16, 28, 0.28);
	color: #ffffff;
}

.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"],
a.nav-link.active {
	position: relative;
	background: linear-gradient(135deg, #f3dfba 0%, #d7b87a 40%, #c49e58 100%);
	color: #0e1e32;
	box-shadow: 0 16px 32px rgba(177, 150, 98, .28);
	background-color: red;
}

#logout_li .nav-link:hover{
	background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.sidebar .nav-item:hover{
	background: none;
}


/* Submenús */
.sidebar .collapse ,
.sidebar .collapsing {
	width: 100%;
}

.sidebar .collapse .nav-link {
	color: var(--submenu-linkcolor);
}

@media (min-width: 768px) {
    .sidebar {
        top: -40px;
        bottom: 25px;
		padding-top: 120px;
    }
}



/* ===== Header (glass suave) ===== */
.header {
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: var(--header-txtcolor);
	box-shadow: inset 0 -1px 0 var(--line);
}

.header .nav-item i,
.fa-layer-group {
	color: var(--header-icon-color);
}

/* ===== Footer ===== */
.footer {
	background: var(--footer-bg-color);
	color: var(--footer-txtcolor);
	border-top: 1px solid rgba(213, 185, 118, .6);
}

/* ===== Varios ===== */
a {
	color: var(--primary);
}

a:hover {
	text-decoration: none;
}