/* PragmaKreative (logo v2 calmo, KRE-1801): design system unico del gestionale interno. Solo brand agenzia.
   Stile "accent ladder": il petrolio a piena forza solo su piccoli segni (pulsante, dati), le tinte pallide
   (azzurro nebbia) su ogni area (voce attiva, badge). Palette solo logo v2: avorio, blu notte, petrolio, rosa antico. Nessuna ombra, nessun gradiente, un solo raggio per tipo.
   Griglia: barra laterale 248px + area di lavoro fluida con un solo gutter (--pad). */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.otf') format('opentype'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-grotesque-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* brand v2 calmo (logo 4 quadranti): avorio fondo, blu notte testo, petrolio azioni, rosa antico un solo accento */
  --pk-petrolio: #2F5D6B;
  --pk-petrolio-scuro: #234A55;
  --pk-rosa-antico: #9A5E66;
  --pk-avorio: #FBF7F2;
  --pk-inchiostro: #1E2A3B;
  --pk-testo-secondario: #4A5868;
  --pk-bordo: #8B95A1;
  --pk-conferma: #2F5D6B;
  --pk-errore: #7A3F47;
  --pk-font-title: 'Bricolage Grotesque', system-ui, sans-serif;
  --pk-font-body: 'Inter', system-ui, sans-serif;

  /* token semantici del tema (KRE-3210 P0-4): la shell ne ristampa il valore per centro in un blocco :root */
  --c-sfondo: var(--pk-avorio);
  --c-superficie: #FFFFFF;
  --c-testo: var(--pk-inchiostro);
  --c-testo-2: var(--pk-testo-secondario);
  --c-primario: var(--pk-petrolio);
  --c-primario-scuro: var(--pk-petrolio-scuro);
  --c-accento: var(--pk-rosa-antico);
  --c-errore: var(--pk-errore);

  /* ruoli (i componenti usano solo questi) */
  --ground: var(--c-sfondo);
  --surface: var(--c-superficie);
  --tint: #E7EEF1;            /* azzurro nebbia: passaggio del mouse, binari */
  --tint-rosa: #F3E6E1;       /* rosa antico pallido: note interne */
  --border: #E4DDD3;          /* bordo di carte e testate: un passo dal fondo crema */
  --rule: #EDE7DE;            /* filetti di riga */
  --control: var(--pk-bordo); /* bordo dei campi: un passo piu' forte */
  --text: var(--c-testo);
  --muted: var(--c-testo-2);
  --accent: var(--c-primario);
  --accent-ink: var(--c-primario-scuro);
  --positive: var(--pk-conferma);   --positive-bg: #E7EEF1;
  --negative: var(--c-errore);     --negative-bg: #F3E6E1;
  --warning: #5C4A3A;

  --radius-card: 8px;  --radius-control: 6px;  --radius-chip: 999px;
  --gap: 16px;  --card-pad: 20px;  --pad: 32px;
  --nav-w: 248px;  --control-h: 44px;
  --fs-title: 24px;  --fs-section: 16px;  --fs-body: 14px;  --fs-small: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--pk-font-body); font-size: var(--fs-body); line-height: 1.5; background: var(--ground); color: var(--text); }
:focus-visible { outline: 2px solid var(--c-accento); outline-offset: 2px; }
.pk-salta { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-control); z-index: 20; }
.pk-salta:focus { left: 8px; }

