/* [SALTAR] «Saltar al contenido»: el primer control de la página, invisible hasta que hace falta.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * QUE PROBLEMA RESUELVE, MEDIDO
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * Contado el 2026-08-23 sobre las ocho puertas: **cero enlaces de salto**, y `panel.html` con
 * **164 controles tabulables** en el marcado estático. Quien navega con teclado —o con un
 * lector de pantalla, o con un conmutador— tenía que atravesar el menú entero, en cada
 * pantalla y en cada visita, para llegar a lo que vino a leer.
 *
 * Es WCAG 2.4.1 (Bypass Blocks), nivel A: el nivel más básico que existe.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * POR QUE NO `display:none` NI `visibility:hidden`
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * Es EL error clasico de este patron, y deja el enlace inutil sin que nada se vea mal: las
 * dos propiedades sacan al elemento del orden de tabulacion, asi que el enlace que existe
 * para recibir el primer Tab nunca lo recibe.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * POR QUE TAMPOCO SE ESCONDE CON `transform`, QUE ERA MI PRIMERA VERSION
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * MEDIDO EN `panel.html`: escondido con `position:fixed` + `translateY(-200%)`, el enlace
 * quedaba en `top: -42` y `bottom: +1` — **un pixel asomando** en el borde superior—, y con
 * foco aparecia en `left: 753` en vez de `left: 10`.
 *
 * El motivo es que `position: fixed` NO ES FIJA cuando algun ancestro tiene `transform`,
 * `filter` o `will-change`: ese ancestro pasa a ser el bloque contenedor y el elemento se
 * comporta como `absolute` respecto de el. Como el escondite se medía en porcentaje del
 * propio elemento y el punto de partida dependía de esa caja, el resultado cambiaba de puerta
 * en puerta — y no hay forma de saber, desde esta hoja, que ancestros tiene cada una.
 *
 * El recorte de 1px NO depende de nada de eso: el elemento mide un pixel y esta recortado,
 * asi que no hay nada que asome ni posicion que calcular. Al recibir el foco se convierte en
 * una caja de verdad. Es el patron estandar, y la objecion que le puse la primera vez —«un
 * blanco de clic de 1px»— era equivocada: recortado no es un blanco de clic, es nada.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * DONDE SE PONE Y DONDE NO
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * Sólo donde hay algo que saltar: un bloque que se repite antes del contenido. Medido:
 *
 *     index      un `<aside>` con el historial y el tema, antes de `<main>`   SI
 *     panel      `<nav id="panel-nav">` con doce secciones · 164 tabulables    SI
 *     partner    `<nav id="n2-nav">` antes de `<main id="n2-main">`            SI
 *     permisos   todo vive dentro de `<main>`; sólo hay un `<header>` antes    no
 *     ti         3 controles                                                   no
 *     automatizaciones  1 control                                              no
 *     login / cambiar-clave   una tarjeta, 3 y 8 controles                     no
 *
 * Un «saltar al contenido» en una pantalla de login salta tres campos y aterriza en el
 * cuarto: es un control que promete un atajo y no ahorra nada. Ponerlo «por consistencia»
 * enseña que los enlaces de salto no sirven, que es peor que no tenerlo.
 *
 * Marca buscable: saltar_al_contenido_2026_08_23
 */

/*  ── ESCONDIDO: UN PIXEL, RECORTADO, Y DENTRO DEL ORDEN DE TABULACION ────────────────── */
.bm-saltar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*  ── CON FOCO: UNA CAJA DE VERDAD, ARRIBA A LA IZQUIERDA ───────────────────────────────
    `position: fixed` acá SI puede quedar contenida por un ancestro con `transform` —no hay
    manera de impedirlo desde esta hoja—, y no importa: contenida o no, aparece arriba a la
    izquierda de su caja, que es donde alguien la busca. Lo que importaba era que ESCONDIDA no
    dependiera de esa caja, y ya no depende.  */
.bm-saltar:focus,
.bm-saltar:focus-visible {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;          /* por encima de todo: si queda debajo, se enfoca y no se ve */
  width: auto;
  height: auto;
  min-height: 40px;
  margin: 0;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  overflow: visible;
  clip-path: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;

  /*  LOS COLORES SE DECLARAN AQUI Y NO SE HEREDAN. Este enlace aparece sobre lo que haya
      debajo —un menú, una tarjeta, un gráfico— así que no puede confiar en el fondo de nadie.
      Y no usa tokens: es la única hoja que cargan las tres puertas, y las tres nombran sus
      colores distinto (`--primary` / `--granate`). Ver `docs/ux/lenguaje-visual-2026-08-23.md`:
      mientras esa deuda exista, un `var()` acá pintaría distinto en cada una.  */
  background: #ffffff;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

/*  NO HAY TRANSICION QUE APAGAR. La primera version deslizaba el enlace hacia adentro y esta
    hoja tenia que acordarse de apagar ese movimiento para quien pidio que no lo hubiera. Al
    pasar al recorte, el enlace aparece y ya: una cosa menos que recordar, y una menos que
    puede quedar mal.  */

/*  EL DESTINO NO PUEDE DIBUJAR UN ANILLO AL RECIBIR EL FOCO. Recibe el foco porque alguien
    saltó hasta él, no porque lo esté recorriendo: un contorno alrededor de media pantalla
    confunde más de lo que ayuda. El anillo sigue existiendo para todo lo demás — esto es una
    excepción de UN elemento, declarada, no `outline:none` a la buena de Dios.  */
[data-bm-destino]:focus { outline: none; }


/* ── UN TITULO QUE SE OYE Y NO SE VE ─────────────────────────────────────────────────────
 *
 * MEDIDO EL 23-08-2026: `index.html` y `panel.html` NO TIENEN `<h1>`. Empiezan en `<h2>`.
 *
 * Quien navega por encabezados —una de las formas mas comunes de recorrer una pagina con
 * lector de pantalla— no tenia punto de partida: la lista de titulos empezaba a mitad de
 * camino, sin nada que dijera de que pagina se trata.
 *
 * NO SE AGREGA UN TITULO VISIBLE, y no es por pereza: las dos pantallas ya dicen de que son
 * —el logo, el nombre del tenant, la seccion activa— y meter un `<h1>` grande arriba
 * empujaria todo hacia abajo para repetir algo que ya esta. El titulo que falta es el
 * ESTRUCTURAL, y ese se puede dar sin ocupar un pixel.
 *
 * MISMA TECNICA QUE `.bm-saltar` Y POR LA MISMA RAZON: `clip-path` y no `display:none` ni
 * `visibility:hidden`, que sacarian el elemento del arbol de accesibilidad y lo dejarian
 * invisible tambien para el lector — o sea, sin resolver nada.
 *
 * A diferencia del enlace de salto, este NO reaparece con el foco: un encabezado no se
 * enfoca, se lee.  */
.bm-solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}