/* Personalizzazioni sopra Bootstrap Italia */

body { background-color: #fff; }
.area-app { background-color: #f5f7fa; }
.area-app main { min-height: 70vh; }

.btn-xs { padding: .2rem .55rem; font-size: .8rem; line-height: 1.3; }

/* Header */
.it-header-center-wrapper.it-small-header { height: auto; min-height: 72px; }
.logo-agenzia { max-height: 56px; max-width: 160px; object-fit: contain; background: #fff; border-radius: 4px; padding: 4px; }
/* "Esci" è un <button> nel menu utente: niente stili del bottone dell'header, stesso aspetto delle altre voci */
.it-header-slim-wrapper .dropdown-menu .btn-link,
.it-header-slim-wrapper .dropdown-menu .btn-link:hover,
.it-header-slim-wrapper .dropdown-menu .btn-link:focus,
.it-header-slim-wrapper .dropdown-menu .btn-link:active {
  background: transparent !important; border: 0; color: var(--bs-primary, #0066cc) !important; text-decoration: none; box-shadow: none;
}
.it-header-slim-wrapper .dropdown-menu .btn-link span { color: inherit !important; }
.it-header-slim-wrapper .dropdown-menu .btn-link:hover span { text-decoration: underline; }
.area-riservata { font-size: .85rem; font-weight: 600; color: #5c6f82; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.area-riservata:hover { color: #17324d; }

/* ---------- Vetrina pubblica: semplice, le foto al centro ---------- */
.testata-vetrina { background: #fff; border-bottom: 1px solid #e6e9ed; padding: .75rem 0; position: sticky; top: 0; z-index: 1020; }
.testata-vetrina .logo-agenzia { max-height: 48px; padding: 0; }
.marchio { text-decoration: none; }
.marchio-nome { font-size: 1.35rem; font-weight: 700; color: #17324d; letter-spacing: -.01em; }
.telefono-testata { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; }
.lingue { display: flex; gap: .25rem; }
.lingua { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .45rem; border-radius: 6px; font-size: .8rem;
  font-weight: 600; color: #5c6f82; text-decoration: none; border: 1px solid transparent; }
.lingua:hover { background: #f2f4f6; color: #17324d; }
.lingua.attiva { border-color: #c5cdd6; color: #17324d; }
.bandiera { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex-shrink: 0; }

.ricerca { background: #f5f7fa; border-radius: 10px; padding: 1rem; }
.schede-contratto { display: flex; gap: .25rem; margin-bottom: .75rem; border: 0; padding: 0; }
.scheda-contratto { padding: .4rem 1rem; border-radius: 999px; font-weight: 600; font-size: .95rem; color: #17324d; cursor: pointer; margin: 0; }
input:checked + .scheda-contratto { background: #17324d; color: #fff; }
input:focus-visible + .scheda-contratto { outline: 2px solid var(--bs-primary, #0066cc); outline-offset: 2px; }
.filtri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; align-items: end; }
.filtri label { font-size: .8rem; font-weight: 600; color: #5c6f82; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.filtri .form-select, .filtri .form-control, .modulo-contatto .form-control { border: 1px solid #c5cdd6; border-radius: 6px; padding: .45rem .6rem; height: auto; font-size: 1rem; background-color: #fff; }
.filtri .btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }

.griglia-case { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }
.scheda-casa { position: relative; }
.scheda-casa-foto { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #e8edf2; }
.scheda-casa-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.scheda-casa:hover .scheda-casa-foto img { transform: scale(1.03); }
.scheda-casa-testo { padding: .7rem .1rem 0; }
.scheda-casa-testo a { color: #17324d; text-decoration: none; }
.etichette-card { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .3rem; }
.etichetta { display: inline-block; background: #17324d; color: #fff; font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px; }
.etichetta-avviso { background: #ffc107; color: #17324d; }
.etichetta-chiara { background: #e8edf2; color: #17324d; }
.conta-foto { position: absolute; right: .6rem; bottom: .6rem; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: .15rem .45rem; border-radius: 4px; display: inline-flex; align-items: center; gap: .25rem; }
.prezzo-card { font-size: 1.3rem; font-weight: 700; color: #17324d; }
.prezzo-card small, .prezzo-dettaglio small { font-size: .8rem; font-weight: 400; color: #5c6f82; }
.luogo { color: #5c6f82; font-size: .92rem; }
.caratteristiche { font-size: .88rem; color: #5c6f82; }
.nessun-risultato { background: #f5f7fa; border-radius: 10px; padding: 1.5rem; }

.segnaposto-foto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #e8edf2; color: #9aa9b8; }
.segnaposto-foto .icon { fill: #9aa9b8; }
.segnaposto-foto.grande { height: 320px; border-radius: 10px; }

/* Scheda immobile: galleria grande, foto intere (contain) su fondo scuro */
.torna { font-size: .9rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.galleria-palco { position: relative; background: #111; border-radius: 10px; overflow: hidden; height: min(72vh, 680px); user-select: none; }
.galleria-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; cursor: zoom-in; }
.galleria-foto.attiva { display: block; }
.galleria-freccia { position: absolute; top: 50%; transform: translateY(-50%); border: 0; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.galleria-freccia:hover { background: rgba(0,0,0,.7); }
.galleria-freccia.sinistra { left: .75rem; }
.galleria-freccia.destra { right: .75rem; }
.galleria-contatore { position: absolute; left: .75rem; bottom: .75rem; background: rgba(0,0,0,.6); color: #fff; font-size: .85rem; padding: .2rem .6rem; border-radius: 4px; }
.galleria-schermo { position: absolute; right: .75rem; bottom: .75rem; border: 0; background: rgba(0,0,0,.6); border-radius: 4px; padding: .3rem .45rem; display: flex; }
.galleria-palco:fullscreen { height: 100vh; border-radius: 0; }
.galleria-palco:fullscreen .galleria-foto { cursor: zoom-out; }
.galleria-miniature { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0; scrollbar-width: thin; }
.miniatura { border: 0; padding: 0; background: none; flex: 0 0 auto; border-radius: 6px; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; }
.miniatura img { width: 104px; height: 70px; object-fit: cover; opacity: .6; display: block; }
.miniatura.attiva { outline-color: #17324d; }
.miniatura.attiva img, .miniatura:hover img { opacity: 1; }
@media (max-width: 767.98px) {
  .galleria .container { padding: 0; }
  .galleria-palco { border-radius: 0; height: 62vh; }
  .galleria-freccia { width: 40px; height: 40px; }
  .galleria-miniature { padding: .5rem 1rem; }
}

.prezzo-dettaglio { font-size: 1.9rem; font-weight: 700; color: #17324d; }
.dati-chiave { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin: 1rem 0 0; }
.dati-chiave div { background: #f5f7fa; border-radius: 8px; padding: .6rem .75rem; }
.dati-chiave dt { font-size: .75rem; font-weight: 600; color: #5c6f82; text-transform: uppercase; letter-spacing: .03em; }
.dati-chiave dd { margin: 0; font-weight: 700; color: #17324d; }
.descrizione { white-space: pre-line; font-size: 1.02rem; line-height: 1.65; }
/* Classe energetica: scala A+ (verde) ... G (rosso) con indicatore sulla classe dell'immobile */
.classe-energetica { --colore: #c1291e; }
.classe-riquadro { display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--colore);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: .9rem; font-weight: 600; position: relative; }
.classe-riquadro strong { font-size: 1.4rem; color: var(--colore); }
.classe-barra { display: grid; grid-template-columns: repeat(8, 1fr); }
.classe-barra span { position: relative; text-align: center; color: #fff; font-weight: 600; font-size: 1rem; padding: .6rem 0; }
.classe-barra span:first-child { border-radius: 10px 0 0 10px; }
.classe-barra span:last-child { border-radius: 0 10px 10px 0; }
.classe-barra span.attiva::before { content: ""; position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  border: .45rem solid transparent; border-top-color: var(--colore); }
.classe-barra span.attiva { box-shadow: inset 0 0 0 3px rgba(255,255,255,.85); }
.classe-1 { background: #3a7f5c; } .classe-2 { background: #52ad5f; } .classe-3 { background: #9cc65a; }
.classe-4 { background: #f6cf47; color: #17324d !important; } .classe-5 { background: #ebae6f; } .classe-6 { background: #e78c3c; }
.classe-7 { background: #db3a44; } .classe-8 { background: #c1291e; }
.dotazioni { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.dotazioni li { background: #e8edf2; border-radius: 999px; padding: .25rem .8rem; font-size: .9rem; }
.contatto { border: 1px solid #e6e9ed; border-radius: 10px; padding: 1.25rem; top: 5.5rem; background: #fff; }
.modulo-contatto label:not(.small) { font-size: .8rem; font-weight: 600; color: #5c6f82; margin: .6rem 0 .2rem; display: block; }

.piede-vetrina { background: #f5f7fa; border-top: 1px solid #e6e9ed; margin-top: 2rem; color: #17324d; }
.piede-vetrina a { color: inherit; }

/* Gestionale */
.avviso-demo { background: #fff4d6; border-bottom: 1px solid #f0d58c; color: #5a4300; font-size: .9rem; padding: .5rem 0; }
.miniatura-tabella { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; flex-shrink: 0; display: inline-flex; }
.kpi { color: inherit; }
.kpi:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important; }
.kpi-valore { font-size: 1.75rem; font-weight: 700; color: #17324d; margin-top: .25rem; }
.data-box { min-width: 48px; border-right: 2px solid var(--bs-primary, #0066cc); padding-right: .75rem; }
.dati-scheda dt { font-weight: 600; color: #5c6f82; font-size: .9rem; }
.dati-scheda dd { margin-bottom: .5rem; }
.foto-gestione img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Grafico a barre semplice */
.grafico-barre { display: flex; align-items: flex-end; gap: .75rem; height: 160px; padding-top: 1.25rem; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.barra { width: 100%; max-width: 42px; background: var(--bs-primary, #0066cc); border-radius: 4px 4px 0 0; min-height: 2px; }
.barra-valore { font-size: .75rem; font-weight: 600; }
.barra-etichetta { font-size: .72rem; color: #5c6f82; margin-top: .25rem; }

/* Pipeline */
.colonna-pipeline { min-width: 230px; flex: 1 0 230px; background: #e8edf2; border-radius: 6px; padding: .75rem; }

/* Timeline */
.timeline-semplice li { border-left: 2px solid #d1dce6; padding: 0 0 1rem 1rem; position: relative; }
.timeline-semplice li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-primary, #0066cc); }

/* Agenda settimanale */
.settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.giorno { min-height: 220px; }
.giorno.oggi { outline: 2px solid var(--bs-primary, #0066cc); }
.evento { border-left: 4px solid #0066cc; background: #e6f0fa; color: #17324d; padding: .35rem .5rem; border-radius: 4px; font-size: .85rem; }
.evento-valutazione { border-color: #008758; background: #e3f4ec; }
.evento-firma, .evento-rogito { border-color: #a66300; background: #fbf0dc; }
.evento-chiuso { opacity: .55; }
@media (max-width: 991.98px) {
  .settimana { grid-template-columns: 1fr; }
  .giorno { min-height: 0; }
}

/* Area gestionale a tutta larghezza (la vetrina resta centrata) */
.area-app .container-xxl,
.area-app .container {
  max-width: none;
  padding-left: clamp(1rem, 2.5vw, 2.5rem);
  padding-right: clamp(1rem, 2.5vw, 2.5rem);
}

/* Barra azioni in testa alle pagine: su telefono bottoni compatti che vanno a capo con spaziatura */
.area-app .d-flex.justify-content-between.flex-wrap { gap: .5rem; }
.area-app .d-flex.justify-content-between.flex-wrap > div:last-child:not(:first-child) {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
@media (max-width: 575.98px) {
  .area-app .btn-sm { padding: .35rem .7rem; font-size: .8rem; }
  .area-app .btn-sm .icon-sm { width: 1rem; height: 1rem; }
}
@media (max-width: 575.98px) {
  .kpi-valore { font-size: 1.35rem; white-space: nowrap; }
}

/* ---------- Piattaforma: home, accesso, admin ---------- */
.sito-hero { background: linear-gradient(180deg, #eef4fb 0%, #fff 100%); padding: 3.5rem 0 3rem; }
.sito-hero h1 { color: #17324d; letter-spacing: -.02em; }
.sito-passi { list-style: none; counter-reset: passo; padding: 0; margin: 0; background: #fff; border-radius: 12px;
  box-shadow: 0 .5rem 1.5rem rgba(23, 50, 77, .1); padding: 1.25rem 1.5rem; }
.sito-passi li { counter-increment: passo; position: relative; padding: .75rem 0 .75rem 3rem; border-bottom: 1px solid #eef1f4; }
.sito-passi li:last-child { border-bottom: 0; }
.sito-passi li::before { content: counter(passo); position: absolute; left: 0; top: .8rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: #17324d; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sito-passi strong, .sito-passi span { display: block; }
.sito-passi span { color: #5c6f82; font-size: .9rem; }
.sito-funzioni { background: #f5f7fa; }
.sito-funzione { background: #fff; border-radius: 10px; padding: 1.25rem; height: 100%; }

.accesso-social { display: grid; gap: .75rem; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem 1rem; border-radius: 8px;
  font-weight: 600; text-decoration: none; border: 1px solid #c5cdd6; background: #fff; color: #1f1f1f; }
.btn-social svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-social:hover { background: #f5f7fa; color: #1f1f1f; }
.btn-apple { background: #000; border-color: #000; color: #fff; }
.btn-apple:hover { background: #222; color: #fff; }

.testata-admin { background: #17324d; color: #fff; padding: .75rem 0; }
.avviso-admin { background: #e8f1fb; border-color: #b8d3f0; color: #17324d; }
.invito.evidenziato { background: #fff4d6; border-radius: 6px; padding: .4rem; margin-left: -.4rem; }