/* Portale dei parrocchiani.
   Chiaro invece che scuro: lo aprono persone anziane, spesso al sole, da
   telefoni di ogni tipo. Testo grande e contrasto alto, non eleganza. */
body.portale {
  --p-fondo:  #f6f7fb;
  --p-carta:  #ffffff;
  --p-testo:  #1b2033;
  --p-tenue:  #5a6276;
  --p-bordo:  #dfe3ee;
  --p-blu:    #1d4ed8;
  background: var(--p-fondo);
  color: var(--p-testo);
  font-size: 16.5px;
  margin: 0;
}
body.portale .alert { color: var(--p-testo); }

.p-testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--p-carta);
  border-bottom: 1px solid var(--p-bordo);
}
.p-marchio { display: flex; align-items: center; gap: 12px;
             text-decoration: none; color: inherit; }
.p-marchio b { display: block; font-size: 16px; line-height: 1.2; }
.p-marchio span { font-size: 12.5px; color: var(--p-tenue); }
.p-menu { display: flex; gap: 8px; flex-wrap: wrap; }
.p-menu a {
  padding: 9px 15px; border-radius: 999px; text-decoration: none;
  color: var(--p-testo); font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--p-bordo); background: var(--p-carta);
  min-height: 44px; display: inline-flex; align-items: center;
}
.p-menu a.on, .p-menu a.forte { background: var(--p-blu); color: #fff;
                                border-color: var(--p-blu); }

.p-corpo { max-width: 820px; margin: 0 auto; padding: 20px 16px 50px; }

.p-scheda {
  background: var(--p-carta); border: 1px solid var(--p-bordo);
  border-radius: 16px; padding: 20px; margin-bottom: 16px;
}
.p-scheda h2 { margin: 0 0 6px; font-size: 19px; }
.p-scheda .sotto { color: var(--p-tenue); font-size: 14px; margin-bottom: 14px; }

.p-campo { margin-bottom: 14px; }
.p-campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.p-campo input, .p-campo select {
  width: 100%; box-sizing: border-box; min-height: 48px;
  padding: 11px 13px; font-size: 16px;          /* 16px: iOS non zooma */
  border: 1px solid var(--p-bordo); border-radius: 11px;
  background: var(--p-carta); color: var(--p-testo);
}
.p-campo input:focus, .p-campo select:focus {
  outline: 2px solid var(--p-blu); outline-offset: 1px; border-color: var(--p-blu);
}
.p-aiuto { font-size: 12.5px; color: var(--p-tenue); margin-top: 5px; }

.p-bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 13px 18px; font-size: 16px;
  font-weight: 700; border-radius: 12px; border: 1px solid var(--p-blu);
  background: var(--p-blu); color: #fff; cursor: pointer; text-decoration: none;
}
.p-bottone.chiaro { background: var(--p-carta); color: var(--p-testo);
                    border-color: var(--p-bordo); }
.p-bottone:disabled { opacity: .55; cursor: default; }

.p-riga {
  display: flex; align-items: center; gap: 12px; padding: 14px 2px;
  border-bottom: 1px solid var(--p-bordo);
}
.p-riga:last-child { border-bottom: 0; }
.p-riga .cresce { flex: 1; min-width: 0; }
.p-riga b { display: block; font-size: 15.5px; }
.p-riga small { color: var(--p-tenue); font-size: 13px; }

.p-etichetta {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.p-etichetta.ok   { background: #dcfce7; color: #166534; }
.p-etichetta.att  { background: #fef3c7; color: #92400e; }
.p-etichetta.no   { background: #fee2e2; color: #991b1b; }

.p-credito { text-align: center; padding: 22px 0; }
.p-credito .cifra { font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.p-credito .sotto { color: var(--p-tenue); font-size: 14px; }

.p-piede {
  text-align: center; padding: 26px 16px 36px; color: var(--p-tenue);
  font-size: 13px; border-top: 1px solid var(--p-bordo); background: var(--p-carta);
}
.p-piede > div { margin: 5px 0; }
.p-piede .eta { display: inline-flex; align-items: center; gap: 9px;
                background: #fff; padding: 7px 13px; border-radius: 10px;
                border: 1px solid var(--p-bordo); }
.p-piede a { color: var(--p-tenue); }

@media (max-width: 520px) {
  .p-testa { padding: 12px 14px; }
  .p-marchio span { display: none; }
}