/* Oniria UI: tokens + helpers (NO layout global) */

.oniria-ui{
  --oniria-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --oniria-bg: #ffffff;
  --oniria-fg: #111827;
  --oniria-muted: #6b7280;
  --oniria-border: #e5e7eb;

  --oniria-accent: #2563eb;
  --oniria-accent-2: #10b981;

  --oniria-radius-sm: 8px;
  --oniria-radius-md: 12px;

  --oniria-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --oniria-shadow-md: 0 6px 18px rgba(0,0,0,.10);

  --oniria-gap-1: 6px;
  --oniria-gap-2: 10px;
  --oniria-gap-3: 14px;

  /* Avatar defaults */
  --oniria-avatar-size: 30px;
  --oniria-avatar-pos: 50% 15%;
  --oniria-avatar-zoom: 1;
}

/* helpers (solo si los usás) */
.oniria-ui .oniria-tabular{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.oniria-ui .oniria-clamp-1{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.oniria-ui .oniria-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.oniria-ui .oniria-avatar{
  width: var(--oniria-avatar-size);
  height: var(--oniria-avatar-size);
  border-radius: 999px;
  overflow:hidden;
  display:inline-block;
}

.oniria-ui .oniria-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: var(--oniria-avatar-pos);
  transform: scale(var(--oniria-avatar-zoom));
}

/* Normalización dentro de tabs de torneo */
.oniria-module{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

.oniria-module *{
  box-sizing: border-box;
}

/* =====================================================
   Tournament Tabs – alineación consistente (Elementor)
   ===================================================== */

.oniria-tournament-tabs{
  width: 100%;
}

.oniria-tournament-tabs .e-n-tabs-heading,
.oniria-tournament-tabs .elementor-tabs-wrapper{
  display: flex !important;
  justify-content: center !important;
}

.oniria-tournament-tabs .e-n-tabs-content,
.oniria-tournament-tabs .elementor-tabs-content-wrapper{
  width: 100% !important;
}

.oniria-tournament-tabs .e-n-tab-content,
.oniria-tournament-tabs .elementor-tab-content{
  width: 100% !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.oniria-tournament-tabs .e-n-tab-content > .e-con,
.oniria-tournament-tabs .e-n-tab-content > .elementor-element,
.oniria-tournament-tabs .elementor-tab-content > .elementor-element{
  width: 100% !important;
  max-width: 100% !important;
}

.oniria-tournament-tabs .e-n-tab-content .e-con{
  justify-content: flex-start;
}

.oniria-tournament-tabs .oniria-module{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* =====================================================
   ONIRIA ATP TABS (AZUL) - SOLO widgets con clase:
   .oniria-tournament-tabs
   ===================================================== */

/* que el widget sea full width */
.oniria-tournament-tabs{
  width: 100% !important;
}

/* header (botones) */
.oniria-tournament-tabs .e-n-tabs-heading,
.oniria-tournament-tabs .elementor-tabs-wrapper{
  width: 100% !important;
  display: flex !important;
  justify-content: stretch !important;
  align-items: stretch !important;

  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 6px !important;
  gap: 6px !important;

  margin: 0 auto 14px auto !important;
  box-sizing: border-box !important;
}

/* botón tab */
.oniria-tournament-tabs .e-n-tab-title,
.oniria-tournament-tabs .elementor-tab-title{
  flex: 1 1 0 !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 10px !important;
  margin: 0 !important;

  border-radius: 12px !important;
  border: 1px solid transparent !important;

  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  line-height: 1 !important;

  color: #334155 !important;
  background: transparent !important;
}

/* hover */
.oniria-tournament-tabs .e-n-tab-title:hover,
.oniria-tournament-tabs .elementor-tab-title:hover{
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(0,0,0,.06) !important;
}

/* ACTIVO: azul ATP */
.oniria-tournament-tabs .e-n-tab-title[aria-selected="true"],
.oniria-tournament-tabs .elementor-tab-title.elementor-active{
  background: #0b2a4a !important;  /* azul oscuro */
  color: #ffffff !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 22px rgba(11,42,74,.25) !important;
}

/* apagar indicadores extra de Elementor */
.oniria-tournament-tabs .e-n-tab-title:before,
.oniria-tournament-tabs .e-n-tab-title:after,
.oniria-tournament-tabs .elementor-tab-title:before,
.oniria-tournament-tabs .elementor-tab-title:after{
  display: none !important;
}

/* MOBILE: 3 tabs visibles sin scroll horizontal */
@media (max-width: 768px){
  .oniria-tournament-tabs .e-n-tab-title,
  .oniria-tournament-tabs .elementor-tab-title{
    padding: 12px 6px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 420px){
  .oniria-tournament-tabs .e-n-tab-title,
  .oniria-tournament-tabs .elementor-tab-title{
    padding: 11px 4px !important;
    font-size: 11px !important;
  }
}

/* =====================================================
   Mobile: renombrar "Zona de Grupos" -> "Grupos"
   Orden actual: 1) Grupos 2) Playoffs 3) Resultados
   Scope: solo .oniria-tournament-tabs
   ===================================================== */
@media (max-width: 520px){
  /* el 1er tab (Grupos) */
  .oniria-tournament-tabs .e-n-tab-title:nth-child(1) .e-n-tab-title-text{
    font-size: 0 !important; /* oculta texto original */
  }
  .oniria-tournament-tabs .e-n-tab-title:nth-child(1) .e-n-tab-title-text::after{
    content: "Grupos";
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 520px){
  .oniria-tournament-tabs .e-n-tabs-heading{
    gap: 8px !important;
    padding: 6px !important;
  }
  .oniria-tournament-tabs .e-n-tab-title{
    padding: 10px 6px !important;
  }
  .oniria-tournament-tabs .e-n-tab-title-text{
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }
}

/* ==========================================
   BRACKET MOBILE: arrancar en Cuartos (izquierda)
   Scopeado a tab Playoffs para no tocar otros lugares
   ========================================== */
@media (max-width: 768px){

  /* tu wrapper del tab playoffs */
  .oniria-playoffs .sp-atp-bracket{
    justify-content: flex-start !important;   /* clave: deja de centrar */
    overflow-x: auto !important;             /* el scroll es del bracket */
    -webkit-overflow-scrolling: touch;

    max-width: none !important;              /* evita “caja” centrada */
    width: 100% !important;

    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* evitar que las columnas se “aplasten” */
  .oniria-playoffs .sp-atp-bracket .sp-atp-round{
    flex: 0 0 auto !important;
  }

  /* opcional: ocultar scrollbar en mobile */
  .oniria-playoffs .sp-atp-bracket::-webkit-scrollbar{
    display: none;
  }
}

/* ==========================================
   RESULTADOS MOBILE: nombres completos (2 líneas, sin ellipsis)
   Scopeado a .oniria-results para no tocar otros módulos
   ========================================== */
@media (max-width: 520px){

  /* 1) permitir que flex items puedan achicarse y el texto wrapee */
  .oniria-results,
  .oniria-results *{
    box-sizing: border-box;
  }

  .oniria-results .atp-row,
  .oniria-results .atp-side,
  .oniria-results .atp-player,
  .oniria-results .atp-player-meta,
  .oniria-results .atp-name-wrap{
    min-width: 0 !important;
  }

  /* 2) quitar ellipsis/nowrap y permitir 2 líneas */
  .oniria-results .atp-name,
  .oniria-results .player-name,
  .oniria-results .sp-player-name,
  .oniria-results .atp-player-name,
  .oniria-results .atp-row .name,
  .oniria-results .atp-match .name{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    line-height: 1.1 !important;
    max-height: calc(2 * 1.1em) !important;
  }

  /* 3) opcional: si el contenedor del nombre tenía un ancho muy bajo */
  .oniria-results .atp-name,
  .oniria-results .player-name,
  .oniria-results .sp-player-name,
  .oniria-results .atp-player-name{
    max-width: 100% !important;
  }
}

@media (max-width: 520px){
  .oniria-results .atp-player,
  .oniria-results .atp-side{
    align-items: flex-start !important;
  }
}

/* ==========================================
   RESULTADOS (sp-atp-results) - Mobile:
   nombre en 2 líneas sin ellipsis
   ========================================== */
@media (max-width: 520px){

  /* 1) el item flex debe permitir shrink */
  .oniria-results .sp-atp-side{
    min-width: 0 !important;
    align-items: center; /* si querés top: flex-start */
  }

  /* 2) el texto: 2 líneas, sin recorte */
  .oniria-results .sp-atp-name{
    min-width: 0 !important;
    max-width: 100% !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    line-height: 1.1 !important;
  }

  /* 3) el check no debe empujar ni cortar */
  .oniria-results .sp-atp-winner-mark{
    display: inline-block;
    margin-left: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 520px){
  .oniria-results .sp-atp-side,
  .oniria-results .sp-atp-side *{
    text-overflow: clip !important;
  }

  /* solo para el bloque del nombre, evita herencias */
  .oniria-results .sp-atp-name{
    overflow: visible !important;
  }
}

/* ==========================================
   FIX DEFINITIVO - nombres en resultados mobile
   Scope: dentro del widget tabs del torneo
   (no depende de .oniria-results)
   ========================================== */
@media (max-width: 520px){

  /* El bloque de resultados ATP */
  .oniria-tournament-tabs .sp-atp-side{
    min-width: 0 !important;
    overflow: visible !important;  /* si el padre cortaba */
  }

  /* La columna dentro del match (por si hay wrapper con overflow) */
  .oniria-tournament-tabs .sp-atp-side.left,
  .oniria-tournament-tabs .sp-atp-side.right{
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* El nombre debe poder crecer y wrapear */
  .oniria-tournament-tabs .sp-atp-side .sp-atp-name{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    display: block !important;     /* evita ellipsis heredado en inline */
    line-height: 1.1 !important;
  }

  /* Si querés SI o SI 2 líneas (sin puntos suspensivos) */
  .oniria-tournament-tabs .sp-atp-side .sp-atp-name{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  /* El check no debe interferir */
  .oniria-tournament-tabs .sp-atp-winner-mark{
    white-space: nowrap !important;
    margin-left: 6px !important;
  }
}

@media (max-width: 520px){
  .oniria-tournament-tabs .sp-atp-match,
  .oniria-tournament-tabs .sp-atp-row,
  .oniria-tournament-tabs .sp-atp-card,
  .oniria-tournament-tabs .sp-atp-item{
    overflow: visible !important;
  }
}

/* ==========================================
   RESULTADOS - Mobile (fix final):
   - ocultar tilde ✓
   - ganador con aro verde en avatar
   - centrar score pill
   - liberar ancho para nombres
   ========================================== */
@media (max-width: 520px){

  /* 1) ocultar el tilde */
  .oniria-tournament-tabs .sp-atp-winner-mark{
    display: none !important;
  }

  /* 2) marcar ganador con aro verde en avatar (lado izquierdo y derecho) */
  .oniria-tournament-tabs .sp-atp-side:not(.is-loser) .sp-atp-avatar-wrap img{
    outline: 2px solid #22c55e;   /* verde */
    outline-offset: 2px;
    border-radius: 999px;
  }

  /* 3) achicar avatars para liberar ancho */
  .oniria-tournament-tabs .sp-atp-avatar-wrap{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
  .oniria-tournament-tabs .sp-atp-avatar-wrap img.sp-atp-avatar{
    width: 34px !important;
    height: 34px !important;
    object-fit: cover;
    border-radius: 999px;
  }

  /* 4) score pill centrada */
  .oniria-tournament-tabs .sp-atp-scoreblock{
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .oniria-tournament-tabs .sp-atp-score{
    width: 58px !important;
    text-align: center !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    line-height: 1.05 !important;
    padding: 6px 6px !important;
  }

  /* 5) flex: permitir wrap real en lados */
  .oniria-tournament-tabs .sp-atp-side{
    min-width: 0 !important;
    flex: 1 1 0 !important;
    gap: 8px !important;
  }

  /* 6) nombre: forzar 2 líneas SIN ellipsis */
  .oniria-tournament-tabs .sp-atp-name{
    min-width: 0 !important;
    max-width: 100% !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    line-height: 1.12 !important;
  }

  /* 7) por si el plugin mete ellipsis con más especificidad */
  .oniria-tournament-tabs .sp-atp-side.left .sp-atp-name,
  .oniria-tournament-tabs .sp-atp-side.right .sp-atp-name{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ==========================================
   RESULTADOS - Mobile: fix aro ganador + centrar pill
   ========================================== */
@media (max-width: 520px){

  /* A) Ganador: aro verde en el WRAPPER del avatar */
  .oniria-tournament-tabs .sp-atp-side:not(.is-loser) .sp-atp-avatar-wrap{
    border: 2px solid #22c55e !important;
    border-radius: 999px !important;
    padding: 2px !important;              /* separa aro de la imagen */
    background: #fff !important;
    box-sizing: border-box !important;
  }

  /* asegurar que la imagen quede redonda y no tape el aro */
  .oniria-tournament-tabs .sp-atp-avatar-wrap img.sp-atp-avatar{
    border-radius: 999px !important;
    display: block !important;
  }

  /* B) Centrar la pill (scoreblock) dentro del row */
  .oniria-tournament-tabs .sp-atp-body{
    align-items: center !important;        /* centra vertical todo */
  }

  .oniria-tournament-tabs .sp-atp-scoreblock{
    align-self: center !important;         /* por si el padre no centra */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;

    margin: 0 !important;                 /* evita offsets raros */
  }

  .oniria-tournament-tabs .sp-atp-score{
    margin: 0 auto !important;            /* centra interno */
  }
}

/* ==========================================
   RESULTADOS - Mobile: fix aro ganador + centrar pill
   ========================================== */
@media (max-width: 520px){

  /* A) Ganador: aro verde en el WRAPPER del avatar */
  .oniria-tournament-tabs .sp-atp-side:not(.is-loser) .sp-atp-avatar-wrap{
    border: 2px solid #22c55e !important;
    border-radius: 999px !important;
    padding: 2px !important;              /* separa aro de la imagen */
    background: #fff !important;
    box-sizing: border-box !important;
  }

  /* asegurar que la imagen quede redonda y no tape el aro */
  .oniria-tournament-tabs .sp-atp-avatar-wrap img.sp-atp-avatar{
    border-radius: 999px !important;
    display: block !important;
  }

  /* B) Centrar la pill (scoreblock) dentro del row */
  .oniria-tournament-tabs .sp-atp-body{
    align-items: center !important;        /* centra vertical todo */
  }

  .oniria-tournament-tabs .sp-atp-scoreblock{
    align-self: center !important;         /* por si el padre no centra */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;

    margin: 0 !important;                 /* evita offsets raros */
  }

  .oniria-tournament-tabs .sp-atp-score{
    margin: 0 auto !important;            /* centra interno */
  }
}

/* ==========================================
   RESULTADOS - Mobile: score SIEMPRE centrado
   (convierte el row a GRID: 1fr | 58px | 1fr)
   ========================================== */
@media (max-width: 520px){

  .oniria-tournament-tabs .sp-atp-body{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  /* asignación explícita */
  .oniria-tournament-tabs .sp-atp-body .sp-atp-side.left{ grid-column: 1 !important; }
  .oniria-tournament-tabs .sp-atp-body .sp-atp-scoreblock{ grid-column: 2 !important; }
  .oniria-tournament-tabs .sp-atp-body .sp-atp-side.right{ grid-column: 3 !important; }

  /* limpiar offsets raros */
  .oniria-tournament-tabs .sp-atp-scoreblock{
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
  }

  .oniria-tournament-tabs .sp-atp-score{
    margin: 0 !important;
  }

  /* los lados deben poder encoger */
  .oniria-tournament-tabs .sp-atp-side{
    min-width: 0 !important;
  }
}

/* ==========================================
   BRACKET: scores alineados (2 dígitos OK)
   ========================================== */
.sp-atp-bracket .sp-atp-score,
.sp-atp-bracket .sp-atp-scores,
.sp-atp-bracket .sp-atp-scoreblock{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.sp-atp-bracket .sp-atp-score,
.sp-atp-bracket .sp-atp-scores{
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* cada set ocupa el mismo ancho (10/8 no “empuja”) */
.sp-atp-bracket .sp-atp-set,
.sp-atp-bracket .sp-atp-score span{
  display: inline-block;
  width: 2.2ch;          /* ajustar si querés más/menos */
  text-align: right;
}

/* ==========================================
   BRACKET: avatares consistentes (sin desfasajes)
   ========================================== */
.sp-atp-bracket .sp-atp-avatar-wrap{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 32px;
}

.sp-atp-bracket img.sp-atp-avatar{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;  /* mismo criterio que venís usando */
  transform: scale(1);
  display: block;
}