/* Por defecto: ocultamos el select en desktop */
#stats-tabs-wrap .tabs-mobile-wrap { display:none; }

.main_tab_title {
  color:#fff;
  text-align: center;
  width: 100%;
}

/* Móvil: ocultamos tabs y mostramos select */
@media (max-width: 768px) {
  #stats-tabs-wrap .tabs-mobile-wrap { display:block; }
  #statsTabsNav { display:none; }
  .button_cel{ width: 90%; margin: 0px auto; }
  .tab-content {
        height: auto;
        padding-top: 20px !important;
    }
}

/* Un toquecito al select para mantener tu línea visual */
#statsTabsSelect {
  /* tu CSS ya define .form-control; aquí reforzamos el brand */
  border-radius: 8px;
  border: 0;
  font-weight: 700;
  text-transform: uppercase;
  background: #41b5eb;     /* color de tu barra de tabs */
  color: #fff;
  padding: 8px 12px;
}

/* iOS/Android: asegúrate que el texto del option sea visible */
#statsTabsSelect option {
  color: #000; /* el option se renderiza nativo: negro para legibilidad */
}

/* Ocultamos flecha nativa y aplicamos estilo propio */
#statsTabsSelect {
  appearance: none;           /* estándar */
  -webkit-appearance: none;   /* Safari/iOS */
  -moz-appearance: none;      /* Firefox */
  background: #41b5eb;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 42px 10px 14px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(65,181,235,.25);
  cursor: pointer;
  width: 100%;
}

/* Flecha custom (SVG inline como background) */
#statsTabsSelect {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

/* Quitar flecha en IE/Edge antiguo */
#statsTabsSelect::-ms-expand { display: none; }

/* Focus visible */
#statsTabsSelect:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,181,235,.45);
}

/* Las opciones admiten poco estilo y varía por navegador */
#statsTabsSelect option {
  color: #000;          /* legibilidad en menús nativos */
  background: #fff;     /* algunos navegadores lo respetan */
}

/* Solo en móvil usamos el custom; en desktop ni aparece */
@media (max-width: 768px) {
  /* Ocultamos el select nativo pero sigue en el DOM */
  #statsTabsSelect.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

/* Contenedor del custom select */
.custom-select {
  position: relative;
  width: 100%;
  font-weight: 700;
  text-transform: uppercase;
}

/* Botón (trigger) */
.custom-select__button {
  width: 100%;
  background: #41b5eb;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 44px 10px 14px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(65,181,235,.25);
}

.custom-select__button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,181,235,.45);
}

/* Flecha */
.custom-select__button::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-size: 18px;
  background-repeat: no-repeat;
  opacity: .9;
}

/* Lista desplegable */
.custom-select__list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(28,60,84,.18);
  padding: 6px;
  z-index: 50;
  display: none; /* hidden por defecto */
  max-height: 50vh;
  overflow: auto;
}

/* visible */
.custom-select.is-open .custom-select__list { display: block; }

/* Opción */
.custom-select__option {
  display: flex; align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  color: #174b63;
}

.custom-select__option:hover,
.custom-select__option[aria-selected="true"] {
  background: rgba(65,181,235,.12);
}

.custom-select__option.is-active { /* foco por teclado */
  outline: 2px solid rgba(65,181,235,.45);
}

/* Scrollbar sutil (opc.) */
.custom-select__list::-webkit-scrollbar { width: 10px; }
.custom-select__list::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(65,181,235,.4); }


/* Desktop: mostrar tabs, ocultar select */
.cat-select-wrap { display:none; }

/* Móvil */
@media (max-width: 768px) {
  .cat-select-wrap { display:block; margin-bottom:10px; }
  .cat-tabs-nav { display:none; }
  .fixmargincont { padding-left:0px; padding-right:0px; }
}

/* Estilo del select (nativo vitaminado) */
.cat-tabs-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #41b5eb;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 42px 10px 14px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(65,181,235,.25);
  width: 100%;
  cursor: pointer;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.cat-tabs-select:focus { outline:none; box-shadow:0 0 0 3px rgba(65,181,235,.45); }
.cat-tabs-select option { color:#000; background:#fff; }


/* Utilidad global para ocultar elementos de forma accesible */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

div#stats-tabs-wrap {
    background: #000;
    padding: 20px;
    padding-bottom: 0px;
}

.cat-tabs-wrap {
    margin: 0px auto;
    width: 100%;
}

@media (max-width: 768px){ 
  .cat-tabs-wrap {
     width: 81%;
    }
}


.about .tab-content h4 {
    margin-top: 0;
    color: #fff;
    text-align: center;
    width: 100%;
}

h4.border:after {
    margin-top: 10px;
    display: block;
    width: 100%;
    height: 4px;
    background: #333333;
    content: "";
}



/* =========================
   Calendario (tabla)
   ========================= */
