/* Il modulo di adesione ASGRI: il rosa, i titoli e le caselle bianche del PDF, in una
   pagina che regge anche il telefono. */

:root {
    --rosa: #e9b4b4;
    --rosa-chiaro: #f8e4e4;
    --as-bordo: #c98b8b;
    --as-testo: #1a1a1a;
    --as-tenue: #5b5b63;
    --blu: #1f3f8f;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: #f4f1ee;
    color: var(--as-testo);
    font: 16px/1.45 Calibri, "Segoe UI", Arial, sans-serif;
}
.as {
    width: calc(100% - 2rem);
    max-width: 52rem;
    margin: 1rem auto;
    padding: 1.2rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.as-testa { display: flex; align-items: center; gap: .9rem; }
.as-testa img { flex: 0 0 auto; object-fit: contain; }
.as-testa p { margin: 0; color: var(--as-tenue); }
h1 { margin: 0; font-size: 1.6rem; }
h2 { margin: 1.6rem 0 .5rem; font-size: 1.2rem; text-align: center; text-transform: uppercase; }
.as-nota { font-size: .92rem; color: var(--as-tenue); }

.as-riquadro {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .55rem .7rem;
    padding: .9rem;
    background: linear-gradient(120deg, var(--rosa-chiaro), var(--rosa));
    border: 1px solid var(--as-bordo);
    border-radius: 6px;
}
.as-c { display: block; grid-column: span 6; min-width: 0; margin: 0; padding: 0; border: 0; }
.as-c > span, .as-c > legend {
    display: block;
    padding: 0;
    font-size: .74rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.as-cf, .as-indirizzo, .as-indirizzo_l, .as-email_l, .as-altro, .as-comune, .as-citta { grid-column: span 10; }
.as-cf, .as-altro { grid-column: span 12; }
.as-sesso, .as-prov, .as-provincia, .as-civico, .as-civico_l, .as-provincia_l, .as-livello { grid-column: span 2; }
.as-nascita, .as-assunzione, .as-cap, .as-cap_l { grid-column: span 3; }
.as-cognome, .as-nome { grid-column: span 5; }
.as-comune { grid-column: span 7; }
.as-citta { grid-column: span 7; }
.as-telefono, .as-cellulare, .as-telefono_l { grid-column: span 4; }
.as-email { grid-column: span 4; }
.as-datore, .as-sede, .as-qualifica, .as-comune_l { grid-column: span 4; }
.as-indirizzo_l { grid-column: span 7; }
.as-email_l { grid-column: span 8; }
.as-orario { grid-column: span 4; }
.as-comparto { grid-column: span 8; }

input[type=text], input[type=email], input[type=tel], input[type=date], select, .as-inline {
    width: 100%;
    min-height: 2.3rem;
    padding: .3rem .45rem;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    font: inherit;
    color: var(--blu);
}
input:focus, select:focus { outline: 2px solid var(--blu); outline-offset: 0; }
.as-testo input[type=text] { border-color: #9a9aa2; }
.as-inline { display: inline-block; width: 11rem; min-height: 1.9rem; vertical-align: baseline; }
.as-largo { width: min(20rem, 100%); }
.as-orario label { display: inline-flex; align-items: center; gap: .3rem; margin-right: .8rem; min-height: 2.3rem; }

.as-testo { font: 15px/1.45 "Times New Roman", Georgia, serif; }
.as-testo p { margin: .35rem 0; }
.as-testo details { margin-bottom: .6rem; }
.as-testo summary { cursor: pointer; font-weight: 700; color: var(--blu); }
.as-testo h3 { font-size: 1rem; }
.as-consenso { margin: 0 0 .8rem; padding: 0; border: 0; }
.as-consenso label { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; }
.as-consenso input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
.tl-solo-voce, .as-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.as-firma {
    display: block;
    width: 100%;
    height: 11rem;
    background: #fff;
    border: 2px dashed var(--as-bordo);
    border-radius: 6px;
    touch-action: none;
    cursor: crosshair;
}
button {
    min-height: 2.8rem;
    padding: .5rem 1.2rem;
    border: 0;
    border-radius: 6px;
    background: var(--blu);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
button:disabled { opacity: .55; cursor: wait; }
.as-secondario { margin-top: .5rem; background: #fff; color: var(--blu); border: 1px solid var(--blu); }
.as-azioni { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.as-azioni button { flex: 1 1 14rem; }
.as-errore, .as-ok { margin: 1rem 0 0; padding: .6rem .8rem; border-radius: 6px; font-weight: 600; }
.as-errore { background: #fdeeec; color: #b42318; }
.as-ok { background: #e9f6ee; color: #0f7b3d; }

@media (max-width: 640px) {
    body { padding: 0; }
    .as { border-radius: 0; padding: .9rem; }
    h1 { font-size: 1.3rem; }
    .as-riquadro { padding: .7rem; }
    .as-c { grid-column: span 12 !important; }
    .as-sesso, .as-prov, .as-provincia, .as-civico, .as-civico_l, .as-provincia_l, .as-cap, .as-cap_l, .as-livello { grid-column: span 6 !important; }
}
@media print { .as-azioni, .as-secondario { display: none; } }