/**
 * CG Builders Design System — Tokens base (variables CSS).
 *
 * Estética: contraste header oscuro / cuerpo claro (Revolut + Headspace +
 * Linear), un solo acento dominante, border-radius generoso, sombras
 * suaves. Ver /mnt/user-data/... conversación de diseño para el
 * detalle completo del prompt estético.
 *
 * CÓMO FUNCIONA EL MULTI-BRAND KIT:
 * ":root" define el kit por defecto (Sitework Orange). Cada kit adicional
 * vive en un selector "[data-cgb-kit='slug']" que sobreescribe SOLO las
 * variables de color — tipografía, radios y espaciado son compartidos
 * por todos los kits (son la "forma" del sistema, no la "marca").
 *
 * El plugin cgb-branding es quien pone el atributo data-cgb-kit="..."
 * en <body> (según lo que el admin elija por cliente), y puede además
 * inyectar un <style> adicional con overrides puntuales de UNA variable
 * (ej. solo --cgb-accent) sin tocar este archivo — ver
 * class-cgb-branding-overrides.php en ese plugin.
 *
 * Nunca hardcodear colores/radios/tamaños directamente en componentes:
 * TODO se consume desde estas variables.
 */

:root,
[data-cgb-kit="sitework-orange"] {
	/* ===== Sitework Orange — grafito + naranja (industrial, alta energía) ===== */
	--cgb-accent: #FF6B2C;
	--cgb-accent-hover: #E85A1F;
	--cgb-accent-dark: #CC5220;
	--cgb-accent-light: #FFE4D6;
	--cgb-accent-glow: rgba(255, 107, 44, 0.35);

	--cgb-bg-page: #15161A;
	--cgb-bg-surface: #1D1E23;
	--cgb-bg-surface-raised: #24252B;
	--cgb-bg-subtle: #1A1B20;
	--cgb-bg-hover: #26272D;
	--cgb-header-bg: #0B0B0E;

	--cgb-text-primary: #F5F5F7;
	--cgb-text-secondary: #A8A9B3;
	--cgb-text-muted: #6E6F79;
	--cgb-text-on-accent: #FFFFFF;

	--cgb-border-color: rgba(255, 255, 255, 0.08);
	--cgb-border-color-strong: rgba(255, 255, 255, 0.14);

	--cgb-color-success: #3DD68C;
	--cgb-color-success-bg: rgba(61, 214, 140, 0.14);
	--cgb-color-warning: #FFC53D;
	--cgb-color-warning-bg: rgba(255, 197, 61, 0.14);
	--cgb-color-danger: #FF5C5C;
	--cgb-color-danger-bg: rgba(255, 92, 92, 0.14);
	--cgb-color-info: #4EA8FF;
	--cgb-color-info-bg: rgba(78, 168, 255, 0.14);
	--cgb-color-neutral: #9A9AA3;
	--cgb-color-neutral-bg: rgba(154, 154, 163, 0.14);
}

[data-cgb-kit="blueprint-indigo"] {
	/* ===== Blueprint Indigo — violeta premium sobre base clara ===== */
	--cgb-accent: #5B4FE9;
	--cgb-accent-hover: #4C40D6;
	--cgb-accent-dark: #3D32B8;
	--cgb-accent-light: #EBE9FD;
	--cgb-accent-glow: rgba(91, 79, 233, 0.25);

	--cgb-bg-page: #F7F6FD;
	--cgb-bg-surface: #FFFFFF;
	--cgb-bg-surface-raised: #FFFFFF;
	--cgb-bg-subtle: #F1EFFC;
	--cgb-bg-hover: #EDEBFB;
	--cgb-header-bg: #161328;

	--cgb-text-primary: #1A1830;
	--cgb-text-secondary: #5B5876;
	--cgb-text-muted: #8B89A0;
	--cgb-text-on-accent: #FFFFFF;

	--cgb-border-color: #E4E1F5;
	--cgb-border-color-strong: #D2CDF0;

	--cgb-color-success: #2FBF71;
	--cgb-color-success-bg: #E4F9EE;
	--cgb-color-warning: #F5A623;
	--cgb-color-warning-bg: #FDF1DF;
	--cgb-color-danger: #EF4444;
	--cgb-color-danger-bg: #FDEAEA;
	--cgb-color-info: #3B82F6;
	--cgb-color-info-bg: #E7F0FE;
	--cgb-color-neutral: #8B8A99;
	--cgb-color-neutral-bg: #EDECF2;
}