.table-calendario{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;           /* evita saltos de ancho */
}
.table-calendario th,
.table-calendario td{
  padding:8px 10px;
  vertical-align:middle;
}
.table-calendario .t-jornada{ width:64px; white-space:nowrap; }
.table-calendario .t-partido{ word-break:break-word; }

/* Fila con look de “card” */
.calendartable{
  color:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.table-calendario .calendartable td{ border-bottom:0; }

/* Colores por tipo (RGBA para no afectar texto) */
.calendartable.t-jor1   { background-color:rgba(0,31,255,.35); }
.calendartable.t-jor2   { background-color:rgba(152,143,  2,.35); }
.calendartable.t-jor3   { background-color:rgba(16, 148, 16,.35); }
.calendartable.t-semi   { background-color:rgba(142, 92, 25,.35); }
.calendartable.t-final  { background-color:rgba(165, 16, 16,.35); }
.calendartable.t-amistoso{background-color:rgba(124,122,122,.60); }
.calendartable.t-default{ background-color:rgba(30, 30, 30,.30); }

/* Badge jornada/etapa */
.badge{
  display:inline-block;
  font-weight:700;
  font-size:.85rem;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
}

/* Contenido interno de la celda Partido */
.partido-wrap{ display:flex; flex-direction:column; gap:4px; }
.teams{ font-size:1rem; line-height:1.25; }
.vs{ opacity:.9; letter-spacing:.5px; }
.score{ font-weight:800; padding:0 8px; }

/* Meta chips (fecha/hora/campo) */
.t-partido .meta{
  display:none;                 /* visible en móviles */
  margin-top:2px;
  font-size:.90rem;
  line-height:1.2;
}
.t-partido .meta .chip{
  display:inline-block;
  padding:2px 8px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.25);
  border-radius:999px;
  margin-right:6px;
  margin-top:2px;
}

/* =========================
   Responsive
   ========================= */

/* Móvil retrato */
@media (max-width:600px){
  .table-calendario th, .table-calendario td{ padding:8px 10px; }
  .table-calendario .t-jornada{ width:64px; }

  /* Oculta columnas y muestra chips */
  .table-calendario thead .t-fecha,
  .table-calendario thead .t-hora,
  .table-calendario thead .t-campo,
  .table-calendario td.t-fecha,
  .table-calendario td.t-hora,
  .table-calendario td.t-campo{ display:none; }

  .t-partido .meta{ display:block; }
}

/* Móvil paisaje (pantalla ancha pero baja) */
@media (max-width:896px) and (orientation:landscape){
  .table-calendario thead .t-fecha,
  .table-calendario thead .t-hora,
  .table-calendario thead .t-campo,
  .table-calendario td.t-fecha,
  .table-calendario td.t-hora,
  .table-calendario td.t-campo{ display:none; }

  .t-partido .meta{ display:block; }
  .teams{ font-size:.95rem; }
}

/* Desktop (si quisieras forzar ocultar meta) */
@media (min-width:901px){
  .t-partido .meta{ display:none; }
}

/* Desktop/tablet: todo visible */
.table-calendario th.t-fecha,
.table-calendario th.t-hora,
.table-calendario th.t-campo,
.table-calendario td.t-fecha,
.table-calendario td.t-hora,
.table-calendario td.t-campo {
  display: table-cell;
}


.hideincel{display: block;}

/* === Base para esta tabla específica === */
table.calendario th.t-fecha,
table.calendario th.t-hora,
table.calendario th.t-campo,
table.calendario td.t-fecha,
table.calendario td.t-hora,
table.calendario td.t-campo {
  display: table-cell; /* estado normal en desktop */
}


/* Móvil retrato (ocultar columnas) */
@media (max-width: 600px) {
  table.calendario th.t-fecha,
  table.calendario th.t-hora,
  table.calendario th.t-campo,
  table.calendario td.t-fecha,
  table.calendario td.t-hora,
  table.calendario td.t-campo {
    display: none !important;
  }
  table.calendario td.t-partido .meta { display: block !important; }
    td.t-partido {
    text-align: center;
    font-size: 13px;
  }

  .hideincel{display: none;}

}

/* Móvil landscape (también ocultar) */
@media (max-width: 896px) and (orientation: landscape) {
  table.calendario th.t-fecha,
  table.calendario th.t-hora,
  table.calendario th.t-campo,
  table.calendario td.t-fecha,
  table.calendario td.t-hora,
  table.calendario td.t-campo {
    display: none !important;
  }
  table.calendario td.t-partido .meta { display: block !important; }
    td.t-partido {
    text-align: center;
    font-size: 13px;
  }

    .hideincel{display: none;}
}


 td.t-jornada {
    text-align: center;
}

 td.t-partido {
    text-align: center;
    font-size: 13px;
  }

  .t-partido .meta .chip {
      display: inline-block;
      padding: 2px 8px;
      border: 1px solid rgba(255, 255, 255, .3);
      background: rgba(0, 0, 0, .25);
      border-radius: 999px;
      margin-right: 6px;
      margin-top: 0px;
      font-size: 11px;
      margin-bottom: 8px;
  }

  table.calendario th {
    font-weight: 200;
    padding: 2px 6px;
}


