/* Website → CSS (WA stores this as resources/theme/user.css).
   Loads after the theme, so keep it to things the theme genuinely cannot reach.

   The Google Fonts @import that used to sit at the top of this file is gone:
   Inter is self-hosted by the theme (Styles/fonts.less + Fonts/inter_variable_*.woff2).
   Re-adding it would shadow the self-hosted faces and reintroduce a third-party
   request from every page load.

   What remains styles the membership application while it is embedded as a widget
   in the React site at animacionesmia.com (body.widgetMode). Delete this whole file
   once that site is retired and the DNS switch is done. */

body.widgetMode,
body.widgetMode .WaGadgetMembershipApplication,
body.widgetMode .gadgetStyleBody {
  background: transparent !important;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: #ffffff !important;
}

body.widgetMode .formTitle,
body.widgetMode .fieldLabel,
body.widgetMode .mandatoryLabel,
body.widgetMode .labelTitle,
body.widgetMode .labelSubTitle,
body.widgetMode .levelLabel,
body.widgetMode .levelPrice { color: #ffffff !important; }

body.widgetMode .typeInstruction,
body.widgetMode .levelRenewal,
body.widgetMode .levelRecurring,
body.widgetMode .levelDescription { color: #d1d5db !important; }

/* #ec6169, not #d8242e: this text sits on the dark widget background */
body.widgetMode .mandatorySymbol,
body.widgetMode a { color: #ec6169 !important; }

body.widgetMode .nextButton,
body.widgetMode input[type="submit"],
body.widgetMode input[type="button"],
body.widgetMode button {
  background: #d8242e !important;
  border: 1px solid #d8242e !important;
  color: #fff !important;
  border-radius: 8px !important;
}
body.widgetMode .nextButton:hover,
body.widgetMode input[type="submit"]:hover,
body.widgetMode input[type="button"]:hover,
body.widgetMode button:hover {
  background: #b81d26 !important;
  border-color: #b81d26 !important;
}

body.widgetMode input[type="text"],
body.widgetMode input[type="email"],
body.widgetMode input[type="password"],
body.widgetMode input[type="tel"],
body.widgetMode select,
body.widgetMode textarea {
  background: #1f2937 !important;
  color: #fff !important;
  border: 1px solid #374151 !important;
  border-radius: 8px !important;
}

/* ---------------------------------------------------------------------------
   Dark pages. animacionesmia.com keeps a light body but paints /socias and
   /membresia full-bleed #111827, so those are per-page, not theme-wide. WA has
   no page-level background setting, hence the PAGEID hooks below (see
   docs/wa-help/Customizing your site/page-id.md).

     PAGEID_1075175 = Socias        (member gallery)
     PAGEID_1075135 = public profile page reached from a gallery card
     PAGEID_1075136 = Sys/PublicProfile/SendEmail — the "send a message" form
                      reached from that profile, so it has to match it
     PAGEID_1075129 = Sys/Login     (authorisation required)
     PAGEID_1075131 = Sys/ResetPasswordRequest
     PAGEID_1075173 = Membresía    (join flow)

   Add further dark pages to both selector lists below. */
#PAGEID_1075175 .zoneContent,
#PAGEID_1075135 .zoneContent,
#PAGEID_1075136 .zoneContent,
#PAGEID_1075129 .zoneContent,
#PAGEID_1075131 .zoneContent,
#PAGEID_1075173 .zoneContent {
  background: #111827;
  color: #d1d5db;
}

/* headings inside a dark page: the theme's basic set is dark-on-light */
#PAGEID_1075175 .zoneContent :is(h1, h2, h3, h4, h5),
#PAGEID_1075135 .zoneContent :is(h1, h2, h3, h4, h5),
#PAGEID_1075136 .zoneContent :is(h1, h2, h3, h4, h5),
#PAGEID_1075129 .zoneContent :is(h1, h2, h3, h4, h5),
#PAGEID_1075131 .zoneContent :is(h1, h2, h3, h4, h5),
#PAGEID_1075173 .zoneContent :is(h1, h2, h3, h4, h5) {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   The light bar above the header.

   WA writes style="margin-top:17px" on the header's layout container
   (#id_wiSuNsr inside .zoneHeader1). It is a nudge saved from the site editor's
   layout spacing, not anything the theme asks for, and an inline style outranks
   every stylesheet - so the theme's own `.zoneHeader1 [class*="WaLayoutContainer"]
   { margin: 0 }` loses and !important is the only way to reach it.

   Those 17px surfaced as a near-white bar in two different guises:

   - Desktop. The mobile-panel row above the header is display:none, so the
     margin has no in-flow sibling to push against and collapses upward through
     .mLayout and out of <body> altogether. body's border box then starts 17px
     down the viewport, and that strip paints as canvas - which is body's own
     #f8f9fa. Nothing is in it: elementFromPoint at y=8 returns <html>. Every
     page was affected, since the header lives in the shared master layout.
   - Mobile (max 767px). There the mobile panel is a real 50px bar, so the margin
     stays in flow and separates the two black bars with a light stripe.

   Zeroing it seats the header flush at the top on desktop (measured: body top
   17 -> 0) and merges the two bars into one 115px chrome on mobile. The -32px
   inline margin on the login button gadget beside it is deliberate and stays -
   this selector reaches layout containers only.

   Worth zeroing in the site editor too, at Header 1's layout spacing; this rule
   then just keeps the bar from coming back the next time someone drags it. */
.zoneHeader1 [class*="WaLayoutContainer"] {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   The member portal, read-only profile (PAGEID_1075137).

   A member sees every field she could fill in, whether she has or not - 25 of 35
   labelled rows were empty on the account this was measured against, in a panel
   2824px tall. The empty ones are folded and replaced by one line saying how many
   there are, so nothing is concealed: "Editar perfil" is where they get filled in
   and it sits directly above.

   foldEmptyProfileFields() in es-translations.js tags the rows; this decides what
   a tagged row looks like. It also refuses to run when the gadget has writable
   inputs, because WA gives the view and the edit form the same class. */
#PAGEID_1075137 :is([data-mia-empty], [data-mia-moved]) {
  display: none;
}

/* The código de socia card. Four digits, so the number can carry real size; red
   on white is 4.73:1, comfortable at this scale. The facts list is empty on an
   account with no membership level, which is why the card is built from whatever
   rows exist rather than from a fixed template. */
#PAGEID_1075137 .miaMemberCard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 48px;
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

#PAGEID_1075137 .miaMemberCardLabel {
  display: block;
  color: #6b7280;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#PAGEID_1075137 .miaMemberCardNumber {
  display: block;
  margin-top: 2px;
  color: #d8242e;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

#PAGEID_1075137 .miaMemberCardFacts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 16px;
  margin: 0;
}

#PAGEID_1075137 .miaMemberCardFacts dt {
  color: #6b7280;
  font-size: 13px;
}

#PAGEID_1075137 .miaMemberCardFacts dd {
  margin: 0;
  color: #2c2f31;
  font-size: 13px;
  font-weight: 500;
}

@media screen and (max-width: 480px) {
  #PAGEID_1075137 .miaMemberCardNumber {
    font-size: 32px;
  }
}

#PAGEID_1075137 .miaEmptyFieldsHint {
  margin: 0 0 24px;
  color: #6b7280;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   The advanced search: filter chips, and the labels nobody could read.

   "Búsqueda avanzada..." on the gallery is a link to ?tab=2 - a separate state
   of the same gadget, .WaGadgetMemberDirectoryStateAdvancedSearch, server-rendered
   like the card grid, so CSS only. Everything here is scoped to that state; the
   simple search page is untouched.

   Measuring it turned up two defects worse than the chips they sat next to:

     - field labels (Nombre, Apellidos, Profesión...) rendered #2c2f31 on the
       #111827 dark page: **1.32:1**, effectively invisible. The theme's body
       colour, never restated for a dark page.
     - "Clear values" and "Go to simple search" at #d8242e on the same ground:
       3.56:1, and untranslated. Both keys are in es-translations.js now, and the
       links go coral, which is the rule for red-on-dark.

   Profesión Adicional is 39 checkboxes stacked down a 1257px column. WA marks
   each option as .fieldItem > span.typeCheckboxContainer(input) + label[for], so
   flex-wrapped pills need no JavaScript: :has(input:checked) carries the state and
   the label[for] already makes the pill clickable. The input keeps its place in
   the DOM and its focus, hidden only visually, so Tab and Space still work. The
   two Ofertas laborales radios get the same pill, hence both input types. */
.WaGadgetMemberDirectoryStateAdvancedSearch :is(.fieldLabel, .fieldLabel span) {
  color: #d1d5db;
}

.WaGadgetMemberDirectoryStateAdvancedSearch a {
  color: #ec6169;
}

/* dark fields, as on the login and application pages */
.WaGadgetMemberDirectoryStateAdvancedSearch :is(select, input[type="text"]) {
  background: #1f2937;
  color: #ffffff;
  border: 1px solid #374151;
}

.WaGadgetMemberDirectoryStateAdvancedSearch .groupBodyVertical {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem:has(input[type="checkbox"]),
.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem:has(input[type="radio"]) {
  position: relative;
  /* flex, not inline-block: the div holds whitespace text nodes between its two
     spans, and in a block box those make a second line box - 12px of dead height
     on every chip. A flex container ignores whitespace-only children. */
  display: inline-flex;
  align-items: center;
  /* WA indents the row 18px to clear the checkbox and pulls the box back with a
     negative margin; the pill needs neither */
  padding: 0;
  border: 1px solid #374151;
  border-radius: 999px;
  background: #1f2937;
}

/* visually gone, still in the tab order. Both containers: checkboxes come in
   span.typeCheckboxContainer and the Ofertas laborales radios in
   span.typeRadioContainer, so covering only the first left two radio dots
   floating beside their pills. */
.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem :is(.typeCheckboxContainer, .typeRadioContainer) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* WA already wraps a real <label for> inside span.label, so the pill is clickable
   and the checkbox named without any help from us. The label is the hit area, so
   it carries the padding rather than .fieldItem. */
.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem > .label {
  flex: 0 0 auto;
}

.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem label {
  display: block;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
}

.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem:has(input:checked) {
  border-color: #d8242e;
  background: #d8242e;
}

.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem:has(input:checked) :is(label, .textLine) {
  color: #ffffff;
}

.WaGadgetMemberDirectoryStateAdvancedSearch .fieldItem:has(input:focus-visible) {
  outline: 2px solid #ec6169;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The gallery modal (phase 8).

   Styles the <dialog> that es-translations.js builds when a member card is
   clicked, plus the public-profile markup fetched into it. Both are needed: the
   profile gadget's own CSS is class-based so it follows the content into the
   dialog, but the dark treatment of the profile PAGE is keyed to
   #PAGEID_1075135 and does not, so every colour is restated here.

   Site-wide rather than page-scoped because the dialog is appended to <body>,
   and because a member directory gadget could be placed on another page. It is
   inert weight until something opens it. */
/* `display` MUST stay behind [open]. The browser hides a closed dialog with
   `dialog:not([open]) { display: none }` in its own stylesheet, and an id
   selector outranks that - so `#mia-profile-modal { display: flex }` left the
   dialog on screen after close(). It looked exactly like a broken close button:
   `open` flipped to false, the box stayed put, and because a closed dialog is no
   longer modal the page behind became clickable, so clicking another card
   loaded a new profile into a dialog that was supposedly shut. */
#mia-profile-modal[open] {
  display: flex;
  flex-direction: column;
}

#mia-profile-modal {
  /* How the UA centres a MODAL dialog, stated explicitly so a dialog that ends
     up open without being in the top layer lands in the same place instead of
     at its static position below the footer. z-index for the same reason. */
  position: fixed;
  inset: 0;
  z-index: 100;
  margin: auto;
  width: calc(100% - 32px);
  max-width: 672px;
  max-height: 85vh;
  padding: 0;
  /* .miaModalBody scrolls; without this the dialog scrolls too and shows a
     second scrollbar across the bottom */
  overflow: hidden;
  border: 1px solid #374151;
  border-radius: 8px;
  background: #1f2937;
  color: #d1d5db;
}

#mia-profile-modal::backdrop {
  background: rgba(17, 24, 39, 0.8);
}

