/* ── INUP Booking Scheda Audit · app.css ─────────────────────────────
   Stile coerente con il portale INUP e con il report PDF Booking.       */

/* Palette allineata alla shell del portale INUP (dashboard/portal.html) e al
   marchio nuovo: viola -> teal -> verde menta. Il tool gira dentro un iframe
   del portale, quindi i due devono essere lo stesso ambiente, non due
   applicazioni affiancate. I nomi delle variabili restano invariati perché il
   resto del foglio (e le altre UI della suite) li usa già. */
:root {
  --indaco:#433A86; --azzurro:#2E8FB8; --teal:#00DD8F; --arancio:#FF7300;
  --antracite:#1F1F20;
  --bg:#F1F0F6; --card:#fff; --border:#E7E5EF; --border-2:#D8D5E6;
  --text:#1F1F20; --muted:#57536A; --subtle:#8B8799;
  --ok:#00DD8F; --warn:#FF7300; --fail:#DC2626;
  --shadow-sm:0 1px 2px rgba(45,37,89,.05),0 2px 8px rgba(45,37,89,.04);
  --shadow:0 1px 2px rgba(45,37,89,.05),0 6px 20px rgba(45,37,89,.06);
  --shadow-lg:0 10px 40px rgba(45,37,89,.10);
  --r:12px; --r-sm:8px; --r-pill:100px;
  --grad:linear-gradient(108deg,#433A86 0%,#3A5C9C 40%,#2E8FB8 70%,#00DD8F 108%);
  --gline:linear-gradient(90deg,#433A86,#2E8FB8 55%,#00DD8F);
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; line-height:1.5;
}

/* ── header ─────────────────────────────────────────── */
.app-header {
  background:#fff; padding:0 2rem; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 4px rgba(45,37,89,.04);
}
/* Filetto a gradiente sotto la testata: è la firma della shell del portale e
   del report PDF, e lega il tool al resto della suite. */
.app-header::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--gline);
}
.header-left { display:flex; align-items:center; gap:1rem; }
.logo-link { display:flex; align-items:center; }
/* Il marchio nuovo è un lettering orizzontale con payoff: a 40px il payoff
   diventa illeggibile e il blocco sbilancia l'header. */
.logo { height:26px; display:block; }
.header-divider { width:1px; height:24px; background:var(--border); }
.header-title { font-size:.95rem; font-weight:700; letter-spacing:-.2px; color:var(--text); }
.header-sub { font-size:.73rem; color:var(--muted); margin-top:1px; }
.header-right { display:flex; align-items:center; gap:.6rem; }

/* ── layout containers ──────────────────────────────── */
.main-narrow { max-width:760px; margin:2.5rem auto; padding:0 1.5rem; }
.main-wide   { max-width:980px; margin:2rem auto;   padding:0 1.5rem; }

