/* ==========================================================================
   components/badges.css - ESTANDAR chip de semaforo (.sem-chip). COMPONENTE.
   Fase 1: movido TAL CUAL desde tqc.css (orden preservado => cascada identica).
   ========================================================================== */
/* ============================================================
   ESTÁNDAR — Chip de semáforo (Dirección Técnica y donde aplique)
   Uso: <span class="sem-chip sem-<estado>">Texto</span>
   Estados: verde amarillo naranja rojo fuera antes_uso sin_datos azul gris (+ sem-static: sin parpadeo)
   Es el ÚNICO chip de estado del sistema (no crear status-chip, badge, *-chip propios).
   Va junto al estándar de Paneles/Tablas (.panel-table, .panel-summary).
   ============================================================ */
.sem-chip { display: inline-block; border-radius: var(--radius-xs); padding: .1rem .5rem;
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap; line-height: 1.5; }
.sem-chip.sem-verde     { background: var(--sem-verde-bg); color: var(--success); }
.sem-chip.sem-amarillo  { background: var(--sem-amarillo-bg); color: var(--warning); }
.sem-chip.sem-naranja   { background: var(--sem-naranja-bg); color: var(--sem-naranja); }
.sem-chip.sem-rojo      { background: var(--sem-rojo-bg); color: var(--danger); }
.sem-chip.sem-fuera     { background: var(--sem-fuera-bg); color: var(--text-2); }
.sem-chip.sem-antes_uso { background: var(--sem-azul-bg); color: var(--sem-azul); }
.sem-chip.sem-sin_datos { background: var(--sem-gris-bg); color: var(--muted); }
/* Nombres genéricos para estados que no son semáforo (azul = informativo, gris = neutro). */
.sem-chip.sem-azul { background: var(--sem-azul-bg); color: var(--sem-azul); }
.sem-chip.sem-gris { background: var(--sem-gris-bg); color: var(--text-2); }
@keyframes semPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.sem-chip.sem-rojo { animation: semPulse 1.2s ease-in-out infinite; }
.sem-chip.sem-static { animation: none; }
@media (prefers-reduced-motion: reduce) { .sem-chip.sem-rojo { animation: none; } }
.sem-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.sem-dot.sem-verde{background:#16a34a}.sem-dot.sem-amarillo{background:#ca8a04}
.sem-dot.sem-naranja{background:#c2410c}.sem-dot.sem-rojo{background:#dc2626}
.sem-dot.sem-fuera{background:#64748b}.sem-dot.sem-antes_uso{background:#2563eb}
.sem-dot.sem-sin_datos{background:#94a3b8}
.sem-dot.sem-gris{background:var(--muted)}

/* Tabla estándar con scroll vertical (grillas largas) */

/* Barra de scroll horizontal superior de tablas (la crea tqc-table.js) */
.panel-table-topscroll { overflow-x: auto; overflow-y: hidden; margin-bottom: 2px; }
.panel-table-topscroll > div { height: 1px; }