@charset "UTF-8";
/* ==========================================================================
   ATRAMIA MATERIALES - SISTEMA DE TOKENS DE PANTALLA
   --------------------------------------------------------------------------
   Concepto: "dos tintas". La rampa neutra (tinta) es el contenido; el acento
   rojo minio (rubrica) es lo que estructura, marca y corrige.
   Documentacion: docs/design/identidad.md y docs/design/tokens.md

   ORDEN DE CARGA OBLIGATORIO EN TODA PLANTILLA:
     1. /vendor/bootstrap/css/bootstrap.min.css
     2. /css/tokens.css        <- este fichero
     3. /css/aplicacion.css  o  /css/vitrina.css

   REGLAS:
     - Fuera de este fichero NO se escribe ninguna variable --bs-*.
     - Fuera de este fichero NO se escribe ningun color, tamano, radio,
       sombra ni duracion a mano. Solo tokens.
     - Identificadores y comentarios en espanol, sin tildes ni "n" con virgulilla.

   INDICE
     1. Fuentes locales
     2. Primitivas de color
     3. Tokens semanticos (modo claro)
     4. Tipografia
     5. Espaciado, anchuras y alturas
     6. Radios
     7. Elevacion y foco
     8. Movimiento
     9. Modo oscuro
    10. Cableado sobre Bootstrap 5.3 (globales)
    11. Cableado sobre Bootstrap 5.3 (componentes)
    12. Reescritura de lo que Bootstrap compila y no expone
    13. Movimiento reducido
   ========================================================================== */


/* ==========================================================================
   1. FUENTES LOCALES
   Ninguna fuente se sirve por CDN. Ficheros en /fuentes/, licencias OFL
   copiadas junto a ellos. Solo se precarga la variable de estructura.
   ========================================================================== */

/* Archivo (Omnibus-Type, OFL 1.1) - voz de la ESTRUCTURA.
   Ejes: wght 100-900, wdth 62-125. */
