/* Sito pubblico "Lavora con noi". I colori sono variabili: per allinearli al sito
   corporate basta cambiare i valori qui sotto. */
:root {
  /* Palette del sito sanmichelepadelclub.it (29/09/2026) */
  --carta: #f3efe6;
  --carta-scura: #e8e2d4;
  --bianco: #fffcf5;
  --inchiostro: #121820;
  --testo: #121820;
  --tenue: #5b6570;
  --linea: #d7d7ce;
  --accento: #145d9e;
  --accento-scuro: #0d477b;
  --accento-chiaro: #e3eef8;
  --ok: #2f7d5b;
  --errore: #b3261e;
  --raggio: 6px;
  --ombra: 0 1px 2px rgba(18, 24, 32, .05), 0 12px 30px rgba(18, 24, 32, .08);
  --serif: Manrope, Arial, sans-serif;
  --sans: "DM Sans", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* Titoli e link dell'app solo nel contenuto: testata, hero e piè di pagina sono del sito. */
.app-lavora main :is(h1, h2, h3):not(.page-hero *) { color: var(--inchiostro); font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
.app-lavora main a:not(.page-hero *) { color: var(--accento); }
[hidden] { display: none !important; }
.contenitore { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Testata */
.testata { background: var(--bianco); border-bottom: 1px solid var(--linea); }
.testata-interna { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.marchio { display: flex; align-items: center; gap: 10px; color: var(--inchiostro); text-decoration: none; }
.marchio-sigla {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accento); color: #fff; font: 600 15px/1 var(--serif); letter-spacing: .04em;
}
.marchio-nome { display: flex; flex-direction: column; font: 600 19px/1.1 var(--serif); }
.marchio-nome small { font: 500 12px/1.4 var(--sans); color: var(--tenue); letter-spacing: .06em; text-transform: uppercase; }
.testata-attivita { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--tenue); }
.testata-attivita li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); }
@media (max-width: 720px) { .testata-attivita { display: none; } }

/* Hero */
.eroe { padding: 56px 0 32px; }
.occhiello { margin: 0 0 12px; color: var(--accento); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eroe h1 { font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: -.01em; }
.eroe-testo { max-width: 620px; margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--testo); }

/* Filtri ed elenco posizioni */
.sezione-posizioni { padding-bottom: 24px; }
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.filtro {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco);
  color: var(--inchiostro); font: 500 15px var(--sans); cursor: pointer;
}
.filtro span { color: var(--tenue); font-size: 13px; }
.filtro[data-filtro]:not([data-filtro=""])::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.filtro.attivo { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.filtro.attivo span { color: rgba(255, 255, 255, .7); }

.griglia-posizioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.scheda a {
  display: flex; flex-direction: column; height: 100%; padding: 22px; border-radius: var(--raggio);
  background: var(--bianco); border: 1px solid var(--linea); color: inherit; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.scheda a:hover, .scheda a:focus-visible { transform: translateY(-2px); box-shadow: var(--ombra); border-color: color-mix(in srgb, var(--c) 45%, var(--linea)); }
.scheda h2 { margin: 14px 0 4px; font-size: 1.45rem; }
.scheda-meta { margin: 0 0 10px; color: var(--tenue); font-size: 14px; }
.scheda-testo { margin: 0 0 18px; flex: 1; }
.scheda-azione { color: var(--accento); font-weight: 600; font-size: 15px; }
.badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, white); color: color-mix(in srgb, var(--c) 80%, black);
  font-size: 13px; font-weight: 600;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

.vuoto { padding: 48px 16px; text-align: center; }
.vuoto p { color: var(--tenue); }

/* Come funziona */
.come-funziona { padding: 40px 16px 64px; }
.come-funziona > h2 { font-size: 1.6rem; }
.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.passi li { display: flex; gap: 14px; align-items: flex-start; }
.passi p { margin: 2px 0 0; color: var(--tenue); font-size: 15px; }
.passi strong { color: var(--inchiostro); }
.passi-numero {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accento-chiaro); color: var(--accento); font: 600 16px var(--serif);
}
.passi-compatti { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }

