/* ═══════════════════════════════════════════
   Mundial 2026 – Al Aire Noticias
   Fuentes: Poppins (títulos) | Roboto (textos)
   ═══════════════════════════════════════════ */

/* ── Base del widget ── */
.m26-widget {
    --m26-widget-bg:   #f0f7ff;
    --m26-banner-bg:   #eaf2fb;
    --m26-banner-text: #1a2740;
    --m26-live-bg:     #e63946;
    --m26-live-text:   #ffffff;
    --m26-score:       #1a2740;
    --m26-carousel-bg: #f5f9ff;
    --m26-card-bg:     #ffffff;
    --m26-card-border: #dde8f5;
    --m26-card-text:   #2c3e50;
    --m26-card-date:   #3a7bd5;

    background:    var(--m26-widget-bg);
    border-radius: 16px;
    overflow:      hidden;
    font-family:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:     14px;
    box-shadow:    0 4px 24px rgba(0,0,0,0.09);
    margin:        16px 0;
    max-width:     1400px;
}

/* Todas las imágenes dentro del widget usan inline-block por defecto */
.m26-widget img {
    display:   inline-block !important;
    max-width: none         !important;
    height:    auto;
}

/* ══════════════════════════════
   BANNER
══════════════════════════════ */
.m26-widget .m26-banner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background: linear-gradient(110deg,
        #fff8f0 0%, #fce8f4 22%, #f0eeff 44%,
        #e6f4ff 66%, #edfff4 88%, #fffde8 100%);
    padding:       16px 24px;
    gap:           20px;
    min-height:    78px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.m26-widget .m26-banner-left  { flex: 0 0 auto; }
.m26-widget .m26-banner-center { flex: 1; text-align: center; }
.m26-widget .m26-banner-right {
    flex:        0 0 auto;
    display:     flex;
    align-items: center;
    gap:         14px;
}

/* Logo área */
.m26-widget .m26-wc-logo {
    display:     flex;
    align-items: center;
    gap:         9px;
}
.m26-widget .m26-wc-title {
    font-family:    'Poppins', sans-serif;
    font-size:      11px;
    font-weight:    700;
    color:          #666;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height:    1.3;
}
.m26-widget .m26-wc-title strong {
    display:     block;
    font-size:   20px;
    font-weight: 900;
    color:       #1a2740;
    line-height: 1;
    letter-spacing: 0;
}

/* Equipo en banner — código debajo de la bandera */
.m26-widget .m26-bm-code {
    font-family:    'Poppins', sans-serif;
    font-size:      20px;
    font-weight:    900;
    color:          #1a2740;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height:    1;
    display:        block;
    text-align:     center;
}

/* Centro: badges y hora */
.m26-widget .m26-live-badge {
    background:  var(--m26-live-bg);
    color:       var(--m26-live-text);
    font-family: 'Poppins', sans-serif;
    font-size:   10px;
    font-weight: 800;
    padding:     3px 12px;
    border-radius: 20px;
    letter-spacing: 0.8px;
    animation:   m26pulse 1.4s ease-in-out infinite;
    box-shadow:  0 2px 8px rgba(230,57,70,0.35);
    white-space: nowrap;
}
.m26-widget .m26-next-badge {
    background:  #3a7bd5;
    color:       #fff;
    font-family: 'Poppins', sans-serif;
    font-size:   10px;
    font-weight: 700;
    padding:     2px 12px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.m26-widget .m26-bm-time {
    font-family:    'Poppins', sans-serif;
    font-size:      24px;
    font-weight:    900;
    color:          #1a2740;
    letter-spacing: -0.5px;
    line-height:    1;
    white-space:    nowrap;
}
.m26-widget .m26-bm-goals {
    font-family: 'Poppins', sans-serif;
    font-size:   26px;
    font-weight: 900;
    color:       #1a2740;
    min-width:   20px;
    display:     inline-block;
    text-align:  center;
    line-height: 1;
}
.m26-widget .m26-no-live {
    font-family: 'Roboto', sans-serif;
    font-size:   14px;
    color:       #888;
}

/* Patrocinador + botón */
.m26-widget .m26-sponsor-link {
    display:    block;
    line-height: 0;
    border-radius: 8px;
    overflow:   hidden;
}
.m26-widget .m26-sponsor-placeholder {
    width:       300px;
    height:      80px;
    background:  repeating-linear-gradient(
        45deg, #f0f0f0, #f0f0f0 10px, #fafafa 10px, #fafafa 20px
    );
    border:      2px dashed #ccc;
    border-radius: 8px;
    display:     flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size:   12px;
    font-weight: 700;
    color:       #aaa;
    letter-spacing: 1px;
    text-align:  center;
}
.m26-widget .m26-sponsor-name {
    font-family: 'Poppins', sans-serif;
    font-size:   13px;
    font-weight: 700;
    color:       #444;
}
.m26-widget .m26-minuto-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          4px;
    border:       1.5px solid #bbb;
    color:        #333;
    background:   rgba(255,255,255,0.85);
    padding:      7px 18px;
    border-radius: 22px;
    font-family:  'Roboto', sans-serif;
    font-size:    13px;
    font-weight:  600;
    text-decoration: none;
    white-space:  nowrap;
    transition:   all 0.2s;
}
.m26-widget .m26-minuto-btn:hover {
    background:   #1a2740;
    color:        #fff;
    border-color: #1a2740;
    text-decoration: none;
}

/* ══════════════════════════════
   CARRUSEL
══════════════════════════════ */
.m26-widget .m26-carousel-wrap {
    background: var(--m26-carousel-bg);
    padding:    14px 24px 18px;
    position:   relative;
}
.m26-widget .m26-carousel-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 14px;
}
.m26-widget .m26-carousel-title {
    font-family:    'Poppins', sans-serif;
    font-size:      15px;
    font-weight:    800;
    color:          #1a2740;
    letter-spacing: 0.2px;
}

