/* ===== 📚 Calaix de coneixement (#/coneixement) ===== */
/* pestanyes: són botons (no enllaços), però s'han de veure com les .tab de les fitxes */
.con-tab { background: none; border: 0; border-bottom: 2.5px solid transparent; font-family: var(--font-body); cursor: pointer; color: var(--ink-soft); }
.con-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.con-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.con-nota { display: block; font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; max-width: 78ch; }
.con-intro { max-width: 80ch; margin: 0 0 16px; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.con-buit { border: 1px dashed var(--line); border-radius: 14px; line-height: 1.6; }
.con-avis-ia { color: #8a5d17; }
[data-theme="dark"] .con-avis-ia { color: var(--amber); }

/* pujada: caixa on arrossegar, categoria i botó */
.con-puja { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 20px; margin-bottom: 12px;
  border: 2px dashed var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.con-puja.con-sobre { border-color: var(--teal); background: var(--teal-soft); }
.con-puja-ico { font-size: 30px; line-height: 1; }
.con-puja-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.con-puja-acc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.con-puja-cat { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.con-puja-cat select, .con-eines select, .con-eines input[type="search"], .con-camp select, .con-camp textarea {
  min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--ink);
  font-family: var(--font-body); font-size: 13.5px; }
.con-puja-cat select:focus, .con-eines select:focus, .con-eines input:focus, .con-camp select:focus, .con-camp textarea:focus { outline: 2px solid var(--teal-soft); border-color: var(--teal); }
.con-puja .btn.primary { min-height: 38px; }

/* cua de pujada */
.con-cua { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.con-cua:empty { display: none; }
.con-cua-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font-size: 13px; }
.con-cua-item.error { border-color: var(--red); background: var(--red-soft); }
.con-cua-nom { flex: 1 1 200px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-cua-txt { color: var(--ink-soft); }
.con-cua-err { flex: 1 1 260px; color: var(--red); }
.con-barra { flex: 0 0 140px; height: 6px; border-radius: 999px; background: var(--soft-bg); overflow: hidden; }
.con-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--teal); transition: width .2s ease; }

/* cerca i filtres */
.con-eines { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
.con-eines input[type="search"] { flex: 1 1 260px; min-width: 0; }
.con-mode { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-soft); }
.con-mode code { font-size: 11.5px; }

/* targetes de document i de font de l'app */
.con-llista, .con-fonts { display: flex; flex-direction: column; gap: 10px; }
.con-doc, .con-fontapp { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); }
.con-doc.inactiu, .con-fontapp.inactiu { background: var(--soft-bg); }
.con-doc.inactiu .con-doc-tit h3, .con-fontapp.inactiu .con-doc-tit h3 { color: var(--ink-soft); }
.con-doc-cap { display: flex; align-items: flex-start; gap: 12px; }
.con-doc-ico { flex: 0 0 auto; font-size: 24px; line-height: 1.2; }
.con-doc-tit { flex: 1 1 auto; min-width: 0; }
.con-doc-tit h3 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.con-doc-meta { margin-top: 3px; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.con-estat { flex: 0 0 auto; }
.con-doc-desc { margin: 8px 0 0; font-size: 13px; color: var(--ink); line-height: 1.45; }
.con-doc-error { margin-top: 10px; padding: 9px 12px; border: 1px solid var(--red); border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: 13px; }
.con-doc-error .btn { margin-left: 6px; }
.con-doc-avis { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: #8a5d17; font-size: 12.5px; }
[data-theme="dark"] .con-doc-avis { color: var(--amber); }
.con-doc-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.con-doc-acc a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* interruptors: botons amb aria-pressed (res de caselles, que en fosc es veuen blanques) */
.con-usos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.con-usos-eti { font-size: 12px; color: var(--ink-soft); margin: 0 2px 0 6px; }
.con-us, .con-interr { min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.con-us:hover, .con-interr:hover { border-color: var(--teal); color: var(--teal); }
.con-us.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-dark); }
.con-interr.on { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.con-us:disabled, .con-interr:disabled { cursor: not-allowed; opacity: .7; }
.con-us:disabled:hover, .con-interr:disabled:hover { border-color: var(--line); color: var(--ink); }
.con-us.on:disabled:hover { border-color: var(--teal); color: var(--teal-dark); }
.con-interr.on:disabled:hover { border-color: var(--green); color: var(--green); }
.con-us:focus-visible, .con-interr:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.inactiu .con-us { opacity: .55; }
.con-mes { display: inline-block; }
.con-mes > summary { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; list-style: none; }
.con-mes > summary::-webkit-details-marker { display: none; }
.con-mes > summary::after { content: '▾'; margin-left: 5px; font-size: 10px; }
.con-mes[open] > summary::after { content: '▴'; }
.con-mes > summary:hover { color: var(--teal); }
.con-mes > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.con-mes-cos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* text extret */
.con-trossos { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow: auto; }
.con-tros { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.con-tros-cap { padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: var(--head-bg); }
.con-tros pre, .con-cru pre { margin: 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--ink); background: var(--panel); }

/* prova-ho */
.con-prova { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.con-camp { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.con-camp textarea { width: 100%; resize: vertical; min-height: 90px; line-height: 1.45; }
.con-prova-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.con-camp-ample { flex: 1 1 260px; }
.con-camp-ample select { width: 100%; }
.con-prova .btn.primary { min-height: 38px; }
.con-res-cap { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.con-res { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.con-res-font { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); }
.con-num { flex: 0 0 auto; font-weight: 700; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.con-res-cos { flex: 1 1 auto; min-width: 0; }
.con-res-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.con-pas { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--teal-soft); background: var(--soft-bg); border-radius: 0 10px 10px 0;
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.con-pas mark { background: var(--amber-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.con-cru { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.con-cru > summary { padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.con-cru pre { max-height: 50vh; overflow: auto; border-top: 1px solid var(--line); }

/* «📚 Fonts consultades» a la finestra de la proposta */
.con-consultades { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 12.5px; color: var(--ink); }
.con-consultades > summary { cursor: pointer; font-weight: 600; }
.con-consultades ul { margin: 8px 0 0; padding-left: 18px; }
.con-consultades li { margin: 3px 0; overflow-wrap: anywhere; }
.con-cons-cap { margin: 8px 0 0; font-weight: 600; color: var(--ink-soft); }

/* 💬 instruccions de la casa */
.con-pr-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10.5em; overflow: auto; padding: 8px 12px; border-radius: 10px; background: var(--soft-bg); }
.con-ins { margin-bottom: 12px; }
.con-pr-abast-xip { margin-top: 6px; }
.con-pr-abast-xip .chip { white-space: normal; overflow-wrap: anywhere; }
/* per a qui: general o uns clients (a l'editor) */
.con-pr-abast .con-usos { margin-top: 4px; }
.con-pr-clients { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.con-pr-clients input[type="search"] { min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--ink); font-family: var(--font-body); font-size: 13.5px; }
.con-pr-clients input[type="search"]:focus { outline: 2px solid var(--teal-soft); border-color: var(--teal); }
.con-pr-xips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; padding: 2px; }
.con-pr-clients[hidden] { display: none !important; }
.con-pr-mana { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.con-pr-mana-eti { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.con-pr-abast-xip { display: flex; flex-wrap: wrap; gap: 6px; }
/* usos que encara no fa servir cap funció de la IA */
.con-aviat { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--soft-bg); color: var(--ink-soft); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.con-puja[hidden], .con-cua[hidden], .con-doc[hidden], .con-res-font[hidden] { display: none !important; }

@media (max-width: 700px) {
  .con-puja { padding: 14px; gap: 10px; }
  .con-puja-ico { display: none; }
  .con-puja-acc { width: 100%; }
  .con-puja-cat { flex: 1 1 140px; }
  .con-puja-acc .btn.primary { flex: 1 1 140px; min-height: 44px; }
  .con-eines select { flex: 1 1 140px; }
  .con-doc, .con-fontapp { padding: 12px; }
  .con-doc-cap { flex-wrap: wrap; }
  .con-doc-tit { flex: 1 1 calc(100% - 44px); } /* el títol al costat de la icona; l'estat, a sota */
  .con-estat { order: 3; margin-left: 36px; }
  .con-usos-eti { flex-basis: 100%; margin: 4px 0 0; }
  .con-us, .con-interr, .con-mes > summary { min-height: 38px; }
  .con-barra { flex-basis: 100%; }
  .con-prova { padding: 12px; }
  .con-prova-fila > * { flex: 1 1 100%; }
  .con-prova .btn.primary { min-height: 44px; }
  .con-res-font { padding: 10px; }
}