/* FuaFlow Teams: la marca es azul, el mismo de Vault (#1059F6, el del logo y
   la app desde el 29-10); el CRM es naranja y Love Log rojo. Se carga DESPUÉS
   de /css/site.css y solo en /teams/: cambia las variables del acento y rehace
   en azul los degradados que site.css trae en naranja. El rojo es solo para el
   SOS, como en la app. */
:root {
  --oro: #5b8cff;        /* el azul de la marca, aclarado para texto sobre oscuro */
  --oro-claro: #a8c3ff;
  --oro-hondo: #1059f6;  /* azul de la marca (kAccent) */
  --ambar: #2196f3;      /* el azul de la familia (kBlue) */
  --detenido: #ff6b5e;   /* el SOS */
}

body {
  background-image:
    radial-gradient(ellipse 130% 60% at 50% -18%, rgba(16, 89, 246, 0.22), transparent 62%),
    radial-gradient(ellipse 90% 50% at 85% 4%, rgba(33, 150, 243, 0.08), transparent 60%);
}

.lang-pill:hover {
  border-color: rgba(91, 140, 255, 0.45);
}

.documento .divisor {
  background: linear-gradient(90deg, transparent, rgba(91, 140, 255, 0.4), transparent);
}

.dock a.activo {
  background: linear-gradient(180deg, rgba(16, 89, 246, 0.26), rgba(16, 89, 246, 0.08));
}

.telefono-zona::before {
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(16, 89, 246, 0.3), transparent 70%);
}

.pastilla {
  border-color: rgba(91, 140, 255, 0.38);
  background: linear-gradient(180deg, rgba(16, 89, 246, 0.2), rgba(16, 89, 246, 0.06));
}

/* Lo mismo que en /vault/: el brillo del teléfono no debe ensanchar la
   página en un celular, y el pie baja de renglón si no cabe. */
@media (max-width: 880px) {
  main.contenedor { overflow-x: clip; }
}

footer nav {
  flex-wrap: wrap;
  row-gap: 6px;
}

.jornada::before {
  background: linear-gradient(180deg, rgba(91, 140, 255, 0.5), rgba(91, 140, 255, 0.08));
}

.momento .hora::after {
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.16);
}

.etapa::after {
  background: linear-gradient(90deg, rgba(91, 140, 255, 0.55), rgba(91, 140, 255, 0.12));
}

.muestra {
  white-space: normal;
}

@media (max-width: 640px) {
  .riel-envoltura { overflow-x: visible; }
  .riel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    row-gap: 10px;
  }
  .etapa { padding-right: 14px; }
  .etapa:last-child::after { right: 0; }
}

.detenido { color: var(--detenido); }

.momento-detenido .hora { color: var(--detenido); }
.momento-detenido .hora::after {
  background: var(--detenido);
  box-shadow: 0 0 0 4px rgba(255, 107, 94, 0.18);
}

.nw { white-space: nowrap; }

/* El código para unirse, en /teams/unirse y /teams/dirigir. Vive aquí y no en
   un <style> de la página porque la CSP no deja estilos en línea. */
.codigo-caja { margin: 24px 0; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); text-align: center; }
.codigo-caja .etiqueta { margin: 0 0 8px; opacity: 0.75; }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1rem, 4.2vw, 1.35rem); word-break: break-all; user-select: all; margin: 0 0 16px; }
.codigo-caja button { font: inherit; font-weight: 700; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; min-height: 44px; }
.copiado { display: block; min-height: 1.4em; margin-top: 8px; }