/**
 * P-02 · Acción compacta con ícono — .scm-ui-act
 *
 * FUENTE DE VERDAD: docs/ui/ICONS. Ese documento sustituye a lo que
 * COMPONENTS.md decía de este patrón (58×54px, ícono SVG de P-06, anatomía
 * móvil invertida). Si los dos discrepan, manda ICONS.
 *
 * Caja visible 54×50px, idéntica en escritorio y móvil. El contenido nunca
 * cambia el tamaño del botón: si la etiqueta no cabe, se recorta con ellipsis.
 *
 * El glifo sale de Material Icons Round —no del diccionario SVG de P-06— y
 * hereda el color del botón por currentColor. La hoja de Google ya viene
 * encolada por el shell (scm-material-icons) y por el módulo Servidores
 * (scm-srv-material-icons): este patrón no añade ninguna dependencia nueva.
 *
 * Dos tratamientos, y el neutro es el predeterminado (§7): la caja blanca,
 * el borde gris suave y la etiqueta gris oscura no cambian nunca por sí
 * solas; el acento llega únicamente al glifo. La variante semántica pintada
 * es la excepción y hay que pedirla a mano con --semantic.
 *
 * Los colores viven en 00-tokens.css porque el §7.4 exige que las
 * equivalencias oscuras sean tokens globales del componente, y así aquí no
 * se menciona el tema (G-17).
 */

.scm-ui-act {
  /* Las cuatro variables del §7.3. Son locales al componente a propósito:
     es lo único que un modificador de color puede tocar. Su valor por
     defecto sale del token global, que ya trae su equivalencia oscura. */
  --scm-act-bg:     var(--scm-ui-act-bg);
  --scm-act-border:  var(--scm-ui-act-line);
  --scm-act-icon:    var(--scm-ui-act-fg);
  --scm-act-label:   var(--scm-ui-act-fg);

  box-sizing: border-box;
  display: flex;
  flex: 0 0 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  min-width: 54px;
  height: 50px;
  min-height: 50px;
  padding: 4px 2px;
  gap: 2px;
  overflow: hidden;
  border: 1px solid var(--scm-act-border);
  border-radius: var(--scm-ui-r-sm);
  background: var(--scm-act-bg);
  color: var(--scm-act-label);
  font-family: var(--scm-ui-font);
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

/* ── Glifo ───────────────────────────────────────────────────────────
   Sin chip, sin círculo, sin caja interior, sin borde ni fondo propios:
   se dibuja directamente sobre el fondo del botón (ICONS §5).

   18px, no 16: la caja pasó de 42 a 50px de alto y el glifo de 16px caía a
   un 32% del alto —antes ocupaba el 38%— y se leía pequeño con demasiado
   aire alrededor. 18px devuelve el 36%, que es la proporción de siempre.
   Es el ÚNICO ajuste interno y vive en esta regla compartida: ningún ícono
   se toca por separado, ni cambia su dibujo, su color ni su asignación.

   La segunda cadena existe porque la hoja de Google sirve
   `.material-icons-round { font-size: 24px }` con la misma especificidad
   que la clase del patrón. Hoy gana el orden de carga (la biblioteca va en
   prioridad 99), pero eso depende de en qué hook encole cada módulo su
   copia de Material Icons; con el scope deja de depender de nada.       */
.scm-ui-act__icon,
.scm-ui .scm-ui-act__icon {
  font-size: 18px;
  line-height: 18px;
}

.scm-ui-act__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--scm-act-icon);
}

/* ── Etiqueta ────────────────────────────────────────────────────────
   9px es una desviación declarada del mínimo de 12px del sistema, aprobada
   en ICONS §6: va bajo un ícono que ya comunica la acción y dentro de una
   caja de alto fijo. Nunca se reduce más para hacer caber una palabra: si
   no cabe, se recorta.                                                  */
.scm-ui-act__label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--scm-ui-font);
  font-size: 9px;
  font-weight: var(--scm-ui-fw-soft);
  line-height: 1.1;
  color: var(--scm-act-label);
}

/* ── Acentos del glifo — tratamiento neutro (§7.1) ───────────────────
   Cambian una sola variable. La caja sigue blanca, el borde gris suave y
   la etiqueta gris oscura: que el ícono tenga color no pinta el botón.
   Sin acento asignado, el glifo se queda en el gris del componente.    */