[data-cgb-kit="foreman-amber"] {
	/* ===== Foreman Amber — negro/grafito + amarillo seguridad ===== */
	--cgb-accent: #F0B429;
	--cgb-accent-hover: #D9A020;
	--cgb-accent-dark: #B5850F;
	--cgb-accent-light: #4A3A0F;
	--cgb-accent-glow: rgba(240, 180, 41, 0.3);

	--cgb-bg-page: #17181C;
	--cgb-bg-surface: #1F2024;
	--cgb-bg-surface-raised: #26272C;
	--cgb-bg-subtle: #1B1C20;
	--cgb-bg-hover: #28292E;
	--cgb-header-bg: #0A0A0C;

	--cgb-text-primary: #F5F5F0;
	--cgb-text-secondary: #ACAAA0;
	--cgb-text-muted: #706E64;
	/* Amarillo requiere texto oscuro para contraste AA sobre botones sólidos */
	--cgb-text-on-accent: #17181C;

	--cgb-border-color: rgba(255, 255, 255, 0.08);
	--cgb-border-color-strong: rgba(255, 255, 255, 0.14);

	--cgb-color-success: #3DD68C;
	--cgb-color-success-bg: rgba(61, 214, 140, 0.14);
	--cgb-color-warning: #FF9F1C;
	--cgb-color-warning-bg: rgba(255, 159, 28, 0.14);
	--cgb-color-danger: #FF5C5C;
	--cgb-color-danger-bg: rgba(255, 92, 92, 0.14);
	--cgb-color-info: #5AC8FA;
	--cgb-color-info-bg: rgba(90, 200, 250, 0.14);
	--cgb-color-neutral: #9A9AA3;
	--cgb-color-neutral-bg: rgba(154, 154, 163, 0.14);
}

[data-cgb-kit="cobalt-site"] {
	/* ===== Cobalt Site — azul cobalto corporativo sobre base clara ===== */
	--cgb-accent: #2A5FF0;
	--cgb-accent-hover: #2451D6;
	--cgb-accent-dark: #1B3FA8;
	--cgb-accent-light: #E5ECFE;
	--cgb-accent-glow: rgba(42, 95, 240, 0.25);

	--cgb-bg-page: #F6F8FE;
	--cgb-bg-surface: #FFFFFF;
	--cgb-bg-surface-raised: #FFFFFF;
	--cgb-bg-subtle: #EFF3FD;
	--cgb-bg-hover: #E9EFFC;
	--cgb-header-bg: #0D1B3D;

	--cgb-text-primary: #131A2C;
	--cgb-text-secondary: #55607A;
	--cgb-text-muted: #8A93AB;
	--cgb-text-on-accent: #FFFFFF;

	--cgb-border-color: #E1E7F7;
	--cgb-border-color-strong: #CBD5F0;

	--cgb-color-success: #2FBF71;
	--cgb-color-success-bg: #E4F9EE;
	--cgb-color-warning: #F0A93B;
	--cgb-color-warning-bg: #FDF2E1;
	--cgb-color-danger: #EF4444;
	--cgb-color-danger-bg: #FDEAEA;
	--cgb-color-info: #38BDF8;
	--cgb-color-info-bg: #E5F6FE;
	--cgb-color-neutral: #8890A3;
	--cgb-color-neutral-bg: #EBEDF3;
}

[data-cgb-kit="clay-carbon"] {
	/* ===== Clay & Carbon — terracota cálido sobre fondo oscuro carbón ===== */
	--cgb-accent: #D9713F;
	--cgb-accent-hover: #C4622F;
	--cgb-accent-dark: #A8502B;
	--cgb-accent-light: #3D2A1C;
	--cgb-accent-glow: rgba(217, 113, 63, 0.3);

	--cgb-bg-page: #17181A;
	--cgb-bg-surface: #1F2022;
	--cgb-bg-surface-raised: #262729;
	--cgb-bg-subtle: #1B1C1E;
	--cgb-bg-hover: #28292B;
	--cgb-header-bg: #0B0A09;

	--cgb-text-primary: #F5F1EC;
	--cgb-text-secondary: #ACA69C;
	--cgb-text-muted: #6E6A62;
	--cgb-text-on-accent: #FFFFFF;

	--cgb-border-color: rgba(255, 255, 255, 0.08);
	--cgb-border-color-strong: rgba(255, 255, 255, 0.14);

	--cgb-color-success: #3FA66E;
	--cgb-color-success-bg: rgba(63, 166, 110, 0.16);
	--cgb-color-warning: #E8B23A;
	--cgb-color-warning-bg: rgba(232, 178, 58, 0.16);
	--cgb-color-danger: #D6483E;
	--cgb-color-danger-bg: rgba(214, 72, 62, 0.16);
	--cgb-color-info: #4F8FDB;
	--cgb-color-info-bg: rgba(79, 143, 219, 0.16);
	--cgb-color-neutral: #9C8F84;
	--cgb-color-neutral-bg: rgba(156, 143, 132, 0.16);
}

