/* ================================================================
   CIMENTA — Capa de marca
   ----------------------------------------------------------------
   Se carga DESPUES de inspinia, site.css y nuevoEstilo.css.
   Unico punto de verdad del color y la tipografia del sistema.

   No editar public/inspinia/css/* : esta hoja redefine las variables
   de la plantilla, de modo que Inspinia se puede actualizar sin
   perder la identidad.

   Identidad: grafito + oro.
   Firma visual: "la linea de cimentacion" — una regla de oro de 2px
   bajo cada titulo, cabecera de tarjeta y encabezado de tabla. El
   contenido descansa sobre su base. Es el nombre del producto hecho
   elemento de interfaz, y el unico lugar donde el oro se usa lleno.

   INDICE
    1. Tipografias
    2. Tokens de marca (--cim-*)
    3. Remapeo de variables Inspinia — modo claro
    4. Remapeo de variables Inspinia — modo oscuro
    5. Menu lateral y barra superior
    6. Tipografia aplicada
    7. FIRMA — la linea de cimentacion
    8. Botones
    9. Insignias, alertas y utilidades de color
   10. Tablas
   11. Formularios
   12. Tarjetas
   13. Compatibilidad con tokens heredados (--esm, --ink, --amb...)
   14. Acceso / login
   15. Paleta expuesta para graficos
   16. Accesibilidad y responsive
================================================================ */


/* ----------------------------------------------------------------
   1. TIPOGRAFIAS
   Bodoni Moda  — didone de alto contraste. Solo en titulos y cifras
                  grandes. Las escrituras publicas y los titulos de
                  propiedad se componen en serif de alto contraste;
                  el sistema convierte inmuebles en papeles.
   Inter Tight  — cuerpo e interfaz. Mas estrecha que Inter: gana
                  caracteres por linea en las tablas de cobranza.
   IBM Plex Mono— identificadores (cedula, RUC, codigo de inmueble,
                  numero de recibo) que se comparan caracter a caracter.
---------------------------------------------------------------- */
@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. TOKENS DE MARCA
---------------------------------------------------------------- */
:root {
	/* — Grafito: estructura, cromo, encabezados — */
	--cim-grafito-950: #15171A;
	--cim-grafito-900: #1D2024;
	--cim-grafito-800: #292D33;
	--cim-grafito-700: #3A4048;
	--cim-grafito-600: #4E555F;
	--cim-grafito-500: #6B727C;
	--cim-grafito-400: #8F959E;
	--cim-grafito-300: #AEB4BD;
	--cim-grafito-200: #CFD3D9;
	--cim-grafito-100: #E5E7EB;

	/* — Oro: acento. Se usa lleno solo en la linea de cimentacion,
	     el item activo del menu y el boton de accion principal. — */
	--cim-oro: #B99239;
	--cim-oro-claro: #D4AC57;
	--cim-oro-profundo: #8A6A20;   /* oro legible como texto sobre claro */
	--cim-oro-tenue: #FAF3E2;
	--cim-oro-rgb: 185, 146, 57;

	/* — Superficies — */
	--cim-hueso: #F6F5F2;                 /* area de trabajo */
	--cim-papel: #FFFFFF;                 /* tarjetas */
	--cim-linea: #E3E1DC;                 /* bordes */

	/* — Semanticas — */
	--cim-success: #3E7C5B;
	--cim-success-tenue: #ECF2EF;
	--cim-success-borde: #C1D5CB;
	--cim-success-texto: #356B4E;
	--cim-info: #3C6E8F;
	--cim-info-tenue: #ECF0F4;
	--cim-info-borde: #C1D1DB;
	--cim-info-texto: #345F7B;
	--cim-warning: #AF580E;
	--cim-warning-tenue: #F7EEE7;
	--cim-warning-borde: #E5CAB2;
	--cim-warning-texto: #964C0C;
	--cim-danger: #B3453C;
	--cim-danger-tenue: #F7ECEC;
	--cim-danger-borde: #E7C3C1;
	--cim-danger-texto: #9A3B34;
	--cim-purple: #6B5B95;
	--cim-purple-tenue: #F0EFF4;
	--cim-purple-borde: #D0CBDD;
	--cim-purple-texto: #5C4E80;

	/* — Tipografia — */
	--cim-fuente-titulo: 'Bodoni Moda', 'Times New Roman', serif;
	--cim-fuente-cuerpo: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
	--cim-fuente-id: 'IBM Plex Mono', ui-monospace, monospace;

	/* — Forma y sombra — */
	--cim-r-sm: 5px;
	--cim-r: 8px;
	--cim-r-lg: 12px;
	--cim-regla: 2px;                     /* grosor de la linea de cimentacion */
	--cim-sombra-sm: 0 1px 2px rgba(21, 23, 26, .06), 0 1px 3px rgba(21, 23, 26, .05);
	--cim-sombra: 0 2px 4px rgba(21, 23, 26, .05), 0 6px 16px rgba(21, 23, 26, .07);
	--cim-sombra-lg: 0 12px 32px rgba(21, 23, 26, .14);
}


