/* ─────────────────────────────────────────────────────────────────────────
   24·90 FC · capa compartida de controles

   Cada página trae su propia paleta, con los mismos nombres de token y
   valores distintos: la landing, el acervo y mercadeo son oscuros, el
   reglamento cambia con el tema del sistema. Esta hoja no toca el color:
   define la FORMA de los controles, que es lo que hacía que cada página
   se viera de una familia distinta. Los radios iban de 2 a 9 píxeles sin
   criterio, y ahora salen de un solo sitio.

   Se enlaza ANTES del <style> de cada página, así lo específico manda:
   un disco de persona que declara 50% sigue siendo un círculo.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --r:9px;      /* botón de navegación, pestañas, tarjetas de control */
  --r-s:6px;    /* controles pequeños: fichas, celdas, campos */
  --r-l:12px;   /* superficies grandes: paneles y ventanas */
  --lift:translateY(-1px);

  /* ── El tiempo de la casa. Estaba repartido en .12s, .18s y .2s puestos a
     ojo, y ninguno usaba la curva del revelado —cubic-bezier(.22,.61,.36,1)—,
     así que las microinteracciones salían con el «ease» del navegador, que
     arranca lento y llega lento: en 180 ms eso se siente blando.

     Dos duraciones y una sola curva. Dos, no una: el gesto que confirma que
     algo respondió —el botón que sube un píxel— tiene que ir por delante del
     que cambia el color, o se lee como un retardo. Un tercer valor sí sobraba.
     ── */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --paso: .18s;    /* color, fondo, borde: lo que cambia de estado */
  --toque: .12s;   /* el píxel que sube: tiene que ir por delante */
}

/* Todo control cuadrado hereda el radio. Lo que quiera ser círculo o
   rectángulo lo declara en su página y gana por orden de cascada. */
button,select,input:not([type=checkbox]):not([type=radio]),textarea,.chip,.men{
  border-radius:var(--r-s);
}

/* El botón de navegación de la portada, disponible en todas partes.
   Sube un píxel al pasar el puntero: es el gesto que da la sensación de
   que la interfaz responde, y no cuesta nada. */
.b{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:7px 12px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--night);color:var(--soft);font:inherit;
  transition:background var(--paso) var(--curva),border-color var(--paso) var(--curva),
              transform var(--toque) var(--curva);
}
.b:hover{border-color:var(--soft);transform:var(--lift)}
.b:active{transform:none}
.b-on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.b-on:hover{transform:none}

/* Un solo anillo de foco en todo el sitio.
   summary va en la lista aunque no lo parezca: es enfocable por teclado y no es
   ninguno de los otros, así que se quedaba fuera y caía al anillo del navegador.
   Eran los diez acordeones de la portada, el único control del sitio fuera del
   sistema. */
:where(button,select,input,textarea,a,summary,[tabindex]):focus-visible{
  outline:2px solid var(--bone);outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .b{transition:none}
  .b:hover{transform:none}
}