/* Atelier · Workspace de Grow dentro del MAIN.
   Identidad: la navegación del MAIN y "Mi día" usan la del MAIN (variables de app.html, radio 0, mono en mayúsculas);
   el buzón (.g: canales, conversación, hilos, directos) usa la de Grow (tokens de grow.ddateliers.com). */
:root {
  --g-bg: #0F0A1E; --g-panel: #1C1033; --g-elev: #241640; --g-hover: #2A1A4D; --g-line: #2E2350;
  --g-fg: #FFFFFF; --g-body: #D4CCEA; --g-label: #A79DC4;
  --g-purple: #6B20E8; --g-deep: #4C16B8; --g-mid: #9B5CF6; --g-soft: #C4B5FD; --g-pink: #E879F9; --g-blue: #818CF8;
  --g-grad: linear-gradient(135deg, #6B20E8 0%, #E879F9 100%);
  --g-alerta: #E8833A; --g-rec: #FF5C7A; --g-ok: #4ADE80; --g-sombra: 0 12px 40px rgba(0, 0, 0, .45);
  --g-titulo: "Nunito", "DM Sans", system-ui, sans-serif; --g-texto: "DM Sans", system-ui, -apple-system, sans-serif;
}
:root[data-theme="light"] {
  --g-bg: #FFFFFF; --g-panel: #F6F3FD; --g-elev: #EEE8FB; --g-hover: #F1ECFC; --g-line: #E2DAF5;
  --g-fg: #160D2B; --g-body: #3A2F55; --g-label: #62577E;
  --g-soft: #5B1ACB; --g-pink: #B5179E; --g-sombra: 0 12px 40px rgba(40, 20, 90, .18);
}

/* ---------- vista ---------- */
.wrap:has(#v-atelier:not([hidden])) { max-width: 1680px; }
#v-atelier { min-width: 0; }
.at-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 12px; height: max(540px, calc(100dvh - var(--at-arriba, 170px) - 16px - var(--at-arq, 0px))); }
.at-grid:has(.at-panel:not([hidden])) { grid-template-columns: 264px minmax(0, 1fr) 340px; }
.at-lado:not(:has(.at-panel:not([hidden]))) { display: none; }
.at-nav, .at-conv, .at-lado { min-height: 0; min-width: 0; }
.at-nav { display: flex; flex-direction: column; gap: 10px; }

/* ---------- identidad Grow ---------- */
.g { font-family: var(--g-texto); font-weight: 400; color: var(--g-fg); --c: var(--g-purple); }
.g h2, .g h3 { font-family: var(--g-titulo); font-weight: 800; margin: 0; letter-spacing: 0; text-transform: none; color: var(--g-fg); }
.g a { color: var(--g-soft); }
.g button { font-family: inherit; }
.g :focus-visible { outline: 2px solid var(--g-soft); outline-offset: 2px; }
.at-buzon { flex: 1 1 auto; min-height: 0; background: var(--g-panel); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.at-marca { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px; color: var(--g-label); font-size: .74rem; white-space: nowrap; }
.at-marca img { height: 18px; width: auto; }
:root[data-theme="light"] .at-marca img { filter: brightness(0) saturate(100%) invert(16%) sepia(92%) saturate(5000%) hue-rotate(262deg) brightness(88%) contrast(105%); }
.at-marca #at-cambio { margin-left: auto; }
.at-marca select { font: inherit; font-size: .74rem; color: var(--g-fg); background: var(--g-elev); border: 1px solid var(--g-line); border-radius: 999px; padding: 3px 8px; }
.at-sec { padding: 4px 8px; }
.at-sec + .at-sec { padding-top: 10px; }
.at-buzon .at-sec:last-of-type { flex: 1 1 auto; min-height: 0; overflow: auto; }
#at-sec-canales { max-height: 52%; overflow: auto; }
.at-sec-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 4px; position: sticky; top: 0; background: var(--g-panel); z-index: 1; }
.at-sec-t { all: unset; cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-label); display: flex; gap: 6px; align-items: center; }
.at-sec-t .flecha { transition: transform .15s; }
.at-sec.plegado .at-sec-t .flecha { transform: rotate(-90deg); }
.at-sec.plegado .at-lista { display: none; }
.at-mini { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; color: var(--g-fg); background: var(--g-elev); font-weight: 700; }
.at-mini:hover { background: var(--g-purple); }
.at-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.at-item { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px; border-radius: 10px; color: var(--g-body); }
.at-item:hover { background: var(--g-hover); color: var(--g-fg); }
.at-item.activo { background: var(--g-purple); color: #fff; }
.at-item.sin-leer .at-item-t { color: var(--g-fg); font-weight: 700; }
.at-item-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-item-x { font-size: .7rem; color: var(--g-label); }
.at-item.activo .at-item-x { color: #e8ddff; }
.at-badge { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--g-alerta); color: #0F0A1E; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.at-item.activo .at-badge { background: #fff; color: var(--g-purple); }
.at-yo { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid var(--g-line); font-size: .8rem; }
.at-yo-n { color: var(--g-fg); font-weight: 700; }


/* avatares */
.at-av { --c: var(--g-purple); width: 34px; height: 34px; flex: none; border-radius: 999px; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 .74rem var(--g-texto); letter-spacing: .02em; }
.at-av.chico { width: 24px; height: 24px; font-size: .62rem; }
.at-av.mini { width: 18px; height: 18px; font-size: .5rem; margin-right: -4px; box-shadow: 0 0 0 2px var(--g-bg); }
.at-av.arm { background: var(--g-grad); }

/* ---------- conversación ---------- */
.at-conv { background: var(--g-bg); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--g-line); }
.at-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--g-line); }
.at-cab-t { flex: 1 1 auto; min-width: 0; display: grid; }
.at-cab h2 { font-size: 1.15rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-sub { color: var(--g-label); font-size: .76rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.at-chip { font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: var(--g-elev); color: var(--g-body); }
.at-buscar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--g-panel); color: var(--g-label); width: min(260px, 40%); }
.at-buscar input { all: unset; flex: 1; min-width: 0; color: var(--g-fg); font-size: .84rem; }
.at-buscar input::placeholder { color: var(--g-label); }
.at-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 6px 14px; display: flex; flex-direction: column; }
.at-vacio { margin: auto; color: var(--g-label); text-align: center; padding: 24px; }
.at-anteriores { all: unset; cursor: pointer; align-self: center; margin: 4px 0 10px; padding: 6px 14px; border-radius: 999px; background: var(--g-elev); color: var(--g-body); font-size: .8rem; }
.at-dia, .at-nuevos { display: flex; align-items: center; gap: 10px; margin: 14px 10px 6px; color: var(--g-label); font-size: .72rem; font-weight: 700; text-transform: capitalize; }
.at-dia::before, .at-dia::after, .at-nuevos::before, .at-nuevos::after { content: ""; flex: 1; height: 1px; background: var(--g-line); }
.at-nuevos { color: var(--g-alerta); text-transform: none; }
.at-nuevos::before, .at-nuevos::after { background: var(--g-alerta); opacity: .6; }
.at-msg { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; padding: 6px 10px; border-radius: 12px; }
.at-msg.seguido { padding-top: 1px; padding-bottom: 1px; }
.at-msg:hover, .at-msg:focus-within { background: var(--g-hover); }
.at-msg.destacado { animation: at-destello 2.4s ease; }
@keyframes at-destello { 0%, 40% { background: color-mix(in srgb, var(--g-purple) 30%, transparent); } 100% { background: transparent; } }
.at-hora-lado { font-size: .62rem; color: transparent; text-align: right; padding-top: 4px; font-variant-numeric: tabular-nums; }
.at-msg.seguido:hover .at-hora-lado { color: var(--g-label); }
.at-cuerpo { min-width: 0; }
.at-cuerpo header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.at-cuerpo header strong { font-weight: 700; color: var(--g-fg); }
.at-cuerpo time { font-size: .72rem; color: var(--g-label); font-variant-numeric: tabular-nums; }
.at-origen { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--g-label); border: 1px solid var(--g-line); border-radius: 999px; padding: 0 6px; }
.at-txt { color: var(--g-body); line-height: 1.5; overflow-wrap: anywhere; font-size: .93rem; }
.at-txt a { word-break: break-all; }
.at-txt code { font-family: var(--mono); font-size: .82em; background: var(--g-elev); padding: 1px 5px; border-radius: 6px; color: var(--g-fg); }
.at-txt pre { background: var(--g-panel); border-radius: 10px; padding: 10px 12px; overflow-x: auto; margin: 4px 0; }
.at-txt pre code { background: none; padding: 0; }
.at-cita { display: block; border-left: 3px solid var(--g-line); padding-left: 10px; color: var(--g-label); }
.at-men { color: var(--g-pink); font-weight: 700; }
.at-men.yo { background: color-mix(in srgb, var(--g-pink) 18%, transparent); border-radius: 6px; padding: 0 3px; }
.at-ed { font-size: .7rem; color: var(--g-label); margin-left: 4px; }
.at-gris { color: var(--g-label); }
.at-msg.borrado .at-txt { font-style: italic; }
.at-msg.sistema .at-txt, .at-msg.agente .at-txt { color: var(--g-body); }
.at-msg.sistema { background: color-mix(in srgb, var(--g-panel) 70%, transparent); margin: 2px 0; }
.at-msg.agente { border: 1px solid var(--g-line); margin: 4px 0; }
.at-enlace { font-size: .8rem; }
.at-acc { position: absolute; top: -12px; right: 10px; display: none; gap: 2px; background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 999px; padding: 2px; box-shadow: var(--g-sombra); }
.at-msg:hover > .at-acc, .at-msg:focus-within > .at-acc { display: flex; }
@media (hover: none) { .at-acc { display: flex; position: static; grid-column: 2; width: fit-content; margin-top: 4px; box-shadow: none; } .at-msg:not(:focus-within):not(.tocado) > .at-acc { display: none; } }
.at-ico { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--g-body); flex: none; }
.at-ico:hover { background: var(--g-elev); color: var(--g-fg); }
.at-ico:focus-visible { outline: 2px solid var(--g-soft); }
.at-hilo-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 3px 8px 3px 4px; border-radius: 8px; color: var(--g-soft); font-size: .8rem; font-weight: 700; }
.at-hilo-btn:hover { background: var(--g-panel); }
.at-hilo-btn .at-gris { font-weight: 400; }