/* outside the scrolling area, so it stays reachable on a long profile */
#mia-profile-modal .miaModalClose {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin: 4px 4px 0;
  border: 0;
  background: none;
  color: #d1d5db;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

#mia-profile-modal .miaModalClose:hover {
  color: #ffffff;
}

#mia-profile-modal .miaModalBody {
  overflow-y: auto;
  padding: 0 24px 24px;
  /* the default scrollbar is a light bar against #1f2937 */
  scrollbar-width: thin;
  scrollbar-color: #4b5563 transparent;
}

/* Phase 3 styles this container as a dark card, which is right on the profile
   PAGE and a card inside a card here. Flatten it: the dialog is the card. */
#mia-profile-modal .memberDirectoryDetailsContainer {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

#mia-profile-modal .miaModalNote {
  padding: 24px 0;
  color: #d1d5db;
}

#mia-profile-modal :is(h1, h2, h3) {
  margin: 0 0 4px;
  color: #ffffff;
}

#mia-profile-modal h4 {
  margin: 24px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #374151;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* WA renders each field as .fieldLabel + .fieldBody in a wrapper; on the page
   the label is a right-aligned column, which is too wide to keep at 672px */
#mia-profile-modal .fieldSubContainer {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
}

#mia-profile-modal :is(.fieldLabel, .fieldBody) {
  /* WA pads every field down by 4px to clear its own input borders */
  padding-top: 0;
}

