/* ============================================================
   CYVIX — COMPONENTS  (Liquid Glass)
   ============================================================ */

/* ============================================================
   AUTH OVERLAY
   ============================================================ */

/* ============================================================
   AUTH · Login split-screen (estil Legora)
   Esquerra: formulari · Dreta: imatge a tota alçada
   ============================================================ */
#auth-overlay {
  width: 100%;
  height: 100vh;
  background: var(--bg);
}

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--app-padding);
  height: 100%;
  width: 100%;
  padding: var(--app-padding);
}

/* ── Panell esquerre (formulari) · targeta flotant com l'app ── */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
}

.auth-form-wrap {
  width: 100%;
  max-width: 360px;
}

.auth-brand {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--text-1);
  text-align: center;
  margin-bottom: 44px;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
}

.auth-field input {
  width: 100%;
  background: rgba(10, 14, 20, 0.05);   /* gris dels botons */
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 8px 14px;                     /* més fi · consistent */
  font: inherit;
  font-size: var(--text-base);
  color: var(--text-1);
  outline: none;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover);
  -webkit-appearance: none;
}

.auth-field input::placeholder { color: var(--text-3); }

.auth-field input:focus {
  background: rgba(10, 14, 20, 0.05);   /* es manté gris en clicar */
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Pas 2: capçalera "Email" + Cambiar, i caixa grisa amb el correu */
.auth-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.auth-edit {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t-hover);
}
.auth-edit:hover { color: var(--text-1); }
.auth-account-value {
  background: rgba(10, 14, 20, 0.05);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 8px 14px;
  font-size: var(--text-base);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-error {
  font-size: var(--text-sm);
  color: var(--coral);
  min-height: 0;
  text-align: center;
}
.auth-error:empty { display: none; }

.auth-info {
  font-size: var(--text-sm);
  color: var(--text-2);
  text-align: center;
  line-height: 1.45;
}
.auth-info:empty { display: none; }

.auth-submit {
  width: 100%;
  height: 30px;
  margin-top: 12px;
  background: var(--action);
  color: var(--action-text);
  border: none;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  transition: background var(--t-hover), transform var(--t-fast), opacity var(--t-hover);
}
/* mateixa mida de lletra que el camp d'email */
.auth-submit { font-size: var(--text-base); }

.auth-submit:hover { background: var(--action-hover); }
.auth-submit:active { transform: scale(0.985); }

/* Cuenta seleccionada (paso 2) · email + cambiar */
.auth-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-hover);
}
.auth-account:hover { background: var(--bg-2); }
.auth-account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-1);
}
.auth-account-change {
  flex: none;
  color: var(--accent);
  font-weight: 500;
}

/* Enlace "¿Olvidaste tu contraseña?" */
.auth-link {
  align-self: center;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-hover);
}
.auth-link:hover { color: var(--text-1); }

.auth-foot {
  margin: 32px 0 0;
  font-size: var(--text-sm);
  color: var(--text-3);
  line-height: 1.5;
}
.auth-foot-link {
  color: var(--text-2);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-foot-link:hover { color: var(--text-1); }
/* El pie de Ajustes: la política de privacidad, abajo del todo. Sin subrayado
   —ahí va sola, no dentro de una frase—: gris que pasa a negro al pasar el
   cursor, como el resto de los botones de texto de la casa. */
.config-peu { margin: 22px 0 4px; text-align: center; font-size: var(--text-sm); }
.config-peu .auth-foot-link { text-decoration: none; }

/* ── Panell dret (imatge) ── */
.auth-visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* Imatge de fons: desa la foto adjunta a  public/login-photo.jpg
     Fins llavors es veu el degradat càlid de fallback. */
  background-color: #c2774f;
  background-image:
    linear-gradient(180deg, rgba(10,14,20,0.04) 0%, rgba(10,14,20,0.12) 100%),
    url("login-photo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Responsive: amaga la imatge en pantalles estretes ── */
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
}

/* ============================================================
   APP SHELL
   ============================================================ */

#app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  height: 100vh;
  padding: var(--app-padding);
  gap: var(--app-padding);
  overflow: hidden;
  background: transparent;
  align-items: stretch;
}

/* ============================================================
   SIDEBAR — floating glass panel
   ============================================================ */

.sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-collapsed);
  height: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: width var(--t-panel);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  will-change: transform;
  transform: translateZ(0);
}

.sidebar.is-open { width: var(--sidebar-expanded); }

/* Brand · a la dreta hi viu el botó de plegar el panel */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 14px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Plegat: el nom desapareix del flux i el botó queda centrat al carril */
.sidebar:not(.is-open) .sidebar-brand { justify-content: center; padding: 0; }
.sidebar:not(.is-open) .brand-name { display: none; }
/* Sense marc: el botó es llegeix com una icona més del panel */
.sidebar-toggle-in { border: none; background: none; color: var(--text-3); }
/* La campana general y el plegar, juntos a la derecha del logo */
.brand-accions { display: inline-flex; align-items: center; gap: 2px; }
/* La campana con la misma caja que el botón de plegar (sin ella el icono
   no salía: el botón se quedaba sin tamaño) */
.sidebar-campana {
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  /* El mismo gris que el botón de plegar, que va al lado: heredaba uno más
     claro y los dos iconos no casaban. */
  color: var(--text-2);
  font-size: 17px; cursor: pointer; flex-shrink: 0;
  transition: background var(--t-hover), color var(--t-hover);
}
.sidebar-campana .ti { font-size: 17px; line-height: 1; }
/* Sin relleno nunca: solo pasa de gris a negro, y la campana se balancea
   al pasar el cursor, como pica el martillo del chat */
.sidebar-brand .sidebar-campana,
.sidebar-brand .sidebar-campana:hover,
.sidebar-brand .sidebar-campana:focus,
.sidebar-brand .sidebar-campana:focus-visible,
.sidebar-brand .sidebar-campana:active { background: none; box-shadow: none; border: none; transform: none; }
.sidebar-campana:hover { color: var(--text-1); }
.sidebar-campana:hover .ti, .pjd-avisos-btn:hover .ti-bell {
  display: inline-block;
  transform-origin: 50% 12%;   /* cuelga de arriba, como una campana */
  animation: campana-toca 0.7s ease-in-out;
}
@keyframes campana-toca {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-16deg); }
  50%      { transform: rotate(12deg); }
  75%      { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .sidebar-campana:hover .ti, .pjd-avisos-btn:hover .ti-bell { animation: none; } }
.sidebar-campana .pjd-avisos-n { box-shadow: 0 0 0 2px var(--surface-card); }
.sidebar:not(.is-open) .sidebar-campana { display: none; }
.sidebar-toggle-in:hover { background: rgba(10, 14, 20, 0.05); color: var(--text-1); transform: none; }

.brand-mark {
  width: 28px;
  height: 28px;
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-glow) 100%);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--surface-white);
  flex-shrink: 0;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(45, 106, 79, 0.28), inset 0 1px 1px rgba(var(--glass-rgb),0.3);
}

.brand-name {
  font-family: var(--font-display);
  /* «El tamaño de letra de IURAX hazlo más pequeño, es demasiado grande»
     (1-10-2026). De 18 a 15: sigue siendo el nombre de la casa y el elemento
     más grande de la cabecera, pero deja de competir con el contenido. */
  font-size: 15px;
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  opacity: 0;
  transition: opacity var(--t-panel);
  white-space: nowrap;
}

.sidebar.is-open .brand-name { opacity: 1; }

/* Navigation */
/* Un solo hilo que se desplaza: el logo del despacho, el menú, los
   proyectos recientes, los chats y —al final— lo de administración. Antes
   el logo y los chats se quedaban clavados y solo bajaba el menú. */
.sidebar-scroll {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
/* SOLO PARA NOSOTROS
   Feedback IA, Agent BOPB y Superadmin no son del despacho: son las
   herramientas de casa. Van dentro de un rectángulo gris para que se vea de
   un golpe que eso no lo tiene nadie más. Lo enseña o lo esconde entero
   aplicarPermisos() según el rol. */
/* `nav.` a posta: sin él gana el `padding` de .sidebar-nav, que se declara
   más abajo, y el recuadro se queda sin sus márgenes. */
nav.sidebar-nav-admin {
  margin: var(--sp-3) 8px 0;
  padding: 4px;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);
}
.sidebar-nav-admin.hidden { display: none; }
/* La raya de separación ya no hace falta: el propio rectángulo separa */
.sidebar-nav-admin .sidebar-thin-divider { display: none; }
/* Sobre el gris del recuadro, el de pasar por encima tiene que ser un
   punto más oscuro para que se note */
.sidebar-nav-admin .sidebar-item:hover { background: rgba(10, 14, 20, 0.08); }

.sidebar-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2) 0;
  max-height: none;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.sidebar-divider {
  display: none;
}

/* Thin separator (Nuevo chat / Crear) */
.sidebar-thin-divider {
  height: 1px;
  background: rgba(10, 14, 20, 0.08);
  margin: 8px 12px;
}

/* ── Crear (botón con desplegable, estilo Legora) ── */
.sidebar-crear-wrap {
  position: relative;
}
/* Misma columna que las filas del nav: el icono en una caja de 16px, como
   .sidebar-item .ti, y 9px de padding lateral porque el borde de 1px del
   botón suma — 9 + 1 = los 10 de la fila. */
.sidebar-crear-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 9px;
  background: rgba(var(--glass-rgb), 0.55);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(var(--glass-rgb), 0.8);
  border-radius: var(--r);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.7) inset,
    0 -1px 1px rgba(10, 14, 20, 0.03) inset,
    0 2px 8px rgba(15, 25, 40, 0.06);
  transition: background var(--t-hover), box-shadow var(--t-hover);
}
.sidebar-crear-btn:hover {
  background: rgba(var(--glass-rgb), 0.78);
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.8) inset,
    0 -1px 1px rgba(10, 14, 20, 0.04) inset,
    0 4px 14px rgba(15, 25, 40, 0.1);
}
.sidebar-crear-btn .ti {
  font-size: 16px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-2);
}
/* El chevron no cuenta para la columna: va al extremo opuesto */
.sidebar-crear-btn .sidebar-crear-chev { width: auto; }
.sidebar-crear-label { flex: 1; text-align: left; }
.sidebar-crear-chev { font-size: 13px !important; opacity: 0.5; transition: transform var(--t-hover); }
.sidebar-crear-btn.is-open .sidebar-crear-chev { transform: rotate(180deg); }

.sidebar-crear-dropdown {
  position: fixed;
  background: rgba(var(--glass-rgb), 0.96);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(10, 14, 20, 0.08);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(10, 14, 20, 0.12);
  z-index: 600;
  animation: dropDownIn 130ms ease both;
}
.sidebar-crear-dropdown.hidden { display: none; }
@keyframes dropDownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar-crear-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-1);
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--t-hover);
}
.sidebar-crear-item:hover { background: rgba(10, 14, 20, 0.05); }
.sidebar-crear-item .ti { font-size: 14px; color: var(--text-3); }

/* ── Buscar modal ── */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.10);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 150ms ease both;
  will-change: transform;
  transform: translateZ(0);
}
.search-modal-overlay.hidden { display: none; }

/* ═══ Configuración: página completa dentro del main-area ═══ */
/* EL MISMO BLANCO QUE EL CHAT
   La pantalla se pone DENTRO del rectángulo principal, que es blanco puro
   (--surface-card). Con --bg (#fbfbfb) se veía un punto más gris que todo
   lo de al lado. */
.config-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--surface-card);
  z-index: 900;
  display: flex;
  flex-direction: column;
  animation: fadeIn 150ms ease both;
  will-change: transform;
  transform: translateZ(0);
}
.config-modal-overlay.hidden { display: none; }

/* EL RASTRO, COMO EN TODAS LAS PANTALLAS
   Va donde el de la barra de arriba —mismo alto de barra y mismo margen—
   porque esta pantalla tapa esa barra, y con sus mismas clases (.crumb),
   así que la letra y los colores son los de siempre sin repetirlos aquí.
   Antes era un «← Volver» gris con flecha, que no se parecía a nada. */
.config-ruta {
  position: absolute;
  top: 0;
  left: var(--sp-5);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* EN EL CENTRO DE LA PANTALLA, NO DE LO QUE SOBRA
   La columna de apartados se saca del flujo y se pega a la izquierda, así
   el bloque de fichas se centra en TODO el rectángulo —con la barra lateral
   puesta y sin ella— y no en el hueco que deja el menú.
   Por debajo de 1240 no cabe (760 del bloque + 240 del menú a cada lado):
   ahí se vuelve a las dos columnas de toda la vida. */
.config-modal {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
@media (min-width: 1240px) {
  .config-modal { display: block; position: relative; }
  .config-sidebar { position: absolute; top: 0; left: 0; width: 240px; }
  .config-content { height: 100%; }
}

/* Los apartados, en columna: el mismo alto, la misma letra y el mismo gris
   que el menú lateral de la casa. */
.config-sidebar {
  background: transparent;
  padding: var(--topbar-h) 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.config-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r);
  background: none;
  border: none;
  color: var(--text-menu);
  font-family: var(--font);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-hover), color var(--t-hover);
}
.config-nav-item:hover { background: none; color: var(--text-1); }
/* REGLA DE LA CASA: lo seleccionado se dice con la LETRA, no con un
   relleno. Igual que el menú lateral: el gris pasa a tinta y ya está. */
.config-nav-item.active { background: none; color: var(--text-1); }
.config-nav-item .ti { font-size: 16px; flex-shrink: 0; }

.config-section { display: none; }
.config-section.active { display: block; }

.config-modal-close { display: none; }

/* LA BARRA DE SCROLL, AL CANTO
   Quien se desplaza es TODO el ancho, y lo que se centra es el bloque de
   fichas de dentro. Antes el que se desplazaba era el bloque de 760, y su
   barrita gris salía en mitad de la pantalla en vez de pegada al borde. */
.config-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--topbar-h) 0 32px;
  width: 100%;
}
/* El bloque, centrado en todo el rectángulo (con la barra lateral puesta y
   sin ella): lo mismo que antes, pero por dentro. */
.config-section.active {
  max-width: 760px;
  margin-inline: auto;
  padding: 0 48px;
}
.config-content::-webkit-scrollbar { width: 6px; }
.config-content::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }

/* El nombre del apartado, de la misma letra que todo lo demás de la
   pantalla: un título de 22 aquí hacía de portada de algo que solo son
   cuatro datos. */
.config-section-title {
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.4;
  /* Sin descripción debajo (19-9-2026): el aire que la separaba de lo de
     abajo lo da el título */
  margin: 0 0 22px;
}

/* LA TARJETA, LA MISMA QUE LAS DEL CHAT
   Blanca sobre blanco, con el filo finísimo y la sombra suave de
   «Documentos recientes» e «Historial» (.home-panel): se ven sin que haga
   falta pintarlas de gris. */
.config-card {
  background: var(--surface-card);
  border: 1px solid rgba(10, 14, 20, 0.06);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.03), 0 4px 16px rgba(10, 14, 20, 0.04);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

/* QUIÉN ERES
   Foto, nombre y cargo en una sola tarjeta, y a la derecha lo de la foto. */
