/* 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: hairline, sin sombra (la sombra sale al pasar)
       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}
@media(max-width:900px){
  .marco,.marco.plegado{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)}
  .lateral.abierto{display:flex}}

/* ── 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. */
.riel-logo{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;margin-bottom:10px;flex:none}
/* La marca dentro del cuadro: 17 px deja el aire suficiente para que el chevron
   no toque los bordes redondeados. */
.riel-logo img{width:18px;height:18px;display:block}
/* 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. */
.riel-empresa{width:50px;padding:0 1px 5px;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:var(--tinta-3);flex:none;margin-bottom:6px;
  transition:background .12s,color .12s}
.riel-empresa:hover{color:var(--tinta-2)}
.riel-empresa .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}
/* 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}
/* 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%,rgba(0,82,204,.16),transparent 46%),
             radial-gradient(circle at 84% 92%,rgba(0,24,60,.14),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)}
/* 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;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}
/* 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}}
/* EL CAMBIO DE PANTALLA NO ES UN CORTE DE FOTOGRAMA.
   Al navegar, lo único que se mueve es lo que de verdad ha cambiado: el
   contenido entra subiendo seis píxeles. El riel, el lateral y la franja de
   arriba se quedan quietos, y ES ESO lo que hace que parezca una aplicación y
   no una web que recarga —si se mueve todo, el ojo lo lee como una página
   nueva—. Seis píxeles y 220 ms: por encima de eso deja de ser una entrada y
   empieza a ser una espera. El bloque de `prefers-reduced-motion` del final la
   apaga sola. */