@font-face {
  font-family: "Archivo";
  src: url("/fuentes/archivo-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: "Archivo";
  src: url("/fuentes/archivo-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* Source Serif 4 (Adobe, OFL 1.1) - voz del CONTENIDO.
   Ejes: wght 200-900, opsz 8-60. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fuentes/source-serif-4-variable.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fuentes/source-serif-4-variable-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}


:root {

/* ==========================================================================
   2. PRIMITIVAS DE COLOR
   Doble declaracion a proposito: primero hexadecimal (respaldo para navegadores
   sin OKLCH, todavia frecuentes en los equipos de los centros), despues OKLCH.
   El navegador se queda con la ultima que entiende.
   Las primitivas NO se usan en los componentes: solo alimentan la seccion 3.
   ========================================================================== */

  /* --- Rampa TINTA. Tono 258. Croma alta en los medios, baja en los extremos. */
  --tinta-00: #fbfcfd;  --tinta-00: oklch(0.990 0.002 258);
  --tinta-05: #f4f6f8;  --tinta-05: oklch(0.972 0.004 258);
  --tinta-10: #eaedf1;  --tinta-10: oklch(0.945 0.006 258);
  --tinta-20: #d7dbe0;  --tinta-20: oklch(0.890 0.008 258);
  --tinta-30: #b9bec5;  --tinta-30: oklch(0.800 0.011 258);
  --tinta-40: #9399a1;  --tinta-40: oklch(0.680 0.014 258);
  --tinta-50: #6a717b;  --tinta-50: oklch(0.545 0.018 258);
  --tinta-60: #4f5763;  --tinta-60: oklch(0.455 0.022 258);
  --tinta-70: #363f4c;  --tinta-70: oklch(0.365 0.026 258);
  --tinta-80: #212b39;  --tinta-80: oklch(0.285 0.030 258);
  --tinta-90: #111a26;  --tinta-90: oklch(0.215 0.028 258);
  --tinta-95: #080f19;  --tinta-95: oklch(0.168 0.024 258);
  --tinta-99: #03070e;  --tinta-99: oklch(0.125 0.020 258);

  /* --- Rampa RUBRICA. Tono 34, rojo minio ligeramente terroso.
         Es marca, nunca superficie de aviso. Techo de uso: 5% de la pantalla. */
  --rubrica-10: #fdece7;  --rubrica-10: oklch(0.955 0.020 34);
  --rubrica-20: #fad2c8;  --rubrica-20: oklch(0.895 0.048 34);
  --rubrica-30: #fdad9a;  --rubrica-30: oklch(0.820 0.098 34);
  --rubrica-40: #ec836b;  --rubrica-40: oklch(0.720 0.135 34);
  --rubrica-50: #dc6146;  --rubrica-50: oklch(0.640 0.160 34);
  --rubrica-60: #c2452a;  --rubrica-60: oklch(0.560 0.165 34);
  --rubrica-70: #9f351d;  --rubrica-70: oklch(0.480 0.145 34);
  --rubrica-80: #792715;  --rubrica-80: oklch(0.395 0.118 34);
  --rubrica-95: #2b1a14;  --rubrica-95: oklch(0.240 0.035 34);

  /* --- Estados. Convencionales a proposito: nadie tiene que aprenderse
         nuestro codigo de colores para saber que algo ha fallado. */
  --exito-fondo:  #e6f7ec;  --exito-fondo:  oklch(0.960 0.022 158);
  --exito-borde:  #b1d9c0;  --exito-borde:  oklch(0.850 0.055 158);
  --exito-marca:  #1f8959;  --exito-marca:  oklch(0.560 0.120 158);
  --exito-texto:  #0e6c43;  --exito-texto:  oklch(0.470 0.105 158);

  --aviso-fondo:  #fef1e2;  --aviso-fondo:  oklch(0.965 0.024 72);
  --aviso-borde:  #eeca9f;  --aviso-borde:  oklch(0.860 0.070 72);
  --aviso-marca:  #dc9322;  --aviso-marca:  oklch(0.720 0.145 72);
  --aviso-texto:  #754d10;  --aviso-texto:  oklch(0.455 0.090 72);

  --error-fondo:  #fdecea;  --error-fondo:  oklch(0.960 0.018 22);
  --error-borde:  #f6bbb8;  --error-borde:  oklch(0.845 0.068 22);
  --error-marca:  #c83841;  --error-marca:  oklch(0.560 0.180 22);
  --error-texto:  #a12a32;  --error-texto:  oklch(0.475 0.155 22);

  /* --- Componentes RGB, necesarios para los alfas y para Bootstrap. */
  --tinta-90-rgb: 17, 26, 38;
  --tinta-99-rgb: 3, 7, 14;
  --tinta-00-rgb: 251, 252, 253;
  --tinta-05-rgb: 244, 246, 248;
  --tinta-60-rgb: 79, 87, 99;
  --rubrica-60-rgb: 194, 69, 42;
  --rubrica-70-rgb: 159, 53, 29;
  --rubrica-40-rgb: 236, 131, 107;
  --exito-marca-rgb: 31, 137, 89;
  --aviso-marca-rgb: 220, 147, 34;
  --error-marca-rgb: 200, 56, 65;


/* ==========================================================================
   3. TOKENS SEMANTICOS - MODO CLARO
   Esto es lo unico que se escribe en el CSS de los componentes.
   El modo oscuro (seccion 9) NO redefine primitivas: solo reasigna estos.
   ========================================================================== */

  /* --- Superficies */
  --color-fondo: var(--tinta-00);
  --color-superficie: var(--tinta-00);
  --color-superficie-tenue: var(--tinta-05);
  --color-superficie-hundida: var(--tinta-05);
  --color-superficie-flotante: var(--tinta-00);
  /* Fondo drenado de las secciones "comprometidas" de la vitrina.
     Unico token que vale igual en claro y en oscuro, a proposito. */
  --color-superficie-drenada: var(--tinta-95);
  --color-velo: rgba(var(--tinta-90-rgb), 0.55);

  /* --- Texto. Contrastes verificados sobre --color-fondo:
         texto 17.03, secundario 7.07, auxiliar 4.81. Todos AA o mejor. */
  --color-texto: var(--tinta-90);
  --color-texto-secundario: var(--tinta-60);
  --color-texto-auxiliar: var(--tinta-50);
  --color-texto-desactivado: var(--tinta-40);
  --color-texto-invertido: var(--tinta-00);
  --color-texto-acento: var(--rubrica-70);
  --color-texto-sobre-drenado: var(--tinta-05);

  /* --- Bordes y filetes */
  --color-borde: var(--tinta-20);
  --color-borde-tenue: var(--tinta-10);
  --color-borde-fuerte: var(--tinta-30);
  --color-borde-acento: var(--rubrica-60);
  --color-borde-foco: var(--rubrica-60);
  --grosor-borde: 1px;
  --grosor-filete: 2px;

  /* --- Acento. Marca, no superficie: filete, subrayado, estado activo,
         relleno de boton primario y glifo. Nunca fondo de un mensaje. */
  --color-acento: var(--rubrica-60);
  --color-acento-hover: var(--rubrica-70);
  --color-acento-activo: var(--rubrica-80);
  --color-acento-tenue: var(--rubrica-10);
  --color-acento-contraste: var(--tinta-00);

  /* --- Estados semanticos: trio cerrado fondo / borde / texto, mas una
         marca para icono o filete que NUNCA se usa como color de texto. */
  --color-exito-fondo: var(--exito-fondo);
  --color-exito-borde: var(--exito-borde);
  --color-exito-texto: var(--exito-texto);
  --color-exito-marca: var(--exito-marca);

  --color-aviso-fondo: var(--aviso-fondo);
  --color-aviso-borde: var(--aviso-borde);
  --color-aviso-texto: var(--aviso-texto);
  --color-aviso-marca: var(--aviso-marca);

  --color-error-fondo: var(--error-fondo);
  --color-error-borde: var(--error-borde);
  --color-error-texto: var(--error-texto);
  --color-error-marca: var(--error-marca);

  /* Informacion sin azul: usa la rampa de tinta. Decision deliberada
     para no caer en el SaaS azul corporativo. */
  --color-info-fondo: var(--tinta-05);
  --color-info-borde: var(--tinta-20);
  --color-info-texto: var(--tinta-70);
  --color-info-marca: var(--tinta-60);

  /* --- Tokens de dominio. Existen para que ninguna pantalla se invente
         su propio color para estos cinco conceptos del producto. */
  --color-reserva-borde: var(--tinta-30);        /* hueco aun sin rellenar */
  --color-reserva-fondo: var(--tinta-05);
  --color-relleno-ia: var(--rubrica-60);         /* filete: generado, sin revisar */
  --color-bloqueado: var(--tinta-40);            /* elemento bloqueado en el editor */
  --color-solucion: var(--exito-marca);          /* distintivo de hoja de soluciones */


/* ==========================================================================
   4. TIPOGRAFIA
   Dos familias, reparto semantico: ESTRUCTURA es la voz del sistema,
   LECTURA es la voz del contenido. El cambio de familia informa.
   ========================================================================== */

  --fuente-estructura: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-lectura: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Escala modular de dos tramos, pivote en 1rem.
         Tramo de texto  razon 1.2  (pasos finos para la aplicacion)
         Tramo titulares razon 1.25 (contraste real para la vitrina) */
  --texto-xs: 0.694rem;    /* 11.1px - metadatos, pie de tabla */
  --texto-sm: 0.833rem;    /* 13.3px - texto auxiliar, etiquetas, ayuda */
  --texto-base: 1rem;      /* 16px   - cuerpo */
  --texto-lg: 1.2rem;      /* 19.2px - entradilla, enunciados largos */
  --texto-xl: 1.5rem;      /* 24px   - TECHO DE LA APLICACION */
  --texto-2xl: 1.875rem;   /* 30px   - solo vitrina de aqui en adelante */
  --texto-3xl: 2.344rem;   /* 37.5px */
  --texto-4xl: 2.930rem;   /* 46.9px */
  --texto-5xl: 3.662rem;   /* 58.6px */
  --texto-6xl: 4.578rem;   /* 73.2px */

  /* --- Pares fluidos de vitrina. Se usan estos, no los pasos sueltos. */
  --texto-heroe: clamp(2.930rem, 1.60rem + 4.2vw, 4.578rem);
  --texto-seccion: clamp(1.875rem, 1.20rem + 2.1vw, 2.930rem);
  --texto-subseccion: clamp(1.500rem, 1.15rem + 1.1vw, 1.875rem);

  /* --- Pesos */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-titular: 700;

  /* --- Eje de anchura de Archivo. Solo vitrina. */
  --ancho-condensado: 88;
  --ancho-normal: 100;
  --ancho-ancho: 112;

  /* --- Interlineado */
  --interlinea-compacta: 1.05;
  --interlinea-titular: 1.18;
  --interlinea-media: 1.35;
  --interlinea-interfaz: 1.45;
  --interlinea-lectura: 1.6;
  --interlinea-suelta: 1.75;

  /* --- Interletraje */
  --tracking-display: -0.03em;
  --tracking-titular: -0.018em;
  --tracking-normal: 0;
  --tracking-holgado: 0.01em;   /* para 13px o menos */
  --tracking-etiqueta: 0.07em;  /* versalitas: maximo una cada tres secciones */

  /* --- Medida de lectura */
  --medida-lectura: 68ch;
  --medida-corta: 46ch;


/* ==========================================================================
   5. ESPACIADO, ANCHURAS Y ALTURAS
   Unidad base 4px. Todo espacio del sistema es multiplo de ella.
   Reparto por capa: la aplicacion usa de 2xs a xl; la vitrina de base a 5xl.
   ========================================================================== */

  --u: 0.25rem;

  --espaciado-2xs: 0.125rem;  /*   2px */
  --espaciado-xs: 0.25rem;    /*   4px */
  --espaciado-sm: 0.5rem;     /*   8px */
  --espaciado-md: 0.75rem;    /*  12px */
  --espaciado-base: 1rem;     /*  16px */
  --espaciado-lg: 1.5rem;     /*  24px */
  --espaciado-xl: 2rem;       /*  32px */
  --espaciado-2xl: 3rem;      /*  48px */
  --espaciado-3xl: 4rem;      /*  64px */
  --espaciado-4xl: 6rem;      /*  96px */
  --espaciado-5xl: 8rem;      /* 128px */

  --ancho-prosa: 40rem;
  --ancho-contenido: 62rem;
  --ancho-aplicacion: 90rem;
  --ancho-vitrina: 78rem;

  --alto-control-sm: 2rem;
  --alto-control: 2.5rem;
  --alto-control-lg: 3rem;
  --objetivo-tactil: 44px;   /* minimo garantizado por relleno, no por texto */

  /* Puntos de ruptura. Coinciden con los de Bootstrap para no mantener
     dos rejillas. Solo informativos: las media queries llevan el valor. */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl: 1400px;

  /* Proporcion exacta de una hoja A4, para la previsualizacion en pantalla. */
  --proporcion-a4: 1 / 1.4142;


/* ==========================================================================
   6. RADIOS
   Un solo sistema. Registro de instrumento de precision: radios cortos.
   ========================================================================== */

  --radio-xs: 2px;        /* distintivos, etiquetas en linea */
  --radio-sm: 4px;        /* botones, campos, selectores: el radio de trabajo */
  --radio-md: 6px;        /* tarjetas, paneles, desplegables, avisos */
  --radio-lg: 10px;       /* modales, cajones, hoja A4 de previsualizacion */
  --radio-completo: 999px; /* EXCEPCION UNICA: avatares e indicador de estado */


/* ==========================================================================
   7. ELEVACION Y FOCO
   En una herramienta sobria la elevacion se comunica antes con borde que con
   sombra. Todas las sombras estan tenidas con el tono de marca; ninguna es
   negro puro.
   ========================================================================== */

  --sombra-0: none;
  --sombra-1: 0 1px 2px rgba(var(--tinta-90-rgb), 0.07);
  --sombra-2: 0 1px 2px rgba(var(--tinta-90-rgb), 0.05),
              0 2px 6px -2px rgba(var(--tinta-90-rgb), 0.08);
  --sombra-3: 0 2px 4px -1px rgba(var(--tinta-90-rgb), 0.06),
              0 10px 24px -8px rgba(var(--tinta-90-rgb), 0.16);
  --sombra-4: 0 4px 10px -3px rgba(var(--tinta-90-rgb), 0.08),
              0 28px 56px -16px rgba(var(--tinta-90-rgb), 0.24);
  --sombra-hundida: inset 0 1px 2px rgba(var(--tinta-90-rgb), 0.06);

  --anillo-foco: 3px;
  --sombra-foco: 0 0 0 var(--anillo-foco) rgba(var(--rubrica-60-rgb), 0.30);


/* ==========================================================================
   8. MOVIMIENTO
   Tokens compartidos entre vitrina y aplicacion. Ningun componente improvisa.
   Techo de la aplicacion: 260ms. Solo se animan transform y opacity.
   ========================================================================== */

  --dur-instante: 0ms;    /* todo lo disparado por teclado. No se anima jamas */
  --dur-rapida: 120ms;    /* pulsacion, hover, cambio de color */
  --dur-media: 180ms;     /* desplegables, tooltips, popovers */
  --dur-salida: 140ms;    /* TODA salida: mas rapida que su entrada */
  --dur-lenta: 260ms;     /* modales, cajones, paneles laterales */
  --dur-vitrina: 520ms;   /* solo vitrina: apariciones al desplazar */
  --escalonado: 45ms;     /* retardo entre hermanos de una lista */

  /* No existe una curva ease-in en el sistema: arranca lento justo en el
     instante en que el usuario esta mirando. */
  --curva-salida: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-entrada-salida: cubic-bezier(0.77, 0, 0.175, 1);
  --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --curva-lineal: linear;

  /* Escala minima de aparicion. Nada surge de scale(0): nada en el mundo
     real aparece de la nada. */
  --escala-aparicion: 0.96;
  --escala-pulsacion: 0.97;

  color-scheme: light dark;
}


/* ==========================================================================
   9. MODO OSCURO
   Se reasignan SOLO tokens semanticos. Ninguna primitiva cambia de valor.
   El interruptor es data-bs-theme en <html>, el mismo que usa Bootstrap,
   para que los dos sistemas no tengan dos verdades distintas.

   ATENCION: hay dos bloques gemelos. El primero cubre el caso sin JavaScript
   (preferencia del sistema); el segundo, la eleccion explicita del usuario.
   CUALQUIER CAMBIO EN UNO DEBE REPLICARSE EN EL OTRO.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    color-scheme: dark;

    --color-fondo: var(--tinta-99);
    --color-superficie: var(--tinta-95);
    --color-superficie-tenue: var(--tinta-95);
    --color-superficie-hundida: var(--tinta-99);
    --color-superficie-flotante: var(--tinta-90);
    --color-velo: rgba(var(--tinta-99-rgb), 0.72);

    --color-texto: var(--tinta-05);
    --color-texto-secundario: var(--tinta-30);
    --color-texto-auxiliar: var(--tinta-40);
    --color-texto-desactivado: var(--tinta-60);
    --color-texto-invertido: var(--tinta-99);
    --color-texto-acento: var(--rubrica-30);

    --color-borde: var(--tinta-80);
    --color-borde-tenue: var(--tinta-95);
    --color-borde-fuerte: var(--tinta-70);
    --color-borde-acento: var(--rubrica-40);
    --color-borde-foco: var(--rubrica-40);

    --color-acento: var(--rubrica-40);
    --color-acento-hover: var(--rubrica-50);
    --color-acento-activo: var(--rubrica-60);
    --color-acento-tenue: var(--rubrica-95);
    --color-acento-contraste: var(--tinta-99);

    --color-exito-fondo: #0d2a1c;
    --color-exito-borde: #1f4a35;
    --color-exito-texto: #7fd2a6;
    --color-exito-marca: #35a86e;

    --color-aviso-fondo: #2a1e08;
    --color-aviso-borde: #4d3813;
    --color-aviso-texto: #f0bd6b;
    --color-aviso-marca: #dc9322;

    --color-error-fondo: #2c1114;
    --color-error-borde: #55212a;
    --color-error-texto: #f2a3a4;
    --color-error-marca: #e05661;

    --color-info-fondo: var(--tinta-95);
    --color-info-borde: var(--tinta-80);
    --color-info-texto: var(--tinta-30);
    --color-info-marca: var(--tinta-40);

    --color-reserva-borde: var(--tinta-70);
    --color-reserva-fondo: var(--tinta-95);
    --color-relleno-ia: var(--rubrica-40);
    --color-bloqueado: var(--tinta-60);
    --color-solucion: #35a86e;

    /* Sobre fondo oscuro la sombra casi no informa: la jerarquia la lleva
       la luminosidad de la superficie y el borde. Se sube el alfa para que
       las capas flotantes sigan despegando del fondo. */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sombra-2: 0 1px 2px rgba(0, 0, 0, 0.40),
                0 2px 6px -2px rgba(0, 0, 0, 0.50);
    --sombra-3: 0 2px 4px -1px rgba(0, 0, 0, 0.45),
                0 10px 24px -8px rgba(0, 0, 0, 0.60);
    --sombra-4: 0 4px 10px -3px rgba(0, 0, 0, 0.50),
                0 28px 56px -16px rgba(0, 0, 0, 0.70);
    --sombra-hundida: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    --sombra-foco: 0 0 0 var(--anillo-foco) rgba(var(--rubrica-40-rgb), 0.34);
  }
}