.config-id { flex-direction: row; align-items: center; gap: 16px; }
.config-id-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
/* EL NOMBRE Y SU LÁPIZ
   El lápiz sale al pasar por encima del nombre y se queda mientras se
   escribe: es lo que dice que eso se puede cambiar. */
/* El lápiz va justo detrás del apellido: el campo se estrecha a lo que
   mide el nombre (lo calcula nomAmple() con el espejo de abajo), no a todo
   el ancho de la tarjeta. */
.config-id-fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.config-id-regla {
  position: absolute; left: -9999px; top: -9999px;
  white-space: pre; visibility: hidden;
  font-family: var(--font-display); font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}
.config-id-llapis {
  flex: 0 0 auto; border: none; background: none; padding: 2px; cursor: pointer;
  color: var(--text-3); font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity var(--t-hover), color var(--t-hover);
}
.config-id-fila:hover .config-id-llapis,
.config-id-fila:focus-within .config-id-llapis { opacity: 1; }
.config-id-llapis:hover { color: var(--text-1); }
/* El nombre se escribe encima, sin caja: solo cuando lo tocas aparece el
   filo. Es un campo, no un rótulo, aunque lo parezca. */
/* Mientras no se pulse el lápiz es un rótulo: ni caja, ni filo, ni cursor
   de texto. La caja sale solo al entrar a escribir. */
.config-id-nom {
  border: 1px solid transparent; background: none; border-radius: var(--r-sm);
  padding: 2px 6px; margin-left: -6px;
  font-family: var(--font-display); font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight); color: var(--text-1);
  outline: none; min-width: 0;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.config-id-nom[readonly] { cursor: default; }
/* La caja solo cuando se está escribiendo. `-fix` es el del despacho, que
   no es un campo: ese nombre lo cambia IURAX, no el despacho. */
.config-id-nom:not([readonly]):not(.config-id-nom-fix) { border-color: var(--border-2); background: var(--surface-card); }
.config-id-sub {
  border: none; background: none; padding: 0; margin: 0;
  font-family: var(--font); font-size: var(--text-sm); color: var(--text-3);
  outline: none; cursor: default; min-width: 0;
}
.config-id-acc { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }

/* CADA COSA, UNA FILA
   A la izquierda qué es (solo el título); a la derecha lo que vale. Las
   filas van pegadas dentro de la misma tarjeta, separadas por un pelo. */
.config-files { padding: 0; gap: 0; }
.config-fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 14px 18px;
  /* Todas de la misma altura, con lo que lleve a la derecha (texto, botón,
     interruptor o la bandera, que es la más alta: 20). Con border-box
     (tokens.css), el relleno y la raya de separación cuentan: 14 + 20 + 14 + 1. */
  min-height: 49px;
}
.config-fila + .config-fila { border-top: 1px solid rgba(10, 14, 20, 0.06); }
.config-fila-txt { min-width: 0; }
.config-fila-et { font-size: var(--text-sm); color: var(--text-1); }
.config-fila-ajuda { font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }
.config-fila-val { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; max-width: 52%; }

/* ── LA FILA DEL USO ────────────────────────────────────────────────────────
   No es una fila de dos lados como las demás: el rótulo y el porcentaje van
   arriba, uno a cada lado, y la barra debajo a todo lo ancho. Se enseña el
   PORCENTAJE y no los tokens porque es lo que se lee de un vistazo: «te queda
   poco» se entiende, «1.284.930 de 3.000.000» hay que pararse a dividirlo. */
.config-fila-us { flex-direction: column; align-items: stretch; gap: 8px; }
.config-us-cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.config-us-pct {
  flex-shrink: 0;
  font-size: var(--text-sm);
  /* El mismo gris que el resto de valores de la columna de la derecha (el
     correo, «Administrador», «Español»): es un dato, no un rótulo. */
  color: var(--text-2);
  font-variant-numeric: tabular-nums;   /* al ir cambiando, no baila */
  /* Los 14 de siempre: «así todas las respuestas acaban en la misma raya»
     (.config-fila-fix y los campos de esta misma hoja). La barra acaba
     donde acaba el número, que es lo que el número cuenta. */
  padding-right: 14px;
}
.config-us-barra {
  height: 6px;
  margin-right: 14px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.08);
  overflow: hidden;
}
/* El azul de la casa: el mismo de los interruptores de esta misma pantalla */
.config-us-plena {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--blau);
  transition: width .35s ease;
}
/* Una muestra no puede parecer un dato: se ve que está apagada */
.config-fila-us.es-mostra .config-us-plena { opacity: .45; }
.config-fila-us .config-fila-ajuda { margin-top: 0; }
[data-theme="dark"] .config-us-barra { background: rgba(235, 235, 245, 0.12); }
/* DENTRO DE UNA FILA, SOLO LA LETRA
   La pastilla gris es para los botones de un diálogo. En una fila de datos
   («Cambiar», «Salir», «Escribir», «Abrir dashboard») basta la palabra:
   gris que pasa a negro al pasar por encima. */
.config-fila-val .config-btn-secondary,
.config-toggle-row .config-btn-secondary {
  background: none; height: auto;
  /* Los mismos 14 de la derecha que «Administrador» o «Añadir»: sin ellos
     la palabra se iba 14 px más a la derecha que las de arriba. */
  padding: 0 14px 0 0;
}
/* La puerta de salir es un icono, y su dibujo no llena la caja de la
   letra: se le quita ese sobrante para que acabe en la misma raya. */
.config-fila-val .config-logout { padding-right: 8px; }
.config-fila-val .config-btn-secondary:hover,
.config-toggle-row .config-btn-secondary:hover { background: none; color: var(--text-1); }

/* SALIR
   El icono de la puerta, el mismo del menú lateral. Al pasar por encima la
   palabra se abre a su derecha —y el icono corre hacia la izquierda— en vez
   de tener ahí un «Salir» suelto todo el rato. */
.config-logout { gap: 0; }
.config-logout i { font-size: 16px; flex: 0 0 auto; }
.config-logout span {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width 0.22s ease, opacity 0.18s ease, margin-left 0.22s ease;
  margin-left: 0;
}
.config-logout:hover span,
.config-logout:focus-visible span { max-width: 70px; opacity: 1; margin-left: 6px; }

/* Lo que no se puede cambiar se lee como texto, no como un campo vacío.
   TODAS LAS RESPUESTAS ACABAN EN LA MISMA RAYA
   El botón de «Cambiar» lleva 14 de relleno por ser una pastilla, así que
   su palabra quedaba 14 más adentro que «Administrador» o «Añadir». Se les
   da el mismo relleno a los demás y las palabras cuadran en columna. */
.config-fila-fix { font-size: var(--text-sm); color: var(--text-2); padding-right: 14px; }
/* El interruptor de la casa, en la misma raya que las demás respuestas
   (14 px antes del canto, como «Administrador» o «Cambiar») */
.config-fila-val .iurax-switch { margin-top: 0; margin-right: 14px; }

/* El país, con su bandera, igual que el chip del chat */
.config-pais { display: inline-flex; align-items: center; gap: 7px; }

/* EL DESPACHO
   El nombre de la casa no se escribe aquí (todavía): es un rótulo, no un
   campo, así que ni filo al pasar por encima ni cursor de texto. */
.config-id-nom-fix { border-color: transparent; padding-left: 0; margin-left: 0; }
.config-id-nom-fix:hover { border-color: transparent; }
/* EL LÁPIZ, ENCIMA DE LA FOTO
   La foto se cambia pulsando la foto: al pasar el cursor se oscurece un
   punto y sale un lápiz. Antes había un botón «Subir foto» al lado que
   decía lo mismo ocupando una esquina de la tarjeta. */
.config-foto-wrap {
  position: relative; flex-shrink: 0; cursor: pointer;
  border-radius: 50%; line-height: 0;
}
.config-foto-wrap:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.config-foto-llapis {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  /* El mismo velo oscuro que el del menú lateral en móvil */
  background: rgba(10, 14, 20, 0.45);
  color: var(--surface-white); font-size: 18px; line-height: 1;
  opacity: 0; transition: opacity var(--t-hover);
}
.config-foto-wrap:hover .config-foto-llapis,
.config-foto-wrap:focus-visible .config-foto-llapis { opacity: 1; }
/* Cada persona: su cara, su nombre y su correo debajo */
.config-persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.config-persona-av { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
/* Nombre · correo, en una línea y del mismo cuerpo */
.config-persona-txt {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font-size: var(--text-sm);
}
.config-persona-nom { color: var(--text-1); white-space: nowrap; }
.config-persona-punt, .config-persona-mail { color: var(--text-3); }
.config-persona-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* UN DIÁLOGO DE LA CASA
   Tarjeta blanca con la sombra de siempre sobre el mismo velo oscuro del
   menú lateral; botones de píldora y campos como los de la pantalla. */
/* El mismo fondo que el buscador: casi transparente y con la pantalla
   difuminada por detrás, en vez de un velo gris macizo. */
.config-dlg-fons {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10, 14, 20, 0.10);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.config-dlg-fons.hidden { display: none; }
.config-dlg {
  width: 100%; max-width: 420px;
  background: var(--surface-card);
  border: 1px solid rgba(10, 14, 20, 0.06);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.03), 0 4px 16px rgba(10, 14, 20, 0.04);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.config-dlg-cap { display: flex; align-items: center; gap: var(--sp-3); }
.config-dlg-tit { font-size: var(--text-sm); color: var(--text-1); flex: 1; min-width: 0; }
/* La cruz es la misma de todos los diálogos (.search-modal-close): mismo
   tamaño, sin fondo y de gris a negro. */
.config-dlg-cap .search-modal-close { flex: 0 0 auto; margin-right: -4px; }
.config-dlg-cos { display: flex; flex-direction: column; gap: 10px; }

/* Dos opciones en una fila de Ajustes (el tipo de respuesta): las pastillas de
   la casa —gris que pasa a negro— y relleno solo la elegida. */
.config-segment { display: inline-flex; align-items: center; gap: 2px; }
.config-seg-btn {
  height: 32px; padding: 0 14px;
  border: none; border-radius: var(--r-pill);
  background: none; color: var(--text-3);
  font-family: var(--font); font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.config-seg-btn:hover { color: var(--text-1); }
.config-seg-btn.is-actiu { color: var(--text-1); background: rgba(10, 14, 20, 0.06); }
.config-seg-btn:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
/* En una pantalla estrecha, el rótulo arriba y las opciones debajo. Con cuatro
   («Complementar con internet»: Siempre · Preguntar · Automático · Nunca) no
   caben al lado: en el móvil se salían por la izquierda y «Siempre» quedaba
   fuera de la pantalla, y las dos de «Tipo de respuesta» tapaban su texto. Con
   200 px de base el rótulo cabe al lado en escritorio y no cambia nada; si no
   cabe, la fila se parte y las pastillas pasan a otra línea si hace falta. */
.config-fila:has(> .config-fila-val > .config-segment) { flex-wrap: wrap; row-gap: 10px; }
.config-fila:has(> .config-fila-val > .config-segment) > .config-fila-txt { flex: 1 1 200px; }
.config-fila-val:has(> .config-segment) { max-width: 100%; }
.config-segment { flex-wrap: wrap; }
/* Dentro del diálogo todo va del mismo cuerpo que los rótulos */
.config-dlg-cos .config-fila-ajuda { font-size: var(--text-sm); line-height: 1.5; }
.config-camp { display: flex; flex-direction: column; gap: 5px; }
.config-camp > span { font-size: var(--text-sm); color: var(--text-3); }
/* EL OJO, DENTRO DEL CAMPO Y SOLO CUANDO HAY ALGO
   Pegado al canto de dentro, a la derecha. No sale hasta que se ha escrito
   algo: con el campo vacío no hay nada que enseñar y además ahí es donde el
   navegador pinta su propia llave. */
.config-camp-caixa { position: relative; display: block; }
.config-camp-caixa > input { width: 100%; padding-right: 34px; }
.config-ull {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: none; place-items: center;
  border: none; background: none; border-radius: 50%;
  color: var(--text-3); font-size: 16px; cursor: pointer;
  transition: color var(--t-hover);
}
.config-camp-caixa.te-text .config-ull { display: grid; }
.config-ull:hover, .config-ull.es-obert { color: var(--text-1); }
.config-camp > input,
.config-camp-caixa > input {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-card); color: var(--text-1);
  font-family: var(--font); font-size: var(--text-sm); outline: none;
  transition: border-color var(--t-hover);
}
.config-camp > input:focus,
.config-camp-caixa > input:focus { border-color: var(--border-2); }
/* «No me acuerdo»: texto pulsable, sin subrayar y sin pinta de botón */
.config-enllac {
  align-self: flex-start; border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: var(--text-sm); color: var(--text-3);
  text-decoration: none;
  transition: color var(--t-hover);
}
.config-enllac:hover { color: var(--text-1); }
.config-dlg-peu { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
/* El aviso, en su propia línea encima de los botones: al lado los partía
   en dos filas en cuanto el texto crecía un poco. */
.config-dlg-peu .config-estat { flex: 1 0 100%; order: -1; }
.config-dlg-peu .config-estat:empty { display: none; }

.config-fila-val input {
  text-align: right; border: 1px solid transparent; background: none;
  /* 14 a la derecha, los mismos que la pastilla de «Cambiar»: así todas
     las respuestas acaban en la misma raya */
  border-radius: var(--r-sm); padding: 0 14px 0 8px; height: 32px; width: 260px; max-width: 100%;
  font-family: var(--font); font-size: var(--text-sm); color: var(--text-2);
  outline: none; transition: border-color var(--t-hover), background var(--t-hover);
  /* El campo no estira la fila: sin la descripción debajo, las filas con
     campo (Email, Número de colegiado) salían más altas que las demás */
  margin-block: -7px;
}
.config-fila-val input:not([readonly]):hover { border-color: var(--border); }
.config-fila-val input:not([readonly]):focus { border-color: var(--border-2); background: var(--surface-card); color: var(--text-1); }
.config-fila-val input[readonly] { cursor: default; }

/* El rótulo de cada grupo de filas */
.config-grup {
  font-size: var(--text-sm); color: var(--text-3);
  margin: var(--sp-5) 0 8px 2px;
}

.config-row { display: flex; align-items: center; gap: 16px; }

/* El color lo pone el de identidad (.is-avatar-c1…5, con !important); aquí
   solo queda el gris de reserva por si aún no se sabe quién ha entrado. */
.config-avatar-big {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--text-3);
  color: var(--surface-card);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  flex-shrink: 0;
}
.config-avatar-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.config-hint { font-size: var(--text-xs); color: var(--text-3); }

.config-select {
  border: 1px solid var(--border);
  background: var(--surface-card);
  border-radius: var(--r-sm);
  padding: 0 12px;
  height: 32px;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  outline: none;
  transition: border-color var(--t-hover);
}
.config-select:focus { border-color: var(--border-2); }

.config-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  /* A sota, el mismo aire que dejan las tarjetas: la del panel de
     administración iba pegada al botón */
  margin: 6px 0 14px;
}
/* «Guardado», «Guardando…» o por qué no se ha podido guardar */
.config-estat { font-size: var(--text-xs); color: var(--text-3); }
.config-estat.es-error,
.config-hint.es-error { color: var(--coral); }