.scm-ui-act--accent-gray   { --scm-act-icon: var(--scm-ui-act-accent-gray); }
.scm-ui-act--accent-blue   { --scm-act-icon: var(--scm-ui-act-accent-blue); }
.scm-ui-act--accent-green  { --scm-act-icon: var(--scm-ui-act-accent-green); }
.scm-ui-act--accent-red    { --scm-act-icon: var(--scm-ui-act-accent-red); }
.scm-ui-act--accent-orange { --scm-act-icon: var(--scm-ui-act-accent-orange); }
.scm-ui-act--accent-violet { --scm-act-icon: var(--scm-ui-act-accent-violet); }

/* ── Variante semántica pintada (§7.2) ───────────────────────────────
   Solo para acciones o estados con significado inmediato: confirmado,
   ubicado, rechazado, no ubicado, advertencia, error. Hay que pedirla
   expresamente desde la vista.

   Exige DOS clases —.scm-ui-act--semantic más la del color— a propósito:
   así una clase de color suelta no pinta nada y es imposible que un botón
   acabe pintado solo porque alguien quiso teñirle el ícono. Es la
   prohibición del §14 escrita como selector.

   Cambia únicamente las cuatro variables del §7.3: ni medidas, ni padding,
   ni tipografía, ni radio, ni distribución, ni animaciones.            */
.scm-ui-act--semantic.scm-ui-act--blue {
  --scm-act-bg:    var(--scm-ui-act-blue-bg);
  --scm-act-border: var(--scm-ui-act-blue-border);
  --scm-act-icon:   var(--scm-ui-act-blue-icon);
  --scm-act-label:  var(--scm-ui-act-blue-label);
}
.scm-ui-act--semantic.scm-ui-act--green {
  --scm-act-bg:    var(--scm-ui-act-green-bg);
  --scm-act-border: var(--scm-ui-act-green-border);
  --scm-act-icon:   var(--scm-ui-act-green-icon);
  --scm-act-label:  var(--scm-ui-act-green-label);
}
.scm-ui-act--semantic.scm-ui-act--red {
  --scm-act-bg:    var(--scm-ui-act-red-bg);
  --scm-act-border: var(--scm-ui-act-red-border);
  --scm-act-icon:   var(--scm-ui-act-red-icon);
  --scm-act-label:  var(--scm-ui-act-red-label);
}
.scm-ui-act--semantic.scm-ui-act--orange {
  --scm-act-bg:    var(--scm-ui-act-orange-bg);
  --scm-act-border: var(--scm-ui-act-orange-border);
  --scm-act-icon:   var(--scm-ui-act-orange-icon);
  --scm-act-label:  var(--scm-ui-act-orange-label);
}
.scm-ui-act--semantic.scm-ui-act--violet {
  --scm-act-bg:    var(--scm-ui-act-violet-bg);
  --scm-act-border: var(--scm-ui-act-violet-border);
  --scm-act-icon:   var(--scm-ui-act-violet-icon);
  --scm-act-label:  var(--scm-ui-act-violet-label);
}

/* ── Estados (§11) ───────────────────────────────────────────────────
   Hover neutro: levanta, aclara el fondo y marca el borde. No toca ni
   --scm-act-icon ni --scm-act-label, así que el acento del glifo se
   conserva exactamente igual al pasar el mouse.                        */
.scm-ui-act:hover {
  transform: translateY(-1px);
  background: var(--scm-ui-act-bg-hover);
  border-color: var(--scm-ui-act-line-hover);
}

/* Hover pintado: conserva fondo, borde, ícono y etiqueta semánticos. No
   puede volverse blanco ni recibir el borde azul genérico. Va con tres
   clases (0,3,0) para ganarle al hover neutro sin depender del orden. */
.scm-ui-act.scm-ui-act--semantic:hover {
  transform: translateY(-1px);
  background: var(--scm-act-bg);
  border-color: var(--scm-act-border);
}

.scm-ui-act:active {
  transform: translateY(1px);
  transition-duration: 80ms;
}

.scm-ui-act:focus-visible {
  outline: 2px solid var(--scm-ui-blue-500);
  outline-offset: 2px;
}

