@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600;6..96,700&family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------
   2. VARIABLES CSS
   Consolida todos los valores hardcodeados de los 4 archivos.
   Nueva variable añadida: --vio / --vio-l  (violeta, sólo en EC)
---------------------------------------------------------------- */
:root {
	/* — Esmeralda (recaudación) — */
	--esm: #B99239; /* color de marca principal */
	--esm-dark: #A38132; /* borde inferior th */
	--esm-deep: #8A6A20; /* texto amount / subtotal */
	--esm-l: #FAF3E2; /* fondo subtotal / highlight-bg */
	--esm-xl: #FDF9F0; /* fondo cliente-vip */
	--esm-mid: #FEFBF6; /* fondo cliente-alto */

	/* — Azul marino (UAFE / EC) — */
	--ink: #1D2024;
	--ink-7: #292D33;
	--ink-6: #3A4048;
	--ink-4: #6B727C;
	--ink-1: #CFD3D9;
	--ink-0: #F6F5F2;

	/* — Neutros — */
	--g0: #F6F5F2;
	--g1: #EEEFF1;
	--g2: #E3E1DC;
	--g3: #E5E7EB;
	--g4: #8F959E;
	--g6: #4E555F;
	--g8: #292D33;
	--blanco: #FFFFFF;

	/* — Semáforo — */
	--amb: #AF580E;
	--amb-l: #F7EADE;
	--cor: #B3453C;
	--cor-l: #F7E9E8;
	--vio: #6B5B95; /* violeta — KPI EC */
	--vio-l: #F0EEF4;

	/* — Texto — */
	--txt-dark: #1D2024;
	--txt-mid: #4E555F;
	--txt-soft: #6B727C;

	/* — Tipografía — */
	--font-body: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
	--font-head: 'Bodoni Moda', 'Times New Roman', serif;

	/* — Forma y sombra — */
	--r: 10px;
	--r-lg: 14px;
	--sh-sm: 0 1px 3px rgba(13, 27, 42, .08), 0 1px 2px rgba(13, 27, 42, .04);
	--sh-md: 0 4px 16px rgba(13, 27, 42, .10);

	/* gradiente boton success/exportar */
	--dark-green: #8A6A20;
	--light-green: #B99239;

	/* sacado de variables FP */

	--azul-900: #0B1E3D;
	--azul-800: #112A52;
	--azul-700: #1A3D6E;
	--azul-600: #1E5096;
	--azul-400: #3B82C4;
	--azul-100: #DBE9F7;
	--azul-50: #F0F6FD;
	--dorado: #F0A500;
	--dorado-l: #FDC93B;
	--verde: #3E7C5B;
	--verde-l: #ECF2EF;
	--rojo: #E84545;
	--rojo-l: #FCE0E0;
	--gris-200: #E8EDF4;
	--gris-500: #7A8BA6;
	--gris-700: #3D5068;
	--sombra-sm: 0 1px 4px rgba(11, 30, 61, .08);
	--sombra-md: 0 4px 20px rgba(11, 30, 61, .12);
	--radio: 10px;
	--radio-lg: 16px;
}

.app,
.app * {
	font-family: var(--font-body), sans-serif;
}

.rp-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 20px;
}

.rp-header .icon {
	width: 46px;
	height: 46px;
	border-radius: var(--r);
	background: linear-gradient(135deg, var(--ink-7), var(--ink-4));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--sh-md);
	flex-shrink: 0;
}

.rp-header .icon svg {
	width: 22px;
	height: 22px;
	stroke: #fff;
	fill: none;
	stroke-width: 2;
}

.rp-header .title {
	font-family: var(--font-head) sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.1;
}

.rp-header .sub {
	font-size: .76rem;
	color: var(--g4);
	margin-top: 3px;
}

/*cards*/

.card.rp {
	/*border-radius: 0 0 var(--r) var(--r);*/
	border-radius: var(--r);
}

