body {
  margin: 0;
  background: #f8f8f8 url("/staticResource?name=FundoClubeDarcaBotLogo.png")
    center top repeat-y;
  background-size: 100% auto;
  color: #223247;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.auth-page {
  min-height: 100vh;
}

.login-page {
  background: #fff;
  position: relative;
}

.login-page::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 112px;
  bottom: 0;
  z-index: -1;
  background: #fff url("/staticResource?name=FundoClubeDarcaBotLogo.png") center
    top / 100% 100% no-repeat;
}

.login-logo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 112px;
  padding-left: clamp(18px, 8.8vw, 170px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
}

.login-logo-bar img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

main {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 24px;
}

.login-main {
  max-width: min(100% - 32px, 1540px);
  width: 100%;
  min-height: 100vh;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(260px, 28.7vh, 300px) 0 92px;
  box-sizing: border-box;
}

.login-layout {
  display: grid;
  grid-template-columns: 330px;
  gap: 24px;
  margin-left: 0;
  align-items: start;
}

.card {
  width: 100%;
  background: #fff;
  border: 1px solid #7a4f4f;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 18px 45px rgba(34, 50, 71, 0.14);
}

.login-card {
  box-sizing: border-box;
  border-color: #7a4f4f;
  border-radius: 18px;
  padding: 38px 24px 16px;
  box-shadow: 0 2px 8px rgba(73, 43, 43, 0.18);
}

h1 {
  margin: 0 0 8px;
  font-family: Georgia, serif;
  font-size: 2rem;
  color: #1d2b3a;
}
.muted {
  color: #65758a;
  margin: 0 0 22px;
  line-height: 1.4;
}
label {
  display: block;
  font-weight: 800;
  margin: 14px 0 6px;
}

.login-card label {
  color: #7a4f4f;
  margin: 14px 0 8px;
}

input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 13px;
  font-size: 1rem;
  box-sizing: border-box;
}

.login-card input {
  border: 2px solid #7a4f4f;
  border-radius: 10px;
  padding: 10px 12px;
  height: 44px;
  color: #4b2f2f;
  background: #fff;
}

.login-card input:focus {
  outline: 3px solid rgba(122, 79, 79, 0.18);
  outline-offset: 2px;
}

.recover-link {
  display: block;
  width: auto;
  border: 0;
  background: transparent;
  color: #7a4f4f;
  text-decoration: none;
  margin: 9px 0 24px auto;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.recover-link:focus,
.recover-link:hover {
  text-decoration: underline;
  background: transparent;
}

button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #2585e8;
  color: #fff;
  padding: 13px 16px;
  font-weight: 900;
  font-size: 1rem;
  margin-top: 18px;
  cursor: pointer;
}

.login-card button {
  width: 100%;
  min-width: 0;
  border-radius: 9px;
  padding: 12px 16px;
  margin-top: 0;
}

.login-card button.recover-link {
  display: block;
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7a4f4f;
  margin: 9px 0 24px auto;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.login-card button.recover-link:hover,
.login-card button.recover-link:focus {
  background: transparent;
  text-decoration: underline;
  outline: 0;
}

.login-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

button.primary-action {
  background: #7a4f4f;
  color: #fff;
}

button.secondary-action {
  background: #fff;
  color: #7a4f4f;
  border: 2px solid #7a4f4f;
}

button.primary-action:hover:not(:disabled) {
  background: #654040;
}

button.secondary-action:hover:not(:disabled) {
  background: #f8eeee;
}

.login-card button:focus {
  outline: 3px solid rgba(122, 79, 79, 0.28);
  outline-offset: 3px;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.msg {
  padding: 12px;
  border-radius: 12px;
  margin-top: 14px;
  display: none;
  line-height: 1.4;
}
.error {
  display: block;
  background: #fff5f5;
  color: #b91c1c;
}
.ok {
  display: block;
  background: #ecfdf5;
  color: #166534;
}

.register-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  border: 1px solid #7a4f4f;
  border-radius: 18px;
  padding: 0;
  color: #4b2f2f;
  background: #fff;
  box-shadow: 0 24px 80px rgba(50, 28, 28, 0.3);
}

.family-register-dialog {
  width: min(1060px, calc(100% - 32px));
  overflow: hidden;
}

.family-register-dialog .register-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  padding: 0;
}

