/* ============================================================
 * ux-base.css · Estilos base UX compartidos por todas las
 * pantallas (incluido desde menu.php).
 * ============================================================ */

/* ─── Foco accesible siempre visible ─── */
:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .35);
}

/* ─── Skeleton loaders ─── */
.ux-skeleton {
  position: relative;
  overflow: hidden;
  background: #e9ecef;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  min-height: 1em;
}
.ux-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .55) 50%, transparent 100%);
  animation: ux-shimmer 1.2s infinite;
  transform: translateX(-100%);
}
@keyframes ux-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ux-skeleton-block { display: block; height: 16px; margin-bottom: 8px; }
.ux-skeleton-block.lg  { height: 28px; }
.ux-skeleton-block.sm  { height: 12px; }
.ux-skeleton-circle    { border-radius: 50%; }

/* ─── Estado vacío ─── */
.ux-empty {
  text-align: center;
  padding: 32px 16px;
  color: #6c757d;
}
.ux-empty .ux-empty-icon {
  font-size: 2.4rem;
  display: inline-block;
  margin-bottom: 12px;
  color: #adb5bd;
}
.ux-empty .ux-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 4px;
}
.ux-empty .ux-empty-desc {
  font-size: .85rem;
  color: #8a94a6;
  margin-bottom: 12px;
}

/* ─── Pulse de atención ─── */
.ux-pulse {
  animation: ux-pulse 1.6s ease-in-out infinite;
}
@keyframes ux-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(13, 110, 253, .35); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(13, 110, 253, 0); }
}

/* ─── Contador de textarea ─── */
.ux-charcount {
  display: block;
  text-align: right;
  font-size: .72rem;
  color: #8a94a6;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ux-charcount.warn   { color: #f57c00; }
.ux-charcount.danger { color: #d32f2f; font-weight: 600; }

/* ─── Spinner inline para botones submit ─── */
.ux-btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ux-spin .75s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes ux-spin {
  to { transform: rotate(360deg); }
}

/* ─── Preview de adjunto en compositor ─── */
.ux-adj-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .82rem;
  max-width: 100%;
}
.ux-adj-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}
.ux-adj-preview .ux-adj-info {
  flex: 1 1 auto;
  min-width: 0;
}
.ux-adj-preview .ux-adj-nombre {
  font-weight: 500;
  color: #212529;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.ux-adj-preview .ux-adj-meta {
  font-size: .7rem;
  color: #8a94a6;
}
.ux-adj-preview .ux-adj-quitar {
  background: transparent;
  border: 0;
  color: #6c757d;
  padding: 2px 6px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.ux-adj-preview .ux-adj-quitar:hover { background: #e9ecef; color: #d32f2f; }

/* ─── Indicadores de estado WhatsApp ─── */
.wa-status {
  display: inline-block;
  margin-left: 4px;
  font-size: .8rem;
  vertical-align: -1px;
  line-height: 1;
}
.wa-status.sent      { color: #98a4b3; }
.wa-status.delivered { color: #98a4b3; }
.wa-status.read      { color: #1976d2; }
.wa-status.failed    { color: #d32f2f; }

/* ─── Mensaje nuevo (botón scroll a fondo) ─── */
#btnNuevosMensajes.ux-pulse {
  border-color: var(--bs-primary, #0d6efd);
}

/* ─── Paleta de criticidad (semáforo salud) ───────────────────────────
   Única fuente de verdad para colores de criticidad.
   Reemplaza el uso ad-hoc de bg-danger/warning/info en chips y badges.

   - crit-{nivel}       : fondo sólido (chips, pills fuertes)
   - crit-soft-{nivel}  : fondo tenue + texto fuerte (badges tipo subtle)
   - crit-dot-{nivel}   : círculo de 14px para tooltips e indicadores
   ───────────────────────────────────────────────────────────────────── */
:root {
  --crit-critica:        #D92D20;
  --crit-alta:           #F79009;
  --crit-media:          #EAB308;
  --crit-fallback:       #64748B;

  --crit-critica-soft:   #FEE4E2;
  --crit-alta-soft:      #FEE9CC;
  --crit-media-soft:     #FEF3C7;
  --crit-fallback-soft:  #E2E8F0;
}

.crit-critica  { background: var(--crit-critica);  color: #fff; }
.crit-alta     { background: var(--crit-alta);     color: #fff; }
.crit-media    { background: var(--crit-media);    color: #000; }
.crit-fallback { background: var(--crit-fallback); color: #fff; }

.crit-soft-critica  { background: var(--crit-critica-soft);  color: var(--crit-critica);  }
.crit-soft-alta     { background: var(--crit-alta-soft);     color: #B25600;              }
.crit-soft-media    { background: var(--crit-media-soft);    color: #854D0E;              }
.crit-soft-fallback { background: var(--crit-fallback-soft); color: var(--crit-fallback); }

.crit-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  vertical-align: -2px;
  margin: 0 6px 0 4px;
  border: 1px solid rgba(255, 255, 255, .35);
}
.crit-dot-critica  { background: var(--crit-critica);  }
.crit-dot-alta     { background: var(--crit-alta);     }
.crit-dot-media    { background: var(--crit-media);    }
.crit-dot-fallback { background: var(--crit-fallback); }

/* ─── Barra de pestañas en una sola línea con scroll horizontal ───
 * Se aplica a las pestañas marcadas con .nav-tabs-scroll (Gestión de
 * Señales / Analítica y Tableros). Mantiene todas las pestañas en una
 * única fila; si no entran, aparece scroll horizontal en vez de partirse. */
.nav-tabs.nav-tabs-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nav-tabs.nav-tabs-scroll .nav-item {
  flex: 0 0 auto;
}
.nav-tabs.nav-tabs-scroll .nav-link {
  white-space: nowrap;
}
/* Scrollbar discreta en navegadores WebKit. */
.nav-tabs.nav-tabs-scroll::-webkit-scrollbar {
  height: 6px;
}
.nav-tabs.nav-tabs-scroll::-webkit-scrollbar-thumb {
  background: var(--bs-border-color, #d9dee5);
  border-radius: 3px;
}