/* ==========================================================================
   NotiCostos — global.css
   Capa base: tokens de marca, reset, tipografía y primitivas.
   Derivado del Manual de Marca v1 · Agosto 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS
   Los 7 colores del manual son la única fuente de verdad. Todo lo demás
   (bordes, fondos, estados hover) se deriva de ellos — nada de hex sueltos.
   -------------------------------------------------------------------------- */

:root {
	/* Paleta primaria — manual §05 */
	--color-green: #1F7A43;
	--color-gold: #F0B429;
	--color-night: #16283F;

	/* Paleta secundaria / apoyo — manual §05 */
	--color-cold-gray: #EDEFF2;
	--color-brick: #A93226;
	--color-mint: #9FE1CB;
	--color-text-muted: #5F5E5A;

	--color-white: #FFFFFF;

	/* Canales RGB — para derivar transparencias sin inventar colores nuevos */
	--rgb-green: 31 122 67;
	--rgb-gold: 240 180 41;
	--rgb-night: 22 40 63;
	--rgb-brick: 169 50 38;
	--rgb-mint: 159 225 203;

	/* Superficies — el azul noche y el gris frío dominan (regla 80/20) */
	--surface-page: var(--color-cold-gray);
	--surface-card: var(--color-white);
	--surface-sunken: rgb(var(--rgb-night) / .035);
	--surface-inverse: var(--color-night);

	/* Bordes — tintados con azul noche, no grises neutros */
	--border-soft: rgb(var(--rgb-night) / .10);
	--border-medium: rgb(var(--rgb-night) / .18);
	--border-strong: rgb(var(--rgb-night) / .32);

	/* Estados semánticos */
	--tint-ingreso: rgb(var(--rgb-green) / .10);
	--tint-egreso: rgb(var(--rgb-brick) / .10);
	--tint-gold: rgb(var(--rgb-gold) / .14);
	--color-green-hover: #196336;
	--color-gold-hover: #E0A517;

	/* Tipografía — manual §06 */
	--font-brand: "Quicksand", "Trebuchet MS", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-number: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

	/* Escala tipográfica */
	--text-xs: .74rem;
	--text-sm: .82rem;
	--text-base: .94rem;
	--text-lg: 1.12rem;
	--text-xl: 1.5rem;
	--text-2xl: clamp(1.75rem, 3.2vw, 2.35rem);
	--text-figure: clamp(1.9rem, 3.6vw, 2.6rem);

	/* Espaciado */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 26px;
	--space-7: 34px;
	--space-8: 48px;

	/* Radios y sombras */
	--radius-sm: 6px;
	--radius-md: 9px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	--shadow-card: 0 1px 2px rgb(var(--rgb-night) / .05);
	--shadow-raised: 0 6px 18px -8px rgb(var(--rgb-night) / .22);
	--shadow-hero: 0 14px 34px -18px rgb(var(--rgb-night) / .55);

	/* Alto mínimo táctil — 44px, no 40 */
	--control-height: 44px;

	--transition: 160ms cubic-bezier(.25, .8, .35, 1);
	--content-width: min(1180px, calc(100% - 40px));
}

/* --------------------------------------------------------------------------
   02 · RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	color: var(--color-night);
	background: var(--surface-page);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

input, button, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; }

/* --------------------------------------------------------------------------
   03 · TIPOGRAFÍA
   Quicksand solo para marca y títulos. Inter para todo lo demás.
   Mono con cifras tabulares para cualquier monto — manual §06.
   -------------------------------------------------------------------------- */

h1, h2, h3 {
	font-family: var(--font-brand);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p { text-wrap: pretty; }

a {
	color: var(--color-green);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition);
}

a:hover { color: var(--color-green-hover); }

/* Cualquier cifra: mismo ancho por dígito para que las columnas cuadren */
.amount,
.movement-amount,
.metric-card strong {
	font-family: var(--font-number);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -.02em;
}

.eyebrow {
	margin: 0 0 var(--space-2);
	color: var(--color-green);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.muted { color: var(--color-text-muted); }
.positive { color: var(--color-green) !important; }
.negative { color: var(--color-brick) !important; }

/* --------------------------------------------------------------------------
   04 · FOCO VISIBLE
   Anillo dorado: es el color de "llamado a la acción" del manual y contrasta
   tanto sobre blanco como sobre azul noche.
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.topbar-brand:focus-visible,
.metric-card--main :focus-visible { outline-color: var(--color-mint); }

/* --------------------------------------------------------------------------
   05 · CONTROLES DE FORMULARIO (base compartida)
   -------------------------------------------------------------------------- */

.field-control,
.movement-filters input,
.movement-filters select,
.swal-form input,
.swal-form select {
	width: 100%;
	min-height: var(--control-height);
	padding: 10px 12px;
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-sm);
	color: var(--color-night);
	background: var(--color-white);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.field-control:hover,
.movement-filters input:hover,
.movement-filters select:hover { border-color: var(--border-strong); }

.field-control:focus-visible,
.movement-filters input:focus-visible,
.movement-filters select:focus-visible,
.swal-form input:focus-visible,
.swal-form select:focus-visible {
	outline: none;
	border-color: var(--color-green);
	box-shadow: 0 0 0 3px rgb(var(--rgb-green) / .16);
}

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

/* Los select nativos: flecha propia en azul noche */
.movement-filters select,
.swal-form select {
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2316283F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px;
}

/* --------------------------------------------------------------------------
   06 · MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   07 · PANTALLA DE CARGA
   -------------------------------------------------------------------------- */

.loading-screen {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--space-5);
	background: rgb(var(--rgb-night) / .88);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition), visibility var(--transition);
}

.loading-screen.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.loading-panel {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	color: var(--color-white);
	background: var(--color-night);
	box-shadow: var(--shadow-hero);
}

.loading-logo {
	width: 88px;
	height: 88px;
	border-radius: 22px;
	box-shadow: 0 12px 32px rgb(var(--rgb-night) / .22);
	animation: loading-pulse 1.6s ease-in-out infinite;
}

.loading-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid rgb(255 255 255 / .28);
	border-top-color: var(--color-gold);
	border-radius: 50%;
	animation: loading-spin .8s linear infinite;
}

.loading-panel p {
	color: var(--color-white);
	font: 700 1.05rem var(--font-brand);
	letter-spacing: .04em;
}

@keyframes loading-spin {
	to { transform: rotate(360deg); }
}

@keyframes loading-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

/* El topbar mantiene su propio tamaño (mayor especificidad) */
.topbar-brand img { width: 40px; height: 40px; }