[data-cgb-kit="fieldline-lime"] {
	/* ===== Fieldline Lime — carbón + verde lima, alto contraste field ops ===== */
	--cgb-accent: #B4FF39;
	--cgb-accent-hover: #A3E832;
	--cgb-accent-dark: #8FD91E;
	--cgb-accent-light: #2A3410;
	--cgb-accent-glow: rgba(180, 255, 57, 0.3);

	--cgb-bg-page: #161818;
	--cgb-bg-surface: #1E2020;
	--cgb-bg-surface-raised: #252727;
	--cgb-bg-subtle: #1A1C1C;
	--cgb-bg-hover: #272929;
	--cgb-header-bg: #0C0D0D;

	--cgb-text-primary: #F2F5F0;
	--cgb-text-secondary: #A6ABA3;
	--cgb-text-muted: #6C716A;
	/* Lima requiere texto oscuro para contraste AA */
	--cgb-text-on-accent: #161818;

	--cgb-border-color: rgba(255, 255, 255, 0.08);
	--cgb-border-color-strong: rgba(255, 255, 255, 0.14);

	--cgb-color-success: #B4FF39;
	--cgb-color-success-bg: rgba(180, 255, 57, 0.14);
	--cgb-color-warning: #FFB020;
	--cgb-color-warning-bg: rgba(255, 176, 32, 0.14);
	--cgb-color-danger: #FF5C5C;
	--cgb-color-danger-bg: rgba(255, 92, 92, 0.14);
	--cgb-color-info: #4EC9FF;
	--cgb-color-info-bg: rgba(78, 201, 255, 0.14);
	--cgb-color-neutral: #9A9C99;
	--cgb-color-neutral-bg: rgba(154, 156, 153, 0.14);
}

[data-cgb-kit="groundwork-green"] {
	/* ===== Groundwork Green — verde esmeralda, sustentable, base clara ===== */
	--cgb-accent: #1FA97A;
	--cgb-accent-hover: #1B9169;
	--cgb-accent-dark: #127A56;
	--cgb-accent-light: #E1F5EC;
	--cgb-accent-glow: rgba(31, 169, 122, 0.25);

	--cgb-bg-page: #F5FAF7;
	--cgb-bg-surface: #FFFFFF;
	--cgb-bg-surface-raised: #FFFFFF;
	--cgb-bg-subtle: #EEF7F2;
	--cgb-bg-hover: #E6F3EC;
	--cgb-header-bg: #0F2620;

	--cgb-text-primary: #10231C;
	--cgb-text-secondary: #4E6259;
	--cgb-text-muted: #8B9A94;
	--cgb-text-on-accent: #FFFFFF;

	--cgb-border-color: #DEEDE5;
	--cgb-border-color-strong: #C4DFD2;

	--cgb-color-success: #22C55E;
	--cgb-color-success-bg: #E3F9EA;
	--cgb-color-warning: #F5A623;
	--cgb-color-warning-bg: #FDF1DF;
	--cgb-color-danger: #E5484D;
	--cgb-color-danger-bg: #FCE8E9;
	--cgb-color-info: #3B9EFF;
	--cgb-color-info-bg: #E6F1FE;
	--cgb-color-neutral: #8C9A94;
	--cgb-color-neutral-bg: #E9EFEC;
}

/**
 * ===== Forma y estructura — compartidas por TODOS los kits =====
 * Esto es lo que hace que el sistema se sienta Revolut/Headspace/Linear
 * sin importar qué paleta de color esté activa.
 */
:root {
	/* Tipografía */
	--cgb-font-heading: "Sora", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
	--cgb-font-body: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

	--cgb-font-size-xs: 12px;
	--cgb-font-size-sm: 13px;
	--cgb-font-size-md: 14px;
	--cgb-font-size-lg: 18px;
	--cgb-font-size-xl: 24px;
	--cgb-font-size-2xl: 32px;

	--cgb-tracking-tight: -0.02em;

	/* Espaciado */
	--cgb-space-xs: 4px;
	--cgb-space-sm: 8px;
	--cgb-space-md: 16px;
	--cgb-space-lg: 24px;
	--cgb-space-xl: 32px;
	--cgb-space-2xl: 48px;

	/* Border radius — generoso, cápsula en botones/tabs/selectors */
	--cgb-radius-sm: 10px;
	--cgb-radius-md: 16px;
	--cgb-radius-lg: 24px;
	--cgb-radius-pill: 999px;

	/* Sombras — siempre suaves y difusas */
	--cgb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--cgb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
	--cgb-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.22);
}
/**
 * CG Builders Design System — Base y layout.
 * Prefijo cgb-* obligatorio en TODO selector de este sistema.
 * Ningún addon debe definir estilos propios fuera de este vocabulario.
 */