/* ----------------------------------------------------------------
   3. VARIABLES INSPINIA — MODO CLARO
---------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
	--ins-primary: #1D2024;
	--ins-primary-rgb: 29, 32, 36;
	--ins-primary-text-emphasis: #191C1F;
	--ins-primary-bg-subtle: #E8E9E9;
	--ins-primary-border-subtle: #B7B8B9;
	--ins-secondary: #6A717B;
	--ins-secondary-rgb: 106, 113, 123;
	--ins-secondary-text-emphasis: #5B616A;
	--ins-secondary-bg-subtle: #F0F1F2;
	--ins-secondary-border-subtle: #CFD2D5;
	--ins-success: #3E7C5B;
	--ins-success-rgb: 62, 124, 91;
	--ins-success-text-emphasis: #356B4E;
	--ins-success-bg-subtle: #ECF2EF;
	--ins-success-border-subtle: #C1D5CB;
	--ins-info: #3C6E8F;
	--ins-info-rgb: 60, 110, 143;
	--ins-info-text-emphasis: #345F7B;
	--ins-info-bg-subtle: #ECF0F4;
	--ins-info-border-subtle: #C1D1DB;
	--ins-warning: #AF580E;
	--ins-warning-rgb: 175, 88, 14;
	--ins-warning-text-emphasis: #964C0C;
	--ins-warning-bg-subtle: #F7EEE7;
	--ins-warning-border-subtle: #E5CAB2;
	--ins-danger: #B3453C;
	--ins-danger-rgb: 179, 69, 60;
	--ins-danger-text-emphasis: #9A3B34;
	--ins-danger-bg-subtle: #F7ECEC;
	--ins-danger-border-subtle: #E7C3C1;
	--ins-purple: #6B5B95;
	--ins-purple-rgb: 107, 91, 149;
	--ins-purple-text-emphasis: #5C4E80;
	--ins-purple-bg-subtle: #F0EFF4;
	--ins-purple-border-subtle: #D0CBDD;
	--ins-dark: #1D2024;
	--ins-dark-rgb: 29, 32, 36;
	--ins-dark-text-emphasis: #191C1F;
	--ins-dark-bg-subtle: #E8E9E9;
	--ins-dark-border-subtle: #B7B8B9;
	--ins-light: #F6F5F2;
	--ins-light-rgb: 246, 245, 242;
	--ins-light-text-emphasis: #D4D3D0;
	--ins-light-bg-subtle: #FEFEFE;
	--ins-light-border-subtle: #FCFCFB;

	/* Cuerpo y bordes */
	--ins-body-bg: #F6F5F2;
	--ins-body-bg-rgb: 246, 245, 242;
	--ins-body-color: #292D33;
	--ins-body-color-rgb: 41, 45, 51;
	--ins-emphasis-color: #1D2024;
	--ins-secondary-color: #6B727C;
	--ins-secondary-color-rgb: 107, 114, 124;
	--ins-secondary-bg: #FFFFFF;
	--ins-tertiary-color: #8F959E;
	--ins-tertiary-bg: #F6F5F2;
	--ins-heading-color: #1D2024;
	--ins-border-color: #E3E1DC;
	--ins-border-color-translucent: #EDECE8;
	--ins-highlight-bg: #FAF3E2;
	--ins-highlight-color: #1D2024;
	--ins-code-color: #B3453C;

	/* Enlaces: oro profundo, el unico oro que pasa AA como texto */
	--ins-link-color: #8A6A20;
	--ins-link-color-rgb: 138, 106, 32;
	--ins-link-hover-color: #71571A;
	--ins-link-hover-color-rgb: 113, 87, 26;

	/* Foco visible: anillo de oro */
	--ins-focus-ring-width: 3px;
	--ins-focus-ring-opacity: .38;
	--ins-focus-ring-color: rgba(185, 146, 57, .38);

	/* Validacion */
	--ins-form-valid-color: #3E7C5B;
	--ins-form-valid-border-color: #3E7C5B;
	--ins-form-invalid-color: #B3453C;
	--ins-form-invalid-border-color: #B3453C;

	/* Tipografia y forma */
	--ins-font-sans-serif: var(--cim-fuente-cuerpo);
	--ins-font-monospace: var(--cim-fuente-id);
	--ins-body-font-family: var(--cim-fuente-cuerpo);
	--ins-body-font-size: .8125rem;
	--ins-border-radius: var(--cim-r);
	--ins-border-radius-sm: var(--cim-r-sm);
	--ins-border-radius-lg: var(--cim-r-lg);
	--ins-box-shadow: var(--cim-sombra-sm);
	--ins-box-shadow-sm: var(--cim-sombra-sm);
	--ins-box-shadow-lg: var(--cim-sombra-lg);
}


/* ----------------------------------------------------------------
   4. VARIABLES INSPINIA — MODO OSCURO
---------------------------------------------------------------- */
[data-bs-theme=dark] {
	--ins-primary: #D4AC57;
	--ins-primary-rgb: 212, 172, 87;
	--ins-primary-text-emphasis: #E6CF9E;
	--ins-primary-bg-subtle: #483A1E;
	--ins-primary-border-subtle: #7F6734;
	--ins-secondary: #6A717B;
	--ins-secondary-rgb: 106, 113, 123;
	--ins-secondary-text-emphasis: #A9ADB2;
	--ins-secondary-bg-subtle: #24262A;
	--ins-secondary-border-subtle: #40444A;
	--ins-success: #3E7C5B;
	--ins-success-rgb: 62, 124, 91;
	--ins-success-text-emphasis: #8FB3A0;
	--ins-success-bg-subtle: #152A1F;
	--ins-success-border-subtle: #254A37;
	--ins-info: #3C6E8F;
	--ins-info-rgb: 60, 110, 143;
	--ins-info-text-emphasis: #8EABBE;
	--ins-info-bg-subtle: #142531;
	--ins-info-border-subtle: #244256;
	--ins-warning: #AF580E;
	--ins-warning-rgb: 175, 88, 14;
	--ins-warning-text-emphasis: #D19E73;
	--ins-warning-bg-subtle: #3C1E05;
	--ins-warning-border-subtle: #693508;
	--ins-danger: #B3453C;
	--ins-danger-rgb: 179, 69, 60;
	--ins-danger-text-emphasis: #D3938E;
	--ins-danger-bg-subtle: #3D1714;
	--ins-danger-border-subtle: #6B2924;
	--ins-purple: #6B5B95;
	--ins-purple-rgb: 107, 91, 149;
	--ins-purple-text-emphasis: #A9A0C2;
	--ins-purple-bg-subtle: #241F33;
	--ins-purple-border-subtle: #403759;
	--ins-dark: #CFD3D9;
	--ins-dark-rgb: 207, 211, 217;
	--ins-dark-text-emphasis: #E3E5E9;
	--ins-dark-bg-subtle: #46484A;
	--ins-dark-border-subtle: #7C7F82;
	--ins-light: #292D33;
	--ins-light-rgb: 41, 45, 51;
	--ins-light-text-emphasis: #838589;
	--ins-light-bg-subtle: #0E0F11;
	--ins-light-border-subtle: #191B1F;

	--ins-body-bg: #15171A;
	--ins-body-bg-rgb: 21, 23, 26;
	--ins-body-color: #CFD3D9;
	--ins-body-color-rgb: 207, 211, 217;
	--ins-emphasis-color: #F6F5F2;
	--ins-secondary-color: #8F959E;
	--ins-secondary-bg: #1D2024;
	--ins-tertiary-color: #6B727C;
	--ins-tertiary-bg: #292D33;
	--ins-heading-color: #F6F5F2;
	--ins-border-color: #3A4048;
	--ins-border-color-translucent: #292D33;
	--ins-link-color: #D4AC57;
	--ins-link-color-rgb: 212, 172, 87;
	--ins-link-hover-color: #DEC07F;
	--ins-link-hover-color-rgb: 222, 192, 127;
	--ins-highlight-bg: #463716;
	--ins-highlight-color: #F6F5F2;
	--cim-hueso: #1D2024;
	--cim-papel: #1D2024;
	--cim-linea: #3A4048;
}


