/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · Acción de barra — GEMELO VANILLA (hoja) ▓
   v0.1 · 2026-10-02. Ficha: `design-system/COMPONENTE_ACCION_BARRA.md`.
   Kit React hermano: `design-system/catalogo-cd/components/AccionBarra.jsx`.

   `DECISION-FUENTE: Ricardo, 2026-10-02 — «Este debe ser un botón genérico que permita
   integrar ahí diferentes opciones como maximizar pantalla, abrir otra ventana, descarga,
   etc.»`

   ⛔ ESTA HOJA NO DIBUJA NINGÚN BOTÓN. Cada acción es el `Button` ghost sm sólo-ícono, el menú
   es el `Menu`, el globo es el `Tooltip` y el ícono que se desdobla en espera es el
   `BotonDescargaMorph`: fondo, hover, foco, tamaño, popover y globo son de ellos. Lo único propio
   es (1) el GRUPO que separa las acciones 4 px, (2) la guarda del atributo `hidden` (un envoltorio
   con `display` de clase le gana al `[hidden]` del navegador: sin la guarda, apagarlo por atributo
   no lo apaga) y (3) el estado «maximizado», que no es de ningún botón sino de LO QUE SE AMPLÍA.

   REQUISITOS DEL ANFITRIÓN — cargados ANTES, en este orden:
     1. Los tokens del canon (`colors_and_type.css`) y `box-sizing: border-box`.
     2. `componentes/button/button.css`
     3. `componentes/boton-descarga-morph/boton-descarga-morph.css` + `.js` (la acción «descargar»)
     4. `componentes/menu/menu.css` + `.js` (la descarga con más de un formato y el «más acciones»)
     5. `componentes/tooltip/tooltip.css` + `.js`
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-ab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  flex: none;
}
.exds-ab[hidden] {
  display: none;
}
.exds-ab-item {
  display: inline-flex;
  flex: none;
}
.exds-ab-item[hidden] {
  display: none;
}
/* Papel 9, el mismo que lista → detalle: la superficie entra desde el centro de la tarjeta
   (escala --motion-profundidad-detalle → 1 + fundido). El texto sube 6 px en el MISMO
   reloj y la misma curva (Ricardo, 2026-10-19, hoja de comparación, «aprobado»): si
   arranca después, se ve en dos tiempos. Los botones no suben. Mientras vuela no es una
   tarjeta: sin radio, sin sombra y sin recorte — si no, el borde redondo y el overflow
   cortan el efecto. El origen lo escribe accion-barra.js en --exds-ab-origen, medido
   ANTES de ocupar la ventana. */
@keyframes exds-ab-max-in {
  from { opacity: 0; transform: scale(var(--motion-profundidad-detalle, 0.96)); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes exds-ab-max-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(var(--motion-profundidad-detalle, 0.96)); }
}
@keyframes exds-ab-texto-in {
  from { transform: translateY(6px); }
  to   { transform: none; }
}
@keyframes exds-ab-texto-out {
  from { transform: none; }
  to   { transform: translateY(6px); }
}
.exds-card[data-ab-maximizado="true"],
[data-ab-maximizado="true"] {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1100);
  margin: 0;
  overflow: auto;
  border-radius: 0;
  box-shadow: none;
  border-color: transparent;
  background: var(--color-surface, #FFFFFF);
  transform-origin: var(--exds-ab-origen, center center);
  animation: exds-ab-max-in var(--motion-slow, 400ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
[data-ab-en-vuelo="true"] { overflow: visible; }
/* Tiene que ganar a la regla de la ida: si no, al restaurar sigue la animación de abrir
   y la tarjeta vuelve de golpe. La vuelta es más corta que la ida, y se ve. */
.exds-card[data-ab-maximizado="true"][data-ab-restaurando="true"],
[data-ab-maximizado="true"][data-ab-restaurando="true"] {
  animation: exds-ab-max-out var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
[data-ab-maximizado="true"] [data-ab-eleva] {
  animation: exds-ab-texto-in var(--motion-slow, 400ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
[data-ab-maximizado="true"][data-ab-restaurando="true"] [data-ab-eleva] {
  animation: exds-ab-texto-out var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  @keyframes exds-ab-max-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes exds-ab-max-out { from { opacity: 1; } to { opacity: 0; } }
  [data-ab-eleva] { animation: none; }
}