/* ===== Corpo Humano Module Styles ===== */

/* ── Module index cards ──────────────────────────────────────────────────────── */
.body-module-card {
  background: var(--surface);
  border: 3px solid rgba(255,255,255,0.18);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  color: var(--ink);
  height: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.body-module-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  border-color: var(--bm-color, var(--accent));
  color: var(--ink);
}
.body-module-icon {
  font-size: 3.5rem;
  text-align: center;
  padding: 1.5rem 1rem 0.5rem;
}
.body-module-body {
  padding: 0.75rem 1.25rem 1.25rem;
}
.body-module-body h2 {
  font-family: "Baloo 2", cursive;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.body-module-body p {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.body-module-badge {
  display: inline-block;
  background: var(--bm-color, var(--accent));
  color: #1a2a1a;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SVG CONTAINERS – universal responsive approach
   Uses explicit width on SVG element (100%) + fixed/capped height via CSS.
   Works on iOS 13+, Android 8+, and modern desktop browsers.
══════════════════════════════════════════════════════════════════════════════ */

/* Shared SVG wrapper */
.body-svgbox,
.face-svgbox {
  background: rgba(0,0,0,0.18);
  border-radius: 1.5rem;
  padding: 1.25rem 1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  width: 100%;
  /* Center within the column */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* ── Body SVG (viewBox 200×440, tall portrait) ──────────────────────────────── */
.body-svgbox {
  max-width: 260px; /* Never wider than this ideal width */
}
#body-svg {
  /* Take full width of container; height auto-calculated from viewBox */
  width: 100%;
  height: auto;
  display: block;
  /* Hard height cap so it never overflows the viewport */
  max-height: 56vh;
}

/* ── Face SVG (viewBox 240×295, near-square) ────────────────────────────────── */
.face-svgbox {
  max-width: 320px;
}
#face-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 56vh;
}

/* ── Senses diagram SVG (viewBox 200×310) ───────────────────────────────────── */
.senses-diagram-wrap {
  width: 100%;
  max-width: 240px;
  padding: 0.75rem 0.5rem;
  background: rgba(0,0,0,0.15);
  border-radius: 1.25rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.senses-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 54vh;
}

/* ── Sense-organ active glow in diagram ─────────────────────────────────────── */
.sense-organ { transition: filter 0.3s ease, opacity 0.3s ease; }
.sense-organ.sense-diagram-active {
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.9)) brightness(1.3);
  animation: organ-pulse 0.55s ease;
}
@keyframes organ-pulse {
  0%   { filter: brightness(1); }
  40%  { filter: drop-shadow(0 0 18px rgba(255,255,255,1)) brightness(1.5); }
  100% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.9)) brightness(1.3); }
}

/* ── SVG text labels ─────────────────────────────────────────────────────────── */
.body-svg-label {
  font-family: "Baloo 2", cursive;
  font-size: 12px;
  font-weight: 800;
  fill: white;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}
.body-svg-label-sm { font-size: 9px;  stroke-width: 3px; }
.body-svg-label-xs { font-size: 7.5px; stroke-width: 2.5px; }

/* Clickable SVG groups */
.body-part,
.face-part {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s ease;
}
.body-part:hover,
.face-part:hover {
  filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,255,255,0.6));
}
.body-part:active,
.face-part:active { filter: brightness(0.8); }
.body-part.body-active,
.face-part.face-active {
  filter: brightness(1.35) drop-shadow(0 0 16px rgba(255,255,255,0.9));
}

/* ── Body part info cards ────────────────────────────────────────────────────── */
.body-parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 0.85rem;
}
.body-part-card {
  background: var(--bp-bg, var(--surface));
  border: none;
  border-radius: 1.25rem;
  padding: 1rem 0.85rem;
  cursor: pointer;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  height: 100%;
}
.body-part-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,0.3);
}
.body-part-card:active { transform: scale(0.96); }
.body-part-card.body-active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,255,255,0.5) !important;
  transform: scale(1.04) !important;
  filter: brightness(1.15);
  z-index: 5;
  position: relative;
}
.bp-icon { font-size: 1.8rem; line-height: 1; }
.bp-name {
  font-family: "Baloo 2", cursive;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}
.bp-desc  { font-size: 0.72rem; opacity: 0.88; line-height: 1.3; }
.bp-fun   { font-size: 0.65rem; opacity: 0.75; font-style: italic; margin-top: 0.2rem; line-height: 1.3; }

