/* =========================================================================
 *  IL PORTICO — il portale delle API dell'ecosistema XFS Bot.
 *
 *  Stessa tavolozza della pagina di presentazione (/home): chi arriva qui
 *  cliccando da li' non deve avere l'impressione di essere finito su un
 *  altro sito. Nessun carattere preso da fuori, nessuna libreria: una
 *  pagina che spiega come si fa una chiamata HTTP non puo' pesare un mega
 *  per dirlo.
 * ===================================================================== */
:root{
  --sfondo:#070b12; --sfondo2:#0b111a; --scatola:#0d151e; --bordo:#1b2836;
  --testo:#dbe6f2; --chiaro:#eaf2fb; --fioco:#8fa4bb; --spento:#5f7793;
  --ciano:#4ad9e4; --verde:#3ddc84; --ambra:#f0b429; --rosa:#ff4d6d; --viola:#a78bfa;
  --display:'Segoe UI Semibold','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Consolas,'Courier New',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; background:var(--sfondo); color:var(--testo);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--ciano); text-decoration:none}
a:hover{text-decoration:underline}
.dentro{max-width:1120px; margin:0 auto; padding:0 22px}
.stretto{max-width:880px}

/* -- barra in alto ---------------------------------------------------- */
header.cima{
  position:sticky; top:0; z-index:40;
  background:rgba(7,11,18,.92); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(74,217,228,.14);
}
.cima .dentro{display:flex; align-items:center; gap:18px; height:62px}
.marchio{
  display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:800; letter-spacing:3.2px; font-size:14px; color:var(--chiaro);
}
.marchio:hover{text-decoration:none}
.marchio .segno{color:var(--ciano); font-size:20px; text-shadow:0 0 16px rgba(74,217,228,.65)}
nav.voci{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
nav.voci a{
  position:relative; color:var(--fioco); font-family:var(--display);
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
}
nav.voci a::after{
  content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--ciano); transition:width .28s ease;
}
nav.voci a:hover,nav.voci a.qui{color:var(--chiaro); text-decoration:none}
nav.voci a.qui::after,nav.voci a:hover::after{width:100%}

/* -- apertura ---------------------------------------------------------- */
.apertura{
  position:relative; overflow:hidden; padding:78px 0 58px; text-align:center;
  border-bottom:1px solid var(--bordo);
}
.alone{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 26% 34%,rgba(74,217,228,.16),transparent 62%),
    radial-gradient(ellipse 60% 52% at 76% 60%,rgba(167,139,250,.12),transparent 64%);
}
.apertura .dentro{position:relative}
.apertura h1{
  font-family:var(--display); font-size:clamp(34px,5.4vw,58px); line-height:1.1;
  margin:0 0 16px; letter-spacing:-.6px; color:var(--chiaro);
}
.apertura h1 em{font-style:normal; color:var(--ciano)}
.apertura .sottotitolo{
  font-family:var(--display); letter-spacing:2.6px; text-transform:uppercase;
  font-size:11.5px; color:var(--spento); margin:0 0 22px;
}
.apertura .motto{max-width:760px; margin:0 auto 10px; font-size:17.5px; color:var(--testo)}
.apertura .sottomotto{max-width:760px; margin:0 auto; color:var(--fioco); font-size:15.5px}
.bottoni{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.tasto{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:12px;
  font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:.6px;
  border:1px solid var(--bordo); color:var(--chiaro); background:var(--scatola);
}
.tasto:hover{text-decoration:none; border-color:var(--ciano)}
.tasto-primo{
  color:#04121a; background:linear-gradient(135deg,var(--ciano),#2fb4c8); border-color:transparent;
  box-shadow:0 6px 20px rgba(74,217,228,.24);
}

/* -- sezioni ----------------------------------------------------------- */
section{padding:56px 0; border-bottom:1px solid var(--bordo)}
section:last-of-type{border-bottom:0}
.etichetta{
  font-family:var(--display); font-size:10.5px; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--ciano); margin-bottom:10px;
}
h2{font-family:var(--display); font-size:clamp(24px,3.2vw,34px); margin:0 0 14px; color:var(--chiaro); letter-spacing:-.3px}
h3{font-family:var(--display); font-size:18px; margin:0 0 8px; color:var(--chiaro)}
.occhiello{color:var(--fioco); max-width:820px; font-size:16.5px; margin:0 0 26px}

/* -- scatole ----------------------------------------------------------- */
.riq{
  background:var(--scatola); border:1px solid var(--bordo); border-radius:14px;
  padding:20px 22px; margin-bottom:16px;
}
.riq.acceso{border-color:rgba(74,217,228,.4); box-shadow:0 0 0 1px rgba(74,217,228,.06)}
.griglia{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* -- l'illustrazione dei tre passi -------------------------------------- */
.passi{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:26px 0}
.passo{
  position:relative; background:var(--scatola); border:1px solid var(--bordo);
  border-radius:14px; padding:22px 20px 20px;
}
.passo .num{
  position:absolute; top:-13px; left:20px; width:28px; height:28px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--ciano),#2fb4c8); color:#04121a;
  font-family:var(--display); font-weight:800; font-size:14px;
}
.passo p{margin:6px 0 0; color:var(--fioco); font-size:14.5px}

