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

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

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

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

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, #1a2028 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 30%, #1f1810 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 100%, #131a14 0%, transparent 60%),
    linear-gradient(135deg, #0a0e14 0%, #14110d 50%, #0d1218 100%);
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(107, 168, 138, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(180, 140, 100, 0.08) 0%, transparent 40%);
}

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

@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(--border-2) 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(--accent); }

.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: #E5E7EB; color: #111827; }

/* Drop zone */
.proj-drop-zone {
  border: 2px dashed #D1D5DB;
  border-radius: 12px;
  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;
  padding: 32px max(24px, calc((100% - 732px) / 2)) 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) 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: rgba(0, 0, 0, 0.1); 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);
}

/* 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;
  will-change: transform;
}

/* Usuario: burbuja a la derecha */
.message.user {
  align-self: flex-end;
  max-width: 75%;
}

/* Asistente: burbuja a la izquierda */
.message.assistant {
  align-self: flex-start;
  max-width: 85%;
}

/* 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 */
.message.assistant .bubble {
  background: rgba(var(--glass-rgb), 0.62);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(var(--glass-rgb), 0.72);
  color: var(--text-1);
  padding: 14px 18px;
  border-radius: 20px 20px 20px 6px;
  box-shadow: var(--shadow-lift);
}

/* Error del asistente */
.message.assistant.error .bubble {
  background: rgba(220, 60, 40, 0.05);
  border-color: rgba(220, 60, 40, 0.20);
  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;
  justify-content: 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(--border-2) transparent;
}

.doc-list::-webkit-scrollbar { width: 4px; }
.doc-list::-webkit-scrollbar-thumb { background: var(--border-2); 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(--coral-bg); color: var(--coral); }

.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
   ══════════════════════════════════════════════════════════════════ */

#view-mapa { overflow: hidden; flex: 1; min-height: 0; }

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

/* ── Panel flotante de información de parcela ── */
.mapa-info-panel {
  position: absolute;
  top: var(--sp-3);
  bottom: var(--sp-3);
  right: var(--sp-3);
  width: 332px;
  max-width: calc(100% - var(--sp-3) * 2);
  z-index: 1100;
  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-xl);
  box-shadow: var(--shadow-lg);
  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);
}

/* 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: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

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

/* 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(--border-2) 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: var(--text-sm);
  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);
}

.parcel-loading {
  padding: 32px var(--sp-4);
  color: var(--text-3);
  font-size: var(--text-sm);
  text-align: center;
}

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

/* Referencia catastral — elemento hero */
.parcel-ref {
  background: var(--accent-dim);
  border: 1px solid rgba(31, 61, 46, 0.15);
  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(--accent);
}

.parcel-ref-value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--accent);
  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: 12.5px;
  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: 12.5px;
  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: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  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);
}

.parcel-sec-loading {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-3);
  padding: var(--sp-2) 0;
}
.parcel-sec-loading i { animation: spin 0.8s linear infinite; }

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

/* 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: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.parcel-font i { font-size: 13px; }
.parcel-font-wms { background: rgba(31, 61, 46, 0.10); color: var(--accent); }
.parcel-font-rag { background: var(--bg-3); color: var(--text-3); }

.parcel-ref-link {
  color: var(--accent);
  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: 12.5px;
  line-height: 1.45;
}
.parcel-patr i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.parcel-patr-on {
  background: rgba(31, 61, 46, 0.06);
  border-color: rgba(31, 61, 46, 0.18);
  color: var(--accent);
}
.parcel-patr-off { background: var(--bg-3); color: var(--text-2); }
.parcel-patr-main { font-weight: 600; }
.parcel-patr-sub { font-size: 11.5px; 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: var(--accent);
  border-color: var(--accent);
}

.parcel-btn-ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border);
}
.parcel-btn-ghost:not(:disabled):hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(31, 61, 46, 0.28);
}

/* 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: 12px;
  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: 11.5px;
  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;
}

/* Avatar — glass orb */
.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(31, 61, 46, 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) ── */
.pill-wrap {
  width: min(90%, 620px);
}

/* 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);
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.82) inset,
    0 -1px 1px rgba(0, 0, 0, 0.03) inset,
    0 4px 20px rgba(15, 25, 40, 0.08),
    0 12px 40px rgba(15, 25, 40, 0.05);
  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(74, 130, 104, 0.18),
    0 8px 32px rgba(15, 25, 40, 0.12);
}

/* ── 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%;
  height: auto;
  min-height: 40px;
  max-height: 168px;        /* 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(--border-2) transparent;
}
.pill-bar-stack .pill-input::-webkit-scrollbar { width: 5px; }
.pill-bar-stack .pill-input::-webkit-scrollbar-thumb { background: rgba(10, 14, 20, 0.14); 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(--bg-3); }
.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(31, 61, 46, 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: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(31, 61, 46, 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(31, 61, 46, 0.14);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-hover);
}
.muni-filter-clear:hover { background: rgba(31, 61, 46, 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(--border-2) 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(--bg-3); }
.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" */
.juris-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 6px;
  border-radius: 18px;
  font-size: 13px;
  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);
}
/* En reposo el text és gris (--text-2), seleccionat o no, igual que "Adjuntar".
   En hover tot el xip (text + chevron) passa a negre. */
.juris-chip:hover { background: rgba(var(--glass-rgb), 0.85); 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; }

/* 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%;
}
.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;
  bottom: calc(100% + 10px);
  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: dropUpIn 130ms ease both;
}
.juris-dropdown.hidden { display: none; }

.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" */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.juris-list::-webkit-scrollbar { width: 5px; }
.juris-list::-webkit-scrollbar-thumb { background: rgba(10, 14, 20, 0.14); border-radius: 3px; }

/* Files: mateix padding/tipografia que .pill-dropdown-item */
.juris-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  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);
}
.juris-item:hover { background: var(--bg-3); }
.juris-item.is-selected { background: var(--bg-3); }
.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;
  overflow: hidden;
  line-height: 1;
  padding: 0;
  height: 24px;
}

