/* KlipTok v30 · Tarjeta de vídeo/imagen con el tamaño NATURAL del contenido.
   Sustituye las cajas fijas anteriores (9:16 de kt-v19-layout.css, ~0.72 de index.html, 16:9 de kt-layout.js).
   --ar (ancho/alto) lo escribe assets/kt-v30-media.js al conocer el archivo real. Mientras no se conoce, se mantiene
   el formato de antes como respaldo para que no haya saltos. Para volver al formato fijo: borrar este archivo. */

/* ---------- Escritorio / tablet (≥768px): la tarjeta crece hasta ocupar el hueco sin deformar ni recortar ---------- */
@media (min-width: 768px) {
  #feed-container #dynamic-feed > .feed-card[data-kt-ar] {
    --kt-h: min(calc(100cqh - 1rem), calc(100cqw / var(--ar)));
    height: var(--kt-h) !important;
    width: calc(var(--kt-h) * var(--ar)) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
  }
}
/* Respaldo si el navegador no entiende unidades de contenedor */
@supports not (height: 1cqh) {
  @media (min-width: 768px) {
    #feed-container #dynamic-feed > .feed-card[data-kt-ar] { --kt-h: min(calc(100dvh - 7rem), calc(88vw / var(--ar))); }
  }
}
/* El medio rellena exactamente la tarjeta (que ya tiene su proporción): sin recorte ni barras */
#feed-container #dynamic-feed > .feed-card[data-kt-ar] video,
#feed-container #dynamic-feed > .feed-card[data-kt-ar] > div > img,
#feed-container #dynamic-feed > .feed-card[data-kt-ar] img.object-cover {
  object-fit: contain !important;
}
#feed-container #dynamic-feed > .feed-card[data-kt-ar] { background: #000; }
#feed-container #dynamic-feed > .feed-card[data-kt-ar][data-cat="sticker"],
#feed-container #dynamic-feed > .feed-card[data-kt-ar][data-cat="animated_sticker"],
#feed-container #dynamic-feed > .feed-card[data-kt-ar][data-cat="vector"] { background: transparent; }

/* ---------- Móvil (modo reels a pantalla completa): vertical rellena; horizontal/cuadrado se ve entero y centrado ---------- */
body.k19-reels #dynamic-feed > .feed-card[data-kt-ar] { background: #000; }
body.k19-reels #dynamic-feed > .feed-card[data-kt-ar] video,
body.k19-reels #dynamic-feed > .feed-card[data-kt-ar] img { object-fit: contain !important; }
body.k19-reels #dynamic-feed > .feed-card[data-kt-ar][data-kt-or="portrait"] video { object-fit: cover !important; }

/* =====================================================================================================
   v30 · «3D» como sección de la navegación (sin capa superpuesta)
   #v3d es hermano de #feed-container (lo mueve assets/kt-v30-3d.js). Mientras está abierto: body.k30-3d.
   ===================================================================================================== */
