/* ─────────────────────────────────────────────────────────────────
   Cyvix — View styles  (Legora design system)
   ───────────────────────────────────────────────────────────────── */

/* ============================================================
   FONDO DE LA APP — Liquid Glass
   ============================================================ */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Los botones y campos no heredan la letra por defecto (salían en Arial):
   toda la interfaz va con la tipografía de la casa */
button, input, textarea, select { font-family: inherit; }

body {
  font-family: var(--font-sans);
  color: var(--text-1);
  background: var(--bg);
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}

#app, #auth-overlay {
  position: relative;
  z-index: 2;
}

/* En oscuro, el fondo de fuera es PLANO: el mismo gris que los rellenos,
   sin auroras ni degradados detrás de los paneles. */
[data-theme="dark"] body {
  background: var(--bg);
}

[data-theme="dark"] body::before {
  background: none;
  animation: none;
}

[data-theme="dark"] body::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR WORKSPACE (despacho + proyectos)
   ══════════════════════════════════════════════════════════════════ */

/* Proyectos — fluye naturalmente tras los nav items */
.sidebar-workspace {
  flex-shrink: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--t-panel), opacity var(--t-panel);
}

.sidebar.is-open .sidebar-workspace {
  max-height: 300px;
  opacity: 1;
}

/* Separador fino */
.sidebar-thin-sep {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Nombre del despacho */
.sidebar-despacho {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: var(--text-xs);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-despacho .ti {
  font-size: 13px;
  flex-shrink: 0;
  color: var(--text-3);
}

.sidebar-despacho-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
}

/* Header "MIS PROYECTOS" */
.sidebar-projects-section { overflow: hidden; }

.sidebar-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

.sidebar-section-lbl {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-3);
}

.sidebar-section-add {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: var(--r-sm);
  transition: background var(--t-hover);
}

.sidebar-section-add:hover { background: rgba(var(--glass-rgb), 0.55); }

/* Lista de proyectos */
.sidebar-proj-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 8px 6px;   /* alineat amb .sidebar-group (icones a la mateixa X) */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

/* Proyecto item */
.sidebar-proj-item {
  display: flex;
  flex-direction: column;
}

/* Alineat amb .sidebar-item: mateix padding, gap i mida d'icona */
.sidebar-proj-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  text-align: left;
  border-radius: var(--r-sm);
  transition: color var(--t-hover);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* Hover: sense requadre gris — només ressalt tipogràfic */
.sidebar-proj-btn:hover { background: none; color: var(--text-1); }

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

.sidebar-proj-btn:hover .sidebar-proj-icon { color: var(--text-1); }

.sidebar-proj-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.sidebar-proj-chevron {
  font-size: 12px;
  color: var(--border-2);
  flex-shrink: 0;
  transition: transform var(--t-panel), color var(--t-hover);
}

.sidebar-proj-item.is-open .sidebar-proj-chevron {
  transform: rotate(90deg);
  color: var(--text-3);
}

/* Subitems */
.sidebar-proj-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-panel);
}

.sidebar-proj-item.is-open .sidebar-proj-sub {
  max-height: 120px;
}

.sidebar-sub-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 38px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-2);
  text-align: left;
  border-radius: var(--r-sm);
  transition: background var(--t-hover), color var(--t-hover);
  width: 100%;
}

.sidebar-sub-btn .ti { font-size: 12px; color: var(--border-2); flex-shrink: 0; }

.sidebar-sub-btn:hover { background: var(--bg-3); color: var(--text-1); }
.sidebar-sub-btn:hover .ti { color: var(--text-3); }

/* Vincular nuevo proyecto */
.sidebar-vincular-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--accent);
  text-align: left;
  border-radius: var(--r-sm);
  transition: background var(--t-hover);
  width: 100%;
  margin-top: 2px;
}

.sidebar-vincular-btn .ti { font-size: 14px; flex-shrink: 0; }
.sidebar-vincular-btn:hover { background: rgba(var(--glass-rgb), 0.52); }

/* ══════════════════════════════════════════════════════════════════
   MODAL VINCULAR PROYECTO
   ══════════════════════════════════════════════════════════════════ */

.proj-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlayIn 200ms ease both;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.proj-modal {
  background: rgba(var(--glass-rgb), 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(var(--glass-rgb), 0.88);
  border-radius: var(--r-xl);
  padding: 32px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-glass);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  animation: modalIn 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.proj-modal-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 32px;
}

.proj-modal-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
}

.proj-modal-header p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.6;
}

.proj-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
  border: none;
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background var(--t-hover), color var(--t-hover);
}

.proj-modal-close:hover { background: none; color: var(--text-1); }

/* Drop zone */
.proj-drop-zone {
  border: 2px dashed #D1D5DB;
  border-radius: var(--r);
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #FAFAFA;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  text-align: center;
}

.proj-drop-zone:hover,
.proj-drop-zone.drag-over {
  border-color: #2563EB;
  background: #EFF6FF;
}

.proj-drop-icon {
  font-size: 44px;
  color: #D1D5DB;
  margin-bottom: 4px;
}

.proj-drop-zone:hover .proj-drop-icon { color: #93C5FD; }

.proj-drop-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.proj-drop-or {
  font-size: 12px;
  color: #9CA3AF;
}

.proj-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border: 1.5px solid #2563EB;
  background: transparent;
  color: #2563EB;
  border-radius: var(--r);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.proj-select-btn:hover { background: #EFF6FF; }

/* Campo nombre */
.proj-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.proj-input {
  border: 1px solid #E5E7EB;
  border-radius: var(--r);
  padding: 10px 14px;
  font: inherit;
  font-size: 13.5px;
  color: #111827;
  background: #F9FAFB;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
}

.proj-input::placeholder { color: #9CA3AF; }
.proj-input:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); background: var(--surface-card); }

/* Footer del modal */
.proj-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.proj-cancel-btn {
  padding: 0 20px;
  height: 38px;
  border: 1px solid #E5E7EB;
  background: var(--surface-card);
  color: #374151;
  border-radius: var(--r);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}

.proj-cancel-btn:hover { background: #F9FAFB; }

.proj-vincular-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 38px;
  background: #111827;
  color: var(--surface-white);
  border: none;
  border-radius: var(--r);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.proj-vincular-confirm-btn:hover { background: #374151; }

.proj-modal-fine {
  margin: 0;
  font-size: 11px;
  color: #9CA3AF;
  text-align: center;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   CHAT VIEW
   ══════════════════════════════════════════════════════════════════ */

.chat-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Profile panel */
.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  background: transparent;
  border-right: 1px solid rgba(var(--glass-rgb), 0.45);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.profile-panel h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

#profile {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  flex: 1;
}

#profile > div {
  display: grid;
  gap: 3px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

#profile dt {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

#profile dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}

.btn-reset {
  border: 1px solid rgba(var(--glass-rgb), 0.65);
  background: rgba(var(--glass-rgb), 0.42);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  border-radius: var(--r);
  padding: 7px 12px;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  flex-shrink: 0;
}

.btn-reset:hover {
  background: rgba(232, 80, 26, 0.08);
  color: var(--coral);
  border-color: rgba(232, 80, 26, 0.30);
}

/* ══════════════════════════════════════════════════════════════════
   CHAT PANEL — base + estado activo
   ══════════════════════════════════════════════════════════════════ */

.chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  position: relative;
}

/* ── ESTADO ACTIVO: mensajes + input en columna central 780px ── */
.chat-panel.has-messages {
  justify-content: flex-start;
  align-items: center;      /* centra los hijos horizontalmente */
  padding: 0;               /* anula el padding del .chat-area */
}

/* Columna de mensajes: l'scroll ocupa TOT l'ample del panell (la barra queda
   a l'extrem dret del requadre) i el contingut es centra amb padding lateral
   calculat, mantenint la columna de lectura de ~732px. */
.chat-panel.has-messages > #messages {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* La misma columna de lectura que el Agente: 760px centrados, con 24px de
     aire mínimo a los lados. De margen a margen quedaba demasiado ancho. */
  padding: 32px max(24px, calc((100% - 760px) / 2)) 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

.chat-panel.has-messages > #messages::-webkit-scrollbar { width: 4px; }
.chat-panel.has-messages > #messages::-webkit-scrollbar-track { background: transparent; }
.chat-panel.has-messages > #messages::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 2px; }

/* Input — mismo ancho que los mensajes */
.chat-panel.has-messages > .composer {
  flex-shrink: 0;
  width: 100%;
  max-width: 780px;
  padding: 0 24px 24px;
  position: relative;
}

/* Separador sutil sobre el input */
.chat-panel.has-messages > .composer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--glass-rgb),0.55), transparent);
}

/* EL HUECO DEL FINAL
   Lo que permite que la pregunta suba a lo alto de la pantalla: sin algo
   debajo, el chat no tiene a dónde desplazarse. Su alto lo pone el JS
   (ajustarBuitFinal) y vale 0 en cuanto la respuesta ocupa la pantalla. */
.chat-buit-final { flex: 0 0 auto; width: 100%; height: 0; pointer-events: none; }

/* Ocultar messages cuando no hay .has-messages */
.messages { display: none; }
.chat-panel.has-messages > #messages { display: flex; }

/* ── MENSAJES ── */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message {
  display: flex;
  flex-direction: column;
  animation: msgIn 0.28s ease-out both;
  /* Sense will-change: promou CADA missatge a capa pròpia per sempre; en una
     conversa llarga satura el compositor i és el que fa saltar l'scroll. */
}

/* Usuario: burbuja a la derecha */
.message.user {
  align-self: flex-end;
  max-width: 75%;
  align-items: flex-end;   /* el avatar se alinea con el borde de la burbuja */
}

/* Avatar de quien pregunta: iniciales de nombre y apellido, siempre en gris.
   No usa los colores de identidad de --avatar-N porque no distingue a nadie
   —siempre es el mismo usuario—; aquí el color solo sería ruido. */
.msg-avatar {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--text-3);
  color: var(--surface-card);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
/* Con foto de perfil (posaFotoAvatarXat): la foto a sangre y sin iniciales */
.msg-avatar.has-foto { background-size: cover; background-position: center; color: transparent; }

/* Asistente: burbuja a la izquierda — mismo ancho que el Agente (760px). */
.message.assistant {
  align-self: flex-start;
  max-width: 760px;
  width: 100%;
}

/* Reset del .bubble — el visual va en .message.X .bubble */
.bubble {
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.6;
}

/* Burbuja usuario — recuadre gris arrodonit (igual que el pop-up de normativa) */
.message.user .bubble {
  background: rgba(10, 14, 20, 0.06);
  color: var(--text-1);
  padding: 10px 14px;
  border-radius: var(--r-lg);
  box-shadow: none;
}

/* Burbuja asistente — glass.
   SIN backdrop-filter a propósito: detrás de los mensajes solo hay superficie
   plana, así que el blur no aporta nada visible, pero obliga al navegador a
   recomponer el fondo difuminado de CADA burbuja en cada frame de scroll —
   es la causa principal del tirón al subir mientras se escribe. */
/* Sin sombra: la burbuja no flota sobre nada, va en el hilo. La tenía
   declarada con un token inexistente (--shadow-lift), así que el navegador
   la ignoraba; al arreglar el token apareció una sombra que nunca se quiso. */
.message.assistant .bubble {
  background: rgba(var(--glass-rgb), 0.62);
  border: 1px solid rgba(var(--glass-rgb), 0.72);
  color: var(--text-1);
  padding: 14px 18px;
  border-radius: 20px 20px 20px 6px;
}

/* ERROR DEL ASISTENTE: EL PUNTO ROJO Y YA
   Tenía un relleno rosa y un borde rojo alrededor de todo el mensaje, y una
   consulta que no sale no es una alarma: es una respuesta que no ha podido
   ser. El punto rojo de la cabecera ya lo dice, y lo dice en el mismo sitio
   donde se lee el estado de todas las demás.
   Así que la burbuja es la de siempre —la misma que una respuesta buena— y
   solo cambia el color del texto. */
.message.assistant.error .bubble {
  color: var(--text-2);
}

.sources, .references {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  border-top: 1px solid rgba(10, 14, 20, 0.08);
  padding-top: 12px;
}

.references h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.source, .reference {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(var(--glass-rgb), 0.65);
  border-radius: var(--r);
  background: rgba(var(--glass-rgb),0.88);
}

.source a, .reference a {
  flex: 0 0 auto;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}

/* Composer — fijo al fondo del chat */
.composer {
  flex-shrink: 0;
  padding: 14px max(48px, 5vw) 22px;
  border-top: none;
  background: transparent;
  display: flex;
  flex-direction: column;      /* el disclaimer va SOTA la barra, no al costat */
  align-items: center;
}

/* Pill más ancha en el chat activo */
.composer .pill-wrap {
  width: min(96%, 760px);
}

/* Pill más ancha en el chat activo */
.composer .pill-wrap {
  width: min(92%, 760px);
}

.composer-send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--action);
  color: var(--action-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: background var(--t-hover), transform var(--t-hover);
}

.composer-send:hover {
  background: var(--action-hover);
}

.composer-send:active { transform: scale(0.93); }

/* ══════════════════════════════════════════════════════════════════
   NORMATIVA VIEW
   ══════════════════════════════════════════════════════════════════ */

#view-normativa { overflow: hidden; padding: var(--sp-6) var(--sp-6) 0; }

.normativa-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.normativa-list-panel {
  display: flex;
  flex-direction: column;
  width: 340px;
  min-width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-2);
}

.normativa-header {
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.normativa-header h2 {
  margin: 0 0 var(--sp-3);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
}

#doc-search {
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 9px 12px 9px 36px;
  font: inherit;
  font-size: 13px;
  outline: none;
  background: var(--bg-3);
  color: var(--text-1);
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  -webkit-appearance: none;
}

#doc-search::placeholder { color: var(--text-3); }
#doc-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background-color: var(--bg-2);
}

.doc-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

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

.doc-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover);
}

.doc-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow);
}

.doc-card.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.doc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--accent-dim);
  color: var(--accent);
  white-space: nowrap;
  align-self: flex-start;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.doc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.4;
}

.doc-muni {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* Doc viewer */
.doc-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.doc-viewer-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}

.doc-viewer-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-viewer-newtab {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}

.doc-viewer-newtab:hover { text-decoration: underline; }

.doc-viewer-close {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
  flex-shrink: 0;
  transition: background var(--t-hover), color var(--t-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-viewer-close:hover { background: var(--bg-3); color: var(--text-1); }

.doc-iframe { flex: 1; width: 100%; border: none; }

.doc-viewer-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 13px;
  flex-direction: column;
  gap: 8px;
}

.doc-viewer-placeholder-icon { font-size: 36px; opacity: 0.3; }

/* ══════════════════════════════════════════════════════════════════
   LICENSE FILL
   ══════════════════════════════════════════════════════════════════ */

.license-fill h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text-1); }
.license-fill p  { margin: 0 0 10px; color: var(--text-2); }

.icio-box {
  background: var(--green-bg);
  border-left: 2px solid var(--green);
  padding: 10px 14px;
  border-radius: 0 var(--r) var(--r) 0;
  margin: 10px 0;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--green);
}

.advertencies {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--amber);
}

.advertencies li { margin-bottom: 4px; }

.formulari {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin-top: 12px;
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-family: var(--font-mono);
}

.formulari dt { color: var(--text-3); font-weight: 500; }
.formulari dd { margin: 0; color: var(--text-1); }

.pdf-download-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pdf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--surface-white);
  border: none;
  border-radius: var(--r);
  padding: 9px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-hover);
}

.pdf-download-btn:hover { background: var(--accent-hover); }

/* ══════════════════════════════════════════════════════════════════
   MAPA CATASTRAL
   ══════════════════════════════════════════════════════════════════ */

/* LAS CAPAS DEL MAPA, DENTRO DEL MAPA
   El buscador y el selector de capa flotan a z-index 1000 (la ficha no:
   cuelga del body)… Sin una capa propia competían con TODO lo del área
   principal, y al abrir Configuración (a 900) se quedaban pintados encima. `isolation`
   encierra esos números dentro del mapa: entre ellos se siguen ordenando
   igual, pero ya no salen de aquí. */
#view-mapa { overflow: hidden; flex: 1; min-height: 0; isolation: isolate; }

/* Mapa a pantalla completa con overlays flotantes */
.mapa-map-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
#map-container { position: absolute; inset: 0; z-index: 0; }

/* Velo mientras el mapa carga.
   Va por encima de TODO lo que flota sobre el mapa —el buscador y el selector
   de capas están a 1000—: sin mapa detrás, esos
   controles no sirven para nada, y dejarlos asomar sobre un fondo vacío se ve
   peor que taparlos. */
.mapa-carregant {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--bg);
  transition: opacity .3s ease;
}
/* Se apaga con opacidad y deja de estorbar al ratón; el nodo se retira del
   DOM al acabar la transición. */
.mapa-carregant.fora { opacity: 0; pointer-events: none; }
.mapa-carregant-txt { margin: 0; font-size: var(--text-sm); color: var(--text-3); }

/* ── Panel flotante de información de parcela ── */
/* La ficha de la parcela es un panel de los grandes, como el de documentos:
   ocupa la altura entera de la pantalla y la mitad derecha. La ficha del
   Catastro trae inmuebles, plantas y fotos: en una columna de 332px no cabía
   sin hacer scroll a cada paso. */
.mapa-info-panel {
  position: fixed;
  top: var(--app-padding);
  bottom: var(--app-padding);
  right: var(--app-padding);
  /* Más estrecha que el visor de documentos: una ficha no necesita media
     pantalla. Al pasar de la parcela a un documento (y al revés) el panel
     no salta: se estira o se encoge hasta el ancho del que entra (.es-morf).
     Un solo número que tocar: --fitxa-w. */
  --fitxa-w: 480px;
  width: min(var(--fitxa-w), calc(50% - var(--app-padding)));
  max-width: calc(100% - var(--app-padding) * 2);
  /* POR DEBAJO DE LOS POP-UPS
     La ficha cuelga del body (fuera del mapa), así que compite con todas
     las capas de la página. Por encima del visor de documentos (100-300) y
     por debajo de los pop-ups: el buscador y compañía van a 1000, «Nuevo
     proyecto» a 6000. Con 1100 tapaba la mitad del buscador en pantallas
     estrechas, donde la ficha sube desde abajo. */
  z-index: 950;
  display: flex;
  flex-direction: column;
  /* Blanc sòlid opac (sense liquid glass) */
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: -8px 0 20px rgba(15, 25, 40, 0.06);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity var(--t-panel), transform var(--t-panel), visibility var(--t-panel);
}

.mapa-info-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* Cambiando de pestaña entre parcela y documento: ni deslizar ni fundir.
   Los dos paneles saltan al estado nuevo en el mismo fotograma. */
body.canvi-pestanya .mapa-info-panel,
body.canvi-pestanya .pdf-panel,
body.canvi-pestanya .main-area > .app-content {
  transition: none !important;
  animation: none !important;
}
/* EL MAPA SIGUE DEBAJO DE LA FICHA
   En el mapa no se aparta el contenido: el plano llega hasta el borde y la
   ficha (o el documento) flota encima, sin la franja de fondo ni la línea
   entre los dos. Lo que la ficha tapa ya lo tiene en cuenta el encuadre de
   la parcela. Los mandos del mapa sí se apartan, para no quedar debajo. */
body.visor-al-costat .main-area > .app-content:has(#view-mapa:not(.hidden)) { padding-right: 0; }
body.visor-al-costat #view-mapa .maplibregl-ctrl-bottom-right,
body.visor-al-costat #view-mapa .maplibregl-ctrl-top-right { right: var(--visor-w, 0px); transition: right var(--t-panel); }
/* CAMBIO DE PESTAÑA ENTRE ANCHOS DISTINTOS
   La ficha mide 420px y el visor media pantalla. Al cambiar de una a otro
   el panel que entra arranca con el ancho del que se va y transita hasta el
   suyo, y el contenido de la izquierda le acompaña (mismo tiempo, misma
   curva). Solo durante ese instante se anima la anchura. */
.mapa-info-panel.es-morf { transition: width var(--t-panel), opacity var(--t-panel), transform var(--t-panel), visibility var(--t-panel); will-change: width; }
.pdf-panel.es-morf { transition: width var(--t-panel), transform var(--t-panel), box-shadow var(--t-panel); will-change: width; }
/* Plegada: se aparta a la derecha pero sigue viva (la parcela no se pierde) */
.mapa-info-panel.is-open.es-plegat {
  transform: translateX(calc(100% + var(--app-padding) + 14px));
  opacity: 0;
  pointer-events: none;
}
/* El botón redondo de volver a sacarla: siempre que haya una parcela
   plegada, estés donde estés. Al pulsarlo se vuelve al mapa con ella. */
/* Mismo botón que el del visor, pero con clase propia: compartir «pdf-reobrir»
   hacía que las reglas del visor lo encendieran cuando no tocaba. */
.mapa-reobrir {
  position: fixed;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  /* La capa de la ficha: los pop-ups (1000 y más) pasan por encima. */
  z-index: 950;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: var(--chip-solid);
  box-shadow: var(--shadow);
  color: var(--text-2);
  font-size: 16px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.mapa-reobrir:hover { color: var(--text-1); background: var(--chip-solid-hover); }
body:has(.mapa-info-panel.is-open.es-plegat) .mapa-reobrir { display: inline-flex; }
/* Este botón va fijo a la pantalla, fuera del mapa, así que el aislamiento
   de arriba no lo alcanza: con Configuración abierta se esconde a mano. */
body:has(#config-modal-overlay:not(.hidden)) .mapa-reobrir { display: none; }
/* Y la ficha igual: Configuración vive dentro de la app, que va entera por
   debajo de la ficha, y ningún z-index la puede sacar de ahí. Se esconde
   (sin display:none, que el hueco del lateral necesita su ancho) y vuelve
   tal cual al cerrar Configuración. */
body:has(#config-modal-overlay:not(.hidden)) .mapa-info-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Con el visor abierto (delante o plegado) manda SU botón, que ya sabe si
   tiene que traer la parcela o el documento: un solo botón, nunca dos.
   (Misma forma que la regla de arriba para poder ganarle.) */
body.pdf-panel-open:has(.mapa-info-panel.is-open.es-plegat) .mapa-reobrir { display: none; }
/* Y con la ficha DELANTE tampoco sale el del visor: lo que hay detrás ya
   está en su pestaña, al lado. Sin nada delante, entonces sí. */
body.pdf-panel-open.pdf-tucked:has(.mapa-info-panel.is-open:not(.es-plegat)) .pdf-reobrir { display: none; }
/* La pestaña de la parcela dentro del visor de documentos */
.pdf-tab-parcela .mapa-tab-ic { color: var(--text-3); }
.pdf-tab-parcela.es-actiu .mapa-tab-ic { color: var(--text-2); }
.pdf-tab-parcela .pdf-tab-tit { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.mapa-tab-x { cursor: pointer; opacity: 0; }
.mapa-tab:hover .mapa-tab-x { opacity: 1; }
.mapa-tab-x:hover { color: var(--text-1); }

/* Header del panel */
.mapa-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--glass-border-soft);
  flex-shrink: 0;
}

.mapa-panel-htext { min-width: 0; }

.mapa-panel-header h2 {
  margin: 0 0 2px;
  font-family: var(--font-sans, var(--font));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.mapa-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* La pestaña de la ficha: exactamente la del visor de documentos */
/* Es un <button>, así que hay que quitarle el borde gris que le pone el
   navegador: las pestañas del visor no son botones y no lo llevan. */
.mapa-tab { cursor: default; gap: 7px; max-width: 260px; border: none; font: inherit; }
.mapa-tab .pdf-tab-tit { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.mapa-tab-ic { display: inline-flex; align-items: center; color: var(--text-3); flex-shrink: 0; }
.mapa-tab.es-actiu .mapa-tab-ic { color: var(--text-2); }

/* Creu de tancar: mateix estil que la del pop-up de cerca */
.mapa-panel-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}

.mapa-panel-close:hover {
  background: rgba(10, 14, 20, 0.06);
  color: var(--text-1);
}

/* ── Buscador de dirección flotante ── */
.mapa-search-wrap {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  width: 340px;
  max-width: calc(100% - var(--sp-3) * 2);
  z-index: 1000;
}

.mapa-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 14px;
  background: var(--surface-card);   /* blanc sòlid, sense liquid glass */
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
}

.mapa-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim), var(--shadow);
}

.mapa-search-icon {
  font-size: 16px;
  color: var(--text-3);
  flex-shrink: 0;
  pointer-events: none;
}

.mapa-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  -webkit-appearance: none;
}

.mapa-search-input::placeholder { color: var(--text-3); }

/* Dropdown */
.mapa-search-dropdown {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  right: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  animation: dropdownIn 140ms ease both;
}

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

.mapa-search-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-hover);
}

.mapa-search-option:last-child { border-bottom: none; }

.mapa-search-option:hover,
.mapa-search-option.is-focused { background: rgba(10, 14, 20, 0.035); }

.mapa-search-option-icon {
  font-size: 15px;
  color: var(--text-3);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color var(--t-hover);
}

.mapa-search-option:hover .mapa-search-option-icon,
.mapa-search-option.is-focused .mapa-search-option-icon {
  color: var(--accent);
}

.mapa-search-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mapa-search-option-street {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapa-search-option-city {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapa-search-no-results {
  padding: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-3);
  text-align: center;
}

.mapa-search-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-4) 0 0;
}

/* Parcel info scroll area */
#parcel-info {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

/* Placeholder */
.parcel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 100%;
  min-height: 200px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  padding: 32px var(--sp-5);
}

.parcel-placeholder-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-3);
}

/* MIENTRAS LLEGA LA PARCELA
   En el centro del panel —a lo ancho y a lo alto— con el aro encima, igual
   que la carga del chat del equipo. El panel pasa a columna solo mientras
   carga, para que el aviso pueda ocupar todo el alto. */
#parcel-info:has(> .parcel-loading) { display: flex; flex-direction: column; }
.parcel-loading {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 32px var(--sp-4);
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

/* Card */
.parcel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Referencia catastral — elemento hero */
.parcel-ref {
  background: rgba(10, 14, 20, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.parcel-ref-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-3);
}

.parcel-ref-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  text-decoration: none;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  word-break: break-all;
  line-height: 1.4;
}

.parcel-ref-value:hover { text-decoration: underline; }

/* Filas de datos: cada fila és la seva pròpia targeta gris independent */
.parcel-rows-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: none;
  border: none;
}

.parcel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(10, 14, 20, 0.05);
  border-radius: var(--r-md);
  border-bottom: none;
}

.parcel-row:last-child { border-bottom: none; }

/* Etiquetes de fila (Referència, Clau urbanística…): tipografia normal */
.parcel-row dt {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Valors: mateixa tipografia que l'etiqueta, en negre */
.parcel-row dd {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  text-align: right;
  word-break: break-word;
}

/* ── Panel enriquecido: título de dirección, secciones y acciones ── */
/* Títol de l'adreça: sense icona, en verd fosc */
.parcel-addr-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans, var(--font));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  line-height: 1.35;
  padding-bottom: var(--sp-2);
}

.parcel-sec { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Capçaleres de secció (Dades cadastrals…): mini-majúscules de referència */
.parcel-sec-hdr {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;   /* mateixa tipografia que «Documentos recientes» */
  color: var(--text-3);
}

/* ── Foto de fachada del Catastro ──────────────────────────────────── */
.parcel-foto {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}
.parcel-foto img { display: block; width: 100%; height: auto; }

/* ── Inmuebles de la parcela, agrupados por planta ─────────────────── */
/* El contador va en la cabecera de sección para saber cuántos hay sin
   contar filas; la planta agrupa igual que en la sede. */
.parcel-sec-count {
  margin-left: var(--sp-2);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.06);
  color: var(--text-2);
  font-size: 10px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.parcel-planta { margin-top: var(--sp-2); }
.parcel-planta-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--border);
}
.parcel-planta-n {
  color: var(--text-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Cada inmueble en tres líneas, como la ficha de la Sede del Catastro:
   referencia completa, dirección con planta y puerta, y los datos.
   Antes era una rejilla de tres columnas con solo los cuatro últimos
   caracteres de la referencia; en una columna estrecha el uso y la superficie
   se cortaban con puntos suspensivos, y esos cuatro caracteres no sirven para
   buscar el inmueble en ningún sitio. */
.parcel-imm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(10, 14, 20, 0.04);
}
.parcel-imm-adr  { color: var(--text-3); font-size: 13px; }
.parcel-imm-meta { color: var(--text-1); }
.parcel-imm-ref {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.parcel-imm-ref:hover { text-decoration: underline; }

.parcel-seu-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--text-2);
}

.parcel-sec-loading {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--text-3);
  padding: var(--sp-2) 0;
}
.parcel-sec-loading .magic-spin { margin-right: 2px; }

.parcel-sec-empty {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  padding: var(--sp-1) 0;
}

/* ── Borrar un proyecto ─────────────────────────────────────────────────────
   Un diálogo aparte y no un confirm() del navegador: borrar arrastra los
   documentos, los trozos indexados y las conversaciones, y el usuario tiene
   derecho a ver QUÉ pierde antes de decidir. */
.pjdel-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 14, 20, .45);
  backdrop-filter: blur(2px);
}
.pjdel-overlay.hidden { display: none; }

.pjdel-modal {
  width: 100%;
  max-width: 420px;
  background: rgba(var(--glass-rgb), 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 14px);
  padding: 24px;
  box-shadow: var(--shadow-glass, 0 18px 48px rgba(10, 14, 20, .22));
  text-align: center;
}

.pjdel-ico {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 45, 45, .10);
  color: #c82d2d;
  font-size: 13px;
}

.pjdel-titol {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}

/* El nombre del proyecto, para que nadie borre el que no era. */
.pjdel-nom {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.pjdel-text {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.pjdel-llista {
  margin: 0 0 20px;
  padding: 10px 14px;
  list-style: none;
  text-align: left;
  /* Un borde y no un fondo: `--bg-2` es casi blanco y sobre la tarjeta blanca
     del diálogo la lista quedaba plana, sin leerse como un bloque aparte. El
     borde se ve igual en claro y en oscuro. */
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.85;
}
.pjdel-llista li::before { content: "· "; color: var(--text-3); }

.pjdel-acts { display: flex; gap: 10px; }

.pjdel-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.pjdel-btn:disabled { opacity: .6; cursor: default; }

/* Cancelar es el camino seguro y por eso es el que se ve primero y recibe el
   foco; el destructivo tiene que costar un gesto deliberado. */
.pjdel-btn-cancel {
  background: transparent;
  border-color: var(--border);
  color: var(--text-1);
}
.pjdel-btn-cancel:hover { background: var(--bg-2); }

.pjdel-btn-del { background: #c82d2d; color: #fff; }

/* ── Privatizar un documento ────────────────────────────────────────────
   Tarjeta blanca centrada: título a la izquierda con su cruz, la explicación,
   la ficha del documento en gris, el campo con el ojo de ver la contraseña y,
   abajo, Cancelar (gris) y la acción (negra). */
.priv-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 14, 20, .35);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
}
.priv-overlay.hidden { display: none; }
.priv-modal {
  width: 100%; max-width: 430px;
  background: var(--surface-card);
  border-radius: var(--r-xl, 14px);
  padding: 24px;
  box-shadow: 0 18px 48px rgba(10, 14, 20, .22);
}
.priv-cap { display: flex; align-items: center; gap: 12px; }
/* TODO el pop-up va a 13px: el título se distingue por la negrita, no por
   el tamaño. Con 17px cantaba al lado del resto. */
.priv-titol { flex: 1; margin: 0; font-size: 13px; font-weight: 700; color: var(--text-1); line-height: 1.4; }
/* La cruz, sin relleno: gris que se vuelve negra */
.priv-x {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 6px;
  color: var(--text-3); font-size: 13px; cursor: pointer;
  transition: color var(--t-hover);
}
.priv-x:hover { color: var(--text-1); background: none; }
.priv-text { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
/* La ficha del documento, como una fila de la lista */
.priv-fitxa {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 0; padding: 10px 12px;
  border-radius: 10px; background: rgba(10, 14, 20, 0.04);
}
.priv-fitxa-ic { display: flex; flex-shrink: 0; }
.priv-fitxa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* La ficha, con la letra de la del pop-up de compartir: 13 y 12 */
.priv-fitxa-nom { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priv-fitxa-sub { font-size: 13px; color: var(--text-3); }
.priv-camp { margin: 14px 0 0; }
.priv-camp.hidden { display: none; }
/* Etiqueta y campo, como los del asistente de proyecto */
.priv-label { display: block; margin: 0 0 8px; font-size: 13px; color: var(--text-1); }
.priv-input-wrap { position: relative; display: flex; align-items: center; }
.priv-input {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 38px 0 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-card); color: var(--text-1);
  font-family: var(--font); font-size: 13px; outline: none;
  transition: border-color var(--t-hover);
}
.priv-input:focus { border-color: var(--border-2); }
/* El ojo, sin relleno: solo el icono */
.priv-ull {
  position: absolute; right: 6px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 6px;
  color: var(--text-3); font-size: 13px; cursor: pointer;
  transition: color var(--t-hover);
}
.priv-ull:hover { color: var(--text-1); }
.priv-avis { min-height: 15px; margin: 8px 0 0; font-size: 13px; color: #c82d2d; }
.priv-avis:empty { min-height: 0; margin: 0; }
.priv-acts { display: flex; gap: 10px; margin: 18px 0 0; }
.priv-btn {
  flex: 1; height: 40px; border: none; border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.priv-btn-cancel { background: rgba(10, 14, 20, 0.05); color: var(--text-1); }
.priv-btn-cancel:hover { background: rgba(10, 14, 20, 0.09); }
.priv-btn-ok { background: var(--text-1); color: var(--surface-card); }
.priv-btn-ok:hover { background: #000; }

/* ── Carpetas de documentos ─────────────────────────────────────────────
   Una carpeta es una fila más de la tabla: mismo cuerpo, con su icono de
   carpeta en vez del icono de fichero. */
.pjx-carpeta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0; color: var(--text-2);
}
/* El icono de carpeta de la casa */
/* Ojo: «ico-carpeta» ya existe en components.css y pinta la carpeta antigua
   de fondo; por eso este va con otro nombre. */
.ic-carp { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); }
.ic-carp svg { display: block; }
/* Enganchada al Agente: el mismo recuadro gris que un documento adjunto */
.chat-adjunt-carpeta { color: var(--text-2); }
.chat-adjunt-card .chat-adjunt-carpeta { background: var(--surface-white); }

/* La carpeta va SIN pastilla: el icono y el nombre a pelo se distinguen
   mejor de los documentos, que sí la llevan. */
.pjd-doc.es-carpeta .pjd-doc-pill { background: none; padding-left: 0; }
.pjd-doc.es-carpeta:hover .pjd-doc-pill { background: none; }
.pjd-doc.es-carpeta .pjd-doc-nom { font-weight: 500; }
/* Arrastrar para ordenar en carpetas: donde va a caer (una carpeta, una de
   la ruta de arriba o la flecha de atrás) se marca en el verde de la casa, y
   lo que se arrastra se queda más flojo en su sitio. */
.pjd-doc.es-carpeta.es-desti-arr,
.pjx-carp-pas.es-desti-arr,
#pjx-enrere.es-desti-arr { background: var(--accent-dim); box-shadow: inset 0 0 0 1.5px var(--accent); }
/* Las dos celdas congeladas de la tabla llevan fondo propio y tapan el de la
   fila: el verde y la raya se les dan a ellas también (y al hueco de 10px de
   entre las dos), o la carpeta salía marcada solo a medias. El verde es el
   mismo token puesto encima del blanco de la tarjeta, así casa en claro y en
   oscuro con el del resto de la fila. */
.pjd-doc.es-carpeta.es-desti-arr > span:nth-child(-n + 2) {
  background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--surface-card);
  box-shadow: inset 0 1.5px 0 var(--accent), inset 0 -1.5px 0 var(--accent);
}
.pjd-doc.es-carpeta.es-desti-arr > span:first-child {
  box-shadow: inset 1.5px 0 0 var(--accent), inset 0 1.5px 0 var(--accent), inset 0 -1.5px 0 var(--accent);
}
.pjd-doc.es-carpeta.es-desti-arr > span:first-child::after,
#pjd-docs-list.is-desplacat .pjd-doc.es-carpeta.es-desti-arr > span:nth-child(2)::before {
  box-shadow: inset 0 1.5px 0 var(--accent), inset 0 -1.5px 0 var(--accent);
}
.pjd-doc.es-arrossegant { opacity: 0.45; }
/* Lo mismo al arrastrar un documento de «Documentos recientes» o de la
   tarjeta del proyecto a la barra del chat: la fila se apaga mientras
   viaja, y el velo de siempre dice dónde va a caer. */
.home-doc-item.es-arrossegant { opacity: 0.45; }

/* ── LOS DOCUMENTOS DEL CHAT, RECOGIDOS ──────────────────────────────────────
   «Un menú desplegable como cuando guardamos un archivo, que ponga documentos
   adjuntos en el chat» (30-9-2026). Con uno se leía bien; con tres o cuatro la
   barra de escribir era una lista con un hueco para escribir debajo.

   Es LA TARJETA DE SIEMPRE de los desplegables de un chat (`.vnc-apunts`, el
   «Perfil de búsqueda»): blanca, sin trazo, sombra corta, cabecera con chevron
   + rótulo + contador, rótulo en tinta y los dos grises a tinta en hover. No
   una variante nueva. */
/* ENCIMA DE LA BARRA, DE MARGEN A MARGEN
   «No quiero que esté dentro de la barra del chat, sino encima, y que vaya de
   margen a margen» (30-9-2026). Dentro de la píldora era una caja blanca
   dentro de otra, y se comía el sitio de escribir. */
.xat-docs-fora { margin: 0 0 8px; }
.xat-docs {
  width: 100%;
  border-radius: var(--r);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
  transition: box-shadow var(--t-hover);
}
.xat-docs:hover { box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 8px 18px -10px rgba(18, 18, 23, 0.34); }
.xat-docs-cap {
  display: flex; width: 100%; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 10px;
  border: none;
  background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover);
}
/* EN GRIS, NO EN TINTA. «El mismo gris que aparece en la barra del chat, el
   mensaje de Escribe tu consulta» (1-10-2026): `--text-3`, el del placeholder
   de `.pill-input`.

   Los otros desplegables del chat («Perfil de búsqueda», la tabla guardada)
   siguen con el rótulo en tinta, y no es un descuido: ahí el rótulo ENCABEZA
   contenido —debajo hay una tabla con datos— y en gris se quedaba a la altura
   de su propio contador, sin nada que dijera dónde empieza el bloque. Este no
   encabeza nada: lo que hay debajo son los documentos mismos, plegados, y la
   línea es un dato de estado de la barra, no un título. */
.xat-docs-lbl { color: var(--text-3); transition: color var(--t-hover); }
.xat-docs-cap i,
.xat-docs-n { color: var(--text-3); transition: color var(--t-hover); }
/* Al pasar el cursor, TODA la cabecera a tinta: el chevron, el contador y
   también el rótulo. Como el rótulo lleva su propio color en gris, heredar el
   del botón no bastaba y se quedaba atrás mientras los otros dos se oscurecían
   (1-10-2026). */
.xat-docs-cap:hover,
.xat-docs-cap:hover i,
.xat-docs-cap:hover .xat-docs-lbl,
.xat-docs-cap:hover .xat-docs-n { color: var(--text-1); }
.xat-docs-cap i { font-size: 14px; transition: transform var(--t-hover); }
.xat-docs.es-plegat .xat-docs-cap i { transform: rotate(-90deg); }
.xat-docs-n { margin-left: auto; }
/* Fuera de la memoria es lo único urgente, y por eso el desplegable se abre
   solo (no se avisa de algo urgente detrás de un chevron). El contador lo dice
   con palabras y se queda en gris: el estado ya viene sin color de serie
   (`es-caducat`) y no se le inventa uno aquí. */
.xat-docs-cos {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.xat-docs.es-plegat .xat-docs-cos { grid-template-rows: 0fr; }
.xat-docs-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 8px;
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.xat-docs.es-plegat .xat-docs-inner {
  opacity: 0;
  transform: translateY(-6px);
  padding-top: 0;
  padding-bottom: 0;
}
/* Cada línea a todo el ancho, con la ✕ al final y no pegada al nombre */
.chat-adjunt-card.es-delxat.es-dins { max-width: 100%; width: 100%; }
.chat-adjunt-card.es-delxat.es-dins .chat-adjunt-txt { flex: 1; min-width: 0; }
.chat-adjunt-card.es-delxat.es-dins .chat-adjunt-x { margin-left: auto; }

/* ── LA BARRA SE ENCIENDE CUANDO EL DOCUMENTO PASA POR ENCIMA ────────────────
   «No quiero un difuminado en toda la pantalla, sino que lo arrastres dentro
   del chat» (30-9-2026). El documento ya está en la pantalla y se ve todo el
   rato, así que no hace falta velar nada: se marca la barra donde va a caer, y
   fuera de ella no se suelta.

   EL MISMO VERDE DE CUANDO ESCRIBES. «En vez de azul que sea verde como cuando
   escribes» (30-9-2026): es el aro de `.pill-bar:focus-within`, el de escribir
   en la barra, un poco más marcado —el borde también— porque aquí no dice
   «estás aquí» sino «suelta aquí». El azul quedaba como un aviso de otra cosa
   en una barra que ya tiene su color. */
.pill-bar.es-desti-doc {
  border-color: var(--accent-glow);
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.82) inset,
    0 0 0 3px rgba(63, 146, 109, 0.28),
    0 2px 4px rgba(15, 25, 40, 0.06),
    0 6px 18px rgba(15, 25, 40, 0.06);
}
/* Orden a mano: la raya verde de dónde va a caer, arriba o abajo de la fila.
   También celda a celda, que las congeladas taparían la de la fila. */
.pjd-doc.es-ins-abans,
.pjd-doc.es-ins-abans > span,
.pjd-doc.es-ins-abans > span:first-child::after { box-shadow: inset 0 2px 0 var(--accent); }
.pjd-doc.es-ins-despres,
.pjd-doc.es-ins-despres > span,
.pjd-doc.es-ins-despres > span:first-child::after { box-shadow: inset 0 -2px 0 var(--accent); }
/* El candado y la carpeta de la ruta de arriba */
.pany-ic { display: inline-flex; align-items: center; }
.crumb-carpeta-ic { display: inline-flex; align-items: center; color: var(--text-3); }
/* Los tres puntos de la carpeta, SIEMPRE a la vista: es por donde se
   renombra, se privatiza y se deshace, y escondidos no los encontraba nadie. */
.pjx-carpeta-mes {
  margin-left: auto; opacity: 1;
  color: var(--text-3);
  transition: color var(--t-hover);
}
.pjx-carpeta-mes:hover { color: var(--text-1); background: none; }
.pjx-carpeta-menu { min-width: 210px; }

/* Atrás y adelante entre carpetas: el MISMO recuadro que los filtros
   (34px, esquina de 10, borde fino y fondo blanco), con la flecha dentro.
   Cuando no llevan a ningún sitio se quedan apagados. */
.pjx-nav-carp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(10, 14, 20, 0.08); border-radius: 10px;
  background: var(--surface-card);
  color: var(--text-1); font-size: 13px; cursor: pointer;
  transition: background var(--t-hover), opacity var(--t-hover), border-color var(--t-hover);
}
.pjx-nav-carp:hover:not(:disabled) { background: rgba(10, 14, 20, 0.04); }
.pjx-nav-carp.es-apagat { opacity: .3; cursor: default; }

/* Dónde estás: una pastilla gris por carpeta del camino, al lado de las
   flechas. Las de detrás se ven apagadas y llevan a su nivel; la de dentro
   es la que manda. */
.pjx-carp-ruta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pjx-carp-ruta.hidden { display: none; }
.pjx-carp-pas {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px; border: none; border-radius: 10px;
  background: rgba(10, 14, 20, 0.06);
  font-family: var(--font); font-size: 13px; color: var(--text-1);
  max-width: 200px; cursor: pointer;
  opacity: .45;
  transition: opacity var(--t-hover), background var(--t-hover);
}
.pjx-carp-pas:hover:not(:disabled) { opacity: .75; background: rgba(10, 14, 20, 0.09); }
.pjx-carp-pas.es-actual { opacity: 1; cursor: default; }
.pjx-carp-actual-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Elegir carpeta: una fila por carpeta, como las del desplegable */
.tria-carp-llista {
  display: flex; flex-direction: column; gap: 2px;
  margin: 10px 0 0; max-height: 260px; overflow-y: auto;
}
.tria-carp-fila {
  display: flex; align-items: center;
  border-radius: var(--r-sm);
  transition: background var(--t-hover);
}
.tria-carp-fila:hover { background: var(--chip-solid); }
/* La fila entera mueve aquí; la flecha de la derecha entra dentro */
.tria-carp-tria {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: none; background: none;
  font-family: var(--font); font-size: 13px; color: var(--text-1);
  cursor: pointer; text-align: left;
}
.tria-carp-entra {
  width: 30px; height: 30px; margin-right: 4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 6px;
  color: var(--text-3); font-size: 16px; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.tria-carp-entra:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.06); }
.tria-carp-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tria-carp-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tria-carp-buit { padding: 14px 10px; font-size: 13px; color: var(--text-3); }
/* Dónde estás dentro del pop-up */
.tria-carp-ruta { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; }
.tria-carp-ruta.hidden { display: none; }
.tria-carp-amunt {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 6px;
  color: var(--text-1); font-size: 13px; cursor: pointer;
  transition: background var(--t-hover);
}
.tria-carp-amunt:hover { background: rgba(10, 14, 20, 0.06); }
.tria-carp-ruta-txt { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priv-btn.hidden { display: none; }

/* Dentro de una carpeta: de dónde vienes y dónde estás */
.pjx-miga {
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--sp-6) 10px;
  font-size: 13px; color: var(--text-1);
}
.pjx-miga-enrere {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px 0 8px; border: none; border-radius: 999px;
  background: none; color: var(--text-3);
  font-family: var(--font); font-size: 13px; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.pjx-miga-enrere:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.05); }
.pjx-miga-enrere .ti { font-size: 13px; }
.pjx-miga-sep { color: var(--text-3); }
.pjx-miga-nom { font-weight: 500; }
.pjx-miga-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
/* El campo de nombre de la carpeta no lleva ojo: todo el ancho */
.carp-input { padding-right: 12px; }

/* El candado, al lado del nombre del documento: macizo y gris, sin agujero.
   Abierto en cuanto se ha metido la contraseña. */
.pjd-doc-cadenat {
  display: inline-flex; align-items: center;
  color: var(--text-3); margin-left: 5px; vertical-align: -2px;
}
.pjd-doc-cadenat svg { display: block; }

.pjdel-btn-del:hover:not(:disabled) { background: #ab2525; }

/* La procedencia de la calificación urbanística, y el aviso de que una parcela
   puede tocar más de una clave. Va debajo del dato, en pequeño: es una
   advertencia necesaria pero no debe competir con la clave. */
.parcel-sec-note {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.45;
  padding-top: var(--sp-1);
}

/* La clave normalizada del MUC, al lado de la del ayuntamiento. */
.parcel-dim {
  color: var(--text-3);
  font-weight: 400;
}

/* Badge d'origen de la qualificació (WMS real vs estimació documental) */
.parcel-font {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-2);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.parcel-font i { font-size: 13px; }
.parcel-font-wms { background: rgba(10, 14, 20, 0.05); color: var(--text-2); }
.parcel-font-rag { background: var(--bg-3); color: var(--text-3); }

.parcel-ref-link {
  color: var(--text-1);
  text-decoration: none;
  font-family: var(--font-mono);
}
.parcel-ref-link:hover { text-decoration: underline; }

/* Patrimoni — bloque destacado */
.parcel-patr {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
}
.parcel-patr i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.parcel-patr-on {
  background: rgba(10, 14, 20, 0.04);
  border-color: var(--border);
  color: var(--text-1);
}
.parcel-patr-off { background: var(--bg-3); color: var(--text-2); }
.parcel-patr-main { font-weight: 600; }
.parcel-patr-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* Acciones */
.parcel-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.parcel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast, 0.15s), opacity var(--t-fast, 0.15s), border-color var(--t-fast, 0.15s);
}
.parcel-btn i { font-size: 16px; }
.parcel-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Botons: negres en repòs, verds en hover */
.parcel-btn-primary {
  background: var(--text-1);
  color: var(--surface-white);
  border: 1px solid var(--text-1);
}
.parcel-btn-primary:not(:disabled):hover {
  background: #000;
  border-color: #000;
}

.parcel-btn-ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border);
}
.parcel-btn-ghost:not(:disabled):hover {
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-1);
  border-color: var(--border-2);
}

/* Unidades constructivas */
.parcel-units-title {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  padding: var(--sp-1) 0 var(--sp-2);
}

.parcel-units { display: flex; flex-direction: column; gap: var(--sp-1); }

.parcel-unit {
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 12px;
  font-family: var(--font-mono);
  line-height: 1.4;
}

/* Descripción larga */
.parcel-ldt {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  word-break: break-word;
  font-family: var(--font-mono);
}

/* ── Map layer control (Mapa / Satélite / Catastro) ── */
.map-layer-ctrl {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1000;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-card);   /* blanc sòlid, sense liquid glass */
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  overflow: hidden;
  pointer-events: auto;
}

.map-layer-btn {
  height: 30px;
  padding: 0 14px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
  white-space: nowrap;
}

.map-layer-btn:hover:not(.active) { background: rgba(10, 14, 20, 0.05); color: var(--text-1); }

.map-layer-btn.active {
  background: var(--action);
  color: var(--action-text);
  font-weight: 600;
}

/* Leaflet control styling */
.leaflet-control-zoom {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow) !important;
}

.leaflet-control-zoom a {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
}

.leaflet-control-zoom a:hover {
  background: var(--surface-card) !important;
  color: var(--text-1) !important;
}

.leaflet-control-attribution {
  background: var(--glass-bg-strong) !important;
  font-size: 10px !important;
  border-radius: 6px 0 0 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   CHAT EMPTY STATE
   ══════════════════════════════════════════════════════════════════ */

.chat-empty-state {
  background: transparent;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.chat-empty-state.is-exiting {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
}

/* Entrada del composer */
@keyframes composerSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada de los mensajes */
@keyframes messagesFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* When empty state is visible, collapse messages and hide bottom composer */
.chat-empty-state:not(.hidden) + #messages {
  display: none;
}

.chat-empty-state:not(.hidden) ~ .composer {
  display: none !important;
}

/* Composer entrance — slide up desde abajo */
@keyframes composerEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.composer.is-entering {
  animation: composerEnter 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Messages entrance — fade in */
@keyframes messagesFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#messages.is-entering {
  animation: messagesFadeIn 200ms ease both;
}

/* (Las «auras» de color del avatar se retiraron: el usuario las descartó
   por parecerse demasiado a la referencia. Todos los avatares del usuario
   van ahora con iniciales en gris o foto — ver .is-avatar-plain.) */

/* ── Avatar de cuenta ─────────────────────────────────────────────────
   Menú lateral, barra superior y configuración: aquí NO va el aura, va
   quién eres. Iniciales de nombre y apellido en el mismo gris que el
   avatar de las preguntas del chat, o la foto de perfil si la hay. */
.is-avatar-plain {
  /* background-COLOR, no el atajo `background`: el atajo con !important
     borra la background-image y la foto de perfil no llegaba a verse. */
  background-color: var(--text-3) !important;
  background-image: none;
  color: var(--surface-card) !important;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  animation: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Color de identidad bajo las iniciales (Identity-Color Rule): el tono lo
   elige un hash del nombre en JS sobre la paleta --avatar-1…5, así el mismo
   usuario lo ve siempre igual. Letras en blanco de superficie, legibles
   sobre los cinco tonos, que comparten luminosidad. */
.is-avatar-plain.is-avatar-c1 { background-color: var(--avatar-1) !important; color: var(--surface-white) !important; }
.is-avatar-plain.is-avatar-c2 { background-color: var(--avatar-2) !important; color: var(--surface-white) !important; }
.is-avatar-plain.is-avatar-c3 { background-color: var(--avatar-3) !important; color: var(--surface-white) !important; }
.is-avatar-plain.is-avatar-c4 { background-color: var(--avatar-4) !important; color: var(--surface-white) !important; }
.is-avatar-plain.is-avatar-c5 { background-color: var(--avatar-5) !important; color: var(--surface-white) !important; }
/* Con foto, el fondo no debe asomar por detrás */
.is-avatar-plain.has-foto { background-color: var(--bg-3) !important; }

/* ── Cabecera del espacio: avatar + estado, en una línea ──────────────
   El aura baja a 28px: junto a dos chips de 24px, los 52px de antes la
   convertían en el protagonista de una fila que solo da contexto. */
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.hero-meta .hero-orb {
  width: 28px;
  height: 28px;
  font-size: 11px;
  box-shadow: none;
  animation: none;
  margin: 0;
}
.hero-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}
/* Candado y reloj macizos, como la referencia: la silueta rellena aguanta
   mejor a 13px que un trazo fino. La fuente de iconos no trae variantes
   «filled», así que se sustituye el glifo por una máscara con el mismo
   dibujo, teñida del gris del propio chip. */
.hero-chip i {
  font-size: 13px;
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.hero-chip i::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
/* Candado macizo, sin el ojo de la cerradura: el mismo dibujo que el chip
   «Privado» del chat de proyecto, para que los dos sean idénticos. */
.hero-chip .ti-lock {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.5 10H7V7a5 5 0 0 1 10 0v3h.5A2.5 2.5 0 0 1 20 12.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-6A2.5 2.5 0 0 1 6.5 10zm2.5 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E");
}
.hero-chip .ti-clock {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 4a1 1 0 0 0-1 1v5a1 1 0 0 0 .47.85l3 2a1 1 0 0 0 1.06-1.7L13 11.43V7a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}
.hero-chip.hidden { display: none; }

/* Aviso al pasar el cursor, por encima del chip */
.hero-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  z-index: 20;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--action);
  color: var(--action-text);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover), transform var(--t-hover);
}
#hero-privat:hover .hero-tip,
#hero-privat:focus-visible .hero-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .hero-tip { transition: none; } }

.empty-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--glass-rgb),0.88), transparent 52%),
    linear-gradient(145deg, var(--accent) 0%, var(--accent-glow) 100%);
  color: var(--surface-white);
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(45, 106, 79, 0.28), inset 0 1px 2px rgba(var(--glass-rgb),0.3);
  animation: pulseOrb 3s ease-in-out infinite;
}

@keyframes pulseOrb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Greeting */
.empty-greeting {
  text-align: center;
  line-height: 1.25;
}

.empty-greeting-name {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}

.empty-greeting-sub {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}

/* ── Pill input bar (empty state + composer) ── */
/* LOS DESPLEGABLES DE LA BARRA, POR ENCIMA DE LA PÁGINA
   La píndola es de cristal (`backdrop-filter`), y eso la convierte en un
   mundo aparte para el apilado: el `z-index: 500` de sus desplegables solo
   vale DENTRO de ella, no contra lo que hay en la página. Sin nivel propio,
   cualquier cosa de más abajo que esté colocada —el rótulo de «Historial»,
   sin ir más lejos— se pintaba encima del desplegable de proyectos y se leía
   a través de él. Con un nivel propio, la barra y todo lo que abre quedan por
   encima de las tarjetas, que es lo que tiene que pasar.

   DE 3 A 20 (30-9-2026). Con 3 no bastaba: los avatares de la gente llevan su
   z-index puesto A MANO (1, 2, 3 según el orden dentro del grupo), así que una
   foto de perfil de «Historial» se pintaba encima de la lista de documentos
   que abre la @. 20 deja la barra por encima de todo lo de la página y muy por
   debajo de los pop-ups y los velos (900 o más), que sí tienen que taparla. */
.pill-wrap {
  width: min(90%, 620px);
  position: relative;
  z-index: 20;
}

/* In the hero, input-wrap handles width — pill-wrap inside inherits */
.input-wrap .pill-wrap,
.input-wrap.pill-wrap {
  width: 100%;
}

.pill-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 8px 0 18px;
  background: rgba(var(--glass-rgb), 0.76);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(var(--glass-rgb), 0.88);
  border-radius: var(--r-xl);
  /* Sombra corta y suave, como el resto de tarjetas: la de antes se
     extendía mucho y se veía una mancha grande bajo la barra. */
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.82) inset,
    0 -1px 1px rgba(0, 0, 0, 0.03) inset,
    0 1px 2px rgba(15, 25, 40, 0.05),
    0 4px 14px rgba(15, 25, 40, 0.045);
  transition: box-shadow 0.3s ease;
}

.pill-bar:focus-within {
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.82) inset,
    0 0 0 3px rgba(63, 146, 109, 0.18),
    0 2px 4px rgba(15, 25, 40, 0.06),
    0 6px 18px rgba(15, 25, 40, 0.06);
}

/* ── La ventana de aclaración: sale en el sitio de la barra ──────────────
   Cuando el triaje ve que la pregunta no se puede buscar tal como está, las
   opciones salen aquí en vez de una respuesta que pregunta (app.js,
   mostrarAclariment). Mientras está abierta, es el único sitio donde
   contestar: la barra se esconde. */
.composer.es-aclarint .pill-bar { display: none; }
/* La ventana es la tarjeta de «vincular normativa» (.vnc-card y compañía):
   aquí solo el envoltorio, que entra subiendo un poco desde la barra. */
.acl-pop { animation: acl-entra 0.18s ease-out; }
/* La cruz, como todas: sin relleno, solo pasa a Tinta */
.acl-pop .acl-tancar:hover { background: none; }
.acl-pop .acl-opcio:focus-visible { background: rgba(10, 14, 20, 0.05); outline: none; }
/* La pregunta, en Tinta y con el peso de toda la app (450, sin negrita: en
   Windows la negrita de Segoe es muy gruesa y la letra no parecía la de la
   casa); debajo, en gris, por qué importa cuando el triaje lo dice. */
.acl-explica { margin: -4px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.acl-explica.hidden { display: none; }
/* Una pregunta abierta (el municipio, la dirección) es solo el campo */
.acl-opcions > .acl-altra-input:first-child { margin-top: 0; }
/* El campo, de tres líneas: sin tirador y con el interlineado del texto */
.acl-pop .acl-altra-input { resize: none; line-height: 1.5; }
@keyframes acl-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acl-pop { animation: none; } }

/* ── Variante stack: input arriba, controles abajo ── */
.pill-bar.pill-bar-stack {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  min-height: 110px;
  padding: 16px 14px 12px;
  gap: 10px;
}
.pill-bar-stack .pill-input {
  width: 100%;
  /* En columna, `flex: 1` implica flex-basis:0 y anula `height`: la caja no
     crecía con el texto aunque el JS calculase bien la altura. */
  flex: 0 0 auto;
  height: auto;
  min-height: 40px;
  max-height: 300px;        /* creix més; a partir d'aquí, scroll vertical */
  font-size: 15px;
  line-height: 1.45;        /* respira en multi-línia */
  padding-left: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;    /* el text llarg fa salt de línia, no horitzontal */
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.pill-bar-stack .pill-input::-webkit-scrollbar { width: 5px; }
.pill-bar-stack .pill-input::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }
.pill-bar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pill-bar-left,
.pill-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Només la icona del clip: sense fons, vora ni ombra */
.pill-bar-stack .pill-plus-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  color: var(--text-2);
  background: none;
  border: none;
  box-shadow: none;
}
.pill-bar-stack .pill-plus-btn:hover {
  background: var(--bg-3);
  color: var(--text-1);
}
.pill-bar-stack .pill-plus-btn .ti { font-size: 16px; }
.pill-bar-stack .plus-label { font-size: 13px; }

/* + button */
.pill-plus-wrap { position: relative; flex-shrink: 0; }

.pill-plus-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 50%;
  transition: color var(--t-hover), background var(--t-hover);
}

.pill-plus-btn:hover { color: var(--text-1); background: var(--bg-3); }

/* Dropdown del + */
.pill-dropdown {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: rgba(var(--glass-rgb), 0.82);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(var(--glass-rgb), 0.88);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  min-width: 230px;
  overflow: hidden;
  z-index: 500;
  animation: dropUpIn 130ms ease both;
}

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

.pill-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: var(--text-sm);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-hover);
}

.pill-dropdown-item:hover { background: var(--chip-solid); }
.pill-dropdown-item .ti { font-size: 15px; color: var(--text-3); flex-shrink: 0; }

.pill-dropdown-sep { height: 1px; background: var(--border); }

/* ── Filtre de municipi del chat ──────────────────────────────────────────── */
.muni-filter-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }

/* Botó: només icona de localització */
.muni-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  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);
}
.muni-filter-btn:hover { color: var(--text-1); background: rgba(var(--glass-rgb), 0.95); }
.muni-filter-btn .ti-map-pin { font-size: 17px; }

/* Botó actiu quan hi ha filtre seleccionat */
.muni-filter-btn.is-active {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(45, 106, 79, 0.25);
}

/* Badge: 📍 Municipi ×  (només visible amb filtre seleccionat) */
.muni-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px 0 12px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(45, 106, 79, 0.22);
}
.muni-filter-badge[hidden] { display: none; }
.muni-filter-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.muni-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
  background: rgba(45, 106, 79, 0.14);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-hover);
}
.muni-filter-clear:hover { background: rgba(45, 106, 79, 0.26); }

/* Desplegable cap avall */
.muni-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 260px;
  max-width: 78vw;
  background: rgba(var(--glass-rgb), 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(var(--glass-rgb), 0.88);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  z-index: 900;
  animation: dropDownIn 130ms ease both;
}

@keyframes dropDownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.muni-filter-search {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  padding: 11px 14px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  outline: none;
}
.muni-filter-search::placeholder { color: var(--text-3); }
.muni-filter-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.muni-filter-list {
  max-height: 232px;          /* ~6 resultats */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.muni-filter-list[hidden] { display: none; }

.muni-filter-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-hover);
}
.muni-filter-item:hover { background: var(--chip-solid); }
.muni-filter-item .ti { font-size: 15px; color: var(--text-3); flex-shrink: 0; }
.muni-filter-empty {
  padding: 14px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* ── Selector de jurisdicció del chat (estil Legora) ──────────────────────── */
.juris-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; }

/* Xip: bandera + nom + caret · MATEIX estil que el botó "Adjuntar" */
/* Nomès text + icona: sense fons ni vora ni ombra */
.juris-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px;
  border-radius: 18px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  background: none;
  border: none;
  box-shadow: none;
  transition: color var(--t-hover);
}
/* En reposo el text és gris (--text-2); en hover passa a negre. */
.juris-chip:hover { color: var(--text-1); }

/* Los botones de la barra del chat (adjuntar, Database, España, proyecto),
   como la referencia: pastilla blanca con una sombra corta, a la misma
   altura todos. Solo en la barra; el resto de chips sigue sin relleno. */
.pill-bar-left .juris-chip {
  background: var(--surface-card);
  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);
  padding: 0 12px;
}
.pill-bar-left .juris-chip:hover {
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 12px rgba(10, 14, 20, 0.10);
}
/* El selector de proyecto sin proyecto elegido: solo la carpeta, en círculo */
.pill-bar-left .juris-wrap[data-proj] .juris-chip:not(.is-active) {
  width: 32px; padding: 0; justify-content: center; border-radius: 50%;
}
.pill-bar-left .juris-wrap[data-proj] .juris-chip:not(.is-active) .juris-proj-ico { margin-left: 0; }
/* La carpeta de IURAX como icono del selector de proyecto y de su lista */
.juris-chip .pj-tipus-ic, .juris-item .pj-tipus-ic { width: 15px; height: 15px; flex-shrink: 0; }
/* El clip de adjuntar va sin relleno ni sombra: solo el icono, gris → negro */
.pill-bar .pill-bar-left .pill-plus-btn,
.pill-bar-stack .pill-bar-left .pill-plus-btn,
.pjd-pill-wrap .pill-bar .pill-plus-btn { width: 32px; height: 32px; font-size: 18px; background: none; box-shadow: none; }
.pill-bar .pill-bar-left .pill-plus-btn:hover,
.pill-bar-stack .pill-bar-left .pill-plus-btn:hover,
.pjd-pill-wrap .pill-bar .pill-plus-btn:hover { background: none; box-shadow: none; color: var(--text-1); }
.juris-chip:hover .juris-label,
.juris-chip:hover .juris-caret { color: var(--text-1); }

/* Bandera circular (escut → contain amb padding), a mida d'icona del xip */
.juris-flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: 0 0 0 1px rgba(15, 25, 40, 0.07);
}
.juris-flag-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.juris-flag-img.is-coat { object-fit: contain; padding: 2px; background: var(--surface-card); }

.juris-label { font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juris-caret { font-size: 14px; color: var(--text-3); margin-left: -1px; }

/* El selector de projecte s'ajunta una mica al de municipi */
/* El mismo aire entre el clip, Database, España y la carpeta: sin el
   margen negativo que pegaba la carpeta a la bandera */
.juris-wrap[data-proj] { margin-left: 0; }

/* Icona del selector de projecte (carpeta), a mida del xip i les files */
.juris-proj-ico { font-size: 17px; color: var(--text-3); flex-shrink: 0; width: 20px; text-align: center; }
.juris-chip .juris-proj-ico { margin-left: 4px; }
.juris-chip:hover .juris-proj-ico { color: var(--text-1); }
.juris-item .juris-proj-ico { font-size: 16px; }
/* Todo lo que representa un PROYECTO lleva la misma carpeta a color: el chip
   del chat, su buscador, el modal de añadir a proyecto, los resultados de
   búsqueda y la lista del lateral. Es el mismo objeto se vea donde se vea.
   «Sin proyecto» usa la carpeta tachada (.ti-folder-off) y queda fuera: no
   es un proyecto, es la opción de quitarlo. */
.juris-item .ti-folder.juris-proj-ico,
.addproj-item > .ti-folder,
.search-result-item[data-kind="proj"] > .ti-folder,
.pj-side-item > .ti-folder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* La carpeta va a 18 px en toda la aplicación: a 16 se quedaba pequeña al
   lado de los iconos de fichero y de las banderas. */
.juris-item .ti-folder.juris-proj-ico,
.addproj-item > .ti-folder,
.search-result-item[data-kind="proj"] > .ti-folder,
.pj-side-item > .ti-folder { width: 15px; }
.juris-item .ti-folder.juris-proj-ico::before,
.addproj-item > .ti-folder::before,
.search-result-item[data-kind="proj"] > .ti-folder::before,
.pj-side-item > .ti-folder::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("icons/folder.svg?v=2") no-repeat center / contain;
          mask: url("icons/folder.svg?v=2") no-repeat center / contain;
}

/* «Dónde buscar», igual que el selector de proyecto: solo el icono. El
   archivador, el bocadillo y el globo azul ya dicen en qué modo estás, y la
   fila del composer se lee más limpia sin la palabra. */
.juris-wrap[data-mode] .juris-chip .juris-label,
.juris-wrap[data-mode] .juris-chip .juris-caret { display: none; }
.juris-wrap[data-mode] .juris-chip { padding-left: 6px; padding-right: 6px; }
.juris-wrap[data-mode] .juris-chip .juris-proj-ico { margin-left: 0; }
.pill-bar-left .juris-wrap[data-mode] .juris-chip {
  width: 32px; padding: 0; justify-content: center; border-radius: 50%;
}

/* Sin proyecto asignado, solo la carpeta: la palabra «Proyecto» no dice nada
   que el icono no diga ya, y en reposo el composer se lee más limpio. Al
   asignar uno aparece el nombre, que sí es información. */
.juris-wrap[data-proj] .juris-chip:not(.is-active) .juris-label,
.juris-wrap[data-proj] .juris-chip:not(.is-active) .juris-caret { display: none; }
.juris-wrap[data-proj] .juris-chip:not(.is-active) { padding-left: 6px; padding-right: 6px; }
.juris-wrap[data-proj] .juris-chip:not(.is-active) .juris-proj-ico { margin-left: 0; }

/* Proyecto asignado → la carpeta a color (icons/folder.svg), la misma de la
   tabla de Proyectos. El nombre NO se fija: sigue la regla del chip —gris en
   reposo, Tinta al pasar el cursor—. Fijarlo en Tinta lo dejaba siempre
   encendido y pesaba más que el propio campo de escritura; la carpeta ya
   marca que hay proyecto asignado. */
.juris-wrap[data-proj] .juris-chip.is-active .juris-proj-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.juris-wrap[data-proj] .juris-chip.is-active .juris-proj-ico::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("icons/folder.svg?v=2") no-repeat center / contain;
          mask: url("icons/folder.svg?v=2") no-repeat center / contain;
}

/* Dins d'una conversa (composer): només la bandera, sense text ni chevron.
   El clic continua obrint el desplegable amb cercador, igual que ara. */
.composer .juris-label,
.composer .juris-caret { display: none; }
.composer .juris-chip {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  /* La misma pastilla blanca con sombra corta que en la portada: al entrar
     en la conversación se quedaban en iconos sueltos y no se veía que eran
     botones. Aquí son círculos porque van sin rótulo. */
  background: var(--surface-card);
  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);
}
.composer .juris-chip:hover {
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 12px rgba(10, 14, 20, 0.10);
}
.composer .juris-flag { width: 22px; height: 22px; }

/* Desplegable cap amunt · MATEIXES mides/tipografia que el d'"Adjuntar",
   però blanc sòlid 100% opac (sense liquid glass) */
.juris-dropdown {
  position: absolute;
  top: calc(100% + 8px);          /* s'obre cap avall */
  left: 0;
  min-width: 230px;
  max-width: 82vw;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  z-index: 500;
  animation: dropDownIn 130ms ease both;
}
.juris-dropdown.hidden { display: none; }

/* Dins d'una conversa (composer, al fons de la pantalla): s'obre cap amunt */
.composer .juris-dropdown {
  top: auto;
  bottom: calc(100% + 8px);
  animation: dropUpIn 130ms ease both;
}

.juris-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.juris-search-wrap .ti { font-size: 15px; color: var(--text-3); flex-shrink: 0; }
.juris-search {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  outline: none;
}
.juris-search::placeholder { color: var(--text-3); }
.juris-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.juris-list {
  max-height: 240px;          /* ~6 elements, com el d'"Adjuntar" */
  padding: 6px;               /* margen alrededor: el relleno de paso no llega al borde */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.juris-list::-webkit-scrollbar { width: 5px; }
.juris-list::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }

/* Files: mateix padding/tipografia que .pill-dropdown-item */
.juris-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--r-sm);   /* esquinas redondeadas, como todas las filas */
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-hover);
}
/* El relleno gris de la casa al pasar el cursor, en todos estos desplegables
   (municipios, proyectos, dónde buscar); el elegido, un punto más */
.juris-item:hover { background: rgba(10, 14, 20, 0.035); }
.juris-item.is-selected { background: var(--sel-fill); }
.juris-item.is-selected:hover { background: rgba(10, 14, 20, 0.07); }
.juris-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juris-item-check { font-size: 15px; color: var(--accent); flex-shrink: 0; }
.juris-empty { padding: 12px 16px; text-align: center; color: var(--text-3); font-size: var(--text-sm); }

/* Input */
.pill-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-1);
  min-width: 0;
  resize: none;
  /* Con el texto largo el campo llega a su alto máximo: a partir de ahí se
     desplaza dentro, antes se cortaba y no había manera de leer el final. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  line-height: 1;
  padding: 0;
  height: 24px;
}
.pill-input::-webkit-scrollbar { width: 4px; }
.pill-input::-webkit-scrollbar-track { background: transparent; }
.pill-input::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 2px; }

.pill-input::placeholder { color: var(--text-3); font-family: var(--font); }

/* Composer: centra verticalment el text/placeholder dins la barra (line-height
   = altura del camp), perquè no quedi enganxat a dalt. */
.composer .pill-input {
  line-height: 1.6;
  max-height: 160px;         /* creix fins aquí; després scroll */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.composer .pill-input::-webkit-scrollbar { width: 5px; }
.composer .pill-input::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }

/* La barra del composer creix amb el textarea (fins al seu màxim) en lloc de
   quedar-se fixa a 54px amb el text sobresortint per fora. Els botons queden
   ancorats a baix (com ChatGPT/Claude), no centrats verticalment. */
.composer .pill-bar {
  height: auto;
  min-height: 54px;
  padding-top: 9px;
  padding-bottom: 9px;
  align-items: flex-end;
}
/* Compensa les alçades diferents dels controls perquè en una sola línia
   quedin òpticament centrats igual que abans. */
.composer .pill-bar > .pill-plus-wrap { margin-bottom: 4px; }   /* clip (28px) centrat amb el xip (36px) */
.composer .pill-bar > .juris-wrap { margin-bottom: 0; }
.composer .pill-bar > .pill-mic-btn  { margin-bottom: 4px; }
.composer .pill-bar > .pill-send-btn { margin-bottom: 2px; }
.composer .pill-input { margin-bottom: 6px; }

/* Clip d'adjuntar del composer */
.composer .pill-plus-btn .ti-paperclip { font-size: 18px; }

/* Xip del fitxer adjuntat (a sobre de la barra) */
.composer-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 0 0 8px 6px;
  height: 28px;
  padding: 0 6px 0 12px;
  border-radius: 15px;
  font-size: 12.5px;
  color: var(--text-2);
  background: rgba(var(--glass-rgb), 0.88);
  border: 1px solid var(--border);
}
.composer-attach-chip.hidden { display: none; }
.composer-attach-chip .ti-paperclip { font-size: 14px; color: var(--text-3); }
.composer-attach-chip span {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-attach-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--text-3);
  background: rgba(10, 14, 20, 0.06);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.composer-attach-chip button:hover { background: rgba(10, 14, 20, 0.12); color: var(--text-1); }

/* Mic */
.pill-mic-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color var(--t-hover);
}

.pill-mic-btn:hover { color: var(--text-1); }

/* Martillo (Hugeicons · HammerIcon): mejorar la consulta con IA. Mismo cuerpo
   que el dictado. El trazado original mira a la derecha → lo espejamos. */
.magic-ico { width: 18px; height: 18px; display: block; flex-shrink: 0; transform: scaleX(-1); }
.pill-magic-btn:disabled { opacity: .45; cursor: default; }
.pill-magic-btn:disabled:hover { color: var(--text-3); }
/* Cargando: el martillo sigue picando, como antes… */
.pill-magic-btn.is-loading { cursor: default; color: var(--text-1); opacity: 1; }
.pill-magic-btn.is-loading .magic-ico {
  animation: pjx-mill-pica 0.7s ease-in-out infinite;
  transform-origin: 50% 50%;
}
/* …y el aro aparece DONDE SE ESCRIBE, ocupando el sitio del texto */
.text-carrega { position: absolute; pointer-events: none; }
/* Mientras gira el aro, el texto de ayuda del campo no se pinta */
.sense-pista::placeholder { color: transparent; }
/* ── REGLA DE ORO · el aro de carga ────────────────────────────────────
   Todas las esperas de la aplicación usan ESTE aro: el del martillo de
   mejorar el prompt. No se inventan aros nuevos ni se usan los de la
   librería de iconos. Se pinta con window.aroCarrega(px) desde el JS o
   con <svg class="magic-spin es-aro"> en el HTML, y el tamaño se cambia
   con la variable --aro. */
.magic-spin { display: none; width: 18px; height: 18px; }
.magic-spin.es-aro {
  display: inline-block; vertical-align: -0.18em;
  width: var(--aro, 18px); height: var(--aro, 18px);
  animation: magic-spin-gira 2s linear infinite;
}
.magic-spin.es-text {
  display: block;
  width: 17px; height: 17px;
  animation: magic-spin-gira 2s linear infinite;
}
.magic-spin-pista { stroke: rgba(10, 14, 20, 0.10); }
.magic-spin-arc {
  stroke: var(--text-1);
  transform-origin: center;
  animation: magic-spin-serp 1.4s ease-in-out infinite;
}
@keyframes magic-spin-gira { to { transform: rotate(360deg); } }
/* La «serpiente»: el arco crece y mengua mientras el aro gira */
@keyframes magic-spin-serp {
  0%   { stroke-dasharray: 1 210; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 150 210; stroke-dashoffset: -32; }
  100% { stroke-dasharray: 1 210; stroke-dashoffset: -181; }
}
@media (prefers-reduced-motion: reduce) {
  .pill-magic-btn.is-loading .magic-ico,
  .magic-spin.es-text,
  .magic-spin-arc { animation: none; }
  .magic-spin-arc { stroke-dasharray: 60 210; }
}
.pill-magic-btn.is-error { color: var(--coral); }
@media (prefers-reduced-motion: reduce) {
  .pill-magic-btn.is-loading::after { animation-duration: 1.6s; }
}

/* ── Iconos de la barra de escribir: una sola familia ──────────────────
   Clip, carpeta, martillo, micrófono y la flecha de enviar son el mismo
   tipo de control, así que se ven igual. Venían descuadrados: el clip en
   Tinta 62 y 16px, la carpeta 17px, martillo y micro 18px, la flecha 15px,
   y solo el clip pintaba un fondo al pasar el cursor.
   Vale para los tres chats (principal, conversación y proyecto): todos
   montan la misma .pill-bar. */
.pill-bar .pill-plus-btn,
.pill-bar .pill-mic-btn {
  color: var(--text-3);
  background: none;
}
.pill-bar .pill-plus-btn .ti,
.pill-bar .pill-mic-btn .ti,
.pill-bar .pill-send-btn .ti,
.pill-bar .juris-proj-ico { font-size: 17px; }
.pill-bar .magic-ico { width: 17px; height: 17px; }
/* Al pasar el cursor, todos a Tinta y sin fondo — el único que cambia de
   fondo es Enviar, que es la acción principal y tiene su propia regla. */
.pill-bar .pill-plus-btn:hover,
.pill-bar .pill-mic-btn:hover { color: var(--text-1); background: none; }

/* Send button */
.pill-send-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--border-2);
  color: var(--text-3);
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: background var(--t-hover), opacity 150ms ease;
}

.pill-send-btn.is-active {
  background: var(--action);          /* negre */
  color: var(--action-text);
  cursor: pointer;
}

/* ── Botón de parar ─────────────────────────────────────────────
   Mientras la IA redacta, enviar se convierte en el símbolo universal de
   detener: círculo en Tinta con el cuadradito blanco (como la referencia,
   ChatGPT o Claude). Vale para los tres chats: principal, proyecto y visor. */
.send-btn.is-stop,
.pdf-assist-send.is-stop {
  background: var(--action) !important;
  color: var(--action-text) !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
.send-btn.is-stop i,
.pdf-assist-send.is-stop i { display: none; }
.send-btn.is-stop::before,
.pdf-assist-send.is-stop::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

.pill-send-btn.is-active:hover {
  background: var(--action-hover);    /* verd al passar el cursor (com "Continuar") */
}

/* Shortcuts row */
.empty-shortcuts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.shortcuts-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.shortcuts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: min(100%, 560px);
}

.shortcut-chip svg { flex-shrink: 0; }

/* Liquid Glass shortcuts */
.shortcut-chip {
  background: rgba(var(--glass-rgb), 0.52);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(var(--glass-rgb), 0.78);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.72) inset,
    0 -1px 0px rgba(0, 0, 0, 0.04) inset,
    0 4px 16px rgba(15, 25, 40, 0.06);
  color: var(--text-1);
  padding: 12px 16px;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.shortcut-chip:hover {
  background: rgba(var(--glass-rgb), 0.82);
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.82) inset,
    0 4px 16px rgba(15, 25, 40, 0.08);
  transform: translateY(-1px);
}

.shortcut-chip:active {
  transform: scale(0.97);
}

/* Icon container inside shortcut chip */
.shortcut-chip svg, .shortcut-chip .ti {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════════
   MEMORIA DESCRIPTIVA
   ══════════════════════════════════════════════════════════════════ */

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

/* Header */
.mem-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}

.mem-header-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.mem-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
}

.mem-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 580px;
}

/* Scrollable content */
.mem-content {
  flex: 1;
  min-height: 0;        /* clave: permite que overflow-y funcione dentro de flex */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

/* Cards */
.mem-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.mem-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.mem-card-header .ti {
  font-size: 17px;
  color: var(--accent);
  flex-shrink: 0;
}

.mem-card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}

/* Collapsible cards */
.mem-card-toggle {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  border-bottom: none;
  transition: background var(--t-hover);
  font: inherit;
}

.mem-card-toggle:hover { background: var(--bg-3); }

.mem-card-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.mem-toggle-icon {
  font-size: 16px;
  color: var(--text-3);
  transition: transform var(--t-panel);
  flex-shrink: 0;
}

.mem-card-collapsible.is-open .mem-toggle-icon {
  transform: rotate(180deg);
}

.mem-collapsible-body {
  max-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1), padding 280ms ease;
}

.mem-card-collapsible.is-open > .mem-collapsible-body {
  max-height: 1000px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.mem-card-collapsible.is-open > .mem-card-toggle {
  border-bottom: 1px solid var(--border);
}

.mem-badge-optional {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 1px 7px;
  letter-spacing: 0.03em;
}

/* Card body */
.mem-card-body {
  padding: 20px;
}

.mem-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mem-span-2 { grid-column: span 2; }

/* Fields */
.mem-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mem-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.mem-input,
.mem-select,
.mem-textarea {
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-1);
  background: var(--bg-3);
  outline: none;
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
  width: 100%;
  -webkit-appearance: none;
}

.mem-input::placeholder,
.mem-textarea::placeholder { color: var(--text-3); }

.mem-input:focus,
.mem-select:focus,
.mem-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--bg-2);
}

.mem-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.mem-textarea { resize: vertical; min-height: 72px; line-height: 1.55; }

/* Checkboxes */
.mem-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mem-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  background: var(--bg-3);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
  user-select: none;
}

.mem-check input[type="checkbox"] { display: none; }

.mem-check:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.mem-check:has(input:checked) {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Generation section */
.mem-generate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
}

.mem-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  height: 48px;
  background: var(--accent);
  color: var(--surface-white);
  border: none;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background var(--t-hover), box-shadow var(--t-hover), transform var(--t-hover);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.mem-generate-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
  transform: translateY(-1px);
}

.mem-generate-btn:active { transform: scale(0.98); }

.mem-generate-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.mem-generate-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

/* Loading */
.mem-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}

.mem-loading-dots { display: flex; align-items: center; }

.mem-loading-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
}

/* Result */
.mem-result {
  width: 100%;
  border: 1px solid var(--green);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  animation: fadeSlideUp 300ms ease both;
}

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

.mem-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--green-bg);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}

.mem-result-header .ti { font-size: 17px; }

.mem-result-download {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid var(--green);
  background: var(--bg-2);
  color: var(--green);
  border-radius: var(--r);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-hover);
}

.mem-result-download:hover { background: var(--green-bg); }

.mem-result-body {
  padding: 20px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-1);
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mem-result-body h4 {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mem-result-body h4:first-child { margin-top: 0; }

/* ── Selector de tipo de documento (estilo Legora Editor) ── */
.mem-doctype {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mem-doctype-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover), transform var(--t-hover);
}

.mem-doctype-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.mem-doctype-card.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.mem-doctype-card .ti {
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 2px;
}

.mem-doctype-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.25;
}

.mem-doctype-desc {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.35;
}

/* ── Acciones del resultado (PDF + docx) ── */
.mem-result-actions { display: flex; gap: 8px; }
.mem-result-download.is-ghost { background: transparent; }
.mem-result-download.is-ghost:hover { background: var(--bg-3); }

/* ── Documento final con membrete (estilo Legora Editor) ── */
.mem-result-doc {
  padding: 20px;
  background: var(--bg-3);
  max-height: 560px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mem-doc-letterhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.mem-doc-brand { display: flex; align-items: center; gap: 12px; }

.mem-doc-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.mem-doc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mem-doc-firm { display: flex; flex-direction: column; line-height: 1.3; }
.mem-doc-firm strong { font-size: 14px; color: var(--text-1); }
.mem-doc-firm span { font-size: 11.5px; color: var(--text-3); }

.mem-doc-ref { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.mem-doc-ref span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.mem-doc-ref strong { font-size: 13px; color: var(--text-1); font-family: var(--font-mono); }

/* Cuerpo del documento (hoja blanca) */
.mem-result-doc .mem-result-body {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 0;
  max-height: none;
  overflow: visible;
  padding: 24px;
}

/* Citas a la normativa incrustadas */
.mem-result-body cite {
  font-style: normal;
  color: var(--accent);
  background: var(--accent-dim);
  border-bottom: 1px solid var(--accent);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 500;
  cursor: help;
}

/* Bloque de fuentes citadas */
.mem-doc-sources {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 16px 24px 20px;
}

.mem-doc-sources-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: 10px;
}

.mem-doc-sources-title .ti { font-size: 15px; color: var(--accent); }

.mem-doc-sources-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mem-doc-sources-list li {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .mem-doctype { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   CHAT LAYOUT — MOCKUP STRUCTURE
   ══════════════════════════════════════════════════════════════════ */

/* Updated grid — 280px left (project card) + 1fr right (chat area) */
.chat-layout {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Project card (left column — replaces profile-panel) */
.project-card {
  padding: 24px;
  border-right: 1px solid rgba(var(--glass-rgb), 0.45);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

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

.project-card-title {
  font-family: var(--font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
}

.project-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.project-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(var(--glass-rgb),0.72), rgba(var(--glass-rgb),0.48));
  border-radius: var(--r-lg);
  border: 1px solid rgba(var(--glass-rgb), 0.72);
}

.ref-tag {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--r-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-family: var(--font-mono);
}

.proj-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  color: var(--text-1);
}

.proj-addr {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}

/* Static detail rows (mockup) */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 13px;
  background: rgba(var(--glass-rgb), 0.42);
  border-radius: var(--r-sm);
  font-size: 12.5px;
}

.detail-row .k {
  color: var(--text-3);
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-row .v {
  color: var(--text-1);
  font-weight: 500;
  text-align: right;
}

/* Detail rows (populated by app.js #profile) */
#profile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

#profile > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 13px;
  background: rgba(var(--glass-rgb), 0.42);
  border-radius: var(--r-sm);
  border: none;
}

#profile dt {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

#profile dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-1);
  font-weight: 500;
  text-align: right;
}

/* Chat area (right column — centrado sin scroll) */
.chat-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  /* Anclado arriba, no centrado: si se centra, al crecer el composer todo el
     bloque (avatar, saludo y borde superior de la caja) se desplaza hacia
     arriba. Anclado, la caja sólo se estira hacia abajo. */
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  padding: 32px 48px;
}

/* ══════════════════════════════════════════════════════════════════
   HERO / EMPTY STATE
   ══════════════════════════════════════════════════════════════════ */

/* .hero = #chat-empty-state — content block centrado por el padre */
.hero,
#chat-empty-state {
  width: 100%;
  max-width: 780px;
  flex-shrink: 0;
  /* Reproduce la altura a la que quedaba centrado, pero fija: escala con la
     ventana sin depender de cuánto haya crecido el composer. */
  margin: clamp(16px, 7.5vh, 96px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* todos los hijos heredan el 100% del ancho */
  text-align: center;     /* el texto dentro de bloques sigue centrado */
  gap: 0;
}

/* Hero greeting */
.hero-greeting {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-1);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

/* Hero orb */
.hero-orb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-glow) 0%, var(--accent) 100%);
  color: var(--surface-white);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.18);
}

/* Hero title */
.hero-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 24px;
  color: var(--text-3);
}

.hero-title em {
  font-style: normal;
  font-weight: 400;
  color: rgba(10, 14, 20, 0.62);
}

/* Hero meta */
.hero-meta {
  display: flex;
  gap: 12px;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.hero-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

/* Input wrap (extends pill-wrap in hero) */
.input-wrap {
  width: 100%;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Trust line */
.trust-line {
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.trust-line .ti {
  color: var(--accent-glow);
  font-size: 13px;
}

/* Suggestions grid */
.suggestions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  flex-shrink: 0;
}

/* El rótulo de «Documentos recientes» e «Historial» (y los del Agente).
   La letra del chat, no las mini-mayúsculas del menú: va dentro de la tarjeta,
   como la cabecera del borrador de correo, y se lee igual que ella. */
.sugg-label {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  /* En gris, como estaba: es un rótulo, no un título. Lo que se lee son los
     documentos y los chats de debajo. */
  color: var(--text-3);
  text-align: left;
}

.sugg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Suggestion chip */
.sugg-chip {
  text-align: left;
  padding: 14px 16px;
  background: rgba(var(--glass-rgb),0.88);
  border: 1px solid rgba(var(--glass-rgb), 0.78);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-1);
  box-shadow: 0 1px 1px rgba(var(--glass-rgb),0.65) inset, 0 2px 8px rgba(15,25,40,0.04);
}

.sugg-chip:hover {
  background: rgba(var(--glass-rgb), 0.88);
  transform: translateY(-1px);
  box-shadow: 0 1px 1px rgba(var(--glass-rgb),0.80) inset, 0 4px 16px rgba(15,25,40,0.08);
}

.sugg-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: var(--r-sm);
  background: var(--accent-dim);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sugg-icon svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  stroke-width: 1.8;
  display: block;
}

.sugg-text {
  padding-top: 5px;
  color: var(--text-1);
  font-family: var(--font);
}

/* History row */
.history-row {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  flex-shrink: 0;
}

/* ── Home bottom: two-column layout ── */
.home-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  /* 20 de antes + los 34 que ocupaba la frase de confianza que se quitó:
     la distancia entre la barra y las tarjetas se queda como estaba */
  margin-top: 54px;
  flex-shrink: 0;
  text-align: left;
  /* Sólo opacidad y desplazamiento: nada de animar la altura, así la sombra
     del panel no se recorta y la salida se percibe como un deslizamiento. */
  transition: opacity var(--t-panel), transform var(--t-panel);
}
/* Cuando el chat crece, los paneles se van enteros (etiqueta incluida),
   deslizándose hacia abajo. */
.home-bottom-row.is-hidden {
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
}

/* LA MISMA TARJETA QUE UNA TABLA O UN BORRADOR DE CORREO
   El rótulo va sobre el gris y la lista empieza en su hoja blanca, con las
   esquinas de arriba redondeadas: se ve dónde acaba el rótulo y empieza el
   contenido. La diferencia es que esta no se pliega. */
.home-col {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);   /* en oscuro, --dk-fill: tokens.css */
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
}
.home-col > .sugg-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  flex-shrink: 0;
}


/* Panel contenedor grande — flat según regla Glass-Reserved.
   El glass está reservado a sidebar + main-area + modales.
   Los paneles internos van sobre blanco sólido con borde fino. */
.home-panel {
  background: var(--surface-card);
  /* Sin borde ni sombra propios: la tarjeta es la de fuera (.home-col), y dos
     sombras una dentro de otra se ven como un marco doble. */
  border: none;
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.home-panel-header {
  padding: 12px 16px 8px;
  flex-shrink: 0;
}

.home-panel-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Barra fina que sólo aparece al desplazar y se desvanece 1 s después */
.home-panel-scroll {
  scrollbar-width: thin;
  scrollbar-color:var(--scroll) transparent;
  transition: scrollbar-color 0.4s ease;
}
.home-panel-scroll::-webkit-scrollbar { width: 4px; }
.home-panel-scroll::-webkit-scrollbar-track { background: transparent; }
.home-panel-scroll::-webkit-scrollbar-thumb {
  background:var(--scroll);
  border-radius: 2px;
  transition: background 0.4s ease;
}
.home-panel-scroll.is-scrolling { scrollbar-color: var(--scroll) transparent; }
.home-panel-scroll.is-scrolling::-webkit-scrollbar-thumb { background: var(--scroll); }

/* Items dentro del panel — grid garantiza alineación perfecta */
.home-doc-item,
.home-history-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-hover);
}
/* Una tercera columna para la flecha de «llevarlo al chat»: sin ella el botón
   era un tercer hijo de una rejilla de dos y se caía a la línea de abajo.
   El hueco se reserva SIEMPRE aunque la flecha solo asome al pasar por encima:
   así el título se recorta igual siempre y no baila al mover el ratón. */
.home-doc-item {
  grid-template-columns: 18px 1fr 26px;
  align-items: center;
}
.home-doc-item .home-doc-chat { align-self: center; }
.home-doc-item:hover,
.home-history-item:hover { background: rgba(10, 14, 20, 0.035); }

.home-doc-icon {
  width: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 2px;
}
.home-doc-icon .ti { font-size: 13px; }
.home-doc-icon .ficon { font-size: 15px; }

.home-doc-info,
.home-history-item .history-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.home-doc-name,
.history-item-title {
  font-size: 12.5px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-doc-time {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

.home-history-item > .ti { font-size: 13px; color: var(--text-3); padding-top: 2px; }

/* ── History items ── */
.history-item {
  padding: 10px 14px;
  background: rgba(var(--glass-rgb), 0.36);
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}

.history-item:hover { background: rgba(var(--glass-rgb), 0.65); color: var(--text-1); }
.history-item .ti { font-size: 13px; opacity: 0.5; flex-shrink: 0; }
.history-item-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.history-item-title { font-size: 12.5px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item-meta { font-size: 11px; color: var(--text-3); }

.time {
  margin-left: auto;
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints definidos en tokens.css
   ══════════════════════════════════════════════════════════════════ */

/* ── Desktop estándar: ajustes ligeros (≤ 1100px) ── */
@media (max-width: 1100px) {
  .chat-layout { grid-template-columns: 1fr; }
  .project-card { display: none; }
}

/* ── Pantallas medianas: tablet horizontal / portátil pequeño (≤ 900px) ── */
@media (max-width: 900px) {
  .hero-title { font-size: clamp(18px, 3vw, 22px); }
  .home-bottom-row { gap: 12px; }
  .home-panel { height: 180px; }
  /* Config modal: sidebar más estrecho */
  .config-modal { grid-template-columns: 200px 1fr; }
  .config-content { padding: 64px 32px 32px; }
  /* Búsqueda modal más estrecha */
  .search-modal { max-width: 86%; }
}

/* ── Pantallas pequeñas: tablet vertical (≤ 720px) ── */
/* Elements només-mòbil: amagats per defecte al desktop */
.sidebar-backdrop { display: none; }
.sidebar-toggle-mobile-ico { display: none; }
/* Escriptori: el disparador viu dins del sidebar */
.sidebar-toggle-topbar { display: none; }

@media (max-width: 768px) {
  .home-bottom-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-panel { height: 160px; }

  /* ── Sidebar off-canvas (overlay) ── */
  #app { grid-template-columns: 1fr; }
  .sidebar,
  .sidebar.is-open {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 300px);
    height: 100%;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    transform: translateX(-100%);
    transition: transform var(--t-panel);
    z-index: 300;
  }
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  /* Backdrop fosc quan el sidebar està obert */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 20, 0.45);
    z-index: 250;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-panel), visibility var(--t-panel);
  }
  .sidebar.is-open ~ .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }
  /* Mòbil: el sidebar surt fora de pantalla, així que el disparador torna
     a la topbar com a hamburguesa i el de dins del panel s'amaga. */
  .sidebar-toggle-topbar { display: flex; }
  .sidebar-toggle-mobile-ico { display: inline-flex; }
  .sidebar-toggle-in { display: none; }

  .normativa-list-panel { width: 100%; }
  .hero-orb { width: 44px; height: 44px; font-size: 16px; }
  /* Topbar: ocultar elementos secundarios */
  .topbar-meta { display: none; }
  /* Config modal: stack vertical */
  .config-modal {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .config-sidebar {
    padding: 48px 14px 12px;
    border-bottom: 1px solid var(--border);
  }
  .config-content { padding: 24px 20px; }
  /* Composer pill: padding más compacto */
  .pill-bar.pill-bar-stack { padding: 12px 12px 10px; }
}

/* ── Móvil (≤ 480px) ── */
@media (max-width: 480px) {
  .hero-title { font-size: 20px; }
  .hero-greeting { font-size: 20px; }
  .hero-meta { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .home-panel { height: 140px; }
  .sugg-grid { grid-template-columns: 1fr; }
  /* App padding más ajustado para ganar superficie útil */
  #app { padding: 8px; gap: 8px; }
  /* Topbar simplificado */
  .topbar { padding: 0 12px; }
  /* Touch targets: forzar 40px mínimo en items interactivos */
  .sidebar-item,
  .home-doc-item,
  .home-history-item { min-height: 40px; }
  /* Plus button del composer pierde el texto */
  .pill-bar-stack .plus-label { display: none; }
  /* Modal de búsqueda: full width */
  .search-modal { max-width: 96%; }
}

/* ── Normativa · barra selector geográfico ── */
/* ── Normativa · barra de filtres (pills d'àmbit + tipus + dropdown muni) ── */
.norm-filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 0 var(--sp-4);
}
.norm-filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.norm-pills {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.norm-pills::-webkit-scrollbar { display: none; }

/* Pills d'àmbit/tipus: MATEIX estil que el xip de document de la taula
   (rectangle gris pla arrodonit, hover una mica més fosc) */
/* Estil Legora: normal blanc amb stroke fi gris · seleccionat gris */
.norm-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;                       /* mateixa mida que el xip de municipi */
  padding: 0 14px;
  border-radius: var(--r);            /* fillet més contingut (12px) */
  /* Mismos botones que los filtros de Documentación: trazo fino en reposo y
     relleno gris el elegido, para que las dos pantallas se lean igual. */
  border: 1px solid var(--border);
  background: none;
  color: var(--text-1);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}
.norm-pill:hover {
  border-color: var(--border-2);
  background: rgba(10, 14, 20, 0.02);
  color: var(--text-1);
}
/* Seleccionada: relleno gris y sin trazo, como los chips del sistema */
.norm-pill.is-active {
  background: rgba(10, 14, 20, 0.06);
  border-color: transparent;
  color: var(--text-1);
}
.norm-pill.is-active:hover { background: rgba(10, 14, 20, 0.10); border-color: transparent; }

/* Fletxa en cercle blanc (com la referència «Book a demo»): al botó lateral
   de seleccionar municipi / comunitat autònoma */
.norm-pill-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(10, 14, 20, 0.07);   /* cercle gris sobre fons blanc */
  color: var(--text-1);
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 2px;
}
/* Les dues files de pills tenen exactament la mateixa mida */
.norm-pills-sm .norm-pill { height: 34px; padding: 0 14px; font-size: 13px; }

/* Nivell 1: selector lateral (apareix a la dreta en triar CCAA/Provincia/Municipio) */
.norm-side-wrap {
  position: relative;
  flex: 0 0 auto;   /* al costat de les pills (just després de Municipio) */
}
.norm-side-wrap.hidden { display: none; }
/* «Selecciona…» (sense valor): blanc amb stroke fi + fletxa en cercle */
.norm-side-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r);
  /* Sense stroke, com les pills */
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  white-space: nowrap;
  /* sense max-width: la frase es mostra sencera, sense punts suspensius */
  transition: background var(--t-hover), color var(--t-hover);
}
.norm-side-btn:hover { background: rgba(10, 14, 20, 0.04); color: var(--text-1); }
/* Valor seleccionat: gris amb la bandera corresponent */
.norm-side-btn.is-active {
  background: rgba(10, 14, 20, 0.07);
  color: var(--text-1);
}
.norm-side-btn.is-active:hover { background: rgba(10, 14, 20, 0.09); }
.norm-side-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.norm-side-clear { font-size: 15px; flex-shrink: 0; transition: opacity var(--t-hover); }
.norm-side-clear:hover { opacity: 0.7; }
.norm-geo-chev.hidden, .norm-pill-arrow.hidden, .norm-side-clear.hidden { display: none; }
.norm-side-btn .norm-geo-flag { width: 18px; height: 18px; }

/* El dropdown reutilitza .norm-geo-dropdown / .norm-geo-search-wrap /
   .norm-geo-list / .norm-geo-item, ancorat sota el selector */
.norm-side-wrap .norm-geo-dropdown { top: calc(100% + 6px); left: 0; right: auto; }

.norm-geo-flag {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  background: var(--surface-card);
}
/* Escudos: contenidos y centrados dentro del círculo */
.norm-geo-flag.is-coat,
.norm-geo-item-flag.is-coat {
  object-fit: contain;
  object-position: center;
  padding: 2px;
}

.norm-geo-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
.norm-geo-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.norm-geo-value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.norm-geo-lock { font-size: 14px; color: var(--text-3); margin-left: auto; flex-shrink: 0; }
.norm-geo-chev { font-size: 16px; color: var(--text-3); margin-left: auto; flex-shrink: 0; transition: transform var(--t-hover); }
.norm-geo-muni-btn[aria-expanded="true"] .norm-geo-chev { transform: rotate(180deg); }

.norm-geo-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  max-width: 86vw;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  overflow: hidden;
  animation: fadeIn 120ms ease both;
}
.norm-geo-dropdown.hidden { display: none; }

.norm-geo-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}
.norm-geo-search-wrap input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  width: 100%;
}
.norm-geo-search-wrap input::placeholder { color: var(--text-3); }

.norm-geo-list { max-height: 320px; overflow-y: auto; padding: var(--sp-2); }
.norm-geo-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  text-align: left;
  transition: background var(--t-hover);
}
.norm-geo-item:hover { background: rgba(10, 14, 20, 0.05); }
.norm-geo-item-flag {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  background: var(--surface-card);
}
.norm-geo-empty { padding: var(--sp-4); text-align: center; color: var(--text-3); font-size: var(--text-sm); }

/* ── Normativa · tabla de documentos (estilo revisión tabular) ── */
.norm-table-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.norm-table-toolbar { display: flex; align-items: center; gap: var(--sp-4); }
.norm-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 320px;
  max-width: 100%;
  padding: 9px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  color: var(--text-3);
  transition: border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover);
}
.norm-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--bg-2);
}
.norm-search .ti { font-size: 16px; flex-shrink: 0; }
.norm-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  width: 100%;
}
.norm-search input::placeholder { color: var(--text-3); }

.norm-table-count { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ── Novedades del BOPB ──────────────────────────────────────────────────────
   Un desplegable en la barra de la tabla: qué normativa nueva ha entrado y qué
   día. `margin-left: auto` lo manda a la derecha, lejos del buscador. */
.norm-nov-wrap { position: relative; margin-left: auto; }
/* Va en la línea de arriba, con el mismo relleno gris que «Compartido»
   (hereda .pjx-tbtn.pjd-compartir); aquí solo lo suyo. */
.norm-nov-btn { margin-left: 0; border-radius: var(--r-pill); }
.norm-nov-btn .ti { font-size: 15px; }
/* El sello con el visto, propio: máscara para que siga al color del botón */
.norm-nov-ico {
  display: inline-flex; width: 16px; height: 16px; flex-shrink: 0;
}
.norm-nov-ico::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("icons/novedades.svg?v=1") no-repeat center / contain;
          mask: url("icons/novedades.svg?v=1") no-repeat center / contain;
}
/* «Nueva versión · Recargar» (public/versioNova.js): el primero de la línea
   de arriba, con la forma de «Novedades» y el relleno de la acción principal */
.versio-nova { margin-left: 0; border-radius: var(--r-pill); }
/* Si no cabe en la línea (el Agente en el móvil, o con los documentos al lado
   en una pantalla estrecha), flota justo debajo, a la derecha (lo decide
   versioNova.js midiendo la línea) */
.versio-nova.es-flotant { position: absolute; top: calc(100% + 8px); right: var(--sp-4); z-index: 1; box-shadow: var(--shadow-lg); }
.topbar-vista-acts { display: inline-flex; align-items: center; gap: 6px; }
.topbar-vista-acts:empty { display: none; }
.topbar-vista-acts .norm-nov-wrap { margin-left: 0; }
.norm-nov-caret { font-size: 13px; color: var(--text-3); }
/* El número de novedades del último día: si no hay ninguna, no se pinta */
.norm-nov-badge {
  min-width: 18px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--sel-fill); color: var(--text-1);
  font-size: 11px; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.norm-nov-badge.hidden { display: none; }

/* Tarjeta blanca, sombra corta y sin marco: el desplegable de la casa */
.norm-nov-dd {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: 460px; max-width: 90vw; max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--surface-card); border: none;
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
.norm-nov-dd.hidden { display: none; }
/* Más grande a mano: el borde izquierdo, el de abajo y la esquina de abajo a
   la izquierda. Cuelga de la derecha, así que crece hacia donde hay sitio. */
.norm-nov-mida { position: absolute; z-index: 3; touch-action: none; }
.norm-nov-mida.es-esq  { left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.norm-nov-mida.es-baix { left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.norm-nov-mida.es-cant { left: 0; bottom: 0; width: 16px; height: 16px; cursor: nesw-resize; }
/* La esquina se deja ver al pasar por el desplegable: una escuadra gris */
.norm-nov-mida.es-cant::after {
  content: ''; position: absolute; left: 6px; bottom: 6px; width: 7px; height: 7px;
  border-left: 1.5px solid var(--border-2); border-bottom: 1.5px solid var(--border-2);
  border-bottom-left-radius: 3px; opacity: 0; transition: opacity var(--t-hover);
}
.norm-nov-dd:hover .norm-nov-mida.es-cant::after,
.norm-nov-dd.es-estirant .norm-nov-mida.es-cant::after { opacity: 1; }
.norm-nov-dd.es-estirant { user-select: none; }
/* Cabecera: rótulo y contador, sin línea debajo */
.norm-nov-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 6px; flex-shrink: 0;
}
.norm-nov-tit { font-size: 13px; color: var(--text-1); }
.norm-nov-n { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Los periodos, como «Todos / Compartidos»: relleno solo el elegido */
.norm-nov-rangs {
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px 6px; flex-shrink: 0;
}
.norm-nov-rang {
  height: 28px; padding: 0 12px; border: none; border-radius: var(--r-pill);
  background: none; color: var(--text-3);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.norm-nov-rang:hover { color: var(--text-1); background: none; }
.norm-nov-rang.es-actiu { color: var(--text-1); background: rgba(10, 14, 20, 0.06); }

/* ── NOVEDADES: FILTRAR POR MUNICIPIO ────────────────────────────────────────
   «Un botón que ponga Municipio, una búsqueda, y que aparezcan todas las
   novedades de ese municipio» (8-10-2026). Es una pastilla más de la fila de
   periodos, para que se lea como lo que es: otra forma de acotar la misma
   lista. El desplegable es el geográfico de la barra de arriba, tal cual. */
.norm-nov-muni-wrap { position: relative; margin-left: auto; }
.norm-nov-muni-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; }
.norm-nov-muni-btn > span:not(.norm-nov-muni-flag) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El escudo del municipio, como en el resto de la casa */
.norm-nov-muni-flag { display: inline-flex; flex-shrink: 0; }
.norm-nov-muni-flag:empty { display: none; }
.norm-nov-muni-flag img { width: 14px; height: 14px; object-fit: contain; display: block; }
/* La ✕ de quitar el filtro: gris a negro, sin fondo (regla de las cruces) */
.norm-nov-muni-x {
  font-size: 12px; flex-shrink: 0; color: var(--text-3);
  transition: color var(--t-hover);
}
.norm-nov-muni-x:hover { color: var(--text-1); }
/* La lista cuelga del botón, dentro del desplegable de novedades */
/* Cuelga del body, no del panel: el panel lleva `overflow: hidden` para sus
   esquinas y para poder estirarlo, y recortaba la lista (8-10-2026). Fija y
   por encima de todo lo de esa pantalla. */
.norm-nov-muni-dd {
  position: fixed; top: 0; left: 0;
  width: 240px; max-height: 280px; z-index: 1200;
}
/* Cuántas novedades tiene cada municipio en el periodo que se mira */
.norm-nov-muni-n { margin-left: auto; color: var(--text-3); font-size: 11.5px; flex-shrink: 0; }
/* «Ver todos los municipios» cuando el filtro deja la lista vacía. Sin
   subrayar (8-10-2026): basta la tinta para que se vea que se puede pulsar,
   al lado de un texto gris. */
.norm-nov-tots {
  border: none; background: none; padding: 0; margin-left: 4px;
  font: inherit; color: var(--text-1); text-decoration: none;
  cursor: pointer;
}
.norm-nov-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
/* La fecha, pegada arriba mientras se recorre su lista */
.norm-nov-dia {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 6px 4px; background: var(--surface-card);
  font-size: 12.5px; color: var(--text-3);
}
.norm-nov-dia-n { font-variant-numeric: tabular-nums; opacity: .7; }
/* Las filas, sin líneas: se separan con el relleno al pasar el cursor */
.norm-nov-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: none; border-radius: var(--r);
  background: none; color: var(--text-1); font: inherit; font-size: 13px;
  cursor: pointer; transition: background var(--t-hover);
}
.norm-nov-item:hover { background: rgba(10, 14, 20, 0.035); }
.norm-nov-item:disabled { cursor: default; }
.norm-nov-item:disabled .norm-nov-t { color: var(--text-2); }
/* Dos líneas y basta: los títulos del BOPB son larguísimos */
.norm-nov-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.norm-nov-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12px; color: var(--text-3);
}
.norm-nov-meta .norm-dot { width: 7px; height: 7px; }
.norm-nov-sep { color: var(--text-3); opacity: .55; }
.norm-nov-buit { padding: 18px 14px; font-size: 13px; color: var(--text-3); text-align: center; }

.norm-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* A sangre: ocupa todo el ancho del panel (anula el padding lateral de la vista) */
  margin: 0 calc(-1 * var(--sp-6));
  background: var(--surface-card);
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  overflow: auto;
  /* Barra fina gris estàndard (com la resta de la web) */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.norm-table::-webkit-scrollbar { width: 4px; height: 4px; }
.norm-table::-webkit-scrollbar-track { background: transparent; }
.norm-table::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 2px; }
.norm-thead,
.norm-row {
  display: grid;
  /* Documento se lleva el espacio elástico; Ámbito pasa a ancho fijo, que
     con nombres de municipio no necesita más. */
  grid-template-columns: minmax(340px, 5fr) 170px 150px 200px;
  align-items: center;
  gap: var(--sp-4);
  /* Mismo eje vertical que los filtros y el buscador: la tabla va a sangre
     (margin -sp-6), así que sp-6 de padding devuelve el contenido al inset. */
  padding: 0 var(--sp-6);
  /* La fila nunca es más estrecha que sus columnas: si lo fuera, las
     celdas fijas desbordarían la caja y la línea de abajo se quedaría
     corta (acababa a media columna «Ámbito» con el visor abierto). Con
     sitio de sobra, «Documento» absorbe el resto y la línea llega al
     margen; sin sitio, la tabla se desplaza en horizontal. */
  min-width: calc(340px + 170px + 150px + 200px + 3 * var(--sp-4) + 2 * var(--sp-6));
}
.norm-thead {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Es flex-item de .norm-table: sin flex-shrink:0 se comprimía al desbordar
     y las líneas superior/inferior quedaban pegadas al texto. */
  flex-shrink: 0;
  min-height: 44px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}
/* Cabecera de tabla: 500, el peso Title del sistema. Es la excepción a la
   Mini-Caps Rule — nombra la columna, no titula una sección. */
.norm-th {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-1);
}
.norm-row {
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-hover);
}
/* La última fila cierra la tabla por abajo */
.norm-row:last-child { border-bottom: 1px solid var(--border); }
.norm-row:hover { background: rgba(10, 14, 20, 0.035); }

/* Plan supramunicipal: "+N" junto al municipio principal. El listado
   completo va en el title, que es lo que el usuario ve al pasar el ratón. */
/* «+946»: el mismo apunte que el contador de los grupos —sin cápsula, del
   cuerpo del texto— y en negro al pasar el cursor. */
.norm-ambit-mes {
  margin-left: 6px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-3);
  font-family: var(--font);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-hover);
}
.norm-ambit-mes:hover { color: var(--text-1); }

/* Borradores pendientes: barra encima de la de escribir, con la tarjeta
   blanca de siempre. Cabecera con el contador y «Guardar todos»; cada
   fila, su icono, su nombre y las dos acciones. */
.esb-caixa {
  border-radius: var(--r);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
}
.esb-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 10px;
}
.esb-toggle {
  display: flex; align-items: center; gap: 7px;
  flex: 1; min-width: 0;
  padding: 6px 0;
  border: none; background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-3);
  text-align: left; cursor: pointer;
  transition: color var(--t-hover);
}
.esb-toggle i { font-size: 15px; transition: transform var(--t-hover); }
.esb-caixa.es-plegat .esb-toggle i { transform: rotate(-90deg); }
.esb-tit { color: var(--text-1); }
.esb-toggle:hover, .esb-toggle:hover .esb-tit { color: var(--text-1); }
.esb-tots {
  border: none; background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-3);
  cursor: pointer; padding: 6px 4px;
  transition: color var(--t-hover);
}
.esb-tots:hover { color: var(--text-1); }
.esb-cos {
  overflow: hidden;
  max-height: 320px;
  opacity: 1;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}
.esb-caixa.es-plegat .esb-cos { max-height: 0; opacity: 0; }
/* En reposo, todo blanco: el gris del documento solo aparece al pasar el
   cursor por su fila. */
.esb-cos { padding: 0 5px 5px; }
.esb-fila {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: none;
  font-size: 13px;
  transition: background var(--t-hover);
}
.esb-fila + .esb-fila { margin-top: 2px; }
.esb-fila:hover { background: rgba(10, 14, 20, 0.04); }
.esb-fila .ficon { width: 17px; height: 17px; flex-shrink: 0; }
.esb-nom {
  min-width: 0; flex: 1;
  color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* «Sin guardar» vive en el extremo derecho y, al pasar el cursor, se
   corre a la izquierda para dejar sitio al aspa y al visto. */
.esb-tag {
  /* Mismo cuerpo que el nombre del documento: en 12px cantaba */
  flex-shrink: 0; font-size: inherit; color: var(--text-3);
  transition: transform var(--t-hover);
}
.esb-fila:hover .esb-tag { transform: translateX(-56px); }
.esb-accions {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-hover);
}
.esb-fila:hover .esb-accions { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .esb-tag { transition: none; } }
.esb-b {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-3);
  font-size: 15px; cursor: pointer;
  transition: color var(--t-hover);
}
.esb-b:hover { color: var(--text-1); }
.esb-menu { min-width: 210px; }
/* Guardando: el aro gira donde ponía «Sin guardar» */
.esb-aro {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  font-size: inherit; color: var(--text-3);
}
.magic-spin.es-esb {
  display: block; width: 14px; height: 14px;
  animation: magic-spin-gira 2s linear infinite;
}
/* Guardado: la fila se queda, con su visto */
.esb-tag.es-fet { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.esb-tag.es-fet i { font-size: 14px; }
.esb-fila.es-guardat .esb-nom { color: var(--text-2); }
/* Ni el aro ni el «Guardado» se corren: ahí ya no hay acciones */
.esb-fila.es-guardant:hover .esb-tag,
.esb-fila.es-guardat:hover .esb-tag { transform: none; }
.esb-fila.es-guardant:hover { background: none; }
/* Guardado: la fila se puede abrir, así que conserva su gris al pasar */
.esb-fila.es-guardat { cursor: pointer; }
.esb-fila.es-guardat:hover { background: rgba(10, 14, 20, 0.04); }
.esb-fila.es-guardat:hover .esb-nom { color: var(--text-1); }
@media (prefers-reduced-motion: reduce) { .magic-spin.es-esb { animation: none; } }

.pdf-tabs {
  flex-shrink: 0;
  display: flex; align-items: flex-end; gap: 2px;
  padding-right: 12px;
  background: color-mix(in srgb, rgb(10, 14, 20) 7%, var(--surface-white, #fff));
}
.pdf-tabs.hidden { display: none; }
.pdf-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 300px;
  padding: 8px 8px 9px 12px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: none;
  font-size: 12.5px; color: var(--text-3);
}
.pdf-tab:first-child { border-top-left-radius: 0; }
/* La pestaña abierta: blanco opaco, sin corte con el documento de abajo */
.pdf-tab.es-actiu {
  background: var(--surface-white, #fff);
  color: var(--text-1);
  margin-bottom: -1px;
  padding-bottom: 10px;
}
.pdf-tab > i { font-size: 14px; color: var(--text-3); }
/* Pestañas de documentos abiertos: se pulsan, y su cruz solo sale al
   pasar el cursor (gris → negro, sin relleno, como todas las cruces) */
/* Se reparten el ancho y recortan el nombre con puntos: nunca se salen */
.pdf-docs-tabs { overflow: hidden; }
/* Cada pestaña mide lo que su título, con un tope: los títulos largos se
   recortan con puntos al ancho máximo */
.pdf-docs-tabs .pdf-tab { cursor: pointer; padding-right: 4px; flex: 0 1 auto; width: auto; min-width: 0; max-width: 220px; }
.pdf-docs-tabs .pdf-tab:hover { color: var(--text-1); }
.pdf-docs-tabs .pdf-tab .ficon { font-size: 14px; flex-shrink: 0; }
.pdf-docs-tabs .pdf-tab-x {
  width: 16px; height: 16px; padding: 0; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 11px; opacity: 0; flex-shrink: 0;
  cursor: pointer; transition: opacity var(--t-hover), color var(--t-hover);
}
/* Solo al pasar el cursor por la pestaña, también en la abierta */
.pdf-docs-tabs .pdf-tab:hover .pdf-tab-x { opacity: 1; }
.pdf-docs-tabs .pdf-tab-x:hover { color: var(--text-1); }
/* La flecha de esconder se enseña siempre, haya los documentos que haya */
.pdf-tab-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El quiebre de la carpeta: la pestaña abierta cae con radio invertido */
.pdf-tab.es-actiu::before,
.pdf-tab.es-actiu::after {
  content: ''; position: absolute; bottom: 0;
  width: 9px; height: 9px;
  background: var(--surface-white, #fff);
}
.pdf-tab.es-actiu::before {
  left: -9px;
  -webkit-mask-image: radial-gradient(circle 9px at 0 0, transparent 98%, #000 100%);
          mask-image: radial-gradient(circle 9px at 0 0, transparent 98%, #000 100%);
}
.pdf-tab.es-actiu:first-child::before { display: none; }
.pdf-tab.es-actiu::after {
  right: -9px;
  -webkit-mask-image: radial-gradient(circle 9px at 100% 0, transparent 98%, #000 100%);
          mask-image: radial-gradient(circle 9px at 100% 0, transparent 98%, #000 100%);
}
/* La cruz de cada pestaña: nunca lleva fondo, solo pasa de gris a negro */
.pdf-tab-x {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text-3);
  font-size: 14px; cursor: pointer;
  transition: color var(--t-hover);
}
.pdf-tab-x:hover { color: var(--text-1); }
/* Compartir: tres puntos pequeños unidos por dos líneas, sin cerrar */
.ico-comparteix { width: 18px; height: 18px; display: block; }
.ico-comparteix circle { fill: currentColor; }   /* bolitas un poco más grandes */
.ico-comparteix path { fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Los iconos de la tira, a la derecha de las pestañas. Sin relleno: solo
   pasan de gris a negro al pasar el cursor. */
/* Barra de progreso (la usa la subida de documentos): sin aros ni verdes */
.pdf-trad-carrega {
  padding: 14px 16px 12px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}
.pdf-trad-carrega.hidden { display: none; }
.pdf-trad-tit { font-size: 13.5px; font-weight: 500; color: var(--text-1); }
.pdf-trad-sub { margin-top: 2px; font-size: 12.5px; color: var(--text-3); min-height: 16px; }
.pdf-trad-barra {
  margin-top: 10px;
  height: 4px; border-radius: 4px;
  background: rgba(10, 14, 20, 0.08);
  overflow: hidden;
}
/* Se llena con el porcentaje real, no da vueltas */
.pdf-trad-barra span {
  display: block; width: 0; height: 100%;
  border-radius: 4px;
  background: var(--text-1);
  transition: width 0.3s ease;
}
@keyframes pdf-trad-va {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) { .pdf-trad-barra span { animation: none; width: 100%; } }

/* Paginador del visor: pastilla flotante abajo, centrada sobre el
   documento —flecha arriba, «2/3», flecha abajo. */
/* Pie flotante del visor: el paginador y el zoom, uno al lado del otro */
.pdf-peu {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 20; display: flex; align-items: center; gap: 10px;
}
.pdf-peu > .pdf-pagina { position: static; transform: none; }
.pdf-zoom {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px; border-radius: var(--r-pill);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 10px 24px -12px rgba(18, 18, 23, 0.38);
}
.pdf-zoom.hidden { display: none; }
.pdf-zoom-n {
  min-width: 48px; padding: 0 2px; border: none; background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
/* Ampliado, la página es más ancha que el visor: se desplaza a lo ancho */
.pdf-visor-body.es-zoom { align-items: flex-start; overflow-x: auto; }
.pdf-pagina {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px;
  border-radius: var(--r-pill);
  /* Opaca: con el texto del documento por debajo no se leía */
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 10px 24px -12px rgba(18, 18, 23, 0.38);
}
.pdf-pagina.hidden { display: none; }
/* «Vigente · 11 jun 2003»: la misma tarjeta que el paginador, al lado. Solo
   sale en normativa, y dice de un vistazo si el documento abierto es el que
   manda hoy —lo que el arquitecto mira antes de citarlo. */
.pdf-vigencia {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 10px 24px -12px rgba(18, 18, 23, 0.38);
  /* Misma letra y mismo color que «1/16» y «100 %»: la fila se lee como una */
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pdf-vigencia.hidden { display: none; }
.pdf-pagina-n {
  min-width: 42px; text-align: center;
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.pdf-pagina-fl {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: none; color: var(--text-3);
  font-size: 15px; cursor: pointer;
  transition: color var(--t-hover);
}
.pdf-pagina-fl:hover { color: var(--text-1); }
.pdf-pagina-fl[disabled] { opacity: 0.3; cursor: default; }
.pdf-pagina-fl[disabled]:hover { color: var(--text-3); }

/* Los municipios afectados, en la caja del buscador */
.muni-modal { max-width: 460px; }
.muni-tit { flex: 1; font-size: 13px; color: var(--text-1); }
.muni-llista {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
@media (max-width: 560px) { .muni-llista { grid-template-columns: 1fr; } }
.muni-fila {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r);
  font-size: 13px; color: var(--text-2);
  transition: background var(--t-hover), color var(--t-hover);
}
.muni-fila:hover { background: var(--bg-3); color: var(--text-1); }
.muni-fila .norm-flag img { width: 14px; height: 14px; object-fit: contain; }

/* ── Vista de carpetas (expedientes del RPUC) ─────────────────────────
   Un expediente es un plan con varios documentos dentro. La carpeta se
   distingue de un documento por el chevron y el contador, no por otro
   color: siguen siendo filas de la misma tabla. */
.norm-row.is-hidden { display: none; }

/* El mismo chevron que en el resto de la casa, centrado en su caja */
.norm-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
  transition: transform var(--t-hover);
}
.norm-row-folder.is-open .norm-caret { transform: rotate(90deg); }

/* Cuántos documentos hay dentro: «+2», del mismo cuerpo que el título y
   sin cápsula — es un apunte, no una etiqueta. */
.norm-folder-count {
  margin-left: 6px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-3);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}
/* La carpeta no lleva el relleno gris del documento: no es un archivo que
   se abra, es el expediente que los agrupa. */
.norm-row.norm-row-folder .norm-col-doc {
  background: none;
  padding-left: 0;
}
/* Nada de velo alrededor del texto: al pasar el cursor se sombrea la FILA
   entera, como en el resto de la tabla, y el título se queda limpio. */

/* El documento de dentro va indentado: la sangría es lo que dice que
   pertenece a la carpeta de encima. */
.norm-row-child .norm-col-doc { margin-left: var(--sp-6, 28px); }
.norm-row-child { background: rgba(10, 14, 20, 0.012); }

/* ── Separadores verticales entre columnas ────────────────────────────
   Van centrados en el hueco, no pegados a la celda, para que la línea
   parta la columna por su eje. Las celdas se estiran a todo el alto de
   la fila para que la línea llegue de arriba abajo. */
.norm-thead,
.norm-row { align-items: stretch; }
.norm-th,
.norm-td { display: flex; align-items: center; position: relative; }
.norm-th + .norm-th::before,
.norm-td + .norm-td::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-4) / -2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
/* El chip del nombre tiene altura fija: no puede estirarse, así que se
   centra a mano o quedaría pegado arriba. */
.norm-row .norm-col-doc { align-self: center; }
.norm-td { font-size: var(--text-sm); color: var(--text-1); min-width: 0; }
.norm-col-doc { display: flex; align-items: center; gap: var(--sp-2); }
/* Nom del document com a chip/botó gris (estil Legora) · NOMÉS a les files,
   no a la capçalera "Documento" */
.norm-row .norm-col-doc {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  height: 34px;                       /* mateixa mida que la resta de xips */
  padding: 0 14px;
  background: rgba(10, 14, 20, 0.05); /* només fill gris, sense stroke */
  border: none;
  border-radius: var(--r);            /* fillet més contingut (12px) */
  transition: background var(--t-hover);
}
.norm-row:hover .norm-col-doc {
  background: rgba(10, 14, 20, 0.08);
}
/* …salvo en las carpetas: ahí el título no es un chip, así que no se
   sombrea ni en reposo ni al pasar el cursor. Solo se sombrea la fila. */
.norm-row.norm-row-folder:hover .norm-col-doc { background: none; }

/* Tooltip propi (instantani) per a noms de document tallats */
.app-tooltip {
  position: fixed;
  z-index: 7000;   /* por encima de los pop-ups (nuevo proyecto va a 6000) */
  max-width: 380px;
  padding: 7px 11px;
  background: rgba(10, 14, 20, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  word-break: break-word;
}
.app-tooltip.visible { opacity: 1; transform: none; }
/* El globo de un proyecto SE PULSA: entra en su Agente */
.app-tooltip.es-pj { pointer-events: auto; cursor: pointer; }
.app-tooltip.es-pj:hover { background: rgba(10, 14, 20, 1); }
/* Con título: en negrita arriba y la explicación debajo */
.app-tooltip b { display: block; font-weight: 600; margin-bottom: 2px; }
.app-tooltip-ric { max-width: 320px; }
.norm-doc-ic { font-size: 15px; }
/* Mateixa tipografia que el xip de jurisdicció del chat, en negre */
.norm-doc-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Resaltado de búsqueda: coincidencia en negro, resto atenuado */
.norm-doc-name:has(.norm-hl) { color: var(--text-3); font-weight: 400; }
.norm-hl {
  background: transparent;
  color: var(--text-1);
  font-weight: 600;
}
/* Texto plano, igual que la columna «Estado»: sin relleno ni cápsula. */
.norm-type-badge {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.norm-col-scope { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.norm-col-scope span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El municipio va en 500, como la columna de datos de Legora: es el valor
   que sitúa la fila, no un atributo secundario. Solo en las filas; la
   cabecera ya lo lleva por .norm-th. */
.norm-row .norm-col-scope span { font-weight: 500; }
.norm-cell-flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-card);
}
.norm-cell-flag.is-coat { object-fit: contain; padding: 1px; }

/* Wrapper de bandera: contenedor circular que permite pintar el brillo
   de esfera por encima del <img> (los <img> no admiten pseudo-elementos). */
.norm-flag {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
}
/* Brillo de esfera 3D — SOLO banderas (no escudos): especular arriba-izq
   + sombreado inferior para dar volumen. */
.norm-flag:has(> :not(.is-coat))::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 33% 27%,
      rgba(var(--glass-rgb), 0.5) 0%,
      rgba(var(--glass-rgb), 0.2) 16%,
      rgba(var(--glass-rgb), 0) 42%),
    radial-gradient(circle at 50% 118%,
      rgba(10, 14, 20, 0.16) 0%,
      rgba(10, 14, 20, 0) 55%);
}
.norm-cell-flag-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-3);
  font-size: 11px;
}
.norm-table-empty { padding: var(--sp-6); text-align: center; color: var(--text-3); font-size: var(--text-sm); }

/* ── Normativa: fila clicable ── */
.norm-row { cursor: pointer; }
.norm-doc-link { color: inherit; text-decoration: none; }
.norm-doc-link:hover .norm-doc-name { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────────────
   VISOR PDF
   ────────────────────────────────────────────────────────────────────────── */

/* ── Visor PDF · panell lateral dret (estil Legora) ─────────────────── */
.pdf-panel {
  position: fixed;
  top: var(--app-padding);
  right: var(--app-padding);
  bottom: var(--app-padding);
  width: calc(50% - var(--app-padding));
  z-index: 100;
  display: none;
  flex-direction: column;
  background: var(--surface-white, var(--bg-1));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: -8px 0 20px rgba(15, 25, 40, 0.06);
  overflow: hidden;   /* el contingut respecta les cantonades arrodonides */
  transition: transform var(--t-panel), box-shadow var(--t-panel);
}
.pdf-panel.visible {
  display: flex;
  animation: pdf-panel-in var(--t-panel) both;
}
/* Entra deslizándose desde la derecha, POR ENCIMA del contenido */
@keyframes pdf-panel-in {
  from { transform: translateX(48px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* …y sale por donde entró: la flecha « esconder » revierte el mismo gesto */
.pdf-panel.is-leaving { animation: pdf-panel-out var(--t-panel) both; }
@keyframes pdf-panel-out {
  from { transform: none; opacity: 1; }
  to   { transform: translateX(48px); opacity: 0; }
}

/* El contenido de detrás NO se estruja: el visor se solapa encima, como
   la referencia. La sombra hacia la izquierda es la que separa las capas. */
#app {
  transition: width var(--t-panel);
}

/* ── Visor replegado ──────────────────────────────────────────
   Al abrir el sidebar, el visor se repliega fuera de pantalla y deja una
   pestaña para recuperarlo. */
.pdf-panel.is-tucked {
  transform: translateX(calc(100% + var(--app-padding) + 8px));
  pointer-events: none;
  box-shadow: none;
  animation: none;   /* «pdf-panel-in» és `both` i sobreescriuria el transform */
}
/* ── Documento aparcado · cápsula flotante de vidrio líquido ──
   Arrastrable: cada pantalla tiene el contenido en un sitio distinto,
   así que el usuario la coloca donde no le estorbe. */
.pdf-dock {
  position: fixed;
  left: 0;
  top: 96px;
  z-index: 4600;   /* por encima de todo: nada la puede tapar */
  display: none;
  align-items: center;
  gap: 9px;
  max-width: 280px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--r);   /* mismo fillet que los chips de Normativa */
  /* Gris del sistema, pero en su versión OPACA: flota sobre el contenido y
     no debe dejar ver nada por detrás. */
  background: var(--chip-solid);
  border: none;
  box-shadow: none;
  color: var(--text-1);   /* el texto siempre en negro */
  font-family: var(--font);
  font-size: 13px;
  cursor: grab;
  user-select: none;
  touch-action: none;   /* el arrastre no dispara el scroll del móvil */
  transition: background var(--t-hover);
}
/* La cápsula arrastrable ya no se enseña: la sustituye el botón redondo
   del borde derecho (.pdf-reobrir). El código de la cápsula sigue, inerte. */
body.pdf-panel-open.pdf-tucked .pdf-dock { display: none; }
.pdf-reobrir {
  position: fixed;
  right: 22px; top: 50%;   /* a media altura de la pantalla, un pelín separado del borde */
  transform: translateY(-50%);
  z-index: 4600;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: var(--chip-solid);
  box-shadow: var(--shadow);
  color: var(--text-2);
  font-size: 16px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
body.pdf-panel-open.pdf-tucked .pdf-reobrir { display: inline-flex; }
.pdf-reobrir:hover { color: var(--text-1); background: var(--chip-solid-hover); }
.pdf-dock:hover { background: var(--chip-solid-hover); }
/* Al arrastrar sólo se oscurece el relleno: sin sombra, como pediste */
.pdf-dock.is-dragging {
  cursor: grabbing;
  background: var(--chip-solid-drag);
}
/* El icono va sobre una placa blanca, con el mismo fillet en proporción
   a su tamaño: destaca del relleno gris sin romper la forma del chip. */
.pdf-dock-ico {
  font-size: 16px;
  box-sizing: content-box;
  padding: 5px;
  border-radius: var(--r-sm);
  background-color: var(--surface-white);
  background-origin: content-box;   /* el relleno queda blanco alrededor */
}
.pdf-dock-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La cruz sólo aparece al pasar el cursor, como en los adjuntos del chat */
.pdf-dock-x {
  width: 0;
  opacity: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 20px;
  border: none;
  background: none;
  padding: 0;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: width var(--t-hover), opacity var(--t-hover), color var(--t-hover);
}
.pdf-dock:hover .pdf-dock-x { width: 20px; opacity: 1; }
.pdf-dock-x:hover { color: var(--text-1); }

@media (max-width: 900px) {
  .pdf-panel { left: var(--app-padding); width: auto; }
}

/* ── Pantalla grande · el documento en el centro, a todo el alto ──
   Con lo de detrás difuminado. El ancho tiene tope: las páginas se pintan
   al ancho de la caja, y a toda la pantalla una página salía enorme y había
   que bajar muchísimo para leerla. */
.pdf-backdrop {
  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: 199;
  animation: fadeIn 150ms ease both;
}
.pdf-backdrop.hidden { display: none; }

/* En pantalla grande, la salida es «Volver al lateral», a la izquierda: la
   flecha de esconder y el botón de ampliar de la derecha se apartan */
.pdf-visor-btn.pdf-visor-reduir { display: none; }
.pdf-panel.is-expanded #pdf-visor-hide,
.pdf-panel.is-expanded #pdf-visor-expand { display: none; }
.pdf-panel.is-expanded .pdf-visor-btn.pdf-visor-reduir { display: inline-flex; }
.pdf-panel.is-expanded {
  top: var(--app-padding);
  bottom: var(--app-padding);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 2 * var(--app-padding)));
  z-index: 200;
  animation: none;   /* evita que pdf-panel-in sobreescrigui el transform */
  transition: none;  /* sin esto el paso al centro se veía resbalar de lado */
  box-shadow: var(--shadow-lg);
}
/* Al pasar a pantalla grande: aparece en el centro creciendo un punto (la
   pone setExpanded en línea; acaba en el mismo translateX de arriba) */
@keyframes pdf-gran-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ── Document ────────────────────────────────────────────────── */
.pdf-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  /* El paginador flota respecto a esta caja */
  position: relative;
}

/* ── Assistent flotant arrossegable (estil Legora) ───────────── */
.pdf-assist {
  position: fixed;
  top: 90px;
  right: 34px;
  z-index: 300;                 /* sobre backdrop (199) i panell ampliat (200) */
  width: 372px;
  height: min(500px, 72vh);
  display: flex;
  flex-direction: column;
  /* Liquid glass: gris Legora translúcid + desenfocament del que hi ha darrere */
  background: rgba(236, 238, 242, 0.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-lg);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: hidden;
}
.pdf-assist.hidden { display: none; }

/* Capçalera mínima: arrossegar + minimitzar/tancar (sense títol) */
.pdf-assist-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 38px;
  padding: 0 8px 0 14px;
  flex-shrink: 0;
  cursor: move;
  user-select: none;
}
.pdf-assist-grip { flex: 1; height: 100%; }   /* zona per arrossegar */
.pdf-assist-head-actions { display: flex; gap: 2px; }
.pdf-assist-hbtn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: background var(--t-hover), color var(--t-hover);
}
.pdf-assist-hbtn:hover { background: none; color: var(--text-1); }
.pdf-assist-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdf-assist-empty {
  margin: auto 0;
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.pdf-assist-msg {
  font-size: var(--text-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.pdf-assist-msg.user {
  align-self: flex-end;
  max-width: 85%;
  background: rgba(10, 14, 20, 0.06);
  border: none;
  padding: 10px 14px;
  border-radius: var(--r-lg);
}
.pdf-assist-msg.ai { align-self: flex-start; color: var(--text-1); max-width: 95%; }
/* Mentre pensa: la cronologia i el cos van APILATS (columna). El flex en
   fila era del spinner antic i deixava el text a la dreta dels passos. */
.pdf-assist-msg.ai.loading { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.pdf-assist-msg code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
}
/* Caixa d'escriure: blanca, ample complet, cantonades superiors arrodonides
   i ombra cap amunt (estil Legora) */
.pdf-assist-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px 14px 12px;
  background: var(--surface-card);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -4px 18px rgba(15, 25, 40, 0.06);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.pdf-assist-input textarea {
  width: 100%;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  border: none;
  background: none;
  padding: 2px 2px;
  font: inherit;
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--text-1);
  outline: none;
}
.pdf-assist-input textarea::placeholder { color: var(--text-3); }

/* Fila inferior: clip a l'esquerra · Auto + enviar a la dreta */
.pdf-assist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pdf-assist-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Botó d'icona (clip) */
.pdf-assist-iconbtn {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: var(--text-3);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: background var(--t-hover), color var(--t-hover);
}
.pdf-assist-iconbtn:hover { background: var(--bg-3); color: var(--text-1); }

/* Selector "Auto" desplegable */
.pdf-assist-mode { position: relative; }
.pdf-assist-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--surface-card);
  color: var(--text-1);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.pdf-assist-mode-btn:hover { background: var(--bg-3); border-color: var(--border); }
.pdf-assist-mode-btn .ti { font-size: 14px; color: var(--text-3); }
.pdf-assist-mode-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);   /* s'obre cap amunt */
  min-width: 170px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  z-index: 5;
}
.pdf-assist-mode-menu.hidden { display: none; }
.pdf-assist-mode-item {
  display: flex;
  align-items: center;
  gap: 9px;
  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);
}
.pdf-assist-mode-item:hover { background: var(--chip-solid); }
.pdf-assist-mode-item .ti { font-size: 16px; color: var(--text-3); }

/* Arxius adjuntats */
.pdf-assist-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pdf-assist-files:empty { display: none; }
.pdf-assist-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  color: var(--text-1);
}
.pdf-assist-file-chip .ti-file-type-pdf { color: #E5252A; }
.pdf-assist-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.pdf-assist-file-x {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-3);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 15px;
  border-radius: var(--r-xs);
}
.pdf-assist-file-x:hover { background: none; color: var(--text-1); }
.pdf-assist-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--action);
  color: var(--action-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t-hover), transform var(--t-fast);
}
.pdf-assist-send:hover { background: var(--action-hover); }
.pdf-assist-send:active { transform: scale(0.92); }

/* ── Botó IA "Explicar fácil" + panell d'explicació ──────────── */
/* Botó "Consultar" · MATEIX estil que el xip de municipis del chat */
.pdf-ai-action {
  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);
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--t-hover), background var(--t-hover), border-color var(--t-hover);
}
.pdf-ai-action:hover {
  background: rgba(var(--glass-rgb), 0.85);
  color: var(--text-1);
}
.pdf-ai-action .ti { font-size: 15px; }
/* El botón del chat (Consultar) SIEMPRE visible: con el modo ampliado
   retirado de la barra, era la única forma de llegar a la consulta. */
#pdf-visor-assist-btn { display: inline-flex; }
/* Ja no és una píndola amb text: comparteix mida amb la resta d'icones */

/* Launcher (consulta minimitzada) · botó flotant rodó */
.pdf-assist-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--action);
  color: var(--action-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-fast), background var(--t-hover);
}
.pdf-assist-launcher:hover { background: var(--action-hover); transform: translateY(-2px); }
.pdf-assist-launcher.hidden { display: none; }

.pdf-summary {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: 45vh;
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--border);
}
.pdf-summary.hidden { display: none; }
.pdf-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px var(--sp-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdf-summary-head .ti { color: var(--accent); margin-right: 6px; }
.pdf-summary-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  transition: background var(--t-hover), color var(--t-hover);
}
.pdf-summary-close:hover { background: var(--bg-3); color: var(--text-1); }
.pdf-summary-body {
  padding: 14px var(--sp-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-1);
  overflow-y: auto;
  white-space: pre-wrap;
}
.pdf-summary-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2);
}

/* Topbar */
.pdf-visor-topbar {
  position: relative;   /* ancla del desplegable de idioma */
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--glass-bg-strong);
  flex-shrink: 0;
}
.pdf-visor-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdf-visor-title {
  font-size: 12.5px;   /* la misma letra que la pestaña de arriba */
  font-weight: 500;   /* rol «Title» del sistema, sin negrita */
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: var(--tracking-tight);
}
.pdf-visor-badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.pdf-visor-badge {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.pdf-visor-badge-muni {
  background: var(--accent-dim);
  color: var(--accent);
}
.pdf-visor-badge-tipus {
  background: var(--bg-3);
  color: var(--text-2);
}
.pdf-visor-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
/* Botons del visor · minimalistes (estil app: sense vora, hover suau) */
.pdf-visor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: 34px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: none;
  background: none;
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-hover), color var(--t-hover);
}
.pdf-visor-btn:hover {
  background: var(--bg-3);
  color: var(--text-1);
}
.pdf-visor-btn-icon {
  width: 34px;
  padding: 0;
  font-size: 17px;
}
/* Mientras se trae el documento para llevarlo al chat */
.pdf-visor-btn.es-carregant { opacity: 0.45; cursor: progress; }
/* ── Cerca dins del PDF · barra inferior a tot l'ample ────────── */
.pdf-searchbar {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--glass-bg-strong);
}
.pdf-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.pdf-search-ico {
  position: absolute;
  left: 10px;
  font-size: 14px;
  color: var(--text-3);
  pointer-events: none;
}
.pdf-search-input {
  width: 100%;
  height: 32px;
  padding: 0 32px 0 30px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover);
}
.pdf-search-input::placeholder { color: var(--text-3); }
.pdf-search-input:focus {
  border-color: var(--accent);
  /* --surface-card y no --surface-white: en oscuro --surface-white es color de
     LETRA (#f2f2f4) y el campo quedaba claro sobre claro, a 1:1 (14-9-2026).
     En claro las dos valen #fff: no cambia nada. */
  background: var(--surface-card, #fff);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Iconet IA dins del propi camp (sense text) */
.pdf-search-ai-btn {
  position: absolute;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: background var(--t-hover), transform var(--t-fast);
}
.pdf-search-ai-btn:hover { background: var(--accent-dim); }
.pdf-search-ai-btn:active { transform: scale(0.88); }
.pdf-search-ai-btn .ti { font-size: 15px; }
/* Contador «3/12» y flechas dentro del campo, como en un visor de PDF */
.pdf-search-input.amb-nav { padding-right: 132px; }
.pdf-search-nav {
  position: absolute;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 1px;
}
.pdf-search-count {
  margin-right: 4px;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdf-search-fl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: var(--r-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-hover);
}
.pdf-search-fl:hover:not(:disabled) { background: var(--bg-2); color: var(--text-1); }
.pdf-search-fl:disabled { opacity: .35; cursor: default; }
.pdf-search-fl .ti { font-size: 15px; }

/* Resultats · panell sota la barra de cerca */
.pdf-search-results {
  /* Solo la respuesta corta de la búsqueda con IA: el documento se sigue viendo */
  max-height: 24vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdf-search-results:empty { display: none; }
.pdf-search-head {
  padding: 8px var(--sp-5) 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
}
.pdf-search-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px var(--sp-5);
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-hover);
}
.pdf-search-head + .pdf-search-item { border-top: none; }
.pdf-search-item:hover { background: var(--bg-2); }
.pdf-search-pg {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.pdf-search-snip {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.45;
}
/* El resaltado de la búsqueda */
.pdf-search-snip mark {
  background: var(--amber-bg);
  color: var(--text-1);
  border-radius: 3px;
  padding: 0 1px;
}
.pdf-search-empty {
  padding: 12px var(--sp-5);
  font-size: var(--text-sm);
  color: var(--text-3);
  line-height: 1.5;
}
.pdf-search-empty code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text-2);
}
.pdf-search-ai-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px var(--sp-5);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.pdf-search-ai-answer {
  padding: 12px var(--sp-5);
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.55;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
}

/* Body · contenidor de pàgines amb scroll vertical continu */
.pdf-visor-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow-y: auto;
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

/* Cada pàgina renderitzada */
.pdf-page-canvas {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  background: #fff;
}

/* Spinner */
.pdf-visor-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--surface-card);
  z-index: 1;
}
/* El aro del visor es el de siempre: window.aroCarrega() */
.pdf-spinner-label {
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* Error */
.pdf-visor-error {
  padding: var(--sp-6);
  color: var(--coral);
  font-size: var(--text-sm);
  text-align: center;
}
/* UN FORMATO QUE NO SE PUEDE LEER NO ES UN ERROR
   Un .pptx en el visor daba «Load failed» en rojo, que parece que se ha roto
   algo. No se ha roto nada: ese formato todavía no se pinta aquí. Se dice en
   tinta normal, se dice cuál es, y el botón de descargar va debajo para no
   tener que buscarlo arriba. */
.pdf-visor-error:has(.visor-nomena) { color: inherit; }
.visor-nomena {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  max-width: 420px; margin: 8vh auto 0;
}
.visor-nomena-t { font-size: var(--text-base); color: var(--text-1); }
.visor-nomena-s { font-size: var(--text-sm); color: var(--text-3); line-height: 1.5; }

/* ── Print: hoja imprimible básica ── */
@media print {
  body { background: white; color: black; overflow: visible; }
  .sidebar, .topbar, .pill-bar, .composer,
  .search-modal-overlay, .config-modal-overlay,
  .auth-overlay, button { display: none !important; }
  .main-area, #app { background: white; border: none; box-shadow: none; padding: 0; }
  .home-panel { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════
   VISTA INFORMES — Generador de documents (dos columnes + acordió)
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout principal ── */
.inf-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

/* ── Columna esquerra: selector de tipus ── */
.inf-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: rgba(var(--glass-rgb), 0.22);
  overflow-y: auto;
  padding: 20px 12px;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.inf-sidebar::-webkit-scrollbar { width: 4px; }
.inf-sidebar::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 2px; }

.inf-sidebar-hdr {
  padding: 2px 4px 14px;
}
.inf-sidebar-title {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;   /* mateixa tipografia que «Documentos recientes» */
  color: var(--text-3);
}

/* Cards de tipus */
.inf-type-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inf-type-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 12px;
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover);
  width: 100%;
}
.inf-type-card:hover {
  background: rgba(var(--glass-rgb), 0.55);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.inf-type-card.is-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-cta);
}

.inf-type-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.1;
  color: var(--text-2);
  transition: color var(--t-hover);
}
.inf-type-card.is-active .inf-type-icon,
.inf-type-card:hover .inf-type-icon { color: var(--accent); }

.inf-type-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.inf-type-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.25;
}
.inf-type-desc {
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1.35;
}
.inf-type-card.is-active .inf-type-name,
.inf-type-card.is-active .inf-type-desc {
  color: var(--surface-white);
  opacity: 1;
}

/* ── Columna dreta ── */
.inf-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.inf-form-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.inf-form-scroll::-webkit-scrollbar { width: 5px; }
.inf-form-scroll::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }

/* Capçalera del formulari */
.inf-form-hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.inf-form-hdr-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  background: var(--accent-dim);
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(45,106,79,0.12);
}
.inf-form-hdr-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}
.inf-form-hdr-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* ── Acordeó ── */
.inf-section {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(var(--glass-rgb), 0.30);
  margin-bottom: 8px;
  overflow: hidden;
}

.inf-sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background var(--t-hover);
}
.inf-sec-hdr:hover { background: rgba(var(--glass-rgb), 0.45); }

.inf-sec-hdr-left {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}
.inf-sec-hdr-left .ti {
  font-size: 15px;
  color: var(--accent-glow);
  flex-shrink: 0;
}

.inf-sec-chev {
  font-size: 14px;
  color: var(--text-3);
  transition: transform var(--t-panel);
  flex-shrink: 0;
}
.inf-section.is-open .inf-sec-chev { transform: rotate(180deg); }

.inf-sec-body {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 4px 16px 16px;
}
.inf-section.is-open .inf-sec-body { display: flex; }

/* ── Controls del formulari ── */
.inf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inf-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.015em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.inf-rag-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--r-xs);
  padding: 2px 5px;
  line-height: 1.4;
}

.inf-input,
.inf-select,
.inf-textarea {
  border: 1px solid rgba(10, 14, 20, 0.10);
  background: var(--surface-card);
  border-radius: var(--r);
  padding: 9px 12px;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-1);
  outline: none;
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.inf-input:focus,
.inf-select:focus,
.inf-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.10);
}
.inf-input::placeholder,
.inf-textarea::placeholder { color: var(--text-3); }

.inf-readonly {
  background: rgba(10, 14, 20, 0.03);
  color: var(--text-2);
  cursor: default;
  font-style: italic;
}
.inf-readonly::placeholder { font-style: italic; }

.inf-textarea { resize: vertical; line-height: 1.55; min-height: 60px; }

/* Input + botó en grup */
.inf-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.inf-input-group .inf-input { flex: 1; min-width: 0; }

.inf-catastro-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 39px;
  border: 1px solid rgba(10, 14, 20, 0.12);
  background: rgba(var(--glass-rgb), 0.52);
  border-radius: var(--r);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.inf-catastro-btn:hover {
  background: rgba(var(--glass-rgb), 0.85);
  border-color: var(--accent);
  color: var(--accent);
}
.inf-catastro-btn.is-loading { opacity: 0.6; pointer-events: none; }
.inf-catastro-btn .ti { font-size: 14px; }

/* Graelles */
.inf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inf-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Pills d'intervenció */
.inf-pill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.inf-pill {
  padding: 9px 10px;
  border: 1px solid rgba(10, 14, 20, 0.10);
  border-radius: var(--r-pill);
  background: rgba(var(--glass-rgb), 0.40);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.inf-pill:hover {
  background: rgba(var(--glass-rgb), 0.72);
  border-color: var(--border-2);
  color: var(--text-1);
}
.inf-pill.is-active {
  background: var(--accent-dim);
  border-color: rgba(45, 106, 79, 0.28);
  color: var(--accent);
  font-weight: 500;
}

/* Toggles Sí/No del checklist */
.ck-toggle-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(var(--glass-rgb), 0.40);
}
.ck-toggle {
  padding: 7px 20px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.ck-toggle:first-child { border-right: 1px solid var(--border); }
.ck-toggle:hover { background: rgba(var(--glass-rgb), 0.72); color: var(--text-1); }
.ck-toggle.is-active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

/* Etiqueta de grup de camps */
.inf-field-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}

/* Fila projectista */
.inf-projectista-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inf-projectista-row .inf-input { flex: 1; min-width: 0; }

.inf-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 39px;
  border: 1px solid rgba(10, 14, 20, 0.10);
  background: rgba(var(--glass-rgb), 0.40);
  border-radius: var(--r);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-hover), color var(--t-hover);
}
.inf-edit-btn:hover { background: rgba(var(--glass-rgb), 0.72); color: var(--text-1); }
.inf-edit-btn .ti { font-size: 14px; }

/* ── Footer fixe (barra de progrés + botó) ── */
.inf-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 14px 32px 18px;
  background: rgba(var(--glass-rgb), 0.68);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inf-footer-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.inf-progress-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(10, 14, 20, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.inf-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.35s ease;
}
.inf-progress-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.inf-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: var(--surface-white);
  border: none;
  border-radius: var(--r-xl);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: var(--tracking-normal);
  box-shadow: var(--shadow-cta);
  transition: background var(--t-hover), transform 100ms ease, box-shadow var(--t-hover);
}
.inf-generate-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(45, 106, 79, 0.38), inset 0 1px 1px rgba(255,255,255,0.22);
}
.inf-generate-btn:active { transform: scale(0.98); }
.inf-generate-btn .chip-sparkle { font-size: 16px; }

.inf-generate-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-3);
  text-align: center;
}

/* Dark mode */
[data-theme="dark"] .inf-input,
[data-theme="dark"] .inf-select,
[data-theme="dark"] .inf-textarea {
  background: rgba(var(--glass-rgb), 0.06);
  border-color: rgba(var(--glass-rgb), 0.12);
  color: var(--text-1);
}
[data-theme="dark"] .inf-readonly {
  background: rgba(var(--glass-rgb), 0.03);
}
[data-theme="dark"] .inf-type-card.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Camps RAG en càrrega ────────────────────────────────────────────────── */
@keyframes infRagPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.inf-readonly.is-rag-loading {
  animation: infRagPulse 1.1s ease-in-out infinite;
  color: var(--text-3);
  font-style: italic;
}
.inf-readonly.is-rag-loading::placeholder { color: var(--text-3); }

/* ── Badge d'avís patrimoni ──────────────────────────────────────────────── */
.inf-field { position: relative; }

.inf-patrimoni-alert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: var(--r);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #dc2626;
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  width: 100%;
  box-sizing: border-box;
  animation: msgIn 0.25s ease both;
}
.inf-patrimoni-alert .ti { font-size: 13px; flex-shrink: 0; }
.inf-patrimoni-alert strong { font-weight: 700; }

/* Mode fosc */
[data-theme="dark"] .inf-patrimoni-alert {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: #f87171;
}
[data-theme="dark"] .inf-readonly.is-rag-loading { color: var(--text-3); }

/* Responsive: tablet */
@media (max-width: 900px) {
  .inf-sidebar { width: 220px; }
  .inf-form-scroll { padding: 20px 20px 0; }
  .inf-footer { padding: 12px 20px 16px; }
  .inf-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Layout de 2 columnes → 1 columna: tipus a dalt, formulari a sota */
  .inf-layout { flex-direction: column; }
  .inf-sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }
  /* Botons de tipus d'informe: fila horitzontal scrollable */
  .inf-type-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inf-type-list::-webkit-scrollbar { display: none; }
  .inf-type-card { width: auto; flex: 0 0 auto; min-width: 168px; }
  .inf-grid-2, .inf-grid-3 { grid-template-columns: 1fr; }
  .inf-pill-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════ PROJECTES ════════════════════════ */

/* Sidebar items */
.section-label-clickable { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
/* Alineat amb .sidebar-item (8px de grup + 10px d'item = mateixa X d'icona) */
/* Va dentro de .sidebar-group, que ya trae sus 8px: aquí no se repiten o
   las carpetas quedaban 8px a la derecha de los iconos del menú. */
#sidebar-projectes-list { display: flex; flex-direction: column; gap: 2px; margin-top: 0; padding: 0; }

/* Misma caja que .sidebar-item: entre dos proyectos hay el mismo aire que
   entre Normativa y Mapas */
.pj-side-item {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px; border-radius: var(--r-sm);
  /* El mismo gris que Buscar, Normativa o Mapas */
  font-size: var(--text-sm); color: var(--text-menu); cursor: pointer;
  transition: color .15s;
}
/* Hover: sense requadre — només ressalt tipogràfic (com Buscar) */
.pj-side-item:hover { background: none; color: var(--text-1); }
.pj-side-item i { font-size: 16px; width: 16px; text-align: center; color: var(--text-3); flex-shrink: 0; transition: color .15s; }
.pj-side-item:hover i { color: var(--text-1); }
.pj-side-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cada proyecto se despliega con sus atajos, como una carpeta */
.pj-side-grup { display: flex; flex-direction: column; }
.pj-side-fletxa {
  margin-left: auto; font-size: 14px !important; width: 14px !important;
  opacity: 0; transition: transform var(--t-hover), opacity var(--t-hover);
}
/* LA CHINCHETA DE FIJAR
   Va antes de la flecha. Sin fijar, sale SOLO con el cursor encima de la
   fila del nombre (la clase la pone el lateral al entrar y salir de esa
   fila): en Agente, Documentación o cualquier otro atajo no sale. Fijado,
   se queda puesta siempre, derecha («ti-pinned»): dice que lo está. Solo el
   icono, sin recuadro: gris que pasa a negro. */
.pj-side-fixar {
  margin-left: auto; flex: 0 0 auto;
  width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--r-xs);
  cursor: pointer; opacity: 0;
  transition: opacity var(--t-hover);
}
.pj-side-fixar + .pj-side-fletxa { margin-left: 0; }
.pj-side-item .pj-side-fixar i { font-size: 15px; width: 15px; color: var(--text-3); }
.pj-side-grup.es-sobre-nom .pj-side-fixar,
.pj-side-grup.es-fixat .pj-side-fixar,
.pj-side-fixar:focus-visible { opacity: 1; }
.pj-side-item .pj-side-fixar:hover i { color: var(--text-1); }
.pj-side-fixar:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.pj-side-item:hover .pj-side-fletxa,
.pj-side-grup.es-obert .pj-side-fletxa { opacity: 1; }
.pj-side-grup.es-obert .pj-side-fletxa { transform: rotate(90deg); }
.pj-side-grup.es-obert > .pj-side-item { color: var(--text-1); }
/* El cuerpo se pliega con la rejilla, nunca con la altura */
.pj-side-atalls {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden; opacity: 0;
  transition: grid-template-rows var(--t-panel), opacity var(--t-panel);
}
.pj-side-grup.es-obert .pj-side-atalls { grid-template-rows: 1fr; opacity: 1; }
/* La línea gris que cuelga del proyecto, como en la referencia */
.pj-side-atalls-in {
  min-height: 0;
  display: flex; flex-direction: column; gap: 2px;
  /* Sin aire vertical propio: plegado tiene que ocupar CERO, o dos
     proyectos quedaban más separados que Normativa y Mapas. El respiro lo
     ponen los propios atajos. */
  margin: 0 0 0 19px;
  padding: 0 0 0 13px;
  border-left: 1px solid rgba(10, 14, 20, 0.13);
}
.pj-side-atall {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px;
  border: none; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: 12.5px; color: var(--text-menu);
  text-align: left; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
/* Seleccionado: el mismo fondo gris que el chip del PDF en Normativa */
.pj-side-atall.es-actiu { background: var(--sel-fill); }
/* Solo los atajos de dentro del proyecto llevan relleno gris al pasar el
   cursor; el resto del lateral sigue sin relleno */
.pj-side-atall:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.035); }
/* La bolita roja de Avisos: lo que ha llegado o cambiado, a la derecha */
/* Avisos del proyecto: el mismo punto con brillo de la lista de proyectos.
   Dice que hay algo nuevo; cuántos se ve al entrar. */
.pj-side-badge {
  margin-left: auto; flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Donde estás ahora: en negro, hasta que vayas a otro sitio */
.pj-side-atall.es-actiu,
.pj-side-atall.es-actiu i { color: var(--text-1); }
/* El dibujo relleno del activo va en gris fuerte, no en negro */
.pj-side-atall.es-actiu svg { transition: none; }
/* Sin fundido en el relleno: al pulsar pasa al gris de golpe, sin pasar por el negro del hover */
.pj-side-atall.es-actiu svg .cos { transition: none; }
/* Dibujo del atajo: trazo en reposo; el activo se rellena de negro y el
   detalle de dentro (visto, badajo, doblez) pasa al color del panel */
.pj-side-atall svg {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--text-menu);   /* el mismo gris que su texto */
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: color var(--t-hover);
}
.pj-side-atall:hover svg { color: var(--text-1); }
/* El activo va en negro al 62 %, no en un gris semitransparente: así el
   trazo y el relleno no se superponen y el dibujo mantiene su forma y su
   tamaño exactos al rellenarse. Se queda igual al pasar el cursor. */
.pj-side-atall.es-actiu svg,
.pj-side-atall.es-actiu:hover svg { color: var(--text-1); opacity: .62; }
.pj-side-atall svg .cos { fill: rgba(10, 14, 20, 0); transition: fill var(--t-hover); }
.pj-side-atall svg .det { transition: stroke var(--t-hover); }
/* El relleno con su mismo trazo: la figura no cambia de tamaño al encenderse */
.pj-side-atall.es-actiu svg .cos { fill: currentColor; stroke: currentColor; }
/* Sobre el fondo gris, el detalle va en gris claro, no en blanco puro */
.pj-side-atall.es-actiu svg .det { stroke: var(--sel-det); }
.pj-side-atall:first-child { margin-top: 3px; }
.pj-side-atall:last-child { margin-bottom: 5px; }
.pj-side-atall i { font-size: 14px; width: 14px; text-align: center; color: var(--text-3); flex-shrink: 0; transition: color var(--t-hover); }
.pj-side-atall:hover i { color: var(--text-1); }
/* Con la barra plegada no hay sitio para los atajos */
.sidebar:not(.is-open) .pj-side-atalls,
.sidebar:not(.is-open) .pj-side-fixar,
.sidebar:not(.is-open) .pj-side-fletxa { display: none; }

/* Grid view */
.pj-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 32px 28px; overflow-y: auto; }
#view-projectes { align-items: stretch; }
.pj-head { margin-bottom: 24px; }
.pj-title { font-size: var(--text-3xl); font-weight: 700; color: var(--text-1); margin: 0; }
.pj-subtitle { font-size: 14px; color: var(--text-2); margin: 6px 0 0; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pj-card {
  position: relative; background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px; cursor: pointer; min-height: 130px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pj-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.pj-card-ico { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent-dim);
  display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 18px; margin-bottom: 4px; }
.pj-card-nom { font-size: 15px; font-weight: 600; color: var(--text-1); }
.pj-card-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pj-card-meta { margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.pj-card-meta i { font-size: 13px; margin-right: 3px; }
.pj-card-muni, .pj-card-docs { display: inline-flex; align-items: center; }
.pj-card-new {
  border: 1.5px dashed var(--border-2); background: transparent;
  align-items: center; justify-content: center; color: var(--text-3); gap: 8px; flex-direction: column;
}
.pj-card-new:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.pj-card-new i { font-size: 26px; }
.pj-card-new span { font-size: 13.5px; font-weight: 500; }

/* Modal */
.pj-modal-backdrop {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; background: rgba(10, 14, 20, 0.4);
}
.pj-modal {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: 440px; max-width: 92vw; box-shadow: var(--shadow-lg); overflow: hidden;
}
.pj-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 600; color: var(--text-1);
}
.pj-modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-3); cursor: pointer; }
.pj-modal-close:hover { color: var(--text-1); }
.pj-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.pj-modal-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-top: 10px; }
.pj-modal-label:first-child { margin-top: 0; }
.pj-modal-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-2); border-radius: var(--r-sm);
  font-size: 14px; font-family: inherit; color: var(--text-1); background: var(--bg-1, #fff); resize: vertical;
}
.pj-modal-input:focus { outline: none; border-color: var(--accent); }
.pj-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); }
.pj-modal-cancel, .pj-modal-create {
  padding: 9px 18px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.pj-modal-cancel { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.pj-modal-cancel:hover { background: var(--accent-dim); }
.pj-modal-create { background: var(--accent); color: var(--surface-white); }
.pj-modal-create:hover { background: var(--accent-hover); }
.pj-modal-create:disabled { opacity: .6; cursor: default; }

/* Detall: layout dues columnes */
/* ═══════ Detalle de proyecto · armonizado con el sistema ═══════
   Reutiliza los componentes ya definidos: chip pill (gris → negro),
   etiqueta mini-mayúsculas, burbuja gris del chat y la píndola del composer. */
/* El detalle va a pantalla completa: la columna de contexto se convierte en
   una cabecera fina arriba y las pestañas ocupan todo el ancho. */
.pjd-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── Cabecera: volver + nombre + municipio, en una línea ── */
.pjx-ctx {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border-right: none;
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-6);
  overflow: visible;
}
/* Ficha urbanística y Normativa vinculada, fuera de momento: las dos
   dependen de endpoints que aún no existen y solo mostraban el aviso. */
.pjx-ctx .pjx-sec { display: none; }
.pjd-back {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 0;
  font-family: var(--font); font-size: 13px; color: var(--text-3);
  cursor: pointer; transition: color var(--t-hover);
}
.pjd-back:hover { color: var(--text-1); }
.pjd-back i { font-size: 15px; }

.pjd-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); margin: 14px 0 0; }
.pjd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.pjd-meta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.pjd-meta-sep { color: var(--text-4); font-size: 12.5px; }
.pjd-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 10px 0 0; }

/* Estado del proyecto: pastilla suave, el color es señal de estado */
.pjx-estat {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500;
  background: rgba(10, 14, 20, 0.05); color: var(--text-2);
}
.pjx-estat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }

/* En la cabecera van todos en línea: los márgenes verticales que tenían de
   cuando era una columna aquí descuadran la fila. */
.pjx-ctx .pjd-name,
.pjx-ctx .pjd-meta,
.pjx-ctx .pjd-desc,
.pjx-ctx .pjx-estat { margin-top: 0; }
.pjx-ctx .pjd-back { align-self: center; }
.pjx-ctx .pjx-estat { align-self: center; }
/* La descripción, al final y sin robar sitio al nombre */
.pjx-ctx .pjd-desc { flex: 1 1 100%; }
.pjx-estat.is-en_revision { background: var(--amber-bg); color: var(--amber); }
.pjx-estat.is-en_revision .pjx-estat-dot { background: var(--amber); }
.pjx-estat.is-revisado { background: var(--accent-dim); color: var(--accent); }
.pjx-estat.is-revisado .pjx-estat-dot { background: var(--accent); }

.pjx-sec { margin-top: 26px; }
.pjd-sec-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 500; color: var(--text-3);
}
.pjx-sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pjx-buit { font-size: 12.5px; color: var(--text-3); line-height: 1.5; padding: 4px 0; }
.pjx-buit code { font-size: 11px; }

/* Fitxa urbanística: targeta grisa, files clau→valor amb línia fina */
.pjx-ficha { border-radius: var(--r); background: rgba(10, 14, 20, 0.03); overflow: hidden; }
.pjx-ficha .pjx-buit { padding: 10px 12px; }
.pjx-ficha-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 12px; font-size: 12.5px;
  border-bottom: 1px solid rgba(10, 14, 20, 0.05);
}
.pjx-ficha-row:last-child { border-bottom: none; }
.pjx-k { color: var(--text-3); flex-shrink: 0; }
.pjx-v { color: var(--text-1); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.pjx-v.is-hl { color: var(--accent); }
.pjx-src { font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* Normativa vinculada: targetes grises sense traç */
.pjx-norma {
  border-radius: var(--r); background: rgba(10, 14, 20, 0.03);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  transition: background var(--t-hover);
}
.pjx-norma:hover { background: rgba(10, 14, 20, 0.06); }
.pjx-norma-t { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-1); }
.pjx-norma-chip {
  font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--surface-white); color: var(--text-2); flex-shrink: 0;
}
.pjx-norma-m { font-size: 11px; color: var(--text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pjx-norma-alerta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--amber); margin-top: 6px; }
.pjx-norma-alerta i { font-size: 13px; }

/* ── Centre: pestanyes ── */
/* El display lo fija el bloque de la vista partida (más abajo): aquí solo
   cómo se comporta dentro del layout del detalle. */
.pjx-main { flex: 1; min-width: 0; min-height: 0; }
/* Una sola línea: volver + proyecto + municipio + pestañas. 52px, el mismo
   cuerpo que la barra de acciones y las filas de la tabla. */
.pjx-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
/* Proyecto y municipio, al extremo derecho: son la etiqueta de dónde estás,
   no una opción más de la fila. El `auto` los separa de las pestañas. */
.pjx-tabs .pjd-name {
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 0 0 0 auto;
  padding-left: var(--sp-4);
  white-space: nowrap;
  flex-shrink: 0;
}
.pjx-tabs .pjd-meta { margin: 0; flex-shrink: 0; }
.pjx-tabs .pjd-meta-chip { font-size: var(--text-sm); color: var(--text-3); }
.pjx-tabs::-webkit-scrollbar { display: none; }
/* Texto, no botón: dentro de un proyecto la fila solo tiene que decir dónde
   estás. Seis rellenos grises competían con la tabla que hay debajo. */
/* Mismo botón que la barra de acciones de Documentos (.pjx-tbtn): silueta
   de 34px, 13px/500 sobre Tinta. Las dos filas se apilan y se leen como una
   sola familia. */
/* Sin cápsula ni borde, como la referencia: la seleccionada habla en Tinta
   y las demás callan en gris de texto secundario. El aire entre títulos lo
   pone el padding generoso de cada una, no el gap. */
/* Las pestañas ya no se pulsan desde el propio proyecto: se entra por los
   atajos del lateral, como en la referencia. Los botones siguen en el DOM
   porque pjxTab guarda ahí cuál está abierta. */
.pjx-tabs .pjx-tab { display: none; }
.pjx-tab {
  position: relative;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: none;
  border-radius: var(--r);
  background: none;
  color: var(--text-3);
  font-family: var(--font); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer;
  transition: color var(--t-hover);
}
.pjx-tab:hover { color: var(--text-1); }
.pjx-tab.on { color: var(--text-1); }
/* Sin cápsula, el padding de la primera descolgaba «Verificación» del
   margen: se lo descuenta y el texto cae en la misma vertical que el botón
   del chat y la tabla. */
.pjx-tabs .pjx-tab:first-of-type { margin-left: -14px; }
/* Número a pelo junto al título, como la referencia: sin cápsula ni
   relleno, misma tipografía que la pestaña, un punto más pequeño y en el
   gris de los textos secundarios. Tope en «99+» (lo ponen los contadores). */
.pjx-tab-n {
  display: inline-flex; align-items: center;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.pjx-body { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-6); }
.pjx-body.on { display: block; }
/* Con el apartado vacío, la pestaña se vuelve columna y el cartel se queda
   con todo el alto libre: así cae en el centro de lo que se ve. */
.pjx-body.on:has(.ntf-buit) { display: flex; flex-direction: column; }
.pjx-body.on:has(.ntf-buit) > .notif-llista,
.pjx-body.on:has(.ntf-buit) > #pjd-docs-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pjx-body-chat.on { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.pjx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pjx-h3 { font-size: 13px; font-weight: 600; color: var(--text-1); margin: 0; }
.pjx-snapshot { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pjx-sub { font-size: 12.5px; color: var(--text-2); margin: 0 0 18px; }

/* Marcadors: quants compleixen / revisar / incompleixen */
.pjx-score { display: flex; gap: 10px; margin-bottom: 20px; }
.pjx-s { flex: 1; border-radius: var(--r); background: rgba(10, 14, 20, 0.03); padding: 12px 14px; }
.pjx-s-num { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pjx-s-lbl { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.pjx-s.is-ok .pjx-s-num { color: var(--accent); }
.pjx-s.is-warn .pjx-s-num { color: var(--amber); }
.pjx-s.is-bad .pjx-s-num { color: var(--coral); }

/* Taula de verificació: mateixa gramàtica que la de Normativa */
#pjx-verif-taula { overflow-x: auto; }
.pjx-taula { min-width: 640px; }
.pjx-thead, .pjx-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(90px, 1fr) minmax(90px, 1fr) 108px minmax(150px, 1.4fr);
  gap: 10px; align-items: center;
  padding: 0 var(--sp-3);
}
.pjx-thead {
  min-height: 40px;
  border-bottom: 1px solid var(--border);
}
.pjx-thead span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 500; color: var(--text-3);
}
.pjx-row { min-height: 46px; border-bottom: 1px solid rgba(10, 14, 20, 0.05); }
.pjx-row:hover { background: rgba(10, 14, 20, 0.02); }
.pjx-td { font-size: 12.5px; color: var(--text-1); min-width: 0; }
.pjx-num { font-variant-numeric: tabular-nums; }
.pjx-st {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500;
}
.pjx-st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.pjx-st.is-ok   { background: var(--accent-dim); color: var(--accent); }
.pjx-st.is-ok::before   { background: var(--accent); }
.pjx-st.is-warn { background: var(--amber-bg); color: var(--amber); }
.pjx-st.is-warn::before { background: var(--amber); }
.pjx-st.is-bad  { background: var(--coral-bg); color: var(--coral); }
.pjx-st.is-bad::before  { background: var(--coral); }
.pjx-traça { display: flex; flex-wrap: wrap; gap: 4px; }
.pjx-cite {
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-xs);
  background: rgba(10, 14, 20, 0.05); color: var(--text-2); cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.pjx-cite:hover { background: rgba(10, 14, 20, 0.09); color: var(--text-1); }
.pjx-cite.is-doc { background: none; color: var(--text-3); }
.pjx-cite.is-doc:hover { background: rgba(10, 14, 20, 0.05); color: var(--text-1); }

.pjx-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.pjx-foot-nota { font-size: 11.5px; color: var(--text-3); }
/* Botons: el xip del sistema (gris → negre en hover) */
.pjx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: none; border-radius: var(--r-pill);
  background: rgba(10, 14, 20, 0.05); color: var(--text-2);
  font-family: var(--font); font-size: 13px; cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.pjx-btn:hover { background: rgba(10, 14, 20, 0.09); color: var(--text-1); }
.pjx-btn i { font-size: 14px; }

/* ── Barra de acciones de la pestaña Documentos ───────────────────────
   Botones con silueta en vez de relleno: sobre una tabla que ya es toda
   cápsulas grises, el relleno competía con las filas. Mismo cuerpo (32px)
   y mismo gris → Tinta al pasar el cursor que el resto del sistema. */
/* La barra es una banda más de la pila: mismo cuerpo que una fila (52px) y
   a sangre, para que su línea cruce de lado a lado igual que las de la
   tabla. El padding lateral es el del panel (sp-6), así el contenido sigue
   alineado aunque la línea llegue al borde. */
.pjx-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Una sola línea: si envuelve, la banda crece y empuja la tabla cada vez
     que se selecciona algo. Si no cabe, se desplaza como la fila de arriba. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 52px;
  /* Sube hasta la línea de las pestañas: el padding superior del panel
     caía encima de la barra y dejaba el doble de aire arriba que abajo. */
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) 0;
  padding: var(--sp-2) var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.pjx-toolbar::-webkit-scrollbar { display: none; }
.pjx-toolbar .pjx-tbtn,
.pjx-toolbar .pjx-col-wrap,
.pjx-docs-sel > * { flex-shrink: 0; }
.pjx-docs-sel span { white-space: nowrap; }
.pjx-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 var(--sp-1);
  flex-shrink: 0;
}
.pjx-toolbar .pjx-snapshot { margin-left: auto; }
/* 34px: el mismo cuerpo que la cápsula del nombre en la tabla, para que la
   barra y las filas se lean como una sola pieza. */
/* Excepción a la regla del chip (gris → Tinta al pasar el cursor): estos van
   SIEMPRE en Tinta y peso 500. Son las acciones de la pestaña y compiten con
   una tabla llena de texto negro; en gris se leían como deshabilitados. */
.pjx-tbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: none;
  color: var(--text-1);
  font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
/* Al pasar el cursor solo responden el borde y el fondo: el texto ya está
   en Tinta y no le queda a dónde ir. */
.pjx-tbtn:hover { border-color: var(--border-2); background: rgba(10, 14, 20, 0.02); }
.pjx-tbtn i { font-size: 15px; }
.pjx-tbtn.is-icon { padding: 0; width: 34px; justify-content: center; }
/* Con el chat abierto al lado, el botón queda encendido */
.pjx-tbtn.is-on { background: rgba(10, 14, 20, 0.06); border-color: var(--border-2); }
.pjx-tbtn.is-primary { background: var(--action); border-color: var(--action); color: var(--action-text); }
.pjx-tbtn.is-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-text); }
.pjx-tbtn:disabled { opacity: .45; cursor: default; }
.pjx-tbtn.is-primary:disabled:hover { background: var(--action); border-color: var(--action); }

/* ── Panel de nueva columna ──────────────────────────────────────────
   Opaco sobre el contenido (Opaque Popover Rule): flota encima de la
   tabla y con vidrio el texto de debajo se colaría. */
.pjx-col-wrap { position: relative; }
/* `fixed`, no `absolute`: la barra de acciones tiene overflow para poder
   desplazarse, y eso RECORTA cualquier hijo posicionado dentro. En capa
   fija el panel flota por encima de todo; su sitio lo calcula el JS al
   abrirlo, a partir del botón. */
.pjx-col-pop {
  position: fixed;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4);
  border: none;
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}
.pjx-col-pop.hidden { display: none; }
/* Como las cabeceras de las tablas (13px/500 sobre Tinta), NO Mini-Caps:
   nombran un campo del formulario, no titulan una sección. */
.pjx-col-lab {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-1);
  text-transform: none;
  letter-spacing: 0;
  /* Arriba separa del campo anterior; abajo despega el título de SU campo,
     que con el gap solo del panel quedaban demasiado juntos. */
  margin-top: var(--sp-3);
  margin-bottom: 3px;
}
.pjx-col-lab:first-child { margin-top: 0; }
/* «Volver a mostrar»: las columnas fijas quitadas (Tipo, Contenido), encima del
   formulario y separadas por su línea. Oculto, el «Título» sigue sin margen arriba. */
.pjx-col-tornar { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.pjx-col-tornar.hidden { display: none; }
.pjx-col-tornar.hidden + .pjx-col-lab { margin-top: 0; }
.pjx-col-tornar-llista { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── Botón de información ─────────────────────────────────────────────
   Gris en reposo, Tinta al pasar el cursor —la regla del chip— y con la
   explicación encima. */
.pjx-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none; background: none; padding: 0;
  color: var(--text-4);
  cursor: help;
  transition: color var(--t-hover);
}
.pjx-info i { font-size: 13px; }
.pjx-info:hover,
.pjx-info:focus-visible { color: var(--text-1); outline: none; }
.pjx-info-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  z-index: 70;
  width: 250px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--action);
  color: var(--action-text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover), transform var(--t-hover);
}
.pjx-info:hover .pjx-info-tip,
.pjx-info:focus-visible .pjx-info-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .pjx-info-tip { transition: none; } }

/* ── Desplegable de formato ───────────────────────────────────────────
   Propio, no el <select> del sistema: el nativo pinta con la tipografía
   del sistema operativo y sus flechas, y no deja poner un icono por
   opción. Mismo lenguaje que el buscador: fondo gris en lo seleccionado
   y en lo que está bajo el cursor. */
.pjx-sel { position: relative; }
/* Relleno gris y sin trazo: es un botón, no un campo de texto. Los otros dos
   sí llevan silueta porque se escribe dentro. */
/* Se escribe `.pjx-sel .pjx-sel-btn` a propósito: el botón lleva también la
   clase .pjx-col-inp, cuyo bloque va más abajo en el archivo y con la misma
   especificidad le devolvía el fondo blanco y el trazo. */
.pjx-sel .pjx-sel-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  border: none;
  background: rgba(10, 14, 20, 0.05);
}
.pjx-sel .pjx-sel-btn:hover { background: rgba(10, 14, 20, 0.08); }
.pjx-sel-txt { flex: 1; }
.pjx-sel-ico { font-size: 15px; color: var(--text-3); }
.pjx-sel-caret { font-size: 14px; color: var(--text-3); }
.pjx-sel-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 70;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}
.pjx-sel-list.hidden { display: none; }
.pjx-sel-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: var(--r-xs);
  background: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
}
.pjx-sel-opt i:first-child { font-size: 15px; color: var(--text-3); }
.pjx-sel-opt:hover { background: rgba(10, 14, 20, 0.05); }
.pjx-sel-tick { margin-left: auto; font-size: 14px; color: var(--accent); opacity: 0; }
.pjx-sel-opt.is-sel .pjx-sel-tick { opacity: 1; }
.pjx-col-inp {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
}
.pjx-col-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.pjx-col-ta { resize: vertical; line-height: 1.5; }
.pjx-col-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Aviso efímero: aparece abajo y se va solo; nunca tapa una acción */
.pjx-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  transform: translate(-50%, 12px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: var(--action-text);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover), transform var(--t-hover);
}
.pjx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Un chat que se está respondiendo, en las listas (el lateral, el historial
   del chat en blanco, Chats y los chats del Agente de un proyecto): el título
   en negro, el aro y «En progreso» en lugar de la hora. En los historiales el
   aro ocupa el sitio del icono del chat; en el lateral y en Chats va a la
   derecha del título. */
.xat-aro { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.home-history-item.es-en-marxa > .ti { display: none; }
.home-history-item > .xat-aro { align-self: start; justify-content: flex-start; padding-top: 3px; }
.conv-item.es-en-marxa .conv-title,
.chats-row.es-en-marxa .conv-title { color: var(--text-1); }
/* «En progreso» va en el mismo gris que las horas («hace 1 h», «Ayer») */
/* «La respuesta ya está»: el punto azul de un chat que acabó mientras no se
   miraba, hasta que se abre. El azul de la casa, liso, sin halo. A la
   derecha del título, donde va el aro mientras se responde. */
.xat-llest {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blau);
}
.conv-item > .xat-llest { margin: 0 3px 0 6px; }
.chats-row-right > .xat-llest { margin-right: 2px; }
/* En el historial del chat en blanco la fila es una rejilla: el punto flota
   a la derecha, a la altura del título */
#chat-hist-list .home-history-item { position: relative; }
#chat-hist-list .home-history-item.es-llest { padding-right: 28px; }
#chat-hist-list .home-history-item > .xat-llest { position: absolute; right: 12px; top: 15px; }
/* En los del Agente, detrás del texto y delante de la estrella y las iniciales */
.pjd-hist-fila > .xat-llest { margin-left: auto; }
.pjd-hist-fila.es-llest .pjd-hist-fav { margin-left: 8px; }
/* «Agente» del lateral: el mismo punto, en azul */
.pj-side-badge.es-llest .pj-dot { background: var(--blau); }

/* La tarjeta de «Se necesita tu respuesta» se quitó el 20-9-2026: dentro del
   programa eso lo dice el punto azul del chat en las listas (.xat-llest), que
   no se pone encima de lo que estás haciendo. Fuera, el aviso del sistema. */

/* ── Chat del projecte (pestanya) ── */
.pjd-chat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--sp-6) 0;
  flex-shrink: 0;
}
.pjd-chat-convs { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.pjd-chat-convs::-webkit-scrollbar { display: none; }
.pjd-conv {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; max-width: 200px;
  border: none; border-radius: var(--r-pill);
  background: none; color: var(--text-2);
  font-family: var(--font); font-size: 13px; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.pjd-conv:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.04); }
.pjd-conv.active { color: var(--text-1); background: rgba(10, 14, 20, 0.05); font-weight: 500; }
.pjd-conv i { font-size: 14px; color: var(--text-3); flex-shrink: 0; }
.pjd-conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjd-newconv {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 12px;
  border: none; border-radius: var(--r-pill);
  background: none; color: var(--text-3);
  font-family: var(--font); font-size: 13px; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.pjd-newconv:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.04); }
.pjd-newconv i { font-size: 14px; }

.pjd-chat-scroll {
  flex: 1; overflow-y: auto;
  padding: var(--sp-5) max(var(--sp-6), calc((100% - 760px) / 2));
  display: flex; flex-direction: column; gap: 16px;
}
.pjd-chat-empty {
  margin: auto; max-width: 340px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text-3);
}
.pjd-chat-empty > i { font-size: 30px; }

.pjd-msg { max-width: 760px; width: 100%; }
/* La pregunta no cruza el panel de lado a lado: se ciñe a su texto y se
   pega a la derecha, con el avatar encima —igual que el chat principal. */
.pjd-msg-user {
  align-self: flex-end;
  width: auto;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.pjd-msg-user .pjd-msg-body {
  background: rgba(10, 14, 20, 0.06);
  color: var(--text-1);
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font-size: 14px; line-height: 1.6;
}
.pjd-msg-bot .pjd-msg-body { font-size: 14px; line-height: 1.6; color: var(--text-1); }
/* El avatar va sobre la burbuja, alineado con su borde derecho */
.pjd-msg-user .msg-avatar { align-self: flex-end; }
/* Las iniciales de quien escribió la pregunta, en su color: el mismo círculo
   del equipo de arriba, al tamaño del avatar gris de antes y sin el aro que
   solo sirve para encabalgarse */
.pju.pjd-msg-autor { width: 22px; height: 22px; margin: 0 0 6px; box-shadow: none; align-self: flex-end; }

/* Barra del chat de proyecto: texto al tamaño de SIEMPRE (15px, el mismo
   del chat principal), centrado en la píldora —arranca él la fila, sin
   clip delante— y con el clip junto a enviar. */
.pjd-pill-wrap .pill-input {
  font-size: 14px;
  /* La base trae line-height:15px, igual que la letra: la caja de línea va
     tan justa que CORTA los descendentes (la g). Con 1.5 respira y el
     texto queda centrado de verdad en su caja. */
  line-height: 1.5;
  height: auto;
  padding-left: var(--sp-2);
  /* El texto guarda el mismo aire por la derecha que por la izquierda: sin
     esto llegaba al borde y una palabra o un espacio de más lo hacía saltar
     de línea antes de tiempo. */
  padding-right: var(--sp-2);
  margin-left: 0;
  /* Los espacios del final no rompen la línea */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.pjd-pill-wrap .pill-input::placeholder { font-size: 14px; }
/* Los documentos nombrados con @ en la pregunta del Agente: el nombre en el
   azul de la casa y sin la @. Se pinta en una copia del texto que va detrás
   de la caja (el campo de texto no puede colorear una palabra); con algún
   nombre a la vista, el texto de la caja se vuelve transparente y se ve la
   copia, con el cursor y la selección de siempre. */
.pjd-mencions-fons {
  position: absolute; z-index: 0; margin: 0; border: 0;
  box-sizing: border-box; overflow: hidden; pointer-events: none;
  color: var(--text-1);
}
.pjd-mencions-fons[hidden] { display: none; }

/* LA CHINCHETA DEL MAPA
   Plana y sin sombra: la que trae MapLibre lleva una pegada debajo y sobre el
   mapa ensucia. Se pone aquí también por si algún estilo de la librería
   intentara ponérsela. */
.mapa-xinxeta {
  line-height: 0;
  filter: none;
  box-shadow: none;
  cursor: pointer;
}
.mapa-xinxeta svg { display: block; }

/* UNA IMAGEN, EN EL VISOR
   El visor es pdf.js y solo sabe de páginas. Una imagen no tiene páginas: se
   enseña entera, centrada y sin pasar de lo que cabe, como una hoja más. */
.pdf-imatge {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}
.pdf-imatge img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 8px 24px -12px rgba(18, 18, 23, 0.35);
}

/* UN ADJUNTO SE ABRE TOCÁNDOLO
   «Adjunto uno y no sé si es el que quería»: la tarjeta se toca y se abre.
   Se nota que es tocable sin añadir ningún botón más a la barra. */
.chat-adjunt-card.es-obrible { cursor: pointer; }
.chat-adjunt-card.es-obrible:hover { background: rgba(10, 14, 20, 0.09); }
.chat-adjunt-card.es-obrible:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
[data-theme="dark"] .chat-adjunt-card.es-obrible:hover { background: rgba(235, 235, 245, 0.14); }
.pjd-mencio { color: var(--blau); }
/* Vale para las dos barras: la del Agente y la del chat principal. La clase
   solo la pone quien pinta las menciones, así que no alcanza a nadie más. */
.pill-input.amb-mencions {
  position: relative; z-index: 1;
  color: transparent; caret-color: var(--text-1);
}
/* Como la barra del chat principal: la altura NO es fija —la base trae
   54px y el texto largo se salía por encima—; crece hacia arriba con el
   texto y envuelve para que los adjuntos hagan su fila propia arriba. */
.pjd-pill-wrap .pill-bar {
  height: auto;
  min-height: 54px;
  padding-top: 9px;
  padding-bottom: 9px;
  flex-wrap: wrap;
  align-items: flex-end;
}
/* El texto ocupa su propia línea y TODO lo demás baja a la fila de abajo:
   contexto a la izquierda, y a la derecha martillo, clip y enviar —en ese
   orden— alineados por su centro, no por la base. */
.pjd-pill-wrap .pill-input { flex: 1 1 100%; order: 0; margin-bottom: 12px; }
/* El selector de contexto (la carpeta con «Solo normativa») se retira a
   petición del usuario: el agente pregunta siempre a todo el proyecto. */
.pjd-pill-wrap .pill-bar > .ctx { display: none; }
/* Abajo: el clip a la izquierda; a la derecha martillo, micrófono y enviar */
.pjd-pill-wrap .pill-plus-wrap { order: 1; margin-right: auto; }
.pjd-pill-wrap .pill-magic-btn { order: 2; }
.pjd-pill-wrap .pill-mic-btn:not(.pill-magic-btn) { order: 3; align-self: center; margin-bottom: 0; }
.pjd-pill-wrap .pill-send-btn { order: 4; }
.pjd-pill-wrap .pill-magic-btn,
.pjd-pill-wrap .pill-plus-wrap,
.pjd-pill-wrap .pill-plus-btn,
.pjd-pill-wrap .pill-send-btn { align-self: center; margin-bottom: 0; }
/* El hueco lo abre SOLO el contexto: el clip traía su propio margen
   automático y los dos se repartían el espacio, dejando el martillo
   colgado en mitad de la barra. */
.pjd-pill-wrap .pill-plus-wrap { margin-left: 0; }
/* «Dónde buscar» del Agente: la icona va con el clip y el pergamino de los
   prompts, en su placa con sombra como ese —y en el azul de la casa, que es
   lo que dice que ahí hay documentos y se puede acotar. */
.pjd-pill-wrap .pill-bar .pjd-abast-wrap .pill-plus-btn {
  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-abast-wrap .pill-plus-btn:hover {
  color: var(--blau);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.12), 0 3px 10px rgba(10, 14, 20, 0.10);
}
/* Buscando en la normativa de IURAX es LILA, que es el color de la base de
   datos, y el proyecto es azul. El color va en el DIBUJO: la placa es la
   blanca de la casa, igual que el globo y el pergamino de al lado. Con el
   círculo del color detrás, el dibujo se comía a sí mismo. */
.pjd-pill-wrap .pill-bar .pjd-abast-wrap .pill-plus-btn.es-lila,
.pjd-pill-wrap .pill-bar .pjd-abast-wrap .pill-plus-btn.es-lila:hover {
  color: var(--lila);
  background: var(--surface-card);
}
/* En el menú, las icones en gris como en el chat principal: el color —azul
   del proyecto, lila de la normativa— es de la icona de la barra, que es la
   que dice de un vistazo dónde está buscando el Agente. */
/* SE ABRE HACIA DONDE QUEPA, como la biblioteca de prompts: hacia ABAJO
   siempre que quepa —que es donde el ojo lo busca, y en el Agente recién
   abierto la barra está a media pantalla— y hacia arriba solo cuando la
   barra ya está pegada al fondo. Lo mide pjdAbastColocar(). */
.pjd-abast-wrap .juris-dropdown.es-avall {
  top: calc(100% + 8px);
  bottom: auto;
  animation: dropDownIn 130ms ease both;
}
.pjd-abast-wrap .juris-dropdown.es-amunt {
  top: auto;
  bottom: calc(100% + 8px);
  animation: dropUpIn 130ms ease both;
}
.pjd-pill-wrap .pjd-abast-wrap.hidden { display: none; }

/* En la barra, el contexto es solo la placa de color; los nombres salen al
   abrir el menú. */
.pjd-pill-wrap .ctx-nom,
.pjd-pill-wrap .ctx-caret { display: none; }
.pjd-pill-wrap .ctx-pill { padding: 0 5px; }
/* LAS FUENTES DEL AGENTE SON LAS DEL CHAT PRINCIPAL
   Aquí vivían unos chips en fila (.pjd-msg-sources / .pjd-src). El servidor
   manda un trozo por cita, así que el municipio salía repetido y acabaron
   escondidos con un `display: none`. Ahora el Agente pinta «Fuentes
   consultadas» con el mismo componente del chat principal —.references /
   .cita-font-item, arriba en este archivo—, que agrupa por documento, pone el
   número de la citación y dice la vigencia. Los dos chats se leen igual. */

/* Àmbit de la resposta: xips; l'actiu, gris ple */
.pjx-scope {
  display: flex; gap: 6px; flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--sp-6); margin: 0 auto 8px;
  width: min(100%, 720px + 2 * var(--sp-6));
}
.pjx-sc {
  display: inline-flex; align-items: center;
  flex-shrink: 0; white-space: nowrap;
  height: 28px; padding: 0 12px;
  border: none; border-radius: var(--r-pill);
  background: none; color: var(--text-3);
  font-family: var(--font); font-size: 12px; cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.pjx-sc:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.04); }
.pjx-sc.on { color: var(--text-1); background: rgba(10, 14, 20, 0.06); font-weight: 500; }

/* Columna: el muelle de preguntas se apila ENCIMA de la barra; en fila
   se le montaba encima. */
.pjd-composer { display: flex; flex-direction: column; align-items: center; padding: 0 var(--sp-6) 18px; flex-shrink: 0; }
/* «Los chats son privados», bajo la barra: candado y letra pequeña en gris */
.pjd-privat {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 12px; color: var(--text-3);
}
.pjd-privat .ti { font-size: 13px; }

/* ── Agente vacío: como el arranque del chat ─────────────────────────
   Saludo y título arriba de la barra, y debajo los documentos del
   proyecto y el historial. Todo centrado en vertical; en cuanto llega
   el primer mensaje, la barra baja al pie y las tarjetas se van. */
.pjd-hero {
  width: 100%; max-width: 780px; margin: 0 auto;
  text-align: center;
}
.pjd-hero .hero-title { margin-bottom: 24px; }
/* Cabecera del agente, como la referencia: equipo con «+» y «actualizado»
   arriba; debajo, solo el nombre, con el lápiz al pasar el cursor */
.pjd-hero-meta { margin-bottom: 14px; }
/* Equipo y «actualizado» en la línea de arriba del Agente */
.tb-agent-meta { display: inline-flex; align-items: center; gap: 12px; margin-right: 8px; }
.tb-agent-meta:empty { display: none; }
.tb-updated { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.tb-updated .ti { font-size: 13px; }
.tb-updated.hidden { display: none; }
/* La bandera del municipio, como en Normativa: llena todo el círculo
   (los escudos, en cambio, se ven enteros). Del tamaño del reloj de al lado. */
.pjd-hero-muni .norm-cell-flag { width: 14px; height: 14px; }
.pjd-hero-equip { display: inline-flex; align-items: center; gap: 0; }
/* La regla general de .hero-meta mete 6px entre spans: aquí no, que los
   círculos tienen que ir pegados */
.hero-meta .pjd-hero-equip,
.pjd-hero-equip .pju-grup { gap: 0; }
/* En la cabecera los círculos van más grandes y bien pegados, el «+» de
   invitar incluido. El «+» y el contador «+N» son círculos con el gris de
   las burbujas del chat, y se ponen en negro al pasar el cursor: los dos
   abren la gente del proyecto (añadir o ver a todos). */
.pjd-hero-mes,
.pjd-hero-equip .pju-mes {
  width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%;
  /* El gris de las burbujas del chat, pero OPACO (mezclado con el fondo de
     la página): con alfa, el círculo de detrás se transparentaba a través
     del «+» y parecía que lo cortaba */
  background: color-mix(in srgb, rgb(10, 14, 20) 8%, var(--bg));
  color: var(--text-2); font-size: 10px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
  box-shadow: 0 0 0 2.5px var(--bg);    /* el aro es del gris de la página, donde vive el Agente */
  cursor: pointer; transition: color var(--t-hover);
}
/* El «+» es el primero de todos: nada se le pone encima. Va el último en
   el DOM (se pinta encima) y aquí se manda al principio con `order`. */
.pjd-hero-mes { font-size: 13px; margin-right: -4px; z-index: 20; order: -1; }
.pjd-hero-equip .pju-mes { margin-left: 0; z-index: 0; }
.pjd-hero-mes:hover,
.pjd-hero-equip .pju-mes:hover { color: var(--text-1); }
/* Los círculos van a escala de la letra: 24px para iniciales de 10px */
.pjd-hero-equip .pju {
  width: 24px; height: 24px; margin-right: -4px;   /* solapados, pero un pelín menos */
  font-size: 10px;   /* las iniciales, dos puntos por debajo del texto de «Compartido» */
  box-shadow: 0 0 0 2.5px var(--bg);
}
.pjd-hero-equip .pju:last-child { margin-right: 0; }
/* Colores por persona (data-c): los mismos que en el pop-up de compartir */
[data-theme="dark"] .pjd-hero-mes,
[data-theme="dark"] .pjd-hero-equip .pju-mes { background: color-mix(in srgb, rgb(235, 235, 245) 10%, var(--bg)); }
.pjd-hero-titol {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 0 24px; max-width: 100%;
  font-family: var(--font-sans); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--text-1);
}
.pjd-hero-nom {
  padding: 0 4px; border-radius: 6px; outline: none;
  max-width: 100%; overflow-wrap: anywhere;
}
.pjd-hero-nom[contenteditable="true"] { box-shadow: 0 0 0 2px rgba(10, 14, 20, 0.08); }
.pjd-hero-edit {
  width: 24px; height: 24px; padding: 0; border: none; background: none;
  color: var(--text-3); font-size: 16px; opacity: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity var(--t-hover), color var(--t-hover);
}
.pjd-hero-titol:hover .pjd-hero-edit,
.pjd-hero-titol.es-editant .pjd-hero-edit,
.pjd-hero-edit:focus-visible { opacity: 1; }
.pjd-hero-edit:hover { color: var(--text-1); }
/* En Agente el equipo ya está en la cabecera: la fila de arriba solo
   conserva Compartir, a la derecha */
.pjx-main-col[data-tab="chat"] .pjd-equip { display: none; }
.pjx-main-col[data-tab="chat"] .pjd-compartir { margin-left: auto; }
.pjd-hero-baix { display: none; }
/* Orden en vacío: saludo → barra → tarjetas (en el DOM la barra va la última).
   Colocado como el arranque del chat principal: a la misma altura desde
   arriba y todo a la misma anchura, no flotando en medio. */
.pjx-body-chat.es-buit .pjd-chat-top    { order: 0; }
/* Misma geometría que el arranque del chat principal, para que al pasar
   de uno a otro no se mueva nada: mismo margen lateral (48), misma
   anchura (780 como mucho), la barra a la misma altura y con el mismo
   grosor, y las tarjetas a la misma distancia. */
.pjx-body-chat.es-buit .pjd-chat-scroll {
  order: 1; flex: 0 0 auto; overflow: visible;
  margin-top: calc(clamp(16px, 7.5vh, 96px) + 73px);
  padding: 0 48px;
}
.pjx-body-chat.es-buit .pjd-composer    { order: 2; padding: 0 48px; }
.pjx-body-chat.es-buit .pjd-pill-wrap   { width: min(100%, 780px); }
.pjx-body-chat.es-buit .pjd-composer .pill-bar { padding: 16px 14px 12px; }
.pjx-body-chat.es-buit #pjd-input { min-height: 42px; }   /* con esto la barra mide 112, como la del chat */
.pjx-body-chat.es-buit .pjd-hero-baix   { order: 3; }
/* En Agente no hay línea entre la fila del equipo y el chat */
.pjx-main-col[data-tab="chat"] .pjx-tabs { border-bottom-color: transparent; }
.pjx-body-chat.es-buit .pjd-hero-baix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* siempre dos mitades iguales */
  width: 100%;
  max-width: calc(780px + 96px);   /* 780 de dentro, como el saludo y la barra */
  margin: 62px auto 0;             /* la misma distancia barra→tarjetas que el chat */
  padding: 0 48px 24px;
  box-sizing: border-box;
}
.pjd-pill-wrap { width: min(100%, 720px); }
.pjd-composer .pill-bar { padding-right: 8px; }

/* ── Chat abierto desde Documentación, Verificación o Avisos (vista
   partida): el chat compacto de antes, no el arranque del Agente. Sin
   chips ni título, sin tarjetas; la barra abajo y la conversación arriba. */
.pjd-split-chat .pjx-body-chat.es-buit .pjd-hero,
.pjd-split-chat .pjx-body-chat.es-buit .pjd-hero-baix { display: none; }
.pjd-split-chat .pjx-body-chat.es-buit .pjd-chat-scroll {
  order: 1; flex: 1 1 auto; overflow-y: auto;
  margin-top: 0; padding: 0 var(--sp-6);
}
.pjd-split-chat .pjx-body-chat.es-buit .pjd-composer { order: 2; padding: 0 var(--sp-6) 18px; }
.pjd-split-chat .pjx-body-chat.es-buit .pjd-pill-wrap { width: 100%; }
.pjd-split-chat .pjx-body-chat.es-buit .pjd-composer .pill-bar { padding: 12px 8px 10px 14px; }
.pjd-split-chat .pjx-body-chat.es-buit #pjd-input { min-height: 0; }

/* ── Cronologia de l'expedient ── */
.pjx-timeline { border-left: 2px solid var(--border); margin: 4px 0 0 8px; padding-left: 22px; }
.pjx-ev { position: relative; padding-bottom: 20px; }
.pjx-ev:last-child { padding-bottom: 4px; }
.pjx-ev::before {
  content: ''; position: absolute; left: -28px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-white); border: 2px solid var(--text-4);
}
.pjx-ev.is-hito::before { border-color: var(--accent); background: var(--accent); }
.pjx-ev-data { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pjx-ev-tit { font-size: 13px; font-weight: 500; color: var(--text-1); margin-top: 2px; }
.pjx-ev-qui { font-size: 12px; color: var(--text-2); }

/* Grups i comptador del carril de documents */
.pjx-doc-grup {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 500; color: var(--text-3);
  margin: 14px 0 6px;
}
.pjx-doc-grup:first-child { margin-top: 0; }

/* ── Pestanya Documentos: taula com la de Normativa ── */
/* Barra de pastillas, sin recuadro de arrastre: la diana es toda la pestaña
   y solo se delata con un borde tenue mientras se arrastra encima. */
.pjx-doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
/* Requadre d'arrossegament: ja només el fa servir la vista de Plantilles */
.pjd-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 12px; margin-bottom: 16px;
  border: 1.5px dashed var(--border-2); border-radius: var(--r);
  font-size: 12.5px; color: var(--text-3); text-align: center;
}
.pjd-dropzone > i { font-size: 22px; }
.pjd-dropzone.pjd-dragover { border-color: var(--accent); background: var(--accent-dim); }
.pjd-pick-link {
  border: none; background: none; padding: 0; font-family: var(--font);
  font-size: 12.5px; color: var(--accent); cursor: pointer;
}
.pjd-pick-link:hover { text-decoration: underline; }

/* ── Vista partida: chat a la izquierda, tabla a la derecha ───────────
   El chat NO se duplica: al abrir, el JS mueve aquí el mismo #pjx-body-chat
   de la pestaña Chat, así hay una sola conversación y un solo cableado. */
/* ── Vista partida ────────────────────────────────────────────────────
   La partición vive en .pjx-main, no dentro de Documentos: así el chat
   ocupa TODO el alto —también al lado de las pestañas— en vez de empezar
   por debajo de ellas, como hace la referencia.
   Se anima `grid-template-columns`, no el ancho: misma técnica que el
   repliegue de la cronología del chat, sin tirones de layout. */
.pjx-main {
  display: grid;
  grid-template-columns: 0px 1fr;
  transition: grid-template-columns 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pjx-main.is-split { grid-template-columns: 420px 1fr; }

.pjd-split-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
/* El chat NO va sobre un gris pintado dentro del marco: como la referencia,
   vive en el GRIS DE LA PÁGINA. El truco: la cara blanca del marco es una
   capa (::before, bajo el contenido) que al partirse se desliza 420px a la
   derecha —llevándose su esquina redondeada y una sombra de tarjeta— y el
   marco enseña detrás el mismo fondo de la página, sin borde ni sombra
   propios, para fundirse con el exterior. */
.main-area { isolation: isolate; }
.main-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface-card);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  transform: none;
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0s linear 0.34s, box-shadow 0s linear 0.34s;
  pointer-events: none;
}
/* La piel de la tarjeta (blanco + borde + sombra) NO se funde de una capa
   a otra: eso era lo que se veía «transparente» a media transición, con dos
   bordes a la vez y un blanco lavado. Ahora el cambio de piel es
   INSTANTÁNEO y ocurre tapado por la propia capa; lo único que se anima es
   el `transform`, así que se desliza el rectángulo entero, de una pieza.
   Al cerrar, el cambio se retrasa hasta que la capa ha vuelto a su sitio
   (0s con retardo), para que no asome blanco por detrás del chat. */
.main-area {
  transition: background 0s linear 0.34s, border-color 0s linear 0.34s, box-shadow 0s linear 0.34s;
}
.main-area.is-split {
  background: var(--bg); border-color: transparent; box-shadow: none;
  transition: background 0s, border-color 0s, box-shadow 0s;
}
.main-area.is-split::before {
  transform: translateX(420px);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0s, box-shadow 0s;
}
/* El Agente del proyecto va, como las demás pestañas, en la tarjeta blanca
   con las esquinas redondeadas (antes iba sobre el gris de la página). */
/* Agente: una sola línea arriba, como la referencia. Fuera la luna, fuera
   «Privado» y fuera la fila del equipo; sus botones viven ahora en la
   línea de arriba (los mueve pjdAgentTopbar). */
.main-area.es-agent .pjd-chat-top { display: none; }
/* Y en todas las pestañas del proyecto: sin luna y sin la fila del equipo
   (usuarios y «Compartido» viven en la línea de arriba) */
/* El selector de tema se quedaba fuera de las pantallas de proyectos (de ahí
   la función `pjPantallaSenseLluna`, «pantalla sin luna»). Ya no: claro/oscuro
   tiene que estar SIEMPRE en el mismo sitio, arriba a la derecha, como en
   Chat o Normativa. Un control que cambia de sitio según la pantalla se busca
   dos veces y no se encuentra ninguna. */
.main-area.es-projecte .pjx-tabs { display: none; }
/* Campana e historial/nuevo chat solo en Agente */
.topbar-agent-acts:not([data-tab="chat"]) #pjd-avisos-btn,
.topbar-agent-acts:not([data-tab="chat"]) .pjd-priv-chip,
.topbar-agent-acts:not([data-tab="chat"]) .pjd-chat-top-acts { display: none; }
/* DENTRO DE UN CHAT ABIERTO la línea de arriba habla del chat: se apartan
   el equipo, la campana y «Compartido», que son del proyecto entero. En el
   Agente en blanco la línea sigue siendo la de siempre. */
.topbar-agent-acts.es-conversa #topbar-agent-meta,
.topbar-agent-acts.es-conversa #pjd-avisos-btn,
.topbar-agent-acts.es-conversa #pjd-compartir { display: none; }
/* El chip ocupa el sitio que dejó «Compartido», con su mismo aire */
.topbar-agent-acts .pjd-priv-chip { margin-left: 6px; height: 28px; }
/* Las iniciales del chat se pueden clicar: quién puede abrirlo y a quién
   más invitar. Solo el cursor y un punto de negro; nada de fondo. */
.pjd-chat-gent.es-clicable { cursor: pointer; }
.pjd-chat-gent.es-clicable:hover .pju { filter: brightness(0.95); }
.pjd-chat-gent.es-clicable:focus-visible { outline: 2px solid var(--text-1); outline-offset: 3px; border-radius: 999px; }
.topbar-agent-acts { display: inline-flex; align-items: center; gap: 6px; }
.topbar-agent-acts:empty { display: none; }
.topbar-agent-acts #pjd-amagar { display: none; }   /* esconder el chat no pinta nada arriba */
.topbar-agent-acts .pjd-compartir { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .main-area::before, .main-area { transition: none; } }
@media (max-width: 900px) {
  .main-area.is-split { background: var(--surface-card); }
  .main-area.is-split::before { transform: none; border-color: transparent; box-shadow: none; }
}
/* …y el rastro se aparta a la columna derecha, que es la que se mueve */
.main-area.is-split .topbar { padding-left: 440px; }
/* Cinturón: el desplazamiento es de la vista del proyecto. Si se navega a
   otra página con el chat abierto —por cualquier atajo que no pase por
   hideAllViews—, todo vuelve a su sitio solo. */
.main-area.is-split:has(#view-projecte-detall.hidden) { background: var(--surface-card); border-color: var(--border); box-shadow: var(--shadow-sm); }
.main-area.is-split:has(#view-projecte-detall.hidden)::before { transform: none; border-color: transparent; box-shadow: none; }
.main-area.is-split:has(#view-projecte-detall.hidden) .topbar { padding-left: 20px; }
.main-area .topbar { transition: padding-left 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .main-area .topbar { transition: none; } }
@media (max-width: 900px) {
  .main-area.is-split .topbar { padding-left: 20px; }
  .pjx-main.is-split .pjd-split-chat { margin-top: 0; padding-top: 0; }
}

/* La columna derecha conserva la pila de siempre: pestañas + cuerpo */
.pjx-main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* El chat no se desvanece ni se recoloca: ya está montado a su ancho final
   y la tarjeta lo destapa al deslizarse, como una cortina. Fijar el ancho
   evita que el texto se reajuste línea a línea mientras la columna crece
   —el otro motivo por el que la apertura se veía rara. */
.pjd-split-chat > .pjx-body {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 420px;
  padding: var(--sp-4);
}

@media (prefers-reduced-motion: reduce) { .pjx-main { transition: none; } }
@media (max-width: 900px) {
  /* Sin sitio para dos columnas: el chat pasa a ocupar todo */
  .pjd-split-chat > .pjx-body { width: 100%; }
  .pjx-main.is-split { grid-template-columns: 1fr 0px; }
  .pjx-main.is-split .pjd-split-chat { border-right: none; }
  .pjx-main.is-split .pjx-main-col { display: none; }
}

/* A sangre, como la barra: las líneas de la tabla cruzan el panel entero */
#pjd-docs-list { overflow-x: auto; margin: 0 calc(-1 * var(--sp-6)); }
.pjx-docs-taula { min-width: 620px; }
.pjx-docs-thead, .pjd-doc {
  display: grid;
  grid-template-columns: 30px minmax(200px, 2.4fr) minmax(120px, 1fr) 78px 96px 34px;
  gap: 10px; align-items: center;
  padding: 0 var(--sp-6);
}
/* 52px: el mismo cuerpo que la barra y que las filas — las tres bandas se
   apilan con el mismo ritmo. */
.pjx-docs-thead {
  min-height: 52px;
  border-bottom: 1px solid var(--border);
}
/* Misma gramática que la tabla de Normativa: cabecera en 13px/500 sobre
   Tinta, NO Mini-Caps — nombra la columna, no titula una sección. */
.pjx-docs-thead span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-1);
}
.pjd-doc {
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-hover);
}
/* La última fila cierra la tabla por abajo, como en Normativa */
.pjd-doc:last-child { border-bottom: 1px solid var(--border); }
.pjd-doc:hover { background: rgba(10, 14, 20, 0.035); }
.pjd-doc-uploading { opacity: .6; cursor: default; }
/* El número es la referencia de la fila: en Tinta 18 casi no se veía. */
.pjx-doc-num { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pjx-doc-cel {
  font-size: var(--text-sm); color: var(--text-1); min-width: 0;
  /* Ninguna celda parte el texto en dos líneas */
  white-space: nowrap;
}
/* El recorte va DENTRO de la celda, no en la celda: la línea separadora de
   cada columna es un ::before que asoma 5px por fuera, y con overflow en la
   celda se la comía. */
.pjx-doc-cel > * {
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Separadores verticales, como en Normativa ────────────────────────
   Centrados en el hueco (gap 10px → -5px) y de arriba abajo: las celdas
   se estiran a todo el alto de la fila. La casilla y el número no llevan
   línea: son el margen de la tabla, no una columna de datos. */
.pjx-docs-thead,
.pjd-doc { align-items: stretch; }
.pjx-docs-thead > span,
.pjd-doc > span { display: flex; align-items: center; position: relative; }
.pjx-docs-thead > span:nth-child(n + 3)::before,
.pjd-doc > span:nth-child(n + 3)::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

/* Nombre del documento en cápsula gris (estilo Legora), igual que Normativa */
/* La CELDA ocupa toda la columna —es la que se queda fija al desplazar la
   tabla, y si no cubriera el ancho entero asomaría por debajo lo que se
   desliza—; la cápsula gris va dentro, ciñéndose al texto. */
.pjx-doc-nom-cel { min-width: 0; }
.pjd-doc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);
  transition: background var(--t-hover);
}
.pjd-doc:hover .pjd-doc-pill { background: rgba(10, 14, 20, 0.08); }
/* Dentro de la cápsula el icono va desnudo, exactamente como en Normativa:
   solo tamaño. Hay que deshacer TODA la placa —relleno, color y radio—; con
   el radio puesto, la imagen del icono se recorta contra una caja de 16px y
   se lee como un círculo con las esquinas cortadas. No vale `background:
   none`: el dibujo del icono ES una background-image y desaparecería. */
.pjd-doc-pill .pjd-doc-ico {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  background-origin: padding-box;
  box-sizing: border-box;
  font-size: 15px;
}
/* Placa blanca sota la icona, com als adjunts del chat */
.pjd-doc-ico {
  font-size: 15px;
  box-sizing: content-box;
  padding: 5px;
  border-radius: var(--r-sm);
  background-color: var(--surface-white);
  background-origin: content-box;
  flex-shrink: 0;
}
.pjd-doc-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjx-doc-tipus { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Estado: punto de color de 8px + etiqueta, como la columna «Estado» de
   Normativa. Sin pastilla: el color ya lo dice el punto. */
.pjx-doc-estat {
  display: inline-block; max-width: 100%;
  padding: 0; border-radius: 0; background: none;
  font-size: var(--text-sm); color: var(--text-1);
  /* Nunca en dos líneas: si la columna se estrecha, se recorta con puntos */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pjx-doc-estat::before {
  content: ''; display: inline-block; vertical-align: 0;
  width: 8px; height: 8px; border-radius: 50%; margin-right: 7px;
  background: var(--text-4);
}
.pjx-doc-estat.is-ok { background: none; color: var(--text-1); }
.pjx-doc-estat.is-ok::before { background: var(--accent); }
.pjd-doc-del {
  border: none; background: none; padding: 0 2px;
  color: var(--text-3); font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--t-hover), color var(--t-hover);
}
.pjd-doc:hover .pjd-doc-del { opacity: 1; }
.pjd-doc-del:hover { color: var(--text-1); }

/* (El apaño de móvil ya no hace falta: la cabecera es una fila a todos los
   anchos desde que el detalle va a pantalla completa.) */

/* ── Plantilles de memòries ───────────────────────────────────────────────── */
.pl-detall-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.pl-detall-actions { display: flex; gap: 8px; flex-shrink: 0; }

.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-2);
  background: var(--surface-card);
  color: var(--text-1);
  transition: background var(--t-hover), border-color var(--t-hover), opacity var(--t-hover);
}
.pl-btn:hover { background: var(--bg-3); }
.pl-btn i { font-size: 16px; }
.pl-btn-primary { background: var(--accent); color: var(--surface-white); border-color: var(--accent); }
.pl-btn-primary:hover { background: var(--accent-hover); }
.pl-btn-primary.is-active { background: var(--accent-dim); color: var(--accent); border-color: rgba(45,106,79,0.25); }
.pl-btn-primary:disabled { cursor: default; }
.pl-btn-ghost { background: none; }
.pl-btn-danger { color: #9A3412; border-color: rgba(232,80,26,0.25); background: rgba(232,80,26,0.06); }
.pl-btn-danger:hover { background: rgba(232,80,26,0.12); }

.pl-section { margin-bottom: var(--sp-6); }
.pl-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.pl-empty-mini { font-size: 13px; color: var(--text-3); padding: 6px 0; }

/* Documents pujats */
.pl-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pl-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-card);
  font-size: 13px;
}
.pl-doc .ficon { font-size: 17px; }
.pl-doc-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-doc-mida { font-size: 11px; color: var(--text-3); flex-shrink: 0; }

.pl-uploading { opacity: 0.6; pointer-events: none; }
.pl-pick-link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* Arbre d'estructura */
.pl-tree { display: flex; flex-direction: column; gap: 10px; }
.pl-tree-sec {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: 10px 14px;
}
.pl-tree-sec-h { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.pl-tree-subs { margin: 6px 0 0; padding-left: 18px; }
.pl-tree-subs li { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }

/* Estil — badges */
.pl-estil { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12.5px;
  max-width: 100%;
}
.pl-chip-k { font-weight: 700; text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.06em; opacity: 0.8; }

/* Badge "Activa" a la card */
.pl-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: middle;
}
.pl-badge-active i { font-size: 11px; }

/* Badge de plantilla activa al formulari d'Informes */
.inf-plantilla-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 4px;
  padding: 7px 13px;
  border-radius: var(--r-md);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12.5px;
  border: 1px solid rgba(45,106,79,0.18);
}
.inf-plantilla-badge i { font-size: 15px; }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE MÒBIL (≤768px) — ajustos addicionals
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── App padding compacte ── */
  #app { padding: 6px; gap: 6px; }
  .topbar { padding: 0 10px; }

  /* ── Topbar: escurça el breadcrumb ── */
  .topbar-company, .breadcrumbs .sep { display: none; }

  /* ── CHAT: ocupa el 100% i composer compacte ── */
  #view-chat, .chat-area, .chat-panel { width: 100%; }
  .composer { padding: 8px 10px 10px; }
  .pill-wrap { max-width: 100%; }
  /* Filtre de municipi ocupa menys espai */
  .muni-filter-badge { max-width: 46vw; }
  .muni-filter-name { max-width: 34vw; }
  .muni-filter-dropdown { width: min(280px, 88vw); }

  /* ── MAPA CATASTRAL: panel com a bottom sheet ── */
  .mapa-info-panel {
    top: auto;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 62vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(105%);
  }
  .mapa-info-panel.is-open { transform: translateY(0); }
  /* El buscador flotant del mapa no ocupa tota l'amplada de cop */
  .mapa-search-wrap { left: var(--sp-3); right: var(--sp-3); width: auto; }

  /* ── NORMATIVA: visor PDF a pantalla completa ── */
  .pdf-panel,
  .pdf-panel.visible {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }
  .pdf-panel.is-expanded {
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    transform: none;
    border-radius: 0;
  }

  /* ── PROJECTES: grid a una sola columna ── */
  .pj-grid { grid-template-columns: 1fr; }

  /* ── PLANTILLES: capçalera i accions en columna ── */
  .pl-detall-head { flex-direction: column; gap: var(--sp-3); }
  .pl-detall-actions { width: 100%; }
  .pl-btn-primary { flex: 1; justify-content: center; }

  /* ── Modals: amplada quasi completa ── */
  .pj-modal { width: 94vw; max-width: 94vw; }
}

/* ── Visor PDF: text layer seleccionable (PDF.js) ─────────────────────────── */
.textLayer {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  overflow: hidden;
  /* clip i no només hidden: una capa hidden es pot desplaçar per programa, i
     un scrollIntoView d'un span de dins la corria respecte del dibuix de la
     pàgina (42 px al PMU b0956d). Amb clip no es pot desplaçar mai. */
  overflow: clip;
  /* opacity 1: si la capa és translúcida, el ::selection es multiplica
     i queda quasi invisible (el text ja és transparent, no cal atenuar-la) */
  opacity: 1;
  line-height: 1.0;
}
.textLayer span {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.textLayer ::selection {
  background: rgba(45, 106, 79, 0.3);
}
/* Coixí de selecció (fix oficial de PDF.js): durant la selecció s'expandeix
   sota els spans i evita que arrossegar per espais buits seleccioni tota
   la resta de la pàgina. */
.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.textLayer .endOfContent.active { top: 0; }

/* ── Botó flotant "Explicar" ──────────────────────────────────────────────── */
.pdf-explicar-btn {
  position: fixed;
  z-index: 4000;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--r-pill);
  /* El negro de los globos de la casa, no el verde: va encima del documento
     y el verde pedía atención como si fuera una acción del texto. */
  background: rgba(10, 14, 20, 0.92);
  color: var(--surface-white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow);
  animation: explicarIn 120ms ease both;
}
.pdf-explicar-btn:hover { background: rgba(10, 14, 20, 1); }
.pdf-explicar-btn i { font-size: 15px; }
@keyframes explicarIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Popup d'explicació ───────────────────────────────────────────────────── */
/* Tarjeta blanca con sombra corta y su rótulo, como el resto de
   desplegables de la casa (nada de cristal ni de mayúsculas verdes). */
.pdf-explicar-popup {
  position: fixed;
  z-index: 4001;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  animation: explicarIn 130ms ease both;
}
/* Mientras se arrastra no se selecciona texto ni se anima */
.pdf-explicar-popup.es-movent { animation: none; user-select: none; }
.pdf-explicar-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: move;                      /* se arrastra por aquí */
  touch-action: none;
}
.pdf-explicar-pop-title {
  font-size: var(--text-sm);
  color: var(--text-1);
}
/* La misma cruz que la del buscador y la de todos los diálogos
   (.search-modal-close): 26 px de caja, 6 px de fillete y la aspa a la letra
   de siempre, sin agrandarla. */
.pdf-explicar-pop-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text-3);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-hover);
}
/* La cruz nunca lleva relleno: solo pasa de gris a negro */
.pdf-explicar-pop-btn:hover { background: none; color: var(--text-1); }
.pdf-explicar-pop-body {
  padding: 12px 14px 14px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-1);
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.pdf-explicar-pop-body p { margin: 0 0 9px; }
.pdf-explicar-pop-body p:last-child { margin-bottom: 0; }
.pdf-explicar-pop-body ul { margin: 0 0 9px; padding-left: 18px; }
.pdf-explicar-pop-body li { margin: 0 0 4px; }
/* Un rótulo suelto dentro del texto: el mismo gris que los de la casa */
.pdf-explicar-pop-body .pdf-expl-rot { color: var(--text-3); margin-bottom: 6px; }
/* El peso lo pone la regla de los pesos (650, el mismo que en el chat) */
.pdf-explicar-pop-body strong { color: var(--text-1); }

/* ── Citacions clicables al chat ──────────────────────────────────────────── */
.cita-link {
  color: var(--accent);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
  transition: color var(--t-hover);
}
.cita-link:hover { color: var(--accent-hover); text-decoration-style: solid; }
.cita-link .ti {
  font-size: 12px;
  margin-right: 2px;
  vertical-align: -1px;
}

/* Llista "Fuentes consultadas" (reutilitza .reference com a card) */
.cita-font-item {
  cursor: pointer;
  color: var(--text-1);
  text-decoration: none;
  justify-content: flex-start;
  transition: background var(--t-hover);
}
.cita-font-item .ti { font-size: 14px; color: var(--accent); flex-shrink: 0; }
/* Fuente de internet: el globo del modo Web (el mismo icons/web.svg del
   selector «Dónde buscar»), no el icono de PDF */
.cita-font-web {
  display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
  color: var(--text-2); 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;
}
/* El nom del document és el títol sencer del planejament i pot ocupar tres o
   quatre línies. Es retalla a dues perquè la llista de referències segueixi
   sent una llista; el nom complet queda al `title` de la fila. */
.cita-font-nom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
/* Al pasar por encima, el gris de relleno de la casa. Era un aro verde, el
   único de la app: se leía como una fuente SELECCIONADA, no señalada. El borde
   se queda como está en reposo (invisible en los dos modos) para que la fila no
   se mueva ni un píxel. */
.cita-font-item:hover { background: var(--sel-fill); }
.cita-font-item.is-unavailable { opacity: 0.55; cursor: default; }
.cita-font-item.is-unavailable .ti { color: var(--text-3); }

/* LOS PLANOS DEL PLAN CITADO (app.js, «LOS PLANOS DE CADA PLAN»)
   Debajo de su fila, sangrados a la altura del nombre del plan (12 de relleno
   + 17 del número + 10 de hueco), para que se lean como suyos: «› Planos 12»
   y, al abrirlo, uno por línea. Sin planos, el hueco no se ve. */
.cita-font-planols { margin: 2px 0 6px 39px; }
.cita-font-planols.hidden { display: none; }
.cita-planols-cap {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 0; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--text-3); transition: color var(--t-hover);
}
.cita-planols-cap:hover { color: var(--text-1); }
.cita-planols-cap .ti { font-size: 12px; transition: transform var(--t-hover); }
.cita-font-planols.is-oberta .cita-planols-cap .ti { transform: rotate(90deg); }
.cita-planols-n { font-variant-numeric: tabular-nums; }
.cita-planols-llista { display: none; flex-direction: column; gap: 1px; margin-top: 2px; }
.cita-font-planols.is-oberta .cita-planols-llista { display: flex; }
.cita-planol {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px; border: none; border-radius: var(--r-sm);
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  transition: background var(--t-hover);
}
.cita-planol:hover { background: var(--sel-fill); }
.cita-planol .ficon { font-size: 14px; }
.cita-planol-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita-planol-fase { flex-shrink: 0; font-size: 11px; color: var(--text-3); }

/* EL PLÀNOL QUE DONA LA RESPOSTA, DINS DEL TEXT ([[PLANO:id]], app.js botoPlanol)
   Un botó petit amb la icona i el nom del plànol, a la frase on la resposta el
   nomena: es clica i s'obre al visor. Separat de la paraula d'abans (la cita sí
   que hi va enganxada; un botó no). El nom llarg es retalla: sencer al `title`. */
.cita-planol-inline {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; margin: 0 2px 0 4px; padding: 1px 9px 1px 7px;
  vertical-align: baseline;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  background: var(--surface-card);
  font-family: var(--font); font-size: 0.92em; line-height: 1.5; color: var(--text-1);
  cursor: pointer; transition: background var(--t-hover);
}
.cita-planol-inline:hover { background: var(--sel-fill); }
.cita-planol-inline .ficon { font-size: 13px; }
.cita-planol-inline-nom { min-width: 0; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tooltip "Document no disponible" */
.cita-tooltip {
  position: fixed;
  z-index: 4500;
  padding: 6px 11px;
  background: var(--text-1);
  color: var(--bg);
  font-size: 12px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: explicarIn 120ms ease both;
}

/* ── Chat RAG: format estructurat de resposta ─────────────────────────────── */
/* Capçalera de secció (estil petit, mono, majúscules) */
/* Títols de secció: una mica més grans que el text i en negreta.
   El 650 !important és per la regla que posa tota l'app a 450 !important:
   sense, el títol sortia amb el mateix gruix i la mateixa mida que el text i
   la resposta no tenia jerarquia. També al que porta a dins (mentre arriba,
   el títol va en un span). */
.chat-h {
  font-family: var(--font-sans, var(--font));
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 18px 0 6px;
}
.chat-h, .chat-h * { font-weight: 650 !important; }
.chat-h:first-child { margin-top: 2px; }

/* Paràgrafs. text-wrap: pretty evita l'última línia d'una sola paraula */
.chat-p { margin: 0 0 10px; line-height: 1.6; text-wrap: pretty; }
.chat-p:last-child { margin-bottom: 0; }

/* Llistes: un punt petit al sagnat i el text alineat amb ell a totes les
   línies. Sense pic ni sagnat, cada element semblava una línia solta d'un
   paràgraf i la resposta es llegia com frases tallades. */
.chat-list {
  list-style: none;
  margin: 0 0 10px;
  padding-left: 0;
}
.chat-list li {
  position: relative;
  margin: 5px 0;
  padding-left: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.chat-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.775em - 2px);      /* al mig de la primera línia */
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
/* Subllista: un pas més endins, amb el punt buit */
.chat-list.chat-sub { margin: 4px 0 2px; }
.chat-list.chat-sub > li::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
/* Numerada (tràmits, passos): el número al sagnat, des del que diu la resposta */
.chat-list.chat-ol { list-style: decimal; padding-left: 20px; }
.chat-list.chat-ol > li { padding-left: 2px; }
.chat-list.chat-ol > li::before { content: none; }
.chat-list.chat-ol > li::marker { color: var(--text-2); }

/* Nota destacada */
/* Nota: mateix recuadre gris que la burbuja de l'usuari, sense cursiva */
.chat-note {
  background: rgba(10, 14, 20, 0.06);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  margin: 12px 0;
  font-style: normal;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-1);
}

/* Separador: SIN RAYA, SOLO AIRE
   El «---» de una respuesta separa bloques, pero la raya gris sobraba (el
   usuario la pidió fuera). Se queda la misma caja con el filo transparente:
   así ocupa lo mismo que antes y los márgenes no se juntan, y entre un
   bloque y el siguiente queda el mismo espacio generoso de siempre. */
.chat-sep {
  border: none;
  border-top: 1px solid transparent;
  margin: 14px 0;
}

/* Referència numerada en superíndex (1, 2, 3…) */
.cita-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  margin-left: 3px;
  border-radius: var(--r-xs);
  background: rgba(10, 14, 20, 0.06);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;   /* centrado con la línea de texto, no en superíndice */
  position: relative;
  top: -1px;                /* compensa la altura de la x: queda ópticamente centrado */
  user-select: none;
  transition: background var(--t-hover);
}
/* La paraula, el número i el signe que el segueix: la línia no s'hi parteix */
.cita-lligam { white-space: nowrap; }
.cita-num:hover { background: rgba(10, 14, 20, 0.14); color: var(--text-1); }
/* En fosc, un vel clar: el «vidre» fosc (--glass-rgb) sobre el panel no es veia (28,28,28 sobre 27,27,27) */
[data-theme="dark"] .cita-num { background: rgba(235, 235, 245, 0.10); }
[data-theme="dark"] .cita-num:hover { background: rgba(235, 235, 245, 0.18); }
/* Una cita el text literal de la qual no s'ha pogut comprovar: el número,
   només contornejat. La finestreta diu per què i el document s'obre sense
   ressaltar res. */
.cita-num.cita-general { background: transparent; box-shadow: inset 0 0 0 1px rgba(10, 14, 20, 0.22); }
.cita-num.cita-general:hover { background: rgba(10, 14, 20, 0.06); }
[data-theme="dark"] .cita-num.cita-general { background: transparent; box-shadow: inset 0 0 0 1px rgba(235, 235, 245, 0.28); }
[data-theme="dark"] .cita-num.cita-general:hover { background: rgba(235, 235, 245, 0.10); }

/* ── DINS D'UNA TAULA: LA REFERÈNCIA ÉS UN DOCUMENT ───────────────────────
   Al text corregut, una cita és un número volat: la frase mana i el número
   només hi remet. A dins d'una taula no: la cel·la sovint NO té res més que
   la referència, i un «2» tot sol no diu que darrere hi hagi un document que
   es pot obrir. Per això aquí porta la icona de document al davant.

   És només CSS a posta: el xip ja és un `.cita-num` amb les seves dades, o
   sigui que el clic (obre el document) i la finestreta del damunt continuen
   funcionant sense tocar res. I la icona és la MATEIXA de tota l'aplicació
   (public/icons/filetypes/pdf.svg, la de `.ficon.is-pdf`): vermella, com a
   qualsevol altre lloc on surti un PDF. */
.chat-taula .cita-num {
  gap: 3px;
  height: 18px;
  padding: 0 5px;
  top: 0;                      /* dins d'una cel·la no va volat */
  font-size: 10.5px;
}
.chat-taula .cita-num::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: url("icons/filetypes/pdf.svg") center / contain no-repeat;
}

/* L'estat («Vigente», «En tramitación») dins d'una taula del xat: el mateix
   punt de color que a Normativa. A la llista de Normativa l'etiqueta es retalla
   amb punts suspensius perquè la columna té una amplada fixa; aquí la cel·la
   mana i el text s'ha de poder partir en dues línies. */
.chat-taula .norm-col-state { display: inline-flex; gap: 6px; align-items: baseline; }
.chat-taula .norm-col-state .norm-dot { position: relative; top: 1px; }
.chat-taula .norm-col-state > span:last-child {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* ── LA NOTA D'UN VOT EN CONTRA ─────────────────────────────────────────────
   Surt sota els botons del missatge quan algú vota en contra: un camp per dir
   QUÈ ha fallat i el botó d'enviar. El vot ja s'ha desat abans; això només hi
   afegeix la nota, i per això es pot tancar sense escriure res. */
.fb-nota {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  max-width: 520px;
}
.fb-nota-camp {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.fb-nota-camp::placeholder { color: var(--text-3); }
.fb-nota-camp:focus { background: rgba(10, 14, 20, 0.08); }
/* Els botons de la casa: pastilla de vidre, lletra grisa que es torna negra */
.fb-nota-enviar,
.fb-nota-x {
  flex: none;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.fb-nota-enviar { padding: 0 14px; }
.fb-nota-enviar:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.09); }
.fb-nota-enviar:disabled { opacity: .5; cursor: default; }
/* La creu no s'omple mai: només passa de gris a negre */
.fb-nota-x {
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  font-size: 15px;
}
.fb-nota-x:hover { color: var(--text-1); background: none; }
.fb-nota-fet {
  margin: 8px 0 2px;
  font-size: 12.5px;
  color: var(--text-3);
}
.fb-nota-fet.es-error { color: var(--vermell, #d93a3a); }
[data-theme="dark"] .fb-nota-camp,
[data-theme="dark"] .fb-nota-enviar { background: rgba(235, 235, 245, 0.08); }
[data-theme="dark"] .fb-nota-camp:focus { background: rgba(235, 235, 245, 0.12); }
[data-theme="dark"] .fb-nota-enviar:hover { background: rgba(235, 235, 245, 0.14); }
[data-theme="dark"] .fb-nota-x { background: none; }

/* La mateixa nota, al panell del superadmin: sota la pregunta que la va rebre */
.fb-nota-taula {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
  white-space: normal;
}
.fb-nota-taula i { flex: none; font-size: 13px; color: var(--text-3); position: relative; top: 1px; }

/* Número a la llista "Fuentes consultadas" */
/* EL MISMO NÚMERO QUE EN EL TEXTO
   Iba en verde sobre verde claro, y es el mismo número que aparece pegado a la
   frase de arriba —donde va en gris—. Dos colores para la misma cosa hacen
   pensar que son cosas distintas. Ahora es el de siempre: relleno gris y el
   número en la tinta del texto. */
.cita-font-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 5px;
  background: rgba(10, 14, 20, 0.06);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  flex-shrink: 0;
}
[data-theme="dark"] .cita-font-num { background: rgba(235, 235, 245, 0.10); }

/* ── El text literal d'una cita, ressaltat al visor PDF (estil marcador) ────
   Només les lletres de la cita (mostrarCita les embolcalla en <mark>), no el
   span sencer: la línia del costat no s'ha de pintar. El text de la capa és
   transparent, com la resta de la capa: el que es veu és el dibuix del PDF. */
.textLayer mark.cita-marca {
  /* El lila de la casa (--lila), como marcador. Va más suave que el ámbar de
     antes porque es un color oscuro: por encima del 30 % se come la letra
     negra del PDF, que es lo que hay que poder leer. */
  background: rgba(139, 92, 246, 0.26);
  color: transparent;
  border-radius: 2px;
  padding: 0;
  margin: 0;
}
/* Las OTRAS citas de la misma respuesta en este documento: el mismo lila, más
   flojo, para que se distinga de la que se ha abierto. */
/* LA QUE NO ESTÁS VIENDO, EN GRIS. Iba en el mismo lila más flojo, y con dos
   referencias juntas no había manera de saber cuál era cuál: las dos lilas.
   En gris se ve que están ahí y cuál es la abierta se lee de un vistazo; al
   saltar a ella se pone lila y la otra se queda gris. */
.textLayer mark.cita-marca.es-germana { background: rgba(10, 14, 20, 0.10); }
/* LAS REFERENCIAS DE LA RESPUESTA, ARRIBA A LA IZQUIERDA
   Una columnita debajo de la flecha de esconder, con el número de cada cita de
   la respuesta que cae en este documento. Estuvieron pegados al texto subrayado
   y no había quien los leyera: se solapaban con las palabras. */
/* «Admin»: quien creó el proyecto. Se lee como un dato, no como un botón —no
   hay nada que elegir, no se le puede cambiar el permiso ni quitarlo—, así que
   va igual que «Puede editar» pero sin flecha: mismo gris, mismo tamaño y sin
   relleno. Con un fondo gris parecía una pastilla pulsable. */
.share-admin {
  display: inline-flex; align-items: center;
  height: 28px;
  /* El mismo margen a la derecha que «Añadir» (.share-afegir): así las dos
     palabras acaban en la misma raya y la columna se lee recta. */
  padding: 0 12px;
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
}
/* La fila de quien creó el proyecto, sobre gris: se ve de un vistazo quién
   manda, sin tener que leer la palabra. */
.share-fila.es-amo {
  background: rgba(10, 14, 20, 0.05);
  border-radius: var(--r);
}
[data-theme="dark"] .share-fila.es-amo { background: rgba(235, 235, 245, 0.08); }

/* ARRIBA Y ABAJO, no una torre de números: el número era el de la respuesta,
   que aquí no dice nada, y con cuatro o cinco referencias la columna era una
   fila de cuadraditos. Dos flechas en su placa blanca —la de la casa, con su
   sombra corta— y una raya finísima entre ellas. */
.cita-nav {
  position: absolute;
  top: 54px;   /* de partida; pintarGermanes() lo mide y lo ajusta */
  left: 10px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 6px 14px -10px rgba(18, 18, 23, 0.35);
  overflow: hidden;
}
.cita-nav.hidden { display: none; }
.cita-nav-btn {
  width: 28px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 0;
  background: var(--sel-fill);
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.cita-nav-btn + .cita-nav-btn { border-top: 1px solid rgba(10, 14, 20, 0.08); }
.cita-nav-btn:hover:not(:disabled) { color: var(--text-1); background: rgba(10, 14, 20, 0.08); }
/* En la primera o en la última no hay a dónde ir: la flecha se apaga */
.cita-nav-btn:disabled { color: var(--text-4); cursor: default; }
.cita-nav-btn .ti { font-size: 15px; }
/* Sin variante para el modo oscuro: la hoja del PDF se dibuja blanca en los
   dos temas, así que el marcador tiene que pesar lo mismo en los dos. */
/* La coincidencia de la búsqueda en la que estás: naranja, más fuerte que una cita */
.textLayer span.cerca-actual {
  background: rgba(255, 150, 0, 0.5);
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px rgba(255, 150, 0, 0.5);
}
[data-theme="dark"] .textLayer span.cerca-actual {
  background: rgba(255, 150, 0, 0.4);
  box-shadow: 0 0 0 1.5px rgba(255, 150, 0, 0.4);
}

/* ════════════════════════════════════════════════════════════════════
   TABLET (769-1024px) — iPad vertical i similars
   El sidebar comença col·lapsat (carril d'icones, gestionat per JS);
   aquí només ajustos d'espai perquè les vistes de 2 columnes respirin.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Visor PDF: una mica més ample que el 50% del desktop */
  .pdf-panel { width: calc(62% - var(--app-padding)); }
  /* Informes: columna de tipus més compacta */
  .inf-sidebar { width: 220px; }
  /* Grids de projectes/plantilles: cards una mica més petites (hi caben 2-3) */
  .pj-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* Panel del mapa una mica més estret */
  .mapa-info-panel { width: 300px; }
}

/* ════════════════════════════════════════════════════════════════════
   DISPOSITIUS TÀCTILS (iPad + mòbil) — sense hover de ratolí
   ════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  /* Controls que al desktop només apareixen amb :hover → sempre visibles */
  .conv-delete { opacity: 1; }
  .conv-kebab  { opacity: 1; pointer-events: auto; }
  .pjd-doc-del { opacity: 1; }
  /* Objectius tàctils còmodes (44px recomanats per Apple) */
  .sidebar-item { min-height: 44px; }
  .conv-item { padding: 9px 8px; }
  .muni-filter-btn { width: 38px; height: 38px; }
  .pdf-explicar-btn { padding: 9px 16px; font-size: 13.5px; }
  .cita-num { min-width: 19px; height: 19px; font-size: 11px; }
  .map-layer-btn { padding: 9px 14px; }
}

/* iOS Safari: 100vh inclou la barra d'eines i talla la part de baix →
   usa l'alçada dinàmica del viewport quan el navegador la suporta */
@supports (height: 100dvh) {
  #app, #auth-overlay { height: 100dvh; }
}

/* ── Visor PDF: sense badge de municipi ni barra de cerca al document ──
   (els elements es mantenen al DOM perquè el JS els referencia) */
.pdf-visor-badges { display: none; }
.pdf-searchbar { display: none; }
/* La lupa de la cabecera del visor la enseña */
.pdf-panel.amb-cerca .pdf-searchbar { display: block; }
.pdf-visor-btn.is-on { background: var(--accent-dim); }

/* ═══ Memòria · targetes de secció (resultat estil Legora) ═══ */
.memc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: rgba(10, 14, 20, 0.02);
}

.memc-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(15, 25, 40, 0.04);
}

.memc-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 10px;
}

.memc-body { font-size: 14px; line-height: 1.7; color: var(--text-1); }
.memc-body p { margin: 0 0 8px; }
.memc-body p:last-child { margin-bottom: 0; }
.memc-sub {
  margin: 14px 0 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
}

/* Targeta personal de l'arquitecte (annexos/plànols) */
.memc-personal { border-style: dashed; }
.memc-personal-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-1);
  resize: vertical;
  outline: none;
  min-height: 60px;
}
.memc-personal-input::placeholder { color: var(--text-3); }

/* ═══ Modal «Exportar documento» ═══ */
.export-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 14, 20, 0.28);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.export-overlay.hidden { display: none; }

.export-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 18px);
  box-shadow: 0 18px 60px rgba(15, 25, 40, 0.22);
  padding: 24px 26px 20px;
}

.export-title {
  margin: 0 0 4px;
  font-family: var(--font-sans, var(--font));
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.export-sub { margin: 0 0 18px; font-size: 13px; color: var(--text-3); }

.export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.export-row-label { font-size: 13.5px; color: var(--text-2); }
.export-row-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-1);
}

.export-select {
  max-width: 220px;
  height: 32px;
  padding: 0 10px;
  border-radius: 18px;
  border: 1px solid rgba(var(--glass-rgb), 0.8);
  background: rgba(var(--glass-rgb), 0.88);
  font: inherit;
  font-size: 13px;
  color: var(--text-1);
  outline: none;
  cursor: pointer;
}

.export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ═══ Fuentes consultadas · desplegable tancat per defecte ═══ */
.references-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
  /* La letra del chat, no la de los rótulos del menú. «FUENTES CONSULTADAS» en
     mini-mayúsculas espaciadas era lo único del hilo que gritaba: va debajo de
     una respuesta, así que se lee como se lee «Proceso completado» —13 px, caja
     normal, en gris—. Las mini-mayúsculas se quedan para la barra lateral. */
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-3);
  transition: color var(--t-hover);
}
.references-toggle:hover { color: var(--text-1); }
.references-toggle .ti {
  font-size: 13px;
  transition: transform var(--t-hover);
}
.references:not(.is-collapsed) .references-toggle .ti { transform: rotate(180deg); }

.references-body { margin-top: 8px; }
.references.is-collapsed .references-body { display: none; }

/* La capçalera antiga h3 ja no s'usa al chat (es manté per compatibilitat) */

/* ── Adjunts del chat: xips multi-fitxer ──────────────────────────────────── */
.chat-adjunts-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 4px 8px;
}
/* Dins de la píndola del chat: fila pròpia a dalt (una sola línia), la caixa
   creix cap amunt i els adjunts que no caben es col·lapsen en un xip «+N» */
.pill-bar .chat-adjunts-wrap {
  width: 100%;
  flex-basis: 100%;
  order: -1;
  margin: 0 0 8px;
  flex-wrap: nowrap;
  /* Sin recorte: la cruz de la esquina asoma fuera de la tarjeta. Los
     adjuntos que no caben los sigue plegando el «+N» (ajustarOverflow). */
  overflow: visible;
  padding: 6px 6px 0 0;
}
/* Las tarjetas guardan su ancho natural: si se encogieran, todas cabrían a la
   fuerza y el «+N» nunca aparecería (y la última se veía cortada). Solo la
   primera se encoge, para que en barras estrechas siempre quede una a la vista. */
.pill-bar .chat-adjunts-wrap .chat-adjunt-card { flex-shrink: 0; }
/* La primera nunca se sale de la barra: si sola ya no cabe, recorta su nombre */
.pill-bar .chat-adjunts-wrap .chat-adjunt-card:first-child { max-width: 100%; }
.composer .pill-bar { flex-wrap: wrap; }
.chat-adjunt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  padding: 0 12px;
  height: 32px;   /* mateixa alçada que la resta de xips del sistema */
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 400;
  border: none;
}
.chat-adjunt-chip .ti { font-size: 15px; flex-shrink: 0; }
.chat-adjunt-chip-ico {
  font-size: 15px;
  box-sizing: content-box;
  padding: 4px;
  border-radius: var(--r-xs);
  background-color: var(--surface-white);
  background-origin: content-box;   /* el farciment queda blanc al voltant */
}
.chat-adjunt-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Adjunt estil Harvey: targeta amb icona + nom + tipus·pes ── */
.chat-adjunt-card {
  position: relative; overflow: visible;   /* la cruz asoma por la esquina */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  /* Puede encogerse: en barras estrechas (chat de proyecto) la primera
     tarjeta se queda a la vista recortando el nombre con puntos */
  flex-shrink: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r);
  /* Relleno gris del sistema (como el filtro activo de Normativa), sin trazo */
  background: rgba(10, 14, 20, 0.05);
  border: none;
  box-shadow: none;
}
.chat-adjunt-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.04);
  font-size: 18px;
  flex-shrink: 0;
}
.chat-adjunt-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centrat verticalment respecte la icona */
  text-align: left;          /* el text comença per l'esquerra */
  min-width: 0;
  line-height: 1.35;
}
/* Nom i subtítol: si són massa llargs, es tallen amb «…» (no eixamplen la caixa) */
.chat-adjunt-card .chat-adjunt-nom {
  font-size: 13px;   /* mateixa mida que la càpsula del visor i el xip */
  font-weight: 400;
  color: var(--text-1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-adjunt-sub {
  font-size: 11px;
  color: var(--text-3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placa blanca sota la icona, igual que a la càpsula del visor: sobre el
   gris de la targeta destaca i marca que és el fitxer original. */
.chat-adjunt-card .chat-adjunt-ico {
  width: auto;
  height: auto;
  font-size: 16px;
  box-sizing: content-box;
  padding: 5px;
  border-radius: var(--r-sm);
  background: var(--surface-white);
}

/* Miniatura real de la imatge adjuntada */
/* La miniatura ocupa tota la caixa: ni placa blanca ni farciment. Cal la
   mateixa especificitat que «.chat-adjunt-card .chat-adjunt-ico», que si no
   li guanya amb el seu width:auto i la imatge surt a mida natural. */
.chat-adjunt-ico.chat-adjunt-thumb {
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  padding: 0;
  border-radius: var(--r-sm);
  background: none;
  overflow: hidden;
}
.chat-adjunt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La ✕ només apareix en passar el cursor: la targeta s'eixampla per mostrar-la */
/* La cruz de quitar, en la esquina de arriba a la derecha dentro de un
   círculo blanco con sombra; solo sale al pasar el cursor por la tarjeta */
.chat-adjunt-card .chat-adjunt-x {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; margin: 0; padding: 0;
  opacity: 0;
  background: var(--surface-card);
  color: var(--text-3);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 6px rgba(10, 14, 20, 0.12);
  font-size: 12px;
  transition: opacity var(--t-hover), color var(--t-hover);
}
.chat-adjunt-card:hover .chat-adjunt-x, .chat-adjunt-card .chat-adjunt-x:focus-visible { opacity: 1; }
.chat-adjunt-card .chat-adjunt-x:hover { background: var(--surface-card); color: var(--text-1); }

/* Fletxa: obre la llista completa d'adjunts · només la fletxa (sense fons),
   gris → negre en hover, com els selectors de projecte/municipi */
.chat-adjunts-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover);
}
.chat-adjunts-arrow:hover { color: var(--text-1); }
.chat-adjunts-arrow .ti { font-size: 18px; }

/* Popover flotant amb tots els adjunts */
.chat-adjunts-popover {
  position: fixed;
  z-index: 1400;
  min-width: 260px;
  max-width: 340px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: dropDownIn 130ms ease both;
}
.chat-adjunts-pop-row {
  position: relative; overflow: visible;   /* la cruz asoma por la esquina */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
}
.chat-adjunts-pop-row:hover { background: var(--chip-solid); }
.chat-adjunts-pop-row .chat-adjunt-txt { flex: 1; min-width: 0; }
/* Lletra un pèl més petita al menú d'adjunts */
.chat-adjunts-pop-row .chat-adjunt-nom { font-size: 12px; color: var(--text-1); }
.chat-adjunts-pop-row .chat-adjunt-sub { font-size: 11px; }
.chat-adjunts-pop-row .chat-adjunt-ico { width: 30px; height: 30px; font-size: 16px; }
/* ✕ sense fons: només la creu, gris → vermell en hover */
.chat-pop-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 4px;
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-hover);
}
.chat-pop-x:hover { color: var(--text-1); }

/* ── Disclaimer sota la barra del chat (una sola línia) ── */
.chat-disclaimer {
  margin: 8px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cualquier adjunto, en cualquier sitio: la cruz en la esquina de arriba a
   la derecha, círculo blanco con sombra, gris → negro */
.chat-adjunt-chip { position: relative; overflow: visible; }
.chat-adjunt-x {
  position: absolute; top: -7px; right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-3);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 6px rgba(10, 14, 20, 0.12);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--t-hover), color var(--t-hover);
}
.chat-adjunt-chip:hover .chat-adjunt-x, .chat-adjunts-pop-row:hover .chat-adjunt-x, .chat-adjunt-x:focus-visible { opacity: 1; }
.chat-adjunt-x:hover { background: var(--surface-card); color: var(--text-1); }
/* TODAS las cruces de esquina (adjuntos y chip del modo) con las mismas
   medidas: 18px de círculo, cruz de 11px, misma posición y sombra */
.chat-adjunt-x, .chat-adjunt-card .chat-adjunt-x {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; padding: 0; margin: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
  background: var(--surface-card); color: var(--text-3);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 6px rgba(10, 14, 20, 0.12);
}
.chat-adjunt-x .ti { font-size: 11px; line-height: 1; }

/* ── EL DOCUMENTO QUE YA SE ENVIÓ Y SE QUEDA EN EL CHAT ──────────────────────
   «Que en la barra no vuelva a aparecer de nuevo el documento para enviar, no
   hace falta» (30-9-2026). Sigue yendo con cada pregunta —de ahí el ahorro,
   ver app.js «LOS DOCUMENTOS SE QUEDAN EN EL CHAT»— pero deja de parecer un
   adjunto a punto de subir: una línea fina, sin relleno ni placa blanca, con
   el nombre y «en este chat», y la ✕ a la vista para sacarlo. */
.chat-adjunt-card.es-delxat {
  gap: 6px;
  padding: 2px 0;
  max-width: 320px;
  background: none;
}
.chat-adjunt-card.es-delxat .chat-adjunt-ico {
  padding: 0;
  font-size: 13px;
  background: none;
}
.chat-adjunt-card.es-delxat .chat-adjunt-thumb { width: 18px; height: 18px; }
/* El nombre y «en este chat», en la misma línea y no uno debajo del otro */
.chat-adjunt-card.es-delxat .chat-adjunt-txt {
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  /* El `center` de la caja base centra VERTICALMENTE mientras es una columna;
     al ponerla en fila centra el nombre a lo ancho, y dentro del desplegable
     —donde la fila ocupa todo— salía el nombre en medio de la nada. */
  justify-content: flex-start;
}
.chat-adjunt-card.es-delxat .chat-adjunt-nom { font-size: 12px; color: var(--text-2); }
.chat-adjunt-card.es-delxat .chat-adjunt-sub { flex-shrink: 0; }
/* Se abre igual, pero una línea no se ilumina como una tarjeta: el nombre
   pasa de gris a negro y nada más */
.chat-adjunt-card.es-delxat.es-obrible:hover,
[data-theme="dark"] .chat-adjunt-card.es-delxat.es-obrible:hover { background: none; }
.chat-adjunt-card.es-delxat.es-obrible:hover .chat-adjunt-nom { color: var(--text-1); }
/* La ✕ al final de la línea, sin burbuja ni sombra: gris → negro */
.chat-adjunt-card.es-delxat .chat-adjunt-x {
  position: static;
  top: auto; right: auto;
  width: 16px; height: 16px;
  opacity: 1;
  background: none;
  box-shadow: none;
  color: var(--text-3);
}
.chat-adjunt-card.es-delxat .chat-adjunt-x:hover { background: none; color: var(--text-1); }

/* Xips dins del missatge de l'usuari */
/* Els adjunts pengen sota la bombolla, separats i alineats amb ella */
.msg-adjunts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.message.user .msg-adjunts { justify-content: flex-end; }
/* La misma tira en el Agente del proyecto: la pregunta arriba y lo que se
   mandó con ella debajo, alineado con ella. Una tarjeta que no se puede abrir
   —un archivo del ordenador, que no está en la Documentación— no se pulsa. */
.pjd-msg-user .msg-adjunts { justify-content: flex-end; }
.chat-adjunt-chip.es-mut { cursor: default; }
button.chat-adjunt-chip { border: none; font-family: inherit; cursor: pointer; }
button.chat-adjunt-chip:hover { opacity: .8; }
/* Lo contestado en la ventana de preguntas (app.js, marcarAclariment): cada
   pregunta en tinta y su respuesta al lado en gris, en su pastilla, bajo la
   pregunta del usuario y alineado con ella */
.msg-aclariment { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-top: 8px; }
.acl-fet {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end;
  column-gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);
  font-size: 13px; line-height: 1.45;
  text-align: right;
}
.acl-fet-q { color: var(--text-1); }
.acl-fet-r { color: var(--text-3); }
/* «Responder sin concretar»: a la izquierda del pie, como enlace; no bloquea */
.acl-pop .vnc-peu .acl-ara {
  margin-right: auto; padding: 0 4px;
  border: none; background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-2);
  cursor: pointer;
}
.acl-pop .vnc-peu .acl-ara:hover { color: var(--text-1); text-decoration: underline; }
/* La ventana cerrada sin contestar no se vuelve a abrir: la burbuja ofrece la
   respuesta con lo que ya se sabe (app.js, oferirRespostaGeneral) */
.acl-oferta {
  display: inline-block;
  margin-top: 8px; padding: 0;
  border: none; background: none;
  font-family: var(--font); font-size: 13px; color: var(--text-2);
  cursor: pointer;
  /* Sin subrayado: en el hilo no hay nada más subrayado, y una raya debajo
     pesa como un enlace a otra página. Que se puede pulsar se ve al pasar por
     encima, que es como se ve en el resto de la casa. */
}
.acl-oferta:hover { color: var(--text-1); }
.acl-oferta:disabled { color: var(--text-3); cursor: default; }
/* El alcance, encima de la respuesta (app.js, pintarAbast): lo que se ha
   entendido y los supuestos, con «Cambiar» para corregirlo */
/* El alcance va a plomo con los pasos de «pensando»: su carril es de 18 px
   (14 de la diana + 4 de aire), el mismo que el de .loading-pas, así que el
   texto de aquí arranca justo donde arrancan los de ahí abajo. */
.abast-linia {
  display: flex; align-items: baseline; gap: 4px;
  margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-1);
}
.abast-ico {
  flex: none; width: 14px; height: 14px;
  /* Un gris más fuerte que el de los rótulos: es un dibujo de trazo fino y
     con el gris claro se leía más flojo que los puntos de los pasos, que son
     manchas llenas. Así pesan lo mismo. */
  color: var(--text-2);
  transform: translateY(2px);         /* centrada con la primera línea */
}
.abast-ico svg { display: block; width: 14px; height: 14px; }
.abast-text { min-width: 0; }
/* «Cambiar» va al final del párrafo, en el texto, no flotando a la derecha.
   Sin subrayado: gris que pasa a negro al pasar el cursor, como el resto de
   los botones de texto de la casa. */
.abast-canviar {
  display: inline; padding: 0;
  border: none; background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-hover);
}
.abast-canviar:hover { color: var(--text-1); }

/* ═══════════════ Agent BOPB (dashboard admin) ═══════════════ */
.bopb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.bopb-filters .sa-input { width: auto; min-width: 130px; }

.bopb-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
/* Categoria */
.bopb-badge-urb  { background: rgba(37, 99, 235, 0.12);  color: #2563eb; }   /* blau */
.bopb-badge-norm { background: var(--green-bg);          color: #16a34a; }   /* verd */
.bopb-badge-patr { background: var(--coral-bg);          color: var(--coral); } /* taronja */
/* Estat */
.bopb-badge-vigent { background: var(--green-bg);        color: #16a34a; }
.bopb-badge-tram   { background: rgba(217, 160, 0, 0.14); color: #b45309; }   /* groc/ambre */
/* Processament */
.bopb-badge-ok   { background: var(--green-bg);          color: #16a34a; }
.bopb-badge-err  { background: rgba(224, 82, 82, 0.12);  color: #e05252; }
.bopb-badge-desc { background: rgba(10, 14, 20, 0.06);   color: var(--text-2); }
.bopb-badge-null { background: rgba(10, 14, 20, 0.05);   color: var(--text-3); }

.bopb-table th, .bopb-table td { padding: 8px 10px; vertical-align: middle; }
.bopb-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  font-family: var(--font);
}
.bopb-link:hover { text-decoration: underline; }
.bopb-override { color: var(--coral); }

/* ═══ Normativa · estat com a punt de color (sense text) ═══ */
.norm-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Columna «Estado»: punto de color + etiqueta */
.norm-col-state { display: flex; align-items: center; gap: 7px; min-width: 0; }
.norm-col-state > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-1);
}
/* Celda sin dato: el guion se queda gris pase lo que pase. Las reglas de
   columna son más específicas, así que necesita ganarles. */
.norm-state-none,
.norm-td .norm-state-none,
.norm-col-state > span.norm-state-none:last-child { color: var(--text-3); }
.norm-dot-vigent { background: var(--accent); }        /* verde de marca (sigue al token) */
.norm-dot-tram   { background: #f0a500; }              /* taronja-groc */

/* ═══════════════════════════════════════════════════════════════
   PROYECTOS · la lista reutiliza el componente de tabla de Normativa
   (.norm-table / .norm-thead / .norm-row / .norm-pill). Aquí solo van
   las diferencias reales: rejilla de 6 columnas y colores de estado.
   ═══════════════════════════════════════════════════════════════ */

/* Mismo encuadre que #view-normativa: a sangre, sin ancho máximo */
#view-projectes { overflow: hidden; padding: var(--sp-2) var(--sp-6) 0; align-items: stretch; }   /* pegado arriba, como dentro de un proyecto */

#view-projectes .norm-thead,
#view-projectes .norm-row {
  /* Cuatro columnas, como la lista de archivos de Legora: el nombre se
     lleva el sitio elástico y el resto va a ancho fijo. */
  grid-template-columns:
    minmax(260px, 1.2fr)   /* Nombre               */
    minmax(160px, 1fr)     /* Descripción          */
    170px                  /* Última modificación  */
    120px                  /* Usuarios             */
    24px;                  /* Punto de avisos      */
  min-width: 800px;
}
/* Sin líneas verticales entre columnas */
#view-projectes .norm-th + .norm-th::before,
#view-projectes .norm-td + .norm-td::before { content: none; }
/* Cabecera en gris; la columna que ordena, en tinta con su flecha */
#view-projectes .norm-th { color: var(--text-3); font-weight: 400; }
#view-projectes .pj-th-ordre {
  border: none; background: none; padding: 0; font: inherit; font-size: var(--text-sm);
  color: var(--text-1); font-weight: 500; cursor: pointer; gap: 4px; text-align: left;
}
#view-projectes .pj-th-ordre .ti { font-size: 13px; }
/* Fila: el nombre en texto normal (sin chip) y el fill del hover con las
   esquinas redondeadas, por encima de la línea de abajo */
#view-projectes .norm-row { position: relative; min-height: 56px; }
#view-projectes .norm-row:hover { background: none; }
#view-projectes .norm-row::after {
  content: ''; position: absolute; left: 0; right: 0; top: 3px; bottom: 3px;
  border-radius: var(--r); background: transparent; pointer-events: none; z-index: 0;
  transition: background var(--t-hover);
}
#view-projectes .norm-row:hover::after { background: rgba(10, 14, 20, 0.035); }
#view-projectes .norm-td { position: relative; z-index: 1; }
#view-projectes .norm-row .norm-col-doc {
  display: flex; width: auto; max-width: none; height: auto; padding: 0;
  background: none; border-radius: 0; justify-self: stretch; gap: 10px;
}
#view-projectes .norm-row:hover .norm-col-doc { background: none; }
#view-projectes .pj-nom-wrap { min-width: 0; }
#view-projectes .norm-row:not(.es-invitacio):hover .pj-nom-wrap { padding-right: 176px; }
#view-projectes .norm-doc-name { font-weight: 400; }
#view-projectes .pj-tipus-ic { width: 15px; height: 15px; }
.pj-fav-mark { display: inline-flex; color: var(--text-3); flex-shrink: 0; }
.pj-fav-mark svg { width: 12px; height: 12px; }
/* Píldora flotante al pasar el cursor: tres puntos · Agente · estrella */
.pj-acts {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; gap: 2px; padding: 3px;
  background: var(--surface-card); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 8px rgba(10, 14, 20, 0.08);
  z-index: 2;
}
#view-projectes .norm-row:hover .pj-acts,
#view-projectes .norm-row.es-menu .pj-acts { display: flex; }
#view-projectes .norm-row.es-menu::after { background: rgba(10, 14, 20, 0.035); }
#view-projectes .norm-row.es-menu:not(.es-invitacio) .pj-nom-wrap { padding-right: 176px; }
.pj-acts-btn {
  width: 26px; height: 26px; border: none; background: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-3); font-size: 15px; transition: color var(--t-hover);
}
.pj-acts-btn:hover, .pj-acts-btn.es-fav { color: var(--text-1); }
.pj-acts-btn .pj-star-ple { display: block; width: 14px; height: 14px; }
.pj-acts-agent {
  height: 26px; padding: 0 10px 0 8px; border: none; border-radius: 999px;
  background: rgba(10, 14, 20, 0.05); color: var(--text-2);
  font: inherit; font-size: 12px; display: flex; align-items: center; gap: 5px;
  cursor: pointer; transition: color var(--t-hover), background var(--t-hover);
}
/* El icono del chat va en gris fuerte, más que el texto */
.pj-acts-agent .ti { font-size: 14px; color: var(--text-1); }
.pj-acts-agent:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.08); }
/* El mismo chat relleno del lateral, en gris fuerte */
.pj-acts-agent svg { width: 14px; height: 14px; flex-shrink: 0; fill: var(--text-2); }
/* Invitación a un proyecto: la píldora blanca SIEMPRE a la vista, en la
   misma línea que el nombre (el nombre se recorta si hace falta), con quién
   te invita, «Aceptar» y la cruz de rechazar (gris → negro, sin fondo). */
.pj-inv {
  position: static; margin-left: 0; flex-shrink: 1; min-width: 0; max-width: 100%;
  display: flex; align-items: center; gap: 4px; padding: 3px 3px 3px 12px;
  background: var(--surface-card); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 8px rgba(10, 14, 20, 0.08);
  z-index: 2; white-space: nowrap;
}
/* Si falta sitio, se recorta quién te invita antes que el nombre del proyecto */
.pj-inv-txt { font-size: 12px; color: var(--text-3); margin-right: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pj-inv-txt b { font-weight: inherit; color: var(--text-1); }
.pj-inv-mostra { color: var(--text-3); }
.pj-inv-ok {
  height: 26px; padding: 0 10px 0 8px; border: none; border-radius: 999px;
  background: rgba(10, 14, 20, 0.05); color: var(--text-2);
  font: inherit; font-size: 12px; display: flex; align-items: center; gap: 5px;
  cursor: pointer; transition: color var(--t-hover), background var(--t-hover);
}
.pj-inv-ok .ti { font-size: 14px; }
.pj-inv-ok:hover { color: var(--surface-card); background: var(--text-1); }
/* Sin overflow:hidden en la celda: recortaba la sombra de la píldora por los lados */
#view-projectes .norm-row.es-invitacio .norm-col-doc { grid-column: 1 / -1; padding: 0; overflow: visible; }
#view-projectes .norm-row.es-invitacio .pj-inv { overflow: hidden; }
#view-projectes .norm-row.es-invitacio .pj-inv-txt { overflow: visible; text-overflow: clip; }
#view-projectes .norm-row.es-invitacio:hover .pj-nom-wrap { padding-right: 0; }
#view-projectes .norm-row.es-invitacio .pj-nom-wrap { min-width: 120px; flex: 1; }
#view-projectes .norm-row.es-invitacio .norm-doc-name { color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-projectes .norm-row.es-invitacio { cursor: default; }
/* La fila de invitación va siempre con el fill gris del hover, para que se vea */
#view-projectes .norm-row.es-invitacio::after { background: rgba(10, 14, 20, 0.035); }

/* Acceso, fecha y propietario en gris suave */
.pj-col-desc, #view-projectes .pj-col-date { color: var(--text-3); white-space: nowrap; }
.pj-desc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Banderita del municipio, en pequeño */
.pj-col-desc { gap: 7px; }
.pj-col-desc .norm-flag, .pj-col-desc .norm-cell-flag { width: 14px; height: 14px; }
/* Punto rojo: hay novedades en el proyecto. Solo el círculo, sin el halo
   degradado que llevaba (el usuario lo quitó primero en Proyectos y después
   en el desplegable del lateral, 19-9-2026). */
.pj-col-avis { justify-content: flex-end; }
.pj-dot {
  position: relative; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--badge-alert);
}
.pj-col-owner { gap: 8px; color: var(--text-2); white-space: nowrap; }
/* Usuarios: los avatares apilados, como en el resto de la app */
.pj-col-owner .pju-grup { display: flex; align-items: center; }
/* Menú de los tres puntos: tarjeta blanca, sombra corta, sin trazo */
.pj-row-menu {
  position: fixed; z-index: 5000; min-width: 170px; padding: 6px;
  background: var(--surface-card); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 8px 24px rgba(10, 14, 20, 0.10);
}
.pj-row-menu.hidden { display: none; }
.pj-row-menu-it {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border: none; background: none; border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; text-align: left;
  transition: background var(--t-hover), color var(--t-hover);
}
.pj-row-menu-it:hover { background: rgba(10, 14, 20, 0.035); color: var(--text-1); }
.pj-row-menu-it .ti { font-size: 15px; color: var(--text-3); }
.pj-row-menu-it:hover .ti { color: var(--text-1); }

/* Eliminar: la única entrada del menú sin vuelta atrás, y se ve. Va separada
   por una línea para que el cursor no caiga en ella viniendo de «Compartir». */
.pj-row-menu-del {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  color: #c82d2d;
}
.pj-row-menu-del .ti,
.pj-row-menu-del:hover .ti { color: #c82d2d; }
.pj-row-menu-del:hover { background: rgba(200, 45, 45, .07); color: #c82d2d; }

/* El tirador para alargar la columna: una franja invisible en el borde
   derecho de cada título, que se enciende al pasar el cursor */
#view-projectes .norm-th { position: relative; }
.pj-resize {
  /* Centrado en el hueco entre columnas: su línea cae encima del separador
     y al pasar el cursor solo se oscurece esa, no sale una segunda */
  position: absolute; top: 0; right: -13px; bottom: 0;
  width: 10px; cursor: col-resize; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
/* Sin línea propia: cae justo encima del separador de la columna y
   oscurecerlo se veía como una raya negra. La señal es el cursor. */
.pj-resize::before { content: none; }
/* Mientras se arrastra, ni se selecciona texto ni se abre ningún proyecto */
body.pj-redimensionant { cursor: col-resize; user-select: none; }
body.pj-redimensionant .norm-row { pointer-events: none; }
/* Una columna como las demás: sin pegado, sin fondo propio y con el mismo
   separador vertical que el resto. */

/* Los filtros, agrupados y con su rótulo: cuatro «Todos» seguidos no se leían */
.pj-filter-row { align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap; }
.pj-filter-grup { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pj-filter-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 500; color: var(--text-3);
}

/* Qué es esta pantalla, debajo del título */
.pj-intro {
  margin: 0 0 var(--sp-4);
  font-size: 13px;
  color: var(--text-3);
}

/* La carpeta de la casa (icons/folder.svg), la misma del lateral y del
   buscador: el tipo ya lo dice el chip de color. Es una ilustración, así
   que no sigue a currentColor ni cambia con el tema. */
.pj-tipus-ic {
  width: 15px; height: 15px; flex-shrink: 0; color: var(--text-3);
  background: currentColor;
  -webkit-mask: url("icons/folder.svg?v=2") no-repeat center / contain;
          mask: url("icons/folder.svg?v=2") no-repeat center / contain;
}
/* Variante rellena: donde el proyecto está «encendido» */
.pj-tipus-ic.es-ple, .pj-carpeta-plena::before {
  -webkit-mask-image: url("icons/folder-fill.svg?v=2");
          mask-image: url("icons/folder-fill.svg?v=2");
}
/* Lista de Proyectos: la carpeta pasa a tinta con la fila, siempre de trazo (sin fill) */
#view-projectes .norm-row:hover .pj-tipus-ic { color: var(--text-1); }
/* Rastro de arriba, dentro de un proyecto: carpeta de trazo en tinta, sin fill */
.crumb-carpeta.pj-tipus-ic { color: var(--text-1); }
/* Lateral: gris, y en tinta (de trazo, sin fill) mientras el proyecto está abierto */
.pj-side-item > .ti-folder { color: var(--text-3); }
.pj-side-grup.es-obert > .pj-side-item > .ti-folder { color: var(--text-1); }
/* Las flechas de «hay más columnas»: botón redondo flotante, tarjeta
   blanca con sombra corta, chevron gris que pasa a Tinta */
/* El mismo botón que el «bajar» del chat: círculo con el fill de chip.
   El alto (style.top) lo pone el JS, centrado en las filas que haya. */
.taula-fletxa {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--chip-solid);
  box-shadow: var(--shadow);
  color: var(--text-2);
  font-size: 16px; cursor: pointer;
  transition: color var(--t-hover);
}
.taula-fletxa:hover { color: var(--text-1); }
.taula-fletxa.es-dreta { right: 10px; }
.taula-fletxa.es-esquerra { left: 10px; }
.taula-fletxa.hidden { display: none; }

/* Nombre y, debajo, la dirección o la referencia catastral */
.pj-nom-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pj-adreca {
  font-size: 11.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ninguna celda se sale de su columna: lo que no cabe se corta con puntos
   suspensivos, y así los rellenos no se pisan entre sí */
/* Nada de overflow:hidden en las celdas: el separador vertical de cada
   columna (::before) vive centrado en el hueco, FUERA de la caja de la
   celda, y el recorte se lo comía. Lo que no cabe se corta dentro de cada
   contenido, pieza a pieza, con puntos suspensivos. */
#view-projectes .norm-col-scope > span:last-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-docs-txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-verif, .pj-normes { max-width: 100%; }
/* Como las etiquetas de Avisos: rectángulo de esquinas suaves con el
   stroke del mismo color, y un color por tipo para reconocerlo al vuelo
   — verde edificación, naranja solar. */
.pj-chip {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(10, 14, 20, 0.05);
  font-size: 11px; font-weight: 500; line-height: 16px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
/* Fill gris para todos; el COLOR de las letras dice el tipo, y la fase
   lleva el suyo propio para distinguir un Básico de un Ejecutivo al vuelo */
.pj-chip.es-edif .pj-chip-tipus { color: var(--badge-green-text); }
.pj-chip.es-solar .pj-chip-tipus { color: var(--status-draft-text); }
.pj-chip-sep { color: var(--text-3); }
.pj-chip-fase.es-basico        { color: var(--badge-residential-text); }  /* azul    */
.pj-chip-fase.es-ejecutivo     { color: var(--badge-dotacional-text); }   /* violeta */
.pj-chip-fase.es-reforma       { color: var(--badge-special-text); }      /* ocre    */
.pj-chip-fase.es-legalizacion  { color: var(--badge-industrial-text); }   /* teja    */
.pj-chip-fase.es-due_diligence { color: var(--text-2); }                  /* gris    */
/* El recorte va en el texto de dentro (.pj-docs-txt), no en la celda:
   con overflow en el td se comía su separador vertical */
.pj-col-docs { color: var(--text-2); white-space: nowrap; }
.pj-sense-docs { color: var(--text-3); }

/* Semáforo de la verificación */
.pj-verif {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; font-size: 12.5px;
  white-space: nowrap;   /* «Sin verificar» se partía en dos líneas */
  overflow: hidden;
}
.pj-verif-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-4, rgba(10,14,20,.25)); }
.pj-verif-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-verif.is-sense { color: var(--text-3); }
.pj-verif.is-critic { color: var(--text-1); }
.pj-verif.is-critic .pj-verif-dot { background: var(--coral, #d94b4b); }
.pj-verif.is-avis { color: var(--text-1); }
.pj-verif.is-avis .pj-verif-dot { background: #d79a2b; }
.pj-verif.is-ok { color: var(--text-2); }
.pj-verif.is-ok .pj-verif-dot { background: var(--accent, #2e6a4c); }

/* Normativa aplicable, abreviada; el punto naranja avisa de que ha cambiado */
.pj-normes {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 12.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-normes-mes { color: var(--text-3); }
.pj-norma-punt {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #e08b28;
}
/* El siguiente paso: alineado a la izquierda como cualquier celda, con
   fill gris y la letra en negro. No abre el proyecto: hace lo suyo. */
.pj-col-accio { display: flex; justify-content: flex-start; }
.pj-accio-btn {
  white-space: nowrap;
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-1);
  border: none;
}
.pj-accio-btn:hover {
  background: rgba(10, 14, 20, 0.08);
  color: var(--text-1);
}

/* Sin proyectos todavía: en el centro de lo que se ve, no colgando de
   arriba. La rejilla apila desde arriba mientras hay proyectos; cuando lo
   único que hay es este cartel, se centra. */
.pj-buit {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 24px; text-align: center;
}
.pj-buit-t { font-size: 13px; font-weight: 500; color: var(--text-1); }
.pj-buit-s { margin: 0; max-width: 52ch; font-size: 13px; line-height: 1.6; color: var(--text-3); }
.pj-buit-btn { margin-top: 6px; }

/* En móvil la fila deja de ser tabla y pasa a ser tarjeta */
@media (max-width: 720px) {
  #view-projectes .norm-thead { display: none; }
  #view-projectes .norm-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    min-width: 0;
    padding: 14px var(--sp-5);
  }
  #view-projectes .norm-row > .pj-col-desc,
  #view-projectes .norm-row > .pj-col-owner { display: none; }
  #view-projectes .norm-row > .norm-col-doc { grid-column: 1; grid-row: 1; }
  #view-projectes .pj-col-date { grid-column: 1; grid-row: 2; }
  /* En móvil el punto de avisos va arriba a la derecha, junto al nombre */
  #view-projectes .pj-col-avis { grid-column: 2; grid-row: 1; align-self: center; }
  .norm-table, #view-projectes .norm-table { min-width: 0; }
}


/* Carpeta del proyecto: verde de marca (en Normativa el icono es el PDF, coral) */
/* Carpeta de proyecto: ilustración a color (icons/folder.svg), no un glifo
   teñido. Es una imagen, así que NO sigue a currentColor ni cambia con el
   tema — es el mismo objeto en claro y en oscuro, igual que la carpeta de
   un escritorio. */
.pj-doc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
}
.pj-doc-ic::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("icons/folder.svg?v=2") no-repeat center / contain;
          mask: url("icons/folder.svg?v=2") no-repeat center / contain;
}
.pj-col-date { color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Buscar, plegado en un icono junto a «Nuevo proyecto» */
.pj-cerca { margin-left: auto; display: flex; align-items: center; }
.pj-cerca-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-3);
  font-size: 17px; cursor: pointer;
  transition: color var(--t-hover);
}
.pj-cerca-btn:hover { color: var(--text-1); }
.pj-cerca-camp { width: 300px; }
/* «Nuevo proyecto» abre la barra por la izquierda y al pasar el cursor se
   enciende: negro pleno con la letra en blanco */
#view-projectes .pj-new-btn { margin-left: 0; }
#view-projectes .pj-new-btn:hover {
  background: var(--text-1);
  border-color: var(--text-1);
  color: var(--surface-card);
}
#view-projectes .pj-new-btn:hover i { color: var(--surface-card); }

/* Botón «Nuevo proyecto», a la derecha de la barra de herramientas */
.pj-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--t-hover), border-color var(--t-hover), background var(--t-hover);
}
.pj-new-btn i { font-size: 15px; }
.pj-new-btn:hover { color: var(--text-1); border-color: var(--border-2); background: rgba(10, 14, 20, 0.04); }

/* Puntos de estado del proyecto (mismo tamaño que el de vigente/tramitación) */
.pj-dot-revisado    { background: var(--accent); }
.pj-dot-en_revision { background: var(--amber); }
.pj-dot-borrador    { background: var(--text-3); }
.pj-dot-cerrado     { background: var(--text-4); }

/* Hallazgos abiertos por severidad */
.pj-sev-wrap { display: inline-flex; align-items: center; gap: 10px; }
.pj-sev { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pj-dot-incumple               { background: #c0392b; }
.pj-dot-posible_incumplimiento { background: var(--amber); }
.pj-dot-falta_dato             { background: #8a94a3; }
.pj-sev-ok { color: var(--accent); font-size: 14px; }


/* ═══════════ Assistent de nou projecte ═══════════
   Cinco pasos: emplazamiento (mapa del Catastro), actuación, equipo,
   documentos y contexto. Todo con el estilo de la casa: letra de 13,
   chips gris → negro con relleno gris al elegir, campos con relleno gris
   sin trazo, tarjetas blancas con sombra corta. */
/* El asistente es un pop-up: cabecera y pasos fijos arriba, el cuerpo con
   scroll, y el pie con los botones fijo abajo */
/* El pop-up cuelga de arriba (no centrado): si un paso crece o encoge, solo
   se mueve el borde de abajo y la cabecera se queda quieta */
/* Mismo tamaño que el pop-up de buscar (560 de ancho, cuerpo de 60vh fijo):
   el pop-up no cambia de tamaño nunca; lo que sobra hace scroll dentro y
   lo que falta deja aire abajo. Toda la letra a 13, como allí. */
#pjw-overlay { z-index: 6000; }
.pjw-modal { max-width: 560px; display: flex; flex-direction: column; font-size: 13px; }
.pjw-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0; }
.pjw-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0 16px; }
.pjw-top-txt { flex: 1; min-width: 0; }
.pjw-x { margin-left: auto; flex-shrink: 0; }
.pjw-title { font-size: 13px; font-weight: 500; color: var(--text-1); margin: 0 0 2px; }
.pjw-sub { font-size: 13px; color: var(--text-3); margin: 0; }
.pjw-modal-cos { height: 60vh; flex: none; overflow-y: auto; padding: 4px 16px 8px; }
.pjw-panel.pjw-ocult { display: none !important; }
.pjw-input.pjw-textarea { height: auto; min-height: 60px; padding: 10px 12px; resize: vertical; line-height: 1.45; }

/* Pasos: el actual en negro con el número en círculo negro; los hechos en gris */
/* Pasos: un puntito sin número. Gris mientras se hace; negro con tick
   cuando está hecho. El paso actual va con el texto en negro. */
/* Una sola línea siempre: si no cabe, se desplaza a los lados (sin barra) */
.pjw-steps { display: flex; align-items: center; gap: 5px; padding: 12px 16px 10px; flex-wrap: nowrap; white-space: nowrap; border-bottom: 1px solid rgba(10, 14, 20, 0.06); overflow-x: auto; scrollbar-width: none; }
.pjw-steps::-webkit-scrollbar { display: none; }
.pjw-step { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text-3); transition: color var(--t-hover); flex-shrink: 0; }
.pjw-step:hover { color: var(--text-1); }
.pjw-step-num {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 20, 0.14); color: var(--surface-card);
  transition: background var(--t-hover);
}
.pjw-step-num .pjw-step-n { display: none; }
.pjw-step-num .ti { display: none; font-size: 7px; line-height: 1; }
.pjw-step.is-active { color: var(--text-1); }
.pjw-step.is-active .pjw-step-num { background: rgba(10, 14, 20, 0.28); }
.pjw-step.is-done .pjw-step-num, .pjw-step.is-ok .pjw-step-num { background: var(--text-1); }
.pjw-step.is-done .pjw-step-num .ti, .pjw-step.is-ok .pjw-step-num .ti { display: inline; }
.pjw-step-lbl { font-size: 13px; }
.pjw-step-sep { flex: 0 0 8px; height: 1px; background: var(--border); }

/* Panells */
.pjw-panel { display: none; }
.pjw-panel.is-active { display: block; animation: pjwFade .18s ease; }
@keyframes pjwFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pjw-field { margin-bottom: 18px; }
.pjw-panel > .pjw-field:first-child, .pjw-panel > .pjw-hint:first-child { margin-top: 10px; }
.pjw-label { display: block; font-size: 13px; color: var(--text-1); margin-bottom: 8px; }
.pjw-opt { color: var(--text-3); font-size: 13px; margin-left: 4px; }
.pjw-hint { font-size: 13px; color: var(--text-3); margin: 7px 0 0; }
/* Campos: relleno gris sin trazo, como el buscador */
.pjw-input {
  width: 100%; height: 38px; padding: 0 12px;
  border: none; border-radius: var(--r);
  background: rgba(10, 14, 20, 0.04); color: var(--text-1);
  font-size: 13px; font-family: inherit; outline: none;
  transition: background var(--t-hover);
}
.pjw-input::placeholder { color: var(--text-3); }
.pjw-input.sense-pista::placeholder { color: transparent; }
.pjw-muni-label.es-carregant, #pjw-muni-label.es-carregant { display: inline-flex; align-items: center; }
.pjw-input:hover { background: rgba(10, 14, 20, 0.055); }
.pjw-input:focus { background: rgba(10, 14, 20, 0.06); }
.pjw-row { display: flex; gap: 10px; }
.pjw-row > * { flex: 1; min-width: 0; }
/* Campos con unidad (m², plantas, uds.): la unidad va dentro, a la derecha */
.pjw-unit { position: relative; display: block; }
.pjw-unit .pjw-input { padding-right: 58px; }
.pjw-unit::after {
  content: attr(data-unit); position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-3); pointer-events: none;
}

/* Selector de municipi */
.pjw-muni { position: relative; }
.pjw-muni-btn {
  width: 100%; height: 38px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  border: none; border-radius: var(--r);
  background: rgba(10, 14, 20, 0.04); color: var(--text-1);
  font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
  transition: background var(--t-hover);
}
.pjw-muni-btn:hover { background: rgba(10, 14, 20, 0.055); }
.pjw-muni-flag img { width: 16px; height: 16px; object-fit: cover; border-radius: 50%; display: block; }
.pjw-muni-ph { color: var(--text-3); }
.pjw-muni-caret { margin-left: auto; font-size: 14px; color: var(--text-3); }
.pjw-muni-dd, .pjw-adreca-dd, .pjw-invite-dd {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface-card); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 8px 24px rgba(10, 14, 20, 0.10);
  overflow: hidden;
}
.pjw-adreca-dd.hidden, .pjw-invite-dd.hidden { display: none; }
.pjw-muni-search { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.pjw-muni-search i { font-size: 15px; }
.pjw-muni-search input { border: none; background: none; outline: none; font-size: 13px; color: var(--text-1); width: 100%; font-family: inherit; }
.pjw-muni-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.pjw-muni-item, .pjw-adreca-item {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border: none; background: none; border-radius: 8px;
  cursor: pointer; font-size: 13px; color: var(--text-2); text-align: left; font-family: inherit;
  transition: background var(--t-hover), color var(--t-hover);
}
.pjw-muni-item:hover, .pjw-adreca-item:hover { background: rgba(10, 14, 20, 0.035); color: var(--text-1); }
.pjw-muni-item.is-sel { color: var(--text-1); background: var(--sel-fill); }
.pjw-muni-item-flag img { width: 16px; height: 16px; object-fit: cover; border-radius: 50%; display: block; }
.pjw-muni-item-ck { margin-left: auto; font-size: 15px; color: var(--text-1); }
.pjw-muni-empty, .pjw-adreca-buit { padding: 12px 14px; color: var(--text-3); font-size: 13px; }
.pjw-adreca-wrap, .pjw-invite { position: relative; }
/* Aro del martillo dentro del campo de dirección mientras se consulta el Catastro */
.pjw-aro-adreca { left: 12px; top: 50%; transform: translateY(-50%); display: flex; }
/* Y en la pastilla del mapa, alineado con el texto */
.pjw-maphint .magic-spin.es-aro { vertical-align: -0.2em; margin-right: 2px; }
.pjw-adreca-dd, .pjw-invite-dd { padding: 6px; }
.pjw-adreca-item .ti { font-size: 15px; color: var(--text-3); flex-shrink: 0; }
.pjw-adreca-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; min-width: 0; }
.pjw-adreca-item small { font-size: 13px; color: var(--text-3); }

/* Mapa con las parcelas del Catastro */
.pjw-mapbox { position: relative; border-radius: var(--r-lg); overflow: hidden; margin-top: 4px; box-shadow: 0 0 0 1px var(--border) inset; }
.pjw-map { height: 240px; background: rgba(10, 14, 20, 0.04); }
.pjw-maphint {
  position: absolute; left: 10px; top: 10px; z-index: 5;
  background: var(--surface-card); border-radius: 999px; padding: 6px 12px;
  font-size: 13px; color: var(--text-2); box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 8px rgba(10, 14, 20, 0.08);
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Lupa del mapa: pastilla blanca arriba a la derecha; al abrirla sale el campo */
.pjw-mapsearch {
  position: absolute; right: 10px; top: 10px; z-index: 6;
  display: flex; align-items: center; height: 30px; padding: 0 2px;
  background: var(--surface-card); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 8px rgba(10, 14, 20, 0.08);
}
.pjw-mapsearch-btn, .pjw-mapsearch-x {
  width: 26px; height: 26px; border: none; background: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-3); transition: color var(--t-hover); font-size: 15px; flex-shrink: 0;
}
.pjw-mapsearch-btn:hover, .pjw-mapsearch-x:hover { color: var(--text-1); }
.pjw-mapsearch.es-obert .pjw-mapsearch-btn { color: var(--text-1); }
.pjw-mapsearch-inp {
  width: 210px; height: 26px; border: none; background: none; outline: none;
  font-size: 13px; font-family: inherit; color: var(--text-1); padding: 0 4px;
}
.pjw-mapsearch-inp::placeholder { color: var(--text-3); }
.pjw-mapsearch-x[hidden], .pjw-mapsearch-inp[hidden] { display: none; }
.pjw-mapsearch .pjw-adreca-dd { left: auto; right: 0; width: 280px; }
/* Con el buscador abierto, la pastilla de la izquierda se aparta */
.pjw-mapbox.es-cercant .pjw-maphint { display: none; }
.pjw-maphint { max-width: calc(100% - 60px); }
.pjw-mapbox .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 1px 2px rgba(10, 14, 20, 0.10), 0 2px 8px rgba(10, 14, 20, 0.08); }

/* Ficha de la parcela: tarjeta blanca con sombra corta */
.pjw-ficha {
  margin-top: 12px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface-card); box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 4px 14px rgba(10, 14, 20, 0.06);
}
.pjw-ficha.hidden { display: none; }
.pjw-ficha-cap { display: flex; flex-direction: column; gap: 2px; }
/* «Datos de la parcela»: desplegable, cerrado de entrada */
.pjw-ficha-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0;
  border: none; background: none; font: inherit; font-size: 13px; color: var(--text-3); cursor: pointer;
  transition: color var(--t-hover);
}
.pjw-ficha-toggle:hover { color: var(--text-1); }
.pjw-ficha-toggle .ti { font-size: 14px; transition: transform var(--t-hover); }
.pjw-ficha-toggle.es-obert .ti { transform: rotate(180deg); }
.pjw-grid.hidden { display: none; }
.pjw-ficha-dir { font-size: 13px; color: var(--text-1); }
.pjw-ficha-ok { font-size: 13px; color: var(--text-3); }
/* Cada dato en su casilla gris, como los campos del asistente */
.pjw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pjw-kv { padding: 9px 12px; border-radius: var(--r); background: rgba(10, 14, 20, 0.04); min-width: 0; }
.pjw-kv small { display: block; color: var(--text-3); font-size: 13px; margin-bottom: 2px; }
.pjw-kv-v { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjw-kv-edit { width: 100%; border: none; background: none; font: inherit; font-size: 13px; color: var(--text-1); outline: none; padding: 0; }
.pjw-kv-edit::placeholder { color: var(--text-3); }
/* Mismo aire arriba y abajo (16) y un poco más entre el título y el campo.
   La nota de abajo, vacía, no ocupa sitio (antes dejaba el margen). */
.pjw-unidad { margin-top: 16px; padding: 16px; border-radius: var(--r); background: rgba(10, 14, 20, 0.04); }
.pjw-unidad.hidden { display: none; }
.pjw-unidad-tit { font-size: 13px; color: var(--text-1); margin-bottom: 8px; }
.pjw-unidad .pjw-hint:empty { display: none; }

/* Campos con desplegable: rectángulo con relleno gris y flecha; al pulsar
   sale el desplegable blanco de la casa */
.pjw-selwrap { position: relative; }
.pjw-select {
  width: 100%; height: 38px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  border: none; border-radius: var(--r);
  background: rgba(10, 14, 20, 0.04); color: var(--text-1);
  font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
  transition: background var(--t-hover);
}
.pjw-select:hover, .pjw-select.es-obert { background: rgba(10, 14, 20, 0.06); }
.pjw-select.es-buit .pjw-select-txt { color: var(--text-3); }
.pjw-select-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjw-select .ti { font-size: 14px; color: var(--text-3); flex-shrink: 0; transition: transform var(--t-hover); }
.pjw-select.es-obert .ti { transform: rotate(180deg); }
.pjw-sel-menu { max-height: 280px; overflow-y: auto; z-index: 6100; }
.pjw-sel-menu .share-rol-opt { display: flex; align-items: center; gap: 10px; }
.pjw-sel-menu .share-rol-opt span { flex: 1; }
.pjw-sel-menu .share-rol-opt .ti { font-size: 14px; opacity: 0; }
.pjw-sel-menu .share-rol-opt.es-actiu .ti { opacity: 1; }
/* Chips: pastilla de la casa, gris → negro; elegida con relleno gris */
.pjw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pjw-chips.hidden { display: none; }
.pjw-chip {
  height: 32px; padding: 0 14px; border-radius: 18px;
  border: none; background: rgba(10, 14, 20, 0.04);
  color: var(--text-2); font-size: 13px; cursor: pointer; font-family: inherit;
  transition: color var(--t-hover), background var(--t-hover);
}
.pjw-chip:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.07); }
.pjw-chip.is-on { color: var(--text-1); background: rgba(10, 14, 20, 0.10); }
#pjw-existe.hidden { display: none; }

/* Equipo */
/* Equipo: filas sin línea entre medio; relleno gris al pasar el cursor,
   menos el admin (que no se puede quitar) */
.pjw-team { border-radius: var(--r); background: var(--surface-card); box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 4px 14px rgba(10, 14, 20, 0.06); padding: 6px; }
.pjw-member { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; transition: background var(--t-hover); }
.pjw-member:not(.es-admin):hover { background: rgba(10, 14, 20, 0.035); }
.pjw-member-txt { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.pjw-member-nom { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjw-member-sub { font-size: 13px; color: var(--text-3); }
/* Desplegable de añadir: puntito con tick (mismo tamaño que el de los pasos) */
.pjw-inv-item { position: relative; padding-right: 30px; }
.pjw-inv-item > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El puntito con tick solo sale en los marcados */
.pjw-inv-item span.pjw-inv-tick {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--text-1);
  display: none; flex-direction: row; align-items: center; justify-content: center; color: var(--surface-card);
}
/* El tick blanco dentro del puntito (la regla general de iconos de la lista lo ponía gris y ancho) */
.pjw-inv-item span.pjw-inv-tick .ti { font-size: 7px; line-height: 1; width: auto; color: var(--surface-card); display: block; }
.pjw-inv-item.es-dins span.pjw-inv-tick { display: inline-flex; }
.pjw-inv-llista { max-height: 220px; overflow-y: auto; }
.pjw-inv-peu { display: flex; justify-content: flex-end; padding: 6px 4px 2px; }   /* sin línea encima */
.pjw-inv-ok { padding: 0 12px; }
.pjw-member-rol { flex-shrink: 0; }
.pjw-invite { margin-top: 10px; }
/* «Añadir persona»: el mismo rectángulo gris que los demás campos */
.pjw-afegir-btn { width: 100%; }
.pjw-afegir-btn .pjw-afegir-mes { font-size: 15px; color: var(--text-2); flex-shrink: 0; transition: none; transform: none !important; }
.pjw-afegir-btn.es-buit .pjw-select-txt { color: var(--text-2); }
.pjw-invite-dd { left: 0; right: 0; }
/* El admin del proyecto: etiqueta a la derecha del nombre */
.pjw-member-tag { font-size: 13px; color: var(--text-3); flex-shrink: 0; padding: 0 6px; }
/* Icono de información junto a los títulos, centrado con el texto; la
   explicación va en el tooltip negro de la casa */
.pjw-label { display: flex; align-items: center; gap: 4px; }
.pjw-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: none; background: none;
  color: var(--text-3); cursor: help; font-size: 14px; line-height: 1;
  transition: color var(--t-hover);
}
.pjw-info .ti { line-height: 1; display: block; }
.pjw-info:hover { color: var(--text-1); }
.pjw-ctx-tit, .pjw-unidad-tit, .pjw-prot-cap { display: flex; align-items: center; gap: 4px; }
.pjw-prot { margin-top: 20px; padding: 14px 16px; border-radius: var(--r); background: rgba(10, 14, 20, 0.04); }
.pjw-prot-cap { margin-bottom: 10px; font-size: 13px; color: var(--text-1); }
.pjw-prot .pjw-input { background: var(--surface-card); }

/* Dropzone + documents */
.pjw-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 20px; border: 1.5px dashed var(--border-2); border-radius: var(--r-lg);
  background: rgba(10, 14, 20, 0.02); color: var(--text-2); text-align: center; font-size: 13px;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.pjw-drop.is-over { border-color: var(--text-2); background: rgba(10, 14, 20, 0.05); }
.pjw-drop > i { font-size: 24px; color: var(--text-3); }
.pjw-drop-sub { font-size: 13px; color: var(--text-3); }
.pjw-drop-link { border: none; background: none; color: var(--text-1); cursor: pointer; font-family: inherit; font-size: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.pjw-doclist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pjw-doc {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r); background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 2px 8px rgba(10, 14, 20, 0.05);
}
.pjw-doc-ico { font-size: 18px; }
.pjw-doc-info { min-width: 0; flex: 1; }
.pjw-doc-nom { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjw-doc-sub { font-size: 13px; color: var(--text-3); }
.pjw-doc-kind {
  height: 28px; border: none; border-radius: 14px;
  background: rgba(10, 14, 20, 0.04); color: var(--text-2); font-size: 13px; font-family: inherit;
  padding: 0 8px; cursor: pointer; flex-shrink: 0;
}
.pjw-doc-del { flex-shrink: 0; }

/* Contexto */
.pjw-ctx { padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-card); box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 4px 14px rgba(10, 14, 20, 0.06); }
.pjw-ctx-tit { font-size: 13px; color: var(--text-1); margin-bottom: 8px; }
.pjw-capa { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; align-items: flex-start; }
.pjw-capa-c { width: 96px; color: var(--text-3); flex: none; }
.pjw-capa-d { flex: 1; color: var(--text-1); }
.pjw-capa-d small { display: block; color: var(--text-3); font-size: 13px; margin-top: 2px; }
.pjw-conf { width: 56px; height: 5px; background: rgba(10, 14, 20, 0.07); border-radius: 3px; overflow: hidden; align-self: center; flex: none; }
.pjw-conf i { display: block; height: 100%; background: var(--text-1); border-radius: 3px; }
.pjw-pend { margin-top: 12px; padding: 10px 12px; background: rgba(10, 14, 20, 0.04); border-radius: var(--r); font-size: 13px; color: var(--text-2); }

/* Peu de l'assistent */
.pjw-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid rgba(10, 14, 20, 0.06); flex-shrink: 0; }
.pjw-foot-sp { flex: 1; }
.pjw-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 18px;
  font-size: 13px; cursor: pointer; font-family: inherit;
  transition: color var(--t-hover), border-color var(--t-hover), background var(--t-hover), opacity var(--t-hover);
}
.pjw-btn i { font-size: 15px; }
/* Atrás / Siguiente: la pastilla de la casa, gris → negro, sin trazo */
.pjw-btn-ghost { border: none; background: rgba(10, 14, 20, 0.04); color: var(--text-2); }
.pjw-btn-ghost:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.07); }
/* «Siguiente» cuando ya se puede pasar: negro al pasar el cursor */
#pjw-next:not(.is-disabled):hover { background: var(--text-1); color: var(--surface-card); }
.pjw-btn-ghost.is-disabled { opacity: .4; pointer-events: none; }
/* «Crear proyecto»: la misma pastilla gris de la casa; negro al pasar el cursor
   cuando ya se puede crear. Nunca verde. */
.pjw-btn-primary { border: none; background: rgba(10, 14, 20, 0.04); color: var(--text-2); }
.pjw-btn-primary:not(:disabled):hover { background: var(--text-1); color: var(--surface-card); }
.pjw-btn-primary:disabled { opacity: .45; cursor: default; }


/* El display d'autor de .pjw-btn tapa l'atribut [hidden] del navegador → forcem-ho */
.pjw-foot .pjw-btn[hidden] { display: none; }

/* ═══════ Popover de la citación (hover sobre el número) ═══════
   Muestra el pasaje citado con su resaltado. Superficie opaca, como el resto
   de elementos que flotan sobre texto. */
.cita-pop {
  position: fixed;
  z-index: 4500;
  display: none;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: explicarIn 120ms ease both;
}
.cita-pop.visible { display: block; }

/* El documento va en tarjeta gris con el icono sobre placa blanca, igual
   que en el modal de añadir a proyecto y en los adjuntos del chat. El
   margen deja su borde exterior en el eje del cuerpo y del pie (14px). */
.cita-pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px 0;
  padding: 8px 10px;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);
}
.cita-pop-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  box-sizing: content-box;
  flex-shrink: 0;
  padding: 5px;
  border-radius: var(--r-sm);
  background: var(--surface-white);
  font-size: 16px;
}
.cita-pop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cita-pop-doc {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cita-pop-sub { font-size: 11px; color: var(--text-3); }   /* como el subtítulo de los adjuntos */

/* Cuerpo: el fragmento del documento, desplazable si es largo */
.cita-pop-cos {
  max-height: 220px;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.cita-pop-cos::-webkit-scrollbar { width: 4px; }
.cita-pop-cos::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 2px; }
/* La frase que sostiene la afirmación del chat */
/* El trozo citado, marcado en el mismo lila que en el visor: se abre la
   ventanita, se ve la frase resaltada y al ir al documento está igual. */
.cita-pop-cos mark {
  background: var(--lila-bg);
  color: var(--text-1);
  border-radius: 3px;
  padding: 0 1px;
}
.cita-pop-buit { color: var(--text-3); font-style: normal; }

/* SI ESTÁ VIGENTE, AL LADO DE LA REFERENCIA
   En la ventanita de la cita (tercera línea de la cabecera) y a la derecha de
   cada fuente consultada. Mismo punto de color que en la lista de Normativa:
   verde vigente, ámbar en tramitación. Cuando no se sabe, no se pinta. */
.cita-vig {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11px; color: var(--text-3); white-space: nowrap;
}
.cita-font-item .cita-vig { margin-left: auto; padding-left: 10px; }

.cita-pop-peu {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.cita-pop-btn {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.cita-pop-btn:hover { background: rgba(10, 14, 20, 0.09); color: var(--text-1); }


/* ═══════ Normativa · añadir documento a un proyecto ═══════ */

/* Desplegable de proyectos: superficie opaca, como el resto de popovers */
/* ── Modal «Añadir a un proyecto» ────────────────────────────────
   Reutilitza .search-modal; això només afegeix la capçalera del document,
   el peu amb el botó i la variant que viu dins del visor. */
.addproj-ov.is-inpanel {
  position: absolute;   /* dins de #pdf-panel, que és fixed i retalla */
  z-index: 60;
}
.addproj-ov.is-inpanel .addproj-modal {
  max-width: min(460px, 100%);
  margin: 0 20px;
}
/* Sin trazo y con la misma sombra que el panel de columnas: los dos flotan
   sobre contenido, así que se separan del fondo con sombra, no con línea. */
.addproj-modal {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  border: none;
  /* Opaco del todo (Opaque Popover Rule): el 0.98 heredado dejaba leerse el
     PDF por debajo del listado. */
  background: var(--surface-card);
  /* Dos sombras del sistema apiladas: un punto más profunda que --shadow-lg
     sola, sin inventar un valor nuevo fuera de la escala. */
  box-shadow: var(--shadow-lg), var(--shadow);
}
/* Ni desenfoque ni velo gris: el documento se ve con su color de siempre y
   el modal se separa solo con la sombra. La capa sigue ahí, transparente,
   porque es la que recoge el clic fuera para cerrar. */
.addproj-ov {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.addproj-modal .search-modal-header { border-bottom: none; }
/* El documento va en una tarjeta gris, como los adjuntos del chat: así no
   hacen falta dos líneas de separación. El margen lateral deja su contenido
   en el mismo eje que las filas de proyecto (12 + 10 = 22px). */
.addproj-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 0;
  padding: 8px 10px;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);
  font-size: 13px;
  color: var(--text-1);
}
.addproj-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addproj-doc .ficon {
  font-size: 16px;
  box-sizing: content-box;
  padding: 5px;
  border-radius: var(--r-sm);
  background-color: var(--surface-white);
  background-origin: content-box;
}
/* El cercador ocupa 60vh fixos; aquí el modal s'ajusta al contingut. */
.addproj-body { height: auto; min-height: 120px; max-height: min(46vh, 300px); }
.addproj-item { width: 100%; border: none; background: none; font-family: var(--font); text-align: left; }
.addproj-item.is-sel { background: rgba(10, 14, 20, 0.05); }
.addproj-tick { margin-left: auto; opacity: 0; color: var(--text-1) !important; }
.addproj-item.is-sel .addproj-tick { opacity: 1; }
.addproj-buit { padding: 14px 12px; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.addproj-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(10, 14, 20, 0.06);
}
.addproj-status { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--text-3); }
.addproj-status code { font-size: 11px; }
.addproj-status.is-err { color: var(--text-3); }
/* Botón en gris, no en verde: no compite con el resto del modal. Clase
   propia para no tocar el primario del asistente de proyectos. */
.addproj-btn {
  border: 1px solid transparent;
  background: rgba(10, 14, 20, 0.05);
  color: var(--text-1);
  font-size: 13px;     /* igual que el resto del modal */
  font-weight: 400;
}
.addproj-btn:hover:not(:disabled) { background: rgba(10, 14, 20, 0.09); }
.addproj-btn:disabled { opacity: .45; cursor: default; }
/* GUARDADO, DENTRO DEL PROPIO BOTÓN
   El «guardado» iba suelto a la izquierda del pop-up, en verde, lejos de lo
   que acabas de pulsar. Ahora entra en el botón: un tic y la palabra,
   deslizándose desde abajo. Es lo mismo que hace «Guardar» en Ajustes, con su
   misma animación (`config-fet`).
   `opacity: 1` a posta: el botón está desactivado —ya no se puede volver a
   pulsar— pero lo que dice tiene que leerse entero, no a media tinta. */
.addproj-btn.es-fet, .addproj-btn.es-fet:disabled {
  gap: 6px; opacity: 1; color: var(--text-1); cursor: default;
  background: rgba(10, 14, 20, 0.05);
}
.addproj-btn.es-fet i { font-size: 15px; }
.addproj-btn.es-fet > * { animation: config-fet 0.26s ease both; }
.addproj-btn.es-fet > span { animation-delay: 0.05s; }
/* Al pulsar, el botón pasa a desactivado y cambia el texto a la vez: con la
   opacidad en transición, Safari dejaba pintado el trozo de botón que se
   soltaba (una mancha gris a la izquierda). Sin esa transición y con el
   ancho fijo mientras añade (index.html), el texto queda centrado. */
.addproj-btn { justify-content: center; transition: color var(--t-hover), background var(--t-hover); }
/* «Añadir a un proyecto» y «Añadir normativa»: todo en una línea a la
   izquierda. El icono de la cabecera, el rótulo, la ayuda y los iconos de los
   resultados empiezan a 22 px del borde (el icono iba a 16), y el texto que
   se escribe cae en la columna de los títulos, a 50. El rótulo, con la letra
   normal del modal (13 px, gris), no en minimayúsculas. */
.addproj-modal .search-modal-header { padding-left: 22px; gap: 10px; }
.addproj-modal .search-section-label { font-size: 13px; text-transform: none; letter-spacing: normal; }
.addproj-modal .addproj-buit { padding-left: 10px; padding-right: 10px; }
/* «Seleccionar todos», la pastilla de la casa a la derecha del rótulo. La
   fila tiene siempre su alto, para que el rótulo no salte al salir. */
.addnorm-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 32px; padding-top: 0; padding-bottom: 14px;
}
/* El rótulo, más arriba (a 8 px del buscador; iba a 25). Por debajo, 14 px
   entre la pastilla y el primer documento: sin ellos, el gris del documento
   al pasar el cursor tocaba la pastilla. */
#addnorm-ov .search-modal-body,
#addnorm-ov .search-section { padding-top: 0; }
.addnorm-tots[hidden] { display: none; }
/* «Añadir normativa» desde el proyecto: varios a la vez, con el ámbito debajo */
.addnorm-item { align-items: center; gap: 15px; }   /* el título a 50 px, como el texto del buscador */
.addnorm-item .ficon { flex-shrink: 0; }
.addnorm-t { display: flex; flex-direction: column; min-width: 0; }
.addnorm-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addnorm-meta { font-size: 11.5px; color: var(--text-3); }
.addnorm-item.is-ja { opacity: .55; cursor: default; }

/* ── Documentos del proyecto · selección y columnas nuevas ─────────
   La tabla crece a 6 columnas: casilla, número, documento, tipo
   detectado por la IA, resumen y estado de indexado. */
/* Número y casilla comparten UNA columna (la casilla se pone encima del
   número al pasar el cursor). Con dos columnas separadas, la casilla
   oculta dejaba una franja vacía antes del nombre.
   La columna va justa (22px): con 34px sobraba aire a ambos lados y el
   nombre arrancaba demasiado adentro. */
.pjx-docs-thead, .pjd-doc {
  /* Documento, Tipo y Contenido; Contenido es la ancha (el resumen es lo que
     se viene a leer). Lo normal es que mande --pjx-cols, que pone el JS. */
  grid-template-columns: var(--pjx-cols, 22px minmax(260px, 2.2fr) minmax(130px, 1fr) minmax(150px, 3fr));
}
/* El mínimo REAL de la suma de columnas: si se queda corto, las celdas
   desbordan la fila y las líneas de separación no llegan al margen */
.pjx-docs-taula { min-width: var(--pjx-min, 760px); }
/* Los títulos de columna, SIEMPRE en una línea. El recorte de títulos
   kilométricos va en el envoltorio interior: en la celda taparía la línea
   separadora (::before asoma 5px por fuera). */
.pjx-docs-thead > span { white-space: nowrap; }
.pjx-col-tit { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Cabecera de una columna de IA: el aspa solo al pasar por encima */
.pjx-col-th { gap: 6px; }
.pjx-col-x {
  border: none; background: none; padding: 0; margin-left: auto;
  color: var(--text-3); font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--t-hover), color var(--t-hover);
}
.pjx-col-th:hover .pjx-col-x { opacity: 1; }
.pjx-col-x:hover { color: var(--text-1); }
/* Mientras la IA lee los documentos, la celda late en vez de quedarse vacía */
.pjx-col-load {
  display: block; width: 60%; height: 9px; border-radius: var(--r-sm);
  background: rgba(10, 14, 20, 0.06);
  animation: pjxColLoad 1.2s ease-in-out infinite;
}
@keyframes pjxColLoad { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .pjx-col-load { animation: none; } }

/* Casilla: cuadrada, discreta, y solo visible del todo al pasar o marcar */
/* Casilla propia, no la del sistema: la nativa trae un trazo grueso y oscuro
   que no se puede tocar. Así lleva el mismo borde fino y gris que los botones
   de la barra y el resto de rectángulos. */
.pjx-check {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  box-sizing: border-box;
  /* Redonda, y en reposo solo el trazo —como el cuadrado de antes—: un
     círculo relleno de gris pesaba demasiado en una tabla entera. */
  border: 1.5px solid var(--border-2);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.pjx-check:hover { border-color: var(--text-4); }
/* Marcada: círculo en tinta y el visto blanco recortado encima */
.pjx-check:checked,
.pjx-check:indeterminate { background: var(--text-1); border-color: var(--text-1); }
.pjx-check:checked:hover,
.pjx-check:indeterminate:hover { background: var(--text-1); border-color: var(--text-1); }
.pjx-check:checked::after,
.pjx-check:indeterminate::after {
  content: "";
  width: 76%;
  height: 76%;
  background-color: var(--surface-white);
}
.pjx-check:checked::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.4l3.6 3.6 7.4-8.2' 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='M6.5 12.4l3.6 3.6 7.4-8.2' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Indeterminada (algunos marcados, no todos): guion en vez de check */
.pjx-check:indeterminate::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='black' stroke-width='3' stroke-linecap='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='M7 12h10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* En oscuro --surface-white es color de letra (#f2f2f4), el mismo que el
   círculo marcado: el visto y el guion van en el fondo de tarjeta para verse */
[data-theme="dark"] .pjx-check:checked::after,
[data-theme="dark"] .pjx-check:indeterminate::after { background-color: var(--surface-card); }
.pjx-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
.pjd-doc.is-sel { background: rgba(10, 14, 20, 0.04); }

/* Número y casilla, apilados en el mismo hueco: se ve el número y, al pasar
   el cursor o si la fila está marcada, cede el sitio a la casilla. Es lo que
   evita una columna entera de casillas pesando más que los documentos.
   Se atenúan con opacity y no con visibility: visibility es discreta y con
   transición tarda medio ciclo en salir bajo el cursor. */
/* Alineado a la izquierda, no centrado: centrado, el número caía 8px a la
   derecha de la casilla «seleccionar todo» de la cabecera, que sí arranca
   en el borde. Así casilla, número y todo lo de arriba comparten vertical. */
.pjx-doc-sel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.pjx-doc-sel .pjx-doc-num,
.pjx-doc-sel .pjx-check { transition: opacity var(--t-hover); }
.pjx-doc-sel .pjx-check {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.pjd-doc:hover .pjx-doc-sel .pjx-check,
.pjd-doc.is-sel .pjx-doc-sel .pjx-check,
.pjx-doc-sel:has(.pjx-check:checked) .pjx-check,
.pjx-doc-sel .pjx-check:focus-visible { opacity: 1; }
.pjd-doc:hover .pjx-doc-sel .pjx-doc-num,
.pjd-doc.is-sel .pjx-doc-sel .pjx-doc-num,
.pjx-doc-sel:has(.pjx-check:checked) .pjx-doc-num { opacity: 0; }

/* Tipo detectado por la IA: texto plano, igual que la columna «Tipo» de
   Normativa. La pastilla gris chocaba con la cápsula del nombre — dos
   rellenos en la misma fila y ninguno mandaba. */
.pjx-doc-badge {
  display: inline-block;
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La normativa vinculada se distingue: no es documentación del despacho */
.pjx-doc-badge.is-normativa { color: var(--accent); }

.pjx-doc-resum {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barra de selección, en el sitio de las pastillas */
/* Vive DENTRO de la barra de acciones, detrás de los botones: al seleccionar
   no aparece una fila nueva que empuje la tabla, solo crece la barra. */
.pjx-docs-sel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.pjx-docs-sel.hidden { display: none; }
/* Barra fina que la separa de los botones, como en el resto de la fila */
.pjx-docs-sel-sep {
  width: 1px;
  height: 18px;
  flex-shrink: 0;
  background: var(--border);
  margin-right: var(--sp-1);
}
.pjx-btn.is-danger { color: var(--coral); }
.pjx-btn.is-danger:hover { background: var(--coral-bg); color: var(--coral); }
/* Destructivo con silueta, igual que el resto de la barra */
.pjx-tbtn.is-danger { color: var(--coral); }
.pjx-tbtn.is-danger:hover { color: var(--coral); border-color: var(--coral); background: var(--coral-bg); }

/* ═══════════════════════════════════════════════════════════════════
   PRUEBA GLOBAL (petición del usuario): TODO el frontend a peso 500,
   sin tocar ningún color. Tres excepciones, re-marcadas debajo:
   el saludo del chat («Hola Nicolas,» y su título) se queda como estaba,
   y las negritas DENTRO de las respuestas del chat siguen a 700.
   Para revertir la prueba, borrar este bloque entero.
   ═══════════════════════════════════════════════════════════════════ */
/* Distintivo del rastro: el escudo del municipio y su nombre, pegados al
   nombre del proyecto. En gris, para que el que manda siga siendo el
   proyecto. */
/* El tramo actual pasa a fila para que nombre, escudo y municipio compartan
   el mismo centro: en línea, la caja del distintivo se colocaba por la
   línea base y quedaba un pelo alta. */
.crumb.is-current:has(.crumb-extra) { display: inline-flex; align-items: center; }
.crumb-extra { display: inline-flex; align-items: center; margin-left: 10px; }
/* La carpeta del proyecto delante del nombre, en el rastro de arriba */
.crumb-pre { display: inline-flex; align-items: center; margin-right: 7px; vertical-align: -4px; }
/* El lápiz del rastro: solo asoma al pasar el cursor por el nombre del
   proyecto y abre su ficha. Gris que se vuelve negro, sin fondo. */
.crumb.is-current:has(.crumb-edit) { display: inline-flex; align-items: center; }
.crumb-edit {
  margin-left: 8px; width: 26px; height: 26px; flex-shrink: 0;
  border: none; background: none; padding: 0; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 15px; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-hover), color var(--t-hover);
}
.crumb.is-current:hover .crumb-edit,
.crumb-edit:focus-visible { opacity: 1; pointer-events: auto; }
.crumb-edit:hover { color: var(--text-1); background: none; }

.crumb-carpeta { width: 18px; height: 18px; }
.crumb-muni {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px;
  color: var(--text-3);
}
.crumb-muni img, .crumb-muni svg { width: 14px; height: 14px; object-fit: contain; }

/* ── Plantillas de verificación ───────────────────────────────────
   Arranques listos para lanzar, en dos estantes: verificar y redactar.
   Arriba, la fila de arranque —crear desde cero y los tutoriales—, como
   en la referencia. */
.pjx-plant { padding: 4px 0 8px; }
/* Sin hallazgos manda la galería: el título de la pestaña y su bajada
   sobran (no describen nada que esté en pantalla). */
#pjx-body-verif.es-galeria > .pjx-head,
#pjx-body-verif.es-galeria > .pjx-sub { display: none; }

/* Fila de arranque: las mismas columnas que los estantes de abajo.
   (Hoy ya no se usa en Biblioteca —«Crear un prompt» vive en su estante—,
   se conserva por si vuelve una fila de arranque.) */
.pjx-tuto-fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-5) var(--sp-4);
  /* Mismo aire encima de cada título de estante: 44px desde la última
     tarjeta de arriba. En los estantes con «Ver más», esos 44 se reparten
     alrededor del enlace (10 + 23 de alto + 11), de modo que el hueco
     visible por encima de cada título es idéntico. */
  margin-bottom: 44px;
}
@media (max-width: 480px) { .pjx-tuto-fila, .pjx-plant-grid { grid-template-columns: 1fr; } }
.pjx-tuto {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 168px;
  padding: 16px;
  border: none;
  border-radius: var(--r-lg);
  background: rgba(10, 14, 20, 0.05);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-hover);
}
.pjx-tuto:hover { background: rgba(10, 14, 20, 0.09); }
/* «Crear» / «Ver»: la letra de siempre, sin mini-mayúsculas ni espaciado
   —eran lo único de la pantalla con otro tratamiento de letra. */
.pjx-tuto-lbl {
  position: absolute; top: 14px; left: 16px;
  font-size: 12.5px;
  color: var(--text-3);
}
/* El disco central: en «crear» una cruz; en los tutoriales, el play */
.pjx-tuto-mes, .pjx-tuto-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-1);
  font-size: 15px;
}
.pjx-tuto-play { font-size: 13px; }
.pjx-tuto-cos { display: flex; flex-direction: column; gap: 2px; }
.pjx-tuto-tit { font-size: 13px; color: var(--text-1); }
.pjx-tuto-sub { font-size: 12.5px; color: var(--text-2); }

/* Título de cada estante: la tipografía de siempre, no mini-mayúsculas */
/* Título de cada estante: en gris — nombra el estante, no compite con
   los títulos de las plantillas, que son lo que se elige. */
.pjx-buit-estant { grid-column: 1 / -1; margin: 0; }
.pjx-plant-tit-sec {
  margin: 0 0 12px;
  font-family: var(--font);
  /* La misma letra que el resto de la casa: los títulos no van más grandes.
     En Tinta: son los rótulos de los estantes, no una nota al margen. */
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}
/* LAS TARJETAS, SIEMPRE ENTRE DOS MEDIDAS
   En un monitor grande —o al esconder la barra lateral— las tarjetas se
   estiraban sin freno. Ahora la tarjeta va SIEMPRE entre 280 y 360 de
   ancho: lo que cambia con la pantalla es cuántas caben en una fila, no lo
   larga que es cada una. Seis por fila es el tope. */
/* La misma medida que las tarjetas de Proyectos: mismo mínimo, mismos
   huecos y la misma proporción del rectángulo (16/10). */
.pjx-plant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-5) var(--sp-4);
  margin-bottom: 44px;
}
/* Lo que no cabe en las dos filas cortas (y el «Ver más» cuando no hace falta) */
.pjx-plant-card.es-fora, .pjx-plant-peu.es-fora { display: none; }
/* LA TARJETA DE UN PROMPT
   El nombre arriba, el dibujo en medio y, al pasar el cursor, «Ver» y
   «Usar prompt» abajo. Lo que hace se cuenta en el pop-up. */
.pjx-plant-card {
  display: block;
  aspect-ratio: 16 / 10;
  padding: 14px;
  border: none;
  border-radius: var(--r);
  /* El gris va OPACO: el dibujo abre el hueco entre las hojas pintando este
     mismo color, y con alfa los grises se sumaban. */
  --pjx-card-fons: #f3f3f3;
  background: var(--pjx-card-fons);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--t-hover);
}
.pjx-plant-card:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* El nombre, arriba y en Tinta */
.pjx-plant-card > .pjx-plant-tit {
  position: relative; z-index: 1;
  display: block; max-width: 100%;
  font-size: 13px; color: var(--text-1); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Con etiqueta arriba a la derecha, el nombre le deja su sitio */
.pjx-plant-card:has(.pjx-plant-tipus) > .pjx-plant-tit { padding-right: 90px; }
/* «Ver» y «Usar prompt»: salen al pasar el cursor, abajo */
.pjx-plant-accions {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-hover), transform var(--t-hover);
  pointer-events: none;
}
.pjx-plant-card:hover .pjx-plant-accions,
.pjx-plant-card:focus-within .pjx-plant-accions { opacity: 1; transform: none; pointer-events: auto; }
/* Ver el prompt: un ojo, como los demás iconos de la fila (compartir,
   papelera). Antes era la palabra «Ver» y desentonaba al lado de ellos. */
.pjx-plant-veure {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--text-3); font-size: 15px;
  cursor: pointer; transition: color var(--t-hover);
}
.pjx-plant-veure:hover { color: var(--text-1); }
.pjx-plant-veure .ti { font-size: 15px; line-height: 1; }
.pjx-plant-usar {
  margin-left: auto;
  height: 30px; padding: 0 14px; border: none; border-radius: 15px;
  background: var(--text-1); color: var(--surface-card);
  font-family: var(--font); font-size: 13px; cursor: pointer;
  transition: background var(--t-hover);
}
.pjx-plant-usar:hover { background: #000; }
.pjx-plant-card:hover { --pjx-card-fons: #e9e9ea; }
/* El dibujo va centrado en TODA la tarjeta —no en el hueco de arriba—, en el
   mismo gris que la carpeta de los proyectos. El texto se lee por encima. */
.pjx-plant-ic {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #bcbdbf;
  pointer-events: none;
}
.pjx-plant-ic svg { display: block; width: 46px; height: 46px; }
/* El dibujo se queda quieto: no se mueve al pasar el cursor */

/* EL POP-UP DE UN PROMPT: qué es y qué hace */
.pjx-prompt-pop {
  position: fixed; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: rgba(10, 14, 20, 0.28);
}
.pjx-prompt-pop.hidden { display: none; }
.pjx-prompt-pop-caixa {
  width: min(520px, 100%);
  padding: var(--sp-4);
  background: var(--surface-card);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(18, 18, 23, .05), 0 6px 14px -10px rgba(18, 18, 23, .3);
}
/* El nombre y la cruz, en la misma línea */
.pjx-prompt-pop-cap { display: flex; align-items: center; gap: var(--sp-2); }
/* El tipo, con la misma letra que el nombre y un puntito gris de separación */
.pjx-prompt-pop-tipus {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  font-size: 13px; color: var(--text-3); white-space: nowrap;
}
.pjx-prompt-pop-tipus::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-3); opacity: 0.55;
}
.pjx-prompt-pop-x {
  width: 26px; height: 26px; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 15px; cursor: pointer;
  transition: color var(--t-hover);
}
.pjx-prompt-pop-x:hover { color: var(--text-1); }
.pjx-prompt-pop-tit {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pjx-prompt-pop-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
/* El prompt tal cual, en su recuadro gris */
.pjx-prompt-pop-text {
  margin-top: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(10, 14, 20, 0.05);
  max-height: 220px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
.pjx-prompt-pop-rot { display: block; font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.pjx-prompt-pop-text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-1); white-space: pre-wrap; }
.pjx-prompt-pop-peu {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
/* EDITANDO DENTRO DEL POP-UP
   El nombre y el prompt se vuelven campos en el mismo sitio donde se leían,
   así que la ventana no cambia de forma al pasar a editar. */
.pjx-prompt-pop-nom {
  flex: 1 1 auto; min-width: 0; height: 32px;
  font-size: 13px; font-weight: 600;
}
.pjx-prompt-pop-text.es-edit {
  padding: 10px 12px 12px;
  max-height: none; overflow: visible;
}
.pjx-prompt-pop-text.es-edit .pmt-textarea-wrap { margin-top: 2px; }
.pjx-prompt-pop-area {
  width: 100%; min-height: 132px; resize: vertical;
  font-size: 13px; line-height: 1.5;
}
/* Compartir y quitar (solo en los tuyos), a la izquierda de la cruz */
.pjx-prompt-pop-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.pjx-prompt-pop-esborrar:hover { color: var(--coral); }
.pjx-prompt-pop-desc { margin-top: 8px; }

/* La tarjeta de crear: el nombre arriba y la cruz en medio, sin pisarse.
   Es un <button>, y un botón centra su contenido por dentro: con flex en
   columna el nombre vuelve arriba del todo. */
.pjx-plant-card.pdoc-entrada {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
.pdoc-entrada .pjx-plant-tit { color: var(--text-1); }
/* El tipo, arriba a la derecha: rectángulo con fillet, nunca cápsula */
.pjx-plant-tipus {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--surface-card);
  font-size: 11px;
  color: var(--text-2);
}
.pjx-plant-cos { display: flex; flex-direction: column; gap: 4px; }
.pjx-plant-tit { font-size: 13px; color: var(--text-1); }
.pjx-plant-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* «Ver más»: texto pequeño y gris al pie, sin caja — es un enlace, no un
   botón más. Al pasar el cursor, Tinta. */
/* El enlace vive dentro de la banda de separación, sin sumar alto propio */
.pjx-plant-peu { display: flex; justify-content: center; margin: -34px 0 11px; }
.pjx-plant > .pjx-plant-peu:last-child { margin-bottom: 0; }
.pjx-veure-mes {
  border: none; background: none; padding: 4px 6px;
  font-family: var(--font); font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover);
}
.pjx-veure-mes:hover { color: var(--text-1); }

/* Verificación en blanco: el usuario escribe su propia instrucción */
.pjx-plant-nova {
  margin-bottom: 26px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: rgba(10, 14, 20, 0.035);
}
.pjx-plant-nova textarea {
  width: 100%;
  border: none; background: none; resize: none;
  font-family: var(--font); font-size: 13.5px; line-height: 1.6;
  color: var(--text-1);
}
.pjx-plant-nova textarea:focus { outline: none; }
.pjx-plant-nova textarea::placeholder { color: var(--text-3); }
.pjx-plant-nova-peu { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Martillo: pulir lo escrito. Sin caja —es una ayuda, no una acción— y
   solo aparece cuando hay texto. */
.pjx-mill {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text-3);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--t-hover);
}
.pjx-mill:hover { color: var(--text-1); }
/* El mismo martillo de la barra del chat, con destellos de IA y más
   cuerpo que el resto de iconos: es lo que convierte una nota suelta en
   una instrucción. */
.pjx-mill .magic-ico { width: 21px; height: 21px; display: block; transform: scaleX(-1); }
.pjx-mill.hidden { display: none; }
/* Pica el icono, no el botón: el botón no está reflejado y el martillo sí,
   así que animarlo a él lo daba la vuelta. */
.pjx-mill.es-fent { color: var(--text-1); }
.pjx-mill.es-fent .magic-ico {
  animation: pjx-mill-pica 0.7s ease-in-out infinite;
  /* Sobre su propio centro: con el pivote en una esquina, el icono se
     desplazaba antes de picar. */
  transform-origin: 50% 50%;
}
/* El icono va reflejado (scaleX -1): el picado tiene que conservarlo o
   el martillo se da la vuelta al animarse. */
@keyframes pjx-mill-pica {
  0%, 100% { transform: scaleX(-1) rotate(0deg); }
  40%      { transform: scaleX(-1) rotate(-18deg); }
  60%      { transform: scaleX(-1) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .pjx-mill.es-fent .magic-ico { animation: none; } }
/* La acción de la barra manda: negra con el texto en blanco. Rectángulo
   con el fillet del sistema —esquina redondeada—, no cápsula. */
.pjx-btn.is-primari {
  background: var(--text-1);
  /* La letra, del color de la tarjeta: con --surface-white, en modo noche
     era #f2f2f4 sobre #f2f2f4 y no se leía nada */
  color: var(--surface-card);
  /* La misma pastilla que los demás botones: antes tenía las esquinas
     menos redondeadas y desentonaba al lado de «Cancelar». */
  border-radius: var(--r-pill);
}
.pjx-btn.is-primari:hover { background: var(--text-1); color: var(--surface-card); opacity: 0.88; }

/* ── Plantillas del despacho: entrada y editor ────────────────────
   La entrada es UNA tarjeta más de la estantería, con la cruz al centro
   como en la tarjeta de crear de arriba. */
.pdoc-entrada-mes {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-1);
  font-size: 15px;
}

/* El asistente ocupa la pantalla: es un trabajo aparte, no un diálogo */
.pdoc {
  position: fixed;
  inset: var(--app-padding);
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: pdf-panel-in var(--t-panel) both;
}
.pdoc.hidden { display: none; }
.pdoc-top {
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdoc-tornar {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover);
}
.pdoc-tornar:hover { color: var(--text-1); }
/* El nombre se edita ahí mismo: no hace falta un campo con marco */
.pdoc-nom {
  border: none; background: none;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--text-1);
  min-width: 0; flex: 1;
}
.pdoc-nom:focus { outline: none; }
.pdoc-nom::placeholder { color: var(--text-3); }
.pdoc-desat { font-size: 12px; color: var(--text-3); }
.pdoc-passos { font-size: 12px; color: var(--text-3); margin-left: 10px; }
.pdoc-cos { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Pasos 1 y 2: una columna centrada, como un formulario ── */
.pdoc-pas { max-width: 760px; margin: 0 auto; padding: 40px var(--sp-6) 48px; }
.pdoc-h { margin: 0 0 6px; font-family: var(--font); font-size: 20px; font-weight: 600; color: var(--text-1); }
.pdoc-sub { margin: 0 0 26px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.pdoc-tria {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 26px;
}
@media (max-width: 900px) { .pdoc-tria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdoc-opt {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  border: none; border-radius: var(--r-lg);
  background: rgba(10, 14, 20, 0.05);
  font-family: var(--font); text-align: left; cursor: pointer;
  transition: background var(--t-hover), box-shadow var(--t-hover);
}
.pdoc-opt:hover { background: rgba(10, 14, 20, 0.09); }
/* El elegido se marca con el trazo, no con color de relleno */
.pdoc-opt.es-on { background: rgba(10, 14, 20, 0.09); box-shadow: inset 0 0 0 1.5px var(--text-1); }
.pdoc-opt-tit { font-size: 13.5px; color: var(--text-1); }
.pdoc-opt-desc { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }

.pdoc-camp { display: block; margin-bottom: 18px; }
.pdoc-lbl { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-2); }
.pdoc-ajuda { font-size: 12px; color: var(--text-3); }
.pdoc-camp textarea, .pdoc-camp select, .pdoc-camp input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-card);
  font-family: var(--font); font-size: 13.5px; line-height: 1.6;
  color: var(--text-1);
  resize: vertical;
}
.pdoc-camp textarea:focus, .pdoc-camp select:focus, .pdoc-camp input:focus { outline: none; border-color: var(--text-3); }
.pdoc-peu { display: flex; gap: 10px; margin-top: 26px; }
.pjx-btn[disabled] { opacity: 0.45; cursor: default; }

/* Paso 2: dos caminos del mismo tamaño */
.pdoc-camins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .pdoc-camins { grid-template-columns: 1fr; } }
.pdoc-cami {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 200px; padding: 28px 20px;
  justify-content: center;
  border: none; border-radius: var(--r-lg);
  background: rgba(10, 14, 20, 0.05);
  font-family: var(--font); text-align: center; cursor: pointer;
  transition: background var(--t-hover), box-shadow var(--t-hover);
}
.pdoc-cami:hover, .pdoc-cami.es-sobre { background: rgba(10, 14, 20, 0.09); }
.pdoc-cami.es-sobre { box-shadow: inset 0 0 0 1.5px var(--text-1); }
.pdoc-cami-ico {
  width: 38px; height: 38px; margin-bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-card);
  color: var(--text-1); font-size: 17px;
}
.pdoc-cami-tit { font-size: 13.5px; color: var(--text-1); }
.pdoc-cami-desc { font-size: 12.5px; color: var(--text-2); }
.pdoc-cami-fitxer { margin-top: 8px; font-size: 12px; color: var(--text-2); }

.pdoc-analisi { margin-top: 22px; padding: 16px 18px; border-radius: var(--r-lg); background: rgba(10, 14, 20, 0.035); }
.pdoc-analisi-tit { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-1); margin-bottom: 8px; }
.pdoc-analisi-llista { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.8; color: var(--text-2); }

/* ── Paso 3: ajustes a la izquierda, folio a la derecha ── */
.pdoc-editor { display: grid; grid-template-columns: 380px 1fr; height: 100%; }
@media (max-width: 1000px) { .pdoc-editor { grid-template-columns: 1fr; } }
.pdoc-ajustos { padding: 26px var(--sp-6) 40px; overflow-y: auto; border-right: 1px solid var(--border); }
.pdoc-grup { margin: 0 0 14px; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text-3); }
.pdoc-grup + * { margin-top: 0; }
.pdoc-ajustos .pdoc-grup:not(:first-child) { margin-top: 28px; }
.pdoc-logo-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pdoc-logo {
  width: 64px; height: 64px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); background: rgba(10, 14, 20, 0.05);
  color: var(--text-3); font-size: 18px; cursor: pointer;
  overflow: hidden;
  transition: background var(--t-hover);
}
.pdoc-logo:hover { background: rgba(10, 14, 20, 0.09); }
.pdoc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdoc-logo-txt { display: flex; flex-direction: column; gap: 2px; }
.pdoc-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pdoc-camp input[type="color"] {
  width: 100%; height: 34px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-card);
  cursor: pointer;
}
.pdoc-camp input[type="range"] { width: 100%; accent-color: var(--text-1); }
.pdoc-seccions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pdoc-sec { display: flex; align-items: center; gap: 6px; }
.pdoc-sec input {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-card);
  font-family: var(--font); font-size: 13px; color: var(--text-1);
}
.pdoc-sec input:focus { outline: none; border-color: var(--text-3); }
.pdoc-sec-x {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text-3);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--t-hover);
}
.pdoc-sec-x:hover { color: var(--coral); }

/* El folio: lo que verá el cliente, con la tipografía y los colores puestos */
.pdoc-previa { padding: 26px var(--sp-6) 40px; overflow-y: auto; background: var(--bg); }
.pdoc-full {
  max-width: 620px; margin: 10px auto 0;
  padding: 48px 54px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  line-height: 1.7;
}
.pdoc-full-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.pdoc-full-logo { max-height: 34px; max-width: 150px; object-fit: contain; }
.pdoc-full-logo.es-buit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 32px; border-radius: var(--r-xs);
  background: rgba(10, 14, 20, 0.05);
  font-size: 11px; color: var(--text-3);
}
.pdoc-full-peu { font-size: 11px; color: var(--text-3); }
.pdoc-full h1 { margin: 0 0 22px; font-size: 1.7em; font-weight: 600; }
.pdoc-full h2 { margin: 20px 0 8px; font-size: 1.1em; font-weight: 600; }
/* Las líneas del cuerpo son un maniquí: se ve el ritmo, no texto inventado */
.pdoc-full-linies { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pdoc-full-linies span { height: 6px; border-radius: 3px; background: rgba(10, 14, 20, 0.08); }
.pdoc-full-linies span:nth-child(2) { width: 96%; }
.pdoc-full-linies span:nth-child(3) { width: 72%; }

/* Sin documentos, el mensaje se centra en el hueco de la pestaña —no
   arriba del todo— y trae el mismo botón de la barra para vincular. */
/* La pestaña pasa a columna para que la lista ocupe el hueco exacto que
   queda bajo la barra: así el centro es el centro de verdad, no una
   altura estimada. */
/* OJO: solo cuando la pestaña está activa. Sin el `.on`, este display
   pisaba el `display:none` de .pjx-body y el panel de Documentos se
   quedaba visible SIEMPRE, apilándose bajo la pestaña abierta. */
#pjx-body-docs.on:has(#pjd-docs-list.es-buit) { display: flex; flex-direction: column; }
#pjd-docs-list.es-buit {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* Miniatura de la tabla llena: enseña a dónde va esto antes de que haya
   nada. Es un dibujo —cabeceras de verdad, contenido en maniquí—, así que
   no finge datos. Se desvanece por abajo para que no compita con el texto. */
/* Como la referencia: la miniatura vive dentro de un marco gris con el
   fillet grande, y la tarjeta blanca asoma por arriba —recortada por
   abajo—, como si fuese una captura enmarcada. */
.pjx-mostra {
  width: min(340px, 100%);
  margin: 0 auto 18px;
  padding: 16px 18px 0;
  border-radius: var(--r-2xl);
  background: rgba(10, 14, 20, 0.04);
  overflow: hidden;
}
.pjx-mostra-caixa {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 14px 30px -18px rgba(18, 18, 23, 0.35);
  overflow: hidden;
  text-align: left;
}
.pjx-mostra-cap, .pjx-mostra-fila {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  height: 30px;
}
.pjx-mostra-cap { border-bottom: 1px solid var(--border); }
.pjx-mostra-fila + .pjx-mostra-fila { border-top: 1px solid var(--border); }
.pjx-mostra-th { font-size: 9.5px; color: var(--text-3); }
.pjx-mostra-doc, .pjx-mostra-estat { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pjx-mostra-ico {
  width: 10px; height: 12px; flex-shrink: 0;
  border-radius: 2px;
  background: var(--coral);
  opacity: 0.75;
}
.pjx-mostra-punt {
  width: 5px; height: 5px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand, #2d6a4f);
  opacity: 0.6;
}
.pjx-mostra-linia { height: 5px; border-radius: 3px; background: rgba(10, 14, 20, 0.10); }
/* En Avisos cada fila empieza por un redondel, no por un archivo */
.pjx-mostra-ico.es-punt { width: 8px; height: 8px; border-radius: 50%; }

/* El vacío de Documentos ya no lleva cuerpo propio: mismo tamaño que el de
   Avisos y el de Proyectos (.ntf-buit-t / .ntf-buit-s en components.css). */
.pjx-buit-accions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pjx-buit-btn { margin-top: 0; }
/* Al pasar el cursor, el botón se enciende: negro pleno y letra blanca */
.pjx-buit-btn:hover {
  background: var(--text-1);
  border-color: var(--text-1);
  color: var(--surface-card);
}
.pjx-buit-btn:hover i { color: var(--surface-card); }

/* Los mismos dibujos que la barra lateral: carpeta, libro y hoja con la
   esquina doblada, con el mismo trazo de la familia de iconos (24, 2, redondo). */
.pjd-pill-wrap .pill-bar .ctx-fico[data-scope="projecte"]::after,
.pjd-pill-wrap .pill-bar .ctx-row[data-scope="projecte"] .ctx-fico::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}
.pjd-pill-wrap .pill-bar .ctx-fico[data-scope="normativa"]::after,
.pjd-pill-wrap .pill-bar .ctx-row[data-scope="normativa"] .ctx-fico::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a9 9 0 0 1 9 0 9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6a9 9 0 0 1 9 0 9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6v13M12 6v13M21 6v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a9 9 0 0 1 9 0 9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6a9 9 0 0 1 9 0 9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6v13M12 6v13M21 6v13'/%3E%3C/svg%3E");
}
.pjd-pill-wrap .pill-bar .ctx-fico[data-scope="documents"]::after,
.pjd-pill-wrap .pill-bar .ctx-row[data-scope="documents"] .ctx-fico::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/svg%3E");
}

/* El texto arranca justo sobre el icono de contexto de abajo: llevaba
   tres píxeles de más y la columna no cuadraba. */
.pjd-pill-wrap .pill-input { padding-left: 5px; }

/* En vista partida la cabecera del chat sube a la banda de la barra de
   arriba (margin-top negativo) y quedaba DEBAJO del rastro, que se comía
   los clics: sus botones parecían bloqueados. La barra deja de recibir
   clics en esa franja; sus propios controles los siguen recibiendo. */
.main-area.is-split .topbar,
.main-area.is-split .topbar-left { pointer-events: none; }
.main-area.is-split .topbar .crumb,
.main-area.is-split .topbar button,
.main-area.is-split .topbar a,
.main-area.is-split .topbar input { pointer-events: auto; }
.pjd-split-chat .pjd-chat-top { position: relative; z-index: 6; }

/* Esconder el chat solo tiene sentido cuando el chat está al lado de la
   tabla: en la pestaña Chat no hay nada que esconder. */
#pjd-amagar { display: none; }
.pjd-split-chat #pjd-amagar { display: inline-flex; }
/* En la vista partida los botones del chat van en la cabecera de su columna,
   a la derecha del chip «Privado»: nueva conversación, historial, compartir
   y esconder el chat. */
.pjd-split-chat .pjd-chat-top { display: flex; align-items: center; }
.pjd-split-chat .pjd-chat-top > .pjd-chat-top-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
/* Compartir la conversación: solo con el chat al lado */
#pjd-compartir-chat { display: none; }
.pjd-split-chat #pjd-compartir-chat { display: inline-flex; }

/* Historial: panel flotante, con la gramática de los desplegables */
.pjd-hist-pop {
  position: fixed;
  z-index: 300;
  min-width: 240px;
  max-width: 320px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-glass);
  animation: dropDownIn 130ms ease both;
}
.pjd-hist-buit { padding: 10px 10px; font-size: 12.5px; color: var(--text-3); }
.pjd-hist-it {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none; border-radius: var(--r);
  background: none;
  font-family: var(--font); font-size: 13px; color: var(--text-2);
  text-align: left; cursor: pointer;
  transition: color var(--t-hover);
}
.pjd-hist-it i { font-size: 15px; color: var(--text-3); transition: color var(--t-hover); }
.pjd-hist-it:hover { color: var(--text-1); }
.pjd-hist-it:hover i { color: var(--text-1); }
.pjd-hist-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Contexto en la barra del chat de proyecto ────────────────────
   Fuera las placas de color y el raíl: en la barra es un icono gris que
   se pone negro al pasar el cursor, y el menú es el mismo blanco con
   sombra suave que el buscador de municipios. */
.pjd-pill-wrap .pill-bar .ctx-pill .ctx-fico.ctx-pill-fico {
  width: 17px; height: 17px;
  border-radius: 0;
  background: none;
}
.pjd-pill-wrap .pill-bar .ctx-pill .ctx-fico.ctx-pill-fico::after {
  inset: 0;
  background-color: var(--text-3);
  transition: background-color var(--t-hover);
}
.pjd-pill-wrap .pill-bar .ctx-pill:hover .ctx-fico.ctx-pill-fico::after { background-color: var(--text-1); }
.pjd-pill-wrap .pill-bar .ctx[data-open="true"] .ctx-fico.ctx-pill-fico::after { background-color: var(--text-1); }

/* El menú, como el desplegable de municipios */
.pjd-pill-wrap .pill-bar .ctx-menu {
  /* Alineado con el icono de la barra: el desplazamiento compensa el
     acolchado del panel y el de la fila. */
  left: -12px;
  width: 232px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-glass);
  animation: dropDownIn 130ms ease both;
}
.pjd-pill-wrap .pill-bar .ctx-rail { display: none; }
.pjd-pill-wrap .pill-bar .ctx-row {
  gap: 9px;
  height: auto;
  padding: 9px 10px;
  border-radius: var(--r);
  transition: background var(--t-hover);
}
.pjd-pill-wrap .pill-bar .ctx-row:hover { background: none; }
.pjd-pill-wrap .pill-bar .ctx-row:hover .ctx-row-lab { color: var(--text-1); }
.pjd-pill-wrap .pill-bar .ctx-row:hover .ctx-fico::after { background-color: var(--text-1); }
.pjd-pill-wrap .pill-bar .ctx-row[aria-checked="true"] { padding-left: 10px; background: none; }
.pjd-pill-wrap .pill-bar .ctx-row .ctx-fico {
  width: 16px; height: 16px;
  border-radius: 0;
  background: none;
}
.pjd-pill-wrap .pill-bar .ctx-row .ctx-fico::after { inset: 0; background-color: var(--text-3); }
.pjd-pill-wrap .pill-bar .ctx-row[aria-checked="true"] .ctx-fico::after { background-color: var(--text-1); }
.pjd-pill-wrap .pill-bar .ctx-row-lab { font-size: 13px; color: var(--text-2); }
.pjd-pill-wrap .pill-bar .ctx-row[aria-checked="true"] .ctx-row-lab { color: var(--text-1); }

/* ── Vincular normativa: preguntas dentro del chat ─────────────────
   Tarjetas con la gramática de las plantillas: gris flojo, fillet del
   sistema, opciones en rectángulos blancos y el elegido con el trazo en
   Tinta. Nada de cápsulas. */
/* Pensando: el mismo degradado en movimiento que el chat principal */
.vnc-pensant {
  display: flex; align-items: center; gap: 7px;
  margin: 6px 0 14px;
  font-size: 12.5px; color: var(--text-3);
}
.vnc-pensant i { font-size: 14px; }
.vnc-pensant span {
  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;
}
@media (prefers-reduced-motion: reduce) {
  .vnc-pensant span { animation: none; color: var(--text-2); background: none; }
}
/* Las respuestas, dentro de un desplegable: la pastilla las recoge con
   una animación de altura (grid-template-rows, nunca height). */
/* Todo dentro del MISMO rectángulo: cabecera y respuestas comparten la
   tarjeta blanca; al plegar, el cuerpo se recoge dentro de ella. */
.vnc-apunts {
  margin: 6px 0 14px;
  max-width: 560px;
  border-radius: var(--r);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
  transition: box-shadow var(--t-hover);
}
.vnc-apunts:hover { box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 8px 18px -10px rgba(18, 18, 23, 0.34); }
.vnc-apunts-cap {
  display: flex; width: 100%; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 10px;
  border: none;
  background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover);
}
/* Rótulo en Tinta; chevron y contador en gris, y los dos a Tinta al pasar
   el cursor. Mismo trato en todos los desplegables del chat. */
.vnc-apunts-lbl { color: var(--text-1); }
.vnc-apunts-cap i,
.vnc-apunts-n { color: var(--text-3); transition: color var(--t-hover); }
.vnc-apunts-cap:hover,
.vnc-apunts-cap:hover i,
.vnc-apunts-cap:hover .vnc-apunts-n { color: var(--text-1); }
.vnc-apunts-cap i { font-size: 14px; transition: transform var(--t-hover); }
.vnc-apunts.es-plegat .vnc-apunts-cap i { transform: rotate(-90deg); }
.vnc-apunts-n { margin-left: auto; color: var(--text-3); }
/* El cuerpo se pliega hacia la pastilla: alto a cero y un empujón arriba */
.vnc-apunts-cos {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.vnc-apunts.es-plegat .vnc-apunts-cos { grid-template-rows: 0fr; }
.vnc-apunts-inner {
  overflow: hidden;
  min-height: 0;
  padding: 2px 12px 12px;
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Plegado del todo: sin el acolchado superior queda un dedo de aire que
   delata que ahí sigue habiendo algo. */
.vnc-apunts.es-plegat .vnc-apunts-inner {
  opacity: 0;
  transform: translateY(-6px);
  padding-top: 0;
  padding-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vnc-apunts-cos, .vnc-apunts-inner { transition: none; }
}
/* El trabajo se piensa en el hilo, no en el panel de abajo */
.vnc-treball { margin: 4px 0 14px; }

/* Cabecera de tarea, como en el chat: destello + qué está pasando */
.vnc-feta {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px;
  font-size: 12.5px; color: var(--text-2);
}
.vnc-feta i { font-size: 14px; color: var(--text-1); }
.vnc-feta.is-fent span {
  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;
}
@media (prefers-reduced-motion: reduce) { .vnc-feta.is-fent span { animation: none; color: var(--text-2); background: none; } }
/* El resultado vive en el hilo, como una respuesta más */
.vnc-resultat { margin: 6px 0 14px; max-width: 560px; }
/* El aviso cede sitio antes que los botones: se recorta él */
.vnc-peu-nota {
  margin-right: auto; font-size: 12px; color: var(--text-3);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Los pasos, dentro de la tarjeta: sin el carril del chat, solo el círculo */
.vnc-passos .loading-pas { padding-bottom: 12px; }
.vnc-passos .loading-pas:last-child { padding-bottom: 0; }
/* El muelle: la pregunta sube desde la barra de escribir y se queda
   pegada a ella, no en medio de la conversación. */
.vnc-dock {
  width: min(100%, 720px);
  margin: 0 auto 8px;
  animation: vnc-dock-in 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.vnc-dock.hidden { display: none; }
@keyframes vnc-dock-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .vnc-dock { animation: none; } }
/* Tarjeta como la referencia: cabecera gris con el rótulo y la paginación,
   cuerpo blanco encajado y, al pie, Omitir / Continuar a la derecha. */
.vnc-card {
  border-radius: var(--r-xl);
  background: rgba(10, 14, 20, 0.05);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.04), 0 18px 36px -20px rgba(18, 18, 23, 0.3);
}
.vnc-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 14px;
  font-size: 12px; color: var(--text-3);
}
/* El rótulo se recorta; la paginación va en una sola línea, nunca parte */
.vnc-cap-t {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vnc-cap-t i { font-size: 14px; }
.vnc-cap-sub { color: var(--text-3); opacity: 0.75; }
.vnc-nav {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
}
.vnc-cap-n { padding: 0 2px; font-variant-numeric: tabular-nums; }
.vnc-fl {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-3);
  font-size: 14px; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.vnc-fl:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.05); }
/* Regla de oro de las cruces: nunca llevan relleno; solo pasan a Tinta */
#vnc-tanca:hover, #vnc-tanca2:hover { background: none; }
.vnc-fl[disabled] { opacity: 0.3; cursor: default; }
.vnc-fl[disabled]:hover { color: var(--text-3); background: none; }
.vnc-cos {
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface-card);
  /* De margen a margen, como la referencia: el gris solo asoma por arriba
     (la cabecera) y por abajo (los botones), no por los lados. */
  margin: 0;
}
.vnc-cos-sol { padding: 22px 16px; }
.vnc-q { margin-bottom: 10px; font-size: 13px; line-height: 1.5; color: var(--text-1); }
.vnc-ajuda { margin-bottom: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* Opciones: filas de ancho completo con su círculo, no pastillas. Al pasar
   el cursor se sombrea la fila entera. */
.vnc-opts { display: flex; flex-direction: column; gap: 2px; }
.vnc-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 6px 9px;
  border: none; border-radius: var(--r);
  background: none;
  font-family: var(--font); font-size: 13px; color: var(--text-1);
  text-align: left; cursor: pointer;
  transition: background var(--t-hover);
}
.vnc-opt:hover { background: rgba(10, 14, 20, 0.05); }
.vnc-radio {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1.5px solid var(--border-2);
  border-radius: 50%;
  transition: border-color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover);
}
.vnc-opt.es-on .vnc-radio {
  border-color: var(--text-1);
  background: var(--text-1);
  box-shadow: inset 0 0 0 2.5px var(--surface-card);
}
.vnc-opt-t { min-width: 0; }
/* «Otra cosa…», en gris flojo mientras no se usa */
.vnc-opt-altre .vnc-opt-t { color: var(--text-3); }
.vnc-opt-altre.es-on .vnc-opt-t { color: var(--text-1); }
/* De extremo a extremo del cuerpo, no sangrado bajo la opción */
.vnc-altre-camp {
  width: 100%;
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-card);
  font-family: var(--font); font-size: 13px; color: var(--text-1);
}
.vnc-altre-camp:focus { outline: none; border-color: var(--text-3); }
.vnc-altre-camp.hidden { display: none; }

/* Pie: los dos botones a la derecha, como en la referencia */
.vnc-peu {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 9px 10px 10px;
}
.vnc-b {
  height: 30px; padding: 0 16px;
  white-space: nowrap;
  flex-shrink: 0;
  border: none; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 12.5px;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), opacity var(--t-hover);
}
.vnc-b-fluix { background: var(--surface-card); color: var(--text-2); }
.vnc-b-fluix:hover { color: var(--text-1); }
/* La letra, del color de la tarjeta: con --surface-white, en modo noche era
   #f2f2f4 sobre #f2f2f4. Desactivado conserva la suya, que se lee sobre el gris. */
.vnc-b-fort { background: var(--text-1); color: var(--surface-card); }
.vnc-b-fort:hover { opacity: 0.88; }
.vnc-b-fort[disabled] { background: rgba(10, 14, 20, 0.28); color: var(--surface-white); cursor: default; }
.vnc-b-fort[disabled]:hover { opacity: 1; }

/* Lo encontrado: filas de documento con su icono, como la referencia */
.vnc-llista { max-height: 260px; overflow-y: auto; padding: 8px; }
.vnc-doc {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-radius: var(--r);
  transition: background var(--t-hover);
}
.vnc-doc:hover { background: rgba(10, 14, 20, 0.035); }
/* El icono del archivo va suelto, sin placa gris: ya trae su propio color */
.vnc-doc-ico {
  width: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.vnc-doc-ico .ficon { width: 18px; height: 18px; }
.vnc-doc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* El nombre, una línea; la descripción, dos como mucho y luego puntos
   suspensivos: así todas las filas pesan lo mismo. */
.vnc-doc-nom {
  font-size: 12.5px; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vnc-doc-meta {
  font-size: 11.5px; color: var(--text-3); line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Constancia en el hilo de cada respuesta: una línea discreta */
/* Lo respondido queda en el hilo como una línea, sin caja: la pregunta en
   Tinta y la respuesta en gris, pegadas y con poco aire. */
.vnc-apunt {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 0 0 6px;
  font-size: 12.5px; line-height: 1.5;
}
.vnc-apunt-q { color: var(--text-1); margin-right: 0; }
.vnc-apunt .vnc-chip {
  padding: 0; border: none; background: none; border-radius: 0;
  color: var(--text-3); font-size: 12.5px;
}
/* (El bloque anterior de opciones en pastilla se ha retirado: ahora son
   filas con círculo, definidas más arriba, y sus reglas viejas pisaban el
   cuerpo de letra.) */
.vnc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vnc-chip {
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--surface-card);
  border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2);
}

/* ── Columna "Documento" congelada ────────────────────────────────
   Al desplazar la tabla de documentos hacia la derecha, la casilla y el
   nombre del documento se quedan fijos (sticky) para que siempre se sepa
   de qué fila se trata. Necesitan fondo opaco: sin él, las celdas que
   pasan por debajo se transparentarían. En hover, el fondo de las dos
   celdas fijas replica el velo de la fila pero en versión opaca. */
.pjx-docs-thead > span:nth-child(-n + 2),
.pjd-doc > span:nth-child(-n + 2) {
  position: sticky;
  z-index: 2;
  background: var(--surface-card);
}
.pjx-docs-thead > span:first-child,
.pjd-doc > span:first-child { left: var(--sp-6); }
/* 32px = columna de la casilla (22px) + hueco de la rejilla (10px) */
.pjx-docs-thead > span:nth-child(2),
.pjd-doc > span:nth-child(2) { left: calc(var(--sp-6) + 32px); }
/* La franja del padding izquierdo (a sangre) también hay que taparla */
.pjx-docs-thead > span:first-child::before,
.pjd-doc > span:first-child::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-6));
  top: 0;
  bottom: 0;
  width: var(--sp-6);
  background: inherit;
}
.pjd-doc:hover > span:nth-child(-n + 2) {
  background: color-mix(in srgb, rgb(10, 14, 20) 3.5%, var(--surface-card));
}
/* Lo mismo con la fila marcada: las dos celdas congeladas llevan fondo
   propio (si no, se transparentarían), así que el gris de seleccionada
   hay que dárselo también o la columna del documento se quedaba blanca. */
.pjd-doc.is-sel > span:nth-child(-n + 2) {
  background: color-mix(in srgb, rgb(10, 14, 20) 4%, var(--surface-card));
}
.pjd-doc.is-sel:hover > span:nth-child(-n + 2) {
  background: color-mix(in srgb, rgb(10, 14, 20) 7.5%, var(--surface-card));
}
/* Y al pasar el cursor por una fila marcada, el resto de la fila también
   se oscurece un punto más, para que el realce no se pierda. */
.pjd-doc.is-sel:hover { background: rgba(10, 14, 20, 0.075); }
/* El hueco de la rejilla ENTRE la casilla y el nombre también es zona
   congelada: sin taparlo, el contenido que se desliza por debajo asoma
   por esa rendija de 10px (se veían letras pegadas a "Documento"). */
.pjx-docs-thead > span:first-child::after,
.pjd-doc > span:first-child::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 10px;
  background: inherit;
}
/* Borde de la zona congelada: solo cuando la tabla está desplazada
   (la clase la pone el JS). Tapa la mitad del hueco pegada al nombre
   —para que nada asome entre el texto y la línea—, dibuja la línea en
   el centro del hueco y proyecta una sombra suave sobre lo que se mueve. */
#pjd-docs-list.is-desplacat .pjx-docs-thead > span:nth-child(2)::before,
#pjd-docs-list.is-desplacat .pjd-doc > span:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -6px;
  width: 6px;
  background: inherit;
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 12px -6px rgba(10, 14, 20, 0.12);
}

/* ── Barras de scroll: red de seguridad global ──
   Todas las barras del producto usan el pulgar gris flojo (--scroll).
   Los contenedores con estilo propio (más específicos) no se ven afectados;
   esto solo caza los que quedaban con la barra nativa oscura del sistema,
   p. ej. el scroll horizontal de la tabla de documentos (#pjd-docs-list),
   la de avisos (.ntf-scroll) o la de verificación (#pjx-verif-taula). */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }
*::-webkit-scrollbar-corner { background: transparent; }
.pjx-scope::-webkit-scrollbar { display: none; }

/* Toda la aplicación un escalón más fina (6 sep 2026): el texto general
   baja de 500 a 400, el saludo y las negritas de 700 a 600, y el subtítulo
   del chat de 400 a 300. La fuente tiene 300/400/500-600/700: son los
   pasos reales. */
/* +50 sobre lo anterior (pedido después): 450 / 650 / 350. La fuente no
   tiene esos pesos: el 450 se pinta con el 500, el 650 con el 700 y el
   350 con el 300. */
body, body *, body *::before, body *::after { font-weight: 450 !important; }
.hero-greeting, .hero-greeting * { font-weight: 650 !important; }   /* el nombre incluido */
.hero-title { font-weight: 350 !important; }
.message.assistant .bubble strong,
.message.assistant .bubble b,
.pjd-msg strong, .pjd-msg b,
/* La explicación del visor se redacta como el chat, así que su negrita se
   ve igual. Sin esto, el peso global de 450 se la comía y lo importante se
   leía como el resto del párrafo. */
.pdf-explicar-pop-body strong,
.pdf-explicar-pop-body b { font-weight: 650 !important; }
/* Lo que casa con lo buscado en el menú de la @ y dentro de un mensaje */
.xeq-menu .norm-hl, .xeq-cos .norm-hl { font-weight: 650 !important; }

/* El texto del chat (pregunta y respuesta) baja del negro pleno al 90%:
   así las negritas a 700 —que siguen en Tinta plena— se distinguen del
   texto normal a 500. Con color-mix respeta también el tema oscuro. */
.message.user .bubble,
.message.assistant .bubble { color: color-mix(in srgb, var(--text-1) 80%, transparent); }
.message.assistant .bubble strong,
.message.assistant .bubble b { color: var(--text-1); }

/* Los chats privados (proyecto y visor) siguen la misma regla que el
   principal: texto al 80% de Tinta y las negritas a plena Tinta. */
.pjd-msg-user .pjd-msg-body,
.pjd-msg-bot .pjd-msg-body { color: color-mix(in srgb, var(--text-1) 80%, transparent); }
.pjd-msg-bot .pjd-msg-body strong { color: var(--text-1); }
.pdf-assist-msgs .pdf-assist-body { color: color-mix(in srgb, var(--text-1) 80%, transparent); }
.pdf-assist-msgs .pdf-assist-body strong { color: var(--text-1); }

/* ── Menú de exportar (bajo cada respuesta) ───────────────────────
   Como la referencia: ámbito (mensaje / conversación), interruptor de
   citas y las dos salidas — Word o correo. */
.export-pop {
  position: fixed;
  /* Por encima de los paneles: la ficha de la parcela va a 950 y el visor
     hasta 300, y con 300 el pop-up se abría DETRÁS y no se veía. */
  z-index: 5500;
  min-width: 260px;
  background: var(--surface-card);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
}
/* Etiqueta de sección: misma tipografía que las opciones (13px/500),
   solo que en gris secundario, con aire por arriba */
.export-lab {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  padding: 12px 12px 6px;
}
.export-pop > .export-lab:first-child { padding-top: 6px; }
/* La extensión del archivo, detrás del nombre: en minúscula y en gris, que
   es un detalle, no el titular */
.export-ext { font-size: 12px; color: var(--text-3); }
/* Pegada al nombre, sin hueco: se lee «En Cad.dwg», como un nombre de
   archivo. El -10 cancela el hueco de 10 que reparte la fila. */
.export-opt .export-ext { margin-left: -10px; }
/* El icono de Outlook, el mismo que el correo del chat */
.export-ic-mail {
  width: 15px; height: 15px; flex-shrink: 0;
  background: url("icons/outlook.svg?v=1") no-repeat center / contain;
}
.export-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-hover);
}
.export-opt:hover:not(:disabled) { background: rgba(10, 14, 20, 0.05); }
/* Todavía no se puede: se ve, no se pulsa, y una pastilla gris lo dice */
.export-opt:disabled { cursor: default; color: var(--text-3); }
.export-opt:disabled .ficon { opacity: .45; }
.export-aviat {
  margin-left: auto;
  padding: 2px 8px; border-radius: var(--r-sm);
  background: rgba(10, 14, 20, 0.05);
  font-size: 12px; font-weight: 400; color: var(--text-3); white-space: nowrap;
}
.export-opt .ti { font-size: 15px; color: var(--text-3); }
.export-opt .ficon { font-size: 15px; }
.export-opt .export-check { margin-left: auto; opacity: 0; font-size: 14px; color: var(--text-1); }
.export-opt.is-sel .export-check { opacity: 1; }
.export-sep { height: 1px; background: var(--border); margin: 8px -12px; }
/* «Enviar por correo» se despliega y propone qué mandar: el resumen o la
   respuesta completa. Las dos opciones, sangradas a la altura del texto
   (12 de margen + 15 del icono + 10 de hueco), con su pista debajo. */
.export-opt .export-desplega { margin-left: auto; font-size: 14px; transition: transform var(--t-hover); }
.export-opt[aria-expanded="true"] .export-desplega { transform: rotate(180deg); }
/* (con nombre propio: .export-sub ya es el subtítulo de otra ventana, con
   18 px de margen abajo que aquí sobraban) */
.export-correu-ops { display: flex; flex-direction: column; }
.export-correu-ops[hidden] { display: none; }
.export-subopt { padding-left: 37px; }
.export-subtxt { display: flex; flex-direction: column; gap: 2px; }
.export-pista { font-size: 12px; font-weight: 400; color: var(--text-3); }
/* Interruptor de citas: cápsula con bolita, verde cuando está encendido */
.export-switch {
  margin-left: auto;
  width: 30px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--border-2);
  position: relative;
  flex-shrink: 0;
  transition: background var(--t-hover);
}
.export-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.export-switch.is-on { background: var(--accent); }
.export-switch.is-on::after { transform: translateX(12px); }

/* ── Selector de contexto del chat de proyecto ────────────────────
   Diseño del usuario (1d «guía lateral»): pastilla con «Contexto», bolita
   de color y nombre; el panel se abre encima con un RAÍL negro a la
   izquierda que se desliza hasta la fila elegida (la fila activa se
   sangra y su texto pasa a Tinta). Colores del mock, aprobados;
   tipografía e iconos, los del sistema. */
.pjx-scope-ctx, .ctx {
  overflow: visible;
  /* Paleta como la referencia: tonos apagados, glifo en blanco */
  --ink-proj: #c97d53;   /* terracota */
  --ink-norm: #9cbf8e;   /* salvia */
  --ink-docs: #7e9cc0;   /* azul empolvado */
  --ctx-fila: 42px;
  --ctx-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ico-proj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.2A1.9 1.9 0 0 1 4.9 4.3h4.2a1.9 1.9 0 0 1 1.4.6l1.2 1.4h7.4A1.9 1.9 0 0 1 21 8.2v.5H3z'/%3E%3Cpath fill-rule='evenodd' d='M3 10h18v7.8a1.9 1.9 0 0 1-1.9 1.9H4.9A1.9 1.9 0 0 1 3 17.8zm4.2 3.1h9.6v1.5H7.2z'/%3E%3C/svg%3E");
  --ico-norm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8.6' y='3' width='6.8' height='2.4' rx='1.2'/%3E%3Crect x='6.4' y='6.6' width='11.2' height='2.7' rx='1.35'/%3E%3Cpath d='M5.2 10.9h13.6a1.5 1.5 0 0 1 1.45 1.9l-1.7 6A2.3 2.3 0 0 1 16.34 20.5H7.66a2.3 2.3 0 0 1-2.21-1.7l-1.7-6a1.5 1.5 0 0 1 1.45-1.9z'/%3E%3C/svg%3E");
  --ico-docs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 4.6a1.8 1.8 0 0 1 1.8 1.6c.2 1.4 1.6 2.6 3.7 2.6s3.5-1.2 3.7-2.6a1.8 1.8 0 0 1 1.8-1.6c1.6 0 2.7 1.4 2.5 3l-1 8.4c-.3 2.1-2 3.6-4.1 3.6H9.1c-2.1 0-3.8-1.5-4.1-3.6L4 7.6c-.2-1.6.9-3 2.5-3z'/%3E%3C/svg%3E");
}
.ctx { position: relative; align-self: flex-start; }

/* Dentro de la barra del chat de proyecto: en corto —placa, nombre y
   flecha—, sin cápsula ni sombra, como los chips de la barra principal. */
.pill-bar .ctx { align-self: center; flex-shrink: 0; }
.pill-bar .ctx-pill {
  height: 30px; padding: 0 6px 0 5px; gap: 6px;
  border: none; background: none; box-shadow: none;
  border-radius: var(--r-sm);
  transition: background var(--t-hover);
}
/* Sin recuadro al pasar el cursor: solo el icono pasa de gris a negro */
.pill-bar .ctx-pill:hover { background: none; box-shadow: none; }
.pill-bar .ctx-fico.ctx-pill-fico { width: 18px; height: 18px; border-radius: 5px; }
.pill-bar .ctx-fico.ctx-pill-fico::after { inset: 3.5px; }
.pill-bar .ctx-nom { font-size: 12.5px; }
.pill-bar .ctx-caret { font-size: 13px; color: var(--text-3); }

.ctx-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 39px; padding: 0 12px 0 13px;
  border: 1px solid rgba(10, 14, 20, 0.05);
  border-radius: var(--r-pill);
  background: var(--surface-card);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 8px 20px -14px rgba(18, 18, 23, 0.35);
  font-family: var(--font);
  transition: box-shadow 0.2s ease;
}
.ctx-pill:hover { box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 10px 22px -12px rgba(18, 18, 23, 0.4); }
.ctx-pill:focus-visible { outline: 2px solid var(--ink-proj); outline-offset: 2px; }
.ctx-target { font-size: 14px; color: var(--text-2); }
.ctx-muted { font-size: 13px; font-weight: 450 !important; color: var(--text-2); }
/* En la pastilla, la placa del icono en pequeño (sustituye a la bolita) */
.ctx-fico.ctx-pill-fico { width: 20px; height: 20px; border-radius: 6px; }
.ctx-fico.ctx-pill-fico::after { inset: 4px; }
/* Mismo gris que el placeholder de la barra (Texto 42): la pastilla
   entera habla en un solo tono */
.ctx-nom { font-size: 13px; font-weight: 450 !important; color: var(--text-3); }
.ctx-caret { font-size: 13px; color: var(--text-3); transition: transform 0.26s var(--ctx-ease); }
.ctx[data-open="true"] .ctx-caret { transform: rotate(180deg); }

/* Panel con raíl */
.ctx-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 280px;
  padding: 8px 8px 8px 4px;
  border-radius: 17px;
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 22px 44px -16px rgba(18, 18, 23, 0.26);
  animation: ctx-pop-in 0.22s var(--ctx-ease) both;
  z-index: 120;
}
.ctx[data-open="false"] .ctx-menu { display: none; }
.ctx-rail {
  position: absolute; left: 8px; top: 8px;
  width: 2.5px; height: var(--ctx-fila);
  border-radius: 2px;
  background: var(--text-1);
  transition: transform 0.34s var(--ctx-ease);
  animation: ctx-rail-in 0.3s ease 0.05s both;
}
.ctx-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; height: var(--ctx-fila);
  padding-left: 14px; padding-right: 10px;
  border: 0; background: transparent;
  cursor: pointer; text-align: left;
  font-family: var(--font);
  transition: padding-left 0.3s var(--ctx-ease);
}
.ctx-row[aria-checked="true"] { padding-left: 18px; }
.ctx-row-lab { font-size: 13px; font-weight: 450 !important; color: var(--text-2); transition: color 0.2s ease; }
.ctx-row[aria-checked="true"] .ctx-row-lab { color: var(--text-1); }
.ctx-row:focus-visible { outline: 2px solid var(--text-1); outline-offset: -2px; border-radius: var(--r); }
/* Placa del icono: cuadradito con fillet, tinte suave y glifo relleno del
   color del ámbito (máscara SVG: la fuente de iconos no trae rellenos) */
.ctx-fico {
  width: 25px; height: 25px; border-radius: 7px;
  position: relative; flex-shrink: 0;
}
.ctx-fico::after {
  content: "";
  position: absolute; inset: 5px;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
}
/* Como la referencia: la placa lleva el color a plena opacidad y el glifo
   va relleno en un gris fuerte, casi negro */
.ctx-row[data-scope="projecte"] .ctx-fico,  .ctx-fico[data-scope="projecte"]  { background: var(--ink-proj); }
.ctx-row[data-scope="projecte"] .ctx-fico::after,  .ctx-fico[data-scope="projecte"]::after  { mask-image: var(--ico-proj); -webkit-mask-image: var(--ico-proj); }
.ctx-row[data-scope="normativa"] .ctx-fico, .ctx-fico[data-scope="normativa"] { background: var(--ink-norm); }
.ctx-row[data-scope="normativa"] .ctx-fico::after, .ctx-fico[data-scope="normativa"]::after { mask-image: var(--ico-norm); -webkit-mask-image: var(--ico-norm); }
.ctx-row[data-scope="documents"] .ctx-fico, .ctx-fico[data-scope="documents"] { background: var(--ink-docs); }
.ctx-row[data-scope="documents"] .ctx-fico::after, .ctx-fico[data-scope="documents"]::after { mask-image: var(--ico-docs); -webkit-mask-image: var(--ico-docs); }
.ctx-fico::after { background-color: #ffffff; }

@keyframes ctx-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}
/* Solo opacidad: si la entrada animara el transform, con `both` se
   quedaría aplicada para siempre y PISARÍA el translateY del raíl (el
   deslizamiento moría; fallo latente del mock). */
@keyframes ctx-rail-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ctx-menu, .ctx-rail { animation: none; }
  .ctx-rail, .ctx-row { transition: none; }
}

/* El texto de la barra del chat de proyecto acompaña al selector: 450 */
.pjd-pill-wrap .pill-input { font-weight: 450 !important; }
/* Mismo peso que el texto de ayuda del chat principal: en 450 se veía más
   fino y no cuadraban los dos. */
.pjd-pill-wrap .pill-input::placeholder { font-weight: 500 !important; }


/* ── Chat de proyecto: conversación a la izquierda, panel a la derecha ──
   El panel lleva el historial en vertical y los recordatorios (avisos sin
   leer por prioridad). En la vista partida de Documentos no cabe: fuera. */
.pjx-body-chat.on { flex-direction: row; }
.pjd-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pjd-chat-aside {
  width: 264px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pjd-chat-aside { display: none; }
.pjx-body-chat.amb-historial .pjd-chat-aside { display: flex; }
.pjd-split-chat .pjd-chat-aside { display: none !important; }
.pjd-aside-cap { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 4px; }
.pjd-aside-cap:first-child { margin-top: 0; }
.pjd-aside-lab {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--text-3);
}
/* Historial en vertical: misma píldora, a lo ancho. TODO el panel cae en
   la misma vertical: etiquetas, conversaciones y recordatorios comparten
   el mismo borde izquierdo (8px de padding en cada fila). */
.pjd-chat-aside .pjd-chat-convs { display: flex; flex-direction: column; gap: 2px; overflow: visible; }
.pjd-chat-aside .pjd-conv { width: 100%; justify-content: flex-start; max-width: none; padding: 0 8px; }
.pjd-aside-cap { padding: 0 8px; }
.pjd-aside-cap .pjd-newconv { margin-right: -8px; }
/* Recordatorios: barras de prioridad + título en una línea */
.pjd-recorda { display: flex; flex-direction: column; gap: 2px; }
.pjd-rec {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  border: none; background: none;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-hover);
}
.pjd-rec:hover { background: rgba(10, 14, 20, 0.05); }
.pjd-rec .ntf-prio { align-self: center; margin-top: 0; }
.pjd-rec-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjd-rec-buit { font-size: 12px; color: var(--text-3); padding: 6px 8px; }
@media (max-width: 900px) { .pjd-chat-aside { display: none; } }

/* ── Cabecera del chat de proyecto (como la referencia) ──
   Arriba del todo, con aire generoso. A la izquierda, solo el chip de
   Privado (candado sobre relleno gris del sistema); a la derecha, los
   iconos pelados que se vuelven Tinta al pasar el cursor, sin relleno. */
.pjd-chat-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--sp-6) 0;
  flex-shrink: 0;
}
.pjd-priv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--r);
  border: 1px solid var(--border-2);
  background: rgba(10, 14, 20, 0.06);
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
/* Candado SÓLIDO, sin el círculo del ojo: silueta rellena vía máscara
   (la fuente de iconos solo trae el contorno) en gris pleno */
.pjd-priv-ico {
  width: 12px; height: 12px; flex-shrink: 0;
  background-color: var(--text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.5 10H7V7a5 5 0 0 1 10 0v3h.5A2.5 2.5 0 0 1 20 12.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-6A2.5 2.5 0 0 1 6.5 10zm2.5 0h6V7a3 3 0 0 0-6 0z'/%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 fill-rule='evenodd' d='M6.5 10H7V7a5 5 0 0 1 10 0v3h.5A2.5 2.5 0 0 1 20 12.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-6A2.5 2.5 0 0 1 6.5 10zm2.5 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* «Público»: dos personas macizas en vez del candado (el mismo dibujo que
   el chip del saludo del Agente) */
.pjd-priv-ico.es-public {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 19.5a6.5 6.5 0 0 1 13 0z'/%3E%3Ccircle cx='16.5' cy='9' r='3'/%3E%3Cpath d='M16.7 19.5H22A5.5 5.5 0 0 0 14.69 14.31A7.7 7.7 0 0 1 16.7 19.5z'/%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%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 19.5a6.5 6.5 0 0 1 13 0z'/%3E%3Ccircle cx='16.5' cy='9' r='3'/%3E%3Cpath d='M16.7 19.5H22A5.5 5.5 0 0 0 14.69 14.31A7.7 7.7 0 0 1 16.7 19.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pjd-chat-top-acts { display: inline-flex; gap: 6px; }
.pjd-top-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 0;
  background: none; color: var(--text-3);
  font-size: 16px; cursor: pointer;
  transition: color var(--t-hover);
}
.pjd-top-btn:hover { color: var(--text-1); }
.pjd-chat-top-left { display: inline-flex; align-items: center; gap: 6px; }
/* Campana de avisos con la bolita roja arriba a la derecha, como la referencia */
.pjd-avisos-btn { position: relative; overflow: visible; }
.pjd-avisos-n {
  position: absolute; top: 2px; right: 1px;
  min-width: 13px; height: 13px; padding: 0 3px;   /* un punto más pequeña, como la referencia */
  border-radius: 999px;
  background: var(--badge-alert); color: #fff;
  font-size: 8.5px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bg);   /* aro del fondo, como en la referencia */
  pointer-events: none;
}
.pjd-avisos-n:empty { display: none; }

/* ── Desplegable de avisos (campana del Agente) ──────────────────
   Tarjeta blanca sin trazo y con sombra corta, como los desplegables
   del chat. Cabecera con filtros; filas agrupadas por día. */
.avis-pop {
  position: fixed; z-index: 4700;
  /* 420: con «Hoy» y el icono de seleccionar en la cabecera, a 400 cabía
     justo «Todos los proyectos», y en Windows la letra es algo más ancha */
  width: 420px; max-width: calc(100vw - 24px);
  max-height: min(70vh, 640px);
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(10, 14, 20, 0.12), 0 1px 3px rgba(10, 14, 20, 0.06);
  overflow: visible;   /* el menú de proyectos asoma por debajo de la cabecera */
}
.avis-pop.hidden { display: none; }
.avis-pop-cap {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  padding: 10px 10px 8px; flex-shrink: 0;
}
/* Menú de proyectos: tarjeta blanca con sombra corta, como los desplegables del chat */
.avis-pop-menu {
  position: absolute; top: calc(100% - 2px); z-index: 2;
  min-width: 240px; max-width: 320px; max-height: 280px; overflow-y: auto;
  padding: 6px;
  background: var(--surface-card); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(10, 14, 20, 0.12), 0 1px 3px rgba(10, 14, 20, 0.06);
}
.avis-pop-menu.hidden { display: none; }
.avis-pop-menu-fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 32px; padding: 0 10px; border: none; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: 13px; color: var(--text-menu);
  text-align: left; cursor: pointer; transition: color var(--t-hover), background var(--t-hover);
}
.avis-pop-menu-fila span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avis-pop-menu-fila .ti { font-size: 15px; width: 16px; text-align: center; }
.avis-pop-menu-fila .pj-tipus-ic { width: 15px; height: 15px; }
.avis-pop-menu-fila:hover { color: var(--text-1); }
.avis-pop-menu-fila.es-actiu { color: var(--text-1); background: var(--sel-fill); }
/* ── Historial del agente: tres puntos, flecha «ver todos» y panel ── */
.pjd-hist-fila { display: flex; align-items: center; cursor: pointer; min-width: 0; }
.pjd-hero-baix .home-col { min-width: 0; }
.pjd-hero-baix .history-item-content, .pjd-hero-baix .home-doc-info { min-width: 0; }
.pjd-hero-baix .history-item-title, .pjd-hero-baix .home-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* El trozo del chat donde cae la búsqueda, debajo del título */
.pjd-hist-fila .search-frag { display: block; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pjd-hist-fila.te-frag .history-item-content { min-width: 0; }
.pjd-hist-fav { margin-left: auto; }
.pjd-hist-fav + .pjd-hist-kebab { margin-left: 2px; }
/* En reposo, los tres puntos (y la estrella si no es favorito) no ocupan
   sitio: estrella e iniciales quedan a la derecha del todo. Al pasar el
   cursor aparecen y empujan lo demás a la izquierda. */
.pjd-hist-fila .pjd-hist-kebab, .pjd-hist-fila .pjd-hist-fav:not(.es-fav) { display: none; }
.pjd-hist-fila:hover .pjd-hist-kebab, .pjd-hist-fila:hover .pjd-hist-fav { display: flex; opacity: 1; pointer-events: auto; }
/* La estrella de un favorito se queda siempre a la vista, rellena en gris
   fuerte: así se puede volver a pulsar para quitarlo */
.pjd-hist-fav.es-fav, .pjd-hist-fila .pjd-hist-fav.es-fav { opacity: 1; pointer-events: auto; color: var(--text-2); }
.pjd-hist-fav.es-fav:hover { color: var(--text-1); }
.pjd-hist-fav .pjd-star-ple { display: block; width: 14px; height: 14px; }
/* LA FLECHA DE «VER TODOS»
   Va al extremo derecho del rótulo y fuera del flujo: así el rótulo mide lo
   mismo que el de al lado y las dos tarjetas quedan a la misma altura.
   Los 10 px no son un capricho: el rótulo lleva 14 de margen a los lados, y
   como el botón es más ancho que su dibujo (22 contra 15), dejándolo a 10 el
   DIBUJO cae en esa misma raya de 14 que el título de la izquierda. A ras del
   borde quedaba pegada al canto de la tarjeta. */
.pjd-hist-label { position: relative; }
.pjd-hist-tots {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 15px; opacity: 0; cursor: pointer;
  transition: opacity var(--t-hover), color var(--t-hover);
}
/* Sale al pasar el cursor por la tarjeta, la del Agente y la del chat
   privado: las dos son `.home-col`. */
.home-col:hover .pjd-hist-tots, .pjd-hist-tots:focus-visible { opacity: 1; }
.pjd-hist-tots:hover { color: var(--text-1); }
/* Menú del chat: tarjeta blanca sin trazo, sombra corta */
.pjd-menu { border: none; box-shadow: 0 8px 24px rgba(10, 14, 20, 0.12), 0 1px 3px rgba(10, 14, 20, 0.06); z-index: 4800; }
.pjd-menu.hidden { display: none; }
/* Panel con todos los chats: entra por la derecha como el visor de PDF */
/* Panel con todos los chats: sale junto al lateral, como la referencia,
   con buscador y filtros Todos / Favoritos */
/* Forma parte del lateral, como la referencia: sale pegado a él, con una
   línea vertical de separación, el mismo borde y solo las esquinas de la
   derecha redondeadas. Corto: lo que ocupen los chats, hasta un máximo. */
.pjd-hist-panel {
  position: fixed;
  top: var(--app-padding); bottom: var(--app-padding); left: 10px;
  /* Un poco más ancho: en un portátil pequeño la fila de filtros llegaba
     justa y «Seleccionar» quedaba pegado a «Compartidos». Los dos paneles
     —documentos y chats— comparten esta regla, así que miden igual. */
  width: min(600px, calc(100vw - 340px));
  z-index: 4500;
  display: none; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: 8px 0 20px rgba(15, 25, 40, 0.06), 0 1px 3px rgba(10, 14, 20, 0.06);
  /* La sombra solo hacia la derecha: por la izquierda nada, que si no
     parece que flota por encima del lateral */
  clip-path: inset(-40px -40px -40px 0);
}
/* Mientras está abierto, el lateral pierde las esquinas redondeadas de la
   derecha: los dos cuerpos se leen como uno solo con una línea entre medio
   que va de margen a margen */
body.pjd-hist-obert .sidebar { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pjd-hist-panel.visible { display: flex; animation: pjd-hist-in var(--t-panel) both; }
/* Compartir desde el panel no lo cierra: el pop-up se pone delante y el panel
   se queda detrás, debajo del velo. Sin esto, el panel (z-index alto) tapaba
   el pop-up. */
body:has(#share-overlay:not(.hidden)) .pjd-hist-panel { z-index: 900; }
@keyframes pjd-hist-in {
  from { transform: translateX(-48px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.pjd-hist-panel-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 8px 20px; flex-shrink: 0;
}
.pjd-hist-panel-tit { font-size: 13px; font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pjd-hist-panel-x { margin-left: auto; }
.pjd-hist-cerca {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 16px 10px; padding: 0 12px; height: 36px;
  border-radius: var(--r); background: rgba(10, 14, 20, 0.04);
  color: var(--text-3);
}
.pjd-hist-cerca .ti { font-size: 15px; flex-shrink: 0; }
.pjd-hist-cerca input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 13px; color: var(--text-1);
}
.pjd-hist-cerca input::placeholder { color: var(--text-3); }
.pjd-hist-filtres { display: flex; gap: 6px; padding: 0 16px 8px; flex-shrink: 0; }
.pjd-hist-filtre {
  height: 28px; padding: 0 12px; border: none; border-radius: 999px;
  background: none; color: var(--text-3);
  font: inherit; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: color var(--t-hover), background var(--t-hover);
}
.pjd-hist-filtre span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.pjd-hist-filtre:hover { color: var(--text-1); }
.pjd-hist-filtre.es-actiu { color: var(--text-1); background: rgba(10, 14, 20, 0.06); }
.pjd-hist-panel-llista { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 2px; border-radius: 0 0 var(--r-lg) 0; }

/* ── Desplegable «Compartido»: mismo cuerpo que el de avisos ── */
.comp-pop { width: 380px; }
.comp-pop-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 6px; flex-shrink: 0;
}
.comp-pop-tit { font-size: 13px; font-weight: 500; color: var(--text-1); }
.comp-pop-n { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.comp-pop-n:empty { display: none; }
.comp-pop-afegir {
  margin-left: auto; height: 28px; padding: 0 10px; font-size: 12px;
  border: none; background: rgba(10, 14, 20, 0.06);
}
.comp-pop-afegir:hover { background: rgba(10, 14, 20, 0.10); border: none; }
.comp-pop-fila {
  display: flex; gap: 12px; align-items: center;
  padding: 9px 8px; border-radius: var(--r);
  cursor: pointer; transition: background var(--t-hover);
}
.comp-pop-fila:hover { background: rgba(10, 14, 20, 0.035); }
.comp-pop-icona { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.comp-pop-nom { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Modo «Web» elegido en la barra del chat: su icono en azul (el chip vive
   al final de la fila, fuera del wrap). El azul manda siempre, también con el
   cursor encima —el hover del chip ennegrece el resto, este no. */
[data-mode-btn] .ti-world-search,
[data-mode-btn]:hover .ti-world-search,
.juris-chip .ti-world-search,
.juris-chip:hover .ti-world-search,
.juris-item .ti-world-search,
.juris-item:hover .ti-world-search { color: var(--blau); }
/* Todo leído: el doble check en azul, como el de WhatsApp */
.avis-pop-llegir.es-llegit, .avis-pop-llegir.es-llegit:hover { color: var(--blau); }
.avis-pop-filtre {
  height: 28px; padding: 0 10px; border: none; border-radius: 999px;
  background: none; color: var(--text-3);
  font: inherit; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; transition: color var(--t-hover), background var(--t-hover);
}
.avis-pop-filtre:hover { color: var(--text-1); }
.avis-pop-filtre.es-actiu { color: var(--text-1); background: rgba(10, 14, 20, 0.06); }
.avis-pop-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.avis-pop-proj .ti { font-size: 13px; }
.avis-pop-llegir { margin-left: auto; }
/* El proyecto elegido puede ser largo: se recorta, no empuja la cabecera */
.avis-pop-proj { min-width: 0; }
#avis-pop-proj-txt { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Hoy»: la pastilla blanca con sombra de la casa, a la altura de la
   cabecera; encendida, con el relleno gris de lo elegido */
.avis-pop-avui {
  flex: 0 0 auto; height: 28px; padding: 0 12px; margin-left: 2px;
  border: 1px solid rgba(var(--glass-rgb), 0.8); border-radius: var(--r-pill);
  background: rgba(var(--glass-rgb), 0.88);
  box-shadow: 0 1px 1px rgba(var(--glass-rgb), 0.6) inset, 0 1px 4px rgba(15, 25, 40, 0.06);
  font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover);
}
.avis-pop-avui:hover { color: var(--text-1); }
.avis-pop-avui.es-actiu { background: rgba(10, 14, 20, 0.06); border-color: transparent; box-shadow: none; color: var(--text-1); }
/* «Seleccionar», un icono como el check de al lado (gris que se vuelve
   negro, sin fondo); se lleva el hueco del medio y deja el check a su lado */
.avis-pop-triar { flex: 0 0 auto; margin-left: auto; }
.avis-pop-triar[hidden] { display: none; }
.avis-pop-llegir[hidden] { display: none; }
.avis-pop-triar:not([hidden]) + .avis-pop-llegir { margin-left: 0; }
/* SELECCIONAR, como en Documentación: el círculo a la izquierda (solo
   seleccionando), en tinta con el visto blanco cuando está elegido. La fila
   entera elige; los iconos sueltos de quitar y devolver no salen. */
.avis-pop-tick {
  display: none; flex: 0 0 auto; margin-top: 10px;
  width: 13px; height: 13px; box-sizing: border-box;
  border: 1.5px solid var(--border-2); border-radius: 50%;
  align-items: center; justify-content: center;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.avis-pop-tick .ti { font-size: 9px; color: transparent; }
.avis-pop.es-triant .avis-pop-tick { display: inline-flex; }
.avis-pop.es-triant .avis-pop-tick.es-buit { visibility: hidden; }
.avis-pop.es-triant .avis-pop-fila:hover .avis-pop-tick { border-color: var(--text-4); }
.avis-pop-fila.es-triat .avis-pop-tick { background: var(--text-1); border-color: var(--text-1); }
.avis-pop-fila.es-triat .avis-pop-tick .ti { color: var(--surface-card); }
.avis-pop.es-triant .avis-pop-fila.es-triat { background: rgba(10, 14, 20, 0.045); }
.avis-pop.es-triant .avis-pop-ic { display: none; }
/* La pastilla flota abajo: el último aviso no queda debajo de ella */
.avis-pop.es-triant .avis-pop-llista { padding-bottom: 58px; }
.avis-pop-peu { bottom: 12px; }
/* Eliminar: el rojo de la casa, solo al pasar el cursor */
.avis-pop-peu .pjd-docs-peu-btn.es-perill:hover {
  background: color-mix(in srgb, var(--coral) 10%, transparent); color: var(--coral);
}
.ico-dos-ticks {
  width: 18px; height: 18px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.avis-pop-llista { overflow-y: auto; padding: 0 6px 8px; }
.avis-pop-dia { padding: 8px 8px 4px; font-size: 12px; color: var(--text-3); }
.avis-pop-buit { padding: 28px 8px; text-align: center; font-size: 12.5px; color: var(--text-3); }
.avis-pop-fila {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 8px; border-radius: var(--r);
  cursor: pointer; transition: background var(--t-hover);
}
.avis-pop-fila:hover { background: rgba(10, 14, 20, 0.035); }
/* QUITAR Y DEVOLVER
   El icono vive al final de la fila y solo sale al pasar por encima: la
   lista se lee sin que nada pida atención. */
.avis-pop-ic {
  flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 50%; background: none;
  color: var(--text-3); font-size: 15px; cursor: pointer;
  opacity: 0; transition: opacity var(--t-hover), color var(--t-hover);
}
.avis-pop-fila:hover .avis-pop-ic, .avis-pop-ic:focus-visible { opacity: 1; }
.avis-pop-treure:hover { color: var(--coral); }
.avis-pop-tornar:hover { color: var(--text-1); }
/* EL FILTRO: ICONO Y RÓTULO, UNA SOLA COSA
   El nombre de lo que se está viendo vive dentro del botón: hereda su color
   y se enciende con él. Puesto un filtro NO se queda negro: el rótulo ya
   dice cuál es, y un icono encendido para siempre pierde el sentido. */
.avis-pop-filtrar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; padding: 0 8px;
}
.avis-filtre-ic { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.avis-pop-quin { font-size: 13px; color: inherit; white-space: nowrap; }
#avis-pop-menu-f { left: 8px; min-width: 220px; }
.avis-pop-menu-it {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 32px; padding: 0 10px; border: none; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: 13px; color: var(--text-menu);
  cursor: pointer; text-align: left;
  transition: background var(--t-hover), color var(--t-hover);
}
.avis-pop-menu-it:hover { background: rgba(10, 14, 20, 0.05); }
.avis-pop-menu-it.es-actiu { color: var(--text-1); font-weight: 500; }
.avis-pop-menu-n { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.avis-pop-menu-sep { height: 1px; margin: 6px -6px; background: var(--border); }
.avis-pop-avatar { position: relative; flex-shrink: 0; width: 32px; height: 32px; }
.avis-pop-avatar .pju { width: 32px; height: 32px; margin: 0; font-size: 11px; box-shadow: none; }
.avis-pop-tipus {
  position: absolute; right: -3px; bottom: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-card); color: var(--text-2);
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px var(--surface-card);
}
/* El organismo que publica la normativa: su escudo, del tamaño del avatar */
.avis-pop-org { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--text-2); font-size: 16px; }
.avis-pop-org .norm-cell-flag { width: 24px; height: 24px; }   /* más discreto que el avatar */
/* Acotado al proyecto abierto: el selector de proyectos sobra */
.avis-pop.es-projecte .avis-pop-sep, .avis-pop.es-projecte .avis-pop-proj { display: none; }
.avis-pop-cos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.avis-pop-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* En los avisos, la hora en gris justo al lado del nombre, no al final, y
   centrada con él: por la línea de abajo, al ser más pequeña, quedaba baja */
#avis-pop .avis-pop-l1 { justify-content: flex-start; align-items: center; gap: 6px; }
#avis-pop .avis-pop-qui { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avis-pop-qui { font-size: 13px; font-weight: 500; color: var(--text-1); }
.avis-pop-quan { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }
.avis-pop-l2 { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avis-pop-obj { color: var(--text-1); }
.avis-pop-cita { font-size: 12.5px; color: var(--text-2); }
.avis-pop-cami { font-size: 11.5px; color: var(--text-3); }
/* Invitación a un proyecto, en la misma fila del aviso (petición del usuario,
   19-9-2026; antes iban en verde y en rojo): «Aceptar» en negro, el botón
   principal de la casa —Tinta con la letra del color de la tarjeta, que en
   oscuro se invierte—, y «Rechazar» con el relleno gris de la casa. */
.avis-pop-acc { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.avis-pop-acceptar,
.avis-pop-rebutjar {
  height: 26px; padding: 0 11px 0 9px; border: none; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background var(--t-hover), opacity var(--t-hover);
}
.avis-pop-acceptar .ti,
.avis-pop-rebutjar .ti { font-size: 14px; }
.avis-pop-acceptar { background: var(--text-1); color: var(--surface-card); }
.avis-pop-acceptar:hover { opacity: .86; }
.avis-pop-rebutjar { background: rgba(10, 14, 20, 0.06); color: var(--text-1); }
.avis-pop-rebutjar:hover { background: rgba(10, 14, 20, 0.10); }
.avis-pop-acc button:disabled { opacity: .5; cursor: default; }
/* Sin leer: la fila un pelín destacada */
.avis-pop-fila.es-nou .avis-pop-qui { font-weight: 600; }
/* El punto rojo, en el centro del rectángulo del aviso (iba arriba, a la
   altura del nombre) */
.avis-pop-fila.es-nou::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--badge-alert); flex-shrink: 0; align-self: center;
}
.pjd-top-btn.is-on { color: var(--text-1); }

/* Preguntas típicas centradas en el vacío */
.pjd-sugg-wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.pjd-sugg { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pjd-sugg-chip {
  border: none; border-radius: var(--r-pill);
  background: rgba(10, 14, 20, 0.04);
  color: var(--text-2);
  font-family: var(--font); font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.pjd-sugg-chip:hover { background: rgba(10, 14, 20, 0.07); color: var(--text-1); }

/* Barra del chat más gruesa, como la referencia: caja alta con el texto
   arriba y los botones abajo a la derecha */
.pjd-pill-wrap .pill-bar {
  /* El mismo aire que la barra del chat principal: 12 arriba, 10 abajo
     (la de proyecto respiraba menos por arriba y se notaba). */
  min-height: 96px;
  padding-top: 12px;
  padding-bottom: 10px;
  border-radius: 18px;
  align-content: space-between;
}
.pjd-pill-wrap .pill-input { margin-top: 0; }
.pjd-pill-wrap .pill-input { flex: 1 1 100%; align-self: flex-start; margin-bottom: 0; }
/* El hueco lo abre el contexto (margin-right:auto): si el clip pone el
   suyo, el espacio libre se reparte entre los dos y el martillo queda
   colgado en mitad de la barra. */
.pjd-pill-wrap .pill-plus-wrap { margin-left: 0; }

/* ── Cabecera del chat partido a la altura del rastro ─────────────
   En la vista partida, el chip de Privado y los iconos suben a la MISMA
   altura que «Proyectos / …»: el panel se estira 56px hacia arriba (la
   barra superior) y la cadena de contenedores deja de recortar mientras
   dura la partida. La cabecera ocupa esa franja, centrada como el rastro. */
.main-area.is-split .app-content,
.main-area.is-split .view,
.main-area.is-split .pjd-layout,
.main-area.is-split .pjx-main { overflow: visible; }
.pjd-split-chat { margin-top: -56px; }
.pjd-split-chat .pjd-chat-top {
  height: 56px;
  padding: 0 var(--sp-6);
  align-items: center;
  flex-shrink: 0;
}

/* La cabecera cae EXACTA a la altura del rastro: fuera el padding superior
   del cuerpo del chat mientras está partido */
.pjd-split-chat .pjx-body-chat.on { padding-top: 0; }

/* Icono de cabecera de columna: gris, un punto más apagado que el título */
.pjx-th-ico {
  font-size: 13px;
  color: var(--text-3);
  margin-right: 6px;
  vertical-align: -1px;
  flex-shrink: 0;
}
/* Siluetas mínimas propias (máscara): calendario sin adorno y pin sin
   el círculo interior, como la referencia */
.pjx-tico-cal, .pjx-tico-mapa {
  display: inline-block;
  width: 13px; height: 13px;
  background-color: var(--text-3);
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
}
.pjx-tico-cal {
  -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='M3.5 6.8A2.8 2.8 0 0 1 6.3 4h11.4a2.8 2.8 0 0 1 2.8 2.8v11.4a2.8 2.8 0 0 1-2.8 2.8H6.3a2.8 2.8 0 0 1-2.8-2.8zm1.7 0v11.4c0 .6.5 1.1 1.1 1.1h11.4c.6 0 1.1-.5 1.1-1.1V6.8c0-.6-.5-1.1-1.1-1.1H6.3c-.6 0-1.1.5-1.1 1.1z'/%3E%3Crect x='7.2' y='2.2' width='1.7' height='4' rx='.85'/%3E%3Crect x='15.1' y='2.2' width='1.7' height='4' rx='.85'/%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='M3.5 6.8A2.8 2.8 0 0 1 6.3 4h11.4a2.8 2.8 0 0 1 2.8 2.8v11.4a2.8 2.8 0 0 1-2.8 2.8H6.3a2.8 2.8 0 0 1-2.8-2.8zm1.7 0v11.4c0 .6.5 1.1 1.1 1.1h11.4c.6 0 1.1-.5 1.1-1.1V6.8c0-.6-.5-1.1-1.1-1.1H6.3c-.6 0-1.1.5-1.1 1.1z'/%3E%3Crect x='7.2' y='2.2' width='1.7' height='4' rx='.85'/%3E%3Crect x='15.1' y='2.2' width='1.7' height='4' rx='.85'/%3E%3C/svg%3E");
}
/* Municipio: mapa plegado, el mismo icono que la barra lateral */
.pjx-tico-mapa {
  -webkit-mask-image: 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");
          mask-image: 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");
}
/* Las cabeceras de Avisos centran icono y título en la misma línea */
.ntf-thead > span { display: flex; align-items: center; }

/* El embudo de Avisos, pelado de verdad: styles.css carga después que
   components.css y .pjx-tbtn recuperaba su caja — de aquí el refuerzo */
.ntf-filtre-wrap .ntf-filtre-btn {
  border: none;
  background: none;
  box-shadow: none;
  width: auto; height: auto; padding: 4px;
  color: var(--text-3);
}
.ntf-filtre-wrap .ntf-filtre-btn:hover { color: var(--text-1); background: none; }
.ntf-filtre-wrap .ntf-filtre-btn.is-filtrat { color: var(--text-1); }

/* ── Panel de detalle de un aviso ─────────────────────────────────
   Mismo lenguaje que el visor de PDF: se solapa por la derecha con la
   flecha « esconder », esquinas de tarjeta y la sombra sutil. Dentro, a
   lo referencia: título grande, chips de estado, ficha con municipio /
   fecha / tópico y el cuerpo que informa. */
.avis-panel {
  position: fixed;
  top: var(--app-padding);
  right: var(--app-padding);
  bottom: var(--app-padding);
  width: calc(50% - var(--app-padding));
  z-index: 90;
  display: none;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: -8px 0 20px rgba(15, 25, 40, 0.06);
  overflow: hidden;
}
.avis-panel.visible { display: flex; animation: pdf-panel-in var(--t-panel) both; }
.avis-panel.is-leaving { animation: pdf-panel-out var(--t-panel) both; }
.avis-topbar { padding: 10px 12px 0; flex-shrink: 0; }
.avis-cos { padding: 10px 28px 28px; overflow-y: auto; }
.avis-tit { font-size: 18px; font-weight: 500; color: var(--text-1); line-height: 1.35; margin: 6px 0 14px; }
.avis-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.avis-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 12px; line-height: 1; color: var(--text-2);
}
.avis-chip .ntf-prio { margin-top: 0; align-self: center; position: relative; top: -0.5px; }
.avis-mini-av {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text-3);
  color: var(--surface-white);
  font-size: 9px; font-weight: 500; font-family: var(--font-mono, var(--font));
  flex-shrink: 0;
}
/* Con foto de perfil: la foto a sangre y sin iniciales */
.avis-mini-av.has-foto { background-size: cover; background-position: center; color: transparent; }
/* Ficha resumen: filas etiqueta + valor sobre gris apenas insinuado */
.avis-card {
  background: rgba(10, 14, 20, 0.03);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 20px;
}
/* FILTROS Y PAPELERA DE AVISOS
   La barra, la misma de Documentación: botones con su línea debajo y el
   filtro a la derecha. La papelera de cada fila solo sale al pasar por
   encima, para no cargar la tabla. */
/* Esperando los avisos: el aro y el rótulo, juntos y en el centro */
.ntf-carregant { flex-direction: row; gap: 8px; font-size: 13px; color: var(--text-3); }
/* La pastilla del tema elegido, al final de la barra: igual que las demás
   pero con la cruz de quitarlo. La cruz nunca lleva fondo: gris → negro. */
.notif-tema { gap: 4px; }
.notif-tema-x { font-size: 13px; color: var(--text-3); transition: color var(--t-hover); }
.notif-tema:hover .notif-tema-x { color: var(--text-1); }

.notif-filtres { display: inline-flex; align-items: center; gap: var(--sp-2); }
.notif-filtre-n { margin-left: 6px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.notif-filtre.es-actiu { background: rgba(10, 14, 20, 0.06); border-color: transparent; }
.notif-filtre.es-actiu .notif-filtre-n { color: var(--text-2); }
/* El menú de filtros de Avisos usa las filas de la campana: mismo menú en
   los dos sitios, con la papelera separada por su línea. */
#notif-filtre-menu2 { padding: 6px; }
#pjx-body-notif .ntf-grid > span:last-child { display: flex; align-items: center; gap: 6px; }
.ntf-esborrar {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 50%; background: none;
  color: var(--text-3); font-size: 15px; cursor: pointer;
  opacity: 0; transition: opacity var(--t-hover), color var(--t-hover);
}
.ntf-fila:hover .ntf-esborrar, .ntf-esborrar:focus-visible { opacity: 1; }
.ntf-esborrar:hover { color: var(--coral); }

.avis-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-1); }
.avis-row .ntf-tags { flex-direction: row; flex-wrap: wrap; }
/* En el detalle, los tópicos van en gris suave —como la referencia—,
   dejando el color para la tabla */
.avis-card .ntf-tag {
  background: rgba(10, 14, 20, 0.04) !important;
  border-color: transparent !important;
  color: var(--text-2) !important;
}
.avis-row-lab { width: 86px; flex-shrink: 0; color: var(--text-3); }
/* Estado: vigente o en tramitación. El MISMO recuadro que el tópico de
   «Tema» de esta ficha (rectángulo de esquinas suaves, 11px), con el punto
   de color de la tabla de Normativa delante. */
.avis-estat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 5px;
  background: rgba(10, 14, 20, 0.04);
  border: 1px solid transparent;
  color: var(--text-2); font-size: 11px; font-weight: 500; white-space: nowrap;
}
.avis-estat .norm-dot { width: 6px; height: 6px; }
.avis-estat.es-buit { color: var(--text-3); }
.norm-dot-cap { background: var(--text-3); opacity: .5; }
.avis-text { font-size: 13.5px; line-height: 1.65; color: color-mix(in srgb, var(--text-1) 80%, transparent); }
.avis-text p { margin: 0 0 12px; }
/* Los iconos van juntos a la derecha, justo encima del documento. Solo los
   iconos: sin la tarjeta blanca ni la sombra de antes (a petición del
   usuario, 19-9-2026). */
.avis-accions {
  display: flex; align-items: center; gap: 2px;
  width: fit-content; margin: 10px 0 0 auto;
  padding: 0;
  background: none;
  box-shadow: none;
}
.avis-accions:empty { display: none; }
/* Dentro, solo el icono: gris que se vuelve negro, sin relleno propio */
.avis-acc {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; padding: 0; border-radius: var(--r-xs, 6px);
  background: none;
  color: var(--text-3); font-size: 15px; cursor: pointer;
  text-decoration: none;
  transition: color var(--t-hover);
}
.avis-acc:hover { color: var(--text-1); background: none; }
/* El documento, debajo de la explicación: ocupa el hueco que quedaba vacío */
.avis-doc {
  margin-top: 18px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-3); min-height: 420px; height: 62vh;
}
/* Las hojas, como en el visor: blancas, centradas y con sombra corta */
.avis-doc-fulls {
  height: 100%; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.avis-doc-full {
  display: block; max-width: 100%; border-radius: var(--r-sm);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 8px 20px -12px rgba(18, 18, 23, 0.30);
}
.avis-doc-espera {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  font-size: 12.5px; color: var(--text-3);
}

/* ── Equipo del proyecto en la cabecera ── */
/* El grupo de la derecha empuja desde aquí: antes lo hacía el nombre del
   proyecto (margin-left:auto), que ahora vive en el rastro de arriba. */
.pjd-equip { display: inline-flex; align-items: center; margin-left: auto; }
/* Compartir: relleno gris y sin trazo, como los chips del sistema */
.pjd-compartir {
  margin-left: 10px; height: 28px; padding: 0 10px; font-size: 12px;
  border: none;
  background: rgba(10, 14, 20, 0.06);
}
.pjd-compartir:hover { background: rgba(10, 14, 20, 0.10); border: none; }

/* ── Controles de vista de la tabla, a la derecha de la barra ── */
.pjx-toolbar-dreta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.pjx-idioma-wrap { position: relative; }
.pjx-idioma-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 130;
  min-width: 210px;
  background: var(--surface-card);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
}
.pjx-idioma-menu.hidden { display: none; }
/* Altura de fila compacta y texto completo (los dos interruptores) */
.is-compacta .pjd-doc { min-height: 40px; }
.is-compacta .pjx-doc-cel { padding-top: 4px; padding-bottom: 4px; }
.is-text-sencer .pjx-doc-cel { white-space: normal; }
.is-text-sencer .pjx-doc-cel > * { overflow: visible; }
.is-text-sencer .pjx-doc-resum {
  white-space: normal;
  overflow: visible;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* La tabla de Avisos arranca a la misma altura que la barra de Documentos:
   sin el respiro de arriba del cuerpo, que la dejaba 36px más abajo */
#pjx-body-notif { padding-top: 0; }
/* Y por eso su barra no tira hacia arriba: el margen negativo de .pjx-toolbar
   descuenta un relleno que aquí no existe, y los botones se salían por arriba
   y quedaban cortados. A los lados sí, que la línea llegue al margen. */
#pjx-body-notif > .pjx-toolbar { margin-top: 0; }
/* La cabecera se queda pegada arriba al bajar por la lista, sobre un fill
   gris y con su línea debajo, para saber siempre qué columna es cuál. */
#pjx-body-notif .ntf-thead {
  position: sticky; top: 0; z-index: 3;
  /* Opaca de verdad: el gris va ENCIMA del blanco de la hoja. Con el gris
     suelto se transparentaba y las filas se leían por debajo al bajar. */
  background-color: var(--surface-card);
  background-image: linear-gradient(rgba(10, 14, 20, 0.03), rgba(10, 14, 20, 0.03));
}
/* QUIÉN SE DESPLAZA
   El que baja es la tabla, no el panel: así la barra de filtros se queda
   quieta arriba y la cabecera puede pegarse a ella. Con el panel entero
   desplazándose, la cabecera vivía dentro de otra caja con desplazamiento
   propio y no se pegaba a nada. */
#pjx-body-notif.on { display: flex; flex-direction: column; overflow: hidden; }
#pjx-body-notif > .notif-llista { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#pjx-body-notif .ntf-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Los menús de la barra de Documentos viven en la capa de arriba (la barra
   recorta con overflow-x y solo asomaba una franja gris con sombra) */
.pjx-idioma-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 300; }

/* ── Cabecera de columna con menú (todas, fijas y de IA) ──────────
   Al pasar el cursor se tiñe la CELDA ENTERA —de borde a borde y de arriba
   abajo, sin esquinas—, y asoman los tres puntos; sustituyen a la cruz. */
.pjx-docs-thead .pjx-th { gap: 6px; }
/* El sombreado va en una CAPA, no en la caja: con margen negativo la celda
   se desplazaba y arrastraba su línea separadora (::before), que dejaba de
   cuadrar con la de las filas. La capa cubre la banda de la columna —celda
   más su mitad de cada hueco—, que es justo donde llegan las líneas. */
.pjx-docs-thead .pjx-th::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  top: 0;
  bottom: 0;
  background: transparent;
  transition: background var(--t-hover);
  pointer-events: none;
}
.pjx-docs-thead .pjx-th:hover::after { background: rgba(10, 14, 20, 0.05); }
/* La casilla de «seleccionar todo» es el margen de la columna Documento,
   no una columna aparte: al pasar por su cabecera se sombrea también, y
   con ella la franja a sangre de la izquierda (su ::before hereda el
   fondo). Se pinta el fondo de la celda —no una capa por encima— para no
   tapar la casilla. */
.pjx-docs-thead:has(.pjx-th[data-col="nom"]:hover) > span:first-child {
  background: color-mix(in srgb, rgb(10, 14, 20) 5%, var(--surface-card));
}
/* …y entonces la banda de «Documento» no debe volver a pintar el hueco:
   los dos grises se sumaban ahí y dejaban una raya más oscura. */
.pjx-docs-thead:has(.pjx-th[data-col="nom"]:hover) .pjx-th[data-col="nom"]::after { left: 0; }
/* La última columna llega hasta el margen derecho, igual que las filas */
.pjx-docs-thead > .pjx-th:last-child::after { right: calc(-1 * var(--sp-6)); }
/* El contenido, por encima de esa capa */
.pjx-docs-thead .pjx-th > * { position: relative; z-index: 1; }

/* ── Estirar y encoger una columna ────────────────────────────────
   La línea de separación de la cabecera se puede arrastrar. La zona de
   agarre es ancha (10px) para no tener que afinar con el ratón, pero solo
   se ve una rayita, y únicamente al acercarse. */
.pjx-docs-thead .pjx-th > .pjx-th-tira {
  position: absolute;
  top: 0; bottom: 0; right: -5px;
  width: 10px;
  z-index: 4;
  cursor: col-resize;
}
/* Sin rayita: al acercarse ya cambia el cursor, y una línea gris más al
   lado de la separación real ensuciaba la cabecera. */
/* Mientras se arrastra, el cursor manda en toda la página y no se
   selecciona texto sin querer */
body.pjx-redimensionant { cursor: col-resize; user-select: none; }
body.pjx-redimensionant * { cursor: col-resize !important; }
.pjx-th-mes {
  margin-left: auto;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0;
  color: var(--text-3);
  border-radius: var(--r-xs, 6px);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--t-hover), color var(--t-hover);
}
.pjx-docs-thead .pjx-th:hover .pjx-th-mes { opacity: 1; }
.pjx-th-mes:hover { color: var(--text-1); background: none; }
.pjx-th-mes .ti { font-size: 15px; }
/* El menú vive en la capa de arriba (la barra y la tabla recortan) */
.pjx-th-menu { min-width: 200px; }
.pjx-th-menu .export-opt.is-danger { color: var(--coral); }
.pjx-th-menu .export-opt.is-danger .ti { color: var(--coral); }

/* ── Mejorar la consulta: rastro de carga y escritura ──────────────────
   Mientras el martillo trabaja, un trazo recorre el borde inferior de la
   barra de escribir. El propio martillo ya se anima, pero queda en una
   esquina: el trabajo pasa sobre el texto, y ahí es donde el ojo mira.

   Es un degradado que se desplaza, no una barra de progreso: no sabemos
   cuánto falta, y fingir un porcentaje sería mentir. */
.pill-bar.is-millorant,
.composer-pill.is-millorant,
form.is-millorant {
  position: relative;
}
.pill-bar.is-millorant::after,
.composer-pill.is-millorant::after,
form.is-millorant::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 28%,
    var(--brand, #2d6a4f) 45%,
    var(--brand, #2d6a4f) 55%,
    transparent 72%,
    transparent 100%);
  background-size: 220% 100%;
  animation: millorantRastre 1.15s linear infinite;
}
@keyframes millorantRastre {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* Mientras el texto entra palabra a palabra, el cursor del usuario no debe
   pelearse con la escritura. */
.chat-input.is-escrivint { caret-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .pill-bar.is-millorant::after,
  .composer-pill.is-millorant::after,
  form.is-millorant::after { animation: none; opacity: .5; }
}

/* ── Tablas dentro de la respuesta del chat ────────────────────────────
   Antes una tabla markdown salía como párrafos llenos de barras verticales.
   El scroll horizontal va en su propio contenedor: una tabla ancha no debe
   ensanchar la conversación entera ni sacar scroll a la página. */
/* La tabla, en un desplegable: cabecera con el título, cuántas filas y el
   icono de descarga; el cuerpo se recoge con la misma animación de altura
   que el resto del producto. */
/* Como el desplegable del chat de proyecto: una sola tarjeta BLANCA con
   sombra corta y sin trazo; dentro, la cabecera y la tabla. */
/* ── Borrador de correo en la respuesta ───────────────────────────────
   Misma tarjeta que la tabla: blanca, sombra corta y sin trazo. El asunto y
   el cuerpo van separados, cada uno con su botón de copiar, porque lo que se
   hace con un correo es copiarlo y pegarlo. */
.chat-mail {
  margin: 14px 0 18px;
  max-width: 100%;
  border-radius: var(--r);
  /* La cabecera va sobre gris y el correo empieza en su hoja blanca, con las
     esquinas de arriba redondeadas: se ve dónde acaba el rótulo y empieza el
     documento. */
  background: rgba(10, 14, 20, 0.05);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
  transition: box-shadow var(--t-hover);
}
/* PLEGARSE COMO LA TABLA, no de golpe
   Iba con `display: none`: desaparecía de una vez, sin nada que mirar. Ahora
   es el mismo truco que la hoja de una tabla —una rejilla que pasa de 1fr a
   0fr— con su misma duración y su misma curva, y el contenido se desvanece un
   pelo antes. Las dos cosas de un chat se pliegan igual. */
.chat-mail-full {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--surface-card);
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
}
.chat-mail.es-plegat .chat-mail-full { grid-template-rows: 0fr; background: none; }
.chat-mail-full > .chat-mail-full-in {
  min-height: 0;
  transition: opacity 0.28s ease;
}
.chat-mail.es-plegat .chat-mail-full-in { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .chat-mail-full, .chat-mail-full > .chat-mail-full-in { transition: none; }
}
.chat-mail:hover { box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 8px 18px -10px rgba(18, 18, 23, 0.34); }
.chat-mail-cap { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; }
/* La cabecera es el botón de plegar, como en la tabla */
.chat-mail-toggle {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  padding: 6px 4px; border: none; background: none;
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  color: var(--text-1); text-align: left; cursor: pointer;
}
.chat-mail-toggle .ti-chevron-down {
  font-size: 15px; color: var(--text-3);
  transition: transform var(--t-hover);
}
.chat-mail.es-plegat .chat-mail-toggle .ti-chevron-down { transform: rotate(-90deg); }
.chat-mail-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mientras llega: el aro en el sitio del chevron y el cuerpo recogido */
.chat-mail.es-carregant .chat-mail-toggle { cursor: default; }
.chat-mail.es-carregant .chat-mail-toggle .ti-chevron-down { display: none; }
.chat-mail:not(.es-carregant) .chat-mail-toggle .magic-spin { display: none; }
/* Lo de dentro ya no se esconde por su cuenta: lo recoge la hoja entera */
/* El icono de Outlook: es donde se acaba pegando el correo */
.chat-mail-ic {
  width: 16px; height: 16px; flex-shrink: 0;
  background: url("icons/outlook.svg?v=1") no-repeat center / contain;
}
.chat-mail-fila {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 14px;
}
.chat-mail-fila + .chat-mail-fila { border-top: 1px solid var(--border); }
.chat-mail-lab { flex-shrink: 0; width: 54px; font-size: 12.5px; color: var(--text-3); }
.chat-mail-assumpte { flex: 1; min-width: 0; font-size: 13px; color: var(--text-1); }
/* La fila del cuerpo es solo el rótulo y su botón: el texto va debajo */
.chat-mail-fila-cos { align-items: center; }
.chat-mail-fila-cos .chat-mail-lab { flex: 1; }
/* Copiar: el mismo botón que el del final del mensaje (.msg-action-btn) */
.chat-mail-copia { flex-shrink: 0; }
.chat-mail-cos { padding: 2px 14px 16px; font-size: 13.5px; color: var(--text-1); line-height: 1.6; }
.chat-mail-p { margin: 0 0 10px; }
.chat-mail-h2 { margin: 16px 0 8px; font-size: 15px; font-weight: 600; color: var(--text-1); }
.chat-mail-h3 { margin: 14px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.chat-mail-llista { margin: 0 0 10px; padding-left: 20px; }
.chat-mail-llista li { margin: 3px 0; }
/* La tabla dentro del correo: sobria, como la pegaría un cliente de correo.
   Sin fondo de cabecera ni rayas alternas — esto acaba en Outlook. */
.chat-mail-taula { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 13px; }
.chat-mail-taula th,
.chat-mail-taula td { border: 1px solid rgba(10, 14, 20, 0.12); padding: 6px 9px; text-align: left; vertical-align: top; }
.chat-mail-taula th { font-weight: 600; }
[data-theme="dark"] .chat-mail-taula th,
[data-theme="dark"] .chat-mail-taula td { border-color: rgba(235, 235, 245, 0.16); }
.chat-mail-cos a { color: var(--blau); text-decoration: underline; text-underline-offset: 2px; }
.chat-mail-cos em { font-style: italic; color: var(--text-2); }

.chat-taula-wrap,
.croquis-parcela {
  margin: 14px 0 18px;
  max-width: 100%;
  border-radius: var(--r);
  /* Igual que el borrador de correo: rótulo sobre gris y la tabla en su
     hoja blanca, con las esquinas de arriba redondeadas. */
  background: rgba(10, 14, 20, 0.05);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
  transition: box-shadow var(--t-hover);
}
.chat-taula-wrap:hover,
.croquis-parcela:hover { box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 8px 18px -10px rgba(18, 18, 23, 0.34); }
.chat-taula-cap,
.croquis-cap {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
}
.chat-taula-toggle,
.croquis-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 1; min-width: 0;
  padding: 6px 8px;
  border: none; border-radius: var(--r);
  background: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text-3);
  text-align: left; cursor: pointer;
  transition: color var(--t-hover);
}
.chat-taula-toggle i,
.croquis-toggle i { font-size: 15px; color: var(--text-3); transition: transform var(--t-hover), color var(--t-hover); }
.chat-taula-toggle:hover,
.chat-taula-toggle:hover i,
.chat-taula-toggle:hover .chat-taula-tit,
.chat-taula-toggle:hover .chat-taula-n,
.croquis-toggle:hover,
.croquis-toggle:hover i,
.croquis-toggle:hover .croquis-tit,
.croquis-toggle:hover .croquis-n { color: var(--text-1); }
.chat-taula-wrap.es-plegat .chat-taula-toggle i,
.croquis-parcela.es-plegat .croquis-toggle i { transform: rotate(-90deg); }
.chat-taula-tit,
.croquis-tit { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-hover); }
.chat-taula-n,
.croquis-n { margin-left: auto; flex-shrink: 0; color: var(--text-3); transition: color var(--t-hover); }
.chat-taula-baixa,
.chat-taula-obre,
.croquis-baixa {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-3);
  font-size: 14px; cursor: pointer;
  transition: color var(--t-hover);
}
.chat-taula-baixa:hover,
.chat-taula-obre:hover,
.croquis-baixa:hover { color: var(--text-1); }

/* Mientras la tabla se está escribiendo: aro en vez de chevron y cerrada */
.chat-taula-wrap.es-carregant .chat-taula-toggle { cursor: default; }
.chat-taula-wrap.es-carregant .chat-taula-toggle i { display: none; }
.magic-spin.es-taula { display: none; width: 15px; height: 15px; flex-shrink: 0; }
/* El aro mientras se escribe: el de la tabla y el del correo son el mismo, y
   la regla que lo enciende estaba escrita solo para la tabla — así que el
   correo se escribía sin aro, contra la regla de la casa. */
.chat-taula-wrap.es-carregant .magic-spin.es-taula,
.chat-mail.es-carregant .magic-spin.es-taula {
  display: block;
  animation: magic-spin-gira 2s linear infinite;
}

/* Ampliada: la tabla entera sobre el resto, con el fondo difuminado */
.taula-ampli {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  background: rgba(10, 14, 20, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: taula-ampli-in 0.18s ease both;
}
@keyframes taula-ampli-in { from { opacity: 0; } to { opacity: 1; } }
.taula-ampli-caixa {
  display: flex; flex-direction: column;
  width: min(1100px, 100%);
  max-height: 100%;
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06), 0 30px 60px -24px rgba(18, 18, 23, 0.4);
  overflow: hidden;
}
.taula-ampli-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.taula-ampli-tit { color: var(--text-1); }
.taula-ampli-n { color: var(--text-3); }
.taula-ampli-x {
  margin-left: auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-3);
  font-size: 15px; cursor: pointer;
  transition: color var(--t-hover);
}
.taula-ampli-x:hover { color: var(--text-1); }
.taula-ampli-cos { overflow: auto; }
.taula-ampli-cos .chat-taula { font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .taula-ampli { animation: none; }
  .chat-taula-wrap.es-carregant .magic-spin.es-taula { animation: none; }
}
.chat-taula-cos,
.croquis-cos {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  /* La hoja blanca de la tabla, con las esquinas de arriba redondeadas. El
     `overflow` es lo que recorta la tabla de dentro: sin él, las celdas
     pasaban por encima y las esquinas volvían a salir en pico. */
  background: var(--surface-card);
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
}
.chat-taula-wrap.es-plegat .chat-taula-cos,
.croquis-parcela.es-plegat .croquis-cos { background: none; }
.chat-taula-wrap.es-plegat .chat-taula-cos,
.croquis-parcela.es-plegat .croquis-cos { grid-template-rows: 0fr; }
.chat-taula-cos > .chat-taula-scroll,
.croquis-cos > .croquis-full {
  min-height: 0;
  transition: opacity 0.28s ease;
}
/* Plegada del todo: sin el borde, que si no deja dos píxeles de sobra */
.chat-taula-wrap.es-plegat .chat-taula-scroll,
.croquis-parcela.es-plegat .croquis-full { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .chat-taula-cos, .chat-taula-cos > .chat-taula-scroll,
  .croquis-cos, .croquis-cos > .croquis-full { transition: none; }
}
/* El menú de descarga hereda el lenguaje del de exportar */
.taula-pop .ficon { width: 16px; height: 16px; }

.chat-taula-scroll {
  overflow-x: auto;
  border: none;
  border-radius: 0;
  background: none;
  margin: 0;
}

.chat-taula {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  line-height: 1.45;
}
/* Cabecera de columnas en gris flojo con el texto en Tinta: el verde de
   marca competía con el contenido y no es el lenguaje del producto. */
.chat-taula th {
  /* Blanca, como el resto de la hoja: con la cabecera en gris asomaba por
     las esquinas redondeadas de arriba y parecían dos sombras. */
  background: var(--surface-card);
  color: var(--text-1);
  font-weight: 500;
  text-align: left;
  padding: 9px 12px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.chat-taula td {
  padding: 8px 12px;
  border-top: 1px solid rgba(10, 14, 20, 0.07);
  vertical-align: top;
}
/* Filas alternas: la primera blanca, la segunda gris floja, y así. Con seis
   o más filas de cifras, seguir una sin esto cuesta. */
.chat-taula tbody tr:nth-child(odd)  { background: var(--surface-card); }
.chat-taula tbody tr:nth-child(even) { background: rgba(10, 14, 20, 0.022); }
.chat-taula tbody tr:hover { background: rgba(10, 14, 20, 0.035); }

.chat-taula-accions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.taula-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line, #e6e8ea);
  background: #fff;
  color: var(--text-2, #4a5560);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.taula-btn:hover:not(:disabled) {
  background: var(--brand, #2d6a4f);
  border-color: var(--brand, #2d6a4f);
  color: #fff;
}
.taula-btn:disabled { opacity: .7; cursor: default; }
.taula-btn i { font-size: 15px; }

@media (max-width: 640px) {
  .chat-taula { font-size: 12px; }
  .chat-taula th, .chat-taula td { padding: 7px 9px; }
}

/* ── Dictado por voz ───────────────────────────────────────────────────
   Grabando: el micrófono en rojo con un latido. Que se vea sin lugar a
   dudas es una cuestión de confianza, no estética — si alguien no sabe
   si le estamos escuchando, deja de usarlo. */
.pill-mic-btn.is-gravant {
  color: var(--coral, #e05252);
  opacity: 1;
}
.pill-mic-btn.is-gravant i {
  animation: veuLatit 1.1s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes veuLatit {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: .65; }
}

/* Mientras se dicta, una línea de rayitas recorre la barra de lado a lado y
   sube y baja con la voz: el botón está en una esquina y la vista está en el
   texto. Sustituye al trazo rojo que había antes, que no decía nada. */
.pill-bar.is-gravant { position: relative; }
/* Un tramo corto, FLOTANDO en el centro de la barra: no ocupa sitio, así los
   iconos y el botón de enviar se quedan exactamente donde estaban. Va a la
   altura del micrófono, que la pone el JS al montarla. */
.pill-ona {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 20px;
  margin: 0;
  pointer-events: none;
  opacity: .75;
}
/* EL COMPOSER DE DENTRO DE UNA CONVERSACIÓN, EN DOS ALTURAS
   ---------------------------------------------------------
   Como el del Agente y como el del arranque: la pregunta arriba, a todo el
   ancho, y los iconos debajo. En una sola línea el texto se peleaba con los
   iconos —y con la onda del dictado— y se partía a los pocos caracteres.
   Se hace con el propio flex, sin tocar el HTML ni el envío. */
#form .pill-bar { flex-wrap: wrap; row-gap: 10px; }
#form .pill-bar > .pill-input {
  flex: 1 0 100%;
  order: -1;            /* la pregunta, en la primera línea */
  max-height: 160px;
}
#form .pill-bar > .chat-adjunts-wrap { order: -2; flex: 1 0 100%; }
/* El martillo, el micrófono y el enviar, a la derecha de su línea; el clip,
   normativa, municipio y proyecto se quedan a la izquierda. Igual que en el
   Agente, y deja en medio el hueco donde va la onda del dictado. */
#form .pill-bar > .pill-magic-btn { margin-left: auto; }
/* Cuando la onda comparte línea con el texto, el texto se para antes de ella
   (el hueco lo calcula el JS, que sabe dónde empiezan los iconos). */
.pill-bar.es-ona-dreta .pill-input { transition: padding-right var(--t-hover); }

.pill-mic-btn.is-transcrivint i { animation: pjx-mill-pica 0.7s ease-in-out infinite; }
.pill-mic-btn.is-error { color: var(--coral, #e05252); }

@media (prefers-reduced-motion: reduce) {
  .pill-mic-btn.is-gravant i,
  .pill-mic-btn.is-transcrivint i { animation: none; }
  .pill-ona { opacity: .5; }
}

/* ── Compartir (proyecto, chat o documento) ─────────────────────────── */
#share-overlay { z-index: 6000; }   /* por encima de paneles y visor */
.share-modal { max-width: 520px; display: flex; flex-direction: column; max-height: min(640px, calc(100vh - 40px)); }
.share-tab-n { margin-left: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.share-tab-n:empty { display: none; }
.share-x { margin-left: auto; flex-shrink: 0; }
.share-tab-n:not(:empty) + .share-x { margin-left: 4px; }   /* con contador vacío, la cruz sigue a la derecha */
.share-cap {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(10, 14, 20, 0.06);
}
.share-ico {
  width: 36px; height: 36px; border-radius: var(--r); flex-shrink: 0;
  background: rgba(10, 14, 20, 0.05); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.share-cap-txt { display: flex; flex-direction: column; min-width: 0; }
.share-nom { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-sub { font-size: 12px; color: var(--text-3); }
.share-body { padding: 12px 16px 16px; overflow-y: auto; min-height: 0; }
.share-pane { display: none; }
.share-pane.es-actiu { display: block; }
.share-invitar { display: flex; align-items: center; gap: 8px; }
.share-cerca {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: var(--r);
  background: rgba(10, 14, 20, 0.04); color: var(--text-3);
}
.share-cerca .ti { font-size: 15px; flex-shrink: 0; }
.share-cerca input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 13px; color: var(--text-1); }
.share-cerca input::placeholder { color: var(--text-3); }
.share-rol {
  height: 28px; padding: 0 4px; border: none; border-radius: 14px; flex-shrink: 0;
  background: none; color: var(--text-3); font: inherit; font-size: 13px; cursor: pointer;   /* el mismo gris que «Buscar personas…» */
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  transition: color var(--t-hover);
}
.share-rol:hover { color: var(--text-1); }
.share-rol .ti { font-size: 13px; }
.share-cerca .share-rol { margin-right: -6px; }
/* Desplegable blanco del permiso: tarjeta sin trazo, sombra corta */
.share-rol-menu {
  position: fixed; z-index: 6100; min-width: 150px; padding: 6px;
  background: var(--surface-card); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 14px rgba(10, 14, 20, 0.10);
  display: flex; flex-direction: column; gap: 1px;
}
.share-rol-menu.hidden { display: none; }
.share-rol-opt {
  height: 32px; padding: 0 10px; border: none; border-radius: 8px; background: none;
  text-align: left; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.share-rol-opt:hover { background: rgba(10, 14, 20, 0.035); color: var(--text-1); }
.share-rol-opt.es-actiu { color: var(--text-1); }
.share-ico .pj-tipus-ic { width: 17px; height: 17px; }
.share-rol:hover { color: var(--text-1); }
.share-sugg-buit { padding: 14px 4px 6px; font-size: 13px; color: var(--text-3); }   /* mismo tamaño que el resto */
.share-sugg-buit.hidden { display: none; }
.share-llista { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.share-fila { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.share-pju { width: 24px; height: 24px; margin: 0; font-size: 10px; }
/* Un color pastel por persona (data-c), sin repetir mientras se pueda; los
   mismos en la lista del pop-up y en los avatares de la línea de arriba */
.pju[data-c] { color: rgba(10, 14, 20, 0.78); }
.pju[data-c="1"] { background: #BCD2EC; }   /* azulito */
.pju[data-c="2"] { background: #DADCE0; }   /* gris */
.pju[data-c="3"] { background: #F5D6B3; }   /* naranjita */
.pju[data-c="4"] { background: #C6E3CF; }   /* verdecito */
.pju[data-c="5"] { background: #DCD2EE; }   /* lila */
.pju[data-c="6"] { background: #F1E6B4; }   /* amarillito */
.pju[data-c="7"] { background: #F3D0D8; }   /* rosita */
/* Con foto de perfil (fotoPersona / pintarFotoPersona): la foto a sangre y
   sin las iniciales encima. [data-c] va aparte porque su `background` reinicia
   el tamaño y la posición del fondo. */
.pju.has-foto,
.pju.has-foto[data-c] { background-size: cover; background-position: center; color: transparent; }
/* Nombre y estado en la misma línea, separados por un puntito */
.share-fila-txt { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.share-sep { color: var(--text-3); flex-shrink: 0; }
.share-fila-nom { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-fila-mail { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-treure { flex-shrink: 0; }
.share-afegir { padding: 0 12px; flex-shrink: 0; }
.share-estat { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* mismo tamaño que el nombre */
/* Chats y documentos: fila con relleno gris al pasar el cursor y el icono
   de compartir a la derecha (check cuando ya está compartido) */
.share-fila.es-directa { border-radius: 8px; cursor: pointer; padding: 6px 8px; margin: 0 -4px; transition: background var(--t-hover); }
.share-fila.es-directa:hover { background: rgba(10, 14, 20, 0.035); }
.share-ico-btn {
  width: 28px; height: 28px; border: none; border-radius: 50%; background: none;
  color: var(--text-3); font-size: 16px; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--t-hover);
}
.share-fila.es-directa:hover .share-ico-btn, .share-ico-btn:hover { color: var(--text-1); }
/* Ya compartido: bloqueado, todo atenuado, sin relleno ni cursor */
.share-fila.es-bloquejada { opacity: 0.4; cursor: default; }
.share-fila.es-bloquejada:hover { background: none; }
.share-fila.es-bloquejada .share-ico-btn, .share-fila.es-bloquejada:hover .share-ico-btn { color: var(--text-3); cursor: default; }
/* Chats y documentos: se comparte directamente, sin permiso */
.share-modal.es-directe #share-rol { display: none; }
.share-fila:not(:hover) .share-afegir { color: var(--text-3); }

/* «Compartido con» + iniciales en filas de chats y documentos */
/* La fila de documento del Agente es flex (no rejilla de dos columnas) para
   que «Compartido con» quede a la derecha, en la misma línea que el nombre */
.pjd-hero-baix .home-doc-item { display: flex; align-items: center; }
.pjd-hero-baix .home-doc-item .home-doc-info { flex: 1; }
.comp-amb { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 10px; flex-shrink: 0; }
/* En las filas de chat: la estrella empuja a la derecha y estrella,
   iniciales y tres puntos van con el mismo hueco entre ellos */
.pjd-hist-fila .comp-amb { margin-left: 0; padding-left: 0; }
.pjd-hist-fila .pjd-hist-fav + .comp-amb { margin-left: 0; }
.pjd-hist-fila .comp-amb + .pjd-hist-kebab { margin-left: 0; }
.comp-amb .pju { width: 18px; height: 18px; font-size: 8px; margin-right: -5px; box-shadow: 0 0 0 1.5px var(--surface-card); }
.comp-amb .pju:last-child { margin-right: 0; }
.comp-amb .pju-mes { margin-left: 8px; font-size: 11px; }
/* El dueño del chat, el que lo compartió: mismo tamaño, anillo más marcado
   para poder señalarlo sin leer el tooltip.
   En las filas de chats NO: ahí el dueño sale en todas, y un aro negro en cada
   línea de la lista ensucia la pantalla. Se sabe por el orden —va primero— y
   por el tooltip. */
.comp-amb .pju.es-amo { box-shadow: 0 0 0 1.5px var(--surface-card), 0 0 0 2.5px var(--text-1); }
.pjd-hist-fila .comp-amb .pju.es-amo { box-shadow: 0 0 0 1.5px var(--surface-card); }

/* QUIÉN PUEDE ABRIR ESTE CHAT
   En la barra del chat del proyecto, pegado al botón de compartir. Vacío
   cuando el chat es solo mío: no deja hueco. */
.pjd-chat-gent { display: inline-flex; align-items: center; }
.pjd-chat-gent:empty { display: none; }
.pjd-chat-gent .comp-amb { margin-left: 0; padding-left: 0; margin-right: 2px; }
.pjd-chat-gent .pju { width: 22px; height: 22px; font-size: 9px; margin-right: -6px; }

/* CUÁNDO SE PREGUNTÓ
   Bajo la burbuja de la pregunta, pegada a su borde derecho como el avatar.
   Siempre a la vista: en un chat compartido es la mitad de la información. */
.msg-hora {
  align-self: flex-end;
  margin-top: 5px; padding-right: 2px;
  font-size: 12px; color: var(--text-3); white-space: nowrap;
}

/* Panel de documentos: la flecha de ampliar va junto a la cruz; las dos un
   pelín más grandes que la cruz del buscador */
/* El grupo de botones se va a la derecha con el PRIMERO; los de detrás solo
   se separan un pelo. Con `auto` en todos, cada uno se iba a su esquina. */
.pjd-hist-panel-cap .pjd-hist-panel-tit + .pjd-hist-panel-ampliar { margin-left: auto; }
.pjd-hist-panel-cap .pjd-hist-panel-ampliar + .pjd-hist-panel-ampliar { margin-left: 2px; }
.pjd-hist-panel-cap .search-modal-close { width: 28px; height: 28px; font-size: 15px; }
.pjd-hist-panel-cap .search-modal-close .ti { font-size: 15px; }
.pjd-hist-panel-cap .pjd-hist-panel-ampliar + .search-modal-close { margin-left: 2px; }
/* Filas de documento: tres puntos solo al pasar el cursor, iniciales a la derecha del todo */
.pjd-doc-fila { display: flex; align-items: center; }
.pjd-doc-fila .home-doc-info { flex: 1; }
.pjd-doc-fila .comp-amb { margin-left: auto; padding-left: 0; }
.pjd-doc-fila .pjd-doc-kebab { display: none; margin-left: 0; }
.pjd-doc-fila:hover .pjd-doc-kebab { display: flex; opacity: 1; pointer-events: auto; }
.pjd-doc-fila .comp-amb:not(:last-child) { margin-left: auto; }

/* «Abrir» en las filas del panel de documentos: texto gris → negro, solo al pasar el cursor */
.pjd-doc-obrir { display: none; border: none; background: none; padding: 0 6px; font: inherit; font-size: 13px; color: var(--text-3); cursor: pointer; flex-shrink: 0; transition: color var(--t-hover); }
.pjd-doc-obrir:hover { color: var(--text-1); }
#pjd-docs-panel .pjd-doc-fila:hover .pjd-doc-obrir { display: inline-flex; }


/* ─────────────────────────────────────────────────────────────────
   Biblioteca de prompts del agente
   El pergamino de la barra abre esta tarjeta: los arranques ya escritos
   del despacho y los que se guarda cada uno. Tarjeta blanca con sombra
   corta y sin trazo, como el resto de desplegables del chat.
   ───────────────────────────────────────────────────────────────── */
.pmt-wrap { position: relative; }
/* El pergamino va en su placa blanca redonda, como los botones del chat */
.pjd-pill-wrap .pill-bar .pmt-btn {
  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 .pmt-btn:hover { background: var(--surface-card); color: var(--text-1); box-shadow: 0 1px 2px rgba(10, 14, 20, 0.12), 0 3px 10px rgba(10, 14, 20, 0.10); }
.pjd-pill-wrap .pill-bar .pmt-btn svg { width: 18px; height: 18px; display: block; }
.pjd-pill-wrap .pmt-wrap { order: 1; }
.pjd-pill-wrap .pill-plus-wrap:not(.pmt-wrap) { margin-right: 4px; }

.pjd-pill-wrap { position: relative; }
/* SE ABRE HACIA DONDE QUEPA
   La barra de escribir vive pegada abajo, así que un desplegable que caiga
   hacia abajo se sale de la pantalla: en el chat estrecho del proyecto no
   se veía ni la lista. pmtColocar() mide el sitio que hay a cada lado y
   pone es-amunt o es-avall; sin clase, cae como siempre. */
.pmt-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  width: 100%; max-width: 380px;
  max-height: min(60vh, 440px);
  display: flex; flex-direction: column;
  background: var(--surface-card); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 10px 30px rgba(10, 14, 20, 0.12);
  overflow: hidden;
}
.pmt-pop.es-avall { top: calc(100% + 8px); bottom: auto; }
.pmt-pop.es-amunt { bottom: calc(100% + 8px); top: auto; }
/* La lista es lo único que cede alto: la búsqueda, los filtros y el pie se
   quedan siempre a la vista. */
.pmt-pop .pmt-llista { flex: 1 1 auto; min-height: 0; }
.pmt-pop.hidden { display: none; }
.pmt-cerca { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.pmt-cerca i { font-size: 16px; }
.pmt-cerca input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 13px; color: var(--text-1); }
.pmt-cerca input::placeholder { color: var(--text-3); }

/* Filtros: la pastilla de la casa, gris → negro, sin trazo */
.pmt-filtres { display: flex; align-items: center; gap: 6px; padding: 9px 12px 4px; }
.pmt-filtre {
  height: 28px; padding: 0 11px; border: none; border-radius: 999px;
  background: none; color: var(--text-3); font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--t-hover), background var(--t-hover);
}
.pmt-filtre:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.04); }
.pmt-filtre.es-on { color: var(--text-1); background: rgba(10, 14, 20, 0.05); }
/* La estrella no lleva pastilla: es el propio dibujo el que se rellena de gris */
.pmt-filtre-estrella { margin-left: auto; padding: 0 6px; }
.pmt-filtre-estrella:hover, .pmt-filtre-estrella.es-on { background: none; }
/* La misma pareja que en las filas: la de trazo un punto por debajo */
.pmt-filtre-estrella .ti { font-size: 14px; line-height: 1; }
.pmt-filtre-estrella.es-on { color: var(--text-2); }
.pmt-filtre-estrella .pmt-estrella-plena { display: none; width: 16px; min-width: 16px; height: 16px; flex: none; }
.pmt-filtre-estrella.es-on .pmt-estrella-plena { display: block; }
.pmt-filtre-estrella.es-on .ti { display: none; }

/* Poquitos de golpe: unos seis, y el resto con scroll */
.pmt-llista { max-height: 232px; overflow-y: auto; padding: 4px 8px 8px; }
.pmt-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r); cursor: pointer;
  transition: background var(--t-hover);
}
.pmt-fila:hover, .pmt-fila:focus-visible { background: rgba(10, 14, 20, 0.035); outline: none; }
.pmt-fila-ic { font-size: 16px; color: var(--text-3); flex-shrink: 0; }
.pmt-fila:hover .pmt-fila-ic { color: var(--text-1); }
.pmt-fila-txt { min-width: 0; flex: 1; overflow: hidden; }
.pmt-fila-tit { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmt-fila-sub { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Los iconos de la derecha solo asoman al pasar el cursor; el favorito, siempre */
.pmt-fila-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
/* Los iconos guardan su sitio siempre: se ocultan sin salir de la fila, así
   el texto no se mueve al pasar el cursor. */
.pmt-ic {
  width: 26px; height: 26px; border: none; background: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-3); font-size: 15px; transition: color var(--t-hover);
  visibility: hidden; opacity: 0;
}
.pmt-ic:hover { color: var(--text-1); }
.pmt-fila:hover .pmt-ic, .pmt-ic:focus-visible { visibility: visible; opacity: 1; }
.pmt-fav.es-fav, .pmt-fila.es-fav .pmt-fav { visibility: visible; opacity: 1; color: var(--text-2); }
/* Las dos estrellas, la de trazo y la llena, del mismo tamaño. La de trazo
   dibuja más grande dentro de su caja, así que va un punto por debajo. */
.pmt-ic .ti-star { font-size: 14px; line-height: 1; }
.pmt-fav .pjd-star-ple { display: block; width: 16px; min-width: 16px; height: 16px; flex: none; }
.pmt-buit { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--text-3); }

.pmt-peu { display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid var(--border); }
.pmt-peu-btn {
  height: 30px; padding: 0 12px; border: none; border-radius: 999px;
  background: none; color: var(--text-3); font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--t-hover), background var(--t-hover);
}
.pmt-peu-btn:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.04); }
.pmt-peu-btn .ti { font-size: 15px; }
.pmt-peu-btn#pjd-prompts-biblio, .pmt-peu-ok { margin-left: auto; }
.pmt-peu-ok { background: rgba(10, 14, 20, 0.05); color: var(--text-2); }
.pmt-peu-ok:not(:disabled):hover { background: var(--text-1); color: var(--surface-card); }
.pmt-peu-ok:disabled { opacity: .45; cursor: default; }

/* Crear o editar un prompt propio */
.pmt-edit-cos { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.pmt-lab { font-size: 13px; color: var(--text-3); }
.pmt-lab + .pmt-input { margin-bottom: 6px; }
.pmt-input {
  width: 100%; height: 36px; padding: 0 12px; border: none; border-radius: var(--r);
  background: rgba(10, 14, 20, 0.04); color: var(--text-1);
  font: inherit; font-size: 13px; outline: none; transition: background var(--t-hover);
}
.pmt-input::placeholder { color: var(--text-3); }
/* Mientras carga el aro, el texto de ayuda del campo se calla */
.pmt-input.sense-pista::placeholder { color: transparent; }
.pmt-input:hover, .pmt-input:focus { background: rgba(10, 14, 20, 0.06); }
/* Sin el tirador de redimensionar: ocupaba la esquina del martillo */
.pmt-input.pmt-textarea { height: auto; min-height: 104px; padding: 10px 12px 40px; resize: none; line-height: 1.45; }
.pmt-lab-info { display: flex; align-items: center; gap: 5px; }
/* El martillo, en la esquina de abajo a la derecha del campo. Sin el relleno
   lateral que trae el botón: apretaba el dibujo y lo recortaba. */
.pmt-textarea-wrap { position: relative; }
.pmt-magic {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 26px; height: 26px; padding: 0; flex: none;
  overflow: visible; border-radius: 50%;
}
.pmt-magic .magic-ico { width: 17px; height: 17px; flex: none; overflow: visible; }
.pmt-magic:disabled { opacity: .4; cursor: default; }

/* Prompt puesto: dentro de la barra del chat, encima de lo que se escribe.
   Su relleno gris es el de la casa —esquinas redondeadas y sin pegarse a los
   bordes—, con «Prompt» en tinta y el nombre en gris. El texto del prompt no
   vive aquí: se escribe en el campo, para poder retocarlo. La cruz sale al
   pasar el cursor y nunca lleva fondo: solo pasa de gris a negro. */
.pjd-pill-wrap .pill-bar .pmt-posat {
  flex: 1 1 100%; order: -1; min-width: 0; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 14px; border-radius: var(--r);
  background: rgba(10, 14, 20, 0.05);
}
.pmt-posat.hidden { display: none; }
.pmt-posat-lab { font-size: 14px; color: var(--text-1); flex-shrink: 0; }
.pmt-posat-nom { font-size: 14px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmt-posat-x {
  margin-left: auto; flex-shrink: 0;
  width: 22px; height: 22px; border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 15px; cursor: pointer; opacity: 0;
  transition: color var(--t-hover), opacity var(--t-hover);
}
.pjd-pill-wrap .pill-bar:hover .pmt-posat-x, .pmt-posat-x:focus-visible { opacity: 1; }
.pmt-posat-x:hover { color: var(--text-1); background: none; }


/* ─────────────────────────────────────────────────────────────────
   Biblioteca · los prompts que escribe cada uno
   ───────────────────────────────────────────────────────────────── */
/* Cabecera de estante: el título y, a la derecha, «Crear un prompt» */
.pjx-plant-cap { display: flex; align-items: baseline; gap: 12px; }
.pjx-plant-cap .pjx-plant-tit-sec { margin-bottom: 0; }
/* El mismo aire que los demás estantes entre el título y sus tarjetas */
.pjx-plant-cap { margin-bottom: 12px; }
.pjx-plant-cap .pjx-plant-tit-sec { margin-bottom: 0; }
.pjx-plant-nou {
  margin-left: auto; height: 30px; padding: 0 12px 0 10px;
  border: none; border-radius: 999px; background: none;
  font: inherit; font-size: 13px; color: var(--text-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--t-hover), background var(--t-hover);
}
.pjx-plant-nou:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.05); }
.pjx-plant-nou .ti { font-size: 15px; }

/* Formulario de crear un prompt, dentro del propio estante */
.pjx-prompt-nou {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px; padding: 16px; border-radius: var(--r-lg);
  background: rgba(10, 14, 20, 0.035);
}
.pjx-prompt-nou.hidden { display: none; }
.pjx-prompt-nou .pmt-input { background: var(--surface-card); }
.pjx-prompt-nou-peu { display: flex; align-items: center; gap: 10px; }
.pjx-prompt-comp { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.pjx-prompt-comp input { width: 15px; height: 15px; accent-color: var(--text-1); cursor: pointer; }
/* «Compartir con…» a la izquierda; «Cancelar» y «Guardar» a la derecha */
.pjx-prompt-nou-peu #pjx-prompt-cancel { margin-left: auto; }

/* Tarjetas propias: el mismo formato que las del despacho */
.pjx-meu-card .pjx-plant-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Compartir y quitar viven en la fila de abajo, a la derecha de «Ver»
   (antes iban sueltos arriba y se cruzaban con el nombre) */
.pjx-meu-acts { display: flex; align-items: center; gap: 2px; }
.pjx-meu-ic {
  width: 26px; height: 26px; border: none; background: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-3); font-size: 15px;
  transition: color var(--t-hover);
}
.pjx-meu-ic:hover { color: var(--text-1); }
.pjx-meus-buit { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); padding: 4px 0 8px; }
/* La información: en la esquina de la tarjeta de crear y junto al título */
.pjx-tuto-info { position: absolute; top: 12px; right: 12px; pointer-events: auto; }
.pjx-sec-info { margin-left: 2px; align-self: center; }

/* Compartir un prompt: «Todo el despacho» es una fila más, igual que las
   personas —una sola línea y el relleno gris solo al pasar el cursor—, con
   el escudo del despacho en el círculo del avatar. */
.share-pju-tot { background: rgba(10, 14, 20, 0.08); color: var(--text-2); overflow: hidden; }
.share-pju-tot .ti { font-size: 14px; }
.share-pju-tot img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* El botón «Compartir con…» del formulario de prompts */
.pjx-prompt-comp { margin-right: 0; }

/* Llevar un documento al Agente: el chat, junto a «Abrir». Solo asoma al
   pasar el cursor por la fila, y va de gris a negro sin fondo. */
.pjd-doc-chat {
  display: none; width: 26px; height: 26px; padding: 0; border: none; background: none;
  align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  color: var(--text-3); transition: color var(--t-hover);
}
.pjd-doc-chat .ti { font-size: 17px; display: block; }
.pjd-doc-chat:hover { color: var(--text-1); }
.pjd-doc-fila:hover .pjd-doc-chat { display: flex; }
/* La misma flecha en «Documentos recientes» del chat: asoma al pasar por
   encima de la fila, como en el Agente. */
.home-doc-item:hover .home-doc-chat { display: flex; }

/* Elegir varios documentos en el panel y llevárselos juntos al Agente.
   La casilla es el punto negro con el visto blanco de la casa: solo asoma al
   pasar el cursor, y se queda cuando el documento está elegido. */
.pjd-doc-fila { position: relative; }
.pjd-doc-tick {
  width: 12px; height: 12px; padding: 0; margin-right: 5px; flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--border-2); border-radius: 50%; background: none;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.pjd-doc-tick .ti { font-size: 8px; color: transparent; }
/* Elegir varios es cosa del panel de documentos: en las tarjetas de
   «Documentos del proyecto» de la portada del Agente no pinta nada. */
/* Las casillas solo con «Seleccionar» encendido. Entonces la fila entera se
   elige de un clic y los botones sueltos (abrir, llevar, tres puntos) no
   salen: lo que se hace, se hace con todos los elegidos a la vez. */
.pjd-docs-panel.es-triant #pjd-docs-panel-llista .pjd-doc-tick { display: flex; }
.pjd-docs-panel.es-triant #pjd-docs-panel-llista .pjd-doc-obrir,
.pjd-docs-panel.es-triant #pjd-docs-panel-llista .pjd-doc-chat,
.pjd-docs-panel.es-triant #pjd-docs-panel-llista .pjd-doc-kebab,
.pjd-docs-panel.es-triant #pjd-docs-panel-llista .comp-amb { display: none !important; }
/* Con la pastilla flotando, el último documento no queda debajo de ella */
.pjd-docs-panel.es-triant #pjd-docs-panel-llista { padding-bottom: 58px; }
.pjd-doc-tick:hover { border-color: var(--text-4); }
.pjd-doc-tick.es-triat { background: var(--text-1); border-color: var(--text-1); }
.pjd-doc-tick.es-triat .ti { color: var(--surface-card); }
#pjd-docs-panel-llista .pjd-doc-fila.es-triat { background: rgba(10, 14, 20, 0.045); }
/* Fuera del panel, ni se ve ni se puede tocar */
.pjd-doc-fila .pjd-doc-tick { display: none; }
#pjd-hero-docs .pjd-doc-tick, .pjx-docs-grid .pjd-doc-tick { display: none !important; }

/* El pie del panel: cuántos hay elegidos y qué hacer con ellos */
/* La fila de acciones ocupa EXACTAMENTE lo mismo que la de filtros a la que
   sustituye: así la lista no se mueve al entrar y salir del modo elegir. */
/* Pastilla flotante abajo, como la referencia: cuántos van, la acción
   principal y el resto en iconos. Flota, así que encender «Seleccionar» no
   mueve ni la búsqueda ni los filtros ni la lista. */
.pjd-docs-peu {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: 2px;
  padding: 5px 6px 5px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 10px 26px -12px rgba(10, 14, 20, 0.40);
  white-space: nowrap;
}
.pjd-hist-filtres { min-height: 36px; align-items: center; }
.pjd-docs-peu.hidden { display: none; }
.pjd-docs-peu-n {
  font-size: 12.5px; color: var(--text-3); white-space: nowrap;
  margin: 0 6px 0 2px; font-variant-numeric: tabular-nums;
}
/* La casilla de «todos»: vacía, a medias o llena, como las filas */
.pjd-docs-peu-tots {
  width: 24px; height: 24px; border: none; background: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* El mismo círculo de las filas, un pelín mayor: gris cuando no hay nada,
   en tinta con el visto blanco cuando están todos. */
.pjd-docs-peu-box {
  width: 13px; height: 13px; box-sizing: border-box;
  border: 1.5px solid var(--border-2); border-radius: 50%;
  background: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.pjd-docs-peu-box .ti { font-size: 9px; color: transparent; }
.pjd-docs-peu-tots.es-ple .pjd-docs-peu-box,
.pjd-docs-peu-tots.es-part .pjd-docs-peu-box { background: var(--text-1); border-color: var(--text-1); }
.pjd-docs-peu-tots:hover .pjd-docs-peu-box { border-color: var(--text-4); }
.pjd-docs-peu-tots.es-ple .pjd-docs-peu-box .ti { color: var(--surface-card); }
/* A medias: la rayita blanca dentro del mismo círculo */
.pjd-docs-peu-tots.es-part .pjd-docs-peu-box::after {
  content: ''; position: absolute; width: 6px; height: 1.5px; border-radius: 1px; background: var(--surface-card);
}
.pjd-docs-peu-tots.es-part .pjd-docs-peu-box { position: relative; }
.pjd-docs-peu-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
/* Los iconos sueltos: gris que se vuelve negro, sin fondo */
.pjd-docs-peu-ic {
  width: 28px; height: 28px; border: none; background: none; padding: 0;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 16px; cursor: pointer;
  transition: color var(--t-hover);
}
.pjd-docs-peu-ic:hover { color: var(--text-1); background: none; }
.pjd-docs-peu-ic.hidden { display: none; }
/* La fila de filtros de la tabla grande: los mismos botones que «Añadir
   documento» o «Vincular normativa», y el elegido en negro con letra blanca. */
.pjx-docs-filtres {
  display: flex; align-items: center; gap: 8px;
  /* Misma geometría que la barra de acciones de arriba: los márgenes
     negativos llevan la línea de abajo hasta los bordes del panel, y el
     padding lateral deja los botones a plomo con el icono del chat. El aire
     de arriba y el de abajo, iguales. */
  margin: 0 calc(-1 * var(--sp-6));
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.pjx-docs-filtres .pjx-docs-filtre {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: none; color: var(--text-1);
  font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover), color var(--t-hover);
}
.pjx-docs-filtres .pjx-docs-filtre span {
  color: var(--text-3); font-variant-numeric: tabular-nums;
  transition: color var(--t-hover);
}
.pjx-docs-filtres .pjx-docs-filtre:hover { border-color: var(--border-2); background: rgba(10, 14, 20, 0.02); }
/* El elegido: relleno gris y sin trazo, como los chips del sistema */
.pjx-docs-filtres .pjx-docs-filtre.es-actiu {
  background: rgba(10, 14, 20, 0.06); border-color: transparent; color: var(--text-1);
}
.pjx-docs-filtres .pjx-docs-filtre.es-actiu span { color: var(--text-3); }
.pjx-docs-filtres .pjx-docs-filtre.es-actiu:hover { background: rgba(10, 14, 20, 0.10); border-color: transparent; }

/* La misma pastilla, en la pestaña de Documentación entera */
.pjx-body-docs, #pjx-body-docs { position: relative; }
.pjx-docs-peu { bottom: 20px; }
/* Con la pastilla abajo, la tabla deja hueco para el último documento */
#pjx-body-docs.es-triant #pjd-docs-list { padding-bottom: 60px; }
/* Eliminar: el único en rojo, y solo al pasar el cursor */
.pjd-docs-peu-ic.es-perill:hover { color: var(--coral); }
.pjd-docs-peu-ic:disabled { opacity: .35; cursor: default; }
.pjd-docs-peu-ic:disabled:hover { color: var(--text-3); }
.pjd-docs-peu-btn:disabled { opacity: .4; cursor: default; }
.pjd-docs-peu-btn:disabled:hover { background: none; color: var(--text-3); }
.pjd-docs-peu-btn.es-primari:disabled:hover { background: rgba(10, 14, 20, 0.05); color: var(--text-2); }
/* «Seleccionar», al final de la fila de filtros. Misma regla que «Todos» y
   «Compartidos»: gris que se vuelve negro, sin fondo. El fondo gris queda
   solo para lo que está elegido, si no la fila no casa. */
.pjd-docs-triar {
  margin-left: auto; height: 28px; padding: 0 12px; border: none; border-radius: 999px;
  background: none; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.pjd-docs-triar:hover { color: var(--text-1); background: none; }
.pjd-hist-filtres.hidden { display: none; }
.pjd-docs-peu-btn {
  height: 28px; padding: 0 12px; border: none; border-radius: 999px;
  background: none; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--t-hover), background var(--t-hover);
}
.pjd-docs-peu-btn:hover { color: var(--text-1); background: none; }
.pjd-docs-peu-btn .ti { font-size: 14px; }
#pjd-docs-peu-cancel { padding: 0 8px; }
.pjd-docs-peu-btn.es-primari { background: rgba(10, 14, 20, 0.05); color: var(--text-2); }
.pjd-docs-peu-btn.es-primari:hover { background: var(--text-1); color: var(--surface-card); }

/* Subida de documentos en Documentación: la misma barra de progreso, pero
   dentro de la tabla, sin la línea de abajo que la separaba del visor. */
/* El aro del martillo mientras el servidor contesta: centrado en el hueco
   de la caja que espera —documentos, historial, el panel del lateral. */
.pjd-aro-espera {
  display: flex; align-items: center; justify-content: center;
  min-height: 88px; padding: 16px 0;
}

.pjd-puja { position: relative; border-bottom: none; padding: 12px 0 14px; background: none; }
/* El mismo aviso dentro del panel del lateral: con su aire a los lados */
.pjd-puja-panel { padding: 6px 14px 12px; flex-shrink: 0; }
.pjd-puja-panel .pjd-puja-x { top: 2px; right: 12px; }
.pjd-puja.hidden { display: none; }
/* Si algo falla, el aviso se queda en rojo con el motivo y una cruz para
   quitarlo —la cruz nunca lleva fondo, solo se oscurece. */
.pjd-puja.es-error .pdf-trad-tit { color: var(--coral); }
.pjd-puja.es-error .pdf-trad-barra { display: none; }
.pjd-puja-x {
  display: none; position: absolute; top: 8px; right: 0;
  width: 26px; height: 26px; border: none; background: none; padding: 0;
  border-radius: var(--r-pill); cursor: pointer;
  color: var(--text-3); font-size: 15px;
  align-items: center; justify-content: center;
  transition: color var(--t-hover);
}
.pjd-puja-x:hover { color: var(--text-1); background: none; }
.pjd-puja.es-error .pjd-puja-x { display: inline-flex; }

/* «Normativa» del chat principal: el archivador propio, no el glifo de la
   fuente. Se pinta con una máscara para que siga al color del chip. */
.juris-chip .ti-database, .juris-item .ti-database, .pjd-abast-wrap .ti-database {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
}
.juris-chip .ti-database::before, .juris-item .ti-database::before,
.pjd-abast-wrap .ti-database::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("icons/normativa.svg?v=1") no-repeat center / contain;
          mask: url("icons/normativa.svg?v=1") no-repeat center / contain;
}
/* En la icona de la barra del Agente va un punto más grande, como el resto
   de las suyas (la carpeta y el documento con lupa). */
.pjd-abast-wrap .pill-plus-btn .ti-database,
.pjd-abast-wrap .pill-plus-btn .ti-database::before { width: 18px; height: 18px; }
/* «Web» del chat principal: el globo propio, no el glifo de la fuente. Misma
   máscara que Normativa, y el color lo pone la regla azul de más arriba. */
.juris-chip .ti-world-search, .juris-item .ti-world-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
}
.juris-chip .ti-world-search::before, .juris-item .ti-world-search::before {
  content: ""; width: 16px; height: 16px; 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;
}

/* ══════════════════════════════════════════════════════════════════
   LA FICHA DE LA PARCELA (Mapas) — v2
   Regla: ningún dato sin fuente. Cada campo (.df) lleva su estado:
     .es-real     · dato de una fuente oficial, con la fuente debajo
     .es-derivat  · calculado a partir de otro dato real, se dice de cuál
     .es-pendent  · falta la fuente: nombre del campo en rojo + qué falta
   body.amagar-pendents esconde los pendientes de golpe (para enseñar la
   ficha a un cliente). Todo a 13px, como el resto de la ficha.
   ══════════════════════════════════════════════════════════════════ */
.pf { display: flex; flex-direction: column; gap: var(--sp-5); font-size: 13px; color: var(--text-1); }

/* ── El campo ── */
.df { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.df-et { font-size: 13px; color: var(--text-3); line-height: 1.3; }
.df-val { font-size: 13px; color: var(--text-1); line-height: 1.35; overflow-wrap: anywhere; }
.df-font, .df-nota { font-size: 13px; color: var(--text-3); line-height: 1.4; }
.df-nota { color: var(--text-2); }
/* Pendiente: el nombre en gris y una ⓘ roja al lado que, al pasar el cursor,
   dice qué falta. El valor, una raya: nunca un número inventado. */
.df.es-pendent .df-et { color: var(--text-3); }
.df-ico {
  display: inline-flex; align-items: center; margin-left: 6px;
  color: var(--coral); cursor: help; vertical-align: -2px;
}
.df-ico .ti { font-size: 14px; }
.df-val.es-buit { color: var(--text-3); }
.df-falta { font-size: 13px; color: var(--coral); line-height: 1.35; overflow-wrap: anywhere; }
.df.es-pendent .df-nota { color: var(--text-2); }
/* Versión en línea: etiqueta y valor en una fila (listas del Catastro) */
.df.es-compacte { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.df.es-compacte:last-of-type { border-bottom: none; }
.df.es-compacte .df-et { flex: 0 0 auto; }
.df.es-compacte .df-val { text-align: right; }
.df.es-compacte .df-font, .df.es-compacte .df-nota { flex-basis: 100%; text-align: right; }
/* Versión de una línea: «Campo · Falta: …» (dentro de listas y chips) */
.df.es-linia { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.df.es-linia .df-et::after { content: ' ·'; }
/* Apagar los pendientes de golpe */
body.amagar-pendents .df.es-pendent, body.amagar-pendents .pf-acc-falta { display: none; }

/* ── 1. Cabecera ── */
.pf-cap { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Cabecera: municipio y referencia (sin distrito y barrio) */
.pf-cap .pf-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-adreca { margin: 0; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
/* Los iconos de la parcela viven en la barra de arriba, sobre la línea gris,
   en el mismo sitio que los de un documento abierto. */
.mapa-acts { margin-left: auto; }
.mapa-acts .pdf-visor-btn:disabled { opacity: .4; cursor: default; }
/* EL DOCUMENTO QUE LO DICE
   Al final de la fila y sin sacarla de su línea: ocupa su hueco siempre y
   solo se ve al pasar el cursor por el bloque, como la ⓘ de la esquina. */
.df-doc {
  order: 3; flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-block: -4px; padding: 0;
  border: none; border-radius: var(--r-sm); background: none;
  color: var(--text-3); cursor: pointer;
  opacity: 0; transition: opacity var(--t-hover), color var(--t-hover), background var(--t-hover);
}
.df-doc .ti { font-size: 15px; }
.pf-bloc:hover .df-doc, .pf-plegable-cos:hover .df-doc,
.df-doc:focus-visible { opacity: 1; }
.df-doc:hover { color: var(--text-1); background: rgba(10, 14, 20, 0.05); }

/* La referencia, con sus dos iconos dentro de la fila. Es un flex, así que
   el `text-align: right` de la fila no la mueve: se alinea aquí. */
.pf-ref .df-val { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
/* El escudo del municipio, separado de su nombre y un punto más pequeño */
.pf-params .df-val .norm-flag { margin-right: 6px; vertical-align: -2px; }
.pf-params .df-val .norm-cell-flag { width: 14px; height: 14px; }
.pf-ref-num { font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--text-1); }
/* COPIAR Y ABRIR EN LA SEDE
   Dos iconos sin rótulo que solo salen al pasar el cursor por la
   referencia: en reposo, la ficha arranca con la dirección y el número y
   nada más. Ocupan su hueco siempre, así que la referencia no se mueve. */
.pf-copiar, .pf-seu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: none; background: none; box-shadow: none;
  font-family: var(--font); font-size: 13px; color: var(--text-3); text-decoration: none; cursor: pointer;
  opacity: 0;
  transition: color var(--t-hover);
}
.pf-ref:hover .pf-copiar, .pf-ref:hover .pf-seu,
.pf-copiar:focus-visible, .pf-seu:focus-visible { opacity: 1; }
.pf-copiar:hover, .pf-seu:hover { color: var(--text-1); }
.pf-copiar i, .pf-seu i { font-size: 15px; }

/* ── 2. Foto ── */
.pf-foto { margin-bottom: 0; }

/* UN BLOQUE GRIS POR SECCIÓN, CON FILAS DENTRO
   El rótulo va fuera, sobre el gris; todo lo de la sección, dentro de un
   solo relleno. Es el mismo patrón de .avis-card, que es el que ya se lee
   bien en Avisos: sin él, la ficha era una lista larga sin costuras y no
   se veía dónde acababa una cosa y empezaba la siguiente. */
.pf-bloc {
  display: flex; flex-direction: column;
  padding: 2px 14px;
  border-radius: var(--r-md);
  background: rgba(10, 14, 20, 0.05);   /* el mismo gris de los apartados */
  position: relative;
}
/* LA CABECERA
   Municipio, distrito y referencia no son una lista larga: son tres datos
   que dicen qué parcela es. Sin rayas entre ellos y más juntos, se leen
   como un bloque y no como el principio de un listado. */
.pf-cap .pf-bloc { padding: 10px 14px; box-shadow: none; }
/* Sus nombres son cortos, así que la columna va más justa */
.pf-cap .pf-bloc { --pf-et: 9.5em; }
.pf-cap .pf-bloc .df { border-top: none; padding: 4px 0; }
/* Dentro del bloque, cada dato es una FILA: el nombre en gris a la
   izquierda, el valor en tinta a la derecha, y una raya fina entre ellas.
   La raya va ARRIBA de cada fila y no abajo: así la última no deja una
   raya suelta contra el borde del gris, sea cual sea el último trozo. */
.pf-bloc :is(.df, .pf-clau-fila, .pf-flag, .pf-exp, .pf-usos, .pf-lead-peu,
             .pf-font, .pf-exp-toggle, .pf-norma-fila) {
  padding: 9px 0;
  border-top: 1px solid var(--border);
  border-bottom: none;
}
.pf-bloc > :first-child,
.pf-bloc > :first-child > :first-child { border-top: none; }
/* El valor ocupa lo que queda y se alinea a la derecha: con un valor largo
   —«13a · Densificació urbana semiintensiva»— antes se caía a la línea de
   abajo y se quedaba pegado a la izquierda, descuadrando la columna. */
.pf-bloc .df {
  flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
/* DOS COLUMNAS, LAS DOS A LA IZQUIERDA
   Los nombres en la primera y las respuestas en la segunda, todas
   empezando donde mismo. Con el valor pegado a la derecha, cada respuesta
   arrancaba en un sitio distinto según lo que midiera, y la columna no se
   leía de arriba abajo. El ancho del nombre es fijo a posta: si lo dejamos
   al contenido, cada fila se coloca por su cuenta y vuelven a bailar. */
.pf-bloc .df {
  display: grid; grid-template-columns: var(--pf-et, 11em) 1fr;
  align-items: baseline; gap: var(--sp-3);
}
.pf-bloc .df-et  { grid-column: 1; }
.pf-bloc .df-val { grid-column: 2; min-width: 0; text-align: left; }
.pf-bloc .df-nota, .pf-bloc .df-font { grid-column: 2; text-align: left; }
/* .es-compacte trae su propio reparto de flex —nombre y valor a los dos
   extremos— que aquí no pinta nada: dentro de un bloque manda la rejilla. */
.pf-bloc .df.es-compacte { padding: 9px 0; border-bottom: none; }
/* LA CABECERA, JUNTA DE VERDAD
   Municipio y referencia son dos datos que dicen qué parcela es: van
   apretados, como un solo bloque. La regla de más arriba que los juntaba
   (4 px) quedaba pisada por esta de 9 px, que va detrás y pesa lo mismo;
   con .pf-cap delante pesa más y manda. */
.pf-cap .pf-bloc { padding: 8px 14px; }
.pf-cap .pf-bloc .df.es-compacte { padding: 3px 0; }
/* Copiar y abrir en la Sede son iconos sin fondo: aunque no se vean
   ocupaban 26 px de alto y estiraban la fila de la referencia. Se quedan
   con el alto de la letra; el hueco a lo ancho no cambia. */
.pf-cap .pf-ref .pf-copiar, .pf-cap .pf-ref .pf-seu { height: 18px; }
.pf-bloc .df.es-compacte .df-et  { flex: none; }
.pf-bloc .df.es-compacte .df-val { text-align: left; }
.pf-bloc .df.es-compacte .df-nota, .pf-bloc .df.es-compacte .df-font { flex-basis: auto; text-align: left; }
/* En una fila con el valor a la derecha, el punto tras el nombre sobra:
   era para cuando el dato iba pegado al nombre, en la misma línea. */
.pf-bloc .df.es-linia .df-et::after { content: none; }
.pf-bloc .df-nota, .pf-bloc .df-font { flex-basis: 100%; text-align: right; }
/* Los contenedores de dentro no pintan nada: el gris es uno solo. La hoja
   blanca se salva a posta — es justo lo que sí tiene que pintar. */
.pf-bloc > div:not(.pf-fulla), .pf-bloc > section { background: none; padding: 0; border: none; }
.pf-bloc .pf-font { color: var(--text-3); }

/* ── 3. Usos ── */
/* Ya no es una caja aparte con su borde: es una sección más, con su rótulo
   fuera y su bloque gris, como las de debajo. */
.pf-lead { display: flex; flex-direction: column; gap: var(--sp-2); }

.pf-lead-sub { margin: 0; color: var(--text-2); line-height: 1.4; }
.pf-lead-sub:empty { display: none; }
/* La clave, como pastilla de trazo (sin fill); pendiente en rojo */
.pf-clau-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; border: 1px solid var(--border-2); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
/* En rejilla de tres columnas, «2,00 m² techo/m² suelo» se partía en tres
   líneas dentro de un dedo de ancho. En filas se lee de un vistazo. */
.pf-params { display: flex; flex-direction: column; }
.pf-usos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* La pastilla es inline-flex: sin `min-width: 0` no encoge y un uso largo
   —«Vivienda plurifamiliar y apartamentos»— se salía de la columna. */
.pf-chip { border: 1px solid var(--border-2); background: none; color: var(--text-1); font-size: 13px; white-space: normal; max-width: 100%; min-width: 0; flex-wrap: wrap; line-height: 1.3; }
.pf-chip.es-existent { color: var(--text-2); }
/* LOS USOS DE LA PARCELA, DEL COLOR DE SU FAMILIA
   Los mismos colores que los temas de Avisos, con la paleta de usos del
   suelo de la casa: vivienda, actividad, industria, equipamiento y suelo
   libre. El color dice DE QUÉ VA el uso, no si está permitido — eso lo
   dice el rótulo de la izquierda («Admitidos», «Prohibidos»). */
.pf-chip.es-us-habitatge  { background: var(--badge-residential-bg); color: var(--badge-residential-text); border-color: color-mix(in srgb, var(--badge-residential-text) 35%, transparent); }
.pf-chip.es-us-activitat  { background: var(--badge-special-bg);     color: var(--badge-special-text);     border-color: color-mix(in srgb, var(--badge-special-text) 35%, transparent); }
.pf-chip.es-us-industria  { background: var(--badge-industrial-bg);  color: var(--badge-industrial-text);  border-color: color-mix(in srgb, var(--badge-industrial-text) 35%, transparent); }
.pf-chip.es-us-dotacional { background: var(--badge-dotacional-bg);  color: var(--badge-dotacional-text);  border-color: color-mix(in srgb, var(--badge-dotacional-text) 35%, transparent); }
.pf-chip.es-us-lliure     { background: var(--badge-green-bg);       color: var(--badge-green-text);       border-color: color-mix(in srgb, var(--badge-green-text) 35%, transparent); }
/* El artículo, dentro de la pastilla, en el color de la familia rebajado */
.pf-chip[class*="es-us-"] .pf-norma-art { color: currentColor; opacity: 0.7; }

.pf-usos .df-nota { flex-basis: 100%; }
.pf-lead-peu { padding-top: 0; border-top: none; }
/* La tabla por claves del PGM: cada valor con su artículo (la cita, al pasar por encima) */
.pf-norma-val { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pf-norma-val + .pf-norma-val { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
/* DE QUÉ DEPENDE ESE VALOR
   Un mismo parámetro tiene varios valores según el caso —la altura, según el
   ancho de vial; el techo, según cómo se actúe— y la condición es lo que
   dice cuál te toca. Suelta y en gris se leía como una nota al pie; en su
   relleno gris se ve que va PEGADA a ese valor y no al de al lado. */
.pf-norma-cond {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(10, 14, 20, 0.05);
  font-size: 12px; color: var(--text-2); line-height: 1.35;
}
/* La pastilla es inline-flex: el espacio que hay en el HTML entre el uso y
   su artículo se lo come el flex y salía «Viviendaart. 277». */
.pf-norma-art { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); white-space: nowrap; cursor: help; margin-left: 5px; }
/* Cada clase de uso es una fila más: el rótulo a la izquierda como los
   demás nombres, y sus pastillas a la derecha, envolviendo si no caben. */
/* stretch a posta: la regla de más arriba dejaba `align-items: center` y,
   en columna, eso encoge cada fila a su contenido y la centra — por eso los
   rótulos de los usos no caían a la izquierda como los demás nombres. */
.pf-usos { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.pf-usos-et { flex: 0 0 auto; font-size: 13px; color: var(--text-3); }
/* LOS USOS, A TODO LO ANCHO
   Aquí no manda la retícula de dos columnas: el rótulo va solo en su línea
   y las pastillas debajo, ocupando el bloque entero. Metidas en la columna
   de la derecha, una lista de nueve usos se estiraba en nueve renglones de
   un dedo de ancho y dejaba media ficha en blanco a la izquierda. */
.pf-usos-grup { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.pf-usos-vals { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pf-usos-conds { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* Lo mismo para un uso que solo se admite con condiciones */
.pf-uso-cond { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13px; line-height: 1.4; }
.pf-uso-cond .pf-uso-detall {
  display: inline-block; margin-top: 3px; padding: 3px 8px;
  border-radius: var(--r-xs); background: rgba(10, 14, 20, 0.05);
  font-size: 12px; color: var(--text-2);
}
.pf-lead-peu { display: flex; flex-direction: column; gap: 6px; }
.pf-lead-peu .pf-plegable { margin-top: 0; }
.pf-norma-fila { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pf-norma-fila:last-child { border-bottom: none; }
.pf-norma-tipus { font-size: 12px; color: var(--text-2); }
.pf-norma-nota { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }

/* (Los chips de perfil —Arquitecto, Promotor, Constructor— se cambiaron por
   las preguntas rápidas: ver «PREGUNTAS RÁPIDAS» al final.) */

/* ── LA FICHA RESUMEN ──────────────────────────────────────────────
   Cinco datos fijos, sin desplegable: lo que se mira antes de decidir si la
   parcela interesa. Rótulo pequeño en gris arriba y el dato en el cuerpo de
   los títulos de tarjeta. Un dato que no ha llegado dice «Sin dato»: el
   hueco vacío se lee como «no hay», que no es lo mismo. */
.pf-resum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 18px;
  margin-top: var(--sp-3);
  padding: 14px 16px;
  border-radius: var(--r-md);
  /* Una sola tarjeta gris, como los apartados. Con rayas entre celdas, los
     cinco datos no llenan las seis casillas y quedaba un hueco fantasma. */
  background: rgba(10, 14, 20, 0.05);
}
.pf-resum:empty { display: none; }
.pf-resum-camp { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-resum-et {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--text-3); line-height: 1.3;
}
.pf-resum-val {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 13px; font-weight: 500; color: var(--text-1); line-height: 1.35;
}
.pf-resum-buit { color: var(--text-3); font-weight: 400; }
.pf-resum-segons { font-weight: 400; color: var(--text-2); }
/* El punto naranja de «Condicionantes», para lo que hay que mirar sí o sí */
.pf-resum-punt { flex: 0 0 auto; align-self: center; background: var(--coral); opacity: 1; }

/* ── LOS TRES GRUPOS POR IMPACTO ───────────────────────────────────
   El rótulo, del mismo tamaño y color que los nombres de dato. Los puntos,
   los que ya había: naranja lo que para, gris oscuro lo que condiciona y
   gris claro lo que solo se cuenta. */
.pf-grup-et {
  padding: 10px 0 4px;
  font-size: 13px; color: var(--text-3); line-height: 1.3;
}
.pf-bloc .pf-grup-et:first-child { padding-top: 0; }
.pf-flag.es-bloqueja .norm-dot,   .pf-exp.es-bloqueja .pf-exp-punt   { background: var(--coral);  opacity: 1; }
.pf-flag.es-condiciona .norm-dot, .pf-exp.es-condiciona .pf-exp-punt { background: var(--text-2); opacity: 1; }
.pf-flag.es-informatiu .norm-dot, .pf-exp.es-informatiu .pf-exp-punt { background: var(--text-3); opacity: .5; }
.pf-exp-cap { gap: var(--sp-2); }
.pf-exp-punt { flex: 0 0 auto; align-self: center; width: 7px; height: 7px; border-radius: 100px; }

/* ── LO QUE NO AFECTA Y LO QUE YA NO MANDA ─────────────────────────
   Un desplegable al final en vez de un párrafo por cada «no pasa nada». */
.pf-sensecap { margin-top: 10px; }
.pf-sensecap > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 0; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--text-3);
}
.pf-sensecap > summary::-webkit-details-marker { display: none; }
.pf-sensecap > summary:hover { color: var(--text-1); }
.pf-sensecap-fl { margin-left: auto; font-size: 14px; transition: transform var(--t-hover); }
.pf-sensecap[open] .pf-sensecap-fl { transform: rotate(90deg); }
.pf-sensecap-cos { display: flex; flex-direction: column; }
/* Sin vigencia: en gris claro, con el motivo debajo (sin tachar: ya los aparta su desplegable) */
.pf-exp.es-sense-vigencia .pf-exp-nom { color: var(--text-3); }
.pf-exp.es-sense-vigencia .pf-exp-sub { color: var(--text-3); }

/* ── EL TEXTO QUE APLICA ───────────────────────────────────────────
   El fragmento del artículo en el mismo gris de la casa, recortado a tres
   líneas hasta que se pide verlo entero. */
.pf-art-frag {
  margin-top: 6px; padding: 10px 12px;
  border-radius: var(--r-xs);
  background: rgba(10, 14, 20, 0.05);
}
.pf-art-text {
  margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.pf-art-frag.es-obert .pf-art-text { -webkit-line-clamp: unset; overflow: visible; }
.pf-art-mes {
  margin-top: 6px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer;
}
.pf-art-mes:hover { color: var(--text-1); }
/* El nombre oficial, en la línea gris con el código y la fecha */
.pf-exp-oficial {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ── Secciones ── */
.pf-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
/* CADA APARTADO ES UNA TARJETA GRIS QUE SE ABRE Y SE CIERRA
   El mismo relleno y la misma forma que «La parcela y el edificio», para
   que todo lo que se despliega en la ficha se vea igual. Cerrada queda
   solo la barra del rótulo; abierta, los datos debajo, en el mismo gris. */
.pf-sec, .pf-plegable {
  border: none; border-radius: var(--r-md);
  background: rgba(10, 14, 20, 0.05);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
}
/* EL RÓTULO ES EL BOTÓN
   Todo el rótulo se pulsa. Sin fondo propio ni borde: solo el «+»/«−» de
   la derecha, que pasa de gris a negro. */
.pf-sec-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; margin: 0; padding: 10px 14px; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer;
}
/* El «+»/«−» en un círculo blanco sobre el gris de la barra: suelto se
   confundía con el relleno y no se leía como el botón que abre y cierra. */
.pf-sec-mes {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06);
  color: var(--text-2); font-size: 15px;
  transition: color var(--t-hover), box-shadow var(--t-hover);
}
.pf-sec-cap:hover .pf-sec-mes, .pf-plegable-cap:hover .pf-sec-mes {
  box-shadow: 0 1px 3px rgba(18, 18, 23, 0.12);
}
.pf-sec-cap:hover .pf-sec-mes, .pf-plegable-cap:hover .pf-sec-mes { color: var(--text-1); }
.pf-sec-cap:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
/* Los dos iconos van puestos y aquí se enseña el que toca: «+» cerrado y
   «−» abierto. Así el mismo rótulo vale para las secciones y para los
   <details> de abajo, que se abren solos sin pasar por JavaScript. */
.pf-sec-mes .ti-minus { display: none; }
.pf-sec:not(.es-plegada) > .pf-sec-cap .pf-sec-mes .ti-plus,
.pf-plegable[open] > .pf-plegable-cap .pf-sec-mes .ti-plus { display: none; }
.pf-sec:not(.es-plegada) > .pf-sec-cap .pf-sec-mes .ti-minus,
.pf-plegable[open] > .pf-plegable-cap .pf-sec-mes .ti-minus { display: inline-flex; }
/* Cerrada: queda el rótulo y nada más */
.pf-sec.es-plegada > :not(.pf-sec-cap) { display: none; }
/* Dentro de la tarjeta, el bloque no repite el gris: ya lo pone la sección.
   Lo mismo que .pf-plegable-cos, para que abrir un apartado y abrir «La
   parcela y el edificio» se vean exactamente igual. */
.pf-sec > .pf-bloc { background: none; border-radius: 0; padding: 0 6px 6px; }
.pf-plegable-cos { padding: 0 6px 6px; }
/* Los rótulos de sección, con la MISMA letra que el resto de la ficha: en
   minimayúsculas espaciadas cantaban al lado de «La parcela y el edificio». */
.pf-sec-cap .parcel-sec-hdr {
  margin: 0;
  font-size: 13px; font-weight: 500; text-transform: none;
  letter-spacing: normal; color: var(--text-1);
}
/* Aire entre secciones: sin él los bloques se pegan y vuelven a leerse
   como una lista sola */
.pf > .pf-sec, .pf > .pf-lead, .pf > .pf-plegable { margin-top: var(--sp-2); }
.pf-sec-meta { font-size: 13px; color: var(--text-3); }
/* La de «Régimen del suelo» no es una fuente, es la clasificación: se lee, así
   que va con --text-2 (5,5:1 en claro y 6,2:1 en oscuro; --text-3 daba 2,8) */
#pf-regim-meta { color: var(--text-2); }
.pf-font { margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.4; }

/* ── 4. Claves ── */
.pf-claus { display: flex; flex-direction: column; }
.pf-clau-fila { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.pf-clau-fila:last-child { border-bottom: none; }
.pf-clau-codi { flex: 0 0 auto; min-width: 44px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; }
.pf-clau-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-clau-sub { font-size: 13px; color: var(--text-3); }
.pf-clau-fila .df-font { flex: 0 0 auto; align-self: center; }
/* La dominante va marcada con un punto delante (sin fondo) */
.pf-clau-fila.es-dominant .pf-clau-codi::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-1); margin-right: 6px; vertical-align: 2px; }
/* Enlace a la ficha de un expediente */
.pf-exp-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.pf-exp-link:hover { color: var(--text-1); }
.pf-exp-link i { font-size: 13px; }
.pf-exp-link:focus-visible, .pf-exp-toggle input:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ── 4b. Planeamiento y expedientes (Geoportal del AMB) ── */
.pf-exp-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; align-self: flex-start; }
.pf-exps { display: flex; flex-direction: column; }
.pf-exp { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pf-exp:last-child { border-bottom: none; }
.pf-exp-cap { display: flex; align-items: baseline; gap: var(--sp-2); }
.pf-exp-nom { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.pf-exp-tag { flex: 0 0 auto; font-size: 12px; line-height: 18px; padding: 0 6px; border: 1px solid var(--border-2); border-radius: 9px; color: var(--text-2); }
/* Código, tipo y fechas son datos: --text-2 (el --text-3 queda por debajo de 4,5:1) */
.pf-exp-sub { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.pf-clau-sub.es-dada { color: var(--text-2); }
.pf-exp-codi { font-family: var(--font-mono); }
.pf-exp-buit { margin: 0; font-size: 13px; color: var(--text-2); }
/* Los documentos del expediente que ya están en la normativa: se abren en el visor */
.pf-exp-cercant { margin: 0; font-size: 13px; color: var(--text-2); }
.pf-exp-doc { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; text-align: left; }
.pf-exp-doc:hover { color: var(--text-1); }
.pf-exp-doc i { font-size: 14px; text-decoration: none; }
.pf-exp-docs { align-self: flex-start; max-width: 100%; }
.pf-exp-docs > summary { list-style: none; cursor: pointer; }
.pf-exp-docs > summary::-webkit-details-marker { display: none; }
.pf-exp-docs-fl { transition: transform var(--t-hover); }
.pf-exp-docs[open] .pf-exp-docs-fl { transform: rotate(90deg); }
.pf-exp-docs-llista { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 4px 0 2px 6px; padding-left: 10px; border-left: 1px solid var(--border); }
.pf-exp-doc:focus-visible, .pf-exp-docs > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ── 5. Condicionantes ── */
.pf-flags { display: flex; flex-direction: column; }
.pf-flag { display: flex; align-items: baseline; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.pf-flag:last-child { border-bottom: none; }
.pf-flag > div { flex: 1; min-width: 0; }
.pf-flag .norm-dot { flex: 0 0 auto; position: relative; top: 1px; }
.pf-flag.es-alta .norm-dot { background: var(--coral); opacity: 1; }
.pf-flag.es-mitja .norm-dot { background: var(--amber); opacity: 1; }
.pf-flag.es-cap .norm-dot { background: var(--text-3); opacity: .5; }
/* Lo que devuelve /catastro/condicionants: cada fila con su fuente */
.pf-flag > div { display: flex; flex-direction: column; gap: 4px; }
.pf-cond-cap, #pf-claus-parcela .pf-cond-cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pf-cond-et { font-weight: 500; }
.pf-cond-font { flex: 0 0 auto; font-size: 12px; color: var(--text-2); text-align: right; }
/* ── Chat del equipo del proyecto ─────────────────────────────────────────── */
.xeq { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: var(--sp-3); }
/* Lo mío a la derecha en verde, lo de los demás a la izquierda con su foto.
   El verde de la casa; en modo noche, uno más oscuro para que la letra blanca
   se lea (el --accent de noche es claro y no daría contraste). */
:root { --xeq-meu-fons: var(--accent); --xeq-meu-text: #ffffff; }
[data-theme="dark"] { --xeq-meu-fons: #14624a; --xeq-meu-text: #eaf5ef; }
/* El hilo, en la misma columna centrada que la barra: a ancho completo los
   globos se iban al borde de la pantalla y no se leían como un chat. */
.xeq-llista {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-4) max(var(--sp-2), calc((100% - 720px) / 2));
}
.xeq-buit { margin: auto; max-width: 420px; text-align: center; padding: var(--sp-5) var(--sp-4); }
.xeq-buit-t { font-weight: 500; margin-bottom: 4px; }
.xeq-buit-s { font-size: 13px; color: var(--text-2); line-height: 1.5; }
/* LA FOTO, AL LADO Y ARRIBA
   Al lado del globo —lo mío a la derecha, lo de los demás a la izquierda—
   y pegada a su borde de arriba, a la altura del nombre. */
.xeq-fila { display: flex; align-items: flex-start; gap: 8px; }
.xeq-av, .xeq-av-buit { align-self: flex-start; margin: 2px 0 0; }
/* Lo tuyo: la burbuja a la derecha y tu foto al lado, del mismo lado */
/* En row-reverse el principio es la derecha: con flex-start queda pegado a ella */
.xeq-fila.es-meu { flex-direction: row-reverse; justify-content: flex-start; }
.xeq-fila.es-seguit { margin-top: -2px; }
.xeq-av { flex: 0 0 auto; width: 28px; height: 28px; font-size: 11px; margin-right: 0; }   /* sin el solape de los grupos */
.xeq-av-buit { flex: 0 0 auto; width: 28px; }
/* El globo, del gris de la casa y sin trazo: el blanco con borde sobre el
   blanco de la pantalla no se veía como un globo, se veía como una caja. */
.xeq-bombolla { position: relative; max-width: 100%; padding: 8px 12px;
                border-radius: var(--r-md); background: rgba(10, 14, 20, 0.05); border: none; }
/* Lo mío, del MISMO gris que lo de los demás: lo que dice de quién es el
   mensaje es el lado y la foto, no el color. El verde macizo cantaba en una
   pantalla que es toda tinta sobre papel. */
.xeq-fila.es-meu .xeq-bombolla { background: rgba(10, 14, 20, 0.05); border: none; color: var(--text-1); }
.xeq-qui { font-size: 12px; font-weight: 600; margin-bottom: 1px; }
.xeq-cos { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.xeq-fora { color: var(--text-2); font-style: italic; }
.xeq-fila.es-meu .xeq-fora { color: var(--text-2); }
/* BUSCAR, DENTRO DE LA PROPIA BARRA
   La lupa cambia la caja de escribir por la de buscar y se queda como ✕
   para volver. Una barra aparte arriba robaba sitio al hilo y se quedaba
   puesta aunque no estuvieras buscando. */
/* La misma corrección que en el Agente: .pill-input trae line-height igual
   que la letra, y la caja de línea va tan justa que CORTA los descendentes
   —la g de «alguien»—. Con 1.5 respira y el texto queda centrado de verdad. */
.xeq-pill-wrap .pill-input {
  font-size: 14px;
  line-height: 1.5;
  height: auto;
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
  margin-left: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.xeq-pill-wrap .pill-input::placeholder { font-size: 14px; }
/* La barra crece con el texto en vez de recortarlo, como la del Agente */
/* `center` y no `flex-end`: con una sola línea, el texto y el placeholder se
   quedaban pegados abajo en una barra de 54 px. */
.xeq-pill-wrap .pill-bar {
  height: auto; min-height: 54px;
  padding-top: 9px; padding-bottom: 9px;
  align-items: center;
}
.xeq-cerca { flex: 1; min-width: 0; }
.xeq-cerca-n { flex: 0 0 auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.xeq-cerca-n:empty { display: none; }
.xeq-pill-wrap .pill-bar .pill-plus-btn.es-on { color: var(--text-1); }
/* La línea de arriba mientras se trae lo anterior. Cuando ya está todo, ahí
   no va nada: el principio del chat se ve solo. */
.xeq-inici { align-self: center; padding: 6px 0 10px; font-size: 12px; color: var(--text-3); }
.xeq-inici-aro { display: inline-flex; align-items: center; gap: 6px; }
/* TRAER LO ANTERIOR
   Subiendo hasta arriba se pide solo, pero si la conversación cabe entera en
   la caja no hay scroll que subir: este botón lo pide igual, hasta el primer
   mensaje que se escribió. Píldora de siempre. */
.xeq-mes {
  align-self: center; margin: 2px 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 18px;
  border: 1px solid var(--border); background: none; box-shadow: none;
  font-family: var(--font); font-size: 13px; color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  transition: color var(--t-hover), border-color var(--t-hover);
}
.xeq-mes:hover { color: var(--text-1); border-color: var(--border-2); }
/* Mientras llega el hilo: el aro del martillo, nunca «no hay nada» */
.xeq-carregant { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* El bloque de un mensaje: el globo y, debajo, la fecha a la derecha */
/* `align-items: stretch` a posta: el pie ocupa lo mismo que el globo, así
   la hora cae a plomo con su borde. Con el bloque encogido a su contenido,
   la hora de lo que recibo se quedaba bajo la foto y no bajo el mensaje. */
.xeq-bloc { display: flex; flex-direction: column; align-items: stretch; max-width: min(640px, 72%); min-width: 0; }
.xeq-bombolla { align-self: flex-start; }
.xeq-fila.es-meu .xeq-bombolla { align-self: flex-end; }
/* La hora cae del lado de quien habla: lo que recibo, a la izquierda; lo que
   mando, a la derecha. `width: 100%` a posta: sin él la línea se encoge a su
   texto y no llega al borde del globo. */
.xeq-peu-msg { display: flex; width: 100%; align-items: center; gap: 6px; margin-top: 4px; padding: 0;
               justify-content: flex-start; min-height: 0; }
/* Sin hora —los de en medio de una tanda— la línea solo guarda sitio para
   los iconos, que salen al pasar el cursor */
.xeq-peu-msg:not(:has(.xeq-quan)) { margin-top: 0; height: 4px; }
.xeq-fila.es-meu .xeq-peu-msg { justify-content: flex-end; }
.xeq-quan { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.xeq-fila.es-meu .xeq-quan { color: var(--text-3); opacity: 1; }
/* RESPONDER Y BORRAR: AL LADO, NUNCA DEBAJO
   Debajo del globo se comían el mensaje siguiente, porque la línea de la
   hora no guarda alto cuando esa hora no está. Fuera del flujo y pegados al
   canto de fuera del globo —lo que recibo, a su derecha; lo que mando, a su
   izquierda—: siempre hay hueco, porque el globo nunca pasa del 72 %.
   (El globo ya es `position: relative` más arriba.) */
.xeq-eines {
  position: absolute; top: 2px; display: flex; align-items: center; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-hover);
}
.xeq-fila.es-altre .xeq-eines { left: 100%; margin-left: 6px; }
.xeq-fila.es-meu   .xeq-eines { right: 100%; margin-right: 6px; }
.xeq-fila:hover .xeq-eines { opacity: 1; pointer-events: auto; }
/* Los dos iconos solo al pasar por encima, como antes */
.xeq-x, .xeq-resp { color: var(--text-3); }
.xeq-fila.es-pendent .xeq-bombolla { opacity: .72; }
/* UNA MENCIÓN SE VE POR EL COLOR, NO POR UN RECUADRO
   Dentro de un globo que ya es gris, otro relleno gris encima partía la
   frase en cajitas. La mención va con la letra del acento de la casa: se
   distingue leyendo, sin trocear el mensaje. Y ES LO ÚNICO QUE LA MARCA,
   porque la arroba tampoco se pinta (27-9-2026) y la negrita de aquí abajo no
   llega a verse: el `font-weight: 450 !important` de toda la casa la pisa. */
.xeq-men { display: inline; align-items: center; gap: 4px; font-size: inherit; font-weight: 600;
           padding: 0; border-radius: 0; background: none; color: var(--blau); }
.xeq-men .ficon { width: 14px; height: 14px; flex: 0 0 auto; vertical-align: -2px; margin-right: 2px; }
/* Sin subrayado: el icono del tipo y el azul ya dicen que es un documento y
   que se puede pulsar; la raya solo picaba la frase. */
.xeq-men.es-doc { border: none; cursor: pointer; font-family: inherit; text-decoration: none; }
.xeq-men.es-doc:hover { text-decoration: none; opacity: .75; }
/* EL MISMO DOCUMENTO EN LA PREGUNTA DEL AGENTE (30-9-2026)
   Al elegirlo con la @ su nombre se queda en azul mientras escribes, pero al
   ENVIAR la pregunta el azul se perdía: pasaba a ser texto corriente, no se
   distinguía del resto de la frase y no se podía abrir. Ahora se vuelve a
   marcar sobre el mensaje, con esta misma pastilla: un documento nombrado se
   ve igual en el chat del equipo y en el Agente. */
.pjd-msg-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Lo que se subió del ordenador con la pregunta no está en la Documentación
   del proyecto: se ve que es un archivo, pero no se puede abrir. */
.xeq-men.es-doc-mut { color: var(--text-2); cursor: default; }
.xeq-fila.es-meu .xeq-men { background: none; color: var(--blau); }
/* Y dentro de un mensaje, cuando se busca en el chat */
.xeq-cos .norm-hl { background: transparent; color: var(--text-1); }
/* Lo que casa con lo buscado, en tinta; el resto del nombre, en gris. Así se
   ve de un vistazo por qué sale cada fila. El peso va con la excepción de
   más abajo: un !important global pone todo a 450. */
.xeq-menu .norm-hl { background: transparent; color: var(--text-1); }
.xeq-menu-nom { color: var(--text-2); }
.xeq-x, .xeq-resp { opacity: .75; border: none; background: none; cursor: pointer; color: inherit; padding: 0 2px; border-radius: 4px; line-height: 1; }
/* REGLA DE ORO: la cruz nunca lleva fondo gris, solo pasa de gris a negro */
.xeq-x:hover, .xeq-resp:hover { opacity: 1; color: var(--text-1); }
/* Responder a un mensaje: su globo, dentro del que se envía y encima de la caja */
.xeq-cita { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
            margin: 0 0 4px; padding: 4px 8px; border: none; border-left: 3px solid var(--accent); border-radius: 6px;
            background: var(--accent-dim); color: inherit; cursor: pointer; font: inherit; }
.xeq-cita:hover { border-left-color: var(--text-1); }
.xeq-fila.es-meu .xeq-cita { background: rgba(10, 14, 20, 0.05); }
.xeq-cita-qui { font-size: 11px; font-weight: 600; }
.xeq-cita-txt { font-size: 12px; line-height: 1.35; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.xeq-fila.es-flash .xeq-bombolla { animation: xeq-flash 1.2s ease-out; }
@keyframes xeq-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent-dim); } 100% { box-shadow: none; } }
/* RESPONDER A ALGUIEN: RELLENO GRIS, SIN FILO
   La tarjeta blanca con su recuadro y la raya verde a la izquierda hacía de
   segunda barra encima de la barra. Es el mismo gris de los globos: se lee
   como un trozo de conversación pegado al campo, no como otra caja. */
.xeq-resposta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; padding: 8px 10px;
                border: none; border-radius: 10px; background: rgba(10, 14, 20, 0.05); }
.xeq-resposta-cos { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.xeq-resposta-x { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--text-2); padding: 2px; border-radius: 4px; }
.xeq-resposta-x:hover { color: var(--text-1); }
/* LA BARRA, LA MISMA DEL CHAT Y DEL AGENTE
   Antes era un recuadro propio de ancho completo, pegado a los dos bordes.
   Ahora es la pastilla de cristal de la casa, centrada y con su ancho. */
.xeq-peu { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 0 var(--sp-6) 14px; }
.xeq-pill-wrap { position: relative; width: min(100%, 720px); }   /* el ancho del Agente */
.xeq-nota { margin: 6px 0 0; font-size: 12px; color: var(--text-2); min-height: 16px; text-align: center; }

/* QUÉ TRAER AL MENSAJE
   La tarjeta blanca de siempre, encima del «+» */
.xeq-adj-pop {
  position: absolute; bottom: calc(100% + 8px); right: 0; left: auto; top: auto;
  width: min(300px, 92vw); padding: 4px;
  display: flex; flex-direction: column;
}
.xeq-adj-it {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: 8px 10px;
  border: none; border-radius: 7px; background: none;
  font: inherit; font-size: 13px; color: var(--text-1); text-align: left; cursor: pointer;
}
.xeq-adj-it:hover { background: rgba(10, 14, 20, 0.05); }
/* El «+», sin fondo ni sombra, como el clip del Agente */
/* La lupa, a pelo; el «+», en su círculo blanco con la sombra corta de la
   casa —la misma del «+» de los apartados de la parcela—. Es el que trae
   cosas al mensaje, así que es el que se ve. */
.xeq-pill-wrap .pill-bar .pill-plus-btn { width: 32px; height: 32px; font-size: 18px; background: none; box-shadow: none; }
.xeq-pill-wrap .pill-bar .pill-plus-btn:hover { background: none; box-shadow: none; color: var(--text-1); }
.xeq-pill-wrap .pill-bar #xeq-adj {
  background: var(--surface-card);
  /* La MISMA sombra que «base de datos» y la carpeta de proyecto del chat:
     la que tenía antes era más plana y el botón se veía de otra familia. */
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.06), 0 2px 8px rgba(10, 14, 20, 0.07);
  color: var(--text-2);
  transition: color var(--t-hover), box-shadow var(--t-hover);
}
.xeq-pill-wrap .pill-bar #xeq-adj:hover {
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(10, 14, 20, 0.08), 0 4px 12px rgba(10, 14, 20, 0.10);
  color: var(--text-1);
}
.xeq-adj-it .ti { font-size: 16px; color: var(--text-2); flex: 0 0 auto; }
.xeq-adj-nom { flex: 1; min-width: 0; }
/* A QUIÉN O A QUÉ MENCIONAS
   De ancho de la barra entera, como los demás desplegables del chat: en una
   tarjeta estrecha los nombres de documento se cortaban a la mitad. Cada
   fila con el icono de su tipo —el PDF rojo, el Word azul— y la persona con
   su foto; el gris marca la que está elegida. */
.xeq-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 30;
            background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px;
            box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
/* El @ del Agente se abre hacia abajo cuando cabe (la barra en medio de
   la pantalla, con el Agente en blanco): justo debajo del borde de la barra */
.xeq-menu.es-avall { top: calc(100% + 8px); bottom: auto; }
.xeq-menu-it { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; border: none;
               background: none; cursor: pointer; padding: 8px 10px; border-radius: var(--r-xs); color: var(--text-1); font: inherit; font-size: 14px; }
.xeq-menu-it.es-tria, .xeq-menu-it:hover { background: rgba(10, 14, 20, 0.05); }
.xeq-menu-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.xeq-menu-ico .ficon { width: 18px; height: 18px; }
.xeq-menu-av { width: 20px; height: 20px; margin: 0; font-size: 8px; }
/* «Todos»: el logo del despacho, redondo como las fotos de la gente. Sin
   logo, el mismo edificio gris que se queda en su hueco en el lateral. */
.xeq-menu-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
.xeq-menu-logo-ph { font-size: 16px; color: var(--text-3); }
.xeq-menu-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xeq-menu-sub { font-size: 12px; color: var(--text-3); flex: 0 0 auto; }

/* Patrimonio: el nombre del edificio y las fichas del catálogo, bajo el nivel */
.pf-patr-sub { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.pf-patr-fitxes { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px; }

/* LAS FICHAS DEL CATÁLOGO DE LA PARCELA
   Una fila por ficha, como las del resto de documentos: icono, nombre y, si se
   sabe, si está vigente. Se abre en el visor la que tenemos indexada; la que
   no, en el PIU (con la flecha de que sale fuera). */
#pf-patr-fitxes { display: flex; flex-direction: column; gap: 2px; padding: 0 0 18px; }
.pf-patr-fitxes-tit {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 6px;
}
.pf-patr-fitxa {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  border: none; border-radius: var(--r-sm);
  background: none; color: var(--text-1);
  font-family: var(--font); font-size: var(--text-sm); text-align: left;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-hover);
}
.pf-patr-fitxa:hover { background: rgba(10, 14, 20, 0.04); }
.pf-patr-fitxa-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-patr-fitxa .ti-external-link { font-size: 14px; color: var(--text-3); flex-shrink: 0; }
.pf-cond-item { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.4; }
.pf-cond-item + .pf-cond-item { margin-top: 4px; }
.pf-cond-sub { font-size: 12px; color: var(--text-2); }
.pf-cond-no, .pf-cond-nota { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.pf-cond-enllac { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#pf-claus-parcela { display: flex; flex-direction: column; }

/* LOS DESPLEGABLES DE DENTRO (división horizontal y cada planta)
   El mismo trato que el de fuera: el rótulo sobre gris y lo que se abre en
   su hoja blanca. Todos arrancan cerrados: con 16 o 40 inmuebles, abiertos
   eran un muro de texto. */
/* LA DIVISIÓN HORIZONTAL
   Sigue el mismo patrón que todo lo demás: bloque gris con su rótulo, y lo
   que se abre, dentro, con los mismos 6px de aire y el mismo relleno. */
.pf-pleg2 {
  border-radius: var(--r-sm);
  background: rgba(10, 14, 20, 0.05);
  overflow: hidden;
}
.pf-pleg2 + .pf-pleg2 { margin-top: 6px; }
.pf-pleg2-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--text-2);
  transition: color var(--t-hover);
}
.pf-pleg2-cap::-webkit-details-marker { display: none; }
.pf-pleg2-cap:hover, .pf-pleg2[open] > .pf-pleg2-cap { color: var(--text-1); }
.pf-pleg2-n { color: var(--text-3); }
.pf-pleg2-fletxa { margin-left: auto; font-size: 15px; transition: transform var(--t-hover); }
.pf-pleg2[open] > .pf-pleg2-cap .pf-pleg2-fletxa { transform: rotate(90deg); }
.pf-pleg2-cos { padding: 0 6px 6px; }
/* Dentro de la división, cada planta en su hoja blanca */
.pf-divis > .pf-pleg2-cos > .pf-planta { background: var(--surface-card); }
.pf-divis > .pf-pleg2-cos > .pf-planta + .pf-planta { margin-top: 6px; }
/* Dentro de una planta, cada inmueble es una tarjeta con el dibujo de un
   edificio; su ficha entera se abre en un pop-up. */
.pf-imm-graella {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.pf-imm-card {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 10px;
  border: none; border-radius: var(--r-sm);
  background: rgba(10, 14, 20, 0.05);
  font-family: var(--font);
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column;
  transition: background var(--t-hover);
}
.pf-imm-card:hover { background: rgba(10, 14, 20, 0.09); }
.pf-imm-card:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.pf-imm-tit {
  position: relative; z-index: 1;
  font-size: 13px; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-imm-ic {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #bcbdbf; pointer-events: none;
}
.pf-imm-ic svg { display: block; width: 34px; height: 34px; }
/* Su ficha: cada dato en su bloque gris */
.pf-imm-dades { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pf-imm-dades .df {
  padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(10, 14, 20, 0.05); border-bottom: none;
}
.pf-imm-seu {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2); text-decoration: none;
  transition: color var(--t-hover);
}
.pf-imm-seu:hover { color: var(--text-1); }

/* ── 6. Patrimonio ── */

/* ── 7/8. Plegables (Catastro, Licencias) ── */
/* Los plegables, como las tablas del chat: el rótulo sobre gris y, al
   abrirse, lo de dentro en su hoja blanca con las esquinas redondeadas.
   Sin trazo; la sombra corta de la casa. */
.pf-plegable {
  border: none; border-radius: var(--r-md);
  background: rgba(10, 14, 20, 0.05);
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05), 0 6px 14px -10px rgba(18, 18, 23, 0.3);
  overflow: hidden;
}

.pf-plegable-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 12px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  transition: color var(--t-hover);
}
.pf-plegable-cap::-webkit-details-marker { display: none; }
.pf-plegable-cap { color: var(--text-1); padding: 10px 14px; }
/* EL BLANCO SE ABRE Y SE CIERRA
   La hoja blanca va de margen a margen y redondea sus CUATRO esquinas: se
   cierra donde acaban los datos. Lo que viene después —la división
   horizontal— se queda sobre el gris del bloque, y al desplegarla vuelve a
   salir blanco dentro. */
.pf-plegable-cos {
  margin: 0;
  padding: 0 0 6px;
  background: none;
  display: flex; flex-direction: column; gap: 6px;
}
.pf-fulla {
  padding: 14px 16px 16px;
  background: var(--surface-card);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 11px;
}
/* Dentro del desplegable no hace falta más gris: el gris ya es la cabecera.
   La hoja blanca y, encima, las mismas filas de fuera: el nombre a la
   izquierda, el valor a la derecha y una raya fina entre ellas, igual que
   en cualquier otro apartado. */
.pf-fulla { gap: 0; }
.pf-fulla > :first-child,
.pf-fulla > :first-child > :first-child { border-top: none; }
/* La división horizontal, sobre el gris del bloque: sin otro gris encima y
   alineada con el texto de la hoja blanca. */
.pf-plegable-cos > .pf-immobles > .pf-divis { background: none; }
.pf-plegable-cos > .pf-immobles > .pf-divis > .pf-pleg2-cap { padding: 8px 16px; }
.pf-plegable-cos > .pf-immobles > .pf-divis > .pf-pleg2-cos { padding: 0 6px 6px; }
/* DE DÓNDE SALE LO DE ESTE BLOQUE
   Una sola ⓘ arriba a la derecha del relleno, en vez de una pastilla por
   fila que salía al pasar el cursor: junta las fuentes del bloque. */
.pf-params, .pf-plegable-cos { position: relative; }
.pf-font-ico {
  position: absolute; top: 8px; right: 10px;
  display: inline-flex; align-items: center;
  color: var(--text-3); cursor: help;
  opacity: 0; transition: opacity var(--t-hover);
}
.pf-params:hover .pf-font-ico, .pf-plegable-cos:hover .pf-font-ico,
.pf-font-ico:focus-visible { opacity: 1; }
.pf-font-ico .ti { font-size: 14px; }
.pf-plegable-cos .df.es-compacte .df-et,
.pf-params .df.es-compacte .df-et {
  order: 1;
  /* Columna fija: los valores arrancan todos a la misma altura. 170 es lo
     que mide el nombre más largo con su ⓘ al lado sin partirse en dos. */
  flex: 0 0 170px; width: 170px; color: var(--text-3);
}
.pf-plegable-cos .df.es-compacte .df-val,
.pf-params .df.es-compacte .df-val  { order: 3; flex: 1 1 auto; min-width: 0; text-align: left; }
.pf-plegable-cos .df.es-compacte .df-nota,
.pf-params .df.es-compacte .df-nota { order: 5; flex-basis: 100%; margin-left: 180px; }
.pf-plegable-cos .df.es-compacte:first-child { padding-top: 8px; }
.pf-immobles { margin-top: 0; }

/* «Seguir esta parcela» se quitó; el interruptor de la casa se conserva por
   si hace falta en otro sitio. */
/* El interruptor de la casa: 32px de ancho, trazo gris; encendido en el azul */
.iurax-switch { position: relative; flex: 0 0 auto; display: inline-block; width: 32px; height: 18px; margin-top: 2px; cursor: pointer; }
.iurax-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.iurax-switch-pista { position: absolute; inset: 0; border-radius: 9px; border: 1px solid var(--border-2); background: none; transition: background var(--t-hover), border-color var(--t-hover); }
.iurax-switch-pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); transition: transform var(--t-hover), background var(--t-hover); }
.iurax-switch input:checked + .iurax-switch-pista { background: var(--blau); border-color: var(--blau); }
.iurax-switch input:checked + .iurax-switch-pista::after { background: #fff; transform: translateX(14px); }
.iurax-switch input:focus-visible + .iurax-switch-pista { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ── 10. Acciones: chips de la casa (32px, gris → negro, sin fill salvo encendido) ── */
.pf-accions { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
/* Las dos acciones de la ficha, a media ficha cada una: crear proyecto a la
   izquierda y preguntar a la derecha, que es lo que más se hace y por eso va
   en tinta. Una encima de otra pesaban lo mismo y no se veía cuál es cuál. */
.pf-accions-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pf-accions-duo .pf-btn { width: auto; }
.pf-btn.es-primari {
  background: var(--text-1); border-color: var(--text-1); color: var(--surface-white);
}
.pf-btn.es-primari:hover:not(:disabled) {
  background: var(--text-2); border-color: var(--text-2); color: var(--surface-white);
}
/* La otra, de relleno gris y sin trazo: al lado de la negra, un botón de
   solo contorno se leía como apagado. */
.pf-btn.es-gris {
  background: rgba(10, 14, 20, 0.06); border-color: transparent; color: var(--text-1);
}
.pf-btn.es-gris:hover:not(:disabled) {
  background: rgba(10, 14, 20, 0.10); border-color: transparent; color: var(--text-1);
}
.pf-acc, .pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 18px;
  border: 1px solid var(--border); background: none; box-shadow: none;
  font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--text-2);
  cursor: pointer; white-space: nowrap; min-width: 0;
  transition: color var(--t-hover), border-color var(--t-hover), background var(--t-hover);
}
.pf-acc:hover:not(:disabled), .pf-btn:hover:not(:disabled) { color: var(--text-1); border-color: var(--border-2); }
.pf-acc i, .pf-btn i { font-size: 15px; flex: 0 0 auto; }
.pf-acc > span:not(.pf-acc-n):not(.pf-acc-falta) { overflow: hidden; text-overflow: ellipsis; }
/* Encendido (en cartera / en la selección): gris sin sombra */
.pf-acc.es-on { background: rgba(10, 14, 20, 0.06); border-color: var(--border-2); color: var(--text-1); }
.pf-acc:disabled { cursor: default; opacity: .6; }
.pf-acc-n { font-size: 13px; color: var(--text-3); }
.pf-acc-n:empty { display: none; }
.pf-acc .df-ico { margin-left: 4px; }
/* Los dos grandes van a lo ancho, uno debajo del otro */
.pf-btn { flex: 0 0 auto; width: 100%; }
/* Crear proyecto: la carpeta de la casa, en la tinta del botón */
.pf-btn .pj-tipus-ic { color: currentColor; }
.pf-acc:focus-visible, .pf-btn:focus-visible, .pf-copiar:focus-visible, .pf-seu:focus-visible, .pf-plegable-cap:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ── Se reparte según lo ancha que sea la ficha (no la pantalla): a 420px
   los parámetros van a dos columnas y las acciones en 2×2; en el móvil,
   una columna ── */
#parcel-info { container-type: inline-size; }
/* Con la ficha muy estrecha, los dos rótulos no caben al lado: una debajo
   de la otra antes que partirlos en dos líneas. */
@container (max-width: 300px) {
  .pf-accions-duo { grid-template-columns: 1fr; }
}
/* Los datos van siempre en una columna: a dos, el nombre y el valor se
   parten en dos líneas y cada bloque mide distinto. */

/* ── La ficha en PDF: se imprime solo la ficha, entera y sin botones ── */
@media print {
  body.imprimir-fitxa * { visibility: hidden; }
  body.imprimir-fitxa .mapa-info-panel, body.imprimir-fitxa .mapa-info-panel * { visibility: visible; }
  body.imprimir-fitxa .mapa-info-panel {
    position: static; width: auto; max-width: none; height: auto; max-height: none;
    border: none; box-shadow: none; border-radius: 0; transform: none; opacity: 1;
    display: block; overflow: visible;
  }
  body.imprimir-fitxa .mapa-topbar, body.imprimir-fitxa .mapa-tabs, body.imprimir-fitxa #mapa-tabs,
  body.imprimir-fitxa .pf-accions, body.imprimir-fitxa .pf-seguir, body.imprimir-fitxa .pf-copiar { display: none !important; }
  body.imprimir-fitxa #parcel-info { overflow: visible; height: auto; padding: 0; }
  body.imprimir-fitxa .pf-plegable { border: none; }
  body.imprimir-fitxa .pf-plegable-cap { padding: 0 0 4px; }
  body.imprimir-fitxa .pf-plegable-cos { display: block !important; padding: 0; border: none; }
  body.imprimir-fitxa .pf-plegable-fletxa { display: none; }
  body.imprimir-fitxa .df.es-pendent .df-et, body.imprimir-fitxa .df-falta { color: #b23a0f; }
  body.imprimir-fitxa .pf-sec { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════
   TODO LO ABIERTO — cuando las pestañas no caben
   Las pestañas dejan de estrujarse (por debajo de cierto ancho ya no se
   lee el nombre): las que se salen se retiran y en el borde derecho de la
   tira queda un botón con cuántas faltan. Abre la lista completa.
   ══════════════════════════════════════════════════════════════════ */
/* Nunca por debajo de lo que hace falta para leer un nombre */
.pdf-docs-tabs .pdf-tab { min-width: 124px; }
.pdf-docs-tabs .pdf-tab.mapa-tab { min-width: 0; }
.pdf-tab.es-fora { display: none; }
/* El botón: chip de la casa (sin fondo, gris → negro) */
.pdf-tabs-mes {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px; margin-bottom: 5px;
  border: none; background: none; box-shadow: none;
  font-family: var(--font); font-size: 13px; color: var(--text-3);
  cursor: pointer; white-space: nowrap;
  transition: color var(--t-hover);
}
.pdf-tabs-mes:hover, .pdf-tabs-mes.es-obert { color: var(--text-1); }
.pdf-tabs-mes i { font-size: 15px; }
.pdf-tabs-mes:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: var(--r-sm); }

/* La lista: tarjeta blanca con sombra corta, cabecera rótulo + contador */
.tabs-tots {
  position: fixed; z-index: 1200;
  min-width: 280px; max-width: 380px;
  max-height: min(60vh, 420px); overflow-y: auto;
  padding: 8px;
  background: var(--surface-card);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(18, 18, 23, .05), 0 6px 14px -10px rgba(18, 18, 23, .3);
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
.tabs-tots.hidden { display: none; }
.tabs-tots-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 4px 10px 8px;
  font-size: 13px; color: var(--text-1);
}
.tabs-tots-n { color: var(--text-3); }
.tabs-tots-llista { display: flex; flex-direction: column; gap: 1px; }
.tabs-tots-item { font-weight: 400; color: var(--text-2); gap: 9px; }
.tabs-tots-item:hover { color: var(--text-1); }
/* En la que estás: gris sólido, como el chip seleccionado */
.tabs-tots-item.es-actiu { background: rgba(10, 14, 20, 0.05); color: var(--text-1); }
.tabs-tots-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs-tots-item .mapa-tab-ic { color: var(--text-3); flex-shrink: 0; }
/* La cruz: nunca lleva fondo, solo pasa de gris a negro */
.tabs-tots-x {
  margin-left: auto; flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 14px;
  opacity: 0; cursor: pointer;
  transition: opacity var(--t-hover), color var(--t-hover);
}
.tabs-tots-item:hover .tabs-tots-x, .tabs-tots-x:focus-visible { opacity: 1; }
.tabs-tots-x:hover { color: var(--text-1); }

/* ══════════════════════════════════════════════════════════════════
   PROYECTOS — la rejilla de tarjetas
   Cada proyecto es una tarjeta: un rectángulo gris con la carpeta de la
   casa, el nombre debajo y, en una línea, dónde está y qué hay dentro.
   Los chips de arriba separan lo personal de lo que se lleva en grupo.
   ══════════════════════════════════════════════════════════════════ */
.pj-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0 0;
  flex-shrink: 0;
}
/* El orden, con la misma pastilla que los chips pero sin encender */
.pj-ordre-btn { flex-shrink: 0; }
.pj-ordre-btn i { font-size: 14px; color: var(--text-3); }

.pj-graella {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-5) var(--sp-4);
  padding: var(--sp-4) 2px var(--sp-6);
  align-content: start;
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
.pj-graella > .norm-table-empty,
.pj-graella > .pj-buit { grid-column: 1 / -1; }
.pj-graella:has(> .pj-buit),
.pj-graella:has(> .norm-table-empty) { align-content: center; padding-block: var(--sp-4); }

.pjt {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0; cursor: pointer;
  border-radius: var(--r);
}
.pjt:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
/* El rectángulo gris: la tapa del proyecto */
.pjt-tapa {
  position: relative;
  /* A todo el ancho de la tarjeta: el gris llega a los dos bordes. Sin
     `width: 100%` la proporción mandaba y el rectángulo se quedaba corto,
     dejando dos franjas blancas a los lados. */
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--r);
  background: rgba(10, 14, 20, 0.045);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-hover);
}
/* Al pasar el cursor solo se oscurece un punto el gris: la tarjeta NO crece,
   ni coge sombra, ni se tiñe de ningún color */
.pjt:hover .pjt-tapa,
.pjt.es-menu .pjt-tapa { background: rgba(10, 14, 20, 0.075); }
.pjt, .pjt:hover, .pjt:focus-within { transform: none; box-shadow: none; }
/* La carpeta de la casa, maciza y en gris: es el dibujo de la tapa, no un
   icono que se pulse. Si el proyecto es de un grupo lleva dentro dos
   personas en blanco (van en el propio SVG). */
/* El gris de la carpeta va OPACO (no en alfa): entre las dos personas se
   pinta este mismo gris para abrir el hueco, y con alfa los dos grises se
   sumaban y se veía una mancha más oscura. */
.pjt-ic { display: flex; color: #bcbdbf; transition: opacity 0.16s ease; }
/* Con el desplegable abierto, la tapa se aclara por detrás y las pastillas se
   leen limpias. La carpeta SE VA, no se difumina: entre pastilla y pastilla
   quedan 4 px de tapa a la vista y por esa rendija asomaba la carpeta
   desenfocada —una mancha gris justo debajo de «Documentación» que parecía
   suciedad—. Difuminada seguía asomando; quitándola, la rendija enseña el
   mismo gris liso que el resto de la tapa. */
.pjt-tapa::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease;
}
.pjt.es-anar .pjt-tapa::after { opacity: 1; }
.pjt.es-anar .pjt-ic { opacity: 0; }
.pjt-carp { display: block; width: 58px; height: 58px; }
/* El «más» y el favorito: aparecen al pasar el cursor, sobre la tapa. Cada
   uno es un botón redondo de fondo blanco con sombra corta; sin la pastilla
   que los envolvía. */
#view-projectes .pjt .pj-acts {
  top: 8px; right: 8px; transform: none;
  background: none; box-shadow: none; padding: 0; gap: 6px;
}
/* Con el ratón encima, con el desplegable abierto o navegando con el
   teclado. `:focus-within` no vale: el «+» se queda con el foco al pulsarlo y
   los botones no se iban al irse el cursor a otra tarjeta. */
#view-projectes .pjt:hover .pj-acts,
#view-projectes .pjt:has(:focus-visible) .pj-acts,
#view-projectes .pjt.es-anar .pj-acts,
#view-projectes .pjt.es-menu .pj-acts { display: flex; }
/* El «+»: círculo blanco liso, sin sombra */
.pjt-mes {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-card); color: var(--text-2);
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px;
  box-shadow: none;
  transition: color var(--t-hover);
}
/* Los tres puntos, al lado del nombre: sin fondo ni sombra, solo el gris que
   pasa a negro (como todas las acciones de la casa) */
#view-projectes .pjt .pj-acts-kebab {
  background: none; box-shadow: none; border-radius: 50%;
}
.pjt-mes:hover { color: var(--text-1); }
.pjt-mes:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* LA CHINCHETA, EN LA OTRA ESQUINA DE LA TAPA
   El mismo círculo que las tres barritas, arriba a la izquierda: fija el
   proyecto en el lateral («Proyectos recientes»). Sin fijar, sale al pasar
   el cursor por la tarjeta, como las barritas; fijado, se queda puesta
   siempre, como en el lateral. Se aparta cuando se abre el desplegable de
   apartados. */
.pjt-fixar {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-card); color: var(--text-2);
  border: none; display: none; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; box-shadow: none;
  transition: color var(--t-hover);
}
#view-projectes .pjt:hover .pjt-fixar,
#view-projectes .pjt:has(:focus-visible) .pjt-fixar,
#view-projectes .pjt.es-menu .pjt-fixar,
#view-projectes .pjt .pjt-fixar[aria-pressed="true"] { display: flex; }
#view-projectes .pjt.es-anar .pjt-fixar { display: none; }
.pjt-fixar:hover { color: var(--text-1); }
.pjt-fixar:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* A DÓNDE IR: cada apartado, su propio rectángulo
   No es una tarjeta con filas dentro: son cuatro pastillas sueltas, cada una
   con su relleno, apiladas sobre la tapa. Sale creciendo desde el «+» (la
   esquina de arriba a la derecha) y se va igual: al elegir, al salirse el
   cursor de la tarjeta, con Escape o tocando fuera. */
.pjt-anar {
  position: absolute; top: 7px; right: 8px; z-index: 3;
  min-width: 168px; max-width: calc(100% - 16px);
  display: flex; flex-direction: column; gap: 4px;
  background: none; box-shadow: none; padding: 0;
  cursor: default;
  transform-origin: top right;
  opacity: 0; transform: scale(0.92);
  visibility: hidden; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.pjt-anar.es-obert { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.pjt-anar-it {
  height: 32px; padding: 0 12px; gap: 9px;
  border: none; border-radius: var(--r-sm);
  background: var(--surface-card);
  font-weight: 400; font-size: 13px; color: var(--text-2);
  /* Entran una detrás de otra, muy justo: el desplegable se despliega */
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, color var(--t-hover), background var(--t-hover);
}
.pjt-anar.es-obert .pjt-anar-it { opacity: 1; transform: none; }
.pjt-anar.es-obert .pjt-anar-it:nth-child(2) { transition-delay: 0.03s; }
.pjt-anar.es-obert .pjt-anar-it:nth-child(3) { transition-delay: 0.06s; }
.pjt-anar.es-obert .pjt-anar-it:nth-child(4) { transition-delay: 0.09s; }
.pjt-anar-it .ti { font-size: 15px; color: var(--text-3); }
/* El punto rojo dice DE DÓNDE viene el aviso: va en su apartado, al final */
.pjt-anar-dot { margin-left: auto; flex-shrink: 0; }
.pjt-anar-it:hover {
  color: var(--text-1);
  background: color-mix(in srgb, rgb(10, 14, 20) 5%, var(--surface-card));
}
@media (prefers-reduced-motion: reduce) {
  .pjt-anar, .pjt-anar-it { transition: none; }
}

.pjt-peu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pjt-fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pjt-nom {
  font-size: 13px; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pjt-fila .pj-dot { flex-shrink: 0; position: static; }
/* Los tres puntos: siempre a la vista, a la derecha del nombre */
.pjt-fila .pj-acts-kebab { margin-left: auto; width: 22px; height: 22px; font-size: 14px; flex-shrink: 0; }
.pjt-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pjt-meta b { font-weight: inherit; color: var(--text-2); }
/* LA INVITACIÓN, DENTRO DEL RECTÁNGULO
   Quién te invita y los dos botones van sobre la tapa, difuminada como
   cuando se abre el «+»: con una invitación no hay proyecto que abrir
   todavía, así que es lo único que se puede hacer con la tarjeta. */
.pjt.es-invitacio { cursor: default; }
.pjt.es-invitacio .pjt-tapa::after { opacity: 1; }
.pjt-invit {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 0 12px; text-align: center;
}
.pjt-invit-txt { font-size: 13px; color: var(--text-2); line-height: 1.3; }
.pjt-invit-txt b { font-weight: inherit; color: var(--text-1); }
.pjt-invit-acc { display: flex; align-items: center; gap: 4px; }
/* «Aceptar», pastilla blanca sobre el gris; la cruz, sin relleno */
.pjt-invit .pj-inv-ok { background: var(--surface-card); color: var(--text-1); }
.pjt-invit .pj-inv-ok:hover { background: var(--text-1); color: var(--surface-card); }
.pjt-invit .pj-acts-btn { background: none; box-shadow: none; }
/* En pantalla estrecha los chips y el orden no caben en una línea: el orden
   baja debajo en vez de salirse */
@media (max-width: 768px) {
  .pj-barra { flex-wrap: wrap; row-gap: 8px; }
  .pj-graella { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   PANEL «USOS» DE LA FICHA DE PARCELA
   Menos densidad, jerarquía clara y una sola escala de grises (--pf-ink*,
   en tokens.css, con su versión invertida en oscuro). Todo va bajo #pf-lead
   para no mover el resto de apartados de la ficha, que comparten clases.
   Letra: la de la casa, igual que en los demás desplegables de la ficha:
   13 px y peso 450 en todo; 12 px solo donde ellos también lo usan (las
   fuentes y las explicaciones: artículos, cajas y avisos del final).
   Espacios: 4/8/12/16/20 px.
   ══════════════════════════════════════════════════════════════════════ */
#pf-lead, #pf-claus, #pf-regim, #pf-cond, #pf-patr, #pf-exped, #pf-catastre, #pf-llic, #pf-faq {
  --pf-fs: 13px;
  --pf-fs-sm: 12px;
  --pf-et: 150px;                 /* la columna de las etiquetas */
  /* Una familia por color: residencial azul, comercial y oficinas ámbar,
     equipamientos violeta (las tintas de uso de la casa). Industria y suelo
     libre conservan la suya para no confundirse con las tres. */
  --pf-us-res: var(--badge-residential-text);
  --pf-us-com: var(--badge-special-text);
  --pf-us-equ: var(--badge-dotacional-text);
  --pf-us-ind: var(--badge-industrial-text);
  --pf-us-lli: var(--badge-green-text);
}
/* En oscuro, los mismos tonos aclarados que ya usan las etiquetas de Avisos:
   los de papel se quedaban en 2,2:1 sobre el carbón */
[data-theme="dark"] #pf-lead {
  --pf-us-res: #8ab4f8;
  --pf-us-com: #e0a458;
  --pf-us-equ: #b69cf6;
  --pf-us-ind: #fb923c;
  --pf-us-lli: #69bf90;   /* el suelo libre sí va en verde: es un tipo de uso */
}

/* ── 1. Cabecera ─────────────────────────────────────────────────────── */
#pf-lead > .pf-sec-cap .parcel-sec-hdr,
#pf-claus > .pf-sec-cap .parcel-sec-hdr,
#pf-regim > .pf-sec-cap .parcel-sec-hdr,
#pf-cond > .pf-sec-cap .parcel-sec-hdr,
#pf-patr > .pf-sec-cap .parcel-sec-hdr,
#pf-exped > .pf-sec-cap .parcel-sec-hdr { font-size: var(--pf-fs); color: var(--pf-ink); }
/* Las pastillas de las cabeceras (la clave, «SU · Suelo urbano», «15
   expedientes») van las tres con el mismo gris de letra, --pf-ink-2: con el
   más claro, sobre la barra gris, apenas se leían */
#pf-lead > .pf-sec-cap .pf-clau-pill {
  display: inline-block; padding: 2px 8px; border: none; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-2);
  font-size: var(--pf-fs); line-height: 1.4; letter-spacing: 0;
}
#pf-lead > .pf-sec-cap:focus-visible,
#pf-claus > .pf-sec-cap:focus-visible,
#pf-regim > .pf-sec-cap:focus-visible,
#pf-cond > .pf-sec-cap:focus-visible,
#pf-patr > .pf-sec-cap:focus-visible,
#pf-exped > .pf-sec-cap:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 12px; }
/* «Usos» y su pastilla juntos a la izquierda; el botón, al otro lado. Con
   el reparto general (space-between) la pastilla se quedaba en medio. */
#pf-lead > .pf-sec-cap,
#pf-regim > .pf-sec-cap,
#pf-exped > .pf-sec-cap { justify-content: flex-start; gap: 8px; }
#pf-lead > .pf-sec-cap .pf-sec-meta,
#pf-regim > .pf-sec-cap .pf-sec-meta,
#pf-exped > .pf-sec-cap .pf-sec-meta { margin-right: auto; }

/* La hoja blanca: los bloques ponen su propio aire arriba y abajo */
#pf-lead > .pf-bloc > .pf-fulla,
#pf-claus > .pf-bloc > .pf-fulla,
#pf-regim > .pf-bloc > .pf-fulla,
#pf-cond > .pf-bloc > .pf-fulla,
#pf-patr > .pf-bloc > .pf-fulla,
#pf-exped > .pf-bloc > .pf-fulla { padding: 0 20px; gap: 0; background: var(--surface-card); }

/* Cada bloque: 20 px arriba y abajo y una raya de 1 px con el anterior */
#pf-lead > .pf-bloc > .pf-fulla > #pf-clau-desc,
#pf-lead > .pf-bloc > .pf-fulla > .pf-params,
#pf-lead > .pf-bloc > .pf-fulla > #pf-usos,
#pf-lead #pf-lead-peu > .df,
#pf-lead #pf-lead-peu > .pf-norma-plegables { padding: 20px 0; margin: 0; }
#pf-lead > .pf-bloc > .pf-fulla > .pf-params,
#pf-lead > .pf-bloc > .pf-fulla > #pf-usos,
#pf-lead #pf-lead-peu > .df,
#pf-lead #pf-lead-peu > .pf-norma-plegables { border-top: 1px solid var(--pf-linia); }
#pf-lead #pf-lead-peu { padding: 0; margin: 0; border: none; }

/* ── 2. Régimen ──────────────────────────────────────────────────────── */
#pf-lead #pf-clau-desc { font-size: var(--pf-fs); line-height: 1.45; color: var(--pf-ink); }
#pf-lead #pf-clau-desc:empty { display: none; }
#pf-lead #pf-clau-desc:empty + .pf-params { border-top: none; }
#pf-lead .pf-regim-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-2);
  font-size: var(--pf-fs); line-height: 1.4; vertical-align: 0; white-space: nowrap;
}

/* ── 3. Parámetros: dos columnas, 150 px + el resto ──────────────────── */
#pf-lead .pf-params { display: flex; flex-direction: column; gap: 16px; }
#pf-lead .pf-params .df,
#pf-lead #pf-lead-peu > .df {
  display: grid; grid-template-columns: var(--pf-et) minmax(0, 1fr);
  column-gap: 12px; align-items: baseline;
  padding: 0; border: none;
}
#pf-lead #pf-lead-peu > .df { padding: 20px 0; border-top: 1px solid var(--pf-linia); }
#pf-lead .pf-params .df-et,
#pf-lead #pf-lead-peu > .df .df-et { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-lead .pf-params .df-val { font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; text-align: left; }
#pf-lead .pf-params .df-val.es-buit { color: var(--pf-ink-3); }
#pf-lead .df-ico { color: var(--pf-ink-3); }
/* Un parámetro con varios valores (el techo según el caso): cada uno con
   su caja y 12 px entre ellos, sin la raya discontinua de antes */
#pf-lead .pf-norma-val + .pf-norma-val { margin-top: 12px; padding-top: 0; border-top: none; }
/* El valor y, debajo, en la misma celda, la caja que lo explica */
#pf-lead .pf-norma-val { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#pf-lead .pf-params .pf-norma-cond,
#pf-lead .pf-uso-detall {
  display: block; align-self: stretch; margin: 0;
  padding: 8px 12px; border: none; border-radius: 8px;
  background: var(--pf-caixa); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.5; font-weight: 450 !important;
}

/* ── Referencias «art. XXX»: pastilla pequeña, nunca en negro ─────────
   Van detrás de un espacio del propio texto: con 2 px más quedan a 6 px. */
#pf-lead .pf-norma-art {
  display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-3);
  font-size: var(--pf-fs-sm); line-height: 1.4; vertical-align: 1px;
  white-space: nowrap; cursor: help;
}

/* ── 4. Usos: tres grupos con su subtítulo pequeño ───────────────────── */
#pf-lead #pf-usos { display: flex; flex-direction: column; gap: 16px; }
#pf-lead .pf-usos-grup { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: none; }
#pf-lead .pf-usos-et { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-lead .pf-usos-vals { display: flex; flex-wrap: wrap; gap: 8px; }
/* La pastilla: punto de color y fondo muy suave de su familia.
   Rectángulo de esquinas redondeadas, como las etiquetas de la casa. Va
   como texto corrido (no flex): en los usos largos el punto, el nombre y el
   artículo siguen juntos y parten línea como una frase, sin quedarse sueltos */
#pf-lead .pf-chip {
  --u-fam: var(--pf-ink-2);
  display: inline-block; max-width: 100%; min-width: 0;
  padding: 4px 10px; border: none; border-radius: 5px;
  background: color-mix(in srgb, var(--u-fam) 8%, transparent);
  color: var(--u-fam);
  font-size: var(--pf-fs); line-height: 1.4; text-transform: none; letter-spacing: 0;
  white-space: normal;
}
#pf-lead .pf-chip::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
  background: currentColor;
}
#pf-lead .pf-chip.es-us-habitatge  { --u-fam: var(--pf-us-res); }
#pf-lead .pf-chip.es-us-activitat  { --u-fam: var(--pf-us-com); }
#pf-lead .pf-chip.es-us-dotacional { --u-fam: var(--pf-us-equ); }
#pf-lead .pf-chip.es-us-industria  { --u-fam: var(--pf-us-ind); }
#pf-lead .pf-chip.es-us-lliure     { --u-fam: var(--pf-us-lli); }
/* Dentro de la pastilla el artículo va en el color de la familia, rebajado */
#pf-lead .pf-chip .pf-norma-art {
  margin-left: 2px; padding: 0; background: none;
  color: currentColor; opacity: 0.65; vertical-align: baseline;
}
/* Lo que hay hoy (Catastro): borde gris y sin relleno */
#pf-lead .pf-chip.es-existent {
  background: none; border: 1px solid var(--pf-linia); color: var(--pf-ink);
  padding: 3px 9px;
}
#pf-lead .pf-chip.es-existent::before { background: var(--pf-ink-3); }

/* ── 5. Con condiciones: el nombre y, debajo, su caja ────────────────── */
#pf-lead .pf-usos-conds { display: flex; flex-direction: column; gap: 12px; }
#pf-lead .pf-uso-cond { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: none; background: none; }
#pf-lead .pf-uso-cond > span:first-child {
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45;
}

/* ── 6. Artículos aplicables: la fuente y, debajo, la lista ──────────── */
#pf-lead .pf-norma-arts .df-val { font-size: var(--pf-fs); line-height: 1.45; text-align: left; }
#pf-lead .pf-art-font  { display: block; color: var(--pf-ink); }
#pf-lead .pf-art-llista { display: block; margin-top: 4px; color: var(--pf-ink-2); }

/* ── 7. Desplegables ─────────────────────────────────────────────────── */
#pf-lead .pf-norma-plegables { display: flex; flex-direction: column; gap: 12px; }
#pf-lead .pf-norma-plegables .pf-plegable {
  margin: 0; border: 1px solid var(--pf-linia); border-radius: 12px;
  background: var(--surface-card); box-shadow: none; overflow: hidden;
}
#pf-lead .pf-norma-plegables .pf-plegable-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin: 0; border: none; background: none;
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.4;
  list-style: none; cursor: pointer;
}
#pf-lead .pf-norma-plegables .pf-plegable-cap::-webkit-details-marker { display: none; }
#pf-lead .pf-norma-plegables .pf-plegable-cap:focus-visible {
  outline: 2px solid var(--blau); outline-offset: -2px; border-radius: 12px;
}
#pf-lead .pf-plegable-n { color: var(--pf-ink-3); }
/* El +/– redondo: sobre la tarjeta blanca el círculo blanco de la casa no
   se veía; aquí va con el gris de las pastillas y sin sombra */
#pf-lead .pf-norma-plegables .pf-sec-mes {
  width: 24px; height: 24px; background: var(--pf-pill); box-shadow: none; color: var(--pf-ink-2);
}
#pf-lead .pf-norma-plegables .pf-plegable-cap:hover .pf-sec-mes { box-shadow: none; color: var(--pf-ink); }
#pf-lead .pf-norma-plegables .pf-plegable-cos {
  margin: 0; padding: 0; border: none; border-top: 1px solid var(--pf-linia); background: none;
}
#pf-lead .pf-norma-plegables .pf-plegable-cos > .pf-fulla { padding: 0; gap: 0; background: none; box-shadow: none; }
/* Cada fila: la clave pequeña arriba, el valor debajo; una raya entre ellas */
#pf-lead .pf-norma-fila {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 12px 16px; border: none; border-top: 1px solid var(--pf-linia);
}
#pf-lead .pf-norma-fila:first-child { border-top: none; }
#pf-lead .pf-norma-tipus { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-lead .pf-norma-fila .pf-norma-val { gap: 6px; }
#pf-lead .pf-norma-fila .pf-norma-val > span:first-child {
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; font-weight: 450 !important;
}
/* «En caso de modificación de la ordenación» y compañía: pastilla gris */
#pf-lead .pf-norma-fila .pf-norma-cond {
  display: inline-block; margin: 0; padding: 2px 8px; border: none; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.4;
}

/* ── 8. Avisos del final ─────────────────────────────────────────────── */
#pf-lead .pf-norma-avisos {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 0 20px; border-top: 1px dashed var(--pf-linia);
}
#pf-lead .pf-norma-nota {
  margin: 0; padding: 4px 0 4px 12px; border: none; border-left: 3px solid var(--pf-ink-3);
  border-radius: 0; background: none;
  font-size: var(--pf-fs-sm); line-height: 1.5; color: var(--pf-ink-2);
}
/* Los que piden mirar otro documento, en ámbar; «pendiente de revisión», gris */
#pf-lead .pf-norma-nota.es-derivat,
#pf-lead .pf-norma-nota.es-piu,
#pf-lead .pf-norma-nota.es-modificacio { border-left-color: var(--pf-us-com); }
/* El valor que aquí cambia una modificación: la pastilla «art.» con el mismo
   ámbar; el globo dice cuál */
#pf-lead .pf-norma-art.es-modificat { box-shadow: inset 0 0 0 1px var(--pf-us-com); }
/* El valor que viene de una modificación («mod. 2008»): la pastilla con la
   letra del texto, para que se lea como el origen del dato */
#pf-lead .pf-norma-art.es-mod { color: var(--pf-ink-2); }
#pf-lead .pf-norma-nota.es-revisio { border-left-color: var(--pf-ink-3); }
/* Una clave SUPRIMIDA no es un matiz: es que lo de arriba ya no rige. Va
   arriba del todo y en el color de los usos industriales, que es el más
   fuerte de la paleta de la ficha. */
#pf-lead .pf-norma-nota.es-suprimida {
  border-left-color: var(--pf-us-ind); color: var(--pf-ink-1); font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   «CLAVES DEL PLANEAMIENTO», CON EL ESTILO DE «USOS»
   Los mismos rellenos, separaciones y tamaños: bloques de 20 px con una
   raya de 1 px entre ellos, filas en dos columnas (150 px + el resto) a
   16 px, la clave en pastilla gris (como «Clave 12»), la fuente detrás del
   nombre en pastilla pequeña (como «art. 316») y lo que la matiza debajo,
   en su caja gris. Variables, cabecera y hoja blanca: arriba, con #pf-lead.
   ══════════════════════════════════════════════════════════════════════ */
#pf-claus #pf-claus-llista,
#pf-claus #pf-claus-parcela {
  display: flex; flex-direction: column; gap: 16px;
  margin: 0; padding: 20px 0;
}
#pf-claus #pf-claus-parcela { border-top: 1px solid var(--pf-linia); }

/* Cada clave: la pastilla en la primera columna, el nombre en la segunda.
   Sin las rayas ni los 9 px de las filas de los demás bloques. */
#pf-claus .pf-clau-fila {
  display: grid; grid-template-columns: var(--pf-et) minmax(0, 1fr);
  column-gap: 12px; align-items: baseline;
  margin: 0; padding: 0; border: none;
}
#pf-claus .pf-clau-codi {
  justify-self: start; min-width: 0;
  padding: 2px 8px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-2);
  font-family: inherit; font-size: var(--pf-fs); line-height: 1.4; letter-spacing: 0;
  white-space: nowrap;
}
/* La que manda en la parcela: el punto de las pastillas de usos, en tinta */
#pf-claus .pf-clau-fila.es-dominant .pf-clau-codi::before {
  width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px;
  background: var(--pf-ink);
}
#pf-claus .pf-clau-nom {
  display: block; min-width: 0;
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45;
}
/* AMB / MUC: la pastilla pequeña de las referencias, nunca en negro */
#pf-claus .pf-clau-nom .df-font {
  display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-3);
  font-size: var(--pf-fs-sm); line-height: 1.4; vertical-align: 1px;
  white-space: nowrap; text-align: left;
}
/* Planeamiento derivado, % de la parcela…: debajo del nombre, en su caja */
#pf-claus .pf-clau-sub {
  display: block; margin-top: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--pf-caixa); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.5;
}

/* «En toda la parcela»: subtítulo como «Admitidos» y su fuente al lado */
#pf-claus #pf-claus-parcela .pf-cond-cap {
  justify-content: flex-start; align-items: baseline; gap: 6px;
  margin: 0 0 -8px; padding: 0; border: none;
}
#pf-claus .pf-cond-et { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-claus .pf-cond-font {
  padding: 1px 6px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-3);
  font-size: var(--pf-fs-sm); line-height: 1.4;
}

/* Lo que aún falta («—» con su ⓘ): la misma rejilla y los mismos grises */
#pf-claus .pf-fulla .df {
  display: grid; grid-template-columns: var(--pf-et) minmax(0, 1fr);
  column-gap: 12px; align-items: baseline;
  margin: 0; padding: 0; border: none;
}
#pf-claus .pf-fulla .df-et { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-claus .pf-fulla .df-val { font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; text-align: left; }
#pf-claus .pf-fulla .df-val.es-buit { color: var(--pf-ink-3); }
#pf-claus .df-ico { color: var(--pf-ink-3); }

/* ══════════════════════════════════════════════════════════════════════
   «RÉGIMEN DEL SUELO», CON EL ESTILO DE «USOS»
   La clasificación de la cabecera, en su pastilla gris al lado del título
   (como la clave de «Usos»); dentro, las filas en las mismas dos columnas,
   a 16 px, sin rayas, y el bloque con 20 px arriba y abajo.
   ══════════════════════════════════════════════════════════════════════ */
#pf-regim #pf-regim-meta {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-2);
  font-size: var(--pf-fs); line-height: 1.4;
}
#pf-regim #pf-regim-meta:empty { display: none; }
#pf-regim #pf-regim-cos {
  display: flex; flex-direction: column; gap: 16px;
  margin: 0; padding: 20px 0;
}
#pf-regim #pf-regim-cos .df {
  display: grid; grid-template-columns: var(--pf-et) minmax(0, 1fr);
  column-gap: 12px; row-gap: 0; align-items: baseline;
  margin: 0; padding: 0; border: none;
}
#pf-regim #pf-regim-cos .df-et { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-regim #pf-regim-cos .df-val { font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; text-align: left; }
#pf-regim #pf-regim-cos .df-val.es-buit { color: var(--pf-ink-3); }
#pf-regim .df-ico { color: var(--pf-ink-3); }
/* Si alguna fila trae nota, va debajo del valor en la caja gris */
#pf-regim #pf-regim-cos .df-nota {
  grid-column: 2; margin-top: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--pf-caixa); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.5; text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════
   «CONDICIONANTES Y AFECTACIONES», CON EL ESTILO DE «USOS»
   Como «Con condiciones»: el nombre con su punto y la fuente en pastilla
   pequeña al lado; debajo, cada cosa encontrada en su caja gris. Los
   grupos por impacto, con el subtítulo gris de «Admitidos», y lo que no
   afecta, en un desplegable como los de «Usos». 20 px arriba y abajo,
   16 px entre filas y 8 px del subtítulo a lo suyo.
   ══════════════════════════════════════════════════════════════════════ */
#pf-cond .pf-flags {
  display: flex; flex-direction: column; gap: 16px;
  margin: 0; padding: 20px 0;
}
#pf-cond .pf-grup-et {
  margin: 0 0 -8px; padding: 0; border: none;
  font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45;
}

/* Cada condicionante: el punto y, al lado, todo lo suyo en columna */
#pf-cond .pf-flag {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; padding: 0; border: none;
  font-size: var(--pf-fs);
}
#pf-cond .pf-flag .norm-dot {
  width: 6px; height: 6px; top: 0;
  margin-top: calc((1.45em - 6px) / 2);
}
#pf-cond .pf-flag > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* El nombre en tinta y la fuente detrás, en la pastilla de los «art.» */
#pf-cond .pf-cond-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
  gap: 4px 8px; margin: 0; padding: 0; border: none;
}
#pf-cond .pf-cond-et { font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; }
#pf-cond .pf-cond-font {
  padding: 1px 6px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-3);
  font-size: var(--pf-fs-sm); line-height: 1.4; text-align: left;
}

/* Lo encontrado: cada cosa en su caja, el nombre y debajo el detalle */
#pf-cond .pf-cond-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 0; padding: 8px 12px; border-radius: 8px;
  background: var(--pf-caixa);
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45;
}
#pf-cond .pf-cond-item + .pf-cond-item { margin-top: 0; }
#pf-cond .pf-cond-sub { font-size: var(--pf-fs-sm); color: var(--pf-ink-2); line-height: 1.5; }
#pf-cond .pf-cond-item .pf-exp-link { font-size: var(--pf-fs-sm); color: var(--pf-ink-2); }
#pf-cond .pf-cond-item .pf-exp-link:hover { color: var(--pf-ink); }
/* «Suspensión de licencias»: pastilla sin borde, en el naranja de «Bloquea» */
#pf-cond .pf-exp-tag {
  display: inline-block; padding: 1px 6px; border: none; border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 12%, transparent); color: var(--coral);
  font-size: var(--pf-fs-sm); line-height: 1.4;
}
/* «No consta…»: la respuesta, en gris; las notas, con la barra de los avisos */
#pf-cond .pf-cond-no { margin: 0; font-size: var(--pf-fs); color: var(--pf-ink-2); line-height: 1.45; }
#pf-cond .pf-cond-nota {
  margin: 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--pf-ink-3);
  font-size: var(--pf-fs-sm); color: var(--pf-ink-2); line-height: 1.5;
}

/* Mientras consulta o si falta el dato: el nombre y, al lado, «—» o
   «Consultando…» en gris, sin la rejilla ni las rayas de las filas */
#pf-cond .pf-flag .df {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0; padding: 0; border: none;
}
#pf-cond .pf-flag .df-et { font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; }
#pf-cond .pf-flag .df-val.es-buit,
#pf-cond .pf-exp-cercant { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-cond .df-ico { color: var(--pf-ink-3); }

/* «Sin afectación detectada (n)»: el desplegable de «Usos» */
:is(#pf-cond, #pf-exped) .pf-sensecap {
  margin: 0; border: 1px solid var(--pf-linia); border-radius: 12px;
  background: none; overflow: hidden;
}
:is(#pf-cond, #pf-exped) .pf-sensecap > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin: 0; list-style: none; cursor: pointer;
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.4;
}
:is(#pf-cond, #pf-exped) .pf-sensecap > summary:hover { color: var(--pf-ink); }
:is(#pf-cond, #pf-exped) .pf-sensecap > summary:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; border-radius: 12px; }
:is(#pf-cond, #pf-exped) .pf-sensecap .pf-plegable-n { color: var(--pf-ink-3); }
:is(#pf-cond, #pf-exped) .pf-sensecap .pf-sec-mes {
  width: 24px; height: 24px; background: var(--pf-pill); box-shadow: none; color: var(--pf-ink-2);
}
:is(#pf-cond, #pf-exped) .pf-sensecap > summary:hover .pf-sec-mes { box-shadow: none; color: var(--pf-ink); }
:is(#pf-cond, #pf-exped) .pf-sensecap[open] > summary .pf-sec-mes .ti-plus { display: none; }
:is(#pf-cond, #pf-exped) .pf-sensecap[open] > summary .pf-sec-mes .ti-minus { display: inline-flex; }
/* Dentro, una fila por fuente, separadas por una raya de 1 px */
:is(#pf-cond, #pf-exped) .pf-sensecap-cos { display: flex; flex-direction: column; gap: 0; }
#pf-cond .pf-sensecap-cos > .pf-flag { padding: 12px 16px; border-top: 1px solid var(--pf-linia); }

/* ══════════════════════════════════════════════════════════════════════
   «PATRIMONIO», CON EL ESTILO DE «USOS»
   Un bloque —el catálogo del municipio— de 20 px arriba y abajo; dentro, las
   filas en las dos columnas de siempre y lo que matiza el valor, debajo en su
   caja gris. Eran dos, con una raya entre ellos: «Protección oficial» se
   quitó el 20-9-2026 y la raya se fue con él, que si no abría la sección con
   un filete suelto.
   ══════════════════════════════════════════════════════════════════════ */
#pf-patr #pf-patr-cos {
  display: flex; flex-direction: column; gap: 16px;
  margin: 0; padding: 20px 0;
}
#pf-patr #pf-patr-cos > .pf-params { display: flex; flex-direction: column; gap: 16px; }

/* Las filas: 150 px + el resto, sin rayas ni los 9 px de las demás. El
   reparto de las filas compactas (170 px, huecos a mano) aquí no manda. */
#pf-patr .pf-fulla .df,
#pf-patr .pf-fulla .df.es-compacte {
  display: grid; grid-template-columns: var(--pf-et) minmax(0, 1fr);
  column-gap: 12px; row-gap: 0; align-items: baseline;
  margin: 0; padding: 0; border: none;
}
#pf-patr .pf-fulla .df-et,
#pf-patr .pf-fulla .df.es-compacte .df-et {
  grid-column: 1; order: 0; flex: none; width: auto;
  font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45;
}
#pf-patr .pf-fulla .df-val,
#pf-patr .pf-fulla .df.es-compacte .df-val {
  grid-column: 2; order: 0;
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; text-align: left;
}
#pf-patr .pf-fulla .df-val.es-buit,
#pf-patr .pf-fulla .df.es-compacte .df-val.es-buit,
#pf-patr .pf-exp-cercant { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
#pf-patr .df-ico { color: var(--pf-ink-3); }

/* Nombre del edificio, registro, «También…» y las notas: cada cosa en su
   caja gris debajo del valor, como las condiciones de «Usos» */
#pf-patr .pf-patr-sub,
#pf-patr .pf-fulla .df-nota,
#pf-patr .pf-fulla .df.es-compacte .df-nota {
  display: block; margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
  background: var(--pf-caixa); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.5; text-align: left;
}
#pf-patr .pf-fulla .df-nota,
#pf-patr .pf-fulla .df.es-compacte .df-nota { grid-column: 2; order: 0; flex-basis: auto; }

/* Las fichas del catálogo: enlaces pequeños, en la columna del valor */
#pf-patr .pf-patr-fitxes {
  margin: -8px 0 0 calc(var(--pf-et) + 12px); gap: 4px;
}
#pf-patr .pf-patr-fitxes .pf-exp-link { font-size: var(--pf-fs-sm); color: var(--pf-ink-2); }
#pf-patr .pf-patr-fitxes .pf-exp-link:hover { color: var(--pf-ink); }
/* La ⓘ de las fuentes, en la esquina del bloque */
#pf-patr .pf-font-ico { top: 0; right: 0; color: var(--pf-ink-3); }

/* ══════════════════════════════════════════════════════════════════════
   «PLANEAMIENTO Y EXPEDIENTES», CON EL ESTILO DE «USOS»
   El número de la cabecera, en su pastilla gris al lado del título. Cada
   expediente, como los planes de «Condicionantes»: en su caja gris, con
   el punto y el nombre arriba, el código y las fechas debajo en pequeño y
   el enlace al final. Los grupos, con el subtítulo gris; los que ya no
   valen, en el desplegable de «Usos».
   ══════════════════════════════════════════════════════════════════════ */
#pf-exped #pf-exped-n {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-2);
  font-size: var(--pf-fs); line-height: 1.4;
}
#pf-exped #pf-exped-n:empty { display: none; }

/* El interruptor de los normativos, arriba; la lista, 16 px por debajo */
#pf-exped .pf-exp-toggle {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin: 0; padding: 20px 0 0; border: none;
  font-size: var(--pf-fs); color: var(--pf-ink-2); line-height: 1.45;
}
/* La casilla redonda de la casa (.pjx-check, la de las tablas de Proyectos) */
#pf-exped .pf-exp-toggle .pjx-check { width: 14px; height: 14px; margin: 0; }
/* Es el primer hijo del primer hijo de la hoja, y la regla que quita la
   raya de arriba a esos (.pf-fulla > :first-child > :first-child) le
   borraba el borde de arriba al círculo: quedaba abierto y el visto, alto */
#pf-exped .pf-exp-toggle .pjx-check { border-top: 1.5px solid var(--border-2); }
#pf-exped .pf-exp-toggle .pjx-check:hover { border-top-color: var(--text-4); }
#pf-exped .pf-exp-toggle .pjx-check:is(:checked, :indeterminate) { border-top-color: var(--text-1); }
#pf-exped .pf-exp-toggle .pjx-check:focus-visible { box-shadow: none; outline: 2px solid var(--blau); outline-offset: 2px; }
#pf-exped #pf-exp-normatius-n { color: var(--pf-ink-3); }
#pf-exped .pf-exps {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 16px 0 20px;
}
#pf-exped .pf-grup-et {
  margin: 0; padding: 0; border: none;
  font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45;
}
#pf-exped .pf-exps > .pf-grup-et:not(:first-child) { margin-top: 8px; }
#pf-exped .pf-exp-buit,
#pf-exped .pf-exp-cercant { margin: 0; font-size: var(--pf-fs); color: var(--pf-ink-2); line-height: 1.45; }

/* Cada expediente en su caja */
#pf-exped .pf-exps > .pf-exp {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  margin: 0; padding: 8px 12px; border: none; border-radius: 8px;
  background: var(--pf-caixa);
}
#pf-exped .pf-exp-cap { display: flex; align-items: flex-start; gap: 8px; }
#pf-exped .pf-exp-punt {
  flex: 0 0 auto; align-self: flex-start;
  width: 6px; height: 6px; margin-top: calc((1.45em - 6px) / 2);
  font-size: var(--pf-fs);
}
#pf-exped .pf-exp-nom { font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; }
/* «Normativo»: la pastilla gris, sin borde */
#pf-exped .pf-exp-tag {
  flex: 0 0 auto; padding: 1px 6px; border: none; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.4;
}
/* Código, tipo, fechas y nombre oficial: la línea pequeña, alineada con el nombre */
#pf-exped .pf-exp-sub,
#pf-exped .pf-exps > .pf-exp > .pf-exp-link,
#pf-exped .pf-exps > .pf-exp > .pf-exp-docs { margin-left: 14px; }
#pf-exped .pf-exp-sub { font-size: var(--pf-fs-sm); color: var(--pf-ink-2); line-height: 1.5; }
#pf-exped .pf-exp-link,
#pf-exped .pf-exp-doc { font-size: var(--pf-fs-sm); color: var(--pf-ink-2); }
#pf-exped .pf-exp-link:hover,
#pf-exped .pf-exp-doc:hover { color: var(--pf-ink); }
#pf-exped .pf-exp-docs-llista { border-left-color: var(--pf-linia); }
#pf-exped .pf-art-frag { background: var(--surface-card); border-radius: 8px; }
#pf-exped .pf-art-text,
#pf-exped .pf-art-mes { font-size: var(--pf-fs-sm); color: var(--pf-ink-2); }

/* Dentro de «Sin vigencia»: una fila por expediente con la raya de 1 px */
#pf-exped .pf-sensecap-cos { display: flex; flex-direction: column; gap: 0; }
#pf-exped .pf-sensecap-cos > .pf-exp {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 12px 16px; border: none; border-top: 1px solid var(--pf-linia);
  background: none;
}
#pf-exped .pf-sensecap-cos .pf-exp-nom { color: var(--pf-ink-3); }
#pf-exped .pf-sensecap-cos .pf-exp-sub { margin-left: 0; color: var(--pf-ink-3); }
#pf-exped .pf-sensecap { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   «LA PARCELA Y EL EDIFICIO» Y «LICENCIAS Y EXPEDIENTES», CON EL ESTILO
   DE «USOS» (la cabecera, la hoja y las filas son las mismas para los dos)
   Los datos del Catastro en las dos columnas de siempre, a 16 px, con la
   nota en su caja gris; y la división horizontal, dentro de la hoja
   blanca, como los desplegables de «Usos»: con borde, el número en gris y
   el +/− redondo, y cada planta en su fila con la raya de 1 px.
   ══════════════════════════════════════════════════════════════════════ */
:is(#pf-catastre, #pf-llic) > .pf-plegable-cap { font-size: var(--pf-fs); color: var(--pf-ink); }
:is(#pf-catastre, #pf-llic) > .pf-plegable-cap:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; border-radius: 12px; }
/* La hoja blanca, a 6 px del gris por los lados como en los apartados */
:is(#pf-catastre, #pf-llic) > .pf-plegable-cos { padding: 0 6px 6px; }
:is(#pf-catastre, #pf-llic) > .pf-plegable-cos > .pf-fulla {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; background: var(--surface-card);
}

/* Las filas: 150 px + el resto, sin rayas ni el reparto de las compactas */
:is(#pf-catastre, #pf-llic) .pf-fulla > .df,
:is(#pf-catastre, #pf-llic) .pf-fulla > .df.es-compacte {
  display: grid; grid-template-columns: var(--pf-et) minmax(0, 1fr);
  column-gap: 12px; row-gap: 0; align-items: baseline;
  margin: 0; padding: 0; border: none;
}
:is(#pf-catastre, #pf-llic) .pf-fulla > .df .df-et {
  grid-column: 1; order: 0; flex: none; width: auto;
  font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45;
}
:is(#pf-catastre, #pf-llic) .pf-fulla > .df .df-val {
  grid-column: 2; order: 0;
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; text-align: left;
}
:is(#pf-catastre, #pf-llic) .pf-fulla > .df .df-val.es-buit { color: var(--pf-ink-3); }
:is(#pf-catastre, #pf-llic) .df-ico { color: var(--pf-ink-3); }
/* Fuera de .pf-bloc la fila «en línea» ponía un «·» tras el nombre: aquí sobra */
:is(#pf-catastre, #pf-llic) .df.es-linia .df-et::after { content: none; }
:is(#pf-catastre, #pf-llic) .pf-fulla > .df .df-nota {
  grid-column: 2; order: 0; flex-basis: auto;
  margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
  background: var(--pf-caixa); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.5; text-align: left;
}

/* La división horizontal: un bloque más, 20 px por debajo de la raya */
#pf-catastre #parcel-sec-imm {
  margin: 4px 0 0; padding: 20px 0 0; border-top: 1px solid var(--pf-linia);
}
#pf-catastre #parcel-sec-imm:empty { display: none; }
#pf-catastre .parcel-sec-empty,
#pf-catastre .parcel-sec-loading { padding: 0; font-size: var(--pf-fs); color: var(--pf-ink-2); }

#pf-catastre .pf-divis {
  margin: 0; border: 1px solid var(--pf-linia); border-radius: 12px;
  background: none; overflow: hidden;
}
#pf-catastre .pf-pleg2-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin: 0; list-style: none; cursor: pointer;
  font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.4;
}
#pf-catastre .pf-pleg2-cap:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; border-radius: 12px; }
#pf-catastre .pf-pleg2-n { color: var(--pf-ink-3); }
#pf-catastre .pf-pleg2 .pf-sec-mes {
  width: 24px; height: 24px; background: var(--pf-pill); box-shadow: none; color: var(--pf-ink-2);
}
#pf-catastre .pf-pleg2-cap:hover .pf-sec-mes { box-shadow: none; color: var(--pf-ink); }
#pf-catastre .pf-pleg2[open] > .pf-pleg2-cap > .pf-sec-mes .ti-plus { display: none; }
#pf-catastre .pf-pleg2[open] > .pf-pleg2-cap > .pf-sec-mes .ti-minus { display: inline-flex; }
#pf-catastre .pf-divis > .pf-pleg2-cos { padding: 0; }

/* Cada planta, una fila de la división con la raya de 1 px encima */
#pf-catastre .pf-divis > .pf-pleg2-cos > .pf-planta,
#pf-catastre .pf-divis > .pf-pleg2-cos > .pf-planta + .pf-planta {
  margin: 0; border: none; border-top: 1px solid var(--pf-linia); border-radius: 0;
  background: none;
}
#pf-catastre .pf-planta > .pf-pleg2-cos { padding: 0 16px 12px; }
#pf-catastre .pf-imm-graella { gap: 8px; }
#pf-catastre .pf-imm-card { border-radius: 8px; background: var(--pf-caixa); }
#pf-catastre .pf-imm-card:hover { background: color-mix(in srgb, var(--pf-ink) 9%, transparent); }
#pf-catastre .pf-imm-tit { font-size: var(--pf-fs); color: var(--pf-ink); }
/* «Ver ficha en la Sede del Catastro»: la última fila, en pequeño */
#pf-catastre .pf-divis .parcel-seu-link {
  display: block; margin: 0; padding: 12px 16px; border-top: 1px solid var(--pf-linia);
  font-size: var(--pf-fs-sm); color: var(--pf-ink-2);
}
#pf-catastre .pf-divis .parcel-seu-link:hover { color: var(--pf-ink); }

/* ══════════════════════════════════════════════════════════════════════
   PREGUNTAS RÁPIDAS (en lugar de Arquitecto / Promotor / Constructor)
   Una barra que parece de escribir y abre la lista de preguntas; la
   respuesta sale debajo como en el chat: la pregunta en su burbuja gris a
   la derecha y la respuesta en una tarjeta con las filas de «Usos» (dos
   columnas, cajas grises, pastillas de artículo y fuente) y el enlace al
   apartado de donde sale.
   ══════════════════════════════════════════════════════════════════════ */
.pf-faq { margin-top: var(--sp-3); display: flex; flex-direction: column; }
.pf-faq-barra {
  display: flex; align-items: center; gap: 8px;
  /* Rectángulo de esquinas redondeadas, como el bloque de Municipio y
     Referencia y los apartados (--r-md), no una pastilla */
  height: 40px; padding: 0 8px 0 14px; border-radius: var(--r-md);
  background: var(--sel-fill); cursor: text;
  transition: background var(--t-hover), box-shadow var(--t-hover);
}
.pf-faq-barra:hover { background: color-mix(in srgb, var(--pf-ink) 7%, transparent); }
.pf-faq-barra:focus-within { background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--pf-linia), 0 1px 2px rgba(18, 18, 23, 0.06); }
.pf-faq-barra > .ti { flex: 0 0 auto; font-size: 17px; color: var(--pf-ink-3); }
.pf-faq-input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
  border: none; outline: none; background: none;
  font: inherit; font-size: var(--pf-fs); color: var(--pf-ink);
}
.pf-faq-input::placeholder { color: var(--pf-ink-3); }
/* La cruz: sin fondo, de gris a negro */
.pf-faq-x {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--pf-ink-3); cursor: pointer;
  transition: color var(--t-hover);
}
.pf-faq-x:hover { color: var(--pf-ink); }
.pf-faq-x:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.pf-faq-x .ti { font-size: 15px; }

/* La lista: tarjeta blanca con la sombra corta de la casa */
.pf-faq-llista {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px; padding: 6px; border-radius: 12px;
  background: var(--surface-card);
  box-shadow: 0 0 0 1px var(--pf-linia), 0 6px 18px -10px rgba(18, 18, 23, 0.35);
}
.pf-faq-opc {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border: none; border-radius: 8px;
  background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.4;
}
.pf-faq-opc .ti { flex: 0 0 auto; font-size: 16px; color: var(--pf-ink-3); }
.pf-faq-opc:hover, .pf-faq-opc.es-actiu { background: var(--sel-fill); }
.pf-faq-opc.es-xat span { color: var(--pf-ink-2); }

/* La respuesta, como en el chat */
.pf-faq-resp { display: flex; flex-direction: column; gap: 8px; }
.pf-faq-resp:not(:empty) { margin-top: 12px; }
.pf-faq-q { display: flex; justify-content: flex-end; }
.pf-faq-q > span {
  max-width: 80%; padding: 8px 14px; border-radius: var(--r-lg);
  background: rgba(10, 14, 20, 0.06); color: var(--pf-ink);
  font-size: var(--pf-fs); line-height: 1.4;
}
[data-theme="dark"] .pf-faq-q > span { background: var(--sel-fill); }
.pf-faq-a {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1px solid var(--pf-linia); border-radius: 12px;
  background: var(--surface-card);
}
.pf-faq-fila {
  display: grid; grid-template-columns: var(--pf-et) minmax(0, 1fr);
  column-gap: 12px; align-items: baseline;
}
.pf-faq-et { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
.pf-faq-vals { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-faq-val { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--pf-fs); color: var(--pf-ink); line-height: 1.45; }
.pf-faq-cond {
  align-self: stretch; padding: 8px 12px; border-radius: 8px;
  background: var(--pf-caixa); color: var(--pf-ink-2);
  font-size: var(--pf-fs-sm); line-height: 1.5;
}
.pf-faq-buit { font-size: var(--pf-fs); color: var(--pf-ink-3); line-height: 1.45; }
.pf-faq-falta { display: block; font-size: var(--pf-fs-sm); color: var(--pf-ink-3); line-height: 1.5; }
.pf-faq-suau { color: var(--pf-ink-3); }
.pf-faq-alerta {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 12%, transparent); color: var(--coral);
  font-size: var(--pf-fs-sm); line-height: 1.4;
}
/* Los usos, uno tras otro separados por un punto medio */
.pf-faq-us + .pf-faq-us::before { content: ' · '; color: var(--pf-ink-3); }
/* «art. 316» y la fuente: la pastilla pequeña gris de «Usos» */
.pf-faq .pf-norma-art,
.pf-faq-font {
  display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 999px;
  background: var(--pf-pill); color: var(--pf-ink-3);
  font-family: inherit; font-size: var(--pf-fs-sm); line-height: 1.4; vertical-align: 1px;
  white-space: nowrap;
}
.pf-faq .pf-norma-art { cursor: help; }
.pf-faq-nota { margin: 0; font-size: var(--pf-fs); color: var(--pf-ink-2); line-height: 1.45; }
/* El pie: de dónde sale y el enlace al apartado */
.pf-faq-peu {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding-top: 12px; border-top: 1px solid var(--pf-linia);
}
.pf-faq-fonts { font-size: var(--pf-fs-sm); color: var(--pf-ink-3); line-height: 1.5; }
.pf-faq-ver {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--pf-fs-sm); color: var(--pf-ink-2);
  transition: color var(--t-hover);
}
.pf-faq-ver:hover { color: var(--pf-ink); }
.pf-faq-ver:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.pf-faq-ver .ti { font-size: 14px; }
@media print { .pf-faq { display: none; } }

/* ─── EL CROQUIS DE LA PARCELA ───────────────────────────────────────────────
   Lo dibuja el servidor (services/croquis.js) y llega hecho: aquí solo se le
   da su caja, como a una tabla. El SVG va con fondo blanco propio —es un plano
   y se lee así— también en modo noche, donde solo se le baja un punto el brillo
   para que no deslumbre. */
/* EL MISMO BLOQUE QUE UNA TABLA. El rótulo sobre gris con su flecha para
   plegarlo y el dibujo en su hoja blanca, con las esquinas de arriba redondas
   y la sombra corta de la casa. Casi todo lo hereda de `.chat-taula-*`, que es
   quien manda: aquí solo va lo que el croquis tiene y una tabla no. */
.croquis-parcela .croquis-full { display: block; padding: 12px 12px 0; }
/* El dibujo es una HOJA pegada dentro del bloque. En claro no se nota —papel
   blanco sobre hoja blanca—, pero en modo noche el dibujo sigue siendo claro a
   propósito (un plano se lee en blanco) y sin este respiro se veía como si el
   bloque estuviera partido en dos. */
.croquis-parcela .croquis-full > svg { border-radius: var(--r-sm); }

/* LOS NÚMEROS, EN CAMPOS
   Los mismos que la ficha de la parcela (.pjw-kv, más arriba): cada dato en su
   casilla gris con el rótulo encima. Aquí van dentro de la hoja blanca del
   croquis, debajo del dibujo y con su propia flecha. */
/* AL MISMO CANTO QUE EL DIBUJO. El SVG lleva su margen dentro —52 de 1060, o
   sea el 4,9 %— y escala con el bloque; poniendo aquí ese mismo porcentaje,
   los dos cantos se siguen a cualquier ancho en vez de bailar. */
.croquis-dades { padding: 6px 4.9% 26px; font-size: 13px; }
.croquis-dades-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  /* La flecha cuelga fuera: así el rótulo arranca justo encima de la primera
     línea de la lista, y el canto izquierdo es uno solo de arriba abajo. */
  margin: 0 0 6px -20px; padding: 0;
  border: none; background: none;
  font-family: var(--font); font-size: 13px; color: var(--text-3);
  cursor: pointer; transition: color var(--t-hover);
}
.croquis-dades-toggle:hover { color: var(--text-1); }
.croquis-dades-toggle .ti { font-size: 14px; transition: transform var(--t-hover); }
/* Cerrado, la flecha de lado: la misma que la del bloque entero */
.croquis-dades-toggle:not(.es-obert) .ti { transform: rotate(-90deg); }
/* Se abre y se cierra con la rejilla de la casa, como todo lo demás */
.croquis-dades-cos {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.croquis-dades-toggle:not(.es-obert) + .croquis-dades-cos { grid-template-rows: 0fr; }
.croquis-dades-cos > .croquis-grid,
.croquis-dades-cos > .croquis-nota { min-height: 0; transition: opacity 0.28s ease; }
.croquis-dades-toggle:not(.es-obert) + .croquis-dades-cos > * { opacity: 0; }
.croquis-dades-cos { overflow: hidden; }
/* CADA DATO EN SU LÍNEA. Antes eran siete rectángulos grises seguidos, y
   hacían más ruido que los números que llevaban dentro. Ahora es una lista: el
   rótulo a la izquierda, el número a la derecha y una raya finísima entre
   línea y línea. Se lee de arriba abajo de una pasada. */
.croquis-llista { margin: 0; padding: 0; }
.croquis-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 11px 0;
}
.croquis-fila + .croquis-fila { border-top: 1px solid rgba(10, 14, 20, 0.05); }
.croquis-fila dt { color: var(--text-2); min-width: 0; }
.croquis-fila dd { margin: 0; color: var(--text-1); text-align: right; overflow-wrap: anywhere; }
/* Lo que NO se sabe: frases, no números, así que van en texto corrido. Con
   `.croquis-parcela` delante porque la burbuja del chat también viste los
   párrafos y, sin eso, ganaba ella. */
.croquis-parcela .croquis-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.croquis-parcela .croquis-nota + .croquis-nota { margin-top: 6px; }
/* De dónde sale cada cosa: una nota del chat, como el cajetín del dibujo —el
   mismo relleno y las mismas esquinas—. `.chat-note` pone el resto.
   La tinta, GRIS: es quien firma el dibujo, no lo importante de él, y en negro
   pesaba igual que los números de arriba. El mismo gris que el rótulo de cada
   dato. */
.croquis-parcela .croquis-peu { margin: 14px 0 0; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
  .croquis-dades-cos, .croquis-dades-cos > * { transition: none; }
}
.croquis-parcela svg { display: block; width: 100%; height: auto; background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .croquis-parcela svg { filter: brightness(0.92); }
}
:root[data-theme="dark"] .croquis-parcela svg { filter: brightness(0.92); }