/* =============================================================================
   CV-UI.CSS — La "cornice" attorno al foglio del CV: barra di controllo,
   selettore di vista, gruppo di download e scheda di compatibilità ATS.

   Vale per /cv (versione recruiter) e /cv-ats (versione parser-first): la
   cornice è identica, cambia solo il documento sotto. Tutto qui dentro è
   .no-print — non finisce mai nel PDF.
   ========================================================================== */

:root {
  --cvui-bg:      #2c3138;          /* piano su cui "appoggia" il foglio */
  --cvui-bar:     #14181e;
  --cvui-bar-2:   #1c222b;
  --cvui-line:    #333b47;
  --cvui-fg:      #e8edf4;
  --cvui-mut:     #9aa8ba;
  --cvui-accent:  #2dd4bf;
  --cvui-accent-d:#04211d;
  --cvui-radius:  10px;
}

/* Fondo "anteprima documento": una sfumatura, non un grigio piatto, così il
   foglio bianco stacca invece di galleggiare. */
html {
  background:
    radial-gradient(1200px 600px at 50% -10%, #3a424c 0%, transparent 60%),
    var(--cvui-bg);
}

/* Skip-link: app.js lo inietta in ogni pagina, ma le pagine CV non caricano
   style.css, dove sta la regola che lo nasconde fuori schermo. Senza questa
   copia resterebbe visibile in alto a sinistra sopra al foglio. */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--cvui-accent); color: var(--cvui-accent-d); font-weight: 700;
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }
[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------------- BARRA */
.cvbar {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, var(--cvui-bar-2), var(--cvui-bar));
  border-bottom: 1px solid var(--cvui-line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.cvbar__in {
  max-width: 1020px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.cvbar__back {
  color: var(--cvui-mut); text-decoration: none; font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: color .18s ease;
}
.cvbar__back:hover { color: var(--cvui-fg); }

/* Selettore di vista: due stati, uno solo attivo. Il pulsante attivo è
   sollevato, non solo colorato — si legge anche in scala di grigi. */
.cvbar__seg {
  display: inline-flex; padding: 3px; gap: 3px;
  background: #0c1015; border: 1px solid var(--cvui-line); border-radius: var(--cvui-radius);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
.cvbar__segbtn {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 600;
  color: var(--cvui-mut); background: transparent; text-decoration: none;
  white-space: nowrap; transition: color .18s ease, background .18s ease;
}
.cvbar__segbtn:hover { color: var(--cvui-fg); }
.cvbar__segbtn.is-on {
  color: #fff;
  background: linear-gradient(180deg, #39424f, #2a323d);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 2px 6px rgba(0, 0, 0, .4);
}

.cvbar__spacer { flex: 1 1 auto; }

.cvbar__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cvbar__label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cvui-mut); margin-right: 2px;
}

.cvbar__btn {
  appearance: none; cursor: pointer; font: inherit;
  padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--cvui-fg); border: 1px solid var(--cvui-line);
  background: linear-gradient(180deg, #262d37, #1b212a);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
  white-space: nowrap;
}
.cvbar__btn:hover { border-color: #4a566a; background: linear-gradient(180deg, #2e3742, #222933); }
.cvbar__btn:active { transform: translateY(1px); }
.cvbar__btn:disabled { opacity: .65; cursor: default; transform: none; }
.cvbar__btn--primary {
  color: var(--cvui-accent-d); border-color: transparent;
  background: linear-gradient(180deg, #57e6d5, #22b8a6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 3px 10px rgba(45, 212, 191, .25);
}
.cvbar__btn--primary:hover { background: linear-gradient(180deg, #6bece0, #26c9b5); border-color: transparent; }
.cvbar__btn:focus-visible { outline: 2px solid var(--cvui-accent); outline-offset: 2px; }
.cvbar__segbtn:focus-visible { outline: 2px solid var(--cvui-accent); outline-offset: 2px; }

/* ------------------------------------------------------- SCHEDA COMPATIBILITÀ */
.ats-audit {
  max-width: 1020px; margin: 16px auto 0; padding: 0 18px;
}
.ats-audit__bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(180deg, #1c222b, #151a21);
  border: 1px solid var(--cvui-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.ats-audit__score {
  display: flex; align-items: baseline; gap: 2px;
  padding: 8px 14px; border-radius: 10px; min-width: 92px; justify-content: center;
  background: #0d1117; border: 1px solid var(--cvui-line);
}
.ats-audit__score strong { font-size: 26px; font-weight: 700; line-height: 1; }
.ats-audit__score span { font-size: 12px; color: var(--cvui-mut); }
.ats-audit__score--good strong { color: #34d399; }
.ats-audit__score--fair strong { color: #fbbf24; }
.ats-audit__score--poor strong { color: #f87171; }

.ats-audit__lede { flex: 1 1 220px; }
.ats-audit__lede h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--cvui-fg); }
.ats-audit__lede p  { margin: 2px 0 0; font-size: 12.5px; color: var(--cvui-mut); }

.ats-audit__toggle {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; color: var(--cvui-fg);
  border: 1px solid var(--cvui-line); background: #232b35;
  transition: border-color .18s ease, background .18s ease;
}
.ats-audit__toggle:hover { border-color: #4a566a; background: #2b3440; }
.ats-audit__toggle:focus-visible { outline: 2px solid var(--cvui-accent); outline-offset: 2px; }

.ats-audit__list {
  margin-top: 10px; padding: 6px; border-radius: 12px;
  background: #12161c; border: 1px solid var(--cvui-line);
  display: grid; gap: 2px;
}
/* Una `display` dichiarata nel foglio d'autore batte la regola [hidden] del
   browser, che sta nel foglio dello user agent: senza questa riga il pannello
   nascerebbe già aperto e l'attributo hidden non avrebbe alcun effetto. */
[hidden] { display: none !important; }
.ats-check {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 12px; border-radius: 8px;
}
.ats-check:hover { background: rgba(255, 255, 255, .03); }
.ats-check__dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
}
.ats-check--ok   .ats-check__dot { background: #34d399; }
.ats-check--warn .ats-check__dot { background: #fbbf24; }
.ats-check--fail .ats-check__dot { background: #f87171; }
.ats-check__label  { margin: 0; font-size: 13px; font-weight: 600; color: var(--cvui-fg); }
.ats-check__detail { margin: 2px 0 0; font-size: 12.5px; color: var(--cvui-mut); line-height: 1.45; }
.ats-check--ok .ats-check__label { color: var(--cvui-mut); font-weight: 500; }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 720px) {
  .cvbar__in { padding: 9px 12px; gap: 10px; }
  .cvbar__back { order: 1; }
  .cvbar__seg  { order: 2; }
  .cvbar__spacer { display: none; }
  .cvbar__acts { order: 3; width: 100%; justify-content: flex-start; }
  .cvbar__label { display: none; }
  .cvbar__btn { flex: 1 1 auto; text-align: center; justify-content: center; }
  .ats-audit { padding: 0 12px; }
  .ats-audit__score { min-width: 78px; padding: 6px 12px; }
  .ats-audit__score strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cvbar__btn, .cvbar__segbtn, .cvbar__back, .ats-audit__toggle { transition: none; }
  .cvbar__btn:active { transform: none; }
}

@media print {
  .cvbar, .ats-audit, .no-print { display: none !important; }
}