/* ===== Pryzma Dashboard PRO — shared design system =====
   Stitch-generated visual language (dark glass, MD3 cyan/blue/purple).
   Brand: dark #0B0D17 · gray #1A1C23 · border #2A2C35
          cyan #00F0FF · blue #0066FF · purple #8B5CF6 · font Inter
*/

body {
  background-color: #0B0D17;
  font-family: 'Inter', sans-serif;
  color: #e1e1f0;
  overflow-x: hidden;
}

/* Background grid mesh */
.bg-grid-mesh {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
}

/* Glass panels */
.glass {
  background: rgba(26,28,35,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #2A2C35;
}
.glass-hover { transition: all .3s ease; }
.glass-hover:hover {
  border-color: rgba(0,240,255,.40);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 14px 32px -12px rgba(0,240,255,.22);
}

/* Atmospheric radial glows */
.radial-glow-purple { background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 70%); filter: blur(120px); }
.radial-glow-blue   { background: radial-gradient(circle, rgba(0,102,255,.12) 0%, transparent 70%); filter: blur(120px); }
.radial-glow-cyan   { background: radial-gradient(circle, rgba(0,240,255,.12) 0%, transparent 70%); filter: blur(120px); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #00f0ff 0%, #d0bcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Animated thinking ring (agent avatars) */
.thinking-border { position: relative; }
.thinking-border::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, #00f0ff, transparent);
  animation: rotate 2s linear infinite; z-index: -1;
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Pulse for active/online dots */
.pulse-active {
  box-shadow: 0 0 0 0 rgba(30,217,138,.45);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,217,138,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(30,217,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,217,138,0); }
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* Chat bubbles (used by chat.html + dash.js) */
.bubble { max-width: 78%; padding: .7rem .95rem; border-radius: 16px; font-size: .9rem; line-height: 1.45; animation: bubbleIn .35s cubic-bezier(.22,1,.36,1) both; }
.bubble.in  { background: rgba(255,255,255,.05); border: 1px solid #2A2C35; border-bottom-left-radius: 5px; align-self: flex-start; color: #e1e1f0; }
.bubble.out { background: linear-gradient(135deg, rgba(0,240,255,.20), rgba(0,102,255,.20)); border: 1px solid rgba(0,240,255,.30); border-bottom-right-radius: 5px; align-self: flex-end; color: #eafdff; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.typing-indicator { display: inline-flex; gap: 4px; align-items: center; padding: 10px 13px; background: rgba(255,255,255,.05); border: 1px solid #2A2C35; border-radius: 18px; }
.typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: #00f0ff; opacity: .4; animation: typeDot 1.2s ease-in-out infinite; }
.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .3s; }
@keyframes typeDot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A2C35; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3a3d49; }

/* Mobile: collapse fixed sidebar */
@media (max-width: 1023px) {
  .pz-sidebar { transform: translateX(-105%); transition: transform .3s cubic-bezier(.22,1,.36,1); }
  .pz-sidebar.open { transform: none; }
  .pz-main { margin-left: 0 !important; }
  .pz-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .pz-overlay.show { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Panel de cliente: la ADMINISTRACIÓN de agentes (alta/config) vive SOLO en la
   plataforma admin. El cliente sí conversa con su propio agente (chat.html) y ve
   sus stats; ocultamos únicamente la página de gestión de agentes.
   Netlify sirve pretty URLs (agentes.html → /…/agentes), así que casamos por
   data-page (que conserva) y por sufijo de ruta, no solo por href="agentes.html". */
a[data-page="agentes.html"],
a[href$="agentes.html"],
a[href$="/agentes"] { display: none !important; }

/* Accesibilidad (P7) — anillo de foco visible SOLO en navegación por teclado.
   :focus-visible no se dispara con clic de mouse, así que no ensucia el diseño. */
:focus-visible {
  outline: 2px solid #22d3ee;   /* cyan primary-container */
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }