/* ═══════════════════════════════════════════════════════════════════════════
   PUENTE — los tokens de la plataforma heredada, en términos de la marca
   ═══════════════════════════════════════════════════════════════════════════

   ┌─ Qué es esto y por qué existe ───────────────────────────────────────────┐

   SENSEI hereda 37 vistas que usan el sistema de clases `.v-*` de la
   plataforma anterior, cuyos tokens `--v-*` tenían la identidad de ESE cliente
   escrita a mano: los verdes `#0C3B36` y `#14A07A`.

   Migrar las 37 vistas al sistema nuevo es trabajo real y se hace de a una.
   Pero hasta que eso termine, cada pantalla no migrada muestra la marca del
   cliente equivocado — y una demostración donde la mitad de las pantallas son
   verdes cuando el banco es rojo no es una demostración, es un error.

   Este archivo separa los dos problemas. Redefine los tokens heredados en
   términos de `--marca-*`, así CUALQUIER pantalla queda con los colores de la
   instalación aunque su marcado siga siendo el viejo. La migración de vistas
   deja de ser un bloqueante de la marca y pasa a ser lo que es: una mejora
   gradual.

   └──────────────────────────────────────────────────────────────────────────┘

   Se carga DESPUÉS de `vitta.css` para ganarle en la cascada, y desaparece el
   día que no quede ninguna vista con clases `.v-*`. Que ese día llegue es el
   objetivo; que este archivo crezca es la señal de que no está llegando.

   Verificación: `tools/puente-vitta.php` cuenta cuántas vistas siguen usando
   `.v-*` y falla si el número SUBE.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ┌─ Por qué `:root:root` y no `:root` ────────────────────────────────────┐
 *
 * `vitta.css` declara su paleta oscura dentro de
 * `:root:not([data-theme="light"])`, que pesa MÁS que un `:root` a secas.
 * Cargar el puente después no alcanzaba: la especificidad le gana al orden,
 * así que los verdes del cliente anterior volvían en cuanto el navegador
 * estaba en modo oscuro.
 *
 * Repetir `:root` empata la especificidad, y ahí sí manda el orden. Es feo
 * y es deliberado: la alternativa era copiar el selector completo de la
 * hoja heredada, que ata este archivo a un detalle interno de la otra.
 *
 * Desaparece con el puente, el día que no quede ninguna vista heredada.
 *
 * └───────────────────────────────────────────────────────────────────────┘
 */
:root:root {
  /*
   * El puente tambien tiene que reclamar `color-scheme`.
   *
   * Remapear los tokens `--v-*` no alcanzaba: `vitta.css` declara
   * `color-scheme: dark` dentro de su bloque de modo oscuro, y ese valor es
   * el que consulta `light-dark()` para elegir rama. Resultado: los tokens
   * resolvian correctamente a `light-dark(claro, oscuro)` y el navegador
   * elegia el oscuro igual, porque nadie le habia dicho lo contrario.
   *
   * Se tardo en ver porque los valores se veian BIEN al inspeccionarlos: la
   * funcion estaba armada y apuntaba a los colores correctos. Lo que estaba
   * mal era el interruptor que decide cual de los dos se usa.
   */
  color-scheme: var(--marca-esquema, light dark);

  /* ── Marca ────────────────────────────────────────────────────────────── */
  /* `--v-deep` era el verde profundo del sidebar y las tarjetas oscuras. Su
     equivalente semántico no es el acento sino el neutro más oscuro: en la
     plataforma nueva las superficies profundas no llevan color de marca. */
  --v-deep:      var(--marca-neutro-800);
  --v-deep-2:    var(--marca-neutro-700);
  --v-green:     var(--marca-primaria);
  --v-green-2:   var(--marca-primaria-oscura);
  --v-green-3:   var(--marca-primaria-oscura);
  --v-line-dark: var(--marca-neutro-600);
  --v-lime:      var(--marca-primaria);

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --v-ink:          var(--s-tinta);
  --v-ink-2:        var(--s-tinta-2);
  --v-muted:        var(--s-tenue);
  --v-muted-2:      var(--s-apagado);
  --v-on-deep:      var(--marca-neutro-0);
  --v-on-deep-soft: var(--marca-neutro-300);

  /* ── Superficies ──────────────────────────────────────────────────────── */
  --v-bg:      var(--s-fondo);
  --v-surface: var(--s-superficie);
  --v-border:  var(--s-borde);
  --v-fill:    var(--s-relleno);
  --v-fill-2:  var(--s-relleno);
  --v-fill-3:  var(--s-accento-suave);

  /* ── Estados ──────────────────────────────────────────────────────────── */
  --v-ok-bg:         var(--s-ok-fondo);
  --v-ok-fg:         var(--s-ok);
  --v-mine-bg:       var(--s-accento-suave);
  --v-warn-bg:       var(--s-aviso-fondo);
  --v-warn-fg:       var(--s-aviso);
  --v-warn-solid:    var(--s-aviso);
  --v-danger-bg:     var(--s-peligro-fondo);
  --v-danger-fg:     var(--s-peligro);
  --v-danger-border: color-mix(in srgb, var(--s-peligro) 30%, transparent);
  --v-info-bg:       var(--s-info-fondo);
  --v-info-fg:       var(--s-info);

  /* ── Tipos de documento del banco de conocimiento ─────────────────────── */
  --v-type-pdf:      var(--marca-primaria);
  --v-type-video:    var(--s-tinta-2);
  --v-type-onepager: var(--s-info);
  --v-type-vr360:    var(--s-ok);
  --v-type-tool:     var(--s-aviso);
  --v-type-link:     var(--s-tenue);

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  --v-font-title: var(--s-fuente-titulo);
  --v-font-body:  var(--s-fuente-cuerpo);
}

/*
 * El encabezado heredado usaba el verde profundo de marca como fondo. Con la
 * remapeo de arriba pasa a ser el neutro oscuro, que es lo correcto: el color
 * de marca es para las ACCIONES, no para las superficies. Un banco cuyo rojo
 * ocupa la barra superior entera convierte el color de sus botones en fondo, y
 * los botones dejan de destacar.
 */