/**
 * Portal do Convidado
 * Ajustes visuais responsivos para autenticação, dashboard e cartões de evento.
 */

:root {
  --portal-surface: #ffffff;
  --portal-border: #dfe7f1;
  --portal-muted: #607086;
  --portal-shadow: 0 1.25rem 3rem rgba(31, 55, 83, 0.12);
}

#public-area {
  padding: clamp(1rem, 3vw, 2.5rem);
}

#public-area .portal-card {
  width: min(100%, 35rem);
  max-width: 35rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--portal-shadow);
}

#public-area .portal-card.registration-mode {
  width: min(95vw, 68rem);
  max-width: 68rem;
}

.portal-login-icon {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 2rem;
  line-height: 1;
  vertical-align: middle;
}

.portal-login-icon > i {
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#step-identify,
#step-otp {
  width: 100%;
}

#formIdentify .input-group {
  min-height: 3.75rem;
  flex-wrap: nowrap;
}

#formIdentify .input-group-text {
  width: 3.75rem;
  flex: 0 0 3.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

#identifier {
  min-width: 0;
  padding-inline: 0.75rem 1rem;
  font-size: 1rem;
}

#identifier::placeholder {
  color: #79879a;
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 1;
}

#dashboard-area {
  width: 100%;
  padding-inline: 0;
}

#dashboard-area .dashboard-wrapper {
  width: min(95vw, 120rem);
  max-width: none;
}

.dash-header-card,
.dash-main-container {
  border: 1px solid rgba(34, 75, 119, 0.08);
}

.dash-content {
  padding: clamp(1.25rem, 2.5vw, 2.75rem);
}

.portal-action-button {
  min-height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.2;
  border-radius: 0.8rem;
}

.portal-action-button > i {
  width: 1.15rem;
  flex: 0 0 1.15rem;
  margin: 0 !important;
  text-align: center;
}

.event-card {
  border-color: var(--portal-border);
  border-radius: 1.25rem;
}

.event-card-cover {
  height: clamp(11rem, 17vw, 15rem);
  isolation: isolate;
}

.event-card-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(transparent, rgba(9, 32, 58, 0.36));
  pointer-events: none;
}

.event-card-body {
  padding: clamp(1.15rem, 2vw, 1.6rem);
  gap: 0.25rem;
}

.event-card-actions {
  display: grid;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--portal-border);
}

.event-card-meta {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  margin-block: 0.8rem 1rem;
  border-radius: 0.9rem;
  background: var(--app-surface);
  color: var(--portal-muted);
}

.event-card-meta > div {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem;
}

.event-card-meta i {
  width: 1.25rem;
  margin: 0 !important;
  padding-top: 0.15rem;
  text-align: center;
}

.modal-event-hero {
  height: clamp(18rem, 36vw, 31rem);
  background-position: center;
}