/* Celulares en horizontal (paisaje) */
@media (orientation: landscape) and (max-height: 480px) and (hover: none) and (pointer: coarse) {
  /* tus ajustes aquí */
  :root { --sp: 8px; }            /* ejemplo: compactar espaciados */
  .regis {
    height: 566px;
  }

  #stats-tabs-wrap .tabs-mobile-wrap {
    display: block;
  }

  #statsTabsNav {
    display: none;
  }

  .cat-select-wrap {
    display: block;
    margin-bottom: 10px;
  }

  .cat-tabs-nav {
    display: none;
  }

  .tab-content {
    height: auto;
    padding-top: 20px !important;
  }

  #statsTabsSelect{
    width: auto;
  }

  .button_cel {
    display: flex;
    justify-content: center;
  }

  .tabs-mobile-wrap {
      width: 73%;
  }

  td.t-partido {
    text-align: center;
    font-size: 13px;
  }

  .t-partido .meta .chip {
      display: inline-block;
      padding: 2px 8px;
      border: 1px solid rgba(255, 255, 255, .3);
      background: rgba(0, 0, 0, .25);
      border-radius: 999px;
      margin-right: 6px;
      margin-top: 0px;
      font-size: 11px;
      margin-bottom: 8px;
  }

  .hideincel{display: none;}

}
/* Celulares en horizontal (paisaje) */


/*Fixes goleadores*/
/* =========================
   Goleadores destacados (top 6)
   ========================= */
.goleadorbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  color: #111;
  font-family: 'Roboto', sans-serif;
}

/* Foto del jugador */
.goleadoresfnt img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  border: 3px solid #eee;
}

/* Contenedor central */
.goleadoresname {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #111;
}

/* Logo + nombre del equipo */
.goleadorestlogo {
  text-align: center;
  font-size: 0.95rem;
  color: #333;
}
.goleadorestlogo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 4px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Número de goles */
.goleadoresgoles {
  font-size: 4rem;
  font-weight: 700;
  color: #374e88;
  text-align: right;
  min-width: 60px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
  .goleadorbox {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px;
  }

  .goleadoresfnt img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
  }

  .goleadoresname {
    font-size: 1.2rem;
    margin-top: 6px;
  }

  .goleadorestlogo img {
    width: 50px;
    height: 50px;
  }

  .goleadoresgoles {
    font-size: 3rem;
    text-align: center;
    margin-top: 8px;
  }
}

/* =========================
   GOLEADORES – Top 6 (fichas)
   ========================= */
.goleadorbox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;               /* mantiene look claro como en tus capturas */
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  color:#111;
}

/* Foto */
.goleadoresfnt img{
  width:96px; height:96px;
  object-fit:cover;
  border-radius:10px;
  border:3px solid #eee;
  display:block;
}

/* Nombre centrado */
.goleadoresname{
  flex:1;
  text-align:center;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.25;
}

/* Equipo (logo + texto) centrado */
.goleadorestlogo{
  text-align:center;
  font-size:.95rem;
  color:#333;
}
.goleadorestlogo img{
  width:44px; height:44px;
  object-fit:contain;
  display:block;
  margin:0 auto 4px;
}

/* Goles grande a la derecha */
.goleadoresgoles{
  font-size:4rem;
  font-weight:800;
  color:#374e88;                 /* ya muy similar a tu 6/3 gigantes */
  line-height:1;
  min-width:70px;
  text-align:right;
}

/* Fila “card” ocupa todo el ancho de la tabla */
tr.goleador-card > td{
  padding:12px 10px !important;
  background:transparent;
  border:none;
}

/* =========================
   Resto de la lista (texto)
   ========================= */
.g-list-row{
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.g-list-name{ font-weight:600; }
.g-list-team{ opacity:.85; }
.g-list-goals{ font-weight:800; text-align:right; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px){
  .goleadorbox{ flex-direction:column; text-align:center; }
  .goleadoresfnt img{
    width:116px; height:116px; border-radius:50%;
  }
  .goleadoresname{ font-size:1.25rem; }
  .goleadorestlogo img{ width:56px; height:56px; }
  .goleadoresgoles{
    font-size:3.25rem; text-align:center; margin-top:6px;
  }
  /* lista compacta en 2 columnas: nombre/equipo arriba, goles abajo centrado */
  .g-list-row{ text-align:center; }
  .g-list-goals{ text-align:center; margin-top:6px; font-size:1.4rem; }
}

/* Pequeñas mejoras de la tabla contenedora */
table.calendario{
  width:100%;
  border-collapse:separate;
  border-spacing:0 14px; /* espacio entre filas para que las cards “respiren” */
}
table.calendario th, table.calendario td{
  background:transparent; border:none; /* dejamos que las cards manejen el fondo */
}