@keyframes entra-pantalla{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lienzo.entra{animation:entra-pantalla .22s cubic-bezier(.22,.61,.36,1)}
/* 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)}
.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. */
.clientes-filtros{display:grid;grid-template-columns:minmax(180px,240px) repeat(auto-fit,minmax(140px,1fr));
  align-items:center;gap:8px;margin:-8px 0 16px}
.clientes-filtros .vistas-rapidas{grid-column:1/-1}

/* ── 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:999px;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-redondo svg{width:16px;height:16px}
.copi-redondo.escuchando{background:var(--rojo-b);color:var(--rojo)}
.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}
.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 select{border:1px solid var(--linea-2);border-radius:8px;padding:7px 28px 7px 10px;background:var(--panel);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:1fr}}@media(max-width:600px){.constructor-grid{grid-template-columns:1fr}.clientes-permitidos,.ramas-agente{grid-template-columns: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: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:1fr}}
@media(max-width:850px){.autom-toolbar{align-items:stretch;flex-direction:column}.autom-toolbar .busqueda{max-width:none}.autom-filtros{overflow-x: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-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}
.canal-compositor{margin:0 20px 18px;border:1px solid var(--linea-2);border-radius:12px;box-shadow:var(--sombra);flex:none;background:var(--panel)}
.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-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}}
@media(max-width:700px){.canal-cab{padding:11px 14px}.canal-mensajes{padding:12px 8px}.canal-compositor{margin:0 8px 8px}.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)}
.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}
.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{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:1fr}}@media(max-width:600px){.actividad-resumen{grid-template-columns: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: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}}
@media(max-width:900px){.mensajes-inicio,.equipo-layout{grid-template-columns: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}
@media(max-width:760px){.docs-inicio{padding:22px 18px 60px}.docs-inicio>header{align-items:flex-start;gap:12px}.docs-claves,.docs-colecciones{grid-template-columns: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}
.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)}
.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{margin-left:auto;font-variant-numeric:tabular-nums}
.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}
.tk .m{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ── 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}
.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}

/* ── 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:contain;background:#fff;padding:4px}
.avc:has(img){background:#fff !important;box-shadow:inset 0 0 0 1px var(--linea-2)}
[data-tema="oscuro"] .avc:has(img){background:#f4f4f5 !important}
.avc.sm{width:24px;height:24px;border-radius:8px;font-size:10px}
.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}
.bd-ctrl input{width:170px}

/* 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}
.responsable-tabla{width:100%;border:0;background:transparent;color:var(--tinta);font-size:13px;outline:none}
.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 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-card);overflow:hidden}
.cal .dow{background:var(--panel-2);padding:8px;font-size:11px;font-weight:680;text-transform:uppercase;
  letter-spacing:.05em;color:var(--tinta-3);text-align:center}
.cal .dia{background:var(--panel);min-height:92px;padding:6px 7px}
.cal .dia.fuera{background:var(--panel-2);opacity:.5}
.cal .dia .num{font-size:12px;color:var(--tinta-3);font-variant-numeric:tabular-nums;margin-bottom:4px}
.cal .dia.hoy .num{background:var(--primario);color:var(--primario-txt);border-radius:4px;
  padding:1px 5px;display:inline-block;font-weight:680}
.cal .ev{font-size:11px;line-height:1.35;padding:3px 5px;border-radius:4px;margin-bottom:3px;
  background:var(--azul-b);color:var(--azul);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev.alta{background:var(--rojo-b);color:var(--rojo)}
.cal .ev.hecho{background:var(--verde-b);color:var(--verde);text-decoration:line-through;opacity:.7}

/* ── 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}

/* ── 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)}
.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)}
.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,.18);z-index:90;animation:fundido .16s ease}
@keyframes fundido{from{opacity:0}to{opacity:1}}
.peek{position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);background:var(--panel);
  border-left:1px solid var(--linea-2);box-shadow:-8px 0 40px rgba(16,18,22,.13);z-index:91;
  display:flex;flex-direction:column;animation:entra .22s cubic-bezier(.22,1,.36,1)}
@keyframes entra{from{transform:translateX(100%)}to{transform:translateX(0)}}
.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)}
.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}

/* 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}
.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;cursor:pointer}
.bk-img img{max-width:100%;border-radius:8px;display:block}
.bk-img-vacia{padding:26px;background:var(--panel-2);border:1px dashed var(--linea-2);
  border-radius:8px;color:var(--tinta-3);text-align:center;font-size:14px}
.bk-pie{font-size:13px;color:var(--tinta-3);margin-top:5px}
.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}
/* 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)}
.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 .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: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: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){
  .lateral.abierto::after{content:"";position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;
    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)}
  .marco{display:flex;width:100vw;max-width:100vw;inset:0 0 calc(58px + env(safe-area-inset-bottom)) 0;overflow:hidden}
  /* 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:fixed;z-index:100;left:0;right:auto;width:100vw;max-width:100vw;bottom:0;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"]{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}
  .riel-item .bola{top:2px;right:calc(50% - 22px)}
  .lateral{display:none !important;position:fixed;left:0;right:0;top:0;bottom:calc(58px + env(safe-area-inset-bottom));
    width:min(88vw,340px);z-index:90;box-shadow:var(--sombra-alta);border-right:1px solid var(--linea-2)}
  .lateral.abierto{display:flex !important}
  .lateral.abierto::after{left:100%;bottom:0;background:rgba(16,18,22,.24)}
  .tabs{display:none}
  .barra{min-height:48px;padding:7px 10px;border-bottom-color:var(--linea)}
  #mostrar-lateral{display:grid !important}
  .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. */
  .tabs-fila{padding-top:env(safe-area-inset-top)}
  .chrome-derecha{margin-left:auto;padding-top:10px}
  .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: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}
  .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}
  .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:1fr}
  .docs{margin:-16px -18px -30px}
  .pag-col{padding-left:26px;padding-right:18px}.pag-titulo{font-size:28px;line-height:38px}
  .chat{min-height:calc(100dvh - 155px)}
  .chat-caja{position:sticky;bottom:0;background:var(--panel);padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .peek{width:100vw;max-width:none}.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)}
.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)}
.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: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}}
@media(max-width:1150px){.secciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.secciones{grid-template-columns: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}
.bk-img-vacia .spin{display:inline-block;vertical-align:-2px}
/* 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: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: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}
/* 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)}
.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: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-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: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)}
.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}
/* 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}

@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}
}

/* 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-saludo{text-align:center;margin:var(--e6) auto var(--e5)}
.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. */
.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-saludo h1{font-size:22px}.inicio-compositor{border-radius:12px}}
@media(max-width:820px){.atajos-cols{grid-template-columns:1fr}}
@keyframes aviso-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@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)}