/* Bloque gemelo: eleccion explicita del usuario. Mismos valores. */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --color-fondo: var(--tinta-99);
  --color-superficie: var(--tinta-95);
  --color-superficie-tenue: var(--tinta-95);
  --color-superficie-hundida: var(--tinta-99);
  --color-superficie-flotante: var(--tinta-90);
  --color-velo: rgba(var(--tinta-99-rgb), 0.72);

  --color-texto: var(--tinta-05);
  --color-texto-secundario: var(--tinta-30);
  --color-texto-auxiliar: var(--tinta-40);
  --color-texto-desactivado: var(--tinta-60);
  --color-texto-invertido: var(--tinta-99);
  --color-texto-acento: var(--rubrica-30);

  --color-borde: var(--tinta-80);
  --color-borde-tenue: var(--tinta-95);
  --color-borde-fuerte: var(--tinta-70);
  --color-borde-acento: var(--rubrica-40);
  --color-borde-foco: var(--rubrica-40);

  --color-acento: var(--rubrica-40);
  --color-acento-hover: var(--rubrica-50);
  --color-acento-activo: var(--rubrica-60);
  --color-acento-tenue: var(--rubrica-95);
  --color-acento-contraste: var(--tinta-99);

  --color-exito-fondo: #0d2a1c;
  --color-exito-borde: #1f4a35;
  --color-exito-texto: #7fd2a6;
  --color-exito-marca: #35a86e;

  --color-aviso-fondo: #2a1e08;
  --color-aviso-borde: #4d3813;
  --color-aviso-texto: #f0bd6b;
  --color-aviso-marca: #dc9322;

  --color-error-fondo: #2c1114;
  --color-error-borde: #55212a;
  --color-error-texto: #f2a3a4;
  --color-error-marca: #e05661;

  --color-info-fondo: var(--tinta-95);
  --color-info-borde: var(--tinta-80);
  --color-info-texto: var(--tinta-30);
  --color-info-marca: var(--tinta-40);

  --color-reserva-borde: var(--tinta-70);
  --color-reserva-fondo: var(--tinta-95);
  --color-relleno-ia: var(--rubrica-40);
  --color-bloqueado: var(--tinta-60);
  --color-solucion: #35a86e;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sombra-2: 0 1px 2px rgba(0, 0, 0, 0.40),
              0 2px 6px -2px rgba(0, 0, 0, 0.50);
  --sombra-3: 0 2px 4px -1px rgba(0, 0, 0, 0.45),
              0 10px 24px -8px rgba(0, 0, 0, 0.60);
  --sombra-4: 0 4px 10px -3px rgba(0, 0, 0, 0.50),
              0 28px 56px -16px rgba(0, 0, 0, 0.70);
  --sombra-hundida: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  --sombra-foco: 0 0 0 var(--anillo-foco) rgba(var(--rubrica-40-rgb), 0.34);
}