.family-register-dialog .register-heading {
  margin: 0;
  padding: 26px 30px 20px;
  border-bottom: 1px solid #eadede;
  background: #fff;
}

.register-eyebrow,
.daughter-kicker {
  display: block;
  margin-bottom: 5px;
  color: #9b6262;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.family-flow {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 30px 30px;
  background: #fbf8f7;
  scrollbar-color: #bb9292 transparent;
}

.family-section {
  position: relative;
  padding: 22px;
  border: 1px solid #e6d7d4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(85, 47, 47, 0.06);
}

.family-section + .family-section {
  margin-top: 18px;
}

.family-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.family-section-heading h3,
.daughter-card-heading h4 {
  margin: 0;
  color: #4b2f2f;
  font-family: Georgia, "Times New Roman", serif;
}

.family-section-heading h3 {
  font-size: 1.2rem;
}

.family-section-heading p {
  margin: 3px 0 0;
  color: #806e6a;
  font-size: 0.9rem;
}

button.data-treatment-link {
  display: inline-flex;
  width: auto;
  min-width: 0;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7a4f4f;
  font-size: 0.86rem;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

button.data-treatment-link span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 0.76rem;
  font-style: italic;
  text-decoration: none;
}

button.data-treatment-link:hover {
  background: transparent;
  color: #5f3737;
}

button.data-treatment-link:focus-visible {
  outline: 3px solid rgba(122, 79, 79, 0.24);
  outline-offset: 4px;
}

.family-marker {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #7a4f4f;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
}

.daughters-heading .add-daughter {
  width: auto;
  margin: 0 0 0 auto;
  padding: 10px 14px;
  border: 1.5px solid #7a4f4f;
  background: #fff;
  color: #7a4f4f;
  font-size: 0.88rem;
}

.daughters-heading .add-daughter:hover:not(:disabled) {
  background: #f8eeee;
}

.daughters-list {
  display: grid;
  gap: 14px;
}

.daughter-card {
  padding: 18px;
  border: 1px solid #dfcdca;
  border-left: 5px solid #b67d7d;
  border-radius: 14px;
  background: #fffdfc;
}

.daughter-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.daughter-card-heading h4 {
  font-size: 1.05rem;
}

button.remove-daughter {
  width: auto;
  margin: 0;
  padding: 6px 9px;
  border: 0;
  background: transparent;
  color: #a33f3f;
  font-size: 0.78rem;
}

button.remove-daughter:hover {
  background: #fff0f0;
}

.daughter-limit-hint {
  margin: 10px 0 0;
  color: #806e6a;
  font-size: 0.8rem;
}

.daughter-enrollment-note {
  box-sizing: border-box;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid #dcc6c2;
  border-left: 4px solid #9b6262;
  border-radius: 9px;
  background: #f8f1ef;
  color: #604744;
  font-size: 0.84rem;
  line-height: 1.5;
}

.family-register-dialog .register-grid {
  gap: 2px 16px;
}

.family-register-dialog label {
  color: #6f4545;
  font-size: 0.88rem;
}

.family-register-dialog .required-mark {
  color: #a23434;
}

.family-register-dialog label small {
  margin-left: 4px;
  color: #8b6f6f;
  font-size: 0.78rem;
  font-weight: 650;
}

.family-register-dialog input,
.family-register-dialog select,
.family-register-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
  border: 1.5px solid #b98e89;
  border-radius: 9px;
  background: #fff;
  color: #3d2a2a;
  font: inherit;
}