.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(--border-2) transparent;
}
.composer .pill-input::-webkit-scrollbar { width: 5px; }
.composer .pill-input::-webkit-scrollbar-thumb { background: rgba(10, 14, 20, 0.14); 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); }

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

.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(--border-2) 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;
  gap: 6px;
}

.mem-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 1.2s ease-in-out infinite;
}

.mem-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.mem-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.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: rgba(10, 14, 20, 0.12) transparent;
}

.project-card::-webkit-scrollbar { width: 6px; }
.project-card::-webkit-scrollbar-track { background: transparent; }
.project-card::-webkit-scrollbar-thumb { background: rgba(10, 14, 20, 0.12); 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;
  justify-content: center;
  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;
  margin: 12px 0 0;     /* lleuger aire per dalt, mantenint-lo centrat */
  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(31, 61, 46, 0.18);
}

/* Hero title */
.hero-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  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;
}

.sugg-label {
  font-family: var(--font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  font-weight: 500;
  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%;
  margin-top: 20px;
  flex-shrink: 0;
  text-align: left;
}

.home-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-col > .sugg-label { padding-left: 10px; }

/* 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);
  border: 1px solid rgba(10, 14, 20, 0.06);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(10, 14, 20, 0.03),
    0 4px 16px rgba(10, 14, 20, 0.04);
  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;
}
.home-panel-scroll::-webkit-scrollbar { width: 4px; }
.home-panel-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }

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

/* ══════════════════════════════════════════════════════════════════
   VISTA PROYECTO  (#view-proyecto)
   ══════════════════════════════════════════════════════════════════ */

/* Layout */
.pv-layout {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,14,20,0.10) transparent;
}
.pv-layout::-webkit-scrollbar { width: 5px; }
.pv-layout::-webkit-scrollbar-track { background: transparent; }
.pv-layout::-webkit-scrollbar-thumb { background: rgba(10,14,20,0.10); border-radius: 3px; }

.pv-content {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Separator */
.pv-sep {
  height: 1px;
  background: rgba(10,14,20,0.07);
  margin: 0;
  flex-shrink: 0;
}

/* Project header */
.pv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 18px;
}

.pv-header-left { flex: 1; min-width: 0; }

.pv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.pv-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.pv-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-1);
  margin-bottom: 4px;
}

.pv-addr {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 14px;
}

.pv-meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.pv-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pv-meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  font-weight: 500;
}

.pv-meta-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

.pv-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Section */
.pv-section { padding: 18px 24px; }

.pv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pv-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  font-weight: 500;
}

.pv-link-btn {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}
.pv-link-btn:hover { text-decoration: underline; }

/* Parámetros */
.pv-params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pv-param {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: rgba(var(--glass-rgb),0.42);
  border-radius: var(--r-sm);
}

.pv-param-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 500;
}

.pv-param-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.pv-param-note {
  font-size: 10px;
  color: var(--text-3);
}

/* Status badges (proyecto view) */
.status-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.s-active  { background: rgba(31,61,46,0.08);   color: #1f3d2e; }
.s-pending { background: rgba(122,90,31,0.08);  color: #7a5a1f; }
.s-alert   { background: rgba(122,32,32,0.08);  color: #7a2020; }
.s-done    { background: rgba(26,92,122,0.08);  color: #1a5c7a; }

/* Documentación */
.pv-doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-hover);
}
.pv-doc-row:last-child { border-bottom: none; }
.pv-doc-row:hover .pv-doc-name { color: var(--accent); }

.pv-doc-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
}
.pv-doc-pdf  { background: rgba(180,40,40,0.08);  color: rgba(180,40,40,0.9); }
.pv-doc-xls  { background: rgba(40,140,80,0.08);  color: rgba(40,140,80,0.9); }
.pv-doc-doc  { background: rgba(40,80,180,0.08);  color: rgba(40,80,180,0.9); }

.pv-doc-name { font-weight: 500; flex: 1; color: var(--text-1); }
.pv-doc-date { font-size: 11px; color: var(--text-3); flex-shrink: 0; }

/* To-do list */
.pv-todo-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.pv-todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-hover);
}
.pv-todo-item:hover { background: rgba(var(--glass-rgb),0.45); }

.pv-todo-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 10px;
  color: transparent;
  transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
}
.pv-todo-check.checked {
  background: linear-gradient(135deg, var(--accent), var(--accent-glow));
  border-color: transparent;
  color: var(--surface-white);
}
.pv-todo-check:hover:not(.checked) { border-color: var(--accent-glow); }

.pv-todo-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-1);
  transition: color var(--t-hover), text-decoration var(--t-hover);
}
.pv-todo-item.pv-done .pv-todo-text {
  text-decoration: line-through;
  color: var(--text-3);
  opacity: 0.7;
}

.pv-todo-tags { display: flex; gap: 4px; }

.pv-todo-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
.pv-tag-obra     { background: rgba(74,130,104,0.10); color: #2a6b45; }
.pv-tag-despacho { background: rgba(40,80,180,0.08);  color: #2a4a8a; }
.pv-tag-urgente  { background: rgba(180,40,40,0.08);  color: #8a2020; }
.pv-tag-cliente  { background: rgba(122,90,31,0.08);  color: #6a4a10; }

.pv-todo-add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-2);
  margin-top: 4px;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.pv-todo-add:focus-within {
  border-color: var(--accent-glow);
  background: rgba(var(--glass-rgb),0.35);
}

.pv-todo-add-icon { font-size: 14px; color: var(--text-3); flex-shrink: 0; }

.pv-todo-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-1);
}
.pv-todo-input::placeholder { color: var(--text-3); }

/* Equipo */
.pv-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pv-team-row:last-child { border-bottom: none; }

.pv-team-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--surface-white);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.pv-team-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pv-team-name { font-size: 13px; font-weight: 500; color: var(--text-1); }
.pv-team-role { font-size: 11px; color: var(--text-3); }