/* ----------------------------------------------------------------
   5. MENU LATERAL Y BARRA SUPERIOR
   El grafito vive aqui — es cromo, no contenido. El area de trabajo
   queda en hueso para poder leer tablas ocho horas seguidas.
---------------------------------------------------------------- */
html[data-menu-color=dark],
html[data-menu-color=gray],
html[data-menu-color=light],
html[data-bs-theme=dark][data-menu-color=dark],
html[data-bs-theme=dark][data-menu-color=gray],
html[data-bs-theme=dark][data-menu-color=light] {
	--ins-sidenav-bg: #15171A;
	--ins-sidenav-border-color: #292D33;
	--ins-sidenav-item-color: #AEB4BD;
	--ins-sidenav-item-hover-color: #F6F5F2;
	--ins-sidenav-item-hover-bg: #292D33;
	--ins-sidenav-item-active-color: #D4AC57;
	--ins-sidenav-item-active-bg: #1D2024;
}

/* Titulos de seccion del menu: versalitas espaciadas, en oro apagado */
.side-nav .side-nav-title {
	font-family: var(--cim-fuente-cuerpo);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #745E2C;
}

/* Item activo: plomada de oro en el canto izquierdo.
   Es el otro eje de la misma idea — la linea horizontal cimienta,
   la vertical aploma. */
.side-nav .side-nav-link {
	position: relative;
	border-radius: 0 var(--cim-r-sm) var(--cim-r-sm) 0;
}

.side-nav .side-nav-item.active > .side-nav-link::before,
.side-nav .side-nav-link.active::before,
.side-nav .side-nav-link[aria-expanded=true]::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 6px;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--cim-oro);
}

.side-nav .menu-icon i { transition: color .18s ease; }

.side-nav .side-nav-item.active > .side-nav-link .menu-icon i,
.side-nav .side-nav-link.active .menu-icon i { color: var(--cim-oro-claro); }

/* Marca del menu: sentada sobre su propia linea de cimentacion */
.sidenav-menu > a.logo {
	position: relative;
	padding-block: 6px;
}

.sidenav-menu > a.logo::after {
	content: "";
	position: absolute;
	inset-inline: 18px;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--cim-oro) 0%, rgba(185, 146, 57, 0) 82%);
}

/* Barra superior */
html[data-topbar-color=light],
html[data-topbar-color=gray],
html[data-topbar-color=dark] {
	--ins-topbar-bg: #FFFFFF;
	--ins-topbar-item-color: #4E555F;
	--ins-topbar-item-hover-color: #8A6A20;
	--ins-topbar-search-bg: #F6F5F2;
	--ins-topbar-search-border: #E3E1DC;
}

[data-bs-theme=dark] html[data-topbar-color=light],
[data-bs-theme=dark] html[data-topbar-color=gray],
html[data-bs-theme=dark] {
	--ins-topbar-bg: #1D2024;
	--ins-topbar-item-color: #AEB4BD;
	--ins-topbar-item-hover-color: #D4AC57;
}

.app-topbar { border-bottom: 1px solid var(--cim-linea); }

/* Nombre del proyecto activo en la barra: es el dato que orienta
   toda la sesion, asi que se marca con oro y no con peso tipografico */
#topbar-proyecto-nombre,
.selProyectoName {
	font-family: var(--cim-fuente-cuerpo);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--cim-oro-profundo);
}

[data-bs-theme=dark] #topbar-proyecto-nombre,
[data-bs-theme=dark] .selProyectoName { color: var(--cim-oro-claro); }


/* ----------------------------------------------------------------
   6. TIPOGRAFIA APLICADA
---------------------------------------------------------------- */
body {
	font-family: var(--cim-fuente-cuerpo);
	font-feature-settings: "cv05", "ss03";
	-webkit-font-smoothing: antialiased;
}

/* Bodoni solo en display. En cuerpo o tabla dañaria la lectura. */
h1, .h1, h2, .h2,
.cim-titulo,
.rp-header .title,
.uafe-page-hdr h1, .ec-hdr h1 {
	font-family: var(--cim-fuente-titulo);
	font-weight: 600;
	font-optical-sizing: auto;
	letter-spacing: -.005em;
	color: var(--ins-heading-color);
}

h1, .h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.15; }
h2, .h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.55rem); line-height: 1.2; }

/* h3-h6 y cabeceras de tarjeta se quedan en Inter Tight: son
   etiquetas de navegacion, no titulos de documento. */
h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.card-header, .card-title {
	font-family: var(--cim-fuente-cuerpo);
	font-weight: 600;
	letter-spacing: -.006em;
}

/* Antetitulo: versalita espaciada. Encabeza secciones sin gritar. */
.cim-antetitulo {
	font-family: var(--cim-fuente-cuerpo);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cim-oro-profundo);
}

[data-bs-theme=dark] .cim-antetitulo { color: var(--cim-oro-claro); }

/* Cifra de display — Bodoni con numeros tabulares para KPI grandes */
.cim-cifra {
	font-family: var(--cim-fuente-titulo);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	color: var(--ins-heading-color);
}

/* Identificadores: cedula, RUC, codigo de inmueble, No. de recibo.
   Monoespaciada porque se comparan caracter a caracter. */
.cim-id, .font-mono, code, kbd, samp {
	font-family: var(--cim-fuente-id);
	font-size: .95em;
	letter-spacing: -.01em;
}