#mia-profile-modal .fieldLabel {
  flex: 0 0 38%;
  width: auto;
  color: #9ca3af;
  text-align: left;
}

#mia-profile-modal .fieldBody {
  flex: 1 1 auto;
  /* WA's own 16px, which made every row 54px tall */
  margin-bottom: 0;
  color: #ffffff;
  /* social fields hold the raw URL as their value */
  overflow-wrap: anywhere;
}

#mia-profile-modal a {
  color: #ec6169;
}

/* the way out to the full page, which is where WA's own actions work */
#mia-profile-modal .miaModalMore {
  display: inline-block;
  margin-top: 20px;
  font-weight: 500;
}

#mia-profile-modal img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

@media screen and (max-width: 480px) {
  #mia-profile-modal .fieldSubContainer {
    flex-direction: column;
    gap: 2px;
  }

  #mia-profile-modal .fieldLabel {
    flex: none;
  }
}

/* The logo's link, shrink-wrapped to the logo.

   The anchor added in theme/Gadgets/AccountLogo/GadgetTemplate.tpl is inline and
   wraps a display:block <img>, so its block fragment spans the whole container.
   On desktop that made the empty header to the right of the logo clickable:
   measured 32-174 against an image ending at 126, i.e. 48px of invisible link.
   Shrink-wrapping makes the hit area exactly the image, and the focus ring with
   it. No effect on mobile - the flex centring in the merged bar already sizes the
   wrapper to its content, so the hit area was 140-234 for a 141-234 logo. */