/* Notas IA colapsable */
.pv-notes { overflow: hidden; }

.pv-notes-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background var(--t-hover);
}
.pv-notes-toggle:hover { background: rgba(var(--glass-rgb),0.28); }

.pv-notes-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.pv-notes-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

.pv-notes-sub {
  font-size: 11px;
  color: var(--text-3);
}

.pv-notes-toggle-label {
  font-size: 12px;
  color: var(--text-3);
  flex-shrink: 0;
}

.pv-notes-body {
  padding: 0 16px 16px;
}
.pv-notes-body.hidden { display: none; }

.pv-notes-msgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 0 12px;
  scrollbar-width: thin;
}

.pv-note-msg { display: flex; flex-direction: column; gap: 3px; }
.pv-note-user { align-items: flex-end; }
.pv-note-assistant { align-items: flex-start; }

.pv-note-bubble {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 16px;
}
.pv-note-user .pv-note-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-glow));
  color: var(--surface-white);
  border-bottom-right-radius: 5px;
}
.pv-note-assistant .pv-note-bubble {
  background: rgba(var(--glass-rgb),0.88);
  border: 1px solid rgba(var(--glass-rgb),0.78);
  color: var(--text-1);
  border-bottom-left-radius: 5px;
}

.pv-note-time { font-size: 10px; color: var(--text-4); padding: 0 4px; }

.pv-notes-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--glass-rgb),0.88);
  border: 1px solid rgba(var(--glass-rgb),0.85);
  border-radius: var(--r-xl);
  padding: 5px 5px 5px 14px;
  box-shadow: 0 2px 12px rgba(15,25,40,0.06);
  transition: box-shadow 0.2s;
}
.pv-notes-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(74,130,104,0.15), 0 2px 12px rgba(15,25,40,0.08);
}

.pv-notes-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-1);
  padding: 6px 0;
}
.pv-notes-input::placeholder { color: var(--text-3); }

.pv-notes-send-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(145deg, var(--accent), var(--accent-glow));
  color: var(--surface-white);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.pv-notes-send-btn:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(31,61,46,0.3); }

.pv-notes-note {
  font-size: 10px;
  color: var(--text-4);
  text-align: center;
  padding: 8px 0 0;
}

/* ══════════════════════════════════════════════════════════════════
   VISTA PROYECTO V2 — sub-páginas
   ══════════════════════════════════════════════════════════════════ */

/* Grid #app con panel chat lateral */
#app.pv-chat-open {
  grid-template-columns: auto minmax(0, 1fr) 300px;
}

/* Sub-view container */
.pv-subview {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.pv-subview.hidden { display: none !important; }

/* Sub-page topbar */
.pv-subbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(var(--glass-rgb),.45); flex-shrink: 0;
}
.pv-back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; color: var(--text-3); font: inherit; font-size: 13px;
  padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
}
.pv-back-btn:hover { background: rgba(var(--glass-rgb),.5); color: var(--text-1); }
.pv-subbar-title { font-size: 14px; font-weight: 500; color: var(--text-1); }

/* Scrollable area */
.pv-scroll {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin; scrollbar-color: rgba(10,14,20,.10) transparent;
}
.pv-scroll::-webkit-scrollbar { width: 5px; }
.pv-scroll::-webkit-scrollbar-thumb { background: rgba(10,14,20,.10); border-radius: 3px; }

/* Action buttons */
.pv-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: none;
  background: rgba(var(--glass-rgb),.52); border: 1px solid rgba(var(--glass-rgb),.68);
  font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
}
.pv-action-btn:hover { background: rgba(var(--glass-rgb),.82); color: var(--text-1); transform: translateY(-1px); }
.pv-action-primary {
  background: linear-gradient(145deg, var(--accent), var(--accent-glow));
  color: var(--surface-white) !important; border-color: transparent;
  box-shadow: 0 2px 8px rgba(31,61,46,.2);
}
.pv-action-primary:hover { box-shadow: 0 4px 14px rgba(31,61,46,.3); }

/* Project header (landing) */
.pv-proj-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg,rgba(var(--glass-rgb),.72),rgba(var(--glass-rgb),.45));
  border: 1px solid rgba(var(--glass-rgb),.68); border-radius: var(--r-lg);
}
.pv-ph-badge { margin-bottom: 7px; }
.pv-ph-title { font-family: var(--font-sans); font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px; }
.pv-ph-addr { font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.pv-ph-meta { display: flex; gap: 20px; flex-wrap: wrap; }
.pv-pm-item { display: flex; flex-direction: column; gap: 2px; }
.pv-pm-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .10em; color: var(--text-3); font-weight: 500; }
.pv-pm-val { font-size: 13px; font-weight: 500; }

/* Nav cards 2x2 */
.pv-nav-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv-nav-card {
  padding: 22px 22px;
  background: var(--surface-card);
  border: 1px solid rgba(10, 14, 20, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    0 1px 2px rgba(10, 14, 20, 0.03),
    0 4px 16px rgba(10, 14, 20, 0.04);
}
.pv-nav-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(10, 14, 20, 0.04),
    0 10px 28px rgba(10, 14, 20, 0.08);
}
.pv-nc-icon { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 18px; }
.pv-nc-pdf   { background: rgba(180,40,40,.08);  color: rgba(180,40,40,.9); }
.pv-nc-check { background: rgba(40,140,80,.08);  color: rgba(40,140,80,.9); }
.pv-nc-map   { background: rgba(40,80,180,.08);  color: rgba(40,80,180,.9); }
.pv-nc-team  { background: rgba(180,90,20,.08);  color: rgba(180,90,20,.9); }
.pv-nc-title { font-size: 14px; font-weight: 500; }
.pv-nc-sub   { font-size: 12px; color: var(--text-3); }

