/* ==========================================================================
   Marca Green & Blue para los programas internos · v1 · 2026-11-06
   Fuente única: C:\proyectos\comun\marca\   ·   Guía: LEEME.md   ·   Muestra: muestra.html
   Sacada del tema de la web (greenblue, assets/css/main.css) y del minimanual v1.0 (dic. 2024).

   - Solo define variables (--gb-…) y letras: enlazarlo NO cambia nada de lo que se ve
     hasta que el programa use las variables.
   - Todo lleva el prefijo --gb- para no chocar con las variables que ya tiene cada programa.
   - Los programas usan una COPIA de esta carpeta: no se edita la copia; se cambia aquí,
     se sube la versión de la primera línea y se vuelve a copiar (LEEME.md, paso 1).
   ========================================================================== */

/* ── Letras (decidido el 6-nov: opción mixta) ───────────────────────────────
   Títulos: GT Alpina, la de la marca, solo en fino y de 24 px para arriba.
     ⚠️ Licencia web de Grilli Type pendiente (la factura la tiene Mariam). Si no cubre
     los programas, se cambia --gb-letra-titulo a "Iowan Old Style", Georgia, serif
     (o a otra libre) y se borran sus dos @font-face: nada más.
   Texto: Roboto Condensed (libre, de Google Fonts; descargada el 6-nov), en vez de Greed Condensed de la
     marca, porque Greed solo trae un grosor y los programas necesitan negrita.
   Las rutas son relativas a este archivo: la carpeta fuentes/ va siempre al lado. */