.scm-ui-act:disabled,
.scm-ui-act.is-disabled,
.scm-ui-act[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ── Grupo ───────────────────────────────────────────────────────────
   .scm-ui-actions es el nombre con el que nació el grupo y sigue en el
   marcado; .scm-ui-act-group es el de ICONS §8. Comparten regla para no
   renombrar nada de lo que ya está en producción.                      */
.scm-ui-act-group,
.scm-ui-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: start;
  gap: 5px;
  min-width: 0;
}

/* Escritorio: hasta cinco por fila. Cinco es la CAPACIDAD MÁXIMA, no un
   ancho reservado — el grupo mide n × 54px + (n−1) × 5px y solo llega a
   290px cuando de verdad hay cinco acciones: 54 · 113 · 172 · 231 · 290.
   La sexta baja a una segunda fila; el grupo crece hacia abajo y no se
   oculta ninguna.

   `width: max-content` mide el grupo como si nunca envolviera, que es
   justo la suma de sus botones; `max-width` corta en cinco y deja que
   `wrap` haga el resto. Aquí vivía una retícula de cinco pistas fijas, y
   ese era el problema: una pista explícita de tamaño fijo ocupa esté
   ocupada o no, así que una fila con una sola acción seguía reservando
   los 290px. Los botones conservan su `flex: 0 0 54px` y no se estiran
   para rellenar.

   En una tabla esto basta para que la columna la fije sola la fila con
   más acciones: el ancho de columna en layout automático es el máximo de
   sus celdas. No hay que contar acciones desde PHP. */
@media (min-width: 769px) {
  .scm-ui-act-group,
  .scm-ui-actions {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    align-content: start;
    gap: 5px;
    width: max-content;
    max-width: 290px;
  }
}

/* Móvil: misma caja y misma anatomía que en escritorio. Nunca dos columnas,
   nunca apilado vertical, nunca ícono a la izquierda. Si el grupo no cabe,
   se convierte en carril desplazable; el criterio es el desbordamiento
   real, no un número fijo de botones. */
@media (max-width: 768px) {
  .scm-ui-act-group,
  .scm-ui-actions {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--scm-ui-act-scroll-thumb) transparent;
  }

  .scm-ui-act-group > .scm-ui-act,
  .scm-ui-actions > .scm-ui-act {
    flex: 0 0 54px;
    scroll-snap-align: start;
  }

  .scm-ui-act-group::-webkit-scrollbar,
  .scm-ui-actions::-webkit-scrollbar {
    height: 6px;
  }

  .scm-ui-act-group::-webkit-scrollbar-thumb,
  .scm-ui-actions::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--scm-ui-act-scroll-thumb);
  }

  /* La caja de 54 × 50px ya supera por sí sola el objetivo táctil de 44px
     —antes medía 42px de alto y necesitaba ayuda—, pero la zona transparente
     se conserva tal cual: sale 1px por arriba y 1px por abajo dentro del
     propio botón, así que no invade la acción vecina (el gap es de 5px).
     El recorte del contenido lo sigue haciendo la etiqueta, que ya lleva su
     overflow: hidden; el de la caja se libera aquí para no recortar esa
     misma zona táctil.                                                  */
  .scm-ui-act {
    position: relative;
    overflow: visible;
  }

  .scm-ui-act::after {
    content: "";
    position: absolute;
    inset: -1px 0;
  }
}

/* ── Indicador de desplazamiento (ICONS §10) ─────────────────────────
   Vive fuera del elemento con overflow-x, debajo del carril, y solo lo
   emite la vista cuando scrollWidth > clientWidth. No es clicable ni
   recibe foco. Hoy ninguna vista lo emite: el único grupo en producción
   —el log de SMS— tiene dos acciones y nunca desborda. Queda listo para el
   primer módulo que pase de cinco.                                     */
.scm-ui-scrollhint {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: var(--scm-ui-text-3);
  font-family: var(--scm-ui-font);
  font-size: var(--scm-ui-fs-badge);
  font-weight: var(--scm-ui-fw-med);
  line-height: 1.25;
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.scm-ui-scrollhint__bar {
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--scm-ui-blue-500), var(--scm-ui-blue-100));
}

@media (max-width: 768px) {
  .scm-ui-scrollhint {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scm-ui-act,
  .scm-ui-scrollhint {
    transition: none;
    transform: none;
    animation: none;
  }
}