/* Team strip */
.pv-team-strip { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.pv-ts-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 500; margin-right: 4px; }
.pv-ts-av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(var(--glass-rgb),.8); display: grid; place-items: center; font-size: 10px; font-weight: 500; color: var(--surface-white); margin-left: -6px; }
.pv-ts-names { font-size: 12px; color: var(--text-3); margin-left: 6px; }

/* Docs banner */
.pv-mem-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg,rgba(31,61,46,.08),rgba(74,130,104,.06));
  border: 1px solid rgba(74,130,104,.18); border-radius: var(--r-md);
}
.pv-mem-banner h3 { font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 2px; }
.pv-mem-banner p  { font-size: 12px; color: var(--text-2); }

/* Folders */
.pv-folders { display: flex; flex-direction: column; gap: 4px; }
.pv-folder { border-radius: var(--r-md); overflow: hidden; background: rgba(var(--glass-rgb),.45); border: 1px solid rgba(var(--glass-rgb),.65); }
.pv-folder-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; transition: background var(--t-hover); user-select: none;
}
.pv-folder-hdr:hover { background: rgba(var(--glass-rgb),.62); }
.pv-fi { font-size: 15px; flex-shrink: 0; color: var(--text-2); }
.pv-fn { font-size: 13px; font-weight: 500; flex: 1; }
.pv-fc { font-size: 11px; color: var(--text-3); }
.pv-fchev { font-size: 11px; color: var(--text-3); transition: transform .22s; }
.pv-folder.pv-open .pv-fchev { transform: rotate(180deg); }
.pv-folder-body { display: none; border-top: 1px solid var(--border); }
.pv-folder.pv-open .pv-folder-body { display: block; }

/* Doc rows */
.pv-dr {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; cursor: pointer; transition: background var(--t-hover);
}
.pv-dr:last-child { border-bottom: none; }
.pv-dr:hover { background: rgba(var(--glass-rgb),.45); }
.pv-dr:hover .pv-dn { color: var(--accent); }
.pv-di { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; }
.pv-di-pdf { background: rgba(180,40,40,.08); color: rgba(180,40,40,.9); }
.pv-di-xls { background: rgba(40,140,80,.08); color: rgba(40,140,80,.9); }
.pv-di-img { background: rgba(40,80,180,.08); color: rgba(40,80,180,.9); }
.pv-dn { flex: 1; font-weight: 500; color: var(--text-1); }
.pv-dd { font-size: 11px; color: var(--text-3); flex-shrink: 0; }

/* Dropzone */
.pv-dropzone {
  border: 2px dashed rgba(10,14,20,.14); border-radius: var(--r-md);
  padding: 24px; text-align: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease;
  background: rgba(var(--glass-rgb),.25);
}
.pv-dropzone:hover, .pv-dropzone.pv-dz-over { border-color: var(--accent-glow); background: rgba(74,130,104,.06); }
.pv-dz-icon { font-size: 28px; color: var(--text-3); opacity: .5; display: block; margin-bottom: 6px; }
.pv-dz-text { font-size: 13px; color: var(--text-3); }
.pv-dz-text strong { color: var(--accent); }
.pv-dz-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* Tasks */
.pv-task-add-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: rgba(var(--glass-rgb),.62); border: 1px solid rgba(var(--glass-rgb),.75);
  border-radius: var(--r-pill); box-shadow: 0 2px 10px rgba(15,25,40,.06);
}
.pv-task-add-bar:focus-within { box-shadow: 0 0 0 3px rgba(74,130,104,.15); }
.pv-task-add-input { flex: 1; border: none; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--text-1); padding: 4px 0; }
.pv-task-add-input::placeholder { color: var(--text-3); }
.pv-tag-sel { border: 1px solid var(--border-2); border-radius: 6px; background: rgba(var(--glass-rgb),.5); padding: 4px 8px; font-size: 12px; color: var(--text-2); outline: none; cursor: pointer; font: inherit; }

.pv-task-list { display: flex; flex-direction: column; gap: 3px; }
.pv-ti { border-radius: var(--r-sm); overflow: hidden; background: rgba(var(--glass-rgb),.45); border: 1px solid rgba(var(--glass-rgb),.62); }
.pv-tr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.pv-tcheck {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border-2); background: transparent;
  display: grid; place-items: center; flex-shrink: 0; font-size: 10px;
  color: transparent; cursor: pointer; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
}
.pv-tcheck-done { background: linear-gradient(135deg,var(--accent),var(--accent-glow)); border-color: transparent; color: var(--surface-white); }
.pv-tcheck:hover:not(.pv-tcheck-done) { border-color: var(--accent-glow); }
.pv-tt { flex: 1; font-size: 13px; color: var(--text-1); transition: background var(--t-hover), color var(--t-hover); }
.pv-ti-done .pv-tt { text-decoration: line-through; color: var(--text-3); opacity: .7; }
.pv-ttags { display: flex; gap: 4px; }
.pv-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 100px; white-space: nowrap; }
.pv-tag-obra     { background: rgba(40,140,80,.10);  color: rgba(20,100,50,.9); }
.pv-tag-despacho { background: rgba(40,80,180,.08);  color: rgba(30,60,150,.9); }
.pv-tag-urgente  { background: rgba(180,40,40,.08);  color: rgba(140,20,20,.9); }
.pv-tag-cliente  { background: rgba(180,110,20,.08); color: rgba(140,80,10,.9); }
.pv-texp { width: 24px; height: 24px; background: none; border: none; color: var(--text-3); font-size: 11px; display: grid; place-items: center; border-radius: 5px; cursor: pointer; transition: background var(--t-hover), color var(--t-hover), transform var(--t-hover); flex-shrink: 0; }
.pv-texp:hover { background: rgba(var(--glass-rgb),.6); color: var(--text-1); }
.pv-texp.pv-texp-open { transform: rotate(180deg); }
.pv-td { padding: 0 12px 10px 40px; display: none; border-top: 1px solid var(--border); }
.pv-td.pv-td-open { display: block; }
.pv-td-area { width: 100%; min-height: 60px; border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text-1); background: rgba(var(--glass-rgb),.5); outline: none; resize: vertical; margin-top: 8px; }
.pv-td-area:focus { border-color: var(--accent-glow); }
.pv-attach { margin-top: 8px; }
.pv-attach-lbl { font-size: 11px; color: var(--text-3); }
.pv-at-thumbs { display: flex; gap: 6px; margin-top: 4px; }
.pv-at-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); background: rgba(var(--glass-rgb),.5); border: 1px dashed var(--border-2); display: grid; place-items: center; font-size: 16px; color: var(--text-3); cursor: pointer; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
.pv-at-thumb:hover { background: rgba(var(--glass-rgb),.8); border-color: var(--accent-glow); color: var(--accent); }