.WaGadgetAccountLogo a {
  display: block;
  width: fit-content;
}

/* ---------------------------------------------------------------------------
   One header bar on mobile instead of two.

   WA's mobile menu can only live in the Mobile panel placeholder, and the master
   layout puts that placeholder in its own row *above* the header zone. Below
   767px the theme hides the horizontal menu and the login button, so the header
   row is left holding nothing but the logo: 50px of icons stacked on 65px of
   logo, 115px of chrome on a 375px screen for three items that fit in one row.

   Worse than the waste: `.mobilePanelContainer` is not sticky, only `.zoneHeader1`
   is. Scrolling left a sticky bar containing just the logo, with the menu and the
   login button scrolled off the top - so past the first screenful there was no way
   to reach the navigation at all without scrolling back up.

   Fixing the panel row to the top and folding the header up underneath it puts the
   hamburger, the logo and the login icon in one 64px bar, all three always
   reachable. What each declaration is for:

     pointer-events   `.mobilePanel` is a full-width box laid over the header, so
                      it hit-tests before anything in the header row does.
                      Re-enabled on the two buttons and the two dropdowns.
                      Nothing under it is interactive today - the logo is a bare
                      <img> with no anchor - so this is insurance, and it is what
                      stops the bar from eating the first thing anyone links or
                      adds in that row.
     background       the panel's own black would otherwise paint over the logo
                      behind it (z-index 51 vs the header's 50). The bar stays
                      black because .zoneHeader1 already is.
     height: 64px     on the panel, not just the container: `.menuInner` and
                      `.loginInner` are `top: 100%` of `.mobilePanel`, so this is
                      what makes the dropdowns open flush with the header's bottom
                      edge rather than 14px up inside it.
     top: 7px         centres the 50px buttons in the 64px bar - (64-50)/2 - so
                      the icons line up with the logo's centre rather than sitting
                      high. Matches the theme's own 3-class specificity, which
                      plain `.mobilePanelButton` loses to.
     max-height       required, not polish. A fixed container cannot be scrolled
                      by the page, so in landscape (375px tall) the last menu items
                      became unreachable - the menu now scrolls itself. dvh second
                      so browsers without it keep the vh line.

   The flex block centres the logo in both axes. It has to go on .gadgetStyleBody
   because the editor writes `style="text-align: Left"` on the div inside it, and
   the img is display:block, which text-align could not have moved anyway.

   Above 767px nothing here applies - verified identical at 768px with the block
   disabled. */