/* ---------- Shell: barra laterale + area di lavoro ---------- */
.pk-app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }
.pk-menu-stato { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pk-barra { display: none; }
.pk-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px 12px 24px; border-right: 1px solid var(--border); }
.pk-nav ul { list-style: none; margin: 0; padding: 0; }
.pk-servizio { margin-top: 20px !important; padding-top: 12px !important; border-top: 1px solid var(--border); }
.pk-marchio { display: block; }
.pk-marchio img { display: block; height: 28px; width: auto; }
.pk-marchio-lat { padding: 0 8px 20px; }
details.pk-gruppo { margin: 0 0 2px; }
.pk-gruppo > summary { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: var(--radius-control); cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.pk-gruppo > summary::-webkit-details-marker { display: none; }
.pk-gruppo > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.pk-gruppo[open] > summary::after { transform: rotate(45deg); }
.pk-gruppo > summary:hover { background: var(--tint); }
.pk-gruppo[open] > summary { color: var(--text); }
.pk-nav li a { display: block; padding: 5px 8px 5px 16px; border-radius: var(--radius-control); color: var(--text); text-decoration: none; line-height: 22px; }
.pk-nav li a:hover { background: var(--tint); }
.pk-nav li a.attiva { background: var(--tint); color: var(--accent-ink); font-weight: 600; }
.pk-nav-cerca { width: 100%; box-sizing: border-box; margin: 4px 0 10px; padding: 7px 10px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.pk-gruppo > summary { gap: 8px; justify-content: flex-start; font-size: 14px; }
.pk-gruppo > summary::after { margin-left: auto; }
.pk-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pk-gruppo[open] > summary { color: var(--accent-ink); background: var(--tint); }
.pk-nav .pk-area-desc { margin: 4px 0 6px; padding: 0 8px 0 34px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pk-nav .pk-sezione { margin: 8px 0 2px; padding: 0 8px 0 34px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pk-nav .pk-gruppo ul { margin-left: 26px; border-left: 1px solid var(--border); }
.pk-nav li a { font-weight: 400; }
.pk-nav li[hidden], .pk-gruppo[hidden], .pk-sezione[hidden] { display: none; }

.pk-canvas { padding: var(--pad); min-width: 0; max-width: 1360px; }
.pk-titolo { margin-bottom: 24px; }
.pk-sottotitolo { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.pk-esito { margin: 0 0 var(--gap); padding: 10px 14px; border-radius: var(--radius-control); }

/* ---------- Tipografia ---------- */
.pk-app h1, .pk-app h2, .pk-app h3 { margin: 0; color: var(--text); }
.pk-app h1 { font-family: var(--pk-font-title); font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.01em; }
.pk-app h2 { font-size: var(--fs-section); font-weight: 600; line-height: 1.3; margin: 28px 0 12px; }
.pk-app section > h2:first-child, .pk-app form.box > h2:first-child { margin-top: 0; }
.pk-app h3 { font-size: var(--fs-body); font-weight: 600; margin: 16px 0 8px; }
.pk-app p { margin: 0 0 12px; }
.pk-app a { color: var(--accent-ink); text-underline-offset: 2px; }
.pk-app td a, .pk-app th a { text-decoration: none; font-weight: 600; }
.pk-app td a:hover, .pk-app th a:hover { text-decoration: underline; }
.pk-app .num, .pk-app td.num, .pk-app th.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Superfici: una carta = un bordo, nessuna ombra ---------- */
.pk-app section, .pk-app form.box, .pk-app .box, .pk-app .scheda {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--card-pad); margin: 0 0 var(--gap);
}
.pk-app section > :last-child, .pk-app .box > :last-child { margin-bottom: 0; }
.pk-app section.nota, .pk-app .box.nota { background: var(--tint-rosa); }
.pk-app p.nota, .pk-app small.nota { display: block; padding: 8px 12px; border-radius: var(--radius-control); font-size: 13px; color: var(--text); background: var(--tint-rosa); }

/* ---------- Tabelle: righe e allineamento, niente bordi di cella ---------- */
.pk-app table { width: 100%; border-collapse: collapse; background: var(--surface); font-variant-numeric: tabular-nums; margin: 0 0 var(--gap); }
.pk-app section table, .pk-app .box table { margin-bottom: 0; }
.pk-app th, .pk-app td { padding: 11px 12px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--rule); }
.pk-app th { font-size: var(--fs-small); font-weight: 600; color: var(--muted); background: transparent; border-bottom-color: var(--border); white-space: nowrap; }
.pk-app tbody tr:hover { background: var(--tint); }
.pk-app tbody tr:last-child td { border-bottom: 0; }
.pk-app main > table { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.pk-app .vuoto { padding: 16px; border: 1px dashed var(--control); border-radius: var(--radius-control); color: var(--muted); text-align: center; }

/* ---------- Form e barra filtri ----------
   Il markup ha due forme: <label>Testo <input></label> e <label>Testo</label><input>. Entrambe: etichetta sopra il campo. */
.pk-app label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.pk-app label > input, .pk-app label > select, .pk-app label > textarea { margin-top: 4px; font-weight: 400; }
.pk-app label:has(> input[type="checkbox"], > input[type="radio"]), .pk-app label.inline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 400; font-size: var(--fs-body); }
.pk-app label > input[type="checkbox"], .pk-app label > input[type="radio"] { margin: 0; }
.pk-app input, .pk-app select, .pk-app textarea {
  display: block; font: inherit; font-weight: 400; color: var(--text); width: 100%; max-width: 440px; min-height: var(--control-h); margin: 0 0 12px;
  padding: 6px 10px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface);
}
.pk-app textarea { min-height: 96px; max-width: 640px; }
.pk-app input[type="checkbox"], .pk-app input[type="radio"] { display: inline-block; width: 16px; min-height: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--accent); }
.pk-app input[type="hidden"] { display: none; }
.pk-app input::placeholder { color: var(--muted); opacity: 1; }
.pk-app form[method="get" i], .pk-app form.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--gap); }
.pk-app form[method="get" i] > label { display: flex; align-items: center; gap: 8px; margin: 0; }
.pk-app form[method="get" i] input, .pk-app form[method="get" i] select, .pk-app form[method="get" i] label > input, .pk-app form[method="get" i] label > select { display: inline-block; width: auto; min-width: 150px; margin: 0; }
.pk-app form[method="get" i] > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { flex: 1 1 240px; }
.pk-app td a[href*="ticket-scheda"] { white-space: nowrap; }
.pk-app td input, .pk-app td select { margin-bottom: 0; }

/* ---------- Pulsanti: un solo pieno per schermata (petrolio), il resto bordato ---------- */
.pk-app button, .pk-app a.bottone, .pk-app input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 16px; margin: 0;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; width: auto; max-width: none;
  border: 1px solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: #fff;
}
.pk-app button:hover, .pk-app a.bottone:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.pk-app button.secondario, .pk-app a.bottone.secondario { background: var(--surface); color: var(--text); border-color: var(--control); }
.pk-app button.secondario:hover { background: var(--tint); }
.pk-app button.pericolo { background: var(--surface); color: var(--negative); border-color: var(--negative); }
.pk-app button:disabled { opacity: .55; cursor: not-allowed; }
.pk-app td form { margin: 0; }

/* ---------- Stato: chip pallidi, testo scuro, mai troncati ---------- */
.pk-app .pill, .pk-app .badge, .pk-app .stato {
  display: inline-block; flex: none; white-space: nowrap; padding: 1px 10px; border-radius: var(--radius-chip);
  background: var(--tint); color: var(--accent-ink); font-size: var(--fs-small); font-weight: 600; line-height: 20px;
}
.pk-app .ok { color: var(--positive); }
.pk-app .err { color: var(--negative); }
.pk-app p.ok.pk-esito { background: var(--positive-bg); }
.pk-app p.err.pk-esito { background: var(--negative-bg); }
.pk-app .scaduto { color: var(--negative); font-weight: 600; }
.pk-app .in-scadenza { color: var(--warning); font-weight: 600; }
.pk-app .meta { color: var(--muted); font-size: 13px; }
.pk-app .testo { white-space: pre-wrap; }