.card.rp .card-header:not(.regular) {
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-7) 100%);
	padding: 12px 20px;
	/*display: flex;*/
	/*align-items: center;*/
	/*gap: 10px;*/
	/*flex-wrap: wrap;*/
	border-radius: var(--r) var(--r) 0 0;

	font-size: .82rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: .03em;
}

.card.rp .card-header.regular {
	background: initial !important;
	color: initial !important;
}

.card.rp .card-header h5 {
	margin-bottom: 0 !important;
}

.card.rp .card-footer {
	background: var(--ink-0);
	border-top: 1px solid var(--g2);
	gap: 8px;
	align-items: center;
}

/*botones*/

.rp .btn {
	border-radius: 7px;
	font-size: .78rem;
	font-weight: 600;
}

.rp .btn-primary {
	background: linear-gradient(135deg, var(--ink-7), var(--ink-4));
	color: #fff;
	box-shadow: 0 2px 8px rgba(27, 48, 80, .25);
}

.rp .nav-pills .nav-link.active,
.rp .nav-pills .show > .nav-link {
	background: linear-gradient(135deg, var(--ink-7), var(--ink-4)) !important;
	color: #fff !important;
}

.rp .btn-primary:hover {
	box-shadow: 0 4px 14px rgba(27, 48, 80, .35);
	transform: translateY(-1px);
	color: #fff;
}

.rp .btn-default {
	background: transparent;
	border: 1.5px solid var(--ink-4);
	color: var(--ink-6);
}

.rp .btn-default:hover {
	background: var(--ink-0);
}

.rp .btn-success {
	background: linear-gradient(135deg, #2F5F45, #3E7C5B);
	color: #fff;
	box-shadow: 0 2px 8px rgba(47, 95, 69, .24);
}

.rp .btn-success:hover {
	box-shadow: 0 4px 14px rgba(5, 150, 105, .35);
	transform: translateY(-1px);
	color: #fff;
}

.rp .btn-info {
	background: var(--ink-0);
	border: 1px solid var(--ink-1);
	color: var(--ink-6);
	transition: background .15s;
}

.rp .btn-info:hover {
	background: var(--ink-1);
}

.rp a {
	color: var(--ink-4);
	text-decoration: none;
	font-weight: 500; /* y esto?*/
}

.rp a:hover {
	text-decoration: underline; /* testing */
}

.rp a.btn:hover {
	text-decoration: none;
}

/* paginacion */

.rp .pagination {
	font-size: 0.625rem !important; /* ← 10px */
}

.rp .page-link {
	color: var(--ink-4) !important;
	/*border-radius: 0.5rem !important;*/
	padding: 0.35rem 0.65rem !important; /* botones más pequeños */
	min-width: 32px; /* ancho mínimo para números */
	text-align: center;
	font-weight: 600;
	border: 1px solid var(--ink-4);
}

.rp .page-link:hover {
	background: var(--ink-1) !important;
	color: var(--ink-7) !important;
	border-color: var(--ink-4) !important;
}

.rp .page-item.active .page-link {
	background-color: var(--ink-6) !important;
	border: 1px solid var(--ink);
	color: white !important;
	font-weight: 700;
}

.rp .page-item.disabled .page-link {
	color: var(--txt-mid) !important;
	border: 1px solid var(--ink);
	opacity: 0.5;
}

/* En móvil: hay que ver */
@media (max-width: 576px) {
	.rp .pagination {
		font-size: 0.625rem !important;
	}

	.rp .page-link {
		padding: 0.3rem 0.55rem !important;
		min-width: 28px;
	}
}

/* tablas */

.rp .table-striped {
	--bs-table-striped-bg: var(--ink-0) !important;
}

.rp .table-hover > tbody > tr:hover > * {
	/*--ins-table-color-state: var(--ins-table-hover-color);*/
	--ins-table-bg-state: var(--azul-100);
	/*--ins-table-bg-state:  rgb(from var(--ink-1) r g b / 50%); !* para bajar opacidad desde un var *!*/
}

.sublabel {
	font-size: .72rem !important;
	color: var(--g4) !important;
	font-weight: 600 !important;
}