/* ==========================================================================
   10. CABLEADO SOBRE BOOTSTRAP 5.3 - VARIABLES GLOBALES
   La lista de selectores iguala la especificidad de los bloques
   [data-bs-theme] de Bootstrap. Como este fichero se carga despues, gana.
   ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {

  /* --- Tipografia base */
  --bs-font-sans-serif: var(--fuente-estructura);
  --bs-font-monospace: var(--fuente-mono);
  --bs-body-font-family: var(--fuente-estructura);
  --bs-body-font-size: var(--texto-base);
  --bs-body-font-weight: var(--peso-normal);
  --bs-body-line-height: var(--interlinea-interfaz);

  /* --- Cuerpo y superficies */
  --bs-body-color: var(--color-texto);
  --bs-body-color-rgb: var(--tinta-90-rgb);
  --bs-body-bg: var(--color-fondo);
  --bs-body-bg-rgb: var(--tinta-00-rgb);
  --bs-emphasis-color: var(--color-texto);
  --bs-secondary-color: var(--color-texto-secundario);
  --bs-secondary-bg: var(--color-superficie-tenue);
  --bs-tertiary-color: var(--color-texto-auxiliar);
  --bs-tertiary-bg: var(--color-superficie-hundida);
  --bs-heading-color: var(--color-texto);

  /* --- Enlaces */
  --bs-link-color: var(--color-texto-acento);
  --bs-link-color-rgb: var(--rubrica-70-rgb);
  --bs-link-hover-color: var(--color-acento-activo);
  --bs-link-decoration: underline;
  --bs-link-underline-opacity: 0.4;

  /* --- Bordes y radios. Bootstrap trae 0.375rem por defecto; aqui se acorta
         a nuestro sistema y se elimina la variante "pill" del uso general. */
  --bs-border-width: var(--grosor-borde);
  --bs-border-style: solid;
  --bs-border-color: var(--color-borde);
  --bs-border-color-translucent: var(--color-borde);
  --bs-border-radius: var(--radio-md);
  --bs-border-radius-sm: var(--radio-sm);
  --bs-border-radius-lg: var(--radio-lg);
  --bs-border-radius-xl: var(--radio-lg);
  --bs-border-radius-xxl: var(--radio-lg);
  --bs-border-radius-pill: var(--radio-completo);

  /* --- Sombras */
  --bs-box-shadow: var(--sombra-2);
  --bs-box-shadow-sm: var(--sombra-1);
  --bs-box-shadow-lg: var(--sombra-4);
  --bs-box-shadow-inset: var(--sombra-hundida);

  /* --- Foco */
  --bs-focus-ring-width: var(--anillo-foco);
  --bs-focus-ring-opacity: 0.30;
  --bs-focus-ring-color: rgba(var(--rubrica-60-rgb), 0.30);

  /* --- Paleta de tema. No hay azul de marca: "primary" es la rubrica y
         "info" cae en la rampa de tinta a proposito. */
  --bs-primary: var(--color-acento);
  --bs-primary-rgb: var(--rubrica-60-rgb);
  --bs-secondary: var(--color-texto-secundario);
  --bs-secondary-rgb: var(--tinta-60-rgb);
  --bs-success: var(--color-exito-marca);
  --bs-success-rgb: var(--exito-marca-rgb);
  --bs-warning: var(--color-aviso-marca);
  --bs-warning-rgb: var(--aviso-marca-rgb);
  --bs-danger: var(--color-error-marca);
  --bs-danger-rgb: var(--error-marca-rgb);
  --bs-info: var(--color-info-marca);
  --bs-info-rgb: var(--tinta-60-rgb);
  --bs-light: var(--color-superficie-tenue);
  --bs-dark: var(--tinta-90);

  --bs-primary-bg-subtle: var(--color-acento-tenue);
  --bs-primary-border-subtle: var(--color-borde-acento);
  --bs-primary-text-emphasis: var(--color-texto-acento);
  --bs-success-bg-subtle: var(--color-exito-fondo);
  --bs-success-border-subtle: var(--color-exito-borde);
  --bs-success-text-emphasis: var(--color-exito-texto);
  --bs-warning-bg-subtle: var(--color-aviso-fondo);
  --bs-warning-border-subtle: var(--color-aviso-borde);
  --bs-warning-text-emphasis: var(--color-aviso-texto);
  --bs-danger-bg-subtle: var(--color-error-fondo);
  --bs-danger-border-subtle: var(--color-error-borde);
  --bs-danger-text-emphasis: var(--color-error-texto);
  --bs-info-bg-subtle: var(--color-info-fondo);
  --bs-info-border-subtle: var(--color-info-borde);
  --bs-info-text-emphasis: var(--color-info-texto);

  /* --- Formularios */
  --bs-form-valid-color: var(--color-exito-texto);
  --bs-form-valid-border-color: var(--color-exito-marca);
  --bs-form-invalid-color: var(--color-error-texto);
  --bs-form-invalid-border-color: var(--color-error-marca);

  /* --- Varios. El degradado de Bootstrap se anula por completo. */
  --bs-gradient: none;
  --bs-code-color: var(--color-texto-acento);
  --bs-highlight-bg: var(--color-acento-tenue);
  --bs-highlight-color: var(--color-texto);
  --bs-gutter-x: var(--espaciado-lg);
}


