/* Agentes de voz con avatar: galería del hub (gag-grid/gag-card) y la sala (gag).
   Clases propias: el main.css está purgado y las utilidades no existen (ver memoria). */
.gag-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gag-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid var(--color-stroke-2); background: var(--color-background-1, #fff); color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.dark .gag-card { border-color: var(--color-stroke-6); background: var(--color-background-6, #0b1018); }
.gag-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgb(124 49 246 / .45); }
.gag-card img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.gag-card-txt { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 8px; }
.gag-card-txt strong { font-size: 1.125rem; line-height: 1.3; }
.gag-card-txt > span:not(.gag-chips) { opacity: .75; font-size: .95rem; }
.gag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gag-chip { border-radius: 999px; background: rgb(124 49 246 / .1); color: var(--gx-violeta, #7c31f6); font-size: .75rem; font-weight: 600; padding: 3px 10px; }
.gag-card-cta { margin-top: auto; padding: 8px 20px 20px; color: var(--gx-violeta, #7c31f6); font-weight: 600; }

/* El tema solo colorea p/h*; li, label, strong, span e inputs heredan de aquí (negro en oscuro si no). */
.gag, .gag-card { color: #09121F; }
.dark .gag, .dark .gag-card { color: #fff; }
.gag { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: stretch; }
@media (max-width: 860px) { .gag { grid-template-columns: 1fr; } }
/* width/min-width: con align-items:stretch el aspect-ratio dictaba el ancho y el video se montaba sobre el panel. */
.gag-video { position: relative; overflow: hidden; width: 100%; min-width: 0; border-radius: 20px; background: #0b1018; aspect-ratio: 16 / 10; border: 1px solid var(--color-stroke-2); box-shadow: 0 30px 60px -30px rgb(124 49 246 / .45); }
.dark .gag-video { border-color: var(--color-stroke-6); }
.gag-cara { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b1018; }
.gag-ondas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: radial-gradient(ellipse at center, #1a1030 0%, #0b1018 70%); }
.gag-ondas[hidden] { display: none; }
.gag-aviso { position: absolute; left: 16px; right: 16px; top: 14px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgb(124 49 246 / .85); color: #fff; font-size: .85rem; line-height: 1.35; backdrop-filter: blur(6px); }
.gag-aviso[hidden] { display: none; }
.gag-estado { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: .875rem; backdrop-filter: blur(6px); white-space: nowrap; }
.gag-reloj { position: absolute; top: 14px; right: 14px; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-variant-numeric: tabular-nums; font-weight: 600; backdrop-filter: blur(6px); }
.gag-reloj--poco { background: rgb(220 38 38 / .85); animation: gag-pulso 1s infinite; }
@keyframes gag-pulso { 50% { opacity: .6; } }
.gag-panel { display: flex; flex-direction: column; justify-content: center; border-radius: 20px; border: 1px solid var(--color-stroke-2); background: var(--color-background-1, #fff); padding: 28px; }
.dark .gag-panel { border-color: var(--color-stroke-6); background: var(--color-background-6, #0b1018); }
.gag-vista { display: flex; flex-direction: column; gap: 14px; }
.gag-vista[hidden] { display: none; }
.gag-pasos { counter-reset: p; display: flex; flex-direction: column; gap: 8px; font-size: .95rem; }
.gag-pasos li { position: relative; padding-left: 34px; opacity: .85; }
.gag-pasos li::before { counter-increment: p; content: counter(p); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: rgb(124 49 246 / .12); color: var(--gx-violeta, #7c31f6); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.gag-nota { font-size: .8rem; opacity: .65; }
.gag-nota a { text-decoration: underline; }
/* Reserva su línea aunque esté vacío para que el panel no brinque al mostrar el error. */
.gag-error { color: #b91c1c; font-size: .9rem; line-height: 1.4; min-height: 1.4em; margin: 0; }
.dark .gag-error { color: #fca5a5; }
.gag-error[hidden] { display: block; visibility: hidden; }
.gag-vivo-t { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.gag-punto { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgb(22 163 74 / .6); animation: gag-onda 1.6s infinite; }
@keyframes gag-onda { 70% { box-shadow: 0 0 0 10px rgb(22 163 74 / 0); } 100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); } }
.gag-tema { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.gag-botones { display: flex; gap: 10px; flex-wrap: wrap; }
/* Transcripción en vivo (text streams lk.transcription): tú a la derecha en violeta, el agente a la izquierda. */
.gag-chat { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; padding: 12px; border-radius: 12px; background: rgb(124 49 246 / .06); font-size: .9rem; line-height: 1.4; scroll-behavior: smooth; }
.dark .gag-chat { background: rgb(255 255 255 / .05); }
.gag-chat:empty::before { content: attr(data-vacio); opacity: .55; }
.gag-linea { margin: 0; max-width: 92%; padding: 6px 10px; border-radius: 10px; background: var(--color-background-1, #fff); }
.dark .gag-linea { background: rgb(255 255 255 / .08); }
.gag-linea b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.gag-linea--tu { align-self: flex-end; background: rgb(124 49 246 / .14); }
.dark .gag-linea--tu { background: rgb(124 49 246 / .35); }
.gag-form label { display: flex; flex-direction: column; gap: 4px; font-size: .875rem; font-weight: 600; }
.gag-form input { border: 1px solid var(--color-stroke-2); border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 400; background: transparent; color: inherit; }
.dark .gag-form input { border-color: var(--color-stroke-6); }
.gag-form input:focus { outline: 2px solid var(--gx-violeta, #7c31f6); outline-offset: 1px; }
.gag-hp { position: absolute; left: -9999px; }
.gag-link { color: var(--gx-violeta, #7c31f6); font-weight: 600; }