/************************
CSS 2003-2026 EXCLUSIVO PARA BENGALESES.COM
Todos los Derechos Reservados 
Realiza: Ángel Matos para Bengaleses.com*/
/************************/

    :root {
      --mlb-blue: #003087; 
      --mlb-red: #e60203; 
      --mlb-orange: #f98f3e;
      --accent: #057aff; 
      --border-color: #e1e4e8; 
      --score-bg: #f1f5f9; 
      --delay-gray: #94a3b8;
      --gray-pulse: #6a7585;
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background: #f0f2f5;
    }

    .bgls-main-container { 
      width: 100%; 
      max-width: 100%; 
      margin: 0 auto; 
      font-family: 'Arial Black', sans-serif; 
      background: #f0f2f5; 
      border-radius: 6px; 
      overflow: hidden; 
    }

    .header-banner { 
      background: #000926; 
      color: white; 
      text-align: center; 
      padding: 10px 0; 
      display: flex; 
      flex-direction: column; 
      gap: 8px; 
      margin-top: -5px; 
    }

    .banner-title { 
      font-size: 14px; 
      font-weight: 900; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
    }

    /* CONTENEDOR DE NAVEGACIÓN */
    .date-button-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .nav-btn {
      background: rgba(255, 255, 255, 0.15);
      color: white;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      transition: background 0.2s ease;
      user-select: none;
    }

    .nav-btn:hover {
      background: var(--accent);
    }

    /* PASTILLA DE FECHA FIABLE */
    .date-pill { 
      background: rgba(255, 255, 255, 0.20); 
      padding: 6px 14px; 
      border-radius: 20px; 
      font-size: 11px; 
      font-weight: 900; 
      text-transform: uppercase; 
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: background 0.2s ease;
      user-select: none;
      color: #ffffff;
      border: none;
      outline: none;
    }

    .date-pill:hover {
      background: rgba(255, 255, 255, 0.35);
    }

    .calendar-icon-inline {
      width: 13px;
      height: 13px;
      fill: currentColor;
      opacity: 0.9;
      flex-shrink: 0;
    }

    /* INPUT OCULTO SIN BLOQUEO DE CAPAS */
    .hidden-date-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .pizarra-grid-container { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); 
      gap: 6px; 
      padding: 0px; 
    }

    .game-card { 
      background: #ffffff !important; 
      width: 100%; 
      border-radius: 8px; 
      overflow: hidden; 
      display: flex; 
      flex-direction: column; 
      border-bottom: 1px solid #e1e4e8; 
    }

    .game-card:hover { 
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    }
	
	
	/* --- CONFIGURACIÓN DE RADIUS Y SEPARACIÓN DINÁMICA --- */

/* 1. ESTADO BASE: PANTALLAS GRANDES (> 1024px) */
/* Sin radius y el contenedor pegado (padding 0) */
.pizarra-grid-container { padding: 0px !important; }
.game-card:first-child, 
.game-card:first-child .game-header { 
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important; 
}
.game-card:last-child { 
    border-bottom-left-radius: 0px !important; 
    border-bottom-right-radius: 0px !important; 
}

/* 2. ESTADO INTERMEDIO: Entre 557px y 1023px (CON RADIUS Y DESPEGUE) */
@media screen and (min-width: 557px) and (max-width: 1023px) {
    /* Despegamos TODO el bloque de tarjetas 6px arriba y abajo */
    .pizarra-grid-container { padding: 6px 0px !important; }

    .game-card:first-child, 
    .game-card:first-child .game-header { 
        border-top-left-radius: 8px !important; 
        border-top-right-radius: 8px !important; 
    }
    .game-card:last-child { 
        border-bottom-left-radius: 8px !important; 
        border-bottom-right-radius: 8px !important; 
    }
}

