* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Paleta sobria: fondos casi negros con un paso de gris más, texto suave,
   UN solo acento (azul frío). El gradiente de marca queda dentro de la misma
   familia del acento para que "fluir" siga funcionando sin estridencias. ─── */
:root {
  /* Paleta original de la plataforma (el director la quiere tal cual) */
  --fondo: #000000;
  --panel: #0d0d0d;
  --panel-2: #161616;
  --panel-3: #1e1e1e;
  --borde: #262626;
  --borde-2: #333333;
  --texto: #f5f5f5;
  --texto-2: #cfcfcf;
  --texto-suave: #8a8a8a;
  --acento: #7c5cff;
  --acento-suave: rgba(124, 92, 255, .16);
  /* Globos del chat (lógica de iMessage, colores de siempre): el propio en blanco con
     texto negro y el del colaborador un paso de gris por encima del panel, sin borde,
     porque la cola es un ::after con background: inherit y un borde no la seguiría. */
  --burbuja-yo: var(--contraste);
  --burbuja-otro: var(--panel-2);
  --ok: #4ade80;
  --peligro: #ff7a7a;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --gradiente: linear-gradient(90deg, #5aa2ff 0%, #9b6bff 35%, #ff5da2 70%, #ffb15d 100%);
  /* SIN SOMBRAS (regla del director, 15-sep-2026: “bájale a las sombras en el app, o quítalas
     mejor”): una pieza se separa de lo de atrás por su relleno, no por una mancha oscura debajo.
     Las variables se quedan en `none` para lo que aún las nombre. */
  --sombra: none;
  --sombra-suave: none;
  /* El velo de las hojas (modales, diálogos, el visor, lo que te espera): oscurece en oscuro y
     aclara en claro. Fijo en negro, en tema claro volvía gris sucio toda la pantalla. */
  --velo-hoja: rgba(0, 0, 0, .5);
  /* Una tarjeta que flota sobre ese velo: en oscuro, el gris de los globos; en claro, blanca
     sobre la bruma gris, porque gris sobre gris no se despega sin sombra. */
  --ficha-sobre-velo: var(--burbuja-otro);
  /* Lo que hay que despejar para que exista un modo claro: el color del texto del globo
     propio y el tinte del vidrio estaban escritos a mano en sus reglas, y con el fondo
     invertido uno se volvía ilegible y el otro ennegrecía la ventana entera. */
  /* La familia "pastilla de máximo contraste": avatares, botón primario, badges, el globo
     propio, las etiquetas fuertes. En oscuro es blanca con texto negro; en claro tiene que
     invertirse o desaparece sobre el fondo. Escrito como #fff a mano en 20 reglas, un modo
     claro era imposible sin tocarlas una por una. */
  --contraste: #ffffff;
  --contraste-texto: #000000;
  --burbuja-yo-texto: var(--contraste-texto);
  --tinte-vidrio-color: 0, 0, 0;
  --velo: rgba(0, 0, 0, .66);
  --realce: rgba(255, 255, 255, .10);
  --realce-fuerte: rgba(255, 255, 255, .14);
  /* EL SEMÁFORO DE UNA TAREA (regla del director, 8-sep-2026), y no hay más colores que
     estos tres: te espera ROJO, en curso AMARILLO, terminada VERDE. Ni acento morado ni
     ámbar: el estado de una ficha no se lee, se reconoce. */
  --estado-espera: #f85149;
  --estado-curso: #e3b341;
  --estado-hecha: #3fb950;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-3: 420ms;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MODO CLARO
   La paleta entera sale de variables, así que el tema es una redefinición de esas
   variables y nada más: ni una regla duplicada, ni un selector por componente. Lo único
   que hubo que despejar antes fueron los tres colores que estaban escritos a mano en sus
   reglas (el texto del globo propio, el tinte del vidrio y los velos).
   `data-tema` lo pone ajustes.js en <html>; con 'sistema' manda el equipo. ═══ */
:root[data-tema="claro"] {
  --fondo: #ffffff;
  --panel: #f6f6f7;
  --panel-2: #ededf0;
  --panel-3: #e3e3e7;
  --borde: #e2e2e6;
  --borde-2: #cdcdd3;
  --texto: #17171b;
  --texto-2: #4a4a52;
  --texto-suave: #83838d;
  /* El globo propio se invierte: en claro, un globo blanco sobre fondo blanco no existe.
     Lo que define la identidad no es "blanco", es "el mío es el de más contraste". */
  /* EN CLARO, EL SEGUNDO COLOR ES UN GRIS TENUE, NO NEGRO (regla del director, 15-sep-2026):
     botón primario, pestaña y chip elegidos, globo propio y contadores. Invertido a negro, cada
     “Conectar” y cada globo tuyo era una mancha oscura sobre la hoja blanca. */
  --contraste: #e3e3e8;
  --contraste-texto: #1d1d21;
  --burbuja-otro: #f1f1f4;
  --acento-suave: rgba(124, 92, 255, .14);
  --ok: #12a150;
  --peligro: #d93b3b;
  --sombra: none;
  --sombra-suave: none;
  --tinte-vidrio-color: 255, 255, 255;
  --velo: rgba(255, 255, 255, .7);
  --velo-hoja: rgba(228, 228, 234, .6);
  --ficha-sobre-velo: #ffffff;
  --realce: rgba(0, 0, 0, .06);
  --realce-fuerte: rgba(0, 0, 0, .09);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-tema="sistema"] {
    --fondo: #ffffff; --panel: #f6f6f7; --panel-2: #ededf0; --panel-3: #e3e3e7;
    --borde: #e2e2e6; --borde-2: #cdcdd3;
    --texto: #17171b; --texto-2: #4a4a52; --texto-suave: #83838d;
    --contraste: #e3e3e8; --contraste-texto: #1d1d21;
    --burbuja-otro: #f1f1f4;
    --acento-suave: rgba(124, 92, 255, .14); --ok: #12a150; --peligro: #d93b3b;
    --sombra: none; --sombra-suave: none;
    --tinte-vidrio-color: 255, 255, 255; --velo: rgba(255, 255, 255, .7); --velo-hoja: rgba(228, 228, 234, .6); --ficha-sobre-velo: #ffffff;
    --realce: rgba(0, 0, 0, .06); --realce-fuerte: rgba(0, 0, 0, .09);
    color-scheme: light;
  }
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  background: var(--fondo);
  color: var(--texto);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* La barra de progreso ya no es global: vive dentro de cada tarjeta "En curso" del
   colaborador que está trabajando (ver .ktarjeta-progreso). */
@keyframes fluir {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

.marca h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 5px;
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  border-image: var(--gradiente) 1;
}

/* ─── Estructura: barra lateral única + contenido ─── */
.app-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}
.app-main { min-width: 0; }

.sidebar {
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 14px 16px;
  border-right: 1px solid var(--borde);
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-marca { padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plegar-btn {
  width: 26px; height: 26px; display: inline-grid; place-items: center; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--texto-suave); cursor: pointer; padding: 0;
}
.plegar-btn svg { width: 16px; height: 16px; }
.plegar-btn:hover { color: var(--texto); background: var(--panel); }

/* Menú plegado: solo iconos y avatares, 64 px de ancho */
.app-layout.menu-plegado { grid-template-columns: 64px minmax(0, 1fr); }
.app-layout.menu-plegado .sidebar { padding: 22px 10px 16px; gap: 16px; }
.app-layout.menu-plegado .sidebar-marca { justify-content: center; padding: 0; }
.app-layout.menu-plegado .sidebar-marca h1,
.app-layout.menu-plegado .nav-item > span:not(.nav-badge),
.app-layout.menu-plegado .chat-agente-info,
.app-layout.menu-plegado .chat-agente-pend,
.app-layout.menu-plegado .rail-titulo,
.app-layout.menu-plegado .rail-separador { display: none; }
.app-layout.menu-plegado .nav-item { justify-content: center; padding: 9px 0; position: relative; }
.app-layout.menu-plegado .nav-badge { position: absolute; top: 2px; right: 4px; margin: 0; }
.app-layout.menu-plegado .chat-agente { justify-content: center; padding: 6px 0; }
.app-layout.menu-plegado .rail-contratar { font-size: 0; padding: 8px 0; }
.app-layout.menu-plegado .rail-contratar::before { content: '+'; font-size: 16px; }
.app-layout { transition: grid-template-columns var(--dur-3) var(--ease); }

/* ─── Menú de secciones (vertical, icono + texto) ─── */
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none;
  color: var(--texto-suave);
  padding: 8px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: color .15s, background .15s;
}
.nav-item svg { width: 17px; height: 17px; flex: none; color: var(--texto-suave); transition: color .15s; }
.nav-item:hover { background: var(--panel); color: var(--texto); }
.nav-item:hover svg { color: var(--texto-2); }
.nav-item.activo { background: var(--panel-2); color: var(--texto); font-weight: 600; }
.nav-item.activo svg { color: var(--texto); }
.nav-item.oculto { display: none; }

/* ─── Chats desplegables bajo “Mensajes” (se abren tocando el propio botón) ─── */
/* Los chats ya no viven en la barra (regla del director, 16-sep-2026): su casa es Mensajes. */
/* Los dos globos (Tareas y Mensajes) van pegados al borde derecho y con el mismo ancho
   mínimo, para que se lean como una columna y no como dos adornos sueltos. */
.nav-badge {
  margin-left: auto; min-width: 18px; text-align: center;
  background: var(--contraste);
  color: var(--contraste-texto);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  display: none;
}
.nav-badge.con-datos { display: inline-block; }
/* El de las decisiones. `--peligro` ya es el rojo de la paleta en los dos temas, así que no se
   inventa un color nuevo: el mismo que usa el resto de la app para “esto te toca a ti”. El
   texto va en blanco fijo y no en `--contraste-texto`, porque el fondo aquí es rojo en tema
   claro y en oscuro: seguir al contraste lo dejaría en negro sobre rojo en uno de los dos. */
.nav-badge.rojo { background: var(--peligro); color: #fff; }
/* Con los dos encendidos, solo el primero empuja: si los dos llevan `margin-left:auto` se
   separan y queda un hueco en medio. El `gap: 10px` del .nav-item ya los separa de sobra —con
   un margen encima quedaban a 14px y parecían dos avisos distintos en vez de un par. */
.nav-badge.rojo + .nav-badge { margin-left: 0; }
/* Plegado el menú, los dos no caben en la esquina: manda el rojo, que es el urgente. */
/* Con el menú plegado solo cabe un número: el rojo manda, pero solo si de verdad tiene algo (el span rojo
   siempre existe; sin `.con-datos` escondía la cuenta blanca aunque no hubiera nada que decidir). */
.app-layout.menu-plegado .nav-badge.rojo.con-datos + .nav-badge.con-datos { display: none; }

/* ─── Grupo del equipo en la barra lateral ─── */
.sidebar-equipo { display: flex; flex-direction: column; gap: 3px; flex: 1; }

/* ─── Secciones ─── */
/* El respiro de una sección es una MEDIDA, no un número suelto: lo que quiera pegarse a los
   bordes de la tarjeta (el mapa de Sinapsis) tiene que poder anularlo exactamente. */
:root { --respiro-seccion: 28px; }
.seccion { display: none; padding: var(--respiro-seccion) 32px; }
.seccion.visible { display: block; }

/* ─── Oficina 3D: el canvas ocupa todo el alto bajo el header sticky ─── */
#seccion-oficina.seccion { padding: 0; }
#oficina-3d { position: relative; width: 100%; height: 100vh; overflow: hidden; }
#oficina-3d canvas { display: block; }
.seccion-cabeza { max-width: 900px; margin-bottom: 20px; }
.seccion-cabeza h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--texto-suave); font-weight: 600; margin-bottom: 8px;
}

.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.rejilla-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.agente { display: flex; align-items: center; gap: 12px; flex: 1; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  color: var(--texto);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  transition: all .3s;
}
/* Quien trabaja lleva un anillo "border-beam" fino (ver bloque MOVIMIENTO al final) */
body.trabajando .avatar { position: relative; border-color: var(--borde-2); }
.agente-nombre { font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.agente-estado { font-size: 12px; color: var(--texto-suave); }
body.trabajando .agente-estado.activo {
  background: var(--gradiente); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fluir 2.5s linear infinite; font-weight: 600;
}
.agente-estado.error { color: var(--peligro); }


/* ─── Botones pill ─── */
.btn {
  /* Relleno tenue y sin línea alrededor: el mismo lenguaje del buscador. */
  border: 1px solid transparent;
  background: var(--realce);
  color: var(--texto);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
              opacity var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--realce-fuerte); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.primario { background: var(--contraste); border-color: var(--contraste); color: var(--contraste-texto); font-weight: 600; }
.btn.primario:hover:not(:disabled) { background: color-mix(in srgb, var(--contraste) 90%, var(--texto-suave)); border-color: transparent; }
.btn.peligro { color: var(--texto-suave); }
.btn.peligro:hover:not(:disabled) { color: var(--peligro); background: color-mix(in srgb, var(--peligro) 12%, transparent); }
.btn.ok { background: var(--contraste); border-color: var(--contraste); color: var(--contraste-texto); font-weight: 600; }
.btn.ok:hover:not(:disabled) { background: color-mix(in srgb, var(--contraste) 90%, var(--texto-suave)); border-color: transparent; }
.btn.mini { padding: 6px 14px; font-size: 12px; }

/* Clic: hundido sutil y nada más. El destello del gradiente de marca se retiró (decisión del
   director, 8-sep-2026): teñía cualquier botón de azul-violeta-rosa durante 600 ms. */
.btn:active:not(:disabled) { transform: scale(.98); }

.badge {
  background: var(--gradiente);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.ayuda { font-size: 12px; color: var(--texto-suave); margin-bottom: 14px; line-height: 1.5; }

.lista { display: flex; flex-direction: column; gap: 12px; }

/* ─── Cards ─── */
.card {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 16px;
  transition: border-color .2s;
}
.card:hover { border-color: #3a3a3a; }
.card .fila { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.card .titulo { font-size: 14px; font-weight: 600; flex: 1; min-width: 50%; }
.card .detalle {
  font-size: 13px; color: #cfcfcf;
  white-space: pre-wrap;
  background: var(--fondo);
  border: 1px solid var(--panel-2);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  max-height: 260px;
  overflow-y: auto;
  line-height: 1.55;
}
.card textarea {
  width: 100%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 44px;
  margin-bottom: 10px;
  transition: border-color .2s;
}
.card textarea:focus {
  outline: none;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
}
.card .acciones { display: flex; gap: 8px; }

/* ─── Tags: monocromo, la jerarquía la da el brillo ─── */
.tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent; background: var(--realce);
  color: var(--texto-suave);
  font-weight: 600;
}
.tag.pregunta, .tag.accion { color: var(--texto-2); }
.tag.p1 { background: var(--contraste); color: var(--contraste-texto); border-color: var(--contraste); }
.tag.p2 { color: var(--texto-2); }
.tag.p3 { color: #6a6a6a; }
.tag.aprobada { color: var(--texto); }
.tag.rechazada { color: var(--texto-suave); text-decoration: line-through; }
.tag.en_curso {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--gradiente) border-box;
  color: #fff;
}
.tag.completada { color: var(--texto); }
.tag.bloqueada { color: #ff9a7a; background: rgba(255, 154, 122, .12); }

.fecha { font-size: 11px; color: #5a5a5a; }

.historial { margin-top: 16px; }
.historial summary { font-size: 13px; color: var(--texto-suave); cursor: pointer; margin-bottom: 12px; }
.historial summary:hover { color: var(--texto); }

.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metrica {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 14px;
}
.metrica .valor {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.metrica .nombre { font-size: 11px; color: var(--texto-suave); margin-top: 2px; letter-spacing: .5px; }

.bitacora { max-height: 70vh; overflow-y: auto; }
.evento {
  display: flex;
  gap: 10px;
  padding: 9px 12px;
  border-left: 2px solid var(--borde);
  font-size: 12.5px;
}
.evento.prici { border-image: var(--gradiente) 1; border-left: 2px solid; }
.evento.director { border-left-color: var(--texto); }
.evento .quien { font-weight: 600; min-width: 60px; color: var(--texto); }
.evento .que { flex: 1; color: #cfcfcf; }
.evento .que .det { color: var(--texto-suave); display: block; margin-top: 3px; white-space: pre-wrap; line-height: 1.5; }

.vacio {
  color: var(--texto-suave);
  font-size: 13px;
  padding: 24px 18px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--panel-2);
  border-radius: 10px;
  line-height: 1.6;
}

/* ─── Chat ─── */
.chat-mensajes {
  flex: 1;
  min-height: 0; /* sin esto el hilo empuja el panel en vez de hacer scroll */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 2px 16px;
}
/* ─── Globos, con la lógica de iMessage ───
   Radio grande, cola en la esquina de quien habla, y los consecutivos del mismo autor se
   agrupan: se pegan y pierden la cola, como en Mensajes. La cola es un ::after del MISMO
   color del globo (background: inherit), sin el "borrador" del truco clásico, porque el
   hilo vive sobre dos fondos distintos (el panel del chat y el negro de Mensajes) y no
   hay UN color de fondo que copiar. */
.burbuja {
  position: relative;
  max-width: 76%;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* La esquina del lado de la cola: 20px, NO 7px. Este era el verdadero problema, y no el
   dibujo de la cola. Medido sobre una captura de Mensajes de macOS: el contorno se despega
   del costado 20px POR ENCIMA del fondo (justo el radio entero) y solo se mete 7,7px hacia
   adentro. Es un barrido largo y poco profundo. Con 7px la esquina se cerraba 13px antes y
   dejaba un canto casi recto sobre el que la cola quedaba atornillada por fuera: de ahí que
   se leyera como banderín y no como cola. Y no se puede compensar desde el pseudoelemento,
   porque un clip-path solo SUMA área: donde el globo sobresale no hay nada que recortar. */
.burbuja.director { align-self: flex-end; background: var(--burbuja-yo); color: var(--burbuja-yo-texto); border-bottom-right-radius: 20px; }
.burbuja.prici { align-self: flex-start; background: var(--burbuja-otro); color: var(--texto); border-bottom-left-radius: 20px; }

/* La COLITA, medida sobre la referencia en vez de dibujada a ojo. Dos correcciones de fondo:
   la cola de macOS NO sale de lado —su punto más externo se queda 6,1px por DENTRO del
   costado— y en cambio CUELGA 5px por DEBAJO del fondo del globo. Por eso la caja va pegada
   al costado (right: 0, antes -8px) y baja 5px (bottom: -5px, antes 0).
   Coordenadas del path: x=22 es el costado, y=20 la línea del fondo, y=25 la punta.
   El gancho recorre 7,8px en horizontal en solo 5px de caída, y por eso cierra en punta en
   vez de abrirse en triángulo. La diagonal de cierre va por DENTRO del globo (mismo color,
   invisible) y a la altura del texto pasa a 13,2px del costado: dentro del padding de 14px,
   así que nunca lo tapa. Sigue sin el "borrador" del color de fondo: el panel es vidrio. */
.burbuja::after {
  content: ''; position: absolute; bottom: -5px;
  width: 22px; height: 25px; background: inherit; pointer-events: none;
}
.burbuja.director::after {
  right: 0;
  clip-path: path('M22,0 C22,18.4 14.3,14.5 14.3,20 C14.3,23.2 17,23.5 15.3,25 C12.2,23.9 9.3,21.3 6.5,20 L0,20 Z');
}
/* El mismo trazo espejado en x (x' = 22 − x). */
.burbuja.prici::after {
  left: 0;
  clip-path: path('M0,0 C0,18.4 7.7,14.5 7.7,20 C7.7,23.2 5,23.5 6.7,25 C9.8,23.9 12.7,21.3 15.5,20 L22,20 Z');
}
/* Agrupados: menos aire, esquina recobrada y sin cola salvo en el último del grupo.
   Si el navegador no soporta :has() simplemente no agrupa; nada se rompe. */
.burbuja.director + .burbuja.director, .burbuja.prici + .burbuja.prici { margin-top: -5px; }
.burbuja.director:has(+ .burbuja.director) { border-bottom-right-radius: 20px; }
.burbuja.prici:has(+ .burbuja.prici) { border-bottom-left-radius: 20px; }
.burbuja.director:has(+ .burbuja.director)::after,
.burbuja.prici:has(+ .burbuja.prici)::after { display: none; }
.burbuja .canal { display: block; font-size: 10px; color: var(--texto-suave); margin-top: 5px; letter-spacing: .5px; }
.burbuja.director .canal { color: #666; }
/* ─── Fila viva: SOLO el globo de los tres puntos ───
   La ruta interna (pasos, “pensando”, traza) ya no se muestra: el globo escribiendo es la
   única señal, como en Mensajes. */
.vivo { align-self: flex-start; max-width: 92%; }
.vivo.saliendo { opacity: 0; transform: translateY(4px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; }

/* ─── Separador de fecha estilo iMessage (compartido: chat 1-a-1 y Mensajes) ─── */
.msj-fecha { align-self: center; font-size: 11px; color: var(--texto-suave); margin: 10px 0 2px; letter-spacing: .2px; }
.msj-fecha b { font-weight: 600; color: var(--texto-2); }

/* Corregir: aparece solo al dejar el mouse sobre el globo del colaborador */

/* ─── Compositor: una sola caja dinámica que crece con el texto ───
   La pista de arriba le dice al director qué está pidiendo el agente. */
.chat-pista {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 12px;
  font-size: 11px; color: var(--texto-suave);
  background: var(--fondo); border: 1px dashed var(--borde);
  border-radius: 10px;
}
.chat-pista::before { content: '●'; color: var(--rojo); font-size: 8px; }
.chat-pista.oculto { display: none; }
.chat-entrada { padding: 10px 0 2px; }
.chat-caja {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 4px 4px 4px 14px;
  min-height: 39px;
  transition: border-color .15s;
}
.chat-caja:focus-within {
  border-color: transparent;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
}
.chat-caja textarea {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--texto);
  font-size: 14px; font-family: inherit; line-height: 1.5;
  resize: none;
  max-height: 160px;
  padding: 5px 0;
}
.chat-caja textarea::placeholder { color: var(--texto-suave); }
.chat-enviar {
  width: 34px; height: 34px; flex: none;
  border: none; border-radius: 50%;
  background: var(--contraste); color: var(--contraste-texto);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .1s, opacity .15s;
}
.chat-enviar svg { width: 16px; height: 16px; }
.chat-enviar:hover { opacity: .85; }
.chat-enviar:active { transform: scale(.92); }
.chat-enviar:disabled { opacity: .35; cursor: not-allowed; }

/* ─── Herramientas ─── */
.rejilla-herramientas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 20px;
}
.panel h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--texto-suave); font-weight: 600; margin-bottom: 8px;
}
.catalogo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.form input, .form select {
  background: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
.form input:focus, .form select:focus {
  outline: none;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
}
.campo-fila { display: flex; gap: 8px; }
.fila-botones { display: flex; gap: 8px; justify-content: flex-end; }
/* Los enlaces legales de Configuración: a la izquierda y envolviendo, que son cuatro. */
.fila-legal { display: flex; gap: 8px; flex-wrap: wrap; }

.item-herramienta {
  display: flex; align-items: center; gap: 10px;
  background: var(--fondo);
  border: 1px solid var(--panel-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.item-herramienta .nombre { font-weight: 600; }
.item-herramienta .campos { color: var(--texto-suave); font-size: 12px; flex: 1; }
.item-herramienta .quitar {
  background: none; border: none; color: var(--texto-suave);
  cursor: pointer; font-size: 15px; padding: 2px 6px;
}
.item-herramienta .quitar:hover { color: var(--peligro); }

.memorias { max-height: 300px; overflow-y: auto; }
.memoria-item {
  font-size: 12.5px;
  color: #cfcfcf;
  border-left: 2px solid var(--borde);
  padding: 6px 12px;
  line-height: 1.5;
}
.memoria-item .meta { color: #5a5a5a; font-size: 10.5px; display: block; }

/* ─── Entrenamiento ─── */
.rejilla-entrenamiento {
  display: grid;
  grid-template-columns: minmax(340px, 480px) 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .rejilla-entrenamiento { grid-template-columns: 1fr; } }

.form textarea.area-leccion {
  background: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
}
.form textarea.area-leccion:focus {
  outline: none;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
}

.confirmacion {
  display: none;
  background: var(--fondo);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #cfcfcf;
  white-space: pre-wrap;
}
.confirmacion.con-datos {
  display: block;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
}
.confirmacion.estudiando {
  display: block;
  color: var(--texto-suave);
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
  background-size: auto, 200% 100%;
  animation: fluir 1.6s linear infinite;
}

.proc-card {
  background: var(--fondo);
  border: 1px solid var(--panel-2);
  border-radius: 12px;
  padding: 14px;
}
.proc-card .fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proc-card .titulo { font-weight: 600; font-size: 14px; flex: 1; }
.proc-card .desc { font-size: 12.5px; color: var(--texto-suave); margin: 6px 0; }
.proc-card .progreso {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0;
}
.proc-barra {
  flex: 1; height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden;
}
.proc-barra > div { height: 100%; background: var(--gradiente); border-radius: 999px; transition: width .4s; }
.proc-card .stats { font-size: 11px; color: var(--texto-suave); }
.proc-card .feedback { font-size: 12px; color: #cfcfcf; border-left: 2px solid var(--borde); padding-left: 10px; margin: 8px 0; }
.proc-card details { margin-top: 8px; }
.proc-card summary { font-size: 12px; color: var(--texto-suave); cursor: pointer; }
.proc-card pre {
  white-space: pre-wrap; font-family: inherit; font-size: 12.5px; color: #cfcfcf;
  background: var(--panel); border-radius: 8px; padding: 10px; margin-top: 8px;
  max-height: 300px; overflow-y: auto;
}
.tag.dominado {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
  color: #fff;
}
.tag.en_entrenamiento { color: #cfcfcf; border-color: #4a4a4a; }

/* ─── Login ─── */
.oculto { display: none !important; }
.pantalla {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.login-hero { text-align: center; max-width: 640px; }
.login-marca {
  font-size: 15px; font-weight: 700; letter-spacing: 6px;
  color: var(--texto-suave); margin-bottom: 40px;
}
.login-titulo {
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.12;
  margin-bottom: 18px;
}
.palabra-gradiente {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 4px solid transparent;
  border-image: var(--gradiente) 1;
}
.login-sub { color: var(--texto-suave); font-size: 16px; margin-bottom: 40px; }
/* La portada de la app de Mac: el logo, el nombre grande con su ™ y el panel para entrar
   (html.app-escritorio, app.js). El reclamo y la lista de espera son de la web. */
.login-app { display: none; }
html.app-escritorio .login-app { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-bottom: 44px; }
html.app-escritorio .login-marca, html.app-escritorio .login-titulo, html.app-escritorio .login-sub { display: none; }
.login-app-logo { width: 112px; height: 112px; object-fit: contain; }
.login-app-nombre { font-size: clamp(64px, 9vw, 92px); font-weight: 650; letter-spacing: -2.5px; line-height: 1; margin: 0; }
.login-app-tm { font-size: .26em; font-weight: 500; letter-spacing: 0; vertical-align: top; position: relative; top: .18em; margin-left: .1em; }
/* En la portada no hay nada más: con el logo grande, el pequeño de la esquina sobra, y el botón de
   reportar un fallo es para quien ya está dentro. */
html.app-escritorio:has(#pantalla-login:not(.oculto)) :is(#btn-marca, #btn-bicho) { display: none; }
.login-acciones { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#google-boton { min-height: 44px; display: flex; justify-content: center; }
.login-error { color: var(--peligro); font-size: 13px; margin-top: 14px; min-height: 18px; }
.login-setup { margin-top: 34px; text-align: left; }
.login-setup summary { color: var(--texto-suave); font-size: 13px; cursor: pointer; text-align: center; }
.login-setup summary:hover { color: var(--texto); }
.login-setup .form { margin-top: 12px; }
.login-setup code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
/* Correo y contraseña: campos de relleno, sin línea de borde (regla del 15-sep-2026); el foco es
   un anillo, que es lo único que se permite dibujar alrededor. */
.login-clave, .acceso-form {
  display: flex; flex-direction: column; gap: 10px;
  width: min(340px, 100%); margin: 0 auto 14px;
}
.acceso-form { width: min(380px, 100%); margin: 6px 0 0; }
.login-clave input, .acceso-form input {
  background: var(--panel-2); border: 0; color: var(--texto);
  border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; width: 100%;
}
.login-clave input::placeholder, .acceso-form input::placeholder { color: var(--texto-suave); }
.login-clave input:focus, .acceso-form input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); }
.login-clave input[readonly] { color: var(--texto-suave); }
/* Las listas de la espera (14-oct-2026): la misma caja que los campos, con su flecha. */
.login-clave select {
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%239d9d9d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
  border: 0; color: var(--texto); border-radius: 12px; padding: 12px 36px 12px 14px; font: inherit; font-size: 14px; width: 100%;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.login-clave select:invalid { color: var(--texto-suave); }
.login-clave select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); }
.login-clave .btn { width: 100%; justify-content: center; min-height: 42px; margin-top: 4px; }
.login-enlace { appearance: none; border: 0; background: none; color: var(--texto-suave); font: inherit; font-size: 13px; padding: 5px; cursor: pointer; text-align: center; }
.login-enlace:hover { color: var(--texto); }
.login-enlace:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); border-radius: 8px; }
.login-invita { color: var(--texto-2, var(--texto)); font-size: 14px; line-height: 1.55; margin: 0 0 6px; }
/* El enlace de la lista de espera: texto, no botón. Quien ya tiene cuenta viene a entrar, así que
   esto no compite con “Entrar” — solo está ahí para el que todavía no puede. */
.login-espera-enlace {
  display: block; margin: 2px auto 0; background: none; border: 0; padding: 6px;
  color: var(--texto-suave); font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.login-espera-enlace:hover { color: var(--texto); }
.login-espera-enlace:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); border-radius: 8px; }
/* Entrar o crear cuenta: dos pestañas con el óvalo de siempre. */
.login-pestanas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel-2); margin: 0 auto 16px; }
.login-pestanas button { border: 0; background: transparent; color: var(--texto-suave); font: inherit; font-size: 13px; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.login-pestanas button.activa { background: var(--contraste, #fff); color: var(--fondo, #000); }
.login-legal { font-size: 12px; color: var(--texto-suave); margin: 2px 0 0; line-height: 1.5; }
.login-legal a { color: var(--texto); }
/* Dentro de la cuenta de un cliente no se ve lo que es de la casa. */
/* Plataforma: una fila por cuenta. */
.cuenta-fila { padding: 12px 0; }
.cuenta-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cuenta-cabeza .usuario-info { flex: 1; min-width: 220px; }
.cuenta-datos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 44px; }
/* Google y Microsoft debajo de la contraseña: la misma anchura, relleno y sin borde. */
.login-proveedores { width: min(340px, 100%); margin: 2px auto 0; display: flex; flex-direction: column; gap: 10px; }
.login-o { display: flex; align-items: center; gap: 12px; color: var(--texto-suave); font-size: 12px; margin: 2px 0 4px; }
.login-proveedores.sin-o .login-o { display: none; }
.login-o::before, .login-o::after { content: ''; flex: 1; height: 1px; background: var(--panel-2); }
.login-proveedor {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; border-radius: 12px; background: var(--panel-2); color: var(--texto);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.login-proveedor:hover { background: var(--realce, var(--panel-2)); }
.login-proveedor svg { width: 18px; height: 18px; flex: none; }
/* Personas: estado, último acceso y por dónde entra cada una. */
.usuario-estado { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--texto-suave); white-space: nowrap; }
.usuario-estado.bloqueado { background: color-mix(in srgb, var(--peligro) 18%, transparent); color: var(--peligro); }
.usuario-metodos { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.usuario-metodos svg { width: 12px; height: 12px; }
.usuario-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px 44px; }
.usuario-acciones .motivo { width: 100%; color: var(--texto-suave); font-size: 12px; }
.proveedor-fila { padding: 12px 0; }
.proveedor-cabeza { display: flex; align-items: center; gap: 10px; }
.proveedor-cabeza svg { width: 18px; height: 18px; }
.proveedor-cabeza b { flex: 1; }
.proveedor-vuelta { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.proveedor-vuelta code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--texto-suave); background: var(--panel-2); border-radius: 8px; padding: 7px 10px; }
.proveedor-form { display: flex; gap: 8px; flex-wrap: wrap; }
.proveedor-form input {
  flex: 1 1 220px; min-width: 0; background: var(--panel-2); border: 0; color: var(--texto);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px;
}
.proveedor-form input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); }
.conector-token { margin-top: 10px; }
.conector-token .ayuda { margin: 0 0 8px; }
.conector-token-fila { display: flex; gap: 8px; }
.conector-token-fila input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 0; color: var(--texto);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px;
}
.conector-token-fila input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); }
.invitacion-enlace {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: var(--panel-2); border-radius: 10px; padding: 8px 10px;
}
.invitacion-enlace code {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--texto-suave);
}

/* ─── Onboarding ─── */
.onboarding-caja {
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border: 0;
  border-radius: 20px;
  padding: 28px;
  transition: max-width .42s var(--ease);
}
/* LA TARJETA LLEGA HASTA ABAJO Y SE DESPLAZA POR DENTRO (regla del director, 15-sep-2026: “me
   gusta cómo la tarjeta se corta abajo, pero que tenga margen inferior, que no corte el texto”).
   Detrás había un fallo, no solo un margen: el asistente medía más que la ventana y NO se podía
   desplazar —el `overflow: hidden` del cuerpo, que existe para que el scroll viva dentro de la app,
   pasa a la ventana entera—, así que el final de cada paso y su “Siguiente” quedaban recortados sin
   forma de llegar a ellos. Ahora es una hoja: arranca con su aire arriba, se corta contra el borde
   inferior como la vio el director, desplaza su contenido por dentro y termina con aire de sobra,
   de modo que la última línea y los botones se leen enteros por encima del borde. */
#pantalla-onboarding { height: 100vh; min-height: 0; align-items: flex-start; padding-block: 32px; overflow: hidden; }
/* PERO SOLO SE ESTIRA SI HACE FALTA (regla del director, 16-sep-2026: “no me gusta esa
   distribución; la que teníamos al inicio, con el logo del app y la pregunta sobre el fondo de
   vidrio, me gustaba más”). Con `height` fija, una página corta —la de para quién es— salía como
   una plancha negra de arriba abajo con el contenido apretado en el borde superior. Con
   `max-height` la tarjeta abraza su contenido y vuelve a ser una tarjeta sobre el vidrio; una
   página larga sigue cortándose abajo y desplazándose por dentro, como él la aprobó. */
#pantalla-onboarding .onboarding-caja {
  height: auto; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Y CENTRADA SEGÚN SU TAMAÑO (regla del director, 16-sep-2026: “centra según su tamaño todos los cuadros negros”).
     Márgenes automáticos: reparten arriba y abajo el sitio que sobra y nunca bajan de cero, así que la página que no
     cabe se queda con su aire arriba y se corta contra el borde de abajo, como antes. Al pasar de página el alto
     cambia en un solo gesto (`suavizarAltoCaja`, app.js) y el sitio lo acompaña. */
  margin-block: auto;
}
#pantalla-onboarding .onboarding-caja.cambiando-alto { overflow: hidden; }
/* El corte contra el borde (sin filo abajo) solo cuando de verdad llega al fondo. */
#pantalla-onboarding .onboarding-caja.al-fondo:not(.cambiando-alto) {
  border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* Sin error no se reserva su renglón: dejaba el pie de la tarjeta con el doble de aire que la cabecera. */
#pantalla-onboarding #onboarding-error:empty { display: none; }
/* El aire del final va como un bloque dentro del contenido y no como `padding-bottom`: hay motores
   que no cuentan el relleno inferior de una caja con scroll y se lo comen al llegar al final. */
#pantalla-onboarding .onboarding-caja.al-fondo::after { content: ''; display: block; height: 56px; }
.onboarding-cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.onboarding-progreso {
  height: 5px; border-radius: 999px; background: var(--panel-2);
  overflow: hidden; margin-bottom: 24px;
}
#onboarding-barra {
  height: 100%; width: 20%;
  background: var(--gradiente);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width .35s;
  animation: fluir 3s linear infinite;
}
.paso { display: none; }
.paso.visible { display: block; animation: aparecer var(--dur-3) var(--ease) backwards; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.paso h3 { font-size: 15px; margin-bottom: 16px; font-weight: 600; }
.paso label {
  display: block;
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.paso .ob-pregunta { display: block; }
.paso label.oculto { display: none; }

/* ─── EL LOGO DE LA APP ABRE EL ASISTENTE ───
   Antes iba la inicial de Prici en un avatar. Pero aquí todavía NO hay equipo contratado —el
   director acaba de entrar— y quien le pregunta por su empresa es Think², no una colaboradora
   que aún no conoce (regla del director, 11-sep-2026). El logo va sin fondo ni recorte: ya es
   un círculo de figuras y meterlo en otro círculo lo parte. */
.ob-logo { width: 44px; height: 44px; flex: none; object-fit: contain; }

/* ─── ELEGIR PAÍSES: FICHAS QUE SE ENCIENDEN ───
   El control se envió con su JavaScript y SIN una sola línea de CSS: los chips salían como
   botones crudos del navegador —fondo gris del sistema, texto negro, pegados unos a otros—
   encima de un formulario negro, y los 64 países en bruto empujaban el resto del asistente
   fuera de la pantalla. Llevan la misma píldora que los filtros de Contratación y viven en una
   caja con scroll, así que el campo mide lo mismo con 6 países que con 64. */
.paises-elegir { margin-top: 5px; position: relative; }
.paises-boton {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 13.5px;
  cursor: pointer; text-align: left;
}
.paises-boton:hover { border-color: var(--borde-2); }
.paises-boton svg { width: 16px; height: 16px; flex: none; color: var(--texto-suave); transition: transform .18s; }
.paises-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.paises-resumen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paises-panel {
  margin-top: 7px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--fondo); padding: 8px;
}
.paises-panel.oculto { display: none; }
.paises-panel .paises-buscar { margin: 0 0 6px; }
/* La lista tiene SU scroll: abierta crece hasta 190px y ni un píxel más, así que el formulario
   sigue cabiendo y “Siguiente” no se va de la pantalla. */
.paises-lista { max-height: 190px; overflow-y: auto; overscroll-behavior: contain; }
/* LA LISTA, COMO LA NATIVA (regla del director, 11-sep-2026: “que la tarjeta de esta sección
   sea más como la segunda imagen” — el desplegable de macOS).
   ⚠ La especificidad importa aquí: `.paso label` (0,1,1) le GANA a `.pais-fila` (0,1,0), así
   que el `display: block` del formulario se imponía sobre el `flex` de la fila. Resultado: la
   casilla arriba, el texto debajo, y el `margin-bottom: 12px` del label abriendo un hueco entre
   cada país. Por eso el selector va cualificado con el panel: sube a 0,2,0 y gana. */
.paises-panel .pais-fila {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  /* Filas bajas y juntas, como las de un menú del sistema: en una lista de 63 lo que se busca
     es recorrerla con la vista, no leer una por una. */
  padding: 5px 8px; border-radius: 6px; margin: 0;
  font-size: 13px; line-height: 1.25; color: var(--texto);
  letter-spacing: normal; white-space: nowrap;
}
.paises-panel .pais-fila:hover { background: var(--panel-2); }
.paises-panel .pais-fila input {
  width: 14px; height: 14px; margin: 0; flex: none; accent-color: var(--acento); cursor: pointer;
}
.paises-panel .pais-fila[hidden] { display: none; }
.paises-panel .pais-todos {
  border-bottom: 1px solid var(--borde); border-radius: 6px 6px 0 0;
  margin-bottom: 3px; padding-bottom: 7px; font-weight: 500;
}

/* ═══ ENCENDIDO: EL LOGO SOBRE EL VIDRIO, Y SE ENTRA EN ÉL ═══
   (regla del director, 11-sep-2026: “cuando el app carga al inicio no se vea una pantalla negra
   que dice Think2, sino la pestaña liquid glass con el logo sin fondo”; y 15-sep-2026: fuera los
   nodos y las conexiones, y al estar lista se entra en el hombre blanco del logo —app.js—).
   NO lleva fondo: en la app el vidrio es del sistema y pintarle negro encima es exactamente lo
   que había que quitar. Se va sola cuando la app YA tiene datos debajo —no a los 300 ms—, que
   es la misma regla del velo al cambiar de organización: levantar el telón antes solo enseña la
   pantalla acomodándose. */
#encendido {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: none; pointer-events: none;
  transition: opacity .45s var(--ease, ease);
}
#encendido.ido { opacity: 0; }
#encendido.fuera { display: none; }
#encendido-tunel { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Mientras carga, lo de debajo no se ve: aparece a través de la silueta al entrar en ella. Si el
   JavaScript no llegara nunca, a los 10 s se deja ver igual: una app escondida para siempre es
   peor que una sin animación. */
/* Con OPACIDAD, no con visibility (14-oct-2026, “cuando creas un espacio la pantalla de carga falla”): un hijo con
   `visibility: visible` se sale de un padre oculto, y el tutorial de bienvenida —lo primero que ve un espacio nuevo—
   lo pone en su escena y su texto activos, así que asomaba encima del logo antes del buceo. Con opacidad 0 nada de
   dentro se puede salir. El #encendido (z-index 9000) sigue tapando los clics mientras tanto. */
html.encendiendo body > :not(#encendido) { opacity: 0; animation: encendido-red 1s 10s infinite; }
/* ═══ EL CAMBIO DE TEMA SE FUNDE ═══ (regla del director, 16-sep-2026: “que cuando cambie de tema
   de blanco a negro o viceversa sea más suave, más integrado un color con el otro”). Cambiar de
   tema reescribe la paleta entera de golpe y el salto se ve duro. Durante medio segundo —lo pone y
   lo quita ajustes.js— TODO el documento interpola sus colores; solo los colores, no la geometría,
   y solo mientras dura el cambio: dejarlo puesto arrastraría cada hover y cada repintado.
   El movimiento del vidrio nativo no se toca: aquí no se anima ninguna propiedad de superficie. */
html.cambiando-tema, html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after {
  transition: background-color .45s var(--ease, ease), color .45s var(--ease, ease),
              border-color .45s var(--ease, ease), fill .45s var(--ease, ease),
              stroke .45s var(--ease, ease), box-shadow .45s var(--ease, ease) !important;
}
/* Con “reducir movimiento” no hay fundido: ajustes.js ni siquiera pone la clase. */

/* Mientras la app se recoge en el logo para irse a otro espacio, detrás no se mueve nada: las
   animaciones se congelan (los sondeos los para app.js) y lo que se ve por la silueta está quieto. */
html.quieto *, html.quieto *::before, html.quieto *::after { animation-play-state: paused !important; transition: none !important; }
/* Infinita a propósito: la espera de “quietud” del arranque ignora las infinitas; una de 10 s la
   haría esperar siempre su tope. */
@keyframes encendido-red { from, to { opacity: 1; } }

/* ═══ EL PRIMER DÍA DE UN COLABORADOR ═══ */
.onb-agente-caja { max-width: 560px; max-height: min(88vh, 820px); display: flex; flex-direction: column; }
#onb-agente-cuerpo { overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.onb-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: onb; }
.onb-lista .onb-pregunta { counter-increment: onb; position: relative; padding-left: 28px; }
.onb-lista .onb-pregunta::before {
  content: counter(onb); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600; background: var(--realce-fuerte); color: var(--texto-2);
}
.onb-lista .onb-pregunta h3 { font-size: 14.5px; margin: 0 0 4px; }
.onb-lista .onb-porque { margin-bottom: 8px; }
.onb-lista textarea {
  width: 100%; background: var(--panel-2); border: 1px solid transparent; color: var(--texto);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13.5px; resize: vertical;
}
.onb-lista textarea:focus { outline: none; background: var(--panel-3); }
.onb-canales { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width: 560px) { .onb-canales { grid-template-columns: 1fr; } }
/* FLOTANTES Y CON SU LOGO (regla del director, 18-sep-2026: “que estén más flotantes y con logos de
   las apps”). Sin tarjeta debajo: el logo manda y el texto lo acompaña, como las caras que se
   encienden al crear un grupo. Apagado va al 45 % y en gris; el elegido va a todo color y con su
   aro, que es lo que dice cuál es sin pintar una caja alrededor. */
.onb-canal {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 10px 8px 12px; border: 0; border-radius: 16px; font: inherit;
  background: transparent; color: var(--texto); transition: background .18s var(--ease);
}
.onb-canal-logo {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; opacity: .45; filter: grayscale(1);
  transition: opacity .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease), scale .18s var(--ease);
}
.onb-canal-logo svg { width: 30px; height: 30px; }
.onb-canal-logo.whatsapp { background: linear-gradient(160deg, #5ffc7b, #28d146); }
.onb-canal-logo.sms { background: linear-gradient(160deg, #6ce36c, #1fc11f); }
.onb-canal b { font-size: 13.5px; font-weight: 600; }
.onb-canal span { font-size: 12px; line-height: 1.45; color: var(--texto-suave); max-width: 22ch; }
.onb-canal:hover { background: var(--realce); }
.onb-canal:hover .onb-canal-logo { opacity: .8; filter: grayscale(.4); }
.onb-canal.activo { background: transparent; color: var(--texto); }
.onb-canal.activo .onb-canal-logo { opacity: 1; filter: none; scale: 1.04; box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--texto); }
.onb-canal.activo span { color: var(--texto-suave); }
/* La línea compartida se dice en su sitio, chiquito y bajo el número: un número que es de todos y
   no suyo tiene que decirlo, o el director cree que cada uno tiene el propio (18-sep-2026). */
.ficha-numero em { display: block; font-style: normal; font-size: 11px; color: var(--texto-suave); margin-top: 2px; }
.onb-acceso { margin-top: 22px; }
.onb-acceso.falta .onb-canales, .onb-canales.falta, .onb-jefes.falta { animation: onb-falta .45s var(--ease); }
/* ¿A quién le reporto? (16-oct-2026): las caras del equipo, apagadas hasta que eliges una, como al crear un grupo. */
.onb-jefes { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 10px; }
.onb-jefe {
  width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--texto-suave);
  transition: color var(--rapido, .18s) var(--ease, ease);
}
.onb-jefe > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-jefe .cara-nombre { line-height: 1.25; }
.onb-jefe .cara-cargo { margin-top: -4px; font-size: 10px; opacity: .75; }
.onb-jefe .chat-agente-avatar {
  width: 50px; height: 50px; font-size: 18px; overflow: visible;
  opacity: .34; filter: grayscale(1);
  transition: opacity var(--rapido, .18s) var(--ease, ease), filter var(--rapido, .18s) var(--ease, ease), box-shadow var(--rapido, .18s) var(--ease, ease);
}
.onb-jefe:hover .chat-agente-avatar { opacity: .6; }
.onb-jefe.activo { color: var(--texto); }
.onb-jefe.activo .chat-agente-avatar { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--contraste); }
.onb-jefe:focus-visible { outline: none; }
.onb-jefe:focus-visible .chat-agente-avatar { outline: 2px solid var(--contraste); outline-offset: 3px; }
@keyframes onb-falta { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.onb-saluda { font-size: 15px; margin-bottom: 10px; }
.onb-intro p { font-size: 13.5px; line-height: 1.65; color: var(--texto); margin-bottom: 10px; }
.onb-nota { font-size: 12px; color: var(--texto-suave); }
.onb-num { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.onb-pregunta h3 { font-size: 17px; font-weight: 600; margin: 8px 0 6px; line-height: 1.35; }
.onb-porque { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 12px; }
#onb-respuesta {
  width: 100%; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 13.5px; resize: vertical;
}
#onb-respuesta:focus { outline: none; border-color: var(--borde-2); }
.onb-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* La promesa de la demostración: se lee como una ficha, no como un párrafo más. */
.onb-demo {
  border: 1px solid var(--borde); border-radius: 12px; padding: 13px 15px;
  background: var(--panel-2); margin-top: 4px;
}
.onb-demo b { display: block; font-size: 12px; color: var(--texto-suave); font-weight: 500; margin-bottom: 5px; }
.onb-demo span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--texto); }
.onb-demo i { display: block; font-style: normal; font-size: 11.5px; color: var(--texto-suave); margin-top: 9px; }
#onb-demo-estado:empty { display: none; }
#onb-demo-estado { margin-top: 10px; }
.onb-agente-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* ═══ EL BICHO: reportar un fallo desde donde sea ═══
   Blanco y cambiante con el tema (regla del director, 11-sep-2026), que es exactamente lo que
   significa “--contraste”: no “blanco”, sino “el color de más contraste contra el fondo de
   ahora”. En oscuro sale blanco; en claro, casi negro. Discreto en reposo —no compite con la
   app— y entero al pasar por encima. */
/* LA MARCA EN LA ESQUINA (regla del director, 16-sep-2026: “el logo de Think sin fondo… y al hacer clic que me
   lleve a la landing del producto”). Sin círculo ni relleno: es el logo y nada más. DE ABAJO ARRIBA (2-oct-2026,
   “salen sobremontados”): el logo en la esquina, encima el de fallos y, cuando sale, encima de ese el de
   actualizar (version.js, #btn-version). */
#btn-marca {
  position: fixed; left: 14px; bottom: 14px; z-index: 7500;
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; padding: 0;
  transition: transform .18s;
}
#btn-marca:hover { transform: scale(1.08); }
#btn-marca img { width: 26px; height: 26px; display: block; }
/* Con la sesión abierta, tu cara (6-nov-2026): el mismo círculo de Tu cuenta, del tamaño del logo que reemplaza. */
#btn-marca .persona-cara.marca-cara { width: 26px; height: 26px; font-size: 12px; }
#btn-marca .persona-cara.marca-cara > img { width: 100%; height: 100%; object-fit: cover; }
#btn-bicho {
  position: fixed; left: 14px; bottom: 52px; z-index: 7500;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--contraste); color: var(--contraste-texto);
  border: 0; padding: 0; opacity: .35;
  transition: opacity .18s, transform .18s;
}
#btn-bicho:hover { opacity: 1; transform: scale(1.08); }
#btn-bicho svg { width: 17px; height: 17px; }
/* ENVIAR COMENTARIOS, como la ventana de la captura (29-oct-2026): título y para qué sirve arriba a la izquierda, la ✕
   suelta en la esquina, el campo con su ejemplo, qué viaja con el informe en gris, y Cancelar · Enviar abajo a la
   derecha. Sin sombras ni líneas de borde: el campo se separa por su relleno y el foco es un aro fino de --contraste. */
.bicho-caja { max-width: 520px; position: relative; padding: 22px 22px 18px; }
.bicho-x {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--texto-2);
  border-radius: 8px; transition: color .15s, background-color .15s;
}
.bicho-x:hover { color: var(--texto); background: var(--realce, rgba(127,127,127,.12)); }
.bicho-x svg { width: 20px; height: 20px; }
.bicho-cabeza { padding-right: 36px; margin-bottom: 14px; }
.bicho-cabeza h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
#bicho-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
#bicho-texto {
  width: 100%; min-height: 104px; background: var(--panel-2); border: 0; color: var(--texto);
  border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s;
}
#bicho-texto::placeholder { color: var(--texto-suave); }
#bicho-texto:focus { outline: none; box-shadow: inset 0 0 0 1px var(--contraste); }
#bicho-adjunto { margin: 12px 0 0; color: var(--texto-suave); font-size: 12.5px; line-height: 1.5; }
#bicho-aviso:not(:empty) { margin-top: 10px; }
.bicho-pie { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; }
.bicho-pie .btn { min-width: 92px; }
.bicho-pie .btn.primario:disabled { opacity: .45; cursor: default; }

/* ─── El gracias ───
   El cuadro no se cierra de golpe: encoge hasta el tamaño del mensaje mientras el formulario se
   va, así que se ve UNA caja que se transforma, no dos que se relevan. Por eso la altura se
   anima en .modal-caja y no se oculta el modal entero. */
#modal-bicho .modal-caja { transition: max-width .32s var(--ease, ease), padding .32s var(--ease, ease); }
#modal-bicho .modal-caja.gracias { max-width: 380px; }
#modal-bicho.saliendo { opacity: 0; transition: opacity .3s var(--ease, ease); }
#bicho-gracias { text-align: center; padding: 10px 6px 4px; }
#bicho-gracias.oculto { display: none; }
.bicho-gracias-titulo { font-size: 16px; font-weight: 600; margin: 14px 0 6px; }
.bicho-gracias-texto { font-size: 13px; line-height: 1.6; color: var(--texto-2); }
.bicho-check { width: 52px; height: 52px; }
.bicho-check-aro { stroke: var(--ok, #3ecf8e); stroke-width: 2.4; opacity: .45; }
.bicho-check-trazo { stroke: var(--ok, #3ecf8e); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  /* El aro se cierra y después el trazo se dibuja: el orden es lo que lo hace parecer un gesto
     y no dos animaciones a la vez. */
  .bicho-check-aro { stroke-dasharray: 145; stroke-dashoffset: 145; animation: bicho-aro .5s var(--ease, ease) forwards; }
  .bicho-check-trazo { stroke-dasharray: 36; stroke-dashoffset: 36; animation: bicho-trazo .32s var(--ease, ease) .42s forwards; }
  #bicho-gracias .bicho-gracias-titulo, #bicho-gracias .bicho-gracias-texto {
    animation: bicho-sube .38s var(--ease, ease) .5s backwards;
  }
  @keyframes bicho-aro { to { stroke-dashoffset: 0; } }
  @keyframes bicho-trazo { to { stroke-dashoffset: 0; } }
  @keyframes bicho-sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ═══ RECORRIDO GUIADO ═══
   El sombreado es la SOMBRA de #rec-foco, no un velo con máscara: así iluminar otra zona es
   animar cuatro números y se ve el salto de una sección a otra, que es lo que se pidió. La capa
   no intercepta el ratón (salvo la tarjeta): el recorrido acompaña, no secuestra la app. */
#recorrido { position: fixed; inset: 0; z-index: 8000; pointer-events: none; }
#recorrido.oculto { display: none; }
#rec-foco {
  position: absolute; border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72), 0 0 0 1px var(--contraste) inset;
  transition: top .42s var(--ease, cubic-bezier(.22,.68,.32,1)), left .42s var(--ease, cubic-bezier(.22,.68,.32,1)),
              width .42s var(--ease, cubic-bezier(.22,.68,.32,1)), height .42s var(--ease, cubic-bezier(.22,.68,.32,1));
}
@media (prefers-reduced-motion: no-preference) {
  #rec-foco::after {
    content: ''; position: absolute; inset: -3px; border-radius: 17px;
    border: 1px solid var(--contraste); opacity: .5;
    animation: rec-latido 2.2s ease-in-out infinite;
  }
  @keyframes rec-latido { 0%, 100% { opacity: .18; transform: scale(1); } 50% { opacity: .6; transform: scale(1.012); } }
}
#rec-tarjeta {
  position: absolute; width: 320px; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--borde-2); border-radius: 16px;
  padding: 16px 18px 14px;
  transition: top .42s var(--ease, ease), left .42s var(--ease, ease);
}
#rec-tarjeta h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; }
#rec-tarjeta p { font-size: 12.5px; line-height: 1.6; color: var(--texto); margin-bottom: 14px; }
.rec-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rec-botones { display: flex; gap: 6px; }
#rec-puntos { display: flex; gap: 5px; }
.rec-punto { width: 5px; height: 5px; border-radius: 50%; background: var(--borde-2); transition: background .2s, width .2s; }
.rec-punto.activo { background: var(--contraste); width: 14px; border-radius: 3px; }
#btn-rec-atras:disabled { opacity: .35; cursor: not-allowed; }

/* Las miniaturas animadas de cada paso: el mismo lenguaje del tutorial de capacitación. */
#rec-visual { height: 74px; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
.rec-v { display: flex; align-items: center; gap: 7px; }
.rec-v i { width: 20px; height: 20px; border-radius: 50%; background: var(--borde-2); }
.rec-v b { display: block; height: 9px; border-radius: 5px; background: var(--borde-2); }
.rec-v-chat { flex-direction: column; align-items: flex-start; gap: 5px; }
.rec-v-chat b { width: 74px; }
.rec-v-chat b.yo { width: 50px; align-self: flex-end; background: var(--contraste); }
.rec-v-aprobar s { width: 58px; height: 30px; border-radius: 7px; background: var(--borde-2); display: block; }
.rec-v-aprobar em { width: 30px; height: 30px; border-radius: 50%; background: var(--contraste); display: block; }
.rec-v-contratar i:nth-child(2) { background: var(--contraste); }
.rec-v-tools i { border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .rec-v i, .rec-v b, .rec-v s, .rec-v em { animation: rec-entra .9s var(--ease, ease) backwards; }
  .rec-v > :nth-child(2) { animation-delay: .12s; }
  .rec-v > :nth-child(3) { animation-delay: .24s; }
  .rec-v > :nth-child(4) { animation-delay: .36s; }
  @keyframes rec-entra { from { opacity: 0; transform: translateY(7px) scale(.9); } to { opacity: 1; transform: none; } }
}

/* ═══ PARA QUIÉN ES: dos fichas, nada más ═══
   Una pregunta sola en la pantalla. Sin formulario, sin “siguiente”: elegir ES avanzar. */
#pantalla-uso { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.uso-caja { width: 100%; max-width: 560px; text-align: center; }
.uso-logo { width: 64px; height: 64px; object-fit: contain; margin-bottom: 20px; }
.uso-titulo { font-size: 30px; font-weight: 600; letter-spacing: -.5px; margin-bottom: 10px; }
.uso-sub { color: var(--texto); font-size: 13.5px; margin-bottom: 28px; }
.uso-opciones { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .uso-opciones { grid-template-columns: 1fr; } }
.uso-ficha {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 20px; border-radius: 16px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
  font: inherit; transition: border-color .16s, background .16s, transform .16s;
}
.uso-ficha:hover:not(:disabled) { background: var(--panel-2); transform: translateY(-2px); }
.uso-ficha:disabled { cursor: default; opacity: .5; }
.uso-ficha.elegida { border-color: var(--acento); background: var(--panel-2); opacity: 1; }
.uso-ficha-nombre { font-size: 15.5px; font-weight: 600; }
.uso-ficha-desc { font-size: 12.5px; color: var(--texto); line-height: 1.5; }

/* ═══ LO QUE HAY QUE SABER: divulgación y aceptación ═══
   Un documento, no un formulario: se lee. La lista tiene su propio scroll para que la casilla y
   el botón NO se vayan fuera de la pantalla — si hay que desplazarse para encontrar el botón de
   aceptar, la aceptación deja de ser informada y pasa a ser un acto de fe. */
#pantalla-legal { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.legal-caja {
  width: 100%; max-width: 620px; max-height: min(86vh, 760px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 30px 32px 26px;
}
.legal-titulo { font-size: 25px; font-weight: 600; letter-spacing: -.4px; margin-bottom: 10px; }
.legal-intro { color: var(--texto); font-size: 13.5px; line-height: 1.6; margin-bottom: 22px; }
.legal-lista {
  list-style: none; counter-reset: legal; margin: 0; padding: 0 8px 0 0;
  overflow-y: auto; flex: 1; min-height: 0;
}
.legal-lista li { counter-increment: legal; position: relative; padding-left: 30px; margin-bottom: 20px; }
.legal-lista li::before {
  content: counter(legal); position: absolute; left: 0; top: 1px;
  font-size: 12.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums;
}
.legal-lista b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.legal-lista span { display: block; font-size: 13px; line-height: 1.66; color: var(--texto); }
.legal-acepto {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin: 20px 0 18px; padding-top: 18px; border-top: 1px solid var(--borde);
  font-size: 12.5px; line-height: 1.6; color: var(--texto);
}
.legal-acepto input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--acento); cursor: pointer; }
.legal-acepto a { color: var(--acento); }
.legal-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#btn-legal-seguir:disabled { opacity: .4; cursor: not-allowed; }
.encendido-logo {
  position: relative; width: 96px; height: 96px; object-fit: contain;
}
@media (prefers-reduced-motion: no-preference) {
  /* Respira: el logo no está congelado mientras el motor enciende. */
  .encendido-logo { animation: encendido-latido 2.6s ease-in-out infinite; }
  @keyframes encendido-latido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
  }
}
.paso input, .paso textarea, .paso select {
  display: block;
  width: 100%;
  margin-top: 5px;
  background: var(--panel-2);
  border: 1px solid transparent;
  color: var(--texto);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
}
.paso input:focus, .paso textarea:focus, .paso select:focus {
  outline: none;
  background: var(--panel-3);
}
.btn-nose {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--borde);
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-nose:hover { color: var(--texto); }
.btn-nose.activo {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    var(--gradiente) border-box;
  color: #fff;
}
.paso input.nose-marcado, .paso textarea.nose-marcado { display: none; }
.ob-cuenta {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--realce);
}
.ob-cuenta h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ob-cuenta select, .ob-cuenta input {
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; font-family: inherit;
}
.ob-cuenta .campo-fila input { flex: 1; }

.onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

/* ═══ EL ONBOARDING, UN PROCESO CERRADO (reglas del director, 15-sep-2026) ═══
   Tres etapas en la misma hoja: cómo funciona (tutorial.js), tú (dos páginas) y tu primer
   colaborador (la sección de Contratación mudada aquí, con la hoja más ancha). */
.ob-etapas { display: flex; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; counter-reset: etapa; }
.ob-etapas li {
  counter-increment: etapa; flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; background: var(--realce);
  font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .3s var(--ease), color .3s var(--ease);
}
/* Una etapa ya hecha se puede volver a abrir: el ✓ promete que ahí hay algo terminado y que se
   puede volver (regla del director, 16-sep-2026: “¿dónde puedo ver de nuevo los tutoriales?”). */
.ob-etapas li.vuelve { cursor: pointer; }
.ob-etapas li.vuelve:hover { background: var(--realce-fuerte); color: var(--texto); }
.ob-etapas li.vuelve:focus-visible { outline: 1px solid var(--texto-suave); outline-offset: 2px; }
.ob-etapas li::before {
  content: counter(etapa); flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  background: var(--panel-3); color: var(--texto-2);
}
.ob-etapas li.actual { background: var(--realce-fuerte); color: var(--texto); }
.ob-etapas li.actual::before { background: var(--contraste); color: var(--contraste-texto); }
.ob-etapas li.hecha { color: var(--texto-2); }
.ob-etapas li.hecha::before { content: '✓'; }
#pantalla-onboarding .onboarding-caja.ancha { max-width: min(1240px, calc(100vw - 48px)); }
#pantalla-onboarding .onboarding-caja.con-tutorial { max-width: min(980px, calc(100vw - 48px)); }
/* ═══ EL INSTRUCTIVO FLOTA SOBRE EL VIDRIO ═══ (regla del director, 16-sep-2026: “que los títulos
   estén sobre el liquid glass en color blanco, el tutorial sin tarjeta de fondo, y los botones
   también flotantes sobre el liquid glass”). Mientras se ve el instructivo la caja del asistente
   deja de ser tarjeta: sin relleno, y todo lo que se lee —cabecera, etapas, título y frase— va en
   blanco directo sobre el vidrio. La escena sí conserva su propia ventana: es la app de verdad en
   miniatura, y sin su marco no se entendería qué se está mirando. Vale igual para el instructivo
   reabierto desde Configuración (`.hoja-tutorial`), que tampoco lleva caja. Solo en la APP: en la web
   el fondo es un color sólido del tema y el blanco se perdería en tema claro, así que conserva su tarjeta. */
/* ═══ TODO EL ASISTENTE, SOBRE EL VIDRIO ═══ (regla del director, 16-sep-2026: “me gustaría que lo de para qué vas a
   usar Think² estuviera sobre el liquid glass y esto se mantuviera por todo el proceso, esa estética me encanta”). Lo
   que empezó con el instructivo vale ahora para las tres etapas —cómo funciona, tú y tu primer colaborador— y para el
   primer día del colaborador que se contrata ahí (`.modal.sobre-vidrio`): sin tarjeta, todo directo sobre el vidrio.
   Y sigue al tema, porque el vidrio también lo sigue (main.m: negro al 45 % en oscuro, blanco al 42 % en claro): los
   colores salen de `--vidrio-*` y las páginas los reciben como sus variables de siempre (texto, realce, contraste…),
   así que las fichas de uso, los campos, los botones y las tarjetas de Contratación se adaptan sin una regla por pieza.
   La escena del instructivo NO las recibe: es la app en miniatura y tiene que verse como la app. En oscuro los valores
   son exactamente los del instructivo que el director aprobó. */
html.app-mac #pantalla-onboarding,
html.app-mac .capa-tutorial,
html.app-mac .modal.sobre-vidrio {
  --vidrio-texto: #fff;
  --vidrio-texto-2: rgba(255, 255, 255, .72);
  --vidrio-desc: rgba(255, 255, 255, .86);
  --vidrio-tenue: rgba(255, 255, 255, .5);
  --vidrio-relleno: rgba(255, 255, 255, .12);
  --vidrio-relleno-actual: rgba(255, 255, 255, .22);
  --vidrio-boton: rgba(255, 255, 255, .14);
  --vidrio-boton-fuerte: rgba(255, 255, 255, .24);
  --vidrio-lleno: #fff;
  --vidrio-lleno-texto: #111;
  --vidrio-punto: rgba(255, 255, 255, .38);
  --vidrio-hueco: #1e1e1e;
  --vidrio-hueco-texto: #cfcfcf;
  --vidrio-solido: #19191b;
  --vidrio-velo: rgba(12, 12, 14, .32);
}
html.app-mac[data-tema="claro"] #pantalla-onboarding,
html.app-mac[data-tema="claro"] .modal.sobre-vidrio {
  --vidrio-texto: #141416;
  --vidrio-texto-2: rgba(0, 0, 0, .62);
  --vidrio-desc: rgba(0, 0, 0, .74);
  --vidrio-tenue: rgba(0, 0, 0, .42);
  --vidrio-relleno: rgba(0, 0, 0, .06);
  --vidrio-relleno-actual: rgba(0, 0, 0, .12);
  --vidrio-boton: rgba(0, 0, 0, .07);
  --vidrio-boton-fuerte: rgba(0, 0, 0, .13);
  --vidrio-lleno: #141416;
  --vidrio-lleno-texto: #fff;
  --vidrio-punto: rgba(0, 0, 0, .28);
  --vidrio-hueco: rgba(255, 255, 255, .92);
  --vidrio-hueco-texto: #4a4a52;
  --vidrio-solido: #f4f4f6;
  --vidrio-velo: rgba(255, 255, 255, .42);
}
@media (prefers-color-scheme: light) {
  html.app-mac[data-tema="sistema"] #pantalla-onboarding,
  html.app-mac[data-tema="sistema"] .modal.sobre-vidrio {
    --vidrio-texto: #141416;
    --vidrio-texto-2: rgba(0, 0, 0, .62);
    --vidrio-desc: rgba(0, 0, 0, .74);
    --vidrio-tenue: rgba(0, 0, 0, .42);
    --vidrio-relleno: rgba(0, 0, 0, .06);
    --vidrio-relleno-actual: rgba(0, 0, 0, .12);
    --vidrio-boton: rgba(0, 0, 0, .07);
    --vidrio-boton-fuerte: rgba(0, 0, 0, .13);
    --vidrio-lleno: #141416;
    --vidrio-lleno-texto: #fff;
    --vidrio-punto: rgba(0, 0, 0, .28);
    --vidrio-hueco: rgba(255, 255, 255, .92);
    --vidrio-hueco-texto: #4a4a52;
    --vidrio-solido: #f4f4f6;
    --vidrio-velo: rgba(255, 255, 255, .42);
  }
}
html.app-mac #pantalla-onboarding .onboarding-caja,
html.app-mac .dialogo-caja.hoja-tutorial,
html.app-mac .modal.sobre-vidrio .modal-caja { background: transparent; }
html.app-mac .capa-tutorial { background: rgba(0, 0, 0, .35); }
/* Las páginas reciben el vidrio como sus variables de siempre. */
html.app-mac #pantalla-onboarding .onboarding-cabeza,
html.app-mac #form-onboarding,
html.app-mac #ob-contratar,
html.app-mac .modal.sobre-vidrio {
  --texto: var(--vidrio-texto);
  --texto-2: var(--vidrio-desc);
  --texto-suave: var(--vidrio-texto-2);
  --realce: var(--vidrio-boton);
  --realce-fuerte: var(--vidrio-boton-fuerte);
  --panel-2: var(--vidrio-relleno);
  --panel-3: var(--vidrio-relleno-actual);
  --contraste: var(--vidrio-lleno);
  --contraste-texto: var(--vidrio-lleno-texto);
  color: var(--texto);
}
/* Los campos que se pintan “sobre el fondo”: aquí el fondo es el vidrio. Sin líneas: el campo se ve por su relleno. */
html.app-mac #form-onboarding,
html.app-mac .modal.sobre-vidrio { --fondo: var(--vidrio-relleno); }
html.app-mac #form-onboarding input[type="time"],
html.app-mac #form-onboarding .ob-cuenta select,
html.app-mac #form-onboarding .ob-cuenta input { border-color: transparent; background: var(--panel-2); }
html.app-mac #form-onboarding .btn-nose { border-color: var(--vidrio-boton-fuerte); }
/* La pregunta, un punto por encima de su ayuda: con los dos al mismo gris no se sabía cuál era cuál. */
html.app-mac #form-onboarding .ob-pregunta { color: var(--vidrio-desc); }
html.app-mac #pantalla-onboarding .onboarding-caja::-webkit-scrollbar-thumb { background: var(--vidrio-boton); }
html.app-mac #form-onboarding .btn-nose.activo {
  background: linear-gradient(var(--vidrio-solido), var(--vidrio-solido)) padding-box, var(--gradiente) border-box;
  color: var(--vidrio-texto);
}
html.app-mac #form-onboarding .fecha,
html.app-mac .modal.sobre-vidrio .fecha { color: var(--vidrio-tenue); }
/* El pie de Contratación se queda pegado abajo mientras las tarjetas pasan por detrás: vidrio esmerilado, no una banda negra. */
html.app-mac #ob-contratar .ob-contratar-pie {
  background: var(--vidrio-velo);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
}
html.app-mac #pantalla-onboarding .onboarding-cabeza .agente-nombre,
html.app-mac #pantalla-onboarding .onboarding-cabeza .agente-estado { color: var(--vidrio-texto); }
html.app-mac #pantalla-onboarding .onboarding-cabeza .agente-estado { opacity: .78; }
html.app-mac #pantalla-onboarding .ob-etapas li { background: var(--vidrio-relleno); color: var(--vidrio-texto-2); }
html.app-mac #pantalla-onboarding .ob-etapas li::before { background: var(--vidrio-hueco); color: var(--vidrio-hueco-texto); }
html.app-mac #pantalla-onboarding .ob-etapas li.actual,
html.app-mac #pantalla-onboarding .ob-etapas li.vuelve:hover { background: var(--vidrio-relleno-actual); color: var(--vidrio-texto); }
html.app-mac #pantalla-onboarding .ob-etapas li.actual::before { background: var(--vidrio-lleno); color: var(--vidrio-lleno-texto); }
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-titulo,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-titulo { color: var(--vidrio-texto); }
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-descripcion,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-descripcion { color: var(--vidrio-desc); }
/* Los botones, flotando: “Atrás” como una píldora de vidrio y “Siguiente” maciza. */
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-boton,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-boton { background: var(--vidrio-boton); color: var(--vidrio-texto); }
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-boton:hover,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-boton:hover { background: var(--vidrio-boton-fuerte); color: var(--vidrio-texto); }
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-boton.tt-primario,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-boton.tt-primario { background: var(--vidrio-lleno); color: var(--vidrio-lleno-texto); }
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-boton.tt-primario:hover,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-boton.tt-primario:hover { background: color-mix(in srgb, var(--vidrio-lleno) 88%, transparent); color: var(--vidrio-lleno-texto); }
/* Los puntos de avance, del color del texto para que se lean sobre cualquier fondo. */
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-punto i,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-punto i { background: var(--vidrio-punto); }
html.app-mac #pantalla-onboarding .onboarding-caja.con-tutorial .tutorial-think2 .tt-punto[aria-current="step"] i,
html.app-mac .hoja-tutorial .tutorial-think2 .tt-punto[aria-current="step"] i { background: var(--vidrio-lleno); }
@media (prefers-reduced-motion: no-preference) {
  .ob-etapa:not(.oculto) { animation: aparecer var(--dur-3) var(--ease) backwards; }
}

/* LO QUE DEBES SABER (regla del director, 16-sep-2026: “mejora la estética de la sección de lo que debes saber”). Una
   lista para leerse, no un contrato: cada punto con su icono en una ficha tenue, el título en su línea y el texto
   debajo, con aire entre uno y otro. Sin números ni líneas: el ritmo lo ponen los iconos. La aceptación va aparte,
   en su propia ficha, y se enciende un nivel al marcarla. */
.ob-saber { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 18px; }
.ob-saber-punto { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.ob-saber-icono {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--realce); color: var(--texto);
}
.ob-saber-icono svg { width: 17px; height: 17px; }
.ob-saber-texto b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; margin: 1px 0 3px; color: var(--texto); }
.ob-saber-texto p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); }
.ob-legal-acepto {
  display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer;
  margin: 24px 0 0 !important; padding: 14px 16px; border-radius: 14px; background: var(--realce);
  font-size: 12.5px !important; line-height: 1.6; color: var(--texto) !important; letter-spacing: 0 !important;
  transition: background .18s var(--ease);
}
.ob-legal-acepto:hover, .ob-legal-acepto:has(input:checked) { background: var(--realce-fuerte); }
.paso .ob-legal-acepto input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--texto); display: inline-block; padding: 0; cursor: pointer; }
.ob-legal-acepto a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--texto-suave); text-underline-offset: 2px; }
.ob-legal-acepto a:hover { text-decoration-color: var(--texto); }

/* Etapa 3: la Contratación de siempre, dentro de la hoja. */
#ob-contratar { display: flex; flex-direction: column; min-height: 0; }
#ob-contratar.oculto { display: none; }
#ob-contratar .seccion.en-onboarding { display: block; padding: 0; }
#ob-contratar .seccion.en-onboarding .contrata-titulo { display: none; }
#ob-contratar .seccion.en-onboarding .contrata-cabeza { margin-bottom: 12px; }
.ob-contratar-pie {
  position: sticky; bottom: -28px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 18px -28px -28px; padding: 16px 28px 20px;
  background: var(--panel);
  font-size: 13px; color: var(--texto-2);
}
#pantalla-onboarding .onboarding-caja.ancha::after { display: none; }

/* LOS ENLACES DE UN GLOBO, Y SU PREVIA (regla del director, 4-oct-2026). El enlace va del color del texto del
   globo, subrayado fino; la tarjeta debajo, del mismo ancho del globo, con la imagen de la página arriba (si la
   tiene), su título, su descripción y su dominio con el icono de enlace: lo que hace WhatsApp. En el globo
   blanco del director va en oscuro; en el gris del colaborador, en claro. */
.burbuja a.enlace { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; word-break: break-all; }
.burbuja a.enlace:hover { opacity: .8; }
.burbuja .previa {
  display: block; margin: 8px -6px 2px; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit;
  background: rgba(0, 0, 0, .18); white-space: normal;
}
.burbuja.director .previa { background: rgba(0, 0, 0, .06); }
.burbuja .previa:hover { filter: brightness(1.06); }
.previa-imagen { display: block; width: 100%; max-height: 190px; object-fit: cover; background: rgba(0, 0, 0, .12); }
/* Con solo el logo del sitio (o nada): miniatura cuadrada a la izquierda y el texto al lado, como en WhatsApp. */
.burbuja .previa.con-icono { display: flex; align-items: center; }
.previa.con-icono .previa-imagen { width: 64px; height: 64px; max-height: none; object-fit: contain; flex: none; align-self: stretch; background: rgba(255, 255, 255, .06); padding: 8px; box-sizing: border-box; }
.burbuja.director .previa.con-icono .previa-imagen { background: rgba(0, 0, 0, .05); }
.previa-letra { display: grid; place-items: center; width: 64px; flex: none; align-self: stretch; min-height: 64px; font-size: 24px; font-weight: 700; opacity: .55; background: rgba(255, 255, 255, .06); }
.burbuja.director .previa-letra { background: rgba(0, 0, 0, .05); }
.previa.con-icono .previa-texto { min-width: 0; flex: 1; }
.previa-texto { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px 9px; }
.previa-texto b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.previa-texto i { font-style: normal; font-size: 12px; line-height: 1.35; opacity: .75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.previa-texto small { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; opacity: .65; margin-top: 2px; }
.previa-texto small svg { width: 12px; height: 12px; flex: none; }

/* Scrollbars discretos */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

@media (max-width: 900px) {
  header { flex-wrap: wrap; gap: 12px; }
  nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
}

/* ═══════════════════════ SISTEMA NUEVO ═══════════════════════ */
/* Semánticos, desaturados: el azul ES el acento; rojo/verde/ámbar solo avisan. */
:root {
  --azul: #5aa2ff;
  --rojo: #ff5d5d;
  --verde: #41d98d;
  --amarillo: #ffd60a;
}

/* ─── Equipo (roster + contratación) ─── */
.rejilla-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.empleado-card {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.empleado-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--acento, var(--borde));
  opacity: .9;
}
.empleado-card:hover { transform: translateY(-3px); border-color: #3a3a3a; }
.empleado-card.contratable { opacity: .85; }
.empleado-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.empleado-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  background: var(--contraste); color: var(--contraste-texto);
  flex: none;
}
.chip-activo, .chip-libre {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.chip-activo { background: var(--contraste); color: var(--contraste-texto); }
.chip-libre { border: 1px solid transparent; background: var(--realce); color: var(--texto-suave); }
.empleado-nombre { font-size: 16px; font-weight: 700; }
.empleado-cargo { font-size: 12px; color: var(--acento, var(--texto-suave)); font-weight: 600; letter-spacing: .3px; }
.empleado-lema { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; flex: 1; }
.empleado-estado { font-size: 11.5px; color: var(--texto-suave); }
.empleado-estado.vivo {
  background: var(--gradiente); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fluir 2.5s linear infinite; font-weight: 600;
}
.empleado-acciones { display: flex; gap: 8px; margin-top: 8px; }

/* ─── Onboarding visible por agente ─── */
.chip-onboarding {
  align-self: flex-start;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent; background: var(--realce);
  color: var(--texto-suave); cursor: pointer;
  transition: background .15s, color .15s;
}
.chip-onboarding:hover { background: var(--realce-fuerte); color: var(--texto); }
.chip-onboarding.pendiente { background: rgba(232, 184, 75, .12); color: #e8b84b; }
.chip-onboarding.pendiente:hover { background: rgba(232, 184, 75, .2); }

.ficha-onboarding { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.ficha-sub {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto-suave); margin-top: 10px;
}
.ficha-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border: 1px solid var(--panel-2); border-radius: 8px; background: var(--panel);
}
.ficha-nota { font-size: 11px; color: var(--texto-suave); }
.ficha-texto { font-size: 13px; line-height: 1.5; }

/* ─── Filas de ajuste (patrón label + descripción + control a la derecha) ─── */
.ajuste-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--panel-2);
}
.ajuste-fila:has(form) { align-items: flex-start; }
.ajuste-fila:last-child { border-bottom: none; }
.ajuste-info { max-width: 58%; }
.ajuste-label { font-size: 13.5px; font-weight: 600; }
.ajuste-desc { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; margin-top: 2px; }

/* ─── Misiones: tablero + chat del agente en una sola vista ─── */
.trabajo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 20px;
  align-items: start;
  transition: grid-template-columns var(--dur-3) var(--ease);
}
.trabajo-layout.panel-cerrado { grid-template-columns: minmax(0, 1fr) 0px; }

.rail-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto-suave); padding: 4px 10px 8px;
}
.rail-separador {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--texto-suave); padding: 14px 10px 6px;
}
.rail-contratar {
  margin-top: 8px; background: transparent; border: 1px dashed var(--borde);
  color: var(--texto-suave); border-radius: 12px; padding: 9px 12px;
  font-family: inherit; font-size: 12px; cursor: pointer; text-align: left;
  transition: color .15s, border-color .15s;
}
.rail-contratar:hover { color: var(--texto); border-color: #3a3a3a; }
/* Cerrar: se desliza hacia la derecha y se apaga; abrir: al revés, con la misma curva */
.trabajo-layout.panel-cerrado .panel-chat {
  opacity: 0; pointer-events: none; transform: translateX(16px);
  transition-duration: var(--dur-2), var(--dur-2);
}
.trabajo-tablero { min-width: 0; }

.panel-chat {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 14px;
  height: calc(100vh - 56px);
  position: sticky; top: 28px;
  overflow: hidden;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.panel-chat-cabeza { display: flex; align-items: flex-start; gap: 10px; }
/* Redonda y sin borde: el cuadrado con marco chocaba contra la esquina redondeada de la
   tarjeta y se leía como un recorte mal hecho. El fondo solo aparece al pasar el mouse. */
.panel-chat-cerrar {
  background: transparent; border: 0; color: var(--texto-suave);
  border-radius: 50%; width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  cursor: pointer; font-size: 13px; font-family: inherit; line-height: 1;
  transition: color .15s, background .15s;
}
.panel-chat-cerrar:hover { color: var(--texto); background: var(--realce-fuerte); }

#chat-agentes { display: flex; flex-direction: column; gap: 3px; }
.chat-agente {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 1px solid transparent;
  border-radius: 12px; padding: 8px 10px;
  cursor: pointer; font-family: inherit; color: var(--texto);
  text-align: left; transition: background .15s;
}
.chat-agente:hover { background: var(--panel); }
.chat-agente.sel { background: var(--panel); }
.chat-agente.bloqueado { opacity: .45; }
.chat-agente.bloqueado:hover { opacity: .75; background: transparent; }
.chat-agente-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  background: var(--contraste); color: var(--contraste-texto); flex: none;
}
.chat-agente-info { display: flex; flex-direction: column; min-width: 0; }
.chat-agente-info b {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-agente-info span {
  font-size: 10.5px; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-agente-pend {
  margin-left: auto; flex: none;
  background: var(--rojo); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px;
}
.chat-encabezado {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  font-size: 14px; color: var(--texto-suave);
}
.chat-encabezado .chat-agente-avatar { width: 38px; height: 38px; font-size: 15px; overflow: hidden; }
.equipo-avatar { background: var(--contraste); color: var(--contraste-texto); }
.equipo-avatar svg { width: 18px; height: 18px; }
.chat-encabezado-info { line-height: 1.25; padding: 2px 0; }
.chat-encabezado-info b { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-encabezado .titulo-equipo { cursor: text; }
.chat-encabezado .titulo-equipo:hover { text-decoration: underline dotted; }
/* avatar con imagen (la que el director elige): la foto llena el círculo */
.con-foto { overflow: hidden; background: var(--panel-2); }
.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; position: relative; flex: none; display: inline-flex; }
.avatar-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
}
.avatar-btn:hover::after { opacity: 1; }
/* En el canal del equipo, cada burbuja de agente lleva a su autor */
.burbuja-autor { display: block; font-size: 10.5px; font-weight: 700; margin-bottom: 3px; }
.chat-encabezado-info { display: flex; flex-direction: column; min-width: 0; }
.chat-encabezado-info b { color: var(--texto); font-size: 14px; }
.chat-encabezado-info span {
  font-size: 11.5px; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Misión que el chat tiene como contexto (viene de la tarjeta abierta) */
.mision-contexto {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 10px;
  background: var(--fondo); border: 1px solid var(--borde);
  border-left: 2px solid var(--azul);
  border-radius: 10px;
}
.mision-etiqueta {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--azul); flex: none;
}
.mision-titulo {
  font-size: 12.5px; color: var(--texto); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mision-quitar {
  background: none; border: none; color: var(--texto-suave);
  cursor: pointer; font-size: 11px; font-family: inherit; flex: none; padding: 0 2px;
}
.mision-quitar:hover { color: var(--texto); }
.mision-contexto:has(.decide) { border-left-color: var(--rojo); }
.mision-etiqueta.decide { color: var(--rojo); }

/* Ancla de conversación: el tema del que se viene hablando, sobre el compositor */
.mision-contexto.ancla { margin: 0 0 8px; border-left-color: var(--acento); }
.mision-contexto.ancla .mision-etiqueta { color: var(--acento); }
.mision-contexto.ancla .tarea-mini { min-width: 0; max-width: 100%; }
.mision-contexto.ancla .mision-quitar { margin-left: auto; }

/* Tarjeta de decisión dentro del hilo: lo que el colaborador necesita del
   director aparece como un cuadro interactivo en la conversación. */
.decision-chat {
  background: var(--fondo); border: 1px solid var(--borde);
  border-left: 2px solid var(--rojo); border-radius: 12px;
  padding: 12px; margin: 10px 0; max-width: 94%;
}
.decision-etiqueta {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--rojo); margin-bottom: 5px;
}
.decision-titulo { font-size: 13px; font-weight: 600; line-height: 1.4; }
.decision-detalle {
  font-size: 12px; color: #b9b9b9; line-height: 1.55; margin-top: 6px;
  white-space: pre-wrap; word-wrap: break-word; max-height: 180px; overflow-y: auto;
}
.decision-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.decision-nota { font-size: 10.5px; color: var(--texto-suave); margin-top: 8px; }

@media (max-width: 1240px) {
  .trabajo-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .trabajo-layout.panel-cerrado { grid-template-columns: minmax(0, 1fr) 0px; }
}
@media (max-width: 900px) {
  /* la barra lateral se vuelve cabecera: menú y equipo en tiras horizontales */
  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static; height: auto;
    border-right: none; border-bottom: 1px solid var(--borde);
    gap: 12px; padding: 14px 16px;
  }
  .sidebar-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-equipo { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .sidebar-equipo::-webkit-scrollbar { display: none; }
  #chat-agentes { flex-direction: row; }
  .rail-titulo, .rail-separador { display: none; }
  .rail-contratar { margin-top: 0; white-space: nowrap; flex: none; }
  .chat-agente { width: auto; flex: none; border-radius: 999px; }
  .chat-agente-info span { display: none; }
}
@media (max-width: 1100px) {
  /* el chat pasa a ser una hoja sobre el tablero: el tablero nunca se comprime */
  .trabajo-layout, .trabajo-layout.panel-cerrado { grid-template-columns: minmax(0, 1fr); }
  .panel-chat {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    height: 78vh; border-radius: 16px 16px 0 0;
  }
  .trabajo-layout.panel-cerrado .panel-chat { transform: translateY(24px); }
}

/* ─── Tablero Kanban unificado ─── */
.tablero-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.tablero-cabeza h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--texto-suave); font-weight: 600; margin-bottom: 8px;
}
.tablero-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vista-tabs {
  display: inline-flex; gap: 2px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px;
}
.vista-tab {
  border: none; background: transparent; color: var(--texto-suave);
  font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.vista-tab:hover { color: var(--texto); }
.vista-tab.activo { background: var(--contraste); color: var(--contraste-texto); font-weight: 600; }
/* Los selectores (el colaborador de Sinapsis, el rol al invitar, el rol y el área de cada persona):
   sin línea de borde y sin el control nativo (regla del director, 15-oct-2026, “arregla esto”, con el
   de Sinapsis en pantalla). Relleno tenue y la flecha fina, como las listas de la entrada; un nombre
   largo se corta con “…” en vez de empujar lo de al lado. */
.filtro-select {
  background: var(--realce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%239d9d9d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 11px;
  border: 0; color: var(--texto);
  border-radius: 999px; padding: 8px 32px 8px 14px; font-size: 12px; font-family: inherit;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color .15s;
}
.filtro-select:hover { background-color: var(--realce-fuerte); }
.filtro-select:focus { outline: none; }
.filtro-select:focus-visible { box-shadow: 0 0 0 1px var(--texto-suave); }
.buscador-misiones {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 999px; padding: 0 14px; height: 34px;
}
.buscador-misiones svg { width: 14px; height: 14px; color: var(--texto-suave); flex: none; }
.buscador-misiones input {
  background: none; border: none; outline: none; color: var(--texto);
  font-family: inherit; font-size: 12.5px; width: 170px;
}
.buscador-misiones input::placeholder { color: var(--texto-suave); }
.buscador-misiones:focus-within {
  border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--gradiente) border-box;
}
.kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 14px;
  border-top: 3px solid var(--col-color, var(--borde));
}
.kanban-col > header {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto); padding: 2px 4px 12px;
}
.kanban-col .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--col-color); }
.kanban-col .cuenta {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--panel-2); border-radius: 999px; padding: 2px 9px; color: var(--texto-suave);
}
/* Columnas sin color: las tres comparten el mismo acento neutro del borde */
.kanban-cards { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 260px); overflow-y: auto; }
.ktarjeta {
  background: var(--fondo);
  border: 1px solid var(--panel-2);
  border-radius: 12px;
  padding: 12px;
  transition: border-color .15s;
}
.ktarjeta:hover { border-color: #3a3a3a; }
.ktarjeta.abrible { cursor: pointer; }
.tabla-lista tr.abrible { cursor: pointer; }
.tabla-lista tr.abrible:hover { background: var(--panel); }
.ktarjeta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.ktarjeta-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.ktarjeta-detalle {
  font-size: 12.5px; color: #b9b9b9; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
  margin-top: 6px; max-height: 180px; overflow-y: auto;
}
.ktarjeta-pie {
  margin-top: 10px; font-size: 11.5px; font-weight: 600;
  color: var(--texto-suave); letter-spacing: .2px;
}
.ktag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--borde); color: var(--texto-suave);
  border-radius: 999px; padding: 2px 8px;
}
.ktag.pregunta { color: var(--azul); border-color: color-mix(in srgb, var(--azul) 40%, transparent); }
.ktag.accion { color: #cfcfcf; }
.ktag.estado-en_curso { color: #cfcfcf; }
.ktag.decidida.si { color: var(--texto); border-color: #3a3a3a; }
.ktag.decidida.no { color: var(--texto-suave); text-decoration: line-through; }
.ktag.estado-bloqueada { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, transparent); }
.kfecha { margin-left: auto; font-size: 10.5px; color: #5a5a5a; }
.kcheck { color: var(--texto-suave); }
.kvacio {
  color: var(--texto-suave); font-size: 12.5px; text-align: center;
  padding: 18px 10px; border: 1px dashed var(--borde); border-radius: 12px;
}
.agente-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #cfcfcf;
}
.agente-chip .dot { width: 7px; height: 7px; border-radius: 50%; }

/* Vista lista */
.tabla-lista { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-lista th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--texto-suave); font-weight: 600; padding: 8px 12px;
  border-bottom: 1px solid var(--borde);
}
.tabla-lista td { padding: 10px 12px; border-bottom: 1px solid var(--panel-2); }
.pill {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; border: 1px solid var(--borde); color: var(--texto-suave);
}
.pill.azul  { color: var(--azul);  border-color: color-mix(in srgb, var(--azul) 40%, transparent); }
.pill.rojo  { color: var(--rojo);  border-color: color-mix(in srgb, var(--rojo) 40%, transparent); }
.pill.verde { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 40%, transparent); }

/* ─── Capacitación ─── */
.grabadora {
  background: var(--fondo); border: 1px dashed var(--borde); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
.grabadora-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grabadora-estado { font-size: 12px; color: var(--texto-suave); }
#grabadora-preview { width: 100%; border-radius: 10px; margin-top: 10px; max-height: 240px; background: #000; }
.proc-card .acciones { display: flex; gap: 8px; margin-top: 10px; }
.pasos-cont pre {
  white-space: pre-wrap; font-family: inherit; font-size: 12.5px; color: #cfcfcf;
  background: var(--panel-2); border-radius: 8px; padding: 10px; margin-top: 8px;
  max-height: 300px; overflow-y: auto;
}

/* ─── Configuración (estilo Notion) ─── */
.config-layout {
  /* minmax(0, 1fr): sin el 0, el contenido ancho (mapa, tablas) fija el mínimo de la
     columna y la sección se sale por la derecha en pantallas medianas.
     Sin centrar: el submenú queda pegado al menú lateral principal, alineado con él. */
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px;
  max-width: none; width: 100%; margin: 0; align-items: start;   /* el contenido ocupa todo el ancho disponible */
  transition: grid-template-columns var(--dur-3) var(--ease);
}
.config-layout > * { min-width: 0; }
.config-layout.nav-plegada { grid-template-columns: 44px minmax(0, 1fr); }
.config-layout.nav-plegada .config-nav-item span,
.config-layout.nav-plegada .config-nav-grupo,
.config-layout.nav-plegada .config-nav-titulo > span { display: none; }
.config-layout.nav-plegada .config-nav-item { justify-content: center; padding: 9px 0; }
.config-layout.nav-plegada .config-nav-titulo { padding: 4px 0 10px; display: flex; justify-content: center; }
#seccion-configuracion.seccion { padding-left: 24px; }   /* el submenú arranca donde arranca el menú principal */
@media (max-width: 900px) { .config-layout { grid-template-columns: 1fr; } }
.config-nav { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 28px; }
@media (max-width: 900px) { .config-nav { flex-direction: row; overflow-x: auto; position: static; align-items: center; } #btn-plegar-config { display: none; } .config-layout.nav-plegada { grid-template-columns: 1fr; } }
.config-nav-titulo {
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  padding: 4px 12px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.config-nav-grupo {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--texto-suave); padding: 12px 12px 4px;
}
@media (max-width: 900px) { .config-nav-titulo, .config-nav-grupo { display: none; } }
.config-nav-item {
  display: flex; align-items: center; gap: 9px;
  background: transparent; border: none; color: var(--texto-suave);
  font-family: inherit; font-size: 13px; font-weight: 500; text-align: left;
  padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.config-nav-item svg { width: 16px; height: 16px; flex: none; color: var(--texto-suave); transition: color .15s; }
.config-nav-item:hover { background: var(--panel); color: var(--texto); }
.config-nav-item:hover svg { color: var(--texto-2); }
.config-nav-item.activo { background: var(--panel-2); color: var(--texto); }
.config-nav-item.activo svg { color: var(--texto); }
.config-nav-item:focus-visible { outline: 1px solid var(--texto-suave); outline-offset: 1px; }
.config-nav-salir { margin-top: 14px; border-top: 1px solid var(--borde); border-radius: 0 0 8px 8px; padding-top: 12px; }
@media (max-width: 900px) { .config-nav-salir { margin-top: 0; margin-left: auto; border-top: none; padding-top: 7px; } }
.config-grupo { display: none; }
.config-grupo.activo { display: block; animation: aparecer .2s ease; }
.config-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.config-cabeza h2 { font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
/* Configuración → La app (tarea #75): el bloque del Mac va debajo del celular, con su raya, y los pasos numerados con
   sangría: el reinicio de márgenes de arriba dejaba los números de la lista fuera de la pantalla en el teléfono. */
.config-cabeza-mac { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--panel-2); }
.pasos-app { padding-left: 20px; display: grid; gap: 6px; }
.pasos-app li { padding-left: 2px; }
#app-celular .lista { margin-bottom: 14px; }
/* La fila de una app (Mac o Android) con su botón a la derecha: la clase “fila” que llevaba no tenía estilo y salía
   pegada al borde, sin aire. Va como las demás filas de Configuración. */
.fila-app { justify-content: space-between; }
.fila-app .etq { color: var(--texto-suave); font-size: 12px; margin-top: 2px; }
.config-sub {
  font-size: 13px; color: var(--texto); font-weight: 600; margin: 30px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--panel-2);
}

/* Avisos de estado (icono + texto, sin emojis) */
.aviso {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--panel);
  margin-top: 8px;
}
.aviso svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.aviso-ok { color: var(--texto-2); }
.aviso-ok svg { color: var(--ok); }
.aviso-error { color: var(--peligro); border-color: #4a2a2a; }
.aviso-info { color: var(--texto-suave); }
.avanzado { margin: 14px 0; }
.avanzado summary { font-size: 12.5px; color: var(--texto-suave); cursor: pointer; }
.avanzado summary:hover { color: var(--texto); }
.avanzado .form { margin-top: 10px; }

/* Canales */
.canal-card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
  padding: 18px; margin-bottom: 14px;
}
.canal-cabeza { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.canal-cabeza .ayuda { margin-bottom: 0; margin-top: 3px; }
.canal-logo {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--borde); color: var(--texto-2);
}
.canal-logo svg { width: 18px; height: 18px; }
.qr-caja { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.qr-caja img, .qr-marco {
  width: 216px; height: 216px; border-radius: 14px;
  background: #fff; padding: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #000; font-weight: 700;
}
.qr-estado { font-size: 12.5px; color: var(--texto-suave); }

/* Auditoría de consumo */
.audit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 6px; }
.audit-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .audit-columnas { grid-template-columns: 1fr; } }
.uso-fila { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.uso-nombre { min-width: 90px; font-weight: 600; text-transform: capitalize; }
.uso-barra { flex: 1; height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.uso-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--gradiente); }
.uso-datos {
  color: var(--texto-suave); font-size: 11px; white-space: nowrap;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.uso-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--fondo); border: 1px solid var(--panel-2); border-radius: 10px;
  padding: 8px 12px; font-size: 12px;
}
.uso-fecha { color: #5a5a5a; font-size: 11px; font-family: var(--font-mono); }

/* Listas de Configuración como tablas serenas: contenedor con borde, filas divididas */
.config-grupo .lista { gap: 0; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.config-grupo .lista:empty { border: none; }
.config-grupo .lista .item-herramienta {
  border: none; border-bottom: 1px solid var(--panel-2); border-radius: 0;
  background: var(--panel); padding: 12px 16px;
}
.config-grupo .lista .item-herramienta:last-child { border-bottom: none; }
.config-grupo .lista .memoria-item {
  border: none; border-bottom: 1px solid var(--panel-2); border-radius: 0;
  background: var(--panel);
}
.config-grupo .lista .memoria-item:last-child { border-bottom: none; }
.config-grupo .lista .vacio { border: none; border-radius: 0; }
.config-grupo .lista .uso-fila { padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--panel-2); }
.config-grupo .lista .uso-fila:last-child { border-bottom: none; }
.config-grupo .lista .uso-item { border: none; border-bottom: 1px solid var(--panel-2); border-radius: 0; background: var(--panel); padding: 10px 16px; }
.config-grupo .lista .uso-item:last-child { border-bottom: none; }
.config-grupo .lista .ayuda { padding: 10px 16px; margin: 0; background: var(--panel); }

/* El botón de quitar aparece al pasar por la fila (patrón Linear) */
.item-herramienta .quitar svg { width: 14px; height: 14px; display: block; }
.config-grupo .item-herramienta .quitar { opacity: 0; transition: opacity .15s, color .15s; }
.config-grupo .item-herramienta:hover .quitar,
.config-grupo .item-herramienta .quitar:focus-visible { opacity: 1; }

.form-compacto { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.form-compacto input { max-width: 360px; }
.pill-proximamente {
  font-size: 9px; letter-spacing: 1px; border: 1px solid var(--borde);
  color: var(--texto-suave); border-radius: 999px; padding: 2px 8px; margin-left: 8px;
}

/* ─── Tienda de herramientas (grid + modal) ─── */
.tienda-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px; margin: 14px 0;
}
.tienda-grid.grande { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); max-height: 46vh; overflow-y: auto; }
.tienda-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 14px 8px; cursor: pointer; font-family: inherit; color: var(--texto);
  transition: transform .15s, border-color .15s;
}
.tienda-tile:hover { transform: translateY(-2px); border-color: #4a4a4a; }
.tienda-tile.agregar { border-style: dashed; color: var(--texto-suave); }
.tienda-logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--borde);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.tienda-nombre { font-size: 12px; font-weight: 600; text-align: center; }
.tienda-cat { font-size: 10px; color: var(--texto-suave); text-align: center; }
.tienda-busqueda {
  width: 100%; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 999px; padding: 11px 18px; font-size: 13.5px; font-family: inherit;
}
.tienda-busqueda:focus {
  outline: none; border: 1px solid transparent;
  background: linear-gradient(var(--fondo), var(--fondo)) padding-box, var(--gradiente) border-box;
}
.tienda-pie { display: flex; gap: 8px; margin-top: 12px; }
.tienda-pie input {
  flex: 1; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-family: inherit;
}

/* Modal genérico */
/* ═══ Los popups son HOJAS ═══
   Una sola piel para todo lo que se abre encima: el fondo se difumina de verdad, la hoja
   no lleva marco (el borde de una tarjeta encima de un velo solo la recorta), el título
   se lee como un título y la ✕ vive en su esquina, fuera de la fila del texto. Es la de
   “Crear un canal”, que el director eligió como referencia, aplicada a todas. */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: var(--velo-hoja);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
          backdrop-filter: blur(22px) saturate(130%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-caja {
  position: relative;
  width: 100%; max-width: 620px; max-height: 86vh; overflow-y: auto;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 0; border-radius: 26px;
  padding: 32px 34px 28px;
  scrollbar-width: thin;
}
.modal-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-right: 30px; }
.modal-cabeza h2 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; }
/* Fuera de la fila del título: si comparte sitio con él, lo estrecha y compite con él. */
.modal-cerrar {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%;
  color: var(--texto-suave); font-size: 17px; line-height: 1; cursor: pointer;
}
.modal-cerrar svg { width: 16px; height: 16px; }
.modal-cerrar:hover { background: rgba(255, 255, 255, .08); color: var(--texto); }

/* ─── Tutorial animado de Capacitación ─── */
.tutorial-caja { max-width: 520px; }
.tut-escena { display: none; text-align: center; padding: 10px 6px; }
.tut-escena.visible { display: block; animation: aparecer .25s ease; }
.tut-escena h3 { font-size: 16px; font-weight: 700; margin: 16px 0 8px; }
.tut-escena p { font-size: 13px; color: var(--texto-suave); line-height: 1.6; max-width: 420px; margin: 0 auto; }
.tut-visual { display: flex; justify-content: center; padding: 12px 0; min-height: 150px; align-items: center; }
.tut-linea { height: 8px; border-radius: 4px; background: var(--panel-2); margin: 10px 0; }
.tut-linea.w40 { width: 40%; } .tut-linea.w50 { width: 50%; } .tut-linea.w60 { width: 60%; }
.tut-linea.w70 { width: 70%; } .tut-linea.w80 { width: 80%; } .tut-linea.w90 { width: 90%; }

.tut-pantalla { position: relative; }
.tut-rec {
  position: absolute; top: -10px; right: -10px; z-index: 1;
  display: flex; align-items: center; gap: 5px;
  background: #000; border: 1px solid var(--rojo); color: var(--rojo);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  border-radius: 999px; padding: 3px 10px;
}
.tut-rec-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); animation: tut-parpadeo 1s infinite; }
@keyframes tut-parpadeo { 50% { opacity: .2; } }
.tut-ventana {
  width: 240px; background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 12px; padding: 18px 16px; position: relative; overflow: hidden;
}
.tut-cursor {
  position: absolute; width: 12px; height: 12px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-15deg) skewX(-10deg);
  animation: tut-mueve 3.2s ease-in-out infinite;
}
@keyframes tut-mueve {
  0%   { top: 20%; left: 15%; }
  35%  { top: 45%; left: 70%; }
  70%  { top: 75%; left: 35%; }
  100% { top: 20%; left: 15%; }
}
.tut-doc {
  width: 240px; background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px 16px 18px;
}
.tut-doc-titulo { font-size: 11px; color: var(--texto-suave); font-family: monospace; text-align: left; }
.tut-linea.escribe {
  width: 0; background: var(--gradiente);
  animation: tut-escribir 1s ease forwards;
}
.tut-linea.escribe.d1 { animation-delay: .35s; }
.tut-linea.escribe.d2 { animation-delay: .7s; }
.tut-linea.escribe.d3 { animation-delay: 1.05s; }
@keyframes tut-escribir {
  to { width: var(--w, 75%); }
}
.tut-linea.escribe.w80 { --w: 80%; } .tut-linea.escribe.w70 { --w: 70%; }
.tut-linea.escribe.w90 { --w: 90%; } .tut-linea.escribe.w50 { --w: 50%; }

.tut-tarjeta {
  width: 250px; background: var(--fondo); border: 1px solid var(--panel-2);
  border-left: 2px solid var(--rojo); border-radius: 12px; padding: 14px; text-align: left;
  animation: tut-entra 0.6s ease;
}
@keyframes tut-entra { from { transform: translateY(16px); opacity: 0; } }
.tut-tarjeta-botones { display: flex; gap: 8px; margin-top: 10px; }
.tut-btn-ok, .tut-btn-no {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 5px 12px;
}
.tut-btn-ok { background: var(--contraste); color: var(--contraste-texto); animation: tut-pulso-ok 2s infinite; }
.tut-btn-no { border: 1px solid var(--borde); color: var(--texto-suave); }
@keyframes tut-pulso-ok { 50% { box-shadow: 0 0 0 6px rgba(65, 217, 141, .15); } }

.tut-dominio { width: 250px; position: relative; padding-top: 8px; }
.tut-dominio-barra { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.tut-dominio-barra > div {
  height: 100%; width: 0; border-radius: 999px; background: var(--gradiente);
  animation: tut-escribir 1.4s ease forwards; --w: 100%;
}
.tut-estrella {
  position: absolute; right: -6px; top: -14px; font-size: 26px; color: #fff;
  opacity: 0; transform: scale(.3);
  animation: tut-estrella 0.5s ease 1.3s forwards;
}
@keyframes tut-estrella { to { opacity: 1; transform: scale(1) rotate(12deg); } }

.tut-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde); }
.tut-puntos { display: flex; gap: 6px; }
.tut-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--panel-2); transition: background .2s; }
.tut-punto.activo { background: var(--contraste); }

/* ─── Gobernanza: lo que cada persona no puede tocar no se le muestra ───
   (la API además lo rechaza; ver src/seguridad.js) */
body.sin-agentes .btn-contratar,
body.rol-miembro [data-ciclo],
body.rol-miembro .krespuesta,
/* LO ADMINISTRATIVO ES DEL DIRECTOR (regla del director, 29-oct-2026: “nada administrativo lo puede ver un usuario
   del espacio que no sea director: nada de herramientas, ni contraseñas, ni permisos, ni organigrama”). Deroga la del
   16-sep (“Personas y seguridad sale para todos”): esos permisos ya solo los tiene un director (seguridad.js), así que
   a los demás les quedan General y La app en Configuración, y la Contratación desaparece del menú. */
body.sin-usuarios [data-grupo="seguridad"],
body.sin-usuarios.sin-equipo [data-grupo="usuarios"],
body.sin-equipo [data-grupo="organigrama"],
body:not(.sin-config) .config-nav-item[data-grupo="organigrama"],
body.sin-config .config-nav-admin,
body.sin-agentes .nav-item[data-seccion="contratacion"],
body.sin-agentes [data-grupo="agentes"],
body.sin-agentes #rail-contratar,
body.sin-config [data-grupo="cuenta"],
body.sin-config [data-grupo="auditoria"],
body.sin-config [data-grupo="admin"],
body.sin-config [data-grupo="facturacion"],
body.sin-apps [data-grupo="herramientas"],
body.sin-aprobar .kaccion[data-decidir],
body.sin-aprobar .decision-chat .decision-botones,
body.sin-encargar #btn-nueva-tarea,
body.sin-encargar #btn-agregar-tarea,
body.sin-encargar #btn-abrir-capacitar,
body.sin-encargar #btn-capacitar-chat {
  display: none !important;
}

/* Enlace del nav hacia el Cerebro (sección propia, fuera del dashboard) */
.nav-item.nav-enlace { text-decoration: none; display: inline-flex; align-items: center; }

/* ─── Elon · memoria unificada de conversaciones ─── */
.elon-barra { display: flex; gap: 10px; max-width: 900px; margin-bottom: 14px; }
.elon-barra input[type="search"] {
  flex: 1; background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 10px; padding: 12px 16px; font-size: 14px; font-family: inherit;
}
.elon-barra input[type="search"]:focus { outline: none; border-color: var(--texto-suave); }
.elon-barra select {
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 10px; padding: 0 12px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.elon-stats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; max-width: 900px; }
.elon-chip {
  font-size: 12px; color: var(--texto-suave);
  background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px; padding: 4px 12px;
}
.elon-chip b { color: var(--texto); font-family: var(--font-mono); }
.elon-chip.elon-claude b { color: #d9a2ff; }
.elon-chip.elon-codex b { color: #8fe3c8; }
#elon-reindexar { margin-left: auto; }

.elon-resultados { max-width: 900px; display: flex; flex-direction: column; gap: 10px; }
.elon-proy-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--texto-suave); font-weight: 600; margin: 4px 0; }
.elon-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.elon-proy {
  text-align: left; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  transition: border-color .15s;
}
.elon-proy:hover { background: var(--realce); }
.elon-proy-n { font-weight: 600; font-size: 13.5px; }
.elon-proy-meta { font-size: 11.5px; color: var(--texto-suave); text-transform: capitalize; }

.elon-res {
  background: var(--panel); border: 1px solid var(--panel-2); border-radius: 12px; padding: 12px 14px;
}
.elon-res-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.elon-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border-radius: 999px; padding: 2px 8px;
}
.elon-badge.elon-claude { background: rgba(217,162,255,.15); color: #d9a2ff; }
.elon-badge.elon-codex { background: rgba(143,227,200,.15); color: #8fe3c8; }
.elon-res-proy { font-weight: 600; font-size: 13px; }
.elon-res-rol { font-size: 11px; color: var(--texto-suave); text-transform: capitalize; }
.elon-res-fecha { font-size: 11px; color: #5a5a5a; font-family: var(--font-mono); }
.elon-ver { margin-left: auto; }
.elon-res-frag { font-size: 13px; line-height: 1.55; color: var(--texto-2); }
.elon-res-frag mark { background: rgba(255,177,93,.22); color: #ffce9e; border-radius: 3px; padding: 0 2px; }

/* Modal: hilo completo de una sesión */
.elon-hilo { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.elon-turno { border-left: 2px solid var(--panel-2); padding-left: 12px; }
.elon-turno-assistant { border-left-color: #9b6bff; }
.elon-turno-user { border-left-color: #fff; }
.elon-turno-rol { font-size: 11px; color: var(--texto-suave); font-weight: 600; margin-bottom: 3px; }
.elon-turno-txt { font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--texto-2); }
@media (max-width: 700px) { .elon-barra { flex-wrap: wrap; } }

/* ═══════════════════════════════════════════════════════════════════════════
   COLABORADORES — un colaborador a la vez: su tablero, su cerebro, su
   capacitación y sus canales. Layout inspirado en la referencia del director,
   con la paleta oscura de CODX.
   ═══════════════════════════════════════════════════════════════════════════ */

.colaborador { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.colab-cabeza {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px 14px; flex-wrap: wrap;
}
.colab-identidad { min-width: 160px; }
.colab-identidad h2 { font-size: 20px; letter-spacing: -0.3px; line-height: 1.2; }
.colab-identidad .ayuda { margin: 2px 0 0; font-size: 12.5px; }
.colab-acciones { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.colab-acciones .oculto { display: none; }

/* Horario de contacto: trabajan 24/7 y entregan a esta hora (no hay botón de ciclo) */
.horario-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
}
.horario-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--texto-suave); flex: none;
}
.horario-chip.trabajando { color: var(--texto); }
.horario-chip.trabajando::before { background: var(--acento); }
/* Alguien te espera: punto rojo que titila SUAVE y DESPACIO. 2,6 s y sin llegar a apagarse
   (baja a .3, no a 0): un parpadeo rápido en la cabecera es una alarma, y esto es un aviso. */
.horario-chip.esperando { color: var(--texto); }
.horario-chip.esperando::before { background: var(--peligro); animation: espera-late 2.6s ease-in-out infinite; }
@keyframes espera-late { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .horario-chip.esperando::before { animation: none; } }
/* Orbe pensante de 40 px al lado del chip: se ve cuando alguien está trabajando */
.orbe-cabecera { display: inline-flex; align-items: center; color: var(--texto); --orbe-color: #cfcfff; }
.orbe-cabecera.oculto { display: none; }
input[type="time"] {
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 13px;
  color-scheme: dark;
}

/* Pestañas: lo que cambia de un colaborador a otro. El buscador vive aquí. */
.colab-tabs {
  display: flex; gap: 4px; padding: 0 24px;
  border-bottom: 1px solid var(--borde); overflow-x: auto;
  align-items: center;
}
.colab-tabs .buscador-misiones {
  margin-left: auto; margin-bottom: 6px;
  height: 32px; min-width: 190px; max-width: 300px; flex: 1;
}
.colab-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--texto-suave); font: inherit; font-size: 13.5px;
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s, border-color .15s;
}
.colab-tab:hover:not(:disabled) { color: var(--texto); }
.colab-tab.activo { color: var(--texto); border-bottom-color: var(--texto); font-weight: 600; }
.colab-tab:disabled { opacity: .35; cursor: not-allowed; }
.tab-badge {
  background: var(--rojo); color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}

.colab-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; }
.colab-panel.activo { display: block; }
.colab-panel[data-panel="actividad"].activo,
.colab-panel[data-panel="cerebro"].activo { display: flex; flex-direction: column; padding-bottom: 0; }

/* ─── Tarjetas del tablero: autor arriba, acciones al pasar el cursor ─── */
.kanban-col header {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative;
}
.col-titulo { font-weight: 600; }

.kautor { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.kautor-avatar {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
  background: var(--contraste); color: var(--contraste-texto);
}
.kautor-nombre {
  font-size: 12px; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kacciones { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.ktarjeta:hover .kacciones, .ktarjeta:focus-within .kacciones { opacity: 1; }
.kaccion {
  background: none; border: none; color: var(--texto-suave); cursor: pointer;
  padding: 3px; border-radius: 6px; display: grid; place-items: center;
}
.kaccion svg { width: 15px; height: 15px; }
.kaccion:hover { background: var(--panel-2); color: var(--texto); }
.kaccion:disabled { opacity: .4; cursor: default; }

.kanban-agregar {
  width: 100%; background: none; border: 1px dashed var(--borde); border-radius: 12px;
  color: var(--texto-suave); font: inherit; font-size: 16px; line-height: 1;
  padding: 12px; cursor: pointer; margin-top: 4px; transition: border-color .15s, color .15s;
}
.kanban-agregar:hover { border-color: var(--texto-suave); color: var(--texto); }

.colab-panel[data-panel="actividad"] { position: relative; }

/* ─── Cerebro: el grafo ocupa todo el panel ─── */
.grafo-envoltura {
  position: relative; flex: 1; min-height: 420px;
  border: 1px solid var(--borde); border-radius: 16px;
  background: radial-gradient(ellipse at center, #0f0f12 0%, #000 75%);
  overflow: hidden; margin-bottom: 20px;
}
#grafo-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
#grafo-canvas:active { cursor: grabbing; }

.grafo-hud {
  position: absolute; top: 14px; left: 16px; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px;
}
.grafo-stats { font-size: 11.5px; color: var(--texto-suave); }
.grafo-leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--texto-suave); }
.grafo-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafo-leyenda .pt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.grafo-leyenda .pt.nucleo { background: #ffb15d; }
.grafo-leyenda .pt.normal { background: #9b6bff; }
.grafo-leyenda .pt.fantasma { background: #0d0d0d; border: 1.5px solid #4a4a52; }
.grafo-leyenda .ln { width: 16px; height: 0; border-top: 1px solid rgba(255,255,255,.35); display: inline-block; }
.grafo-leyenda .ln.punteada { border-top-style: dashed; }

.grafo-controles { position: absolute; top: 14px; right: 16px; display: flex; gap: 6px; }
.grafo-vacio {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  color: var(--texto-suave); font-size: 13.5px; line-height: 1.7; padding: 24px;
}

/* Nota seleccionada en el grafo.
   SE ABRE ABAJO Y EN HORIZONTAL (regla del director, 10-sep-2026): era una columna estrecha a la
   derecha, que en un mapa alto dejaba el texto en renglones de cuatro palabras y tapaba justo
   la mitad de la nube. Ahora es una hoja a lo ancho, pegada abajo.
   Y LA ✕ NO SE VA: antes se desplazaba la caja entera, así que al bajar por una nota larga el
   botón de cerrar se iba con el texto. Ahora la cabecera y la línea de datos se quedan fijas y
   solo se desplaza el cuerpo.
   MÁS DELGADA (reglas del director, 10-sep-2026: primero “un centímetro más baja”, luego “más
   delgada”): al 44 % del mapa tapaba media nube; ahora ocupa como mucho el 30 %, sin bajar
   nunca de 150 px, que es lo que ocupan la cabecera, los datos y unas líneas de texto. */
.grafo-nota {
  position: absolute; left: 14px; right: 14px; bottom: 14px; max-height: max(150px, 30%);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 14px 16px 0; overflow: hidden;
}
.grafo-nota.oculto { display: none; }
.grafo-nota > * { flex: none; }
.grafo-nota > .grafo-nota-cuerpo, .grafo-nota > .ayuda {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -16px; padding: 0 16px 14px;
}
.grafo-nota-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.grafo-nota-cabeza b { font-size: 14px; }
.grafo-nota-cabeza .modal-cerrar { margin-left: auto; }
.grafo-nota-meta { font-size: 11px; color: var(--texto-suave); margin-bottom: 10px; }
.grafo-nota-cuerpo {
  white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.65;
  color: var(--texto-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.modal-caja.ancha { max-width: 940px; }

@media (max-width: 900px) {
  .colab-cabeza { gap: 10px; }
  .colab-tabs .buscador-misiones { min-width: 150px; }
}

/* ═══ Apps (Composio): el único camino para dar herramientas ═══ */
.apps-conectadas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.app-conectada {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: 12px; padding: 10px 14px;
}
.app-logo {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(140deg, #2a2a34, #17171c); color: var(--texto);
}
.app-info { display: flex; flex-direction: column; min-width: 0; }
.app-info b { font-size: 13.5px; text-transform: capitalize; }
.app-info span { font-size: 11.5px; color: var(--texto-suave); }
.app-conectada .tag { margin-left: auto; }

.apps-buscador { max-width: 460px; margin-bottom: 14px; }
.app-tile { position: relative; }
.tienda-logo-img {
  width: 30px; height: 30px; border-radius: 9px; object-fit: contain;
  background: #fff; padding: 3px;
}
.app-tile.requiere-propia { opacity: .62; }

/* Credenciales de una app OAuth propia (dentro del diálogo) */
.dialogo-caja.con-form { max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.dialogo-caja.con-form .dialogo-cuerpo { overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.enlace { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.enlace:hover { color: var(--texto-2); }
.credenciales-form { display: grid; gap: 12px; margin-top: 14px; }
.credenciales-form .campo { display: grid; gap: 5px; }
.credenciales-form .campo > span { font-size: 12px; color: var(--texto); }
.credenciales-form .campo > span em { color: var(--texto-suave); font-style: normal; }
.credenciales-form .campo input {
  width: 100%; padding: 9px 11px; font-size: 13px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 9px;
}
.credenciales-form .campo input:focus { outline: none; border-color: #4a4a4a; }
.credenciales-form .campo small { font-size: 11px; color: var(--texto-suave); line-height: 1.45; }

/* ═══ Diálogos de la app (sustituyen a los del navegador) ═══ */
/* Confirmaciones y avisos: la MISMA hoja que el resto (ver “Los popups son HOJAS”).
   Se quedaron fuera del estándar por tener su propia capa y su propia caja. */
.dialogo-capa {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--velo-hoja);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
          backdrop-filter: blur(22px) saturate(130%);
}
@keyframes dialogo-entra { from { opacity: 0 } to { opacity: 1 } }
.dialogo-caja {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 0; border-radius: 26px;
  padding: 32px 34px 28px; width: min(470px, calc(100vw - 40px));
}
@keyframes dialogo-sube { from { opacity: 0; transform: translateY(6px) scale(.98) } to { opacity: 1; transform: none } }
.dialogo-caja h3 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 14px; }
.dialogo-cuerpo { font-size: 13.5px; color: var(--texto-suave); line-height: 1.65; }
.dialogo-cuerpo p { margin: 6px 0; }
.dialogo-cuerpo b { color: var(--texto); }
/* La hoja de una petición suelta: el autor arriba y su tarjeta con los botones debajo */
.peticion-hoja { width: min(540px, calc(100vw - 40px)); }
.peticion-de { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 12.5px; color: var(--texto-suave); }
.peticion-de .kautor-avatar { width: 26px; height: 26px; font-size: 11px; }
.peticion-hoja .tpop-peticion { margin: 0; border: 0; background: var(--realce); }
.dialogo-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; }

/* ═══ Intelecto: Claude o Codex, ambos con su propia sesión ═══ */
.motores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
/* Una sola tarjeta y sin caja dentro de otra caja: el conector ES la tarjeta. El aro verde
   se fue con el radio (decisión del director, 8-sep-2026). */
.motor-card {
  background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px 16px;
}
.motores { grid-template-columns: minmax(280px, 520px); }
.motor-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.motor-elegir { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.motor-cabeza .tag { margin-left: auto; }
.motor-origen { font-size: 12px; color: var(--texto-suave); margin-bottom: 12px; }
.motor-conectar summary { font-size: 12.5px; color: var(--texto-suave); cursor: pointer; margin-bottom: 8px; }
.motor-conectar summary:hover { color: var(--texto); }
.motor-conectar select, .motor-conectar textarea {
  width: 100%; background: var(--fondo); border: 1px solid var(--borde);
  color: var(--texto); border-radius: 9px; padding: 8px 11px;
  font-size: 12.5px; font-family: inherit; margin-bottom: 8px;
}
.motor-como { font-size: 11.5px; margin: 0 0 8px; }

/* El conector de Claude: logo + Conectar → inicio de sesión en la página oficial */
.conector-motor {
  display: flex; align-items: center; gap: 12px;
  padding: 0; margin: 0;
  background: none; border: 0;
}
.conector-logo {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, #D97757 12%, transparent);
  border: 1px solid color-mix(in srgb, #D97757 30%, transparent);
  border-radius: 10px;
}
.conector-logo svg { width: 20px; height: 20px; display: block; }
.conector-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.conector-info b { font-size: 13px; }
.conector-info span { font-size: 11.5px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conector-motor .btn { flex: none; }
.conector-error:not(:empty) { margin-bottom: 12px; font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETAS MÍNIMAS: quién y qué. La barra de progreso vive dentro de la tarjeta.
   ═══════════════════════════════════════════════════════════════════════════ */
.ktarjeta-progreso {
  height: 3px; border-radius: 999px; overflow: hidden;
  background: var(--panel-2); margin-top: 10px; display: none;
}
.ktarjeta-progreso > span {
  display: block; height: 100%; width: 100%;
  background: var(--gradiente); background-size: 200% 100%;
  animation: fluir 1.4s linear infinite;
}
.ktarjeta.en-curso.trabajando .ktarjeta-progreso { display: none; }   /* la barra recta sobra: el beam del borde ya dice que trabaja */
.ktarjeta.en-curso.trabajando { border-color: var(--borde-2); }
/* "Necesita tu atención": sin líneas de color — un solo punto rojo, mínimo y quieto,
   que titila suave y despacio únicamente al pasar el mouse por la tarjeta. */
.ktarjeta.te-necesita { position: relative; }
.ktarjeta.te-necesita::after {
  content: ''; position: absolute; top: 14px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff5f56; opacity: .9;
}
.ktarjeta.te-necesita .kacciones { margin-right: 16px; }   /* los botones de hover no pisan el punto */
.kveredicto { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--borde); color: var(--texto-suave); }
.kveredicto svg { width: 11px; height: 11px; }
.kveredicto.si { color: var(--texto); border-color: #3a3a3a; }
.kveredicto.no { color: var(--texto-suave); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSITOR: "+" (adjuntar · capacitar · mencionar), texto, micrófono, enviar
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-entrada { position: relative; }
.chat-caja { padding-left: 8px; }
.chat-caja.arrastrando { border-style: dashed; border-color: var(--texto-suave); }
.chat-icono {
  width: 34px; height: 34px; flex: none; border: none; border-radius: 50%;
  background: transparent; color: var(--texto-suave); cursor: pointer;
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.chat-icono svg { width: 18px; height: 18px; }
.chat-icono:hover { background: var(--panel-2); color: var(--texto); }
.chat-icono.grabando { color: #fff; background: var(--peligro); }
.chat-mas { position: relative; display: flex; align-items: flex-end; }
.chat-mas-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  min-width: 250px; padding: 6px;
  background: var(--panel); border: 0; border-radius: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.chat-mas-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; color: var(--texto);
  font: inherit; font-size: 13px; padding: 9px 10px; border-radius: 9px;
  cursor: pointer; text-align: left;
}
.chat-mas-menu button svg { width: 16px; height: 16px; color: var(--texto-suave); flex: none; }
.chat-mas-menu button:hover:not(:disabled) { background: var(--panel-2); }
.chat-mas-menu button:disabled { opacity: .4; cursor: not-allowed; }

/* Fichas de lo que acompaña al próximo mensaje: adjuntos y menciones */
/* ═══ La tira de adjuntos del compositor ═══
   UNA fila que se desplaza a lo largo. Antes se apilaban hacia arriba y una tanda de
   capturas se comía media conversación. Las menciones siguen siendo píldoras; lo que
   cambia es el adjunto, que ahora se ve en vez de nombrarse. */
.chat-fichas {
  width: 100%;                      /* su propia línea, encima de la barra de escribir */
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  padding: 10px 8px 4px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
}
.chat-fichas::-webkit-scrollbar { display: none; }
.chat-fichas > * { flex: none; }

.adj { position: relative; display: inline-flex; align-items: center; }
/* La imagen ES la ficha: se reconoce sin leer su nombre y se abre de un clic */
.adj-imagen img {
  width: 58px; height: 58px; border-radius: 13px; object-fit: cover; display: block;
  background: var(--panel-2); cursor: zoom-in;
  transition: transform var(--rapido, .18s) var(--ease, ease);
}
.adj-imagen img:hover { transform: scale(1.04); }
/* Un documento se reconoce por su formato, con el color de su familia */
.adj-doc {
  gap: 9px; height: 58px; max-width: 230px; padding: 0 14px 0 9px;
  border-radius: 13px; background: var(--panel-2);
}
.adj-hoja { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 38px; color: var(--tinte); }
.adj-hoja svg { width: 32px; height: 38px; }
.adj-hoja em {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .3px; color: var(--tinte);
}
.adj-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adj-info b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-info span { font-size: 10.5px; color: var(--texto-suave); }
/* La ✕ vive en la esquina de la ficha, no dentro del texto */
.adj-x {
  position: absolute; top: -5px; right: -5px; z-index: 2;
  width: 19px; height: 19px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--texto); color: var(--fondo);
  box-shadow: 0 0 0 2px var(--panel);
  opacity: 0; transition: opacity var(--rapido, .18s) var(--ease, ease);
}
.adj-x svg { width: 11px; height: 11px; }
.adj:hover .adj-x, .adj-x:focus-visible { opacity: 1; }
@media (hover: none) { .adj-x { opacity: 1; } }

/* ═══ EL VISOR DE ARCHIVOS (30-sep-2026, archivos-visor.js) ═══
   Una hoja sobre el mismo velo difuminado de las demás: cabecera con el archivo y sus acciones,
   el contenido en su formato y, si hay varios en ese sitio, el pie para pasar de uno a otro.
   Sin sombras ni bordes: la hoja se separa del velo por su relleno, como todo en la app. */
/* z-index 150: por encima de toda la interfaz (que llega a 90) y por debajo de los diálogos (200),
   para que un aviso que salga con el visor abierto se vea. */
.av-capa {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px;
  background: var(--velo-hoja);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
          backdrop-filter: blur(22px) saturate(130%);
}
.av-hoja {
  width: min(1180px, 100%); height: min(900px, 100%); min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--panel); color: var(--texto); border-radius: 22px; overflow: hidden; outline: none;
}
/* La hoja recibe el foco al abrirse (para Escape y las flechas), pero no es un control: sin aro. */
.av-hoja:focus, .av-hoja:focus-visible { outline: none; box-shadow: none; }
/* `nowrap` a la vista: una regla vieja para todo `header` (≤900 px) la partía sin que nadie lo decidiera, y con un Excel la X acababa sola en una tercera fila. */
.av-cabeza { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; min-width: 0; }
.av-icono { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 36px; color: var(--tinte); }
.av-icono svg { width: 30px; height: 36px; }
.av-icono em {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .3px; color: var(--tinte);
}
.av-icono.grande { width: 56px; height: 66px; }
.av-icono.grande svg { width: 56px; height: 66px; }
.av-icono.grande em { bottom: 10px; font-size: 11px; }
.av-titulo { min-width: 96px; flex: 1 1 96px; display: flex; flex-direction: column; gap: 2px; }
.av-titulo b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-titulo span { font-size: 11.5px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lo que sobra lo cede esto, nunca los botones: con un Excel de muchas hojas, las pestañas empujaban “Descargar” y la X
   fuera de la hoja (regla del director, 3-nov-2026, “este error”). Las hojas se desplazan dentro de su óvalo. */
.av-herramientas { flex: 0 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.av-herramientas > * { flex: none; }
.av-herramientas > .av-segmentos { flex: 0 1 auto; min-width: 0; }
.av-modo { flex: 0 0 auto; display: flex; align-items: center; }
.av-modo:empty { display: none; }
.av-modo-nota { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.av-modo-nota > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: av-modo-late 1.2s ease-in-out infinite; }
@keyframes av-modo-late { 50% { opacity: .25; } }
/* Lo que no cabe se mide (vigilarCabeza, archivos-visor.js): «Descargar» se queda en su icono; si tampoco alcanza, modo y herramientas bajan juntos a una segunda fila; y si ahí no caben, las herramientas a la suya. */
.av-cabeza.recogida .av-acciones .av-boton:not(.solo-icono) { width: 30px; padding: 0; justify-content: center; }
.av-cabeza.recogida .av-acciones .av-boton:not(.solo-icono) span { display: none; }
.av-cabeza.en-dos-filas { flex-wrap: wrap; }
.av-cabeza.en-dos-filas::after { content: ''; order: 2; flex: 0 0 100%; height: 0; }
.av-cabeza.en-dos-filas > .av-modo, .av-cabeza.en-dos-filas > .av-herramientas { order: 3; margin-top: 10px; }
.av-cabeza.en-dos-filas > .av-herramientas { flex: 1 1 0; }
.av-cabeza.en-tres-filas > .av-herramientas { flex: 1 1 100%; }
/* La regla global de «Reducir movimiento» le da .01ms de transición a TODO, también a lo que mueve el diseño, y la medida leería los valores de antes del cambio: aquí no. */
@media (prefers-reduced-motion: reduce) { .av-cabeza, .av-cabeza *, .av-cabeza *::before, .av-cabeza *::after { transition: none !important; } }
.av-herramientas:empty { display: none; }
.av-acciones { flex: none; display: flex; align-items: center; gap: 8px; }
.av-boton {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
  border: 0; border-radius: 999px; background: var(--realce); color: var(--texto-2);
  font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--rapido, .18s) var(--ease, ease), color var(--rapido, .18s) var(--ease, ease);
}
.av-boton svg { width: 16px; height: 16px; flex: none; }
.av-boton:hover, .av-boton:focus-visible { background: var(--realce-fuerte); color: var(--texto); }
.av-boton:focus-visible, .av-mini:focus-visible, .av-flecha:focus-visible, .av-segmentos button:focus-visible { outline: 2px solid var(--texto-suave); outline-offset: 2px; }
.av-boton.solo-icono { width: 30px; padding: 0; justify-content: center; }
.av-boton.oculto, .av-pie.oculto { display: none; }
.av-boton span { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Selectores (Escritorio · Móvil · Código, las hojas de un Excel): el mismo óvalo de la cola */
.av-segmentos { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--realce); max-width: 420px; overflow-x: auto; scrollbar-width: none; }
.av-segmentos::-webkit-scrollbar { display: none; }
.av-segmentos button {
  flex: none; padding: 5px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--texto-suave);
  transition: color 180ms var(--ease, ease), background 180ms var(--ease, ease);
}
.av-segmentos button:hover { color: var(--texto); }
.av-segmentos button.activo { color: var(--texto); background: color-mix(in srgb, var(--texto) 14%, transparent); }
.av-paginas { font-size: 12px; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.av-paginas b { color: var(--texto); font-weight: 600; }
.av-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--realce); }
.av-mini {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px;
  border: 0; border-radius: 999px; background: none; color: var(--texto-2); cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.av-mini svg { width: 14px; height: 14px; }
.av-mini:hover { background: color-mix(in srgb, var(--texto) 14%, transparent); color: var(--texto); }

/* El cuerpo: el contenido se desplaza aquí dentro y la cabecera se queda quieta */
.av-cuerpo { position: relative; min-height: 0; overflow: auto; background: var(--panel-2); overscroll-behavior: contain; }
.av-cuerpo.av-f-tabla, .av-cuerpo.av-f-codigo, .av-cuerpo.av-f-json, .av-cuerpo.av-f-texto, .av-cuerpo.av-f-comprimido, .av-cuerpo.av-f-otro { background: var(--panel); }
.av-cargando { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; font-size: 13px; color: var(--texto-suave); }
/* Un PDF grande dice cuánto lleva (1-oct-2026, “se demora demasiado abriendo un pdf”): la pista solo sale si la
   espera pasa de un momento, y debajo cuánto ha llegado del total. */
.av-pista { display: block; width: min(220px, 60%); height: 4px; border-radius: 999px; background: var(--realce); overflow: hidden; }
.av-pista[hidden] { display: none; }
.av-pista b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--texto-suave); transition: width .25s ease; }
.av-cargando small { font-size: 11.5px; font-variant-numeric: tabular-nums; min-height: 1em; }
.av-cargando small:empty { display: none; }
.av-nota { margin: 12px 20px 18px; font-size: 12px; color: var(--texto-suave); text-align: center; }

/* Imagen, video, audio: encajan en la hoja; una imagen grande se ve a tamaño real con un clic */
.av-lienzo { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.av-imagen { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; user-select: none; }
.av-imagen.ampliable { cursor: zoom-in; }
.av-cuerpo.desplazable .av-lienzo { position: static; display: block; padding: 24px; }
.av-imagen.real { max-width: none; max-height: none; cursor: zoom-out; }
/* La imagen se acerca y se aleja (2-oct-2026): el lienzo crece con ella y la hoja se desplaza; mientras quepa,
   va centrada (el margen automático, y no el centrado del contenedor, que cortaba lo que se sale por arriba). */
.av-lienzo.av-zoom-lienzo { position: relative; inset: auto; display: flex; box-sizing: border-box; min-width: 100%; min-height: 100%; width: max-content; padding: 24px; touch-action: none; }
.av-zoom-lienzo .av-imagen { flex: none; margin: auto; max-width: none; max-height: none; object-fit: fill; }
.av-zoom-lienzo .av-imagen.cargando { opacity: 0; }
.av-zoom-lienzo.arrastrable { cursor: grab; }
.av-zoom-lienzo.arrastrando { cursor: grabbing; }
/* Acercada se desplaza en los dos sentidos: la barra de abajo igual de fina que la del lado, y sin el cuadro
   blanco que WebKit pinta donde se cruzan. */
.av-cuerpo::-webkit-scrollbar { width: 8px; height: 8px; }
.av-cuerpo::-webkit-scrollbar-corner { background: transparent; }
.av-mini:disabled { opacity: .35; cursor: default; }
.av-mini:disabled:hover { background: none; color: var(--texto-2); }
.av-video { max-width: 100%; max-height: 100%; border-radius: 12px; background: #000; }
.av-audio { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); text-align: center; }
.av-audio b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.av-audio audio { width: 100%; }
.av-audio-icono { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--tinte); background: color-mix(in srgb, var(--tinte) 16%, transparent); }
.av-audio-icono svg { width: 34px; height: 34px; }

/* Sin vista previa: el archivo y su descarga, en el centro */
.av-sin-vista { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.av-sin-vista b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; max-width: 520px; }
.av-sin-vista p { margin: 0 0 6px; font-size: 13px; color: var(--texto-suave); max-width: 420px; }

/* PDF: páginas blancas apiladas, nítidas a cualquier zoom */
.av-pdf { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; min-width: min-content; }
.av-pdf-pagina { flex: none; background: #fff; border-radius: 4px; overflow: hidden; }
.av-pdf-pagina canvas { display: block; width: 100%; height: 100%; }

/* Página HTML: a todo lo ancho, o en un teléfono */
.av-marco { position: absolute; inset: 0; }
/* `--k`, el zoom de la página (archivos-visor.js, “EL ZOOM ES DE TODOS”): la página se dibuja con 1/k del ancho y se
   agranda k veces, así que ocupa lo mismo y se ve más grande, como Ctrl + en un navegador. */
.av-marco iframe {
  display: block; width: calc(100% / var(--k, 1)); height: calc(100% / var(--k, 1)); border: 0; background: #fff;
  transform: scale(var(--k, 1)); transform-origin: 0 0;
}
.av-cuerpo.movil .av-marco { display: grid; place-items: center; padding: 20px; }
.av-cuerpo.movil .av-marco iframe {
  width: calc(min(390px, 100%) / var(--k, 1)); height: calc(min(844px, 100%) / var(--k, 1));
  border-radius: calc(28px / var(--k, 1)); transform-origin: center;
}

/* Documento (Word, Markdown): una hoja de papel, como se va a leer impreso */
.av-papel {
  box-sizing: border-box; width: min(820px, calc(100% - 32px)); margin: 28px auto; padding: 56px 64px;
  background: #fff; color: #1d1d1f; border-radius: 10px;
  font-size: 15px; line-height: 1.65; overflow-wrap: anywhere;
}
.av-papel > :first-child { margin-top: 0; }
.av-papel h1 { font-size: 26px; line-height: 1.25; margin: 0 0 14px; }
.av-papel h2 { font-size: 20px; line-height: 1.3; margin: 26px 0 10px; }
.av-papel h3, .av-papel h4 { font-size: 16px; margin: 22px 0 8px; }
.av-papel p { margin: 0 0 12px; }
.av-papel p.av-vacio { margin: 0; line-height: .9; }
.av-papel p.av-subtitulo { font-size: 17px; color: #555; }
.av-papel ul, .av-papel ol { margin: 0 0 12px; padding-left: 24px; }
.av-papel li { margin: 3px 0; }
.av-papel blockquote { margin: 0 0 12px; padding: 4px 0 4px 16px; color: #555; box-shadow: inset 3px 0 0 #d6d6dc; }
.av-papel a { color: #2a62c9; }
.av-papel img { max-width: 100%; height: auto; border-radius: 4px; }
.av-papel code { font-family: var(--font-mono); font-size: .88em; padding: 1px 5px; border-radius: 5px; background: #f2f2f5; }
.av-papel pre { margin: 0 0 14px; padding: 14px 16px; border-radius: 8px; background: #f2f2f5; overflow-x: auto; }
.av-papel pre code { padding: 0; background: none; font-size: 13px; }
.av-papel hr { border: 0; height: 1px; background: #e2e2e6; margin: 22px 0; }
.av-papel .tabla-doc { margin: 0 0 14px; overflow-x: auto; }
/* Word con su diseño (lectorDocx.js): tabulador, columnas, encabezado y pie, cuadros de texto, tablas con sus bordes propios */
.av-papel .av-tab { display: inline-block; width: 2.5em; }
.av-papel .av-columnas { margin: 0 0 12px; }
.av-papel .av-encabezado, .av-papel .av-pie-doc { font-size: .88em; opacity: .78; }
.av-papel .av-encabezado { padding-bottom: 8px; margin-bottom: 18px; box-shadow: 0 1px 0 #e2e2e6; }
.av-papel .av-pie-doc { padding-top: 8px; margin-top: 24px; box-shadow: 0 -1px 0 #e2e2e6; }
.av-papel .av-cuadro-texto { margin: 8px 0 12px; padding: 8px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px #d6d6dc; }
.av-papel .av-salto-pagina { border: 0; height: 0; margin: 22px 0; box-shadow: 0 0 0 0; border-top: 1px dashed #d1d1d6; }
.av-papel table.fiel { border-collapse: collapse; table-layout: fixed; font-size: inherit; }
.av-papel table.fiel td { padding: 4px 7px; box-shadow: none; overflow-wrap: anywhere; }
.av-papel td > :last-child { margin-bottom: 0 !important; }
.av-papel td > :first-child { margin-top: 0 !important; }
.av-papel::after { content: ""; display: block; clear: both; }

.av-papel table { border-collapse: collapse; font-size: 13.5px; }
.av-papel th, .av-papel td { padding: 7px 12px; text-align: left; vertical-align: top; box-shadow: inset 0 0 0 .5px #d6d6dc; }
.av-papel th { background: #f6f6f8; font-weight: 600; }
/* Un diagrama de Mermaid (```mermaid o un .mmd): dibujado en el papel, sin marco. Mientras llega el dibujante se ve
   su código apagado; con un error, el código con su aviso. “Ver código” asoma al pasar por encima. */
.av-papel .av-diagrama { position: relative; margin: 6px 0 18px; }
.av-papel .av-diagrama-dibujo { display: flex; justify-content: center; contain: paint; }
.av-papel .av-diagrama.ancho .av-diagrama-dibujo { overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; scrollbar-color: #d1d1d6 transparent; }
.av-papel .av-diagrama.ancho .av-diagrama-dibujo::-webkit-scrollbar { height: 6px; }
.av-papel .av-diagrama.ancho .av-diagrama-dibujo::-webkit-scrollbar-track { background: transparent; }
.av-papel .av-diagrama.ancho .av-diagrama-dibujo::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 3px; }
.av-papel .av-diagrama-codigo { margin: 0; }
.av-papel .av-diagrama.esperando .av-diagrama-codigo { opacity: .45; }
.av-papel .av-diagrama-dibujo + .av-diagrama-ver + .av-diagrama-codigo,
.av-papel .av-diagrama.con-codigo .av-diagrama-dibujo { display: none; }
.av-papel .av-diagrama.con-codigo .av-diagrama-codigo { display: block; margin-top: 30px; }
.av-papel .av-diagrama-ver {
  position: absolute; top: 0; right: 0; z-index: 1;
  padding: 3px 10px; border: 0; border-radius: 999px; background: #f2f2f5; color: #52514e;
  font: inherit; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.av-papel .av-diagrama:hover .av-diagrama-ver, .av-papel .av-diagrama-ver:focus-visible,
.av-papel .av-diagrama.con-codigo .av-diagrama-ver { opacity: 1; }
@media (hover: none) { .av-papel .av-diagrama-ver { opacity: 1; } }
.av-papel .av-diagrama-ver:hover { background: #e8e8ed; color: #1d1d1f; }
.av-papel .av-diagrama-aviso { margin: 6px 0 0; font-size: 12.5px; color: #8a5a00; }
.av-papel.solo-diagrama { width: min(1100px, calc(100% - 32px)); padding: 40px; }
.av-papel.solo-diagrama .av-diagrama { margin: 0; }
/* Donde Mermaid mide el dibujo antes de ponerlo en la hoja: sin animaciones (ver dibujarDiagramas). */
.av-medidor-diagrama, .av-medidor-diagrama * { animation: none !important; transition: none !important; }

/* Presentación: cada diapositiva a 16:9, en blanco, con su número y sus notas */
.av-diapos { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 24px; }
.av-diapo { width: min(900px, 100%); }
.av-diapo-lienzo {
  aspect-ratio: 16 / 9; box-sizing: border-box; padding: 5.5% 7%; overflow: hidden;
  display: flex; align-items: flex-start; gap: 4%; background: #fff; color: #1d1d1f; border-radius: 10px;
  container-type: inline-size;
}
.av-diapo-texto { min-width: 0; flex: 1; }
.av-diapo-lienzo h2 { margin: 0 0 3cqw; font-size: 4.4cqw; line-height: 1.15; }
.av-diapo-lienzo .av-diapo-sub { margin: 0; font-size: 2.6cqw; color: #555; }
.av-diapo-lienzo ul { margin: 0; padding-left: 3cqw; font-size: 2.3cqw; line-height: 1.45; }
.av-diapo-lienzo ul ul { font-size: .9em; }
.av-diapo-lienzo img { flex: 0 1 44%; max-width: 44%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.av-diapo-lienzo.portada { align-items: center; justify-content: center; text-align: center; }
.av-diapo-lienzo.con-imagen { align-items: center; }
.av-diapo-lienzo.portada h2 { font-size: 5.6cqw; }
/* PowerPoint posicionado (lectorPptx.js): cada forma en su sitio, en % de la diapositiva; el texto, en cqw (1 % del ancho de la diapositiva) */
.av-diapo-lienzo.posicionada { display: block; position: relative; padding: 0; line-height: 1.2; color: #1d1d1f; text-align: left; }
.av-diapo-lienzo .p-f, .av-diapo-lienzo .p-g { position: absolute; box-sizing: border-box; }
.av-diapo-lienzo .p-f > .p-g { inset: 0; }
.av-diapo-lienzo .p-g > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.av-diapo-lienzo .p-t { position: absolute; inset: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.av-diapo-lienzo .p-i { position: absolute; inset: 0; overflow: hidden; }
.av-diapo-lienzo .p-i img { position: absolute; max-width: none; max-height: none; flex: none; display: block; border-radius: 0; }
.av-diapo-lienzo .p-p { margin: 0; overflow-wrap: anywhere; }
.av-diapo-lienzo .p-bu { flex: none; }
.av-diapo-lienzo .p-tabla table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.av-diapo-lienzo .p-tabla td { overflow-wrap: anywhere; }
.av-diapo-lienzo .p-grafico { overflow: hidden; padding: .6cqw; background: #fff; color: #1d1d1f; border-radius: .6cqw; }
.av-diapo-lienzo .p-grafico .p-tit { font-weight: 600; margin-bottom: .5cqw; }
.av-diapo-lienzo .p-grafico table { border-collapse: collapse; width: 100%; }
.av-diapo-lienzo .p-grafico th, .av-diapo-lienzo .p-grafico td { padding: .15cqw .6cqw; text-align: right; box-shadow: inset 0 0 0 .5px #d6d6dc; }
.av-diapo-lienzo .p-grafico th { text-align: left; background: #f3f3f6; font-weight: 600; }
.av-diapo-lienzo .p-grafico tr:first-child th { text-align: center; }

.av-diapo-pie { display: flex; align-items: flex-start; gap: 14px; padding: 8px 4px 0; font-size: 12px; color: var(--texto-suave); }
.av-diapo-pie details { flex: 1; min-width: 0; }
.av-diapo-pie summary { cursor: pointer; width: max-content; }
.av-diapo-pie details p { margin: 6px 0 0; color: var(--texto-2); line-height: 1.5; }

/* Hoja de cálculo: letras arriba, números al lado, como en Excel; las dos se quedan fijas */
.av-tabla-caja { min-width: 100%; width: max-content; }
.av-tabla { border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.av-tabla th, .av-tabla td {
  padding: 6px 10px; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset -1px -1px 0 color-mix(in srgb, var(--texto) 9%, transparent);
}
.av-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); color: var(--texto-suave); font-weight: 600; font-size: 11px; text-align: center; }
.av-tabla tbody th { position: sticky; left: 0; z-index: 1; background: var(--panel-2); color: var(--texto-suave); font-weight: 500; font-size: 11px; text-align: right; min-width: 34px; }
.av-tabla thead th.esquina { left: 0; z-index: 3; }
.av-tabla td { background: var(--panel); color: var(--texto); }
.av-tabla td.num { text-align: right; }
.av-tabla td.cab { font-weight: 600; background: color-mix(in srgb, var(--texto) 5%, var(--panel)); }
/* Excel con su diseño (lectorXlsx.js): la hoja es papel blanco en los dos temas, como una hoja de verdad, para que el relleno y el
   color que eligió quien la hizo se vean como los eligió. Los anchos y alturas son los suyos; las filas y columnas fijas, sticky. */
.av-tabla.fiel { table-layout: fixed; }
.av-tabla.fiel td {
  box-sizing: border-box; padding: 0 4px; max-width: none; background: #fff; color: #1d1d1f; line-height: 1.25;
  vertical-align: bottom; text-overflow: clip; box-shadow: inset -1px -1px 0 #e4e4e8;
}
.av-tabla.fiel td.num { text-align: right; }
.av-tabla.fiel td a { color: #2a62c9; }
.av-tabla.fiel td.fz { position: sticky; z-index: 1; }
.av-tabla.fiel td.fzc { z-index: 2; }
.av-tabla.fiel td.sl.sl { border-left-width: 0; }
.av-tabla.fiel td.st.st { border-top-width: 0; }
.av-tabla.fiel thead th { box-sizing: border-box; height: 24px; padding-top: 0; padding-bottom: 0; }
.av-tabla.fiel tbody th { padding: 0 6px; }
.av-tabla.fiel .oc { padding: 0; border: 0; font-size: 0; line-height: 0; white-space: nowrap; overflow: hidden; box-shadow: none; }

/* Código, JSON y texto: con sus números de línea */
.av-codigo { margin: 0; padding: 18px 0 24px; font: 12.5px/1.6 var(--font-mono); color: var(--texto-2); counter-reset: av-l; }
.av-codigo code { font: inherit; }
.av-l { display: block; position: relative; padding: 0 22px 0 66px; white-space: pre-wrap; overflow-wrap: anywhere; }
.av-l::before {
  counter-increment: av-l; content: counter(av-l); position: absolute; left: 0; width: 46px; text-align: right;
  color: var(--texto-suave); opacity: .55; user-select: none;
}
.av-codigo.json .av-k { color: #8f6bf2; }
.av-codigo.json .av-s { color: #2f9e6a; }
.av-codigo.json .av-n { color: #d27a2c; }
.av-codigo.json .av-b { color: #e5484d; }

/* ZIP: la lista de lo que trae */
.av-zip { padding: 6px 0 18px; }
.av-zip ul { list-style: none; margin: 0 auto; padding: 0 20px; max-width: 760px; }
.av-zip li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.av-zip li:hover { background: var(--realce); }
.av-zip-icono { flex: none; color: var(--tinte); display: grid; }
.av-zip-icono svg { width: 16px; height: 19px; }
.av-zip-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-zip-peso { flex: none; font-size: 11.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* El pie: pasar de un archivo a otro del mismo sitio */
.av-pie { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 16px 12px; }
.av-posicion { min-width: 64px; text-align: center; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.av-flecha { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--realce); color: var(--texto-2); cursor: pointer; }
.av-flecha svg { width: 16px; height: 16px; }
.av-flecha:hover { background: var(--realce-fuerte); color: var(--texto); }

/* La marca y el botón de fallos viven por encima de todo (7500); con el visor abierto se apartan,
   como con cualquier hoja: en el teléfono tapaban el pie y en escritorio flotaban sobre el velo. */
html.av-abierto #btn-marca, html.av-abierto #btn-bicho, html.av-abierto #btn-version { visibility: hidden; }

/* En un teléfono la hoja es la pantalla entera, y las herramientas bajan a su propia fila */
@media (max-width: 720px) {
  .av-capa { padding: 0; }
  .av-hoja { width: 100%; height: 100%; border-radius: 0; }
  /* Una tableta angosta todavía puede llevar todo en una sola fila. Antes, a 720 px
     exactos la barra saltaba a dos líneas y dejaba muy poco documento visible. */
  .av-cabeza { padding: 10px 12px; }
  .av-segmentos { max-width: 100%; }
  .av-boton:not(.solo-icono) { width: 30px; padding: 0; justify-content: center; }
  .av-boton:not(.solo-icono) span { display: none; }
  .av-herramientas .av-boton:not(.solo-icono) { width: auto; padding: 0 12px 0 10px; }
  .av-herramientas .av-boton span { display: inline; }
  .av-papel { padding: 32px 24px; margin: 16px auto; font-size: 14.5px; }
  .av-pdf, .av-diapos { padding: 16px 12px; }
}

/* En un teléfono sí hace falta una segunda fila para las herramientas; no se aplica
   a tabletas ni a ventanas de 600–720 px, donde el salto era el fallo de la captura. */
@media (max-width: 520px) {
  .av-cabeza { flex-wrap: wrap; row-gap: 10px; }
  .av-herramientas { order: 3; flex: 1 0 100%; justify-content: center; }
  .av-modo { order: 3; flex: 1 0 100%; justify-content: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .av-capa { animation: velo var(--dur-2) var(--ease) backwards; }
  .av-hoja { animation: pop-entra var(--dur-2) var(--ease) backwards; }
  .av-capa.saliendo { animation: av-velo-sale .2s var(--ease) forwards; }
  .av-capa.saliendo .av-hoja { animation: pop-sale .2s var(--ease) forwards; }
  @keyframes av-velo-sale { to { opacity: 0; } }
}
.ficha {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--texto);
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: 999px;
  padding: 3px 6px 3px 10px; max-width: 260px;
}
.ficha svg { width: 12px; height: 12px; color: var(--texto-suave); flex: none; }
.ficha b { color: var(--texto-suave); font-weight: 700; }
.ficha button {
  background: transparent; border: none; color: var(--texto-suave); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 50%;
}
.ficha button:hover { color: var(--texto); background: var(--borde); }

/* Adjuntos dentro de las burbujas del hilo */
.adjuntos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Las fotos van FUERA del globo, del mismo lado que él: una imagen ya tiene forma y
   dentro del globo blanco quedaba encajonada. Varias del mismo envío van en cuadrícula. */
/* LAS FOTOS SE VEN, Y CON SU TAMAÑO DESDE EL PRIMER CUADRO (app.js, fotosHtml): una sola, grande y con su forma
   (hasta 300 × 340, sin agrandar las pequeñas); varias, en álbum de 300 px con celdas de tamaño fijo, para que un
   repintado del hilo no cambie la altura de nada mientras cargan. */
.fotos-envio { align-self: flex-start; max-width: min(300px, 78%); }
.fotos-envio.mio { align-self: flex-end; }
.fotos-envio:empty { display: none; }
.envio-pendiente { display: contents; }
.foto-celda { position: relative; display: block; min-width: 0; }
.adjunto-foto { display: block; cursor: zoom-in; background: var(--panel-2); }
.album-una .adjunto-foto { max-width: 100%; height: auto; max-height: 340px; border-radius: 18px; object-fit: cover; }
/* Mientras no se sabe su forma, un hueco con medida (la primera vez que se ve; después la recuerda) */
.album-una .foto-celda.sin-medida .adjunto-foto { width: 240px; height: 180px; object-fit: cover; }
.fotos-envio:not(.album-una) { width: 300px; }
/* La rejilla va dentro y es la que recorta: así lo que va al lado del álbum (sus reacciones) puede salirse por la esquina */
.fotos-envio:not(.album-una) > .album-rejilla {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  border-radius: 18px; overflow: hidden;
}
.fotos-envio:not(.album-una) .foto-celda { aspect-ratio: 1; overflow: hidden; }
.fotos-envio:not(.album-una) .adjunto-foto { width: 100%; height: 100%; object-fit: cover; }
.album-tres .foto-celda:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.foto-celda.oculta { display: none; }
/* La sexta de un álbum largo dice cuántas más hay; tocarla abre el visor, que las recorre todas */
.foto-celda[data-mas]::after {
  content: attr(data-mas); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 26px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .45); pointer-events: none;
}
.fotos-envio:not(.album-una) .foto-celda.foto-rota { aspect-ratio: auto; grid-column: 1 / -1; }
/* UN VIDEO SE VE EN EL CHAT (app.js, celdaDeVideo): su portada como una foto más, con el botón de reproducir al centro
   y su duración abajo; tocarlo lo abre en el visor. Las mismas medidas que una foto, para que nada se mueva al cargar. */
.adjunto-video-portada, .adjunto-video { display: block; cursor: pointer; background: var(--panel-2); }
.album-una .adjunto-video-portada, .album-una .adjunto-video { max-width: 100%; height: auto; max-height: 340px; border-radius: 18px; object-fit: cover; }
.album-una .foto-celda.sin-medida .adjunto-video-portada, .album-una .foto-celda.sin-medida .adjunto-video { width: 240px; height: 180px; object-fit: cover; }
.fotos-envio:not(.album-una) .adjunto-video-portada, .fotos-envio:not(.album-una) .adjunto-video { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
}
.video-play::before {
  content: ''; position: absolute; left: 18px; top: 14px;
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.adj-video .video-play { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.adj-video .video-play::before { left: 10px; top: 8px; border-width: 5px 0 5px 8px; }
.video-dura {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 999px; pointer-events: none;
  font-size: 11px; font-weight: 600; font-style: normal; color: #fff; background: rgba(0, 0, 0, .55);
}
.foto-celda.video:hover .adjunto-video-portada, .foto-celda.video:hover .adjunto-video { filter: brightness(1.06); }
/* El documento dentro de un globo: mismo lenguaje que la tira, pero sigue siendo enlace */
.adjunto-enlace { text-decoration: none; color: inherit; border: 0; font: inherit; text-align: left; cursor: pointer; }
/* Una foto que no cargó se queda como la ficha del archivo, sin el marco de foto */
.fotos-envio .foto-rota { margin-top: 0; }

/* ─── Su pantalla en vivo, en el chat (app.js, pantallaVivaHtml) ───
   Va como una foto suya, fuera del globo: lo que se ve en su computador, con su etiqueta encima; al tocarla se abre en
   grande. “En vivo” lleva el punto que late; quieto, enseña lo último que tuvo. */
.pantalla-viva {
  position: relative; align-self: flex-start; display: block; width: min(300px, 78%);
  aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  background: var(--panel-2); cursor: pointer; color: inherit;
}
.pantalla-viva-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pantalla-viva.sin-imagen .pantalla-viva-img { visibility: hidden; }
.pantalla-viva-pie {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pantalla-viva-pie i { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; }
.pantalla-viva.encendida .pantalla-viva-pie i { background: #ff4d4f; }
@media (prefers-reduced-motion: no-preference) {
  .pantalla-viva.encendida .pantalla-viva-pie i { animation: pantalla-viva-late 1.6s ease-in-out infinite; }
}
@keyframes pantalla-viva-late { 50% { opacity: .35; } }
.pantalla-viva:hover .pantalla-viva-img { filter: brightness(1.06); }
.pantalla-viva:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.fotos-envio .foto-rota .adj-doc { background: var(--burbuja-otro); }
.burbuja.director .adjunto-enlace { background: rgba(0, 0, 0, .05); }
.burbuja.director .adjunto-enlace .adj-info span { color: #666; }
.adjunto {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 11.5px; text-decoration: none; color: inherit;
  border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px;
  background: rgba(255,255,255,.04);
}
.adjunto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.adjunto svg { width: 12px; height: 12px; flex: none; opacity: .7; }
a.adjunto:hover { background: var(--realce); }
.burbuja.director .adjunto { border-color: #ccc; background: rgba(0,0,0,.05); }
.mencion { font-weight: 600; color: var(--azul); }
.burbuja.director .mencion { color: #1a52a8; }
/* Una clave que se escribió en el chat y Think² ocultó (3-oct-2026): una etiqueta tenue con su candado. */
.clave-oculta {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 6px;
  background: var(--realce); color: var(--texto-suave); font-size: .92em; white-space: nowrap; vertical-align: baseline;
}
.clave-oculta svg { width: 11px; height: 11px; flex: none; }
.burbuja.director .clave-oculta { background: rgba(0, 0, 0, .07); color: #55555c; }

/* Menciones con "@": el listado se ancla sobre el compositor */
.menciones-pop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30;
  max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--panel); border: 0; border-radius: 14px;
}
.menciones-grupo { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-suave); padding: 8px 10px 4px; }
.menciones-vacio { font-size: 12px; color: var(--texto-suave); padding: 12px; }
.mencion-op {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; color: var(--texto); font: inherit;
  padding: 7px 10px; border-radius: 9px; cursor: pointer; text-align: left;
}
.mencion-op:hover, .mencion-op.sel { background: var(--panel-2); }
.mencion-op-txt { display: flex; flex-direction: column; min-width: 0; }
.mencion-op-txt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mencion-op-txt span { font-size: 10.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURACIÓN → Gestión de agentes (cerebro) y Seguridad y permisos
   ═══════════════════════════════════════════════════════════════════════════ */
.cerebro-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.config-grupo .grafo-envoltura { height: 460px; min-height: 0; flex: none; }
.cerebro-carpeta { border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); margin-bottom: 8px; }
.cerebro-carpeta > summary { padding: 10px 14px; cursor: pointer; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.cerebro-carpeta > summary .ayuda { margin: 0; }
.cerebro-tabla { display: flex; flex-direction: column; border-top: 1px solid var(--panel-2); }
.cerebro-nota-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 70px 150px; gap: 10px; align-items: center;
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--panel-2);
  color: var(--texto); font: inherit; font-size: 12.5px; padding: 8px 14px; cursor: pointer; text-align: left;
}
.cerebro-nota-fila:last-child { border-bottom: none; }
.cerebro-nota-fila:hover { background: var(--panel-2); }
.cerebro-nota-nombre { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerebro-nota-nombre .pt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.cerebro-nota-nombre .pt.nucleo { background: #ffb15d; }
.cerebro-nota-frag { font-size: 11px; color: var(--texto-suave); text-align: right; }
.cerebro-nota-fecha { font-family: var(--font-mono); font-size: 11px; color: var(--texto-suave); text-align: right; font-variant-numeric: tabular-nums; }
#cerebro-resultados { margin-bottom: 14px; }
@media (max-width: 800px) { .cerebro-nota-fila { grid-template-columns: minmax(0, 1fr) 130px; } .cerebro-nota-frag { display: none; } }

.usuario-fila { background: var(--panel); border-bottom: 1px solid var(--panel-2); padding: 10px 14px; }
.usuario-fila:last-child { border-bottom: none; }
.usuario-cabeza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.usuario-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* Con “Colaboradores” también en la fila de un director (29-oct-2026), el nombre no se encoge a una columna de una
   palabra: si no caben, los controles bajan a la siguiente línea. */
#lista-usuarios .usuario-info { flex: 1 1 240px; }
.usuario-info b { font-size: 13.5px; }
.usuario-info span { font-size: 11.5px; color: var(--texto-suave); }
.usuario-rol { padding: 6px 30px 6px 12px; background-position: right 11px center; }
.usuario-permisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; padding: 12px 4px 4px; }
.usuario-permisos .ayuda { grid-column: 1 / -1; margin: 0; }
.permiso-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.permiso-check input { accent-color: #fff; }
.permiso-check em { font-size: 10px; color: var(--texto-suave); font-style: normal; letter-spacing: .5px; text-transform: uppercase; }
.config-grupo .lista .usuario-fila .quitar { opacity: 0; transition: opacity .15s, color .15s; background: none; border: none; color: var(--texto-suave); cursor: pointer; }
.config-grupo .lista .usuario-fila:hover .quitar { opacity: 1; }
.config-grupo .lista .usuario-fila .quitar:hover { color: var(--peligro); }
.form textarea.area-leccion { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO — transiciones y micro-animaciones minimalistas.
   Reglas: 150-350 ms, cubic-bezier(.2,.8,.2,1), un solo acento, nada que grite.
   Todo lo que se mueve va bajo prefers-reduced-motion: no-preference; al final
   hay un cortacorriente para quien pide menos movimiento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Orbe (canvas que monta orbe.js; el color se hereda: currentColor / --orbe-color) ─── */
.orbe {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--orbe-tamano, 64px); height: var(--orbe-tamano, 64px);
  line-height: 0; vertical-align: middle;
  color: var(--orbe-color, currentColor);
}
.orbe canvas, .orbe-lienzo { display: block; }

/* ─── Selección y foco visible (accesible, un solo acento) ─── */
::selection { background: color-mix(in srgb, var(--acento) 30%, transparent); }
:where(button, [role="button"], a[href], summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--acento) 75%, transparent);
  outline-offset: 2px;
}
.chat-agente:focus-visible, .nav-item:focus-visible, .kaccion:focus-visible,
.chat-icono:focus-visible, .chat-enviar:focus-visible, .btn:focus-visible { outline-offset: 1px; }

/* ─── Transiciones base (estáticas: no dependen de reduced-motion salvo la duración) ─── */
.card, .ktarjeta, .proc-card, .elon-proy, .tienda-tile, .empleado-card, .decision-chat,
.motor-card, .canal-card, .kanban-col, .app-conectada {
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.nav-item, .config-nav-item, .chat-agente, .colab-tab, .vista-tab, .mencion-op,
.chat-mas-menu button, .kaccion, .chat-icono, .chat-enviar, .modal-cerrar, .panel-chat-cerrar,
.rail-contratar, .kanban-agregar, .chip-onboarding, .btn-nose, .ficha button, .kautor, .adjunto {
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.chat-caja, .card textarea, .form input, .form select, .paso input, .paso textarea,
.tienda-busqueda, .elon-barra input[type="search"], .credenciales-form .campo input, .buscador-misiones {
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.tienda-tile:hover { transform: translateY(-1px); }
.empleado-card:hover { transform: translateY(-2px); }
.chat-icono:active, .kaccion:active, .chat-enviar:active, .modal-cerrar:active, .panel-chat-cerrar:active { transform: scale(.94); }
.chat-agente:active, .nav-item:active, .config-nav-item:active, .mencion-op:active { transform: scale(.99); }
.decision-chat:hover { background: var(--realce); }
.decision-chat.bloqueada { border-left-color: var(--amarillo); }
.decision-chat.bloqueada .decision-etiqueta { color: var(--amarillo); }
.kanban-col .cuenta { transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.tab-badge, .chat-agente-pend { color: #fff; }
.nav-badge { color: var(--contraste-texto); }   /* pastilla de contraste: el número va del color opuesto */
.horario-chip { transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }

/* ─── Border-beam: un haz fino de luz recorre el borde ───
   Círculos: se gira el pseudo-elemento (compatible en todos lados).
   Rectángulos: se anima el ángulo del conic-gradient con @property; sin soporte
   queda un arco quieto en el borde, que sigue leyéndose como "activo". */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes beam-gira { to { --beam: 360deg; } }
@keyframes beam-rota { to { transform: rotate(360deg); } }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.chat-agente.trabajando .chat-agente-avatar,
.chat-encabezado.trabajando .chat-agente-avatar,
body.trabajando .avatar { position: relative; }
.chat-agente.trabajando .chat-agente-avatar::after,
.chat-encabezado.trabajando .chat-agente-avatar::after,
body.trabajando .avatar::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 2.5px;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0turn, transparent .55turn, #5aa2ff .78turn, #9b6bff .9turn, #ff5da2 .96turn, transparent .96turn);
  filter: drop-shadow(0 0 4px rgba(155, 107, 255, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.chat-agente.trabajando .chat-agente-info b { color: var(--texto); }

.ktarjeta.trabajando { position: relative; }
.ktarjeta.trabajando::before {
  content: ''; position: absolute; inset: -2px; border-radius: 14px; padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0turn, transparent .6turn, #5aa2ff .8turn, #9b6bff .9turn, #ff5da2 .96turn, transparent .96turn);
  filter: drop-shadow(0 0 6px rgba(155, 107, 255, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* ─── Skeleton / carga: brillo que barre la caja de "Cargando…" ─── */
@keyframes shimmer { to { transform: translateX(100%); } }
.vacio.cargando, .skeleton { position: relative; overflow: hidden; }
.vacio.cargando { color: var(--texto-suave); }
.vacio.cargando::after, .skeleton::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .09) 50%, transparent 75%);
  transform: translateX(-100%);
}
.ktarjeta.saliendo { opacity: .35; transform: scale(.97); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); pointer-events: none; }

/* ─── Facturación (7-oct-2026, “esto está muy feo, primero déjalo bien lindo”) ───
   Tres bloques —el plan, tu equipo y las facturas— que se separan por su RELLENO, nunca por una línea
   ni una sombra. Todo color sale del tema (o de mezclarlo), así que claro y oscuro se pintan con las
   mismas reglas: el panel del plan era un vidrio oscuro escrito a mano y en claro salía gris sucio. */
#facturacion-caja {
  --fact-caja: var(--panel-2);
  --fact-ok: color-mix(in srgb, var(--ok) 80%, var(--texto));
  --fact-aviso: color-mix(in srgb, var(--estado-curso) 70%, var(--texto));
  --fact-mal: color-mix(in srgb, var(--peligro) 85%, var(--texto));
  max-width: 880px;
}
:root[data-tema="claro"] #facturacion-caja { --fact-caja: #f5f5f7; }
@media (prefers-color-scheme: light) { :root[data-tema="sistema"] #facturacion-caja { --fact-caja: #f5f5f7; } }

/* El plan: la marca y el precio, el botón (o el estado de la suscripción) y, a la derecha, lo que
   cuesta el equipo entero en un pozo del color del fondo. */
.fact-plan {
  display: flex; align-items: stretch; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 24px; border-radius: 24px; background: var(--fact-caja);
}
.fact-plan-izq { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 4px 0 0 4px; }
.fact-plan-marca { display: flex; align-items: center; gap: 14px; }
.fact-plan-marca img { width: 52px; height: 52px; border-radius: 14px; flex: none; display: block; }
.fact-plan-marca h3 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; display: flex; align-items: center; gap: 9px; }
.fact-plan-marca p { font-size: 13px; color: var(--texto-suave); margin-top: 3px; }
.fact-plan-marca p b { color: var(--texto); font-weight: 600; }
.fact-etiqueta {
  font-size: 11px; font-weight: 600; letter-spacing: .1px; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--estado-curso) 17%, transparent); color: var(--fact-aviso);
}
.fact-plan-accion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fact-plan-accion:empty { display: none; }
.fact-boton { padding: 11px 28px; font-size: 14px; }
.fact-plan-nota { font-size: 13px; line-height: 1.55; color: var(--texto-suave); max-width: 48ch; }
.fact-plan-der {
  flex: 0 0 auto; min-width: 210px; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end; text-align: right; gap: 6px;
  padding: 22px 24px; border-radius: 18px; background: var(--fondo);
}
.fact-rotulo { font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.fact-cifra { font-size: 38px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact-cifra-nota { font-size: 12px; color: var(--texto-suave); }

/* Los estados, como pastillas de color tenue: verde lo que está al día, ámbar lo que está en prueba,
   rojo lo que falló. El punto de la suscripción respira. */
.fact-pastilla {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--realce); color: var(--texto-suave);
}
.fact-pastilla i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fact-pastilla.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--fact-ok); }
.fact-pastilla.aviso { background: color-mix(in srgb, var(--estado-curso) 17%, transparent); color: var(--fact-aviso); }
.fact-pastilla.mal { background: color-mix(in srgb, var(--peligro) 15%, transparent); color: var(--fact-mal); }
.fact-plan-accion .fact-pastilla { font-size: 13px; padding: 7px 15px; }

/* Con suscripción: próximo cobro, método de pago y lo cobrado */
.fact-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.fact-ficha { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--fact-caja); }
.fact-ficha b { font-size: 19px; font-weight: 650; letter-spacing: -.3px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-ficha i { font-style: normal; font-size: 12px; color: var(--texto-suave); }
.fact-ficha a { color: var(--texto); font-weight: 500; text-decoration: none; }
.fact-ficha a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Secciones: un título que se lee, y debajo una caja con sus filas */
.fact-seccion { margin-top: 30px; }
.fact-h { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 650; letter-spacing: -.2px; margin: 0 6px 10px; }
.fact-h span { font-size: 12.5px; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.fact-caja { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 22px; background: var(--fact-caja); }
.fact-fila {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 96px; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border-radius: 16px;
  transition: background var(--dur-1) var(--ease);
}
.fact-fila:hover { background: var(--realce); }
.fact-cara {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: var(--contraste); color: var(--contraste-texto);
}
.fact-quien { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fact-quien b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-quien i { font-style: normal; font-size: 12px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-estado { justify-self: end; min-width: 0; }
.fact-monto { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact-monto b { font-size: 14px; font-weight: 600; }
.fact-monto s, .fact-monto i { font-size: 11.5px; font-style: normal; color: var(--texto-suave); }
/* El total, en su propio pozo al pie de la caja */
.fact-total {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
  margin-top: 4px; padding: 16px 18px; border-radius: 16px; background: var(--fondo);
}
.fact-total .fact-monto b { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
/* El rótulo del total no se corta: con poco ancho, baja de línea en vez de quedarse en “Cobro men…” */
.fact-total .fact-quien b, .fact-total .fact-quien i { white-space: normal; }
.fact-pie { margin: 10px 6px 0; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }
.fact-vacio { padding: 16px 20px; border-radius: 18px; background: var(--fact-caja); font-size: 13px; color: var(--texto-suave); }

/* Facturas: sin cara, con sus enlaces como pastillas */
.fact-factura { grid-template-columns: minmax(0, 1fr) auto 96px auto; padding-left: 16px; }
.fact-enlaces { display: flex; gap: 6px; justify-content: flex-end; }
.fact-enlaces a, .fact-acciones a {
  font-size: 12px; font-weight: 500; color: var(--texto); text-decoration: none;
  padding: 6px 12px; border-radius: 999px; background: var(--realce);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fact-enlaces a:hover, .fact-acciones a:hover { background: var(--realce-fuerte); }

/* Pie: lo que se usa poco, lejos del camino */
.fact-fondo { margin-top: 30px; padding: 0 6px; display: flex; flex-direction: column; gap: 12px; }
.fact-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.fact-acciones a { font-size: 12.5px; padding: 7px 14px; }
.fact-acciones a.fact-peligro { background: transparent; color: var(--texto-suave); }
.fact-acciones a.fact-peligro:hover { color: var(--peligro); background: color-mix(in srgb, var(--peligro) 12%, transparent); }
.fact-fondo p { font-size: 11.5px; line-height: 1.5; color: var(--texto-suave); }

@media (max-width: 900px) {
  .fact-plan { padding: 20px; }
  .fact-plan-der { flex: 1 1 100%; align-items: flex-start; text-align: left; }
  .fact-fichas { grid-template-columns: minmax(0, 1fr); }
  .fact-fila { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 6px; }
  .fact-fila .fact-cara { grid-row: 1 / span 2; }
  .fact-fila .fact-estado { grid-column: 2; grid-row: 2; justify-self: start; }
  .fact-fila .fact-monto { grid-column: 3; grid-row: 1 / span 2; }
  .fact-factura { grid-template-columns: minmax(0, 1fr) auto; }
  .fact-factura .fact-estado { grid-column: 1; grid-row: 2; }
  .fact-factura .fact-monto { grid-column: 2; grid-row: 1; }
  .fact-factura .fact-enlaces { grid-column: 2; grid-row: 2; }
  .fact-total { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fact-total .fact-monto { align-items: flex-start; text-align: left; }
}

/* El pago dentro de Think² (7-oct-2026): una hoja como las demás, con /pago dentro de un marco sin fondo propio
   (se ve el vidrio de la hoja). Sin relleno: los bloques del resumen y del formulario ya traen el suyo. */
.pago-hoja { max-width: 920px; height: min(780px, calc(100vh - 48px)); max-height: none; padding: 0; overflow: hidden; }
.pago-hoja .modal-cerrar { top: 10px; right: 10px; }
.pago-iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
@media (max-width: 760px) { .pago-velo { padding: 10px; } .pago-hoja { height: calc(100vh - 20px); border-radius: 22px; } }

/* ─── Herramientas: vistas (Integraciones · Acceso por colaborador) y matriz de acceso ─── */
.integ-vistas { display: flex; gap: 4px; margin: 4px 0 14px; border-bottom: 1px solid var(--borde); }
.integ-vista {
  background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 12px; font: inherit; font-size: 13px; color: var(--texto-suave); cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.integ-vista:hover { color: var(--texto); }
.integ-vista.activo { color: var(--texto); border-bottom-color: var(--texto); }
.acceso-tabla { display: flex; flex-direction: column; overflow-x: auto; }
.acceso-fila {
  display: grid; grid-template-columns: minmax(230px, 1.5fr) repeat(var(--cols, 1), minmax(84px, 1fr));
  gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--borde);
  animation: entrar var(--dur-3) var(--ease) backwards; animation-delay: min(calc(var(--i, 0) * 40ms), 400ms);
}
.acceso-fila:last-child { border-bottom: 0; }
.acceso-cabeza { padding-bottom: 8px; }
.acceso-app { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; }
.acceso-app b { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acceso-app .integ-logo { flex: none; }
.acceso-app i { flex: none; font-style: normal; font-size: 10px; color: var(--texto-suave); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.acceso-cabeza .acceso-app { font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-suave); }
.acceso-col { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.acceso-cabeza .acceso-col b { font-size: 12px; }
.acceso-cabeza .acceso-col i { font-style: normal; font-size: 10.5px; color: var(--texto-suave); }
.acceso-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; overflow: hidden; background: var(--panel-2); margin-bottom: 2px; }
.acceso-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acceso-toggle { cursor: pointer; }
.acceso-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.acceso-switch {
  width: 34px; height: 20px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--borde);
  position: relative; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.acceso-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--texto-suave); transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.acceso-toggle input:checked + .acceso-switch { background: rgba(53, 212, 155, .18); border-color: rgba(53, 212, 155, .45); }
.acceso-toggle input:checked + .acceso-switch::after { transform: translateX(14px); background: #35d49b; }
.acceso-toggle input:disabled + .acceso-switch { opacity: .5; }

/* Archivo de tareas */
.arch-fila {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 12px 4px; border-bottom: 1px solid var(--borde);
  animation: entrar var(--dur-3) var(--ease) backwards;
  animation-delay: min(calc(var(--i, 0) * 40ms), 480ms);
}
.arch-fila:last-child { border-bottom: 0; }
.arch-quien { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arch-quien b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-quien i { font-style: normal; font-size: 11.5px; color: var(--texto-suave); }
.arch-acciones { display: flex; gap: 6px; flex: none; }

/* Las salidas de la ficha son BOTONES, no texto subrayado: en reposo son su icono, y al
   pasar el cursor despliegan su nombre a lo ancho, sin saltos (la anchura se anima). */
.tpop-accion {
  display: inline-flex; align-items: center; gap: 0; overflow: hidden;
  height: 28px; padding: 0 7px; border: 0; border-radius: 999px;
  background: var(--realce); color: var(--texto-suave);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: background var(--rapido, .18s) var(--ease, ease), color var(--rapido, .18s) var(--ease, ease);
}
.tpop-accion svg { width: 15px; height: 15px; flex: none; }
.tpop-accion span {
  max-width: 0; opacity: 0; white-space: nowrap;
  transition: max-width var(--dur-2, .26s) var(--ease, ease), opacity var(--dur-2, .26s) var(--ease, ease), margin-left var(--dur-2, .26s) var(--ease, ease);
}
.tpop-accion:hover, .tpop-accion:focus-visible { background: var(--panel-3); color: var(--texto); }
.tpop-accion:hover span, .tpop-accion:focus-visible span { max-width: 120px; opacity: 1; margin-left: 6px; }
/* Eliminar es la única salida sin vuelta atrás: al acercarse se tiñe de peligro, para que
   no se pulse por confusión con la de al lado. */
.tpop-eliminar:hover, .tpop-eliminar:focus-visible { background: color-mix(in srgb, var(--peligro) 22%, transparent); color: var(--peligro); }
@media (prefers-reduced-motion: reduce) { .tpop-accion span { transition: none; } }
body.sin-encargar .tpop-accion { display: none; }

/* ─── Rutinas: tarjetas editables (hora + detalle), pausar, ejecutar ahora ─── */
/* ═══ RUTINAS ═══
   Una lista que se recorre y, al entrar en una, su historial de corridas. Nada de
   formularios embebidos: crear y editar viven en su hoja (#modal-rutina). */
.rut-cabeza { display: flex; align-items: center; gap: 6px; margin: 0 2px 12px; }
.rut-cabeza h3 {
  flex: 1; min-width: 0; margin: 0; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rut-cabeza .chat-icono { width: 26px; height: 26px; flex: none; }
.rut-cabeza .chat-icono svg { width: 15px; height: 15px; }
.rut-cabeza .chat-icono.peligro:hover { color: var(--peligro, #ff6b6b); }
.rut-volver {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--texto-suave); cursor: pointer;
}
.rut-volver svg { width: 16px; height: 16px; }
.rut-volver:hover { background: var(--realce); color: var(--texto); }

/* La lista: se desplaza sola, con el resto de la columna quieto */
.rut-lista { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
.rut-fila {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 8px; border: 0; border-radius: 11px; background: transparent;
  color: var(--texto); font: inherit; cursor: pointer;
  transition: background var(--dur-1, .16s) var(--ease, ease);
}
.rut-fila:hover { background: var(--realce); }
.rut-fila.pausada { opacity: .55; }
.rut-fila-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rut-fila-info b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rut-fila-info span { font-size: 11px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rut-chevron { width: 14px; height: 14px; flex: none; color: var(--texto-suave); }
/* La hora es la identidad de una rutina: se lee antes que el nombre */
.rut-hora {
  flex: none; padding: 4px 8px; border-radius: 8px; background: var(--realce);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-2);
}
.rut-fila.trabajando .rut-hora { background: var(--contraste); color: var(--contraste-texto); }

.rut-que { margin: 0 2px 12px; font-size: 12.5px; line-height: 1.5; color: var(--texto-2); white-space: pre-wrap; }
.rut-barra { display: flex; align-items: center; gap: 6px; margin: 0 2px 18px; flex-wrap: wrap; }
.rut-barra .btn.mini { font-size: 11.5px; padding: 5px 10px; }
.rut-rotulo { margin: 0 2px 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--texto-suave); }

/* Las corridas: veredicto de un vistazo, paso a paso al desplegarlas */
.rut-corridas { display: flex; flex-direction: column; gap: 2px; max-height: 44vh; overflow-y: auto; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
.corrida-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.corrida-pasos li { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.45; color: var(--texto-2); }
.corrida-pasos li.hija { padding-left: 14px; opacity: .8; }
.corrida-pasos li.error .corrida-paso { color: #ff8f8f; }
.corrida-hora { flex: none; color: var(--texto-suave); font-variant-numeric: tabular-nums; font-size: 10.5px; padding-top: 1px; }
.corrida-paso { min-width: 0; }
.corrida-paso em { display: block; font-style: normal; color: var(--texto-suave); font-size: 10.5px; margin-top: 2px; }

/* La hoja de una rutina: los campos que la de un canal no tiene */
.canal-texto {
  display: block; width: 100%; margin-top: 2px; background: none; border: 0; outline: none;
  color: var(--texto); font: inherit; font-size: 14px; line-height: 1.6; padding: 0; resize: vertical;
}
.canal-texto::placeholder { color: var(--texto-suave); }
.canal-hora-campo {
  background: var(--realce); border: 0; border-radius: 10px; color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 600; padding: 8px 12px; font-variant-numeric: tabular-nums;
}
.canal-hora-campo:focus { outline: 2px solid rgba(255, 255, 255, .35); outline-offset: 2px; }
.rut-hoja-fila { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.rut-hoja-nombre { flex: 1; min-width: 190px; }
.rut-hoja-nombre .canal-rotulo span { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
.rut-hoja-nombre .canal-subtitulo { margin-top: 6px; }
.canal-titulo.comoTitulo { margin: 0; }

.skeleton { display: block; height: 12px; border-radius: 6px; background: var(--panel-2); }
.skeleton + .skeleton { margin-top: 8px; }
.skeleton.w40 { width: 40%; } .skeleton.w60 { width: 60%; } .skeleton.w80 { width: 80%; }

/* ─── Lo que se mueve ─── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes velo { from { opacity: 0; } }
  @keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
  @keyframes pop-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } }
  @keyframes modal-entra { from { opacity: 0; transform: translateY(10px) scale(.965); } }
  @keyframes burbuja-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }
  @keyframes ficha-entra { from { opacity: 0; transform: scale(.88); } }

  /* Secciones: solo opacidad (un transform en la sección desplazaría al panel de chat
     fijo en pantallas estrechas); los paneles interiores sí suben 6 px. */
  .seccion.visible { animation: velo var(--dur-3) var(--ease) backwards; }
  .colab-panel.activo { animation: entrar var(--dur-3) var(--ease) backwards; }
  .config-grupo.activo { animation: entrar var(--dur-3) var(--ease) backwards; }
  .paso.visible, .tut-escena.visible { animation-name: entrar; }

  /* Tarjetas del tablero: aparición escalonada con --i (app.js pone style="--i:n";
     sin la variable, sin retardo). El retardo se acota para columnas largas. */
  .ktarjeta {
    animation: entrar var(--dur-3) var(--ease) backwards;
    animation-delay: min(calc(var(--i, 0) * 44ms), 520ms);
  }
  .kvacio { animation: velo var(--dur-3) var(--ease) backwards; }

  /* Facturación: entrada suave escalonada de bloques y filas; el punto de estado respira. */
  .fact-plan, .fact-fichas, .fact-seccion, .fact-fondo, .fact-fila {
    animation: entrar var(--dur-3) var(--ease) backwards;
    animation-delay: min(calc(var(--i, 0) * 45ms), 500ms);
  }
  .fact-plan-accion .fact-pastilla.ok i, .fact-plan-accion .fact-pastilla.mal i { animation: latido 2.8s ease-in-out infinite; }
  @keyframes titileo-suave { 0%, 100% { opacity: .9; } 50% { opacity: .3; } }
  .ktarjeta.te-necesita:hover::after { animation: titileo-suave 2.6s ease-in-out infinite; }

  /* Fila viva: entra como una burbuja, el orbe flota, la etiqueta sube al cambiar y cada
     paso nuevo de la traza se desliza a su sitio. */
  @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  @keyframes traza-sube { from { opacity: 0; transform: translateY(7px); } }
  @keyframes paso-entra { from { opacity: 0; transform: translateX(-6px); } }
  .vivo { animation: burbuja-entra var(--dur-3) var(--ease) backwards; transform-origin: bottom left; }
  .vivo-actual.entra { animation: traza-sube 360ms var(--ease) backwards; }
  .vivo-paso.nueva { animation: paso-entra var(--dur-3) var(--ease) backwards; }
  .vivo-paso.activo .punto { animation: latido 1.4s ease-in-out infinite; }

  /* Chat: solo las burbujas nuevas (.nueva) entran; el hilo se repinta cada 3,5 s
     y no debe parpadear. */
  .burbuja.nueva, .decision-chat.nueva { animation: burbuja-entra var(--dur-3) var(--ease) backwards; }
  .burbuja.director.nueva { transform-origin: bottom right; }
  .burbuja.prici.nueva, .decision-chat.nueva { transform-origin: bottom left; }
  /* Y en un grupo los tres puntos también LLEGAN: cada uno entra en su momento, no todos
     de golpe con el mensaje. Solo la primera vez (`.entrando`), que el hilo se repinta. */
  .msj-tecleando.entrando { animation: burbuja-entra var(--dur-3) var(--ease) backwards; transform-origin: bottom left; }
  .msj-vivo-paso.entra { animation: traza-sube 360ms var(--ease) backwards; }

  /* Popups y menús anclados al compositor; chips de adjuntos y menciones */
  .menciones-pop, .chat-mas-menu { animation: pop-entra var(--dur-2) var(--ease) backwards; transform-origin: bottom left; }
  .ficha { animation: ficha-entra var(--dur-1) var(--ease) backwards; }
  .chat-pista:not(.oculto) { animation: pop-entra var(--dur-2) var(--ease) backwards; }

  /* Modales y diálogos: velo + caja que crece de .98 a 1 */
  .modal, .dialogo-capa { animation: velo var(--dur-2) var(--ease) backwards; }
  .modal-caja, .dialogo-caja { animation: modal-entra var(--dur-3) var(--ease) backwards; }
  .modal.cerrando { animation: velo var(--dur-2) var(--ease) reverse forwards; pointer-events: none; }
  .modal.cerrando .modal-caja { animation: modal-entra var(--dur-2) var(--ease) reverse forwards; }

  /* Border-beam: giro continuo */
  .chat-agente.trabajando .chat-agente-avatar::after,
  .chat-encabezado.trabajando .chat-agente-avatar::after,
  body.trabajando .avatar::after { animation: beam-rota 2.6s linear infinite; }
  .ktarjeta.trabajando::before { animation: beam-gira 3.6s linear infinite; }
  .horario-chip.trabajando::before { animation: latido 2.2s ease-in-out infinite; }

  /* Skeleton */
  .vacio.cargando::after, .skeleton::after { animation: shimmer 1.6s var(--ease) infinite; }
}

/* ─── Cortacorriente: quien pide menos movimiento recibe cuadros estáticos ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ktarjeta.trabajando::before { --beam: 300deg; }
  .trabajo-layout.panel-cerrado .panel-chat { transform: none; }
}


/* ─── Ficha de tarea (popup flotante, NO modal: el chat sigue usable detrás) ─── */
.tarea-popup {
  position: fixed; z-index: 55;
  top: 56px; left: 50%; transform: translateX(-50%);
  width: min(1180px, calc(100vw - 48px));
  height: min(84vh, 940px);
  display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr);
  overflow: hidden; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 0; border-radius: 26px;
  padding: 0;
}
.tarea-popup.oculto { display: none; }
.tarea-popup.recuadrada { left: var(--tpop-left); width: var(--tpop-w); transform: none; }
/* cada lado con su propio scroll */
.tpop-izq, .tpop-der { min-height: 0; min-width: 0; }
.tpop-izq { overflow-y: auto; padding: 20px 22px 18px; border-right: 1px solid var(--borde); }
.tpop-der { display: flex; flex-direction: column; }
.tpop-der-cabeza { display: flex; align-items: baseline; gap: 10px; padding: 16px 22px 10px; border-bottom: 1px solid var(--borde); flex: none; }
.tpop-historial { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px 10px; display: flex; flex-direction: column; gap: 8px; }
/* Archivar vive junto a cerrar: las dos salidas de la ficha, en el mismo sitio */
.tpop-acciones-abs { position: absolute; top: 12px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.tpop-izq .tpop-cabeza { padding-right: 36px; }
.tpop-suave { color: var(--texto-suave); }
/* mensajes del historial (estilo chat) */
.tpop-msj { align-self: flex-start; max-width: 88%; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px; }
.tpop-msj.mio { align-self: flex-end; background: var(--panel-3); }
.tpop-msj-cab { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.tpop-msj-txt { font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--texto); }
.tpop-msj-txt .mencion { color: var(--acento); font-weight: 600; }
.tpop-msj .adjuntos { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.tpop-historial .tpop-evento { padding: 2px 0; font-size: 11.5px; color: var(--texto-suave); }
.tpop-historial .tpop-evento::before { display: none; }
.tpop-historial .tpop-evento .tpop-quien { color: var(--texto-2); }
.tpop-historial .tpop-peticion { margin: 4px 0; }
@media (max-width: 900px) {
  .tarea-popup { grid-template-columns: 1fr; height: min(90vh, 940px); top: 40px; }
  .tpop-izq { border-right: 0; border-bottom: 1px solid var(--borde); max-height: 38%; }
}

.tpop-cabeza { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tpop-id { font-family: var(--font-mono); font-size: 12px; color: var(--texto-suave); padding-top: 3px; flex: none; }
.tpop-titulos { flex: 1; min-width: 0; }
.tpop-titulo { font-size: 15px; font-weight: 600; line-height: 1.35; }
.tpop-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tpop-seccion { margin-top: 14px; }
.tpop-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--texto-suave); font-weight: 600; margin-bottom: 6px;
}
.tpop-texto { font-size: 13px; color: var(--texto-2); line-height: 1.55; white-space: pre-wrap; }

.tpop-peticion {
  border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: var(--panel-2);
}
.tpop-peticion-titulo { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.tpop-peticion-detalle { font-size: 12.5px; color: var(--texto-2); line-height: 1.5; white-space: pre-wrap; margin-bottom: 8px; }
/* QUÉ PASA SI APRUEBAS (regla del director, 15-sep-2026: “no comprendo muy bien qué debo aprobar”):
   la frase va sola, en su franja, justo antes del comentario y los botones — es lo último que se lee
   antes de decidir. Los rótulos de lo que va a salir (Asunto, Destinatarios…) se destacan dentro del
   detalle, y un detalle plegado se abre con “Ver todo” (solo donde se pliega: el disco y las sueltas). */
.tpop-ejecuta {
  font-size: 12.5px; line-height: 1.45; color: var(--texto);
  background: var(--realce); border-radius: 10px; padding: 8px 10px; margin: 2px 0 8px;
}
.tpop-ejecuta b { font-weight: 600; }
.tpop-campo { font-weight: 600; color: var(--texto); }
/* Lo que ve quien no puede aprobar: la solicitud entera, sin botones, diciendo en manos de quién
   está (regla del director, 16-sep-2026). */
.tpop-espera-otro {
  font-size: 12px; line-height: 1.45; color: var(--texto-suave);
  background: var(--realce); border-radius: 10px; padding: 8px 10px; margin: 2px 0 0;
}
.tpop-ver-todo {
  display: none; background: none; border: 0; padding: 0; margin: -4px 0 8px;
  font: inherit; font-size: 12px; color: var(--texto-suave); cursor: pointer;
}
.tpop-ver-todo:hover { color: var(--texto); }
.pend-ficha .tpop-ver-todo, .burbuja.suelta .tpop-ver-todo { display: inline-block; }
.tpop-respuesta {
  width: 100%; resize: vertical; min-height: 34px;
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; margin-bottom: 8px;
}
.tpop-app { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tpop-app-logo { width: 28px; height: 28px; border-radius: 7px; overflow: hidden; background: var(--panel-3); flex: none; display: grid; place-items: center; }
.tpop-app-logo img { width: 100%; height: 100%; object-fit: contain; }
.tpop-app-logo { font-size: 13px; font-weight: 700; color: var(--texto-2); }
/* El icono propio de una solicitud que no es de una app (un captcha): se dibuja, no se descarga. */
.tpop-app-logo.propio { color: var(--texto-2); }
.tpop-app-logo.propio svg { width: 17px; height: 17px; }
.tpop-app-nombre { font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
/* Las claves de su integración propia (volvió el 3-oct-2026): campos de contraseña y, debajo de cada uno,
   dónde se encuentra —quien lo llena no tiene por qué saberlo—. */
.tpop-credenciales label { display: block; font-size: 12px; color: var(--texto-suave); margin-bottom: 8px; }
.tpop-credenciales input {
  display: block; width: 100%; margin-top: 4px;
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px;
}
.tpop-credenciales .tpop-campo-clave { position: relative; display: block; }
.tpop-campo-clave input { padding-right: 38px; width: 100%; box-sizing: border-box; }
.tpop-ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-suave); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tpop-ver-clave svg { width: 16px; height: 16px; }
.tpop-ver-clave:hover, .tpop-ver-clave[aria-pressed="true"] { color: var(--texto); background: var(--realce); }
.tpop-credenciales .tpop-campo-ayuda { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--texto-suave); font-weight: 400; }
.tpop-credenciales + .tpop-sesion-nota { margin: 8px 0 0; }
.peticion-hilo .tpop-credenciales input { background: color-mix(in srgb, var(--fondo) 55%, transparent); }
/* Entrar tú, en su computador (2-oct-2026): una línea que dice dónde se escriben el usuario y la contraseña. */
.tpop-sesion-nota { font-size: 12px; line-height: 1.4; color: var(--texto-suave); margin: -2px 0 10px; }
.peticion-hilo .tpop-sesion-nota { margin-bottom: 8px; }

.tpop-linea-tiempo { border-left: 1px solid var(--borde); padding-left: 12px; max-height: 260px; overflow-y: auto; }
.tpop-evento { position: relative; font-size: 12px; line-height: 1.5; padding: 4px 0; color: var(--texto-2); }
.tpop-evento::before {
  content: ''; position: absolute; left: -14.5px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--texto-suave);
}
.tpop-ts { font-family: var(--font-mono); font-size: 10.5px; color: var(--texto-suave); margin-right: 6px; }
.tpop-quien { color: var(--texto); font-weight: 600; margin-right: 6px; }
.tpop-pie { margin-top: 14px; display: flex; justify-content: flex-end; }

/* Mención #18: tarjeta delgada con el título de la tarea; abre su ficha (ahí se responde todo) */
.tarea-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.3;
  color: var(--texto); background: var(--panel-2);
  border: 1px solid var(--borde-2); border-radius: 8px; padding: 4px 9px 4px 7px; cursor: pointer;
  margin: 2px 0; text-align: left; vertical-align: middle;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.tarea-chip:hover { border-color: var(--acento); background: var(--panel-3); }
.tarea-mini-id { font-family: var(--font-mono); font-size: 11px; color: var(--texto-suave); flex: none; }
.tarea-mini-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38ch; }

/* ─── La tarea dentro de un mensaje: una MENCIÓN, no una tarjeta ───
   Se lee como "@ordenar las ventas" dentro de la frase y abre la ficha al pulsarla. */
.burbuja .tarea-mini, .msj-hilo .tarea-mini {
  display: inline; max-width: none; margin: 0; padding: 0; gap: 0;
  background: none; border: 0; border-radius: 0;
  font: inherit; font-weight: 600; color: var(--azul); cursor: pointer;
}
.burbuja .tarea-mini .tarea-mini-titulo, .msj-hilo .tarea-mini .tarea-mini-titulo {
  display: inline; max-width: none; white-space: normal; overflow: visible;
}
.burbuja .tarea-mini:hover, .msj-hilo .tarea-mini:hover { text-decoration: underline; background: none; }
/* Se parte entre renglones como el texto que la rodea (es un <span>, ver conTareas en app.js). */
.burbuja .tarea-mini, .msj-hilo .tarea-mini { -webkit-box-decoration-break: clone; box-decoration-break: clone; text-align: inherit; overflow-wrap: anywhere; }
.burbuja .tarea-mini:focus-visible, .msj-hilo .tarea-mini:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.burbuja.director .tarea-mini { color: #1a52a8; }
/* En la burbuja el chip fluye CON la frase (inline): "…(propuesta #82) y…" no se parte en
   tres renglones. Una mención sola en su renglón sigue viéndose como tarjeta delgada. */
.burbuja .tarea-chip { display: inline-flex; max-width: 100%; margin: 2px 1px; }
.burbuja.director .tarea-chip { background: rgba(0,0,0,.18); color: inherit; border-color: rgba(0,0,0,.25); }
.burbuja.director .tarea-mini-id { color: inherit; opacity: .8; }

@media (prefers-reduced-motion: no-preference) {
  /* translate/scale como propiedades sueltas: no pisan el transform de posición del popup */
  @keyframes tpop-entra { from { opacity: 0; translate: 0 10px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
  .tarea-popup:not(.oculto):not(.saliendo) { animation: tpop-entra var(--dur-3) var(--ease) backwards; }
}


/* ─── Ficha de tarea: compositor de comentarios (estilo Notion) e historial ─── */
.tpop-meta { flex-wrap: wrap; }
.tpop-comentario { padding: 8px 0; }
.tpop-comentario::before { top: 15px; background: var(--acento); }
.tpop-comentario-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.tpop-comentario-txt { font-size: 13px; color: var(--texto); line-height: 1.55; white-space: pre-wrap; }
.tpop-comentario-txt .mencion { color: var(--acento); font-weight: 600; }
.tpop-evento.decision::before { background: var(--ok); }
.tpop-linea-tiempo { max-height: 360px; }

/* ═══ La señal de vida del chat: los tres puntos ═══
   Antes el panel llevaba un haz de color recorriendo su borde (border-beam) y una fila con
   un orbe animado. Los dos se quitaron: el hilo debe leerse como una conversación, no como
   un panel de instrumentos. Lo ÚNICO que se mueve ahora es este globo de "escribiendo", y
   es la señal de que el colaborador está gestando algo. */
.panel-chat { isolation: isolate; }

/* LA MISMA COLA QUE UN GLOBO DE VERDAD (regla del director, 11-sep-2026: “quiero que la
   animación de cuando escriben tenga la misma pestaña pequeña que los chats enviados”).
   Los tres puntos fingían la cola achicando la esquina inferior izquierda a 6px, y al lado de
   un globo con su gancho real se notaba que era otra cosa: un rectángulo redondeado, no un
   mensaje a medio salir. Ahora lleva el MISMO trazo medido de “.burbuja.prici::after” —el
   espejado, porque escribe el colaborador y va a la izquierda— y el mismo radio de 20px, así
   que lo que aparece cuando termina de escribir es literalmente el mismo globo con texto
   dentro. Se reusa el path, no se dibuja otro a ojo: dos colas parecidas serían peor que una. */
.tecleando {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  width: fit-content; padding: 9px 11px;
  background: var(--burbuja-otro); border-radius: 20px;
}
.tecleando::after {
  content: ''; position: absolute; bottom: -5px; left: 0;
  width: 22px; height: 25px; background: inherit; pointer-events: none;
  clip-path: path('M0,0 C0,18.4 7.7,14.5 7.7,20 C7.7,23.2 5,23.5 6.7,25 C9.8,23.9 12.7,21.3 15.5,20 L22,20 Z');
}
/* El “mini” no es un globo: va en línea dentro de una frase (“Prici está escribiendo”), sin
   fondo. Una cola colgando de ahí sería un gancho suelto en mitad del texto. */
.tecleando.mini::after { display: none; }
.tecleando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--texto-suave);
  animation: tecleando-punto 1.35s ease-in-out infinite;
}
.tecleando span:nth-child(2) { animation-delay: .18s; }
.tecleando span:nth-child(3) { animation-delay: .36s; }
/* En un grupo cada fila late a SU ritmo. Todas se crean en el mismo repintado, así que sin
   un desfase y una velocidad propios (`--fase`/`--vel`, salen del id en pulsoDe) los puntos
   de los ocho suben y bajan en el mismo fotograma: eso no son ocho personas escribiendo,
   es un bucle repetido ocho veces. */
/* Los puntos de la LISTA entran en el ciclo por donde iban, no desde cero: la lista se reescribe
   entera cada vez que se elige un chat y, sin esto, la animación daba un salto en cada repintado
   (regla del director, 16-sep-2026). El desfase lo calcula app.js sobre un reloj común. */
.tecleando.continuo span              { animation-delay: var(--fase, 0s); }
.tecleando.continuo span:nth-child(2) { animation-delay: calc(var(--fase, 0s) + .18s); }
.tecleando.continuo span:nth-child(3) { animation-delay: calc(var(--fase, 0s) + .36s); }
.msj-tecleando .tecleando span              { animation-duration: calc(1.35s * var(--vel, 1)); animation-delay: var(--fase, 0s); }
.msj-tecleando .tecleando span:nth-child(2) { animation-delay: calc(var(--fase, 0s) + .18s); }
.msj-tecleando .tecleando span:nth-child(3) { animation-delay: calc(var(--fase, 0s) + .36s); }
@keyframes tecleando-punto {
  0%, 62%, 100% { opacity: .32; transform: translateY(0) scale(.82); }
  31%           { opacity: 1;   transform: translateY(-2.5px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tecleando span { animation: none; opacity: .55; }
}
/* Los MISMOS tres puntos, en pequeño y sin globo: valen para una fila de la lista de
   Mensajes, un destacado o un chat de la barra — fuera del hilo no hay burbuja que llenar. */
.tecleando.mini { padding: 0; background: none; border-radius: 0; gap: 3px; }
.tecleando.mini span { width: 4px; height: 4px; }
/* Centrados bajo la burbuja, no pegados a un lado: ocupan el mismo hueco que la cuenta de
   no leídos, porque mientras alguien escribe eso ES la novedad. */
.tecleando.mini.suelta {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  padding: 3px 6px; border-radius: 999px; background: var(--panel-2);
  box-shadow: 0 0 0 2px var(--fondo);
}
.msj-escribiendo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--texto-2); }

/* El globo de lo no leído: blanco, como el badge de una app de mensajes. */
/* UN POCO MÁS PEQUEÑAS, EN TODA LA APP (regla del director, 18-sep-2026: “deja un poco más
   pequeñas las burbujas de esas notificaciones”). */
.msj-globo {
  flex: none; min-width: 15px; height: 15px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #fff; color: #000;
  font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.msj-globo.esquina { position: absolute; top: -2px; right: -2px; box-shadow: 0 0 0 2px var(--fondo); }
/* En los destacados la cuenta va ABAJO Y CENTRADA bajo la foto (decisión del director): la
   esquina de arriba queda libre para el punto rojo, que es lo que de verdad hay que ver. */
.msj-globo.abajo {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--fondo);
}
.msj-globo.nav { margin-left: auto; }/* ─── Previsual de la tarjeta: el detalle al pasar el cursor, en vidrio ───
   Reemplaza al tooltip del sistema (por eso el detalle va en data-tip, no en title):
   mismo tamaño y mismo sitio que pintaba el navegador, pero con el material de la
   plataforma —translúcido, filo de luz interior y sombra— y sin robar el cursor. */
.ktip {
  position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
  max-width: 380px; padding: 11px 13px; border-radius: 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--texto-2);
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .014) 45%, rgba(255, 255, 255, .035) 100%),
    rgba(12, 12, 14, .74);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
  opacity: 0;
}
.ktip.oculto { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ktip { translate: 0 4px; transition: opacity 140ms var(--ease), translate 140ms var(--ease); }
  .ktip.visible { translate: 0 0; }
}
.ktip.visible { opacity: 1; }

/* ─── Velo difuminado detrás de la ficha de tarea ───
   No bloquea nada (pointer-events: none): lo de detrás se ve difuminado y sigue usable;
   el panel del chat queda por encima del velo, nítido. Entra y sale con un fundido suave. */
/* El velo cubre todo y RECIBE el clic: cerrar la ficha al pulsar fuera, y —más importante—
   que no se pueda usar lo que hay detrás. Difuminado pero pulsable era una trampa. */
.tarea-velo {
  position: fixed; inset: 0; z-index: 50; cursor: default;
  /* Sigue el tema. Estaba fijo en negro al 50 %, así que en modo claro dejaba un fondo
     turbio sobre el que ni los textos suaves ni la ✕ se leían. */
  background: var(--velo);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
          backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.tarea-velo.oculto { display: none; }
.tarea-velo.visible { opacity: 1; }

/* ─── Hilo entre dos colaboradores: el mismo chat, sobre el velo. SIN tarjeta:
       ni fondo, ni borde, ni sombra — los globos flotan sobre lo difuminado. ─── */
.par-hilo {
  /* centrado por márgenes y no por translate: la animación tpop-entra anima `translate` */
  position: fixed; z-index: 58; inset: 56px 0 24px; margin-inline: auto;
  width: min(760px, calc(100vw - 48px));
  display: flex; flex-direction: column; background: none; border: 0;
}
.par-hilo.oculto { display: none; }
.par-mensajes { padding: 12px 6px 8px; }              /* el resto lo hereda de .msj-hilo */
.par-cabeza { align-self: center; display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--texto);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.par-cabeza .chat-agente-avatar { width: 26px; height: 26px; font-size: 11px; }
/* aquí NADIE es “tú”: los dos globos firman con su autor */
.burbuja.par .burbuja-autor { display: block; }
.par-origen { display: block; font-size: 10px; color: var(--texto-suave); margin-top: 4px; }
/* Dentro del globo propio el gris fijo servía solo cuando ese globo era blanco; en claro es
   gris oscuro y #666 desaparecía. Se saca del color de SU texto. */
.burbuja.director .par-origen { color: color-mix(in srgb, var(--burbuja-yo-texto) 62%, transparent); }
/* Sobre un velo difuminado no hay fondo que garantice contraste: cada rótulo suelto lleva
   su propia pastilla de vidrio. Sin esto, en claro “Aquí empieza lo que se han dicho” y el
   separador de fecha desaparecían. */
.par-mas, .par-nota, .par-mensajes .msj-fecha {
  align-self: center; font-size: 11px; color: var(--texto-2);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-radius: 999px; padding: 4px 12px;
}
.par-mas { border: 0; cursor: pointer; padding: 5px 12px; }
.par-mas:hover { color: var(--texto); }
/* Los globos flotan sobre el velo: un canto finísimo los separa del fondo en modo claro,
   donde el gris del globo y el blanco del velo se tocaban. */

/* La ✕: pastilla de vidrio, como la cabecera. Antes era gris suave sin fondo y en claro
   quedaba invisible sobre el velo. */
.par-cerrar {
  width: 30px; height: 30px; color: var(--texto);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.par-cerrar:hover { background: var(--panel); color: var(--texto); }
/* el autor de un globo que ES de pareja se vuelve puerta al hilo de esos dos */
button.burbuja-autor { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
button.burbuja-autor:hover { text-decoration: underline; }
/* la ficha de tarea (z 55) se difumina si el hilo se abre encima, con su mismo lenguaje */
body.par-abierto .tarea-popup { filter: blur(6px) saturate(.9); opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .par-hilo:not(.oculto) { animation: tpop-entra var(--dur-3) var(--ease) backwards; } }
/* la lista de parejas de la pestaña “Equipo” de la ficha de contacto */
.ficha-par { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
  padding: 6px 4px; cursor: pointer; text-align: left; border-radius: 10px; color: var(--texto); }
.ficha-par:hover { background: rgba(255, 255, 255, .06); }
.ficha-par b { font-size: 12.5px; display: block; }
.ficha-par em { font-style: normal; font-size: 11px; color: var(--texto-suave); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.msj-miembro[data-par-otro] { cursor: pointer; border-radius: 10px; }
.msj-miembro[data-par-otro]:hover { background: rgba(255, 255, 255, .06); }
body.tarea-abierta .sidebar { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pop-sale { to { opacity: 0; translate: 0 8px; scale: .97; } }
  .tarea-popup.saliendo { animation: pop-sale var(--dur-2) var(--ease) forwards; }
}


/* ─── Cola de mensajes en espera (mientras el colaborador responde) con "Dirigir" ─── */
.chat-cola { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; }
.chat-cola.oculto { display: none; }
.cola-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--borde);
  font-size: 12.5px; color: var(--texto-2);
}
.cola-item svg { width: 14px; height: 14px; color: var(--texto-suave); flex: none; }
.cola-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cola-dirigir { flex: none; }
.cola-quitar { background: none; border: 0; color: var(--texto-suave); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.cola-quitar:hover { color: var(--texto); background: var(--panel-3); }
.burbuja.director.dirigido { border: 1px dashed rgba(0, 0, 0, .3); }
.burbuja.director.dirigido .canal { opacity: .7; }


/* ─── Herramientas: catálogo de integraciones por categorías ─── */
.integ-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.integ-buscar { flex: 1 1 260px; min-width: 200px; margin: 0; }
.integ-catalogo { display: flex; flex-direction: column; gap: 22px; margin-top: 14px; }
.integ-cabecera { display: flex; align-items: center; gap: 10px; }
.integ-sub { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.integ-n { font-size: 11px; font-weight: 600; color: var(--texto-suave); background: var(--panel-2); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 8px; }
/* Cada tarjeta mide lo SUYO (regla del director, 17-sep-2026: “que acá no esté ese espacio en
   blanco”): sin `align-items: start`, la rejilla estira la de una cuenta hasta el alto de la de dos
   y deja un hueco negro debajo. */
.integ-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 40px; align-items: start; }
@media (max-width: 1000px) { .integ-grid { grid-template-columns: 1fr; } }
.integ-fila {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 36px; align-items: center; gap: 14px;
  padding: 10px 8px; border-radius: 12px; transition: background var(--dur-1) var(--ease);
}
.integ-fila:hover { background: var(--panel); }
.integ-logo {
  width: 48px; height: 48px; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--borde);
}
.integ-logo img { width: 34px; height: 34px; object-fit: contain; }
.integ-logo span { font-weight: 700; color: #000; font-size: 18px; }
.integ-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.integ-info b { font-size: 14.5px; font-weight: 600; }
.integ-desc { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integ-estado { font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.integ-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.integ-estado.ok { color: var(--ok); }
.integ-estado.aviso { color: var(--peligro); }
.integ-mas {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--texto); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.integ-mas:hover { background: var(--panel-2); }
.integ-mas.quitar { font-size: 14px; color: var(--texto-suave); }
.integ-ver { background: none; border: 0; color: var(--texto-suave); font: inherit; font-size: 13px; cursor: pointer; padding: 8px; }
.integ-ver:hover { color: var(--texto); text-decoration: underline; }
.integ-mas:disabled { opacity: .35; cursor: default; background: transparent; }
.integ-estado.espera { color: var(--texto-suave); }

/* ─── Varias cuentas por app (17-sep-2026): cada app conectada con sus cuentas ─── */
.integ-conectadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px 16px; }
.integ-app { background: var(--realce); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Lo que se lee primero es QUÉ cuenta es (su correo o su usuario): nunca se recorta; las acciones van debajo. */
.integ-app-cabeza { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.integ-app-cabeza > .btn, .integ-app-cabeza .integ-cuenta-acciones { grid-column: 2; justify-self: start; }
.integ-app .integ-desc { white-space: normal; overflow-wrap: anywhere; }
.integ-cuentas { display: flex; flex-direction: column; }
/* Una fila por cuenta, DELGADA (misma regla): el nombre arranca pegado a su línea y el estado va
   justo debajo; antes la fila respiraba 10 px arriba y 8 abajo y tres cuentas llenaban la tarjeta.
   Y PEGADA A LA IZQUIERDA (regla del director, 18-sep-2026: “no quiero que quede este espacio en
   blanco en la gestión de cuentas, alinéalo a la izquierda”): la fila llevaba 60 px de sangrado para
   quedar bajo el título de la app, y con un nombre corto —“WYP”, “Personal”— eso se lee como un
   hueco delante del nombre. El nombre de la cuenta empieza donde empieza su tarjeta. */
.integ-cuenta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 5px 2px; border-top: 1px solid var(--borde); min-width: 0;
}
.integ-cuenta .btn.mini { padding: 4px 12px; font-size: 11.5px; }
.integ-cuenta > .integ-cuenta-quien { flex: 1 1 140px; }
.integ-cuenta > .integ-cuenta-pie { flex: 0 1 auto; justify-content: flex-end; }
.integ-cuenta-quien { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.integ-cuenta-quien b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.integ-cuenta-quien span { font-size: 12.5px; color: var(--texto-suave); overflow-wrap: anywhere; }
.integ-cuenta-quien em, .integ-motivo { font-style: normal; font-size: 12px; color: var(--texto-suave); overflow-wrap: anywhere; }
.integ-cuenta-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.integ-cuenta-pie > .integ-estado { font-size: 12px; }
.integ-cuenta-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.integ-nota { font-size: 13px; color: var(--texto-suave); margin: -4px 0 10px; max-width: 760px; line-height: 1.5; }
@media (max-width: 640px) { .integ-cuenta { padding-left: 2px; } }
.modal-caja .campo { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 10px; }
.modal-caja .campo input { display: block; width: 100%; margin-top: 4px; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; }


/* ─── Administración: el contexto de la empresa como documento guiado ─── */
.doc-empresa { max-width: 980px; }
.doc-titulo { font-size: 26px; font-weight: 600; letter-spacing: -.3px; margin: 4px 0 6px; }
.doc-sub { font-size: 14px; color: var(--texto-suave); margin-bottom: 18px; line-height: 1.5; }
.doc-hoja { border: 1px solid var(--borde); border-radius: 16px; background: var(--panel); padding: 8px 32px 18px; }
.doc-seccion { padding: 18px 0 6px; border-bottom: 1px solid var(--borde); }
.doc-seccion:last-of-type { border-bottom: 0; }
.doc-h2 { font-size: 17px; font-weight: 600; color: var(--texto-2); margin: 0 0 10px; letter-spacing: -.2px; }
.doc-campo { display: block; margin-bottom: 14px; }
.doc-pregunta { display: block; font-size: 13px; color: var(--texto-suave); margin-bottom: 4px; }
.doc-pregunta i { color: var(--acento); font-style: normal; }
.doc-ayuda { display: block; font-size: 11.5px; color: var(--texto-suave); opacity: .8; margin: -2px 0 4px; }
.doc-campo input, .doc-campo textarea, .doc-campo select {
  display: block; width: 100%; background: transparent; color: var(--texto);
  border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; padding: 6px 0 8px;
  font: inherit; font-size: 15px; line-height: 1.5; outline: none; resize: none;
  transition: border-color var(--dur-1) var(--ease);
}
.doc-campo input:focus, .doc-campo textarea:focus, .doc-campo select:focus { border-bottom-color: var(--acento); }
.doc-campo input::placeholder, .doc-campo textarea::placeholder { color: var(--texto-suave); opacity: .6; }
.doc-campo select.doc-select { max-width: 360px; }
.doc-pie { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 16px; position: sticky; bottom: 0; background: var(--panel); }
/* El nombre del espacio, arriba de Administración (17-sep-2026) */
.espacio-nombre {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info campo" "mensaje mensaje";
  align-items: center; gap: 6px 24px; max-width: 980px; padding: 4px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--panel-2);
}
.espacio-nombre-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.espacio-nombre-campo { grid-area: campo; display: flex; align-items: center; gap: 8px; }
.espacio-nombre-campo input {
  width: 280px; max-width: 100%; background: var(--realce); color: var(--texto); border: 0; border-radius: 10px;
  padding: 8px 12px; font: inherit; font-size: 14px;
}
.espacio-nombre-campo input:focus { outline: 2px solid var(--texto-suave); outline-offset: 1px; }
#espacio-nombre-mensaje { grid-area: mensaje; margin: 0; }
#espacio-nombre-mensaje:empty { display: none; }
@media (max-width: 720px) {
  .espacio-nombre { grid-template-columns: 1fr; grid-template-areas: "info" "campo" "mensaje"; }
  .espacio-nombre-campo input { flex: 1 1 auto; width: auto; }
}
.doc-otros { margin-top: 22px; max-width: 980px; }
.doc-otros summary { cursor: pointer; color: var(--texto-suave); font-size: 13px; padding: 8px 0; }


/* ─── Selector de organización (arriba del menú lateral) ─── */
.org-switch-caja { position: relative; min-width: 0; flex: 1; }
.org-switch {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 6px 8px;
  color: var(--texto); font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.2px; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.org-switch:hover { background: var(--panel); }
.org-switch svg { width: 14px; height: 14px; color: var(--texto-suave); flex: none; }
.org-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Va FIJO a la ventana, no absoluto dentro de la barra: la barra lateral mide 244 px
   y su overflow-y: auto arrastra también el eje x, así que recortaba el menú (más ancho)
   justo por el chip “principal”. Con la barra plegada (64 px) lo cortaba casi entero.
   abrirMenuOrg() lo ancla al botón a mano.
   SIN BORDE (regla del director, 3-oct-2026: “me gusta, pero quita esa línea bordeada que tiene”): se separa de la
   barra por su relleno, un paso más claro que el panel —con el mismo de la barra se perdía contra ella—. */
.org-menu {
  position: fixed; z-index: 80; min-width: 240px; max-width: calc(100vw - 24px);
  background: var(--panel-2); border: 0; border-radius: 14px; padding: 6px;
}
.org-menu .org-item:hover, .org-menu .org-inv:hover { background: var(--panel-3); }
.org-menu.oculto { display: none; }
/* DESDE TU FOTO (6-nov-2026: «que esta tarjeta salga de abajo de la foto del usuario»): pegada encima de la cara de la esquina,
   por encima de los botones de esa esquina, y crece desde la foto. */
.org-menu.desde-marca { z-index: 7600; transform-origin: 14px calc(100% + 22px); }
@media (prefers-reduced-motion: no-preference) {
  .org-menu.desde-marca { animation: org-desde-marca .22s var(--ease, cubic-bezier(.2, .8, .2, 1)) both; }
}
@keyframes org-desde-marca { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
/* Tu cuenta, arriba de la tarjeta: no es un ítem del menú; a sus ajustes se llega por el engranaje de al lado (6-nov-2026). */
.org-cuenta-ajustes { margin-left: auto; flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texto-suave); cursor: pointer; transition: background .15s, color .15s; }
.org-cuenta-ajustes svg { width: 18px; height: 18px; display: block; }
.org-cuenta-ajustes:hover, .org-cuenta-ajustes:focus-visible { background: var(--panel-3); color: var(--texto); outline: none; }
.org-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: 9px; padding: 9px 12px; cursor: pointer;
  color: var(--texto); font: inherit; font-size: 14px; text-align: left;
}
.org-item:hover { background: var(--panel-2); }
.org-item.actual { font-weight: 600; }
.org-tag { font-size: 10.5px; color: var(--texto-suave); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 7px; }
.org-crear { justify-content: flex-start; border-top: 1px solid var(--borde); border-radius: 0 0 9px 9px; margin-top: 4px; padding-top: 11px; color: var(--texto-2); }
.org-crear svg { width: 16px; height: 16px; color: var(--texto-suave); }
/* Plegado caben 44 px: la caja se comía lo que dejaba el botón de plegar y la “T” quedaba en un rectángulo aplastado, cortado por los lados
   (regla del director, 3-nov-2026). Son dos cuadrados iguales, uno al lado del otro. */
.app-layout.menu-plegado .sidebar-marca { gap: 0; margin-inline: -2px; }
.app-layout.menu-plegado .org-switch-caja { flex: none; }
.app-layout.menu-plegado .org-switch { width: 24px; height: 24px; padding: 0; justify-content: center; border-radius: 7px; }
.app-layout.menu-plegado .plegar-btn { width: 24px; height: 24px; }
.app-layout.menu-plegado .org-nombre { display: none; }
.app-layout.menu-plegado .org-switch svg { display: none; }
.app-layout.menu-plegado .org-switch::before { content: attr(data-inicial); font-weight: 700; }
.dialogo-input { display: block; width: 100%; margin-top: 10px; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; }

/* ═══ Aprendizaje: corregir en el chat y las reglas que salen de ahí ═══
   Una corrección es un gesto ligero, no un modal: vive dentro de la burbuja del
   mensaje que se está corrigiendo, porque ese mensaje ES el contexto. */
.leccion {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.leccion.inactiva { opacity: .45; }
.leccion-regla { font-size: 13.5px; line-height: 1.5; }
.leccion-peso {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 99px;
  font-size: 10.5px; color: var(--texto); background: var(--acento-suave); vertical-align: middle;
}
.leccion-meta { margin-top: 4px; font-size: 11.5px; color: var(--texto-suave); }
.leccion-meta.tenue { opacity: .6; }
.leccion-acciones { display: flex; gap: 6px; flex-shrink: 0; }

/* ═══ Voz, Máquinas y Llamadas ═══ */
.entrada {
  padding: 9px 12px; font: inherit; font-size: 13px; color: var(--texto);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--borde); border-radius: 10px;
  transition: border-color var(--dur-2, .2s) var(--ease, ease);
}
.entrada::placeholder { color: var(--texto-suave); }
.entrada:focus { outline: none; border-color: var(--acento); }
select.entrada { cursor: pointer; }

.chip {
  padding: 2px 9px; border-radius: 99px; font-size: 11px;
  color: var(--texto-suave); border: 1px solid transparent; background: var(--realce);
}
.chip.ok { color: #35d49b; background: rgba(53, 212, 155, .12); }

/* La pantalla de la máquina del colaborador: se mira como quien se asoma a su escritorio.
   El iframe apunta al proxy del propio servidor, nunca al contenedor. */
.maquina-pantalla {
  position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 420px;
  border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: #000;
}
.maquina-pantalla iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Su último cuadro, encima del visor que acaba de nacer hasta que arranca: así no se ve negro mientras conecta
   (app.js, “EL ÚLTIMO CUADRO DE CADA PANTALLA”; el visor lo sigue enseñando por dentro hasta su primer cuadro). */
.maquina-pantalla > .pantalla-foto, .computador-pantalla > .pantalla-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none;
}
.computador-pantalla:has(> .pantalla-foto) { position: relative; }
.maquina-pantalla .vacio { display: grid; place-items: center; height: 100%; }

/* ═══ Mensajes: canales de proyecto (tres columnas, como una app de mensajería) ═══
   Izquierda los canales, centro la conversación con los mismos globos del chat (lógica de
   iMessage, paleta de CODX), derecha los miembros. La señal de vida es una fila con el orbe y
   lo que está haciendo (ver .msj-vivo) y, mientras escribe, los tres puntos. */
#seccion-mensajes.seccion { padding: 0; }
/* La columna derecha es una ficha de contacto, no una lista de nombres: necesita ancho. */
/* La columna derecha NO se anima por el grid: probé a interpolar la lista de pistas (una
   lista con minmax() no se sabe interpolar y dejaba la conversación en 0), una propiedad
   registrada con @property (no llegó a animarse) y el ancho del propio panel en una pista
   `auto` (el item se estira a la pista y el ancho no manda). Lo que sí es fiable: el panel
   SE DESLIZA hacia fuera y, cuando ya no se ve, la pista se cierra de una vez —un solo
   reflujo, al final, cuando el ojo ya está en otro sitio—. Lo orquesta abrirFichaColab. */
.msj-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; height: 100vh; }
/* La ficha del colaborador se cierra con su ✕ y se vuelve a abrir tocando su foto en la
   cabecera del chat — como en una app de mensajes. Cerrada, la conversación se queda con
   todo el ancho. */
/* La columna de la derecha se PLIEGA, no desaparece de golpe (decisión del director,
   8-sep-2026): la pista sigue existiendo y su ancho va a 0, que es lo que el navegador sabe
   interpolar. Con dos pistas en un estado y tres en el otro no hay nada que animar. */
.msj-layout.sin-ficha { grid-template-columns: 280px minmax(0, 1fr) 0px; }
/* LA COLUMNA DE DETALLES ES UN CAJÓN (regla del director, 15-sep-2026: “que la animación de cuando
   se abre y se cierra la sección de detalles del colaborador sea más suave”). Antes el panel se
   deslizaba, pero el hueco se cerraba —o se abría— DE UN GOLPE al final: la conversación cambiaba
   320 px de ancho en un solo cuadro. Ahora se anima la PISTA (`grid-template-columns`, que WebKit sí
   interpola: medido en un WKWebView, 320 → 240 → 160 → 80 → 0) y el panel va pegado a su borde: su
   contenido conserva el ancho y se recorta contra el filo de la ventana, así que entra y sale como
   un cajón mientras la conversación se ensancha o se estrecha en el mismo movimiento. El layout
   recorta en horizontal (`clip`, que no crea scroll) para que el relleno del panel no asome fuera
   cuando la pista mide cero; cerrado, además, no se ve ni recibe clics ni foco. */
.msj-layout { overflow-x: clip; }
.msj-layout.sin-ficha .msj-miembros { visibility: hidden; opacity: 0; pointer-events: none; }
.msj-lista { border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.msj-lista-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 24px 14px 10px 18px; }
.msj-lista-cabeza h2 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.msj-buscar { margin: 0 12px 10px; width: calc(100% - 24px); }
.msj-canales { flex: 1; overflow-y: auto; padding: 4px 8px 16px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.msj-canal {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border-radius: 12px; background: transparent; border: 1px solid transparent;
  color: var(--texto); text-align: left; cursor: pointer; font: inherit;
  max-height: 96px;   /* con altura tope la fila se puede plegar con animación (ver “con el aprobador abierto”) */
  transition: background var(--dur-1) var(--ease), opacity 200ms var(--ease, ease), max-height 280ms var(--ease, ease),
              padding 280ms var(--ease, ease), margin 280ms var(--ease, ease);
}
.msj-canal:hover { background: var(--panel); }
.msj-canal.sel { background: var(--panel-2); }
.msj-canal-avatares { display: flex; flex: none; }
.msj-canal-avatares .chat-agente-avatar { width: 28px; height: 28px; font-size: 12px; margin-left: -9px; box-shadow: 0 0 0 2px var(--fondo); }
/* Una cara sola no lleva aro: sobre la fila elegida era una línea blanca alrededor de la foto
   (regla del director, 15-sep-2026). Apiladas sí, porque las separa, y del color de la fila. */
.msj-canal-avatares .chat-agente-avatar:only-child { box-shadow: none; }
.msj-canal:hover .msj-canal-avatares .chat-agente-avatar:not(:only-child) { box-shadow: 0 0 0 2px var(--panel); }
.msj-canal.sel .msj-canal-avatares .chat-agente-avatar:not(:only-child) { box-shadow: 0 0 0 2px var(--panel-2); }
.msj-canal-avatares .chat-agente-avatar:first-child { margin-left: 0; }
.msj-canal-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.msj-canal-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msj-canal-info span { font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msj-canal-hora { font-size: 11px; color: var(--texto-suave); flex: none; }
.msj-canal-lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; align-self: flex-start; padding-top: 2px; }
.msj-canal-lado:empty { display: none; }
/* Un chat con novedades pesa más que uno leído: el nombre en blanco lo dice sin adornos */
.msj-canal.sin-leer .msj-canal-info b { color: var(--texto); font-weight: 700; }
.msj-canal.sin-leer .msj-canal-info > span { color: var(--texto-2); }
.msj-canal .msj-canal-info { position: relative; }
.msj-conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* Cabecera como iMessage: identidad centrada y cristal líquido — flota sobre el hilo,
   que se desliza difuminado por debajo (backdrop-filter). Las acciones (llamada, eliminar)
   van a la derecha. */
.msj-conv { position: relative; }
/* La cabecera NO es una barra: es niebla. Era un rectángulo opaco con un filo abajo, y el
   texto desaparecía de golpe al cruzarlo. Como en iOS, el mensaje tiene que ir perdiéndose
   MIENTRAS SUBE: se difumina y se apaga poco a poco, y arriba ya no queda nada.
   Eso pide dos capas, porque un `backdrop-filter` con máscara difumina de forma uniforme y
   luego se recorta —lo que da un corte, no una transición—: aquí van dos veladuras con
   máscaras distintas (una fuerte y corta, otra suave y larga), y encima el degradado de
   color que apaga el texto. El contenido de la cabecera va sobre todo eso, nítido. */
.msj-conv-cabeza {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 10px 16px 14px; min-height: 78px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fondo) 92%, transparent) 0%,
    color-mix(in srgb, var(--fondo) 74%, transparent) 42%,
    color-mix(in srgb, var(--fondo) 30%, transparent) 74%,
    transparent 100%);
  pointer-events: none;   /* el hilo sigue siendo arrastrable bajo la niebla */
}
.msj-conv-cabeza > * { pointer-events: auto; }
.msj-conv-cabeza::before,
.msj-conv-cabeza::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
}
/* Capa 1: el desenfoque fuerte, solo en la franja de arriba */
.msj-conv-cabeza::before {
  height: 100%;
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 72%);
}
/* Capa 2: un desenfoque leve que se estira más abajo, para que la transición no tenga borde */
.msj-conv-cabeza::after {
  height: 132%;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
}
.msj-cab-centro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.msj-cab-centro .msj-canal-avatares .chat-agente-avatar { width: 34px; height: 34px; font-size: 14px; }
/* LAS CARAS DEL GRUPO, SIN ARO BLANCO (regla del director, 8-oct-2026: “arregla cómo se ven los bordes blancos del app
   web en los grupos”). Entre cara y cara iba un aro del color del fondo (--fondo); la cabecera es vidrio sobre la
   conversación, así que en claro se veía como un borde blanco alrededor de cada una. Ahora no hay aro: a cada cara se
   le RECORTA el sitio de la que tiene encima, con un hueco de 2 px que deja ver lo que haya detrás, sea el color que sea. */
.msj-cab-centro .msj-canal-avatares .chat-agente-avatar { --cara: 34px; --monta: 9px; box-shadow: none; }
.msj-cab-centro .msj-canal-avatares .chat-agente-avatar:not(:last-child) {
  -webkit-mask-image: radial-gradient(circle at calc(var(--cara) * 1.5 - var(--monta)) 50%, transparent calc(var(--cara) / 2 + 1.5px), #000 calc(var(--cara) / 2 + 2.2px));
          mask-image: radial-gradient(circle at calc(var(--cara) * 1.5 - var(--monta)) 50%, transparent calc(var(--cara) / 2 + 1.5px), #000 calc(var(--cara) / 2 + 2.2px));
}
.msj-cab-centro b { font-size: 13.5px; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msj-cab-centro span { font-size: 11px; color: var(--texto-suave); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msj-conv-cabeza .msj-acciones { position: absolute; z-index: 2; right: 14px; top: 34px; transform: translateY(-50%); display: flex; gap: 4px; }
.msj-conv-cabeza .msj-acciones .chat-icono svg { width: 20px; height: 20px; }
/* Arriba, 88px porque la cabecera FLOTA sobre el hilo y hay que dejarle su sitio. Abajo no:
   el compositor está en el flujo, debajo del hilo, así que los 88px que había eran hueco
   muerto y el último globo quedaba lejísimos de donde escribes (fallo del director,
   8-sep-2026). Solo un respiro. */
.msj-hilo {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none;
  padding: 88px 22px 14px;
}
/* NADA DEL HILO SE ENCOGE: EL HILO SE DESPLAZA (30-oct-2026, el director: “dice que las mandó, no salen en el chat,
   pero sí están en las fotos”). El hilo es una columna flexible de altura fija, y un hijo con `overflow: hidden` —el
   álbum de varias fotos, una previa de enlace, la pantalla de su computador— tiene, para el navegador, un mínimo de
   cero: cuando el chat tenía más de lo que cabía, se encogía, y un álbum de siete fotos quedaba en 300 × 0 (medido: 46 px
   a 1440 × 731 y 0 a 1000 × 731, en WebKit y en Chromium). Los globos de texto no se encogían, por eso solo faltaban
   las fotos de varias a la vez. */
.msj-hilo > *, .chat-mensajes > * { flex-shrink: 0; }
/* LA BARRA DEL HILO ES LA DE iMESSAGE (regla del director, 4-oct-2026: “esa barra de slide no me
   gusta”): la nativa —8 px, gris, siempre a la vista con un ratón o con “mostrar siempre”— se
   esconde, y en su lugar hay un hilo fino que solo aparece mientras TÚ te desplazas (rueda o
   dedo; un globo que llega o el empuje del hilo no la encienden) y se apaga al soltar. La
   pinta `pintarBarraDelHilo` (app.js) desde el gesto, y vive fuera del hilo para no desplazarse
   con él. */
.msj-hilo::-webkit-scrollbar { display: none; width: 0; height: 0; }
.msj-barra {
  position: absolute; right: 3px; width: 4px; border-radius: 2px; z-index: 4;
  background: var(--texto-suave); opacity: 0; pointer-events: none;
  transition: opacity .45s ease .35s;
}
.msj-barra.viva { opacity: .55; transition: opacity .08s; }
.msj-hilo .burbuja { max-width: 70%; }
.msj-hilo .burbuja-autor { display: block; font-size: 11.5px; color: var(--texto-suave); margin: 0 0 3px 2px; font-weight: 600; }
/* El compositor también flota en cristal, como la barra de iMessage */
.msj-entrada {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  /* `wrap` + la tira a lo ancho: los adjuntos ocupan su propia línea ENCIMA del “+” y la
     caja. Sin esto eran un elemento más de la misma fila y salían al lado, empujando. */
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px 14px 14px;
  background: color-mix(in srgb, var(--fondo) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
/* El "+" de Mensajes es el mismo control del chat: contenedor del menú, no un botón suelto */
.msj-mas { flex: none; position: relative; }
.msj-mas .chat-icono { width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; }
.msj-mas .chat-icono svg { width: 18px; height: 18px; }
/* El popup de menciones de Mensajes flota sobre el compositor, como el del chat */
.msj-entrada { position: relative; }
#msj-menciones { bottom: calc(100% + 8px); left: 14px; right: 14px; }
.msj-caja { flex: 1; border-radius: 20px; }
.msj-caja textarea { max-height: 160px; }
/* iMessage: micrófono cuando está vacío, flecha cuando hay texto */
.msj-caja:has(textarea:not(:placeholder-shown)) .msj-mic { display: none; }
.msj-caja:has(textarea:placeholder-shown) .chat-enviar { display: none; }
/* Y CON ALGO ADJUNTO, LA FLECHA (14-oct-2026, el director: “¿por qué no me dejó enviarlas?”). Con solo fotos y sin
   texto el botón seguía siendo el micrófono: pulsarlo empezaba a dictar y las fotos se quedaban en la bandeja. Una foto
   sola es un mensaje, como en cualquier app. */
.msj-entrada.con-adjuntos .msj-caja .msj-mic { display: none; }
.msj-entrada.con-adjuntos .msj-caja .chat-enviar { display: grid; }
.msj-mic.oyendo { color: #ff5d5d; }
.msj-miembros { border-left: 1px solid var(--borde); padding: 26px 14px; overflow-y: auto; scrollbar-width: thin; }
.msj-miembros h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--texto-suave); font-weight: 600; margin: 0 6px 12px; }
/* La regla de cómo responden estorbaba abajo del todo, donde nadie la lee: ahora vive
   tras el “?” del título y sale al pasar el cursor (o al tocarlo). */
.ficha-grupo-cabeza { position: relative; display: flex; align-items: center; gap: 4px; padding-right: 30px; }
.ficha-grupo-cabeza h3 { margin-bottom: 0; }
.ficha-ayuda {
  width: 18px; height: 18px; padding: 0; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--texto-suave); cursor: help;
  margin-bottom: 12px;
}
.ficha-ayuda svg { width: 14px; height: 14px; }
.ficha-ayuda:hover { color: var(--texto); }
.ficha-ayuda-texto {
  position: absolute; top: calc(100% - 4px); left: 0; right: 0; z-index: 4;
  padding: 9px 12px; border-radius: 12px; font-size: 11.5px; line-height: 1.5; color: var(--texto-2);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  opacity: 0; visibility: hidden; transition: opacity var(--rapido, .18s) var(--ease, ease);
}
.ficha-grupo-cabeza:hover .ficha-ayuda-texto,
.ficha-grupo-cabeza.con-ayuda .ficha-ayuda-texto { opacity: 1; visibility: visible; }
/* Un miembro se toca y lleva a SU chat: es un botón, no un renglón muerto */
button.msj-miembro { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; }
button.msj-miembro:hover { background: var(--realce); }
/* Y debajo de los miembros, lo que el canal ha compartido */
.ficha-grupo-compartido { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borde); }
.msj-miembro { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.msj-miembro .chat-agente-avatar { width: 30px; height: 30px; flex: none; }
.msj-miembro div { min-width: 0; }
.msj-miembro b { font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msj-miembro span { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* La cara de una PERSONA sin foto es un <span> como el cargo, y esa regla la volvía un bloque gris: en Miembros la
   inicial quedaba pegada al borde y casi invisible sobre su círculo. */
.msj-miembro > .chat-agente-avatar { display: inline-flex; font-size: 13px; color: var(--contraste-texto); }
.msj-miembro .punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-left: auto; flex: none; box-shadow: 0 0 8px rgba(74, 222, 128, .5); }
/* La cabecera de Miembros: la regla de cómo responden y, a su derecha, el icono para sumar a
   alguien al grupo (regla del director, 16-sep-2026: “que sumar a alguien sea un icono botón en la
   parte superior de la sección”). */
/* El icono va en la MISMA columna que las fotos (regla del director, 16-sep-2026: “deja el icono
   alineado con las fotos de los miembros”): mismo sangrado que la fila (6 px) y mismo diámetro que
   su avatar (30 px), así se lee como el primer hueco de la lista y no como un botón suelto. */
.miembros-cabeza { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0 6px; }
.miembros-cabeza .ayuda { flex: 1; margin: 0; }
.ficha-circulo.miembros-sumar { width: 30px; height: 30px; }
.ficha-circulo.miembros-sumar svg { width: 15px; height: 15px; }
.msj-miembros .ayuda { margin: 16px 6px 0; font-size: 12px; }
.msj-vacio { margin: auto; color: var(--texto-suave); text-align: center; max-width: 340px; line-height: 1.55; font-size: 14px; }
.msj-tecleando { display: flex; flex-direction: column; gap: 3px; align-self: flex-start; position: relative; }
.msj-tecleando .burbuja-autor { margin-left: 2px; }
/* Lo que está haciendo, dentro del chat: el orbe y su paso, en el verde del “En línea” de su ficha (3-nov-2026). */
.msj-vivo { max-width: 100%; min-width: 0; --orbe-color: var(--ok); color: var(--ok); }
.msj-vivo-fila { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; }
.msj-vivo-orbe { flex: none; width: 28px; height: 28px; display: inline-flex; --orbe-tamano: 28px; }
.msj-vivo-paso { min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Elegir miembros al crear un canal */
@media (max-width: 1100px) { .msj-layout { grid-template-columns: 240px minmax(0, 1fr); } .msj-miembros { display: none; } }
@media (max-width: 900px) { .msj-layout { grid-template-columns: minmax(0, 1fr); height: auto; } .msj-lista { display: none; } .msj-hilo { min-height: 60vh; } }

/* ═══ Ajuste iMessage: en las visuales de conversación el foco del compositor es gris,
   sin el gradiente de marca (decisión del director: cero morados en el chat). ═══ */
.panel-chat .chat-caja:focus-within, .msj-caja:focus-within {
  border-color: transparent;
  background: var(--panel-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AJUSTES → GENERAL (apariencia, idioma, notificaciones, reporte de bugs)

   Va ANTES del bloque de vidrio a propósito: el vidrio debe seguir teniendo la
   última palabra en la cascada. Aquí no se toca ni el tinte, ni el desenfoque, ni
   el radio de la ventana — nada de la piel de la app.

   Las preferencias de apariencia se aplican como atributos en <html>, así que un
   solo cambio de atributo repinta todo sin recargar ni tocar el DOM.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tamaño del texto: se escala la raíz y todo lo demás va detrás, porque la hoja
   está escrita en rem/em salvo detalles puntuales. */
html[data-texto="pequeno"] { font-size: 14px; }
html[data-texto="normal"]  { font-size: 15px; }
html[data-texto="grande"]  { font-size: 17px; }

/* Densidad compacta: menos aire, misma estructura. */
html[data-densidad="compacta"] .panel { padding: 12px 14px; }
html[data-densidad="compacta"] .lista { gap: 7px; }
html[data-densidad="compacta"] .ktarjeta { padding: 9px 11px; }
html[data-densidad="compacta"] .nav-item { padding: 6px 10px; }
html[data-densidad="compacta"] .ajuste-fila { padding: 9px 0; }
html[data-densidad="compacta"] .config-grupo .panel + .panel { margin-top: 10px; }

/* Reducir el movimiento: el mismo trato que da `prefers-reduced-motion`, pero a
   petición de la persona. !important porque compite con animaciones declaradas
   en reglas más específicas repartidas por toda la hoja. */
html[data-movimiento="no"] *,
html[data-movimiento="no"] *::before,
html[data-movimiento="no"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

/* ─── Piezas de la sección ─── */
.ajuste-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 13px 0; border-top: 1px solid var(--borde);
}
.ajuste-fila:first-of-type { border-top: 0; }
.ajuste-nombre { font-size: .92rem; }
.ajuste-pista { color: var(--texto-suave); font-size: .8rem; margin-top: 2px; }
.ajuste-sub {
  margin: 18px 0 10px; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave);
}

/* Segmentado: una sola opción viva, como los conmutadores de macOS. */
.segmentado { display: inline-flex; background: var(--panel-2); border-radius: 9px; padding: 3px; gap: 2px; }
.segmentado button {
  border: 0; background: transparent; color: var(--texto-suave);
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  font-size: .85rem; font-family: inherit; white-space: nowrap;
}
.segmentado button:hover { color: var(--texto); }
/* La opción elegida usa la pastilla de máximo contraste, no el morado (decisión del
   director, 8-sep-2026): negra sobre el claro, blanca sobre el oscuro. */
.segmentado button.activo { background: var(--contraste); color: var(--contraste-texto); }

/* Interruptor. `role="switch"` + aria-checked: el estado lo lleva el atributo, no
   una clase, para que lector de pantalla y CSS lean exactamente lo mismo. */
.interruptor {
  width: 42px; height: 25px; flex: none; padding: 3px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--panel-2);
  display: inline-flex; align-items: center;
}
.interruptor span {
  width: 17px; height: 17px; border-radius: 50%; background: var(--texto-suave);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
/* SIN MORADO (regla del director, 4-nov-2026: “un switch que cambia de sentido y el fondo no es morado sino blanco o su equivalencia
   en modo claro”): encendido es del color de más contraste con el fondo y la bolita se va al otro lado, del color opuesto. */
.interruptor[aria-checked="true"] { background: var(--interruptor-on, var(--texto)); border-color: transparent; }
.interruptor[aria-checked="true"] span { transform: translateX(17px); background: var(--interruptor-bola, var(--panel)); }
.interruptor:disabled { opacity: .45; cursor: not-allowed; }

/* Colores de acento */
.ajuste-colores { display: inline-flex; gap: 8px; align-items: center; }
.ajuste-colores button {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; outline: 1px solid var(--borde); outline-offset: 1px;
}
.ajuste-colores button.activo { border-color: var(--fondo); outline-color: var(--texto); }

/* El diagnóstico del reporte, en crudo */
.ajuste-diag {
  margin: 10px 0 0; padding: 12px; max-height: 260px; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: 10px;
  font-size: .76rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  color: var(--texto-suave);
}

/* Fila de un reporte ya enviado */
.reporte-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
}
.reporte-fila .reporte-meta { color: var(--texto-suave); font-size: .78rem; margin-top: 2px; }

/* textarea comparte el aspecto de .entrada */
textarea.entrada { resize: vertical; min-height: 62px; font-family: inherit; line-height: 1.5; }

/* ═══ Dentro de la app de macOS (html.app-mac, inyectado por main.m): la ventana es
   full-size y los semáforos flotan sobre el contenido — la barra lateral baja para que
   el selector de organización respire lejos de cerrar/minimizar. ═══ */
html.app-mac .sidebar,
html.app-mac .app-layout.menu-plegado .sidebar { padding-top: 52px; }


/* ═══════════════════════════════════════════════════════════════════════════════
   PIEL DE VIDRIO: ventanas flotantes (referencia del director: rail + contenido
   como panel redondeado flotante, y la textura de los widgets de macOS — vidrio
   oscuro teñido, translúcido, con borde de luz). Va al final: pisa la base.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --margen-v: 10px;                       /* margen fino alrededor de LA tarjeta */
  --radio-v: 16px;
  --vidrio: rgba(18, 21, 30, .55);        /* teñido oscuro translúcido */
  --vidrio-panel: rgba(12, 14, 21, .62);
  --vidrio-borde: rgba(255, 255, 255, .12);
}
html, body { height: 100%; }
body { overflow: hidden; }                /* el scroll vive dentro de la ventana de contenido */
/* Fondo REAL detrás de las ventanas (como el wallpaper tras los widgets de macOS):
   azul profundo con atmósfera. Sin esto el vidrio no refracta y los márgenes no se ven. */
body { background: #05070c; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 72% -22%, #1c2b54 0%, rgba(28, 43, 84, .45) 34%, transparent 58%),
    radial-gradient(95% 75% at -12% 112%, #17233f 0%, transparent 55%),
    radial-gradient(55% 42% at 88% 104%, rgba(70, 125, 255, .28), transparent 62%),
    linear-gradient(180deg, #070a13 0%, #04060b 100%);
}
/* La veta de luz atravesando, como la atmósfera del planeta en la referencia */
body::after {
  content: ''; position: fixed; left: -12%; right: -12%; top: 40%; height: 24%;
  z-index: -1; pointer-events: none; transform: rotate(-7deg);
  background: linear-gradient(90deg, transparent 4%, rgba(118, 168, 255, .22) 38%, rgba(158, 122, 255, .13) 62%, transparent 96%);
  filter: blur(58px);
}
/* ═══ LA TARJETA GIGANTE DE VIDRIO (la zona "blanca" de la referencia) ═══
   Liquid glass como el de Apple, aproximado en web: fondo teñido translúcido + backdrop
   blur/saturación (por eso REACCIONA a lo que tiene detrás), borde de refracción (luz
   arriba, sombra abajo), y un brillo especular en diagonal. El menú principal vive
   directamente sobre este vidrio; cada sección es una tarjeta NEGRA encima. */
.app-layout {
  position: relative;
  height: calc(100vh - var(--margen-v) * 2); min-height: 0; box-sizing: border-box;
  margin: var(--margen-v); padding: 10px 10px 10px 0; gap: 10px;
  border-radius: var(--radio-v);
  background: linear-gradient(160deg, rgba(40, 46, 62, .20), rgba(14, 16, 24, .26) 55%, rgba(24, 28, 40, .18));
  -webkit-backdrop-filter: blur(34px) saturate(170%) brightness(1.06); backdrop-filter: blur(34px) saturate(170%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .22),          /* filo de luz arriba: refracción */
    inset 0 -1px 0 rgba(0, 0, 0, .35),               /* sombra del canto abajo */
    inset 1px 0 0 rgba(255, 255, 255, .08),
    inset -1px 0 0 rgba(0, 0, 0, .18);
  overflow: hidden;
}
/* brillo especular: el reflejo diagonal que hace que el vidrio parezca vidrio */
.app-layout::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 22%, transparent 46%),
    radial-gradient(60% 40% at 100% 0%, rgba(255, 255, 255, .06), transparent 60%);
}
/* El menú principal va DIRECTO sobre el vidrio: sin tarjeta, sin borde, sin tinte */
.sidebar {
  position: relative; z-index: 1; height: 100%; box-sizing: border-box;
  background: transparent; border: 0; box-shadow: none;
}
/* La tarjeta NEGRA del detalle de la sección (paleta de siempre). Al plegar el menú, la
   columna del grid se estrecha y esta tarjeta se ensancha sola. */
.app-main {
  position: relative; z-index: 1;
  height: 100%; overflow-y: auto; scrollbar-width: thin;
  border-radius: 16px;
  background: var(--fondo);
  border: 1px solid rgba(255, 255, 255, .06);
}
/* El fondo se mueve muy despacio: así el vidrio "reacciona" y no parece una foto fija */
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: fondo-deriva 38s ease-in-out infinite alternate; }
  body::after { animation: veta-deriva 46s ease-in-out infinite alternate; }
  @keyframes fondo-deriva { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
  @keyframes veta-deriva { to { transform: rotate(-4deg) translate3d(4%, -3%, 0); } }
}
/* Los layouts que medían contra la ventana ahora miden contra SU ventana de vidrio */
.panel-chat { height: calc(100vh - var(--margen-v) * 2 - 56px); }
#seccion-mensajes.seccion, .msj-layout { height: 100%; }
#seccion-oficina.seccion { height: 100%; }
#oficina-3d { height: 100%; }
/* En pantallas estrechas la barra vuelve a ser cabecera y el scroll vuelve al documento */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app-layout { height: auto; margin: 6px; }
  .app-main { height: auto; overflow: visible; }
  .msj-layout { height: auto; }
}

/* ═══ Dentro de la app de macOS la ventana ENTERA es el vidrio ═══
   El fondo translúcido lo pone el sistema (NSVisualEffectView detrás de la web), así que
   aquí no se pinta ni margen ni wallpaper: la tarjeta gigante llega hasta el borde de la
   ventana (macOS redondea las esquinas) y el escritorio real se ve y se refracta detrás. */
html.app-mac { --margen-v: 0px; }
html.app-mac body { background: transparent; }
html.app-mac body::before, html.app-mac body::after { display: none; }
html.app-mac { --tinte-vidrio: .04; }   /* el ahumado real lo pone NSGlassEffectView (tintColor) */   /* 0 = solo el vidrio del sistema · 1 = negro opaco */
html.app-mac .app-layout {
  border-radius: 30px; border: 0; box-shadow: none;   /* mismo radio que el cornerRadius del vidrio */
  background: rgba(var(--tinte-vidrio-color), var(--tinte-vidrio));   /* negro puro con alfa: oscurece sin agrisar */
  -webkit-backdrop-filter: none; backdrop-filter: none;   /* el blur ya lo hace el sistema */
}
html.app-mac .app-layout::before { display: none; }   /* el rim de luz lo pone NSGlassEffectView; el brillo pintado agrisaba */


/* ═══ Selección sobre el vidrio: cápsula translúcida, no un color fijo ═══
   Como la pestaña elegida de una barra Liquid Glass de iOS: un blanco con alfa que hereda
   el fondo que tenga detrás (naranja, azul, lo que sea), con un filo de luz arriba. Vale
   para el menú, los chats desplegados y el colaborador enfocado del riel. */
.nav-item:hover, .chat-agente:hover { background: var(--realce); }
.nav-item.activo, .chat-agente.sel {
  background: var(--realce-fuerte);
}
.nav-item.activo:hover, .chat-agente.sel:hover { background: var(--realce-fuerte); }
/* Más aire arriba en la app: el selector de organización respira lejos de los semáforos */
html.app-mac .sidebar,
html.app-mac .app-layout.menu-plegado .sidebar { padding-top: 68px; }
/* Más aire arriba: la tarjeta negra arranca un poco más abajo dentro del vidrio */
html.app-mac .app-layout { padding-top: 22px; }
/* La tarjeta negra arranca a 44 px del borde del vidrio, y el menú principal (selector de
   organización incluido) arranca en ESA misma cota: quedan alineados y el menú sube. */
html.app-mac .app-layout { padding-top: 44px; }
html.app-mac .sidebar,
html.app-mac .app-layout.menu-plegado .sidebar { padding-top: 44px; }
/* La cota de 44 px ya la pone .app-layout (baja la barra y la tarjeta por igual): la barra
   NO suma la suya. El nombre de la organización se sube lo que mide el relleno de su botón
   para que el texto quede al ras del borde superior de la tarjeta negra. */
html.app-mac .sidebar,
html.app-mac .app-layout.menu-plegado .sidebar { padding-top: 0; }
html.app-mac .sidebar-marca { margin-top: -8px; }
/* LA SOMBRA CORTADA (regla del director, 15-sep-2026: “arregla esa sombra cortada”). Subir el nombre
   8 px con un margen negativo lo sacaba de la caja de la barra, que desplaza (`overflow-y: auto`) y
   por eso recorta: el fondo del selector al pasar el cursor salía con la parte de arriba cortada en
   recto. Ahora la barra entera sube esos 8 px y los devuelve como relleno, así que el nombre queda
   exactamente donde estaba (medido en WebKit: el texto a la misma cota) y su fondo cabe entero. */
html.app-mac .sidebar,
html.app-mac .app-layout.menu-plegado .sidebar { margin-top: -8px; padding-top: 8px; }
/* El riel va una capa por ENCIMA de la tarjeta negra: como `.sidebar` es su propia capa
   (position + z-index), el desplegable de organización quedaba atrapado dentro de ella y
   la tarjeta, que va después en el DOM, le pasaba por encima. */
.sidebar { z-index: 2; }

/* ═══ Oficina: la foto del espacio con un velo negro y el aviso ═══
   Sustituye al visor 3D (74 MB) mientras la función llega: la foto llena la tarjeta, el
   velo la apaga para que el texto mande, y el difuminado le da profundidad. */
.oficina-proximamente { position: relative; height: 100%; min-height: 420px; overflow: hidden; border-radius: 16px; }
.oficina-proximamente img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oficina-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.78));
  -webkit-backdrop-filter: blur(3px) saturate(85%); backdrop-filter: blur(3px) saturate(85%);
}
.oficina-proximamente p {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center; padding: 0 10%;
  text-align: center; text-wrap: balance;
  font-size: clamp(22px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.6px; line-height: 1.25;
  /* Blanco SIEMPRE, no `--texto`: debajo hay una foto oscura con un velo negro fijo
     (rgba(0,0,0,.62→.78)), así que el fondo de este texto no cambia con el tema. En claro,
     `--texto` se volvía casi negro sobre negro y la frase desaparecía. */
  color: #f5f5f5; text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

/* ═══ Barras de búsqueda finas, con la lupa dentro (referencia: iMessage) ═══ */
.msj-buscar-caja {
  display: flex; align-items: center; gap: 7px;
  margin: 0 12px 10px; padding: 0 10px; height: 30px;
  background: var(--panel-2); border: 1px solid transparent; border-radius: 9px;
  color: var(--texto-suave);
}
.msj-buscar-caja svg { width: 14px; height: 14px; flex: none; }
input.msj-buscar {
  flex: 1; min-width: 0; margin: 0; padding: 0; height: 100%;
  background: none; border: 0; outline: none;
  color: var(--texto); font: inherit; font-size: 13px;
}
input.msj-buscar::placeholder { color: var(--texto-suave); }
input.msj-buscar::-webkit-search-cancel-button { -webkit-appearance: none; }
.modal-caja .msj-buscar-caja { margin: 8px 0 10px; }

/* ═══ Foco en BLANCO, no en morado (decisión del director: cero morados) ═══ */
:where(button, [role="button"], a[href], summary, input, select, textarea, [tabindex]):focus-visible {
  outline-color: rgba(255, 255, 255, .55);
}
.entrada:focus, .rutina-detalle:focus,
.doc-campo input:focus, .doc-campo textarea:focus, .doc-campo select:focus { border-bottom-color: #fff; }
.dialogo-input:focus { outline: none; border-color: var(--borde-2); }
.tarea-chip:hover { background: var(--realce); }

/* ═══ Chats destacados: avatares grandes arriba de la lista (referencia: Mensajes) ═══ */
/* Rejilla de TRES columnas (tope de 9): el racimo de un grupo cabe en el hueco de una cara,
   así que con `flex` y anchos sueltos sobraba sitio y solo entraban dos por fila. */
.msj-fijados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; padding: 4px 14px 14px; justify-items: center; }
.msj-fijados:empty { display: none; }
.msj-fijado {
  width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--texto);
  font: inherit; font-size: 11.5px;
}
.msj-fijado { position: relative; }
.msj-fijado-foto { position: relative; display: block; }
.msj-fijado .msj-canal-avatares .chat-agente-avatar { width: 54px; height: 54px; font-size: 20px; margin-left: -16px; }
.msj-fijado .msj-canal-avatares .chat-agente-avatar:first-child { margin-left: 0; }

/* ═══ Un grupo es un RACIMO, no una fila ═══
   Un grupo no se dibuja como un círculo grande con otros detrás: se dibuja como tres
   pequeños ocupando EL MISMO hueco que ocuparía uno grande (54 px), y la profundidad sale
   de que no son del mismo tamaño ni están en el mismo plano — una delante a la izquierda,
   otra un poco más chica a su lado, y la tercera, la más pequeña, asomando por detrás y
   entre las dos. Va en posición absoluta a propósito: con márgenes negativos las medidas
   dependían del orden y no se podía garantizar que el racimo cupiera en el hueco.
   El `:has()` es el interruptor: con UNA sola cara (un chat directo) no hay racimo que
   hacer y el avatar se queda grande como siempre. */
.msj-fijado .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) {
  position: relative; display: block; width: 54px; height: 54px; flex: none;
}
.msj-fijado .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) .chat-agente-avatar {
  position: absolute; margin: 0;
  box-shadow: 0 0 0 2px var(--fondo);
  transition: transform var(--dur-2, .25s) var(--ease, ease), filter var(--dur-2, .25s) var(--ease, ease);
}
.msj-fijado .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) .chat-agente-avatar:nth-child(1) {
  z-index: 3; width: 30px; height: 30px; font-size: 12px; left: 0; top: 22px;
}
.msj-fijado .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) .chat-agente-avatar:nth-child(2) {
  z-index: 2; width: 26px; height: 26px; font-size: 11px; left: 27px; top: 26px; filter: brightness(.82);
}
.msj-fijado .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) .chat-agente-avatar:nth-child(3) {
  z-index: 1; width: 21px; height: 21px; font-size: 9px; left: 16px; top: 2px; filter: brightness(.62);
}
/* Al pasar el mouse el racimo se abre un poco: el movimiento confirma los planos */
.msj-fijado:hover .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) .chat-agente-avatar:nth-child(2) { transform: translate(3px, 2px); filter: brightness(.95); }
.msj-fijado:hover .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) .chat-agente-avatar:nth-child(3) { transform: translateY(-4px); filter: brightness(.78); }

/* El nombre se apunta por su clase. Con `span:last-child` esto alcanzaba también al
   contenedor de avatares (es el último hijo de su propio padre) y le colaba un
   `overflow: hidden` que RECORTABA el aro redondo del elegido contra un rectángulo: el
   chat seleccionado salía con un recuadro en vez de un aro. */
.msj-fijado-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.msj-fijado:hover .msj-fijado-nombre { color: var(--texto); }
/* Nada entre el aro y la pantalla puede recortarlo: el aro se pinta FUERA del avatar. */
.msj-fijado .msj-canal-avatares, .msj-fijado-foto { overflow: visible; }
.msj-fijado.sel .msj-canal-avatares .chat-agente-avatar { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px rgba(255, 255, 255, .5); }
/* En un racimo el aro va SOLO en la de delante: tres aros no dicen "elegido", dicen ruido */
.msj-fijado.sel .msj-canal-avatares:has(.chat-agente-avatar + .chat-agente-avatar) .chat-agente-avatar:not(:first-child) {
  box-shadow: 0 0 0 2px var(--fondo);
}

/* Menú de clic derecho sobre un chat */
.msj-menu-ctx {
  position: fixed; z-index: 90; min-width: 180px; padding: 5px;
  background: var(--panel); border: 0; border-radius: 12px;
}
.msj-menu-ctx.oculto { display: none; }
.msj-menu-ctx button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.msj-menu-ctx button:hover { background: var(--panel-2); }
.msj-menu-ctx svg { width: 15px; height: 15px; color: var(--texto-suave); }

/* ═══ Compositor fino y "+" a plomo con la píldora (referencia: iMessage) ═══
   El compositor alinea abajo (flex-end) para que al crecer el texto el "+" se quede
   con la ÚLTIMA línea. Con la misma altura mínima en el "+" y en la caja, esa
   alineación por abajo es además centrado exacto cuando hay una sola línea: no hace
   falta ningún desplazamiento a mano, y el ajuste sobrevive a que cambie la tipografía. */
.chat-caja .chat-icono, .chat-caja .chat-enviar { width: 30px; height: 30px; }
.chat-caja .chat-icono svg { width: 17px; height: 17px; }
.chat-caja .chat-enviar svg { width: 15px; height: 15px; }
.msj-mas { min-height: 39px; display: flex; align-items: center; }
.msj-mas .chat-icono { width: 32px; height: 32px; }
.msj-mas .chat-icono svg { width: 17px; height: 17px; }

/* Último morado de la visual de conversación: el ancla de tema sobre el compositor. */
.mision-contexto.ancla { border-left-color: rgba(255, 255, 255, .55); }
.mision-contexto.ancla .mision-etiqueta { color: var(--texto-2); }

/* ═══ Crear un canal: una hoja, no un formulario ═══
   Nada de cuadros: el nombre se escribe como se escribe un título en una hoja en blanco,
   y los colaboradores son caras que se encienden al tocarlas — quién está dentro se ve de
   un vistazo, sin fichas ni casillas que repitan la misma información. La única salida es
   la ✕ de la esquina: un "Cancelar" al lado de "Crear" solo compite con él. */
.modal-desnudo { background: var(--velo-hoja); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); }
.canal-hoja {
  max-width: 560px; padding: 34px 38px 30px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 0; border-radius: 26px;
  position: relative;
}
.canal-cerrar {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; color: var(--texto-suave);
}
.canal-cerrar svg { width: 16px; height: 16px; }
.canal-cerrar:hover { background: var(--realce); color: var(--texto); }

.canal-titulo, .canal-subtitulo, .canal-buscar {
  display: block; width: 100%; background: none; border: 0; outline: none;
  color: var(--texto); font-family: inherit; padding: 0;
}
.canal-titulo { font-size: 27px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; }
.canal-subtitulo { margin-top: 8px; font-size: 14px; color: var(--texto-2); }
.canal-titulo::placeholder, .canal-subtitulo::placeholder, .canal-buscar::placeholder { color: var(--texto-suave); }

.canal-rotulo {
  margin: 30px 0 14px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px; color: var(--texto-suave);
}
.canal-buscar { margin: -6px 0 14px; font-size: 13px; }
.canal-vacio { margin: 4px 0 0; letter-spacing: 1.2px; }

/* Las caras: apagadas hasta que las eliges */
.canal-caras { display: flex; flex-wrap: wrap; gap: 20px 22px; }
.canal-cara {
  width: 62px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--texto-suave);
  transition: color var(--rapido, .18s) var(--ease, ease);
}
.canal-cara input { display: none; }
.canal-cara .chat-agente-avatar {
  width: 50px; height: 50px; font-size: 18px;
  opacity: .34; filter: grayscale(1);
  transition: opacity var(--rapido, .18s) var(--ease, ease), filter var(--rapido, .18s) var(--ease, ease), box-shadow var(--rapido, .18s) var(--ease, ease), transform var(--rapido, .18s) var(--ease, ease);
}
.canal-cara > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal-cara .cara-nombre { line-height: 1.25; }
.canal-cara .cara-cargo { margin-top: -5px; font-size: 10px; color: var(--texto-suave); opacity: .75; letter-spacing: .01em; }
.canal-cara.elegir-chat:hover .cara-cargo { opacity: 1; }
.canal-cara:hover .chat-agente-avatar { opacity: .6; }
.canal-cara:hover { color: var(--texto-2); }
.canal-cara:has(input:checked) { color: var(--texto); }
.canal-cara:has(input:checked) .chat-agente-avatar {
  opacity: 1; filter: none;
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--texto) 85%, transparent);
}
.canal-cara:has(input:checked):active .chat-agente-avatar { transform: scale(.94); }
.canal-cara:focus-within .chat-agente-avatar { outline: 2px solid color-mix(in srgb, var(--texto) 55%, transparent); outline-offset: 3px; }

/* ═══ SEGUIR UNA TAREA ENTRE VARIOS ═══ (regla del director, 16-sep-2026)
   La hoja reusa las CARAS de crear un canal —el mismo gesto: se encienden al tocarlas— y añade
   arriba los grupos que ya existen, porque lo normal es llevarla a uno que ya está funcionando.
   Aquí la elección no va en un <input> escondido sino en una clase: la hoja se pinta de una vez. */
.canal-cara.elegida { color: var(--texto); }
.canal-cara.elegida .chat-agente-avatar {
  opacity: 1; filter: none;
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--texto) 85%, transparent);
}
/* Lo que cuesta (o deja de costar) despedir, dicho con fecha en el propio diálogo. */
.despido-cobro { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }
/* El instructivo reabierto desde Configuración: la misma medida que tiene dentro del asistente. */
.hoja-tutorial { max-width: min(980px, calc(100vw - 48px)); width: 100%; padding: 24px; }
.hoja-tutorial-cuerpo { min-height: 420px; }
.hoja-compartir { max-width: 560px; width: min(560px, 92vw); max-height: min(86vh, 760px); overflow-y: auto; scrollbar-width: thin; }
.hoja-compartir h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.hoja-compartir .config-sub { margin: 22px 0 10px; }
/* Los grupos, como los favoritos de Mensajes (16-sep-2026): el racimo de caras con el nombre debajo, en rejilla,
   con su buscador encima. La rejilla se desplaza sola si hay muchos, sin empujar el grupo nuevo fuera de vista. */
.hoja-compartir .comp-buscar { margin: 0 0 12px; }
.comp-grupos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 16px 6px; justify-items: center;
  max-height: 232px; overflow-y: auto; scrollbar-width: thin; padding: 6px 2px 4px;
}
.comp-grupo-cara[hidden] { display: none; }
.comp-grupo-cara:focus-visible { outline: none; }
.comp-grupo-cara:focus-visible .msj-fijado-nombre { color: var(--texto); text-decoration: underline; }
.comp-sin-grupos { margin: 4px 0 0; }
.comp-nombre {
  width: 100%; margin-bottom: 18px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--realce); color: var(--texto); font: inherit; font-size: 14px;
}
.comp-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
/* El botón de compartir en la barra de la ficha: icono y palabra, como sus vecinos. */

.canal-pie { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.canal-pista { margin: 0; flex: 1; min-width: 0; font-size: 12px; color: var(--texto-suave); }
.canal-crear {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 16px; border: 0; border-radius: 999px;
  background: var(--contraste); color: var(--contraste-texto); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity var(--rapido, .18s) var(--ease, ease), transform .1s;
}
.canal-crear svg { width: 15px; height: 15px; }
.canal-crear:hover:not(:disabled) { opacity: .86; }
.canal-crear:active:not(:disabled) { transform: scale(.96); }
.canal-crear:disabled { opacity: .2; cursor: not-allowed; }
@media (max-width: 600px) { .canal-hoja { padding: 30px 22px 24px; } .canal-caras { gap: 16px; } }

/* ═══ EL VAULT (regla del director, 16-oct-2026) ═══
   Configuración → Vault: las contraseñas del espacio agrupadas por sitio. Cada entrada es una ficha de relleno tenue,
   sin borde ni sombra, con su enlace, su usuario, la contraseña tapada y un ojo que la pide al servidor (y la vuelve a
   tapar), y debajo las caras de quién puede usarla: se encienden al tocarlas, como al crear un grupo. */
.vault-lista { max-width: 860px; }
.vault-grupo + .vault-grupo { margin-top: 26px; }
.vault-sitio {
  margin: 4px 0 10px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px; color: var(--texto-suave);
  overflow-wrap: anywhere;
}
.vault-entrada { background: var(--panel-2); border-radius: 18px; padding: 16px 18px 14px; display: grid; gap: 12px; }
.vault-entrada + .vault-entrada { margin-top: 10px; }
.vault-cabeza { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vault-cabeza b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.1px; overflow-wrap: anywhere; }
.vault-acciones { display: flex; gap: 6px; flex: none; }
.vault-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 13px; }
.vault-datos dt { color: var(--texto-suave); }
.vault-datos dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--texto); overflow-wrap: anywhere; }
.vault-datos a { color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.vault-datos a:hover { text-decoration: underline; }
.vault-secreto { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.vault-secreto.tapado { letter-spacing: .18em; color: var(--texto-2); user-select: none; }
.vault-ver {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: transparent; color: var(--texto-suave); cursor: pointer;
}
.vault-ver svg { width: 15px; height: 15px; }
.vault-ver:hover, .vault-ver[aria-pressed="true"] { color: var(--texto); background: var(--realce); }
.vault-ver:disabled { opacity: .4; cursor: wait; }
.vault-pie { font-size: 11.5px; color: var(--texto-suave); }
.vault-sesion { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--texto-2); }
.vault-quien { display: grid; gap: 8px; }
.vault-quien-rotulo { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--texto-suave); }
.vault-quien-rotulo span { flex: 1; min-width: 0; }
.vault-caras.canal-caras { gap: 12px 14px; }
.vault-caras .canal-cara { width: 50px; font-size: 10.5px; gap: 5px; }
.vault-caras .canal-cara .chat-agente-avatar { width: 34px; height: 34px; font-size: 13px; }
.vault-caras .canal-cara.elegida .chat-agente-avatar { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 3.5px var(--texto-2); }
#vault-caras .canal-cara.elegida .chat-agente-avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--texto-2); }
.vault-todos {
  padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--realce); color: var(--texto-suave); font: inherit; font-size: 11.5px;
}
.vault-todos[aria-pressed="true"] { background: var(--contraste); color: var(--contraste-texto); font-weight: 600; }
.vault-todos:hover:not([aria-pressed="true"]) { background: var(--realce-fuerte); color: var(--texto); }
.vault-todos-fila { margin: -4px 0 14px; }
.vault-vacio { padding: 26px 0 8px; font-size: 13px; color: var(--texto-suave); line-height: 1.6; }

/* La hoja de guardar o cambiar una clave: los campos son líneas de relleno tenue, sin cuadros. */
.vault-hoja { max-width: 560px; }
.vault-subtitulo { color: var(--texto-suave); }
.vault-campos { display: grid; gap: 10px; margin-top: 24px; }
.vault-campo { display: grid; gap: 5px; font-size: 11.5px; color: var(--texto-suave); }
.vault-campo-caja { position: relative; display: block; }
.vault-campo input {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; outline: none;
  background: var(--realce); color: var(--texto); font: inherit; font-size: 14px;
}
.vault-campo input:focus { background: var(--realce-fuerte); }
.vault-campo input::placeholder { color: var(--texto-suave); opacity: .7; }
.vault-campo-caja input { padding-right: 42px; }
.vault-campo-caja .tpop-ver-clave { right: 6px; }
.vault-error { margin: 12px 0 0; font-size: 12px; color: var(--peligro); }
@media (max-width: 600px) {
  .vault-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vault-datos dd { margin-bottom: 6px; }
}

/* ═══ LOS MEDIOS DE PAGO DEL VAULT (16-oct-2026) ═══
   Las mismas fichas de relleno tenue del Vault; sin bordes ni sombras. El marco de la tarjeta (/tarjeta) no tiene fondo
   propio: dentro, cada campo del proveedor se separa por su relleno, como los de la hoja. */
.pagos-titulo { margin: 30px 0 10px; font-size: 13px; font-weight: 600; color: var(--texto); letter-spacing: -.1px; }
.pagos-falta { margin-bottom: 12px; }
.pago-marca { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); background: var(--realce); border-radius: 6px; padding: 3px 7px; }
.pago-numero { font-family: var(--font-mono); letter-spacing: .08em; }
.pago-vencida { font-size: 11px; color: var(--peligro); margin-left: 6px; }
.pagos-llaves, .pagos-ejecucion, .pagos-compras { max-width: 860px; display: grid; gap: 8px; }
.pago-llave { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border-radius: 14px; padding: 10px 14px; font-size: 13px; }
.pago-llave-nombre { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pago-llave-estado { flex: 1; min-width: 0; color: var(--texto-suave); font-size: 12px; }
.pago-llave-accion { margin-top: 2px; }
.pago-compra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: var(--panel-2); border-radius: 12px; padding: 9px 14px; font-size: 12.5px; }
.pago-compra span { color: var(--texto-2); }
.pago-compra-estado { margin-left: auto; color: var(--texto-suave) !important; font-size: 11.5px; }
.pago-compra-estado.autorizada, .pago-compra-estado.en_uso { color: var(--ok) !important; }
.tarjeta-marco-caja { display: block; }
.tarjeta-marco { display: block; width: 100%; height: 140px; border: 0; background: transparent; }   /* lo ajusta su alto (tarjeta.js) */
.tarjeta-marco.corto { height: 70px; }
.compra-titulo { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.3px; }
.compra-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 22px 0 6px; font-size: 13.5px; background: var(--realce); border-radius: 16px; padding: 14px 16px; }
.compra-datos dt { color: var(--texto-suave); }
.compra-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--texto); }
.compra-datos a { color: var(--texto); }
.compra-datos.en-tarjeta { margin: 8px 0 10px; font-size: 12.5px; padding: 10px 12px; gap: 5px 14px; border-radius: 12px; }
.compra-cvv-ayuda { margin: 14px 0 0; }
.compra-estado { color: var(--texto-suave); }
#modal-tarjeta .canal-cara.elegida .chat-agente-avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--texto-2); }
@media (max-width: 600px) {
  .compra-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .compra-datos dd { margin-bottom: 6px; }
  .pago-llave { flex-wrap: wrap; }
}

/* ═══ [hidden] gana siempre ═══
   Cualquier regla nuestra con `display` (flex, grid, block…) le gana al `[hidden]` del
   navegador, así que un `el.hidden = true` dejaba el elemento a la vista y el fallo solo
   se notaba mirando la pantalla: la propiedad decía "oculto" y el ojo veía lo contrario.
   Se arregla UNA vez aquí en vez de un parche por elemento. */
[hidden] { display: none !important; }

/* ═══ Categorías del catálogo de apps: fichas, no desplegable ═══
   Con un menú hay que abrirlo para saber qué hay dentro, y aquí lo que se hace es
   curiosear: las categorías se ven todas a la vez y se elige tocando una. */
.cat-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.cat-ficha {
  padding: 6px 15px 7px; border-radius: 10px;
  border: 1px solid var(--borde); background: none;
  color: var(--texto-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: color var(--rapido, .18s) var(--ease, ease), border-color var(--rapido, .18s) var(--ease, ease), background var(--rapido, .18s) var(--ease, ease);
}
.cat-ficha:hover { color: var(--texto); background: var(--realce); }
.cat-ficha.activa {
  background: var(--panel-2); border-color: transparent;
  color: var(--texto); font-weight: 600;
}
.cat-ficha:active { transform: scale(.97); }
/* Dos renglones dentro de la píldora: el nombre, y debajo su área en pequeño. El bloque va
   centrado y con la misma altura en todas —“Todo” incluida— para que la fila quede a ras. */
.cat-ficha b { display: block; font-weight: inherit; line-height: 1.3; }
.cat-ficha i {
  display: block; font-style: normal; font-size: 10px; line-height: 1.25;
  color: var(--texto-suave); opacity: .8; letter-spacing: .02em;
}
.cat-ficha:hover i, .cat-ficha.activa i { opacity: 1; }
.cat-ficha.activa i { color: var(--texto-2); font-weight: 400; }
.cat-mas { color: var(--texto-suave); border-style: dashed; }
.cat-mas:hover { color: var(--texto); }

/* ═══ Los globos de una misma respuesta salen uno tras otro ═══
   Cuando un colaborador contesta en varios mensajes, aparecían los tres de golpe: se leía
   como un volcado, no como alguien escribiendo. Cada globo nuevo lleva su retraso y la
   animación de entrada ya usa `backwards`, así que hasta su turno ni se ve. */
.burbuja.nueva { animation-delay: var(--retraso, 0ms); }

/* ═══ La barra sobre el vidrio: nada de cuadros negros ═══
   El menú vive DIRECTO sobre el vidrio; pintar un hover con `--panel` (negro casi opaco)
   dibujaba un rectángulo negro encima del wallpaper. Todo lo que se resalta aquí es una
   cápsula translúcida blanca, como la selección — la misma decisión que ya valía para el
   elemento activo. Y el texto en reposo es BLANCO: la barra ya no tiene renglones grises. */
.nav-item { color: var(--texto); }
.nav-item svg { color: var(--texto); opacity: .82; }
.nav-item:hover { background: var(--realce); color: var(--texto); }
.nav-item:hover svg { opacity: 1; }
.nav-item.activo svg { opacity: 1; }
.org-switch:hover { background: var(--realce); border-color: transparent; }
.plegar-btn { color: var(--texto); opacity: .7; }
.plegar-btn:hover { background: var(--realce); border-color: transparent; opacity: 1; }

/* ═══ Cabecera de Tareas: fichas de filtro + botón de chat en vidrio ═══
   Tareas es UNA sección, no la de un colaborador: en vez de su nombre, fichas —“Todo”
   primero— que acotan el tablero a lo que creó cada quien. Se pueden elegir varias. */
.colab-filtros { margin: 0; flex: 1; min-width: 0; }
.colab-cabeza { align-items: flex-start; gap: 16px; }
.colab-acciones { flex: none; }

/* El botón de chat: base de vidrio opaco, sin texto. Es un gesto, no un formulario. */
.btn-vidrio {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--texto);
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background var(--rapido, .18s) var(--ease, ease), transform .1s;
}
.btn-vidrio svg { width: 19px; height: 19px; }
.btn-vidrio:hover { background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); }
.btn-vidrio:active { transform: scale(.94); }

/* En el diálogo de "¿con quién hablas?" las caras están todas encendidas: no se eligen
   varias, se elige una — apagarlas ahí sería copiar un gesto que aquí no aplica. */
.canal-cara.elegir-chat .chat-agente-avatar { opacity: 1; filter: none; }
.canal-cara.elegir-chat { color: var(--texto-2); }
.canal-cara.elegir-chat:hover { color: var(--texto); }
.canal-cara.elegir-chat:hover .chat-agente-avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--texto) 70%, transparent); }

/* La conversación de Mensajes, mudada al panel de Tareas: ancho de teléfono y a su anchura,
   no a la de tres columnas. Es el MISMO nodo, así que todo lo que se arregle en Mensajes
   llega aquí solo. Lo viejo del panel (encabezado, compositor propio) ya no se pinta. */
.panel-chat .msj-conv-estrecha { position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.panel-chat .msj-conv-estrecha .msj-hilo { padding: 76px 14px 78px; }
.panel-chat .msj-conv-estrecha .msj-hilo .burbuja { max-width: 84%; }
.panel-chat .msj-conv-estrecha .msj-entrada { padding: 8px 10px 12px; }
.panel-chat .msj-conv-estrecha .msj-conv-cabeza { padding-left: 12px; padding-right: 12px; }
.panel-chat:has(.msj-conv-estrecha) .panel-chat-cabeza .chat-encabezado,
.panel-chat:has(.msj-conv-estrecha) .mision-contexto,
.panel-chat:has(.msj-conv-estrecha) #chat-mensajes,
.panel-chat:has(.msj-conv-estrecha) #chat-form,
.panel-chat:has(.msj-conv-estrecha) .chat-pista { display: none; }
.panel-chat:has(.msj-conv-estrecha) .panel-chat-cabeza {
  position: absolute; top: 8px; right: 10px; z-index: 7; padding: 0; border: 0; background: none;
}

/* Máquina, rutinas y lo aprendido, en la columna del chat directo (antes eran pestañas
   sueltas de la sección de Tareas). En un grupo no salen: son de una persona. */
/* Máquina, Rutinas y Tareas se pintan aquí, no en `.ficha-panel`: son la ÚNICA cosa de su
   pestaña, así que no llevan separador ni margen de arriba. La línea y los 40 px estaban
   pensados para cuando iban DEBAJO de otro contenido, y desde que son pestañas propias solo
   dejaban un hueco vacío bajo el carril. El margen queda igual que en Datos. */
.msj-lado { margin-top: 0; padding-top: 0; border-top: 0; }
.msj-lado.oculto { display: none; }
.msj-lado h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--texto-suave); font-weight: 600; margin: 0 6px 12px; }
/* 16:9, la proporción de su pantalla (1280×720): en 16:10 su escritorio dejaba una franja negra y, al cerrar la vista
   en grande, la foto que vuelve no casaba con la miniatura (4-oct-2026). */
.msj-lado .maquina-pantalla { min-height: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.msj-lado .fila-botones { flex-wrap: wrap; gap: 6px; }
.msj-lado .btn.mini { font-size: 11.5px; padding: 5px 9px; }
.msj-miembros { display: flex; flex-direction: column; }

/* El enlace para CREAR la cuenta, cuando el colaborador sabe que el director aún no la
   tiene. Va antes del botón de conectar: primero existe la cuenta, luego se conecta. */
.tpop-crear-cuenta { text-decoration: none; }

/* ═══ El fondo y la barra en modo claro ═══
   El wallpaper del navegador y el riel viven FUERA de la tarjeta: no heredan su fondo, así
   que sin esto quedaba una tarjeta blanca flotando sobre un cielo nocturno y un menú con
   texto oscuro sobre azul marino — ilegible justo donde más se mira. */
:root[data-tema="claro"] body::before {
  background:
    radial-gradient(120% 90% at 72% -22%, #dbe6ff 0%, rgba(219, 230, 255, .5) 34%, transparent 58%),
    radial-gradient(95% 75% at -12% 112%, #e6ecfa 0%, transparent 55%),
    radial-gradient(55% 42% at 88% 104%, rgba(120, 160, 255, .22), transparent 62%),
    linear-gradient(180deg, #f2f5fc 0%, #e8edf8 100%);
}
:root[data-tema="claro"] body::after {
  background: linear-gradient(90deg, transparent 4%, rgba(120, 160, 255, .2) 38%, rgba(150, 120, 255, .12) 62%, transparent 96%);
}

@media (prefers-color-scheme: light) {
:root[data-tema="sistema"] body::before {
  background:
    radial-gradient(120% 90% at 72% -22%, #dbe6ff 0%, rgba(219, 230, 255, .5) 34%, transparent 58%),
    radial-gradient(95% 75% at -12% 112%, #e6ecfa 0%, transparent 55%),
    radial-gradient(55% 42% at 88% 104%, rgba(120, 160, 255, .22), transparent 62%),
    linear-gradient(180deg, #f2f5fc 0%, #e8edf8 100%);
}
:root[data-tema="sistema"] body::after {
  background: linear-gradient(90deg, transparent 4%, rgba(120, 160, 255, .2) 38%, rgba(150, 120, 255, .12) 62%, transparent 96%);
}
}

/* ═══ Ajustes → General: que se lea como una lista de ajustes, no como cajas apiladas ═══
   Cada bloque era un `.panel` con su propio <h2> dentro, así que había dos jerarquías de
   título compitiendo y un borde grueso alrededor de cada grupo. Aquí el grupo se separa
   por AIRE y un rótulo pequeño, como en los ajustes del sistema: menos marco, más orden. */
.config-grupo[data-grupo="general"] .panel {
  background: none; border: 0; border-radius: 0; padding: 0;
  margin: 30px 0 0; border-top: 1px solid var(--borde); padding-top: 22px;
}
.config-grupo[data-grupo="general"] .panel:first-of-type { border-top: 0; padding-top: 6px; margin-top: 14px; }
.config-grupo[data-grupo="general"] .panel .config-cabeza h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--texto-suave);
}
.config-grupo[data-grupo="general"] .panel > .ayuda { margin: 6px 0 14px; max-width: 62ch; }
.config-grupo[data-grupo="general"] .ajuste-fila {
  padding: 13px 0; border-bottom: 1px solid var(--borde); gap: 24px;
}
.config-grupo[data-grupo="general"] .ajuste-fila:last-of-type { border-bottom: 0; }
.config-grupo[data-grupo="general"] .ajuste-nombre { font-size: 14px; }
.config-grupo[data-grupo="general"] .ajuste-pista { margin-top: 2px; }
/* El formulario del reporte: campos con aire y los botones alineados a la derecha */
#form-reporte { gap: 10px; }
#form-reporte .fila-botones { justify-content: flex-end; }

/* ═══ Tareas: la tarjeta no hace scroll, lo hacen las columnas ═══
   La sección crecía hacia abajo y el scroll lo llevaba la TARJETA entera, así que el chat
   lateral —que es alto por naturaleza— arrastraba toda la vista y recortaba lo de arriba.
   Aquí la sección se ciñe a la altura de la tarjeta y el desbordamiento vive donde tiene
   sentido: dentro de cada columna del tablero y dentro del chat.
   `overflow: clip` en los dos ejes (no `hidden`) para no crear un contenedor de scroll: con
   `auto` en uno y `visible` en el otro, CSS convierte el segundo en `auto` y vuelve el
   problema. Solo aplica cuando esta sección está a la vista; las demás siguen igual. */
body:has(#seccion-trabajo.visible) .app-main { overflow: clip; }
#seccion-trabajo.visible { display: flex; flex-direction: column; min-height: 0; height: 100%; }
#seccion-trabajo .trabajo-layout { flex: 1; min-height: 0; align-items: stretch; }
#seccion-trabajo .colaborador { display: flex; flex-direction: column; min-height: 0; }
#seccion-trabajo .colab-panel.activo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#seccion-trabajo .kanban { flex: 1; min-height: 0; align-items: stretch; }
#seccion-trabajo .kanban-col { display: flex; flex-direction: column; min-height: 0; }
#seccion-trabajo .kanban-cards { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
#seccion-trabajo .panel-chat { min-height: 0; }
/* El archivo sí es una lista larga: ahí el scroll va dentro del panel */
#seccion-trabajo .colab-panel[data-panel="archivo"].activo { overflow-y: auto; scrollbar-width: thin; }

/* ═══ Ficha del colaborador: la tarjeta de contacto de Mensajes ═══
   Referencia del director: cómo se ve un contacto en Mensajes de macOS. La foto manda, el
   nombre debajo, y una fila de círculos para escribirle por fuera de CODX. Las pestañas
   recogen lo compartido EN ESE hilo, que es lo que uno busca cuando abre esta columna. */
.ficha-contacto { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 18px; text-align: center; }
/* La clase la pone avatarHtml y REEMPLAZA a .chat-agente-avatar, así que aquí va el círculo
   entero (fondo e inicial incluidos), no solo el tamaño. */
.ficha-foto {
  width: 78px; height: 78px; border-radius: 50%; margin-bottom: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 30px;
  background: var(--contraste); color: var(--contraste-texto);
}
.ficha-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ficha-contacto > b { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.ficha-contacto > span { font-size: 12.5px; color: var(--texto-suave); }

.ficha-circulos { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
/* Un colaborador sin línea todavía: el círculo se queda, apagado. Cuando el número se asigne solo,
   se enciende sin que la ficha cambie de forma. */
.ficha-circulo.sin-linea { opacity: .35; cursor: default; }
.ficha-circulo.sin-linea:hover { background: var(--realce-fuerte); color: var(--texto); transform: none; }
/* Despedir vive entre los círculos, no como un botón rojo a media ficha. */
.ficha-circulo.peligro { color: var(--estado-espera); }
/* Al pasar el cursor se resalta como los demás círculos (regla del director, 16-sep-2026: “el color
   de resalte debe ser blanco también, o su equivalente en tema claro”): el rojo es del icono, no del
   gesto. Por eso aquí no se define un hover propio. */
.ficha-circulo {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--realce-fuerte); color: var(--texto); border: 0; cursor: pointer;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.ficha-circulo svg { width: 19px; height: 19px; }
.ficha-circulo:hover { background: var(--contraste); color: var(--contraste-texto); transform: translateY(-1px); }
.ficha-circulo:active { transform: scale(.94); }
/* DETENER (regla del director, 3-oct-2026: “un botón dentro de la tarjeta del colaborador que permita detenerlo en
   lo que esté haciendo”): desde el 7-oct-2026 es `.ficha-accion.detener`, abajo con la cabecera como la de iOS. */

/* ═══ LA PARTE DE ARRIBA DE SU FICHA, COMO EN EL iPHONE (regla del director, 7-oct-2026: “quiero que en el app web y
   dmg se vea así la parte superior de la ficha del empleado”, con la ficha de la app de iOS) ═══
   Centrado y de arriba abajo: su foto grande con el punto verde de “en línea” en la esquina, su nombre en negrita con
   un lápiz en su círculo al lado, su cargo, en qué está ahora mismo (verde, solo mientras trabaja), su número y una
   fila de círculos grandes con su nombre debajo: WhatsApp e iMessage con el logo de su app, Detener y Despedir. Las
   proporciones son las de iOS (foto ≈ 2,2 veces un círculo) llevadas a los 292 px de esta columna, donde caben los
   cuatro con su nombre. Sin sombras ni bordes: relleno, y anillos solo donde dicen algo (el verde de Detener, el
   recorte del punto contra la foto). Solo `.de-persona`: la ficha de un grupo y las capturas de la web siguen igual. */
.ficha-contacto.de-persona { gap: 0; padding: 2px 0 18px; }
.ficha-foto-caja { position: relative; display: block; width: 120px; height: 120px; margin-bottom: 12px; flex: none; }
.ficha-foto-caja > .ficha-foto { width: 100%; height: 100%; margin: 0; font-size: 46px; }
/* El punto de “en línea”, en el borde del círculo a las cinco menos cuarto, recortado contra la foto con el color de
   la columna (como el de la lista de chats). */
.ficha-presencia {
  position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3.5px var(--fondo);
}
.ficha-presencia[hidden] { display: none; }
.ficha-nombre-fila { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 30px; }
.ficha-nombre-fila > b { min-width: 0; font-size: 21px; font-weight: 700; letter-spacing: -.35px; line-height: 1.2; color: var(--texto); overflow-wrap: anywhere; }
.ficha-lapiz {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--realce); color: var(--texto-suave);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ficha-lapiz svg { width: 12px; height: 12px; }
.ficha-lapiz:hover, .ficha-lapiz:focus-visible { background: var(--realce-fuerte); color: var(--texto); outline: none; }
.ficha-contacto.de-persona > .ficha-cargo { margin-top: 3px; font-size: 13.5px; color: var(--texto-2); }
/* La ficha de una PERSONA del equipo (un chat entre dos personas, 14-oct-2026): debajo de su nombre, lo que hace
   distinto a ese chat. Sin renglón de “en qué está” ni círculos: con ella se habla aquí. */
.ficha-contacto.de-persona > .ficha-privado { margin-top: 10px; max-width: 250px; font-size: 12px; line-height: 1.45; color: var(--texto-suave); }
/* En qué está ahora. Guarda su renglón aunque esté vacío: que empiece o deje de trabajar no mueve la ficha. */
.ficha-contacto.de-persona > .ficha-ahora {
  display: block; height: 17px; margin-top: 5px; max-width: 100%;
  font-size: 12px; line-height: 17px; overflow: hidden;
}
.ficha-ahora-en { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: var(--ok); font-weight: 500; }
.ficha-ahora-en > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.ficha-ahora-en > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-ahora-pausa { display: block; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-ahora-en[hidden], .ficha-ahora-pausa[hidden] { display: none; }
.ficha-contacto.de-persona > .ficha-numero { margin-top: 2px; font-size: 13.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ficha-contacto.de-persona .ficha-circulos {
  display: grid; grid-auto-flow: column; grid-auto-columns: 56px; justify-content: center;
  column-gap: 6px; margin-top: 16px;
}
.ficha-accion {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  padding: 0; border: 0; background: none; color: var(--texto); font: inherit; text-decoration: none; cursor: pointer;
}
.ficha-accion > .ficha-circulo { width: 42px; height: 42px; }
.ficha-accion > .ficha-circulo svg { width: 17px; height: 17px; }
.ficha-accion-rotulo { font-size: 10.5px; line-height: 1.2; color: var(--texto-suave); white-space: nowrap; }
.ficha-accion:hover > .ficha-circulo:not(.logo), .ficha-accion:focus-visible > .ficha-circulo:not(.logo) {
  background: var(--contraste); color: var(--contraste-texto); transform: translateY(-1px);
}
.ficha-accion:focus-visible { outline: none; }
.ficha-accion:active > .ficha-circulo { transform: scale(.94); }
/* WhatsApp y Mensajes: el logo de su app, blanco sobre su verde (los mismos del primer día, `.onb-canal-logo`).
   Más pequeños desde el 7-oct-2026 (regla del director: “así, pero más pequeño”): 42 px, con logos e iconos en proporción. */
.ficha-circulo.logo { color: #fff; transition: transform .15s var(--ease), filter .15s var(--ease), opacity .15s var(--ease); }
.ficha-circulo.logo.whatsapp { background: linear-gradient(160deg, #5ffc7b, #28d146); }
.ficha-circulo.logo.imessage { background: linear-gradient(160deg, #6ce36c, #1fc11f); }
.ficha-accion > .ficha-circulo.logo.whatsapp svg { width: 24px; height: 24px; }
.ficha-accion > .ficha-circulo.logo.imessage svg { width: 28px; height: 28px; }
.ficha-accion:hover > .ficha-circulo.logo { transform: translateY(-1px); filter: brightness(1.05); }
/* Sin número todavía: el mismo círculo, en gris y tenue, y sin gesto. */
.ficha-accion.sin-linea { cursor: default; }
.ficha-accion.sin-linea > .ficha-circulo.logo, .ficha-accion.sin-linea:hover > .ficha-circulo.logo { opacity: .45; filter: grayscale(1); transform: none; }
/* Detener: el aro verde mientras trabaja; quieto, apagado entero (círculo y nombre), como en iOS. */
.ficha-accion.detener.trabajando > .ficha-circulo { box-shadow: inset 0 0 0 2px var(--ok); }
.ficha-accion.detener > .ficha-circulo svg { width: 22px; height: 22px; }   /* el cuadrado ≈ 30 % del círculo, como en iOS */
.ficha-accion.detener.apagado { cursor: default; }
.ficha-accion.detener.apagado > * { opacity: .38; }
.ficha-accion.detener.apagado:hover > .ficha-circulo { background: var(--realce-fuerte); color: var(--texto); transform: none; }
.ficha-accion.detener.deteniendo { cursor: progress; }
.ficha-accion.detener.deteniendo > * { opacity: .55; }
/* Despedir: la persona con el “menos”, en rojo. El rojo es del icono, no del gesto: al pasar el cursor se resalta
   como los demás (regla del director, 16-sep-2026). */
.ficha-accion.peligro > .ficha-circulo { color: var(--estado-espera); }

/* Las pestañas se deslizan SOLAS. Antes desbordaban su columna y el que se movía era el
   panel entero: al arrastrar se iba también la foto del colaborador. El scroll vive aquí
   (y sin barra a la vista), y la columna deja de moverse en horizontal. */
/* Las siete no caben en 320 px, así que se DESLIZAN — pero la fila dice que hay más:
   el borde se desvanece del lado que sigue y ahí aparece su flecha. Sin eso, una pestaña
   detrás de un scroll invisible es una pestaña que no existe. */
.ficha-tabs { position: relative; margin: 0 0 14px; }
.ficha-pestanas {
  /* Sin recuadro de fondo: las pestañas van sueltas y solo la elegida lleva su píldora */
  display: flex; gap: 2px; padding: 2px 0;
  overflow-x: auto; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ficha-pestanas::-webkit-scrollbar { display: none; }
.msj-miembros { overflow-x: hidden; }
/* El contenido conserva su ancho mientras la pista se cierra: así se DESLIZA hacia fuera en
   vez de reflowear (los textos se reordenarían en cada cuadro y se vería un temblor). */
.msj-miembros > * { width: 292px; flex: none; }
/* El desvanecido va donde HAY más, nunca en un extremo que ya se acabó */
.ficha-tabs.hay-der .ficha-pestanas {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
}
.ficha-tabs.hay-izq .ficha-pestanas {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 38px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 38px), transparent);
}
.ficha-tabs.hay-izq.hay-der .ficha-pestanas {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38px, #000 calc(100% - 38px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 38px, #000 calc(100% - 38px), transparent);
}
.tabs-flecha {
  position: absolute; top: 0; bottom: 0; width: 26px; z-index: 2;
  display: none; place-items: center; padding: 0;
  border: 0; background: none; color: var(--texto-2); cursor: pointer;
}
.tabs-flecha svg { width: 13px; height: 13px; }
.tabs-flecha:hover { color: var(--texto); }
.tabs-flecha.izq { left: 0; }
.tabs-flecha.der { right: 0; }
.ficha-tabs.hay-izq .tabs-flecha.izq, .ficha-tabs.hay-der .tabs-flecha.der { display: grid; }

/* La ✕ de la ficha: la única salida de esta columna. Arriba a la IZQUIERDA y en su círculo de relleno tenue, como la
   ✕ de la ficha en el iPhone (7-oct-2026, “quiero que en el app web y dmg se vea así la parte superior de la ficha”). */
/* Pegada arriba aunque la columna se desplace: con las fotos cargadas esto baja mucho y
   una ✕ que se va con el scroll deja de ser una salida. El margen negativo evita que
   ocupe una franja propia. */
.ficha-cerrar {
  position: sticky; top: 0; z-index: 3; align-self: flex-start; margin-bottom: -30px;
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--realce); color: var(--texto-2); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ficha-cerrar svg { width: 13px; height: 13px; }
.ficha-cerrar:hover { background: var(--realce-fuerte); color: var(--texto); }
/* La foto de la cabecera ES el botón que la vuelve a abrir */
.msj-cab-centro { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* `flex: none` y NO `flex: 1`: con `1` los botones se encogen hasta caber en la columna,
   así que la fila nunca desborda y no hay nada que deslizar — el texto se apretaba y se
   metía debajo de la flecha. Cada pestaña mide lo que mide su palabra y la fila se desliza. */
.ficha-pestanas button {
  flex: none; white-space: nowrap;
  padding: 6px 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--texto-suave); font-size: 11.5px; font-weight: 600;
}
.ficha-pestanas button:hover { color: var(--texto); }
/* EL ÓVALO BLANCO ES UNA PIEZA APARTE, y viaja (regla del director, 15-sep-2026: “que se sienta
   como deslizar el óvalo blanco de sección, una animación suave de un lado a otro”). Va debajo de
   las palabras, dentro de la tira que se desliza —así se desplaza con ella—, y app.js le dice dónde
   ponerse (`--ovalo-x`, `--ovalo-w`, en acomodarCarril). Cambia de posición y de ancho a la vez,
   con un muelle corto; la palabra elegida se oscurece cuando el óvalo ya casi llegó, para que no
   se lea un instante oscura sobre el fondo oscuro. */
.ficha-pestanas { position: relative; }
.ficha-ovalo {
  position: absolute; top: 2px; bottom: 2px; left: 0; z-index: 0;
  width: var(--ovalo-w, 0px); transform: translateX(var(--ovalo-x, 0px));
  border-radius: 999px; background: var(--contraste); pointer-events: none;
  opacity: 0;
  transition: transform 440ms cubic-bezier(.3, 1.15, .42, 1), width 440ms cubic-bezier(.3, 1.15, .42, 1);
}
.ficha-ovalo.listo { opacity: 1; }
.ficha-pestanas button { position: relative; z-index: 1; transition: color 180ms var(--ease, ease); }
.ficha-pestanas button.sel { background: transparent; color: var(--contraste-texto); }
.ficha-pestanas.viajando button.sel { transition-delay: 230ms; }
@media (prefers-reduced-motion: reduce) {
  .ficha-ovalo, .ficha-pestanas button { transition: none; }
}

/* Los 60 px de alto reservan sitio para el contenido compartido; vacío —que es lo que pasa
   en las pestañas que se pintan aparte— era un hueco negro bajo el carril de pestañas. */
.ficha-panel { min-height: 60px; }
/* Una pestaña que todavía no tiene contenido lo dice, centrado y sin más: el icono de lo que
   vendrá y la palabra. (“Historial de llamadas”, 15-sep-2026.) */
.ficha-proximamente {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 12px; text-align: center;
}
.ficha-proximamente-icono {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--realce); color: var(--texto-2);
}
.ficha-proximamente-icono svg { width: 20px; height: 20px; }
.ficha-proximamente b { font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.ficha-panel:empty { min-height: 0; }
/* EL NÚMERO, A SECAS, BAJO EL CARGO (regla del director, 16-sep-2026: “que quede solo el número,
   sin textos, sombras ni nada por el estilo, y sin botones de asignar: eso debe pasar solo”). */
.ficha-numero { font-size: 13px; color: var(--texto-2); letter-spacing: .2px; margin-top: 2px; }
.ficha-numero:empty { display: none; }
/* Lo único que queda bajo la foto: la llave de los proyectos de Claude y Codex. */
.ficha-datos { width: 100%; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ficha-acceso-linea { font-size: 11.5px; color: var(--texto-suave); }
.ficha-acceso-botones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.comando-sincronizar { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; user-select: all; }

.ficha-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ficha-fotos button { display: block; padding: 0; border: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--realce); cursor: zoom-in; }
.ficha-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Una FILA: el clip a la izquierda y el nombre recortado con “…”. Va acotada a `.ficha-lista` porque
   `.ficha-item` también es la tarjeta del modal de onboarding (más arriba), que apila en COLUMNA:
   sin acotar, su `flex-direction: column` se colaba aquí —clip arriba, nombre centrado— y un nombre
   largo, sin ancho que lo recortara, se salía de la tarjeta por los dos lados (fallo del director,
   15-sep-2026). Y al revés, estas reglas le quitaban a la del onboarding su propio aspecto. */
.ficha-lista { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ficha-lista > .ficha-item {
  display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  color: var(--texto); text-decoration: none; background: var(--realce); min-width: 0;
}
.ficha-lista > .ficha-item:hover { background: var(--realce-fuerte); }
.ficha-lista > .ficha-item > svg { width: 15px; height: 15px; flex: none; color: var(--texto-suave); }
.ficha-lista > .ficha-item > span { flex: 1; display: flex; flex-direction: column; min-width: 0; text-align: left; }
.ficha-lista > .ficha-item b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-lista > .ficha-item em { font-size: 11px; font-style: normal; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Un documento de la pestaña abre el visor: es un botón con el aspecto de la fila, y lleva el
   icono de su formato con el color de su familia, como la ficha del adjunto en el chat. */
.ficha-lista > button.ficha-item { width: 100%; border: 0; font: inherit; cursor: pointer; }
.ficha-formato { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 26px; color: var(--tinte); }
/* El icono es un <span> hijo de la fila, y la regla del texto (`> span { flex: 1 }`) lo estiraba hasta media fila: el
   icono quedaba en el centro y el nombre empujado a la derecha. Se queda con su ancho. */
.ficha-lista > .ficha-item > .ficha-formato { flex: none; }
.ficha-formato svg { width: 22px; height: 26px; }
.ficha-lista > .ficha-item .ficha-formato em { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 6px; font-weight: 800; letter-spacing: .2px; color: var(--tinte); overflow: visible; }

/* ═══ Los bloques de abajo (máquina, rutinas) se despliegan ═══
   Ocupaban toda la columna por defecto y la máquina es lo que menos se mira: ahora el título
   ES el botón, y el círculo de pantallas de la ficha abre el de la máquina de un toque. */
.msj-desplegable {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 6px; border: 0; background: transparent; cursor: pointer;
  color: var(--texto-suave); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600;
}
.msj-desplegable:hover { color: var(--texto); }
.msj-desplegable > span:first-child { margin-right: auto; text-align: left; }
.msj-desplegable .chip { text-transform: none; letter-spacing: 0; }
.msj-chevron { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); }
.msj-desplegable[aria-expanded="true"] .msj-chevron { transform: rotate(180deg); }
.msj-desplegable-cuerpo { padding: 0 6px 12px; }

/* Mientras el colaborador no tiene computador propio: el negro de una pantalla con lo que pasa encima. Sin imagen
   debajo (7-oct-2026: la captura de ejemplo era un pantallazo de otro computador, “si no ha cargado que solo esté una
   pantalla negra”). */
.maquina-ejemplo { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.maquina-ejemplo span { padding: 0 14px; text-align: center; font-size: 12px; line-height: 1.45; color: rgba(245, 245, 247, .72); }

/* ═══ El “+” de la cabecera del tablero ═══
   Cápsula, no círculo: vive en la misma fila que las fichas de colaborador y tiene que leerse
   como una más. El vidrio lo pone .btn-vidrio; aquí solo cambia la forma y el tamaño para
   casar con .cat-ficha (mismo alto de fila, mismo radio). */
/* El “+” de la cabecera: CIRCULAR y plano, con el lenguaje de las fichas de colaborador que
   tiene al lado (borde fino, fondo transparente). Sin vidrio: el liquid glass es la piel de
   la ventana, y aquí dentro, sobre la tarjeta negra, solo añadía un brillo que no pega. */
.btn-vidrio-capsula {
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--borde); background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  color: var(--texto-2);
}
.btn-vidrio-capsula:hover { background: var(--realce); color: var(--texto); }
.btn-vidrio-capsula svg { width: 15px; height: 15px; }

/* Despedir: acción destructiva al final de la ficha, como en la ficha de contacto de macOS */

/* ─── Recibo de lectura ───
   Como en Mensajes: una línea gris fina bajo TU último mensaje y alineada a su borde. No es
   un globo —sin fondo, sin cola— y no reclama aire propio: el hilo es flex con gap 10px, así
   que el margen negativo la sube hasta pegarse al globo como en la referencia.
   Lo que dice es VERDAD, no decoración: sale cuando el colaborador ya habló después de tu
   mensaje (su turno se armó con tu texto dentro) o cuando lo está contestando ahora mismo. */
.leido {
  align-self: flex-end;
  margin: -7px 2px 0;
  font-size: 11px;
  color: var(--texto-suave);
  letter-spacing: .2px;
  white-space: nowrap;
}
.leido b { font-weight: 600; color: var(--texto-2); }

/* ═══ El chat mudado al panel va A SANGRE ═══
   El panel tiene padding 14px —del layout viejo, cuando dentro vivían su cabecera y su
   compositor propios— y con la conversación mudada dentro eso deja la niebla de la cabecera
   a 14px del borde: su rectángulo se ve como un canto recto sobre la esquina redonda del
   panel, sobre todo donde el desenfoque tiene algo claro detrás. Sin relleno, la niebla
   llega al borde; y con el radio heredado, sus capas se recortan redondas.
   `border-radius: inherit` encadena panel → .msj-conv → cabecera → sus dos capas, así que en
   la sección de Mensajes —donde el contenedor no tiene radio— sigue valiendo 0 sin excepción. */
.panel-chat:has(> .msj-conv) { padding: 0; }
.panel-chat > .msj-conv { border-radius: inherit; overflow: hidden; }
.msj-conv-cabeza,
.msj-conv-cabeza::before,
.msj-conv-cabeza::after { border-radius: inherit; }

.tpop-conectado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--realce); color: var(--ok);
  font-size: 12.5px; font-weight: 600;
}
.tpop-conectado svg { width: 14px; height: 14px; }

/* ═══ LA PETICIÓN, EN SU PROPIO GLOBO JUSTO DEBAJO DEL MENSAJE CON QUE SE PIDIÓ ═══
   (reglas del director, 15-sep-2026: “que las aprobaciones también se pidan por mensaje y eso sea
   un espejo”, y “siempre las solicitudes se mandan en su mensaje solo”). El colaborador cuenta su
   porqué en un globo y, en el siguiente, va la MISMA tarjeta que el disco: sus botones si espera,
   en qué quedó si ya se decidió (app.js, `peticionEnHilo`). Una tarjeta NO es texto: el globo
   pinta en `pre-wrap` y convertía la sangría de la plantilla en líneas en blanco de verdad, así
   que aquí el espacio vuelve a ser espacio. Y toma un ancho de lectura: ceñida a unos botones
   quedaba como una etiqueta.
   430 px, que es el que tenía (regla del director, 28-sep-2026: “que la burbuja de aprobación se
   vea más así”, señalando una grabación suya del 17-sep por la mañana). Había bajado a 380 de
   lado, dentro de un commit de autenticación del 21-sep, sin ninguna decisión detrás: con ese
   ancho el título se parte en dos líneas y la tarjeta vuelve a leerse como la etiqueta que este
   mismo comentario dice que no debe ser. */
.msj-hilo .burbuja.con-peticion { white-space: normal; width: min(430px, 100%); }
.burbuja .peticion-texto { white-space: pre-wrap; }
/* Una acción trae TODO lo que se va a hacer —un correo entero, una lista—: se lee plegada y se
   despliega con “Ver todo”, para que un correo de treinta líneas no se coma el hilo. */
.burbuja .peticion-texto.plegada {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
}
.peticion-ver {
  display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-2);
}
.peticion-ver:hover { color: var(--texto); }
/* La tarjeta va sola en su globo: sin filo ni marco propio, el globo ya es el marco. */
.peticion-hilo { margin: 0; padding: 2px 0; }
.peticion-hilo .tpop-peticion { margin: 0; padding: 0; border: 0; background: none; }
.peticion-hilo .tpop-app { margin-bottom: 4px; }
.peticion-hilo .tpop-peticion-titulo { margin-bottom: 2px; }
.peticion-hilo .decision-botones { margin-top: 8px; }
.peticion-hilo .tpop-respuesta { margin: 8px 0 0; background: color-mix(in srgb, var(--fondo) 55%, transparent); }
.peticion-hilo .tpop-respuesta + .decision-botones { margin-top: 8px; }
/* Una suelta no tiene globo que la cuente, así que su detalle se lee plegado a pocas líneas. */
.burbuja.suelta .tpop-peticion-detalle {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
/* Decidida: qué era y en qué quedó, sin botones. */
.peticion-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.peticion-estado svg { width: 13px; height: 13px; flex: none; }
.peticion-decidida.ok .peticion-estado { color: var(--ok); }
.peticion-decidida.no .peticion-estado { color: var(--texto-suave); }
.peticion-comentario {
  margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--texto-2); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ═══ LA COLA DEL COLABORADOR (pestaña “Tareas” de su ficha) ═══
   Sustituye al tablero. Se prioriza arrastrando, que es como se le dice a una persona
   “esto primero”, y ese orden es el que lee su ciclo. */
.cola-cabeza { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.cola-titulo { font-size: 13px; font-weight: 600; }
.cola-cuenta {
  font-size: 11px; color: var(--texto-suave);
  background: var(--panel-2); border-radius: 999px; padding: 1px 7px;
}
.cola-ayuda { font-size: 11.5px; color: var(--texto-suave); margin: 0 0 10px; }
.cola-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Las terminadas de antes (5-nov-2026, el director: “el botón de mostrar más se ve feo y mal organizado”): una línea discreta,
   centrada bajo la lista y a su ancho, como el pie de una lista de iOS; no un botón suelto pegado a la izquierda. */
.cola-ver-mas {
  display: block; width: 100%; margin: 8px 0 2px; padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--texto-suave); font: inherit; font-size: 12.5px; font-weight: 500;
  text-align: center; cursor: pointer;
}
.cola-ver-mas:hover { background: var(--realce); color: var(--texto); }
.cola-ver-mas:disabled { cursor: default; background: transparent; color: var(--texto-suave); opacity: .7; }
.cola-item {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel-2); padding: 8px 10px;
  cursor: grab;
}
.cola-item.arrastrando { opacity: .45; cursor: grabbing; }
/* “Te necesita”: debajo del título, lo que pidió y por qué, y el botón “Aprobar” que abre el aprobador del chat
   (16-sep-2026: en Tareas no se aprueba, se va a aprobar). Alineado con el título: casilla 16 + 8 de aire. */
.cola-item.con-peticion { flex-wrap: wrap; cursor: default; }
/* Una tarea que se eliminó, citada en un mensaje: su título en gris, sin nada que abrir. */
.tarea-eliminada { color: var(--texto-suave); }
.cola-necesita { flex: 1 0 100%; min-width: 0; display: flex; align-items: center; padding: 0 0 2px 24px; }
.cola-aprobar {
  margin-top: 2px; padding: 5px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--contraste); color: var(--contraste-texto); font: inherit; font-size: 12px; font-weight: 600;
}
.cola-aprobar:hover { filter: brightness(.94); }
.fase-espera .cola-necesita { padding-left: 0; }
.tarea-frena .cola-aprobar { margin-top: 0; }
/* El aprobador abierto desde una tarea: la solicitud de esa tarea queda normal y las demás
   solo bajan de intensidad. Sin filtro, color ni borde añadido: la jerarquía la da la opacidad. */
.pend-ficha.opaca { opacity: .28; transition: opacity .2s var(--ease, ease); }
.cola-agarre { color: var(--texto-suave); font-size: 11px; letter-spacing: -2px; flex: none; }
.cola-abrir {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.cola-item-titulo {
  font-size: 13px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cola-item-estado { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
/* La que está haciendo AHORA se distingue por el COLOR DE SU RÓTULO, como las otras dos:
   el borde ámbar alrededor de la ficha se quitó (regla del director, 9-sep-2026). Enmarcar
   una fila de una lista de tres la convierte en un aviso, y no lo es: es la que toca. */
.cola-item.activa .cola-item-estado { color: var(--estado-curso); }
/* La que te espera se distingue por el COLOR DE SU ESTADO y nada más: ni se apaga (parecía
   deshabilitada) ni se enmarca en rojo (decisión del director, 8-sep-2026) — el rótulo ya
   lo dice, y un borde rojo alrededor de cada ficha convierte la cola en una alarma. */
.cola-item.esperando .cola-item-estado { color: var(--estado-espera); }

/* ── Dentro de una tarea ──
   La estética que pidió el director: el panel de los flujos de trabajo. Cada vuelta que el
   colaborador dio a la ficha es una FASE, con su fila de puntos de estado y sus subordinados
   con palomita. Dos colores y no más: VERDE si ese paso pasó, ROJO si no. El morado del
   acento no entra aquí — aquí lo único que se pregunta es si salió bien. */
.cola-volver { background: none; border: 0; color: var(--texto-suave); font: inherit; font-size: 12px; cursor: pointer; padding: 0 0 10px; }
.cola-obj h4 { margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
.cola-obj p {
  margin: 0 0 14px; font-size: 12.5px; color: var(--texto-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
/* La estructura es la del panel de flujo de trabajo que pidió el director: una BANDA con
   el nombre de la fase y su fila de puntos, y DEBAJO —fuera de la banda— la lista de
   agentes que se desplegaron en ella. La fase no lleva color: el único color aquí es el de
   cada punto (verde pasó, rojo no) y el del estado de la ficha, arriba. */
.cola-trabajo { display: flex; flex-direction: column; gap: 4px; }
/* EL PLAN SE LEE COMO UNA LISTA QUE SE VA CHEQUEANDO (16-sep-2026): una línea arriba con cuánto
   llevas —fases cerradas, media para la que está en curso— y cada fase con su marca: ✓ la hecha, un
   punto que late la que corre, un aro hueco la que no ha empezado. Los puntos por paso se fueron:
   decían cuántas veces habló el motor, no cómo va el trabajo; eso ahora va en texto, al lado. */
.fases-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fases-cuenta { font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fases-pista { height: 4px; border-radius: 999px; background: var(--realce); overflow: hidden; margin: 4px 0 8px; }
.fases-pista i { display: block; height: 100%; border-radius: 999px; background: var(--estado-hecha); transition: width .5s var(--ease); }
.fase { display: flex; flex-direction: column; }
.fase-banda { background: var(--panel-2); border-radius: 10px; padding: 8px 12px; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 4px 8px; }
.fase-marca {
  width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9.5px; line-height: 1; color: var(--contraste-texto); background: var(--realce-fuerte);
}
.fase.hecha .fase-marca { background: var(--estado-hecha); color: #06240f; }
.fase.curso .fase-marca { background: var(--estado-curso); }
.fase.pendiente .fase-marca { background: transparent; box-shadow: inset 0 0 0 1.5px var(--realce-fuerte); }
@media (prefers-reduced-motion: no-preference) {
  .fase.curso .fase-marca { animation: fase-late 2.2s ease-in-out infinite; }
  @keyframes fase-late { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
}
.fase-nombre { font-size: 12.5px; line-height: 1.35; color: var(--texto); }
.fase.pendiente .fase-nombre { color: var(--texto-2); }
.fase-sin { font-size: 11px; color: var(--texto-suave); text-align: right; }
.fase-agentes { padding: 8px 12px 14px 22px; display: flex; flex-direction: column; gap: 4px; }
.fase-rotulo-agente { font-size: 11px; color: var(--texto-suave); }
.fase-sin-subs { margin: 0; font-size: 11.5px; color: var(--texto-suave); }
.fase-puntos { display: flex; flex-wrap: wrap; gap: 4px; }
.punto { width: 6px; height: 6px; border-radius: 50%; }
.punto.ok  { background: var(--estado-hecha); }
.punto.mal { background: var(--estado-espera); }
.fase-nota { font-size: 11px; color: var(--texto-suave); margin-top: 8px; }
.subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sub { font-size: 11.5px; color: var(--texto-2); display: flex; gap: 6px; align-items: baseline; }
.sub-marca { flex: none; width: 10px; text-align: center; color: var(--texto-suave); }
.sub.hecho .sub-marca { color: var(--estado-hecha); }
.sub.error .sub-marca { color: var(--estado-espera); }
.sub-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* LA APROBACIÓN VIVE EN SU ETAPA (regla del director, 16-sep-2026: “y en las etapas, cuando llegue a
   la aprobación, también salga ahí, como en la animación”). No es un aviso aparte arriba de la
   ficha: es el punto del plan donde el trabajo se paró, y ahí se decide. La fase que espera cambia
   su marca por un “!” y la tarjeta cuelga de ella, sin recuadro propio —ya está dentro de la fase—
   y colgada de la misma línea que los subordinados. */
.fase.te-espera .fase-marca { background: var(--estado-espera); color: #fff; font-size: 10px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .fase.te-espera .fase-marca { animation: fase-late 2.2s ease-in-out infinite; }
}
.fase.te-espera .fase-agentes { padding-bottom: 6px; }
/* Una fase que nadie está trabajando no late (regla del director, 16-sep-2026: “en curso” solo con un proceso detrás):
   o cancelada, con su tachadura. “Detenida” se retiró el 28-sep-2026: una fase viva está en curso,
   y si algo la frena lo dice `te-espera` con su “!” y su botón. */
.fase.cancelada .fase-marca { background: var(--realce-fuerte); color: var(--texto-2); font-size: 9px; }
.fase.cancelada .fase-nombre { color: var(--texto-2); }
.fase-espera { padding: 2px 0 14px 22px; display: flex; flex-direction: column; gap: 6px; }
.fase-espera-rotulo { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--estado-espera); }
.fase-espera .tpop-peticion { border: 0; margin: 0; background: var(--panel-2); }
.fase-espera .tpop-peticion + .tpop-peticion { margin-top: 6px; }
/* La columna es estrecha y el placeholder del comentario ocupa dos renglones: con el alto de una
   sola línea se leía cortado por la mitad. */
.fase-espera .tpop-respuesta { min-height: 48px; }
/* El detalle se pliega a cinco líneas, como en el disco: lo que hay que leer para decidir es la
   franja de “Si apruebas…”, y el correo entero se abre con “Ver todo” solo si hace falta. */
.fase-espera .tpop-peticion-detalle { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fase-espera .tpop-peticion-detalle.abierto { display: block; -webkit-line-clamp: unset; overflow: visible; }
.fase-espera .tpop-ver-todo { display: inline-block; }

/* Las TERMINADAS van al final y se ven terminadas, pero se abren igual: su historial es
   justo lo que el director va a consultar después. */
.cola-cabeza-hechas { margin-top: 18px; }
.cola-item.hecha .cola-item-estado { color: var(--estado-hecha); }
/* Cancelada: finalizada, pero sin hacerse. Ni el verde de lo terminado ni el rojo de lo que espera. */
.cola-item.cancelada .cola-item-estado { color: var(--texto-suave); }
.tarea-estado.cancelada { color: var(--texto-suave); border-color: var(--borde-2); text-decoration: none; }
/* Una archivada no está terminada: su rótulo no va en el verde de “Terminada”. */
.cola-item.archivada .cola-item-estado { color: var(--texto-suave); }

/* ═══ EL SUBMENÚ DE TAREAS: EN COLA · TERMINADAS · ARCHIVADAS (regla del director, 15-sep-2026) ═══
   Un selector segmentado bajo las pestañas de la ficha. Va un nivel por DEBAJO de ellas, así que
   no repite su óvalo blanco: pista tenue y óvalo gris del tema, con el mismo muelle al deslizarse.
   Los tres segmentos miden lo mismo, y por eso al óvalo le basta saber en cuál está (`--i`). */
.cola-vistas {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px; margin: 0 0 12px; border-radius: 999px; background: var(--realce);
}
.cola-vistas-ovalo {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
  border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--texto) 14%, transparent);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 440ms cubic-bezier(.3, 1.15, .42, 1);
}
.cola-vistas button {
  position: relative; z-index: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--texto-suave); transition: color 180ms var(--ease, ease);
}
.cola-vistas button:hover, .cola-vistas button.sel { color: var(--texto); }
.cola-vistas-cuenta { font-size: 10.5px; font-weight: 500; opacity: .65; font-variant-numeric: tabular-nums; }
.cola-vacio { margin: 18px 0; }
@media (prefers-reduced-motion: reduce) { .cola-vistas-ovalo { transition: none; } }
/* Qué la tiene frenada, en la propia fila: la petición viva más reciente. */
.cola-item-frena {
  font-size: 11px; color: var(--texto-suave); line-height: 1.35; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* El estado de la ficha, dentro de ella. */
.tarea-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.tarea-estado {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borde-2); color: var(--texto-suave);
}
.tarea-estado.curso  { color: var(--estado-curso);  border-color: color-mix(in oklab, var(--estado-curso) 55%, transparent); }
.tarea-estado.espera { color: var(--estado-espera); border-color: color-mix(in oklab, var(--estado-espera) 55%, transparent); }
.tarea-estado.hecha  { color: var(--estado-hecha);  border-color: color-mix(in oklab, var(--estado-hecha) 55%, transparent); }
.tarea-subs { font-size: 11px; color: var(--texto-suave); }

/* LO QUE LA TIENE FRENADA: dentro de una que te espera, la última cosa que te pidió. */
/* Lo que la frena: SOLO el rótulo va en rojo (decisión del director, 8-sep-2026). El
   recuadro teñido convertía media pantalla en una alarma; el color es para señalar, no
   para gritar. */
.tarea-frena {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--panel-2);
}
.tarea-frena-rotulo { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--estado-espera); }

.fases-rotulo { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px; }

/* Te espera una decisión EN ESE chat. Un punto del acento, no un globo: no es algo que se
   lea —es algo que se decide—, y desde que no hay tablero es la única señal de cuál de los
   nueve te está esperando. */
/* TE ESPERA UNA DECISIÓN. Siempre en la esquina superior derecha, en los tres sitios donde
   aparece un chat —la lista, los destacados y el desplegable del menú—: un pendiente se busca
   en el mismo sitio o no se busca (decisión del director). */
/* ═══ EN EL AVATAR, LA PRESENCIA; LO QUE TE ESPERA, EN NÚMERO ═══
   Reglas del director, 18-sep-2026: “necesito que ese punto rojo se vaya y ahí salga más bien el
   punto verde de si están en línea o no, y ese indicador quedará como el número rojo, pero también
   por chat… se gestiona aparte de la notificación blanca, que es de mensajes”.
   El VERDE va abajo a la derecha del avatar, que es donde toda app de mensajes pone la presencia, y
   deja libre la esquina de arriba para el número rojo. El aro solo lo despega de la foto: a 2 px
   parecía un botón pegado encima. */
.msj-enlinea {
  position: absolute; bottom: -1px; right: -1px;
  width: 7px; height: 7px; border-radius: 50%;   /* pequeño: es una señal, no un aviso (18-sep-2026) */
  background: var(--ok); flex: none;   /* el MISMO verde del “En línea” de la cabecera */
  box-shadow: 0 0 0 1.5px var(--fondo);
}
/* Siempre sobre el AVATAR, en su esquina superior derecha. Es la única esquina superior
   derecha LIBRE en las tres vistas: en la fila de la lista, la de la fila la ocupa la fecha y
   el punto se le montaba encima. Sobre un círculo, la esquina se sale un poco del arco — que
   es justo lo que la hace leerse como una marca y no como parte de la foto. */
.msj-canal-retrato { position: relative; display: inline-flex; flex: none; }
/* El número ROJO de lo que te espera: misma forma que el globo blanco de los mensajes, para que se
   lean como dos cuentas de lo mismo —cosas por atender— y distinto color, porque son cosas
   distintas: el blanco lo resuelves leyendo, el rojo decidiendo. En la fila van juntos a la
   derecha, el rojo primero; en un destacado, el rojo en la esquina de arriba (la que dejó libre el
   punto de presencia) y el blanco bajo la foto, donde ya estaba. */
.msj-globo.espera { background: var(--peligro, #f85149); color: #fff; }
/* EL PAR, TOCÁNDOSE (18-sep-2026): la roja primero y la blanca montada sobre su filo. Van pegadas a
   propósito —“que quede la blanca un poco sobre, tocando la burbuja roja”—: el aro del color del
   fondo de la blanca recorta a la roja y las dos se leen como una sola marca de dos cuentas. La
   blanca queda encima sin `z-index`: en el mismo apilado, el hermano que va después se pinta arriba. */
.msj-marcas { display: inline-flex; align-items: center; }
.msj-marcas .msj-globo + .msj-globo { margin-left: -2px; }   /* “no tan juntas” (18-sep-2026): se tocan por el filo, sin montarse encima */
.msj-marcas .msj-globo { box-shadow: 0 0 0 1.5px var(--fondo); }
/* En un destacado el par va en la esquina del avatar, la que dejó libre el punto de presencia. */
.msj-canal-retrato .msj-marcas { position: absolute; top: -3px; right: -3px; }

/* En qué anda ahora mismo, en su fila de Mensajes. Devuelve la vista de conjunto que se
   perdió al quitar el tablero: nueve filas que dicen qué hace cada uno, sin un kanban. */
.msj-trabajando { color: var(--acento); }

/* ═══ LO QUE TE ESPERA EN ESTE CHAT ═══
   Recogido en un disco de vidrio junto al “+”. El icono de lo que hay que conectar —o el de
   aprobación— va DETRÁS del vidrio: pequeño, difuminado y deformado por él, como se ve algo
   a través de una lente. Se sabe que hay algo esperando antes de leer una palabra. */
.pend-boton {
  position: relative; flex: none;
  /* El color que el vidrio refracta. Lo pone app.js muestreando el logo de la app que hay que
     conectar: el canto de WhatsApp tira a verde, el de Gmail a rojo. Sin logo —una aprobación,
     una credencial— refracta el acento de la casa. */
  --tinte-app: var(--acento);
  /* El MISMO tamaño que el “+” de al lado (34 px, como .chat-icono). */
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; padding: 0; overflow: visible; border: 0;
  background: transparent;
  /* VUELVE A FLOTAR (regla del director, 28-sep-2026: “que se vea más así”, señalando una grabación
     suya del 17-sep a las 10:51). La sombra se fue esa misma tarde en `448c834`, con el rediseño
     del vidrio, dos horas y tres cuartos después de esa grabación. Lo que él aprobó de aquel
     rediseño fue que el disco fuera PLANO POR DENTRO —sin volumen, sin media luna de luz—; una
     sombra debajo no lo vuelve una esfera, lo despega del fondo. La lente (`.pend-boton.pend-lente`)
     la hereda de aquí, que es lo correcto: es una copia del mismo disco. */
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform var(--rapido, .18s) var(--ease, ease), opacity var(--rapido, .18s) var(--ease, ease);
}
.pend-boton:hover { transform: translateY(-1px); }
.pend-boton:active { transform: scale(.95); }
.pend-boton.vacio { opacity: .5; }
.pend-boton.vacio:hover { transform: none; }

/* EL LOGO, DETRÁS DEL TODO. Se ve entero y a color: el vidrio lo vela y lo curva, no lo tapa. */
.pend-icono {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  border-radius: 50%; overflow: hidden;
  color: var(--texto);
  /* MENOS LUZ (regla del director, 14-oct-2026: “bájale un poco la luminosidad a esto”): el logo, el halo, la chispa
     y el canto brillan menos; el disco sigue diciendo que algo espera sin encandilar. */
  filter: brightness(.88) saturate(.92);
  /* el centro va nítido y se apaga antes de llegar al filo: ahí manda la copia estirada */
  -webkit-mask: radial-gradient(closest-side, #000 54%, transparent 88%);
          mask: radial-gradient(closest-side, #000 54%, transparent 88%);
}
/* LA COPIA QUE SE DOBLA EN EL CANTO: más grande y blanda, visible solo del centro hacia el filo.
   Es lo que hace que la luz y la forma del logo se estiren hacia los bordes, como a través del
   canto de una lente (el vidrio no puede: `backdrop-filter` en WebKit solo ve la página). */
.pend-icono-canto {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 0;
  border-radius: 50%; overflow: hidden; pointer-events: none; color: var(--texto);
  transform: scale(1.24);
  filter: blur(1.1px) brightness(.85) saturate(.95);
  -webkit-mask: radial-gradient(closest-side, transparent 44%, #000 72%, #000 84%, transparent 96%);
          mask: radial-gradient(closest-side, transparent 44%, #000 72%, #000 84%, transparent 96%);
}
.pend-icono-canto svg, .pend-icono-canto img { width: 24px; height: 24px; border-radius: 5px; object-fit: contain; }
/* El logo llega hasta la zona del canto: si se queda pequeño en el centro, el vidrio no tiene qué
   deformar. Lo recorta el círculo del hueco (`overflow: hidden`), como una lente llena. */
.pend-icono svg { width: 24px; height: 24px; }
.pend-icono img { width: 24px; height: 24px; border-radius: 5px; object-fit: contain; }

/* EL VIDRIO: UN CÍRCULO PLANO CON EL BORDE REDONDO (regla del director, 17-sep-2026: “el aspecto
   es más liquid glass, como un círculo plano de vidrio con bordes redondos”). Antes se pintó como
   una ESFERA —media luna de luz arriba, destello abajo, volumen por dentro— y no era eso: el
   liquid glass de Apple es una lámina PLANA, con el color y el brillo repartidos por igual, y todo
   el relieve en el BORDE, que es lo único redondo. Así que aquí queda una lámina uniforme que deja
   ver lo de detrás, y el canto —que difumina de verdad— hace de borde redondeado. */
.pend-vidrio {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2;
  /* CERO desenfoque en la cara: cualquier blur, por pequeño que sea, ensucia un logo de 18 px.
     Lo que se dobla es el borde, no el centro. */
  -webkit-backdrop-filter: saturate(135%);
          backdrop-filter: saturate(135%);
  /* la lámina: un velo parejo, con un punto más de luz arriba porque la luz viene de arriba */
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, .02));
  box-shadow:
    /* el borde redondo: un filo de luz arriba y la sombra de su canto abajo, nada más */
    inset 0 1px 1px -.5px rgba(255, 255, 255, .8),
    inset 0 -1px 1px -.5px rgba(0, 0, 0, .35),
    /* y el aro de refracción teñido con el color de la app, pegado al filo */
    inset 0 0 2px 0 color-mix(in srgb, var(--tinte-app) 40%, rgba(255, 255, 255, .28));
}

/* EL CANTO ES EL BORDE REDONDO: parejo, con un punto más de luz por donde le da (arriba a la
   izquierda) y sin un solo color girando —el aro tornasolado era una película de jabón, no vidrio
   (regla del director, 17-sep-2026)—. Difumina lo que pasa por detrás: eso es lo que hace que el
   filo se lea como un borde de vidrio de verdad y no como una línea pintada. */
/* EL CANTO DEFORMA EL LOGO (regla del director, 17-sep-2026: “fíjate que sobre ese disco plano de
   vidrio, que me gusta, la luz y la forma del logo se deformen más hacia los bordes”). El logo vive
   DEBAJO del vidrio, así que es parte de lo que el canto difumina: con dos aros hermanos —uno suave
   por dentro y otro fuerte en el filo— lo que se ve del logo se va doblando según se acerca al
   borde, que es justo lo que hace un vidrio con volumen en el canto. Hermanos y no anidados: un
   elemento con `backdrop-filter` tapa la página a sus hijos (ver “LO QUE WEBKIT DA DE SÍ”). */
.pend-borde {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 3;
  -webkit-backdrop-filter: blur(1.6px) saturate(160%);
          backdrop-filter: blur(1.6px) saturate(160%);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 66%);
          mask: radial-gradient(closest-side, transparent 30%, #000 66%);
}
.pend-borde.fuerte {
  -webkit-backdrop-filter: blur(3.6px) saturate(180%) brightness(1.06);
          backdrop-filter: blur(3.6px) saturate(180%) brightness(1.06);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 88%);
          mask: radial-gradient(closest-side, transparent 62%, #000 88%);
}
.pend-boton::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 4;
  padding: 2.6px;
  -webkit-backdrop-filter: blur(4.5px) saturate(170%) brightness(1.02);
          backdrop-filter: blur(4.5px) saturate(170%) brightness(1.02);
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .55),
    rgba(255, 255, 255, .24) 38%,
    color-mix(in srgb, var(--tinte-app) 18%, rgba(255, 255, 255, .16)) 62%,
    rgba(255, 255, 255, .34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .75;
  transition: opacity var(--rapido, .18s) var(--ease, ease);
}
.pend-boton:hover::after { opacity: .9; }
.pend-boton.vacio::after { opacity: .4; }

/* ═══ HAY ALGO ESPERANDO: LA LUZ DEL DISCO (regla del director, 10-sep-2026) ═══
   “Una animación de movimiento cuando existe alguna herramienta, como un efecto de luz”. Una
   chispa que recorre el canto del disco, con estela del color de la app que hay que conectar,
   y un halo que respira debajo. Todo con transform y opacidad —lo que el navegador compone sin
   repintar—: un disco que respira toda la tarde no puede costar batería. Con el disco vacío no
   hay luz: el movimiento significa “te espera algo”, y un movimiento que no significa nada es
   ruido. */
.pend-luz {
  position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: conic-gradient(from 0deg,
    transparent 0 60%,
    color-mix(in srgb, var(--tinte-app) 38%, transparent) 80%,
    rgba(255, 255, 255, .62) 91%,
    transparent 94%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
  opacity: 0;
  transition: opacity .4s var(--ease, ease);
}
.pend-boton:not(.vacio) .pend-luz { opacity: 1; }
/* El halo: la luz que el disco derrama sobre lo que tiene alrededor. */
.pend-boton::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--tinte-app) 30%, rgba(255, 255, 255, .2)) 0%, transparent 68%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pend-boton:not(.vacio) .pend-luz { animation: pend-luz-gira 2.8s linear infinite; }
  .pend-boton:not(.vacio)::before { animation: pend-halo 2.8s ease-in-out infinite; }
  /* ACABA DE LLEGAR: un latido del disco, la chispa acelera y el halo se abre como una onda. */
  .pend-boton.llega { animation: pend-llega 900ms cubic-bezier(.2, .8, .2, 1); }
  .pend-boton.llega .pend-luz { animation-duration: .8s; }
  .pend-boton.llega::before { animation: pend-halo-llega 900ms ease-out; }
}
/* Sin movimiento, la luz se queda quieta en el canto: sigue diciendo que algo espera. */
@media (prefers-reduced-motion: reduce) { .pend-boton:not(.vacio)::before { opacity: .3; } }
@keyframes pend-luz-gira { to { transform: rotate(360deg); } }
@keyframes pend-halo { 0%, 100% { opacity: .18; transform: scale(.86); } 50% { opacity: .48; transform: scale(1.04); } }
@keyframes pend-llega { 0% { transform: scale(1); } 18% { transform: scale(1.2); } 45% { transform: scale(.95); } 70% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes pend-halo-llega { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.1); } }

/* Cuántas esperan. ROJO —es un pendiente, no una novedad— y separado del disco: pegado al
   filo se leía como parte del vidrio (los dos, decisión del director). */
.pend-cuenta {
  position: absolute; right: -5px; top: -5px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: var(--peligro, #f85149); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  box-shadow: 0 0 0 2px var(--fondo, #000);
}
.pend-boton.vacio .pend-cuenta { display: none; }

/* El fondo se va, como en los popups: lo único que queda es lo que tienes que decidir.
   PERO SOLO EN LA TARJETA NEGRA (regla del director, 16-sep-2026: “cuando esto se difumina, en eso no debe entrar
   el menú principal”). Cubría la ventana entera: el menú quedaba nítido por encima, pero el velo le oscurecía el
   vidrio de detrás. Ahora `encuadrarVeloPend` le da la caja y el radio de `.app-main`, y el menú no se toca. */
.pend-velo {
  position: fixed; z-index: 60;
  left: var(--velo-x, 0); top: var(--velo-y, 0);
  width: var(--velo-w, 100%); height: var(--velo-h, 100%);
  border-radius: var(--velo-r, 0);
  background: var(--velo-hoja);
  -webkit-backdrop-filter: blur(16px) saturate(.9);
          backdrop-filter: blur(16px) saturate(.9);
}
/* Entra y sale con el fundido de siempre, el mismo del velo de la ficha. */
@media (prefers-reduced-motion: no-preference) {
  .pend-velo { animation: pend-velo 260ms var(--ease, ease) backwards; }
  .pend-velo.recogiendo { animation: pend-velo-sale 360ms var(--ease, ease) var(--salida-velo, 60ms) forwards; }
}
@keyframes pend-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes pend-velo-sale { to { opacity: 0; } }
.pend-velo.oculto, .pend-capa.oculto { display: none; }

/* ═══ A LA IZQUIERDA, COMO UN MENSAJE MÁS (regla del director, 15-sep-2026) ═══
   “Que no salga en el centro sino en el lateral izquierdo, pegado al borde del chat, como si
   fuera un mensaje más.” Las solicitudes se alinean con los globos del colaborador —el borde de
   22 px del hilo: 16 de la capa más 6 de aire de la pila— y se visten como ellos: el gris de sus
   globos, su radio de 20 px y la cola en la de abajo. Siguen apiladas de abajo arriba con la más
   prioritaria abajo, junto al compositor (regla del 8-sep), y sin hoja que las envuelva. */
.msj-conv { position: relative; }
.pend-capa {
  position: absolute; left: 0; right: 0; top: 12px; bottom: 86px;
  z-index: 61; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  /* La pila se pega abajo y crece hacia arriba; con `top` puesto tiene TODO el alto de la
     conversación para hacerlo, en vez del tope ciego de 62vh que recortaba a la tercera. */
  justify-content: flex-end;
  padding: 0 16px; pointer-events: none;
}
/* Solo la PILA se desplaza; el rótulo se queda fuera, siempre a la vista sobre el compositor. */
.pend-pila {
  position: relative;   /* las tarjetas miden su sitio contra ella (sitioEnLaPila, app.js) */
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  /* `min-height: 0` es lo que permite que un hijo de flex se encoja y aparezca su scroll. */
  width: 100%; max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  /* Aire para la sombra y la cola: un contenedor que desplaza recorta todo lo que asoma. */
  padding: 6px 6px 12px;
  /* SIN BARRA: aparecía al aterrizar la última tarjeta, robaba ancho y empujaba la pila (fallo
     del director, 8-sep-2026). Si hay algo fuera de vista lo dice el rótulo. */
  scrollbar-width: none;
}
.pend-pila::-webkit-scrollbar { width: 0; height: 0; }
/* Mientras brotan del disco —que queda FUERA de la pila— no recorta, o nacerían en su borde. */
.pend-pila.sin-recorte { overflow: visible; }
.pend-mas { pointer-events: none; opacity: .8; text-transform: none; letter-spacing: .04em; }
/* El rótulo, debajo de la última y a su izquierda, donde un mensaje lleva su “Entregado”. Solo la inicial en
   mayúscula, como se escribe (regla del director, 6-oct-2026): en versales espaciadas se leía como un letrero. */
.pend-cabeza {
  pointer-events: none; padding-left: 10px;
  font-size: 12px; letter-spacing: .01em;
  color: var(--texto-suave);
}
/* “SIGUIENTE” (regla del director, 17-sep-2026): donde estaba “Ver lo decidido”, un botón con su flecha que lleva al
   próximo chat que te espera. La cabecera no recibe clics —para no robarle el gesto a la pila—, así que el botón
   recupera los suyos. Relleno tenue y sin borde, como los demás botones. */
.pend-siguiente {
  pointer-events: auto; margin-left: 12px; vertical-align: middle;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--realce); color: var(--texto);
  font: inherit; font-size: 12px; letter-spacing: .01em;
  transition: background .15s;
}
.pend-siguiente:hover { background: var(--realce-fuerte); }
.pend-siguiente[hidden] { display: none; }
.pend-siguiente svg { width: 12px; height: 12px; flex: none; }
/* EL HISTORIAL, COMO EN EL CHAT (17-sep-2026): lo decidido va encima de lo que espera, con la tarjeta del hilo y sus
   separadores de fecha. El separador recibe la rueda para que la pila se deslice también pasando por encima de él. */
.pend-pila .msj-fecha { pointer-events: auto; margin: 8px 0 0; }
/* Y CADA TARJETA DECIDIDA LLEVA SU HORA (regla del director, 18-sep-2026): el separador dice el día
   y esto el momento, como el “9:41 a. m.” de un globo. En el chat la hora flota al final del texto;
   aquí la tarjeta trae dentro su propio bloque, así que va en su renglón, al pie y a la derecha. */
.pend-ficha.decidida > .burbuja-hora {
  float: none; display: block; position: static; margin: 3px 0 0; text-align: right;
}
.letrero-omitir { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 7px; }
.letrero-omitir b { color: var(--texto); font-weight: 600; }
/* Y LAS SOLICITUDES DEL HILO TAMBIÉN (regla del director, 3-nov-2026: “las solicitudes no tienen hora como todos los
   mensajes”). Es la hora en que la pidió; la tarjeta trae su propio bloque, así que va en su renglón, al pie y a la derecha. */
.burbuja.con-peticion > .burbuja-hora {
  float: none; display: block; position: static; margin: 4px 0 -2px; text-align: right;
}
/* La que acabas de decidir, mientras llega la respuesta: un poco apagada y sin admitir otro clic. */
.pend-ficha.decidiendo { opacity: .55; pointer-events: none; transition: opacity .2s var(--ease, ease); }
/* El botón que lleva a conectar el intelecto, dentro del globo que dice que falta (17-sep-2026). */
.burbuja .burbuja-accion { display: inline-flex; margin: 8px 0 2px; }
.pend-ficha {
  pointer-events: auto; position: relative;
  width: fit-content; max-width: min(460px, 100%);
  background: var(--ficha-sobre-velo); color: var(--texto);
  border-radius: 20px; padding: 12px 14px;
  /* Flota sobre el velo, como el 17-sep (28-sep-2026). Pero CORTA: la de 40 px que tenía se
     recortaba contra la pila —que desplaza y solo deja 6 px de aire a los lados— y pintaba un
     rectángulo gris detrás de las tarjetas (fallo del director, 15-sep-2026). Esta cabe en ese
     aire y hace lo mismo. SIN backdrop-filter: la tarjeta se mueve, y un desenfoque propio obliga
     a volver a muestrear el fondo en cada cuadro (fallo del 8-sep). */
  box-shadow: 0 3px 8px rgba(0, 0, 0, .34);
}
/* La cola, en la de abajo: la que queda junto al disco y al compositor. */
.pend-ficha:last-child::after {
  content: ''; position: absolute; bottom: -5px; left: 0;
  width: 22px; height: 25px; background: inherit; pointer-events: none;
  clip-path: path('M0,0 C0,18.4 7.7,14.5 7.7,20 C7.7,23.2 5,23.5 6.7,25 C9.8,23.9 12.7,21.3 15.5,20 L22,20 Z');
}
.pend-ficha .burbuja-autor { display: block; font-size: 11.5px; font-weight: 600; margin: 0 0 4px 2px; }
.pend-ficha .tpop-peticion { border: 0; background: none; padding: 0; margin: 0; }
.pend-capa.recogiendo, .pend-capa.recogiendo .pend-ficha { pointer-events: none; }
/* Dentro de la capa la tarjeta es un aviso: el texto entero se lee en su mensaje del chat.
   (Esta regla llevaba días sin aplicarse: una llave de más justo encima la invalidaba.) */
.pend-ficha .tpop-peticion-detalle {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pend-ficha .tpop-peticion-detalle.abierto, .burbuja.suelta .tpop-peticion-detalle.abierto { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ═══ LA LENTE ═══
   El disco, copiado POR ENCIMA del velo y de las tarjetas en su mismo sitio (app.js la pone al
   abrir y la quita al cerrar; el disco de verdad se queda dentro del compositor, difuminado con
   todo lo demás). Lo que pasa por detrás se ve a través de su vidrio, y por eso, mientras está
   puesta, refracta más: satura, aclara y difumina apenas, y una tarjeta que brota se ve primero
   deformada dentro del disco y nítida al salir de él. */
.pend-boton.bajo-lente { visibility: hidden; }
.pend-boton.pend-lente { position: absolute; z-index: 64; margin: 0; }
.pend-lente .pend-vidrio {
  -webkit-backdrop-filter: blur(1.4px) saturate(160%) brightness(1.04) contrast(1.04);
          backdrop-filter: blur(1.4px) saturate(160%) brightness(1.04) contrast(1.04);
}

/* ═══ SALEN DEL DISCO: EL LOGO CON SU TARJETA, Y LAS DEMÁS EN SUS BURBUJAS (15 y 17-sep-2026) ═══
   La coreografía de abrir y cerrar la llevan `desplegarEnOla`, `recogerEnOla`, `salirEnBurbuja` y
   `vueloDelLogo` (app.js) con Web Animations, porque cada tarjeta necesita sus propias medidas: de
   dónde sale, el origen de su escala —el hueco de su logo— y cuánto tiene que viajar. Aquí quedan las
   piezas que se ven: la lente vacía mientras su logo está fuera, la gota y las burbujas de vidrio, y
   el hueco del icono en las tarjetas sin logo. */
@media (prefers-reduced-motion: no-preference) {
  .pend-lente.traga { animation: pend-lente-traga 760ms cubic-bezier(.3, 1.35, .5, 1); }
  .pend-capa .pend-cabeza { animation: pend-velo 240ms var(--ease, ease) 300ms backwards; }
  .pend-capa.recogiendo .pend-cabeza { animation: pend-velo-sale 160ms ease forwards; }
}
/* EL DISCO SE QUEDA VACÍO mientras su logo va en la tarjeta: sin logo, sin número y sin la luz que
   dice “algo espera” — lo que espera ya está fuera, delante. El logo se va de golpe porque en ese
   mismo cuadro nace su copia en el mismo sitio; el número y la luz se apagan en un soplo. */
.pend-lente .pend-cuenta { transition: opacity 160ms var(--ease, ease), scale 160ms var(--ease, ease); }
/* EL LOGO SE VA CON SU TARJETA (regla del director, 14-oct-2026: “que el logo del app se posicione en la solicitud y deje
   el círculo de cristal vacío”; app.js, `volarLogo`). Mientras el panel está abierto el disco se queda vacío —sin logo,
   sin número y sin la luz que dice “algo espera”: lo que espera ya está fuera—. El logo se va de golpe porque en ese
   mismo cuadro nace su copia en el mismo sitio; el número y la luz se apagan en un soplo. */
.pend-lente.suelta .pend-icono, .pend-lente.suelta .pend-icono-canto { opacity: 0; }
.pend-lente.suelta .pend-cuenta { opacity: 0; scale: .6; }
.pend-lente.suelta .pend-luz { opacity: 0; }
.pend-lente.suelta::before { opacity: 0; animation: none; }
.pend-lente .pend-luz, .pend-lente::before { transition: opacity 200ms var(--ease, ease); }
/* La copia que viaja: por encima de las tarjetas (61) y por debajo de la lente (64). */
.pend-logo-vuelo {
  position: absolute; z-index: 63; width: 24px; height: 24px; display: grid; place-items: center;
  pointer-events: none; color: var(--texto);
}
.pend-logo-vuelo svg, .pend-logo-vuelo img { width: 24px; height: 24px; }
.pend-logo-vuelo img { border-radius: 5px; object-fit: contain; }
/* El hueco del logo en su tarjeta espera vacío —su fondo crece con la tarjeta— hasta que el logo se posa en él. */
.espera-logo > * { visibility: hidden; }
/* El hueco del icono en una tarjeta sin logo: el mismo del disco, junto al título. */
.pend-ficha .tpop-peticion-titulo:has(> .pend-ficha-icono) { display: flex; align-items: flex-start; gap: 8px; }
.pend-ficha-icono { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--texto); }
.pend-ficha-icono svg { width: 18px; height: 18px; }
@keyframes pend-lente-traga { 0% { scale: 1; } 30% { scale: 1.16; } 100% { scale: 1; } }

/* ═══ CON EL APROBADOR ABIERTO, LA LISTA DE CHATS SE QUEDA CON LO QUE TE ESPERA ═══
   Lo hacía el menú principal hasta el 16-sep-2026 (“que no se anime el menú principal, sino que lo que sucedía ahí
   ahora aplique a la lista de chats del módulo de mensajes”). La lista sube por encima del velo —nítida, como
   subía el menú— y se PLIEGAN los chats sin nada que decidir (con opacity: 0 seguían ocupando su sitio y lo que sí
   te espera quedaba suelto, fallo del 8-sep); los destacados se recogen, que son los mismos chats. Al terminar
   con uno se abre el siguiente de esta lista (siguienteQueEspera). */
body.pend-abierto .msj-lista { position: relative; z-index: 62; }
body.pend-abierto .msj-canal:not(.con-pend) {
  opacity: 0; pointer-events: none;
  /* sin borde y con el hueco de la lista (2 px) devuelto: si no, cada plegada dejaba 4 px y entre dos que sí te
     esperan quedaba un agujero */
  max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: -2px; border-width: 0; overflow: hidden;
}
.msj-fijados { max-height: 560px; transition: opacity 200ms var(--ease, ease), max-height 280ms var(--ease, ease), padding 280ms var(--ease, ease); }
body.pend-abierto .msj-fijados { opacity: 0; pointer-events: none; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
/* Se apagan primero y se pliegan después, con el mismo fundido con que entra el velo. */
.nav-item {
  transition: opacity 200ms var(--ease, ease), height 280ms var(--ease, ease),
              padding 280ms var(--ease, ease), margin 280ms var(--ease, ease);
}

/* La ✕ de la conversación entre dos colegas: misma esquina y mismo gesto que la de la ficha. */
.par-cerrar { position: absolute; top: 12px; right: 14px; z-index: 3; }
/* Fuera de los globos, TODO el difuminado cierra: el panel no pinta fondo, así que sin esto
   el clic caía en una caja invisible que ocupaba media pantalla y no pasaba nada. */
.par-hilo { cursor: default; }

/* La flecha de la cabecera: dice que ahí se abre la tarjeta de la derecha. El gesto vale en
   toda la identidad —foto, nombre y flecha son el mismo botón—; la flecha solo lo hace
   visible, y gira cuando la tarjeta ya está abierta. */
.msj-cab-cargo { display: inline-flex; align-items: center; gap: 3px; }
/* “EN LÍNEA” (regla del director, 17-sep-2026): pequeño y verde, debajo del nombre, SOLO mientras un proceso suyo
   corre de verdad (enLineaEnCabeza, app.js). Quieto: la cabecera se repinta cada 2,5 s y un punto que late se
   reiniciaría a cada repintado. */
.msj-cab-centro .msj-cab-linea { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 500; }
.msj-cab-linea i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 24%, transparent); }
.msj-cab-flecha { width: 12px; height: 12px; flex: none; opacity: .5; transition: transform .22s var(--ease), opacity .22s var(--ease); }
.msj-cab-centro:hover .msj-cab-flecha { opacity: .95; }
.msj-cab-centro.ficha-abierta .msj-cab-flecha { transform: rotate(180deg); }

/* ═══ LA LÍNEA “NUEVOS” (regla del director, 17-sep-2026) ═══
   “Los chats deben tener una línea que diga desde dónde están los nuevos mensajes”, con la referencia de otra app de
   chat: una raya fina de lado a lado y el rótulo al final. Va en el color del globo de no leídos —blanco en oscuro, el
   gris tenue en claro—, que en esta app ya significa “esto no lo has leído”: el rojo es de lo que te espera y el
   morado no entra en la conversación. La pone app.js (`ponerLineaDeNuevos`) antes del primer mensaje sin leer. */
.msj-nuevos { align-self: stretch; display: flex; align-items: center; margin: 4px 0; pointer-events: none; }
.msj-nuevos::before { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--texto) 34%, transparent); }
.msj-nuevos span {
  flex: none; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--contraste); color: var(--contraste-texto);
  font-size: 10px; font-weight: 700; line-height: 13px; letter-spacing: .08em; text-transform: uppercase;
}

/* “Prici y Zoe se escribieron”: la nota que sustituye al globo de un colega en un chat
   privado. Es una línea suelta, como el separador de fecha, y abre el hilo de esos dos. */
.msj-nota-par {
  align-self: center; border: 0; background: none; font: inherit; cursor: pointer;
  font-size: 11px; color: var(--texto-suave); letter-spacing: .2px;
  margin: 10px 0 2px; padding: 3px 10px; border-radius: 999px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.msj-nota-par:hover { color: var(--texto-2); background: rgba(255,255,255,.06); }

/* ═══ RESPONDER A UN MENSAJE ═══
   En un grupo —y en un 1-a-1 con dos frentes abiertos— “sí, dale” no dice a qué. La cita lo
   fija: se elige con el CLIC DERECHO sobre el mensaje (el gesto de siempre; el botoncito al
   pasar el cursor se retiró), se ve sobre el compositor mientras escribes, y queda dentro
   del globo enviado como en cualquier app de mensajes. */
.burbuja { position: relative; }
/* El mensaje acompaña el dedo. pan-y conserva el desplazamiento vertical del hilo. */
.msj-hilo .burbuja[data-id], .msj-hilo .fotos-envio[data-msg] { position: relative; touch-action: pan-y; }
.msj-hilo .arrastrando-respuesta { translate: var(--arrastre-respuesta, 0) 0; transition: none !important; will-change: translate; }
.msj-hilo .arrastrando-respuesta::before {
  content: '↩'; position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--realce-fuerte); color: var(--texto-2); font: 600 16px/1 system-ui;
  opacity: .68; scale: .9; transition: opacity .12s, scale .12s; pointer-events: none;
}
.msj-hilo .lista-respuesta::before { background: var(--texto); color: var(--panel); opacity: 1; scale: 1; }
/* Lo que PASA en un chat (alguien entra, sale, nace una tarea) va al centro, pequeño y sin globo, como en WhatsApp. */
.msj-evento {
  align-self: center; max-width: 82%; margin: 8px auto; padding: 4px 12px; border-radius: 999px;
  background: var(--realce); color: var(--texto-2); font-size: 11.5px; line-height: 1.35; text-align: center;
}
.msj-evento .tarea-mini { font-size: inherit; }
/* Cada miembro del grupo en su fila, con su “⋯” a la derecha (sacar, administración, salir). */
.msj-miembro-fila { display: flex; align-items: center; gap: 2px; }
.msj-miembro-fila > .msj-miembro { flex: 1; min-width: 0; }
.msj-miembro.persona { cursor: default; }
.msj-miembro b em { font-style: normal; font-weight: 400; color: var(--texto-suave); }
.miembro-mas {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--texto-suave); cursor: pointer; opacity: .6;
}
.miembro-mas svg { width: 16px; height: 16px; }
.msj-miembro-fila:hover .miembro-mas, .miembro-mas:focus-visible { opacity: 1; }
.miembro-mas:hover { background: var(--realce); color: var(--texto); }
.comp-rotulo { margin: 12px 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
/* La hora de cada mensaje, como en WhatsApp (16-sep-2026): pequeña, abajo a la derecha, dentro del globo. Flota al
   final del texto: si cabe en la última línea se queda ahí, y si no, baja sola a la derecha. */
.burbuja-hora {
  float: right; position: relative; top: 6px; margin-left: 10px;
  font-size: 10.5px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: inherit; opacity: .5; pointer-events: none; user-select: none;
}
/* Mientras el menú está abierto, cuál de todos los globos es. */
/* El globo elegido y la cita llevan un aro FINO del color del texto (blanco en oscuro, gris en claro), nunca morado
   (regla del director, 4-oct-2026: “no puede ser borde morado, tampoco cuando respondo”). */
/* Y desde el 7-oct-2026 no es un aro sino el globo entero un tono más claro (en oscuro) o más oscuro (en claro), colita
   incluida —la colita hereda el fondo—: el aro rodeaba el globo y dejaba la colita fuera, cortada (“no me gusta cómo
   se ve esto”). El mismo tono señala un momento el mensaje al que lleva una cita. Nunca morado. */
.burbuja.prici { --globo-resalte: color-mix(in srgb, var(--burbuja-otro) 78%, var(--texto)); }
.burbuja.director { --globo-resalte: color-mix(in srgb, var(--burbuja-yo) 86%, var(--burbuja-yo-texto)); }
.burbuja { transition: background-color .18s var(--ease, ease); }
.burbuja.senalada { background-color: var(--globo-resalte); }
/* En la conversación, ni el foco del teclado es morado: el mismo color del texto, fino. */
#msj-hilo :focus-visible { outline: 1px solid var(--contraste); outline-offset: 2px; }


/* ═══ SINAPSIS: los dos buscadores son el MISMO buscador ═══
   Uno buscaba en el cerebro y el otro filtraba la tabla, pero uno medía 460px de tope y el
   otro el ancho entero de la columna: dos cajas iguales que no se alinean se leen como un
   error de la pantalla, no como dos funciones. Aquí manda la columna. */
.sinapsis-lado .apps-buscador { max-width: none; width: 100%; display: flex; }
.sinapsis-lado .apps-buscador input { width: 100%; flex: 1; min-width: 0; }
/* Y la tabla de notas no se dibuja como una caja aparte: el recuadro metía su contenido
   1px hacia dentro y ya nada volvía a alinearse con el buscador de arriba. Sin él, buscador,
   filtro, chips y filas caen todos sobre la misma línea. */
.sinapsis-lado .lista.mapa-tabla { border: 0; background: none; }

/* ═══ ELEGIR VARIAS Y ACTUAR SOBRE TODAS ═══
   Archivar y eliminar salen de dentro de la ficha a la propia fila, al lado del botón de
   entrar (regla del director, 9-sep-2026): son las dos cosas que se hacen SIN entrar, y
   obligar a abrir una tarea para archivarla es pedir dos clics para no leer nada. Y con la
   casilla se eligen varias —Shift marca el tramo— para hacerlo de una vez.
   Los mismos estilos sirven en la cola de tareas y en la lista de rutinas: es el mismo
   gesto y tiene que verse igual en los dos sitios. */
/* La casilla se dibuja sola (span + <i>), sin <input> ni <label>: con un checkbox dentro de
   un label el navegador reenvía el clic al control aunque el del label venga cancelado, y el
   mismo gesto marcaba y desmarcaba. */
.cola-marca { position: relative; display: grid; place-items: center; flex: none; width: 16px; height: 16px; cursor: pointer; }
.cola-marca i {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid var(--borde-2); background: transparent;
  opacity: .45;
  transition: opacity .16s var(--ease, ease), background .16s var(--ease, ease), border-color .16s var(--ease, ease);
}
.cola-item:hover .cola-marca i, .rut-fila-caja:hover .cola-marca i { opacity: 1; }
.cola-marca:focus-visible { outline: none; }
.cola-marca:focus-visible i { opacity: 1; box-shadow: 0 0 0 2px var(--realce-fuerte); }
.cola-marca[aria-checked="true"] i { opacity: 1; background: var(--contraste); border-color: var(--contraste); }
/* La palomita, con dos bordes girados: se dibuja sola y queda nítida a cualquier tamaño. */
.cola-marca[aria-checked="true"]::after {
  content: ''; position: absolute; left: 6px; top: 3.5px;
  width: 3.5px; height: 7px; border: solid var(--contraste-texto);
  border-width: 0 1.7px 1.7px 0; transform: rotate(45deg);
  pointer-events: none;
}
/* Los dos gestos de la fila. Discretos en reposo; se encienden al pasar por la fila. */
.cola-acciones { display: flex; align-items: center; gap: 2px; flex: none; }
.cola-icono {
  width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--texto-suave);
  cursor: pointer; opacity: .55;
  transition: opacity .16s var(--ease, ease), color .16s var(--ease, ease), background .16s var(--ease, ease);
}
.cola-icono svg { width: 14px; height: 14px; }
.cola-item:hover .cola-icono, .rut-fila-caja:hover .cola-icono, .cola-icono:focus-visible { opacity: 1; }
.cola-icono:hover { color: var(--texto); background: var(--realce); opacity: 1; }
.cola-icono.peligro:hover { color: var(--estado-espera); background: color-mix(in oklab, var(--estado-espera) 14%, transparent); }
/* La fila elegida se nota sin cambiar de tamaño. */
.cola-item.marcada, .rut-fila-caja.marcada { background: var(--realce); }

/* La barra de lote ocupa el sitio de la línea de ayuda: aparece al marcar la primera y se
   va con la última, sin empujar la lista. */
.cola-lote {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 3px 4px 3px 10px;
  border-radius: 999px; background: var(--panel-2); border: 1px solid var(--borde);
}
/* La cabecera de la lista: la casilla de “todas” en la MISMA columna que las de las filas (borde de
   1 px + 10 px de relleno de cada fila) y a su lado la ayuda o la barra de lote, que ya no llevan
   margen propio: lo pone la cabecera. */
.cola-cabeza { display: flex; align-items: center; gap: 8px; min-height: 30px; margin: 0 0 8px; padding-left: 11px; }
.cola-cabeza .cola-ayuda, .cola-cabeza .cola-lote { margin: 0; }
.cola-cabeza .cola-lote { flex: 1; min-width: 0; }
.cola-cabeza:hover .cola-marca i { opacity: 1; }
.cola-marca[aria-checked="mixed"] i { opacity: 1; background: var(--contraste); border-color: var(--contraste); }
.cola-marca[aria-checked="mixed"]::after {
  content: ''; position: absolute; left: 4.5px; top: 7.2px;
  width: 7px; height: 1.7px; border-radius: 1px; background: var(--contraste-texto);
  pointer-events: none;
}
.cola-lote-cuenta { flex: 1; min-width: 0; font-size: 11.5px; color: var(--texto-2); }
.cola-lote .cola-lote-salir { width: 22px; height: 22px; font-size: 12px; opacity: .7; }

/* La fila de una rutina pasa a ser una CAJA con tres partes (casilla, botón, gestos): el
   botón ya no puede ser la fila entera porque un botón no puede llevar botones dentro. */
.rut-fila-caja {
  display: flex; align-items: center; gap: 6px;
  border-radius: 11px; padding-right: 4px;
  transition: background var(--dur-1, .16s) var(--ease, ease);
}
.rut-fila-caja > .cola-marca { margin-left: 8px; }
.rut-fila-caja .rut-fila { flex: 1; min-width: 0; padding-left: 2px; }
.rut-fila-caja:hover { background: var(--realce); }
.rut-fila-caja:hover .rut-fila:hover { background: none; }

/* ═══ EN UN GRUPO, LA CARA DE QUIEN ESCRIBE ═══
   En un hilo de cinco, el nombre en letra pequeña obliga a leer para saber quién habla. La
   cara va pegada al globo y acompaña al ÚLTIMO de cada tanda (como la cola), así que una
   ráfaga de tres mensajes lleva una cara, no tres. El hueco lo abre el hilo del grupo: en
   un 1-a-1 no hay a quién distinguir y los globos siguen pegados al borde. */
.msj-hilo.grupo .burbuja.prici, .msj-hilo.grupo .msj-tecleando { margin-left: 36px; }
.burbuja-foto {
  position: absolute; left: -36px; bottom: 0;
  width: 28px; height: 28px; pointer-events: none;
}
.burbuja-foto[data-ver-tarjeta] { pointer-events: auto; cursor: pointer; padding: 0; border: 0; background: none; border-radius: 50%; }
.burbuja-foto[data-ver-tarjeta]:focus-visible { outline: 2px solid var(--contraste); outline-offset: 2px; }
.burbuja-foto .chat-agente-avatar { width: 28px; height: 28px; font-size: 11.5px; }
/* Las fotos de otro en un grupo van con el mismo sangrado que sus globos, su nombre arriba y, si cierran
   la tanda, su cara (14-oct-2026: salían pegadas al borde). */
.fotos-grupo { position: relative; align-self: flex-start; margin-left: 36px; max-width: min(300px, 78%); }
.fotos-grupo > .fotos-envio { max-width: 100%; }
@media (max-width: 900px) {
  .msj-hilo.grupo .burbuja.prici, .msj-hilo.grupo .msj-tecleando, .fotos-grupo { margin-left: 32px; }
  .burbuja-foto { left: -32px; width: 25px; height: 25px; }
  .burbuja-foto .chat-agente-avatar { width: 25px; height: 25px; font-size: 11px; }
}

/* La cita DENTRO del globo: una línea de acento a la izquierda, autor y un adelanto. */
.burbuja-cita {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-left: 2px solid currentColor; border-radius: 4px;
  background: rgba(127, 127, 127, .14); color: inherit; font: inherit;
  padding: 5px 8px; margin: 0 0 6px;
  opacity: .78;
}
.burbuja-cita:hover { opacity: 1; }
.burbuja-cita .cita-cuerpo { display: block; min-width: 0; }
.burbuja-cita.con-mini { display: flex; align-items: center; gap: 10px; }
.burbuja-cita.con-mini .cita-cuerpo { flex: 1; }
.burbuja-cita .cita-mini { flex: none; width: 38px; height: 38px; border-radius: 5px; object-fit: cover; background: rgba(127, 127, 127, .2); }
.burbuja-cita .cita-autor { display: block; font-size: 11px; font-weight: 600; }
.burbuja-cita .cita-texto {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; line-height: 1.35;
}
/* La tarea de una cita, como en el globo: su título en el azul de las menciones (15-oct-2026). */
.cita-tarea { color: var(--azul); font-weight: 600; }
.burbuja.director .cita-tarea { color: #1a52a8; }
/* Al llegar desde una cita, el mensaje citado se señala un momento. */
.burbuja.resaltada { animation: cita-señala 1.4s var(--ease, ease); }
@keyframes cita-señala {
  25%, 60% { background-color: var(--globo-resalte); }   /* el mismo tono de “seleccionado”, nunca morado (7-oct-2026) */
}

/* Sobre el compositor, a qué estás respondiendo. */
.msj-citando {
  order: -1; flex: 1 0 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: 0 2px 6px;
  border-radius: 10px; border-left: 1px solid var(--contraste);
  background: var(--panel-2); min-width: 0;
}
.msj-citando .cita-autor svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.msj-citando.oculto { display: none; }
.msj-citando .cita-autor { font-size: 11.5px; font-weight: 600; color: var(--texto-2); flex: none; }
.msj-citando .cita-texto {
  font-size: 12px; color: var(--texto-suave); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cita-quitar {
  flex: none; border: 0; background: none; color: var(--texto-suave);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.cita-quitar:hover { color: var(--texto); background: var(--realce); }

/* La identidad de un GRUPO se lee como la de un contacto: caras, nombre y descripción, y
   debajo el mismo carril de pestañas. Los miembros son una sección más (Miembros). */
.ficha-contacto-grupo .msj-canal-avatares { display: flex; justify-content: center; margin-bottom: 8px; }
.ficha-contacto-grupo .msj-canal-avatares .chat-agente-avatar {
  width: 46px; height: 46px; font-size: 17px; margin-left: -12px; border: 2px solid var(--panel);
}
.ficha-contacto-grupo .msj-canal-avatares .chat-agente-avatar:first-child { margin-left: 0; }

/* En la cola de un canal, cada tarea dice de quién es: son de varios. */
.cola-item-dueno {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--texto-suave); margin-bottom: 2px;
}
.cola-item-dueno .chat-agente-avatar { width: 15px; height: 15px; font-size: 8px; }

/* Dentro de una tarea solo queda la salida: compartir, archivar y eliminar viven en su fila de la
   lista (regla del director, 16-sep-2026). */
.tarea-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cola-accion {
  flex: none; border: 0; background: none; font: inherit; font-size: 11px; cursor: pointer;
  color: var(--texto-suave); padding: 3px 8px; border-radius: 999px;
  transition: color .16s var(--ease, ease), background .16s var(--ease, ease);
}
.cola-accion:hover { color: var(--texto); background: var(--realce); }
.cola-accion.peligro:hover { color: var(--estado-espera); background: color-mix(in oklab, var(--estado-espera) 14%, transparent); }
.cola-accion[disabled] { opacity: .5; cursor: default; }

/* ═══ SINAPSIS EN DOS COLUMNAS ═══
   Decisión del director (8-sep-2026): a la izquierda SOLO el mapa, en proporción vertical
   —una nube de puntos se navega mejor alta que ancha—; a la derecha todo lo que se lee, el
   encabezado arriba y la tabla debajo, sin la caja que metía filtros y tabla en un cuadro. */
/* Solo cuando ES el grupo abierto: `.config-grupo { display: none }` lo esconde, y un
   `display: grid` suelto aquí ganaba y lo dejaba visible bajo cualquier otra sección. */
.config-grupo.sinapsis.activo {
  display: grid; grid-template-columns: minmax(340px, 42%) 1fr; gap: 18px;
  align-items: start;
}
/* ═══ EL MAPA ES UNA VENTANA, NO UNA TARJETA ═══ (regla del director, 10-sep-2026)
   Va de borde a borde del alto visible y NO se mueve: lo que se desplaza es la columna de la
   derecha, ella sola. Antes era una tarjeta —línea gris alrededor, respiro arriba y abajo, y
   el alto salido del ancho (3:4)— y eso dejaba medio panel de negro debajo; encima, al bajar
   la tabla el mapa se iba con ella, justo cuando más falta hace tenerlo delante. Sin marco y
   pegado a los dos bordes se lee como lo que es: una ventana al cerebro que se sale de la
   pantalla.
   El alto sale de la CADENA (.seccion → .config-layout → el grupo), no de `vh`: así vale
   igual en la web —donde la tarjeta lleva su margen— y en la app de macOS, donde arranca 44
   px más abajo por los semáforos. El `:has()` lo deja atado a Sinapsis: ninguna otra
   sección de Configuración cambia de alto. */
#seccion-configuracion.seccion:has(.config-grupo.sinapsis.activo),
#seccion-configuracion:has(.config-grupo.sinapsis.activo) .config-layout { height: 100%; }
/* La fila del submenú ocupa TODO el alto (`1fr`): con la altura salida del contenido, el
   grupo se estiraba hasta donde llegara la tabla y debajo quedaba el hueco negro. */
#seccion-configuracion:has(.config-grupo.sinapsis.activo) .config-layout { grid-auto-rows: minmax(0, 1fr); }
/* La cadena pasa por aquí: los grupos no cuelgan del submenú, cuelgan de este envoltorio. */
#seccion-configuracion:has(.config-grupo.sinapsis.activo) .config-contenido { height: 100%; min-height: 0; }
.config-grupo.sinapsis.activo {
  /* El alto de la fila MÁS el respiro que se come: eso es lo que lo saca por los dos bordes. */
  height: calc(100% + var(--respiro-seccion) * 2);
  margin: calc(var(--respiro-seccion) * -1) 0;
  align-items: stretch;
}
.sinapsis-mapa { min-height: 0; }
.config-grupo.sinapsis .mapa-cerebro {
  height: 100%; aspect-ratio: auto; min-height: 0; max-height: none;
  margin: 0; border: 0; border-radius: 0;
}
/* SOLO SE DESPLAZA LA TABLA (regla del director, 10-sep-2026). Antes se desplazaba la columna
   entera y al bajar por las notas se iban con ellas el título, el buscador y los filtros, justo
   lo que hace falta tener delante para buscar. Ahora la columna no se mueve: todo queda fijo
   arriba y solo corren las filas, con su cabecera pegada. */
.sinapsis-lado {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden;
  padding: var(--respiro-seccion) 0;
}
.sinapsis-lado > * { flex: none; }
/* Los resultados de la búsqueda, si los hay, se desplazan dentro de su propio hueco. */
.sinapsis-lado > #cerebro-resultados:not(.oculto) { flex: 0 1 auto; min-height: 0; max-height: 40%; overflow-y: auto; }
.sinapsis-lado > #cerebro-notas { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sinapsis-lado .mapa-tabla-barra { flex: none; }
.sinapsis-lado .mapa-filas {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.sinapsis-lado .mapa-fila.cabecera { position: sticky; top: 0; z-index: 1; background: var(--fondo); }
.sinapsis-lado .config-cabeza { margin-top: 0; }
.sinapsis-lado .config-cabeza h2 { flex: none; }
.sinapsis-lado .config-cabeza .filtro-select { flex: 0 1 auto; }
.sinapsis-lado .elon-stats { margin-bottom: 6px; }
/* La tabla va SUELTA bajo el encabezado: fuera el cuadro que metía los filtros y las filas
   en una sola caja con borde. Quedan las filas y su separador, nada más. */
.config-grupo.sinapsis .mapa-tabla { margin-bottom: 0; }
.config-grupo.sinapsis .mapa-filas { border: 0; border-radius: 0; background: none; }
.config-grupo.sinapsis .mapa-fila { padding-left: 0; padding-right: 0; }
/* En una columna estrecha la ruta y la fecha se comen el título: se dejan encoger. */
.config-grupo.sinapsis .mapa-fila { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) 44px 76px; gap: 10px; }
/* En 76 px no caben “19:09:31” y “2026-09-09” lado a lado: la hora se montaba sobre la columna
   de fragmentos. En una columna estrecha van una encima de otra. */
.config-grupo.sinapsis .mapa-fila-fecha { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.25; }
.config-grupo.sinapsis .mapa-buscar { min-width: 0; flex: 1 1 180px; }
/* En una ventana estrecha vuelve a ser una sola columna: el mapa arriba. */
@media (max-width: 1100px) {
  .config-grupo.sinapsis.activo {
    grid-template-columns: 1fr; height: auto; margin: 0; align-items: start;
  }
  #seccion-configuracion:has(.config-grupo.sinapsis.activo) .config-contenido { height: auto; }
  #seccion-configuracion.seccion:has(.config-grupo.sinapsis.activo),
  #seccion-configuracion:has(.config-grupo.sinapsis.activo) .config-layout { height: auto; }
  #seccion-configuracion:has(.config-grupo.sinapsis.activo) .config-layout { grid-auto-rows: auto; }
  .config-grupo.sinapsis .mapa-cerebro { height: 420px; }
  .sinapsis-lado { overflow: visible; padding: 0; }
  .sinapsis-lado .mapa-filas { overflow: visible; }
  .sinapsis-lado .mapa-fila.cabecera { position: static; }
}

/* El cajón de la columna derecha, solo si el sistema no pide menos movimiento: la pista y la opacidad
   con la misma curva larga y suave. Al cerrar, el panel se apaga cuando ya va de salida, y se oculta
   del todo (visibility) solo cuando la pista ya llegó a cero. */
@media (prefers-reduced-motion: no-preference) {
  .msj-layout { transition: grid-template-columns 560ms cubic-bezier(.45, .05, .2, 1); }
  .msj-miembros { transition: opacity 360ms cubic-bezier(.45, .05, .2, 1) 80ms, visibility 0s linear 0s; }
  .msj-layout.sin-ficha .msj-miembros { transition: opacity 320ms ease 180ms, visibility 0s linear 560ms; }
}

/* La zona de la que no se vuelve: eliminar una organización. */
.zona-roja-titulo { color: var(--peligro); }
.org-borrar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--panel-2); }
.org-borrar:last-child { border-bottom: 0; }
.org-borrar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.org-borrar-info span { font-size: 12px; color: var(--texto-suave); }
.org-borrar-form { flex: 1 0 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.org-borrar-form.oculto { display: none; }
.org-borrar-nombre {
  background: var(--fondo); border: 1px solid var(--peligro); color: var(--texto);
  border-radius: 9px; padding: 8px 11px; font-size: 12.5px; font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LO QUE WEBKIT DA DE SÍ PARA EL VIDRIO, Y POR QUÉ LOS BOTONES SE QUEDAN COMO ESTÁN
   (17-sep-2026). El director mandó mirar liquid-dom y de paso “revisar qué más botones
   puedes cambiar a glass”. Se probó —el “+”, el micrófono, la llamada, los círculos de la
   ficha, la caja del compositor, los botones de texto— y su respuesta fue clara: “tampoco me
   gustaron los demás botones que dejaste con liquid glass”. Así que el vidrio se queda donde
   siempre: el disco de lo que te espera, su gota y las superficies grandes. Lo que sí queda
   de aquella prueba, porque cuesta horas volver a averiguarlo, es lo MEDIDO en el WKWebView:
     · `backdrop-filter: url(#filtro)` se parsea pero NO pinta nada: no hay refracción por mapa
       de desplazamiento (y `feImage` con un `data:` tampoco carga dentro de un filtro), así que
       el liquid glass con refracción de verdad —lo que liquid-dom hace con WebGPU— no se puede;
     · `transform: scale()` sobre una capa con `backdrop-filter` NO amplía el fondo;
     · anidar `backdrop-filter` NO funciona: un elemento con `backdrop-filter` es la raíz del
       fondo de sus hijos, así que el hijo no ve la página. Las capas tienen que ser HERMANAS, y
       por eso el canto del disco (`.pend-boton::after`, hermano de `.pend-vidrio`) sí difumina.
   De ahí viene el único cambio que se quedó: el compositor pasa su desenfoque a un
   pseudo-elemento para dejar de ser la raíz del fondo. Se ve exactamente igual, y el disco que
   vive dentro por fin refracta la conversación de verdad en vez de un rectángulo vacío. */
.msj-entrada { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.msj-entrada::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--fondo) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}

/* EN QUÉ VA AHORA, BAJO LA FASE EN CURSO (17-sep-2026): el paso real de la traza, con un punto que
   late. En el chat manda “escribiendo”; el detalle del trabajo se lee aquí, que es donde se mira
   cómo va la tarea. Solo sale mientras un proceso suyo está trabajando ESTA ficha. */
.fase-ahora { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: 12px; color: var(--texto-2); }
.fase-ahora i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-2); }
@media (prefers-reduced-motion: no-preference) { .fase-ahora i { animation: fase-ahora-late 1.4s ease-in-out infinite; } }
@keyframes fase-ahora-late { 0%, 100% { opacity: .35; scale: .8; } 50% { opacity: 1; scale: 1.15; } }

/* HASTA DÓNDE LLEGA LA FICHA (17-sep-2026): la condición de cierre, a la vista dentro de la tarea.
   Es el contrato: mientras eso no pase, la ficha no se cierra (lo comprueba gestionar_tarea). */
.tarea-cierra { font-size: 12.5px; color: var(--texto-2); margin: 6px 0 0; }
/* La sesión que la trabaja (6-nov-2026, docs/cabeza-y-sesiones.md): un dato, discreto. */
.tarea-sesion { font-size: 11.5px; color: var(--texto-suave); margin: 4px 0 0; }
/* SE REPITE: la programación de una tarea, dentro de ella (4-oct-2026). Un bloque con relleno tenue, sin borde:
   cada cuándo en grande, la próxima vez debajo, sus botones y sus ejecuciones. */
.tarea-estado.programada { color: var(--texto-2); border-color: color-mix(in oklab, var(--texto-2) 40%, transparent); }
.prog { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--realce); }
.prog-nada { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; font-size: 12.5px; color: var(--texto-suave); }
.prog-nada .btn { margin-left: auto; }
.prog-cab { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.prog-icono { display: inline-flex; width: 15px; height: 15px; color: var(--texto-suave); flex: none; }
.prog-icono svg { width: 100%; height: 100%; }
.prog-rotulo { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--texto-suave); }
.prog-estado { margin-left: auto; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.prog-estado.activa { color: var(--estado-hecha); }
.prog-estado.corre { color: var(--estado-curso); }
.prog-cuando { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.prog-prox { margin: 3px 0 0; font-size: 12px; color: var(--texto-2); }
.prog-instr { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.prog-instr b { color: var(--texto-suave); font-weight: 600; }
.prog-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.prog-acciones .btn.mini, .prog-pie .btn.mini, .prog-nada .btn.mini { font-size: 11.5px; padding: 5px 11px; }
/* Las ejecuciones son OTRO cuadro, debajo del de la programación, y cada una se ve como una fase de la tarea
   (regla del director, 4-oct-2026). */
.prog-historial { margin-top: 8px; }
.prog-historial .prog-cab { margin-bottom: 8px; }
.corridas { display: flex; flex-direction: column; gap: 6px; }
.corrida .fase-banda { background: var(--panel-2); }
.corrida.corriendo .fase-marca { background: var(--estado-curso); }
.corrida.cancelada .fase-marca { background: #ff6b6b; color: #fff; }
.corrida .fase-agentes { padding: 8px 10px 10px 18px; gap: 8px; }
.prog-mas { margin: 6px 2px 0; padding: 0; border: 0; background: none; color: var(--texto-2); font: inherit; font-size: 12px; cursor: pointer; }
.prog-mas:hover { color: var(--texto); }
/* El formulario: una frecuencia a la vez, con lo que esa frecuencia necesita debajo. */
.prog-frec { display: flex; width: 100%; min-width: 0; box-sizing: border-box; gap: 2px; padding: 3px; border-radius: 11px; background: var(--panel-2, rgba(255,255,255,.06)); margin: 4px 0 10px; }
.prog-frec button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: clamp(10.5px, 3vw, 12.5px); padding: 6px 5px; border-radius: 8px; cursor: pointer; }
.prog-frec button.sel { background: var(--contraste); color: var(--contraste-texto); }
.prog-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.prog-etq { font-size: 12px; color: var(--texto-suave); min-width: 112px; }
.prog-dias { display: flex; gap: 5px; }
.prog-dias button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--panel-2, rgba(255,255,255,.06)); color: var(--texto-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.prog-dias button.sel { background: var(--contraste); color: var(--contraste-texto); }
.prog-campo { border: 0; border-radius: 9px; background: var(--panel-2, rgba(255,255,255,.06)); color: var(--texto); font: inherit; font-size: 13px; padding: 6px 10px; color-scheme: dark light; }
.prog-campo:focus { outline: 1px solid var(--texto-suave); }
.prog-nota { font-size: 11.5px; color: var(--texto-suave); }
/* CÓMO SE HACE (6-nov-2026, recetas.js): la receta de la tarea con sus ejemplos aprobados. */
.receta-nombre { margin: 0 0 8px; font-size: 13px; color: var(--texto); }
.receta-nombre b { font-weight: 600; }
.receta-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 2px 0 8px; }
.receta-foto { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.receta-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--panel-2); cursor: zoom-in; }
.receta-foto figcaption { font-size: 11px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receta-otros { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.receta-correcciones { margin-top: 10px; }
.receta-correcciones ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.receta-correcciones li { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.4; }
.receta-dijo { color: var(--texto); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.receta-regla { color: var(--texto-suave); }
.receta-correcciones small { font-size: 11px; color: var(--texto-suave); }
/* Lo aprobado lo dice la persona (loAprobado.js): lo que propuso y sus referencias, apagadas; «No es esta», discreto. */
.receta-propuesta, .receta-referencias { margin-top: 8px; }
.receta-referencias .receta-otros, .receta-propuesta .receta-otros { opacity: .78; }
.receta-foto .btn.mini[data-no-es-esta], .receta-otros .btn.mini[data-no-es-esta] { align-self: flex-start; font-size: 11px; padding: 2px 8px; }
/* La hora con piezas de la app: dos listas cortas y el a. m. / p. m. como el selector de frecuencia. */
.prog-hora { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.prog-hora select.prog-campo { padding: 6px 8px; min-width: 52px; text-align: center; appearance: none; -webkit-appearance: none; }
.prog-hora-sep { color: var(--texto-suave); font-weight: 600; }
.prog-ampm { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--panel-2, rgba(255,255,255,.06)); margin-left: 4px; }
.prog-ampm button { border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 7px; cursor: pointer; }
.prog-ampm button.sel { background: var(--contraste); color: var(--contraste-texto); }
.prog-frec button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 430px) {
  .prog { padding-inline: 10px; }
  .prog-frec { gap: 1px; }
  .prog-frec button { padding-inline: 3px; letter-spacing: -.02em; }
}
/* Cada X tiempo (14-oct-2026): horas, minutos y segundos, y lo que eso cuesta al día. */
.prog-cada { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prog-cada label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-suave); }
.prog-num { width: 58px; text-align: center; -moz-appearance: textfield; }
.prog-num::-webkit-outer-spin-button, .prog-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prog-frec.prog-frec-chica { margin: 0; }
.prog-costo { margin: 4px 0 8px; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }
.prog-que { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.prog-que textarea { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.45; }
.prog-pie { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.prog-aviso { margin-right: auto; font-size: 12px; color: var(--estado-espera); }
.cola-item-repite { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cola-item-repite svg { width: 11px; height: 11px; flex: none; }
.cola-item.programada .cola-item-estado { color: var(--texto-2); }
.tarea-cierra b { color: var(--texto-suave); font-weight: 600; }
/* En qué va la ficha, y si te necesita, para qué (28-sep-2026). Mismo peso que “Cierra cuando”:
   es contexto que se lee de un vistazo, no un aviso. */
.tarea-novedad { font-size: 12.5px; color: var(--texto-2); margin: 6px 0 0; white-space: pre-wrap; }
.tarea-novedad b { color: var(--texto-suave); font-weight: 600; }

/* ─── PARA MÍ O PARA MI NEGOCIO, ARRIBA DE LA PRIMERA PÁGINA (17-sep-2026) ───────
   Dos fichas que se encienden, como las caras al crear un grupo: la elegida lleva el relleno
   fuerte y el resto es texto. Cambia las preguntas del asistente, nunca a quién puedes contratar. */
.ob-uso { display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; }
.ob-uso-titulo { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.ob-uso-fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .ob-uso-fichas { grid-template-columns: 1fr; } }
.ob-uso-ficha {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 11px 13px; border: 0; border-radius: 14px;
  background: var(--realce); color: var(--texto); font: inherit;
  transition: background var(--dur-1, .18s) var(--ease, ease), box-shadow var(--dur-1, .18s) var(--ease, ease);
}
.ob-uso-ficha b { font-size: 13.5px; font-weight: 600; }
.ob-uso-ficha span { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }
.ob-uso-ficha:hover { background: var(--realce-fuerte); }
.ob-uso-ficha.elegida { background: var(--contraste); color: var(--contraste-texto); }
.ob-uso-ficha.elegida span { color: color-mix(in srgb, var(--contraste-texto) 68%, transparent); }
.ob-uso-ficha:disabled { opacity: .6; cursor: default; }

/* ─── "Listo" con novedad: un punto, no una decisión ──────────────────────────────
   Reemplaza a la tarjeta “Revisa la entrega”, que el director mandó quitar el 10-sep-2026
   (“terminará aprobando documentos como si el agente fuera un niño pequeño”). Misma
   geometría que el punto de "Necesita tu atención" —6 px, esquina superior derecha— pero
   BLANCO y quieto: aquel reclama una decisión, este solo dice que esto es nuevo. La
   estructura va sin prefijo porque las dos superficies la necesitan igual; el relleno del
   botón, que solo hace falta para despegarlo del fondo del navegador, va con el prefijo. */
.ktarjeta.terminado { position: relative; }
.ktarjeta.terminado .kpunto-nuevo {
  position: absolute; top: 14px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
.ktarjeta.terminado .kvisto {
  position: absolute; top: 8px; right: 22px;
  display: none; place-items: center; width: 18px; height: 18px;
  border: 0; border-radius: 50%; padding: 0;
  color: var(--texto-suave); cursor: pointer;
}
.ktarjeta.terminado .kvisto svg { width: 11px; height: 11px; }
.ktarjeta.terminado.sin-ver:hover .kvisto { display: grid; }
.ktarjeta.terminado.sin-ver:hover .kpunto-nuevo { display: none; }
html:not(.app-mac) .ktarjeta.terminado .kvisto { background: var(--panel-2); }
html:not(.app-mac) .ktarjeta.terminado .kvisto:hover { color: var(--texto); }

/* ─── Con qué modelo piensan (Configuración → Intelecto) ──────────────────────────
   Tres fichas que se encienden, no un desplegable: la decisión es comparar coste contra
   criterio, y para comparar hay que ver las tres a la vez. Misma lógica que las caras del
   modal de canal. La estructura no lleva prefijo —las dos superficies la necesitan igual—;
   el relleno y el borde, que solo hacen falta para despegarlas del fondo del navegador, sí. */
.modelo-bloque { margin-top: 18px; }
.modelo-titulo { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 9px; }
.modelo-fichas { display: flex; gap: 8px; flex-wrap: wrap; }
.modelo-ficha {
  flex: 1 1 180px; min-width: 168px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid transparent;
  color: var(--texto-suave); font-family: inherit; background: none;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.modelo-ficha .modelo-nombre { font-size: 13px; font-weight: 600; }
.modelo-ficha .modelo-para { font-size: 11.5px; line-height: 1.45; }
.modelo-ficha.elegido { color: var(--texto); border-color: rgba(255, 255, 255, .28); }
.modelo-ficha:hover { color: var(--texto); }
html:not(.app-mac) .modelo-ficha { background: var(--panel-2); }
html:not(.app-mac) .modelo-ficha.elegido { background: rgba(255, 255, 255, .08); }
.modelo-ficha.sin-acceso { opacity: .38; cursor: not-allowed; }
.modelo-ficha.sin-acceso:hover { color: var(--texto-suave); }
/* La lista sale del proveedor (14-oct-2026): lo recién salido lleva su marca, y debajo van todas las versiones. */
.modelo-nuevo {
  margin-left: 7px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 10.5px; font-weight: 600; background: var(--realce-fuerte); color: var(--texto);
}
.modelo-fijo { margin: 10px 0 0; font-size: 12px; color: var(--texto-2); }
.modelo-ver-todas {
  margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--texto-suave);
}
.modelo-ver-todas:hover { color: var(--texto); }
.modelo-versiones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.modelo-version {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid transparent; background: var(--realce); color: var(--texto-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.modelo-version:hover { color: var(--texto); }
.modelo-version.elegido { color: var(--texto); border-color: var(--contraste); }
.modelo-version .modelo-nuevo { margin-left: 0; }
.modelo-version-fecha { color: var(--texto-suave); font-size: 11px; }
.modelo-bloque > .ayuda { margin-top: 14px; }
/* El de cada colaborador (pestaña Modelo de su ficha, 14-oct-2026): las mismas fichas en una columna estrecha, y
   debajo sus funciones —niveles de esfuerzo como píldoras y dos interruptores—. */
.colab-modelo { margin-top: 4px; }
.colab-modelo .modelo-ficha { flex-basis: 100%; min-width: 0; }
.colab-modelo .modelo-titulo.colab-sub { margin-top: 18px; }
.colab-modelo .modelo-version:disabled { opacity: .38; cursor: not-allowed; }
.colab-aviso { margin: 0 0 12px; color: var(--texto); }
.colab-funcion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.colab-funcion b { display: block; font-size: 13px; font-weight: 600; }
.colab-funcion small { display: block; font-size: 11.5px; color: var(--texto-suave); line-height: 1.45; }
.colab-funcion .interruptor { flex: none; }

/* POR DÓNDE SE LE DAN ÓRDENES (27-oct-2026, pestaña Canales de su ficha): cada canal en una fila con su logo y un
   selector de dos posiciones; al cambiarlo, la fila se desliza a su grupo (deslizarCanales, app.js). */
.canales-bloque { margin-top: 4px; }
.canales-explica { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.canales-explica b { color: var(--texto); font-weight: 600; }
.canales-bloque .modelo-titulo.colab-sub { margin-top: 18px; }
.canales-lista { display: grid; gap: 6px; }
/* En la columna de la ficha (~320 px) el selector va DEBAJO del nombre, a lo ancho: al lado se comía el texto. */
.canal-fila {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 8px;
  padding: 10px; border-radius: 14px; background: var(--realce);
}
.canal-logo {
  position: relative; width: 32px; height: 32px; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center; background: var(--panel-2);
}
.canal-logo img { position: absolute; inset: 5px; width: 22px; height: 22px; object-fit: contain; }
.canal-letra { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.canal-logo > img[src="/logo.png"] { inset: 0; width: 32px; height: 32px; }
.canal-glifo { display: grid; place-items: center; width: 100%; height: 100%; }
.canal-glifo svg { width: 18px; height: 18px; }
.canal-glifo.wa { color: #fff; background: linear-gradient(180deg, #5ffc7b, #28d146); }
.canal-glifo.sms { color: #fff; background: linear-gradient(180deg, #6ce36c, #2fbe4b); }
.canal-glifo.tel { color: var(--texto); }
.canal-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.canal-txt b { font-size: 13px; font-weight: 600; color: var(--texto); }
.canal-txt small { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canal-fijo { display: grid; place-items: center; width: 30px; height: 30px; color: var(--texto-suave); }
.canal-fijo svg { width: 16px; height: 16px; }
.canal-rol { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; padding: 2px; gap: 2px; border-radius: 999px; background: var(--panel-2); }
.canal-rol-op {
  border: 0; background: transparent; color: var(--texto-suave); font: inherit; font-size: 11.5px; line-height: 1;
  padding: 7px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.canal-rol-op:hover:not(:disabled) { color: var(--texto); }
.canal-rol-op.elegido { background: var(--contraste); color: var(--contraste-texto, #000); }
.canal-rol-op:disabled { cursor: default; }
.canal-rol-op:disabled:not(.elegido) { opacity: .55; }
.canal-rol-op:focus-visible { outline: 1px solid var(--contraste); outline-offset: 1px; }
.canales-vacio { margin: 0; padding: 4px 2px; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }
/* LOS NÚMEROS DE SU LÍNEA (27-oct-2026): la misma fila de un canal, con su inicial, una ✕ para quitarlo y el selector
   debajo; y el formulario para agregar uno, en una tarjeta del mismo relleno. */
.numero-quitar {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--texto-suave); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.numero-quitar:hover { background: var(--panel-2); color: var(--texto); }
.numero-quitar:focus-visible { outline: 1px solid var(--contraste); outline-offset: 1px; }
.numero-quitar svg { width: 14px; height: 14px; }
.numero-nuevo { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 14px; background: var(--realce); }
.numero-nuevo .entrada { width: 100%; box-sizing: border-box; border-color: transparent; background: var(--panel-2); }
.numero-nuevo .entrada:focus { border-color: var(--contraste); }
.numero-nuevo .btn { justify-self: end; }
.numero-aviso { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRATACIÓN: LAS ÁREAS, Y DENTRO DE CADA UNA SUS PERSONAS
   (regla del director, 11-sep-2026: “no como cargos regados, sino cada área las más
   importantes que puede tener cualquier empresa, y dentro de cada área varios roles”).
   La distribución es por CARRILES: un área por fila, sus candidatos en horizontal, como se
   recorre un equipo de verdad. Al buscar o filtrar por área, los carriles se funden en una
   rejilla de resultados — la misma pantalla cambia de forma según lo que estés haciendo.
   La tarjeta es la de una red profesional: portada, cara encima del filo, nombre, cargo y
   una línea de enfoque. La portada es un cuadro que retrata su carácter.
   ═══════════════════════════════════════════════════════════════════════════ */
.contrata-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.contrata-titulo { min-width: 0; }
.contrata-titulo h2 { margin: 0 0 4px; }
.contrata-titulo .ayuda { max-width: 62ch; margin: 0; }
.contrata-buscar {
  flex: 0 1 340px; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid transparent;
  transition: border-color .16s var(--ease, ease);
}
.contrata-buscar svg { width: 15px; height: 15px; color: var(--texto-suave); flex: none; }
.contrata-buscar input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--texto); font: inherit; font-size: 13px;
}
.contrata-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Las áreas, como filtros: el punto de color es el del área, no un adorno */
.contrata-areas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.filtro-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.filtro-rotulo {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
  width: 66px; flex: none;
}
.area-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 13px; border-radius: 999px;
  background: transparent; border: 1px solid var(--borde); color: var(--texto-2);
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.area-chip:hover { color: var(--texto); background: var(--realce); }
.area-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--texto-suave)); flex: none; }
.area-chip.activo { background: var(--contraste); border-color: var(--contraste); color: var(--contraste-texto); }
.area-chip.activo i { background: var(--contraste-texto); }
.area-chip em { font-style: normal; color: var(--texto-suave); font-size: 11.5px; }
.area-chip.activo em { color: var(--contraste-texto); opacity: .7; }
/* LOS CARGOS Y SUS VACANTES (regla del director, 3-oct-2026). Un cargo cubierto en este espacio
   lleva el sello verde de “trabaja contigo” y se apaga un punto: sigue ahí para ver a quién tienes,
   pero lo que se lee primero es lo que todavía está vacante. */
.cargo-chip svg { width: 14px; height: 14px; margin: 0 -3px 0 -2px; color: var(--ok); flex: none; }
.cargo-chip.cubierto:not(.activo) { color: var(--texto-suave); }
.cargo-chip.activo svg { color: var(--contraste-texto); }

/* ─── UN MOSAICO, NO UNA CUADRÍCULA (reglas del director, 11-sep-2026) ───
   Primero fueron carriles por área (cortaban la última tarjeta de cada fila); después una
   rejilla perfecta, y el director la vio “muy cuadriculada”. Ahora es un mosaico en columnas:
   las fichas fluyen y cada una lleva la portada a una altura distinta, así que las filas no se
   alinean y la pantalla respira. Sigue llenando todo el ancho útil y la categoría va dentro de
   cada ficha. */
/* MOSAICO EN COLUMNAS (el director lo pidió de vuelta el 11-sep-2026: “deja este orden de los
   cuadrados como el que tenía antes”). Las fichas fluyen por columnas y cada una lleva su
   portada a una altura distinta, así que las filas no se alinean y la pantalla respira. El
   precio, conocido y aceptado, es que las caras quedan a distinta altura: aquí eso es el ritmo
   del mosaico, no un descuadre. */
.contrata-carriles {
  columns: 244px 5; column-gap: 14px;
}
/* CADA TARJETA VA EN SU CELDA, Y EL AIRE ENTRE UNA Y OTRA ES DE LA CELDA (padding), NO UN MARGEN
   (fallo del director, 15-sep-2026: “me gustaría que Iker estuviera en la misma línea de los
   demás”). En WebKit —el motor de la app— el margen inferior de la última tarjeta de una columna
   se pasa a la columna siguiente y empuja hacia abajo a la primera: medido en un WKWebView, con
   margen alguna columna arrancaba 14 px más abajo en las 96 combinaciones de ancho probadas, y con
   el aire dentro de una celda que no se parte, en ninguna. El mosaico no cambia: solo que la
   primera fila de caras arranca a la misma altura. */
.contrata-carriles > .fp-celda {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  padding-bottom: 14px;
}
/* Cinco alturas de portada que se van turnando: el escalonado sale de aquí, no del azar
   (con azar, cada repintado movería las tarjetas de sitio delante del director). Cuentan las
   CELDAS: dentro de la suya, cada tarjeta es siempre la primera. */
.fp-celda:nth-child(5n+1) .fp-portada { height: 96px; }
.fp-celda:nth-child(5n+2) .fp-portada { height: 66px; }
.fp-celda:nth-child(5n+3) .fp-portada { height: 128px; }
.fp-celda:nth-child(5n+4) .fp-portada { height: 74px; }
.fp-celda:nth-child(5n+5) .fp-portada { height: 108px; }
.contrata-nada { color: var(--texto-suave); font-size: 13px; padding: 30px 2px; }

/* ─── La tarjeta de una persona ─── */
.ficha-persona {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
  overflow: hidden; cursor: pointer; text-align: left; padding: 0; color: var(--texto);
  font: inherit; width: 100%;
  transition: transform .18s var(--ease, ease), border-color .18s, box-shadow .18s;
}
.ficha-persona:hover { transform: translateY(-3px); }
.ficha-persona:focus-visible { outline: 2px solid var(--borde-2); outline-offset: 2px; }
.fp-portada {
  height: 74px; background: var(--panel-3) center/cover no-repeat; position: relative; flex: none;
}
.fp-portada::after {   /* el cuadro se apaga hacia abajo para que la cara no compita con él */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), color-mix(in srgb, var(--panel) 72%, transparent));
}
.fp-cara {
  position: absolute; left: 16px; bottom: -26px; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--panel); background: var(--contraste); color: var(--contraste-texto);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px;
}
.fp-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* EL CUADRO ES UNA <img>, NO UN FONDO (regla del director, 3-oct-2026: “se ve cómo se ponen las
   fotos”): con la foto ya en memoria se pinta en el mismo cuadro que la tarjeta (ver precargarFoto).
   El degradado de ::after sigue encima y la cara, encima de los dos. */
.fp-cuadro, .ph-cuadro {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
/* La rejilla entra ENTERA cuando sus fotos ya están, nunca a pedazos (revelarCuandoEstenLasFotos):
   mientras tanto no se ve, y al estar se funde en un tercio de segundo. */
.contrata-carriles { transition: opacity .32s var(--ease, ease); }
.contrata-carriles.esperando-fotos { opacity: 0; transition: none; }
.fp-cuerpo { padding: 32px 16px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-nombre { display: flex; align-items: center; gap: 5px; font-weight: 650; font-size: 14.5px; }
.fp-nombre svg { width: 14px; height: 14px; color: var(--c, var(--acento)); flex: none; }
.fp-cargo { font-size: 12.5px; color: var(--texto-2); }
.fp-enfoque {
  font-size: 12px; color: var(--texto-suave); margin-top: 2px; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fp-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 14px; }
/* La categoría, dentro de la ficha: el punto lleva el color de su área */
.fp-area { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--texto-suave); min-width: 0; }
.fp-area i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--texto-suave)); flex: none; }
.fp-area { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-marca {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  color: var(--ok); font-weight: 600;
}
.fp-marca.libre { color: var(--texto-suave); font-weight: 500; }
/* Ya trabaja contigo, pero en otro espacio: ni el verde del contratado ni el gris del libre
   (regla del director, 16-sep-2026). Se trae, no se contrata. */
.fp-marca.traer { color: var(--acento); font-weight: 600; }
.fp-marca svg { width: 12px; height: 12px; }

/* ─── La hoja grande: el mismo velo y la misma entrada que la ficha de una tarea ─── */
.perfil-hoja {
  /* CENTRADA (regla del director, 11-sep-2026: “las tarjetas deben salir en el centro de la
     pantalla, no arriba”). Antes iba clavada a 56px del borde superior, así que una ficha
     corta —Elon, sin formación— dejaba media pantalla vacía debajo y quedaba descolgada. */
  position: fixed; z-index: 58; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(780px, calc(100vw - 48px)); max-height: min(86vh, 900px);
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain;
  /* SÓLIDO. Con el fondo translúcido de la ficha de tarea, aquí se leía la pantalla de atrás
     por debajo del texto: esa ficha vive sobre el tablero, y esta sobre una parrilla de caras. */
  background: var(--panel); isolation: isolate;
  border-radius: 24px;
}
.perfil-hoja.oculto { display: none; }
.ph-portada { position: relative; height: 168px; background: var(--panel-3) center/cover no-repeat; flex: none; }
.ph-portada::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), color-mix(in srgb, var(--panel) 80%, transparent));
}
.ph-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .42); color: #fff; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ph-cerrar:hover { background: rgba(0, 0, 0, .6); }
/* El crédito del cuadro va a la DERECHA: a la izquierda cae justo detrás de la cara, que
   asoma por debajo del filo de la portada, y quedaba medio tapado. */
.ph-obra {
  position: absolute; right: 18px; bottom: 12px; z-index: 2; max-width: 62%; text-align: right;
  font-size: 11px; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph-cara {
  position: absolute; left: 24px; bottom: -38px; z-index: 2;
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  border: 4px solid var(--panel); background: var(--contraste); color: var(--contraste-texto);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 32px;
}
.ph-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cuerpo { overflow-y: auto; padding: 48px 24px 24px; min-height: 0; }
.ph-nombre { display: flex; align-items: center; gap: 7px; font-size: 21px; font-weight: 680; margin: 0; }
.ph-nombre svg { width: 17px; height: 17px; color: var(--c, var(--acento)); flex: none; }
.ph-cargo { font-size: 14px; color: var(--texto-2); margin: 1px 0 0; }
/* SE POSTULA (regla del director, 11-sep-2026): la hoja se lee como una candidatura, no como
   una ficha de catálogo. Este rótulo solo sale en quien todavía no trabaja contigo. */
.ph-postula {
  margin: 6px 0 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-suave);
}
.ph-meta { font-size: 12.5px; color: var(--texto-suave); margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-meta i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.ph-meta .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ph-acciones { display: flex; gap: 9px; margin: 18px 0 4px; flex-wrap: wrap; }
.ph-contratado {
  display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 4px;
  font-size: 12.5px; color: var(--ok); font-weight: 600;
}
.ph-contratado svg { width: 14px; height: 14px; }
.ph-nota-traer { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--texto-suave); }
.ph-seccion { margin-top: 22px; }
.ph-seccion h4 { margin: 0 0 7px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; }
.ph-seccion p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--texto-2); }
.ph-temas { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-tema {
  font-size: 11.5px; color: var(--texto-2); padding: 4px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--borde);
}
/* ─── MI PERFIL DISC (regla del director, 3-oct-2026): cada categoría con su nombre y, al lado, cinco
   estrellas. Una sola rejilla de dos columnas con las filas en `display: contents`: los nombres miden
   lo que el más largo y las estrellas de las cuatro quedan alineadas justo a su derecha. Monocromo:
   la llena con el color del texto y la vacía con un velo de él, legible en claro y en oscuro. */
.ph-disc { display: grid; grid-template-columns: max-content max-content; align-items: center; gap: 8px 18px; }
.ph-disc-fila { display: contents; }
.ph-disc-nombre { font-size: 13.5px; line-height: 1.3; color: var(--texto-2); }
.ph-disc-estrellas { display: inline-flex; align-items: center; gap: 3px; }
.ph-disc-estrellas svg { width: 16px; height: 16px; display: block; fill: color-mix(in srgb, var(--texto) 15%, transparent); }
.ph-disc-estrellas svg.llena { fill: var(--texto); }
@media (prefers-reduced-motion: no-preference) {
  /* LA DE SIEMPRE (regla del director, 11-sep-2026: “que la animación de cuando se abren sea la
     de siempre, la de cuando se difumina el fondo; quita la que está”). Hubo aquí un efecto
     genio del Dock —la hoja salía de la tarjeta pulsada y volvía a ella— y se retira: con la
     hoja centrada ya no sale de ningún sitio concreto, y el gesto que el director reconoce es
     el de la ficha de una tarea, sobre el mismo velo difuminado.
     Se animan `translate` y `scale`, las propiedades individuales, y NO `transform`: la hoja
     usa `transform: translate(-50%, -50%)` para centrarse, y animar `transform` la
     descentraría. Es el mismo motivo por el que `tpop-entra` está escrito así. */
  .perfil-hoja:not(.oculto):not(.saliendo) { animation: tpop-entra var(--dur-3) var(--ease) backwards; }
  .perfil-hoja.saliendo { animation: pop-sale var(--dur-2) var(--ease) forwards; }
}
@media (max-width: 900px) {
  .perfil-hoja { width: calc(100vw - 24px); max-height: calc(100vh - 48px); }
  .contrata-buscar { flex-basis: 100%; }
}

/* La web: el panel de la tarjeta es translúcido como el resto del vidrio */
html:not(.app-mac) .ficha-persona { background: color-mix(in srgb, var(--panel) 86%, transparent); }

/* Las cualidades: tres en la ficha pequeña, todas en la hoja grande (con el color del área) */
.fp-rasgos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.fp-rasgo {
  font-style: normal; font-size: 10.5px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--borde); color: var(--texto-suave);
}
.ph-cualidades { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ph-cualidad {
  font-size: 12px; padding: 5px 11px; border-radius: 999px; color: var(--texto);
  background: color-mix(in srgb, var(--c, var(--acento)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--acento)) 38%, transparent);
}

/* ═══ LOS ROLES PROPIOS (regla del director, 16-oct-2026: “quiero que se puedan crear roles personalizados”) ═══
   “Crear un rol” va al lado del buscador, con relleno y sin contorno. Un rol propio no trae cuadro de portada
   ni cara de fábrica: su portada se tiñe del color de su área (degradado del área al panel) y su inicial va
   sobre ese color hasta que el banco de caras le ponga una. La hoja para crearlo es la del candidato
   (.perfil-hoja), con los campos escritos como en una hoja en blanco: el nombre como un título, el cargo
   debajo, y los chips con relleno —sin bordes ni sombras—, que se encienden con el contraste del tema. */
.contrata-lado { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
/* El ancho del buscador, escrito: dentro de otra caja flexible su `flex-basis` no cuenta para el ancho de la
   caja (cuenta el de su contenido, un input de veinte letras) y se quedaba en la mitad, con la frase cortada. */
.contrata-lado .contrata-buscar { width: 340px; }
.contrata-crear {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--panel-2); color: var(--texto); font: inherit; font-size: 13px; font-weight: 550; white-space: nowrap;
  transition: background .15s var(--ease, ease), transform .1s;
}
.contrata-crear svg { width: 15px; height: 15px; flex: none; }
.contrata-crear:hover { background: var(--realce-fuerte, var(--realce)); }
.contrata-crear:active { transform: scale(.97); }
.contrata-crear:focus-visible { outline: 2px solid color-mix(in srgb, var(--texto) 35%, transparent); outline-offset: 2px; }
.contrata-nada-crear {
  margin-left: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--texto); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .contrata-lado { flex-basis: 100%; }
  .contrata-lado .contrata-buscar { flex: 1 1 auto; width: auto; }
}

/* La tarjeta y la hoja de un rol propio: la portada con el color de su área, la inicial sobre ese color */
.ficha-persona.propia .fp-portada,
.perfil-hoja.propia .ph-portada,
.rol-hoja .ph-portada {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c, #8e8e93) 58%, var(--panel-3)) 0%, color-mix(in srgb, var(--c, #8e8e93) 16%, var(--panel-3)) 100%);
}
.fp-cara.cara-color, .ph-cara.cara-color { background: var(--c, #8e8e93); color: #fff; }
/* “Rol propio”, en la esquina de su portada: la marca se lee sin quitarle sitio al pie de la tarjeta */
.fp-sello {
  position: absolute; top: 9px; left: 10px; z-index: 1;
  padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  background: rgba(0, 0, 0, .34); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cara-propia { background: var(--cara, #8e8e93) !important; color: #fff !important; }
.ph-funcion { white-space: pre-line; }

/* La hoja para crearlo o cambiarlo */
.rol-hoja .rol-form { display: block; }
.rol-nombre, .rol-cargo {
  display: block; width: 100%; padding: 0; border: 0; outline: none; background: none;
  color: var(--texto); font-family: inherit;
}
.rol-nombre { margin-top: 2px; font-size: 22px; font-weight: 680; letter-spacing: -.3px; line-height: 1.3; }
.rol-cargo { margin-top: 4px; font-size: 14px; color: var(--texto-2); }
.rol-nombre::placeholder { color: color-mix(in srgb, var(--texto) 26%, transparent); }
.rol-cargo::placeholder, .rol-funcion::placeholder { color: var(--texto-suave); }
.rol-funcion {
  display: block; width: 100%; min-height: 96px; padding: 10px 12px; border: 0; border-radius: 12px; resize: vertical;
  background: var(--realce); color: var(--texto); font: inherit; font-size: 13.5px; line-height: 1.55;
}
.rol-funcion:focus { outline: 2px solid color-mix(in srgb, var(--texto) 22%, transparent); outline-offset: 1px; }
.rol-h4-nota { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; margin-left: 6px; }
.rol-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rol-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--realce); color: var(--texto-2); font: inherit; font-size: 12.5px;
  transition: background .15s var(--ease, ease), color .15s, opacity .15s, transform .1s;
}
.rol-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--texto-suave)); flex: none; }
.rol-chip:hover { color: var(--texto); background: var(--realce-fuerte, var(--realce)); }
.rol-chip:active { transform: scale(.96); }
.rol-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--texto) 35%, transparent); outline-offset: 2px; }
.rol-chip[aria-pressed="true"] { background: var(--contraste); color: var(--contraste-texto); }
.rol-chip[aria-pressed="true"] i { background: var(--contraste-texto); }
/* La primera cualidad elegida es la que más lo define (de ella sale cómo responde al tono): un punto la señala */
.rol-chip.primera::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.rol-chip.apagada { opacity: .38; cursor: default; }
.rol-chip.apagada:hover { background: var(--realce); color: var(--texto-2); }
.rol-hoja .ph-seccion .rol-nota { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--texto-suave); }
/* El pie va fuera del cuerpo que se desplaza (la hoja es una columna: portada, cuerpo, pie), así que el botón
   de guardar está siempre a la vista. La portada es más baja que la de un candidato: aquí se escribe. */
.rol-hoja .ph-portada { height: 120px; }
.rol-hoja .ph-cuerpo { padding-bottom: 8px; }
.rol-pie { display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 24px 22px; background: var(--panel); }
.rol-pista { flex: 1; min-width: 0; margin: 0; font-size: 12px; color: var(--texto-suave); }
.rol-guardar {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--contraste); color: var(--contraste-texto); font: inherit; font-size: 13px; font-weight: 600;
  transition: opacity .15s var(--ease, ease), transform .1s;
}
.rol-guardar svg { width: 15px; height: 15px; }
.rol-guardar:hover:not(:disabled) { opacity: .86; }
.rol-guardar:active:not(:disabled) { transform: scale(.96); }
.rol-guardar:disabled { opacity: .3; cursor: not-allowed; }

/* ═══ EN LA WEB, EL FONDO ES UN COLOR SÓLIDO DEL TEMA (regla del director, 15-sep-2026) ═══
   “Quiero que el fondo en web sea color sólido según el tema que tenga el usuario.” Fuera el
   cielo azul con su veta de luz: detrás de la tarjeta grande queda el `--fondo` del tema, que ya
   resuelve los tres estados (oscuro, claro y “según el sistema”). Y sin nada detrás que refractar,
   el desenfoque de esa tarjeta no se ve pero se paga en cada cuadro: también fuera. Solo en la
   web: en la app de macOS el fondo es el escritorio de verdad y ahí no se toca nada. */
html:not(.app-mac) body { background: var(--fondo); }
html:not(.app-mac) body::before, html:not(.app-mac) body::after { display: none; }
html:not(.app-mac) .app-layout { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Y SIN EL BORDE DE FUERA (regla del director, 15-sep-2026: “quita ese borde externo en web y deja
   de fondo un color sólido”). La tarjeta grande de vidrio tenía margen alrededor, filo de luz, radio,
   sombra y un reflejo en diagonal: en la web, sin nada detrás que refractar, se leía como un marco.
   Ahora llena la ventana de borde a borde con el color del panel del tema, sólido; la tarjeta negra
   de cada sección sigue encima con su radio. `--margen-v` a cero hace que todo lo que medía contra
   ese margen (el alto de la tarjeta, el del chat) se acomode solo. */
html:not(.app-mac) { --margen-v: 0px; }
html:not(.app-mac) .app-layout { border: 0; border-radius: 0; box-shadow: none; background: var(--panel); }
html:not(.app-mac) .app-layout::before { display: none; }

/* ═══ LA CABECERA DE LA FICHA SE QUEDA QUIETA (regla del director, 1-oct-2026) ═══
   “Esta sección debe ser estática cuando yo bajo o subo la sección de tareas.” La foto, los círculos y el carril
   van juntos en `.ficha-cabeza`, pegada arriba de la columna; lo de cada pestaña pasa por debajo y se desvanece
   en su borde. #msj-ficha no genera caja (`display: contents`): así la cabecera se pega contra la columna entera,
   no solo mientras su contenedor sigue a la vista (las listas de Tareas y Rutinas viven fuera de él). */
#msj-ficha { display: contents; }
.msj-miembros { padding-top: 0; }
.ficha-cabeza {
  position: sticky; top: 0; z-index: 5; width: 292px; flex: none; display: flow-root;
  padding-top: 26px; background: var(--fondo);
}
.ficha-cabeza::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(var(--fondo), transparent);
}
/* EL DESVANECIDO VA EN EL HUECO, NO ENCIMA DE LO PRIMERO (regla del director, 1-oct-2026: “acá se ve cortado
   arriba; me gusta cómo funciona todo en esa sección pero no quiero que se corte”). El aire de debajo del carril
   iba DENTRO de la cabecera, así que el degradado empezaba justo donde empieza la pestaña y le tapaba media
   altura al selector “En cola · Finalizadas · Archivadas” sin haber desplazado nada. Ahora ese aire va FUERA,
   como margen de la cabecera, y el degradado mide lo mismo: en reposo cae sobre el hueco vacío y solo se ve
   sobre el contenido cuando de verdad pasa por debajo. */
.ficha-cabeza > .ficha-tabs { margin-bottom: 0; }
.ficha-cabeza { margin-bottom: 14px; }
.ficha-panel { width: 292px; flex: none; }
.ficha-cerrar { top: 10px; z-index: 7; }
/* Con su computador abierto en grande, la ✕ de la ficha (que va por encima de la cabecera) asomaba detrás de la del
   computador y se veían dos (1-oct-2026, “arregla esto que sale cuando abrimos el compu”). */
.msj-layout.con-computador .ficha-cerrar, .msj-layout.con-visor .ficha-cerrar { visibility: hidden; }

/* ═══ SU COMPUTADOR, EN GRANDE Y DENTRO DE LA APP (regla del director, 1-oct-2026) ═══
   La columna del colaborador se ensancha (`--ancho-computador`, lo mide app.js) y encima va el velo de los
   popups —difumina su ficha, que queda debajo—, con su pantalla en el centro y un resplandor de su color. La
   conversación no se toca: sigue a la vista y se puede usar. */
.msj-computador { display: none; }
.msj-layout.con-computador,
.msj-layout.con-computador.sin-ficha,
.msj-layout.con-visor,
.msj-layout.con-visor.sin-ficha { grid-template-columns: 280px minmax(0, 1fr) var(--ancho-computador, 640px); }
/* Cada columna en su celda, a mano: con el computador en la celda de la ficha, la colocación automática de la
   rejilla mandaba la ficha a una segunda fila. Así el computador se pone ENCIMA de la ficha, que se difumina. */
.msj-layout.con-computador > .msj-lista { grid-column: 1; grid-row: 1; }
.msj-layout.con-computador > .msj-conv { grid-column: 2; grid-row: 1; }
.msj-layout.con-computador > .msj-miembros { grid-column: 3; grid-row: 1; }
/* FUERA DEL FLUJO DE LA REJILLA (4-oct-2026, “revisa la animación de cuando se minimiza porque sigue mal”). Al
   cerrarlo, la columna vuelve a su ancho mientras la pantalla se va (`saliendo`, 260 ms); en ese rato el computador
   seguía ocupando la columna 3 sin la colocación explícita de `.con-computador`, y la ficha se iba a una SEGUNDA
   FILA, debajo de la conversación: la pantalla volaba hacia allá y luego saltaba a su sitio (medido cuadro a cuadro).
   Absoluto sobre su celda no cuenta para la colocación automática: la ficha nunca se mueve de la columna 3. */
.msj-layout { position: relative; }
.msj-computador:not([hidden]) {
  grid-column: 3; grid-row: 1; position: absolute; inset: 0; z-index: 6; min-width: 0; min-height: 0;
  display: grid; place-items: center; overflow: hidden; container-type: size;
  background: var(--velo-hoja);
  -webkit-backdrop-filter: blur(16px) saturate(.9);
          backdrop-filter: blur(16px) saturate(.9);
}
.computador-escena {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(calc(100cqw - 56px), calc((100cqh - 150px) * 16 / 9));
}
/* El resplandor de su color, detrás de su pantalla: el mismo tono de su fondo (src/piel.js). */
.computador-escena::before {
  content: ''; position: absolute; inset: -8% -6% 14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--piel-medio, transparent), transparent);
  opacity: .4; filter: blur(34px);
}
.computador-pantalla { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.computador-pantalla iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Quién lo usa, ARRIBA de su pantalla; abajo, cómo está y el interruptor (regla del director, 4-oct-2026: “que ese
   texto aparezca arriba de la máquina cuando está grande y que abajo esté un botón para encender o apagar, el estado y
   un puntico rojo o verde”). */
.computador-quien { font-size: 13px; color: var(--texto-2); text-align: center; }
.computador-quien b { color: var(--texto); font-weight: 600; }
.computador-estado { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); min-height: 30px; }
.computador-estado:empty { display: none; }
.computador-estado .computador-dice { color: var(--texto); font-weight: 500; }
.computador-estado .btn { margin-left: 6px; }
.computador-luz { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--peligro); transition: background .25s var(--ease); }
.computador-luz.encendido { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.computador-luz.apagado { box-shadow: 0 0 0 3px color-mix(in srgb, var(--peligro) 20%, transparent); }
/* Mientras cambia, la luz late: se está encendiendo o apagando, todavía no es ni lo uno ni lo otro. */
.computador-luz.cambiando { background: var(--texto-suave); animation: computador-luz-late 1s ease-in-out infinite; }
@keyframes computador-luz-late { 50% { opacity: .35; } }
/* En la ficha, debajo de la miniatura: a todo el ancho, el estado a la izquierda y el botón a la derecha. */
#maquina-estado { margin-top: 10px; padding: 0 2px; }
#maquina-estado .btn { margin-left: auto; }
.computador-tomar {
  border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--contraste); color: var(--contraste-texto);
  transition: transform .15s var(--ease);
}
.computador-tomar:active { transform: scale(.96); }
.computador-cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--realce); color: var(--texto);
}
.computador-cerrar svg { width: 15px; height: 15px; }
.computador-cerrar:hover { background: var(--realce-fuerte); }
/* TODA LA PANTALLA: al lado de la ✕ en grande, y en la ficha junto a su interruptor. */
.computador-a-toda { right: 52px; }
#maquina-estado { flex-wrap: wrap; }
#maquina-estado .btn.computador-completa { margin-left: 6px; }
/* DENTRO DE SU COMPUTADOR (3-nov-2026, “eso sea lo único que se vea, sin márgenes, sin nada”). Con su #id: la regla de su
   columna en el teléfono pesa más que dos clases. Lo que rodea a su pantalla no se ve; solo el botón de salir. */
.computador-minimizar { display: none; }
#msj-computador.dentro:not([hidden]) {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; z-index: 10000; display: block; overflow: hidden;
  background: #000; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#msj-computador.dentro .computador-escena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#msj-computador.dentro .computador-escena::before,
#msj-computador.dentro .computador-quien,
#msj-computador.dentro .computador-estado,
#msj-computador.dentro .computador-cerrar { display: none; }
#msj-computador.dentro .computador-pantalla { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
#msj-computador.dentro .computador-minimizar {
  position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, .62); opacity: .78; transition: opacity .15s var(--ease);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#msj-computador.dentro .computador-minimizar svg { width: 13px; height: 13px; }
#msj-computador.dentro .computador-minimizar:hover,
#msj-computador.dentro .computador-minimizar:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .msj-computador:not([hidden]) { animation: computador-entra 300ms var(--ease, ease) backwards; }
  .msj-computador:not([hidden]) .computador-escena { animation: computador-escena 420ms cubic-bezier(.2, .8, .2, 1) 60ms backwards; }
  .msj-computador.saliendo { animation: computador-sale 240ms var(--ease, ease) forwards; }
}
/* Al volver a un chat donde lo dejaste abierto, ya está ahí: sin animación de entrada (app.js, “CADA CHAT, COMO LO
   DEJASTE”). */
.msj-computador.sin-entrada:not([hidden]), .msj-computador.sin-entrada:not([hidden]) .computador-escena { animation: none; }
@keyframes computador-entra { from { opacity: 0; } }
@keyframes computador-escena { from { opacity: 0; transform: scale(.95); } }
@keyframes computador-sale { to { opacity: 0; } }
/* Al cerrarlo: la pantalla grande se esconde en el acto y la que vuelve a la miniatura es su foto (app.js,
   volverALaMiniatura). */
.msj-computador.volando .computador-escena,
.msj-computador.volando .computador-cerrar { visibility: hidden; }
.computador-vuelo {
  position: fixed; z-index: 140; pointer-events: none; overflow: hidden;
  border-radius: 16px; background: #000; will-change: left, top, width, height;
}
.computador-vuelo img, .computador-vuelo canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.computador-vuelo.sin-copia { background: var(--panel-2, #1c1c1e); }
/* Sin columna del colaborador (pantallas estrechas), su computador ocupa todo Mensajes. */
@media (max-width: 1100px) {
  .msj-layout.con-computador, .msj-layout.con-visor { grid-template-columns: 240px minmax(0, 1fr); }
  .msj-computador:not([hidden]) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .msj-layout.con-computador { grid-template-columns: minmax(0, 1fr); }
  .msj-computador:not([hidden]) { position: relative; inset: auto; min-height: 70vh; }   /* en una columna, en el flujo */
}

/* La miniatura de su computador se mira, no se maneja: tocarla lo abre en grande. Lo dice un icono de ampliar en
   su esquina (regla del director, 2-oct-2026), que se enciende al pasar por encima. */
.maquina-agrandar {
  position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: zoom-in;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.maquina-agrandar span {
  margin: 0 8px 8px 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 20, 22, .72); color: #f5f5f7;
  opacity: .78; transition: opacity .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.maquina-agrandar span svg { width: 14px; height: 14px; }
.maquina-agrandar:hover span, .maquina-agrandar:focus-visible span { opacity: 1; transform: scale(1.08); background: rgba(20, 20, 22, .9); }
/* Dormido se ve como lo dejó: su última pantalla, entera y a todo color, como la viva (que noVNC escala igual). */
.maquina-ultima { position: absolute; inset: 0; background: #000; }
.maquina-ultima img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ═══ ENSEÑARLE ALGO NUEVO EN SU COMPUTADOR (regla del director, 7-oct-2026: “un botón minimalista como el app que
   diga Enseñar algo nuevo, en un lugar donde quede bien organizado”) ═══
   En grande, la barra de abajo va de lado a lado bajo su pantalla: cómo está a la izquierda y el botón a la derecha;
   mientras le enseñas, la misma barra es la de la grabación. En la ficha, debajo de su interruptor: el botón y lo que ya
   le enseñaste. Sin bordes ni sombras: el relleno separa, y el rojo es solo el punto de “Grabando”. */
.msj-computador .computador-estado { align-self: stretch; }
.computador-estado .ensenar-en-barra { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.ensenar-en-barra svg, .ensenar-boton svg { width: 14px; height: 14px; flex: none; }
.ensenar-grabando { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--texto-2); }
.ensenar-grabando b { color: var(--texto); font-weight: 600; }
.ensenar-grabando i {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 0 3px color-mix(in srgb, #ff3b30 22%, transparent);
}
.ensenar-grabando.pausada i { background: var(--texto-suave); box-shadow: none; }
.ensenar-reloj { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ensenar-acciones { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.computador-estado .ensenar-acciones .btn { margin-left: 0; }
.ensenar-llamada { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .ensenar-grabando:not(.pausada) i { animation: ensenar-late 1.4s ease-in-out infinite; }
}
@keyframes ensenar-late { 50% { opacity: .35; } }

.ensenar-ficha { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.ensenar-ficha:empty { display: none; }
.ensenar-boton {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--texto); background: var(--realce);
  transition: background .18s var(--ease), transform .15s var(--ease);
}
.ensenar-boton:hover { background: var(--realce-fuerte); }
.ensenar-boton:active { transform: scale(.98); }
.ensenar-curso {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 9px 10px 9px 13px; border-radius: 16px; background: var(--realce);
}
.ensenar-otro { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.ensenar-lista { display: flex; flex-direction: column; gap: 2px; }
.ensenar-rotulo { margin: 2px 2px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.ensenar-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s var(--ease);
}
.ensenar-item:hover, .ensenar-item:focus-visible { background: var(--realce); outline: none; }
.ensenar-mini { flex: none; width: 58px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.ensenar-mini img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ensenar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ensenar-info b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ensenar-info span { font-size: 11.5px; color: var(--texto-suave); }
.ensenar-estado { flex: none; font-size: 11px; white-space: nowrap; color: var(--texto-suave); }
.ensenar-estado.aprendida { color: var(--ok); }
.ensenar-estado.aprendiendo { color: var(--texto-2); }

/* ─── El instructivo de la primera vez: una escena pequeña y tres pasos ─── */
.hoja-ensenar { width: min(440px, calc(100vw - 32px)); }
.hoja-ensenar h3 { margin-bottom: 4px; }
.ens-escena { margin: -6px 0 18px; }
.ens-pantalla {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #222228, #111114);
}
.ens-rec {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #f5f5f7; background: rgba(0, 0, 0, .55);
}
.ens-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; }
.ens-linea { position: absolute; left: 12%; top: 36%; width: 52%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.ens-linea.corta { top: 49%; width: 34%; }
.ens-boton { position: absolute; left: 12%; top: 63%; width: 22%; height: 14%; border-radius: 999px; background: rgba(255, 255, 255, .86); }
.ens-onda {
  position: absolute; left: 23%; top: 70%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid #ff3b30; opacity: 0;
}
.ens-cursor { position: absolute; left: 72%; top: 20%; width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .ens-cursor { animation: ens-cursor 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
  .ens-onda { animation: ens-onda 3.4s ease-out infinite; }
  .ens-rec i { animation: ensenar-late 1.4s ease-in-out infinite; }
}
@keyframes ens-cursor {
  0%, 10% { left: 72%; top: 20%; transform: scale(1); }
  42% { left: 22%; top: 69%; transform: scale(1); }
  46% { left: 22%; top: 69%; transform: scale(.82); }
  50%, 72% { left: 22%; top: 69%; transform: scale(1); }
  100% { left: 72%; top: 20%; transform: scale(1); }
}
@keyframes ens-onda {
  0%, 45% { opacity: 0; transform: scale(.4); }
  48% { opacity: 1; transform: scale(.6); }
  72%, 100% { opacity: 0; transform: scale(1.6); }
}
.ens-sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.ens-pasos { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 11px; counter-reset: ens; }
.ens-pasos li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 34px; counter-increment: ens; }
.ens-pasos li::before {
  content: counter(ens); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--texto); background: var(--realce);
}
.ens-pasos b { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.ens-pasos span { font-size: 12.5px; line-height: 1.5; color: var(--texto-2); }
.ens-clave {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px;
  font-size: 12px; line-height: 1.5; color: var(--texto-2); background: var(--realce);
}
.ens-clave svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* ─── Al terminar: qué le enseñaste ─── */
.hoja-terminar-ensenar { width: min(460px, calc(100vw - 32px)); }
.hoja-terminar-ensenar h3 { margin-bottom: 4px; }
.hoja-terminar-ensenar .dialogo-input { margin-top: 14px; border: 0; border-radius: 12px; padding: 11px 13px; background: var(--realce); }
.hoja-terminar-ensenar .dialogo-input + .dialogo-input { margin-top: 8px; }
.ens-nota { resize: vertical; min-height: 58px; line-height: 1.45; }
.ens-meta { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.ens-aviso { margin: 10px 0 0; font-size: 12.5px; color: var(--peligro); }
.ens-acciones { margin-top: 20px; }
.dialogo-acciones .ens-descartar { margin-right: auto; color: var(--peligro); }

/* ─── En su chat: como una foto que mandas ─── */
.demo-chat {
  display: flex; flex-direction: column; width: 260px; max-width: 100%; padding: 0; border: 0; border-radius: 18px;
  overflow: hidden; cursor: pointer; font: inherit; text-align: left; color: var(--texto); background: var(--burbuja-otro);
}
.fotos-envio.mio .demo-chat { color: var(--burbuja-yo-texto); background: var(--burbuja-yo); }
.demo-chat-foto { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.demo-chat-img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.demo-chat-pasos {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.demo-chat-pasos svg { width: 11px; height: 11px; color: #ff3b30; }
.demo-chat-pie { display: flex; flex-direction: column; gap: 1px; padding: 9px 13px 11px; }
.demo-chat-pie small { font-size: 11px; opacity: .62; }
.demo-chat-pie b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.demo-chat:hover .demo-chat-img { filter: brightness(1.06); }
.demo-chat:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* ─── La hoja de lo que le enseñaste ─── */
.hoja-demo { position: relative; width: min(720px, calc(100vw - 32px)); max-height: min(88vh, 940px); overflow-y: auto; }
.hoja-demo h3 { margin: 4px 0 2px; padding-right: 40px; }
.hoja-demo-cerrar {
  position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--texto); background: var(--realce);
}
.hoja-demo-cerrar svg { width: 15px; height: 15px; }
.hoja-demo-cerrar:hover { background: var(--realce-fuerte); }
.hoja-demo-nota { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.hoja-demo-sec { margin-top: 20px; }
.hoja-demo-sec h4 { margin: 0 0 9px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.hoja-demo-desc { margin: 0 0 8px; font-size: 13.5px; color: var(--texto); }
.hoja-demo-proc {
  max-height: 280px; overflow-y: auto; padding: 12px 15px; border-radius: 14px;
  font-size: 13px; line-height: 1.55; color: var(--texto-2); background: var(--realce);
}
.hoja-demo-proc :is(h1, h2, h3, h4) { font-size: 13.5px; margin: 10px 0 4px; color: var(--texto); }
.hoja-demo-proc :is(p, ul, ol) { margin: 4px 0; }
.hoja-demo-proc :is(ul, ol) { padding-left: 20px; }
.hoja-demo-espera { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.hoja-demo-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hoja-demo-pasos li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 136px; gap: 10px; align-items: start; }
.hoja-demo-n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--texto); background: var(--realce);
}
.hoja-demo-dice { padding-top: 2px; font-size: 13px; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; }
.hoja-demo-dice small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-demo-foto {
  width: 136px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: #000; cursor: zoom-in;
}
.hoja-demo-foto img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hoja-demo-foto.ampliada { grid-column: 1 / -1; width: 100%; cursor: zoom-out; }
.hoja-demo-foto.final { width: 100%; margin-top: 6px; cursor: default; }
.hoja-demo-final { margin: 16px 0 0; font-size: 12px; color: var(--texto-suave); }
.hoja-demo .ens-clave { margin-top: 14px; }
@media (max-width: 600px) {
  .hoja-demo-pasos li { grid-template-columns: 24px minmax(0, 1fr); }
  .hoja-demo-foto { grid-column: 2; width: 100%; }
}

/* Lo que estás enviando sale ENTERO, como en WhatsApp (7-oct-2026): ni apagado ni con otro aspecto. Solo si el servidor
   tarda más de 3 s en confirmarlo lleva un relojito delante de la hora (app.js, enviarAlCanal). */
.burbuja.director.enviando.lento .burbuja-hora::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px;
  border: 1.2px solid currentColor; border-radius: 50%; box-sizing: border-box;
  background: linear-gradient(currentColor, currentColor) 50% 1.5px / 1.2px 3.2px no-repeat,
              linear-gradient(currentColor, currentColor) 3.6px 50% / 2.6px 1.2px no-repeat;
}


/* ═══ QUIÉN ES QUIÉN EN UNA TAREA, Y LO ÚLTIMO QUE PASÓ (1-oct-2026) ═══
   Regla del director: “fue y tocó la tarea de otro colaborador responsable sin más traza y eso no me
   gustó, es inseguro y confuso”. Dentro de la tarea se lee quién la lleva, quién colabora y cómo entró,
   de quién es el texto de “Qué necesita” y los últimos movimientos con nombre y hora. */
.tarea-firma { display: block; margin-top: 3px; font-size: 11px; color: var(--texto-suave); }
.tarea-gente { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--realce); display: grid; gap: 7px; }
.tarea-gente-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tarea-gente-rotulo { flex: none; min-width: 86px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); }
.tarea-personas { display: flex; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.tarea-persona { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto); }
.tarea-persona .chat-agente-avatar { width: 18px; height: 18px; font-size: 9px; }
.cola-obj p.tarea-aporte, .tarea-aporte { margin: 0; font-size: 12px; line-height: 1.4; color: var(--texto-2); }
.tarea-aporte b { color: var(--texto); font-weight: 600; }
.tarea-grupo { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borde-2); cursor: pointer; text-align: left; }
.tarea-grupo:hover { text-decoration-color: currentColor; }
.cola-obj p.tarea-gente-nota, .tarea-gente-nota { margin: 0; font-size: 11px; color: var(--texto-suave); }
.fase-antes { background: none; border: 0; padding: 0; font: inherit; font-size: 11px; color: var(--texto-suave); cursor: pointer; }
.fase-antes:hover { color: var(--texto); }
.movs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mov { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; font-size: 12px; line-height: 1.4; }
.mov-quien { font-weight: 600; color: var(--texto); }
.mov-cuando { grid-column: 2; grid-row: 1; font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
.mov-que { grid-column: 1 / -1; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* ═══ EL SEGUIMIENTO VIVE DENTRO DE CADA FASE (1-oct-2026) ═══
   Regla del director: “me gusta esto, el seguimiento, pero siento que eso debe estar dentro de las fases de la
   tarea y esto debe organizarse mejor”. Los movimientos cuelgan de la fase en la que pasaron, en el orden del
   reloj, y la fase se pliega tocando su banda: abierta la que corre o te espera, las demás con su marca y la
   hora en que quedaron. La fila de un movimiento es la de siempre (nombre, hora, qué pasó). */
#tareas-vista .fase-banda { grid-template-columns: 16px 1fr auto 10px; }   /* la cuarta es la flecha: vacía en la que no se abre, para que las notas caigan en la misma línea */
.fase-banda.plegable { cursor: pointer; transition: background .18s var(--ease, ease); }
.fase-banda.plegable:hover { background: color-mix(in srgb, var(--texto) 7%, var(--panel-2)); }
.fase-banda.plegable:focus-visible { outline: 1.5px solid var(--texto); outline-offset: 2px; }
.fase-flecha { width: 10px; height: 10px; color: var(--texto-suave); transition: transform .22s var(--ease, ease); }
.fase.abierta .fase-flecha { transform: rotate(90deg); }
.fase-agentes .movs { margin: 0; gap: 9px; }
.fase-agentes .subs + .movs, .fase-agentes .subs + .fase-antes { margin-top: 8px; }
.fase-antes { align-self: flex-start; margin: 0 0 4px; }
.fase-agentes .movs + .fase-ahora { margin-top: 8px; }
.mov.largo { cursor: pointer; }
.mov-que.entero { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: pre-wrap; }
@media (prefers-reduced-motion: no-preference) {
  .fase.recien .fase-agentes { animation: fase-abre .24s var(--ease, ease) backwards; }
  @keyframes fase-abre { from { opacity: 0; transform: translateY(-4px); } }
}
/* Una tarea sin plan ni trabajo anotado: sus movimientos, sueltos, con la misma fila. */
.tarea-seguimiento .movs { margin-top: 6px; }
/* Quién la lleva, en la línea del estado cuando va solo (la tarjeta queda para cuando alguien colabora). */
.tarea-lleva { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texto-2); }
.tarea-lleva .chat-agente-avatar { width: 16px; height: 16px; font-size: 8px; }
/* El encabezado de la tarea y su plan no se tocan: aire fijo entre los dos, acabe en lo que acabe el encabezado. */
#tareas-vista .cola-obj { margin: 0 0 16px; }
#tareas-vista .cola-obj > :last-child { margin-bottom: 0; }
.cola-colabora { margin: 18px 0 0; }
.cola-colabora-rotulo { margin: 0 0 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.tpop-seccion > .tarea-gente { margin-top: 0; }

/* ═══ ESPACIOS COMPARTIDOS: CUENTAS, INVITACIONES Y TU PERFIL (1-oct-2026) ═══
   Regla del director: “que podamos enviar invitaciones de parte de nuestros usuarios a otros usuarios
   a unirse a sus espacios… como lo hace Notion”, “que se puedan editar la foto de perfil y el nombre”
   y “agregar cuentas y cambiar rápido entre cuentas”. Una persona se separa de lo de atrás por su
   relleno, sin sombras ni líneas de borde (regla del 15-sep). */

/* La cara de una PERSONA (no de un colaborador): su foto o su inicial. */
.persona-cara {
  flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--realce-fuerte); color: var(--texto);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.persona-cara > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-cara.usuario-cara { width: 32px; height: 32px; }
.persona-cara.perfil-cara { width: 72px; height: 72px; font-size: 28px; }

/* El selector de espacios: con qué cuenta estás, sus espacios, lo que te espera y tus otras cuentas. */
.org-menu { width: 296px; max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.org-menu .org-item { justify-content: flex-start; padding: 7px 10px; }
.org-cuenta { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.org-cuenta-datos { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.org-cuenta-datos b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-cuenta-datos span { font-size: 12px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-inicial {
  flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--realce-fuerte); color: var(--texto); font-size: 11.5px; font-weight: 700;
}
.org-item-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Con logo (6-nov-2026): el logo entero dentro del mismo cuadrito, sobre blanco para que se lea en los dos temas. */
.org-inicial.con-logo { background: #fff; overflow: hidden; }
.org-inicial.con-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* El logo de la empresa en Administración: el cuadro se toca para subirlo. */
.doc-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.doc-logo-cuadro { flex: none; width: 64px; height: 64px; border-radius: 14px; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  display: grid; place-items: center; background: var(--realce-fuerte); color: var(--texto); font-size: 24px; }
.doc-logo-cuadro:has(img) { background: #fff; }
.doc-logo-cuadro img { width: 100%; height: 100%; object-fit: contain; display: block; }
.doc-logo-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-logo-botones { display: flex; gap: 14px; margin-top: 4px; }
.org-menu .org-tag { flex: none; border: 0; background: var(--realce); }
.org-check { flex: none; display: grid; place-items: center; color: var(--texto); }
.org-check svg { width: 15px; height: 15px; }
.org-accion { color: var(--texto-2); font-size: 13.5px; }
.org-accion svg { width: 16px; height: 16px; color: var(--texto-suave); flex: none; }
.org-menu a.org-item { text-decoration: none; }
.org-seccion {
  padding: 12px 10px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
}
.org-inv { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 9px; }
.org-inv:hover { background: var(--panel-2); }
.org-inv-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.org-inv-texto b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-inv-texto span { font-size: 11.5px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-inv-si {
  flex: none; border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  background: var(--contraste); color: var(--contraste-texto);
}
.org-inv-si:disabled { opacity: .5; cursor: default; }
.org-inv-no {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave);
  display: grid; place-items: center; cursor: pointer;
}
.org-inv-no:hover { background: var(--realce); color: var(--texto); }
.org-inv-no svg { width: 13px; height: 13px; }
.org-otra { display: flex; flex-direction: column; }
.org-otra-espacio { padding-left: 50px !important; font-size: 13px; color: var(--texto-2); }
.org-pie { margin-top: 6px; padding-top: 6px; background: linear-gradient(var(--realce), var(--realce)) top / 100% 1px no-repeat; }

/* Configuración → General → Tu cuenta: tu foto y tu nombre. */
.perfil-fila { display: flex; align-items: flex-start; gap: 18px; margin-top: 6px; }
.perfil-foto {
  position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; padding: 0; border: 0;
  background: none; cursor: pointer; color: inherit;
}
.perfil-foto-cara { display: block; }
.perfil-foto-cambiar {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; transition: opacity .18s var(--ease, ease);
}
.perfil-foto-cambiar svg { width: 22px; height: 22px; }
.perfil-foto:hover .perfil-foto-cambiar, .perfil-foto:focus-visible .perfil-foto-cambiar, .perfil-foto.soltando .perfil-foto-cambiar { opacity: 1; }
.perfil-foto:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--texto-suave); }
.perfil-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.perfil-rotulo { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.perfil-nombre-fila { display: flex; gap: 8px; align-items: center; max-width: 420px; }
.perfil-nombre-fila input {
  flex: 1; min-width: 0; background: var(--realce); color: var(--texto); border: 0; border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 14px;
}
.perfil-nombre-fila input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); }
.perfil-email { font-size: 13px; color: var(--texto-suave); }
.perfil-acciones { display: flex; gap: 14px; }
.enlace-boton {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--texto-2);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borde-2);
}
.enlace-boton:hover { color: var(--texto); text-decoration-color: currentColor; }

/* Personas y seguridad → invitar: correos, rol y un botón, en una sola fila. */
.invitar-caja { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 4px; max-width: 760px; }
/* Paso 2 de invitar (29-oct-2026): con qué colaboradores podrá hablar, con las mismas casillas de los permisos. */
.invitar-paso2 { max-width: 760px; margin: 4px 0 10px; }
.invitar-colabs { padding-top: 6px; }
/* Las mismas CARAS de crear un grupo (.canal-cara): apagadas en gris, se encienden al tocarlas. */
.invitar-colabs > .ayuda, .usuario-colabs > .ayuda { margin: 0 0 14px; }
.invitar-caras, .colabs-caras { margin-bottom: 4px; }
.colabs-caras .canal-cara:disabled { cursor: default; }
.colabs-caras .canal-cara:disabled:not(.elegida) .chat-agente-avatar { opacity: .18; }
.colabs-caras .canal-cara em { font-style: normal; font-size: 10px; color: var(--texto-suave); margin-top: -5px; }
.usuario-colabs { display: block; }
.invitar-paso2-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.invitar-caja.en-paso2 textarea, .invitar-caja.en-paso2 select { opacity: .6; }
.invitar-caja.en-paso2 #invitar-boton { display: none; }
.invitar-caja textarea {
  flex: 1 1 260px; min-width: 0; resize: none; min-height: 36px; max-height: 140px; overflow-y: auto;
  background: var(--realce); color: var(--texto); border: 0; border-radius: 10px; padding: 8px 12px;
  font: inherit; font-size: 13.5px; line-height: 1.45;
}
.invitar-caja textarea:focus { outline: none; box-shadow: 0 0 0 1.5px var(--texto-suave); }
.invitar-caja select { flex: none; width: auto; max-width: 150px; height: 36px; }
.invitar-caja .btn { flex: none; height: 36px; }
@media (max-width: 640px) {
  .invitar-caja { flex-wrap: wrap; }
  .invitar-caja textarea { flex-basis: 100%; }
}
.invitacion-fila { display: flex; align-items: center; gap: 10px; }
.invitacion-fila.apagada .invitacion-datos { opacity: .6; }
.invitacion-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.invitacion-datos .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-grupo .lista .invitacion-fila .campos { flex: none; }
.invitacion-donde { font-size: 11.5px; color: var(--texto-suave); }
/* Con correo no se pinta el enlace largo: el nombre, “Correo en camino” y el botón de copiarlo. */
.invitacion-enlace.con-correo .invitacion-donde { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El correo de esa invitación no salió: se dice en el color de lo que hay que atender. */
.invitacion-fila.sin-correo .campos, .invitacion-enlace.sin-correo .invitacion-donde { color: var(--peligro); }
.usuario-tag { font-style: normal; font-weight: 500; font-size: 11px; color: var(--texto-suave); margin-left: 6px; }
.usuario-rol-fijo { font-size: 12.5px; color: var(--texto-2); padding: 0 6px; }

/* La entrada al AGREGAR otra cuenta o al llegar con una invitación: sin el reclamo de la portada. */
#pantalla-login.agregando .login-marca, #pantalla-login.agregando .login-titulo, #pantalla-login.agregando .login-sub,
#pantalla-login.invitado .login-titulo, #pantalla-login.invitado .login-sub { display: none; }
.login-agregar { margin: 0 auto 16px; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-volver { font-size: 13px; color: var(--texto-suave); text-decoration: none; }
.login-volver:hover { color: var(--texto); }

/* Todavía en ningún espacio: lo que le espera y lo que puede hacer. */
.sin-espacio-caja { width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.sin-espacio-logo { width: 64px; height: 64px; margin-bottom: 14px; }
#sin-espacio-cuerpo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sin-espacio-titulo { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.5px; }
.sin-espacio-sub { margin: 0 0 6px; color: var(--texto-suave); font-size: 15px; }
.sin-espacio-lista { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.sin-espacio-inv { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--realce); text-align: left; }
.sin-espacio-inv .org-inicial { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.sin-espacio-inv-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sin-espacio-inv-texto b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sin-espacio-inv-texto span { font-size: 12px; color: var(--texto-suave); }
.sin-espacio-nada { max-width: 360px; }
/* Cuenta suspendida (7-oct-2026): el correo de contacto se lee como texto de la app, no en el azul del navegador;
   y sin el botón de fallos, que una cuenta suspendida no puede enviar. */
.sin-espacio-nada a { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
html.cuenta-suspendida #btn-bicho { display: none; }
.sin-espacio-otras { width: 100%; text-align: left; }
.sin-espacio-otras .org-item { justify-content: flex-start; }
.sin-espacio-pie { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.sin-espacio-pie .ayuda { margin: 0; }

/* ═══ SU NOMBRE SE TOCA Y SE ESCRIBE AHÍ MISMO (regla del director, 3-oct-2026: “como renombrar un
   contacto en WhatsApp o iMessage”) ═══
   Desde el 7-oct-2026 se abre con el lápiz en su círculo que va al lado del nombre, siempre a la vista, como en la
   ficha del iPhone (`.ficha-lapiz`, arriba con la cabecera). Al tocarlo, el nombre se vuelve un campo con la misma
   letra. */
.ficha-nombre-edita { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.ficha-nombre-campo {
  width: min(240px, 100%); box-sizing: border-box; padding: 2px 10px;
  border: 0; border-radius: 10px; outline: none; box-shadow: none; appearance: none;
  background: var(--realce); color: var(--texto);
  font: inherit; font-size: 21px; font-weight: 700; letter-spacing: -.35px; text-align: center;
}
.ficha-nombre-campo::placeholder { color: var(--texto-suave); font-weight: 600; }
.ficha-nombre-botones { display: flex; gap: 8px; justify-content: center; }
.ficha-nombre-error { max-width: 240px; font-size: 12px; line-height: 1.35; color: var(--estado-espera); }
.ficha-nombre-error:empty { display: none; }
.ficha-nombre-edita.guardando { opacity: .6; pointer-events: none; }

/* “Seleccionar”, junto a la casilla de todas (4-oct-2026): texto que también se pulsa, sin aspecto de botón. */
.cola-cabeza .cola-seleccionar { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--texto-2); cursor: pointer; }
.cola-cabeza .cola-seleccionar:hover { color: var(--texto); }


/* ═══ UN ARCHIVO, EN EL LATERAL (regla del director, 4-oct-2026: “quiero que el visor de documentos se abra en el lateral
   sin dejar de ver el chat, como el computador”) ═══
   La hoja del visor (archivos-visor.js) se monta en #msj-visor, que es la misma columna que ocupa su computador en grande:
   absoluta sobre su celda, con el velo de las hojas difuminando la ficha de debajo. La hoja llena la columna con un poco
   de aire, y como esa columna es más estrecha que la ventana, la cabecera se recoge por su propio ancho (container query)
   como lo hace en un teléfono. */
.msj-visor:not([hidden]) { display: block; container: visor / size; }
.av-capa.lateral {
  position: absolute; inset: 0; z-index: auto; padding: 14px;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.av-capa.lateral .av-hoja { width: 100%; height: 100%; border-radius: 18px; }
@container visor (max-width: 700px) {
  .av-capa.lateral .av-boton:not(.solo-icono) { width: 30px; padding: 0; justify-content: center; }
  .av-capa.lateral .av-boton:not(.solo-icono) span { display: none; }
  .av-capa.lateral .av-herramientas .av-boton:not(.solo-icono) { width: auto; padding: 0 12px 0 10px; }
  .av-capa.lateral .av-herramientas .av-boton span { display: inline; }
}
@container visor (max-width: 560px) {
  .av-capa.lateral .av-cabeza { flex-wrap: wrap; row-gap: 10px; }
  .av-capa.lateral .av-herramientas { order: 3; flex: 1 0 100%; justify-content: center; }
  .av-capa.lateral .av-modo { order: 3; flex: 1 0 100%; justify-content: center; }
  .av-capa.lateral .av-papel { padding: 32px 24px; margin: 16px auto; font-size: 14.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* En el lateral no hay velo propio que fundir (lo pone la columna): solo la hoja entra y sale. */
  .av-capa.lateral { animation: none; }
  .av-capa.lateral.saliendo { animation: av-velo-sale .2s var(--ease) forwards; }
  .av-capa.sin-entrada, .av-capa.sin-entrada .av-hoja { animation: none; }
  .msj-visor.sin-entrada:not([hidden]) { animation: none; }
}

/* ═══ EL NOMBRE, SOBRE SU PROPIO VIDRIO (regla del director, 4-oct-2026: “que esto tenga un cuadrado detrás en liquid glass
   para que no se pierda con las letras del fondo, como iMessage”) ═══
   El nombre y su línea (“En línea”, el cargo) van en una pastilla de vidrio, y la foto encima, mordiendo su borde, como en
   iMessage. El vidrio difumina lo que pasa por detrás —la niebla de la cabecera ya no basta en su franja de abajo, donde
   el texto del hilo se leía detrás de “En línea”—. Funciona porque la cabecera no tiene `backdrop-filter` propio (sus dos
   veladuras son pseudo-elementos hermanos): si lo tuviera, la pastilla no vería la página (ver “LO QUE WEBKIT DA DE SÍ
   PARA EL VIDRIO”). Sin sombra y sin línea de borde: el canto es un filo de luz por dentro. */
.msj-cab-centro .msj-canal-avatares { position: relative; z-index: 1; }
.msj-cab-centro .msj-cab-vidrio {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  max-width: none; overflow: visible; white-space: normal; font-size: inherit; color: inherit;
  margin-top: -6px; padding: 6px 14px 5px; border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 46%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
          backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .2s var(--ease);
}
.msj-cab-centro:hover .msj-cab-vidrio { background: color-mix(in srgb, var(--panel) 62%, transparent); }
:root[data-tema="claro"] .msj-cab-centro .msj-cab-vidrio {
  background: color-mix(in srgb, #fff 58%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: light) {
  :root[data-tema="sistema"] .msj-cab-centro .msj-cab-vidrio {
    background: color-mix(in srgb, #fff 58%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .04);
  }
}
/* La cabecera crece lo que mide la pastilla: el hilo deja ese sitio arriba. */
.msj-conv-cabeza { padding-bottom: 10px; }

/* ═══ Administración → Números de tus colaboradores (7-oct-2026) ═══
   Cada colaborador con su número (llamadas y SMS) y su interruptor de WhatsApp. El “?” abre una nota corta con el
   porqué del límite (Meta) y el botón que abre el reporte con el mensaje ya escrito. Sin sombras ni bordes: el
   estado lo dice el relleno. */
.numeros { margin: 0 0 40px; }
.numeros-cabeza { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.numeros-cupo { font-size: .85rem; color: var(--texto-suave); }
.numeros-ayuda-btn {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-grid; place-items: center; background: var(--realce); color: var(--texto-suave);
  font: 600 .72rem/1 inherit;
}
.numeros-ayuda-btn:hover, .numeros-ayuda-btn[aria-expanded="true"] { color: var(--texto); }
.numeros-ayuda {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--panel-2); color: var(--texto-suave); font-size: .85rem;
}
.numeros-ayuda.oculto { display: none; }
.numeros-ayuda p { margin: 0; line-height: 1.45; }
.numeros-ayuda .btn { flex: none; }
.numeros-lista { display: flex; flex-direction: column; gap: 2px; }
.numeros-fila {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; grid-template-areas: "cara quien numero wa";
  align-items: center; gap: 4px 14px; padding: 8px 6px; border-radius: 12px;
}
.numeros-fila:hover { background: var(--realce); }
.numeros-fila > .chat-agente-avatar { grid-area: cara; width: 34px; height: 34px; }
.numeros-quien { grid-area: quien; display: flex; flex-direction: column; min-width: 0; }
.numeros-quien b { font-weight: 600; font-size: .92rem; }
.numeros-quien small { color: var(--texto-suave); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.numeros-fila > .numeros-numero, .numeros-fila > .btn { grid-area: numero; justify-self: end; }
.numeros-numero { font-variant-numeric: tabular-nums; font-size: .88rem; color: var(--texto); white-space: nowrap; }
.numeros-numero.sin { color: var(--texto-suave); }
.numeros-wa { grid-area: wa; display: inline-flex; align-items: center; gap: 8px; }
.numeros-wa small { min-width: 78px; text-align: right; color: var(--texto-suave); font-size: .78rem; }
.numeros-mensaje:empty { display: none; }
@media (max-width: 640px) {
  .numeros-fila { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "cara quien wa" "cara numero wa"; }
  .numeros-fila > .numeros-numero, .numeros-fila > .btn { justify-self: start; }
  .numeros-wa small { display: none; }
  .numeros-ayuda { flex-direction: column; align-items: flex-start; }
}
/* Números permitidos (tarea #69): las mismas filas que los números del equipo, con su permiso y sus acciones a la derecha. */
.permitidos-fila { grid-template-columns: 34px minmax(0, 1fr) auto auto; grid-template-areas: "cara quien numero acciones"; }
.permitidos-acciones { grid-area: acciones; display: inline-flex; align-items: center; gap: 6px; }
.permitidos-acciones select.entrada { width: auto; padding-top: 6px; padding-bottom: 6px; }
.permitidos-explica { margin: 0 0 12px; }
.permitidos-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.permitidos-form input[name="nombre"] { flex: 1 1 140px; width: auto; }
.permitidos-form input[name="numero"] { flex: 1 1 170px; width: auto; }
.permitidos-form select { flex: 0 1 150px; width: auto; }
.permitidos-agentes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: 100%; font-size: .85rem; }
.permitidos-agentes small { color: var(--texto-suave); width: 100%; }
.permitidos-agentes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.permitidos-botones { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 640px) {
  .permitidos-fila { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "cara quien" "cara numero" "cara acciones"; }
  .permitidos-fila > .numeros-numero { justify-self: start; }
  .permitidos-acciones { flex-wrap: wrap; }
}

/* ═══ ENLACES QUE ABREN ALGO DENTRO DE THINK² (regla del director, 7-oct-2026) ═══
   La solicitud que trajo un enlace (#aprobar/<id>, app.js) va señalada en el panel con el mismo aro fino del globo
   elegido: `--contraste` de 1 px, blanco en oscuro y gris en claro, nunca el acento. */
.pend-ficha.senalada { box-shadow: 0 0 0 1px var(--contraste), 0 3px 8px rgba(0, 0, 0, .34); }
/* Por debajo de 1.100 px la columna del colaborador no cabe y no se enseña. Un enlace a una tarea —o a su computador
   cuando todavía no tiene— la pone ENCIMA de la conversación, a todo el ancho, con su ✕ para volver al chat: es lo
   que pasa al tocar el enlace en el teléfono. */
@media (max-width: 1100px) {
  .msj-layout.ficha-al-frente:not(.sin-ficha) > .msj-miembros {
    display: flex; visibility: visible; opacity: 1; pointer-events: auto;
    position: absolute; inset: 0; z-index: 8; border-left: 0; padding: 0 16px 26px;
    background: var(--fondo);
  }
  /* La cabecera y la pestaña viven dentro de #msj-ficha (que no genera caja) con su ancho de columna: aquí, todo el ancho. */
  .msj-layout.ficha-al-frente:not(.sin-ficha) > .msj-miembros > :not(.ficha-cerrar),
  .msj-layout.ficha-al-frente:not(.sin-ficha) .ficha-cabeza,
  .msj-layout.ficha-al-frente:not(.sin-ficha) .ficha-panel { width: auto; }
}
/* SU COMPUTADOR EN EL TELÉFONO (7-oct-2026: el director abre #computador/<agente> desde WhatsApp). En una columna, la
   colocación a mano de `.con-computador` mandaba la conversación a una segunda columna implícita y la ficha a una
   tercera: se veían un hilo de una palabra por renglón y la ficha cortada. Aquí su pantalla va arriba, la conversación
   debajo, y la ficha no sale (su ✕ cierra el computador y deja el chat). */
@media (max-width: 900px) {
  .msj-layout.con-computador > .msj-computador:not([hidden]) {
    grid-column: 1; grid-row: 1; position: relative; inset: auto; height: 62vh; min-height: 300px;
  }
  .msj-layout.con-computador > .msj-conv { grid-column: 1; grid-row: 2; }
  .msj-layout.con-computador > .msj-miembros { display: none; }
}

/* EN UN GRUPO NO SE PIDE NADA (app.js, “EN UN GRUPO NO SE PIDE NADA”, 8-oct-2026): ni disco de aprobaciones ni tarjetas;
   lo de cada colaborador espera en su chat privado. */
#pend-boton.en-grupo { display: none; }
/* Una tarjeta de solicitud se responde igual que un globo (app.js, “RESPONDER A UNA TARJETA”, 8-oct-2026): señalada
   mientras el menú está abierto, y resaltada un momento al llegar a ella desde la cita. */
.peticion-hilo.senalada { filter: brightness(.96); }
.peticion-hilo.resaltada { animation: cita-señala 1.4s var(--ease, ease); }

/* DÓNDE LA ENCUENTRAS (14-oct-2026): los pasos para conseguir una llave, numerados, y el botón a su página. */
.tpop-donde { margin: 2px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--realce); }
.tpop-donde-titulo { font-size: 12px; font-weight: 700; color: var(--texto-2); margin-bottom: 6px; }
.tpop-donde ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13px; line-height: 1.45; color: var(--texto); }
.tpop-donde-abrir { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tpop-donde-abrir svg { width: 13px; height: 13px; }

/* EL SELECTOR DE HORARIO (14-oct-2026): las piezas de “Se repite”, en el asistente y en Administración. Los campos de
   esos formularios (`.paso select`, `.doc-campo select`) se estiran a todo el ancho y llevan una línea abajo: aquí no. */
.selector-hora { display: grid; gap: 10px; margin-top: 8px; }
.selector-hora .prog-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.selector-hora .prog-etq { min-width: 82px; font-size: 13px; color: var(--texto-2); }
.selector-hora .prog-hora { flex-wrap: nowrap; }
.paso .selector-hora select.prog-campo, .doc-campo .selector-hora select.prog-campo, .selector-hora select.prog-campo {
  display: inline-block; width: auto; min-width: 58px; flex: none; margin: 0;
  border: 0; border-radius: 9px; padding: 7px 10px; line-height: 1.2;
  background: var(--panel-2, rgba(255, 255, 255, .06)); color: var(--texto);
  font-size: 14px; text-align: center; appearance: none; -webkit-appearance: none;
}

/* PENDIENTE (14-oct-2026): abierta y sin nadie ejecutándola ahora. Ni el ámbar de “En curso” ni el rojo de “Te necesita”. */
.cola-item.pendiente .cola-item-estado { color: var(--texto-2); }
.tarea-estado.pendiente { color: var(--texto-2); border-color: color-mix(in oklab, var(--texto-2) 40%, transparent); }
/* Una ejecución de una tarea programada: su fecha en una línea. */
.fase.corrida .fase-nombre { white-space: nowrap; }

/* ═══ BUSCAR EN UN CHAT (14-oct-2026) ═══
   La lupa de la cabecera abre una barra debajo de ella, encima del hilo; los resultados van debajo, en una hoja de
   vidrio que se desplaza sola. Sin bordes ni sombras: se separa de la conversación por su relleno. */
.msj-conv-cabeza .msj-acciones .chat-icono.activo { background: var(--realce); }
.msj-buscador {
  position: absolute; z-index: 6; top: 84px; right: 14px; width: min(380px, calc(100% - 28px));
  display: flex; flex-direction: column; gap: 6px;
}
.msj-buscador.oculto { display: none; }
.msj-busca-barra {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
.msj-busca-barra > svg { width: 15px; height: 15px; flex: none; color: var(--texto-suave); }
.msj-busca-barra input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--texto); font: inherit; font-size: 13.5px;
}
.msj-busca-barra input::-webkit-search-cancel-button { display: none; }
.msj-busca-cerrar {
  width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave);
  display: grid; place-items: center; cursor: pointer;
}
.msj-busca-cerrar:hover { background: var(--realce); color: var(--texto); }
.msj-busca-cerrar svg { width: 13px; height: 13px; }
.msj-busca-lista:empty { display: none; }
.msj-busca-lista {
  max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  overscroll-behavior: contain;
}
.msj-busca-cuenta, .msj-busca-nota { padding: 6px 10px; font-size: 11.5px; color: var(--texto-suave); }
.msj-busca-nota { line-height: 1.4; }
.msj-busca-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 11px;
  background: transparent; color: var(--texto); font: inherit; cursor: pointer;
}
.msj-busca-item:hover, .msj-busca-item.elegido { background: var(--realce); }
.msj-busca-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.msj-busca-cab b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msj-busca-cab time { flex: none; font-size: 11px; color: var(--texto-suave); }
.msj-busca-texto {
  font-size: 12.5px; line-height: 1.4; color: var(--texto-suave);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.msj-busca-archivo { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--texto-suave); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msj-busca-archivo svg { width: 12px; height: 12px; flex: none; }
.msj-busca-item mark { background: transparent; color: var(--texto); font-weight: 650; }
@media (max-width: 700px) { .msj-buscador { right: 10px; left: 10px; width: auto; } }

/* ═══ HASTA 4 TAREAS A LA VEZ (14-oct-2026) ═══
   Arriba de la cola, cuántas trabaja ahora y que el orden decide cuál entra; en cada tarea en curso, el paso que está dando. */
.cola-paralelo { margin: 2px 4px 10px; font-size: 12px; line-height: 1.45; color: var(--texto-suave); }
.cola-paralelo-cuenta { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--realce); color: var(--texto); font-weight: 600; font-size: 11px; }
.cola-item-ahora { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--texto-suave); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cola-item-ahora i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--estado-curso, #e3b341); }
@media (prefers-reduced-motion: no-preference) { .cola-item-ahora i { animation: punto-late 1.6s ease-in-out infinite; } }
@keyframes punto-late { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ═══ UN DASHBOARD CITADO EN UN MENSAJE (15-oct-2026) ═══
   “[dashboard:12]” se pinta como una píldora con su icono y su nombre, dentro de la frase; al pulsarla abre el dashboard. */
.dash-mencion {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; max-width: 100%;
  padding: 1px 9px 1px 7px; margin: 0 1px; border-radius: 999px;
  background: var(--realce); color: var(--texto); font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-mencion svg { width: 13px; height: 13px; flex: none; }
.dash-mencion:hover, .dash-mencion:focus-visible { background: var(--realce-fuerte, var(--realce)); outline: none; }
.dash-mencion.sin-acceso { cursor: default; color: var(--texto-suave); font-weight: 500; }
.dash-mencion-titulo { overflow: hidden; text-overflow: ellipsis; }

/* Notas de voz, en Configuración → Intelecto (15-oct-2026): el estado en una línea y, sin clave, el campo para pegarla. */
.voz-panel { margin-top: 26px; }
.voz-estado { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 13px; }
.voz-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); }
.voz-ok .punto-verde { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #2fbf71); flex: none; }
.voz-falta { color: var(--texto-suave); }
.voz-form { display: flex; gap: 8px; align-items: center; max-width: 520px; }
.voz-form input { flex: 1; min-width: 0; background: var(--realce); border: 0; color: var(--texto); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 12.5px; }
.voz-form input:focus { outline: none; box-shadow: 0 0 0 1px var(--texto-suave); }
.voz-form.oculto { display: none; }

/* La nota de voz (15-oct-2026): mientras graba, la caja es una barra con el tiempo; y en el globo, un reproductor. */
.msj-form.grabando .msj-caja > :not(.msj-grabando), .msj-entrada.grabando .msj-caja > :not(.msj-grabando) { display: none !important; }
.msj-grabando { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0 2px 0 4px; }
.msj-grabando.oculto { display: none; }
.msj-grabando .grabando-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--peligro, #e5484d); flex: none; animation: grabando-late 1.2s ease-in-out infinite; }
.msj-grabando .grabando-tiempo { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--texto); flex: none; }
.msj-grabando .grabando-texto { font-size: 12.5px; color: var(--texto-suave); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msj-grabando .chat-enviar { display: inline-flex; }
@keyframes grabando-late { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .msj-grabando .grabando-punto { animation: none; } }
.adj-audio { display: block; padding: 0; background: none; }
.adj-audio audio { display: block; width: min(300px, 62vw); height: 40px; }

/* ═══ EL PRIMER DÍA, REHECHO (16-oct-2026): su cara del banco, qué quieres que haga, su canal y sus herramientas ═══ */
.onb-con-cara { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.onb-cara { position: relative; border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; }
.onb-cara:disabled { cursor: default; }
.onb-cara .onb-cara-foto { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--panel-2); font-size: 26px; font-weight: 600; color: var(--texto); }
.onb-cara .onb-cara-foto img { width: 100%; height: 100%; object-fit: cover; }
.onb-cara-cambiar {
  position: absolute; left: 50%; bottom: -6px; translate: -50% 0; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--contraste); color: var(--contraste-texto); white-space: nowrap; opacity: 0;
  transition: opacity .15s var(--ease);
}
.onb-cara:hover .onb-cara-cambiar, .onb-cara:focus-visible .onb-cara-cambiar { opacity: 1; }
.onb-funcion textarea {
  width: 100%; background: var(--realce); border: 0; color: var(--texto);
  border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 13.5px; resize: vertical;
}
.onb-funcion textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--texto-suave); }
.onb-sub { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
#onb-recomendadas .integ-grid { grid-template-columns: 1fr; }
/* La tienda de Configuración, mudada al primer día: sin el acceso por colaborador ni la app a la medida (eso es de
   Configuración), y con su ayuda larga fuera: el primer día ya lo explica arriba. */
.config-grupo.en-primer-dia { display: block; padding: 0; }
.config-grupo.en-primer-dia .integ-vistas, .config-grupo.en-primer-dia #btn-integracion-personalizada,
.config-grupo.en-primer-dia #apps-vista-catalogo > .ayuda { display: none; }
.config-grupo.en-primer-dia .integ-grid { grid-template-columns: 1fr; }

/* El banco de caras: una rejilla de retratos; la suya, con su aro. */
.caras-caja { width: min(640px, 92vw); }
.caras-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; max-height: 56vh; overflow-y: auto; margin: 10px 0 14px; padding: 4px; }
.caras-opcion { aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--panel-2); transition: scale .15s var(--ease); }
.caras-opcion img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caras-opcion:hover { scale: 1.05; }
.caras-opcion.activa { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--texto); }
.caras-opcion:disabled { opacity: .5; }
/* Tres canales en una fila: WhatsApp, SMS y “Solo en Think²” (16-oct-2026). */
.onb-canales.contacto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .onb-canales.contacto { grid-template-columns: 1fr; } }
.onb-canal-logo.think2 { background: #0d0d10; }
.onb-canal-logo.think2 img { width: 30px; height: 30px; object-fit: contain; }

/* Las plantillas para escribir primero por WhatsApp (16-oct-2026): en qué van con Meta. */
.numeros-plantilla { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 10px; border-radius: 10px; background: var(--realce); }
.numeros-plantilla small { color: var(--texto-suave); white-space: nowrap; }
.numeros-plantilla small.lista { color: var(--verde, #34c759); }
.numeros-plantilla small.mal { color: var(--rojo, #ff453a); white-space: normal; text-align: right; }

/* El modelo de otros proveedores en la ficha del colaborador (29-oct-2026, intelecto.js) */
.colab-proveedor { display: flex; align-items: center; gap: 7px; }
.colab-logo-ia { width: 18px; height: 18px; border-radius: 5px; padding: 2px; background: var(--realce); object-fit: contain; }

/* ═══ REENVIAR (regla del director, 30-oct-2026: “que en Think² se puedan reenviar mensajes, archivos, todo”) ═══
   La marca va arriba de lo reenviado, discreta como en WhatsApp: en el globo, o sobre las fotos si es un mensaje de fotos. */
.burbuja-reenviado { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; font-size: 12px; font-style: italic; color: inherit; opacity: .62; }
.burbuja-reenviado svg { width: 13px; height: 13px; flex: none; }
.fotos-reenviado { align-self: flex-start; padding: 0 4px; color: var(--texto-suave); }
.fotos-reenviado.mio { align-self: flex-end; }
.fotos-reenviado.en-grupo { margin-left: 40px; }
.fotos-envio.senalada { outline: 1px solid var(--contraste); outline-offset: 3px; border-radius: 16px; }
.hoja-reenviar .reenviar-que { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
.hoja-reenviar .reenv-chats { max-height: min(46vh, 360px); overflow-y: auto; }
/* El mensaje que acompaña a lo que reenvías (5-nov-2026): una caja de relleno tenue, sin borde, como la del compositor. */
.hoja-reenviar .reenv-mensaje { display: block; width: 100%; box-sizing: border-box; margin-top: 14px; padding: 10px 14px; min-height: 40px; max-height: 140px; resize: none; border: 0; outline: none; border-radius: 20px; background: var(--realce); color: var(--texto); font: inherit; font-size: 14px; line-height: 1.4; }
.hoja-reenviar .reenv-mensaje::placeholder { color: var(--texto-suave); }
.hoja-reenviar .reenv-mensaje:focus-visible { box-shadow: inset 0 0 0 1px var(--texto-suave); }