/* ---------- Sintesi: cifre come testo, un contenitore diviso da filetti ---------- */
.pk-kpi, .pk-app .carte, .pk-app .stadi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 var(--gap);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.pk-kpi > *, .pk-app .carte > *, .pk-app .stadi > * { padding: 16px var(--card-pad); border: 0; border-left: 1px solid var(--rule); border-radius: 0; min-width: 0; background: transparent; margin: 0; }
.pk-kpi > :first-child, .pk-app .carte > :first-child, .pk-app .stadi > :first-child { border-left: 0; }
.pk-kpi-etichetta { display: block; color: var(--muted); font-size: 13px; }
.pk-kpi-valore { display: block; margin: 2px 0; font-family: var(--pk-font-title); font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pk-kpi-nota { display: block; color: var(--muted); font-size: var(--fs-small); }
.pk-app .carta b { display: block; font-family: var(--pk-font-title); font-size: 28px; line-height: 1.2; }

/* ---------- Pannelli ed elenchi della panoramica ---------- */
.pk-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
.pk-griglia > section { margin: 0; display: flex; flex-direction: column; }
.pk-griglia > section > :last-child { margin-top: auto; }
.pk-elenco { list-style: none; margin: 0; padding: 0; }
.pk-elenco li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.pk-elenco li:last-child { border-bottom: 0; }
.pk-elenco .meta { white-space: nowrap; }
.pk-moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.pk-moduli li a { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: var(--radius-control); text-decoration: none; color: var(--text); font-weight: 400; }
.pk-moduli li a:hover { background: var(--tint); }
.pk-moduli strong { display: block; font-weight: 600; }
.pk-moduli span { display: block; color: var(--muted); font-size: 13px; }

/* ---------- Tablet e telefono: la barra laterale diventa barra in alto + foglio a tutto schermo ---------- */
@media (max-width: 900px) {
  .pk-app { display: block; }
  .pk-barra { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; height: 52px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--border); }
  .pk-barra .pk-marchio img { height: 24px; }
  .pk-app .pk-menu-bottone { display: inline-flex; flex-direction: row; align-items: center; min-height: 44px; padding: 0 14px; margin: 0; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; }
  .pk-menu-stato:focus-visible ~ .pk-barra .pk-menu-bottone { outline: 2px solid var(--c-accento); outline-offset: 2px; }
  .pk-nav { display: none; position: fixed; inset: 52px 0 0 0; z-index: 9; height: auto; background: var(--ground); border-right: 0; padding: 8px 16px 32px; }
  .pk-menu-stato:checked ~ .pk-nav { display: block; }
  .pk-nav li a { padding: 10px 8px; }
  .pk-marchio-lat { display: none; }
  .pk-canvas { padding: 20px 16px 48px; }
  .pk-griglia { grid-template-columns: minmax(0, 1fr); }
  .pk-app table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 640px) {
  .pk-app input, .pk-app select, .pk-app textarea { max-width: none; }
  .pk-app form[method="get" i] > label { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 4px; }
  .pk-app form[method="get" i] input, .pk-app form[method="get" i] select { width: 100%; }
  .pk-kpi, .pk-app .carte, .pk-app .stadi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-kpi > *, .pk-app .carte > *, .pk-app .stadi > * { border-left: 0; border-top: 1px solid var(--rule); }
  .pk-kpi > :nth-child(-n+2), .pk-app .carte > :nth-child(-n+2), .pk-app .stadi > :nth-child(-n+2) { border-top: 0; }
  .pk-kpi > :nth-child(even), .pk-app .carte > :nth-child(even), .pk-app .stadi > :nth-child(even) { border-left: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- Componenti di pagina (aggiunti dai ticket di migrazione, un blocco per pagina) ---------- */
/* impostazioni-account: codici di recupero, chiave TOTP in chiaro, QR */
.impostazioni-codici { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; list-style: none; margin: 0 0 var(--gap); padding: 0; font-family: monospace; font-size: var(--fs-section); }
.impostazioni-segreto { padding: 10px 12px; margin: 0 0 var(--gap); background: var(--ground); border: 1px solid var(--control); border-radius: var(--radius-control); font-family: monospace; font-size: var(--fs-section); letter-spacing: 2px; word-break: break-all; }
.impostazioni-qr { width: 220px; max-width: 100%; margin: 10px 0 var(--gap); }
.impostazioni-qr svg { display: block; width: 100%; height: auto; }
/* Panoramica: la cella di sintesi e' un collegamento al suo modulo. */
.pk-app a.pk-kpi-cella { display: block; color: var(--text); text-decoration: none; }
.pk-app a.pk-kpi-cella:hover { background: var(--tint); }
.pk-app .pk-elenco a { font-weight: 600; text-decoration: none; }
/* ---------- Utilita' al posto degli stili inline (prefisso u-) ---------- */
.pk-app .u-in-linea { display: inline; }
.pk-app .u-auto { width: auto; min-width: 0; }
.pk-app .u-campo-140 { width: 140px; }
.pk-app .u-centro { text-align: center; }
.pk-app .u-alto { vertical-align: top; }
.pk-app .u-pre { white-space: pre-wrap; }
.pk-app .u-tabella-auto { width: auto; }
.pk-app .u-cerchio-colore { display: inline-block; width: 14px; height: 14px; }
.pk-app .u-colonne { display: flex; gap: var(--gap); align-items: flex-start; }
.pk-app .u-colonne > :first-child { flex: 1; }
.pk-app .u-colonne > :last-child { flex: 2; }
.pk-app .u-barra-rapida { display: flex; flex-wrap: wrap; gap: 8px 14px; background: var(--surface); padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-control); }
.pk-app .box.u-box-compatto { padding: 6px; margin: 4px 0; }
.pk-app .box.u-box-grigio { background: var(--rule); }

/* ---------- Accesso (login, password dimenticata, reset): card centrata, senza barra laterale ---------- */
.pk-accesso { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ground); color: var(--text); font-family: var(--pk-font-body); }
.pk-accesso-card { width: 100%; max-width: 400px; padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.pk-accesso h1 { margin: 0 0 10px; font-size: var(--fs-title); color: var(--text); text-align: center; }
.pk-accesso-leggero { font-weight: 400; }
.pk-accesso-logo { margin: 0 auto 14px; height: 44px; }
.pk-accesso-sottotitolo { margin: 0 0 30px; font-size: var(--fs-body); color: var(--muted); text-align: center; }
.pk-accesso-campo { margin: 0 0 20px; }
.pk-accesso-campo label { display: block; margin: 0 0 8px; font-weight: 500; color: var(--text); }
.pk-accesso input[type="email"], .pk-accesso input[type="password"], .pk-accesso input[type="text"] { width: 100%; padding: 12px; font: inherit; font-size: var(--fs-body); color: var(--text); background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius-control); }
.pk-accesso button { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; color: var(--surface); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-control); cursor: pointer; }
.pk-accesso button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.pk-accesso-errore, .pk-accesso-info, .pk-accesso-ok { margin: 0 0 20px; padding: 12px; font-size: var(--fs-body); border-radius: var(--radius-control); }
.pk-accesso-errore { color: var(--negative); background: var(--negative-bg); }
.pk-accesso-info { color: var(--accent-ink); background: var(--tint); }
.pk-accesso-ok { color: var(--positive); background: var(--positive-bg); }
.pk-accesso-indietro { margin-top: 15px; text-align: center; }
.pk-accesso-indietro a { font-size: var(--fs-body); color: var(--accent-ink); text-decoration: none; }
.pk-accesso-indietro a:hover { text-decoration: underline; }
.pk-accesso-separatore { display: flex; align-items: center; margin: 24px 0 20px; font-size: 13px; color: var(--muted); }
.pk-accesso-separatore::before, .pk-accesso-separatore::after { content: ""; flex: 1; border-bottom: 1px solid var(--control); }
.pk-accesso-separatore span { padding: 0 12px; }
.pk-accesso-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; font-size: 15px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius-control); text-decoration: none; }
.pk-accesso-google:hover { background: var(--tint); }
.pk-accesso-nota { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
/* FINE-COMPONENTI */

/* ---------- Pagine di accesso (login, reset): stessa identita', senza barra laterale ---------- */
.pk-logo { display: block; height: 40px; width: auto; }
.navbar .pk-logo { height: 34px; }
.navbar h1 { display: flex; align-items: center; gap: 12px; color: #fff; }
.navbar a:focus-visible { outline-color: var(--pk-avorio); }
@media (max-width: 700px) {
  .navbar { flex-wrap: wrap; gap: 12px; }
  .navbar .user-info { text-align: left; }
  .navbar h1 { font-size: 18px; flex-wrap: wrap; }
}

/* Anamnesi e moduli con firma (KRE-1610) */
.pk-app canvas.pk-firma-canvas { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 1; background: #fff; border: 1px dashed var(--rule); border-radius: 6px; touch-action: none; cursor: crosshair; }
.pk-app table tr.cambiato td { background: var(--tint-rosa); font-weight: 600; }

/* ---------- KRE-1801 fase 3: procedure guidate, ruoli, agenzie, pacchetto su misura ---------- */
/* Procedure rapide in dashboard: card cliccabili, una per procedura. */
.pk-app .pk-rapide { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); margin: 0 0 var(--gap); }
.pk-app .pk-rapide a { display: block; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--text); text-decoration: none; }
.pk-app .pk-rapide a:hover { background: var(--tint); border-color: var(--accent); }
.pk-app .pk-rapide strong { display: block; font-family: var(--pk-font-title); font-size: var(--fs-section); line-height: 1.3; margin-bottom: 4px; }
.pk-app .pk-rapide span { display: block; color: var(--muted); font-size: var(--fs-small); }
/* Barra dei passi del wizard: il passo corrente ha aria-current="step" e il bordo petrolio. */
.pk-app ol.pk-passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; list-style: none; margin: 0 0 var(--gap); padding: 0; }
.pk-app .pk-passi li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--muted); font-size: 13px; }
.pk-app .pk-passi li.fatto { color: var(--accent-ink); }
.pk-app .pk-passi li[aria-current="step"] { background: var(--tint); border-color: var(--accent); color: var(--text); font-weight: 600; }
.pk-app .pk-passo-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: var(--radius-chip); border: 1px solid currentColor; font-size: 12px; font-weight: 600; }
.pk-app .pk-passi li[aria-current="step"] .pk-passo-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.pk-app .pk-nota-wizard { padding: 8px 12px; background: var(--tint); border-radius: var(--radius-control); font-size: 13px; }
/* Riepilogo: coppie etichetta/valore. */
.pk-app dl.pk-riepilogo { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0 0 var(--gap); }
.pk-app dl.pk-riepilogo dt { color: var(--muted); font-size: 13px; }
.pk-app dl.pk-riepilogo dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* Azioni in fila sotto un form o un blocco. */
.pk-app .pk-azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: var(--gap) 0 0; }
.pk-app .pk-azioni form { margin: 0; }
/* Stato con icona + testo (mai solo colore). */
.pk-app .pk-stato { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.pk-app .pk-stato-on { color: var(--positive); }
.pk-app .pk-stato-off { color: var(--muted); }
/* Tabelle larghe: scorrimento orizzontale invece di rompere il layout. */
.pk-app .pk-tabella-larga { overflow-x: auto; max-width: 100%; margin: 0 0 var(--gap); }
.pk-app .pk-tabella-larga table { margin-bottom: 0; }
.pk-app .pk-confronto th:first-child { width: 40%; }
.pk-app table td .u-auto { max-width: 220px; }
/* Pulsante disabilitato: testo leggibile, non solo opacita'. */
.pk-app button:disabled { opacity: .7; }
@media (max-width: 640px) {
  .pk-app dl.pk-riepilogo { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pk-app dl.pk-riepilogo dd { margin-bottom: 10px; }
}
/* Wizard: il titolo del passo sta in cima al form anche se il form inizia con campi nascosti (CSRF). */
.pk-app form.pk-wizard > h2 { margin-top: 0; }
/* Metadati (chiave modulo) dentro le celle d'intestazione: testo normale, non grassetto. */
.pk-app th .meta { font-weight: 400; text-transform: none; font-size: 12px; }
/* Modelli AI (KRE-1893): form di riga in linea, barra del tetto, controlli >= 44 px sui dispositivi touch. */
.pk-app .pk-riga-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.pk-app .pk-riga-form select, .pk-app .pk-riga-form input { max-width: 100%; }
.pk-app .pk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pk-app progress.pk-tetto-barra { width: 120px; max-width: 100%; height: 12px; accent-color: var(--pk-petrolio); }
@media (pointer: coarse) {
  .pk-app select, .pk-app input:not([type="checkbox"]), .pk-app button, .pk-app a.bottone { min-height: 44px; }
}
/* KRE-1893: tabelle larghe come schede quando lo spazio è poco (barra laterale + contenuto < ~900 px). Etichette da tabella-card.js. */
@media (max-width: 1180px) {
  .pk-app .pk-tabella-larga { overflow-x: visible; }
  .pk-app .pk-tabella-larga table, .pk-app .pk-tabella-larga tbody { display: block; overflow: visible; background: transparent; }
  .pk-app .pk-tabella-larga tr:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pk-app .pk-tabella-larga tr { display: block; margin: 0 0 12px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
  .pk-app .pk-tabella-larga tr[data-gruppo]::before { content: attr(data-gruppo); display: block; padding: 6px 0; font-weight: 700; border-bottom: 1px solid var(--rule); }
  .pk-app .pk-tabella-larga td { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
  .pk-app .pk-tabella-larga td:last-child { border-bottom: 0; }
  .pk-app .pk-tabella-larga td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
  .pk-app .pk-tabella-larga td:empty { display: none; }
  .pk-app .pk-tabella-larga .pk-riga-form select, .pk-app .pk-tabella-larga .pk-riga-form input { flex: 1 1 100%; width: 100%; }
}

/* KRE-1893 riprogettazione (Modelli AI): schede, card per servizio, listino interattivo, responsive. Colori solo brand v3. */
.pk-app .pk-ai [hidden] { display: none !important; }
.pk-app .pk-ai-tessere { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pk-app .pk-ai-tessera { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow-wrap: anywhere; }
.pk-app .pk-ai-tessera strong { font-family: var(--pk-font-title); font-size: 20px; line-height: 1.2; }
.pk-app .pk-ai-schede { display: flex; gap: 4px; margin: 0 0 var(--gap); border-bottom: 1px solid var(--border); overflow-x: auto; }
.pk-app .pk-ai-schede a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.pk-app .pk-ai-schede a:hover { background: var(--tint); color: var(--text); }
.pk-app .pk-ai-schede a[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.pk-app .pk-ai-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); margin: 0 0 var(--gap); padding: 0; list-style: none; }
.pk-app .pk-ai-card { min-width: 0; margin: 0; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow-wrap: anywhere; }
.pk-app .pk-ai-card h3 { margin: 0 0 4px; }
.pk-app .pk-ai-card-testa p { margin: 0; }
.pk-app .pk-ai-fascia { padding: 12px 0; border-top: 1px solid var(--rule); }
.pk-app .pk-ai-fascia-form { display: grid; gap: 6px; margin: 0; }
.pk-app .pk-ai-fascia-form select { width: 100%; max-width: 100%; }
.pk-app .pk-ai-prezzi { display: grid; gap: 2px; font-size: var(--fs-small); overflow-wrap: anywhere; }
.pk-app .pk-ai-fascia-azioni { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-app .pk-ai-fascia-azioni input { flex: 1 1 140px; min-width: 0; }
.pk-app .pk-ai-elenco { list-style: none; margin: 0 0 var(--gap); padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.pk-app .pk-ai-elenco li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.pk-app .pk-ai-elenco li:last-child { border-bottom: 0; }
.pk-app .pk-ai-frase { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.pk-app .pk-ai-box { display: grid; gap: 10px; max-width: 640px; margin: 0 0 var(--gap); padding: var(--card-pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.pk-app .pk-ai-box h4 { margin: 0; }
.pk-app .pk-ai-campi { display: grid; gap: 6px; }
.pk-app .pk-ai-campi select, .pk-app .pk-ai-campi input { width: 100%; }
.pk-app .pk-ai-ripiega { margin: 0 0 var(--gap); }
.pk-app .pk-ai-ripiega > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.pk-app .pk-ai-filtri-riga { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 var(--gap); }
.pk-app .pk-ai-filtri-riga label { display: grid; gap: 4px; flex: 1 1 150px; min-width: 150px; }
.pk-app .pk-ai-barre { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 6px; }
.pk-app .pk-ai-barra-riga { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.pk-app .pk-ai-pagine { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 var(--gap); }
.pk-app .pk-ai-registro { padding-left: 20px; }
.pk-app .pk-ai-registro li { margin-bottom: 10px; overflow-wrap: anywhere; }
.pk-app .pk-ai-fonte-gruppo { margin: 0 0 var(--gap); }
.pk-app .pk-ai-fonte-gruppo h4 { margin: 0 0 6px; }
.pk-app .pk-ai-elenco-fonti { margin: 0; padding-left: 20px; }
.pk-app .pk-ai-elenco-fonti li { margin-bottom: 8px; overflow-wrap: anywhere; }
/* Barre e stato: il colore accompagna sempre il testo (entro il tetto / vicino / sforato). */
.pk-app progress.pk-ai-barra { width: 100%; height: 12px; margin: 4px 0; }
.pk-app .pk-ai-stato-ok { accent-color: var(--pk-petrolio); }
.pk-app .pk-ai-stato-attenzione { accent-color: var(--pk-rosa-antico); }
.pk-app .pk-ai-stato-sforato { accent-color: var(--pk-errore); }
.pk-app .pk-ai-azione { display: inline-block; padding: 2px 10px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 600; background: var(--tint); color: var(--accent-ink); }
.pk-app .pk-ai-azione-blocco { background: var(--tint-rosa); color: var(--pk-errore); }
/* Listino: filtri a chip, tabella con intestazione fissa, gruppi comprimibili, confronto in basso. */
.pk-app .pk-ai-listino { padding-bottom: 72px; }
.pk-app .pk-ai-filtri { display: grid; gap: 10px; margin: 0 0 12px; }
.pk-app .pk-ai-cerca input { width: 100%; max-width: 420px; }
.pk-app .pk-ai-chip-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pk-app .pk-ai-chip-gruppo > .meta { min-width: 72px; }
.pk-app .pk-ai-chip-gruppo label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.pk-app .pk-ai-chip-elenco { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-app button.pk-ai-chip { min-height: 44px; padding: 4px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--control); border-radius: var(--radius-chip); font-size: 13px; font-weight: 500; }
.pk-app button.pk-ai-chip:hover { background: var(--tint); }
.pk-app button.pk-ai-chip[aria-pressed="true"] { background: var(--pk-petrolio); border-color: var(--pk-petrolio); color: #fff; }
.pk-app .pk-ai-barra-listino { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pk-app .pk-ai-barra-listino p { margin: 0; }
.pk-app .pk-ai-tabella-wrap { max-height: 70vh; overflow: auto; margin: 0 0 var(--gap); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.pk-app .pk-ai-listino-tabella, .pk-app .pk-ai-consumi, .pk-app .pk-ai-confronto-t { min-width: 880px; margin: 0; }
.pk-app .pk-ai-confronto-t { min-width: 560px; }
.pk-app .pk-ai-listino-tabella th, .pk-app .pk-ai-listino-tabella td, .pk-app .pk-ai-consumi th, .pk-app .pk-ai-consumi td, .pk-app .pk-ai-confronto-t th, .pk-app .pk-ai-confronto-t td { padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.pk-app .pk-ai-listino-tabella thead th, .pk-app .pk-ai-consumi thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); font-weight: 600; }
.pk-app button.pk-ai-ordina, .pk-app .pk-ai-listino-tabella thead button { min-height: 0; padding: 0; background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.pk-app button.pk-ai-ordina:hover, .pk-app .pk-ai-listino-tabella thead button:hover { color: var(--accent-ink); text-decoration: underline; }
.pk-app .pk-ai-listino-tabella td, .pk-app .pk-ai-consumi td { border-bottom: 1px solid var(--rule); }
.pk-app .pk-ai-listino-tabella td:first-child, .pk-app .pk-ai-listino-tabella th:first-child { width: 44px; }
.pk-app .pk-ai-gruppo-testa th { padding: 0; background: var(--tint); }
.pk-app .pk-ai-gruppo-testa button { display: block; width: 100%; min-height: 44px; padding: 8px 12px; background: none; border: 0; color: var(--text); font-weight: 600; text-align: left; }
.pk-app .pk-ai-gruppo-testa button:hover { background: var(--tint); }
.pk-app .pk-ai-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pk-app .pk-ai-nome > strong { overflow-wrap: anywhere; }
.pk-app button.pk-ai-espandi { width: 28px; min-height: 28px; padding: 0; background: var(--surface); color: var(--accent-ink); border: 1px solid var(--control); }
.pk-app button.pk-ai-espandi:hover { background: var(--tint); }
.pk-app .pk-ai-prov, .pk-app .pk-ai-chip-serv { display: inline-block; padding: 1px 8px; border-radius: var(--radius-chip); font-size: 12px; }
.pk-app .pk-ai-tono-0 { background: var(--tint); color: var(--pk-inchiostro); }
.pk-app .pk-ai-tono-1 { background: var(--tint-rosa); color: var(--pk-inchiostro); }
.pk-app .pk-ai-tono-2 { background: #DCE8EC; color: var(--pk-inchiostro); }
.pk-app .pk-ai-tono-3 { background: var(--pk-avorio); color: var(--pk-inchiostro); border: 1px solid var(--border); }
.pk-app .pk-ai-dettaglio td { background: var(--pk-avorio); }
.pk-app .pk-ai-dettaglio-corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pk-app .pk-ai-dettaglio-blocco { min-width: 0; }
.pk-app .pk-ai-etichetta { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pk-app .pk-ai-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pk-app .pk-ai-confronto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 60vh; overflow: auto; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.pk-app .pk-ai-confronto-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pk-app .pk-ai-confronto-barra p { margin: 0; }
.pk-app .pk-ai-confronto .pk-ai-tabella-wrap { max-height: 40vh; margin: 8px 0 0; }
.pk-app .pk-ai-confronto-t th:first-child { width: 150px; }
.pk-app .pk-ai-confronto-t td div + div { margin-top: 2px; }
/* Consumi: barre mensili, pagine, registro ripiegabile. */
.pk-app .pk-ai-mese { font-variant-numeric: tabular-nums; }
.pk-app .pk-ai-importo { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 700px) {
  .pk-app .pk-ai-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-app .pk-ai-griglia { grid-template-columns: minmax(0, 1fr); }
  .pk-app .pk-ai-filtri-riga label { min-width: 100%; }
  .pk-app .pk-ai-barra-riga { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .pk-app .pk-ai-listino > .pk-ai-tabella-wrap, .pk-app .pk-ai-consumi-wrap { max-height: none; overflow: visible; background: transparent; border: 0; }
  .pk-app .pk-ai-confronto .pk-ai-tabella-wrap { max-height: 40vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); }
  .pk-app .pk-ai-listino-tabella, .pk-app .pk-ai-consumi, .pk-app .pk-ai-listino-tabella tbody, .pk-app .pk-ai-consumi tbody { display: block; min-width: 0; background: transparent; }
  .pk-app .pk-ai-listino-tabella thead, .pk-app .pk-ai-consumi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pk-app .pk-ai-listino-tabella tr, .pk-app .pk-ai-consumi tr { display: block; }
  .pk-app .pk-ai-listino-tabella tr:not(.pk-ai-gruppo-testa):not(.pk-ai-dettaglio), .pk-app .pk-ai-consumi tbody tr { margin: 0 0 10px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
  .pk-app .pk-ai-listino-tabella td, .pk-app .pk-ai-consumi td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 6px 0; border: 0; }
  .pk-app .pk-ai-listino-tabella td::before, .pk-app .pk-ai-consumi td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
  .pk-app .pk-ai-listino-tabella td[data-label="Confronta"]::before, .pk-app .pk-ai-listino-tabella td[data-label="Dettaglio"]::before { content: none; }
  .pk-app .pk-ai-listino-tabella td[data-label="Confronta"], .pk-app .pk-ai-listino-tabella td[data-label="Dettaglio"] { display: block; }
  .pk-app .pk-ai-listino-tabella tr.pk-ai-dettaglio { margin-top: -8px; }
  .pk-app .pk-ai-listino-tabella tr.pk-ai-dettaglio td { display: block; }
  .pk-app .pk-ai-gruppo-testa th { display: block; }
  .pk-app .pk-ai-confronto-t { min-width: 520px; }
  .pk-app .pk-ai-chip-gruppo > .meta { min-width: 100%; }
}
@media (pointer: coarse) {
  .pk-app button.pk-ai-chip, .pk-app button.pk-ai-espandi, .pk-app .pk-ai-listino-tabella input[type="checkbox"] { min-width: 44px; min-height: 44px; }
  .pk-app button.pk-ai-ordina { min-height: 44px; }
}

/* KRE-1893: scelta del raggruppamento in «Organizzazione modelli». */
.pk-app .pk-ai-chip-elenco a.pk-ai-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; }
.pk-app .pk-ai-chip-elenco a.pk-ai-chip[aria-current="true"] { background: var(--text); color: var(--surface); }
.pk-app .pk-ai-consumi details summary { cursor: pointer; font-weight: 600; }
.pk-app .pk-gw { display: grid; gap: 16px; }
.pk-app .pk-gw-provider { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); min-width: 0; }
.pk-app .pk-gw-provider h2 { margin: 0 0 8px; font-size: 18px; }
.pk-app .pk-gw-ambito { border-top: 1px solid var(--border); padding: 8px 0; }
.pk-app .pk-gw-ambito summary { cursor: pointer; overflow-wrap: anywhere; }
.pk-app .pk-gw-form { display: grid; gap: 10px; margin-top: 10px; max-width: 560px; }
.pk-app .pk-gw-form label { display: grid; gap: 4px; }
.pk-app .pk-gw-form input[type=text], .pk-app .pk-gw-form input[type=url], .pk-app .pk-gw-form input[type=password], .pk-app .pk-gw-form textarea { width: 100%; box-sizing: border-box; }
.pk-app .pk-gw-form fieldset { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-card); }
.pk-app .pk-gw-form .pk-gw-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.pk-app .pk-gw-azioni { display: flex; flex-wrap: wrap; gap: 8px; }

.pk-app .pk-gw-wizard { margin: 0 0 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.pk-app .pk-gw-wizard h2 { margin: 0 0 8px; font-size: 18px; }
.pk-app .pk-gw-proposte { margin: 8px 0 0; padding-left: 20px; overflow-wrap: anywhere; }

/* KRE-2067: pagina Saldi gateway */
.pk-app .pk-saldi-tabella { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pk-app .pk-saldi-tabella th, .pk-app .pk-saldi-tabella td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pk-app .pk-saldi-azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pk-app .pk-saldi-azioni form { margin: 0; }
.pk-app .pk-saldi-ok { color: #1b6e3a; }
.pk-app .pk-saldi-basso { color: #8a5a00; }
.pk-app .pk-saldi-zero { color: #a12121; }
.pk-app .pk-saldi-non_letto { color: #5a5a5a; }
@media (max-width: 640px) {
  .pk-app .pk-saldi-tabella thead { display: none; }
  .pk-app .pk-saldi-tabella tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .pk-app .pk-saldi-tabella td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 10px; }
  .pk-app .pk-saldi-tabella td[data-label]::before { content: attr(data-label); color: var(--muted, #666); }
}
.pk-app .pk-ce { margin-top: 28px; }
.pk-app .pk-ce h2 { margin: 0 0 8px; }
.pk-app .pk-ce h3 { margin: 18px 0 6px; font-size: 1rem; }
.pk-app .pk-ce-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pk-app .pk-ce-indice a { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; }
.pk-app .pk-ce-dettaglio { margin: 8px 0; }
.pk-app .pk-ce-dettaglio summary { cursor: pointer; padding: 6px 0; }

/* ---------- Barra in basso su telefono (istanza agenzia, KRE-3171) ---------- */
.pk-bassa { display: none; }
.pk-lingua { margin: 12px 8px 0; font-size: 13px; color: var(--muted); }
.pk-lingua a { color: inherit; text-decoration: none; padding: 4px 2px; }
.pk-lingua a.attiva { font-weight: 700; color: var(--ink, inherit); text-decoration: underline; }
@media (max-width: 900px) {
  .pk-bassa { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; background: var(--ground); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .area-notifiche-form { padding-bottom: 96px; } /* KRE-3740: il Salva non resta sotto la barra bassa fissa */
  .pk-bassa a { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); text-decoration: none; }
  .pk-bassa a.attiva, .pk-bassa details[data-attiva] > summary { color: var(--c-accento); font-weight: 600; }
  .pk-bassa .pk-ico { width: 22px; height: 22px; }
  .pk-bassa span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* KRE-3481: la barra (56 px + area sicura dell'iPhone) non copre mai l'ultima riga ne' il campo con il focus */
  .pk-canvas { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Voci di menu e link di servizio: bersagli da 44 px (KRE-3210 P0-8) */
.pk-nav li a, .pk-nav summary, .pk-servizio a, .pk-lingua a { display: flex; align-items: center; min-height: 44px; }
.pk-lingua { display: flex; gap: 4px; align-items: center; }
.pk-lingua a { padding: 0 10px; }

/* «Altro» della barra in basso: elenco a comparsa con le aree che non stanno nei 4 posti */
.pk-altro { position: relative; flex: 1 1 0; min-width: 0; }
.pk-altro > summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); }
.pk-altro > summary::-webkit-details-marker { display: none; }
.pk-altro-elenco { position: absolute; right: 0; bottom: 100%; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 4px; }
.pk-altro-elenco a { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 12px; font-size: 14px; }
/* KRE-3450: scheda cliente a 390 px. I tab vanno a capo (sopra), testi lunghi (email, PEC, titoli) non allargano la pagina. */
.pk-app #cliente, .pk-app .pk-tabella-larga td { overflow-wrap: anywhere; }
.pk-app p.avviso { padding: 10px 12px; background: var(--tint); border: 1px solid var(--border); border-radius: var(--radius-control); }

/* KRE-3472: scheda cliente, intestazione e panoramica una riga per informazione (leggibile a 390 px) */
.pk-app .pk-righe { margin: 0 0 16px; }
.pk-app .pk-righe > div { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pk-app .pk-righe dt { font-weight: 600; min-width: 9.5rem; }
.pk-app .pk-righe dd { margin: 0; overflow-wrap: anywhere; }
.pk-app .pk-link-scheda { line-height: 1.9; }
.pk-app .u-barra-rapida a.altro { font-style: italic; }

/* KRE-3481: scheda cliente «for dummies», il form «Modifica dati» resta chiuso dietro il bottone «Modifica» */
.pk-app .pk-modifica { margin: 16px 0; }
.pk-app .pk-modifica > summary {
  list-style: none; display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 16px;
  border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text);
  font-weight: 600; cursor: pointer;
}
.pk-app .pk-modifica > summary::-webkit-details-marker { display: none; }
.pk-app .pk-modifica > summary:hover { background: var(--tint); }
.pk-app .pk-modifica > summary:focus-visible { outline: 2px solid var(--c-accento); outline-offset: 2px; }
.pk-app .pk-modifica[open] > summary { margin-bottom: 12px; }

/* KRE-3481: confronto versioni (contratti), report mensile e firma */
.diff-testo { font-family: ui-monospace, monospace; font-size: .9rem; white-space: pre-wrap; border: 1px solid #ddd; border-radius: 8px; padding: .5rem; overflow-x: auto; }
.diff-testo > * { display: block; padding: 0 .25rem; }
.diff-testo ins { background: #e6ffec; text-decoration: none; }
.diff-testo del { background: #ffebe9; }
.testo-contratto { white-space: pre-wrap; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; background: #fff; line-height: 1.5; }
.u-numeri { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.u-numeri > div { flex: 1 1 8rem; border: 1px solid #ddd; border-radius: 8px; padding: .5rem; text-align: center; }
.u-numeri strong { display: block; font-size: 1.6rem; }
@media print { nav, header, .no-stampa, form, .pk-barra-basso { display: none !important; } body { background: #fff; } }
td small { overflow-wrap: anywhere; }