:root {
  --ce-teal: #0d7d74;
  --ce-teal-dark: #095e57;
  --ce-teal-soft: #e6f4f2;
  --ce-ink: #1a2b2a;
}

body {
  color: var(--ce-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
}

.text-teal { color: var(--ce-teal) !important; }
.bg-teal-subtle { background: var(--ce-teal-soft); }
.bg-light-teal { background: #f5faf9; }

.btn-teal {
  background: var(--ce-teal);
  border-color: var(--ce-teal);
  color: #fff;
}
.btn-teal:hover { background: var(--ce-teal-dark); border-color: var(--ce-teal-dark); color: #fff; }
.btn-outline-teal {
  color: var(--ce-teal);
  border-color: var(--ce-teal);
}
.btn-outline-teal:hover, .btn-check:checked + .btn-outline-teal {
  background: var(--ce-teal); color: #fff; border-color: var(--ce-teal);
}

/* Navbar */
.ce-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e7eeed;
}
.ce-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--ce-teal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ce-nav .nav-link { font-weight: 500; color: #40514f; }
.ce-nav .nav-link:hover { color: var(--ce-teal); }

/* Hero */
.ce-hero {
  padding: 4.5rem 0 3.5rem;
  background: radial-gradient(1200px 400px at 80% -10%, var(--ce-teal-soft), transparent 60%),
              linear-gradient(180deg, #ffffff, #f7fbfa);
}
.ce-badge-soft {
  background: var(--ce-teal-soft); color: var(--ce-teal-dark);
  font-weight: 600; padding: .5rem .85rem; border-radius: 999px;
}
.ce-hero-card {
  background: #fff; border: 1px solid #e7eeed; border-radius: 18px; padding: 1.5rem;
}
.ce-stat { font-size: 2.4rem; font-weight: 800; color: var(--ce-teal); line-height: 1; }
.ce-trust > div { color: #40514f; }
.ce-trust i { font-size: 1.5rem; color: var(--ce-teal); display: block; margin-bottom: .35rem; }
.ce-trust div div { font-size: .8rem; line-height: 1.15; }

/* Panel + pills */
.ce-panel { background: #fff; border: 1px solid #e7eeed; border-radius: 18px; padding: 1.75rem; }
.ce-pills .nav-link { color: #40514f; font-weight: 600; border-radius: 10px; }
.ce-pills .nav-link.active { background: var(--ce-teal); color: #fff; }

/* Results */
.ce-result {
  border: 1px solid #e7eeed; border-radius: 14px; padding: 1.1rem 1.25rem;
  background: #fff; transition: box-shadow .15s, transform .15s;
}
.ce-result:hover { box-shadow: 0 8px 24px rgba(13,125,116,.10); transform: translateY(-2px); }
.ce-result.best { border-color: var(--ce-teal); box-shadow: 0 8px 24px rgba(13,125,116,.14); }
.ce-rank {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; background: var(--ce-teal-soft); color: var(--ce-teal-dark);
}
.ce-result.best .ce-rank { background: var(--ce-teal); color: #fff; }
.ce-price { font-size: 1.5rem; font-weight: 800; color: var(--ce-ink); }
.ce-price small { font-size: .8rem; font-weight: 500; color: #6c7a78; }

/* Steps + features */
.ce-step { background: #fff; border: 1px solid #e7eeed; border-radius: 16px; padding: 1.5rem; height: 100%; }
.ce-step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ce-teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 1rem;
}
.ce-feature { text-align: center; padding: 1.25rem; }
.ce-feature i { font-size: 2rem; color: var(--ce-teal); }
.ce-feature h6 { margin-top: .75rem; font-weight: 700; }

/* Upload */
.ce-upload {
  border: 2px dashed #bcd8d4; border-radius: 14px; background: #fbfdfc;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.ce-upload:hover { border-color: var(--ce-teal); background: var(--ce-teal-soft); }
.ce-upload-ico { font-size: 2.2rem; color: var(--ce-teal); }

/* Footer */
.ce-footer { background: #0c211f; color: #cfe0dd; padding: 2rem 0; }
.ce-footer strong { color: #fff; }

/* Bootstrap tinge .text-muted e .link-secondary di grigio scuro, pensati per fondo
   chiaro: sul footer scuro il testo diventa quasi invisibile. */
.ce-footer .text-muted { color: #9fb8b4 !important; }
.ce-footer .link-secondary { color: #cfe0dd !important; }
.ce-footer .link-secondary:hover,
.ce-footer .link-secondary:focus { color: #fff !important; }
.ce-footer .border-top { border-color: rgba(207, 224, 221, .25) !important; }

@media (max-width: 576px) {
  .ce-hero { padding-top: 3rem; }
  .ce-stat { font-size: 2rem; }
}

/* ===================== Report consumi ===================== */
.ce-report { background: #fff; }
.ce-report-card {
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1rem 1.1rem;
  background: #fff;
}
.ce-report-card-tot {
  background: var(--ce-teal-soft);
  border-color: #bfe3de;
}
.ce-report-big { font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.ce-report-big small { font-size: .8rem; font-weight: 600; color: #64748b; margin-left: .15rem; }
.ce-report-block {
  border-top: 2px solid var(--ce-teal-soft);
  padding-top: 1.25rem;
}
.ce-chart-wrap {
  border: 1px solid #eef2f6;
  border-radius: .75rem;
  padding: .75rem;
  background: #fff;
  min-height: 240px;
}
.ce-report-table thead th { color: #64748b; font-weight: 600; border-bottom: 2px solid #e2e8f0; }
.ce-report-table tfoot td { border-top: 2px solid #e2e8f0; background: #f8fafc; }
.ce-indicatore {
  border: 1px solid #e2e8f0;
  border-radius: .6rem;
  padding: .65rem .8rem;
  background: #fff;
  height: 100%;
}
.ce-indicatore-val { font-weight: 700; font-size: 1.05rem; }
.ce-report-sintesi { background: var(--ce-teal-soft) !important; border-color: #bfe3de !important; }

/* ===================== Stampa / PDF ===================== */
@media print {
  .ce-nav, .ce-hero, #come-funziona, #differenza, #fonte, .ce-footer,
  .ce-pills, .ce-noprint, #reportUploadBox, #reportDivider, #reportTesto,
  #btnReport, #risultati, #modoManualeBox, #modoFileBox,
  #btnReportManuale, .ce-manual-block { display: none !important; }
  body { background: #fff !important; }
  .ce-panel, .ce-report { box-shadow: none !important; border: none !important; padding: 0 !important; }
  .ce-report-block { break-inside: avoid; }
  .ce-chart-wrap { break-inside: avoid; }
  a[href]:after { content: ""; }
  @page { margin: 1.2cm; }
}

/* ===================== Inserimento manuale ===================== */
.ce-manual-block {
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1rem 1.1rem;
  background: #fcfefe;
}
.ce-manual-table thead th {
  font-size: .8rem;
  font-weight: 600;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
}
.ce-manual-table td { padding: .3rem .35rem; }
.ce-manual-table input::placeholder { color: #cbd5e1; }

/* ---------- Consenso cookie ---------- */
.ce-cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1055;
  background: #fff;
  border-top: 3px solid var(--ce-teal);
  box-shadow: 0 -8px 30px rgba(26, 43, 42, 0.16);
  padding: 1.1rem 0;
  transform: translateY(110%);
  transition: transform .3s ease;
}
.ce-cookie-banner.visibile { transform: translateY(0); }
/* Rifiuto e accettazione devono avere lo stesso peso visivo:
   pulsanti di pari dimensione, come richiesto dalle linee guida del Garante. */
.ce-cookie-azioni .btn { min-width: 132px; font-weight: 500; }

@media (max-width: 575.98px) {
  .ce-cookie-azioni { width: 100%; }
  .ce-cookie-azioni .btn { flex: 1 1 100%; }
}

.ce-consenso-voce {
  border: 1px solid #e7eeed;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: .85rem;
  background: #fbfdfd;
}
.ce-consenso-voce .form-check-input:checked {
  background-color: var(--ce-teal);
  border-color: var(--ce-teal);
}

/* ---------- Pagine di contenuto (chi siamo, privacy, cookie) ---------- */
.ce-doc { max-width: 820px; }
.ce-doc h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 2.4rem;
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ce-teal-soft);
}
.ce-doc h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.6rem; margin-bottom: .6rem; }
.ce-doc p, .ce-doc li { color: #40514f; line-height: 1.7; }
.ce-doc table { font-size: .93rem; }
.ce-doc table th { background: var(--ce-teal-soft); font-weight: 600; }
.ce-doc .ce-callout {
  border-left: 4px solid var(--ce-teal);
  background: var(--ce-teal-soft);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.15rem;
  margin: 1.4rem 0;
}
.ce-doc .ce-callout p:last-child { margin-bottom: 0; }
.ce-doc-meta { font-size: .875rem; color: #6b7b79; }

/* Blocchi di codice della documentazione API/MCP: la riga non va mandata a capo,
   perché spezzare un comando curl o un JSON lo rende non copiabile. */
.ce-code {
  background: #0f2b28;
  color: #d7ece8;
  border-radius: 10px;
  padding: .95rem 1.1rem;
  font-size: .85rem;
  line-height: 1.55;
  overflow-x: auto;
  margin: 1rem 0 1.4rem;
}
.ce-code code { color: inherit; background: none; padding: 0; white-space: pre; }
.ce-doc :not(pre) > code {
  background: var(--ce-teal-soft);
  color: #0f6b60;
  padding: .12rem .38rem;
  border-radius: 5px;
  font-size: .875em;
}

/* Avviso privacy in prossimità dell'upload delle bollette */
.ce-avviso-privacy {
  border: 1px solid #ffe0a3;
  background: #fff9ec;
  border-radius: 10px;
  padding: .8rem 1rem;
  font-size: .875rem;
}