/* ==========================================================================
   11. CABLEADO SOBRE BOOTSTRAP 5.3 - COMPONENTES
   Aqui es donde se pierde el aspecto de Bootstrap. Queda PROHIBIDO dejar
   cualquier componente con su apariencia por defecto.
   ========================================================================== */

/* --- Botones --------------------------------------------------------------
   Sin degradado, sin sombra de relieve, radio corto, altura de control del
   sistema y respuesta tactil real en :active. */
.btn {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: var(--espaciado-base);
  --bs-btn-font-family: var(--fuente-estructura);
  --bs-btn-font-size: var(--texto-sm);
  --bs-btn-font-weight: var(--peso-fuerte);
  --bs-btn-line-height: var(--alto-control);
  --bs-btn-border-width: var(--grosor-borde);
  --bs-btn-border-radius: var(--radio-sm);
  --bs-btn-focus-shadow-rgb: var(--rubrica-60-rgb);
  --bs-btn-disabled-opacity: 0.45;
  --bs-btn-box-shadow: none;
  --bs-btn-active-shadow: none;
  letter-spacing: var(--tracking-holgado);
  min-height: var(--alto-control);
  transition: background-color var(--dur-rapida) var(--curva-suave),
              border-color var(--dur-rapida) var(--curva-suave),
              color var(--dur-rapida) var(--curva-suave),
              transform var(--dur-rapida) var(--curva-salida);
}
.btn-sm { --bs-btn-line-height: var(--alto-control-sm); min-height: var(--alto-control-sm);
          --bs-btn-font-size: var(--texto-xs); --bs-btn-padding-x: var(--espaciado-md); }
.btn-lg { --bs-btn-line-height: var(--alto-control-lg); min-height: var(--alto-control-lg);
          --bs-btn-font-size: var(--texto-base); --bs-btn-padding-x: var(--espaciado-lg);
          --bs-btn-border-radius: var(--radio-sm); }

/* Retroalimentacion tactil: el boton confirma que la interfaz le ha oido. */
.btn:active,
.btn.active { transform: scale(var(--escala-pulsacion)); }

.btn-primary {
  --bs-btn-bg: var(--color-acento);
  --bs-btn-border-color: var(--color-acento);
  --bs-btn-color: var(--color-acento-contraste);
  --bs-btn-hover-bg: var(--color-acento-hover);
  --bs-btn-hover-border-color: var(--color-acento-hover);
  --bs-btn-hover-color: var(--color-acento-contraste);
  --bs-btn-active-bg: var(--color-acento-activo);
  --bs-btn-active-border-color: var(--color-acento-activo);
  --bs-btn-active-color: var(--color-acento-contraste);
  --bs-btn-disabled-bg: var(--color-acento);
  --bs-btn-disabled-border-color: var(--color-acento);
  --bs-btn-disabled-color: var(--color-acento-contraste);
}
/* Secundario: la accion habitual de la aplicacion. Borde y superficie,
   nunca relleno de color. */