.cgb-root {
	font-family: var(--cgb-font-body);
	color: var(--cgb-text-primary);
	background: var(--cgb-bg-page);
	font-size: var(--cgb-font-size-md);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	/* Red de seguridad: ver la nota equivalente en shell.css sobre
	   html/body — este selector cubre además cualquier lugar donde
	   .cgb-root se use fuera del App Shell (ej. el playground de
	   componentes en wp-admin). */
	max-width: 100%;
	overflow-x: hidden;
}

.cgb-root * {
	box-sizing: border-box;
}

.cgb-h1 {
	font-family: var(--cgb-font-heading);
	font-size: var(--cgb-font-size-2xl);
	font-weight: 700;
	letter-spacing: var(--cgb-tracking-tight);
	color: var(--cgb-text-primary);
	margin: 0 0 var(--cgb-space-sm) 0;
}

.cgb-h2 {
	font-family: var(--cgb-font-heading);
	font-size: var(--cgb-font-size-xl);
	font-weight: 600;
	letter-spacing: var(--cgb-tracking-tight);
	color: var(--cgb-text-primary);
	margin: 0 0 var(--cgb-space-sm) 0;
}

.cgb-h3 {
	font-family: var(--cgb-font-heading);
	font-size: var(--cgb-font-size-lg);
	font-weight: 600;
	color: var(--cgb-text-primary);
	margin: 0 0 var(--cgb-space-xs) 0;
}

.cgb-eyebrow {
	font-size: var(--cgb-font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cgb-text-secondary);
}

.cgb-text-muted {
	color: var(--cgb-text-muted);
	font-size: var(--cgb-font-size-sm);
}

.cgb-text-required {
	color: var(--cgb-color-danger);
}

/* Layout de dos y cuatro columnas para formularios */
.cgb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cgb-space-lg);
	align-items: start;
}

.cgb-form-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cgb-space-sm);
	align-items: start;
}

.cgb-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--cgb-space-sm) 0;
}

.cgb-form-row label {
	font-size: var(--cgb-font-size-sm);
	color: var(--cgb-text-primary);
	font-weight: 600;
}

.cgb-divider {
	border: none;
	border-top: 1px solid var(--cgb-border-color);
	margin: var(--cgb-space-lg) 0;
}

/* Card genérica: radio generoso, sombra suave, cero bordes duros */
.cgb-card {
	background: var(--cgb-bg-surface);
	border: 1px solid var(--cgb-border-color);
	border-radius: var(--cgb-radius-lg);
	box-shadow: var(--cgb-shadow-sm);
	padding: var(--cgb-space-lg);
}

.cgb-card-raised {
	background: var(--cgb-bg-surface-raised);
	border-radius: var(--cgb-radius-lg);
	box-shadow: var(--cgb-shadow-md);
	padding: var(--cgb-space-lg);
}

/* ---------- Contenedor de gráficas (Chart.js) ----------
   Un <canvas> con responsive:true necesita que SU CONTENEDOR tenga una
   altura explícita — si el canvas se pone directo dentro de .cgb-card
   (que no tiene altura propia, se ajusta a su contenido), se forma una
   dependencia circular: el padre espera que el canvas le diga su alto,
   el canvas espera que el padre le diga el suyo. El resultado es un
   canvas colapsado a 0 — el "contenedor en blanco" que no dibuja nada.
   Envolver el canvas en este contenedor rompe el ciclo dándole una
   altura fija y propia; el Chart.js debe crearse además con
   maintainAspectRatio: false para que efectivamente llene ese alto en
   vez de intentar calcularlo a partir del ancho. */
.cgb-chart-container {
	position: relative;
	width: 100%;
	height: 260px;
}

/* Grid de cards responsivo, usado para stat cards y dashboards */
.cgb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--cgb-space-md);
}

/* ---------- Layout utilitario compartido por TODOS los addons ----------
   Reemplaza los estilos inline ad-hoc que cada vista JS repetía para su
   header ("título + botón") y sus filas de acciones — la causa principal
   de que botones/títulos se salieran de pantalla en móvil, porque varias
   pantallas no llevaban flex-wrap y cada quien lo reinventaba distinto. */
.cgb-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cgb-space-sm);
	margin-bottom: 20px;
}

.cgb-actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Grid de 2 columnas iguales (ej. formulario + preview, gráficas). En
   móvil SIEMPRE colapsa a 1 columna — nunca dos columnas angostas
   ilegibles. */
.cgb-charts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cgb-space-md);
}

/* Grid de 2 columnas asimétrico (gráfica principal + secundaria). */
.cgb-charts-grid-wide {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--cgb-space-md);
}

/* Imágenes/canvas nunca deben poder empujar el layout más ancho que su
   contenedor — red de seguridad además de los tamaños explícitos que
   ya ponen los addons. */