.family-register-dialog input,
.family-register-dialog select {
  min-height: 43px;
  padding: 9px 11px;
}

.family-register-dialog textarea {
  resize: vertical;
  padding: 11px;
  line-height: 1.4;
}

.family-register-dialog input[readonly] {
  border-style: dashed;
  background: #f4efed;
  color: #6e5a56;
}

.family-register-dialog input:focus,
.family-register-dialog select:focus,
.family-register-dialog textarea:focus {
  outline: 3px solid rgba(122, 79, 79, 0.17);
  outline-offset: 1px;
  border-color: #7a4f4f;
}

.consent-list {
  display: grid;
  gap: 10px;
}

.consent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 15px;
  border: 1px solid #eadfdd;
  border-radius: 12px;
  background: #fffdfc;
}

.consent-row legend {
  display: contents;
  color: #57413e;
  font-size: 0.88rem;
  line-height: 1.5;
}

.consent-row a {
  color: #7a4f4f;
  font-weight: 800;
}

.binary-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.binary-choice label {
  position: relative;
  margin: 0;
}

.binary-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.binary-choice span {
  display: block;
  min-width: 48px;
  padding: 8px 10px;
  border: 1px solid #c9aaa6;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  cursor: pointer;
}

.binary-choice input:checked + span {
  border-color: #7a4f4f;
  background: #7a4f4f;
  color: #fff;
}

.binary-choice input:focus-visible + span {
  outline: 3px solid rgba(122, 79, 79, 0.22);
  outline-offset: 2px;
}

.payment-section {
  overflow: hidden;
}

.payment-marker {
  background: #9b6262;
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.payment-fields,
.payment-options {
  display: grid;
  gap: 10px;
}

.payment-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.payment-options legend {
  margin-bottom: 2px;
  color: #6f4545;
  font-size: 0.88rem;
  font-weight: 800;
}

.family-register-dialog label.payment-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid #e2d2cf;
  border-radius: 11px;
  background: #fffdfc;
  color: #4f3936;
  font-weight: 650;
  line-height: 1.42;
  cursor: pointer;
}

.family-register-dialog label.payment-option:hover {
  border-color: #b98e89;
  background: #fbf4f2;
}

.family-register-dialog .payment-option input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: #8d4f49;
}

.family-register-dialog label.payment-option:has(input:checked) {
  border-color: #8d4f49;
  box-shadow: inset 4px 0 0 #8d4f49;
}

.payment-other,
.payment-proof {
  margin-top: 2px;
  font-weight: 750;
}

.payment-proof {
  padding-top: 4px;
}

.family-register-dialog .payment-proof input[type="file"] {
  padding: 7px;
  background: #fffdfc;
}

.family-register-dialog .payment-proof input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: #7a4f4f;
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.payment-proof small {
  display: block;
  margin: 7px 0 0 !important;
  line-height: 1.4;
}

.register-footer {
  padding: 16px 30px 20px;
  border-top: 1px solid #eadede;
  background: #fff;
}

.register-footer .msg {
  margin: 0 0 10px;
}

.register-footer .register-actions {
  margin-top: 0;
}

.recover-dialog {
  width: min(440px, calc(100% - 32px));
}

.data-treatment-dialog {
  width: min(780px, calc(100% - 32px));
  overflow: hidden;
}

.data-treatment-shell {
  display: flex;
  max-height: calc(100vh - 32px);
  flex-direction: column;
}

.data-treatment-heading {
  flex: 0 0 auto;
  margin: 0;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #eadede;
  background: #fff;
}

.data-treatment-heading h2 {
  text-transform: uppercase;
}

.data-treatment-content {
  overflow-y: auto;
  padding: 22px 28px;
  background: #fbf8f7;
  color: #57413e;
  font-size: 0.94rem;
  line-height: 1.58;
  scrollbar-color: #bb9292 transparent;
}

.data-treatment-content p {
  margin: 0 0 15px;
}

