/**
 * Obra Tracker — tokens de marca del sitio estático.
 *
 * Los cargan las dos páginas: la landing (index.html) y el recorrido de
 * demostración (demo/index.html). Es la única fuente de color, tipografía,
 * espaciado, radios y sombras de todo el sitio.
 *
 * ============================================================
 * ESTO ES UNA COPIA
 * ============================================================
 *
 * Los valores salen textuales de la capa de tokens de la aplicación:
 *
 *   ../../../1.0/wp-content/plugins/suweb-obra-tracker/assets/css/tokens.css
 *
 * Se copian y no se importan porque este sitio es independiente y no puede
 * depender de un archivo que vive adentro del WordPress. La contrapartida es
 * que si la marca cambia allá, hay que traer el cambio acá a mano.
 *
 * Reglas heredadas del sistema:
 *   1. Ningún hex ni rgba() literal fuera de este archivo. Las variantes
 *      translúcidas se derivan con color-mix() sobre un token.
 *   2. Los breakpoints son mobile-first: 48em / 64em / 80em.
 *   3. El modo oscuro se resuelve reasignando tokens semánticos en un solo
 *      bloque al final, no con prefers-color-scheme desperdigado.
 */

:root {
	color-scheme: light dark;

	/* --- Rampas crudas. No usar directo en componentes. --------------- */

	/* Navy de marca. 900 es el color exacto del logo. */
	--suweb-navy-900: #021c46;
	--suweb-navy-800: #06255a;
	--suweb-navy-700: #0a2f6e;
	--suweb-navy-600: #0f3a85;
	--suweb-navy-100: #dbe4f2;
	--suweb-navy-50: #eef2f9;

	/* Azul de acción. 600 es el primario.
	 * 500 está aclarado respecto de la rampa canónica para llegar a 4.5:1
	 * sobre las superficies oscuras (#3b7bf5 se quedaba en 4.40:1). */
	--suweb-azul-800: #0b39a3;
	--suweb-azul-700: #0f47c4;
	--suweb-azul-600: #155eef;
	--suweb-azul-500: #5b91f8;
	--suweb-azul-400: #79a5ff;
	--suweb-azul-100: #dbe7fe;
	--suweb-azul-50: #edf3ff;

	/* Verde: completado, aprobado, éxito. */
	--suweb-verde-800: #166534;
	--suweb-verde-700: #15803d;
	--suweb-verde-600: #16a34a;
	--suweb-verde-500: #22c55e;
	--suweb-verde-400: #4ade80;
	--suweb-verde-100: #dcfce7;
	--suweb-verde-50: #f0fdf4;

	/* Ámbar: pendiente, en progreso, advertencia. */
	--suweb-ambar-800: #92400e;
	--suweb-ambar-700: #b45309;
	--suweb-ambar-100: #fef3c7;
	--suweb-ambar-50: #fffbeb;

	/* Rojo: error, vencido, bloqueado, observado. */
	--suweb-rojo-800: #991b1b;
	--suweb-rojo-700: #b42318;
	--suweb-rojo-400: #f87171;
	--suweb-rojo-100: #fee2e2;
	--suweb-rojo-50: #fef2f2;

	/* Neutrales. 450 existe sólo para --suweb-texto-tenue: gris-400 se
	 * quedaba en 2.56:1 sobre blanco. */
	--suweb-gris-900: #0f172a;
	--suweb-gris-800: #1e293b;
	--suweb-gris-700: #334155;
	--suweb-gris-600: #475569;
	--suweb-gris-500: #64748b;
	--suweb-gris-450: #7d8b9f;
	--suweb-gris-400: #94a3b8;
	--suweb-gris-300: #cbd5e1;
	--suweb-gris-200: #e2e8f0;
	--suweb-gris-100: #f1f5f9;
	--suweb-gris-50: #f8fafc;
	--suweb-blanco: #fff;

	/* --- Tokens semánticos: los que usan los componentes. -------------
	 *
	 * --suweb-fondo queda en BLANCO a propósito: es el fondo de tarjetas,
	 * campos y botones. El gris de fondo de la aplicación va aparte, en
	 * --suweb-app-fondo, y se aplica sólo al body. Separarlos es lo que hace
	 * que las tarjetas se despeguen del fondo. */
	--suweb-fondo: var(--suweb-blanco);
	--suweb-app-fondo: var(--suweb-gris-50);
	--suweb-superficie: var(--suweb-blanco);
	--suweb-superficie-alt: var(--suweb-gris-100);

	--suweb-texto: var(--suweb-gris-900);
	--suweb-texto-suave: var(--suweb-gris-500);
	--suweb-texto-tenue: var(--suweb-gris-450);

	--suweb-borde: var(--suweb-gris-200);
	--suweb-borde-fuerte: var(--suweb-gris-300);

	--suweb-acento: var(--suweb-azul-600);
	--suweb-acento-hover: var(--suweb-azul-700);
	--suweb-acento-activo: var(--suweb-azul-800);
	--suweb-acento-suave: var(--suweb-azul-50);
	--suweb-acento-contraste: var(--suweb-blanco);

	/* Chrome: barra superior, pie y superficies oscuras. */
	--suweb-chrome: var(--suweb-navy-900);
	--suweb-chrome-texto: var(--suweb-blanco);
	--suweb-chrome-suave: var(--suweb-navy-100);

	/* Estados semánticos: texto / fondo / borde por familia. */
	--suweb-exito: var(--suweb-verde-700);
	--suweb-exito-fondo: var(--suweb-verde-50);
	--suweb-exito-borde: var(--suweb-verde-100);

	--suweb-aviso: var(--suweb-ambar-700);
	--suweb-aviso-fondo: var(--suweb-ambar-50);
	--suweb-aviso-borde: var(--suweb-ambar-100);

	--suweb-error: var(--suweb-rojo-700);
	--suweb-error-fondo: var(--suweb-rojo-50);
	--suweb-error-borde: var(--suweb-rojo-100);

	--suweb-info: var(--suweb-azul-700);
	--suweb-info-fondo: var(--suweb-azul-50);
	--suweb-info-borde: var(--suweb-azul-100);

	--suweb-foco: var(--suweb-azul-600);

	/* --- Espaciado. Escala de 4px. ------------------------------------ */
	--suweb-e-1: .25rem;
	--suweb-e-2: .5rem;
	--suweb-e-3: .75rem;
	--suweb-e-4: 1rem;
	--suweb-e-5: 1.25rem;
	--suweb-e-6: 1.5rem;
	--suweb-e-8: 2rem;
	--suweb-e-10: 2.5rem;
	--suweb-e-12: 3rem;

	/* --- Tipografía. Fluida: el mismo token sirve en móvil y escritorio.
	 *
	 * Piso de 16px en cualquier control de formulario: por debajo de 16px
	 * Safari iOS hace zoom al enfocar un campo. */
	--suweb-fuente: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--suweb-t-xs: .75rem;
	--suweb-t-sm: .8125rem;
	--suweb-t-md: .875rem;
	--suweb-t-base: max(1rem, 16px);
	--suweb-t-lg: clamp(1.0625rem, 1rem + .3vw, 1.125rem);
	--suweb-t-xl: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
	--suweb-t-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);

	--suweb-peso-normal: 400;
	--suweb-peso-medio: 600;
	--suweb-peso-fuerte: 700;

	--suweb-interlinea-ajustada: 1.25;
	--suweb-interlinea-base: 1.5;

	/* --- Radios y sombras. Las sombras van teñidas de navy. ----------- */
	--suweb-r-sm: 6px;
	--suweb-r-md: 10px;
	--suweb-r-lg: 14px;
	--suweb-r-xl: 20px;
	--suweb-r-full: 999px;

	--suweb-sombra-sm: 0 1px 2px rgb(2 28 70 / .06);
	--suweb-sombra-md: 0 2px 8px rgb(2 28 70 / .08);
	--suweb-sombra-lg: 0 8px 24px rgb(2 28 70 / .12);
	--suweb-sombra-nav: 0 -4px 18px rgb(2 28 70 / .10);

	/* --- Superficie táctil. ------------------------------------------- */
	--suweb-tap-min: 44px;
	--suweb-tap-comodo: 48px;
	--suweb-control-alto: 48px;
	--suweb-nav-alto: 64px;

	/* --- Botones. ----------------------------------------------------- */
	--suweb-boton-radio: var(--suweb-r-md);
	--suweb-boton-alto: var(--suweb-tap-comodo);
	--suweb-boton-peso: var(--suweb-peso-fuerte);

	/* --- Z-index: escala única para evitar la guerra de valores mágicos. */
	--suweb-z-sticky: 10;
	--suweb-z-nav: 50;
	--suweb-z-sheet: 80;
	--suweb-z-modal: 100;

	/* --- Layout. ------------------------------------------------------ */
	--suweb-ancho: 900px;
	--suweb-ancho-ancho: 1200px;
}