.btn-secondary {
  --bs-btn-bg: var(--color-superficie);
  --bs-btn-border-color: var(--color-borde-fuerte);
  --bs-btn-color: var(--color-texto);
  --bs-btn-hover-bg: var(--color-superficie-tenue);
  --bs-btn-hover-border-color: var(--color-borde-fuerte);
  --bs-btn-hover-color: var(--color-texto);
  --bs-btn-active-bg: var(--color-superficie-hundida);
  --bs-btn-active-border-color: var(--color-borde-fuerte);
  --bs-btn-active-color: var(--color-texto);
  --bs-btn-disabled-bg: var(--color-superficie);
  --bs-btn-disabled-border-color: var(--color-borde);
  --bs-btn-disabled-color: var(--color-texto-desactivado);
}
.btn-link {
  --bs-btn-color: var(--color-texto-acento);
  --bs-btn-hover-color: var(--color-acento-activo);
  --bs-btn-font-weight: var(--peso-medio);
}
.btn-danger {
  --bs-btn-bg: var(--color-error-marca);
  --bs-btn-border-color: var(--color-error-marca);
  --bs-btn-color: var(--tinta-00);
  --bs-btn-hover-bg: var(--color-error-texto);
  --bs-btn-hover-border-color: var(--color-error-texto);
  --bs-btn-hover-color: var(--tinta-00);
  --bs-btn-active-bg: var(--color-error-texto);
  --bs-btn-active-border-color: var(--color-error-texto);
}

/* --- Tarjetas -------------------------------------------------------------
   Borde de un pixel y radio corto. Sin sombra por defecto: la elevacion se
   comunica con borde. Las tarjetas anidadas estan prohibidas por sistema. */
.card {
  --bs-card-bg: var(--color-superficie);
  --bs-card-color: var(--color-texto);
  --bs-card-border-width: var(--grosor-borde);
  --bs-card-border-color: var(--color-borde);
  --bs-card-border-radius: var(--radio-md);
  --bs-card-inner-border-radius: calc(var(--radio-md) - 1px);
  --bs-card-box-shadow: none;
  --bs-card-spacer-y: var(--espaciado-lg);
  --bs-card-spacer-x: var(--espaciado-lg);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--color-texto);
  --bs-card-cap-padding-y: var(--espaciado-base);
  --bs-card-cap-padding-x: var(--espaciado-lg);
  --bs-card-title-color: var(--color-texto);
  --bs-card-subtitle-color: var(--color-texto-secundario);
}
.card .card { border-width: 0; padding: 0; background: transparent; }

/* --- Formularios ----------------------------------------------------------
   Bootstrap compila .form-control y .form-select en Sass y no los expone
   como variables: hay que reescribirlos con reglas propias. */
.form-label {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-holgado);
  color: var(--color-texto-secundario);
  margin-bottom: var(--espaciado-xs);
}
.form-text {
  font-size: var(--texto-sm);
  color: var(--color-texto-auxiliar);
}
.form-control,
.form-select {
  min-height: var(--alto-control);
  padding: 0 var(--espaciado-md);
  font-family: var(--fuente-estructura);
  font-size: var(--texto-sm);
  line-height: var(--interlinea-interfaz);
  color: var(--color-texto);
  background-color: var(--color-superficie);
  border: var(--grosor-borde) solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  box-shadow: none;
  transition: border-color var(--dur-rapida) var(--curva-suave),
              box-shadow var(--dur-rapida) var(--curva-suave);
}
textarea.form-control { padding: var(--espaciado-md); line-height: var(--interlinea-lectura); }
.form-control::placeholder { color: var(--color-texto-desactivado); }
.form-control:focus,
.form-select:focus {
  color: var(--color-texto);
  background-color: var(--color-superficie);
  border-color: var(--color-borde-foco);
  box-shadow: var(--sombra-foco);
  outline: none;
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--color-superficie-hundida);
  color: var(--color-texto-desactivado);
}
.form-check-input {
  border: var(--grosor-borde) solid var(--color-borde-fuerte);
  border-radius: var(--radio-xs);
  background-color: var(--color-superficie);
  transition: background-color var(--dur-rapida) var(--curva-suave),
              border-color var(--dur-rapida) var(--curva-suave);
}
.form-check-input:checked {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
}
.form-check-input:focus {
  border-color: var(--color-borde-foco);
  box-shadow: var(--sombra-foco);
}
.input-group-text {
  background-color: var(--color-superficie-tenue);
  border: var(--grosor-borde) solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}

/* --- Tablas ---------------------------------------------------------------
   Sin bordes verticales, cebra apagada y cifras tabulares para que las
   columnas de puntuacion y peso queden alineadas. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-texto);
  --bs-table-border-color: var(--color-borde-tenue);
  --bs-table-striped-bg: var(--color-superficie-tenue);
  --bs-table-striped-color: var(--color-texto);
  --bs-table-hover-bg: var(--color-superficie-tenue);
  --bs-table-hover-color: var(--color-texto);
  --bs-table-active-bg: var(--color-acento-tenue);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}
.table > thead th {
  font-weight: var(--peso-medio);
  color: var(--color-texto-secundario);
  letter-spacing: var(--tracking-holgado);
  border-bottom-color: var(--color-borde);
  border-bottom-width: var(--grosor-borde);
}

/* --- Menus desplegables ---------------------------------------------------
   Escalan desde su disparador, no desde su centro. El origen lo fija el
   JavaScript de la aplicacion en --origen-transformacion. */
.dropdown-menu {
  --bs-dropdown-bg: var(--color-superficie-flotante);
  --bs-dropdown-color: var(--color-texto);
  --bs-dropdown-border-width: var(--grosor-borde);
  --bs-dropdown-border-color: var(--color-borde);
  --bs-dropdown-border-radius: var(--radio-md);
  --bs-dropdown-inner-border-radius: calc(var(--radio-md) - 1px);
  --bs-dropdown-box-shadow: var(--sombra-3);
  --bs-dropdown-font-size: var(--texto-sm);
  --bs-dropdown-padding-y: var(--espaciado-xs);
  --bs-dropdown-item-padding-y: var(--espaciado-sm);
  --bs-dropdown-item-padding-x: var(--espaciado-md);
  --bs-dropdown-link-color: var(--color-texto);
  --bs-dropdown-link-hover-color: var(--color-texto);
  --bs-dropdown-link-hover-bg: var(--color-superficie-tenue);
  --bs-dropdown-link-active-color: var(--color-texto);
  --bs-dropdown-link-active-bg: var(--color-acento-tenue);
  --bs-dropdown-divider-bg: var(--color-borde-tenue);
  transform-origin: var(--origen-transformacion, top left);
}
.dropdown-menu.show {
  animation: atramia-aparecer var(--dur-media) var(--curva-salida) both;
}
.dropdown-item { border-radius: var(--radio-xs); }

