/* Sobri. Un informe, no un tauler de control.
   El public --mantenidors, quimics, fabricants, associacions-- compra a partir
   de credibilitat i compara amb informes d'associacio i de l'INE. Targetes amb
   icones, gauges i degradats diuen «marqueting»; tipografia, taules i aire
   diuen «dada». (Criteri d'en Fable, 16/09, i hi estic d'acord.)

   ⚠️ I EL COLOR D'ACCENT ES UN FET, NO UN GUST: r132 g159 b167 es el color
   MITJA REAL de l'aigua de 1.263.651 piscines espanyoles, mesurat amb el
   LiDAR. Es un blau-gris que queda serios i es una frase que es pot dir. */
:root {
  --aigua: #849fa7;        /* el color mitja real de l'aigua */
  --aigua-fosc: #5d757d;
  --tinta: #1c2226;
  --lleu: #6b767c;
  --linia: #e0e4e6;
  --fons: #fff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fons); color: var(--tinta);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main, header, footer { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* --- capçalera --- */
header { border-bottom: 1px solid var(--linia); padding-top: 22px; }
.fila { display: flex; justify-content: space-between; align-items: baseline;
        flex-wrap: wrap; gap: 12px; }
h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.lleu { color: var(--lleu); font-weight: 400; }
/* El boto de treure el filtre. Discret: no competeix amb els desplegables,
   pero es a la mateixa fila perque es on es mira quan es vol desfer. */
.treu { font-size: 12.5px; color: var(--lleu); text-decoration: none;
        margin-left: 10px; border-bottom: 1px dotted var(--linia); }
.treu:hover { color: var(--tinta); border-color: var(--aigua); }
.ambit select {
  font: inherit; padding: 5px 8px; border: 1px solid var(--linia);
  border-radius: 5px; background: #fff; color: var(--tinta); margin-left: 6px;
}
.xifres { display: flex; gap: 40px; margin: 20px 0 18px; flex-wrap: wrap; }
.xifres b { display: block; font-size: 30px; font-weight: 600;
            font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.xifres span { color: var(--lleu); font-size: 13px; }
.pestanyes { display: flex; gap: 22px; }
.pestanyes a {
  color: var(--lleu); text-decoration: none; padding: 9px 0 11px;
  border-bottom: 2px solid transparent; font-size: 14px;
}
.pestanyes a.actiu { color: var(--tinta); border-color: var(--aigua); font-weight: 600; }

/* --- cos --- */
section { margin: 30px 0; }
.cap-bloc { display: flex; justify-content: space-between; align-items: center; }
.unitat { background: #f6f8f9; border-left: 3px solid var(--aigua);
          padding: 10px 14px; margin: 22px 0; font-size: 14px; }
.nota { font-size: 13.5px; color: var(--lleu); margin: 8px 0 14px; }
.titular { font-size: 22px; margin: 26px 0; line-height: 1.45; }
.titular b { font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.interruptor a {
  font-size: 13px; padding: 4px 11px; border: 1px solid var(--linia);
  color: var(--lleu); text-decoration: none;
}
.interruptor a:first-child { border-radius: 5px 0 0 5px; }
.interruptor a:last-child { border-radius: 0 5px 5px 0; border-left: 0; }
.interruptor a.actiu { background: var(--aigua); color: #fff; border-color: var(--aigua); }

/* --- taules: xifres tabulars, sense zebra, linies fines --- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: right; font-weight: 500; color: var(--lleu); font-size: 12.5px;
     padding: 7px 10px; border-bottom: 1px solid var(--linia); }
th:first-child { text-align: left; }
td { padding: 7px 10px; border-bottom: 1px solid #f1f4f5; }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
td.forta { font-weight: 600; }
td.nom a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linia); }
td.nom a:hover { border-color: var(--aigua); }
.petita td { font-size: 13px; padding: 4px 10px; border: 0; }
/* 🔴 «sense dada» i «no aplica» tenen tipografia propia i NO son un zero. */
.nd { color: #b6bfc4; }
.na { color: #c9d0d4; cursor: help; }
/* La fila del territori que s'esta mirant, a la taula index dels registres.
   ⚠️ Classe propia i no la `ok` de la cascada: aquella ja la fa servir una
   altra taula i canviar-la de significat li tocaria l'aspecte sense provar-ho. */
tr.triat td { background: #f6f8f9; }
tr.triat td.nom a { font-weight: 600; color: var(--tinta); }

/* ⚠️ AQUI HI HAVIA BARRES I N'HI HA DE NO HAVER-HI. Decisio de l'Ivan,
   16/09: «no vull grafiques per stats, vull taules». I te sentit per al
   public: un mantenidor compara xifres amb les seves, i una barra no es
   compara -- s'estima. Les taules porten el %, que es el que la barra
   insinuava, i a mes es pot copiar. */
.cascada tfoot td { border-top: 1px solid var(--linia); padding-top: 9px; }
table tfoot td { font-weight: 600; }
tr.lleu td.nom, tr.lleu td.n { color: var(--lleu); }
.producte { border-top: 1px solid var(--linia); padding-top: 14px; margin-top: 18px;
            font-size: 15px; line-height: 1.7; }
.producte b { font-weight: 600; }

details { border-bottom: 1px solid #f1f4f5; }
summary { display: flex; gap: 14px; align-items: baseline; padding: 9px 0;
          cursor: pointer; font-size: 14px; }
summary span:first-child { flex: 1; }
summary b { font-variant-numeric: tabular-nums; }

footer { display: flex; justify-content: space-between; color: var(--lleu);
         font-size: 12.5px; padding-top: 16px; padding-bottom: 30px;
         margin-top: 40px; border-top: 1px solid var(--linia); }
footer a { color: var(--lleu); }

/* --- login --- */
body.login { display: grid; place-items: center; min-height: 100vh; background: #f6f8f9; }
.caixa { background: #fff; padding: 34px; border-radius: 8px; width: 320px;
         border: 1px solid var(--linia); }
.caixa h1 { margin-bottom: 2px; }
.subtitol { color: var(--lleu); font-size: 13px; margin: 0 0 22px; }
.caixa label { display: block; font-size: 13px; color: var(--lleu); margin-bottom: 14px; }
.caixa input { display: block; width: 100%; font: inherit; padding: 8px 10px;
               margin-top: 5px; border: 1px solid var(--linia); border-radius: 5px; }
.caixa button { width: 100%; font: inherit; padding: 9px; border: 0; cursor: pointer;
                background: var(--aigua-fosc); color: #fff; border-radius: 5px; }
.error { background: #fdf2f0; color: #9d3b26; padding: 8px 10px; border-radius: 5px;
         font-size: 13px; margin-bottom: 16px; }

@media (max-width: 760px) {
  .xifres { gap: 22px; } .xifres b { font-size: 24px; }
  main, header, footer { padding: 0 14px; }

  /* 🔴 LES TAULES AMPLES HAN DE RODOLAR ELLES, NO LA PÀGINA.
     Fins al 17/09 no hi havia cap regla i una taula de sis o vuit columnes
     --la llista, l'origen dels vasos, el T15-- no cabia en 332 px: qui en
     tenia una a la pantalla arrossegava la PÀGINA SENCERA cap a la dreta i
     se li n'anaven el menú i el text. Amb això, només rodola la taula.

     ⚠️ `:has(thead)` tria justament les taules de DADES. Les de la fitxa que
     són etiqueta-i-valor no en tenen, i aquestes s'han de quedar com estan:
     fer-les rodolar no arreglaria res i els trencaria l'amplada.

     ⚠️ I un navegador que no entengui `:has()` ignora la regla i es queda
     com abans -- no es trenca res, simplement no millora. */
  table:has(thead) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ⚠️ Els 620 px de dalt son per a una pantalla d'escriptori. En un telefon
     de 660 px d'alcada utils ocuparien la pantalla sencera i no es veuria ni
     que hi ha res a sota. */
  #mapa, #escena3d { height: 380px; }
}

.interruptors { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* --- fitxa i llista --- */
.mostra { display: inline-block; width: 20px; height: 20px; border-radius: 4px;
          border: 1px solid var(--linia); vertical-align: middle; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 12px;
        background: #f1f4f5; color: var(--lleu); cursor: help; margin-left: 6px; }
.avis { color: #9d6b26; font-weight: 600; }
.vas { border-top: 1px solid var(--linia); padding-top: 4px; }
.vas table td { border: 0; padding: 6px 10px 6px 0; vertical-align: baseline; }
.vas td.nom, section table td.nom { width: 210px; color: var(--lleu); font-size: 13.5px; }
section table small { font-size: 12.5px; }
td.nom small { display: block; font-weight: 400; }

/* --- La taula dels registres sectorials, a la fitxa (17/09) ---------------
   ⚠️ Els `small` hi han de fer BLOC a totes les cel·les i no només a `.nom`:
   aquí n'hi ha a quatre columnes --l'adreça, qui el gestiona, la titularitat,
   els vasos coberts i els m²-- i en línia sortien enganxats al que tenien
   davant («2» + «2 desc.» + «1.135 m²» es llegia «22 desc.1.135 m²»).
   ⚠️ I les capçaleres a l'esquerra: aquí totes les columnes són text menys
   l'última, i la regla general les alinea a la dreta. */
.registres td small { display: block; font-weight: 400; }
.registres th { text-align: left; }
.registres th:last-child { text-align: right; }
.registres td { vertical-align: top; }
/* Les amplades: el nom del registre es repeteix a cada fila i ha de cabre en
   dues línies; el que hi consta és el que es llegeix i s'endú el gruix. */
.registres col.reg { width: 22%; }
.registres col.qui { width: 30%; }
.registres col.que { width: 19%; }
.registres col.com { width: 17%; }
.registres col.vas { width: 12%; }
/* ⚠️ Amb la columna interna són sis i les altres han de cedir espai. Sense
   aquest joc, les cinc de dalt sumarien 100 % més la sisena i el navegador
   ho repartiria com li semblés. */
.registres.amb-intern col.reg { width: 18%; }
.registres.amb-intern col.qui { width: 26%; }
.registres.amb-intern col.que { width: 16%; }
.registres.amb-intern col.com { width: 14%; }
.registres.amb-intern col.cnf { width: 16%; }
.registres.amb-intern col.vas { width: 10%; }

/* --- EL MODE INTERN (`PF_INTERN` a `dades.php`) ---------------------------
   🔴 VA MARCAT, I NO ES UN DETALL. Mentre estigui encès es veu diagnòstic
   nostre al costat de producte del client; si es veiés igual, algú se
   n'enduria una captura pensant-se que ho és. Fons tebi, vora puntejada i el
   codi en monoespai: es llegeix «això no hi ha de ser».
   ⚠️ `.registres td.intern` i no `.intern` a seques: `.petita td` posa
   `border: 0` i li guanyaria en especificitat. */
.registres td.intern, .registres th.intern { background: #fffaf3; }
.registres td.intern { border-left: 1px dashed #e7d7bc; }
.registres th.intern { color: #a07c3c; border-left: 1px dashed #e7d7bc; }
.registres td.intern small { display: block; font-size: 11px; color: #8d7b5e;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
/* El veredicte en cru. ⚠️ El color no ÉS la dada --la paraula hi és sencera--
   però deixa recórrer una taula de quaranta files amb la vista. */
.conf-alta { color: #2f7d4f; }
.conf-mitjana { color: #9d6b26; }
.conf-baixa { color: #b1442a; }
.nota-intern { font-size: 12.5px; color: #a07c3c; margin: 6px 0 0; }
code { font: 12.5px/1 ui-monospace, Consolas, monospace; background: #f6f8f9;
       padding: 2px 5px; border-radius: 3px; }
th a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--linia); }
th a:hover { border-color: var(--aigua); }
/* La columna per la qual s'ordena la llista. Quatre capçaleres clicables sense
   cap senyal de quina mana és una endevinalla. */
th.ord a { color: var(--tinta); font-weight: 600; border-bottom: 2px solid var(--aigua); }
/* ⚠️ La fletxa diu el SENTIT de debò: l'adreça va de la A a la Z i les tres
   columnes de xifres van de més a menys. Una fletxa que sempre apunta avall
   seria decorativa i mentiria en un cas de quatre. */
th.ord a::after { content: ' ↓'; color: var(--aigua); }
th.ord.amunt a::after { content: ' ↑'; }

.pestanyes .dreta { margin-left: auto; }

/* Els commutadors de la llista, sota els desplegables. */
.capa-llista { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; }

/* La barra de pagines. Discreta i centrada: es navegacio, no contingut. */
.pagines { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
           font-size: 13px; margin: 12px 0; color: var(--lleu); }
.pagines a { color: var(--lleu); text-decoration: none; padding: 2px 7px;
             border: 1px solid var(--linia); border-radius: 4px; }
.pagines a:hover { color: var(--tinta); border-color: var(--aigua); }
.pagines b { padding: 2px 7px; border: 1px solid var(--aigua);
             border-radius: 4px; background: var(--aigua); color: #fff; }
/* L'ultim element de la barra --«de 13.274 instal.lacions»-- a la dreta. */
.pagines span:last-child { margin-left: auto; }

/* L'enllac per baixar una taula. Discret i a sobre a la dreta: es una eina,
   no una crida a l'accio, i no ha de competir amb el titol del bloc. */
.baixa { margin: 0 0 -6px; text-align: right; line-height: 1; }
.baixa .csv { font-size: 12px; color: var(--lleu); text-decoration: none;
              border: 1px solid var(--linia); border-radius: 4px;
              padding: 3px 8px; display: inline-block; }
.baixa .csv:hover { color: var(--tinta); border-color: var(--aigua); }

/* --- el menú de dalt, un per a tota la vitrina --- */
.menu { display: flex; gap: 20px; align-items: baseline; }
.menu a, .menu .apagat { font-size: 14px; text-decoration: none; padding: 4px 0;
                         border-bottom: 2px solid transparent; }
.menu a { color: var(--lleu); }
.menu a:hover { color: var(--tinta); }
.menu a.actiu { color: var(--tinta); font-weight: 600; border-color: var(--aigua); }
/* ⚠️ Apagat i no amagat: un menú que ensenya on va diu que hi ha un pla. */
.menu .apagat { color: #c2cacf; cursor: default; }
.molla { font-size: 13px; color: var(--lleu); padding: 10px 0 14px; }
/* El boto de tornar d'on venies. Mes viu que la resta del rastre: es una
   acció, no una engruna de navegacio. */
.torna { color: var(--aigua-fosc) !important; font-weight: 600;
         text-decoration: none; }
.torna:hover { text-decoration: underline; }
.molla a { color: var(--lleu); }
.mostra.gran { width: 30px; height: 30px; }
.mostra.petita { width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; }
.cercador { display: flex; gap: 8px; margin: 26px 0; }
.cercador input { flex: 1; font: inherit; padding: 10px 13px;
                  border: 1px solid var(--linia); border-radius: 6px; }
.cercador button { font: inherit; padding: 10px 20px; border: 0; cursor: pointer;
                   background: var(--aigua-fosc); color: #fff; border-radius: 6px; }

/* 🔴 L'ORTOFOTO I EL 3D, LA MATEIXA CAIXA I GRAN.
   Fins al 17/09 `#escena3d` no tenia CAP regla d'alcada --l'unic dels quatre
   llencos del projecte sense-- i la mida real sortia d'un `|| 460` amagat dins
   d'`escena.js`. El diagrama quedava molt mes petit que l'ortofoto que te al
   costat, i es el que ha de lluir: es l'unica cosa d'aquesta pagina que no es
   pot anar a mirar a cap altre lloc.
   ⚠️ I EXACTAMENT LA MATEIXA per als dos: son dues vistes del mateix lloc al
   mateix forat, i si fossin de mides diferents tot el que hi ha a sota
   saltaria cada cop que es canvia de pestanya. */
#mapa, #escena3d { height: 620px; border: 1px solid var(--linia);
                   border-radius: 6px; margin: 6px 0 4px; }

#mapa3d { height: 460px; border: 1px solid var(--linia); border-radius: 6px;
          margin: 6px 0 4px; }
#tria-mapa a { cursor: pointer; }

.fonts { margin: 34px 0; border-top: 1px solid var(--linia); padding-top: 12px; }
.fonts summary { font-size: 14px; color: var(--lleu); cursor: pointer; padding: 6px 0; }
.fonts h3 { font-size: 13px; font-weight: 600; margin: 22px 0 6px; color: var(--tinta); }
#mapa-shp { height: 380px; border: 1px solid var(--linia); border-radius: 6px; margin: 8px 0; }

/* El grafic de barres de la serie per any. ⚠️ No contradiu la regla de mes
   amunt: alla es parla de les ESTADISTIQUES, on l'Ivan va dir «no vull
   grafiques, vull taules» perque alla es compara amb xifres propies. Aqui es
   una serie de temps d'UNA parcel.la, i la forma de la serie es justament el
   que una taula d'onze files no deixa veure. Ho va demanar ell: «la serie
   temporal que vam parir, aqui un grafiquillo si molaria».

   🔴 `height: auto` I NO UNA ALCADA FIXA (17/09). Abans hi deia `120px`, i
   amb el `preserveAspectRatio="none"` que duia l'SVG el dibuix s'estirava 3,3
   vegades a l'ample i 1,02 a l'alt: el text sortia esbandit i les vores de les
   barres, tres cops mes gruixudes pels costats que per dalt. Ara el viewBox ja
   neix ample (760 x 246), l'SVG escala IGUAL en els dos eixos i aquesta regla
   nomes ha de deixar-lo fer. */
.barres { width: 100%; height: auto; display: block; margin: 6px 0 2px; }

/* Els identificadors del rastre de dalt. Discrets, pero a ma i seleccionables:
   son per copiar-los i passar-los, no per llegir-los. */
/* ⚠️ Sense tocar `.molla`: aquesta classe la fan servir altres pagines i
   convertir-la en flex els canviaria la maquetacio sense provar-ho. Aixi
   l'identificador va darrere el rastre i, si no hi cap, baixa de linia sol. */
.ident { font-size: 12px; color: var(--lleu); margin-left: 10px; }
/* `user-select: all` : un clic selecciona el numero sencer. Es per copiar-lo. */
.ident code { font-size: 11.5px; padding: 1px 5px; margin: 0 1px; user-select: all; }

/* L'avis de «aquests vasos son de N immobles», enganxat a les xifres de dalt.
   🔴 Discret pero no invisible: el que diu es que les quatre xifres de sobre
   NO son d'un sol client, i qui les llegeixi ho ha de saber abans, no despres. */
.avis-imm { border-left: 3px solid #d8b26a; background: #fffaf2;
            padding: 9px 12px; margin: -6px 0 18px; border-radius: 0 5px 5px 0; }

/* Les ALTRES instal.lacions de la parcel.la, a la fitxa. ⚠️ En bloc i amb
   `flex-wrap`: a una urbanitzacio poden ser seixanta i en linia farien una
   paret de text que ningu no llegiria. Cada una es un boto petit perque el
   que s'hi fa es SALTAR-HI, no llegir-les. */
.unitats-llista { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.unitats-llista a { display: inline-block; padding: 2px 8px; font-size: 12.5px;
                    background: #fff; border: 1px solid #e3d5b8; border-radius: 4px;
                    text-decoration: none; }
.unitats-llista a:hover { background: #f4ead6; }
/* ⚠️ I un sostre visible: amb 337 unitats la nota es menjaria la pagina.
   Es fa amb `max-height` i no tallant la llista al PHP perque aixi el
   navegador segueix podent-hi buscar amb Ctrl+F. */
@media (max-width: 760px) { .unitats-llista { max-height: 9em; overflow-y: auto; } }

/* El «N immobles» sota el recompte de vasos a la llista. ⚠️ Ha de fer BLOC:
   en linia quedava enganxat al numero i es llegia «337334 immobles». La regla
   general nomes ho fa a `td.nom`, i aquest es un `td.n`.
   ⚠️ I ACOTADA a la taula de la llista (`.instal`) i no global: `td.n small`
   a seques tocaria qualsevol taula de la vitrina que algu faci d'ara endavant,
   i aquest es el tipus de regla que despres ningu no sap d'on surt. */
.instal td.n small { display: block; font-weight: 400; font-size: 11.5px; }