/* =====================================================================
   Sito di lega Spumacalcio.
   Stessa famiglia visiva dell'AstaManager: fondo scuro, verde campo.
   ===================================================================== */

:root {
    --fondo:    #070a10;
    --sfondo:   linear-gradient(180deg, #0b111a 0%, #070a10 60%);
    --carta:    #0e131c;
    --carta-2:  #141b27;
    --rilievo:  #1b2432;
    --linea:    rgba(255,255,255,.075);
    --linea-2:  rgba(255,255,255,.16);

    --testo:    #e8edf5;
    --tenue:    #93a1b8;
    --fioco:    #5b6982;

    --acc:      #34e88a;
    --acc-ink:  #04150c;
    --oro:      #ffc94a;
    --male:     #ff4f66;

    --r:    14px;
    --r-sm: 9px;
    --ombra: 0 18px 40px -22px rgba(0,0,0,.9);

    --f:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fd: "Barlow Condensed", "Arial Narrow", var(--f);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
    background: var(--sfondo) fixed;
    color: var(--testo);
    font-family: var(--f);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
p  { margin: 0 0 .8em; }
a  { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- barra */

.barra {
    background: linear-gradient(180deg, var(--carta-2), var(--carta));
    border-bottom: 1px solid var(--linea);
    position: sticky; top: 0; z-index: 20;
}
.barra__int {
    max-width: 1120px; margin: 0 auto;
    display: flex; align-items: center; gap: 18px;
    padding: 10px 18px; flex-wrap: wrap;
}

.marchio {
    font-family: var(--fd);
    font-size: 22px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--acc);
}
.marchio:hover { text-decoration: none; }

.menu { display: flex; gap: 4px; margin-right: auto; flex-wrap: wrap; }
.menu a {
    padding: 7px 12px; border-radius: var(--r-sm);
    color: var(--tenue); font-size: 14px; font-weight: 500;
}
.menu a:hover { background: var(--rilievo); color: var(--testo); text-decoration: none; }
.menu a.attiva { background: var(--rilievo); color: var(--testo); }

.io { display: flex; align-items: center; gap: 9px; }
.io__nome { font-size: 13.5px; color: var(--tenue); max-width: 15em; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ foglio */

.foglio { max-width: 1120px; margin: 0 auto; padding: 22px 18px 60px;
          display: flex; flex-direction: column; gap: 16px; }

.scheda {
    background: linear-gradient(180deg, var(--carta-2), var(--carta));
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--ombra);
    padding: 20px;
}
.scheda__testa {
    display: flex; align-items: center; gap: 10px;
    margin: -20px -20px 16px; padding: 12px 18px;
    border-bottom: 1px solid var(--linea);
}
.scheda__titolo {
    font-family: var(--fd); font-size: 15px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: var(--tenue);
}

.griglia { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ------------------------------------------------------------ stemmi */

.stemma {
    flex: 0 0 auto; display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--rilievo); object-fit: contain; overflow: hidden;
}
.stemma--txt {
    background: hsl(var(--tinta, 150) 42% 26%);
    color: hsl(var(--tinta, 150) 70% 78%);
    font-family: var(--fd); font-size: 13px; font-weight: 700; line-height: 1;
}
.stemma--sm { width: 24px; height: 24px; border-radius: 6px; }
.stemma--sm.stemma--txt { font-size: 11px; }
.stemma--lg { width: 52px; height: 52px; border-radius: 12px; }
.stemma--lg.stemma--txt { font-size: 20px; }

/* ------------------------------------------------------------ moduli */

label { font-size: 13px; color: var(--tenue); }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

input[type=text], input[type=password], input[type=email], input[type=number], select {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--linea-2); border-radius: var(--r-sm);
    background: #0a0f17; color: var(--testo);
    font: inherit; font-size: 14.5px;
    transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus {
    outline: none; border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(52,232,138,.16);
}
input::placeholder { color: var(--fioco); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 17px;
    border: 1px solid var(--linea-2); border-radius: var(--r-sm);
    background: var(--rilievo); color: var(--testo);
    font: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer; white-space: nowrap;
    transition: background .14s, border-color .14s, transform .06s;
}
.btn:hover { background: #26313f; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn--pieno { background: var(--acc); border-color: transparent; color: var(--acc-ink); }
.btn--pieno:hover { background: #4bf59a; }
.btn--fioco { background: transparent; border-color: var(--linea); color: var(--tenue); padding: 6px 12px; font-size: 13px; }
.btn--fioco:hover { background: var(--rilievo); color: var(--testo); }
.btn--largo { width: 100%; }

/* ----------------------------------------------------------- avvisi */

.avviso { padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--linea); font-size: 14px; }
.avviso--ok   { border-color: rgba(52,232,138,.4);  background: rgba(52,232,138,.1);  color: #9df3c4; }
.avviso--male { border-color: rgba(255,79,102,.45); background: rgba(255,79,102,.1);  color: #ffb3bd; }
.avviso--nota { border-color: rgba(255,201,74,.4);  background: rgba(255,201,74,.09); color: #ffdd93; }

/* ---------------------------------------------------------- tabelle */

.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab th {
    padding: 9px 10px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--linea-2);
    font-family: var(--fd); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--fioco);
}
.tab td { padding: 9px 10px; border-bottom: 1px solid var(--linea); }
.tab tbody tr:last-child td { border-bottom: 0; }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; }

.fioco { color: var(--fioco); }
.tenue { color: var(--tenue); }

/* -------------------------------------------------------- ingresso */

.ingresso { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.ingresso .scheda { width: 100%; max-width: 400px; }
.ingresso h1 { font-family: var(--fd); font-size: 27px; letter-spacing: .05em;
               text-transform: uppercase; color: var(--acc); margin-bottom: 3px; }
.ingresso .sotto { color: var(--fioco); font-size: 13.5px; margin-bottom: 20px; }

@media (max-width: 620px) {
    .barra__int { gap: 10px; padding: 9px 12px; }
    .menu { order: 3; width: 100%; }
    .foglio { padding: 14px 12px 40px; }
    .scheda { padding: 16px; }
    .scheda__testa { margin: -16px -16px 14px; padding: 11px 14px; }
}