@font-face {
	font-family: "GT Alpina";
	src: url("fuentes/GT-Alpina-Standard-Thin.woff2") format("woff2");
	font-weight: 100 900; /* solo hay el fino: así el navegador no inventa una negrita */
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "GT Alpina";
	src: url("fuentes/GT-Alpina-Standard-Thin-Italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Roboto Condensed";
	src: url("fuentes/roboto-condensed.woff2") format("woff2");
	font-weight: 100 900; /* un solo archivo con todos los grosores */
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto Condensed";
	src: url("fuentes/roboto-condensed-cursiva.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ── 1. Colores de la marca (minimanual v1.0) ───────────────────────────── */
	--gb-verde: #90c947;        /* verde lima. Nunca letra sobre blanco (2,0): detalles, rellenos, el logo */
	--gb-azul-mar: #3399b5;     /* azul mar. Sobre blanco solo letra grande o iconos (3,3) */
	--gb-blanco: #ffffff;
	--gb-verde-claro: #e4f4cb;  /* secundario: fondos suaves, etiquetas */
	--gb-azul-oscuro: #106189;  /* secundario: letra de color, botones y enlaces (6,8 sobre blanco) */

	/* ── 2. Derivados de la marca (los mismos que la web) ─────────────────── */
	--gb-verde-claro-50: #f2fae5;  /* el verde claro al 50 % */
	--gb-verde-claro-25: #f8fcf2;  /* al 25 %: fondos alternos (filas, secciones) */
	--gb-azul-mar-claro: #99ccda;  /* el azul mar al 50 %: tintes sobre los azules oscuros */
	--gb-azul-brillo: #0e577b;     /* azul oscuro al 90 % */
	--gb-azul-noche: #0d4e6e;      /* al 80 %: fondos oscuros (el verde lima encima da 4,6) */
	--gb-azul-profundo: #0b4460;   /* al 70 %: pies y bordes oscuros */

	/* ── 3. Fuera de la marca, a propósito (como en la web) ───────────────── */
	--gb-verde-oscuro: #3d6b1f;  /* verde que SÍ se lee como letra (6,3) */
	--gb-tinta: #17262b;         /* letra principal (15,6) */
	--gb-tinta-suave: #4b5c61;   /* letra secundaria (7,0) */
	--gb-linea: #dbe3d2;         /* bordes y separadores */
	--gb-ambar: #d99a00;         /* relleno de aviso; como letra, --gb-aviso */

	/* ── 4. Estados (nuevos para los programas; letra / fondo, todos ≥ 5,3) ── */
	--gb-ok: var(--gb-verde-oscuro);   --gb-ok-fondo: var(--gb-verde-claro-50);
	--gb-aviso: #8a5a00;               --gb-aviso-fondo: #fdf3d9;
	--gb-peligro: #b42318;             --gb-peligro-fondo: #fef3f2;
	--gb-info: var(--gb-azul-oscuro);  --gb-info-fondo: #e6f3f6;

	/* ── 5. Papeles: qué color va en cada sitio (lo que deberían usar los programas) ── */
	--gb-fondo: var(--gb-blanco);
	--gb-fondo-suave: var(--gb-verde-claro-25);
	--gb-superficie: var(--gb-blanco);
	--gb-texto: var(--gb-tinta);
	--gb-texto-suave: var(--gb-tinta-suave);
	--gb-acento: var(--gb-azul-oscuro);        /* botón principal, enlaces, pestaña activa */
	--gb-acento-encima: var(--gb-blanco);      /* letra sobre el acento */
	--gb-acento-hover: var(--gb-azul-noche);
	--gb-destaque: var(--gb-verde);            /* el toque de marca: subrayados, puntos, barras */
	--gb-fondo-oscuro: var(--gb-azul-noche);   /* cabeceras o programas en oscuro */
	--gb-texto-sobre-oscuro: var(--gb-blanco);
	--gb-destaque-sobre-oscuro: var(--gb-verde);

	/* Cabecera de los programas (decidido el 6-nov: oscura, con el logo corto
	   logos/gb-reducido-blanco.svg a 32 px de alto y la pestaña activa en verde lima) */
	--gb-cabecera-fondo: var(--gb-azul-noche);
	--gb-cabecera-texto: var(--gb-blanco);
	--gb-cabecera-separador: rgb(255 255 255 / 0.25);
	--gb-cabecera-activa: var(--gb-verde);
	--gb-cabecera-activa-texto: var(--gb-azul-profundo); /* 5,3 sobre el verde lima */

	/* ── 6. Letras ─────────────────────────────────────────────────────────── */
	--gb-letra-titulo: "GT Alpina", "Iowan Old Style", Georgia, serif;  /* solo fino, ≥ 24 px */
	--gb-letra-texto: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; /* 400 normal · 500 medio · 700 negrita */

	/* ── 7. Tamaños de letra (programas: más densos que la web) ──────────── */
	--gb-t-xs: 0.75rem;      /* 12 px: notas, fechas pequeñas */
	--gb-t-s: 0.875rem;      /* 14 px: tablas y etiquetas */
	--gb-t-m: 0.9375rem;     /* 15 px: texto normal */
	--gb-t-l: 1.125rem;      /* 18 px: destacados */
	--gb-t-xl: 1.5rem;       /* 24 px: subtítulos (mínimo para la letra de titular) */
	--gb-t-titulo: 2rem;     /* 32 px: título de la pantalla */
	--gb-t-titulo-g: clamp(2rem, 1.3rem + 3vw, 3.4rem); /* el titular grande de la web */

	/* ── 8. Formas ─────────────────────────────────────────────────────────── */
	--gb-radio-s: 8px;       /* campos, botones pequeños, etiquetas */
	--gb-radio: 16px;        /* tarjetas (el de la web) */
	--gb-radio-g: 24px;      /* paneles grandes (el de la web) */
	--gb-radio-pildora: 999px;
	--gb-sombra: 0 1px 2px rgb(15 76 92 / 0.06), 0 8px 24px rgb(15 76 92 / 0.08);
	--gb-sombra-g: 0 2px 4px rgb(15 76 92 / 0.06), 0 18px 48px rgb(15 76 92 / 0.14);

	/* ── 9. Foco y movimiento (como la web) ───────────────────────────────── */
	--gb-foco: var(--gb-verde);           /* outline: 3px solid var(--gb-foco) */
	--gb-foco-borde: var(--gb-azul-noche); /* box-shadow: 0 0 0 3px var(--gb-foco-borde) (se ve sobre blanco) */
	--gb-suave: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}