/* LOS BOTONES
   Los que no confirman nada van sin filo: solo la letra, gris que pasa a
   negro. El de confirmar se queda igual mientras no haya nada que
   confirmar, y se pone NEGRO en cuanto lo hay: así se ve de un vistazo que
   hay algo hecho y que se puede guardar. */
.config-btn-primary,
.config-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: rgba(10, 14, 20, 0.05);
  box-shadow: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.config-btn-secondary:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.08); }
/* Apagado: no hay cambios que guardar, pero la pastilla se queda */
.config-btn-primary:disabled { cursor: default; color: var(--text-3); background: rgba(10, 14, 20, 0.05); }
/* Encendido: hay algo que guardar */
.config-btn-primary:not(:disabled) { background: var(--action); color: var(--action-text); }
.config-btn-primary:not(:disabled):hover { background: var(--action); opacity: .88; }
/* GUARDADO, DENTRO DEL PROPIO BOTÓN
   El «Guardado» iba suelto a la izquierda, lejos de lo que habías pulsado.
   Ahora entra en el botón: un tic y la palabra, deslizándose desde abajo. */
.config-btn-primary.es-fet {
  background: rgba(10, 14, 20, 0.05); color: var(--text-1); cursor: default;
}
.config-btn-primary.es-fet i { font-size: 15px; }
.config-btn-primary.es-fet > * { animation: config-fet 0.26s ease both; }
@keyframes config-fet {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.config-btn-primary.es-fet > span { animation-delay: 0.05s; }

.config-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.config-toggle-label { font-size: var(--text-sm); color: var(--text-1); }

/* COMO LOS FILTROS DE PROYECTOS
   Sin elegir: blanco del todo, sin filo y con la sombra corta de la casa.
   Elegido: relleno gris y la sombra fuera, que es lo que dice que está
   pulsado. */
.config-theme-options { display: flex; gap: 6px; }
.config-theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: var(--surface-card);
  /* Los MISMOS valores que .chats-filtre (los filtros de Proyectos), no
     unos parecidos: si se cambian allí, hay que cambiarlos aquí. */
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 2px 8px rgba(10, 14, 20, 0.07);
  font-size: var(--text-sm);
  font-family: var(--font);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
}
.config-theme-btn:hover {
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 12px rgba(10, 14, 20, 0.10);
}
.config-theme-btn.active {
  color: var(--text-1);
  background: rgba(10, 14, 20, 0.06);
  box-shadow: none;
}
.config-theme-btn.active:hover { box-shadow: none; }
.config-theme-btn .ti { font-size: 14px; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.search-modal {
  width: 100%;
  max-width: 560px;
  background: rgba(var(--glass-rgb), 0.98);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 14, 20, 0.20);
  overflow: hidden;
  animation: dropDownIn 180ms ease both;
}
.search-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(10, 14, 20, 0.06);
}
.search-modal-icon { font-size: 18px; color: var(--text-3); }
.search-modal-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;   /* mateixa mida que les files de resultat */
  color: var(--text-1);
}
.search-modal-input::placeholder { color: var(--text-3); }
.search-modal-close {
  background: none;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
  transition: color var(--t-hover);
}
.search-modal-close:hover { background: none; color: var(--text-1); }

.search-modal-body {
  height: 60vh;          /* alçada fixa: el modal no canvia de mida en cercar */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px;
}
.search-section { padding: 8px 4px; }
.search-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  font-weight: 500;
  padding: 4px 10px 8px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-hover);
}
.search-result-item:hover { background: rgba(10, 14, 20, 0.05); }
/* Con fragmento: el nombre arriba y debajo el trozo donde cae la búsqueda */
.search-result-item.te-frag { align-items: flex-start; }
.search-result-item.te-frag .ti,
.search-result-item.te-frag .ficon { margin-top: 2px; }
.search-res-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-res-nom { color: var(--text-1); }
.search-frag {
  font-size: 12px; line-height: 1.45; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-frag mark { background: none; color: var(--text-1); font-weight: 500; }
.search-result-item .ti { font-size: 14px; color: var(--text-3); flex-shrink: 0; }
.search-result-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-empty {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-3);
}
#search-no-results { text-align: center; padding: 24px 10px; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r);
  border: none;
  background: none;
  color: var(--text-menu);   /* un pelín más fuerte que los rótulos fijos */
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--t-hover), color var(--t-hover);
  width: 100%;
}

.sidebar-item .ti {
  font-size: 16px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  transition: color var(--t-hover);
}

.sidebar-label {
  opacity: 0;
  transition: opacity var(--t-panel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--tracking-normal);
}

.sidebar.is-open .sidebar-label { opacity: 1; }

/* Col·lapsada: amaga els títols de secció (es trencarien en 56px) */
.sidebar:not(.is-open) .section-label { display: none; }

/* Labels y chevron del botón Crear: ocultos en colapsado, visibles en expanded */
.sidebar-crear-label,
.sidebar-crear-chev { display: none; }
.sidebar.is-open .sidebar-crear-label,
.sidebar.is-open .sidebar-crear-chev { display: inline-flex; }

/* Botón Crear: compacto (icono solo) cuando sidebar está colapsado */
.sidebar:not(.is-open) .sidebar-crear-btn,
.sidebar:not(.is-open) .sidebar-crear-wrap {
  width: auto;
  padding: 0;
  justify-content: center;
}
.sidebar:not(.is-open) .sidebar-crear-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
}

/* Sin relleno al pasar el cursor: solo la letra y el icono suben a Tinta,
   la misma regla que el resto del lateral */
.sidebar-item:hover {
  background: none;
  color: var(--text-1);
}
.sidebar-item:hover .ti { color: var(--text-1); }

/* La sección donde estás no lleva ni fondo ni rectángulo: se distingue
   por su icono macizo y por el negro del icono y del texto. */
.sidebar-item.active {
  background: none;
  color: var(--text-1);
  font-weight: 500;
  box-shadow: none;
}
/* Icono macizo en la sección donde estás: en reposo el trazo de siempre,
   al seleccionarla el mismo dibujo pero relleno en gris fuerte —como la
   referencia—. La fuente de iconos no trae variantes rellenas, así que
   cada uno va enmascarado. */
.nav-solid {
  display: none;
  /* La misma caja que el icono de trazo (16px): el macizo no debe crecer
     al activarse */
  width: 16px; height: 16px;
  flex-shrink: 0;
  /* Macizo y en negro: es el apartado donde estás */
  background-color: var(--text-1);
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
}
/* Al estar activa, el trazo se aparta y entra el macizo */
/* Solo se aparta el trazo si esa entrada tiene versión maciza (Nuevo chat
   no la tiene: no es un sitio donde estar, es una acción). */
.sidebar-item.active[data-ico] > .ti,
.sidebar-item.active[data-ico] > .ico-mapa { display: none; }
.sidebar-item.active > .nav-solid { display: inline-block; }
.sidebar-item[data-ico='cerca'] > .nav-solid {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.6 3a7.6 7.6 0 1 1-4.5 13.7l-2.4 2.4a1.15 1.15 0 0 1-1.6-1.6l2.4-2.4A7.6 7.6 0 0 1 10.6 3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.6 3a7.6 7.6 0 1 1-4.5 13.7l-2.4 2.4a1.15 1.15 0 0 1-1.6-1.6l2.4-2.4A7.6 7.6 0 0 1 10.6 3z'/%3E%3C/svg%3E");
}
.sidebar-item[data-ico='llibre'] > .nav-solid {
  /* Las mismas curvas del libro de la fuente, ya rellenas */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a9 9 0 0 1 8 0v13a9 9 0 0 0-8 0z'/%3E%3Cpath d='M13 6a9 9 0 0 1 8 0v13a9 9 0 0 0-8 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a9 9 0 0 1 8 0v13a9 9 0 0 0-8 0z'/%3E%3Cpath d='M13 6a9 9 0 0 1 8 0v13a9 9 0 0 0-8 0z'/%3E%3C/svg%3E");
}
.sidebar-item[data-ico='pin'] > .nav-solid {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.1 8.5 4.4v12.5L3 19.6z'/%3E%3Cpath d='M9.5 4.4 14.5 6.9v12.5L9.5 16.9z'/%3E%3Cpath d='M15.5 6.9 21 4.2v12.5l-5.5 2.7z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.1 8.5 4.4v12.5L3 19.6z'/%3E%3Cpath d='M9.5 4.4 14.5 6.9v12.5L9.5 16.9z'/%3E%3Cpath d='M15.5 6.9 21 4.2v12.5l-5.5 2.7z'/%3E%3C/svg%3E");
}
.sidebar-item[data-ico='carpeta'] > .nav-solid {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.4A2.4 2.4 0 0 1 5.4 4h3.9c.7 0 1.4.3 1.8.9l1.2 1.5h6.3A2.4 2.4 0 0 1 21 8.8v8.8a2.4 2.4 0 0 1-2.4 2.4H5.4A2.4 2.4 0 0 1 3 17.6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.4A2.4 2.4 0 0 1 5.4 4h3.9c.7 0 1.4.3 1.8.9l1.2 1.5h6.3A2.4 2.4 0 0 1 21 8.8v8.8a2.4 2.4 0 0 1-2.4 2.4H5.4A2.4 2.4 0 0 1 3 17.6z'/%3E%3C/svg%3E");
}
.sidebar-item[data-ico='capes'] > .nav-solid {
  /* Las capas macizas: la de arriba llena y las dos de abajo como cantos */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 21 8.3l-9 5.1-9-5.1z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 12.6 8 4.5 8-4.5'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 16.6 8 4.5 8-4.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 21 8.3l-9 5.1-9-5.1z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 12.6 8 4.5 8-4.5'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 16.6 8 4.5 8-4.5'/%3E%3C/svg%3E");
}
.sidebar-item[data-ico='grafic'] > .nav-solid {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 14.6 8.6 9.4l3.4 3.4 5.2-5.9 1.9 1.7v9.5c0 .6-.5 1.1-1.1 1.1H4.5c-.6 0-1.1-.5-1.1-1.1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 14.6 8.6 9.4l3.4 3.4 5.2-5.9 1.9 1.7v9.5c0 .6-.5 1.1-1.1 1.1H4.5c-.6 0-1.1-.5-1.1-1.1z'/%3E%3C/svg%3E");
}
.sidebar-item[data-ico='doc'] > .nav-solid {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.6A1.6 1.6 0 0 1 7.6 2h5.6l5.2 5.2v13.2A1.6 1.6 0 0 1 16.8 22H7.6A1.6 1.6 0 0 1 6 20.4zM13.6 2.6V7h4.4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.6A1.6 1.6 0 0 1 7.6 2h5.6l5.2 5.2v13.2A1.6 1.6 0 0 1 16.8 22H7.6A1.6 1.6 0 0 1 6 20.4zM13.6 2.6V7h4.4z'/%3E%3C/svg%3E");
}
.sidebar-item[data-ico='escut'] > .nav-solid {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.3 4.6 5.1v6.1c0 4.4 3 8.5 7.4 10.5 4.4-2 7.4-6.1 7.4-10.5V5.1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.3 4.6 5.1v6.1c0 4.4 3 8.5 7.4 10.5 4.4-2 7.4-6.1 7.4-10.5V5.1z'/%3E%3C/svg%3E");
}

/* Proyectos: la carpeta de la casa (icons/folder.svg), tal cual */
.ico-carpeta {
  display: inline-block;
  width: 18px; height: 18px;
  flex-shrink: 0;
  background: url("icons/folder.svg") center / contain no-repeat;
}

/* Mapa plegado: el mismo dibujo en trazo (reposo) que macizo (activo) */
.ico-mapa {
  display: inline-block;
  width: 18px; height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 4v13'/%3E%3Cpath d='M15 7v13'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 4v13'/%3E%3Cpath d='M15 7v13'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* El apartado activo lleva el icono en negro, no en verde */
.sidebar-item.active .ti { color: var(--text-1); }

/* Nuevo chat: comportamiento de acción, no de pestaña activa */
/* Nuevo chat es una acción, no el sitio donde estás: gris siempre y negro
   al pasar el cursor, sin relleno ni en activo ni en hover. */
#nav-chat,
#nav-chat.active {
  background: none;
  box-shadow: none;
  font-weight: 400;
  color: var(--text-menu);
}
#nav-chat .ti,
#nav-chat.active .ti { color: var(--text-menu); }
#nav-chat:hover,
#nav-chat.active:hover { background: none; color: var(--text-1); }
#nav-chat:hover .ti,
#nav-chat.active:hover .ti { color: var(--text-1); }

/* Conversation section */
#conv-section {
  display: none;
}

.btn-new-chat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 8px 4px;
  padding: 7px 10px;
  border: 1px dashed rgba(10, 14, 20, 0.18);
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}

.btn-new-chat:hover {
  background: rgba(var(--glass-rgb), 0.55);
  color: var(--text-1);
  border-color: rgba(10, 14, 20, 0.25);
}

/* Ya no tiene scroll propio: baja con el resto de la barra */
#conv-section {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
#conv-section .section-label { flex-shrink: 0; }
/* Nada se queda pegado: la barra entera es un solo desplazamiento */
.conv-list .section-label,
.sidebar-scroll .section-label { position: static; }

.conv-list {
  flex: 0 0 auto;
  overflow: visible;
  padding: 0 8px 8px;   /* alineat amb .sidebar-group */
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

.conv-list::-webkit-scrollbar { width: 3px; }
.conv-list::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 2px; }

.conv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: var(--r);
  padding: 6px 10px;   /* mateixa indentació que .sidebar-item */
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  transition: background var(--t-hover);
  overflow: hidden;
  /* Sense això, amb moltes converses el flex encongeix els ítems i se
     superposen en lloc de deixar que .conv-list faci scroll */
  flex-shrink: 0;
}

/* Hover: sense requadre gris — només ressalt tipogràfic */
.conv-item:hover { background: none; }
.conv-item:hover .conv-title { color: var(--text-1); }
.conv-item.active { background: rgba(var(--glass-rgb), 0.68); }

.conv-title {
  flex: 1;
  font-size: var(--text-sm);   /* mateixa mida que la resta del sidebar */
  color: var(--text-menu);     /* el gris de las entradas del lateral */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-hover);
}

.conv-delete {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 15px;
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: opacity var(--t-hover), color var(--t-hover);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
}

.conv-item:hover .conv-delete { opacity: 1; }
.conv-delete:hover { color: var(--text-1); }

.conv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.conv-date {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

.conv-item.active .conv-title { color: var(--text-1); font-weight: 500; }
.conv-item.active .conv-date  { color: var(--text-2); }

/* ── Sidebar col·lapsat: amaga la llista i mostra la icona de Chats ── */
.conv-collapsed-btn { display: none; }
.sidebar:not(.is-open) .conv-collapsed-btn {
  display: flex;
  /* mateixa geometria que els items de navegació (grup 8px + item 10px):
     la icona queda a la mateixa columna que Normativa, Mapas… */
  margin: 0 8px;
  width: calc(100% - 16px);
}
.sidebar:not(.is-open) .conv-list { display: none; }

/* ── Converses · fletxa «Ver todos» (viu dins la fila «Recientes») ──
   Només visible quan el cursor és sobre la secció de converses */
.conv-viewall-btn {
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
}
#conv-section:hover .conv-viewall-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ── Pàgina «Chats»: totes les converses ────────────────────────── */
.chats-wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 28px;
}
/* L'scroll viu a la vista sencera: la barra queda a l'extrem dret del
   requadre, fina i gris com la dels chats recents de la pantalla principal */
