/* assets/css/responsive.css
   Ajustes globales para que los paneles de empresa y participantes funcionen bien en móvil. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  min-width: 0;
}

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

button,
a,
input,
select,
textarea {
  max-width: 100%;
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  body {
    width: 100%;
  }

  #toast {
    left: 1rem !important;
    right: 1rem !important;
    top: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
    border-radius: 1rem !important;
  }

  header .max-w-7xl,
  header .max-w-5xl {
    width: 100% !important;
    gap: .75rem !important;
    padding: .75rem 1rem !important;
  }

  header .max-w-7xl > div:first-child,
  header .max-w-5xl > div:first-child,
  header a:first-child {
    min-width: 0 !important;
  }

  header [id*="Logo"],
  header #brandLogo,
  header .company-logo,
  header .brand-logo {
    width: 3rem !important;
    height: 3rem !important;
    flex: 0 0 3rem !important;
    border-radius: .9rem !important;
    font-size: 1rem !important;
  }

  header p,
  header span {
    overflow-wrap: anywhere;
    line-height: 1.15 !important;
  }

  header .text-xl,
  header .text-2xl {
    font-size: 1.05rem !important;
  }

  header .tracking-widest {
    letter-spacing: .16em !important;
  }

  header button,
  header a.text-sm,
  header a.font-black {
    flex: 0 0 auto !important;
    padding: .55rem .9rem !important;
    font-size: .85rem !important;
    white-space: nowrap !important;
  }

  main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1rem 2.5rem !important;
  }

  main > section:first-child,
  main > div:first-child {
    margin-top: 0 !important;
  }

  h1,
  #eventTitle {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: anywhere;
  }

  h2,
  main .text-3xl {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  h3,
  main .text-2xl {
    font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
    line-height: 1.12 !important;
  }

  #eventSubtitle,
  main .text-lg,
  main .md\:text-xl {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .participant-tabs,
  .admin-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    gap: .45rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    margin-top: 1.4rem !important;
    padding-bottom: .4rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .participant-tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar,
  #phaseTabs::-webkit-scrollbar,
  #groupTabs::-webkit-scrollbar {
    display: none;
  }

  .participant-tabs .tab,
  .admin-tabs .main-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: .8rem .95rem !important;
    font-size: .9rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #phaseTabs,
  #groupTabs {
    flex-wrap: nowrap !important;
    gap: .6rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: .25rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #phaseTabs > button,
  #groupTabs > button {
    flex: 0 0 auto !important;
    padding: .65rem .9rem !important;
    font-size: .85rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .panel > div,
  .content-panel > div,
  .card,
  #configForm,
  #eventSettingsForm,
  #onboardingForm,
  aside.rounded-\[2rem\],
  section.rounded-\[2rem\],
  div.rounded-\[2rem\] {
    padding: 1rem !important;
    border-radius: 1.35rem !important;
  }

  .shadow-soft,
  .shadow-card {
    box-shadow: 0 10px 30px rgba(42,41,46,.08) !important;
  }

  .grid,
  .flex {
    max-width: 100%;
  }

  .lg\:grid-cols-\[1fr_340px\],
  .lg\:grid-cols-\[1fr_420px\],
  .lg\:grid-cols-\[1fr_280px\],
  .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
    grid-template-columns: 1fr !important;
  }

  main .items-center.justify-between:not(header .items-center),
  main .md\:items-center.md\:justify-between,
  main .md\:items-end.md\:justify-between {
    align-items: stretch !important;
  }

  main .items-center.justify-between:not(nav):not(header .items-center) {
    gap: .85rem !important;
  }

  main a.event-bg,
  main button.event-bg,
  main button.event-border,
  main a.event-border,
  main .secondary-button,
  main .join-button {
    text-align: center;
    justify-content: center;
  }

  #matchesGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #matchesGrid article {
    padding: 1rem !important;
    border-radius: 1.25rem !important;
    overflow: hidden !important;
  }

  #matchesGrid article > .mb-4,
  #matchesGrid article > .mt-4 {
    gap: .75rem !important;
  }

  #matchesGrid .grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: .45rem !important;
  }

  #matchesGrid .grid-cols-\[1fr_auto_1fr\] > div {
    min-width: 0 !important;
  }

  #matchesGrid .grid-cols-\[1fr_auto_1fr\] p {
    overflow-wrap: anywhere;
  }

  #matchesGrid input[type="number"] {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    height: 2.75rem !important;
    font-size: 1.15rem !important;
  }

  #matchesGrid .h-16.w-24,
  #matchesGrid img.h-16.w-24 {
    width: 4.25rem !important;
    height: 2.85rem !important;
  }

  #matchesGrid .text-6xl {
    font-size: 2.65rem !important;
  }

  #matchesGrid article .mt-4.flex {
    align-items: stretch !important;
  }

  #matchesGrid article .mt-4.flex button,
  #matchesGrid article .mt-4.flex a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  #podiumCards,
  #podiumPredictions .grid,
  #awardPredictions .grid,
  #rewardsList,
  #participantRewardsList {
    grid-template-columns: 1fr !important;
  }

  #podiumCards article,
  #podiumPredictions article,
  #awardPredictions article,
  #rewardsList article,
  #participantRewardsList article {
    border-radius: 1.25rem !important;
  }

  .overflow-x-auto table {
    min-width: 680px !important;
  }

  #rankingList table,
  #participantsTable {
    font-size: .9rem !important;
  }

  #compareModal {
    padding: 1rem !important;
  }

  #compareModal > div {
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    border-radius: 1.25rem !important;
  }

  #inviteQr,
  #inviteQr svg,
  #inviteQr > div {
    width: min(16rem, calc(100vw - 5rem)) !important;
    height: min(16rem, calc(100vw - 5rem)) !important;
  }

  #inviteQr {
    padding: .75rem !important;
  }

  input,
  select,
  textarea,
  .input {
    font-size: 16px !important;
  }
}

@media (max-width: 374px) {
  #matchesGrid .grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr !important;
  }

  #matchesGrid .grid-cols-\[1fr_auto_1fr\] > div:nth-child(2) {
    justify-content: center !important;
  }

  #matchesGrid article .mt-4.flex {
    flex-direction: column !important;
  }
}

/* Ajustes de legibilidad para fechas y modal de comparación */
.match-date {
  font-size: 0.72rem;
  line-height: 1.05;
  white-space: nowrap;
}