/* Todo numero en tabla va tabular: las columnas de dinero deben
   alinearse en la coma sin que el ojo trabaje. */
table td, table th,
.minitabla td, .minitabla th,
.amount, .text-end, .cim-num { font-variant-numeric: tabular-nums; }


/* ----------------------------------------------------------------
   7. FIRMA — LA LINEA DE CIMENTACION
   Una regla de oro de 2px bajo el titulo de pagina y bajo cada
   cabecera de tarjeta y de tabla. Codifica jerarquia: el contenido
   descansa sobre su base. Es el unico uso de oro lleno en la
   interfaz, y por eso no se gasta en nada mas.
---------------------------------------------------------------- */

/* Cabecera de pagina */
.rp-header,
.uafe-page-hdr,
.ec-hdr,
.cim-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--cim-papel);
	border: 1px solid var(--cim-linea);
	border-radius: var(--cim-r) var(--cim-r) 0 0;
	border-bottom: 0;
	padding: 1.1rem 1.35rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--cim-sombra-sm);
}

.rp-header::after,
.uafe-page-hdr::after,
.ec-hdr::after,
.cim-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: var(--cim-regla);
	background: var(--cim-oro);
}

/* El icono de la cabecera: placa de grafito, como el isotipo */
.rp-header .icon,
.cim-header .icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--cim-grafito-900);
	color: var(--cim-oro-claro);
	box-shadow: inset 0 0 0 1px rgba(185, 146, 57, .32);
}

.rp-header .icon i,
.cim-header .icon i { color: var(--cim-oro-claro) !important; }

.rp-header .title,
.cim-header .title { font-size: 1.4rem; line-height: 1.2; }

.rp-header .sub,
.cim-header .sub {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--cim-grafito-500);
}

/* Cabecera de tarjeta: misma regla, a menor escala */
.card > .card-header {
	position: relative;
	background: var(--cim-papel);
	border-bottom: 1px solid var(--cim-linea);
	font-size: .9375rem;
	padding-block: .8rem;
}

.card > .card-header::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -1px;
	width: 46px;
	height: var(--cim-regla);
	background: var(--cim-oro);
}

/* Encabezado de tabla: grafito con la regla de oro al pie.
   Se excluyen las tablas de los modulos de reportes (.uafe-tabla,
   .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl): reportes.css se
   carga despues, dentro del <body>, y tiene su propio tratamiento de
   cabecera ya reapuntado a la paleta de marca. Pisarlo con !important
   destruiria ese diseño. */
.table:not(.uafe-tabla, .ec-tbl, .ec-modal-tbl, .rc-tbl, .rc-tabla, .fp-tabla, .tc-tbl, .rp-tbl) > thead > tr > th,
.minitabla:not(.uafe-tabla, .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl) > thead > tr > th,
.table-dark2 th {
	background: var(--cim-grafito-900) !important;
	color: #F6F5F2 !important;
	font-family: var(--cim-fuente-cuerpo);
	font-size: .6875rem !important;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-bottom: var(--cim-regla) solid var(--cim-oro) !important;
	vertical-align: middle;
}

/* thead .table-light: se respeta la intencion de cabecera suave,
   pero sigue apoyada en su linea */
.table:not(.uafe-tabla, .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl) > thead.table-light > tr > th,
.minitabla:not(.uafe-tabla, .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl) > thead.table-light > tr > th {
	background: var(--cim-hueso) !important;
	color: var(--cim-grafito-700) !important;
	border-bottom: var(--cim-regla) solid var(--cim-oro) !important;
}

[data-bs-theme=dark] .table:not(.uafe-tabla, .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl) > thead.table-light > tr > th,
[data-bs-theme=dark] .minitabla:not(.uafe-tabla, .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl) > thead.table-light > tr > th {
	background: var(--cim-grafito-800) !important;
	color: var(--cim-grafito-200) !important;
}


/* ----------------------------------------------------------------
   8. BOTONES
   btn-primary es grafito, no oro: aparece cientos de veces por
   pantalla y el oro dejaria de ser un acento. Lleva la linea de
   cimentacion como sombra interior, sin alterar su geometria al
   pasar el cursor.
---------------------------------------------------------------- */
.btn-primary {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #1D2024;
	--ins-btn-border-color: #1D2024;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #383B3E;
	--ins-btn-hover-border-color: #383B3E;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #2B2D31;
	--ins-btn-active-border-color: #2B2D31;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #1D2024;
	--ins-btn-disabled-border-color: #1D2024;
}

.btn-outline-primary {
	--ins-btn-color: #1D2024;
	--ins-btn-border-color: #939496;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #1D2024;
	--ins-btn-hover-border-color: #1D2024;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #2B2D31;
	--ins-btn-active-border-color: #2B2D31;
}

.btn-secondary {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #6A717B;
	--ins-btn-border-color: #6A717B;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #5F666F;
	--ins-btn-hover-border-color: #5F666F;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #595F67;
	--ins-btn-active-border-color: #595F67;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #6A717B;
	--ins-btn-disabled-border-color: #6A717B;
}

.btn-outline-secondary {
	--ins-btn-color: #6A717B;
	--ins-btn-border-color: #B7BBC0;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #6A717B;
	--ins-btn-hover-border-color: #6A717B;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #595F67;
	--ins-btn-active-border-color: #595F67;
}

.btn-success {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #3E7C5B;
	--ins-btn-border-color: #3E7C5B;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #387052;
	--ins-btn-hover-border-color: #387052;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #34684C;
	--ins-btn-active-border-color: #34684C;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #3E7C5B;
	--ins-btn-disabled-border-color: #3E7C5B;
}

.btn-outline-success {
	--ins-btn-color: #3E7C5B;
	--ins-btn-border-color: #A2C0B0;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #3E7C5B;
	--ins-btn-hover-border-color: #3E7C5B;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #34684C;
	--ins-btn-active-border-color: #34684C;
}

.btn-info {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #3C6E8F;
	--ins-btn-border-color: #3C6E8F;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #366381;
	--ins-btn-hover-border-color: #366381;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #325C78;
	--ins-btn-active-border-color: #325C78;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #3C6E8F;
	--ins-btn-disabled-border-color: #3C6E8F;
}