#view-chats {
  align-items: stretch;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
#view-chats::-webkit-scrollbar { width: 4px; }
#view-chats::-webkit-scrollbar-track { background: transparent; }
#view-chats::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 2px; }

.chats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  /* En modo selección hay cuatro acciones más la cuenta: en una pantalla
     estrecha no caben en la misma línea que los apartados. Envolviendo, la
     fila de acciones baja ENTERA en vez de partirse por la mitad y montarse
     encima de los apartados. */
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Apartados de la página: Todos · Destacados · Compartidos. Mismo chip que
   los filtros de Documentos del proyecto: sin relleno, y el activo con el
   fill gris suave. */
.chats-filtres { display: flex; align-items: center; gap: 6px; }
/* Mientras se eligen chats se apartan: las acciones necesitan la fila entera */
.chats-filtres.hidden { display: none; }
/* Igual que los demás botones de la cabecera: pastilla blanca con sombra
   corta. El apartado abierto se queda gris y SIN sombra, para que se note
   que está hundido. */
.chats-filtre {
  height: 32px; padding: 0 12px; border: none; border-radius: 999px;
  background: var(--surface-card); color: var(--text-2);
  font-family: var(--font); font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 2px 8px rgba(10, 14, 20, 0.07);
  transition: color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover);
}
.chats-filtre:hover { color: var(--text-1); box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 12px rgba(10, 14, 20, 0.10); }
.chats-filtre.es-actiu {
  color: var(--text-1);
  background: rgba(10, 14, 20, 0.06);
  box-shadow: none;
}
.chats-filtre.es-actiu:hover { box-shadow: none; }
.chats-filtre-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.chats-filtre-n:empty { display: none; }

.chats-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* Pegadas a la derecha, también cuando bajan de línea */
  margin-left: auto;
  justify-content: flex-end;
}
.chats-actions.hidden { display: none; }

.chats-sel-count {
  font-size: var(--text-sm);
  color: var(--text-3);
  white-space: nowrap;
}

/* Variant destructiva (Eliminar): mateixa geometria/animació, text vermell */
.chats-ghost-btn.is-danger { color: #e05252; }
.chats-ghost-btn.is-danger:hover { color: #cf4444; background: rgba(224, 82, 82, 0.06); }

/* Lo que lleva gastado un despacho, bajo su nombre. Gris como el resto de la
   ficha; solo cambia de color cuando queda poco o no queda nada, que es lo
   único que pide una decisión. */
.sa-row-consum {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 2px;
}
.sa-row-consum.es-alt { color: #b8860b; }
.sa-row-consum.es-ple { color: #e05252; }

/* Lo que valen los tokens que se están escribiendo, bajo el campo. Solo
   informa: quien crea el despacho escribe tokens y nada más. */
.sa-tokens-eur {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin: -4px 2px 2px;
  min-height: 16px;
}

/* ── LOS NÚMEROS DEL FINAL ──────────────────────────────────────────────────
   Treinta chats por página, y el resto a un número de distancia. Mismo chip
   que los apartados de arriba: pastilla, letra gris que se vuelve negra, y la
   página de ahora hundida en gris y sin sombra. */
.chats-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 20px 0 4px;
}
.chats-page {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 2px 8px rgba(10, 14, 20, 0.07);
  transition: color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover);
}
.chats-page:hover { color: var(--text-1); box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 12px rgba(10, 14, 20, 0.10); }
.chats-page.es-actiu {
  color: var(--text-1);
  background: rgba(10, 14, 20, 0.06);
  box-shadow: none;
  cursor: default;
}
.chats-page.es-actiu:hover { box-shadow: none; }
/* Donde se salta de página: puntos, sin caja */
.chats-pages-sep { color: var(--text-3); padding: 0 2px; user-select: none; }
[data-theme="dark"] .chats-page.es-actiu { background: rgba(235, 235, 245, 0.10); }

/* Elegir un chat: un CÍRCULO, y negro cuando está elegido —como se elige en
   el resto de la aplicación—. Era un cuadrado verde, que no se parecía a
   ninguna otra elección de la casa. */
.chats-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: var(--surface-card);
  color: transparent;
  font-size: 10px;
  flex-shrink: 0;
  margin-right: 4px;
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.chats-check.is-checked {
  background: var(--text-1);
  border-color: var(--text-1);
  color: var(--surface-card);
}

/* Salir de la selección: una cruz. Y una cruz NUNCA se llena de gris: pasa de
   gris a negro y se acabó. */
.chats-x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
  transition: color var(--t-hover);
}
.chats-x-btn:hover { color: var(--text-1); background: none; box-shadow: none; }
.chats-row.is-selected { background: rgba(10, 14, 20, 0.03); }

/* Tots els botons de la pàgina: MATEIX estil que el xip de municipis del
   chat (pill glass 32px, text gris → negre en hover, mateixa transició) */
.btn-pill,
.chats-new-btn,
.chats-ghost-btn,
.chats-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 18px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  cursor: pointer;
  background: rgba(var(--glass-rgb), 0.88);
  border: 1px solid rgba(var(--glass-rgb), 0.8);
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.6) inset,
    0 1px 4px rgba(15, 25, 40, 0.06);
  transition: color var(--t-hover), background var(--t-hover), border-color var(--t-hover);
}
.btn-pill:hover,
.chats-new-btn:hover,
.chats-ghost-btn:hover,
.chats-text-btn:hover {
  background: rgba(var(--glass-rgb), 0.85);
  color: var(--text-1);
}

/* Los botones de la cabecera de Chats, con el MISMO relleno que los de la
   barra del chat principal (.pill-bar-left .juris-chip): pastilla blanca
   con una sombra corta, sin borde. */
.chats-head .chats-ghost-btn,
.chats-head .chats-new-btn,
.chats-head .chats-text-btn {
  background: var(--surface-card);
  border: none;
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 2px 8px rgba(10, 14, 20, 0.07);
  transition: color var(--t-hover), box-shadow var(--t-hover);
}
.chats-head .chats-ghost-btn:hover,
.chats-head .chats-new-btn:hover,
.chats-head .chats-text-btn:hover {
  background: var(--surface-card);
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 12px rgba(10, 14, 20, 0.10);
}
.chats-head .chats-ghost-btn.is-danger:hover { background: var(--surface-card); color: #cf4444; }
.btn-pill .ti { font-size: 15px; }
.chats-new-btn .ti { font-size: 16px; }

.chats-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 44px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
}
.chats-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.chats-search .ti { font-size: 16px; color: var(--text-3); flex-shrink: 0; }
.chats-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  outline: none;
}
.chats-search input::placeholder { color: var(--text-3); }
.chats-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.chats-list { display: flex; flex-direction: column; }

.chats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-hover);
}
.chats-row:hover { background: rgba(10, 14, 20, 0.03); }

.chats-row-title {
  flex: 1;
  font-size: var(--text-sm);   /* mateixa mida que els títols del sidebar */
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cuando la búsqueda cae dentro de la conversación, el título lleva debajo
   el trozo de mensaje donde aparece, con lo buscado resaltado */
.chats-row-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chats-row-frag {
  font-size: 12px; line-height: 1.45; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chats-row-frag mark,
.chats-row-title mark {
  background: none; color: var(--text-1); font-weight: 500;
}
.chats-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chats-row-time {
  font-size: var(--text-sm);
  color: var(--text-3);
  white-space: nowrap;
}

.chats-row:hover .conv-kebab { opacity: 1; pointer-events: auto; }

/* ── Converses · kebab (⋮) — apareix en hover, com el conv-delete ── */
.conv-kebab {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  pointer-events: none;   /* invisible I inactiu fins que l'ítem té el cursor */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
}
.conv-item:hover .conv-kebab { opacity: 1; pointer-events: auto; }
.conv-kebab:hover { color: var(--text-1); }

/* Estrella de conversa destacada */
.conv-star {
  font-size: 11px;
  color: var(--accent);
  margin-right: 5px;
  vertical-align: 0;
}

/* Etiqueta de grupo (Destacados / Recientes / Hoy…). Ya no se queda
   pegada arriba: la barra entera es un solo desplazamiento. */
.conv-group-label {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--surface-card);
  /* La letra del menú, como «Proyectos recientes»; nada de mini-mayúsculas.
     En gris más flojo: es un título fijo, no se pulsa. */
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-rotul);
  padding: 8px 10px 4px;
}

/* ── Menú contextual flotant (blanc opac, estil de la casa) ─────── */
.conv-menu {
  position: fixed;
  z-index: 1400;
  min-width: 210px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(15, 25, 40, 0.16);
  padding: 6px;
  animation: convMenuIn 120ms ease both;
}

@keyframes convMenuIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.conv-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-hover);
}
/* El fill del hover, gris de verdad: --bg-3 es glass translúcido y sobre la
   tarjeta blanca del menú no se veía. */
.conv-menu-item:hover { background: var(--chip-solid); }
.conv-menu-item .ti { font-size: 15px; color: var(--text-3); width: 16px; text-align: center; flex-shrink: 0; }
/* Candado dibujado a mano: el de la tipografía lleva el agujero en medio */
.conv-menu-ic {
  width: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
}
.conv-menu-ic svg { display: block; }
.conv-menu-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-menu-chev  { margin-left: auto; font-size: 14px; }
.conv-menu-check { margin-left: auto; font-size: 15px; color: var(--accent) !important; }

.conv-menu-item.is-danger { color: #e05252; }
.conv-menu-item.is-danger .ti { color: #e05252; }
.conv-menu-item.is-danger:hover { background: rgba(224, 82, 82, 0.08); }

.conv-menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }

.conv-menu-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  padding: 6px 10px 4px;
}

/* Rename inline */
.conv-rename-input {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  background: var(--surface-card);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 6px;
  outline: none;
}

/* LA MISMA LETRA QUE LA LISTA (27-9-2026)
   Iban a 11 px mientras el rótulo del grupo («Recientes») y el título de cada
   conversación van a 13. Como además el gris es más oscuro que el del rótulo,
   parecían más grandes y en realidad eran más pequeñas: se leía como si fuera
   de otro sitio. Ahora son de la lista donde están, como el resto del lateral.
   Van juntas —la de cargando y la de vacío— porque salen en el mismo hueco y
   una detrás de la otra: con tamaños distintos, al acabar de cargar se vería
   dar un salto. */