/* adjuntos */
.at-adj { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.at-img { all: unset; cursor: zoom-in; display: block; max-width: min(320px, 100%); max-height: 260px; border-radius: 12px; overflow: hidden; background: var(--g-panel); }
.at-panel .at-img { max-width: 100%; max-height: 320px; }
.at-solo-tactil { display: none; }
@media (hover: none) { .at-solo-tactil { display: grid; } }
.at-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-arch { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--g-panel); color: var(--g-fg); font-size: .82rem; max-width: 100%; text-decoration: none; }
.at-arch span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.at-arch:hover { background: var(--g-elev); }
.at-arch.slack { opacity: .85; }
.at-voz { display: grid; grid-template-columns: auto minmax(80px, 220px) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--g-panel); max-width: 100%; }
.at-voz .at-transc { grid-column: 1 / -1; margin: 2px 6px 0; font-size: .82rem; color: var(--g-label); font-style: italic; }
.at-voz:has(.at-transc) { border-radius: 14px; }
.at-play { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 999px; background: var(--g-purple); color: #fff; display: grid; place-items: center; }
.at-play[disabled] { opacity: .5; cursor: progress; }
.at-barra { height: 4px; border-radius: 999px; background: var(--g-line); overflow: hidden; }
.at-barra span { display: block; height: 100%; width: 0; background: var(--g-soft); }
.at-reac { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.at-r { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--g-panel); border: 1px solid var(--g-line); font-size: .82rem; color: var(--g-body); }
.at-r.mia { border-color: var(--g-mid); background: color-mix(in srgb, var(--g-purple) 25%, var(--g-panel)); color: var(--g-fg); }

.at-video-caja { display: grid; gap: 4px; max-width: min(420px, 100%); }
.at-video { width: 100%; max-height: 300px; border-radius: 12px; background: #000; }
.at-ensala.inactivo { border-color: color-mix(in srgb, var(--g-alerta) 55%, var(--g-line)); }
.at-ensala.inactivo .at-ensala-n span { color: var(--g-alerta); }
.at-ensala.inactivo .at-ctl { flex: none; }
/* escribir · la voz a un botón */
.at-vivo { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-right: 4px; border-radius: 999px; background: var(--g-elev); color: var(--g-body); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.at-vivo:hover { background: var(--g-hover); color: var(--g-fg); }
.at-vivo:focus-visible { outline: 2px solid var(--g-soft); }
.at-vivo[data-estado="on"] { background: color-mix(in srgb, var(--g-ok) 22%, var(--g-elev)); color: var(--g-ok); }
.at-vivo[data-estado="off"] { background: color-mix(in srgb, var(--g-rec) 22%, var(--g-elev)); color: var(--g-rec); }
.at-vivo[data-estado="otra"] { background: var(--g-grad); color: #fff; }
/* escribir */
.at-escribir { padding: 8px 12px 12px; display: grid; gap: 6px; position: relative; }
.at-escribir.soltar .at-caja { outline: 2px dashed var(--g-soft); }
.at-caja { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border-radius: 22px; background: var(--g-panel); border: 1px solid var(--g-line); }
.at-caja:focus-within { border-color: var(--g-mid); }
.at-caja .at-texto, .at-editar .at-texto { flex: 1; width: auto; min-width: 0; min-height: 0; resize: none; border: 0; border-radius: 0; background: transparent; color: var(--g-fg); font: .93rem/1.45 var(--g-texto); padding: 7px 0; max-height: 200px; }
.at-caja .at-texto:focus-visible { outline: none; } /* el foco lo marca el borde de la caja */
.at-panel .at-enviar span, .at-panel .at-enviar { padding-inline: 10px; }
.at-panel .at-enviar span { display: none; }
.at-texto::placeholder { color: var(--g-label); }
.at-enviar { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--g-grad); color: #fff; font-weight: 700; font-size: .86rem; }
.at-enviar:focus-visible { outline: 2px solid var(--g-fg); }
.at-ico.grabando { background: var(--g-rec); color: #0F0A1E; }
.at-nota { margin: 0 8px; font-size: .78rem; color: var(--g-rec); display: flex; gap: 8px; align-items: center; }
.at-link { all: unset; cursor: pointer; color: var(--g-soft); text-decoration: underline; }
.at-pend { display: flex; flex-wrap: wrap; gap: 6px; }
.at-pend:empty { display: none; }
.at-pchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; border-radius: 10px; background: var(--g-panel); font-size: .78rem; color: var(--g-body); max-width: 100%; }
.at-pchip img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
.at-pchip > span:nth-of-type(1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.at-pchip.error { color: var(--g-rec); }
.at-ok { color: var(--g-ok); }
.at-sug { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: var(--g-panel); border: 1px solid var(--g-line); box-shadow: var(--g-sombra); z-index: 5; }
.at-sug li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.at-sug li[aria-selected="true"] { background: var(--g-purple); color: #fff; }
.at-sug li[aria-selected="true"] .at-gris { color: #e8ddff; }

/* ---------- lado: Mi día (identidad MAIN), hilos y resultados (Grow) ---------- */
.at-lado { display: flex; flex-direction: column; min-height: 0; }
.at-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 16px; overflow: hidden; }
.at-panel-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--g-line); }
.at-panel-cab h3 { font-size: 1rem; }
.at-panel-cab .at-sub { flex: 1; min-width: 0; }
#at-hilo-cabeza { border-bottom: 1px solid var(--g-line); padding: 6px; max-height: 38%; overflow-y: auto; flex: none; }
.at-resultados { list-style: none; margin: 0; padding: 8px; overflow: auto; display: grid; gap: 4px; }
.at-res { all: unset; cursor: pointer; display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; width: 100%; box-sizing: border-box; }
.at-res:hover { background: var(--g-hover); }
.at-res-cab { font-size: .76rem; color: var(--g-body); }
.at-res-t { font-size: .86rem; color: var(--g-fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* flotantes y modales */
.at-flota { position: fixed; z-index: 1200; min-width: 180px; padding: 6px; border-radius: 14px; background: var(--g-panel); border: 1px solid var(--g-line); box-shadow: var(--g-sombra); display: grid; gap: 2px; }
.at-flota button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; color: var(--g-fg); font-size: .86rem; }
.at-flota button:hover, .at-flota button:focus-visible { background: var(--g-elev); }
.at-flota button.peligro { color: var(--g-rec); }
.at-emojis { grid-template-columns: repeat(6, 36px); min-width: 0; }
.at-emojis button { text-align: center; font-size: 1.15rem; padding: 6px 0; }
.at-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(5, 2, 12, .6); display: grid; place-items: center; padding: 16px; }
.at-modal-in { width: min(520px, 100%); max-height: 90dvh; overflow: auto; background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 20px; padding: 20px; display: grid; gap: 12px; box-shadow: var(--g-sombra); }
.at-modal-in p { margin: 0; color: var(--g-body); font-size: .9rem; }
.at-prev { white-space: pre-wrap; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--g-panel); color: var(--g-body); font: .86rem/1.45 var(--g-texto); max-height: 160px; overflow: auto; }
.at-campo { display: grid; gap: 4px; font-size: .78rem; color: var(--g-label); }
.at-campo input, .at-campo select { font: .9rem var(--g-texto); color: var(--g-fg); background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 12px; padding: 8px 10px; min-height: 40px; box-sizing: border-box; width: 100%; }
.at-campo select[multiple] { min-height: 90px; }
.at-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.at-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.at-boton { all: unset; cursor: pointer; padding: 9px 18px; border-radius: 999px; background: var(--g-elev); color: var(--g-fg); font-weight: 700; font-size: .88rem; }
.at-boton.prim { background: var(--g-grad); color: #fff; }
.at-boton[disabled] { opacity: .5; cursor: progress; }
.at-boton:focus-visible { outline: 2px solid var(--g-soft); }
.at-editar { display: grid; gap: 6px; }
.at-editar .at-texto { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 12px; padding: 8px 10px; min-height: 60px; width: 100%; box-sizing: border-box; }
.at-lightbox { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, .88); display: grid; place-items: center; padding: 16px; }
.at-lightbox img { max-width: 100%; max-height: 92dvh; border-radius: 8px; }
.at-lb-x { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .12); color: #fff; }
.at-solo-movil { display: none; }
#b-atelier[data-n]:not([data-n=""])::after { content: attr(data-n); margin-left: 6px; padding: 0 5px; background: var(--warn); color: #000; font-size: .56rem; }

/* ---------- fase 2: presencia, salas de voz y foco ---------- */
/* la franja del equipo de Arquitectos.pe (solo dirección): su rojo sobre la identidad Grow del buzón */
.at-arq { --arq: #C02A2B; --arq-fondo: color-mix(in srgb, var(--arq) 14%, var(--g-panel)); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; padding: 6px 10px; min-height: 44px; box-sizing: border-box; background: var(--arq-fondo); border-left: 3px solid var(--arq); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.at-arq::-webkit-scrollbar { display: none; }
:root[data-theme="light"] .at-arq { --arq-fondo: color-mix(in srgb, var(--arq) 7%, var(--g-panel)); }
.at-arq-t { flex: none; display: flex; align-items: center; margin: 0 8px 0 2px; }
.at-arq-logo { display: block; height: 24px; width: auto; }
.at-arq-logo.claro { display: none; }
:root[data-theme="light"] .at-arq-logo.oscuro { display: none; }
:root[data-theme="light"] .at-arq-logo.claro { display: block; }
.at-arq-p { cursor: default; }
.at-arq-p:hover { background: transparent; }
.at-arq .at-av { --c: var(--arq); }
.at-arq .at-av::after { box-shadow: 0 0 0 2px var(--arq-fondo); }
.at-arq .at-pers[data-e="fuera"] .at-av::after { box-shadow: inset 0 0 0 2px var(--g-label), 0 0 0 2px var(--arq-fondo); }
.at-pers[data-e="bloqueada"] .at-av::after { background: var(--g-label); }
.at-arq-nota, .at-arq-hora { flex: none; font-size: .68rem; color: var(--g-label); white-space: nowrap; }
.at-arq-hora { margin-left: auto; padding-left: 12px; }
#v-atelier:has(.at-arq:not([hidden])) { --at-arq: 52px; }
.at-presencia { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 6px 10px; min-height: 44px; box-sizing: border-box; background: var(--g-panel); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.at-presencia::-webkit-scrollbar { display: none; }
.at-pres-t { flex: none; margin-right: 6px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-label); white-space: nowrap; }
.at-pers { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; }
.at-pers:hover, .at-pers:focus-visible { background: var(--g-hover); }
.at-pers:focus-visible { outline: 2px solid var(--g-soft); }
.at-pers .at-av { position: relative; overflow: visible; }
.at-pers .at-av::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 999px; box-shadow: 0 0 0 2px var(--g-panel); background: var(--g-label); }
.at-pers[data-e="activo"] .at-av::after { background: var(--g-ok); }
.at-pers[data-e="sala"] .at-av::after { background: var(--g-rec); }
.at-pers[data-e="foco"] .at-av::after { background: var(--g-rec); }
.at-pers[data-e="inactivo"] .at-av::after { background: var(--g-alerta); }
.at-pers[data-e="reunion"] .at-av::after { background: var(--g-rec); }
.at-pers[data-e="fuera"] .at-av { opacity: .45; }
.at-pers[data-e="fuera"] .at-av::after { background: transparent; box-shadow: inset 0 0 0 2px var(--g-label), 0 0 0 2px var(--g-panel); }
.at-pers.habla .at-av, .at-persona.habla .at-av, .at-sala-p.habla .at-av { box-shadow: 0 0 0 2px var(--g-bg), 0 0 0 4px var(--g-ok); }
.at-pers-x { display: grid; line-height: 1.15; }
.at-pers-x b { font-size: .78rem; font-weight: 700; color: var(--g-fg); }
.at-pers-x span { font-size: .68rem; color: var(--g-label); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-rec { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--g-rec); animation: at-pulso 1.6s ease-in-out infinite; }
@keyframes at-pulso { 50% { opacity: .35; } }
.at-sala-p { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--g-body); min-height: 22px; }
.at-sala-p .at-av.mini { margin-right: 0; }
.at-chip-btn { all: unset; cursor: pointer; font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: var(--g-elev); color: var(--g-body); }
.at-chip-btn:hover { background: var(--g-purple); color: #fff; }
/* contador de voz en la lista de canales */
.at-voz-n { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--g-rec); font-weight: 700; }
.at-item.activo .at-voz-n { color: #fff; }
/* la voz del canal abierto, bajo su cabecera */
.at-voz-cab { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-panel) 60%, transparent); min-height: 42px; }
.at-voz-quien { all: unset; cursor: pointer; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 999px; color: var(--g-body); font-size: .78rem; }
.at-voz-quien:hover, .at-voz-quien:focus-visible { background: var(--g-hover); }
.at-voz-quien > svg { color: var(--g-label); }
.at-voz-p { position: relative; display: inline-flex; }
.at-voz-p + .at-voz-p { margin-left: -6px; }
.at-voz-p .at-av { box-shadow: 0 0 0 2px var(--g-bg); }
.at-voz-p.habla .at-av { box-shadow: 0 0 0 2px var(--g-bg), 0 0 0 4px var(--g-ok); }
.at-voz-p svg { position: absolute; right: -3px; bottom: -3px; background: var(--g-bg); border-radius: 999px; color: var(--g-rec); padding: 1px; }
.at-voz-btn { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--g-grad); color: #fff; font-size: .78rem; font-weight: 700; }
.at-voz-btn:focus-visible { outline: 2px solid var(--g-fg); }
.at-voz-aqui { flex: none; font-size: .72rem; font-weight: 700; color: var(--g-ok); }
/* cabina de foco, junto al nombre */
.at-foco-btn { all: unset; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--g-elev); color: var(--g-body); font-size: .72rem; }
.at-foco-btn:hover, .at-foco-btn:focus-visible { background: var(--g-hover); color: var(--g-fg); }
.at-foco-btn.on { background: color-mix(in srgb, var(--g-alerta) 25%, var(--g-elev)); color: var(--g-alerta); font-weight: 700; }
.at-flota-t { margin: 4px 8px 6px; max-width: 240px; font-size: .76rem; color: var(--g-label); }
.at-check { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--g-body); cursor: pointer; }
.at-check input { width: 18px; height: 18px; accent-color: var(--g-purple); }
.at-grabando { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; background: color-mix(in srgb, var(--g-rec) 16%, transparent); color: var(--g-rec); font-size: .78rem; font-weight: 700; }
.at-modal-in .at-grabando { border-radius: 10px; }
.at-gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 10px; padding: 16px 12px; flex: none; max-height: 42%; overflow-y: auto; }
.at-gente > .at-gris { grid-column: 1 / -1; margin: 0; text-align: center; font-size: .86rem; }
.at-persona { position: relative; display: grid; justify-items: center; gap: 6px; font-size: .8rem; color: var(--g-body); text-align: center; }
.at-av.grande { width: 58px; height: 58px; font-size: 1.05rem; transition: box-shadow .12s; }
.at-mute { position: absolute; top: 40px; left: calc(50% + 14px); width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; background: var(--g-bg); color: var(--g-rec); }
.at-ctls { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--g-line); flex: none; }
.at-ctl { all: unset; cursor: pointer; flex: 1 1 calc(33.33% - 8px); box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px; border-radius: 999px; background: var(--g-elev); color: var(--g-fg); font-size: .8rem; font-weight: 700; text-align: center; }
.at-ctl:hover { background: var(--g-hover); }
.at-ctl:focus-visible { outline: 2px solid var(--g-soft); }
.at-ctl.off { background: var(--g-rec); color: #0F0A1E; }
.at-ctl.on { background: var(--g-purple); color: #fff; }
.at-ctl.salir { background: color-mix(in srgb, var(--g-rec) 22%, var(--g-elev)); color: var(--g-rec); }
.at-ctl.salir:hover { background: var(--g-rec); color: #0F0A1E; }
.at-ctls.compacto { padding: 0; border: 0; gap: 6px; }
.at-ctls.compacto .at-ctl { flex: none; width: 38px; padding: 0; }
.at-entrar { display: grid; justify-items: center; gap: 6px; padding: 12px; border-top: 1px solid var(--g-line); flex: none; }
.at-entrar .at-gris { font-size: .76rem; }
.at-presencial { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-top: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-purple) 12%, transparent); color: var(--g-body); font-size: .76rem; flex: none; }
.at-flota-presencial { max-width: 300px; gap: 6px; }
.at-flota-presencial .at-check { padding: 6px 8px; border-radius: 8px; }
.at-flota-presencial .at-check:hover { background: var(--g-elev); }
.at-flota-presencial .at-check input:disabled + .at-av { opacity: .7; }
.at-flota-presencial .at-flota-t { max-width: none; }
.at-subs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; display: grid; align-content: start; gap: 8px; border-top: 1px solid var(--g-line); }
.at-frase { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--g-body); }
.at-frase b { color: var(--g-fg); }
.at-frase time { font-size: .68rem; color: var(--g-label); font-variant-numeric: tabular-nums; }
.at-frase.interina { color: var(--g-label); font-style: italic; }
.at-subs > .at-gris { margin: 0; font-size: .82rem; }
.at-sesion-gente { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; flex: none; }
.at-grab { display: grid; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--g-line); flex: none; }
.at-grab .at-voz { grid-template-columns: auto minmax(0, 1fr) auto; }
.lbl-g { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-label); }
/* barra de la sala: siempre a la vista mientras se está dentro, en cualquier vista del MAIN */
.at-ensala { position: fixed; z-index: 1000; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(420px, calc(100% - 32px)); box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 18px; background: var(--g-panel); border: 1px solid color-mix(in srgb, var(--g-rec) 45%, var(--g-line)); box-shadow: var(--g-sombra); }
.at-ensala-t { all: unset; cursor: pointer; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.at-ensala-n { display: grid; min-width: 0; line-height: 1.2; }
.at-ensala-n b { font-size: .84rem; color: var(--g-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-ensala-n span { font-size: .66rem; color: var(--g-rec); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-reloj { font-size: .72rem; color: var(--g-label); font-variant-numeric: tabular-nums; }
body.at-en-sala .at-grid { height: max(480px, calc(100dvh - var(--at-arriba, 170px) - 92px - var(--at-arq, 0px))); }

/* ---------- cámara y pantalla: el mosaico de la voz del canal ---------- */
.at-mosaico { position: relative; flex: none; display: grid; gap: 6px; padding: 10px 12px 4px; max-height: 52%; overflow: hidden; }
.at-mosaico[hidden] { display: none; }
.at-pantallas { display: grid; gap: 6px; min-height: 0; }
.at-caras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-height: 0; }
.at-mosaico[data-caras="1"] .at-caras { grid-template-columns: minmax(0, 1fr); }
.at-tile { position: relative; overflow: hidden; border-radius: 12px; background: #050210; aspect-ratio: 4 / 3; border: 2px solid var(--g-line); min-height: 0; }
.at-tile.pantalla { aspect-ratio: 16 / 9; }
.at-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.at-tile.pantalla video { object-fit: contain; }
.at-tile video.espejo { transform: scaleX(-1); }
.at-tile.habla { border-color: var(--g-ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-ok) 40%, transparent); }
.at-tile-n { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 2px 9px; border-radius: 999px; background: rgba(5, 2, 12, .62); color: #fff; font-size: .7rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-tile-espera { position: absolute; inset: 0; display: grid; place-items: center; background: var(--g-elev); }
.at-lleno-btn { position: absolute; top: 16px; right: 18px; z-index: 2; width: 32px; height: 32px; border-radius: 999px; background: rgba(5, 2, 12, .62); color: #fff; }
.at-lleno-btn:hover { background: var(--g-purple); }
.at-lleno-ctls { display: none; }
.at-gente.con-video { padding: 8px 12px; gap: 8px; max-height: 24%; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.at-gente.con-video .at-persona { font-size: .7rem; gap: 3px; }
/* pantalla completa (en iPhone no hay API: el mosaico se fija a toda la ventana) */
body.at-lleno .at-mosaico { position: fixed; inset: 0; z-index: 1300; max-height: none; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: #050210; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
body.at-lleno .at-tile { border-radius: 14px; }
body.at-lleno .at-tile.pantalla { aspect-ratio: auto; height: 100%; }
body.at-lleno .at-mosaico:has(.at-pantallas) .at-caras { grid-template-columns: repeat(auto-fit, 150px); justify-content: end; }
body.at-lleno .at-mosaico:not(:has(.at-pantallas)) .at-caras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-content: center; gap: 10px; }
body.at-lleno .at-mosaico:not(:has(.at-pantallas)) .at-tile { width: min(100%, calc((100dvh - 120px) * 4 / 3)); justify-self: center; }
body.at-lleno .at-mosaico:not(:has(.at-pantallas))[data-caras="1"] .at-tile { width: min(100%, calc((100dvh - 120px) * 4 / 3)); }
body.at-lleno .at-lleno-ctls { display: flex; justify-content: center; }
body.at-lleno .at-lleno-ctls .at-ctls.compacto { background: rgba(255, 255, 255, .08); padding: 6px; border-radius: 999px; }
body.at-lleno .at-lleno-ctls .at-ctl { width: 44px; min-height: 44px; }
body.at-lleno #at-ensala { display: none; }
:root[data-theme="light"] .at-tile, :root[data-theme="light"] body.at-lleno .at-mosaico { background: #1A1330; }

/* ---------- tablet y teléfono ---------- */
@media (max-width: 1180px) { .at-grid, .at-grid:has(.at-panel:not([hidden])) { grid-template-columns: 240px minmax(0, 1fr); } .at-lado:has(.at-panel:not([hidden])) { display: flex; position: fixed; inset: 12px 12px 12px auto; width: min(420px, calc(100% - 24px)); z-index: 900; } }
@media (max-width: 767px) {
  .at-grid, .at-grid:has(.at-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--at-arriba, 150px) - 54px - var(--at-arq, 0px)); gap: 8px; }
  .at-vivo span { display: none; }
  .at-vivo { padding: 0 8px; }
  /* en el teléfono el Atelier es la pantalla: fuera la línea de resumen y la leyenda del MAIN, y el pie debajo */
  .wrap:has(#v-atelier:not([hidden])) > header .linea { display: none; }
  .wrap:has(#v-atelier:not([hidden])) { padding-bottom: 8px; gap: 8px; }
  .wrap:has(#v-atelier:not([hidden])) > footer { display: none; }
  .at-presencia { min-height: 40px; }
  .at-voz-cab { padding: 4px 10px; min-height: 38px; }
  .at-voz-btn span { display: none; }
  .at-voz-btn { padding: 6px 9px; }
  #v-atelier[data-panel="lista"] .at-conv, #v-atelier[data-panel="lista"] .at-lado { display: none; }
  #v-atelier[data-panel="conv"] .at-nav, #v-atelier[data-panel="conv"] .at-lado { display: none; }
  #v-atelier[data-panel="hilo"] .at-nav, #v-atelier[data-panel="hilo"] .at-conv, #v-atelier[data-panel="res"] .at-nav, #v-atelier[data-panel="res"] .at-conv { display: none; }
  #v-atelier[data-panel="hilo"] .at-lado, #v-atelier[data-panel="res"] .at-lado { display: flex; position: static; width: auto; }
  #v-atelier[data-panel="sala"] .at-nav, #v-atelier[data-panel="sala"] .at-conv { display: none; }
  #v-atelier[data-panel="sala"] .at-lado { display: flex; position: static; width: auto; }
  .at-presencia { margin-bottom: 6px; padding: 4px 6px; border-radius: 12px; }
  .at-pres-t { display: none; }
  .at-pers-x span { max-width: 96px; }
  .at-ensala { left: 8px; right: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
  body.at-en-sala .at-grid { height: calc(100dvh - var(--at-arriba, 150px) - 76px - var(--at-arq, 0px)); }
  #v-atelier:has(.at-arq:not([hidden])) { --at-arq: 46px; }
  .at-arq { min-height: 40px; margin-bottom: 6px; padding: 4px 6px; border-radius: 12px; }
  .at-arq-hora { display: none; }
  .at-arq-t { margin-right: 4px; }
  .at-arq-logo { height: 20px; }
  .at-ensala { bottom: calc(6px + env(safe-area-inset-bottom)); padding: 6px 6px 6px 10px; }
  .at-ensala .at-ctls.compacto .at-ctl { width: 34px; }
  .at-mosaico { max-height: 48%; }
  body.at-lleno .at-mosaico:has(.at-pantallas) .at-caras { grid-template-columns: repeat(auto-fit, 96px); }
  .at-solo-movil { display: grid; }
  .at-buzon { overflow-y: auto; }
  #at-sec-canales, .at-buzon .at-sec:last-of-type { max-height: none; overflow: visible; flex: none; }
  .at-sec-cab { position: static; }
  .at-buscar { width: auto; max-width: 42%; }
  .at-item { min-height: 46px; }
  .at-conv, .at-buzon, .at-panel { border-radius: 14px; }
  .at-acc { right: 6px; }
  .at-fila { grid-template-columns: 1fr; }
  .at-enviar span { display: none; }
  .at-enviar { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .at-msg.destacado { animation: none; outline: 2px solid var(--g-soft); } .at-sec-t .flecha { transition: none; } .at-rec { animation: none; } .at-av.grande { transition: none; } }