/* accesibilidad.css — El foco, el panel de teclado y los tamanos tactiles.
 *
 * Va aparte de constructor.css a proposito: este archivo es de la capa de
 * accesibilidad (app/accesibilidad.js) y asi se puede revisar, cambiar o quitar
 * sin tocar el diseno del constructor.
 *
 * Tres reglas que se cumplen aqui y que la spec §9 pide con nombre:
 *   1. El foco se VE siempre, tambien sobre el lienzo y sobre los botones
 *      pequenos de la biblioteca (WCAG 2.4.7 y 2.4.11).
 *   2. Nada se entiende SOLO por color: el estado lleva su palabra al lado.
 *   3. Lo que se toca mide al menos 24x24 px, y 44 px donde se toca con el dedo
 *      (WCAG 2.5.8 y 2.5.5).
 *
 * Todos los colores salen del contrato de diseno (/design/tokens.css): aqui no
 * hay ni un color suelto, para que un cambio de tema no deje nada ilegible.
 */

:root {
  --a11y-foco: var(--focus);
  --a11y-foco-ancho: 3px;
  --a11y-foco-hueco: 2px;
}

/* --------------------------------------------------------------- el foco -- */

/* Un solo anillo para todo lo que se puede enfocar dentro del constructor.
   `:focus-visible` y no `:focus`: con el raton no hace falta el aro, con el
   teclado si, y esa es justo la diferencia que hace el navegador. */
#lienzo :focus-visible,
.lienzo :focus-visible,
.inspector :focus-visible,
.riel :focus-visible,
.cajon :focus-visible,
.biblio :focus-visible,
#a11y-panel :focus-visible,
#a11y-abrir:focus-visible,
#vista:focus-visible {
  outline: var(--a11y-foco-ancho) solid var(--a11y-foco);
  outline-offset: var(--a11y-foco-hueco);
  border-radius: 6px;
}

/* Sobre el lienzo el aro solo no basta: el fondo puede ser del mismo azul que
   la pieza. Se anade un halo por fuera para que se vea en los dos temas. */
#vista:focus-visible {
  outline-offset: -6px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--a11y-foco) 30%, transparent);
}

/* El enlace de salto ya existe en el HTML; se le da forma cuando se enfoca. */
.salto:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--a11y-foco);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------- el panel -- */

/* El boton que abre el panel. No depende de ningun atajo: se ve y se pulsa. Su
   sitio es el pie del lienzo, en el grupo que comparte con el cuadro del paso
   (`.lienzo__pie`), asi que es el grupo el que se pega a la esquina y el boton
   solo se coloca dentro. La regla de abajo es el respaldo por si el grupo no
   estuviera. */
.lienzo > #a11y-abrir {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 22;
}

#a11y-abrir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-control, 8px);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--text) 14%, transparent);
  cursor: pointer;
}

#a11y-abrir:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

#a11y-abrir .ico {
  width: 18px;
  height: 18px;
}

#a11y-panel {
  position: absolute;
  left: 12px;
  bottom: 60px;
  z-index: 23;
  width: min(330px, calc(100% - 24px));
  /* 384 px y no 420: el panel comparte la franja del lienzo con la hoja del
     inspector y con 420 el aro de giro no cabia a 390x800. */
  max-height: min(48vh, 384px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow: auto;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 22%, transparent);
  font-size: var(--text-sm);
}

#a11y-panel[hidden] {
  display: none;
}

/* El titulo y la X de cerrar, en la misma fila: el panel ya se cierra con Esc y
   con el boton de la barra, pero con el dedo hace falta una X a mano. */
.a11y__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.a11y__titulo {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
}

/* 44x44 siempre, no solo con el dedo: es el objetivo tactil de la WCAG 2.5.5 y
   el panel se usa igual desde una tableta. */
.a11y__cerrar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.a11y__cerrar:hover {
  color: var(--text);
  background: var(--surface-2);
}

.a11y__cerrar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.a11y__ayuda {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.a11y__estado {
  margin: 0;
  padding: 8px 10px;
  background: var(--primary-soft);
  border-radius: 8px;
  color: var(--on-primary-soft);
  line-height: 1.45;
}

.a11y__rotulo {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

/* Las listas son listbox de verdad: se entra con Tab una vez y se anda con las
   flechas, como en cualquier lista del sistema. */
.a11y__lista {
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 132px;
  /* Un hijo flex con overflow tiene alto minimo automatico 0, asi que el panel
     (que tiene max-height) lo aplastaba hasta dejarlo en una franja: medido con
     dos piezas y doce anclajes, la lista de piezas salia a 21 px. Con flex:none
     no se encoge, y el minimo de dos filas la deja usable; el que scrollea es
     el panel, no la lista. */
  flex: 0 0 auto;
  min-height: 96px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.a11y__opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.35;
}

.a11y__opcion[aria-selected="true"] {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-weight: 600;
}

.a11y__opcion[data-activa="si"] {
  outline: 2px solid var(--a11y-foco);
  outline-offset: -2px;
}

.a11y__opcion--vacia {
  color: var(--text-muted);
  cursor: default;
  font-style: italic;
}

/* La marca de estado lleva SU PALABRA al lado: el color solo acompana. */
.a11y__marca {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.a11y__marca--libre { background: var(--success); }
.a11y__marca--ocupada { background: var(--danger); }
.a11y__marca--compatible { background: var(--primary); }

.a11y__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.a11y__boton {
  /* 44 px tambien sin dedo detectado: una tableta con raton o un portatil
     tactil no dicen «pointer: coarse» y el boton quedaba en 34. */
  min-height: 44px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.a11y__boton--principal {
  color: var(--on-primary);
  background: var(--primary);
}

.a11y__boton:hover {
  border-color: var(--border-strong);
}

/* --------------------------------------------------------- tactil y movil -- */

/* Con el dedo, nada por debajo de 44 px: la spec §9 y la WCAG 2.5.5. */
@media (pointer: coarse) {
  .a11y__opcion { min-height: 44px; }
  .a11y__boton { min-height: 44px; }
  #a11y-abrir { min-height: 44px; }
  #a11y-panel { max-height: min(48vh, 384px); }
}

/* Y en cualquier aparato, lo pequeno del constructor no baja de 24 px de alto
   cuando se toca con el dedo (WCAG 2.5.8). El diseno del raton no se toca. */
@media (pointer: coarse) {
  .biblio__estrella,
  .inspector__pestana,
  .riel__boton,
  .cajon__puerta,
  .biblio__puerta {
    min-height: 24px;
    min-width: 24px;
  }
}

/* Si el sistema pide menos movimiento, el panel no anima nada. */
@media (prefers-reduced-motion: reduce) {
  #a11y-panel,
  #a11y-abrir {
    transition: none;
  }
}