.cgb-root img,
.cgb-root canvas {
	max-width: 100%;
}

/* ---------- Media queries ----------
   SIEMPRE al final del archivo: en CSS, cuando dos reglas tienen la
   misma especificidad, gana la que aparece DESPUÉS en el código, sin
   importar si está dentro de un @media o no. Poner estos bloques antes
   de que existan las clases que referencian causaba que la versión de
   escritorio ganara siempre, incluso en pantallas angostas — quedó
   pescado y corregido en QA visual con Playwright. */
@media (max-width: 782px) {
	.cgb-form-grid,
	.cgb-form-grid-4,
	.cgb-charts-grid,
	.cgb-charts-grid-wide {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.cgb-card,
	.cgb-card-raised {
		padding: var(--cgb-space-md);
	}

	.cgb-chart-container {
		height: 200px;
	}
}
/**
 * CG Builders Design System — Botones, tabs, sidebar, badges.
 * Botones en forma de píldora con glow de color; tabs como segmented
 * control (cápsula con opción activa flotando encima).
 */

/* ---------- Botones ---------- */
.cgb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--cgb-font-body);
	font-size: var(--cgb-font-size-sm);
	font-weight: 600;
	padding: 11px 22px;
	border-radius: var(--cgb-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.cgb-btn:active {
	transform: scale(0.98);
}

.cgb-btn-primary {
	background: var(--cgb-accent);
	color: var(--cgb-text-on-accent);
	box-shadow: 0 4px 16px var(--cgb-accent-glow);
}

.cgb-btn-primary:hover {
	background: var(--cgb-accent-hover);
	box-shadow: 0 6px 20px var(--cgb-accent-glow);
}

.cgb-btn-secondary {
	background: var(--cgb-bg-subtle);
	color: var(--cgb-text-primary);
	border-color: var(--cgb-border-color);
}

.cgb-btn-secondary:hover {
	background: var(--cgb-bg-hover);
}

.cgb-btn-danger {
	background: var(--cgb-color-danger);
	color: #FFFFFF;
}

.cgb-btn-danger:hover {
	filter: brightness(0.92);
}

.cgb-btn-ghost {
	background: transparent;
	color: var(--cgb-text-secondary);
}

.cgb-btn-ghost:hover {
	background: var(--cgb-bg-hover);
	color: var(--cgb-text-primary);
}

.cgb-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.cgb-btn-icon-only {
	width: 38px;
	height: 38px;
	padding: 0;
}

.cgb-btn-sm {
	padding: 7px 16px;
	font-size: var(--cgb-font-size-xs);
}

/* ---------- Tabs: segmented control ---------- */
/* max-width + overflow-x: cuando hay más tabs de las que caben en el
   ancho disponible (ej. 6 tabs de "Empleados/Subcontratistas" o el
   detalle de proyecto en un teléfono angosto), el control se desliza
   horizontalmente en vez de desbordar la página o aplastarse. */
.cgb-tabs {
	display: inline-flex;
	gap: 2px;
	background: var(--cgb-bg-subtle);
	border-radius: var(--cgb-radius-pill);
	padding: 4px;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cgb-tabs::-webkit-scrollbar {
	display: none;
}

.cgb-tab {
	padding: 8px 18px;
	font-size: var(--cgb-font-size-sm);
	font-weight: 600;
	color: var(--cgb-text-secondary);
	border-radius: var(--cgb-radius-pill);
	cursor: pointer;
	background: none;
	border: none;
	flex-shrink: 0;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.cgb-tab:hover {
	color: var(--cgb-text-primary);
}

.cgb-tab.cgb-tab-active {
	background: var(--cgb-bg-surface);
	color: var(--cgb-text-primary);
	box-shadow: var(--cgb-shadow-sm);
}

.cgb-tab-panel {
	display: none;
}

.cgb-tab-panel.cgb-tab-panel-active {
	display: block;
}

/* ---------- Selector / dropdown en forma de píldora ---------- */
.cgb-select {
	appearance: none;
	background: var(--cgb-bg-subtle);
	border: 1px solid var(--cgb-border-color);
	border-radius: var(--cgb-radius-pill);
	color: var(--cgb-text-primary);
	font-family: var(--cgb-font-body);
	font-size: var(--cgb-font-size-sm);
	padding: 10px 40px 10px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A93AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

/* ---------- Sidebar de navegación ---------- */
.cgb-sidebar {
	background: var(--cgb-header-bg);
	width: 260px;
	padding: var(--cgb-space-lg) var(--cgb-space-sm);
}

.cgb-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 var(--cgb-space-md) var(--cgb-space-lg);
}

.cgb-sidebar-brand img {
	height: 32px;
	width: auto;
}

.cgb-sidebar-brand-name {
	font-family: var(--cgb-font-heading);
	font-weight: 700;
	color: #FFFFFF;
	font-size: var(--cgb-font-size-lg);
	letter-spacing: var(--cgb-tracking-tight);
}

.cgb-sidebar-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	font-size: var(--cgb-font-size-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--cgb-radius-md);
	margin-bottom: 2px;
}

.cgb-sidebar-item:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

.cgb-sidebar-item.cgb-sidebar-item-active {
	background: var(--cgb-accent);
	color: var(--cgb-text-on-accent);
}

/* ---------- Badges de estado (pill, siempre) ---------- */
.cgb-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--cgb-font-size-xs);
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var(--cgb-radius-pill);
	text-transform: capitalize;
}

