/* ============================================================
   Portale attivazione Excel — stile Minalea Design System
   Sottoinsieme dei token ufficiali (colors_and_type.css v1.0),
   limitato a cio' che questo portale usa davvero.

   Font auto-ospitati (non Google Fonts): la Content-Security-Policy
   del portale consente risorse solo da 'self'.
   ============================================================ */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal;
  src: url("/static/fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal;
  src: url("/static/fonts/Poppins-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal;
  src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; }

:root {
  /* Brand — navy Minalea */
  --m-minalea-1000: #240D93;   /* primario / azione */
  --m-minalea-1300: #190967;   /* hover, piu' profondo */
  --m-minalea-200:  #D3CFE9;   /* riempimenti tenui, chip */
  --m-minalea-150:  #E9E7F4;   /* divisori */
  --m-minalea-100:  #F4F3FA;   /* sfondo pagina — mai bianco puro */
  --m-minalea-000:  #FFFFFF;

  /* Accento incandescence — riservato a UN elemento firma per schermo */
  --m-incandescence: linear-gradient(90deg, #FF0550 0%, #FF7D06 100%);
  --m-incandescence-solid: #FF0550;

  /* Testo */
  --m-text-1000: #020F29;   /* titoli */
  --m-text-700:  #4D576B;   /* corpo */
  --m-text-500:  #808795;
  --m-text-400:  #999FAA;   /* placeholder */
  --m-text-150:  #D9DBDF;
  --m-text-100:  #E6E7EA;

  /* Stati semantici */
  --m-success:    #067A3E;
  --m-success-bg: #E3F5EA;
  --m-danger:     #D6003C;
  --m-danger-bg:  #FDE7EC;
  --m-warning:    #B26A00;
  --m-warning-bg: #FFF4E0;

  /* Tipografia */
  --m-font-sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --m-h1-size: 32px; --m-h2-size: 24px; --m-h3-size: 20px;
  --m-body-size: 14px; --m-body-sm-size: 12px; --m-caption-size: 10px;

  /* Spaziature */
  --m-space-1: 4px;  --m-space-2: 8px;  --m-space-3: 12px; --m-space-4: 16px;
  --m-space-5: 20px; --m-space-6: 24px; --m-space-7: 32px; --m-space-8: 40px;

  /* Raggi */
  --m-radius-sm: 8px;    /* input, chip */
  --m-radius-md: 16px;   /* bottoni */
  --m-radius-card: 8px;  /* card */
  --m-radius-xl: 24px;   /* pannelli */
  --m-radius-pill: 999px;

  /* Ombre */
  --m-shadow-sm: 0 1px 3px 0 rgba(2,15,41,0.06);
  --m-shadow-md: 0 2px 8px 0 rgba(2,15,41,0.08);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--m-font-sans);
  font-size: var(--m-body-size);
  line-height: 1.5;
  color: var(--m-text-700);
  background: var(--m-minalea-100);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Intestazione con marchio ---------- */
.m-topbar {
  background: var(--m-minalea-000);
  border-bottom: 1px solid var(--m-minalea-150);
  padding: var(--m-space-4) var(--m-space-6);
}
.m-topbar-inner {
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--m-space-4);
}
.m-logo { height: 26px; width: auto; display: block; }
.m-topbar-app {
  font-size: var(--m-body-sm-size); font-weight: 500;
  color: var(--m-text-500); letter-spacing: 0.02em;
}

/* ---------- Contenitore ---------- */
main.m-shell { max-width: 560px; margin: var(--m-space-8) auto var(--m-space-8); padding: 0 var(--m-space-5); }

.m-card {
  background: var(--m-minalea-000);
  border: 1px solid var(--m-minalea-150);
  border-radius: var(--m-radius-xl);
  padding: var(--m-space-7);
  box-shadow: var(--m-shadow-sm);
}

/* Elemento firma: un solo filo incandescence per schermata */
.m-card--signature { position: relative; overflow: hidden; }
.m-card--signature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--m-incandescence);
}

/* ---------- Tipografia ---------- */
h1 { font-size: var(--m-h2-size); font-weight: 600; color: var(--m-text-1000);
     margin: 0 0 var(--m-space-2); letter-spacing: -0.01em; }
h2 { font-size: var(--m-h3-size); font-weight: 600; color: var(--m-text-1000); margin: 0 0 var(--m-space-2); }
p  { margin: 0 0 var(--m-space-4); }
.m-lead { color: var(--m-text-700); margin-bottom: var(--m-space-6); }
.m-caption { font-size: var(--m-body-sm-size); color: var(--m-text-500); }

/* ---------- Chip paese ---------- */
.m-chip {
  display: inline-flex; align-items: center; gap: var(--m-space-2);
  background: var(--m-minalea-200); color: var(--m-minalea-1000);
  font-size: var(--m-body-sm-size); font-weight: 500;
  padding: var(--m-space-1) var(--m-space-3);
  border-radius: var(--m-radius-pill);
  margin-bottom: var(--m-space-5);
}