/* Pagina posizione */
.indietro { display: inline-block; margin: 24px 0 16px; color: var(--tenue); text-decoration: none; font-size: 15px; }
.indietro:hover { color: var(--accento); }
.posizione { padding-bottom: 64px; }
.posizione-testa h1 { margin-top: 14px; font-size: clamp(2rem, 6vw, 3.2rem); }
.posizione-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.posizione-meta span { padding: 4px 12px; border-radius: 999px; background: var(--carta-scura); color: var(--testo); font-size: 15px; }
.posizione-lead { max-width: 720px; font-size: 1.15rem; }
.posizione-corpo { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; margin-top: 24px; }
@media (max-width: 880px) { .posizione-corpo { grid-template-columns: 1fr; } }
.posizione-liste section { margin-bottom: 26px; }
.posizione-liste h2 { font-size: 1.35rem; }
.lista-segni { margin: 0; padding: 0; list-style: none; }
.lista-segni li { position: relative; padding: 6px 0 6px 26px; border-bottom: 1px solid var(--linea); }
.lista-segni li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--c); }
.riquadro-candidatura {
  position: sticky; top: 16px; padding: 24px; border-radius: var(--raggio);
  background: var(--bianco); border: 1px solid var(--linea); box-shadow: var(--ombra);
}
.riquadro-candidatura h2 { font-size: 1.3rem; }
.note-candidatura { margin: 0 0 20px; padding: 14px 16px 14px 32px; border-radius: 12px; background: var(--carta); font-size: 14px; color: var(--tenue); }
.note-candidatura li + li { margin-top: 6px; }
.cta-mobile { display: none; }
@media (max-width: 880px) {
  .cta-mobile {
    display: block; position: sticky; bottom: 0; z-index: 3; padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(246, 242, 235, .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--linea);
  }
  .riquadro-candidatura .bottone { display: none; }
  .riquadro-candidatura { position: static; }
}

