/* ═══════════════════════════════════════════════════════════════════════
   SABAI · Piezas compartidas · sabai-piezas.css   (F2 de vanguardia, 31/08/2026)
   ───────────────────────────────────────────────────────────────────────
   Los tokens (sabai-tokens.css) dicen QUÉ colores y formas tiene la
   casa; este archivo dice CÓMO son sus piezas. Hasta hoy cada pantalla
   reescribía su tarjeta, su botón, su galleta, su hoja y su toast — 11
   tarjetas, 7 botones, 9 hojas y 12 toasts distintos conviviendo. Las
   piezas nuevas viven aquí UNA vez, con el prefijo `sb-` para no chocar
   con las locales mientras las pantallas migran por tandas.

   Regla de la migración: una pantalla que adopta una pieza BORRA su
   versión local. Ninguna pantalla mantiene las dos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tarjeta ─────────────────────────────────────────────────────── */
.sb-tarjeta {
  background: var(--sb-superficie);
  border: 1.5px solid var(--sb-linea);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-sombra);
  padding: 18px;
}

/* ── Botón ───────────────────────────────────────────────────────────
   Base neutra + dos apellidos. Altura mínima 44px: el mínimo táctil
   de las guías de plataforma (Apple 44pt, Material 48dp; WCAG 2.2
   exige 24 y aquí no se baja de 44). */
.sb-btn {
  font: inherit; font-size: calc(15px * var(--sb-tx, 1)); font-weight: 700;
  min-height: 44px; padding: 11px 18px;
  border: 1.5px solid var(--sb-linea); border-radius: 999px;
  background: var(--sb-superficie); color: var(--sb-tinta);
  cursor: pointer;
  transition: transform var(--sb-t-rapida) var(--sb-ease);
}
.sb-btn:active { transform: scale(.96); }
.sb-btn:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }
.sb-btn.principal {
  background: var(--sb-acento); border-color: var(--sb-acento);
  color: var(--sb-fondo);
}
.sb-btn.persona {
  background: var(--sb-persona, var(--sb-acento));
  border-color: var(--sb-persona, var(--sb-acento));
  color: var(--sb-persona-tinta, var(--sb-fondo));
}

/* ── Galleta (chip) ──────────────────────────────────────────────────
   El estado elegido se pinta SIEMPRE igual: relleno sólido. (Hasta hoy
   Ajustes lo pintaba tenue y Nuestra casa sólido: la misma pieza decía
   dos cosas.) */
.sb-chip {
  font: inherit; font-size: calc(14px * var(--sb-tx, 1)); font-weight: 700;
  min-height: 44px; padding: 9px 16px;
  border: 1.5px solid var(--sb-linea); border-radius: 999px;
  background: var(--sb-superficie); color: var(--sb-tinta);
  cursor: pointer;
  transition: transform var(--sb-t-rapida) var(--sb-ease);
}
.sb-chip:active { transform: scale(.96); }
.sb-chip:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }
.sb-chip[aria-pressed="true"], .sb-chip[aria-selected="true"] {
  background: var(--sb-persona, var(--sb-acento));
  border-color: var(--sb-persona, var(--sb-acento));
  color: var(--sb-persona-tinta, var(--sb-fondo));
}

/* ── Hoja inferior (velo + hoja) ─────────────────────────────────────
   La pieza que más veces se reescribió (9). Un velo, un radio, una
   altura con dvh y su reserva, y el centrado en pantalla grande a un
   único punto de ruptura (900px, el que ya usaban casa y la ayuda). */
.sb-velo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28, 31, 29, .45);
  display: none;
}
.sb-velo.se-ve { display: block; }
.sb-hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--sb-superficie);
  border-radius: var(--sb-r-lg) var(--sb-r-lg) 0 0;
  box-shadow: var(--sb-sombra-alta);
  max-height: 92vh; max-height: 92dvh;
  overflow: auto; overscroll-behavior: contain;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(102%);
  transition: transform var(--sb-t) var(--sb-ease);
  /* La entrada con muelle va en segunda declaración Y con la curva
     ESCRITA (no var(--sb-muelle)): así un navegador sin linear() la
     tira al parsear y se queda la de arriba. Con var() el fallo llega
     tarde y anularía la propiedad entera. */
  transition: transform .5s linear(0, .32 22%, .72 40%, 1.02 62%, .99 80%, 1);
}
.sb-hoja.se-ve { transform: none; }
@media (min-width: 900px) {
  .sb-hoja {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(560px, calc(100vw - 48px));
    transform: translate(-50%, -50%) scale(.97); opacity: 0;
    border-radius: var(--sb-r-lg);
    max-height: 86vh; max-height: 86dvh;
    transition: transform var(--sb-t) var(--sb-ease), opacity var(--sb-t) var(--sb-ease);
    pointer-events: none;
  }
  .sb-hoja.se-ve { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
}

/* ── Toast ───────────────────────────────────────────────────────────
   Lo pinta assets/js/toast.js dentro de #sbToasts (aria-live). Una
   sola generación: la de animation, que era la mayoritaria. */
#sbToasts {
  position: fixed; left: 16px; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.sb-toast {
  background: var(--sb-tinta); color: var(--sb-fondo);
  font-weight: 600; font-size: calc(14px * var(--sb-tx, 1)); line-height: 1.4;
  white-space: pre-line;
  padding: 12px 18px; border-radius: var(--sb-r-lg);
  box-shadow: 0 8px 24px rgba(28, 31, 29, .25);
  animation: sbToastIn .22s var(--sb-ease);
  text-align: center; max-width: 100%;
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
}
.sb-toast button {
  font: inherit; font-weight: 800; cursor: pointer;
  background: none; border: none; padding: 4px 2px;
  color: var(--sb-fondo); text-decoration: underline;
  min-height: 32px;
}
.sb-toast button:focus-visible { outline: 2px solid var(--sb-fondo); outline-offset: 2px; }
@keyframes sbToastIn { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .sb-toast { animation: none; }
  .sb-hoja { transition: none; }
  .sb-btn, .sb-chip { transition: none; }
}