/* 3. ESTADO FINAL: MÓVIL (< 556px) */
/* Volvemos a quitar el radius y pegamos el contenedor (padding 0) */
@media screen and (max-width: 556px) {
    .pizarra-grid-container { padding: 0px !important; }

    .game-card:first-child, 
    .game-card:first-child .game-header { 
        border-top-left-radius: 0px !important; 
        border-top-right-radius: 0px !important; 
    }
    .game-card:last-child { 
        border-bottom-left-radius: 0px !important; 
        border-bottom-right-radius: 0px !important; 
    }
}

    .game-header { padding: 7px 12px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px 8px 0 0; }
    .header-live { background: var(--mlb-orange) !important; color: white !important; }
    .header-final { background: var(--mlb-red) !important; color: white !important; }
    .header-preview { background: var(--accent) !important; color: #fff !important; }
    .header-delay { background: var(--delay-gray) !important; color: #fff !important; }
    
    .header-left-tag { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; text-transform: uppercase; }
    .header-right-capsule { border: 1.5px solid #ffffff; padding: 0px 10px; border-radius: 20px; font-size: 10px; font-weight: 900; text-transform: uppercase; }

    .inning-pill { border: 1.5px solid var(--mlb-orange); color: #767676; padding: 2px 14px; border-radius: 20px; font-size: 10px; font-weight: 900; text-transform: uppercase; display: inline-block; margin: 2px auto 0 auto; }

    .center-col { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; }
    .out-dots-container { display: flex; gap: 3px; justify-content: center; width: 38px; margin-top: -5px; }
    .out-dot { width: 7px; height: 7px; border-radius: 50%; background: #e2e8f0; border: 1px solid #697484; }
    .out-dot.active { background: var(--mlb-red) !important; border: 1px solid #7f0000; }
    .count-text { font-size: 11px; font-weight: 400; color: #697484; margin-top: 2px; letter-spacing: 2px; }

    .matchup-title { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px 4px 10px; font-size: 16px; font-weight: 900; color: #767676; }
    .vs-box { background: #eee; color: #777; font-size: 9px; padding: 2px 5px; border-radius: 3px; border: 1px solid #ddd; }
    .venue-info { font-size: 11px; color: #888; margin-bottom: 2px; text-align: center; font-weight: 900; }
    .game-type-label { font-size: 14px; font-weight: 800; text-align: center; margin-bottom: 8px; }

    .scoreboard { padding: 4px 10px 8px 10px; display: grid; grid-template-columns: 1fr 45px 60px 45px 1fr; align-items: center; text-align: center; }
    .team-box img { width: 30px; height: 30px; object-fit: contain; }
    .team-name { font-size: 12px; font-weight: 900; color: var(--mlb-blue); margin-top: 3px; display: block;}
    .team-record { font-size: 10px; font-weight: 400; letter-spacing: 1px; color: #a2adbd; display: block; margin-top: 1px; }
    
    .score-num { background: var(--score-bg); color: var(--mlb-red); font-size: 24px; font-weight: 900; min-width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .score-num.preview-mode { color: var(--delay-gray) !important; }

    .che-container { margin: 0 8px 8px 8px; padding: 6px 8px; background: #f8f9fa; border-radius: 4px; border: 1px solid #eee; }
    .che-table { width: 100%; border-collapse: collapse; }
    .che-table th { color: #b3b3b3; font-weight: 900; font-size: 10px; text-align: center; padding-bottom: 4px; }
    .che-table td { font-weight: 900; font-size: 14px; text-align: center; padding: 2px 0; }
    .che-team-name { text-align: left !important; width: 55%; color: #6b6b6b !important; padding-left: 5px !important; }
    .che-val { width: 15%; color: #6b6b6b; }
    .che-table tbody .che-val { font-size: 16px; font-weight: 600; color: #334155; }

    .che-runs { color: var(--mlb-red) !important; font-weight: 900; }
    .losing-team td:not(.che-team-name), 
    .losing-team .che-val, 
    .losing-team .che-runs { color: #8394ae !important; }

    .pitcher-section { background: #fff; padding: 0px 12px 10px 12px; flex-grow: 1; }
    .matchup-row { display: flex; align-items: flex-start; margin-bottom: 10px; }
    .role-badge { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; margin-right: 12px; color: white; margin-top: 2px; flex-shrink: 0; }
    .badge-p { background-color: var(--mlb-blue); } .badge-b { background-color: #555; }
    .player-info-box { display: flex; flex-direction: column; }
    .role-label { font-size: 10px; font-weight: 900; text-transform: uppercase; margin-bottom: -1px; }
    .player-name { font-size: 12px; color: #333; font-weight: 700; font-family: Arial, sans-serif; line-height: 1.2; }

    .media-actions { display: flex; justify-content: center; gap: 6px; padding: 3px 6px 8px 6px; background: #fff; border-top: 1px solid #f8f9fa; }
    .btn-action { flex: 1; max-width: 85px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px; font-size: 9.5px; font-weight: 900; text-decoration: none; background: #ffffff; border: 1.5px solid #d1d5db; border-radius: 6px; transition: all 0.2s ease; cursor: pointer; color: #000 !important; white-space: nowrap; }
    .btn-action:hover { transform: translateY(-2px); border-color: var(--gray-pulse); color: #000; background: #f8fafc; }
    .btn-action svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; }

    @keyframes btn-pulse-gray {
      0% { box-shadow: 0 0 0 0 rgba(106, 116, 126, 0.6); border-color: var(--gray-pulse); }
      70% { box-shadow: 0 0 0 8px rgba(106, 116, 126, 0); border-color: var(--gray-pulse); }
      100% { box-shadow: 0 0 0 0 rgba(106, 116, 126, 0); border-color: var(--gray-pulse); }
    }
    .btn-pulse { animation: btn-pulse-gray 3s infinite !important; border-color: var(--gray-pulse) !important; }
    
    .footer-banner-full { display: block; padding: 8px; background: var(--mlb-blue); color: white; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
    .footer-banner-full:hover { background: #057aff !important; }

    .pulse-icon { width: 8px; height: 8px; background: white; border-radius: 50%; animation: pulse-wave 1.5s infinite; display: inline-block; margin-right: 5px; }
    @keyframes pulse-wave { 0% { transform: scale(0.8); opacity: 1; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } }
	
		/* Oculto por defecto en pantallas grandes y medianas */
    .baner {
        display: none !important;
}
/* 1. ESTADO INICIAL: Se ve en pantallas grandes (Escritorio) */
.banner{
    display: block;
}


	@media screen and (max-width: 500px) {
        .baner {
        display: block !important; }
	    .header-banner { 
        padding: 8px 0px 0px 0px; }
}

/* 2. RANGO INTERMEDIO: Se oculta entre 501px y 1024px (Tablets/Laptops pequeñas) */
    @media screen and (min-width: 556px) and (max-width: 1024px) {
        .banner {
        display: none !important;
    }
}

/* 3. RANGO MÓVIL: Reaparece en 500px o menos y ajustamos el padding */
    @media screen and (max-width: 555px) {
    .banner {
        display: block !important;
    }
}

    @media screen and (max-width: 1024px) { .che-container, .pitcher-section, .venue-info, .game-type-label { display: none !important; } .bgls-main-container { max-width: 96%; } }
    @media screen and (max-width: 555px) { .che-container, .pitcher-section { 
        display: flex !important; 
        flex-direction: column; 
        gap: 4px; 
    }, .venue-info, .game-type-label { display: block !important; } }