/* Params */
.pv-params-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pv-param { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: rgba(var(--glass-rgb),.5); border: 1px solid rgba(var(--glass-rgb),.68); border-radius: var(--r-md); }
.pv-pl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 500; }
.pv-pv { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--text-1); }
.pv-pn { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.pv-sect-title { font-size: 11px; text-transform: uppercase; letter-spacing: .10em; color: var(--text-3); font-weight: 500; }
.pv-norma-list { display: flex; flex-direction: column; gap: 1px; }
.pv-nr { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; transition: background var(--t-hover); }
.pv-nr:hover { background: rgba(var(--glass-rgb),.5); }
.pv-nbullet { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-glow); flex-shrink: 0; }
.pv-nname { font-weight: 500; flex: 1; }
.pv-nart { font-size: 11px; color: var(--accent); font-family: var(--font-mono); }

/* Team */
.pv-team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-tc { padding: 14px 16px; background: rgba(var(--glass-rgb),.5); border: 1px solid rgba(var(--glass-rgb),.68); border-radius: var(--r-md); display: flex; align-items: center; gap: 10px; }
.pv-tc-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 500; color: var(--surface-white); flex-shrink: 0; font-family: var(--font-mono); }
.pv-tc-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pv-tc-name { font-size: 13px; font-weight: 500; color: var(--text-1); }
.pv-tc-role { font-size: 11px; color: var(--text-3); }
.pv-tc-email { font-size: 10px; color: var(--text-2); font-family: var(--font-mono); }
.pv-tc-actions { display: flex; gap: 5px; }
.pv-tc-btn { width: 26px; height: 26px; border-radius: 7px; background: rgba(var(--glass-rgb),.6); border: 1px solid rgba(var(--glass-rgb),.7); display: grid; place-items: center; font-size: 13px; color: var(--text-2); cursor: pointer; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover); }
.pv-tc-btn:hover { background: var(--surface-card); color: var(--accent); }
.pv-prog-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pv-prog-lbl { flex: 1; color: var(--text-2); }
.pv-prog-bar { width: 120px; height: 5px; background: var(--border); border-radius: 100px; overflow: hidden; }
.pv-prog-fill { height: 100%; background: linear-gradient(90deg,var(--accent),var(--accent-glow)); border-radius: 100px; }
.pv-prog-pct { font-size: 11px; font-weight: 500; color: var(--text-2); min-width: 32px; text-align: right; }