/* ---------- Campi ---------- */
label.m-field { display: block; margin-bottom: var(--m-space-5); }
.m-label {
  display: block; font-size: var(--m-body-sm-size); font-weight: 500;
  color: var(--m-text-700); margin-bottom: var(--m-space-2);
}
input[type=email], input[type=file] {
  width: 100%; padding: var(--m-space-3) var(--m-space-4);
  font-family: var(--m-font-sans); font-size: var(--m-body-size);
  color: var(--m-text-1000);
  background: var(--m-minalea-000);
  border: 1px solid var(--m-text-150);
  border-radius: var(--m-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=email]::placeholder { color: var(--m-text-400); }
input[type=email]:focus, input[type=file]:focus {
  outline: none; border-color: var(--m-minalea-1000);
  box-shadow: 0 0 0 3px rgba(36,13,147,0.12);
}
input[type=file] { padding: var(--m-space-3); cursor: pointer; }

/* ---------- Bottoni ---------- */
.m-btn {
  display: block; width: 100%;
  padding: var(--m-space-3) var(--m-space-5);
  font-family: var(--m-font-sans); font-size: var(--m-body-size); font-weight: 500;
  color: var(--m-minalea-000); background: var(--m-minalea-1000);
  border: none; border-radius: var(--m-radius-md);
  cursor: pointer; transition: background .15s ease;
}
.m-btn:hover { background: var(--m-minalea-1300); }
.m-btn:focus-visible { outline: 2px solid var(--m-minalea-1000); outline-offset: 2px; }

/* ---------- Opzioni (radio come schede) ---------- */
.m-options { margin-bottom: var(--m-space-5); }
.m-option {
  display: flex; align-items: flex-start; gap: var(--m-space-3);
  padding: var(--m-space-4);
  border: 1px solid var(--m-text-150);
  border-radius: var(--m-radius-card);
  margin-bottom: var(--m-space-3);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.m-option:hover { border-color: var(--m-minalea-400, #A79ED4); }
.m-option:has(input:checked) {
  border-color: var(--m-minalea-1000);
  background: #FAFAFE;
  box-shadow: inset 0 0 0 1px var(--m-minalea-1000);
}
.m-option input { margin-top: 3px; accent-color: var(--m-minalea-1000); flex-shrink: 0; }
.m-option-title { font-weight: 500; color: var(--m-text-1000); display: block; margin-bottom: 2px; }
.m-option-desc { font-size: var(--m-body-sm-size); color: var(--m-text-500); }

/* ---------- Avvisi ---------- */
.m-alert {
  padding: var(--m-space-4);
  border-radius: var(--m-radius-card);
  border-left: 3px solid;
  font-size: var(--m-body-size);
  margin-bottom: var(--m-space-5);
}
.m-alert--info    { background: #F0EFF9; border-color: var(--m-minalea-1000); color: var(--m-text-700); }
.m-alert--success { background: var(--m-success-bg); border-color: var(--m-success); color: var(--m-text-700); }
.m-alert--warning { background: var(--m-warning-bg); border-color: var(--m-warning); color: var(--m-text-700); }
.m-alert--danger  { background: var(--m-danger-bg);  border-color: var(--m-danger);  color: var(--m-text-700); }

/* ---------- Esito ---------- */
.m-status { display: flex; align-items: center; gap: var(--m-space-3); margin-bottom: var(--m-space-4); }
.m-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.m-status--ok      .m-status-dot { background: var(--m-success); }
.m-status--ko      .m-status-dot { background: var(--m-danger); }
.m-status--pending .m-status-dot { background: var(--m-warning); }
.m-status h1 { margin: 0; }

/* ---------- Riepilogo dati ---------- */
.m-summary { border-top: 1px solid var(--m-minalea-150); margin: var(--m-space-5) 0; }
.m-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--m-space-3) 0;
  border-bottom: 1px solid var(--m-minalea-150);
}
.m-summary-key { color: var(--m-text-500); font-size: var(--m-body-sm-size); }
.m-summary-val { color: var(--m-text-1000); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Piede ---------- */
.m-actions {
  display: flex; gap: var(--m-space-5); align-items: center;
  margin-top: var(--m-space-6); padding-top: var(--m-space-5);
  border-top: 1px solid var(--m-minalea-150);
}
a { color: var(--m-minalea-1000); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

.m-footnote {
  max-width: 560px; margin: var(--m-space-5) auto 0; padding: 0 var(--m-space-5);
  font-size: var(--m-caption-size); color: var(--m-text-400); text-align: center;
  letter-spacing: 0.02em;
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  main.m-shell { margin-top: var(--m-space-5); }
  .m-card { padding: var(--m-space-5); border-radius: var(--m-radius-card); }
}