.conv-loading,
.conv-empty {
  padding: 10px 8px;
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* ── Feedback dashboard ────────────────────────────────────────────────────── */
.fb-card {
  background: rgba(var(--glass-rgb), 0.55);
  border: 1px solid rgba(var(--glass-rgb), 0.8);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fb-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.fb-card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.fb-card-pos .fb-card-value { color: #22c55e; }
.fb-card-neg .fb-card-value { color: #e05252; }

.fb-section {
  background: rgba(var(--glass-rgb), 0.4);
  border: 1px solid rgba(var(--glass-rgb), 0.7);
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fb-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.fb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fb-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border);
}
.fb-table td {
  padding: 10px;
  color: var(--text-1);
  border-bottom: 1px solid rgba(var(--glass-rgb), 0.5);
  vertical-align: middle;
}
.fb-table tr:last-child td { border-bottom: none; }
.fb-table tr:hover td { background: rgba(var(--glass-rgb), 0.3); }

.fb-view-btn {
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  background: none;
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.fb-view-btn:hover {
  background: rgba(var(--glass-rgb), .5);
  color: var(--text-1);
}

/* ── Superadmin panel ──────────────────────────────────────────────────────── */
.sa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: rgba(var(--glass-rgb), 0.35);
  border: 1px solid rgba(var(--glass-rgb), 0.6);
}
.sa-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sa-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-row-meta {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sa-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background .12s, color .12s;
  color: var(--text-2);
}
.sa-btn:hover      { background: rgba(var(--glass-rgb), .5); color: var(--text-1); }
.sa-btn-danger     { color: #e05252; border-color: rgba(224,82,82,.3); }
.sa-btn-danger:hover { background: rgba(224,82,82,.08); }
.sa-btn-ok         { color: #22c55e; border-color: rgba(34,197,94,.3); }
.sa-btn-ok:hover   { background: rgba(34,197,94,.08); }
.sa-btn-users      { color: var(--accent); border-color: rgba(var(--accent-rgb),.3); }
.sa-btn-users:hover { background: rgba(var(--accent-rgb),.08); }

.sa-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(var(--glass-rgb), .4);
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.sa-input:focus { border-color: var(--accent); }
.sa-input::placeholder { color: var(--text-3); }

.sa-submit-btn {
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity .15s;
  font-family: inherit;
}
.sa-submit-btn:hover { opacity: .88; }

/* ── Botons d'acció sota cada resposta IA ──────────────────────────────────── */
.msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.message.assistant:hover .msg-actions,
.message.assistant:focus-within .msg-actions {
  opacity: 1;
}
/* En el chat privado del proyecto la fila cuelga de .pjd-msg-bot, que no
   casaba con la regla de arriba: quedaba montada pero invisible para
   siempre. Se revela igual, al pasar por la respuesta. */
.pjd-msg-bot:hover .msg-actions,
.pjd-msg-bot:focus-within .msg-actions {
  opacity: 1;
}

/* ── CÓMO SE ESCRIBE EL CORREO ─────────────────────────────────────────
   La ventana es la de las aclaraciones y usa SUS clases: .vnc-card, .vnc-cap,
   .vnc-cos, .vnc-opt, .vnc-radio, .vnc-peu y el campo .vnc-altre-camp de
   «Otra cosa…». Aquí solo está lo único que esta tiene y aquella no: el
   paréntesis que dice lo que lleva dentro cada opción —«Cliente» no explica
   por sí solo que además será breve y sin siglas—. */
.ecor-p { color: var(--text-3); }

/* LA PASTILLA DEL BORRADOR: con qué tono está escrito, y el lápiz para
   cambiarlo. A la derecha del rótulo, en gris, sin quitarle sitio al título.
   Sin fondo al pasar por encima: es una acción pequeña, como las cruces. */
.chat-mail-estil {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 14px;
  border: none; background: none; color: var(--text-3);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  max-width: 45%; overflow: hidden;
  transition: color var(--t-hover);
}
.chat-mail-estil:hover { color: var(--text-1); }
.chat-mail-estil .ti { font-size: 13px; flex: 0 0 auto; }
.chat-mail-estil-t { overflow: hidden; text-overflow: ellipsis; }

/* ── LO QUE PREGUNTO YO TAMBIÉN SE TOCA ────────────────────────────────
   Bajo la propia pregunta: la hora, volver a preguntar, corregirla y
   copiarla. La hora está siempre; los botones salen al pasar por encima,
   como los de la respuesta. */
.msg-actions.es-pregunta {
  opacity: 1;
  align-self: flex-end;
  justify-content: flex-end;
  margin-top: 5px;
  /* Sin separación propia: la ponen los botones al abrirse, y así cerrados no
     dejan ni un hueco entre la hora y el canto del globo */
  gap: 0;
  --eines: 0;
}
/* LA HORA, A RAS DEL GLOBO; LOS BOTONES LA EMPUJAN
   Cerrados no ocupan nada —ni ancho ni margen—, así que la hora se queda en la
   esquina de la pregunta. Al pasar el cursor se abren y la corren hacia la
   izquierda: como el ancho y el margen van con transición, la hora se desliza
   en vez de dar un salto. `--eines` vale 0 cerrados y 1 abiertos: un solo
   número mueve las tres cosas a la vez, sin que ninguna se quede atrás. */
.msg-actions.es-pregunta .msg-action-btn {
  opacity: var(--eines);
  width: calc(26px * var(--eines));
  margin-left: calc(2px * var(--eines));
  overflow: hidden;
  transition: opacity 0.15s, width 0.18s ease, margin-left 0.18s ease, color var(--t-hover);
}
/* El primero se aparta un poco más: pegado al número se leería como parte de él */
.msg-actions.es-pregunta .msg-hora + .msg-action-btn { margin-left: calc(6px * var(--eines)); }
.message.user:hover .msg-actions.es-pregunta,
.message.user:focus-within .msg-actions.es-pregunta,
.pjd-msg-user:hover .msg-actions.es-pregunta,
.pjd-msg-user:focus-within .msg-actions.es-pregunta { --eines: 1; }
/* Dentro de la fila, la hora pierde su margen: la separación de los botones la
   ponen ellos al abrirse */
.msg-actions.es-pregunta .msg-hora { align-self: center; margin-top: 0; margin-right: 0; }

/* CORREGIR LA PREGUNTA EN SU SITIO
   El campo ocupa EXACTAMENTE lo que ocupaba la burbuja (se le mide antes de
   esconderla y se le pone ese ancho), para que una pregunta de una línea
   siga siendo de una línea y no se deforme al entrar a corregirla. */
/* Sin tope propio: el ancho lo manda el que se le copia a la burbuja, que
   ya respeta el suyo. Con un `max-width` aquí el campo salía más estrecho y
   el texto rompía antes: lo que era un párrafo de cuatro líneas pasaba a
   seis. */
.msg-editor { display: flex; justify-content: flex-end; }
.msg-editor textarea {
  box-sizing: border-box;
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--surface-card); color: var(--text-1);
  font-family: var(--font); font-size: inherit; line-height: 1.5;
  resize: none; outline: none; overflow: hidden;
}
.msg-editor textarea:focus { border-color: var(--text-3); }
/* Cancelar y Guardar viven en la misma fila que los iconos, a su izquierda:
   los dos con la pastilla gris de la casa y pequeños, del cuerpo de la
   letra de al lado. */
.msg-editor-btn {
  height: 26px; padding: 0 11px; border: none; border-radius: 999px;
  background: rgba(10, 14, 20, 0.05); color: var(--text-2);
  font-family: var(--font); font-size: var(--text-sm); line-height: 1; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.msg-editor-btn:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.08); }
.msg-editor-btn:disabled { color: var(--text-3); background: rgba(10, 14, 20, 0.05); cursor: default; }
/* Mientras se corrige, los iconos se quedan quietos a la vista */
.es-editant .msg-actions.es-pregunta { --eines: 1; }
.msg-actions.es-pregunta .msg-editor-btn + .msg-action-btn { margin-left: 6px; }
.msg-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-3);
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}
.msg-action-btn:hover {
  background: rgba(var(--glass-rgb), 0.5);
  color: var(--text-1);
}
.msg-action-btn.copied       { color: var(--accent); }
.msg-action-btn.voted-up     { color: #22c55e; }
.msg-action-btn.voted-down   { color: var(--coral, #e05252); }
.msg-action-btn:disabled     { opacity: 0.3; cursor: default; }

/* Sidebar footer — anclado al fondo */
.sidebar-footer {
  margin-top: auto;
  padding: 0 8px 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Fijo abajo: lo que se desplaza pasa por debajo de su línea */
  background: var(--surface-card);
  position: relative;
  z-index: 2;
}
.peu-linia { margin: 0 4px 6px; }

/* «Proyectos recientes»: misma letra que el menú, en gris. Nada de
   mini-mayúsculas aquí: esa tipografía solo cuando el usuario la pida. */
.pj-side-rotul {
  font-size: var(--text-sm);   /* la del menú */
  font-weight: 500;            /* el mismo peso que «Proyectos» */
  color: var(--text-rotul);    /* más flojo: es un título fijo, no se pulsa */
  padding: 8px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar:not(.is-open) .pj-side-rotul { display: none; }
/* La línea vive dentro del grupo (8px de relleno): se compensa para que
   mida lo mismo que la de los chats */
#pj-side-group > .sidebar-thin-divider { margin: 8px 4px; }
/* Sin proyectos todavía: fuera el rótulo; quedan Nuevo proyecto y Todos */
#pj-side-group.es-buit .pj-side-rotul { display: none; }
.pj-side-accio { margin-top: 2px; }
#pj-side-group:not(.es-buit) .pj-side-accio:first-of-type { margin-top: 6px; }

/* Las dos filas del pie (Support y el usuario): misma caja que el menú */
.peu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-menu);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-hover);
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.peu-item:hover { color: var(--text-1); }
.peu-item > .ti { font-size: 16px; width: 16px; text-align: center; flex-shrink: 0; }
.peu-item .user-avatar { width: 22px; height: 22px; font-size: 9px; margin-left: -3px; flex-shrink: 0; }
/* El nombre, como cualquier entrada del menú: mismo cuerpo y en Tinta */
.peu-item .user-name {
  overflow: hidden; text-overflow: ellipsis;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-1);
  flex: initial;
}
.peu-item .btn-logout { margin-left: auto; opacity: 0; transition: opacity var(--t-hover); }
.peu-item:hover .btn-logout { opacity: 1; }
/* Plegado: solo los iconos, en la MISMA columna que el menú.
   Se conserva la geometría de la barra abierta (relleno de 10px y todo a la
   izquierda) y se quitan del flujo los textos: así el mundo de «Soporte» y
   el avatar caen en el mismo eje que Normativa o Mapas. Centrarlos dentro
   de su caja los desplazaba a la izquierda —el hueco del texto y el de la
   separación seguían contando—, y es lo que se veía torcido. */
.sidebar:not(.is-open) .peu-item { padding: 0 10px; }
.sidebar:not(.is-open) .peu-item .sidebar-label,
.sidebar:not(.is-open) .peu-item .btn-logout { display: none; }

.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  background: rgba(var(--glass-rgb), 0.42);
  border: 1px solid rgba(var(--glass-rgb), 0.55);
  overflow: hidden;
  white-space: nowrap;
  transition: background var(--t-hover);
}

.user-row:hover { background: rgba(var(--glass-rgb), 0.62); }
.user-pill-clickable { cursor: pointer; }
.user-pill-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-glow) 0%, var(--accent) 100%);
  color: var(--surface-white);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  box-shadow: inset 0 1px 1px rgba(var(--glass-rgb),0.4);
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--t-panel);
}

.sidebar.is-open .sidebar-user-info { opacity: 1; }

.user-name {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-logout {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: background var(--t-hover), color var(--t-hover);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.btn-logout:hover { color: var(--coral); }

/* ============================================================
   MAIN AREA — floating glass panel
   ============================================================ */

.main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}

/* Con un documento abierto, el visor sigue POR ENCIMA del panel principal
   (el mismo rectángulo de siempre), pero el contenido de dentro se aparta
   hacia la izquierda lo que ocupa el visor: así el chat queda centrado en
   la parte que se ve y se puede leer y preguntar a la vez. Se anima el
   relleno a propósito: acompaña al visor, que entra deslizándose.
   El contenido se mete unos píxeles POR DEBAJO del borde del panel (lo que
   mide su esquina redonda): así no queda ninguna franja de fondo entre las
   líneas de una tabla o un chat y el panel, y la sombra cae sobre el
   contenido, que es lo natural. */
body.visor-al-costat .main-area > .app-content {
  padding-right: calc(var(--visor-w, 0px) - var(--r-lg, 14px));
  transition: padding-right var(--t-panel);
}
@media (max-width: 900px) { body.visor-al-costat .main-area > .app-content { padding-right: 0; } }

/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid rgba(var(--glass-rgb), 0.50);
  background: transparent;
  flex-shrink: 0;
  gap: var(--sp-4);
  position: relative;
  z-index: 10;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}

/* Sidebar toggle */
.sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--glass-rgb), 0.62);
  background: rgba(var(--glass-rgb), 0.45);
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 17px;
  transition: background var(--t-hover), color var(--t-hover), transform 100ms ease;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  background: rgba(var(--glass-rgb), 0.78);
  color: var(--text-1);
  transform: translateY(-1px);
}

/* Company + user identity */
.topbar-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--glass-rgb), 0.65);
  background: rgba(var(--glass-rgb), 0.48);
  white-space: nowrap;
  overflow: hidden;
  max-width: 280px;
}

.topbar-identity-sep {
  font-size: var(--text-xs);
  color: var(--text-3);
  flex-shrink: 0;
}

.topbar-username {
  font-size: var(--text-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumb-item { cursor: default; }
.breadcrumb-item.active { color: var(--text-1); font-weight: 500; }

.breadcrumb-sep {
  font-size: 11px;
  color: var(--text-3);
  opacity: 0.4;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--glass-rgb), 0.62);
  background: rgba(var(--glass-rgb), 0.45);
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 15px;
  transition: background var(--t-hover), color var(--t-hover), transform 100ms ease;
}

.theme-toggle:hover {
  background: rgba(var(--glass-rgb), 0.78);
  color: var(--text-1);
  transform: translateY(-1px);
}

/* Topbar avatar */
.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-glow) 0%, var(--accent) 100%);
  color: var(--surface-white);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(var(--glass-rgb),0.4);
}

/* ============================================================
   APP CONTENT + VIEWS
   ============================================================ */

.app-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary — dark pill */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--action);
  color: var(--action-text);
  border: none;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  transition: opacity var(--t-hover), transform 100ms ease;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { opacity: 0.82; transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }

/* Secondary — pill, glass outlined */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: rgba(var(--glass-rgb), 0.45);
  color: var(--text-1);
  border: 1px solid rgba(var(--glass-rgb), 0.68);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-hover), transform 100ms ease;
}

.btn-secondary:hover { background: rgba(var(--glass-rgb), 0.72); transform: translateY(-1px); }

/* Icon button */
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(var(--glass-rgb), 0.45);
  color: var(--text-2);
  border: 1px solid rgba(var(--glass-rgb), 0.65);
  border-radius: var(--r);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}

.btn-icon-sm:hover { background: rgba(var(--glass-rgb), 0.72); color: var(--text-1); }

.btn-full { width: 100%; justify-content: center; }