/* ── Senses cards ────────────────────────────────────────────────────────────── */
.senses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.85rem;
}
.sense-card {
  background: var(--sense-bg, var(--surface));
  border: none;
  border-radius: 1.5rem;
  padding: 1.25rem 1.1rem;
  cursor: pointer;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  text-align: left;
}
.sense-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 18px 44px rgba(0,0,0,0.3);
}
.sense-card:active { transform: scale(0.97); }
.sense-card.sense-active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(255,255,255,0.5) !important;
  filter: brightness(1.15);
  transform: scale(1.02) !important;
}
.sense-icon   { font-size: 2.4rem; line-height: 1; }
.sense-name   { font-family: "Baloo 2", cursive; font-size: 1.3rem; font-weight: 800; }
.sense-organ  { font-size: 0.78rem; font-weight: 700; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }
.sense-desc   { font-size: 0.82rem; opacity: 0.9; line-height: 1.4; margin-top: 0.15rem; }
.sense-examples { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.sense-example-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.sense-example-tag:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.07);
}

/* ── Face part cards ─────────────────────────────────────────────────────────── */
.face-parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}
.face-part-card {
  background: var(--fp-bg, var(--surface));
  border: none;
  border-radius: 1.25rem;
  padding: 0.9rem 0.75rem;
  cursor: pointer;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 5px 18px rgba(0,0,0,0.2);
}
.face-part-card:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
.face-part-card:active { transform: scale(0.95); }
.face-part-card.face-active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,255,255,0.5) !important;
  transform: scale(1.04) !important;
  filter: brightness(1.18);
  z-index: 5;
  position: relative;
}
.fp-icon { font-size: 1.6rem; }
.fp-name { font-family: "Baloo 2", cursive; font-size: 0.88rem; font-weight: 800; line-height: 1.1; }

/* ── Audio feedback toast ────────────────────────────────────────────────────── */
.body-audio-feedback {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  background: rgba(20,48,66,0.95);
  color: var(--ink);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-family: "Baloo 2", cursive;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 1000;
  white-space: nowrap;
}
.body-audio-feedback.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Bounce animation ────────────────────────────────────────────────────────── */
@keyframes body-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15) rotate(-2deg); }
  60%  { transform: scale(0.94) rotate(1deg); }
  80%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.body-bounce { animation: body-bounce 0.45s ease; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mobile-first: assume portrait phone as baseline, expand up.
══════════════════════════════════════════════════════════════════════════════ */

/* ── Touch device minimum tap targets ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .body-part-card,
  .face-part-card  { min-height: 70px; }
  .sense-card      { min-height: 80px; }
  .sense-example-tag { min-height: 38px; padding: 0.3rem 0.7rem; }
}

/* ── Small phones ≤ 480px ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* SVGs get a bit tighter */
  .body-svgbox  { max-width: 220px; padding: 0.9rem 0.6rem; }
  .face-svgbox  { max-width: 280px; padding: 0.9rem 0.6rem; }
  #body-svg     { max-height: 52vh; }
  #face-svg     { max-height: 50vh; }
  .senses-diagram-wrap { max-width: 200px; }
  .senses-svg   { max-height: 46vh; }

  /* Grids compact */
  .body-parts-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
  .face-parts-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .senses-grid     { grid-template-columns: 1fr; }

  /* Cards compact */
  .sense-card { padding: 1rem 0.85rem; }
  .sense-icon { font-size: 2rem; }
  .sense-name { font-size: 1.1rem; }
  .bp-name    { font-size: 0.9rem; }

  /* Toast stays above mobile nav bars */
  .body-audio-feedback {
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    font-size: 0.86rem;
    padding: 0.45rem 1.1rem;
    max-width: calc(100vw - 2rem);
    white-space: normal;
    text-align: center;
  }
}

/* ── Medium mobile 481–767px ────────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
  .body-svgbox  { max-width: 240px; }
  .face-svgbox  { max-width: 300px; }
  .senses-grid  { grid-template-columns: repeat(2, 1fr); }
  .body-audio-feedback {
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 2rem);
    white-space: normal;
    text-align: center;
  }
}

/* ── PORTRAIT orientation (body SVG is tall) ────────────────────────────────── */
@media (orientation: portrait) {
  /* Allow SVG to use more height when screen is tall */
  #body-svg  { max-height: 58vh; }
  #face-svg  { max-height: 54vh; }
  .senses-svg { max-height: 52vh; }
}

