/* ============================================================
   CYVIX — DESIGN TOKENS  (Liquid Glass · iOS / visionOS)
   ============================================================ */

/* ── Tipografía ──
   La letra del sistema en todas partes (decisión de marca): SF Pro en Mac
   (-apple-system / BlinkMacSystemFont es como se pide) y Segoe UI en
   Windows. Si no hay ninguna de las dos, Helvetica o Arial. No se carga
   ninguna fuente de fuera: tamaños, grosores y espaciados no cambian. */

:root {
  /* ── TYPOGRAPHY ──
     Una sola familia para todo (decisión de marca): SF Pro en Mac, Segoe UI en Windows.
     El logo y los datos se diferencian por peso/tracking, no por familia. */
  --font:         -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-sans:    var(--font);
  --font-mono:    var(--font);

  /* ── BASE COLORS ── */
  /* gris cool estil Legora (fons web + pop-up de consulta) */
  /* El gris sutil que llevaba el chat partido (tinta al 1.6% sobre blanco):
     ahora es el fondo de TODA la página, y el chat se funde con él. */
  --bg:      #fbfbfb;
  --bg-warm: #f0e8e0;
  --bg-cool: #dce4ea;

  /* ── GLASS TINT ──
     Triplete RGB del cristal. En claro = blanco (cristal sobre fondo claro).
     En oscuro se reemplaza por un gris pizarra (cristal sobre fondo oscuro),
     de modo que TODOS los rgba(var(--glass-rgb), x) se re-tintan a la vez
     sin tocar el modo claro. */
  --glass-rgb: 255, 255, 255;

  /* ── GLASS SURFACES ── */
  /* (--bg-2 / --bg-3 intentionally semi-transparent for glass layering) */
  --bg-2: rgba(var(--glass-rgb), 0.62);   /* panels, cards — glass strong  */
  --bg-3: rgba(var(--glass-rgb), 0.38);   /* inputs, hover, inset — glass soft */
  /* Equivalente OPACO del gris de chip rgba(10,14,20,.05) compuesto sobre
     blanco. Para piezas flotantes que no deben dejar ver lo que hay detrás. */
  /* Avatares: tonos apagados de la misma luminosidad, para que un grupo de
     usuarios se distinga sin que ninguno grite. El primero es el verde. */
  --avatar-1: #2d6a4f;
  --avatar-2: #3f5a7d;
  --avatar-3: #8a5a44;
  --avatar-4: #6b5b8a;
  --avatar-5: #7a6a3f;

  /* Carpeta de proyecto: ámbar de carpeta física. Es color de OBJETO, no de
     estado — por eso no reutiliza el ámbar semántico de «en tramitación». */
  --folder: #f5a623;

  --chip-solid:       #f3f3f3;
  --chip-solid-hover: #ededed;
  --chip-solid-drag:  #e6e6e6;

  /* ── TEXT ── */
  --text-1: #0a0e14;
  --text-2: rgba(10, 14, 20, 0.62);
  --text-3: rgba(10, 14, 20, 0.42);
  --text-4: rgba(10, 14, 20, 0.18);
  /* Rótulos fijos del lateral («Proyectos recientes», «Destacados»…):
     un punto más flojo que --text-3 para que se note que no se pulsan */
  --text-rotul: rgba(10, 14, 20, 0.34);
  /* Entradas del lateral (menú, proyectos, chats, pie): un pelín más
     fuerte que --text-3 para que los rótulos fijos se noten más flojos */
  --text-menu: rgba(10, 14, 20, 0.54);
  /* Fondo del atajo de proyecto seleccionado (el gris del chip del PDF en
     Normativa) y el color del detalle dentro del icono relleno */
  --sel-fill: rgba(10, 14, 20, 0.05);   /* exactamente el del chip del PDF */
  --sel-det:  #f2f2f2;

  /* ── INK BORDERS (subtle dark, for dividers inside glass) ── */
  --border:   rgba(10, 14, 20, 0.08);
  --border-2: rgba(10, 14, 20, 0.14);
  --scroll:   rgba(10, 14, 20, 0.08);   /* pulgar de TODAS las barras de scroll */

  /* ── SURFACES (semantic whites) ──
     Tokens semánticos para diferenciar uso: futuro tint hacia sage no rompe nada. */
  --surface-white:    #ffffff;                       /* texto sobre fondos oscuros (botones primarios, badges) */
  --surface-card:     #ffffff;                       /* fondo sólido de tarjetas internas (home-panel) */
  --surface-cloud:    rgba(255, 255, 255, 0.72);     /* glass líquido de sidebar y main-area */
  --surface-cloud-2:  rgba(255, 255, 255, 0.55);     /* glass suave (componentes secundarios) */

  /* ── GLASS EDGES ── */
  --glass-bg:          rgba(255, 255, 255, 0.42);
  --glass-bg-strong:   rgba(255, 255, 255, 0.62);
  --glass-bg-soft:     rgba(255, 255, 255, 0.28);
  --glass-border:      rgba(255, 255, 255, 0.72);
  --glass-border-soft: rgba(255, 255, 255, 0.45);

  /* ── ACCENT (verde de marca) ── */
  --accent:       #2d6a4f;
  --accent-glow:  #3f926d;
  --accent-dim:   rgba(45, 106, 79, 0.08);
  --accent-hover: #3a885d;

  /* ── PRIMARY ACTION ── */
  --action:       #0a0e14;
  --action-hover: #2d6a4f;
  --action-text:  #ffffff;

  /* ── SEMANTIC ── */
  --amber:    #F97316;
  --amber-bg: rgba(249, 115, 22, 0.10);
  --green:    #22C55E;
  --green-bg: rgba(34, 197, 94, 0.10);
  --coral:    #E8501A;
  --coral-bg: rgba(232, 80, 26, 0.08);

  /* Prioridad de los avisos: barras baja/media/alta. Azul y amarillo
     CLAROS a propósito: los oscuros se confundían con el rojo. */
  --prio-baixa:   #60A5FA;
  --prio-mitjana: #FACC15;
  --prio-alta:    var(--coral);
  /* Bolita de aviso (lo nuevo por ver): rojo puro, no el coral de prioridad */
  --badge-alert:  #E5484D;
  /* EL azul de IURAX (el del doble check de «todo leído», el de WhatsApp):
     cada vez que algo va en azul, es este */
  --blau:         #34B7F1;
  --llegit-blau:  var(--blau);
  --web-blau:     var(--blau);

  /* El lila: la normativa indexada de Iurax (la base de datos). Se usa para
     distinguirla de lo que es del proyecto, que va en azul, y para marcar el
     texto de una cita —en el visor y en la ventanita de la referencia—. */
  --lila:         #8B5CF6;
  --lila-bg:      rgba(139, 92, 246, 0.14);

  /* ── STATUS BADGES ── */
  --status-published-bg:   rgba(34, 197, 94, 0.10);
  --status-published-text: #166534;
  --status-draft-bg:       rgba(249, 115, 22, 0.10);
  --status-draft-text:     #9A3412;

  /* ── SOIL BADGES ── */
  --badge-residential-bg:   rgba(30, 64, 175, 0.08);
  --badge-residential-text: #1E40AF;
  --badge-industrial-bg:    rgba(154, 52, 18, 0.08);
  --badge-industrial-text:  #9A3412;
  --badge-green-bg:         rgba(22, 101, 52, 0.08);
  --badge-green-text:       #166534;
  --badge-dotacional-bg:    rgba(91, 33, 182, 0.08);
  --badge-dotacional-text:  #5B21B6;
  --badge-special-bg:       rgba(133, 77, 14, 0.08);
  --badge-special-text:     #854D0E;

  /* ── SHADOWS ── */
  --shadow-sm:   0 1px 3px rgba(15, 25, 40, 0.06), 0 1px 2px rgba(15, 25, 40, 0.04);
  --shadow:      0 4px 16px rgba(15, 25, 40, 0.08), 0 2px 6px rgba(15, 25, 40, 0.04);
  --shadow-lg:   0 16px 48px rgba(15, 25, 40, 0.14);
  --shadow-glass:
    0 1px 1px rgba(255, 255, 255, 0.62) inset,
    0 -1px 1px rgba(0, 0, 0, 0.04) inset,
    0 8px 32px rgba(15, 25, 40, 0.08),
    0 2px 8px rgba(15, 25, 40, 0.04);
  --shadow-cta:
    0 2px 8px rgba(45, 106, 79, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
  --focus-ring: rgba(63, 146, 109, 0.18);

  /* ── LAYOUT ── */
  --sidebar-collapsed: 56px;
  --sidebar-expanded:  280px;
  --topbar-h:          56px;
  --topbar-height:     56px;
  --app-padding:       10px;

  /* ── SPACING ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px;  --sp-6: 24px;

  /* ── RADII ── */
  /* Escala rebajada un paso (~×0,83): esquinas más contenidas en toda la
     app manteniendo la proporción entre tamaños. La píldora no cambia. */
  --r-pill: 100px;
  --r-2xl:  24px;
  --r-xl:   18px;
  --r-lg:   14px;
  --r:      10px;
  --r-md:   10px;
  --r-sm:    8px;
  --r-xs:    5px;     /* iconos pequeños, chips, mini badges */

  /* ── TYPE SCALE ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  /* ── LETTER SPACING ── */
  --tracking-tight:  -0.025em;
  --tracking-normal: -0.010em;
  --tracking-wide:    0.050em;
  --tracking-caps:    0.100em;

  /* ── BREAKPOINTS (sólo para referencia, los media queries no aceptan var()) ──
     --bp-mobile: 480px;   ≤ móvil
     --bp-tablet: 720px;   ≤ tablet vertical
     --bp-medium: 900px;   ≤ portátil pequeño / tablet horizontal
     --bp-desktop: 1100px; ≤ desktop estándar
  */

  /* ── TRANSITIONS ── */
  --t-hover: 0.15s ease;
  --t-fast:  0.15s ease;
  --t:       0.20s ease;
  --t-panel: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --t-modal: 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  0.30s ease;

  /* ── BLUR TOKENS (performance-tuned) ── */
  --blur-xs:   blur(4px);
  --blur-sm:   blur(8px);
  --blur-md:   blur(12px);
  --blur-lg:   blur(16px);
  --blur-soft: blur(8px);

  /* ── FICHA DE PARCELA: UNA SOLA ESCALA DE GRISES ──
     Tres tintas y nada más en el panel «Usos», las de texto de la casa (así
     se lee igual que los demás desplegables, y en oscuro se invierten
     solas): ink para lo que se lee (títulos, valores, usos), ink-2 para lo
     que explica (avisos, cajas) e ink-3 para lo accesorio (etiquetas,
     artículos, subtítulos, contadores, «—»).
     Fondos: la caja explicativa y las pastillas («art.», «Clave») llevan
     el gris de relleno de la casa (--sel-fill), el mismo de los demás
     grises de la ficha; y la línea que separa los bloques. */
  --pf-ink:   var(--text-1);
  --pf-ink-2: var(--text-2);
  --pf-ink-3: var(--text-3);
  --pf-caixa: var(--sel-fill);
  --pf-linia: #E7E9EC;
  --pf-pill:  var(--sel-fill);
}

/* ============================================================
   DARK MODE
   ============================================================ */
/* Cambiar de tema no se anima: mientras se cambia (un par de fotogramas,
   window.__aplicarTema en index.html), ninguna transición. Si no, lo que
   tiene transiciones —sobre todo el borde y la sombra del rectángulo
   principal, que esperan 0,34 s por la vista partida— se quedaba un momento
   con los colores del otro tema: un parpadeo en el perímetro. */
html.canvi-tema *,
html.canvi-tema *::before,
html.canvi-tema *::after { transition: none !important; }

[data-theme="dark"] {
  color-scheme: dark;

  /* En oscuro, el «cristal» pasa a ser el gris de los rellenos: todos los
     rgba(var(--glass-rgb), 0.45–0.98) hardcodeados (composer, burbujas del
     chat, chips de vidrio) se vuelven este carbón. Los realces suaves y los
     bordes de abajo NO usan esta variable: van con un gris claro fijo para
     seguir levantando las superficies. */
  --glass-rgb: 35, 35, 35;

  /* El fondo fondo —lo que asoma detrás de la barra lateral y del
     rectángulo principal— y los rellenos: el «negro fondo». Era #1E1E1E, el
     negro de macOS; el 18-9-2026 sube a #232323 para que los rellenos se
     distingan del «negro panel» (#1B1B1B, barra lateral y central). */
  --bg:      #232323;
  --bg-warm: #242322;
  --bg-cool: #232324;
  /* Rellenos SÓLIDOS, la familia del recuadro del chat: nada de velos
     grises lechosos sobre el panel */
  --bg-2: #232323;
  --bg-3: #222222;
  --folder: #f0a938;

  --chip-solid:       #232323;
  --chip-solid-hover: #2c2c2c;
  --chip-solid-drag:  #343434;

  --text-1: #f2f2f4;
  --text-2: rgba(235, 235, 245, 0.62);
  --text-3: rgba(235, 235, 245, 0.40);
  --text-4: rgba(235, 235, 245, 0.18);
  --text-rotul: rgba(235, 235, 245, 0.32);
  --text-menu: rgba(235, 235, 245, 0.54);
  --sel-fill: rgba(235, 235, 245, 0.07);
  --sel-det:  #2b2b2b;

  --border:   rgba(190, 190, 197, 0.13);
  --border-2: rgba(190, 190, 197, 0.22);
  --scroll:   rgba(190, 190, 197, 0.14);   /* pulgar de TODAS las barras de scroll */

  --glass-bg:          #222222;
  --glass-bg-strong:   #232323;
  --glass-bg-soft:     #212121;
  --glass-border:      rgba(190, 190, 197, 0.14);
  --glass-border-soft: rgba(190, 190, 197, 0.09);

  /* Superficies semánticas (antes quedaban blancas en oscuro · causa del bug) */
  --surface-white:   #f2f2f4;                      /* texto/icono sobre fondos de acento */
  --surface-card:    #232323;                      /* tarjetas sólidas internas */
  --surface-cloud:   rgba(190, 190, 197, 0.06);    /* glass sidebar / main-area */
  --surface-cloud-2: rgba(190, 190, 197, 0.04);

  /* SIN VERDE EN OSCURO (18-9-2026): el verde de marca, aclarado para el
     fondo oscuro (#69bf90), quedaba feo. El acento pasa a blanco y gris:
     marcas, bordes y lo elegido en blanco; los fondos suaves, en gris. */
  --accent:       #f2f2f4;
  --accent-glow:  #c7c7cc;
  --accent-dim:   rgba(235, 235, 245, 0.10);
  --accent-hover: #ffffff;

  /* Los botones principales: en claro son negros con letra blanca; en
     oscuro, al revés (blancos con letra oscura), sin verde */
  --action:       #f2f2f4;
  --action-hover: #dcdce0;
  --action-text:  #1b1b1b;

  --focus-ring:   rgba(235, 235, 245, 0.28);
  /* Los verdes de «hecho» o «publicado», y el verde de la paleta de
     avatares, también en gris. Las etiquetas verdes (--badge-green-*) NO:
     son el tema «Normativa» de Avisos y el uso «suelo libre» de la ficha,
     que el usuario quiere en verde (igual que «vigente»). */
  --green:    #d1d1d6;
  --green-bg: rgba(235, 235, 245, 0.08);
  --status-published-bg:   rgba(235, 235, 245, 0.08);
  --status-published-text: #e5e5ea;
  --badge-green-bg:        rgba(105, 191, 144, 0.12);
  --badge-green-text:      #69bf90;
  --avatar-1: #636366;

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow:      0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glass:
    0 1px 1px rgba(190, 190, 197, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.22);

  /* La misma escala, invertida: las tintas y los rellenos ya vienen de
     --text-* y --sel-fill; solo la línea pasa a un gris sobre el carbón. */
  --pf-linia: #313438;
}


/* En oscuro, los dos rectángulos grandes (barra lateral y área principal)
   van en su propio gris —el de la referencia—, un punto por encima de los
   rellenos (#1c1d1f) que llevan tarjetas, chips y el composer. El Agente del
   proyecto también: iba sobre el fondo de la página (--bg, hoy #232323) y se veía
   de otro gris que el chat principal (14-9-2026). */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .main-area,
[data-theme="dark"] .main-area::before,   /* la capa que de verdad se ve */
[data-theme="dark"] .pdf-panel {
  background: #1b1b1b;
}
/* Lo que vive DENTRO de la barra lateral pinta el mismo #1b1b1b: los
   rótulos de grupo (Destacados/Recientes) y el pie usaban el color de
   tarjeta y salían como bandas más claras */
[data-theme="dark"] .conv-group-label,
[data-theme="dark"] .sidebar-footer {
  background: #1b1b1b;
}


/* Las pastillas de la cabecera («Privado», «Actualizado hace…», el
   municipio): en claro llevan un gris escrito a mano que en oscuro casi no
   cambiaba. En oscuro, el MISMO relleno que la barra de escribir del chat
   (.pill-bar), un punto más claro que el panel (18-9-2026). */
[data-theme="dark"] .hero-chip { background: rgba(var(--glass-rgb), 0.76); }

/* La tabla de Normativa (y la de Proyectos, que es la misma): en oscuro, el
   fondo de la tabla y su cabecera son el «negro panel», como lo demás, y el
   «negro fondo» queda SOLO para la pastilla del nombre de cada PDF, igual
   que en claro (tabla blanca, pastilla gris). Las carpetas siguen sin
   pastilla: lo dice su propia regla de styles.css, que va después. */
[data-theme="dark"] .norm-table,
[data-theme="dark"] .norm-thead { background: #1b1b1b; }
[data-theme="dark"] .norm-row .norm-col-doc { background: var(--surface-card); }
/* El «dónde buscar» del Agente: sobre el negro, el mismo azul pide un poco
   más de relleno para verse igual de puesto que en claro. */
/* La placa, del negro de dentro; el color lo pone el dibujo, como en claro */
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pjd-abast-wrap .pill-plus-btn,
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pjd-abast-wrap .pill-plus-btn.es-lila { background: var(--dk-in); }
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pjd-abast-wrap .pill-plus-btn:hover,
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pjd-abast-wrap .pill-plus-btn.es-lila:hover { background: var(--dk-hover); }
/* El paso del ratón por la fila: en claro oscurece un poco; en oscuro, aclara */
[data-theme="dark"] .norm-row:hover { background: rgba(235, 235, 245, 0.03); }

/* Los rellenos grises de selección: el filtro elegido de Normativa y los
   botones de relleno sin trazo («Novedades», «Compartir»). En claro llevan
   un velo gris escrito a mano que en oscuro casi no se veía; en oscuro, el
   «negro fondo»; al pasar el ratón, lo del bloque «LAS REGLAS DEL NEGRO». */
[data-theme="dark"] .config-seg-btn.is-actiu,
[data-theme="dark"] .norm-pill.is-active,
[data-theme="dark"] .pjd-compartir { background: var(--chip-solid); }

/* La barra de arriba de cada pantalla. Su raya de abajo y el relleno de
   sus botones de icono (≡ y el sol/luna) van con el «cristal»
   (--glass-rgb): en claro es blanco sobre el panel blanco y no se ve; en
   oscuro es el gris de los rellenos y salía una raya fina bajo la barra y
   un recuadro detrás del sol. En oscuro, igual que en claro: sin raya y
   solo el icono (18-9-2026). */
[data-theme="dark"] .topbar { border-bottom-color: transparent; }
[data-theme="dark"] .topbar .icon-btn,
[data-theme="dark"] .topbar .icon-btn:hover { background: transparent; border-color: transparent; }

/* Las respuestas del chat, SIN relleno: solo la letra sobre el panel */
[data-theme="dark"] .message.assistant .bubble {
  background: transparent;
  border-color: transparent;
}

/* ── El visor de documentos en oscuro ────────────────────────────────────
   Pestañas: en claro, la tira y la pestaña abierta se pintan con
   --surface-white, que en oscuro es un color de LETRA (#f2f2f4): la pestaña
   quedaba clara y el título, #f2f2f4 encima (1:1, 13-9-2026). La tira, la
   pestaña abierta y la barra del visor están en «LAS REGLAS DEL NEGRO», más
   abajo (18-9-2026). */

/* La consulta del documento: su vidrio gris claro va escrito a mano y no
   cambiaba con el tema, pero la letra sí (clara sobre claro, 1:1). En oscuro
   el vidrio es carbón, y más opaco que en claro: flota sobre la hoja BLANCA
   del PDF, y con el 0,72 de claro la respuesta se quedaba en 4,4:1. */
[data-theme="dark"] .pdf-assist {
  background: rgba(var(--glass-rgb), 0.9);
  border-color: var(--glass-border);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(190, 190, 197, 0.06);
}
[data-theme="dark"] .pdf-assist-msg.user { background: var(--sel-fill); }

/* Las etiquetas de la pestaña Avisos: los --badge-* son tintas para papel
   claro y en oscuro la letra se quedaba en 2,2:1 (14-9-2026). El mismo tono,
   en claro sobre un velo suyo; el de Normativa es el verde de acento. */
[data-theme="dark"] .ntf-tag.is-impacte   { background: rgba(251, 146, 60, 0.12);  color: #fb923c; }
[data-theme="dark"] .ntf-tag.is-normativa { background: rgba(105, 191, 144, 0.12); color: #69bf90; }
[data-theme="dark"] .ntf-tag.is-correu    { background: rgba(138, 180, 248, 0.12); color: #8ab4f8; }
[data-theme="dark"] .ntf-tag.is-docs      { background: rgba(182, 156, 246, 0.12); color: #b69cf6; }
[data-theme="dark"] .ntf-tag.is-xat       { background: rgba(224, 164, 88, 0.12);  color: #e0a458; }
[data-theme="dark"] .ntf-tag.is-mencio    { background: rgba(138, 180, 248, 0.12); color: #8ab4f8; }

/* Los prompts (pestaña Verificación). La tarjeta lleva su gris de claro
   escrito a mano (#f3f3f3) y no cambiaba con el tema, pero la letra sí: el
   nombre, «Ver» y los iconos de los tuyos quedaban claros sobre claro (1:1),
   y el «+» y las etiquetas, en cajas oscuras sobre la tarjeta clara
   (14-9-2026). En oscuro la tarjeta es un gris un punto por encima de la
   página, con el mismo salto que en claro (1,1:1), y el dibujo igual de
   discreto (1,7:1); el círculo del «+» y las etiquetas (--surface-card) se
   separan de ella lo mismo que en claro. «Usar prompt» se aclara al pasar el
   cursor: a negro, su letra oscura no se leía. */
[data-theme="dark"] .pjx-plant-card       { --pjx-card-fons: #262626; }
[data-theme="dark"] .pjx-plant-card:hover { --pjx-card-fons: #2d2d2d; }
[data-theme="dark"] .pjx-plant-ic         { color: #4a4a4c; }
[data-theme="dark"] .pjx-plant-usar:hover { background: #ffffff; }
/* El pop-up de un prompt: la caja, del gris de las tarjetas y con un filo
   (en oscuro la sombra no la despega del velo); el recuadro del prompt, un
   velo claro: el oscuro de claro aquí no se veía (1:1). */
[data-theme="dark"] .pjx-prompt-pop-caixa {
  background: #262626;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--glass-border);
}
[data-theme="dark"] .pjx-prompt-pop-text { background: rgba(235, 235, 245, 0.05); }
/* Crear un prompt: el panel, un velo claro sobre la página (el oscuro de
   claro desaparecía, 1:1), y dentro los campos del gris de la página, con el
   mismo salto que en claro. */
[data-theme="dark"] .pjx-prompt-nou { background: rgba(235, 235, 245, 0.035); }
[data-theme="dark"] .pjx-prompt-nou .pmt-input { background: #1b1b1b; }

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }

/* ── A11Y: focus visible ── */
/* Foco consistente para teclado: anillo verde difuso del accent.
   Solo aparece con teclado (no con click), gracias a :focus-visible. */
:where(button, a, [role="button"], [tabindex], input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── A11Y: reduced motion ──
   Si el usuario pidió menos movimiento, apagamos animaciones decorativas.
   Mantenemos transiciones esenciales muy cortas para que el feedback no desaparezca. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── UTILITIES ── */
.heading-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO · LAS REGLAS DEL NEGRO (18-9-2026)
   Un mismo criterio para toda la aplicación, el de las últimas pantallas:
     · «negro panel»  #1B1B1B  la barra lateral y el rectángulo central
     · «negro fondo»  #232323  lo que en claro es un RELLENO gris sobre el
       panel: tarjetas, pastillas, burbujas, botones grises, pop-ups
     · dentro de un relleno, el OTRO negro (#1B1B1B): lo que va dentro de
       una tarjeta, de un pop-up o de la barra del chat (el adjunto, los
       campos de un pop-up…), igual que en claro lo de dentro de un gris
       vuelve a ser blanco
     · pasar el ratón, y lo elegido de una lista o un menú: el gris del
       menú lateral de proyectos (--sel-fill)
   Muchos de estos rellenos llevaban en claro un velo oscuro escrito a mano
   (rgba(10,14,20,…)): sobre negro no se veía. Las placas blancas de los
   iconos (--surface-white) salían casi blancas. Los velos que oscurecen
   el fondo detrás de un pop-up se quedan como están: oscurecer funciona
   igual en los dos temas.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --dk-panel: #1b1b1b;          /* «negro panel» */
  --dk-fill:  var(--chip-solid);  /* «negro fondo», #232323 */
  --dk-in:    #1b1b1b;          /* el otro negro, dentro de un relleno */
  --dk-hover: var(--sel-fill);  /* el gris del menú lateral de proyectos */
}
/* Rellenos sobre el panel: el «negro fondo» */
[data-theme="dark"] nav.sidebar-nav-admin,
[data-theme="dark"] .config-btn-primary,
[data-theme="dark"] .config-btn-secondary,
[data-theme="dark"] .config-btn-primary:disabled,
[data-theme="dark"] .config-btn-primary.es-fet,
[data-theme="dark"] .chats-filtre.es-actiu,
[data-theme="dark"] .msg-editor-btn,
[data-theme="dark"] .msg-editor-btn:disabled,
[data-theme="dark"] .loading-sub,
[data-theme="dark"] .ntf-font,
[data-theme="dark"] .message.user .bubble,
[data-theme="dark"] .parcel-ref,
[data-theme="dark"] .parcel-row,
[data-theme="dark"] .parcel-sec-count,
[data-theme="dark"] .pjx-carp-pas,
[data-theme="dark"] .parcel-font-wms,
[data-theme="dark"] .parcel-patr-on,
[data-theme="dark"] .norm-pill-arrow,
[data-theme="dark"] .norm-side-btn.is-active,
[data-theme="dark"] .norm-cell-flag-icon,
[data-theme="dark"] .pjx-estat,
[data-theme="dark"] .pjx-ficha,
[data-theme="dark"] .pjx-norma,
[data-theme="dark"] .pjx-s,
[data-theme="dark"] .pjx-cite,
[data-theme="dark"] .pjx-btn,
[data-theme="dark"] .pjx-tbtn.is-on,
[data-theme="dark"] .pjx-sel .pjx-sel-btn,
[data-theme="dark"] .pjd-msg-user .pjd-msg-body,
[data-theme="dark"] .pjd-doc-pill,
[data-theme="dark"] .chat-note,
[data-theme="dark"] .memc-list,
[data-theme="dark"] .chat-adjunt-chip,
[data-theme="dark"] .acl-fet,
[data-theme="dark"] .bopb-badge-desc,
[data-theme="dark"] .bopb-badge-null,
[data-theme="dark"] .pj-acts-agent,
[data-theme="dark"] .pj-inv-ok,
[data-theme="dark"] .pj-chip,
[data-theme="dark"] .pj-accio-btn,
[data-theme="dark"] .pjx-col-load,
[data-theme="dark"] .pjx-tuto,
[data-theme="dark"] .pjx-plant-nova,
[data-theme="dark"] .vnc-card,
[data-theme="dark"] .pjd-hist-filtre.es-actiu,
[data-theme="dark"] .pjd-sugg-chip,
[data-theme="dark"] .avis-card,
[data-theme="dark"] .notif-filtre.es-actiu,
[data-theme="dark"] .chat-mail,
[data-theme="dark"] .chat-taula-wrap,
[data-theme="dark"] .home-col,
[data-theme="dark"] .pjx-docs-filtres .pjx-docs-filtre.es-actiu,
[data-theme="dark"] .pf-btn.es-gris,
[data-theme="dark"] .pf-acc.es-on,
[data-theme="dark"] .xeq-bombolla,
[data-theme="dark"] .xeq-fila.es-meu .xeq-bombolla,
[data-theme="dark"] .pjt-tapa,
[data-theme="dark"] .pf-bloc,
[data-theme="dark"] .pf-sec,
[data-theme="dark"] .pf-plegable,
[data-theme="dark"] .drop-glass-ico,
[data-theme="dark"] .pjx-mostra,
[data-theme="dark"] .pf-faq-barra,
[data-theme="dark"] .taula-btn { background: var(--dk-fill); }
/* La tarjeta de preguntas (la de «vincular normativa», que ahora usa también
   la ventana de aclaración del chat): el cuerpo y el botón claro van dentro
   de un relleno, así que llevan el otro negro */
[data-theme="dark"] .vnc-cos,
[data-theme="dark"] .vnc-b-fluix { background: var(--dk-in); }
[data-theme="dark"] .acl-opcio:focus-visible { background: var(--dk-hover); }
/* Dentro de un relleno (pop-ups, tarjetas, la barra del chat): el otro negro */
[data-theme="dark"] .priv-fitxa,
[data-theme="dark"] .priv-btn-cancel,
[data-theme="dark"] .composer-attach-chip button,
[data-theme="dark"] .norm-nov-rang.es-actiu,
[data-theme="dark"] .chat-adjunt-card,
[data-theme="dark"] .pjw-input,
[data-theme="dark"] .pjw-input:focus,
[data-theme="dark"] .pjw-muni-btn,
[data-theme="dark"] .pjw-map,
[data-theme="dark"] .pjw-kv,
[data-theme="dark"] .pjw-unidad,
[data-theme="dark"] .pjw-select,
[data-theme="dark"] .pjw-chip,
[data-theme="dark"] .pjw-prot,
[data-theme="dark"] .pjw-drop,
[data-theme="dark"] .pjw-doc-kind,
[data-theme="dark"] .pjw-conf,
[data-theme="dark"] .pjw-pend,
[data-theme="dark"] .pjw-btn-ghost,
[data-theme="dark"] .pjw-btn-primary,
[data-theme="dark"] .cita-pop-head,
[data-theme="dark"] .cita-pop-btn,
[data-theme="dark"] .addproj-doc,
[data-theme="dark"] .addproj-btn,
[data-theme="dark"] .addnorm-tots,
[data-theme="dark"] .avis-pop-avui,
[data-theme="dark"] .avis-pop-rebutjar,
[data-theme="dark"] .pdoc-opt,
[data-theme="dark"] .pdoc-cami,
[data-theme="dark"] .pdoc-analisi,
[data-theme="dark"] .pdoc-logo,
[data-theme="dark"] .pdoc-full-logo.es-buit,
[data-theme="dark"] .export-aviat,
[data-theme="dark"] .comp-pop-afegir,
[data-theme="dark"] .avis-pop-filtre.es-actiu,
[data-theme="dark"] .avis-estat,
[data-theme="dark"] .share-ico,
[data-theme="dark"] .share-cerca,
[data-theme="dark"] .share-pju-tot,
[data-theme="dark"] .pmt-filtre.es-on,
[data-theme="dark"] .pmt-peu-ok,
[data-theme="dark"] .pmt-input,
[data-theme="dark"] .pmt-input:focus,
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pmt-posat,
[data-theme="dark"] .pjd-docs-peu-btn.es-primari,
[data-theme="dark"] .pf-imm-dades .df,
[data-theme="dark"] .xeq-fila.es-meu .xeq-cita,
[data-theme="dark"] .xeq-resposta,
[data-theme="dark"] .pj-modal-input,
[data-theme="dark"] .proj-modal-close,
[data-theme="dark"] .proj-drop-zone,
[data-theme="dark"] .proj-input,
[data-theme="dark"] .proj-cancel-btn,
[data-theme="dark"] .pf-faq-a { background: var(--dk-in); }
/* Lo del aviso va dentro de su tarjeta */
[data-theme="dark"] .avis-card .ntf-tag { background: var(--dk-in) !important; }
/* Placas de icono: al revés que el relleno sobre el que van */
[data-theme="dark"] .chat-adjunt-chip-ico,
[data-theme="dark"] .pdf-dock-ico,
[data-theme="dark"] .pjx-norma-chip,
[data-theme="dark"] .pjd-doc-ico,
[data-theme="dark"] .pjx-ev::before { background-color: var(--dk-in); }
[data-theme="dark"] .chat-adjunt-card .chat-adjunt-ico,
[data-theme="dark"] .chat-adjunt-card .chat-adjunt-carpeta,
[data-theme="dark"] .cita-pop-ico,
[data-theme="dark"] .addproj-doc .ficon { background-color: var(--dk-fill); }
/* Lo elegido de una lista o un menú, como el apartado abierto del menú lateral */
[data-theme="dark"] .chats-row.is-selected,
[data-theme="dark"] .ntf-filtre-menu .pjx-sc.on,
[data-theme="dark"] .pjd-conv.active,
[data-theme="dark"] .pjx-sc.on,
[data-theme="dark"] .addproj-item.is-sel,
[data-theme="dark"] .pjd-doc.is-sel,
[data-theme="dark"] .tabs-tots-item.es-actiu,
[data-theme="dark"] #pjd-docs-panel-llista .pjd-doc-fila.es-triat,
[data-theme="dark"] .pjw-chip.is-on,
[data-theme="dark"] .pjw-select.es-obert,
[data-theme="dark"] .xeq-menu-it.es-tria,
[data-theme="dark"] .pdoc-opt.es-on { background: var(--dk-hover); }
/* Las filas de la lista de proyectos pintan su gris en un ::after */
[data-theme="dark"] #view-projectes .norm-row:hover::after,
[data-theme="dark"] #view-projectes .norm-row.es-menu::after,
[data-theme="dark"] #view-projectes .norm-row.es-invitacio::after,
[data-theme="dark"] .pjx-docs-thead .pjx-th:hover::after { background: var(--dk-hover); }
/* Pasar el ratón: el gris del menú lateral de proyectos, en todas partes */
[data-theme="dark"] .sidebar-toggle-in:hover,
[data-theme="dark"] .sidebar-nav-admin .sidebar-item:hover,
[data-theme="dark"] .sidebar-crear-item:hover,
[data-theme="dark"] .config-btn-secondary:hover,
[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .chats-row:hover,
[data-theme="dark"] .msg-editor-btn:hover,
[data-theme="dark"] .ntf-fila:hover,
[data-theme="dark"] .ntf-filtre-menu .pjx-sc:hover,
[data-theme="dark"] .auth-account:hover,
[data-theme="dark"] .conv-menu-item:hover,
[data-theme="dark"] .chats-head .chats-ghost-btn.is-danger:hover,
[data-theme="dark"] .mapa-panel-close:hover,
[data-theme="dark"] .mapa-search-option:hover,
[data-theme="dark"] .mapa-search-option.is-focused,
[data-theme="dark"] .priv-btn-cancel:hover,
[data-theme="dark"] .pjx-nav-carp:hover:not(:disabled),
[data-theme="dark"] .pjx-carp-pas:hover:not(:disabled),
[data-theme="dark"] .tria-carp-entra:hover,
[data-theme="dark"] .tria-carp-amunt:hover,
[data-theme="dark"] .tria-carp-fila:hover,
[data-theme="dark"] .pjx-miga-enrere:hover,
[data-theme="dark"] .parcel-btn-ghost:not(:disabled):hover,
[data-theme="dark"] .map-layer-btn:hover:not(.active),
[data-theme="dark"] .juris-item:hover,
[data-theme="dark"] .juris-item.is-selected:hover,
[data-theme="dark"] .composer-attach-chip button:hover,
[data-theme="dark"] .home-doc-item:hover,
[data-theme="dark"] .home-history-item:hover,
[data-theme="dark"] .norm-pill:hover,
[data-theme="dark"] .norm-pill.is-active:hover,
[data-theme="dark"] .norm-side-btn:hover,
[data-theme="dark"] .norm-side-btn.is-active:hover,
[data-theme="dark"] .norm-geo-item:hover,
[data-theme="dark"] .norm-nov-item:hover,
[data-theme="dark"] .norm-row:hover .norm-col-doc,
[data-theme="dark"] .esb-fila:hover,
[data-theme="dark"] .esb-fila.es-guardat:hover,
[data-theme="dark"] .pj-side-atall:hover,
[data-theme="dark"] .pjx-norma:hover,
[data-theme="dark"] .pjx-row:hover,
[data-theme="dark"] .pjx-cite:hover,
[data-theme="dark"] .pjx-cite.is-doc:hover,
[data-theme="dark"] .pjx-btn:hover,
[data-theme="dark"] .pjx-tbtn:hover,
[data-theme="dark"] .pjx-sel .pjx-sel-btn:hover,
[data-theme="dark"] .pjx-sel-opt:hover,
[data-theme="dark"] .pjd-conv:hover,
[data-theme="dark"] .pjd-newconv:hover,
[data-theme="dark"] .pjx-sc:hover,
[data-theme="dark"] .pjd-doc:hover,
[data-theme="dark"] .pjd-doc:hover .pjd-doc-pill,
[data-theme="dark"] .pjd-doc.is-sel:hover,
[data-theme="dark"] .pjd-compartir:hover,
[data-theme="dark"] .pj-acts-agent:hover,
[data-theme="dark"] .pj-row-menu-it:hover,
[data-theme="dark"] .pj-accio-btn:hover,
[data-theme="dark"] .pj-new-btn:hover,
[data-theme="dark"] .pjw-input:hover,
[data-theme="dark"] .pjw-muni-btn:hover,
[data-theme="dark"] .pjw-muni-item:hover,
[data-theme="dark"] .pjw-adreca-item:hover,
[data-theme="dark"] .pjw-select:hover,
[data-theme="dark"] .pjw-chip:hover,
[data-theme="dark"] .pjw-member:not(.es-admin):hover,
[data-theme="dark"] .pjw-btn-ghost:hover,
[data-theme="dark"] .pjw-drop.is-over,
[data-theme="dark"] .cita-pop-btn:hover,
[data-theme="dark"] .addproj-btn:hover:not(:disabled),
[data-theme="dark"] .addnorm-tots:hover,
[data-theme="dark"] .avis-pop-avui.es-actiu,
[data-theme="dark"] .avis-pop-rebutjar:hover,
[data-theme="dark"] .pjx-tuto:hover,
[data-theme="dark"] .pdoc-opt:hover,
[data-theme="dark"] .pdoc-cami:hover,
[data-theme="dark"] .pdoc-cami.es-sobre,
[data-theme="dark"] .pdoc-logo:hover,
[data-theme="dark"] .vnc-fl:hover,
[data-theme="dark"] .vnc-opt:hover,
[data-theme="dark"] .vnc-doc:hover,
[data-theme="dark"] .export-opt:hover:not(:disabled),
[data-theme="dark"] .pjd-rec:hover,
[data-theme="dark"] .comp-pop-afegir:hover,
[data-theme="dark"] .comp-pop-fila:hover,
[data-theme="dark"] .avis-pop-fila:hover,
[data-theme="dark"] .avis-pop-menu-it:hover,
[data-theme="dark"] .pjd-sugg-chip:hover,
[data-theme="dark"] .chat-taula tbody tr:hover,
[data-theme="dark"] .share-rol-opt:hover,
[data-theme="dark"] .share-fila.es-directa:hover,
[data-theme="dark"] .pmt-filtre:hover,
[data-theme="dark"] .pmt-fila:hover,
[data-theme="dark"] .pmt-fila:focus-visible,
[data-theme="dark"] .pmt-peu-btn:hover,
[data-theme="dark"] .pmt-input:hover,
[data-theme="dark"] .pjx-plant-nou:hover,
[data-theme="dark"] .pjx-docs-filtres .pjx-docs-filtre:hover,
[data-theme="dark"] .pjx-docs-filtres .pjx-docs-filtre.es-actiu:hover,
[data-theme="dark"] .pjd-docs-peu-btn.es-primari:disabled:hover,
[data-theme="dark"] .df-doc:hover,
[data-theme="dark"] .xeq-adj-it:hover,
[data-theme="dark"] .xeq-menu-it:hover,
[data-theme="dark"] .pf-imm-card:hover,
[data-theme="dark"] .pf-btn.es-gris:hover:not(:disabled),
[data-theme="dark"] .pjt:hover .pjt-tapa,
[data-theme="dark"] .pjt.es-menu .pjt-tapa,
[data-theme="dark"] .sidebar-sub-btn:hover,
[data-theme="dark"] .doc-viewer-close:hover,
[data-theme="dark"] .mapa-reobrir:hover,
[data-theme="dark"] .pjdel-btn-cancel:hover,
[data-theme="dark"] .pill-plus-btn:hover,
[data-theme="dark"] .pill-dropdown-item:hover,
[data-theme="dark"] .muni-filter-item:hover,
[data-theme="dark"] .mem-card-toggle:hover,
[data-theme="dark"] .mem-result-download.is-ghost:hover,
[data-theme="dark"] .muni-fila:hover,
[data-theme="dark"] .pdf-reobrir:hover,
[data-theme="dark"] .pdf-dock:hover,
[data-theme="dark"] .pdf-assist-iconbtn:hover,
[data-theme="dark"] .pdf-assist-mode-btn:hover,
[data-theme="dark"] .pdf-assist-mode-item:hover,
[data-theme="dark"] .pdf-summary-close:hover,
[data-theme="dark"] .pdf-search-fl:hover:not(:disabled),
[data-theme="dark"] .pdf-search-item:hover,
[data-theme="dark"] .pl-btn:hover,
[data-theme="dark"] .pdf-explicar-pop-btn:hover,
[data-theme="dark"] .chat-adjunts-pop-row:hover,
[data-theme="dark"] .chat-adjunt-chip:hover,
[data-theme="dark"] .proj-select-btn:hover,
[data-theme="dark"] .proj-cancel-btn:hover,
[data-theme="dark"] .proj-drop-zone:hover,
[data-theme="dark"] .proj-drop-zone.drag-over,
[data-theme="dark"] .pf-faq-opc:hover,
[data-theme="dark"] .pf-faq-opc.es-actiu { background: var(--dk-hover); }
/* Rayas, pistas de barras de progreso y maniquís: en claro, un velo oscuro;
   en oscuro, la raya clara de la casa */
[data-theme="dark"] .sidebar-thin-divider { background: var(--border); }
[data-theme="dark"] .inf-progress-bar-wrap,
[data-theme="dark"] .pdf-trad-barra,
[data-theme="dark"] .pdoc-full-linies span,
[data-theme="dark"] .pjx-mostra-linia { background: var(--border-2); }
[data-theme="dark"] .norm-row-child { background: rgba(235, 235, 245, 0.02); }
[data-theme="dark"] .chat-taula tbody tr:nth-child(even) { background: rgba(235, 235, 245, 0.025); }
/* Detalles sueltos */
[data-theme="dark"] .app-tooltip { background: #2c2c2c; box-shadow: 0 0 0 1px var(--border), var(--shadow); }
/* «Se necesita tu respuesta»: en oscuro la sombra no despega la tarjeta de la
   página (lleva el filo de las cajas que flotan), y el círculo del icono es un
   relleno dentro de otro */
[data-theme="dark"] .pjw-step-num { background: var(--border-2); }
[data-theme="dark"] .pjw-step.is-active .pjw-step-num { background: rgba(235, 235, 245, 0.32); }
[data-theme="dark"] .vnc-b-fort[disabled] { background: rgba(235, 235, 245, 0.14); }
[data-theme="dark"] .taula-btn { border-color: var(--border); color: var(--text-2); }
[data-theme="dark"] .hero-title em { color: var(--text-2); }
[data-theme="dark"] .bopb-badge-urb { color: #8ab4f8; }
[data-theme="dark"] .bopb-badge-tram { color: #e0a458; }
/* El pop-up antiguo de «vincular» llevaba sus grises de papel escritos a mano */
[data-theme="dark"] .proj-modal-close { color: var(--text-2); }
[data-theme="dark"] .proj-drop-zone { border-color: var(--border-2); }
[data-theme="dark"] .proj-drop-icon,
[data-theme="dark"] .proj-drop-or { color: var(--text-3); }
[data-theme="dark"] .proj-drop-text,
[data-theme="dark"] .proj-input,
[data-theme="dark"] .proj-cancel-btn { color: var(--text-1); }
[data-theme="dark"] .proj-label { color: var(--text-2); }
[data-theme="dark"] .proj-input,
[data-theme="dark"] .proj-cancel-btn { border-color: var(--border); }
[data-theme="dark"] .proj-vincular-confirm-btn { background: var(--text-1); color: var(--dk-panel); }
/* La ficha de parcela: el apartado es un relleno sobre el panel y la
   hoja blanca de dentro, el otro negro; el +/− blanco de la barra, igual */
[data-theme="dark"] #parcel-info .pf .pf-fulla,
[data-theme="dark"] #parcel-info .pf > .pf-sec > .pf-sec-cap .pf-sec-mes,
[data-theme="dark"] #parcel-info .pf > .pf-plegable > .pf-plegable-cap .pf-sec-mes { background: var(--dk-in); }
[data-theme="dark"] #parcel-info .pf .pf-plegable-cos > .pf-fulla { background: var(--dk-in); }
/* Los desplegables de dentro de «Usos»: en claro, blancos con borde sobre la
   hoja blanca; en oscuro, del negro de la hoja, con su borde */
[data-theme="dark"] #pf-lead .pf-norma-plegables .pf-plegable { background: var(--dk-in); }

/* Botones «blancos con sombra» que en claro van sobre un relleno: en oscuro
   el blanco y el gris serían el mismo #232323 y el botón desaparecía; van
   en el otro negro, como lo de dentro de cualquier relleno */
[data-theme="dark"] .pill-bar-left .juris-chip,
[data-theme="dark"] .composer .juris-chip,
/* La nota del croquis, en el OTRO negro: la hoja del bloque ya es el negro de
   fondo (#232323) y la nota, que es del mismo, desaparecía encima. */
[data-theme="dark"] .croquis-parcela .chat-note,
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pmt-btn,
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pjd-web-btn.is-on,
[data-theme="dark"] .xeq-pill-wrap .pill-bar #xeq-adj,
[data-theme="dark"] .pjt-mes,
[data-theme="dark"] .pjt-fixar,
[data-theme="dark"] .pdf-assist-input,
[data-theme="dark"] .pjx-mostra-caixa,
[data-theme="dark"] .config-theme-btn.active { background: var(--dk-in); }
[data-theme="dark"] .pill-bar-left .juris-chip:hover,
[data-theme="dark"] .composer .juris-chip:hover,
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pmt-btn:hover,
[data-theme="dark"] .pjd-pill-wrap .pill-bar .pjd-web-btn.is-on:hover,
[data-theme="dark"] .xeq-pill-wrap .pill-bar #xeq-adj:hover { background: var(--dk-hover); }
/* Los filtros de Chats: en claro, blancos con sombra sobre el panel blanco
   y el elegido gris; en oscuro, del negro del panel con su sombra y el
   elegido en el «negro fondo» */
[data-theme="dark"] .chats-filtre { background: var(--dk-panel); }

/* El visor de documentos: en claro, la tira de pestañas es un gris y la
   pestaña abierta y la barra son el blanco del panel. En oscuro, igual:
   la tira en el «negro fondo» y la abierta y la barra en el del panel. */
/* La ficha de parcela es un panel como el del visor: su blanco de claro
   (--surface-card) en oscuro es el «negro panel», no el de tarjeta */
[data-theme="dark"] .mapa-info-panel { background: var(--dk-panel); }
[data-theme="dark"] .pdf-tabs { background: var(--dk-fill); }
[data-theme="dark"] .pdf-tab.es-actiu,
[data-theme="dark"] .pdf-tab.es-actiu::before,
[data-theme="dark"] .pdf-tab.es-actiu::after,
[data-theme="dark"] .pdf-visor-topbar { background: var(--dk-panel); }
/* Campos y fichas que van dentro de un relleno (--bg-2/--bg-3 eran casi el
   mismo #232323 del relleno): el otro negro */
[data-theme="dark"] .pdf-search-input,
[data-theme="dark"] .pdf-assist-file-chip,
[data-theme="dark"] .pdf-assist-msg code,
[data-theme="dark"] .mem-input,
[data-theme="dark"] .mem-select,
[data-theme="dark"] .mem-textarea,
[data-theme="dark"] .mem-input:focus,
[data-theme="dark"] .mem-select:focus,
[data-theme="dark"] .mem-textarea:focus,
[data-theme="dark"] .mem-check,
[data-theme="dark"] .mem-result-download,
[data-theme="dark"] .mem-result-doc { background: var(--dk-in); }
/* Paneles grandes que en claro son el blanco del panel (--surface-card):
   en oscuro, el «negro panel», no el de tarjeta. Lo de dentro pasa a ser
   un relleno sobre el panel: el «negro fondo». */
[data-theme="dark"] .pjd-hist-panel,
[data-theme="dark"] .avis-panel,
[data-theme="dark"] .auth-panel,
[data-theme="dark"] .main-area.is-split:has(#view-projecte-detall.hidden) { background: var(--dk-panel); }
@media (max-width: 900px) {
  [data-theme="dark"] .main-area.is-split { background: var(--dk-panel); }
}
[data-theme="dark"] .auth-field input,
[data-theme="dark"] .auth-field input:focus,
[data-theme="dark"] .auth-account,
[data-theme="dark"] .auth-account-value,
[data-theme="dark"] .pjd-hist-cerca,
[data-theme="dark"] .avis-doc { background: var(--dk-fill); }
/* El campo del menú de columnas va dentro de su pop-up */
[data-theme="dark"] .pjx-col-inp { background: var(--dk-in); }

/* LOS ICONOS, SIN RECUADRO (18-9-2026)
   Un botón que es solo un icono no lleva gris detrás en oscuro: ni quieto,
   ni al pasar el ratón, ni encendido. Solo cambia el icono, de gris a
   blanco, como el sol de la barra de arriba. Se quedan con su círculo los
   botones que flotan encima de algo (bajar del chat, flechas de las tablas,
   reabrir el panel) y los de dentro de la barra del chat, que en claro
   también lo llevan. */
[data-theme="dark"] .sidebar-toggle-btn.sidebar-toggle-in,
[data-theme="dark"] .sidebar-toggle-btn.sidebar-toggle-in:hover,
[data-theme="dark"] .sidebar-toggle-in:hover,
[data-theme="dark"] .msg-action-btn:hover,
[data-theme="dark"] .pdf-visor-btn-icon,
[data-theme="dark"] .pdf-visor-btn-icon:hover,
[data-theme="dark"] .pdf-visor-btn-icon.is-on,
[data-theme="dark"] .pjx-tbtn.is-icon:hover,
[data-theme="dark"] .pjx-tbtn.is-icon.is-on,
[data-theme="dark"] .pjx-nav-carp,
[data-theme="dark"] .pjx-nav-carp:hover:not(:disabled),
[data-theme="dark"] .tria-carp-entra:hover,
[data-theme="dark"] .tria-carp-amunt:hover,
[data-theme="dark"] .vnc-fl:hover,
[data-theme="dark"] .pmt-filtre.pmt-filtre-estrella:hover,
[data-theme="dark"] .pmt-filtre.pmt-filtre-estrella.es-on,
[data-theme="dark"] .pdf-assist-iconbtn:hover,
[data-theme="dark"] .pdf-summary-close:hover,
[data-theme="dark"] .pdf-search-fl:hover:not(:disabled),
[data-theme="dark"] .pdf-search-ai-btn:hover,
[data-theme="dark"] #empty-plus-btn:hover,
[data-theme="dark"] #composer-plus-btn:hover,
[data-theme="dark"] .proj-modal-close,
[data-theme="dark"] .doc-viewer-close,
[data-theme="dark"] .doc-viewer-close:hover { background: transparent; border-color: transparent; }
/* Lo encendido se dice con el icono en blanco */
[data-theme="dark"] .pdf-visor-btn-icon.is-on,
[data-theme="dark"] .pjx-tbtn.is-icon.is-on { color: var(--text-1); }
/* Los que llevan filo lo conservan, claro para que se vea sobre negro */
[data-theme="dark"] .pjx-nav-carp,
[data-theme="dark"] .doc-viewer-close { border-color: var(--border); }
[data-theme="dark"] .pjx-nav-carp:hover:not(:disabled),
[data-theme="dark"] .pjx-tbtn.is-icon:hover,
[data-theme="dark"] .pjx-tbtn.is-icon.is-on { border-color: var(--border-2); }

/* Configuración: la pantalla entera es un panel (en claro, el blanco del
   rectángulo central), así que va en el «negro panel»; sus tarjetas, en el
   «negro fondo», y lo que se escribe dentro de una tarjeta o del diálogo de
   la contraseña, en el otro negro. Las rayas entre filas, claras: la oscura
   de claro sobre negro no se veía. */
[data-theme="dark"] .config-modal-overlay { background: var(--dk-panel); }
[data-theme="dark"] .config-fila + .config-fila { border-top-color: rgba(235, 235, 245, 0.06); }
[data-theme="dark"] .config-id-nom:not([readonly]):not(.config-id-nom-fix),
[data-theme="dark"] .config-fila-val input:not([readonly]):focus,
[data-theme="dark"] .config-select,
[data-theme="dark"] .config-camp > input,
[data-theme="dark"] .config-camp-caixa > input { background: var(--dk-in); }
/* El diálogo de la contraseña, con un filo: en oscuro la sombra no lo
   despega del velo */
[data-theme="dark"] .config-dlg { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--glass-border); }

/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO · SIN VERDE (18-9-2026)
   El acento y los botones principales ya son blanco y gris (arriba, en las
   variables). Aquí, lo que el cambio de variables no alcanza: lo que lleva
   el acento de FONDO con letra clara encima (pasa a letra oscura), los
   avatares sin foto, y los verdes escritos a mano (brillos, bordes,
   degradados y la selección de texto del visor).
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .pdf-download-btn,
[data-theme="dark"] .mem-generate-btn,
[data-theme="dark"] .inf-generate-btn,
[data-theme="dark"] .pj-modal-create,
[data-theme="dark"] .pl-btn-primary,
[data-theme="dark"] .pdf-explicar-btn,
[data-theme="dark"] .sa-submit-btn { color: var(--action-text); }
/* El interruptor encendido: la pista es blanca, la bola va oscura */
[data-theme="dark"] .export-switch.is-on::after { background: var(--dk-panel); }
/* Avatares y marcas sin foto: gris neutro, iniciales claras */
[data-theme="dark"] .hero-orb,
[data-theme="dark"] .user-avatar,
[data-theme="dark"] .topbar-avatar,
[data-theme="dark"] .brand-mark {
  background: linear-gradient(145deg, #7c7c82 0%, #5b5b60 100%);
  color: #f2f2f4;
}
[data-theme="dark"] .empty-avatar {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.16), transparent 52%),
    linear-gradient(145deg, #7c7c82 0%, #5b5b60 100%);
  color: #f2f2f4;
}
[data-theme="dark"] .brand-mark,
[data-theme="dark"] .hero-orb,
[data-theme="dark"] .empty-avatar { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .pju[data-c="4"] { background: #cfd8dc; }   /* el «verdecito», en gris azulado */
/* El foco de la barra del chat: anillo gris, no verde */
[data-theme="dark"] .pill-bar:focus-within {
  box-shadow:
    0 1px 1px rgba(var(--glass-rgb), 0.82) inset,
    0 0 0 3px rgba(235, 235, 245, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 6px 18px rgba(0, 0, 0, 0.25);
}
/* El filtro de municipio elegido y su insignia */
[data-theme="dark"] .muni-filter-btn.is-active,
[data-theme="dark"] .muni-filter-badge,
[data-theme="dark"] .inf-pill.is-active,
[data-theme="dark"] .inf-plantilla-badge,
[data-theme="dark"] .pl-btn-primary.is-active { border-color: var(--border-2); }
/* La cruz de quitar el municipio: sin relleno, de gris a blanco */
[data-theme="dark"] .muni-filter-clear { background: none; color: var(--text-2); }
[data-theme="dark"] .muni-filter-clear:hover { background: none; color: var(--text-1); }
/* Informes: sus anillos verdes */
[data-theme="dark"] .inf-form-hdr-icon { box-shadow: 0 0 0 1px var(--border); }
[data-theme="dark"] .inf-input:focus,
[data-theme="dark"] .inf-select:focus,
[data-theme="dark"] .inf-textarea:focus { box-shadow: 0 0 0 3px rgba(235, 235, 245, 0.10); }
[data-theme="dark"] .inf-generate-btn:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
/* Lo que iba en el verde de marca (--brand) escrito a mano */
[data-theme="dark"] .pjx-mostra-punt { background: var(--text-2); }
[data-theme="dark"] .taula-btn:hover:not(:disabled) { background: var(--action); border-color: var(--action); color: var(--action-text); }
[data-theme="dark"] .pill-bar.is-millorant::after,
[data-theme="dark"] .composer-pill.is-millorant::after,
[data-theme="dark"] form.is-millorant::after {
  background: linear-gradient(90deg, transparent 0%, transparent 28%,
    rgba(235, 235, 245, 0.7) 45%, rgba(235, 235, 245, 0.7) 55%, transparent 72%, transparent 100%);
  background-size: 220% 100%;
}
/* Selección de texto del visor de documentos */
[data-theme="dark"] .textLayer ::selection { background: rgba(138, 180, 248, 0.35); }
/* Pulgar arriba votado, «hecho» y los verdes de estado de la casa */
[data-theme="dark"] .msg-action-btn.voted-up,
[data-theme="dark"] .fb-card-pos .fb-card-value,
[data-theme="dark"] .sa-btn-ok { color: var(--text-1); }
[data-theme="dark"] .sa-btn-ok { border-color: var(--border-2); }
[data-theme="dark"] .sa-btn-ok:hover { background: var(--dk-hover); }
[data-theme="dark"] .badge-published::before,
[data-theme="dark"] .badge-comunicat::before { background: var(--text-2); }
[data-theme="dark"] .badge-comunicat { color: var(--text-1); }
[data-theme="dark"] .bopb-badge-norm,
[data-theme="dark"] .bopb-badge-ok { color: var(--text-1); }
/* Tipo de proyecto «edificio»: su verde de etiqueta, en gris (el verde
   queda solo para vigente, los temas de Avisos y los usos de la ficha) */
[data-theme="dark"] .pj-chip.es-edif .pj-chip-tipus { color: var(--text-2); }

/* LOS VERDES QUE SE QUEDAN (18-9-2026)
   Tres, porque dicen algo que el verde cuenta de un vistazo:
     · «vigente»: el punto de la tabla de Normativa, de Novedades, de la
       pastilla del visor y del detalle de un aviso, y la etiqueta del BOPB
     · el tema «Normativa» de Avisos (arriba, .ntf-tag.is-normativa)
     · el uso «suelo libre» de la ficha de parcela (--badge-green-*, y
       --pf-us-lli en styles.css)
   En el verde aclarado para oscuro, #69bf90. */
[data-theme="dark"] .norm-dot-vigent { background: #69bf90; }
[data-theme="dark"] .bopb-badge-vigent { background: rgba(105, 191, 144, 0.12); color: #69bf90; }