/* --- Modales --------------------------------------------------------------
   Los modales SI se quedan centrados: no cuelgan de ningun disparador. */
.modal {
  --bs-modal-bg: var(--color-superficie-flotante);
  --bs-modal-color: var(--color-texto);
  --bs-modal-border-width: var(--grosor-borde);
  --bs-modal-border-color: var(--color-borde);
  --bs-modal-border-radius: var(--radio-lg);
  --bs-modal-inner-border-radius: calc(var(--radio-lg) - 1px);
  --bs-modal-box-shadow: var(--sombra-4);
  --bs-modal-padding: var(--espaciado-lg);
  --bs-modal-header-padding: var(--espaciado-lg);
  --bs-modal-header-border-color: var(--color-borde-tenue);
  --bs-modal-footer-border-color: var(--color-borde-tenue);
  --bs-modal-footer-gap: var(--espaciado-sm);
}
.modal-title { font-size: var(--texto-lg); font-weight: var(--peso-fuerte);
               font-family: var(--fuente-estructura); letter-spacing: var(--tracking-titular); }
.modal-backdrop { --bs-backdrop-bg: var(--color-velo); --bs-backdrop-opacity: 1; }

/* --- Cajon lateral --------------------------------------------------------- */
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-bg: var(--color-superficie-flotante);
  --bs-offcanvas-color: var(--color-texto);
  --bs-offcanvas-border-width: var(--grosor-borde);
  --bs-offcanvas-border-color: var(--color-borde);
  --bs-offcanvas-padding-x: var(--espaciado-lg);
  --bs-offcanvas-padding-y: var(--espaciado-lg);
  --bs-offcanvas-box-shadow: var(--sombra-4);
}

/* --- Navegacion y pestanas ------------------------------------------------
   La pestana activa se marca con un filete de acento de 2px, no con un
   contorno de tres lados. */
.nav {
  --bs-nav-link-color: var(--color-texto-secundario);
  --bs-nav-link-hover-color: var(--color-texto);
  --bs-nav-link-disabled-color: var(--color-texto-desactivado);
  --bs-nav-link-font-size: var(--texto-sm);
  --bs-nav-link-font-weight: var(--peso-medio);
  --bs-nav-link-padding-x: var(--espaciado-md);
  --bs-nav-link-padding-y: var(--espaciado-sm);
}
.nav-tabs {
  --bs-nav-tabs-border-width: var(--grosor-borde);
  --bs-nav-tabs-border-color: var(--color-borde);
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--color-texto);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: var(--grosor-filete) solid transparent;
  border-radius: 0;
  transition: color var(--dur-rapida) var(--curva-suave),
              border-color var(--dur-rapida) var(--curva-suave);
}
.nav-tabs .nav-link.active { border-bottom-color: var(--color-acento); }
.nav-pills {
  --bs-nav-pills-border-radius: var(--radio-sm);
  --bs-nav-pills-link-active-bg: var(--color-acento-tenue);
  --bs-nav-pills-link-active-color: var(--color-texto);
}
.navbar {
  --bs-navbar-padding-y: var(--espaciado-sm);
  --bs-navbar-color: var(--color-texto-secundario);
  --bs-navbar-hover-color: var(--color-texto);
  --bs-navbar-active-color: var(--color-texto);
  --bs-navbar-brand-font-size: var(--texto-base);
  --bs-navbar-toggler-border-radius: var(--radio-sm);
  --bs-navbar-toggler-border-color: var(--color-borde);
  --bs-navbar-toggler-focus-width: var(--anillo-foco);
}

/* --- Alertas --------------------------------------------------------------
   Usan el trio semantico completo, asi que cumplen AA por construccion.
   El acento de marca NUNCA aparece como fondo de una alerta. */
.alert {
  --bs-alert-padding-x: var(--espaciado-base);
  --bs-alert-padding-y: var(--espaciado-md);
  --bs-alert-border-radius: var(--radio-md);
  --bs-alert-border: var(--grosor-borde) solid;
  font-size: var(--texto-sm);
}
.alert-success { --bs-alert-bg: var(--color-exito-fondo); --bs-alert-border-color: var(--color-exito-borde); --bs-alert-color: var(--color-exito-texto); }
.alert-warning { --bs-alert-bg: var(--color-aviso-fondo); --bs-alert-border-color: var(--color-aviso-borde); --bs-alert-color: var(--color-aviso-texto); }
.alert-danger  { --bs-alert-bg: var(--color-error-fondo); --bs-alert-border-color: var(--color-error-borde); --bs-alert-color: var(--color-error-texto); }
.alert-info,
.alert-secondary { --bs-alert-bg: var(--color-info-fondo); --bs-alert-border-color: var(--color-info-borde); --bs-alert-color: var(--color-info-texto); }

/* --- Avisos flotantes ------------------------------------------------------ */
.toast {
  --bs-toast-bg: var(--color-superficie-flotante);
  --bs-toast-color: var(--color-texto);
  --bs-toast-border-width: var(--grosor-borde);
  --bs-toast-border-color: var(--color-borde);
  --bs-toast-border-radius: var(--radio-md);
  --bs-toast-box-shadow: var(--sombra-3);
  --bs-toast-header-bg: transparent;
  --bs-toast-header-color: var(--color-texto-secundario);
  --bs-toast-font-size: var(--texto-sm);
}

/* --- Distintivos ----------------------------------------------------------- */
.badge {
  --bs-badge-padding-x: var(--espaciado-sm);
  --bs-badge-padding-y: var(--espaciado-2xs);
  --bs-badge-font-size: var(--texto-xs);
  --bs-badge-font-weight: var(--peso-medio);
  --bs-badge-border-radius: var(--radio-xs);
  letter-spacing: var(--tracking-holgado);
}