/* ------------------------------------------------------------------
 * Base compartida.
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--suweb-texto);
	font-family: var(--suweb-fuente);
	font-size: var(--suweb-t-base);
	line-height: var(--suweb-interlinea-base);
	-webkit-font-smoothing: antialiased;
	/* Evita el flash gris del tap en Android/iOS. */
	-webkit-tap-highlight-color: transparent;
	/* Red de contención: ningún adorno puede desbordar. */
	overflow-x: clip;
}

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

img {
	height: auto;
}

h1,
h2,
h3 {
	margin: 0;
	letter-spacing: -.02em;
	line-height: var(--suweb-interlinea-ajustada);
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: var(--suweb-acento);
}

/* Piso de 16px en todo control de formulario: es la regla que evita que
 * Safari iOS haga zoom al enfocar. */
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: var(--suweb-t-base);
}

/* Sólo texto para lectores de pantalla. */
.suweb-solo-lector {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Salto al contenido: aparece únicamente con el foco del teclado. */
.suweb-salto {
	position: absolute;
	inset-block-start: var(--suweb-e-2);
	inset-inline-start: var(--suweb-e-2);
	z-index: var(--suweb-z-modal);
	padding: var(--suweb-e-3) var(--suweb-e-5);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-acento);
	color: var(--suweb-acento-contraste);
	font-weight: var(--suweb-peso-medio);
	text-decoration: none;
	translate: 0 -200%;
}