/* Il disegnino: il tuo sito -> la chiamata -> il nodo. Fatto di div. */
.disegno{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center;
  margin:30px 0 6px;
}
.disegno .casella{
  flex:1 1 220px; min-width:210px; background:var(--scatola); border:1px solid var(--bordo);
  border-radius:14px; padding:18px; text-align:center;
}
.disegno .casella .ic{font-size:30px; line-height:1; margin-bottom:8px; display:block}
.disegno .casella b{display:block; font-family:var(--display); color:var(--chiaro); margin-bottom:4px}
.disegno .casella span{font-size:13.5px; color:var(--fioco)}
.disegno .freccia{
  flex:0 0 78px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--ciano); font-size:12px; text-align:center; padding:0 4px;
}
.disegno .freccia .linea{
  width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--ciano),transparent);
  margin:8px 0; position:relative;
}
.disegno .freccia .linea::after{
  content:'\25B6'; position:absolute; right:-2px; top:-7px; font-size:11px; color:var(--ciano);
}
.disegno .freccia code{font-size:10.5px; color:var(--spento); word-break:break-all}
@media(max-width:760px){
  .disegno .freccia{flex:1 1 100%; height:52px}
  .disegno .freccia .linea{width:2px; height:100%; background:linear-gradient(180deg,transparent,var(--ciano),transparent)}
  .disegno .freccia .linea::after{content:'\25BC'; right:-5px; top:auto; bottom:-4px}
}