.compare-modal-card {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

@media (max-width: 480px) {
  .match-date {
    font-size: 0.68rem;
  }

  .compare-modal-card {
    border-radius: 1.5rem;
    padding: 1.25rem;
  }
}

/* Logos adaptativos: permite logos horizontales, cuadrados o verticales sin texto adicional. */
.adaptive-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.adaptive-logo-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.adaptive-logo.has-logo-image {
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
}

.adaptive-logo.logo-square {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 1rem !important;
}

.adaptive-logo.logo-horizontal {
  width: clamp(10rem, 22vw, 14rem) !important;
  height: 4.25rem !important;
  border-radius: 0 !important;
}

.adaptive-logo.logo-vertical {
  width: 5rem !important;
  height: 6.25rem !important;
  border-radius: 0 !important;
}

.participant-brand-wrap {
  max-width: min(62vw, 16rem) !important;
}

.participant-header-logo.logo-horizontal {
  width: clamp(10.5rem, 28vw, 15rem) !important;
  height: 4.5rem !important;
}

.participant-header-logo.logo-vertical {
  width: 5rem !important;
  height: 6.25rem !important;
}

#cfgLogoPreview.logo-horizontal,
#previewLogo.logo-horizontal {
  width: 13rem !important;
  height: 5rem !important;
}

#cfgLogoPreview.logo-vertical,
#previewLogo.logo-vertical {
  width: 5.5rem !important;
  height: 7rem !important;
}

@media (max-width: 767px) {
  header #brandLogo.adaptive-logo.logo-square,
  header #headerLogo.adaptive-logo.logo-square,
  header #companyLogo.adaptive-logo.logo-square,
  header .adaptive-logo.logo-square {
    width: 3.4rem !important;
    height: 3.4rem !important;
    flex-basis: 3.4rem !important;
  }

  header #brandLogo.adaptive-logo.logo-horizontal,
  header #headerLogo.adaptive-logo.logo-horizontal,
  header #companyLogo.adaptive-logo.logo-horizontal,
  header .adaptive-logo.logo-horizontal {
    width: min(11.5rem, 56vw) !important;
    height: 3.6rem !important;
    flex-basis: min(11.5rem, 56vw) !important;
    border-radius: 0 !important;
  }

  header #brandLogo.adaptive-logo.logo-vertical,
  header #headerLogo.adaptive-logo.logo-vertical,
  header #companyLogo.adaptive-logo.logo-vertical,
  header .adaptive-logo.logo-vertical {
    width: 3.8rem !important;
    height: 4.9rem !important;
    flex-basis: 3.8rem !important;
    border-radius: 0 !important;
  }

  .participant-brand-wrap {
    max-width: calc(100vw - 8.5rem) !important;
  }
}