/* IronQx — Cuerpo 3D del día (js/47-muscle-3d.js). Mismo diseño que IronBase;
   el color sale del acento del tema del plan (--rn-acc) o del dorado. */
.m3d { --accent: var(--rn-acc, var(--gold)); --text: var(--txt); --muted: var(--txt2); }
/* contain: la tira horizontal no debe ensanchar la tarjeta del día */
.m3d { margin: 16px 0 4px; min-width: 0; contain: inline-size; }
.m3d-stage { position: relative; height: 360px; border-radius: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line, rgba(255,255,255,.08)));
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(120,130,160,.16), transparent 70%), radial-gradient(ellipse 60% 18% at 50% 92%, rgba(0,0,0,.55), transparent 80%), linear-gradient(180deg, #121318, #08090c); }
.m3d-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); }
.m3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; opacity: 0; transition: opacity .6s ease; }
.m3d.is-ready .m3d-canvas { opacity: 1; }
.m3d-canvas:active { cursor: grabbing; }
.m3d-views { position: absolute; top: 12px; left: 12px; z-index: 1; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.m3d-views button { border: 0; background: none; color: rgba(255,255,255,.55); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.m3d-views button.is-on { background: rgba(255,255,255,.12); color: #fff; }
.m3d-hint { position: absolute; top: 20px; right: 14px; z-index: 1; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); pointer-events: none; transition: opacity .4s; }
.m3d-stage.is-touched .m3d-hint { opacity: 0; }
.m3d.is-flat .m3d-stage { display: none; }
.m3d-vol { margin-top: 16px; }
.m3d-vol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.m3d-vol-head b { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.m3d-vol-head span { font-size: 11px; color: var(--muted, rgba(255,255,255,.55)); }
/* Sin sangrado al borde: el gesto de atrás del sistema reclama los primeros 34 px */
.m3d-chips { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.m3d-chips::-webkit-scrollbar { display: none; }
.m3d-chip { flex: 0 0 auto; width: 128px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 12px 13px; border-radius: 16px; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); transition: border-color .2s, background .2s, opacity .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.m3d-chip:active { transform: scale(.97); }
.m3d-chip small { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, rgba(255,255,255,.5)); }
.m3d-chip.is-main small { color: var(--accent); }
.m3d-chip b { max-width: 100%; font-size: 13px; font-weight: 700; color: var(--text, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3d-chip-sets { font-size: 11px; color: var(--muted, rgba(255,255,255,.55)); }
.m3d-chip-sets em { font-style: normal; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--text, #fff); margin-right: 4px; }
.m3d-chip i { display: block; align-self: stretch; height: 4px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--m3d-load), rgba(255,255,255,.08) var(--m3d-load)); }
.m3d-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.02)); }
.m3d-chips.has-focus .m3d-chip:not([aria-pressed="true"]) { opacity: .5; }
.m3d-vol-note { margin: 8px 2px 0; font-size: 10px; color: var(--muted, rgba(255,255,255,.45)); }
@media (max-width: 380px) { .m3d-stage { height: 320px; } }
.m3d-credit { position: absolute; bottom: 10px; right: 10px; z-index: 1; display: flex; align-items: center; flex-direction: row-reverse; gap: 6px; }
.m3d-credit button { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.3); color: rgba(255,255,255,.4); font: italic 600 10px/1 Georgia, serif; cursor: pointer; }
.m3d-credit a { font-size: 9px; color: rgba(255,255,255,.55); text-decoration: none; white-space: nowrap; opacity: 0; transform: translateX(4px); pointer-events: none; transition: opacity .25s, transform .25s; }
.m3d-credit.is-open a { opacity: 1; transform: none; pointer-events: auto; }
/* Volver a la vista completa: aparece al acercar o inclinar */
.m3d-reset { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.45); color: rgba(255,255,255,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .2s, transform .2s; }
.m3d-reset svg { width: 16px; height: 16px; }
.m3d-stage.is-zoomed .m3d-reset { opacity: 1; transform: none; pointer-events: auto; }
.m3d-stage.is-zoomed .m3d-hint { opacity: 0; }
.m3d-chip-parts { max-width: 100%; font-size: 10.5px; color: var(--muted, rgba(255,255,255,.5)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -1px; }
/* El texto de ayuda va abajo a la izquierda: arriba chocaba con Frente / Espalda en pantallas angostas */
.m3d-hint { top: auto; right: auto; bottom: 14px; left: 14px; max-width: calc(100% - 64px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }