/* nanoTippy.css — estructura + colors (substitueix tippy.min.css CDN) */
/* Els colors usen les variables de themes.css, s'adapten automàticament al mode fosc. */

[data-tippy-root] { max-width: calc(100vw - 10px); }

.tippy-box {
  position: relative;
  border-radius: 4px;
  font-size: .8rem;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  background-color: var(--color-fons-2, #fff);
  border-color: var(--color-border, #ddd);
  color: var(--color-text-2, #333);
}

.tippy-content {
  position: relative;
  padding: .25rem .5rem;
  z-index: 1;
  user-select: text;
  cursor: text;
}

.tippy-box .apartat { margin: 0; }

/* fletxa */
.tippy-arrow {
  width: 16px;
  height: 16px;
  color: var(--color-fons-2, #fff);
  position: absolute;
}
.tippy-arrow::before {
  content: '';
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

/* posició de la fletxa segons costat */
.tippy-box[data-placement^='top']    > .tippy-arrow { bottom: 0; }
.tippy-box[data-placement^='bottom'] > .tippy-arrow { top: 0; }
.tippy-box[data-placement^='left']   > .tippy-arrow { right: 0; }
.tippy-box[data-placement^='right']  > .tippy-arrow { left: 0; }

.tippy-box[data-placement^='top'] > .tippy-arrow::before {
  bottom: -7px;
  border-width: 8px 8px 0;
  border-top-color: currentColor;
  transform-origin: center top;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
  top: -7px;
  border-width: 0 8px 8px;
  border-bottom-color: currentColor;
  transform-origin: center bottom;
}
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
  right: -7px;
  border-width: 8px 0 8px 8px;
  border-left-color: currentColor;
  transform-origin: center left;
}
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: currentColor;
  transform-origin: center right;
}

/* tema 'dev': avisos / mode debug */
.tippy-box[data-theme~='dev'] {
  background-color: var(--color-perill);
  color: #fff;
}
.tippy-box[data-theme~='dev'] > .tippy-arrow { color: var(--color-perill); }

/* tema 'menuEsq': rail d'icones col·lapsat — sempre fosc (no depèn del tema de la pàgina) */
.tippy-box[data-theme~='menuEsq'] {
  background-color: #1a1a1a;
  color: #fff;
  font-size: .8em;
  font-weight: 600;
  white-space: nowrap;
  border-radius: .4rem;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .14), 0 1px 3px rgba(16, 24, 40, .08);
  pointer-events: none;
}
.tippy-box[data-theme~='menuEsq'] .tippy-content { padding: .35rem .6rem; }
.tippy-box[data-theme~='menuEsq'] > .tippy-arrow { color: #1a1a1a; }

/* tema 'darreresCom': previsualització d'emails — fons sempre clar (disseny HTML de l'email) */
.tippy-box[data-theme~='darreresCom'] {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(16, 24, 40, .18);
}
.tippy-box[data-theme~='darreresCom'] .tippy-content { padding: 10px; }
.tippy-box[data-theme~='darreresCom'] > .tippy-arrow { color: #fff; }

/* tema 'novetat': avís d'una millora nova sobre un element (js/lib/aplicatiu.js:initNovetats).
   Fons fosc + vora/glow en --color-avis (grogó, mai usat en botons/enllaços)
   perquè es distingeixi d'un tooltip normal i de qualsevol accent de marca. */
.tippy-box[data-theme~='novetat'] {
  background-color: var(--color-fosc-1, #1c1f21);
  color: #fff;
  border: 1px solid var(--color-avis);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3), 0 0 0 3px color-mix(in srgb, var(--color-avis) 30%, transparent);
  animation: novetatApareix .2s ease-out;
}
.tippy-box[data-theme~='novetat'] > .tippy-arrow { color: var(--color-fosc-1, #1c1f21); }
.tippy-box[data-theme~='novetat'] .tippy-content { padding: 0; }
@keyframes novetatApareix {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.novetat-contingut {
  position: relative;
  padding: .6rem 1.6rem .65rem .8rem;
}
.novetat-cap {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-avis);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}
.novetat-text { color: #fff; }
.novetat-tancar {
  position: absolute;
  top: .35rem;
  right: .35rem;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .75;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}
.novetat-tancar:hover { opacity: 1; }