/* Plataforma — sistema visual (§12 de la spec).
   Claro, neutro, sobrio, con UN acento de marca (`--acento`) y nada más.
   Se usa en exactamente tres sitios y no debe aparecer en un cuarto:
     · el ítem activo del riel
     · el anillo de foco
     · la acción principal de cada pantalla
   Los dos colores salen del logo de Advanze: el marino del fondo (#00183c) y
   el azul del isotipo (#0052cc). No son una elección de gusto.
   La disciplina es lo que hace que un acento se lea como marca en vez de como
   adorno. El resto de la interfaz es gris. */

:root{
  /* ESCALA DE LA INTERFAZ — no inventar valores fuera de estas listas.
     Antes había 44 tamaños de letra, 20 pesos y 17 radios distintos: nadie
     distingue un 620 de un 640, pero garantizan que dos pantallas hechas en
     semanas distintas no casen. `npm test` falla si aparece uno nuevo.

       letra   10 · 11 · 12 · 13 · 14 · 16 · 18 · 22 · 28
       peso    400 (normal) · 550 (medio) · 680 (fuerte)
       radio   4 · 8 · 12 · 16 · 20 · 999 (píldora)

     Lo de abajo es otra cosa: la escala del DOCUMENTO, no la de la interfaz.
     Son las medidas medidas del editor de Cabinet, tomadas del navegador sobre
     una página real: cuerpo 15 con interlínea 1.65, títulos 32 / 24 / 20 con
     apretado óptico creciente, columna de 704 de texto. La escala de arriba
     vale para botones y etiquetas; un documento que se lee seguido pide otra
     cosa —la de aquí— y por eso son dos listas y no una. */
  --col:800px; --canal:48px;
  --f-parrafo:15px;  --l-parrafo:25px;
  --f-h1:32px;       --l-h1:38px;
  --f-h2:24px;       --l-h2:31px;
  --f-h3:20px;       --l-h3:28px;
  --f-titulo:32px;   --l-titulo:38px;
  --lienzo:#edeef1;
  /* El área de trabajo de un tablero (portada de cliente, Inicio) va en gris y
     las fichas en blanco, como un informe en papel. Un punto más claro que el
     lienzo de fuera para que no parezca un agujero en la tarjeta. */
  --tablero:#f5f5f7;
  --panel:#fff; --panel-2:#fbfbfc;
  --tinta:#17181b; --tinta-2:#5c6169; --tinta-3:#6e737a;
  --linea:#ececee; --linea-2:#e2e2e5;
  --primario:#00183c; --primario-txt:#fff;
  --acento:#0052cc; --acento-b:#e9f0fd; --acento-borde:#c5d8f7;
  /* El azul del isotipo, aclarado. El de marca (#0052cc) puesto en un difuminado
     grande tira a marino y ensucia el gris; este mantiene el tono y deja que la
     luz se lea como luz. Solo se usa para eso: no pinta ningún elemento. */
  --acento-luz:#4d8df9;
  --activo:#f2f2f4; --hover:#f7f7f8;
  --r-panel:20px; --r-card:12px; --r-chip:999px;
  /* RITMO. Escala de 4 y tres reglas: 32 entre secciones, 16 entre bloques,
     8 entre filas. Había 198 combinaciones de padding distintas. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
  /* TRES ALTURAS Y NINGUNA MÁS.
       plano      la página: sin borde, sin sombra
       levantado  la tarjeta: sombra suave, sin borde
       flotante   el panel y el menú: sombra, sin borde
     Cuando todo lleva borde Y sombra, nada flota sobre nada. */
  --sombra:0 1px 2px rgba(0,24,60,.05), 0 4px 14px rgba(0,24,60,.05);
  --sombra-alta:0 12px 44px rgba(0,24,60,.16), 0 2px 8px rgba(0,24,60,.06);
  /* Inter primero: es una tipografía pensada para interfaz —números de ancho
     fijo, mayúsculas que no se confunden con la ele, alturas de x generosas— y
     la del sistema queda de red por si no carga. */
  --sans:Inter,"Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rojo:#c0392f; --rojo-b:#fdecea; --ambar:#8a5a00; --ambar-b:#fdf3e0;
  --azul:#1f4fd8; --azul-b:#eaf0fe; --morado:#6d3fc4; --morado-b:#f1ebfd;
  --verde:#146c43; --verde-b:#e8f5ee; --gris-b:#f1f1f3;
}
/* El oscuro no es el claro con los tokens dados la vuelta: los bordes suben de
   contraste (en un fondo oscuro una línea al 4 % desaparece) y los acentos
   bajan de saturación, porque un color saturado sobre negro vibra y cansa.
   El fondo lleva el marino de la marca, no un gris neutro. */
[data-tema="oscuro"]{
  --lienzo:#0b0f16; --panel:#141922; --panel-2:#1b2130;
  --tinta:#e8ecf3; --tinta-2:#a6afbd; --tinta-3:#828893;
  --linea:#232b39; --linea-2:#313b4d;
  --primario:#e7edf7; --primario-txt:#00183c;
  --acento:#5b9bff; --acento-b:#152238; --acento-borde:#26395c;
  --activo:#232b39; --hover:#1e2532;
  /* Los dos grises y la luz, invertidos. Sin esto el tablero se quedaba con el
     #f5f5f7 del tema claro —una pantalla blanca dentro de la aplicación en
     negro, con el texto blanco encima ilegible— y el difuminado, calculado
     sobre un gris claro, se veía como una niebla azul sobre el negro.
     El orden se conserva: el panel destaca del tablero y el tablero del lienzo. */
  --tablero:#101620; --acento-luz:#2c5794;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.32);
  --sombra-alta:0 12px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  --rojo-b:#3a1f1d; --ambar-b:#372a12; --azul-b:#1a2440; --morado-b:#291e42; --verde-b:#14301f; --gris-b:#26282d;
  --rojo:#e98a82; --ambar:#d3ab6a; --azul:#8aa9ee; --morado:#ab92e0; --verde:#74bc95;
}
*{box-sizing:border-box}
/* Sin esto, cualquier clase con display:flex gana al [hidden] del navegador y
   los trozos que se ocultan por atributo se siguen viendo. */
[hidden]{display:none !important}
html,body{height:100%}
/* El fondo que se destapa a la derecha al abrir el panel es del mismo color que
   la aplicación. Con el gris de escritorio detrás, el panel parecía una ventana
   aparte apoyada encima en vez de una parte más de la interfaz. */
body{
  margin:0;background:var(--panel);color:var(--tinta);font:400 14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  /* `cv11` y `ss01` de Inter: la ele minúscula con cola y la a de un piso, que
     es lo que separa un 1 de una l en una ruta o en un id. */
  font-feature-settings:"cv11","ss01";
}
/* Los números, de ancho fijo en todo lo que se lee en columna. Sin esto, un 7
   ocupa distinto que un 1 y las cifras bailan al actualizarse: es de las cosas
   que más distinguen una tabla de producto de una hoja de cálculo. */
table, .num, .cuenta, .dato-sec, .pill, time, kbd,
.dia-metrica .n, .proyecto-franja b, .carga-num, .actividad-espera b,
.inicio-hoy .n, .bd-tablero .col h4 .n, .tabla td, .tabla th{
  font-variant-numeric:tabular-nums;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--azul);text-decoration:none}
/* Anillo de foco para navegar con teclado. NO se pone en el texto editable:
   ahí el cursor ya dice dónde estás, y un recuadro azul alrededor de cada
   bloque al escribir convierte el editor en un formulario. */
button:focus-visible,a:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* En un campo de texto el cursor ya dice dónde estás. El anillo azul alrededor
   del compositor del chat o de un bloque del editor sobra y los convierte en un
   formulario. Lo que se ilumina es el marco que ya existe. */
[contenteditable]:focus,[contenteditable]:focus-visible,
input:focus-visible,textarea:focus-visible{outline:none}
.chat-caja:focus-within,.canal-compositor:focus-within,.hilo-form:focus-within{
  border-color:var(--azul);box-shadow:0 0 0 3px rgba(31,79,216,.12)}
/* Los campos con marco propio lo tiñen al enfocarse, en vez de rodearse de un
   anillo suelto. (`:not([class])` no servía: el compositor del chat tampoco
   lleva clase y se llevaba el anillo igual.) */
.modal input:focus,.modal textarea:focus,.modal select:focus,
.campo input:focus,.campo textarea:focus{border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(31,79,216,.12)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9cace;border-radius:8px;border:2px solid transparent;background-clip:content-box}
[data-tema="oscuro"] ::-webkit-scrollbar-thumb{background:#3a3d44;background-clip:content-box}

/* ── Marco ────────────────────────────────────────────────────────────── */
/* La aplicación ocupa la ventana entera: sin canto, sin esquinas redondeadas y
   sin sombra. No es una lámina apoyada en nada, es el fondo. Tuvo un canto
   arriba y a la derecha durante un rato y quedaba raro: en un tema claro ese
   hueco gris se ve, y sobraba arriba habiendo nada abajo. Lo que flota es el
   panel de conversación, que sí es una tarjeta y lleva su hueco por igual en
   los cuatro lados. */
.marco{position:fixed;inset:0;
  display:grid;grid-template-columns:56px var(--ancho-lateral,248px) 1fr;
  overflow:hidden;transition:grid-template-columns .16s ease;
  /* Los dos colores del logo, lavados y quietos detrás de todo. Antes esto solo
     asomaba por una junta de 6 px y no se veía; ahora el riel y el lateral son
     transparentes, así que el lienzo es de verdad el fondo de la aplicación y
     los difuminados hacen su trabajo: que el azul de Advanze esté presente sin
     pintar de azul ni un solo elemento. */
  background:transparent}
/* El fondo va en el `body` y no en `.marco`: el marco se encoge para hacerle
   sitio al panel de IA y al dique, y entonces el gris se cortaba a media
   pantalla dejando una franja blanca a la derecha. El lienzo es de la ventana
   entera, pase lo que pase con la rejilla de dentro. */
/* Ahora que el contenido va en tarjetas blancas sobre el gris, este lavado se
   ve en toda la aplicación y no solo por el borde. Por eso baja de intensidad y
   sube de claridad: lo que tiene que parecer es luz entrando, no un fondo de
   colores. Ninguna capa pasa del 22 %. */
body{background:
  radial-gradient(1100px 640px at 4% -12%,  color-mix(in srgb,var(--acento-luz) 22%,transparent), transparent 62%),
  radial-gradient(900px 560px at 98% -8%,   color-mix(in srgb,var(--acento-luz) 14%,transparent), transparent 60%),
  radial-gradient(820px 520px at 52% 108%,  color-mix(in srgb,var(--acento-luz) 12%,transparent), transparent 64%),
  var(--lienzo);
  background-attachment:fixed}
/* Plegar declara la rejilla, no la variable: al arrastrar el ancho del lateral
   se escribe `--ancho-lateral` EN LÍNEA sobre `.marco`, y un estilo en línea
   gana a cualquier regla de la hoja. Resultado: en cuanto habías tocado el
   tirador una vez, el botón de ocultar dejaba de hacer nada. Así se pliega
   siempre, y al desplegar vuelve el ancho que habías elegido. */
.marco.plegado{grid-template-columns:56px 0 1fr}
/* Secciones sin panel lateral (Navegador, Papelera…): el panel se colapsa igual que
   al plegar, y la sección se lee entera. No hay «Nada que listar» ni tirador. */
.marco.sin-lateral{grid-template-columns:56px 0 1fr}
.marco.sin-lateral ~ .tirador-lateral{display:none}
@media(max-width:900px){
  /* `.sin-lateral` también, o gana la regla de arriba (dos clases contra una):
     el marco se quedaba en `56px 0 1fr`, `.principal` caía en la columna de
     ancho cero y en una tableta (701-900 px) Dashboards, Navegador o Papelera
     salían en blanco (15-oct-2026, Javier: «los dashboards en tablet, fatal»). */
  .marco,.marco.plegado,.marco.sin-lateral{grid-template-columns:56px 1fr}
  .principal{margin:0}
  .principal{grid-column:2}
  .lateral{position:absolute;left:56px;top:0;bottom:0;width:270px;z-index:60;display:none;box-shadow:var(--sombra-alta)}
  /* En el escritorio el lateral es transparente a propósito: está DENTRO del
     marco y deja ver el degradado de la marca. Aquí ya no está dentro de nada,
     flota encima del contenido, y sin fondo propio se veía la ficha del
     cliente a través del menú: «Resumen» y «Dashboard» caían encima del
     nombre y del anillo de progreso y no se podía leer ninguno de los dos. */
  .lateral.abierto{display:flex;background:var(--panel)}}

/* ── Riel de secciones ────────────────────────────────────────────────────
   Primer nivel siempre visible; el segundo lateral enseña el detalle de la
   sección elegida. Cada icono lleva su nombre debajo: sin él, un riel de solo
   iconos obliga a adivinar. */
.riel{background:transparent;display:flex;flex-direction:column;
  align-items:center;padding:8px 0;gap:2px;overflow-y:auto;scrollbar-width:none}
.riel::-webkit-scrollbar{display:none}
/* Fondo claro y no el degradado azul de antes: el chevron de la marca baja hasta
   un azul casi negro y sobre fondo marino su mitad inferior daba 1,34:1 —
   desaparecía. El anillo de 1 px lo despega de la barra en el tema claro, donde
   blanco sobre blanco no se distinguiría. */
/* El logo de arriba con UNA sola empresa. Es solo el hueco de 50 px que centra la
   plaquita de dentro (`.riel-marca.icono`), igual que `.riel-empresa` con varias:
   así el tile y su alineación son los mismos tenga una agencia o dos, y no queda
   movido respecto a los iconos de las secciones. */
.riel-logo{width:50px;display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;flex:none}
/* 50 px de ancho: con 46 las etiquetas de dos secciones ("Mensajes",
   "Automat.") se cortaban con puntos suspensivos. El riel mide 56, así que hay
   sitio de sobra. */
.riel-item{width:50px;padding:6px 1px 5px;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;gap:3px;color:var(--tinta-3);flex:none;position:relative;transition:background .12s,color .12s}
.riel-item:hover{background:var(--hover);color:var(--tinta-2)}
.riel-item.activo{background:var(--acento-b);color:var(--acento)}
.riel-item.activo svg{stroke-width:2}
.riel-item svg{width:19px;height:19px;stroke-width:1.7}
.riel-item .et{font-size:10px;line-height:1.1;letter-spacing:-.01em;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riel-item .bola{position:absolute;top:3px;right:5px;min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--rojo);color:#fff;font-size:10px;font-weight:680;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
/* ─── El conmutador de empresa ────────────────────────────────────────────
   Advanze y OnBrands son dos agencias y la plataforma enseña una cada vez. El
   conmutador ocupa el sitio de la marca, arriba del todo, que es donde se cambia
   de espacio en cualquier herramienta que tenga más de uno. Con una sola empresa
   no aparece: ahí sigue estando `.riel-logo`.

   El monograma va en el mismo cuadro blanco de 32 px que la marca —mismo peso
   visual, misma posición— para que cambiar de agencia no mueva nada de sitio. */
/* Sin el nombre debajo, esto es solo el hueco del icono: se van el relleno de
   abajo y el hueco entre hijos, que sujetaban una etiqueta que ya no está. Los
   10 px de margen son los mismos que lleva `.riel-logo`, para que el conmutador
   y la marca a secas dejen el mismo aire antes de la primera sección. */
.riel-empresa{width:50px;padding:0 1px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;color:var(--tinta-3);flex:none;margin-bottom:10px;
  transition:background .12s,color .12s}
.riel-empresa:hover{color:var(--tinta-2)}
/* La plaquita es la misma que llevaba la marca de Advanze —fondo claro, anillo
   de 1 px, 32 px— y dentro va el logotipo de cada agencia. El chevron de Advanze
   es alto y estrecho, el «On» de OnBrands ancho y bajo: se limita cada lado por
   separado y cada uno entra por donde le toca, sin deformarse ni desbordar. */
.riel-marca{width:32px;height:32px;border-radius:8px;background:#fff;color:var(--tinta);
  box-shadow:0 0 0 1px var(--linea-2),0 1px 3px rgba(0,24,60,.18);
  display:grid;place-items:center;font-weight:680;font-size:13px;flex:none;letter-spacing:-.02em}
.riel-marca img{max-width:24px;max-height:18px;width:auto;height:auto;display:block}
.riel-marca.chica{width:24px;height:24px;border-radius:8px;font-size:11px;box-shadow:0 0 0 1px var(--linea-2)}
.riel-marca.chica img{max-width:18px;max-height:14px}
/* Cuando dentro va el icono de la app en vez de la marca suelta, la plaquita
   sobra: el icono ya trae su propio cuadro, su fondo y su filo, y dejarle
   debajo el blanco y el anillo es pintar un marco alrededor de otro. Se queda
   solo la sombra, que es lo que lo despega de la barra.
   Con `.icono` delante gana por especificidad a las reglas de arriba, así que
   no depende de dónde caiga este bloque en el fichero. */
.riel-marca.icono{background:none;box-shadow:0 1px 3px rgba(0,24,60,.24)}
.riel-marca.icono img{max-width:none;max-height:none;border-radius:inherit;display:block}
/* La `.riel-marca` es una plaquita de 32 px con medida definida DENTRO de un
   flex, así que su icono a `100%/100%` resuelve a 32×32 sin problema. La usan por
   igual el conmutador multi-empresa y el logo de una sola empresa. */
.riel-marca.icono img{width:100%;height:100%}
/* En el menú, cada empresa es una fila con su marca, su nombre y sus clientes. */
.menu-empresas{min-width:232px}
.menu-item.empresa-item{display:flex;align-items:center;gap:10px;text-align:left}
.menu-item.empresa-item .empresa-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.menu-item.empresa-item .empresa-txt small{color:var(--tinta-3);font-size:11px}
.menu-item.empresa-item .marca{width:14px;color:var(--acento);font-weight:680}
.riel-hueco{flex:1}
.riel-mas{display:none}
.riel-item .avc img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

.login-pantalla{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(circle at 22% 8%,color-mix(in srgb,var(--acento) 16%,transparent),transparent 46%),
             radial-gradient(circle at 84% 92%,color-mix(in srgb,var(--primario) 14%,transparent),transparent 48%),var(--lienzo)}
.login-card{width:min(430px,100%);padding:38px;border:1px solid var(--linea-2);border-radius:16px;background:var(--panel);box-shadow:var(--sombra-alta);text-align:center}
/* El logotipo de verdad, no una inicial en un cuadrado de degradado. Las dos
   marcas tienen proporciones distintas —Advanze es vertical, OnBrands
   apaisada—, así que se igualan por ALTURA y el ancho va libre: con una caja
   fija una de las dos saldría deformada o diminuta. */
.login-logo{height:56px;display:flex;justify-content:center;margin:0 auto 20px}
.login-logo img{height:100%;width:auto;max-width:200px}
.login-card h1{font-size:28px;margin:0 0 8px}.login-card>p{color:var(--tinta-2);font-size:14px;margin:0 0 24px}.login-google{width:100%;justify-content:center;margin:6px 0 13px}.login-card small{display:block;color:var(--tinta-3)}.login-card .aviso{margin:14px 0;text-align:left}

/* ── Lateral ──────────────────────────────────────────────────────────── */
/* Buscador arriba y persona abajo: las pestañas se quedan para las pestañas. */
.lateral{background:transparent;display:flex;
  flex-direction:column;min-height:0;overflow:hidden}
.lat-cab{display:flex;align-items:center;gap:9px;padding:10px 8px 6px 12px}
.lat-marca{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:5px 6px;border-radius:8px}
.lat-marca:hover{background:var(--hover)}
.lat-marca .logo{width:22px;height:22px;border-radius:8px;background:var(--primario);color:var(--primario-txt);
  display:grid;place-items:center;font-weight:680;font-size:11px;flex:none}
.lat-marca .n{font-weight:680;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lat-icono{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--tinta-3);flex:none}
.lat-icono:hover{background:var(--hover);color:var(--tinta)}
.lat-icono svg{width:17px;height:17px;stroke-width:1.7}

.lat-buscar{display:flex;align-items:center;gap:8px;margin:2px 8px 8px;padding:6px 9px;border-radius:8px;
  color:var(--tinta-3);font-size:14px;width:calc(100% - 16px);text-align:left}
.lat-buscar:hover{background:var(--hover);color:var(--tinta-2)}
.lat-buscar svg{width:15px;height:15px;flex:none}
.lat-buscar kbd{margin-left:auto;font:500 11px var(--sans);color:var(--tinta-3)}

.nav{padding:0 8px 10px;overflow-y:auto;flex:1;min-height:0}
.nav-grupo{margin:14px 0 3px;padding:0 9px;font-size:12px;font-weight:680;color:var(--tinta-3);
  display:flex;align-items:center;gap:6px}
.nav-grupo .accion{margin-left:auto;opacity:0;width:20px;height:20px;border-radius:4px;
  display:grid;place-items:center;color:var(--tinta-3);font-size:16px;line-height:1}
.nav-grupo:hover .accion{opacity:1}
.nav-grupo .accion:hover{background:var(--activo);color:var(--tinta)}
.nav-item{display:flex;align-items:center;gap:9px;width:100%;padding:5px 9px;border-radius:8px;
  color:var(--tinta-2);font-size:14px;text-align:left;min-height:28px;transition:background .1s}
.nav-item:hover{background:var(--hover);color:var(--tinta)}
.nav-item.activo{background:var(--activo);color:var(--tinta);font-weight:550}
.nav-item svg{width:16px;height:16px;flex:none;stroke-width:1.6;color:var(--tinta-3)}
.nav-item.activo svg{color:var(--tinta-2)}
.nav-item .et{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .cuenta{margin-left:auto;font-size:12px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.nav-item .punto{width:8px;height:8px;border-radius:4px;flex:none;margin-left:4px;background:var(--acento)}
/* Avatar compacto de la lista de mensajes directos: foto (o iniciales) con el
   punto de presencia posado en la esquina. */
.nav-cara{width:22px;height:22px;border-radius:50%;flex:none;position:relative;display:grid;place-items:center;
  background:var(--primario);color:var(--primario-txt);font-size:10px;font-weight:680}
.nav-cara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav-cara .presencia{position:absolute;right:-2px;bottom:-2px}
/* Triángulo de desplegar: solo aparece al pasar por encima, como en Notion */
.nav-flecha{width:18px;height:18px;flex:none;border-radius:4px;display:grid;place-items:center;
  color:var(--tinta-3);font-size:10px;opacity:0;transition:transform .12s,opacity .1s}
.nav-fila:hover .nav-flecha{opacity:1}
.nav-flecha.abierta{transform:rotate(90deg);opacity:1}
.nav-flecha:hover{background:var(--activo)}
.nav-fila{display:flex;align-items:center;gap:2px}
.nav-fila .nav-item{flex:1;min-width:0}
.nav-hijo{padding-left:16px}
.nav-vacio{padding:4px 9px 4px 34px;font-size:13px;color:var(--tinta-3)}

.lateral-pie{border-top:1px solid var(--linea);padding:6px 8px;display:flex;align-items:center;gap:4px}
.yo{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:6px 8px;border-radius:8px;text-align:left}
.yo:hover{background:var(--hover)}
.yo .av{width:24px;height:24px;border-radius:50%;background:var(--primario);color:var(--primario-txt);
  display:grid;place-items:center;font-size:11px;font-weight:680;flex:none;overflow:hidden}
.yo .av img{width:100%;height:100%;object-fit:cover}
.yo .n{font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tipografía de título. El contraste entre display y texto es la mitad de lo
   que hace que algo parezca diseñado: el cuerpo se queda relajado y los
   títulos se aprietan y engordan. */
h1{font-size:28px;font-weight:680;letter-spacing:-.03em;line-height:1.15;margin:0 0 6px}
h2{font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1.25}
h3{font-size:16px;font-weight:680;letter-spacing:-.01em;line-height:1.3}
/* Los números de un contador no bailan al cambiar de cifra. */
.cuenta,.bola,.pill,.dato,.dato-sec,time,.copi-globo,.copi-boton-globo{
  font-variant-numeric:tabular-nums}

/* ── Principal ────────────────────────────────────────────────────────── */
/* La página deja el mismo hueco a los lados y abajo (10 px, el mismo que el
   panel de conversación). Arriba no: ahí van las pestañas, que sí arrancan
   pegadas al canto de la ventana. Antes solo tenía hueco a la derecha —el que
   la separa del panel— y se veía descompensada. */
.principal{display:flex;flex-direction:column;min-width:0;min-height:0;
  /* Esto es lo que se veía como «tres barras grises». No era un borde: era el
     fondo asomando por una junta de 6 px entre paneles casi blancos. Una
     franja tan estrecha no se lee como fondo, se lee como una raya que sobra.
     Se resuelve al revés de como se intentó: en vez de estrechar la junta, se
     quita el fondo del riel y del lateral. El gris pasa a ser el LIENZO de toda
     la aplicación y el contenido es la tarjeta blanca que flota encima, que es
     lo que se quería desde el principio. */
  /* Sin fondo blanco. Antes toda el área de contenido era UNA tarjeta y el
     difuminado del fondo solo asomaba por el riel. Ahora el gris con luz es el
     fondo de todas las pantallas y lo blanco son los contenedores de dentro,
     como en la portada de un cliente. Dos grises, no uno: el de FUERA es el de
     la ventana —el que lleva el difuminado y se ve por el riel, el lateral y
     las juntas— y el de DENTRO es la pantalla, un punto más claro. Va al 90 %
     y no sólido a propósito: así el difuminado sigue asomando y la barra de
     arriba tiene algo que desenfocar. Un cristal sobre un color plano no es un
     cristal. */
  position:relative;margin:8px 10px 10px 0;overflow:hidden;
  background:color-mix(in srgb,var(--tablero) 90%,transparent);
  border:1px solid var(--linea);border-radius:16px}
/* La barra es de una sola línea, pase lo que pase. Se declara como contenedor
   para que lo que lleva dentro se pueda ir quitando según el ancho que quede:
   al abrir el panel de IA el hueco se reduce casi a la mitad y antes se partía
   en tres líneas en vez de recortar. */
/* La barra es solo la ruta y las acciones de ESTA pantalla. Todo lo que estaba
   aquí y no era ninguna de las dos cosas se ha ido: las flechas de atrás y
   adelante (⌘[ y ⌘], y el ratón ya las tiene), el chip del repositorio (está en
   Estado del sistema) y el botón de la IA (en el riel y en ⌘J). Lo que queda
   cabe en una línea baja. */
.barra{container-type:inline-size;
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:0 16px 6px;flex:none;
  min-height:26px;border-bottom:0;background:none}
.barra.con-linea{border-bottom-color:transparent}

/* LA FRANJA DE ARRIBA, EN CRISTAL.
   Un cristal solo es un cristal si hay algo detrás moviéndose: puesto sobre un
   color plano es una banda translúcida y nada más. Por eso la franja se saca
   del flujo y se pone ENCIMA del lienzo, y el lienzo se deja alto suficiente
   por arriba para que el contenido empiece debajo y pase por detrás al hacer
   scroll. `saturate` evita que el desenfoque deje el color lavado y gris.
   El alto no se escribe a mano: lo mide `vigilarChrome()` y lo deja en
   `--chrome`, porque la barra crece cuando las migas ocupan más o cuando se
   abre el panel de IA y se estrecha. */
.chrome{position:absolute;top:0;left:0;right:0;z-index:8;
  /* Del MISMO gris que la pantalla, no del blanco de las fichas: con `--panel`
     la franja salía más clara que todo lo demás y se leía como una barra
     pegada encima en vez de como la propia pantalla vista a través de un
     cristal. Al 55 % para que lo que pasa por debajo se note desenfocado. */
  background:color-mix(in srgb,var(--tablero) 55%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
          backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 color-mix(in srgb,var(--linea) 70%,transparent)}
/* La ruta es de dónde estás, no el titular de la pantalla: a 14 competía con
   el h1 que hay justo debajo y se leían dos títulos seguidos. */
.migas{display:flex;flex:1 1 auto;align-items:center;gap:4px;font-size:12px;
  color:var(--tinta-3);min-width:0;overflow:hidden}
/* Los niveles de la izquierda no se encogen: o caben enteros o se quitan (lo
   decide `ajustarMigas`). El último sí, que es el que puede ser larguísimo. */
.miga-nivel{display:inline-flex;align-items:center;gap:5px;min-width:0;flex:0 0 auto}
.miga-nivel:not(.secundaria){flex:0 1 auto}
.migas.compacta .miga-nivel.secundaria:nth-of-type(1){display:none}
.migas.muy-compacta .miga-nivel.secundaria{display:none}
.migas a,.migas button{color:var(--tinta-3);padding:2px 5px;border-radius:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:260px;display:inline-block}
.migas a:hover,.migas button:hover{background:var(--hover)}
.migas .sep{color:var(--tinta-3);flex:none}
/* El último nivel es un span cuando no lleva enlace, y sin esto se partía en
   varias líneas en vez de recortarse con puntos suspensivos. */
.migas .fin{color:var(--tinta);font-weight:550;min-width:0;max-width:100%;display:inline-block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .acciones{margin-left:auto;flex:none;display:flex;align-items:center;gap:7px}
.barra .acciones .btn,.barra .acciones .pill{white-space:nowrap}

/* Qué se va cayendo según aprieta, de lo más prescindible a lo menos. */
@container (max-width:900px){ .miga-tipo{display:none} }
@container (max-width:820px){ .barra .acciones .pill{display:none} }
@container (max-width:560px){ .miga-accion{display:none} }
.notif-boton{position:relative}.notif-boton>span{position:absolute;right:-3px;top:-4px;min-width:16px;height:16px;
  display:grid;place-items:center;padding:0 4px;border-radius:8px;background:var(--rojo);color:#fff;font-size:10px;font-weight:680}
.notif-menu{width:min(340px,82vw);max-height:390px;overflow-y:auto;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.notif-item{width:100%;display:flex;flex-direction:column;gap:2px;padding:10px 12px;text-align:left;border-bottom:1px solid var(--linea);position:relative}
.notif-item:last-child{border-bottom:0}.notif-item:hover{background:var(--hover)}.notif-item.nueva{background:var(--azul-b)}
.notif-item.nueva::before{content:"";position:absolute;left:4px;top:15px;width:5px;height:5px;border-radius:50%;background:var(--azul)}
.notif-item b{font-size:13px}.notif-item span{font-size:12px;line-height:1.45;color:var(--tinta-2);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow-wrap:anywhere}.notif-item small{font-size:10px;color:var(--tinta-3)}
.solo-movil{display:none}

/* Tres detalles de un renglón que se notan sin que sepas por qué.
   1. Seleccionar texto usaba el azul del SISTEMA, que no es el nuestro: dos
      azules distintos en la misma pantalla. Ahora es el de marca, al 18 % para
      que el texto se siga leyendo por encima.
   2. `balance` reparte el titular entre sus líneas en vez de llenar la primera
      y dejar una palabra suelta debajo. Solo en titulares: en un párrafo largo
      el navegador deja de aplicarlo y además no es lo que se quiere.
   3. Al saltar a un ancla, el destino quedaba DEBAJO de la franja de cristal,
      que flota sobre el lienzo. Se para a la altura del cristal más un respiro. */
::selection{background:color-mix(in srgb,var(--acento) 18%,transparent)}
.cabecera h1,.bloq-cab h2{text-wrap:balance}
.lienzo [id],.lienzo :target{scroll-margin-top:calc(var(--chrome,94px) + var(--e3))}

.lienzo{flex:1;overflow-y:auto;padding:calc(var(--chrome,94px) + 2px) 40px 40px;min-height:0;
  scrollbar-gutter:stable}   /* el hueco de la barra, siempre: que aparezca no estrecha nada */
/* La columna de 1180 va centrada, y ESO no lo puede pisar una regla de bloque
   sin querer. Pasaba constantemente: cualquier `margin: 12px 0 24px` de un
   bloque —la cabecera, los filtros, un h2 suelto— vale lo mismo en especificidad
   que este selector, gana por ir después y deja ese bloque pegado a la
   izquierda mientras el resto de la pantalla sigue centrado. En un portátil no
   se nota (el lienzo mide menos de 1180 y ahí `auto` y `0` son lo mismo) y en un
   monitor grande descuadra media pantalla.
   El `:not()` está por la especificidad, no por la excepción: sube la regla lo
   justo para ganar a una clase. `.a-la-izquierda` es la salida para el bloque
   que algún día tenga que ir pegado de verdad. */
/* El `max-width` va en una regla aparte, y floja a propósito: si sube de
   especificidad con el centrado, se lleva por delante el ancho propio de los
   bloques que piden ser más estrechos —el compositor de Inicio, de 680— y los
   estira a los 1180 de la columna. Solo el centrado necesita ganar. */
.lienzo > *{max-width:1180px}
.lienzo > *:not(.a-la-izquierda){margin-left:auto;margin-right:auto}
.lienzo.completo{padding:var(--chrome,94px) 0 0}
.lienzo.completo > *{max-width:none}
/* El relleno de arriba NO se puede escribir a mano aquí. La franja de cristal
   está fuera del flujo y encima del lienzo, y en el móvil crece a dos filas
   (migas + acciones): con un valor fijo de 2 px el saludo y la fecha de Inicio
   nacían debajo del cristal y se leían cortados por la mitad. Se respeta
   `--chrome`, que es lo que mide `vigilarChrome()`. */
@media(max-width:700px){.lienzo{padding:calc(var(--chrome,94px) + 2px) 18px 30px}}
/* Lo de la pantalla anterior, oculto mientras llega la nueva (ver taparAnterior). */
.lienzo.tapado > *{visibility:hidden}
/* La barrita de «cargando» de ruta(): solo si la pantalla tarda más de 120 ms. */
html.cargando-vista body::after{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--acento,#2a6fdb),transparent);background-size:40% 100%;
  background-repeat:no-repeat;animation:barra-carga 1s linear infinite}
@keyframes barra-carga{from{background-position:-40% 0}to{background-position:140% 0}}
/* (29-sep-2026) Ya NO hay animación de entrada de pantalla. Corría al final de
   `ruta()`, con el contenido YA pintado: la pantalla se apagaba y subía 6 px
   justo cuando estaba lista, que se leía como un salto y como más espera.
   Una pantalla que aparece quieta en cuanto tiene datos parece más rápida. */
/* Una sola cabecera para todas las pantallas: nombre, el dato debajo en gris y
   las acciones agrupadas a la derecha. Antes cada una colocaba lo suyo a su
   manera —en Estado el botón se metía en la línea del subtítulo— y la
   aplicación parecía siete aplicaciones. */
.cabecera{display:flex;align-items:flex-end;gap:var(--e4);
  margin:var(--e3) 0 var(--e5);flex-wrap:wrap}
.cabecera h1{margin:0;font-size:28px;font-weight:680;letter-spacing:-.03em;line-height:1.15}
.cabecera .sub{color:var(--tinta-3);font-size:14px;margin-top:var(--e1)}
/* El bloque del título ocupa lo que sobra: los botones sueltos de la cabecera
   («Sincronizar», «Nueva reunión»…) se iban pegados al título y no a la derecha. */
.cabecera>div:first-child{flex:1 1 auto;min-width:0}
.cabecera .acciones{margin-left:auto;display:flex;gap:var(--e2);align-items:center}
.cabecera .acciones .btn{flex:none}

/* ── Controles ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:12px;
  font-size:14px;font-weight:550;border:1px solid var(--linea-2);background:var(--panel);
  color:var(--tinta);transition:background .12s,border-color .12s}
.btn:hover{background:var(--hover)}
.btn.primario{background:var(--primario);color:var(--primario-txt);border-color:var(--primario)}
.btn.primario:hover{opacity:.88}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn svg{width:15px;height:15px;stroke-width:1.8}

/* Título y entradilla de una sub-sección dentro de una pantalla. Estaban
   escritos a mano en el JS con 15px/620 y 12,6px: valores que no existen en la
   escala, pero el test solo mira esta hoja, así que un estilo en línea se le
   cuela. Y un `margin: X 0` en línea gana a cualquier regla, así que además
   dejaba el título pegado a la izquierda mientras su lista salía centrada. */
.sub-seccion{font-size:16px;font-weight:680;letter-spacing:-.01em;margin:var(--e6) auto var(--e3)}
.sub-seccion:has(+ .sub-seccion-nota){margin-bottom:var(--e1)}
.sub-seccion-nota{font-size:13px;color:var(--tinta-3);margin:0 auto var(--e3)}
/* Los márgenes automáticos no centran una caja de línea. Como hijo directo del
   lienzo el segmentado tiene que ser de bloque para poder centrarse; a lo ancho
   ocupa lo que ocupe su contenido, igual que antes. */
.lienzo > .segmentado{display:flex;width:fit-content}
.segmentado{display:inline-flex;background:var(--panel-2);border:1px solid var(--linea-2);border-radius:12px;padding:3px}
.segmentado button{padding:6px 14px;border-radius:8px;font-size:13px;color:var(--tinta-3);font-weight:550}
.segmentado button.activo{background:var(--panel);color:var(--tinta);box-shadow:0 1px 2px rgba(0,0,0,.06)}
/* Dos filas fijas: arriba los desplegables, abajo las pastillas. Con un solo
   flex, las pastillas se colaban en la primera línea y los desplegables caían
   a la segunda, distinto en cada ancho de ventana. */
/* Una sola fila que se parte sola. Antes era una rejilla de cuatro columnas
   con los desplegables estirándose a partes iguales: tres cajas enormes para
   decir «Todos los servicios». Ahora cada control ocupa lo que dice. */
.clientes-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 16px}
.clientes-filtros .campo-busca{flex:0 1 240px}
.filtros-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 auto}
.filtros-sep{width:1px;height:20px;background:var(--linea-2);margin:0 2px;flex:none}
/* El selector de un atributo: mismo cuerpo que los botones de al lado. Vacío
   dice de qué filtra; puesto, el valor con su pastilla y una ✕ para quitarlo. */
.filtro-sel{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);
  font-size:13px;color:var(--tinta-2);cursor:pointer;white-space:nowrap}
.filtro-sel:hover{background:var(--hover)}
.filtro-sel svg{width:13px;height:13px;opacity:.55;flex:none}
.filtro-sel .fs-et{color:var(--tinta-3)}
.filtro-sel b{font-weight:550;color:var(--tinta)}
.filtro-sel.puesto{border-color:var(--tinta-3);color:var(--tinta)}
.filtro-sel.puesto .fs-et{font-size:11px;letter-spacing:.02em}
.filtro-sel .x svg{width:11px;height:11px;opacity:.8}
.menu-filtro .menu-item.activo{background:var(--activo)}

/* ── Clases que estaban en el HTML sin una sola regla de CSS ──────────────
   Todas estas salían con el estilo por defecto del navegador: texto suelto
   donde tenía que haber una pastilla, apilado donde tenía que haber una fila.
   No se ven «rotas», se ven descuidadas, que es peor porque nadie las reporta. */

/* La ✕ de quitar —un filtro, una vista guardada, la selección— era un carácter
   de 10,7 px sin zona de clic ni hover. Tres sitios, el mismo gesto. */
.x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;
  font-size:11px;line-height:1;color:var(--tinta-3);cursor:pointer;flex:none}
.x:hover{background:var(--activo);color:var(--tinta)}

/* Los filtros activos de Tareas se pegaban unos a otros como un solo párrafo */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.filtros:not(:empty){margin:0 0 12px}
.filtro{display:inline-flex;align-items:center;gap:5px;padding:4px 6px 4px 9px;
  border:1px solid var(--linea);border-radius:8px;background:var(--panel-2);
  font-size:12px;color:var(--tinta-2)}
.filtro b{font-weight:550;color:var(--tinta)}
.add-filtro{padding:4px 9px;border-radius:8px;font-size:12px;color:var(--tinta-3)}
.add-filtro:hover{background:var(--activo);color:var(--tinta)}

/* Las filas de la papelera apilaban título, antigüedad y botón en tres alturas */
.papelera-fila{display:flex;align-items:center;gap:10px;padding:8px 4px;
  border-bottom:1px solid var(--linea)}
.papelera-fila:last-child{border-bottom:0}
.papelera-fila .t{flex:1;min-width:0;font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* El recuento de subtareas y comentarios salía a 14 px en negro: se leía como
   parte del título de la tarea en vez de como un dato al margen. */
.sub-badge,.com-badge{display:inline-flex;align-items:center;gap:3px;flex:none;
  padding:2px 6px;border-radius:4px;background:var(--panel-2);
  font-size:11px;color:var(--tinta-3)}

/* La columna de cliente de la tabla de tareas ponía el nombre DEBAJO del logo */
.cliente-mini{display:flex;align-items:center;gap:7px;min-width:0}
.cliente-mini .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* «Cancelar» salía idéntico a «Guardar»: mismo fondo, mismo borde, mismo peso */
.btn.plano{background:none;border-color:transparent;color:var(--tinta-2)}
.btn.plano:hover{background:var(--activo);color:var(--tinta)}

/* Los textos de apoyo salían a 14 px en negro, compitiendo con el contenido */
.apunte{font-size:12px;line-height:1.55;color:var(--tinta-3)}

/* Sin esto la tabla ancha se sale de su caja y arrastra la página de lado */
.tabla-scroll{overflow-x:auto}

/* El buscador llevaba clase .busqueda desde el principio y ni una sola regla:
   salía el <input> crudo del navegador —2 px de borde gris del sistema, esquinas
   rectas, 14 px de texto— pegado a una lupa suelta y 5 px más bajo que los
   controles de su misma barra. Se viste igual que ellos. */
.busqueda{display:flex;align-items:center;gap:7px;padding:0 10px;height:32px;
  border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);min-width:0}
.busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-b)}
.busqueda svg{width:14px;height:14px;color:var(--tinta-3);flex:none}
.busqueda input{flex:1;min-width:0;padding:0;border:0;background:none;outline:none;
  font:400 12px/1 var(--sans);color:var(--tinta)}
.busqueda input::placeholder{color:var(--tinta-3)}

/* Automatizaciones agrupadas por proyecto */
.autom-por-cliente{display:flex;flex-direction:column;gap:var(--e5)}
.autom-por-cliente>section>header{display:flex;align-items:center;gap:10px;
  padding:0 2px 8px;border-bottom:1px solid var(--linea)}
.autom-ir-cliente{display:flex;align-items:center;gap:8px;padding:3px 7px;margin-left:-7px;
  border-radius:8px;font-size:14px;font-weight:680;letter-spacing:-.015em;color:var(--tinta)}
/* El <b> de dentro se llevaba el peso a 900 —el negrita por defecto del
   navegador— y el titular salía dos escalones por encima de todo lo demás:
   la plataforma no usa nada más gordo que 680 en ninguna parte. */
.autom-ir-cliente b{font-weight:inherit}
.autom-ir-cliente:hover{background:var(--activo)}
.autom-ir-cliente svg{width:13px;height:13px;color:var(--tinta-3);opacity:0;transition:opacity .12s}
.autom-ir-cliente:hover svg{opacity:1}
.autom-por-cliente>section>header .dato-sec{margin-left:auto}
/* La ruta del panel es navegable, no un rótulo */
.detalle-ruta button{color:inherit;font:inherit;padding:1px 4px;border-radius:4px}
.detalle-ruta button:hover{background:var(--activo);color:var(--tinta)}
.enlace-suave{font:inherit;color:var(--tinta-2);border-bottom:1px solid var(--linea-2);padding:0}
.enlace-suave:hover{color:var(--acento);border-color:var(--acento)}
/* Lo que falta por documentar, dicho con nombre y apellidos */
.autom-falta{border:1px solid color-mix(in srgb,var(--ambar) 20%,transparent);
  background:var(--ambar-b);border-radius:12px;padding:16px 18px;margin:var(--e4) 26px 0}
.autom-falta-titulo{display:block;font-size:13px;font-weight:680;color:var(--ambar)}
.autom-falta>p{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--tinta-2)}
.autom-falta>p code{font:500 .9em var(--mono);padding:1.5px 5px;border-radius:4px;
  background:color-mix(in srgb,var(--ambar) 10%,transparent)}
.autom-falta summary{margin-top:14px;font-size:12px;font-weight:550;color:var(--tinta-3);cursor:pointer}
.autom-falta summary:hover{color:var(--tinta-2)}
.autom-falta details[open] ul{margin-top:10px}
.autom-falta ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.autom-falta li{display:flex;flex-direction:column;gap:1px}
.autom-falta li b{font-size:13px;font-weight:550;color:var(--tinta)}
.autom-falta li span{font-size:12px;color:var(--tinta-3)}
.autom-falta-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.autom-falta-acciones svg{width:14px;height:14px}
#capa2 .velo{z-index:400}
/* Las reglas de la casa para la IA, y las de cada persona debajo. La línea de
   arriba explica que son capas de lo mismo: sin ella parecen dos ajustes
   sueltos que se contradicen. */
/* El mensaje al que te ha traído una búsqueda. Fondo, no borde de un lado: se
   ve el bloque entero señalado y no una raya que parece un adorno. */
.mensaje-humano.resaltado{background:var(--realce,rgba(255,214,102,.20));border-radius:8px;
  transition:background .5s ease}
/* Las tres capas de instrucciones de la IA. La tira es a la vez el mapa y la
   navegación: se ve en cuál estás y se salta a las otras sin volver al lateral.
   Con flechas entre medias porque es una secuencia, no tres pestañas. */
.tira-capas{display:flex;align-items:stretch;gap:8px;margin-bottom:var(--e3);flex-wrap:wrap}
.tira-capas button{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px;text-align:left;
  border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);padding:10px 13px}
.tira-capas button:hover{background:var(--hover)}
.tira-capas button.activo{border-color:var(--tinta);background:var(--panel)}
.tira-capas b{font-size:13px;font-weight:680}
.tira-capas small{font-size:11px;color:var(--tinta-3)}
.tc-n{font-size:10px;font-weight:680;letter-spacing:.05em;color:var(--tinta-3)}
.tira-capas button.activo .tc-n{color:var(--tinta)}
.tc-flecha{align-self:center;color:var(--tinta-3);font-size:12px}
/* Sin `max-width`: `.lienzo > *` centra con márgenes automáticos todo lo que
   sea más estrecho que la columna, así que un ancho máximo aquí no acortaba la
   línea, la mandaba al centro de la pantalla —y quedaba como un pie de foto en
   medio de una página alineada a la izquierda—. */
.tira-nota{font-size:12px;color:var(--tinta-3);line-height:1.6;margin:0 0 var(--e5)}

/* Falta algo por escribir aquí. Un punto, no un número: no hay nada que contar. */
.lat-punto{width:6px;height:6px;border-radius:999px;background:var(--acento);flex:none;margin-left:auto}

/* El editor de una capa, en la propia página: se venía a esto, así que no hay
   razón para pedir un clic más en un diálogo antes de poder escribir. */
.capa-editor{border:1px solid var(--linea-2);border-top-left-radius:12px;border-top-right-radius:12px;
  background:var(--panel);overflow:hidden;min-height:380px}
.capa-editor .pag-scroll{padding-top:var(--e3)}
.capa-editor .pag-col{padding-bottom:var(--e5)}
/* La fila de abajo cierra el marco: es el pie del editor, no una barra suelta. */
.capa-barra{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border:1px solid var(--linea-2);border-top:0;
  border-bottom-left-radius:12px;border-bottom-right-radius:12px;
  background:var(--panel-2);flex-wrap:wrap;margin-bottom:var(--e5)}
.capa-quien{font-size:11px;color:var(--tinta-3);flex:1;min-width:0}

/* Los tres ficheros de la capa del proyecto. */
.capa-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:var(--e4)}
.capa-fichas article{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);padding:15px 16px}
.capa-fichas code{font-family:var(--mono);font-size:12px;font-weight:680}
.capa-fichas p{margin:7px 0 0;font-size:12px;color:var(--tinta-3);line-height:1.55}

/* Cabecera de sub-bloque con acción a la derecha. `.sub-seccion` sola no la
   admite y el botón acababa arriba del todo, como acción primaria de la
   pantalla: crear una copia de seguridad no lo es. */
.est-cab{display:flex;align-items:baseline;gap:10px;margin:var(--e6) 0 var(--e3)}
.est-cab h3{margin:0;font-size:16px;font-weight:680;letter-spacing:-.01em}
.est-cab .dato-sec{flex:1;font-size:12px;color:var(--tinta-3)}
.est-cab .btn{flex:none;align-self:center}

/* La salud del sistema, de un vistazo. Antes eran dos tablas y un párrafo gris
   suelto entre ellas, y había que leerlo todo para saber si algo iba mal. */
.est-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.est-datos>div{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);padding:12px 14px;min-width:0}
.est-datos .et{display:block;font-size:11px;font-weight:680;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3)}
.est-datos b{display:block;font-size:16px;font-weight:680;letter-spacing:-.015em;margin-top:4px}
/* Las variables del tema, no un hex: en oscuro un verde fijo se sale de la
   paleta y se lee peor que el texto normal, que es lo contrario de destacar. */
.est-datos b.bien{color:var(--verde)}
.est-datos b.mal{color:var(--rojo)}
.dudoso{color:var(--ambar,#b26a00)}
.est-datos small{display:block;margin-top:3px;font-size:11px;color:var(--tinta-3);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.instrucciones{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);
  padding:16px 18px;margin-bottom:var(--e6)}
.instrucciones .bloq-cab p{font-size:12px;color:var(--tinta-3);margin:3px 0 0;max-width:70ch;line-height:1.6}
.instrucciones-texto{margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid var(--linea);
  font-size:13px;line-height:1.7;color:var(--tinta-2);max-height:340px;overflow:auto}
.instrucciones-texto h2{font-size:14px;margin:0 0 10px}
.instrucciones-texto p{margin:0 0 10px}
.instrucciones-texto strong{color:var(--tinta)}

/* Desplegables del lateral: Drive y los archivos del proyecto */
.lat-plegable{margin-top:2px}
.lat-plegable-cab{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;
  border-radius:8px;font-size:12px;font-weight:680;letter-spacing:.03em;text-transform:uppercase;
  color:var(--tinta-3);text-align:left}
.lat-plegable-cab:hover{background:var(--activo);color:var(--tinta-2)}
.lat-plegable-cab .fl{font-size:10px;line-height:1;color:var(--tinta-3);transition:transform .14s ease;flex:none}
.lat-plegable.abierto .lat-plegable-cab .fl{transform:rotate(90deg)}
.lat-plegable-cab svg{width:14px;height:14px;flex:none}
.lat-plegable-cab .et{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lat-plegable-accion{display:grid;place-items:center;width:20px;height:20px;border-radius:4px;flex:none;
  color:var(--tinta-3)}
.lat-plegable-accion:hover{background:var(--panel-2);color:var(--tinta)}
.lat-plegable-accion svg{width:13px;height:13px}
.lat-plegable-cuerpo{padding-bottom:6px}
.lat-plegable-cuerpo .pill.sug{margin-left:auto;flex:none;font-size:10px}
.lat-plegable-cab .cuenta{margin-left:auto;font-size:11px;font-weight:550;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}
.lat-plegable-cab .cuenta+.lat-plegable-accion{margin-left:6px}
/* Bloques nuevos de la portada del cliente. */
/* `.bloq-cab h2{flex:1}` reparte el hueco cuando el título es hijo directo;
   aquí el título y su explicación van dentro de un div, así que el que tiene
   que estirarse es el div o el botón se sube a la segunda línea. */
.proyecto-cab-seccion{margin:22px 0 12px}
.proyecto-cab-seccion>div{flex:1;min-width:0}
.proyecto-cab-seccion h2{font-size:14px}
.proyecto-cab-seccion p{font-size:11px;color:var(--tinta-3);margin:3px 0 0}
.proyecto-carpetas{margin-bottom:4px}
.proyecto-carpetas .carp{padding:0 10px 10px}
.proyecto-pie-nota{padding:10px 3px 0;border-top:1px solid var(--linea);margin-top:8px;
  font-size:11px;color:var(--tinta-3);line-height:1.5}
.proyecto-pie-nota b{color:var(--tinta-2);font-weight:550}
.proyecto-pie-nota button{color:var(--acento);font-weight:550;font-size:11px}
.proyecto-revisar{margin:7px -5px -5px}
.proyecto-revisar>button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 7px;
  border-top:1px solid var(--linea);text-align:left}
.proyecto-revisar>button:hover{background:var(--hover)}
.proyecto-revisar .n{width:24px;flex:none;font-size:16px;font-weight:680;
  font-variant-numeric:tabular-nums}
.proyecto-revisar>button>span:nth-child(2){flex:1;min-width:0}
.proyecto-revisar b,.proyecto-revisar small{display:block}
.proyecto-revisar b{font-size:12px}
.proyecto-revisar small{font-size:10px;color:var(--tinta-3);margin-top:2px}
.proyecto-revisar>button>i{font-style:normal;color:var(--tinta-3);font-size:16px}
/* Los enlaces externos van dentro de la misma lista de recursos, así que
   heredan su aspecto; solo hace falta que un <a> se comporte como los botones. */
.proyecto-recursos>a{display:flex;align-items:center;gap:9px;width:100%;padding:10px 7px;
  border-top:1px solid var(--linea);text-align:left;color:inherit;text-decoration:none}
.proyecto-recursos>a:hover{background:var(--hover)}
.proyecto-recursos>a>span:first-child{width:28px;height:28px;border-radius:8px;
  background:var(--panel-2);display:grid;place-items:center;flex:none}
.proyecto-recursos>a>div{flex:1;min-width:0}
.proyecto-recursos>a>i{display:grid;place-items:center;color:var(--tinta-3)}
.proyecto-recursos>a>i svg{width:13px;height:13px}

/* ═══ LA CARPETA ═════════════════════════════════════════════════════════
   La silueta es la del portal de clientes de Advanze. Lo que cambia es lo que
   guarda: las hojas llevan lo que hay DENTRO —la web renderizada, el markdown
   maquetado, la imagen, el código— y el frente es de cristal, así que por
   debajo se sigue viendo el papel que tapa. El glassmorfismo no es un efecto:
   es la manera de enseñar el contenido sin abrir la carpeta.

   Nada de tarjeta al pasar por encima: lo que se mueve son las hojas, y eso ya
   dice que responde. La carpeta abierta sube de capa o la vecina le corta el
   papel que asoma. */
.carpetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.carp{display:block;width:100%;padding:14px;border-radius:16px;position:relative;text-align:left}
.carp:hover{z-index:2}
.carp .fig{position:relative;aspect-ratio:128/112}
.carp .cara{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* La sombra NO puede ser un `filter` del contenedor: un filtro en un ancestro
   crea una raíz de fondo nueva y el `backdrop-filter` del frente se queda sin
   nada que coger. Es una cara más, con la misma silueta, desenfocada debajo. */
.carp .sombra{background:rgba(31,79,156,.32);filter:blur(7px);transform:translateY(6%) scale(.97)}
.carp .atras{background:linear-gradient(180deg,#2a5fb0,#1b3f7e)}
.carp .hoja{position:absolute;left:19%;width:62%;top:24%;height:48%;background:#fff;
  border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(16,24,40,.18);
  transition:transform .32s cubic-bezier(.2,.85,.25,1);transform-origin:50% 100%}
.carp .hoja.h3{transform:translateX(-7%) rotate(-5.5deg)}
.carp .hoja.h2{transform:translateX(5%) rotate(4deg)}
.carp:hover .hoja.h3{transform:translate(-16%,-15%) rotate(-11deg)}
.carp:hover .hoja.h2{transform:translate(14%,-12%) rotate(9deg)}
.carp:hover .hoja.h1{transform:translateY(-17%)}
.carp:hover .frente{transform:translateY(3%)}
.carp:hover .canto{transform:translateY(3.4%)}
.carp .hoja img{width:100%;height:100%;object-fit:cover;display:block}
.carp .hoja iframe{position:absolute;top:0;left:0;width:1180px;height:940px;border:0;
  transform:scale(var(--k,.12));transform-origin:0 0;pointer-events:none}
/* El texto del papel NO se escribe en 6 px: se escribe del tamaño de siempre y
   se encoge. Así la escala de la interfaz sigue teniendo nueve tamaños y no
   quince, y de paso el mismo mecanismo vale para el papel y para la web. */
.carp .lupa{position:absolute;top:0;left:0;width:560px;padding:22px 26px;
  transform:scale(var(--k,.12));transform-origin:0 0;pointer-events:none}
.carp .lupa .t{font-size:12px;font-weight:680;color:#1e2939;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding-bottom:8px;border-bottom:1px solid #eceef2;
  margin-bottom:8px}
.carp .lupa pre{margin:0;font:400 11px/1.6 var(--mono);color:#7b8798;white-space:pre-wrap;
  word-break:break-word}
.carp .lupa .md{font-size:11px;line-height:1.55;color:#4c586b}
.carp .lupa .md h1,.carp .lupa .md h2,.carp .lupa .md h3{font-size:13px;font-weight:680;
  color:#1e2939;margin:0 0 4px;line-height:1.3}
.carp .lupa .md p,.carp .lupa .md ul{margin:0 0 6px;padding-left:14px}
.carp .lupa .md table{width:100%;border-collapse:collapse;font-size:10px}
.carp .lupa .md td,.carp .lupa .md th{border:1px solid #e6e9ef;padding:2px 4px;text-align:left}
.carp .frente{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(180deg,rgba(106,166,242,.52),rgba(47,120,214,.66));
  -webkit-backdrop-filter:blur(3px) saturate(160%);backdrop-filter:blur(3px) saturate(160%);
  transition:transform .32s cubic-bezier(.2,.85,.25,1)}
/* El canto claro del borde de arriba: un píxel, y es lo que el ojo lee como
   cristal en vez de como un rectángulo azul con opacidad. */
.carp .canto{position:absolute;left:6.2%;right:6.2%;top:46.4%;height:2px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.62),rgba(255,255,255,.2));
  transition:transform .32s cubic-bezier(.2,.85,.25,1)}
.carp .sellos{position:absolute;left:9%;bottom:9%;display:flex;gap:3px;z-index:3}
.carp .sello{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;
  font-size:10px;font-weight:680;color:#fff;background:rgba(0,24,60,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.carp .nom{font-size:13px;font-weight:680;margin-top:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carp .sub{font-size:12px;color:var(--tinta-3);margin-top:2px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .carp .hoja,.carp .frente,.carp .canto{transition:none}
  .carp:hover .hoja.h1,.carp:hover .hoja.h2,.carp:hover .hoja.h3{transform:none}
}

/* Filtros por tipo dentro de Archivos. «Documentos» era una pestaña y no lo
   merecía: un README del repositorio es un archivo, no algo que hayas escrito.
   Como filtro sirve; como destino, partía la navegación en dos sitios donde
   buscar lo mismo. */
.nav-filtros{display:flex;flex-wrap:wrap;gap:4px;padding:2px 8px 8px}
.nav-filtros button{padding:3px 9px;border-radius:999px;border:1px solid var(--linea);
  font-size:11px;font-weight:550;color:var(--tinta-3);background:var(--panel)}
.nav-filtros button:hover{border-color:var(--linea-2);color:var(--tinta-2)}
.nav-filtros button.activo{background:var(--primario);color:var(--primario-txt);border-color:transparent}
.nav-vacio small{display:block;margin-top:5px;font-size:11px;line-height:1.45;color:var(--tinta-3)}

/* La raya que separa lo que se mueve de lo que se consulta */
.nav-raya{height:1px;background:var(--linea);margin:10px 8px}

/* Compositor del chat: enviar es una flecha arriba, y el proyecto se suelta */
.copi-enviar{width:32px;height:32px;padding:0;border-radius:8px;display:grid;place-items:center;
  background:var(--primario);color:var(--primario-txt);flex:none}
.copi-enviar svg{width:16px;height:16px}
.copi-enviar:disabled{opacity:.45}
.copi-enviar.parando{background:var(--rojo)}
.copi-redondo{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;
  color:var(--tinta-3);flex:none}
.copi-redondo:hover{background:var(--activo);color:var(--tinta)}
.copi-motor-icono{color:var(--tinta)}
.copi-motor-icono svg{width:18px;height:18px}
.copi-redondo svg{width:16px;height:16px}
.copi-redondo.escuchando{background:var(--rojo-b);color:var(--rojo)}
/* Con la cara del cliente dentro, el botón deja de ser un icono y pasa a ser un
   avatar: sin relleno, redondo del todo y ocupando la caja entera. */
.copi-redondo.con-cara{padding:0;overflow:hidden}
.copi-redondo.con-cara:hover{background:none}
.copi-redondo.con-cara{width:26px;height:26px}
.copi-redondo.con-cara .avc{width:22px;height:22px;font-size:10px;border-radius:4px}
.copi-redondo.escuchando svg{animation:latido 1.1s ease-in-out infinite}
@keyframes latido{50%{opacity:.35}}
.copi-chip{display:inline-flex;align-items:center;gap:5px}
/* Con dos o más especialistas fijados no contesta ninguno de ellos: los lleva
   el chat. La ficha lo dice en voz baja, que es un apunte y no otro agente. */
.copi-chip.nota{color:var(--tinta-3);font-style:italic;cursor:default}
.copi-chip-x{display:grid;place-items:center;width:15px;height:15px;border-radius:999px;
  color:var(--tinta-3);flex:none;margin-left:1px}
.copi-chip-x:hover{background:var(--linea-2);color:var(--tinta)}
.copi-chip-x svg{width:9px;height:9px}
@media (prefers-reduced-motion:reduce){.copi-redondo.escuchando svg{animation:none}}

/* Dictado. Mientras hablas, la onda TAPA el compositor: no aparece el texto
   corrigiéndose solo delante de ti —que era lo que obligaba a leer en vez de
   hablar—, y la onda es la única prueba de que el micrófono te está cogiendo.
   Un botón parpadeando se ve igual hables o no hables. */
.copi-caja,.inicio-compositor{position:relative}
.dictado{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  gap:var(--e3);padding:0 var(--e3) 0 var(--e4);border-radius:inherit;
  background:var(--panel);color:var(--tinta-2)}
.dictado-onda{flex:1;min-width:0;height:26px;display:block}
.dictado-tiempo{flex:none;font-size:13px;font-weight:550;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}
.dictado-boton{flex:none;width:32px;height:32px;border-radius:999px;display:grid;
  place-items:center;border:1px solid var(--linea-2);background:var(--panel);color:var(--tinta-3)}
.dictado-boton:hover{background:var(--activo);color:var(--tinta)}
.dictado-boton svg{width:15px;height:15px}
.dictado-boton.ok{border-color:transparent;background:var(--primario);color:var(--primario-txt)}
.dictado-boton.ok:hover{background:var(--primario);color:var(--primario-txt);opacity:.9}
.campo-busca{display:flex;align-items:center;gap:7px;min-width:240px;border:1px solid var(--linea-2);border-radius:8px;padding:0 10px;background:var(--panel)}
.campo-busca svg{width:14px;height:14px;color:var(--tinta-3)}.campo-busca input{border:0;outline:0;background:transparent;width:100%;padding:7px 0;font-size:13px}
.clientes-filtros .btn.activo{background:var(--rojo-b);border-color:transparent;color:var(--rojo)}

.pestanas{display:flex;gap:22px;border-bottom:1px solid var(--linea);margin-bottom:20px;overflow-x:auto}
.pestanas button{padding:0 0 11px;font-size:14px;color:var(--tinta-3);position:relative;white-space:nowrap;font-weight:400}
.pestanas button:hover{color:var(--tinta-2)}
.pestanas button.activo{color:var(--tinta);font-weight:550}
.pestanas button.activo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--tinta);border-radius:4px}
.pestanas .n{margin-left:6px;font-size:12px;color:var(--tinta-3);font-variant-numeric:tabular-nums}

/* ── Píldoras ─────────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3.5px 10px;border-radius:var(--r-chip);
  font-size:12px;font-weight:680;background:var(--gris-b);color:var(--tinta-2);white-space:nowrap}
.pill.rojo{background:var(--rojo-b);color:var(--rojo)}
.pill.ambar{background:var(--ambar-b);color:var(--ambar)}
.pill.azul{background:var(--azul-b);color:var(--azul)}
.pill.morado{background:var(--morado-b);color:var(--morado)}
.pill.verde{background:var(--verde-b);color:var(--verde)}

/* ── Tarjetas de cliente ──────────────────────────────────────────────── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-card);
  padding:16px 17px;box-shadow:var(--sombra);cursor:pointer;transition:transform .13s,box-shadow .13s,border-color .13s;
  display:flex;flex-direction:column;gap:12px;text-align:left;width:100%}
.tarjeta:hover{transform:translateY(-1.5px);box-shadow:0 2px 4px rgba(16,18,22,.05),0 10px 26px rgba(16,18,22,.075);border-color:var(--linea-2)}
/* El registro de cambios de un cliente. Filas apretadas a propósito: se lee en
   diagonal buscando «quién tocó esto», no una a una. */
.registro{display:flex;flex-direction:column;border:1px solid var(--linea);
  border-radius:12px;overflow:hidden;background:var(--panel)}
.registro-fila{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 13px;
  text-align:left;border-bottom:1px solid var(--linea)}
.registro-fila:last-child{border-bottom:0}
.registro-fila:hover{background:var(--hover)}
.registro-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:4px;
  background:var(--panel-2);color:var(--tinta-3);flex:none;margin-top:1px}
.registro-ic svg{width:13px;height:13px}
.registro-txt{flex:1;min-width:0;font-size:13px;line-height:1.5;color:var(--tinta-2)}
.registro-txt b{font-weight:550;color:var(--tinta)}
.registro-txt i{font-style:normal;color:var(--tinta)}
.registro-txt small{display:block;margin-top:2px;font-size:11px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.registro-fila time{font-size:11px;color:var(--tinta-3);flex:none;margin-top:2px}

.menu-nota{padding:8px 12px;font-size:11px;line-height:1.5;color:var(--tinta-3);max-width:260px}

/* La bandeja de Inicio. Filas, no contadores: lo que hace falta saber es QUÉ
   está esperando, y poder ir de un clic. */
.bandeja-n{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;
  border-radius:999px;background:var(--tinta);color:var(--panel);font-size:11px;font-weight:680}
.bandeja-lista{display:flex;flex-direction:column;border:1px solid var(--linea);
  border-radius:12px;overflow:hidden;background:var(--panel)}
.bandeja-fila{display:flex;align-items:center;gap:11px;width:100%;padding:11px 14px;
  text-align:left;border-bottom:1px solid var(--linea)}
.bandeja-fila:last-child{border-bottom:0}
.bandeja-fila:hover{background:var(--hover)}
.bandeja-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:var(--panel-2);color:var(--tinta-3);flex:none}
.bandeja-ic svg{width:15px;height:15px}
/* El color va en el icono, que es el sitio donde se lee de un vistazo sin pintar
   la fila entera de rojo. Cuatro filas rojas seguidas dejan de significar nada. */
.bandeja-fila.vencida .bandeja-ic,.bandeja-fila.automatizacion .bandeja-ic{
  background:var(--rojo-b);color:var(--rojo)}
.bandeja-fila.aprobacion .bandeja-ic{background:var(--morado-b);color:var(--morado)}
.bandeja-fila.mencion .bandeja-ic{background:var(--azul-b);color:var(--azul)}
.bandeja-fila.hoy .bandeja-ic{background:var(--acento-b);color:var(--acento)}
.bandeja-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bandeja-txt b{font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bandeja-txt small{font-size:11px;color:var(--tinta-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bandeja-fila .fl{color:var(--tinta-3);flex:none}

/* Las cifras del dashboard en la portada del cliente. Fila que rueda de lado
   en vez de rejilla: con dos cuentas conectadas salen cuatro, con más saldrán
   siete, y una rejilla que reparte el ancho las deja ilegibles. */
.proyecto-cifras{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.proyecto-cifras>button{flex:none;min-width:150px;display:flex;flex-direction:column;gap:3px;
  padding:13px 15px;border:1px solid var(--linea);border-radius:12px;background:var(--panel);
  text-align:left;box-shadow:var(--sombra)}
.proyecto-cifras>button:hover{border-color:var(--linea-2);box-shadow:0 2px 4px rgba(16,18,22,.05)}
.proyecto-cifras span{font-size:11px;color:var(--tinta-3)}
.proyecto-cifras b{font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1.15}
/* La flecha dice la DIRECCIÓN, no si es buena noticia. En verde y rojo, «coste
   por conversión ↓64 %» salía en rojo siendo lo mejor de la pantalla: la
   plataforma no sabe hacia dónde es bueno que vaya cada métrica, y fingir que
   lo sabe es peor que no decir nada. */
.proyecto-cifras small{font-size:11px;color:var(--tinta-3)}

/* Fijar un cliente arriba. La chincheta solo aparece al pasar por encima —una
   fila de sesenta chinchetas grises sería ruido— salvo en los que YA están
   fijados, donde es el único indicio de por qué ese cliente está el primero. */
.tarjeta{position:relative}
.fijar{position:absolute;top:10px;right:10px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:8px;color:var(--tinta-3);cursor:pointer;
  opacity:0;transition:opacity .12s,background .12s,color .12s}
.fijar svg{width:15px;height:15px}
.tarjeta:hover .fijar,.fijar:focus-visible{opacity:1}
.fijar:hover{background:var(--activo);color:var(--tinta)}
.tarjeta.fijada .fijar{opacity:1;color:var(--acento)}
/* En la tabla no hay sitio para una esquina: va en línea, detrás del nombre */
.tabla-clientes .fijar{position:static;width:22px;height:22px;flex:none}
.tabla-clientes .fijar svg{width:13px;height:13px}
.tabla-clientes tr:hover .fijar{opacity:1}
.tabla-clientes tr.fijada .fijar{opacity:1;color:var(--acento)}
.tarjeta .tj-top{display:flex;align-items:center;gap:9px}
.tarjeta .punto{width:8px;height:8px;border-radius:50%;flex:none;background:var(--acento)}
.tarjeta h3{margin:0;font-size:14px;font-weight:680;letter-spacing:-.01em;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tarjeta .res{font-size:13px;color:var(--tinta-3);line-height:1.5;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.tarjeta .meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--tinta-3)}
.tarjeta .tags{display:flex;gap:5px;flex-wrap:wrap}

/* Barra de progreso segmentada — el detalle de la referencia */
.progreso{display:flex;gap:2.5px}
.progreso i{flex:1;height:7px;border-radius:2.5px;background:var(--linea-2)}
.progreso i.on{background:var(--tinta)}
.progreso-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.progreso-wrap .progreso{flex:1}
.progreso-wrap>span{font-size:11px;color:var(--tinta-3);white-space:nowrap}

/* ── Inicio operativo ─────────────────────────────────────────────────── */
.panel-dia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--linea-2);
  border-radius:12px;overflow:hidden;margin:0 0 30px;background:var(--panel)}
.dia-metrica{display:flex;align-items:center;gap:9px;padding:17px 18px;text-align:left;
  border-right:1px solid var(--linea);transition:background .12s}
.dia-metrica:last-child{border-right:0}.dia-metrica:hover{background:var(--hover)}
.dia-metrica .n{font-size:28px;font-weight:680;letter-spacing:-.03em;line-height:1}
.dia-metrica .et{font-size:13px;color:var(--tinta-2);font-weight:550}
.dia-metrica .fl{margin-left:auto;color:var(--tinta-3);font-size:18px}
.dia-metrica.rojo .n{color:var(--rojo)}.dia-metrica.ambar .n{color:var(--ambar)}
.dia-metrica.azul .n{color:var(--azul)}
.dia-metrica.no-disponible{cursor:default;color:var(--tinta-3);background:var(--panel-2)}
.dia-metrica.no-disponible .pill{margin-left:auto}
.inicio-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:28px}
.bloq-cab .dato-sec{font-size:12px;color:var(--tinta-3)}
.estado-bueno{padding:18px;color:var(--verde);font-size:13px}
.estado-dudoso{padding:18px;color:var(--tinta-3);font-size:13px;line-height:1.5}
.recientes-lista button{width:100%;display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--linea);text-align:left}
.recientes-lista button:last-child{border-bottom:0}.recientes-lista button:hover{background:var(--hover)}
.recientes-lista button>span:not(.avc){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:550}
.recientes-lista small{color:var(--tinta-3);font-size:11px;white-space:nowrap}
@media(max-width:850px){.panel-dia{grid-template-columns:repeat(2,1fr)}.dia-metrica{border-bottom:1px solid var(--linea)}.dia-metrica:nth-child(even){border-right:0}.dia-metrica:nth-last-child(-n+2){border-bottom:0}
  /* `1fr` a secas es `minmax(auto,1fr)`, y ese `auto` es el ANCHO MÍNIMO DEL
     CONTENIDO. La lista de carga lleva filas con el nombre del cliente sin
     partir, así que la columna se plantaba en 474 px dentro de un móvil de
     339: la pantalla de Inicio entera se iba de lado y las cifras de cada
     barra quedaban fuera. Con `minmax(0,…)` la columna puede encogerse. */
  .inicio-cols{grid-template-columns:minmax(0,1fr)}}

/* ── Catálogos de producto ────────────────────────────────────────────── */
.nota-producto{display:flex;align-items:center;gap:10px 18px;padding:12px 14px;margin:-4px 0 22px;
  border:1px solid var(--linea-2);border-radius:12px;background:var(--panel-2);font-size:13px}
.nota-producto b{white-space:nowrap}.nota-producto span{color:var(--tinta-3)}
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.agente-card,.autom-card{border:1px solid var(--linea-2);border-radius:12px;padding:16px;background:var(--panel);box-shadow:var(--sombra)}
.agente-top,.autom-top{display:flex;align-items:center;gap:10px}.agente-top>div,.autom-top>div{flex:1;min-width:0}
.agente-top h3,.autom-top h3{font-size:14px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agente-top>div>span,.autom-top>div>span{font-size:12px;color:var(--tinta-3)}
.agente-av{width:38px;height:38px;border-radius:12px;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:680;flex:none}
.agente-av.mini{width:30px;height:30px;border-radius:8px;background:#6d3fc4}
/* Con imagen el cuadrito se convierte en marco: la foto lo llena entera y el
   color de fondo solo se ve mientras carga. Con emoji manda el emoji y el color
   del agente queda como tinte suave detrás. */
.agente-av.con-imagen{overflow:hidden}
.agente-av.con-imagen img{width:100%;height:100%;object-fit:cover;display:block}
.agente-av.con-emoji{background:color-mix(in srgb,var(--av,#6d3fc4) 16%,transparent);font-size:18px;line-height:1}
.agente-av.grande.con-emoji{font-size:22px}
.agente-av.mini.con-emoji{font-size:14px}
/* Elegir la cara del agente. La rejilla usa `auto-fill` en vez de un número fijo
   de columnas para que en el móvil no se salga del diálogo. */
.rejilla-emoji{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px}
.emoji-op{border:1px solid transparent;background:none;border-radius:8px;font-size:18px;
  line-height:1;padding:7px 0;cursor:pointer;transition:background .12s,border-color .12s}
.emoji-op:hover{background:var(--acento-b)}
.emoji-op.puesto{border-color:var(--acento);background:var(--acento-b)}
/* Cuatro botones no caben en los 420 px del diálogo: se agrupan por lo que
   hacen —añadir/quitar a un lado, confirmar al otro— y así al envolver bajan
   juntos y no queda uno suelto. */
.dlg-avatar-pie{display:flex;justify-content:space-between;gap:9px;margin-top:20px;flex-wrap:wrap}
.dlg-avatar-pie>div{display:flex;gap:9px}
/* En la ficha el avatar es un botón: hay que verlo pulsable sin gritarlo. */
button.agente-av{border:0;padding:0;cursor:pointer;position:relative}
button.agente-av:hover::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.agente-card>p{font-size:13px;color:var(--tinta-2);min-height:40px;margin:14px 0}
.agente-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px}.agente-meta>b{font-size:11px;color:var(--tinta-3);width:78px}
/* Lo que antes ocupaba esta franja eran dos listas («Skills», «Herramientas»)
   que en la práctica siempre venían vacías; las columnas ya se han quitado de la
   base. En su sitio va lo único que se quiere saber de un vistazo en una rejilla
   de agentes: si se usa, cuánto, y si está fallando. */
/* `card-uso` y no `agente-uso`: ese nombre ya lo tiene la rejilla de cifras de
   la ficha, y sus reglas ganaban por ir después en el fichero. */
.card-uso{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--linea);font-size:12px;color:var(--tinta-2)}
.card-uso b{font-weight:680;color:var(--tinta)}
.card-uso time{margin-left:auto;color:var(--tinta-3);font-size:11px;white-space:nowrap}
.card-uso .uso-fallos{color:var(--rojo);font-size:11px}
.card-acciones{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.card-acciones .btn{white-space:nowrap}
.btn:disabled{opacity:.46;cursor:not-allowed}.pill.mini{font-size:10px;padding:2px 6px}
.estado-indisponible{display:flex;align-items:flex-start;gap:14px;margin-top:18px;padding:16px;
  border:1px dashed var(--linea-2);border-radius:12px;background:var(--panel-2);color:var(--tinta-2)}
.estado-indisponible>div{min-width:0}.estado-indisponible b{font-size:13px}.estado-indisponible p{margin:3px 0 0;font-size:13px;color:var(--tinta-3)}
.nav-item.futuro{opacity:.58;cursor:default}
.agente-dot{width:14px;height:14px;border-radius:4px;background:var(--morado);opacity:.75;flex:none}
.agente-ficha-cab{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}.agente-ficha-cab>.btn:first-child{width:100%}.agente-titulo{display:flex;align-items:center;gap:12px;flex:1}.agente-titulo h1{font-size:28px}.constructor-agente{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;margin-top:20px}.constructor-agente main,.constructor-agente aside{display:flex;flex-direction:column;gap:16px}.constructor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.constructor-agente label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--tinta-3)}.constructor-agente input,.constructor-agente select,.constructor-agente textarea{width:100%;border:1px solid var(--linea-2);border-radius:8px;background:var(--fondo);color:var(--tinta);padding:9px 10px;font:inherit}.constructor-agente textarea{resize:vertical;line-height:1.5}.constructor-ancho{margin-top:12px}.constructor-pila{display:flex;flex-direction:column;gap:12px;margin-top:14px}.constructor-agente .check-fila{flex-direction:row;align-items:flex-start}.constructor-agente .check-fila input{width:auto;margin-top:2px}.constructor-agente .check-fila span{font-size:13px;color:var(--tinta-2)}.aviso-seguridad{font-size:12px;line-height:1.5;color:var(--tinta-3);padding:10px;margin-top:14px;background:var(--panel-2);border-radius:8px}.clientes-permitidos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;max-height:330px;overflow:auto;margin-top:12px}.clientes-permitidos label{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:7px;padding:7px;border:1px solid var(--linea);border-radius:8px}.clientes-permitidos label input{width:auto}.clientes-permitidos label span{font-size:12px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clientes-permitidos label small{font-size:10px;text-transform:uppercase}
/* Las ramas: la misma rejilla que los clientes pero sin avatar, porque una rama
   no tiene cara. Tres columnas de nombre corto en vez de dos anchas. */
.ramas-agente{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;margin-top:12px}
.ramas-agente label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;
  padding:7px;border:1px solid var(--linea);border-radius:8px}
.ramas-agente label:has(input:checked){background:var(--acento-b);border-color:var(--acento-borde)}
.ramas-agente label input{width:auto}
.ramas-agente label span{font-size:12px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ramas-agente label small{font-size:10px;color:var(--tinta-3)}
/* Lo que un agente está aprendiendo. La etiqueta de la derecha es lo que se lee
   primero —observación o regla—, porque es lo que decide si eso le entra en el
   contexto mañana o sigue esperando a repetirse. */
.patrones{display:flex;flex-direction:column;gap:6px;margin-top:var(--e3)}
.patron{display:flex;align-items:flex-start;gap:var(--e3);padding:9px 10px;
  background:var(--panel-2);border-radius:8px}
.patron>div{flex:1;min-width:0}
.patron b{display:block;font-size:12px;font-weight:550;color:var(--tinta);line-height:1.45}
.patron small{display:block;font-size:10px;color:var(--tinta-3);margin-top:3px}
.patron .pill{flex:none}
/* Su método: el titular y la entradilla del playbook de su rama. No es un
   resumen que escribimos aparte —eso se quedaría viejo— sino las dos primeras
   líneas del fichero de verdad. */
.agente-metodo{padding:var(--e4);background:var(--panel-2);border-radius:12px}
.agente-metodo b{display:block;font-size:16px;font-weight:680;letter-spacing:-.01em;color:var(--tinta)}
.agente-metodo p{font-size:13px;line-height:1.6;color:var(--tinta-2);margin:var(--e2) 0 0}
.agente-metodo small{display:block;font-size:10px;color:var(--tinta-3);margin-top:var(--e3)}
.agente-metodo small code{font-size:10px}
/* La descripción, debajo del nombre. Antes ocupaba un bloque entero titulado
   «Qué hace» que repetía lo que ya decía el nombre del agente y lo que dice el
   playbook justo debajo. */
.agente-lema{font-size:14px;color:var(--tinta-2);line-height:1.5;margin:var(--e2) 0 0;max-width:62ch}
.agente-avanzado{margin-top:var(--e4);border-top:1px solid var(--linea);padding-top:var(--e3)}
.agente-avanzado summary{font-size:12px;font-weight:550;color:var(--tinta-3);cursor:pointer}
.agente-avanzado[open] summary{margin-bottom:var(--e3)}
@media(max-width:900px){.constructor-agente{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.constructor-grid{grid-template-columns:minmax(0,1fr)}.clientes-permitidos,.ramas-agente{grid-template-columns:minmax(0,1fr)}}
.punto.estado-ok{background:var(--verde)}.punto.estado-mal{background:var(--rojo)}
.autom-resumen{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:22px}
.autom-resumen button{border:1px solid var(--linea-2);border-radius:12px;padding:12px 14px;text-align:left;background:var(--panel)}
.autom-resumen button.activo{border-color:var(--tinta)}.autom-resumen b{font-size:22px;display:block}.autom-resumen span{font-size:12px;color:var(--tinta-3)}
.autom-herramientas{display:flex;align-items:center;gap:12px;margin:-10px 0 16px}.autom-herramientas .busqueda{max-width:430px;flex:1}.autom-herramientas>span{font-size:12px;color:var(--tinta-3)}
.menu-ayuda{max-width:330px;margin:0 10px 8px;color:var(--tinta-3);font-size:12px;line-height:1.45}.tokens-autom{min-width:330px}.token-autom{display:flex;align-items:center;gap:12px;padding:9px 10px;border-top:1px solid var(--linea)}.token-autom>div{min-width:0;flex:1}.token-autom b,.token-autom small{display:block}.token-autom small{margin-top:3px;color:var(--tinta-3)}
.autom-centro{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}.autom-centro>section{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);padding:14px}.autom-centro section>button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 4px;border-top:1px solid var(--linea);text-align:left}.autom-centro section>button:hover{background:var(--hover)}.autom-centro section>button>span:nth-child(2){flex:1;min-width:0}.autom-centro section>button b,.autom-centro section>button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autom-centro section>button b{font-size:13px}.autom-centro section>button small{font-size:11px;color:var(--tinta-3);margin-top:2px}.autom-centro .fl{color:var(--tinta-3)}.cal-fecha{width:34px;text-align:center;flex:none}.cal-fecha b{font-size:16px!important}.cal-fecha small{text-transform:uppercase;font-size:10px!important}.autom-centro .punto.ambar{background:var(--ambar)}
.autom-lineas{margin:14px 0;min-height:86px}.autom-lineas>div{display:flex;align-items:center;gap:7px;padding:5px 0;font-size:13px}
.autom-lineas svg{width:14px;height:14px;color:var(--tinta-3)}.autom-lineas span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.autom-lineas small{color:var(--tinta-3)}
.autom-lista-cab{margin-bottom:20px}.autom-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin-bottom:14px}.autom-toolbar .busqueda{flex:1 1 210px;min-width:170px;max-width:340px}.autom-toolbar .bbdd-orden{max-width:200px;text-overflow:ellipsis}.autom-filtros{display:flex;gap:4px;padding:3px;background:var(--panel-2);border-radius:8px;flex:none;order:2;flex-basis:100%}.autom-filtros button{padding:6px 10px;border-radius:8px;font-size:12px;white-space:nowrap;color:var(--tinta-3)}.autom-filtros button b{margin-left:4px;font-weight:680}.autom-filtros button.activo{background:var(--panel);color:var(--tinta);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.autom-tabla-cab,.autom-fila{display:grid;grid-template-columns:minmax(250px,1.8fr) minmax(110px,.7fr) minmax(120px,.8fr) minmax(105px,.65fr) 105px;gap:14px;align-items:center}.autom-tabla-cab{padding:0 42px 8px 13px;color:var(--tinta-3);font-size:11px;font-weight:680;text-transform:uppercase;letter-spacing:.04em}.autom-lista{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);overflow:hidden}.autom-fila{position:relative;width:100%;padding:11px 38px 11px 12px;border-bottom:1px solid var(--linea);text-align:left;font-size:12px;color:var(--tinta-2);min-height:60px}.autom-fila:last-child{border-bottom:0}.autom-fila:hover{background:var(--hover)}.autom-identidad{display:flex;align-items:center;gap:10px;min-width:0}.autom-identidad>span:last-child{min-width:0}.autom-identidad b,.autom-identidad small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autom-identidad b{font-size:13px;color:var(--tinta);font-weight:550}.autom-identidad small{font-size:11px;color:var(--tinta-3);margin-top:3px}.autom-mini-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--panel-2);color:var(--tinta-2);flex:none}.autom-mini-icon svg{width:16px;height:16px}.autom-fila>span:not(.autom-identidad){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autom-fila>span:nth-last-of-type(1){display:flex;align-items:center;gap:6px}.estado-punto{width:7px;height:7px;border-radius:50%;background:var(--tinta-3);flex:none}.estado-punto.activa{background:var(--verde)}.estado-punto.error{background:var(--rojo)}.estado-punto.pausada{background:var(--ambar)}.fila-flecha{position:absolute;right:14px;font-size:22px;color:var(--tinta-3);font-style:normal}
/* La punta de flecha estaba repetida en las 38 filas diciendo lo mismo: que se
   puede entrar. Como se puede entrar en TODAS, no distingue ninguna; solo hace
   ruido en el borde derecho. Aparece en la fila que tienes debajo del ratón,
   que es la única a la que la respuesta le sirve.
   Con `hover:hover` porque en una pantalla táctil no hay ratón que la despierte,
   y con `focus-within` para que quien navega con el tabulador la vea igual. */
@media (hover:hover){
  .autom-lista .fila-flecha{opacity:0;transition:opacity .12s}
  .autom-fila:hover .fila-flecha,.autom-fila:focus-within .fila-flecha,
  .autom-fila:focus-visible .fila-flecha{opacity:1}
}
.bbdd-vistas{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--linea);margin:-5px 0 12px}.bbdd-vistas button{padding:9px 10px;font-size:12px;color:var(--tinta-3);border-bottom:2px solid transparent}.bbdd-vistas button.activo{color:var(--tinta);border-color:var(--tinta)}.bbdd-vistas span{flex:1}.bbdd-vistas .bbdd-anadir-vista{opacity:.7}.bbdd-toolbar{justify-content:flex-start}.bbdd-toolbar .busqueda{margin-right:auto}.bbdd-orden{border:1px solid var(--linea-2);border-radius:8px;padding:7px 9px;background:var(--panel);color:var(--tinta-2);font-size:12px}.bbdd-modos{display:flex;border:1px solid var(--linea-2);border-radius:8px;overflow:hidden}.bbdd-modos button{width:31px;height:30px;color:var(--tinta-3)}.bbdd-modos button+button{border-left:1px solid var(--linea)}.bbdd-modos button.activo{background:var(--activo);color:var(--tinta)}.autom-tabla-cab.bbdd-cab,.autom-fila.bbdd-fila{grid-template-columns:minmax(240px,1.55fr) minmax(165px,1fr) minmax(115px,.7fr) 90px minmax(110px,.7fr) 105px}.bbdd-lista{border-radius:8px}.bbdd-fila{min-height:64px}.bbdd-fila:hover{box-shadow:inset 3px 0 var(--tinta)}.bbdd-proyecto{display:flex!important;align-items:center;gap:8px;min-width:0}.bbdd-proyecto>.avc{width:27px;height:27px;border-radius:8px}.bbdd-proyecto>span{min-width:0}.bbdd-proyecto b,.bbdd-proyecto small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bbdd-proyecto b{font-size:12px;color:var(--tinta);font-weight:550}.bbdd-proyecto small{font-size:10px;color:var(--tinta-3);margin-top:2px}.bbdd-proyecto small i{display:inline-block;width:6px;height:6px;border-radius:4px;margin-right:4px}.bbdd-persona{display:flex!important;align-items:center;gap:7px}.bbdd-persona>i{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--activo);font-style:normal;font-size:10px;font-weight:680;color:var(--tinta-2)}.tipo-autom{display:inline-block;padding:3px 7px;border:1px solid var(--linea);border-radius:4px;font-size:10px;font-style:normal;color:var(--tinta-2);background:var(--panel-2)}.bbdd-fila .pill{font-style:normal;display:inline-flex;align-items:center;gap:5px}.autom-tablero{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:11px;align-items:start;overflow-x:auto;padding-bottom:10px}.autom-tablero>section{background:var(--panel-2);border:1px solid var(--linea);border-radius:8px;min-height:130px}.autom-tablero>section>header{display:flex;align-items:center;padding:10px 11px;font-size:12px;font-weight:680}.autom-tablero>section>header span{display:flex;align-items:center;gap:6px;flex:1}.autom-tablero>section>header b{color:var(--tinta-3)}.autom-tablero>section>div{padding:0 6px 6px}.autom-tablero>section>div>button{display:block;width:100%;padding:10px;margin-bottom:6px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.03)}.autom-tablero>section>div>button:hover{border-color:var(--linea-2);box-shadow:var(--sombra)}.autom-tablero>section>div>button>div{display:flex;align-items:center;gap:8px;margin-bottom:10px}.autom-tablero>section>div>button>div>b{font-size:12px;line-height:1.35}.autom-tablero .autom-mini-icon{width:27px;height:27px}.autom-tablero>section>div>button>small{display:block;margin-top:9px;color:var(--tinta-3);font-size:10px}.autom-tablero>section>div>p{padding:20px;text-align:center;color:var(--tinta-3);font-size:11px}
.panel-velo{position:fixed;inset:0;z-index:100;background:rgba(20,22,27,.16);display:flex;justify-content:flex-end}.detalle-lateral{height:100%;width:min(680px,64vw);background:var(--panel);border-left:1px solid var(--linea-2);box-shadow:-14px 0 40px rgba(18,20,25,.12);display:flex;flex-direction:column;animation:entraDetalle .18s ease-out}.detalle-lateral>header{height:54px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--linea);flex:none}.detalle-ruta{font-size:12px;color:var(--tinta-3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detalle-ruta span{margin:0 7px;color:var(--linea-2)}.detalle-scroll{overflow-y:auto;flex:1}.detalle-hero{display:flex;align-items:center;gap:13px;padding:25px 26px 16px}.detalle-hero>div:nth-child(2){flex:1;min-width:0}.detalle-hero h1{font-size:22px;line-height:1.25;margin:0;overflow-wrap:anywhere}.detalle-hero p{font-size:12px;color:var(--tinta-3);margin:5px 0 0}.autom-icono{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tinta);color:var(--panel);flex:none}.autom-icono svg{width:21px;height:21px}.detalle-acciones{display:flex;gap:7px;padding:0 26px 19px}.detalle-tabs{display:flex;padding:0 26px;border-bottom:1px solid var(--linea);position:sticky;top:0;background:var(--panel);z-index:2}.detalle-tabs button{padding:11px 13px 10px;font-size:12px;color:var(--tinta-3);border-bottom:2px solid transparent}.detalle-tabs button.activo{color:var(--tinta);border-color:var(--tinta)}.detalle-metricas{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 26px 0;border:1px solid var(--linea);border-radius:12px}.detalle-metricas>div{padding:13px 15px;border-right:1px solid var(--linea)}.detalle-metricas>div:last-child{border-right:0}.detalle-metricas b,.detalle-metricas span{display:block}.detalle-metricas b{font-size:18px}.detalle-metricas span{font-size:11px;color:var(--tinta-3);margin-top:2px}.detalle-seccion{margin:0 26px;padding:22px 0;border-bottom:1px solid var(--linea)}.detalle-seccion.sin-borde{border:0}.detalle-seccion h2{font-size:14px;margin:0 0 10px}.detalle-seccion h3{font-size:12px;margin:18px 0 5px;color:var(--tinta-3)}.detalle-seccion p{font-size:13px;line-height:1.62;color:var(--tinta-2);margin:0}.detalle-datos{margin:0}.detalle-datos>div{display:grid;grid-template-columns:120px 1fr;padding:7px 0}.detalle-datos dt{font-size:12px;color:var(--tinta-3)}.detalle-datos dd{font-size:13px;margin:0}.detalle-tecnico{margin:16px 26px 28px;border:1px solid var(--linea);border-radius:8px;padding:0 13px}.detalle-tecnico summary{padding:11px 0;font-size:12px;font-weight:550;cursor:pointer}.detalle-tecnico>div{padding:12px 0;border-top:1px solid var(--linea)}.detalle-tecnico b{font-size:12px}.detalle-tecnico p{font-size:12px;color:var(--tinta-2);line-height:1.55}.detalle-lista-ejec>div{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--linea)}.detalle-lista-ejec>div>div{flex:1;min-width:0}.detalle-lista-ejec b,.detalle-lista-ejec small{display:block}.detalle-lista-ejec b{font-size:13px}.detalle-lista-ejec small{font-size:11px;color:var(--tinta-3);margin-top:4px}.ejec-dot{width:8px;height:8px;border-radius:50%;background:var(--tinta-3);margin-top:5px}.ejec-dot.verde{background:var(--verde)}.ejec-dot.rojo{background:var(--rojo)}.detalle-integracion{display:flex;align-items:center;gap:8px;margin-top:14px}.detalle-integracion code{flex:1;padding:9px;overflow:hidden;text-overflow:ellipsis}.detalle-enlace{display:inline-block;margin-top:15px;font-size:12px;color:var(--azul)}.panel-vacio{padding:40px!important;justify-content:center;color:var(--tinta-3);font-size:13px}@keyframes entraDetalle{from{transform:translateX(20px);opacity:.7}to{transform:none;opacity:1}}
.agente-av.grande{width:44px;height:44px;border-radius:12px;font-size:16px}.detalle-pills{display:flex;gap:6px;flex-wrap:wrap}.agente-detalle .detalle-seccion h3{margin-top:17px}
.autom-ficha-cab{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}.autom-ficha-cab>.btn:first-child{width:100%;margin-bottom:4px}.autom-titulo{display:flex;align-items:center;gap:12px;flex:1;min-width:280px}.autom-titulo h1{font-size:28px}.autom-ficha-cab>.acciones{margin-left:auto}
.autom-kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);margin:20px 0;overflow:hidden}.autom-kpis>div{padding:16px 18px;border-right:1px solid var(--linea)}.autom-kpis>div:last-child{border-right:0}.autom-kpis b,.autom-kpis span{display:block}.autom-kpis b{font-size:22px}.autom-kpis span{font-size:12px;color:var(--tinta-3);margin-top:3px}.texto-rojo{color:var(--rojo)}
.autom-ficha-cols{grid-template-columns:minmax(0,1fr) 340px}.autom-ficha-bloque{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);padding:17px}.autom-ficha-bloque h2{font-size:14px;margin:0}.autom-ficha-texto{font-size:13px;line-height:1.65;color:var(--tinta-2);margin-top:12px;overflow-wrap:anywhere}.vacio-inline{font-size:13px;color:var(--tinta-3);font-style:italic}.autom-datos{margin:12px 0 0}.autom-datos>div{display:grid;grid-template-columns:95px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--linea)}.autom-datos dt{font-size:12px;color:var(--tinta-3)}.autom-datos dd{font-size:13px;margin:0;overflow-wrap:anywhere}.autom-datos dd button{color:var(--azul);font-size:11px}.autom-origen{display:block;margin-top:12px;padding:8px;white-space:normal;overflow-wrap:anywhere}.autom-historial-completo>div{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--linea)}.autom-historial-completo>div:first-child{margin-top:10px}.autom-historial-completo>div>div{min-width:0}.autom-historial-completo b,.autom-historial-completo small{display:block}.autom-historial-completo b{font-size:13px}.autom-historial-completo small{font-size:12px;color:var(--tinta-3);margin-top:3px;overflow-wrap:anywhere}
@media(max-width:720px){.autom-centro{grid-template-columns:minmax(0,1fr)}.autom-kpis{grid-template-columns:1fr 1fr}.autom-kpis>div:nth-child(2){border-right:0}.autom-kpis>div:nth-child(-n+2){border-bottom:1px solid var(--linea)}.autom-ficha-cab>.acciones{width:100%;margin-left:0}.autom-ficha-cols{grid-template-columns:minmax(0,1fr)}}
/* La barra de herramientas se pone en columna en el móvil, y al girarla el
   `flex` de sus hijos deja de repartir ANCHO y pasa a repartir ALTO. El buscador
   llevaba `flex:1 1 210px` para ocupar 210 px de ancho en la fila del
   escritorio: en columna eso se convertía en 210 px de ALTO y salía una caja
   cuadrada enorme con la lupa flotando en mitad. Encima `.autom-filtros` pedía
   `flex-basis:100%` —el alto entero— y con `flex-wrap` heredado la barra se
   partía en DOS columnas de 439 px dentro de un hueco de 351: los desplegables
   y las pestañas se salían por la derecha. Se quita el reparto por alto, se
   prohíbe que la columna se parta y los controles ocupan el ancho. */
@media(max-width:850px){.autom-toolbar{align-items:stretch;flex-direction:column;flex-wrap:nowrap}.autom-toolbar .busqueda{max-width:none;flex:none}.bbdd-toolbar .busqueda{margin-right:0}.autom-toolbar .bbdd-orden{max-width:none}.autom-filtros{overflow-x:auto;flex-basis:auto}.autom-tabla-cab{display:none}.autom-fila{grid-template-columns:1fr auto;padding-right:34px}.autom-fila>span:not(.autom-identidad):not(:last-of-type){display:none}.autom-fila>span:last-of-type{justify-self:end}.detalle-lateral{width:min(100%,620px)}.detalle-hero{padding-left:18px;padding-right:18px}.detalle-acciones,.detalle-tabs{padding-left:18px;padding-right:18px}.detalle-metricas,.detalle-seccion,.detalle-tecnico,.autom-falta{margin-left:18px;margin-right:18px}}

/* ── Mensajes ─────────────────────────────────────────────────────────── */
.mensajes-inicio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:28px}
.convs,.clientes-chat,.personas{border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;background:var(--panel)}
.conv-fila{display:flex;align-items:center;border-bottom:1px solid var(--linea)}.conv-fila:last-child{border-bottom:0}.conv-fila:hover{background:var(--hover)}
.conv-abrir{display:flex;align-items:center;gap:10px;padding:10px 12px;min-width:0;flex:1;text-align:left}
.conv-abrir .txt{display:flex;flex-direction:column;min-width:0;flex:1}.conv-abrir b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-abrir small{font-size:12px;color:var(--tinta-3)}.conv-abrir time{font-size:11px;color:var(--tinta-3);white-space:nowrap}
.conv-menu{width:30px;height:30px;border-radius:8px;color:var(--tinta-3);margin-right:3px}.conv-menu:hover{background:var(--activo);color:var(--tinta)}
.conv-menu.peligro:hover{color:var(--rojo)}
.clientes-chat button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-bottom:1px solid var(--linea);text-align:left}
.clientes-chat button:last-child{border-bottom:0}.clientes-chat button:hover{background:var(--hover)}.clientes-chat button>span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.clientes-chat b{font-size:13px}.clientes-chat small{font-size:11px;color:var(--tinta-3)}.clientes-chat .fl{color:var(--tinta-3)}
.canales-rapidos{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 22px}
.canal-chip{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--linea-2);
  border-radius:8px;background:var(--panel);font-size:13px}.canal-chip:hover{background:var(--hover)}
.canal-chip>span{color:var(--tinta-3)}.canal-chip i{font-style:normal;background:var(--rojo);color:#fff;
  border-radius:12px;padding:0 6px;font-size:10px}

/* Canal humano: tres zonas cuando hay hilo y dos cuando está cerrado. */
.canal-layout{height:100%;display:flex;min-width:0}.canal-principal{display:flex;flex-direction:column;min-width:0;flex:1}
.canal-cab{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--linea);flex:none}
.canal-volver{display:none;width:40px;height:40px;border-radius:8px;place-items:center;
  font-size:28px;line-height:1;color:var(--tinta-2)}
/* Chat de dos: su cara arriba. Es lo que dice con quién hablas de un vistazo,
   mejor que cualquier subtítulo. */
.canal-cara{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  overflow:hidden;position:relative;background:var(--primario);color:var(--primario-txt);
  font-size:12px;font-weight:680;letter-spacing:.02em}
.canal-cara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Lo de «de qué va» a un toque, no ocupando la cabecera. */
.canal-info{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  color:var(--tinta-3);background:none;border:0;cursor:pointer}
.canal-info:hover{background:var(--hover);color:var(--tinta)}
.canal-info svg{width:19px;height:19px}
.canal-cab>div{min-width:0;flex:1}.canal-cab h1{font-size:16px;margin:0}.canal-cab p{font-size:12px;color:var(--tinta-3);margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canal-mensajes{flex:1;min-height:0;overflow-y:auto;padding:18px 20px}
.mensaje-humano{display:flex;gap:11px;padding:8px 6px;border-radius:8px;max-width:900px}.mensaje-humano:hover{background:var(--hover)}
.mensaje-cuerpo{min-width:0;flex:1}.mensaje-meta{display:flex;align-items:baseline;gap:8px}.mensaje-meta b{font-size:14px}.mensaje-meta time{font-size:11px;color:var(--tinta-3)}
.mensaje-texto{font-size:14px;line-height:1.52;overflow-wrap:anywhere}.mensaje-texto mark{background:var(--azul-b);color:var(--azul);border-radius:4px;padding:1px 3px}
.hilo-abrir{font-size:12px;color:var(--azul);padding:3px 0;margin-top:3px}.hilo-abrir:hover{text-decoration:underline}
.canal-vacio{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 6px}.canal-vacio b{font-size:18px}.canal-vacio span{color:var(--tinta-3);font-size:13px;margin-top:3px}
/* «… está escribiendo» de un agente en el canal. Va entre los mensajes y el
   compositor, discreto y en una sola línea. */
.canal-escribiendo{display:flex;align-items:center;gap:7px;flex:none;
  margin:0 20px 6px;padding:2px 2px;font-size:12px;color:var(--tinta-3);animation:fundido .2s ease-out}
.canal-escribiendo-punto{width:7px;height:7px;border-radius:50%;flex:none}
.canal-escribiendo-txt{font-weight:550;color:var(--tinta-2)}
.canal-compositor{margin:0 20px 18px;border:1px solid var(--linea-2);border-radius:12px;box-shadow:var(--sombra);flex:none;background:var(--panel)}
.mensaje-cita{display:block;width:100%;padding:8px 10px;margin:0 0 8px;border-left:3px solid var(--acento);border-radius:4px 8px 8px 4px;background:color-mix(in srgb,var(--tinta) 5%,transparent);text-align:left;color:var(--tinta);font-size:12px;line-height:1.5}
.mensaje-cita b,.mensaje-cita span,.canal-cita span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.mensaje-cita b{font-weight:680;margin-bottom:2px}.mensaje-cita span{color:var(--tinta-2)}
.canal-cita{display:flex;align-items:center;gap:12px;margin:10px 12px 0;padding:8px 10px;background:var(--hover);border-left:3px solid var(--acento);border-radius:4px 8px 8px 4px;font-size:12px;line-height:1.5}
.canal-cita[hidden]{display:none}.canal-cita>div{flex:1;min-width:0}.canal-cita small{display:block;font-size:12px;font-weight:680;margin-bottom:2px}
.canal-cita>button{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--tinta-2)}.canal-cita>button:hover{background:var(--activo)}.canal-cita>button svg{width:16px;height:16px}
/* La raya del día. Como en WhatsApp: una etiqueta centrada sobre una línea, que
   se lee sin leerla y no compite con los mensajes. */
.canal-dia{display:flex;align-items:center;gap:12px;margin:20px 6px 14px;color:var(--tinta-3);
  font-size:12px}
.canal-dia::before,.canal-dia::after{content:"";flex:1;height:1px;background:var(--linea)}
.canal-dia span{flex:none;padding:3px 11px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--linea);font-weight:550;text-transform:none}
.canal-dia:first-child{margin-top:4px}
/* Enviar a la derecha, redondo y con la flecha, no un botón con la palabra
   «Enviar» abajo a la izquierda: en una mensajería el pulgar lo busca en la
   esquina. Adjuntar y dictar, a su lado. */
.canal-acciones{margin-left:auto;display:flex;align-items:center;gap:var(--e1)}
.canal-compositor textarea,.hilo-form textarea{width:100%;border:0;resize:none;background:none;padding:11px 12px;outline:none;font-size:14px;display:block}
.canal-editor{padding:11px 12px;min-height:46px;max-height:220px;overflow:auto;white-space:pre-wrap;outline:none;cursor:text}
.canal-editor:empty::before{content:attr(data-placeholder);color:var(--tinta-3);pointer-events:none}
.canal-editor[aria-disabled="true"]{opacity:.6;cursor:wait}
.mensaje-texto ul{list-style:disc;margin:5px 0;padding-left:22px}.mensaje-texto li{margin:3px 0}
.canal-ayuda{display:flex;align-items:center;gap:10px;padding:0 7px 7px 12px}.canal-ayuda>span{font-size:11px;color:var(--tinta-3);flex:1}
.hilo-panel{width:min(380px,38vw);border-left:1px solid var(--linea);display:flex;flex-direction:column;background:var(--panel);flex:none}
.hilo-panel>header{height:54px;display:flex;align-items:center;padding:0 12px 0 16px;border-bottom:1px solid var(--linea)}.hilo-panel>header b{flex:1}
.hilo-scroll{flex:1;overflow-y:auto;padding:12px 10px}.hilo-respuestas{border-top:1px solid var(--linea);margin-top:10px;padding-top:10px}
.hilo-form{margin:10px;border:1px solid var(--linea-2);border-radius:8px;padding-bottom:7px}.hilo-form .btn{margin-left:auto;margin-right:7px;display:flex}
@media(max-width:850px){.hilo-panel{position:absolute;inset:0 0 0 auto;width:min(92vw,420px);z-index:20;box-shadow:var(--sombra-alta)}.canal-layout{position:relative}}
/* A 390 px la cabecera del canal reparte su ancho entre volver, la cara, el
   nombre, «N miembros» y dos botones: al nombre le quedaban 40 px y
   «# equipo-advanze» salía en tres líneas montado sobre la píldora, con la
   descripción en «Cana…». En el móvil la píldora se va (los miembros están en
   el panel de contexto, a un toque) y el nombre va en una línea. */
@media(max-width:700px){.canal-cab{gap:10px}.canal-cab>.pill{display:none}
  .canal-cab h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:700px){.canal-cab{padding:11px 14px}.canal-mensajes{padding:12px 8px}.canal-compositor{margin:0 8px 8px}.canal-escribiendo{margin:0 8px 5px}.canal-ayuda>span{display:none}.mensaje-humano{padding:7px 5px}}

/* ── Equipo y accesos ─────────────────────────────────────────────────── */
.equipo-layout{display:grid;grid-template-columns:minmax(280px,.65fr) minmax(460px,1.35fr);gap:24px;align-items:start}
.persona-fila{display:flex;align-items:center;gap:10px;padding:11px 12px;width:100%;text-align:left;border-bottom:1px solid var(--linea)}
.persona-fila:last-child{border-bottom:0}.persona-fila.activo{background:var(--activo)}
/* Sin acceso (dada de baja): sigue en la lista para poder reactivarla, atenuada. */
.persona-fila.inactiva,.acceso-ficha.inactiva .acceso-persona{opacity:.55}
.acceso-baja{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}.acceso-baja .apunte{margin:0;flex:1;min-width:200px}
.persona-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primario);color:var(--primario-txt);font-size:10px;font-weight:680;flex:none;position:relative;overflow:hidden}
.persona-av.grande{width:52px;height:52px;font-size:14px}.persona-fila .txt{display:flex;flex-direction:column;flex:1;min-width:0}
.persona-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.presencia{width:9px;height:9px;border-radius:50%;background:var(--linea-2);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--linea-2);flex:none}
.presencia.online{background:var(--verde);box-shadow:0 0 0 1px var(--verde)}
.directos-inicio{max-width:620px;margin:0 0 24px}.directos-inicio .personas{border-radius:12px}
.actividad-resumen{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;margin-bottom:24px}
.actividad-resumen>div{display:flex;flex-direction:column;padding:13px 15px;border-right:1px solid var(--linea)}.actividad-resumen>div:last-child{border-right:0}.actividad-resumen b{font-size:22px}.actividad-resumen span{font-size:12px;color:var(--tinta-3)}
.actividad-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:24px}.aprobaciones-lista{display:grid;gap:9px}.aprobacion{border:1px solid var(--linea-2);border-radius:12px;padding:14px;background:var(--panel)}
.actividad-global{margin-top:28px;border-top:1px solid var(--linea);padding-top:20px}.actividad-global .bloq-cab p{font-size:11px;color:var(--tinta-3);margin:3px 0 0}.actividad-filtros{display:flex;gap:5px;flex-wrap:wrap}.actividad-filtros .activo{background:var(--tinta);border-color:var(--tinta);color:var(--panel)}.actividad-feed{margin-top:10px;border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;background:var(--panel)}.actividad-evento{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--linea);text-align:left}.actividad-evento:last-child{border-bottom:0}.actividad-evento:hover{background:var(--hover)}.actividad-evento>span:nth-child(2){font-size:12px;min-width:0}.actividad-evento strong{font-weight:680}.actividad-evento small{display:block;margin-top:3px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.actividad-evento time{font-size:10px;color:var(--tinta-3);align-self:start;margin-top:2px}.actividad-icono{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--panel-2);font-size:13px}.actividad-icono.documento{background:#eef3ff}.actividad-icono.tarea{background:#eef9f1}
.aprobacion-top{display:flex;align-items:center}.aprobacion-top time{margin-left:auto;color:var(--tinta-3);font-size:11px}.aprobacion h3{font-size:14px;margin:10px 0 3px}.aprobacion p{font-size:13px;color:var(--tinta-2);margin:0 0 6px}.aprobacion>small{color:var(--tinta-3)}
.menciones-lista{border:1px solid var(--linea-2);border-radius:12px;overflow:hidden}.mencion-fila{display:flex;align-items:center;gap:9px;padding:10px;width:100%;text-align:left;border-bottom:1px solid var(--linea)}.mencion-fila:last-child{border-bottom:0}.mencion-fila:hover{background:var(--hover)}.mencion-fila.nueva{background:var(--azul-b)}
.mencion-fila>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}.mencion-fila b{font-size:13px}.mencion-fila small{font-size:12px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mencion-fila time{font-size:10px;color:var(--tinta-3)}
@media(max-width:850px){.actividad-cols{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.actividad-resumen{grid-template-columns:minmax(0,1fr)}.actividad-resumen>div{border-right:0;border-bottom:1px solid var(--linea)}.actividad-resumen>div:last-child{border-bottom:0}}
.persona-fila b{font-size:14px}.persona-fila small{font-size:12px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis}
.acceso-ficha{border:1px solid var(--linea-2);border-radius:12px;padding:20px;background:var(--panel)}
.acceso-persona{display:flex;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.acceso-persona h2{margin:0;font-size:22px}.acceso-persona p{margin:2px 0 0;color:var(--tinta-3);font-size:13px}
.acceso-persona>div{min-width:0;flex:1}.rol-control{display:flex;flex-direction:column;gap:3px;margin-left:auto}.rol-control span{font-size:11px;color:var(--tinta-3)}
.rol-control select[disabled]{opacity:.6}
.rol-nota{font-size:10px;color:var(--tinta-3)}
.rol-control select,.membresia-fila select,.perm-nuevo select{border:1px solid var(--linea-2);background:var(--panel);border-radius:8px;padding:6px 8px;font-size:12px}
.acceso-ficha>h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3);margin:20px 0 9px}
.acceso-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.acceso-grid>div{background:var(--panel-2);border-radius:8px;padding:10px 11px;display:flex;flex-direction:column}
.acceso-grid span{font-size:11px;color:var(--tinta-3)}.acceso-grid b{font-size:13px;margin-top:2px}
.perm-lista{border:1px solid var(--linea);border-radius:8px;overflow:hidden}.perm-lista>div{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--linea);font-size:13px}
.perm-lista>div:last-child{border-bottom:0}.perm-lista>div>span:first-child{flex:1}
.membresias-editor{border:1px solid var(--linea);border-radius:8px;overflow:hidden;margin-bottom:12px}
.membresia-fila{display:flex;align-items:center;gap:9px;padding:10px 11px;border-bottom:1px solid var(--linea);font-size:13px}.membresia-fila:last-child{border-bottom:0}
.membresia-fila input{accent-color:var(--primario)}.membresia-fila b{min-width:80px}.membresia-fila>span:not(.punto){flex:1;color:var(--tinta-3);font-size:12px}
.membresia-fila .punto{width:8px;height:8px;border-radius:4px;background:var(--acento)}.membresia-fila select:disabled{opacity:.45}
.perm-nuevo{display:grid;grid-template-columns:minmax(180px,1fr) 120px auto;gap:7px;margin-top:9px}
@media(max-width:700px){.acceso-persona{flex-wrap:wrap}.rol-control{width:100%;margin:8px 0 0}.rol-control select{width:100%}.perm-nuevo{grid-template-columns:minmax(0,1fr)}.membresia-fila{flex-wrap:wrap}.membresia-fila>span:not(.punto){min-width:90px}.membresia-fila select{flex:1 0 100%;width:100%}.aviso{overflow-wrap:anywhere}}
/* POR QUÉ TODAS LAS REJILLAS DE UNA COLUMNA LLEVAN `minmax(0,1fr)` Y NO `1fr`.
   `1fr` es la abreviatura de `minmax(auto,1fr)`, y ese `auto` es el ANCHO
   MÍNIMO DEL CONTENIDO: la columna nunca baja de lo que mide su hijo más ancho
   sin partir. Basta un título de conversación largo, un correo o el nombre de
   un cliente para que una columna «de una sola columna» se plante en 617 px
   dentro de un móvil de 351 y empuje la pantalla entera de lado —el título,
   las migas y todo—. Pasaba en Mensajes, y la misma cuenta estaba repetida en
   todas las pantallas que colapsan a una columna en el móvil. Con `minmax(0,…)`
   la columna puede encogerse y el texto recorta como estaba previsto. */
@media(max-width:900px){.mensajes-inicio,.equipo-layout{grid-template-columns:minmax(0,1fr)}.nota-producto{align-items:flex-start;flex-direction:column}.autom-resumen{grid-template-columns:1fr 1fr}}

/* ── Listas ───────────────────────────────────────────────────────────── */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;padding:9px 12px;font-size:11px;font-weight:680;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);border-bottom:1px solid var(--linea-2)}
.tabla td{padding:11px 12px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:hover td{background:var(--hover)}

/* ── Documentación ────────────────────────────────────────────────────── */
/* El árbol vive en el lateral: aquí solo queda el documento, a todo el ancho. */
.docs{height:100%;min-height:0;margin:-16px -40px -30px;display:flex;flex-direction:column}
@media(max-width:700px){.docs{margin:-16px -18px -30px}}
.arbol-col{border-right:1px solid var(--linea);display:flex;flex-direction:column;min-height:0;background:var(--panel-2)}
.arbol-cab{display:flex;align-items:center;gap:6px;padding:9px 8px 7px 14px;font-size:12px;
  font-weight:680;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.arbol-cab span{flex:1}
.lat-icono.sm{width:24px;height:24px}
.lat-icono.sm svg{width:14px;height:14px}
.arbol{overflow-y:auto;flex:1;min-height:0;padding:0 6px 12px}
.arbol-grupo{padding:14px 10px 4px;font-size:11px;font-weight:680;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3)}
.arbol-item{display:flex;align-items:center;gap:6px;width:100%;padding:4px 8px;border-radius:8px;
  font-size:14px;color:var(--tinta-2);text-align:left;min-height:27px}
.arbol-item:hover{background:var(--hover);color:var(--tinta)}
.arbol-item.activo{background:var(--activo);color:var(--tinta);font-weight:550}
.arbol-item svg{width:14px;height:14px;flex:none;color:var(--tinta-3)}
.arbol-item .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arbol-item .fl{width:12px;flex:none;font-size:10px;color:var(--tinta-3);transition:transform .12s}
.arbol-item .fl.abierta{transform:rotate(90deg)}
.arbol-item .emo{font-size:14px;flex:none;line-height:1}
.cliente-nav-agrupada>.nav-grupo{margin-top:12px}.cliente-nav-agrupada>.nav-grupo:first-child{margin-top:5px}.cliente-nav-agrupada>.nav-item svg{width:15px;height:15px;color:var(--tinta-3);flex:none}.cliente-nav-agrupada>.nav-item.activo svg{color:var(--tinta)}
.docs-inicio{max-width:1040px;margin:0 auto;padding:30px 42px 70px}.docs-inicio>header{display:flex;align-items:center;margin-bottom:32px}.docs-inicio>header>div{flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.docs-inicio>header h1{font-size:28px;margin:0}.docs-inicio>header p{grid-column:2;margin:3px 0 0;color:var(--tinta-3);font-size:13px}.docs-inicio-icon{grid-row:1/3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--activo)}.docs-inicio-icon svg{width:20px;height:20px}.docs-inicio section{margin-top:28px}.docs-inicio section h2{font-size:13px}.docs-claves{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.docs-claves>button{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);text-align:left}.docs-claves>button:hover,.docs-colecciones>button:hover{box-shadow:var(--sombra);transform:translateY(-1px)}.docs-claves>button>span{font-size:22px}.docs-claves>button>div{flex:1;min-width:0}.docs-claves b{font-size:13px}.docs-claves p{font-size:11px;color:var(--tinta-3);margin:4px 0 0;line-height:1.4}.docs-claves i,.docs-colecciones i,.docs-lista-inicio i{font-style:normal;color:var(--tinta-3)}.docs-lista-inicio{border:1px solid var(--linea);border-radius:8px;overflow:hidden}.docs-lista-inicio>button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-bottom:1px solid var(--linea);text-align:left}.docs-lista-inicio>button:last-child{border-bottom:0}.docs-lista-inicio>button:hover{background:var(--hover)}.docs-lista-inicio svg{width:15px;height:15px;color:var(--tinta-3)}.docs-lista-inicio>button>span{flex:1;min-width:0}.docs-lista-inicio b,.docs-lista-inicio small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.docs-lista-inicio b{font-size:13px}.docs-lista-inicio small{font-size:10px;color:var(--tinta-3);margin-top:2px}.docs-colecciones{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.docs-colecciones>button{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);text-align:left}.docs-colecciones>button>span svg{width:18px;height:18px}.docs-colecciones>button>div{flex:1}.docs-colecciones b,.docs-colecciones small{display:block}.docs-colecciones b{font-size:13px}.docs-colecciones small{font-size:11px;color:var(--tinta-3);margin-top:3px}.docs-todos p{font-size:12px;color:var(--tinta-3)}
.comentarios-doc{width:min(480px,92vw)}.comentarios-doc-lista{flex:1;overflow-y:auto;padding:12px 18px}.comentarios-doc-lista article{display:flex;align-items:flex-start;gap:9px;padding:12px 0;border-bottom:1px solid var(--linea)}.comentarios-doc-lista article>div{flex:1;min-width:0}.comentarios-doc-lista article header{display:flex;align-items:center;gap:8px}.comentarios-doc-lista article b{font-size:12px}.comentarios-doc-lista article time{font-size:10px;color:var(--tinta-3)}.comentarios-doc-lista article p{font-size:13px;line-height:1.55;margin:5px 0 0;color:var(--tinta-2);white-space:pre-wrap}.comentarios-doc-form{padding:13px 16px;border-top:1px solid var(--linea);background:var(--panel);display:flex;flex-direction:column;gap:8px}.comentarios-doc-form textarea{width:100%;resize:none;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel-2);padding:9px 10px;font-size:13px}.comentarios-doc-form .btn{align-self:flex-end}
/* La cabecera de Documentos es icono + «Documentos» + papelera + «+», todo en
   una fila que no se partía. «Documentos» a 28 px no se puede cortar por la
   mitad, así que el mínimo de la fila eran 381 px: en un teléfono de 360 el
   bloque no cabía, y como el visor recorta lo que sobra, el botón «+» se
   quedaba 21 px fuera de la pantalla y no se podía pulsar. Encima el subtítulo
   se quedaba en una columna de 159 px y bajaba a tres líneas teniendo el ancho
   libre al lado. Dejando que la fila se parta, los botones caen a su propia
   línea —y a la derecha— y el subtítulo recupera el ancho entero. */
@media(max-width:760px){.docs-inicio{padding:22px 18px 60px}.docs-inicio>header{align-items:flex-start;gap:12px;flex-wrap:wrap}.docs-inicio>header>div{flex:1 1 100%}.docs-inicio>header .acciones{display:flex;justify-content:flex-end}.docs-claves,.docs-colecciones{grid-template-columns:minmax(0,1fr)}.docs-inicio>header .btn{font-size:0}.docs-inicio>header .btn svg{margin:0;font-size:initial}}
/* El visor reparte su altura y deja que la página gestione su propio scroll.
   Sin `flex:1;min-height:0` en el hueco intermedio, `.pag` crecía hasta la
   altura del contenido (se midieron 60.922 px) y `.pag-scroll` no llegaba a ser
   nunca un contenedor con scroll: el documento salía recortado y sin barra. */
/* Un documento se escribe sobre papel. Con el lienzo en gris, el editor se
   quedaba sobre el fondo de la aplicacion y parecia una pantalla sin terminar:
   es el unico sitio donde el contenido ES la superficie. */
.visor{flex:1;overflow:hidden;min-height:0;display:flex;flex-direction:column;
  background:var(--panel)}
.visor>#pg-host,.visor>.pag{flex:1;min-height:0;display:flex;flex-direction:column}
/* Un documento y una página gestionan su propio scroll dentro (`.pag-scroll`),
   pero la portada de Documentos y los estados vacíos no tienen ninguno: con el
   visor en `overflow:hidden` se quedaban cortados sin barra —2.039 px de
   contenido en un hueco de 807— y la pantalla parecía trabada. Aquí el scroll lo
   pone el visor, y el hijo conserva su altura en vez de encogerse como caja flex. */
.visor:has(>.docs-inicio),.visor:has(>.vacio){overflow-y:auto}
.visor>.docs-inicio,.visor>.vacio{flex:none}
.visor .pag{height:auto}
.visor-otros{padding-top:20px}
.visor-otros img{max-width:100%;border-radius:8px}
.visor-otros iframe{width:100%;height:72vh;border:1px solid var(--linea);border-radius:8px;background:#fff}
.visor .incrustado{width:100%;height:100%;border:0;background:#fff;display:block}
.cod{background:#16181c;color:#e6e8ec;border-radius:8px;padding:16px;overflow-x:auto;font:12px/1.6 var(--mono)}

/* ── Ficha de cliente ─────────────────────────────────────────────────── */
.ficha-cab{padding:18px 0 4px}
.ficha-av{border:0;padding:0;background:none;cursor:pointer;display:block;margin-bottom:12px}
.ficha-cab h1{margin:0;font-size:28px;font-weight:680;letter-spacing:-.028em;line-height:1.15}
.ficha-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;
  font-size:13px;color:var(--tinta-3)}
.ficha-sub .punto{width:8px;height:8px;border-radius:4px;display:inline-block;background:var(--acento)}
.ficha-sub .sep{color:var(--linea-2)}
.ficha-sub code{font-size:12px}
.ficha-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}

.md{font-size:14px;line-height:1.68;color:var(--tinta)}
.md h1{font-size:22px;font-weight:680;letter-spacing:-.02em;margin:0 0 14px}
.md h2{font-size:18px;font-weight:680;margin:30px 0 10px;padding-top:12px;border-top:1px solid var(--linea)}
.md h3{font-size:16px;font-weight:680;margin:22px 0 8px}
.md h4{font-size:14px;font-weight:680;margin:18px 0 6px;color:var(--tinta-2)}
.md p{margin:0 0 12px}
.md ul,.md ol{margin:0 0 13px;padding-left:22px}
.md li{margin:0 0 5px}
.md code{font:500 .87em var(--mono);background:var(--gris-b);border:1px solid var(--linea);
  border-radius:4px;padding:1px 5px}
.md pre{background:#16181c;color:#e6e8ec;border-radius:8px;padding:15px 17px;overflow-x:auto;margin:0 0 15px}
.md pre code{background:none;border:0;padding:0;color:inherit;font-size:13px}
.md table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13px;display:block;overflow-x:auto}
.md th,.md td{padding:8px 11px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.md th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-3);font-weight:680}
.md blockquote{margin:0 0 14px;padding:10px 16px;border:1px solid var(--linea-2);border-radius:8px;
  background:var(--panel-2);color:var(--tinta-2)}
.md hr{border:0;border-top:1px solid var(--linea);margin:24px 0}
.md a{border-bottom:1px solid rgba(31,79,216,.25)}
/* Un enlace a otra pantalla de la plataforma (#/…) sale como botón: es «llévame ahí». */
.md a.btn-chat{border-bottom:0;text-decoration:none;margin-top:4px}
.md img{max-width:100%;border-radius:8px}

/* ── Chat ─────────────────────────────────────────────────────────────── */
.chat{display:flex;flex-direction:column;height:calc(100vh - 260px);min-height:340px}
.chat-hilo{flex:1;overflow-y:auto;padding:4px 2px 20px;display:flex;flex-direction:column;gap:18px}
.msg{display:flex;gap:12px;max-width:860px}
.msg .av{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:680}
.msg.usuario .av{background:var(--primario);color:var(--primario-txt)}
.msg.asistente .av{background:var(--ambar-b);color:var(--ambar)}
.msg .cuerpo{min-width:0;flex:1}
.msg .quien{font-size:13px;font-weight:680;margin-bottom:3px}
.msg .quien span{font-weight:400;color:var(--tinta-3);margin-left:7px;font-size:12px}
.herr{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tinta-3);
  padding:5px 10px;background:var(--panel-2);border:1px solid var(--linea);border-radius:8px;margin:6px 0}
.herr code{font:500 11.5px var(--mono);color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-caja{flex:none;border:1px solid var(--linea-2);border-radius:12px;padding:11px 13px;background:var(--panel-2)}
.chat-caja textarea{width:100%;border:0;background:none;outline:none;resize:none;font-size:14px;
  line-height:1.55;max-height:180px}
.chat-caja .pie{display:flex;align-items:center;gap:10px;margin-top:8px}
.chat-caja .pie .ctx{font-size:12px;color:var(--tinta-3);flex:1}
.escribiendo{display:inline-flex;gap:3px;align-items:center}
.escribiendo i{width:5px;height:5px;border-radius:50%;background:var(--tinta-3);animation:pulso 1.3s infinite}
.escribiendo i:nth-child(2){animation-delay:.18s}.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes pulso{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ── Kanban ───────────────────────────────────────────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:13px;align-items:start;overflow-x:auto}
.col{background:var(--panel-2);border:1px solid var(--linea);border-radius:var(--r-card);padding:11px}
.col h4{margin:0 0 10px;font-size:12px;font-weight:680;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tinta-3);display:flex;align-items:center;gap:7px}
.col h4 .n{font-variant-numeric:tabular-nums}
/* Crear en una etapa concreta obligaba a bajar hasta el final de la columna;
   con listas largas, a hacer scroll para volver. El «+» de la cabecera hace lo
   mismo desde arriba. Ocupa sitio siempre (`visibility`, no `display`) para que
   el número no baile al pasar el ratón. */
.col h4 .col-mas{margin-left:auto;visibility:hidden;color:var(--tinta-3);
  width:18px;height:18px;border-radius:4px;display:grid;place-items:center}
.col h4 .col-mas svg{width:13px;height:13px}
.col:hover h4 .col-mas{visibility:visible}
.col h4 .col-mas:hover{background:var(--hover);color:var(--tinta)}
.col h4 .col-mas:focus-visible{visibility:visible}
.tk{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:11px 12px;margin-bottom:8px;
  cursor:pointer;transition:box-shadow .12s,transform .12s}
.tk:hover{box-shadow:var(--sombra);transform:translateY(-1px)}
.tk .t{font-size:13px;line-height:1.45;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:7px}
/* El logo se alinea con la PRIMERA línea del título, no con el borde de la
   caja: si no, en un título de tres líneas queda flotando arriba del todo. */
.tk .t>.avc,.tk .t>.ico-t{margin-top:2px}
.tk .t>.ico-t{margin-right:0}
.tk-tit{min-width:0}
.tk .m{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* La fecha de vencimiento, discreta: más pequeña y en gris, que no compita con
   la prioridad ni con la cara del responsable. Formato dd/mm/aa. */
.tk-fecha{font-size:11px;padding:1px 6px;color:var(--tinta-3);background:var(--fondo);
  border:1px solid var(--linea);font-variant-numeric:tabular-nums}

/* ── Modal / paleta ───────────────────────────────────────────────────── */
.velo{position:fixed;inset:0;background:rgba(16,18,22,.28);backdrop-filter:blur(3px);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding-top:11vh}
.paleta{width:min(680px,92vw);background:var(--panel);border:1px solid var(--linea-2);border-radius:16px;
  box-shadow:var(--sombra-alta);overflow:hidden;display:flex;flex-direction:column;max-height:74vh}
.paleta input{width:100%;padding:17px 20px;border:0;border-bottom:1px solid var(--linea);
  background:none;outline:none;font-size:16px}
.paleta .res{overflow-y:auto;padding:7px}
.paleta .r{display:block;width:100%;text-align:left;padding:10px 13px;border-radius:8px;transition:background .1s}
.paleta .r:hover,.paleta .r.sel{background:var(--activo)}
.paleta .r .t{font-size:14px;font-weight:550;display:flex;align-items:center;gap:8px}
.paleta .r .t .ruta{font:400 11.5px var(--mono);color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paleta .r .e{font-size:12px;color:var(--tinta-3);margin-top:3px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.paleta .pie{padding:9px 16px;border-top:1px solid var(--linea);font-size:12px;color:var(--tinta-3);
  display:flex;gap:16px}

.modal{width:min(520px,92vw);background:var(--panel);border:1px solid var(--linea-2);border-radius:16px;
  box-shadow:var(--sombra-alta);padding:24px}
/* Un formulario largo no puede salirse de la pantalla: el título quedaba cortado
   arriba y los botones fuera por abajo, sin forma de llegar a ellos. */
.velo>.modal{max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain}
.modal h3{margin:0 0 16px;font-size:16px;font-weight:680}
.campo{margin-bottom:13px}
.campo label{display:block;font-size:12px;font-weight:680;color:var(--tinta-2);margin-bottom:5px}
.campo input,.campo textarea,.campo select{width:100%;padding:9px 12px;border:1px solid var(--linea-2);
  border-radius:8px;background:var(--panel-2);outline:none;font-size:14px}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:#c8cad0}
.fila{display:flex;gap:10px}.fila>*{flex:1}
/* UN DESPLEGABLE CON NUESTRA ROPA.
   Los <select> llegaban de fábrica: su flecha doble, su tipografía y su altura,
   en formularios donde todo lo demás está hecho a mano. El menú que abren sigue
   siendo el del sistema —funciona, es accesible y con veinte opciones es mejor
   que cualquier lista nuestra—, pero el control cerrado, que es lo que se ve el
   99 % del tiempo, ya es de la casa. */
select{appearance:none;-webkit-appearance:none;background-image:
  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6f76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;padding-right:30px}
.campo .campo-ayuda{font-size:11px;color:var(--tinta-3);margin:6px 0 0;line-height:1.5}
.dlg-ayuda{margin:0 0 16px;font-size:13px;color:var(--tinta-2);line-height:1.6}
/* Un campo obligatorio que se ha dejado vacío, dicho donde está el campo. */
.campo.falta input,.campo.falta textarea,.campo.falta select{border-color:var(--rojo)}
/* Elegir entre pocas opciones: se ven todas sin abrir nada. */
.campo .segmentado.dlg-seg{display:flex;width:100%}
.campo .segmentado.dlg-seg button{flex:1;text-align:center}

/* ── Varios ───────────────────────────────────────────────────────────── */
.vacio{text-align:center;padding:60px 20px;color:var(--tinta-3)}
.vacio svg{width:34px;height:34px;margin-bottom:12px;opacity:.4;stroke-width:1.3}
.vacio p{margin:0 0 6px;font-size:14px}
.vacio .s{font-size:13px}
.aviso{display:flex;gap:10px;padding:12px 15px;border-radius:12px;background:var(--ambar-b);
  color:var(--ambar);font-size:13px;margin-bottom:16px;border:1px solid rgba(138,90,0,.14)}
.cargando{display:flex;align-items:center;justify-content:center;padding:50px;color:var(--tinta-3);font-size:14px}
.spin{width:15px;height:15px;border:2px solid var(--linea-2);border-top-color:var(--tinta-3);
  border-radius:50%;animation:g .7s linear infinite;margin-right:9px}
@keyframes g{to{transform:rotate(360deg)}}

/* ── Avatares de cliente ──────────────────────────────────────────────── */
.avc{width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:680;color:#fff;letter-spacing:-.02em;overflow:hidden;position:relative}
.avc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El logo se pintaba dentro de un cuadro blanco con filete: los favicones son
   PNG transparentes y aquello les ponía un recuadro que no es de la marca. Con
   logo propio, el avatar es el logo y nada más —ni fondo, ni borde, ni el color
   del monograma, que se vería asomando por las esquinas transparentes—. */
.avc:has(img){background:none !important;box-shadow:none}
/* Con logo puesto, la inicial de debajo estorba: se veía a través de la parte
   transparente del PNG. Si el logo no carga, `onerror` retira la imagen y esta
   regla deja de aplicar, así que la inicial y el color vuelven solos. */
.avc:has(img) .avc-mono{display:none}
.avc.sm{width:24px;height:24px;border-radius:8px;font-size:10px}
.avc.ico{width:18px;height:18px;border-radius:4px;font-size:10px;
  display:inline-grid;vertical-align:-4px}
.avc.lg{width:52px;height:52px;border-radius:12px;font-size:18px}

/* ── Base de datos estilo Notion ──────────────────────────────────────── */
.bd-barra{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bd-vistas{display:flex;gap:2px}
.bd-vistas button{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;
  font-size:13px;color:var(--tinta-3);font-weight:550}
.bd-vistas button:hover{background:var(--hover);color:var(--tinta-2)}
.bd-vistas button.activo{background:var(--activo);color:var(--tinta);font-weight:550}
.bd-vistas svg{width:14px;height:14px;stroke-width:1.7}
.bd-ctrl{margin-left:auto;display:flex;gap:7px;align-items:center}
.bd-ctrl select,.bd-ctrl input{padding:5.5px 10px;border:1px solid var(--linea-2);border-radius:8px;
  background:var(--panel);font-size:13px;outline:none}
/* El buscador de tareas, la misma caja con lupa que el de Clientes: era el
   único <input> pelado de la casa, y ponía «Filtrar…» sin decir de qué. */
.bd-ctrl .campo-busca{min-width:0;width:200px;padding:0 9px}
.bd-ctrl .campo-busca input{width:100%;padding:5px 0;border:0}
/* Y los botones de la barra, todos a la misma altura. */
.bd-ctrl .filtro-sel{height:30px;border-radius:8px}

/* Tabla editable */
/* Sin líneas verticales entre celdas: con las columnas ya alineadas, la rejilla
   se lee sola y la cuadrícula solo añadía ruido. */
.bd{border:1px solid var(--linea);border-radius:var(--r-card);overflow:hidden;background:var(--panel)}
.bd-fila{display:grid;grid-template-columns:1fr 118px 96px 130px 104px;align-items:stretch;
  border-bottom:1px solid var(--linea);min-height:44px}
.bd-fila:last-child{border-bottom:0}
.bd-cab{background:var(--panel);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--linea-2)}
.bd-cab .cel{font-size:12px;font-weight:550;letter-spacing:0;text-transform:none;
  color:var(--tinta-3);display:flex;align-items:center;gap:6px;cursor:default}
.bd-cab .cel:hover{color:var(--tinta-2)}
.bd-cab .cel svg{width:13px;height:13px;opacity:.55}
.bd-fila:not(.bd-cab):hover{background:var(--hover)}
.cel{padding:9px 14px;display:flex;align-items:center;gap:7px;min-width:0;font-size:14px}
.bd-fila:hover .cel:first-child .titulo-tarea{padding-right:52px}

.cel .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cel[contenteditable]{outline:none;cursor:text;white-space:normal}
/* La columna de Responsable: la misma cara que en la ficha y en el calendario.
   Era un <select> del sistema por fila —menú gris de macOS, flechitas y el
   nombre cortado— en una columna donde todo lo demás son avatares. */
.cel-resp{display:inline-flex;align-items:center;gap:7px;min-width:0;cursor:pointer;
  border-radius:8px;padding:2px 6px;margin:-2px -6px;max-width:100%}
.cel-resp:hover{background:var(--activo)}
.cel-resp .persona{min-width:0}
.cel-resp .persona,.cel-resp .vacia{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cel[contenteditable]:focus{background:var(--panel);box-shadow:inset 0 0 0 2px rgba(31,79,216,.3);border-radius:4px}
.cel.editable{cursor:pointer}
.cel.editable:hover .vacia{opacity:1}
/* Un "Vacío" por celda repetido en cinco columnas es ruido: se ve solo al pasar
   por encima de la fila, que es cuando puedes rellenarlo. */
.vacia{color:var(--tinta-3);opacity:0;font-size:13px;transition:opacity .1s}
.bd-fila:hover .vacia{opacity:.5}
.props-linea .vacia,.peek .vacia,.secc .vacia{opacity:.65}
.bd-grupo{display:flex;align-items:center;gap:9px;padding:14px 14px 9px;font-size:13px;font-weight:680;
  color:var(--tinta-2);background:var(--panel-2);border-bottom:1px solid var(--linea);
  border-top:1px solid var(--linea);position:sticky;left:0}
.bd-grupo .n{color:var(--tinta-3);font-weight:400;font-variant-numeric:tabular-nums}
.bd-nueva{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;color:var(--tinta-3);
  width:100%;text-align:left;border-top:1px solid var(--linea)}
.bd-nueva:hover{background:var(--hover);color:var(--tinta-2)}
.bd-nueva svg{width:14px;height:14px}

/* Selector de propiedad (estado, prioridad) */
.sel-prop{position:relative}
.sel-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:30;min-width:158px;background:var(--panel);
  border:1px solid var(--linea-2);border-radius:12px;box-shadow:var(--sombra-alta);padding:5px}
.sel-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border-radius:8px;
  font-size:13px;text-align:left}
.sel-menu button:hover{background:var(--hover)}

/* Tablero */
.bd-tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:start}

/* Calendario */
/* Cada semana son DOS capas con las mismas siete columnas: el fondo (casillas,
   día de hoy, zona donde se suelta) y encima la rejilla con los números y las
   franjas. Así una tarea de varios días es una sola barra que ocupa
   `grid-column: día / span días` y cruza las separaciones; repetida en cada
   casilla parecía cinco tareas distintas. La capa de arriba no recibe el ratón
   salvo en las franjas, para que el doble clic y el soltar lleguen al día.
   minmax(0,1fr), no 1fr a secas: con «1fr» el mínimo de cada columna es su
   contenido, así que un título largo ensanchaba su columna y empujaba fuera del
   ancho a viernes/sábado/domingo. El recorte del texto lo hace cada `.ev`. */
.cal{display:flex;flex-direction:column;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-card);overflow:hidden}
.cal-cab,.cal-fondo,.cal-capa{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}
.cal-cab{background:var(--linea)}
.cal-cab .dow{background:var(--panel-2);padding:9px;font-size:11px;font-weight:680;text-transform:uppercase;
  letter-spacing:.05em;color:var(--tinta-3);text-align:center;min-width:0}
.cal-sem{position:relative;min-height:132px}
.cal-fondo{position:absolute;inset:0;background:var(--linea)}
.cal-fondo .dia{background:var(--panel);min-width:0}
.cal-fondo .dia.fuera{background:var(--panel-2);opacity:.5}
.cal-fondo .dia{cursor:pointer}
/* Pulsar un día crea una tarea en él: al pasar el ratón la casilla lo dice.
   Solo con ratón, que en el móvil el «hover» se queda pegado tras el toque. */
@media(hover:hover){.cal-fondo .dia:hover{background:var(--hover)}}
.cal-fondo .dia.sobre{background:var(--azul-b)}
.cal-capa{position:relative;align-content:start;grid-auto-rows:min-content;row-gap:3px;
  padding-bottom:8px;pointer-events:none}
.cal-capa .num{grid-row:1;justify-self:start;font-size:12px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;padding:8px 9px 5px}
.cal-capa .num.hoy{background:var(--primario);color:var(--primario-txt);border-radius:4px;
  font-weight:680;padding:2px 7px;margin:7px 0 1px 8px}
.cal .ev{pointer-events:auto;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;
  font-size:12px;line-height:1.4;padding:3.5px 8px;margin:0 5px;border-radius:4px;text-align:left;
  background:var(--gris-b);color:var(--tinta-2);cursor:pointer}
.cal .ev.azul{background:var(--azul-b);color:var(--azul)}
.cal .ev.rojo{background:var(--rojo-b);color:var(--rojo)}
.cal .ev.ambar{background:var(--ambar-b);color:var(--ambar)}
.cal .ev.verde{background:var(--verde-b);color:var(--verde)}
.cal .ev.morado{background:var(--morado-b);color:var(--morado)}
.cal .ev.hecho{opacity:.72}
.cal .ev.hecho .ev-t{text-decoration:line-through}
/* Una franja que viene de la semana anterior o que sigue en la siguiente se
   corta a escuadra y pega al borde: así se ve que continúa. */
.cal .ev.viene{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.cal .ev.sigue{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.cal .ev-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev-urg{flex:none;width:6px;height:6px;border-radius:999px;background:var(--rojo)}
.cal .ev .ico-t{margin-right:0;font-size:12px}
.cal .ev .avc,.cal .ev .av-p{width:16px;height:16px;font-size:10px}
.cal .ev .caras .av-p{margin-right:-5px}
.cal-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 10px;font-size:11px;color:var(--tinta-3)}
.cal-ley{display:inline-flex;align-items:center;gap:6px}
.cal-ley i{width:10px;height:10px;border-radius:4px;display:inline-block;background:var(--gris-b)}
.cal-ley i.azul{background:var(--azul-b);box-shadow:inset 0 0 0 1.5px var(--azul)}
.cal-ley i.rojo{background:var(--rojo-b);box-shadow:inset 0 0 0 1.5px var(--rojo)}
.cal-ley i.ambar{background:var(--ambar-b);box-shadow:inset 0 0 0 1.5px var(--ambar)}
.cal-ley i.verde{background:var(--verde-b);box-shadow:inset 0 0 0 1.5px var(--verde)}
.cal-ley i.gris{box-shadow:inset 0 0 0 1.5px var(--linea-2)}
.cal-ley i.urg{width:8px;height:8px;border-radius:999px;background:var(--rojo)}
@media(max-width:760px){
  .cal-sem{min-height:96px}
  .cal-capa{row-gap:2px;padding-bottom:5px}
  .cal-capa .num{font-size:11px;padding:5px 6px 3px}
  .cal .ev{font-size:10px;gap:4px;padding:2px 5px;margin:0 3px}
  .cal .ev .avc,.cal .ev .av-p,.cal .ev .pill,.cal .ev .ico-t{display:none}
}

/* ── Timeline de historial ────────────────────────────────────────────── */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--linea-2)}
.tl-item{position:relative;padding:0 0 20px}
.tl-item::before{content:"";position:absolute;left:-21px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--panel);border:2px solid var(--tinta-3)}
/* El punto lleno es «esto es de este mes». Antes se rellenaban los TRES
   primeros, contando por posición: la regla no la adivinaba nadie porque no
   quería decir nada —tres entradas de hace medio año salían igual de vivas que
   la de ayer—. */
.tl-item.reciente::before{background:var(--acento);border-color:var(--acento)}
.tl-fecha{font-size:12px;font-weight:680;color:var(--tinta-3);font-variant-numeric:tabular-nums;
  letter-spacing:.03em;text-transform:uppercase}
.tl-tit{font-size:14px;font-weight:550;margin:3px 0 4px;line-height:1.45}
.tl-cuerpo{font-size:13px;color:var(--tinta-3);line-height:1.55}
.tl-autor{font-size:11px;color:var(--tinta-3);margin-top:5px;text-transform:uppercase;letter-spacing:.04em}

/* ── Fichas de integración / automatización ───────────────────────────── */
.ficha{border:1px solid var(--linea);border-radius:var(--r-card);background:var(--panel);
  padding:14px 16px;margin-bottom:10px}
.ficha .fh{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ficha .fh h4{margin:0;font-size:14px;font-weight:680;flex:1}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px}
.ficha dt{color:var(--tinta-3);white-space:nowrap}
.ficha dd{margin:0;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis}
.ficha dd code{font:500 11.8px var(--mono)}
.secreto{font-family:var(--mono);letter-spacing:1px;color:var(--tinta-3)}

/* ── Arrastrar y soltar ───────────────────────────────────────────────── */
.tk{cursor:grab}
.tk:active{cursor:grabbing}
.tk.arrastrando{opacity:.4;transform:rotate(1.5deg)}
.inicio-kanban-tarea.arrastrando{opacity:.4;transform:rotate(1.5deg)}
.inicio-kanban-col.sobre{background:var(--azul-b);outline:2px dashed rgba(31,79,216,.35);outline-offset:-3px}
[data-tema="oscuro"] .inicio-kanban-col.sobre{background:rgba(31,79,216,.12)}
.col.sobre{background:var(--azul-b);outline:2px dashed rgba(31,79,216,.35);outline-offset:-3px}
[data-tema="oscuro"] .col.sobre{background:rgba(31,79,216,.12)}
.bd-fila.arrastrando{opacity:.4}
.bd-grupo.sobre{background:var(--azul-b);box-shadow:inset 0 2px 0 var(--azul)}
.asa{width:14px;flex:none;color:var(--tinta-3);opacity:0;cursor:grab;font-size:13px;line-height:1;
  letter-spacing:-1px;user-select:none}
.bd-fila:hover .asa{opacity:.55}
.asa:hover{opacity:1 !important}

/* Casilla de completar, como en Notion */
.chk{width:15px;height:15px;border:1.5px solid var(--linea-2);border-radius:4px;flex:none;
  display:grid;place-items:center;cursor:pointer;transition:background .12s,border-color .12s}
.chk:hover{border-color:var(--tinta-3)}
.chk.on{background:var(--verde);border-color:var(--verde)}
/* DOS CASILLAS IGUALES NO SE DISTINGUEN.
   La fila lleva dos: seleccionar para acciones en lote y marcar como hecha. Se
   pintaban idénticas y pegadas, así que no había forma de saber cuál era cuál
   sin probar. La de lote —que se usa de vez en cuando— se esconde y sale al
   pasar por la fila o cuando ya hay algo seleccionado; la de hecha, que es la
   de todos los días, se queda sola y visible. Es redonda además, para que ni
   asomando se confundan. */
.chk.sel-fila{opacity:0;border-radius:999px;transition:opacity .12s,background .12s,border-color .12s}
tr:hover .chk.sel-fila,.fila:hover .chk.sel-fila,.chk.sel-fila.on,
.hay-seleccion .chk.sel-fila{opacity:1}
.chk.sel-fila.on{background:var(--azul,var(--marca));border-color:var(--azul,var(--marca))}
/* La fila que acabas de marcar se queda a la vista aunque el filtro la esconda,
   con un fondo tenue que dice «esta ya no cumple el filtro, sigue aquí por si
   te has equivocado». Al refrescar se va. */
.bd-fila.recien-hecha{background:var(--activo)}
.bd-fila.recien-hecha .txt{opacity:.7}
/* En el móvil la casilla mide 15 px y hay dos por fila —seleccionar en lote y
   marcar hecha— con los centros a 22 px: agrandarlas al mínimo táctil de 44 las
   solaparía. La de lote se va: seleccionar muchas para una acción en bloque es
   trabajo de escritorio, y la de marcar hecha, que es la que se usa a diario,
   se queda con sitio de sobra para el dedo. */
@media (max-width:700px){
  .chk.sel-fila{display:none}
  .chk{width:20px;height:20px;position:relative}
  .chk::after{content:'';position:absolute;inset:-12px}
}
.chk svg{width:10px;height:10px;stroke:#fff;stroke-width:3;opacity:0}
.chk.on svg{opacity:1}
.tit-hecho{text-decoration:line-through;color:var(--tinta-3)}

/* Acción "abrir" al pasar por encima */
.abrir-fila{opacity:0;font-size:12px;color:var(--tinta-3);padding:2px 8px;border-radius:8px;
  border:1px solid var(--linea-2);background:var(--panel);white-space:nowrap;
  position:absolute;right:8px;pointer-events:none}
.bd-fila:hover .abrir-fila{pointer-events:auto}
.bd-fila:not(.bd-cab) .cel:first-child{position:relative;padding-right:8px}
.bd-fila:hover .abrir-fila{opacity:1}
.abrir-fila:hover{background:var(--hover);color:var(--tinta)}

/* ── Panel lateral (peek) ─────────────────────────────────────────────── */
.peek-velo{position:fixed;inset:0;background:rgba(16,18,22,.28);backdrop-filter:blur(3px);
  z-index:90;animation:fundido .16s ease}
@keyframes fundido{from{opacity:0}to{opacity:1}}
/* La ficha era un cajón pegado al lado derecho: en 520px la rejilla de
   propiedades iba apretada, el tablero de detrás quedaba de adorno y la mirada
   tenía que cruzar la pantalla entera para leerla. Centrada y más ancha se lee
   como lo que es —la tarea entera—, y `inset:0` + `margin:auto` la centra en
   los dos ejes sin transformaciones que emborronen el texto. */
.peek{position:fixed;inset:0;margin:auto;width:min(720px,94vw);height:min(760px,88dvh);
  background:var(--panel);border:1px solid var(--linea-2);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 70px rgba(16,18,22,.22);z-index:91;
  display:flex;flex-direction:column;animation:entra .2s cubic-bezier(.22,1,.36,1)}
@keyframes entra{from{opacity:0}to{opacity:1}}
.peek-barra{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--linea);flex:none}
.peek-barra .btn{padding:5px 10px}
.peek-cuerpo{flex:1;overflow-y:auto;padding:22px 26px 40px}
.peek h2{margin:0 0 22px;font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1.3;outline:none;
  overflow-wrap:anywhere}

/* La fecha con la misma ropa que el resto: el control nativo llegaba con su
   propia tipografía, su propio foco y su icono de calendario del navegador. */
/* El nativo se queda debajo, invisible: sigue abriendo el selector del sistema
   y respondiendo al teclado. Lo que se lee es nuestro. */
.campo-fecha{position:relative;display:flex;align-items:center;min-height:26px;cursor:pointer}
.campo-fecha input[type=date]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;padding:0;border:0;background:none}
.fecha-et{font-size:13px;color:var(--tinta);pointer-events:none}
.fecha-et.vacia{color:var(--tinta-3)}
.campo-fecha:hover .fecha-et{color:var(--tinta)}
/* El título se edita en el sitio, sin caja ni halo. Con el fondo y el anillo de
   foco parecía un campo de formulario abierto, y lo que se busca es lo de
   Notion: pinchas y ya estás escribiendo. El cursor ya dice que estás dentro. */
.props{display:grid;grid-template-columns:118px 1fr;gap:3px 10px;align-items:center;margin-bottom:26px}
.props .k{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta-3);padding:6px 0}
.props .k svg{width:14px;height:14px;stroke-width:1.7}
.props .v{padding:5px 8px;border-radius:8px;cursor:pointer;font-size:13px;min-height:30px;
  display:flex;align-items:center;gap:6px;position:relative}
.props .v:hover{background:var(--hover)}
.props .v[contenteditable]{cursor:text}
.props .v[contenteditable]:focus{background:var(--panel-2);outline:none;box-shadow:0 0 0 2px rgba(31,79,216,.25)}
.props .v input{border:0;background:none;outline:none;width:100%;font-size:13px;padding:0}
.props .v select,#pk-props .v select{border:0;background:none;outline:none;width:100%;font-size:13px;padding:0;color:var(--tinta)}
.peek-desc{border-top:1px solid var(--linea);padding-top:18px}
.peek-desc label{font-size:12px;font-weight:680;color:var(--tinta-3);display:block;margin-bottom:8px}
.peek-desc textarea{width:100%;border:0;background:none;outline:none;resize:none;font-size:14px;
  line-height:1.65;min-height:120px;font-family:inherit}
.peek-meta{margin-top:26px;padding-top:16px;border-top:1px solid var(--linea);
  font-size:12px;color:var(--tinta-3);line-height:1.7}

/* ── Cabecera de tabla ordenable y redimensionable ────────────────────── */
.bd-cab .cel{cursor:pointer;user-select:none;position:relative}
.bd-cab .cel:hover{background:var(--activo)}
.bd-cab .cel .orden{margin-left:auto;font-size:10px;opacity:.85}
.bd-cab .cel .grip{position:absolute;right:-3px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:3}
.bd-cab .cel .grip:hover,.bd-cab .cel .grip.activo{background:var(--azul);opacity:.5}

/* Menú de columnas y de campos */
.menu-col{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:230px;max-height:340px;
  overflow-y:auto;background:var(--panel);border:0;border-radius:12px;
  box-shadow:var(--sombra-alta);padding:6px}
.menu-col .tit{font-size:11px;font-weight:680;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3);padding:7px 9px 5px}
.menu-col button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:8px;
  font-size:13px;text-align:left}
.menu-col button:hover{background:var(--hover)}
/* Los iconos de las columnas no tenían tamaño y el SVG se estiraba al ancho del
   menú: círculos de 100 px en «Filtrar por» (14-oct-2026). */
.menu-col button>svg{width:15px;height:15px;flex:none;color:var(--tinta-3)}
.menu-col button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-col .menu-volver{display:flex;align-items:center;gap:6px;color:var(--tinta-3);font-size:12px;padding:6px 9px}
.menu-col .menu-volver svg{width:13px;height:13px;transform:rotate(90deg)}
.menu-col .tit+.menu-volver,.menu-col .menu-volver+.tit{margin-top:0}
.menu-col .ojo{margin-left:auto;font-size:11px;color:var(--tinta-3)}
.menu-col hr{border:0;border-top:1px solid var(--linea);margin:5px 0}

/* Pestañas de vistas guardadas */
.vistas-guardadas{display:flex;align-items:center;gap:3px;border-bottom:1px solid var(--linea);
  margin-bottom:12px;overflow-x:auto;padding-bottom:0}
.vistas-guardadas button{display:flex;align-items:center;gap:6px;padding:8px 12px 9px;font-size:13px;
  color:var(--tinta-3);white-space:nowrap;position:relative;font-weight:550;border-radius:8px 7px 0 0}
.vistas-guardadas button:hover{background:var(--hover);color:var(--tinta-2)}
.vistas-guardadas button.activo{color:var(--tinta);font-weight:550}
.vistas-guardadas button.activo::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;
  height:2px;background:var(--tinta);border-radius:4px}
.vistas-guardadas svg{width:13px;height:13px;stroke-width:1.7}
.vistas-guardadas .add{color:var(--tinta-3);font-size:16px;padding:6px 10px}
/* Renombrar una vista se hace en su propia pestaña: el nombre se cambia por un
   campo del mismo tamaño y en el mismo sitio, sin abrir nada. */
.vistas-guardadas .vg-nombre{font-size:13px;font-weight:550;color:var(--tinta);
  background:var(--panel);border:1px solid var(--tinta-3);border-radius:4px;
  padding:2px 6px;min-width:60px;outline:none}

/* Contenedor virtualizado */
.bd-scroll{max-height:calc(100vh - 330px);overflow-y:auto;position:relative}
.bd-pista{position:relative;width:100%}
.bd-fila.virtual{position:absolute;left:0;right:0;top:0}

/* Campo personalizado en el peek */
.props .k.custom{color:var(--tinta-3)}
.chip-add{font-size:12px;color:var(--tinta-3);padding:5px 8px;border-radius:8px;display:flex;
  align-items:center;gap:6px;width:100%}
.chip-add:hover{background:var(--hover);color:var(--tinta-2)}

/* ── Propiedades del cliente ──────────────────────────────────────────── */
.props-cliente{display:grid;grid-template-columns:130px 1fr;gap:2px 12px;align-items:center;
  max-width:520px;margin-bottom:8px}
.props-cliente .k{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta-3);padding:6px 0}
.props-cliente .k svg{width:14px;height:14px;stroke-width:1.7}
.props-cliente .v{padding:5px 9px;border-radius:8px;cursor:pointer;font-size:13px;min-height:30px;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;position:relative}
.props-cliente .v:hover{background:var(--hover)}
.props-cliente .v[contenteditable]:focus{background:var(--panel-2);outline:none;
  box-shadow:0 0 0 2px rgba(31,79,216,.25)}
.props-cliente .v input{border:0;background:none;outline:none;font-size:13px;padding:0;width:100%}
.sugerido{font-size:11px;color:var(--ambar);background:var(--ambar-b);padding:2px 7px;border-radius:999px;
  font-weight:680;white-space:nowrap}

/* Menú multiselección */
.sel-menu.multi button .marca{margin-left:auto;font-size:11px;color:var(--tinta-3)}

/* ── Editor de páginas ────────────────────────────────────────────────── */
.editor-barra{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:11px;
  border-bottom:1px solid var(--linea)}
.editor-barra .ruta{font:500 12px var(--mono);color:var(--tinta-3);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-barra .estado-guardado{font-size:12px;color:var(--tinta-3)}
.editor{width:100%;min-height:calc(100vh - 400px);border:0;outline:none;resize:none;background:none;
  font:14.2px/1.75 var(--mono);color:var(--tinta);tab-size:2}
.doc-acciones{display:flex;gap:7px;margin-bottom:11px;flex-wrap:wrap}

/* ── Editor de páginas ────────────────────────────────────────────────── */
.pg{display:flex;flex-direction:column;height:calc(100vh - 250px);min-height:0}
.pg-barra{display:flex;align-items:center;gap:3px;padding:0 0 10px;border-bottom:1px solid var(--linea);
  flex:none;flex-wrap:nowrap;overflow-x:auto}
.pg-barra::-webkit-scrollbar{height:0}
.pg-barra .sep{width:1px;height:18px;background:var(--linea-2);margin:0 5px}
.fmt{width:30px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--tinta-2);font-size:13px}
.fmt:hover{background:var(--hover);color:var(--tinta)}
.fmt svg{width:15px;height:15px;stroke-width:1.8}
.fmt.txt{width:auto;padding:0 9px;font-weight:680}
.pg-modo{display:inline-flex;background:var(--panel-2);border:1px solid var(--linea-2);border-radius:8px;padding:2px;margin-left:auto}
.pg-modo button{padding:4px 10px;border-radius:8px;font-size:12px;color:var(--tinta-3)}
.pg-modo button.activo{background:var(--panel);color:var(--tinta);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pg-cuerpo{flex:1;display:grid;min-height:0;overflow:hidden}
.pg-cuerpo.split{grid-template-columns:1fr 1fr;gap:0}
.pg-cuerpo.solo{grid-template-columns:1fr}
.pg-panel{overflow-y:auto;padding:22px 26px;min-height:0}
.pg-panel + .pg-panel{border-left:1px solid var(--linea)}
.pg-editor{width:100%;height:100%;border:0;outline:none;resize:none;background:none;
  font:14.2px/1.8 var(--mono);color:var(--tinta);tab-size:2;min-height:100%}
.pg-titulo{font-size:28px;font-weight:680;letter-spacing:-.025em;line-height:1.22;border:0;outline:none;
  background:none;width:100%;margin:0 0 6px;padding:0;color:var(--tinta);resize:none;
  font-family:inherit;overflow:hidden;display:block}
.pg-titulo::placeholder{color:var(--tinta-3);opacity:.45}
.pg-meta{font-size:12px;color:var(--tinta-3);margin-bottom:20px}
.pg-estado{font-size:12px;color:var(--tinta-3);min-width:96px;text-align:right}

/* Menú de barra "/" */
.slash{position:absolute;z-index:60;width:270px;max-height:310px;overflow-y:auto;background:var(--panel);
  border:1px solid var(--linea-2);border-radius:12px;box-shadow:var(--sombra-alta);padding:5px}
.slash .grp{font-size:11px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);padding:7px 9px 4px}
.slash button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border-radius:8px;text-align:left}
.slash button:hover,.slash button.sel{background:var(--activo)}
.slash .ic{width:26px;height:26px;border-radius:8px;background:var(--panel-2);border:1px solid var(--linea);
  display:grid;place-items:center;flex:none;font-size:12px;color:var(--tinta-2)}
.slash .n{font-size:13px;font-weight:550}
.slash .d{font-size:11px;color:var(--tinta-3)}

/* ── La página: contenedor, portada, título y bloques ────────────────────
   Se perdió entero al quitar las plantillas —un borrado por rango que se comió
   180 líneas de más— y por eso el editor salía sin columna, con el icono de
   «Añadir portada» a tamaño natural y los bloques pegados al canto. */
.pag{display:flex;flex-direction:column;height:100%;min-height:0}
.pag-barra{display:flex;align-items:center;gap:10px;padding:8px 16px;flex:none;min-height:44px;
  border-bottom:1px solid var(--linea)}
.pag-barra .migas{flex:1;min-width:0;flex-wrap:nowrap}
.pag-barra .migas > *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pag-barra .migas .fin{flex:0 1 auto;min-width:60px}
.pag-acciones{flex:none;white-space:nowrap;margin-left:auto;display:flex;align-items:center;gap:6px}
.pag-acciones .btn{white-space:nowrap}
.pag-estado{font-size:12px;color:var(--tinta-3);white-space:nowrap}
.pag-estado.sucio{color:var(--ambar)}
.pag-estado.ok{color:var(--verde)}
.pag-estado.mal{color:var(--rojo)}
.pag-scroll{flex:1;overflow-y:auto;min-height:0}
.pag-col{max-width:var(--col);margin:0 auto;padding:0 var(--canal) 20px;position:relative}

.pag-portada{height:0;transition:height .15s}
.pag-portada.hay{height:200px;position:relative}
.pag-portada-img{position:absolute;inset:0}
.pag-portada-quitar{position:absolute;right:16px;bottom:12px;font-size:12px;padding:5px 10px;
  border-radius:8px;background:var(--panel);border:1px solid var(--linea-2);opacity:0;transition:opacity .12s}
.pag-portada:hover .pag-portada-quitar{opacity:1}

/* «Añadir portada» y «Añadir icono» salen al acercarse a donde van a actuar:
   la banda de encima del título y el propio título. Antes bastaba con tener el
   ratón en cualquier parte del documento —estabas escribiendo en el pie de
   página y arriba del todo aparecían dos botones que no habías pedido—. */
.pag-cabecera{display:flex;gap:6px;padding-top:34px;min-height:34px;opacity:0;transition:opacity .12s}
.pag-cabecera:hover,
.pag-col:has(.pag-titulo-fila:hover) .pag-cabecera,
.pag-col:has(.pag-titulo-fila:focus-within) .pag-cabecera{opacity:1}
.pag-cab-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tinta-3);
  padding:4px 8px;border-radius:8px}
.pag-cab-btn svg{width:14px;height:14px;flex:none}
.pag-cab-btn:hover{background:var(--hover);color:var(--tinta-2)}
.pag-portada.hay + .pag-col .pag-cabecera{padding-top:12px}

.pag-titulo-fila{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px}
.pag-icono{font-size:28px;line-height:1.1;cursor:pointer;width:78px;border-radius:8px;padding:2px}
.pag-icono:hover{background:var(--hover)}
.pag-titulo{font-size:var(--f-titulo);line-height:var(--l-titulo);font-weight:680;letter-spacing:-.025em;
  outline:none;position:relative}
/* Ojo con el nombre: esta clase se llamaba `vacio` y chocaba con el COMPONENTE
   `.vacio` —el cartel de «no hay nada aquí»—, que centra el texto y mete 60 px
   de relleno. El marcador del título salía centrado a media columna. */
.pag-titulo.sin-titulo::before{content:attr(data-vacio);color:var(--tinta-3);
  pointer-events:none;position:absolute;left:0;top:0}

/* El apretado óptico del cuerpo es el de Cabinet (-0.011em). A 15 px son dos
   décimas de píxel por letra: no se ve una a una, se ve en el bloque. */
.bloques{font-size:var(--f-parrafo);line-height:var(--l-parrafo);letter-spacing:-.011em}
/* El hueco entre párrafos es 12: 3 de relleno abajo + 6 de margen + 3 de
   relleno arriba. En Cabinet el párrafo lleva margin-bottom .75rem y sale lo
   mismo. Las listas van pegadas —allí el margen del elemento es .25rem—. */
.bk{display:flex;align-items:flex-start;margin:0 0 6px;position:relative;border-radius:4px}
.bk[data-t="vin"],.bk[data-t="num"],.bk[data-t="tarea"]{margin-bottom:0}
.bk-canal{width:var(--canal);margin-left:calc(var(--canal) * -1);flex:none;display:flex;justify-content:flex-end;
  align-items:flex-start;gap:1px;padding-top:2px;opacity:0;transition:opacity .1s}
.bk:hover > .bk-canal{opacity:1}
.bk-add,.bk-asa{width:22px;height:24px;border-radius:4px;color:var(--tinta-3);display:grid;place-items:center;
  font-size:16px;line-height:1;flex:none}
.bk-asa{cursor:grab;font-size:12px;letter-spacing:-2px}
/* Con el dedo no hay «encima»: las asas nunca aparecían, así que añadir, mover
   o borrar un bloque de un documento era IMPOSIBLE desde el móvil. En táctil se
   quedan siempre visibles, apagadas, y el canal ya tiene sitio reservado —no
   empujan nada al mostrarse—. */
@media (hover:none){
  .bk-canal{opacity:.45}
  .bk-add,.bk-asa{width:32px;height:32px}
}
.bk-add:hover,.bk-asa:hover{background:var(--activo);color:var(--tinta-2)}
.bk-cuerpo{flex:1;min-width:0}
.bk.arrastrando{opacity:.35}
.bk.sobre{box-shadow:0 2px 0 var(--azul)}
.bk.sobre-arriba{box-shadow:0 -2px 0 var(--azul)}
.bk.sel .bk-cuerpo{background:var(--azul-b);border-radius:4px}

.bk-txt{outline:none;padding:3px 2px;word-break:break-word;white-space:pre-wrap;min-height:var(--l-parrafo)}
.bk-txt:empty::before,.bk-txt[data-vacio]:empty::before{content:attr(data-vacio);color:var(--tinta-3);pointer-events:none}
.bk-txt a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.bk-txt code{font:500 .87em var(--mono);background:var(--gris-b);border-radius:4px;padding:1.5px 5px}
/* El aire de encima del título sale del relleno, no de un margen: así el
   canal con el asa de arrastre crece con él y el tirador queda a la altura de
   la primera línea. 23+6+3 = los 32 de Cabinet; 19 y 15, sus 28 y 24. */
.bk[data-t="h1"] .bk-txt{font-size:var(--f-h1);line-height:var(--l-h1);font-weight:680;letter-spacing:-.025em;padding-top:23px}
.bk[data-t="h2"] .bk-txt{font-size:var(--f-h2);line-height:var(--l-h2);font-weight:680;letter-spacing:-.02em;padding-top:19px}
.bk[data-t="h3"] .bk-txt{font-size:var(--f-h3);line-height:var(--l-h3);font-weight:680;letter-spacing:-.015em;padding-top:15px}

.bk-fila{display:flex;align-items:flex-start;gap:2px}
.bk-fila .bk-txt{flex:1;min-width:0}
.bk-marca{width:24px;height:var(--l-parrafo);flex:none;display:grid;place-items:center;
  margin-top:3px;color:var(--tinta);font-variant-numeric:tabular-nums}
.bk-marca .punto{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.bk-marca.num{font-size:16px;color:var(--tinta-2)}
.bk-check{width:16px;height:16px;flex:none;margin:7px 6px 0 4px;border:1.6px solid var(--tinta-3);
  border-radius:4px;position:relative;transition:background .1s,border-color .1s}
.bk-check.on{background:var(--azul);border-color:var(--azul)}
.bk-check.on::after{content:"";position:absolute;left:4.4px;top:1.4px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.bk-txt.hecho{color:var(--tinta-3);text-decoration:line-through}

.bk-cita{border-left:2px solid var(--linea-2);color:var(--tinta-2);padding-left:16px;margin:10px 0}
/* Cabinet marca el aviso con un filete de acento SOLO a la izquierda. Aquí no:
   el borde de un solo lado está descartado en esta interfaz. Se distingue por
   fondo y borde uniforme, que es la otra forma de hacerlo. */
.bk-aviso{display:flex;gap:10px;background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:8px;padding:12px 16px;margin:10px 0}
.bk-aviso-em{font-size:16px;line-height:1.3;flex:none;border-radius:4px;padding:0 2px}
.bk-aviso-em:hover{background:var(--activo)}
.bk-aviso .bk-txt{flex:1;min-width:0}
.bk-sep{padding:9px 0;cursor:pointer}
.bk-sep hr{border:0;border-top:1px solid var(--linea-2);margin:0}
.bk-cod{background:var(--panel-2);border:1px solid var(--linea-2);border-radius:8px;
  padding:16px 20px;margin:10px 0;position:relative}
.bk-cod-leng{position:absolute;right:10px;top:7px;font-size:11px;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.05em}
.bk-cod .bk-txt{font:13px/1.6 var(--mono);white-space:pre-wrap;padding:0;margin:0}
.bk-img{margin:4px 0;position:relative}
.bk-img img{max-width:100%;border-radius:8px;display:block}
/* El hueco de una imagen sin poner: se toca y se abre el selector, se le suelta
   un fichero encima y se sustituye. Es un botón de verdad —no un cartel— para
   que el teclado llegue a él igual que el ratón. */
.bk-img-zona{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:22px;background:var(--panel-2);border:1px dashed var(--linea-2);border-radius:8px;
  color:var(--tinta-3);text-align:center;font:inherit;font-size:14px;cursor:pointer}
button.bk-img-zona:hover{border-color:var(--azul);color:var(--tinta-2);background:var(--azul-b)}
.bk-img-zona svg{flex:none;opacity:.7}
.bk-img-zona.mal{border-style:solid;border-color:var(--rojo);background:var(--rojo-b);
  color:var(--tinta-2);flex-wrap:wrap;cursor:default}
.bk-img-zona .spin{display:inline-block;vertical-align:-2px}
/* Lo que se puede hacer con una imagen sale ENCIMA de ella al pasar por delante.
   Antes estaba escondido tras un clic que abría dos ventanas seguidas. */
.bk-img-btns{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .12s}
.bk-img:hover .bk-img-btns,.bk.sel .bk-img-btns{opacity:1}
.bk-img-btn{padding:5px 10px;font-size:12px;border-radius:4px;border:1px solid var(--linea-2);
  background:var(--panel);color:var(--tinta-2);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bk-img-btn:hover{border-color:var(--azul);color:var(--azul)}
.bk-doc{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid var(--linea-2);
  border-radius:8px;color:var(--tinta);text-decoration:none;font-size:14px}
.bk-doc:hover{border-color:var(--azul);color:var(--azul)}
.bk-pie{font-size:13px;color:var(--tinta-3);margin-top:5px;outline:none}
.bk-pie[data-vacio]:empty::before{content:attr(data-vacio);color:var(--tinta-3);opacity:.75;pointer-events:none}
.bk-tabla{margin:4px 0;overflow-x:auto}
.bk-tabla table{border-collapse:collapse;width:100%;font-size:13px}
.bk-tabla th,.bk-tabla td{border:1px solid var(--linea-2);padding:8px 12px;text-align:left;
  vertical-align:top;min-width:90px;outline:none}
.bk-tabla th{background:var(--panel-2);font-weight:680;font-size:13px}
.bk-tabla .tb-c:focus{box-shadow:inset 0 0 0 2px var(--azul);border-radius:4px}
.tb-btns{display:flex;gap:6px;margin-top:6px;opacity:0;transition:opacity .12s}
.bk:hover .tb-btns{opacity:1}
.tb-btns button{font-size:12px;color:var(--tinta-3);padding:3px 8px;border-radius:4px;border:1px solid var(--linea-2)}
.tb-btns button:hover{background:var(--hover);color:var(--tinta-2)}
/* ── Color de letra y de fondo ──────────────────────────────────────────
   Los valores viven AQUÍ y no en el fichero: el markdown solo guarda el nombre
   («rojo»), así que el tema oscuro puede bajar la saturación sin tocar ni un
   documento. Un rojo fijo sobre fondo negro vibra y cansa. */
:root{
  --c-gris:#6e737a;     --c-marron:#8a6046;  --c-naranja:#b5651d;
  --c-amarillo:#8a6d00; --c-verde:#146c43;   --c-azul:#1f4fd8;
  --c-morado:#6d3fc4;   --c-rosa:#b03a72;    --c-rojo:#c0392f;
  --f-gris:#eeeef0;     --f-marron:#f2e9e2;  --f-naranja:#fbeadb;
  --f-amarillo:#fbf3d6; --f-verde:#e4f3ea;   --f-azul:#e6edfd;
  --f-morado:#efe8fb;   --f-rosa:#fbe6f0;    --f-rojo:#fdeae8;
}
[data-tema="oscuro"]{
  --c-gris:#9aa0a8;     --c-marron:#c39a7d;  --c-naranja:#e0a06a;
  --c-amarillo:#d8c069; --c-verde:#6cc79a;   --c-azul:#8fb0f5;
  --c-morado:#b79bf0;   --c-rosa:#e493bd;    --c-rojo:#f09a92;
  --f-gris:#2a2f38;     --f-marron:#3a2f28;  --f-naranja:#3d3025;
  --f-amarillo:#3a3524; --f-verde:#22352b;   --f-azul:#222c44;
  --f-morado:#2e2740;   --f-rosa:#3a2733;    --f-rojo:#3a2726;
}
.bk-txt [data-c]{color:var(--c-gris)}
.bk-txt [data-c="marron"]{color:var(--c-marron)}
.bk-txt [data-c="naranja"]{color:var(--c-naranja)}
.bk-txt [data-c="amarillo"]{color:var(--c-amarillo)}
.bk-txt [data-c="verde"]{color:var(--c-verde)}
.bk-txt [data-c="azul"]{color:var(--c-azul)}
.bk-txt [data-c="morado"]{color:var(--c-morado)}
.bk-txt [data-c="rosa"]{color:var(--c-rosa)}
.bk-txt [data-c="rojo"]{color:var(--c-rojo)}
.bk-txt mark{background:var(--f-amarillo);color:inherit;border-radius:4px;padding:1px 2px}
.bk-txt mark[data-f="gris"]{background:var(--f-gris)}
.bk-txt mark[data-f="marron"]{background:var(--f-marron)}
.bk-txt mark[data-f="naranja"]{background:var(--f-naranja)}
.bk-txt mark[data-f="verde"]{background:var(--f-verde)}
.bk-txt mark[data-f="azul"]{background:var(--f-azul)}
.bk-txt mark[data-f="morado"]{background:var(--f-morado)}
.bk-txt mark[data-f="rosa"]{background:var(--f-rosa)}
.bk-txt mark[data-f="rojo"]{background:var(--f-rojo)}

/* La paleta. Cada muestra es una A pintada de su color, como en Notion: se
   elige viendo el resultado, no descifrando un nombre. */
.flotante.menu-color{min-width:0;width:212px}
/* Se llamaba .paleta, igual que la paleta de comandos de ⌘K, y como esta regla
   va 500 líneas más abajo ganaba: la paleta de comandos se abría como una
   rejilla de 5 columnas con el buscador estirado 644 px hacia abajo. Dos cosas
   distintas no pueden compartir nombre de clase. */
.paleta-color{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:3px 5px 8px}
.col-mu{width:34px;height:30px;border-radius:8px;border:1px solid var(--linea-2);
  font-size:14px;font-weight:680;display:grid;place-items:center;background:var(--panel)}
.col-mu:hover{border-color:var(--tinta-3)}
.col-mu.texto{color:var(--c-gris)}
.col-mu.texto[data-c="marron"]{color:var(--c-marron)}
.col-mu.texto[data-c="naranja"]{color:var(--c-naranja)}
.col-mu.texto[data-c="amarillo"]{color:var(--c-amarillo)}
.col-mu.texto[data-c="verde"]{color:var(--c-verde)}
.col-mu.texto[data-c="azul"]{color:var(--c-azul)}
.col-mu.texto[data-c="morado"]{color:var(--c-morado)}
.col-mu.texto[data-c="rosa"]{color:var(--c-rosa)}
.col-mu.texto[data-c="rojo"]{color:var(--c-rojo)}
.col-mu.fondo{background:var(--f-gris)}
.col-mu.fondo[data-f="marron"]{background:var(--f-marron)}
.col-mu.fondo[data-f="naranja"]{background:var(--f-naranja)}
.col-mu.fondo[data-f="amarillo"]{background:var(--f-amarillo)}
.col-mu.fondo[data-f="verde"]{background:var(--f-verde)}
.col-mu.fondo[data-f="azul"]{background:var(--f-azul)}
.col-mu.fondo[data-f="morado"]{background:var(--f-morado)}
.col-mu.fondo[data-f="rosa"]{background:var(--f-rosa)}
.col-mu.fondo[data-f="rojo"]{background:var(--f-rojo)}
/* «Sin color» se marca con el borde de la tinta, no con una equis: es la opción
   por defecto, no una acción de borrado. */
.col-mu.quitar{color:var(--tinta);background:var(--panel);border-color:var(--tinta)}

.pag-fondo{min-height:220px;cursor:text}
/* El rectángulo del lazo. Se marca lo que TOCA, no lo que queda dentro entero. */
.pag-lazo{position:fixed;z-index:150;pointer-events:none;border-radius:4px;
  background:color-mix(in srgb,var(--azul) 10%,transparent);
  outline:1px solid color-mix(in srgb,var(--azul) 34%,transparent)}

/* La ficha de cliente no scrollea entera: la cabecera y las pestañas se quedan
   fijas y solo se mueve el panel. Antes el título desaparecía al bajar. */
/* Ojo: esta clase se llamaba `ficha` y chocaba con el COMPONENTE `.ficha`, que
   es una tarjeta con borde, esquinas y margen. El lienzo se comía esas tres
   cosas sin que nadie lo pidiera y salía un segundo borde redondeado un píxel
   por dentro del de la tarjeta principal: el «doble borde raro». */
.lienzo.cliente{display:flex;flex-direction:column;padding:var(--chrome,94px) 0 0;overflow:hidden}
.lienzo.cliente > *{max-width:none;margin-left:0;margin-right:0}
.lienzo.cliente > .ficha-cab{padding:18px 40px 4px;flex:none}
.lienzo.cliente > .pestanas{padding:0 40px;margin-bottom:0;flex:none}
.lienzo.cliente > #panel{flex:1;min-height:0;overflow-y:auto;padding:16px 40px 30px;scrollbar-gutter:stable}
/* Gris de trabajo con las fichas en blanco encima. Se aplica al área que
   scrollea, no a la tarjeta entera: la barra de pestañas y la ruta se quedan
   en blanco arriba, que es donde vive el mando de la aplicación. */
.lienzo.cliente.tablero > #panel,.lienzo.tablero{background:var(--tablero)}
@media(max-width:700px){
  .lienzo.cliente > .ficha-cab{padding:14px 18px 4px}
  .lienzo.cliente > .pestanas{padding:0 18px}
  .lienzo.cliente > #panel{padding:16px 18px 30px}}
/* Ojo: la clase no puede llamarse .pag — ya la usa el contenedor de página,
   que es flex-direction:column, y dejaba el icono encima del texto. */
.nav-item.doc{color:var(--tinta-3);font-size:13px}
.nav-item.doc:hover{color:var(--tinta-2)}
.nav-item.nueva{color:var(--tinta-3);font-size:13px}
.nav-item.nueva svg{width:14px;height:14px}
/* El cuerpo de una tarea usa la misma página, pero sin su cabecera ni su columna
   centrada: vive dentro del panel lateral, que ya es estrecho. */
.pag-col.desnuda{max-width:none;padding:0 0 0 var(--canal)}

/* Editor dentro de un panel lateral. Dos cosas cambian: la barra de formato no
   se parte en varias filas (rueda de lado y solo sale cuando estás escribiendo)
   y el canal del bloque se estrecha, que con 48 px el texto quedaba empujado a
   la derecha con medio panel en blanco. */
/* La barra de formato ESTÁ SIEMPRE. Antes aparecía sola al enfocar, creciendo de
   0 a 44 px con una transición: cada vez que pinchabas para escribir, la barra se
   desplegaba y empujaba tu texto hacia abajo justo cuando ibas a poner el cursor.
   Ahorraba 44 px y costaba que la línea se moviera bajo el dedo. */
.pag.compacta{--canal:24px;min-height:100%}
.pag.compacta .pag-formato{order:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:8px 16px 9px;margin-bottom:16px;border-bottom:1px solid var(--linea)}
.pag.compacta .pag-formato::-webkit-scrollbar{display:none}
.pag.compacta .pag-formato .fmt-derecha{margin-left:16px}
.pag.compacta .pag-scroll{order:2;flex:1 1 auto}
/* «Guardando» abajo del todo. Es un estado del panel, no de la línea que estás
   escribiendo, así que no tiene por qué vivir junto al texto. */
.pag.compacta .pag-barra.ligera{order:3;position:sticky;bottom:0;z-index:2;
  min-height:0;padding:9px 16px;margin-top:12px;justify-content:flex-end;
  background:var(--panel);border-top:1px solid var(--linea);border-bottom:0}
/* Sin nada que decir no pinta ni la línea: una raya suelta al fondo del panel
   parece un separador que no separa nada. */
.pag.compacta .pag-barra.ligera:not(:has(.pag-estado:not(:empty))){border-top-color:transparent}
.peek-cuerpo .pag-scroll{overflow:visible}
.peek-cuerpo .pag-fondo{min-height:90px}
.bk-txt[data-vacio]:empty::before{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* Menú flotante: "/", opciones de bloque, iconos.
   OJO: sin el `position:fixed` de aquí, `menuFlotante` sigue calculando su
   `top`/`left` y no sirven de nada —el menú aparece arriba a la izquierda—.
   Se perdió entero al quitar las plantillas y tardó en verse porque el menú
   se abre, solo que en el sitio equivocado. */
.flotante{position:fixed;z-index:200;background:var(--panel);border:1px solid var(--linea-2);
  border-radius:12px;box-shadow:var(--sombra-alta);padding:6px;min-width:220px;max-height:60vh;overflow-y:auto}
.flotante.menu-barra{width:300px}
.menu-tit{font-size:11px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);padding:8px 9px 4px}
.menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 9px;border-radius:8px;
  font-size:14px;text-align:left;color:var(--tinta-2)}
.menu-item:hover,.menu-item.activo{background:var(--activo);color:var(--tinta)}
.menu-item.peligro{color:var(--rojo)}
/* Los iconos de cualquier menú, a su tamaño. Solo lo tenía `.menu-contexto`, y
   en el menú «Más» del móvil el libro y el pulso salían a todo el ancho. */
.menu-item>svg{width:16px;height:16px;flex:none}
.menu-col button.peligro{color:var(--rojo)}
.menu-item.ancho{padding:7px 9px}
.menu-item.ancho span:last-child{display:flex;flex-direction:column;min-width:0}
.menu-item b{font-weight:550;font-size:14px;color:var(--tinta)}
.menu-item i{font-style:normal;font-size:12px;color:var(--tinta-3)}
.menu-ic{width:28px;height:28px;flex:none;border:1px solid var(--linea-2);border-radius:8px;
  display:grid;place-items:center;font-size:12px;font-weight:680;color:var(--tinta-2);background:var(--panel-2)}
.menu-sep{height:1px;background:var(--linea);margin:5px 0}
/* Menú del botón derecho: icono monoline a la izquierda, atajo a la derecha */
.flotante.menu-contexto{min-width:236px;padding:5px}
.menu-contexto .menu-tit{padding:7px 9px 5px;text-transform:none;letter-spacing:0;font-size:12px;
  font-weight:550;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-contexto .menu-item{font-size:13px;gap:10px;padding:7px 9px}
.menu-contexto .menu-item>svg{width:15px;height:15px;flex:none;opacity:.72}
.menu-contexto .menu-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-contexto kbd{font:inherit;font-size:11px;color:var(--tinta-3);flex:none}
.menu-contexto .menu-item:focus-visible,.menu-contexto .menu-item:focus{background:var(--activo);color:var(--tinta);outline:none}
.menu-vacio{padding:14px 10px;font-size:13px;color:var(--tinta-3);text-align:center}
.emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:2px}
.emojis button{font-size:18px;padding:5px;border-radius:8px;line-height:1}
.emojis button:hover{background:var(--activo)}
.portadas{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:3px}
.portadas button{height:38px;border-radius:8px;border:1px solid var(--linea)}

/* Barra de formato al seleccionar texto */
.sel-barra{position:absolute;z-index:210;transform:translateX(-50%);display:flex;gap:1px;padding:3px;
  background:var(--primario);border-radius:8px;box-shadow:var(--sombra-alta)}
.sel-barra button{color:var(--primario-txt);width:29px;height:27px;border-radius:4px;font-size:13px;opacity:.85}
.sel-barra button:hover{background:rgba(255,255,255,.16);opacity:1}
.sel-barra button svg{width:14px;height:14px;display:block;margin:0 auto}

.avc.mini{width:17px;height:17px;border-radius:4px;font-size:10px;flex:none}
.mini-et{display:block;font-size:12px;font-weight:680;color:var(--tinta-2);margin:14px 0 6px}
.modal.ancho{width:min(620px,92vw)}

/* ── Pestañas ─────────────────────────────────────────────────────────────
   Cada una recuerda su ruta: puedes tener las tareas de un cliente, la
   documentación de otro y un chat abiertos a la vez. Idea de Colanode. */
/* Pestañas flotantes. Eran carpetas pegadas a una línea que cruzaba la pantalla
   de lado a lado: la línea pesaba más que las propias pestañas y cortaba la
   tarjeta en dos. Ahora son fichas sueltas sobre el papel y la activa se marca
   por fondo, no por un recorte con tres sombras interiores. */
/* La franja de arriba —pestañas y barra— es cristal: deja pasar el difuminado
   del fondo desenfocado en vez de taparlo con un blanco plano. Es una sola
   banda aunque sean dos elementos; van pegados y con el mismo cristal.
   `saturate` es lo que evita que el desenfoque deje el color lavado y gris. */
/* La fila de pestañas ocupa el ancho y deja a la derecha, a la misma altura,
   lo que no pertenece a ninguna pantalla en concreto: hoy la campana. */
.tabs-fila{display:flex;align-items:center;gap:8px}
.chrome-derecha{display:flex;align-items:center;gap:6px;flex:none;padding:6px 12px 0 0}
.tabs{display:flex;align-items:stretch;gap:3px;padding:6px 10px 0;background:none;
  flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:7px;padding:0 9px 0 11px;height:30px;min-width:110px;
  max-width:220px;border-radius:8px;font-size:13px;color:var(--tinta-3);cursor:pointer;
  background:transparent;position:relative;flex:0 1 auto;user-select:none;transition:background .12s,color .12s}
.tab:hover{background:var(--hover);color:var(--tinta-2)}
/* La activa va en blanco: es la única de la fila que está «abierta», y sobre el
   cristal el gris de `--activo` apenas se distinguía del fondo. El hilo de
   borde es para que no flote sin apoyo sobre una franja translúcida. */
.tab.activa{background:var(--panel);color:var(--tinta);font-weight:550;
  border:1px solid color-mix(in srgb,var(--linea) 80%,transparent)}
.tab.sobre{box-shadow:inset 2px 0 0 var(--azul)}
.tab-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tab-ic{display:flex;align-items:center;flex:none}
.tab-ic svg{width:14px;height:14px;color:var(--tinta-3)}
.tab-ic .punto{width:8px;height:8px;border-radius:4px;display:block;background:var(--acento)}
.tab-ic .avc{width:16px;height:16px;border-radius:4px;font-size:10px}
.tab-emoji{font-size:13px;line-height:1;display:block}
.tab-x{width:17px;height:17px;border-radius:4px;flex:none;font-size:10px;color:var(--tinta-3);
  display:grid;place-items:center;opacity:0;transition:opacity .12s}
.tab:hover .tab-x{opacity:1}
.tab.activa .tab-x{opacity:.6}
.tab-x:hover{background:var(--activo);color:var(--tinta);opacity:1}
.tab-mas{width:30px;height:33px;border-radius:8px;color:var(--tinta-3);display:grid;place-items:center;flex:none}
.tab-mas:hover{background:var(--hover);color:var(--tinta)}
.tab-mas svg{width:15px;height:15px}
/* Fuera de Resumen no hay cabecera de cliente: las secciones se pegan arriba y
   la identidad la lleva la ruta y la propia pestaña. */
.lienzo.cliente > .pestanas.pegada{padding-top:2px;border-bottom:1px solid var(--linea)}
/* Sin ruta propia, la barra de la página es solo el estado de guardado y sus
   acciones: se pega a la derecha y no compite con la ruta de arriba. */
.pag-barra.ligera{border-bottom:0;min-height:34px;padding:6px 14px 0;justify-content:flex-end;gap:8px}
.pag-barra.ligera .migas{flex:0}
/* Página anidada: un enlace normal en el markdown, una ficha aquí. */
/* La página dentro de otra, al estilo de Notion: una línea de texto con su
   emoji y el título subrayado. Antes era una fila del ancho del documento, con
   filete abajo y un galón a la derecha —parecía un elemento de menú metido a
   la fuerza en medio de un párrafo—. Ni raya ni galón: es un enlace, y se lee
   como un enlace. */
.bk-subpag{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:3px 6px;margin:1px -6px;border-radius:4px;text-align:left;
  color:var(--tinta);font-size:var(--f-parrafo);line-height:var(--l-parrafo);
  transition:background .12s}
.bk-subpag:hover{background:var(--hover)}
.bk-subpag .ic{font-size:16px;line-height:1;flex:none}
.bk-subpag .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:550;text-decoration:underline;text-decoration-color:var(--linea-2);
  text-underline-offset:3px}
.bk-subpag:hover .t{text-decoration-color:var(--tinta-3)}
.bk-subpag .fl{display:none}

/* ── Segundo lateral ──────────────────────────────────────────────────── */
.lat-cab{display:flex;align-items:center;gap:6px;padding:9px 8px 6px 14px}
.lat-tit{flex:1;font-size:12px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.lat-volver{display:flex;align-items:center;gap:5px;flex:1;font-size:13px;color:var(--tinta-3);
  padding:3px 6px;border-radius:8px;margin-left:-6px}
.lat-volver:hover{background:var(--hover);color:var(--tinta-2)}
.lat-volver svg{width:14px;height:14px}
.lat-cliente{display:flex;align-items:center;gap:10px;padding:6px 12px 12px;cursor:pointer}
.lat-cliente:hover .n{text-decoration:underline}
.lat-cliente .txt{min-width:0}
.lat-cliente .n{font-size:16px;font-weight:680;letter-spacing:-.015em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lat-cliente .d{font-size:12px;color:var(--tinta-3);line-height:1.3}
.avc.md{width:32px;height:32px;border-radius:8px;font-size:12px;flex:none}
.migas .con-menu{color:var(--tinta)}
.migas .con-menu:hover{background:var(--hover)}

.nav-item.doc .fl{width:12px;flex:none;font-size:10px;color:var(--tinta-3);transition:transform .12s}
.nav-item.doc .fl.abierta{transform:rotate(90deg)}

/* La fila de una PÁGINA. Se parece a la de un fichero pero no es la misma: el
   icono es el emoji que tú elegiste —una imagen, no un símbolo del sistema— y
   el texto es el título, así que pesa más y va en tinta normal. */
.nav-item.pagina{gap:7px;font-size:13px;color:var(--tinta-2)}
.nav-item.pagina{position:relative}
.nav-item.pagina .fl[data-plegar-pagina]{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.nav-item.pagina:has([data-plegar-pagina]){padding-right:26px}
.nav-item.pagina .fl{width:12px;flex:none;font-size:10px;color:var(--tinta-3);
  transition:transform .12s;border-radius:4px;line-height:1}
.nav-item.pagina .fl.abierta{transform:rotate(90deg)}
.nav-item.pagina .fl.abierta[data-plegar-pagina]{transform:translateY(-50%) rotate(90deg)}
.nav-item.pagina .fl:hover{background:var(--activo);color:var(--tinta-2)}
/* Al arrastrar una página encima de otra: se mete dentro. Se marca con el
   acento en la fila entera, no con una línea, porque no se coloca ANTES ni
   DESPUÉS de esa página: se coloca DENTRO. */
.nav-item.pagina.sobre{background:var(--acento-b);box-shadow:inset 0 0 0 1px var(--acento-borde)}
.pagina-ico{width:18px;flex:none;text-align:center;font-size:14px;line-height:1}
.pagina-ico svg{width:15px;height:15px;vertical-align:-2px}
/* Cuando no hay ninguna página no se enseña un árbol vacío: se enseña el botón
   que hace falta y por qué esto no es la lista de archivos. */
.nav-estrenar{padding:16px 12px;text-align:center}
.nav-estrenar p{font-size:13px;color:var(--tinta-2);margin-bottom:10px}
.nav-estrenar .btn{width:100%;justify-content:center}
.nav-estrenar small{display:block;margin-top:10px;font-size:11px;line-height:1.5;color:var(--tinta-3)}

/* ── Portada del cliente ──────────────────────────────────────────────── */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:20px 0 24px}
.cifra{border:1px solid var(--linea-2);border-radius:12px;padding:13px 15px;text-align:left;
  background:var(--panel);transition:border-color .12s,background .12s}
.cifra:hover{background:var(--hover);border-color:#c9cbd1}
.cifra .et{font-size:11px;font-weight:680;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3)}
.cifra .n{font-size:28px;font-weight:680;letter-spacing:-.025em;margin-top:3px;line-height:1.1}
.cifra .pie{font-size:12px;color:var(--tinta-3);min-height:15px}

.ficha-cols{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
@media(max-width:1000px){.ficha-cols{grid-template-columns:minmax(0,1fr)}}
.ficha-izq,.ficha-der{display:flex;flex-direction:column;gap:20px;min-width:0}
.bloq{min-width:0}
.bloq-cab{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.bloq-cab h2{margin:0;font-size:13px;font-weight:680;letter-spacing:.01em;flex:1}
.bloq .nota{font-size:13px;color:var(--tinta-3);margin:0 0 8px;line-height:1.5}
.bloq .mas{font-size:13px;color:var(--tinta-3);padding:6px 2px;text-align:left}
.bloq .mas:hover{color:var(--tinta)}
.btn.ancho{width:100%;justify-content:center}

.lista-tk,.lista-doc,.lista-int{display:flex;flex-direction:column;border:1px solid var(--linea-2);
  border-radius:12px;overflow:hidden}
.tk-fila,.doc-fila{display:flex;align-items:center;gap:9px;padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--linea);font-size:14px;min-width:0}
.tk-fila:last-child,.doc-fila:last-child{border-bottom:0}
.tk-fila:hover,.doc-fila:hover{background:var(--hover)}
.tk-fila .t,.doc-fila .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-fila svg{width:14px;height:14px;color:var(--tinta-3);flex:none}
.doc-fila .r{font-size:12px;color:var(--tinta-3);flex:none}
.int-fila{display:flex;gap:10px;padding:8px 12px;border-bottom:1px solid var(--linea);font-size:13px}
.int-fila:last-child{border-bottom:0}
.int-fila .t{flex:1;font-weight:550}
.int-fila .v{color:var(--tinta-3);font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.linea{display:flex;flex-direction:column;gap:9px;border-left:2px solid var(--linea-2);padding-left:14px}
.hito{display:flex;gap:10px;font-size:13px;line-height:1.45}
.hito .f{color:var(--tinta-3);font-variant-numeric:tabular-nums;flex:none;font-size:12px}
.lienzo.cliente > #panel > .ficha-cab{padding:18px 0 4px}
.grupo-res{padding:9px 14px 3px;font-size:11px;font-weight:680;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3)}
@media(max-width:900px){
  /* El velo empieza donde acaba el cajón. Iba a pantalla completa con
     z-index:-1 DENTRO del cajón, así que tapaba su propio fondo y el cajón entero
     se veía gris, como desactivado (8-oct-2026). */
  .lateral.abierto::after{content:"";position:fixed;left:min(88vw,340px);right:0;top:0;bottom:0;
    background:rgba(16,18,22,.18)}
  .tabs{padding-left:6px}
  .tab{min-width:92px}
}

/* ── Navegación móvil ────────────────────────────────────────────────────
   El móvil no conserva las dos barras verticales del escritorio. El riel se
   convierte en navegación inferior y el lateral contextual en un drawer. */
@media(max-width:700px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  /* El marco es una COLUMNA y la barra de secciones va DENTRO, como último
     hijo. Estaba fuera, flotando con `position:fixed`, y eso permitía que los
     dos discreparan sobre dónde está el fondo de la pantalla: el compositor de
     un canal quedaba cortado por detrás de la barra, y en Inicio asomaba una
     franja del fondo por debajo. Dentro de la misma columna eso es imposible:
     lo que ocupa la barra se lo quita al contenido, ni un píxel más ni menos, y
     esconderla se lo devuelve. */
  .marco{display:flex;flex-direction:column;width:100vw;max-width:100vw;
    left:0;right:0;overflow:hidden;position:fixed}
  .principal{order:0;flex:1 1 auto;min-height:0}
  /* Sin la junta ni las esquinas del escritorio. La tarjeta de contenido flota
     sobre el lienzo cuando hay sitio de sobra; en un móvil de 390 px esos
     10 px de margen y los 16 de radio se leían como un marco lila alrededor de
     la aplicación, y encima la esquina redondeada recortaba el contenido. En
     el móvil la pantalla ES la aplicación: a sangre y sin borde. */
  .principal{width:100%;min-width:0;grid-column:auto;margin:0;border:0;border-radius:0}
  .riel{position:static;order:1;flex:none;z-index:100;width:100%;max-width:100%;height:calc(58px + env(safe-area-inset-bottom));
    padding:4px 4px env(safe-area-inset-bottom);border-right:0;border-top:1px solid var(--linea);
    flex-direction:row;align-items:stretch;justify-content:space-around;overflow:visible;background:color-mix(in srgb,var(--panel) 96%,transparent);
    backdrop-filter:blur(16px)}
  .riel-logo,.riel-empresa,.riel-hueco,#riel-tema,#riel-yo,.riel-item[data-sec="agentes"],.riel-item[data-sec="equipo"],
  .riel-item[data-sec="automatizaciones"],.riel-item[data-sec="estado"],
  /* «La casa» se lee de arriba abajo y en el móvil la barra ya va justa: se
     entra por el menú «Más», que está a un toque. */
  .riel-item[data-sec="casa"],
  /* Historial es a donde se viene a mirar qué pasó, no una sección del día a
     día, y era la sexta de siete en una tira de 390 px. Pasa al menú «Más». */
  .riel-item[data-sec="actividad"]{display:none}
  #riel-mas{display:flex !important}
  /* La papelera tampoco: es a donde se viene cuando has borrado algo sin
     querer, no una sección del día a día, y era la séptima de siete en una
     barra donde solo caben seis. */
  #riel-papelera{display:none}
  /* `20 %` fijo era una cuenta hecha para cinco elementos. Al añadirse «IA» y
     «Más» quedaban siete a 78 px = 546 px en una barra de 390: los tres
     últimos —IA, Más y la papelera— caían fuera de la pantalla, y con ellos
     la única puerta del móvil a Agentes, Automatizaciones, Informes, Equipo,
     Estado y La casa. Repartiendo el ancho (`flex:1 1 0`) entran los que haya,
     sean cinco o siete, sin que ninguno se salga. */
  .riel-item{width:auto;min-width:0;flex:1 1 0;max-width:none;padding:5px 2px 3px;border-radius:8px;justify-content:center}
  .riel-item svg{width:20px;height:20px}.riel-item .et{font-size:10px}
  /* Siete botones en 390 px salen a 55 de ancho, y con 2 px de relleno a cada
     lado «Dashboards» (56 px) se quedaba en «Dashboa…». La etiqueta puede usar
     el ancho entero del botón y apretarse un pelo: cabe sin cambiar de tamaño. */
  .riel-item{padding-left:0;padding-right:0}.riel-item .et{letter-spacing:-.03em;max-width:100%}
  .riel-item .bola{top:2px;right:calc(50% - 22px)}
  /* El cajón entraba con `display:none` ↔ `display:flex`, y eso NO se puede
     animar: aparecía de golpe. Se queda siempre puesto, desplazado fuera por la
     izquierda, y lo que se anima es el desplazamiento. `visibility` lo saca del
     alcance del teclado y de los lectores de pantalla mientras está fuera, y va
     con retardo al cerrar para que no desaparezca antes de terminar de salir. */
  .lateral{position:absolute;left:0;right:auto;top:0;bottom:0;
    width:min(88vw,340px);z-index:90;box-shadow:var(--sombra-alta);border-right:1px solid var(--linea-2);
    transform:translateX(-101%);visibility:hidden;
    transition:transform .26s var(--curva),visibility 0s .26s}
  .lateral.abierto{transform:none;visibility:visible;transition:transform .26s var(--curva)}
  /* El velo cubre el resto de la pantalla y se funde con el cajón. */
  .lateral::after{content:"";position:absolute;inset:0;left:min(88vw,340px);
    background:rgba(16,18,22,.24);opacity:0;pointer-events:none;
    transition:opacity .26s var(--curva)}
  .lateral.abierto::after{opacity:1;pointer-events:auto}
  .tabs{display:none}
  .barra{min-height:48px;padding:2px 10px;border-bottom-color:var(--linea)}
  /* Con el ratón se acierta en 28 px; con el pulgar, no. El botón del lateral,
     los de las migas y la campana medían 28×28 en TODAS las pantallas, y son
     justo los que más se usan. Pasan a 44×44 —la medida mínima para un dedo—
     y el relleno de la barra baja de 7 a 2 px para que siga midiendo 48 de
     alto: el objetivo crece sin robarle ni un píxel al contenido. */
  .barra .lat-icono,.chrome-derecha .lat-icono{width:44px;height:44px}
  /* La bola del contador colgaba por fuera del botón, que es lo que tocaba
     cuando medía 28 px. Con 44 el botón ya llega al filo de la pantalla y la
     bola se salía por arriba: se quedaba cortada por la mitad. Dentro de la
     caja, pegada a la esquina del icono, que ahora hay sitio de sobra. */
  .chrome-derecha .notif-boton>span{right:2px;top:2px}
  #mostrar-lateral{display:grid !important}
  /* El cajón es TODA la navegación del móvil —la lista de clientes, y dentro
     de un cliente su Resumen, Tareas, Historial y Accesos— y sus filas medían
     32 px de alto: por debajo de los 44 que necesita un pulgar. Se apilan una
     pegada a otra, así que fallar el toque no te deja donde estabas, te lleva
     al cliente de al lado. Sitio hay de sobra: el cajón se queda con más de
     media pantalla vacía por debajo.
     Va por `min-height` y no por relleno a propósito: el modo compacto de
     `data-densidad` pisa el relleno y volvería a dejarlas pequeñas. */
  .nav-item{min-height:44px}
  /* Mismo caso, y del mismo tamaño que ya tienen los de la barra y la campana:
     este es el botón con el que se CIERRA el cajón, y medía 28. */
  .lat-cab .lat-icono{width:44px;height:44px}
  .solo-movil{display:grid}.barra .acciones:empty{display:none}
  .migas{font-size:13px}.migas a,.migas button{max-width:150px}
  /* Mismo motivo que en la regla de 700 de más arriba: la franja de cristal
     flota sobre el lienzo, así que el relleno de arriba lo manda `--chrome`.
     Con los 6 px de antes el saludo y la fecha de Inicio salían cortados por
     debajo del cristal en cuanto cargaba la pantalla. */
  .lienzo{padding:calc(var(--chrome,94px) + 2px) 15px 24px}
  /* La campana es el único superviviente de la fila de pestañas en el móvil, y
     al quedarse sola se iba al canto IZQUIERDO, encima del botón del lateral y
     con la bola del contador cortada por el borde de la pantalla. Va a la
     derecha, que es su sitio, y la fila respeta la muesca del teléfono: sin
     esto la campana nace debajo de la barra de estado del sistema.
     Y al ser la única, su fila entera sobraba: 44 px de alto con un icono de
     56 en el canto derecho y 334 px de nada al lado, restados al contenido en
     TODAS las pantallas. La fila se queda sin alto y la campana se cuelga de
     ella, así que cae sobre la franja de la ruta sin dejar de estar arriba a
     la derecha, que es lo que la hacía predecible. La muesca la pasa a
     respetar `.chrome`, que es quien manda ahora en el alto de la franja. */
  .chrome{padding-top:env(safe-area-inset-top)}
  .tabs-fila{height:0;padding-top:0;position:relative;z-index:3}
  .chrome-derecha{position:absolute;top:2px;right:0;margin-left:0;padding-top:0}
  /* Hueco reservado para la campana: en la ficha de cliente la barra trae su
     propio menú «···» pegado a la derecha y, sin esto, los dos botones
     acababan uno encima del otro. */
  .barra{padding-right:56px}
  .cabecera{align-items:flex-start;margin:12px 0 18px}.cabecera h1{font-size:28px}
  .cabecera .acciones{width:100%;margin-left:0;min-width:0}.inicio-acciones{display:grid !important;grid-template-columns:minmax(0,1fr)}
  .inicio-acciones .btn{justify-content:center;padding:8px 10px}
  .panel-dia{margin-bottom:22px}.dia-metrica{padding:14px 12px}.dia-metrica .n{font-size:22px}
  .dia-metrica .et{font-size:12px}.inicio-cols{gap:22px}
  .inicio-cols .dato-sec{display:none}
  .rejilla{grid-template-columns:minmax(0,1fr)}.tarjeta{padding:14px;min-width:0;overflow:hidden}.tarjeta .res{overflow-wrap:anywhere}
  .segmentado{max-width:100%}.segmentado button{padding:6px 10px}
  /* Una tabla que no cabe tiene que rodar DENTRO de su caja. Poniendo el
     `overflow-x` en el lienzo, arrastrar la tabla de lado se llevaba con ella
     el título, los filtros y toda la pantalla, y se perdía de vista dónde
     estabas. El envoltorio de la tabla no tiene clase propia, así que se busca
     por lo que lleva dentro. La regla del lienzo se queda de red por si alguna
     tabla se pinta sin envoltorio: cuando lo hay, ya no le desborda nada. */
  .tabla{min-width:720px}.lienzo:has(.tabla){overflow-x:auto}
  .lienzo>div:has(>.tabla){overflow-x:auto}
  /* Y cuando la tabla cuelga DIRECTAMENTE del lienzo no hay envoltorio que
     pueda rodar, así que la red de arriba acababa moviendo la pantalla entera
     otra vez (pasaba en Salud y repositorios). Pasándola a bloque, la tabla es
     su propia caja con scroll: rueda ella sola y el título y las migas se
     quedan quietos. Suelta el `min-width` de 720 a propósito: sin envoltorio
     el ancho lo pone su contenido, no una medida pensada para el escritorio. */
  .lienzo>.tabla{display:block;overflow-x:auto;min-width:0}
  /* Título de sección y su explicación, uno al lado del otro: en el escritorio
     sobra ancho, pero a 390 px el título se quedaba en 200 px y la explicación
     en 141, partida en tres líneas cortas contra el canto derecho. Se leía como
     dos columnas rotas. Uno debajo del otro, que es como se lee un título con
     su entradilla. */
  .est-cab{flex-direction:column;align-items:flex-start;gap:3px}
  .est-cab .dato-sec{flex:none}
  .est-cab .btn{align-self:flex-start}
  .bd-tablero{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .bd-tablero .col{min-width:82vw;scroll-snap-align:start}
  /* La tabla YA viene preparada para rodar de lado: el `min-width:800px` de
     cada fila lo escribe la vista al pintar las columnas. Lo que faltaba era
     que su caja rodara — `.bd` estaba en `overflow:hidden`, que ahí solo
     servía para redondear las esquinas—. En el móvil eso recortaba media
     tabla: estado, fechas y responsable no se veían y no había manera de
     llegar a ellos. */
  .bd{overflow-x:auto}
  /* Todos los controles de la vista (buscar, agrupar, filtro, columnas,
     apuntes, nueva) cuelgan de un ÚNICO hijo del flex, así que el
     `flex-wrap` de la barra no tenía nada que partir: eran 821 px en línea
     recta que se llevaban la pantalla de lado. Se parten aquí dentro. */
  .bd-ctrl{flex-wrap:wrap;margin-left:0;width:100%}
  .bd-ctrl input{width:auto;flex:1 1 150px;min-width:0}
  .ficha-cab .portada-cont,.portada-cont{padding:18px;gap:12px;align-items:flex-start;flex-wrap:wrap}
  .portada h1{font-size:28px}.avc.xl{width:52px;height:52px;border-radius:12px}
  .portada-cont>.btn,.portada-cont .btn{flex:none}#preguntar{width:100%;justify-content:center}
  .props-linea{display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden;gap:2px 0}
  .props-linea .k{padding-left:0}.props-linea .v{max-width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:0}
  .at-fila{align-items:flex-start}.at-fila .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .secciones{grid-template-columns:minmax(0,1fr)}
  /* La fila de la papelera es el icono, el título, «quedan 30 días» y el botón
     de restaurar, todo en una línea que no se parte. La fecha y el botón se
     llevan 219 de los 349 px y al título le quedaban 104: «Sin respuesta de
     Jesús al correo del 11-ago…» salía en OCHO líneas de tres palabras, y el
     título en negrita se salía de su propia columna. El título se queda con la
     primera línea entera y la fecha y el botón bajan a la segunda. */
  /* La cabecera del registro es una fila que no se parte: el título y su
     explicación a la izquierda y los filtros a la derecha. Con 351 px el texto
     se quedaba 222 y a los filtros les sobraban 119, así que «Todo»,
     «Ficheros», «Tareas» y «Comentarios» caían uno debajo de otro en una
     columna estrecha y se comían 250 px de alto. Los filtros bajan a su propia
     línea y se reparten a lo ancho, que es como se leen. */
  .actividad-global .bloq-cab{flex-wrap:wrap}
  .actividad-filtros{flex:1 0 100%}
  /* Cortar a una línea tiene sentido en el escritorio, donde estas fichas van
     en varias columnas y las filas tienen que cuadrar. En el móvil van
     apiladas y a todo lo ancho, así que el corte no cuadra nada: solo esconde.
     En Inicio «Revisar campaña Google Ads Galixia (prim…» se dejaba 101 px de
     título sin enseñar, y en Salud el motivo de la avería —«nadie ha puesto la
     suya: no puede ejecutar»— se quedaba en «no puede ej…» por 23 px. El
     título de la bandeja se parte en dos líneas como mucho; el motivo, entero. */
  .bandeja-txt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .est-datos small{white-space:normal;overflow:visible;text-overflow:clip}
  /* Las carpetas se colocan con `auto-fill` y un mínimo de 190 px. En 354 px no
     caben dos, así que salía UNA columna a todo lo ancho y el dibujo de la
     carpeta —que va por proporción— se estiraba a 354×310: cada carpeta ocupaba
     363 px de alto y las ocho del proyecto pedían casi 2.900 px de scroll para
     leer ocho nombres. Dos por fila: el dibujo baja a 172×150. */
  .carpetas{grid-template-columns:1fr 1fr}
  .registro-fila{flex-wrap:wrap}
  .registro-txt{flex:1 1 calc(100% - 34px)}
  .registro-fila time{margin-top:0;align-self:center}
  .registro-fila>.btn{margin-left:auto}
  .docs{margin:-16px -18px -30px}
  .pag-col{padding-left:26px;padding-right:18px}.pag-titulo{font-size:28px;line-height:38px}
  /* Los 48 px de la izquierda son el canal donde salen el asa y el «+» de cada
     bloque, y solo salen al pasar el ratón por encima: en un móvil no aparecen
     nunca. La regla de arriba los recortaba, pero `.pag-col.desnuda` pesa más
     que `.pag-col` y se la saltaba, así que las páginas de texto —las reglas
     de la casa, la documentación— seguían con 48 px vacíos a la izquierda y
     CERO a la derecha: el texto acababa pegado al canto de la pantalla y
     descentrado. Se estrecha el canal y se equilibran los dos lados. */
  .pag{--canal:20px}
  .pag-col.desnuda{padding-right:10px}
  .chat{min-height:calc(100dvh - 155px)}
  .chat-caja{position:sticky;bottom:0;background:var(--panel);padding-bottom:max(10px,env(safe-area-inset-bottom))}
  /* En el móvil no hay sitio para una ventana flotante: la ficha ocupa todo. */
  .peek{width:100vw;height:100dvh;max-width:none;border:0;border-radius:0}
  .modal{max-height:88dvh}
}
@media(max-width:430px){
  .inicio-acciones{grid-template-columns:1fr !important}.inicio-acciones .btn{width:100%;min-width:0}
  .cabecera>.acciones:not(.inicio-acciones){flex-wrap:wrap}.cabecera>.acciones .btn{max-width:100%}
  .nota-producto{overflow:hidden}.nota-producto span{overflow-wrap:anywhere}
  /* Los filtros son una REJILLA, no un flex: `flex-wrap` y `flex` aquí no
     hacían nada y la rejilla seguía partiendo la fila en dos columnas de
     140 px. En ese ancho los desplegables se quedaban en «Todos los ser» y
     «Todos los est», que no dicen si filtras por servicio, por responsable o
     por estado. Una columna: cada filtro se lee entero. */
  .clientes-filtros{grid-template-columns:minmax(0,1fr)}
  .campo-busca{width:100%;min-width:0}
}

/* ── Portada del cliente ──────────────────────────────────────────────────
   Cada sección es una tarjeta con lo que tiene dentro. La navegación no puede
   vivir solo en un lateral que se pliega: si se pliega, desaparece. */
.portada{position:relative;border-radius:16px;overflow:hidden;margin:6px 0 18px}
.portada-fondo{position:absolute;inset:0;background:
  radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--tono) 26%, transparent), transparent 62%),
  linear-gradient(180deg, color-mix(in srgb, var(--tono) 11%, transparent), transparent)}
.portada-cont{position:relative;display:flex;align-items:center;gap:18px;padding:26px 26px 24px}
.portada h1{margin:0;font-size:28px;font-weight:680;letter-spacing:-.028em;line-height:1.12}
.portada-txt{flex:1;min-width:0;overflow:hidden}.portada h1{overflow-wrap:anywhere}.ficha-sub{overflow:hidden;text-overflow:ellipsis}
.portada .ficha-sub{margin-top:6px}
.avc.xl{width:66px;height:66px;border-radius:16px;font-size:22px;flex:none}
.ficha-av{border:0;padding:0;background:none;cursor:pointer;display:block;border-radius:16px}
.ficha-av:hover{opacity:.85}

/* Las propiedades van en una línea bajo el nombre, como en Notion, en vez de
   ocupar la mejor esquina de la pantalla con cinco "Vacío". */
.props-linea{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:0 0 16px}
.cliente-operativo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;margin:-4px 0 16px;background:var(--panel)}.cliente-operativo>div,.cliente-operativo>button{display:flex;flex-direction:column;gap:3px;padding:10px 13px;text-align:left;border-right:1px solid var(--linea);min-width:0}.cliente-operativo>:last-child{border-right:0}.cliente-operativo>button:hover{background:var(--hover)}.cliente-operativo span{font-size:11px;color:var(--tinta-3)}.cliente-operativo b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cliente-operativo .estado-rojo{color:var(--rojo)}.cliente-operativo .estado-azul{color:var(--azul)}.cliente-operativo .estado-verde{color:var(--verde)}
@media(max-width:800px){.cliente-operativo{grid-template-columns:repeat(2,minmax(0,1fr))}.cliente-operativo>:nth-child(2){border-right:0}.cliente-operativo>:nth-child(-n+2){border-bottom:1px solid var(--linea)}}
.props-linea .k{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  color:var(--tinta-3);padding:5px 6px 5px 8px;white-space:nowrap;border-radius:8px}
.props-linea .k svg{width:14px;height:14px;stroke-width:1.7}
.props-linea .v{padding:5px 9px;border-radius:8px;cursor:pointer;font-size:13px;
  min-height:28px;display:flex;align-items:center;gap:5px;margin-right:12px}
.props-linea .v:hover{background:var(--hover)}
.props-linea .v.vacia{color:var(--tinta-3)}
.props-linea .v input{border:0;background:none;outline:none;font-size:13px;padding:0;width:110px}
.aviso-sug{display:block;width:100%;text-align:left;font-size:13px;color:var(--ambar);
  background:var(--ambar-b);border-radius:8px;padding:8px 12px;margin-bottom:16px}
.aviso-sug:hover{filter:brightness(.97)}

.atencion{border:1px solid var(--rojo-b);background:var(--rojo-b);border-radius:12px;
  padding:12px 14px;margin-bottom:20px}
.at-cab{display:flex;align-items:baseline;gap:9px;font-size:13px;font-weight:680;
  color:var(--rojo);margin-bottom:7px}
.at-n{font-weight:400;opacity:.85}
.at-fila{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:5px 4px;
  border-radius:8px;font-size:14px;min-width:0}
.at-fila:hover{background:rgba(255,255,255,.5)}
.at-fila .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mensaje-acciones{display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin-top:5px;min-height:22px}
.mensaje-acciones button{border:1px solid transparent;border-radius:8px;padding:2px 6px;color:var(--tinta-3);
  font-size:12px;line-height:17px;background:transparent}
.mensaje-humano:not(:hover) .mensaje-acciones button:not(.reaccion){opacity:.2}
.mensaje-acciones button:hover{opacity:1!important;background:var(--hover);color:var(--tinta);border-color:var(--linea-2)}
.mensaje-acciones .reaccion{background:var(--fondo);border-color:var(--linea-2);opacity:1}
.mensaje-acciones .reaccion.mia{background:var(--azul-b);border-color:#b9cdfd;color:var(--azul)}
.mensaje-humano.eliminado{opacity:.66}
.mensaje-humano.eliminado .mensaje-texto{font-style:italic;color:var(--tinta-3)}
.menu-scroll{max-height:min(360px,60vh);overflow:auto;padding-right:3px}
.mensaje-adjuntos{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.mensaje-adjuntos a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;max-width:360px;padding:7px 9px;border:1px solid var(--linea-2);border-radius:8px;background:var(--fondo);color:var(--tinta)}
.mensaje-adjuntos a:hover{border-color:#b8bcc5;background:var(--hover)}.mensaje-adjuntos b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mensaje-adjuntos small{font-size:10px;color:var(--tinta-3)}
.mensaje-adjuntos a.mensaje-adjunto-img{display:block;padding:0;max-width:200px;overflow:hidden;background:none}.mensaje-adjunto-img img{display:block;max-width:200px;max-height:200px;object-fit:cover}
.mensaje-adjunto-audio{width:min(320px,100%);height:34px;margin-top:4px;display:block}
.mensaje-adjuntos:has(.mensaje-adjunto-audio){display:block}
/* Visor de luz para adjuntos del chat (imagen/PDF): se ven encima, sin pestaña nueva. */
.visor-luz{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:28px}
.visor-caja{position:relative;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;background:var(--panel);border-radius:12px;overflow:hidden;box-shadow:var(--sombra-alta)}
.visor-barra{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--linea);font-size:13px;color:var(--tinta)}
.visor-barra b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:680}
.visor-barra .visor-nueva,.visor-barra .visor-cerrar{display:grid;place-items:center;width:28px;height:28px;border:0;background:none;cursor:pointer;color:var(--tinta-3);border-radius:8px;text-decoration:none;flex:none}
.visor-barra .visor-nueva svg,.visor-barra .visor-cerrar svg{width:16px;height:16px}
.visor-barra .visor-nueva:hover,.visor-barra .visor-cerrar:hover{background:var(--fondo);color:var(--tinta)}
.visor-caja.img img{max-width:92vw;max-height:calc(92vh - 45px);object-fit:contain;display:block;background:#fff}
.visor-caja.pdf{width:min(1000px,92vw);height:92vh}
.visor-caja.pdf iframe{flex:1;width:100%;border:0;background:#fff}
.canal-compositor.soltando{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-b)}
.adjuntos-pendientes{display:flex;flex-wrap:wrap;gap:5px}.adjuntos-pendientes:empty{display:none}.adjuntos-pendientes>span{display:inline-flex;align-items:center;gap:5px;background:var(--azul-b);color:var(--azul);border-radius:8px;padding:3px 5px 3px 8px;font-size:11px}.adjuntos-pendientes button{font-size:16px;line-height:14px;color:inherit}
.preferencia-aviso{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer}.preferencia-aviso:hover{background:var(--hover)}.preferencia-aviso input{accent-color:var(--azul)}
/* Panel de avisos del sistema (avisos.js → montarAjustes): estado de ESTE
   aparato con su botón, y debajo qué te avisa. */
.avisos-ajustes{max-width:340px;padding:2px 2px 4px}
.avisos-aparato{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;font-size:13px;line-height:1.45;color:var(--tinta-2)}
.avisos-estado{min-width:0}
.avisos-hueco{min-width:280px}
.avisos-punto{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--tinta-3)}
.avisos-aparato.si .avisos-punto{background:var(--verde)}
.avisos-aparato.no .avisos-punto{background:var(--rojo)}
.avisos-botones{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 6px}
.avisos-botones:empty{display:none}
.avisos-sub{font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);padding:10px 10px 2px}
.avisos-sub small{text-transform:none;letter-spacing:0;font-weight:400}
.avisos-ajustes .preferencia-aviso{align-items:flex-start}
.avisos-ajustes .preferencia-aviso input{margin-top:3px}
.avisos-ajustes .preferencia-aviso small{display:block;font-size:11px;color:var(--tinta-3)}
.est-notificaciones{padding:6px;border-radius:12px;background:var(--panel);border:1px solid var(--linea-2)}
.est-notificaciones .avisos-ajustes{max-width:520px}
.contexto-panel{padding:14px;display:grid;gap:8px;overflow:auto}.contexto-cliente{display:flex;align-items:center;gap:10px;padding:4px 2px 12px;border-bottom:1px solid var(--linea)}.contexto-cliente>div{display:flex;flex-direction:column}.contexto-cliente span{font-size:11px;color:var(--tinta-3);text-transform:capitalize}.contexto-bloque{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid var(--linea-2);border-radius:8px;text-align:left}.contexto-bloque span{font-size:12px;color:var(--tinta-3)}.contexto-bloque b{font-size:13px}.contexto-bloque.accion:hover{background:var(--hover);border-color:#b8bcc5}
.persona-av.es-agente{border-radius:8px;color:#fff}.canal-ayuda select{max-width:210px;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);padding:4px 7px;font-size:12px;color:var(--tinta-2)}
.ejecuciones{margin-top:28px}.ejecucion-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid var(--linea)}.ejecucion-fila>div{display:flex;flex-direction:column;min-width:0}.ejecucion-fila b{font-size:13px}.ejecucion-fila small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-3)}.ejecucion-fila time{font-size:10px;color:var(--tinta-3)}
@media(max-width:650px){.ejecucion-fila{grid-template-columns:auto minmax(0,1fr) auto}.ejecucion-fila time{display:none}.ejecucion-fila>.btn{grid-column:2/4;justify-self:start}}
.acceso-agente-fila{display:flex;align-items:center;gap:8px;padding:7px 9px;min-width:300px}.acceso-agente-fila>div{display:flex;flex-direction:column;min-width:0;flex:1}.acceso-agente-fila b{font-size:12px}.acceso-agente-fila small{font-size:10px;color:var(--tinta-3)}
.doc-pref-ico{width:17px;text-align:center;color:var(--tinta-3);font-size:12px;flex:none}
.vistas-rapidas{display:flex;gap:5px;flex-wrap:wrap;margin:-5px 0 14px}.vistas-rapidas .activo{background:var(--tinta);color:var(--panel);border-color:var(--tinta)}
.historial-autom>div{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;padding:8px 10px;min-width:340px;border-bottom:1px solid var(--linea)}.historial-autom small{grid-column:2;color:var(--tinta-3);max-width:280px;white-space:normal}.historial-autom b{font-size:12px}

/* Tres columnas como mucho: con auto-fill en pantalla ancha salían cinco y la
   sexta tarjeta se quedaba sola en la fila de abajo. */
/* minmax(0,...) y no 1fr a secas: 1fr respeta el ancho mínimo del contenido, y
   una tarea con un título largo empujaba su columna al triple que las demás. */
.secciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cliente-grupo{margin-top:30px}.cliente-grupo-cab{display:flex;align-items:flex-end;margin-bottom:11px}.cliente-grupo-cab h2{font-size:14px;margin:0}.cliente-grupo-cab p{font-size:12px;color:var(--tinta-3);margin:3px 0 0}.secciones-operaciones .secc{background:var(--panel-2);box-shadow:none}
.proyecto-v2{max-width:1180px;margin:0 auto;padding:25px 38px 70px}.proyecto-cab{display:flex;align-items:center;gap:13px;padding-bottom:20px}.proyecto-cab>.ficha-av{margin:0}.proyecto-cab>.ficha-av .avc{width:46px;height:46px;border-radius:12px}.proyecto-cab>div:nth-child(2){flex:1;min-width:0}.proyecto-cab h1{font-size:28px;margin:2px 0 5px;line-height:1.2}.proyecto-supra{display:flex;align-items:center;gap:6px;color:var(--tinta-3);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.proyecto-supra .punto{width:7px;height:7px;border-radius:4px;background:var(--acento)}.proyecto-supra span:last-child{margin-left:2px}.proyecto-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.proyecto-meta>span:not(.pill){font-size:11px;color:var(--tinta-3);padding:2px 6px;border:1px solid var(--linea);border-radius:4px}.proyecto-franja{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);overflow:hidden}.proyecto-franja>button{padding:11px 13px;border-right:1px solid var(--linea);text-align:left;width:100%}.proyecto-franja>button:last-child{border-right:0}.proyecto-franja>button:hover{background:var(--hover)}.proyecto-franja span,.proyecto-franja b{display:block}.proyecto-franja span{font-size:10px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.03em}.proyecto-franja b{font-size:16px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.proyecto-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:18px;margin-top:20px;align-items:start}.proyecto-layout main,.proyecto-layout aside{display:flex;flex-direction:column;gap:18px}.proyecto-bloque{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);padding:15px}.proyecto-bloque .bloq-cab>div{flex:1}.proyecto-bloque .bloq-cab h2{font-size:14px}.proyecto-bloque .bloq-cab p{font-size:11px;color:var(--tinta-3);margin:3px 0 0}.proyecto-tareas{margin:8px -5px -5px}.proyecto-tareas>button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 7px;border-top:1px solid var(--linea);text-align:left}.proyecto-tareas>button:hover{background:var(--hover)}.proyecto-tareas .pt{width:8px;height:8px;border-radius:50%;flex:none}.proyecto-tareas>button>span{flex:1;min-width:0}.proyecto-tareas b,.proyecto-tareas small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.proyecto-tareas b{font-size:13px;font-weight:550}.proyecto-tareas small{font-size:11px;color:var(--tinta-3);margin-top:3px}.proyecto-tareas em{font-style:normal}.proyecto-actividad{margin-top:8px}.proyecto-actividad>div{display:flex;gap:12px;padding:9px 3px;border-top:1px solid var(--linea)}.proyecto-actividad>div>span{width:34px;color:var(--tinta-3);font-size:10px;flex:none}.proyecto-actividad>div>div{min-width:0}.proyecto-actividad b,.proyecto-actividad small{display:block}.proyecto-actividad b{font-size:12px}.proyecto-actividad small{font-size:11px;color:var(--tinta-3);margin-top:3px}.proyecto-vacio{padding:22px;text-align:center;color:var(--tinta-3);font-size:12px}.proyecto-props .props-linea{display:grid;grid-template-columns:minmax(90px,.75fr) 1fr;margin:8px 0 0;padding:0;border:0;background:none}.proyecto-props .props-linea>.k,.proyecto-props .props-linea>.v{padding:7px 2px;border-bottom:1px solid var(--linea);font-size:11px;min-width:0}.proyecto-recursos{margin:7px -5px -5px}.proyecto-recursos>button{display:flex;align-items:center;gap:9px;width:100%;padding:10px 7px;border-top:1px solid var(--linea);text-align:left}.proyecto-recursos>button:hover{background:var(--hover)}.proyecto-recursos>button>span:first-child{width:28px;height:28px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;flex:none}.proyecto-recursos svg{width:14px;height:14px}.proyecto-recursos>button>div{flex:1;min-width:0}.proyecto-recursos b,.proyecto-recursos small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.proyecto-recursos b{font-size:12px}.proyecto-recursos small{font-size:10px;color:var(--tinta-3);margin-top:2px}.proyecto-recursos em{font-style:normal;font-size:11px;color:var(--tinta-3)}.proyecto-recursos>button>i{font-style:normal;color:var(--tinta-3);font-size:16px}
/* La ficha no cabía en su propio ancho: la columna de la derecha tenía un
   mínimo de 300 px que no se podía negociar, y ni la etiqueta ni el valor de
   cada propiedad podían encoger. Salía barra de scroll horizontal, la última
   pastilla de servicios quedaba cortada y «Cuota mensual» se solapaba con su
   valor. Ahora todo encoge y lo que no cabe se parte o se recorta. */
.proyecto-props .props-linea>.k{display:flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proyecto-props .props-linea>.v{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  overflow-wrap:anywhere}
.proyecto-props .props-linea>.v .pill{max-width:100%}
/* Y por debajo de 1080 px de HUECO se apila: dos columnas de 400 px no son dos
   columnas, son dos churros. Se mide el hueco, no la ventana: con el panel de
   IA abierto la ventana sigue siendo ancha y la ficha no. Una media query
   miraba la pantalla y por eso no se enteraba. */
.proyecto-v2{container-type:inline-size}
@container (max-width:1080px){.proyecto-layout{grid-template-columns:minmax(0,1fr)}}
/* `1fr` a secas no encoge por debajo del contenido más ancho que haya dentro:
   hay que decirle que puede llegar a cero. Sin esto, apilar no arreglaba nada. */
.proyecto-layout>main,.proyecto-layout>aside{min-width:0}
.proyecto-franja>button{min-width:0}
/* Las etiquetas de la franja son palabras largas en mayúsculas —AUTOMATIZACIONES,
   PRÓXIMA FECHA—, y en cinco columnas se montan una encima de otra en cuanto el
   hueco baja de unos 840 px. Pasaba con el panel de IA abierto: la ventana
   seguía siendo ancha, así que la media query de 900 px no se enteraba. Se mide
   el hueco, igual que en el resto de la ficha. */
@container (max-width:840px){
  .proyecto-franja{grid-template-columns:repeat(3,1fr)}
  .proyecto-franja>button{border-bottom:1px solid var(--linea)}
  .proyecto-franja>button:nth-child(3n){border-right:0}
  .proyecto-franja>button:nth-last-child(-n+2){border-bottom:0}
}
@container (max-width:560px){
  .proyecto-franja{grid-template-columns:repeat(2,1fr)}
  .proyecto-franja>button:nth-child(even){border-right:0}
  .proyecto-franja>button:nth-child(3n){border-right:1px solid var(--linea)}
}
@media(max-width:900px){.proyecto-v2{padding:20px 18px 65px}.proyecto-layout{grid-template-columns:minmax(0,1fr)}.proyecto-franja{grid-template-columns:repeat(3,1fr)}.proyecto-franja>button{border-bottom:1px solid var(--linea)}}@media(max-width:620px){.proyecto-cab{align-items:flex-start;flex-wrap:wrap}.proyecto-cab>.acciones{width:100%}.proyecto-franja{grid-template-columns:1fr 1fr}.proyecto-franja>button:nth-child(even){border-right:0}
  /* EL NOMBRE DEL CLIENTE SE ESCRIBÍA ENCIMA DEL ANILLO DE PROGRESO.
     `.proyecto-quien` declara `min-width:180px` para que la columna del nombre
     no se hunda, pero `.proyecto-cab>div:nth-child(2){min-width:0}` le gana por
     especificidad y ese suelo no existía. Con el avatar y el anillo sin encoger,
     al nombre le quedaban 99 px de los 307: «Premiumdrinks» necesita 198 y, como
     no recorta, los glifos se pintaban por encima del anillo y se leía
     «Premium…s». Aquí hace falta el selector con la clase para empatar en
     especificidad y ganar por orden.
     El nombre pasa a ocupar su propia línea entera, y el avatar y el anillo se
     reparten la de arriba —uno a cada lado—, que ahorra los 90 px de alto que
     costaba mandar el anillo solo a una tercera fila. */
  .proyecto-cab>div.proyecto-quien{flex:1 1 100%;order:1}
  .proyecto-cab>.proyecto-anillo{margin-left:auto}
  .proyecto-cab>.proyecto-acciones,.proyecto-cab>.proyecto-hallazgos,
  .proyecto-cab>.proyecto-ficha{order:2}}
@media(max-width:1150px){.secciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.secciones{grid-template-columns:minmax(0,1fr)}}
.secc{border:1px solid var(--linea-2);border-radius:12px;padding:14px 16px 13px;text-align:left;
  background:var(--panel);display:flex;flex-direction:column;gap:9px;min-height:118px;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.secc:hover{border-color:#c6c8ce;box-shadow:var(--sombra);transform:translateY(-1px)}
.secc-cab{display:flex;align-items:center;gap:9px}
.secc-cab .t{font-size:14px;font-weight:680}
.secc-cab .n{font-size:12px;font-weight:680;color:var(--tinta-3);background:var(--gris-b);
  border-radius:16px;padding:1px 8px;font-variant-numeric:tabular-nums}
.secc-cab .fl{margin-left:auto;color:var(--tinta-3);font-size:16px}
.secc:hover .fl{color:var(--tinta)}
.secc-cuerpo{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tinta-2);
  min-width:0;overflow:hidden}
.secc-cuerpo .li{display:flex;align-items:center;gap:6px;min-width:0;line-height:1.5}
.secc-cuerpo .li > .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.secc-cuerpo .li .sub{color:var(--tinta-3);flex:none;font-size:12px}
.secc-cuerpo .li svg{width:12px;height:12px;flex:none;color:var(--tinta-3)}
.secc-cuerpo .li .f{color:var(--tinta-3);font-variant-numeric:tabular-nums;flex:none}
.secc-cuerpo .pt{width:6px;height:6px;border-radius:50%;flex:none;background:var(--tinta-3)}
.secc-cuerpo .pt.rojo{background:var(--rojo)}.secc-cuerpo .pt.azul{background:var(--azul)}

/* Estas reglas viven después de la portada base para que la cascada móvil no
   quede anulada por las definiciones de escritorio declaradas más abajo. */
@media(max-width:700px){
  .riel{gap:0}
  .portada-cont{padding:18px;gap:12px;align-items:flex-start;flex-wrap:wrap}
  .portada h1{font-size:28px;line-height:1.15;overflow-wrap:anywhere}
  .portada-txt{min-width:calc(100% - 64px)}
  .portada #preguntar{width:100%;justify-content:center}
  .props-linea{display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden;gap:2px 0}
  .props-linea .k{padding-left:0}
  .props-linea .v{max-width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:0}
  .aviso-sug{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.secc-cuerpo .pt.ambar{background:var(--ambar)}.secc-cuerpo .pt.verde{background:var(--verde)}
.secc-cuerpo .vac{color:var(--tinta-3)}
.props-linea .v[contenteditable]:empty::before{content:attr(data-vacio);color:var(--tinta-3)}
.props-linea .v[contenteditable]:focus{background:var(--panel-2);outline:none;box-shadow:0 0 0 2px var(--linea-2)}
.acortar-lista{max-height:52vh;overflow-y:auto;border:1px solid var(--linea-2);border-radius:12px}
.acortar-fila{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid var(--linea);cursor:pointer}
.acortar-fila:last-child{border-bottom:0}
.acortar-fila:hover{background:var(--hover)}
.acortar-fila input{margin-top:3px;flex:none}
.acortar-fila .txt{min-width:0}
.acortar-fila .nuevo{font-size:13px;line-height:1.4}
.acortar-fila .resto{font-size:12px;color:var(--tinta-3);line-height:1.4;margin-top:2px}
.pag-scroll.soltando{box-shadow:inset 0 0 0 2px var(--azul);border-radius:8px}
/* Bloques seleccionados en conjunto (arrastrar por encima de varios) */
.bk.multi{background:var(--azul-b);border-radius:4px}
.bk.multi .bk-cuerpo{background:transparent}
.versiones-doc>header>div:first-child{min-width:0}.versiones-doc>header small{display:block;color:var(--tinta-3);font-size:11px;margin-top:3px}.versiones-doc-lista{padding:8px 14px;overflow:auto;flex:1}.versiones-doc-lista article{display:grid;grid-template-columns:62px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:11px 3px;border-bottom:1px solid var(--linea)}.versiones-doc-lista article>div{display:flex;flex-direction:column;min-width:0}.versiones-doc-lista article>div>b{font-size:12px}.versiones-doc-lista article small,.versiones-doc-lista article span{font-size:10px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.version-num b{color:var(--azul)}.version-preview{position:absolute;inset:55px 0 0;background:var(--panel);z-index:2;display:flex;flex-direction:column}.version-preview[hidden]{display:none}.version-preview>header{padding:10px 16px;border-bottom:1px solid var(--linea);display:flex;align-items:center;justify-content:space-between}.version-preview>pre{margin:0;padding:18px;overflow:auto;white-space:pre-wrap;font:12px/1.65 var(--mono,monospace);color:var(--tinta-2)}
@media(max-width:620px){.versiones-doc-lista article{grid-template-columns:48px minmax(0,1fr) auto}.versiones-doc-lista .ver-version{display:none}.versiones-doc-lista .restaurar-version{grid-column:2/4;justify-self:start}}
.pistas{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pista{font-size:12px;color:var(--tinta-3);background:var(--panel-2);border:1px dashed var(--linea-2);
  border-radius:8px;padding:4px 9px;text-align:left;max-width:100%}
.pista:hover{background:var(--hover);color:var(--tinta-2)}
.pista b{font-weight:680;color:var(--tinta-2)}
.grupos-equipo{margin-bottom:24px}.grupos-equipo>.bloq-cab{margin-bottom:8px}.grupos-equipo>div:last-child{display:flex;gap:8px;overflow:auto;padding-bottom:3px}.grupos-equipo>div>button{min-width:240px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid var(--linea-2);border-radius:8px;text-align:left;background:var(--panel)}.grupos-equipo>div>button:hover{border-color:#b8bcc5;background:var(--hover)}.grupo-av{width:32px;height:32px;border-radius:8px;background:var(--azul-b);color:var(--azul);display:grid;place-items:center;font-size:11px;font-weight:680}.grupos-equipo button>span:nth-child(2){min-width:0}.grupos-equipo button b,.grupos-equipo button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grupos-equipo button b{font-size:12px}.grupos-equipo button small{font-size:10px;color:var(--tinta-3);margin-top:3px}.grupos-equipo button i{font-style:normal;color:var(--tinta-3)}
.backup-lista{border:1px solid var(--linea-2);border-radius:12px;overflow:hidden}.backup-lista>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linea)}.backup-lista>div:last-child{border:0}.backup-lista b{font-size:12px}.backup-lista small{font-size:11px;color:var(--tinta-3)}
.salto-contenido{position:fixed;left:12px;top:-60px;z-index:9999;background:var(--tinta);color:var(--panel);padding:9px 13px;border-radius:8px}.salto-contenido:focus{top:12px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.informe-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;margin-bottom:26px}.informe-kpis>div{padding:14px;border-right:1px solid var(--linea);display:flex;flex-direction:column}.informe-kpis>div:last-child{border:0}.informe-kpis span{font-size:10px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.03em}.informe-kpis b{font-size:28px;margin:5px 0 2px}.informe-kpis small{font-size:11px;color:var(--tinta-3)}.informe-tabla .bloq-cab p{font-size:11px;color:var(--tinta-3);margin:3px 0 0}.informe-tabla tbody tr{cursor:pointer}.informe-tabla tbody tr:hover{background:var(--hover)}.informe-cliente{display:flex;align-items:center;gap:8px;white-space:nowrap}@media(max-width:900px){.informe-kpis{grid-template-columns:repeat(2,1fr)}.informe-kpis>div{border-bottom:1px solid var(--linea)}}@media(max-width:560px){.informe-kpis{grid-template-columns:minmax(0,1fr)}.informe-kpis>div{border-right:0}}
.reuniones{max-width:1080px;margin:0 auto;padding:26px 38px 70px}.reunion-resumen{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;margin:4px 0 22px}.reunion-resumen>div{padding:12px 15px;border-right:1px solid var(--linea);display:flex;flex-direction:column}.reunion-resumen>div:last-child{border:0}.reunion-resumen b{font-size:22px}.reunion-resumen span{font-size:11px;color:var(--tinta-3)}.reuniones-lista{border:1px solid var(--linea-2);border-radius:12px;overflow:hidden}.reuniones-lista>button{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;padding:12px 14px;border-bottom:1px solid var(--linea);text-align:left}.reuniones-lista>button:last-child{border:0}.reuniones-lista>button:hover{background:var(--hover)}.reuniones-lista>button>span:nth-child(2){min-width:0}.reuniones-lista>button>span:nth-child(2)>b,.reuniones-lista>button>span:nth-child(2)>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reuniones-lista>button>span:nth-child(2)>b{font-size:13px}.reuniones-lista>button>span:nth-child(2)>small{font-size:11px;color:var(--tinta-3);margin-top:3px}.reuniones-lista>button>i{font-style:normal;color:var(--tinta-3);font-size:18px}.reunion-icono{width:44px;height:44px;border-radius:12px;background:#f2edff;color:#7048c8;display:grid;place-items:center;font-size:18px}.reunion-detalle textarea{width:100%;resize:vertical;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel-2);padding:10px;font:12px/1.55 var(--sans);margin:9px 0}.reunion-resumen-texto{font-size:13px;line-height:1.65;color:var(--tinta-2)}.acuerdos-lista{display:grid;margin-top:9px}.acuerdos-lista label{display:flex;align-items:flex-start;gap:9px;padding:9px 3px;border-top:1px solid var(--linea)}.acuerdos-lista input{margin-top:3px;accent-color:var(--azul)}.acuerdos-lista span{min-width:0}.acuerdos-lista b,.acuerdos-lista small{display:block}.acuerdos-lista b{font-size:12px}.acuerdos-lista small{font-size:11px;color:var(--tinta-3);margin-top:3px}@media(max-width:620px){.reuniones{padding:18px}.reunion-resumen{grid-template-columns:minmax(0,1fr)}.reunion-resumen>div{border-right:0;border-bottom:1px solid var(--linea)}.reuniones-lista>button{grid-template-columns:40px minmax(0,1fr) auto}.reuniones-lista .pill{display:none}}

/* Automatizaciones: procedencia del estado y motivo. El estado que dice n8n no
   se marca (es lo esperado); se marca el que puso una persona o el que solo
   está escrito en un documento, que puede llevar meses sin comprobarse. */
.autom-fuente{margin-left:6px;font-size:11px;color:var(--tinta-3);white-space:nowrap}
.autom-motivo{margin:0 0 14px;padding:8px 12px;border-radius:8px;
  background:var(--panel-2);color:var(--tinta-2);font-size:13px;line-height:1.45}

/* Confirmación masiva de fichas de cliente */
.pista-cliente{margin:14px 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3)}
.pista-cliente:first-child{margin-top:0}
.acortar-fila.ambigua{background:var(--ambar-b)}

/* Avisos breves ("hecho"), abajo a la derecha y sin bloquear nada */
.avisos-flotantes{position:fixed;bottom:20px;right:20px;z-index:900;
  display:flex;flex-direction:column;gap:8px;pointer-events:none}
.aviso-flotante{padding:10px 16px;border-radius:var(--r-chip);background:var(--tinta-2);
  color:var(--lienzo);font-size:13px;box-shadow:var(--sombra-alta);
  animation:aviso-entra .18s ease-out}
.aviso-flotante.saliendo{opacity:0;transition:opacity .25s}
.aviso-flotante{display:flex;align-items:center;gap:14px}
.aviso-deshacer{color:var(--panel);font-weight:680;font-size:13px;text-decoration:underline;
  text-underline-offset:3px;flex:none}
/* La caja no recibe clics, para no tapar lo de debajo, pero sus botones sí: con
   el `pointer-events:none` heredado, «Deshacer» y «Recargar» no hacían nada. */
.aviso-flotante button{pointer-events:auto;cursor:pointer}
/* Los avisos se anclan 20 px por encima del borde de la ventana, que en el
   escritorio es sitio libre y en el móvil es justo donde está la barra de
   navegación: «Hay una versión nueva» tapaba 38 de los 58 px de la fila de
   Inicio, Clientes, Tareas… y no se podía cambiar de pantalla hasta que el
   aviso se iba solo. Se suben por encima de la barra y ocupan el ancho, que a
   390 px un aviso con botón no cabe en una línea.
   Esta regla TIENE que ir aquí, después de la de arriba: ya existía dentro del
   bloque de móvil, pero ese bloque está antes en el fichero y `bottom:20px` lo
   pisaba, así que el arreglo estaba escrito y no hacía nada. */
@media(max-width:700px){
  /* `--suelo` lo mide `base.js`: es lo que ocupa AHORA MISMO lo que va pegado
     abajo —la barra de secciones, o el compositor de la conversación, que crece
     con el texto y sube entero cuando aparece el teclado—. La reserva fija de
     58 px solo servía para la barra: en una conversación el aviso caía sobre la
     caja de escribir y tapaba el botón de enviar.
     `--suelo` se mide desde el borde de la pantalla, así que ya lleva dentro el
     margen del iPhone (la barra mide 58 + ese margen). Sumarlo otra vez dejaba
     34 px de aire muerto entre el aviso y la barra. Solo cuenta en la reserva
     de por si aún no se ha medido. */
  .avisos-flotantes{left:12px;right:12px;align-items:stretch;
    bottom:calc(var(--suelo, calc(58px + env(safe-area-inset-bottom))) + 12px)}
}
/* Los avisos `arriba` (versión nueva): una franja fina arriba del todo en el
   móvil, que no tapa ni el compositor ni los menús ni los botones de abajo. */
.aviso-cerrar{flex:none;margin-left:auto;width:28px;height:28px;display:grid;place-items:center;
  border-radius:999px;color:var(--lienzo);opacity:.8;font-size:13px}
.aviso-cerrar:hover{opacity:1;background:rgba(255,255,255,.12)}
.aviso-flotante:has(.aviso-cerrar) .aviso-deshacer{margin-left:auto}
.aviso-flotante:has(.aviso-cerrar) .aviso-deshacer + .aviso-cerrar{margin-left:0}
@media(max-width:700px){
  /* Debajo de la barra de arriba (`--chrome`, que mide app.js), no encima: tapaba
     el botón del lateral y la campana. Solo sus botones reciben toques. */
  .avisos-flotantes.arriba{top:calc(var(--chrome, 56px) + 6px);bottom:auto;left:12px;right:12px;align-items:stretch}
  .avisos-flotantes.arriba .aviso-flotante{padding:6px 6px 6px 14px;font-size:12px;border-radius:12px}
  /* «Recargar», «Deshacer» y la ✕ medían 22 y 28 px de alto: el aviso se iba
     solo antes de acertar con el pulgar. El área de toque crece; el dibujo no. */
  .aviso-flotante .aviso-deshacer{min-height:40px;padding:0 8px}
  .aviso-cerrar{width:40px;height:40px}
}
/* Avisos de mensaje directo: tarjeta abajo a la IZQUIERDA, con la foto de quien
   escribe y un extracto. A la derecha ya viven los avisos genéricos; estos van
   al otro lado para no pisarse. */
.avisos-directos{position:fixed;bottom:20px;left:20px;z-index:900;
  display:flex;flex-direction:column;gap:8px;max-width:320px}
.aviso-directo{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 13px;border-radius:12px;background:var(--panel);border:1px solid var(--linea-2);
  box-shadow:var(--sombra-alta);cursor:pointer;animation:aviso-entra .18s ease-out}
.aviso-directo:hover{background:var(--hover)}
.aviso-directo.saliendo{opacity:0;transition:opacity .25s}
.aviso-directo-cara{width:36px;height:36px;border-radius:50%;flex:none;position:relative;
  display:grid;place-items:center;overflow:hidden;
  background:var(--primario);color:var(--primario-txt);font-size:11px;font-weight:680}
.aviso-directo-cara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aviso-directo-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.aviso-directo-txt b{font-size:13px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aviso-directo-txt small{font-size:12px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
  /* Igual que los avisos genéricos: sobre lo que haya pegado abajo AHORA
     (`--suelo`), no sobre una barra de 58 px fija. Dentro de una conversación
     el aviso de un directo caía encima de la caja de escribir. */
  .avisos-directos{left:12px;right:12px;max-width:none;
    bottom:calc(var(--suelo, calc(58px + env(safe-area-inset-bottom))) + 12px)}
}
/* Borrar es rojo y es una papelera. La ✕ de antes se leía como «cerrar». */
.lat-icono.peligro{color:var(--rojo)}
.lat-icono.peligro:hover{background:var(--rojo-b);color:var(--rojo)}
.papelera-lista{padding:6px 0}
.papelera-lista article{display:flex;align-items:center;gap:10px;padding:10px 4px;
  border-bottom:1px solid var(--linea)}
.papelera-lista article:last-child{border-bottom:0}
.papelera-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.papelera-txt b{font-size:14px;font-weight:550;color:var(--tinta)}
.papelera-txt small{font-size:12px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Soltar un fichero encima de una carpeta */
.nav-item.doc.sobre{background:var(--acento-b);box-shadow:inset 0 0 0 1px var(--acento-borde)}
/* Mientras se arrastra un documento, las carpetas dejan de parecer filas de
   una lista y se ven como lo que son en ese momento: sitios donde soltar. Sin
   esto había que acertar a ciegas — el único aviso llegaba al pasar justo por
   encima, y de ahí salió un panel movido sin querer. */
#lateral.arrastrando .nav-item.doc[data-carpeta],
#lateral.arrastrando .soltar-raiz{box-shadow:inset 0 0 0 1px var(--linea-2);background:var(--panel-2)}
#lateral.arrastrando .nav-item.doc[data-doc]{opacity:.45}
/* La raíz no es una fila del árbol, así que no había dónde soltar para sacar
   algo de su carpeta: había que ir al menú. Esta solo existe mientras dura el
   gesto. */
.soltar-raiz{display:none}
#lateral.arrastrando .soltar-raiz{display:flex;color:var(--tinta-2);font-style:italic}
.nav-item.doc[draggable="true"]{cursor:default}
.nav-buscar .accion svg{width:14px;height:14px}
.conflicto-caras{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.conflicto-caras b{display:block;font-size:12px;font-weight:680;color:var(--tinta-2);margin-bottom:6px}
.conflicto-caras pre{max-height:240px;overflow:auto;background:var(--panel-2);border:1px solid var(--linea);
  border-radius:8px;padding:10px;font-family:var(--mono);font-size:11px;line-height:1.5;white-space:pre-wrap}
@media(max-width:700px){.conflicto-caras{grid-template-columns:minmax(0,1fr)}}
.atajos-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:16px}
.atajos-cols h4{font-size:11px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 10px}
.atajo{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;font-size:13px;color:var(--tinta-2)}
.atajo kbd{flex:none;min-width:62px;font-family:inherit;font-size:12px;font-weight:550;color:var(--tinta);
  background:var(--panel-2);border:1px solid var(--linea-2);border-radius:4px;padding:2px 6px;text-align:center}
.menu-item kbd{margin-left:auto;font-family:inherit;font-size:11px;color:var(--tinta-3)}
/* Qué ficheros se movieron mientras la IA contestaba */
.copi-ficheros{margin-top:12px;padding-top:10px;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.copi-ficheros b{font-size:11px;font-weight:680;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:2px}
.copi-ficheros button{display:flex;align-items:center;gap:7px;max-width:100%;
  padding:4px 8px;border-radius:8px;font-size:12px;color:var(--tinta-2);background:var(--panel-2)}
.copi-ficheros button:hover{background:var(--activo);color:var(--tinta)}
.copi-ficheros button svg{width:13px;height:13px;flex:none;opacity:.7}
.copi-ficheros button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copi-ficheros button i{font-style:normal;font-size:11px;color:var(--rojo);flex:none}
.copi-ficheros button.ido span{text-decoration:line-through;opacity:.7}
/* Lo que espera por ti, en una línea. Antes eran tres ceros en una franja. */
.actividad-espera{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-radius:12px;background:var(--acento-b);
  border:1px solid var(--acento-borde);margin-bottom:24px;font-size:14px;color:var(--tinta-2)}
.actividad-espera b{font-size:16px;font-weight:680;color:var(--acento)}
.actividad-espera b:not(:first-child){margin-left:14px}
/* Tabla de clientes: alto de fila estable y números alineados por la coma. */
.tabla-clientes td{vertical-align:middle}
.tabla-clientes td .pill{vertical-align:middle}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla .num b{font-weight:680;color:var(--tinta)}
.sin-importar{font-size:12px;color:var(--tinta-3)}
.clientes-filtros .vistas-rapidas{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.clientes-filtros .limpiar{color:var(--tinta-3)}
.clientes-filtros .limpiar svg{width:12px;height:12px}

/* Una pregunta de la IA. No se pinta como un mensaje: mientras esté ahí hay una
   ejecución PARADA esperándote, así que tiene el peso de algo que hay que
   hacer. Borde a los cuatro lados y fondo propio, no una franja de color a un
   lado: la franja descuadra la tarjeta respecto a los mensajes de al lado. */
.copi-pregunta{margin:var(--e3) 0;padding:var(--e4);border-radius:12px;
  background:var(--acento-b);border:1px solid var(--acento-borde)}
.copi-pregunta>b{display:block;font-size:14px;font-weight:550;line-height:1.5}
.copi-pregunta.caducada{background:var(--panel)}
.copi-pregunta-nota{display:flex;align-items:center;gap:var(--e2);margin-bottom:var(--e2);
  font-size:11px;color:var(--tinta-3)}
.copi-pregunta-descartar{margin-left:auto;border:0;background:none;padding:0;font-size:11px;
  color:var(--tinta-3);text-decoration:underline;cursor:pointer}
.copi-opciones{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e3)}
.copi-opciones button{display:block;width:100%;text-align:left;padding:10px 12px;
  border:1px solid var(--acento-borde);border-radius:8px;background:var(--panel);cursor:pointer}
.copi-opciones button:hover{border-color:var(--acento)}
.copi-opciones button:disabled{opacity:.5;cursor:default}
.copi-opciones span{display:block;font-size:13px;font-weight:550;color:var(--tinta)}
.copi-opciones small{display:block;font-size:11px;color:var(--tinta-3);margin-top:2px;line-height:1.45}
.copi-pregunta-libre{display:flex;gap:var(--e2);margin-top:var(--e3)}
.copi-pregunta-libre input{flex:1;min-width:0;padding:8px 10px;font-size:13px;
  border:1px solid var(--acento-borde);border-radius:8px;background:var(--panel)}

/* El rastro de una ejecución, plegado. */
.ejec-rastro{margin-top:var(--e2)}
.ejec-rastro>summary{font-size:11px;color:var(--tinta-3);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:4px}
.ejec-rastro>summary::-webkit-details-marker{display:none}
.ejec-rastro>summary::before{content:"▸";font-size:10px}
.ejec-rastro[open]>summary::before{content:"▾"}
.ejec-rastro>summary:hover{color:var(--tinta-2)}
.ejec-pasos{margin:var(--e2) 0 0;padding-left:18px;font-size:12px;color:var(--tinta-2)}
.ejec-pasos li{margin:3px 0;line-height:1.5}
.ejec-pasos b{font-weight:550;color:var(--tinta)}
.ejec-pasos span{color:var(--tinta-3);margin-left:6px;font-family:var(--mono);font-size:11px}
.ejec-salida{margin:var(--e2) 0 0;padding:var(--e3);border-radius:8px;background:var(--panel-2);
  border:1px solid var(--linea);font-size:12px;line-height:1.6;color:var(--tinta-2);white-space:pre-wrap}

/* ─── La carpeta de un agente ────────────────────────────────────────────
   A la izquierda lo que tiene, a la derecha lo que dice. Las marcas de la lista
   —«cargado», «suyo»— son la información que no está en el disco y sin la cual
   la lista es solo nombres de fichero. */
.agente-carpeta{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:var(--e4);align-items:start}
/* El árbol se queda fijo al bajar por el documento. Un playbook de 130 líneas
   deja la lista de ficheros arriba del todo y para cambiar de documento hay que
   subir entero; con esto sigue ahí. El `top` cuenta la altura del chrome, que ya
   está publicada como variable, y el `max-height` es lo que impide que un árbol
   largo se salga por abajo sin poder desplazarse. */
.agente-carpeta > aside{position:sticky;top:calc(var(--chrome,94px) + var(--e3));
  max-height:calc(100vh - var(--chrome,94px) - var(--e6));display:flex;flex-direction:column}
.agente-carpeta > aside .agente-arbol{overflow-y:auto;min-height:0;flex:1}
/* El árbol de la carpeta reusa `.nav-item.doc` del lateral de un cliente: la
   organización de un agente y la de un cliente se leen igual porque SON el
   mismo componente. Aquí solo se le quita el `flex:1` que tiene en el lateral,
   donde ocupa toda la columna. */
.agente-arbol{padding:0;margin-top:var(--e2);flex:none;max-height:min(60vh,520px)}
.doc-marca{margin-left:auto;font-style:normal;font-size:10px;font-weight:550;
  color:var(--tinta-3);flex:none;letter-spacing:.02em}
.doc-marca.cargado{color:var(--acento)}
.nav-item.doc .cuenta{font-size:10px;color:var(--tinta-3)}
/* La hoja del documento: papel blanco, como la de un cliente. Dentro va el
   MISMO editor, así que no hay nada que estilar aparte —solo el marco—. */
.doc-hoja{background:var(--panel);border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.doc-hoja-cab{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--linea)}
.doc-hoja-ruta{flex:1;min-width:0;font-family:var(--mono);font-size:11px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-hoja #doc-host{min-height:460px}
.carpeta-ruta{margin-top:var(--e3);word-break:break-all}
.carpeta-ruta code{font-size:10px}
.carpeta-cargando{padding:var(--e6);color:var(--tinta-3);font-size:13px}
@media(max-width:900px){.agente-carpeta{grid-template-columns:minmax(0,1fr)}}

/* ─── Mis rutinas ────────────────────────────────────────────────────────
   Una tarjeta por rutina: qué hace, cuándo, y en marcha o parada. El punto de
   la izquierda es el único adorno y dice lo único que se mira de un vistazo.
   Nada de borde de acento en un lado: la parada se distingue por el color del
   punto y por el texto apagado, no por una franja. */
.rutinas{display:flex;flex-direction:column;gap:var(--e2)}
.rutina{display:flex;align-items:flex-start;gap:var(--e3);padding:var(--e4);
  background:var(--panel);border:1px solid var(--linea);border-radius:12px}
.rutina-luz{width:8px;height:8px;border-radius:999px;background:var(--linea-2);flex:none;margin-top:6px}
.rutina-luz.viva{background:var(--verde)}
.rutina-que{flex:1;min-width:0}
.rutina-que b{display:block;font-size:14px;font-weight:550}
.rutina-que p{margin:var(--e1) 0 0;font-size:13px;color:var(--tinta-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rutina-que small{display:block;margin-top:var(--e2);font-size:11px;color:var(--tinta-3)}
.paleta-vacio{padding:26px;text-align:center;color:var(--tinta-3);font-size:13px;line-height:1.5}

/* Lo que llevas adjunto, en el compositor y bajo tu mensaje. Se distingue por
   fondo y no por un borde a un lado: es una pieza más del mensaje, no un aviso. */
.copi-adjuntos{display:flex;flex-wrap:wrap;gap:6px;padding:0 var(--e3) var(--e2)}
.copi-adjunto{display:inline-flex;align-items:center;gap:6px;max-width:230px;
  padding:4px 8px;border-radius:999px;background:var(--fondo-2);border:1px solid var(--linea);
  font-size:12px;color:var(--tinta-2);text-decoration:none}
.copi-adjunto svg{width:13px;height:13px;flex:none}
.copi-adjunto b{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copi-adjunto small{color:var(--tinta-3);flex:none}
.copi-adjunto.subiendo{opacity:.6}
.copi-adjunto button{display:inline-flex;padding:0;border:0;background:none;cursor:pointer;color:var(--tinta-3)}
.copi-adjunto button:hover{color:var(--tinta)}
.copi-adjuntos-msg{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--e2)}
/* Imagen adjunta en el compositor: miniatura de 64 px que se amplía al pulsarla. */
.copi-adjunto-mini{position:relative;width:64px;height:64px;flex:none;border-radius:12px;
  border:1px solid var(--linea);background:var(--panel-2);overflow:visible}
.copi-adjunto-mini>button:first-child{display:block;width:100%;height:100%;padding:0;border:0;
  border-radius:12px;overflow:hidden;cursor:zoom-in;background:none}
.copi-adjunto-mini img{display:block;width:100%;height:100%;object-fit:cover}
.copi-adjunto-cargando{display:grid;place-items:center;width:100%;height:100%;color:var(--tinta-3)}
.copi-adjunto-cargando svg{width:20px;height:20px;animation:copi-latido 1.6s infinite}
.copi-adjunto-quitar{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;
  display:grid;place-items:center;border-radius:999px;border:1px solid var(--linea-2);
  background:var(--panel);color:var(--tinta-2);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.copi-adjunto-quitar svg{width:11px;height:11px}
.copi-adjunto-quitar:hover{color:var(--tinta)}
.copi-adjunto-img{cursor:zoom-in}
/* El visor de imágenes: a pantalla casi completa, encima de todo. */
.copi-visor{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:48px 24px;
  background:rgba(10,12,16,.82);cursor:zoom-out}
.copi-visor figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:100%;max-height:100%;cursor:default}
.copi-visor img{max-width:min(1400px,100%);max-height:calc(100vh - 140px);object-fit:contain;
  border-radius:8px;background:#fff;box-shadow:0 12px 44px rgba(0,0,0,.35)}
.copi-visor figcaption{display:flex;gap:16px;align-items:center;font-size:13px;color:rgba(255,255,255,.85)}
.copi-visor figcaption a{color:#fff;text-decoration:underline}
.copi-visor-x{position:fixed;top:16px;right:16px;width:40px;height:40px;display:grid;place-items:center;
  border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.copi-visor-x:hover{background:rgba(255,255,255,.24)}
.copi-visor-x svg{width:18px;height:18px}
.copi-adjunto-img{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--linea)}
.copi-adjunto-img img{display:block;max-width:180px;max-height:180px;object-fit:cover}
/* La que ha dibujado la IA se ve ENTERA y más grande: es el resultado del turno,
   no una referencia que adjuntaste tú, y recortada a un cuadrado de 180 px no se
   puede ni juzgar. */
.copi-msg.ia .copi-adjunto-img img{max-width:340px;max-height:340px;object-fit:contain;background:var(--panel-2)}
/* Nota de voz enviada: nombre + reproductor + estado de la transcripción. */
.copi-adjunto-audio{display:inline-flex;flex-direction:column;gap:4px;max-width:260px;
  padding:8px 10px;border-radius:8px;border:1px solid var(--linea);background:var(--fondo-2)}
.copi-adjunto-audio b{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copi-adjunto-audio svg{width:13px;height:13px;flex:none;vertical-align:-2px;margin-right:4px}
.copi-adjunto-audio audio{height:32px;max-width:100%}
.copi-adjunto-audio small{color:var(--tinta-3)}
/* Arrastrar encima del panel: se marca el panel entero, que es la zona donde
   de verdad puedes soltar. */
.copiloto.soltando{outline:2px dashed var(--azul);outline-offset:-6px}

.rutina-que small.rutina-condicion{display:inline-block;margin-top:var(--e2);padding:2px 8px;
  border-radius:999px;background:var(--fondo-2);color:var(--tinta-2)}
.rutina-acciones{display:flex;gap:var(--e1);flex:none;flex-wrap:wrap;justify-content:flex-end}
.rutina.parada .rutina-que b,.rutina.parada .rutina-que p{color:var(--tinta-3)}
@media(max-width:700px){.rutina{flex-wrap:wrap}.rutina-acciones{width:100%}}

/* ─── Densidad ───────────────────────────────────────────────────────────
   Con 55 clientes y 950 documentos, quien vive en las tablas quiere ver más
   de una pantalla a la vez. Se cambia la escala de espaciado y el alto de
   fila; no la tipografía, que en compacto se leería peor. */
:root[data-densidad="compacta"]{
  --e1:3px; --e2:6px; --e3:9px; --e4:12px; --e5:18px; --e6:24px; --e7:36px;
}
:root[data-densidad="compacta"] .tabla td{padding-top:6px;padding-bottom:6px}
:root[data-densidad="compacta"] .tabla tbody tr{min-height:0}
:root[data-densidad="compacta"] .nav-item{padding-top:4px;padding-bottom:4px}
:root[data-densidad="compacta"] .cabecera{margin-bottom:16px}
:root[data-densidad="compacta"] .tk{padding:7px 10px;margin-bottom:5px}
/* Las dos listas más largas —tareas y automatizaciones— no se enteraban de que
   estaban en compacto: la tarjeta de tarea bajaba de 114 a 108 px y la fila de
   automatización no se movía, porque su alto lo fijaba un `min-height` propio y
   no la escala de espaciado. Justo las dos pantallas por las que uno pone el
   modo compacto.
   El título de la tarea se recorta a dos líneas: es de donde sale el alto de
   verdad (tres líneas son 57 px de los 114) y es exactamente el trato que se
   pide al pulsar «compacto». El texto entero sigue en la ficha. */
:root[data-densidad="compacta"] .tk .t{margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:root[data-densidad="compacta"] .autom-fila,
:root[data-densidad="compacta"] .bbdd-fila{min-height:44px;padding-top:7px;padding-bottom:7px}
:root[data-densidad="compacta"] .autom-mini-icon{width:26px;height:26px}
:root[data-densidad="compacta"] .autom-identidad small{margin-top:1px}

/* ═══ Portada del cliente · cabecera viva ════════════════════════════════ */
/* El color de la empresa, lavadísimo, detrás del nombre. Es lo único de color
   de la pantalla: sirve para reconocer de quién es la ficha antes de leer. */
/* Sin `--cli` puesto a mano: es el acento de la marca. Se deja la variable para
   cuando la plataforma se parta en dos y cada una traiga el suyo. */
.proyecto-v2{--cli:var(--acento)}
.proyecto-banda{position:relative;overflow:visible;border:1px solid var(--linea);
  border-radius:20px;background:var(--panel);margin-bottom:16px}
.proyecto-banda::before{content:"";position:absolute;inset:0 0 auto;height:126px;
  border-radius:20px 20px 0 0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cli) 9%,var(--panel)),var(--panel))}
.proyecto-banda .proyecto-cab{position:relative;align-items:flex-start;gap:16px;padding:22px 24px 18px;
  flex-wrap:wrap}
.proyecto-banda .proyecto-cab>.ficha-av .avc{width:56px;height:56px;border-radius:16px;
  box-shadow:0 0 0 3px var(--panel)}
.proyecto-quien{flex:1;min-width:180px}
.proyecto-banda .proyecto-cab h1{font-size:28px;margin:4px 0 8px;line-height:1.15;letter-spacing:-.025em}

/* El anillo: cerrados sobre el total. Es lo único que dice si el proyecto
   avanza o solo acumula, y sale de encargos reales, no de una estimación. */
.proyecto-anillo{position:relative;width:72px;height:72px;flex:none;margin-top:4px}
.proyecto-anillo .aro{position:absolute;inset:0;border-radius:999px;
  background:conic-gradient(var(--cli) calc(var(--p) * 1%),var(--linea) 0)}
.proyecto-anillo .hueco{position:absolute;inset:8px;border-radius:999px;background:var(--panel);
  display:grid;place-items:center;text-align:center;line-height:1.2}
.proyecto-anillo b{display:block;font-size:16px;font-weight:680}
.proyecto-anillo small{display:block;font-size:10px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}

.proyecto-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
/* ⌘K busca en toda la plataforma; esto, en este cliente. Se contesta sin ir al
   servidor, con el árbol que la portada ya tiene cargado. */
.proyecto-buscar{display:flex;align-items:center;gap:7px;padding:0 11px;height:34px;
  border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);min-width:0}
.proyecto-buscar:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-b)}
.proyecto-buscar svg{width:14px;height:14px;color:var(--tinta-3);flex:none}
.proyecto-buscar input{border:0;background:none;font-size:13px;width:170px;min-width:0;outline:none;
  color:var(--tinta)}
.proyecto-hallazgos{position:absolute;z-index:30;right:24px;top:76px;width:min(420px,calc(100% - 48px));
  background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;
  box-shadow:var(--sombra-alta);padding:5px;max-height:320px;overflow-y:auto}
.proyecto-hallazgos>button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  border-radius:8px;text-align:left}
.proyecto-hallazgos>button:hover{background:var(--activo)}
.proyecto-hallazgos .ic{width:18px;flex:none;text-align:center;font-size:14px;line-height:1;color:var(--tinta-3)}
.proyecto-hallazgos .ic svg{width:14px;height:14px}
.proyecto-hallazgos b{font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proyecto-hallazgos small{margin-left:auto;font-size:11px;color:var(--tinta-3);flex:none;
  max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La ficha se abre cuando la vas a rellenar. Enseñarla siempre significaba
   cuatro «Vacío» seguidos en una columna fija: de 60 clientes, uno tiene
   estado y responsable. */
.proyecto-ficha{position:absolute;z-index:30;right:24px;top:76px;width:min(400px,calc(100% - 48px));
  background:var(--panel);border:1px solid var(--linea-2);border-radius:16px;
  box-shadow:var(--sombra-alta);padding:14px 16px 6px;max-height:min(70vh,520px);overflow-y:auto}
.proyecto-ficha .ficha-cab{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.proyecto-ficha .ficha-cab b{flex:1;font-size:13px;font-weight:680}
.proyecto-ficha .props-linea{display:grid;grid-template-columns:minmax(96px,.8fr) 1fr;
  margin:0;padding:0;border:0;background:none}
.proyecto-ficha .props-linea>.k,.proyecto-ficha .props-linea>.v{padding:8px 2px;
  border-bottom:1px solid var(--linea);font-size:12px;min-width:0}
.proyecto-ficha .props-linea>.k{display:flex;align-items:center;gap:6px;color:var(--tinta-3)}
.proyecto-ficha .props-linea>.k svg{width:13px;height:13px;flex:none}
.proyecto-ficha .props-linea>.v{display:flex;align-items:center;gap:5px;flex-wrap:wrap}

/* La franja: cuatro cifras con su pie. El pie es lo que las hace legibles —«30»
   a secas no dice nada, «30 · 4 en curso» sí—. */
.proyecto-banda .proyecto-franja{grid-template-columns:repeat(4,1fr);border:0;border-radius:0;
  border-top:1px solid var(--linea);background:none}
.proyecto-banda .proyecto-franja>button{padding:13px 16px 15px}
.proyecto-banda .proyecto-franja b{font-size:22px;letter-spacing:-.03em;margin-top:4px}
.proyecto-banda .proyecto-franja small{display:block;font-size:11px;color:var(--tinta-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proyecto-franja .chispa{display:block;width:100%;height:22px;margin-top:8px;color:var(--cli);opacity:.9}
.proyecto-franja .chispa polyline{fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ═══ Compositor de la portada ═══════════════════════════════════════════ */
/* No es un chat aparte: escribes aquí y la conversación se abre ya enviada en
   el panel de siempre. El chip dice de qué se está hablando, que sin eso
   «¿qué quedó pendiente?» no significa nada. */
.proyecto-compo{border:1px solid var(--linea-2);border-radius:16px;background:var(--panel);
  padding:12px 14px 10px}
.proyecto-compo:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-b)}
.proyecto-compo textarea{width:100%;border:0;background:none;resize:none;outline:none;
  font:inherit;font-size:14px;line-height:1.5;color:var(--tinta);max-height:180px}
.proyecto-compo textarea::placeholder{color:var(--tinta-3)}
.compo-barra{display:flex;align-items:center;gap:8px;margin-top:8px}
.compo-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;
  border:1px solid var(--linea-2);border-radius:999px;font-size:12px;color:var(--tinta-2)}
.compo-chip .avc{width:18px;height:18px;border-radius:999px;font-size:10px}
.compo-der{margin-left:auto;display:flex;align-items:center;gap:4px}
.proyecto-sugeridas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.proyecto-sugeridas button{padding:6px 12px;border:1px solid var(--linea-2);border-radius:999px;
  background:var(--panel);font-size:12px;color:var(--tinta-2)}
.proyecto-sugeridas button:hover{background:var(--hover);color:var(--tinta)}

/* ═══ Tiras que ruedan de lado ═══════════════════════════════════════════ */
/* Antes se enseñaban «las cuatro carpetas con más archivos» y para llegar a la
   quinta había que salir de la portada. Rodando de lado caben las ocho. */
.tira{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.tira::-webkit-scrollbar{height:8px}
.tira::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:999px}
.tira>*{flex:0 0 auto;scroll-snap-align:start}
.tira.carpetas{display:flex;grid-template-columns:none}
.tira.carpetas .carp{width:186px;padding:0 10px 10px}
.tira-pagina{width:186px;padding:14px;border:1px solid var(--linea-2);border-radius:16px;
  background:var(--panel);text-align:left;transition:border-color .12s,box-shadow .12s}
.tira-pagina:hover{border-color:var(--linea-2);box-shadow:var(--sombra)}
.tira-pagina .ic{display:block;font-size:22px;line-height:1;margin-bottom:10px}
.tira-pagina .ic svg{width:20px;height:20px;color:var(--tinta-3)}
.tira-pagina b{display:block;font-size:13px;font-weight:550;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tira-pagina small{display:block;font-size:11px;color:var(--tinta-3);margin-top:5px}
.proyecto-vacio.grande{padding:26px 22px;border:1px dashed var(--linea-2);border-radius:16px;
  line-height:1.55;max-width:560px}

/* El punto de estado del encargo. Tenía el color declarado solo dentro de
   `.secc-cuerpo`, así que aquí salía transparente: ocho píxeles invisibles
   ocupando sitio y una lista donde nada distinguía lo bloqueado de lo abierto. */
.proyecto-tareas .pt{background:var(--linea-2)}
.proyecto-tareas .pt.azul{background:var(--azul)}
.proyecto-tareas .pt.rojo{background:var(--rojo)}
.proyecto-tareas .pt.ambar{background:var(--ambar)}
.proyecto-tareas .pt.verde{background:var(--verde)}

/* ═══ Desde que no entras ════════════════════════════════════════════════ */
.proyecto-desde .proyecto-actividad>button{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 3px;border-top:1px solid var(--linea);text-align:left}
.proyecto-desde .proyecto-actividad>button:hover{background:var(--hover)}
.proyecto-desde .proyecto-actividad>button>div{flex:1;min-width:0}
.proyecto-desde b,.proyecto-desde small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proyecto-desde b{font-size:12px;font-weight:550}
.proyecto-desde small{font-size:11px;color:var(--tinta-3);margin-top:2px}
.proyecto-desde time{font-size:11px;color:var(--tinta-3);flex:none}
/* Quién movió esto. La plataforma ya sabe distinguir lo que llegó por el
   repositorio de lo que hizo un encargo, así que se dice en vez de callarlo. */
.firma{font-style:normal;flex:none;font-size:10px;font-weight:550;padding:2px 6px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.04em}
.firma.repo{background:var(--gris-b);color:var(--tinta-3)}
.firma.tarea{background:var(--azul-b);color:var(--azul)}
.firma.ia{background:var(--morado-b);color:var(--morado)}

/* ═══ La historia del proyecto ═══════════════════════════════════════════ */
/* Una lista de fechas sueltas no es una historia. El carril continuo entre los
   puntos es lo que la convierte en una sucesión que se lee. */
.proyecto-linea{margin-top:6px}
.proyecto-linea .hito{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:9px 0}
.proyecto-linea time{font-size:11px;color:var(--tinta-3);text-align:right;padding-top:2px;
  font-variant-numeric:tabular-nums}
.proyecto-linea .cuerpo{position:relative;padding-left:16px}
.proyecto-linea .cuerpo::before{content:"";position:absolute;left:-1px;top:5px;width:7px;height:7px;
  border-radius:999px;background:var(--linea-2);box-shadow:0 0 0 3px var(--panel)}
.proyecto-linea .hito:not(:last-child) .cuerpo::after{content:"";position:absolute;left:2px;top:14px;
  bottom:-18px;width:1px;background:var(--linea)}
.proyecto-linea b{display:block;font-size:12px;font-weight:550;line-height:1.4}
.proyecto-linea small{display:block;font-size:11px;color:var(--tinta-3);margin-top:3px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Quien anotó, cuando el encabezado del HISTORIAL.md solo traía su nombre. */
.proyecto-linea .hito-autor{display:block;font-size:10px;font-style:normal;color:var(--tinta-3);
  margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

@container (max-width:760px){
  .proyecto-acciones{width:100%;margin-left:0}
  .proyecto-buscar{flex:1}
  .proyecto-buscar input{width:100%}
  .proyecto-banda .proyecto-franja{grid-template-columns:repeat(2,1fr)}
  .proyecto-banda .proyecto-franja>button:nth-child(even){border-right:0}
  .proyecto-hallazgos,.proyecto-ficha{right:16px;left:16px;width:auto;top:auto;margin-top:8px;position:static}
}

/* Tres rellenos horizontales encadenados se comían la pantalla del móvil: los
   18 px de `#panel`, otros 18 de `.proyecto-v2` y 24 más de la tarjeta = 60 px
   por lado. De 390 px de teléfono quedaban 259 para el texto, un tercio de la
   pantalla en blanco a los lados. El de en medio sobra —el panel ya separa del
   canto— y el de la tarjeta baja a 16. Va después de las reglas de
   `.proyecto-banda` (2799+) y del bloque de 900 (2487), que si no lo pisan. */
@media(max-width:700px){
  .proyecto-v2{padding-left:0;padding-right:0}
  .proyecto-banda .proyecto-cab{padding-left:16px;padding-right:16px}
  .proyecto-banda .proyecto-franja>button{padding-left:14px;padding-right:14px}
}

/* Mencionar en un canal. La misma sintaxis para las dos cosas —avisar a una
   persona o pedirle a un agente que conteste— porque para quien escribe es lo
   mismo: decir a quién le habla. Quién es cada uno lo dice la propia lista. */
.canal-menciones{position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;z-index:20;
  background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;
  box-shadow:var(--sombra-alta);padding:5px;max-height:240px;overflow-y:auto}
.canal-menciones button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  border-radius:8px;text-align:left;font-size:13px;color:var(--tinta-2)}
.canal-menciones button:hover,.canal-menciones button.activo{background:var(--activo);color:var(--tinta)}
.canal-menciones button svg{width:14px;height:14px;flex:none;color:var(--tinta-3)}
.canal-menciones button>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canal-menciones small{flex:none;font-size:11px;color:var(--tinta-3)}
.canal-compositor{position:relative}
/* Avisa de que el mensaje NO va al canal sin más: lo va a contestar un agente. */
.canal-a-quien{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--morado-b);color:var(--morado);font-size:11px;font-weight:550}
.canal-a-quien svg{width:12px;height:12px}
.canal-a-quien b{font-weight:680}

/* La etiqueta de lo que ha publicado un agente: informe, pregunta o alerta.
   Es lo que permite leer un canal en diagonal. */
.msg-clase{font-size:10px;font-weight:550;padding:1px 6px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.04em}
.msg-clase.gris{background:var(--gris-b);color:var(--tinta-3)}
.msg-clase.azul{background:var(--azul-b);color:var(--azul)}
.msg-clase.rojo{background:var(--rojo-b);color:var(--rojo)}

/* El estado del repositorio, en la barra. Callado cuando no hay nada que decir:
   un indicador que siempre está encendido deja de mirarse. */
.chip-repo{gap:6px;color:var(--tinta-2);white-space:nowrap}
.chip-repo svg{width:14px;height:14px;color:var(--ambar)}
.repo-fila{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 9px;border-radius:8px}
.repo-fila b{font-size:13px;font-weight:550}
.repo-fila small{grid-column:1;font-size:11px;color:var(--tinta-3)}
.repo-fila time{grid-row:1/3;align-self:center;font-size:11px;color:var(--tinta-3)}
.repo-fila.pendiente b{color:var(--ambar)}
.repo-nota{padding:8px 9px 4px;border-top:1px solid var(--linea);margin-top:5px;
  font-size:11px;line-height:1.5;color:var(--tinta-3)}

/* ═══ Selector de horario de una rutina ══════════════════════════════════ */
.cal-opciones{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:6px}
.cal-tipo{padding:9px 12px;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);
  font-size:13px;font-weight:550;color:var(--tinta-2);text-align:left}
.cal-tipo:hover{background:var(--hover)}
.cal-tipo.activo{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta);color:var(--tinta)}
.cal-detalle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:13px;
  color:var(--tinta-2)}
.cal-campo{display:inline-flex;align-items:center;gap:8px}
.cal-campo input{width:96px;padding:7px 9px;border:1px solid var(--linea-2);border-radius:8px;
  background:var(--panel);color:var(--tinta);font:inherit;font-size:13px}
.cal-campo input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-b)}
.cal-dias{display:flex;gap:4px}
/* Iniciales españolas: la X es el miércoles porque la M ya es del martes. */
.cal-dia{width:32px;height:32px;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);
  font-size:12px;font-weight:550;color:var(--tinta-3)}
.cal-dia:hover{background:var(--hover)}
.cal-dia.activo{background:var(--primario);border-color:transparent;color:var(--primario-txt)}
.cal-nota{width:100%;font-size:11px;color:var(--tinta-3)}
/* Se lee la frase, no la expresión: quien la escribe quiere saber cuándo pasa. */
.cal-frase{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--panel-2);
  border:1px solid var(--linea);font-size:13px;font-weight:550;color:var(--tinta)}

:root[data-densidad="compacta"] .proyecto-bloque{padding:11px}

/* ─── Esqueletos ─────────────────────────────────────────────────────────
   Un spinner dice «espera»; un esqueleto dice «esto es lo que va a venir». Se
   percibe más rápido aunque tarde lo mismo, y no hay salto al llegar. */
.hueso{border-radius:8px;background:var(--panel-2);position:relative;overflow:hidden}
.hueso::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--activo),transparent);
  animation:hueso 1.3s infinite}
@keyframes hueso{100%{transform:translateX(100%)}}
.esqueleto{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.esqueleto .hueso{height:14px}
.esqueleto .hueso.tit{height:26px;width:40%;margin-bottom:6px}
.esqueleto .hueso.corto{width:62%}
.esqueleto .hueso.medio{width:80%}
.esqueleto-filas{display:flex;flex-direction:column;gap:1px}
.esqueleto-filas>div{display:flex;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid var(--linea)}
.esqueleto-filas .av{width:26px;height:26px;border-radius:8px;flex:none}
.esqueleto-filas .a{flex:1;height:12px}
.esqueleto-filas .b{width:80px;height:12px;flex:none}
@media (prefers-reduced-motion:reduce){.hueso::after{animation:none}}

/* ─── Inicio ─────────────────────────────────────────────────────────────
   Se empieza por el compositor: Inicio es desde donde se arranca, no un
   informe que se mira. Debajo, el parte del día y dónde está el trabajo. */
/* `auto` a los lados, no `0`. El saludo es hijo directo del lienzo y de ahí
   hereda el `margin-inline:auto` que centra la columna de 1180; un `margin`
   abreviado con `0` a los lados lo pisaba y lo dejaba pegado a la izquierda.
   No se veía en pantallas donde el lienzo mide menos de 1180 —ahí `auto` y `0`
   valen lo mismo— y sí en un monitor grande, con el saludo 140 px a la
   izquierda del chat que tiene debajo. */
.inicio-hero{max-width:760px;margin:18px auto 24px;padding:34px 28px 30px;border-radius:20px;
  text-align:center;background:
    radial-gradient(460px 230px at 12% 0%,color-mix(in srgb,var(--acento-luz) 28%,transparent),transparent 68%),
    radial-gradient(400px 220px at 92% 10%,color-mix(in srgb,var(--acento-luz) 18%,transparent),transparent 66%),
    var(--panel);border:1px solid var(--linea);box-shadow:var(--sombra)}
.inicio-marca{width:58px;height:58px;object-fit:contain;border-radius:16px;margin:0 auto 18px;
  box-shadow:0 5px 18px rgba(0,24,60,.16)}
.inicio-saludo{text-align:center;margin:0 auto 24px}
.inicio-saludo h1{font-size:28px;font-weight:680;margin:0 0 4px;letter-spacing:-.02em}
.inicio-saludo p{margin:0;font-size:14px;color:var(--tinta-3)}
/* `capitalize` ponía mayúscula en TODAS las palabras: «Domingo, 23 De Agosto». */
.inicio-saludo p::first-letter{text-transform:uppercase}
.inicio-compositor{max-width:680px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;
  padding:12px 14px;border:1px solid var(--linea-2);border-radius:16px;background:var(--panel);
  box-shadow:var(--sombra-alta);transition:border-color .16s ease}
.inicio-compositor:focus-within{border-color:var(--acento-borde)}
.inicio-compositor textarea{flex:1;border:0;outline:none;background:none;resize:none;
  font:inherit;font-size:16px;line-height:1.5;color:var(--tinta);max-height:180px;padding:4px 0}
.inicio-compositor textarea::placeholder{color:var(--tinta-3)}
.inicio-sugerencias{max-width:680px;margin:12px auto var(--e6);display:flex;flex-wrap:wrap;
  gap:8px;justify-content:center}
.inicio-sugerencias button{padding:6px 12px;border-radius:999px;border:1px solid var(--linea);
  font-size:13px;color:var(--tinta-2);background:var(--panel)}
.inicio-sugerencias button:hover{background:var(--activo);color:var(--tinta);border-color:var(--linea-2)}
.inicio-hoy{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--e6)}
.inicio-hoy .dia-metrica{flex:1 1 160px;display:flex;align-items:baseline;gap:8px;
  padding:12px 16px;border-radius:12px;border:1px solid var(--linea);background:var(--panel)}
.inicio-hoy .dia-metrica:hover{border-color:var(--linea-2);background:var(--panel-2)}
.inicio-hoy .dia-metrica .n{font-size:22px;font-weight:680;color:var(--tinta)}
.inicio-hoy .dia-metrica .et{font-size:13px;color:var(--tinta-3)}
.inicio-hoy .dia-metrica.rojo .n{color:var(--rojo)}
.inicio-hoy .dia-metrica.azul .n{color:var(--acento)}
.inicio-hoy .dia-metrica.morado .n{color:var(--morado)}
/* Dónde está el trabajo: una barra por cliente, con el color de su empresa. */
.carga-lista{display:flex;flex-direction:column;gap:2px}
.carga-fila{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:8px;text-align:left}
.carga-fila:hover{background:var(--activo)}
.carga-n{flex:0 0 34%;font-size:13px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carga-barra{flex:1;height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.carga-barra i{display:block;height:100%;border-radius:999px}
.carga-num{flex:none;min-width:24px;text-align:right;font-size:12px;font-weight:550;color:var(--tinta-3)}
/* Lo último: qué pasó, no solo dónde. */
/* Próximos eventos. La columna de la izquierda es la fecha y va a ancho fijo:
   con ancho automático, «Hoy» y «mié, 3 sept» dejaban los títulos en escalera y
   la lista no se podía barrer con la vista. */
.agenda-lista{display:flex;flex-direction:column;gap:2px}
.agenda-fila{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;
  padding:8px;border-radius:8px;text-align:left;color:inherit;text-decoration:none}
.agenda-fila:hover{background:var(--activo)}
.agenda-fila.sin-enlace{cursor:default}
.agenda-cuando{display:flex;flex-direction:column;min-width:0}
.agenda-cuando b{font-size:12px;font-weight:550}
.agenda-cuando small{font-size:11px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.agenda-que{display:flex;flex-direction:column;min-width:0}
.agenda-que b{font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda-que small{font-size:11px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda-fila .fl{color:var(--tinta-3)}

.ultimo-lista{display:flex;flex-direction:column;gap:2px}
.ultimo-lista button{display:grid;grid-template-columns:16px 1fr;gap:4px 10px;width:100%;
  padding:8px;border-radius:8px;text-align:left}
.ultimo-lista button:hover{background:var(--activo)}
.ultimo-lista svg{width:15px;height:15px;grid-row:1/3;align-self:start;margin-top:2px;color:var(--tinta-3)}
.ultimo-lista span{font-size:13px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ultimo-lista b{font-weight:550;color:var(--tinta)}
.ultimo-lista small{font-size:12px;color:var(--tinta-3)}
@media(max-width:700px){
  .inicio-hero{margin:8px 0 20px;padding:28px 16px 22px;border-radius:16px}
  .inicio-marca{width:52px;height:52px;margin-bottom:15px}
  .inicio-saludo{margin-bottom:20px}.inicio-saludo h1{font-size:22px}
  .inicio-compositor{border-radius:16px;text-align:left}}
@media(max-width:820px){.atajos-cols{grid-template-columns:minmax(0,1fr)}}
@keyframes aviso-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.aviso-flotante{animation:none}}

/* Vista a pantalla completa para lo que no es prosa: una landing o un PDF
   necesitan el ancho de la pestaña, no la columna de lectura. El scroll lo
   lleva el documento de dentro del marco, no la plataforma. */
.visor-pantalla{flex:1;min-height:0;display:flex;background:var(--panel-2)}
.visor-pantalla>iframe.a-pantalla{flex:1;width:100%;height:100%;border:0;background:#fff;display:block}

/* Iconos por familia de fichero en el árbol de documentos.
   El color hace el trabajo: recorrer 949 documentos con un único icono gris
   obliga a leer nombre por nombre. Tomado de Cabinet (MIT). */
.ico-tipo{display:inline-flex;flex:none}
.ico-tipo svg{width:15px;height:15px}
.tipo-doc  {color:var(--tinta-3)}
.tipo-img  {color:#d6336c}
.tipo-video{color:#0ca5c4}
.tipo-audio{color:#e08a00}
.tipo-hoja {color:#0f9d58}
.tipo-pdf  {color:#d93025}
.tipo-web  {color:#1f4fd8}
.tipo-cod  {color:#7c3aed}

/* Qué estás mirando, junto a la ruta. Un PDF, una web incrustada y un markdown
   se abren de forma muy distinta y conviene saberlo antes de pulsar. */
.miga-tipo{margin-left:9px;padding:2px 7px;border-radius:4px;background:var(--panel-2);
  border:1px solid var(--linea);color:var(--tinta-3);font-size:11px;font-weight:400;
  letter-spacing:.02em;white-space:nowrap;vertical-align:middle}

/* Estado del repositorio, abajo del todo. Discreta: informa sin competir. */
.docs-estado{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:7px 16px;border-top:1px solid var(--linea);background:var(--panel);
  color:var(--tinta-3);font-size:12px}
.docs-estado b{color:var(--tinta-2);font-weight:680}
.docs-estado .sep{font-style:normal;opacity:.45}
.punto-estado{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;
  vertical-align:middle;background:var(--tinta-3)}
.punto-estado.ok{background:#0f9d58}
.punto-estado.aviso{background:#e08a00}

/* Hojas de cálculo: un CSV es una tabla, no un párrafo con comas. */
.hoja-marco{flex:1;min-height:0;overflow:auto;background:var(--panel)}
.hoja-tabla{border-collapse:collapse;font-size:13px;min-width:100%}
.hoja-tabla th,.hoja-tabla td{border-bottom:1px solid var(--linea);
  padding:8px 12px;text-align:left;vertical-align:top;white-space:pre-wrap;max-width:340px}
.hoja-tabla thead th{position:sticky;top:0;z-index:1;background:var(--panel-2);
  border-bottom:1px solid var(--linea);font-weight:680;color:var(--tinta-2);white-space:nowrap}
.hoja-tabla tbody tr:hover{background:var(--hover)}
.hoja-num{width:44px;color:var(--tinta-3);text-align:right !important;
  font-variant-numeric:tabular-nums;background:var(--panel-2);white-space:nowrap}
.hoja-tabla tfoot td{color:var(--tinta-3);font-size:12px;padding:10px 12px;background:var(--panel-2)}
/* Un Excel con varias pestañas: la barra de abajo de Excel, arriba. */
.hoja-libro{flex:1;min-height:0;display:flex;flex-direction:column}
.hoja-pestanas{flex:none;display:flex;gap:2px;padding:0 8px;overflow-x:auto;
  background:var(--panel-2);border-bottom:1px solid var(--linea)}
.hoja-pestanas button{border:0;background:none;font:inherit;font-size:13px;color:var(--tinta-2);
  padding:9px 12px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.hoja-pestanas button span{color:var(--tinta-3)}
.hoja-pestanas button.activo{color:var(--tinta);border-bottom-color:var(--acento);font-weight:620}
.hoja-pagina{flex:1;min-height:0;display:flex;flex-direction:column}
.hoja-pagina[hidden]{display:none}

/* Vídeo y audio dentro de la columna de lectura */
.visor-otros .medio{width:100%;max-height:70vh;border-radius:8px;background:#000;display:block}
.visor-otros audio.medio{background:transparent;max-height:none}

/* Pestañas del lateral del cliente. Sin ellas, las nueve entradas de navegación
   se apilan y el árbol de ficheros queda por debajo del pliegue. */
.lat-pestanas{display:flex;gap:3px;padding:8px 10px 4px;flex:none}
.lat-pestanas button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--tinta-3);font-size:11px;font-weight:400;line-height:1.2;cursor:pointer}
.lat-pestanas button svg{width:16px;height:16px}
.lat-pestanas button:hover{background:var(--hover);color:var(--tinta-2)}
.lat-pestanas button.activo{background:var(--panel);border-color:var(--linea);
  color:var(--tinta);box-shadow:var(--sombra)}
/* La cabecera del árbol ya no repite el nombre de la pestaña activa; solo deja
   sitio al botón de página nueva. */
.nav-grupo.sutil{min-height:0;padding-top:2px;padding-bottom:2px}

/* Tirador para cambiar el ancho del lateral. Ocupa 5 px reales pero se agarra
   con holgura; sin eso hay que acertar al píxel. */
.tirador-lateral{position:fixed;top:0;bottom:0;width:5px;z-index:40;cursor:col-resize;
  left:calc(56px + var(--ancho-lateral,248px) - 2px)}
.tirador-lateral::after{content:'';position:absolute;inset:0 -3px;}
.tirador-lateral:hover::before,.tirador-lateral:focus-visible::before,
body.redimensionando .tirador-lateral::before{content:'';position:absolute;inset:0;
  background:var(--azul);opacity:.55}
.marco.plegado ~ .tirador-lateral{display:none}
body.redimensionando{cursor:col-resize;user-select:none}
body.redimensionando iframe{pointer-events:none}
@media(max-width:900px){.tirador-lateral{display:none}}

/* Las acciones del documento viven en la barra superior. El indicador de
   guardado va con ellas, no en una fila propia. */
#barra .pag-estado{font-size:12px;color:var(--tinta-3);margin-right:4px;white-space:nowrap}
#barra .acciones{gap:5px}
#barra .acciones .pill{white-space:nowrap}

/* El visor de documentos ocupa el panel entero.
   `.docs` compensaba el relleno de #panel con márgenes negativos, pero su
   `height:100%` se calculaba sobre la caja de contenido: se perdían 46 px por
   abajo y el documento salía cortado. Se quita el relleno en origen. */
/* La regla que pone el relleno es `.lienzo.cliente > #panel`, así que hay que
   igualar su especificidad para quitarlo. */
.lienzo.cliente > #panel:has(> .docs){padding:0}
.lienzo.cliente > #panel:has(> .docs) > .docs{margin:0;height:100%}
.lienzo.cliente:has(.docs){margin-bottom:0}

/* Drive: lista a la izquierda, documento a la derecha.
   `.docs` apila en columna, así que la lista de once documentos empujaba la
   hoja de Google a una franja de 200 px en la que no se leía nada. */
/* El visor de Drive ocupa todo el ancho. Tenía su propia columna de documentos
   a la izquierda, la misma que ya está en el lateral: pulsar un documento
   parecía no llevar a ninguna parte porque volvía a salir la lista. */
.drive-visor{flex-direction:row;height:100%}
.drive-visor>.visor{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
/* Sin altura declarada en toda la cadena el iframe se quedaba a la altura de su
   contenido y el documento salía cortado por abajo. */
.drive-visor .pag{flex:1;min-height:0}
.drive-visor .pag-scroll{flex:1 1 auto;overflow:hidden;display:flex;min-height:0;height:auto}
.drive-visor .incrustado{flex:1;width:100%;border:0;background:#fff;display:block}
@media(max-width:820px){
  .drive-visor{flex-direction:column}
}

/* Elemento activo del árbol de documentos, con barra de acento pegada al borde
   del lateral, como Cabinet. Es la excepción a la regla de la casa de no usar
   bordes de un solo lado: aquí la barra no rodea el elemento, marca la posición
   dentro de la lista, que es otra cosa.
   Va con ::before y no con border-left para que el texto no se desplace. */
.nav-item.doc.activo{position:relative;font-weight:680;color:var(--tinta)}
.nav-item.doc.activo::before{content:'';position:absolute;top:2px;bottom:2px;
  left:calc(-1 * var(--sangria-lateral, 10px));width:3px;border-radius:0 3px 3px 0;
  background:var(--azul)}
/* 8 px es el relleno lateral de `.nav`: así la barra queda pegada al borde
   del lateral y no al del elemento. */
.nav{--sangria-lateral:8px}

/* Pantalla completa del documento: se retira el cromo de la aplicación, no la
   ventana del navegador. La barra superior se queda para poder salir. */
/* Al ocultar riel y lateral dejan de ser celdas del grid, así que la columna
   del contenido pasa a ser la primera: hay que declarar una sola columna o el
   documento se queda con 0 px de ancho. */
.marco.a-pantalla{grid-template-columns:1fr}
.marco.a-pantalla>.riel,.marco.a-pantalla>.lateral,
.marco.a-pantalla .tabs-fila,.marco.a-pantalla>.tirador-lateral{display:none}
.marco.a-pantalla #barra{background:var(--panel);border-bottom:1px solid var(--linea)}

/* Barra de formato de la página, al estilo de Cabinet. */
/* La barra de formato lleva el mismo margen lateral que el resto de la
   aplicación (40 px). Con 14 px quedaba pegada al canto de la ventana, que es
   justo el borde por el que empieza a leerse la página. */
.pag-formato{flex:none;display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:6px 40px;border-bottom:1px solid var(--linea);background:var(--panel)}
@media(max-width:700px){.pag-formato{padding:6px 18px}}
.pag-formato .fmt-grupo{display:flex;align-items:center;gap:1px;padding:0 5px;
  border-right:1px solid var(--linea)}
.pag-formato .fmt-grupo:first-child{padding-left:0}
.pag-formato button{min-width:28px;height:28px;padding:0 6px;border:0;border-radius:8px;
  background:none;color:var(--tinta-2);font-size:13px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.pag-formato button:hover{background:var(--hover);color:var(--tinta)}
.pag-formato button.activo{background:var(--activo);color:var(--tinta)}
.pag-formato .fmt-derecha{margin-left:auto;display:flex;align-items:center;gap:4px;
  padding-left:8px}
.pag-formato .fmt-fuente{font-size:12px;padding:0 9px;color:var(--tinta-3);
  font-family:var(--mono)}
.pag-formato .fmt-fuente.activo{background:var(--activo);color:var(--tinta)}
@media(max-width:820px){
  .pag-formato{overflow-x:auto;flex-wrap:nowrap}
  .pag-formato .fmt-derecha{margin-left:10px}
}

/* Columna ancha, el botón ↔ */
.pag.ancha .pag-col{max-width:1100px}

/* Ver el markdown original */
.pag-fuente{white-space:pre-wrap;font-family:var(--mono);font-size:13px;line-height:1.7;
  color:var(--tinta-2);background:var(--panel-2);border:1px solid var(--linea);
  border-radius:8px;padding:16px 18px;margin:8px 0 40px}

/* Panel de la IA, a la derecha. La aplicación se encoge en vez de quedar tapada:
   así se puede leer un documento mientras llega la respuesta.
   La conversación se pinta como en Claude o ChatGPT: la pregunta en una burbuja
   discreta a la derecha, la respuesta como texto corrido a todo el ancho —que es
   lo que se lee bien— y nada de avatares repetidos en cada turno. */
:root{--ancho-copiloto:420px;--ancho-dique:58px;
  --curva:cubic-bezier(.22,1,.36,1)}

/* Con el panel abierto la aplicación deja de ocupar toda la ventana y pasa a
   ser una lámina más sobre el escritorio, igual que el panel y que el dique.
   Es lo que hace que las tres cosas se vean del mismo mundo en vez de parecer
   una ventana pegada encima de otra. El encogido va animado: empuja, no salta. */
/* Dos maneras de tener el panel, que se cambian desde el pie del propio panel.
   «Hace sitio» encoge la aplicación por la derecha: las dos cosas a la vista a
   la vez. «Encima» lo deja flotando y el contenido no se mueve ni un píxel:
   para abrir y cerrar sin que la pantalla entera baile cada vez.
   En los dos casos el panel es el mismo: solo cambia si la aplicación le hace
   hueco o no. */
.marco{transition:grid-template-columns .16s ease,right .3s var(--curva)}
.marco{right:var(--ancho-dique)}
.marco.con-copiloto{right:calc(var(--ancho-copiloto) + var(--ancho-dique))}
/* El hueco del chat que estaba abierto, desde el primer pintado (lo pone el
   script del <head> de index.html; aplicarModo() lo quita en cuanto manda él). */
@media(min-width:901px){html.copi-empuja .marco{right:calc(var(--ancho-copiloto) + var(--ancho-dique))}}
html.arrancando .marco,html.arrancando .copiloto,html.arrancando .copi-dique{transition:none!important}

/* El panel entra deslizándose desde el borde mientras la aplicación se encoge. */
.copiloto{position:fixed;top:10px;bottom:10px;right:var(--ancho-dique);
  width:var(--ancho-copiloto);z-index:70;
  display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--linea);border-radius:var(--r-panel);box-shadow:var(--sombra-alta);
  transform:translateX(calc(100% + 14px));
  transition:transform .3s var(--curva),right .3s var(--curva)}
.copiloto.abierto{transform:none}
/* Barrita del borde izquierdo para ajustar a mano el ancho del chat acoplado. */
.copi-resize{position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:80}
.copi-resize::after{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:3px;height:36px;border-radius:4px;background:var(--linea-2);opacity:0;transition:opacity .15s}
.copi-resize:hover::after{opacity:.9}
/* A pantalla completa. Ocupa desde el riel hasta el borde derecho, sin bordes
   redondeados ni sombra: ya no es una ventana encima de la aplicación, es la
   pantalla. Se queda el riel para poder salir. */
.copiloto.pantalla{top:0;bottom:0;right:0;left:56px;width:auto;border-radius:0;
  border-top:0;border-bottom:0;border-right:0;box-shadow:none;flex-direction:row}
.copiloto.pantalla .copi-columna{flex:1;min-width:0;display:flex;flex-direction:column}
.copiloto.pantalla .copi-hilo{padding-left:max(24px,calc((100% - 820px)/2));
  padding-right:max(24px,calc((100% - 820px)/2))}
.copiloto.pantalla .copi-pie{padding-left:max(24px,calc((100% - 820px)/2));
  padding-right:max(24px,calc((100% - 820px)/2))}
/* IA como página (escritorio). El panel no flota: va DENTRO del lienzo, debajo
   de la franja de pestañas y migas, entre el riel y el lateral de la aplicación
   como cualquier otra página. Sin bordes, sin sombra y sin fondo propio: es la
   página, no una ventana. El lienzo no hace scroll; lo hace el hilo. */
.lienzo.ia{display:flex;flex-direction:column;padding:var(--chrome,94px) 0 0;overflow:hidden;
  scrollbar-gutter:auto}
.lienzo.ia > *{max-width:none;margin-left:0;margin-right:0}
/* Fondo blanco, como cuando era ventana: sobre el degradado del fondo la
   burbuja gris de tus mensajes se leía blanca (15-oct-2026). */
.lienzo.ia{background:var(--panel)}
/* «Nueva» en la cabecera de su lateral: compacto y sin icono, para que quepan
   el título y el botón de plegar en los 248 px. Si aun así no cabe —el lateral
   se puede estrechar—, el título se recorta. */
.lat-cab .lat-nueva{padding:4px 9px;font-size:12px;flex:none}
.lat-cab .lat-tit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La lista va justo debajo de la cabecera del lateral, que ya trae su aire. */
.copi-lista-pagina .copi-grupo:first-child{padding-top:6px}
.copiloto.pantalla.en-pagina{position:relative;inset:auto;width:auto;flex:1;min-height:0;
  z-index:auto;transform:none;transition:none;border:0;border-radius:0;box-shadow:none;
  background:transparent}
/* El hilo no se estira a 1200 px de ancho: una línea de texto tan larga se lee
   mal y es justo lo que se venía a arreglar. Se centra en una columna cómoda. */
/* La columna tiene que ESTIRARSE hasta abajo del panel, no medir lo que mide su
   contenido. Sin `flex:1` un chat corto dejaba el compositor a media altura con
   un vacío blanco debajo: el sitio donde se escribe cambiaba de posición según
   lo largo que fuera lo que ya había escrito. */
.copi-columna{flex:1;display:flex;flex-direction:column;min-height:0}

/* La lista de conversaciones, con títulos. Solo existe a pantalla completa: en
   la tira de 58 px no cabe un título y hay que reconocerlas por el avatar. */
.copi-lateral{width:270px;flex:none;display:flex;flex-direction:column;
  border-right:1px solid var(--linea);background:var(--panel-2);min-height:0}
.copi-lateral-cab{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.copi-lateral-cab b{flex:1;font-size:13px;font-weight:680}
.copi-lateral-lista{flex:1;overflow-y:auto;padding:0 8px 12px}
.copi-lateral-vacio{margin:14px 6px;font-size:12px;color:var(--tinta-3)}
.copi-grupo{padding:12px 6px 5px;font-size:11px;font-weight:680;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3)}
/* La caja contiene la fila y su aspa. El aspa se pone ENCIMA en vez de robarle
   ancho a la fila: si empujara, el título de la conversación se recortaría dos
   letras cada vez que pasas el ratón, y eso salta a la vista. */
.copi-fila-caja{position:relative}
.copi-fila{display:flex;align-items:center;gap:9px;width:100%;padding:8px 8px;
  border-radius:8px;text-align:left}
.copi-fila-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;display:grid;place-items:center;border-radius:4px;
  color:var(--tinta-3);opacity:0;transition:opacity .12s}
.copi-fila-x svg{width:13px;height:13px}
.copi-fila-x:hover{background:var(--activo);color:var(--rojo)}
@media (hover:hover){
  .copi-fila-caja:hover .copi-fila-x,.copi-fila-x:focus-visible{opacity:1}
  /* Con el aspa fuera, el punto de estado se ve; con el aspa encima, sobra. */
  .copi-fila-caja:hover .copi-punto{opacity:0}
}
/* Sin ratón el aspa está SIEMPRE, así que necesita su hueco: iba encima del
   punto de «trabajando / esperando respuesta», en el mismo sitio, y en el móvil
   no se veía ninguno de los dos (8-oct-2026). La fila deja sitio a la derecha y
   el punto queda a su izquierda. Y 32 px, que 24 es poco para un dedo. */
@media (hover:none){
  .copi-fila-x{opacity:1;width:32px;height:32px}
  .copi-fila-caja .copi-fila,.copiloto.pantalla .copi-fila-caja .copi-fila{padding-right:40px}
}
/* La cara viene del dique, donde va dentro de un botón de tamaño fijo y por eso
   lleva width:100%. Suelta en una fila flexible se comía 228 de 253 px y dejaba
   el título a cero de ancho: los renglones salían en blanco. */
.copi-fila .copi-ficha-cara{width:26px;height:26px;flex:none;border-radius:8px}
.copi-fila:hover{background:var(--hover)}
.copi-fila.activa{background:var(--activo)}
.copi-fila-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.copi-fila-txt b{font-size:13px;font-weight:550;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.copi-fila-txt small{font-size:11px;color:var(--tinta-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* `relative` y no `static`: el latido es un `::after` en `position:absolute`, y
   con el punto estático se anclaba al antepasado posicionado más cercano —la
   caja de la fila— así que en el móvil latía la FILA ENTERA del cajón en vez del
   punto. Sigue sin ser `absolute`, que es lo que había que quitar aquí: en la
   fila el punto va en su sitio del flujo, no pegado a una esquina. */
.copi-fila .copi-punto{position:relative;left:auto;bottom:auto;flex:none}
.copi-dique.oculto{display:none}
@media(max-width:900px){.copiloto.pantalla{left:0}.copi-lateral{display:none}}
/* Flotando sobre el contenido hace falta más sombra: sin ella, dos superficies
   blancas a la misma altura se leen como una sola partida por una raya. */
.copiloto.encima{box-shadow:0 24px 70px rgba(0,24,60,.24), 0 4px 14px rgba(0,24,60,.10)}
@media (prefers-reduced-motion:reduce){
  .marco,.copiloto,.copi-dique{transition:none}
}
.copi-cab{flex:none;display:flex;align-items:flex-start;gap:4px;padding:14px 12px 6px 18px}
/* Los botones se quedan arriba cuando el título crece al editarlo; el título es
   el único que puede ocupar varias líneas. */
.copi-cab > :not(.copi-tit){align-self:center}
/* Ocupación del contexto: ámbar al 70 %, rojo al 90 %. Sin ventana conocida
   no se inventa porcentaje; el aviso por volumen conserva su color. */
.copi-contexto{position:relative;flex:none}
.copi-contexto .copi-rueda{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border:0;background:none;border-radius:999px;color:var(--tinta-3);box-shadow:none}
.copi-rueda:hover{background:var(--activo);color:var(--tinta-2)}
.copi-rueda .aro{width:16px;height:16px;border-radius:999px;flex:none;
  background:conic-gradient(currentColor calc(var(--p) * 1%),var(--linea-2) 0);
  -webkit-mask:radial-gradient(circle,transparent 4.4px,#000 4.6px);
          mask:radial-gradient(circle,transparent 4.4px,#000 4.6px)}
.copi-rueda .aro.sin-medida{background:currentColor}
.copi-contexto .copi-rueda.subiendo{color:var(--ambar)}
.copi-contexto .copi-rueda.lleno{color:var(--rojo)}
.copi-contexto-info{display:none;position:absolute;right:-20px;top:100%;z-index:10;width:280px;max-width:calc(100vw - 32px);padding:14px;background:var(--panel);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra-alta);color:var(--tinta);font-size:12px;line-height:1.5;text-align:left;font-weight:400}
.copi-contexto-info b,.copi-contexto-info span{display:block}.copi-contexto-info span{font-variant-numeric:tabular-nums;margin-top:4px}
.copi-contexto-info p{margin:10px 0;color:var(--tinta-2)}.copi-contexto-info small{color:var(--tinta-2)}
.copi-contexto:not(.sin-ayuda):hover .copi-contexto-info,.copi-contexto:not(.sin-ayuda):focus-within .copi-contexto-info{display:block}
.copi-tit{flex:1;min-width:0;font-size:13px;font-weight:680;color:var(--tinta-2);
  text-align:left;padding:3px 6px;margin-left:-6px;border-radius:4px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Se ve que se puede escribir al pasar por encima, y al escribir se comporta
   como un campo: marco tenue y el texto en negro.
   
   EN REPOSO va en una línea con puntos suspensivos —es una cabecera, no puede
   crecer— pero AL EDITARLO el texto se parte en varias líneas. Antes seguía en
   `nowrap` con el recorte quitado, así que lo que escribías se iba hacia la
   derecha fuera de la caja y no se veía lo que estabas escribiendo: en el móvil,
   donde la caja mide media pantalla, era escribir a ciegas. */
.copi-tit:hover{background:var(--hover);color:var(--tinta)}
.copi-tit[contenteditable]:focus{background:var(--panel);color:var(--tinta);outline:none;
  box-shadow:0 0 0 1px var(--linea-2);
  white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;
  max-height:40vh;overflow-y:auto}
.copi-x{flex:none;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;
  background:none;color:var(--tinta-3);font-size:18px;line-height:1;cursor:pointer}
.copi-x:hover{background:var(--hover);color:var(--tinta)}
/* El hilo NUNCA anima su desplazamiento. Con `smooth`, cada vez que se
   repintaba el panel —al enviar, al parar, al llegar un trozo— el navegador
   viajaba desde arriba y se veía el chat dando saltos. Un chat se queda pegado
   abajo, sin viaje. */
.copi-hilo{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 8px;overflow-anchor:none}

/* Nada que leer todavía: el mensaje va centrado en el hueco, no arrinconado
   arriba, que es lo que hace que el panel vacío no parezca roto. */
.copi-vacio-marca{width:56px;height:56px;border-radius:16px;display:block;
  margin:0 auto 18px;box-shadow:0 2px 10px rgba(0,24,60,.16)}
.copi-vacio{color:var(--tinta-3);font-size:14px;line-height:1.65;
  display:flex;flex-direction:column;justify-content:center;min-height:100%;
  padding-bottom:24px;text-align:center}
.copi-vacio b{color:var(--tinta-2)}
.copi-vacio code{font-family:var(--mono);font-size:12px;background:var(--panel-2);
  padding:1px 5px;border-radius:4px}

.copi-trozo{display:contents}
.copi-msg{margin-bottom:22px;font-size:14px;line-height:1.68}
/* En COLUMNA y pegado a la derecha: el adjunto arriba y el texto debajo. En fila
   (como estaba) la imagen y el texto salían en dos columnas, cada uno a un lado. */
.copi-msg.mio{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.copi-msg.mio .copi-cuerpo{background:var(--panel-2);border-radius:16px;padding:10px 14px;
  max-width:88%;white-space:pre-wrap;color:var(--tinta)}
/* Un gris que se ve sobre el blanco de la página de IA: el de `--panel-2` era
   tan claro que la burbuja casi no se distinguía (Javier, 15-oct-2026). En
   oscuro se queda con el de su tema. */
:root:not([data-tema="oscuro"]) .copi-msg.mio .copi-cuerpo{background:#ededeb}
.copi-msg.ia .copi-cuerpo{color:var(--tinta)}
.copi-msg .copi-cuerpo>:first-child{margin-top:0}
.copi-msg .copi-cuerpo>:last-child{margin-bottom:0}
.copi-msg.ia .copi-cuerpo p{margin:0 0 12px}
.copi-msg.ia .copi-cuerpo ul,.copi-msg.ia .copi-cuerpo ol{margin:0 0 12px;padding-left:20px}
.copi-msg.ia .copi-cuerpo li{margin:3px 0}
.copi-msg.ia .copi-cuerpo h1,.copi-msg.ia .copi-cuerpo h2,.copi-msg.ia .copi-cuerpo h3{
  font-size:14px;margin:18px 0 8px}
.copi-msg.ia .copi-cuerpo pre{background:var(--panel-2);border:1px solid var(--linea);
  border-radius:8px;padding:11px 13px;overflow-x:auto;font-size:12px;margin:0 0 12px}
.copi-msg.ia .copi-cuerpo code{font-family:var(--mono);font-size:12px}
/* Una respuesta de la IA es texto que no controlamos: puede traer una ruta de
   fichero larguísima, una URL o un identificador sin un solo espacio donde
   partir. Sin esto, esa palabra salía de la burbuja y se cortaba contra el
   canto del panel —en el móvil, 607 px de palabra en una columna de 354—. */
.copi-msg .copi-cuerpo{overflow-wrap:anywhere}
/* Y una tabla de seis columnas tampoco cabe en un panel de 390 px. Con
   `width:100%` a secas se estiraba a 535 px, se salía de la burbuja y las
   últimas columnas quedaban recortadas contra el borde sin manera de llegar a
   ellas. En bloque es su propia caja con scroll: rueda ella sola. */
.copi-msg.ia .copi-cuerpo table{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 12px;
  display:block;overflow-x:auto;max-width:100%}
.copi-msg.ia .copi-cuerpo th,.copi-msg.ia .copi-cuerpo td{
  border-bottom:1px solid var(--linea);padding:6px 8px;text-align:left}

/* Lo que va haciendo: se enseña arriba de la respuesta y se queda como registro. */
/* Quién firma una respuesta. Solo aparece cuando NO contesta el asistente de
   siempre, así que no hace falta que compita con nada: una línea fina encima
   del texto basta para saber a quién estás leyendo. */
.copi-firma{display:flex;align-items:center;gap:6px;margin-bottom:6px;
  font-size:11px;font-weight:550;color:var(--tinta-3)}
.copi-firma svg{width:13px;height:13px;flex:none}
.copi-firma .agente-av{width:12px;height:12px;min-width:12px;border-radius:4px;font-size:10px;padding:0}
.copi-firma .agente-av img{width:100%;height:100%;object-fit:contain}
.copi-msg.de-agente .copi-cuerpo{border-left:2px solid var(--borde);padding-left:10px}

/* Y quién anda por la conversación, encima del compositor: es donde estás
   mirando cuando toca enterarse de que aquí contesta alguien más. */
/* Una sola línea con scroll horizontal: con muchos agentes, envolver en varias
   filas se comía media caja de escribir. Los nombres largos se recortan con «…»
   y el `title` los enseña enteros. */
.copi-quienes{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px;
  margin-bottom:7px;font-size:11px;color:var(--tinta-3);white-space:nowrap}
.copi-quienes small{flex:none}
.copi-quien{display:inline-flex;align-items:center;gap:5px;flex:none;
  max-width:240px;overflow:hidden;
  padding:3px 8px;border-radius:999px;background:var(--activo);
  font-weight:550;color:var(--tinta-2)}
.copi-quien span{overflow:hidden;text-overflow:ellipsis}
.copi-quien svg{width:12px;height:12px;flex:none}

.copi-pasos{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
/* Los pasos salen recortados con «…» para no ocupar; al pasar por encima el
   `title` enseña el comando o la acción entera. `cursor:help` lo anuncia. */
.copi-pasos span{font-size:12px;color:var(--tinta-3);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help}
.copi-pasos span::before{content:'· '}
.copi-ver-anteriores{display:block;margin:0 0 5px;padding:3px 8px;border-radius:8px;
  color:var(--tinta-3);font-size:12px;line-height:20px;min-width:32px;text-align:left}
.copi-ver-anteriores:hover{color:var(--tinta);background:var(--activo)}
/* Lo que dejaste escrito mientras aún contestaba: encolado, se manda al terminar. */
.copi-msg.pendiente{opacity:.5}
.copi-cola-nota{display:block;margin-top:4px;font-size:11px;color:var(--tinta-3);font-style:italic}
/* Cortar lo que está contestando y mandar esto ya. Va en la propia tarjeta de lo
   que espera turno: es ahí donde uno se da cuenta de que no quiere esperar. */
.copi-cola-ya{margin-top:6px;border:1px solid var(--borde);background:var(--panel);
  color:var(--tinta-2);border-radius:4px;padding:3px 9px;font-size:11px;cursor:pointer}
.copi-cola-ya:hover{color:var(--tinta);border-color:var(--linea-2)}

/* Está trabajando */
.copi-pensando{display:flex;align-items:center;gap:9px;color:var(--tinta-3);
  font-size:13px;margin-bottom:22px}
.copi-puntos{display:inline-flex;gap:4px}
.copi-puntos i{width:5px;height:5px;border-radius:50%;background:var(--tinta-3);
  animation:copi-latir 1.25s infinite ease-in-out}
.copi-puntos i:nth-child(2){animation-delay:.16s}
.copi-puntos i:nth-child(3){animation-delay:.32s}
@keyframes copi-latir{0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}}
/* Cursor mientras escribe la respuesta */
.copi-cursor{display:inline-block;width:7px;height:15px;background:var(--tinta-3);
  vertical-align:-2px;margin-left:2px;animation:copi-parpadeo 1s steps(2) infinite}
@keyframes copi-parpadeo{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .copi-puntos i,.copi-cursor{animation:none}
}

/* Compositor: caja en bloque con el texto arriba, el contexto en medio y los
   controles abajo, como el de la aplicación de referencia. */
.copi-pie{flex:none;padding:10px 14px 14px;position:relative}
.copi-caja{display:flex;flex-direction:column;gap:8px;border:1px solid var(--linea-2);
  border-radius:16px;padding:12px 12px 10px;background:var(--panel)}
.copi-caja:focus-within{border-color:var(--tinta-3);box-shadow:0 1px 8px rgba(0,0,0,.06)}
.copi-caja textarea{width:100%;border:0;background:none;resize:none;font-size:14px;
  line-height:1.5;max-height:180px;font-family:inherit;color:var(--tinta);
  overflow:hidden;scrollbar-width:thin}
.copi-caja textarea::placeholder{color:var(--tinta-3)}

/* Contexto que va con la pregunta sin escribirlo */
/* Los chips (proyecto, documento) van a la IZQUIERDA de la barra de abajo, en una
   tira que se scrollea a lo ancho; a su derecha, siempre visible, el modelo, y luego
   las acciones. Todo en la misma línea. `flex:1;min-width:0` deja que la tira ocupe
   el hueco y empuje el modelo y las acciones a la derecha sin que se corten. */
.copi-fijos{flex:1;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:5px;
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.copi-fijos::-webkit-scrollbar{height:5px}
.copi-fijos::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:999px}
/* El envoltorio del contexto y su lista NO pintan caja propia: sus chips participan
   directamente en la fila de arriba, así todo scrollea junto en una sola tira. */
#copi-contexto,.copi-chips{display:contents}
/* Cada chip mantiene su tamaño y su texto en una línea: se scrollea, no se encoge
   ni se parte. */
.copi-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:8px;
  border:1px solid var(--linea);background:var(--panel-2);font-size:12px;color:var(--tinta-2);
  flex-shrink:0;white-space:nowrap}
.copi-chip svg{width:12px;height:12px;color:var(--tinta-3)}
/* El selector de modelo es ahora un chip más, pequeño, en la misma fila. */
.copi-modelo{cursor:pointer;font-family:inherit}
.copi-modelo span{overflow:hidden;text-overflow:ellipsis;max-width:120px}
/* El avatar de un agente dentro de una ficha va al tamaño de la ficha, no al de
   una lista: `.agente-av.mini` mide 30 px y aquí hace que la ficha crezca al
   doble de alto que la de un cliente. */
.copi-chip .agente-av{width:15px;height:15px;border-radius:4px;font-size:10px}
.copi-chip .agente-av.con-emoji{font-size:10px}
/* La ficha de un agente se distingue de la de un proyecto: no es lo mismo «de
   qué hablamos» que «quién contesta», y a la segunda hay que poder mirarla y
   saber que el que va a responder no es el asistente de siempre. */
.copi-chip.agente{border-color:var(--acento-borde);background:var(--acento-b);color:var(--acento)}
.copi-chip.agente .copi-chip-x{color:var(--acento)}
.copi-chip.agente .copi-chip-x:hover{background:color-mix(in srgb,var(--acento) 18%,transparent)}

.copi-barra{display:flex;align-items:center;gap:6px}
.copi-pick{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;
  border:1px solid var(--linea);background:var(--panel-2);color:var(--tinta-2);
  font-size:12px;cursor:pointer;white-space:nowrap}
.copi-pick:hover{border-color:var(--tinta-3);color:var(--tinta)}
/* El modelo queda a la izquierda; micrófono y enviar se van juntos a la
   derecha y pegados, como en la aplicación de referencia. El aspecto del botón
   redondo se define arriba, en el bloque del compositor; aquí solo se coloca. */
.copi-derecha{flex:none;display:flex;align-items:center;gap:var(--e1)}
.copi-enviar:hover{opacity:.9}

/* Menú de modo y de modelo */
.copi-menu{position:fixed;z-index:90;min-width:230px;background:var(--panel);
  border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra-alta);
  padding:5px;overflow:hidden}
.copi-menu button{display:flex;align-items:flex-start;gap:9px;width:100%;padding:8px 10px;
  border:0;border-radius:8px;background:none;text-align:left;cursor:pointer}
.copi-menu button:hover{background:var(--hover)}
.copi-menu button.activo{background:var(--activo)}
.copi-menu button>svg{width:20px;height:20px;flex:none;color:var(--tinta)}
.copi-menu b{display:block;font-size:13px;color:var(--tinta)}
.copi-menu small{display:block;font-size:11px;color:var(--tinta-3);margin-top:2px}
/* Selector compacto y esfuerzo continuo, con escalones según el modelo. */
.copi-selector-modelo{display:inline-flex;align-items:center;gap:5px;min-width:0;height:32px;
  padding:0 9px;border:0;border-radius:999px;background:none;color:var(--tinta-2);
  font:inherit;font-size:12px;font-weight:550;cursor:pointer}
.copi-selector-modelo:hover,.copi-selector-modelo[aria-expanded="true"]{background:var(--hover);color:var(--tinta)}
.copi-selector-modelo span{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copi-selector-modelo svg{width:12px;height:12px;flex:none}
/* El logo del motor va dentro del selector (8-oct-2026): uno solo para motor y modelo. */
.copi-selector-modelo>svg:first-child{width:15px;height:15px;color:var(--tinta)}
.copi-menu.copi-ajustes{display:flex;flex-direction:column;width:min(328px,calc(100vw - 16px));
  min-width:0;max-height:min(70vh,560px);overflow-y:auto;padding:7px;border-radius:16px;outline:none}
.copi-ajustes-cab{display:flex;align-items:center;gap:9px;padding:10px 11px 13px;flex:none}
.copi-ajustes-cab>svg{width:21px;height:21px;color:var(--tinta);flex:none}
.copi-ajustes-cab b{font-size:14px}
/* Claude | ChatGPT como dos pestañas en la cabecera del menú. */
.copi-motores{gap:4px;padding:4px 4px 10px}
.copi-motores button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 10px;border:1px solid var(--linea);border-radius:12px;background:none;color:var(--tinta-2);cursor:pointer}
.copi-motores button svg{width:16px;height:16px;flex:none}
.copi-motores button b{font-size:13px}
.copi-motores button:hover{background:var(--hover);color:var(--tinta)}
.copi-motores button.activo{background:var(--activo);border-color:var(--linea-2);color:var(--tinta)}
.copi-motores>span{flex:none}
.copi-ajustes-cab>span{margin-left:auto;border-radius:8px;background:var(--panel-2);
  padding:3px 7px;font-size:11px;color:var(--tinta-3);text-transform:capitalize}
.copi-modelos-lista{min-height:80px;overflow-y:auto;flex:1 1 auto}
.copi-modelos-lista button{align-items:center;min-height:44px;padding:10px 12px;border-radius:12px;color:var(--tinta)}
.copi-modelos-lista button>span{flex:1;min-width:0}
.copi-modelos-lista button>svg{width:16px;height:16px;flex:none}
.copi-modelos-lista small{line-height:1.45}
.copi-esfuerzo{flex:none;border-top:1px solid var(--linea);margin-top:7px;padding:15px 12px 9px}
.copi-esfuerzo-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.copi-esfuerzo-cab label{font-weight:680;color:var(--tinta)}
.copi-esfuerzo-cab output{color:var(--tinta-2)}
.copi-esfuerzo input[type="range"]{appearance:none;-webkit-appearance:none;display:block;
  width:100%;height:6px;padding:0;border:0;border-radius:999px;margin:23px 0 15px;cursor:pointer;
  background:linear-gradient(to right,var(--tinta) var(--progreso),var(--linea-2) var(--progreso))}
.copi-esfuerzo input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;border:2px solid var(--panel);background:var(--tinta);box-shadow:0 1px 4px #0003}
.copi-esfuerzo input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  border:2px solid var(--panel);background:var(--tinta);box-shadow:0 1px 4px #0003}
.copi-selector-modelo:focus-visible,.copi-ajustes button:focus-visible,.copi-esfuerzo input:focus-visible{
  outline:2px solid var(--acento);outline-offset:4px}
.copi-esfuerzo-extremos{display:flex;justify-content:space-between;font-size:10px;color:var(--tinta-3)}
.copi-esfuerzo p{font-size:11px;line-height:1.5;color:var(--tinta-3);margin:10px 0 0;min-height:33px}
@media(max-width:600px){
  .copi-selector-modelo{height:44px;padding:0 5px}
  .copi-selector-modelo span{max-width:72px}
}
.copi-menu-tit{display:flex;align-items:baseline;gap:8px;padding:8px 10px 4px;font-size:11px;
  font-weight:680;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-3)}
.copi-menu-tit span{text-transform:none;letter-spacing:0;font-weight:400}
.copi-menu-tit:not(:first-child){margin-top:4px;border-top:1px solid var(--linea);padding-top:10px}
.copi-menu-nota{padding:4px 10px 8px;font-size:11px;color:var(--tinta-3)}

/* Un cliente que ya no está —pausa, baja, prospecto— sigue en la lista, al
   final y apagado: ni compite con los de ahora ni desaparece de la vista. Al
   pasar por encima recupera el color entero, que es cuando lo estás mirando. */
.tarjeta.apagada,tr.apagada,.nav-fila.apagada{opacity:.55;filter:saturate(.55)}
.tarjeta.apagada:hover,tr.apagada:hover,.nav-fila.apagada:hover{opacity:1;filter:none}
/* Su grupo en el lateral: el mismo tamaño que los demás, pero más callado. */
.nav-grupo.apagado{color:var(--tinta-3);opacity:.7;font-weight:550}

/* Dique de conversaciones: una cápsula flotante en el borde derecho, no una
   franja pegada al canto. Una ficha por conversación; las que tienen respuesta
   sin leer suben arriba de la línea, que es donde se mira. */
.copi-dique{position:fixed;top:0;right:0;bottom:0;width:var(--ancho-dique);z-index:71;
  display:flex;padding:10px 6px;
  transform:translateX(calc(100% + 10px));
  transition:transform .3s var(--curva),width .3s var(--curva)}
.copi-dique.abierto{transform:none}
.copi-capsula{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:4px 0 8px;border-radius:var(--r-panel);
  background:var(--panel-2);border:1px solid var(--linea);
  box-shadow:0 1px 6px rgba(16,18,22,.05)}
.copi-dique-lista{flex:1;min-height:0;width:100%;overflow-y:auto;scrollbar-width:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0}
.copi-dique-lista::-webkit-scrollbar{display:none}
.copi-dique-lista hr{width:16px;height:1px;border:0;background:var(--linea-2);margin:2px 0}

.copi-dique-abrir{flex:none;width:26px;height:22px;display:grid;place-items:center;position:relative;
  border:0;border-radius:8px;background:none;color:var(--tinta-3);cursor:pointer}
.copi-dique-abrir:hover{background:var(--hover);color:var(--tinta)}
.copi-dique-abrir svg{width:14px;height:14px}
.copi-globo{position:absolute;top:-4px;right:-5px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--ambar);color:#fff;
  font-size:10px;font-style:normal;font-weight:680;line-height:15px;text-align:center}

/* La ficha y su aspa comparten caja: el aspa sale al pasar por encima de
   cualquiera de las dos, si no se escapa entre una y otra. */
.copi-ficha-caja{position:relative;flex:none;display:grid;place-items:center}
.copi-ficha{position:relative;width:30px;height:30px;border:1px solid var(--linea-2);
  padding:0;cursor:pointer;border-radius:50%;background:var(--panel);
  display:grid;place-items:center;transition:transform .14s var(--curva)}
.copi-ficha-caja:hover .copi-ficha{transform:scale(1.08)}
.copi-ficha.activa{border-color:transparent;
  box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--tinte)}
.copi-ficha-cara{display:grid;place-items:center;width:100%;height:100%;
  border-radius:50%;overflow:hidden}
.copi-ficha-cara svg{width:15px;height:15px;color:var(--tinte)}
.copi-ficha-cara .avc{width:100%;height:100%;border-radius:50%;font-size:10px}

/* A la izquierda: la equis de cerrar vive arriba a la derecha, y con las dos
   cosas en el mismo lado la ficha se lee peor de lo que ya es pequeña. */
.copi-punto{position:absolute;left:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;
  border:2px solid var(--panel)}
/* Lo que está al día NO lleva punto. Un punto en cada ficha para decir «aquí no
   pasa nada» convierte en ruido la única parte de la pantalla que debería
   llamarte solo cuando hace falta. */
.copi-punto.leido{display:none}
/* Te ha contestado y no lo has abierto: VERDE, no azul.
   Azul latiendo y azul fijo eran el mismo color con y sin animación, y de reojo
   —que es como se mira el dique— no se distinguen. El color hace el trabajo y el
   latido solo refuerza. Tres estados, tres colores. */
.copi-punto.sin-leer{background:var(--verde)}
/* Trabajando ahora: azul, latiendo. Late porque está pasando algo ahora mismo. */
.copi-punto.trabajando{background:var(--acento)}
.copi-punto.trabajando::after{content:'';position:absolute;inset:-2px;border-radius:50%;
  background:var(--acento);opacity:.75;animation:copi-latido 1.6s cubic-bezier(0,0,.2,1) infinite}
/* Rojo solo para lo que de verdad va mal: la última ejecución se cayó. Si la
   respuesta normal también fuera roja, esta no tendría dónde destacar. */
.copi-punto.roto{background:var(--rojo)}
@keyframes copi-latido{75%,100%{transform:scale(2);opacity:0}}

/* `padding:0` a propósito: la regla general de los botones mete `1px 6px`, y en
   un círculo de 16 px eso son 12 px de relleno horizontal dentro de una caja de
   16. El contenido se sale por la derecha y la equis queda descentrada —medido:
   2,45 px—. Con la caja tan pequeña, el relleno lo pone el propio tamaño. */
.copi-quitar{position:absolute;top:-5px;right:-5px;width:16px;height:16px;padding:0;
  display:grid;place-items:center;border:1px solid var(--linea-2);border-radius:50%;
  background:var(--panel);color:var(--tinta-2);line-height:0;
  cursor:pointer;opacity:0;transform:scale(.7);pointer-events:none;
  transition:opacity .12s ease,transform .12s var(--curva)}
.copi-ficha-caja:hover .copi-quitar,.copi-quitar:focus-visible{
  opacity:1;transform:none;pointer-events:auto}
.copi-quitar:hover{border-color:var(--rojo);color:var(--rojo)}

/* Empuja el botón de pantalla completa al fondo de la tira recogida */
.copi-hueco{flex:1}
.copi-dique-nueva{flex:none;width:28px;height:28px;display:grid;place-items:center;
  border:1px solid var(--linea-2);border-radius:50%;background:var(--panel);
  color:var(--tinta-2);cursor:pointer}
.copi-dique-nueva:hover{border-color:var(--tinta-3);color:var(--tinta);background:var(--hover)}
.copi-dique-nueva svg{width:13px;height:13px}

@media (prefers-reduced-motion:reduce){.copi-punto.trabajando::after{animation:none}}

/* La línea de una rutina. No es un mensaje de nadie: es el sello de quién
   escribe y cada cuánto. Sin burbuja y en gris, para que lo primero que se lea
   sea lo que la rutina tiene que decirte. */
/* La estrella de Claude en la ficha del dique, con su naranja de marca. */
.copi-ficha-cara.claude svg{width:22px;height:22px;color:#d97757}

.copi-rutina{display:flex;align-items:center;gap:8px;margin:14px 0 10px;
  font-size:11px;font-weight:550;color:var(--tinta-3);letter-spacing:.02em}
.copi-rutina::after{content:"";flex:1;height:1px;background:var(--linea)}

.copi-ayuda{margin-top:7px;font-size:11px;color:var(--tinta-3);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.copi-ayuda>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copi-ayuda button{display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:3px 8px;border-radius:999px;color:var(--tinta-3);font-size:11px;font-weight:550}
.copi-ayuda button:hover{background:var(--activo);color:var(--tinta-2)}
.copi-ayuda button svg{width:12px;height:12px}

/* Sugerencias de mención */
.copi-menciones{position:absolute;left:14px;right:14px;bottom:calc(100% - 6px);z-index:8;
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--sombra-alta);overflow:hidden;max-height:270px;overflow-y:auto}
.copi-menciones button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;
  border:0;background:none;text-align:left;cursor:pointer}
.copi-menciones button:hover,.copi-menciones button.activo{background:var(--hover)}
.copi-menciones b{display:block;font-size:13px}
.copi-menciones small{display:block;font-size:11px;color:var(--tinta-3)}
.copi-menciones em{margin-left:auto;font-style:normal;font-size:10px;color:var(--tinta-3);
  border:1px solid var(--linea);border-radius:4px;padding:1px 6px}
.copi-m-ico svg{width:15px;height:15px;color:var(--tinta-3)}

/* Lista de conversaciones */
.copi-lista-cab{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:8px}
.copi-lista button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;
  border:0;border-radius:8px;background:none;text-align:left;cursor:pointer}
.copi-lista button:hover{background:var(--hover)}
.copi-lista b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copi-lista small{display:block;font-size:11px;color:var(--tinta-3)}
.copi-lista span{flex:1;min-width:0}
.copi-borrar{font-style:normal;color:var(--tinta-3);opacity:0;padding:2px 5px}
.copi-lista button:hover .copi-borrar{opacity:1}
.copi-borrar:hover{color:var(--rojo)}

.copi-boton{gap:5px;position:relative}
.copi-boton svg{width:14px;height:14px}
/* Cuántas conversaciones tienen respuesta sin abrir */
.copi-boton-globo{min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--ambar);color:#fff;font-size:10px;font-style:normal;font-weight:680;
  line-height:16px;text-align:center}

/* Atrás y adelante en la barra, y acciones de la ruta */
.miga-accion{margin-left:6px;font-size:12px;color:var(--tinta-3);opacity:0;transition:opacity .12s}
.migas:hover .miga-accion,.miga-accion:focus-visible{opacity:1}
.miga-accion:hover{color:var(--tinta)}
@media(max-width:700px){.hist-nav{display:none}}

/* Filtro del árbol de documentos */
.nav-buscar{display:flex;align-items:center;gap:6px;margin:6px 0 4px;padding:5px 8px;
  border:1px solid var(--linea);border-radius:8px;background:var(--panel)}
.nav-buscar:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px rgba(31,79,216,.1)}
.nav-buscar svg{width:13px;height:13px;color:var(--tinta-3);flex:none}
.nav-buscar input{flex:1;min-width:0;border:0;background:none;font-size:12px;
  color:var(--tinta);outline:none}
.nav-buscar-x{border:0;background:none;color:var(--tinta-3);cursor:pointer;
  font-size:14px;line-height:1;padding:0 3px}
.nav-buscar-x:hover{color:var(--tinta)}
.doc-ruta{margin-left:auto;padding-left:8px;font-size:10px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44%}

.tipo-app{color:#0b8a5c}

/* En una pantalla estrecha no hay sitio para encoger nada: el panel se pone
   encima a pantalla completa y el dique se queda fuera. Sin esto la aplicación
   se iba 488 px a la izquierda y desaparecía. */
@media(max-width:900px){
  .marco,.marco.con-copiloto{right:0}
  .copiloto{top:0;bottom:0;right:0;width:100%;border-radius:0}
  .copi-dique{display:none}
}

/* ── Movimiento ────────────────────────────────────────────────────────────
   Poco y corto. Lo que se pinta entra con un fundido de 140 ms y 3 px, las
   tarjetas se levantan al pasar por encima y la flecha de la fila se adelanta.
   Es barato y es la mayor parte de la diferencia entre «funciona» y «está bien
   hecho». Todo se apaga si el sistema pide menos movimiento. */
/* (29-sep-2026) Fuera también el «entrar» de cada hijo de #lienzo: el
   placeholder, el panel vacío y luego el contenido subían 3 px cada uno, y se
   sumaba al de la pantalla. Dos saltos por navegación. */

.tarjeta,.autom-fila,.bbdd-fila,.bandeja-fila{
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease,border-color .16s ease}
.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--linea-2)}

.fila-flecha,.tarjeta .fl,.bandeja-fila .fl{transition:transform .16s cubic-bezier(.22,1,.36,1)}
.autom-fila:hover .fila-flecha,.bbdd-fila:hover .fila-flecha,
.tarjeta:hover .fl,.bandeja-fila:hover .fl{transform:translateX(3px)}

.btn,.riel-item,.nav-item,.tab{transition:background .14s ease,color .14s ease,border-color .14s ease}

@media (prefers-reduced-motion:reduce){
  #lienzo > *{animation:none}
  .tarjeta,.autom-fila,.bbdd-fila,.bandeja-fila,.fila-flecha,.tarjeta .fl,.btn,.riel-item,.nav-item,.tab{
    transition:none}
  .tarjeta:hover{transform:none}
}

/* El color del estado es el CANTO de la columna, no una raya suelta encima:
   antes el 2 px flotaba por fuera del redondeo y parecía pegado con celo.
   Ahora es el borde superior de la propia tarjeta —así se curva con ella— más
   un tinte que se apaga en los primeros 90 px. */
.bd-tablero .col{border-top:2px solid var(--tono,var(--linea-2));
  background:linear-gradient(var(--tinte-col,transparent) 0,transparent 90px),var(--panel-2)}
.bd-tablero .col-pendiente{--tono:var(--linea-2)}
.bd-tablero .col-en_curso {--tono:var(--azul);  --tinte-col:var(--azul-b)}
.bd-tablero .col-bloqueado{--tono:var(--rojo);  --tinte-col:var(--rojo-b)}
.bd-tablero .col-hecho    {--tono:var(--verde); --tinte-col:var(--verde-b)}

/* Cómo fueron las últimas ejecuciones, de más antigua a más reciente. Una tira
   de marcas dice en un golpe de vista lo que un «hace 17 h» no dice: si algo
   falla siempre o falló una vez. */
.autom-ultima{display:flex;align-items:center;gap:8px;min-width:0}
.autom-tira{display:inline-flex;gap:2px;flex:none}
.autom-tira i{width:3px;height:12px;border-radius:999px;background:var(--linea-2)}
.autom-tira i.ok{background:var(--verde);opacity:.75}
.autom-tira i.mal{background:var(--rojo)}
.autom-tira i.gris{background:var(--tinta-3);opacity:.4}

/* El pulso: una barra por ejecución, la más reciente a la derecha. Es lo único
   que dice si una automatización va fina o a trompicones, y sale de datos que
   ya están cargados —no hace falta documentar nada para verlo—. */
.autom-pulso{display:flex;align-items:flex-end;gap:3px;height:26px}
.autom-pulso i{flex:1;min-width:4px;max-width:14px;height:100%;border-radius:4px;
  background:var(--linea-2);display:block}
.autom-pulso i.verde{background:var(--verde)}
.autom-pulso i.rojo{background:var(--rojo)}
.autom-pulso i.ambar{background:var(--ambar)}
.autom-pulso i.gris{background:var(--linea-2)}
.autom-pulso-pie{font-size:11px;color:var(--tinta-3);margin:7px 0 0}

/* Un solo juego de iconos: SVG del mismo trazo en toda la interfaz. Estas
   reglas les dan el tamaño que antes traía puesto cada glifo. Los emoji siguen
   existiendo donde son CONTENIDO —el icono que le pones a una página, el emoji
   de un aviso— pero no en los botones. */
.lat-icono svg,.miga-accion svg{width:15px;height:15px}
.lat-icono.marcado{color:var(--ambar)}
.lat-icono.marcado svg{fill:currentColor}
.pag-formato button svg{width:15px;height:15px}
.copi-pick svg{width:13px;height:13px;flex:none}
.copi-x svg{width:14px;height:14px}
/* 9 px dentro de 16: con 14 la equis tocaba el borde del círculo. */
.copi-quitar svg{width:9px;height:9px;display:block}
.copi-quitar svg{width:9px;height:9px;stroke-width:2.6}
.actividad-icono svg{width:14px;height:14px}
.enlace-fila svg,.enlaces svg{width:15px;height:15px}

/* ── Tres alturas, aplicadas ───────────────────────────────────────────────
   Levantado: la tarjeta lleva hairline y NO sombra en reposo; la sombra sale
   al pasar por encima, que es lo que la separa del plano.
   Flotante: panel y menú llevan sombra y NINGÚN borde. Un borde a la vez que
   una sombra es lo que hacía que nada pareciera estar encima de nada. */
.tarjeta,.col,.tk,.secc{box-shadow:none}
.copiloto,.menu,.menu-flotante,.modal,.peek,.copi-menu,.copi-menciones{border:0}

/* ── Ritmo vertical ────────────────────────────────────────────────────────
   32 entre secciones, 16 entre bloques, 8 entre filas. */
.lienzo > section,.lienzo > .bloq{margin-bottom:var(--e6)}
.bloq-cab{margin-bottom:var(--e4)}
.lienzo section + section{margin-top:var(--e6)}

/* ── Densidad de tabla ─────────────────────────────────────────────────────
   Filas de alto fijo y cabecera que se queda arriba al bajar. Una tabla que
   respira distinto en cada fila se lee peor, aunque quepa más. */
.bbdd-fila,.autom-fila{min-height:56px}
.bbdd-cab,.autom-tabla-cab{position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(8px);-webkit-backdrop-filter:saturate(1.6) blur(8px)}
.bbdd-fila{position:relative}
.bbdd-fila::after{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;
  border-radius:999px;background:transparent;transition:background .14s ease}
.bbdd-fila:hover::after,.autom-fila:hover::after{background:var(--acento)}

/* ── Estados vacíos ────────────────────────────────────────────────────────
   Un vacío es la mejor ocasión para enseñar qué se puede hacer, no para
   escribir una frase gris y dejar a la persona mirando. */
.nada{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--e3);padding:var(--e7) var(--e5);color:var(--tinta-3)}
.nada-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;
  background:var(--acento-b);color:var(--acento)}
.nada-ico svg{width:20px;height:20px}
.nada b{display:block;font-size:14px;font-weight:680;color:var(--tinta);letter-spacing:-.01em}
.nada p{margin:0;font-size:13px;max-width:38ch;line-height:1.55}
.nada .btn{margin-top:var(--e1)}

/* Automatizaciones: el listado localiza; el trabajo ocurre en un panel lateral. */
.autom-cliente-limpio{max-width:920px}.autom-cliente-cab{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}.autom-cliente-cab h2{font-size:18px;margin:0}.autom-cliente-cab p{font-size:12px;color:var(--tinta-3);margin:4px 0 0}.autom-cliente-lista{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);overflow:hidden}.autom-cliente-lista>button{position:relative;width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--linea);text-align:left;min-height:60px}.autom-cliente-lista>button:last-child{border:0}.autom-cliente-lista>button:hover{background:var(--hover)}.autom-cliente-lista>button>span:nth-child(2){min-width:0}.autom-cliente-lista b,.autom-cliente-lista small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autom-cliente-lista b{font-size:13px;font-weight:550}.autom-cliente-lista small{font-size:11px;color:var(--tinta-3);margin-top:3px}.autom-cliente-lista .fila-flecha{position:static;justify-self:end}.autom-cliente-lista .pill{display:inline-flex;align-items:center;gap:5px}
.autom-detalle{width:min(780px,72vw)}.autom-panel-barra{gap:7px;padding-left:20px!important;padding-right:14px!important}.autom-panel-barra .detalle-ruta{margin-right:auto}.autom-detalle .detalle-hero{padding:28px 30px 20px}.autom-detalle .detalle-tabs{padding:0 30px}.autom-detalle #autom-panel-cuerpo{padding-bottom:40px}.autom-detalle .detalle-seccion{margin-left:30px;margin-right:30px}.autom-detalle .detalle-metricas{margin-left:30px;margin-right:30px}.autom-detalle .detalle-tecnico{margin-left:30px;margin-right:30px}.autom-detalle .autom-falta{margin-left:30px;margin-right:30px}.autom-panel-sin-datos{margin:28px 30px;padding:24px;border:1px dashed var(--linea-2);border-radius:8px;background:var(--panel-2)}.autom-panel-sin-datos b{font-size:13px}.autom-panel-sin-datos p{font-size:12px;color:var(--tinta-3);line-height:1.55;margin:5px 0 0}.autom-config-acciones{display:flex;gap:7px;flex-wrap:wrap}.autom-detalle .autom-motivo{margin:0 30px 17px}.autom-detalle .detalle-datos>div{grid-template-columns:150px 1fr}.autom-detalle .detalle-seccion h2{font-size:13px;text-transform:none}.autom-detalle .detalle-integracion{align-items:stretch}.autom-detalle .detalle-integracion code{display:flex;align-items:center;background:var(--panel-2);border-radius:8px;font-size:11px}
@media(max-width:850px){.autom-detalle{width:min(100%,680px)}.autom-detalle .detalle-hero,.autom-detalle .detalle-tabs{padding-left:18px;padding-right:18px}.autom-detalle .detalle-seccion,.autom-detalle .detalle-metricas,.autom-detalle .detalle-tecnico,.autom-panel-sin-datos,.autom-detalle .autom-motivo{margin-left:18px;margin-right:18px}}@media(max-width:560px){.autom-cliente-lista>button{grid-template-columns:34px minmax(0,1fr) 18px}.autom-cliente-lista .pill{display:none}.autom-panel-barra>a{display:none}.autom-detalle .detalle-hero{align-items:flex-start;flex-wrap:wrap}.autom-detalle .detalle-hero>.pill{margin-left:57px}.autom-detalle .detalle-tabs{overflow-x:auto}.autom-detalle .detalle-integracion{flex-direction:column}}

/* ── Dashboard del cliente ─────────────────────────────────────────────── */
.dash{display:flex;flex-direction:column;gap:18px;padding:4px 0 40px}
.dash-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-cabecera h2{font-size:18px;font-weight:680;letter-spacing:-.01em;margin:0}
.dash-fuentes{margin:4px 0 0;font-size:12px;color:var(--tinta-2)}
.dash-fuentes [title]{cursor:help}
.dash-fuente-parada{color:var(--ambar)}
.dash-volcar{background:none;border:0;padding:0;font:inherit;color:var(--tinta-3);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dash-volcar:hover{color:var(--tinta)}
.dash-acciones{display:flex;gap:8px}
/* Las cifras van juntas y del mismo alto: es una fila de titulares, y si cada
   una mide lo suyo el ojo deja de poder compararlas de un vistazo. */
.dash-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* Cambiar de pestaña no borra la pantalla: el cuerpo se atenúa mientras llegan
   sus datos y las pestañas y la cabecera se quedan donde estaban. */
.dash-cuerpo{min-width:0;transition:opacity .12s ease}
.dash-cuerpo.cargando{opacity:.45;
  /* La regla genérica `.cargando` (flex + 50 px de relleno) se colaba aquí: el panel
     encogía 100 px y bajaba 50 en cada cambio de pestaña. */
  display:block;padding:0}
.dash-w{grid-column:span 4;min-width:0}
.dash-w[data-ancho="1"]{grid-column:span 1}
.dash-w[data-ancho="2"]{grid-column:span 2}
.dash-w[data-ancho="3"]{grid-column:span 3}
.dash-w>*{height:100%}
/* Por debajo de esto, cuatro columnas dejan las cifras ilegibles: se pasa a dos,
   y a una en el móvil. La disposición que elige cada cliente es una preferencia,
   no una promesa que valga en una pantalla de 400 px. */
@media (max-width:1100px){
  .dash-w[data-ancho="1"],.dash-w[data-ancho="2"],.dash-w[data-ancho="3"]{grid-column:span 2}
}
@media (max-width:620px){
  .dash-rejilla{grid-template-columns:minmax(0,1fr)}
  .dash-w,.dash-w[data-ancho="1"],.dash-w[data-ancho="2"],.dash-w[data-ancho="3"]{grid-column:span 1}
  /* Un anillo de 150 px al lado de una leyenda de seis filas, en 380 px de
     ancho, deja las dos cosas ilegibles: se apilan. */
  .dash-reparto-cuerpo{flex-direction:column;align-items:stretch;gap:14px}
  .dash-donut{align-self:center}
}
.dash-origen{align-self:center;font-size:11px;color:var(--tinta-2);border:1px solid var(--linea);
  border-radius:999px;padding:3px 10px}
.dash-tarjeta,.dash-panel{background:var(--panel);border:1px solid var(--linea);
  border-radius:12px;padding:14px 18px 16px}
/* El título de un bloque es una ETIQUETA, no un encabezado: en versalitas y
   pequeño se lee como «de qué va esta caja» y deja el peso visual a la cifra,
   que es lo que se viene a mirar. */
.dash-tarjeta h3,.dash-panel h3{margin:0;font-size:11px;font-weight:550;color:var(--tinta-3);
  letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.dash-cifra{margin:8px 0 0;font-size:28px;font-weight:680;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.dash-var{margin:4px 0 0;font-size:12px;font-weight:550;font-variant-numeric:tabular-nums}
.dash-var span{font-weight:400;color:var(--tinta-2)}
.dash-var.bien{color:var(--verde)} .dash-var.mal{color:var(--rojo)}
.dash-var.igual{color:var(--tinta-2);font-weight:400}
.dash-prov{font-size:10px;font-weight:400;color:var(--tinta-2);background:var(--tablero);
  border:1px solid var(--linea);border-radius:999px;padding:1px 7px;letter-spacing:0}
/* Los colores de una serie, un reparto o una leyenda. Cinco y basta: a partir de
   ahí hay que repetir o inventar tonos que no se distinguen, y un gráfico con
   nueve colores no se lee. El primero es el acento de la plataforma. */
.dash{--s0:var(--acento);--s1:#1f8a72;--s2:#b2660a;--s3:#7a4fd0;--s4:#c2255c;--sr:#a3a7ae}
.dash [class~="s0"]{--c:var(--s0)} .dash [class~="s1"]{--c:var(--s1)}
.dash [class~="s2"]{--c:var(--s2)} .dash [class~="s3"]{--c:var(--s3)}
.dash [class~="s4"]{--c:var(--s4)} .dash [class~="sr"]{--c:var(--sr)}

/* ── La tarjeta de una cifra ──────────────────────────────────────────────── */
.dash-tarjeta{display:flex;flex-direction:column;gap:0;padding-bottom:0;overflow:hidden}
.dash-cifra{margin:6px 0 0;font-size:22px;font-weight:680;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.dash-var{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:7px 0 0;font-size:11px}
/* El porcentaje va en una pastilla con fondo: en una fila de cuatro tarjetas, un
   texto verde de once píxeles no se ve, y es la mitad de la información. */
.dash-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;
  font-weight:680;font-variant-numeric:tabular-nums;background:var(--tablero);color:var(--tinta-2)}
.dash-chip.bien{background:color-mix(in srgb,var(--verde) 12%,transparent);color:var(--verde)}
.dash-chip.mal{background:color-mix(in srgb,var(--rojo) 12%,transparent);color:var(--rojo)}
.dash-antes{color:var(--tinta-3);font-variant-numeric:tabular-nums}
/* La chispa toca los bordes de la tarjeta: es fondo, no un gráfico más. */
.dash-chispa{display:block;width:calc(100% + 36px);height:34px;margin:10px -18px -1px}
.dash-chispa .linea{fill:none;stroke:var(--acento);stroke-width:1.5;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.dash-chispa .area{fill:var(--acento);opacity:.07;stroke:none}

/* ── El gráfico ───────────────────────────────────────────────────────────── */
.dash-gr{position:relative;margin-top:12px;touch-action:none}
.dash-gr svg{display:block;width:100%;height:172px;overflow:visible}
.dash-gr-rej{stroke:var(--linea);stroke-width:1;vector-effect:non-scaling-stroke}
.dash-gr-linea{fill:none;stroke:var(--c,var(--acento));stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:opacity .15s ease}
/* La segunda línea va discontinua además de en otro color: quien no distingue
   el verde del azul se queda sin gráfico si el color es lo único que separa. */
.dash-gr-linea.s1{stroke-dasharray:5 3}
.dash-gr-linea.s2{stroke-dasharray:1 3}
.dash-gr-linea.apagada{opacity:0}
.dash-gr-area{fill:var(--acento);opacity:.07;stroke:none}
/* Los valores del eje. Una gráfica sin números obliga a pasar el ratón por cada
   punto para saber de qué orden estamos hablando. Van sobre el propio lienzo,
   con el fondo del panel detrás para que la línea no los atraviese. */
.dash-gr-val{position:absolute;transform:translateY(-50%);font-size:10px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--c,var(--tinta-3));opacity:.85;
  background:var(--panel);padding:2px 3px;pointer-events:none;transition:opacity .15s ease}
.dash-gr-val.izq{left:0} .dash-gr-val.der{right:0}
.dash-gr-val.apagada{opacity:0}
.dash-gr-guia{position:absolute;top:0;bottom:0;width:1px;background:var(--tinta-3);
  opacity:.35;pointer-events:none;transform:translateX(-.5px)}
.dash-gr-punto{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:999px;
  background:var(--c,var(--acento));box-shadow:0 0 0 2.5px var(--panel);pointer-events:none}
.dash-gr-tip{position:absolute;top:-6px;transform:translate(-50%,-100%);pointer-events:none;
  background:var(--tinta);color:#fff;border-radius:8px;padding:7px 10px;white-space:nowrap;
  font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:5}
.dash-gr-tip>b{font-weight:680;font-size:11px;opacity:.72;letter-spacing:.02em}
.dash-gr-tip span{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;opacity:.9}
.dash-gr-tip span::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--c,#fff);flex:none}
.dash-gr-tip span b{font-weight:680;opacity:1}
.dash-gr-pie{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:8px;font-size:11px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.dash-gr-suelo{font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-leyenda{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dash-leyenda button{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;
  border:1px solid var(--linea);border-radius:999px;background:none;cursor:pointer;
  font:inherit;font-size:11px;color:var(--tinta-2);transition:all .15s ease}
.dash-leyenda button:hover{border-color:var(--tinta-3);color:var(--tinta)}
.dash-leyenda button::before{content:"";width:10px;height:2.5px;border-radius:4px;
  background:var(--c,var(--acento));flex:none}
.dash-leyenda button[aria-pressed="false"]{color:var(--tinta-3);opacity:.6}
.dash-leyenda button[aria-pressed="false"]::before{background:var(--tinta-3)}

/* ── El reparto: anillo a la izquierda, cifras a la derecha ───────────────── */
.dash-sub{margin-left:auto;font-weight:400;color:var(--tinta-3);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0}
.dash-reparto-cuerpo{display:flex;align-items:center;gap:18px;margin-top:12px}
.dash-donut{position:relative;flex:none;width:140px;height:140px}
.dash-donut svg{display:block;width:100%;height:100%}
.dash-donut-centro{position:absolute;inset:26px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;text-align:center}
/* El titular del anillo es el trozo MAYOR con su porcentaje, no el total: el
   total ya está en la cabecera y no es lo que se viene a mirar aquí. */
.dash-donut-centro b{font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.dash-donut-centro span{font-size:10px;color:var(--tinta-3);line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* El trazo tiene que ir AQUÍ. Un `circle` de SVG sin `stroke` no es un círculo
   fino: no se dibuja nada, y el anillo se quedaba invisible con la leyenda al
   lado en colores, que es un fallo que parece un hueco de maquetación. */
.dash-q{stroke:var(--c,var(--acento));transition:opacity .12s ease}
.dash-reparto:hover .dash-q{opacity:.4}
.dash-reparto .dash-q:hover{opacity:1}
.dash-leyenda-lista{flex:1;min-width:0;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr) 46px auto auto;align-items:center;
  gap:9px 10px;font-size:12px}
.dash-leyenda-lista li{display:contents}
.dash-leyenda-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-2)}
/* Una barra corta al lado del porcentaje: el número dice cuánto y la barra deja
   comparar dos filas sin leerlos. */
.dash-leyenda-b{height:5px;border-radius:999px;background:var(--tablero);overflow:hidden}
.dash-leyenda-b i{display:block;height:100%;border-radius:999px;background:var(--c,var(--acento))}
.dash-leyenda-lista b{font-weight:680;font-variant-numeric:tabular-nums;text-align:right}
.dash-leyenda-v{color:var(--tinta-3);font-variant-numeric:tabular-nums;font-size:11px;text-align:right}

/* ── El embudo ────────────────────────────────────────────────────────────── */
.dash-embudo ol{list-style:none;margin:12px 0 0;padding:0}
.dash-embudo li{--c:var(--acento)}
.dash-embudo li.p1{--c:#1f6fd0} .dash-embudo li.p2{--c:#2a8aa8}
.dash-embudo li.p3{--c:#1f8a72} .dash-embudo li.p4{--c:#4a9a3f}
/* La caída va ENTRE dos barras, colgando de una línea: es el puente de un paso
   al siguiente, no un dato del mismo rango que los pasos. */
.dash-emb-salto{display:flex;align-items:center;gap:6px;margin:0;padding:6px 0 6px 12px;
  border-left:1px solid var(--linea);font-size:11px;color:var(--tinta-3)}
.dash-emb-salto span{font-weight:680;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.dash-emb-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dash-emb-t{font-size:12px;color:var(--tinta-2)}
.dash-emb-fila b{font-size:16px;font-weight:680;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dash-emb-barra{height:8px;margin-top:5px;border-radius:999px;background:var(--tablero);overflow:hidden}
.dash-emb-barra i{display:block;height:100%;border-radius:999px;background:var(--c)}
.dash-panel-tabla{padding-bottom:6px}
.dash-scroll{overflow-x:auto;margin-top:8px}
.dash-tabla{width:100%;border-collapse:collapse;font-size:12px}
.dash-tabla th{text-align:right;font-weight:550;color:var(--tinta-3);font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;padding:0 0 7px;white-space:nowrap}
.dash-tabla th:first-child,.dash-tabla td:first-child{text-align:left}
.dash-tabla td{position:relative;padding:7px 0;border-top:1px solid var(--linea);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-tabla th+th,.dash-tabla td+td{padding-left:16px}
/* El nombre puede ser largo («LEAD_AVATAR_MENOPAUSIA_V03») y si parte la fila en
   dos líneas, la tabla deja de escanearse de un vistazo. Se corta con puntos y
   el nombre entero vive en el title. */
.dash-n{max-width:300px;padding-right:16px;color:var(--tinta);
  display:flex;align-items:center;gap:9px}
/* El recorte vive en el texto y no en la celda: con la miniatura dentro, poner
   el `overflow` en la celda recortaría también la imagen. */
.dash-n>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* La creatividad. Se baja a 128 px y se enseña a 36 o a 56 según dónde: el
   tamaño que sirve Meta por defecto es 64×64 y en una pantalla retina eso sale
   borroso, porque un CSS px son dos de verdad.
   `object-fit:cover` porque las creatividades vienen en vertical, en cuadrado y
   en 16:9, y sin recortar cada fila mediría distinto y la tabla bailaría. */
.dash-mini{flex:none;width:var(--px,36px);height:var(--px,36px);border-radius:4px;
  object-fit:cover;background:var(--tablero);border:1px solid var(--linea)}
.dash-tabla tbody tr:hover td{background:var(--hover)}
/* La columna por la que se ordena manda: va en negrita y con la barra detrás.
   Sin eso, doce columnas iguales no dicen cuál estás mirando. */
.dash-tabla td.ord{font-weight:680}
.dash-ord th{cursor:pointer;user-select:none}
.dash-ord th:hover{color:var(--tinta-2)}
.dash-ord th.ord{color:var(--tinta)}
.dash-ord th.ord::after{content:"▾";font-size:10px;margin-left:4px;vertical-align:1px}
.dash-ord th.ord.asc::after{content:"▴"}
/* La barra vive DETRÁS del número, no en una columna aparte: así se lee el
   reparto sin restar y sin gastar ancho de tabla. */
.dash-barra{position:absolute;right:0;top:50%;transform:translateY(-50%);height:18px;
  border-radius:4px;background:var(--acento);opacity:.12;pointer-events:none}
.dash-tabla td>span{position:relative}
/* EN EL MÓVIL LA TABLA DEJA DE SER UNA TABLA. El panel de anuncios de Meta trae
   once columnas; en 390 px de ancho eso es una barra de desplazamiento
   horizontal DENTRO de una página que ya se desplaza en vertical, y lo que se
   acaba mirando es la primera columna y media. Cada fila pasa a ser una ficha:
   el nombre de titular y los valores en dos columnas, cada uno con su etiqueta,
   que sale de `data-col` —la cabecera que en la ficha ya no está—. Es el MISMO
   HTML: solo cambia cómo se dispone, así que ordenar por una columna sigue
   funcionando igual y no hay dos marcados que mantener en paralelo. */
@media (max-width:620px){
  .dash-scroll{overflow-x:visible}
  .dash-tabla,.dash-tabla tbody{display:block}
  .dash-tabla thead{display:none}
  .dash-tabla tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;
    border:1px solid var(--linea);border-radius:12px;padding:9px 12px;margin-top:8px}
  .dash-tabla tbody tr:hover td{background:none}
  .dash-tabla td{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:5px 0;border-top:0;white-space:normal}
  .dash-tabla td+td{padding-left:0}
  .dash-tabla td::before{content:attr(data-col);color:var(--tinta-3);font-size:10px;
    text-transform:uppercase;letter-spacing:.05em;text-align:left}
  /* El nombre es el titular de la ficha: ancho entero, sin etiqueta y sin
     recortar. Aquí sí puede ocupar dos líneas —es lo que identifica la fila, y
     «LEAD_AVATAR_MENOPAUSIA_V03» cortado a la mitad no identifica nada—. */
  /* `flex` y no `block`: la primera celda lleva la miniatura al lado del nombre
     y en bloque la imagen y el texto se apilarían. */
  .dash-tabla td:first-child{grid-column:1/-1;display:flex;align-items:center;gap:9px;
    justify-content:flex-start;font-weight:550;color:var(--tinta);
    padding:0 0 7px;margin-bottom:3px;border-bottom:1px solid var(--linea)}
  .dash-tabla td:first-child::before{content:none}
  .dash-n{max-width:none;padding-right:0;align-items:flex-start}
  .dash-n>span{overflow:visible;white-space:normal}
  /* La barra de reparto se apaga: mide el ancho de SU columna, y aquí la columna
     es media ficha, así que el mismo dato pintaría otra proporción. Cuál manda
     se sigue viendo en la negrita de `.ord`. */
  .dash-tabla .dash-barra{display:none}
}
/* ── Fatiga creativa ──────────────────────────────────────────────────────
   Fichas y no tabla: lo que se lee por anuncio es una frase —lo ven 3,1 veces y
   lo pinchan la mitad que al estrenarse—, y en una tabla de siete columnas esa
   frase hay que reconstruirla mirando a izquierda y derecha. El color solo
   acompaña: el veredicto va ESCRITO, porque un borde rojo es invisible para
   quien no distingue el rojo y no significa nada para quien entra por primera
   vez. */
.dash-fat-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.dash-fat{border:1px solid var(--linea);border-left:3px solid var(--linea-2);
  border-radius:12px;padding:10px 12px}
.dash-fat.mal{border-left-color:var(--rojo);background:color-mix(in srgb,var(--rojo-b) 55%,transparent)}
.dash-fat.ojo{border-left-color:var(--ambar)}
.dash-fat.bien{border-left-color:var(--verde)}
.dash-fat-cab{display:flex;align-items:center;gap:10px}
.dash-fat-n{flex:1;font-size:12px;font-weight:550;color:var(--tinta);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-fat-pill{flex:none;font-size:10px;font-weight:550;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:var(--gris-b);color:var(--tinta-2)}
.dash-fat-pill.mal{background:var(--rojo-b);color:var(--rojo)}
.dash-fat-pill.ojo{background:var(--ambar-b);color:var(--ambar)}
.dash-fat-pill.bien{background:var(--verde-b);color:var(--verde)}
/* Cuatro datos en fila, y en dos columnas cuando la ficha se estrecha. Se
   reparten con `auto-fit` y no con un número de columnas fijo porque este panel
   cabe tanto a media rejilla como a ancho completo. */
.dash-fat-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:4px 14px;margin-top:8px}
.dash-fat-datos span{display:flex;flex-direction:column;min-width:0}
.dash-fat-datos i{font-style:normal;font-size:10px;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.04em}
.dash-fat-datos b{font-size:14px;font-weight:680;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;margin-top:2px}
/* Por qué se le ha puesto ese veredicto y contra qué fechas se compara. «El CTR
   ha bajado» sin decir desde cuándo no se puede comprobar, y lo primero que hace
   cualquiera con un aviso así es ir a comprobarlo. */
.dash-fat-pie{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--tinta-2)}
.dash-fat-pie b{font-variant-numeric:tabular-nums}
.dash-fat-pie span{color:var(--tinta-3)}
.dash-nada{margin:10px 0 0;font-size:13px;color:var(--tinta-2)}
.dash-editor{position:fixed;inset:0;background:rgba(0,0,0,.36);display:flex;
  align-items:center;justify-content:center;z-index:150;padding:24px}
.dash-editor-caja{background:var(--panel);border:1px solid var(--linea);border-radius:16px;
  padding:22px;width:min(720px,100%);max-height:86vh;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.22)}
.dash-editor-caja h3{margin:0;font-size:16px;font-weight:680}
/* El JSON, cuando se despliega. Ya no es lo primero que se ve, así que no
   necesita 340 px de alto de salida. */
.dash-json{border:1px solid var(--linea);border-radius:8px;background:var(--panel-2)}
.dash-json summary{padding:9px 13px;font-size:12px;font-weight:550;color:var(--tinta-3);cursor:pointer}
.dash-json summary:hover{color:var(--tinta)}
.dash-json textarea{width:100%;min-height:260px;resize:vertical;font-family:var(--mono);
  font-size:12px;line-height:1.6;padding:12px 14px;border:0;border-top:1px solid var(--linea);
  border-radius:0 0 8px 8px;background:var(--tablero);color:inherit;outline:none}

/* La conversación para editarlo. Se parece al copiloto a propósito: es el mismo
   gesto —pedir algo en español— y no hace falta aprenderlo dos veces. */
.dash-chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--linea);border-radius:12px;padding:12px;background:var(--panel-2)}
.dash-chat-hilo{flex:1;min-height:170px;max-height:38vh;overflow-y:auto;display:flex;
  flex-direction:column;gap:10px}
.dash-sugerencias{display:flex;flex-wrap:wrap;gap:6px}
.dash-msg{max-width:88%;font-size:13px;line-height:1.55}
.dash-msg.yo{align-self:flex-end;background:var(--acento-b);color:var(--tinta);
  padding:8px 12px;border-radius:12px}
.dash-msg.ia{align-self:flex-start;color:var(--tinta-2)}
.dash-propuesta{display:flex;align-items:center;gap:10px;margin-top:9px}
.dash-propuesta span{font-size:12px;color:var(--tinta-3)}
.dash-chat-caja{display:flex;align-items:flex-end;gap:8px}
.dash-chat-caja textarea{flex:1;min-height:0;resize:none;font:400 13px/1.5 var(--sans);
  padding:9px 12px;border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);
  color:inherit;outline:none}
.dash-chat-caja textarea:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-b)}
.dash-chat-caja .btn{flex:none}
.dash-editor-pie{display:flex;justify-content:flex-end;gap:8px}

/* ── Ficha de una tarea: cabecera, solapas y cuerpo ─────────────────────── */
/* La cabecera se queda del alto que pida su contenido. Compartía clase con el
   cuerpo, que lleva `flex:1`, así que se estiraba hasta empujar las solapas al
   fondo del panel: entre el último campo y «Contenido» quedaban 122 px de nada
   y la ficha parecía rota. Solo crece el cuerpo, que es el que se desplaza. */
.peek-ficha{flex:none;padding-bottom:0}
/* TODO SE DESPLAZA JUNTO, MENOS LAS SOLAPAS.
   El título y la rejilla de propiedades estaban clavados arriba y solo se movía
   el panel de abajo: en una ficha con cliente, responsable, fechas y etiquetas
   eso se comía media ventana y la descripción se leía por una rendija. Ahora
   hay un solo desplazamiento —cabecera, solapas y contenido— y la cabecera se
   va hacia arriba según bajas. Lo único que se queda pegado son las solapas,
   que si no te obligan a subir del todo para cambiar de pestaña. */
.peek-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.peek-scroll>.peek-cuerpo{overflow:visible;flex:none}
.peek-scroll>#pk-panel{flex:1}
/* Las solapas no tenían ni una regla: salían pegadas al borde izquierdo, sin
   separación ni forma de saber cuál estaba abierta. */
.peek-tabs{display:flex;gap:2px;flex:none;padding:0 26px;border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:3;background:var(--panel)}
.peek-tabs button{position:relative;padding:10px 10px 11px;font-size:13px;font-weight:550;
  color:var(--tinta-3);background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px}
.peek-tabs button:hover{color:var(--tinta)}
.peek-tabs button.activo{color:var(--tinta)}
.peek-tabs button.activo::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;
  height:2px;background:var(--tinta);border-radius:999px}
.peek-tabs .n{font-size:11px;font-weight:550;color:var(--tinta-3);background:var(--activo);
  border-radius:999px;padding:1px 6px;min-width:18px;text-align:center}
.peek-tabs button.activo .n{color:var(--tinta)}

/* ── Subtareas y comentarios de una tarea ───────────────────────────────── */
/* Ninguna de las dos tenía una sola regla: el marcado estaba escrito y el CSS
   no llegó nunca. Por eso el «+» salía del tamaño de un icono suelto y los
   comentarios en fila sin separación. */
.peek-cuerpo.sin-relleno{padding:0}

.sub-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sub-cab span{font-size:11px;font-weight:550;color:var(--tinta-3);white-space:nowrap}
.barra-sub{flex:1;height:4px;border-radius:999px;background:var(--activo);overflow:hidden}
.barra-sub i{display:block;height:100%;background:var(--verde);border-radius:999px;
  transition:width .2s ease}
.sub-lista{display:flex;flex-direction:column}
.sub-fila{display:flex;align-items:flex-start;gap:10px;padding:7px 8px;margin:0 -8px;
  border-radius:8px}
.sub-fila:hover{background:var(--hover)}
.sub-fila .t{flex:1;min-width:0;font-size:13px;line-height:1.5;outline:none;
  border-radius:4px;padding:1px 3px;margin:-1px -3px}
.sub-fila .t:focus{background:var(--panel-2);box-shadow:0 0 0 3px rgba(31,79,216,.1)}
.sub-fila .tit-hecho{color:var(--tinta-3);text-decoration:line-through}
/* La equis solo aparece al pasar por encima. Una fila de tareas con un botón de
   borrar permanente en cada línea invita al accidente. */
.sub-x{flex:none;width:22px;height:22px;display:grid;place-items:center;border:0;
  background:none;border-radius:4px;color:var(--tinta-3);opacity:0;cursor:pointer}
.sub-x svg{width:13px;height:13px}
.sub-fila:hover .sub-x{opacity:1}
.sub-x:hover{background:var(--activo);color:var(--rojo)}
.sub-add{display:flex;align-items:center;gap:8px;width:calc(100% + 16px);margin:4px -8px 0;
  padding:8px;border:0;background:none;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--tinta-3);text-align:left}
.sub-add svg{width:15px;height:15px}
.sub-add:hover{background:var(--hover);color:var(--tinta)}
.sub-nada{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--tinta-3)}

.com-lista{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.com{display:flex;gap:10px}
.com .av{flex:none;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  background:var(--activo);color:var(--tinta-2);font-size:10px;font-weight:680;letter-spacing:.02em}
.com-cuerpo{flex:1;min-width:0}
.com .cab{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:550;color:var(--tinta)}
.com .cab span{font-size:11px;font-weight:400;color:var(--tinta-3)}
.com .borrar{margin-left:auto;border:0;background:none;font-size:11px;color:var(--tinta-3);
  cursor:pointer;opacity:0;padding:0}
.com:hover .borrar{opacity:1}
.com .borrar:hover{color:var(--rojo)}
.com .txt{margin-top:3px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.com-nada{margin:0 0 20px;font-size:13px;color:var(--tinta-3)}
.com-caja{border:1px solid var(--linea-2);border-radius:12px;padding:10px 12px;background:var(--panel)}
.com-caja:focus-within{border-color:var(--linea-2);box-shadow:0 0 0 3px rgba(31,79,216,.1)}
.com-caja textarea{width:100%;border:0;background:none;outline:none;resize:none;
  font-size:13px;line-height:1.6;color:inherit;font-family:inherit;min-height:22px;max-height:200px}
.com-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.com-ayuda{font-size:11px;color:var(--tinta-3)}

/* ── Propiedades de la ficha: que se note que se pueden tocar ───────────── */
/* Antes eran texto suelto: no había manera de saber que «Sin responsable» o la
   fecha eran editables hasta que pinchabas por probar. */
.props .v.sel-prop,.props .v.campo-fecha{border-radius:8px;padding:3px 6px;margin:-3px -6px;
  cursor:pointer;position:relative}
.props .v.sel-prop:hover,.props .v.campo-fecha:hover{background:var(--hover)}
.persona{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.av-p{flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  background:var(--activo);color:var(--tinta-2);font-size:10px;font-weight:680;
  position:relative;overflow:hidden}
/* La foto va ENCIMA de las iniciales, no en su lugar: si la imagen no carga
   —cuenta sin foto, sin conexión, el enlace de Google caducado— se retira sola
   y debajo siguen estando las dos letras. Nunca queda un círculo vacío. */
.av-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La foto no TAPA las iniciales: las sustituye. Pintarlas debajo y cubrirlas con
   un `position:absolute` es lo que hacía que asomaran por cualquier zona
   transparente. Si la imagen falla, su `onerror` la retira, `:has(img)` deja de
   casar y las iniciales vuelven sin JavaScript. */
.av-p:has(img) .av-mono{display:none}
.sel-menu button .opt{font-size:13px}
.sel-menu button .av-p{margin-right:2px}

/* ── Icono de una tarea ─────────────────────────────────────────────────── */
/* Encima del título, no al lado. Al lado, el botón se estiraba a lo alto de un
   título de tres líneas y quedaba una barra gris de 90 px junto al texto. Es la
   misma disposición que el editor de páginas, que ya lo hacía bien. */
.pk-tit-fila{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:22px}
.pk-tit-fila h2{margin:0;width:100%}
.pk-icono{flex:none;width:38px;height:38px;border:0;background:none;border-radius:8px;
  cursor:pointer;font-size:28px;line-height:1;display:grid;place-items:center;margin-left:-4px}
.pk-icono:hover{background:var(--hover)}
/* El icono de la tarea. El SVG se pinta sin atributos `width`/`height`, así que
   sin una medida aquí se estiraba hasta llenar la celda: 350 px en el móvil y
   712 px en el escritorio, un pictograma gigante por fila que tapaba la lista
   entera. Va en línea con el texto, del tamaño del resto de iconos de fila. */
.ico-t{margin-right:7px;display:inline-flex;flex:none;vertical-align:-2px}
.ico-t svg{width:14px;height:14px}

/* ── Selector de iconos ─────────────────────────────────────────────────── */
/* Con nueve grupos la lista no cabe: se desplaza dentro del menú en vez de
   estirarlo hasta salirse de la pantalla. */
.emoji-caja{max-height:280px;overflow-y:auto;margin:2px -2px;padding:0 2px}
.emoji-grupo{font-size:10px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);padding:8px 4px 4px;position:sticky;top:0;background:var(--panel);z-index:1}
.emoji-grupo:first-child{padding-top:2px}
.flotante.menu-emoji{width:312px}
.menu-emoji .emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:1px}
.menu-emoji .emojis button{aspect-ratio:1;font-size:18px;border-radius:8px;
  display:grid;place-items:center;border:0;background:none;cursor:pointer}
.menu-emoji .emojis button:hover{background:var(--hover)}

/* ── Varios responsables, varios clientes ───────────────────────────────── */
/* Las caras se solapan: con cuatro nombres enteros la fila se parte en dos y la
   ficha deja de leerse de un vistazo. Con las iniciales apiladas se ve cuántos
   son de un golpe, y el nombre completo está en el título del ratón. */
.caras{display:inline-flex;align-items:center}
.caras .av-p{margin-right:-6px;box-shadow:0 0 0 2px var(--panel)}
.caras .av-p:last-child{margin-right:0}
.chips{display:inline-flex;flex-wrap:wrap;gap:4px}
/* Sin fondo: el logo ya separa un cliente del siguiente, y tres pastillas
   seguidas en una fila de 13 px pesaban más que el propio dato. */
.chip-cli{font-size:13px;color:var(--tinta);white-space:nowrap}
.sel-menu.multi{min-width:220px;max-height:300px;overflow-y:auto}
.sel-menu.multi button{gap:8px}
.sel-menu.multi button[disabled]{cursor:default;opacity:1}
.sel-menu.multi button[disabled]:hover{background:none}
.sel-menu.multi .opt{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Los encabezados dentro de una tarea, a la escala del panel.
   Heredaban los de una página entera —H1 a 32 px, H2 a 24— y en un panel de 520
   px un H2 salía MÁS GRANDE que el título de la propia tarea, que es 22. Aquí
   el título de la tarea es el H1, así que todo lo del cuerpo va por debajo. */
.pag.compacta{--f-h1:20px; --l-h1:26px;
              --f-h2:17px; --l-h2:23px;
              --f-h3:15px; --l-h3:21px}
.pag.compacta .bk[data-t="h1"] .bk-txt{padding-top:14px}
.pag.compacta .bk[data-t="h2"] .bk-txt{padding-top:12px}
.pag.compacta .bk[data-t="h3"] .bk-txt{padding-top:10px}

/* Los desplegables de la ficha se dibujan en coordenadas de pantalla, fuera del
   panel: dentro los recortaba su propio desplazamiento. */
.sel-menu[style*="fixed"]{z-index:200;overflow-y:auto}
/* El logo del cliente dentro de un chip y en el desplegable. */
.avc.xs{width:16px;height:16px;border-radius:4px;font-size:10px}
.avc.xs img{padding:1px}
.chip-cli{display:inline-flex;align-items:center;gap:6px}
.chips{gap:10px}
.sel-menu .avc.xs{width:20px;height:20px;border-radius:4px;font-size:10px}

/* ── Papelera de conversaciones ─────────────────────────────────────────── */
.copi-lista-cab.papelera{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea)}
.copi-lista button.borrada{opacity:.6}
.copi-lista button.borrada:hover{opacity:1}
.copi-lista button.borrada b{text-decoration:line-through;text-decoration-color:var(--tinta-3)}
.copi-restaurar{flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:8px;color:var(--tinta-3)}
.copi-restaurar svg{width:14px;height:14px}
.copi-lista button.borrada:hover .copi-restaurar{background:var(--activo);color:var(--tinta)}

/* Va aquí abajo, después de TODAS las reglas base de `.copi-` (835, 3391,
   3495, 3613): escrito más arriba, la medida de escritorio lo pisaba.
   En el móvil el copiloto ocupa la pantalla entera y tapa la barra de abajo,
   así que su aspa es la única salida —y medía 28 px—. Los tres botones del
   compositor, que son los que se usan de verdad desde el teléfono, medían 32.
   Todos a 44, la medida mínima para un dedo, igual que ya se hizo con los de
   la barra y la campana. */
@media(max-width:700px){
  .copi-x{width:44px;height:44px}
  .copi-redondo,.copi-enviar{width:44px;height:44px}
  .copi-redondo svg,.copi-enviar svg{width:18px;height:18px}
  .copi-pick{min-height:44px}
  /* Atajos de teclado y colocación del panel: en un teléfono no hay ni tecla
     de intro con mayúsculas ni sitio donde acoplar el panel «a la derecha».
     Se van, como ya se van los del canal de mensajes. Dentro no queda nada
     más, así que se va la fila entera y no un renglón vacío con su margen. */
  .copi-ayuda{display:none}
  .lat-buscar kbd{display:none}
}

/* ── Ficha del agente ──────────────────────────────────────────────────── */
/* Las pestañas de la ficha son de página entera, no del panel lateral: no
   llevan el sangrado de 26 px de `.detalle-tabs` ni se pegan arriba. */
.ficha-tabs{display:flex;gap:2px;margin-top:16px;border-bottom:1px solid var(--linea)}
.ficha-tabs button{padding:10px 13px 9px;font-size:13px;color:var(--tinta-3);
  border-bottom:2px solid transparent;white-space:nowrap}
.ficha-tabs button:hover{color:var(--tinta-2)}
.ficha-tabs button.activo{color:var(--tinta);border-color:var(--tinta);font-weight:550}
.agente-cuerpo{padding-bottom:40px}

.agente-procedencia{margin:6px 0 0;font-size:12px;color:var(--tinta-3)}

/* Que tienes algo escrito y sin guardar hay que verlo desde cualquier pestaña,
   así que va encima de ellas y no dentro del formulario. */
.agente-borrador{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  padding:11px 14px;border:1px solid color-mix(in srgb,var(--ambar) 30%,transparent);
  border-radius:12px;background:color-mix(in srgb,var(--ambar) 7%,var(--panel))}
.agente-borrador b{font-size:13px;font-weight:680;color:var(--ambar)}
.agente-borrador span{flex:1;min-width:220px;font-size:12px;color:var(--tinta-2)}

.agente-ayuda{margin:9px 0 0;font-size:12px;line-height:1.55;color:var(--tinta-3)}
.agente-ayuda b{font-weight:550;color:var(--tinta-2)}
.agente-sub{font-size:12px;color:var(--tinta-3);margin:15px 0 7px}
.agente-frase{font-size:14px;line-height:1.65}
.agente-doc{margin-top:12px;font-size:13px;line-height:1.7;color:var(--tinta-2);overflow-wrap:anywhere}
/* El bloque de «sin documentar» nació dentro del panel lateral, que tiene
   30 px de margen propios. Dentro de una tarjeta esos márgenes lo descuadran. */
.autom-ficha-bloque .autom-falta{margin:12px 0 0}

.agente-rutina{display:flex;align-items:flex-start;gap:9px;padding:10px 0;border-top:1px solid var(--linea)}
.agente-rutina:first-of-type{margin-top:10px}
.agente-rutina>div{min-width:0;flex:1}
.agente-rutina b{display:block;font-size:13px;font-weight:550}
.agente-rutina small{display:block;margin-top:2px;font-size:11px;color:var(--tinta-3)}

.agente-accesos{margin-top:12px}
.agente-acceso{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--linea)}
.agente-acceso>div{flex:1;min-width:0;display:flex;flex-direction:column}
.agente-acceso b{font-size:13px;font-weight:550}
.agente-acceso small{font-size:11px;color:var(--tinta-3)}

/* Cambios de configuración y ejecuciones en la misma columna, distinguidos por
   el fondo y no por un borde de un solo lado. */
.agente-linea{margin-top:10px}
.agente-hito{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;
  border-radius:8px;border-bottom:1px solid var(--linea)}
.agente-hito:last-child{border-bottom:0}
.agente-hito.cambio{background:var(--panel-2)}
.agente-hito>.ejec-dot{margin-top:6px;flex:none}
.agente-hito>div{flex:1;min-width:0}
.agente-hito b{display:block;font-size:13px;font-weight:550}
.agente-hito b i{font-style:normal;color:var(--acento)}
.agente-hito small{display:block;margin-top:3px;font-size:12px;color:var(--tinta-3);overflow-wrap:anywhere}
.agente-hito time{flex:none;font-size:11px;color:var(--tinta-3);margin-top:2px}
.agente-hito summary{margin-top:6px;font-size:12px;color:var(--tinta-3);cursor:pointer}
.agente-hito summary:hover{color:var(--tinta-2)}
.agente-diff{margin-top:8px}
.agente-diff span{font-size:11px;color:var(--tinta-3)}
.agente-diff pre{margin:3px 0 0;padding:8px 10px;border-radius:8px;background:var(--panel);
  border:1px solid var(--linea);font:12px/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:260px;overflow:auto}

@media(max-width:900px){
  .ficha-tabs{overflow-x:auto}
  .agente-hito time{display:none}
}

/* Dentro de la ficha las tarjetas ya se separan con el `gap` de la columna: la
   regla global `.lienzo section + section` les sumaba otros 32 px encima. */
.constructor-agente main>section+section,.constructor-agente aside>section+section{margin-top:0}
.agente-cuerpo>section+section{margin-top:0}
/* El «← Agentes» ocupaba el ancho entero de la cabecera y parecía una barra
   vacía. Va en su propia fila, pero del tamaño de su texto. */
.agente-ficha-cab>.ficha-volver{flex-basis:100%}
.agente-uso{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:12px;
  background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.agente-uso>div{padding:12px 13px;background:var(--panel)}
.agente-uso b{display:block;font-size:18px;font-weight:680;letter-spacing:-.02em;line-height:1.2}
.agente-uso span{display:block;margin-top:2px;font-size:11px;color:var(--tinta-3)}
.agente-uso small{display:block;margin-top:4px;font-size:11px;color:var(--tinta-3)}

/* Fijar desde el lateral. La chincheta de la pantalla de Clientes va en la
   esquina de una tarjeta; aquí va en línea, al final de la fila, y solo se ve
   al pasar por encima —o siempre, si el cliente ya está fijado—. */
.nav-fila.con-fijar .fijar{position:static;width:20px;height:20px;flex:none;border-radius:4px}
.nav-fila.con-fijar .fijar svg{width:12px;height:12px}
.nav-fila.con-fijar:hover .fijar{opacity:1}
.nav-fila.con-fijar .fijar[aria-pressed="true"]{opacity:1;color:var(--acento)}

/* ── Conexiones (mapa de accesos) ──────────────────────────────────────── */
/* Tu sesión de Claude. El estado va con fondo propio y borde a los cuatro
   lados: una franja de color en un solo canto se lee como adorno, no como
   estado, y aquí la diferencia entre gastar de tu cuenta o de la de la casa es
   justo lo que hay que ver de un vistazo. */
.sesion-claude{display:flex;flex-direction:column;gap:16px;margin-top:16px;max-width:640px}
.sesion-estado{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;
  border:1px solid var(--linea-2);background:var(--panel-2)}
.sesion-estado b{font-size:14px;font-weight:550}
.sesion-estado span{font-size:12px;line-height:1.5;color:var(--tinta-3)}
.sesion-estado.puesta{border-color:var(--verde)}
.sesion-estado.puesta b{color:var(--verde)}
.sesion-estado.compartida b{color:var(--tinta)}
.sesion-pasos h3{font-size:13px;font-weight:550;margin-bottom:8px}
.sesion-pasos ol{margin:0 0 10px 18px;padding:0;font-size:13px;line-height:1.7;color:var(--tinta-2)}
.sesion-pasos code{font-size:12px;padding:1px 4px;border-radius:4px;background:var(--panel-2)}
.sesion-aviso{font-size:11px;line-height:1.5;color:var(--tinta-3)}
.sesion-form{display:flex;gap:8px;flex-wrap:wrap}
.sesion-form input{flex:1;min-width:220px;border:1px solid var(--linea-2);border-radius:8px;
  background:var(--fondo);color:var(--tinta);padding:9px 10px;font:inherit;font-size:13px}
.sesion-msg{font-size:12px;min-height:16px}
#ses-paso2{display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  border:1px solid var(--linea-2);border-radius:12px;padding:14px;background:var(--panel-2)}
#ses-paso2 .sesion-form{width:100%}

.integra-aviso{margin-top:16px}
.integra-aviso b{font-weight:550;color:var(--tinta-2)}
/* Sin `max-width:none`: el lienzo centra a 1180 px todo lo que cuelga de él, y
   dejando la rejilla suelta era la única fila que se salía de la columna. */
.integra-cifras{grid-template-columns:repeat(4,1fr)}
/* El contador de la cabecera se iba al otro extremo de la pantalla porque el
   h2 se lleva todo el ancho. Aquí la cabecera no ocupa la fila entera. */
.integra-seccion>.bloq-cab h2{flex:none}
.integra-seccion>.bloq-cab{justify-content:flex-start}
.integra-barra{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.integra-barra .busqueda{flex:1;max-width:420px}
.integra-barra .busqueda input{border:0;background:none;color:var(--tinta);font:inherit;
  width:100%;min-width:0;outline:0}
.integra-barra .busqueda span{display:grid;place-items:center;color:var(--tinta-3)}
.integra-barra .busqueda svg{width:14px;height:14px}
.integra-seccion{margin-bottom:28px}
.integra-seccion>.agente-ayuda{margin-bottom:12px}

.integra-bloque{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);
  margin-bottom:8px;overflow:hidden}
.integra-bloque>summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 14px;cursor:pointer;font-size:13px}
.integra-bloque>summary:hover{background:var(--hover)}
.integra-bloque>summary b{font-weight:550}
.integra-bloque>summary code{margin-left:auto;font:11px var(--mono);color:var(--tinta-3)}
.integra-bloque[open]>summary{border-bottom:1px solid var(--linea)}

.integra-claves{display:flex;flex-direction:column}
.integra-clave{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--linea)}
.integra-clave:last-child{border-bottom:0}
.integra-clave>div{flex:1;min-width:0}
.integra-clave b{display:block;font-size:13px;font-weight:550}
.integra-clave small{display:block;margin-top:2px;font-size:11px;color:var(--tinta-3);
  overflow-wrap:anywhere}
.integra-clave code{font:11px var(--mono);color:var(--tinta-2);padding:3px 7px;border-radius:4px;
  background:var(--panel-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.integra-clave .pill{flex:none}

.integra-publicos{padding:0 14px 12px}
.integra-publicos>summary{padding:10px 0;font-size:12px;color:var(--tinta-3);cursor:pointer}
.integra-publicos>summary:hover{color:var(--tinta-2)}
.integra-falta{margin:0 0 20px}

@media(max-width:900px){
  .integra-cifras{grid-template-columns:1fr 1fr}
  .integra-clave{flex-wrap:wrap}
  .integra-clave code{max-width:100%}
  /* El nombre de la credencial es lo ÚNICO que identifica la fila, y era lo
     único que se encogía: llevaba `flex:1 1 0` mientras las dos etiquetas de
     estado no encogen nada. Con «pendiente» y «en este llavero» ocupando 184 px
     de los 349, «WP app password» se quedaba en 3 px —una raya— y no había
     forma de saber de qué credencial hablaba la fila. Ocupa su propia línea. */
  .integra-clave>div:first-child{flex:1 0 100%;min-width:0}
}
.integra-sub{font-size:13px;font-weight:680;margin:22px 0 0}
.btn.sm.activo{background:var(--activo);color:var(--tinta);border-color:var(--linea-2)}

/* ── Dashboards por pestañas ───────────────────────────────────────────── */
/* Un cliente con SEO y Google Ads no cabe en un dashboard: cada rama es su
   pestaña, y cada pestaña su fichero en el repo. */
/* Como un selector segmentado: una bandeja gris y la pestaña activa en blanco, con
   sombra, para que se vea de un vistazo en cuál estás. */
.dash-pestanas{display:flex;width:max-content;align-items:center;gap:3px;margin-bottom:16px;max-width:100%;
  padding:4px;border-radius:12px;background:color-mix(in srgb,var(--tinta) 5%,var(--panel));
  border:1px solid var(--linea);overflow-x:auto}
.dash-pestanas button{padding:7px 14px;font-size:13px;font-weight:550;color:var(--tinta-2);
  border-radius:8px;white-space:nowrap;flex:none;transition:background .15s,color .15s,box-shadow .15s}
.dash-pestanas button:hover{color:var(--tinta)}
.dash-pestanas button.activo{color:var(--tinta);font-weight:680;background:var(--panel);
  box-shadow:0 1px 2px rgba(12,14,19,.08),0 3px 10px rgba(12,14,19,.10)}
[data-tema="oscuro"] .dash-pestanas{background:var(--lienzo)}
[data-tema="oscuro"] .dash-pestanas button.activo{background:var(--panel-2);box-shadow:0 1px 2px rgba(0,0,0,.4),0 3px 10px rgba(0,0,0,.35)}
.dash-nueva{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  color:var(--tinta-3);margin-left:4px}
.dash-nueva:hover{background:var(--hover);color:var(--tinta)}
.dash-nueva svg{width:14px;height:14px}
.dash-carta .ic svg{width:17px;height:17px;color:var(--tinta-3)}
.dash-carta.nueva{border-style:dashed}
.dash-carta.nueva b,.dash-carta.nueva small{color:var(--tinta-3)}

/* Inicio tenía su propio lavado cuando el resto de la aplicación era blanca.
   Ahora el gris con luz es el fondo de todas las pantallas, así que el de aquí
   sobraba: dos difuminados encima del mismo sitio se suman y el azul se carga. */

/* ── Contenedores blancos sobre el gris ────────────────────────────────────
   Con el fondo de la aplicación en gris, una lista o una tabla sueltas se leen
   como texto tirado encima del fondo. Estas son las que no tenían superficie
   propia porque antes todo el lienzo era blanco y no hacía falta. Mismo
   lenguaje que las tarjetas que ya existían: hairline, radio 12, sin sombra. */
.carga-lista,.ultimo-lista{background:var(--panel);border:1px solid var(--linea);
  border-radius:12px;padding:var(--e2);gap:0}
.backup-lista{background:var(--panel);border:1px solid var(--linea);border-radius:12px}

/* Una tabla no se puede redondear con `border-collapse:collapse`: el navegador
   no recorta las esquinas de las celdas. Con `separate` y espaciado cero el
   resultado es idéntico y sí se puede. */
.tabla{background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  border-collapse:separate;border-spacing:0;overflow:hidden}
.tabla tr:last-child td{border-bottom:0}

/* El lateral y el riel son transparentes sobre el gris, así que sus estados
   necesitan algo más de cuerpo para leerse. */
.nav-item:hover,.lat a:hover{background:color-mix(in srgb,var(--panel) 70%,transparent)}
/* DÓNDE ESTÁS, EN AZUL.
   El riel ya marcaba la sección en azul de marca y el lateral la marcaba en
   gris: dos maneras de decir lo mismo en la misma pantalla, y ninguna de las
   dos se leía de un vistazo. Ahora el azul significa una sola cosa en toda la
   aplicación —aquí estás— y por eso no se usa para nada más.
   Tinte de fondo, no franja lateral: un borde en un solo lado descuadra la
   fila respecto a las de arriba y abajo. */
.nav-item.activo{background:var(--acento-b);color:var(--acento);font-weight:550}
.nav-item.activo svg{color:var(--acento)}
.lat a.activo{background:var(--acento-b);color:var(--acento)}


/* ═══ La casa ══════════════════════════════════════════════════════════════
   La documentación interna: cómo funciona la agencia por dentro, el método de
   cada disciplina y lo del equipo.

   Se ve DISTINTO de Clientes a propósito. Aquélla es una cartera —quién nos
   paga, qué está atascado— y por eso es una tabla con avatares, pastillas de
   servicio y última actividad. Esto es un manual: se entra a buscar cómo se
   hace algo. Un índice, entonces: texto, jerarquía, rayas finas y cero cromo.
   Ni una tarjeta con sombra, ni un avatar, ni una pastilla de color. */
.casa{max-width:1080px;margin:0 auto}
.casa-cab{display:flex;align-items:flex-end;gap:var(--e4);margin:var(--e3) 0 var(--e6);flex-wrap:wrap}
.casa-cab h1{margin:0;font-size:28px;font-weight:680;letter-spacing:-.03em;line-height:1.15}
/* Medida corta: una entradilla a 1080 px se lee a saltos. */
.casa-cab p{margin:var(--e2) 0 0;color:var(--tinta-3);font-size:14px;line-height:1.5;max-width:56ch}
.casa-cab .btn{margin-left:auto;flex:none}

.casa-espacio{margin-bottom:var(--e6)}
.casa-espacio-cab{display:flex;align-items:baseline;gap:var(--e2);
  padding-bottom:var(--e2);border-bottom:1px solid var(--linea-2)}
.casa-espacio-cab h2{margin:0;font-size:18px;font-weight:680;letter-spacing:-.02em}
.casa-espacio-cab .btn{margin-left:auto;align-self:center}
.casa-espacio-nota{margin:var(--e2) 0 var(--e3);color:var(--tinta-3);font-size:13px;max-width:60ch}

/* El índice. Filas de una línea separadas por una raya de un píxel: es lo que
   deja recorrer treinta entradas con la vista sin pinchar en ninguna. */
.casa-indice{display:flex;flex-direction:column;margin-top:var(--e3)}
.casa-fila{display:flex;align-items:center;gap:var(--e3);width:100%;text-align:left;
  padding:9px var(--e2);border-radius:8px;color:var(--tinta);font-size:14px;
  border-bottom:1px solid var(--linea)}
.casa-fila:hover{background:var(--hover)}
.casa-fila-ic{display:grid;place-items:center;color:var(--tinta-3);flex:none}
.casa-fila-ic svg{width:16px;height:16px}
.casa-fila-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.casa-fila-n{color:var(--tinta-3);font-size:12px;flex:none;font-variant-numeric:tabular-nums}
.casa-fila-fl{color:var(--tinta-3);flex:none;font-size:16px;line-height:1}
.casa-mas{margin-top:var(--e2);padding:6px var(--e2);border-radius:8px;
  color:var(--acento);font-size:13px;font-weight:550}
.casa-mas:hover{background:var(--hover)}


/* En el lateral, dentro de un espacio: el libro donde el cliente lleva su
   avatar. Mismo hueco, misma alineación. */
.casa-marca{width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--activo);color:var(--tinta-2)}
.casa-marca svg{width:18px;height:18px}

/* ── La app instalada, sin la barra de título ────────────────────────────
   Instalada en el escritorio, `standalone` quita la barra del navegador pero
   deja una franja con el nombre de la app y sus botones. Con
   `window-controls-overlay` —declarado en el manifiesto— esa franja
   desaparece y la app pinta también ahí; a cambio los botones de la ventana
   quedan flotando encima y hay que dejarles su hueco.

   Se baja TODO el armazón en vez de solo el riel: los botones de la ventana
   cruzan la pantalla entera —en macOS a la izquierda, en Windows a la
   derecha— y cualquier control que quede debajo se vuelve inalcanzable. Media
   pantalla arrastrable es peor que una franja de 33 px.

   `env(titlebar-area-*)` solo tiene valor cuando el modo está activo; los
   valores de reserva son por si el navegador no los expone.

   Este bloque no se aplica en una pestaña normal, así que la ventana de
   siempre no cambia en nada. */
@media (display-mode: window-controls-overlay){
  .marco,.copi-dique,.copiloto{top:env(titlebar-area-height,33px)}
  /* La franja que queda libre a lo ancho: es lo que se agarra para mover la
     ventana, ya que no hay barra de título que agarrar. Va detrás de todo en
     `z-index` para no comerse ningún clic del contenido, que empieza por
     debajo de ella. */
  .arrastre-ventana{position:fixed;top:0;left:env(titlebar-area-x,0px);
    width:env(titlebar-area-width,100%);height:env(titlebar-area-height,33px);
    -webkit-app-region:drag;app-region:drag;z-index:1}
  /* El fondo de la franja lo pone el `theme-color`, así que aquí solo se
     pinta lo mismo que hay detrás del armazón para que no se vea un corte. */
  body{background:var(--lienzo)}
}

/* ══ MÓVIL ══════════════════════════════════════════════════════════════════
   Bloque al final del fichero a propósito: varias de estas reglas corrigen
   otras que están escritas más arriba, y a igualdad de especificidad gana la
   última. Puesto al principio, la mitad no haría nada. */
@media (max-width:900px){

  /* ── El chat a pantalla completa ─────────────────────────────────────────
     La lista de conversaciones estaba escondida con `display:none`, así que en
     el móvil solo existía la conversación abierta. Vuelve como cajón: entra
     desde la izquierda con su botón de la cabecera y se va al elegir una. */
  /* Cajón real desde el borde izquierdo. Mientras está abierto la conversación
     no se pinta detrás: el resto es solamente un velo neutro. */
  .copiloto.pantalla .copi-lateral{
    display:flex;position:absolute;top:0;bottom:0;left:0;width:min(86vw,330px);
    z-index:3;transform:translateX(calc(-100% - 48px));transition:transform .26s var(--curva);
    border-right:1px solid var(--linea);box-shadow:0 0 40px rgba(0,24,60,.22);
    background:var(--panel)}
  /* Escondido se aparta del todo, sombra incluida. Con `-101%` el cajón quedaba
     a 3 px del borde y su sombra de 40 px asomaba: era la franja gris del borde
     izquierdo que hacía parecer el chat un panel de escritorio montado encima
     del teléfono (26-oct-2026). Y sin el filo izquierdo del panel de
     escritorio: aquí el panel empieza en el borde de la pantalla. */
  .copiloto.pantalla{border-left:0}
  .copiloto.pantalla .copi-lateral-cab{padding-top:max(14px,env(safe-area-inset-top))}
  .copiloto.pantalla .copi-fila{min-height:48px;padding:10px 8px}
  .copiloto.pantalla.con-lista .copi-lateral{transform:none}
  /* IA en el móvil es un CAJÓN sobre lo que estabas haciendo, no una pantalla
     nueva. El panel era un bloque opaco a pantalla completa con la columna
     escondida, así que detrás del cajón se veía un folio en blanco y parecía
     que te había sacado de donde estabas. Transparente, detrás se ve tu
     pantalla —atenuada por el velo— y se entiende que sigues ahí. Al elegir
     conversación vuelve a ser opaco, que entonces sí es una pantalla. */
  /* SOLO al ENTRAR por la lista (`lista-entrada`), que es cuando detrás no hay
     conversación. Abriendo el cajón desde dentro de un chat, el panel se queda
     opaco: si no, se transparenta y detrás asoma la pantalla de la aplicación
     —normalmente Inicio— en vez del chat en el que estabas. */
  .copiloto.pantalla.lista-entrada:is(.con-lista,.va-a-lista){background:transparent}
  /* El velo se funde en vez de aparecer y desaparecer de golpe. Existe
     siempre para poder animarlo, y apagado no intercepta ningún toque. */
  .copiloto.pantalla::after{
    content:"";position:absolute;inset:0;z-index:2;background:rgba(0,24,60,.22);
    opacity:0;pointer-events:none;transition:opacity .26s var(--curva)}
  .copiloto.pantalla.con-lista::after{opacity:1;pointer-events:auto}
  /* Con la lista delante, la conversación NO SE PINTA. Taparla con un velo la
     dejaba ahí debajo: se veía asomar el compositor y, al cerrar el cajón,
     caías dentro de una conversación vacía que no habías pedido. Ahora entrar
     en IA es entrar en la lista, y punto; la conversación aparece cuando
     eliges una o pulsas «Nueva». */
  .copiloto.pantalla.lista-entrada.con-lista .copi-columna,
  .copiloto.pantalla.lista-entrada.va-a-lista .copi-columna{visibility:hidden}
  /* El velo cubre la conversación, no el cajón: tocar fuera lo cierra. */

  .copiloto.pantalla .copi-columna{position:relative}
  .copi-solo-movil{display:grid}

  /* El hilo y el compositor no necesitan la columna centrada de 820 px que
     tienen en el escritorio: aquí la pantalla ya mide menos que eso y lo único
     que hacía ese cálculo era comerse 24 px por cada lado. */
  .copiloto.pantalla .copi-hilo,.copiloto.pantalla .copi-pie{
    padding-left:14px;padding-right:14px}
  /* El indicador de inicio del iPhone se come la parte de abajo del
     compositor: sin esto, el botón de enviar queda debajo de la rayita. */
  .copiloto.pantalla .copi-pie{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .copi-cab{padding:10px 8px 6px 12px}
  /* El título, a la altura de los botones que lo rodean. Arriba del todo
     (`flex-start`, pensado para cuando crece al editarlo) quedaba más alto que
     la cara de la conversación y que la ✕, que en el móvil miden 44 px, y la
     cabecera se veía descolocada. Al editarlo vuelve arriba para poder crecer. */
  .copi-cab > .copi-tit:not(:focus){align-self:center}

  /* ── Con quién estás hablando, siempre a la vista ────────────────────────
     La cabecera del canal —el nombre de la persona o del grupo— iba en el
     flujo normal y se iba con el desplazamiento: escribiendo un mensaje largo
     dejabas de ver a quién se lo estabas mandando. Se queda pegada arriba, que
     es lo que hace cualquier app de mensajería. */
  .canal-cab{position:sticky;top:0;z-index:5;background:var(--panel);
    border-bottom:1px solid var(--linea)}

  /* ── Barras de opciones que se comían la pantalla ────────────────────────
     En Tareas, entre el título y la primera tarea había 413 px de mandos sobre
     una pantalla de 844: media pantalla para llegar a lo que vienes a ver. Se
     envolvían en tres o cuatro filas porque están pensados para una barra
     ancha.

     Aquí van en UNA fila que rueda de lado. No se esconde nada de lo que se usa
     -buscar, agrupar, filtrar, el menú y «Nueva» siguen ahí-, solo deja de
     apilarse. */
  .bd-ctrl{display:flex;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .bd-ctrl::-webkit-scrollbar{display:none}
  .bd-ctrl>*{flex:none}
  /* Los de Clientes van en rejilla de una columna, no en flex: apilaban cinco
     mandos en 269 px de alto. `flex-wrap` ahí no hacía nada. */
  .clientes-filtros{display:flex !important;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;padding-bottom:2px}
  .clientes-filtros::-webkit-scrollbar{display:none}
  .clientes-filtros>*{flex:none}
  /* El buscador NO se lleva la fila entera: con `nowrap` empujaba los tres
     desplegables y los atajos fuera de la pantalla y parecía que no existían.
     Va primero y estrecho, y el resto se alcanza rodando de lado. */
  .clientes-filtros .campo-busca{flex:0 0 200px}
  .clientes-filtros select{max-width:200px}

  /* La tabla de clientes mide 718 px: se salía por la derecha y «Servicios»
     quedaba cortado. Las dos últimas columnas —pendientes y última actividad—
     no caben y son las menos urgentes: el nombre y los servicios sí. Lo que se
     esconde sigue estando en la ficha del cliente, a un toque. */
  .tabla-clientes th:nth-child(n+3),.tabla-clientes td:nth-child(n+3){display:none}
  .tabla-clientes{min-width:0}
  /* El buscador sí se queda a lo ancho: es lo que más se usa y buscar dentro de
     una tira que rueda es absurdo. Va en su propia línea, encima. */
  .bd-ctrl #f-buscar{flex:1 0 100%;order:-1;margin-bottom:8px}

  /* «Reindexar» y «Rellenar N datos de ficha» son tareas de mantenimiento que
     se hacen sentado, no desde el teléfono, y ocupaban dos filas enteras antes
     de llegar a la lista. Siguen en el escritorio. */
  #reindexar,#rellenar-fichas{display:none}

  /* «Columnas» no pinta nada cuando la lista va apilada: no hay columnas que
     enseñar ni esconder. La papelera y los apuntes son secundarios y siguen
     estando en el escritorio. */
  #btn-cols,#btn-papelera,#btn-apuntes{display:none}

  /* ── Con el teclado abierto ──────────────────────────────────────────────
     La barra de secciones de abajo se va mientras escribes: son 58 px de los
     pocos que deja el teclado, y nadie cambia de sección con el teclado
     abierto. La marca la pone `app.js` midiendo `visualViewport`, que es lo
     único que sabe cuánto ocupa el teclado de verdad. */
  /* La clave de que no se mueva nada: si la página no tiene NADA que
     desplazar, iOS no puede desplazar la ventana visual para enseñar el campo
     enfocado —solo puede encogerla—. Sin esto, cualquier desbordamiento de un
     píxel le da permiso para moverlo todo y la cabecera se va de la pantalla. */
  html,body{overflow:hidden;overscroll-behavior:none;height:100%}

  html.con-teclado .riel{display:none}
  /* El marco se COLOCA sobre la ventana visual: mismo sitio y mismo alto.
     Anclado a la de maquetación —que es lo que hace `position:fixed`— su parte
     de arriba se salía de lo que ves en cuanto iOS desplazaba la ventana para
     enseñar el campo, y desaparecían la cabecera con el nombre y la barra.
     Siguiéndola, lo de arriba se queda arriba y el compositor justo encima del
     teclado, sin que nada de en medio se mueva.
     `bottom:auto` es imprescindible: con `top` y `bottom` a la vez el alto lo
     manda la diferencia entre los dos y `height` no pinta nada. */
  /* SIEMPRE, no solo con el teclado abierto. Poniéndolo y quitándolo con la
     clase, el marco saltaba de `auto` a un valor concreto y de vuelta: eso era
     el parpadeo de «desaparece y aparece». Siguiendo a la ventana en todo
     momento no hay ningún salto que dar —en reposo `--vv-alto` es la pantalla
     entera— y lo único que cambia es el alto, de forma continua, mientras el
     teclado sube. Que es lo que se pedía: que no se mueva nada. */
  /* Arriba SIEMPRE en cero, no siguiendo a `--vv-arriba`. Seguirlo obligaba a
     recolocar el marco en cada fotograma mientras el teclado sube, y cualquier
     fotograma de retraso se ve como que la cabecera se va y vuelve. No hace
     falta: la página no tiene nada que desplazar —el marco es `fixed` y el
     cuerpo no rueda—, así que iOS no desplaza la ventana visual, solo la
     encoge. Lo único que sigue variando es el alto, que es lo que sube el
     compositor por encima del teclado. */
  .marco,.copiloto.pantalla{top:0;height:var(--vv-alto,100dvh);bottom:auto;
    /* iOS desplaza la ventana visual para enseñar el campo enfocado AUNQUE la
       página no pueda rodar, y con `position:fixed` eso se lleva la cabecera
       fuera de la pantalla. Aquí se cancela ese desplazamiento.

       Con `top` no valía: cambiarlo recalcula la maquetación, llega tarde un
       fotograma y se ve la cabecera irse y volver. `translate` —la propiedad
       suelta, no `transform`— la mueve el compositor, va al día, y se suma al
       `transform` del panel en vez de pisarlo.

       El signo: si iOS desplaza la ventana 96 px, lo que se ve empieza en la
       coordenada 96 de la maquetación, así que el marco BAJA hasta ahí. */
    translate:0 var(--vv-arriba, 0px)}
  /* …salvo que IA a pantalla completa NO puede tapar la barra de secciones.
     Tapándola, la única salida del panel era la ✕ de la cabecera: el resto de
     la aplicación quedaba detrás de un cristal que no se podía tocar. Le deja
     su hueco igual que se lo deja el marco. Con el teclado abierto la barra no
     está —`html.con-teclado .riel{display:none}`— y el panel recupera la
     pantalla entera, que es cuando de verdad hace falta. */
  .copiloto.pantalla{
    height:calc(var(--vv-alto,100dvh) - 58px - env(safe-area-inset-bottom))}
  html.con-teclado .copiloto.pantalla{height:var(--vv-alto,100dvh)}
  /* Y el compositor deja de reservar el margen del iPhone: eso ya lo reserva
     la barra que tiene ahora debajo, y sumado dos veces era un hueco muerto. */
  .copiloto.pantalla .copi-pie{padding-bottom:12px}
  /* La barra de secciones flota abajo y no está DENTRO del marco, así que el
     marco tiene que dejarle su hueco. Al pasar de `bottom` a `height` se me fue
     esa reserva y el compositor de un canal quedaba escondido detrás de la
     barra. Con el teclado abierto la barra no está, y el marco recupera el alto
     entero. */
  /* El marco ocupa exactamente lo que se ve. Ya no descuenta la barra porque la
     barra está dentro de él y se descuenta sola. */
  html.con-teclado .lateral{bottom:0}
  /* Los modales viven en el mismo mundo: el velo es `fixed` a toda la ventana
     de maquetación y, al subir el teclado, el formulario seguía midiendo y
     colocándose como si el teclado no estuviera. «Guardar» y el segundo campo
     quedaban debajo del teclado sin forma de llegar a ellos. El velo sigue a la
     ventana visual igual que el marco, y el `max-height` del modal (100 % del
     velo) hace que el formulario ruede dentro de lo que se ve. */
  .velo{top:0;bottom:auto;height:var(--vv-alto,100dvh);translate:0 var(--vv-arriba, 0px)}
  html.con-teclado .velo{padding-top:12px}


  /* ── La tabla de tareas, apilada ─────────────────────────────────────────
     La fila es una rejilla de cinco columnas y mide 720 px de ancho, así que
     en una pantalla de 390 se veía UNA sola columna: el cliente, el estado y la
     prioridad quedaban en la posición 436 y más allá, fuera de la pantalla, y
     había que arrastrar la tabla de lado para saber de quién era cada tarea.

     Aquí deja de ser una rejilla y pasa a ser una tarjeta: el título ocupa la
     primera línea entera y el resto de campos se reparten debajo. Va con
     `!important` porque las columnas y el ancho mínimo los escribe `tabla.js`
     como estilo en línea, y un estilo en línea le gana a cualquier regla.

     La cabecera de columnas se va: apilado no encabeza nada y solo ocupa. */
  .bd-fila{display:flex !important;flex-wrap:wrap;min-width:0 !important;
    grid-template-columns:none !important;padding:4px 0}
  .bd-fila.bd-cab{display:none !important}
  .bd-fila .cel:first-child{flex:1 1 100%;min-width:0}
  .bd-fila .cel:not(:first-child){flex:0 0 auto;padding:0 6px 4px 14px;font-size:13px}
  /* Sin la rejilla, el título ya no tiene un ancho que lo obligue a cortarse:
     que se corte por sí mismo y no empuje a los de abajo. */
  .bd-fila .cel:first-child .titulo-tarea{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;flex:1;min-width:0}

  /* ── Botones que se quedan cortos para un dedo ───────────────────────────
     `.btn` mide 34 px de alto y `.btn.sm` menos: con el ratón se aciertan de
     sobra, con el pulgar no. Se sube el mínimo a 40 sin tocar el relleno
     horizontal, para que no se descuadre ninguna fila que ya cabía justa. Solo
     el alto, que es lo que falla. */
  .btn{min-height:40px}
  .btn.sm{min-height:38px;font-size:13px}

  /* ── El hilo del chat ────────────────────────────────────────────────────
     La estructura ya era la de una app de chat —lo tuyo en burbuja a la
     derecha, la respuesta como texto corrido— pero con la letra del escritorio:
     14 px de mensaje y 12 de código, que en un teléfono se leen mal y obligan a
     acercar la cara. Sube a 16, que es lo que usan ChatGPT y Claude, con el
     interlineado acompañando. */
  .copi-msg{font-size:16px;line-height:1.6;margin-bottom:20px}
  .copi-msg.mio .copi-cuerpo{max-width:84%;padding:11px 15px}
  .copi-msg.ia .copi-cuerpo code,.copi-msg.ia .copi-cuerpo pre{font-size:13px}
  /* Un bloque de código no puede ensanchar la conversación: rueda él solo. */
  .copi-msg.ia .copi-cuerpo pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .copi-msg.ia .copi-cuerpo table{display:block;overflow-x:auto;white-space:nowrap}

  /* El teclado se pone ENCIMA de la ventana, no la encoge, así que un panel a
     `bottom:0` queda debajo con el compositor tapado y escribes a ciegas.
     `--teclado` la publica `app.js` midiendo `visualViewport`, que es lo único
     que sabe cuánto ocupa de verdad. En escritorio vale 0. */
  /* Con el teclado abierto, lo que se encoge es LA CAJA ENTERA —hasta el alto
     de lo que se ve, `--vv-alto`—, no solo el compositor. Subiendo únicamente
     el compositor, el hilo conservaba su caja de pantalla completa: los
     últimos mensajes se quedaban debajo del teclado y el compositor se
     plantaba ENCIMA de ellos, tapando justamente lo que acabas de escribir.
     Encogiendo la caja, el hilo se recoloca solo —es `flex:1`— y el mensaje de
     abajo queda pegado al compositor, que es lo que hace cualquier chat.
     El desplazamiento del hilo lo reancla `app.js` por distancia al final, así
     que al abrir el teclado se sigue viendo el último mensaje y no otro. */
  /* Entra y sale por la IZQUIERDA, las dos por el mismo lado. En escritorio
     el copiloto vive a la derecha y entra desde ahí; en el móvil heredaba ese
     `translateX(100%)` para irse, así que entraba por la izquierda y salía por
     la derecha —ida y vuelta por lados distintos, que es lo que se veía como
     un movimiento raro—. Aquí, fuera es siempre por la izquierda. */
  /* Solo a pantalla completa: entre 700 y 900 px el copiloto sigue siendo el
     panel acoplado a la derecha, y ahí salir por la izquierda sería la misma
     incoherencia al revés. */
  .copiloto.pantalla:not(.abierto){transform:translateX(-101%)}
  .copiloto.pantalla{bottom:0}
  /* Y con la lista delante no se mueve el panel, solo el cajón: el panel es
     transparente en ese estado, así que no hay nada suyo que animar y las dos
     cosas no se pisan. Una sola cosa se mueve cada vez. */
  .copiloto.pantalla:is(.con-lista,.va-a-lista){transform:none}
  /* Y al cerrar desde el cajón, el panel se queda quieto y transparente
     mientras el cajón se va y el velo se apaga: lo único que se mueve es el
     cajón, igual que al entrar. La columna sigue escondida para que no asome
     la conversación de debajo en el último fotograma. */
  .copiloto.pantalla.cerrando-cajon{transform:none;background:transparent;
    pointer-events:none}
  .copiloto.pantalla.cerrando-cajon .copi-columna{visibility:hidden}
  /* El mismo recogido para el compositor de un canal, que va pegado abajo. */
  /* Ya no hace falta moverlo: con la caja encogida, el compositor está donde
     tiene que estar. Solo se le quita el margen del indicador del iPhone, que
     con el teclado delante no tapa nada. */
  html.con-teclado .copi-pie,
  html.con-teclado .chat-caja,
  html.con-teclado .canal-compositor{padding-bottom:10px}
  /* Los avisos flotantes van pegados abajo del todo con `position:fixed`, o
     sea que no los encoge nadie: con el teclado abierto quedaban detrás de él
     y «Hay una versión nueva» no se leía nunca desde una conversación.
     Ya no hace falta sumar `--teclado` a mano: `--suelo` se mide sobre el
     compositor, que con el teclado abierto ya está encima de él, así que el
     teclado va dentro de la cuenta. Sumarlo otra vez era subir el aviso a media
     pantalla. */

  /* En un teléfono no hay ratón que pasar por encima, así que «Responder ·
     Crear tarea · Editar · Borrar» se quedaban puestas debajo de CADA mensaje,
     en gris flojo y ocupando más alto que el propio mensaje: la conversación
     era mitad texto y mitad mandos apagados. Se esconden, y salen en el
     mensaje que tocas. Las reacciones ya puestas se quedan: son contenido —lo
     que alguien respondió— y no un mando. */
  .mensaje-acciones{min-height:0;margin-top:0;gap:5px}
  .mensaje-acciones button:not(.reaccion){display:none}
  .mensaje-humano.abierto .mensaje-acciones{margin-top:7px}
  .mensaje-humano.abierto .mensaje-acciones button:not(.reaccion){
    display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;
    opacity:1;border-color:var(--linea-2);background:var(--panel)}
  .mensaje-humano.abierto{background:var(--hover);border-radius:12px}
  .mensaje-acciones .reaccion{margin-top:6px}

  /* Un chat de persona tenía dos cabeceras con el mismo nombre. En móvil se
     queda solo la cabecera propia del chat, con una vuelta clara a la lista. */
  .principal:has(.canal-layout) .chrome{display:none}
  .lienzo.completo:has(.canal-layout){padding:0}
  .canal-cab{padding-top:max(11px,env(safe-area-inset-top));min-height:58px}
  .canal-volver{display:grid;flex:none}

  /* ── Lo que solo existía al pasar el ratón ───────────────────────────────
     En un teléfono no hay hover, así que todo lo que se revela con él no se
     revela nunca. El botón «Abrir» de cada fila de tareas es `opacity:0` y
     `pointer-events:none` hasta que el ratón pasa por encima: en el móvil no
     aparecía jamás y la fila no es pulsable, o sea que NO SE PODÍA ABRIR UNA
     TAREA desde la lista. El manejador estaba puesto todo el tiempo; lo único
     que faltaba era que se pudiera tocar. */
  /* El botón se queda fuera: en una tabla de 720 px sobre una pantalla de 390
     cae en la columna 428 y habría que arrastrar la tabla de lado para verlo.
     En su lugar abre el título, que siempre está a la vista, y para eso deja
     de ser editable en el móvil (lo hace `tareas.js`). */
  .abrir-fila{display:none}
  .titulo-tarea[data-abrir]{cursor:pointer;min-height:34px;display:inline-flex;
    align-items:center}

  /* Con el pulgar no se acierta en 28 px. Los botones del compositor —enviar,
     micrófono, adjuntar— y los de la cabecera pasan a 44, que es la medida
     mínima de un objetivo táctil. */
  .copi-redondo,.copi-x,.copi-enviar{width:44px;height:44px}
  .copi-caja{padding:10px 8px 8px 12px}
  .copi-caja textarea{line-height:1.45}

}

/* ══ SOLO EN PANTALLAS TÁCTILES ═════════════════════════════════════════════
   `pointer:coarse` significa que se señala con el dedo. Es distinto de «la
   ventana es estrecha»: una ventana de escritorio de 800 px es estrecha y se
   sigue usando con ratón.

   La distinción importa. Esta regla estaba dentro del bloque de ancho, así que
   la app instalada en el escritorio —que es más estrecha que 900 px— veía
   TODOS sus campos saltar de 12 o 13 px a 16 de golpe, y eso se ve exactamente
   como si la pantalla hubiera hecho zoom. Aquí no hace falta: los navegadores
   de escritorio no acercan la pantalla al enfocar un campo. */
@media (max-width:900px) and (pointer:coarse){
  /* iOS hace zoom al enfocar cualquier campo cuya letra baje de 16 px y te
     deja la pantalla desencuadrada. No es un gusto tipográfico: es el umbral
     exacto de Safari.

     Va con `!important` y a lo bruto porque hay más de treinta reglas por todo
     el fichero que fijan 11, 12, 13 o 14 px en campos —el compositor del chat,
     los buscadores, los desplegables de las fichas—, muchas con más
     especificidad que esta. Perseguirlas una a una es garantizar que la
     próxima que se escriba vuelva a traer el zoom. */
  input,textarea,select,[contenteditable]:not([contenteditable="false"]){
    font-size:16px !important}
  /* Las filas de los menús flotantes —«Más», la campana, el «···» de una
     ficha— medían 34 px: se apilan pegadas y con el pulgar se acababa en la de
     al lado. 40 px es lo mínimo para un dedo y el menú más largo («Más», trece
     filas) sigue cabiendo en un iPhone de 844 px sin rodar. Por `min-height` para que el
     modo compacto no las vuelva a encoger. */
  .menu-item{min-height:40px}
}

/* ── Mensajes: grupos y personas ────────────────────────────────────────────
   La pantalla mezclaba canales, personas y conversaciones de Claude en tres
   formatos distintos. Ahora son dos listas con la misma forma —cara, nombre,
   una línea de contexto— para que se lean igual y se pueda saltar de una a
   otra sin recolocar la mirada. */
.msg-bloque{max-width:640px;margin:0 0 26px}
.msg-lista{border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;background:var(--panel)}
.msg-fila{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;
  text-align:left;border-bottom:1px solid var(--linea)}
.msg-fila:last-child{border-bottom:0}
.msg-fila:hover{background:var(--hover)}
.msg-fila .txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.msg-fila .txt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-fila .txt small{font-size:12px;color:var(--tinta-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.msg-cara{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--primario);color:var(--primario-txt);font-size:11px;font-weight:680;
  position:relative;overflow:hidden}
.msg-cara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Un grupo no tiene cara: lleva su almohadilla, y se distingue del círculo de
   una persona por la forma además de por el contenido. */
.msg-cara.canal{border-radius:8px;background:var(--activo);color:var(--tinta-2);font-size:16px}
.msg-bola{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--rojo);color:#fff;font-size:11px;font-weight:680;font-style:normal;
  display:grid;place-items:center}


/* ── La primera vez ────────────────────────────────────────────────────── */
/* A pantalla completa y CON LOS COLORES DE LA AGENCIA en la que entras. Advanze
   es el gris claro azulado del icono y su azul; OnBrands, el negro y su verde.
   No es adorno: esto tapa la aplicación entera y es lo primero que alguien ve de
   la casa, así que lo que no diga de quién es, no lo dice nadie.

   Los colores van como tokens en el propio elemento y no dentro de un
   `@media`/`[data-theme]`: la lámina NO sigue el tema del navegador. Es una
   pausa antes de entrar, y una pausa que cambia de aspecto según cómo tengas el
   sistema deja de ser una portada de marca. */
.estreno{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  opacity:0;transition:opacity .3s var(--curva);
  --e-fondo:#eef2f8; --e-caja:#fff; --e-tinta:#00183c; --e-suave:#5c6169;
  --e-linea:#dbe3ef; --e-color:#0052cc; --e-tenue:#e4eaf4;
  background:var(--e-fondo);color:var(--e-tinta)}
.estreno[data-agencia="onbrands"]{
  --e-fondo:#07090b; --e-caja:#11151a; --e-tinta:#f4f6f8; --e-suave:#98a3ae;
  --e-linea:#232a31; --e-color:#5fd2b4; --e-tenue:#1a2128}
.estreno[data-agencia="21nova"]{
  --e-fondo:#f1f3f2; --e-tinta:#1c1e1e; --e-suave:#656969;
  --e-linea:#dedfdf; --e-color:#055a5b; --e-tenue:#e5eeeb}
.estreno.puesto{opacity:1}
.estreno-lamina{position:relative;display:flex;flex-direction:column;
  width:min(100%,860px);height:100dvh;padding:24px;gap:16px}
.estreno-centro{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:14px;min-height:0}

/* Cada trozo entra cuando le toca contarse. El escalón lo pone el marcado con
   `--paso`, así que una lámina nueva no necesita CSS nuevo: solo numerar. */
@keyframes estreno-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.estreno.puesto [style*="--paso"]{animation:estreno-entra .5s var(--curva) backwards;
  animation-delay:calc(var(--paso) * .12s)}

.estreno-marca{position:absolute;top:22px;left:24px;height:20px;width:auto;opacity:.9}
.estreno-lamina h2{font-size:clamp(26px,5.2vw,44px);font-weight:680;letter-spacing:-.03em;
  line-height:1.1;margin:0;max-width:16ch}
.estreno-lamina h2 em{font-style:normal;color:var(--e-color)}
.estreno-lamina p{margin:0;max-width:52ch;font-size:14px;line-height:1.65;color:var(--e-suave)}

.estreno-maqueta{width:100%;max-width:520px;margin-top:10px;display:flex;justify-content:center}
.estreno-hacer{margin-top:14px;min-height:42px}

.estreno-pie{display:flex;align-items:center;gap:12px;flex:none}
.estreno-puntos{display:flex;gap:6px;flex:1;justify-content:center}
.estreno-puntos i{width:6px;height:6px;border-radius:999px;background:var(--e-linea);cursor:pointer;
  transition:width .2s var(--curva),background .2s}
.estreno-puntos i.aqui{background:var(--e-color);width:18px}
.estreno-redondo{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--e-linea);background:none;color:var(--e-suave);flex:none}
.estreno-redondo:disabled{opacity:.35}
.estreno-redondo svg{width:15px;height:15px}
.estreno-saltar{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid var(--e-linea);border-radius:999px;background:none;
  color:var(--e-suave);font-size:12px;z-index:2}
.estreno-saltar:hover{color:var(--e-tinta)}
.estreno-saltar svg{width:12px;height:12px}

/* ── Las maquetas ──────────────────────────────────────────────────────── */
/* Dibujadas con divs y no con capturas: una captura envejece a la semana y
   encima no se puede animar por partes, que es lo que hace que se entienda. */
.mq{width:100%;border:1px solid var(--e-linea);border-radius:16px;background:var(--e-caja);
  padding:14px;text-align:left;font-size:12px}
.mq-linea{display:block;height:7px;border-radius:999px;background:var(--e-tenue);width:100%}
.mq-linea.corta{width:52%}
.mq-linea.larga{width:70%;height:9px;margin-bottom:12px}
.mq-av{width:24px;height:24px;border-radius:8px;background:var(--e-tenue);flex:none;
  display:grid;place-items:center;color:var(--e-color);font-size:10px;font-weight:680}
.mq-av.chico{width:22px;height:22px;border-radius:999px}
.mq-ic{display:inline-flex;color:var(--e-suave);flex:none;opacity:.7}
.mq-ic svg{width:13px;height:13px}

.mq-app{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:0;overflow:hidden}
.mq-riel{display:flex;flex-direction:column;gap:2px;padding:12px 8px;
  border-right:1px solid var(--e-linea)}
.mq-riel span{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  color:var(--e-suave)}
.mq-riel span.aqui{background:var(--e-tenue);color:var(--e-color)}
.mq-riel svg{width:14px;height:14px}
.mq-riel b{font-size:11px;font-weight:550}
.mq-cuerpo{padding:14px 14px 14px 0}
.mq-tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mq-tarjeta{border:1px solid var(--e-linea);border-radius:12px;padding:10px;display:flex;
  flex-direction:column;gap:6px;min-width:0}
.mq-tarjeta b{font-size:11px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mq-ficha{display:flex;flex-direction:column}
.mq-ficha-cab{display:flex;align-items:center;gap:9px;padding-bottom:10px;
  border-bottom:1px solid var(--e-linea);margin-bottom:8px}
.mq-ficha-cab b{font-size:13px;font-weight:680}
.mq-fila{display:grid;grid-template-columns:16px auto 1fr;align-items:center;gap:9px;padding:7px 4px}
.mq-fila b{font-size:12px;font-weight:550}
.mq-fila small{color:var(--e-suave);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mq-chat{display:flex;flex-direction:column;gap:9px}
.mq-msg{border-radius:12px;padding:10px 12px;max-width:82%}
.mq-msg.mio{align-self:flex-end;background:var(--e-tenue)}
.mq-msg.ia{align-self:flex-start;border:1px solid var(--e-linea);width:82%;
  display:flex;flex-direction:column;gap:6px}
.mq-pasos{display:flex;flex-direction:column;gap:3px;padding-left:2px}
.mq-pasos span{font-size:11px;color:var(--e-suave);font-family:var(--mono);opacity:.8}
.mq-pasos span::before{content:'· '}

.mq-agentes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mq-agente{display:flex;align-items:center;gap:9px;border:1px solid var(--e-linea);
  border-radius:12px;padding:10px}
.mq-agente b{font-size:12px;font-weight:550;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-punto{width:6px;height:6px;border-radius:999px;background:var(--e-color);flex:none}

/* La portada: el icono de la app, grande y solo. */
.mq-portada{display:grid;place-items:center;padding:8px 0}
.mq-portada img{width:112px;height:112px;border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
/* Logos de plataforma dentro del círculo del agente. */
.mq-av.logo{background:#fff;border:1px solid var(--e-linea)}
.mq-av.logo img{width:13px;height:13px;object-fit:contain}
.mq-av.logo svg{width:12px;height:12px}
/* Tablero de tareas en tres columnas. */
.mq-tablero{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mq-col{display:flex;flex-direction:column;gap:6px;background:var(--e-tenue);border-radius:12px;padding:8px}
.mq-col small{font-size:10px;font-weight:680;letter-spacing:.04em;text-transform:uppercase;color:var(--e-suave);padding:2px 2px 4px}
.mq-tarea{background:var(--e-caja);border:1px solid var(--e-linea);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:5px}
.mq-rutinas .mq-fila,.mq-contexto .mq-fila{border-bottom:1px solid var(--e-linea)}
.mq-rutinas .mq-fila:last-child,.mq-contexto .mq-fila:last-child{border-bottom:0}
.mq-avisos{display:flex;flex-direction:column;gap:8px}
.mq-aviso{display:grid;grid-template-columns:16px auto 1fr;align-items:center;gap:9px;
  border:1px solid var(--e-linea);border-left:2px solid var(--e-linea);border-radius:12px;padding:10px}
.mq-aviso.rojo{border-left-color:var(--rojo)}
.mq-aviso.ambar{border-left-color:var(--ambar,#e8a33d)}
.mq-aviso.azul{border-left-color:var(--e-color)}
.mq-aviso b{font-size:12px;font-weight:550}
.mq-aviso small{color:var(--e-suave);font-size:11px}

.mq-compositor{display:flex;align-items:center;gap:2px;padding:14px 16px;border-radius:12px}
.mq-escribiendo{font-size:13px;color:var(--e-tinta)}
.mq-cursor{display:inline-block;width:2px;height:15px;background:var(--e-color);
  animation:mq-parpadeo 1.1s steps(1) infinite}
@keyframes mq-parpadeo{50%{opacity:0}}

@media (max-width:640px){
  .estreno-lamina{padding:18px}
  .estreno-marca{top:18px;left:18px;height:17px}
  .mq-app{grid-template-columns:1fr}
  .mq-riel{flex-direction:row;overflow:hidden;border-right:0;border-bottom:1px solid var(--e-linea)}
  .mq-riel b{display:none}
  .mq-cuerpo{padding:0 14px 14px}
  .mq-agentes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .estreno.puesto [style*="--paso"]{animation:none}
  .mq-cursor{animation:none}
}

/* ── El método de la casa ────────────────────────────────────────────────
   Las skills, juntas y con lo que decide si el modelo las abre a la vista. */
.skills-cargando{padding:40px 0;color:var(--tinta-3);font-size:14px}
.skills-rama{margin-bottom:28px}
.skills-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.skill-tarjeta{display:flex;flex-direction:column;gap:8px;padding:16px;text-align:left;
  border:1px solid var(--linea);border-radius:12px;background:var(--panel);cursor:pointer}
.skill-tarjeta:hover{border-color:var(--tinta-3);box-shadow:var(--sombra)}
/* Una skill que no llega al modelo está escrita pero no sirve: se ve apagada
   porque es exactamente lo que es. */
.skill-tarjeta.apagada{background:var(--panel-2);border-style:dashed}
.skill-cab{display:flex;align-items:center;gap:8px;justify-content:space-between}
.skill-cab b{font-size:14px;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La descripción va ENTERA, no recortada: es lo que se viene a revisar. */
.skill-tarjeta p{margin:0;font-size:12px;line-height:1.55;color:var(--tinta-2)}
.skill-tarjeta small{font-size:11px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.skill-editor{max-width:820px}
.skill-editor textarea{width:100%;font:13px/1.6 var(--mono);padding:12px;border-radius:12px;
  border:1px solid var(--linea-2);background:var(--panel);color:inherit;resize:vertical}
.skill-editor textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-b)}
.campo-ayuda{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--tinta-3)}
/* Un aviso que ocupa su sitio, no una notificación que se va: lo que dice hay
   que arreglarlo, no enterarse y seguir. */
.aviso-bloque{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;
  margin-bottom:20px;border:1px solid var(--linea-2);background:var(--panel-2)}
.aviso-bloque svg{width:18px;height:18px;flex:none;margin-top:1px}
.aviso-bloque b{display:block;font-size:13px;font-weight:680;margin-bottom:3px}
.aviso-bloque p{margin:0;font-size:12px;line-height:1.55;color:var(--tinta-2)}
.aviso-bloque.rojo{border-color:var(--rojo-borde,var(--linea-2));background:var(--rojo-b,var(--panel-2))}
.aviso-bloque.rojo svg{color:var(--rojo,var(--tinta-2))}
.aviso-bloque.ambar{border-color:var(--ambar-borde,var(--linea-2));background:var(--ambar-b,var(--panel-2))}
.aviso-bloque.ambar svg{color:var(--ambar,var(--tinta-2))}
@media(max-width:700px){.skills-lista{grid-template-columns:minmax(0,1fr)}}

/* Un servidor que no ha llegado a arrancar, o una credencial que falta. No es
   un error del turno —la respuesta llega igual— pero cambia cómo hay que
   leerla, así que se dice al lado y no en un log que nadie abre. */
.copi-aviso{display:flex;align-items:flex-start;gap:8px;margin:10px 0;
  padding:9px 11px;border-radius:8px;border:1px solid var(--borde);
  background:var(--activo);font-size:12px;color:var(--tinta-2)}
.copi-aviso svg{width:14px;height:14px;flex:none;margin-top:1px}

/* Lo que se ha aprendido a base de correcciones, debajo de las reglas de la
   casa. Se lee como una lista de notas, no como una tabla: son frases. */
.capa-extra{margin-top:28px;padding-top:20px;border-top:1px solid var(--linea)}
.capa-extra h2{font-size:14px;margin:18px 0 4px;display:flex;align-items:center;gap:8px}
.capa-extra h2 small{font-weight:400;color:var(--tinta-3);font-size:12px}
.capa-extra > p.s{margin:0 0 10px;color:var(--tinta-3);font-size:12px;max-width:70ch}
.lista-correcciones,.lista-negativas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lista-correcciones li,.lista-negativas li{display:grid;gap:2px;position:relative;
  padding:9px 34px 9px 11px;border:1px solid var(--linea);border-radius:8px;background:var(--panel)}
.lista-correcciones li > span,.lista-negativas li > span{font-size:12px;color:var(--tinta-2)}
.lista-negativas li > b{font-size:12px;color:var(--tinta)}
.lista-correcciones li small,.lista-negativas li small{font-size:11px;color:var(--tinta-3)}
.lista-correcciones li > .lat-icono,.lista-negativas li > .lat-icono{position:absolute;top:6px;right:6px}


/* ── Interno ───────────────────────────────────────────────────────────── */
/* La portada dice QUÉ es esto y cuáles son sus partes, y ya. Lo de dentro se
   ve al entrar; enseñarlo aquí convertía la entrada en un muro donde una
   carpeta de tercer nivel pesaba lo mismo que la sección de la que cuelga. */
.interno-portada{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:28px 0 24px}
.interno-portada.chica{padding:20px 0 16px}
.interno-marcas{display:flex;align-items:center;gap:20px;margin-bottom:4px}
.interno-marcas img{height:26px;width:auto;opacity:.85}
.interno-portada h1{font-size:28px;font-weight:680;letter-spacing:-.01em}
.interno-portada p{max-width:60ch;color:var(--tinta-2);font-size:13px;line-height:1.6}
.interno-acciones{display:flex;gap:8px;flex-wrap:wrap}

.interno-partes{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.interno-partes.chicas{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.interno-parte{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:16px;border:1px solid var(--linea);border-radius:12px;text-align:left;
  background:var(--panel);transition:border-color .15s,background .15s}
.interno-parte:hover{border-color:var(--linea-2);background:var(--panel-2)}
.interno-parte-ic{display:inline-flex;color:var(--tinta-3)}
.interno-parte-ic svg{width:18px;height:18px}
.interno-parte b{font-size:14px;font-weight:550}
.interno-parte-nota{font-size:12px;color:var(--tinta-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.interno-parte-n{font-size:11px;color:var(--tinta-3);font-variant-numeric:tabular-nums}

/* ── La caja fuerte, desde la web ──────────────────────────────────────── */
/* El valor se pega aquí y no vuelve a salir: esta pantalla lista NOMBRES, que
   es la misma regla que el resto de Integraciones. */
.caja-fuerte{display:flex;flex-direction:column;gap:18px}
.caja-form{display:flex;flex-direction:column;gap:12px;max-width:560px;
  border:1px solid var(--linea);border-radius:12px;padding:16px;background:var(--panel)}
.caja-form .campo{display:flex;flex-direction:column;gap:5px}
.caja-form label{font-size:12px;font-weight:550;color:var(--tinta-2)}
.caja-form .opcional{font-weight:400;color:var(--tinta-3)}
.caja-form small{font-size:11px;color:var(--tinta-3)}
.caja-form input,.caja-form select,.caja-form textarea{width:100%;padding:9px 11px;
  border:1px solid var(--linea-2);border-radius:8px;background:var(--fondo);
  font-size:13px;font-family:inherit}
.caja-form textarea{font-family:var(--mono);font-size:12px;resize:vertical}
.caja-form input:focus,.caja-form select:focus,.caja-form textarea:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-b)}
.caja-msg{font-size:12px;min-height:16px}
.caja-msg.mal{color:var(--rojo)}
.caja-msg.bien{color:var(--tinta-2)}
.caja-tit{font-size:13px;font-weight:680;margin:0}
.caja-lista{display:flex;flex-direction:column;gap:2px;max-width:560px}
.caja-fila{display:grid;grid-template-columns:16px 1fr auto auto auto;align-items:center;gap:10px;
  padding:9px 8px;border-radius:8px}
/* Sustituir y Borrar (y en los conectores, Probar/Apagar/Retirar): discretos
   hasta que pasas por la fila, para que la lista se siga leyendo como lista. */
.caja-acciones{display:inline-flex;gap:6px;flex:none}
.caja-acciones:empty{display:none}
.caja-huella{font-family:var(--mono);color:var(--tinta-2)}
.integra-clave.apagado b{color:var(--tinta-3)}
.mcp-resultado{font-size:11px;color:var(--tinta-3)}
.mcp-resultado:empty{display:none}
.mcp-resultado.bien{color:var(--verde)}
.mcp-resultado.mal{color:var(--rojo)}
.mcp-resultado.medio{color:var(--ambar)}
.mcp-form{margin:12px 0 4px}
.mcp-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tinta-2)}
.mcp-check input{width:auto}
@media (max-width:620px){
  .caja-fila{grid-template-columns:16px 1fr;row-gap:6px}
  .caja-fila>.caja-uso,.caja-fila>.caja-caduca,.caja-fila>.caja-acciones{grid-column:2}
}
.caja-fila:hover{background:var(--activo)}
.caja-ic{display:inline-flex;color:var(--tinta-3)}
.caja-ic svg{width:14px;height:14px}
.caja-n{display:flex;flex-direction:column;min-width:0}
.caja-n b{font-size:13px;font-weight:550;font-family:var(--mono)}
.caja-n small{font-size:11px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caja-uso{font-size:11px;color:var(--tinta-3);white-space:nowrap}
/* La caducidad de una credencial. Es un botón porque es lo único de una
   credencial ya guardada que se puede cambiar desde la interfaz. */
.caja-caduca{font-size:11px;white-space:nowrap;padding:2px 8px;border-radius:999px;
  border:1px solid var(--linea-2);color:var(--tinta-3);background:none}
.caja-caduca:hover{border-color:var(--tinta-3);color:var(--tinta)}
.caja-caduca.bien{color:var(--verde);border-color:color-mix(in srgb,var(--verde) 25%,transparent)}
.caja-caduca.dudoso{color:var(--ambar);border-color:color-mix(in srgb,var(--ambar) 35%,transparent);
  background:var(--ambar-b)}
.caja-caduca.mal{color:var(--rojo);border-color:color-mix(in srgb,var(--rojo) 35%,transparent);
  background:var(--rojo-b)}
.campo-nota{display:block;margin-top:4px;font-size:11px;color:var(--tinta-3);line-height:1.45}

/* ¿Arrancan los MCP? El color dice el estado y el texto dice por qué: «no
   arranca» sin el motivo obliga a ir al log, que es de donde se venía huyendo. */
.salud-lista{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.salud-fila{display:grid;grid-template-columns:8px 1fr auto auto;align-items:center;gap:10px;
  padding:9px 8px;border-radius:8px}
.salud-fila:hover{background:var(--activo)}
.salud-punto{width:8px;height:8px;border-radius:999px;background:var(--linea-2)}
.salud-fila.bien .salud-punto{background:var(--verde)}
.salud-fila.mal .salud-punto{background:var(--rojo)}
.salud-fila.medio .salud-punto{background:var(--ambar)}
.salud-n{display:flex;flex-direction:column;min-width:0}
.salud-n b{font-size:13px;font-weight:550;font-family:var(--mono)}
.salud-n small{font-size:11px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salud-que{font-size:11px;color:var(--tinta-2);white-space:nowrap}
.salud-ms{font-size:11px;color:var(--tinta-3);font-variant-numeric:tabular-nums;white-space:nowrap}


/* ── Filtros del dashboard (compactos, a la derecha del todo) ─────────── */
.dash-filtros{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Cada filtro es una pastilla que abre un menú. Nativo (<details>): compacto y
   sin JS de apertura. La activa se marca con el acento. */
.dash-drop{position:relative}
.dash-drop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--tinta);background:var(--panel);border:1px solid var(--linea-2);
  border-radius:8px;padding:6px 10px;white-space:nowrap;user-select:none;transition:border-color .12s,color .12s}
.dash-drop>summary::-webkit-details-marker{display:none}
.dash-drop>summary:hover{border-color:var(--tinta-3)}
.dash-drop[open]>summary{border-color:var(--acento);color:var(--acento)}
.dash-drop .caret{color:var(--tinta-3);font-size:10px;line-height:1}
.dash-drop[open] .caret{color:var(--acento)}
.dash-drop-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:40;min-width:160px;
  background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;
  box-shadow:var(--sombra-alta,0 10px 28px rgba(0,24,60,.18));padding:4px;display:flex;flex-direction:column}
.dash-drop-menu button{text-align:left;border:0;background:none;color:var(--tinta-2);font:inherit;
  font-size:13px;padding:7px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.dash-drop-menu button:hover{background:var(--hover);color:var(--tinta)}
.dash-drop-menu button.activo{color:var(--acento);font-weight:680}
.dash-fechas-custom,.dash-comp-custom{display:inline-flex;align-items:center;gap:5px}
.dash-fechas-custom input[type=date],.dash-comp-custom input[type=date]{font:inherit;font-size:12px;
  color:var(--tinta);background:var(--panel);border:1px solid var(--linea-2);border-radius:8px;padding:4px 7px}
.dash-guion{color:var(--tinta-3)}
/* Acciones solo-icono (traer datos, configurar, quitar). */
.dash-acciones .btn.solo-icono{padding:0;width:32px;height:32px;display:inline-grid;place-items:center}
.dash-acciones .btn.solo-icono svg{width:16px;height:16px}
.dash-acciones .btn.solo-icono.cargando{opacity:.6;pointer-events:none}
.dash-acciones .btn.solo-icono.cargando svg{animation:dash-girar .8s linear infinite}
@keyframes dash-girar{to{transform:rotate(360deg)}}

/* ── Informe HTML a medida ────────────────────────────────────────────── */
/* El HTML lo escribe la IA con su propio <style>; aquí solo se le da un lienzo
   y estilos por defecto para los gráficos y tablas que inyecta el servidor. */
.dash-informe{margin-top:14px;border:1px solid var(--linea);border-radius:16px;
  background:var(--panel);overflow:hidden}
/* El informe va en un iframe aislado (su JS corre ahí dentro), SIN el borde ni el
   marco blanco de antes, pero con el mismo ancho y márgenes que el resto de
   secciones (no a sangre: pegado a los bordes agobiaba). El alto lo reporta él. */
.dash-informe-frame{width:100%;min-height:240px;border:0;background:transparent;display:block}
.dash-informe .inf-nada{color:var(--tinta-3);font-size:13px;margin:6px 0}
.dash-informe .inf-serie{display:block;width:100%;height:auto}
.dash-informe .inf-serie-area{fill:color-mix(in srgb,var(--acento) 14%,transparent)}
.dash-informe .inf-serie-linea{stroke:var(--acento);stroke-width:2;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.dash-informe .inf-serie-pie{display:flex;justify-content:space-between;
  color:var(--tinta-3);font-size:11px;margin-top:4px}
.dash-informe .inf-tabla{width:100%;border-collapse:collapse;font-size:13px}
.dash-informe .inf-tabla th,.dash-informe .inf-tabla td{
  padding:7px 10px;border-bottom:1px solid var(--linea);text-align:left}
.dash-informe .inf-tabla th{color:var(--tinta-3);font-weight:680;
  font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.dash-informe .inf-tabla td{font-variant-numeric:tabular-nums}

/* El editor de HTML del informe reusa la caja del editor de dashboard. */
.dash-editor #inf-html{width:100%;min-height:340px;font:13px/1.5 var(--mono,monospace);
  color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:12px;padding:12px;resize:vertical}

/* Tablas de markdown en los mensajes de la IA (y donde se use md()). Compactas,
   temáticas y con scroll horizontal propio si no caben, para no ensanchar el chat. */
.md-tabla-caja{overflow-x:auto;margin:10px 0;border-radius:8px}
.md-tabla{border-collapse:collapse;font-size:13px;min-width:min(100%,300px);background:var(--panel)}
.md-tabla th,.md-tabla td{border:1px solid var(--linea);padding:6px 10px;text-align:left;vertical-align:top}
.md-tabla th{background:var(--panel-2);font-weight:680;white-space:nowrap;color:var(--tinta)}
.md-tabla td{color:var(--tinta-2)}

/* Emparejar tu ordenador. Vivía en el panel del navegador, que ya no existe;
   ahora es un apartado de Conexiones y reusa la ropa de las otras sesiones. */
.puente-token{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--linea-2);border-radius:12px;padding:12px 14px;background:var(--panel-2)}
.puente-token label{flex:1 0 100%;font-size:11px;color:var(--tinta-3)}
.puente-token code{flex:1;min-width:0;font-size:12px;overflow-wrap:anywhere;
  padding:7px 9px;border-radius:8px;background:var(--panel);border:1px solid var(--linea)}
.puente-pasos{margin:16px 0 0;padding-left:20px}
.puente-pasos li{font-size:13px;line-height:1.7;color:var(--tinta-2)}
.puente-pasos code{font-size:12px;padding:2px 6px;border-radius:4px;background:var(--activo)}

/* Organización de automatizaciones, agentes y biblioteca interna. */
.rutinas-toolbar,.agentes-toolbar{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin:var(--e4) 0}
.rutinas-toolbar .busqueda,.agentes-toolbar .busqueda{flex:1;min-width:220px;max-width:440px}
.rutinas-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--e4);align-items:start}
.rutina.rutina-ficha{display:flex;flex-direction:column;gap:var(--e3);min-width:0;background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:var(--e4)}
.rutina-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e3);width:100%}
.rutina-cab>div{display:flex;align-items:flex-start;gap:var(--e2);min-width:0}
.rutina-cab h2{font-size:16px;font-weight:680;line-height:1.4;margin:0;overflow-wrap:anywhere}
.rutina-cab .pill{flex:none}
.rutina-descripcion{font-size:13px;color:var(--tinta-2);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rutina-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3);margin:0;width:100%;padding:var(--e3) 0;border-block:1px solid var(--linea)}
.rutina-datos dt{font-size:11px;color:var(--tinta-3);margin-bottom:4px}
.rutina-datos dd{font-size:13px;margin:0;color:var(--tinta);overflow-wrap:anywhere;line-height:1.5}
.agentes-actividad summary{cursor:pointer;padding:var(--e2) 0}
.autom-pasos{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.rutina-descripcion.abierta{display:block;-webkit-line-clamp:unset;white-space:pre-wrap;overflow-wrap:anywhere}
.rutina-vermas{align-self:flex-start;padding:0;background:none;border:0;cursor:pointer;font-size:12px;color:var(--tinta-2);text-decoration:underline;margin-top:calc(-1 * var(--e2))}
.rutina-ficha .rutina-acciones{width:100%;justify-content:flex-start;align-items:center;margin-top:auto}
.rutina-ficha .rutina-acciones>.dato-sec{font-size:11px;flex-basis:100%}
.rutina-condicion{font-size:12px;color:var(--tinta-2);margin:0}
.rutina-meta{font-size:12px;color:var(--tinta-3);margin:0;line-height:1.5;overflow-wrap:anywhere}
.autom-frecuencia{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.autom-frecuencia small{display:block;margin-top:4px;color:var(--tinta-3)}
.horario-control{padding:var(--e3);background:var(--panel-2);border:1px solid var(--linea);border-radius:8px}
.horario-control label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.horario-valores{display:flex;gap:var(--e3);margin-top:var(--e3)}
.horario-valores label{flex:1;min-width:0}
.horario-dias{display:flex;gap:6px;margin-top:var(--e3);flex-wrap:wrap}
.horario-dias label{position:relative;cursor:pointer}
.horario-dias input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.horario-dias span{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel)}
.horario-dias input:checked+span{background:var(--tinta);color:var(--panel);border-color:var(--tinta)}
.horario-dias input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}
.horario-control [hidden],.agente-card[hidden],#agentes-vacio[hidden]{display:none!important}
.catalogo .agente-card{display:flex;flex-direction:column;box-shadow:none;min-width:0}
.catalogo .agente-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
.catalogo .agente-top h3{white-space:normal;line-height:1.5;overflow-wrap:anywhere}
.catalogo .agente-top>.pill{grid-column:2;justify-self:start}
.catalogo .agente-card>p{flex:1}
.catalogo .card-acciones{margin-top:auto}
.agentes-actividad{margin-top:var(--e5);border-top:1px solid var(--linea);padding-top:var(--e3)}
.agentes-actividad summary{font-size:14px;font-weight:550}
.agentes-actividad summary .dato-sec{font-weight:400;font-size:12px;margin-left:var(--e3)}
.agentes-actividad .ejecuciones{margin-top:var(--e3)}
.interno-biblioteca .interno-partes{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin-bottom:var(--e5)}
.interno-biblioteca .interno-parte{padding:var(--e4);gap:var(--e2)}
.interno-biblioteca .interno-parte-ic{display:grid;place-items:center;width:38px;height:38px;background:var(--panel-2);border-radius:8px;margin-bottom:var(--e2)}
.interno-biblioteca .interno-parte-n{margin-top:auto;padding-top:var(--e2)}
.interno-biblioteca .casa-espacio{margin-top:var(--e5)}
.interno-biblioteca .casa-espacio-cab h2{font-size:14px;font-weight:550}
.interno-biblioteca .casa-indice{border:1px solid var(--linea);border-radius:12px;background:var(--panel);overflow:hidden;margin-top:var(--e3)}
.interno-cabecera p{font-size:13px;color:var(--tinta-2);line-height:1.5;margin-top:var(--e2)}
.carp.carpeta-resumen{display:flex;align-items:center;gap:var(--e3);padding:var(--e4);border:1px solid var(--linea);border-radius:12px;background:var(--panel);min-width:0;text-align:left}
.carp.carpeta-resumen:hover{background:var(--hover);border-color:var(--linea-2)}
.carpeta-resumen-icono{display:grid;place-items:center;flex:none;width:36px;height:36px;background:var(--panel-2);border-radius:8px;color:var(--tinta-2)}
.carpeta-resumen-icono svg{width:20px;height:20px}
.carpeta-resumen-texto{flex:1;min-width:0}
.carpeta-resumen .nom{display:block;font-size:13px;font-weight:550;margin:0;overflow-wrap:anywhere}
.carpeta-resumen .sub{display:block;font-size:11px;margin-top:4px;color:var(--tinta-3)}
.visor>.docs-inicio{width:100%;box-sizing:border-box}
.docs-inicio .carpetas{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.docs-migas{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;margin-bottom:var(--e4);font-size:12px;color:var(--tinta-3)}
.docs-migas button:hover{color:var(--tinta);text-decoration:underline}
@media(max-width:700px){
  .rutinas-toolbar .busqueda,.agentes-toolbar .busqueda{min-width:0;flex-basis:100%;max-width:none}
  .rutinas-rejilla{grid-template-columns:minmax(0,1fr)}
  .rutina-datos{gap:var(--e3) var(--e2)}
  .rutina-ficha .rutina-acciones{gap:var(--e2)}
  .catalogo{grid-template-columns:minmax(0,1fr)}
  .interno-biblioteca .cabecera{gap:var(--e3);flex-wrap:wrap}
  .interno-biblioteca .acciones{flex-wrap:wrap}
  .carpetas{grid-template-columns:minmax(0,1fr)}
  .docs-inicio>header .btn{font-size:12px}
}
.autom-grupo-cab{margin-top:var(--e4)}
.aviso-despliegue{align-items:flex-start;gap:var(--e3);font-size:13px;line-height:1.6}
.aviso-despliegue>svg{width:20px;height:20px;flex:none;margin-top:2px}
.aviso-despliegue>div{min-width:0;overflow-wrap:anywhere}
.autom-celda{min-width:0}
.autom-celda .autom-identidad b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5}
.autom-celda .autom-frecuencia{display:block;white-space:normal}
@media(max-width:900px){
  .marco>.lateral:not(.abierto){display:none}
  .marco>.lateral.abierto{background:var(--panel)}
  #mostrar-lateral{display:grid!important}
}
@media(max-width:850px){
  .autom-fila.bbdd-fila{grid-template-columns:minmax(0,1fr) auto!important;gap:var(--e2);padding:var(--e3)}
  .autom-celda[data-columna=nombre]{grid-column:1;grid-row:1}
  .autom-celda[data-columna=estado]{grid-column:2;grid-row:1;align-self:start}
  .autom-celda[data-columna=proyecto]{grid-column:1/-1;grid-row:2}
  .autom-celda[data-columna=frecuencia]{grid-column:1/-1;grid-row:3;color:var(--tinta-2)}
  .autom-celda[data-columna=ultima]{display:none}
  .autom-fila>.fila-flecha{display:none}
  .autom-celda .autom-identidad b{font-size:13px}
  .autom-celda .bbdd-proyecto small{display:none}
  .autom-celda .bbdd-proyecto .avc{width:20px;height:20px}
  .autom-celda .autom-frecuencia small{display:inline;margin-left:var(--e2)}
}
.agentes-toolbar>.dato-sec{font-size:12px;color:var(--tinta-3)}
.catalogo .card-uso{margin-bottom:var(--e3)}
/* `.docs-inicio>header>div` es el bloque del título; las acciones también son
   un div y heredaban su rejilla expansible: «Nueva página» ocupaba media fila. */
.docs-inicio>header>.acciones{flex:none;display:flex;gap:var(--e2);align-items:center}

/* ── Mensajes estilo Google Chat ─────────────────────────────────────────
   Lo tuyo a la derecha en azul; lo de los demás a la izquierda en gris, con su
   cara y su nombre. Los mensajes seguidos de la misma persona se agrupan. */
.canal-mensajes .mensaje-humano{max-width:none;padding:2px 6px;margin-top:10px;gap:10px}
.canal-mensajes .mensaje-humano:hover,.hilo-scroll .mensaje-humano:hover{background:none}
.canal-mensajes .mensaje-humano.seguido{margin-top:2px}
.canal-mensajes .mensaje-humano.seguido>.persona-av{visibility:hidden;height:0}
.canal-mensajes .mensaje-humano.seguido .mensaje-meta{display:none}
.mensaje-cuerpo{display:flex;flex-direction:column;align-items:flex-start}
.mensaje-meta{margin:0 4px 3px}
.mensaje-burbuja{display:inline-block;max-width:min(620px,85%);background:var(--panel-2);
  border:1px solid var(--linea);border-radius:16px;padding:8px 14px;min-width:0}
.mensaje-burbuja .mensaje-adjuntos{margin-top:6px}
.mensaje-burbuja .mensaje-texto:empty{display:none}
.mensaje-burbuja .mensaje-texto:empty+.mensaje-adjuntos{margin-top:0}
.canal-mensajes .mensaje-humano.mia{flex-direction:row-reverse}
.canal-mensajes .mensaje-humano.mia>.persona-av{display:inline-grid}
.canal-mensajes .mensaje-humano.mia .mensaje-cuerpo{align-items:flex-end}
.canal-mensajes .mensaje-humano.mia .mensaje-burbuja{background:var(--azul-b);border-color:transparent}
.canal-mensajes .mensaje-humano.mia .mensaje-acciones{justify-content:flex-end}
.mensaje-humano.resaltado .mensaje-burbuja{box-shadow:0 0 0 2px var(--realce,rgba(255,214,102,.6))}
.mensaje-acciones{margin:4px 4px 0}
/* Las acciones asoman al pasar por encima; las reacciones se quedan, como el 👍 1
   de la captura, colgando de la burbuja. */
@media(hover:hover){.mensaje-humano:not(:hover) .mensaje-acciones button:not(.reaccion){opacity:0}}
@media(hover:hover){
  .canal-mensajes .mensaje-humano{position:relative}
  .canal-mensajes .mensaje-acciones:not(:has(.reaccion)){position:absolute;top:-12px;right:10px;z-index:2;
    display:none;margin:0;min-height:0;padding:2px;background:var(--panel);border:1px solid var(--linea);
    border-radius:12px;box-shadow:var(--sombra)}
  .canal-mensajes .mensaje-humano:hover .mensaje-acciones:not(:has(.reaccion)){display:flex}
  .canal-mensajes .mensaje-humano:hover .mensaje-acciones button{opacity:1}
}

/* El lateral de Mensajes: una lista, con caras. */
.nav-item.chat-item{gap:9px}
.nav-item.chat-item + .nav-item.chat-item{margin-top:6px}
.nav-item.chat-item.activo{background:var(--panel)}
.nav-item.chat-item .et{line-height:18px}
.nav-item.chat-item .nav-cara{width:26px;height:26px;font-size:10px}
.nav-cara.grupo{background:var(--panel-2);color:var(--tinta-2);border:1px solid var(--linea);font-weight:680}
.nav-item.chat-item.sin-leer .et{font-weight:680;color:var(--tinta)}
.lat-nuevo-mensaje{cursor:pointer}

/* Historial: la cara de quien lo hizo y la herramienta con la que lo hizo. */
.act-quien{position:relative;flex:none;width:34px;height:34px}
.act-cara{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;position:relative;
  background:var(--primario);color:var(--primario-txt);font-size:12px;font-weight:680}
.act-cara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.act-cara.herramienta{background:var(--panel-2);border:1px solid var(--linea);color:var(--tinta)}
.act-cara.herramienta svg{width:19px;height:19px}
.act-cara.claude,.act-insignia.claude{color:#D97757}
.act-cara.notion b,.act-insignia.notion b{font:700 14px/1 Georgia,serif;color:var(--tinta)}
.act-insignia{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--linea);color:var(--tinta)}
.act-insignia svg{width:11px;height:11px}
.act-tipo{display:inline-grid;vertical-align:-2px;margin-right:4px;color:var(--tinta-3)}
.act-tipo svg{width:13px;height:13px}
.actividad-evento small.act-cliente{display:flex;align-items:center;gap:6px}
.act-cliente .avc,.act-cliente [class*="av"]{flex:none}

/* Interno: cada espacio con sus carpetas a un clic, y el lateral desplegable
   a la vista (la flecha estaba a opacidad 0 hasta pasar el ratón). */
.interno-biblioteca .interno-parte{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;text-align:left}
.interno-parte-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--e3);
  padding:var(--e4);text-align:left;width:100%}
.interno-parte-cab:hover{background:var(--hover)}
.interno-parte-cab b{display:block;font-size:16px}
.interno-parte-cab .interno-parte-nota{display:block;font-size:12px;color:var(--tinta-3);margin-top:3px;line-height:1.45}
.interno-biblioteca .interno-parte-cab .interno-parte-ic{margin:0}
.interno-biblioteca .interno-parte-cab .interno-parte-n{margin:0;padding:0;font-size:11px;color:var(--tinta-3);white-space:nowrap}
.interno-atajos{display:flex;flex-wrap:wrap;gap:6px;padding:var(--e3) var(--e4) var(--e4);border-top:1px solid var(--linea)}
.interno-atajos button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--linea);
  border-radius:999px;font-size:12px;color:var(--tinta-2);background:var(--panel)}
.interno-atajos button:hover{background:var(--hover);color:var(--tinta);border-color:var(--linea-2)}
.interno-atajos svg{width:13px;height:13px;color:var(--tinta-3)}
.interno-fila .nav-flecha{opacity:.7}
.interno-cabecera{align-items:flex-start}
.interno-cabecera>.acciones{flex:none}

/* Inicio: planificación del día, reuniones y correo. */
.dia-clientes{padding:16px;flex:1;border:1px solid var(--linea);border-radius:12px;min-width:220px}
.dia-clientes summary,.inicio-carga summary{cursor:pointer;font-weight:550}
.dia-clientes summary b{font-size:22px;margin-right:10px}
.dia-clientes-lista>button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;text-align:left}
.dia-clientes-lista>button span{flex:1}
.inicio-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:14px 0}
.inicio-cal-dia{text-align:center;color:var(--tinta-3);font-size:12px;padding:6px}
.inicio-cal-celda{min-height:68px;border:1px solid var(--linea);border-radius:8px;padding:8px;text-align:left;display:flex;flex-direction:column;gap:8px}
.inicio-cal-celda small{color:var(--acento);font-size:11px}
.inicio-cal-celda.activo{border-color:var(--acento);background:var(--panel-2)}
.inicio-cal-celda.otro-mes{opacity:.45}
.inicio-tarea-abrir{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--linea)}
.inicio-tarea-abrir>span:nth-child(2){flex:1;min-width:0}
.inicio-tareas b,.inicio-tareas small{display:block}
.inicio-tareas small{font-size:12px;color:var(--tinta-3);margin-top:4px}
.inicio-tarea-estado svg{width:18px;height:18px}
.inicio-bloque,.inicio-carga{margin-top:28px}
.inicio-correo a,.inicio-rutinas article{display:block;padding:14px 0;border-bottom:1px solid var(--linea);color:inherit;text-decoration:none}
.inicio-correo small,.inicio-rutinas small{display:block;color:var(--tinta-3);margin-top:4px;font-size:12px}
.inicio-correo p,.inicio-rutinas p{font-size:13px;color:var(--tinta-2);margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.inicio-correo .sin-leer{border-left:3px solid var(--acento);padding-left:12px}
.inicio-espacios{display:flex;flex-wrap:wrap;gap:8px}
.mencion-cliente{display:inline-flex;vertical-align:middle;align-items:center;gap:5px;border-radius:8px;background:var(--panel-2);padding:2px 6px;text-decoration:none;color:var(--acento)}
.hito-autor.persona-av{display:inline-flex;margin-top:8px;font-style:normal}
@media(max-width:600px){.inicio-cal-celda{min-height:48px;padding:5px}.inicio-cal-celda small span{display:none}.inicio-hoy{flex-wrap:wrap}.inicio-cal+.bloq-cab{margin-top:18px}}

.inicio-tareas>article{padding-bottom:12px;border-bottom:1px solid var(--linea)}
.inicio-tarea-abrir{border-bottom:0}
.inicio-tarea-acciones{display:flex;flex-wrap:wrap;gap:8px}
.inicio-rutinas details{margin-top:10px}
.inicio-rutinas summary{cursor:pointer;font-size:13px}
.inicio-rutinas details p{display:block;max-height:320px;overflow:auto}
.inicio-rutinas .requiere-atencion{border-left:3px solid var(--ambar);padding-left:12px}

.chat-preview{display:block;font-size:11px;line-height:14px;font-weight:400;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.card-uso summary{cursor:pointer;font-size:12px;margin-bottom:8px}
.drive-ayuda{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;font-size:12px;color:var(--tinta-2)}
.drive-ayuda span{flex:1;min-width:200px}
.catalogo details.card-uso{display:block}
.drive-visor .pag-scroll{flex-direction:column}
.drive-visor .drive-ayuda{flex:none}
.drive-visor .incrustado{min-height:0;height:auto}

.navegador-rutinas{padding:24px;max-width:1600px;margin:auto;width:100%;box-sizing:border-box}
.navegador-rutinas-cabecera{display:flex;justify-content:space-between;align-items:start;gap:20px}
.navegador-rutinas-cabecera h1{margin:0 0 8px}
.navegador-rutinas-acciones{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.navegador-rutinas-pantalla{height:70vh;min-height:400px;width:100%;overflow:hidden;background:#17212e;border-radius:12px}
.navegador-rutinas-pantalla[hidden]{display:none}
@media(max-width:600px){.navegador-rutinas{padding:14px}.navegador-rutinas-cabecera{flex-direction:column}.navegador-rutinas-pantalla{height:65vh;min-height:320px}}

/* Catálogo de especialistas: identidad, especialidad y una acción directa. */
.catalogo-agentes{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.catalogo-agentes .agente-card{padding:18px;gap:12px}
.catalogo-agentes .agente-top{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.catalogo-agentes .agente-top>.pill{grid-column:auto;font-size:10px;padding:3px 7px}
.catalogo-agentes .agente-top h3{line-height:1.35}
.catalogo-agentes h3 button{text-align:left;font:inherit;font-weight:550;color:inherit;padding:0;background:none;border:0;cursor:pointer}
.catalogo-agentes h3 button:hover{text-decoration:underline}
.catalogo-agentes .agente-card>p{margin:0;min-height:40px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.catalogo-agentes .card-acciones{padding-top:4px;margin-top:auto}
.agente-ficha-cab .acciones{align-items:center}
/* La portada prioriza el trabajo y los accesos, sin un porcentaje que parezca
   medir el progreso global de un cliente que sigue trabajando cada mes. */
.proyecto-portada .proyecto-banda{background:var(--panel);box-shadow:none}
.proyecto-portada .proyecto-cab{padding:20px;gap:14px}
.proyecto-portada .proyecto-supra{display:none}
.proyecto-portada .proyecto-quien h1{font-size:28px;line-height:1.2}
.proyecto-portada .ficha-av .avc{width:48px;height:48px;font-size:16px;border-radius:12px}
.proyecto-portada .proyecto-acciones{gap:6px}
.proyecto-portada .proyecto-banda .proyecto-franja>button{padding:12px 18px}
.proyecto-portada .proyecto-franja b{font-size:22px}
.proyecto-portada .proyecto-compo{margin-top:16px;padding:12px 16px}
.proyecto-portada .proyecto-compo textarea{min-height:36px;font-size:14px}
.proyecto-portada .proyecto-layout{margin-top:20px;gap:16px}
.proyecto-portada .proyecto-bloque{padding:18px;box-shadow:none}
.proyecto-portada .proyecto-cab-seccion{margin-top:24px}
.proyecto-portada .tira.carpetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));overflow:visible;gap:8px}
.proyecto-portada .tira.carpetas .carp{width:auto;padding:8px}
@media(max-width:600px){
  .catalogo-agentes .agente-top{grid-template-columns:auto minmax(0,1fr)}
  .catalogo-agentes .agente-top>.pill{grid-column:2}
  .proyecto-portada .proyecto-cab{padding:16px}
  .proyecto-portada .proyecto-quien h1{font-size:22px}
  .proyecto-portada .proyecto-bloque{padding:14px}
}
.proyecto-portada{container-type:inline-size}
.proyecto-error{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
@container(max-width:650px){
  .proyecto-portada .proyecto-layout{grid-template-columns:minmax(0,1fr)}
  .proyecto-portada .proyecto-acciones{width:100%;margin-left:0;flex-wrap:wrap}
  .proyecto-portada .proyecto-buscar{flex-basis:100%}
  .proyecto-portada .proyecto-buscar input{width:100%}
  .proyecto-portada .proyecto-cab{padding:16px}
}
.proyecto-portada{padding:16px 18px 48px}
.proyecto-portada .proyecto-banda::before{display:none}
@container(min-width:560px){
  .proyecto-portada .proyecto-banda .proyecto-franja{grid-template-columns:repeat(4,minmax(0,1fr))}
  .proyecto-portada .proyecto-franja>button:not(:last-child){border-right:1px solid var(--linea)}
}
.proyecto-portada .proyecto-banda .proyecto-cab{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;padding:16px;gap:12px}
.proyecto-portada .proyecto-banda .proyecto-cab>.ficha-av .avc{width:48px;height:48px;border-radius:12px;border:0}
.proyecto-portada .proyecto-acciones{grid-column:1/-1;width:100%;margin:0}
.proyecto-portada .proyecto-buscar{flex:1 1 180px}
.proyecto-portada .proyecto-buscar input{width:100%}
.proyecto-portada .proyecto-ficha,.proyecto-portada .proyecto-hallazgos{grid-column:1/-1}
@container(max-width:650px){
  .proyecto-portada .proyecto-buscar{flex-basis:100%}
}
@container(min-width:650px){
  .proyecto-portada .proyecto-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}

/* Portadas aprobadas: solo el contenido de Inicio y del cliente.
   Usan la paleta, la tipografía y las carpetas de la plataforma. */
.inicio-portada{max-width:1180px;margin:0 auto;padding:8px 0 32px;container-type:inline-size}
.inicio-portada .inicio-cabecera{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.inicio-portada .inicio-saludo{text-align:left;margin:0;min-width:0}
.inicio-portada .inicio-fecha{font-size:12px;color:var(--tinta-3);margin-bottom:8px}
.inicio-portada .inicio-saludo h1{font-size:28px;letter-spacing:-.025em;margin:0}
.inicio-portada .inicio-hoy{display:flex;gap:7px;align-items:center;margin:12px 0 0;color:var(--tinta-3);font-size:13px}
.inicio-portada .inicio-hoy>button{padding:0;text-align:left;font-size:13px;color:var(--tinta-2)}
.inicio-portada .inicio-hoy .n{font-size:13px;font-weight:550;color:var(--tinta)}
.inicio-portada .dia-clientes{position:relative;flex:none;padding:0;border:0;min-width:0;background:none}
.inicio-portada .dia-clientes summary{display:flex;gap:5px;align-items:center;font-weight:400;list-style:none}
.inicio-portada .dia-clientes summary::-webkit-details-marker{display:none}
.inicio-portada .dia-clientes summary b{font-size:13px;margin:0;font-weight:550;color:var(--tinta)}
.inicio-portada .dia-clientes summary svg{width:12px;height:12px}
.inicio-portada .dia-clientes-lista{position:absolute;top:28px;left:0;width:260px;max-width:70vw;padding:8px 14px;background:var(--panel);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra-alta);z-index:15}
.inicio-portada .dia-clientes-lista>button{font-size:12px}
.inicio-portada .inicio-compositor{max-width:none;margin:0 0 28px;padding:10px 14px;border-radius:12px;background:var(--panel);box-shadow:none;align-items:center;gap:12px}
.inicio-portada .inicio-compositor textarea{font-size:14px;min-height:24px;padding:4px 0;line-height:1.5}
.portada-chispa{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--acento-b);color:var(--acento);flex:none}
.portada-chispa svg{width:18px;height:18px}
.inicio-portada .copi-enviar,.portada-aprobada .copi-enviar{width:32px;height:32px;border-radius:8px}
.inicio-portada .copi-redondo,.portada-aprobada .copi-redondo{width:30px;height:30px}
.inicio-portada .inicio-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.inicio-portada .inicio-cols>section,.inicio-portada .inicio-cols>aside{min-width:0}
.inicio-portada .bloq-cab{margin:0 0 14px;align-items:center;gap:12px}
.inicio-portada .bloq-cab h2{font-size:16px;letter-spacing:-.015em;display:flex;gap:8px;align-items:center}
.inicio-portada .bloq-cab .mas,.portada-aprobada .bloq-cab .mas{font-size:12px;color:var(--tinta-3);white-space:nowrap}
.inicio-portada .inicio-bloque{margin-top:28px}
.portada-cuenta{display:inline-flex;align-items:center;justify-content:center;min-width:20px;padding:1px 6px;border-radius:4px;background:var(--activo);color:var(--tinta-3);font-size:11px;font-weight:550;letter-spacing:0}
.portada-personal{font-size:11px;color:var(--tinta-3)}
.inicio-trabajo-panel{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel)}
.portada-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linea)}
.portada-selector{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.portada-selector button{font-size:12px;padding:6px 9px;border-radius:8px;display:flex;align-items:center;gap:6px;color:var(--tinta-3);min-height:30px}
.portada-selector button[aria-pressed=true]{background:var(--activo);color:var(--tinta);font-weight:550}
.portada-selector button:hover{background:var(--hover);color:var(--tinta)}
.portada-selector svg{width:14px;height:14px}
.inicio-portada .inicio-grupo-tareas{display:flex;align-items:center;gap:7px;padding:14px 16px 6px;color:var(--tinta-3);font-size:11px}
.inicio-portada .inicio-grupo-tareas span{font-size:10px;color:var(--tinta-3)}
.inicio-portada .inicio-tareas>.inicio-trabajo-fila{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linea);position:relative}
.inicio-portada .inicio-trabajo-fila:last-child{border-bottom:0}
.inicio-portada .inicio-trabajo-fila:hover{background:var(--hover)}
.inicio-portada .inicio-completar{width:18px;height:18px;border:1px solid var(--linea-2);border-radius:999px;display:grid;place-items:center;flex:none;color:transparent;padding:0;background:var(--panel)}
.inicio-portada .inicio-completar:hover{border-color:var(--acento);color:var(--acento);background:var(--acento-b)}
.inicio-portada .inicio-completar svg{width:11px;height:11px}
.inicio-portada .inicio-trabajo-fila .inicio-tarea-abrir{flex:1;min-width:0;padding:0;border:0;display:block}
.inicio-portada .inicio-trabajo-fila .inicio-tarea-abrir b{font-size:13px;font-weight:550;line-height:1.5;overflow-wrap:anywhere}
.inicio-portada .inicio-trabajo-fila .inicio-tarea-abrir small{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11px;line-height:1.5}
.inicio-portada .inicio-tarea-abrir small .avc{width:16px;height:16px;font-size:10px;border-radius:4px}
.inicio-portada .inicio-fecha-tarea{font-size:11px;color:var(--tinta-3);white-space:nowrap}
.inicio-portada .inicio-tarea-menu{position:relative;flex:none}
.inicio-portada .inicio-tarea-menu>summary{list-style:none;cursor:pointer;font-size:16px;padding:4px;color:var(--tinta-3)}
.inicio-portada .inicio-tarea-menu>summary::-webkit-details-marker{display:none}
.inicio-portada .inicio-tarea-menu .inicio-tarea-acciones{position:absolute;right:0;top:30px;z-index:8;display:flex;flex-direction:column;gap:3px;padding:6px;min-width:160px;box-shadow:var(--sombra-alta);background:var(--panel);border:1px solid var(--linea);border-radius:8px}
.inicio-portada .inicio-tarea-menu .btn{border:0;justify-content:flex-start;white-space:nowrap}
.inicio-anadir{display:flex;align-items:center;gap:8px;padding:12px 16px;color:var(--tinta-3);font-size:12px;width:100%;text-align:left;border-top:1px solid var(--linea)}
.inicio-anadir:hover{background:var(--hover);color:var(--tinta)}
.inicio-anadir svg{width:13px;height:13px}
.portada-vacio{font-size:13px;color:var(--tinta-3);padding:20px 12px;line-height:1.6}
.inicio-portada .inicio-vista-trabajo>.bloq-cab{padding:14px 14px 0;flex-wrap:wrap}
.inicio-portada .inicio-vista-trabajo>.bloq-cab h2{font-size:14px}
.inicio-portada .inicio-vista-trabajo>.inicio-cal{padding:0 10px}
.inicio-portada .inicio-vista-trabajo>.inicio-tareas{padding:0 14px}
.inicio-portada .inicio-vista-trabajo>.inicio-tareas:has(.inicio-trabajo-fila){padding:0}
.inicio-portada .inicio-correo a{padding:14px 0}
.inicio-portada .inicio-correo b{font-size:13px;font-weight:550}
.inicio-portada .inicio-correo p{-webkit-line-clamp:1;color:var(--tinta-3);font-size:12px}
.inicio-portada .inicio-correo small{font-size:11px}
.inicio-portada .inicio-rutinas article>b{font-size:13px;font-weight:550}
.inicio-portada .inicio-rutinas small{font-size:11px;line-height:1.5}
.inicio-portada .inicio-rutinas summary{font-size:12px}
.inicio-portada .inicio-rutinas .estado-bueno{color:var(--tinta-3)}
.inicio-portada .inicio-documentacion{border-top:1px solid var(--linea);padding-top:16px}
.inicio-portada .inicio-documentacion summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--tinta-3)}
.inicio-portada .inicio-documentacion summary svg{width:15px;height:15px}
.inicio-portada .inicio-espacios{margin-top:12px}
.inicio-portada .inicio-carga{margin-top:24px;font-size:12px;color:var(--tinta-3)}
.inicio-portada .agenda-fila{padding:14px 0;gap:12px}
.inicio-portada .agenda-fila .agenda-que b{font-size:13px;font-weight:550}
.inicio-portada .agenda-fila .agenda-que small{font-size:11px}
.inicio-portada .agenda-cuando{min-width:52px}
.inicio-portada .agenda-cuando b{font-size:11px;font-weight:550}
.inicio-portada .agenda-cuando small{font-size:11px}

/* Portada de cliente: cabecera plana, trabajo y accesos, documentos de cristal. */
.portada-aprobada{padding:20px 18px 48px;max-width:1180px}
.portada-aprobada .proyecto-banda{border:0;border-radius:0;background:none;overflow:visible}
.portada-aprobada .proyecto-banda .proyecto-cab{padding:0;gap:12px;grid-template-columns:auto minmax(0,1fr);position:relative}
.portada-aprobada .proyecto-quien h1{font-size:28px}
.portada-aprobada .proyecto-acciones{display:flex;align-items:center;gap:8px;padding-top:4px}
.portada-aprobada .proyecto-acciones>.btn{white-space:nowrap}
.portada-aprobada .proyecto-buscar{max-width:320px;background:var(--panel);border-radius:8px}
.portada-aprobada .proyecto-acciones #proyecto-info{margin-left:auto}
.portada-aprobada .portada-secciones{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--linea-2);margin-top:24px;overflow:auto;white-space:nowrap}
.portada-aprobada .portada-secciones button{padding:0 0 12px;color:var(--tinta-3);font-size:13px;border-bottom:2px solid transparent}
.portada-aprobada .portada-secciones button[aria-selected=true]{border-color:var(--acento);color:var(--tinta);font-weight:550}
.portada-aprobada .proyecto-banda .proyecto-franja{display:flex;flex-wrap:wrap;gap:8px 26px;border:0;overflow:visible;padding:16px 0 0}
.portada-aprobada .proyecto-banda .proyecto-franja>button{display:flex;align-items:baseline;gap:7px;padding:0;border:0!important;width:auto;white-space:nowrap;background:none}
.portada-aprobada .proyecto-franja b{font-size:22px;order:-1;margin:0;font-weight:550}
.portada-aprobada .proyecto-franja span{font-size:12px;text-transform:none;letter-spacing:0}
.portada-aprobada .proyecto-franja small{display:none}
.portada-aprobada .proyecto-compo{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;margin-top:22px}
.portada-aprobada .proyecto-compo textarea{flex:1;min-width:0;width:auto;min-height:26px;font-size:14px;padding:3px 0}
.portada-aprobada .compo-barra{margin:0;flex:none;gap:8px}
.portada-aprobada .compo-chip{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.portada-aprobada .proyecto-sugeridas{display:block;position:relative;margin:8px 0 0}
.portada-aprobada .proyecto-sugeridas>summary{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tinta-3);cursor:pointer;list-style:none;width:fit-content}
.portada-aprobada .proyecto-sugeridas>summary::-webkit-details-marker{display:none}
.portada-aprobada .proyecto-sugeridas>summary svg{width:11px;height:11px}
.portada-aprobada .proyecto-sugeridas>div{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.portada-aprobada .proyecto-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:22px}
.portada-aprobada .proyecto-layout>main,.portada-aprobada .proyecto-layout>aside{gap:26px}
.portada-aprobada .proyecto-bloque{border:0;background:none;border-radius:0;padding:0;box-shadow:none}
.portada-aprobada .bloq-cab{align-items:center;gap:12px;margin-bottom:14px}
.portada-aprobada .bloq-cab h2{font-size:16px;font-weight:550;letter-spacing:-.015em;display:flex;align-items:center;gap:7px}
.portada-aprobada .portada-trabajo{border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);padding-top:14px}
.portada-aprobada .portada-trabajo>.bloq-cab{padding:0 14px}
.portada-aprobada .portada-trabajo>.portada-selector{padding:0 10px 10px;border-bottom:1px solid var(--linea)}
.portada-aprobada .proyecto-tareas{margin:0}
.portada-aprobada .proyecto-tareas>button{padding:14px;gap:10px}
.portada-aprobada .proyecto-tareas>button:first-child{border-top:0}
.portada-aprobada .proyecto-tareas b{white-space:normal;line-height:1.5;font-weight:550;overflow-wrap:anywhere}
.portada-aprobada .proyecto-tareas small{font-size:11px;line-height:1.5;white-space:normal}
.portada-aprobada .proyecto-tareas .portada-responsables{flex:none;display:flex;align-items:center;gap:3px;overflow:visible}
.portada-aprobada .portada-responsables .persona-av{width:24px;height:24px;font-size:10px;border-radius:999px;flex:none}
.portada-aprobada .portada-documentos{min-width:0}
.portada-aprobada .proyecto-cab-seccion{margin-top:0}
.portada-aprobada .portada-documentos .proyecto-cab-seccion:not(:first-child){margin-top:22px}
.portada-aprobada .portada-documentos .proyecto-cab-seccion h3{font-size:13px;font-weight:550}
.portada-aprobada .proyecto-vacio.grande{border:1px dashed var(--linea-2);border-radius:12px;padding:18px;font-size:12px}
.portada-aprobada .tira.carpetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,135px),1fr));gap:10px;overflow:visible;padding:0}
.portada-aprobada .tira.carpetas .carpeta-cristal{padding:0 8px 8px;width:auto;background:none;border:0}
.portada-aprobada .carpeta-cristal .fig{display:block;max-width:160px;margin:0 auto}
.portada-aprobada .carpeta-cristal .nom{display:block;margin:4px 0 0;font-size:12px;font-weight:550}
.portada-aprobada .carpeta-cristal .sub{font-size:11px}
.portada-aprobada .portada-mas-carpetas{margin-top:12px;color:var(--tinta-3);font-size:12px}
.portada-aprobada .portada-mas-carpetas summary{cursor:pointer}
.portada-aprobada .portada-mas-carpetas .carpetas{margin-top:12px}
.portada-aprobada .portada-paginas-rapidas{border:1px solid var(--linea);border-radius:12px;padding:0 12px;background:var(--panel);margin-bottom:14px}
.portada-aprobada .portada-paginas-rapidas button{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--linea);width:100%;text-align:left}
.portada-aprobada .portada-paginas-rapidas button:last-child{border-bottom:0}
.portada-aprobada .portada-paginas-rapidas button>span:first-child{color:var(--tinta-3);flex:none}
.portada-aprobada .portada-paginas-rapidas button>span:nth-child(2){min-width:0;flex:1}
.portada-aprobada .portada-paginas-rapidas svg{width:16px;height:16px;flex:none}
.portada-aprobada .portada-paginas-rapidas b{display:block;font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portada-aprobada .portada-paginas-rapidas small{display:block;font-size:11px;color:var(--tinta-3);margin-top:3px}
.portada-aprobada .portada-enlaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:8px;margin:0}
.portada-aprobada .portada-enlaces>a{border:1px solid var(--linea);border-radius:8px;background:var(--panel);padding:9px;min-width:0;gap:7px}
.portada-aprobada .portada-enlaces>a>span:first-child{width:20px;height:20px;background:none}
.portada-aprobada .portada-enlaces b{font-size:12px;font-weight:550}
.portada-aprobada .portada-enlaces small{font-size:10px}
.portada-aprobada .portada-automatizaciones .proyecto-recursos{margin:0}
.portada-aprobada .portada-automatizaciones .proyecto-recursos>button{padding:12px 0}
.portada-aprobada .portada-automatizaciones .proyecto-recursos>button:first-child{border-top:0}
.portada-aprobada .portada-automatizaciones .proyecto-recursos b{font-weight:550;font-size:13px}
.portada-aprobada .portada-otros{font-size:12px;color:var(--tinta-3);border-top:1px solid var(--linea);padding-top:14px}
.portada-aprobada .portada-otros summary,.portada-aprobada .proyecto-desde>summary{cursor:pointer;font-size:12px;color:var(--tinta-3)}
.portada-aprobada .proyecto-desde{border-top:1px solid var(--linea);padding-top:14px}
.portada-aprobada .proyecto-desde>summary>span{margin-left:7px;font-size:11px}
.portada-aprobada .proyecto-desde>.bloq-cab{margin-top:14px}
.portada-aprobada .proyecto-linea .hito{padding-top:10px;padding-bottom:10px}
.portada-aprobada .portada-resultados:empty{display:none}
.portada-aprobada .portada-resultados .tira{display:flex;flex-direction:column;gap:8px;overflow:visible}
.portada-aprobada .portada-resultados .dash-carta{width:100%;min-width:0;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.portada-aprobada .portada-resultados .dash-carta .ic{grid-row:1/3;margin:0;width:28px;height:28px}
.portada-aprobada .portada-resultados .dash-carta b{font-size:13px;font-weight:550}
.portada-aprobada .portada-resultados .proyecto-cifras{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:22px}
.portada-aprobada .portada-resultados .proyecto-cifras>button{padding:12px;border:1px solid var(--linea);border-radius:8px;background:var(--panel)}
@container(min-width:760px){.portada-aprobada .proyecto-layout{grid-template-columns:minmax(0,1fr) 270px}}
@container(max-width:760px){
  .inicio-portada .inicio-cols{grid-template-columns:minmax(0,1fr)}
  .inicio-portada .inicio-secundario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .inicio-portada .inicio-secundario>.inicio-bloque{margin-top:0}
  .portada-aprobada .compo-chip{display:none}
}
@container(max-width:480px){
  .inicio-portada .inicio-secundario{grid-template-columns:minmax(0,1fr)}
  .inicio-portada .inicio-cabecera{align-items:flex-start;flex-wrap:wrap;gap:14px}
  .inicio-portada .inicio-saludo h1{font-size:22px}
  .inicio-portada .inicio-cabecera>.btn{font-size:12px}
  .inicio-portada .portada-toolbar{flex-wrap:wrap}
  .inicio-portada .inicio-fecha-tarea{display:none}
  .inicio-portada .inicio-trabajo-fila{gap:8px}
  .inicio-portada .inicio-compositor{padding:9px 10px;gap:8px}
  .inicio-portada .portada-chispa{display:none}
  .inicio-portada .inicio-compositor textarea{font-size:13px}
  .portada-aprobada .proyecto-quien h1{font-size:22px}
  .portada-aprobada .proyecto-compo{gap:8px;padding:10px}
  .portada-aprobada .proyecto-compo>.portada-chispa{display:none}
  .portada-aprobada .proyecto-compo textarea{font-size:13px}
  .portada-aprobada .proyecto-acciones{flex-wrap:wrap;gap:6px}
  .portada-aprobada .proyecto-buscar{flex-basis:100%;max-width:none}
  .portada-aprobada .proyecto-acciones #proyecto-info{margin-left:0}
  .portada-aprobada .portada-secciones{gap:20px}
  .portada-aprobada .portada-secciones button{font-size:12px}
  .portada-aprobada .proyecto-banda .proyecto-franja{gap:10px 18px}
  .portada-aprobada .proyecto-franja b{font-size:18px}
  .portada-aprobada .proyecto-franja span{font-size:11px}
}
.inicio-portada .inicio-tarea-abrir small.estado-dudoso{padding:0;background:none;margin-top:4px}
.inicio-portada .estado-bueno{color:var(--tinta-3)}
.portada-aprobada .proyecto-compo textarea{overflow:hidden}

/* Portadas: composición del mockup sobre el fondo gris de trabajo. */
.lienzo:has(>.inicio-portada),.lienzo.cliente.tablero:has(.portada-aprobada)>#panel{background:var(--tablero)}
.inicio-portada{padding:20px 4px 40px}
.inicio-portada .inicio-cabecera{margin-bottom:26px}
.inicio-portada .inicio-fecha{font-size:12px;letter-spacing:.02em}
.inicio-portada .inicio-fecha::first-letter{text-transform:uppercase}
.inicio-portada .inicio-saludo h1{line-height:1.3;font-weight:550;letter-spacing:-.035em}
.inicio-portada .inicio-hoy{margin-top:10px}
.inicio-portada .inicio-compositor{padding:14px 16px;margin-bottom:32px;border:1px solid var(--linea-2);background:var(--panel);box-shadow:none}
.inicio-portada .inicio-cols{grid-template-columns:minmax(0,1fr) 292px;gap:30px}
.inicio-portada .inicio-bloque{margin-top:32px}
.inicio-portada .inicio-secundario>section{padding:0;border:0;border-radius:0;background:none}
.inicio-portada .inicio-secundario .bloq-cab{align-items:flex-start;gap:8px}
.inicio-portada .bloq-cab h2{font-size:16px;font-weight:550}
.inicio-portada .bloq-cab .mas{display:inline-flex;align-items:center;gap:5px;font-size:11px}
.inicio-portada .mas svg{width:12px;height:12px;flex:none}
.inicio-portada .portada-toolbar{padding:12px 15px;background:var(--panel);border-radius:8px 8px 0 0}
.inicio-portada .portada-selector button[aria-pressed=true]{background:var(--activo);box-shadow:none}
.inicio-portada .inicio-grupo-tareas{padding:16px 18px 5px;font-size:11px}
.inicio-portada .inicio-tareas>.inicio-trabajo-fila{padding:16px 18px;gap:12px}
.inicio-portada .inicio-trabajo-fila .inicio-tarea-abrir b{font-size:13px;line-height:1.5;font-weight:400}
.inicio-portada .inicio-trabajo-fila .inicio-tarea-abrir small{margin-top:4px}
.inicio-portada .inicio-tarea-abrir small.estado-dudoso{color:var(--tinta-3);font-size:10px}
.inicio-portada .inicio-fecha-tarea{background:var(--activo);padding:4px 8px;border-radius:4px;font-size:10px}
.inicio-portada .inicio-anadir{padding:13px 18px}
.inicio-portada .inicio-correo{border:0;border-radius:0;overflow:hidden;background:none}
.inicio-portada .inicio-correo a.inicio-correo-fila{display:flex;gap:12px;align-items:center;padding:16px 0;border-left:0;margin:0;min-width:0}
.inicio-portada .inicio-correo-fila:hover{background:var(--hover)}
.inicio-portada .inicio-correo-avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;background:var(--activo);color:var(--tinta-2);font-size:13px;font-weight:550}
.inicio-portada .inicio-correo-texto{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.inicio-portada .inicio-correo-remitente{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inicio-portada .inicio-correo-remitente i{width:5px;height:5px;background:var(--acento);border-radius:999px;flex:none}
.inicio-portada .inicio-correo-texto b{font-size:13px;font-weight:550;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.5}
.inicio-portada .inicio-correo-extracto{font-size:11px;color:var(--tinta-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.inicio-portada .inicio-correo-fila>svg{width:13px;height:13px;flex:none;color:var(--tinta-3);margin-top:4px}
.inicio-portada .inicio-ver-mas{font-size:11px;color:var(--tinta-3)}
.inicio-portada .inicio-ver-mas>summary{cursor:pointer;padding:13px 16px;list-style:none}
.inicio-portada .inicio-ver-mas>summary::after{content:'＋';float:right}
.inicio-portada .inicio-ver-mas[open]>summary::after{content:'−'}
.inicio-portada .inicio-ver-mas>summary::-webkit-details-marker{display:none}
.inicio-portada .agenda-fila{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:14px 0;border-bottom:1px solid var(--linea);align-items:start}
.inicio-portada .agenda-fila:last-child{border-bottom:0;padding-bottom:0}
.inicio-portada .agenda-cuando{min-width:0;padding:7px 4px;border:1px solid var(--linea);border-radius:8px;text-align:center;background:var(--panel)}
.inicio-portada .agenda-cuando b{font-size:10px}
.inicio-portada .agenda-cuando small{font-size:11px;color:var(--tinta-3);margin-top:3px}
.inicio-portada .agenda-que{padding-top:3px;min-width:0}
.inicio-portada .agenda-fila .agenda-que b{font-size:13px;line-height:1.5;white-space:normal}
.inicio-portada .agenda-fila .agenda-que small{font-size:11px;line-height:1.5;margin-top:5px}
.inicio-portada .inicio-rutinas-resumen{font-size:11px;color:var(--tinta-3);margin:0 0 8px}
.inicio-portada .inicio-rutinas article{display:flex;gap:10px;align-items:flex-start;padding:16px 0;border-left:0}
.inicio-portada .inicio-rutinas article:last-child{border-bottom:0}
.inicio-portada .inicio-rutina-icono{display:grid;place-items:center;width:28px;height:28px;flex:none;color:var(--tinta-3);border:1px solid var(--linea);border-radius:8px;background:var(--panel)}
.inicio-portada .inicio-rutina-icono svg{width:15px;height:15px}
.inicio-portada .inicio-rutina-texto{min-width:0;flex:1}
.inicio-portada .inicio-rutina-texto>b{display:block;font-size:12px;font-weight:550;line-height:1.6}
.inicio-portada .inicio-rutina-texto>small{font-size:11px;line-height:1.5;margin-top:4px}
.inicio-portada .inicio-rutina-estado{display:inline-block;font-size:10px;padding:2px 6px;margin-top:8px;background:var(--activo);color:var(--tinta-2);border-radius:4px}
.inicio-portada .inicio-rutina-estado.atencion{color:var(--ambar);background:var(--ambar-b)}
.inicio-portada .inicio-rutinas .mas{display:flex;gap:4px;align-items:center;font-size:11px;color:var(--tinta-3);margin-top:10px}
.inicio-portada .inicio-rutinas details:not(.inicio-ver-mas)>summary{font-size:11px;color:var(--tinta-2)}
.inicio-portada .inicio-rutinas .inicio-ver-mas>summary{padding-left:0;padding-right:0;font-size:11px}
.inicio-portada .estado-bueno,.inicio-portada .estado-dudoso{padding:16px;border:1px dashed var(--linea-2);border-radius:8px;font-size:12px;line-height:1.6;background:var(--panel)}
.inicio-portada small.estado-dudoso{border:0;border-radius:0;background:none}
.portada-aprobada{margin:0 auto;padding:24px 24px 48px}
.portada-aprobada .proyecto-cab .proyecto-quien h1{font-weight:550;line-height:1.3;letter-spacing:-.035em}
.portada-aprobada .proyecto-layout{gap:32px;margin-top:28px}
.portada-aprobada .proyecto-layout>main,.portada-aprobada .proyecto-layout>aside{gap:28px;min-width:0}
.portada-aprobada .proyecto-layout>aside>.proyecto-bloque{padding:0;border:0;border-radius:0;background:none}
.portada-aprobada .portada-trabajo{padding-top:16px}
.portada-aprobada .proyecto-tareas>button{padding:16px}
.portada-aprobada .proyecto-tareas b{font-size:14px}
.portada-aprobada .proyecto-franja{margin-bottom:2px}
.portada-aprobada .portada-documentos{border-top:1px solid var(--linea);padding-top:24px}
.portada-aprobada .portada-panel{padding-top:28px;min-width:0}
.portada-aprobada .portada-panel>.portada-documentos{border-top:0;padding-top:0}
.portada-aprobada .portada-panel .carpetas{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.portada-aprobada .portada-panel .tira:not(.carpetas){flex-wrap:wrap}
.portada-aprobada .portada-panel .dash{padding:0}
.portada-aprobada .portada-panel .dash-cabecera{padding-left:0;padding-right:0}
.portada-aprobada .portada-error{padding:24px;border:1px solid var(--linea);border-radius:12px}
.portada-aprobada .portada-error p{margin-bottom:12px}
@container(min-width:900px){.portada-aprobada .proyecto-layout{grid-template-columns:minmax(0,1fr) 300px}}
@container(max-width:900px){.inicio-portada .inicio-cols{grid-template-columns:minmax(0,1fr) 260px;gap:24px}.inicio-portada .inicio-secundario>section{padding:0}}
@container(max-width:760px){.inicio-portada .inicio-cols{grid-template-columns:minmax(0,1fr)}.inicio-portada .inicio-secundario{gap:20px}.inicio-portada .inicio-secundario>section{margin-top:0}}
@container(max-width:480px){.inicio-portada{padding:8px 0 28px}.inicio-portada .inicio-compositor{padding:12px;margin-bottom:24px}.inicio-portada .inicio-correo a.inicio-correo-fila{padding:13px 12px;gap:10px}.inicio-portada .inicio-correo-avatar{width:28px;height:28px}.inicio-portada .inicio-tareas>.inicio-trabajo-fila{padding:14px 12px}.inicio-portada .inicio-trabajo-fila .inicio-tarea-abrir b{font-size:13px}.portada-aprobada{padding:16px 10px 32px}.portada-aprobada .proyecto-layout>aside>.proyecto-bloque{padding:0}.portada-aprobada .portada-panel .carpetas{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.docs-inicio .carpetas:has(.carpeta-cristal){grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:16px}
.docs-inicio .carpeta-cristal{border:0;background:none;padding:0 8px 8px}
.docs-inicio .carpeta-cristal .fig{display:block;max-width:160px;margin:0 auto}
.docs-inicio .carpeta-cristal .nom{display:block;font-size:13px;font-weight:550;margin-top:4px}
.docs-inicio .carpeta-cristal .sub{font-size:11px}
.inicio-portada .inicio-compositor textarea{overflow:hidden}
.portada-docs-migas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--tinta-3);font-size:12px;margin-bottom:24px}
.portada-docs-migas button{font-size:12px;color:var(--tinta-2)}
.portada-docs-migas button:hover{color:var(--acento)}
.portada-archivos{border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin-top:20px}
.portada-archivos:empty{display:none}
.portada-archivos>button{display:flex;gap:12px;align-items:center;width:100%;padding:14px 16px;text-align:left;border-bottom:1px solid var(--linea);font-size:13px}
.portada-archivos>button:last-child{border-bottom:0}
.portada-archivos>button:hover{background:var(--hover)}
.portada-archivos>button>span{flex:1;min-width:0;overflow-wrap:anywhere}
.portada-archivos>button>svg{width:16px;height:16px;flex:none;color:var(--tinta-3)}

/* Agenda semanal del mockup, con reuniones reales de cada persona. */
.inicio-portada .agenda-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding-bottom:17px;margin-bottom:19px;border-bottom:1px solid var(--linea-2)}
.agenda-semana button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;border-radius:8px;color:var(--tinta-2);position:relative}
.agenda-semana button small{font-size:10px;color:var(--tinta-3)}
.agenda-semana button b{font-size:12px;font-weight:550}
.agenda-semana button i{position:absolute;bottom:3px;width:3px;height:3px;border-radius:999px;background:currentColor}
.agenda-semana button[aria-pressed=true]{background:var(--primario);color:var(--sobre-primario,#fff)}
.agenda-semana button[aria-pressed=true] small{color:inherit;opacity:.75}
.agenda-semana button:hover:not([aria-pressed=true]){background:var(--hover)}
.agenda-subtitulo{font-size:10px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px}
.agenda-reunion{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;margin-bottom:18px}
.agenda-reunion>time{font-size:11px;color:var(--tinta-3);padding-top:3px}
.agenda-reunion-info{border-left:2px solid var(--acento);padding:0 0 0 12px;min-width:0}
.agenda-reunion:nth-child(even) .agenda-reunion-info{border-color:var(--tinta-3)}
.agenda-reunion-info h3{font-size:12px;font-weight:550;line-height:1.5}
.agenda-reunion-info>p{font-size:11px;color:var(--tinta-3);margin-top:4px}
.agenda-reunion-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}
.agenda-personas{display:flex;align-items:center;gap:3px}
.agenda-personas>span{width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:var(--acento-b);border:2px solid var(--tablero);color:var(--tinta-2);font-size:10px;margin-left:-6px}
.agenda-personas>span:first-child{margin-left:0}
.agenda-personas small{font-size:10px;color:var(--tinta-3);margin-left:3px}
.agenda-reunion-pie .btn{font-size:11px;min-height:28px;padding:4px 8px;background:var(--panel)}
.agenda-reunion-pie svg{width:12px;height:12px}
.agenda-pie{display:flex;gap:6px;align-items:center;border-top:1px solid var(--linea-2);padding-top:12px;font-size:10px;color:var(--tinta-3)}
.agenda-conectada{width:5px;height:5px;border-radius:999px;background:var(--tinta-3)}
.agenda-vacia{padding:12px 0 20px;font-size:12px;color:var(--tinta-3)}
.inicio-portada .inicio-correo-remitente{font-size:12px;font-weight:550;color:var(--tinta)}
.inicio-portada .inicio-correo-texto b{font-size:11px;font-weight:400;color:var(--tinta-3)}
.inicio-portada .inicio-correo-extracto{display:none}
.inicio-portada .inicio-rutina-icono{border:0;background:var(--acento-b);color:var(--acento);border-radius:999px}
.inicio-portada .inicio-rutina-texto>b{font-size:12px}
.inicio-portada .inicio-rutina-texto>small{display:inline;color:var(--tinta-3)}
.inicio-portada .inicio-rutina-estado{background:none;padding:0;margin:3px 0 0 5px;color:var(--tinta-3)}

/* ── INICIO EN UNA PANTALLA ─────────────────────────────────────────────
   Antes de esto, con 1000 px de alto la primera tarea empezaba a los 565:
   más de la mitad del alto se iba en cabecera, saludo, resumen, compositor,
   título de bloque y una barra de botones. Aquí no se quita información; se
   le quita el aire de más y se pone cada cosa donde se mira. */

/* La banda de arriba es blanca con los destellos azules de la marca: es lo
   que separa «dónde estoy» del trabajo, que va sobre el lienzo gris. */
.inicio-portada .inicio-hero-dia{margin:0 0 22px;padding:18px 20px 20px;border-radius:16px;
  border:1px solid var(--linea);box-shadow:var(--sombra);background:
    radial-gradient(360px 200px at 2% -30%,color-mix(in srgb,var(--acento-luz) 20%,transparent),transparent 70%),
    radial-gradient(300px 170px at 99% -20%,color-mix(in srgb,var(--acento-luz) 13%,transparent),transparent 68%),
    var(--panel)}
.inicio-portada .inicio-hero-dia .inicio-compositor{margin:14px 0 0;padding:8px 12px;
  border-radius:12px;background:var(--panel);border-color:var(--linea-2);box-shadow:var(--sombra)}

/* El día, en una línea. Eran tres bandas: fecha, saludo y resumen. Los contadores
   se van enteros: las tareas están justo debajo, las reuniones las dice la
   agenda y las rutinas con error las dice el bloque de rutinas. Repetirlos aquí
   era decir tres veces lo mismo en la misma pantalla. */
.inicio-dia{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin:0}
.inicio-dia h1{font-size:22px;font-weight:680;letter-spacing:-.02em;margin:0;line-height:1.2}
.inicio-dia-logo{height:24px;width:auto;flex:none;display:block}
.inicio-dia-fecha{font-size:12px;color:var(--tinta-3)}
.inicio-dia-fecha::first-letter{text-transform:uppercase}
.inicio-dia-hueco{flex:1;min-width:var(--e3)}

/* Bloques y cabeceras, al mismo régimen. */
.inicio-portada .inicio-bloque{margin-top:18px}
.inicio-portada .bloq-cab{margin:0 0 8px}
.inicio-portada .bloq-cab h2{font-size:14px;flex:none}
.inicio-portada .bloq-cab .portada-selector:last-of-type,
.inicio-portada .bloq-cab .mas{margin-left:auto}
/* Las dos columnas dicen cosas distintas —lo que tienes que hacer y lo que
   pasa alrededor—; con 28 px parecían la misma lista partida en dos. */
.inicio-portada .inicio-cols{gap:72px}
@container(max-width:1100px){.inicio-portada .inicio-cols{gap:36px}}

/* LA TAREA LLEVA EL FONDO, NO LA LISTA. Había un panel blanco alrededor de
   todas las tareas y dentro filas separadas por una raya: dos marcos para una
   cosa sola. Lo que se coge, se mueve y se abre es la tarea. */
.inicio-portada .inicio-trabajo-panel{background:none;border:0;padding:0;border-radius:0;box-shadow:none}
.inicio-portada .inicio-tareas{display:flex;flex-direction:column;gap:5px;padding:0}
.inicio-portada .inicio-tareas>.inicio-trabajo-fila{background:var(--panel);border:1px solid var(--linea);
  border-radius:12px;padding:8px 12px;gap:12px}
.inicio-portada .inicio-tareas>.inicio-trabajo-fila:hover{border-color:var(--linea-2);background:var(--panel)}
.inicio-portada .inicio-grupo-tareas{padding:8px 2px 1px}
.inicio-portada .inicio-tareas>.inicio-grupo-tareas:first-child{padding-top:0}
.inicio-portada .inicio-anadir{padding:8px 2px}
/* El logo del cliente, grande y delante. Se reconoce sin leer; el nombre
   escrito debajo del título le robaba el sitio al título. */
.inicio-portada .inicio-tarea-cliente{flex:none;display:block}
.inicio-portada .inicio-tarea-cliente .avc{width:32px;height:32px;border-radius:8px;font-size:12px}

/* La reunión pasa de cuatro filas apiladas a dos y una raya. Lo que la hacía
   alta no era su interior: era `margin-bottom:18px` debajo de cada una y los
   márgenes por defecto del `<h3>`. */
.inicio-portada .agenda-lista{display:flex;flex-direction:column}
.inicio-portada .agenda-reunion{margin:0;padding:7px 0;border-top:1px solid var(--linea);
  grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:start}
.inicio-portada .agenda-reunion:first-child{border-top:0}
.inicio-portada .agenda-reunion>time{font-size:11px;padding-top:2px;font-variant-numeric:tabular-nums}
.inicio-portada .agenda-reunion-info{border-left:2px solid var(--acento);padding:0 0 0 9px}
.inicio-portada .agenda-reunion-info h3{margin:0;font-size:13px;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.inicio-portada .agenda-reunion-info h3 a{color:inherit}
.inicio-portada .agenda-reunion-info h3 a:hover{color:var(--acento)}
.inicio-portada .agenda-reunion-info>p{margin:2px 0 0;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
/* Las caras eran círculos de 24 px con borde de 2: más altas que la línea en
   la que viven. */
.inicio-portada .agenda-personas>span{width:18px;height:18px;font-size:10px;border-width:1.5px;margin-left:-5px}
.inicio-portada .agenda-personas>span:first-child{margin-left:0}
.inicio-portada .agenda-semana{padding-bottom:9px;margin-top:15px;margin-bottom:9px}
.inicio-portada .inicio-secundario>#inicio-rutinas{margin-top:36px!important}
.inicio-portada .agenda-semana button{padding:4px 0;gap:3px}
.inicio-portada .agenda-subtitulo{margin-bottom:8px}
.inicio-portada .agenda-pie{margin-top:9px;padding-top:9px}
.inicio-portada .inicio-rutinas article{padding-top:9px;padding-bottom:9px}
/* Agenda y rutinas son dos cosas distintas —lo que tienes con personas y lo
   que corre solo— y estaban al mismo hueco que dos párrafos. */
.inicio-portada .inicio-secundario>.inicio-bloque+.inicio-bloque{margin-top:38px;
  border-top:1px solid var(--linea);padding-top:30px}
/* Y entre los bloques apilados de la columna ancha, lo mismo. */
.inicio-portada .inicio-cols>section>.inicio-bloque{margin-top:34px}

/* El correo, en fichas como las tareas, y con el extracto que ya se pedía al
   servidor y estaba escondido por CSS. */
.inicio-portada .inicio-correo{display:flex;flex-direction:column;gap:4px}
.inicio-portada .inicio-correo a.inicio-correo-fila{padding:7px 11px;border:1px solid var(--linea);
  border-radius:12px;background:var(--panel);gap:10px}
.inicio-portada .inicio-correo a.inicio-correo-fila:hover{border-color:var(--linea-2)}
.inicio-portada .inicio-correo .sin-leer{border-left:1px solid var(--linea);padding-left:11px}
.inicio-portada .inicio-correo .sin-leer .inicio-correo-remitente{font-weight:680}
.inicio-portada .inicio-correo-avatar{width:26px;height:26px;font-size:11px}
.inicio-portada .inicio-correo-extracto{display:block;font-size:12px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inicio-portada .inicio-correo-texto b{display:inline;font-size:12px;color:var(--tinta-2);font-weight:550}

.portada-aprobada .portada-panel[hidden],.portada-aprobada .portada-resumen[hidden]{display:none!important}
.portada-aprobada .portada-resumen .portada-documentos{display:none}
.portada-aprobada .proyecto-layout{gap:30px}
.portada-aprobada .portada-trabajo{border-radius:8px;padding-top:0;overflow:hidden}
.portada-aprobada .portada-trabajo>.portada-selector{padding:12px 15px}
.portada-aprobada .proyecto-tareas b{font-size:13px;font-weight:400}
.portada-aprobada .proyecto-linea{border:0;background:none}
.portada-aprobada .proyecto-cabecera-trabajo{margin-bottom:-14px}
@container(min-width:900px){.portada-aprobada .proyecto-layout{grid-template-columns:minmax(0,1fr) 282px}}
.dash-ventanas{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.dash-ventanas fieldset{border:1px solid var(--linea);border-radius:8px;padding:12px}
.dash-ventanas legend{font-size:13px;font-weight:550;padding:0 6px}
.dash-ventanas label{display:flex;align-items:center;gap:8px;font-size:12px}
.dash-ventana-fechas{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.dash-ventana-fechas[hidden],.dash-ventana-fechas input[hidden]{display:none}
.dash-ventana-fechas input,.dash-ventana-fechas select{border:1px solid var(--linea);border-radius:4px;background:var(--panel);color:var(--tinta);padding:7px;font-size:12px}
.dash-html-avanzado>summary{cursor:pointer;font-size:12px;color:var(--tinta-3);margin-bottom:12px}
@container(min-width:650px){
  .portada-aprobada .proyecto-banda .proyecto-cab{grid-template-columns:auto minmax(0,1fr) auto}
  .portada-aprobada .proyecto-acciones{grid-column:auto;width:auto;padding:0;flex-wrap:nowrap}
  .portada-aprobada .proyecto-acciones .proyecto-buscar{flex:0 0 34px;width:34px;padding:9px;max-width:none;cursor:text}
  .portada-aprobada .proyecto-buscar input{width:0;padding:0;opacity:0}
  .portada-aprobada .proyecto-acciones .proyecto-buscar:focus-within{flex-basis:200px;width:200px}
  .portada-aprobada .proyecto-buscar:focus-within input{width:160px;opacity:1}
  .portada-aprobada .proyecto-acciones>.btn{font-size:12px;padding:8px 10px;min-height:34px}
  .portada-aprobada .proyecto-acciones #proyecto-info{margin-left:0}
}
.inicio-portada .portada-ai-tip{font-size:10px;color:var(--tinta-3);white-space:nowrap}
.inicio-portada .inicio-compositor textarea{font-size:13px}
@container(max-width:900px){.inicio-portada .portada-ai-tip{display:none}}

/* Fechas del informe: cabecera y acciones visibles, contenido desplazable. */
.dash-fechas-editor{z-index:250;padding:16px;box-sizing:border-box}
.dash-fechas-editor .dash-editor-caja{width:min(580px,100%);max-height:calc(100dvh - 32px);padding:0;gap:0;overflow:hidden;box-sizing:border-box}
.dash-fechas-editor h3{padding:20px 24px;border-bottom:1px solid var(--linea);flex:none}
.dash-fechas-cuerpo{padding:20px 24px;overflow:auto;min-height:0}
.dash-fechas-cuerpo>.apunte{margin:0 0 20px;line-height:1.6}
.dash-fechas-editor .dash-editor-pie{padding:16px 24px;border-top:1px solid var(--linea);flex:none;background:var(--panel)}
/* El error de guardar, dentro del editor y pegado al pie: un aviso aparte quedaba lejos del botón. */
.dash-editor-error{margin:0;padding:10px 24px;font-size:12.5px;line-height:1.5;color:var(--rojo);background:var(--panel);border-top:1px solid var(--linea);flex:none}
.dash-fechas-etiqueta{display:block;font-size:13px;font-weight:550;margin-bottom:8px}
#dash-fechas-modo{width:100%;padding:12px;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);color:var(--tinta);font:inherit;font-size:13px}
.dash-fechas-global{padding:4px 0 8px}
.dash-fechas-explicacion{font-size:12px;line-height:1.6;color:var(--tinta-2);padding:12px;background:var(--tablero);border-radius:8px}
.dash-fechas-individuales{margin:20px 0;border-top:1px solid var(--linea);padding-top:16px}
.dash-fechas-individuales>summary{font-size:13px;font-weight:550;cursor:pointer}
.dash-fechas-editor .dash-ventanas{gap:16px;margin:16px 0}
.dash-fechas-editor .dash-ventanas legend span{font-size:11px;font-weight:400;color:var(--tinta-3);margin-left:8px}
.dash-fechas-editor .dash-ventana-fechas{gap:10px}
.dash-fechas-editor .dash-ventana-fechas label{display:flex;align-items:center;gap:8px;font-size:12px}
.dash-fechas-editor #inf-html{box-sizing:border-box;max-width:100%}
.dash-fechas-global[hidden]{display:none}
@media(max-width:600px){.dash-fechas-editor h3,.dash-fechas-cuerpo{padding:16px}.dash-fechas-editor .dash-editor-pie{padding:12px 16px}}

/* ── Dashboards: la cartera y la tira de clientes ──────────────────────────
   La sección que faltaba. Un dashboard por cliente contesta «cómo va este»;
   ninguno contestaba «a cuál miro hoy», y para saberlo había que entrar en los
   treinta de uno en uno.

   La tira se desplaza en HORIZONTAL y no se pliega en un desplegable: un
   desplegable esconde cuántos clientes hay y cobra un clic por cada vistazo,
   y aquí lo normal es ir pasando de uno a otro. La cartera se queda pegada a la
   izquierda porque es a la que se vuelve. */
.cartera{max-width:1500px;margin:0 auto;padding:26px 38px 70px}
/* El mismo ancho con la cartera que con el panel de un cliente: al pasar de una a
   otro la ventana no salta. */
.cart-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cart-rango{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cart-rango select,.cart-rango input{font:inherit;font-size:12px;color:var(--tinta);background:var(--panel);
  border:1px solid var(--linea);border-radius:8px;padding:6px 10px}
.cart-fechas{display:flex;gap:6px}
.cart-fechas[hidden]{display:none}
.cartera.con-cliente .cart-rango{display:none}
.cart-cuerpo.cargando{opacity:.55;transition:opacity .15s}
.cart-cab h1{margin:0;font-size:22px;font-weight:680;letter-spacing:-.01em}
.cart-cab p{margin:4px 0 0;font-size:13px;color:var(--tinta-2)}
.cart-tira{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;
  margin:18px -38px 0;padding:0 38px 10px;border-bottom:1px solid var(--linea)}
.cart-tab{flex:none;display:flex;align-items:center;gap:7px;max-width:190px;
  padding:7px 12px;border:1px solid var(--linea);border-radius:999px;
  font-size:12px;color:var(--tinta-2);background:var(--panel);white-space:nowrap}
.cart-tab>span{overflow:hidden;text-overflow:ellipsis}
.cart-tab:hover{background:var(--hover);color:var(--tinta)}
.cart-tab.activo{background:var(--tinta);color:var(--panel);border-color:var(--tinta)}
.cart-cargando{font-size:12px;color:var(--tinta-3);padding:8px 0}
.cart-cuerpo{margin-top:20px}
/* La banda de los mudos va ARRIBA y fuera de la tabla, no de columna número
   nueve: un cliente que lleva días sin traer datos sale a cero igual que uno que
   no invierte, y esa confusión costó un mes de un cliente sin que nadie lo
   viera. Aquí es lo primero que se lee. */
.cart-aviso{border:1px solid color-mix(in srgb,var(--ambar) 22%,transparent);
  background:var(--ambar-b);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.cart-aviso b{display:block;font-size:13px;color:var(--ambar)}
.cart-aviso p{margin:4px 0 0;font-size:12px;line-height:1.55;color:var(--tinta-2)}
.cart-mudos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cart-mudos .btn span{color:var(--tinta-3);margin-left:5px;font-variant-numeric:tabular-nums}
.cart-tabla td{padding:9px 0;white-space:nowrap}
/* El cliente se queda fijo al desplazar la tabla a lo ancho: sin él, a partir de la
   quinta columna no se sabe de quién es la fila. La cartera va sobre el degradado
   del fondo (no sobre gris): la celda lo imita casi opaca y difumina lo que pasa
   por debajo, para que las cifras no se lean a través.
   El avatar y el nombre van en un <div class="dash-n"> DENTRO de la celda, nunca
   con la clase en el <td>: un td con `display:flex` deja de ser celda, el
   navegador lo mete en una celda anónima y el `sticky` se queda atrapado en ella
   (no se movía nada al desplazar). */
.cart-tabla th:first-child,.cart-tabla td:first-child{position:sticky;left:0;z-index:1;
  background:color-mix(in srgb,var(--tablero) 88%,transparent);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);padding-right:14px;box-shadow:1px 0 0 var(--linea)}
.cart-tabla tbody tr:hover td:first-child{background:var(--hover)}
@media (max-width:620px){
  .cart-tabla th:first-child,.cart-tabla td:first-child{position:static;box-shadow:none;background:none}
}
.cart-tabla th{cursor:pointer;user-select:none;white-space:nowrap}
.cart-tabla th:hover{color:var(--tinta)}
.cart-tabla th.orden-asc::after{content:" ↑"} .cart-tabla th.orden-desc::after{content:" ↓"}
/* Por encima o por debajo de la media de la agencia: solo el color de la cifra,
   sin fondos, para que la tabla siga leyéndose limpia. */
.cart-tabla td.mejor{color:var(--verde);font-weight:550}
.cart-tabla td.peor{color:var(--rojo);font-weight:550}
.cart-tabla td.cart-sin{color:var(--tinta-3)}
.cart-nota{display:block;font-size:10px;color:var(--tinta-3);font-weight:400}
.cart-tabla tfoot td{font-weight:550;color:var(--tinta);border-top:1px solid var(--linea)}
.cart-tabla tfoot tr.cart-media td{border-top:2px solid var(--linea)}
.cart-tabla tfoot tr{cursor:default}
.cart-var{font-size:11px;font-weight:550;margin-left:6px;font-variant-numeric:tabular-nums}
.cart-var.sube{color:var(--verde)} .cart-var.baja{color:var(--rojo)}
.cart-tabla tbody tr{cursor:pointer}
.cart-pie{margin:12px 0 0;font-size:11px;line-height:1.6;color:var(--tinta-3)}
@media(max-width:700px){
  .cartera{padding:18px}
  .cart-tira{margin:16px -18px 0;padding:0 18px 10px}
}

/* El panel de captación trae su propio diseño a lo ancho (tablas de 9-10
   columnas); en el ancho de la cartera se le cortaba la última columna. */
.cartera.con-cliente{max-width:1500px}

/* Inicio: tablero de trabajo. Cada columna tiene su propio límite vertical;
   las tareas terminadas no hacen crecer la portada entera. */
.inicio-portada .inicio-trabajo-cab{margin-bottom:14px}
.inicio-portada .inicio-cols{margin-top:16px}
.inicio-portada .bloq-cab h2,.inicio-portada .inicio-trabajo-cab h2{display:flex;align-items:center;gap:8px;font-size:16px;line-height:20px;font-weight:680;letter-spacing:-.015em}
.inicio-seccion-icono{display:grid;place-items:center;width:21px;height:21px;border-radius:0;background:transparent;color:var(--tinta);flex:none}
.inicio-seccion-icono svg{width:17px;height:17px}
.inicio-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.inicio-kanban:has(.inicio-kanban-bloqueado){grid-template-columns:repeat(4,minmax(0,1fr))}
.inicio-kanban-col{display:flex;flex-direction:column;min-width:0;height:auto;max-height:min(460px,52vh);margin-top:0!important;overflow:hidden;padding:9px;background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;box-shadow:var(--sombra)}
.inicio-kanban-pendiente{background:linear-gradient(180deg,color-mix(in srgb,var(--activo) 58%,var(--panel)) 0%,var(--panel) 150px)}
.inicio-kanban-en-curso{background:linear-gradient(180deg,color-mix(in srgb,var(--azul) 12%,var(--panel)) 0%,color-mix(in srgb,var(--azul) 3%,var(--panel)) 110px,var(--panel) 240px)}
.inicio-kanban-hecho{background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 14%,var(--panel)) 0%,color-mix(in srgb,var(--verde) 4%,var(--panel)) 110px,var(--panel) 240px)}
.inicio-kanban-col>header{display:flex;align-items:center;gap:6px;flex:none;padding:1px 2px 9px}
.inicio-kanban-col>header h3{display:flex;align-items:center;gap:6px;margin:0;color:var(--tinta);font-size:11px;font-weight:680;letter-spacing:.04em;text-transform:uppercase}
.inicio-kanban-col>header h3 span{color:var(--tinta-3);font-weight:400}
.inicio-kanban-mas{display:grid;place-items:center;width:20px;height:20px;margin-left:auto;border:0;border-radius:4px;background:transparent;color:var(--tinta-3);font-size:13px}
.inicio-kanban-mas:hover{background:var(--hover);color:var(--tinta)}
.inicio-kanban-list{display:flex;flex:none;flex-direction:column;gap:7px;max-height:380px;min-height:0;overflow-y:auto;padding:0 1px 2px;scrollbar-width:thin}
.inicio-kanban-tarea{display:block;width:100%;flex:none;padding:10px;text-align:left;background:var(--panel);border:1px solid var(--linea);border-radius:8px;cursor:pointer;box-shadow:none}
.inicio-kanban-tarea:hover{border-color:var(--linea-2);box-shadow:var(--sombra)}
.inicio-kanban-titulo{display:flex;align-items:flex-start;gap:8px;min-width:0}
.inicio-kanban-titulo b{display:-webkit-box;min-width:0;overflow:hidden;color:var(--tinta);font-size:13px;font-weight:550;line-height:1.45;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.inicio-kanban-cliente{display:grid;place-items:center;flex:none;width:23px;height:23px;margin-top:1px}
.inicio-kanban-cliente .avc.ico{width:23px;height:23px;border-radius:4px;font-size:10px}
.inicio-kanban-meta{display:flex;align-items:center;gap:5px;min-height:22px;margin-top:10px;padding-top:8px;border-top:1px solid var(--linea)}
.inicio-kanban-meta .pill{padding:3px 6px;font-size:10px}
.inicio-kanban-fecha{color:var(--tinta-3);background:var(--panel-2)}
.inicio-kanban-personas{display:flex;align-items:center;gap:3px;margin-left:auto}
.inicio-kanban-personas .inicio-persona{width:21px;height:21px;margin-left:-4px;border:2px solid var(--panel);font-size:10px}
.inicio-kanban-personas .inicio-persona:first-child{margin-left:0}
.inicio-persona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.inicio-kanban-tarea.completada{opacity:.78}
.inicio-kanban-tarea.completada .inicio-kanban-titulo b{color:var(--tinta-2)}
.inicio-kanban-mas svg,.inicio-kanban-nueva svg{width:13px;height:13px}
.inicio-kanban-nueva{display:flex;align-items:center;gap:5px;flex:none;width:100%;margin-top:4px;padding:6px 4px;border:0;background:transparent;color:var(--tinta-3);font-size:11px;text-align:left}
.inicio-kanban-nueva:hover{color:var(--tinta);background:var(--hover);border-radius:4px}
.inicio-kanban-vacio{margin:0;padding:24px 6px;color:var(--tinta-3);font-size:11px;text-align:center}
.inicio-kanban-bloqueado{background:linear-gradient(180deg,color-mix(in srgb,var(--rojo) 12%,var(--panel)),var(--panel) 200px)}
/* El tablero completo conserva drag/drop y filtros, con las tarjetas del inicio. */
.bd-tablero .col.inicio-kanban-col{border:1px solid var(--linea-2);max-height:min(680px,72vh);background:var(--panel)}
.bd-tablero .col.inicio-kanban-pendiente{background:linear-gradient(180deg,color-mix(in srgb,var(--activo) 58%,var(--panel)),var(--panel) 150px)}
.bd-tablero .col.inicio-kanban-en-curso{background:linear-gradient(180deg,color-mix(in srgb,var(--azul) 12%,var(--panel)),color-mix(in srgb,var(--azul) 3%,var(--panel)) 110px,var(--panel) 240px)}
.bd-tablero .col.inicio-kanban-hecho{background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 14%,var(--panel)),color-mix(in srgb,var(--verde) 4%,var(--panel)) 110px,var(--panel) 240px)}
.bd-tablero .col.inicio-kanban-bloqueado{background:linear-gradient(180deg,color-mix(in srgb,var(--rojo) 12%,var(--panel)),var(--panel) 200px)}
.bd-tablero .inicio-kanban-list{flex:0 1 auto;max-height:580px;overscroll-behavior:contain}
.bd-tablero .tk.inicio-kanban-tarea{margin:0;padding:10px;border-radius:8px;box-shadow:none}
.bd-tablero .tk.inicio-kanban-tarea:hover{box-shadow:var(--sombra)}
.inicio-kanban-list{flex:0 1 auto;overscroll-behavior:contain}
.pagina-tarjeta{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;flex:0 0 185px;width:185px;min-height:101px;padding:13px 14px;border:1px solid var(--linea-2);border-radius:16px;background:var(--panel);box-shadow:var(--sombra);text-align:left;color:var(--tinta);text-decoration:none}
.pagina-tarjeta .ic{display:grid;place-items:center;font-size:22px;line-height:26px;width:26px;height:26px;margin:0 0 1px}
.pagina-tarjeta b{font-weight:550;font-size:14px;line-height:1.4;margin:0}
.pagina-tarjeta small{font-size:11px;line-height:1.4;color:var(--tinta-3);margin:0}
.paginas-compartidas{padding:3px 4px 8px;margin:-3px -4px -6px;scrollbar-width:thin}
.docs-inicio .bloq-cab h2{display:flex;align-items:center;gap:8px}
/* Colección completa de documentos, compartida por la pestaña y el explorador. */
.documentos-contenido{display:flex;flex-direction:column;gap:32px;min-width:0;margin-top:24px}
.documentos-contenido>.documentos-seccion{margin:0;padding:0;min-width:0}
.documentos-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.documentos-cab h2,.docs-inicio .documentos-cab h2{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;font-weight:680;line-height:24px}
.documentos-cab h2 .dato-sec{font-size:12px;font-weight:400;margin-left:3px}
.documentos-cab .inicio-seccion-icono{color:var(--tinta);background:none}
.documentos-cab .inicio-seccion-icono svg{width:19px;height:19px}
.documentos-nueva{display:inline-flex;align-items:center;gap:5px;flex:none;color:var(--tinta-3);font-size:12px}
.documentos-nueva svg{width:14px;height:14px}
.documentos-nueva:hover{color:var(--tinta)}
.documentos-paginas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,185px),1fr));gap:12px}
.documentos-paginas .pagina-tarjeta{width:auto;min-width:0;text-align:left;align-items:flex-start}
.documentos-contenido .documentos-carpetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.documentos-carpetas>.carpeta-cristal{border:0;background:none;padding:0 6px 8px;text-align:left;min-width:0}
.documentos-carpetas .fig{display:block;max-width:160px;margin:0 auto}
.documentos-carpetas .nom{display:block;font-size:13px;font-weight:550;margin-top:4px}
.documentos-carpetas .sub{font-size:11px}
.documentos-archivos{display:flex;flex-direction:column;gap:9px;min-width:0}
.documentos-soltar-raiz{display:none}
.arrastrando-documentos .documentos-soltar-raiz{display:flex;align-items:center;gap:10px;padding:16px;border:1px dashed var(--acento);border-radius:12px;color:var(--tinta-2);font-size:13px}
.documentos-soltar-raiz svg{width:18px;height:18px}
.arrastrando-documentos .documentos-contenido [data-carpeta]{outline:1px dashed var(--linea-2);outline-offset:3px;border-radius:12px}
.documentos-contenido .sobre,.portada-docs-migas .sobre{background:var(--activo)!important;outline:2px solid var(--acento)!important;border-radius:12px}
.documentos-contenido [draggable=true]{cursor:grab}
.documentos-contenido [draggable=true]:active{cursor:grabbing}
.documentos-archivos>.documento-archivo{display:flex;align-items:center;justify-content:flex-start;gap:13px;width:100%;padding:15px 16px;text-align:left;background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;box-shadow:var(--sombra);color:var(--tinta)}
.documentos-archivos>.documento-archivo:hover{background:var(--hover);border-color:var(--linea)}
.documento-archivo:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.documento-archivo-icono{display:grid;place-items:center;flex:0 0 23px;color:var(--tinta-2)}
.documento-archivo-icono svg{width:20px;height:20px}
.documento-archivo-texto{flex:1;min-width:0;text-align:left}
.documento-archivo-texto b{display:block;font-size:14px;line-height:1.45;font-weight:550;overflow-wrap:anywhere}
.documento-archivo-texto small{display:block;font-size:11px;color:var(--tinta-3);line-height:1.45;margin-top:3px;overflow-wrap:anywhere}
.documento-archivo>svg{flex:none;width:14px;height:14px;color:var(--tinta-3)}
@media(max-width:700px){.documentos-cab{gap:10px;flex-wrap:wrap}.documentos-paginas{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}.documentos-archivos>.documento-archivo{padding:13px 12px;gap:10px}}
/* Tabla de tareas: mismos logos y caras que las tarjetas, sin tachar el título. */
.tabla-tareas{box-shadow:var(--sombra);border-color:var(--linea-2);overflow-x:auto}
.tabla-tareas .bd-fila[data-fila]{height:64px;min-height:64px}
.tabla-tareas .cel{gap:10px;padding:10px 16px}
.tabla-tareas .bd-cab .cel{padding-top:14px;padding-bottom:14px}
.tabla-tareas .bd-fila .asa{display:none}
.tabla-tareas .chk{padding:0;width:18px;height:18px;border-radius:4px;background:transparent}
.tabla-tareas .chk.on{background:var(--verde);border-color:var(--verde)}
.tabla-tareas .chk.sel-fila.on{background:var(--azul);border-color:var(--azul)}
.tabla-tareas .bd-fila:hover .sel-fila,.tabla-tareas .bd-fila:focus-within .sel-fila{opacity:1}
.tabla-tareas .chk:focus-visible{outline:2px solid var(--azul);outline-offset:3px;opacity:1}
.tabla-tareas .bd-fila.seleccionada{background:var(--activo)}
.tabla-tareas .titulo-tarea{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-size:14px;font-weight:550;line-height:20px;color:var(--tinta);text-decoration:none}
.tabla-tareas .titulo-tarea[contenteditable]{display:block;white-space:normal;outline:2px solid var(--azul);border-radius:4px}
.tabla-tareas .tarea-tabla-icono{display:grid;place-items:center;flex:none;width:26px;height:26px;cursor:pointer}
.tabla-tareas .tarea-tabla-icono .avc{width:26px;height:26px;font-size:11px;border-radius:8px}
.tabla-tareas .tarea-tabla-icono .ico-t{font-size:18px;width:auto;margin:0}
.tabla-tareas .cel-resp .av-p{width:27px;height:27px;font-size:10px}
.tabla-tareas .tarea-tabla-personas{flex:none;margin-left:auto}
.tabla-tareas .bd-fila:not(.bd-cab) .cel:first-child{padding-right:58px}
.tabla-tareas .bd-fila:hover .cel:first-child .titulo-tarea{padding-right:0}
.tabla-tareas .abrir-fila:focus-visible{opacity:1;pointer-events:auto}
.tabla-tareas .bd-grupo{padding:13px 16px;background:var(--fondo);font-size:12px;gap:9px;border-top:0}
.tabla-tareas .bd-grupo .n{display:grid;place-items:center;min-width:21px;height:21px;border-radius:4px;background:var(--panel);font-size:11px}
.tabla-grupo-estado{display:flex;align-items:center;gap:8px;font-weight:680;color:var(--tinta)}
.tabla-grupo-estado::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--tinta-3)}
.tabla-grupo-estado.estado-en_curso::before{background:var(--azul)}
.tabla-grupo-estado.estado-hecho::before{background:var(--verde)}
.tabla-tareas .bd-nueva{padding:13px 16px}
/* El avatar ocupa el nodo del timeline, tanto en el resumen como en Actividad. */
.hist-persona{display:grid;place-items:center;position:relative;flex:none;width:32px;height:32px;border:2px solid var(--fondo);border-radius:50%;background:var(--panel);color:var(--tinta-3);font-size:10px;overflow:hidden;box-sizing:border-box}
.hist-persona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hist-persona svg{width:16px;height:16px}
.historial-cliente .tl{padding-left:48px}
.historial-cliente .tl::before{left:16px;top:16px;bottom:28px;width:1px}
.historial-cliente .tl-item{padding-bottom:28px}
.historial-cliente .tl-item::before{display:none}
.historial-cliente .tl-avatar{position:absolute;left:-48px;top:0}
.historial-cliente .registro{border:0;background:none;overflow:visible}
.historial-cliente .registro-fila{position:relative;gap:14px;padding:14px 0;border:0;border-radius:8px}
.historial-cliente .registro-fila:not(:last-child)::after{content:'';position:absolute;left:16px;top:46px;bottom:-14px;width:1px;background:var(--linea-2)}
.historial-cliente .registro-autor{position:relative;z-index:1;flex:none}
@media(max-width:900px){.tabla-tareas .bd-fila[data-fila]{height:auto;min-height:64px}.tabla-tareas .bd-fila:not(.bd-cab) .cel:first-child{padding:12px}.tabla-tareas .titulo-tarea{white-space:normal!important}.tabla-tareas .bd-fila .abrir-fila{display:none}.tabla-tareas .bd-fila:hover .titulo-tarea{padding-right:0}}
@media(max-width:700px){
  .inicio-kanban{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .inicio-kanban-col{flex:0 0 82%;max-height:min(500px,62vh);scroll-snap-align:start}
  .inicio-kanban-list{max-height:420px}
}

/* ─── Mapa de agentes ───────────────────────────────────────────────────────
   Quién trabaja en una conversación y colgando de quién, como lo enseña el
   editor: ventana emergente, la conversación a la izquierda y cada nivel de
   subagentes en una columna a su derecha, unidos por líneas finas. Al pulsar
   una tarjeta, su detalle a un lado. */
.copi-mapa-boton{position:relative;width:auto;min-width:28px;padding:0 6px;gap:4px;
  display:inline-flex;align-items:center;font-size:12px}
.copi-mapa-boton[hidden]{display:none}
.copi-mapa-boton svg{width:16px;height:16px}
.copi-mapa-boton span:empty{display:none}
.copi-mapa-boton.vivo{color:var(--verde)}
.mapa-agentes{--mapa-linea:color-mix(in srgb,var(--tinta-3) 35%,transparent);position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(15,17,21,.35)}
.mapa-ventana{width:min(1280px,100%);height:min(860px,100%);display:flex;flex-direction:column;
  background:var(--tablero);border:1px solid var(--linea);border-radius:var(--r-panel,14px);
  box-shadow:var(--sombra-alta);overflow:hidden}
.mapa-ventana>header{flex:none;display:flex;align-items:flex-start;gap:12px;padding:20px 20px 8px 24px}
.mapa-ventana>header>div{flex:1;min-width:0}
.mapa-ventana h3{margin:0;font-size:18px;font-weight:550}
.mapa-sub{margin:6px 0 0;font-size:13px;color:var(--tinta-3)}
.mapa-cuerpo{flex:1;min-height:0;display:flex}
.mapa-lienzo{flex:1;min-width:0;overflow:auto;padding:12px 24px 24px}
.mapa-lado{display:none}
.con-detalle .mapa-lado{display:block;flex:none;width:340px;overflow:auto;border-left:1px solid var(--linea);
  background:var(--panel)}
.mapa-arbol{display:flex;align-items:center;width:max-content;padding:8px 0}
.mapa-rama{display:flex;align-items:center}
.mapa-hijos{display:flex;flex-direction:column;justify-content:center;position:relative;margin-left:32px}
.mapa-hijos::before{content:"";position:absolute;left:-32px;top:50%;width:32px;border-top:1px solid var(--mapa-linea)}
.mapa-hijos>.mapa-rama{position:relative;padding:5px 0 5px 32px}
.mapa-hijos>.mapa-rama::before{content:"";position:absolute;left:0;top:50%;width:32px;border-top:1px solid var(--mapa-linea)}
.mapa-hijos>.mapa-rama::after{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--mapa-linea)}
.mapa-hijos>.mapa-rama:first-child::after{top:50%}
.mapa-hijos>.mapa-rama:last-child::after{bottom:50%}
.mapa-hijos>.mapa-rama:only-child::after{display:none}
.mapa-tarjeta{width:300px;flex:none;display:flex;align-items:flex-start;gap:10px;padding:10px 14px;
  text-align:left;font:inherit;color:inherit;border:1px solid var(--linea-2);border-radius:8px;
  background:var(--panel);cursor:pointer}
.mapa-tarjeta:hover{border-color:var(--tinta-3)}
.mapa-tarjeta.elegida{border-color:var(--acento,var(--tinta-2));box-shadow:0 0 0 1px var(--acento,var(--tinta-2))}
.mapa-tarjeta.raiz{cursor:default}
.mapa-tarjeta.raiz b{font-weight:550}
.mapa-punto{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--tinta-3);opacity:.45}
.mapa-tarjeta.vivo .mapa-punto{background:var(--verde);opacity:1}
.mapa-tarjeta.espera .mapa-punto{background:var(--ambar);opacity:1}
.mapa-tarjeta.mal .mapa-punto{background:var(--rojo);opacity:1}
.mapa-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.mapa-txt b{font-size:14px;font-weight:550;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa-txt small{font-size:12px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa-txt .mapa-ahora{color:var(--tinta-2)}
.mapa-seccion{margin:28px 0 10px;font-size:13px;color:var(--tinta-3)}
.mapa-lista{display:flex;flex-direction:column;gap:8px}
.mapa-detalle{padding:16px 18px 20px;font-size:13px;line-height:1.5;color:var(--tinta-2)}
.mapa-detalle header{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.mapa-detalle header b{flex:1;font-size:14px;font-weight:550;color:var(--tinta)}
.mapa-detalle p{margin:10px 0 0;overflow-wrap:anywhere}
.mapa-detalle span{display:block;font-size:11px;color:var(--tinta-3)}
.mapa-cancelar{margin-top:16px}
.mapa-encargo{white-space:pre-wrap;max-height:320px;overflow:auto}
@media (max-width:760px){
  .mapa-agentes{padding:0}
  .mapa-ventana{width:100%;height:100%;border-radius:0;border:0}
  .mapa-cuerpo{flex-direction:column}
  .con-detalle .mapa-lado{width:auto;max-height:45%;border-left:0;border-top:1px solid var(--linea)}
  .mapa-lienzo{padding:8px 16px 16px}
  .mapa-tarjeta{width:240px}
}

/* Planificar: el botón encendido dice que el siguiente mensaje solo propone. */
/* Planificar, dentro del menú de modelo (8-oct-2026). Puesto, lo dice el selector
   con una etiqueta pequeña y la caja se tiñe, para no escribir creyendo que va a hacer. */
.copi-selector-plan{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:11px;
  font-weight:550;color:var(--acento);background:var(--acento-b);border-radius:4px;padding:1px 6px}
.copi-selector-plan svg{width:11px;height:11px}
.copi-caja.plan{border-color:var(--acento-borde);box-shadow:0 0 0 3px var(--acento-b)}
.copi-ajuste-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:4px;padding:10px;border-top:1px solid var(--linea);cursor:pointer}
.copi-ajuste-plan>span{display:flex;align-items:flex-start;gap:9px}
.copi-ajuste-plan>span>svg{width:18px;height:18px;flex:none;color:var(--tinta);margin-top:1px}
.copi-ajuste-plan b{display:block;font-size:13px;color:var(--tinta)}
.copi-ajuste-plan small{display:block;font-size:11px;color:var(--tinta-3);margin-top:2px}
.copi-ajuste-plan input{appearance:none;flex:none;width:32px;height:18px;border-radius:999px;margin:0;
  background:var(--linea-2);position:relative;cursor:pointer;transition:background .15s}
.copi-ajuste-plan input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.copi-ajuste-plan input:checked{background:var(--acento)}
.copi-ajuste-plan input:checked::after{transform:translateX(14px)}
.copi-ajuste-plan input:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* Agentes en segundo plano: una pestaña pegada encima de la caja del compositor. */
.copi-fondo{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:0 8px;padding:7px 12px;
  border:1px solid var(--linea-2);border-bottom:0;border-radius:12px 12px 0 0;background:var(--panel-2);
  font:inherit;font-size:12px;color:var(--tinta-2);text-align:left;cursor:pointer}
.copi-fondo[hidden]{display:none}
.copi-fondo:hover{background:var(--hover)}
.copi-fondo b{color:var(--tinta);font-weight:550}
.copi-fondo-vivo{width:8px;height:8px;flex:none;border-radius:999px;background:var(--verde);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--verde) 18%,transparent);animation:copi-latido 1.6s infinite}
@keyframes copi-latido{50%{opacity:.35}}
.copi-fondo-vivo.quieto{background:var(--tinta-3);box-shadow:none;animation:none}
@media (prefers-reduced-motion:reduce){.copi-fondo-vivo{animation:none}}
.copi-fondo-ver{margin-left:auto;color:var(--acento);font-weight:550}
/* Las caras de los agentes, montadas unas sobre otras como en el boceto. */
.copi-fondo-caras{display:flex;flex:none}
.copi-fondo-caras .agente-av,.copi-fondo-mas{width:20px;height:20px;border-radius:999px;margin-left:-6px;
  border:2px solid var(--panel-2);font-size:10px;box-sizing:border-box;overflow:hidden}
.copi-fondo-caras>:first-child{margin-left:0}
.copi-fondo-caras .agente-av img{width:100%;height:100%;object-fit:cover}
.copi-fondo-mas{display:grid;place-items:center;background:var(--activo);color:var(--tinta-2);font-weight:550}
.copi-plan-acciones{display:flex;gap:var(--e2);margin-top:var(--e3)}

/* Estado, agentes e interno: espacios de lectura y navegación compartida. */
.agente-av.con-imagen,.agente-av.con-emoji{background:transparent!important;border-radius:0;box-shadow:none}
.agente-av.con-imagen img{object-fit:contain;width:100%;height:100%}
.agente-av.mini{width:20px;height:20px;min-width:20px;font-size:14px}
.agente-ficha-cab{padding:12px 0 24px;align-items:center}
.agente-ficha-cab .agente-av.grande{width:56px;height:56px;flex:0 0 56px}
.agente-titulo{gap:18px}.agente-lema{margin:8px 0 0;line-height:1.5}
.agente-ficha-cab + .ficha-tabs,.agente-borrador + .ficha-tabs{margin:0 0 24px;padding:4px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);gap:4px;width:fit-content;max-width:100%;overflow:auto}
.agente-ficha-cab ~ .ficha-tabs button{border:0;border-radius:8px;padding:9px 15px;white-space:nowrap}
.agente-ficha-cab ~ .ficha-tabs button.activo{background:var(--azul-suave,#e8efff);color:var(--azul)}
.agente-cuerpo .constructor-agente{grid-template-columns:minmax(0,1fr) minmax(270px,330px);gap:28px}
.agente-cuerpo .constructor-agente>main,.agente-cuerpo .constructor-agente>aside{min-width:0}
.agente-cuerpo .constructor-agente>aside .constructor-grid{grid-template-columns:1fr}
.agente-resumen-instrucciones{white-space:pre-line;line-height:1.7;color:var(--tinta-2);margin:20px 0;max-height:280px;overflow:auto}
#ag-instrucciones{min-height:420px;font-family:inherit;font-size:14px;line-height:1.75;padding:18px;resize:vertical}
.agente-carpeta{gap:28px;padding-top:8px;grid-template-columns:260px minmax(0,1fr)}
.agente-carpeta>aside{padding:16px 0;gap:12px;top:16px}
.agente-carpeta .agente-ayuda{margin:0 0 16px}
.agente-carpeta select{width:100%;margin:8px 0 18px}
.agente-carpeta .doc-crear{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;border-style:dashed;padding:11px}
.agente-carpeta .doc-hoja{min-width:0;border-radius:12px;overflow:hidden}
.agente-carpeta .pag-col{max-width:none;padding:24px 36px 48px}
.capa-editor .pag-col,.capa-editor .pag-col.desnuda{max-width:none;width:100%;padding:18px 32px 40px;box-sizing:border-box}
.capa-editor .bk:not(.bk-cod) .bk-txt{white-space:normal}
.capa-revision{margin-top:24px;color:var(--tinta-2)}
.capa-revision>summary{cursor:pointer;padding:16px 0}
.interno-busqueda{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--linea);border-radius:12px;background:var(--panel);margin:8px 0 32px}
.interno-busqueda svg{width:20px;height:20px;color:var(--tinta-3)}
.interno-busqueda input{flex:1;border:0;background:transparent;outline:0;font:inherit;min-width:0}
.interno-partes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:20px;align-items:start}
.interno-parte{border:1px solid var(--linea);border-radius:12px;background:var(--panel);overflow:hidden}
.interno-parte-cab{padding:22px;width:100%;text-align:left;gap:12px;flex-wrap:wrap}
.interno-parte-cab b{font-size:18px}.interno-parte-n{width:100%;padding-left:44px}
.interno-atajos{display:grid;grid-template-columns:1fr;gap:4px;padding:4px 16px 18px}
.interno-atajos button{width:100%;padding:10px 12px;border-radius:8px;text-align:left;justify-content:flex-start}
.interno-atajos button:hover{background:var(--azul-suave,#e8efff)}
.interno-parte[hidden],.interno-atajos button[hidden]{display:none}
@media(max-width:900px){.agente-cuerpo .constructor-agente,.agente-carpeta{grid-template-columns:1fr}.agente-carpeta>aside{position:static;max-height:340px}.agente-carpeta .pag-col{padding:20px}.capa-editor .pag-col.desnuda{padding:16px 20px}}

.agente-carpeta .constructor-ancho{display:block;font-size:12px;color:var(--tinta-3)}
.agente-carpeta select{appearance:auto;border:1px solid var(--linea);border-radius:8px;background:var(--panel);color:var(--tinta);font:inherit;padding:10px 12px;box-sizing:border-box}
.agente-carpeta>aside{gap:8px}.agente-carpeta .bloq-cab{margin-bottom:8px}
.agente-carpeta .doc-crear svg{width:16px;height:16px}

/* Crear conversaciones y reconocer a quienes participan. */
.dlg-personas{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto}
.dlg-multi-cab{display:flex;gap:6px;margin-bottom:8px}.dlg-multi-cab input{flex:1;min-width:0}
.dlg-personas>label{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:8px;cursor:pointer;color:var(--tinta)}
.dlg-personas>label:has(input:checked){background:var(--activo)}
.dlg-personas input[type=checkbox]{width:16px;height:16px;flex:none}
.contexto-participantes h2{display:flex;justify-content:space-between;font-size:13px;margin:0 0 16px}
.contexto-participantes h2 span{color:var(--tinta-3);font-weight:400}
.contexto-persona{display:flex;align-items:center;gap:12px;padding:12px 0}
.contexto-persona>div{min-width:0}.contexto-persona b{display:block;font-size:13px;overflow-wrap:anywhere}
.contexto-persona small{display:block;color:var(--tinta-3);font-size:12px;margin-top:3px}
.contexto-persona .persona-av,.dlg-personas .persona-av{position:relative;flex:none;width:36px;height:36px;overflow:hidden}
.contexto-persona .persona-av img,.dlg-personas .persona-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--panel)}

.interno-biblioteca .interno-partes{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.interno-parte .interno-atajos{width:100%;box-sizing:border-box}

.dlg-multiple{min-width:0}

/* Ficha y catálogo de agentes: navegación alineada y lectura independiente. */
.agente-pagina{width:100%;margin-inline:auto}
.agente-card{position:relative;cursor:pointer}
.agente-card-enlace{color:inherit;text-decoration:none}
.agente-card-enlace::after{content:"";position:absolute;inset:0;border-radius:inherit}
.agente-card-enlace:focus-visible::after{outline:2px solid var(--azul);outline-offset:3px}
.agente-card .agente-favorito{position:relative;z-index:1}
.agente-card:hover{border-color:var(--linea-2);box-shadow:0 4px 16px #0000000b}
.agente-card p{margin-bottom:0}
#ag-instrucciones[hidden],#ag-instrucciones-vista[hidden]{display:none}
#ag-instrucciones-vista .pag-col{padding:12px 0;max-width:none}
#ag-motor-logo{display:inline-flex;margin-right:8px;vertical-align:middle}
.agente-carpeta .doc-hoja{display:flex;flex-direction:column;height:clamp(360px,calc(100dvh - 310px),850px)}
.agente-carpeta #doc-host{min-height:0;overflow-y:auto;flex:1;overscroll-behavior:contain;overflow-anchor:none}
.agente-carpeta .doc-hoja-cab{flex:none}
.ag-doc-grupo{font-size:11px;font-weight:550;color:var(--tinta-3);padding:20px 8px 8px;text-transform:uppercase;letter-spacing:.04em}
.agente-carpeta .agente-arbol{min-height:120px}
@media(max-width:700px){.agente-carpeta .doc-hoja{height:65dvh}}

#ag-instrucciones-vista .pag{height:auto}
#ag-instrucciones-vista .pag-scroll{overflow:visible}
#ag-instrucciones-vista .pag-col.desnuda{padding:12px 0}
#ag-instrucciones-vista .pag-bloque[data-t="h1"]{font-size:22px}

/* Superficies y pestañas compartidas por las pantallas de trabajo. */
:root{--superficie-radio:12px;--pestana-radio:8px;--superficie-sombra:var(--sombra)}
:is(.lienzo,[id="capa"]) :is(.agente-card,.autom-card,.autom-ficha-bloque,.acceso-ficha,.equipo-personas-lista,.proyecto-bloque,.doc-hoja,.conector-card,.estado-bloque,.interno-card,.dash-tarjeta,.inicio-bloque,.integra-bloque,.mapa-tarjeta,.pagina-tarjeta,.skill-tarjeta,.tarjeta,.interno-parte,.cp-dashboard,.cp-page,.cp-link,.inicio-trabajo-panel,.tk){
  border:0;border-radius:var(--superficie-radio);background:var(--panel);box-shadow:var(--superficie-sombra);
}
.agente-top{align-items:center}
.agente-top>div{align-self:center}
.agente-top h3{margin:0;line-height:1.35}
.agente-top .agente-av{align-self:center;flex-shrink:0}
.agente-top .agente-favorito{align-self:center}
.agente-card .agente-av img{display:block}
.agente-carpeta>aside{padding-top:12px}
.agente-carpeta .agente-arbol{gap:0}
.agente-carpeta .ag-doc-grupo:first-child{padding-top:12px}
.agente-carpeta .doc-crear{border:0;background:var(--panel);box-shadow:var(--superficie-sombra)}
.equipo-secciones{margin-bottom:24px;display:flex;width:fit-content}
.equipo-secciones span{margin-left:6px;font-size:11px;opacity:.7}
.equipo-layout{grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:24px}
.equipo-personas-lista{padding:18px 12px;min-width:0}
.equipo-personas-lista>.bloq-cab{padding:0 6px;margin-bottom:14px}
.equipo-busqueda{margin:0 6px 12px;min-width:0}
.equipo-busqueda input{min-width:0;width:100%}
.equipo-personas-lista .personas{border:0;background:transparent}
.equipo-personas-lista .persona-fila{display:grid;grid-template-columns:34px minmax(0,1fr) auto;border:0;border-radius:8px;row-gap:4px;margin:4px 0;padding:12px 8px}
.equipo-personas-lista .persona-fila .persona-av{grid-row:1/3}
.equipo-personas-lista .persona-fila .txt{grid-column:2;grid-row:1}
.equipo-personas-lista .persona-fila .presencia{grid-column:3;grid-row:1}
.equipo-personas-lista .persona-fila .pill{grid-column:2;grid-row:2;justify-self:start;background:transparent;padding:0;color:var(--tinta-3);font-weight:400}
.equipo-personas-lista .persona-fila.activo{background:var(--activo)}
.equipo-personas-lista .persona-fila:hover:not(.activo){background:var(--hover)}
.acceso-ficha{padding:24px;min-width:0}
.acceso-persona{flex-wrap:wrap;border:0;padding-bottom:12px}
.acceso-persona h2{font-size:22px}
.acceso-persona p{overflow-wrap:anywhere}
.acceso-persona .rol-control{min-width:155px;max-width:100%}
.acceso-baja{margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.persona-secciones{display:flex;margin:0 0 24px;width:fit-content}
.acceso-permisos{margin-top:20px}
.acceso-permisos>h3{font-size:14px;margin-bottom:8px}
.acceso-permisos .apunte{line-height:1.6}
.acceso-permisos .perm-nuevo{padding:16px;background:var(--fondo);border-radius:8px;gap:10px}
.acceso-permisos .perm-nuevo select{min-width:0;max-width:100%}
.grupos-equipo>div:last-child{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;overflow:visible}
.grupos-equipo>div>button{padding:20px;border:0;border-radius:var(--superficie-radio);box-shadow:var(--superficie-sombra);min-width:0}
.grupos-equipo button b{font-size:14px}.grupos-equipo button small{font-size:12px;line-height:1.6;white-space:normal}
#equipo-grupos[hidden],#equipo-personas[hidden],[data-persona-panel][hidden],.persona-fila[hidden],#crear-grupo[hidden],#invitar-persona[hidden]{display:none!important}
@media(max-width:1050px){.equipo-layout{grid-template-columns:minmax(230px,280px) minmax(0,1fr)}.acceso-persona .rol-control{width:100%;margin-left:0}.acceso-permisos .perm-nuevo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:780px){.equipo-layout{grid-template-columns:minmax(0,1fr)}.equipo-personas-lista .personas{max-height:260px;overflow:auto}.acceso-ficha{padding:18px}.persona-secciones{width:100%}.grupos-equipo>div:last-child{grid-template-columns:minmax(0,1fr)}}

.catalogo .agente-top{display:flex;align-items:center;gap:14px}
.catalogo .agente-top>div{flex:1;min-width:0}
[data-tema="oscuro"] .agente-av img[src$="/chatgpt.svg"]{filter:invert(1)}

.equipo-pagina{width:100%}
.equipo-layout>.acceso-ficha{margin-top:0}
/* Pestañas del cliente: subrayado, sin caja. La caja azul se montaba sobre un
   botón con relleno solo por abajo y el texto quedaba pegado arriba a la
   izquierda (14-oct-2026). */
.lienzo .portada-secciones>button{transition:color .15s,border-color .15s}
.lienzo .portada-secciones>button:hover{color:var(--tinta-2)}
.lienzo .portada-secciones>button[aria-selected="true"]{background:none;color:var(--tinta);border-bottom-color:var(--acento);border-radius:0;box-shadow:none}
.lienzo .portada-secciones>button[aria-selected="true"]::after{display:none}

/* Equipo: capacidades y accesos efectivos por persona. */
#equipo-roles[hidden]{display:none}
.roles-cab{max-width:720px;margin-bottom:24px}.roles-cab h2{font-size:22px;margin-bottom:8px}
.roles-cab p,.roles-agencias p{color:var(--tinta-2);line-height:1.65}
.roles-catalogo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.roles-catalogo article,.roles-agencias{padding:24px;border-radius:12px;background:var(--panel);box-shadow:var(--sombra)}
.roles-catalogo h3{font-size:18px;margin-bottom:12px}.roles-catalogo p{color:var(--tinta-2);line-height:1.6}
.roles-catalogo ul,.rol-capacidades ul{padding-left:20px;margin:14px 0 0;color:var(--tinta-2);line-height:1.8}
.roles-agencias{margin-top:24px}.roles-agencias h3{margin-bottom:10px}
.acceso-persona>.pill{margin-left:auto;align-self:center}
.acceso-persona{padding-bottom:24px}.acceso-ficha .persona-secciones{margin-bottom:20px}
.accesos-recursos{margin-top:16px;max-height:580px;overflow:auto}
.acceso-recurso{display:grid;grid-template-columns:24px minmax(0,1fr) 190px;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea)}
.acceso-recurso:last-child{border:0}.acceso-recurso b,.acceso-recurso small{display:block}
.acceso-recurso b{font-size:14px;font-weight:550}.acceso-recurso small{font-size:12px;color:var(--tinta-3);margin-top:5px;line-height:1.45}
.acceso-recurso-icono{color:var(--tinta-3)}.acceso-recurso-icono svg{width:20px;height:20px}
.acceso-recurso select,.perfil-rol select{border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);padding:9px 10px;color:var(--tinta);font:inherit;font-size:12px;width:100%;min-width:0}
.acceso-recurso select:disabled{opacity:.65}.acceso-recurso[hidden]{display:none}
.perfil-datos,.perfil-rol-cab,.perfil-sesion{display:flex;gap:20px;align-items:center;justify-content:space-between}
.perfil-persona h3{font-size:14px;margin-bottom:8px}.perfil-persona p{font-size:13px;line-height:1.6;color:var(--tinta-3)}
.perfil-datos,.perfil-rol{padding:20px 0;border-bottom:1px solid var(--linea)}
.perfil-rol-cab select{max-width:200px}.rol-capacidades{margin-top:18px;padding:16px;background:var(--activo);border-radius:8px;font-size:13px}
.perfil-sesion{padding-top:24px}.perfil-sesion .btn,.perfil-datos .btn{flex-shrink:0}
@media(max-width:780px){.roles-catalogo{grid-template-columns:1fr}.acceso-recurso{grid-template-columns:24px minmax(0,1fr)}.acceso-recurso select{grid-column:2}.perfil-datos,.perfil-rol-cab,.perfil-sesion{align-items:flex-start;flex-direction:column}.perfil-rol-cab select{max-width:none}}

/* Inicio: correo y rutinas comparten una tarjeta y un ritmo de lectura. */
.inicio-portada #inicio-correo,.inicio-portada .inicio-secundario>#inicio-rutinas{padding:22px;background:var(--panel);border:0;border-radius:12px;box-shadow:var(--sombra);margin-top:24px!important;min-width:0}
.inicio-portada #inicio-correo .bloq-cab,.inicio-portada #inicio-rutinas .bloq-cab{align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.inicio-portada :is(#inicio-correo,#inicio-rutinas) .bloq-cab h2{font-size:16px}
.inicio-portada :is(#inicio-correo,#inicio-rutinas) .bloq-cab .mas{font-size:12px;margin-left:auto;white-space:nowrap}
.inicio-portada #inicio-correo .inicio-correo{gap:0}
.inicio-portada #inicio-correo a.inicio-correo-fila{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border:0;border-bottom:1px solid var(--linea);border-radius:0;background:transparent;box-shadow:none}
.inicio-portada #inicio-correo a.inicio-correo-fila:last-child{border:0}
.inicio-portada #inicio-correo .inicio-correo-avatar{width:32px;height:32px;flex:0 0 32px;background:var(--activo);color:var(--tinta-2);border-radius:999px}
.inicio-portada #inicio-correo .inicio-correo-texto{display:flex;flex-direction:column;gap:5px;min-width:0}
.inicio-portada #inicio-correo .inicio-correo-remitente{font-size:12px;color:var(--tinta-3)}
.inicio-portada #inicio-correo .inicio-correo-texto b{display:block;font-size:14px;line-height:1.45;color:var(--tinta);font-weight:550}
.inicio-portada #inicio-correo .inicio-correo-extracto{font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inicio-portada #inicio-rutinas .inicio-rutinas-resumen{margin:0 0 12px;color:var(--tinta-3);font-size:12px}
.inicio-portada #inicio-rutinas .inicio-rutinas article{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid var(--linea)}
.inicio-portada #inicio-rutinas .inicio-rutinas article:last-child{border:0}
.inicio-portada #inicio-rutinas .inicio-rutina-icono{width:32px;height:32px;flex:0 0 32px;border-radius:8px;background:var(--acento-b)}
.inicio-portada #inicio-rutinas .inicio-rutina-texto{min-width:0;flex:1}
.inicio-portada #inicio-rutinas .inicio-rutina-texto>b{font-size:14px;line-height:1.45;display:block}
.inicio-portada #inicio-rutinas .inicio-rutina-texto>small{display:block;margin-top:6px;font-size:12px;line-height:1.5}
.inicio-portada #inicio-rutinas .inicio-rutina-estado{display:inline-block;margin:10px 0 0;padding:4px 8px;border-radius:8px;background:var(--activo);font-size:11px}
.inicio-portada #inicio-rutinas .inicio-rutina-estado.atencion{background:var(--ambar-b);color:var(--ambar)}
.inicio-portada #inicio-rutinas details{margin-top:12px}.inicio-portada #inicio-rutinas details p{max-height:180px;overflow:auto;white-space:pre-wrap;font-size:12px}
.inicio-portada :is(#inicio-correo,#inicio-rutinas) .inicio-ver-mas{margin-top:14px;padding-top:12px;border-top:1px solid var(--linea)}
.inicio-portada :is(#inicio-correo,#inicio-rutinas) :is(.estado-dudoso,.estado-bueno){font-size:13px;line-height:1.6;padding:16px;background:var(--activo);border-radius:8px}

.inicio-portada :is(#inicio-correo,#inicio-rutinas) :is(.estado-dudoso,.estado-bueno){border:0}
.acceso-permisos>.bloq-cab{margin-bottom:12px}.acceso-permisos>.apunte{margin-top:0}

/* Accesos: una fila por recurso, tres decisiones visibles. */
.acceso-persona>.persona-rol-boton{margin-left:auto;display:flex;align-items:center;gap:8px;border:0;padding:8px 12px;cursor:pointer;font:inherit;font-size:12px}
.persona-rol-boton svg{width:14px;height:14px}.persona-rol-boton:disabled{cursor:default;opacity:.65}
/* El puesto va al lado del rol, con su misma talla. */
.acceso-persona>.persona-puesto{border:1px solid var(--linea);border-radius:999px;padding:7px 10px;font:inherit;font-size:12px;background:var(--panel);color:var(--tinta)}
.matriz-cab,.acceso-recurso.matriz-fila{display:grid;grid-template-columns:minmax(160px,1fr) repeat(3,84px);gap:4px;align-items:center}
.matriz-cab{position:sticky;top:0;background:var(--panel);z-index:1;padding:12px 0;border-bottom:1px solid var(--linea);font-size:11px;color:var(--tinta-3)}
.matriz-cab>span:not(:first-child){text-align:center}
.matriz-identidad{display:flex;align-items:center;gap:12px;min-width:0}.matriz-identidad>div:last-child{min-width:0}.matriz-identidad b{overflow-wrap:anywhere}
.matriz-identidad :is(.avc,.agente-av){width:32px;height:32px;flex:0 0 32px}.matriz-identidad .avc img{object-fit:contain}
.matriz-opcion{display:flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer;border-radius:8px}.matriz-opcion:hover{background:var(--hover)}
.matriz-opcion:has(input:checked){background:var(--activo)}.matriz-opcion input{width:18px;height:18px;margin:0;accent-color:var(--azul)}.matriz-opcion span{display:none}.matriz-opcion:has(input:disabled){opacity:.5;cursor:default}.matriz-guardado:empty{display:none}
.roles-funciones,.roles-asignacion{background:var(--panel);border-radius:12px;box-shadow:var(--superficie-sombra);padding:24px;margin-bottom:24px}
.roles-pagina h2{font-size:18px;margin-bottom:10px}.roles-pagina p{font-size:13px;color:var(--tinta-3);line-height:1.65}
.roles-tabla-scroll{overflow:auto;margin-top:24px}.roles-tabla{border-collapse:collapse;width:100%;font-size:13px;min-width:740px}.roles-tabla th,.roles-tabla td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--linea);line-height:1.6}.roles-tabla thead th{background:var(--activo);font-weight:550}.roles-tabla tbody th{font-weight:550;width:24%}.roles-tabla td{width:19%;color:var(--tinta-2)}
.roles-agencia-detalle{margin-top:18px;font-size:13px}.roles-agencia-detalle summary{cursor:pointer;font-weight:550}
.roles-lote-opciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.roles-lote-opciones label{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;background:var(--fondo);cursor:pointer}.roles-lote-opciones label:has(:checked){background:var(--activo);color:var(--azul)}.roles-lote-opciones input{accent-color:var(--azul)}
.roles-lote-barra{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 12px;font-size:13px}.roles-lote-barra .busqueda{flex:1;min-width:160px}.roles-lote-barra input[type=checkbox]{accent-color:var(--azul)}
.rol-persona-fila{display:grid;grid-template-columns:20px 36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linea);cursor:pointer}.rol-persona-fila b{display:block;font-size:14px}.rol-persona-fila small{display:block;margin-top:5px;font-size:12px;color:var(--tinta-3);overflow-wrap:anywhere}.rol-persona-fila:has(:disabled){opacity:.65;cursor:default}.rol-persona-fila[hidden],.matriz-fila[hidden]{display:none}.rol-persona-fila input{accent-color:var(--azul)}
@media(max-width:1150px){.equipo-layout{grid-template-columns:230px minmax(0,1fr)}.matriz-cab,.acceso-recurso.matriz-fila{grid-template-columns:minmax(120px,1fr) repeat(3,70px)}}
@media(max-width:850px){.equipo-layout{grid-template-columns:1fr}.matriz-cab,.acceso-recurso.matriz-fila{grid-template-columns:minmax(140px,1fr) repeat(3,76px)}}
@media(max-width:520px){.matriz-cab{display:none}.acceso-recurso.matriz-fila{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px;padding:18px 0}.matriz-identidad{grid-column:1/-1}.matriz-opcion{flex-direction:column;gap:8px;padding:10px 0}.matriz-opcion span{display:block;font-size:11px}.roles-funciones,.roles-asignacion{padding:18px}.rol-persona-fila{grid-template-columns:20px 32px minmax(0,1fr)}.rol-persona-fila>.pill{grid-column:3;justify-self:start}.roles-lote-barra .btn{width:100%}}

.lat-plegable-fila{display:flex;align-items:center;gap:2px}
.lat-plegable-fila>.lat-plegable-cab{flex:1;min-width:0;width:auto}
.lat-plegable-acciones{display:flex;align-items:center;gap:4px;padding-right:8px}
.lat-plegable-acciones .lat-plegable-accion{border:0;background:transparent;cursor:pointer}
.lat-plegable-acciones .lat-plegable-accion:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* Administración de grupos: identidad y personas en una sola superficie. */
.grupo-editor{width:min(720px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:0;border-radius:16px;background:var(--panel);color:var(--tinta);box-shadow:var(--superficie-sombra);padding:24px;margin:auto}
.grupo-editor::backdrop{background:#00183c55}.grupo-editor>header{display:flex;justify-content:space-between;gap:16px;margin-bottom:24px}.grupo-editor h2{font-size:22px}.grupo-editor p,.grupo-miembro small{font-size:12px;color:var(--tinta-3);line-height:1.6}.grupo-editor h3{font-size:14px}
.grupo-identidad{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}.grupo-foto{position:relative;width:64px;height:64px;flex-shrink:0;border:0;border-radius:16px;background:var(--activo);color:var(--tinta);cursor:pointer;display:grid;place-items:center}.grupo-foto>img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.grupo-foto>svg{width:28px;height:28px}.grupo-foto>span{position:absolute;right:-4px;bottom:-4px;padding:4px;border-radius:50%;background:var(--panel);display:flex}.grupo-foto>span svg{width:14px;height:14px}
#grupo-nombre-form{flex:1;min-width:180px}#grupo-nombre-form label{display:block;font-size:12px;margin-bottom:8px}#grupo-nombre-form>div{display:flex;gap:8px}#grupo-nombre{min-width:0;width:100%;border:1px solid var(--linea);border-radius:8px;padding:10px;background:var(--panel);color:var(--tinta);font:inherit}
.grupo-miembro{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linea)}.grupo-miembro b,.grupo-miembro small{display:block}.grupo-miembro b{font-size:13px}.grupo-miembro .lat-icono{width:auto;min-width:32px;padding:6px}.grupo-anadir-personas{padding:18px;background:var(--activo);border-radius:12px;margin-top:20px}.grupo-anadir-personas>label{display:flex;align-items:center;gap:10px;padding:12px 0}.grupo-anadir-personas .acciones{margin-top:14px}.grupo-editor [role=status]{color:var(--rojo)}
@media(max-width:520px){.grupo-editor{padding:18px}.grupo-miembro{grid-template-columns:30px minmax(0,1fr) auto;gap:8px}.grupo-miembro>[data-grupo-rol]{grid-column:2;grid-row:2;justify-self:start}.grupo-miembro>[data-grupo-quitar]{grid-column:3;grid-row:1/3}.grupo-editor .bloq-cab{flex-wrap:wrap;gap:12px}}

/* Los controles de selección conservan foco visible con teclado. */
input:is([type=checkbox],[type=radio]):focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.grupo-editor .btn,.grupo-editor input{min-height:36px}
@media(pointer:coarse){.lat-plegable-acciones .lat-plegable-accion{width:28px;height:32px}.grupo-editor .lat-icono{min-width:36px;min-height:36px}}
.tab-cara{display:inline-flex;align-items:center;width:18px;height:18px;border-radius:50%;overflow:hidden;flex-shrink:0}.tab-cara img{width:100%;height:100%;object-fit:cover}

/* Vista previa de página compartida: cliente, Documentos e Interno. */
.pagina-tarjeta{display:block;flex:0 0 240px;width:240px;min-height:0;padding:0;gap:0;border:0;border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s}
.pagina-tarjeta:hover{transform:translateY(-3px);box-shadow:0 9px 25px #172a4320}
.pv-vista{display:block;height:150px;padding:18px 22px 0;position:relative;overflow:hidden;background:linear-gradient(145deg,#edf1f7,#f6f7fa)}
.pv-hoja{display:block;background:#fff;border-radius:4px 5px 0 0;min-height:220px;padding:19px 20px;box-shadow:0 1px 8px #20355012;transform:rotate(-1.5deg);transform-origin:bottom center;transition:transform .2s}
.pagina-tarjeta:hover .pv-hoja{transform:rotate(0) translateY(-3px)}
.pv-titulo{display:block;font-size:12px;line-height:1.45;font-weight:680;color:#526071;margin-bottom:12px}
.pv-texto{display:block;font-size:10px;line-height:1.9;color:#929ba9;overflow-wrap:anywhere}
.pv-vista:after{content:'';position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(transparent,#f0f3f8)}
.pv-nombre{display:flex;align-items:center;gap:8px}
.pagina-tarjeta .pv-icono{display:grid;place-items:center;flex:0 0 20px;width:20px;height:22px;margin:0;color:#647f9d}
.pagina-tarjeta .pv-icono svg{width:19px;height:19px}.pagina-tarjeta .pv-nombre .pv-icono .icono-elegido{font-size:18px}
.pv-pie{display:block;position:relative;padding:14px 34px 15px 16px;min-height:76px}
.pagina-tarjeta .pv-pie b{display:block;min-width:0;font-size:14px;line-height:1.45;font-weight:550;color:var(--tinta);white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:unset;overflow:visible}
.pagina-tarjeta .pv-pie small{display:block;margin-top:7px;font-size:11px;color:var(--tinta-3);overflow-wrap:anywhere}
.pv-abrir{position:absolute;right:14px;top:15px;font-size:16px;color:#9ba5b2}
.documentos-paginas{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;align-items:start}
.cliente-resumen .cp-pages{align-items:stretch;gap:20px;padding-bottom:14px}
@media(prefers-reduced-motion:reduce){.pagina-tarjeta,.pv-hoja{transition:none}.pagina-tarjeta:hover,.pagina-tarjeta:hover .pv-hoja{transform:none}}
@media(max-width:600px){.documentos-paginas{grid-template-columns:1fr}.pagina-tarjeta{flex-basis:240px;width:240px}.documentos-paginas .pagina-tarjeta{width:100%}}

/* Interno: espacio flexible, con Agencia en la raíz. */
.interno-flexible{max-width:1500px;margin:0 auto;padding:30px 36px 60px}.interno-flexible>section{margin-top:32px}.interno-seccion-cab{display:flex;align-items:center;gap:9px;margin-bottom:18px}.interno-seccion-cab h2{font-size:14px;font-weight:550;margin:0}.interno-seccion-cab>span{font-size:12px;color:var(--tinta-3)}.interno-flexible .carpetas{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:18px}.interno-flexible .carp{background:none;box-shadow:none;border:0;max-width:200px}.interno-flexible .carp .fig{display:block;max-width:165px;margin:auto}.interno-flexible .carp .nom{white-space:normal;line-height:1.45}.interno-flexible .documentos-paginas{gap:22px}.interno-vacio{color:var(--tinta-3);padding:40px 0}@media(max-width:650px){.interno-flexible{padding:20px 16px 40px}.interno-flexible .carpetas{grid-template-columns:repeat(2,minmax(0,1fr))}.interno-flexible .cabecera{align-items:center}}

.interno-recurso{position:relative;min-width:0}.interno-recurso>.pagina-tarjeta{width:100%}.interno-recurso>.documento-archivo{width:100%;height:100%}.interno-menu{position:absolute;right:8px;top:8px;z-index:3;background:var(--panel);box-shadow:var(--sombra);border-radius:8px;opacity:0}.interno-recurso:hover .interno-menu,.interno-recurso:focus-within .interno-menu{opacity:1}@media(hover:none){.interno-menu{opacity:1}}

/* ── Otras instancias ─────────────────────────────────────────────────────
   Una agencia con su propio servidor cambia el primario y el acento, y nada
   más: el resto de la interfaz es gris igual. El servidor pone la marca de la
   puerta en `<html data-marca>` (ver lib/instancia.js). */
html[data-marca="21nova"]{
  --primario:#055a5b; --acento:#055a5b; --acento-b:#e5eeeb; --acento-borde:#b9d3cd; --acento-luz:#4f9c95}
html[data-marca="21nova"][data-tema="oscuro"]{
  --primario:#e5eeeb; --primario-txt:#044546; --acento:#5fbcae; --acento-b:#12302d; --acento-borde:#1f4a45; --acento-luz:#1f5c55}

/* Ventana de imagen del cliente: vista previa arriba, zona grande para
   arrastrar/elegir/pegar, y la dirección como alternativa. */
.img-cli-cab{display:flex;align-items:center;gap:14px;margin:4px 0 16px}
.img-cli-cab .avc.img-cli-vista{width:56px;height:56px;border-radius:12px;font-size:18px;flex:none}
.img-cli-cab p{margin:0;font-size:12px;color:var(--tinta-3);line-height:1.5}
.img-cli-zona{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:22px 16px;
  border:1.5px dashed var(--linea-2);border-radius:12px;background:transparent;color:var(--tinta-2);cursor:pointer;
  transition:border-color .15s,background .15s}
.img-cli-zona svg{width:22px;height:22px;transform:rotate(180deg);color:var(--tinta-3);margin-bottom:4px}
.img-cli-zona b{font-size:13px;font-weight:550;color:var(--tinta)}
.img-cli-zona span{font-size:12px;color:var(--tinta-3)}
.img-cli-zona:hover,.img-cli-zona.encima{border-color:var(--acento);background:var(--azul-b)}
.img-cli .btn[disabled]{opacity:.45;cursor:default}

/* Reuniones: lista por meses, sin cajas de cifras (14-oct-2026). */
.reu-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.reu-cab h1{margin:0}
.reu-cab .sub{margin-top:4px}
.reu-mes{font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);margin:22px 2px 8px}
.reu-mes:first-of-type{margin-top:0}
.reu-lista{background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;overflow:hidden}
.reu-lista>button{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto 16px;align-items:center;gap:14px;
  width:100%;padding:13px 16px;border-bottom:1px solid var(--linea);text-align:left;background:none;transition:background .12s}
.reu-lista>button:last-child{border-bottom:0}
.reu-lista>button:hover{background:var(--hover)}
.reu-fecha{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:8px;background:var(--panel-2);border:1px solid var(--linea)}
.reu-fecha b{font-size:16px;line-height:1;font-weight:680;color:var(--tinta)}
.reu-fecha small{font-size:10px;line-height:1;margin-top:3px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.03em}
.reu-txt{min-width:0}
.reu-txt>b{display:block;font-size:13px;font-weight:550;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reu-txt>small{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11px;color:var(--tinta-3);min-width:0}
.reu-txt>small>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reu-caras{display:flex;gap:3px;flex:none}
.reu-caras>span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:680;
  letter-spacing:-.02em;background:var(--azul-b);color:var(--azul)}
.reu-acc{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--tinta-3);font-variant-numeric:tabular-nums;min-width:30px;justify-content:flex-end}
.reu-acc svg{width:13px;height:13px}
.reu-lista>button>i{display:flex;color:var(--tinta-3)}
.reu-lista>button>i svg{width:15px;height:15px;transform:rotate(-90deg)}
@media(max-width:620px){
  .reu-cab{flex-direction:column;align-items:stretch}
  .reu-lista>button{grid-template-columns:40px minmax(0,1fr) auto;padding:12px}
  .reu-lista .pill,.reu-lista>button>i{display:none}
}

/* Accesos del cliente: claves guardadas arriba, datos de acceso debajo (14-oct-2026). */
.acc{max-width:820px}
.acc-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.acc-cab h2{margin:0;font-size:18px}
.acc-cab p{margin:4px 0 0;font-size:13px;color:var(--tinta-3)}
.acc-nota{display:flex;align-items:center;gap:8px;margin:0 0 22px;padding:10px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--linea);font-size:12px;color:var(--tinta-2);line-height:1.5}
.acc-nota svg{width:15px;height:15px;flex:none;color:var(--tinta-3)}
.acc-sec{font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);margin:22px 2px 8px}
.acc-sec:first-of-type{margin-top:0}
.acc-lista{background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;overflow:hidden}
.acc-fila{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--linea)}
.acc-fila:last-child{border-bottom:0}
.acc-ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--panel-2);
  border:1px solid var(--linea);color:var(--tinta-3)}
.acc-ico svg{width:15px;height:15px}
.acc-txt{flex:1;min-width:0}
.acc-txt b{display:block;font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-txt small{display:block;margin-top:3px;font-size:11px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-txt code{font-size:11px;background:none;padding:0;color:var(--tinta-3)}
.acc-valor{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.12em;color:var(--tinta-3)}
.acc-acciones{display:flex;gap:6px;flex:none}
.acc-borrar{padding-left:8px;padding-right:8px;color:var(--tinta-3)}
.acc-borrar:hover{color:var(--rojo);border-color:var(--rojo)}
.acc-borrar svg{width:14px;height:14px}
.acc-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.acc-datos{background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;padding:14px 16px}
.acc-datos h4{margin:0 0 10px;font-size:13px;font-weight:550}
.acc-datos dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:12px}
.acc-datos dt{color:var(--tinta-3)}
.acc-datos dd{margin:0;color:var(--tinta);overflow-wrap:anywhere}
@media(max-width:620px){
  .acc-cab{flex-direction:column;align-items:stretch}
  .acc-fila{flex-wrap:wrap}
  .acc-valor{display:none}
  .acc-acciones{width:100%;justify-content:flex-end}
}
.autom-cliente-sec{font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);margin:22px 2px 8px}
.autom-cliente-sec:first-of-type{margin-top:4px}

/* Estado del sistema (14-oct-2026): motores y avisos, nada más. */
.est-pagina{max-width:820px}
.est-sec{font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);margin:24px 2px 8px}
.est-motores,.est-avisos{background:var(--panel);border:1px solid var(--linea-2);border-radius:12px;overflow:hidden}
.est-motor{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--linea)}
.est-motor:last-child{border-bottom:0}
.est-motor>div{flex:1;min-width:0}
.est-motor b{display:block;font-size:13px;font-weight:550}
.est-motor small{display:block;margin-top:2px;font-size:12px;color:var(--tinta-3)}
.est-punto{width:9px;height:9px;border-radius:50%;flex:none;background:var(--tinta-3)}
.est-punto.bien{background:var(--verde,#1f9d55)}.est-punto.dudoso{background:var(--ambar,#d08a0b)}.est-punto.mal{background:var(--rojo)}
.est-txt{font-size:12px;font-weight:550;color:var(--tinta-3)}
.est-txt.bien{color:var(--verde,#1f9d55)}.est-txt.dudoso{color:var(--ambar,#b37400)}.est-txt.mal{color:var(--rojo)}
.est-aviso{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linea);font-size:13px;line-height:1.55;color:var(--tinta-2)}
.est-aviso:last-child{border-bottom:0}
.est-aviso svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ambar,#b37400)}
.est-ok{padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--linea-2);font-size:13px;color:var(--tinta-3)}

.cf-fecha{display:flex;gap:8px;align-items:center}.cf-fecha input{flex:1;min-width:0}
.mcp-grupo{display:flex;align-items:center;gap:8px;padding:14px 14px 6px;font-size:11px;font-weight:550;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-3);border-bottom:1px solid var(--linea)}
.mcp-grupo b{font-weight:550;color:var(--tinta-3);letter-spacing:0}
#mcp-lista .integra-clave small:not(.mcp-resultado){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-tipo{margin-left:6px;font-size:11px;font-weight:550;color:var(--tinta-3);background:var(--panel-2);border:1px solid var(--linea);
  border-radius:4px;padding:1px 6px}
#mcp-lista .caja-acciones .btn{background:none;border-color:transparent;color:var(--tinta-2)}
#mcp-lista .caja-acciones .btn:hover{background:var(--hover);border-color:var(--linea)}
#mcp-lista .caja-acciones [data-mcp-retirar]:hover{color:var(--rojo)}

/* Iconos que no tenían tamaño y salían enormes (14-oct-2026). */
.bk-img-zona svg{width:20px;height:20px}
.bk-doc svg{width:18px;height:18px;flex:none}
.nada>svg{width:20px;height:20px;display:block;margin:0 auto 8px;color:var(--tinta-3)}
.vacio code,.nota code{overflow-wrap:anywhere}

/* A pantalla completa, el menú de @ mide lo mismo que la caja de escribir: iba
   de lado a lado de la pantalla (14-oct-2026). */
.copiloto.pantalla .copi-menciones{left:max(24px,calc((100% - 820px)/2));right:max(24px,calc((100% - 820px)/2))}
@media(max-width:900px){.copiloto.pantalla .copi-menciones{left:14px;right:14px}}
.copi-m-ico .agente-av{width:22px;height:22px}
/* Mensajes entre personas: la caja de escribir con el mismo ancho que la de IA. */
.canal-compositor{width:calc(100% - 40px);max-width:820px;margin-left:auto;margin-right:auto}
.canal-escribiendo{width:calc(100% - 40px);max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.canal-compositor,.canal-escribiendo{width:calc(100% - 16px)}}
/* Y los mensajes en la misma columna que la caja, como en IA. */
.canal-mensajes{padding-left:max(20px,calc((100% - 820px)/2));padding-right:max(20px,calc((100% - 820px)/2))}
@media(max-width:700px){.canal-mensajes{padding-left:8px;padding-right:8px}}
/* Clases que se usaban sin regla (14-oct-2026). */
.muted{color:var(--tinta-3)}
.cart-barra{display:flex;justify-content:flex-end;margin-bottom:10px}
.cart-total td{font-weight:550;border-top:1px solid var(--linea-2)}
.cel-equipo{white-space:nowrap}
.es-borrar:hover{color:var(--rojo)}

/* ══ DASHBOARDS EN MÓVIL Y TABLETA (15-oct-2026, Javier) ════════════════════
   «Los dashboards se ven fatal en móvil y en tablet.» Lo que fallaba, medido
   a 390, 768 y 1024 px: las fichas de fatiga se salían por la derecha y daban
   scroll horizontal a toda la página; la tabla en fichas desbordaba la tarjeta;
   los botones de la cabecera se encogían a 24 px; los menús de fechas se iban
   fuera de la pantalla; y arrastrar el dedo por un gráfico no desplazaba.
   Va todo junto y al final a propósito: son ajustes de tamaño sobre reglas que
   viven más arriba, y tienen que ganarles sin subir especificidad. En
   escritorio con ratón no cambia nada. */

/* El icono de la pestaña «Cartera» no tenía tamaño propio: el botón se medía
   antes que el SVG y el nombre salía cortado en «C…», en todas las pantallas. */
.cart-tab>svg{width:16px;height:16px;flex:none}
.cart-tab>span{min-width:0}

/* Las fichas de fatiga, en una columna que SÍ puede encoger: sin `minmax(0,…)`
   la rejilla medía lo que el nombre más largo del anuncio, que no se parte, y
   empujaba la página entera 100 px a la derecha. */
.dash-fat-lista{grid-template-columns:minmax(0,1fr)}

/* Un gráfico con `touch-action:none` se tragaba el gesto: en el móvil, el dedo
   que caía encima de una serie ya no desplazaba la página. En vertical se
   desplaza; en horizontal sigue saliendo el dato bajo el dedo. */
.dash-gr{touch-action:pan-y}

/* ── Tableta (hasta 1100 px) ─────────────────────────────────────────────
   El lienzo ya deja su margen; la cartera sumaba otros 38 px por lado y en
   un iPad vertical se comía una quinta parte del ancho. */
@media (max-width:1100px){
  .cartera{padding-left:0;padding-right:0}
  .cart-tira{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}
/* En una tableta en vertical media fila son 290 px: el anillo dejaba la leyenda
   en una columna de 40 px con los porcentajes partidos, y las tablas de media
   fila se desplazaban a lo ancho. Las cifras siguen de dos en dos; el resto de
   bloques, a lo ancho. */
@media (max-width:900px){
  .dash-w:not([data-tipo="cifra"]){grid-column:1/-1}
}
/* Y el reparto mira SU ancho, no el de la ventana: en un iPad en horizontal
   cabe a media fila, pero justo. Por debajo de 440 px el anillo va encima. */
.dash-reparto{container-type:inline-size}
@container (max-width:440px){
  .dash-reparto-cuerpo{flex-direction:column;align-items:stretch;gap:14px}
  .dash-donut{align-self:center}
}

/* ── Móvil (hasta 620 px, el mismo corte que la rejilla de bloques) ──────── */
@media (max-width:620px){
  /* Captación ya tiene su propia rejilla: un solo margen a cada lado. */
  .lienzo:has(.dash-informe-frame[data-captacion]){padding-left:10px;padding-right:10px}
  .lienzo.cliente>#panel:has(.dash-informe-frame[data-captacion]){padding-left:10px;padding-right:10px}
  .dash:has(.dash-informe-frame[data-captacion]){gap:12px}
  .dash:has(.dash-informe-frame[data-captacion]) .dash-fuentes{font-size:11px;overflow-wrap:anywhere}
  .cartera.con-cliente:has(.dash-informe-frame[data-captacion]) .cart-cuerpo{margin-top:12px}
  .cartera{padding-top:8px}
  .cart-cab h1{font-size:20px}
  /* Cabecera: el título arriba y debajo, a lo ancho, los dos filtros de fecha
     repartiéndose la fila; los iconos en la fila siguiente. Antes se apiñaban
     en una sola fila que no cabía y el navegador encogía los botones. */
  .dash-cabecera{align-items:stretch;gap:12px}
  .dash-cabecera>div:first-child{min-width:0}
  .dash-acciones{width:100%;flex-wrap:wrap;gap:6px}
  .dash-acciones>.btn.solo-icono{flex:none}
  .dash-filtros{order:-1;flex:1 1 100%;justify-content:flex-start;display:flex}
  .dash-drop{flex:1 1 0;min-width:0}
  .dash-drop>summary{width:100%;justify-content:space-between;overflow:hidden}
  /* El menú se abre hacia la derecha y a lo ancho de su pastilla: anclado a
     la derecha, el de la izquierda se salía de la pantalla. */
  .dash-drop-menu{left:0;right:auto;min-width:100%}
  .dash-fechas-custom,.dash-comp-custom{flex:1 1 100%;flex-wrap:wrap}
  .dash-fechas-custom input[type=date],.dash-comp-custom input[type=date]{flex:1 1 0;min-width:0}

  /* Las cifras, de dos en dos: una por fila eran cuatro pantallas de
     tarjetas para leer cuatro números. Los demás bloques siguen a lo ancho. */
  .dash-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-w,.dash-w[data-ancho]{grid-column:1/-1}
  .dash-w[data-tipo="cifra"]{grid-column:span 1}
  .dash-tarjeta{padding:12px 14px 0}
  .dash-tarjeta .dash-chispa{width:calc(100% + 28px);margin:10px -14px -1px}
  .dash-cifra{font-size:20px;overflow-wrap:anywhere}
  .dash-panel{padding:14px 14px 16px}

  /* La tabla en fichas: dos columnas que pueden encoger, y la etiqueta ENCIMA
     del valor. Con etiqueta y valor en la misma línea, «Visitas a la landing»
     y «3.000» no cabían en media ficha y el valor salía por fuera del borde. */
  .dash-tabla tbody tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
  .dash-tabla td{flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:1px;padding:5px 0;min-width:0}
  .dash-tabla td::before{line-height:1.3}
  .dash-tabla td:first-child{flex-direction:row}
  .dash-tabla td>span{overflow-wrap:anywhere}
  /* El nombre de un anuncio es una sola palabra con guiones bajos: sin
     permiso para partirse, desbordaba la ficha. */
  .dash-n>span{overflow-wrap:anywhere;min-width:0}
  /* En la cartera la fila es un cliente: el pie (media y total) no cabe como
     ficha y se lee mejor en el escritorio. */
  .cart-tabla tfoot{display:none}
}
@media (max-width:360px){
  .dash-w[data-tipo="cifra"]{grid-column:1/-1}
}

/* ── Táctil: objetivos de 40 px ───────────────────────────────────────────
   Con el dedo, un icono de 32 px junto a otro se falla. `pointer:coarse` y no
   el ancho: un iPad en horizontal mide 1024 y se usa con el dedo, y una
   ventana estrecha de escritorio se sigue usando con ratón. */
@media (pointer:coarse){
  .dash-acciones .btn.solo-icono{width:40px;height:40px}
  .dash-drop>summary{min-height:40px}
  .dash-drop-menu button{min-height:40px}
  .dash-fechas-custom input[type=date],.dash-comp-custom input[type=date],
  .dash-fechas-custom .btn,.dash-comp-custom .btn{min-height:40px}
  .dash-pestanas button{min-height:40px}
  .dash-nueva{width:40px;height:40px}
  .dash-leyenda button{min-height:36px;padding:6px 12px}
  .cart-tab{min-height:40px}
  .cart-rango select,.cart-rango input{min-height:40px}
  .cart-barra .btn{min-height:40px}
  /* El enlace «volcar histórico» es texto: crece la zona de toque sin mover
     la línea. */
  .dash-volcar{padding:11px 0;margin:-11px 0}
}

/* Referencias compartidas entre personas: enlazan el documento original. */
.mensaje-documento{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;margin:2px 2px 2px 0;border:1px solid var(--linea);border-radius:7px;background:var(--panel);color:var(--tinta-2);font-size:12px;line-height:1.5;text-decoration:none;vertical-align:middle;white-space:normal}
.mensaje-documento svg{width:14px;height:14px;flex:none}
.mensaje-documento span{min-width:0;overflow-wrap:anywhere}
.mensaje-documento:hover{color:var(--acento);border-color:var(--acento)}
.mensaje-documento:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.canal-editor .mensaje-documento{cursor:default;user-select:all}
.documento-selector{width:min(560px,calc(100vw - 24px));max-height:85dvh;margin:auto;padding:0;border:1px solid var(--linea);border-radius:16px;color:var(--tinta);background:var(--panel);box-shadow:var(--sombra)}
.documento-selector::backdrop{background:#0006}
.documento-selector[open]{display:flex;flex-direction:column}
.documento-selector header,.documento-selector footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;flex:none}
.documento-selector h2{font-size:18px;margin:0}
.documento-selector header button{display:grid;place-items:center;width:36px;height:36px;border-radius:8px}
.documento-selector header svg{width:18px;height:18px}
.documento-selector footer{font-size:12px;color:var(--tinta-3);border-top:1px solid var(--linea)}
.documento-selector-filtros{display:grid;gap:12px;padding:0 20px 16px;flex:none}
.documento-selector label{display:grid;gap:5px;font-size:12px;color:var(--tinta-2)}
.documento-selector input,.documento-selector select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px 10px;font:inherit;font-size:16px;color:var(--tinta);background:var(--fondo);border:1px solid var(--linea);border-radius:8px}
.documento-selector-resultados{min-height:100px;overflow-y:auto;padding:0 10px 12px;border-top:1px solid var(--linea)}
.documento-selector-resultados p{padding:12px 10px;font-size:13px;color:var(--tinta-3)}
.documento-selector-fila{display:flex;align-items:center;gap:10px;width:100%;padding:12px 10px;border-radius:8px;text-align:left}
.documento-selector-fila:hover,.documento-selector-fila:focus-visible{background:var(--hover)}
.documento-selector-fila>svg{width:18px;height:18px;flex:none;color:var(--tinta-3)}
.documento-selector-fila span{min-width:0}
.documento-selector-fila b,.documento-selector-fila small{display:block;overflow-wrap:anywhere}
.documento-selector-fila b{font-size:13px;font-weight:550}
.documento-selector-fila small{margin-top:4px;font-size:11px;color:var(--tinta-3)}

/* El aviso, para leerlo entero (verAviso en app.js). En la lista va cortado a
   tres líneas; aquí se ve completo y, si viene del informe diario, por
   apartados en vez de un párrafo de punto y coma. */
.notif-veces{font-style:normal;font-weight:550;font-size:11px;color:var(--tinta-3)}
.aviso-lector{width:min(620px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:0;border-radius:16px;background:var(--panel);color:var(--tinta);box-shadow:var(--superficie-sombra);padding:24px;margin:auto}
.aviso-lector::backdrop{background:#00183c55}
.aviso-lector>header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.aviso-lector h2{font-size:18px;line-height:1.35;margin:6px 0 4px}.aviso-lector header p{font-size:12px;color:var(--tinta-3)}
.aviso-lector-cuerpo{font-size:14px;line-height:1.6;color:var(--tinta-2)}
.aviso-lector-cuerpo h3{font-size:13px;color:var(--tinta);margin:16px 0 6px}.aviso-lector-cuerpo h3:first-child{margin-top:0}
.aviso-lector-cuerpo ul{margin:0;padding-left:18px}.aviso-lector-cuerpo li{margin:3px 0;overflow-wrap:anywhere}
.aviso-lector-texto{white-space:pre-wrap;overflow-wrap:anywhere}.aviso-lector-vacio{color:var(--tinta-3)}
.aviso-lector .acciones{display:flex;justify-content:flex-end;margin-top:22px}
@media(max-width:520px){.aviso-lector{padding:18px}}

/* La ventana donde se escribe una clave que pide la IA (copiloto.js,
   ventanaCredencial). Va sobre la del lector de avisos: mismo marco. */
.copi-credencial-form{display:flex;flex-direction:column;gap:10px}
.copi-credencial-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tinta-2)}
.copi-credencial-form input[name=valor]{font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px 12px;border:1px solid var(--linea);border-radius:12px;background:var(--panel);color:var(--tinta)}
.copi-credencial-form .copi-credencial-ver{flex-direction:row;align-items:center;font-size:12px;color:var(--tinta-3)}
.copi-credencial-error{min-height:1em;font-size:12px;color:var(--rojo)}
.copi-credencial-ventana .acciones{gap:8px}
.copi-credencial-etiqueta{font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3)}
.copi-credencial .copi-pregunta-nota{color:var(--tinta-2)}
/* El aviso de «esto parece una clave», encima de la caja de escribir. */
.copi-aviso-clave{margin:0 0 8px;padding:10px 12px;border:1px solid var(--linea);border-radius:12px;background:var(--panel);font-size:13px;color:var(--tinta-2)}
.copi-aviso-clave p{margin:0 0 8px;line-height:1.45}.copi-aviso-clave b{color:var(--tinta)}
.copi-aviso-clave div{display:flex;flex-wrap:wrap;gap:6px}
.copi-credencial-form select,.copi-credencial-form input:not([type=checkbox]):not([name=valor]){font:inherit;padding:8px 10px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);color:var(--tinta)}
/* Desplegable de varias con buscador (menu-varios.js) */
.menu-varios{display:flex;flex-direction:column;padding:6px;max-height:340px}
.menu-varios .mv-buscar{flex:none;width:100%;box-sizing:border-box;margin:0 0 6px;padding:7px 9px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);color:var(--tinta);font:inherit;font-size:13px;outline:none}
.menu-varios .mv-buscar:focus{border-color:var(--linea-2)}
.menu-varios .mv-lista{overflow-y:auto;min-height:0}
.menu-varios .mv-vacio{margin:6px 9px;font-size:12px;color:var(--tinta-3)}
.menu-varios .persona-av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;overflow:hidden;background:var(--hover);font-size:11px;flex:none}
.menu-varios .persona-av img{width:100%;height:100%;object-fit:cover}
/* Los diálogos de base.js, siempre por encima de cualquier panel o cajón */
.capa-dialogo>.velo{z-index:960}
/* <select> con buscador (select-buscador.js) */
.select-buscador{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);color:var(--tinta);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.select-buscador span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-buscador i{font-style:normal;color:var(--tinta-3);font-size:11px}
.select-buscador:disabled{opacity:.6;cursor:default}
.menu-varios .mv-grupo{padding:8px 9px 3px;font-size:11px;font-weight:600;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.03em}
/* Selector de conversación con buscador (Nuevo mensaje, Crear tarea en…):
   reutiliza el de «Enlazar documento»; las secciones van rotuladas. */
.documento-selector-resultados p.selector-chat-grupo{padding:12px 10px 4px;font-size:11px;font-weight:600;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.03em}
.selector-chat .persona-av{width:30px;height:30px}
.selector-chat .documento-selector-fila b{overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Filtros por nombre en las listas de casillas de personas: `display:flex`
   de las filas pisaba el `hidden` del filtro. */
.dlg-multiple-buscar,.grupo-anadir-buscar{width:100%;box-sizing:border-box;margin:0 0 8px;padding:8px 10px;border:1px solid var(--linea);border-radius:8px;background:var(--panel);color:var(--tinta);font:inherit;font-size:14px}
.dlg-personas>label[hidden],.grupo-anadir-personas>label[hidden]{display:none}
/* Se ven unas 5 personas y el resto con scroll: con 40 no ocupa la pantalla */
.menu-varios{max-height:none}
.menu-varios .mv-lista{max-height:196px;overscroll-behavior:contain}
.menu-varios .persona-av{background:var(--linea-2,#e3e6ea);color:var(--tinta-2);font-weight:600}

/* El portal de ventas en la ficha de un prospecto (21Nova): arriba del todo. */
.ficha-portal{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 14px;margin:0 0 14px;border:1px solid var(--linea);border-radius:12px;background:var(--panel-2)}
.ficha-portal>b{width:100%;font-size:13px}
.ficha-portal>span{width:100%;font-size:12px;color:var(--tinta-3);line-height:1.5}
.ficha-portal input{flex:1 1 180px;min-width:0;padding:8px 10px;border:1px solid var(--linea);border-radius:8px;font:inherit;font-size:12.5px;background:var(--panel);color:var(--tinta)}