.data-treatment-content ul {
  margin: -4px 0 19px;
  padding-left: 22px;
}

.data-treatment-content li + li {
  margin-top: 5px;
}

.data-treatment-content a {
  color: #7a4f4f;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.data-treatment-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 15px 26px 19px;
  border-top: 1px solid #eadede;
  background: #fff;
}

.reset-card {
  max-width: 390px;
}

.reset-submit {
  margin-top: 22px !important;
}

.register-dialog::backdrop {
  background: rgba(52, 31, 31, 0.55);
  backdrop-filter: blur(3px);
}

.register-form {
  padding: 26px;
}

.register-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.register-heading h2 {
  margin: 0 0 6px;
  font:
    700 1.55rem Georgia,
    "Times New Roman",
    serif;
}

.register-heading p {
  margin: 0;
  color: #786767;
  line-height: 1.45;
}

.register-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

a.dialog-help {
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  place-items: center;
  box-sizing: border-box;
  border: 1.5px solid #9b7171;
  border-radius: 50%;
  background: #fff;
  color: #7a4f4f;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

a.dialog-help:hover {
  border-color: #7a4f4f;
  background: #f5eded;
}

a.dialog-help:focus-visible,
button.dialog-close:focus-visible {
  outline: 3px solid rgba(122, 79, 79, 0.32);
  outline-offset: 2px;
}

button.dialog-close {
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #f5eded;
  color: #7a4f4f;
  font-size: 1.5rem;
  line-height: 1;
}

.register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.register-grid label {
  color: #7a4f4f;
  margin-top: 10px;
}

.register-grid input {
  margin-top: 7px;
  border: 1.5px solid #9b7171;
}

.register-wide {
  grid-column: 1 / -1;
}

.register-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

.register-actions button {
  width: auto;
  margin: 0;
}

@media (max-width: 760px) {
  .login-page::before {
    top: 92px;
    background-size: auto 100%;
    background-position: center top;
  }

  .login-logo-bar {
    height: 92px;
    padding: 0 16px;
    justify-content: center;
  }

  .login-logo-bar img {
    height: 76px;
    max-width: 100%;
  }

  .login-main {
    max-width: min(100% - 24px, 380px);
    padding: clamp(160px, 24vh, 210px) 0 92px;
    align-items: center;
  }

  .login-layout {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-left: 0;
  }

  .login-card {
    padding: 28px 22px 20px;
  }

  .register-dialog {
    max-height: calc(100dvh - 20px);
  }

  .family-register-dialog .register-form {
    max-height: calc(100dvh - 20px);
  }

  .family-register-dialog .register-heading,
  .family-flow,
  .register-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .family-section {
    padding: 17px;
  }

  .daughters-heading {
    flex-wrap: wrap;
  }

  .daughters-heading .add-daughter {
    width: 100%;
    margin-left: 0;
  }

  .consent-row {
    grid-template-columns: 1fr;
  }

  .binary-choice {
    width: 100%;
  }

  .register-form {
    padding: 20px;
  }

  .data-treatment-heading,
  .data-treatment-content,
  .data-treatment-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .register-grid {
    grid-template-columns: 1fr;
  }

  .register-wide {
    grid-column: auto;
  }

  .login-page::before {
    background-size: auto 100%;
  }
}

@media (max-width: 420px) {
  .login-main {
    padding-top: 145px;
  }

  .login-card button {
    width: 100%;
  }

  .login-actions {
    grid-template-columns: 1fr;
  }

  .register-actions {
    flex-direction: column;
  }

  .register-actions button {
    width: 100%;
  }
}

.daughter-activities {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.daughter-activities legend {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.daughter-activity-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.daughter-activity-option {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.daughter-activity-option input {
  width: auto !important;
  margin: 0;
}
.daughter-activity-option:has(input:checked) {
  border-color: #a62027;
  background: #fff5f5;
}