body.k30-3d #feed-container { display: none !important; }
body.k30-3d .kt-pg, body.k30-3d .k19-nav, body.k30-3d .k19-fab { display: none !important; }
body.k30-3d #k23-sec { display: none !important; }
#v3d.on { display: flex; }
/* sidebar: marca activa igual que las secciones */
#nav-v3d.k30-act { background: linear-gradient(90deg, rgba(79,70,229,.14), rgba(219,39,119,.14)); font-weight: 700; }
/* en escritorio el ✕ sobra: se sale con cualquier otro acceso del menú (igual que Blog/Foro). En móvil se mantiene como «volver» */
@media (min-width: 768px) { #v3d-close { display: none; } }
/* modo reels móvil: la cabecera está oculta; la sección ocupa la pantalla y deja sitio al botón ☰ */
@media (max-width: 767px) { body.k19-reels.k30-3d #v3d { position: fixed !important; inset: 0 !important; z-index: 20; } }   /* igual que el feed en modo reels */

/* =====================================================================================================
   v30 · DADO 3D: cubo ESTRICTAMENTE cuadrado, grande, con panel de control lateral (el botón «Tirar» ya no va debajo)
   ===================================================================================================== */
#v3d:not(.dash-on) #v3d-scene { padding: 0; }                 /* el dado usa todo el hueco; el panel lateral lo lleva el propio dado */
#v3d.dice-mode .v3d-nav, #v3d.dice-mode #v3d-bar { display: none !important; }
#v3d-dice { display: none; flex-direction: row; align-items: stretch; gap: 14px; width: 100%; height: 100%; min-height: 0; padding: 56px 16px 16px; position: relative; z-index: 4; box-sizing: border-box; }
#v3d-dice.on { display: flex; }

/* Arena: zona de gesto. Es un contenedor de tamaño → el cubo se calcula con cqw/cqh y es SIEMPRE cuadrado. */
.dc-arena { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 24px; }
.dc-arena.grab { cursor: grabbing; }
.dc-stage { --s: calc(min(100cqw, 100cqh) * .64); --dw: var(--s); --ds: var(--s); width: var(--s); height: var(--s); position: relative; perspective: calc(var(--s) * 4.2); flex: 0 0 auto; }
.dc-hop { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.dc-cube { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
/* seis caras idénticas s×s: cubo perfecto */
.dc-face:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.dc-face:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.dc-face:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.dc-face:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.dc-face:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.dc-face:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.dc-shadow { position: absolute; left: 50%; bottom: calc((100cqh - var(--s)) / 2 - var(--s) * .12); width: calc(var(--s) * .8); height: calc(var(--s) * .08); margin-left: calc(var(--s) * -.4); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.42), transparent 70%); pointer-events: none; }
.dc-stage .dc-shadow { position: absolute; left: 10%; right: 10%; width: auto; margin: 0; bottom: calc(var(--s) * -.1); }
.dc-hint { position: absolute; top: 4px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; color: #6b6490; pointer-events: none; }
.dc-now { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 16px); padding: 8px 14px; border-radius: 999px;
  background: rgba(30,27,58,.82); color: #fff; font-size: 13px; backdrop-filter: blur(8px); z-index: 3; cursor: default; }
.dc-now[hidden] { display: none; }
.dc-now b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-now button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; flex: 0 0 auto; }

/* Panel de control (dashboard del dado), a un lado del cubo */
.dc-side { flex: 0 0 auto; width: clamp(180px, 20vw, 250px); align-self: center; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 22px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(99,60,200,.2); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(99,60,200,.12); color: #1e1b3a; }
.dc-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b6490; }
.dc-roll { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 18px; border: 0; border-radius: 18px; cursor: pointer; color: #fff; font-weight: 800; font-size: 18px;
  background: linear-gradient(100deg, #2563eb, #7c3aed 50%, #ec4899); box-shadow: 0 10px 24px rgba(124,58,237,.38); transition: transform .15s, box-shadow .15s; }
.dc-roll:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(124,58,237,.45); } .dc-roll:active { transform: scale(.97); } .dc-roll:disabled { opacity: .55; cursor: default; transform: none; }
.dc-roll-i { font-size: 26px; line-height: 1; }
.dc-tip { margin: 0; font-size: 12px; line-height: 1.45; color: #4b4670; }
.dc-row { display: flex; gap: 8px; }
.dc-snd { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(99,60,200,.25); background: rgba(255,255,255,.85); color: #1e1b3a; font-size: 18px; cursor: pointer; }
.dc-snd[aria-pressed="false"] { opacity: .55; }
#v3d[data-kt-theme="dark"] .dc-side { background: rgba(15,23,42,.78); color: #e2e8f0; border-color: rgba(255,255,255,.14); } 
#v3d[data-kt-theme="dark"] .dc-tip, #v3d[data-kt-theme="dark"] .dc-title { color: #94a3b8; }

/* Móvil / pantallas estrechas: el panel pasa a una columna estrecha A UN LADO (nunca debajo del dado) con el botón redondo */
@media (max-width: 760px) {
  #v3d-dice { padding: 52px 8px 10px; gap: 6px; }
  .dc-side { width: 76px; padding: 10px 6px; gap: 10px; align-items: center; border-radius: 20px; }
  .dc-title, .dc-tip { display: none; }
  .dc-roll { width: 62px; height: 62px; padding: 0; border-radius: 50%; flex-direction: column; gap: 2px; font-size: 11px; }
  .dc-roll-i { font-size: 26px; }
  .dc-stage { --s: calc(min(100cqw, 100cqh) * .72); }
  #v3d > div[style*="top:12px"] { padding-left: 3.4rem; }   /* deja sitio al botón ☰ del modo móvil */
}
@media (prefers-reduced-motion: reduce) { .dc-roll { transition: none; } }