/* ── LANDSCAPE on small phones (limited height) ─────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Use more of the viewport height */
  #body-svg  { max-height: 82vh; }
  #face-svg  { max-height: 78vh; }
  .senses-svg { max-height: 74vh; }
  /* Narrower max-width so it doesn't expand wider than looks good */
  .body-svgbox  { max-width: min(42vw, 260px); padding: 0.6rem 0.4rem; }
  .face-svgbox  { max-width: min(45vw, 320px); padding: 0.6rem 0.4rem; }
  .senses-diagram-wrap { max-width: min(40vw, 240px); }
  /* Grids use remaining horizontal space efficiently */
  .body-parts-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .senses-grid     { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ── Tablet portrait 768–1023px ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  #body-svg  { max-height: 62vh; }
  #face-svg  { max-height: 58vh; }
  .body-svgbox { max-width: 280px; }
  .face-svgbox { max-width: 340px; }
}

/* ── Face annotation indicators ─────────────────────────────────────────────── */
.face-annot-dot {
  transition: filter 0.25s ease;
}
.face-part:hover .face-annot-dot,
.face-part.face-active .face-annot-dot,
.sense-organ.sense-diagram-active .face-annot-dot {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.95)) brightness(1.35);
}

.face-annot-pill {
  transition: filter 0.25s ease;
}
.face-part:hover .face-annot-pill,
.face-part.face-active .face-annot-pill,
.sense-organ.sense-diagram-active .face-annot-pill {
  filter: brightness(1.28) drop-shadow(0 0 9px rgba(255,255,255,0.65));
}

.face-annot-line {
  opacity: 0.65;
  transition: opacity 0.25s ease;
}
.face-part:hover .face-annot-line,
.face-part.face-active .face-annot-line,
.sense-organ.sense-diagram-active .face-annot-line {
  opacity: 1;
}

/* Text inside annotation pills */
.face-annot-text {
  font-family: "Baloo 2", cursive;
  font-size: 10px;
  font-weight: 800;
  fill: white;
  stroke: none;
  paint-order: normal;
  pointer-events: none;
  user-select: none;
}

/* ── Face svgbox: wider on tablet to accommodate annotation labels ──────────── */
.face-svgbox { max-width: 420px; }

@media (max-width: 480px) {
  .face-svgbox { max-width: 100%; padding: 0.75rem 0.3rem; }
}

/* ── Sense organ groups in diagram ─────────────────────────────────────────── */
.sense-organ[data-sense] {
  cursor: pointer;
  transition: filter 0.28s ease;
}
.sense-organ.sense-diagram-active {
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.92)) brightness(1.32);
  animation: organ-pulse 0.55s ease;
}
@keyframes organ-pulse {
  0%   { filter: brightness(1); }
  40%  { filter: drop-shadow(0 0 20px rgba(255,255,255,1)) brightness(1.55); }
  100% { filter: drop-shadow(0 0 14px rgba(255,255,255,0.92)) brightness(1.32); }
}

/* ── Diversidade de Corpos ──────────────────────────────────────────────────── */
.body-diversity-svgbox {
  background: rgba(0,0,0,0.18);
  border-radius: 1.5rem;
  padding: 1.25rem 0.75rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.body-diversity-svgbox::-webkit-scrollbar { display: none; }

#diversity-svg {
  width: 100%;
  min-width: 340px;  /* figures never get unreadably small */
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Clickable figure groups */
.body-figure {
  cursor: pointer;
  transition: filter 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.body-figure:hover {
  filter: brightness(1.2) drop-shadow(0 0 12px rgba(255,255,255,0.6));
}
.body-figure:active { filter: brightness(0.85); }
.body-figure.body-figure-active {
  filter: brightness(1.35) drop-shadow(0 0 20px rgba(255,255,255,0.9));
}

/* Body type cards */
.body-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.85rem;
}
.body-type-card {
  background: var(--bt-bg, var(--surface));
  border: none;
  border-radius: 1.25rem;
  padding: 1rem 0.85rem;
  cursor: pointer;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.body-type-card:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 32px rgba(0,0,0,0.3);
}
.body-type-card:active { transform: scale(0.96); }
.body-type-card.body-active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,255,255,0.5) !important;
  transform: scale(1.04) !important;
  filter: brightness(1.15);
  z-index: 5;
  position: relative;
}
.bt-icon { font-size: 1.8rem; line-height: 1; }
.bt-name { font-family: "Baloo 2", cursive; font-size: 1rem; font-weight: 800; }
.bt-desc { font-size: 0.72rem; opacity: 0.88; line-height: 1.3; }

/* "All healthy" card spans full row */
.body-type-card-all {
  grid-column: 1 / -1;
  flex-direction: row;
  text-align: left;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg,
    #3498DB 0%, #9B59B6 25%, #E91E63 50%, #FF9F43 75%, #27AE60 100%);
}