/* RESPONSIVE MOBILE — inicio
 * Shorts listado: player fullscreen + acciones al pulgar (≤768).
 * Desktop (≥1025 / reglas base en index-casa-panel.css) intacto.
 */
@import url("../tokens/kasalia-rwd-tokens.css");

/* RESPONSIVE MOBILE — inicio: tokens Shorts locales (garantizan cascade si el @import viene cacheado) */
:root {
  --rwd-short-player-bg: #000000;
  --rwd-short-player-fg: #ffffff;
  --rwd-short-player-accent: #174f2b;
  --rwd-short-player-accent-alt: #c9a024;
  --rwd-short-player-scrim: rgba(15, 23, 42, 0.55);
  --rwd-short-player-btn-bg: rgba(15, 23, 42, 0.72);
  --rwd-short-player-btn-bg-active: rgba(23, 79, 43, 0.92);
  --rwd-short-player-z: 1000001;
  --rwd-short-swipe-threshold: 56px;
  --rwd-short-safe-top: env(safe-area-inset-top, 0px);
  --rwd-short-safe-right: env(safe-area-inset-right, 0px);
  --rwd-short-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rwd-short-safe-left: env(safe-area-inset-left, 0px);
}
/* RESPONSIVE MOBILE — fin */
/* Host de media (aditivo): necesario tras introducir .kasalia-short-modal__stage.
 * No altera medidas del player Desktop (siguen en index-casa-panel.css). */
.kasalia-short-modal__stage {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--rwd-short-player-bg);
}

.kasalia-short-modal__stage iframe,
.kasalia-short-modal__stage video,
.kasalia-short-modal__stage img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: var(--rwd-short-player-bg);
}

/* Capas solo-mobile ocultas fuera de MQ */
.kasalia-short-modal__gesture,
.kasalia-short-modal__actions,
.kasalia-short-modal__meta,
.rwd-short-preload {
  display: none;
}

@media (max-width: 768px) {
  /* --- Player fullscreen (punto 1) --- */
  .kasalia-short-modal-root {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    z-index: var(--rwd-short-player-z, 1000001);
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
  }

  .kasalia-short-modal-root.is-open {
    background: var(--rwd-short-player-bg);
  }

  /* Bottom nav mobile (z 999999) no debe tapar el player */
  body.kasalia-short-modal-open.rwd-short-player-mobile > .filters-right[data-mobile-detached="1"] {
    visibility: hidden;
    pointer-events: none;
  }

  .kasalia-short-modal__backdrop {
    background: var(--rwd-short-player-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .kasalia-short-modal__dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
  }

  .kasalia-short-modal-root.is-open .kasalia-short-modal__dialog {
    transform: none;
  }

  .kasalia-short-modal__player {
    position: relative;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    background: var(--rwd-short-player-bg);
    overflow: hidden;
  }

  .kasalia-short-modal__stage {
    background: var(--rwd-short-player-bg);
  }

  .kasalia-short-modal__stage iframe,
  .kasalia-short-modal__stage video,
  .kasalia-short-modal__stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Nativo: cover 9:16. YouTube iframe: fill del stage (letterbox interno = límite conocido). */
  .kasalia-short-modal__stage video,
  .kasalia-short-modal__stage img {
    object-fit: cover;
  }

  .kasalia-short-modal__stage iframe {
    object-fit: unset;
  }

  .kasalia-short-modal__gesture {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    touch-action: pan-y;
    background: transparent;
  }

  .kasalia-short-modal__close {
    top: calc(var(--rwd-short-safe-top) + var(--rwd-space-xs));
    right: calc(var(--rwd-short-safe-right) + var(--rwd-space-xs));
    width: var(--rwd-touch-target-min);
    height: var(--rwd-touch-target-min);
    min-width: var(--rwd-touch-target-min);
    min-height: var(--rwd-touch-target-min);
    z-index: 5;
    background: var(--rwd-short-player-btn-bg);
    color: var(--rwd-short-player-fg);
    box-shadow: none;
  }

  .kasalia-short-modal__close:hover {
    background: var(--rwd-short-player-btn-bg);
    transform: none;
  }

  /* --- Acciones al pulgar (punto 3) --- */
  .kasalia-short-modal__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rwd-space-xs);
    position: absolute;
    right: calc(var(--rwd-short-safe-right) + var(--rwd-space-xs));
    bottom: calc(var(--rwd-short-safe-bottom) + var(--rwd-space-lg));
    z-index: 5;
  }

  .kasalia-short-modal__action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rwd-space-xxs);
    width: var(--rwd-touch-target-min);
    min-width: var(--rwd-touch-target-min);
    min-height: var(--rwd-touch-target-min);
    padding: var(--rwd-space-xxs) 0;
    border: 0;
    border-radius: 999px;
    background: var(--rwd-short-player-btn-bg);
    color: var(--rwd-short-player-fg);
    cursor: pointer;
    font-size: var(--rwd-font-xs);
    font-weight: 700;
    line-height: var(--rwd-line-height-base);
  }

  .kasalia-short-modal__action svg {
    width: var(--rwd-space-sm);
    height: var(--rwd-space-sm);
    display: block;
  }

  .kasalia-short-modal__action.is-active,
  .kasalia-short-modal__action[aria-pressed="true"] {
    background: var(--rwd-short-player-btn-bg-active);
  }

  .kasalia-short-modal__action-label {
    font-size: var(--rwd-font-xs);
    letter-spacing: 0.01em;
  }

  .kasalia-short-modal__meta {
    display: flex;
    flex-direction: column;
    gap: var(--rwd-space-xxs);
    position: absolute;
    left: calc(var(--rwd-short-safe-left) + var(--rwd-space-sm));
    right: calc(var(--rwd-touch-target-min) + var(--rwd-space-lg) + var(--rwd-short-safe-right));
    bottom: calc(var(--rwd-short-safe-bottom) + var(--rwd-space-md));
    z-index: 4;
    color: var(--rwd-short-player-fg);
    pointer-events: none;
    text-shadow: 0 1px 3px var(--rwd-short-player-scrim);
  }

  .kasalia-short-modal__meta-loc {
    font-size: var(--rwd-font-sm);
    font-weight: 700;
    line-height: var(--rwd-line-height-base);
  }

  .kasalia-short-modal__meta-price {
    font-size: var(--rwd-font-lg);
    font-weight: 800;
    color: var(--rwd-short-player-accent-alt);
  }

  .rwd-short-preload {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
  }
}
/* RESPONSIVE MOBILE — fin */