/*
 * El Contraataque · Mobile Experience v9
 * Capa final de diseño para iOS y Android.
 * Objetivos: cero overflow horizontal, teclado estable, jerarquía visual consistente,
 * navegación cómoda con una mano y superficies limpias sin alterar la lógica existente.
 */

:root {
  --mobile-gutter: clamp(0.62rem, 2.8vw, 0.82rem);
  --mobile-card-radius: 1.05rem;
  --mobile-control-radius: 0.78rem;
  --mobile-header-base: 4.05rem;
  --mobile-composer-height: 3.65rem;
  --mobile-shadow: 0 0.4rem 1.15rem rgba(46, 35, 18, 0.055);
}

@media (max-width: 860px), (pointer: coarse) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .app-shell,
  .phone-frame,
  .mobile-content,
  .screen,
  .screen > *,
  .mobile-content > *,
  .post-comments,
  .post-comments__list,
  .football-match-discussion,
  .football-match-tabs,
  .segmented,
  .community-home-tabs,
  .football-competition-tabs,
  .football-season-switcher {
    min-width: 0;
    max-width: 100%;
  }

  .phone-frame {
    width: 100%;
    max-width: none;
    height: var(--app-height);
    min-height: var(--app-height);
    max-height: var(--app-height);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f4f2ec;
    box-shadow: none;
    backdrop-filter: none;
  }

  .mobile-header,
  body[data-theme="light"] .mobile-header {
    position: relative;
    z-index: 50;
    flex: 0 0 auto;
    width: 100%;
    min-height: calc(var(--mobile-header-base) + env(safe-area-inset-top));
    height: auto;
    padding:
      env(safe-area-inset-top)
      calc(var(--mobile-gutter) + env(safe-area-inset-right))
      0
      calc(var(--mobile-gutter) + env(safe-area-inset-left));
    border-bottom: 1px solid rgba(20, 18, 15, 0.055);
    background: rgba(255, 255, 255, 0.975);
    box-shadow: 0 0.15rem 0.7rem rgba(31, 24, 13, 0.035);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
  }

  .mobile-header-title {
    min-width: 0;
  }

  .mobile-header-title .eyebrow {
    font-size: 0.67rem;
    line-height: 1.05;
    letter-spacing: 0.12em;
  }

  .mobile-header-title h2,
  .mobile-header h2 {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(1rem, 4.4vw, 1.15rem);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    min-width: 0;
    gap: 0.42rem;
  }

  .icon-button,
  body[data-theme="light"] .icon-button,
  .whatsapp-header-button,
  .real-madrid-shortcut {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .icon-button:active,
  .bottom-nav button:active,
  .primary-action:active,
  .outline-action:active,
  .ghost-action:active {
    transform: scale(0.975);
  }

  .mobile-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    padding:
      0.68rem
      calc(var(--mobile-gutter) + env(safe-area-inset-right))
      calc(var(--mobile-nav-height) + 1rem + env(safe-area-inset-bottom))
      calc(var(--mobile-gutter) + env(safe-area-inset-left)) !important;
    scroll-padding-top: 0.6rem;
    scroll-padding-bottom: calc(var(--mobile-nav-height) + 1.25rem + env(safe-area-inset-bottom));
    scrollbar-width: none;
  }

  .mobile-content::-webkit-scrollbar,
  .football-match-tabs::-webkit-scrollbar,
  .segmented::-webkit-scrollbar,
  .community-home-tabs::-webkit-scrollbar,
  .football-competition-tabs::-webkit-scrollbar,
  .football-season-switcher::-webkit-scrollbar {
    display: none;
  }

  .screen {
    width: 100%;
  }

  /* Superficies: mismo lenguaje visual en toda la app. */
  .status-card,
  .offer-card,
  .product-card,
  .post-card,
  .event-card,
  .ticket-card,
  .travel-card,
  .detail-copy,
  .message-card,
  .football-featured,
  .football-section,
  .football-fixture,
  .football-match-discussion,
  .community-profile-strip,
  .community-channel-card,
  .community-topic-card,
  .membership-active-card,
  .membership-plan-card,
  .draw-list-card,
  .draw-card,
  .mobile-card,
  .home-section-card,
  .home-v2-block {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--mobile-card-radius);
    background-clip: padding-box;
    box-shadow: var(--mobile-shadow);
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .community-post-hero img,
  .community-news-card img,
  .draw-hero img,
  .draw-list-art img,
  .event-art img,
  .ticket-art img,
  .travel-card img,
  .detail-hero img,
  .post-comment__image img {
    display: block;
  }

  .community-post-hero,
  .community-news-card,
  .draw-hero,
  .draw-list-art,
  .event-art,
  .ticket-art,
  .detail-hero {
    overflow: hidden !important;
    isolation: isolate;
  }

  /* Controles táctiles principales. */
  .primary-action,
  .outline-action,
  .ghost-action,
  .home-match-button,
  .football-action-button,
  .offer-actions button,
  .ticket-actions button {
    min-height: 44px;
    touch-action: manipulation;
  }

  button,
  [role="button"],
  a {
    -webkit-tap-highlight-color: transparent;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid rgba(201, 138, 36, 0.45);
    outline-offset: 2px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    max-width: 100%;
  }

  /* Safari no hace auto-zoom con controles de texto >= 16 px. */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Navegación inferior: legible, estable y con safe area real. */
  .bottom-nav,
  body[data-theme="light"] .bottom-nav {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100% !important;
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    border: 0 !important;
    border-top: 1px solid rgba(20, 18, 15, 0.07) !important;
    border-radius: 1.1rem 1.1rem 0 0 !important;
    background: rgba(255, 255, 255, 0.985) !important;
    padding:
      0.28rem
      calc(0.28rem + env(safe-area-inset-right))
      max(0.2rem, env(safe-area-inset-bottom))
      calc(0.28rem + env(safe-area-inset-left)) !important;
    box-shadow: 0 -0.35rem 1.3rem rgba(31, 24, 13, 0.055) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .bottom-nav button {
    min-width: 0;
    min-height: 3.2rem;
    border-radius: 0.72rem;
    padding: 0.2rem 0.1rem;
    line-height: 1;
  }

  .bottom-nav button span,
  .bottom-nav button strong,
  .bottom-nav button small {
    max-width: 100%;
  }

  .bottom-nav button small,
  .bottom-nav button strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav button.is-selected,
  .bottom-nav button[aria-current="page"] {
    color: #a66c10;
    background: rgba(201, 138, 36, 0.075);
  }

  /* Segmentos y pestañas horizontales: siempre accesibles, nunca cortadas. */
  .football-match-tabs,
  .segmented,
  .community-home-tabs,
  .football-competition-tabs,
  .football-season-switcher {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 0.22rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .football-match-tabs button,
  .segmented button,
  .community-home-tabs button,
  .football-competition-tabs button,
  .football-season-switcher button {
    flex: 0 0 auto;
    min-height: 2.7rem;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* Partido: se elimina la sensación de tarjeta dentro de tarjeta. */
  #footballMatchDetail .football-match-discussion {
    border: 1px solid rgba(22, 20, 17, 0.08);
    background: #fff;
  }

  #footballMatchDetail .football-match-discussion__intro {
    padding: 0.82rem 0.82rem 0.52rem;
  }

  #footballMatchDetail .football-match-discussion__intro strong {
    font-size: 0.9rem;
    line-height: 1.15;
  }

  #footballMatchDetail .football-match-discussion__intro small {
    margin-top: 0.18rem;
    font-size: 0.64rem;
    line-height: 1.3;
  }

  #footballMatchDetail .football-match-discussion .post-comments {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #footballMatchDetail .football-match-discussion .post-comments__head {
    border-top: 1px solid rgba(22, 20, 17, 0.065);
  }

  /* Comentarios: densidad alta pero respirada. */
  #communityPostDetail .post-comment,
  #footballMatchDetail .post-comment {
    min-width: 0;
  }

  #communityPostDetail .instagram-comment__content,
  #footballMatchDetail .instagram-comment__content {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #communityPostDetail .post-comment__body,
  #footballMatchDetail .post-comment__body {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #communityPostDetail .post-comment__image,
  #footballMatchDetail .post-comment__image {
    max-width: 100% !important;
    overflow: hidden;
  }

  #communityPostDetail .comment-order-switch,
  #footballMatchDetail .comment-order-switch {
    max-width: min(15rem, 67vw);
  }

  /*
   * Compositor de comentarios.
   * Permanece dentro de la phone-frame: no se reparenta, no cambia el ancho del feed.
   * Con teclado se eleva exactamente el espacio indicado por visualViewport.
   */
  body.community-detail-with-dock .mobile-content,
  body.football-detail-with-comment-dock .mobile-content {
    padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-composer-height) + 0.85rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-composer-height) + 1rem + env(safe-area-inset-bottom));
  }

  .community-comment-dock,
  .football-comment-dock {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    z-index: 60 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(22, 20, 17, 0.08) !important;
    background: rgba(255, 255, 255, 0.99) !important;
    padding:
      0.4rem
      calc(0.58rem + env(safe-area-inset-right))
      0.46rem
      calc(0.58rem + env(safe-area-inset-left)) !important;
    box-shadow: 0 -0.3rem 1rem rgba(31, 24, 13, 0.045) !important;
    transform: none !important;
    contain: inline-size paint;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .community-comment-dock__form,
  .football-comment-dock .post-comment-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .community-comment-dock__row,
  .football-comment-dock__row {
    display: grid !important;
    grid-template-columns: 2.05rem minmax(0, 1fr) 2.25rem minmax(0, max-content) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 0.34rem !important;
    align-items: center !important;
  }

  .community-comment-dock__row > *,
  .football-comment-dock__row > * {
    min-width: 0;
  }

  .community-comment-dock__avatar,
  .football-comment-dock__avatar {
    width: 2.05rem !important;
    height: 2.05rem !important;
    min-width: 2.05rem !important;
  }

  .community-comment-dock textarea,
  .football-comment-dock textarea,
  .community-comment-dock__form textarea,
  .football-comment-dock .post-comment-form textarea {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 2.56rem !important;
    min-height: 2.56rem !important;
    max-height: 5.2rem !important;
    margin: 0 !important;
    resize: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 999px !important;
    padding: 0.56rem 0.78rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.34 !important;
    transform: none !important;
    zoom: 1 !important;
  }

  .community-comment-dock__image,
  .football-comment-dock .comment-image-input,
  .football-comment-dock .community-comment-dock__image {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    border-radius: 50% !important;
  }

  .community-comment-dock__submit,
  .football-comment-dock button[type="submit"] {
    display: inline-flex;
    min-width: 0 !important;
    max-width: 4.8rem;
    min-height: 2.25rem !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 0.12rem !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-comment-dock__submit:disabled,
  .football-comment-dock button[type="submit"]:disabled {
    display: none !important;
  }

  /* Estado de teclado: la app conserva tamaño; solo se mueve el compositor. */
  body.comment-keyboard-open .bottom-nav,
  body.comment-keyboard-open .mobile-menu-fab,
  body.comment-keyboard-open .mobile-quick-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
  }

  body.comment-keyboard-open .community-comment-dock,
  body.comment-keyboard-open .football-comment-dock {
    bottom: var(--keyboard-offset) !important;
  }

  body.comment-keyboard-open.community-detail-with-dock .mobile-content,
  body.comment-keyboard-open.football-detail-with-comment-dock .mobile-content {
    padding-bottom: calc(var(--keyboard-offset) + var(--mobile-composer-height) + 1rem) !important;
    scroll-padding-bottom: calc(var(--keyboard-offset) + var(--mobile-composer-height) + 1rem) !important;
  }

  /* Neutraliza los antiguos desplazamientos especiales de iOS solo al comentar. */
  .is-ios body.comment-keyboard-open .phone-frame,
  .is-ios body.comment-keyboard-open .profile-editor-modal {
    transform: none !important;
  }

  .is-ios.is-standalone body.comment-keyboard-open {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .is-ios .mobile-content {
    -webkit-overflow-scrolling: touch;
  }

  .is-android .mobile-content {
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 390px) {
  :root {
    --mobile-gutter: 0.56rem;
  }

  .community-comment-dock,
  .football-comment-dock {
    padding-right: calc(0.45rem + env(safe-area-inset-right)) !important;
    padding-left: calc(0.45rem + env(safe-area-inset-left)) !important;
  }

  .community-comment-dock__row,
  .football-comment-dock__row {
    grid-template-columns: 1.95rem minmax(0, 1fr) 2.12rem minmax(0, max-content) !important;
    gap: 0.28rem !important;
  }

  .community-comment-dock__avatar,
  .football-comment-dock__avatar {
    width: 1.95rem !important;
    height: 1.95rem !important;
    min-width: 1.95rem !important;
  }

  .community-comment-dock__image,
  .football-comment-dock .comment-image-input,
  .football-comment-dock .community-comment-dock__image {
    width: 2.12rem !important;
    min-width: 2.12rem !important;
    height: 2.12rem !important;
    min-height: 2.12rem !important;
  }

  .community-comment-dock__submit,
  .football-comment-dock button[type="submit"] {
    max-width: 4.15rem;
    font-size: 0.62rem !important;
  }

  #communityPostDetail .comment-order-switch,
  #footballMatchDetail .comment-order-switch {
    max-width: 62vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}