/* =============================================================
   PENCA DOLORES — responsive.css
   Mobile-first: optimizado para 320px–768px
   ============================================================= */

/* ── GLOBAL ────────────────────────────────────────────────── */
html, body   { max-width:100%; overflow-x:hidden; }
html         { -webkit-text-size-adjust:100%; }
img          { max-width:100%; height:auto; }
/* Evitar zoom al enfocar inputs en iOS */
input, select, textarea { font-size:16px !important; }

/* ── SPONSOR TICKER ────────────────────────────────────────── */
@media (max-width:600px) {
  .sponsor-ticker  { height:32px; }
  .sponsor-name    { display:none; }          /* solo logos en móvil */
  .slogo           { height:18px; }
  .slogo-round     { height:20px; }
  .slogo-gd        { height:13px; }
  .sponsor-item    { padding:0 1rem; gap:.5rem; }
  .sponsor-sep     { font-size:.6rem; }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGUESA + DRAWER
   ═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* Navbar base */
  .navbar {
    grid-template-columns: auto auto 1fr auto !important;
    padding: 0 1rem !important;
    height: 56px !important;
    gap: .5rem !important;
  }
  .navbar-brand { order:1; }
  .navbar-brand img { height:36px !important; }
  .nav-toggle   { display:flex !important; order:2; }
  .nav-links    { order:3; }
  .nav-user     { order:4; gap:.3rem !important; }

  /* Hamburguesa */
  .nav-toggle {
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.25) !important;
    border-radius: 9px !important;
    width: 40px !important; height: 40px !important;
    display: flex !important; align-items:center; justify-content:center;
    font-size: 1.35rem !important;
    color: #fff !important;
    cursor: pointer;
    transition: background .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:active { background: rgba(255,255,255,.28) !important; }

  /* Chip usuario — solo avatar en móvil */
  .user-chip-name, .logout-label { display:none !important; }
  .nav-user .user-chip {
    padding: .25rem .32rem !important;
    height: 36px !important;
    max-width:none !important;
  }
  .user-chip-avatar { width:26px !important; height:26px !important; }
  .btn-logout { padding:0 .5rem !important; height:36px !important; }

  /* DRAWER full-screen */
  .nav-links {
    position: fixed !important;
    inset: 0 !important;
    flex-direction: column !important;
    background: linear-gradient(160deg,#071929 0%,#0A3054 100%);
    z-index: 600 !important;
    overflow-y: auto;
    padding: 0 !important;
    gap: 0 !important;
    /* Animación de entrada */
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    display: flex !important;            /* siempre en DOM, animado */
    visibility: hidden;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* ── Cabecera del drawer ─────────────────────────────── */
  .drawer-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.1);
    min-height: 70px;
    flex-shrink: 0;
  }
  .drawer-user-info { display:flex; align-items:center; gap:.8rem; }
  .drawer-avatar {
    width: 46px; height: 46px; border-radius:50%;
    background: linear-gradient(135deg,#2AACE2,#0A3860);
    color: #fff; font-size: 1.3rem; font-weight:900;
    display: flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .drawer-uname { font-size:1.05rem; font-weight:800; color:#fff; }
  .drawer-role  { font-size:.75rem; color:rgba(255,255,255,.5); margin-top:2px; }
  .drawer-close {
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.8); font-size:1rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .drawer-close:active { background:rgba(255,255,255,.2); }

  /* ── Links del drawer ───────────────────────────────── */
  .nav-links a {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: .95rem 1.4rem !important;
    border-radius: 0 !important;
    border-left: 4px solid transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.82) !important;
    min-height: 54px !important;
    display: flex !important; align-items:center; gap:.85rem !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s !important;
    box-shadow: none !important;
  }
  .nav-links a i {
    font-size: 1.2rem !important;
    width: 24px; text-align:center; opacity:.8;
    flex-shrink:0;
  }
  .nav-links a:active,
  .nav-links a.active {
    background: rgba(42,172,226,.18) !important;
    border-left-color: #2AACE2 !important;
    color: #fff !important;
  }

  /* Sección label (Admin) */
  .drawer-section {
    display: block !important;
    font-size: .68rem; font-weight:800;
    text-transform: uppercase; letter-spacing:2px;
    color: rgba(255,255,255,.3);
    padding: 1.1rem 1.4rem .4rem;
  }

  /* Logout en drawer */
  .drawer-logout {
    display: flex !important;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    color: #FF8A8A !important;
    border-bottom: none !important;
    border-left: 4px solid transparent !important;
  }
  .drawer-logout:active {
    background: rgba(220,53,69,.2) !important;
    border-left-color: #E74C3C !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CONTENIDO GENERAL
   ═══════════════════════════════════════════════════════════ */
@media (max-width:600px) {
  .container, .container-sm { padding:1rem .85rem; }
  .main { padding:1rem .85rem; }
}

/* ── PAGE HEADER ────────────────────────────────────────────── */
@media (max-width:600px) {
  .page-header {
    padding: 1rem;
    border-radius: 12px;
    gap: .7rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .page-header i   { font-size:1.6rem; }
  .page-header h1  { font-size:1.2rem; }
  .page-header p   { font-size:.83rem; }
}

/* ── CARDS ──────────────────────────────────────────────────── */
@media (max-width:600px) {
  .card         { padding:.95rem; border-radius:12px; }
  .card-header  { flex-wrap:wrap; gap:.5rem; }
  .card-title   { font-size:.95rem; }
}

/* ── STATS GRID ─────────────────────────────────────────────── */
@media (max-width:600px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1rem; }
  .stat-card  { padding:.9rem .6rem; }
  .stat-num   { font-size:1.75rem; }
  .stat-label { font-size:.78rem; }
}

/* ── MATCH CARDS ────────────────────────────────────────────── */
@media (max-width:520px) {
  .match-card   { padding:.85rem .9rem; border-radius:12px; margin-bottom:.7rem; }
  .match-teams  { gap:.5rem; }
  .team-logo    { width:40px; height:40px; }
  .team-name    { font-size:.92rem; font-weight:800; }
  .score-vs     { font-size:.8rem; gap:.35rem; }
  .score-result { font-size:1.45rem; letter-spacing:2px; }
  .match-meta   { font-size:.75rem; gap:.5rem; margin-top:.5rem; }
  /* Inputs de pronóstico: fáciles de tocar */
  .score-input  {
    width:54px; height:54px;
    font-size:1.2rem; font-weight:800;
    border-radius:10px; padding:.3rem;
  }
  .badge { font-size:.73rem; padding:.22rem .65rem; }
}

/* ── BOTONES ────────────────────────────────────────────────── */
@media (max-width:540px) {
  .btn        { padding:.58rem 1rem; font-size:.9rem; min-height:44px; border-radius:9px; }
  .btn-sm     { padding:.42rem .75rem; font-size:.8rem; min-height:36px; }
  .btn-block  { padding:.72rem; font-size:1rem; font-weight:800; }
  .btn i      { font-size:1rem; }
}

/* ── FORMULARIOS ────────────────────────────────────────────── */
@media (max-width:540px) {
  .form-group   { margin-bottom:.95rem; }
  .form-label   { font-size:.9rem; margin-bottom:.4rem; font-weight:700; }
  .form-control { padding:.72rem .85rem; border-radius:10px; min-height:48px; font-size:1rem !important; }
  .form-hint    { font-size:.8rem; }
  .form-row     { grid-template-columns:1fr; }
}

/* ── TABS / FECHAS ──────────────────────────────────────────── */
@media (max-width:540px) {
  .tabs { gap:.35rem; }
  .tab  { padding:.45rem .85rem; font-size:.84rem; border-radius:8px; min-height:36px; }
}

/* ── TABLAS ─────────────────────────────────────────────────── */
.overflow-x, .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width:600px) {
  table  { font-size:.82rem; min-width:480px; }
  th, td { padding:.55rem .65rem; }
  .ranking-table { min-width:520px; }
}

/* ── GRID 2 ─────────────────────────────────────────────────── */
.grid-2 > * { min-width: 0; }          /* evita desborde en cualquier pantalla */
@media (max-width:640px) {
  .grid-2 { grid-template-columns:1fr; overflow:hidden; }
  .grid-2 > * { overflow:hidden; max-width:100%; }
}

/* ── FIXTURE / RESULTADOS ───────────────────────────────────── */
@media (max-width:600px) {
  .fixture-nav {
    padding:.75rem .85rem; gap:.35rem;
    overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .fixture-nav::-webkit-scrollbar { display:none; }
  .fecha-btn {
    padding:.4rem .85rem; font-size:.82rem;
    min-height:36px; flex-shrink:0; border-radius:20px;
  }
  .fixture-content.active { grid-template-columns:1fr; padding:.85rem; gap:.7rem; }
  .resultados-grid        { grid-template-columns:1fr; padding:.85rem; gap:.7rem; }

  .match-result  { border-radius:12px; padding:1rem; }
  .match-team    { font-size:.9rem; font-weight:800; }
  .match-score   { font-size:1.55rem; padding:.3rem .55rem; border-radius:8px; }
  .match-vs      { font-size:.95rem; padding:.25rem .45rem; }
  .match-logo    { width:38px; height:38px; }
  .match-meta    { font-size:.77rem; margin-top:.55rem; }
}

/* ── CAMPEÓN GRID ───────────────────────────────────────────── */
@media (max-width:540px) {
  .champ-grid { grid-template-columns:repeat(2,1fr); gap:.65rem; padding:.85rem; }
  .champ-card { padding:.95rem .65rem; border-radius:12px; }
  .champ-logo { width:46px; height:46px; }
  .champ-name { font-size:.85rem; }
  .champ-pct  { font-size:1.35rem; }
}

/* ── ALERTS ─────────────────────────────────────────────────── */
@media (max-width:540px) {
  .alert { font-size:.88rem; padding:.8rem .95rem; border-radius:10px; }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
@media (max-width:540px) {
  .site-footer { padding:1.2rem .85rem; font-size:.76rem; }
  .site-footer img { height:24px !important; }
}

/* ── NAV TABS en inicio.php ─────────────────────────────────── */
@media (max-width:600px) {
  .nav-tabs-inner { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-tabs-inner::-webkit-scrollbar { display:none; }
  .home-btn  { padding:0 .75rem; font-size:.8rem; }
  .home-btn span { display:none; }
  .home-btn i    { font-size:1.05rem; }
  .nav-tab   { padding:.8rem .7rem; font-size:.79rem; gap:.28rem; flex-shrink:0; }
  .nav-tab i { font-size:.88rem; }
}

/* ── NOTIFICACIONES ─────────────────────────────────────────── */
@media (max-width:540px) {
  #notif-container {
    bottom:10px !important; right:10px !important;
    left:10px !important; width:auto !important; max-width:none !important;
  }
}

/* ── ADMIN ESPECÍFICO ───────────────────────────────────────── */
@media (max-width:600px) {
  .match-card > div { flex-wrap:wrap; }
}

/* ── HERO STATS (inicio.php) ────────────────────────────────── */
@media (max-width:600px) {
  .hero-inner    { flex-direction:column; gap:1.2rem; }
  .hero-stats    { gap:1.1rem; justify-content:center; }
  .hero-stat-num { font-size:2rem; }
  .card-head-title { font-size:1.1rem; }
}

/* ── TOUCH targets mínimos 44×44 ───────────────────────────── */
@media (max-width:768px) {
  .btn, .tab, .fecha-btn { min-height:44px; }
  .btn-sm, .badge { min-height:auto; }
}

/* ── SAFE AREA iOS (notch / home bar) ──────────────────────── */
@supports (padding-bottom:env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom:calc(.85rem + env(safe-area-inset-bottom)); }
  .nav-links.open { padding-bottom:calc(1rem + env(safe-area-inset-bottom)) !important; }
}

/* ── SCROLLBAR fino ─────────────────────────────────────────── */
.overflow-x::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.fixture-nav::-webkit-scrollbar { height:3px; }
.overflow-x::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.fixture-nav::-webkit-scrollbar-thumb {
  background:rgba(42,172,226,.35); border-radius:3px;
}