/* assets/css/bttsp.css */
/* Scope del plugin */
.bttsp {
    background: #1e1e1e;
    color: #e5e7eb;
    font-size: 15px;
    line-height: 21px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Contenedor: escalonado por breakpoint para no “reventar” en móvil */
  .bttsp .bttsp-wrap {
    width: 100%;
    max-width: 640px;     /* base móvil */
    margin: 0 auto;
    padding: 12px 10px;
  }
  
  @media (min-width: 768px) {
    .bttsp .bttsp-wrap { max-width: 680px; }
  }
  @media (min-width: 1024px) {
    .bttsp .bttsp-wrap { max-width: 980px; }
  }
  
  /* Título (si lo usas) */
  .bttsp .bttsp-title {
    margin: 6px 0 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #f3f4f6;
  }
  
  /* Lista */
  .bttsp .bttsp-list { display: block; }
  
  /* Tarjeta: límites de ancho más estrechos en móvil */
  .bttsp .bttsp-card {
    width: 100%;
    max-width: 560px;      /* más cómodo en móvil */
    margin: 12px auto;
    padding: 14px 12px;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    background: #1e1e1e;
    text-align: center;
    box-sizing: border-box;
  }
  
  @media (min-width: 768px) {
    .bttsp .bttsp-card { max-width: 680px; }
  }
  @media (min-width: 1024px) {
    .bttsp .bttsp-card { max-width: 780px; }
  }
  
  /* Separador */
  .bttsp .bttsp-sep {
    width: 100%;
    max-width: 560px;
    margin: 6px auto 12px;
    border: 0;
    border-top: 1px solid #262626;
  }
  @media (min-width: 768px) {
    .bttsp .bttsp-sep { max-width: 680px; }
  }
  @media (min-width: 1024px) {
    .bttsp .bttsp-sep { max-width: 780px; }
  }
  
  /* Badge LIVE */
  .bttsp .bttsp-badge-live {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    color: #fff;
    background: #d32f2f; /* rojo estilo ESPN */
    border-radius: 999px;
    white-space: nowrap;
  }
  
  /* Fecha/Hora */
  .bttsp .bttsp-datetime {
    margin: 4px 0 8px;
    color: #c7cdd6;
    font-size: 14px;
    line-height: 20px;
    word-break: keep-all;
  }
  
  /* Liga (si la imprimes dentro de la card) */
  .bttsp .bttsp-league {
    margin: 2px 0 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #d1d5db;
    word-wrap: break-word;
  }
  
  /* Equipos + marcador */
  .bttsp .bttsp-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 8px;
    flex-wrap: wrap; /* evita desbordes en móvil */
  }
  
  .bttsp .bttsp-team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  
  .bttsp .bttsp-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 28px;
  }
  
  .bttsp .bttsp-name {
    font-weight: 700;
    max-width: 180px;               /* limita en móvil para no abrir la tarjeta */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f3f4f6;
  }
  @media (min-width: 768px) {
    .bttsp .bttsp-name { max-width: 240px; }
  }
  
  .bttsp .bttsp-score {
    flex: 0 0 auto;
    font-weight: 700;
    min-width: 48px;
  }
  
  .bttsp .bttsp-live-score { display: inline-block; }
  .bttsp .bttsp-vs { display: inline-block; font-weight: 600; color: #d1d5db; }
  
  /* Predicción */
  .bttsp .bttsp-prob {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 6px;
  }
  
  .bttsp .bttsp-label {
    color: #c7cdd6;
    font-weight: 600;
  }
  
  .bttsp .bttsp-value {
    font-weight: 800;
    color: #f3f4f6;
  }
  
  /* Colores opcionales por mercado */
  .bttsp .bttsp-pred-yes .bttsp-value { color: #10b981; }
  .bttsp .bttsp-pred-no  .bttsp-value { color: #ef4444; }
  
  /* Resultado final del mercado */
  .bttsp .bttsp-result-wrap { margin-top: 6px; }
  
  .bttsp .bttsp-result {
    display: inline-block;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 19px;
    color: #e5e7eb;
    background: #232323;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
  }
  .bttsp .bttsp-result .ok  { color: #10b981; font-weight: 900; margin-left: 6px; }
  .bttsp .bttsp-result .bad { color: #ef4444; font-weight: 900; margin-left: 6px; }
  
  /* Acciones */
  .bttsp .bttsp-actions { margin-top: 10px; }
  
  .bttsp .bttsp-more {
    font-size: 13px;     /* pedido */
    line-height: 20px;   /* pedido */
    text-decoration: none;
    color: #9ca3af;
    border: 1px solid #2a2a2a;
    padding: 4px 8px;
    border-radius: 8px;
    display: inline-block;
    transition: background .15s ease, color .15s ease;
  }
  .bttsp .bttsp-more:hover { color: #e5e7eb; background: #262626; }
  
  /* Controles (Sort by) centrados */
  .bttsp .bttsp-controls {
    width: 100%;
    max-width: 560px;
    margin: 8px auto 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  @media (min-width: 768px) {
    .bttsp .bttsp-controls { max-width: 680px; }
  }
  @media (min-width: 1024px) {
    .bttsp .bttsp-controls { max-width: 780px; }
  }
  
  .bttsp .bttsp-controls .control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .bttsp .bttsp-controls label {
    font-size: 13px;
    color: #c7cdd6;
  }
  
  .bttsp .bttsp-controls select {
    background: #1e1e1e;
    color: #e5e7eb;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 20px;
    outline: none;
    max-width: 220px; /* evita select gigante en móvil */
  }
  .bttsp .bttsp-controls select:focus { border-color: #3b82f6; }
  
  /* Dots (si aún los usas) */
  .bttsp .bttsp-form-dots { display: inline-flex; gap: 6px; }
  .bttsp .dot { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
  .bttsp .dot.yes { background: #10b981; }
  .bttsp .dot.no  { background: #ef4444; }
  
  /* Micro-ajustes tipográficos para pantallas pequeñas */
  @media (max-width: 360px) {
    .bttsp { font-size: 14px; line-height: 20px; }
    .bttsp .bttsp-name { max-width: 140px; }
  }