/* ============================================================
   BADGES — pill with colored dot
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  background: rgba(var(--glass-rgb),0.88);
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status */
.badge-published { background: var(--status-published-bg); color: var(--status-published-text); }
.badge-published::before { background: #22C55E; }
.badge-draft     { background: var(--status-draft-bg);     color: var(--status-draft-text); }
.badge-draft::before { background: #F97316; }
.badge-private   { background: rgba(var(--glass-rgb),0.35); color: var(--text-3); border: 1px solid var(--border); }
.badge-private::before { background: var(--text-3); }

/* License type */
.badge-license    { background: var(--amber-bg);    color: #9A3412; }
.badge-license::before { background: #F97316; }
.badge-declaracio { background: var(--accent-dim);  color: var(--accent); }
.badge-declaracio::before { background: var(--accent); }
.badge-comunicat  { background: var(--green-bg);    color: #166534; }
.badge-comunicat::before { background: #22C55E; }
.badge-menor      { background: var(--bg-3);        color: var(--text-3); }
.badge-menor::before { background: var(--text-3); }

/* Soil */
.badge-residential { background: var(--badge-residential-bg); color: var(--badge-residential-text); }
.badge-residential::before { background: var(--badge-residential-text); }
.badge-industrial  { background: var(--badge-industrial-bg);  color: var(--badge-industrial-text); }
.badge-industrial::before { background: var(--badge-industrial-text); }
.badge-green-soil  { background: var(--badge-green-bg);       color: var(--badge-green-text); }
.badge-green-soil::before { background: var(--badge-green-text); }
.badge-dotacional  { background: var(--badge-dotacional-bg);  color: var(--badge-dotacional-text); }
.badge-dotacional::before { background: var(--badge-dotacional-text); }
.badge-special     { background: var(--badge-special-bg);     color: var(--badge-special-text); }
.badge-special::before { background: var(--badge-special-text); }

/* Citation chips */
.cite-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(var(--glass-rgb), 0.55);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  cursor: default;
  transition: background var(--t-hover);
}

.cite-chip:hover { background: var(--accent-dim); color: var(--accent); }

/* ============================================================
   LOADING
   ============================================================ */

.loading { opacity: 0.5; pointer-events: none; }

/* Cualquier espera usa el aro de oro: window.aroCarrega() (ver styles.css) */

/* Skeleton — static gradient (no animation for performance) */
.skeleton {
  background: linear-gradient(90deg, rgba(var(--glass-rgb),0.0) 0%, rgba(var(--glass-rgb),0.4) 50%, rgba(var(--glass-rgb),0.0) 100%);
  background-color: var(--bg-3);
  animation: none;
  border-radius: var(--r-sm);
}

/* ============================================================
   SIDEBAR — MOCKUP COMPONENTS
   ============================================================ */

/* Workspace pill */
/* Misma geometría que .sidebar-item: así el logo cae en la columna de los
   iconos y «Despacho» arranca en el mismo eje que «Nuevo chat». */
.workspace-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Dentro del hilo que se desplaza no puede encogerse, o desaparecía */
  flex: 0 0 auto;
  height: 36px;
  /* 8px del .sidebar-group + 10px de la fila: mismo inset que el nav */
  padding: 0 10px;
  margin: 8px 8px 4px;
  background: none;
  border: none;
  overflow: hidden;
}

/* Logo del despacho (subible por el socio) · cuadrado redondeado, como el brand-mark */
.ws-logo {
  flex-shrink: 0;
  /* Ocupa 16px de flujo —el ancho de un icono— y se dibuja a 24 centrado
     sobre ese eje: la columna cuadra sin encoger el logo del cliente. */
  width: 24px;
  height: 24px;
  margin: 0 -4px;
  /* «Que sea redondo, sin stroke gris y con una sombra sutil» (1-10-2026).
     El trazo lo recortaba contra el fondo de la barra; la sombra lo levanta
     sin dibujarle un borde. La misma sombra corta de las tarjetas. */
  border-radius: 50%;
  border: none;
  background: var(--accent-dim);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 2px 6px -2px rgba(18, 18, 23, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
}
/* Ya no se pulsa: es el escudo de la casa, no un botón. Sin cursor de mano
   y sin el anillo de al pasar por encima. */

.ws-logo-ph { color: var(--accent); font-size: 13px; }
.ws-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ws-text { min-width: 0; }

/* Colapsada: el logo del despacho segueix visible a dalt, centrat (sense text ni pill) */
.sidebar:not(.is-open) .workspace-pill {
  justify-content: center;
  padding: 8px 0;
  margin: 8px 0 4px;
  background: none;
  border: none;
}
.sidebar:not(.is-open) .ws-text { display: none; }

.ws-label {
  font-size: var(--text-sm);
  color: var(--text-3);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section label */
.section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;   /* mateixa tipografia que «Documentos recientes» */
  color: var(--text-3);
  padding: 12px 10px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  white-space: nowrap;
}

/* Add button (+ in section label) */
.add-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
  flex-shrink: 0;
}
.add-btn .ti { font-size: 14px; }
.add-btn:hover { background: rgba(var(--glass-rgb), 0.50); color: var(--text-1); }

/* Project items with colored dot */
.project-item {
  padding: 7px 14px;
  font-size: var(--text-sm);
  color: var(--text-2);
  border-radius: var(--r);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--t-hover);
  margin: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: background var(--t-hover), opacity var(--t-panel);
}

.sidebar.is-open .project-item {
  opacity: 1;
  pointer-events: auto;
}

.project-item:hover { background: rgba(var(--glass-rgb), 0.50); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-glow);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent-glow);
}

.ref {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* User pill — expandida */
.user-pill {
  border-radius: var(--r-lg) !important;
  background: rgba(var(--glass-rgb), 0.42) !important;
  border: 1px solid rgba(var(--glass-rgb), 0.55) !important;
}

/* ── SIDEBAR COLAPSADA: solo icono/avatar centrado ── */

/* Avatar centrado, sin pill */
.sidebar:not(.is-open) .user-row {
  padding: 6px;
  justify-content: center;
  gap: 0;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}

/* Que el bloque de info no empuje el avatar al colapsar */
.sidebar:not(.is-open) .sidebar-user-info {
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  gap: 0;
}

/* Brand: centrar el cuadrado CX */
.sidebar:not(.is-open) .sidebar-brand {
  justify-content: center;
  padding: 0;
  gap: 0;
}

.user-info-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  gap: 1px;
}

.user-role {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   TOPBAR — MOCKUP COMPONENTS
   ============================================================ */

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* Rastro: todos los segmentos en regular; el actual en negro y los
   anteriores en gris y clicables. El separador es una barra recta. */
.breadcrumbs-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.crumb {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color var(--t-hover);
}
.crumb:hover { color: var(--text-1); }
.crumb.is-current { color: var(--text-1); cursor: default; max-width: 340px; }
/* La raíz no lleva a ninguna parte: ni cursor ni hover */
.crumb.is-static { cursor: default; }
.crumb.is-static:hover { color: var(--text-3); }
.crumb.is-static.is-current:hover { color: var(--text-1); }
.crumb-sep {
  width: 1px;
  height: 12px;
  flex-shrink: 0;
  background: var(--border-2);
}

/* Icon button (topbar actions) */
.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(var(--glass-rgb), 0.50);
  border: 1px solid rgba(var(--glass-rgb), 0.65);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
  font-size: 16px;
  color: var(--text-2);
  flex-shrink: 0;
}

.icon-btn:hover {
  background: rgba(var(--glass-rgb), 0.82);
  color: var(--text-1);
  transform: translateY(-1px);
}

.topbar-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

/* ============================================================
   DOT-PULSE → STREAM  (burbuja del asistente pensando)
   ============================================================ */

/* Contenedor que apila passos + texto */
.message.assistant .dp-stack {
  min-height: 18px;
}

/* ── Fosa per paraula (1b) ───────────────────────────────────────────
   Cada tros nou entra amb un fos; només s'anima el NOU (la classe no es
   re-aplica mai al text ja pintat). Res de blur.

   SENSE inline-block I SENSE LLISCAMENT. Abans cada tros era un
   inline-block per poder-lo fer pujar 4px (transform no s'aplica a un
   element inline). Però els trossos arriben com vol el model, no per
   paraules —«composici» + «ón»—, i entre dos inline-block el navegador pot
   saltar de línia: mentre la resposta s'escrivia, les paraules es partien
   entre dues línies. Mesurat el 19-9-2026 amb respostes reals, d'amplada
   260 a 700 px: paraules partides en ~1.000 de les mostres. Inline, la
   línia només es parteix pels espais, com un text qualsevol. */
@keyframes word-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.word-in {
  animation: word-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Sense will-change: amb centenars de paraules, promocionar cada span a
     la seva pròpia capa satura el compositor i és justament el que fa lag.
     Sense fill-mode: si l'animació no corre, el text es veu igualment. */
}
@media (prefers-reduced-motion: reduce) {
  .word-in { animation: none; }
}

/* El scroll el gestionem per intenció: fora l'anchoring natiu, que competeix */
#messages { overflow-anchor: none; }

/* Botó flotant per tornar al final quan l'usuari s'ha desenganxat.
   Penja del composer, no del panell: així queda sempre a la mateixa
   distància de la barra encara que aquesta creixi amb el text. */
.chat-panel { position: relative; }
.chat-baixar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  z-index: 5;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip-solid);
  color: var(--text-2);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover), color var(--t-hover);
}
.chat-baixar.visible { opacity: 1; pointer-events: auto; }
/* El mismo botón en el hilo del Agente (y en el chat lateral): se ancla a
   su barra de escribir, que por eso pasa a ser el marco de referencia. */
.pjd-composer { position: relative; }
.chat-baixar:hover { color: var(--text-1); }
.chat-baixar i { font-size: 16px; }

/* ── Cronologia de passos mentre es prepara la resposta ──────────────
   Punts amb connector vertical, com el desglose de treball de Claude.
   El pas actiu porta el «shimmer»; els fets queden en gris quiet.
   El bloc es replega amb grid-template-rows (mai height). */
/* ── Desaparició dels pensaments ─────────────────────────────────────
   Tres capes que no comencen alhora, que és el que li dona el caràcter:
     1. cada pas es fon per separat, en cascada de dalt a baix;
     2. el bloc sencer llisca cap amunt;
     3. l'alçada es replega DESPRÉS, quan ja no es veu res.
   L'alçada va l'última a propòsit: si es replega mentre encara es llegeix,
   el text de sota puja i es percep com una estrebada. */
.chat-loading-steps {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.45s;
}
.chat-loading-steps.is-collapsed {
  grid-template-rows: 0fr;
  pointer-events: none;
}
.chat-loading-inner {
  overflow: hidden;
  min-height: 0;
  padding: 2px 0;
  transition: transform 1.05s cubic-bezier(0.32, 0, 0.24, 1);
}
.chat-loading-steps.is-collapsed .chat-loading-inner {
  transform: translateY(-12px);
}
/* Cascada: el pas de dalt marxa primer. Corba d'entrada suau (surt de
   seguida i s'atenua), no ease-in-out — aquesta es queda plana els
   primers 300ms i després cau de cop, i és el que es llegia com un tall. */
.chat-loading-steps .loading-pas {
  transition: opacity 0.55s cubic-bezier(0.33, 0, 0.35, 1);
}
.chat-loading-steps.is-collapsed .loading-pas { opacity: 0; }
.chat-loading-steps.is-collapsed .loading-pas:nth-child(2) { transition-delay: 0.06s; }
.chat-loading-steps.is-collapsed .loading-pas:nth-child(3) { transition-delay: 0.12s; }
.chat-loading-steps.is-collapsed .loading-pas:nth-child(4) { transition-delay: 0.18s; }
.chat-loading-steps.is-collapsed .loading-pas:nth-child(n + 5) { transition-delay: 0.24s; }
/* El carril i el connector se'n van abans que el text: si aguanten fins
   al final queden dos filaments solts sobre el buit. */
.chat-loading-steps.is-collapsed .loading-pas::after {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.loading-pas {
  position: relative;
  padding: 0 0 14px 18px;
  animation: stepFadeIn 0.35s ease;
}
.loading-pas:last-child { padding-bottom: 2px; }

/* Marca d'estat de cada pas. És un element PROPI (no un pseudo del pas):
   el pas té overflow ocult a l'ancestre i qualsevol posició negativa
   retallava el cercle. La caixa de 10px viu dins del padding. */
.loading-ic {
  position: absolute;
  left: 0;
  /* Centrat amb la línia de text, mesurat: la caixa de línia és de 20.8px
     (13px × 1.6) i el centre de la caixa en línia del text cau a 11.25px
     de la vora del pas — no a 10.4px, perquè el text s'assenta sobre la
     línia base. Amb 9px d'alçada, la vora superior va a 6.75px. */
  top: 6.75px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
/* Pendent: punt petit centrat a la caixa */
.loading-ic::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-4);
}
/* Fet: cercle gris ple amb el check retallat a sobre. Amb prou feines més
   gran que el punt del pas pendent i en gris, no en tinta: és una marca de
   suport, no un element que hagi de competir amb el text.
   El check és una capa amb color PROPI, no un forat: sobre el vidre de la
   bombolla un forat agafava el gris del fons i es llegia com una taca.
   Sense fill-mode: l'estat natural de l'element JA és el definitiu; amb
   «both», si l'animació no corre (pestanya en segon pla) el check es
   quedava clavat al 40% de mida. */
.loading-pas.is-done .loading-ic {
  background: var(--text-3);
  animation: checkPop 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.loading-pas.is-done .loading-ic::before {
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: var(--surface-card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 12.4l3.4 3.4 7-7.8' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 12.4l3.4 3.4 7-7.8' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes checkPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
/* Connector fins al pas següent, centrat al carril de la marca (x = 4.5px) */
.loading-pas:not(:last-child)::after,
.loading-pas:has(.loading-subs)::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 17.75px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}
.loading-step { font-size: 13px; color: var(--text-3); }
/* Shimmer: el text és el retall d'un degradat que es desplaça en bucle */
.loading-pas.is-active .loading-step {
  color: transparent;
  background-image: linear-gradient(90deg,
    var(--text-3) 0%, var(--text-3) 38%,
    var(--text-1) 50%,
    var(--text-3) 62%, var(--text-3) 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: loadingShimmer 1.5s linear infinite;
}
/* Un solo barrido: la luz entra por la izquierda y sale por la derecha.
   El degradado mide 300% del texto y la luz va en su centro, así que a
   los dos extremos del recorrido queda FUERA por completo —con 220% aún
   asomaba al reiniciar y se veía un corte— y el texto nunca se queda sin
   fondo (si no, con no-repeat, se volvería invisible). */
@keyframes loadingShimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-pas.is-active .loading-step { animation: none; color: var(--text-2); background: none; }
  .loading-pas.is-done .loading-ic { animation: none; }
}

/* El paso con documentos se puede abrir: chevron, contador y la lista
   recogida de entrada, para ver qué está leyendo cuando interese. */
.loading-pas.te-docs .loading-step { cursor: pointer; }
.loading-chev {
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  transition: transform var(--t-hover), color var(--t-hover);
}
.loading-pas.es-plegat .loading-chev { transform: rotate(-90deg); }
.loading-pas.te-docs .loading-step:hover ~ .loading-chev,
.loading-chev:hover { color: var(--text-1); }
.loading-sub-n { margin-left: 7px; font-size: 12px; color: var(--text-3); }
/* La lista se pliega por altura, como el resto de desplegables */
/* Se pliega con altura y con opacidad; las tarjetas mantienen su columna
   y su separación porque el flex sigue viviendo dentro. */
.loading-pas .loading-subs {
  overflow: hidden;
  max-height: 400px;
  opacity: 1;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease, margin-top 0.3s ease;
}
.loading-pas.es-plegat .loading-subs { max-height: 0; opacity: 0; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .loading-pas .loading-subs { transition: none; } }

/* Sub-blocs d'un pas: una targeta per document (adjunts de l'usuari o
   normativa que s'està llegint), amb connector corbat des del carril */
.loading-subs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.loading-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 380px;
  padding: 7px 11px;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.04);
  font-size: 12px;
  color: var(--text-2);
  animation: stepFadeIn 0.35s ease;
}
/* Branqueta que surt del carril vertical cap a la targeta */
.loading-sub::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--border);
}
.loading-sub .ficon { font-size: 13px; }
.loading-sub-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loading-sub.is-mes { background: none; color: var(--text-3); }
.loading-sub.is-mes::before { display: none; }
/* El degradado recorre las tarjetas DE UNA EN UNA: solo la que se está
   leyendo lo lleva, no todas a la vez. */
.loading-pas.is-active .loading-sub.es-llegint .loading-sub-nom {
  color: transparent;
  background-image: linear-gradient(90deg,
    var(--text-3) 0%, var(--text-3) 38%,
    var(--text-1) 50%,
    var(--text-3) 62%, var(--text-3) 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: loadingShimmer 1.5s linear infinite;
}
/* Desfasats entre si, com els subagents de Claude */
.loading-sub:nth-child(2) .loading-sub-nom { animation-delay: -0.6s; }
.loading-sub:nth-child(3) .loading-sub-nom { animation-delay: -1.2s; }
.loading-pas.is-done .loading-sub-nom { color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .loading-pas.is-active .loading-sub-nom { animation: none; color: var(--text-2); background: none; }
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── El procés de la consulta (public/procesConsulta.js) ─────────────
   Les fases fan servir la cronologia de sempre (punt, connector, shimmer
   a la que és en curs, check a les fetes); s'hi afegeix la pendent, el
   detall del moment sota la fase en curs, la capçalera plegada
   («Proceso completado · Ver proceso») i els fets del resum. */
.proces[hidden], .proces [hidden] { display: none !important; }
.proces-fases { list-style: none; margin: 0; }
/* TOTS ELS SENYALS, DEL MATEIX DIÀMETRE (9 px)
   La pendent era un cercle de 7, la que anava un punt de 5 i la feta un disc
   de 9: tres mides a la mateixa columna i es notava. Ara només canvia el
   relleno —buit, ple o amb el check—, mai la mida. */
.proces .loading-pas.is-pending .loading-step { opacity: 0.72; }
.proces .loading-pas.is-pending .loading-ic::before {
  left: 0; top: 0; width: 9px; height: 9px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--text-3);
  opacity: 0.8;
}
/* En curs: el disc ple, amb una pulsació lenta */
.proces .loading-pas.is-active .loading-ic::before {
  left: 0; top: 0; width: 9px; height: 9px;
  background: var(--text-2);
  animation: procesPols 1.6s ease-in-out infinite;
}
@keyframes procesPols { 50% { opacity: 0.35; } }
/* Interrompuda (error o aturada): ni en curs ni feta */
.proces .loading-pas.is-stopped .loading-ic::before {
  left: 0; top: 0; width: 9px; height: 9px;
  background: var(--text-3);
}
/* El detall real del moment, sota la fase en curs */
.proces-detall {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.proces-detall.entra { animation: procesDetall 0.28s ease; }
@keyframes procesDetall { from { opacity: 0; } to { opacity: 1; } }
/* Els fets del resum («12 documentos · Normativa de Barcelona»), seguits */
.proces-fets {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}
.proces-fets li + li::before { content: '·'; margin: 0 6px; }

/* La capçalera: una línia quan el procés es plega */
.proces-cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  min-height: 20px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  animation: stepFadeIn 0.3s ease;
}
/* El senyal de la capçalera és EL MATEIX que el dels passos: 9 px, i al
   mateix carril (9 + 1 + els 8 del buit = els 18 px on comença el text de
   tots). Abans era una caixa de 14 amb un punt de 8 i quedava desplaçat cap
   a la dreta: la columna de símbols sortia torta. */
.proces-cap-ic { position: relative; flex: none; width: 9px; height: 9px; margin-right: 1px; }
.proces-cap-ic::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--text-3);
}
/* Mentre s'escriu la resposta: el punt que batega i el nom de la fase amb
   el shimmer de sempre */