@media screen and (max-width: 767px) {
  .mobilePanelContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 51;
    height: 64px;
  }

  .mobilePanelContainer,
  .WaGadgetMobilePanel .mobilePanel {
    pointer-events: none;
  }

  .WaGadgetMobilePanel .mobilePanel {
    height: 64px;
    background: transparent;
  }

  .WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
    top: 7px;
    pointer-events: auto;
  }

  .WaGadgetMobilePanel .menuInner,
  .WaGadgetMobilePanel .loginInner {
    pointer-events: auto;
    overflow-y: auto;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }

  .zoneHeader1 {
    padding-left: 50px;
    padding-right: 50px;
  }

  .zoneHeader1 .WaGadgetAccountLogo .gadgetStyleBody {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
  }
}

/* ---------------------------------------------------------------------------
   Full-width pages.

   Every page on this site - content, gadget and system - shares one page template,
   and a master layout is a property of the template, not of the page. So there is
   no way to make one page full width from the admin without a second template,
   which would mean maintaining the header and footer gadgets twice. Done per page
   here instead.

     PAGEID_1075249 = Inicio           (5 section gadgets, Content placeholder)
     PAGEID_1075185 = Sobre Nosotras   (1 gadget, Header 1 placeholder)
     PAGEID_1075251 = Directiva        (1 gadget, Header 1 placeholder)
     PAGEID_1075252 = Fundadoras       (1 gadget, Header 1 placeholder)
     PAGEID_1075184 = Contacto         (1 gadget, Header 1 placeholder)

   Both zones are listed for every page because a page's gadget can sit in either;
   the unused one is empty and unaffected.

   The `>` matters. With a descendant selector these rules also matched the FOOTER
   placeholder on production, because a malformed gadget there left `.zoneHeader2`
   unclosed and every later zone nested inside it - so the footer went full width
   (1521px against the intended 1216px). A direct-child selector cannot reach a
   placeholder that is nested deeper, whatever WA's markup does. zoneHeader1 (logo and nav) and the footer
   zones stay boxed on purpose: full-bleed sections under a boxed nav is what
   animacionesmia.com does.

   Only add a page whose HTML re-constrains its own text. All four do - Inicio and
   Sobre Nosotras with .container { max-width: 1280px; margin: 0 auto }, Directiva
   and Fundadoras with max-widths on .dir-grid / .fund-grid and their hero copy,
   Contacto with .contact-grid { max-width: 1100px; margin: 0 auto }.
   Checked at a 1600px viewport: sections 1585, text 600-1280, no horizontal scroll.
   A page built in WA's editor has no such container and should stay boxed.

   Page ids are identical on the clone and on production (verified: Inicio is
   1075249 on both), so this list transfers as-is at replication.

   The margin resets kill the theme's 10px inter-gadget gap, which shows as a white
   seam between full-bleed bands against the #f8f9fa page background. WaLayoutContainer
   is in there because WA emits an empty .WaLayoutContainerFirst above the gadgets
   carrying the same 10px - that one was the bar between the header and the hero. */
:is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251,
     #PAGEID_1075252, #PAGEID_1075184)
:is(.zoneHeader2, .zoneContent) {
  padding: 0;
}

:is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251,
     #PAGEID_1075252, #PAGEID_1075184)
:is(.zoneHeader2, .zoneContent) > .WaPlaceHolder {
  max-width: none;
}

:is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251,
     #PAGEID_1075252, #PAGEID_1075184)
:is(.zoneHeader2, .zoneContent) > .WaPlaceHolder > div {
  padding: 0;
}

:is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251,
     #PAGEID_1075252, #PAGEID_1075184)
:is(.zoneHeader2, .zoneContent) [class^="WaGadget"],
:is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251,
     #PAGEID_1075252, #PAGEID_1075184)
:is(.zoneHeader2, .zoneContent) [class^="WaLayoutContainer"] {
  margin-bottom: 0;
}

/* the gallery's own search label and result count sit on that dark ground */
#PAGEID_1075175 .memberDirectorySearchAreaOuterContainer label,
#PAGEID_1075175 .memberDirectorySearchAreaOuterContainer .searchResult {
  color: #d1d5db;
}