/* Scroll */
.m26-widget .m26-carousel {
    display:    flex;
    gap:        12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding:    4px 4px 10px;
    scrollbar-width: thin;
    scrollbar-color: #c8d8ea transparent;
}
.m26-widget .m26-carousel::-webkit-scrollbar { height: 4px; }
.m26-widget .m26-carousel::-webkit-scrollbar-thumb { background: #c8d8ea; border-radius: 4px; }

/* ── Tarjeta ── */
.m26-widget .m26-card {
    flex:          0 0 auto;
    background:    var(--m26-card-bg);
    border:        1.5px solid var(--m26-card-border);
    border-radius: 12px;
    padding:       11px 14px 13px;
    width:         210px;
    box-shadow:    0 2px 8px rgba(30,80,160,0.06);
    transition:    box-shadow 0.2s, transform 0.2s;
}
.m26-widget .m26-card:hover {
    box-shadow: 0 4px 18px rgba(30,80,160,0.13);
    transform:  translateY(-2px);
}

.m26-widget .m26-card-header {
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--m26-card-border);
}
.m26-widget .m26-card-group {
    display:        block;
    font-family:    'Poppins', sans-serif;
    font-size:      11px;
    font-weight:    800;
    color:          var(--m26-card-date);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  2px;
}
.m26-widget .m26-card-live {
    display:     block;
    font-family: 'Roboto', sans-serif;
    font-size:   10px;
    color:       var(--m26-live-bg);
    font-weight: 700;
    animation:   m26pulse 1.4s infinite;
    margin-bottom: 2px;
}
.m26-widget .m26-card-date {
    display:     block;
    font-family: 'Roboto', sans-serif;
    font-size:   10px;
    color:       #8aaccb;
    margin-top:  1px;
}