.proces[data-mode="escrivint"] .proces-cap-ic::before { background: var(--text-2); animation: procesPols 1.6s ease-in-out infinite; }
.proces[data-mode="escrivint"] .proces-cap-text {
  color: transparent;
  background-image: linear-gradient(90deg,
    var(--text-3) 0%, var(--text-3) 38%,
    var(--text-1) 50%,
    var(--text-3) 62%, var(--text-3) 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: loadingShimmer 1.5s linear infinite;
}
/* Fet: el mateix check que les fases fetes */
.proces[data-mode="fet"] .proces-cap-ic::before {
  inset: 0;
  background: var(--text-3);
}
.proces[data-mode="fet"] .proces-cap-ic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface-card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 12.4l3.4 3.4 7-7.8' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 12.4l3.4 3.4 7-7.8' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.proces[data-mode="fet"] .proces-cap-text { color: var(--text-3); }
/* Cal concretar: el que crida l'atenció és el text, que es llegeix en negre.
   El punt es queda com el de tots els altres estats —el cercle gris de
   sempre—: en verd semblava un altre tipus d'avís (20-9-2026). */
.proces[data-mode="aclariment"] .proces-cap-text { color: var(--text-1); }
.proces[data-mode="error"] .proces-cap-ic::before { background: var(--danger, #cf4444); }
/* Aturada: el mateix cercle gris. Era un quadradet de 6 px —el símbol de
   parar— i a la columna es llegia com un senyal d'un altre tipus, més petit i
   fora d'eix; qui diu que està aturada és el text. */
.proces[data-mode="aturat"] .proces-cap-ic::before { border-radius: 50%; inset: 0; }
.proces-cap-meta { font-size: 12px; color: var(--text-3); }
.proces-cap-meta::before { content: '·'; margin-right: 8px; }
.proces-veure {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover);
}
.proces-veure:hover { color: var(--text-1); }
.proces-veure:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; border-radius: 3px; }
.proces-veure i { font-size: 13px; transition: transform var(--t-hover); }
.proces.es-obert .proces-veure i { transform: rotate(180deg); }
/* Obert després d'acabar: un marge entre el procés i la resposta. S'obre de
   seguida: el retard de la cronologia és per plegar-la (l'alçada, l'última) */
.proces.es-obert .proces-cos { margin-bottom: 10px; transition-delay: 0s; }
/* Només per als lectors de pantalla */
.proces-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .proces .loading-pas.is-active .loading-ic::before,
  .proces[data-mode="escrivint"] .proces-cap-ic::before { animation: none; }
  .proces[data-mode="escrivint"] .proces-cap-text { animation: none; color: var(--text-2); background: none; }
  .proces-detall.entra, .proces-cap { animation: none; }
}

/* Texto streameado */
.message.assistant .dp-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
}

/* ── Iconos de tipo de fichero ─────────────────────────────────────
   Un único primitivo para todo: la caja mide 1em, así que el tamaño
   lo manda el font-size del contenedor, igual que con las .ti. */
.ficon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.14em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.ficon.is-pdf { background-image: url("icons/filetypes/pdf.svg"); }
.ficon.is-doc { background-image: url("icons/filetypes/doc.svg"); }
.ficon.is-xls { background-image: url("icons/filetypes/xls.svg"); }
.ficon.is-ppt { background-image: url("icons/filetypes/ppt.svg"); }
.ficon.is-img { background-image: url("icons/filetypes/img.svg"); }
.ficon.is-zip { background-image: url("icons/filetypes/zip.svg"); }
.ficon.is-txt { background-image: url("icons/filetypes/txt.svg"); }
.ficon.is-dwg { background-image: url("icons/filetypes/dwg.svg"); }

/* ── Avisos del proyecto ──────────────────────────────────────────
   Viven en su pestaña del detalle; el impacto es lo único que se
   marca en coral, porque es lo único que exige actuar. */
.notif-marcar {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover);
}
.notif-marcar:hover { color: var(--text-1); }

/* ── Avisos · tabla estilo Monitor ─────────────────────────────
   Cada aviso es una fila: número, cuerpo (título en negrita, descripción
   en gris ligero, meta con la fuente), municipio, fecha y un TEMA de color
   —paleta de badges del sistema— para identificar el origen de un vistazo. */
.notif-llista { margin-top: 0; }
.ntf-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--sp-6)); }
.ntf-grid { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.ntf-grid {
  display: grid;
  /* La columna del número, estrecha: el aviso arranca casi en el margen y
     todo lo demás se corre a la izquierda con él. Entre el número y el
     cuerpo: el círculo de visto y las barras de prioridad. */
  grid-template-columns: 20px 22px 22px minmax(280px, 1fr) 170px 80px 130px;
  gap: 0 10px;
  /* Municipio, fecha y tema centrados a la altura de la fila; el cuerpo
     del aviso es quien marca la altura, así que él se queda donde está */
  align-items: center;
  min-width: 640px;
  border-bottom: 1px solid var(--border);
}
/* Mismo gris que las filas y que la tabla de Documentos */
.ntf-thead { border-bottom-color: var(--border); }
/* Sin separadores verticales: la rejilla respira solo con las líneas
   horizontales (decisión del usuario) */
.ntf-thead span {
  padding: 15px 0 10px;
  font-size: 13px; font-weight: 500; color: var(--text-1);
}
.ntf-fila { padding: 14px var(--sp-6); cursor: pointer; transition: background var(--t-hover); }
.ntf-fila:hover { background: rgba(10, 14, 20, 0.02); }
/* El número va ARRIBA a la izquierda, a la altura del título (como la
   referencia), no centrado; visto y prioridad, con él. */
.ntf-num { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; align-self: start; padding-top: 2px; }

/* Círculo de visto: punteado mientras está pendiente; al marcarlo, borde
   sólido y su check. Sustituye al fondo gris de los no leídos. */
.ntf-vist {
  align-self: start;
  margin-top: 2px;
  width: 14px; height: 14px;
  border: 1.5px dashed var(--border-2);
  border-radius: 50%;
  background: none;
  color: transparent;
  font-size: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t-hover), color var(--t-hover);
}
.ntf-vist:hover { border-color: var(--text-3); }
/* Visto: círculo negro relleno con el check en blanco — se lee de un vistazo
   cuál está atendido sin tener que fijarse en el trazo del borde. */
.ntf-vist.is-vist {
  border-style: solid;
  border-color: var(--text-1);
  background: var(--text-1);
  /* Del color de la tarjeta: con --surface-white, en modo noche el check
     era #f2f2f4 sobre #f2f2f4 */
  color: var(--surface-card);
}

/* Prioridad: tres barras de menos a más — cuántas se encienden y de qué
   color lo dice el nivel (baja 1 azul · media 2 amarillas · alta 3 rojas,
   con azul y amarillo claros para que no se confundan con el rojo) */
.ntf-prio {
  align-self: start;
  margin-top: 4px;
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 12px;
}
.ntf-prio i { width: 3px; border-radius: 1px; background: var(--border-2); }
.ntf-prio i:nth-child(1) { height: 5px; }
.ntf-prio i:nth-child(2) { height: 8px; }
.ntf-prio i:nth-child(3) { height: 12px; }
.ntf-prio.is-baixa   i:nth-child(1) { background: var(--prio-baixa); }
.ntf-prio.is-mitjana i:nth-child(-n+2) { background: var(--prio-mitjana); }
.ntf-prio.is-alta    i { background: var(--prio-alta); }
.ntf-cos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ntf-titol { font-size: 13px; font-weight: 500; color: var(--text-1); line-height: 1.4; }
.ntf-desc { font-size: 12.5px; font-weight: 500; color: var(--text-2); line-height: 1.5; }
.ntf-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.ntf-font {
  display: inline-flex; align-items: center; gap: 5px;
  /* Rectángulo con el fillet del sistema, no píldora. El logo se ciñe al
     borde: el hueco a su izquierda es el mismo que arriba y abajo (3px),
     así el recuadro lo abraza en vez de dejarlo flotando. */
  padding: 3px 9px 3px 3px; border-radius: var(--r-sm);
  background: rgba(10, 14, 20, 0.05);
}
.ntf-font .ti { font-size: 12px; }
/* Logo de la fuente: placa rectangular con el fillet, nunca circular */
.ntf-logo {
  width: 16px; height: 16px;
  border-radius: 5px;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-card);
  flex-shrink: 0;
}
.ntf-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Quien abrió un chat: sus iniciales en su color, del tamaño del logo de la fuente */
.pju.ntf-autor { width: 16px; height: 16px; margin: 0; box-shadow: none; font-size: 7px; }
.ntf-logo.is-despatx {
  background: var(--text-1);
  color: var(--surface-card);   /* con --surface-white, en modo noche no se leían */
  font-size: 7px; font-weight: 500; letter-spacing: 0.03em;
}
.ntf-cel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.ntf-data { font-variant-numeric: tabular-nums; }
/* (Lo visto/no visto lo marca el círculo .ntf-vist, ya sin fondo gris) */

/* Varios tópicos por aviso: apilados, cada uno con su color */
.ntf-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Tema de color por origen — mismos pares fondo/tinta que los badges.
   Rectángulo de esquinas suaves (5px, el radio de mini-badge del sistema)
   con un stroke del MISMO color pero más fuerte, como la referencia. */
.ntf-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.ntf-tag.is-impacte   { background: var(--status-draft-bg);      color: var(--status-draft-text); }
.ntf-tag.is-normativa { background: var(--badge-green-bg);       color: var(--badge-green-text); }
.ntf-tag.is-correu    { background: var(--badge-residential-bg); color: var(--badge-residential-text); }
.ntf-tag.is-docs      { background: var(--badge-dotacional-bg);  color: var(--badge-dotacional-text); }
.ntf-tag.is-xat       { background: var(--badge-special-bg);     color: var(--badge-special-text); }
/* Menciones: alguien te ha nombrado en el chat del equipo */
.ntf-tag.is-mencio    { background: var(--badge-residential-bg); color: var(--badge-residential-text); }
/* La etiqueta se clica para quedarse solo con ese tema. Sin borde, como
   todo el relleno de color: al pasar por encima el relleno sube un punto
   de su propio color y, puesta, otro más. */
.ntf-tag-btn {
  font-family: inherit; cursor: pointer;
  transition: box-shadow var(--t-hover);
}
.ntf-tag-btn:hover    { box-shadow: inset 0 0 0 99px color-mix(in srgb, currentColor 8%, transparent); }
.ntf-tag-btn.es-actiu { box-shadow: inset 0 0 0 99px color-mix(in srgb, currentColor 16%, transparent); }

/* Vacío, como la referencia: título y guía centrados, en silencio */
/* UN APARTADO VACÍO
   Centrado en el hueco que queda libre, no colgando de arriba, y con el
   mismo cuerpo de letra en todos: Proyectos, Documentos y Avisos. */
.ntf-buit {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
/* Mismo cuerpo que la guía de debajo: lo distinguen el peso y el color */
.ntf-buit-t { font-size: 13px; font-weight: 500; color: var(--text-1); }
.ntf-buit-s { margin-top: 10px; font-size: 13px; color: var(--text-3); max-width: 52ch; margin-left: auto; margin-right: auto; line-height: 1.6; }

.ntf-demo-nota { margin-top: 12px; font-size: 11px; font-weight: 500; color: var(--text-3); }

/* ── Grupo de usuarios de un proyecto ─────────────────────────────
   Círculos encabalgados: cada uno tapa la mitad del siguiente y el
   primero queda por encima (z-index descendente desde el marcado). */
.pju-grup { display: inline-flex; align-items: center; }
.pju {
  position: relative;
  width: 22px;
  height: 22px;
  /* Se solapan lo justo para que se lean las dos iniciales: con -7 el de
     detrás quedaba tapado a medias. */
  margin-right: -5px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--surface-white);
  /* Todos iguales, en el mismo gris que el avatar del menú lateral, pero
     OPACO: --text-3 es semitransparente y, al solaparse dos círculos, los
     grises se sumaban y salía esa media luna oscura. */
  background: color-mix(in srgb, rgb(10, 14, 20) 42%, var(--surface-card));
  /* El aro del color del papel RECORTA el círculo de detrás: como todos
     van del mismo gris, sin él se verían pegados en un borrón. */
  box-shadow: 0 0 0 2.5px var(--surface-card);
  overflow: hidden;
  cursor: default;
}
.pju:last-child { margin-right: 0; }
/* El contador es texto, no una persona: sin círculo ni relleno */
.pju-mes {
  margin-left: 11px;
  font-size: 12px;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Toda la tipografía de Avisos unificada en el peso estándar del sistema
   (500); los títulos y las cabeceras se quedan en 600, como en el resto. */
#pjx-body-notif .pjx-sc { font-weight: 500; }
#pjx-body-notif .notif-marcar { font-weight: 500; }

/* Un solo botón de filtros (icono de embudo, cuerpo de la barra de
   Documentos); el menú se abre debajo con los ámbitos y el activo lleva
   el relleno gris. Con un filtro puesto, el botón queda marcado. */
/* El embudo va PELADO (sin caja) y a la altura de los títulos de columna:
   fuera de flujo, plantado sobre la zona vacía a la izquierda de «Aviso» */
#pjx-body-notif { position: relative; }
.ntf-filtre-wrap { position: absolute; top: 13.5px; left: var(--sp-6); display: inline-flex; z-index: 20; }
.ntf-filtre-btn {
  border: none; background: none; box-shadow: none;
  width: auto; height: auto; padding: 4px;
  color: var(--text-3);
  transition: color var(--t-hover);
}
.ntf-filtre-btn:hover { color: var(--text-1); background: none; border: none; }
.ntf-filtre-btn .ti { font-size: 16px; }
.ntf-filtre-btn.is-filtrat { background: none; border: none; color: var(--text-1); }
.ntf-filtre-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  min-width: 180px;
  background: var(--surface-card);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ntf-filtre-menu.hidden { display: none; }
.ntf-filtre-menu .pjx-sc {
  width: 100%;
  justify-content: flex-start;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-1);
  font-size: 13px;
  text-align: left;
}
.ntf-filtre-menu .pjx-sc:hover { background: rgba(10, 14, 20, 0.05); }
.ntf-filtre-menu .pjx-sc.on { background: rgba(10, 14, 20, 0.06); font-weight: 500; }

/* ── SOLTAR UN ARCHIVO ENCIMA DEL CHAT ────────────────────────────────
   Al arrastrar un documento por encima, la pantalla de trabajo se vela en
   gris —el mismo cristal del fondo de la casa, nada de azul— y en medio
   sale una tarjeta blanca diciendo dónde va a caer. El velo se queda
   DENTRO del rectángulo principal: el lateral no se toca, que desde ahí no
   se suelta nada. */