/* --- Acordeon -------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--color-texto);
  --bs-accordion-border-width: var(--grosor-borde);
  --bs-accordion-border-color: var(--color-borde);
  --bs-accordion-border-radius: var(--radio-md);
  --bs-accordion-inner-border-radius: calc(var(--radio-md) - 1px);
  --bs-accordion-btn-padding-x: var(--espaciado-base);
  --bs-accordion-btn-padding-y: var(--espaciado-md);
  --bs-accordion-btn-color: var(--color-texto);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: var(--sombra-foco);
  --bs-accordion-active-color: var(--color-texto);
  --bs-accordion-active-bg: var(--color-superficie-tenue);
  --bs-accordion-transition: var(--dur-media) var(--curva-salida);
  --bs-accordion-btn-icon-transition: transform var(--dur-media) var(--curva-entrada-salida);
}

/* --- Informacion sobre herramientas y ventanas emergentes ------------------ */
.tooltip {
  --bs-tooltip-bg: var(--tinta-90);
  --bs-tooltip-color: var(--tinta-00);
  --bs-tooltip-border-radius: var(--radio-sm);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-font-size: var(--texto-xs);
  --bs-tooltip-padding-x: var(--espaciado-sm);
  --bs-tooltip-padding-y: var(--espaciado-xs);
}
.popover {
  --bs-popover-bg: var(--color-superficie-flotante);
  --bs-popover-border-color: var(--color-borde);
  --bs-popover-border-radius: var(--radio-md);
  --bs-popover-box-shadow: var(--sombra-3);
  --bs-popover-header-bg: transparent;
  --bs-popover-header-color: var(--color-texto);
  --bs-popover-body-color: var(--color-texto-secundario);
  --bs-popover-font-size: var(--texto-sm);
  transform-origin: var(--origen-transformacion, center);
}

/* --- Barra de progreso -----------------------------------------------------
   Avanza por trabajos terminados, no por tiempo estimado. Nunca retrocede. */
.progress, .progress-stacked {
  --bs-progress-bg: var(--color-superficie-hundida);
  --bs-progress-height: var(--espaciado-sm);
  --bs-progress-border-radius: var(--radio-xs);
  --bs-progress-bar-bg: var(--color-acento);
  --bs-progress-font-size: var(--texto-xs);
  --bs-progress-bar-transition: width var(--dur-lenta) var(--curva-entrada-salida);
}

/* --- Paginacion y listas --------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--color-texto-secundario);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--color-borde);
  --bs-pagination-border-radius: var(--radio-sm);
  --bs-pagination-hover-bg: var(--color-superficie-tenue);
  --bs-pagination-hover-color: var(--color-texto);
  --bs-pagination-active-bg: var(--color-acento);
  --bs-pagination-active-border-color: var(--color-acento);
  --bs-pagination-active-color: var(--color-acento-contraste);
  --bs-pagination-focus-box-shadow: var(--sombra-foco);
  --bs-pagination-font-size: var(--texto-sm);
}
.list-group {
  --bs-list-group-bg: var(--color-superficie);
  --bs-list-group-color: var(--color-texto);
  --bs-list-group-border-color: var(--color-borde);
  --bs-list-group-border-radius: var(--radio-md);
  --bs-list-group-item-padding-x: var(--espaciado-base);
  --bs-list-group-item-padding-y: var(--espaciado-md);
  --bs-list-group-action-hover-bg: var(--color-superficie-tenue);
  --bs-list-group-active-bg: var(--color-acento-tenue);
  --bs-list-group-active-border-color: var(--color-borde);
  --bs-list-group-active-color: var(--color-texto);
}


/* ==========================================================================
   12. REESCRITURA DE LO QUE BOOTSTRAP COMPILA Y NO EXPONE
   Transiciones, foco y tipografia base. Ninguna animacion de Bootstrap
   conserva su temporizacion original.
   ========================================================================== */

/* --- Foco visible. No negociable: se ve igual de bien sobre claro, oscuro
       y superficie drenada. Nunca se elimina sin sustituirlo. */
:focus-visible {
  outline: 2px solid var(--color-borde-foco);
  outline-offset: 2px;
  border-radius: var(--radio-xs);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--color-borde-foco);
  outline-offset: 2px;
  box-shadow: var(--sombra-foco);
}

/* --- Transiciones de Bootstrap, reescritas sobre los tokens. */
.fade {
  transition: opacity var(--dur-media) var(--curva-salida);
}
.collapsing {
  transition: height var(--dur-lenta) var(--curva-entrada-salida);
}
.collapsing.collapse-horizontal {
  transition: width var(--dur-lenta) var(--curva-entrada-salida);
}
.modal.fade .modal-dialog {
  transform: scale(var(--escala-aparicion));
  transition: transform var(--dur-lenta) var(--curva-salida),
              opacity var(--dur-lenta) var(--curva-salida);
}
.modal.show .modal-dialog { transform: none; }
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  transition: transform var(--dur-lenta) var(--curva-cajon);
}
.nav-link, .dropdown-item, .page-link, .list-group-item-action {
  transition: background-color var(--dur-rapida) var(--curva-suave),
              color var(--dur-rapida) var(--curva-suave);
}
.progress-bar { transition: var(--bs-progress-bar-transition); }
.progress-bar-animated, .progress-bar-striped { animation: none; background-image: none; }

/* Aparicion estandar del sistema. Nada surge de scale(0). */
@keyframes atramia-aparecer {
  from { opacity: 0; transform: scale(var(--escala-aparicion)); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Estados :hover que implican transformacion: solo con raton fino,
       para que un dedo sobre una tableta no los dispare por error. */
@media (hover: hover) and (pointer: fine) {
  .atramia-elevable {
    transition: transform var(--dur-rapida) var(--curva-salida),
                box-shadow var(--dur-rapida) var(--curva-suave);
  }
  .atramia-elevable:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
}

/* --- Tipografia base del documento. */
body {
  font-family: var(--fuente-estructura);
  font-size: var(--texto-base);
  line-height: var(--interlinea-interfaz);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fuente-estructura);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-titular);
  letter-spacing: var(--tracking-titular);
  color: var(--color-texto);
  text-wrap: balance;
}

/* La familia de LECTURA marca lo que es contenido, no interfaz.
   Se aplica a la previsualizacion de la ficha y al texto largo de la vitrina. */
.texto-contenido {
  font-family: var(--fuente-lectura);
  font-size: var(--texto-base);
  line-height: var(--interlinea-lectura);
  max-width: var(--medida-lectura);
  text-wrap: pretty;
}
/* Cifras alineadas en columnas de puntuacion, peso y coste. */
.cifras { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   13. MOVIMIENTO REDUCIDO
   Se reduce a 1ms y no a 0 para que el evento transitionend siga
   disparandose y no se quede logica de jQuery esperando indefinidamente.
   Se conservan opacidad y color, que ayudan a entender que ha cambiado;
   se anulan desplazamientos y transformaciones.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instante: 1ms;
    --dur-rapida: 1ms;
    --dur-media: 1ms;
    --dur-salida: 1ms;
    --dur-lenta: 1ms;
    --dur-vitrina: 1ms;
    --escalonado: 0ms;
    --escala-aparicion: 1;
    --escala-pulsacion: 1;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .btn.active { transform: none; }
  .atramia-elevable:hover { transform: none; }
  .modal.fade .modal-dialog { transform: none; }
}