/* Titan v3 demo — base de la página.
   Los colores salen de css/variables.css: aquí no se escribe ningún hex. */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--text-body);
  line-height: var(--line-normal);
  background: var(--surface-0);
  color: var(--text-1);
}

#render {
  height: 100%;
}

/* ── Avisos de mensajes nuevos (js/realtime.js) ──
   Toast de Titan con una acción: todo el aviso se puede pulsar y el botón
   lo dice. Hereda la tinta del toast (color pleno), como su botón de cerrar. */
.rt-toast {
  align-items: center;
  cursor: pointer;
}

.rt-toast-action {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.rt-toast-action:hover,
.rt-toast-action:focus-visible {
  background: color-mix(in srgb, currentColor 18%, transparent);
}

/* ── Ayuda: bolita azul con el ícono help_outline en blanco que abre un tutorial.
   GLOBAL: la usan todas las vistas que tengan ayuda (botón «Cómo funciona» y
   los «?» junto a cada barra). Colores: --help / --help-hover / --help-on.
   Uso: <span class="help-dot" aria-hidden="true"><i class="material-icons">help_outline</i></span> ── */
.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* el BORDE es el círculo blanco del ícono: el azul va solo por dentro de él */
  background: radial-gradient(circle, var(--help) 9px, transparent 9.5px);
  color: var(--help-on);
  line-height: 1;
  /* halo suave alrededor del círculo blanco */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--help) 22%, transparent);
  transition: transform 0.15s;
}

button:hover > .help-dot,
button:focus-visible > .help-dot {
  background: radial-gradient(circle, var(--help-hover) 9px, transparent 9.5px);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  button:hover > .help-dot,
  button:focus-visible > .help-dot {
    transform: none;
  }
}

/* a 24 px el círculo de help_outline mide 20 px: justo el tamaño de la bolita.
   !important a propósito: el CSS de cada vista va scopeado con el id de la vista
   (más específico que cualquier clase de aquí) y reglas como
   «.cbe-tool .material-icons { font-size: 18px }» encogían el ícono y dejaban
   ver el azul por fuera del círculo blanco. */
.help-dot .material-icons {
  font-size: 24px !important;
  width: 24px;
  height: 24px;
  margin: -2px !important;
  color: inherit !important;
}

/* ══ Tutorial «Cómo funciona» (GLOBAL: igual en todas las vistas) ══════════
   Molde del modal de ayuda; la lógica está en js/guide.js (AppGuide) y cada
   vista solo pone sus pasos y sus ilustraciones (.guide-art). Fijo sobre la
   pantalla, por encima del editor de chatbots (2000) y por debajo de los
   modales y avisos de Titan (≥10000). */
.guide {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--surface-0) 70%, transparent);
  backdrop-filter: blur(3px);
}

.guide[hidden],
.guide-step[hidden],
.guide-btn[hidden] {
  display: none;
}

.guide-card {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100% - 32px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
}

.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0 20px;
}

/* el título lleva delante la misma bolita de ayuda que abre la guía */
.guide-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  font-size: var(--text-md);
}

.guide-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.guide-close .material-icons {
  font-size: 18px;
}

.guide-close:hover,
.guide-close:focus-visible {
  background: var(--state-hover);
  color: var(--text-1);
  outline: none;
}

.guide-step {
  padding: 8px 20px 4px;
}

.guide-step h3 {
  margin: 16px 0 6px;
  font-size: var(--text-lg);
  color: var(--text-1);
}

.guide-step p,
.guide-list {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-2);
}

.guide-list {
  padding-left: 18px;
}

.guide-list li + li {
  margin-top: 4px;
}

.guide-step b {
  color: var(--text-1);
}

.guide-step code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-1);
}

/* ilustración: imita la pantalla real, sobre un lienzo punteado */
.guide-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 18px;
  border-radius: 12px;
  background: var(--surface-0);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
}

.guide-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 18px;
}

.guide-spacer {
  flex: 1 1 auto;
}

.guide-dots {
  display: inline-flex;
  gap: 6px;
}

.guide-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: width 0.2s, background 0.2s;
}

.guide-dots i.is-on {
  width: 20px;
  border-radius: 4px;
  background: var(--brand);
}

.guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.guide-btn:hover {
  background: var(--state-hover);
  color: var(--text-1);
}

.guide-btn.is-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.guide-btn.is-primary:hover {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-text);
}

.guide-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* abierta en UN solo paso (el «?» de una barra): sin número ni puntos */
.guide.is-single .guide-num,
.guide.is-single .guide-dots {
  display: none;
}

/* El <div toolbar> de una vista solo se ve dentro de la barra de
   herramientas del appbar, que lo trae al terminar de montar la vista.
   Sin esto asomaría dentro de la vista ese instante. Ver
   containers/app/workspace/appbar (montarHerramientas). */
[toolbar] {
  display: none;
}

/* Iconos (Material Symbols Outlined). La clase la define la hoja de Google
   que carga index.php; aquí solo se le pone el grosor, que sale del token
   --icon-weight. Gana por orden: main.css se carga después.

   font-weight además del eje: a algunos navegadores Google les sirve un
   archivo estático por grosor, y ahí manda font-weight, no el eje.
   Sin "opsz": con font-optical-sizing el trazo se ajusta solo al tamaño. */
.material-symbols-outlined {
  font-weight: var(--icon-weight);
  font-optical-sizing: auto;
  font-variation-settings: "FILL" 0, "wght" var(--icon-weight);
}

/* COMPATIBILIDAD (whatsapp): la clase vieja `.material-icons`, que todavía
   usan muchas vistas, dibuja con la misma fuente y el mismo grosor. Ya no se
   carga la hoja de Material Icons, así que sin esto esas vistas mostrarían el
   nombre del icono en texto. Se puede borrar cuando todas las vistas usen
   `material-symbols-outlined` (un reemplazo mecánico, pendiente porque esos
   archivos tenían trabajo sin commit). */
.material-icons {
  font-family: "Material Symbols Outlined";
  font-weight: var(--icon-weight);
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  font-optical-sizing: auto;
  font-variation-settings: "FILL" 0, "wght" var(--icon-weight);
  -webkit-font-smoothing: antialiased;
}