.cgb-badge-success {
	background: var(--cgb-color-success-bg);
	color: var(--cgb-color-success);
}

.cgb-badge-warning {
	background: var(--cgb-color-warning-bg);
	color: var(--cgb-color-warning);
}

.cgb-badge-danger {
	background: var(--cgb-color-danger-bg);
	color: var(--cgb-color-danger);
}

.cgb-badge-info {
	background: var(--cgb-color-info-bg);
	color: var(--cgb-color-info);
}

.cgb-badge-neutral {
	background: var(--cgb-color-neutral-bg);
	color: var(--cgb-color-neutral);
}
/**
 * CG Builders Design System — Stat cards, iconos duotono, tabla, modal,
 * empty states. Estos son los componentes que consumen los addons vía
 * window.CGBUI.
 */

/* ---------- Icono en cápsula duotono ---------- */
/* Uso: <span class="cgb-icon-capsule cgb-icon-capsule-accent"><svg>...</svg></span>
   El ícono SIEMPRE es stroke (línea), nunca relleno. */
.cgb-icon-capsule {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--cgb-radius-md);
	flex-shrink: 0;
}

.cgb-icon-capsule svg {
	width: 22px;
	height: 22px;
	stroke-width: 2;
	fill: none;
}

.cgb-icon-capsule-accent {
	background: var(--cgb-accent-light);
	color: var(--cgb-accent);
}

.cgb-icon-capsule-success {
	background: var(--cgb-color-success-bg);
	color: var(--cgb-color-success);
}

.cgb-icon-capsule-warning {
	background: var(--cgb-color-warning-bg);
	color: var(--cgb-color-warning);
}

.cgb-icon-capsule-danger {
	background: var(--cgb-color-danger-bg);
	color: var(--cgb-color-danger);
}

.cgb-icon-capsule-info {
	background: var(--cgb-color-info-bg);
	color: var(--cgb-color-info);
}

.cgb-icon-capsule-neutral {
	background: var(--cgb-color-neutral-bg);
	color: var(--cgb-color-neutral);
}

.cgb-icon-capsule-sm {
	width: 34px;
	height: 34px;
}

.cgb-icon-capsule-sm svg {
	width: 18px;
	height: 18px;
}

/* ---------- Stat card ---------- */
/* Estructura esperada:
   <div class="cgb-stat-card">
     <span class="cgb-icon-capsule cgb-icon-capsule-accent">...</span>
     <span class="cgb-eyebrow">INGRESOS</span>
     <span class="cgb-stat-value">$4,500.00</span>
   </div> */
.cgb-stat-card {
	display: flex;
	flex-direction: column;
	gap: var(--cgb-space-sm);
	background: var(--cgb-bg-surface);
	border: 1px solid var(--cgb-border-color);
	border-radius: var(--cgb-radius-lg);
	box-shadow: var(--cgb-shadow-sm);
	padding: var(--cgb-space-lg);
}

.cgb-stat-value {
	font-family: var(--cgb-font-heading);
	font-size: var(--cgb-font-size-2xl);
	font-weight: 700;
	letter-spacing: var(--cgb-tracking-tight);
	color: var(--cgb-text-primary);
}

.cgb-stat-trend {
	font-size: var(--cgb-font-size-xs);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.cgb-stat-trend-up {
	color: var(--cgb-color-success);
}

.cgb-stat-trend-down {
	color: var(--cgb-color-danger);
}

/* ---------- Tabla paginada ---------- */
/* overflow-x: auto (en vez de "overflow: hidden") es EL fix de que las
   tablas no deslizaban en móvil: con overflow:hidden el contenido que no
   cabía simplemente se recortaba en vez de poder desplazarse. overflow-y
   se mantiene en hidden para conservar el recorte de las esquinas
   redondeadas del thead. */
.cgb-table-wrap {
	background: var(--cgb-bg-surface);
	border: 1px solid var(--cgb-border-color);
	border-radius: var(--cgb-radius-lg);
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.cgb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cgb-font-size-sm);
}