/* Bottoni */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--accento); color: #fff; font: 600 16px var(--sans); text-decoration: none; cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.bottone:hover { background: var(--accento-scuro); }
.bottone:disabled { opacity: .45; cursor: not-allowed; }
.bottone-pieno { width: 100%; }
.bottone-secondario { background: transparent; border: 1px solid var(--linea); color: var(--inchiostro); }
.bottone-secondario:hover { background: var(--carta-scura); }
.avviso { padding: 12px 16px; border-radius: 12px; background: #fff4d6; color: #6b4e00; font-size: 15px; }

/* Piè di pagina */
.piede { border-top: 1px solid var(--linea); background: var(--bianco); font-size: 14px; color: var(--tenue); }
.piede-interno { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; }

/* Informativa */
.testo-lungo { max-width: 760px; padding-bottom: 64px; }
.testo-lungo h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.testo-lungo h2 { margin-top: 1.6em; font-size: 1.3rem; }
.testo-lungo li + li { margin-top: 6px; }

/* ---------------------------------------------------------------------------
   Colloquio
--------------------------------------------------------------------------- */
.pagina-colloquio .testata { display: none; }
.pagina-colloquio { background: var(--carta); }
.colloquio { max-width: 720px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; }
.colloquio-testa {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(246, 242, 235, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.colloquio-indietro {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--inchiostro); text-decoration: none; font-size: 20px;
}
.colloquio-indietro:hover { background: var(--carta-scura); }
.colloquio-titolo { display: flex; flex-direction: column; min-width: 0; }
.colloquio-titolo span { font-size: 12px; color: var(--tenue); letter-spacing: .06em; text-transform: uppercase; }
.colloquio-titolo strong { color: var(--inchiostro); font: 600 18px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avanzamento { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.avanzamento-barra { flex: 1; height: 6px; border-radius: 99px; background: var(--carta-scura); overflow: hidden; }
.avanzamento-barra span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--c, var(--accento)); transition: width .4s ease; }
.avanzamento-testo { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; }

.schermata { padding: 28px 16px 40px; }
.schermata h1 { font-size: clamp(1.8rem, 6vw, 2.3rem); }
.passo { margin: 0 0 6px; color: var(--accento); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nota { color: var(--tenue); font-size: 14px; }
.attesa { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 64px 0; color: var(--tenue); }
.rotella { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--linea); border-top-color: var(--accento); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.punti-intro { margin: 0 0 22px; padding: 0; list-style: none; }
.punti-intro li { padding: 14px 16px; margin-bottom: 10px; border-radius: 14px; background: var(--bianco); border: 1px solid var(--linea); font-size: 16px; }
.punti-intro strong { display: block; color: var(--inchiostro); margin-bottom: 2px; }
.spunta { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; font-size: 16px; cursor: pointer; }
.spunta input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accento); }
.errore-form { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #fde8e6; color: var(--errore); font-size: 15px; }

.zona-file {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 150px; margin: 18px 0 12px; padding: 20px; border: 2px dashed color-mix(in srgb, var(--accento) 35%, var(--linea));
  border-radius: var(--raggio); background: var(--bianco); text-align: center; cursor: pointer;
}
.zona-file.sopra { background: var(--accento-chiaro); border-color: var(--accento); }
.zona-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-file-titolo { color: var(--accento); font-weight: 600; font-size: 18px; }
.zona-file-sotto { color: var(--tenue); font-size: 14px; }
.elenco-file { margin: 0 0 12px; padding: 0; list-style: none; }
.elenco-file li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 6px; border-radius: 10px; background: var(--bianco); border: 1px solid var(--linea); font-size: 15px; }
.elenco-file li span:last-child { color: var(--tenue); white-space: nowrap; }

.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 10px; }
@media (max-width: 560px) { .campi { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--inchiostro); }
.campo input {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px;
  background: var(--bianco); color: var(--inchiostro); font: 16px var(--sans);
}
.campo input:focus { outline: 2px solid color-mix(in srgb, var(--accento) 45%, transparent); border-color: var(--accento); }
.campo input[aria-invalid="true"] { border-color: var(--errore); }
.nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chat */
.schermata-chat { flex: 1; display: flex; flex-direction: column; padding: 0; }
.chat { flex: 1; padding: 20px 16px 8px; }
.msg { display: flex; gap: 10px; margin-bottom: 12px; animation: entra .25s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-avatar {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c, var(--accento)); color: #fff; font: 600 12px var(--serif); letter-spacing: .03em;
}
.msg-bolla { max-width: 86%; padding: 12px 15px; border-radius: 4px 18px 18px 18px; background: var(--bianco); border: 1px solid var(--linea); color: var(--inchiostro); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-tu { justify-content: flex-end; }
.msg-tu .msg-bolla { border-radius: 18px 4px 18px 18px; background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.msg-nota { padding-left: 42px; }
.msg-nota .msg-bolla { background: transparent; border: 0; padding: 4px 0; color: var(--tenue); font-size: 15px; }
.msg-approfondimento .msg-bolla { border-left: 3px solid var(--c, var(--accento)); }
.divisore { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--tenue); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.divisore::before, .divisore::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.puntini { display: inline-flex; gap: 4px; padding: 4px 2px; }
.puntini i { width: 7px; height: 7px; border-radius: 50%; background: var(--tenue); opacity: .4; animation: puntino 1.2s infinite; }
.puntini i:nth-child(2) { animation-delay: .15s; }
.puntini i:nth-child(3) { animation-delay: .3s; }
@keyframes puntino { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } }

.pannello-risposta {
  position: sticky; bottom: 0; z-index: 4; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: rgba(246, 242, 235, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea);
}
.pannello-risposta:empty { display: none; }
.opzioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.opzione {
  min-height: 50px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--bianco);
  color: var(--inchiostro); font: 500 16px var(--sans); text-align: left; cursor: pointer; transition: border-color .12s, background .12s;
}
.opzione:hover { border-color: var(--accento); }
.opzione[aria-pressed="true"] { border-color: var(--accento); background: var(--accento-chiaro); }
.opzioni-sino { grid-template-columns: 1fr 1fr; }
.opzioni-sino .opzione { text-align: center; font-weight: 600; }
.area-testo {
  width: 100%; min-height: 120px; max-height: 45vh; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px;
  background: var(--bianco); color: var(--inchiostro); font: 16px/1.5 var(--sans); resize: none;
}
.area-testo.breve { min-height: 76px; }
.area-testo:focus { outline: 2px solid color-mix(in srgb, var(--accento) 45%, transparent); border-color: var(--accento); }
.riga-invio { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.contatore { color: var(--tenue); font-size: 13px; font-variant-numeric: tabular-nums; }
.riga-invio .bottone { min-height: 46px; padding: 10px 22px; }
.conferma-multi { margin-top: 10px; width: 100%; }
.pannello-risposta .errore-form { margin-top: 10px; }
.errore-rete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.fine-segno { display: grid; place-items: center; width: 64px; height: 64px; margin: 12px 0 18px; border-radius: 50%; background: #e3f1ea; color: var(--ok); font-size: 30px; }
#s-fine p, #s-bloccato p { font-size: 17px; }
#s-fine .bottone, #s-bloccato .bottone { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Integrazione nel sito del padel (29/09/2026) ------------------------------------
   Testata, menu, piè di pagina e hero vengono da /assets/site.css. Qui si riportano i
   titoli dell'app a dimensioni da pagina interna (il sito ha h1/h2 molto grandi). */
.app-lavora { background: var(--carta); font-family: var(--sans); }
.app-lavora main :is(h1, h2, h3):not(.page-hero *) { font-family: var(--serif); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.app-lavora main h1:not(.page-hero *) { font-size: clamp(2rem, 5vw, 3.2rem); }
.app-lavora main h2:not(.page-hero *) { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.app-lavora main h3:not(.page-hero *) { font-size: 1.2rem; }
.app-lavora .page-hero h1 { font-family: Manrope, Arial, sans-serif; font-weight: 800; }
.app-lavora .page-hero em { font-style: normal; }
.sezione-posizioni { padding-top: 56px; }
.scheda a { border-radius: var(--raggio); }
.scheda h2 { margin-top: 0; }
.scheda-azione { color: var(--accento); font-weight: 800; }
.posizione .eyebrow { color: #245d91; margin-bottom: 0; }
.bottone { border-radius: 4px; font-weight: 800; letter-spacing: .02em; }
.bottone-pieno { background: var(--lime, #e5ff3f); color: var(--inchiostro); }
.bottone-pieno:hover { background: #d4ee2c; }
/* Nel colloquio (chat a tutto schermo) la testata del sito toglierebbe spazio. */
.pagina-colloquio .site-header, .pagina-colloquio .skip-link { display: none; }
.app-lavora main .scheda a { color: var(--testo); }
.app-lavora main .scheda a .scheda-azione { color: var(--accento); }
.facoltativo { font-size: .55em; color: var(--tenue); font-weight: 600; letter-spacing: 0; }
.bottone-largo { width: 100%; margin-top: 10px; }
.avviso-inizio { margin: 18px 0 14px; padding: 14px 16px; background: #fff4d6; border-left: 4px solid #d99a00; line-height: 1.5; font-size: .95rem; color: var(--inchiostro); }
.avviso-inizio strong { display: block; margin-bottom: 4px; }
.bottone-inizio { flex-direction: column; gap: 2px; padding-top: 12px; padding-bottom: 12px; line-height: 1.25; }
.bottone-inizio small { font-weight: 600; font-size: .78rem; opacity: .85; }