/* -- codice ------------------------------------------------------------ */
pre.codice{
  margin:0; background:#050a10; border:1px solid var(--bordo); border-radius:10px;
  padding:14px 16px; overflow:auto; font-family:var(--mono); font-size:12.8px;
  line-height:1.6; color:#cfe3f5; white-space:pre; max-height:420px;
}
pre.codice.esito{border-color:rgba(61,220,132,.3)}
pre.codice.male{border-color:rgba(255,77,109,.35); color:#ffc9d3}
code{font-family:var(--mono); font-size:.92em; color:var(--ciano); background:rgba(74,217,228,.07);
     padding:1px 5px; border-radius:5px}
pre.codice code{background:none; padding:0; color:inherit}

/* -- le linguette del ricettario --------------------------------------- */
.ling{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.ling button{
  background:transparent; border:1px solid var(--bordo); color:var(--fioco);
  border-radius:8px; padding:5px 12px; font-size:12px; cursor:pointer;
  font-family:var(--display); letter-spacing:.5px;
}
.ling button.sel{border-color:var(--ciano); color:var(--chiaro); background:rgba(74,217,228,.09)}
.ling button:hover{color:var(--chiaro)}

/* -- la ricetta -------------------------------------------------------- */
.ricetta{background:var(--scatola); border:1px solid var(--bordo); border-radius:14px; margin-bottom:14px; overflow:hidden}
.ricetta > .testa{
  display:flex; align-items:center; gap:10px; padding:14px 18px; flex-wrap:wrap;
  border-bottom:1px solid var(--bordo); cursor:pointer; user-select:none;
}
.ricetta > .testa:hover{background:rgba(74,217,228,.04)}
.ricetta .verbo{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:1px;
  padding:3px 8px; border-radius:6px; background:rgba(74,217,228,.14); color:var(--ciano);
}
.ricetta .verbo.POST{background:rgba(61,220,132,.14); color:var(--verde)}
.ricetta .verbo.PUT{background:rgba(240,180,41,.14); color:var(--ambra)}
.ricetta .verbo.DELETE{background:rgba(255,77,109,.14); color:var(--rosa)}
.ricetta .via{font-family:var(--mono); font-size:13px; color:var(--chiaro); word-break:break-all}
.ricetta .nome{color:var(--fioco); font-size:14px; margin-left:auto; text-align:right}
.ricetta .bolli{display:flex; gap:6px}
.bollo{
  font-size:10px; letter-spacing:.8px; text-transform:uppercase; font-family:var(--display);
  padding:2px 7px; border-radius:20px; border:1px solid var(--bordo); color:var(--spento);
}
.bollo.pubblica{border-color:rgba(61,220,132,.4); color:var(--verde)}
.bollo.chiave{border-color:rgba(74,217,228,.4); color:var(--ciano)}
.bollo.finta{border-color:rgba(240,180,41,.45); color:var(--ambra)}
.bollo.fra{border-color:rgba(167,139,250,.45); color:var(--viola)}
.ricetta > .corpo{padding:16px 18px; display:none}
.ricetta.aperta > .corpo{display:block}
.ricetta .spiega{color:var(--fioco); font-size:14.6px; margin:0 0 14px}
.ricetta .azioni{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.bt{
  background:var(--scatola); border:1px solid var(--bordo); color:var(--chiaro);
  border-radius:9px; padding:7px 15px; font-size:12.5px; cursor:pointer;
  font-family:var(--display); letter-spacing:.4px;
}
.bt:hover{border-color:var(--ciano)}
.bt.primo{background:linear-gradient(135deg,var(--ciano),#2fb4c8); color:#04121a; border-color:transparent; font-weight:800}
.bt:disabled{opacity:.5; cursor:default}
.tempo{font-size:12px; color:var(--spento); font-family:var(--mono)}
.esitoRiga{font-size:12.5px; font-family:var(--mono); margin:12px 0 6px}
.esitoRiga .si{color:var(--verde)} .esitoRiga .no{color:var(--rosa)} .esitoRiga .ni{color:var(--ambra)}

/* -- tabelle ----------------------------------------------------------- */
table.dati{width:100%; border-collapse:collapse; font-size:14px}
table.dati th,table.dati td{padding:8px 10px; border-bottom:1px solid var(--bordo); text-align:left; vertical-align:top}
table.dati th{color:var(--spento); font-family:var(--display); font-size:11px; letter-spacing:1.4px; text-transform:uppercase}
table.dati td.mono{font-family:var(--mono); font-size:12.6px; color:var(--fioco)}

/* -- l'albero ---------------------------------------------------------- */
.albero{font-family:var(--mono); font-size:13.4px; line-height:1.85}
.albero .ramo{padding-left:20px; border-left:1px dashed rgba(143,164,187,.22); margin-left:6px}
.albero .nodo{display:flex; align-items:center; gap:7px; cursor:pointer; padding:1px 4px; border-radius:6px}
.albero .nodo:hover{background:rgba(74,217,228,.07)}
.albero .nodo .frecc{width:12px; color:var(--spento); display:inline-block}
.albero .nodo .nm{color:var(--chiaro)}
.albero .nodo .pes{color:var(--spento); font-size:11.6px; margin-left:auto}
.albero .foglia{display:flex; align-items:center; gap:7px; padding:1px 4px}
.albero .foglia .nm{color:var(--fioco)}
.albero .vuoto{color:var(--spento); font-style:italic; padding-left:26px}

/* -- avvisi ------------------------------------------------------------ */
.nota{
  display:flex; gap:14px; align-items:flex-start; background:rgba(74,217,228,.05);
  border:1px solid rgba(74,217,228,.22); border-radius:12px; padding:16px 18px; margin:18px 0;
}
.nota.attenzione{background:rgba(240,180,41,.05); border-color:rgba(240,180,41,.28)}
.nota.buona{background:rgba(61,220,132,.05); border-color:rgba(61,220,132,.25)}
.nota .ic{font-size:22px; line-height:1.2}
.nota p{margin:0; font-size:14.6px; color:var(--fioco)}
.nota p b{color:var(--chiaro)}
.nota p + p{margin-top:8px}

/* -- la fascia dello stato del nodo ------------------------------------ */
.fascia{
  background:var(--sfondo2); border-bottom:1px solid var(--bordo);
  font-size:13px; padding:9px 0;
}
.fascia .dentro{display:flex; gap:12px; align-items:center; flex-wrap:wrap; color:var(--fioco)}
.fascia b{color:var(--chiaro); font-family:var(--mono); font-size:12.5px}
.pallino{width:8px; height:8px; border-radius:50%; background:var(--spento); display:inline-block}
.pallino.si{background:var(--verde); box-shadow:0 0 8px rgba(61,220,132,.7)}
.pallino.no{background:var(--rosa); box-shadow:0 0 8px rgba(255,77,109,.7)}

/* -- il dominio non ha una chiave dimostrativa ------------------------- */
.senzachiave{
  background:rgba(240,180,41,.09); border-bottom:1px solid rgba(240,180,41,.3);
  font-size:13.5px; padding:14px 0; color:var(--fioco);
}
.senzachiave b{color:var(--chiaro)}
.senzachiave code{font-family:var(--mono); font-size:12.5px; color:var(--ambra)}
.senzachiave .riga{display:flex; gap:9px; margin-top:11px; flex-wrap:wrap; align-items:center}
.senzachiave input{
  flex:1 1 320px; min-width:0; background:#050a10; color:var(--chiaro);
  border:1px solid var(--bordo); border-radius:8px; padding:8px 12px;
  font-family:var(--mono); font-size:12.5px;
}
.senzachiave input:focus{outline:none; border-color:var(--ambra)}

/* -- piede ------------------------------------------------------------- */
footer{padding:34px 0; color:var(--spento); font-size:13.5px; text-align:center}
footer a{color:var(--fioco)}

/* -- riquadri incorporati ---------------------------------------------- */
.vetrina{background:#0a1119; border:1px solid var(--bordo); border-radius:12px; padding:16px; min-height:80px}
.vetrina .vuoto{color:var(--spento); font-size:13.5px; margin:0}

@media(max-width:760px){
  nav.voci{display:none}
  section{padding:44px 0}
  .ricetta .nome{margin-left:0; text-align:left; width:100%}
}