/* ==========================================================================
   Tax Automation Lab — Design layer delle applicazioni (v2.0)
   --------------------------------------------------------------------------
   Riferimento: il Fascicolo fiscale cliente. È il tool costruito meglio dei
   quattro, quindi è il suo linguaggio a diventare lo standard, non il
   contrario: sidebar petrolio, pastiglia bianca sullo stato attivo, verde per
   «aggiungi», arancio per «modifica», carta calda e schede bianche.

   Questo file porta quel linguaggio sugli altri tre. Agisce solo su colore,
   tipografia, raggi, bordi e stati: non tocca griglie, ingombri o logica.
   Tutto è agganciato a html.tal-tool-page e non può raggiungere le pagine
   editoriali.

     01. Token
     02. Superficie e tipografia
     03. Sidebar
     04. Barra comandi e barra applicativa
     05. Pannelli e schede
     06. Bottoni
     07. Campi
     08. Tabelle
     09. Stati: badge, avvisi, riepiloghi
     10. Finestre
     11. Avviso d'uso
     12. Focus e stampa
   ========================================================================== */

@import url("/assets/fonts/fonts.css");

/* ---------- 01. Token ---------------------------------------------------- */

html.tal-tool-page{
  --tal-paper:#F6F5F1;      /* fondo dell'applicazione */
  --tal-card:#FFFFFF;       /* superfici di lavoro */
  --tal-sunken:#F0EFEB;

  --tal-fg:#0B0B0B;
  --tal-ink:#1D1B16;
  --tal-ink-2:#47443F;
  --tal-ink-3:#6E6B65;
  --tal-ink-4:#AAA7A0;

  --tal-line:#E7E4DC;
  --tal-line-2:#DCDAD4;

  /* Un solo accento: il petrolio del marchio. */
  --tal-accent:#145368;
  --tal-accent-2:#1D6A7F;
  --tal-accent-deep:#0C3341;
  --tal-accent-soft:#EAF2F5;

  /* Sidebar */
  --tal-sb-1:#175C73;
  --tal-sb-2:#114B5F;
  --tal-sb-3:#0B2F3D;

  /* Azioni riconoscibili dal colore */
  --tal-add-1:#9EE6BD; --tal-add-2:#72D7A1; --tal-add-line:#5CC68E; --tal-add-ink:#123D2E;
  --tal-edit-1:#C77732; --tal-edit-2:#A65A1F; --tal-edit-ink:#FFFFFF;

  /* Semantica */
  --tal-ok:#2E6B3D;    --tal-ok-bg:#EDF6EF;   --tal-ok-line:#C3DDC9;
  --tal-warn:#A53D28;  --tal-warn-bg:#FFF3EE; --tal-warn-line:#E8B9AA;
  --tal-gold:#8B6A16;  --tal-gold-bg:#FFF8DF; --tal-gold-line:#E8DCAE;
  --tal-info:#1D5A72;  --tal-info-bg:#EEF4F6; --tal-info-line:#BFD6DE;

  --tal-r-sm:7px; --tal-r:9px; --tal-r-lg:14px; --tal-r-pill:999px;
  --tal-sh-1:0 1px 2px rgba(20,22,27,.05);
  --tal-sh-2:0 2px 12px rgba(0,0,0,.028);
  --tal-sh-3:0 12px 34px -12px rgba(11,47,61,.28);

  --tal-sans:"Inter","Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --tal-mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace;
  --tal-ease:cubic-bezier(.16,1,.3,1);

  /* Le variabili già usate dai tool puntano tutte qui: una sola sorgente. */
  --paper:var(--tal-paper);
  --card:var(--tal-card);
  --fg:var(--tal-fg);
  --ink:var(--tal-ink);
  --line:var(--tal-line);
  --focus:var(--tal-accent);
  --accent:var(--tal-accent);
  --accent-deep:var(--tal-accent-deep);
  --accent-soft:var(--tal-accent-soft);
  --warn:var(--tal-warn);   --warn-bg:var(--tal-warn-bg);   --warn-line:var(--tal-warn-line);
  --ok:var(--tal-ok);       --gold:var(--tal-gold);
  /* Il viola era il colore di lavoro dei tool: sidebar, monogrammi, barre di
     sezione. Ridefinendo le due variabili passa tutto al petrolio. */
  --tal-purple:var(--tal-accent-2);
  --tal-purple-2:var(--tal-accent-deep);
  --tal-teal:var(--tal-accent);
}