/* The four dark content pages paint their surface inside the gadget (.mia-about,
   .dir-page, .fund-page, .contact-wrap). Sobre Nosotras used to do it with a bare
   `body` rule, which also overrode the theme elsewhere on the page; now that its
   CSS is scoped, the page background belongs here instead. */
:is(#PAGEID_1075185, #PAGEID_1075251, #PAGEID_1075252, #PAGEID_1075184) {
  background: #111827;
}


/* Inicio's live socias count.

   The page carries a Member Directory gadget purely as a data source: the script
   in Global JavaScript reads the count WA renders into #membersFound and writes it
   into the "Socias activas" stat, so the home page and /Socias can never disagree.

   Parked off-screen rather than display:none - a display:none gadget can skip work
   that depends on layout, and this one has to actually render to produce a count.
   aria-hidden is not set here because the markup is not ours to annotate; the
   duplicate content is off-screen but still in the accessibility tree, which is a
   known wart of this approach. */
#PAGEID_1075249 .WaGadgetMemberDirectory {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   MIANIMA's pale pink headings (PAGEID_1075261).

   The page is built in WA's rich-text editor, which stores colour choices as
   legacy `<font color="...">` attributes. Eight headings carry #F6A1A6, which on
   the #f8f9fa page measures **1.89:1** - it fails even the 3:1 bar that large text
   is allowed, and at 30px it is barely visible at all.

   A `color` attribute is a presentational hint, so any author rule beats it; the
   attribute selector needs the `i` flag because the page mixes #F6A1A6 and #f6a1a6.

   Brand red rather than a lighter pink on purpose: at 4.73:1 it also clears the
   4.5:1 bar for normal text, so it stays compliant if anyone later shrinks these
   headings. The page's other two swatches (#F35E24 at 3.09, #ef5564 at 3.24) pass
   as large text and are left alone.

   The durable fix is for whoever edits the page to stop choosing that swatch; this
   rule is here because a stylesheet survives the next edit and the editor does not. */
#PAGEID_1075261 font[color="#f6a1a6" i] {
  color: #d8242e;
}


/* ---------------------------------------------------------------------------
   Cookie banner (vanilla-cookieconsent 3.1.0, self-hosted from
   /resources/cookieconsent/, driven by site-content/cookie-consent.js).

   The library is themed entirely through custom properties on its own #cc-main
   root, so there are no vendor class names to hard-code and nothing here can leak
   onto WA markup. These are the same three properties the React app sets in
   useCookieConsent.ts - both sites get the same red.

   Accept and Reject need no help to be equally prominent: the library renders
   them as equal-weight buttons unless guiOptions.equalWeightButtons is turned
   off, and it is not. */
#cc-main {
  --cc-btn-primary-bg: #d8242e;
  --cc-btn-primary-hover-bg: #b01f28;
  --cc-toggle-on-bg: #d8242e;
}


/* ---------------------------------------------------------------------------
   The Contacto form, embedded (PAGEID_1075136 + .miaEmbedded).

   WildApricot has no contact-form gadget. The route the help article takes -
   "Creating a Contact Us or feedback page" - is the member "send a message"
   form: a contact record holds the destination address and its public profile
   exposes /Sys/PublicProfile/SendEmail/<account>/<contact>, which anyone may
   post to. It is a whole WA page, not a gadget, so the Contacto page embeds it
   in an iframe (pages/contacto/02-grid.html) and embed-frame.js, running inside
   the frame, marks that document .miaEmbedded and reports its height.

   Everything below is what turns that page into the contents of a card:

     - the chrome goes. Header, nav, footer and WA branding are already on the
       page around the frame; the page title, the back-to-profile link and the
       "Send message" caption belong to a journey that starts on a member
       profile, and the frame is not on that journey. The contact record's own
       name goes with them - "Nuestro Contacto" is an internal label, and the
       card already says Envianos un mensaje. So does Cancel: inside a frame it
       navigates to the profile of a contact nobody is meant to see.
     - the colours invert. Phase 3 styles this page dark, because it is reached
       from the dark member gallery (see the PAGEID list above and
       theme/Gadgets/Sys.EmailMember/gadget.email.member.less). Contacto keeps
       the two white cards of the React design, so inside the frame the same
       form has to read as light: transparent page, dark labels, white fields.
     - the label column goes. WA lays each field out as a table with a
       right-aligned label cell, and floats the label in the textarea row; at
       the width of half a 1100px grid that wastes a third of the card. Stacked,
       the fields are full width.

   Scoped to the embedded state only: opened directly from a member profile,
   this page is untouched and stays dark. */
