/* AELO Training — foglio unico. Mobile first: le regole larghe stanno in fondo. */

:root {
    --rosso:   #c71c17;
    --inchio:  #10161d;
    --testo:   #1d2630;
    --tenue:   #6b7683;
    --bordo:   #e3e7ec;
    --sfondo:  #f6f7f9;
    --card:    #ffffff;
    --ok-bg:   #e7f5ec;  --ok-fg:   #14622f;
    --warn-bg: #fff4e2;  --warn-fg: #8a5200;
    --err-bg:  #fdecea;  --err-fg:  #a32118;
    --raggio:  14px;
    --ombra:   0 1px 2px rgba(16,22,29,.05), 0 8px 24px rgba(16,22,29,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--sfondo);
    color: var(--testo);
    line-height: 1.55;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ── Intestazione ──────────────────────────────────────────────────────── */
.top {
    background: var(--inchio);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.top .marchio {
    font-weight: 700;
    letter-spacing: 2.5px;
    font-size: .82rem;
    text-transform: uppercase;
}
.top .marchio span { color: var(--rosso); }
.top a { color: #fff; text-decoration: none; }
.esci {
    font-size: .78rem;
    border: 1px solid rgba(255,255,255,.35);
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.esci:active { background: rgba(255,255,255,.12); }

/* ── Corpo ─────────────────────────────────────────────────────────────── */
main {
    flex: 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}
main.largo { max-width: 860px; }

h1 { font-size: 1.55rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; font-weight: 650; margin-bottom: 10px; }
p  { color: var(--tenue); }
p + p { margin-top: 10px; }

.sotto { margin-top: 8px; font-size: 1rem; }

.riquadro {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 22px;
    margin-top: 24px;
}

/* ── Modulo ────────────────────────────────────────────────────────────── */
label.campo { display: block; font-size: .85rem; font-weight: 600; color: var(--testo); margin-bottom: 7px; }

input[type=email], input[type=text], input[type=password] {
    width: 100%;
    /* 16px esatti: sotto questa misura Safari su iPhone ingrandisce la pagina al tocco. */
    font-size: 16px;
    font-family: inherit;
    color: var(--testo);
    padding: 14px 15px;
    border: 1.5px solid var(--bordo);
    border-radius: 11px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input[type=email]:focus, input[type=text]:focus, input[type=password]:focus {
    outline: none;
    border-color: var(--rosso);
    box-shadow: 0 0 0 3px rgba(199,28,23,.12);
}

button, .bottone {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 48px di altezza: la misura minima perche' un dito lo prenda al primo colpo. */
    min-height: 48px;
    margin-top: 14px;
    padding: 13px 20px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 650;
    color: #fff;
    background: var(--rosso);
    border: none;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .06s, filter .15s;
}
button:hover, .bottone:hover { filter: brightness(.93); }
button:active, .bottone:active { transform: scale(.985); }
button[disabled] { opacity: .55; cursor: default; }

/* ── Avvisi ────────────────────────────────────────────────────────────── */
.avviso {
    border-radius: 11px;
    padding: 14px 16px;
    font-size: .92rem;
    margin-bottom: 20px;
}
.avviso.ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.avviso.attesa { background: var(--warn-bg); color: var(--warn-fg); }
.avviso.no   { background: var(--err-bg);  color: var(--err-fg); }

/* ── Saluto ────────────────────────────────────────────────────────────── */
.saluto { margin-bottom: 6px; }
.saluto .nome { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; display: block; }
.pillola {
    display: inline-block;
    background: #eef1f5;
    color: var(--tenue);
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    margin-top: 6px;
}

/* Riquadri delle funzioni, per quando ce ne saranno. */
.griglia { display: grid; gap: 14px; margin-top: 22px; }
.tessera {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.tessera h2 { margin-bottom: 4px; }
.tessera p { font-size: .9rem; }
.tessera.vuota { border-style: dashed; box-shadow: none; background: transparent; text-align: center; color: var(--tenue); }

/* Tessera cliccabile: titolo a sinistra, freccia a destra, e tutta la riga e' il bersaglio. */
a.tessera { display: flex; align-items: center; justify-content: space-between; gap: 14px;
            min-height: 78px; transition: border-color .15s, transform .06s; }
a.tessera h2 { margin: 0; }
a.tessera .freccia { color: var(--tenue); font-size: 1.2rem; flex: none; transition: transform .15s, color .15s; }
a.tessera:hover { border-color: var(--rosso); }
a.tessera:hover .freccia { color: var(--rosso); transform: translateX(3px); }
a.tessera:active { transform: scale(.99); }

.indietro { display: inline-block; margin-bottom: 14px; font-size: .88rem; color: var(--tenue); text-decoration: none; }
.indietro:hover { color: var(--rosso); }

/* Il link sotto il modulo (password dimenticata) e quello fuori (cambia pagina). */
.sotto-modulo { margin-top: 16px; text-align: center; font-size: .88rem; }
.sotto-modulo a { color: var(--tenue); text-decoration: none; border-bottom: 1px solid var(--bordo); }
.sotto-modulo a:hover { color: var(--rosso); border-bottom-color: currentColor; }
.altrove { margin-top: 22px; text-align: center; font-size: .92rem; color: var(--tenue); }
.altrove a { color: var(--rosso); font-weight: 600; text-decoration: none; }
.altrove a:hover { text-decoration: underline; }

footer {
    text-align: center;
    padding: 24px 20px 34px;
    font-size: .8rem;
    color: var(--tenue);
}

/* ── Schermi larghi ────────────────────────────────────────────────────── */
@media (min-width: 720px) {
    main { padding-top: 56px; }
    h1 { font-size: 1.9rem; }
    .riquadro { padding: 28px; }
    .griglia { grid-template-columns: repeat(2, 1fr); }
    .griglia.tre { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tema scuro, se il telefono lo chiede ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --testo: #e8edf3; --tenue: #98a3b0; --bordo: #2a323c;
        --sfondo: #11161c; --card: #1a2029;
        --ok-bg: #12301f; --ok-fg: #7fd6a0;
        --warn-bg: #33270f; --warn-fg: #e8bb70;
        --err-bg: #331a18; --err-fg: #f0a09a;
    }
    input[type=email], input[type=text], input[type=password] { background: #141a21; color: var(--testo); }
    .pillola { background: #232b35; }
}