/* En pantallas angostas, la tabla mantiene un ancho mínimo legible en
   vez de aplastar todas las columnas hasta volverlas ilegibles — el
   usuario desliza el wrap horizontalmente (arriba) para ver el resto. */
@media (max-width: 700px) {
	.cgb-table {
		min-width: 640px;
	}

	/* La paginación es hermana de la tabla dentro del mismo contenedor
	   que desliza (.cgb-table-wrap). Sin este min-width, se queda con
	   el ancho de la ventana visible (~300px) mientras la tabla mide
	   640px — al deslizar hacia la derecha, la tabla sigue mostrando
	   columnas pero la paginación ya "se acabó" ahí, dejando un hueco
	   en blanco que se ve como si algo se cortara. */
	.cgb-table-pagination {
		min-width: 640px;
	}
}

.cgb-table thead th {
	text-align: left;
	background: var(--cgb-bg-subtle);
	color: var(--cgb-text-secondary);
	font-weight: 700;
	font-size: var(--cgb-font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 20px;
	border-bottom: 1px solid var(--cgb-border-color);
}

.cgb-table tbody td {
	padding: 14px 20px;
	border-bottom: 1px solid var(--cgb-border-color);
	color: var(--cgb-text-primary);
}

.cgb-table tbody tr:last-child td {
	border-bottom: none;
}

.cgb-table tbody tr:hover {
	background: var(--cgb-bg-hover);
}

.cgb-table-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 20px;
	background: var(--cgb-bg-subtle);
	border-top: 1px solid var(--cgb-border-color);
	font-size: var(--cgb-font-size-sm);
	color: var(--cgb-text-secondary);
}

.cgb-table-pagination-controls {
	display: flex;
	gap: 4px;
}

/* ---------- Modal ---------- */
.cgb-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 12, 0.55);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	font-family: var(--cgb-font-body);
	color: var(--cgb-text-primary);
	line-height: 1.5;
	/* Padding para que el modal nunca toque el borde de la pantalla en
	   móvil, y overflow-y para poder desplazarse si el teclado virtual
	   deja menos alto disponible del que ocupa el modal. */
	padding: 20px;
	overflow-y: auto;
}

.cgb-modal-overlay * {
	box-sizing: border-box;
}

.cgb-modal-overlay p {
	font-size: var(--cgb-font-size-md);
	color: var(--cgb-text-primary);
	margin: 0 0 8px 0;
}

.cgb-modal {
	background: var(--cgb-bg-surface);
	border-radius: var(--cgb-radius-lg);
	box-shadow: var(--cgb-shadow-modal);
	padding: var(--cgb-space-xl);
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	overflow-y: auto;
}

.cgb-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--cgb-space-lg);
}

.cgb-modal-close {
	background: var(--cgb-bg-subtle);
	border: none;
	border-radius: var(--cgb-radius-pill);
	width: 32px;
	height: 32px;
	cursor: pointer;
	color: var(--cgb-text-secondary);
}

.cgb-modal-footer {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--cgb-space-sm);
	margin-top: var(--cgb-space-lg);
}

/* Pantallas muy angostas: menos padding y botones del footer apilados
   a ancho completo (el patrón "Guardar" arriba, "Cancelar" abajo es más
   fácil de tocar que dos píldoras compitiendo por el mismo ancho). */
@media (max-width: 480px) {
	.cgb-modal-overlay {
		padding: 12px;
		align-items: flex-start;
	}

	.cgb-modal {
		padding: var(--cgb-space-lg);
		margin-top: 16px;
	}

	.cgb-modal-footer {
		flex-direction: column-reverse;
	}

	.cgb-modal-footer .cgb-btn {
		width: 100%;
	}
}

/* ---------- Empty states ---------- */
/* Nunca una pantalla en blanco sin guía: ícono grande + texto + CTA. */
.cgb-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--cgb-space-2xl) var(--cgb-space-lg);
	gap: var(--cgb-space-sm);
}

.cgb-empty-state .cgb-icon-capsule {
	width: 64px;
	height: 64px;
	margin-bottom: var(--cgb-space-sm);
}

.cgb-empty-state .cgb-icon-capsule svg {
	width: 30px;
	height: 30px;
}

.cgb-empty-state-title {
	font-family: var(--cgb-font-heading);
	font-size: var(--cgb-font-size-lg);
	font-weight: 600;
	color: var(--cgb-text-primary);
}

.cgb-empty-state-text {
	font-size: var(--cgb-font-size-sm);
	color: var(--cgb-text-secondary);
	max-width: 360px;
}

.cgb-empty-state .cgb-btn {
	margin-top: var(--cgb-space-sm);
}

/* ---------- Timeline (bitácora de obra, historial de contratos) ---------- */
.cgb-timeline-item {
	display: flex;
	gap: var(--cgb-space-md);
	padding-bottom: var(--cgb-space-lg);
	position: relative;
}