/* Fila de partido — bandera arriba, código abajo */
.m26-widget .m26-card-match {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
    gap:             4px;
    padding:         8px 0;
    border-bottom:   1px solid #f0f4f8;
}
.m26-widget .m26-card-match:last-child { border-bottom: none; }

.m26-widget .m26-card-code {
    font-family:    'Poppins', sans-serif;
    font-size:      13px;
    font-weight:    800;
    color:          var(--m26-card-text);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display:        block;
    text-align:     center;
    white-space:    nowrap;
}
.m26-widget .m26-card-score {
    font-family:  'Poppins', sans-serif;
    font-size:    11px;
    font-weight:  700;
    color:        #44607a;
    text-align:   center;
    min-width:    42px;
    flex-shrink:  0;
    background:   #edf2f7;
    border-radius: 5px;
    padding:      3px 5px;
    letter-spacing: -0.2px;
    white-space:  nowrap;
    display:      block;
}
.m26-widget .m26-card-score--live {
    background: rgba(230,57,70,0.12);
    color:      var(--m26-live-bg);
    font-size:  13px;
    font-weight: 900;
    animation:  m26pulse 1.4s ease-in-out infinite;
}
.m26-widget .m26-card-score--fin {
    background: #e8f0e8;
    color:      #3a7a3a;
    font-size:  13px;
    font-weight: 900;
}