/* Chat panel lateral */
.pv-chat-panel {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  display: flex; flex-direction: column; overflow: hidden;
  height: 100%;
}
.pv-chat-panel.hidden { display: none; }
.pvch-topbar { padding: 14px 16px; border-bottom: 1px solid rgba(var(--glass-rgb),.5); flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; }
.pvch-title { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.pvch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-glow); box-shadow: 0 0 6px var(--accent-glow); flex-shrink: 0; }
.pvch-sub { font-size: 11px; color: var(--text-3); }
.pvch-close { width: 24px; height: 24px; border-radius: 6px; background: none; border: none; color: var(--text-3); font-size: 13px; display: grid; place-items: center; cursor: pointer; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover); }
.pvch-close:hover { background: rgba(var(--glass-rgb),.5); color: var(--text-1); }
.pvch-msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.pvch-msgs::-webkit-scrollbar { width: 4px; }
.pvch-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.pvch-msg { display: flex; flex-direction: column; gap: 3px; animation: msgIn .3s ease-out; }
.pvch-user { align-items: flex-end; }
.pvch-ai   { align-items: flex-start; }
.pvch-bubble { max-width: 86%; padding: 9px 13px; font-size: 13px; line-height: 1.5; border-radius: 14px; }
.pvch-user .pvch-bubble { background: linear-gradient(135deg,var(--accent),var(--accent-glow)); color: var(--surface-white); border-bottom-right-radius: 4px; }
.pvch-ai   .pvch-bubble { background: rgba(var(--glass-rgb),.72); border: 1px solid rgba(var(--glass-rgb),.8); color: var(--text-1); border-bottom-left-radius: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pvch-time { font-size: 10px; color: var(--text-4); padding: 0 3px; }
.pvch-suggs { padding: 0 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.pvch-slabel { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 500; margin-bottom: 2px; }
.pvch-chip { padding: 7px 11px; background: rgba(var(--glass-rgb),.52); border: 1px solid rgba(var(--glass-rgb),.68); border-radius: var(--r-sm); font-size: 12px; color: var(--text-2); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; line-height: 1.4; }
.pvch-chip:hover { background: rgba(var(--glass-rgb),.88); color: var(--text-1); }
.pvch-input-wrap { padding: 10px 12px; border-top: 1px solid rgba(var(--glass-rgb),.4); flex-shrink: 0; }
.pvch-input-bar { display: flex; align-items: center; gap: 6px; background: rgba(var(--glass-rgb),.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border: 1px solid rgba(var(--glass-rgb),.82); border-radius: var(--r-xl); padding: 4px 4px 4px 12px; box-shadow: 0 2px 10px rgba(15,25,40,.06); transition: box-shadow .2s; }
.pvch-input-bar:focus-within { box-shadow: 0 0 0 3px rgba(74,130,104,.15); }
.pvch-input { flex: 1; border: none; background: transparent; font: inherit; font-size: 13px; color: var(--text-1); outline: none; padding: 6px 0; }
.pvch-input::placeholder { color: var(--text-3); }
.pvch-send { width: 30px; height: 30px; border-radius: 10px; border: none; background: linear-gradient(145deg,var(--accent),var(--accent-glow)); color: var(--surface-white); display: grid; place-items: center; font-size: 14px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0; }
.pvch-send:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(31,61,46,.3); }
.pvch-note { font-size: 10px; color: var(--text-4); text-align: center; padding: 5px 0 2px; }

/* Modal crear memoria */
.pv-modal-ov { position: fixed; inset: 0; background: rgba(10,14,20,.35); z-index: 200; display: grid; place-items: center; }
.pv-modal-ov.hidden { display: none; }
.pv-modal-box { width: 100%; max-width: 480px; background: rgba(var(--glass-rgb),.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--glass-rgb),.92); border-radius: var(--r-xl); box-shadow: 0 16px 48px rgba(15,25,40,.14); padding: 26px; display: flex; flex-direction: column; gap: 14px; animation: modalIn .25s ease-out; }
@keyframes modalIn { from{opacity:0;transform:scale(.97) translateY(8px)} to{opacity:1;transform:none} }
.pv-modal-title { font-size: 18px; font-weight: 600; }
.pv-modal-sub { font-size: 13px; color: var(--text-2); }
.pv-modal-ta { width: 100%; min-height: 90px; border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text-1); background: rgba(var(--glass-rgb),.6); outline: none; resize: vertical; }
.pv-modal-ta:focus { border-color: var(--accent-glow); }
.pv-modal-ta::placeholder { color: var(--text-3); }
.pv-modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
.pv-modal-cancel { padding: 7px 16px; border-radius: var(--r-pill); font: inherit; font-size: 13px; background: rgba(var(--glass-rgb),.6); border: 1px solid rgba(var(--glass-rgb),.72); color: var(--text-2); cursor: pointer; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover); }
.pv-modal-cancel:hover { background: var(--surface-card); color: var(--text-1); }
.pv-modal-ok { padding: 7px 16px; border-radius: var(--r-pill); font: inherit; font-size: 13px; background: linear-gradient(145deg,var(--accent),var(--accent-glow)); border: none; color: var(--surface-white); cursor: pointer; box-shadow: 0 2px 8px rgba(31,61,46,.2); transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover); }
.pv-modal-ok:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,61,46,.3); }
.pv-modal-success { text-align: center; padding: 8px 0; }
.pv-modal-ok-icon { font-size: 36px; color: var(--s-done); display: block; margin-bottom: 8px; }
.pv-modal-ok-msg { font-size: 14px; font-weight: 500; }
.pv-modal-ok-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.pv-modal-ok-btn { padding: 7px 20px; border-radius: var(--r-pill); font: inherit; font-size: 13px; background: linear-gradient(145deg,var(--accent),var(--accent-glow)); border: none; color: var(--surface-white); cursor: pointer; margin-top: 12px; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover); }

/* ══════════════════════════════════════════════════════════════════
   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; }
  /* Panel de preview de documentos pasa a ser overlay flotante */
  .pv-doc-preview {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 380px;
    z-index: 10;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(15,25,40,0.06);
  }
  .pv-chat-panel { width: 320px; }
}

/* ── 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; }
  /* Project nav cards: una sola columna */
  .pv-nav-cards { grid-template-columns: 1fr; }
  /* Equipo y tareas: una columna */
  .pv-team-cards { grid-template-columns: 1fr; }
  /* Config modal: sidebar más estrecho */
  .config-modal { grid-template-columns: 200px 1fr; }
  .config-content { padding: 64px 32px 32px; }
  /* Doc preview pasa a ocupar más */
  .pv-doc-preview { width: 60%; }
  /* 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; }

@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;
  }
  /* Icona hamburguesa a la topbar (amaga la de panel) */
  .sidebar-toggle-desktop-ico { display: none; }
  .sidebar-toggle-mobile-ico  { display: inline-flex; }

  .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; }
  /* Doc preview: drawer completo */
  .pv-doc-preview { width: 92%; }
  .pv-chat-panel { width: 100%; }
  /* Project subbar acciones envuelven */
  .pv-subbar { flex-wrap: wrap; gap: 8px; }
  /* 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,
  .pv-nav-card,
  .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%; }
  /* Project actions: solo iconos */
  .pv-action-btn span { display: none; }
}

/* ── Normativa · barra selector geográfico ── */
.norm-geo-bar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 0 0 var(--sp-5);
}

.norm-geo-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover);
  font-family: var(--font);
  text-align: left;
  width: 220px;
  height: 56px;
  flex: 0 0 220px;
  box-sizing: border-box;
}
.norm-geo-muni-wrap { position: relative; width: 220px; height: 56px; flex: 0 0 220px; }
.norm-geo-muni-wrap .norm-geo-pill { width: 100%; height: 100%; flex: 1 1 auto; }
.norm-geo-pill:hover:not(:disabled) {
  border-color: var(--border-2);
  box-shadow: var(--shadow);
}
.norm-geo-pill.is-locked {
  cursor: default;
  background: var(--bg-3);
}

.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; }

.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;
}
.norm-thead,
.norm-row {
  display: grid;
  grid-template-columns: minmax(260px, 2.4fr) 160px minmax(150px, 1.3fr) minmax(160px, 1.5fr);
  align-items: center;
  gap: var(--sp-4);
  /* Texto alineado con los botones/buscador de arriba: sp-6 (inset de la vista) + sp-4 (padding interno previo) */
  padding: 0 calc(var(--sp-6) + var(--sp-4));
  min-width: 720px;
}
.norm-thead {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 44px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}
.norm-th {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-3);
}
.norm-row {
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-hover);
}
.norm-row:last-child { border-bottom: none; }
.norm-row:hover { background: rgba(10, 14, 20, 0.035); }
.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;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 7px 12px;
  background: rgba(10, 14, 20, 0.05);
  border: 1px solid rgba(120, 128, 140, 0.12);
  border-radius: var(--r);
  transition: background var(--t-hover), border-color var(--t-hover);
}
.norm-row:hover .norm-col-doc {
  background: rgba(10, 14, 20, 0.08);
  border-color: rgba(120, 128, 140, 0.20);
}