/* ---------- 02. Superficie e tipografia ---------------------------------- */

html.tal-tool-page{background:var(--tal-paper) !important}
html.tal-tool-page body{
  background:var(--tal-paper) !important;
  color:var(--tal-fg) !important;
  font-family:var(--tal-sans) !important;
  font-size:15px !important;
  line-height:1.58 !important;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-variant-numeric:tabular-nums;
}
html.tal-tool-page code,
html.tal-tool-page pre,
html.tal-tool-page kbd{font-family:var(--tal-mono) !important}

/* Le superfici scure dei tool: qui il testo resta chiaro. L'elenco serve a
   tenere allineate le due regole che seguono. */
html.tal-tool-page :is(h1,h2,h3):not(:is(header.top,footer.foot,.tal-site-footer,.tal-publication,.summary-bar,.toast,#sidebar,.vp-grid,.cmdbar) *){
  font-family:var(--tal-sans) !important;
  background:none !important;
  border-radius:0 !important;
}
html.tal-tool-page h1:not(:is(header.top,footer.foot,.tal-site-footer,.tal-publication,.summary-bar,.toast,#sidebar,.vp-grid) *){
  font-size:clamp(24px,3vw,30px) !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
  color:var(--tal-fg) !important;
  border:0 !important;
  padding:0 !important;
  margin:0 0 6px !important;
}
html.tal-tool-page h2:not(:is(header.top,footer.foot,.tal-site-footer,.tal-publication,.summary-bar,.toast,#sidebar,.vp-grid) *){
  font-size:18px !important;
  font-weight:650 !important;
  line-height:1.25 !important;
  letter-spacing:-.01em !important;
  color:var(--tal-fg) !important;
  border:0 !important;
  padding:0 !important;
  margin:22px 0 8px !important;
}
html.tal-tool-page h3:not(:is(header.top,footer.foot,.tal-site-footer,.tal-publication,.summary-bar,.toast,#sidebar,.vp-grid) *){
  font-size:14.5px !important;
  font-weight:650 !important;
  color:var(--tal-ink) !important;
  margin:16px 0 5px !important;
}
html.tal-tool-page .panel>:is(h2,h3):first-child{margin-top:0 !important}

html.tal-tool-page :is(header.top,footer.foot,.tal-site-footer,.tal-publication,.summary-bar,.toast,#sidebar,.vp-grid) :is(h1,h2,h3){
  color:#F7F7F5 !important;
  border-bottom-color:rgba(247,247,245,.20) !important;
}
html.tal-tool-page :is(header.top,footer.foot,.tal-site-footer,.tal-publication,.summary-bar,.toast,.vp-grid) :is(.label,.hint,.meta,.muted-empty,.disclaimer){
  color:rgba(247,247,245,.74) !important;
}

/* ---------- 03. Sidebar --------------------------------------------------- */

/* Era navy con un alone viola in alto a sinistra. Ora è petrolio pieno: il
   colore primario del marchio, la stessa famiglia dello sfondo del sito. */
html.tal-tool-page #sidebar,
html.tal-tool-page .sidebar{
  background:
    radial-gradient(circle at 6% 0%,rgba(63,192,221,.30),transparent 40%),
    radial-gradient(circle at 100% 100%,rgba(9,38,49,.62),transparent 48%),
    linear-gradient(180deg,var(--tal-sb-1) 0%,var(--tal-sb-2) 46%,var(--tal-sb-3) 100%) !important;
  border-right:1px solid rgba(247,247,245,.14) !important;
  box-shadow:18px 0 48px rgba(9,38,49,.22) !important;
  scrollbar-color:rgba(247,247,245,.42) transparent;
}

/* Sul petrolio il viola non funziona: lo stato attivo diventa bianco, come la
   pastiglia della lingua nell'intestazione del sito. */
html.tal-tool-page :is(#sidebar,.sidebar) :is(.fs-link,.lipe-link,.workspace-link,.primary-tab).active,
html.tal-tool-page :is(.fs-link,.lipe-link).active{
  color:#fff !important;
  border:1px solid rgba(247,247,245,.16) !important;
  background:rgba(247,247,245,.16) !important;
  box-shadow:inset 3px 0 0 #F7F7F5,0 6px 18px rgba(6,26,34,.20) !important;
}
html.tal-tool-page :is(#sidebar,.sidebar) .primary-tab.active{
  color:#0B2F3D !important;
  border-color:transparent !important;
  background:#F7F7F5 !important;
  box-shadow:0 6px 16px rgba(6,26,34,.28) !important;
}
html.tal-tool-page :is(#sidebar,.sidebar) :is(.fs-link,.lipe-link,.workspace-link,.primary-tab):hover,
html.tal-tool-page :is(.fs-link,.lipe-link):hover{
  background:rgba(247,247,245,.10) !important;
  color:#fff !important;
}
/* Il monogramma è testo scuro su un gradiente: conta l'estremo più scuro, non
   la media. Con `var(--tal-accent-2)` (#1D6A7F) in coda l'angolo in basso a
   destra stava a 2,60:1, sotto la soglia, mentre l'angolo chiaro era a 8,35:1 —
   per questo l'audit di contrasto non lo aveva mai visto: risolveva il colore
   di fondo e non i gradienti. Il secondo stop si ferma ora a #3FA6C0 (5,64:1):
   resta più scuro del primo, quindi il rilievo del gradiente non si perde.
   Non usare qui --tal-accent-2: quella variabile serve altrove su fondi chiari
   e non va spostata per un caso che riguarda solo questa pastiglia. */
html.tal-tool-page .sb-logo{
  background:linear-gradient(135deg,#4FCBE4 0%,#3FA6C0 100%) !important;
  border:1px solid rgba(247,247,245,.26) !important;
  color:#08252F !important;
  border-radius:11px !important;
  box-shadow:0 10px 24px rgba(6,26,34,.24) !important;
}
html.tal-tool-page .sb-toggle{
  background:linear-gradient(135deg,var(--tal-accent),var(--tal-accent-deep)) !important;
  border-color:rgba(247,247,245,.20) !important;
  color:#fff !important;
}
/* I grigi freddi perdono contrasto sul petrolio. */
html.tal-tool-page :is(.sb-cap,.sb-groupcap){
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgba(247,247,245,.72) !important;
}
html.tal-tool-page .sb-foot{color:rgba(247,247,245,.66) !important;border-top-color:rgba(247,247,245,.14) !important}
html.tal-tool-page .sb-brandtext b{color:#fff !important}
html.tal-tool-page .sb-brandtext small{color:rgba(247,247,245,.74) !important}
html.tal-tool-page .sb-swap{color:rgba(247,247,245,.82) !important}
html.tal-tool-page .sb-context{
  border:1px solid rgba(247,247,245,.12) !important;
  background:rgba(247,247,245,.075) !important;
  color:#C7CBD3 !important;
}
html.tal-tool-page .sb-context:hover{
  border-color:rgba(247,247,245,.42) !important;
  background:rgba(247,247,245,.115) !important;
}
html.tal-tool-page .primary-nav{
  border:1px solid rgba(247,247,245,.11) !important;
  background:rgba(247,247,245,.055) !important;
}

/* Attenzione: .workspace-nav è una barra chiara sopra al contenuto in un tool
   e la lista dentro alla sidebar scura in un altro. Solo la prima va schiarita. */
html.tal-tool-page .workspace-nav:not(:is(#sidebar,.sidebar) *){
  background:var(--tal-card) !important;
  border-bottom:1px solid var(--tal-line) !important;
}

/* ---------- 04. Barra comandi e barra applicativa ------------------------ */

html.tal-tool-page .appbar:not(#sidebar){
  background:rgba(246,245,241,.94) !important;
  border-bottom:1px solid var(--tal-line) !important;
  -webkit-backdrop-filter:saturate(120%) blur(10px);
  backdrop-filter:saturate(120%) blur(10px);
}
/* La barra comandi del Fascicolo è volutamente scura, con testo chiaro e
   pastiglia di salvataggio verde su fondo scuro: schiarirla rendeva il
   sottotitolo bianco su bianco. Resta come l'ha disegnata il tool. */

/* ---------- 05. Pannelli e schede ---------------------------------------- */

html.tal-tool-page .panel{
  background:var(--tal-card) !important;
  border:1px solid var(--tal-line-2) !important;
  border-left:4px solid var(--tal-ink) !important;
  border-radius:var(--tal-r-lg) !important;
  padding:20px 22px !important;
  margin-bottom:14px !important;
  box-shadow:var(--tal-sh-2) !important;
}
html.tal-tool-page :is(.card,.box,.tile,.nav-card,.choice-card,.tool-card){
  background:var(--tal-card) !important;
  border:1px solid var(--tal-line-2) !important;
  border-radius:var(--tal-r-lg) !important;
  box-shadow:var(--tal-sh-2) !important;
}
html.tal-tool-page .panel-title{font-size:16px !important;font-weight:650 !important;margin-bottom:4px !important}
html.tal-tool-page .rule{border-color:var(--tal-line) !important}

/* ---------- 06. Bottoni --------------------------------------------------- */

html.tal-tool-page :is(.btn,button.btn,a.btn){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:40px !important;
  padding:9px 15px !important;
  border:1px solid var(--tal-ink) !important;
  border-radius:var(--tal-r) !important;
  background:var(--tal-ink) !important;
  color:#fff !important;
  font-family:var(--tal-sans) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow:var(--tal-sh-1) !important;
  transition:transform 140ms var(--tal-ease),box-shadow 200ms var(--tal-ease),
             background 140ms var(--tal-ease),border-color 140ms var(--tal-ease);
}
html.tal-tool-page .btn:hover{transform:translateY(-1px) !important;box-shadow:0 5px 14px rgba(0,0,0,.12) !important}
html.tal-tool-page .btn:active{transform:translateY(0) scale(.99) !important}
html.tal-tool-page .btn:is([disabled],:disabled){opacity:.42 !important;transform:none !important;box-shadow:none !important;cursor:not-allowed}

/* L'azione si riconosce dal colore prima che dall'etichetta. */
html.tal-tool-page :is(.btn.add,.btn.add-action){
  background:linear-gradient(135deg,var(--tal-add-1),var(--tal-add-2)) !important;
  border-color:var(--tal-add-line) !important;
  color:var(--tal-add-ink) !important;
  box-shadow:0 5px 14px rgba(76,181,128,.14) !important;
}
html.tal-tool-page .btn.edit{
  background:linear-gradient(135deg,var(--tal-edit-1),var(--tal-edit-2)) !important;
  border-color:var(--tal-edit-2) !important;
  color:var(--tal-edit-ink) !important;
  box-shadow:0 5px 14px rgba(166,90,31,.16) !important;
}
html.tal-tool-page .btn.accent{
  background:linear-gradient(135deg,var(--tal-accent-2),var(--tal-accent-deep)) !important;
  border-color:transparent !important;
  color:#fff !important;
}
html.tal-tool-page .btn.ghost{background:#fff !important;color:var(--tal-fg) !important;border-color:var(--tal-ink-4) !important}
html.tal-tool-page .btn.secondary{background:#fff !important;color:var(--tal-fg) !important;border-color:var(--tal-fg) !important}
html.tal-tool-page .btn.danger{background:#fff !important;color:var(--tal-warn) !important;border-color:var(--tal-warn-line) !important}
html.tal-tool-page :is(.btn.ghost,.btn.secondary):hover{background:var(--tal-accent-soft) !important;border-color:var(--tal-accent) !important;color:var(--tal-accent-deep) !important}
html.tal-tool-page .btn.sm{min-height:36px !important;padding:8px 12px !important;font-size:9.5px !important}
html.tal-tool-page .btn-row{display:flex;flex-wrap:wrap;gap:8px !important}

/* ---------- 07. Campi ----------------------------------------------------- */

html.tal-tool-page input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.tal-tool-page select,
html.tal-tool-page textarea{
  font-family:var(--tal-sans) !important;
  font-size:13.5px !important;
  line-height:1.4 !important;
  min-height:38px !important;
  padding:8px 11px !important;
  border:1px solid var(--tal-line-2) !important;
  border-radius:var(--tal-r-sm) !important;
  background:var(--tal-card) !important;
  color:var(--tal-fg) !important;
  transition:border-color 140ms ease,box-shadow 140ms ease;
}
html.tal-tool-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea):hover{border-color:var(--tal-ink-4) !important}
html.tal-tool-page :is(input,select,textarea):focus{
  outline:none !important;
  border-color:var(--tal-accent) !important;
  box-shadow:0 0 0 3px rgba(20,83,104,.16) !important;
}
html.tal-tool-page :is(input[type=checkbox],input[type=radio]){accent-color:var(--tal-accent)}
html.tal-tool-page .field{display:flex;flex-direction:column;gap:6px !important}
html.tal-tool-page :is(.field>.label,.label):not(:is(#sidebar,.sidebar,.tal-publication) *){
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--tal-ink-3) !important;
}
html.tal-tool-page .hint{font-size:11.5px !important;line-height:1.5 !important;color:var(--tal-ink-3) !important}

/* ---------- 08. Tabelle --------------------------------------------------- */

/* Nel Fascicolo l'intestazione non è una fascia scura ma un'etichetta piccola:
   in una tabella lunga pesa meno e lascia parlare i dati. */
html.tal-tool-page table{
  width:100%;
  border-collapse:collapse !important;
  background:var(--tal-card) !important;
  font-size:11.5px !important;
}
html.tal-tool-page th{
  background:transparent !important;
  color:var(--tal-ink-3) !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-align:left;
  padding:8px 7px !important;
  border-bottom:1px solid var(--tal-line-2) !important;
}
html.tal-tool-page td{
  padding:8px 7px !important;
  border-bottom:1px solid var(--tal-line) !important;
  color:var(--tal-fg) !important;
  vertical-align:top;
}
html.tal-tool-page tbody tr:hover td{background:var(--tal-accent-soft) !important}

/* ---------- 09. Stati ----------------------------------------------------- */

html.tal-tool-page .badge{
  display:inline-flex;
  align-items:center;
  border-radius:var(--tal-r-pill) !important;
  padding:3px 8px !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  background:var(--tal-sunken) !important;
  color:var(--tal-ink-2) !important;
}
html.tal-tool-page :is(.badge.ok,.badge.saved){background:var(--tal-ok-bg) !important;color:var(--tal-ok) !important}
html.tal-tool-page :is(.badge.warn,.badge.danger){background:var(--tal-warn-bg) !important;color:var(--tal-warn) !important}
html.tal-tool-page .badge.info{background:var(--tal-info-bg) !important;color:var(--tal-info) !important}
/* Queste pastiglie vivono dentro superfici scure: la velatura chiara al 14%
   basta a staccarle dal fondo e il testo chiaro ci si legge sopra. */
html.tal-tool-page :is(.tab.active .badge,:is(#sidebar,.sidebar,.summary-bar,.tal-publication,header.top) .badge){
  background:rgba(247,247,245,.14) !important;
  color:#F7F7F5 !important;
}

/* `.badge.dark` invece era nello stesso elenco solo per il nome, ma la usa il
   LIPE dentro `.panel-heading`, cioè su una scheda **bianca**: il risultato era
   testo #F7F7F5 su una velatura chiara sopra il bianco, 1,07:1, di fatto
   invisibile. Il nome della classe prometteva una pastiglia scura: ora lo è
   davvero, e il contrasto non dipende più dal fondo su cui capita. */
html.tal-tool-page .badge.dark{
  background:var(--tal-ink) !important;
  color:#F7F7F5 !important;
}

html.tal-tool-page .notice{
  padding:12px 14px !important;
  border-radius:var(--tal-r) !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
}
html.tal-tool-page .notice.info{background:var(--tal-info-bg) !important;color:var(--tal-info) !important;border:1px solid var(--tal-info-line) !important}
html.tal-tool-page .notice.warn{background:var(--tal-gold-bg) !important;color:var(--tal-gold) !important;border:1px solid var(--tal-gold-line) !important}
html.tal-tool-page .notice.ok{background:var(--tal-ok-bg) !important;color:var(--tal-ok) !important;border:1px solid var(--tal-ok-line) !important}

html.tal-tool-page .summary-bar{
  background:var(--tal-ink) !important;
  color:#fff !important;
  border-radius:var(--tal-r-lg) !important;
  box-shadow:var(--tal-sh-2) !important;
  font-size:12.5px !important;
}
html.tal-tool-page .toast{
  background:var(--tal-ink) !important;
  color:#fff !important;
  border-radius:var(--tal-r) !important;
  box-shadow:var(--tal-sh-3) !important;
  font-size:12.5px !important;
}
html.tal-tool-page :is(.muted-empty,.meta):not(:is(#sidebar,.sidebar,.tal-publication,footer.foot) *){color:var(--tal-ink-3) !important}
html.tal-tool-page .disclaimer:not(:is(footer.foot,.tal-publication) *){font-size:11.5px !important;line-height:1.55 !important;color:var(--tal-ink-3) !important}

/* I riquadri informativi dei tool erano tinte viola o menta diverse fra loro. */
html.tal-tool-page :is(.demo-card,.demo-guide,.mapping-help,.factor-box.result,.v16-exception-guide,.advanced-guide>summary){
  background:linear-gradient(135deg,rgba(20,83,104,.07),rgba(20,83,104,.04)) !important;
  border-color:rgba(20,83,104,.20) !important;
}
html.tal-tool-page .demo-card{border-top-color:var(--tal-accent) !important}
html.tal-tool-page :is(.advanced-head.purple,.reclass-section.sp .reclass-head){
  background:linear-gradient(110deg,var(--tal-accent),var(--tal-accent-deep)) !important;
}
html.tal-tool-page .v16-scope-tag.advanced{background:var(--tal-accent-soft) !important;color:var(--tal-accent-deep) !important}

/* ---------- 10. Finestre --------------------------------------------------- */

html.tal-tool-page .modal{
  background:#fff !important;
  border-radius:var(--tal-r-lg) !important;
  box-shadow:0 26px 74px rgba(0,0,0,.30) !important;
  overflow:hidden;
}
html.tal-tool-page .modal-head{border-bottom:1px solid var(--tal-line-2) !important}
html.tal-tool-page .modal-foot{border-top:1px solid var(--tal-line-2) !important;background:#FBFAF8 !important}

/* ---------- 11. Avviso d'uso ---------------------------------------------- */

/* La striscia compatta del Fascicolo resta: una riga, con il pulsante Dettagli.
   Il vecchio riquadro da tre righe degli altri tool no. */
html.tal-tool-page .tal-tool-safety:not(.tal-tool-safety-compact){display:none !important}
html.tal-tool-page .tal-tool-safety-compact{
  border:1px solid rgba(20,83,104,.24) !important;
  border-left:4px solid var(--tal-accent) !important;
  border-radius:10px !important;
  background:var(--tal-accent-soft) !important;
  color:#20333A !important;
}
html.tal-tool-page .tal-safety-detail{
  border:1px solid rgba(20,83,104,.32) !important;
  border-radius:var(--tal-r-sm) !important;
  background:#fff !important;
  color:var(--tal-accent) !important;
}

/* Barra di intestazione: nei tool sta accanto alla sidebar, quindi è più
   stretta della finestra e i media query sulla viewport non la vedono. Senza
   questo, il marchio esteso finiva sopra alle voci di menu. */
html.tal-tool-page .tal-global-header{container-type:inline-size}
html.tal-tool-page .tal-gh-frame{
  min-height:60px !important;
  gap:14px !important;
  border-radius:var(--tal-r-lg) !important;
  background:linear-gradient(140deg,rgba(14,22,36,.97),rgba(16,27,43,.97)) !important;
  border:1px solid rgba(247,247,245,.14) !important;
}
html.tal-tool-page .tal-gh-brand-copy{
  min-width:0 !important;
  max-width:260px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:10.5px !important;
  letter-spacing:.16em !important;
}
html.tal-tool-page .tal-gh-nav{min-width:0 !important;overflow-x:auto !important;scrollbar-width:none}
html.tal-tool-page .tal-gh-nav::-webkit-scrollbar{display:none}
html.tal-tool-page :is(.tal-gh-nav a,.tal-gh-nav button){font-size:12px !important;font-weight:600 !important;white-space:nowrap}
html.tal-tool-page :is(.tal-gh-nav a:hover,.tal-gh-nav a.active,.tal-gh-nav a[aria-current="page"]){
  background:rgba(20,83,104,.42) !important;color:#fff !important;
}
html.tal-tool-page :is(.tal-gh-lang a.active,.tal-gh-lang a[aria-current="page"]){background:#F7F7F5 !important;color:#11131A !important}
html.tal-tool-page .tal-gh-logo{filter:drop-shadow(0 8px 18px rgba(20,83,104,.36)) !important}
@container (max-width:960px){
  html.tal-tool-page .tal-gh-brand-copy{display:none !important}
}

/* Il pulsante del menu resta sullo schermo mentre la pagina scorre: da pillola
   larga a quadrato di 44px copre meno della metà del testo. L'etichetta resta
   nel DOM, quindi il nome accessibile non cambia. */
@media(max-width:980px){
  html.tal-tool-page .sb-toggle{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    padding:0 !important;
    gap:0 !important;
    justify-content:center !important;
    border-radius:12px !important;
    font-size:0 !important;
    box-shadow:var(--tal-sh-3) !important;
  }
  html.tal-tool-page .sb-toggle::before{content:"\2630";font-size:17px;line-height:1;color:#fff}
}

/* ---------- 12. Focus e stampa -------------------------------------------- */

html.tal-tool-page :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--tal-accent) !important;
  outline-offset:2px !important;
}

@media print{
  html.tal-tool-page,
  html.tal-tool-page body{background:#fff !important}
  html.tal-tool-page .panel{box-shadow:none !important;border-color:#c9c6c0 !important;break-inside:avoid}
  html.tal-tool-page th{
    background:#e9e6e0 !important;
    color:#14161B !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* ---------- 13. Schermata d'ingresso comune ------------------------------- */

/* Tutti e quattro i tool aprono su Clienti: in cima trovano le stesse tre
   strade, con le stesse parole. Le carte premono i comandi che il tool ha
   gia', quindi non introducono un secondo modo di fare le stesse cose. */
html.tal-tool-page .tal-start{
  margin:0 0 22px;
  padding:18px 20px 16px;
  border:1px solid var(--tal-line-2);
  border-left:4px solid var(--tal-accent);
  border-radius:var(--tal-r-lg);
  background:var(--tal-card);
  box-shadow:var(--tal-sh-2);
}
html.tal-tool-page .tal-start-lead{
  margin:0 0 12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tal-ink-3);
}
html.tal-tool-page .tal-start-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
html.tal-tool-page .tal-start-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"ic tit" "ic txt";
  align-items:start;
  gap:2px 12px;
  width:100%;
  padding:14px 16px;
  text-align:left;
  border:1px solid var(--tal-line-2);
  border-radius:var(--tal-r);
  background:var(--tal-paper);
  cursor:pointer;
  transition:transform 140ms var(--tal-ease),border-color 140ms var(--tal-ease),
             background 140ms var(--tal-ease),box-shadow 200ms var(--tal-ease);
}
html.tal-tool-page .tal-start-card:hover{
  transform:translateY(-2px);
  border-color:var(--tal-accent);
  background:var(--tal-accent-soft);
  box-shadow:var(--tal-sh-2);
}
html.tal-tool-page .tal-start-ic{
  grid-area:ic;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--tal-r-sm);
  background:var(--tal-accent);
  color:#fff;
  font-size:15px;
}
html.tal-tool-page .tal-start-card b{
  grid-area:tit;
  font-size:14px;
  font-weight:650;
  color:var(--tal-fg);
}
html.tal-tool-page .tal-start-card>span:not(.tal-start-ic){
  grid-area:txt;
  font-size:12px;
  line-height:1.5;
  color:var(--tal-ink-3);
}
html.tal-tool-page .tal-start-demo{
  margin-top:12px;
  padding:0;
  border:0;
  background:none;
  color:var(--tal-accent);
  font:650 12px var(--tal-sans);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
html.tal-tool-page .tal-start-demo:hover{color:var(--tal-accent-deep)}

/* ---------- 14. Barra comandi condivisa ----------------------------------- */

/* Il Fascicolo ha la sua, scura e con i propri comandi. Questa la raggiunge
   sugli altri tre: chi è il cliente attivo e se il lavoro è al sicuro. */
html.tal-tool-page .tal-cmdbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:12px clamp(18px,3.5vw,44px) 14px;
  padding:10px 14px;
  border:1px solid rgba(247,247,245,.16);
  border-radius:12px;
  background:rgba(14,22,36,.95);
  color:#F7F7F5;
  box-shadow:var(--tal-sh-2);
}
html.tal-tool-page .tal-cmdbar .cmd-context{min-width:0;flex:1 1 300px}
html.tal-tool-page .tal-cmdbar .cmd-context b{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#fff;
  overflow-wrap:anywhere;
}
html.tal-tool-page .tal-cmdbar .cmd-context span{
  display:block;
  margin-top:2px;
  font-size:10px;
  color:#C5CAD2;
}
html.tal-tool-page .tal-save-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:var(--tal-r-pill);
  border:1px solid rgba(95,181,154,.34);
  background:rgba(95,181,154,.14);
  color:#BFE6D8;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}
html.tal-tool-page .tal-save-pill.is-failed{
  border-color:rgba(232,185,170,.5);
  background:rgba(165,61,40,.22);
  color:#F3C9BC;
}
@media(max-width:760px){
  html.tal-tool-page .tal-cmdbar{margin-inline:12px;padding:9px 11px}
  html.tal-tool-page .tal-cmdbar .cmd-context{flex:1 1 100%}
}