/* ==========================================================================
   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
   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: .74rem; font-weight: 800; white-space: nowrap; line-height: 1.5; }
.sem-chip.sem-verde     { background: #dcfce7; color: #166534; }
.sem-chip.sem-amarillo  { background: #fef9c3; color: #854d0e; }
.sem-chip.sem-naranja   { background: #ffedd5; color: #c2410c; }
.sem-chip.sem-rojo      { background: #fee2e2; color: #b91c1c; }
.sem-chip.sem-fuera     { background: #e5e7eb; color: #475569; }
.sem-chip.sem-antes_uso { background: #e0edff; color: #1e40af; }
.sem-chip.sem-sin_datos { background: #eef2f7; color: #64748b; }
@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}

/* Tabla estándar con scroll vertical (grillas largas) */
.panel-table-wrap.tall { max-height: 64vh; }

/* 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; }