.drop-glass {
  position: absolute; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 20, 0.10);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  animation: drop-glass-in 140ms ease-out;
  /* El velo no puede robarle el «drop» a la ventana */
  pointer-events: none;
}
@keyframes drop-glass-in { from { opacity: 0; } to { opacity: 1; } }
.drop-glass-card {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: min(92vw, 420px);
  padding: 18px 22px;
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  animation: drop-glass-card-in 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes drop-glass-card-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.drop-glass-ico {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 100px;   /* pill, de la guía */
  background: rgba(10, 14, 20, 0.06);
  color: var(--text-1); font-size: 16px;             /* Title, de la guía */
}
.drop-glass-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drop-glass-tit { font-size: 15px; font-weight: 600; color: var(--text-1); }
.drop-glass-sub { font-size: 13px; color: var(--text-2); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
  .drop-glass, .drop-glass-card { animation: none; }
}

/* ── La cerca web, mentre passa (public/recercaWeb.js) ───────────────
   Sota el procés i abans de la resposta: cada consulta, cada pàgina que
   obre i, en acabar, les que la resposta cita. El mateix llenguatge que
   el procés —grisos, 12-13 px, el punt que batega, el shimmer a la que és
   en curs— i les mateixes variables, o sigui que el mode nit ve de sèrie.
   L'únic color és el del monograma de cada domini, i el tapa el favicon. */
.rweb { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); animation: stepFadeIn 0.3s ease; }
.rweb[hidden], .rweb [hidden] { display: none !important; }
.rweb-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-height: 20px; }
/* El globus, al mateix carril de 9 px que els senyals del procés */
.rweb-ic {
  position: relative; flex: none; width: 13px; height: 13px; margin: 0 -2px 0 -2px;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rweb[data-fase="buscant"] .rweb-ic, .rweb[data-fase="decidint"] .rweb-ic { background: var(--text-2); animation: procesPols 1.6s ease-in-out infinite; }
.rweb-titol { color: var(--text-2); }
.rweb[data-fase="buscant"] .rweb-titol, .rweb[data-fase="decidint"] .rweb-titol {
  color: transparent;
  background-image: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 38%, var(--text-1) 50%, var(--text-3) 62%, var(--text-3) 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: loadingShimmer 1.5s linear infinite;
}
.rweb[data-fase="acabada"] .rweb-titol, .rweb[data-fase="aturada"] .rweb-titol { color: var(--text-3); }
.rweb[data-fase="fallada"] .rweb-ic { background: var(--danger, #cf4444); }
.rweb-meta { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rweb-meta::before { content: '·'; margin-right: 8px; }
.rweb-canvi, .rweb-veure {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; color: var(--text-3);
  cursor: pointer; transition: color var(--t-hover);
}
.rweb-canvi { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border); }
.rweb-canvi:hover, .rweb-veure:hover { color: var(--text-1); }
.rweb-canvi:disabled { cursor: default; color: var(--text-3); }
.rweb-canvi:focus-visible, .rweb-veure:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; border-radius: 3px; }
.rweb-veure i { font-size: 13px; transition: transform var(--t-hover); }
.rweb.es-obert .rweb-veure i { transform: rotate(180deg); }
.rweb-avis { margin: 2px 0 0 19px; font-size: 12px; color: var(--text-3); }

/* Les files: 16 px de favicon, el text i l'estat a la dreta */
.rweb-files { list-style: none; margin: 4px 0 0 19px; padding: 0; }
.rweb-fila {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 8px;
  padding: 3px 0; font-size: 12px; line-height: 1.45;
  /* `backwards`, NO `both`: una animación rellenada hacia delante pisa para
     siempre la transición de la misma propiedad, y la fila se quedaba clavada
     en opacidad 1 —al esconder las fuentes no se desvanecía nada, la caja las
     guillotinaba por abajo—. Rellenando solo hacia atrás, en cuanto acaba de
     entrar manda la transición. */
  animation: rwebEntra 0.32s ease backwards;
}
@keyframes rwebEntra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Puesta con la caja cerrada: ya se verá al abrirla, con las demás */
.rweb-fila.sense-entrada { animation: none; }
.rweb-cos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.rweb-txt { color: var(--text-2); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rweb-fila[data-tipus="pagina"] .rweb-txt { color: var(--text-1); }
.rweb-det { color: var(--text-3); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* LO QUE HA ENCONTRADO CADA BÚSQUEDA, EN SU CAJA
   Antes eran unos favicones diminutos en fila: decían cuántas páginas, no
   cuáles. Ahora cada resultado va en su línea —dibujo, título y dominio— dentro
   de una caja con su trazo. La caja va sangrada bajo la consulta que la
   encontró, para que se lea de quién es. */
.rweb-res {
  /* La fila es una rejilla de tres columnas (dibujo · texto · estado): la caja
     va en la línea de abajo, desde la columna del texto hasta el final. Así
     queda sangrada bajo su consulta sin tener que calcular ningún margen. */
  grid-column: 2 / -1;
  /* Rejilla, no columna: es la receta de la casa para abrir algo de 0 a su
     alto (la misma de «Ver proceso»). El cuerpo de dentro es lo que se recorta. */
  display: grid; grid-template-rows: 1fr;
  margin: 6px 0 2px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-card);
  overflow: hidden;
  /* PRIMERO SE HACE LA CAJA */
  animation: rwebCaixa 0.34s cubic-bezier(0.32, 0, 0.24, 1) backwards;
}
.rweb-res-cos { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.rweb-res[hidden] { display: none; }
/* La caja se dibuja sola: crece de nada a su alto mientras aparece. Como está
   vacía por dentro —los resultados todavía no han entrado— se ve el rectángulo
   hacerse antes de que llegue nada. */
@keyframes rwebCaixa {
  from { grid-template-rows: 0fr; opacity: 0; }
  to   { grid-template-rows: 1fr; opacity: 1; }
}
/* Y DESPUÉS ENTRAN LOS SITIOS, uno detrás de otro, con el mismo salto de
   4 px hacia arriba que las filas del proceso. El primero arranca cuando la
   caja va por dos tercios: se solapan lo justo para que sea un solo gesto. */
.rweb-res-cos > * { animation: rwebResFila 0.28s cubic-bezier(0.33, 0, 0.35, 1) backwards; animation-delay: 0.22s; }
.rweb-res-cos > :nth-child(2) { animation-delay: 0.28s; }
.rweb-res-cos > :nth-child(3) { animation-delay: 0.34s; }
.rweb-res-cos > :nth-child(4) { animation-delay: 0.40s; }
.rweb-res-cos > :nth-child(n + 5) { animation-delay: 0.46s; }
@keyframes rwebResFila {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.rweb-res-fila {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; min-width: 0;
}
/* Una raya finísima entre resultados: se leen como una lista, no como un bloque */
.rweb-res-fila + .rweb-res-fila { border-top: 1px solid rgba(10, 14, 20, 0.05); }
/* UNA SOLA TINTA POR NIVEL
   Los títulos iban en negro y pesaban más que la consulta que los encontró,
   que va en gris: la caja gritaba más que su propio rótulo. Ahora el título
   lleva el gris del texto que acompaña, igual que la consulta, y el dominio el
   de lo accesorio. El tamaño no cambia en todo el bloque: lo hereda de la
   fila, que son 12 px. */
.rweb-res-t {
  flex: 1; min-width: 0; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rweb-res-d { flex: 0 0 auto; color: var(--text-3); }
/* Los que no caben: se cuentan y ya */
.rweb-res-mes {
  padding: 5px 10px; color: var(--text-3);
  border-top: 1px solid rgba(10, 14, 20, 0.05);
}

/* SE DESPLIEGA COMO «VER PROCESO»
   La misma receta: una rejilla que va de 0fr a 1fr, la lista recortada dentro
   y un pequeño tirón hacia arriba al plegarse. Es lo que hace que abrir las
   fuentes se sienta igual que abrir el proceso, en vez de aparecer de golpe. */
.rweb-desplega {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
/* IRSE CUESTA MÁS QUE LLEGAR
   Al empezar a escribir la respuesta, la lista se pliega sola. Con la misma
   velocidad que al abrirla se iba de un tirón: son 500 o 600 px cerrándose en
   cuatro décimas y se leía como un portazo. Plegándose tarda casi el doble y
   la curva frena mucho al final, así que se va sin que se note el momento. Se
   pone SOLO en el estado plegado: la duración que manda es la del estado al
   que se va, así que abrir sigue costando lo de antes. */
.rweb-desplega.es-plegat {
  grid-template-rows: 0fr; pointer-events: none;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.33, 0, 0.18, 1);
}
.rweb-desplega > .rweb-files {
  overflow: hidden; min-height: 0;
  transition: transform 0.55s cubic-bezier(0.32, 0, 0.24, 1);
}
.rweb-desplega.es-plegat > .rweb-files {
  transform: translateY(-8px);
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.33, 0, 0.18, 1);
}
/* PRIMERO SE VA LO QUE HAY, DESPUÉS SE CIERRA EL HUECO
   Las filas se apagan en un cuarto de segundo, todas a la vez; el hueco tarda
   0,7 s en cerrarse, así que lo que se ve encogerse ya está vacío. Antes iban
   a la par —y encima ni se apagaban, por el `both` de arriba—: la caja cortaba
   los resultados por la mitad según bajaba, con sus bordes y todo. Eso era el
   ruido. Y en cascada era peor: con cada consulta llevando su caja de 150 px,
   apagarlas a destiempo se veía como un parpadeo por partes. */
.rweb-desplega .rweb-fila { transition: opacity 0.42s cubic-bezier(0.33, 0, 0.35, 1); }
.rweb-desplega.es-plegat .rweb-fila { opacity: 0; transition-duration: 0.26s; }
@media (prefers-reduced-motion: reduce) {
  .rweb-desplega, .rweb-desplega > .rweb-files, .rweb-desplega .rweb-fila { transition: none; }
}
.rweb-est { font-size: 11px; color: var(--text-3); white-space: nowrap; transition: color var(--t-hover); }

/* El favicon, o la inicial del domini sobre el seu color */
.rweb-fav {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; overflow: hidden;
  background: var(--rweb-mono, var(--text-3)); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1;
}
.rweb-fav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.2s ease; }
.rweb-fav.te-img { background: transparent; color: transparent; }
.rweb-fav.te-img img { opacity: 1; }
/* Una consulta no té domini: la lupa */
.rweb-fav.es-cerca { background: var(--text-3); border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E") center / 13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Els estats: buscant i llegint, amb el shimmer; usada, en negre amb el
   check; descartada, apagada */
.rweb-fila[data-estat="buscant"] .rweb-est, .rweb-fila[data-estat="llegint"] .rweb-est {
  color: transparent;
  background-image: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 38%, var(--text-1) 50%, var(--text-3) 62%, var(--text-3) 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: loadingShimmer 1.5s linear infinite;
}
.rweb-fila[data-estat="usada"] .rweb-est { color: var(--text-1); }
.rweb-fila[data-estat="usada"] .rweb-est::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rweb-fila[data-estat="descartada"] { opacity: 0.55; }
.rweb-fila[data-estat="descartada"] .rweb-txt { text-decoration: line-through; text-decoration-color: var(--text-3); }
.rweb-mes { margin: 2px 0 0 43px; font-size: 12px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .rweb, .rweb-fila, .rweb-ic, .rweb-res, .rweb-res-cos > * { animation: none !important; }
  .rweb[data-fase="buscant"] .rweb-titol, .rweb[data-fase="decidint"] .rweb-titol,
  .rweb-fila[data-estat="buscant"] .rweb-est, .rweb-fila[data-estat="llegint"] .rweb-est {
    animation: none; color: var(--text-2); background: none;
  }
}

/* ── Completar con internet ───────────────────────────────────────────
   La finestra d'aclariment de sempre (vnc-card): una frase, en negre, i les
   opcions (public/app.js, mostrarFinestraOpcions). Una resposta combinada
   porta la marca «Con búsqueda web». */
.cweb-text { margin: 2px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-1); }

/* ── La profunditat de la cerca web, a la barra (public/profunditatWeb.js)
   Amb el globus: línies verticals (extensa) i horitzontals (estàndard), entre
   el globus i la carpeta. La triada, en el blau del globus; l'altra, atenuada
   sense desaparèixer. En triar-la, les seves línies es tornen a dibuixar una
   rere l'altra. */
.prof-web { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.prof-web.hidden { display: none; }
.pw-btn {
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--text-1); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .32; transition: opacity var(--t-hover), color var(--t-hover);
}
.pw-btn:hover { opacity: .6; }
.pw-btn[aria-checked="true"], .pw-btn[aria-checked="true"]:hover { opacity: 1; color: var(--blau); }
.pw-btn:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.pw-btn svg { width: 18px; height: 18px; overflow: visible; }
.pw-btn .pw-l { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pw-btn.pw-anim .pw-l { animation: pw-redibuixa .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes pw-redibuixa {
  0%   { stroke-dashoffset: 1; opacity: .25; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-btn { transition: none; }
  .pw-btn.pw-anim .pw-l { animation: none; }
}

/* El globus de l'Agent: el mateix dibuix que el mode Web del xat principal;
   gris apagat, blau encès */
.pjd-web-btn .ti-world-search { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.pjd-web-btn .ti-world-search::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("icons/web.svg?v=1") no-repeat center / contain;
          mask: url("icons/web.svg?v=1") no-repeat center / contain;
}
/* APAGADO, al pasar por encima se pone AZUL, no negro. El resto de la barra va
   de gris a negro, pero el globo es el único que enciende algo, y el azul de la
   casa dice de antemano lo que va a hacer. El `:not(.is-on)` no es un capricho:
   la regla gris → negro de styles.css tiene el mismo peso y se carga después,
   así que sin él ganaba ella. */
.pjd-pill-wrap .pill-bar .pjd-web-btn:not(.is-on):hover { color: var(--blau); }
/* ENCENDIDO: el dibujo en azul sobre la placa BLANCA de la casa, la misma del
   pergamino de al lado. Antes el círculo también era azul y se comía el icono;
   el color lo pone el dibujo y la placa solo dice que está pulsado. */
.pjd-pill-wrap .pill-bar .pjd-web-btn.is-on,
.pjd-pill-wrap .pill-bar .pjd-web-btn.is-on:hover {
  color: var(--blau);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 6px rgba(10, 14, 20, 0.06);
}
.pjd-pill-wrap .pill-bar .pjd-web-btn.is-on:hover {
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.12), 0 3px 10px rgba(10, 14, 20, 0.10);
}
/* A la barra de l'Agent tot el de l'esquerra va amb `order: 1` (styles.css):
   les icones també, perquè quedin entre el globus i la carpeta */
.pjd-pill-wrap .prof-web { order: 1; margin-right: 4px; align-self: center; }
.cweb-marca {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 8px;
  font-size: 12px; color: var(--text-3);
}
.cweb-marca .rweb-ic { margin: 0; }

/* Els enllaços a pàgines web dins d'una resposta (renderitzarText): subratllats
   fins, del color del text; s'obren fora */
a.enllac-web { color: inherit; text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 2px; transition: text-decoration-color var(--t-hover); }
a.enllac-web:hover { text-decoration-color: currentColor; }