.page-eyebrow {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:.6rem;
}
.page-title { font-size:1.9rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.page-lead { color:var(--muted); margin-top:.7rem; font-size:.95rem; max-width:62ch; }

/* ── flash ──────────────────────────────────────────── */
.flash-wrap { max-width:760px; margin:1.2rem auto 0; padding:0 1.5rem; }
.flash {
  border-radius:var(--r-sm); padding:.7rem 1rem; font-size:.85rem; font-weight:500;
  margin-bottom:.5rem; border:1px solid;
}
.flash-error { background:#FEF2F2; color:#991B1B; border-color:#FECACA; }
.flash-success, .flash-message { background:#ECFDF5; color:#065F46; border-color:#A7F3D0; }

/* ── card ───────────────────────────────────────────── */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
}

/* ── form ───────────────────────────────────────────── */
.form-card { margin-top:1.6rem; padding:1.8rem; display:flex; flex-direction:column; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:.8rem; font-weight:600; color:var(--text); }
.field .req { color:var(--arancio); }
.field .opt { color:var(--subtle); font-weight:400; }
.field input, .field textarea {
  font-family:inherit; font-size:.9rem; color:var(--text);
  padding:.65rem .8rem; border:1px solid var(--border); border-radius:var(--r-sm);
  background:#fff; transition:border-color .15s, box-shadow .15s; resize:vertical;
}
.field input:focus, .field textarea:focus {
  outline:none; border-color:var(--azzurro);
  box-shadow:0 0 0 3px rgba(41,113,161,.12);
}
.field input::placeholder, .field textarea::placeholder { color:var(--subtle); }

.check-row {
  display:flex; align-items:center; gap:.6rem;
  font-size:.88rem; color:var(--text); cursor:pointer; user-select:none;
}
.check-row input { width:17px; height:17px; accent-color:var(--indaco); cursor:pointer; }

.form-hint {
  display:flex; align-items:center; gap:.45rem;
  font-size:.8rem; color:var(--muted); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:.6rem .8rem;
}
.form-hint svg { color:var(--azzurro); flex-shrink:0; }

/* ── buttons ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  border:none; border-radius:var(--r-pill); transition:opacity .15s, transform .1s, box-shadow .15s;
  white-space:nowrap;
}
.btn:active { transform:scale(.98); }
.btn-gradient {
  background:var(--grad); color:#fff;
  box-shadow:0 2px 10px rgba(68,56,136,.28);
}
.btn-gradient:hover { opacity:.9; }
.btn-ghost { background:#fff; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { background:#F9FAFB; border-color:#D1D5DB; }
.btn-sm { font-size:.8rem; padding:.45rem 1rem; }
.btn-lg { font-size:.95rem; padding:.8rem 1.6rem; }
.btn:disabled { opacity:.6; cursor:default; }

/* ── overlay / spinner ──────────────────────────────── */
.overlay {
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(17,24,39,.55); backdrop-filter:blur(3px);
}
.overlay.show { display:flex; }
.overlay-card {
  background:#fff; border-radius:var(--r); padding:2.2rem 2.6rem;
  text-align:center; box-shadow:var(--shadow-lg); max-width:340px;
}
.spinner-ring {
  width:46px; height:46px; margin:0 auto 1.1rem;
  border:4px solid #E4E7EC; border-top-color:var(--indaco);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.overlay-title { font-size:1.05rem; font-weight:700; }
.overlay-sub { font-size:.85rem; color:var(--muted); margin-top:.4rem; }

/* ── HERO / COVER ───────────────────────────────────── */
.hero {
  background:var(--grad); color:#fff; border-radius:var(--r);
  padding:2.4rem 2.4rem; display:flex; align-items:center; gap:2rem;
  justify-content:space-between; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero-left { flex:1; min-width:0; }
.hero-eyebrow {
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.6); text-transform:uppercase;
}
.hero-title { font-size:2.4rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-top:.6rem; }
.hero-period { font-size:.85rem; color:rgba(255,255,255,.75); margin-top:.6rem; }

.hero-right { display:flex; flex-direction:column; align-items:center; gap:.7rem; flex-shrink:0; }
.score-ring { position:relative; width:150px; height:150px; }
.score-ring-svg { width:150px; height:150px; }
.ring-track { fill:none; stroke:rgba(255,255,255,.18); stroke-width:11; }
.ring-fill  { fill:none; stroke:var(--arancio); stroke-width:11; stroke-linecap:round; }
.score-ring-inner {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.score-num { font-size:3rem; font-weight:800; line-height:1; letter-spacing:-.04em; }
.score-cap { font-size:.62rem; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.75); margin-top:.3rem; }
.hero-verdict {
  font-size:.85rem; font-weight:700; color:var(--arancio);
  background:rgba(255,255,255,.12); padding:.35rem .9rem; border-radius:var(--r-pill);
  text-align:center;
}

/* ── sections ───────────────────────────────────────── */
.section { margin-top:1.5rem; padding:1.8rem; }
.section-eyebrow {
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--azzurro); margin-bottom:.3rem;
}
.section-title { font-size:1.4rem; font-weight:800; letter-spacing:-.02em; }

/* ── horizontal bars ────────────────────────────────── */
.bars { margin-top:1.3rem; display:flex; flex-direction:column; gap:.7rem; }
.bar-row { display:grid; grid-template-columns:120px 1fr 42px; align-items:center; gap:.9rem; }
.bar-label { font-size:.85rem; font-weight:600; color:var(--text); }
.bar-track { height:9px; background:#EEF1F6; border-radius:var(--r-pill); position:relative; }
.bar-fill { height:100%; border-radius:var(--r-pill); position:relative; min-width:8px; transition:width .5s ease; }
.bar-dot {
  position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; background:#fff; border:3px solid; border-radius:50%;
}
.bar-val { font-size:1rem; font-weight:800; text-align:right; }

/* ── facts grid (dati estratti) ─────────────────────── */
.facts-grid {
  margin-top:.9rem; display:grid; grid-template-columns:repeat(6,1fr); gap:.8rem;
}
.fact {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:.9rem .7rem; text-align:center;
}
.fact-num { font-size:1.6rem; font-weight:800; color:var(--indaco); letter-spacing:-.03em; line-height:1.05; }
.fact-unit { font-size:.9rem; font-weight:700; color:var(--muted); }
.fact-lab { font-size:.7rem; font-weight:600; color:var(--muted); margin-top:.35rem; text-transform:uppercase; letter-spacing:.03em; }
.fact-sub { font-weight:500; text-transform:none; letter-spacing:0; }
.fact-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.tag {
  font-size:.78rem; font-weight:600; color:var(--azzurro);
  background:rgba(41,113,161,.10); padding:.35rem .8rem; border-radius:var(--r-pill);
}
.tag-orange { color:var(--arancio); background:rgba(255,115,0,.12); }

/* ── compset table ──────────────────────────────────── */
.compset-meta { font-size:.88rem; color:var(--muted); margin-top:.5rem; }
.compset-meta strong { color:var(--text); }
.table-wrap { margin-top:1.4rem; overflow-x:auto; border-radius:var(--r-sm); border:1px solid var(--border); }
.compset { width:100%; border-collapse:collapse; font-size:.875rem; }
.compset th, .compset td {
  padding:.75rem .85rem; text-align:center; border-bottom:1px solid var(--border);
}
.compset tbody tr:last-child td { border-bottom:none; }
.compset thead th {
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#6B7280; background:#F9FAFB; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.compset tbody tr:nth-child(even):not(.row-target) { background:#FAFAFA; }
.compset .th-name, .compset .td-name { text-align:left; min-width:160px; }
.td-name { font-weight:600; color:var(--text); }
.td-total {
  font-weight:800; font-size:1rem;
  border-left:1px solid var(--border); border-right:1px solid var(--border);
}
.td-rank { font-weight:700; color:var(--muted); font-size:.8rem; }
.row-target { background:rgba(68,56,136,.06) !important; }
.row-target .td-name { color:var(--indaco); }
.mini-badge {
  display:inline-block; margin-left:.45rem; font-size:.6rem; font-weight:800;
  letter-spacing:.05em; color:#fff; background:var(--indaco);
  padding:.15rem .45rem; border-radius:var(--r-pill); vertical-align:middle;
}
.mini-badge-muted { background:var(--muted); }

/* ── shots grid ─────────────────────────────────────── */
.shots-grid {
  margin-top:1.1rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem;
}
.shot-card { padding:1.1rem; display:flex; flex-direction:column; gap:.8rem; }
.shot-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.shot-name { font-size:.95rem; font-weight:700; color:var(--text); }
.shot-score {
  flex-shrink:0; color:#fff; font-weight:800; font-size:.9rem;
  min-width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.shot-imgwrap { display:block; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border); }
.shot-img { width:100%; display:block; }
.shot-placeholder {
  border:1px dashed var(--border); border-radius:var(--r-sm);
  padding:2.4rem 1rem; text-align:center; color:var(--subtle);
  font-size:.85rem; background:var(--bg);
}
.shot-error { font-size:.78rem; color:var(--fail); }

/* ── AI text ────────────────────────────────────────── */
.ai-text { margin-top:1.1rem; }
.ai-text p { font-size:.92rem; color:#374151; line-height:1.65; margin-bottom:.7rem; }
.ai-h { font-size:1.02rem; font-weight:800; color:var(--indaco); margin:1.2rem 0 .5rem; letter-spacing:-.01em; }
.ai-ul { list-style:none; margin-bottom:.4rem; }
.ai-ul li { position:relative; padding-left:1.1rem; font-size:.9rem; color:#374151; line-height:1.55; margin-bottom:.35rem; }
.ai-ul li::before {
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--teal);
}

/* ── AI priority table ───────────────────────────────── */
.ai-table { width:100%; border-collapse:collapse; margin:1rem 0 1.2rem; font-size:.85rem; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border); }
.ai-table th { background:var(--indaco); color:#fff; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; padding:.6rem .85rem; text-align:left; }
.ai-table td { padding:.6rem .85rem; border-bottom:1px solid var(--border); color:#374151; vertical-align:top; line-height:1.5; }
.ai-table tr:last-child td { border-bottom:none; }
.ai-table tbody tr:nth-child(even) { background:#F9FAFB; }
.ai-table td:first-child { font-weight:700; color:var(--indaco); width:2rem; text-align:center; }

.report-foot-actions { display:flex; gap:.8rem; margin:1.8rem 0 .5rem; }

/* ── footer ─────────────────────────────────────────── */
.page-footer {
  text-align:center; color:var(--subtle); font-size:.72rem; margin:2.4rem 0 2.4rem;
}

/* ── responsive ─────────────────────────────────────── */
@media (max-width:760px) {
  .hero { flex-direction:column; text-align:center; }
  .hero-eyebrow { letter-spacing:.1em; }
  .facts-grid { grid-template-columns:repeat(3,1fr); }
  .shots-grid { grid-template-columns:1fr; }
  .bar-row { grid-template-columns:96px 1fr 36px; gap:.6rem; }
}