.modal-event-hero-content {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

:is(#viewEventModal, #viewMainEventModal) .event-details-dialog {
  height: calc(100dvh - 2rem);
  margin: 1rem auto;
  max-width: min(96vw, 108rem);
  width: calc(100% - 2rem);
}

:is(#viewEventModal, #viewMainEventModal) .modal-content {
  max-height: 100%;
  overflow: hidden;
}

:is(#viewEventModal, #viewMainEventModal) .modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.event-location-panel {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(24rem, 1.15fr);
  overflow: hidden;
}

.event-location-copy {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.event-main-location {
  border-left: 0.25rem solid var(--bs-primary-border-subtle);
  padding-left: 0.85rem;
}

.event-map-wrap {
  background: #e9eef4;
  min-height: 22rem;
}

.event-map-wrap iframe {
  border: 0;
  display: block;
  height: 100%;
  min-height: 22rem;
  width: 100%;
}

.event-section-icon {
  align-items: center;
  background: var(--bs-primary-bg-subtle);
  border-radius: 0.85rem;
  color: var(--bs-primary);
  display: inline-flex;
  flex: 0 0 3rem;
  height: 3rem;
  justify-content: center;
}

.event-section-heading {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.event-public-section {
  box-shadow: 0 0.45rem 1.25rem rgba(30, 54, 81, 0.04);
}

.event-main-link {
  align-items: center;
  align-self: flex-start;
  background: transparent;
  border: 0;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  max-width: 100%;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.event-main-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-main-link:hover,
.event-main-link:focus-visible { text-decoration: underline; }

.section-eyebrow {
  color: var(--bs-secondary-color);
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rich-public-content {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.rich-public-content img,
.rich-public-content table {
  max-width: 100%;
}

:is(#viewEventModal, #viewMainEventModal) .modal-body {
  padding: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

:is(#viewEventModal, #viewMainEventModal) .modal-footer {
  flex: 0 0 auto;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

@media (min-width: 1200px) {
  #my-events-list > .col-lg-4,
  #available-events-list > .col-lg-4 {
    width: 33.333333%;
  }
}

@media (max-width: 767.98px) {
  #public-area {
    padding: 0.75rem;
  }

  #public-area .portal-card,
  #public-area .portal-card.registration-mode {
    width: 100%;
    max-width: 100%;
    border-radius: 1.25rem;
  }

  .step-container {
    padding: 1.5rem 1.1rem;
  }

  #identifier {
    font-size: 0.95rem;
  }

  #identifier::placeholder {
    font-size: 0.82rem;
  }

  #dashboard-area .dashboard-wrapper {
    width: 100%;
  }

  .dash-header-card {
    gap: 1.25rem;
  }

  .dash-header-card > .d-flex {
    width: 100%;
  }

  .dash-header-card .btn {
    flex: 1 1 9rem;
  }

  .dash-nav {
    padding-inline: 0.35rem;
    overflow-x: auto;
  }

  .dash-nav .nav {
    min-width: max-content;
  }

  .dash-nav .nav-link {
    padding: 1rem;
  }

  .event-card-cover {
    height: clamp(12rem, 56vw, 18rem);
  }

  .modal-event-hero {
    height: clamp(18rem, 72vw, 25rem);
  }

  :is(#viewEventModal, #viewMainEventModal) .event-details-dialog {
    height: calc(100dvh - 1rem);
    margin: 0.5rem;
    width: calc(100% - 1rem);
  }

  :is(#viewEventModal, #viewMainEventModal) .modal-content {
    border-radius: 1rem !important;
  }

  .event-location-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-map-wrap,
  .event-map-wrap iframe {
    min-height: 18rem;
  }

  .modal-event-hero-content h2 {
    white-space: normal !important;
    overflow: visible !important;
  }

  :is(#viewEventModal, #viewMainEventModal) .modal-footer {
    align-items: stretch !important;
    flex-direction: column;
    text-align: center;
  }

  :is(#viewEventModal, #viewMainEventModal) .modal-footer .btn { width: 100%; }
}

@media (max-width: 390px) {
  #formIdentify .input-group-text {
    width: 3.15rem;
    flex-basis: 3.15rem;
  }

  #identifier::placeholder {
    font-size: 0.76rem;
  }
}


/* "Minhas respostas, logística e presença" (guest-records.js): três abas cabem em 375 px. */
@media (max-width: 575.98px) {
  .guest-records-tabs .nav-link { padding: 0.45rem 0.4rem; font-size: 0.875rem; }
}
.guest-records-signature dd { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
 * Modal de assinatura da lista de presença (guest-attendance-sign.js).
 * Computador: modal larga, declaração à esquerda (fixa ao rolar) e etapas numeradas
 * à direita. Celular/tablet: tela cheia, uma coluna, cartões com respiro entre si.
 * ------------------------------------------------------------------------- */
#public-attendance-sign-modal .modal-body { padding: 1.5rem; background: #f4f7fb; }
#public-attendance-sign-modal .modal-header { padding: 1rem 1.5rem; }
.sign-layout { display: grid; gap: 1.25rem; }
.sign-main { display: grid; gap: 1rem; margin: 0; }
.sign-panel, .sign-step { background: #fff; border: 1px solid var(--portal-border); border-radius: 1rem; padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(31, 55, 83, 0.04); }
.sign-panel-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; margin: 0 0 .85rem; }
.sign-declaration { margin: 0 0 1rem; padding: 1rem 1.15rem; background: #f8fafc; border-left: 4px solid var(--bs-primary, #0b5ed7); border-radius: .5rem; font-size: 1rem; line-height: 1.65; }
.sign-details { border-top: 1px solid var(--portal-border); padding-top: .75rem; margin-top: .75rem; font-size: .9rem; }
.sign-details summary { font-weight: 600; color: var(--bs-primary, #0b5ed7); cursor: pointer; }
.sign-step-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.sign-step-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bs-primary, #0b5ed7); color: #fff; font-weight: 700; }
.sign-step-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.sign-code-input { letter-spacing: .35em; font-weight: 600; max-width: 18rem; }
.sign-pad { height: 190px; touch-action: none; }
.sign-preview { max-height: 56px; max-width: 180px; }
.sign-narrow { max-width: 34rem; margin: 0 auto; }
@media (min-width: 992px) {
  .sign-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .sign-aside { position: sticky; top: 0; }
  .sign-pad { height: 230px; }
}
@media (max-width: 575.98px) {
  #public-attendance-sign-modal .modal-body { padding: 1rem .75rem 1.5rem; }
  #public-attendance-sign-modal .modal-header { padding: .85rem 1rem; }
  .sign-panel, .sign-step { padding: 1rem; }
  .sign-code-input { max-width: none; }
}

/* ---------------------------------------------------------------------------
 * Painel do convidado (06/11/2026): cabeçalho em duas faixas, abas que cabem no
 * celular, ações da inscrição em lista e menos "caixa dentro de caixa".
 * ------------------------------------------------------------------------- */
.dash-header-card { display: grid; gap: 1.25rem; }
.dash-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.dash-session-badge { white-space: nowrap; }
.dash-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22); }

/* Situação e ações da inscrição */
.event-status-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; margin: .75rem 0; background: #f6f8fb; border-radius: .75rem; }
.event-status-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--portal-muted); }
.event-action-list { display: flex; flex-direction: column; border: 1px solid var(--portal-border); border-radius: .85rem; overflow: hidden; margin-top: .25rem; }
.event-action-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .9rem; background: #fff; border: 0; border-top: 1px solid var(--portal-border); text-align: left; font-size: .9rem; font-weight: 600; color: #22324a; }
.event-action-item:first-child { border-top: 0; }
.event-action-item > .fa-solid:first-child { width: 1.25rem; text-align: center; color: var(--bs-primary, #0b5ed7); }
.event-action-item > span { flex: 1 1 auto; line-height: 1.3; }
.event-action-chevron { font-size: .75rem; color: #9aa7b8; }
.event-action-item:hover, .event-action-item:focus-visible { background: #f2f6fc; outline: none; }
.event-action-item:focus-visible { box-shadow: inset 0 0 0 2px var(--bs-primary, #0b5ed7); }
.event-cancel-link { margin-top: .35rem; font-weight: 600; text-decoration: none; }

/* Sub-abas do "Meu Registo": rolam de lado sem cortar o texto pela metade */
.profile-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs .nav-link { white-space: nowrap; scroll-snap-align: start; }

@media (max-width: 575.98px) {
  .dash-header-card { padding: 1.25rem 1rem; gap: 1rem; }
  .dash-header-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Ícone em cima e texto numa linha só: os três botões ficam do mesmo tamanho. */
  .dash-header-actions .btn { min-width: 0; min-height: 3.6rem; padding: .5rem .25rem; font-size: .8rem; flex-direction: column; justify-content: center; gap: .3rem; white-space: nowrap; border-radius: .9rem !important; }
  .dash-header-actions .btn i { margin: 0 !important; font-size: 1rem; }
  .dash-header-actions .btn .ms-1 { margin-left: 0 !important; }
  .dash-header-actions .btn [data-guest-bell-badge] { top: .35rem !important; left: auto !important; right: .35rem; transform: none !important; }
  /* Três abas principais sempre visíveis: ícone em cima, texto curto embaixo. */
  .dash-nav { overflow-x: visible; padding-inline: 0; }
  .dash-nav .nav { min-width: 0; flex-wrap: nowrap; }
  .dash-nav .nav-link { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .75rem .25rem; font-size: .8rem; line-height: 1.2; }
  .dash-nav .nav-link i { margin: 0 !important; font-size: 1.05rem; }
  .dash-content { padding: 1rem; }
  .profile-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  #content-profile .tab-content { padding: .85rem !important; border-radius: 1rem !important; }
  .event-card-cover.no-image { height: 72px; }
}