/* Tooltip propi (instantani) per a noms de document tallats */
.app-tooltip {
  position: fixed;
  z-index: 3000;
  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; }
.norm-doc-ic { color: var(--coral); font-size: 14px; flex-shrink: 0; }
.norm-doc-name {
  font-weight: 500;
  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;
}
.norm-type-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  background: rgba(10, 14, 20, 0.05);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.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; }
.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-col-ref { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.norm-td.norm-col-ref { color: var(--text-2); font-size: 12px; }
.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 32px rgba(15, 25, 40, 0.08);
  overflow: hidden;   /* el contingut respecta les cantonades arrodonides */
}
.pdf-panel.visible {
  display: flex;
  animation: pdf-panel-in var(--t-panel) both;
}
@keyframes pdf-panel-in {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* El contingut principal es redueix a la meitat esquerra */
#app {
  transition: width var(--t-panel);
}
body.pdf-panel-open #app {
  width: 50vw;
}

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

/* ── Mode ampliat · pop-up centrat amb fons difuminat ─────────── */
.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; }

.pdf-panel.is-expanded {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(1100px, 92vw);
  height: 92vh;
  z-index: 200;
  animation: none;   /* evita que pdf-panel-in sobreescrigui el transform */
  box-shadow: var(--shadow-lg);
}
/* En mode ampliat, l'app de darrere torna a tot l'ample (es veu difuminada) */
body.pdf-panel-open.pdf-expanded #app { width: 100vw; }

/* ── Document ────────────────────────────────────────────────── */
.pdf-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* ── 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: rgba(10, 14, 20, 0.06); 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%; }
.pdf-assist-msg.ai.loading { color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.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(--bg-3); }
.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: 18px;
  height: 18px;
  border-radius: 4px;
}
.pdf-assist-file-x:hover { background: var(--bg-2); 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ó "Consultar" només quan el PDF està ampliat */
#pdf-visor-assist-btn { display: none; }
.pdf-panel.is-expanded #pdf-visor-assist-btn { display: inline-flex; }

/* 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 {
  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: var(--text-md);
  font-weight: 600;
  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;
}
/* ── 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);
  background: var(--surface-white, #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; }

/* Resultats · panell sota la barra de cerca */
.pdf-search-results {
  max-height: 40vh;
  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;
}
.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;
}
.pdf-spinner-ring {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pdf-spin 0.8s linear infinite;
}
@keyframes pdf-spin { to { transform: rotate(360deg); } }
.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;
}

