/* Tablox — il cameriere digitale. Variabili e pezzi di base del marchio (vedi MARCHIO.md). */
:root {
  --tx-fondo: #F5F5F7;
  --tx-bianco: #FFFFFF;
  --tx-grafite: #3A3A3C;
  --tx-tenue: #6E6E73;
  --tx-linea: #E3E3E8;
  --tx-linea-forte: #D2D2D7;
  --tx-corallo: #FF6F61;
  --tx-corallo-chiaro: #FF8F7A;
  --tx-corallo-scuro: #FF4E3D;
  --tx-corallo-pulsante: #FF5A49;
  --tx-corallo-testo: #C8321F;
  --tx-corallo-chip: #FFE9E4;
  --tx-corallo-tinta: #FFC9BE;
  --tx-attesa: #FFB547;
  --tx-sfumatura: linear-gradient(135deg, #FF8F7A, #FF4E3D);
  --tx-carattere: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tx-ombra: 0 20px 40px rgba(58, 58, 60, 0.10);
  --tx-raggio: 22px;
  /* i pochi colori di servizio che cambiano con l'aspetto scuro: il testo sopra una superficie grafite,
     la testata di Vetro, il velo dei fogli, la sedia prenotata del marchio, il fondo delle bozze «in attesa» */
  --tx-inverso: #FFFFFF;
  --tx-testata: rgba(245, 245, 247, 0.82);
  --tx-velo: rgba(58, 58, 60, 0.4);
  --tx-sedia: #C8321F;
  --tx-attesa-chip: #FFF6E5;
}
/* Inter in casa (caratteri/inter-latin.woff2 e inter-latin-ext.woff2, il carattere variabile 100–900 di Google Fonts,
   sottoinsiemi latin e latin-ext): arriva anche quando il proxy dei caratteri non risponde. Il ripiego resta nel --tx-carattere. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(caratteri/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(caratteri/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Aspetto scuro: solo i token, e solo sulle pagine del ristoratore che mettono la classe tx-aspetto-auto su <html>
   (pannello, agenda, editor). Mai nero puro: fondo grafite scuro, testi #F5F5F7, il corallo non cambia; il corallo dei
   testi piccoli e la sedia prenotata passano al corallo chiaro, come su tablox-su-scuro.svg. Il menù del cliente ha il suo tema. */
@media (prefers-color-scheme: dark) {
  html.tx-aspetto-auto {
    color-scheme: dark;
    --tx-fondo: #1C1C1E; --tx-bianco: #2C2C2E; --tx-grafite: #F5F5F7; --tx-tenue: #AEAEB2; --tx-linea: #3A3A3C; --tx-linea-forte: #48484A;
    --tx-corallo-testo: #FFB4A8; --tx-corallo-chip: #3D2622; --tx-ombra: 0 20px 40px rgba(0, 0, 0, 0.45);
    --tx-inverso: #1C1C1E; --tx-testata: rgba(28, 28, 30, 0.82); --tx-velo: rgba(28, 28, 30, 0.6); --tx-sedia: #FFB4A8; --tx-attesa-chip: #3D3120;
  }
  html.tx-aspetto-auto .tx-vetro { background: rgba(44, 44, 46, 0.6); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--tx-ombra); }
}
.tx-pagina { background: var(--tx-fondo); color: var(--tx-grafite); font-family: var(--tx-carattere); -webkit-font-smoothing: antialiased; }
.tx-scheda { background: var(--tx-bianco); border-radius: var(--tx-raggio); }
.tx-vetro { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
            border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), var(--tx-ombra); }
.tx-pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 0;
               background: var(--tx-corallo-pulsante); color: #FFFFFF; font: 600 15px/1 var(--tx-carattere); text-decoration: none; cursor: pointer; }
.tx-pulsante.secondario { background: transparent; color: var(--tx-grafite); border: 1px solid var(--tx-grafite); }
.tx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tx-corallo-chip); color: var(--tx-corallo-testo); font: 500 12px/1.2 var(--tx-carattere); }
.tx-etichetta { font: 600 11px/1 var(--tx-carattere); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-tenue); }
/* Il lockup (Luigi, 15 ottobre 2026): pittogramma e scritta in riga, «il cameriere digitale» sotto, che parte dalla gamba della T.
   Pittogramma alto come la T (0,75 em = altezza della maiuscola + sporgenza), o di sedie alta come la x (0,56 em), sedie con il tratto 24
   su 120 (0,11 em, quasi le aste delle lettere). Descrittore Inter 500 a 0,3 em. La forma impilata e centrata è in tablox-marchio.svg. */
.tx-marchio { display: inline-grid; grid-template-columns: auto auto; justify-content: start; column-gap: 0.22em; row-gap: 0.16em; align-items: center; color: var(--tx-grafite); text-decoration: none; font: 600 1em/1 var(--tx-carattere); letter-spacing: -0.04em; }
.tx-marchio svg.p { width: 0.75em; height: 0.75em; }
.tx-marchio .s { display: inline-flex; align-items: center; }
.tx-marchio svg.o { width: 0.56em; height: 0.56em; margin: 0 0.02em 0 0.03em; position: relative; top: 0.09em; flex: none; }
.tx-marchio small { grid-column: 2; font: 500 0.3em/1 var(--tx-carattere); letter-spacing: 0.02em; color: var(--tx-tenue); margin-left: 0.87em; /* 0,26 em della scritta: il bordo sinistro della gamba della T */ }
/* forma piccola (sotto i 24 px): pittogramma + «Tablox» in lettere, centrati, senza descrittore */
.tx-marchio.marchio { display: inline-flex; align-items: center; gap: 0.28em; }
.tx-marchio.marchio svg { width: 0.95em; height: 0.95em; flex: none; }
.tx-firma { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-tenue); font: 600 11px/1 var(--tx-carattere); letter-spacing: 0.12em; text-transform: uppercase; }
.tx-firma svg { width: 12px; height: 12px; color: var(--tx-corallo); }
.tx-stato { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--tx-fondo); font: 600 13px/1 var(--tx-carattere); color: var(--tx-grafite); }
.tx-stato::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tx-corallo); }
.tx-stato.prenotato::before { background: var(--tx-corallo-scuro); }
.tx-stato.attesa::before { background: var(--tx-attesa); }
.tx-stato.libero::before { background: transparent; border: 2px solid var(--tx-corallo); box-sizing: border-box; }
.ic { width: 24px; height: 24px; color: var(--tx-corallo); flex: none; }
/* Il fuoco da tastiera, uguale in tutte le pagine: un anello grafite; nei campi di testo basta il bordo che si scurisce. */
:focus-visible { outline: 2px solid var(--tx-grafite); outline-offset: 2px; }
input.testo:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--tx-grafite); }
/* Con «Aumenta contrasto» acceso il pulsante corallo scende a #D93A24 (bianco sopra: 4,58:1) e il corallo dei dettagli a #C8321F (5,34:1); i colori del marchio di default non cambiano. */
@media (prefers-contrast: more) {
  :root { --tx-corallo-pulsante: #D93A24; --tx-corallo: #C8321F; --tx-linea: #D2D2D7; --tx-linea-forte: #AEAEB2; }
}