/* =========================================================
   Bet On Team — CSS exclusivo del plugin
   Archivo: assets/bot.css
   ========================================================= */

/* --------- Reset suave y caja consistente dentro del plugin --------- */
.betonteam-list, .betonteam-list * {
    box-sizing: border-box;
  }
  
  /* --------- Contenedor principal del shortcode --------- */
  .betonteam-list{
    --bot-bg: #1e1e1e;
    --bot-fg: #f2f2f2;
    --bot-fg-subtle: #b9b9b9;
    --bot-border: #2a2a2a;
    --bot-accent: #10b981;
    --bot-muted: #232323;
  
    background: transparent;
    color: var(--bot-fg);
    font-size: 16px;
    line-height: 22px;
    width: 100%;
  }
  
  /* Cada widget (fixture) */
  .betonteam-widget{
    background: var(--bot-bg);
    border: 1px solid var(--bot-border);
    border-radius: 12px;
    padding: 16px 16px 20px;
    margin: 50px auto 0;                 /* 50px entre fixture y fixture */
    max-width: 100%;
    overflow: hidden;                     /* evita desbordes a la derecha */
  }
  
  /* Spacing superior al título del fixture: 32px desde el borde */
  .betonteam-widget .fixture-title{
    margin: 32px 0 12px;                 /* 32 superior, 12 inferior por aire */
    padding: 0;
  }
  
  /* --------- Breadcrumbs con “/” --------- */
  .bot-breadcrumbs{
    margin: 0 0 16px;
  }
  .bot-breadcrumbs ol{
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center;
    color: var(--bot-fg-subtle);
    overflow-wrap: anywhere;
  }
  .bot-breadcrumbs li{
    position: relative;
    white-space: nowrap;
  }
  .bot-breadcrumbs li + li::before{
    content: "/";
    color: var(--bot-fg-subtle);
    margin: 0 6px 0 2px;
  }
  .bot-breadcrumbs a{
    color: var(--bot-fg);
    text-decoration: none;
  }
  .bot-breadcrumbs a:hover{
    text-decoration: underline;
  }
  
  /* --------- Título del fixture (H2 18/24) --------- */
  .fixture-title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  
    font-size: 18px;       /* solicitado 18/24 */
    line-height: 24px;
    font-weight: 400;      /* nunca negrita en el fixture title */
    text-align: center;
  }
  
  /* Bloques de equipos + logos 24x24 */
  .team-block{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }
  .team-name{
    display: inline-block;
    max-width: 40vw;                       /* evita desbordes en títulos */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* TODOS los logos: 24x24 forzado */
  .betonteam-widget .team-logo,
  .betonteam-widget .odds-option-logo,
  .betonteam-list .team-logo,
  .betonteam-list .odds-option-logo {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain;
    flex: 0 0 24px;
  }
  .betonteam-widget img.team-logo,
  .betonteam-widget img.odds-option-logo {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* “vs” */
  .fixture-title .vs{
    opacity: .8;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--bot-border);
    background: #141414;
    font-size: 14px;
    line-height: 20px;
  }
  
  /* --------- Meta bajo el título: liga · hora local · book --------- */
  .fixture-meta-under{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0; /* separamos con el bloque de mercados abajo */
  }
  .fixture-meta-under .m-league,
  .fixture-meta-under .m-book,
  .fixture-meta-under time{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    line-height: 20px;
    border-radius: 999px;
    background: #171717;
    border: 1px solid var(--bot-border);
    color: var(--bot-fg-subtle);
    font-weight: 400;
    font-size: 14px;
  }
  
  /* Separación grande entre meta y el primer mercado: 32px */
  .market-sections{
    margin-top: 32px;
  }
  
  /* --------- Encabezado de cada mercado (bold 16/22) --------- */
  .market-heading{
    font-weight: 700;        /* negrita SOLO para el nombre del mercado */
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;         /* solicitado 16/22 */
    line-height: 22px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--bot-border);
    color: var(--bot-fg);
  }
  
  /* Doble espacio entre mercados (el doble del anterior) */
  .market-section{
    padding-top: 28px;       /* aire interno arriba del bloque */
    margin-top: 24px;        /* suma ~52px entre secciones visiblemente */
    border-top: none;        /* la línea la ponemos en heading */
  }
  .market-section + .market-section{
    margin-top: 18px;        /* separación clara entre mercados */
  }
  
  /* --------- Grid de cuotas (responsive y sin límites raros) --------- */
  .market-grid{
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;                 /* móvil: 1 columna */
    width: 100%;
  }
  
  /* ≥ 560px: 2 columnas */
  @media (min-width: 560px){
    .market-grid{
      grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
  }
  
  /* ≥ 900px: 3 columnas; se extiende a todo el ancho del widget */
  @media (min-width: 900px){
    .market-grid{
      grid-template-columns: repeat(3, minmax(220px, 1fr));
    }
  }
  
  /* --------- Botones de cuota (opciones 15/21, sin negrita) --------- */
  .odds-btn{
    appearance: none;
    border-radius: 10px;
    background: #242424;
    border: 1px solid var(--bot-border);
    padding: 12px;
    color: var(--bot-fg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 46px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
  
    font-size: 15px;        /* solicitado 15/21 para opciones */
    line-height: 21px;
    font-weight: 400;       /* nunca negrita en la opción/odd */
  }
  .odds-btn:hover{
    background: #2a2a2a;
    border-color: #3a3a3a;
  }
  .odds-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,185,129,.35);
  }
  
  /* Contenido del botón */
  .odds-label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  
  /* Valor de la cuota (mismo tamaño 15/21, tabular para alineación) */
  .odds-value{
    font-variant-numeric: tabular-nums;
    margin-left: 10px;
    white-space: nowrap;
  }
  
  /* Estado suspendido */
  .odds-btn.is-suspended{
    background: #1f1f1f;
    border-style: dashed;
    opacity: .65;
    cursor: not-allowed;
  }
  
  /* --------- Enlace bajo el mercado BTTS --------- */
  .market-footnote{
    margin-top: 8px;
    text-align: right;
  }
  .market-footnote__link{
    font-size: 14px;
    line-height: 21px;
    color: var(--bot-fg-subtle);
    text-decoration: underline;
  }
  .market-footnote__link:hover{
    color: var(--bot-fg);
  }
  
  /* --------- Estados vacíos / error --------- */
  .betonteam-empty, .betonteam-error{
    background: #1a1a1a;
    border: 1px dashed var(--bot-border);
    border-radius: 10px;
    padding: 12px;
    color: var(--bot-fg-subtle);
    font-size: 15px;
    line-height: 21px;
  }
  
  /* --------- Ajustes varios para evitar desalineaciones --------- */
  .betonteam-widget img{
    max-width: 100%;
    height: auto;
  }
  
  /* Evita que el contenido empuje hacia la derecha en móviles */
  .betonteam-widget, .market-grid, .fixture-title, .fixture-meta-under{
    max-width: 100%;
  }
  
  /* --------- BetSlip (si lo usas), look neutro con este tema --------- */
  #bot-betslip .bot-betslip__panel{
    background: #1f1f1f;
    border-left: 1px solid var(--bot-border);
    color: var(--bot-fg);
  }
  #bot-betslip .bot-betslip__item{
    background: #232323;
    border: 1px solid var(--bot-border);
  }
  
  /* =========================================================
     Fines
     ========================================================= */