/* ── Print: hoja imprimible básica ── */
@media print {
  body { background: white; color: black; overflow: visible; }
  .sidebar, .topbar, .pill-bar, .composer,
  .pv-doc-preview, .pv-chat-panel,
  .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: rgba(10,14,20,.08) transparent;
}
.inf-sidebar::-webkit-scrollbar { width: 4px; }
.inf-sidebar::-webkit-scrollbar-thumb { background: rgba(10,14,20,.10); 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: rgba(10,14,20,.10) transparent;
}
.inf-form-scroll::-webkit-scrollbar { width: 5px; }
.inf-form-scroll::-webkit-scrollbar-thumb { background: rgba(10,14,20,.12); 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(31,61,46,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(31, 61, 46, 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(31, 61, 46, 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(31, 61, 46, 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) */
#sidebar-projectes-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 0 8px; }
.pj-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-size: var(--text-sm); color: var(--text-2); 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; }

/* 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 */
.pjd-layout { display: flex; height: 100%; min-height: 0; }
.pjd-side {
  width: 300px; flex-shrink: 0; border-right: 1px solid var(--border);
  padding: 20px 18px; overflow-y: auto; display: flex; flex-direction: column;
}
.pjd-back {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; padding: 0; margin-bottom: 14px;
}
.pjd-back:hover { color: var(--accent); }
.pjd-name { font-size: 18px; font-weight: 700; color: var(--text-1); margin: 0; }
.pjd-municipi { font-size: 12.5px; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.pjd-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 10px 0 0; }
.pjd-docs-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.pjd-dropzone {
  border: 1.5px dashed var(--border-2); border-radius: var(--r-sm); padding: 16px 12px;
  text-align: center; font-size: 12.5px; color: var(--text-3); margin-bottom: 12px;
  transition: border-color .15s, background .15s;
}
.pjd-dropzone.pjd-dragover { border-color: var(--accent); background: var(--accent-dim); }
.pjd-pick-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; }
.pjd-docs-list { display: flex; flex-direction: column; gap: 4px; }
.pjd-docs-empty { font-size: 12.5px; color: var(--text-3); padding: 4px 2px; }
.pjd-doc {
  display: flex; align-items: center; gap: 9px; padding: 8px 8px;
  border-radius: var(--r-sm); cursor: pointer; transition: background .15s;
}
.pjd-doc:hover { background: var(--accent-dim); }
.pjd-doc-uploading { opacity: .7; cursor: default; }
.pjd-doc-ico { font-size: 16px; color: var(--text-3); flex-shrink: 0; }
.pjd-doc-info { flex: 1; min-width: 0; }
.pjd-doc-nom { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjd-doc-mida { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.pjd-doc-badge { font-size: 8px; color: var(--text-3); }
.pjd-doc-badge.ok { color: var(--accent-glow); }
.pjd-doc-del {
  background: none; border: none; color: var(--text-3); font-size: 17px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .15s; flex-shrink: 0;
}
.pjd-doc:hover .pjd-doc-del { opacity: 1; }
.pjd-doc-del:hover { color: #c0392b; }

/* Detall: chat */
.pjd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pjd-chat-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  border-bottom: 1px solid var(--border); overflow-x: auto;
}
.pjd-chat-convs { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.pjd-conv {
  flex-shrink: 0; max-width: 160px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
  font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pjd-conv:hover { background: var(--accent-dim); }
.pjd-conv.active { background: var(--accent); color: var(--surface-white); border-color: var(--accent); }
.pjd-newconv {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-2);
  background: transparent; color: var(--text-2); font-size: 12.5px; cursor: pointer;
}
.pjd-newconv:hover { background: var(--accent-dim); color: var(--text-1); }
.pjd-chat-scroll { flex: 1; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.pjd-chat-empty { margin: auto; text-align: center; font-size: 14px; color: var(--text-3); max-width: 360px; }
.pjd-msg { max-width: 760px; width: 100%; }
.pjd-msg-user { align-self: flex-end; max-width: 560px; }
.pjd-msg-user .pjd-msg-body {
  background: var(--accent); color: var(--surface-white); padding: 10px 14px;
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md); font-size: 14px; line-height: 1.5;
}
.pjd-msg-bot .pjd-msg-body { font-size: 14.5px; line-height: 1.6; color: var(--text-1); }
.pjd-msg-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pjd-src {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 999px; background: var(--accent-dim); color: var(--accent);
  font-size: 11.5px; font-weight: 500;
}
.pjd-src i { font-size: 12px; }
.pjd-composer {
  display: flex; align-items: flex-end; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.pjd-input {
  flex: 1; resize: none; border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--text-1);
  background: var(--bg-1, #fff); line-height: 1.4; max-height: 160px;
}
.pjd-input:focus { outline: none; border-color: var(--accent); }
.pjd-send {
  width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--accent); color: var(--surface-white); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pjd-send:hover { background: var(--accent-hover); }
.pjd-send:disabled { opacity: .5; cursor: default; }

@media (max-width: 820px) {
  .pjd-layout { flex-direction: column; }
  .pjd-side { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── 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(31,61,46,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 i { color: var(--accent-glow); font-size: 16px; flex-shrink: 0; }
.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(31,61,46,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;
  }
  body.pdf-panel-open #app { width: 100vw; }
  .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;
  /* 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(31, 61, 46, 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);
  background: var(--accent);
  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: var(--accent-hover); }
.pdf-explicar-btn i { font-size: 15px; }
@keyframes explicarIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Popup d'explicació ───────────────────────────────────────────────────── */
.pdf-explicar-popup {
  position: fixed;
  z-index: 4001;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: rgba(var(--glass-rgb), 0.9);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  animation: explicarIn 130ms ease both;
}
.pdf-explicar-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.pdf-explicar-pop-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.pdf-explicar-pop-title i { font-size: 15px; }
.pdf-explicar-pop-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-hover), color var(--t-hover);
}
.pdf-explicar-pop-btn:hover { background: var(--bg-3); color: var(--text-1); }
.pdf-explicar-pop-body {
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-1);
  max-height: 320px;
  overflow-y: auto;
}
.pdf-explicar-pop-body strong { font-weight: 600; color: var(--accent); }

/* ── 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: border-color var(--t-hover), background var(--t-hover);
}
.cita-font-item .ti { font-size: 14px; color: var(--accent); flex-shrink: 0; }
.cita-font-item:hover { border-color: var(--accent-glow); background: rgba(var(--glass-rgb), 1); }
.cita-font-item.is-unavailable { opacity: 0.55; cursor: default; }
.cita-font-item.is-unavailable .ti { color: var(--text-3); }

/* 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ó: tipografia principal, verd fosc i negreta */
.chat-h {
  font-family: var(--font-sans, var(--font));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 16px 0 8px;
}
.chat-h:first-child { margin-top: 2px; }

/* Paràgrafs */
.chat-p { margin: 0 0 10px; line-height: 1.6; }
.chat-p:last-child { margin-bottom: 0; }

/* Llista sense pics (línies indentades, com a la referència) */
.chat-list {
  list-style: none;
  margin: 0 0 10px;
  padding-left: 18px;
}
.chat-list li {
  margin: 5px 0;
  line-height: 1.55;
}

/* 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 */
.chat-sep {
  border: none;
  border-top: 1px solid var(--border);
  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: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  vertical-align: super;
  user-select: none;
  transition: background var(--t-hover);
}
.cita-num:hover { background: rgba(31, 61, 46, 0.18); }
[data-theme="dark"] .cita-num:hover { background: rgba(107, 168, 138, 0.28); }

/* Número a la llista "Fuentes consultadas" */
.cita-font-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 5px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Fragment citat ressaltat al visor PDF (estil marcador) ───────────────── */
.textLayer span.cita-resaltada {
  background: rgba(255, 205, 60, 0.45);
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px rgba(255, 205, 60, 0.45);
}
[data-theme="dark"] .textLayer span.cita-resaltada {
  background: rgba(255, 205, 60, 0.32);
  box-shadow: 0 0 0 1.5px rgba(255, 205, 60, 0.32);
}

/* ════════════════════════════════════════════════════════════════════
   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; }
  /* Projecte detall: panell lateral més estret */
  .pjd-side { width: 250px; }
  /* 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; }

/* ═══ 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: 12px;
  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);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;   /* mateixa tipografia que «Recientes» */
  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) */

/* ═══ Streaming suau estil Claude: cursor parpellejant mentre redacta ═══ */
.message.streaming .dp-text::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.15em;
  border-radius: 1.5px;
  background: var(--text-2);
  animation: caretBlink 1s steps(2, start) infinite;
}

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* (Sense animació per paràgraf: en re-renderitzar cada frame es reiniciava
   i parpellejava. El streaming es manté suau amb el rAF + cursor.) */