.btn-outline-info {
	--ins-btn-color: #3C6E8F;
	--ins-btn-border-color: #A1B9C9;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #3C6E8F;
	--ins-btn-hover-border-color: #3C6E8F;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #325C78;
	--ins-btn-active-border-color: #325C78;
}

.btn-warning {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #AF580E;
	--ins-btn-border-color: #AF580E;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #9E4F0D;
	--ins-btn-hover-border-color: #9E4F0D;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #934A0C;
	--ins-btn-active-border-color: #934A0C;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #AF580E;
	--ins-btn-disabled-border-color: #AF580E;
}

.btn-outline-warning {
	--ins-btn-color: #AF580E;
	--ins-btn-border-color: #D9AF8B;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #AF580E;
	--ins-btn-hover-border-color: #AF580E;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #934A0C;
	--ins-btn-active-border-color: #934A0C;
}

.btn-danger {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #B3453C;
	--ins-btn-border-color: #B3453C;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #A13E36;
	--ins-btn-hover-border-color: #A13E36;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #963A32;
	--ins-btn-active-border-color: #963A32;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #B3453C;
	--ins-btn-disabled-border-color: #B3453C;
}

.btn-outline-danger {
	--ins-btn-color: #B3453C;
	--ins-btn-border-color: #DBA6A1;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #B3453C;
	--ins-btn-hover-border-color: #B3453C;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #963A32;
	--ins-btn-active-border-color: #963A32;
}

.btn-purple {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #6B5B95;
	--ins-btn-border-color: #6B5B95;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #605286;
	--ins-btn-hover-border-color: #605286;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #5A4C7D;
	--ins-btn-active-border-color: #5A4C7D;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #6B5B95;
	--ins-btn-disabled-border-color: #6B5B95;
}

.btn-outline-purple {
	--ins-btn-color: #6B5B95;
	--ins-btn-border-color: #B8B0CC;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #6B5B95;
	--ins-btn-hover-border-color: #6B5B95;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #5A4C7D;
	--ins-btn-active-border-color: #5A4C7D;
}

.btn-dark {
	--ins-btn-color: #F6F5F2;
	--ins-btn-bg: #1D2024;
	--ins-btn-border-color: #1D2024;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #383B3E;
	--ins-btn-hover-border-color: #383B3E;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #2B2D31;
	--ins-btn-active-border-color: #2B2D31;
	--ins-btn-disabled-color: #F6F5F2;
	--ins-btn-disabled-bg: #1D2024;
	--ins-btn-disabled-border-color: #1D2024;
}

.btn-outline-dark {
	--ins-btn-color: #1D2024;
	--ins-btn-border-color: #939496;
	--ins-btn-hover-color: #F6F5F2;
	--ins-btn-hover-bg: #1D2024;
	--ins-btn-hover-border-color: #1D2024;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #F6F5F2;
	--ins-btn-active-bg: #2B2D31;
	--ins-btn-active-border-color: #2B2D31;
}

.btn-light {
	--ins-btn-color: #1D2024;
	--ins-btn-bg: #F6F5F2;
	--ins-btn-border-color: #F6F5F2;
	--ins-btn-hover-color: #1D2024;
	--ins-btn-hover-bg: #DDDCDA;
	--ins-btn-hover-border-color: #DDDCDA;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #1D2024;
	--ins-btn-active-bg: #CFCECB;
	--ins-btn-active-border-color: #CFCECB;
	--ins-btn-disabled-color: #1D2024;
	--ins-btn-disabled-bg: #F6F5F2;
	--ins-btn-disabled-border-color: #F6F5F2;
}

.btn-outline-light {
	--ins-btn-color: #D8D8D5;
	--ins-btn-border-color: #FBFAF9;
	--ins-btn-hover-color: #1D2024;
	--ins-btn-hover-bg: #F6F5F2;
	--ins-btn-hover-border-color: #F6F5F2;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	--ins-btn-active-color: #1D2024;
	--ins-btn-active-bg: #CFCECB;
	--ins-btn-active-border-color: #CFCECB;
}

.btn {
	font-family: var(--cim-fuente-cuerpo);
	font-weight: 600;
	letter-spacing: .005em;
	border-radius: var(--cim-r-sm);
}

/* La cimentacion del boton principal */
.btn-primary,
.btn-dark { box-shadow: inset 0 -2px 0 rgba(185, 146, 57, .85); }

.btn-primary:hover,
.btn-dark:hover { box-shadow: inset 0 -2px 0 var(--cim-oro-claro); }

.btn-primary:active,
.btn-primary.active,
.btn-dark:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28); }

/* Accion principal de una pantalla: oro lleno, texto grafito.
   Reservado para un solo boton por vista (entrar, guardar venta,
   registrar pago). Texto grafito porque el blanco sobre oro da
   2.9:1 y no pasa AA. */
.btn-oro {
	--ins-btn-color: #1D2024;
	--ins-btn-bg: #B99239;
	--ins-btn-border-color: #B99239;
	--ins-btn-hover-color: #1D2024;
	--ins-btn-hover-bg: #D4AC57;
	--ins-btn-hover-border-color: #D4AC57;
	--ins-btn-active-color: #1D2024;
	--ins-btn-active-bg: #A38032;
	--ins-btn-active-border-color: #A38032;
	--ins-btn-disabled-color: #1D2024;
	--ins-btn-disabled-bg: #B99239;
	--ins-btn-disabled-border-color: #B99239;
	--ins-btn-focus-shadow-rgb: 185, 146, 57;
	color: #1D2024;
	font-weight: 700;
}

.btn-link { color: var(--ins-link-color); font-weight: 600; }