/* 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 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}
/* 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))}
/* 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}
}
@media (hover:none){.copi-fila-x{opacity:1}}
/* 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}
.copi-fila .copi-punto{position:static;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:center;gap:4px;padding:14px 12px 6px 18px}
/* Lo lleno que está el contexto. Callada mientras sobra sitio —un aro gris de
   18 px— y con el número puesto cuando pasa del 70 %, que es cuando decidir
   entre seguir o abrir una conversación nueva empieza a importar. */
.copi-rueda{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px;
  border:0;background:none;border-radius:999px;color:var(--tinta-3);font-size:11px;font-weight:550}
.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.subiendo{color:var(--ambar)}
.copi-rueda.lleno{color:var(--rojo)}
.copi-rueda .cifra{font-variant-numeric:tabular-nums}
.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. Sin `white-space:pre` el
   `text-overflow:ellipsis` recorta lo que estás escribiendo. */
.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);overflow:visible;text-overflow:clip}
.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{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 .copi-ejemplos{text-align:left}
.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-ejemplos{display:grid;gap:7px;margin-top:18px}
.copi-ejemplos button{text-align:left;padding:10px 12px;border:1px solid var(--linea);
  border-radius:12px;background:none;font-size:13px;color:var(--tinta-2);cursor:pointer}
.copi-ejemplos button:hover{border-color:var(--azul);color:var(--tinta);background:var(--panel-2)}

.copi-msg{margin-bottom:22px;font-size:14px;line-height:1.68}
.copi-msg.mio{display:flex;justify-content:flex-end}
.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)}
.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}
.copi-msg.ia .copi-cuerpo table{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 12px}
.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. */
.copi-pasos{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.copi-pasos span{font-size:12px;color:var(--tinta-3);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copi-pasos span::before{content:'· '}

/* 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)}
.copi-caja textarea::placeholder{color:var(--tinta-3)}

/* Contexto que va con la pregunta sin escribirlo */
.copi-chips{display:flex;flex-wrap:wrap;gap:5px}
.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)}
.copi-chip svg{width:12px;height:12px;color:var(--tinta-3)}
/* 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{margin-left:auto;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 b{display:block;font-size:13px;color:var(--tinta)}
.copi-menu small{display:block;font-size:11px;color:var(--tinta-3);margin-top:2px}

/* 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}}

.copi-vacio-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--panel-2);margin:12px auto 16px}
.copi-vacio-ico svg{width:19px;height:19px;color:var(--tinta-3)}
/* 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. */
@keyframes entrar{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

#lienzo > *{animation:entrar .14s ease-out both}

.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-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:12px}
.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:1fr}
  .dash-w,.dash-w[data-ancho="1"],.dash-w[data-ancho="2"],.dash-w[data-ancho="3"]{grid-column:span 1}
}
.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:16px 18px}
.dash-tarjeta h3,.dash-panel h3{margin:0;font-size:12px;font-weight:550;color:var(--tinta-2);
  letter-spacing:.01em;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}
.dash-chispa{display:block;width:100%;height:76px;margin-top:12px;overflow:visible}
.dash-chispa path{fill:none;stroke:var(--acento);stroke-width:1.6;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.dash-pie{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--tinta-2)}
.dash-scroll{overflow-x:auto;margin-top:10px}
.dash-tabla{width:100%;border-collapse:collapse;font-size:13px}
.dash-tabla th{text-align:right;font-weight:550;color:var(--tinta-2);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;padding:0 0 8px}
.dash-tabla th:first-child,.dash-tabla td:first-child{text-align:left}
.dash-tabla td{padding:9px 0;border-top:1px solid var(--linea);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-tabla td:first-child{white-space:normal;padding-right:16px}
.dash-tabla th+th,.dash-tabla td+td{padding-left:18px}
.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:60;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}
/* 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)}
.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}
.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)}
.ico-t{margin-right:7px}

/* ── 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)}

/* ── 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%}
}
.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. */
.dash-pestanas{display:flex;align-items:center;gap:2px;margin-bottom:16px;
  border-bottom:1px solid var(--linea);overflow-x:auto}
.dash-pestanas button{padding:9px 13px 8px;font-size:13px;color:var(--tinta-3);
  border-bottom:2px solid transparent;white-space:nowrap;flex:none}
.dash-pestanas button:hover{color:var(--tinta-2)}
.dash-pestanas button.activo{color:var(--tinta);border-color:var(--tinta);font-weight:550}
.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}