.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 0;
  min-width: 0;
}


/*######## MY APP ########### */

/*SCROLL BARS*/
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }

@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
}

.theme-dark ::-webkit-scrollbar-track, .dark ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.theme-dark ::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

/* BOTTOM TOOL BAR */
.toolbar-inner {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.toolbar-inner .link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px; 
  color: #888;
  transition: color 0.2s;
  border-radius: 50%; 
  background-color: transparent;
}
.toolbar-inner .link svg {
  stroke: currentColor;
}
.toolbar-inner .link.active {
  color: var(--f7-color-primary) !important;
  background-color: transparent !important;
}
.toolbar-indicator {
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background-color: var(--f7-color-primary);
  border-radius: 50%;
}
.toolbar-inner .link::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  pointer-events: none;
  transition: transform 0.6s, opacity 0.6s;
}
.toolbar-inner .link:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0s, opacity 0.3s;
}
.toolbar-layout-vertical .link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
.toolbar-layout-vertical .link span {
    font-size: 8px; 
    font-weight: 400; 
    margin-top: 2px;
	margin-bottom:10px; 
    line-height: 1;
	text-transform: uppercase;
  }
  
/*---toast icon message---- */
.custom-toast-lucide .toast-inner {
  padding: 12px 16px;
  border-radius: 12px;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 15px;
  backdrop-filter: blur(6px);
}
.custom-toast-lucide svg {
  stroke: var(--f7-color-primary);
}
.toast-close-button {
  cursor: pointer;
  color: inherit;
}

.text-ellipsis {
  white-space: nowrap !mportant;
  overflow: hidden !mportant;
  text-overflow: ellipsis !mportant;
}























/* LEFT MENU PANEL */
.panel.panel-left {
  border-top-right-radius:    0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
}
/* RIGHT MENU PANEL */
.panel.panel-right {
  border-top-left-radius:     0 !important;
  border-bottom-left-radius:  0 !important;
}
















/* Base circle wrapper (light & dark as before) */
.circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;               /* your padding around the image */
  border-radius: 50%;         /* keep the circle shape */
  background-color: rgba(200,200,200,0.1); /* light mode fallback */
}

/* Ensure the image stays circular */
.circle img {
  display: block;
  border-radius: 50%;
}

/* Rounded “card” matching the circle’s curvature */
.lista_clubes {
  padding: 2px 2px;               /* vertical + horizontal padding */
  margin: 4px 10px;                   /* space between list items */
  border-radius: 60px;             /* half of your 48px circle diameter */
  background-color: #fff;          /* light mode background */
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  transition: background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  padding:0px !important;
}

/* Space between circle avatar and title */
.lista_clubes .circle {
  margin-right: 12px;
}

/* Dark-mode overrides */
@media (prefers-color-scheme: dark) {
  .lista_clubes {
    background-color: #2c2c2e;      /* dark gray card */
    box-shadow: 0 1px 1px rgba(0,0,0,0.6);
  }
}

/* Dark‐mode override for both prefers-color-scheme and F7's .dark class */
@media (prefers-color-scheme: dark) {
  .lista_clubes {
    background-color: #2c2c2e !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
  }
}

/* And in case you’re toggling .dark on <html> by JS/theme switch: */
html.dark .lista_clubes {
  background-color: #2c2c2e !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* Optional: add a tap/highlight effect */
.lista_clubes:active {
  opacity: 0.7;
  transition: opacity 0.1s;
}

























/* ####### New APP configs */
/* #################### */



/* ICONES LUCILE */
.icon svg {
  stroke-width: 1;
  opacity:0.5;
 }
 
 svg {
  stroke-width: 1;
 }
 
 /* BARRA DE PESQUISA NA ESCOLHA DA BOX */
.top_search_bar {
  background: var(--f7-bars-bg-color, #fff);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  transition: background 0.1s ease, box-shadow 0.1s ease;
  position: fixed;
  top: 0px;
  left: 0px;
}
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
}

/* MENSAGENS TOAST COM E SEM ICONES */
.custom-toast-lucide.toast-container {
  width: auto;
  max-width: 300px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.custom-toast-lucide .toast-content-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--f7-bars-bg-color) 85%, var(--f7-color-primary)),
    color-mix(in srgb, var(--f7-bars-bg-color) 70%, var(--f7-theme-color-shade))
  );
  color: var(--f7-text-color);
  border-radius: 15px;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  font-weight: 500;
  min-width: 200px;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.custom-toast-lucide .toast-message {
  line-height: 1.4;
}
.custom-toast-lucide .lucide-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  color: var(--f7-text-color);
}
.custom-toast-lucide .lucide-icon-container svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1;
}
.custom-toast-right.toast.toast-bottom {
  left: auto !important;
  right: 16px !important;
  transform: translate(0, 0) !important;
}
@keyframes toast-tada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.05) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.05) rotate(-3deg); }
  100% { transform: scale(1); }
}
.toast-content-wrapper.tada {
  animation: toast-tada 0.8s ease;
}
.toast-progress-bar {
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.toast {
  background: none;
  box-shadow: none;
}

/* LAZY LOADING - NÃO TENHO CERTEZA SE FAZ FALTA */
img.anim_img{transition:all .5s ease-in-out;}
img.anim_img.lazy{opacity:0;filter:blur(10px);transform:scale(0.95);}
img.anim_img:not(.lazy){opacity:1;filter:blur(0);transform:scale(1);}

/* PASSWORD TOGGLE VIEW/HIDDEN */
.password-toggle {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  z-index: 5;
}
.password-toggle .icon {
  width: 22px;
  height: 22px;
}

/* MESSAGEM DE CONFIRMAÇÃO */
.custom-toast-lucide.toast-container {
  width: auto;
  max-width: 300px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.custom-toast-lucide .toast-content-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--f7-bars-bg-color) 85%, var(--f7-color-primary)),
    color-mix(in srgb, var(--f7-bars-bg-color) 70%, var(--f7-theme-color-shade))
  );
  color: var(--f7-text-color);
  border-radius: 15px;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  font-weight: 500;
  min-width: 200px;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.custom-toast-lucide .toast-message {
  line-height: 1.4;
}
.custom-toast-lucide .lucide-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  color: var(--f7-text-color);
}
.custom-toast-lucide .lucide-icon-container svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1;
}
.custom-toast-right.toast.toast-bottom {
  left: auto !important;
  right: 16px !important;
  transform: translate(0, 0) !important;
}
.toast-content-wrapper.tada {
  animation: toast-tada 0.8s ease;
}
.toast-progress-bar {
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.toast {
  background: none;
  box-shadow: none;
}


/* --- 2. STYLES FOR CUSTOM CONFIRMATION DIALOG --- */
/* This creates a dialog that matches the toast aesthetic */

/* 2.1. Main Dialog Frame */
.custom-confirm-dialog.dialog {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--f7-bars-bg-color) 85%, var(--f7-color-primary)),
    color-mix(in srgb, var(--f7-bars-bg-color) 70%, var(--f7-theme-color-shade))
  );
  color: var(--f7-text-color);
  border-radius: 15px;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
  --f7-dialog-bg-color: transparent;
  --f7-dialog-box-shadow: none;
}

/* 2.2. Dialog Content Area (Icon & Message Layout) */
.custom-confirm-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* This centers the icon and text horizontally */
  padding: 24px 24px 20px 24px;
  box-sizing: border-box;
}
.custom-confirm-dialog .dialog-icon-container {
  width: 48px;
  height: 48px;
  margin-bottom: 16px; /* Increased space between icon and message */
}
.custom-confirm-dialog .dialog-icon-container svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}
/* The .dialog-title-text style has been removed */
.custom-confirm-dialog .dialog-message-text {
  font-size: 15px;
  font-weight: 500; /* Slightly bolder to stand out more without a title */
  line-height: 1.5;
  text-align: center;
  opacity: 0.9;
  max-width: 95%;
}

/* 2.3. Dialog Buttons Area */
.custom-confirm-dialog .dialog-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
  padding: 0 24px 24px 24px;
  box-sizing: border-box;
}
.custom-confirm-dialog .dialog-button {
  min-width: 100px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--f7-text-color);
  transition: background-color 0.2s ease;
  flex-grow: 1;
  flex-basis: 0;
}
.custom-confirm-dialog .dialog-button:active {
  background: rgba(255, 255, 255, 0.2);
}
.custom-confirm-dialog .dialog-button-bold {
  background: var(--f7-color-primary);
  color: var(--wp-on-theme, #fff);
}
.custom-confirm-dialog .dialog-button-bold:active {
  background: var(--f7-theme-color-shade);
}
/* verticalButtons (listas de opções, ex.: denúncias): o flex-basis:0/grow:1 acima (pensado
   para os 2 botões horizontais do confirmar) colapsava os botões a altura 0 em coluna */
.custom-confirm-dialog.dialog-buttons-vertical .dialog-buttons {
  flex-direction: column;
  height: auto;
  gap: 8px;
}
.custom-confirm-dialog.dialog-buttons-vertical .dialog-button {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 100%;
  height: 44px;
  min-width: 0;
}

/* --- 3. KEYFRAME ANIMATIONS --- */
@keyframes toast-tada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.05) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.05) rotate(-3deg); }
  100% { transform: scale(1); }
}
.custom-confirm-dialog .dialog-message-text h3 {
  margin: 0 0 8px 0; /* Space below the title */
  font-size: 18px;
  font-weight: 600;
  text-transform:uppercase;
  line-height: 1.3;
  color: var(--f7-text-color); /* Ensure it uses the main text color */
}

.custom-confirm-dialog .dialog-message-text p {
  margin: 0;
  font-size: 15px;
  opacity: 0.9;
}









/* 4 PASSOS NOVO REGISTO */
.account-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.account-steps .step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--f7-text-color-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.account-steps .step.current {
  background-color: var(--f7-color-primary);
}

/* * OBRIGATÓRIO */
.must {
  color: var(--f7-color-primary);
  font-size: 20px;
}

/* CHECKBOX WITH ICONS */
.custom-checkbox-li {}
.custom-checkbox-li .custom-label-wrapper {
  display: flex;
  width: 100%;
  align-items: center; 
  cursor: pointer;
  -webkit-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0px;
  position: relative; 
  border-radius: var(--f7-input-outline-border-radius);
  overflow: hidden; 
}
.custom-checkbox-li .item-media {
  margin-left: 0px;
}
.custom-checkbox-li > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.custom-checkbox-li .icon-unchecked {
  display: inline-block;
}
.custom-checkbox-li .icon-checked {
  display: none;
}
.custom-checkbox-li > input[type="checkbox"]:checked ~ .custom-label-wrapper .icon-unchecked {
  display: none;
}
.custom-checkbox-li > input[type="checkbox"]:checked ~ .custom-label-wrapper .icon-checked {
  display: inline-block;
  color: var(--f7-color-primary);
}
.custom-checkbox-li .custom-label-wrapper .item-inner {
  padding-top: 0;
  padding-bottom: 0;
}
.custom-checkbox-li:has(input[type="checkbox"]:checked)::after {
  border-color: var(--f7-color-primary);
}

/* LOADING BUTTON DOTS */
.loading-button .loader-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
}
.loader-dots span {
  display: block;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.12em;
  background: currentColor;
  border-radius: 50%;
  animation: bounce 0.8s infinite ease-in-out both;
}
.loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.loader-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}


/* MENU CONFIGURAÇÕES */
#config-menu {
  padding-left: 10px;
  padding-right: 10px;
}
#config-menu ul {
  margin: 0;
  padding: 0;
}
#config-menu ul li {
  margin: 3px 0;
  border-radius: 40px;
  background: var(--f7-card-bg-color);
  box-shadow: var(--f7-card-box-shadow);
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#config-menu ul li:active {
  transform: scale(0.98);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#config-menu .item-content {
  padding: 6px 12px;
  min-height: 30px;
}
#config-menu .item-inner {
  margin-left: 18px;
}
#config-menu .item-media {
  margin-left: 12px;
}

/* NAVBAR FADEIN ON SCROLL */
.navbar-transparent {
  background: transparent;
  box-shadow: none;
}
.navbar-bg {
  background: var(--f7-bars-bg-color);
  opacity: 0.95;
  transition: opacity 300ms ease;
  backdrop-filter: blur(8px);
}
.page-content {
  padding-top: var(--f7-navbar-height);
}
.navbar .navbar-inner .title {
  transition: opacity 300ms ease;
}
.navbar.navbar-transparent .navbar-inner .title {
  opacity: 1; 
}

/* MODAL ESCOLHE IDIOMA */
.sheet-modal.smart-select-sheet .item-media img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.sheet-modal.smart-select-sheet.modal-in {
  margin: 0 auto !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  padding-top: 5px !important;
  border-top-left-radius: 40px !important;
  border-top-right-radius: 40px !important;
  box-sizing: border-box !important;
  max-height: none !important;
  height: auto !important;
}
.sheet-modal.smart-select-sheet.modal-in .sheet-modal-inner {
  padding: 0 12px !important;
  max-height: none !important;
}
.sheet-modal.smart-select-sheet.modal-in .sheet-modal-inner .page-content,
.sheet-modal.smart-select-sheet.modal-in .smart-select-list {
  padding: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.sheet-modal.smart-select-sheet.modal-in .toolbar-top .toolbar-inner {
  padding: 0 20px 0 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  text-transform: uppercase !important;
}
.sheet-modal.smart-select-sheet.modal-in .toolbar-top .toolbar-inner .right {
  margin-left: auto !important;
}

/* CARD STYLING */
.card {
  background: linear-gradient(
	to left,
	var(--f7-card-bg-color) 0%,
	color-mix(in srgb, var(--f7-card-bg-color) 75%, var(--card-fade-color)) 100%
  );
  margin:               16px;
  border-radius:        12px;
 /*overflow:             hidden; */
  transition:           box-shadow 0.3s ease, transform 0.3s ease;
}
.light  .card {
  box-shadow:           0 2px 8px rgba(0, 0, 0, 0.1);
}
.light  .card:hover {
  transform:            translateY(-2px);
  box-shadow:           0 4px 16px rgba(0, 0, 0, 0.15);
}
.dark .card {
  box-shadow:           0 2px 8px rgba(0, 0, 0, 0.5);
}
.dark .card:hover {
  transform:            translateX(2px);
  box-shadow:           0 4px 16px rgba(0, 0, 0, 0.7);
}
.card-header {
  padding: 20px;
  font-size: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.03), transparent);
  text-transform:uppercase;
}
.dark .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
}
.card-content {
  padding:              20px;
  font-size:            14px;
  line-height:          1.6;
  color:                inherit;
  opacity: 0.7;
}
.card-footer {
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.dark .card-footer {
  border-top-color:     rgba(255,255,255,0.1);
}

.card-footer .link {
  padding:              8px 12px;
  border-radius: 6px;
  font-size:14px;
  text-transform:uppercase;
}

.card-outline {
	border-color: rgba(var(--f7-theme-color-rgb), 0.2) !important;
}
:root {
  --card-fade-color: white;
}
.dark {
  --card-fade-color: black;
}





/* SIDE BY SIDE BUTTON ICONS */
.plan-actions { display: flex; gap: 12px; }
.plan-actions .link {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: var(--f7-card-background); border-radius: 50%;
transition: background 0.3s, color 0.3s;
}
.plan-actions .link:hover { background: var(--f7-color-primary); color: var(--wp-on-theme, #fff); }

/* TOOLTIP INFOS */
.tooltip-icon {
  cursor: help;
  color: var(--f7-color-primary); /* matches your app theme */
  margin-left: 6px;
  vertical-align: middle;
}

/* SHEET MODAL TOP */
.custom-sheet {
  margin-left: 3%;
  margin-right: 3%;
  width: 94%;
}





.button-fill{
	background-color: var(--f7-color-primary) !important;
}
.tema_font {
	color: var(--f7-color-primary);
}





/* FONTES E TIPOS DE LETRA */
.upper_case {
	text-transform:uppercase;
}
.texto30 {
	font-size:30px;
	text-transform:uppercase;
	color: var(--f7-color-primary);
}
.texto16 {
	font-size:14px;
	text-transform:uppercase;
	opacity:0.5;
}
.texto18 {
	font-size:18px;
	text-transform:uppercase;
}
.texto20 {
	font-size:20px;
	text-transform:uppercase;
	color: var(--f7-color-primary);
	line-height:22px;
}
.texto14 {
	font-size:14px;
	opacity:0.7;
	line-height:18px;
}
.texto11 {
	font-size:11px;
	opacity:0.7;
	line-height:14px;
}
.texto10 {
	font-size:10px;
	opacity:0.5;
	line-height:14px;
	text-transform:uppercase;
}
.texto35 {
  font-size: 35px;
  text-transform: uppercase;
  position:absolute; 
  top:15px; 
  z-index:100; 
  width:100%;
  line-height:38px;
  font-weight: bold;
  letter-spacing: 1px;
  display: inline-block;          
  -webkit-text-stroke-width: 1px; 
  -webkit-text-stroke-color: rgba(0,0,0,0.8);
  color: #fff;                  
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.7));
}
.dark .texto35 {
  -webkit-text-stroke-color: rgba(255,255,255,0.8);
  color: #000;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
}
.texto_msg {
	font-size:20px;
	opacity:0.6;
	text-transform:uppercase;
}

/* MESSAGE WITH TEXT OVER IMAGE */
 .msg-image-container {
	margin-top:20px;
	position: relative;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
.msg-image-container img {
	display: block;
	width: 100%;
	height: auto;
	opacity:0.1;
}
.msg-text-overlay {
	position: absolute;
	top: 50%;
	left: 50%; 
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 60vw;
	line-height:30px;
	text-align: center;
	font-size:16px;
	text-transform:uppercase;
}

/* NO TEXT SELECTION ON EVERY PAGE */
body {
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* IE10+ */
}
/* EXCECAO: BLOCOS QUE SAO TEXTO PARA LER.
   O none do body existe para a app parecer nativa (nao selecionar ao arrastar), mas apanhava
   TUDO — e 14 membros reportaram que deixaram de poder copiar o treino para o Strava/Garmin, o
   nome de um movimento para pesquisar, ou uma anotacao de aluno para a atualizar (bug 480; dois
   gestores contaram o tempo que perdiam a reescreve-la a mao).
   .sel-txt e a classe a usar em texto novo; as outras sao os blocos que ja existiam.
   NAO alargar isto a menus, botoes, calendario nem as filas de chips arrastaveis (essas tem o
   seu proprio user-select:none, que e o que faz o arrastar-para-deslizar funcionar). */
.sel-txt, .lb-desc, .cross-plan-desc, .wod-card-desc, .vr-obs {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}
/* NO IMAGE SELECTION ON PAGE */
img {
  -webkit-user-drag: none;
  user-drag: none;
}

.item-header {
	opacity:0.5 !important;
}

/* FLASH ICONS */
@keyframes f7-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%     { opacity: 0; }
}
.icon-flash {
  animation: f7-flash 1s ease-in-out infinite;
}

.icon_align{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.icon_align_sm{
  display:inline-flex;
  align-items:center;
}

/*===================================================================================================
  TEXTO E ÍCONES POR CIMA DA COR DO TEMA — um critério só, para toda a app (Miguel, 2026-09-06).

  O `--wp-on-theme` é calculado no arranque (js/app.js) pela cor que MAIS SE LÊ sobre o tema: o
  escuro ou o branco, medidos por contraste. Num tema amarelo, lima ou ciano dá escuro; num tema
  escuro dá branco. O que faltava era o Framework7 saber disso: os componentes dele traziam branco
  fixo (`--f7-button-fill-text-color:#fff`) ou a cor que o tema `md` gera da sua própria paleta, que
  não é a cor que nós pintamos — daí um botão amarelo com letra branca.
  Redirecionar as três variáveis aqui corrige TODOS os botões cheios, FABs e vistos da app de uma
  vez. O fallback é o branco de sempre, por isso nada muda onde já estava bem.
===================================================================================================*/
:root {
	--f7-button-fill-text-color: var(--wp-on-theme, #fff);
	--f7-fab-text-color: var(--wp-on-theme, #fff);
	--f7-checkbox-icon-color: var(--wp-on-theme, #fff);
}
/*---BADGES: o Framework7 só pinta o badge com a cor do tema quando ele tem uma classe `color-*`;
     sem isso o fundo é cinzento e o branco lê-se bem. Por isso não se mexe na variável global —
     seriam os cinzentos a ficar com letra escura. Corrigem-se só os que TÊM fundo do tema: os que
     o pedem por classe, e os que o escrevem em estilo inline (o do sino e os do menu lateral).---*/
.badge[class*="color-"],
.badge[style*="--f7-theme-color"] { color: var(--wp-on-theme, #fff); }

/*---FIO DE ESTADO nos cartões de aviso da home (mensalidade, packs, pagamentos). Miguel, 2026-09-06:
     a mesma leitura instantânea que o cartão do saldo já dava — um filete de cor na ponta esquerda
     quando há um problema. Só aparece quando o prazo EXPIROU (vermelho) ou acaba HOJE (laranja);
     um aviso dentro do prazo não leva fio nenhum, senão a cor deixava de querer dizer alguma coisa.
     O `overflow:hidden` é o que faz o filete respeitar o canto arredondado do cartão.---*/
.al-fio { position: relative; overflow: hidden; }
.al-fio::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.al-fio.is-vencido::before { background: #e45757; }
.al-fio.is-hoje::before    { background: #e8a13c; }

/*---os ícones dos cartões de aviso (mensalidade, packs, pagamentos, federação) nasciam inclinados
     45º. Ficam DE PÉ (Miguel, 2026-09-06): a inclinação era um efeito sem função que só dificultava
     reconhecer o desenho do ícone num tamanho já pequeno.---*/
.icon_alert {
	width:40px;
	height:40px;
	stroke-width:0.3;
}
.icon_other {
	width:26px;
	height:26px;
	stroke-width:0.5; 
}

.info_text {
	padding-left:40px;
	font-size:10px; 
	text-transform:uppercase;
}

/* FADE IN CONTENT */
.fade_in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}
.fade_in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ICON FILL AND SHAKE */
.icon_fill {
  color: var(--f7-color-primary);
  fill: currentColor;
}
@keyframes thumb-press {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.like_anim {
  transform-origin: bottom left;
  animation: thumb-press 0.6s ease-out;
}

.rounded_top {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: block;
}
.rounded_bottom {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: block;
}

/* IMPUT BOXES OUTLINE */
.item-input-outline {
	opacity:0.7;
}

/* LIST ITEMS */
.card_list {
	margin-top:5px !important;
	margin-bottom:5px !important;
	--f7-card-border-radius: 12px;
}
.tit_list {
	padding-top:1px;
	padding-bottom:1px;
	text-transform:uppercase;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
}
.text_list {
	min-width: 0;
}
.foto_frame_list {
	padding:3px !important;
	width: 65px;
	height: 65px;
	overflow: hidden;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
.foto_list {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.link_list {
	padding:0px !important;
	border-radius: var(--f7-card-border-radius);
	overflow: hidden;
}
.list .item-inner::after {
  opacity: 0.3;
  height: 1px;
}
hr {
    border: 0;
    height: 1px; /* Sets the thickness */
    margin: 20px 0; /* Replaces your padding-top/bottom */
    
    /* Light Mode: Very subtle black opacity */
    background-color: rgba(0, 0, 0, 0.08); 
}

/* Dark Mode: Very subtle white opacity */
.dark hr,
.theme-dark .hr-discrete {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme_text_color {
	color:#FF0000;
}

.t_c{color: var(--f7-theme-color);}
.t_10{font-size:10px}.t_11{font-size:11px}.t_12{font-size:12px}.t_13{font-size:13px}.t_14{font-size:14px}.t_15{font-size:15px}.t_16{font-size:16px}.t_17{font-size:17px}.t_18{font-size:18px}.t_19{font-size:19px}.t_20{font-size:20px}.t_21{font-size:21px}.t_22{font-size:22px}.t_23{font-size:23px}.t_24{font-size:24px}.t_25{font-size:25px}.t_26{font-size:26px}.t_27{font-size:27px}.t_28{font-size:28px}.t_29{font-size:29px}.t_30{font-size:30px}.t_u{text-transform:uppercase}.t_05{opacity:.5}.t_06{opacity:.6}.t_07{opacity:.7}.t_08{opacity:.8}.t_09{opacity:.9}.m_0{margin:0!important}.m_1{margin:.25rem!important}.m_2{margin:.5rem!important}.m_3{margin:1rem!important}.m_4{margin:1.5rem!important}.m_5{margin:3rem!important}.m_auto{margin:auto!important}.mt_0{margin-top:0!important}.mt_1{margin-top:.25rem!important}.mt_2{margin-top:.5rem!important}.mt_3{margin-top:1rem!important}.mt_4{margin-top:1.5rem!important}.mt_5{margin-top:3rem!important}.mt_auto{margin-top:auto!important}.mb_0{margin-bottom:0!important}.mb_1{margin-bottom:.25rem!important}.mb_2{margin-bottom:.5rem!important}.mb_3{margin-bottom:1rem!important}.mb_4{margin-bottom:1.5rem!important}.mb_5{margin-bottom:3rem!important}.mb_auto{margin-bottom:auto!important}.ml_0{margin-left:0!important}.ml_1{margin-left:.25rem!important}.ml_2{margin-left:.5rem!important}.ml_3{margin-left:1rem!important}.ml_4{margin-left:1.5rem!important}.ml_5{margin-left:3rem!important}.ml_auto{margin-left:auto!important}.mr_0{margin-right:0!important}.mr_1{margin-right:.25rem!important}.mr_2{margin-right:.5rem!important}.mr_3{margin-right:1rem!important}.mr_4{margin-right:1.5rem!important}.mr_5{margin-right:3rem!important}.mr_auto{margin-right:auto!important}.mx_0{margin-right:0!important;margin-left:0!important}.mx_1{margin-right:.25rem!important;margin-left:.25rem!important}.mx_2{margin-right:.5rem!important;margin-left:.5rem!important}.mx_3{margin-right:1rem!important;margin-left:1rem!important}.mx_4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx_5{margin-right:3rem!important;margin-left:3rem!important}.mx_auto{margin-right:auto!important;margin-left:auto!important}.my_0{margin-top:0!important;margin-bottom:0!important}.my_1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my_2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my_3{margin-top:1rem!important;margin-bottom:1rem!important}.my_4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my_5{margin-top:3rem!important;margin-bottom:3rem!important}.my_auto{margin-top:auto!important;margin-bottom:auto!important}.p_0{padding:0!important}.p_1{padding:.25rem!important}.p_2{padding:.5rem!important}.p_3{padding:1rem!important}.p_4{padding:1.5rem!important}.p_5{padding:3rem!important}.pt_0{padding-top:0!important}.pt_1{padding-top:.25rem!important}.pt_2{padding-top:.5rem!important}.pt_3{padding-top:1rem!important}.pt_4{padding-top:1.5rem!important}.pt_5{padding-top:3rem!important}.pb_0{padding-bottom:0!important}.pb_1{padding-bottom:.25rem!important}.pb_2{padding-bottom:.5rem!important}.pb_3{padding-bottom:1rem!important}.pb_4{padding-bottom:1.5rem!important}.pb_5{padding-bottom:3rem!important}.pl_0{padding-left:0!important}.pl_1{padding-left:.25rem!important}.pl_2{padding-left:.5rem!important}.pl_3{padding-left:1rem!important}.pl_4{padding-left:1.5rem!important}.pl_5{padding-left:3rem!important}.pr_0{padding-right:0!important}.pr_1{padding-right:.25rem!important}.pr_2{padding-right:.5rem!important}.pr_3{padding-right:1rem!important}.pr_4{padding-right:1.5rem!important}.pr_5{padding-right:3rem!important}.px_0{padding-right:0!important;padding-left:0!important}.px_1{padding-right:.25rem!important;padding-left:.25rem!important}.px_2{padding-right:.5rem!important;padding-left:.5rem!important}.px_3{padding-right:1rem!important;padding-left:1rem!important}.px_4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px_5{padding-right:3rem!important;padding-left:3rem!important}.py_0{padding-top:0!important;padding-bottom:0!important}.py_1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py_2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py_3{padding-top:1rem!important;padding-bottom:1rem!important}.py_4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py_5{padding-top:3rem!important;padding-bottom:3rem!important}

/* CLAUDE CREATED CSS */

/* --- Toolbar inferior: QR check-in central em destaque (menu de tabs configurável) --- */
.toolbar .app-tab-qr svg { width: 28px; height: 28px; }
/* badge de não-lidos nas tabs (mensagens/mural) */
.toolbar .app-tab-badge { position: absolute; top: 2px; left: calc(50% + 4px); background: var(--f7-theme-color);
	font-size: 9px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; pointer-events: none; }

/* --- Configurador das tabs do membro (drag-and-drop) --- */
.tp-pool { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 16px 16px; }
.tp-pool-empty { opacity: .5; width: 100%; text-align: center; padding: 24px 0; }
.tp-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	padding: 10px 8px; border: 1px solid rgba(128,128,128,.25); border-radius: 14px; background: rgba(128,128,128,.06);
	min-width: 82px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.tp-chip span { font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }
.tp-chip svg { width: 22px; height: 22px; }
.tp-dragging-src { opacity: .3; }
.tp-chip.tp-ghost { position: fixed; z-index: 13000; margin: 0; pointer-events: none; opacity: .96;
	/* vive no body (fora da página) → cores explícitas, senão herda texto preto e "desaparece" no dark mode */
	color: var(--f7-text-color, #000);
	background: linear-gradient(rgba(128,128,128,.14), rgba(128,128,128,.14)) var(--f7-page-bg-color, #fff);
	border: 1px solid var(--f7-theme-color); }
.tp-footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; background: var(--f7-page-bg-color);
	border-top: 1px solid rgba(128,128,128,.25); padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
.tp-bar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .5; margin-bottom: 6px; }
.tp-bar { display: flex; gap: 6px; }
.tp-cell { flex: 1 1 0; min-width: 0; min-height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.tp-cell.tp-empty { border: 1.5px dashed rgba(128,128,128,.4); }
.tp-cell.tp-empty .tp-plus { font-size: 22px; opacity: .3; }
.tp-cell.tp-over { background: rgba(128,128,128,.14); outline: 2px solid var(--f7-theme-color); }
.tp-cell .tp-chip { border: 0; background: transparent; min-width: 0; width: 100%; padding: 6px 2px; }
.tp-locked { background: rgba(128,128,128,.06); border-radius: 14px; }
.tp-chip-qr { position: relative; color: var(--f7-theme-color); }
.tp-lock { position: absolute; top: -1px; right: 10px; width: 12px !important; height: 12px !important; opacity: .7; }
/* ferramentas de staff (admin) — assinaladas com escudo na cor do tema + borda temada */
.tp-chip { position: relative; }
.tp-chip-admin { border-color: var(--f7-theme-color); }
.tp-admin-badge { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--f7-theme-color); display: flex; align-items: center; justify-content: center; z-index: 2; }
.tp-admin-badge svg { width: 11px !important; height: 11px !important; color: #fff; }
/* SAVE esbatido quando não há alterações por gravar */
.tp-save-dim { opacity: .4; }
/* cabeçalho da barra: label à esquerda + link Repor/Usar sugestão à direita */
.tp-bar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tp-bar-head .tp-bar-label { margin-bottom: 0; }
.tp-suggest-link { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; color: inherit; }
.tp-suggest-link.tp-suggest-strong { color: var(--f7-theme-color); opacity: 1; }
/* caixa de opção (ex.: FAB casa) — mesmo look dos chips, agrupa label + toggle */
.tp-optbox { display: flex; align-items: center; gap: 10px; margin: 24px 16px 0; padding: 12px 14px;
	border: 1px solid rgba(128,128,128,.25); border-radius: 14px; background: rgba(128,128,128,.06); }

/* --- FAB global "voltar ao topo" (regra app-wide, ver CLAUDE.md) --- */
.app-scrolltop-fab {
	position: absolute;
	right: 18px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--f7-theme-color);
	border: none;
	cursor: pointer;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.3);
	opacity: 0;
	transform: translateY(12px) scale(.8);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.app-scrolltop-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* A COR VAI NO BOTÃO, não no <i>: o ícone é criado como <i data-lucide> e o lucide TROCA esse <i>
   por um <svg>, portanto um seletor `... i` deixa de encontrar o que quer que seja. O SVG desenha-se
   com currentColor, logo herda daqui. (Mesma armadilha da checkbox do onboarding.)
   E a cor é a que contrasta com o tema — branco fixo desaparecia nas boxes de tema claro. */
.app-scrolltop-fab { color: var(--wp-on-theme, #fff); }
.app-scrolltop-fab i, .app-scrolltop-fab svg { width: 24px; height: 24px; color: inherit; }

/* --- Home FAB global (arrastável, volta à home; ver CLAUDE.md) --- */
.regy-home-fab {
	position: fixed;
	left: 16px;
	bottom: 84px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--f7-theme-color);
	border: none;
	cursor: pointer;
	z-index: 13500;               /* acima de popups/sheets/ações p/ os poder fechar */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.35);
	opacity: 0;
	transform: scale(.6);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	touch-action: none;          /* agarrar arrasta em vez de scrollar */
	-webkit-user-drag: none;
}
.regy-home-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.regy-home-fab.dragging { transition: none; cursor: grabbing; }
/* A COR VAI NO BOTÃO, não no <i> — ver a nota no .app-scrolltop-fab: o lucide troca o <i> por um
   <svg> e o seletor `... i` fica sem alvo. Era por isso que o ícone saía azul por cima do azul:
   não era a cor errada, era a regra a não pegar de todo.
   O --wp-on-theme é calculado no arranque (js/app.js) pela luminância do tema; num tema escuro
   continua a dar branco, ou seja, não muda nada onde já estava bem. */
.regy-home-fab { color: var(--wp-on-theme, #fff); }
.regy-home-fab i, .regy-home-fab svg { width: 24px; height: 24px; color: inherit; }

/* ===== INFO POINTS (ⓘ) — sistema app-wide (ver regra em CLAUDE.md) ===== */
.info-point        { opacity:1; cursor:pointer; vertical-align:middle; }
.info-point .icon  { width:16px; height:16px; }
.info-point-pop        { width:252px; max-width:80vw; }
.info-point-pop .block { font-size:13px; line-height:1.45; color:var(--f7-text-color); }

/* ===== Não-seleção no "app shell" (feel nativo) — conteúdo continua copiável; inputs editáveis ===== */
.navbar, .toolbar, .subnavbar, .tabbar, .fab, .fab a,
.button, .block-title, .block-header,
.navbar .link, .toolbar .link, .tabbar .link {
	-webkit-user-select: none;
	user-select: none;
}
/* imagens não fazem o "arrasto fantasma" (drag) em toda a app */
img { -webkit-user-drag: none; }

/* ===== Menu ADMIN (painel direito) ===== */
/* todos os itens em MAIÚSCULAS */
.admin-menu .item-title { text-transform: uppercase; }

/* sub-itens dos accordions: fonte menor, ícone menor e mais indentados */
.admin-menu .accordion-item-content .item-title { font-size: 13px; }
.admin-menu .accordion-item-content .item-content { padding-left: 26px; }
.admin-menu .accordion-item-content .item-media svg,
.admin-menu .accordion-item-content .item-media i { width: 18px; height: 18px; }

/* menu do aluno (painel esquerdo): títulos em MAIÚSCULAS (igual ao menu ADMIN) */
.panel-left .list .item-title { text-transform: uppercase; }
/* sub-itens do accordion (ex.: Store): ícone e texto um pouco mais pequenos */
.panel-left .accordion-item-content .item-title { font-size: 13px; }
.panel-left .accordion-item-content .item-media svg,
.panel-left .accordion-item-content .item-media i { width: 18px; height: 18px; }

/* bandeira do gatilho de idioma (form Adicionar membro) — igual ao sheet de idiomas */
.bandeira_atl {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* ===== Tab Mensalidades (Fees) ===== */
/* card de estado no topo (80px de topo p/ não sobrepor a navbar transparente) */
.fee-status-card { margin: 80px 15px 15px 15px; }
.fee-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fee-status-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fee-status-mode { font-size: 16px; font-weight: 600; }
.fee-status-value { font-size: 13px; opacity: 0.7; }
.fee-status-chip {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.fee-status-chip.is-active     { background: rgba(0,200,0,0.15);   color: #00b050; }
.fee-status-chip.is-expiring   { background: rgba(255,153,0,0.15); color: #ff9900; }
.fee-status-chip.is-expired    { background: rgba(255,59,48,0.15); color: #ff3b30; }
.fee-status-chip.is-incomplete { background: rgba(224,168,0,0.18); color: #e0a800; }
.fee-status-chip.is-inactive   { background: rgba(150,150,150,0.18); color: #999; }
.fee-status-chip.is-neutral    { background: rgba(120,120,255,0.12); color: var(--f7-theme-color); }
.fee-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* indicador de validação do IBAN */
.iban-feedback { font-size: 12px; padding: 2px 16px 0; min-height: 16px; }
.iban-feedback.ok  { color: #00b050; }
.iban-feedback.bad { color: #ff3b30; }

/* cabeçalho da lista de pagamentos (título + total) */
.fee-list-header { display: flex; justify-content: space-between; align-items: center; }
.fee-total-badge { font-weight: 600; opacity: 0.85; }

/* ===== Tab Alertas (Alerts) ===== */
/* borda colorida do card conforme estado da validade */
.alert-card { border-left: 4px solid transparent; }
.alert-card.is-expired    { border-left-color: #ff3b30; }
.alert-card.is-expiring   { border-left-color: #ff9900; }
.alert-card.is-active     { border-left-color: #00b050; }
.alert-card.is-incomplete { border-left-color: #e0a800; }
.alert-card.is-inactive   { border-left-color: rgba(150,150,150,0.4); }
/* cabeçalho do card: ícone + nome à esquerda, chip à direita */
.alert-card-header { display: flex; align-items: center; gap: 10px; }
.alert-card-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.alert-card-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.alert-card-title img { flex-shrink: 0; }

/* ===== Tab Anotações (Notes) ===== */
/* cabeçalhos com ação à direita */
.anotacoes-header,
.anotacoes-dest-header { display: flex; justify-content: space-between; align-items: center; }
/* ícone de importância da anotação */
.anotacao-alerta { width: 22px; height: 22px; }
/* piscar (importância "Imminent") */
.pisca { animation: pisca-anim 0.9s steps(1) infinite; }
@keyframes pisca-anim { 50% { opacity: 0; } }

/* ===== Cabeçalho da ficha do atleta: banner + foto ===== */
.atl-header { position: relative; }
.atl-banner {
  width: 100%; aspect-ratio: 3 / 1;
  background-color: rgba(128,128,128,0.18); background-size: cover; background-position: center;
  /* desvanece para transparente no topo (fade começa a 1/2 da altura) — deixa a navbar legível */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, #000 100%);
}
.atl-photo { position: absolute; left: 20px; bottom: -38px; }
.atl-photo img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; border: 4px solid var(--f7-page-bg-color); box-shadow: 0 2px 8px rgba(0,0,0,0.25); background: var(--f7-page-bg-color); }
.atl-info { padding: 48px 15px 15px 15px; }

/* ===== Títulos de secção e botões sempre em MAIÚSCULAS (toda a app) ===== */
.block-title,
.button { text-transform: uppercase; }
/* títulos de secção da ficha do atleta indentados 20px */
#feed_dados .block-title { padding-left: 20px; padding-right: 20px; }
/* título do popup de anotações */
.popup-anotacao .texto18 { text-transform: uppercase; }

/* ===== Tab Aulas (Classes) ===== */
/* nota (atleta ligado a plano de pagamento) — afastada da navbar transparente */
.classes-note { margin: 80px 15px 0 15px; padding: 15px; background-color: rgba(255,165,0,0.1); border-radius: 8px; }
.classes-note-text { font-size: 14px; color: var(--f7-text-color); }
/* toggle todos/nenhum — à esquerda, alinhado com a coluna dos checkboxes
   (margem da lista 15px + padding horizontal do item-content ~16px) */
.classes-top { display: flex; align-items: center; justify-content: flex-start; padding: 80px 20px 4px 31px; }
.classes-toggle-icon { width: 22px; height: 22px; }
/* lista de modalidades */
.classes-list { margin: 6px 15px 15px 15px; }
/* divider à largura toda da linha (sem o recuo à esquerda do Framework7) */
.classes-list .item-inner:after { display: none !important; }
.classes-list li > .item-content { border-bottom: 1px solid var(--f7-list-item-border-color); }
.classes-list li:last-child > .item-content { border-bottom: none; }
/* picker de frequência (opção à direita) */
.classes-freq { text-align: right; width: 150px; font-size: 13px; cursor: pointer; }

/* ===== Menu FINANCE — lista de mensalidades pendentes ===== */
/* cabeçalho: título + contador de pendentes */
.fin-pend-header { display: flex; align-items: center; justify-content: space-between; }
/* linha: bloco de texto à esquerda (flex) + preço centrado à direita */
.fin-pend-list .item-inner { display: flex; flex-direction: row; align-items: center; }
.fin-pend-info { flex: 1; min-width: 0; }
/* nome do aluno: maiúsculas, sem negrito */
.fin-pend-name { text-transform: uppercase; font-weight: 400; }
/* preço à direita, fonte maior, cor de texto normal */
.fin-pend-price { font-size: 16px; font-weight: 400; white-space: nowrap; color: var(--f7-text-color); padding-left: 12px; }
/* separador entre alunos: hairline nativa do Framework7 (classe list-dividers no .list) */
/* aluno que pagou mas continua com validade expirada: vermelho à esquerda a desvanecer para transparente à direita (dark + light) */
.fin-pend-expired { background-image: linear-gradient(to right, rgba(255, 59, 48, 0.20), rgba(255, 59, 48, 0) 70%); }
/* aluno que validou a data ao pagar: verde em degradê, depois encolhe na vertical até desaparecer */
.fin-pend-paid { background-image: linear-gradient(to right, rgba(52, 199, 89, 0.25), rgba(52, 199, 89, 0) 70%); }
/* badges de estado (expirado/a expirar/5+ dias/todos) — clicáveis para filtrar */
.fin-pend-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 15px 8px 20px; }
.fin-pend-badge { cursor: pointer; }
.fin-pend-badge i, .fin-pend-badge svg { width: 14px; height: 14px; }
.fin-pend-badge-active { outline: 2px solid currentColor; outline-offset: 1px; }

/* listas de despesas/receitas — mesmo formato dos pendentes (linha fina via list-dividers) */
.fin-list .item-inner { display: flex; flex-direction: row; align-items: center; }
.fin-list-info { flex: 1; min-width: 0; }
.fin-list-main { font-weight: 400; }
.fin-list-price { font-size: 16px; font-weight: 400; white-space: nowrap; color: var(--f7-text-color); padding-left: 12px; }

/* ===== Spinner discreto na transição de tabs (tabSlideLoad, app.js) ===== */
/* aparece ao centro só quando o carregamento demora (net lenta); grande mas muito discreto */
.tab-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1500; pointer-events: none; }
.tab-spinner .spin {
  width: 60px; height: 60px;
  border: 4px solid var(--f7-theme-color);
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.3;
  animation: tab-spin 0.8s linear infinite;
}
@keyframes tab-spin { to { transform: rotate(360deg); } }
/* variante para o feedback de uma GRAVACAO (regySpinShow({forte:true}), app.js): mesmo anel, mais opaco */
.tab-spinner.spin-forte .spin { opacity: 0.6; }

/* ===== RegyCalendar — calendário reutilizável (FullCalendar v6 + skin F7) ===== */
/* Contrato de layout: a página tem #calendar (o calendário) e um container de
   conteúdo do dia (#calendar-events) como irmãos dentro do .page-content, com o
   #calendar-handle (24px) entre eles. A altura do calendário é a var --cal-h. */
:root { --cal-h: 100%; }

#calendar { height: var(--cal-h); box-sizing: border-box; }
#calendar-events { height: calc(100% - var(--cal-h) - 24px); }
#fc-viewport { position: relative; height: 100%; overflow: hidden; }
#fc-container, #fc-container .fc { height: 100%; }

/* Handle (toque + arrasto) */
.calendar-handle {
  height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.calendar-handle .grip {
  display: block; width: 56px; height: 6px; border-radius: 6px; opacity: .9;
  background: #8e8e93;
}
/* seta + rótulo: sem isto a pega não dizia o que fazia e a vista de mês passava despercebida
   (bug 476, 8 relatos). Discreto de propósito — é uma pista, não um botão. */
.cal-h-hint { display: flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; opacity: .5; line-height: 1; }
.cal-h-ico { width: 12px; height: 12px; flex: 0 0 auto; }
.calendar-handle .cal-h-ico-up, .calendar-handle .cal-h-sem { display: none; }
.calendar-handle.is-month .cal-h-ico-down, .calendar-handle.is-month .cal-h-mes { display: none; }
.calendar-handle.is-month .cal-h-ico-up { display: block; }
.calendar-handle.is-month .cal-h-sem { display: inline; }

/* ---- FullCalendar -> aparência Framework7 ---- */

/* Remover bordas e linhas de grelha */
.fc-theme-standard td, .fc-theme-standard th,
.fc-scrollgrid, .fc-scrollgrid-section, .fc-scrollgrid-sync-table,
.fc-col-header, .fc-daygrid, .fc-daygrid-day, .fc-daygrid-day-frame {
  border: 0 !important;
}

/* Cabeçalho (Dom, Seg, ...) */
.fc-col-header-cell-cushion {
  padding: 6px 0;
  background: transparent;
  font-size: 12px;
  color: var(--f7-text-color) !important;
  font-weight: 300;
  opacity: 0.7;
}

/* Layout da célula do dia */
.fc .fc-daygrid-day-frame { padding: 4px 0; }
.fc .fc-daygrid-day-top { display: flex; justify-content: center; }

/* Número do dia (wrapper custom) */
.fc-f7-daynum {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 300; line-height: 1;
  padding: 6px 0; margin: 0;
  color: var(--f7-text-color) !important;
}

/* Esconder as linhas de eventos dentro das células; usamos dots */
.fc .fc-daygrid-day-events { display: none; }

/* Eventos de fundo mais suaves */
.fc .fc-bg-event { opacity: .18; }

/* Sem scrollbars no scroller do FC */
#fc-container .fc-scroller {
  overflow: hidden !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#fc-container .fc-scroller::-webkit-scrollbar { display: none; }

/* HOJE neutro (sem pílula) */
#fc-container .fc-day-today { background: transparent !important; }
#fc-container .fc-day-today .fc-f7-daynum,
#fc-container .fc-day-today .fc-daygrid-day-number {
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}
#fc-container .fc-day-today .fc-daygrid-day-frame { box-shadow: none !important; }

/* HOJE + selecionado = círculo cheio */
#fc-container .fc-day-today .fc-f7-daynum.is-selected,
#fc-container .fc-day-today .fc-daygrid-day-number.is-selected {
  background: var(--f7-color-primary) !important;
  color: var(--wp-on-theme, #fff) !important;
  border-radius: 999px !important;
  width: 28px !important; height: 28px !important; line-height: 28px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  margin: 0 auto !important; padding: 0 !important;
  box-shadow: none !important;
}

/* Selecionado = círculo cheio (cor primária do Framework7) */
.fc .fc-f7-daynum.is-selected,
.fc .fc-daygrid-day-number.is-selected {
  background: var(--f7-color-primary) !important;
  color: var(--wp-on-theme, #fff) !important;
  border-radius: 999px;
  width: 28px; height: 28px; line-height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto; padding: 0;
  box-shadow: none !important;
}

/* Dias de outro mês */
.fc-day-other .fc-daygrid-day-number,
.fc-day-other .fc-f7-daynum {
  color: var(--f7-text-muted-color) !important;
  opacity: 1 !important;
}

/* Linha de dots sob o número */
.fc-f7-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  /* FORA DO FLUXO (bug 1788). Estavam por baixo do numero como bloco normal, com 10px de altura
     mais 2px de margem: cada dia COM marcacoes crescia 12px e arrastava a linha toda. Como o
     calendario do mes tem altura fixa (metade do ecra), um mes com historico transbordava e a
     ultima semana ficava escondida atras do painel das aulas -- um mes futuro, sem bolinhas,
     cabia. Foi o proprio autor do reporte que descreveu o mecanismo.
     Encostadas por baixo do numero (top:100%) deixam de contar para a altura da linha: um mes com
     marcacoes passa a medir o mesmo que um sem elas, e ficam exatamente onde ja estavam. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0;
  min-height: 0;
}

/* referencia das bolinhas: o numero do dia. Explicito para nao depender do CSS do FullCalendar. */
.fc .fc-daygrid-day-number { position: relative; }

/* Dot individual (cor vem inline do JS) */
.fc-f7-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.dark .fc-f7-dot {
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}

/* Pílula "+n" quando há muitos eventos */
.fc-f7-dot.more {
  width: auto;
  height: auto;
  padding: 0 4px;
  border-radius: 999px;
  line-height: 12px;
  font-size: 10px;
  background: var(--f7-bars-border-color, rgba(0,0,0,.08));
  color: var(--f7-text-color);
  box-shadow: none;
}

.fc-f7-wd {
  font-size: 10px;
  letter-spacing: .2px;
  text-transform: uppercase;
}

/* ===== Mapa de aulas (CLASS MAP) — grelha horária do dia ===== */
/* --mapa-hour (px por hora) vem inline do PHP conforme a escala do dia. */
.mapa-grid {
  /* cinzento fixo (a var --f7-bars-border-color é quase branca neste tema -> invisível) */
  --mapa-line: rgba(128,128,128,.20);
  --mapa-line-faint: rgba(128,128,128,.12);
  --mapa-fade: #fff; /* tema claro: lado direito do bloco clareia */
  display: flex;
  position: relative;
  padding: 4px 12px 40px 4px;
}
.dark .mapa-grid { --mapa-fade: #000; } /* tema escuro: lado direito escurece */
.mapa-time-col {
  width: 52px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.mapa-time-label {
  height: var(--mapa-hour);
  box-sizing: border-box;
  position: relative;
  top: -7px;
  padding-left: 8px;
  font-size: 10px;
  opacity: 0.55;
}
.mapa-day-col {
  flex: 1;
  position: relative;
  /* linha clara a cada 30 min (--mapa-half vem em px do PHP; sem calc p/ webview) */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--mapa-line) 0, var(--mapa-line) 1px,
    transparent 1px, transparent var(--mapa-half)
  );
  border-left: 1px solid var(--mapa-line);
}
.mapa-slot {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
/* linha do "agora" (75% transparente p/ ver bem o texto por baixo) */
.mapa-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--f7-theme-color, #ff3b30);
  opacity: 0.25;
  z-index: 5;
  pointer-events: none;
}
.mapa-now-line::before {
  content: '';
  position: absolute;
  left: -3px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--f7-theme-color, #ff3b30);
}
/* mensagem de dia sem aulas (overlay; não bloqueia os slots) */
.mapa-empty {
  position: absolute;
  top: 24px; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  font-size: 13px;
  pointer-events: none;
}
.mapa-empty .icon { width: 28px; height: 28px; }
/* cards muito estreitos (3+ sobreposições): esconder prof/membros */
.mapa-aula--narrow .mapa-aula-prof,
.mapa-aula--narrow .mapa-aula-alunos { display: none; }

/* arrastar p/ reagendar (aulas sem inscrições) */
.mapa-aula[data-drag="1"] { touch-action: none; }
.mapa-aula--dragging {
  z-index: 10 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transform: scale(1.02);
  opacity: 0.96;
}
.mapa-aula {
  position: absolute;
  left: 0;
  width: calc(100% - 36px); /* deixa 36px à direita p/ o icon de eliminar (fora) */
  padding: 2px 6px;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  z-index: 2;
  /* degradê: esquerda = cor original, direita = tonalidade conforme o tema */
  background: linear-gradient(to right,
    var(--aula-cor) 0%,
    color-mix(in srgb, var(--aula-cor) 62%, var(--mapa-fade)) 100%);
}
.mapa-aula-icon { width: 13px; height: 13px; vertical-align: middle; }
.mapa-aula-nome {
  font-size: 11px;
  line-height: 12px;
  font-weight: 600;
  margin: 0;
  padding-right: 40px; /* não passar por baixo do badge */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mapa-aula-hora {
  display: block;
  font-size: 9px;
  line-height: 10px;
  margin-top: 2px; /* pequeno espaço nome -> hora */
  opacity: 0.9;
}
/* professor e membros: ícone + nomes (vírgulas) com elipsis à direita */
.mapa-aula-prof,
.mapa-aula-alunos {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  line-height: 12px;
  padding-right: 60px; /* não passar por baixo dos badges de ações */
}
.mapa-aula-prof { opacity: 0.95; text-transform: uppercase; }
.mapa-aula-alunos { opacity: 0.85; }
.mapa-aula-prof > span,
.mapa-aula-alunos > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapa-line-ic { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.9; }
.mapa-aula-insc {
  position: absolute;
  right: 4px;
  top: 3px;
  z-index: 3;
  pointer-events: none; /* clique passa para o overlay de editar */
}
.mapa-aula-insc .chip {
  height: 18px;
  background: rgba(0,0,0,.35);
  color: #fff;
}
.mapa-insc-num { font-size: 10px; }
/* overlay de clique (editar): cobre todo o bloco */
.mapa-aula-edit {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  z-index: 2;
}
/* ações (+ adicionar / eliminar): um badge cinzento separado por ícone */
.mapa-aula-actions {
  position: absolute;
  right: 4px;
  bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px; /* espaço entre os badges p/ não falhar o toque */
  z-index: 4;
}
.mapa-aula-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff; /* ícones brancos (currentColor) p/ leitura sobre o badge escuro */
}
.mapa-aula-act .icon { width: 14px; height: 14px; opacity: 1; }

/* lista de escolha de tipo de aula */
.mapa-tipo-dot {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  vertical-align: middle;
}
/* linha fina (hairline) a separar cada tipo — ancorada no item-content (posicionado) */
.mapa-tipos-list .item-content { position: relative; overflow: hidden; }
.mapa-tipos-list li:not(:last-child) .item-content:after {
  content: '';
  position: absolute;
  left: 16px; right: 0; bottom: 0;
  height: 1px;
  background: rgba(128,128,128,.20);
}

/* barra de cor vertical à esquerda */
.mapa-tipo-bar {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
}
/* ícone real do tipo */
.mapa-tipos-list .item-media { min-width: 0; padding-left: 6px; }
.mapa-tipo-icon { width: 30px; height: 30px; object-fit: contain; }
/* nome + subtítulo (Class/Service) */
.mapa-tipo-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mapa-tipos-list .item-title {
  font-size: 15px; font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mapa-tipo-sub {
  font-size: 11px; line-height: 1.2;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* item um pouco mais alto p/ caber subtítulo, com transição de toque */
.mapa-tipos-list .item-content { min-height: 56px; transition: background-color .15s ease; }
.mapa-tipos-list .item-link:active { background-color: rgba(128,128,128,.10); }

/* barra de pesquisa */
.mapa-tipos-search { position: relative; margin: 4px 16px 8px; }
.mapa-tipos-search input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  background: rgba(128,128,128,.14);
  padding: 0 18px 0 42px;
  font-size: 14px;
  color: var(--f7-text-color);
  outline: none;
}
.mapa-tipos-search input::placeholder { color: var(--f7-text-color); opacity: 0.45; }
.mapa-search-ic {
  position: absolute;
  left: 15px; top: 50%; transform: translateY(-50%);
  opacity: 0.45;
  pointer-events: none;
}

/* ===== FITNESS ASSESSMENT (avaliações físicas) ===== */
/* pesquisa */
.aval-search { position: relative; margin: 8px 14px 6px; }
.aval-search .mapa-search-ic { left: 12px; }
.aval-search input {
  width: 100%; height: 38px; padding: 0 14px 0 38px;
  border: 1px solid var(--f7-input-outline-border-color, rgba(128,128,128,.35));
  border-radius: 999px; background: transparent; color: var(--f7-text-color);
  font-size: 15px; outline: none;
}
/* lista de baterias (entrada) */
.aval-bat-list { margin: 0; }
.aval-bat-list .item-content { position: relative; overflow: hidden; }
.aval-bat-list .aval-bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 4px 4px 0; background: var(--f7-theme-color); }
.aval-bat-icon { width: 28px; height: 28px; }
.aval-bat-nome { font-size: 15px; }
/* lista de atletas */
.aval-atl-list { margin: 0; }
.aval-atl-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.aval-atl-proc { font-size: 11px; opacity: 0.5; }
.aval-atl-nome { font-size: 14.5px; }
/* chips de filtro de estado */
.aval-chips { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 8px; scrollbar-width: none; cursor: grab; user-select: none; }
.aval-chips::-webkit-scrollbar { display: none; }
.aval-chips.dragging { cursor: grabbing; }
.aval-chips span, .aval-chips a { -webkit-user-drag: none; }
/* fila de chips arrastável (padrão loja): wrapper + indicadores de fade com chevron */
.aval-chips-wrap { position: relative; }
/* indicadores de deslize: ALTURA TOTAL da fila e CLICÁVEIS (toque → desliza até ao fim desse lado) */
.aval-chips-fade { position: absolute; top: 0; bottom: 0; width: 38px; display: flex; align-items: center; pointer-events: auto; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.aval-chips-fade.right { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(to right, transparent, var(--f7-page-bg-color) 65%); }
.aval-chips-fade.left { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(to left, transparent, var(--f7-page-bg-color) 65%); }
.aval-chips-fade svg { width: 18px; height: 18px; opacity: .75; color: var(--f7-theme-color); transition: transform .15s ease; }
.aval-chips-fade:active svg { transform: scale(1.35); opacity: 1; }
.aval-chip { flex: 0 0 auto; font-size: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(128,128,128,.13); color: var(--f7-text-color); white-space: nowrap; cursor: pointer; }
.aval-chip b { font-weight: 500; opacity: 0.6; }
.aval-chip.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.aval-chip.on b { opacity: 0.85; }
/* badges de estado */
.aval-badge { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; margin-top: 2px; }
.aval-badge.bg-age { background: rgba(55,138,221,.16); color: #2f74c0; }
.aval-badge.bg-today { background: rgba(239,159,39,.18); color: #b9760f; }
.aval-badge.bg-rea { background: rgba(29,158,117,.16); color: #0f6e56; }
.aval-badge.bg-nao { background: rgba(226,75,74,.16); color: #b03a3a; }
.aval-badge.bg-sem { background: rgba(128,128,128,.14); color: var(--f7-text-color); opacity: 0.6; }
.dark .aval-badge.bg-age { color: #85b7eb; }
.dark .aval-badge.bg-today { color: #f0b860; }
.dark .aval-badge.bg-rea { color: #5dcaa5; }
.dark .aval-badge.bg-nao { color: #f09595; }
.aval-prof img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.aval-vazio { text-align: center; opacity: 0.5; padding: 30px 20px; font-size: 14px; }
/* formulário de registo */
.aval-form { margin: 6px 0; }
[data-name="aval_registo"] .list { margin: 6px 0; }
.aval-unidade { opacity: 0.55; font-weight: 400; }
.aval-test-wrap { display: flex; align-items: center; }
.aval-multi { display: flex; align-items: center; gap: 6px; width: 100%; }
.aval-multi input { text-align: center; }
.aval-sep { opacity: 0.5; font-size: 18px; line-height: 1; }
/* histórico de sessões */
.aval-novo-wrap { padding: 12px 16px 4px; }
.aval-sessoes { margin: 0; }
.aval-sessao-sub { font-size: 12px; opacity: 0.55; margin-top: 2px; }
.aval-del { color: #b03a3a; opacity: 0.7; padding: 6px; display: inline-flex; }
.aval-del i { width: 20px; height: 20px; }
.aval-st-rea { color: #1d9e75; }
.aval-st-age { color: #378add; }
.aval-st-today { color: #ef9f27; }
.aval-st-nao { color: #e24b4a; }
.aval-st-sem { opacity: 0.4; }
/* fotos e documentos */
.aval-files { padding: 4px 16px 8px; }
.aval-file-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.aval-file { position: relative; width: 76px; }
.aval-file-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(128,128,128,.2); display: block; }
.aval-file-doc { width: 76px; height: 76px; border-radius: 12px; border: 1px solid rgba(128,128,128,.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.aval-file-doc i { width: 26px; height: 26px; opacity: 0.7; }
.aval-file-ext { font-size: 10px; opacity: 0.6; letter-spacing: 0.5px; }
.aval-file-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #e24b4a; color: #fff; display: flex; align-items: center; justify-content: center; }
.aval-file-del i { width: 14px; height: 14px; }
.aval-file-add { display: inline-flex; align-items: center; }
.aval-file-sel { font-size: 12px; opacity: 0.55; margin-top: 8px; word-break: break-word; }
/* agenda (próximo momento) */
.aval-mom { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--f7-input-outline-border-color, rgba(128,128,128,.35)); border-radius: 14px; }
.aval-mom-ic i { width: 30px; height: 30px; color: var(--f7-theme-color); }
.aval-mom-data { font-size: 15px; }
.aval-mom-prof { font-size: 12px; opacity: 0.6; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.aval-mom-prof i { width: 13px; height: 13px; flex: 0 0 auto; }
.aval-mom-acts { display: flex; gap: 10px; padding: 12px 16px 0; }
.aval-mom-acts .button { flex: 1; }
.aval-mom-note { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.6; padding: 6px 2px; }
.aval-mom-note i { width: 14px; height: 14px; flex: 0 0 auto; }
/* agenda: grelha de slots disponíveis (picker de horas) */
.aval-slots { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; }
.aval-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); color: var(--f7-text-color); font-size: 14px; cursor: pointer; user-select: none; }
.aval-slot.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); border-color: var(--f7-theme-color); }
.aval-slots-none { flex: 0 0 100%; opacity: 0.6; font-size: 14px; padding: 6px 2px; }
.aval-slots-load { flex: 0 0 100%; padding: 10px 2px; }
/* agenda: vista de semana (quando o dia escolhido não tem vagas) — cada dia numa linha */
.aval-week-title { flex: 0 0 100%; font-size: 12px; opacity: 0.6; text-transform: uppercase; margin: 10px 0 4px; }
.aval-week-day { flex: 0 0 100%; width: 100%; padding: 8px 0; border-top: 1px solid rgba(128,128,128,.18); }
.aval-week-day:first-of-type { border-top: 0; }
.aval-week-dlabel { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: 0.85; margin-bottom: 6px; }
.aval-week-dlabel i { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }
/* destaque breve no botão SCHEDULE quando se escolhe uma hora (sinaliza que falta confirmar) */
.aval-btn-pulse { animation: aval-btn-pulse 1.2s ease; }
@keyframes aval-btn-pulse { 0%,100% { transform: scale(1); } 30% { transform: scale(1.04); } 60% { transform: scale(1); } }
.aval-vazio i { display: block; margin: 0 auto 8px; opacity: 0.8; }
/* evolução (gráficos) */
.aval-metric { flex: 0 0 auto; font-size: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(128,128,128,.13); color: var(--f7-text-color); white-space: nowrap; cursor: pointer; }
.aval-metric.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.aval-chart { padding: 6px 8px 16px; min-height: 260px; }
/* protocolos de composição corporal (campo calculado, só de leitura) */
.aval-proto-li .item-input-wrap input[readonly] { color: var(--f7-theme-color); }
.aval-proto-info { font-size: 12px; opacity: 0.85; margin-top: 4px; }
.aval-proto-from { font-size: 11px; opacity: 0.5; margin-top: 2px; }
/* aviso: faltam sexo/data nasc p/ a tabela de referência (gráfico de evolução) */
.aval-ref-alert { margin: 6px 14px 0; padding: 10px 12px; border-radius: 12px; background: rgba(239,159,39,.12); display: flex; flex-direction: column; gap: 8px; }
.aval-ref-alert-in { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--f7-text-color); }
.aval-ref-alert-in svg { width: 18px; height: 18px; color: #d2693a; flex-shrink: 0; }
.aval-ref-alert-btn { align-self: flex-start; }
/* tabela de referência (por baixo do gráfico): medidor + níveis */
.aval-ref { padding: 2px 22px 24px; }
.aval-ref-title { font-size: 12px; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.5px; margin: 4px 0 0; }
.aval-ref-sub { opacity: 0.8; }
.aval-ref-meter { position: relative; margin: 34px 0 16px; }
.aval-ref-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(128,128,128,.12); }
.aval-ref-bar .seg { height: 100%; }
.aval-ref-pin { position: absolute; top: -4px; transform: translateX(-50%); }
.aval-ref-pin .pin-dot { width: 4px; height: 20px; border-radius: 3px; background: var(--f7-text-color); box-shadow: 0 0 0 3px var(--f7-page-bg-color); margin: 0 auto; }
.aval-ref-pin .pin-lbl { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff; }
.aval-ref-rows { display: flex; flex-direction: column; gap: 2px; }
.aval-ref-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.aval-ref-row .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.aval-ref-row .lvl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aval-ref-row .rng { font-size: 12px; opacity: 0.6; white-space: nowrap; }
.aval-ref-row.is-current { background: rgba(128,128,128,.12); }
.aval-ref-row .you { font-size: 10px; padding: 1px 8px; border-radius: 999px; color: #fff; text-transform: uppercase; letter-spacing: 0.4px; }

/* ===== CROSSFIT MODULE ===== */
/* --- Calculators --- */
.page[data-name="cross_calc"] .navbar-transparent .title { opacity: 1 !important; }
.page[data-name="cross_calc"] .navbar-transparent .navbar-bg { opacity: 1 !important; }
/* cross-calc tabs reuse the shared grads-style bottom toolbar (toolbar-layout-vertical + icon_indicator) */

/* % RM tab */
.cross-rm-wrap { padding: 0 10px 24px; }
.cross-rm-chips { padding: 4px 6px 2px; }
.cross-rm-steprow { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; }
.cross-rm-step { flex: 0 0 auto; min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(128,128,128,.14); color: var(--f7-text-color); font-size: 16px; user-select: none; }
.cross-rm-step:active { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.cross-rm-valbox { position: relative; flex: 1 1 auto; min-width: 0; height: 42px; display: flex; align-items: center; border: 1px solid var(--f7-input-outline-border-color); border-radius: 999px; }
.cross-rm-val { width: 100%; height: 40px; text-align: center; font-size: 22px; border: none; background: transparent; color: var(--f7-text-color); padding: 0 34px; }
.cross-rm-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .5; pointer-events: none; }
.cross-rm-unit2 { font-size: 13px; opacity: .6; }

/* % RM enhanced */
.cross-rm-card { margin: 6px 8px 14px; padding: 12px 8px 10px; }
.cross-rm-card .block-title { margin: 0; padding: 0; }
.cross-rm-card .cross-rm-h { padding: 2px 6px 8px; }
.cross-rm-card .cross-rm-est { padding-bottom: 2px; }
.cross-rm-h { display: flex; align-items: center; gap: 6px; }
.cross-seg-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 6px 2px; }
.cross-seg { display: inline-flex; border: 1px solid var(--f7-input-outline-border-color); border-radius: 999px; overflow: hidden; }
.cross-seg a { padding: 6px 14px; font-size: 13px; color: var(--f7-text-color); opacity: .65; white-space: nowrap; }
.cross-seg a.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); opacity: 1; }
.cross-opt-row, .cross-bar-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px 2px; }
.cross-rm-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 0; }
.cross-rm-bottom .cross-opt-row { padding: 0; flex: 0 0 auto; }
.cross-rm-bottom .cross-rm-foot { text-align: right; padding: 0; margin: 0; flex: 1 1 auto; }
.cross-chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cross-chk .icon { width: 22px; height: 22px; }
.cross-chk .ic-on { color: var(--f7-theme-color); }
.cross-bar-lbl { opacity: .7; }
.cross-tablehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 8px 4px; }
.cross-rm-table { display: flex; gap: 14px; padding: 0 4px; }
.cross-rm-table .cross-rm-col { flex: 1 1 0; min-width: 0; }
.cross-rm-table .cross-rm-row { height: 34px; padding: 0 10px; border-left: 3px solid transparent; cursor: pointer; }
.cross-rm-table .cross-rm-row:active { background: rgba(128,128,128,.12); }
.cross-rm-row.z-strength { border-left-color: #e24b4a; }
.cross-rm-row.z-hyper { border-left-color: #ef9f27; }
.cross-rm-row.z-endur { border-left-color: #378add; }
.cross-rm-row.z-power { border-left-color: #1d9e75; }
.cross-rm-row.z-supra { border-left-color: #9aa0a6; }
.cross-rm-u { font-size: 11px; opacity: .45; margin-left: 4px; }
/* training-zone legend (inside the global info-point popover) */
.cross-zlg { display: flex; flex-direction: column; gap: 6px; }
.cross-zlg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cross-zlg-row .d { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.cross-zlg-row .cross-zlg-n { flex: 1; }
.cross-zlg-row span:last-child { opacity: .6; font-size: 12px; }
/* plate loader sheet */
.cross-plate-sheet { height: auto; border-radius: 16px 16px 0 0; overflow: hidden; }
.cross-plate-sheet .block { margin: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.cross-plate-top { text-align: center; padding-top: 6px; }
.cross-plate-sub { text-align: center; opacity: .6; margin-bottom: 12px; }
.cross-plate-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; }
.cross-plate-line { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.cross-plate-badge { min-width: 56px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); font-size: 16px; }
.cross-plate-note { opacity: .7; padding-top: 10px; }
.cross-rm-est { text-align: center; padding: 12px 6px 4px; font-size: 15px; }
.cross-rm-est .t_c { font-size: 18px; }
.cross-rm-grid { display: flex; gap: 16px; padding: 8px 6px 4px; }
.cross-rm-col { flex: 1 1 0; min-width: 0; }
.cross-rm-row { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 6px; border-bottom: 1px solid rgba(128,128,128,.12); }
.cross-rm-pc { opacity: .6; font-size: 13px; }
.cross-rm-pv { font-size: 15px; }
.cross-rm-foot { text-align: center; opacity: .55; padding: 14px 6px 0; }

/* Basic calculator */
.cross-calc { padding: 10px 12px 24px; max-width: 420px; margin: 0 auto; }
.cross-calc-screen { min-height: 70px; border-radius: 14px; background: rgba(128,128,128,.12); color: var(--f7-text-color); font-size: 28px; text-align: right; padding: 16px 18px; margin-bottom: 12px; word-break: break-all; overflow: auto; }
.cross-calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cross-calc-key { height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(128,128,128,.12); color: var(--f7-text-color); font-size: 22px; user-select: none; }
.cross-calc-key:active { filter: brightness(.92); }
.cross-calc-key.is-op { background: rgba(128,128,128,.22); }
.cross-calc-key.is-act { background: rgba(128,128,128,.22); opacity: .85; }
.cross-calc-key.is-eq { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.cross-calc-key.span2 { grid-column: span 2; }

/* Converters */
.cross-conv-list { margin-top: 24px; }
.cross-conv-list .item-input-wrap { display: flex; align-items: center; }
.cross-conv-list input[data-conv] { flex: 1 1 auto; min-width: 0; }
.cross-conv-res { flex: 0 0 auto; margin-left: 8px; padding-right: 4px; font-size: 15px; white-space: nowrap; }

/* --- Cross Training: coach planning (day view) --- */
/* wrapper transparente ao layout: o #calendar fica irmão direto do .page-content,
   senão a altura percentual (--cal-h:50% no modo mês) não resolve e o calendário colapsa */
#cross-day-wrap { display: contents; }
[data-name="cross_plan"] #calendar-events { height: auto; padding: 4px 0 90px; }
.cross-tipo-chips { padding: 6px 10px 4px; }
.cross-tipo-chip { display: inline-flex; align-items: center; gap: 6px; }
.cross-tipo-ic { width: 16px; height: 16px; }
.cross-tipo-chip.on .cross-tipo-ic { filter: brightness(0) invert(1); }

.cross-plan-card { margin: 3px 10px 6px; padding: 14px; }
.cross-plan-head { display: flex; align-items: flex-start; gap: 10px; }
.cross-plan-title { flex: 1; min-width: 0; font-size: 17px; text-transform: uppercase; letter-spacing: .2px; }
.cross-plan-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cross-plan-badge { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 8px; border-radius: 999px; background: rgba(128,128,128,.14); color: var(--f7-text-color); font-size: 12px; }
.cross-plan-badge .icon { width: 16px; height: 16px; }
.cross-plan-desc { padding-top: 10px; line-height: 1.5; opacity: .85; }
.cross-plan-movs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.cross-mov-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(128,128,128,.14); font-size: 12px; }
.cross-mov-chip-link { color: var(--f7-text-color); }
.cross-mov-chip-link:active { background: rgba(128,128,128,.26); }
.cross-plan-badge-results { background: rgba(var(--f7-theme-color-rgb), .14); color: var(--f7-theme-color); }
/* copy actions sheet: thin dividers between options (theme divider is near-invisible) */
.cross-actions .actions-button + .actions-button { border-top: 1px solid rgba(128,128,128,.35); }
/* copy: class-type chooser sheet (icon + colour + thin line) */
.cross-act-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.cross-act-ic { width: 22px; height: 22px; flex: 0 0 auto; }
.cross-typesheet-title { padding: 14px 16px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; opacity: .6; text-align: center; }
.cross-typesheet-list { max-height: 52vh; overflow-y: auto; }
.cross-type-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--f7-text-color); border-top: 1px solid rgba(128,128,128,.16); }
.cross-type-row:active { background: rgba(128,128,128,.1); }
.cross-type-name { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cross-type-cancel { display: block; text-align: center; padding: 15px; color: #c0504d; border-top: 1px solid rgba(128,128,128,.16); }
/* cor / etiqueta por item (planeamento) */
.cross-plan-card.is-colored { border-left: 1px solid var(--cross-cor); }
.cross-swatches { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 16px 18px 20px; }
.cross-sw { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(128,128,128,.3); }
.cross-sw.on { box-shadow: 0 0 0 3px var(--f7-theme-color); }
.cross-sw-none { color: var(--f7-text-color); opacity: .55; background: transparent; }
.cross-sw-none .icon { width: 22px; height: 22px; }
/* navbar: toggle Dia/Semana por ícones (selecionado a cor) */
.cross-mode-nav { display: flex; align-items: center; gap: 2px; }
.cross-mode-ic { opacity: .45; }
.cross-mode-ic.on { opacity: 1; color: var(--f7-theme-color); }
.cross-mode-ic .icon { width: 23px; height: 23px; }
/* FAB secundário (copiar), empilhado acima do FAB principal; tonal para ser secundário */
.cross-fab-copy { right: calc(86px + env(safe-area-inset-right, 0px)); transition: right .25s; }
.cross-fab-copy.cross-fab-low { right: calc(16px + env(safe-area-inset-right, 0px)); }
.cross-fab-copy > a { background: rgba(var(--f7-theme-color-rgb), .18); color: var(--f7-theme-color); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.cross-fab-copy > a:active { background: rgba(var(--f7-theme-color-rgb), .28); }
/* REGRA APP-WIDE: remoção de item de lista com slide-up (0.5s). Usar via window.slideUpRemove(el, onDone). */
.slideup-remove { overflow: hidden; animation: slideup-remove 0.5s ease forwards; }
@keyframes slideup-remove {
	0%   { opacity: 1; transform: translateY(0); max-height: 500px; }
	55%  { opacity: 0; }
	100% { opacity: 0; transform: translateY(-12px); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
/* piscar 2x um cartão acabado de duplicar */
.cross-blink2x { animation: cross-blink2x 0.45s ease 2; }
@keyframes cross-blink2x { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--f7-theme-color-rgb), 0); } 50% { box-shadow: 0 0 0 3px rgba(var(--f7-theme-color-rgb), .6); } }
.cross-plan-types { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.cross-plan-type { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(var(--f7-theme-color-rgb), .12); color: var(--f7-theme-color); font-size: 12px; }
.cross-plan-type .icon { width: 15px; height: 15px; }
.cross-plan-note .cross-plan-note-h { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; opacity: .6; }
.cross-plan-note .cross-plan-note-h .icon { width: 18px; height: 18px; }
.cross-plan-empty { text-align: center; opacity: .5; padding: 40px 24px; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cross-plan-empty-ic { width: 34px; height: 34px; opacity: .7; }
.cross-plan-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(128,128,128,.16); }
.cross-plan-acts-right { display: inline-flex; align-items: center; gap: 8px; }
.cross-br-wrap { display: inline-flex; align-items: center; gap: 8px; }
.cross-br-label { font-size: 12px; opacity: .65; text-transform: uppercase; letter-spacing: .3px; }
.cross-br-toggle { --f7-toggle-width: 42px; --f7-toggle-height: 24px; }
.cross-plan-act { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--f7-theme-color); }
.cross-plan-act:active { background: rgba(128,128,128,.14); }
.cross-plan-act .icon { width: 20px; height: 20px; }
.cross-plan-act.is-locked { color: #b9760f; opacity: .85; }
.cross-plan-del { color: #c0504d; }
/* category browse */
.cross-cat-list { margin: 8px 0 0; }
.cross-cat-bar { display: flex; align-items: center; justify-content: space-between; }
.cross-cat-back { display: inline-flex; align-items: center; gap: 4px; padding: 12px 16px 6px; color: var(--f7-theme-color); font-size: 14px; }
.cross-cat-back .icon { width: 18px; height: 18px; }
.cross-cat-new { display: inline-flex; align-items: center; gap: 4px; padding: 12px 16px 6px; color: var(--f7-theme-color); font-size: 14px; }
.cross-cat-new .icon { width: 18px; height: 18px; }
.cross-cat-wod { display: flex; align-items: center; border-bottom: 1px solid rgba(128,128,128,.12); }
.cross-cat-wod-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 4px 14px 16px; color: var(--f7-text-color); }
.cross-cat-wod-main:active { background: rgba(128,128,128,.1); }
.cross-cat-wod-info { flex: 1 1 auto; min-width: 0; }
.cross-cat-wod-title { font-size: 15px; text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cross-cat-wod-types { display: inline-flex; gap: 4px; padding-top: 4px; opacity: .6; }
.cross-cat-wod-types .icon { width: 14px; height: 14px; }
.cross-cat-wod-add { width: 24px; height: 24px; flex-shrink: 0; color: var(--f7-theme-color); }
.cross-cat-wod-edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 6px; border-radius: 50%; color: var(--f7-theme-color); }
.cross-cat-wod-edit:active { background: rgba(128,128,128,.14); }
.cross-cat-wod-edit .icon { width: 20px; height: 20px; }
/* pesquisa global de templates */
.cross-wodsearch { position: relative; display: flex; align-items: center; padding: 10px 14px 6px; }
.cross-wodsearch-ic { position: absolute; left: 28px; width: 18px; height: 18px; opacity: .45; pointer-events: none; }
.cross-wodsearch input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 42px; border: 1px solid var(--f7-input-outline-border-color); border-radius: 999px; background: transparent; color: var(--f7-text-color); }
.cross-wodsearch-clear { position: absolute; right: 24px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--f7-text-color); opacity: .5; }
.cross-wodsearch-clear .icon { width: 18px; height: 18px; }
.cross-cat-wod-sub { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.cross-cat-wod-catn { font-size: 12px; opacity: .55; text-transform: uppercase; letter-spacing: .3px; }
.cross-savetpl-item { cursor: pointer; }
.cross-savetpl-item .item-media .icon { width: 22px; height: 22px; }

/* --- Cross Training: drag-to-reorder day list (F7 sortable) --- */
.cross-sort { margin: 0; }
.cross-sort > ul { background: transparent; padding: 0; }
.cross-sort > ul::before, .cross-sort > ul::after { display: none !important; }
.cross-sort-li { display: flex; align-items: stretch; list-style: none; padding: 0; background: transparent; }
.cross-sort-li > .card.cross-plan-card { flex: 1 1 auto; min-width: 0; margin: 3px 10px 6px 0; }
.cross-sort .cross-grip { position: static !important; opacity: .35 !important; transform: none !important; width: 32px; flex: 0 0 32px; display: flex !important; align-items: center; justify-content: center; color: var(--f7-text-color); cursor: grab; touch-action: none; background: transparent !important; }
.cross-sort .cross-grip .icon { width: 20px; height: 20px; }
.cross-sort-li.sortable-dragging { background: var(--f7-page-bg-color); box-shadow: 0 10px 28px rgba(0,0,0,.28); border-radius: 14px; z-index: 60; }
.cross-sort-li.sortable-dragging .cross-grip { opacity: .7 !important; cursor: grabbing; }

/* --- Cross Training: planning Day/Week toggle + week view --- */
.cross-mode-row { display: flex; justify-content: center; padding: 2px 10px 6px; }
.cross-mode-seg a { padding: 7px 22px; }
.cross-week-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 6px 10px 10px; }
.cross-week-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--f7-theme-color); }
.cross-week-arrow:active { background: rgba(128,128,128,.14); }
.cross-week-arrow .icon { width: 22px; height: 22px; }
.cross-week-range { min-width: 150px; text-align: center; font-size: 15px; text-transform: uppercase; letter-spacing: .3px; }
#cross-week-body { padding: 0 0 90px; }
.cross-week-day { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(128,128,128,.16); color: var(--f7-text-color); }
.cross-week-day:active { background: rgba(128,128,128,.1); }
.cross-week-day.is-empty { opacity: .5; }
.cross-week-dayhead { flex: 0 0 46px; display: flex; flex-direction: column; align-items: center; }
.cross-week-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .6; }
.cross-week-dnum { font-size: 20px; line-height: 1.1; }
.cross-week-day.is-today .cross-week-dnum { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.cross-week-items { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cross-week-chip { display: inline-flex; align-items: center; max-width: 100%; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(128,128,128,.14); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cross-week-chip.is-wod { background: rgba(var(--f7-theme-color-rgb), .12); color: var(--f7-theme-color); }
.cross-week-chip.is-note { background: rgba(128,128,128,.1); opacity: .8; }
.cross-week-chip.is-colored { border-left: 3px solid var(--cross-cor); padding-left: 8px; }
.cross-week-empty { font-size: 16px; opacity: .4; }
.cross-week-go { flex: 0 0 auto; width: 18px; height: 18px; opacity: .4; }

/* --- Cross Training: WOD builder form --- */
.cross-wod-list { margin: 6px 12px; }
.cross-wod-list ul { background: transparent; }
.cross-wod-save { padding: 8px 16px 4px; }
.cross-mov-picker { padding: 0 16px 4px; }
.cross-mov-search { position: relative; display: flex; align-items: center; gap: 8px; }
.cross-mov-search-ic { position: absolute; left: 14px; width: 18px; height: 18px; opacity: .45; pointer-events: none; }
.cross-mov-search input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--f7-input-outline-border-color); border-radius: 999px; background: transparent; color: var(--f7-text-color); }
.cross-mov-detect { flex: 0 0 auto; display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.cross-mov-results { display: flex; flex-direction: column; }
.cross-mov-results:not(:empty) { margin-top: 8px; border: 1px solid rgba(128,128,128,.18); border-radius: 12px; overflow: hidden; }
.cross-mov-result { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--f7-text-color); border-bottom: 1px solid rgba(128,128,128,.12); }
.cross-mov-result:last-child { border-bottom: none; }
.cross-mov-result:active { background: rgba(128,128,128,.12); }
.cross-mov-result .icon { width: 16px; height: 16px; opacity: .6; }
.cross-mov-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.cross-mov-chips .cross-mov-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; background: rgba(var(--f7-theme-color-rgb), .12); color: var(--f7-theme-color); font-size: 13px; }
.cross-mov-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(128,128,128,.2); color: var(--f7-text-color); font-size: 15px; line-height: 1; }

/* --- Cross Training: lift builder --- */
.cross-lift-selected { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--f7-input-outline-border-color); border-radius: 12px; font-size: 15px; }
.cross-lift-selected .icon { width: 18px; height: 18px; color: var(--f7-theme-color); }
.cross-lift-selected span { flex: 1 1 auto; min-width: 0; }
.cross-lift-change { color: var(--f7-theme-color); font-size: 13px; text-transform: uppercase; }
.cross-lift-section { padding: 4px 16px 0; }
.cross-lift-grid { display: flex; align-items: flex-end; gap: 12px; }
.cross-lift-x { font-size: 22px; opacity: .5; padding-bottom: 8px; }
.cross-lift-num { display: flex; flex-direction: column; gap: 4px; }
.cross-lift-num label { font-size: 12px; opacity: .6; padding-left: 4px; }
.cross-lift-num input { width: 90px; height: 42px; text-align: center; font-size: 18px; border: 1px solid var(--f7-input-outline-border-color); border-radius: 999px; background: transparent; color: var(--f7-text-color); }
.cross-lift-rows { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.cross-lift-row { display: flex; align-items: center; gap: 8px; }
.cross-lift-row-n { flex: 0 0 64px; font-size: 13px; opacity: .6; }
.cross-lift-row .v-reps, .cross-lift-row .v-perc { width: 64px; height: 38px; text-align: center; border: 1px solid var(--f7-input-outline-border-color); border-radius: 999px; background: transparent; color: var(--f7-text-color); }
.cross-lift-at { opacity: .5; }
.cross-lift-pct { opacity: .5; font-size: 13px; }
.cross-lift-preview { padding: 14px 16px 4px; font-size: 14px; }
.cross-lift-preview-lbl { opacity: .55; text-transform: uppercase; font-size: 11px; letter-spacing: .3px; }
.cross-lift-preview .t_c { font-size: 16px; }

/* --- Cross Training: personal records (tab) --- */
.cross-rec-chips-row { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 14px; scrollbar-width: none; cursor: grab; user-select: none; }
.cross-rec-chips-row::-webkit-scrollbar { display: none; }
.cross-rec-chip { flex: 0 0 auto; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(128,128,128,.14); color: var(--f7-text-color); font-size: 13px; white-space: nowrap; -webkit-user-drag: none; }
.cross-rec-chip.active { background: transparent; color: var(--f7-theme-color); box-shadow: inset 0 0 0 1.5px var(--f7-theme-color); }
.cross-rec-listing { margin: 0; }
.cross-rec-listing .item-title { font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* último resultado como footer (uma só linha por baixo do nome) → altura consistente, nome não quebra */
.cross-rec-foot { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; font-size: 12px; line-height: 1.2; margin-top: 2px; }
.cross-rec-foot .cross-rec-est { font-size: 11px; opacity: .55; }
.cross-rec-foot .cross-rec-date { font-size: 11px; opacity: .45; }
.cross-rec-sep { opacity: .3; }
.cross-rec-foot .cross-rec-spark-wrap { line-height: 0; flex: 0 0 auto; }
.cross-rec-foot-ic { width: 13px; height: 13px; color: #ffa426; flex: 0 0 auto; }
/* descrição do WOD como item-header (por cima do nome) */
.cross-rec-head { font-size: 11px; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; margin-bottom: 1px; }
/* controlos colados ao topo (chips + pesquisa) ao fazer scroll */
.cross-rec-sticky { position: sticky; top: 0; z-index: 30; background: var(--f7-page-bg-color); }
/* 3º segmento: Favoritos (só ícone estrela) */
.cross-seg-fav { flex: 0 0 auto !important; width: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.cross-seg-fav svg { width: 17px; height: 17px; }
.cross-seg-fav.active svg { fill: #fff; }
/* skeleton de carregamento */
.cross-rec-skel-thumb { width: 40px; height: 40px; border-radius: 8px; background: rgba(128,128,128,.18); }
/* separador: linha reta full-width no <li> (sem os divisores default do F7, que são recuados) */
.cross-rec-listing .item-inner:after, .cross-rec-listing .item-content:after { display: none !important; }
.cross-rec-listing li:not(:last-child) { border-bottom: 1px solid rgba(128,128,128,.18); }
.cross-rec-listing .item-content { position: relative; }
.cross-rec-listing .item-inner { padding-right: 22px; }
.cross-rec-chev { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .3; color: var(--f7-text-color); pointer-events: none; }
.cross-rec-after { position: relative; text-align: right; font-size: 14px; opacity: .9; }
.cross-rec-tag { font-size: 10px; text-transform: uppercase; opacity: .55; letter-spacing: .3px; }
.cross-rec-est { font-size: 11px; opacity: .5; }
/* --- Records R1: badges, controls, search, thumbnails, favorites, A-Z, empty --- */
.cross-rec-chip-badge { margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: rgba(0,0,0,.18); color: inherit; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.cross-rec-chip.active .cross-rec-chip-badge { background: rgba(var(--f7-theme-color-rgb), .2); color: var(--f7-theme-color); }
/* controlos (My/All + sort): FIXADOS na faixa da navbar (header) SÓ quando a página está ativa
   (page-current) — evita que "vazem" por cima de sub-páginas abertas por cima. */
.cross-rec-controls { display: flex; align-items: center; gap: 8px; padding: 4px 14px 6px; }
.page-current > .cross-rec-navctrls { position: fixed; top: env(safe-area-inset-top, 0px); left: 48px; right: 8px; height: var(--f7-navbar-height); z-index: 5500; margin: 0; padding: 0; }
.cross-rec-seg { display: inline-flex; background: rgba(128,128,128,.22); border-radius: 999px; padding: 3px; flex: 1; }
.cross-seg-btn { flex: 1; text-align: center; height: 30px; line-height: 30px; border-radius: 999px; font-size: 13px; color: var(--f7-text-color); opacity: .7; white-space: nowrap; }
.cross-seg-btn.active { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); opacity: 1; }
.cross-rec-sortbtn { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(128,128,128,.14); color: var(--f7-text-color); }
.cross-rec-sortbtn svg { width: 18px; height: 18px; }
.cross-rec-searchbar { position: relative; margin: 0 14px 4px; }
.cross-rec-searchbar input { width: 100%; height: 38px; border-radius: 999px; border: none; background: rgba(128,128,128,.12); color: var(--f7-text-color); padding: 0 34px 0 36px; font-size: 14px; outline: none; }
.cross-rec-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; opacity: .45; pointer-events: none; }
.cross-rec-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .4; }
.cross-rec-listing .item-inner { padding-right: 64px; }
.cross-rec-thumb { position: relative; width: 40px; height: 40px; min-width: 40px; border-radius: 8px; overflow: hidden; background: rgba(128,128,128,.14); display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.cross-rec-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cross-rec-thumb-fallback { font-size: 16px; opacity: .5; }
.cross-rec-thumb-ic { width: 20px; height: 20px; opacity: .55; }
/* thumbnail tocável (abre detalhes do movimento) + badge de play no canto */
.cross-rec-thumb-link { cursor: pointer; }
.cross-rec-thumb-link:active { opacity: .8; }
.cross-rec-thumb-play { position: absolute; right: 2px; bottom: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.cross-rec-thumb-play svg { width: 9px; height: 9px; fill: #fff; stroke: #fff; margin-left: 1px; }
.cross-rec-after { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; font-size: 14px; opacity: .95; }
.cross-rec-val { line-height: 1.15; }
.cross-rec-date { font-size: 10px; opacity: .45; }
.cross-rec-add { font-size: 12px; color: var(--f7-theme-color); opacity: .8; }
.cross-rec-li.is-empty .item-title { opacity: .55; }
.cross-rec-li.is-empty .cross-rec-thumb { opacity: .8; }
.cross-rec-fav { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.cross-rec-fav svg { width: 18px; height: 18px; opacity: .3; fill: none; stroke: var(--f7-text-color); }
.cross-rec-fav.on svg { opacity: 1; fill: #ffc531; stroke: #ffc531; }
.cross-rec-chev { right: 6px; }
.cross-rec-letter { position: sticky; top: 0; z-index: 5; background: var(--f7-page-bg-color); font-size: 12px; font-weight: 600; opacity: .6; height: 26px; line-height: 26px; padding-left: 16px; text-transform: uppercase; }
.cross-rec-all-wrap { position: relative; }
.cross-rec-empty { text-align: center; padding: 48px 30px 20px; opacity: .9; }
.cross-rec-empty svg { width: 40px; height: 40px; opacity: .35; margin-bottom: 10px; }
.cross-rec-empty-t { font-size: 16px; margin-bottom: 4px; }
.cross-rec-empty-s { font-size: 13px; opacity: .6; margin-bottom: 16px; }
.cross-rec-empty-btn { display: inline-flex; }
/* --- Records R2: sparkline + quick-log swipe --- */
.cross-rec-spark-wrap { line-height: 0; margin-top: 1px; }
.cross-spark { display: block; }
.cross-spark polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cross-spark-up polyline { stroke: #43a047; }
.cross-spark-down polyline { stroke: #e53935; }
.cross-rec-swipe { background: var(--f7-theme-color) !important; color: var(--wp-on-theme, #fff) !important; display: inline-flex; align-items: center; gap: 4px; }
.cross-rec-swipe svg { width: 15px; height: 15px; }
/* pill "+ Log" de registo rápido (em fluxo, dentro do bloco direito) — linhas sem score */
.cross-rec-qlog { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 9px 0 6px; border-radius: 999px; background: rgba(var(--f7-theme-color-rgb), .16); color: var(--f7-theme-color); font-size: 12px; white-space: nowrap; }
.cross-rec-qlog svg { width: 14px; height: 14px; }
/* controlos absolutos à direita: chevron + estrela; folga do valor via padding do item-inner */
.cross-rec-chev { right: 8px; }
.cross-rec-listing .cross-rec-fav { right: 38px; }
.cross-rec-listing .item-inner { padding-right: 82px; display: block; min-width: 0; }   /* estrela+chevron; block → header/nome/footer truncam corretamente */
/* folga extra do valor face ao chevron: pr_4 (1.5rem) no .cross-rec-after das linhas com score */
.cross-pr-badge { display: inline-block; font-size: 10px; font-weight: 600; color: #fff; background: #ffa426; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
/* grelha 1RM-10RM */
.cross-rm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 8px; padding: 0 8px; }
.cross-rm-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cross-rm-lbl { font-size: 12px; opacity: .6; }
.cross-rm-in { width: 100%; max-width: 70px; height: 42px; text-align: center; font-size: 18px; border: 1px solid var(--f7-input-outline-border-color); border-radius: 12px; background: transparent; color: var(--f7-text-color); }

/* ===== PR de levantamento — design moderno (rec_lift) ===== */
.rmx-hero { position: relative; margin: 14px 14px 4px; border-radius: 24px; padding: 20px 22px 18px; overflow: hidden; color: var(--wp-on-theme, #fff); background: linear-gradient(135deg, var(--f7-theme-color), var(--f7-theme-color-shade)); box-shadow: 0 10px 26px rgba(0,0,0,.20); }
.rmx-hero::before { content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.10); }
.rmx-hero-ic { position: absolute; right: 16px; top: 16px; width: 26px; height: 26px; opacity: .55; }
.rmx-hero-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; opacity: .85; position: relative; }
.rmx-hero-val { font-size: 48px; font-weight: 700; line-height: 1; margin-top: 4px; display: flex; align-items: baseline; gap: 6px; position: relative; }
.rmx-hero-val small { font-size: 17px; font-weight: 500; opacity: .82; }
.rmx-hero-val #rmx_e1rm { display: inline-block; transform-origin: left bottom; }
.rmx-hero-val #rmx_e1rm.pulse { animation: rmxpulse .38s ease; }
@keyframes rmxpulse { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
.rmx-hero-hint { font-size: 12px; opacity: .8; margin-top: 8px; position: relative; }
.rmx-info { display: inline-flex; vertical-align: middle; margin-left: 3px; color: #fff; opacity: .85; }
.rmx-info svg { width: 15px; height: 15px; }

.rmx-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 12px 14px 6px; }
.rmx-cell { position: relative; border-radius: 16px; background: rgba(128,128,128,.10); padding: 9px 4px 8px; text-align: center; transition: background .2s ease, box-shadow .2s ease, transform .12s ease; }
.rmx-cell.filled { background: rgba(var(--f7-theme-color-rgb), .12); box-shadow: inset 0 0 0 1.5px rgba(var(--f7-theme-color-rgb), .45); }
.rmx-cell.is-best { box-shadow: inset 0 0 0 2px var(--f7-theme-color); transform: translateY(-2px); }
.rmx-cell.is-best::after { content: '★'; position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; line-height: 20px; font-size: 11px; text-align: center; color: var(--wp-on-theme, #fff); background: var(--f7-theme-color); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.28); }
.rmx-lbl { font-size: 11px; opacity: .5; margin-bottom: 5px; font-weight: 500; }
.rmx-lbl span { font-size: 9px; opacity: .85; margin-left: 1px; }
.rmx-inwrap { display: flex; flex-direction: column; align-items: center; }
.rmx-in { width: 100%; max-width: 64px; text-align: center; font-size: 20px; font-weight: 600; border: none; background: transparent; color: var(--f7-text-color); outline: none; padding: 0; -moz-appearance: textfield; }
.rmx-in::-webkit-outer-spin-button, .rmx-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rmx-unit { font-size: 10px; opacity: .4; margin-top: 1px; text-transform: lowercase; }

.rmx-notes { margin: 14px 12px 0; }
.rmx-notes .item-media .icon { color: var(--f7-theme-color); }
.rmx-notes textarea { min-height: 40px; }
.rmx-btns { display: flex; gap: 10px; padding: 18px 20px 4px; }
.rmx-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: none !important; }
.rmx-btn svg { width: 17px; height: 17px; }
.rmx-clear { background: rgba(128,128,128,.14); color: var(--f7-text-color); }

/* --- Cross Training: PR de WOD (score + tiebreaks, RX/Scaled) --- */
.rmx-hero-tag { text-transform: uppercase; }
#rmx_wod_best { transform-origin: left bottom; }
#rmx_wod_best.pulse { animation: rmxpulse .38s ease; }
.cross-pr-desc-card { display: flex; gap: 12px; margin: 12px 14px 4px; padding: 14px 16px; border-radius: 18px; background: rgba(128,128,128,.10); }
.cross-pr-desc-ic { width: 20px; height: 20px; opacity: .5; flex: 0 0 auto; margin-top: 1px; }
.cross-pr-desc { font-size: 13px; line-height: 1.5; }
.cross-pr-cols { display: flex; flex-direction: column; gap: 12px; padding: 8px 14px 0; }
.cross-pr-col { border-radius: 20px; padding: 14px 14px 8px; background: rgba(128,128,128,.08); position: relative; }
.cross-pr-col-rx { background: rgba(var(--f7-theme-color-rgb), .09); box-shadow: inset 0 0 0 1.5px rgba(var(--f7-theme-color-rgb), .35); }
.cross-pr-ver { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; background: rgba(128,128,128,.18); margin-bottom: 8px; }
.cross-pr-col-rx .cross-pr-ver { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.cross-pr-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; margin: 12px 2px 5px; }
.cross-pr-metric { margin-bottom: 4px; }
.cross-pr-dual { display: flex; align-items: flex-end; gap: 8px; }
.cross-pr-half { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; }
.cross-pr-one { display: flex; flex-direction: column; gap: 3px; }
.cross-pr-metric label { font-size: 10px; opacity: .55; padding-left: 6px; text-transform: lowercase; }
.cross-pr-metric input[type="number"] { width: 100%; height: 46px; text-align: center; font-size: 20px; font-weight: 600; border: none; border-radius: 14px; background: rgba(128,128,128,.12); color: var(--f7-text-color); outline: none; -moz-appearance: textfield; }
.cross-pr-metric input[type="number"]::-webkit-outer-spin-button, .cross-pr-metric input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cross-pr-col-rx .cross-pr-metric input[type="number"] { background: rgba(var(--f7-theme-color-rgb), .10); }
.cross-pr-sym { font-size: 22px; font-weight: 600; opacity: .4; padding-bottom: 11px; }

/* ===== RegyBot (mascote) — animações ===== */
.regybot-bob{animation:regybotBob 2.8s ease-in-out infinite;transform-origin:center;display:block;margin:0 auto}
@keyframes regybotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.regybot-greet{animation:regybotGreet 1s ease-out 1,regybotBob 2.8s ease-in-out infinite 1s;transform-origin:center bottom}
@keyframes regybotGreet{0%{transform:scale(.82) rotate(-6deg)}40%{transform:scale(1.04) rotate(5deg)}70%{transform:scale(.99) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}

/* ===== Onboarding (wizard de arranque) ===== */
.onboarding-popup{background:#0c0a14;color:#fff;}
.onboarding-popup .page-content{padding:0;background:transparent;position:relative;z-index:1;}
.onb-top{position:absolute;top:0;left:0;right:0;z-index:10;padding:14px 16px 10px;background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent);pointer-events:none;}
.onb-dots{display:flex;justify-content:center;gap:6px;}
.onb-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .25s;}
.onb-dots i.on{background:#fff;width:18px;border-radius:4px;}
/* foto a ocupar o ecrã todo (crossfade entre slides) + scrim */
.onb-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.onb-bg-img{position:absolute;inset:0;background-size:cover;background-position:center 28%;opacity:0;transition:opacity .55s ease;will-change:transform;}
.onb-bg-img.on{opacity:.42;}
/* Ken-Burns muito lento (zoom + leve rotação), 1 animação distinta por foto; alternate = loop sem saltos; scale>=1.12 para a rotação nunca mostrar cantos */
.onb-bg-img:nth-child(1).on{transform-origin:50% 38%;animation:onbken1 8s linear infinite alternate;}
.onb-bg-img:nth-child(2).on{transform-origin:32% 30%;animation:onbken2 9s linear infinite alternate;}
.onb-bg-img:nth-child(3).on{transform-origin:68% 35%;animation:onbken3 7s linear infinite alternate;}
.onb-bg-img:nth-child(4).on{transform-origin:40% 60%;animation:onbken4 8.5s linear infinite alternate;}
.onb-bg-img:nth-child(5).on{transform-origin:60% 45%;animation:onbken5 9.5s linear infinite alternate;}
.onb-bg-img:nth-child(6).on{transform-origin:50% 55%;animation:onbken6 7.5s linear infinite alternate;}
.onb-bg-img:nth-child(7).on{transform-origin:45% 40%;animation:onbken7 8s linear infinite alternate;}
@keyframes onbken1{from{transform:scale(1.14) rotate(0deg)}to{transform:scale(1.30) rotate(4deg)}}
@keyframes onbken2{from{transform:scale(1.28) rotate(-3deg)}to{transform:scale(1.14) rotate(2deg)}}
@keyframes onbken3{from{transform:scale(1.14) rotate(1deg)}to{transform:scale(1.26) rotate(4deg)}}
@keyframes onbken4{from{transform:scale(1.26) rotate(3deg)}to{transform:scale(1.14) rotate(-3deg)}}
@keyframes onbken5{from{transform:scale(1.14) rotate(-2deg)}to{transform:scale(1.30) rotate(3deg)}}
@keyframes onbken6{from{transform:scale(1.16) rotate(2deg)}to{transform:scale(1.28) rotate(-2deg)}}
@keyframes onbken7{from{transform:scale(1.14) rotate(0deg)}to{transform:scale(1.30) rotate(4deg)}}
.onb-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,10,20,.40) 0%,rgba(12,10,20,.52) 38%,rgba(12,10,20,.82) 72%,rgba(12,10,20,.96) 100%);}
/* texto/controlos legíveis sobre a foto */
.onboarding-popup .onb-h{color:#fff;}
.onboarding-popup .onb-p{color:#fff;opacity:.85;}
.onboarding-popup .onb-legal{color:rgba(255,255,255,.92);}
.onboarding-popup .onb-legal .card{background:rgba(10,8,16,.45);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.12);border-radius:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.onboarding-popup .onb-legal .card-content,.onboarding-popup .onb-legal p,.onboarding-popup .onb-legal li,.onboarding-popup .onb-legal .block{color:rgba(255,255,255,.92);}
.onboarding-popup .onb-langs a{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);}
.onboarding-popup .onb-langs a.on{border-color:#fff;background:rgba(255,255,255,.18);}
.onboarding-popup .onb-langs a.on .icon{color:#fff;}
.onboarding-popup .ntf-head{border-bottom-color:rgba(255,255,255,.25);}
.onboarding-popup .ntf-row{border-bottom-color:rgba(255,255,255,.14);}
/* Privacidade — label acima da caixa, sem floating-label (evita a linha por trás do texto) */
.onb-priv-list{margin:16px 0 4px;}
.onb-priv-field{margin-bottom:22px;}
.onb-priv-label{font-size:13px;opacity:.85;margin:0 0 7px 8px;text-shadow:0 1px 3px rgba(0,0,0,.7);}
.onb-priv-box{border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(10,8,16,.3);}
/* A opção escolhida tem de se ler BRANCA por cima da fotografia. O -webkit-text-fill-color é
   obrigatório aqui: a regra app-wide dos pickers (mais abaixo) declara-o com a cor de texto do
   TEMA — que em modo claro é escura — e o text-fill-color ganha sempre ao color, por mais
   específica que a regra deste seja. Sem esta linha o valor sai cinzento-escuro sobre fundo
   escuro e parece que não há nada escolhido. */
.onb-priv-box .picker-from-select{display:block;width:100%;box-sizing:border-box;padding:13px 18px;background:transparent;border:0;color:#fff;-webkit-text-fill-color:#fff;font-size:15px;}

/* ===== Popup Manager — popups bloqueantes (ex.: regras da box) ===== */
.regy-popup .br-content{padding-bottom:88px;padding-top:0;position:relative;z-index:1;background:transparent;color:#fff;}
.regy-popup .br-intro{margin:2px 0 0;font-size:12px;line-height:1.25;letter-spacing:.3px;text-transform:uppercase;color:var(--f7-theme-color);text-shadow:0 1px 3px rgba(0,0,0,.6);}
/* fundo animado (imagem do onboarding) + scrim + card translúcido (mesma lógica do onboarding) */
.regy-popup .br-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.regy-popup .br-bg-img{position:absolute;inset:0;background-size:cover;background-position:center 30%;transform:scale(1.14);will-change:transform;}
.regy-popup .br-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,10,20,.9) 0%,rgba(12,10,20,.45) 28%,rgba(12,10,20,.78) 100%);}
.regy-popup .br-content .card{margin-top:6px;background:rgba(10,8,16,.45);box-shadow:none;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.regy-popup .br-content .card-content{color:rgba(255,255,255,.92);}
.regy-popup .br-accept-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 16px calc(12px + var(--f7-safe-area-bottom,0px));background:rgba(12,10,20,.92);border-top:1px solid rgba(255,255,255,.12);}
/* Popup "completa o teu perfil" (#5) — anel de progresso + ações */
.dp-content{padding:30px 24px 120px;text-align:center;}
.dp-ring{position:relative;width:120px;height:120px;margin:6px auto 18px;}
.dp-ring svg{width:120px;height:120px;transform:rotate(-90deg);}
.dp-ring-bg{fill:none;stroke:rgba(128,128,128,.22);stroke-width:9;}
.dp-ring-fg{fill:none;stroke:var(--f7-theme-color);stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--dp-len);stroke-dashoffset:var(--dp-off);animation:dpfill 1.1s ease-out;}
@keyframes dpfill{from{stroke-dashoffset:var(--dp-len);}to{stroke-dashoffset:var(--dp-off);}}
.dp-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:500;color:var(--f7-text-color);}
.dp-ring-num span{font-size:16px;opacity:.6;margin-left:1px;}
.dp-title{font-size:19px;line-height:1.3;margin-bottom:8px;color:var(--f7-text-color);}
.dp-msg{font-size:15px;line-height:1.5;opacity:.8;margin:0 6px;}
.dp-warn{margin-top:14px;font-size:14px;line-height:1.45;color:var(--f7-theme-color);}
.dp-actions{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 16px calc(12px + var(--f7-safe-area-bottom,0px));background:var(--f7-page-bg-color);box-shadow:0 -6px 16px rgba(0,0,0,.12);}
.dp-actions .button{margin-top:8px;}
.dp-actions .button:first-child{margin-top:0;}
/* Popup "adiciona uma foto" (#4) */
.fp-content{padding-bottom:180px;}
.fp-icon{width:110px;height:110px;border-radius:50%;background:rgba(128,128,128,.18);display:flex;align-items:center;justify-content:center;margin:30px auto 50px;color:var(--f7-theme-color);}
.fp-icon i,.fp-icon svg{width:54px;height:54px;}
/* Popup "campos obrigatórios" (#6) */
.cp-icon{width:88px;height:88px;border-radius:50%;background:rgba(128,128,128,.18);display:flex;align-items:center;justify-content:center;margin:10px auto 22px;color:var(--f7-theme-color);}
.cp-icon i,.cp-icon svg{width:42px;height:42px;}
.cp-list{list-style:none;margin:18px 0 0;padding:0;text-align:left;}
.cp-list li{display:flex;align-items:center;gap:8px;padding:9px 4px;font-size:15px;border-bottom:1px solid rgba(128,128,128,.18);}
.cp-list li:last-child{border-bottom:0;}
.cp-list li .icon{width:18px;height:18px;color:var(--f7-theme-color);flex:none;}
/* Popups de aniversário (#3 próprio / #2 outros) */
.aniv-emoji{font-size:64px;line-height:1;margin:6px 0 14px;}
.aniv-list{margin-top:18px;text-align:left;}
.aniv-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(128,128,128,.18);}
.aniv-item:last-child{border-bottom:0;}
.aniv-foto{width:44px;height:44px;border-radius:50%;background:rgba(128,128,128,.2);background-size:cover;background-position:center;flex:none;display:flex;align-items:center;justify-content:center;color:rgba(128,128,128,.75);}
.aniv-foto .icon{width:22px;height:22px;}
.aniv-name{font-size:15px;}
.aniv-action{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;}
.aniv-head{cursor:pointer;}
.aniv-chev{width:20px;height:20px;opacity:.5;transition:transform .25s;}
.aniv-head.open .aniv-chev{transform:rotate(180deg);}
.aniv-done{display:inline-flex;color:var(--f7-theme-color);opacity:.85;}
.aniv-done .icon{width:20px;height:20px;}
/* mural em acordeão (mensagens de parabéns de um aniversariante) */
.aniv-wall{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.aniv-wall.open{max-height:4000px;}
.aniv-msgs{padding-top:4px;}
.aniv-empty{font-size:14px;opacity:.6;text-align:center;padding:14px 6px 16px;}
/* formulário de mensagem (parabéns / agradecimento) */
.aniv-wish-form{display:none;padding:6px 0 14px;}
.aniv-wish-form.open{display:block;}
.aniv-wish-form textarea{min-height:38px;}
.aniv-wish-send{margin-top:8px;}
/* O campo de mensagem destes popups esta' FORA de uma .list, e a regra do F7 que da' largura ao
   campo (.list .item-input-wrap{width:100%}) so' vale dentro de listas. Sem isto o textarea fica
   com a largura intrinseca de ~20 caracteres e a caixa aparece estreita a um canto, com barra de
   scroll — era o que se via no popup dos aniversarios. */
.dp-page .item-input-wrap{width:100%;}
.dp-page .item-input-wrap textarea,.dp-page .item-input-wrap input{width:100%;box-sizing:border-box;}
/* parabéns recebidos / cartões de mensagem */
.aniv-recv-title{margin-top:22px;margin-bottom:2px;font-size:13px;opacity:.6;text-transform:uppercase;letter-spacing:.5px;}
.aniv-recv{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(128,128,128,.18);}
.aniv-recv:last-child{border-bottom:0;}
.aniv-recv-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.aniv-recv-msg{font-size:14px;opacity:.85;word-break:break-word;}
.aniv-del{flex:none;color:rgba(128,128,128,.7);align-self:center;}
.aniv-del .icon{width:18px;height:18px;}
/* mensagem de agradecimento do aniversariante */
.aniv-thanks{position:relative;background:rgba(128,128,128,.12);border-radius:14px;padding:12px 14px;margin:8px 0 12px;}
.aniv-thanks-msg{font-size:14px;line-height:1.45;word-break:break-word;}
.aniv-thanks-by{margin-top:8px;text-align:right;font-size:13px;opacity:.6;}
.aniv-thx-del{position:absolute;top:8px;right:8px;}
/* cabeçalho do regulamento: logótipo + nome do clube (sem banner), sobre o fundo animado */
.regy-popup .br-head{display:flex;align-items:center;gap:12px;padding:12px 16px 8px;}
.regy-popup .br-head-text{min-width:0;}
/* O icone da box, com o mesmo desenho que tem no telemovel: quadrado de cantos redondos.
   Nome proprio (br-head-icon) porque .br-logo ja e do modulo drop-in (linha ~2792, quadrado
   de 104px com borda) e as duas regras juntavam-se: um circulo de 48px dentro de um quadrado
   arredondado, que nao e nem uma coisa nem outra. */
.regy-popup .br-head-icon{width:64px;height:64px;flex-shrink:0;display:block;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.35);}
.regy-popup .br-boxname{margin:0;font-size:18px;line-height:1.2;text-transform:uppercase;color:#fff;}
.onb-slide{padding:6px 24px 24px;box-sizing:border-box;}
.onb-center{text-align:center;margin-top:60px;}
.onb-h{font-size:15px;text-align:center;line-height:1.3;margin:40px 10px 40px;color:var(--f7-text-color);}
.onb-p{font-size:15px;line-height:1.6;opacity:.8;margin:0 0 81px;padding-left:24px;padding-right:24px;}
/* slide saudação com mudança de password */
.onb-has-pass{margin-top:24px;}
.onb-has-pass .onb-h{margin:14px 10px 12px;}
.onb-has-pass .onb-p{margin-bottom:16px;}
.onb-pass-card{margin:0 8px 4px;padding:16px 14px 14px;border-radius:18px;background:rgba(10,8,16,.45);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.onb-pass-intro{font-size:14px;line-height:1.5;opacity:.85;margin:0 0 14px;color:#fff;}
.onb-pass-field{display:flex;align-items:center;height:48px;margin:0 0 10px;padding:0 8px 0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(10,8,16,.4);}
.onb-pass-ico{width:20px;height:20px;flex:none;margin-right:10px;color:rgba(255,255,255,.6);}
.onb-pass-input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font-size:15px;text-align:left;padding:0 6px;outline:none;}
.onb-pass-input::placeholder{color:rgba(255,255,255,.55);}
.onb-pass-eye{flex:none;display:flex;padding:0 6px;color:rgba(255,255,255,.7);}
.onb-pass-eye .icon{width:20px;height:20px;}
.onb-pass-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;margin:2px 0 8px;}
.onb-pass-bar-fill{height:100%;width:0;border-radius:3px;background:#e05a5a;transition:width .3s,background .3s;}
.onb-pass-reqs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:11px;opacity:.6;margin-bottom:12px;}
.onb-req.ok{color:#5dd2a8;opacity:1;}
.onb-pass-err{color:#ff8a8a;font-size:13px;line-height:1.4;min-height:18px;margin:0;}
.onb-legal{margin:6px 0 14px;}
/* Consentimento RGPD: é uma checkbox como as outras da app (square / check-square na cor do tema).
   Ao contrário das do quadro de notificações, esta fica ao lado de um texto de várias linhas — daí
   o alinhamento ao TOPO (a caixa junto à primeira linha, como numa folha de papel) em vez do centro,
   que a punha a meio do parágrafo.
   O tamanho tem de vir em width/height: estes ícones são SVG do lucide e não obedecem ao font-size
   (a regra que aqui estava, font-size:26px, não fazia nada). E o stroke tem de ser declarado porque
   a regra global `svg{stroke-width:1}` afina qualquer ícone da app até quase desaparecer. */
.onb-accept{display:flex;align-items:flex-start;gap:12px;padding:10px 4px;cursor:pointer;}
.onb-accept .icon{flex:0 0 auto;width:24px;height:24px;margin-top:1px;}
.onb-accept .nico-off{opacity:.75;stroke-width:1.6;}
.onb-accept .nico-on{opacity:1;stroke-width:2;}
.onb-accept .onb-p{flex:1 1 auto;min-width:0;padding:0;margin:0;}
.onb-nav{display:flex;gap:10px;margin-top:18px;}
.onb-nav .button{flex:1;}
.onb-langs a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid rgba(128,128,128,.2);border-radius:12px;margin-bottom:8px;color:var(--f7-text-color);}
.onb-langs a.on{border-color:var(--f7-theme-color);}
.onb-langs a.on .icon{color:var(--f7-theme-color);}
.onb-sech{font-size:13px;letter-spacing:.5px;text-transform:uppercase;opacity:.55;margin:18px 0 6px;}
.onb-confetti{font-size:54px;padding-top:30px;padding-bottom:26px;}
.onboarding-popup .ntf-head{display:flex;align-items:flex-end;padding:4px 2px;border-bottom:1px solid rgba(128,128,128,.18);}
.onboarding-popup .ntf-head .ntf-label{flex:1;}
.onboarding-popup .ntf-col{width:46px;text-align:center;}
.onboarding-popup .ntf-col .icon{font-size:19px;opacity:.7;}
.onboarding-popup .ntf-col .ntf-cap{display:block;font-size:9px;opacity:.55;}
.onboarding-popup .ntf-row{display:flex;align-items:center;padding:11px 2px;border-bottom:1px solid rgba(128,128,128,.10);}
.onboarding-popup .ntf-row .ntf-label{flex:1;padding-right:10px;font-size:14px;line-height:1.3;}
.onboarding-popup .ntc{display:inline-flex;cursor:pointer;}
.onboarding-popup .ntc .icon{font-size:23px;}
.onboarding-popup .ntf-na{opacity:.2;}
.onboarding-popup .ntf-col.off .ntc{opacity:.3;pointer-events:none;}
/* linhas verticais finas a separar as colunas E-mail | Push | App (contínuas, por trás dos checkboxes) */
.onboarding-popup .ntf-grid{position:relative;}
.onboarding-popup .ntf-grid::before{content:"";position:absolute;top:0;bottom:0;right:2px;width:138px;pointer-events:none;background:repeating-linear-gradient(to right,rgba(255,255,255,.14) 0 1px,transparent 1px 46px);}
/* Campanha RegyBox — slides de funcionalidades + popup de avaliação */
.cs-img{width:100%;display:block;border-radius:0;}
.cs-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.cs-dot{width:8px;height:8px;border-radius:50%;background:rgba(128,128,128,.35);transition:background .2s;}
.cs-dot.active{background:var(--f7-theme-color);}
/* Popup de avaliação — estrelas */
.cr-stars{display:flex;justify-content:center;gap:6px;margin:20px 0 4px;font-size:46px;color:rgba(128,128,128,.35);cursor:pointer;user-select:none;}
.cr-star{transition:color .15s;}
.cr-star:hover{color:#FF9900;}

/* Campaign slide illustrations */
@keyframes cs-twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes cs-dash{to{stroke-dashoffset:-200}}
@keyframes cs-floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cs-floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes cs-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.cs-ilu{margin:-30px -24px 0;overflow:hidden;border-radius:12px 12px 0 0;}
.cs-ilu svg{display:block;width:100%;height:200px;}

/* Full-page campaign slides */
.cs-fp-page{overflow:hidden;}
.cs-fp-root{position:absolute;inset:0;overflow:hidden;background:#0d0d1a;touch-action:pan-y;}
/* carrossel das 4 ilustracoes: a pista tem 4x a largura e desliza por translateX */
.cs-fp-track{display:flex;width:400%;height:100%;will-change:transform;}
.cs-fp-slide{position:relative;width:25%;height:100%;overflow:hidden;}
.cs-fp-frame{position:absolute;top:0;left:0;width:750px;transform-origin:top left;}
/* pontos: sao o comando, portanto tem de dar para lhes tocar */
.cs-dot{cursor:pointer;}
.cs-fp-overlay{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:16px 24px calc(16px + var(--f7-safe-area-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:14px;}
.cs-fp-overlay .button{width:100%;max-width:340px;}

/* --- dropin module --- */
.dropin-stat-card{margin:0;padding:10px 12px 12px 22px;position:relative;overflow:hidden;border-radius:12px;}
.dropin-stat-bg-icon{position:absolute;right:9px;bottom:-11px;width:50px;height:50px;opacity:.07;color:#fff;pointer-events:none;}
.dropin-stat-label{font-size:11px;color:rgba(255,255,255,.82);margin-bottom:4px;line-height:1.2;}
.dropin-stat-num{font-size:26px;font-weight:700;color:#fff;line-height:1;}
.dropin-stat-bk-total{background:var(--f7-theme-color);}
.dropin-stat-bk-pres{background:#4CAF50;}
.dropin-stat-bk-falta{background:#f44336;}
.dropin-pres-icon{width:26px;height:26px;color:#4CAF50;cursor:pointer;}
.dropin-falta-icon{width:26px;height:26px;color:#f44336;cursor:pointer;}
.dropin-booked-icon{width:26px;height:26px;color:var(--f7-theme-color);opacity:.55;cursor:pointer;}
.dropin-box-name{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dropin-status-col{display:flex;align-items:center;align-self:stretch;flex-shrink:0;padding:0 16px 0 8px;}
.dropin-history-list li{padding:0 !important;margin:0 !important;}
.dropin-history-list li+li{border-top:1px solid rgba(128,128,128,.15);}
.dropin-history-list .item-content{align-items:flex-start !important;padding-top:5px !important;padding-bottom:5px !important;min-height:0 !important;margin-left:10px !important;margin-right:0 !important;border-radius:0 !important;}
.dropin-history-list .item-media{padding-top:0 !important;margin-top:0 !important;align-self:flex-start;}
.dropin-history-list .item-inner{min-height:44px;justify-content:space-between;padding-top:0 !important;padding-bottom:0 !important;}
.dropin-history-list .item-title-row{margin-top:0;margin-bottom:0;}
.dropin-history-list .item-title{line-height:14px;}
.dropin-history-list .item-subtitle{margin-top:0;margin-bottom:0;line-height:14px;}
.dropin-history-list .item-text{margin-top:0;font-size:11px;line-height:1.2;}
.dropin-terms-btn{flex-shrink:0;}
.dropin-history-wrap{margin-top:16px;padding-top:4px;}
.dropin-history-wrap .block-title{background:linear-gradient(to right,color-mix(in srgb,var(--f7-theme-color) 22%,transparent) 0%,transparent 70%);border-radius:999px 8px 8px 999px;padding:10px 10px 10px 20px;}
.dropin-history-list{margin:0 !important;}
.dropin-history-list ul{padding:0 !important;}
.dh-hero-wrap{position:relative;}
.dh-hero-wrap::after{content:'';position:absolute;top:0;left:0;right:0;height:33.33%;background:linear-gradient(to bottom,var(--f7-page-bg-color) 0%,transparent 100%);pointer-events:none;}
.dropin-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;opacity:.45;min-height:40vh;margin-top:-100px;}
.dropin-empty-icon{width:88px;height:88px;margin-bottom:16px;}
.dropin-empty-label{font-size:15px;}
/* --- dropin find box --- */
.dropin-find-subnavbar{margin-top:-9px;}.dropin-find-subnavbar .subnavbar-inner{padding:0 2px 14px;}
/* width:auto e OBRIGATORIO (nao basta apagar a largura): a regra base do bundle e
   .searchbar{width:100%}, e com ela a barra reclamava a linha toda e o botao do MAPA — que so
   existe na app das lojas — ficava por cima do texto que se escrevia (bug 231, 12 relatos, todos
   nas lojas). Quem distribui o espaco e o flex:1 do proprio <form> (find_box.php), com ou sem
   botao ao lado, por isso a PWA e o browser ficam na mesma. */
.dropin-find-subnavbar .searchbar{height:40px;border-radius:20px;background:rgba(128,128,128,.12);width:auto;}
.dropin-find-subnavbar .searchbar-input-wrap input{font-size:14px;}
.dropin-find-subnavbar .searchbar-icon{opacity:.45;}
.dropin-loc-chip{display:flex;align-items:center;gap:5px;padding:4px 14px 6px;font-size:11px;opacity:.55;}
.dropin-loc-chip-icon{width:12px;height:12px;flex-shrink:0;}
.dropin-find-list .item-content{margin-left:0 !important;margin-right:0 !important;border-radius:0 !important;padding-top:5px !important;padding-bottom:5px !important;min-height:0 !important;align-items:center !important;}
.dropin-find-list .item-media{padding-top:0 !important;align-self:center !important;}
.dropin-find-list li+li{border-top:1px solid rgba(128,128,128,.12);}
.dropin-find-list .item-inner{padding-top:0 !important;padding-bottom:0 !important;min-height:0 !important;}
.dropin-find-list .item-inner::after{display:none !important;}
.dropin-find-list .item-title-row{margin:0;}
.dropin-box-logo{width:60px;height:60px;border-radius:10px;object-fit:cover;background:rgba(128,128,128,.08);}
.dropin-find-name{font-size:13px;font-weight:500;letter-spacing:.2px;}
.dropin-find-addr{font-size:11px;opacity:.55;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px !important;}
.dropin-find-row{margin-top:3px;white-space:nowrap;}
.dropin-find-price{font-size:11px;opacity:.5;display:inline-flex;align-items:center;gap:3px;}
.dropin-find-visits{font-size:11px;color:var(--f7-theme-color);display:inline-flex;align-items:center;gap:3px;margin-left:20px;}
.dropin-visits-icon{width:11px;height:11px;flex-shrink:0;}
.dropin-price-icon{width:11px;height:11px;flex-shrink:0;}
.dropin-dist-pill{font-size:11px;color:var(--f7-theme-color);font-weight:500;white-space:nowrap;flex-shrink:0;}
.dropin-item-after{display:flex;align-items:center;gap:6px;}
.dropin-find-item{position:relative;}
.dropin-fav-btn{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;padding:8px 6px;color:rgba(128,128,128,.4);cursor:pointer;}
.dropin-fav-icon{width:18px;height:18px;}
.dropin-fav-active{color:#f44336 !important;}
.dropin-fav-active path{fill:currentColor;}
/* heart button inline with gym name */
.br-name-row{display:flex;align-items:center;gap:6px;}
.br-fav-inline-icon{width:20px;height:20px;flex-shrink:0;opacity:.55;transition:color .2s,opacity .2s,transform .15s;cursor:pointer;}
.br-fav-inline-icon.dropin-fav-active{opacity:1;}
#br-fav-btn:active .br-fav-inline-icon{transform:scale(1.25);}
.dropin-filter-wrap{position:relative;margin:0;}
.dropin-filter-cats{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 16px 6px;cursor:grab;user-select:none;}
.dropin-filter-cats::-webkit-scrollbar{display:none;}
.dropin-filter-cats.dragging{cursor:grabbing;}
.dropin-filter-chip{display:inline-flex;align-items:center;white-space:nowrap;padding:5px 14px;border-radius:999px;font-size:13px;border:1.5px solid rgba(128,128,128,.3);color:var(--f7-text-color);flex-shrink:0;text-decoration:none;-webkit-user-drag:none;}
.dropin-filter-chip.active{background:var(--f7-theme-color);border-color:var(--f7-theme-color);color: var(--wp-on-theme, #fff);}
.dropin-filter-fade{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;display:none;}
.dropin-filter-fade.left{left:0;background:linear-gradient(to right,var(--f7-page-bg-color),transparent);}
.dropin-filter-fade.right{right:0;background:linear-gradient(to left,var(--f7-page-bg-color),transparent);}
.dropin-find-list ul{padding:0 !important;margin:0 !important;}
/* --- dropin home v2 --- */
.dropin-stat-clickable{cursor:pointer;transition:opacity .15s;}
.dropin-stat-clickable:active{opacity:.7;}
.dropin-tabs-wrap{padding:12px 16px 0;}
.dropin-tab-badge{display:inline-block;background:var(--f7-theme-color);color: var(--wp-on-theme, #fff);border-radius:999px;font-size:10px;line-height:1;padding:2px 6px;margin-left:5px;font-weight:600;vertical-align:middle;}
.dropin-swipe-hint{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:5px 16px 0;font-size:11px;opacity:.38;}
.dropin-rebook-btn{background:var(--f7-theme-color) !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px;padding:0 20px !important;}
.dropin-rebook-btn svg{display:block;width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.dropin-rebook-label{color:#fff;font-size:11px;white-space:nowrap;}
.dropin-tab-empty{text-align:center;padding:76px 24px 36px;}
#dropin-tab-upcoming .dropin-tab-empty,#dropin-tab-history .dropin-tab-empty{margin-top:-70px;padding-bottom:6px;}
.dropin-tab-empty-icon{display:block;margin:0 auto 10px;width:90px;height:90px;opacity:.3;}
.dropin-see-history-wrap{text-align:center;padding:2px 16px 16px;}
.dropin-see-history-link{font-size:13px;opacity:.55;}
.dropin-empty-state-full{display:flex;flex-direction:column;align-items:center;padding:24px 24px 16px;text-align:center;}
.dropin-empty-svg{width:200px;height:auto;margin-bottom:14px;}
.dropin-empty-title{font-size:17px;font-weight:500;margin-bottom:6px;}
.dropin-empty-sub{font-size:13px;opacity:.5;margin-bottom:20px;max-width:240px;line-height:1.4;}
.dropin-empty-find-btn{min-width:180px;}
.dropin-tab-bar{display:flex;margin:12px 16px 0;border-bottom:1px solid rgba(128,128,128,.15);position:relative;}
.dropin-tab-bar .tab-link{flex:1;text-align:center;padding:9px 4px;font-size:14px;font-weight:500;color:var(--f7-text-color);opacity:.4;border-bottom:none;margin-bottom:0;transition:opacity .15s;}
.dropin-tab-bar .tab-link-active{opacity:1;}
.br-tab-indicator{position:absolute;bottom:0;height:2.5px;border-radius:2px;background:var(--f7-theme-color);pointer-events:none;transition:left .25s ease,width .25s ease;opacity:0;}
.dropin-logo-ph{width:44px;height:44px;border-radius:10px;background:rgba(128,128,128,.12);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--f7-theme-color);flex-shrink:0;position:relative;overflow:hidden;}
.dropin-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;}
/* --- box_regras detail page --- */
.br-hero{height:200px;overflow:hidden;position:relative;}
.br-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top left,var(--f7-page-bg-color) 0%,transparent 58%),linear-gradient(to bottom,transparent 50%,var(--f7-page-bg-color) 100%);pointer-events:none;}
.br-hero-img{width:100%;height:100%;object-fit:cover;display:block;}
.br-hero-anim{width:100%;height:100%;display:block;}
.br-info-row{display:flex;align-items:flex-end;gap:14px;padding:0 16px 12px;margin-top:-82px;position:relative;z-index:10;}
.br-logo-wrap{flex-shrink:0;}
.br-logo{width:104px;height:104px;border-radius:18px;object-fit:cover;border:3px solid var(--f7-page-bg-color);background:rgba(128,128,128,.12);display:block;box-shadow:0 4px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);}
.br-info-right{flex:1;min-width:0;padding-bottom:4px;padding-top:8px;}
.br-box-name{font-size:15px;font-weight:500;letter-spacing:.3px;line-height:1.2;}
.br-box-addr{font-size:12px;opacity:.55;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.br-pills{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;}
.br-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;opacity:.55;}
.br-pill-v{color:var(--f7-theme-color);opacity:1;}
.dropin-tab-bar .br-tab{font-size:13px;text-transform:uppercase;}
.br-swiper{width:100%;height:260px;position:relative;}
.br-slide-counter{position:absolute;top:10px;right:12px;z-index:10;background:rgba(0,0,0,.45);color:#fff;font-size:12px;padding:2px 9px;border-radius:20px;pointer-events:none;}
.br-swiper-dots{position:absolute;bottom:8px;left:0;right:0;z-index:5;display:flex;justify-content:center;pointer-events:none;}
.br-swiper-dots .swiper-pagination-bullet{pointer-events:auto;}
.br-slide{overflow:hidden;}
.br-slide-img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;}
.br-sched-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(128,128,128,.1);font-size:13px;}
.br-sched-row:last-child{border-bottom:none;}
.br-sched-day{font-weight:500;}
.br-sched-time{opacity:.7;}
.br-terms{padding:16px 16px 8px;}
.br-terms-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding-bottom:14px;justify-content:flex-end;}
.br-terms-label{font-size:13px;opacity:.8;line-height:1.4;padding-top:1px;}
.br-cta-row{display:flex;gap:10px;}
.br-book-btn{flex:1;display:flex !important;align-items:center;justify-content:center;}
.br-dirs-btn{flex:0 0 auto;display:flex !important;align-items:center;justify-content:center;padding-left:16px;padding-right:16px;}
/* box sem coordenadas (bug 1815): o botao continua la mas apagado — ao toque explica porque
   nao ha mapa, em vez de nao fazer nada e deixar o membro a pensar que a app esta avariada */
.br-dirs-off{opacity:.45;}
.br-book-disabled{opacity:.35;}
.br-warning{text-align:center;padding:24px 20px;}
.br-tab-content-wrap{overflow:hidden;}
@keyframes br-slide-in-right{from{transform:translateX(105%);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes br-slide-in-left{from{transform:translateX(-105%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.br-tab-anim-right{animation:br-slide-in-right .22s ease;}
.br-tab-anim-left{animation:br-slide-in-left .22s ease;}
/* --- dropin book-a-class (aulas_dropin) --- */
.da-strip-wrap{position:sticky;top:0;z-index:10;background:var(--f7-page-bg-color);border-bottom:1px solid rgba(128,128,128,.15);padding:10px 0 8px;position:relative;}
.da-strip{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 14px;cursor:grab;user-select:none;}
.da-strip::-webkit-scrollbar{display:none;}
.da-strip.dragging{cursor:grabbing;}
.da-strip-fade{position:absolute;top:0;bottom:0;width:38px;display:flex;align-items:center;pointer-events:none;z-index:2;}
.da-strip-fade.left{left:0;justify-content:flex-start;padding-left:4px;background:linear-gradient(to right,var(--f7-page-bg-color),transparent);}
.da-strip-fade.right{right:0;justify-content:flex-end;padding-right:4px;background:linear-gradient(to left,var(--f7-page-bg-color),transparent);}
.da-strip-fade svg{width:18px;height:18px;opacity:.75;color:var(--f7-theme-color);}
.da-month-sep{flex:0 0 auto;display:flex;align-items:center;padding:0 6px 0 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--f7-theme-color);opacity:.6;white-space:nowrap;border-left:1.5px solid rgba(128,128,128,.2);margin-left:4px;user-select:none;pointer-events:none;}
.da-month-sep:first-child{border-left:none;margin-left:0;padding-left:0;}
.da-day-pill{display:flex;flex-direction:column;align-items:center;padding:7px 10px;border-radius:14px;text-decoration:none;min-width:44px;flex-shrink:0;-webkit-user-drag:none;color:var(--f7-text-color);}
.da-day-pill:active{opacity:.7;}
.da-day-active{background:var(--f7-theme-color);color: var(--wp-on-theme, #fff) !important;}
.da-day-name{font-size:11px;opacity:.65;text-transform:uppercase;line-height:1;}
.da-day-active .da-day-name{opacity:.85;}
.da-day-num{font-size:17px;font-weight:500;line-height:1.3;}
.da-block-msg{font-size:13px;color:var(--f7-text-color);opacity:.75;margin:12px 16px 0;}
.da-spinner{display:flex;justify-content:center;padding:40px 0;}
.da-empty-day{display:flex;flex-direction:column;align-items:center;padding:50px 20px 52px;text-align:center;opacity:.2;}
.da-empty-icon{width:120px;height:120px;margin-bottom:16px;}
.da-empty-day p{font-size:14px;margin:0;}
.da-class-card{margin:10px 16px 0;}
.da-class-card:last-child{margin-bottom:10px;}
.da-card-past{opacity:.5;}
.da-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.da-class-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.da-class-name{font-size:14px;font-weight:500;flex:1;}
.da-class-time{font-size:13px;opacity:.6;white-space:nowrap;}
.da-card-details{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.da-detail-item{display:inline-flex;align-items:center;gap:3px;font-size:12px;opacity:.6;}
.da-detail-icon{width:12px;height:12px;flex-shrink:0;}
.da-cap-right{margin-left:auto;}
.da-card-action{display:flex;align-items:center;justify-content:space-between;min-height:32px;}
.da-card-status{font-size:12px;flex:1;padding-right:8px;}
.da-status-ok{color:var(--f7-theme-color);}
.da-status-err{color:#f44336;}
.da-status-info{opacity:.6;}
.da-status-muted{opacity:.45;}
.da-book-btn,.da-cancel-btn{flex-shrink:0;}
@font-face{font-family:'digital-7';src:url('../fonts/digital-7.ttf');}
.timer_class{font-family:'digital-7',sans-serif;font-size:14px;letter-spacing:2px;color:var(--f7-theme-color);}
.a_aula{padding:15px 15px 7px 15px;}
.a_nome_aula{font-size:14px;text-transform:uppercase;line-height:14px;opacity:.8;}
.a_prof{text-transform:uppercase;opacity:.7;font-size:12px;}
.a_foto_prof{width:48px;position:absolute;top:-20px;right:0;z-index:10;border-radius:50%;border:1px solid rgba(var(--f7-theme-color-rgb),.2);}
.a_icon_loc{width:35px;position:absolute;top:-20px;right:0;z-index:10;}
.a_hora{font-size:12px;opacity:.7;}
.a_insc{padding-top:5px;font-size:12px;opacity:.7;}
.buts_inscrever{width:auto;height:23px;font-size:12px;position:absolute;right:10px;bottom:10px;}
.a_info{text-transform:uppercase;opacity:.7;font-size:12px;}
.letra_10{font-size:10px;text-transform:uppercase;opacity:.7;}

/* ATIVIDADES */
.atv-logo{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#f5f5f5;}
.atv-media-wrap{width:54px;min-width:54px;}
.atv-title{font-size:15px;font-weight:500;line-height:1.3;}
.atv-box-name{font-size:12px;opacity:.6;}
.atv-new-dot{width:8px;height:8px;background:var(--f7-theme-color);border-radius:50%;display:inline-block;margin-left:4px;vertical-align:middle;}
.atv-date{font-size:12px;opacity:.6;}
.atv-type-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(var(--f7-theme-color-rgb),.12);color:var(--f7-theme-color);}
.atv-status-open{font-size:11px;color:#4caf50;font-weight:500;text-transform:uppercase;}
.atv-status-closed{font-size:11px;color:#f44336;font-weight:500;text-transform:uppercase;}
.atv-status-ongoing{font-size:11px;color:var(--f7-theme-color);font-weight:500;text-transform:uppercase;}
.atv-status-done{font-size:11px;opacity:.45;font-weight:500;text-transform:uppercase;}
.atv-status-soon{font-size:11px;color:#ff9800;font-weight:500;text-transform:uppercase;}
.atv-section{margin-bottom:0;}
.atv-section-title{font-size:12px;text-transform:uppercase;opacity:.55;font-weight:500;display:flex;align-items:center;gap:6px;}
.atv-sec-icon{width:16px;height:16px;}
.atv-date-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;}
.atv-date-icon{width:18px;height:18px;opacity:.5;flex-shrink:0;margin-top:2px;}
.atv-date-label{font-size:11px;opacity:.55;text-transform:uppercase;}
.atv-date-val{font-size:14px;}
.atv-notif-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;}
.atv-notif-label{font-size:14px;}
.atv-tipo-icon{width:18px;height:18px;opacity:.6;}
.atv-search-title{font-size:14px;opacity:.7;margin:0 0 10px;}
/* inputs readonly desta área: mesma ideia da regra .picker-from-select lá em baixo, mas
   alargada a QUALQUER input readonly aqui dentro (não só os pickers). Nota: parte do que esta
   regra fazia era disfarçar o type="text" em falta nos pickers — isso está corrigido na origem. */
#atv-inner .picker-from-select,#atv-inner .item-input-wrap input[readonly]{
	background-color:transparent;
	color:var(--f7-text-color);
	-webkit-text-fill-color:var(--f7-text-color);
	border:0;
	box-shadow:none;
}
.atv-search-count{font-size:12px;opacity:.55;padding:12px 16px 0;}
.atv-search-bar{padding:8px 16px 0;}
.atv-empty{text-align:center;padding:40px 20px;opacity:.4;}
.atv-filter-row{display:flex;gap:8px;padding:0 16px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.atv-filter-row::-webkit-scrollbar{display:none;}
.atv-filter-chip{flex-shrink:0;padding:4px 14px;border-radius:99px;border:1px solid rgba(var(--f7-theme-color-rgb),.3);font-size:12px;background:transparent;cursor:pointer;white-space:nowrap;}
.atv-filter-chip.active{background:var(--f7-theme-color);color: var(--wp-on-theme, #fff);border-color:var(--f7-theme-color);}
.insc-team-member{border-bottom:1px solid rgba(128,128,128,.15);}
.insc-team-member:last-child{border-bottom:none;}
/* Activity upcoming — status board layout (ativ_upcoming.php) */
.atv-sb-list{margin:0;}
.atv-sb-sect{padding:8px 16px 4px;font-size:10px;letter-spacing:1px;font-weight:600;text-transform:uppercase;color:rgba(var(--f7-theme-color-rgb),.5);}
.atv-sb-row{position:relative;display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(128,128,128,.12);cursor:pointer;}
.atv-sb-row:active{opacity:.7;}
.atv-sb-stripe{width:3px;height:40px;border-radius:2px;margin-right:10px;flex-shrink:0;}
.atv-sb-logo-wrap{position:relative;margin-right:10px;flex-shrink:0;}
.atv-sb-logo{width:36px;height:36px;border-radius:8px;object-fit:cover;display:block;background:rgba(128,128,128,.1);}
.atv-sb-new-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:#FF4D6D;border-radius:50%;border:2px solid var(--f7-page-bg-color);}
.atv-sb-info{flex:1;min-width:0;}
.atv-sb-name{font-size:13px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.atv-sb-club{font-size:11px;opacity:.55;margin-top:2px;}
.atv-sb-stat{margin-left:10px;text-align:right;flex-shrink:0;min-width:70px;}
.atv-sb-sl{font-size:9px;font-weight:400;display:block;letter-spacing:.3px;line-height:1.5;}
.atv-sb-dim .atv-sb-name{opacity:.4;}
.atv-sb-dim .atv-sb-club{opacity:.25;}
.atv-sb-dim .atv-sb-logo-wrap{opacity:.35;}
.atv-sb-dim .atv-sb-stripe{opacity:.25;}
.atv-sb-filter-note{font-size:12px;opacity:.5;text-align:center;padding:12px 20px 20px;}
/* Activity upcoming — filter chips (usa o sistema global .aval-chips + initChipsSwipe) */
.atv-chip{flex-shrink:0;padding:6px 14px;border-radius:999px;background:rgba(128,128,128,.12);font-size:12px;color:var(--f7-text-color);white-space:nowrap;-webkit-user-drag:none;}
.atv-chip.active{background:var(--f7-theme-color);color: var(--wp-on-theme, #fff);}
.atv-chip-n{opacity:.6;font-size:11px;margin-left:3px;}
.atv-chip.active .atv-chip-n{opacity:.85;}
/* fila de chips (.aval-chips) dentro do header — cadeia flex com min-width:0 a cada nível
   para a fila ficar com largura limitada e o initChipsSwipe detetar o overflow (setas) */
.atv-navbar-chips{flex:1;min-width:0;height:var(--f7-navbar-height);display:flex;align-items:center;}
.atv-navbar-chips .aval-chips-wrap{flex:1;min-width:0;height:100%;}
.atv-navbar-chips .aval-chips{width:100%;min-width:0;height:100%;box-sizing:border-box;align-items:center;padding:0 6px;}
.atv-navbar-chips .aval-chips-fade{bottom:0;}
/* type icon badge on logo */
.atv-sb-type{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--f7-page-bg-color);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.atv-sb-type svg{width:11px;height:11px;color:var(--f7-theme-color);}
/* NEW pill on logo */
.atv-sb-new-pill{position:absolute;top:6px;right:14px;background:#FF4D6D;color:#fff;font-size:8px;font-weight:500;letter-spacing:.5px;padding:1px 5px;border-radius:99px;line-height:1.4;text-transform:uppercase;box-shadow:0 1px 3px rgba(0,0,0,.25);}
/* favorite heart */
.atv-sb-fav{margin-left:8px;flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:rgba(128,128,128,.55);cursor:pointer;}
.atv-sb-fav svg{width:20px;height:20px;}
.atv-sb-fav.is-fav{color:#FF4D6D;}
.atv-sb-fav.is-fav svg{fill:#FF4D6D;}
.atv-sb-fav:active{transform:scale(.85);}
/* distance suffix + empty state */
.atv-sb-dist{opacity:.7;}
.atv-sb-empty{text-align:center;padding:40px 20px;opacity:.5;}
.atv-sb-empty svg{width:38px;height:38px;opacity:.5;}
.atv-sb-empty p{margin-top:8px;font-size:13px;}
/* filter & sort sheet */
.atv-filter-sheet.sheet-modal{height:auto;}
.atv-filter-sheet .sheet-modal-inner{height:auto;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);}
.atv-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;font-size:15px;}
.atv-sheet-head svg{width:22px;height:22px;}
.atv-sheet-body{padding:6px 16px calc(24px + env(safe-area-inset-bottom, 0px));}
.atv-sheet-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.55;margin:14px 0 8px;}
.atv-sort-opts,.atv-type-opts{display:flex;flex-wrap:wrap;gap:8px;}
.atv-sort-opt{padding:7px 14px;border-radius:999px;background:rgba(128,128,128,.12);font-size:13px;color:var(--f7-text-color);}
.atv-sort-opt.active{background:var(--f7-theme-color);color: var(--wp-on-theme, #fff);}
.atv-type-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(128,128,128,.12);font-size:13px;color:var(--f7-text-color);}
.atv-type-chip svg{width:15px;height:15px;opacity:.8;}
.atv-type-chip.active{background:var(--f7-theme-color);color: var(--wp-on-theme, #fff);}
.atv-type-chip.active svg{opacity:1;}
.atv-sheet-actions{display:flex;gap:10px;margin-top:20px;}
.atv-sheet-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
/* o botao da localizacao leva o texto comprido: fica com o espaco todo; o REPOR encolhe
   para o tamanho do proprio texto (antes eram 50/50 e o vermelho nao cabia) */
.atv-sheet-actions .atv-loc-btn{flex:1 1 auto;min-width:0;}
.atv-sheet-actions .atv-reset-btn{flex:0 0 auto;padding-left:18px;padding-right:18px;}
.atv-sheet-actions .button svg{width:16px;height:16px;}
#atv-loc-btn.atv-loc-on{background:#40C870;}
#atv-loc-btn.atv-loc-loading{opacity:.6;}

/* CLAUDE CREATED CSS — MESSAGES / CHAT */
.msgs-conv-name{font-size:15px;font-weight:500;}
.msgs-conv-preview{font-size:13px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msgs-conv-time{font-size:12px;opacity:.5;}
.msgs-unread-badge{position:absolute;right:14px;top:50%;transform:translateY(-50%);}
.msgs-chat-content{padding-bottom:80px;}
.msgs-list{padding:8px 0 4px;}
.msgs-bubble-wrap{display:flex;align-items:flex-end;margin:3px 12px;gap:6px;}
.msgs-bubble-wrap.mine{flex-direction:row-reverse;}
.msgs-bubble-wrap.theirs{flex-direction:row;}
.msgs-bubble{max-width:75%;padding:8px 12px;border-radius:18px;font-size:14px;line-height:1.45;word-break:break-word;}
.msgs-bubble-wrap.mine .msgs-bubble{background:var(--f7-theme-color);color: var(--wp-on-theme, #fff);border-bottom-right-radius:4px;}
.msgs-bubble-wrap.theirs .msgs-bubble{background:rgba(128,128,128,.15);border-bottom-left-radius:4px;}
.msgs-bubble-time{font-size:11px;opacity:.55;margin-top:3px;display:flex;align-items:center;gap:3px;}
.msgs-bubble-wrap.mine .msgs-bubble-time{justify-content:flex-end;}
.msgs-empty{opacity:.45;padding-top:60px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.msgs-empty svg{width:56px;height:56px;color:var(--f7-theme-color);opacity:.8;}
.msgs-del-wrap{display:flex;align-items:center;align-self:flex-start;}
.msgs-del-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:inherit;opacity:.45;}
.msgs-del-btn svg{width:18px;height:18px;}
.msgs-input-bar{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--f7-page-bg-color);padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:flex-end;border-top:1px solid rgba(128,128,128,.2);}
.msgs-input-bar textarea{flex:1;border:1px solid rgba(128,128,128,.3);border-radius:20px;padding:8px 14px;font-size:14px;background:transparent;color:var(--f7-text-color);resize:none;line-height:1.4;max-height:120px;overflow-y:auto;}
.msgs-send-btn{width:36px;height:36px;border-radius:50%;background:var(--f7-theme-color);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color: var(--wp-on-theme, #fff);}

/* toast com foto (ex.: nova mensagem de chat) */
.custom-toast-lucide .toast-icon-row{display:flex;align-items:center;justify-content:center;gap:12px;}
.custom-toast-lucide .toast-foto{width:52px;height:52px;border-radius:50%;object-fit:cover;}
.custom-toast-lucide .toast-foto + .lucide-icon-container{margin-top:-18px;margin-bottom:0;}

/* painel de emojis do chat */
.msgs-emoji-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--f7-text-color);opacity:.55;cursor:pointer;}
.msgs-emoji-panel{position:absolute;bottom:100%;left:0;right:0;display:none;background:var(--f7-page-bg-color);border-top:1px solid rgba(128,128,128,.2);padding:8px 10px;flex-wrap:wrap;gap:2px;max-height:186px;overflow-y:auto;justify-content:center;}
.msgs-emoji-panel.open{display:flex;}
.msgs-emoji{font-size:24px;padding:6px;cursor:pointer;line-height:1;border-radius:8px;user-select:none;}
.msgs-emoji:active{background:rgba(128,128,128,.2);}

/* grupos de chat */
.msgs-group-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(128,128,128,.18);color:var(--f7-theme-color);flex-shrink:0;}
.msgs-group-avatar-sm{width:30px;height:30px;}
.msgs-group-avatar-lg{width:46px;height:46px;}
.msgs-bubble-autor{font-size:12px;color:var(--f7-theme-color);margin-bottom:2px;}
.msgs-bubble-wrap.mine .msgs-bubble-autor{display:none;}
.msgs-criador-tag{font-size:11px;color:var(--f7-theme-color);border:1px solid var(--f7-theme-color);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:middle;text-transform:uppercase;}
/* botao remover membro do grupo: alvo de toque grande */
.grp-mem-del{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px -12px -10px 0;color:inherit;opacity:.55;}
.grp-mem-del svg{width:22px;height:22px;}

/* chat: separador de dia, novas mensagens, paginacao, visto-por, fotos, anexo */
.msgs-day-sep{display:flex;align-items:center;justify-content:center;margin:14px 0 8px;}
.msgs-day-sep span{font-size:11px;text-transform:uppercase;opacity:.55;background:rgba(128,128,128,.14);border-radius:999px;padding:3px 12px;}
.msgs-new-divider{display:flex;align-items:center;gap:10px;margin:12px 0;}
.msgs-new-divider:before,.msgs-new-divider:after{content:"";flex:1;height:1px;background:var(--f7-theme-color);opacity:.4;}
.msgs-new-divider span{font-size:11px;text-transform:uppercase;color:var(--f7-theme-color);}
.msgs-load-older{text-align:center;margin:6px 0 12px;}
.msgs-load-older a{font-size:13px;opacity:.7;}
.msgs-seen-chip{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:inherit;opacity:.75;border:1px solid rgba(128,128,128,.35);border-radius:999px;padding:0 7px;line-height:16px;}
.msgs-seen-chip svg{width:12px;height:12px;}
.msgs-bubble .msgs-foto{max-width:100%;max-height:280px;border-radius:16px;display:block;cursor:pointer;}
.msgs-bubble-wrap .msgs-bubble:has(.msgs-foto){padding:4px;background:rgba(128,128,128,.15);overflow:hidden;}
.msgs-attach-wrap{position:relative;display:inline-flex;flex-shrink:0;}
.msgs-attach-info{position:absolute;top:-7px;right:-4px;}
.msgs-attach-info svg{width:13px;height:13px;opacity:.45;}

/* ============ CHAT V2 — restyle moderno ============ */
/* fundo: micro-grelha de pontos na cor do tema */
.msgs-chat-content{
	padding-bottom:104px;
	background-image:radial-gradient(color-mix(in srgb, var(--f7-theme-color) 10%, transparent) 1px, transparent 1.4px);
	background-size:20px 20px;
}
.dark .msgs-chat-content{background-image:radial-gradient(color-mix(in srgb, var(--f7-theme-color) 18%, transparent) 1px, transparent 1.4px);}

/* pilhas de bolhas: mensagens seguidas do mesmo autor colam-se */
.msgs-bubble-wrap{margin:1px 12px;}
.msgs-bubble-wrap.stack-first{margin-top:10px;}
.msgs-bubble{border-radius:20px;}
.msgs-bubble-wrap.mine .msgs-bubble{
	border-radius:20px 20px 6px 20px;
	/* tinta discreta: cor do tema misturada com o fundo da página — funciona em claro e escuro */
	background:var(--f7-theme-color);
	background:color-mix(in srgb, var(--f7-theme-color) 20%, var(--f7-page-bg-color));
	border:1px solid color-mix(in srgb, var(--f7-theme-color) 35%, transparent);
	color:var(--f7-text-color);
}
.msgs-bubble-wrap.mine:not(.stack-first) .msgs-bubble{border-top-right-radius:6px;}
.msgs-bubble-wrap.theirs .msgs-bubble{
	border-radius:20px 20px 20px 6px;
	background:rgba(128,128,128,.13);
	border:1px solid rgba(128,128,128,.10);
}
.msgs-bubble-wrap.theirs:not(.stack-first) .msgs-bubble{border-top-left-radius:6px;}
.msgs-bubble-time{margin:3px 4px 0;}

/* avatar do autor nas bolhas de grupo (primeira da pilha) */
.msgs-bubble-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;align-self:flex-start;margin-top:2px;}
.msgs-bubble-avatar-sp{width:26px;flex-shrink:0;}
.msgs-bubble-autor{font-size:12px;margin-bottom:2px;opacity:.95;}

/* entrada animada da bolha nova */
.msgs-enter{animation:msgs-in .22s ease-out;}
@keyframes msgs-in{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}

/* barra de escrita: capsula flutuante */
.msgs-input-bar{
	left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
	border-radius:26px;border:1px solid rgba(128,128,128,.25);
	padding:8px 10px;
	background:var(--f7-page-bg-color);
}
.msgs-input-bar textarea{border:none;background:rgba(128,128,128,.10);border-radius:18px;padding:9px 14px;}
.msgs-send-btn{
	width:40px;height:40px;
	background:linear-gradient(135deg, color-mix(in srgb, var(--f7-theme-color) 86%, #fff), color-mix(in srgb, var(--f7-theme-color) 84%, #000));
	transition:transform .12s ease;
}
.msgs-send-btn:active{transform:scale(.86);}
.msgs-emoji-panel{
	left:0;right:0;margin-bottom:10px;
	border:1px solid rgba(128,128,128,.25);border-radius:18px;
	background:var(--f7-page-bg-color);
}

/* separador de dia: pilula */
.msgs-day-sep span{
	font-size:10px;letter-spacing:.4px;opacity:.85;
	background:color-mix(in srgb, var(--f7-page-bg-color) 65%, rgba(128,128,128,.25));
	border:1px solid rgba(128,128,128,.15);
}

/* inbox: anel de nao-lida no avatar + nome em destaque */
.msgs-conv-list li.msgs-unread .item-media img,
.msgs-conv-list li.msgs-unread .msgs-group-avatar-lg{outline:2px solid var(--f7-theme-color);outline-offset:2px;}
.msgs-conv-list li.msgs-unread .msgs-conv-name{color:var(--f7-theme-color);}
.msgs-conv-list li.msgs-unread .msgs-conv-preview{opacity:.85;}
/* fotos: largura definida (senao o flex-item estica a linha toda e a foto perde o alinhamento) */
.msgs-bubble .msgs-foto{max-width:min(62vw, 320px);}
/* minhas mensagens: caixote a ESQUERDA da bolha/foto */
.msgs-bubble-wrap.mine .msgs-del-wrap{order:2;align-self:center;}
/* sino do mute no navbar do chat: o span wrapper nao pode quebrar o alinhamento */
#chat-mute-icon{display:inline-flex;align-items:center;}
/* inbox: linhas mais compactas + badge junto ao chevron */
.msgs-conv-list .item-inner{padding-top:8px;padding-bottom:8px;}
.msgs-conv-name{line-height:23px !important;}
.msgs-conv-time{line-height:10px;margin-top:1px;}
.list .item-subtitle.msgs-conv-preview{line-height:1.25 !important;margin-top:3px;}
.msgs-unread-badge2{background:var(--f7-theme-color);font-size:10px;min-width:18px;height:18px;line-height:18px;}
/* caixa de pesquisa arredondada do modulo de mensagens (padrao loja-search-wrap) */
.msgs-search-wrap{display:flex;align-items:center;gap:8px;background:rgba(128,128,128,.14);border-radius:999px;padding:9px 16px;margin:10px 16px 8px;}
.msgs-search-wrap input{border:0;background:transparent;outline:none;width:100%;color:var(--f7-text-color);font-size:14px;}
.msgs-search-wrap svg{width:18px;height:18px;opacity:.5;flex-shrink:0;}
/* subtitles de listas mais compactos (pedido Miguel) */
.list .item-subtitle{line-height:12px !important;}
/* inbox: lista encostada ao navbar */
.msgs-conv-list{margin-top:0;}
/* estado vazio das pesquisas de membros (icone + texto centrados) */
.msgs-no-results{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0;opacity:.5;font-size:14px;width:100%;}
.msgs-no-results svg{width:34px;height:34px;stroke-width:1.5;}
/* mensagem so com emojis: 2x tamanho, sem balao */
.msgs-bubble-wrap .msgs-bubble.msgs-emoji-only{background:none !important;border:none !important;padding:0 2px;font-size:30px;line-height:1.25;}
.msgs-bubble-wrap .msgs-bubble.msgs-emoji-only .msgs-bubble-autor{font-size:12px;line-height:1.2;}
/* bolha de foto: o limite de largura e o da imagem (senao o max-width 75%% da bolha corta-a com o overflow:hidden) */
.msgs-bubble-wrap .msgs-bubble:has(.msgs-foto){max-width:none;}
.msgs-bubble-wrap .msgs-bubble.msgs-emoji-only{max-width:none;}
/* alinhamento das bolhas: o contentor interno (bolha+hora) cresce ate ao max-content
   do texto sem quebras — em coluna flex a bolha encolhe ao conteudo e alinha ao lado certo */
.msgs-bubble-wrap.mine > div:not(.msgs-del-wrap){display:flex;flex-direction:column;align-items:flex-end;min-width:0;}
.msgs-bubble-wrap.theirs > div:not(.msgs-del-wrap){display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
/* dialogo de transferencia de gestao do grupo: lista de staff clicavel */
.grp-transfer-list{display:flex;flex-direction:column;}
.grp-transfer-list .grp-transfer-pick{display:block;padding:11px 6px;border-top:1px solid rgba(128,128,128,.2);color:var(--f7-text-color);font-size:15px;text-align:center;}
.grp-transfer-list .grp-transfer-pick:active{background:rgba(128,128,128,.15);}
/* lista de importacao de membros: sem negrito */
#grp-import-list .item-title{font-weight:400;}
/* input do pedir_texto() (prompt custom) */
.custom-confirm-dialog .pedir-texto-input{width:100%;margin-top:14px;border:none;border-bottom:1px solid rgba(128,128,128,.4);background:transparent;color:var(--f7-text-color);font-size:16px;padding:8px 4px;outline:none;text-align:center;}
.custom-confirm-dialog .pedir-texto-input:focus{border-bottom-color:var(--f7-theme-color);}
/* envio otimista: bolha pendente (relogio) + spinner sobre fotos em upload */
.msgs-bubble-wrap.msgs-pending{opacity:.7;}
.msgs-bubble-wrap .msgs-bubble:has(.msgs-foto){position:relative;}
.msgs-bubble-wrap.msgs-pending .msgs-bubble:has(.msgs-foto)::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:msgs-spin .8s linear infinite;}
@keyframes msgs-spin{to{transform:rotate(360deg);}}
/* sheet de membros do grupo: conteudo encostado a toolbar */
#chat-members-sheet .page-content{padding-top:0;}
/* painel esquerdo: o banner+avatar vivem fora do page-content — em coluna flex o
   page-content ocupa exatamente o espaco restante e ganha scroll proprio (telemoveis) */
.panel-left .page{display:flex;flex-direction:column;}
.panel-left .page-content{flex:1;min-height:0;height:auto;overflow-y:auto;}

/* ================= CROSS: WOD DO DIA (S1) ================= */
/* barra de datas (sticky) */
.wod-datebar { position: sticky; top: 0; z-index: 50; background: var(--f7-page-bg-color); padding: 4px 0; }
/* título da data visível na navbar transparente (só na tab WODs) + navbar sólida */
.page[data-name="cross"] .navbar.navbar-transparent.wods-navtitle .title { opacity: 1 !important; }
.page[data-name="cross"] .navbar.navbar-transparent.wods-navtitle .navbar-bg { opacity: 1 !important; }
/* ícones da data injetados na navbar */
.wod-nav-right { display: inline-flex; align-items: center; gap: 0; }
.wod-nav-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--f7-theme-color); }
.wod-nav-btn svg, .wod-nav-btn i[data-lucide] { width: 22px; height: 22px; }
.wod-datehead { display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 6px; }
.wod-datehead-lbl { font-size: 19px; font-weight: 600; letter-spacing: .2px; text-transform: capitalize; }
.wod-datehead-acts { display: inline-flex; gap: 2px; }
.wod-date-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--f7-theme-color); }
.wod-date-btn .icon { width: 22px; height: 22px; }
.wod-date-btn:active { background: rgba(var(--f7-theme-color-rgb), .12); }
.wod-datestrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 12px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wod-datestrip::-webkit-scrollbar { display: none; }
.wod-date { flex: 0 0 auto; width: 50px; padding: 8px 0 6px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--f7-text-color); background: rgba(128,128,128,.08); -webkit-user-drag: none; transition: background .15s; }
.wod-date-wd { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; opacity: .55; }
.wod-date-dd { font-size: 18px; font-weight: 600; line-height: 1.1; }
.wod-date-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.wod-date.is-today .wod-date-dot { background: var(--f7-theme-color); }
.wod-date.is-sel { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.wod-date.is-sel .wod-date-wd { opacity: .9; }
/*---o ponto por baixo do dia selecionado é DESENHADO com a cor do texto, não com branco fixo: num
     tema claro (lima, amarelo) o ponto branco sobre o chip desaparecia.---*/
.wod-date.is-sel .wod-date-dot { background: var(--wp-on-theme, #fff); opacity: .9; }
.wod-dia-feed { padding-top: 4px; min-height: 220px; }

/* grupo (tipo de aula) */
.wod-group-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 8px 12px 0; border-radius: 16px; background: rgba(128,128,128,.08); }
.wod-group-accent { width: 4px; align-self: stretch; min-height: 30px; border-radius: 4px; background: var(--f7-theme-color); }
.wod-group-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wod-group-type { font-size: 16px; font-weight: 600; color: var(--f7-theme-color); text-transform: uppercase; letter-spacing: .3px; }
.wod-group-sub { font-size: 11px; opacity: .5; text-transform: uppercase; letter-spacing: .5px; }
.wod-group-chev { width: 20px; height: 20px; opacity: .5; transition: transform .2s; }
.wod-group-head.is-open .wod-group-chev { transform: rotate(180deg); }
.wod-group-body { padding-top: 2px; }

/* cartão do WOD */
.wod-card { margin: 10px 12px; border-radius: 18px; padding: 16px; box-shadow: none; border: 1px solid rgba(128,128,128,.12); }
.wod-card-head { display: flex; align-items: flex-start; gap: 10px; }
.wod-card-title { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.wod-badges { display: inline-flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.wod-badge { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-size: 12px; background: rgba(128,128,128,.12); color: var(--f7-text-color); }
.wod-badge .icon { width: 15px; height: 15px; }
.wod-badge-cup { color: #f0a500; }
.wod-card-desc { margin-top: 10px; line-height: 1.5; opacity: .92; }
.wod-card-movs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.wod-card-types { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
/* player de vídeo inline (YouTube, 16:9) */
.wod-vid-wrap { margin: 12px 0 4px; position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 14px; overflow: hidden; background: #000; }
.wod-vid-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wod-vid-btn.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
/* chips dos links escritos DENTRO do texto (wod_links_html) */
.wod-yt, .wod-link { display: inline-flex; align-items: center; gap: 5px; vertical-align: -4px; height: 22px; padding: 0 8px; margin: 0 2px; border-radius: 999px; font-size: 12px; line-height: 1; background: rgba(128,128,128,.12); color: var(--f7-text-color); }
.wod-yt { padding: 0 9px; color: #ff0033; background: rgba(255,0,51,.12); }
.wod-yt .icon, .wod-link .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.wod-yt.on { background: #ff0033; color: #fff; }
.wod-link { max-width: 190px; }
.wod-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; text-transform: uppercase; letter-spacing: .3px; }
.wod-vid-inline { max-width: 460px; }

/* ações do cartão */
.wod-actions { margin-top: 14px; display: flex; gap: 8px; }
.wod-act { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 13px; background: rgba(128,128,128,.10); color: var(--f7-text-color); font-size: 13px; font-weight: 500; }
.wod-act .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.wod-act > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wod-act-register { background: rgba(var(--f7-theme-color-rgb), .12); color: var(--f7-theme-color); }
.wod-act-result { flex-direction: column; gap: 0; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.wod-result-val { font-size: 16px; font-weight: 600; line-height: 1.1; }
.wod-result-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }
.wod-act-board { position: relative; }
.wod-act-board.is-blocked { opacity: .5; }
.wod-board-count { position: absolute; top: 5px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }

/* estados vazios / bloqueio */
/* .nf-* = estado vazio/erro do Mural (bug 215): mesmo desenho, sem duplicar as regras.
   A opacidade vive nos TEXTOS e não no contentor: no contentor aplicava-se a tudo o que esta
   dentro — incluindo os botoes de saida —, e a opacidade de um pai nao se anula no filho. */
.wod-empty, .wod-blocked, .nf-empty { text-align: center; padding: 56px 30px; }
.wod-empty-ic, .wod-blocked-ic, .nf-empty-ic { width: 44px; height: 44px; opacity: .32; }
.wod-empty-t, .wod-blocked-t, .nf-empty-t { margin-top: 12px; font-size: 16px; opacity: .75; }
.wod-empty-s, .nf-empty-s { margin: 8px auto 0; font-size: 13px; line-height: 1.5; opacity: .56; max-width: 320px; }
.nf-empty-bt { display: inline-flex; align-items: center; justify-content: center;
	margin-top: 18px; padding: 0 26px; font-size: 12px; height: 34px; width: auto;
	background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); border-radius: 999px; }
.wod-note { margin: 8px 12px 0; }

/* detalhe do WOD */
.wodd-title-card { display: flex; align-items: center; gap: 12px; margin: 14px 12px 4px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, var(--f7-theme-color), var(--f7-theme-color-shade)); color: var(--wp-on-theme, #fff); }
.wodd-title-ic { width: 24px; height: 24px; opacity: .8; flex: 0 0 auto; }
.wodd-title-txt { font-size: 19px; font-weight: 600; line-height: 1.2; }
.wodd-pr-card { padding: 18px 16px; box-shadow: none; border: 1px solid rgba(128,128,128,.12); }
.wodd-pr-row { display: flex; justify-content: space-around; gap: 10px; text-align: center; }
.wodd-pr-cell { display: flex; flex-direction: column; gap: 4px; }
.wodd-pr-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.wodd-pr-val { font-size: 30px; font-weight: 600; line-height: 1; }
.wodd-pr-tag { margin-top: 12px; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--f7-theme-color); }
.wodd-pr-empty { text-align: center; padding: 16px; opacity: .5; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wodd-pr-empty .icon { width: 30px; height: 30px; }
.wodd-hist-empty { text-align: center; padding: 30px; opacity: .5; }
.wodd-mov-row.is-nomedia { opacity: .55; }
.wodd-mov-row .item-media .icon { color: var(--f7-theme-color); width: 22px; height: 22px; }

/* ===== Registar score (S2) ===== */
.rs-title-card { margin: 14px 12px 4px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, var(--f7-theme-color), var(--f7-theme-color-shade)); color: var(--wp-on-theme, #fff); font-size: 19px; font-weight: 600; line-height: 1.2; }
.rs-nav-save { display: inline-flex; align-items: center; gap: 5px; }
.rs-nav-save svg, .rs-nav-save i[data-lucide] { width: 18px; height: 18px; }
/* resultado ao vivo (hero) */
.rs-hero { position: relative; margin: 12px 12px 4px; border-radius: 20px; padding: 16px 20px; overflow: hidden; color: var(--wp-on-theme, #fff); background: linear-gradient(135deg, var(--f7-theme-color), var(--f7-theme-color-shade)); }
.rs-hero::before { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.10); }
.rs-hero-ic { position: absolute; right: 16px; top: 16px; width: 24px; height: 24px; opacity: .5; }
.rs-hero-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; opacity: .85; position: relative; }
.rs-hero-val { font-size: 46px; font-weight: 700; line-height: 1; margin-top: 6px; display: inline-flex; align-items: baseline; gap: 8px; position: relative; transform-origin: left bottom; }
.rs-hero-val.pulse { animation: rmxpulse .38s ease; }
.rs-hero-unit { font-size: 16px; font-weight: 500; opacity: .85; }
.rs-seg { display: flex; gap: 8px; margin: 8px 14px; }
.rs-seg-btn { flex: 1 1 0; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(128,128,128,.12); color: var(--f7-text-color); font-size: 14px; font-weight: 600; letter-spacing: .3px; }
.rs-seg-btn.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.rs-rxseg { margin-top: 12px; }
.rs-calc-note { margin: 14px 16px 2px; font-size: 12px; opacity: .6; text-transform: uppercase; letter-spacing: .4px; }
.rs-series { padding: 4px 14px 0; }
.rs-serie { display: flex; align-items: flex-end; gap: 10px; padding: 7px 0; }
.rs-serie-n { flex: 0 0 auto; width: 28px; font-size: 13px; opacity: .5; padding-bottom: 12px; }
.rs-inputs { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 8px; }
.rs-inputs .cross-pr-half { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; }
.rs-inputs .cross-pr-half label { font-size: 10px; opacity: .55; padding-left: 6px; text-transform: lowercase; }
/*---A CAIXA É DE QUALQUER CAMPO VISÍVEL, não só dos type="number" (Miguel, 2026-09-08). Os campos
     de valor único (rondas+reps, peso, distância) são type="text" com inputmode decimal, para se
     poder escrever vírgula; ficavam sem fundo nenhum — o membro via a etiqueta "reps" e por baixo
     nada, e não sabia onde escrever. Aconteceu no desempate 2 do formulário de resultado.---*/
.rs-inputs input:not([type="hidden"]) { width: 100%; height: 46px; text-align: center; font-size: 20px; font-weight: 600; border: none; border-radius: 13px; background: rgba(128,128,128,.12); color: var(--f7-text-color); outline: none; -moz-appearance: textfield; }
.rs-inputs input[type="number"]::-webkit-outer-spin-button, .rs-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rs-single { flex: 1 1 auto; }
.rs-tb-title { margin-top: 10px; }

/*=== FORMULÁRIO DO RESULTADO: TUDO ALINHADO A 12px (Miguel, 2026-09-08) ===================
   Cada bloco tinha nascido com a sua margem — cartão do nome e resultado a 12, RX/SCALED e séries
   a 14, a nota do cálculo a 16, os botões a 20, os desempates sem margem nenhuma (vivem fora do
   .rs-series) e as notas/vídeo a 12 MAIS os 16 que o Framework7 mete por dentro dos campos com
   contorno. Resultado: cinco larguras diferentes no mesmo ecrã. Aqui fica uma só, a do cartão do
   nome do treino e do resultado, que são a referência.
   O #form_reg_score é de propósito: as classes rmx-* são partilhadas com os ecrãs dos recordes
   (rec_lift, rec_wod), que têm o seu próprio alinhamento e não se mexem daqui.---*/
#form_reg_score .rs-seg { margin-left: 12px; margin-right: 12px; }
#form_reg_score .rs-calc-note { margin-left: 12px; margin-right: 12px; }
#form_reg_score .rs-series { padding-left: 12px; padding-right: 12px; }
#form_reg_score .rs-team { padding-left: 12px; padding-right: 12px; }
#form_reg_score .block-title { margin-left: 12px; margin-right: 12px; padding-left: 0; padding-right: 0; }
#form_reg_score .rmx-notes { margin-left: 12px; margin-right: 12px; }
/*---o contorno dos campos de notas/vídeo é desenhado nas bordas do .item-content, e o F7 afasta-o
     16px de cada lado: sem isto a caixa ficava 16px mais estreita do que tudo o resto---*/
#form_reg_score .rmx-notes .item-content,
#form_reg_score .rs-partner-inputlist .item-content { margin-left: 0; margin-right: 0; }
#form_reg_score .rmx-btns { padding-left: 12px; padding-right: 12px; }
/*---os desempates vivem FORA do .rs-series e ficavam sem margem lateral nenhuma. Com várias
     séries, as caixas do resultado estão recuadas pela numeração "#1" (28px + 10px de intervalo)
     e os desempates acompanham, para ficarem umas debaixo das outras.---*/
#form_reg_score .rs-tb { padding-left: 12px; padding-right: 12px; }
#form_reg_score .rs-series-multi ~ .rs-tb { padding-left: 50px; }

/*=== CALCULADORA DO RESULTADO (reps/calorias) — port da app antiga, 2026-09-08 =============
   O botão fica ao lado do campo, do tamanho dele; o teclado abre POR CIMA do formulário (a classe
   rs-calc-open esconde tudo o resto) e o "usar resultado" escreve no campo que o abriu. Mesmo
   desenho do teclado do formulário dos treinos, para não haver duas calculadoras diferentes.---*/
.rs-calc-btn { flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 13px; background: rgba(128,128,128,.12); color: var(--f7-theme-color); }
.rs-calc-btn i, .rs-calc-btn svg { width: 20px; height: 20px; }
.rs-calc-btn:active { background: color-mix(in srgb, var(--f7-theme-color) 16%, transparent); }
#form_reg_score.rs-calc-open > *:not(.rs-calcpad) { display: none !important; }
#form_reg_score .rs-calcpad { padding: 4px 12px 20px; }
#form_reg_score .rs-calcpad-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#form_reg_score .rs-calcpad-back { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--f7-text-color); }
#form_reg_score .rs-calcpad-back i, #form_reg_score .rs-calcpad-back svg { width: 22px; height: 22px; }
#form_reg_score .rs-calcpad-disp { flex: 1 1 auto; min-width: 0; min-height: 56px; border: 1px solid rgba(128,128,128,.4); border-radius: 12px;
	font-size: 26px; text-align: right; padding: 12px 14px; overflow-x: auto; white-space: nowrap; box-sizing: border-box; }
#form_reg_score .rs-calcpad-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#form_reg_score .rs-k { height: 54px; border-radius: 12px; border: 1px solid rgba(128,128,128,.3); background: transparent; color: var(--f7-text-color);
	font-size: 22px; display: inline-flex; align-items: center; justify-content: center; }
#form_reg_score .rs-k:active { background: color-mix(in srgb, var(--f7-theme-color) 14%, transparent); }
#form_reg_score .rs-k-op { color: var(--f7-theme-color); }
#form_reg_score .rs-k-fn { opacity: .7; }
#form_reg_score .rs-k-fn i, #form_reg_score .rs-k-fn svg { width: 20px; height: 20px; }
#form_reg_score .rs-k-eq { background: var(--f7-theme-color); border-color: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
#form_reg_score .rs-k-wide { grid-column: span 2; }
#form_reg_score .rs-calc-use { margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#form_reg_score .rs-calc-use i, #form_reg_score .rs-calc-use svg { width: 18px; height: 18px; }
/* team / parceiros */
.rs-team-title { display: flex; align-items: center; gap: 6px; }
.rs-team-title .icon { width: 16px; height: 16px; opacity: .6; }
.rs-team { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.rs-partner-inputlist { margin: 2px 0 0; }
.rs-partner-inputlist .item-media .icon { color: var(--f7-theme-color); }
.rs-partner-results { margin-top: 4px; }
.rs-partner-res { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--f7-text-color); }
.rs-partner-res:active { background: rgba(128,128,128,.12); }
.rs-partner-res-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rs-partner-none { padding: 10px 12px; opacity: .5; font-size: 13px; }
.rs-partner-chosen { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 13px; background: rgba(var(--f7-theme-color-rgb), .10); }
.rs-partner-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rs-partner-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-partner-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--f7-text-color); opacity: .55; flex: 0 0 auto; }
.rs-partner-x .icon, .rs-partner-x svg { width: 18px; height: 18px; }

/* ================= LEADERBOARD (S3) ================= */
.lb-head { margin: 12px 12px 0; padding: 14px 16px; border-radius: 16px; background: rgba(128,128,128,.08); }
.lb-head-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.lb-head-title i { width: 18px; height: 18px; color: var(--f7-theme-color); flex: 0 0 auto; }
.lb-head-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-desc-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--f7-theme-color); text-transform: uppercase; letter-spacing: .5px; }
.lb-desc-toggle i { width: 14px; height: 14px; transition: transform .2s; }
.lb-desc-toggle.open i { transform: rotate(180deg); }
.lb-desc { margin-top: 8px; font-size: 13px; line-height: 1.5; opacity: .85; }
/* filtros */
.lb-filters { display: flex; gap: 8px; margin: 12px 12px 0; }
.lb-seg { display: flex; gap: 6px; flex: 1 1 0; }
.lb-seg-btn { flex: 1 1 0; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; background: rgba(128,128,128,.12); color: var(--f7-text-color); font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.lb-seg-btn.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.lb-ages { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lb-ages::-webkit-scrollbar { display: none; }
.lb-age-chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: rgba(128,128,128,.12); color: var(--f7-text-color); font-size: 13px; white-space: nowrap; -webkit-user-drag: none; }
.lb-age-chip.on { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
/* modo TODOS da classificacao: RX/SCALED apagado + cabecalho de cada categoria (as 4 seguidas) */
.lb-seg.lb-seg-off { opacity: .35; pointer-events: none; }
.lb-todos-btn .icon, .lb-todos-btn svg { width: 15px; height: 15px; }
.lb-cat + .lb-cat { margin-top: 18px; }
.lb-cat-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 4px 24px; color: var(--f7-theme-color); font-size: 17px; text-transform: uppercase; letter-spacing: .6px; }
.lb-cat-head .lb-cat-rx { padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); font-size: 13px; color: var(--f7-text-color); opacity: .8; }
.lb-cat .lb-empty { padding: 14px 0 6px; }
.lb-feed { padding-top: 4px; min-height: 200px; }
/* pódio */
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 20px 10px 6px; }
.lb-pod { flex: 1 1 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; }
.lb-pod-photo { position: relative; border-radius: 50%; padding: 3px; margin-bottom: 2px; }
.lb-pod-photo img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: block; }
.lb-pod-1 .lb-pod-photo img { width: 84px; height: 84px; }
.lb-gold { background: linear-gradient(135deg, #ffe27a, #f5b301); }
.lb-silver { background: linear-gradient(135deg, #ececf2, #b9bcc7); }
.lb-bronze { background: linear-gradient(135deg, #e6b088, #c07a43); }
.lb-pod-medal { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--f7-page-bg-color); }
.lb-pod-medal i { width: 15px; height: 15px; }
.lb-pod-1 .lb-pod-medal { bottom: auto; top: -19px; width: auto; height: auto; background: transparent; }
.lb-pod-1 .lb-pod-medal i { color: #f5b301; width: 22px; height: 22px; }
.lb-pod-2 .lb-pod-medal i { color: #9aa0ac; }
.lb-pod-3 .lb-pod-medal i { color: #c07a43; }
.lb-pod-team { position: absolute; bottom: -2px; right: -6px; display: flex; }

/* --- EQUIPAS NO PÓDIO: fotos e nomes alternam em fade, em ciclo ---------------------------
   Antes as fotos dos parceiros eram miniaturas sobrepostas ao canto (a segunda quase não se
   via) e só aparecia UM nome. Agora cada atleta da equipa tem a sua vez, com a foto ao tamanho
   normal do pódio. As imagens ficam empilhadas no mesmo sítio (absolutas) e só a ativa tem
   opacidade; a primeira mantem-se em `position:static` para dar altura ao circulo. */
.lb-pod-photo.lb-roda { position: relative; }
.lb-pod-photo.lb-roda .lb-pod-im { transition: opacity .55s ease; }
.lb-pod-photo.lb-roda .lb-pod-im:not(.is-on) { opacity: 0; }
.lb-pod-photo.lb-roda .lb-pod-im + .lb-pod-im { position: absolute; top: 3px; left: 3px; }
/* distintivo de equipa: numero de atletas, para se perceber que aquilo esta a alternar */
.lb-pod-eq { position: absolute; bottom: -2px; right: -4px; display: inline-flex; align-items: center;
	gap: 3px; padding: 1px 6px; border-radius: 999px; font-size: 9px; line-height: 1.6;
	background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.lb-pod-eq svg { width: 10px; height: 10px; }
/* nomes: mesma tecnica, com altura reservada para a linha nao saltar a cada troca */
.lb-pod-name.lb-roda { position: relative; min-height: 1.35em; }
.lb-pod-name.lb-roda .lb-pod-nm { display: block; transition: opacity .55s ease;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod-name.lb-roda .lb-pod-nm:not(.is-on) { opacity: 0; }
.lb-pod-name.lb-roda .lb-pod-nm + .lb-pod-nm { position: absolute; top: 0; left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) {
	.lb-pod-photo.lb-roda .lb-pod-im, .lb-pod-name.lb-roda .lb-pod-nm { transition: none; }
}
.lb-pod-name { font-size: 12px; font-weight: 600; text-align: center; margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod-2 .lb-pod-name, .lb-pod-3 .lb-pod-name { margin-top: 16px; }
.lb-pod-score { font-size: 15px; font-weight: 700; color: var(--f7-theme-color); margin-top: 2px; }
.lb-pod-extra { font-size: 10px; opacity: .6; margin-top: 1px; }
.lb-pedestal { margin-top: 8px; width: 100%; border-radius: 12px 12px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-size: 22px; font-weight: 800; color: #fff; }
.lb-pod-1 .lb-pedestal { height: 66px; background: linear-gradient(180deg, #f5b301, rgba(245,179,1,.30)); }
.lb-pod-2 .lb-pedestal { height: 48px; background: linear-gradient(180deg, #b9bcc7, rgba(185,188,199,.30)); }
.lb-pod-3 .lb-pedestal { height: 36px; background: linear-gradient(180deg, #c07a43, rgba(192,122,67,.30)); }
.lb-pod.is-me .lb-pod-photo { outline: 2px solid var(--f7-theme-color); outline-offset: 3px; }
/* lista (4º+) */
.lb-list { margin: 10px 12px 0; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid rgba(128,128,128,.12); }
.lb-row:last-child { border-bottom: none; }
.lb-row.is-me { background: rgba(var(--f7-theme-color-rgb),.09); border-radius: 12px; border-bottom-color: transparent; }
.lb-rank { flex: 0 0 26px; text-align: center; font-size: 15px; font-weight: 700; opacity: .55; }
.lb-avatar { position: relative; flex: 0 0 auto; }
.lb-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.lb-row-team { position: absolute; bottom: -2px; right: -6px; display: flex; }

/* --- LISTA: linha de EQUIPA (par/trio) -----------------------------------------------------
   Os atletas do par aparecem um por linha, unidos por um traço vertical com o icone de ligacao.
   A posicao e o resultado aparecem UMA vez: sao da equipa, nao de cada atleta. */
.lb-row-par { align-items: center; }
.lb-par { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 8px; }
.lb-par-liga { flex: 0 0 auto; position: relative; width: 16px;
	display: flex; align-items: center; justify-content: center; }
/* o traco: uma linha vertical que atravessa o bloco todo */
.lb-par-liga:before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%;
	width: 2px; transform: translateX(-50%); border-radius: 2px;
	background: color-mix(in srgb, var(--f7-theme-color) 55%, transparent); }
.lb-par-liga svg { position: relative; width: 13px; height: 13px; color: var(--f7-theme-color);
	background: var(--f7-page-bg-color); padding: 1px 0; }
.lb-par-membros { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-par-m { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lb-par-m img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
	display: block; flex: 0 0 auto; }
/* PLANOS DE TREINO: distintivo com o nº de fotos do exercicio (o toque abre o visualizador).
   Global e nao dentro do <style> de cada pagina porque as duas paginas do plano o usam. */
.pd-cyc-n { position: absolute; right: 6px; bottom: 6px; z-index: 4; pointer-events: none;
	display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px;
	background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1.5; }
.pd-cyc-n svg { width: 12px; height: 12px; }

/* equipas grandes (team WOD de 4 a 6): aperta-se a linha para o cartao nao ficar uma torre */
.lb-par-membros.lb-par-muitos { gap: 3px; }
.lb-par-muitos .lb-par-m img { width: 24px; height: 24px; }
.lb-par-muitos .lb-par-m span { font-size: 13px; }
.lb-par-m span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* meta (tu / video / reacoes) da equipa, por baixo do bloco */
.lb-info-par { flex: 0 0 auto; }
.lb-info-par .lb-meta { justify-content: flex-end; }
.lb-info { flex: 1 1 auto; min-width: 0; }
.lb-name { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.lb-box { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lb-vid { width: 14px; height: 14px; opacity: .5; }
.lb-score { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.lb-score-main { font-size: 16px; font-weight: 700; color: var(--f7-theme-color); }
.lb-score-extra { font-size: 11px; opacity: .55; }
.lb-tb { margin-left: 5px; }
.lb-partner { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--f7-page-bg-color); margin-left: -6px; }
.lb-pr { width: 14px; height: 14px; color: #f5b301; vertical-align: middle; }
.lb-star { color: var(--f7-theme-color); font-weight: 700; margin-left: 2px; }
.lb-you { font-size: 9px; text-transform: uppercase; letter-spacing: .3px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); padding: 1px 5px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
/* estados */
.lb-empty { text-align: center; padding: 56px 30px; opacity: .75; }
.lb-empty i { width: 44px; height: 44px; opacity: .35; }
.lb-empty-t { margin-top: 12px; font-size: 16px; }
.lb-empty-s { margin: 8px auto 0; font-size: 13px; opacity: .7; max-width: 300px; }
.lb-note { margin: 14px 16px 4px; font-size: 11px; opacity: .55; }

/* ================= VER REGISTO (S4) ================= */
.vr-nav-acts { display: inline-flex; }
.vr-nav-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--f7-theme-color); }
.vr-nav-btn svg, .vr-nav-btn i[data-lucide] { width: 20px; height: 20px; }
.vr-nav-btn.vr-del { color: #e53935; }
.vr-date { display: flex; align-items: center; gap: 6px; margin: 10px 16px 0; font-size: 13px; opacity: .6; }
.vr-date svg, .vr-date i[data-lucide] { width: 15px; height: 15px; }
.vr-hero { position: relative; margin: 12px 12px 0; border-radius: 20px; padding: 20px; text-align: center; background: linear-gradient(135deg, var(--f7-theme-color), var(--f7-theme-color-shade)); color: var(--wp-on-theme, #fff); overflow: hidden; }
.vr-hero::before { content: ''; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.10); }
.vr-hero-top { display: flex; justify-content: space-between; align-items: center; position: relative; }
.vr-rx { font-size: 11px; font-weight: 600; letter-spacing: .8px; background: rgba(255,255,255,.22); padding: 3px 11px; border-radius: 999px; }
.vr-pr { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .5px; background: rgba(0,0,0,.22); padding: 3px 11px; border-radius: 999px; }
.vr-pr svg, .vr-pr i[data-lucide] { width: 13px; height: 13px; color: #ffe27a; }
.vr-foto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin-top: 14px; border: 3px solid rgba(255,255,255,.45); position: relative; }
.vr-team { display: flex; justify-content: center; gap: 0; margin-top: 14px; position: relative; }
.vr-team img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.45); margin-left: -10px; }
.vr-team img:first-child { margin-left: 0; }
.vr-team-nomes { margin-top: 8px; font-size: 12px; opacity: .85; position: relative; }
.vr-score-lbl { margin-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .85; position: relative; }
.vr-score { font-size: 52px; font-weight: 700; line-height: 1.05; position: relative; }
.vr-tb { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-top: 6px; position: relative; }
.vr-tb-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; opacity: .75; }
.vr-tb-val { font-size: 22px; font-weight: 600; }
.vr-partials { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; }
.vr-partial { flex: 1 1 calc(33.33% - 8px); min-width: 90px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(128,128,128,.10); }
.vr-partial-n { font-size: 10px; opacity: .5; }
.vr-partial-v { font-size: 18px; font-weight: 600; }
.vr-vid { margin-left: 12px; margin-right: 12px; }
.vr-vid-link { padding: 0 16px; }
.vr-vid-link a { display: inline-flex; align-items: center; gap: 8px; color: var(--f7-theme-color); }
.vr-vid-link svg { width: 18px; height: 18px; }
.vr-obs { margin: 0 12px; padding: 14px 16px; border-radius: 16px; background: rgba(128,128,128,.08); font-size: 14px; line-height: 1.5; }

/* ================= HISTORY (S4) ================= */
.hist-filters { padding: 8px 12px 0; }
.hist-dates { display: flex; align-items: flex-end; gap: 8px; }
.hist-date { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; }
.hist-date span { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; padding-left: 6px; }
.hist-date input[type="date"] { width: 100%; height: 42px; padding: 0 12px; border: none; border-radius: 12px; background: rgba(128,128,128,.12); color: var(--f7-text-color); font-size: 14px; outline: none; -webkit-appearance: none; appearance: none; }
.hist-sort-btn { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(128,128,128,.12); color: var(--f7-theme-color); }
.hist-sort-btn svg { width: 18px; height: 18px; }
.hist-search { margin-top: 8px; }
.hist-feed { padding-top: 4px; min-height: 200px; }
.hist-list { margin: 4px 12px 0; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid rgba(128,128,128,.12); color: var(--f7-text-color); }
.hist-row:last-child { border-bottom: none; }
.hist-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(128,128,128,.10); }
.hist-ic svg { width: 19px; height: 19px; opacity: .65; }
.hist-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hist-head { font-size: 11px; opacity: .55; }
.hist-rx { text-transform: uppercase; letter-spacing: .4px; color: var(--f7-theme-color); opacity: 1; margin-left: 4px; }
.hist-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-badges { display: flex; gap: 8px; margin-top: 2px; }
.hist-pr, .hist-bumps { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; opacity: .8; }
.hist-pr svg { width: 12px; height: 12px; color: #f5b301; }
.hist-bumps svg { width: 12px; height: 12px; }
.hist-score { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.hist-score-main { font-size: 16px; font-weight: 700; color: var(--f7-theme-color); }
.hist-score-extra { font-size: 11px; opacity: .55; }
.hist-unit { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.hist-chev { flex: 0 0 auto; width: 16px; height: 16px; opacity: .35; }

/* ================= SOCIAL (B1): reações + comentários ================= */
.vr-social { margin-top: 16px; }
.vs-react-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 12px; padding: 10px 12px; border-radius: 16px; background: rgba(128,128,128,.08); }
.vs-summary { display: inline-flex; align-items: center; gap: 4px; color: var(--f7-text-color); min-width: 0; }
.vs-summary-empty { font-size: 13px; opacity: .5; }
.vs-sum-emoji { width: 22px; height: 22px; margin-left: -4px; }
.vs-sum-emoji:first-child { margin-left: 0; }
.vs-sum-n { font-size: 13px; font-weight: 600; margin-left: 4px; }
.vs-react-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(var(--f7-theme-color-rgb), .12); color: var(--f7-theme-color); font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.vs-react-btn svg { width: 17px; height: 17px; }
.vs-react-btn .vs-mine { width: 24px; height: 24px; }
.vs-picker { margin: 8px 12px 0; padding: 12px; border-radius: 16px; background: rgba(128,128,128,.08); }
.vs-picker-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-em { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.vs-em img { width: 30px; height: 30px; }
.vs-em.on { background: rgba(var(--f7-theme-color-rgb), .18); }
.vs-em:active { background: rgba(128,128,128,.18); }
.vs-em-rm { color: var(--f7-text-color); opacity: .6; }
.vs-em-rm svg { width: 20px; height: 20px; }
.vs-locked { margin-top: 12px; border-top: 1px solid rgba(128,128,128,.15); padding-top: 12px; }
.vs-locked-grid { display: flex; flex-wrap: wrap; gap: 6px; opacity: .3; }
.vs-locked-grid img { width: 26px; height: 26px; }
.vs-locked-txt { margin-top: 10px; font-size: 12px; line-height: 1.5; opacity: .75; }
.vs-locked-tit { display: block; font-size: 14px; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .4px; }
.vs-locked-form { display: flex; gap: 8px; margin-top: 10px; }
.vs-locked-form input { flex: 1 1 auto; height: 42px; padding: 0 14px; border: none; border-radius: 12px; background: rgba(128,128,128,.12); color: var(--f7-text-color); font-size: 15px; text-transform: uppercase; outline: none; }
.vs-locked-btn { flex: 0 0 auto; width: auto; height: 42px; padding: 0 18px; }
.vs-legacy { margin: 10px 12px 0; padding: 12px 14px; border-radius: 14px; background: rgba(128,128,128,.08); font-size: 13px; }
.vs-legacy-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-right: 8px; }
.vs-legacy-t svg { width: 15px; height: 15px; color: var(--f7-theme-color); }
.vs-legacy-n { opacity: .75; }
/* quem reagiu (sheet) */
.vs-who-sheet .sheet-modal-inner { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 70vh; overflow-y: auto; }
.vs-who-tit { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
.vs-who-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(128,128,128,.12); }
.vs-who-row:last-child { border-bottom: none; }
.vs-who-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.vs-who-nome { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-who-emoji { width: 28px; height: 28px; }
.vs-who-close { display: block; text-align: center; margin-top: 14px; color: var(--f7-theme-color); font-weight: 600; }
/* comentários */
.vs-coms { margin-top: 6px; padding-bottom: 10px; }
.vs-coms-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); font-size: 11px; margin-left: 6px; }
.vs-com-form { display: flex; align-items: flex-end; gap: 8px; margin: 4px 12px 12px; }
.vs-com-form textarea { flex: 1 1 auto; min-height: 42px; max-height: 140px; padding: 10px 14px; border: 1px solid rgba(128,128,128,.25); border-radius: 16px; background: transparent; color: var(--f7-text-color); font-size: 14px; outline: none; resize: none; }
.vs-com-send { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.vs-com-send svg { width: 18px; height: 18px; }
.vs-com { display: flex; gap: 10px; margin: 0 12px 12px; }
.vs-com-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.vs-com-body { flex: 1 1 auto; min-width: 0; background: rgba(128,128,128,.08); border-radius: 4px 16px 16px 16px; padding: 10px 14px; }
.vs-com-head { display: flex; align-items: center; gap: 8px; }
.vs-com-nome { font-size: 13px; font-weight: 600; }
.vs-com-data { font-size: 10.5px; opacity: .5; flex: 1 1 auto; }
.vs-com-del { flex: 0 0 auto; color: var(--f7-text-color); opacity: .45; }
.vs-com-del svg { width: 14px; height: 14px; }
.vs-com-texto { margin-top: 4px; font-size: 14px; line-height: 1.45; word-break: break-word; }
/* contadores no leaderboard */
.lb-soc { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; opacity: .75; }
.lb-soc.is-mine { color: var(--f7-theme-color); opacity: 1; }
.lb-soc-emoji { width: 15px; height: 15px; margin-left: -3px; }
.lb-soc-emoji:first-child { margin-left: 0; }
.lb-soc-ic { width: 13px; height: 13px; }
.lb-pod-social { display: flex; justify-content: center; gap: 8px; margin-top: 3px; }

/* ================= B3: dashboard social + alertas + power bumps ================= */
/* lista de alertas / comentários enviados-recebidos */
.al-list { margin: 8px 12px 0; }
.al-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid rgba(128,128,128,.12); color: var(--f7-text-color); }
.al-row:last-child { border-bottom: none; }
.al-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.al-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-nome { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-data { font-size: 10px; opacity: .5; font-weight: 400; margin-left: 6px; }
.al-texto { font-size: 13px; opacity: .7; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.al-emoji { width: 30px; height: 30px; flex: 0 0 auto; }
.al-emoji-ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--f7-theme-color); }
.al-chev { width: 16px; height: 16px; opacity: .35; flex: 0 0 auto; }
/* dashboard: 4 contadores */
.fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 12px 0; }
.fc-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 13px; border-radius: 18px; background: rgba(128,128,128,.08); color: var(--f7-text-color); }
.fc-tile svg { width: 22px; height: 22px; color: var(--f7-theme-color); }
.fc-flip { transform: scaleX(-1); }
.fc-n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.fc-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; text-align: center; }
.fc-link { position: relative; }
.fc-link::after { content: ''; position: absolute; inset: 0; border-radius: 18px; outline: 1px solid rgba(var(--f7-theme-color-rgb), .35); outline-offset: -1px; }
/* lista de fãs */
.fc-fans { margin: 4px 12px 0; }
.fc-fan { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid rgba(128,128,128,.12); }
.fc-fan:last-child { border-bottom: none; }
.fc-fan-pos { flex: 0 0 22px; text-align: center; font-size: 14px; font-weight: 700; opacity: .5; }
.fc-fan-photo { flex: 0 0 auto; border-radius: 50%; padding: 2px; }
.fc-fan-photo img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.fc-fan-nome { flex: 1 1 auto; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-fan-n { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; color: var(--f7-theme-color); }
.fc-fan-n svg { width: 15px; height: 15px; }
/* power bumps: modo de seleção + barra + gauge */
#lb_power.on { color: var(--wp-on-theme, #fff); background: var(--f7-theme-color); border-radius: 50%; }
.lb-power-off { opacity: .45; }
.lb-selmode .lb-row, .lb-selmode .lb-pod { transition: opacity .15s; }
.lb-selmode [data-mine="1"] { opacity: .35; pointer-events: none; }
.lb-picked { outline: 2px solid var(--f7-theme-color); outline-offset: -2px; border-radius: 14px; background: rgba(var(--f7-theme-color-rgb), .10) !important; }
.lb-pwbar { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 600; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: var(--f7-page-bg-color); border: 1px solid rgba(var(--f7-theme-color-rgb), .45); }
.lb-pwbar-txt { flex: 1 1 auto; font-size: 13px; }
.lb-pwbar-cancel { flex: 0 0 auto; font-size: 13px; color: var(--f7-text-color); opacity: .6; }
.lb-pwbar-go { flex: 0 0 auto; width: auto; padding: 0 16px; height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.lb-pwbar-go svg { width: 16px; height: 16px; }
/* gauge (sem poderes) */
.lb-pw-sheet.sheet-modal { height: auto; border-radius: 20px 20px 0 0; }
.lb-pw-sheet .sheet-modal-inner { padding: 10px 24px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.lb-pw-grab { width: 36px; height: 4px; border-radius: 2px; background: rgba(128,128,128,.35); margin: 0 auto 16px; }
.lb-pw-tit { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; font-weight: 600; letter-spacing: 1.2px; margin-bottom: 18px; }
.lb-pw-tit i { width: 17px; height: 17px; color: var(--f7-theme-color); }
.lb-pw-ring { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.lb-pw-ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.lb-pw-bg { fill: none; stroke: rgba(128,128,128,.18); stroke-width: 10; }
.lb-pw-fg { fill: none; stroke: var(--f7-theme-color); stroke-width: 10; stroke-linecap: round; }
.lb-pw-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 600; }
.lb-pw-num small { font-size: 15px; opacity: .5; font-weight: 500; margin-left: 2px; }
.lb-pw-sub { margin-top: 8px; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; opacity: .5; }
.lb-pw-txt { margin: 16px auto 8px; padding: 14px 16px; font-size: 14px; line-height: 1.6; opacity: .85; max-width: 340px; background: rgba(128,128,128,.10); border-radius: 14px; text-align: left; }

/* ================= ÁREA E: hub Ranking — recordes da box + perfil ================= */
.rk-feed { padding-top: 4px; min-height: 200px; }
.rk-search { margin: 8px 12px 0; }
/* segmentado Records|Members elevado à faixa da navbar (ao lado da seta; z-index alto → clicável) */
.page-current > .rk-navctrls { position: fixed; top: env(safe-area-inset-top, 0px); left: 56px; right: 12px; height: var(--f7-navbar-height); z-index: 5500; margin: 0; padding: 0; display: flex; align-items: center; }
.rk-wrap > .lb-filters:first-of-type { margin-top: 8px; }
.rp-wrap #rp_standings > .lb-filters:first-of-type { margin-top: 8px; }
.rk-section { margin: 6px 12px 4px; }
.rk-sec-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .5; padding: 12px 4px 6px; }
.rk-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid rgba(128,128,128,.12); color: var(--f7-text-color); }
.rk-row:last-child { border-bottom: none; }
.rk-photo { position: relative; flex: 0 0 auto; border-radius: 50%; padding: 2px; }
.rk-photo img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.rk-crown { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--f7-page-bg-color); display: flex; align-items: center; justify-content: center; }
.rk-crown svg { width: 12px; height: 12px; color: #f5b301; }
.rk-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rk-nome { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-holder { font-size: 12px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-score { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.rk-score-main { font-size: 16px; font-weight: 700; color: var(--f7-theme-color); }
.rk-score-extra { font-size: 11px; opacity: .55; }
.rk-unit { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.rk-cnt { font-size: 11px; opacity: .7; }
.rk-cnt b { font-weight: 600; color: var(--f7-theme-color); margin-left: 2px; }
.rk-chev { flex: 0 0 auto; width: 16px; height: 16px; opacity: .35; }
.rk-sub { margin: 12px 16px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; opacity: .6; }
/* perfil do atleta */
.pf-hero { display: flex; align-items: center; gap: 16px; margin: 14px 12px 4px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, var(--f7-theme-color), var(--f7-theme-color-shade)); color: var(--wp-on-theme, #fff); }
.pf-foto { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.4); }
.pf-stats { flex: 1 1 auto; min-width: 0; }
.pf-stats-tit { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; opacity: .85; }
.pf-stats-tit svg { width: 14px; height: 14px; }
.pf-stats-row { display: flex; gap: 18px; margin-top: 8px; }
.pf-stat { display: flex; flex-direction: column; align-items: center; }
.pf-n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.pf-l { font-size: 9px; letter-spacing: .5px; opacity: .8; }
.pf-rnk { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; padding: 5px 0; border-radius: 12px; background: rgba(var(--f7-theme-color-rgb), .10); }
.pf-rnk-n { font-size: 15px; font-weight: 700; color: var(--f7-theme-color); line-height: 1.1; }
.pf-rnk-l { font-size: 8px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.pf-rx-tag { font-size: 10px; font-weight: 600; letter-spacing: .5px; background: rgba(var(--f7-theme-color-rgb), .14); color: var(--f7-theme-color); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
/* prs_view: grelha 1RM-10RM read-only + cards de PR */
.pv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 14px; }
.pv-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: rgba(128,128,128,.08); opacity: .55; }
.pv-cell.has { opacity: 1; background: rgba(var(--f7-theme-color-rgb), .10); }
.pv-rm { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; }
.pv-v { font-size: 16px; font-weight: 600; }
.pv-prcard { margin: 10px 14px 0; }
.pv-pr-row { display: flex; justify-content: space-around; gap: 10px; text-align: center; padding: 6px 0 10px; }
.pv-pr-cell { display: flex; flex-direction: column; gap: 3px; }
.pv-pr-v { font-size: 26px; font-weight: 700; }

/* ================= ÁREA C: Ranking da box (pontos) ================= */
.rp-mode { margin-top: 12px; }
.rp-mode .lb-seg-btn svg { width: 15px; height: 15px; margin-right: 5px; }
.rp-ages { padding-top: 8px; }
.rp-days { padding: 10px 12px 2px; }
/* barra de pontos (largura relativa ao líder; anima no load) */
.rp-bar { margin-top: 5px; height: 5px; border-radius: 3px; background: rgba(128,128,128,.14); overflow: hidden; }
.rp-bar-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--f7-theme-color), var(--f7-theme-color-shade)); transition: width .9s cubic-bezier(.22,.61,.36,1); }
/* entrada em cascata das linhas (rkin-* para não colidir com .rp-row do RegyPulse) */
.rkin-row { opacity: 0; }
.rkin-row.rkin-in { animation: rpin .38s cubic-bezier(.22,.61,.36,1) both; }
@keyframes rpin { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.rp-pts-lbl { font-size: 11px; opacity: .7; font-weight: 500; }
.rp-pts { font-size: 16px; font-weight: 700; color: var(--f7-theme-color); }
/* resultados por dia */
.rp-wod { margin-bottom: 14px; }
.rp-wod-head { margin-top: 12px; }
.rp-sexo-tit { margin: 12px 16px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .5; }
.rp-meta { gap: 8px; font-size: 11px; opacity: .7; }
.rp-rx { font-size: 9.5px; font-weight: 600; letter-spacing: .4px; color: var(--f7-theme-color); }
.rp-noscores { text-align: center; padding: 14px; font-size: 13px; opacity: .5; }
/* animação de reação: emoji voador + faíscas + pulse da barra */
.vs-fly { position: fixed; z-index: 99999; pointer-events: none; will-change: transform; filter: drop-shadow(0 0 1px rgba(0,0,0,.15)); }
.vs-spark { position: fixed; z-index: 99998; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); }
.vs-bar-pop { animation: vsbarpop .32s ease; }
@keyframes vsbarpop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* HOME bookings: o título trunca (elipse) e a lotação fica SEMPRE dentro do cartão.
   Causa: o wrapper do título não encolhia (sem min-width:0) e empurrava o item-after para fora. */
#home-bookings-list li .item-inner { min-width: 0; }
#home-bookings-list li .item-inner > div:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; }
#home-bookings-list li .item-after { flex: 0 0 auto; padding-left: 8px; }
/* título em 2 partes com elipses próprias: o LOCAL encolhe primeiro, o nome da aula preserva-se */
.hb-tit { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hb-tit-nome { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-tit-loc { flex: 0 4 auto; min-width: 34px; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; opacity: .7; font-size: .85em; }
.hb-tit-loc .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.hb-tit-loc em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* HOME bookings: colapso "2 visíveis + e mais N — ver todas" */
#home-bookings-list .hb-hidden { display: none; }
.hb-more { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 11px 10px; border-top: 1px solid rgba(128,128,128,.18); color: var(--f7-theme-color); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.hb-more .icon { width: 14px; height: 14px; }
/* rodape do cartao de marcacoes: 1 a 3 botoes AULAS / SERVICOS / sala (app antiga), cada um abre
   o ecra das aulas ja no separador certo (classes_abrir em js/app.js) */
.hb-foot { display: flex; align-items: stretch; justify-content: space-around; border-top: 1px solid rgba(128,128,128,.18); }
/*---`position:relative` + `overflow:hidden` são o que prende a onda de toque DENTRO do botão. O
     Framework7 acrescenta a onda como um elemento absoluto: sem posicionamento próprio ela ancorava
     no cartão inteiro e sem corte espalhava-se para fora, tapando a marcação que está por cima.---*/
.hb-foot-btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 13px 6px; color: var(--f7-theme-color); font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; text-align: center; line-height: 1.2;
	position: relative; overflow: hidden; }
.hb-foot-btn + .hb-foot-btn { border-left: 1px solid rgba(128,128,128,.18); }
/* WODs do dia na HOME (reutiliza .wod-date da tab WODs) */
.hw-strip { padding: 6px 10px 2px; justify-content: center; }
.hw-strip .wod-date { width: auto; min-width: 44px; padding-left: 4px; padding-right: 4px; }
.hw-feed { min-height: 40px; }
.hw-feed .wod-card { margin-left: 5px; margin-right: 5px; }
.hw-feed .wod-group-head { margin-left: 5px; margin-right: 5px; }
.hw-feed .wod-note { margin-left: 5px; margin-right: 5px; }
/* feedback ao WOD do dia (B2) */
.wod-act-fb { flex: 0 0 48px; position: relative; }
.wod-act-fb .wod-board-count { position: absolute; top: 5px; right: 5px; }
.wod-fb { margin-top: 4px; }
.wod-fb .vs-com-form { margin-left: 0; margin-right: 0; }
.wod-fb .vs-com { margin-left: 0; margin-right: 0; }

/* ===================== TIMER (Calculators tab) ===================== */
.tmr-cfg { padding: 10px 12px 20px; }
.tmr-types { margin-bottom: 14px; }
.tmr-fields { display: flex; flex-direction: column; gap: 2px; }
.tmr-field { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px; border-bottom: 1px solid rgba(128,128,128,.18); cursor: pointer; }
.tmr-field[data-f="dir"] { cursor: default; }
.tmr-field-lbl { display: flex; align-items: center; gap: 10px; color: var(--f7-text-color); font-size: 15px; }
.tmr-field-lbl .icon { width: 20px; height: 20px; opacity: .6; }
.tmr-time { width: 92px; text-align: right; background: transparent; border: 0; color: var(--f7-theme-color); font-size: 22px; font-weight: 500; padding: 0; }
.tmr-dir { display: inline-flex; }
.tmr-start-row { margin-top: 22px; }
.tmr-start .icon { width: 20px; height: 20px; }

/* overlay a correr — ecrã cheio escuro */
.tmr-run { position: fixed; inset: 0; z-index: 13000; display: none; flex-direction: column; align-items: center; justify-content: center; background: #0b0e14; color: #fff; text-align: center; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
@keyframes tmrRunIn { 0% { opacity: 0; transform: translateY(48px); } 100% { opacity: 1; transform: translateY(0); } }
.tmr-run.open { display: flex; animation: tmrRunIn .28s ease-out; }
@keyframes tmrRunOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(48px); } }
.tmr-run.open.closing { animation: tmrRunOut .24s ease-in forwards; }
.tmr-run-close { position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #8a92a1; }
.tmr-run-close .icon { width: 30px; height: 30px; }
/* ambiente: um brilho radial suave na cor da fase (sem blur/sombras — e um gradiente de fundo) */
.tmr-run::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tmr-run[data-phase="prep"]::before { background: radial-gradient(circle at 50% 34%, rgba(255,179,0,.14), transparent 62%); }
.tmr-run[data-phase="work"]::before { background: radial-gradient(circle at 50% 34%, rgba(71,195,99,.14), transparent 62%); }
.tmr-run[data-phase="rest"]::before { background: radial-gradient(circle at 50% 34%, rgba(53,185,255,.14), transparent 62%); }
.tmr-run[data-phase="done"]::before { background: radial-gradient(circle at 50% 34%, rgba(103,119,239,.17), transparent 64%); }
.tmr-run.tmr-final::before { background: radial-gradient(circle at 50% 34%, rgba(255,59,48,.16), transparent 62%); }
.tmr-phase, .tmr-gauge, .tmr-next, .tmr-rounds-disp, .tmr-controls, .tmr-laps { position: relative; } /* por cima do brilho */
.tmr-phase { text-transform: uppercase; letter-spacing: 5px; font-size: 19px; font-weight: 500; margin-bottom: 18px; min-height: 26px; transition: color .25s; }
.tmr-gauge { width: min(74vw, 330px); aspect-ratio: 1; }
.tmr-svg { width: 100%; height: 100%; display: block; }
/* marcas de minutos a toda a volta (estilo cronografo) */
.tmr-gticks { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 2.6; stroke-dasharray: 1.6 8.66; }
.tmr-gtrack { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 8; }
.tmr-gprev { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s ease; } /* anel da fase anterior: desfaz-se a rodar no sentido horario */
.tmr-garc { fill: none; stroke: #47c363; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .25s; }
/* ponto-cometa na ponta do arco (cronometro: ponteiro de segundos) */
.tmr-ghead .dot { fill: #47c363; transition: fill .25s; }
.tmr-ghead .core { fill: rgba(255,255,255,.9); }
.tmr-run[data-phase="prep"] .tmr-ghead .dot { fill: #ffb300; }
.tmr-run[data-phase="rest"] .tmr-ghead .dot { fill: #35b9ff; }
.tmr-run[data-phase="done"] .tmr-ghead .dot { fill: #6777ef; }
.tmr-run.tmr-final .tmr-ghead .dot { fill: #ff3b30; }
.tmr-time-big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18vw; max-font-size: 92px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
@media (min-width: 500px) { .tmr-time-big { font-size: 90px; } }
/* proxima fase (→ DESCANSO · 0:30) */
.tmr-next { margin-top: 16px; min-height: 20px; font-size: 13px; letter-spacing: 1.5px; color: #8a92a1; text-transform: uppercase; }
.tmr-next .nx-a { opacity: .55; margin-right: 2px; }
.tmr-rounds-disp { margin-top: 18px; font-size: 15px; letter-spacing: 1px; color: #b6bcc9; text-transform: uppercase; min-height: 20px; }
.tmr-controls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 24px; }
.tmr-ctrl { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); color: #fff; }
.tmr-ctrl .icon { width: 26px; height: 26px; }
/* CUSTOM: blocos de posicao (bloco atual + ronda do bloco) a ladear os botoes */
.tmr-stat { width: 62px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tmr-stat-hold { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.tmr-stat-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.tmr-stat-hold.ring .tmr-stat-svg { display: block; }
.tmr-strack { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; }
.tmr-sarc { fill: none; stroke: #47c363; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .3s; }
.tmr-stat-v { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .5px; color: #fff; }
.tmr-stat-hold.ring .tmr-stat-v { font-size: 13px; letter-spacing: 0; }
.tmr-stat-l { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a92a1; }
.tmr-stat-dots { display: flex; gap: 4px; min-height: 6px; }
.tmr-stat-dots .d { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tmr-stat-dots .d.on { background: #47c363; }
.tmr-stat-dots .d.done { background: rgba(71,195,99,.45); }
.tmr-play { width: 84px; height: 84px; background: var(--f7-theme-color); border: 0; outline: 1.5px solid rgba(255,255,255,.20); outline-offset: 6px; }
.tmr-play .icon { width: 36px; height: 36px; }
.tmr-reset { color: #b6bcc9; }
.tmr-laps { margin-top: 18px; max-height: 22vh; overflow-y: auto; width: 100%; max-width: 320px; font-variant-numeric: tabular-nums; }
.tmr-lap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.tmr-lap-row .tmr-lap-n { color: #8a92a1; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.tmr-lap-row .tmr-lap-d { color: #8a92a1; font-size: 12px; margin-left: auto; }
.tmr-lap-row .tmr-lap-t { color: #fff; min-width: 88px; text-align: right; }
.tmr-lap-row .tmr-lap-x { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #8a92a1; flex: 0 0 auto; margin: -4px -6px -4px 2px; }
.tmr-lap-row .tmr-lap-x .icon { width: 15px; height: 15px; }
.tmr-lap-row .tmr-lap-x:active { color: #e15759; }
.tmr-export { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; color: #b6bcc9; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.tmr-export .icon { width: 15px; height: 15px; }

/* ações secundárias do timer (guardar / guardados / ecrã) */
/*---DUAS LINHAS DE DOIS (23-08-2026): os quatro botões numa linha só não cabiam num telemóvel e
     o último saía cortado a meio. Cada botão leva METADE da linha (flex: 1 1 0) e a linha ocupa
     a largura toda — alinham na vertical com o COMEÇAR que está por cima, e a fila deixa de
     parecer um resto centrado a meio do ecrã.
     A segunda linha aproxima-se da primeira: são dois grupos, não duas zonas separadas.---*/
.tmr-extra-row { display: flex; gap: 10px; margin-top: 14px; }
.tmr-extra-row.tmr-extra-2 { margin-top: 8px; }
.tmr-extra-row .tmr-mini { flex: 1 1 0; justify-content: center; min-width: 0; }
.tmr-extra-row .tmr-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmr-mini { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid rgba(128,128,128,.35); border-radius: 20px; color: var(--f7-text-color); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; opacity: .85; }
.tmr-mini .icon { width: 16px; height: 16px; color: var(--f7-theme-color); }

/* sheet de timers guardados */
.tmr-sv-sheet, .tmr-cast-sheet { height: auto; max-height: 85vh; border-radius: 16px 16px 0 0; }
.tmr-sv-sheet .sheet-modal-inner, .tmr-cast-sheet .sheet-modal-inner { overflow-y: auto; max-height: 85vh; }
.tmr-sv-wrap, .tmr-cast-wrap { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.tmr-sv-title { display: flex; align-items: center; gap: 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.tmr-sv-title .icon { width: 18px; height: 18px; color: var(--f7-theme-color); }
.tmr-sv-close { margin-left: auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--f7-text-color); opacity: .6; margin-top: -8px; margin-right: -8px; }
.tmr-sv-close .icon { width: 24px; height: 24px; color: inherit; }
.tmr-sv-empty { text-align: center; padding: 26px 18px; opacity: .55; font-size: 14px; }
.tmr-sv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid rgba(128,128,128,.18); cursor: pointer; }
.tmr-sv-name { font-size: 15px; }
.tmr-sv-sub { font-size: 11.5px; opacity: .55; margin-top: 2px; }
.tmr-sv-type { color: var(--f7-theme-color); opacity: 1; }
.tmr-sv-del { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #e15759; flex: 0 0 auto; }
.tmr-sv-del .icon { width: 18px; height: 18px; }

/* enviar para ecrã (cast) */
.tmr-cast-seg { display: inline-flex; margin-bottom: 12px; }
.tmr-cast-hint { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; margin: 4px 0 6px; }
.cast-monitor { position: relative; width: 100%; aspect-ratio: 16/9; background: #0b0e14; border: 3px solid rgba(128,128,128,.45); border-radius: 8px; overflow: hidden; touch-action: none; }
.cast-box { position: absolute; left: 0; top: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(103,119,239,.28); border: 1px dashed rgba(255,255,255,.5); border-radius: 4px; color: #fff; font-size: 11px; letter-spacing: 2px; cursor: move; user-select: none; }
.tmr-cast-sliders { margin: 12px 0 4px; }
.tmr-cast-slrow { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.tmr-cast-slrow .icon { width: 18px; height: 18px; opacity: .6; flex: 0 0 auto; }
.tmr-cast-slrow input[type="range"] { flex: 1; accent-color: var(--f7-theme-color); }
.tmr-cast-note { font-size: 12.5px; opacity: .7; margin: 10px 0 8px; line-height: 1.45; }
.tmr-cast-keywrap { display: flex; align-items: center; gap: 11px; height: 48px; border: 1px solid rgba(128,128,128,.45); border-radius: 12px; background: rgba(128,128,128,.10); padding: 0 14px; margin-bottom: 16px; }
.tmr-cast-scan { width: 40px; height: 46px; display: flex; align-items: center; justify-content: center; color: var(--f7-theme-color); flex: 0 0 auto; margin-right: -8px; }
.tmr-cast-scan .icon { width: 22px; height: 22px; }
.tmr-cast-keywrap .icon { width: 19px; height: 19px; color: var(--f7-theme-color); flex: 0 0 auto; }
.tmr-cast-key { flex: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--f7-text-color); font-size: 15px; outline: none; }
select.tmr-cast-key { appearance: auto; }
.tmr-cast-btns { display: flex; gap: 10px; margin-top: 10px; }
.tmr-cast-btns .button { height: 48px; line-height: 48px; }
.tmr-cast-btns .button { flex: 1; width: auto; }
.tmr-cast-feed { font-size: 12px; opacity: .65; text-align: center; min-height: 18px; margin-top: 10px; }
/* opção "desligar no fim": checkbox no estilo da casa (nativa escondida + 2 ícones lucide) */
.tmr-cast-auto { margin-top: 14px; }
.tmr-chk { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 2px; }
.tmr-chk .icon { font-size: 23px; flex: 0 0 auto; }
.tmr-chk span { font-size: 14px; line-height: 1.3; }
/* cores por fase */
.tmr-run[data-phase="prep"] .tmr-garc { stroke: #ffb300; }
.tmr-run[data-phase="prep"] .tmr-phase { color: #ffb300; }
.tmr-run[data-phase="work"] .tmr-garc { stroke: #47c363; }
.tmr-run[data-phase="work"] .tmr-phase { color: #47c363; }
.tmr-run[data-phase="rest"] .tmr-garc { stroke: #35b9ff; }
.tmr-run[data-phase="rest"] .tmr-phase { color: #35b9ff; }
.tmr-run[data-phase="done"] .tmr-garc { stroke: #6777ef; }
.tmr-run[data-phase="done"] .tmr-phase { color: #6777ef; }
/* botao de som (beep / voz / mute) no canto superior esquerdo do overlay */
.tmr-sound { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #8a92a1; }
.tmr-sound .icon { width: 26px; height: 26px; }
.tmr-sound.off { opacity: .45; }
/* ultimos 3 segundos: pulso no numero e no arco */
@keyframes tmrPulse { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 100% { transform: scale(1); } }
.tmr-run.tmr-final .tmr-time-big { animation: tmrPulse 1s ease-in-out infinite; }
.tmr-run.tmr-final .tmr-garc { stroke: #ff3b30; }
.tmr-run.tmr-final .tmr-phase { color: #ff3b30; }
/* flash de ronda ("ROUND 3"): aparece grande e desvanece */
.tmr-flash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13vw; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #47c363; opacity: 0; pointer-events: none; z-index: 5; }
@media (min-width: 500px) { .tmr-flash { font-size: 64px; } }
@keyframes tmrFlash { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.05); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.tmr-flash.show { animation: tmrFlash 1.1s ease-out forwards; }
/* CUSTOM: construtor de intervalos (cada linha = trabalho + descanso + rondas proprias) */
.tmr-blocks { padding: 2px 0 4px; }
.tmr-blocks-head { display: flex; align-items: center; gap: 8px; padding: 8px 2px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.tmr-blocks-head .bh-n { width: 20px; flex-shrink: 0; }
.tmr-blocks-head .bh-t { flex: 1; text-align: center; }
.tmr-blocks-head .bh-r { width: 52px; text-align: center; flex-shrink: 0; }
.tmr-blocks-head .bh-x { width: 38px; flex-shrink: 0; }
.tmr-block-row { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid rgba(128,128,128,.18); }
.tmr-block-n { width: 20px; text-align: center; font-size: 13px; opacity: .5; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tmr-block-w, .tmr-block-r { flex: 1; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.tmr-block-w { color: #47c363; }
.tmr-block-r { color: #35b9ff; }
.tmr-block-reps { width: 52px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tmr-block-x { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #8a92a1; flex-shrink: 0; }
.tmr-block-x .icon { width: 18px; height: 18px; }
.tmr-block-addrow { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; }
.tmr-block-add { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 0; color: var(--f7-theme-color); font-size: 14px; text-transform: uppercase; letter-spacing: .3px; }
.tmr-block-add .icon { width: 18px; height: 18px; }
.tmr-blk-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
/* barra de timer INLINE (planos de treino) — estilo pagina TV, compacta, fixa sob a navbar */
@keyframes pdtIn { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(0); } }
/* timer no TOPO ABSOLUTO, por cima da navbar (fechar o timer devolve o acesso à seta de voltar) */
.pdt-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 5600; display: flex; align-items: center; gap: 10px; padding: calc(var(--f7-safe-area-top, 0px) + 8px) 12px 9px; min-height: calc(var(--f7-safe-area-top, 0px) + var(--f7-navbar-height, 56px)); box-sizing: border-box; background: #0b0e14; border-bottom: 1px solid rgba(128,128,128,.35); animation: pdtIn .22s ease-out; }
.pdt-bar.closing { opacity: 0; transform: translateY(-14px); transition: opacity .18s ease-in, transform .18s ease-in; }
.pdt-info { flex: 1; min-width: 0; }
.pdt-lbls { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a92a1; margin-bottom: 2px; }
.pdt-bar[data-phase="prep"] .pdt-lbl-phase { color: #ffb300; }
.pdt-bar[data-phase="work"] .pdt-lbl-phase { color: #47c363; }
.pdt-bar[data-phase="rest"] .pdt-lbl-phase { color: #35b9ff; }
.pdt-bar[data-phase="done"] .pdt-lbl-phase { color: #6777ef; }
.pdt-digits { display: inline-flex; vertical-align: top; align-items: baseline; gap: 16px; font-family: 'digital-7', monospace; line-height: 1; } /* inline-flex: encolhe ao conteudo p/ o fit() medir a largura real */
.pdt-ronda { color: #4aa3ff; font-size: 30px; }
.pdt-time { color: #ff3b30; font-size: 34px; letter-spacing: 1px; }
@keyframes pdtPulse { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } }
.pdt-bar.final .pdt-digits { animation: pdtPulse 1s ease-in-out infinite; transform-origin: left center; }
.pdt-ctrls { display: grid; grid-template-columns: repeat(2, 38px); gap: 6px; flex: 0 0 auto; } /* 2x2: play+reiniciar / pin+fechar */
.pdt-bt { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); color: #fff; }
.pdt-pin.on { background: var(--f7-theme-color); border: 0; }
.pdt-bt svg { width: 17px; height: 17px; }
.pdt-play { background: var(--f7-theme-color); border: 0; }

/* badge do timer anexado ao WOD (acionavel: abre o Timer configurado) */
.wod-timer-btn { color: var(--f7-theme-color); background: rgba(128,128,128,.12); }
.wod-timer-btn .wod-timer-go { width: 9px; height: 9px; margin-left: -3px; }

/* timer inline com 1 ronda: sem contador de rondas — o tempo ocupa toda a largura (fit() escala) */
.pdt-bar.pdt-noronda .pdt-ronda, .pdt-bar.pdt-noronda .pdt-l-ronda { display: none; }

/* MODO TREINADOR — banner "A ver como: ALUNO" no módulo workouts (incs/como_banner.php) */
.wk-como-bar { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 9px 12px; border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent);
	background: color-mix(in srgb, var(--f7-theme-color) 12%, transparent); font-size: 13px; }
.wk-como-bar i, .wk-como-bar svg { width: 16px; height: 16px; color: var(--f7-theme-color); flex: 0 0 auto; }
.wk-como-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-como-txt b { font-weight: 600; color: var(--f7-theme-color); }
.wk-como-sair { flex: 0 0 auto; width: 30px; height: 30px; margin: -4px -6px -4px 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--f7-theme-color) 18%, transparent); }
/* avatar do aluno no banner "ver como": anel do tema + olhinho-badge no canto */
.wk-como-av { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
	background-size: cover; background-position: center; background-color: rgba(128,128,128,.25);
	border: 2px solid var(--f7-theme-color); }
.wk-como-av .wk-como-eye { position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border-radius: 50%;
	background: var(--f7-theme-color); display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--f7-page-bg-color); }
.wk-como-av .wk-como-eye i, .wk-como-av .wk-como-eye svg { width: 9px; height: 9px; color: #fff; }
.wk-como-bar { padding: 8px 12px; gap: 12px; }
/* avatar do "ver como" v2: MAIOR que a barra (transborda em cima/baixo), anel do tema + aro do fundo; sem badge */
.wk-como-av { width: 54px; height: 54px; margin: -12px 0; border: 2px solid var(--f7-theme-color); outline: 3px solid var(--f7-page-bg-color); }
.wk-como-av .wk-como-eye { display: none; }
.wk-como-txt { text-transform: uppercase; letter-spacing: .3px; font-size: 12px; }
/* banner "ver como" SEMPRE visível: sticky abaixo da navbar; fundo sólido (o tinte translúcido deixava ver o conteúdo por baixo) */
.wk-como-bar { position: sticky; top: calc(var(--f7-navbar-height, 56px) + 4px); z-index: 60;
	background: color-mix(in srgb, var(--f7-theme-color) 14%, var(--f7-page-bg-color)); }
/* banner "ver como" mais ACIMA: cola logo sob a navbar; margem mínima e constraint abaixo da posição natural (nunca empurra) */
.wk-como-bar { margin-top: 2px; top: calc(var(--f7-navbar-height, 56px) - 2px); }
/* banner "ver como": fixação em px ABSOLUTOS, encostado à faixa do título (as vars do tema resolviam alto demais) */
.wk-como-bar { top: 44px !important; margin-top: 0 !important; }
/* banner "ver como" v3: FIXED colado à navbar (imune aos paddings da página); spacer empurra o conteúdo */
.wk-como-bar { position: fixed !important; top: calc(var(--f7-safe-area-top, 0px) + 50px) !important; left: 14px; right: 14px; margin: 0 !important; z-index: 480; }
.wk-como-spacer { height: 48px; }
/* banner "ver como": ACIMA da navbar (sobrepõe-se sem esconder atrás dela quando toca na faixa do título) */
.wk-como-bar { z-index: 600; }
/* banner "ver como": afinação final — encosta ao fundo REAL da navbar (a navbar do F7 v8 vive fora da página,
	 por isso z-index nunca a vence; a posição é que tem de bater certo) */
.wk-como-bar { top: calc(var(--f7-safe-area-top, 0px) + 57px) !important; }
/* banner "ver como": nada acima da barra — o avatar transborda só para BAIXO (o overhang superior era o que entrava na navbar) */
.wk-como-bar { top: calc(var(--f7-safe-area-top, 0px) + 60px) !important; }
.wk-como-av { margin: -4px 0 -16px !important; }
/* afinação: barra 5px acima; foto 5px abaixo (soma das margens mantém a altura da barra) */
.wk-como-bar { top: calc(var(--f7-safe-area-top, 0px) + 55px) !important; }
.wk-como-av { margin: 1px 0 -21px !important; }

/* CRM - Contactos: chips-filtro na linha do back — barra ABSOLUTA sobre a navbar
   (padrão plano_detalhes: fora do page-content, largura em px → toques/setas fiáveis) */
.crm-chips-bar {
	position: absolute; top: env(safe-area-inset-top, 0px);
	left: 48px; right: 30px;
	height: var(--f7-navbar-height);
	z-index: 5500; pointer-events: auto;
}
.crm-chips-bar .aval-chips-fade.right { padding-right: 0; }
.crm-chips-tot {
	position: relative; display: flex; align-items: center; gap: 6px;
	width: 100%; height: 100%;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	padding: 0 4px; scrollbar-width: none; cursor: grab; user-select: none;
}
.crm-chips-tot::-webkit-scrollbar { display: none; }
.crm-chips-bar .aval-chips-fade { top: 0; bottom: 0; }
.crm-tot.on {
	border-color: var(--crm-cor);
	background: color-mix(in srgb, var(--crm-cor) 26%, transparent);
}
.crm-tot { white-space: nowrap; flex-shrink: 0; cursor: pointer; }
.crm-info-tipos {
	position: absolute; top: env(safe-area-inset-top, 0px); right: 0;
	width: 30px; height: var(--f7-navbar-height);
	display: inline-flex; align-items: center; justify-content: center;
	z-index: 5500; padding: 0;
	background: var(--f7-page-bg-color); /* bloco sólido colado ao fade: os chips não espreitam por baixo */
}
.crm-info-tipos svg { width: 17px; height: 17px; opacity: .55; color: var(--f7-text-color); }
/* swipe das linhas: sem arrasto nativo dos links (matava o swipeout no desktop) */
.crm-res-card a { -webkit-user-drag: none; user-select: none; }
/* badge de agendamento nos resultados (à direita) */
.crm-agd {
	display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
	padding: 4px 9px; border-radius: 999px; font-size: 10.5px;
	border: 1px solid rgba(128,128,128,.35); color: var(--f7-text-color); opacity: .8;
}
.crm-agd svg { width: 12px; height: 12px; }
.crm-agd.today { border-color: color-mix(in srgb, var(--f7-theme-color) 55%, transparent); background: color-mix(in srgb, var(--f7-theme-color) 14%, transparent); color: var(--f7-theme-color); opacity: 1; }
.crm-agd.late { border-color: color-mix(in srgb, #FC544B 55%, transparent); background: color-mix(in srgb, #FC544B 14%, transparent); color: #FC544B; opacity: 1; }
/* botões copiar e-mails/telemóveis */
.crm-copy { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(128,128,128,.3); margin-left: 8px; color: var(--f7-text-color); }
.crm-copy svg { width: 15px; height: 15px; opacity: .7; }
.crm-copy:active { background: rgba(128,128,128,.15); }
/* ações por swipe (ligar / WhatsApp / e-mail) — especificidade acima do default do F7 */
.crm-res-card .swipeout-actions-right a { display: flex; align-items: center; justify-content: center; width: 62px; color: #fff; }
.crm-res-card .swipeout-actions-right svg { width: 22px; height: 22px; }
.crm-res-card .swipeout-actions-right a.crm-sw-call { background: #54CA68; }
.crm-res-card .swipeout-actions-right a.crm-sw-wa { background: #25D366; }
.crm-res-card .swipeout-actions-right a.crm-sw-mail { background: #6777EF; }
.crm-chip-tipo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	color: #fff; font-size: 14px;
}

/* CRM - Contactos: cartão de resultados (hairlines, cascata discreta, sem sombras) */
.crm-res-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 26px; height: 20px; padding: 0 8px; margin-left: 6px;
	border-radius: 999px; font-size: 12px;
	background: rgba(var(--f7-theme-color-rgb), .15); color: var(--f7-theme-color);
}
.crm-res-card {
	margin: 6px 16px 0;
	border: 1px solid rgba(128,128,128,.28);
	border-radius: 22px;
	overflow: hidden;
}
.crm-res-card ul { padding: 0; margin: 0; list-style: none; }
.crm-res-card li + li { border-top: 1px solid rgba(128,128,128,.18); }
.crm-res-row {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 14px;
	color: var(--f7-text-color);
	animation: crm-res-in .3s ease both;
}
.crm-res-row:active { background: rgba(128,128,128,.12); }
@keyframes crm-res-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.crm-res-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-res-nome { font-size: 15px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-res-sub { font-size: 11px; opacity: .55; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-res-chev { width: 16px; height: 16px; opacity: .3; flex-shrink: 0; }
.crm-chip-tipo { flex-shrink: 0; font-weight: 500; }
.crm-res-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; opacity: .55; font-size: 14px; text-align: center; }
.crm-res-vazio svg { width: 30px; height: 30px; }

/* CRM - Contactos: chips de totais modernos (tinta + ponto de cor, sem bold, sem fundo sólido) */
.crm-tot {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 13px; border-radius: 999px;
	font-size: 12px; letter-spacing: .3px; color: var(--f7-text-color);
	border: 1px solid color-mix(in srgb, var(--crm-cor) 45%, transparent);
	background: color-mix(in srgb, var(--crm-cor) 12%, transparent);
}
.crm-tot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crm-cor); flex-shrink: 0; }
.crm-tot-n { font-size: 13px; font-weight: 500; color: var(--crm-cor); }
/* chip TODOS: pesquisa sem filtro de tipo (cor do tema, sem ponto) */
.crm-tot-all { --crm-cor: var(--f7-theme-color); text-transform: uppercase; }

/* CRM - Contactos: dica de swipe nos resultados (discreta, alinhada à direita) */
.crm-swipe-dica {
	display: flex; align-items: center; justify-content: flex-end; gap: 5px;
	margin: 2px 20px 0; font-size: 11px; opacity: .5;
}
.crm-swipe-dica svg { width: 15px; height: 15px; }

/* (3ª ação do swipe: regra movida para junto das outras, com especificidade correta) */

/* CRM - Contactos: segmentado dos modos de pesquisa + toggle dos campos extra */
.crm-seg { display: flex; gap: 8px; margin: 12px 16px 0; }
.crm-seg-btn {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 10px; border-radius: 999px;
	font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px;
	border: 1px solid rgba(128,128,128,.35); color: var(--f7-text-color); opacity: .65;
}
.crm-seg-btn svg { width: 15px; height: 15px; }
.crm-seg-btn.on {
	opacity: 1; color: var(--f7-theme-color);
	border-color: color-mix(in srgb, var(--f7-theme-color) 60%, transparent);
	background: color-mix(in srgb, var(--f7-theme-color) 12%, transparent);
}
.crm-mais-campos {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin: 4px 16px 0; padding: 6px;
	font-size: 12px; text-transform: uppercase; letter-spacing: .3px;
	color: var(--f7-text-color); opacity: .55;
}
.crm-mais-campos .crm-mais-chev { width: 15px; height: 15px; transition: transform .3s ease; }
.crm-mais-campos.aberto .crm-mais-chev { transform: rotate(180deg); }

/* CRM - Contactos: excerto do histórico nos resultados da pesquisa por histórico */
.crm-res-hist {
	white-space: normal;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	margin-top: 2px; opacity: .65; font-style: italic;
}

/* CRM - Contactos: filtro Atrasados + botão registar comunicação no swipe */
.crm-overdue {
	display: inline-flex; align-items: center; gap: 5px;
	height: 34px; padding: 0 12px; margin-left: 8px;
	border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
	border: 1px solid rgba(128,128,128,.3); color: var(--f7-text-color); opacity: .65;
}
.crm-overdue svg { width: 14px; height: 14px; }
.crm-overdue.on {
	opacity: 1; color: #FC544B;
	border-color: color-mix(in srgb, #FC544B 55%, transparent);
	background: color-mix(in srgb, #FC544B 12%, transparent);
}
.crm-res-card .swipeout-actions-right a.crm-sw-log { background: #FFA726; }

/* CRM - detalhe do contacto: dot de agendamento atrasado, último contacto, eliminar */
.pd-tab-dot {
	position: absolute; top: 6px; right: calc(50% - 16px);
	width: 8px; height: 8px; border-radius: 50%; background: #FC544B;
}
.pd-ultcom {
	display: flex; align-items: center; gap: 7px;
	margin: 2px 30px 8px; font-size: 12px; opacity: .55;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-ultcom svg { width: 13px; height: 13px; flex-shrink: 0; }
.pd-ultcom span { overflow: hidden; text-overflow: ellipsis; }
.pd-del-contacto {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; color: #FC544B; opacity: .75;
	text-transform: uppercase; letter-spacing: .3px; padding: 8px;
}

/* CRM - histórico: mini-resumo acima da lista */
.crm-hist-resumo {
	margin: 12px 30px 0; font-size: 12px; opacity: .55;
	letter-spacing: .2px;
}

/* CRM - detalhe: barra de ações no topo do conteúdo (chip + ligar/wa/mail/registo + setas) */
.pd-acts-bar {
	display: flex; align-items: center; gap: 2px;
	padding: 6px 14px 0 22px;
}
.pd-acts-spacer { margin-left: auto; }
.pd-acts-bar .pd-act {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--f7-text-color); opacity: .85;
}
.pd-acts-bar .pd-act svg { width: 22px; height: 22px; }
.pd-acts-bar .pd-act-nav { opacity: .55; }

/* CRM - tab Agenda (port do quadro do ADMIN agenda_contatos) */
.crmag-resumo { margin: 8px 20px 0; font-size: 12px; opacity: .6; }
.crmag-resumo-tarde { color: #FC544B; }
.crmag-filtros {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	padding: 10px 16px 0;
}
.crmag-cor {
	min-width: 26px; height: 22px; padding: 0 9px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; color: #fff; cursor: pointer;
}
.crmag-cor-all { background: rgba(128,128,128,.45); text-transform: uppercase; letter-spacing: .3px; }
.crmag-prof-foto { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; cursor: pointer; }
.crmag-dia-hdr {
	display: flex; align-items: center; gap: 9px;
	margin: 18px 12px 4px; padding: 9px 16px;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--f7-theme-color) 24%, transparent), color-mix(in srgb, var(--f7-theme-color) 6%, transparent) 55%, transparent);
	font-size: 12px; text-transform: uppercase;
	letter-spacing: .6px; cursor: pointer;
}
.crmag-dia-hdr svg { width: 14px; height: 14px; color: var(--f7-theme-color); }
.crmag-dia-data { opacity: .55; }
.crmag-hoje { color: var(--f7-theme-color); }
.crmag-tarde { color: #FC544B; }
.crmag-item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; margin: 5px 12px 0;
	border: 1px solid rgba(128,128,128,.25); border-radius: 16px;
	cursor: pointer;
}
.crmag-clock { flex-shrink: 0; display: inline-flex; }
.crmag-clock svg { width: 15px; height: 15px; }
.crmag-hora { font-size: 14px; min-width: 44px; flex-shrink: 0; }
.crmag-data { font-size: 10px; opacity: .6; text-transform: uppercase; }
.crmag-info { flex: 1; min-width: 0; font-size: 12px; line-height: 15px; }
.crmag-box { font-size: 10px; opacity: .55; }
.crmag-nome { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmag-txt {
	opacity: .6; overflow: hidden; text-overflow: ellipsis;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.crmag-rh { font-size: 10px; opacity: .8; }
.crmag-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.crmag-sec {
	margin: 26px 12px 4px; padding: 9px 16px;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, #FC544B 26%, transparent), color-mix(in srgb, #FC544B 7%, transparent) 55%, transparent);
	font-size: 12px; text-transform: uppercase;
	letter-spacing: .6px; display: flex; gap: 9px; align-items: center;
}
.crmag-sec svg { width: 14px; height: 14px; }
.crmag-sec-sino { color: #FC544B; display: inline-flex; }

/* CRM - agenda: filtros com ripple + seleção evidente (anel) + persistência */
.crmag-cor { position: relative; overflow: hidden; }
.crmag-prof-wrap {
	position: relative; overflow: hidden;
	width: 24px; height: 24px; border-radius: 50%;
	display: inline-flex; flex-shrink: 0;
}
.crmag-prof-wrap .crmag-prof-foto { width: 100%; height: 100%; }
.crmag-filtro-cor.on, .crmag-filtro-prof.on {
	outline: 2px solid var(--f7-theme-color); outline-offset: 2px;
}
.crmag-filtros.filtrado .crmag-filtro-cor:not(.on),
.crmag-filtros.filtrado .crmag-filtro-prof:not(.on) { opacity: .4; }


/* CRM - agenda: swipe por linha, atrasados colapsáveis, cabeçalhos sticky */
.crmag-ul { list-style: none; margin: 0; padding: 0; }
.crmag-ul li.swipeout { margin: 5px 12px 0; border-radius: 16px; }
.crmag-ul .crmag-item { margin: 0; }
/* responsivo: cada botão nunca passa de 15% do ecrã → os 5 juntos ficam ≤75%
   e o contentor (shrink-to-fit) soma só os botões presentes na linha */
.crmag-ul .swipeout-actions-right { display: flex; }
.crmag-ul .swipeout-actions-right a { display: flex; align-items: center; justify-content: center; flex: 0 0 clamp(42px, 15vw, 58px); width: clamp(42px, 15vw, 58px); color: #fff; }
.crmag-ul .swipeout-actions-right svg { width: 20px; height: 20px; }
.crmag-ul .swipeout-actions-right a.crm-sw-call { background: #54CA68; }
.crmag-ul .swipeout-actions-right a.crm-sw-wa { background: #25D366; }
.crmag-ul .swipeout-actions-right a.crm-sw-mail { background: #6777EF; }
.crmag-ul .swipeout-actions-right a.crm-sw-log { background: #FFA726; }
.crmag-ul .swipeout-actions-right a.crm-sw-done { background: #009688; }
.crmag-dia-hdr, .crmag-sec {
	/* o scroll (.page-content) começa ABAIXO da navbar → top:0 cola a barra encostada à navbar
	   (padrão das outras barras sticky: .wod-datebar, .cross-rec-sticky) */
	position: sticky; top: 0; z-index: 40;
}
.crmag-dia-hdr { background: linear-gradient(90deg, color-mix(in srgb, var(--f7-theme-color) 24%, transparent), color-mix(in srgb, var(--f7-theme-color) 6%, transparent) 55%, transparent), var(--f7-page-bg-color); }
.crmag-sec { background: linear-gradient(90deg, color-mix(in srgb, #FC544B 26%, transparent), color-mix(in srgb, #FC544B 7%, transparent) 55%, transparent), var(--f7-page-bg-color); cursor: pointer; }
.crmag-sec-n {
	min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; color: #fff; background: #FC544B;
}
.crmag-sec-chev { margin-left: auto; opacity: .7; transition: transform .2s; }
.crmag-sec.aberto .crmag-sec-chev { transform: rotate(180deg); }

/* REGY CHALLENGE II - tabela de desafios (tab 1): nome + 8 níveis-elemento */
.ch-tabela { padding: 4px 8px 20px; }
.ch-row {
	display: grid; grid-template-columns: minmax(78px, 1.5fr) repeat(8, 1fr);
	align-items: center; gap: 2px; padding: 11px 4px;
	border-bottom: 1px solid rgba(128,128,128,.25);
}
.ch-nome {
	font-size: 12px; text-transform: uppercase; letter-spacing: .2px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px;
}
.ch-el { display: flex; align-items: center; justify-content: center; padding: 3px 0; }
.ch-el svg { width: 18px; height: 18px; }
.ch-el-terra      svg { color: #8a6a44; }
.ch-el-rocha      svg { color: #8d9aa3; }
.ch-el-agua       svg { color: #378ADD; }
.ch-el-vento      svg { color: #1D9E75; }
.ch-el-neve       svg { color: #9fc8e8; }
.ch-el-cristal    svg { color: #7F77DD; }
.ch-el-tempestade svg { color: #EF9F27; }
.ch-el-lava       svg { color: #E8431F; }

/* REGY CHALLENGE II - tab Expedição (montanha do nível atual) */
.chm-wrap { padding-bottom: 20px; }
.chm-head { text-align: center; padding: 10px 16px 8px; }
.chm-head-nivel { font-size: 12px; opacity: .55; }
.chm-head-nome { font-size: 21px; letter-spacing: .5px; }
.chm-head-alt { font-size: 12px; color: var(--f7-theme-color); letter-spacing: 1px; }
.chm-cena svg { display: block; }
.chm-card {
	margin: 10px 14px 0; padding: 12px 14px; border-radius: 14px;
	background: rgba(128,128,128,.13);
}
.chm-frase { font-style: italic; text-align: center; font-size: 13.5px; line-height: 1.5; }
.chm-prog-top, .chm-prog-bot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .85; }
.chm-prog-top { margin-bottom: 6px; }
.chm-prog-bot { margin-top: 7px; font-size: 11.5px; opacity: .6; }
.chm-pts { color: var(--f7-theme-color); }
.chm-bar { height: 6px; border-radius: 3px; background: rgba(128,128,128,.3); }
.chm-bar-fill { height: 6px; border-radius: 3px; background: var(--f7-theme-color); transition: width .6s ease; }
.chm-next { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .85; }
.chm-next-ic { width: 16px; height: 16px; color: var(--f7-theme-color); vertical-align: -3px; }
.chm-mini-ic { width: 13px; height: 13px; vertical-align: -2px; opacity: .8; }
.chm-info { display: flex; align-items: center; gap: 6px; margin: 10px 16px 0; font-size: 11px; opacity: .5; }
.chm-sun { animation: chm-sun 5s ease-in-out infinite; }
@keyframes chm-sun { 0%,100% { opacity: .18; } 50% { opacity: .35; } }
.chm-sea { animation: chm-sea 4s ease-in-out infinite; }
@keyframes chm-sea { 0%,100% { opacity: .5; } 50% { opacity: .25; } }
.chm-smoke { animation: chm-smoke 6s linear infinite; }
.chm-smoke2 { animation: chm-smoke 6s 3s linear infinite; }
@keyframes chm-smoke { 0% { transform: translateY(0); opacity: .8; } 100% { transform: translateY(-42px); opacity: 0; } }
.chm-gulls { animation: chm-gulls 26s linear infinite; }
@keyframes chm-gulls { 0% { transform: translateX(0); } 100% { transform: translateX(420px); } }
.chm-flag { animation: chm-flag 2.4s ease-in-out infinite; transform-origin: 3.5px 2px; }
@keyframes chm-flag { 0%,100% { transform: skewX(0deg); } 50% { transform: skewX(-6deg); } }
.chm-pulse { animation: chm-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes chm-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.chm-sun, .chm-sea, .chm-smoke, .chm-smoke2, .chm-gulls, .chm-flag, .chm-pulse { animation: none; }
}

/* REGY CHALLENGE II - título na navbar + "quem está nesta etapa" */
.chm-nav-tit { line-height: 1.15; text-align: left; }
.chm-nav-tit small { display: block; font-size: 10px; opacity: .55; letter-spacing: .3px; }
.chm-outros-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .6; margin-bottom: 8px; }
.chm-outros { display: flex; flex-wrap: wrap; gap: 6px; }
.chm-outro {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11.5px; padding: 3px 10px 3px 3px; border-radius: 999px;
	background: rgba(128,128,128,.16);
}
.chm-outro img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.chm-outro-mais { padding: 3px 10px; opacity: .7; }
.chm-outros-vazio { font-size: 12px; opacity: .55; font-style: italic; }

/* REGY CHALLENGE II - expandir/encolher a lista "nesta etapa contigo" */
.chm-outros .chm-oculto { display: none; }
.chm-outros.chm-aberto .chm-oculto { display: inline-flex; }
.chm-outros .chm-outro-mais { color: var(--f7-theme-color); opacity: 1; }

/* REGY CHALLENGE II - cenas: chuva/nevoeiro (Ben Nevis) + simulador dev */
.chm-fog { animation: chm-fog 9s ease-in-out infinite; }
.chm-fog2 { animation: chm-fog2 11s ease-in-out infinite; }
@keyframes chm-fog { 0%,100% { transform: translateX(0); } 50% { transform: translateX(34px); } }
@keyframes chm-fog2 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-26px); } }
.chm-rain { animation: chm-rain .9s linear infinite; }
.chm-rain2 { animation: chm-rain .9s .45s linear infinite; }
@keyframes chm-rain { 0% { transform: translateY(-30px); } 100% { transform: translateY(30px); } }
.chm-sim { border: 1px dashed rgba(128,128,128,.5); background: transparent; }
.chm-sim-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; }
.chm-sim-row label { display: flex; align-items: center; gap: 5px; opacity: .8; }
.chm-sim-row select {
	background: rgba(128,128,128,.15); color: inherit; border: 1px solid rgba(128,128,128,.4);
	border-radius: 8px; padding: 4px 6px; font-size: 12px; max-width: 150px;
}
.chm-sim-btn {
	padding: 5px 14px; border-radius: 999px; font-size: 12px;
	background: var(--f7-theme-color); color: var(--wp-on-theme, #fff) !important;
}
.chm-sim-real { background: rgba(128,128,128,.4); }
@media (prefers-reduced-motion: reduce) { .chm-fog, .chm-fog2, .chm-rain, .chm-rain2 { animation: none; } }

/* REGY CHALLENGE II - confettis do cume + quadro "conquistado / PULSE IT" */
.chm-cena { position: relative; overflow: hidden; }
.chm-conf {
	position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px;
	pointer-events: none; animation: chm-conf-fall 1.8s ease-in forwards;
}
@keyframes chm-conf-fall {
	0% { transform: translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translateY(320px) rotate(340deg); opacity: 0; }
}
.chm-pop {
	position: fixed; inset: 0; z-index: 12000;
	background: rgba(0,0,0,.72);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.chm-pop-card {
	width: 100%; max-width: 380px; border-radius: 18px; overflow: hidden;
	background: var(--f7-page-bg-color); border: 1px solid rgba(128,128,128,.35);
	animation: chm-pop-in .35s ease-out;
}
@keyframes chm-pop-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.chm-pop-tit { text-align: center; padding: 14px 16px 10px; font-size: 17px; letter-spacing: .5px; text-transform: uppercase; }
.chm-pop-img svg { display: block; width: 100%; height: auto; }
.chm-pop-acts { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.chm-pop-acts .chm-sim-btn { font-size: 14px; padding: 8px 22px; }
.chm-pop-close { font-size: 13px; opacity: .6; color: inherit; }
@media (prefers-reduced-motion: reduce) { .chm-conf, .chm-pop-card { animation: none; } }

/* REGY CHALLENGE II - botão Animar (dev) sobre a cena */
.chm-anim-btn {
	position: absolute; top: 10px; right: 10px; z-index: 30;
	padding: 6px 14px; border-radius: 999px; font-size: 12px;
	background: rgba(0,0,0,.45); border: 1px solid var(--f7-theme-color);
	color: #fff !important;
}

/* REGY CHALLENGE II - relâmpago de Zeus (cena Olimpo) */
.chm-zeus { opacity: 0; animation: chm-zeus 7s infinite; }
@keyframes chm-zeus {
	0%, 90%, 100% { opacity: 0; }
	91%, 93% { opacity: 1; }
	94% { opacity: 0.15; }
	95.5% { opacity: 0.9; }
	97% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .chm-zeus { animation: none; opacity: .6; } }

/* REGY CHALLENGE II - animações genéricas das cenas 6-24 */
.chm-lava { animation: chm-lava 2.6s ease-in-out infinite; }
@keyframes chm-lava { 0%,100% { opacity: .9; } 50% { opacity: .45; } }
.chm-neve { animation: chm-neve 5s linear infinite; }
.chm-neve2 { animation: chm-neve 5s 2.5s linear infinite; }
@keyframes chm-neve { 0% { transform: translateY(-40px); } 100% { transform: translateY(40px); } }
.chm-aurora { animation: chm-aurora 8s ease-in-out infinite; }
.chm-aurora2 { animation: chm-aurora 11s 2s ease-in-out infinite; }
@keyframes chm-aurora { 0%,100% { opacity: .3; transform: translateX(0); } 50% { opacity: .65; transform: translateX(14px); } }
.chm-jet { animation: chm-fog 3.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chm-lava, .chm-neve, .chm-neve2, .chm-aurora, .chm-aurora2, .chm-jet { animation: none; } }

/* REGY CHALLENGE II - aves com bater de asas (asa esq/dir rodam no ombro) */
.chm-asaL { transform-box: fill-box; transform-origin: right center; animation: chm-asaL .55s ease-in-out infinite alternate; }
.chm-asaR { transform-box: fill-box; transform-origin: left center; animation: chm-asaR .55s ease-in-out infinite alternate; }
@keyframes chm-asaL { from { transform: rotate(-14deg); } to { transform: rotate(30deg); } }
@keyframes chm-asaR { from { transform: rotate(14deg); } to { transform: rotate(-30deg); } }
@media (prefers-reduced-motion: reduce) { .chm-asaL, .chm-asaR { animation: none; } }

/* REGY CHALLENGE II - salto do springbok (pronking: sobe, paira, desce) */
.chm-salto { animation: chm-salto 1.05s cubic-bezier(.45,0,.55,1) infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes chm-salto {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	30% { transform: translateY(-4px) rotate(-2deg); }
	52% { transform: translateY(-4.5px) rotate(-1deg); }
	82% { transform: translateY(0) rotate(0deg); }
}
.chm-salto-sombra { animation: chm-salto-sombra 1.05s cubic-bezier(.45,0,.55,1) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes chm-salto-sombra {
	0%, 100% { transform: scale(1); opacity: .22; }
	30% { transform: scale(.5); opacity: .09; }
	52% { transform: scale(.5); opacity: .09; }
	82% { transform: scale(1); opacity: .22; }
}
@media (prefers-reduced-motion: reduce) { .chm-salto, .chm-salto-sombra { animation: none; } }

/* REGY CHALLENGE II - céu de aurora: overlays de cor em fusão lenta (Islândia) */
.chm-auroraceu { animation: chm-auroraceu 9s ease-in-out infinite; }
@keyframes chm-auroraceu { 0%, 100% { opacity: 0.04; } 50% { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .chm-auroraceu { animation: none; opacity: .2; } }

/* REGY CHALLENGE II - rotação contínua lenta (velas do moinho, etc.) */
.chm-gira { animation: chm-gira 16s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes chm-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chm-gira { animation: none; } }

/* REGY CHALLENGE II - cauda da baleia a bater + salpicos (Pico/Açores) */
.chm-cauda { animation: chm-cauda 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: right bottom; }
@keyframes chm-cauda {
	0%, 100% { transform: rotate(0deg); }
	30% { transform: rotate(-30deg); }
	46% { transform: rotate(6deg); }
	60% { transform: rotate(0deg); }
}
.chm-splash { animation: chm-splash 2.6s ease-out infinite; }
@keyframes chm-splash {
	0%, 42% { opacity: 0; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-5px); }
	74%, 100% { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .chm-cauda, .chm-splash { animation: none; } .chm-splash { opacity: 0; } }

/* REGY CHALLENGE II - tab Challenges v2: nome em linha própria, próximo
   nível em destaque, futuros com "?", quadro de detalhe do nível */
.ch-item { padding: 11px 6px; border-bottom: 1px solid rgba(128,128,128,.25); }
.ch-nome2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.ch-els { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.ch-els .ch-el { padding: 5px 0; border-radius: 10px; }
.ch-el-next { background: rgba(128,128,128,.16); border: 1px solid color-mix(in srgb, var(--f7-theme-color) 55%, transparent); }
.ch-el-lock span { font-size: 15px; opacity: .3; line-height: 18px; }
.chd-card { max-width: 320px; padding: 18px 16px 6px; text-align: center; }
.chd-el { display: flex; justify-content: center; }
.chd-el svg { width: 40px; height: 40px; }
.chd-sub { font-size: 12px; opacity: .6; margin-top: -4px; }
.chd-req { font-size: 13px; margin: 14px 10px 0; line-height: 1.5; }
.chd-req span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .55; }
.chd-pts { font-size: 22px; color: var(--f7-theme-color); margin-top: 12px; }

/* REGY CHALLENGE II - navegação direita→esquerda em loop (drakkar) */
.chm-vela { animation: chm-vela 32s linear infinite; }
@keyframes chm-vela { to { transform: translateX(-480px); } }
@media (prefers-reduced-motion: reduce) { .chm-vela { animation: none; transform: translateX(-240px); } }

/* REGY CHALLENGE II - remos do drakkar a remar em cadência
   (cada remo roda no SEU ponto de apoio: o topo, na borda do casco) */
.chm-remo { animation: chm-remo 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: right top; }
@keyframes chm-remo { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .chm-remo { animation: none; } }

/* REGY CHALLENGE II - quadro de detalhe do nível v2: degradê suave, halo
   no elemento, barra de progresso e botão de fechar grande */
.chd-card {
	background: linear-gradient(180deg, color-mix(in srgb, var(--f7-theme-color) 16%, var(--f7-page-bg-color)), var(--f7-page-bg-color) 62%);
	border: 1px solid color-mix(in srgb, var(--f7-theme-color) 30%, transparent);
	padding: 22px 18px 16px;
}
.chd-el {
	width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(128,128,128,.15);
}
.chd-el svg { width: 34px; height: 34px; }
.chd-bar { height: 8px; border-radius: 4px; background: rgba(128,128,128,.28); margin: 14px 10px 0; overflow: hidden; }
.chd-bar div { height: 100%; background: var(--f7-theme-color); border-radius: 4px; min-width: 2px; }
.chd-barlab { font-size: 11.5px; opacity: .6; margin-top: 5px; }
.chd-close {
	display: block; margin: 16px auto 2px; padding: 11px 0; width: 80%;
	text-align: center; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff) !important;
	border-radius: 999px; font-size: 14px; letter-spacing: .5px; text-transform: uppercase;
}

/* REGY CHALLENGE II - estrela cadente + passo lento do camelo (Sinai) */
.chm-estrela { animation: chm-estrela 7s linear infinite; opacity: 0; }
@keyframes chm-estrela {
	0%, 86% { opacity: 0; transform: translate(0, 0); }
	89% { opacity: 1; }
	97%, 100% { opacity: 0; transform: translate(95px, -42px); }
}
.chm-camelo { animation: chm-camelo 38s ease-in-out infinite alternate; }
@keyframes chm-camelo { from { transform: translateX(0); } to { transform: translateX(42px); } }
@media (prefers-reduced-motion: reduce) { .chm-estrela, .chm-camelo { animation: none; } }

/* REGY CHALLENGE II - camelo vira-se ao inverter a marcha (flip sincronizado
   com o ciclo de ida-e-volta de 38s+38s do chm-camelo) */
.chm-camelo-corpo { animation: chm-camelo-vira 76s step-end infinite; transform-box: fill-box; transform-origin: center; }
@keyframes chm-camelo-vira {
	0%, 100% { transform: scaleX(-1); }
	50% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .chm-camelo-corpo { animation: none; } }

/* REGY CHALLENGE II - confetis temáticos do país (símbolos a cair no cume) */
.chm-confe {
	position: absolute; top: -20px; pointer-events: none; line-height: 1;
	animation: chm-conf-fall 1.8s ease-in forwards;
}

/* REGY CHALLENGE II - Quiz do Cume: bónus em escada, timer 10s, respostas */
.chq-big { font-size: 30px; color: var(--f7-theme-color); margin: 6px 0 2px; }
.chq-cash {
	display: block; margin: 10px auto 4px; padding: 9px 0; width: 80%;
	text-align: center; border: 1px solid rgba(128,128,128,.5); color: inherit;
	border-radius: 999px; font-size: 13px; opacity: .85;
}
.chq-barw { height: 7px; border-radius: 4px; background: rgba(128,128,128,.28); margin: 2px 6px 12px; overflow: hidden; }
.chq-bar { height: 100%; width: 100%; background: var(--f7-theme-color); border-radius: 4px; }
.chq-q { font-size: 15px; line-height: 1.45; margin: 10px 4px 14px; }
.chq-anss { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.chq-ans {
	display: block; padding: 11px 12px; border-radius: 12px; font-size: 13.5px;
	background: rgba(128,128,128,.14); border: 1px solid rgba(128,128,128,.35);
	color: inherit; text-align: left;
}
.chq-ans.ok { background: rgba(46,125,79,.35); border-color: #2e7d4f; }
.chq-ans.bad { background: rgba(226,75,74,.35); border-color: #e24b4a; }
.chq-fail { margin: 10px 0 6px; font-size: 15px; color: #e24b4a; }

/* REGY CHALLENGE II - barra de progresso do próximo nível junto ao título */
.ch-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ch-top .ch-nome2 { margin-bottom: 0; flex-shrink: 0; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-prog { flex: 1; height: 6px; border-radius: 3px; background: rgba(128,128,128,.28); overflow: hidden; }
.ch-prog div { height: 100%; background: var(--f7-theme-color); border-radius: 3px; }
.ch-perc { font-size: 10.5px; opacity: .55; flex-shrink: 0; min-width: 28px; text-align: right; }

/* REGY CHALLENGE II - botão pílula outline na cor do tema (Close do quadro) */
.chm-btn-outline {
	display: inline-block; padding: 8px 22px; border-radius: 999px; font-size: 14px;
	border: 1.5px solid var(--f7-theme-color); color: var(--f7-theme-color) !important;
	background: transparent;
}

/* REGY CHALLENGE II - regras do bónus no cartão do quiz */
.chq-regras { font-size: 12.5px; line-height: 1.6; opacity: .75; margin: 10px 8px 4px; }

/* REGY CHALLENGE II - tab Leaderboard */
.chl-lista { padding: 4px 10px 20px; }
.chl-row {
	display: flex; align-items: center; gap: 10px; padding: 9px 8px;
	border-bottom: 1px solid rgba(128,128,128,.22);
}
.chl-row.chl-eu { background: color-mix(in srgb, var(--f7-theme-color) 10%, transparent); border-radius: 12px; }
.chl-pos { font-size: 12px; opacity: .55; min-width: 26px; text-align: center; }
.chl-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.chl-mid { flex: 1; min-width: 0; }
.chl-nome { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chl-sub { font-size: 11px; opacity: .55; }
.chl-pts { color: var(--f7-theme-color); font-size: 15px; }
.chl-pts small { font-size: 10px; opacity: .7; }

/* REGY CHALLENGE II - Peak Bonus: bandeira no título + cash out maiúsculas */
.chq-tit { display: flex; align-items: center; justify-content: center; gap: 9px; }
.chq-flag { width: 30px; height: 20px; flex-shrink: 0; }
.chq-cash { text-transform: uppercase; letter-spacing: .4px; }

/* REGY CHALLENGE II - tab desafios v2: nota batch, icone do desafio, infos */
.ch-updnote { display: flex; align-items: center; gap: 8px; margin: 10px 16px 2px 16px; padding: 9px 12px; border: 1px solid rgba(128,128,128,.35); border-radius: 12px; font-size: 12.5px; opacity: .8; cursor: pointer; }
.ch-updnote svg, .ch-updnote i { width: 16px; height: 16px; flex-shrink: 0; }
.ch-updnote span { flex: 1; min-width: 0; }
.ch-updnote-i { color: var(--f7-theme-color); display: flex; }
.ch-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; color: var(--f7-theme-color); opacity: .85; margin-right: 2px; }
.ch-ic svg, .ch-ic i { width: 21px; height: 21px; }
.chd-info { font-size: 12.5px; line-height: 1.45; text-align: left; opacity: .75; margin: 10px 2px 2px 2px; max-height: 40vh; overflow-y: auto; }
.chd-info-regras { max-height: 55vh; }
.chd-regra { margin-bottom: 9px; padding-left: 10px; border-left: 2px solid rgba(128,128,128,.35); }
.chd-data { font-size: 12.5px; opacity: .7; margin-top: 8px; }
.chd-data-ok { display: flex; align-items: center; justify-content: center; gap: 6px; color: #2e9e5b; opacity: 1; }
.chd-data-ok svg { width: 15px; height: 15px; }

/* REGY CHALLENGE II - badges circulares dos desafios */
.ch-ic { opacity: 1; }
.ch-ic svg.ch-badge { width: 34px; height: 34px; display: block; }

/* REGY CHALLENGE II - popup de nivel: badge do desafio + elemento lado a lado */
.chd-el-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; }
.chd-el-row .chd-el { margin: 0; }
.chd-bdg { display: flex; }
.chd-bdg .ch-badge { width: 64px; height: 64px; display: block; }

/* REGY CHALLENGE II - fila de niveis numa so linha (badge + 8 elementos) */
.ch-els { grid-template-columns: auto repeat(8, 1fr); }

/* REGY CHALLENGE II - cartao do montanhista (perfil de membro no challenge) */
.chp-head { position: relative; text-align: center; }
.chp-banner { height: 130px; overflow: hidden; }
.chp-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chp-head-info { padding: 0 16px 4px; }
.chp-avatar { display: inline-block; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 3px solid var(--f7-page-bg-color); margin-top: 14px; }
.chp-com-banner .chp-avatar { margin-top: -52px; }
.chp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chp-nome { font-size: 20px; margin-top: 8px; }
.chp-capitulo { font-size: 12.5px; opacity: .6; margin-top: 2px; font-style: italic; }
.chp-exped { margin: 14px 16px 0; padding: 12px 14px; border: 1px solid rgba(128,128,128,.35); border-radius: 14px; }
.chp-exped-top { display: flex; align-items: center; gap: 10px; }
.chp-exped-top > svg, .chp-exped-top > i { width: 22px; height: 22px; color: var(--f7-theme-color); flex-shrink: 0; }
.chp-exped-mont { flex: 1; min-width: 0; }
.chp-exped-nome { font-size: 15px; }
.chp-exped-sub { font-size: 12px; opacity: .6; }
.chp-etapa-chip { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 55%, transparent); color: var(--f7-theme-color); flex-shrink: 0; }
.chp-exped-bar { height: 7px; border-radius: 4px; background: rgba(128,128,128,.28); margin-top: 10px; overflow: hidden; }
.chp-exped-bar div { height: 100%; background: var(--f7-theme-color); border-radius: 4px; min-width: 2px; }
.chp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 16px 0; }
.chp-stat { text-align: center; padding: 10px 4px; border: 1px solid rgba(128,128,128,.35); border-radius: 12px; }
.chp-stat-n { font-size: 18px; color: var(--f7-theme-color); }
.chp-stat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; margin-top: 2px; }
.chp-tit { margin-top: 22px; }
.chp-els { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 6px 16px 0; }
.chp-el { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 6px; border: 1px solid rgba(128,128,128,.3); border-radius: 10px; }
.chp-el svg { width: 18px; height: 18px; }
.chp-el-n { font-size: 11px; opacity: .7; }
.chp-el-off { opacity: .25; }
.chp-conq { margin: 6px 16px 0; }
.chp-conq-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(128,128,128,.2); }
.chp-conq-row:last-child { border-bottom: none; }
.chp-conq-bdg { width: 38px; height: 38px; flex-shrink: 0; display: flex; }
.chp-conq-bdg svg.ch-badge { width: 38px; height: 38px; }
.chp-conq-mid { flex: 1; min-width: 0; }
.chp-conq-nome { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chp-conq-els { display: flex; gap: 4px; margin-top: 3px; }
.chp-conq-els svg { width: 14px; height: 14px; }
.chp-conq-lvl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; }
.chp-tl { margin: 6px 16px 0; }
.chp-tl-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid rgba(128,128,128,.2); }
.chp-tl-row:last-child { border-bottom: none; }
.chp-tl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chp-tl-row > svg { width: 17px; height: 17px; flex-shrink: 0; }
.chp-tl-mid { flex: 1; min-width: 0; }
.chp-tl-nome { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chp-tl-sub { font-size: 11.5px; opacity: .6; }
.chp-tl-data { font-size: 11.5px; opacity: .55; flex-shrink: 0; }

/* REGY CHALLENGE II - postal de cume no feed RegyPulse */
.chpk-card { border: 1px solid rgba(128,128,128,.3); border-radius: 14px; overflow: hidden; margin-top: 6px; }
.chpk-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 8px; }
.chpk-head-tx { min-width: 0; }
.chpk-tit { font-size: 14px; text-transform: uppercase; letter-spacing: .4px; }
.chpk-sub { font-size: 11.5px; opacity: .6; margin-top: 1px; }
.chpk-svg svg { display: block; width: 100%; height: auto; }
.chpk-foot { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 11.5px; opacity: .65; font-style: italic; }

/* REGY CHALLENGE II - pontos atuais: chip na navbar + chip sobre a cena */
.ch-pts-chip { font-size: 13px; color: var(--f7-theme-color); border: 1px solid color-mix(in srgb, var(--f7-theme-color) 55%, transparent); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.chm-pts-chip { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--f7-page-bg-color) 80%, transparent); border: 1px solid rgba(128,128,128,.35); z-index: 5; }
.chm-pts-chip svg { width: 14px; height: 14px; color: var(--f7-theme-color); }

/* REGY CHALLENGE II - quadro de nivel CONQUISTADO mais evidente */
.chd-card { position: relative; overflow: hidden; }
.chd-el { position: relative; }
.chd-el-done { border: 2px solid; }
.chd-el-check { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #2e9e5b; display: flex; align-items: center; justify-content: center; border: 2px solid var(--f7-page-bg-color); }
.chd-el-check svg { width: 12px; height: 12px; color: #fff; }
.chd-done-tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; border: 1px solid; border-radius: 999px; padding: 4px 14px; margin-top: 12px; }

/* REGY CHALLENGE II - tab Rewards: teaser "opening soon" */
.ch4-teaser { text-align: center; padding: 70px 30px 40px; }
.ch4-gift { position: relative; display: inline-block; }
.ch4-gift-svg { width: 130px; height: 130px; }
.ch4-gift-box { animation: ch4-flutua 3.2s ease-in-out infinite; transform-origin: 48px 48px; }
@keyframes ch4-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ch4-spark { position: absolute; color: var(--f7-theme-color); font-size: 13px; opacity: 0; animation: ch4-brilha 2.6s ease-in-out infinite; }
.ch4-spark.s1 { top: 6px;  left: -6px;  animation-delay: 0s; }
.ch4-spark.s2 { top: -4px; right: 8px;  animation-delay: .7s; font-size: 16px; }
.ch4-spark.s3 { bottom: 16px; left: -14px; animation-delay: 1.3s; font-size: 11px; }
.ch4-spark.s4 { bottom: 2px;  right: -8px; animation-delay: 1.9s; }
@keyframes ch4-brilha { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.15); } }
.ch4-tit { font-size: 19px; margin-top: 20px; }
.ch4-txt { font-size: 13.5px; line-height: 1.55; opacity: .65; margin-top: 12px; max-width: 320px; margin-left: auto; margin-right: auto; }
.ch4-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--f7-theme-color); border: 1px solid color-mix(in srgb, var(--f7-theme-color) 55%, transparent); border-radius: 999px; padding: 6px 16px; }
.ch4-chip svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .ch4-gift-box, .ch4-spark { animation: none; } .ch4-spark { opacity: .6; } }

/* REGY CHALLENGE II - popup de conquistas novas (arranque) + cartao no feed */
.chn-hero { position: relative; display: inline-block; margin-top: 6px; }
.chn-hero-ic { font-size: 52px; width: 52px; height: 52px; color: var(--f7-theme-color); }
.chn-spark { position: absolute; color: var(--f7-theme-color); font-size: 13px; opacity: 0; animation: ch4-brilha 2.6s ease-in-out infinite; }
.chn-spark.s1 { top: -6px; left: -14px; animation-delay: 0s; }
.chn-spark.s2 { top: -10px; right: -12px; animation-delay: .8s; font-size: 16px; }
.chn-spark.s3 { bottom: -2px; right: -18px; animation-delay: 1.5s; font-size: 11px; }
.chn-list { text-align: left; margin: 16px 8px 0; }
.chn-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(128,128,128,.18); }
.chn-row:last-child { border-bottom: none; }
.chn-bdg { width: 38px; height: 38px; flex-shrink: 0; display: flex; }
.chn-bdg svg.ch-badge { width: 38px; height: 38px; }
.chn-mid { flex: 1; min-width: 0; }
.chn-nome { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chn-sub { font-size: 12px; display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.chn-sub .icon { font-size: 13px; width: 13px; height: 13px; }
.chn-pts { font-size: 15px; flex-shrink: 0; }
.chn-total { margin-top: 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--f7-theme-color); }
.chn-card-list { padding: 2px 12px; }
@media (prefers-reduced-motion: reduce) { .chn-spark { animation: none; opacity: .6; } }

/* REGY CHALLENGE II - CORDADAS: cartao, formulario, convite, historico */
.cdx-card { border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent); }
.cdx-bonus-tag { color: var(--f7-theme-color); }
.cdx-membros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cdx-membro { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; border: 1px solid rgba(128,128,128,.3); border-radius: 999px; padding: 3px 12px 3px 3px; color: inherit; width: auto; }
.cdx-membro.cdx-eu { border-color: color-mix(in srgb, var(--f7-theme-color) 55%, transparent); }
.cdx-mfoto { position: relative; width: 26px; height: 26px; flex-shrink: 0; }
.cdx-mfoto img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.cdx-check, .cdx-espera { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; padding: 2px; background: #2e9e5b; color: #fff; }
.cdx-espera { background: rgba(128,128,128,.85); }
.cdx-nota { font-size: 11.5px; opacity: .55; margin-top: 8px; font-style: italic; }
.cdx-cancel { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; color: var(--f7-theme-color); border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent); border-radius: 999px; padding: 4px 14px; width: auto; }
.cdx-ropeup { border: 1px dashed color-mix(in srgb, var(--f7-theme-color) 55%, transparent); color: var(--f7-theme-color); }
.cdx-cands { max-height: 34vh; overflow-y: auto; margin-top: 12px; text-align: left; }
.cdx-cand { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; color: inherit; }
.cdx-cand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cdx-cand span { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdx-cand-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(128,128,128,.4); flex-shrink: 0; }
.cdx-cand.cdx-on { background: color-mix(in srgb, var(--f7-theme-color) 10%, transparent); }
.cdx-cand.cdx-on .cdx-cand-check { border-color: var(--f7-theme-color); background: var(--f7-theme-color); }
.cdx-cand.cdx-bloq { opacity: .5; }
.cdx-cand.cdx-bloq span { white-space: normal; }
.cdx-bloq-mot { display: block; font-size: 11px; opacity: .75; line-height: 1.3; }
.cdx-bloq-ic { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.cdx-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cdx-slider-row > span { font-size: 13px; white-space: nowrap; min-width: 62px; text-align: left; }
.cdx-slider { flex: 1; accent-color: var(--f7-theme-color); }
.cdx-cota { margin-top: 12px; font-size: 14px; }
.cdx-resumo { margin: 14px 10px 6px; text-align: left; }
.cdx-fotos { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.cdx-foto { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; color: inherit; }
.cdx-foto img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.cdx-foto span { font-size: 11px; opacity: .75; max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdx-foto.cdx-eu img { outline: 2px solid var(--f7-theme-color); outline-offset: 1px; }
.cdx-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.cdx-linha .icon { font-size: 15px; width: 15px; height: 15px; flex-shrink: 0; }
.cdx-linha.cdx-bonus { color: var(--f7-theme-color); }
.cdx-invite-card { margin-top: 2px; padding: 14px 16px 12px; border-radius: 18px; text-align: left; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 28%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--f7-theme-color) 13%, var(--f7-page-bg-color)) 0%, var(--f7-page-bg-color) 55%, color-mix(in srgb, var(--f7-theme-color) 6%, var(--f7-page-bg-color)) 100%); }
.cdx-invite-note { font-size: 12px; font-style: italic; opacity: .6; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(128,128,128,.35); }
.cdx-aviso { border-color: rgba(128,128,128,.35); }

/* Challenge II — primeira ascensão (tab_2) */
.chm-fa { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.chm-fa-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--f7-theme-color); }
.chm-fa-nomes { color: var(--f7-theme-color); }
.chm-fa-livre { opacity: .6; font-style: italic; }

/* Challenge II — postal PULSE de equipa (cordada) */
.chn-corda-fotos { display: flex; margin-top: 6px; }
.chn-corda-fotos img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--f7-page-bg-color); }
.chn-corda-fotos img + img { margin-left: -8px; }

/* Challenge II — filtros do leaderboard (tab_3) */
.chl-filtros { display: flex; gap: 8px; margin: 12px 16px 4px; }
.chl-filtro { font-size: 12.5px; padding: 5px 16px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); color: inherit; opacity: .7; width: auto; }
.chl-filtro.chl-filtro-on { border-color: var(--f7-theme-color); color: var(--f7-theme-color); opacity: 1; }
.chl-nota-mes { font-size: 11.5px; opacity: .5; font-style: italic; text-align: center; margin: 10px 16px 0; }

/* Challenge II — mini-tour de boas-vindas (1ª visita) */
.cht-ov { position: absolute; inset: 0; z-index: 12000; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 1; transition: opacity .4s; }
.cht-ov.cht-out { opacity: 0; pointer-events: none; }
.cht-card { width: 100%; max-width: 380px; border-radius: 20px; padding: 22px 20px 18px; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 28%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--f7-theme-color) 13%, var(--f7-page-bg-color)) 0%, var(--f7-page-bg-color) 55%, color-mix(in srgb, var(--f7-theme-color) 6%, var(--f7-page-bg-color)) 100%); }
.cht-hero { display: flex; justify-content: center; margin-bottom: 10px; }
.cht-hero .icon, .cht-hero svg { width: 42px; height: 42px; color: var(--f7-theme-color); }
.cht-tit { text-align: center; font-size: 17px; margin-bottom: 16px; }
.cht-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cht-step .icon, .cht-step svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--f7-theme-color); margin-top: 2px; }
.cht-s-t { font-size: 14px; }
.cht-s-s { font-size: 12.5px; opacity: .65; margin-top: 2px; }
.cht-card .button { margin-top: 6px; }
.chn-bdg-corda { align-items: center; justify-content: center; color: var(--f7-theme-color); border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent); border-radius: 50%; }
.chn-bdg-corda svg { width: 20px; height: 20px; }
.chp-cordas { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 16px 0; font-size: 12.5px; }
.chp-cordas svg { width: 15px; height: 15px; color: var(--f7-theme-color); }

/*---registo: pista das regras da password (8+ chars, 1 letra, 1 numero)---*/
.reg-pass-hints { display: flex; justify-content: center; gap: 14px; padding: 2px 16px 4px; font-size: 12px; opacity: .55; list-style: none; }
.reg-tipo-nota { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; text-align: center; opacity: .7; }
/*---registo: ecra de escolha do tipo de conta---*/
.reg-tipo-intro { margin: 44px auto 60px; width: 80%; text-align: center; opacity: .75; }
.reg-tipo-btns { padding: 0 40px; }
.reg-tipo-btns .button { height: 52px; font-size: 14px; letter-spacing: .4px; }
.reg-tipo-btns .button-fill { margin-bottom: 90px; }      /* separa bem as duas opções */
.reg-tipo-btns .button-outline { margin-bottom: 14px; }   /* a nota pertence a este botão */
.reg-tipo-btns .button .icon { width: 20px; height: 20px; margin-right: 10px; flex: none; }
.reg-tipo-nota { margin-top: 0; }
.reg-tipo-nota .info-point .icon { width: 17px; height: 17px; }
/*---check-in QR: cartao da duracao do treino---*/
.chk-dura-card { margin: 18px 16px 6px; padding: 14px 0 2px; border-radius: 18px; border: 1px solid rgba(128,128,128,.25); }
.chk-dura-tit { display: flex; align-items: center; gap: 10px; padding: 0 18px 6px; }
.chk-dura-tit .icon { width: 20px; height: 20px; color: var(--f7-theme-color); flex: none; }
.chk-dura-list { margin: 0; }
.chk-qr-wrap { margin-top: 40px; }
/*---importar recordes de outra box (pages/cross/prs_import.php)---*/
.pimp-intro { padding: 18px 24px 8px; opacity: .8; }
.pimp-intro .info-point .icon { width: 16px; height: 16px; vertical-align: -3px; }
.pimp-logos { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 26px 0 10px; }
.pimp-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(128,128,128,.3); }
.pimp-card { margin: 14px 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(128,128,128,.25); }
.pimp-nota { margin-top: 10px; opacity: .65; }
.pimp-bts { display: flex; gap: 12px; padding: 0 24px; }
.pimp-bts .button { flex: 1 1 0; }
.pimp-done-ico { display: flex; justify-content: center; padding-top: 40px; }
.pimp-done-ico .icon { width: 56px; height: 56px; color: var(--f7-theme-color); }
.pimp-done-tit { text-align: center; padding: 14px 0 6px; }
.pimp-done-txt { text-align: center; opacity: .7; padding: 0 30px 20px; }
/*---estado vazio dos records: 2º botão (importar) numa linha própria, centrado---*/
.cross-rec-empty-btn + .cross-rec-empty-btn { display: flex; margin: 14px auto 0; max-width: 320px; }
/*---importar recordes: animacoes de "transferencia" entre boxes---*/
.pimp-logo-wrap { position: relative; display: inline-flex; }
.pimp-logo-wrap::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--f7-theme-color); border-radius: 50%; opacity: 0; pointer-events: none; }
.pimp-logos.importing .pimp-logo-wrap::after { animation: pimpRing 1.1s ease-out infinite; }
.pimp-stream { display: flex; align-items: center; gap: 7px; }
.pimp-stream span { width: 8px; height: 8px; border-radius: 50%; background: var(--f7-theme-color); opacity: .15; animation: pimpFlow 1.4s ease-in-out infinite; }
.pimp-stream span:nth-child(2) { animation-delay: .14s; }
.pimp-stream span:nth-child(3) { animation-delay: .28s; }
.pimp-stream span:nth-child(4) { animation-delay: .42s; }
.pimp-stream span:nth-child(5) { animation-delay: .56s; }
.pimp-logos.importing .pimp-stream span { animation-duration: .5s; }
@keyframes pimpFlow {
	0% { opacity: .12; transform: translateX(-7px) scale(.7); }
	50% { opacity: 1; transform: translateX(0) scale(1); }
	100% { opacity: .12; transform: translateX(7px) scale(.7); }
}
@keyframes pimpRing {
	0% { opacity: .55; transform: scale(.96); }
	100% { opacity: 0; transform: scale(1.28); }
}
#imp_conf .pimp-card { animation: pimpRise .35s ease-out; }
@keyframes pimpRise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
.pimp-done-ico .icon { animation: pimpPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pimpPop {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}
/*---onboarding: bandeira circular na lista de idiomas---*/
.onb-lang-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: 20px; flex: none; }
.onb-langs a span { flex: 1 1 auto; text-align: left; }
/*---importar recordes: campos alinhados com o botao (40px de cada lado)---*/
.pimp-form { margin-left: 40px; margin-right: 40px; }
/*---importar recordes: popup do smart-select das boxes (titulo/lista mais compactos, lista 15px acima)---*/
.pimp-ss .navbar .title { font-size: 16px; }
.pimp-ss .page-content .list { margin-top: 57px; } /* compensa o navbar+searchbar do popup (lista 40px abaixo do estado anterior) */
.pimp-ss .list .item-title { font-size: 14px; }
.pimp-intro-tit { margin-bottom: 6px; }
/*---iguala a largura das 3 cápsulas do formulário (o F7 dá margens internas diferentes ao
    smart-select e aos item-input) — todas encostam à largura da lista (= largura do botão)---*/
.pimp-form .item-content { margin-left: 0 !important; margin-right: 0 !important; }
/*---celebracao de novo PR (celebratePR em app.js)---*/
.prc-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(10, 7, 12, .84); display: flex; align-items: center; justify-content: center; animation: prcFade .25s ease-out; cursor: pointer; }
.prc-inner { text-align: center; animation: prcShake .45s ease-out .68s; }
.prc-barbell { display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 30px; animation: prcDrop .7s cubic-bezier(.25, 1.2, .4, 1); }
.prc-shaft { width: 150px; height: 7px; background: #d6d6d6; border-radius: 4px; }
.prc-plate { border-radius: 4px; background: var(--f7-theme-color); }
.prc-plate.p1 { width: 11px; height: 78px; }
.prc-plate.p2 { width: 9px; height: 60px; opacity: .85; }
.prc-plate.p3 { width: 8px; height: 42px; opacity: .68; }
.prc-title { font-size: 46px; font-weight: 500; letter-spacing: 3px; color: #fff; text-transform: uppercase; animation: prcPunch .45s cubic-bezier(.34, 1.56, .64, 1) .55s backwards; }
.prc-sub { font-size: 15px; color: rgba(255, 255, 255, .75); margin-top: 10px; letter-spacing: .5px; animation: prcFade .4s ease-out .85s backwards; }
.prc-dust { position: absolute; left: 50%; top: 46%; width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: 0; animation: prcDust 1.1s ease-out forwards; }
@keyframes prcDrop { 0% { transform: translateY(-90vh) rotate(-7deg); } 62% { transform: translateY(0) rotate(0deg); } 78% { transform: translateY(-16px); } 100% { transform: translateY(0); } }
@keyframes prcShake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 4px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } }
@keyframes prcPunch { from { transform: scale(.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes prcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes prcDust { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
/*---leaderboard: a minha posicao sticky no fundo---*/
.lb-mypos { position: sticky; bottom: 10px; z-index: 20; display: flex; align-items: center; gap: 10px; margin: 12px 14px 4px; padding: 7px 16px; border-radius: 999px; background: var(--f7-page-bg-color); border: 1px solid var(--f7-theme-color); cursor: pointer; }
.lb-mypos img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.lb-mypos-rank { font-size: 17px; color: var(--f7-theme-color); flex: none; }
.lb-mypos-lbl { flex: 1; font-size: 13px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-mypos-score { font-size: 15px; flex: none; }
/*---detalhe do movimento: percentil na box---*/
.pv-pct { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 16px 2px; padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent); font-size: 13.5px; }
.pv-pct .icon { width: 17px; height: 17px; color: var(--f7-theme-color); flex: none; }
/*---detalhe do movimento: grafico de evolucao---*/
.pv-chart { margin: 0 8px; }
/*---perfil: streak de semanas de treino---*/
.pf-streak { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.pf-streak svg { width: 16px; height: 16px; color: var(--f7-theme-color); flex: none; }

/*---BETA: faixa no home a apelar ao report de bugs (app_feed.php; remover no fim da beta)---*/
.beta-banner { display: flex; align-items: center; gap: 10px; margin: 10px 12px 2px; padding: 9px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 35%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--f7-theme-color) 16%, transparent), color-mix(in srgb, #a855f7 12%, transparent)); color: var(--f7-text-color); }
.beta-banner-chip { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; padding: 3px 9px; border-radius: 999px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.beta-banner-txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; opacity: .85; }
.beta-banner-ic { flex: none; width: 18px; height: 18px; color: var(--f7-theme-color); }

/*---BETA: aba lateral de report de bugs (index.php) + form /bug_report/---*/
.beta-bug-tab { position: fixed; right: 0; top: 42%; z-index: 13500; width: 34px; height: 46px; border-radius: 12px 0 0 12px; background: var(--f7-theme-color); opacity: .5; display: flex; align-items: center; justify-content: center; }
.beta-bug-tab svg { width: 19px; height: 19px; color: #fff; }
.beta-bug-tab:active { opacity: .9; }
.bugp-add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px dashed rgba(128,128,128,.5); color: var(--f7-theme-color); width: auto; font-size: 14px; }
.bugp-add svg { width: 18px; height: 18px; }
.bugp-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bugp-item { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(128,128,128,.3); }
.bugp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bugp-item .bugp-vid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(128,128,128,.25); }
.bugp-item .bugp-vid svg { width: 26px; height: 26px; }
.bugp-del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.bugp-del svg { width: 13px; height: 13px; color: #fff; }

/* SECRETARIA (Front desk) — listas de documentos/dossiês */
.sec-lista .item-title { font-size: 14px; }
.sec-sub { font-size: 11.5px; opacity: .55; }
.sec-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(128,128,128,.3); }
.sec-ic .icon, .sec-ic svg { width: 18px; height: 18px; color: var(--f7-theme-color); }
.sec-ic-pasta { border-style: dashed; }
.sec-ic-pasta .icon, .sec-ic-pasta svg { opacity: .6; }
.sec-video-pop .page-content { justify-content: center; }
.sec-video-fechar { position: fixed; top: 16px; left: 16px; z-index: 10; }
.sec-video-fechar .icon { font-size: 34px; color: #fff; }

/* SECRETARIA — débito direto */
.sec-card { margin: 8px 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(128,128,128,.3); background: transparent; box-shadow: none; }
.sec-dd-top { display: flex; align-items: center; gap: 12px; }
.sec-dd-ic { width: 26px; height: 26px; color: var(--f7-theme-color); flex-shrink: 0; }
.sec-dd-tit { flex: 1; font-size: 14px; }
.sec-dd-mand { color: var(--f7-theme-color); }
.sec-dd-del { color: inherit; opacity: .6; width: auto; }
.sec-dd-del .icon, .sec-dd-del svg { width: 19px; height: 19px; }
.sec-chip { display: inline-block; font-size: 11px; border: 1px solid; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.sec-form { margin: 8px 0; }
.sec-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 16px 0; cursor: pointer; }
.sec-check-ic { flex-shrink: 0; margin-top: 1px; }
.sec-check-ic .icon, .sec-check-ic svg { width: 20px; height: 20px; }
.sec-check-tx { font-size: 12px; line-height: 17px; opacity: .8; }


/*---assiduidade completa: icon user PREENCHIDO a verde (lista de aulas, vista staff)---*/
svg.a_user_done { fill: currentColor; }


/*---mapa de aulas: vista TODOS OS ESPACOS (uma coluna por sala/campo, scroll horizontal)---*/
.mapa-grid--all .mapa-time-col { padding-top: 30px; }
.mapa-all-scroll { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; user-select: none; -webkit-user-drag: none; }
.mapa-all-scroll::-webkit-scrollbar { display: none; }
.mapa-all-cols { display: flex; min-width: 100%; }
.mapa-all-col { flex: 0 0 var(--mapa-colw, 120px); min-width: var(--mapa-colw, 120px); max-width: var(--mapa-colw, 120px); display: flex; flex-direction: column; }
/*---manipulo de largura das colunas (arrastar; 60-200px)---*/
.mapa-colw-bar { display: flex; justify-content: center; padding: 2px 0 4px; }
.mapa-colw-grip {
  width: 64px; height: 18px; border-radius: 999px;
  background: rgba(128,128,128,.18);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; touch-action: none; user-select: none;
}
.mapa-colw-grip svg { width: 14px; height: 14px; opacity: .7; pointer-events: none; }
.mapa-col-head {
  height: 30px; box-sizing: border-box; padding: 6px 6px 0;
  font-size: 11px; text-transform: uppercase; opacity: .7; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 6; will-change: transform;
  background: var(--f7-page-bg-color);
  border-left: 1px solid var(--mapa-line);
}
.mapa-all-col .mapa-day-col { flex: 1; }
/*---cartoes compactos na vista "todos": so nome + hora + lotacao (edicao = toque no cartao)---*/
.mapa-aula--compact .mapa-aula-actions { display: none; }
.mapa-aula--compact .mapa-aula-nome { font-size: 11px; padding-right: 6px; }
.mapa-aula--compact .mapa-aula-hora { font-size: 9px; }
/* prof e membros visiveis (elipsis herdado); sem badges de acoes -> menos padding a direita */
.mapa-aula--compact .mapa-aula-prof,
.mapa-aula--compact .mapa-aula-alunos { padding-right: 6px; }
/* lotacao em baixo, a 10px do fundo do cartao */
.mapa-aula--compact .mapa-aula-insc { top: auto; bottom: 10px; }
.mapa-empty--compact span { display: none; }

/*---detalhes da aula: treino de grupos do dia em modo leitura (sem botoes de acao nem feedback;
    abrir paginas a partir do popup deixava-as por tras dele)---*/
#cd_wod_feed { padding-left: 6px; padding-right: 6px; }
#cd_wod_feed .wod-actions,
#cd_wod_feed .wod-fb { display: none !important; }
/* SECRETARIA — cartões com degradê (secções Easypay / Banco) */
.sec-grad-card { margin: 14px 12px; padding: 14px 12px 10px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 26%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--f7-theme-color) 12%, var(--f7-page-bg-color)) 0%, var(--f7-page-bg-color) 52%, color-mix(in srgb, var(--f7-theme-color) 5%, var(--f7-page-bg-color)) 100%); }
.sec-grad-card.sec-grad-alt { background: linear-gradient(200deg, color-mix(in srgb, var(--f7-theme-color) 10%, var(--f7-page-bg-color)) 0%, var(--f7-page-bg-color) 55%, color-mix(in srgb, var(--f7-theme-color) 6%, var(--f7-page-bg-color)) 100%); }
.sec-grad-tit { display: flex; align-items: center; gap: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--f7-theme-color); margin: 2px 6px 10px; }
.sec-grad-tit .icon, .sec-grad-tit svg { width: 18px; height: 18px; }
.sec-grad-card .list { margin-left: 0; margin-right: 0; }
.sec-grad-card .block, .sec-grad-card .block-title { margin-left: 6px; margin-right: 6px; }
.sec-grad-card .card.sec-card { margin: 8px 0; }
.sec-grad-card .sec-check { margin-left: 6px; margin-right: 6px; }
.sec-grad-card .list ul { background: transparent; }

/* HOME — convite ao débito direto (dd_invite) */
/*---margem 5px de cada lado = a mesma largura dos outros cartoes da home (alertas, marcacoes,
     "traz um amigo"); estava a 12px e era o unico mais estreito (Miguel, 2026-09-08)---*/
.ddi-card { margin: 10px 5px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 30%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--f7-theme-color) 14%, var(--f7-page-bg-color)) 0%, var(--f7-page-bg-color) 60%); box-shadow: none; }
.ddi-top { display: flex; align-items: flex-start; gap: 12px; }
.ddi-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent); }
.ddi-ic .icon, .ddi-ic svg { width: 20px; height: 20px; color: var(--f7-theme-color); }
.ddi-tit { font-size: 15px; text-transform: uppercase; letter-spacing: .3px; color: var(--f7-theme-color); }
.ddi-sub { font-size: 12.5px; line-height: 17px; opacity: .7; margin-top: 3px; }
.ddi-acoes { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ddi-no { font-size: 12.5px; opacity: .6; color: inherit; padding: 6px 12px; width: auto; white-space: nowrap; }
.ddi-yes { flex: 1; }

/* SECRETARIA — faturas + visualizador de PDF */
.sec-fat-val { font-size: 13px; color: var(--f7-theme-color); white-space: nowrap; }
.sec-pdf-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(128,128,128,.3); background: var(--f7-page-bg-color); }
.sec-pdf-bar .link { width: auto; font-size: 13px; }
.sec-pdf-tit { flex: 1; text-align: center; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-pdf-content { padding: 0; }
.sec-pdf-frame { width: 100%; height: 100%; border: 0; display: block; background: #f2f2f2; }
/* SECRETARIA — faturas: hairline a separar cada fatura (a última sem linha) */
.sec-fat-lista li + li .item-content { border-top: 1px solid rgba(128,128,128,.22); }
/* SECRETARIA — leitor de textos legais (acordos) */
.sec-txt-content { padding: 16px 18px 40px; font-size: 13.5px; line-height: 20px; }
.sec-txt-content h1, .sec-txt-content h2, .sec-txt-content h3 { font-size: 15px; font-weight: 500; margin: 18px 0 8px; color: var(--f7-theme-color); }
.sec-txt-content p { margin: 0 0 10px; }
.sec-txt-content ul, .sec-txt-content ol { padding-left: 20px; margin: 0 0 10px; }
/* SECRETARIA — marcador de documento novo */
.sec-novo { display: inline-block; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--wp-on-theme, #fff); background: var(--f7-theme-color); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.sec-ic-novo { border-color: var(--f7-theme-color); }
.sec-pdf-share { width: auto; }
.sec-pdf-share .icon, .sec-pdf-share svg { width: 18px; height: 18px; }

/* SECRETARIA — pesquisa, chips de ano e resumo anual (faturas) */
.sec-busca-wrap { position: relative; margin: 12px 16px 4px; }
.sec-busca-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: .45; pointer-events: none; }
.sec-busca { width: 100%; height: 38px; padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid rgba(128,128,128,.3); background: transparent; color: inherit; font-size: 13.5px; }
.sec-anos { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sec-anos::-webkit-scrollbar { display: none; }
.sec-ano-chip { flex-shrink: 0; font-size: 12.5px; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); color: inherit; opacity: .7; width: auto; }
.sec-ano-chip.sec-ano-on { border-color: var(--f7-theme-color); color: var(--f7-theme-color); opacity: 1; }
.sec-ano-cab { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 18px 2px; }
.sec-ano-num { font-size: 15px; color: var(--f7-theme-color); }
.sec-ano-tot { font-size: 13.5px; text-align: right; }
.sec-ano-tot span { display: block; font-size: 11px; opacity: .5; }
.sec-vazio-busca { text-align: center; margin: 40px 20px; font-size: 13px; opacity: .55; }
/* SECRETARIA — dados de faturação */
.sec-df-card { margin-bottom: 6px; }
.sec-df-resumo { display: flex; align-items: center; gap: 10px; margin: 0 6px; font-size: 12.5px; }
.sec-df-resumo > span { flex: 1; opacity: .75; line-height: 17px; }
.sec-df-edit { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 12px; color: var(--f7-theme-color); width: auto; }
.sec-df-edit .icon, .sec-df-edit svg { width: 14px; height: 14px; }

/* SECRETARIA — caixa de pesquisa: seletor mais específico porque os resets de
   input do Framework7 (border:none) ganhavam ao seletor de classe única */
.page-content .sec-busca-wrap input.sec-busca {
	width: 100%; height: 40px; box-sizing: border-box;
	padding: 0 16px 0 40px;
	border: 1px solid rgba(128,128,128,.4); border-radius: 999px;
	background: transparent; color: inherit; font-size: 13.5px; line-height: 38px;
	-webkit-appearance: none; appearance: none; outline: none;
}
.page-content .sec-busca-wrap input.sec-busca:focus { border-color: var(--f7-theme-color); }
.page-content .sec-busca-wrap input.sec-busca::placeholder { opacity: .5; }
/* SECRETARIA — loader do visualizador de PDF */
.sec-pdf-carga { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 2; }
.sec-pdf-carga-tx { font-size: 12.5px; opacity: .6; }
.sec-pdf-content { position: relative; }
.sec-pdf-frame { transition: opacity 200ms ease; }

/* NOVIDADES DA APP (aberto pelo sino) */
.nov-card { margin: 16px 14px; padding: 24px 20px 18px; border-radius: 22px; text-align: center; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 28%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--f7-theme-color) 14%, var(--f7-page-bg-color)) 0%, var(--f7-page-bg-color) 58%, color-mix(in srgb, var(--f7-theme-color) 6%, var(--f7-page-bg-color)) 100%); }
.nov-hero { position: relative; display: flex; justify-content: center; margin-bottom: 16px; }
.nov-ic { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent); background: color-mix(in srgb, var(--f7-theme-color) 8%, transparent); }
.nov-ic .icon, .nov-ic svg { width: 34px; height: 34px; color: var(--f7-theme-color); }
.nov-brilho .nov-ic { animation: nov-flutua 3.2s ease-in-out infinite; }
@keyframes nov-flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.nov-spark { position: absolute; color: var(--f7-theme-color); opacity: 0; font-size: 14px; }
.nov-brilho .nov-spark { animation: nov-faisca 2.6s ease-in-out infinite; }
.nov-spark.s1 { left: calc(50% - 58px); top: 6px; animation-delay: 0s; }
.nov-spark.s2 { left: calc(50% + 44px); top: 16px; font-size: 11px; animation-delay: .7s; }
.nov-spark.s3 { left: calc(50% + 30px); top: 58px; font-size: 12px; animation-delay: 1.4s; }
@keyframes nov-faisca { 0%,100% { opacity: 0; transform: scale(.6); } 45% { opacity: .9; transform: scale(1); } }
.nov-tit { font-size: 19px; color: var(--f7-theme-color); margin-bottom: 8px; }
.nov-txt { font-size: 13.5px; line-height: 19px; opacity: .78; }
.nov-onde { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(128,128,128,.35); }
.nov-onde-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .5; }
.nov-onde-val { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 14px; color: var(--f7-theme-color); }
.nov-onde-val .icon, .nov-onde-val svg { width: 16px; height: 16px; }
.nov-btn { margin-top: 16px; }
.nov-data { margin-top: 12px; font-size: 10.5px; opacity: .4; }

/* NOVIDADES — animações (palco + cena da Secretaria) */
.nva-palco { position: relative; width: 100%; max-width: 260px; margin: 0 auto 18px; }
.nva-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* pasta */
.nva-pasta-tras   { fill: color-mix(in srgb, var(--f7-theme-color) 18%, transparent); stroke: color-mix(in srgb, var(--f7-theme-color) 45%, transparent); stroke-width: 2; }
.nva-pasta-frente { fill: color-mix(in srgb, var(--f7-theme-color) 30%, var(--f7-page-bg-color)); stroke: var(--f7-theme-color); stroke-width: 2; }
.nva-pasta-risco  { stroke: color-mix(in srgb, var(--f7-theme-color) 40%, transparent); stroke-width: 1.5; stroke-linecap: round; }

/* folhas */
.nva-folha  { fill: var(--f7-page-bg-color); stroke: color-mix(in srgb, var(--f7-theme-color) 55%, transparent); stroke-width: 1.8; }
.nva-linhas { stroke: color-mix(in srgb, var(--f7-theme-color) 45%, transparent); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.nva-selo   { fill: color-mix(in srgb, var(--f7-theme-color) 35%, transparent); }
.nva-banco      { stroke: color-mix(in srgb, var(--f7-theme-color) 60%, transparent); stroke-width: 2; stroke-linecap: round; fill: none; }
.nva-banco-topo { fill: color-mix(in srgb, var(--f7-theme-color) 45%, transparent); }
.nva-assina { stroke: var(--f7-theme-color); stroke-width: 2.2; fill: none; stroke-linecap: round;
	stroke-dasharray: 44; stroke-dashoffset: 44; animation: nva-escreve 5.2s ease-in-out infinite; }

/* os papéis nascem dentro da pasta e abrem em leque */
.nva-papel { transform-origin: 100px 100px; animation: 5.2s ease-in-out infinite; }
.nva-p1 { animation-name: nva-sai1; }
.nva-p2 { animation-name: nva-sai2; }
.nva-p3 { animation-name: nva-sai3; }
@keyframes nva-sai1 {
	0%, 4%   { transform: translateY(30px) rotate(0deg); opacity: 0; }
	18%, 86% { transform: translateY(0) rotate(-13deg); opacity: 1; }
	96%, 100%{ transform: translateY(30px) rotate(0deg); opacity: 0; }
}
@keyframes nva-sai2 {
	0%, 7%   { transform: translateY(34px) rotate(0deg); opacity: 0; }
	22%, 88% { transform: translateY(0) rotate(0deg); opacity: 1; }
	97%, 100%{ transform: translateY(34px) rotate(0deg); opacity: 0; }
}
@keyframes nva-sai3 {
	0%, 10%  { transform: translateY(30px) rotate(0deg); opacity: 0; }
	26%, 90% { transform: translateY(0) rotate(13deg); opacity: 1; }
	98%, 100%{ transform: translateY(30px) rotate(0deg); opacity: 0; }
}
@keyframes nva-escreve {
	0%, 26%  { stroke-dashoffset: 44; }
	42%, 86% { stroke-dashoffset: 0; }
	96%, 100%{ stroke-dashoffset: 44; }
}
.nva-brilho { animation: nva-passa 5.2s ease-in-out infinite; }
@keyframes nva-passa {
	0%, 62%  { transform: translateX(0); }
	84%      { transform: translateX(300px); }
	100%     { transform: translateX(300px); }
}

/* faíscas */
.nva-faisca { position: absolute; color: var(--f7-theme-color); opacity: 0; font-size: 13px; animation: nva-faisca 5.2s ease-in-out infinite; }
.nva-faisca.f1 { left: 6%;  top: 8%;  animation-delay: .5s; }
.nva-faisca.f2 { right: 8%; top: 2%;  font-size: 11px; animation-delay: 1.2s; }
.nva-faisca.f3 { right: 2%; top: 46%; font-size: 12px; animation-delay: 1.9s; }
@keyframes nva-faisca {
	0%, 20%, 70%, 100% { opacity: 0; transform: scale(.6); }
	38%                { opacity: .95; transform: scale(1); }
}

/* acessibilidade: quem pediu menos movimento vê a cena parada, já montada */
@media (prefers-reduced-motion: reduce) {
	.nva-papel, .nva-assina, .nva-brilho, .nva-faisca { animation: none; }
	.nva-p1 { transform: rotate(-13deg); }
	.nva-p3 { transform: rotate(13deg); }
	.nva-assina { stroke-dashoffset: 0; }
	.nva-brilho { display: none; }
}
/* NOVIDADES — os papéis são SVG: sem transform-box o transform usa o sistema
   de coordenadas do SVG e a rotação sairia deslocada */
.nva-papel { transform-box: view-box; }

/* SECRETARIA — loader do PDF: o talão a ser impresso */
.secl-palco { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.secl-svg { width: 132px; height: auto; display: block; }

.secl-ranhura { fill: color-mix(in srgb, var(--f7-theme-color) 82%, #000); }
.secl-luz { fill: #fff; opacity: .35; animation: secl-pisca 1.1s ease-in-out infinite; }
@keyframes secl-pisca { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }

.secl-folha { fill: var(--f7-page-bg-color); stroke: color-mix(in srgb, var(--f7-theme-color) 55%, transparent); stroke-width: 1.6; }
.secl-l { fill: color-mix(in srgb, var(--f7-theme-color) 42%, transparent); }
.secl-l0 { fill: color-mix(in srgb, var(--f7-theme-color) 65%, transparent); }
.secl-total { fill: var(--f7-theme-color); }
.secl-corte { fill: none; stroke: color-mix(in srgb, var(--f7-theme-color) 40%, transparent); stroke-width: 1.4; stroke-dasharray: 3 3; }

/* o papel sai da ranhura, fica um instante e recomeça */
.secl-papel { animation: secl-imprime 3.4s cubic-bezier(.25,.9,.35,1) infinite; }
@keyframes secl-imprime {
	0%       { transform: translateY(-104px); }
	55%, 84% { transform: translateY(0); }
	100%     { transform: translateY(-104px); }
}
/* cada linha "aparece" à medida que sai — como se estivesse a ser escrita */
.secl-l { opacity: 0; animation: secl-linha 3.4s ease-out infinite; }
.secl-l0 { animation-delay: .30s; }
.secl-l1 { animation-delay: .55s; }
.secl-l2 { animation-delay: .70s; }
.secl-l3 { animation-delay: .85s; }
.secl-l4 { animation-delay: 1.00s; }
.secl-l5 { animation-delay: 1.15s; }
.secl-l6 { animation-delay: 1.30s; }
@keyframes secl-linha {
	0%, 6%   { opacity: 0; }
	14%, 84% { opacity: 1; }
	95%, 100%{ opacity: 0; }
}
/* o total carimba-se (pequeno salto de escala) */
.secl-total { transform-box: fill-box; transform-origin: center; animation: secl-linha 3.4s ease-out infinite, secl-carimba 3.4s ease-out infinite; animation-delay: 1.30s; }
@keyframes secl-carimba {
	0%, 12%  { transform: scale(1.5); }
	20%, 100%{ transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.secl-papel, .secl-l, .secl-total, .secl-luz { animation: none; }
	.secl-papel { transform: translateY(0); }
	.secl-l { opacity: 1; }
}

/* SECRETARIA — popup com barra própria (débito direto via banco): a barra fica
   fixa em cima e o page-content ocupa o resto (sem o height:100% do F7 a
   empurrar o fundo para fora do ecrã) */
.sec-pop-page { display: flex; flex-direction: column; }
.sec-pop-page > .page-content { flex: 1 1 auto; height: auto; min-height: 0; }

/* PAINEL LATERAL — faixa da foto+nome do membro. Fica fora do .page-content (não
   faz scroll), por isso precisa de altura reservada + fundo opaco + z-index acima
   do scroller: sem isso os itens do menu passavam por cima do nome/foto ao rolar. */
.panel-user-bar {
	position: relative;
	z-index: 10;
	height: 50px;
	width: 100%;
	flex-shrink: 0;
	background: var(--f7-page-bg-color);
}
.panel-user-foto {
	position: absolute;
	top: -45px;
	padding-left: 20px;
}
.panel-user-nome {
	position: absolute;
	top: 5px;
	left: 125px;
	right: 10px;
	text-align: left;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* WOD — barra de ações com 4 botões: só ícones (com texto ficava "O teu result…").
   O valor do resultado e os contadores mantêm-se; o texto vai no title. */
.wod-acts-icons .wod-act > span:not(.wod-result-val):not(.wod-result-tag):not(.wod-board-count) {
	display: none;
}
.wod-acts-icons .wod-act { gap: 0; }
.wod-acts-icons .wod-act .icon { width: 20px; height: 20px; }

/* AULAS — chips do filtro por tipo de aula: ponto com a cor do tipo (como na app antiga) */
.filtro-chip { display: inline-flex; align-items: center; gap: 6px; }
.filtro-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* SALA DE EXERCÍCIO — popup "Ver vagas" (manchas horárias) */
.vagas-head { padding: 14px 16px; }
.vagas-head-t { display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 15px; }
.vagas-head-ic { width: 24px; height: 24px; }
.vagas-head-s { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; opacity: .7; text-transform: uppercase; }
.vagas-tit { margin-bottom: 2px; }
.vagas-sub { padding: 0 16px 4px; opacity: .6; }
.vagas-list { padding: 4px 0; }
.vagas-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(128,128,128,.15); }
.vagas-row:last-child { border-bottom: 0; }
.vagas-row-l { flex: 1 1 auto; min-width: 0; }
.vagas-hora { font-size: 15px; }
.vagas-bar { margin-top: 5px; height: 5px; border-radius: 3px; background: rgba(128,128,128,.2); overflow: hidden; }
.vagas-bar-in { display: block; height: 100%; border-radius: 3px; }
.vagas-row-n { flex: 0 0 auto; font-size: 12px; opacity: .7; }
.vagas-row-r { flex: 0 0 auto; }
.vagas-but { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12px; text-transform: uppercase; }
.vagas-but.is-book { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.vagas-but.is-off { background: rgba(244,67,54,.15); color: #f44336; }
.vagas-but.is-block { background: rgba(128,128,128,.15); color: var(--f7-text-color); opacity: .8; }
.vagas-but .icon { width: 16px; height: 16px; }
.vagas-done { font-size: 12px; text-transform: uppercase; opacity: .5; }

/* SALA DE EXERCÍCIO — janela da sessão do membro (log_aulas), na MESMA linha dos
   icones do cartao: tudo centrado na vertical e a barra ocupa a largura que sobra */
.insc-foot { display: flex; align-items: center; }
.insc-foot .icon-link { display: inline-flex; align-items: center; }
.wk-sessao { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding-right: 14px; }
.wk-sessao-h { font-size: 11px; opacity: .6; white-space: nowrap; letter-spacing: .3px; }
.wk-sessao-bar { flex: 1 1 auto; min-width: 30px; height: 4px; border-radius: 2px; background: rgba(128,128,128,.22); overflow: hidden; }
.wk-sessao-bar span { display: block; height: 100%; border-radius: 2px; }
.item-title-wk { flex-grow: 1; min-width: 0; }

/* LISTA DE ESPERA — painel logo a seguir a marcar (pages/classes/lista_espera.php).
   A ideia: o membro percebe num relance ONDE está na fila e o que falta para entrar. */
/* padding-top NAO se define aqui: o painel tem navbar e e o F7 que calcula o desvio dela
   (um padding:0 ... no atalho apagava-o e o conteudo passava por baixo da barra).
   SEM display:flex — no iOS um contentor com -webkit-overflow-scrolling:touch e flex deixa
   de rolar (bug do WebKit): o painel ficava preso, sem scroll e sem forma de sair dele. */
.wl-content { padding-left: 20px; padding-right: 20px;
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.wl-hero { text-align: center; padding: 22px 0 6px; }
.wl-fila { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 18px; }
.wl-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(128,128,128,.35);
	animation: wlpop .35s ease both; }
.wl-mais { font-size: 12px; opacity: .5; margin-right: 2px; }
.wl-eu { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center;
	justify-content: center; color: #fff; animation: wlin .45s .35s ease both; }
.wl-eu .icon { width: 19px; height: 19px; }
@keyframes wlpop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes wlin  { from { opacity: 0; transform: translateX(14px) scale(.7); } to { opacity: 1; transform: none; } }
.wl-pos { font-size: 54px; line-height: 1; font-weight: 300; }
.wl-pos-o { font-size: 24px; vertical-align: super; opacity: .6; }
.wl-pos-lbl { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; opacity: .55; margin-top: 2px; }
.wl-aula { margin: 22px 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(128,128,128,.10); }
.wl-aula-n { font-size: 15px; text-transform: uppercase; }
.wl-aula-h { font-size: 12px; opacity: .6; text-transform: uppercase; margin-top: 2px; }
.wl-falta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
	background: rgba(var(--f7-theme-color-rgb), .10); color: var(--f7-theme-color); font-size: 14px; }
.wl-falta .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.wl-passos { margin: 18px 0 6px; }
.wl-passo { display: flex; align-items: flex-start; gap: 12px; padding: 7px 2px; font-size: 14px; }
.wl-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(128,128,128,.18);
	font-size: 12px; display: inline-flex; align-items: center; justify-content: center; opacity: .8; }
.wl-avisos { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px;
	border-radius: 12px; color: var(--f7-text-color); }
.wl-avisos.is-ok  { background: rgba(76,175,80,.12); }
.wl-avisos.is-off { background: rgba(255,152,0,.14); }
.wl-avisos .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.wl-avisos-t { font-size: 14px; }
.wl-avisos-s { font-size: 12px; opacity: .7; margin-top: 1px; word-break: break-word; }
.wl-chev { margin-left: auto; opacity: .5; }
/* aviso em destaque: nao confiar so na notificacao — confirmar na app no fim do prazo */
.wl-check { display: flex; gap: 12px; margin-top: 14px; padding: 13px 14px; border-radius: 12px;
	background: rgba(255,152,0,.13); border: 1px solid rgba(255,152,0,.35); }
.wl-check .icon { width: 20px; height: 20px; flex: 0 0 auto; color: #ff9800; margin-top: 1px; }
.wl-check-t { font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: #ff9800; }
.wl-check-s { font-size: 13px; opacity: .85; line-height: 1.5; margin-top: 3px; }
.wl-check-s strong { font-weight: 500; }
.wl-ok { margin-top: 22px; }

/* ============================================================
   ATIVIDADES EM DESTAQUE — cartoes "Moldura" (2 colunas)
   Moldura em degrade dourado -> cor do tema; poster quadrado com o
   TITULO NO TOPO sobre um fade para escuro; rodape com a mesma
   informacao da linha normal. A moldura e a "estrela" do destaque.
   ============================================================ */
.atv-dst-sec { display: flex; align-items: center; gap: 8px; margin: 12px 14px 8px; }
.atv-dst-sec svg { width: 15px; height: 15px; color: #E8A013; }
.atv-dst-sec span { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .6; }
.atv-dst-sec:after { content: ''; flex: 1; height: 1px;
	background: linear-gradient(90deg, rgba(128,128,128,.3), transparent); }
/* minmax(0,1fr): sem isto cada coluna tem min-width:auto e um texto comprido no rodape
   empurra a grelha para fora do ecra — assim cada cartao e SEMPRE metade da largura util */
/* gap/margens apertados (afinacao): mais largura util por cartao = mais informacao a caber */
.atv-dst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
	margin: 0 10px 14px; max-width: calc(100% - 20px); overflow: hidden; }
/* moldura DISCRETA: 1px, um toque de dourado no canto superior esquerdo a fundir para o
   hairline normal dos cartoes — o destaque nota-se sem gritar (afinacao 2026-08-07) */
.atv-dst-card { padding: 1px; border-radius: 18px; cursor: pointer; min-width: 0; max-width: 100%;
	background: linear-gradient(150deg, rgba(245,214,61,.85), rgba(232,160,19,.45) 30%, rgba(128,128,128,.3) 65%); }
/* o interior PREENCHE o cartao: os cartoes da mesma linha esticam a altura da mais alta
   (rodape com 1 ou 2 linhas de estado) e, sem isto, o degrade da moldura assomava por baixo
   do que tivesse menos conteudo. O rodape absorve a folga e fica igual em todos. */
.atv-dst-card { display: flex; }
.atv-dst-in { background: var(--f7-card-bg-color, var(--f7-page-bg-color)); border-radius: 16px; overflow: hidden;
	min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.atv-dst-top { flex: 0 0 auto; }
.atv-dst-foot { flex: 1 1 auto; }
.atv-dst-top { position: relative; aspect-ratio: 1 / 1; }
.atv-dst-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* fade para escuro NO TOPO: e o que garante a leitura do titulo claro sobre qualquer poster */
.atv-dst-fade { position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.3) 44%, rgba(0,0,0,0) 64%); }
/* titulo em MAIUSCULAS via CSS (o texto guardado mantem-se normal, regra da casa) */
.atv-dst-tit { position: absolute; top: 9px; left: 11px; right: 40px; color: #fff;
	font-size: 12.5px; font-weight: 500; line-height: 1.3; text-transform: uppercase; letter-spacing: .4px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.atv-dst-fav { position: absolute; top: 4px; right: 4px; z-index: 2; margin-left: 0; color: rgba(255,255,255,.8); }
.atv-dst-type { position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 999px;
	background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; color: #fff; }
.atv-dst-type svg { width: 14px; height: 14px; }
.atv-dst-new { top: auto; bottom: 10px; right: 8px; left: auto; }
.atv-dst-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px 8px; }
.atv-dst-club { font-size: 10.5px; opacity: .6; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* o ESTADO tem prioridade (fica inteiro ate 62% da largura); e o nome da box que encolhe */
.atv-dst-stat { flex: 0 0 auto; max-width: 62%; display: flex; flex-direction: column; align-items: flex-end; }
.atv-dst-stat .atv-sb-sl { font-size: 10px; letter-spacing: .3px; text-transform: uppercase;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atv-dst-dim .atv-dst-top, .atv-dst-dim .atv-dst-foot { opacity: .5; }

/* poster PADRAO em tema claro: fade claro + letras escuras (posters reais ficam sempre
   com fade escuro e letras claras, porque o brilho da imagem nao e controlavel) */
.atv-dst-lite .atv-dst-fade { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.5) 44%, rgba(255,255,255,0) 64%); }
.atv-dst-lite .atv-dst-tit { color: #1c1c1e; }
.atv-dst-lite .atv-dst-fav { color: rgba(0,0,0,.4); }
.atv-dst-lite .atv-dst-type { background: rgba(255,255,255,.6); color: #444; }

/* ============================================================
   ATIVIDADES — DETALHE. As classes .atvm-* eram usadas no HTML mas nunca tinham sido
   definidas: dai os icones colados/sobrepostos ao texto. Sistema criado de raiz, no
   idioma visual da app (hairlines, degrades, sem blur e sem sombras).
   ============================================================ */

/* --- cartao de seccao: degrade quase impercetivel + hairline.
   margin-left/right a 0 ANULA a margem propria do .card do F7: os cartoes passam a ter
   exatamente a largura do POSTER (so o padding de 12px da pagina), o que devolve ~32px
   de largura util ao texto — e alinha tudo pela mesma vertical. --- */
.atvm-section { border-radius: 16px; margin: 0 0 12px; overflow: hidden;
	border: 1px solid rgba(128,128,128,.28);
	background: linear-gradient(158deg,
		color-mix(in srgb, var(--f7-theme-color) 7%, transparent) 0%,
		transparent 42%); }

/* --- titulo de seccao: icone em placa + rotulo + hairline a esticar ate ao fim --- */
.atvm-section-title { display: flex; align-items: center; gap: 10px;
	font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .8; }
.atvm-section-title:after { content: ''; flex: 1; height: 1px;
	background: linear-gradient(90deg, rgba(128,128,128,.35), transparent); }
.atvm-sec-icon { width: 32px; height: 32px; padding: 7px; border-radius: 10px;
	box-sizing: border-box; flex: 0 0 auto; color: var(--f7-theme-color);
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--f7-theme-color) 26%, transparent),
		color-mix(in srgb, var(--f7-theme-color) 6%, transparent)); }

/* --- DATAS como linha do tempo: os pontos ficam ligados por um trilho em degrade --- */
.atvm-date-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; position: relative; }
.atvm-date-row:not(:last-child):after { content: ''; position: absolute; left: 15px;
	top: calc(50% + 17px); bottom: -10px; width: 2px; border-radius: 2px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--f7-theme-color) 45%, transparent), transparent); }
.atvm-date-icon { width: 32px; height: 32px; padding: 7px; border-radius: 999px;
	box-sizing: border-box; flex: 0 0 auto; color: var(--f7-theme-color); position: relative; z-index: 1;
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--f7-theme-color) 22%, transparent),
		color-mix(in srgb, var(--f7-theme-color) 5%, transparent)); }
.atvm-date-label { font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; opacity: .55; }
.atvm-date-val { font-size: 15px; padding-top: 1px; }

.atvm-poster { width: 100%; border-radius: 12px; display: block; }
/* cartaz tocavel: abre no visualizador com zoom (photo browser do F7) */
.atvm-poster-wrap { position: relative; cursor: zoom-in; }
.atvm-poster-zoom { position: absolute; right: 10px; bottom: 10px;
	width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.atvm-poster-zoom svg { width: 15px; height: 15px; }

/* foto do atleta na montagem da equipa (resultados da pesquisa + membros já escolhidos) */
.insc-team-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
	flex: 0 0 auto; background: rgba(128,128,128,.12); }
.item-media .insc-team-foto { margin: 0; }

/* PICKERS (input readonly que abre um picker): o browser cinzenta o texto de qualquer campo
   readonly, mas um picker não é um campo desativado — é uma escolha já feita, e tem de se ler
   como as outras. Regra app-wide para não voltar a nascer uma cópia por cada página nova
   (havia já uma em #atv-inner).
   ATENÇÃO a quem escrever um picker sobre fundo próprio (fotografia, cartão escuro): não chega
   declarar `color` na regra mais específica — o -webkit-text-fill-color daqui continua a valer e
   ganha ao color. Tem de se declarar TAMBÉM o -webkit-text-fill-color lá (ver .onb-priv-box). */
.picker-from-select {
	color: var(--f7-text-color); -webkit-text-fill-color: var(--f7-text-color);
	background-color: transparent; border: 0; box-shadow: none; }

/* ===== LOTAÇÃO ESGOTADA ===================================================================
   Os lugares enchem-se um a um e o carimbo cai no fim. A ideia é que o membro VEJA a lotação
   a fechar-se, em vez de ler uma frase. Só transform/opacity e traços — a app não usa sombras
   nem desfoques. */
.atvm-sold { border-left: 3px solid #f44336; position: relative; overflow: hidden; }

/* cartaz em pano de fundo. Camada própria porque a opacidade tem de atingir SÓ a imagem —
   aplicada ao cartão levava o texto e o carimbo atrás dela. */
.atvm-sold-bg { position: absolute; inset: 0; background-image: var(--atvm-sold-bg);
	background-size: cover; background-position: center; opacity: .15; pointer-events: none; }
.atvm-sold > .card-content { position: relative; z-index: 1; }
.atvm-sold-anim { position: relative; padding: 22px 0 10px; display: flex;
	flex-direction: column; align-items: center; }

.atvm-sold-seats { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px;
	width: 100%; max-width: 260px; }
.atvm-seat { display: block; aspect-ratio: 1; border-radius: 3px;
	border: 1px solid rgba(128,128,128,.4); background: transparent;
	animation: atvmSeatFill .4s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes atvmSeatFill {
	0%   { background: transparent;  border-color: rgba(128,128,128,.4); transform: scale(1); }
	55%  { background: #f44336;      border-color: #f44336;              transform: scale(1.35); }
	100% { background: #f44336;      border-color: #f44336;              transform: scale(1); }
}

/* anel que se abre no momento em que o último lugar fecha */
.atvm-sold-ring { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px;
	margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid #f44336;
	opacity: 0; animation: atvmRing .9s cubic-bezier(.2,.7,.3,1) 1.35s both; }
@keyframes atvmRing {
	0%   { transform: scale(.3); opacity: .8; }
	100% { transform: scale(4.6); opacity: 0; }
}

/* o carimbo: entra grande e torto, assenta com um ressalto curto */
.atvm-sold-stamp { margin-top: 20px; font-size: 26px; letter-spacing: 4px;
	text-transform: uppercase; color: #f44336; padding: 8px 20px; border-radius: 8px;
	border: 3px solid #f44336; transform: rotate(-7deg);
	animation: atvmStamp .5s cubic-bezier(.2,1.4,.4,1) 1.3s both; }
@keyframes atvmStamp {
	0%   { transform: rotate(-24deg) scale(2.6); opacity: 0; }
	60%  { transform: rotate(-7deg)  scale(.94); opacity: 1; }
	100% { transform: rotate(-7deg)  scale(1);   opacity: 1; }
}

.atvm-sold-txt { font-size: 13px; line-height: 1.55; opacity: .75; text-align: center;
	padding-top: 18px; }

/* variante por escalão: sem espetáculo, é informação */
.atvm-sold-head { display: flex; align-items: center; gap: 10px; }
.atvm-sold-head svg { width: 22px; height: 22px; color: #f44336; flex: 0 0 auto; }
.atvm-sold-tit { font-size: 15px; text-transform: uppercase; color: #f44336; letter-spacing: .3px; }
.atvm-sold-head + .atvm-sold-txt { text-align: left; padding-top: 10px; }
.atvm-sold-lista { margin-top: 14px; border-top: 1px solid rgba(128,128,128,.25); }
.atvm-sold-lin { display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.15); font-size: 13px; }
.atvm-sold-esc { text-transform: uppercase; opacity: .85; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atvm-sold-vag { flex: 0 0 auto; opacity: .7; font-variant-numeric: tabular-nums; }
.atvm-sold-vag.zero { color: #f44336; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.atvm-seat { animation: none; background: #f44336; border-color: #f44336; }
	.atvm-sold-ring { display: none; }
	.atvm-sold-stamp { animation: none; }
}

/* --- equipa por completar: aviso encostado ao código, que é a ação que o resolve --- */
.atvm-inc { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
	padding: 12px 14px; border-radius: 12px; background: rgba(255,152,0,.1);
	border: 1px solid rgba(255,152,0,.35); }
.atvm-inc svg { width: 19px; height: 19px; flex: 0 0 auto; color: #ff9800; margin-top: 1px; }
.atvm-inc-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #ff9800; }
.atvm-inc-txt { font-size: 12.5px; line-height: 1.5; opacity: .8; padding-top: 4px; }
.atvm-inc + .atvm-cod { margin-top: 8px; }
/* aviso a piscar 3x ao chegar ao passo do pagamento vindo de uma inscricao acabada de fazer:
   e a unica altura em que o membro TEM mesmo de reparar no prazo. Sem sombra nem blur — o
   realce e so o tint de fundo e a borda a ganharem corpo (regra: fios finos e tints). */
@keyframes atvm-inc-flash {
	0%, 100% { background: rgba(255,152,0,.1);  border-color: rgba(255,152,0,.35); }
	50%      { background: rgba(255,152,0,.34); border-color: rgba(255,152,0,1); }
}
.atvm-inc.is-flash { animation: atvm-inc-flash .55s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .atvm-inc.is-flash { animation: none; } }

/* --- código de adesão à equipa (o capitão distribui-o a atletas de outras boxes) --- */
.atvm-cod { margin-top: 14px; padding: 14px; border-radius: 12px;
	border: 1px dashed rgba(128,128,128,.4); text-align: center; }
.atvm-cod-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .6; }
.atvm-cod-num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 30px; letter-spacing: 5px; color: var(--f7-theme-color); padding: 6px 0 8px; }
.atvm-cod-txt { font-size: 12px; line-height: 1.5; opacity: .7; }
.atvm-cod-acts { display: flex; align-items: center; justify-content: center; gap: 22px;
	flex-wrap: wrap; margin-top: 12px; }
.atvm-cod-copy { display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; text-transform: uppercase; }
.atvm-cod-copy svg { width: 15px; height: 15px; }
.atvm-cod-mail { margin-top: 14px; text-align: left;
	border-top: 1px solid rgba(128,128,128,.2); padding-top: 12px; }

/* ===== PASSOS DA INSCRIÇÃO (stepper) =====================================================
   Barra fixa no topo com os passos; o conteúdo entra por baixo, a deslizar da direita
   (avançar) ou da esquerda (recuar). Substitui o empilhamento da app antiga, onde cada
   passo abria por baixo do anterior e a página crescia sem fim. */
.atvs { margin-bottom: 12px; }

/* barra: cola ao topo do scroll da página. O top é a altura da navbar e não 0 — esta página
   TEM navbar, e com top:0 a barra colava por baixo dela (ficava escondida). Mesmo motivo
   que levou ao top da .wk-como-bar.
   O encosto é calculado AQUI (navbar + safe area) e não herdado do --f7-page-navbar-offset:
   esse varia com o contexto da página (navbar grande, subnavbar) e quando vinha maior do que
   a navbar a barra prendia a meio do ecrã, com o conteúdo a passar-lhe por CIMA no
   intervalo até à navbar. */
.atvs-bar { position: sticky;
	/* --atvs-ajuste: correção MEDIDA no ecrã (Miguel, 2026-08-12). A conta teórica
	   (safe area + altura da navbar) prendia a barra ~58px ABAIXO do rebordo da navbar e
	   deixava passar uma faixa de conteúdo pelo meio. Fica como variável: se algum dia sair
	   do sítio noutro contexto, mexe-se aqui e não na fórmula. */
	--atvs-ajuste: 58px;
	top: calc(var(--f7-safe-area-top, 0px) + var(--f7-navbar-height, 56px) - var(--atvs-ajuste));
	z-index: 20; padding: 10px 4px 12px; background: var(--f7-page-bg-color); }
/* tapa o intervalo até à navbar: o que rola para cima desaparece atrás disto, nunca entre a
   barra e a navbar (meia-linha de texto a espreitar nesse fio era pior do que nada) */
.atvs-bar::before { content: ''; position: absolute; left: -12px; right: -12px; bottom: 100%;
	height: 14px; background: var(--f7-page-bg-color); }
.atvs-bar::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: 0;
	height: 1px; background: rgba(128,128,128,.25); }

/* calha + preenchimento: a linha atrás dos números */
.atvs-track { position: absolute; left: 0; right: 0; top: 27px; height: 2px;
	background: rgba(128,128,128,.25); margin: 0 12%; }
.atvs-fill { height: 100%; width: 0; background: var(--f7-theme-color);
	transition: width .35s cubic-bezier(.4,0,.2,1); }

.atvs-steps { position: relative; display: flex; }
.atvs-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
	align-items: center; gap: 6px; }
.atvs-dot { width: 26px; height: 26px; border-radius: 50%; display: flex;
	align-items: center; justify-content: center; font-size: 12px;
	background: var(--f7-page-bg-color); color: rgba(128,128,128,.8);
	border: 2px solid rgba(128,128,128,.35);
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.atvs-dot svg { width: 14px; height: 14px; }
.atvs-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .3px;
	color: rgba(128,128,128,.8); text-align: center; line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.atvs-step.is-done .atvs-dot { background: var(--f7-theme-color);
	border-color: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.atvs-step.is-active .atvs-dot { border-color: var(--f7-theme-color);
	color: var(--f7-theme-color); transform: scale(1.18); }
.atvs-step.is-active .atvs-lbl { color: var(--f7-theme-color); }
.atvs-step.is-done .atvs-lbl { color: var(--f7-theme-color); opacity: .75; }

/* corpo: só um painel visível; o que sai fica absoluto para a altura seguir o que entra */
.atvs-body { position: relative; overflow: hidden; padding-top: 12px; }
.atvs-pane { display: none; }
.atvs-pane.is-on { display: block; }
.atvs-pane.is-out { position: absolute; top: 12px; left: 0; width: 100%; display: block; }

@keyframes atvsInR  { from { transform: translateX(28%);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes atvsInL  { from { transform: translateX(-28%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes atvsOutL { from { transform: none; opacity: 1; } to { transform: translateX(-28%); opacity: 0; } }
@keyframes atvsOutR { from { transform: none; opacity: 1; } to { transform: translateX(28%);  opacity: 0; } }
.atvs-pane.anim-in-r  { animation: atvsInR  .3s cubic-bezier(.4,0,.2,1) both; }
.atvs-pane.anim-in-l  { animation: atvsInL  .3s cubic-bezier(.4,0,.2,1) both; }
.atvs-pane.anim-out-l { animation: atvsOutL .3s cubic-bezier(.4,0,.2,1) both; }
.atvs-pane.anim-out-r { animation: atvsOutR .3s cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
	.atvs-pane.anim-in-r, .atvs-pane.anim-in-l,
	.atvs-pane.anim-out-l, .atvs-pane.anim-out-r { animation: none; }
	.atvs-fill { transition: none; }
}

/* botões de navegação do passo. A margem lateral tem de ser a MESMA do .card do painel: o F7
   recolhe os cartões --f7-card-margin-horizontal de cada lado, e sem isto o botão saía mais
   largo do que o conteúdo que ele comanda. Usa-se a própria variável para acompanhar o tema. */
.atvs-nav { display: flex; gap: 8px; padding-top: 14px;
	margin-left: calc(var(--f7-card-margin-horizontal, 16px) + var(--f7-safe-area-left, 0px));
	margin-right: calc(var(--f7-card-margin-horizontal, 16px) + var(--f7-safe-area-right, 0px)); }
.atvs-nav .button { flex: 1; }
.atvs-nav .button.disabled { opacity: .4; pointer-events: none; }
.atvs-load { text-align: center; padding: 26px 0; }

/* --- contagem decrescente para abertura/fecho das inscrições (tipo monoespaçado para os
       dígitos não dançarem a cada segundo) --- */
.atv-cd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: 1px;
	color: var(--f7-theme-color); padding-top: 6px; }
.atv-cd.atv-cd-fim { color: #f44336; font-size: 13px; letter-spacing: 0; }
/* contagem sem texto de fim (cartao das datas): ao chegar a zero desaparece sem deixar buraco */
.atv-cd.atv-cd-fim:empty { display: none; }
/* contagem dentro de uma linha do cartao das datas: menor, alinhada com a data */
.atvm-date-cd { font-size: 13px; letter-spacing: .5px; padding-top: 3px; opacity: .9; }
/* PRAZO DE PAGAMENTO (cartao da inscricao pendente): rotulo a esquerda e contagem a direita,
   ao DOBRO do tamanho — e o dado mais importante do cartao enquanto o pagamento esta pendente */
.atvm-prazo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.atvm-prazo-lbl { font-size: 13px; opacity: .6; }
.atv-cd.atv-cd-prazo { font-size: 30px; padding-top: 0; line-height: 1.1; text-align: right; }
/* expirado: cabe a mensagem sem rebentar a linha */
.atv-cd.atv-cd-prazo.atv-cd-fim { font-size: 15px; }

/* --- ACOES PRINCIPAIS do separador DETALHES: inscrever + partilhar + calendario, numa linha ---
   Tres colunas iguais: cada botao ocupa um terco e o texto corta com reticencias em vez de
   partir a linha. O F7 forca width:100% nos .button, dai o flex:1 1 0 + min-width:0. */
.atvm-cta-bloco { margin-bottom: 12px; }
.atvm-cta-linha { display: flex; gap: 8px; align-items: stretch; }
.atvm-cta-linha .button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center;
	justify-content: center; gap: 6px; font-size: 12px; letter-spacing: .3px; padding: 0 8px; }
.atvm-cta-linha .button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atvm-cta-linha .button .icon { width: 16px; height: 16px; flex: 0 0 auto; }
/* botao desativado: continua legivel (diz o estado), so nao convida ao toque */
.atvm-cta-off { opacity: .5; pointer-events: none; }
.atvm-cta-nota { font-size: 12px; opacity: .7; text-align: center; padding-top: 8px; line-height: 1.4; }

/* --- DESCRICAO longa: cortada em 3 LINHAS com reticencias e "ver mais" (o corte e decidido
       pelo JS). O line-clamp poe as reticencias no fim da 3.a linha sozinho — com um max-height
       o texto ficava cortado a meio de uma letra, sem sinal nenhum de que continuava. --- */
.atvm-desc { padding-top: 10px; line-height: 1.5; font-size: 14px; }
.atvm-desc-cortada { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden; }
.atvm-desc-mais { display: inline-flex; align-items: center; gap: 5px; padding-top: 10px;
	font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--f7-theme-color); }
.atvm-desc-mais svg { width: 15px; height: 15px; }

/* --- EVENTOS: pastilhas de lugares --- */
.atvm-ev-chip-poucos { color: #E8A013;
	background: linear-gradient(140deg, rgba(232,160,19,.22), rgba(232,160,19,.06)); }
.atvm-ev-chip-cheio { color: #f44336;
	background: linear-gradient(140deg, rgba(244,67,54,.20), rgba(244,67,54,.05)); }

/* --- INSCRICAO COMO JUIZ (topo do separador INSCRICOES) --- */
.atvm-juiz { position: relative; border-left: 3px solid var(--f7-theme-color); margin-bottom: 12px; }
/* chamada de atencao ao chegar pelo atalho do separador DETALHES: uma pulsacao na cor do tema.
   Feita num pseudo-elemento por cima e nao no fundo do cartao (o cartao tem degrade proprio). */
.atvm-juiz-chama:after { content: ''; position: absolute; inset: 0; pointer-events: none;
	border-radius: inherit; background: var(--f7-theme-color); opacity: 0;
	animation: atvmJuizChama 1.1s ease 1; }
@keyframes atvmJuizChama { 0% { opacity: 0; } 30% { opacity: .24; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .atvm-juiz-chama:after { animation: none; } }
.atvm-juiz-lin { display: flex; align-items: center; gap: 14px; color: inherit; }
.atvm-juiz-ico { width: 30px; height: 30px; flex: 0 0 auto; color: var(--f7-theme-color); }
.atvm-juiz-pb { padding-bottom: 15px; }
.atvm-juiz-ok { color: #4caf50; }
.atvm-juiz-nok { color: #f44336; }
.atvm-juiz-tit { font-size: 13.5px; line-height: 1.45; text-transform: uppercase; letter-spacing: .2px; }
.atvm-juiz-seta { width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto; opacity: .5;
	transition: transform .25s ease; }
.atvm-juiz-abre.aberto .atvm-juiz-seta { transform: rotate(180deg); }
.atvm-juiz-falta { display: flex; align-items: center; gap: 7px; padding-top: 7px; font-size: 13px; }
.atvm-juiz-falta .icon { width: 15px; height: 15px; opacity: .7; }
.atvm-juiz-form { padding-top: 14px; }
.atvm-juiz-txt { font-size: 13px; line-height: 1.55; opacity: .8; padding-bottom: 12px; }
.atvm-juiz-cod { margin: 16px 0 0; }
.atvm-juiz-nota { color: #f44336; font-size: 11px; text-transform: uppercase;
	line-height: 1.4; padding-top: 8px; padding-bottom: 10px; text-align: center; }
/* atalho no separador DETALHES para a inscricao como juiz (que vive no separador INSCRICOES) */
.atvm-juiz-ir { width: auto; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }

/* localizacao: ver no mapa + partilhar, lado a lado */
.atvm-loc-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.atvm-loc-but { width: auto; display: inline-flex; align-items: center; gap: 6px; }

/* logotipos dos meios de pagamento ativos na atividade */
.atvm-pay-logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; }
.atvm-pay-logos img { height: 26px; width: auto; display: block; }

/* website e redes sociais da atividade: fila de icones centrada */
.atvm-soc-row { display: flex; justify-content: center; align-items: center;
	gap: 22px; padding-top: 12px; flex-wrap: wrap; }
.atvm-soc-row svg { width: 28px; height: 28px; color: var(--f7-theme-color); }

/* --- dados pessoais obrigatórios para a inscrição --- */
.atvm-req { margin-bottom: 12px; border-left: 3px solid rgba(128,128,128,.35); }
.atvm-req.atvm-req-erro { border-left-color: #ff9800; }
.atvm-req-tit { font-size: 13px; text-transform: uppercase; opacity: .75; line-height: 1.45;
	padding-bottom: 14px; }
.atvm-req-lista { display: flex; flex-direction: column; gap: 9px; }
.atvm-req-item { display: flex; align-items: center; gap: 10px; font-size: 13px;
	text-transform: uppercase; }
.atvm-req-item svg { width: 18px; height: 18px; flex: 0 0 auto; color: #4caf50; }
.atvm-req-item.em-falta svg { color: #ff9800; }
.atvm-req-item.em-falta span { color: #ff9800; }
.atvm-req-aviso { display: flex; align-items: center; gap: 10px; color: #ff9800;
	font-size: 13px; text-transform: uppercase; padding-top: 16px; }
.atvm-req-aviso svg { width: 18px; height: 18px; flex: 0 0 auto; }
.atvm-req-but { margin-top: 16px; }
/* --- passo do pagamento: resumo + total --- */
.atvm-pag-res { margin-top: 12px; }
.atvm-pag-lin { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 9px 0; border-bottom: 1px solid rgba(128,128,128,.15); font-size: 13px; }
.atvm-pag-lin span { opacity: .6; flex: 0 0 auto; text-transform: uppercase; font-size: 11.5px; }
.atvm-pag-lin strong { font-weight: 500; text-align: right; min-width: 0; word-break: break-word; }
.atvm-pag-total { display: flex; align-items: baseline; justify-content: space-between;
	margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(128,128,128,.3); }
.atvm-pag-total-lbl { font-size: 12px; text-transform: uppercase; opacity: .6; }
/* resumo com loja: a inscrição e os artigos comprados, antes da linha do TOTAL */
.atvm-pag-loja { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,.2); }
.atvm-pag-loja-t span { text-transform: uppercase; }
.atvm-pag-loja-i { font-size: 13px; opacity: .75; }
/* desconto: a linha que torna a promoção evidente, na cor do tema (é dinheiro a menos) */
.atvm-pag-desc { font-size: 13px; color: var(--f7-theme-color); }
.atvm-pag-desc span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.atvm-pag-desc svg { width: 14px; height: 14px; }
.atvm-pag-desc span:last-child { font-variant-numeric: tabular-nums; }
/* preço original riscado, ao lado do já descontado */
.atvm-pag-riscado { text-decoration: line-through; opacity: .45; font-weight: 400; }
.atvm-pag-loja-i span:last-child { font-variant-numeric: tabular-nums; }
.atvm-pag-total-dir { text-align: right; }
.atvm-pag-total-val { font-size: 26px; color: var(--f7-theme-color);
	font-variant-numeric: tabular-nums; }
.atvm-pag-nota { font-size: 12px; opacity: .6; padding-top: 10px; text-align: center; }
/* PRAZO ESGOTADO: substitui o cartão inteiro da inscrição (resumo, valor e botões). O vermelho
   é o mesmo do estado "Por validar", para se ler de relance que a inscrição deixou de existir. */
.atvm-pag-expirou { text-align: center; padding: 22px 10px 14px; }
.atvm-pag-expirou svg { width: 42px; height: 42px; color: #f44336; opacity: .85; }
.atvm-pag-expirou-tit { font-size: 16px; text-transform: uppercase; color: #f44336;
	padding-top: 12px; line-height: 1.35; }
.atvm-pag-expirou-txt { font-size: 13px; opacity: .65; padding-top: 8px; line-height: 1.5; }
/* PAGO: alinhado à DIREITA, na mesma coluna do valor a que diz respeito (Miguel, 2026-08-13).
   Ao centro ficava a flutuar entre o total e o estado da inscrição, sem se perceber a que se
   referia. Um ponto acima no tamanho, que é uma boa notícia e merece ser lida de relance. */
.atvm-pag-ok { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
	margin-top: 16px; color: #4caf50; font-size: 16px; text-transform: uppercase; }
.atvm-pag-ok svg { width: 22px; height: 22px; }
/* linha do PAGO com a loja ao lado: botão pequeno (ao tamanho do texto) à esquerda, visto à
   direita. Dentro da linha o PAGO larga a margem própria — é a linha que a traz. */
.atvm-pag-ok-row { display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-top: 16px; }
.atvm-pag-ok-row .atvm-pag-ok { margin-top: 0; }
.atvm-loja-mini { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
	border: 1px solid var(--f7-theme-color); border-radius: 999px;
	color: var(--f7-theme-color); font-size: 13px; text-transform: uppercase; }
.atvm-loja-mini svg { width: 16px; height: 16px; }

/* --- resumo da lista de inscritos (uma linha por escalão) --- */
.atvm-lst { margin-top: 10px; }
/* estas linhas são <a>, e o F7 pinta QUALQUER link com a cor do tema — daí sair tudo a
   vermelho. O texto volta à cor normal; a cor do tema fica só para a seta, que é o afeto. */
.atvm-lst-lin { display: flex; align-items: center; gap: 12px; padding: 12px 0;
	border-bottom: 1px solid rgba(128,128,128,.18); color: var(--f7-text-color); }
.atvm-lst-lin:last-child { border-bottom: 0; }
.atvm-lst-ico { width: 22px; height: 22px; flex: 0 0 auto; opacity: .55; }
.atvm-lst-in { flex: 1; min-width: 0; }
.atvm-lst-nome { font-size: 14px; text-transform: uppercase; letter-spacing: .2px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atvm-lst-n { font-size: 12px; opacity: .6; padding-top: 2px; }
.atvm-lst-seta { width: 18px; height: 18px; flex: 0 0 auto; color: var(--f7-theme-color); opacity: .55; }

/* --- lista de inscritos (popup) --- */
.atvm-ins-lista { padding: 0 12px; }
.atvm-ins-lin { display: flex; align-items: center; gap: 12px; padding: 10px 4px;
	border-bottom: 1px solid rgba(128,128,128,.15); }
.atvm-ins-foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
	flex: 0 0 auto; background: rgba(128,128,128,.12); }
.atvm-ins-foto.is-anon { opacity: .45; }
.atvm-ins-in { min-width: 0; flex: 1; }
.atvm-ins-esc { font-size: 11px; text-transform: uppercase; opacity: .55; }
.atvm-ins-nome { font-size: 14.5px; padding-top: 1px; display: flex; align-items: center; gap: 6px; }
.atvm-ins-flag { width: 18px; height: 13px; flex: 0 0 auto; border-radius: 2px; }
.atvm-ins-nota { font-size: 12px; opacity: .6; padding-top: 2px; }
.atvm-ins-box { font-size: 11px; opacity: .45; padding-top: 2px; text-transform: uppercase; }
/* linha clicável: abre o perfil da inscrição (bug 755). O chevron é o que diz ao utilizador
   que ali há para onde ir — sem ele a linha parece morta, que era a queixa original. */
.atvm-ins-lin.is-link { cursor: pointer; }
.atvm-ins-chev { width: 18px; height: 18px; flex: 0 0 auto; opacity: .35; }
.atvm-ins-vazio { text-align: center; padding: 30px 20px; opacity: .5; }
.atvm-ins-vazio svg { width: 34px; height: 34px; opacity: .5; }

/* escolha da prova: uma linha por prova, com o que as distingue (atletas e vagas) à vista */
.atvm-prova-lista { margin-top: 14px; }
/* também é <a>: sem isto saía tudo na cor do tema (ver .atvm-lst-lin) */
.atvm-prova { display: flex; align-items: center; gap: 12px; padding: 12px 0;
	border-bottom: 1px solid rgba(128,128,128,.18); cursor: pointer;
	color: var(--f7-text-color); }
.atvm-prova:last-child { border-bottom: 0; }
.atvm-prova-ico { width: 22px; height: 22px; flex: 0 0 auto; color: rgba(128,128,128,.5);
	transition: color .18s ease; }
.atvm-prova.is-on .atvm-prova-ico { color: var(--f7-theme-color); }
.atvm-prova-in { min-width: 0; }
.atvm-prova-nome { font-size: 14px; text-transform: uppercase; letter-spacing: .2px; }
.atvm-prova.is-on .atvm-prova-nome { color: var(--f7-theme-color); }
.atvm-prova-meta { font-size: 12px; opacity: .6; padding-top: 3px; }

/* regulamento: botão do PDF e a caixa de aceitação por baixo */
.atvm-regu-but { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; }
.atvm-regu-but svg { width: 17px; height: 17px; }
.atvm-regu-chk { margin-top: 18px; }

.atvm-cons { padding-top: 18px; }
.atvm-cons-chk { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.atvm-cons-chk .icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.atvm-cons-txt { font-size: 12.5px; line-height: 1.5; opacity: .8; text-align: justify; }
.atvm-cons-eq { display: block; padding-top: 10px; }

/* --- "Ver mais antigas": histórico da lista de atividades, aos lotes --- */
.atv-mais-wrap { padding: 18px 16px 26px; text-align: center; }
.atv-mais { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 9px 20px; border-radius: 999px; cursor: pointer;
	border: 1px solid rgba(128,128,128,.35); color: var(--f7-theme-color);
	font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.atv-mais svg { width: 17px; height: 17px; }
.atv-mais:active { transform: scale(.97); }
.atv-mais-fim { font-size: 12px; opacity: .45; }

/* --- coluna direita do cartão da entidade: logótipo + coração no mesmo eixo vertical --- */
.atvm-org-right { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* o lucide troca o <i data-lucide> por um <svg>: os seletores têm de ser em svg.
   Mesmo vermelho das linhas da lista (.atv-sb-fav) para a mesma atividade ler igual nos dois sítios. */
.atvm-fav { display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; color: rgba(128,128,128,.55); cursor: pointer;
	transition: transform .18s ease; }
.atvm-fav svg { width: 24px; height: 24px; }
.atvm-fav.is-fav { color: #FF4D6D; }
.atvm-fav.is-fav svg { fill: #FF4D6D; }
.atvm-fav:active { transform: scale(.85); }

/* --- logotipo da entidade organizadora: marca inteira (contain), nunca cortada --- */
.atvm-org-logo { width: 54px; height: 54px; border-radius: 50%; object-fit: contain;
	padding: 5px; box-sizing: border-box; background: rgba(128,128,128,.12);
	border: 1px solid rgba(128,128,128,.2); flex: 0 0 auto; }

/* --- EVENTOS: uma linha por evento. O NOME leva a largura toda (nada de 3 colunas a
   espremê-lo) e as metricas descem para chips. Sem reticencias e sem quebras a meio. --- */
.atvm-ev-legenda { display: flex; gap: 14px; padding: 6px 0 2px; opacity: .5;
	font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.atvm-ev-legenda span { display: inline-flex; align-items: center; gap: 4px; }
.atvm-ev-legenda .icon { width: 12px; height: 12px; }
.atvm-ev-row { padding: 9px 0; border-top: 1px solid rgba(128,128,128,.2); }
.atvm-ev-nome { font-size: 13.5px; letter-spacing: .3px; text-transform: uppercase; line-height: 1.3; }
.atvm-ev-meta { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.atvm-ev-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
	border-radius: 999px; font-size: 11.5px; white-space: nowrap;
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--f7-theme-color) 16%, transparent),
		color-mix(in srgb, var(--f7-theme-color) 5%, transparent)); }
.atvm-ev-chip .icon { width: 13px; height: 13px; opacity: .7; }
/* chip do VALOR (tabela de precos por evento): destacado, na cor do tema */
.atvm-ev-chip-val { color: var(--f7-theme-color); font-size: 13px; letter-spacing: .2px;
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--f7-theme-color) 26%, transparent),
		color-mix(in srgb, var(--f7-theme-color) 8%, transparent)); }

/* --- valor do pagamento em texto com degrade --- */
.atvm-preco { font-size: 22px; letter-spacing: .3px;
	background: linear-gradient(100deg, var(--f7-theme-color), color-mix(in srgb, var(--f7-theme-color) 55%, #E8A013));
	-webkit-background-clip: text; background-clip: text; color: transparent; }
.atvm-preco-nota { font-size: 11.5px; opacity: .55; text-transform: uppercase; letter-spacing: .5px; }

/* --- PATROCINADORES: mosaico de logos com um brilho lento a atravessar --- */
.atvm-spons { background: linear-gradient(158deg,
		color-mix(in srgb, var(--f7-theme-color) 10%, transparent) 0%, transparent 48%); }
.atvm-spons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 14px; }
.atvm-spons-item { position: relative; overflow: hidden; border-radius: 13px;
	height: 96px;   /* ALTURA FIXA e nao min-height: e ela que da a moldura ao object-fit */
	display: flex; align-items: center; justify-content: center; padding: 10px;
	border: 1px solid rgba(128,128,128,.28);
	/* SEM placa branca: a caixa segue o tema, como o resto da app (a placa clara protegia
	   logotipos de texto preto no tema escuro, mas destoava de tudo o resto). */
	background: linear-gradient(150deg, rgba(128,128,128,.10), rgba(128,128,128,.02)); }
/* a imagem ocupa a caixa TODA (menos o padding) e o contain trata do racio: um logo largo usa a
   largura, um quadrado e travado pela altura. Antes tinha height fixo de 56px dentro de uma caixa
   de 88px+ — sobrava placa branca por todos os lados e o logotipo parecia um selo ao centro. */
.atvm-spons-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* um único patrocinador ocupa a linha toda, em vez de meia caixa desequilibrada */
.atvm-spons-grid.uno { grid-template-columns: 1fr; }
.atvm-spons-grid.uno .atvm-spons-item { height: 118px; }
/* (o brilho a varrer os cartoes foi retirado — chamava a atencao para a moldura e nao para o
   logotipo. O keyframes atvmSheen fica: e usado pelo cupao de desconto.) */
/* (o "lugar por preencher" e a nota foram retirados: sem patrocinadores nao ha cartao nenhum) */

/* ATIVIDADES: podio dos trofeus virtuais (2o | 1o maior | 3o), alinhado pela base */
.atvm-trofeus { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-top: 14px; }
.atvm-trofeu { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.atvm-trofeu img { display: block; max-width: 100%; height: auto; }
.atvm-trofeu span { font-size: 11px; opacity: .7; text-align: center; }

/* ============================================================
   CARTAO PROMOCIONAL das atividades ("este lugar pode ser teu").
   Entra quando o nº de destaques e IMPAR, para a grelha nunca ficar coxa.
   Herda .atv-dst-card/.atv-dst-in/.atv-dst-top -> altura identica aos outros.
   Sem blur e sem box-shadow (regra da casa): tudo feito com degrades.
   ============================================================ */
.atv-promo { cursor: pointer;
	/* moldura viva: o degrade e 3x maior do que o cartao e desliza */
	background: linear-gradient(115deg, #F5D63D, #E8A013 20%, var(--f7-theme-color) 45%, #E8A013 70%, #F5D63D 100%);
	background-size: 300% 300%;
	animation: promoBorda 9s ease-in-out infinite; }
@keyframes promoBorda { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.atv-promo-top { overflow: hidden; background: #14121c; }

/* 1) AURORA: duas manchas radiais a respirar em sentidos opostos */
.promo-aurora { position: absolute; inset: -30%;
	background:
		radial-gradient(38% 38% at 30% 32%, color-mix(in srgb, var(--f7-theme-color) 85%, transparent) 0%, transparent 70%),
		radial-gradient(42% 42% at 72% 70%, rgba(245,214,61,.75) 0%, transparent 72%),
		radial-gradient(50% 50% at 50% 100%, rgba(120,60,200,.55) 0%, transparent 75%);
	animation: promoAurora 14s ease-in-out infinite alternate; }
@keyframes promoAurora {
	0%   { transform: translate3d(-6%, -4%, 0) scale(1);    opacity: .85; }
	50%  { transform: translate3d(5%, 6%, 0) scale(1.18);   opacity: 1; }
	100% { transform: translate3d(-3%, 8%, 0) scale(1.06);  opacity: .9; }
}

/* 2) RAIOS: leque de feixes a rodar devagar, so insinuado */
.promo-rays { position: absolute; left: 50%; top: 55%; width: 200%; aspect-ratio: 1; translate: -50% -50%;
	background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.11) 0deg 5deg, transparent 5deg 22deg);
	animation: promoGira 26s linear infinite; opacity: .55; }
@keyframes promoGira { to { rotate: 360deg; } }

/* 3) HOLOFOTE: banda diagonal que varre o cartao (o "ser notado") */
.promo-sweep { position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
	background-size: 260% 100%; animation: promoSweep 4.6s ease-in-out infinite; }
@keyframes promoSweep { 0% { background-position: 180% 0; } 55%,100% { background-position: -80% 0; } }

/* 4) FAISCAS */
.promo-spark { position: absolute; width: 4px; height: 4px; border-radius: 999px; background: #fff;
	opacity: 0; animation: promoSpark 3.4s ease-in-out infinite; }
@keyframes promoSpark {
	0%, 70%, 100% { opacity: 0; transform: scale(.4); }
	78%           { opacity: .95; transform: scale(1.5); }
	86%           { opacity: 0; transform: scale(.6); }
}

/* 5) ESTRELA que se desenha e volta a apagar */
.promo-star { position: absolute; left: 50%; top: 46%; width: 46%; translate: -50% -50%;
	fill: rgba(245,214,61,.10); stroke: rgba(245,214,61,.9); stroke-width: 3.5;
	stroke-linejoin: round; stroke-dasharray: 300; animation: promoDraw 6s ease-in-out infinite; }
@keyframes promoDraw {
	0%   { stroke-dashoffset: 300; opacity: .2; }
	35%  { stroke-dashoffset: 0;   opacity: 1; }
	75%  { stroke-dashoffset: 0;   opacity: 1; }
	100% { stroke-dashoffset: -300; opacity: .2; }
}

/* 6) FRASES em rotacao (3 x 3s = ciclo de 9s), sobrepostas no mesmo sitio */
.promo-phrases { position: absolute; left: 8px; right: 8px; top: 10px; height: 44px; text-align: center; }
.promo-ph { position: absolute; left: 0; right: 0; top: 0; color: #fff;
	font-size: 12.5px; line-height: 1.25; text-transform: uppercase; letter-spacing: .5px;
	opacity: 0; animation: promoFrase 9s ease-in-out infinite; }
@keyframes promoFrase {
	0%    { opacity: 0; transform: translateY(9px) scale(.96); }
	5%    { opacity: 1; transform: translateY(0) scale(1); }
	28%   { opacity: 1; transform: translateY(0) scale(1); }
	34%   { opacity: 0; transform: translateY(-9px) scale(1.04); }
	100%  { opacity: 0; transform: translateY(9px) scale(.96); }
}

/* 7) CTA a pulsar ao fundo do poster */
.promo-cta { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; color: #fff;
	font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; opacity: .9;
	display: flex; align-items: center; justify-content: center; gap: 5px;
	animation: promoCta 2.4s ease-in-out infinite; }
.promo-cta svg { width: 13px; height: 13px; }
@keyframes promoCta { 0%,100% { opacity: .6; gap: 5px; } 50% { opacity: 1; gap: 9px; } }

/* rodape do promo: uma frase so, com a largura toda (sem selo a competir) e centrada
   tambem na vertical, ja que o rodape absorve a folga da linha da grelha */
.promo-foot { justify-content: center; align-items: center; }
.promo-foot-t { opacity: .8; max-width: 100%; text-align: center; }

/* acessibilidade: sem movimento, mostra so a 1.ª frase e congela o resto */
@media (prefers-reduced-motion: reduce) {
	.atv-promo, .promo-aurora, .promo-rays, .promo-sweep, .promo-spark,
	.promo-star, .promo-cta { animation: none; }
	.promo-ph { animation: none; opacity: 0; }
	.promo-ph:first-child { opacity: 1; }
	.promo-star { stroke-dashoffset: 0; }
}

/* LISTA DE INSCRITOS: nome tapado pela privacidade (ANONIMO / Sem permissoes) */
.insc-anon { text-transform: uppercase; letter-spacing: .5px; opacity: .55; font-style: italic; }

/* LEADERBOARD bloqueado pela privacidade do proprio (reciprocidade) */
.lb-priv-off { display: flex; gap: 12px; align-items: flex-start; margin: 20px 16px;
	padding: 16px; border-radius: 12px; border: 1px solid rgba(128,128,128,.35); }
.lb-priv-off > .icon { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; opacity: .7; }
.lb-priv-off-t { font-size: 14px; line-height: 1.5; opacity: .9; }
.lb-priv-off-t .info-point { margin-left: 4px; vertical-align: middle; }
.lb-priv-off-t .info-point .icon { width: 18px; height: 18px; opacity: .6; }
.lb-priv-off-l { display: inline-block; margin-top: 10px; font-size: 13px;
	text-transform: uppercase; letter-spacing: .4px; color: var(--f7-theme-color); }

/* PRIVACIDADE: info point no canto direito do campo (mesma posicao do botao de limpar) */
.priv-info { position: absolute; right: 0; top: calc(var(--f7-input-height) / 2);
	margin-top: -11px; z-index: 2; line-height: 0; }
.priv-info .icon { width: 22px; height: 22px; opacity: .55; }

/* ONBOARDING: aviso de que o aparelho vai pedir permissao para notificacoes */
.onb-push-aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
	padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(128,128,128,.35); }
.onb-push-aviso .icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; opacity: .8; }

/* PRESENCAS: motivo pelo qual nao se pode marcar (em vez de um ecra vazio) */
.ass-bloqueio { display: flex; gap: 12px; margin: 18px 30px 0; padding: 14px 16px;
	border-radius: 12px; border: 1px solid rgba(128,128,128,.35); }
.ass-bloqueio .icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; opacity: .7; }
.ass-bloqueio-txt { font-size: 14px; line-height: 1.5; opacity: .85; }

/* ============================================================
   CAMPOS DE FORMULARIO — ALTURA COMPACTA (app-wide)
   O F7 (md) da 56px de altura util a um campo de input com contorno
   (16+16 de padding interior + 24 do input) mas so 48px a um
   smart-select / lista. Num mesmo formulario os campos ficavam com
   alturas diferentes e o form ficava desnecessariamente alto.
   Aqui os inputs passam a 48px, a mesma altura do smart-select.

   ATENCAO: o item-inner e flex em coluna, por isso as MARGENS da
   etiqueta contam para a altura. Nao se pode mexer no padding sem
   acertar as margens, senao a conta nao fecha.

   Contas (nao mexer numa sem acertar as outras):
     altura util = 2*padding + (margens+altura da etiqueta) + input
                 = 2*12 + (-24 + 24 + 0) + 24 = 48
     margin-top da etiqueta = -(padding + caixa-da-etiqueta/2)
              = -(12 + 12) = -24  -> a etiqueta, quando flutua, fica
              centrada na linha do contorno
     margin-bottom da etiqueta = 0 (o F7 usa 4px; aqui os 4px teriam
              de sair da altura, e e isso que centra o input)
     translateY da etiqueta em repouso = (altura-util/2) * 3/4 = 18
              (o 3/4 desfaz a escala 16/12, aplicada antes do translate)
   O estado "com valor" do F7 usa !important, por isso nao e afetado.
   O botao de limpar e a textarea resizable seguem --f7-input-height,
   que nao se toca, por isso acompanham sozinhos.
   ============================================================ */
.md .item-input.item-input-outline .item-content .item-inner,
.md .item-input.item-input-outline.item-content .item-inner {
	padding-top: 12px;
	padding-bottom: 12px;
}
.md .item-input.item-input-outline .item-content .item-floating-label,
.md .item-input.item-input-outline .item-content .item-label,
.md .item-input.item-input-outline.item-content .item-floating-label,
.md .item-input.item-input-outline.item-content .item-label {
	margin-top: -24px;
	margin-bottom: 0;
}
.md .item-input.item-input-outline .item-content .item-floating-label,
.md .item-input.item-input-outline.item-content .item-floating-label {
	transform: scale(var(--f7-floating-label-scale)) translateY(18px);
}

/* ===== RÓTULO FLUTUANTE DENTRO DE UM CARTÃO ===============================================
   O F7 pinta o rótulo dos campos "outline" com --f7-page-bg-color, para ele tapar a linha do
   contorno por trás do texto. Isso só bate certo quando o campo está sobre o fundo da página.
   Dentro de um .card a superfície é --f7-card-bg-color, ligeiramente diferente, e o rótulo
   ficava com um retângulo mais claro à volta — em toda a app, não só nas atividades.
   O F7 já tem esta exceção para .block-strong e .list-strong; faltava-lhe a do .card.
   O !important acompanha o que o próprio F7 usa nessas duas. */
.card .item-input-outline .item-content .item-floating-label,
.card .item-input-outline .item-content .item-label,
.card .item-input-outline.item-content .item-floating-label,
.card .item-input-outline.item-content .item-label,
.card .input-outline .item-floating-label,
.card .input-outline .item-label {
	background: var(--f7-card-bg-color) !important;
}

/* botão de pagar no cartão de uma inscrição pendente */
/* meio de pagamento manual (transferência, numerário…) no cartão da inscrição pendente */
.atvm-pag-manual { margin-top: 12px; padding: 12px 14px; border-radius: 12px;
	border: 1px dashed rgba(128,128,128,.4); }
.atvm-pag-manual-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .6; }
/* O texto vem escrito pelo organizador e traz coisas sem espaços — IBAN, MB WAY, links.
   Sem quebra forçada, uma linha dessas empurrava o cartão para fora do ecrã. */
.atvm-pag-manual-txt { font-size: 13px; line-height: 1.55; padding-top: 6px;
	overflow-wrap: anywhere; word-break: break-word; }

/* ===== ATIVIDADES — HORÁRIO / WODS / RESULTADOS =========================================== */

/* estado vazio partilhado pelos três separadores */
.atvh-vazio { text-align: center; padding: 50px 24px; opacity: .55; }
.atvh-vazio svg { width: 44px; height: 44px; opacity: .5; }
.atvh-vazio p { padding-top: 12px; font-size: 14px; line-height: 1.5; }

/* --- HORÁRIO --- */
/* ===== ATIVIDADES — ESTADOS VAZIOS ANIMADOS (horário / WODs / resultados) ==================
   Três cenas SVG, sóbrias, em ciclo de ~6s: cada uma conta o que o separador VAI mostrar.
   Traços em currentColor (herdam o tema), acentos na cor do tema. Sem sombras, sem blur.
   Quem pediu menos movimento no sistema vê a cena parada no estado final. */
.atvz .atvz-svg { width: 190px; max-width: 70%; height: auto; opacity: .8; }
.atvz p { padding-top: 6px; }

/* --- HORÁRIO: a linha do tempo desenha-se e os blocos encaixam um a um --- */
.atvz-ho-linha { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .3;
	stroke-dasharray: 100; animation: atvzHoLinha 6s ease-in-out infinite; }
.atvz-ho-slot rect { fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; }
.atvz-ho-slot circle { fill: var(--f7-theme-color); }
.atvz-ho-slot line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .3; }
.atvz-ho-slot { opacity: 0; transform: translateX(8px); animation: atvzHoSlot 6s ease-in-out infinite; }
.atvz-ho-s2 { animation-delay: .45s; }
.atvz-ho-s3 { animation-delay: .9s; }
@keyframes atvzHoLinha { 0% { stroke-dashoffset: 100; } 18%, 88% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 100; } }
@keyframes atvzHoSlot { 0%, 12% { opacity: 0; transform: translateX(8px); }
	26%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateX(8px); } }

/* --- WODS: a barra a ser carregada, disco a disco, e o "tirão" final --- */
.atvz-bb-barra, .atvz-bb-pega { fill: currentColor; opacity: .35; }
.atvz-bb-p rect { fill: color-mix(in srgb, var(--f7-theme-color) 16%, transparent);
	stroke: var(--f7-theme-color); stroke-width: 2; }
.atvz-bb-p { opacity: 0; animation: atvzBbP 6s ease-in-out infinite; }
.atvz-bb-l1 { --bb-de: -22px; }
.atvz-bb-r1 { --bb-de: 22px;  animation-delay: .3s; }
.atvz-bb-l2 { --bb-de: -26px; animation-delay: .6s; }
.atvz-bb-r2 { --bb-de: 26px;  animation-delay: .9s; }
.atvz-bb { animation: atvzBbLift 6s ease-in-out infinite; }
@keyframes atvzBbP { 0%, 8% { opacity: 0; transform: translateX(var(--bb-de)); }
	22%, 84% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateX(var(--bb-de)); } }
@keyframes atvzBbLift { 0%, 42% { transform: none; } 48% { transform: translateY(-6px); }
	54%, 100% { transform: none; } }

/* --- RESULTADOS: o pódio ergue-se do chão e o 1º lugar ganha um brilho --- */
.atvz-po-chao { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .3; }
.atvz-po-col rect { fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; }
.atvz-po-col line { stroke: var(--f7-theme-color); stroke-width: 2.5; stroke-linecap: round; }
.atvz-po-col { transform-box: fill-box; transform-origin: center bottom;
	transform: scaleY(0); animation: atvzPoSobe 6s ease-in-out infinite; }
.atvz-po-c2 { animation-delay: .25s; }
.atvz-po-c1 { animation-delay: .55s; }
.atvz-po-brilho { fill: var(--f7-theme-color); transform-box: fill-box;
	transform-origin: center; opacity: 0; animation: atvzPoBrilho 6s ease-in-out infinite; }
@keyframes atvzPoSobe { 0%, 8% { transform: scaleY(0); } 24%, 84% { transform: scaleY(1); }
	95%, 100% { transform: scaleY(0); } }
@keyframes atvzPoBrilho { 0%, 26% { opacity: 0; transform: scale(.4) rotate(-25deg); }
	36%, 56% { opacity: 1; transform: none; } 62% { transform: rotate(12deg); }
	68%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(.4); } }

/* menos movimento: a cena fica montada no estado final, sem ciclo */
@media (prefers-reduced-motion: reduce) {
	.atvz-ho-linha, .atvz-ho-slot, .atvz-bb-p, .atvz-bb, .atvz-po-col, .atvz-po-brilho {
		animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
	.atvz-ho-slot rect, .atvz-po-col rect { opacity: .45; }
	.atvz-ho-linha, .atvz-po-chao { opacity: .3; }
	.atvz-bb-barra, .atvz-bb-pega { opacity: .35; }
}

/* ENVIAR PARA O ECRÃ — telecomando do staff (*16*) nos popups do heat/WOD/resultados. Botões
   em grelha, ao tamanho do texto (o F7 esticava <a>.button a 100%). */
.atvec-tit { display: flex; align-items: center; gap: 9px; font-size: 12px;
	text-transform: uppercase; letter-spacing: .6px; opacity: .6; padding-bottom: 10px; }
.atvec-tit svg { width: 17px; height: 17px; }
.atvec-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.atvec-but { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
	border: 1px solid var(--f7-theme-color); border-radius: 999px;
	color: var(--f7-theme-color); font-size: 13px; text-transform: uppercase; }
.atvec-but svg { width: 16px; height: 16px; flex: 0 0 auto; }
.atvec-but-cheio { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }

/* resultados: linha de ferramentas (Pontuação) e o cartão do VALIDAR/ALTERAR (*20*) */
.atvre-tools { padding: 2px 16px 6px; }
.atvre-tools .link { font-size: 12px; text-transform: uppercase; }
.atvre-valida { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 6px 12px 10px; padding: 10px 14px; border-radius: 12px;
	border: 1px dashed rgba(128,128,128,.4); }
.atvre-valida-txt { flex: 1 1 220px; font-size: 12px; line-height: 1.5; }

/* pontuação (popup): lugar → pontos */
.atvm-pont-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; padding-bottom: 4px; }
.atvm-pont-lista { padding-top: 10px; }
.atvm-pont-lin { display: flex; gap: 14px; padding: 5px 0; font-size: 14px;
	border-bottom: 1px solid rgba(128,128,128,.14); }
.atvm-pont-lin:last-child { border-bottom: 0; }
.atvm-pont-pos { min-width: 38px; color: var(--f7-theme-color); font-variant-numeric: tabular-nums; }
/* acertar a hora do heat: picker + AGORA + GUARDAR na mesma linha (quebra em ecrãs estreitos) */
.atvhe-hora-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.atvhe-hora-picker { margin: 0; flex: 1 1 150px; min-width: 150px; }
.atvhe-hora-picker ul { background: none; }

/* AS MINHAS PISTAS COMO JUIZ — cartão à cabeça do separador HORÁRIO. A pista é o dado que ele
   procura de relance no meio do barulho, por isso é a única coisa na cor do tema. */
.atvh-juiz-tit { display: flex; align-items: center; gap: 9px; font-size: 13px;
	text-transform: uppercase; letter-spacing: .5px; color: var(--f7-theme-color);
	padding-bottom: 4px; }
.atvh-juiz-tit svg { width: 18px; height: 18px; }
.atvh-juiz-dia { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .55;
	padding: 12px 0 4px; }
.atvh-juiz-lin { display: flex; gap: 12px; padding: 8px 0;
	border-bottom: 1px solid rgba(128,128,128,.14); }
.atvh-juiz-lin:last-child { border-bottom: 0; }
.atvh-juiz-hora { flex: 0 0 auto; font-size: 15px; font-variant-numeric: tabular-nums;
	min-width: 46px; }
.atvh-juiz-in { flex: 1; min-width: 0; }
.atvh-juiz-wod { font-size: 14px; }
.atvh-juiz-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; opacity: .6;
	padding-top: 2px; }
.atvh-juiz-meta .atvh-juiz-pista { color: var(--f7-theme-color); opacity: 1; }
/*---nome do atleta/equipa: linha própria por baixo da meta, alinhado à direita (Miguel,
    2026-08-14 — ao lado do título, dois textos compridos sobrepunham-se)---*/
.atvh-juiz-atl { font-size: 12px; opacity: .55; padding-top: 2px; text-align: right; }
/*---cartão do juiz, peças novas (Miguel, 2026-08-14): contagem no título, próxima pista em
    destaque, concluídas colapsadas, folgas entre pistas. A linha passou a <a> (abre o heat).---*/
a.atvh-juiz-lin { color: inherit; }
.atvh-juiz-n { margin-left: auto; font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
/*---o título fecha e abre o cartão: o chevron é o sinal de que dá (roda ao fechar).
    Selector com o pai porque `.atvh-juiz-tit svg` (mais específico) manda no tamanho.---*/
a.atvh-juiz-tit { color: inherit; cursor: pointer; }
.atvh-juiz-tit .atvh-juiz-seta { width: 16px; height: 16px; flex: 0 0 auto; opacity: .5;
	transition: transform .2s ease; }
.atvh-juiz-tit.fechado .atvh-juiz-seta { transform: rotate(180deg); }
.atvh-juiz-tit.fechado { padding-bottom: 0; }
.atvh-juiz-dia-n { opacity: .8; }
.atvh-juiz-next { border-left: 3px solid var(--f7-theme-color); background: rgba(128,128,128,.08);
	border-radius: 8px; padding-left: 10px; padding-right: 8px; }
.atvh-juiz-tag { font-size: 10px; color: var(--f7-theme-color); text-transform: uppercase;
	letter-spacing: .3px; padding-top: 2px; }
.atvh-juiz-pass-tog { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .6;
	padding: 7px 0; color: inherit; border-bottom: 1px solid rgba(128,128,128,.14); }
.atvh-juiz-pass-tog svg { width: 14px; height: 14px; }
.atvh-juiz-pass-seta { margin-left: auto; transition: transform .2s; }
.atvh-juiz-pass-tog.aberto .atvh-juiz-pass-seta { transform: rotate(180deg); }
#atvh-jz-pass .atvh-juiz-lin { opacity: .5; }
.atvh-juiz-folga { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: .5;
	padding: 4px 0 4px 58px; }
.atvh-juiz-folga svg { width: 13px; height: 13px; flex: 0 0 auto; }

.atvh { padding: 8px 12px 0; }
.atvh-dia { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px;
	font-size: 13px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; }
.atvh-dia svg { width: 17px; height: 17px; }
.atvh-lin { display: flex; align-items: stretch; gap: 12px; padding: 11px 12px; margin-bottom: 7px;
	border-radius: 12px; border: 1px solid rgba(128,128,128,.2);
	border-left: 3px solid rgba(128,128,128,.35); color: var(--f7-text-color); }
.atvh-generico { background: rgba(128,128,128,.07); }
.atvh-quando { flex: 0 0 74px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.atvh-arena { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; }
.atvh-hora { font-size: 17px; font-variant-numeric: tabular-nums; }
.atvh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.atvh-tit { font-size: 14px; text-transform: uppercase; line-height: 1.3; }
.atvh-wod { font-size: 12px; opacity: .6; padding-top: 3px; }
.atvh-heatn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
	justify-content: center; min-width: 34px; }
.atvh-heatn span { font-size: 9px; text-transform: uppercase; opacity: .5; }
.atvh-heatn strong { font-size: 17px; font-weight: 500; }
.atvh-meet { display: inline-flex; margin-top: 4px; color: var(--f7-theme-color); }
.atvh-meet svg { width: 22px; height: 22px; }
.atvh-fim { text-align: center; text-transform: uppercase; font-size: 12px; letter-spacing: 1px;
	opacity: .5; padding: 18px 0 8px; }
.atvh-upd { text-align: center; text-transform: uppercase; font-size: 10px; opacity: .45; padding-bottom: 14px; }
.atvh-agora { border-color: var(--f7-theme-color); }
@keyframes atvhPisca { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.atvh-pisca { animation: atvhPisca 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .atvh-pisca { animation: none; } }

/*---filtro por ARENA (Miguel, 2026-08-16): fila de chips do sistema global (.aval-chips +
    initChipsSwipe), colada ao topo da lista---*/
.atvh-arenas { padding: 4px 0 2px; }
.atvh-arenas .aval-chips { padding-left: 12px; padding-right: 12px; }

/*---OS MEUS HEATS (Miguel, 2026-08-16): num horário de dezenas de linhas, as do próprio atleta
    saltam à vista. A cor da prova continua a mandar na barra da esquerda — o realce faz-se com
    um leve tom de fundo, o fio da moldura na cor do tema e o distintivo com a PISTA, que é o
    que ele precisa de saber antes de entrar.---*/
.atvh-eu { background: rgba(128,128,128,.10); border-color: var(--f7-theme-color); }
.atvh-eu .atvh-hora { color: var(--f7-theme-color); }
.atvh-eu-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; }
.atvh-eu-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
	text-transform: uppercase; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px;
	border: 1px solid var(--f7-theme-color); color: var(--f7-theme-color); }
.atvh-eu-tag svg { width: 12px; height: 12px; }
/*---"és o próximo": preenchido, para se distinguir do distintivo da pista sem gritar---*/
.atvh-eu-prox { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
	padding: 3px 9px; border-radius: 999px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }

/* --- HEAT (popup): atletas por pista --- */
.atvhe-cab { display: flex; justify-content: space-between; padding: 10px 18px 4px;
	font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.atvhe-lista { padding: 0 12px; }
.atvhe-lin { display: flex; align-items: center; gap: 11px; padding: 9px 4px;
	border-bottom: 1px solid rgba(128,128,128,.15); }
.atvhe-pista { flex: 0 0 26px; text-align: center; font-size: 19px; opacity: .8;
	font-variant-numeric: tabular-nums; }
.atvhe-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
	background: rgba(128,128,128,.12); }
/* AVATAR PARTILHADO (.atv-av) nos ecrãs das atividades: a foto passou a ser um <span> com as
   iniciais por baixo, e as classes de cada ecrã continuam a mandar no TAMANHO e no recorte
   (Miguel, 19-09: "mete nos outros sítios também"). Só falta dizer o corpo das iniciais em cada
   tamanho — sem isto ficavam todas com os 13px do valor de fábrica. */
.atvhe-foto i { font-size: 15px; }    /* linha do heat, 44px */
.atvm-ins-foto i { font-size: 15px; } /* lista de inscritos, 46px */
.atvrkd-foto i { font-size: 15px; }   /* detalhe do ranking, 46px */
.atvsc-foto i { font-size: 16px; }    /* cartão do score, 48px */
.atvre-foto i { font-size: 14px; }    /* tabela de resultados, 40px */
.atvrk-foto i { font-size: 12px; }    /* ranking global, 34px */
.atvhe-nome { flex: 1; min-width: 0; font-size: 14px; text-transform: uppercase; line-height: 1.25; }
.atvhe-sc { flex: 0 0 auto; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.atvhe-rx { font-size: 10px; text-transform: uppercase; opacity: .55; padding-top: 2px; }
/*---o mesmo distintivo em fila (perfil do atleta) não leva o espaço de cima---*/
.atvpf-prova-sc .atvhe-rx { padding-top: 0; }
.atvhe-estado { font-size: 12px; opacity: .6; }
.atvhe-off { width: 18px; height: 18px; opacity: .4; }

/* --- WODS --- */
.atvw-lista { padding: 8px 12px; }
.atvw-lin { display: flex; align-items: center; gap: 12px; padding: 14px 4px;
	border-bottom: 1px solid rgba(128,128,128,.18); color: var(--f7-text-color); }
.atvw-lin:last-child { border-bottom: 0; }
.atvw-ico { width: 20px; height: 20px; flex: 0 0 auto; opacity: .5; }
.atvw-tit { flex: 1; min-width: 0; font-size: 15px; text-transform: uppercase; }
.atvw-seta { width: 18px; height: 18px; flex: 0 0 auto; color: var(--f7-theme-color); opacity: .55; }
.atvw-desc { font-size: 14px; line-height: 1.6; }
.atvw-video { margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; }
.atvw-video svg { width: 17px; height: 17px; }
.atvw-tipos { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.atvw-chip { font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
	padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); opacity: .8; }
.atvw-bloq { display: flex; align-items: center; gap: 12px; color: #f44336; font-size: 13px; line-height: 1.5; }
.atvw-bloq svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* --- RESULTADOS --- */
.atvr { padding: 8px 12px; }
.atvr-esc { margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(128,128,128,.2);
	border-left: 3px solid rgba(128,128,128,.35); overflow: hidden; }
.atvr-esc-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
	background: rgba(128,128,128,.07); font-size: 14px; text-transform: uppercase; }
.atvr-esc-cab svg { width: 20px; height: 20px; opacity: .6; flex: 0 0 auto; }
.atvr-wods { padding: 0 14px; }
.atvr-wod { display: flex; align-items: center; gap: 11px; padding: 12px 0;
	border-bottom: 1px solid rgba(128,128,128,.15); color: var(--f7-text-color); font-size: 13.5px; }
.atvr-wod:last-child { border-bottom: 0; }
.atvr-wod span { flex: 1; min-width: 0; text-transform: uppercase; }
.atvr-wod-est { width: 17px; height: 17px; flex: 0 0 auto; opacity: .5; }
.atvr-geral .atvr-wod-est { color: var(--f7-theme-color); opacity: 1; }
.atvr-seta { width: 17px; height: 17px; flex: 0 0 auto; color: var(--f7-theme-color); opacity: .5; }

/* classificações (popup) */
.atvre-wodcab { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 2px;
	font-size: 15px; text-transform: uppercase; }
.atvre-wodcab em { font-style: normal; font-size: 11px; color: #4caf50; text-transform: uppercase; }
.atvre-cab { display: flex; justify-content: space-between; padding: 8px 16px 4px;
	font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.atvre-lista { padding: 0 12px; }
.atvre-lin { display: flex; align-items: center; gap: 10px; padding: 9px 4px;
	border-bottom: 1px solid rgba(128,128,128,.15); }
.atvre-pos { flex: 0 0 30px; text-align: right; font-size: 13px; opacity: .6;
	font-variant-numeric: tabular-nums; }
.atvre-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
	background: rgba(128,128,128,.12); }
.atvre-in { flex: 1; min-width: 0; }
.atvre-nome { font-size: 13.5px; text-transform: uppercase; line-height: 1.25;
	display: flex; align-items: center; gap: 6px; }
.atvre-box { font-size: 10.5px; opacity: .45; text-transform: uppercase; padding-top: 2px; }
.atvre-sc { flex: 0 0 auto; text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }
/*---scores EMPILHADOS (Miguel, 2026-08-14): um WOD pode ter 3 (principal + desempate + 3.º).
    Em linha corrida esmagavam o nome; assim cada um tem a sua linha, com o rótulo à esquerda
    do valor, e os secundários entram mais pequenos para o principal continuar a saltar.---*/
.atvre-sc-v { line-height: 1.35; white-space: nowrap; }
.atvre-sc-x { font-size: 11.5px; opacity: .6; }
.atvre-sc-l { font-size: 9px; opacity: .5; text-transform: uppercase; letter-spacing: .3px;
	padding-right: 5px; }
/*---cabeçalho do WOD: rótulos agrupados à DIREITA, por cima das colunas que descrevem
    (o das unidades estava na ponta esquerda, por cima da posição e da foto)---*/
.atvre-cab-wod { justify-content: flex-end; gap: 14px; }

/* --- SCORE CARD (registar o resultado de uma pista) --- */
/*---a LINHA (do heat ou da tabela classificativa) abre o perfil; o LÁPIS, encostado à direita,
    abre o registo do resultado. Alvo de 44px — é para se acertar com o polegar no meio de uma
    competição, não para se apontar (Miguel, 2026-08-16).---*/
a.atvhe-lin, a.atvhe-lin:hover, a.atvre-lin, a.atvre-lin:hover { color: inherit; }
.atvhe-edit { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	align-self: stretch; width: 44px; min-height: 44px; margin: -4px -8px -4px 2px;
	color: var(--f7-theme-color); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.atvhe-edit svg { width: 21px; height: 21px; }
.atvhe-edit:active svg { transform: scale(.9); }
.atvsc-cab .card-content { display: flex; align-items: center; gap: 12px; }
.atvsc-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
	background: rgba(128,128,128,.12); }
.atvsc-cab-in { flex: 1; min-width: 0; }
.atvsc-nome { font-size: 15px; text-transform: uppercase; line-height: 1.25; }
.atvsc-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; opacity: .6; padding-top: 3px; }
.atvsc-meta .atvsc-pista { color: var(--f7-theme-color); opacity: 1; }
.atvsc-meta .atvsc-staff { color: #ff9800; opacity: 1; text-transform: uppercase; font-size: 11px; }
/*---aviso de vídeo em falta: barra tocável que desce até ao formulário---*/
.atvsc-avisovid { display: flex; align-items: center; gap: 10px; margin: 0 16px 12px;
	padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,152,0,.45);
	color: #ff9800; font-size: 12.5px; line-height: 1.4; }
.atvsc-avisovid svg { width: 18px; height: 18px; flex: 0 0 auto; }
.atvsc-bloco { padding-top: 16px; }
.atvsc-tit { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase;
	letter-spacing: .5px; opacity: .55; padding-bottom: 6px; }
.atvsc-tit svg { width: 15px; height: 15px; }
.atvsc-rx { display: flex; flex-wrap: wrap; gap: 8px; }
.atvsc-chip { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; padding: 7px 16px;
	border-radius: 999px; border: 1px solid rgba(128,128,128,.35); color: var(--f7-text-color); }
.atvsc-chip.on { background: var(--f7-theme-color); border-color: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
/*---campos do score: números grandes, o separador (: + ,) entre os dois---*/
.atvsc-campos { display: flex; align-items: flex-end; gap: 10px; }
.atvsc-campo { flex: 1; min-width: 0; text-align: center; }
.atvsc-campo input { width: 100%; text-align: center; font-size: 26px; line-height: 1.2;
	padding: 6px 2px; border: 0; border-bottom: 1px solid rgba(128,128,128,.35);
	background: none; color: var(--f7-text-color); font-variant-numeric: tabular-nums; }
.atvsc-campo input:focus { border-bottom-color: var(--f7-theme-color); }
.atvsc-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .3px;
	opacity: .45; padding-top: 4px; }
.atvsc-sep { font-size: 20px; opacity: .35; padding-bottom: 18px; }
.atvsc-lista { margin: 0; }
.atvsc-lista ul { background: none; }
.atvsc-vidnota { font-size: 11.5px; line-height: 1.45; color: #ff9800; opacity: .85; padding-bottom: 10px; }
.atvsc-vid-ver { flex: 0 0 auto; padding-left: 8px; color: var(--f7-theme-color); }
.atvsc-vid-ver svg { width: 18px; height: 18px; }
/*---última gravação + código de validação + aviso + comprovativo por e-mail.
    UMA INFORMAÇÃO POR LINHA (Miguel, 2026-08-16): nada lado a lado.---*/
.atvsc-grav { margin-top: 18px; padding: 10px 0 0; border-top: 1px solid rgba(128,128,128,.2);
	font-size: 12px; font-variant-numeric: tabular-nums; }
.atvsc-grav-lin { padding-bottom: 8px; }
.atvsc-grav-l { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .45; }
/*---aviso das reclamações: o ícone alinhado com a PRIMEIRA linha do texto (o texto quebra na
    sua própria coluna, nunca por baixo do ícone)---*/
.atvsc-comp-nota { display: flex; align-items: flex-start; gap: 8px; padding-top: 2px;
	font-size: 11px; line-height: 1.5; color: #ff9800; }
.atvsc-comp-nota svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.atvsc-comp-nota span { flex: 1; min-width: 0; }
/*---botão do comprovativo: botão da casa, só contorno (o estilo vem do .button-outline)---*/
.atvsc-comp { margin-top: 14px; gap: 8px; }
.atvsc-comp svg { width: 16px; height: 16px; flex: 0 0 auto; }
.atvsc-comp.ocupado { opacity: .5; }

/* --- PERFIL do atleta/equipa dentro da atividade --- */
/*---cabeçalho: banner em cima e a foto redonda a montar-lhe em cima, como no perfil da box---*/
.atvpf-cab { overflow: hidden; position: relative; }
/*---sinal do RegyPulse, no canto do cartão: quem está na rede tem-no aqui---*/
.atvpf-pulse { position: absolute; top: 10px; right: 10px; z-index: 2;
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 50%; background: rgba(0,0,0,.35); border: 1px solid var(--f7-theme-color);
	color: var(--f7-theme-color); }
.atvpf-pulse svg { width: 19px; height: 19px; }
.atvpf-pulse:active svg { transform: scale(.9); }
.atvpf-cab .card-content { text-align: center; }
.atvpf-banner { height: 118px; overflow: hidden; }
.atvpf-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atvpf-cab.tem-banner .card-content { padding-top: 0; }
.atvpf-cab.tem-banner .atvpf-foto { margin-top: -52px; }
/* A foto sobe 52px e fica meio POR CIMA do banner, por isso tem de ser SEMPRE opaca: com um
   ficheiro de canal alfa (um PNG recortado) via-se o banner através da cara — a foto parecia um
   fantasma sobre a paisagem.
   CORES FIXAS e nenhum `var()` nesta regra, de propósito: no tema `md` o Framework7 define
   `--f7-card-bg-color: var(--f7-md-surface-1)` e `--f7-page-bg-color: var(--f7-md-surface)`, e
   essas `--f7-md-*` são geradas em JAVASCRIPT no arranque. Se por alguma razão não chegarem a
   existir, a declaração fica inválida e o fundo cai para `transparent` — que é exatamente a
   avaria a evitar. #fff e #1c1c1d são os valores que o próprio F7 usa para o cartão em claro e
   escuro, portanto o resultado é o mesmo mas não depende de nada.
   A borda é o anel que separa a foto do banner e segue a mesma cor. */
/* Deixou de ser um <img>: a foto entra como background-image (endereço inline, vindo da BD) para
   a cor sólida ficar sempre por baixo dela.
   O `position:relative; z-index` é OBRIGATÓRIO e não é decoração: sem ele, o fundo do círculo é
   pintado antes da imagem do banner (ordem de pintura do CSS — fundos de elementos não
   posicionados vêm antes do conteúdo replaced) e o banner tapa-o, deixando passar a paisagem por
   trás da cara e desenhando a linha do rodapé do banner por cima da foto.
   Ver o comentário no atvm_atleta.php, onde isto também vai inline. */
.atvpf-foto { position: relative; z-index: 2; display: block; margin-left: auto; margin-right: auto;
	width: 96px; height: 96px; border-radius: 50%;
	background-color: #fff; background-size: cover; background-position: center;
	background-repeat: no-repeat; border: 3px solid #fff; }
.dark .atvpf-foto { background-color: #1c1c1d; border-color: #1c1c1d; }
.atvpf-nome { font-size: 17px; text-transform: uppercase; line-height: 1.25; padding-top: 10px;
	display: flex; align-items: center; justify-content: center; gap: 8px; }
.atvpf-box { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; opacity: .6;
	text-transform: uppercase; margin-top: 6px; padding: 4px 12px 4px 4px; border-radius: 999px;
	background: rgba(128,128,128,.12); }
.atvpf-box img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.atvpf-prova { font-size: 12px; color: var(--f7-theme-color); text-transform: uppercase;
	letter-spacing: .3px; padding-top: 8px; }
.atvpf-prs { margin-top: 16px; gap: 8px; }
.atvpf-prs svg { width: 16px; height: 16px; }
/*---classificação geral nesta prova: o número que toda a gente pergunta---*/
.atvpf-geral { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 10px;
	padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(128,128,128,.3); }
.atvpf-geral-l { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.atvpf-geral-l em { font-style: normal; font-size: 11px; opacity: .7; }
.atvpf-geral-d { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; opacity: .55; }
.atvpf-geral.atvpf-pod-1 { border-color: #d4af37; }
.atvpf-geral.atvpf-pod-2 { border-color: #a8b0b8; }
.atvpf-geral.atvpf-pod-3 { border-color: #c8813f; }
/*---faixa de estado: a competir agora / a seguir---*/
.atvpf-live { display: flex; align-items: center; gap: 11px; margin: 0 16px 16px;
	padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(128,128,128,.3); }
.atvpf-live svg { width: 20px; height: 20px; flex: 0 0 auto; opacity: .7; }
.atvpf-live-in { flex: 1; min-width: 0; }
.atvpf-live-t { font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.atvpf-live-s { font-size: 11.5px; opacity: .6; padding-top: 2px; line-height: 1.4; }
.atvpf-live.agora { border-color: var(--f7-theme-color); }
.atvpf-live.agora svg, .atvpf-live.agora .atvpf-live-t { color: var(--f7-theme-color); opacity: 1; }
/*---ranking global: o lugar entre todos os atletas da plataforma---*/
.atvpf-rkg { display: flex; align-items: center; gap: 11px; margin-bottom: 14px;
	padding: 10px 13px; border-radius: 12px; border: 1px solid rgba(128,128,128,.3); }
.atvpf-rkg svg { width: 20px; height: 20px; flex: 0 0 auto; opacity: .55; }
.atvpf-rkg-in { flex: 1; min-width: 0; }
.atvpf-rkg-t { display: flex; align-items: baseline; gap: 7px; }
.atvpf-rkg-l { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.atvpf-rkg-l em { font-style: normal; font-size: 10px; opacity: .7; }
.atvpf-rkg-t span:last-child { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; opacity: .55; }
.atvpf-rkg-s { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45; padding-top: 2px; }
.atvpf-rkg.atvpf-pod-1 { border-color: #d4af37; }
.atvpf-rkg.atvpf-pod-2 { border-color: #a8b0b8; }
.atvpf-rkg.atvpf-pod-3 { border-color: #c8813f; }
.atvpf-rkg.atvpf-pod-1 svg, .atvpf-rkg.atvpf-pod-2 svg, .atvpf-rkg.atvpf-pod-3 svg { opacity: .9; }

/*---PALMARÉS: anel dos pódios + distintivos das medalhas---*/
.atvpf-pal { display: flex; align-items: center; gap: 18px; }
.atvpf-donut { position: relative; flex: 0 0 auto; width: 104px; height: 104px; }
.atvpf-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.atvpf-donut circle { fill: none; stroke-width: 3.2; }
.atvpf-dn-bg { stroke: rgba(128,128,128,.22); }
/*---r=15.9155 → perímetro 100: o traço é 1% e o valor entra em cru no dashoffset---*/
.atvpf-dn-v { stroke: #d4af37; stroke-linecap: round; stroke-dasharray: 100;
	stroke-dashoffset: var(--off, 100); animation: atvpfDonut 1.1s cubic-bezier(.22,.9,.3,1) both; }
@keyframes atvpfDonut { from { stroke-dashoffset: 100; } to { stroke-dashoffset: var(--off, 100); } }
@media (prefers-reduced-motion: reduce) { .atvpf-dn-v { animation: none; } }
.atvpf-dn-txt { position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; }
.atvpf-dn-n { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.atvpf-dn-n em { font-style: normal; font-size: 12px; opacity: .6; padding-left: 1px; }
.atvpf-dn-l { font-size: 8.5px; text-transform: uppercase; letter-spacing: .5px; opacity: .5;
	padding-top: 4px; }
/*---distintivos: um por medalha, mais o total de atividades---*/
.atvpf-badges { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.atvpf-bdg { flex: 1 1 60px; display: flex; flex-direction: column; align-items: center;
	gap: 1px; padding: 8px 6px; border-radius: 12px; border: 1px solid rgba(128,128,128,.25); }
.atvpf-bdg svg { width: 14px; height: 14px; opacity: .9; }
.atvpf-bdg-n { font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.atvpf-bdg-l { font-size: 8.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.atvpf-bdg-1 { border-color: rgba(212,175,55,.55); color: #d4af37; }
.atvpf-bdg-2 { border-color: rgba(168,176,184,.55); color: #a8b0b8; }
.atvpf-bdg-3 { border-color: rgba(200,129,63,.55); color: #c8813f; }
.atvpf-bdg.zero { opacity: .3; }
/*---comparação com quem está a ver---*/
.atvpf-vs { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .55;
	white-space: nowrap; }
.atvpf-vs.melhor { color: #4caf50; opacity: .9; }
.atvpf-vs.pior   { color: #ff9800; opacity: .9; }
/*---dobra dos recordes---*/
.atvpf-pr-tog { display: flex; align-items: center; justify-content: center; gap: 6px;
	padding-top: 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
	color: var(--f7-theme-color); }
.atvpf-pr-tog svg { width: 14px; height: 14px; }
/*---troféus: a estante do atleta---*/
.atvpf-trofeus { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.atvpf-trofeu { flex: 1 1 88px; max-width: 120px; text-align: center; color: var(--f7-text-color); }
/* a distinção não é link (não há atividade para abrir): nem cursor de mão, nem realce ao toque */
.atvpf-trofeu.is-dist { cursor: default; }
.atvpf-trofeu.is-dist:active { opacity: 1; }
.atvpf-trofeu img { width: 62px; height: 62px; object-fit: contain; }
.atvpf-trofeu-t { font-size: 10.5px; line-height: 1.3; opacity: .7; text-transform: uppercase;
	padding-top: 4px; }
.atvpf-trofeu-l { display: flex; align-items: baseline; justify-content: center; gap: 5px;
	padding-top: 2px; font-variant-numeric: tabular-nums; }
.atvpf-trofeu-l span { font-size: 12px; color: var(--f7-theme-color); }
.atvpf-trofeu-l em { font-style: normal; font-size: 9.5px; opacity: .45; }
/* nome da distinção ("Olho Clínico") no lugar do "3º": é texto e não um número, por isso ocupa a
   linha toda (o ano desce para baixo dele) e pode quebrar — um "3º" cabe ao lado do ano, um nome
   não cabe */
.atvpf-trofeu-l.e-dist { flex-wrap: wrap; }
.atvpf-trofeu-l .atvpf-dist-e { flex: 0 0 100%; font-size: 10px; line-height: 1.25;
	text-align: center; white-space: normal; word-break: break-word; }
/* pontos que a distinção vale para o Regy Challenge II */
.atvpf-trofeu-l .atvpf-dist-p { font-size: 11px; white-space: nowrap; }
/*---recordes---*/
.atvpf-pr { display: flex; align-items: center; gap: 12px; padding: 7px 0;
	border-bottom: 1px solid rgba(128,128,128,.14); }
.atvpf-pr:last-of-type { border-bottom: 0; }
/*---lugar na box de cada levantamento (o "Box Rnk" do legado): rótulo minúsculo em cima, o
    lugar por baixo---*/
.atvpf-pr-rk { flex: 0 0 46px; display: flex; flex-direction: column; align-items: center;
	line-height: 1.1; }
.atvpf-pr-rk-l { font-size: 7px; text-transform: uppercase; letter-spacing: .4px; opacity: .35;
	white-space: nowrap; }
.atvpf-pr-rk-n { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .75; padding-top: 1px; }
.atvpf-pr-rk-n em { font-style: normal; font-size: 8.5px; opacity: .7; }
.atvpf-pr-rk.atvpf-pod-1 .atvpf-pr-rk-n, .atvpf-pr-rk.atvpf-pod-2 .atvpf-pr-rk-n,
.atvpf-pr-rk.atvpf-pod-3 .atvpf-pr-rk-n { opacity: 1; }
.atvpf-pr-nome { flex: 1; min-width: 0; font-size: 13.5px; text-transform: uppercase; }
.atvpf-pr-v { flex: 0 0 auto; font-size: 15px; font-variant-numeric: tabular-nums; }
.atvpf-pr-v span { font-size: 10px; opacity: .5; text-transform: uppercase; padding-left: 2px; }
/*---aviso de privacidade: o atleta (ou eu) fechou a porta---*/
.atvpf-priv { display: flex; align-items: flex-start; gap: 9px; font-size: 11.5px; line-height: 1.5;
	opacity: .6; }
.atvpf-priv svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.atvpf-tit { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase;
	letter-spacing: .5px; opacity: .55; padding-bottom: 10px; }
.atvpf-tit svg { width: 15px; height: 15px; }
/* o ⓘ no título da secção: o título vive a 55% de opacidade e o ícone perdia-se lá dentro —
   na cor do tema e a cheio, lê-se como o que é (algo em que se toca) */
.atvpf-tit .info-point { display: flex; color: var(--f7-theme-color); opacity: 1; margin-left: -2px; }
.atvpf-tit .info-point svg { width: 14px; height: 14px; }
/*---membros da equipa---*/
.atvpf-mb { display: flex; align-items: center; gap: 12px; padding: 8px 0;
	border-bottom: 1px solid rgba(128,128,128,.14); color: var(--f7-text-color); }
.atvpf-mb:last-child { border-bottom: 0; }
.atvpf-mb-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
	background: rgba(128,128,128,.12); }
.atvpf-mb-nome { flex: 1; min-width: 0; font-size: 14px; text-transform: uppercase; line-height: 1.25; }
.atvpf-mb-seta { width: 17px; height: 17px; flex: 0 0 auto; color: var(--f7-theme-color); opacity: .55; }
/*---as provas desta inscrição na atividade: DUAS linhas por prova (nome + classificação;
    horário/pista + score/pontos/comparação). Antes eram cinco andares na coluna da direita e
    cada prova ocupava meio ecrã (Miguel, 2026-08-16).---*/
.atvpf-prova-lin { display: flex; flex-direction: column; gap: 2px; padding: 8px 0;
	border-bottom: 1px solid rgba(128,128,128,.14); }
.atvpf-prova-lin:last-child { border-bottom: 0; }
.atvpf-prova-r1, .atvpf-prova-r2 { display: flex; align-items: baseline; gap: 10px; }
.atvpf-prova-w { flex: 1; min-width: 0; font-size: 13.5px; }
.atvpf-prova-m { flex: 1; min-width: 0; font-size: 11px; opacity: .55;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvpf-prova-m .atvpf-pista { color: var(--f7-theme-color); opacity: 1; }
/*---direita da 2.ª linha: score, RX, pontos e comparação, tudo em fila e encostado à margem---*/
.atvpf-prova-sc { flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px;
	font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atvpf-sc-p { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45; }
/*---classificação: só o número e o metal (troféu no 1.º, medalha no 2.º/3.º)---*/
.atvpf-pos { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; line-height: 1.2;
	white-space: nowrap; }
.atvpf-pos svg { width: 14px; height: 14px; }
.atvpf-pos em { font-style: normal; font-size: 9px; opacity: .7; padding-left: 1px; }
.atvpf-pod-1 { color: #d4af37; }
.atvpf-pod-2 { color: #a8b0b8; }
.atvpf-pod-3 { color: #c8813f; }
.atvpf-pod-n { opacity: .75; }
.atvsc-guarda { margin-top: 20px; }
.atvre-pts { flex: 0 0 46px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.atvre-corte { border-top: 1px solid #ff9800; margin: 4px 0 8px; }
.atvre-corte span { display: block; font-size: 11px; color: #ff9800; padding: 4px 0 0 4px; }
.atvre-vazio { text-align: center; padding: 30px 20px; opacity: .5; }
.atvre-vazio svg { width: 34px; height: 34px; opacity: .5; }

/* --- questionário da inscrição (perguntas do organizador) --- */
.insc-q { padding-top: 14px; }
.insc-q-tit { font-size: 12.5px; letter-spacing: .2px; opacity: .75; line-height: 1.45;
	padding-bottom: 6px; }
.insc-q-conta { font-size: 11px; opacity: .5; padding: 2px 4px 0; }
.insc-q-ops { display: flex; flex-direction: column; gap: 9px; padding: 4px 2px 0; }
.insc-q-op { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.insc-q-op .icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.insc-q-op span { font-size: 13.5px; line-height: 1.45; }
.insc-q-erro { color: #f44336; font-size: 12px; padding-top: 6px; }

/* --- comprovativo de pagamento no cartão da inscrição --- */
.atvm-comprov { margin-top: 12px; }
.atvm-comprov-but { display: inline-flex; align-items: center; gap: 10px;
	height: auto; padding-top: 9px; padding-bottom: 9px; }
.atvm-comprov-but svg { width: 19px; height: 19px; flex: 0 0 auto; }
.atvm-comprov-but span { display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.atvm-comprov-but em { font-style: normal; font-size: 9.5px; opacity: .75; text-transform: none; }
.atvm-comprov-ok { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
	border-radius: 12px; border: 1px solid rgba(76,175,80,.45); }
.atvm-comprov-thumb { flex: 0 0 auto; }
.atvm-comprov-thumb img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
	background: rgba(128,128,128,.12); display: block; }
.atvm-comprov-ok-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.atvm-comprov-ok-tit { display: flex; align-items: center; gap: 7px; color: #4caf50;
	font-size: 12.5px; text-transform: uppercase; }
.atvm-comprov-ok-tit svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* --- promoções fin_promo --- */
.atvm-promo-ori { font-size: 13px; opacity: .55; text-decoration: line-through;
	font-variant-numeric: tabular-nums; }
.atvm-promo-aviso { color: #f44336; font-size: 12px; text-transform: uppercase; padding-top: 4px; }
.atvm-promo-card { margin-top: 14px; padding: 12px 14px; border-radius: 12px;
	border: 1px solid rgba(128,128,128,.25); }
.atvm-promo-chip { display: inline-flex; align-items: center; gap: 7px;
	padding: 4px 12px; border-radius: 999px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff);
	font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.atvm-promo-chip svg { width: 14px; height: 14px; }
.atvm-promo-desc { font-size: 17px; padding: 10px 0 4px; }

/* ============================================================
   CUPAO DE DESCONTO (cartao PAGAMENTO dos detalhes da atividade).
   Talao com o desconto + picotagem tracejada + nome e tempo que resta.
   Sem sombras nem desfoques: profundidade so com degrades e moldura fina.
   ============================================================ */
.atvm-cupao { position: relative; overflow: hidden; margin-top: 16px;
	display: flex; align-items: stretch; border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--f7-theme-color) 38%, transparent);
	background: linear-gradient(115deg,
		color-mix(in srgb, var(--f7-theme-color) 15%, transparent) 0%,
		color-mix(in srgb, var(--f7-theme-color) 4%, transparent) 55%, transparent 100%); }
/* brilho lento a atravessar o cupao. O keyframes vive aqui: era partilhado com os cartoes dos
   patrocinadores, que deixaram de o usar. */
@keyframes atvmSheen { 0% { background-position: 190% 0; } 60%, 100% { background-position: -90% 0; } }
.atvm-cupao:after { content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
	background-size: 300% 100%; animation: atvmSheen 6.5s ease-in-out infinite; }
.atvm-cupao-talao { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	padding: 16px 16px; min-width: 104px;
	background: linear-gradient(135deg, var(--f7-theme-color),
		color-mix(in srgb, var(--f7-theme-color) 62%, #E8A013)); }
.atvm-cupao-num { color: #fff; font-size: 27px; line-height: 1; letter-spacing: -.5px;
	font-variant-numeric: tabular-nums; white-space: nowrap;
	transform-origin: center; animation: atvmCarimbo .55s cubic-bezier(.2,.85,.3,1.35) .15s both; }
/* a picotagem: tracejado vertical entre o talao e o resto */
.atvm-cupao-picote { flex: 0 0 auto; width: 0;
	border-left: 2px dashed color-mix(in srgb, var(--f7-theme-color) 45%, transparent); }
.atvm-cupao-info { flex: 1 1 auto; min-width: 0; padding: 12px 14px; }
.atvm-cupao-nome { display: flex; align-items: center; gap: 6px;
	font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .75; }
.atvm-cupao-nome svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--f7-theme-color); }
.atvm-cupao-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atvm-cupao-desc { font-size: 16px; padding-top: 5px; color: var(--f7-theme-color);
	text-transform: uppercase; letter-spacing: .2px; }
.atvm-cupao-cd { font-size: 12px; padding-top: 5px; opacity: .75; letter-spacing: .5px; }
@keyframes atvmCarimbo {
	from { opacity: 0; transform: scale(1.6) rotate(-8deg); }
	to   { opacity: 1; transform: none; }
}

/* --- PRECO COM DESCONTO: o antigo risca-se e o novo entra por cima ---
   A sequencia conta a historia: ve-se o preco de sempre, um traco atravessa-o,
   e so entao aparece o preco novo com a etiqueta do desconto. --atvm-d escalona
   as linhas da tabela de precos por evento. */
.atvm-preco-wrap { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.atvm-preco-old { font-size: 15px; opacity: .8; font-variant-numeric: tabular-nums; }
.atvm-riscado { position: relative; animation: atvmApaga .45s ease calc(.95s + var(--atvm-d, 0s)) forwards; }
.atvm-riscado:after { content: ''; position: absolute; left: -2px; top: 54%; height: 1.5px; width: 0;
	background: currentColor; border-radius: 2px;
	animation: atvmRisca .5s cubic-bezier(.4,0,.2,1) calc(.45s + var(--atvm-d, 0s)) forwards; }
.atvm-novo { opacity: 0; transform: translateY(7px) scale(.9); transform-origin: left center;
	animation: atvmEntra .5s cubic-bezier(.2,.85,.3,1.3) calc(1.05s + var(--atvm-d, 0s)) forwards; }
.atvm-preco-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
	font-size: 11px; letter-spacing: .4px; white-space: nowrap; color: var(--wp-on-theme, #fff);
	background: linear-gradient(135deg, var(--f7-theme-color),
		color-mix(in srgb, var(--f7-theme-color) 62%, #E8A013));
	opacity: 0; transform: scale(.6) rotate(-6deg); transform-origin: center;
	animation: atvmCarimbo .5s cubic-bezier(.2,.85,.3,1.4) calc(1.2s + var(--atvm-d, 0s)) forwards; }
@keyframes atvmRisca { to { width: calc(100% + 4px); } }
@keyframes atvmApaga { to { opacity: .42; } }
@keyframes atvmEntra { to { opacity: 1; transform: none; } }
/* pastilha do preco antigo na tabela por evento: fica cinzenta, sem a cor do tema */
.atvm-ev-chip-old { color: inherit; opacity: .75; font-size: 12px;
	background: linear-gradient(140deg, rgba(128,128,128,.16), rgba(128,128,128,.05)); }

@media (prefers-reduced-motion: reduce) {
	.atvm-cupao:after, .atvm-cupao-num { animation: none; }
	.atvm-riscado { animation: none; opacity: .42; }
	.atvm-riscado:after { animation: none; width: calc(100% + 4px); }
	.atvm-novo, .atvm-preco-badge { animation: none; opacity: 1; transform: none; }
}

/* --- linha LOJA + PAGAR do cartão da inscrição ---
   O botão da loja é quadrado e fixo; o PAGAR estica pelo resto da linha. Sozinho (sem
   pagamento automático), o da loja ocupa a linha toda. */
.atvm-pag-row { display: flex; gap: 10px; margin-top: 16px; }
.atvm-pag-row .atvm-pag-go { flex: 1 1 auto; }
.atvm-loja-but { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
	gap: 8px; }
.atvm-loja-but:not(:only-child) { flex: 0 0 auto; padding: 0 16px; }
.atvm-loja-but svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- compras na loja, dentro do cartão da inscrição --- */
.atvm-loja-bloco { margin-top: 12px; padding: 10px 12px; border-radius: 12px;
	border: 1px solid rgba(128,128,128,.2); }
.atvm-loja-top { display: flex; align-items: center; gap: 7px; font-size: 12px;
	text-transform: uppercase; opacity: .6; padding-bottom: 6px; }
.atvm-loja-top svg { width: 15px; height: 15px; }
.atvm-loja-lin { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
	padding: 2px 0; }
.atvm-loja-lin span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.atvm-loja-acts { padding-top: 6px; }
.atvm-loja-acts .link { font-size: 12px; text-transform: uppercase; }
.atvm-loja-tot { display: flex; justify-content: space-between; align-items: baseline;
	margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(128,128,128,.2);
	font-size: 12px; text-transform: uppercase; opacity: .75; }
.atvm-loja-tot strong { font-size: 17px; font-weight: 500; opacity: 1;
	color: var(--f7-theme-color); font-variant-numeric: tabular-nums; }

/* ===== LOJA DA ATIVIDADE (passo entre a inscrição e o pagamento) =========================
   Grelha de dois artigos por linha com a foto a mandar. Com mais do que uma foto a fila
   desliza na horizontal com encaixe (scroll-snap) — sem biblioteca nenhuma. */
.merch { padding-bottom: 10px; }

.merch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.merch-card { border: 1px solid rgba(128,128,128,.2); border-radius: 14px; overflow: hidden;
	background: rgba(128,128,128,.05); display: flex; flex-direction: column; }
.dark .merch-card { background: rgba(255,255,255,.035); }

.merch-fotos { position: relative; }
.merch-fotos-fila { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.merch-fotos-fila::-webkit-scrollbar { display: none; }
.merch-fotos-fila img { width: 100%; height: 132px; flex: 0 0 100%; object-fit: cover;
	scroll-snap-align: center; display: block; -webkit-user-drag: none; }
.merch-sem-foto { height: 132px; display: flex; align-items: center; justify-content: center;
	background: rgba(128,128,128,.12); }
.merch-sem-foto svg { width: 30px; height: 30px; opacity: .35; }
.merch-fotos-n { position: absolute; top: 6px; left: 6px; font-size: 10px; color: #fff;
	background: rgba(0,0,0,.45); border-radius: 999px; padding: 1px 7px;
	font-variant-numeric: tabular-nums; }
.merch-fotos-pts { position: absolute; bottom: 6px; left: 0; right: 0; display: flex;
	justify-content: center; gap: 4px; }
.merch-fotos-pts i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.5); }
.merch-fotos-pts i.on { background: #fff; }

/* o + na linha do preço (não sobre a foto: perdia-se no meio da imagem) */
.merch-body-row { display: flex; align-items: center; justify-content: space-between;
	gap: 8px; padding-top: 4px; }
.merch-add { width: 34px; height: 34px; flex-shrink: 0; margin-left: auto;
	border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.merch-add svg { width: 18px; height: 18px; }

.merch-body { padding: 8px 10px 10px; }
.merch-nome { font-size: 13px; line-height: 1.35; }
.merch-preco { font-size: 15px; color: var(--f7-theme-color); padding-top: 4px;
	font-variant-numeric: tabular-nums; }
.merch-precos { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 6px; }
.merch-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px;
	border: 1px solid rgba(128,128,128,.35); color: inherit; opacity: .6;
	font-variant-numeric: tabular-nums; }
.merch-chip.on { opacity: 1; color: var(--f7-theme-color);
	border-color: rgba(var(--f7-theme-color-rgb), .6); }
.merch-chip-pct { font-size: 9px; padding-left: 4px; opacity: .8; }

/* a linha do "continuar sem comprar" leva o carrinho à direita, alinhado com o botão
   (Miguel, 2026-08-12 — antes o carrinho pousava na barra de passos e não ficou bem) */
.merch-acts { padding: 16px 4px 4px; display: flex; align-items: center; gap: 10px; }
.merch-acts .button { flex: 1; }
/* modo encomenda: sem "saltar passo", o carrinho fica sozinho — encostado à direita */
.merch-acts-enc { justify-content: flex-end; }
.merch-fechada { font-size: 13px; opacity: .7; line-height: 1.5; padding-top: 6px; }

/* --- as minhas encomendas, por baixo da montra (linha fina a separar) --- */
.merch-encs { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,.22); }
.merch-encs-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .6;
	padding-bottom: 4px; }
.merch-enc { padding: 10px 0 12px; border-bottom: 1px solid rgba(128,128,128,.14); }
.merch-enc:last-child { border-bottom: 0; padding-bottom: 2px; }
.merch-enc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding-bottom: 4px; }
.merch-enc-num { font-size: 12px; opacity: .55; }
.merch-enc-est { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
	text-transform: uppercase; letter-spacing: .4px; }
.merch-enc-est svg { width: 14px; height: 14px; flex: 0 0 auto; }
.merch-enc-est.ok { color: #4caf50; }
.merch-enc-est.pend { color: #ff9800; }
.merch-enc-lin { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
	padding: 2px 0; }
.merch-enc-lin span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.merch-enc-tot { opacity: .85; border-top: 1px dashed rgba(128,128,128,.25); margin-top: 4px;
	padding-top: 6px; }
/* ações compactas: o F7 estica botões a 100% — aqui ficam ao tamanho do texto */
.merch-enc-acts { display: flex; align-items: center; gap: 14px; padding-top: 10px; }
.merch-enc-acts .button { flex: 0 0 auto; width: auto; height: 32px; line-height: 32px;
	padding: 0 16px; font-size: 12px; display: inline-flex; align-items: center; gap: 7px; }
.merch-enc-acts .button svg { width: 15px; height: 15px; }
.merch-enc-lnk { font-size: 12px; text-transform: uppercase; }
.merch-enc-del { color: #f44336; }

/* --- comprovativo da encomenda (popup) --- */
.atv-recibo-tor { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; opacity: .6;
	text-align: center; }
.atv-recibo-num { font-size: 44px; text-align: center; color: var(--f7-theme-color);
	font-variant-numeric: tabular-nums; padding: 6px 0 2px; }
.atv-recibo-nome { text-align: center; font-size: 15px; padding-bottom: 14px; }
.atv-recibo-itens { border-top: 1px solid rgba(128,128,128,.22); padding-top: 8px; }
.atv-recibo-lin { display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
	padding: 3px 0; }
.atv-recibo-lin span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.atv-recibo-tot { border-top: 1px dashed rgba(128,128,128,.25); margin-top: 6px; padding-top: 8px;
	font-size: 15px; }
.atv-recibo-estado { display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 16px; font-size: 15px; text-transform: uppercase; }
.atv-recibo-estado svg { width: 20px; height: 20px; }
.atv-recibo-estado.ok { color: #4caf50; }
.atv-recibo-estado.pend { color: #ff9800; }
.atv-recibo-nota { text-align: center; font-size: 12px; opacity: .6; padding-top: 10px;
	line-height: 1.5; }

/* carrinho: botão CHECKOUT na linha das ações + folha com as linhas */
.merch-fab { position: relative; flex: 0 0 auto; height: 40px; padding: 0 18px;
	border-radius: 999px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff);
	display: flex; align-items: center; justify-content: center; gap: 8px; }
.merch-fab svg { width: 18px; height: 18px; flex-shrink: 0; }
.merch-fab-txt { font-size: 14px; text-transform: uppercase; }
.merch-fab-n { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px;
	border-radius: 999px; background: #e45757; color: #fff; font-size: 11px; line-height: 19px;
	text-align: center; padding: 0 4px; }
@keyframes merchBump { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.merch-bump { animation: merchBump .34s ease-out; }
@media (prefers-reduced-motion: reduce) { .merch-bump { animation: none; } }

.merch-sheet-top { display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px 8px; font-size: 13px; text-transform: uppercase; opacity: .7; }
.merch-sheet-itens { max-height: 46vh; overflow-y: auto; padding: 0 16px; }
.merch-ci { display: flex; align-items: center; gap: 10px; padding: 9px 0;
	border-bottom: 1px solid rgba(128,128,128,.15); }
.merch-ci-main { flex: 1; min-width: 0; }
.merch-ci-nome { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merch-ci-pvp { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
.merch-ci-qtd { display: flex; align-items: center; gap: 10px; }
.merch-ci-qtd svg { width: 16px; height: 16px; }
.merch-ci-qtd span { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.merch-ci-rm { color: #f44336; }
.merch-ci-rm svg { width: 17px; height: 17px; }
.merch-vazio { text-align: center; font-size: 13px; opacity: .5; padding: 26px 0; }
.merch-sheet-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px 18px; }
.merch-sheet-tot { flex: 1; font-size: 22px; color: var(--f7-theme-color);
	font-variant-numeric: tabular-nums; }
.merch-sheet-foot .button { flex: 0 0 auto; padding: 0 22px; }

/* --- PLANTEL da equipa no cartão da inscrição ---
   Uma linha por atleta: foto, nome e, no primeiro, a etiqueta de capitão. Os lugares por
   preencher ficam na lista, a tracejado — quem falta conta tanto como quem já lá está. */
.atvm-plantel-top { display: flex; align-items: baseline; justify-content: space-between;
	font-size: 13px; opacity: .6; padding: 10px 0 4px; }
.atvm-plantel-cnt { font-variant-numeric: tabular-nums; font-size: 12px; }
.atvm-plantel { display: flex; flex-direction: column; gap: 2px; }
.atvm-atl { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-width: 0; }
.atvm-atl-foto { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
	flex-shrink: 0; background: rgba(128,128,128,.15); }
.atvm-atl-nome { font-size: 14px; flex: 1; min-width: 0; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap; }
.atvm-atl-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
	color: var(--f7-theme-color); border: 1px solid rgba(var(--f7-theme-color-rgb), .35);
	border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.atvm-atl.is-vaga .atvm-atl-nome { opacity: .45; font-style: italic; }
.atvm-atl-vaga { display: flex; align-items: center; justify-content: center;
	background: none; border: 1px dashed rgba(128,128,128,.5); }
.atvm-atl-vaga svg { width: 15px; height: 15px; opacity: .45; }

/* --- rodapé do cartão da inscrição: aviso para membros que não são o capitão --- */
.atvm-so-capitao { color: #f44336; font-size: 11px; text-transform: uppercase;
	text-align: right; line-height: 1.4; max-width: 60%; }

/* --- rodapé do cartão da inscrição: alinhamento com o conteúdo ---
   O .card-footer traz 10px de padding e o conteúdo do cartão 16px, por isso o rótulo saía
   6px à esquerda de tudo o resto. Aqui o padding fica em 4px e devolvem-se os 12px que os
   botões já têm de área de toque: assim o TEXTO (rótulo à esquerda, botões à direita)
   assenta nos mesmos 16px do conteúdo, sem encolher o alvo do dedo. */
.atvm-insc-foot { padding-left: 4px; padding-right: 4px; }
.atvm-insc-estado { padding-left: 12px; font-size: 12px; opacity: .5;
	text-transform: uppercase; }
.atvm-insc-foot .atvm-so-capitao { padding-right: 12px; }

/* --- separador ATLETA: horário pessoal + reclamações --- */
.atva { padding: 8px 12px; }
.atva-card { margin-bottom: 12px; padding: 14px; border-radius: 12px;
	border: 1px solid rgba(128,128,128,.2); }
.atva-tit { font-size: 15px; text-transform: uppercase; line-height: 1.35; }
.atva-tit-cor { color: var(--f7-theme-color); }
.atva-data { font-size: 11px; opacity: .65; margin-right: 6px; }
.atva-pos { display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 999px;
	border: 1px solid var(--f7-theme-color); color: var(--f7-theme-color);
	font-size: 11px; text-transform: uppercase; }
.atva-scores { padding-top: 10px; }
.atva-score strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.atva-score span { font-size: 11px; opacity: .55; text-transform: uppercase; margin-left: 7px; }
.atva-rx { font-size: 10px; text-transform: uppercase; opacity: .55; padding-top: 3px; }
.atva-estado { font-size: 13px; opacity: .7; text-transform: uppercase; }
.atva-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
.atva-chip { font-size: 11px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
	border: 1px solid rgba(128,128,128,.35); opacity: .85; }
.atva-horas { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.atva-hora strong { font-size: 17px; color: var(--f7-theme-color); font-variant-numeric: tabular-nums; }
.atva-hora span { font-size: 11px; text-transform: uppercase; opacity: .55; margin-left: 9px; }
.atva-recl { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,.2); }
.atva-recl-linha { display: flex; align-items: center; gap: 14px; }
.atva-recl-linha .button { flex: 0 0 auto; }
.atva-recl-prazo { font-size: 12px; opacity: .75; line-height: 1.5; min-width: 0; }
.atva-recl-txt { font-size: 12.5px; line-height: 1.55; opacity: .8; padding: 10px 0; }
.atva-recl-res { margin-top: 12px; font-size: 13px; }
.atva-recl-ok { color: #4caf50; text-transform: uppercase; }
.atva-recl-nok { color: #f44336; text-transform: uppercase; }
.atva-recl-motivo { padding-top: 8px; font-size: 13px; line-height: 1.5; opacity: .8; }

/* telefone do organizador com click-to-call */
.atvm-org-tel { display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: var(--f7-theme-color); padding-top: 2px; }
.atvm-org-tel svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* custo da chamada (Decreto-Lei n.º 59/2021) — obrigatorio junto ao numero */
.atvm-org-tel-nota { font-size: 10px; line-height: 1.4; opacity: .55; padding-top: 1px; }

/* CONTA INATIVA — ecra que substitui a home e as paginas bloqueadas */
.ci-card { margin: 12px 8px 6px 8px; }
.ci-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px;
	margin-bottom: 4px; border-bottom: 1px solid rgba(128,128,128,.25); }
.ci-icon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--f7-theme-color); }
.ci-tit { font-size: 15px; line-height: 1.3; text-transform: uppercase; }
.ci-txt { font-size: 13.5px; line-height: 1.6; opacity: .8; padding-top: 12px; }
.ci-block-tit { margin-top: 20px; }
.ci-list { margin-top: 2px; }
.ci-item { font-size: 13px; line-height: 1.5; white-space: normal; }

/* VER VAGAS em modo staff (REGISTAR da ficha da aula) */
.vagas-head-alvo { display: flex; align-items: center; gap: 8px; margin-top: 10px;
	padding-top: 10px; border-top: 1px solid rgba(128,128,128,.25);
	font-size: 13px; color: var(--f7-theme-color); }
.vagas-head-alvo svg { width: 16px; height: 16px; flex: 0 0 auto; }
.vagas-but.is-force { background: rgba(255,152,0,.18); color: #ff9800; }
.vagas-but.is-force svg { width: 16px; height: 16px; }

/* ECRA REGY (menu ADMIN) — comando da TV da box */
.ecra-estado { display: flex; align-items: center; gap: 10px; margin: 12px 8px 4px 8px;
	padding: 10px 14px; border: 1px solid rgba(128,128,128,.25); border-radius: 14px; font-size: 13px; opacity: .75; }
.ecra-estado.on { opacity: 1; color: var(--f7-theme-color); border-color: currentColor; }
.ecra-estado .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.ecra-menu { margin-top: 6px; }
.ecra-menu .item-media .icon { width: 22px; height: 22px; color: var(--f7-theme-color); }
.ecra-soon { opacity: .5; }
.ecra-soon-chip { display: inline-block; margin-left: 8px; font-size: 10px; text-transform: uppercase;
	padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; opacity: .8; white-space: normal; }
.ecra-pop .page-content { padding-bottom: 30px; }
.ecra-card { margin: 12px 8px; }
.ecra-fld { --f7-input-outline-border-radius: 999px; }
.ecra-fld .item-media .icon { width: 20px; height: 20px; }
/*---ⓘ dentro da etiqueta flutuante do campo (16-09-2026): o F7 põe pointer-events:none na
     etiqueta para o toque passar ao input, e o ícone tem de voltar a apanhá-lo. Fica à esquerda
     do rótulo, que é o que explica.---*/
.ecra-fld .item-floating-label .info-point { pointer-events: auto; }
.ecra-fld .item-floating-label .info-point .icon { width: 15px; height: 15px; vertical-align: -3px; }
.ecra-send-wrap { padding: 4px 16px 20px 16px; }
.ecra-cmd-ic { text-align: center; padding: 18px 0 4px 0; }
.ecra-cmd-ic .icon { width: 42px; height: 42px; color: var(--f7-theme-color); }
.ecra-empty { text-align: center; padding: 46px 26px; opacity: .7; }
.ecra-empty .icon { width: 40px; height: 40px; opacity: .5; }
.ecra-empty-t { font-size: 15px; padding-top: 12px; }
.ecra-empty-s { font-size: 12.5px; line-height: 1.55; padding-top: 8px; opacity: .8; }
.ecra-perc-tit { font-size: 11px; text-transform: uppercase; opacity: .6; padding: 4px 16px 0 16px; }
.ecra-percs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 16px 16px; }
.ecra-perc { flex: 0 0 auto; min-width: 46px; text-align: center; font-size: 12px; padding: 6px 4px;
	border-radius: 999px; border: 1px solid rgba(128,128,128,.35); color: inherit; }
.ecra-perc.on { background: var(--f7-theme-color); border-color: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.ecra-wods-tit { font-size: 12px; text-transform: uppercase; opacity: .6; padding: 10px 16px 2px 16px; }
.ecra-wod-list .item-media .icon { width: 20px; height: 20px; color: var(--f7-theme-color); }

/* ============================ PASTILHA "NEW" (APP-WIDE) ============================
   Assinalar uma funcionalidade acabada de sair. Reutilizavel em qualquer sitio:
       <span class="regy-new">NEW</span>
   Tres animacoes ao mesmo tempo, todas de baixo custo (so transform/opacity/outline):
     · a pastilha respira (escala);
     · um anel sai dela e desvanece — feito com OUTLINE e nao com box-shadow, porque o
       outline do proprio elemento nao e cortado pelo overflow:hidden que o brilho precisa
       (e porque sombras estao fora de questao no desenho desta app);
     · um brilho atravessa o texto da esquerda para a direita.
   Cor propria (#FF4D6D) e nao a do tema: "novo" tem de destacar-se do resto da pagina,
   e e a mesma cor da pastilha NEW que ja existia nas atividades. */
.regy-new { position: relative; display: inline-flex; align-items: center; vertical-align: middle;
	margin-left: 8px; padding: 2px 7px; border-radius: 999px; overflow: hidden;
	background: #FF4D6D; color: #fff; font-size: 9px; line-height: 1.5; letter-spacing: .6px;
	text-transform: uppercase; outline: 1px solid rgba(255,77,109,0);
	animation: regy-new-respira 2.6s ease-in-out infinite, regy-new-anel 2.6s ease-out infinite; }
.regy-new::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
	transform: skewX(-18deg); animation: regy-new-brilho 2.6s ease-in-out infinite; }
@keyframes regy-new-respira { 0%, 62%, 100% { transform: scale(1); } 72% { transform: scale(1.14); } }
@keyframes regy-new-anel {
	0%, 55%   { outline-color: rgba(255,77,109,.6); outline-offset: 0; }
	85%, 100% { outline-color: rgba(255,77,109,0); outline-offset: 8px; }
}
@keyframes regy-new-brilho { 0% { left: -60%; } 45%, 100% { left: 130%; } }
/* quem pediu menos movimento fica com a pastilha, sem a chamada de atencao */
@media (prefers-reduced-motion: reduce) {
	.regy-new, .regy-new::before { animation: none; }
	.regy-new::before { display: none; }
}
/* ⚠ o anel e desenhado FORA da pastilha, e quem a acolhe corta o que sai dele: o .item-title
   das listas e o .button do F7 tem ambos overflow:hidden, e sem isto o anel morria ao chegar
   a borda. Poe-se .regy-new-wrap em quem levar a pastilha (nao se usa :has() para isto: os
   WebViews Android antigos nao o conhecem e uma regra que nao entendem e uma regra perdida). */
.regy-new-wrap { overflow: visible; white-space: normal; }

/* ECRA REGY > TREINO POR FASES — telecomando do coach: cada parte da aula a decorrer vai a
   ecra inteiro e fica la ate ele carregar em SEGUINTE. A fase no ar marca-se com a cor do
   tema (fio a esquerda + numero cheio), porque a meio da aula tem de se ver de relance. */
.ecra-fases-cab { padding: 14px 16px 4px 16px; }
.ecra-fases-mod { font-size: 17px; text-transform: uppercase; letter-spacing: .3px; }
.ecra-fases-hora { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .6; padding-top: 4px; }
.ecra-fases-hora .icon { width: 15px; height: 15px; }
.ecra-fases-list { margin-top: 10px; }
.ecra-fases-list .item-content { border-left: 3px solid transparent; }
/* numero da fase: circulo vazio ate entrar no ar */
.ecra-fase-n { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	border-radius: 999px; border: 1px solid rgba(128,128,128,.45); font-size: 13px; opacity: .7; }
.ecra-fase-ico { width: 19px; height: 19px; opacity: .35; }
.ecra-fase.on { border-left-color: var(--f7-theme-color); }
.ecra-fase.on .ecra-fase-n { background: var(--f7-theme-color); border-color: var(--f7-theme-color); color: var(--wp-on-theme, #fff); opacity: 1; }
.ecra-fase.on .item-title { color: var(--f7-theme-color); }
.ecra-fase.on .ecra-fase-ico { color: var(--f7-theme-color); opacity: 1; }
/* botoes em linha, a ocupar a largura toda (mesma decisao dos botoes do timer) */
.ecra-fases-btns { display: flex; gap: 8px; padding: 6px 16px 0 16px; }
.ecra-fases-btns .button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ecra-fases-btns .button .icon { width: 17px; height: 17px; }
.ecra-fases-nota { font-size: 12px; line-height: 1.5; opacity: .55; padding: 12px 16px 20px 16px; text-align: center; }
/* atalho no topo do treino (pages/cross/wod_details.php) para quem gere o ecra */
.wodd-ecra { padding: 10px 12px 0 12px; }
.wodd-ecra .button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wodd-ecra .button .icon { width: 17px; height: 17px; }

/* ATIVIDADES > INSCRICOES — cartao de impedimento (sem prova para o genero, dados em falta,
   prazo terminado, inscricoes fechadas). Maiusculas por CSS, como no resto da app. */
.atvm-erro { border-left: 3px solid #f44336; }
.atvm-erro-icw { padding-right: 12px; }
.atvm-erro-ic { width: 32px; height: 32px; color: #f44336; }
.atvm-erro-txt { color: #f44336; font-weight: 500; text-transform: uppercase; line-height: 1.5; }
.atvm-erro-fld { padding-top: 8px; }
.atvm-erro-fld .icon { vertical-align: middle; width: 18px; height: 18px; }
/* cabecalho do estado das inscricoes (por abrir / abertas) — mesmo desenho nos dois casos */
.atvm-insc-head { margin-bottom: 12px; border-left: 3px solid var(--f7-theme-color); }
.atvm-insc-tit { font-weight: 500; padding-bottom: 6px; }
.atvm-insc-sub { font-size: 12px; opacity: .6; }
/* comentario da inscricao (atividades): campo com o mesmo desenho dos restantes */
.atv-obs-fld { --f7-input-outline-border-radius: 18px; margin-top: 8px; }
/* o `.card .list { margin:0 }` do F7 (dois seletores) ganhava à classe sozinha e anulava a
   margem negativa SÓ neste campo — os vizinhos têm-na inline. O par com .card empata em
   especificidade e ganha por vir depois do bundle. */
.atv-obs-list, .card .atv-obs-list { margin: 8px -16px 0; }
/* ⓘ DENTRO DE UM RÓTULO DE CAMPO (F7): o floating label tem pointer-events:none — para o
   toque no rótulo ir parar ao campo — e isso engolia o clique do info point. Devolve-se o
   clique só ao ícone. Regra geral: vale para qualquer info point posto num rótulo. */
.item-floating-label .info-point,
.item-label .info-point { pointer-events: auto; position: relative; z-index: 2; }
/* cartao da inscricao: texto escrito por pessoas (notas, respostas ao questionario,
   instrucoes de pagamento). Uma linha sem espacos — IBAN, link, MB WAY — quebra em vez de
   empurrar o cartao para fora do ecra. */
.atvm-insc-card { margin-bottom: 12px; overflow-wrap: anywhere; }
/* passo do pagamento: cancelar a inscricao (accao destrutiva, discreta e no fim) */
.atvm-pag-cancel { text-align: center; padding-top: 16px; }
.atvm-pag-cancel .link { color: #f44336; font-size: 13px; text-transform: uppercase; }
/* escolha do evento: prova indisponivel (ja inscrito e a atividade so permite uma) */
.atvm-prova.is-off { opacity: .35; }
.atvm-prova-nota { font-size: 12.5px; line-height: 1.5; opacity: .7; padding: 4px 0 10px 0; }
/* passo do pagamento: equipa por fechar (faltam atletas) + codigo para enviar */
.atvm-pag-falta { margin-top: 14px; padding: 12px 14px; border-radius: 12px;
	border: 1px solid rgba(128,128,128,.3); }
.atvm-pag-falta-t { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.atvm-pag-falta-t .icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--f7-theme-color); }
.atvm-pag-falta .atvm-cod-num { padding-top: 8px; }

/* carga calculada a partir da % RM prescrita: vem do recorde pessoal do atleta, não da
   prescrição do treinador — por isso é mostrada com menos peso, ao lado da percentagem */
.rm-kg { opacity: .62; }

/* ⓘ dentro da linha do ranking global: o bloco .atvpf-rkg estica todos os svg para 20px (o
   globo), e aqui o ícone tem de ser pequeno e alinhado com o texto minúsculo da linha */
.atvpf-rkg-s .info-point { margin-right: 4px; }
.atvpf-rkg-s .info-point .icon { width: 13px; height: 13px; opacity: 1; vertical-align: -2px; }
.atvpf-rkg .info-point svg { width: 13px; height: 13px; opacity: 1; }
/* fórmula dentro de um popover de info point: linha destacada por respiração, não por peso */
.info-formula { padding: 8px 0; opacity: .75; }

/* ===== TOP 100 do ranking RegyBox (atvm_rkglobal) ===== */
/* etiqueta + seta que abrem a tabela, a partir do bloco do ranking no perfil. O bloco inteiro
   é que é tocável (menos o ⓘ), por isso isto é só o sinal de que há para onde ir. */
.atvpf-rkg.is-tap { cursor: pointer; }
.atvpf-rkg.is-tap:active { background: rgba(var(--f7-theme-color-rgb), .08); }
.atvpf-rkg-ver { display: flex; align-items: center; gap: 1px; flex: 0 0 auto;
	margin-right: -4px; color: var(--f7-theme-color); }
.atvpf-rkg-ver span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; }
.atvpf-rkg-ver svg { width: 15px !important; height: 15px !important; opacity: 1 !important; }
.atvrk-vazio { font-size: 13px; line-height: 1.5; opacity: .6; padding: 6px 0; }
.atvrk-lista { display: flex; flex-direction: column; }
.atvrk-l { display: flex; align-items: center; gap: 10px; padding: 8px 0;
	border-top: 1px solid rgba(128,128,128,.16); }
.atvrk-l:first-child { border-top: 0; }
/* a minha linha: um tinto do tema e um fio à esquerda, sem sombra */
.atvrk-l.is-eu { background: rgba(var(--f7-theme-color-rgb), .12); border-radius: 10px;
	padding-left: 8px; padding-right: 8px; margin: 2px -8px; border-top-color: transparent; }
.atvrk-pos { flex: 0 0 auto; min-width: 34px; font-size: 15px; line-height: 1;
	font-variant-numeric: tabular-nums; text-align: right; opacity: .75; }
.atvrk-pos em { font-style: normal; font-size: 9px; opacity: .7; }
.atvrk-l.atvrk-pod-1 .atvrk-pos { color: #d4af37; opacity: 1; }
.atvrk-l.atvrk-pod-2 .atvrk-pos { color: #a8b0b8; opacity: 1; }
.atvrk-l.atvrk-pod-3 .atvrk-pos { color: #c8813f; opacity: 1; }
.atvrk-foto { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.atvrk-in { flex: 1; min-width: 0; }
.atvrk-nome { font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden;
	text-overflow: ellipsis; }
.atvrk-box { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvrk-num { flex: 0 0 auto; text-align: right; }
.atvrk-pts { font-size: 14px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.atvrk-atv { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; opacity: .45; }
/* corte antes da minha linha quando fico fora do top */
.atvrk-corte { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45;
	margin: 14px 0 4px 0; padding-top: 12px; border-top: 1px dashed rgba(128,128,128,.3); }

/* DIPLOMA (fora do pódio): no legado era um certificado com o logótipo de quem organizou.
   Aqui é a mesma ideia sem depender da imagem do certificado — moldura fina, logótipo ao
   centro e o mesmo tamanho da taça, para as duas coisas alinharem na mesma fila. */
.atvpf-dip { width: 62px; height: 62px; margin: 0 auto; display: flex; align-items: center;
	justify-content: center; border: 1px solid rgba(128,128,128,.35); border-radius: 8px;
	position: relative; }
.atvpf-dip::before, .atvpf-dip::after { content: ""; position: absolute; left: 8px; right: 8px;
	height: 1px; background: rgba(128,128,128,.22); }
.atvpf-dip::before { top: 8px; }
.atvpf-dip::after  { bottom: 8px; }
.atvpf-dip img { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; }
.atvpf-dip.sem-logo::before { top: 50%; }
.atvpf-dip.sem-logo::after  { bottom: calc(50% - 6px); }
.atvpf-trofeu.is-dip .atvpf-trofeu-l span { color: var(--f7-text-color); opacity: .6; }

/* separadores do ranking (top 100 / vizinhança): fio fino e tinto do tema no ativo — sem a
   sombra que o `segmented-strong` do F7 traz */
.atvrk-tabs { display: flex; gap: 8px; margin: 2px 0 12px 0; }
.atvrk-tabs a { flex: 1 1 0; text-align: center; padding: 8px 6px; border-radius: 999px;
	border: 1px solid rgba(128,128,128,.3); color: var(--f7-text-color);
	font-size: 11px; text-transform: uppercase; letter-spacing: .3px; opacity: .6; }
.atvrk-tabs a.is-on { border-color: rgba(var(--f7-theme-color-rgb), .5);
	background: rgba(var(--f7-theme-color-rgb), .12); color: var(--f7-theme-color); opacity: 1; }
.atvrk-tot { font-style: normal; font-size: 10px; opacity: .45; margin-left: auto;
	text-transform: none; letter-spacing: 0; }
/* a linha do atleta do perfil, quando não sou eu: contorno em vez de tinto */
.atvrk-l.is-foco { border: 1px solid rgba(var(--f7-theme-color-rgb), .45); border-radius: 10px;
	padding-left: 8px; padding-right: 8px; margin: 2px -8px; }

/* ===== ESTREIA: primeira competição do atleta (perfil dentro das atividades) =====
   O pintainho a sair do ovo, em EMOJI: aparece igual em qualquer telemóvel, a cores, e não
   depende do conjunto de ícones nem de imagem nossa.
   TEMPOS (Miguel, 2026-08-16): nada arranca antes de 0,8s — a página entra a deslizar e quem
   animasse durante essa entrada passava despercebido. Depois o pintainho salta, e só a seguir
   o anel dá a volta em torno dele. Uma passagem, e fica. */
.atvpf-estreia { display: flex; align-items: center; gap: 14px; padding: 2px 0; }
.atvpf-estreia-t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.55; opacity: .72; }
.atvpf-cd { position: relative; width: 66px; height: 66px; flex: 0 0 auto; }
/* rodado para o anel começar a desenhar às 12 horas e não às 3 */
.atvpf-cd > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.atvpf-cd > svg circle { fill: none; stroke-width: 2; }
.atvpf-cd-bg { stroke: rgba(128,128,128,.22); }
.atvpf-cd-v { stroke: var(--f7-theme-color); stroke-width: 2.4; stroke-linecap: round;
	stroke-dasharray: 100 100; stroke-dashoffset: 100;
	animation: atvpf-cd-anel 1s ease-out 1.25s 1 forwards; }
@keyframes atvpf-cd-anel { to { stroke-dashoffset: 0; } }
.atvpf-cd-ico { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex;
	align-items: center; justify-content: center; font-size: 34px; line-height: 1;
	animation: atvpf-cd-ovo .75s cubic-bezier(.2,1.7,.35,1) .8s 1 both; }
@keyframes atvpf-cd-ovo {
	0%   { opacity: 0; transform: scale(.25) translateY(10px) rotate(-14deg); }
	55%  { opacity: 1; transform: scale(1.18) translateY(0) rotate(6deg); }
	100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}
/* quem pediu menos movimento vê tudo parado e completo */
@media (prefers-reduced-motion: reduce) {
	.atvpf-cd-ico { animation: none; opacity: 1; }
	.atvpf-cd-v { animation: none; stroke-dashoffset: 0; }
}

/* ===== DE ONDE VÊM OS PONTOS (detalhe de um atleta do ranking) ===== */
.atvrkd-cab { display: flex; align-items: center; gap: 12px; }
.atvrkd-foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.atvrkd-cab-in { flex: 1; min-width: 0; }
.atvrkd-nome { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden;
	text-overflow: ellipsis; }
.atvrkd-box { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvrkd-num { flex: 0 0 auto; text-align: right; }
.atvrkd-lug { font-size: 20px; line-height: 1.1; color: var(--f7-theme-color);
	font-variant-numeric: tabular-nums; }
.atvrkd-lug em { font-style: normal; font-size: 10px; opacity: .7; }
.atvrkd-tot { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45; }
.atvrkd-resumo { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; opacity: .55;
	margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(128,128,128,.16); }

.atvrkd-lista { display: flex; flex-direction: column; }
.atvrkd-l { display: flex; align-items: center; gap: 12px; padding: 9px 0;
	border-top: 1px solid rgba(128,128,128,.16); color: var(--f7-text-color); }
.atvrkd-l:first-child { border-top: 0; }
.atvrkd-l-in { flex: 1; min-width: 0; }
.atvrkd-l-t { font-size: 13px; line-height: 1.35; }
.atvrkd-l-t em { font-style: normal; font-size: 10px; opacity: .45; }
.atvrkd-l-s { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvrkd-l-c { font-size: 10.5px; opacity: .55; padding-top: 2px; }
.atvrkd-l-p { flex: 0 0 auto; font-size: 15px; color: var(--f7-theme-color);
	font-variant-numeric: tabular-nums; }
.atvrkd-lista.is-fora .atvrkd-l-t { opacity: .55; }
.atvrkd-lista.is-fora .atvrkd-l-p { color: var(--f7-text-color); opacity: .3; font-size: 13px; }
.atvrkd-corte { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45;
	margin: 16px 0 4px 0; padding-top: 12px; border-top: 1px dashed rgba(128,128,128,.3); }
/* seta na linha da tabela do ranking: sinal de que a linha abre alguma coisa */
.atvrk-l { cursor: pointer; }
.atvrk-l:active { background: rgba(var(--f7-theme-color-rgb), .08); }
.atvrk-seta { display: flex; align-items: center; flex: 0 0 auto; margin-right: -4px; opacity: .3; }
.atvrk-seta svg { width: 15px; height: 15px; }

/* nota curta por baixo do título de um cartão do perfil (ex.: outras atividades) */
.atvpf-nota { font-size: 11px; line-height: 1.5; opacity: .5; margin: -6px 0 12px 0; }

/* ===== PERFIL DO ATLETA: acrescentos de 2026-08-16 ===== */
/* pontos de ranking por ano — barras sem eixos: interessa a forma, não o valor exato */
.atvpf-anos { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(128,128,128,.16); }
.atvpf-anos-t { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; opacity: .45;
	margin-bottom: 8px; }
.atvpf-anos-g { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.atvpf-ano { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
	height: 100%; }
.atvpf-ano-v { height: var(--h); background: rgba(var(--f7-theme-color-rgb), .55);
	border-radius: 3px 3px 0 0; }
.atvpf-ano:last-child .atvpf-ano-v { background: var(--f7-theme-color); }
.atvpf-ano-l { font-size: 9px; text-align: center; opacity: .45; padding-top: 4px; }
/* partilhar: encostado à direita do título do cartão */
.atvpf-share { margin-left: auto; color: var(--f7-theme-color); display: flex; }
.atvpf-share svg { width: 16px; height: 16px; }
/* melhor resultado de sempre */
.atvpf-melhor { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
	margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(var(--f7-theme-color-rgb), .35);
	color: var(--f7-text-color); }
.atvpf-melhor svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--f7-theme-color); }
.atvpf-melhor-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45; }
.atvpf-melhor-v { font-size: 12.5px; line-height: 1.4; }
.atvpf-melhor-v span { color: var(--f7-theme-color); margin-right: 5px; }
.atvpf-melhor-v em { font-style: normal; font-size: 10px; opacity: .45; }
/* filtros da estante: a fila usa a maquinaria do .aval-chips (setas nas pontas + arrasto),
   aqui só se acerta o espaçamento, que a versão de página traz margens para lá do cartão */
.atvpf-filtros.aval-chips { gap: 7px; padding: 2px 0 4px; }
.atvpf-filtros-wrap { margin-bottom: 12px; }
/* o degradê das pontas tem de morrer na cor do CARTÃO — a da página deixava um degrau visível */
.atvpf-filtros-wrap .aval-chips-fade.right {
	background: linear-gradient(to right, transparent, var(--f7-card-bg-color) 65%); }
.atvpf-filtros-wrap .aval-chips-fade.left {
	background: linear-gradient(to left, transparent, var(--f7-card-bg-color) 65%); }
.atvpf-filtros a { flex: 0 0 auto; padding: 5px 13px; border-radius: 999px; font-size: 10.5px;
	text-transform: uppercase; letter-spacing: .3px; color: var(--f7-text-color); opacity: .55;
	border: 1px solid rgba(128,128,128,.3); }
.atvpf-filtros a.is-on { opacity: 1; color: var(--f7-theme-color);
	border-color: rgba(var(--f7-theme-color-rgb), .5); background: rgba(var(--f7-theme-color-rgb), .12); }
/* confrontos diretos */
.atvpf-h2h-p { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.atvpf-h2h-n { flex: 1 1 0; text-align: center; }
.atvpf-h2h-n span { display: block; font-size: 26px; line-height: 1.1; opacity: .5;
	font-variant-numeric: tabular-nums; }
.atvpf-h2h-n em { display: block; font-style: normal; font-size: 10px; text-transform: uppercase;
	letter-spacing: .3px; opacity: .45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvpf-h2h-n.is-win span { opacity: 1; color: var(--f7-theme-color); }
.atvpf-h2h-x { flex: 0 0 auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px;
	opacity: .35; }
.atvpf-h2h-lista { display: flex; flex-direction: column; }
.atvpf-h2h-l { display: flex; align-items: center; gap: 12px; padding: 8px 0;
	border-top: 1px solid rgba(128,128,128,.16); color: var(--f7-text-color); }
.atvpf-h2h-l-in { flex: 1; min-width: 0; }
.atvpf-h2h-l-t { font-size: 12.5px; line-height: 1.35; }
.atvpf-h2h-l-t em { font-style: normal; font-size: 10px; opacity: .45; }
.atvpf-h2h-l-r { flex: 0 0 auto; display: flex; align-items: baseline; gap: 5px; font-size: 13px;
	font-variant-numeric: tabular-nums; }
.atvpf-h2h-l-r i { font-style: normal; font-size: 9px; opacity: .35; }
.atvpf-h2h-l-r .is-melhor { color: #7dbb42; }
.atvpf-h2h-l-r .is-pior { color: #d08a3a; }
/* o meu recorde ao lado do dele */
.atvpf-pr-eu { font-size: 10px; opacity: .5; margin-left: 7px; white-space: nowrap; }
.atvpf-pr-eu.is-melhor { color: #7dbb42; opacity: .85; }
.atvpf-pr-eu.is-pior { color: #d08a3a; opacity: .85; }
/* foto do cabeçalho: agora abre em grande */
.atvpf-foto { cursor: pointer; }

/* distintivo das ATIVIDADES: é o único tocável da fila, e tem de se ver que o é sem partir o
   alinhamento dos outros — daí a seta pequena no canto em vez de mais uma linha de texto */
.atvpf-bdg.is-tap { position: relative; color: var(--f7-text-color);
	border-color: rgba(var(--f7-theme-color-rgb), .4); }
.atvpf-bdg.is-tap:active { background: rgba(var(--f7-theme-color-rgb), .08); }
.atvpf-bdg-seta { position: absolute; top: 5px; right: 5px; display: flex;
	color: var(--f7-theme-color); opacity: .7; }
.atvpf-bdg-seta svg { width: 12px !important; height: 12px !important; }

/* folha do topo dos info points longos (ver attachInfoPoints em js/app.js): a altura acompanha
   o texto até um máximo, e a partir daí faz scroll — sem isto uma explicação comprida ficava
   com a barra do CLOSE fora do ecrã */
.info-point-sheet { max-height: 84vh; }
.info-point-sheet .sheet-modal-inner { max-height: calc(84vh - var(--f7-toolbar-height, 44px)); }
.info-point-sheet .page-content { max-height: 100%; }
.info-point-sheet .block { font-size: 13px; line-height: 1.55; }

/* subtítulos e realce dentro de um info point longo: diferencia por tamanho e opacidade,
   nunca por bold */
.info-h { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
	opacity: .5; padding-bottom: 4px; }
.info-k { color: var(--f7-theme-color); }

/* CERTIFICADO no canto do azulejo: o toque no azulejo abre a atividade, este ícone abre o PDF.
   O wrapper existe só para o ícone poder ficar sobreposto sem sair da grelha. */
.atvpf-trofeu-w { position: relative; flex: 1 1 88px; max-width: 120px; display: flex; }
.atvpf-trofeu-w .atvpf-trofeu { flex: 1 1 auto; max-width: none; }
.atvpf-cert { position: absolute; top: -2px; right: -2px; width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	color: var(--f7-theme-color); opacity: .75; }
.atvpf-cert:active { opacity: 1; background: rgba(var(--f7-theme-color-rgb), .14); }
.atvpf-cert svg { width: 14px; height: 14px; }

/* HEAD TO HEAD: título ao centro, as duas caras frente a frente e o "vs" das linhas alinhado */
.atvpf-tit.is-centro { justify-content: center; }
.atvpf-h2h-f { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.atvpf-h2h-l-r span { min-width: 26px; }
.atvpf-h2h-l-r span:first-child { text-align: right; }
.atvpf-h2h-l-r span:last-child { text-align: left; }
.atvpf-h2h-l-r i { width: 18px; text-align: center; }

/* ===== PERFIL DE EQUIPA: banner + caras dos elementos ===== */
/* as caras em fila, no lugar da foto redonda do perfil individual. A METADE de cima entra pelo
   banner adentro: ocupa menos altura e amarra as duas coisas — a foto do grupo e as caras de
   quem o forma. A margem negativa é exatamente meia cara (58/2). */
.atvpf-caras { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: -29px;
	margin-bottom: 10px; position: relative; z-index: 2; }
/* mesma razão da foto individual (ver .atvpf-foto): as caras assentam sobre o banner da equipa e
   não podem deixar passar nada por trás — cores fixas, sem depender das variáveis do tema */
.atvpf-caras img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; cursor: pointer;
	background: #fff; border: 2px solid #fff; }
.dark .atvpf-caras img { background: #1c1c1d; border-color: #1c1c1d; }
/* sem banner não há sobreposição possível: as caras encostam ao topo do cartão */
.atvpf-cab:not(.tem-banner) .atvpf-caras { margin-top: 4px; }
/* A FOTO DE EQUIPA MOSTRA-SE INTEIRA (3:2) e não como faixa: é uma foto de grupo, e cortá-la
   a 3:1 deixava de fora quem está nas pontas. O convite ocupa a mesma área quando não há foto. */
.atvpf-cab.e-equipa .atvpf-banner { height: auto; aspect-ratio: 3 / 2; }
.atvpf-cab.e-equipa .atvpf-conv { height: auto; aspect-ratio: 3 / 2; }
/* máquina fotográfica sobre o banner (só para quem é da equipa) */
.atvpf-cam { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	border: 1px solid rgba(128,128,128,.35); background: var(--f7-card-bg-color);
	color: var(--f7-theme-color); }
.atvpf-cam svg { width: 17px; height: 17px; }
/* popup de escolher/recortar a foto de equipa */
.atvfe-nota { font-size: 12px; line-height: 1.5; opacity: .6; margin-bottom: 14px; }
.atvfe-previa { border: 1px solid rgba(128,128,128,.25); border-radius: 12px; overflow: hidden;
	margin-bottom: 16px; aspect-ratio: 3 / 2; display: flex; align-items: center;
	justify-content: center; }
.atvfe-previa img { width: 100%; height: 100%; object-fit: cover; }
.atvfe-vazio { opacity: .3; }
.atvfe-vazio svg { width: 34px; height: 34px; }
.atvfe-del { margin-top: 10px; color: var(--f7-theme-color); }
/* o recorte por cima de tudo */
.atvfe-modal { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 13600;
	background: rgba(0,0,0,.88); align-items: center; justify-content: center; padding: 16px; }
.atvfe-modal-in { width: 100%; max-width: 640px; }
.atvfe-crop { width: 100%; max-height: 62vh; overflow: hidden; }
.atvfe-crop img { max-width: 100%; display: block; }
.atvfe-modal-bt { display: flex; gap: 10px; padding-top: 14px; }
.atvfe-modal-bt .button { flex: 1; }

/* ===== EQUIPA: convite, capitão, força e história em comum ===== */
/* convite a pôr foto, quando não há (só para quem é da equipa) */
.atvpf-conv { position: absolute; left: 0; right: 0; top: 0; height: 104px; display: flex;
	flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 2;
	color: var(--f7-theme-color); border: 1px dashed rgba(var(--f7-theme-color-rgb), .45);
	border-radius: 12px; margin: 8px; }
.atvpf-conv.is-off { display: none; }
.atvpf-conv svg { width: 22px; height: 22px; }
.atvpf-conv span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; }
/* capitão: braçadeira no canto da foto */
.atvpf-mb-f { position: relative; flex: 0 0 auto; }
.atvpf-cap { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px;
	border-radius: 50%; background: var(--f7-theme-color); border: 2px solid var(--f7-card-bg-color); }
.atvpf-mb-in { flex: 1; min-width: 0; }
.atvpf-mb-rk { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; opacity: .45;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* força da equipa: média (nunca somatório) e a barra contra a minha equipa */
.atvpf-forca { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,.16); }
.atvpf-forca-t { display: flex; align-items: baseline; justify-content: space-between; }
.atvpf-forca-t span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .5; }
.atvpf-forca-t em { font-style: normal; font-size: 15px; color: var(--f7-theme-color);
	font-variant-numeric: tabular-nums; }
.atvpf-forca-b { height: 5px; border-radius: 3px; margin-top: 9px; overflow: hidden;
	background: rgba(var(--f7-theme-color-rgb), .22); }
.atvpf-forca-eu { height: 100%; background: var(--f7-theme-color); border-radius: 3px;
	transition: width .6s ease; }
.atvpf-forca-l { display: flex; justify-content: space-between; gap: 10px; padding-top: 5px;
	font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .45; }
.atvpf-forca-l .is-eu { color: var(--f7-theme-color); opacity: 1; }
/* história em comum */
.atvpf-jt-top { display: flex; align-items: baseline; gap: 9px; padding-bottom: 12px; }
.atvpf-jt-n { font-size: 30px; line-height: 1; color: var(--f7-theme-color);
	font-variant-numeric: tabular-nums; }
.atvpf-jt-l { flex: 1; font-size: 11px; line-height: 1.4; opacity: .55; }
/* a linha do tempo: um ponto por prova, ligados por um fio */
.atvpf-jt-linha { display: flex; align-items: center; gap: 0; padding: 4px 0 14px; overflow-x: auto;
	scrollbar-width: none; }
.atvpf-jt-linha::-webkit-scrollbar { display: none; }
.atvpf-jt-p { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex;
	align-items: center; justify-content: center; font-size: 11px; color: var(--f7-text-color);
	border: 1px solid rgba(128,128,128,.35); position: relative; margin-right: 18px; }
.atvpf-jt-p::after { content: ""; position: absolute; left: 100%; width: 18px; height: 1px;
	background: rgba(128,128,128,.3); }
.atvpf-jt-agora { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
	background: var(--f7-theme-color); }
.atvpf-jt-lista { display: flex; flex-direction: column; }
.atvpf-jt-i { display: flex; align-items: baseline; gap: 12px; padding: 7px 0;
	border-top: 1px solid rgba(128,128,128,.16); color: var(--f7-text-color); }
.atvpf-jt-i-t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.atvpf-jt-i-t em { font-style: normal; font-size: 10px; opacity: .45; }
.atvpf-jt-i-l { flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; opacity: .7; }

/* ===== CARTÃO DA EQUIPA (perfil + RegyPulse) =============================================
   Peça de vitrina: é o que vai parar às redes sociais, por isso pode dar-se ao luxo de ter
   movimento. Só CSS — o feed guarda HTML e não corre JavaScript dos posts, portanto tudo o que
   se mexe aqui tem de ser keyframes. */
.eqc { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 5;
	background: #14150f; color: #fff; isolation: isolate;
	animation: eqc-entra .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes eqc-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* SEM FOTO DE EQUIPA (nem cartaz): o cartao nao guarda o espaco da imagem. Deixa de ter racio
   fixo (passa a ter a altura do conteudo) e as caras sobem para debaixo do escalao, em vez de
   serem empurradas para o fundo por uma faixa vazia. */
.eqc-sem-foto { aspect-ratio: auto; }
.eqc-sem-foto .eqc-in { height: auto; }
.eqc-sem-foto .eqc-caras { margin-top: 16px; }
.eqc-sem-foto .eqc-veu { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 100%); }
/* a fotografia da equipa, em fundo e a respirar devagar */
.eqc-bg { position: absolute; inset: 0; z-index: 0; }
.eqc-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5;
	animation: eqc-zoom 18s ease-in-out infinite alternate; }
@keyframes eqc-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
/* véu para o texto se ler sempre, seja qual for a fotografia */
.eqc-veu { position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.88) 100%); }
/* o brilho que atravessa o cartão de tempos a tempos */
.eqc-brilho { position: absolute; top: -60%; bottom: -60%; width: 60px; left: -80px; z-index: 2;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
	transform: rotate(18deg); animation: eqc-brilha 7s ease-in-out 1.2s infinite; }
@keyframes eqc-brilha {
	0%   { left: -80px; }
	26%  { left: 118%; }
	100% { left: 118%; }
}
.eqc-in { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column;
	padding: 22px 20px 18px; }
.eqc-topo { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; opacity: .72;
	animation: eqc-sobe .5s ease-out .1s both; }
.eqc-nome { font-size: 30px; line-height: 1.08; margin-top: 8px; text-transform: uppercase;
	letter-spacing: .5px; animation: eqc-sobe .55s ease-out .2s both; }
.eqc-esc { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px; margin-top: 8px;
	color: var(--eqc-cor); animation: eqc-sobe .55s ease-out .3s both; }
@keyframes eqc-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* as caras, uma a uma */
.eqc-caras { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-bottom: 16px; }
/* caras ao DOBRO (29-08-2026, pedido do Miguel): 56 -> 112px, e 46 -> 92px nas equipas de 5-6 */
.eqc-mb { text-align: center; width: 136px; animation: eqc-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.eqc-mb img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
	border: 2px solid var(--eqc-cor); display: block; margin: 0 auto 5px; background: #14150f; }
.eqc-mb span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
	opacity: .8; line-height: 1.25; }
.eqc-n5 .eqc-mb, .eqc-n6 .eqc-mb { width: 108px; }
.eqc-n5 .eqc-mb img, .eqc-n6 .eqc-mb img { width: 92px; height: 92px; }
/* selo com o logotipo da box do atleta, no canto da cara (equipas com gente de varias boxes).
   Posicao absoluta em relacao ao .eqc-mb: assim nao e preciso um wrapper novo a volta da foto,
   e os cartoes JA PUBLICADOS (que nao tem selo) continuam a desenhar-se na mesma. */
.eqc-mb { position: relative; }
/* selo tambem ao dobro (42px), no ponto dos 45 graus da circunferencia da foto */
.eqc-mb .eqc-mb-bx { position: absolute; top: 74px; right: 6px; width: 42px; height: 42px;
	border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.7); }
.eqc-mb .eqc-mb-bx img { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0;
	object-fit: cover; background: #fff; }
.eqc-n5 .eqc-mb .eqc-mb-bx, .eqc-n6 .eqc-mb .eqc-mb-bx { top: 60px; right: 4px; width: 36px; height: 36px; }
@keyframes eqc-pop { from { opacity: 0; transform: scale(.5) translateY(10px); } to { opacity: 1; transform: none; } }
/* os números */
.eqc-stats { display: flex; gap: 10px; padding: 14px 0 12px; border-top: 1px solid rgba(255,255,255,.16); }
.eqc-st { flex: 1; animation: eqc-sobe .5s ease-out .8s both; }
.eqc-st b { display: block; font-size: 22px; font-weight: 500; line-height: 1;
	font-variant-numeric: tabular-nums; }
.eqc-st b i { font-style: normal; font-size: 11px; opacity: .7; }
.eqc-st span { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .6px;
	opacity: .6; padding-top: 4px; }
.eqc-st.eqc-pod-1 b { color: #d4af37; }
.eqc-st.eqc-pod-2 b { color: #a8b0b8; }
.eqc-st.eqc-pod-3 b { color: #c8813f; }
.eqc-rodape { display: flex; justify-content: space-between; font-size: 8.5px; letter-spacing: 1.4px;
	text-transform: uppercase; opacity: .55; }
/* quem pediu menos movimento fica com o cartão quieto */
@media (prefers-reduced-motion: reduce) {
	.eqc, .eqc-topo, .eqc-nome, .eqc-esc, .eqc-mb, .eqc-st { animation: none; opacity: 1; transform: none; }
	.eqc-bg img, .eqc-brilho { animation: none; }
	.eqc-brilho { display: none; }
}

/* botão de entrada para o cartão da equipa */
.atvpf-cardbt { display: flex; align-items: center; gap: 12px; color: var(--f7-text-color); }
.atvpf-cardbt > svg:first-child { width: 20px; height: 20px; flex: 0 0 auto; color: var(--f7-theme-color); }
.atvpf-cardbt > div { flex: 1; min-width: 0; }
.atvpf-cardbt-t { font-size: 13.5px; }
.atvpf-cardbt-s { font-size: 10.5px; opacity: .5; line-height: 1.4; }
/* deixou de ser um chevron: e o simbolo do RegyPulse, por isso leva a cor do tema e nao a
   opacidade esbatida de uma seta de navegacao */
.atvpf-cardbt-seta { width: 19px; height: 19px; flex: 0 0 auto; opacity: .85; color: var(--f7-theme-color); }
/* pré-visualização do cartão + ações */
.eqc-wrap { max-width: 420px; margin-left: auto; margin-right: auto; }
.eqc-acoes { display: flex; flex-direction: column; gap: 10px; max-width: 420px;
	margin-left: auto; margin-right: auto; }
.eqc-acoes .button.is-busy { opacity: .5; pointer-events: none; }
.eqc-acoes .button.is-off { opacity: .45; pointer-events: none; }

/* convite a ligar o RegyPulse, por baixo do cartão da equipa */
.atvpf-cardpulse { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 12px;
	border-radius: 999px; border: 1px dashed rgba(var(--f7-theme-color-rgb), .45);
	color: var(--f7-theme-color); }
.atvpf-cardpulse svg { width: 15px; height: 15px; flex: 0 0 auto; }
.atvpf-cardpulse span { font-size: 10.5px; line-height: 1.4; text-transform: uppercase;
	letter-spacing: .3px; }

/*---BUG REPORT: anexo obrigatorio. O aviso vive por baixo do botao de anexar e desaparece assim
   que ha pelo menos um ficheiro. Cor de tema (nao vermelho): e uma instrucao, nao um erro --- so
   passa a erro quando se tenta enviar sem anexo, e ai o botao pisca.---*/
.bugp-obrig { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; line-height: 1.35; color: var(--f7-theme-color); }
.bugp-obrig .icon { width: 15px; height: 15px; flex: none; }

.bugp-add-pisca { animation: bugpPisca .4s ease-in-out 3; }
@keyframes bugpPisca {
	50% { border-color: var(--f7-theme-color); background: color-mix(in srgb, var(--f7-theme-color) 14%, transparent); }
}

/* ATIVIDADES — CINCO tabs na barra de baixo (o 5.º é o perfil do próprio membro).
   Com quatro cabia tudo à vontade; com cinco, num telemóvel estreito, um rótulo comprido
   ("Notifications", e em alemão "Benachrichtigungen") partia em duas linhas, crescia a barra e
   desalinhava os ícones uns dos outros. Uma linha só, cortada com reticências: o ícone é que
   identifica o separador, o rótulo é o apoio. */
.page[data-name="atividades"] .toolbar-layout-vertical .link { min-width: 0; padding: 0 2px; }
.page[data-name="atividades"] .toolbar-layout-vertical .link span {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================================
   REGY CHALLENGE II — separador LEGADO (tab_5): o museu do Regy Challenge I.
   Tom deliberadamente diferente do resto do módulo: aqui não se conquista nada, olha-se para
   trás. Daí as maiúsculas espaçadas da faixa de abertura, o selo com coroa de louros e as
   medalhas que ficaram por ganhar em sombra em vez de escondidas — o caminho todo à vista é
   o que dá medida ao que se conquistou.
   ========================================================================================== */
.ch5-wrap { padding: 14px 14px 0; }

/* faixa de abertura: "isto é um capítulo fechado" */
.ch5-era { display: flex; align-items: center; gap: 10px; padding: 2px 0 18px; }
.ch5-era-l { flex: 1 1 auto; height: 1px; background: rgba(128,128,128,.3); }
.ch5-era-t { flex: 0 0 auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.6px; opacity: .55; }

/* a placa: selo do nível gravado */
.ch5-placa { text-align: center; padding: 6px 0 18px; }
.ch5-selo { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.ch5-selo-svg { width: 100%; height: 100%; display: block; }
.ch5-selo-n { position: absolute; top: 38px; left: 0; right: 0; text-align: center;
	font-size: 40px; line-height: 1; color: var(--f7-theme-color); font-variant-numeric: tabular-nums; }
.ch5-selo-l { position: absolute; top: 84px; left: 0; right: 0; text-align: center;
	font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; opacity: .8; }
.ch5-placa-t { font-size: 12.5px; opacity: .6; padding-top: 6px; }

/* as três marcas */
.ch5-marcas { display: flex; gap: 8px; padding-bottom: 14px; }
.ch5-marca { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
	gap: 3px; padding: 12px 6px; border-radius: 14px; border: 1px solid rgba(128,128,128,.18);
	background: var(--f7-card-bg-color, transparent); }
.ch5-marca-n { font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.ch5-marca-n em { font-style: normal; font-size: 11px; opacity: .45; }
.ch5-marca-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; text-align: center; }
.ch5-marca.e-podio .ch5-marca-n { color: var(--f7-theme-color); }
.ch5-marca.e-podio.p1 { border-color: rgba(212,175,55,.5); }
.ch5-marca.e-podio.p1 .ch5-marca-n { color: #d4af37; }
.ch5-marca.e-podio.p2 { border-color: rgba(168,178,186,.5); }
.ch5-marca.e-podio.p2 .ch5-marca-n { color: #a8b2ba; }
.ch5-marca.e-podio.p3 { border-color: rgba(180,120,70,.5); }
.ch5-marca.e-podio.p3 .ch5-marca-n { color: #b47846; }

/* percentil */
.ch5-pct { padding: 0 2px 16px; }
.ch5-pct-b { height: 4px; border-radius: 4px; background: rgba(128,128,128,.18); overflow: hidden; }
.ch5-pct-b span { display: block; height: 100%; width: var(--w); border-radius: 4px;
	background: var(--f7-theme-color); animation: ch5Barra 1s ease-out; }
@keyframes ch5Barra { from { width: 0; } }
.ch5-pct-t { font-size: 11px; opacity: .55; padding-top: 6px; text-align: center; }

/* os três metais */
.ch5-metais { display: flex; gap: 8px; padding-bottom: 20px; }
.ch5-metal { flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
	border-radius: 999px; border: 1px solid rgba(128,128,128,.18); }
.ch5-metal-d { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ch5-metal.m-o .ch5-metal-d { background: #d4af37; }
.ch5-metal.m-p .ch5-metal-d { background: #a8b2ba; }
.ch5-metal.m-b .ch5-metal-d { background: #b47846; }
.ch5-metal-n { font-size: 14px; font-variant-numeric: tabular-nums; }
.ch5-metal-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .5; }
.ch5-metal.zero { opacity: .35; }

/* a estante */
.ch5-sec-tit { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .45;
	padding: 0 2px 10px; }
.ch5-estante { display: flex; flex-direction: column; gap: 2px; }
.ch5-fam { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.14); }
.ch5-fam:last-child { border-bottom: none; }
.ch5-fam-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 7px; }
.ch5-fam-n { flex: 1 1 auto; font-size: 12px; opacity: .75; }
.ch5-fam-c { flex: 0 0 auto; font-size: 10px; opacity: .4; font-variant-numeric: tabular-nums; }
.ch5-fam-full { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 9px;
	text-transform: uppercase; letter-spacing: .5px; color: var(--f7-theme-color); }
.ch5-fam-full svg { width: 11px; height: 11px; }
.ch5-fam.completa .ch5-fam-n { opacity: 1; }
.ch5-fam-m { display: flex; gap: 10px; }
/* medalha: ganha a cores; por ganhar em sombra (o caminho todo à vista) */
.ch5-med { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.ch5-med img { width: 100%; height: 100%; object-fit: contain;
	filter: grayscale(100%) brightness(.55); opacity: .3; transition: transform .15s; }
.ch5-med.tem img { filter: none; opacity: 1; }
.ch5-med:active img { transform: scale(.92); }

/* fecho */
.ch5-fecho { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px;
	border-radius: 14px; border: 1px solid rgba(128,128,128,.18); font-size: 12px; line-height: 1.45; opacity: .8; }
.ch5-fecho svg { width: 20px; height: 20px; flex: none; color: var(--f7-theme-color); }

/* quem não participou */
.ch5-vazio { text-align: center; padding: 30px 20px 40px; }
.ch5-vazio-svg { width: 92px; height: 92px; }
.ch5-vazio-t { font-size: 15px; padding-top: 12px; }
.ch5-vazio-s { font-size: 12.5px; opacity: .55; line-height: 1.5; padding-top: 8px; max-width: 320px; margin: 0 auto; }

/* ==========================================================================================
   DISTINÇÃO (Bug Hunter) — a página do troféu (pages/atividades/incs/atvm_dist.php).
   Seis níveis, seis animações: o palco é o mesmo, o que se passa nele é que muda. Tudo em
   CSS e SVG, sem bibliotecas, sem sombras e sem blur. As animações correm UMA vez e ficam
   quietas — nada a piscar em loop atrás de um texto que se quer ler.
   ========================================================================================== */
.bgz-pal { padding: 10px 20px 0; text-align: center; }

/* o palco */
.bgz-cena { position: relative; height: 230px; display: flex; align-items: center; justify-content: center;
	overflow: hidden; }
.bgz-trofeu { position: relative; z-index: 3; animation: bgzEntra 1s cubic-bezier(.2,1.3,.4,1) both; }
.bgz-trofeu img { width: 128px; height: 128px; object-fit: contain; }
@keyframes bgzEntra { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* o bicho: emoji, que aparece igual em todos os telemóveis e a cores */
.bgz-bug { position: absolute; z-index: 2; font-size: 26px; line-height: 1; }
.bgz-bug-ouro { font-size: 24px; line-height: 1; }

/* ---------- 1 · OLHO CLÍNICO: a linha de varrimento revela o que estava escondido ---------- */
.bgz-n1 .bgz-scan { position: absolute; z-index: 4; left: -10%; top: 0; bottom: 0; width: 3px;
	background: var(--f7-theme-color); opacity: .85; animation: bgzScan 2.2s ease-in-out .2s both; }
@keyframes bgzScan { 0% { left: -10%; } 55% { left: 105%; } 56%, 100% { left: 105%; opacity: 0; } }
.bgz-n1 .bgz-bug.b1 { top: 30px; right: 16%; animation: bgzRevela 2.2s ease-out .2s both; }
@keyframes bgzRevela { 0%, 34% { opacity: 0; transform: scale(.6); } 46% { opacity: 1; transform: scale(1.25); }
	60% { opacity: 1; transform: scale(1); } 100% { opacity: .45; transform: scale(1); } }

/* ---------- 2 · CAÇADOR: o retículo fecha sobre o alvo ---------- */
.bgz-n2 .bgz-mira { position: absolute; z-index: 4; width: 190px; height: 190px;
	animation: bgzFecha 1.6s cubic-bezier(.3,1.1,.4,1) .3s both; }
.bgz-n2 .bgz-mira i { position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid var(--f7-theme-color); opacity: .55; }
.bgz-n2 .bgz-mira i:last-child { inset: 26%; opacity: .8; }
@keyframes bgzFecha { 0% { transform: scale(1.9) rotate(-25deg); opacity: 0; }
	40% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: .9; } }
.bgz-n2 .bgz-bug.foge { top: 34px; left: 18%; animation: bgzFoge 1.9s ease-in-out .1s both; }
@keyframes bgzFoge { 0% { transform: translate(0,0); opacity: 1; } 45% { transform: translate(40px,26px) rotate(20deg); }
	70% { transform: translate(10px,6px) rotate(-10deg); opacity: 1; } 100% { transform: translate(0,0) scale(.4); opacity: 0; } }

/* ---------- 3 · PERITO: o enxame debanda ---------- */
.bgz-n3 .bgz-bug.debanda { top: 50%; left: 50%; margin: -13px 0 0 -13px; opacity: 0;
	animation: bgzDeb 1.9s ease-out both; }
.bgz-n3 .bgz-bug.b1 { --dx: -120px; --dy: -70px; animation-delay: .15s; }
.bgz-n3 .bgz-bug.b2 { --dx:  125px; --dy: -46px; animation-delay: .28s; }
.bgz-n3 .bgz-bug.b3 { --dx: -100px; --dy:  62px; animation-delay: .40s; }
.bgz-n3 .bgz-bug.b4 { --dx:  110px; --dy:  70px; animation-delay: .52s; }
.bgz-n3 .bgz-bug.b5 { --dx:    0px; --dy: -95px; animation-delay: .64s; }
@keyframes bgzDeb { 0% { transform: translate(0,0) scale(.5); opacity: 0; }
	25% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(25deg); opacity: 0; } }

/* ---------- 4 · ENTRE LINHAS: o código a cair ---------- */
.bgz-n4 .bgz-cod { position: absolute; inset: 0; display: flex; justify-content: space-between;
	padding: 0 6px; overflow: hidden; }
.bgz-n4 .bgz-col { writing-mode: vertical-rl; font-size: 11px; letter-spacing: 3px; line-height: 1;
	color: var(--f7-theme-color); opacity: 0; font-family: ui-monospace, Menlo, Consolas, monospace;
	animation: bgzCai 2.6s linear both; }
.bgz-n4 .bgz-col.c0 { animation-delay: 0s; }
.bgz-n4 .bgz-col.c1 { animation-delay: .18s; }
.bgz-n4 .bgz-col.c2 { animation-delay: .36s; }
.bgz-n4 .bgz-col.c3 { animation-delay: .10s; }
.bgz-n4 .bgz-col.c4 { animation-delay: .44s; }
.bgz-n4 .bgz-col.c5 { animation-delay: .26s; }
.bgz-n4 .bgz-col.c6 { animation-delay: .52s; }
@keyframes bgzCai { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: .5; }
	70% { opacity: .28; } 100% { transform: translateY(100%); opacity: 0; } }

/* ---------- 5 · MURALHA: anéis que repelem ---------- */
.bgz-n5 .bgz-anel { position: absolute; z-index: 1; width: 150px; height: 150px; border-radius: 50%;
	border: 2px solid var(--f7-theme-color); opacity: 0; animation: bgzPulsa 2.4s ease-out both; }
.bgz-n5 .bgz-anel.a1 { animation-delay: .2s; }
.bgz-n5 .bgz-anel.a2 { animation-delay: .8s; }
.bgz-n5 .bgz-anel.a3 { animation-delay: 1.4s; }
@keyframes bgzPulsa { 0% { transform: scale(.5); opacity: 0; } 25% { opacity: .5; }
	100% { transform: scale(1.9); opacity: 0; } }
.bgz-n5 .bgz-bug.ricochete { top: 50%; margin-top: -13px; animation: bgzRico 2.2s ease-in-out both; }
.bgz-n5 .bgz-bug.b1 { left: 4%; --rx: 62px; animation-delay: .3s; }
.bgz-n5 .bgz-bug.b2 { right: 4%; --rx: -62px; animation-delay: 1.1s; }
@keyframes bgzRico { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; }
	55% { transform: translateX(var(--rx)) rotate(15deg); opacity: 1; }
	100% { transform: translateX(0) rotate(-30deg); opacity: 0; } }

/* ---------- 6 · LENDA: raios de glória e um bicho dourado em órbita ---------- */
.bgz-n6 .bgz-raios { position: absolute; z-index: 1; width: 260px; height: 260px;
	animation: bgzGira 26s linear infinite, bgzAbre 1.4s ease-out both; }
.bgz-n6 .bgz-raios span { position: absolute; top: 0; left: 50%; width: 2px; height: 50%;
	margin-left: -1px; transform-origin: 50% 100%; transform: rotate(var(--r));
	background: linear-gradient(to bottom, var(--f7-theme-color), transparent); opacity: .28; }
@keyframes bgzGira { to { transform: rotate(360deg); } }
@keyframes bgzAbre { 0% { opacity: 0; } 100% { opacity: 1; } }
.bgz-n6 .bgz-orbita { position: absolute; z-index: 4; width: 180px; height: 180px;
	animation: bgzOrb 7s linear infinite; }
.bgz-n6 .bgz-orbita .bgz-bug-ouro { position: absolute; top: -12px; left: 50%; margin-left: -12px;
	animation: bgzOrbC 7s linear infinite reverse; display: block; }
@keyframes bgzOrb { to { transform: rotate(360deg); } }
@keyframes bgzOrbC { to { transform: rotate(360deg); } }

/* identificação */
.bgz-nome { font-size: 22px; line-height: 1.2; padding-top: 4px;
	animation: bgzSobe .7s ease-out .5s both; }
.bgz-nivel { padding-top: 10px; animation: bgzSobe .7s ease-out .65s both; }
.bgz-selo { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 10px;
	text-transform: uppercase; letter-spacing: 1.4px; color: var(--f7-theme-color);
	border: 1px solid rgba(var(--f7-theme-color-rgb), .45); }
.bgz-frase { font-size: 13.5px; line-height: 1.5; opacity: .6; padding: 14px 10px 0; max-width: 340px;
	margin: 0 auto; animation: bgzSobe .7s ease-out .8s both; }
@keyframes bgzSobe { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.bgz-pts { display: flex; align-items: baseline; justify-content: center; gap: 7px; padding-top: 20px;
	animation: bgzSobe .7s ease-out .95s both; }
.bgz-pts-n { font-size: 26px; color: var(--f7-theme-color); font-variant-numeric: tabular-nums; }
.bgz-pts-l { font-size: 11px; opacity: .5; }

/* a escada dos seis níveis */
.bgz-escada { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-top: 22px;
	animation: bgzSobe .7s ease-out 1.1s both; }
.bgz-degrau { width: 26px; height: 4px; border-radius: 3px; background: rgba(128,128,128,.25); }
.bgz-degrau.feito { background: rgba(var(--f7-theme-color-rgb), .5); }
.bgz-degrau.atual { height: 8px; background: var(--f7-theme-color); }

/* pulse it */
.bgz-pulse { margin: 26px auto 0; max-width: 260px; display: inline-flex; align-items: center; gap: 8px;
	animation: bgzSobe .7s ease-out 1.25s both; }
.bgz-pulse svg { width: 17px; height: 17px; }
.bgz-pulse.is-off { opacity: .5; pointer-events: none; }
.bgz-pulse-conv { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 10px 16px;
	border-radius: 999px; border: 1px dashed rgba(128,128,128,.4); font-size: 12px; opacity: .7;
	color: var(--f7-text-color); }
.bgz-pulse-conv svg { width: 15px; height: 15px; color: var(--f7-theme-color); }

/* cartão publicado no feed do Pulse */
.bgzc-card { border: 1px solid rgba(128,128,128,.2); border-radius: 14px; overflow: hidden; }
.bgzc-topo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.bgzc-cup { width: 58px; height: 58px; object-fit: contain; flex: none; }
.bgzc-tx { min-width: 0; }
.bgzc-t { font-size: 15px; line-height: 1.25; }
.bgzc-s { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .55; padding-top: 4px; }
.bgzc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 16px; font-size: 10.5px; opacity: .6; border-top: 1px solid rgba(128,128,128,.16); }

/* quem prefere menos movimento vê a página sem animações nenhumas */
@media (prefers-reduced-motion: reduce) {
	.bgz-pal * { animation: none !important; }
	.bgz-cena .bgz-scan, .bgz-cena .bgz-bug, .bgz-cena .bgz-col { opacity: .35; }
}

/* ===== COMUNICAR COM OS INSCRITOS NUMA AULA (bug 170) — popup .popup-comunica ===== */
.popup-comunica .com-aula-card { margin: 15px; }
.popup-comunica .com-aula-nome { line-height: 1.2; padding-bottom: 6px; }
.popup-comunica .com-aula-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .75; padding-top: 4px; }
.popup-comunica .com-aula-linha i, .popup-comunica .com-aula-linha svg { width: 15px; height: 15px; flex: 0 0 auto; }
.popup-comunica .com-form { margin: 5px 0 0 0; }
.popup-comunica .com-opts { margin: 0; }
.popup-comunica .com-opts .item-media i, .popup-comunica .com-opts .item-media svg { width: 22px; height: 22px; }
.popup-comunica .com-opts .com-on { color: var(--f7-theme-color); }
.popup-comunica .com-opts .com-fixo { color: var(--f7-theme-color); opacity: .45; }
.popup-comunica .com-foto-zona { padding: 4px 15px 0 15px; }
.popup-comunica .com-foto-add { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 0; }
.popup-comunica .com-foto-add i, .popup-comunica .com-foto-add svg { width: 18px; height: 18px; }
.popup-comunica .com-foto-prev { position: relative; display: inline-block; margin-top: 6px; }
.popup-comunica .com-foto-prev img { max-width: 160px; max-height: 160px; border-radius: 10px; display: block; }
.popup-comunica .com-foto-del { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--f7-page-bg-color); border: 1px solid rgba(128,128,128,.35); display: flex; align-items: center; justify-content: center; }
.popup-comunica .com-foto-del i, .popup-comunica .com-foto-del svg { width: 15px; height: 15px; }
.popup-comunica .com-nota { display: flex; align-items: flex-start; gap: 8px; margin: 12px 15px 0 15px; font-size: 12.5px; line-height: 1.45; opacity: .7; }
.popup-comunica .com-nota i, .popup-comunica .com-nota svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.popup-comunica .com-aviso { opacity: .9; border-radius: 10px; padding: 10px 12px; background: rgba(128,128,128,.12); }
/* o cartao da aula que segue a cabeca de cada mensagem, visto no chat */
.msgs-ctx { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; opacity: .6; padding-bottom: 2px; }
.popup-comunica .com-hide { display: none !important; }
.popup-comunica .com-sub { font-size: 11.5px; opacity: .55; padding-top: 2px; }

/* ============================================================
   ECRÃ REGY · LIGAR UMA TELEVISÃO (25-08-2026)
   Escrever o link de um ecrã no comando de uma Smart TV é um
   suplício; isto é a alternativa: seis dígitos ou a câmara.
   ============================================================ */
/* o botão à cabeça do menu: é a acção que se procura quando se está
   à frente da televisão, por isso não vai perdida na lista */
.ecra-ligar-tv { padding-top: 4px; }
.ecra-ligar-tv .button { letter-spacing: 1px; }
.ecra-ligar-tv .button i, .ecra-ligar-tv .button svg { width: 20px; height: 20px; margin-right: 8px; }
.ecra-ligar-tv-sub { text-align: center; font-size: 12px; opacity: .6; padding-top: 8px; }
.ecra-ligar-tv-sub b { font-weight: 500; opacity: 1; }

/* os dois passos, dentro do popup */
.ligtv-passos { padding: 4px 4px 14px 4px; }
.ligtv-passo { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; padding-bottom: 8px; opacity: .85; }
.ligtv-passo span {
	flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 500; margin-top: 1px;
	color: var(--f7-theme-color); border: 1px solid var(--f7-theme-color);
}
.ligtv-passo b { font-weight: 500; }
.ligtv-ler { padding: 0 0 6px 0; }
.ligtv-ok { padding-top: 10px; }
.ligtv-ler .button i, .ligtv-ler .button svg,
.ligtv-ok .button i, .ligtv-ok .button svg { width: 20px; height: 20px; margin-right: 8px; }

/* ============================================================
   ECRÃ REGY · percentagens de RM à medida (25-08-2026)
   Os saltos de 5 em 5 chegam para quase toda a gente; quem
   programa a 72% ou a 87,5% escreve o valor e ele vira uma
   pastilha como as outras.
   ============================================================ */
/* ⚠ ALINHAR PELA ESQUERDA COM AS PASTILHAS. O F7 poe padding proprio no .item-content e no
   .item-inner de um campo de lista, e esses somavam-se aos 16px desta linha: a caixa nascia
   recuada em relacao as pastilhas de cima. Zeram-se os dois e o recuo passa a ser so o desta
   linha, o mesmo do resto do conteudo.
   ⚠ ALTURA IGUAL NOS DOIS. O outline do F7 nao tem altura fixa (cresce com o conteudo), por
   isso nao chega esticar o botao: fixa-se a MESMA altura no campo e no botao, que e o unico
   modo de eles ficarem mesmo iguais. */
.ecra-perc-livre { display: flex; align-items: center; gap: 8px; padding: 0 16px 16px 16px; }
/* ⚠ o recuo vinha do MARGIN-LEFT do proprio .item-content (nao do padding, nem do .item-inner
   como cheguei a supor). A classe vai encadeada com a .item-input so para ganhar peso ao F7 —
   sem isso perdia para as regras dele e era preciso um !important. */
.ecra-perc-livre .item-content.item-input {
	flex: 1 1 auto; min-width: 0;
	margin-left: 0; padding-left: 0; padding-right: 0;
	--f7-input-outline-border-radius: 999px;
}
.ecra-perc-livre .item-inner { margin-left: 0; padding-right: 10px; min-height: 46px; }
.ecra-perc-livre .item-inner:after { display: none; }   /* o fio da lista, que aqui nao pinta nada */
/* o icone da percentagem estava encostado ao fio da caixa */
.ecra-perc-livre .item-media { padding-left: 15px; min-width: 0; }
.ecra-perc-livre .button {
	flex: 0 0 auto; height: 46px; line-height: 46px;
	display: flex; align-items: center; padding: 0 18px;
}
/* a pastilha escrita à mão distingue-se por um fio a cheio, para se perceber
   que aquela não faz parte da grelha fixa e some quando for desligada */
.ecra-perc-x { border-style: dashed; }
.ecra-perc-x.on { border-style: solid; }

/* cabecalho da equipa SEM foto: o convite "adicionar foto" e uma camada absoluta colada ao topo
   do cartao, pensada para ficar POR CIMA do banner. Sem banner nao ha nada por baixo dela e a
   camada cai em cima do nome da equipa e do logotipo da box, tudo sobreposto no mesmo sitio.
   Sem foto passa a ocupar o lugar do banner, no fluxo normal, com altura propria. */
.atvpf-cab:not(.tem-banner) .atvpf-conv { position: relative; height: 104px; aspect-ratio: auto; }

/* responder ao convite de cordada a partir do cartao da Expedicao (bug 226): aceitar em destaque,
   recusar so com o fio, porque desfaz a corda para todos */
.cdx-resp { display: flex; gap: 10px; margin-top: 12px; }
.cdx-resp .button { flex: 1 1 0; min-width: 0; height: 34px; font-size: 12px;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cdx-resp-nao { border: 1px solid color-mix(in srgb, var(--f7-theme-color) 45%, transparent);
	color: var(--f7-theme-color); }

/* (REMOVIDO 2026-09-08: .wod-empty-bt, o botao "VER AULAS" do estado vazio do treino do dia na
   home. Induzia em erro — no meio do treino do dia, um botao para as aulas fazia o membro pensar
   que era ali que se marcava. Ver o comentario em pages/cross/load_wod_dia.php.) */

/* moldura da equipa no cartao da inscricao: mesmo tracejado do bloco do codigo de equipa, para
   se ver onde acaba a equipa e comeca o resto da inscricao (evento, notas, estado) */
.atvm-eqbox { margin-top: 2px; padding: 12px 14px; border-radius: 12px;
	border: 1px dashed rgba(128,128,128,.4); }
/* position+overflow: sem eles a ondulacao do toque (ripple do F7) expande-se para fora e desenha
   um circulo gigante por cima do cartao todo */
/* pastilha arredondada, no mesmo desenho dos campos da app (raio 999px, fio fino). O padding e
   igual em cima e em baixo para o texto ficar mesmo ao centro — com border-top e so padding-top
   ficava encostado ao fundo. position+overflow confinam a ondulacao do toque ao botao. */
.atvm-eqbox-perfil { display: flex; align-items: center; justify-content: center; gap: 7px;
	width: 100%; margin-top: 14px; padding: 11px 14px; font-size: 12px; text-transform: uppercase;
	letter-spacing: .4px; line-height: 1; color: var(--f7-theme-color);
	border: 1px solid rgba(128,128,128,.28); border-radius: 999px;
	position: relative; overflow: hidden; }
.atvm-eqbox-perfil svg { width: 15px; height: 15px; }

/* relogio das REGRAS ESPECIAIS de marcacao (pages/classes/classes_list.php): posicao herdada
   do porte — canto superior do cartao da aula, a seguir ao nome */
.ico-regras-aula { position: absolute; left: 90px; top: 36px; }
.ico-regras-aula > a { margin-left: 5px; }

/* PIN de seguranca do check-in (pages/login/incs/pin_box.php): numero de socio + pin no tablet */
.pin-card { margin-top: 18px; }
.pin-tit { display: flex; align-items: center; gap: 6px; }
.pin-tit .info-point { flex: 0 0 auto; line-height: 0; }
.pin-proc { font-size: 17px; opacity: 1; letter-spacing: 1px; }
.pin-bloq { color: #ff9800; }
/* O F7 puxa uma `.list` filha de .card-content-padding para cima e para os lados com margem
   NEGATIVA (-16px em toda a volta), para o campo encostar aos bordos do cartao. Era isso que
   fazia o campo subir por cima da linha do numero de socio e colar-se ao botao. Mantem-se a
   compensacao horizontal (o padding-left proprio do item afasta o cadeado do bordo) e devolve-se
   espaco em cima e em baixo. O par com .card empata em especificidade com o `.card .list` do
   bundle e ganha por vir depois — mesmo truque de .atv-obs-list. */
.pin-list, .card .pin-list { margin: 22px -16px 10px; }
.pin-list ul { background: transparent; }

/* REGISTO DE RESULTADO PELO TREINADOR (pages/cross/registar_score.php com id_aluno):
   barra com a foto e o nome do atleta a quem o resultado pertence, para nao haver enganos */
.rs-coach-bar { display: flex; align-items: center; gap: 12px; margin: 14px 12px 0; padding: 10px 14px;
	border: 1px solid rgba(128,128,128,.25); border-radius: 18px; }
.rs-coach-foto { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
	background-color: rgba(128,128,128,.15); background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center; }
.rs-coach-foto svg { width: 20px; height: 20px; opacity: .5; }
.rs-coach-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; }
.rs-coach-nome { font-size: 16px; line-height: 1.2; }

/* HOME — CARTAO "SEM NADA MARCADO" (pages/home/classes.php).
   Aparece quando o membro nao tem marcacoes e a box tem o menu das aulas/servicos ligado.
   Sem sombra e sem desfoque: o anel do icone e um pseudo-elemento com a cor do tema a 35%,
   que assim funciona em claro e em escuro sem precisar dos canais RGB da cor. */
#home-no-bookings { margin: 5px 5px 10px 5px; }
.hnb-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.hnb-ico { position: relative; flex: 0 0 auto; width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center; color: var(--f7-theme-color); }
.hnb-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1px solid var(--f7-theme-color); opacity: .35; }
.hnb-ico .icon { width: 19px; height: 19px; }
.hnb-txt { flex: 1; min-width: 0; }
.hnb-btn { flex: 0 0 auto; width: auto; height: 32px; line-height: 32px;
	padding: 0 16px; font-size: 12px; color: var(--wp-on-theme, #fff); }

/* REGYPULSE — cartoes do Regy Challenge DOBRADOS no feed (ver mais/ver menos).
   Fechado mostra so o cabecalho do cartao (titulo + pontos); a lista de niveis e o rodape
   ficam escondidos ate se tocar. Sem alturas magicas: escondem-se as partes, nao um pedaco. */
.rp-fold .chn-card-list, .rp-fold .chpk-svg, .rp-fold .chpk-foot { display: none; }
.rp-fold.open .chn-card-list, .rp-fold.open .chpk-svg, .rp-fold.open .chpk-foot { display: block; }
.rp-fold.open .chpk-foot { display: flex; }
/* a cena da montanha (cume) e sempre 360x300: fixa-se o racio para o SVG nao depender
   do height:auto, que em WebKit antigo dava alturas absurdas */
.chpk-svg svg { aspect-ratio: 360 / 300; height: auto; }
.rp-fold-btn { margin-top: 4px; padding-left: 0; padding-right: 0; opacity: .85; }

/* MENSAGENS — conversas vindas do REGYPULSE.
   A marca antes do nome e o mesmo tracado do simbolo da rede (o mesmo das marcacoes na foto),
   para se perceber de imediato que a conversa e da rede e nao do clube. */
.msgs-pulse-mark { width: 16px; height: 11px; flex: 0 0 auto; vertical-align: middle;
	margin-right: 5px; fill: none; stroke: var(--f7-theme-color);
	stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
/* barra de aviso no lugar do compositor (deixaram de ser amigos: historico fica, escrita nao) */
.msgs-bar-aviso { display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 13px; opacity: .6; padding: 14px 16px; }
.msgs-bar-aviso svg { width: 16px; height: 16px; }

/* MENSAGENS — ecra vazio explicativo (quem ainda nao trocou mensagens com ninguem).
   Sem sombras nem blur: circulos de fio fino na cor do tema e uma caixa com filete. */
.msge-wrap { padding: 54px 20px 0; text-align: center; }
.msge-ico { position: relative; width: 64px; height: 64px; margin: 0 auto;
	display: flex; align-items: center; justify-content: center; color: var(--f7-theme-color); }
.msge-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1px solid var(--f7-theme-color); opacity: .28; }
.msge-ico svg { width: 26px; height: 26px; stroke-width: 1.4; }
.msge-tit { margin-top: 14px; opacity: .6; }
.msge-card { max-width: 430px; margin: 22px auto 0; text-align: left;
	border: 1px solid rgba(128,128,128,.20); border-radius: 16px; overflow: hidden; }
.msge-row { display: flex; align-items: flex-start; gap: 12px; padding: 15px 14px; color: inherit; }
a.msge-row { text-decoration: none; }
.msge-row + .msge-row { border-top: 1px solid rgba(128,128,128,.16); }
.msge-ic { position: relative; flex: 0 0 auto; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center; color: var(--f7-theme-color); }
.msge-ic::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1px solid var(--f7-theme-color); opacity: .30; }
.msge-ic svg { width: 17px; height: 17px; }
.msge-tx { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; opacity: .78; }
.msge-ch { flex: 0 0 auto; width: 16px; height: 16px; opacity: .4; margin-top: 9px; }

/* chat: o toque longo abre o menu de apagar — sem o callout do iOS por cima */
.msgs-bubble { -webkit-touch-callout: none; }

/* HOME — MARCAÇÕES COM A COR DO TIPO DE AULA (pedido dos membros, 30-08-2026).
   Nove linhas cinzentas iguais nao se distinguem de relance. A cor volta como na app antiga, mas
   sem o ponto colorido solto: um FILETE vertical na ponta da linha (o sinal que os calendarios
   usam, legivel sem se pensar) e um HALO tenue a volta do icone, que amarra a cor ao simbolo.
   Sem sombras nem preenchimentos fortes: fio de 1px e tint de 13%.
   As duas variantes da cor vem do servidor (cor_legivel) porque o pastel do gestor desaparece no
   fundo claro e o azul escuro desaparece no escuro; aqui so se escolhe qual delas vale. */
.hb-row { position: relative; --hb-cor: var(--hb-cor-l, var(--f7-theme-color)); }
html.dark .hb-row { --hb-cor: var(--hb-cor-d, var(--f7-theme-color)); }
/* drop-in de outra box: nao ha tipo de aula desta casa, usa-se a cor do tema */
.hb-row-tema, html.dark .hb-row-tema { --hb-cor: var(--f7-theme-color); }
.hb-row::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px;
	width: 3px; border-radius: 3px; background: var(--hb-cor); }
.hb-halo { position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%; }
.hb-halo::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--hb-cor); opacity: .13; }
.hb-halo::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1px solid var(--hb-cor); opacity: .30; }
.hb-halo .icon_alert { position: relative; width: 30px; height: 30px; filter: grayscale(100%); opacity: .8;
	/* o .icon_alert ja nao nasce inclinado (ver a regra la em cima); o transform fica a zero
	   de proposito, para o caso de alguem voltar a por rotacao na classe base */
	transform: none; }
/* no fundo escuro o icone em tons de cinzento ficava murcho dentro do halo: levanta-se o brilho */
html.dark .hb-halo .icon_alert { filter: grayscale(100%) brightness(1.8); opacity: .9; }
/* as regras do chat a seguir a lista de conversas: mesmo cartao, mais recolhido */
.msge-rodape { padding-top: 18px; padding-bottom: 6px; }
.msge-rodape .msge-card { opacity: .82; }

/* TEMA AUTOMATICO PELA LUZ (pages/configs/visual.php) — cartao da opcao + folha de afinacao */
.ta-card { margin-left: 20px; margin-right: 20px; }
.ta-linha { display: flex; align-items: center; gap: 10px; }
.ta-tit { flex: 1; min-width: 0; font-size: 16px; }
.ta-sub { padding-top: 6px; line-height: 1.35; }
.ta-luz { font-size: 15px; text-align: center; padding: 6px 0 2px; color: var(--f7-theme-color); }
.ta-luz-nota { text-align: center; padding: 0 10px 16px; line-height: 1.3; }
.ta-knob { padding-bottom: 18px; }
.ta-knob-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .85; padding-bottom: 6px; }
.ta-knob-lbl b { margin-left: auto; font-weight: 500; opacity: 1; }
/* opcao AUTOMATICO na fila claro/auto/escuro: CINZENTO — fica no meio do branco e do preto, que e
   exatamente o que faz (ora um, ora outro). A cor do tema aqui competia com as amostras de cor
   logo abaixo e dava a entender que a escolha era de cor, e nao de modo. */
/*---as três escolhas de esquema (claro · automático · escuro) eram os únicos cantos vivos do ecrã
     Visual — tudo o resto (opções de contraste, de tamanho, de esquema) usa 12px. Miguel, 2026-09-06.
     O `overflow:hidden` guarda o visto dentro do canto quando ele encosta à borda.---*/
.demo-theme-picker { border-radius: 12px; overflow: hidden; }
.ta-pick { background: #8e8e93; }
.ta-pick-txt { color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }

/* CONTRASTE DO TEXTO — escolha do membro (Configuracoes > Visual). 4 niveis; o 2 e o de sempre.
   PORQUE EXISTE: o Framework7 nao usa preto nem branco puros (claro #212121, escuro branco a 87%)
   e a app escreve o texto secundario com OPACIDADE (.t_05 a .t_09 e ~600 sitios em linha). As duas
   coisas multiplicam-se: no escuro, um .t_06 dava ~52% de branco sobre preto — e havia membros que
   nao conseguiam ler. Mexer nesta variavel arrasta o texto principal E todos os secundarios, porque
   a opacidade herda a cor.
   A cor do TEMA nao entra aqui de proposito: links e botoes ficam como o clube os definiu. */
html.ctr1 { --f7-text-color: #3a3a3a; }
html.ctr2 { --f7-text-color: #212121; }   /* omissao: igual ao Framework7 */
html.ctr3 { --f7-text-color: #101010; }
html.ctr4 { --f7-text-color: #000; }
html.dark.ctr1 { --f7-text-color: rgba(255,255,255,.72); }
html.dark.ctr2 { --f7-text-color: rgba(255,255,255,.87); }
html.dark.ctr3 { --f7-text-color: rgba(255,255,255,.95); }
html.dark.ctr4 { --f7-text-color: #fff; }
/* seletor do contraste (Configuracoes > Visual): quatro amostras "Aa" nas cores reais de cada
   nivel, para se escolher pelo que se ve e nao pelo nome */
.ctr-linha { display: flex; gap: 10px; }
.ctr-op { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 12px 4px; border: 1px solid rgba(128,128,128,.25); border-radius: 12px; color: inherit; }
.ctr-op.is-on { border-color: var(--f7-theme-color); }
.ctr-am { font-size: 20px; line-height: 1; }
.ctr-lbl { font-size: 11px; opacity: .7; }
.ctr-am-1 { color: #3a3a3a; }
.ctr-am-2 { color: #212121; }
.ctr-am-3 { color: #101010; }
.ctr-am-4 { color: #000; }
html.dark .ctr-am-1 { color: rgba(255,255,255,.72); }
html.dark .ctr-am-2 { color: rgba(255,255,255,.87); }
html.dark .ctr-am-3 { color: rgba(255,255,255,.95); }
html.dark .ctr-am-4 { color: #fff; }
/* bloqueio do gestor: as cores ficam a ver-se, mas nao se mexem */
.vis-lock { pointer-events: none; opacity: .45; }

/* ESQUEMA DE CORES CLASSICO — escolha do membro (Configuracoes > Visual), Miguel 2026-09-05.
   PORQUE EXISTE: o Framework7 v8 (Material 3) pinta as SUPERFICIES — fundo da pagina, cartoes,
   listas, barras, dialogos — com tons derivados da cor do tema (--f7-md-surface-1..5, que ele
   injeta num <style> em :root / .dark). Ha membros que preferem o "preto no branco" das versoes
   antigas. Aqui neutralizam-se essas variaveis: branco puro no claro, preto/cinzentos neutros no
   escuro. A cor do TEMA fica intacta (botoes, links, realces), e o contraste do texto (ctrN)
   continua a mandar no --f7-text-color. html.esq-classico (0,1,1) ganha ao :root do F7 (0,1,0);
   html.dark.esq-classico (0,2,1) ganha ao .dark (0,1,0). */
html.esq-classico {
	--f7-md-surface: #fff; --f7-md-surface-1: #fff; --f7-md-surface-2: #fff; --f7-md-surface-2-rgb: 255,255,255;
	--f7-md-surface-3: #fff; --f7-md-surface-5: #f2f2f2; --f7-md-surface-variant: #efefef;
	--f7-md-on-surface: #000; --f7-md-on-surface-variant: #555; --f7-md-on-surface-variant-rgb: 85,85,85;
	--f7-md-outline: #c9c9c9; --f7-md-outline-variant: #e2e2e2; --f7-md-inverse-surface: #222;
	--f7-page-bg-color: #fff; --f7-bars-bg-color: #fff; --f7-bars-bg-color-rgb: 255,255,255;
	--f7-card-bg-color: #fff; --f7-list-bg-color: #fff; --f7-block-strong-bg-color: #fff;
}
html.dark.esq-classico {
	--f7-md-surface: #000; --f7-md-surface-1: #141414; --f7-md-surface-2: #121212; --f7-md-surface-2-rgb: 18,18,18;
	--f7-md-surface-3: #1a1a1a; --f7-md-surface-5: #242424; --f7-md-surface-variant: #222;
	--f7-md-on-surface: #fff; --f7-md-on-surface-variant: #bdbdbd; --f7-md-on-surface-variant-rgb: 189,189,189;
	--f7-md-outline: #3a3a3a; --f7-md-outline-variant: #2a2a2a; --f7-md-inverse-surface: #eee;
	--f7-page-bg-color: #000; --f7-bars-bg-color: #121212; --f7-bars-bg-color-rgb: 18,18,18;
	--f7-card-bg-color: #141414; --f7-list-bg-color: #141414; --f7-block-strong-bg-color: #141414;
}
/* TAMANHO DA LETRA — escolha do membro (Configuracoes > Visual), Miguel 2026-09-05.
   A app escreve TUDO em px (a propria e o Framework7), por isso mexer num font-size nao chega:
   o `zoom` na raiz escala letra, icones e espacamentos em proporcao, na app inteira e de uma vez.
   Android WebView e iOS WKWebView suportam-no. 1 = normal (sem regra), 2 = grande, 3 = muito
   grande. Se alguma coisa sair do sitio num nivel, o membro volta ao normal — esta dito no ecra. */
html.fnt2 { zoom: 1.12; }
html.fnt3 { zoom: 1.25; }
/* FULLCALENDAR sob zoom (Miguel, 2026-09-05): o FC mede larguras e alturas com
   getBoundingClientRect — pixeis do ECRA, ja multiplicados pelo zoom — e escreve-as em px do
   ELEMENTO. Resultado: tabela 12% mais larga (o domingo saia do ecra) e linhas com espaco a mais.
   Contra-zoom SO no #calendar: la dentro o zoom efetivo volta a 1 e o FC (e o calendar_picker,
   que mede da mesma maneira) voltam a medir certo. Para a letra do calendario crescer na mesma,
   os tamanhos proprios (numero do dia, cabecalho, dia da semana) sobem na mesma proporcao. */
html.fnt2 #calendar { zoom: calc(1 / 1.12); }
html.fnt3 #calendar { zoom: calc(1 / 1.25); }
html.fnt2 .fc-f7-daynum { font-size: 18px; }
html.fnt3 .fc-f7-daynum { font-size: 20px; }
html.fnt2 .fc-col-header-cell-cushion { font-size: 13.5px; }
html.fnt3 .fc-col-header-cell-cushion { font-size: 15px; }
html.fnt2 .fc-f7-wd { font-size: 11px; }
html.fnt3 .fc-f7-wd { font-size: 12.5px; }
/* amostras do seletor: "Aa" no tamanho relativo de cada nivel */
.fnt-am-1 { font-size: 20px; }
.fnt-am-2 { font-size: 23px; }
.fnt-am-3 { font-size: 26px; }

/* seletor do esquema (duas amostras: cartao tingido vs cartao neutro) */
.esq-linha { display: flex; gap: 10px; }
.esq-op { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 12px 6px; border: 1px solid rgba(128,128,128,.25); border-radius: 12px; color: inherit; }
.esq-op.is-on { border-color: var(--f7-theme-color); }
.esq-am { width: 64px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid rgba(128,128,128,.25); }
/* (a 1.ª linha de background e o recurso para WebViews antigas sem color-mix) */
.esq-am-moderno { background: rgba(128,128,128,.15); background: color-mix(in srgb, var(--f7-theme-color) 12%, #fff); color: #212121; }
.esq-am-classico { background: #fff; color: #000; }
html.dark .esq-am-moderno { background: rgba(128,128,128,.2); background: color-mix(in srgb, var(--f7-theme-color) 14%, #121212); color: rgba(255,255,255,.87); }
html.dark .esq-am-classico { background: #000; color: #fff; }
.esq-lbl { font-size: 11px; opacity: .7; }
.esq-am svg { width: 22px; height: 22px; }
.esq-am-moderno svg { color: var(--f7-theme-color); }

/* AS PAGINAS SO DESLIZAM NA VERTICAL — regra app-wide (Miguel, 2026-09-07). No iOS o ecra Visual
   abanava da esquerda para a direita: o .page-content do Framework7 e overflow:auto nos DOIS eixos,
   e basta um filho a sair do ecra por um pixel para o iOS deixar arrastar para o lado. Ali o filho
   eram os nomes das cores ("Deeppurple" a 10px nao cabe numa coluna de ~48px de iPhone e sai da
   celula; o que sai da ultima coluna sai do ecra e conta para o scroll). Mas o mesmo acontece em
   qualquer pagina com um distintivo a right:-7px, uma fita rodada, um brilho decorativo a sair do
   cartao ou um texto sem espacos — e com a letra grande (zoom) tudo isto e mais provavel. Em vez de
   cacar cada caso, o scroll horizontal do .page-content fica desligado em toda a app (o
   classes_historic.php ja o fazia sozinho desde 27-08-2026). Nada se perde: o conteudo largo que
   precisa de deslizar (tabelas das graduacoes, filas de chips, faixas de cartazes, semanas do plano)
   ja vive dentro do seu proprio contentor com overflow-x:auto, que continua a funcionar.
   overflow-wrap:break-word: um e-mail ou link comprido num cartao parte a linha em vez de ficar
   cortado na borda (nao mexe no nowrap+ellipsis das listas, que nao quebra linha de qualquer modo). */
.page-content { overflow-x: hidden; overflow-wrap: break-word; }
/* ecra Visual: os nomes das cores cortam com reticencias em vez de sairem da celula */
.vis-cor-lbl { font-size: 10px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ATIVIDADES — nota de acesso na lista vazia (opcao 231: a box so deixa ver as suas atividades).
   Caixa discreta, alinhada a esquerda, com o icone de definicoes na cor do tema: diz que e uma
   configuracao da box e nao um erro. Sem sombras. */
.atv-acesso-nota { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 18px auto 0; max-width: 440px;
	padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(128,128,128,.25); font-size: 13px; line-height: 1.45; opacity: .85; }
.atv-acesso-nota svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--f7-theme-color); }

/* TRANSICAO SUAVE AO MUDAR DE TEMA (0,5s). So vale enquanto o html tem .tema-a-mudar, posta pelo
   window.tema_transicao() e retirada 600ms depois — uma transicao permanente apanharia tambem as
   animacoes que ja existem na app. Animam-se so as CORES: o transform e a opacity ficam de fora,
   porque sao esses que dao o movimento das listas a entrar e das folhas a abrir. */
/* ⚠ NUNCA usar `*` nem `!important` aqui (2026-09-02). A primeira versão desta regra fazia
   `html.tema-a-mudar * { transition: ... !important }` e TRAVAVA A APP INTEIRA: `transition` é uma
   propriedade abreviada, portanto substituía as transições que os elementos já tinham. O
   Framework7 espera pelo `transitionend` dessas para dar por terminada a abertura de painéis,
   folhas e popups — sem ele, o modal fica a meio, o fundo escuro nunca sai e nada responde. Com o
   tema automático a mudar sozinho, bastava apanhar uma animação a meio.
   A lista abaixo é deliberadamente curta: só as superfícies onde a cor muda mesmo. */
html.tema-a-mudar body,
html.tema-a-mudar .page,
html.tema-a-mudar .page-content,
html.tema-a-mudar .navbar-bg,
html.tema-a-mudar .toolbar,
html.tema-a-mudar .card,
html.tema-a-mudar .list ul,
html.tema-a-mudar .item-content,
html.tema-a-mudar .block {
	transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}

/* ENDERECOS NO MEIO DO TEXTO (txt_links no PHP): o desenho do legado, que o Miguel prefere —
   icone + "ABRIR LINK" / "VER VIDEO" na cor do tema, nunca o endereco (fica no href). Maiusculas
   por CSS, como os botoes, para a traducao ficar em caixa normal. */
.ext-link { display: inline-flex; align-items: center; gap: 10px; color: var(--f7-theme-color);
	text-transform: uppercase; letter-spacing: .3px; font-size: 15px; line-height: 1.2;
	padding: 4px 0; text-decoration: none; }
.ext-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* foto que abre na galeria com zoom (handler global img.img-zoom em js/app.js) */
img.img-zoom { cursor: zoom-in; }

/* FICHA DA SALA DE EXERCICIO (staff): botao ▼ ao lado das horas que abre a escolha da janela
   horaria (popup das vagas em modo ver) e o × que limpa o filtro — port do horas_musc.php */
.cd-horas-bt, .cd-horas-x { display: inline-flex; vertical-align: middle; margin-left: 8px; color: var(--f7-theme-color); }
.cd-horas-bt .icon, .cd-horas-x .icon { width: 22px; height: 22px; }
.cd-horas-x { opacity: .75; }
.vagas-ver-pick .icon { width: 18px; height: 18px; }

/* AS TUAS PROVAS — separador ATLETA (porte do horario_atleta.php do legado).
   Cartoes por prova: por correr (data/WOD, chips de pista/arena, briefing, aquecimento, inicio) ou
   classificada (posicao, scores em grande com legenda, ou o estado; e a reclamacao dentro do prazo). */
.atvha { padding: 6px 0 4px; }
.atvha-tit { display: flex; align-items: center; gap: 8px; padding: 6px 18px 8px; font-size: 12px;
	letter-spacing: 1px; text-transform: uppercase; color: var(--f7-theme-color); }
.atvha-tit svg { width: 16px; height: 16px; }
.atvha-vazio { padding: 4px 18px 10px; font-size: 13px; opacity: .6; }
.atvha-card { margin: 0 12px 10px; }
.atvha-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.atvha-nome { font-size: 15px; line-height: 1.35; }
.atvha-data { display: inline-block; font-size: 11px; opacity: .6; margin-right: 8px; text-transform: uppercase; }
.atvha-chips { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.atvha-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35);
	white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; }
.atvha-chip-pos { border-color: var(--f7-theme-color); color: var(--f7-theme-color); }
/*---as três horas alinham pelo FUNDO: a do início do WOD é maior (é a que interessa) e, sem isto,
     empurrava a sua legenda para baixo da das outras duas — três rótulos em degrau. Alinhando os
     blocos por baixo, as legendas ficam todas na mesma linha e o número grande cresce para cima.---*/
.atvha-horas { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; align-items: flex-end; }
.atvha-hora { display: flex; flex-direction: column; justify-content: flex-end; }
.atvha-hora strong { font-size: 18px; font-weight: 500; color: var(--f7-theme-color); line-height: 1.1; }
.atvha-hora span { font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.atvha-hora-ini strong { font-size: 22px; }
.atvha-scores { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.atvha-score { display: flex; flex-direction: column; }
.atvha-score strong { font-size: 22px; font-weight: 500; line-height: 1.1; }
.atvha-score span { font-size: 11px; opacity: .6; text-transform: uppercase; margin-top: 2px; }
.atvha-estado { margin-top: 8px; font-size: 14px; opacity: .8; }
/* reclamacao */
.atvha-rec { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,.18); }
.atvha-rec-lin { display: flex; align-items: center; gap: 14px; }
.atvha-rec-bt { flex: 0 0 auto; width: auto; padding: 0 18px; }
.atvha-rec-prazo { font-size: 12px; opacity: .75; line-height: 1.5; }
.atvha-cd { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.atvha-cd-fim { color: #f44336; }
.atvha-rec-form { margin-top: 12px; }
.atvha-rec-txt { font-size: 13px; line-height: 1.5; opacity: .8; padding: 10px 12px; margin-bottom: 8px;
	border: 1px solid rgba(128,128,128,.2); border-radius: 12px; }
.atvha-rec-res { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.atvha-rec-res svg { width: 16px; height: 16px; }
.atvha-rec-ok { color: #4caf50; }
.atvha-rec-ko { color: #f44336; }
.atvha-rec-motivo { margin-top: 6px; font-size: 13px; opacity: .8; }

/* MEMBER GET MEMBER — cartão da campanha (home e Atividades) e ecrã da campanha. */
.mgm-home { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.mgm-home-hm { margin: 10px 5px; }   /* na home: a mesma largura dos outros cartões de alerta (margem 5px de cada lado) */
.mgm-home-atv { margin-top: 8px; }
.mgm-home-ic { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.mgm-home-ic svg { width: 22px; height: 22px; }
.mgm-home-tx { flex: 1; min-width: 0; }
.mgm-home-tit { font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: .3px; color: var(--f7-theme-color); }   /* sem negrito: destaca-se pelas maiúsculas e pela cor do tema */
.mgm-home-sub { font-size: 12px; opacity: .6; margin-top: 2px; }
.mgm-home-ch { width: 18px; height: 18px; opacity: .35; }
.mgm-hero { padding: 22px 18px; text-align: center; }
.mgm-hero-ic { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.mgm-hero-ic svg { width: 30px; height: 30px; }
.mgm-hero-tit { font-size: 17px; font-weight: 400; text-transform: uppercase; letter-spacing: .4px; color: var(--f7-theme-color); }   /* sem negrito, como o cartão da home */
/* o que se ganha / o que já se ganhou: uma linha por prémio, o valor em cima e o "quando" por baixo */
.mgm-ganhos { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.mgm-ganho { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(128,128,128,.2); }
.mgm-ganho-ic { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(var(--f7-theme-color-rgb), .15); color: var(--f7-theme-color); }
.mgm-ganho-ic svg { width: 20px; height: 20px; }
.mgm-ganho-tx { flex: 1; min-width: 0; }
.mgm-ganho-v { font-size: 15px; line-height: 1.3; }
.mgm-ganho-q { font-size: 12px; line-height: 1.35; opacity: .6; margin-top: 3px; }
.mgm-hero-txt { font-size: 14px; line-height: 1.6; opacity: .8; margin-top: 10px; text-align: left; }
.mgm-link-card { padding: 14px 16px; }
.mgm-link-in { width: 100%; font-size: 12px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(128,128,128,.3);
	background: transparent; color: inherit; }
.mgm-share { display: flex; gap: 8px; margin-top: 12px; }
.mgm-share .button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mgm-share svg { width: 16px; height: 16px; }
.mgm-bt-wa { background: #25D366; color: #fff; }
.mgm-nums { display: flex; gap: 8px; padding: 0 16px; }
.mgm-num { flex: 1; text-align: center; padding: 14px 6px; border-radius: 12px; border: 1px solid rgba(128,128,128,.2); font-size: 11px; opacity: .8; }
.mgm-num span { display: block; font-size: 22px; font-weight: 400; opacity: 1; color: var(--f7-theme-color); }

/* CLAUDE CREATED CSS - SEPARADORES DAS FERRAMENTAS EM CIMA (Setup > Barra inferior, 2026-09-06) */
/* A barra de separadores de cada seccao passa de toolbar-bottom a toolbar-top (js/app.js: regy_barra_aplica).
   A .page ganha regy-bar-top e o page-content herda daqui o offset do F7 para o padding-top (a barra vem
   DEPOIS do page-content no DOM, por isso a regra .toolbar-top ~ * do F7 nao lhe chega). */
.page.regy-bar-top { --f7-page-toolbar-top-offset: var(--f7-toolbar-height); }
/* subnavbar (ex.: pesquisa da loja POS) desce para baixo da barra de separadores */
.page.regy-bar-top .navbar .subnavbar, .page.regy-bar-top > .subnavbar {
	top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top)); }
/* configurador (tabs_bottom.php): caixa em coluna + escolha Em cima / Em baixo */
.tp-optbox-col { flex-direction: column; align-items: stretch; }
.tp-opt-row { display: flex; align-items: center; gap: 10px; }
.tp-seg { display: flex; gap: 8px; margin-top: 12px; }
.tp-seg-op { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(128,128,128,.3); color: inherit; font-size: 12px; opacity: .75; }
.tp-seg-op svg { width: 22px; height: 22px; }
.tp-seg-op.is-on { border-color: var(--f7-theme-color); color: var(--f7-theme-color); background: rgba(128,128,128,.10); opacity: 1; }
/* icone + info point + texto alinhados ao centro na mesma linha */
.tp-optbox > svg, .tp-opt-row > svg { flex-shrink: 0; }
.tp-optbox .info-point, .tp-opt-row .info-point { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.tp-optbox .info-point .icon, .tp-opt-row .info-point .icon { width: 18px; height: 18px; }
.tp-optbox > span, .tp-opt-row > span { line-height: 1.3; }

/* CLAUDE CREATED CSS - cartao "avaliacao fisica agendada" na home (pages/home/assessment_alert.php) */
.ab-quando { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.ab-quando .ab-dia { font-size: 11px; text-transform: uppercase; }
.ab-quando .ab-hora { font-size: 12px; opacity: .8; }
.ab-quando.ab-hoje .ab-dia { font-size: 14px; color: #e8a13c; }
/* pisca 3 vezes ao entrar (a app antiga tinha o mesmo efeito, .pisca3x) */
.pisca3x { animation: pisca-anim 1s steps(1) 3; }

/* CLAUDE CREATED CSS - RECORDES: a faixa de controlos nunca empurra os botoes para fora do ecra.
   O segmentador tem flex:1 mas os rotulos sao nowrap: sem min-width:0 o conteudo impunha a largura
   e os botoes redondos (ordenar, importar) saiam do ecra. Com a letra grande acontecia o mesmo.
   Agora o rotulo corta com reticencias e os botoes ficam sempre visiveis. */
.cross-rec-controls { min-width: 0; }
.cross-rec-seg { min-width: 0; }
.cross-seg-btn { min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }

/* CLAUDE CREATED CSS - cartao "sem permissoes" das paginas de configuracoes (mesmo desenho do
   bloqueio das cores em visual.php: cadeado a esquerda + explicacao). */
.cfg-blk { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; }
.cfg-blk > svg, .cfg-blk > i { width: 20px; height: 20px; flex: 0 0 auto; opacity: .6; margin-top: 2px; }

/* CLAUDE CREATED CSS - HISTORICO: segmentador MARCACOES / CANCELAMENTOS no topo da pagina
   (pages/classes/classes_historic.php). Mesmo desenho do segmentador dos recordes. */
.hist-seg { display: flex; min-width: 0; background: rgba(128,128,128,.22); border-radius: 999px; padding: 3px; margin: 6px 14px 2px; }
.hist-seg-btn { flex: 1; min-width: 0; text-align: center; height: 32px; line-height: 32px; border-radius: 999px;
	font-size: 13px; text-transform: uppercase; color: var(--f7-text-color); opacity: .7;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.hist-seg-btn.active { background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); opacity: 1; }
.hist-canc-ic { width: 34px; height: 34px; opacity: .6; }

/* O segmentador vive NA FAIXA DA NAVBAR, ao lado da seta de voltar. Esta FORA do .page-content
   (e irmao da navbar, ver o comentario no classes_historic.php): o page-content do F7 e
   `position:relative; z-index:1` e cria contexto de empilhamento proprio — la dentro nenhum
   z-index o punha acima da navbar (z-index 500), e era a navbar que apanhava os toques.
   Posicao ABSOLUTA dentro da .page: nao salta na entrada da pagina (nao depende do page-current)
   e nao flutua por cima das paginas abertas a partir daqui (a .page-previous leva transform). */
.page-hist > .hist-seg { position: absolute; top: calc(var(--f7-safe-area-top, 0px) + 9px);
	left: 48px; right: 8px; z-index: 5500; margin: 0; }
/* Area CANCELAMENTOS do historico (pages/classes/classes_historic.php).
   Desenho: cartoes sem peso, dados separados por FIOS FINOS recuados das margens (nunca encostados
   ao rebordo do cartao) e nada a negrito — a hierarquia faz-se com tamanho e opacidade. */
.canc-fio { background: rgba(128,128,128,.16); }   /* cor unica dos fios desta area */

/* contadores lado a lado, com um fio vertical entre eles */
.canc-nums { display: flex; margin: 5px; padding: 16px 0 14px; border-radius: 15px; }
.canc-num-c { flex: 1 1 0; min-width: 0; text-align: center; position: relative; padding: 0 10px; }
.canc-num-c + .canc-num-c::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
	width: 1px; background: rgba(128,128,128,.16); }
.canc-num { font-size: 40px; line-height: 44px; font-weight: 300; }
.canc-num-l { font-size: 10px; line-height: 13px; margin-top: 4px; text-transform: uppercase;
	letter-spacing: .04em; opacity: .5; }

/* texto do gestor */
.canc-box { margin: 5px; padding: 14px 16px; border-radius: 15px; font-size: 13px; line-height: 19px; opacity: .8; }

/* regra da box: aviso em cima, nota da lista de espera por baixo de um fio */
.canc-regra { margin: 5px; padding: 14px 16px; border-radius: 15px; }
.canc-regra-t { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 19px; }
.canc-regra-ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--f7-theme-color); margin-top: 1px; }
.canc-nota { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(128,128,128,.16);
	font-size: 12px; line-height: 17px; opacity: .55; }

/* cabecalho da lista: rotulo a esquerda, rotulo da coluna da direita */
.canc-head { display: flex; justify-content: space-between; align-items: baseline;
	padding: 22px 20px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .45; }

/* lista: uma linha por cancelamento, fio fino recuado entre linhas */
.canc-card { margin: 5px; padding: 2px 0; border-radius: 15px; }
.canc-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; }
.canc-row + .canc-row::before { content: ''; position: absolute; top: 0; left: 60px; right: 16px;
	height: 1px; background: rgba(128,128,128,.16); }
.canc-ic { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center; background: rgba(128,128,128,.12); }
.canc-ic svg { width: 16px; height: 16px; opacity: .6; }
.canc-info { flex: 1 1 auto; min-width: 0; }
.canc-aula { font-size: 14px; line-height: 18px; font-weight: 400;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canc-sub { font-size: 11px; line-height: 15px; margin-top: 1px; opacity: .5; }
.canc-em { flex: 0 0 auto; text-align: right; }
.canc-em-d { font-size: 12px; line-height: 16px; opacity: .75; }
.canc-em-h { font-size: 11px; line-height: 15px; opacity: .45; }

/* sem cancelamentos */
.canc-vazio { text-align: center; padding: 60px 30px; opacity: .5; font-size: 13px; }
.canc-vazio svg { width: 34px; height: 34px; margin-bottom: 10px; }

/* Cartao "atualiza a app" no topo da home (pages/home/update_alert.php) */
.upd-card { display: flex; align-items: center; gap: 12px; margin: 10px 5px; padding: 14px 16px; border-radius: 15px; }
.upd-ic { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center; background: rgba(128,128,128,.12); }
.upd-ic svg { width: 19px; height: 19px; color: var(--f7-theme-color); }
.upd-txt { min-width: 0; }
.upd-tit { font-size: 14px; line-height: 18px; }
.upd-sub { font-size: 12px; line-height: 16px; margin-top: 2px; opacity: .6; }

/* Cartao "atualiza a app": botao para a loja a direita, texto a ocupar o resto */
.upd-card .upd-txt { flex: 1 1 auto; }
.upd-card .upd-bt { flex: 0 0 auto; margin-left: 4px; padding: 0 14px; white-space: nowrap; }
/* texto do botao da loja na cor legivel sobre o tema (o mesmo --wp-on-theme dos outros botoes cheios) */
.upd-card .upd-bt, .upd-card .upd-bt:visited { color: var(--wp-on-theme, #fff) !important; }

/* CLAUDE CREATED CSS - FIST BUMP e COMENTARIOS no cartao de resultado (2026-09-19).
   O murro de incentivo ao resultado de um atleta ou equipa, portado da APP antiga. Tudo o que
   e animacao vive aqui: o JS limita-se a por e tirar classes, para o gesto ser o mesmo em todo o
   lado e para o `prefers-reduced-motion` do sistema poder desliga-lo de uma vez. */
.atvbp-barra { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.atvbp-bt {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px 5px 10px; border-radius: 999px;
	border: 1px solid rgba(128,128,128,.28);
	font-size: 12px; line-height: 1; color: inherit;
	/* position+overflow visivel: a onda de choque sai de dentro do botao e pode passar-lhe as bordas */
	position: relative; -webkit-tap-highlight-color: transparent;
	transition: border-color .18s ease, background .18s ease;
}
.atvbp-bt i, .atvbp-bt svg { width: 16px; height: 16px; }
/* JA DEI: o botao assume a cor do tema. Nao e so o icone — e o estado do botao inteiro, para se
   ler de relance numa lista de provas sem ter de olhar duas vezes. */
.atvbp-bt.on { color: var(--f7-theme-color); border-color: var(--f7-theme-color); }
.atvbp-n { font-variant-numeric: tabular-nums; min-width: 9px; text-align: center; }

/* O SOCO. Tres coisas ao mesmo tempo, com tempos diferentes de proposito:
   1) o punho recua, bate e volta com mola (o `cubic-bezier` de fim passa de 1 e volta);
   2) a onda de choque expande-se e desvanece;
   3) os punhos pequenos voam em leque (ver .atvbp-fly, criados pelo JS).
   Sem `will-change`: sao animacoes de 400ms, e a promocao a camada custava mais do que poupava. */
@keyframes atvbpSoco {
	0%   { transform: scale(1)    rotate(0deg); }
	18%  { transform: scale(.82)  rotate(-14deg); }
	42%  { transform: scale(1.32) rotate(10deg); }
	68%  { transform: scale(.94)  rotate(-3deg); }
	100% { transform: scale(1)    rotate(0deg); }
}
.atvbp-bt.bate i, .atvbp-bt.bate svg { animation: atvbpSoco .52s cubic-bezier(.22,1.2,.36,1) both; }

@keyframes atvbpOnda {
	0%   { transform: translate(-50%,-50%) scale(.2); opacity: .55; }
	70%  { opacity: .18; }
	100% { transform: translate(-50%,-50%) scale(3.4); opacity: 0; }
}
.atvbp-onda {
	position: absolute; left: 21px; top: 50%; width: 26px; height: 26px;
	border-radius: 50%; border: 2px solid var(--f7-theme-color);
	pointer-events: none; animation: atvbpOnda .6s ease-out both;
}

/* OS PUNHOS QUE VOAM. O JS da a cada um o seu angulo, distancia e atraso em variaveis CSS; a
   curva e a mesma para todos e faz o arco: sobe depressa, abranda, cai. `--dx/--dy` sao o ponto
   de chegada e o `translateY` do fim acrescenta a queda. */
@keyframes atvbpVoa {
	0%   { transform: translate(0,0) scale(.6) rotate(0deg); opacity: 0; }
	12%  { opacity: 1; }
	60%  { transform: translate(calc(var(--dx) * .8), calc(var(--dy) * 1.05)) scale(1.15) rotate(var(--rot)); opacity: 1; }
	100% { transform: translate(var(--dx), calc(var(--dy) + 26px)) scale(.75) rotate(var(--rot)); opacity: 0; }
}
.atvbp-fly {
	position: absolute; left: 16px; top: 50%; margin-top: -8px;
	pointer-events: none; color: var(--f7-theme-color);
	animation: atvbpVoa .95s cubic-bezier(.16,.72,.28,1) both;
	animation-delay: var(--atraso, 0ms);
}
.atvbp-fly svg { width: 16px; height: 16px; }

/* O CONTADOR RODA como um odometro, em vez de saltar de 7 para 8: o numero antigo sobe e sai, o
   novo entra por baixo. Sao dois digitos empilhados dentro de uma janela da altura de um. */
.atvbp-n.roda { display: inline-block; overflow: hidden; height: 1em; vertical-align: -.12em; }
.atvbp-n.roda span { display: block; animation: atvbpRoda .42s cubic-bezier(.3,1,.4,1) both; }
@keyframes atvbpRoda { from { transform: translateY(0); } to { transform: translateY(-1em); } }

/* QUEM DEU e os COMENTARIOS, na folha que abre de baixo */
.atvbp-lista { padding: 4px 0 8px; }
.atvbp-lin { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.atvbp-lin img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.atvbp-lin-in { flex: 1; min-width: 0; }
.atvbp-lin-n { font-size: 13px; }
.atvbp-lin-t { font-size: 12.5px; opacity: .8; line-height: 1.45; padding-top: 2px; overflow-wrap: break-word; }
.atvbp-lin-h { font-size: 10.5px; opacity: .45; text-transform: uppercase; letter-spacing: .3px; }
.atvbp-del { opacity: .45; flex: 0 0 auto; }
.atvbp-vazio { text-align: center; font-size: 12.5px; opacity: .5; padding: 22px 0; }

/* QUEM DESLIGOU AS ANIMACOES no telemovel nao leva nenhuma: fica so o contador a mudar, que e a
   informacao. A regra vem no fim para ganhar a todas as de cima. */
@media (prefers-reduced-motion: reduce) {
	.atvbp-bt.bate i, .atvbp-bt.bate svg, .atvbp-onda, .atvbp-fly, .atvbp-n.roda span { animation: none !important; }
	.atvbp-onda, .atvbp-fly { display: none !important; }
}

/* CLAUDE CREATED CSS - FIST BUMP: os DOIS BOTOES GRANDES do topo do perfil (2026-09-19).
   O murro e o comentario a serio, logo abaixo do lugar na geral, sobre a prova mais recente. A
   barra pequena da lista de provas continua igual; isto e o atalho para quem acabou de ver o heat. */
.atvbp-topo { display: flex; gap: 10px; padding: 14px 16px 2px; }
.atvbp-big {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 10px; border-radius: 16px;
	border: 1px solid rgba(128,128,128,.28); background: rgba(128,128,128,.06);
}
.atvbp-big i, .atvbp-big svg { width: 22px; height: 22px; }
.atvbp-big-in { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.atvbp-big-in .atvbp-n { font-size: 17px; text-align: left; }
/* o nome da prova por baixo do numero: e ele que diz O QUE se esta a aplaudir, e por isso nao pode
   partir linha nem empurrar o botao — corta com reticencias */
.atvbp-big-in em {
	font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .3px;
	opacity: .5; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atvbp-big.on { color: var(--f7-theme-color); border-color: var(--f7-theme-color); background: rgba(128,128,128,.06); }
/* no MEU resultado o punho fica apagado (nao se da um murro a si mesmo) mas continua a abrir a
   lista de quem deu — daí ser um botao e nao um texto morto */
.atvbp-big.e-meu { opacity: .6; }

/* CLAUDE CREATED CSS - o punho e um SVG proprio (o `hand-fist` nao existe no lucide da APP), por
   isso precisa do tamanho definido aqui: os icones do lucide vem com width/height no atributo, o
   nosso nao. Mesmas medidas dos vizinhos, para a linha nao dancar. (2026-09-19) */
.atvbp-bt > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.atvbp-big > svg { width: 22px; height: 22px; flex: 0 0 auto; }
.atvbp-fly > svg { width: 16px; height: 16px; }

/* CLAUDE CREATED CSS - punho a 32px no botao grande (pedido dele, 19-09): a silhueta e clara, o que
   lhe faltava era tamanho. O botao tem altura de sobra e o numero ao lado equilibra.
   Na linha da prova sobe so de 16 para 18: ali a altura da linha manda, e mais do que isso empurrava
   o nome. Esta regra vem DEPOIS da que define os 22/16, por isso ganha. */
.atvbp-big > svg { width: 32px; height: 32px; }
.atvbp-bt > svg  { width: 18px; height: 18px; }

/* CLAUDE CREATED CSS - CORRECAO (19-09): as duas regras acima anulavam-se. O botao grande tem as
   DUAS classes (`atvbp-big atvbp-bt`), e `.atvbp-bt > svg` ficou escrita depois de `.atvbp-big > svg`
   com a mesma especificidade — ganhava a ultima, e o punho do botao grande voltava aos 18px.
   Aqui a regra e mais especifica (duas classes no mesmo elemento), por isso manda em qualquer ordem. */
.atvbp-big.atvbp-bt > svg { width: 32px; height: 32px; }

/* CLAUDE CREATED CSS - MARCAS SOCIAIS numa linha de resultado (Miguel, 19-09): polegar + numero e
   balao + numero, na tabela classificativa e na lista do heat. So aparecem quando ha alguma coisa,
   por isso uma lista sem interacao fica exatamente com a altura de antes.
   O polegar acende na cor do tema quando fui eu que o dei (no legado eram duas imagens diferentes). */
.atvsoc { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
/* COR DO TEMA em todas (Miguel, 19-09): a cinzento por cima do nome da box, que ja esta a .45,
   nao se distinguiam do resto da linha. A cor do tema e o unico sitio da linha com cor, por isso
   salta sozinha sem precisar de ficar maior. */
.atvsoc-i { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px;
	color: var(--f7-theme-color); font-variant-numeric: tabular-nums; line-height: 1; }
.atvsoc-i svg { width: 12px; height: 12px; }
/* o que EU dei fica com o polegar CHEIO — a distincao que o legado fazia com duas imagens
   diferentes. Com a cor igual nos dois, o preenchimento e o que sobra para os separar. */
.atvsoc-i.on svg { fill: currentColor; }
/* a box e as marcas partilham a MESMA linha; com o nome da box longo, a elipse e dele e as marcas
   ficam sempre visiveis (flex: 0 0 auto la em cima) */
.atvre-sub { display: flex; align-items: center; gap: 9px; min-width: 0; padding-top: 3px; }
.atvre-sub .atvre-box { padding-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; }
/* no heat nao ha linha da box: as marcas entram por baixo do nome */
.atvhe-sub { padding-top: 4px; }

/* CLAUDE CREATED CSS - COMENTARIOS NO FUNDO DO PERFIL (Miguel, 19-09): a mesma lista que a folha
   mostrava, agora aberta no fundo da pagina. A caixa de escrever e o botao sao partilhados pelos
   dois sitios, por isso deixaram de ter style inline (na folha tinham uma margem negativa que so
   fazia sentido la). */
.atvbp-fundo-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; opacity: .5;
	padding: 0 0 6px 30px; }
.atvbp-escrever { margin: 10px 0 0; }
.atvbp-enviar { margin-top: 10px; }

/* CLAUDE CREATED CSS - MURAL DOS APLAUSOS: separador SOCIAL de uma atividade (2026-09-19).
   Pódio dos três primeiros + lista com uma barra proporcional ao líder. Os degraus têm alturas
   diferentes de propósito: é o que se lê antes de qualquer número. Sem sombras nem blur; quem
   está a ver destaca-se pela cor do tema, e o dourado do 1.º reutiliza o degradê do leaderboard
   (.lb-gold). O número nunca vai a bold — a hierarquia é o tamanho e a cor. */
.atvsoc-w { padding: 4px 0 20px; }
.atvsoc-hd { padding: 14px 16px 6px; }
.atvsoc-tit { font-size: 19px; font-weight: 500; }
.atvsoc-sub { font-size: 12px; opacity: .6; padding-top: 3px; }
.atvsoc-chips { display: flex; gap: 8px; padding: 10px 16px 4px; }
/* MAIÚSCULAS por CSS, nunca no texto (pedido dele, 19-09): a tradução tem de guardar o texto
   original — é a mesma regra dos títulos e dos botões em toda a casa. */
.atvsoc-chip { font-size: 12px; padding: 6px 14px; border-radius: 999px;
	border: 1px solid rgba(128,128,128,.25); opacity: .75;
	text-transform: uppercase; letter-spacing: .3px; }
.atvsoc-chip.on { background: var(--f7-theme-color); border-color: var(--f7-theme-color);
	color: #FFFFFF; opacity: 1; }

.atvsoc-podio { display: flex; align-items: flex-end; gap: 8px; padding: 14px 14px 2px; }
.atvsoc-pod { flex: 1; text-align: center; min-width: 0; }
.atvsoc-pod-1 { flex: 1.15; }
.atvsoc-coroa { display: block; width: 18px; height: 18px; margin: 0 auto 2px; color: #f5b301; }
/* COROA ao 1.º, MEDALHA ao 2.º e ao 3.º, cada uma no metal do seu lugar (Miguel, 20-09).
   As cores da prata e do bronze são as que a app já usa nos distintivos de pódio do Challenge
   (.ch5-marca.e-podio) — não vale a pena ter dois tons de prata na mesma app. */
.atvsoc-pod.p2 .atvsoc-coroa { color: #a8b2ba; }
.atvsoc-pod.p3 .atvsoc-coroa { color: #b47846; }
/* AVATAR: o círculo de INICIAIS está sempre por baixo e a foto por cima (pedido dele, 19-09:
   "para equipas e atletas sem foto, as iniciais com a mesma cor da imagem sem foto"). Quem não
   tem foto nem chega a pedir imagem; quem tem um registo que já não existe em disco perde o
   <img> no onerror e fica a ver as iniciais. As cores são as MEDIDAS nos ficheiros
   img/imgs/{dark,light}_no_foto.jpg — #2F2F2F e #EFEFEF — para o círculo se ler como a mesma
   família do antigo "sem foto". */
.atv-av { position: relative; display: inline-block; flex: 0 0 auto;
	border-radius: 50%; overflow: hidden; vertical-align: middle; }
.atv-av i { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	display: flex; align-items: center; justify-content: center;
	font-style: normal; letter-spacing: .5px; font-size: 13px;
	background: #EFEFEF; color: rgba(0, 0, 0, .45); }
.atv-av img { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%; object-fit: cover; }
html.dark .atv-av i, .dark .atv-av i { background: #2F2F2F; color: rgba(255, 255, 255, .75); }

.atvsoc-foto { width: 52px; height: 52px; }
.atvsoc-foto i { font-size: 17px; }
.atvsoc-pod-1 .atvsoc-foto { width: 64px; height: 64px; }
.atvsoc-pod-1 .atvsoc-foto i { font-size: 20px; }
/* A BOX QUE REPRESENTAM, no pódio (Miguel, 20-09): o logótipo do MESMO TAMANHO da foto, alinhado
   por cima com ela e com 20% da largura escondido por trás. Da 4.ª posição para baixo a box
   continua escrita por extenso, que é o que cabe numa linha de lista.
   As medidas vão em PERCENTAGEM da foto (o `left`, a largura e a altura), por isso a mesma regra
   serve os 52px dos lados e os 64px do meio — não há números repetidos para manter alinhados. */
.atvsoc-pod-av { position: relative; display: inline-block; line-height: 0; }
.atvsoc-pod-av .atv-av { position: relative; z-index: 1; }
.atvsoc-pod-box { position: absolute; top: 0; left: -80%; z-index: 0;
	width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #EFEFEF; }
html.dark .atvsoc-pod-box, .dark .atvsoc-pod-box { background: #2F2F2F; }
/* O PAR FICA CENTRADO no cartão: o logótipo está fora do fluxo, portanto sem isto o conjunto
   crescia todo para a esquerda, desencontrado do nome e do degrau, e ia bater no cartão vizinho.
   A margem é exatamente o que o logótipo sai para fora (80% da foto), só do lado de quem o tem. */
.atvsoc-pod-av-lg { margin-left: 42px; }
.atvsoc-pod-1 .atvsoc-pod-av-lg { margin-left: 51px; }
.atvsoc-pod-n { font-size: 12px; line-height: 1.25; padding-top: 5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvsoc-pod-v { font-size: 15px; color: var(--f7-theme-color); padding-top: 1px; }
.atvsoc-pod-1 .atvsoc-pod-v { font-size: 19px; }
.atvsoc-degrau { margin-top: 6px; height: 30px; line-height: 30px; border-radius: 8px 8px 0 0;
	background: rgba(128,128,128,.14); font-size: 11px; opacity: .7; }
/* OURO, PRATA e BRONZE nos degraus (Miguel, 20-09). A altura é do lugar no pódio — o 1.º fica ao
   meio e é o mais alto —, a cor é da POSIÇÃO, para dois empatados em primeiro ficarem os dois
   dourados. `.atvsoc-pod-1` é sempre a linha 0 da lista, logo é sempre `.p1`: não há conflito. */
.atvsoc-pod.p1 .atvsoc-degrau { opacity: 1; color: #6b4e00;
	background: linear-gradient(135deg, #ffe27a, #f5b301); }
.atvsoc-pod.p2 .atvsoc-degrau { height: 34px; line-height: 34px; opacity: 1; color: #3d454b;
	background: linear-gradient(135deg, #e8ecef, #a8b2ba); }
.atvsoc-pod.p3 .atvsoc-degrau { height: 24px; line-height: 24px; opacity: 1; color: #4a2f16;
	background: linear-gradient(135deg, #e8b98a, #b47846); }
.atvsoc-pod-1 .atvsoc-degrau { height: 46px; line-height: 46px; }
.atvsoc-pod.eu .atvsoc-pod-n { color: var(--f7-theme-color); }

.atvsoc-lista { padding: 6px 12px 0; }
.atvsoc-lin { display: flex; align-items: center; gap: 10px; padding: 8px 4px;
	border-bottom: 1px solid rgba(128,128,128,.15); }
.atvsoc-mais-lin { display: none; }
.atvsoc-pos { width: 24px; flex: 0 0 auto; text-align: center; font-size: 12px; opacity: .5; }
.atvsoc-foto-s { width: 34px; height: 34px; }
.atvsoc-foto-s i { font-size: 12px; }
.atvsoc-meio { flex: 1; min-width: 0; }
.atvsoc-nome { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvsoc-box { font-size: 11px; opacity: .55; padding-top: 1px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atvsoc-barra { height: 3px; margin-top: 5px; border-radius: 2px;
	background: rgba(128,128,128,.18); overflow: hidden; }
.atvsoc-barra i { display: block; height: 100%; background: var(--f7-theme-color); opacity: .55; }
.atvsoc-val { flex: 0 0 auto; font-size: 15px; opacity: .8; }
.atvsoc-lin.eu { border-radius: 8px; background: color-mix(in srgb, var(--f7-theme-color) 10%, transparent); }
.atvsoc-lin.eu .atvsoc-nome, .atvsoc-lin.eu .atvsoc-val, .atvsoc-lin.eu .atvsoc-pos { color: var(--f7-theme-color); }
.atvsoc-eu { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
.atvsoc-todos { display: block; padding: 12px; text-align: center; font-size: 12px; opacity: .7; }

/* PAINEL DO HEAT · RegyJudge na APP (19-09): o chip do ADMIN no telemóvel de quem organiza.
   Vive dentro de um .card.atvec, por isso o título e os botões já vêm de lá; aqui só o que é
   próprio — a prontidão, o cronómetro e o estado travado. */
.atvrj-heat { margin-left: auto; letter-spacing: 1px; }
.atvrj-prontos { padding-bottom: 12px; }
.atvrj-n { display: flex; align-items: center; gap: 7px; font-size: 22px;
	font-variant-numeric: tabular-nums; }
.atvrj-n svg { width: 18px; height: 18px; opacity: .6; }
.atvrj-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
	opacity: .55; padding-top: 2px; }
.atvrj-barra { height: 4px; margin-top: 8px; border-radius: 2px;
	background: rgba(128,128,128,.18); overflow: hidden; }
.atvrj-barra i { display: block; height: 100%; background: var(--f7-theme-color);
	transition: width .3s; }
/* prontidão completa: o número e a fita passam à cor do tema, para se ver de relance */
.atvrj-prontos-ok .atvrj-n { color: var(--f7-theme-color); }

/* a decorrer: o cronómetro manda no cartão. As três cores são as MESMAS do chip do ADMIN, da
   faixa da TV e dos telemóveis dos juízes — laranja na preparação, verde a correr, vermelho
   quando chega ao cap (onde o número congela). */
.atvrj-linha { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; }
.atvrj-crono { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums;
	letter-spacing: 1px; }
.atvrj-crono-prep { color: #ffa32f; }
.atvrj-crono-ok { color: #47c363; }
.atvrj-crono-fim { color: #fc544b; }
.atvrj-conta { display: flex; align-items: center; gap: 6px; margin-left: auto;
	font-size: 14px; opacity: .6; font-variant-numeric: tabular-nums; }
.atvrj-conta svg { width: 15px; height: 15px; }
.atvrj-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* travado por outro heat na mesma arena: fica à vista, apagado, com o motivo por baixo */
.atvrj-travado { opacity: .4; border-color: rgba(128,128,128,.5); color: inherit; }
.atvrj-nota { display: flex; align-items: flex-start; gap: 7px; padding-top: 9px;
	font-size: 12px; line-height: 1.5; opacity: .6; }
.atvrj-nota svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; }

/* CLAUDE CREATED CSS - QUESTIONARIOS: perguntas de ESTRELAS (tipo 5, 2026-09-24).
   Partilhado pelo ecra de resposta (pages/questionarios/responder_quest.php) e pelo formulario de
   inscricao em atividades (pages/atividades/incs/inscrever_form.php). Mesmo desenho das estrelas do
   popup de avaliacao (.cr-stars): cinzento esbatido, laranja ate a escolhida. */
.q-stars { display: flex; gap: 6px; padding: 8px 0 6px; user-select: none; }
.q-star { font-size: 36px; line-height: 1; color: rgba(128,128,128,.35); cursor: pointer; transition: color .15s; }
.q-star.is-on { color: #FF9900; }

/* ---Questionarios: pergunta NPS de 0 a 10 (tipo 6, 2026-09-25) — onze botoes iguais numa
   linha; o escolhido fica cheio na cor do tema. Usado no responder_quest.php e na inscricao
   em atividades (inscrever_form.php).--- */
.q-nps { display: flex; gap: 4px; padding: 8px 0 4px; user-select: none; }
.q-nps-n { flex: 1 1 0; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center;
	border-radius: 8px; border: 1px solid rgba(128,128,128,.3); font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.q-nps-n.is-on { background: var(--f7-theme-color); border-color: var(--f7-theme-color); color: var(--wp-on-theme, #fff); }
.q-nps-leg { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; opacity: .6; padding-bottom: 6px; }
/* ---Questionarios: "Os meus questionarios" e "As minhas respostas" (melhoria 19, 2026-09-25)--- */
.mq-vazio { font-size: 13px; opacity: .6; }
.mq-lista .item-title { white-space: normal; }
.mq-sub { font-size: 12px; opacity: .65; }
.mq-ic { width: 22px; height: 22px; color: var(--f7-theme-color); }
.mq-ic-ok { opacity: .6; }
.mq-data { margin-bottom: 4px; }
.mq-resp { margin: 8px 5px; padding: 14px 16px; border-radius: 16px; background: var(--f7-card-bg-color); border: 1px solid rgba(128,128,128,.16); }
.mq-resp-n { font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; opacity: .55; margin-bottom: 4px; }
.mq-resp-p { font-size: 14px; line-height: 1.4; opacity: .75; }
.mq-resp-a { font-size: 15px; line-height: 1.45; margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--f7-theme-color); }
.mq-resp-a.is-vazia { opacity: .5; border-left-color: rgba(128,128,128,.3); }
/* ---Home: avaliar a ultima aula (melhoria 20 dos Questionarios, 2026-09-25). Mesma linguagem do
   cartao do questionario (fio a esquerda na cor do tema, sem sombras); as estrelas sao as .q-stars.--- */
.aa-card { position: relative; margin: 10px 5px; padding: 16px 18px 12px 20px; border-radius: 16px; background: var(--f7-card-bg-color); border: 1px solid rgba(128,128,128,.16); overflow: hidden; }
.aa-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--f7-theme-color); }
.aa-card.is-oculto { display: none; }
.aa-card.is-busy { opacity: .6; pointer-events: none; }
.aa-x { position: absolute; top: 10px; right: 10px; color: inherit; opacity: .45; }
.aa-x svg, .aa-x i { width: 18px; height: 18px; }
.aa-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; opacity: .55; }
.aa-sub { font-size: 15px; line-height: 1.35; margin-top: 3px; padding-right: 26px; }
.aa-stars { padding-top: 10px; }
.aa-mais { display: none; }
.aa-mais.is-open { display: block; }
.aa-lista { margin: 6px 0 0; }
.aa-lista ul { background: transparent; }
.aa-lista ul:before, .aa-lista ul:after { display: none; }
.aa-acts { display: flex; justify-content: flex-end; margin-top: 10px; }
.aa-env { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--f7-theme-color); color: var(--wp-on-theme, #fff); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.aa-env svg, .aa-env i { width: 16px; height: 16px; }
/* CLAUDE CREATED CSS - FALTA A UMA AULA: popup ao entrar no menu AULAS (pages/classes/falta_popup.php,
   2026-10-01, bug IronPunch). Esqueleto do painel da lista de espera (.wl-content, .wl-check, .wl-ok);
   os tres numeros seguem o cartao KPI (degrade diagonal + icone esbatido; cor por --fkc / --fkt). */
.falta-hero { text-align: center; padding: 24px 0 6px; }
.falta-ico { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(var(--f7-theme-color-rgb), .12); color: var(--f7-theme-color); }
.falta-ico .icon { width: 30px; height: 30px; }
.falta-perg { font-size: 20px; line-height: 1.35; margin-top: 16px; }
.falta-txt { margin-top: 20px; padding: 13px 14px; border-radius: 12px; background: rgba(128,128,128,.10);
	font-size: 14px; line-height: 1.5; word-break: break-word; }
.falta-hist-t { margin-top: 24px; margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; opacity: .55; }
.falta-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.falta-kpi { position: relative; overflow: hidden; padding: 12px 12px 10px; border-radius: 12px;
	border: 1px solid rgba(128,128,128,.20); background-color: var(--f7-card-bg-color);
	background-image: linear-gradient(135deg, rgba(var(--fkc), .15) 0%, rgba(var(--fkc), .03) 52%, rgba(var(--fkc), 0) 100%); }
.falta-kpi .falta-kpi-ic { position: absolute; right: -10px; bottom: -14px; width: 62px; height: 62px; opacity: .07;
	z-index: 0; pointer-events: none; color: var(--fkt); }
.falta-kpi-n { position: relative; z-index: 1; font-size: 22px; font-weight: 500; color: var(--fkt); }
.falta-kpi-l { position: relative; z-index: 1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .55;
	margin-top: 2px; overflow-wrap: anywhere; }
.falta-c-azul  { --fkc: 91,141,239;  --fkt: #3f67b8; }
.falta-c-verde { --fkc: 106,191,142; --fkt: #3a8a5c; }
.falta-c-verm  { --fkc: 224,92,92;   --fkt: #c04040; }
.dark .falta-c-azul  { --fkt: #8cb0f7; }
.dark .falta-c-verde { --fkt: #8fd4ac; }
.dark .falta-c-verm  { --fkt: #f08a8a; }

/* CLAUDE CREATED CSS - CONTROLO DE ACESSOS NO ECRA DO QR (Feel Famalicao, 2026-10-01): aviso da ultima
   tentativa recusada + botao "Acesso negado? Ver motivo" (pages/login/check_in.php) e a lista dos
   ultimos acessos do membro (pages/login/check_in_hist.php). Verde = entrou, vermelho = recusado. */
.chk-nega-card { margin: 18px 16px 6px; padding: 12px 16px; border-radius: 18px;
	border: 1px solid rgba(244,67,54,.45); background: rgba(244,67,54,.07); }
.chk-nega-tit { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #f44336; }
.chk-nega-tit .icon { width: 18px; height: 18px; flex: none; }
.chk-nega-est { font-size: 15px; line-height: 1.4; margin-top: 6px; word-break: break-word; }
.chk-hist-btn-wrap { margin: 24px 16px 30px; }
.chk-hist-lista { padding: 0 16px 40px; }
.chk-hist-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(128,128,128,.16); }
.chk-hist-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #4caf50; }
.chk-hist-item.negado .chk-hist-dot { background: #f44336; }
.chk-hist-ico { flex: none; width: 26px; height: 26px; opacity: .8; }
.chk-hist-tx { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.chk-hist-sub { font-size: 12px; opacity: .55; }
.chk-hist-est { font-size: 15px; margin: 2px 0; word-break: break-word; }
.chk-hist-item.negado .chk-hist-est { color: #f44336; }
.chk-hist-vazio { text-align: center; padding: 70px 24px; opacity: .55; }
.chk-hist-vazio svg { width: 40px; height: 40px; margin-bottom: 12px; }

/* CLAUDE CREATED CSS — VÍDEO AULAS (pages/videos/, 2026-10-02) */
/* sem negrito, sem sombras: os títulos distinguem-se pelo tamanho e a cor do tema marca o ativo */
.va-page { padding-bottom: 100px; }
.va-chips-wrap { position: sticky; top: 0; z-index: 3; background: var(--f7-page-bg-color); }
.va-chips { padding: 10px 14px 10px; gap: 8px; }
.va-chip { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
	font-size: 13px; color: var(--f7-text-color); border: 1px solid rgba(128,128,128,.28); white-space: nowrap; -webkit-user-drag: none; }
.va-chip svg { width: 13px; height: 13px; opacity: .7; }
.va-chip.va-chip-on { background: var(--f7-theme-color); border-color: var(--f7-theme-color); color: #fff; }
.va-chip.va-chip-on svg { opacity: 1; }
.va-sec { padding: 6px 14px 4px; }
.va-sec-tit { display: flex; align-items: center; gap: 8px; font-size: 19px; letter-spacing: .3px; text-transform: uppercase; color: var(--f7-theme-color); margin: 14px 2px 10px; }
.va-sec-tit svg { width: 18px; height: 18px; }
.va-sec-n { font-size: 12px; opacity: .45; color: var(--f7-text-color); }
.va-sec-lock { cursor: pointer; }
.va-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
.va-card { display: block; color: var(--f7-text-color); min-width: 0; }
.va-th { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
	background: linear-gradient(135deg, var(--f7-theme-color), rgba(128,128,128,.25)); }
.va-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.va-th-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: .75; }
.va-th-ic svg { width: 30px; height: 30px; }
.va-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.va-th-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.va-th-play svg { width: 38px; height: 38px; opacity: .9; }
.va-tit { font-size: 13px; line-height: 1.3; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.va-card-lock .va-th img { filter: grayscale(1); opacity: .45; }
.va-card-lock .va-th-play { background: rgba(0,0,0,.35); }
.va-card-lock .va-th-play svg { width: 26px; height: 26px; }
.va-card-lock .va-tit { opacity: .55; }
.va-vazio { text-align: center; padding: 80px 24px; opacity: .55; }
.va-vazio svg { width: 44px; height: 44px; margin-bottom: 12px; }
/* popup do leitor e da montra (criado na hora pelo videos.php): a mesma transição do f7-push — o popup entra
   da DIREITA (o do F7 sobe de baixo) e a página dos vídeos sai pela esquerda ao mesmo tempo (.va-page-fora);
   no topo, a barra .va-pop-bar — seta VOLTAR + título (+ coração no leitor) */
.va-pop { background: var(--f7-page-bg-color); color: var(--f7-text-color);
	--f7-popup-transition-duration: var(--f7-page-push-transition-duration); --f7-popup-transition-timing-function: ease; }
.page.va-page-mov { transition: transform var(--f7-page-push-transition-duration) ease; }
.page.va-page-fora { transform: translateX(-100%); }
.popup.va-pop { transform: translate3d(100%,0,0); }
.popup.va-pop.modal-in { transform: translate3d(0,0,0); }
.popup.va-pop.modal-out { transform: translate3d(100%,0,0); }
.va-pop-in { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 40px; }
.va-pop-bar { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1.3; position: sticky; top: 0; z-index: 2;
	padding: calc(env(safe-area-inset-top, 0px) + 4px) 12px 4px 4px; min-height: 56px; box-sizing: border-box; background: var(--f7-page-bg-color); }
.va-pop-bar span { flex: 1 1 auto; min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.va-pop-bar > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--f7-theme-color); }
.va-pop-back { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--f7-theme-color); }
.va-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.va-player iframe, .va-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* animação enquanto o vídeo carrega (carregador() do videos.php): miniatura apagada a aproximar-se, arco do tema
   a rodar à volta do play, linha a correr no fundo; sai em fade */
.va-load { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; background: #000;
	display: flex; align-items: center; justify-content: center; transition: opacity .5s ease; }
.va-load.va-load-out { opacity: 0; }
.va-load img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; animation: va-load-zoom 12s ease-out forwards; }
.va-load-ring { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #fff; }
.va-load-arc { position: absolute; inset: 0; width: 100%; height: 100%; animation: va-load-rot 1.4s linear infinite; }
.va-load-arc circle { fill: rgba(0,0,0,.35); stroke: var(--f7-theme-color); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 46 136; }
.va-load-ring .lucide { position: relative; width: 22px; height: 22px; fill: currentColor; margin-left: 3px; animation: va-load-pulso 1.4s ease-in-out infinite; }
.va-load-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.va-load-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; background: var(--f7-theme-color); animation: va-load-corre 1.3s ease-in-out infinite; }
@keyframes va-load-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes va-load-rot { to { transform: rotate(360deg); } }
@keyframes va-load-pulso { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.86); opacity: .5; } }
@keyframes va-load-corre { from { left: -35%; } to { left: 100%; } }
.va-pop-desc { font-size: 14px; line-height: 1.5; opacity: .75; padding: 14px 18px 0; white-space: pre-line; overflow-wrap: anywhere; }
.va-pop-mt { padding-left: 18px; padding-right: 18px; }
.va-pop-mt .va-pop-bar { margin: 0 -18px; padding-right: 18px; }
.va-mt-sub { font-size: 13px; opacity: .6; margin: 6px 0 16px; }
.va-mt-aviso { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: #ff9800; margin-bottom: 14px; }
.va-mt-aviso svg { flex: 0 0 auto; width: 18px; height: 18px; }
.va-mt-x { border: 1px solid rgba(128,128,128,.25); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.va-mt-x-top { display: flex; gap: 12px; align-items: center; }
.va-mt-x-ic { width: 40px; height: 40px; flex: 0 0 auto; }
.va-mt-x-main { min-width: 0; }
.va-mt-x-nome { font-size: 16px; overflow-wrap: anywhere; }
.va-mt-x-preco { font-size: 15px; color: var(--f7-theme-color); margin-top: 2px; }
.va-mt-x-preco span { font-size: 12px; opacity: .7; color: var(--f7-text-color); }
.va-mt-x-desc { font-size: 13px; line-height: 1.45; opacity: .75; margin-top: 10px; overflow-wrap: anywhere; }
.va-mt-x-est { font-size: 13px; opacity: .7; margin-top: 10px; }
.va-mt-x-est.va-mt-venc { color: #f44336; opacity: 1; }
.va-mt-btn { margin-top: 12px; }
/* VÍDEO AULAS — cartão sem miniatura: o título grande sobre o degradê, play pequeno no canto (2026-10-02) */
.va-th-sem { background: linear-gradient(135deg, var(--f7-theme-color) 0%, rgba(0,0,0,.55) 140%); }
.va-th-txt { position: absolute; left: 10px; right: 10px; top: 9px; color: #fff; font-size: 16px; line-height: 1.2;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.va-th-sem .va-th-play { inset: auto auto 6px 8px; }
.va-th-sem .va-th-play svg { width: 22px; height: 22px; opacity: .85; }
.va-card-lock .va-th-sem .va-th-play { background: none; }
.va-card-lock .va-th-sem { filter: grayscale(.6); opacity: .6; }
.va-card-sem .va-tit { visibility: hidden; }   /* o título já está no cartão; fica o espaço para a grelha alinhar */
/* VÍDEO AULAS — progresso, visto, favoritos, continuar a ver e relacionados (melhorias 1, 2 e 5, 2026-10-02) */
.va-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.3); }
.va-prog[hidden] { display: none; }
.va-prog i { display: block; height: 100%; background: var(--f7-theme-color); }
.va-visto { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--f7-theme-color); color: #fff;
	display: none; align-items: center; justify-content: center; }
.va-visto svg { width: 14px; height: 14px; }
.va-card-visto .va-visto { display: flex; }
.va-fav-ic { position: absolute; right: 6px; top: 6px; color: #fff; display: none; }
.va-fav-ic svg { width: 18px; height: 18px; fill: currentColor; }
.va-card-fav .va-fav-ic { display: block; }
.va-th-sem .va-visto { left: auto; right: 6px; top: auto; bottom: 6px; }
.va-card-sem.va-card-fav .va-fav-ic { top: auto; bottom: 6px; right: 34px; }
.va-fila { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.va-fila::-webkit-scrollbar { display: none; }
.va-fila .va-card { flex: 0 0 62%; max-width: 260px; }
.va-chip-favs svg { width: 13px; height: 13px; }
.va-pop-fav { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(128,128,128,.3); color: var(--f7-text-color);
	display: flex; align-items: center; justify-content: center; }
.va-pop-fav svg { width: 20px; height: 20px; }
.va-pop-fav.on { color: var(--f7-theme-color); border-color: var(--f7-theme-color); }
.va-pop-fav.on svg { fill: currentColor; }
.va-rel-tit { font-size: 15px; padding: 22px 18px 10px; opacity: .8; }
.va-rel { display: flex; gap: 12px; align-items: center; padding: 6px 18px; color: var(--f7-text-color); }
.va-rel-th { position: relative; flex: 0 0 132px; width: 132px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
	background: linear-gradient(135deg, var(--f7-theme-color), rgba(128,128,128,.25)); }
.va-rel-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.va-rel-t { font-size: 13px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.va-rel-ok { width: 14px; height: 14px; color: var(--f7-theme-color); vertical-align: -2px; margin-right: 4px; }
/* VÍDEO AULAS — pesquisa, filtros, selos NOVO / AMOSTRA e etiquetas no leitor (melhorias 3, 4, 6 e 12, 2026-10-02) */
.va-busca { display: flex; gap: 8px; align-items: center; padding: 10px 14px 0; }
.va-busca-in { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 999px;
	border: 1px solid rgba(128,128,128,.28); }
.va-busca-in svg { width: 17px; height: 17px; opacity: .55; flex: 0 0 auto; }
.va-busca-in .va-q { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--f7-text-color); font-size: 15px; height: 38px; }
.va-busca-in .va-q::-webkit-search-cancel-button { display: none; }
.va-busca-x { color: var(--f7-text-color); opacity: .55; display: flex; }
.va-busca-x[hidden] { display: none; }
.va-busca-x svg { width: 17px; height: 17px; }
.va-filtro-btn { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(128,128,128,.28);
	display: flex; align-items: center; justify-content: center; color: var(--f7-text-color); }
.va-filtro-btn svg { width: 18px; height: 18px; }
.va-filtro-btn.on { border-color: var(--f7-theme-color); color: var(--f7-theme-color); }
.va-filtro-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
	background: var(--f7-theme-color); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.va-filtro-n[hidden] { display: none; }
.va-filtros { padding: 10px 14px 4px; }
.va-filtros[hidden] { display: none; }
.va-fg { margin-bottom: 10px; }
.va-fg-t { font-size: 12px; opacity: .6; margin-bottom: 6px; }
.va-fg-v { display: flex; flex-wrap: wrap; gap: 6px; }
.va-fchip { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--f7-text-color); border: 1px solid rgba(128,128,128,.28); }
.va-fchip.on { background: var(--f7-theme-color); border-color: var(--f7-theme-color); color: #fff; }
.va-filtros-limpar { display: inline-block; font-size: 13px; color: var(--f7-theme-color); margin: 2px 0 6px; }
.va-sem-res { text-align: center; padding: 50px 24px; opacity: .55; }
.va-sem-res[hidden] { display: none; }
.va-sem-res svg { width: 38px; height: 38px; margin-bottom: 10px; }
.va-visto { top: auto; bottom: 8px; }
.va-pill-th { position: absolute; left: 6px; top: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .05em;
	text-transform: uppercase; color: #fff; }
.va-pill-novo { background: var(--f7-theme-color); }
.va-pill-amostra { background: #2e9d4f; }
.va-th-sem .va-pill-th { left: auto; right: 6px; }
.va-card-amostra .va-th img { filter: none; opacity: 1; }
.va-am-ban { display: flex; align-items: center; gap: 10px; margin: 12px 18px 0; padding: 10px 14px; border-radius: 12px;
	background: rgba(46,157,79,.12); color: #2e9d4f; font-size: 13px; line-height: 1.35; }
.va-am-ban svg { width: 18px; height: 18px; flex: 0 0 auto; }
.va-am-ban span { flex: 1 1 auto; }
.va-pop-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.va-pop-tags span { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(128,128,128,.3); opacity: .85; }
/* VÍDEO AULAS — programas por ordem (melhoria 7, 2026-10-02) */
.va-num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 6px;
	border-radius: 10px; background: var(--f7-theme-color); color: #fff; font-size: 11px; vertical-align: 1px; }
.va-card-ordem .va-th img { filter: grayscale(1); opacity: .45; }
.va-card-ordem .va-th-play { background: rgba(0,0,0,.35); }
.va-card-ordem .va-th-play svg { width: 26px; height: 26px; }
.va-card-ordem .va-num { background: rgba(128,128,128,.5); }
.va-prog-cab { display: flex; align-items: center; gap: 10px; font-size: 12px; opacity: .8; margin: -4px 2px 12px; }
.va-prog-cab-b { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(128,128,128,.22); overflow: hidden; }
.va-prog-cab-b i { display: block; height: 100%; background: var(--f7-theme-color); }
/* enviar para o MEU ecrã (www.workout.regyfit.com): o título do vídeo por baixo do título da folha */
.va-ca-vid { font-size: 15px; margin: -4px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* EM DESTAQUE (melhoria 10): a faixa do topo com cartões maiores; com um só, ocupa a largura toda */
.va-sec-dst .va-sec-tit > i, .va-sec-dst .va-sec-tit > svg { color: #f39c12; }
.va-fila-dst .va-card { flex: 0 0 86%; max-width: 420px; }
.va-fila-dst .va-card:only-child { flex-basis: 100%; max-width: none; }
.va-fila-dst .va-tit { font-size: 15px; }

/* CLAUDE CREATED CSS - NOTIFICACOES: linha pequena por baixo do rotulo ("Comunicacoes de {box}", 2026-10-02) */
.ntf-sub { display:block; font-size:12px; line-height:1.3; opacity:.6; margin-top:3px; }
.ntf-label .info-point { margin-right:4px; }

/* CLAUDE CREATED CSS - O MEU PLANO: cancelar a inscricao (2026-10-04) — texto da aceitacao em varias linhas */
.cin-quebra { white-space: normal; }

/* CLAUDE CREATED CSS - CANCELAR A INSCRICAO: pagina /cancel_insc/ (Miguel, 2026-10-07) — cartao do resumo (datas lado a
   lado, parcelas por linha, total em destaque com degrade na cor do tema e icone esbatido) + cartao das condicoes.
   Sem sombra nem negrito: separa-se com filetes e tons. O botao sem o visto fica esbatido mas responde (cin-btn-off). */
.cin-card { margin-top:16px; border:1px solid rgba(128,128,128,.18); border-radius:14px; overflow:hidden; background:var(--f7-card-bg-color); }
.cin-datas { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; padding:14px; }
.cin-datas.cin-uma { grid-template-columns:minmax(0,1fr); }
.cin-data { border:1px solid rgba(128,128,128,.16); border-radius:12px; padding:10px 12px; }
.cin-data .cin-ic { display:block; width:18px; height:18px; color:var(--f7-theme-color); margin-bottom:6px; }
.cin-rot { font-size:10px; line-height:1.35; text-transform:uppercase; letter-spacing:.08em; opacity:.55; }
.cin-val { font-size:16px; margin-top:3px; }
.cin-linha { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; border-top:1px solid rgba(128,128,128,.15); }
.cin-det { font-size:12px; opacity:.6; margin-top:3px; }
.cin-v { font-size:16px; white-space:nowrap; }
.cin-total { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 14px;
	border-top:1px solid color-mix(in srgb, var(--f7-theme-color) 30%, transparent);
	background:linear-gradient(135deg, color-mix(in srgb, var(--f7-theme-color) 18%, transparent) 0%, color-mix(in srgb, var(--f7-theme-color) 5%, transparent) 55%, transparent 100%); }
.cin-total .cin-rot, .cin-total .cin-num { position:relative; z-index:1; }
.cin-total .cin-rot { opacity:.75; }
.cin-num { font-size:26px; font-weight:500; color:var(--f7-theme-color); white-space:nowrap; }
.cin-total .cin-bg { position:absolute; left:-12px; bottom:-18px; width:76px; height:76px; opacity:.07; pointer-events:none; z-index:0; }
.cin-cond { margin-top:16px; border:1px solid rgba(128,128,128,.18); border-radius:14px; padding:14px; background:var(--f7-card-bg-color); }
.cin-aceite { display:flex; align-items:center; gap:12px; min-height:0; padding:12px 0 0 0; margin-top:12px; border-top:1px solid rgba(128,128,128,.15); cursor:pointer; }
.cin-aceite.cin-so { padding-top:0; margin-top:0; border-top:0; }
.cin-aceite .icon { flex:0 0 auto; width:24px; height:24px; }
.cin-btn-off { opacity:.45; }
/* CLAUDE CREATED CSS - A TUA CONTA (pages/configs/account.php, 2026-10-07): todos os cartoes com a mesma largura
   (era o margin:5px inline dos cartoes do plano; Notas, Cancelamento e Eliminar ficavam com a margem do F7, mais estreitos) */
.acc-card { margin:5px 5px 20px 5px; }
/* CLAUDE CREATED CSS - CANCELAR A INSCRICAO (2026-10-07): o titulo vive na barra de cima, ao lado da seta, sempre visivel
   (a barra transparente so o mostrava ao descer; mesmo padrao da calculadora do Cross) */
.page[data-name="cancel_insc"] .navbar-transparent .title { opacity: 1 !important; }
.page[data-name="cancel_insc"] .navbar-transparent .navbar-bg { opacity: 1 !important; }

/* CLAUDE CREATED CSS - DOCUMENTOS 2.0 (SECRETARIA, Fase 3, 2026-10-08) */
/* ---À TUA ESPERA (confirmação de leitura)--- */
.sec-espera-n { display: inline-block; font-size: 10px; letter-spacing: 0; color: var(--wp-on-theme, #fff); background: var(--f7-theme-color); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.sec-espera { margin: 8px 16px 0; border: 1px solid var(--f7-theme-color); border-radius: 14px; padding: 12px 14px; }
.sec-espera-h { display: flex; align-items: center; gap: 10px; }
.sec-espera-t { font-size: 14px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sec-espera-tx { font-size: 12px; opacity: .6; margin: 8px 0 10px; line-height: 1.45; }
.sec-espera-bt { display: flex; gap: 8px; }
.sec-espera-bt .button { flex: 1; gap: 6px; }
.sec-espera-bt .button svg { width: 16px; height: 16px; }
/* ---dossiê/documento confidencial, descrição, confirmação no item--- */
.sec-ic-conf { border-color: rgba(229,72,77,.5); }
.sec-ic-conf .icon, .sec-ic-conf svg { color: #E5484D; }
.sec-dos-desc { margin: 14px 16px 0; font-size: 13px; opacity: .65; line-height: 1.5; overflow-wrap: anywhere; }
.sec-conf-linha { padding: 0 16px 10px 68px; }
.sec-conf-linha .button { display: inline-flex; width: auto; }
.sec-conf-ok { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #1FA55A; }
/* ---visualizador (/secretaria/doc/)--- */
.sec-vw-pc { background: #3b3b40; }
.sec-vw { padding: 8px 8px 70px; display: flex; flex-direction: column; align-items: center; gap: 8px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sec-vw-folha { position: relative; overflow: hidden; background: #fff; max-width: 100%; }
.sec-vw-folha canvas, .sec-vw-img { display: block; max-width: 100%; height: auto; pointer-events: none; }
.sec-wm { position: absolute; inset: -30%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; transform: rotate(-30deg); pointer-events: none; }
.sec-wm span { font-size: 15px; color: rgba(229,72,77,.22); white-space: nowrap; letter-spacing: .5px; }
.sec-vw-load { padding: 60px 0; display: flex; justify-content: center; }
.sec-vw-spin { width: 26px; height: 26px; color: #fff; opacity: .6; animation: sec-vw-gira 1s linear infinite; }
@keyframes sec-vw-gira { to { transform: rotate(360deg); } }
.sec-vw-erro { color: #fff; opacity: .75; font-size: 13px; text-align: center; padding: 60px 20px; }
.sec-vw-bar-t { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .65; margin: 0 auto; }
.sec-vw-bar-t svg { width: 16px; height: 16px; color: #E5484D; }
/* ---Documentos 2.0 · CIRCUITOS (Fase 4): enviar documento, percurso, menu RH--- */
.sec-env-bt, .rh-docs-env { display: inline-flex; gap: 8px; width: 100%; }
.sec-env-bt svg, .rh-docs-env svg { width: 17px; height: 17px; }
.sec-drop { display: block; margin: 14px 16px 0; border: 2px dashed rgba(128,128,128,.35); border-radius: 16px; padding: 22px 12px; text-align: center; font-size: 13px; cursor: pointer; }
.sec-drop svg { width: 30px; height: 30px; color: var(--f7-theme-color); display: block; margin: 0 auto 6px; }
.sec-drop-sub { display: block; font-size: 11px; opacity: .55; margin-top: 4px; }
.sec-rota { margin: 12px 16px 0; padding: 12px 14px; border-radius: 14px; background: rgba(128,128,128,.07); font-size: 12px; line-height: 1.5; }
.sec-rota-t { display: flex; align-items: center; gap: 6px; opacity: .7; margin-bottom: 6px; }
.sec-rota-t svg, .sec-rota-conf svg { width: 15px; height: 15px; flex-shrink: 0; }
.sec-rota-p { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.sec-rota-st { font-size: 11px; border: 1px solid rgba(128,128,128,.3); border-radius: 999px; padding: 3px 9px; }
.sec-rota-ar { opacity: .4; }
.sec-rota-conf { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; }
.sec-rota-conf svg { color: #E5484D; margin-top: 1px; }
.rh-doc-pz { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(227,154,0,.14); color: #E39A00; }
.rh-doc-pz.late { background: rgba(229,72,77,.13); color: #E5484D; }
.rhd-tl { margin: 10px 16px 0 32px; position: relative; }
.rhd-tl::before { content: ""; position: absolute; left: -16px; top: 4px; bottom: 6px; width: 2px; background: rgba(128,128,128,.2); }
.rhd-it { position: relative; margin-bottom: 14px; font-size: 13.5px; overflow-wrap: anywhere; }
.rhd-d { position: absolute; left: -22px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(128,128,128,.45); background: var(--f7-page-bg-color); }
.rhd-it.feito .rhd-d { background: #1FA55A; border-color: #1FA55A; }
.rhd-it.agora .rhd-d { border-color: #E39A00; }
.rhd-it.dev .rhd-d { background: #E5484D; border-color: #E5484D; }
.rhd-w { font-size: 11px; opacity: .55; margin-top: 1px; }
.rhd-c { font-size: 12px; background: rgba(128,128,128,.08); border-radius: 10px; padding: 7px 10px; margin-top: 5px; white-space: pre-wrap; }
.rhd-bts { display: flex; flex-direction: column; gap: 8px; }
.rhd-bts .button, .rhd-file { display: inline-flex; gap: 6px; }
.rhd-bts .button svg, .rhd-file svg { width: 16px; height: 16px; }

/* CLAUDE CREATED CSS - COMPENSACAO DE AULAS: explicacao para o atleta (A TUA CONTA, folha mod_comp; 2026-10-10).
   Um topico por linha; a etiqueta sai a laranja e em maiusculas (langs/ajudas/{lingua}/compensacao_atleta.php). */
.comp-linha { padding-top: 10px; line-height: 1.4; }
.comp-termo { color: #ffa726; text-transform: uppercase; }

/* CLAUDE CREATED CSS - PRAZOS DO CRM 3.0 na APP (fase 6, 2026-10-10): o quadro do prazo do passo na ficha do contacto
   (pages/crm/prazo_box.php), a pastilha nos resultados da pesquisa e "O meu horario comercial" (tabs_menu/horario.php).
   Laranja a decorrer, vermelho atrasado, verde cumprido; fundos em transparencia (servem no escuro); sem negrito. */
.crm-sla { margin: 4px 16px 12px; border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.07); border-left: 4px solid #f59e0b; border-radius: 12px; padding: 12px 14px; }
.crm-sla.late { border-color: rgba(252,84,75,.4); background: rgba(252,84,75,.06); border-left-color: #fc544b; }
.crm-sla.done { border-color: rgba(71,195,99,.4); background: rgba(71,195,99,.07); border-left-color: #47c363; }
.crm-sla-t { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.crm-sla-tt { opacity: .65; min-width: 0; }
.crm-sla-dono { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; opacity: .65; white-space: nowrap; }
.crm-sla-big { display: flex; align-items: center; gap: 6px; font-size: 20px; line-height: 1.3; }
.crm-sla-big svg { width: 20px; height: 20px; flex-shrink: 0; }
.crm-sla-big.g, .crm-sla-big.ok { color: #2e8b47; } .crm-sla-big.o { color: #b46d00; } .crm-sla-big.r { color: #c6352d; }
.dark .crm-sla-big.g, .dark .crm-sla-big.ok { color: #6fd18a; } .dark .crm-sla-big.o { color: #f5b04a; } .dark .crm-sla-big.r { color: #ff8a83; }
.crm-sla-pq { font-size: 12px; opacity: .6; }
.crm-sla-ln { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-size: 13px; }
.crm-sla-ln > svg { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; opacity: .6; }
.crm-sla-ln > span { min-width: 0; }
.crm-sla-prog { display: flex; gap: 4px; margin: 5px 0 3px; }
.crm-sla-prog span { width: 22px; height: 6px; border-radius: 3px; background: rgba(128,128,128,.22); }
.crm-sla-prog span.f { background: #f59e0b; }
.crm-sla-prog span.m { margin-left: 6px; }
.crm-sla-pill { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; margin-right: 6px; white-space: nowrap; }
.crm-sla-pill svg { width: 12px; height: 12px; }
.crm-sla-pill.g { background: rgba(71,195,99,.14); color: #2e8b47; }
.crm-sla-pill.o { background: rgba(245,158,11,.16); color: #b46d00; }
.crm-sla-pill.r { background: rgba(252,84,75,.13); color: #c6352d; }
.dark .crm-sla-pill.g { color: #6fd18a; } .dark .crm-sla-pill.o { color: #f5b04a; } .dark .crm-sla-pill.r { color: #ff8a83; }
.crm-hor-abre { display: flex; align-items: center; gap: 10px; margin: 8px 16px 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(128,128,128,.25); color: var(--f7-text-color); font-size: 14px; }
.crm-hor-abre > svg:first-child { width: 18px; height: 18px; color: var(--f7-theme-color); }
.crm-hor-abre .crm-res-chev { margin-left: auto; }
.crm-hor-cab { display: flex; align-items: flex-start; gap: 6px; margin: 16px 16px 8px; font-size: 13px; opacity: .8; }
.crm-hor-d { display: flex; flex-direction: column; width: 92px; flex-shrink: 0; font-size: 14px; }
.crm-hor-off { opacity: .45; }
.crm-hor-dia.exc .crm-res-nome { color: var(--f7-theme-color); }
/* o esbatido vai nos filhos: a animação de entrada da .crm-res-row acaba em opacity:1 e venceria um opacity na linha */
.crm-hor-dia.bloq > * { opacity: .45; }
.crm-hor-dia.bloq > .crm-hor-cad { width: 14px; height: 14px; opacity: .6; }   /* o cadeado no lugar da seta */
/* PRAZOS A CORRER no separador Agenda (2026-10-10): o cabeçalho das secções da agenda, em laranja (o vermelho é dos atrasados) */
.crmag-sec.crm-sla-sec { margin-top: 14px; background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 26%, transparent), color-mix(in srgb, #f59e0b 7%, transparent) 55%, transparent); }
.crm-sla-lista { margin-bottom: 10px; }
.crm-hor-regra { margin-top: 0; }
.crm-hor-regra svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.crm-hor-tag { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; color: var(--f7-theme-color); background: color-mix(in srgb, var(--f7-theme-color) 14%, transparent); }

/* ===== A MINHA BOX (pages/minha_box/, 2026-10-11) — port do menu "Minha Box" da app antiga ===== */
.mb-ico { width: 20px; height: 20px; color: var(--f7-theme-color); }
.mb-regra { white-space: normal; line-height: 1.45; padding: 4px 0; }
.mb-regulamento { line-height: 1.55; word-break: break-word; }
.mb-regulamento img, .mb-eq-cv img { max-width: 100%; height: auto; }
.mb-av { width: 40px; height: 40px; }
/* lista de atletas: linha fina a separar cada membro (Miguel, 11-10) */
.mb-atl-lista li:not(:last-child) { border-bottom: 1px solid rgba(128,128,128,.18); }
.mb-aniv-txt { display: flex; flex-direction: column; min-width: 0; }
.mb-aniv-data { line-height: 1.2; }
.mb-aniv-mais { margin-top: 18px; }
.mb-eq-head { cursor: pointer; }
.mb-eq-head.open .aniv-chev { transform: rotate(180deg); }
.mb-eq-nome { min-width: 0; }
.mb-eq-cv { line-height: 1.55; padding: 6px 0 12px; word-break: break-word; }
/* os campos de texto dos murais estão FORA de uma .list: sem isto ficavam com a largura intrínseca (ver .dp-page) */
.mb-campo-livre .item-input-wrap { width: 100%; }
.mb-campo-livre .item-input-wrap textarea { width: 100%; box-sizing: border-box; }
.mb-mail-list { margin: 8px 0 12px; }
.mb-mail-form .button { margin-bottom: 14px; }
/* MODO FOCO (aniversários e treinadores): o aberto emoldurado, os outros minimizados, escurecidos e desfocados */
.mb-aniv, .mb-eq { transition: opacity .2s, filter .2s; }
/* moldura do item aberto: a cor do tema esbatida (Miguel, 11-10: "linha laranja demasiado viva") */
.mb-aberto { border: 1px solid rgba(var(--f7-theme-color-rgb), .35); border-radius: 14px; padding: 0 10px; margin: 6px -11px;
	background: color-mix(in srgb, var(--f7-theme-color) 6%, transparent); }
.mb-apag { opacity: .35; filter: blur(1px); }
.mb-apag:hover { opacity: .6; filter: none; }
.mb-apag .aniv-item { padding: 4px 0; }
.mb-apag .aniv-foto { width: 32px; height: 32px; }
.mb-apag .mb-aniv-data { display: none; }
/* Fase 4 (11-10): marcadores, situação/plano, treinadores, contactos */
.mb-tab-link { position: relative; }
.mb-menu-badge { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: var(--f7-theme-color);
	font-size: 9px; display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; pointer-events: none; }
.mb-menu-badge svg { width: 10px; height: 10px; }
.mb-aniv-n { display: inline-flex; align-items: center; gap: 3px; }
.mb-aniv-n svg { width: 14px; height: 14px; }
.mb-regra .info-point { margin-right: 6px; }
.block-title .info-point { margin-right: 6px; }
/* texto a laranja vai sempre em maiúsculas, por CSS (regra do Miguel) */
.mb-alerta .mb-ico, .mb-alerta .mb-regra { color: #e67e22; }
.mb-alerta .mb-regra { text-transform: uppercase; }
.mb-ok .mb-ico { color: #2ecc71; }
.mb-plano + .mb-plano { margin-top: 10px; }
.mb-plano-tit { opacity: .7; }
.mb-plano-mais { margin-top: 6px; }
.mb-eq-chip { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; margin-right: 6px; text-transform: uppercase; letter-spacing: .3px;
	color: var(--f7-theme-color); background: color-mix(in srgb, var(--f7-theme-color) 14%, transparent); }
.mb-atl-lista .item-after { display: flex; align-items: center; }
.mb-eq-foto-g { text-align: center; padding: 6px 0 10px; }
.mb-eq-foto-g img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; cursor: zoom-in; }
.mb-eq-aulas { display: flex; flex-direction: column; margin-bottom: 8px; }
.mb-eq-aula { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(128,128,128,.15); color: var(--f7-text-color); }
.mb-eq-aula:last-child { border-bottom: 0; }
.mb-eq-aula-dia { flex: 0 0 64px; text-transform: uppercase; }
.mb-eq-aula-h { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.mb-eq-aula-n { flex: 1; min-width: 0; text-transform: uppercase; }
.mb-ct-a { color: var(--f7-text-color); }
.mb-ct-extra { flex: 0 0 auto; }
.mb-ct-extra a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px;
	color: var(--f7-theme-color); background: rgba(var(--f7-theme-color-rgb),.14); }
.mb-sug-tab .mbr-lin-txt > span { display: block; }
.mb-sug-tab .mbr-card .button { margin-top: 2px; }
.mb-ct-extra svg { width: 14px; height: 14px; }
/* A MINHA BOX em CARTÕES (11-10): contorno fino + ícone grande esbatido no canto, na cor do tema (--mbr, rgb solto).
   O degradê de fundo saiu no mesmo dia, a pedido do Miguel. Sem sombras nem blur; claro e escuro só com tons. */
.mbr { padding: 12px 14px 0; }
/* SEMPRE NA COR DO TEMA (Miguel, 11-10: "existe uma cor do tema, deve ser respeitada; demasiadas cores fica
   folclórico"). As classes .mbr-c-* que ainda vêm no markup já não mudam a cor; o único desvio é o laranja dos alertas. */
.mbr-card { --mbr: var(--f7-theme-color-rgb); position: relative; overflow: hidden; margin: 0 0 14px; padding: 14px 16px 8px;
	border: 1px solid rgba(128,128,128,.2); border-radius: 16px;
	/* SEM degradê (Miguel, 11-10, depois de o ver em todas as tabs): fundo liso, só o contorno fino. Fica o
	   ícone grande esbatido no canto (.mbr-fundo) e a cor do tema nos ícones, números e barras. */
	background: transparent; }
/* listas e formulários do F7 dentro de um cartão: sem fundo, sem filetes do F7 e sem recuo próprio */
.mbr-card .list { margin: 4px 0 0; }
.mbr-card .list ul { background: transparent; }
.mbr-card .list ul::before, .mbr-card .list ul::after, .mbr-card .list .item-inner::after { display: none; }
.mbr-card .list .item-content { padding-left: 0; }
.mbr-card .list .item-inner { padding-right: 0; }
/* campos com contorno (outline): o recuo volta, senão o ícone (a lupa) ficava encostado à linha do contorno */
.mbr-card .list .item-input-outline.item-content,
.mbr-card .list .item-input-outline .item-content { padding-left: 14px; }
/* e sem a margem de 16px de cada lado que o F7 dá aos campos com contorno: ficam da largura dos botões (Miguel, 11-10) */
.mbr-card .list .item-input-outline.item-content,
.mbr-card .list .item-input-outline .item-content { margin-left: 0; margin-right: 0; }
.mbr-card .list .item-input-outline.item-content .item-inner,
.mbr-card .list .item-input-outline .item-content .item-inner { padding-right: 14px; }
/* linhas com seta (item-link): devolve o espaço da seta, senão o que está à direita (o chip EQUIPA) ficava por cima dela */
.mbr-card .list .item-link .item-inner { padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-chevron-icon-area)); }
/* CAMPOS dentro de um cartão (Miguel, 11-10: "o fundo dos labels devia estar na cor do cartão"). O F7 pinta o rótulo
   flutuante com a cor da página, para tapar o contorno — sobre o degradê do cartão via-se um retângulo. Aqui o campo
   ganha um preenchimento discreto (--mbr-campo) e o rótulo leva-o só na metade de BAIXO: a de cima, fora do campo,
   fica transparente sobre o cartão; a de baixo tapa a linha do contorno com a mesma cor do campo. */
.mbr-card { --mbr-campo: color-mix(in srgb, var(--f7-theme-color) 4%, var(--f7-page-bg-color)); }
.mbr-card .item-input-outline .item-content::before,
.mbr-card .item-input-outline.item-content::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; bottom: 8px;
	border-radius: var(--f7-input-outline-border-radius); background: var(--mbr-campo); pointer-events: none; z-index: -1; }
.mbr-card .item-input-outline .item-content .item-floating-label,
.mbr-card .item-input-outline .item-content .item-label,
.mbr-card .item-input-outline.item-content .item-floating-label,
.mbr-card .item-input-outline.item-content .item-label { background: linear-gradient(to bottom, transparent 45%, var(--mbr-campo) 45%) !important; }
.mbr-card .list.mbr-form .item-content { margin-bottom: 8px; }
.mbr-card .list.mbr-lista li:not(:last-child) { border-bottom: 1px solid rgba(128,128,128,.15); }
.mbr-card .aniv-item:last-child, .mbr-card .mb-eq:last-child .aniv-item { border-bottom: 0; }
.mbr-card .mbr-vazio { padding: 10px 0 12px; font-size: 14px; opacity: .65; }
.mbr-card .button { margin: 6px 0 8px; }
.mbr-mais { margin: -2px 0 14px; }
/* cartão sem cabeçalho (o título repetiria o da página): menos espaço em cima */
.mbr-card.mbr-sem-cab { padding-top: 6px; }
.mbr-fundo { position: absolute; right: -14px; bottom: -18px; width: 96px; height: 96px; opacity: .07; color: rgb(var(--mbr)); pointer-events: none; z-index: 0; }
.mbr-card > *:not(.mbr-fundo) { position: relative; z-index: 1; }
.mbr-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mbr-cab-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	background: rgba(var(--mbr),.18); color: rgb(var(--mbr)); }
.mbr-cab-ico svg { width: 18px; height: 18px; }
.mbr-cab-tit { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; }
.mbr .info-point { margin-right: 6px; }
.mbr-lin { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(128,128,128,.15);
	color: var(--f7-text-color); font-size: 14px; line-height: 1.45; }
.mbr-cab + .mbr-lin { border-top: 0; }
.mbr-lin-ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: rgb(var(--mbr)); opacity: .85; }
.mbr-lin-txt { flex: 1; min-width: 0; }
.mbr-lin-seta { width: 18px; height: 18px; opacity: .4; flex: 0 0 auto; }
/* laranja = alerta, e vai em maiúsculas por CSS (regra do Miguel) */
.mbr-lin.mb-alerta .mbr-lin-txt, .mbr-lin.mb-alerta .mbr-lin-ico { color: #e67e22; }
.mbr-lin.mb-alerta .mbr-lin-txt { text-transform: uppercase; }
.mbr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 10px; }
.mbr-kpi { position: relative; overflow: hidden; padding: 12px; border-radius: 12px; border: 1px solid rgba(128,128,128,.18); background: rgba(128,128,128,.06); }
.mbr-kpi-n { font-size: 26px; font-weight: 500; line-height: 1.1; color: rgb(var(--mbr)); font-variant-numeric: tabular-nums; }
.mbr-kpi-n span { font-size: 14px; opacity: .6; margin-left: 2px; }
.mbr-kpi-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin-top: 4px; }
.mbr-kpi-fundo { position: absolute; right: -8px; bottom: -10px; width: 52px; height: 52px; opacity: .08; color: rgb(var(--mbr)); pointer-events: none; }
.mbr-kpi-alerta .mbr-kpi-n { color: #e67e22; }
.mbr-estado { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 6px; }
.mbr-estado svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mbr-estado-ok { background: rgba(var(--f7-theme-color-rgb),.12); color: var(--f7-theme-color); }
.mbr-estado-alerta { background: rgba(243,156,18,.15); color: #e67e22; text-transform: uppercase; }
.mbr-barra { padding: 10px 0; border-top: 1px solid rgba(128,128,128,.15); }
.mbr-cab + .mbr-barra { border-top: 0; }
.mbr-barra-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.mbr-barra-n { font-variant-numeric: tabular-nums; color: rgb(var(--mbr)); }
.mbr-barra-fundo { height: 8px; border-radius: 999px; background: rgba(128,128,128,.18); overflow: hidden; }
.mbr-barra-enc { height: 100%; width: var(--mbr-pct); border-radius: 999px; background: linear-gradient(90deg, rgba(var(--mbr),.55), rgb(var(--mbr))); }
.mbr-barra-cheia .mbr-barra-enc { background: linear-gradient(90deg, #f5b041, #e67e22); }
.mbr-barra-cheia .mbr-barra-n { color: #e67e22; }
.mbr-comp { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; margin: 2px 0 8px; border-radius: 10px; font-size: 13px; background: rgba(var(--mbr),.12); }
.mbr-comp svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: rgb(var(--mbr)); }
.mbr-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; padding-top: 10px; border-top: 1px solid rgba(128,128,128,.15); }
.mbr-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 6px; }
.mbr-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--mbr),.14); color: var(--f7-text-color); }
.mbr-conta { margin: -2px 0 14px; }
.mbr-regulamento { font-size: 14px; line-height: 1.55; word-break: break-word; padding: 6px 0 4px; }
.mbr-regulamento img { max-width: 100%; height: auto; }
/* CAIXA DE SUGESTÕES (11-10) */
.mb-sug-intro { margin-bottom: 8px; }
.mb-sug-aviso { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px;
	background: color-mix(in srgb, var(--f7-theme-color) 10%, transparent); }
.mb-sug-aviso svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--f7-theme-color); margin-top: 1px; }
.mb-sug-form .item-input-wrap textarea { min-height: 38px; }
.mb-chk-cor { color: var(--f7-theme-color); }
.mb-sug-anon-l .item-title { white-space: normal; display: inline-flex; align-items: center; }
.mb-sug-texto { padding-top: 2px; word-break: break-word; }
/* as que ainda não foram lidas: lápis e caixote à direita; ao editar, o texto dá lugar à caixa + CANCELAR/GRAVAR */
.mb-sug-acoes { display: flex; gap: 6px; flex: 0 0 auto; }
.mb-sug-acoes a { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
	color: var(--f7-theme-color); background: rgba(var(--mbr),.12); }
.mb-sug-acoes svg { width: 16px; height: 16px; }
.mb-sug-lin .mb-sug-ed { display: none; }
.mb-sug-lin.editando .mb-sug-ed { display: block; padding-top: 6px; }
.mb-sug-lin.editando .mb-sug-texto, .mb-sug-lin.editando .mb-sug-acoes { display: none; }
.mb-sug-ed .list { margin: 0; }
.mb-sug-ed-bts { display: flex; gap: 8px; }
.mb-sug-tab .mb-sug-ed-bts .button { flex: 1; margin: 0 0 2px; }
/* GRAVAR com alterações por gravar: laranja com a bolinha branca a piscar (regra da casa) */
.mb-sug-tab .mb-sug-save.mb-sujo { background: #f59e0b; color: #fff; }
.mb-sug-save.mb-sujo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-right: 8px; flex: 0 0 auto;
	animation: mb-sujo-pisca 1s ease-in-out infinite; }
@keyframes mb-sujo-pisca { 50% { opacity: .2; } }
/* a resposta da box, por baixo da sugestão: filete e fundo leve na cor do tema */
.mb-sug-resp { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--f7-theme-color); border-radius: 8px;
	background: rgba(var(--f7-theme-color-rgb),.08); }
.mb-sug-resp-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; opacity: .75; }
.mb-sug-resp-cab svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--f7-theme-color); }
.mb-sug-resp-txt { display: block; padding-top: 3px; word-break: break-word; }
/* TEMA (chips em várias linhas: são poucos), FOTOGRAFIA e CONTADOR do formulário */
.mb-sug-temas-tit { text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 6px; }
.mb-sug-temas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mb-sug-tema { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12px;
	color: var(--f7-text-color); background: rgba(var(--f7-theme-color-rgb),.10); border: 1px solid transparent; }
.mb-sug-tema svg { width: 14px; height: 14px; color: var(--f7-theme-color); }
.mb-sug-tema.on { color: #fff; background: var(--f7-theme-color); }
.mb-sug-tema.on svg { color: #fff; }
.mbr-card .list li.mb-sug-extra { display: flex; align-items: center; gap: 10px; padding: 0 4px 8px; }
.mb-sug-foto-bt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--f7-theme-color); }
.mb-sug-foto-bt svg { width: 18px; height: 18px; }
.mb-sug-foto-bt.off { display: none; }
.mb-sug-foto-prev { display: none; position: relative; }
.mb-sug-foto-prev.on { display: inline-block; }
.mb-sug-foto-prev img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(128,128,128,.25); display: block; }
.mb-sug-foto-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
	align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.65); }
.mb-sug-foto-x svg { width: 14px; height: 14px; }
.mb-sug-conta { margin-left: auto; font-variant-numeric: tabular-nums; }
.mb-sug-conta.mb-sug-conta-fim { color: #e67e22; opacity: 1; }
/* na lista: o tema e a fotografia de cada sugestão */
.mb-sug-tab .mbr-lin-txt > span.mb-sug-tema-chip { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 2px; padding: 1px 8px;
	border-radius: 999px; font-size: 11px; background: rgba(var(--f7-theme-color-rgb),.12); }
.mb-sug-tema-chip svg { width: 12px; height: 12px; color: var(--f7-theme-color); }
.mb-sug-foto-lista img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; margin-top: 6px; border: 1px solid rgba(128,128,128,.25); }
.mb-sug-novo { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px;
	color: #fff; background: var(--f7-theme-color); }




/* ---SECRETARIA · visualizador de documentos normais: PARTILHAR na barra de baixo (2026-10-13)--- */
.sec-vw-share { display: flex; align-items: center; gap: 8px; margin: 0 auto; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--f7-theme-color); }
.sec-vw-share svg { width: 18px; height: 18px; }

/* CLAUDE CREATED CSS - HOME, AS TUAS MARCACOES (2026-10-14): uma informacao por linha — [unidade] / sala / aula.
   A unidade so aparece em contas com varias unidades (pages/home/classes.php). As marcacoes drop-in ficam com o .hb-tit de sempre. */
.hb-tit--linhas { flex-direction: column; align-items: stretch; gap: 1px; }
.hb-tit--linhas .hb-tit-loc { display: flex; min-width: 0; }
.hb-tit--linhas .hb-tit-nome { display: block; }

/* WhatsApp do CRM (14-10-2026, js/app.js): a caixa de escrever a mensagem e a do "Enviaste o WhatsApp?", dentro do confirmar().
   Cresce com o texto (sem barra), fundo verde suave como no Regy ADMIN. */
.regy-wa-txt { display: block; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px 12px; min-height: 80px; resize: none; overflow: hidden;
	font: inherit; font-size: 14px; text-align: left; color: var(--f7-text-color); background: rgba(37, 211, 102, .10); border: 1px solid rgba(37, 211, 102, .35); border-radius: 10px; }
.regy-wa-txt:focus { outline: none; border-color: rgba(37, 211, 102, .8); }
/* o aviso de marcadores vazios por cima da caixa (14-10-2026): "Vazio para este contacto: «…»" */
.regy-wa-vz { margin-top: 10px; font-size: 13px; text-align: left; color: #d98a00; }

/* "Como correu a chamada?" do CRM (14-10-2026, regyCallPergunta em js/app.js): a janela mais larga, o nome em grande e o
   telefone pequeno por baixo, os desfechos em pílulas, a nota que cresce, e por baixo dos botões etiquetas, notas e
   timeline (pages/crm/liga_info.php) numa zona com scroll própria. */
.regy-cp-dlg.dialog { --f7-dialog-width: min(92vw, 480px); }
.regy-cp { width: 100%; text-align: left; }
.regy-cp-nome { font-size: 22px; line-height: 1.25; }
.regy-cp-tel { font-size: 12px; opacity: .6; margin-top: 2px; }
.regy-cp-perg { font-size: 15px; margin: 16px 0 10px; }
.regy-cp-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.regy-cp-op { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .35); cursor: pointer; user-select: none; }
.regy-cp-op.on { border-color: var(--f7-theme-color); color: var(--f7-theme-color); background: color-mix(in srgb, var(--f7-theme-color) 12%, transparent); }
.regy-cp-txt { display: block; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px 12px; resize: none; overflow: hidden;
	font: inherit; font-size: 14px; color: var(--f7-text-color); background: rgba(128, 128, 128, .08); border: 1px solid rgba(128, 128, 128, .3); border-radius: 10px; }
.regy-cp-txt:focus { outline: none; border-color: var(--f7-theme-color); }
.regy-cp-info { max-height: 38vh; overflow-y: auto; padding: 0 24px 20px; text-align: left; }
.regy-cp-load { width: 18px; height: 18px; margin: 6px auto 10px; border-radius: 50%; border: 2px solid rgba(128, 128, 128, .25); border-top-color: var(--f7-theme-color); animation: regy-cp-roda .8s linear infinite; }
@keyframes regy-cp-roda { to { transform: rotate(360deg); } }
.regy-cp-src { display: none; }
.regy-cp-sec { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; opacity: .5; margin: 14px 0 6px; }
.regy-cp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.regy-cp-tag { --crmtag-cor: #959595; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; white-space: nowrap;
	color: var(--crmtag-cor); background: color-mix(in srgb, var(--crmtag-cor) 16%, transparent); border: 1px solid transparent; }
.regy-cp-tag.arq { border: 1px dashed var(--crmtag-cor); }
.regy-cp-obs { font-size: 13px; white-space: pre-line; }
.regy-cp-vazio { font-size: 12px; opacity: .5; }
.regy-cp-dia { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; opacity: .5; margin: 10px 0 4px; }
.regy-cp-e { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(128, 128, 128, .15); }
.regy-cp-e-ico { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	color: var(--f7-theme-color); background: color-mix(in srgb, var(--f7-theme-color) 14%, transparent); }
.regy-cp-e-ico svg { width: 14px; height: 14px; }
.regy-cp-e-corpo { min-width: 0; }
.regy-cp-e-txt { font-size: 13px; }
.regy-cp-e-meta { font-size: 11px; opacity: .55; margin-top: 2px; }

/* CLAUDE CREATED CSS - DESAFIOS (atividades tipo 7, 2026-10-14): separadores DESAFIO e RESULTADOS,
   "o teu resultado", ranking e registo de um atleta (pages/atividades/incs/atvm_desafio.php,
   atvm_desres.php, atvm_des_score.php, atvm_des_rank.php, atvm_des_reg.php). Reaproveita os
   desenhos do modulo (atvm-section, atvw-*, atvsc-*, atvre-*, atvbp-*); aqui so o que faltava. */
.atvds-tab { padding: 12px; }
.atvds-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; }
.atvds-acao { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 18px; }
.atvds-acao svg { width: 17px; height: 17px; }
.atvds-desc { padding-top: 12px; }
.atvds-chip { display: inline-flex; align-items: center; gap: 6px; }
.atvds-chip svg { width: 13px; height: 13px; }
.atvds-regra { display: flex; align-items: center; gap: 8px; padding-top: 14px; font-size: 12.5px; opacity: .75; }
.atvds-regra .info-point { display: flex; color: var(--f7-theme-color); }
.atvds-regra .info-point svg { width: 15px; height: 15px; }
.atvds-tit-lista { padding: 16px 16px 0; }
.atvds-semvid { opacity: .45; }
.atvds-sheet-in { padding: 16px; font-size: 14px; line-height: 1.6; }
/* aviso: icone + frase, uma linha por motivo (sem caixa a cores: e informacao, nao erro) */
.atvds-aviso { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; opacity: .8; padding-top: 12px; }
.atvds-aviso > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--f7-theme-color); }
.atvds-aviso .info-point { display: flex; color: var(--f7-theme-color); }
.atvds-aviso .info-point svg { width: 15px; height: 15px; }
.atvds-aviso-lista { padding: 14px 16px 18px; }
.atvds-aviso-card { margin: 0 16px 12px; padding: 12px 14px; border-radius: 14px;
	border: 1px solid rgba(128,128,128,.25); }

/* separador RESULTADOS: o cartao do meu resultado */
.atvdr-meu { display: flex; align-items: center; gap: 12px; padding-top: 14px; color: inherit; }
.atvdr-meu-v { flex: 1; min-width: 0; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.atvdr-meu-vazio { font-size: 15px; text-transform: uppercase; color: var(--f7-theme-color); }
.atvdr-meu-e { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 4px 10px;
	border-radius: 999px; border: 1px solid rgba(128,128,128,.35); opacity: .75; white-space: nowrap; }
.atvdr-meu-e.ok { border-color: #4caf50; color: #4caf50; opacity: 1; }
.atvdr-insc { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 18px; margin-top: 12px; }
.atvdr-insc svg { width: 16px; height: 16px; }

/* o teu resultado: series numeradas + estado da validacao */
.atvdsc-serie { display: flex; align-items: flex-end; gap: 10px; padding-top: 10px; }
.atvdsc-serie .atvsc-campos { flex: 1; min-width: 0; }
.atvdsc-n { flex: 0 0 28px; font-size: 13px; opacity: .55; padding-bottom: 22px; }
.atvdsc-wrap .atvsc-campo input:disabled { opacity: .55; }
.atvdsc-wrap .atvsc-tit .info-point,
.atvdg-wrap .atvsc-tit .info-point { display: flex; color: var(--f7-theme-color); opacity: 1; }
.atvdsc-estado { display: inline-block; margin-top: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .3px;
	padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); opacity: .8; }
.atvdsc-estado.ok { border-color: #4caf50; color: #4caf50; opacity: 1; }
.atvdsc-just { padding-top: 10px; font-size: 13px; line-height: 1.5; opacity: .75; }

/* ranking */
.atvdk-estado { display: inline-flex; align-items: center; gap: 6px; }
.atvdk-estado .info-point { display: flex; color: var(--f7-theme-color); opacity: 1; }
.atvdk-estado .info-point svg { width: 13px; height: 13px; }
.atvdk-emo img { width: 13px; height: 13px; margin-right: -2px; }

/* registo de um atleta */
.atvdg-vid { flex: 0 0 auto; display: flex; color: var(--f7-theme-color); }
.atvdg-vid svg { width: 26px; height: 26px; }
.atvdg-res { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; text-align: center; }
.atvdg-res-it { display: flex; flex-direction: column; align-items: center; }
.atvdg-res-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; }
.atvdg-res-v { font-size: 38px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.atvdg-estado { display: table; margin: 12px auto 0; }
.atvdg-parc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px;
	font-size: 13px; font-variant-numeric: tabular-nums; }
.atvdg-obs { font-size: 13.5px; line-height: 1.55; }
.atvdg-emos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding-top: 4px; }
.atvdg-emo { display: flex; justify-content: center; align-items: center; aspect-ratio: 1; border-radius: 50%;
	border: 1px solid transparent; transition: transform .15s ease, border-color .15s ease; }
.atvdg-emo img { width: 70%; max-width: 30px; height: auto; }
.atvdg-emo:active { transform: scale(.88); }
.atvdg-emo.on { border-color: var(--f7-theme-color);
	background: color-mix(in srgb, var(--f7-theme-color) 16%, transparent); }
.atvdg-resumo { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: inherit; }
.atvdg-resumo-in { display: inline-flex; gap: 2px; }
.atvdg-resumo-in img { width: 18px; height: 18px; }
.atvdg-resumo-n { font-size: 13px; opacity: .7; font-variant-numeric: tabular-nums; }
.atvbp-lin img.atvdg-quem-emo { width: 26px; height: 26px; border-radius: 0; object-fit: contain; }
.atvdg-com-dt { font-size: 10.5px; opacity: .5; padding-left: 6px; text-transform: none; }

/* mapa de aulas: aviso da permissão *45* (só as aulas onde é treinador) */
.mapa-msg-prof { padding: 8px 20px; opacity: .7; }

/* CRM: CONVERTER um contacto que já é membro (reconverter / ligar e abrir a ficha) */
.pd-conv-exist { margin: 6px 16px 10px; }
.pd-conv-exist-linha { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.pd-conv-exist-linha + .pd-conv-exist-linha { border-top: 1px solid rgba(127, 127, 127, .2); }
.pd-conv-exist-ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--f7-theme-color); margin-top: 2px; }
.pd-conv-exist-txt { flex: 1; min-width: 0; }
.pd-conv-exist-sub { font-size: 12px; opacity: .6; margin: 4px 0 10px; }

/* aulas: faixa da sanção por marcações automáticas (php/bot_sancoes.php), só para o membro sancionado */
.bot-sancao { display: flex; gap: 12px; align-items: flex-start; margin: 14px 16px 0; padding: 12px 14px; border-radius: 12px; border-left: 4px solid #ff3b30; background: rgba(255, 59, 48, .08); font-size: 13px; line-height: 1.45; }
.bot-sancao > i, .bot-sancao > svg { width: 22px; height: 22px; flex: 0 0 auto; color: #ff3b30; }

/* Popup "Termos atualizados" (pages/incs/popups/termos_novos.php): o texto dos Termos vem com .block do F7,
   que impõe a cor de texto do tema (escura no tema claro) — por cima do fundo escuro do popup ficava ilegível */
.regy-popup .br-content .card-content .block { color: inherit; }

/* Títulos dos textos legais (langs/termos, langs/gdpr): o .block-title do F7 corta numa linha com reticências
   ("8. PROPRIEDADE INTELECTUAL E INDUS…"). Num texto legal o título tem de se ler inteiro — parte em linhas.
   Vale em todos os sítios onde estes textos aparecem: popup dos Termos, onboarding, Secretaria › Acordos. */
.regy-popup .br-content .block-title,
.onboarding-popup .onb-legal .block-title,
.sec-txt-content .block-title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* Popup dos Termos: botão de aceitar "à espera" até o texto ser lido até ao fim. Continua tocável (o toque
   explica que é preciso ler até ao fim) — por isso NÃO usa o .disabled do F7, que corta os toques */
.regy-popup .br-accept-bar .button.br-btn-espera { opacity: .45; }

/* CLAUDE CREATED CSS - SECRETARIA, visualizador de PDF: zona tocavel invisivel por cima de cada hiperligacao do PDF
   (pages/secretaria/doc_ver.php). No telemovel uma linha de texto do PDF mede 8 a 13px: o ::after alarga o toque 6px para
   cima e para baixo sem mexer na posicao. Nao passa dos 6px para nao invadir o link da linha ao lado. */
.sec-vw-lnk { position: absolute; display: block; }
.sec-vw-lnk::after { content: ''; position: absolute; inset: -6px 0; }