/* ----------------------------------------------------------------
   9. INSIGNIAS, ALERTAS Y UTILIDADES DE COLOR
---------------------------------------------------------------- */
.bg-primary { background-color: #1D2024 !important; }
.text-bg-primary { background-color: #1D2024 !important; color: #F6F5F2 !important; }
.badge.bg-primary { color: #F6F5F2 !important; }
.border-primary { border-color: #1D2024 !important; }
.text-primary { color: #1D2024 !important; }
.alert-primary {
	--ins-alert-color: #17191C;
	--ins-alert-bg: #E8E9E9;
	--ins-alert-border-color: #B7B8B9;
}
.table-primary {
	--ins-table-color: #15181B;
	--ins-table-bg: #E8E9E9;
	--ins-table-border-color: #C4C5C6;
}

.bg-secondary { background-color: #6A717B !important; }
.text-bg-secondary { background-color: #6A717B !important; color: #F6F5F2 !important; }
.badge.bg-secondary { color: #F6F5F2 !important; }
.border-secondary { border-color: #6A717B !important; }
.text-secondary { color: #6A717B !important; }
.alert-secondary {
	--ins-alert-color: #535860;
	--ins-alert-bg: #F0F1F2;
	--ins-alert-border-color: #CFD2D5;
}
.table-secondary {
	--ins-table-color: #4E545B;
	--ins-table-bg: #F0F1F2;
	--ins-table-border-color: #D8DADD;
}

.bg-success { background-color: #3E7C5B !important; }
.text-bg-success { background-color: #3E7C5B !important; color: #F6F5F2 !important; }
.badge.bg-success { color: #F6F5F2 !important; }
.border-success { border-color: #3E7C5B !important; }
.text-success { color: #3E7C5B !important; }
.alert-success {
	--ins-alert-color: #306147;
	--ins-alert-bg: #ECF2EF;
	--ins-alert-border-color: #C1D5CB;
}
.table-success {
	--ins-table-color: #2E5C43;
	--ins-table-bg: #ECF2EF;
	--ins-table-border-color: #CDDDD4;
}

.bg-info { background-color: #3C6E8F !important; }
.text-bg-info { background-color: #3C6E8F !important; color: #F6F5F2 !important; }
.badge.bg-info { color: #F6F5F2 !important; }
.border-info { border-color: #3C6E8F !important; }
.text-info { color: #3C6E8F !important; }
.alert-info {
	--ins-alert-color: #2F5670;
	--ins-alert-bg: #ECF0F4;
	--ins-alert-border-color: #C1D1DB;
}
.table-info {
	--ins-table-color: #2C516A;
	--ins-table-bg: #ECF0F4;
	--ins-table-border-color: #CCD9E2;
}

.bg-warning { background-color: #AF580E !important; }
.text-bg-warning { background-color: #AF580E !important; color: #F6F5F2 !important; }
.badge.bg-warning { color: #F6F5F2 !important; }
.border-warning { border-color: #AF580E !important; }
.text-warning { color: #AF580E !important; }
.alert-warning {
	--ins-alert-color: #88450B;
	--ins-alert-bg: #F7EEE7;
	--ins-alert-border-color: #E5CAB2;
}
.table-warning {
	--ins-table-color: #82410A;
	--ins-table-bg: #F7EEE7;
	--ins-table-border-color: #EAD4C0;
}

.bg-danger { background-color: #B3453C !important; }
.text-bg-danger { background-color: #B3453C !important; color: #F6F5F2 !important; }
.badge.bg-danger { color: #F6F5F2 !important; }
.border-danger { border-color: #B3453C !important; }
.text-danger { color: #B3453C !important; }
.alert-danger {
	--ins-alert-color: #8C362F;
	--ins-alert-bg: #F7ECEC;
	--ins-alert-border-color: #E7C3C1;
}
.table-danger {
	--ins-table-color: #84332C;
	--ins-table-bg: #F7ECEC;
	--ins-table-border-color: #EBCFCC;
}

.bg-purple { background-color: #6B5B95 !important; }
.text-bg-purple { background-color: #6B5B95 !important; color: #F6F5F2 !important; }
.badge.bg-purple { color: #F6F5F2 !important; }
.border-purple { border-color: #6B5B95 !important; }
.text-purple { color: #6B5B95 !important; }
.alert-purple {
	--ins-alert-color: #534774;
	--ins-alert-bg: #F0EFF4;
	--ins-alert-border-color: #D0CBDD;
}
.table-purple {
	--ins-table-color: #4F436E;
	--ins-table-bg: #F0EFF4;
	--ins-table-border-color: #D9D4E3;
}

.bg-dark { background-color: #1D2024 !important; }
.text-bg-dark { background-color: #1D2024 !important; color: #F6F5F2 !important; }
.badge.bg-dark { color: #F6F5F2 !important; }
.border-dark { border-color: #1D2024 !important; }
.text-dark { color: #1D2024 !important; }
.alert-dark {
	--ins-alert-color: #17191C;
	--ins-alert-bg: #E8E9E9;
	--ins-alert-border-color: #B7B8B9;
}
.table-dark {
	--ins-table-color: #15181B;
	--ins-table-bg: #E8E9E9;
	--ins-table-border-color: #C4C5C6;
}

.bg-light { background-color: #F6F5F2 !important; }
.text-bg-light { background-color: #F6F5F2 !important; color: #1D2024 !important; }
.badge.bg-light { color: #1D2024 !important; }
.border-light { border-color: #F6F5F2 !important; }
.text-light { color: #D4D3D0 !important; }
.alert-light {
	--ins-alert-color: #C0BFBD;
	--ins-alert-bg: #FEFEFE;
	--ins-alert-border-color: #FCFCFB;
}
.table-light {
	--ins-table-color: #B6B5B3;
	--ins-table-bg: #FEFEFE;
	--ins-table-border-color: #FDFCFC;
}

.badge {
	font-family: var(--cim-fuente-cuerpo);
	font-weight: 600;
	letter-spacing: .03em;
	border-radius: var(--cim-r-sm);
}

.text-muted { color: #4E555F !important; }
[data-bs-theme=dark] .text-muted { color: #8F959E !important; }

/* Oro como utilidad, para los pocos sitios que lo necesitan */
.text-oro { color: var(--cim-oro-profundo) !important; }
[data-bs-theme=dark] .text-oro { color: var(--cim-oro-claro) !important; }
.bg-oro { background-color: var(--cim-oro) !important; color: #1D2024 !important; }
.bg-oro-tenue { background-color: var(--cim-oro-tenue) !important; }

/* Enlaces */
a { font-weight: 600; transition: color .18s ease; }
a, a:hover, a:focus, a:active { text-decoration: none; }
a:hover { color: var(--ins-link-hover-color); }
a.text-success:hover { color: #326349 !important; }
a.text-danger:hover  { color: #8F3730 !important; }

/* Tarjeta-enlace */
.link-card {
	display: block;
	padding: 1rem;
	border-radius: var(--cim-r);
	background: var(--cim-papel);
	border: 1px solid var(--cim-linea);
	box-shadow: inset 0 -2px 0 transparent;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.link-card:hover {
	border-color: #D6C08C;
	box-shadow: inset 0 -2px 0 var(--cim-oro), var(--cim-sombra);
	transform: translateY(-2px);
}


/* ----------------------------------------------------------------
   10. TABLAS
---------------------------------------------------------------- */
.table {
	--ins-table-border-color: var(--cim-linea);
	--ins-table-striped-bg: rgba(29, 32, 36, .022);
	--ins-table-hover-bg: var(--cim-oro-tenue);
	--ins-table-hover-color: var(--cim-grafito-900);
	--ins-table-active-bg: var(--cim-oro-tenue);
}

[data-bs-theme=dark] .table {
	--ins-table-striped-bg: rgba(255, 255, 255, .026);
	--ins-table-hover-bg: #382C11;
	--ins-table-hover-color: #F6F5F2;
}

/* Fila de total / subtotal: se distingue por la linea de oro que la
   sostiene, no por relleno de color */
.table:not(.uafe-tabla, .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl) tfoot > tr > td,
.table:not(.uafe-tabla, .ec-tbl, .rc-tbl, .fp-tabla, .tc-tbl, .rp-tbl) tfoot > tr > th,
.minitabla tfoot > tr > td,
.minitabla tfoot > tr > th,
tr.total-row > td, tr.total-row > th,
tr.subtotal > td, tr.subtotal > th {
	background: var(--cim-hueso);
	font-weight: 700;
	border-top: var(--cim-regla) solid var(--cim-oro);
	color: var(--cim-grafito-900);
}

[data-bs-theme=dark] .table tfoot > tr > td,
[data-bs-theme=dark] .table tfoot > tr > th,
[data-bs-theme=dark] .minitabla tfoot > tr > td,
[data-bs-theme=dark] .minitabla tfoot > tr > th {
	background: var(--cim-grafito-800);
	color: #F6F5F2;
}

/* Encabezado fijo: debe tapar lo que pasa por debajo */
.tableFixHead thead th { position: sticky; top: 0; z-index: 2; }


/* ----------------------------------------------------------------
   11. FORMULARIOS
---------------------------------------------------------------- */
.form-control,
.form-select {
	border-radius: var(--cim-r-sm);
	border-color: var(--cim-linea);
	background-color: var(--cim-papel);
	color: var(--ins-body-color);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus,
.form-select:focus {
	border-color: #C8AA65;
	box-shadow: 0 0 0 3px rgba(185, 146, 57, .18);
}

.form-control:read-only:not([type=date]),
input.readonly {
	background-color: var(--cim-hueso);
	color: var(--cim-grafito-600);
	opacity: 1;
}

.form-label {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--cim-grafito-600);
	margin-bottom: .3rem;
}

[data-bs-theme=dark] .form-label { color: var(--cim-grafito-300); }

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

.form-check-input:focus { box-shadow: 0 0 0 3px rgba(185, 146, 57, .22); }

label.error,
.invalid-feedback { color: #B3453C; font-weight: 600; font-size: .75rem; }

/* Selector de proyecto (bootstrap-select) */
.bootstrap-select .dropdown-toggle { border-radius: var(--cim-r-sm) !important; }
.dropdown-menu {
	border-color: var(--cim-linea);
	border-radius: var(--cim-r);
	box-shadow: var(--cim-sombra);
}
.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--cim-oro-tenue);
	color: var(--cim-grafito-900);
}
[data-bs-theme=dark] .dropdown-item.active,
[data-bs-theme=dark] .dropdown-item:active {
	background-color: #3F3213;
	color: #F6F5F2;
}


/* ----------------------------------------------------------------
   12. TARJETAS
---------------------------------------------------------------- */
.card {
	--ins-card-bg: var(--cim-papel);
	--ins-card-border-color: var(--cim-linea);
	--ins-card-border-radius: var(--cim-r);
	--ins-card-cap-bg: var(--cim-papel);
	box-shadow: var(--cim-sombra-sm);
}

.card.shadow, .card.rp { box-shadow: var(--cim-sombra); }

/* La tarjeta que sigue a una cabecera de pagina se acopla a ella */
.rp-header + .card,
.cim-header + .card { border-top-left-radius: 0; border-top-right-radius: 0; }

.footer {
	background: var(--cim-papel);
	border-top: 1px solid var(--cim-linea);
	color: var(--cim-grafito-500);
	font-size: .75rem;
}


/* ----------------------------------------------------------------
   13. COMPATIBILIDAD CON TOKENS HEREDADOS
   nuevoEstilo.css y reportes.css usan --esm / --ink / --amb / --cor /
   --vio en unas 456 declaraciones. Se reapuntan aqui en lugar de
   tocar 456 sitios: los reportes se recolorean solos y siguen
   funcionando si alguien carga esas hojas por separado.
---------------------------------------------------------------- */
:root {
	/* — antes esmeralda: ahora oro (color de marca) — */
	--esm: #B99239;
	--esm-dark: #A38032;
	--esm-deep: #8A6A20;
	--esm-l: #FAF3E2;
	--esm-xl: #FAF7F1;
	--esm-mid: #FCFBF7;

	/* — antes azul marino: ahora grafito (estructura) — */
	--ink: #1D2024;
	--ink-7: #292D33;
	--ink-6: #3A4048;
	--ink-4: #6B727C;
	--ink-1: #CFD3D9;
	--ink-0: #F6F5F2;

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

	/* — semaforo de mora — */
	--amb: #AF580E;
	--amb-l: #F5EBE2;
	--cor: #B3453C;
	--cor-l: #F6E9E8;
	--vio: #6B5B95;
	--vio-l: #F0EFF4;

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

	/* — tipografia heredada — */
	--font-body: var(--cim-fuente-cuerpo);
	--font-head: var(--cim-fuente-titulo);

	/* — forma y sombra heredadas — */
	--r: var(--cim-r);
	--r-lg: var(--cim-r-lg);
	--sh-sm: var(--cim-sombra-sm);
	--sh-md: var(--cim-sombra);
	--dark-green: #8A6A20;
	--light-green: #B99239;
}


/* ----------------------------------------------------------------
   14. ACCESO
   La pantalla de entrada es lo unico que no es una herramienta de
   trabajo, asi que es donde el Bodoni y el oro pueden respirar.
   Fondo: grafito con una veta de oro, sin fotografia de archivo.
---------------------------------------------------------------- */
.cim-acceso {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem 1rem;
	background:
		radial-gradient(120% 90% at 78% 6%, rgba(185, 146, 57, .16) 0%, rgba(185, 146, 57, 0) 52%),
		linear-gradient(168deg, #292D33 0%, #15171A 62%, #15171A 100%);
}

/* Las hiladas del isotipo, a escala de pagina, tras la tarjeta.
   Repite la firma sin repetir el logotipo. */
.cim-acceso::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, rgba(185, 146, 57, .11) 0 34%, transparent 34%),
		linear-gradient(90deg, rgba(185, 146, 57, .07) 0 46%, transparent 46%),
		linear-gradient(90deg, rgba(185, 146, 57, .05) 0 58%, transparent 58%);
	background-repeat: no-repeat;
	background-size: 100% 2px, 100% 2px, 100% 2px;
	background-position: 0 calc(50% + 118px), 0 calc(50% + 132px), 0 calc(50% + 146px);
}

.cim-acceso__caja { width: 100%; max-width: 27rem; position: relative; }

.cim-acceso__marca { text-align: center; margin-bottom: 1.75rem; }
.cim-acceso__marca img { width: 100%; max-width: 15.5rem; height: auto; }

.cim-acceso__lema {
	margin: .9rem 0 0;
	font-family: var(--cim-fuente-cuerpo);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: #B2914C;
}

.cim-acceso__tarjeta {
	background: #FFFFFF;
	border-radius: var(--cim-r-lg);
	border: 1px solid rgba(185, 146, 57, .18);
	padding: 1.85rem 1.65rem 1.6rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}

[data-bs-theme=dark] .cim-acceso__tarjeta { background: #1D2024; }

.cim-acceso__titulo {
	font-family: var(--cim-fuente-titulo);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0 0 .25rem;
	color: #1D2024;
}

[data-bs-theme=dark] .cim-acceso__titulo { color: #F6F5F2; }

.cim-acceso__ayuda {
	margin: 0 0 1.4rem;
	font-size: .8125rem;
	color: #6B727C;
}

.cim-acceso__pie {
	margin: 1.5rem 0 0;
	text-align: center;
	font-size: .75rem;
	color: #7A7F86;
}

.cim-acceso__nota {
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid #E3E1DC;
	text-align: center;
	font-size: .75rem;
	color: #6B727C;
}

.cim-acceso__demo {
	display: inline-block;
	margin-top: .75rem;
	padding: .18rem .6rem;
	border: 1px solid rgba(185, 146, 57, .5);
	border-radius: 50rem;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #D4AC57;
}


/* ----------------------------------------------------------------
   15. PALETA EXPUESTA PARA GRAFICOS
   Highcharts lee estas variables desde JS (ver js/site.js) para que
   los graficos no queden con la paleta de otro sistema.
---------------------------------------------------------------- */
:root {
	--cim-chart-1: #1D2024;
	--cim-chart-2: #B99239;
	--cim-chart-3: #3C6E8F;
	--cim-chart-4: #3E7C5B;
	--cim-chart-5: #AF580E;
	--cim-chart-6: #B3453C;
	--cim-chart-7: #8F959E;
	--cim-chart-8: #6B5B95;
}


/* ----------------------------------------------------------------
   16. ACCESIBILIDAD Y RESPONSIVE
---------------------------------------------------------------- */
:where(a, button, [role=button], input, select, textarea, summary):focus-visible {
	outline: 3px solid rgba(185, 146, 57, .55);
	outline-offset: 2px;
	border-radius: var(--cim-r-sm);
}

/* La firma nunca depende solo del color: en alto contraste engorda */
@media (prefers-contrast: more) {
	:root { --cim-regla: 3px; }
	.card > .card-header::after { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.link-card:hover { transform: none; }
}

@media (max-width: 575.98px) {
	.rp-header, .cim-header, .uafe-page-hdr, .ec-hdr {
		flex-wrap: wrap;
		gap: .75rem;
		padding: .9rem 1rem;
	}
	.rp-header .title, .cim-header .title { font-size: 1.15rem; }
	.cim-acceso__tarjeta { padding: 1.4rem 1.15rem 1.25rem; }
	.cim-acceso::before { display: none; }
}

/* Impresion: el oro no imprime bien, la firma pasa a grafito */
@media print {
	:root { --cim-oro: #1D2024; --cim-oro-tenue: #fff; }
	.sidenav-menu, .app-topbar, .footer { display: none !important; }
	.card { box-shadow: none; border-color: #AEB4BD; }
}

/* ----------------------------------------------------------------
   17. AÑADIDOS DE INTEGRACION
---------------------------------------------------------------- */

/* Etiqueta de ambiente bajo la marca del menu (DEMO / PRUEBAS).
   Debe verse sin competir con el logotipo. */
.cim-etiqueta-ambiente {
	display: block;
	margin: .35rem auto 0;
	width: fit-content;
	padding: .1rem .5rem;
	border: 1px solid rgba(185, 146, 57, .55);
	border-radius: 50rem;
	font-family: var(--cim-fuente-cuerpo);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cim-oro-claro);
}

/* jquery-validate inyecta label.error dentro de .input-group; sin esto
   el mensaje se mete en la misma linea que el campo y lo estrecha. */
.input-group > label.error,
.form-group > label.error { flex-basis: 100%; }

/* Corrige un valor invalido heredado de nuevoEstilo.css:
   `font-family: var(--font-head) sans-serif` no es CSS valido (la
   variable ya trae su propia lista de reserva), asi que el navegador
   descartaba la declaracion entera y el titulo caia a la fuente base. */
.rp-header .title,
.cim-header .title { font-family: var(--cim-fuente-titulo); }