.suweb-salto:focus-visible {
	translate: 0;
}

/* ------------------------------------------------------------------
 * Modo oscuro. Un solo bloque: reasigna tokens semánticos. Las rampas
 * crudas no se tocan, y las superficies navy tampoco: son el chrome de la
 * marca y se ven igual en los dos modos.
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	:root {
		--suweb-fondo: #151b24;
		/* En claro el fondo de la aplicación es MÁS claro que las tarjetas;
		 * en oscuro tiene que ser MÁS oscuro, o las tarjetas desaparecen. */
		--suweb-app-fondo: #0d1117;
		--suweb-superficie: #151b24;
		--suweb-superficie-alt: #1c232e;

		--suweb-texto: #e8eaee;
		--suweb-texto-suave: #9aa4b2;
		--suweb-texto-tenue: #6b7688;

		--suweb-borde: #262e3a;
		--suweb-borde-fuerte: #333c4a;

		--suweb-acento: var(--suweb-azul-500);
		--suweb-acento-hover: var(--suweb-azul-400);
		--suweb-acento-activo: var(--suweb-azul-600);
		--suweb-acento-suave: #14243f;
		--suweb-acento-contraste: var(--suweb-gris-900);

		--suweb-exito: var(--suweb-verde-400);
		--suweb-exito-fondo: #10261a;
		--suweb-exito-borde: #1c4030;

		--suweb-aviso: #fbbf24;
		--suweb-aviso-fondo: #2a2013;
		--suweb-aviso-borde: #4a3618;

		--suweb-error: var(--suweb-rojo-400);
		--suweb-error-fondo: #2b1618;
		--suweb-error-borde: #4a2225;

		--suweb-info: var(--suweb-azul-400);
		--suweb-info-fondo: #14243f;
		--suweb-info-borde: #1e3a63;

		--suweb-foco: var(--suweb-azul-400);

		--suweb-sombra-sm: 0 1px 2px rgb(0 0 0 / .3);
		--suweb-sombra-md: 0 2px 8px rgb(0 0 0 / .35);
		--suweb-sombra-lg: 0 8px 24px rgb(0 0 0 / .45);
		--suweb-sombra-nav: 0 -4px 18px rgb(0 0 0 / .40);
	}
}