#PAGEID_1075136.miaEmbedded .zoneContent {
  background: transparent;
  color: #4b5563;
}

.miaEmbedded :is(.zoneHeader1, .zoneHeader2, .zoneFooter1, .zoneFooter2, .zoneWAbranding, .WaPlaceHolderMobilePanel, .mobilePanelContainer) {
  display: none;
}

.miaEmbedded :is(.pageTitleOuterContainer, .pageBackContainer, .captionOuterContainer, .memberDirectoryDetailsHeaderContainer) {
  display: none;
}

.miaEmbedded input[name$="cancelButton"] {
  display: none;
}

/* The confirmation state, which replaces the fields with a summary of what was
   sent and a "Back to profile" button. Back means the profile of the contact
   record the form writes to - a page no visitor should be sent to, and from
   inside the frame it would load that page into the card.

   Keyed on the absence of the Send button, which is what tells the two states
   apart, rather than on the button's own label: es-translations.js rewrites
   that label to "Volver al perfil", so a selector naming the English one would
   stop matching the moment both are pasted. */
.miaEmbedded .WaGadgetEmailMember:not(:has(input[name$="sendButton"])) :is(input[type="button"], input[type="submit"], button, a[href*="/Sys/PublicProfile/"]) {
  display: none;
}

/* the frame is measured from the gadget box, so its own margins have to be the
   only ones in play - body's would be measured out of the total and clip. */
body.miaEmbedded {
  margin: 0;
  background: transparent;
}

/* the content zone's own 40px, which the card already provides */
#PAGEID_1075136.miaEmbedded .WaPlaceHolderContent > div {
  padding: 0;
}

/* Hiding a block leaves the whitespace around it as the only inline content of
   its parent, and whitespace-only content still draws a line box - 26px of dead
   space per hidden block, three times over, measured. A flex container does not
   render whitespace-only children at all, which is the cheapest way to say "the
   gap is not real"; these three are the parents the hidden chrome sat in.
   Their children are blocks either way, so column flex changes nothing else. */
#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember,
#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember > form,
#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember .inner:has(> .captionOuterContainer),
#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember .inner:has(> .memberDirectoryDetailsHeaderContainer) {
  display: flex;
  flex-direction: column;
}

/* Phase 3's dark card, flattened: the white .contact-form-card around the frame
   is the card now. */
#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember .sectionOuterContainer {
  margin-top: 0;
}

#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember :is(.fieldLabel, .fieldLabel strong, .mandatoryFieldsTitle) {
  color: #4b5563;
}

/* the theme right-aligns it against a full-width form; over one card column it
   reads as a stray */
#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember .mandatoryFieldsTitle {
  margin-bottom: 20px;
  border-bottom-color: #e5e7eb;
  text-align: left;
}

/* red reads 4.7:1 on white, so the on-dark coral of the dark page goes back to
   brand red here */
#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember :is(.mandatorySymbol, .validationError, a) {
  color: #d8242e;
}

#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember :is(input[type="text"], input[type="email"], textarea) {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #111827;
}

#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember textarea {
  min-height: 140px;
}

/* WA's field table: one cell per row, so the label sits above its input */
.miaEmbedded .WaGadgetEmailMember .fieldSubContainer :is(table, tbody, tr, td) {
  display: block;
  width: 100%;
}

.miaEmbedded .WaGadgetEmailMember .fieldSubContainer td.left {
  text-align: left;
}

/* float:none is for the multi-line row (Mensaje), which is not a table: there
   WA floats the label beside the textarea instead. */
.miaEmbedded .WaGadgetEmailMember :is(.fieldLabel, .fieldBody) {
  float: none;
  width: auto;
}

.miaEmbedded .WaGadgetEmailMember .fieldLabel {
  padding: 0 0 4px;
  text-align: left;
}

.miaEmbedded .WaGadgetEmailMember .buttonsContainer .fieldLabel {
  display: none;
}

#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember input[type="button"] {
  padding: 12px 28px;
  border: 0;
  border-radius: 8px;
  background: #d8242e;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

#PAGEID_1075136.miaEmbedded .WaGadgetEmailMember input[type="button"]:hover {
  background: #b01f28;
}