/* Flechas */
.m26-widget .m26-arrow {
    position:      absolute;
    top:           50%;
    transform:     translateY(14%);
    background:    #fff;
    border:        1.5px solid var(--m26-card-border);
    border-radius: 50%;
    width:         30px;
    height:        30px;
    font-size:     20px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 2px 8px rgba(0,0,0,0.12);
    color:         #5a8fc5;
    z-index:       2;
    padding:       0;
    transition:    all 0.2s;
}
.m26-widget .m26-arrow:hover { background: var(--m26-card-date); color: #fff; border-color: var(--m26-card-date); }
.m26-widget .m26-arrow-left  { left:  4px; }
.m26-widget .m26-arrow-right { right: 4px; }

/* Cobertura completa */
.m26-widget .m26-cobertura-link {
    background:   var(--m26-carousel-bg);
    border-top:   1px solid var(--m26-card-border);
    padding:      12px 20px 16px;
    text-align:   center;
}
.m26-widget .m26-cobertura-btn {
    display:         inline-block;
    background:      linear-gradient(90deg, #3a7bd5, #2563c4);
    color:           #fff;
    padding:         10px 28px;
    border-radius:   25px;
    font-family:     'Poppins', sans-serif;
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    box-shadow:      0 3px 12px rgba(37,99,196,0.25);
    transition:      all 0.2s;
}
.m26-widget .m26-cobertura-btn:hover { opacity: 0.9; transform: translateY(-1px); text-decoration: none; color: #fff; }

/* ══ SHORTCODE COMPLETO ══ */
.m26-widget .m26c-filters { display: flex; background: #f2f5f9; border-bottom: 2px solid var(--m26-card-border); padding: 0 20px; }
.m26-widget .m26c-filter-btn { background: none; border: none; border-bottom: 3px solid transparent; padding: 13px 20px; font-family: 'Poppins',sans-serif; font-size: 14px; font-weight: 600; color: #8aaccb; cursor: pointer; margin-bottom: -2px; transition: color 0.2s,border-color 0.2s; white-space: nowrap; }
.m26-widget .m26c-filter-btn.active { color: var(--m26-card-date); border-bottom-color: var(--m26-card-date); }
.m26-widget .m26c-filter-btn:hover  { color: var(--m26-card-date); }
.m26-widget .m26c-section  { padding: 0 20px 24px; }
.m26-widget .m26c-hidden   { display: none !important; }
.m26-widget .m26c-section-title { font-family: 'Poppins',sans-serif; font-size: 15px; font-weight: 700; color: var(--m26-card-text); padding: 18px 0 12px; display: flex; align-items: center; gap: 8px; }
.m26-widget .m26c-section-title::after { content: ''; flex: 1; height: 1px; background: var(--m26-card-border); margin-left: 8px; }
.m26-widget .m26c-empty { font-family: 'Roboto',sans-serif; color: #8aaccb; font-size: 14px; padding: 30px 0; text-align: center; }

.m26-widget .m26c-day { margin-bottom: 24px; }
.m26-widget .m26c-day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 8px 12px; background: var(--m26-carousel-bg); border-radius: 8px; border-left: 3px solid var(--m26-card-date); }
.m26-widget .m26c-day-today .m26c-day-header { background: #eef6ff; border-left-color: var(--m26-live-bg); }
.m26-widget .m26c-day-label { display: flex; align-items: center; gap: 8px; font-family: 'Poppins',sans-serif; font-size: 13px; font-weight: 700; color: #1a2740; }
.m26-widget .m26c-today-badge { background: var(--m26-live-bg); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 10px; }
.m26-widget .m26c-day-full  { font-family: 'Roboto',sans-serif; font-size: 11px; color: #8aaccb; }
.m26-widget .m26c-day-count { font-family: 'Roboto',sans-serif; font-size: 11px; color: #8aaccb; font-weight: 500; }
.m26-widget .m26c-day-past  { opacity: 0.6; }

.m26-widget .m26c-matches-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 12px; }
.m26-widget .m26c-match { background: var(--m26-card-bg); border: 1.5px solid var(--m26-card-border); border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(30,80,160,0.05); transition: box-shadow 0.2s,transform 0.2s; }
.m26-widget .m26c-match:hover { box-shadow: 0 4px 16px rgba(30,80,160,0.12); transform: translateY(-2px); }
.m26-widget .m26c-match-live { border-color: var(--m26-live-bg); background: linear-gradient(135deg,#fff 85%,#fff5f5 100%); box-shadow: 0 0 0 2px rgba(230,57,70,0.12); }
.m26-widget .m26c-match-ended { opacity: 0.72; }
.m26-widget .m26c-match-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.m26-widget .m26c-match-group { font-family: 'Poppins',sans-serif; font-size: 10px; font-weight: 800; color: var(--m26-card-date); text-transform: uppercase; letter-spacing: 0.8px; background: rgba(58,123,213,0.08); padding: 2px 8px; border-radius: 10px; }
.m26-widget .m26c-match-status { font-family: 'Roboto',sans-serif; font-size: 11px; color: #8aaccb; font-weight: 500; }
.m26-widget .m26c-live-dot { color: var(--m26-live-bg); font-weight: 800; animation: m26pulse 1.4s infinite; background: rgba(230,57,70,0.08); padding: 2px 8px; border-radius: 10px; }
.m26-widget .m26c-ended { color: #a0b8c8; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.m26-widget .m26c-match-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m26-widget .m26c-team { display: flex; align-items: center; gap: 8px; flex: 1; }
.m26-widget .m26c-team-home { justify-content: flex-start; }
.m26-widget .m26c-team-away { justify-content: flex-end; flex-direction: row-reverse; }
.m26-widget .m26c-team-name { font-family: 'Roboto',sans-serif; font-size: 13px; font-weight: 700; color: #1a2740; }
.m26-widget .m26c-team-code-sm { font-family: 'Roboto',sans-serif; font-size: 10px; color: #8aaccb; font-weight: 600; }
.m26-widget .m26c-flag { width: 32px; height: 24px; border-radius: 4px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.15); flex-shrink: 0; }
.m26-widget .m26c-scorebox { display: flex; align-items: center; gap: 4px; background: var(--m26-carousel-bg); border-radius: 10px; padding: 6px 10px; border: 1px solid var(--m26-card-border); flex-shrink: 0; }
.m26-widget .m26c-score-num { font-family: 'Poppins',sans-serif; font-size: 22px; font-weight: 900; color: var(--m26-score); min-width: 16px; text-align: center; line-height: 1; }
.m26-widget .m26c-score-sep { font-size: 14px; color: #c0d0e0; }
.m26-widget .m26c-score-vs  { font-family: 'Poppins',sans-serif; font-size: 11px; font-weight: 800; color: #c0d0e0; padding: 0 4px; }
.m26-widget .m26c-match-venue { font-family: 'Roboto',sans-serif; font-size: 10px; color: #b0c4d8; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--m26-card-border); }

.m26-widget .m26c-groups-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 16px; }
.m26-widget .m26c-group-table { background: #fff; border: 1.5px solid var(--m26-card-border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(30,80,160,0.06); }
.m26-widget .m26c-group-title { background: linear-gradient(90deg,#3a7bd5,#2563c4); color: #fff; font-family: 'Poppins',sans-serif; font-size: 12px; font-weight: 800; padding: 9px 14px; text-transform: uppercase; letter-spacing: 1px; }
.m26-widget .m26c-standings { width: 100%; border-collapse: collapse; font-family: 'Roboto',sans-serif; font-size: 12px; }
.m26-widget .m26c-standings th,.m26-widget .m26c-standings td { padding: 7px 6px; text-align: center; color: var(--m26-card-text); border-bottom: 1px solid #f0f5fb; }
.m26-widget .m26c-standings tr:last-child td { border-bottom: none; }
.m26-widget .m26c-standings thead th { background: #f4f8ff; font-size: 10px; color: #8aaccb; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px; }
.m26-widget .m26c-th-team { text-align: left !important; padding-left: 12px !important; }
.m26-widget .m26c-td-team { text-align: left !important; padding-left: 10px !important; }
.m26-widget .m26c-td-team-inner { display: flex; align-items: center; gap: 6px; }
.m26-widget .m26c-flag-xs { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.m26-widget .m26c-qualify { background: rgba(58,123,213,0.04); }
.m26-widget .m26c-qualify:nth-child(1) .m26c-td-team-inner::before { content: '🥇'; font-size: 10px; }
.m26-widget .m26c-qualify:nth-child(2) .m26c-td-team-inner::before { content: '🥈'; font-size: 10px; }
.m26-widget .m26c-standings td strong { font-weight: 800; color: var(--m26-card-date); }

.m26-widget .m26c-credit { text-align: right; padding: 6px 16px 10px; font-family: 'Roboto',sans-serif; font-size: 10px; color: #b8c8d8; }
.m26-widget .m26c-credit a { color: #b8c8d8; text-decoration: none; }
.m26-widget .m26c-credit a:hover { color: var(--m26-card-date); text-decoration: underline; }

/* Animación pulso */
@keyframes m26pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
    .m26-widget .m26-banner {
        flex-direction: column;
        align-items:    center;
        padding:        14px 16px;
        gap:            12px;
        min-height:     auto;
        text-align:     center;
    }
    .m26-widget .m26-banner-left {
        width:      100%;
        display:    flex;
        justify-content: center;
    }
    .m26-widget .m26-wc-logo { justify-content: center; }
    .m26-widget .m26-banner-center { width: 100%; }
    .m26-widget .m26-banner-right {
        width:           100%;
        justify-content: center;
        flex-direction:  column;
        align-items:     center;
        gap:             10px;
    }
    .m26-widget .m26-bm-time  { font-size: 20px; }
    .m26-widget .m26-bm-goals { font-size: 22px; }
    .m26-widget .m26-bm-code  { font-size: 16px; }
    .m26-widget .m26-carousel-wrap { padding: 12px 14px 16px; }
    .m26-widget .m26-card { width: 175px; }
    .m26-widget .m26c-matches-grid { grid-template-columns: 1fr; }
    .m26-widget .m26c-groups-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .m26-widget .m26-card { width: 158px; }
    .m26-widget .m26-bm-code { font-size: 13px; }
}