.cgb-timeline-item::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 36px;
	bottom: 0;
	width: 2px;
	background: var(--cgb-border-color);
}

.cgb-timeline-item:last-child::before {
	display: none;
}

/* ---------- Toast notifications ---------- */
.cgb-toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 200000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
	font-family: var(--cgb-font-body);
}

.cgb-toast {
	background: var(--cgb-bg-surface);
	border: 1px solid var(--cgb-border-color);
	border-left: 4px solid var(--cgb-color-danger);
	border-radius: var(--cgb-radius-md);
	box-shadow: var(--cgb-shadow-modal);
	padding: 14px 18px;
	font-size: var(--cgb-font-size-sm);
	color: var(--cgb-text-primary);
	max-width: 340px;
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: auto;
}

.cgb-toast-visible {
	opacity: 1;
	transform: translateX(0);
}

.cgb-toast-success {
	border-left-color: var(--cgb-color-success);
}

.cgb-toast-info {
	border-left-color: var(--cgb-color-info);
}

/* ---------- Stat card variante Neon (panel resumen) ---------- */
.cgb-stat-card-neon {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--cgb-neon-color, var(--cgb-accent));
	box-shadow: 0 0 0 1px var(--cgb-neon-color, var(--cgb-accent)) inset, 0 0 24px -4px var(--cgb-neon-color, var(--cgb-accent));
}

/* El color del texto NUNCA debe ser el mismo que --cgb-neon-color: son
   6 tonos fijos pensados para brillar sobre un fondo oscuro, pero
   varios Brand Kits (Blueprint Indigo, Cobalt Site, Groundwork Green)
   tienen --cgb-bg-surface blanco, y ahí un neón claro (lima, cian,
   amarillo) se volvía casi invisible como texto sólido. Un letrero de
   neón real funciona así: el texto va sólido/legible y el color vive
   en el resplandor alrededor — no en el relleno. --cgb-text-primary y
   --cgb-text-secondary ya están calibrados por Brand Kit para tener
   contraste correcto contra --cgb-bg-surface, así que el texto es
   legible sin importar el kit activo. */
.cgb-stat-card-neon .cgb-stat-value {
	color: var(--cgb-text-primary);
	text-shadow: 0 0 16px var(--cgb-neon-color, var(--cgb-accent));
}

.cgb-stat-card-neon .cgb-eyebrow {
	color: var(--cgb-text-secondary);
}

/* ---------- Selector de categorías gestionables ---------- */
.cgb-category-manager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.cgb-category-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--cgb-radius-pill);
	font-size: var(--cgb-font-size-xs);
	font-weight: 600;
	background: var(--cgb-bg-subtle);
	border: 1px solid var(--cgb-border-color);
	color: var(--cgb-text-primary);
}

.cgb-category-chip-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	display: inline-block;
}

.cgb-category-chip-remove {
	background: none;
	border: none;
	color: var(--cgb-text-muted);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
}

.cgb-category-add-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.cgb-category-add-row input[type="color"] {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--cgb-border-color);
	padding: 0;
	cursor: pointer;
}
/**
 * CG Builders Design System — Formularios.
 */

.cgb-input,
.cgb-textarea {
	width: 100%;
	background: var(--cgb-bg-subtle);
	border: 1px solid var(--cgb-border-color);
	border-radius: var(--cgb-radius-md);
	color: var(--cgb-text-primary);
	font-family: var(--cgb-font-body);
	font-size: var(--cgb-font-size-sm);
	padding: 12px 16px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cgb-input::placeholder,
.cgb-textarea::placeholder {
	color: var(--cgb-text-muted);
}

.cgb-input:focus,
.cgb-textarea:focus {
	outline: none;
	border-color: var(--cgb-accent);
	box-shadow: 0 0 0 3px var(--cgb-accent-glow);
}

.cgb-textarea {
	min-height: 100px;
	resize: vertical;
}

.cgb-checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cgb-checkbox-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--cgb-accent);
}

.cgb-file-upload {
	display: flex;
	align-items: center;
	gap: var(--cgb-space-sm);
	background: var(--cgb-bg-subtle);
	border: 1px dashed var(--cgb-border-color-strong);
	border-radius: var(--cgb-radius-md);
	padding: var(--cgb-space-md);
	color: var(--cgb-text-secondary);
	font-size: var(--cgb-font-size-sm);
	cursor: pointer;
}

.cgb-file-upload:hover {
	border-color: var(--cgb-accent);
	color: var(--cgb-text-primary);
}

.cgb-field-error {
	color: var(--cgb-color-danger);
	font-size: var(--cgb-font-size-xs);
	margin-top: 4px;
}

.cgb-input-error {
	border-color: var(--cgb-color-danger) !important;
}
