/* theme.css — Capa de refresc estetic de CompleMetrix.
   S'inclou DESPRES del CSS existent de cada pagina i el millora sense reescriure'l:
   tipografia moderna, paleta blava mes fresca, botons amb profunditat i targetes
   d'article netes a la pagina de resultats. Tot additiu i reversible (treure el link). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---- Paleta i tokens (sobreescriuen les variables existents) ---- */
:root {
  --color-light: #e7edf7;                 /* fons amb una mica mes de contrast */
  --color-dark: #b9c6e0;
  --color-button: #2247bb;                /* blau mes intens i profund */
  --color-button-hover: #16307d;
  --color-button-active: #0f2258;
  --color-background-container: #ffffff;

  --cmx-accent: #2563eb;
  --cmx-border: #dde3ef;
  --cmx-text: #111827;                    /* text mes fosc, mes contrast */
  --cmx-muted: #566072;
  --cmx-radius: 12px;
  --cmx-shadow: 0 1px 3px rgba(20,30,60,.08), 0 1px 2px rgba(20,30,60,.05);
  --cmx-shadow-hover: 0 8px 22px rgba(20,30,60,.13);
  --cmx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---- Tipografia global (no toca les icones Font Awesome) ---- */
body, p, div, span, a, li, ul, ol, h1, h2, h3, h4, h5, h6,
button, input, select, textarea, label, td, th, blockquote {
  font-family: var(--cmx-font);
}
body {
  color: var(--cmx-text);
  font-size: 104%;                        /* text global una mica mes gran */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* ---- Botons (pagines de resultats i cerca) ---- */
.button, .button-square, .button-small, .button-big, .button-fit,
.button-full-width, .button-not {
  border-radius: 10px;
  font-weight: 500;
  font-size: 13px;
  box-shadow: var(--cmx-shadow);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
/* una mica mes d'amplada perque hi caben els titols mes llargs */
.button-big { width: 16.5em; }
.button:hover, .button-square:hover, .button-small:hover, .button-big:hover,
.button-fit:hover, .button-full-width:hover {
  transform: translateY(-1px);
  box-shadow: var(--cmx-shadow-hover);
}
.button:active, .button-big:active, .button-small:active { transform: translateY(0); }

/* Botons de la pagina d'inici (Parameters / Files / Collaboration) */
.button_search_option {
  border-radius: 10px !important;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.button_search_option:hover {
  transform: translateY(-2px);
  box-shadow: var(--cmx-shadow-hover);
}
.button_start {
  border-radius: 10px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.button_start:hover { transform: translateY(-2px); box-shadow: var(--cmx-shadow-hover); }

/* ---- Camps de formulari mes moderns ---- */
input[type="text"], select, textarea {
  border-radius: 8px;
  border: 1px solid var(--cmx-border);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="text"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cmx-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* ---- PAGINA DE RESULTATS: targetes d'article ---- */
p.paper {
  background: #ffffff;
  border: 1px solid #c4cee2;                 /* marc mes visible */
  border-left: 4px solid var(--color-button);/* accent que emmarca cada publicacio */
  border-radius: var(--cmx-radius);
  padding: 18px 22px;
  margin: 18px 0;
  box-shadow: 0 2px 8px rgba(20,30,60,.10), 0 1px 3px rgba(20,30,60,.07);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  line-height: 1.6;
  font-size: 15px;
}
p.paper:hover {
  box-shadow: var(--cmx-shadow-hover);
  border-color: #a9b7d6;
  transform: translateY(-1px);
}

/* Linia de separacio mes marcada entre publicacions */
#results_container hr {
  border: none;
  border-top: 2px solid #b7c3dc;
  margin: 20px 0;
}

/* Tota la targeta clicable cap al DOI */
p.paper[data-doi] { cursor: pointer; }
a.paper-link-a, a.paper-link-a:visited {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-button);
  text-decoration: none;
}
a.paper-link-a:hover { text-decoration: underline; }

/* Capçalera del resum de resultats */
.results-header {
  font-size: 16px;
  color: var(--cmx-text);
}

/* ---- Accordions (info de revista, panells) ---- */
.accordion {
  border-radius: 10px;
  transition: background-color .12s ease;
}

/* ---- Enllaços generals ---- */
a { transition: color .12s ease; }

/* ---- Linia del DOI sota el titol ---- */
.cmx-doi-line {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--cmx-muted);
}
.cmx-doi-line .doi-icon { vertical-align: -2px; margin-right: 6px; opacity: .85; }

/* ---- Pills de metriques ---- */
.cmx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmx-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.cmx-pill i { font-size: 11px; }
.cmx-pill-cite   { background: #eaf1fc; color: #1c4ea8; border-color: #d4e2f7; }
.cmx-pill-oa     { background: #e7f6ec; color: #1a7f3d; border-color: #c6ebd2; }
.cmx-pill-closed { background: #f1f2f4; color: #5f6673; border-color: #e2e5ea; }
.cmx-pill-fwci   { background: #f3eefc; color: #6b3fb5; border-color: #e4d8f6; }
.cmx-pill-q1     { background: #e7f6ec; color: #1a7f3d; border-color: #c6ebd2; }
.cmx-pill-q2     { background: #eaf1fc; color: #1c4ea8; border-color: #d4e2f7; }
.cmx-pill-q3     { background: #fdf3e4; color: #9a6212; border-color: #f6e2c2; }
.cmx-pill-q4     { background: #f1f2f4; color: #5f6673; border-color: #e2e5ea; }

/* ---- Badge de retractacio ---- */
.cmx-badge-retracted {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fdeaea; color: #b42318; border: 1px solid #f3c0bd;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 8px; margin-bottom: 10px;
}

/* ---- Capçalera fixa del logo ---- */
.results-header-panel { box-shadow: 0 1px 0 var(--cmx-border); }

/* ---- Spinner de carrega amb la paleta nova ---- */
.loader-text { color: var(--cmx-text); font-weight: 500; }
.spinner .dot1, .spinner .dot2 { background-color: var(--color-button) !important; }

/* ---- Estat buit (no results / massa resultats) ---- */
.cmx-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--cmx-muted);
}
.cmx-empty i { font-size: 40px; color: #b7c3dc; margin-bottom: 14px; }
.cmx-empty-title { font-size: 18px; font-weight: 600; color: var(--cmx-text); margin-bottom: 6px; }
.cmx-empty-text { font-size: 14px; max-width: 440px; margin: 0 auto; line-height: 1.5; }