*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1a6b3c;--primary-dark:#114d2b;--accent:#f5a623;
  --danger:#e74c3c;--success:#27ae60;--bg:#f0f4f0;--card:#ffffff;
  --text:#2c3e50;--muted:#7f8c8d;--border:#dce1dc;
}

/* ── BASE ── */
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);}

/* ── NAVBAR ── */
.navbar{
  background: linear-gradient(135deg, #1a6b3c 0%, #0f4023 100%);
  color:white;
  padding:.8rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  flex-wrap:wrap;gap:.5rem;
  position:sticky;top:0;z-index:100;
  overflow:hidden;
}
.navbar::before {
  content:'⬡';
  position:absolute;
  font-size:7rem;
  opacity:.06;
  right: 120px;
  top:-20px;
  pointer-events:none;
  color:white;
  line-height:1;
}
.navbar::after {
  content:'⬡';
  position:absolute;
  font-size:5rem;
  opacity:.05;
  right: 40px;
  top:5px;
  pointer-events:none;
  color:white;
  line-height:1;
}
.nav-brand{font-size:1.2rem;font-weight:700;white-space:nowrap;}
.nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;}
.nav-links a{color:white;text-decoration:none;padding:.35rem .6rem;border-radius:4px;font-size:.85rem;white-space:nowrap;}
.nav-links a:hover{background:rgba(255,255,255,.18);}
.btn-logout{background:rgba(255,255,255,.2)!important;}

/* ── CONTAINER ── */
.container{max-width:1100px;margin:1.5rem auto;padding:0 1rem;}

/* ── ALERTS ── */
.alert{padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;font-size:.92rem;}
.alert-error{background:#fde8e8;color:#c0392b;border-left:4px solid var(--danger);}
.alert-success{background:#e8f8f0;color:#1e8449;border-left:4px solid var(--success);}
.alert-info{background:#e8f0fd;color:#1a5276;border-left:4px solid #2980b9;}

/* ── LOGIN ── */
.login-card{max-width:420px;margin:3rem auto;background:var(--card);border-radius:12px;padding:2rem;box-shadow:0 4px 20px rgba(0,0,0,.1);text-align:center;}
.login-card h1{color:var(--primary);margin-bottom:.5rem;}
.login-card .subtitle{color:var(--muted);margin-bottom:2rem;}

/* ── FORMS ── */
.form-group{text-align:left;margin-bottom:1.2rem;}
.form-group label{display:block;font-weight:600;margin-bottom:.4rem;font-size:.92rem;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.7rem;border:1px solid var(--border);
  border-radius:6px;font-size:1rem;
}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);}

/* ── BUTTONS ── */
.btn-primary{background:var(--primary);color:white;border:none;padding:.8rem 2rem;border-radius:6px;font-size:1rem;cursor:pointer;width:100%;font-weight:600;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{background:var(--accent);color:white;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.88rem;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block;}
.btn-danger{background:var(--danger);color:white;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:600;font-size:.88rem;}
.btn-success{background:var(--success);color:white;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:600;font-size:.88rem;}

/* ── TABLES — scroll horizontal en móvil ── */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:8px;overflow:hidden;}
th{background:var(--primary);color:white;padding:.65rem .9rem;text-align:left;font-size:.85rem;}
td{padding:.6rem .9rem;border-bottom:1px solid var(--border);font-size:.85rem;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#f9fafb;}

/* ── CARDS ── */
.card{background:var(--card);border-radius:10px;padding:1.2rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.07);margin-bottom:1.5rem;}
.card-title{font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:1rem;}

/* ── MATCH CARDS ── */
.match-card{
  background:var(--card);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.8rem;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  display:flex;justify-content:space-between;align-items:center;
  border-left:4px solid var(--primary);transition:transform .15s;
  gap:.8rem;flex-wrap:wrap;
}
.match-card:hover{transform:translateX(2px);}
.match-card.live{border-left-color:var(--danger);}
.match-card.finished{border-left-color:var(--muted);opacity:.85;}
.match-teams{font-size:1rem;font-weight:600;}
.match-vs{color:var(--muted);margin:0 .4rem;}
.match-meta{font-size:.8rem;color:var(--muted);margin-top:.2rem;}

/* ── BADGES ── */
.badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.75rem;font-weight:700;}
.badge-open{background:#e8f8f0;color:var(--success);}
.badge-live{background:#fde8e8;color:var(--danger);}
.badge-finished{background:#f0f0f0;color:var(--muted);}
.badge-pending,.badge-pending-payment{background:#fef3e2;color:#d68910;}
.badge-active{background:#e8f0fd;color:#1a5276;}
.badge-won{background:#e8f8f0;color:var(--success);}
.badge-lost{background:#fde8e8;color:var(--danger);}

/* ── STATS GRID ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.9rem;margin-bottom:1.5rem;}
.stat-card{background:var(--card);border-radius:10px;padding:1.1rem;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.07);}
.stat-number{font-size:1.8rem;font-weight:700;color:var(--primary);}
.stat-label{color:var(--muted);font-size:.85rem;margin-top:.3rem;line-height:1.3;}

/* ── QR ── */
.qr-section{text-align:center;padding:1.5rem;background:#f9fafb;border-radius:8px;margin:1rem 0;}
.qr-section img{max-width:200px;border:4px solid var(--primary);border-radius:8px;}

/* ── PAGE HEADER ── */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;gap:.6rem;}
h1{color:var(--primary);margin-bottom:1.2rem;font-size:1.5rem;}
h2{color:var(--text);margin-bottom:1rem;font-size:1.2rem;}

/* ══════════════════════════════════════════
   TABLET (≤ 768px)
══════════════════════════════════════════ */
@media(max-width:768px){
  .container{padding:0 .8rem;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .stat-number{font-size:1.5rem;}
  /* Tablas con scroll */
  .card > table, .card > div > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ══════════════════════════════════════════
   MÓVIL (≤ 520px)
══════════════════════════════════════════ */
@media(max-width:520px){
  /* Navbar compacta */
  .navbar{padding:.6rem .8rem;}
  .nav-brand{font-size:1rem;}
  .nav-links{gap:.2rem;}
  .nav-links a{font-size:.75rem;padding:.25rem .4rem;}

  /* Contenido */
  .container{padding:0 .5rem;margin:.7rem auto;}
  h1{font-size:1.15rem;margin-bottom:.8rem;}
  h2{font-size:1rem;}

  /* Stats: 2 col ajustadas */
  .stats-row{grid-template-columns:repeat(2,1fr);gap:.5rem;}
  .stat-card{padding:.7rem .5rem;}
  .stat-number{font-size:1.2rem;}
  .stat-label{font-size:.72rem;}

  /* Cards */
  .card{padding:.9rem;}
  .card-title{font-size:.92rem;}

  /* Match cards apiladas */
  .match-card{flex-direction:column;align-items:flex-start;gap:.35rem;padding:.8rem;}
  .match-teams{font-size:.92rem;}

  /* Tablas scroll */
  table{font-size:.78rem;}
  th,td{padding:.45rem .55rem;}

  /* Page header apilado */
  .page-header{flex-direction:column;align-items:flex-start;}

  /* Botones táctiles */
  .btn-success,.btn-danger,.btn-secondary{
    padding:.6rem 1rem;font-size:.85rem;
    min-height:40px;
  }

  /* Inputs/selects full width */
  select,input[type="number"],input[type="text"]{
    width:100%!important;min-width:unset!important;
    font-size:.95rem;
  }

  /* Formularios inline → columna */
  .card form[style*="flex"]{flex-direction:column!important;align-items:stretch!important;}

  /* Login */
  .login-card{margin:1rem auto;padding:1.3rem .9rem;}
}

/* ══════════════════════════════════════════
   BOTÓN TEMA
══════════════════════════════════════════ */
.btn-soporte{
  background:#25D366;
  border:none;
  color:white;
  border-radius:20px;
  padding:.28rem .7rem;
  font-size:.82rem;
  cursor:pointer;
  font-weight:700;
  transition:background .2s;
  white-space:nowrap;
}
.btn-soporte:hover{background:#1ebe5a;}

.theme-toggle{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  color:white;
  border-radius:20px;
  padding:.28rem .6rem;
  font-size:.9rem;
  cursor:pointer;
  transition:background .2s;
  line-height:1;
}
.theme-toggle:hover{background:rgba(255,255,255,.28);}

/* ══════════════════════════════════════════
   TEMA OSCURO
══════════════════════════════════════════ */
.dark{
  --bg:#0f1117;
  --card:#1a1d27;
  --text:#e2e8f0;
  --muted:#8892a4;
  --border:#2d3348;
  --primary:#2ecc71;
  --primary-dark:#27ae60;
  --accent:#f39c12;
  --danger:#e74c3c;
  --success:#2ecc71;
}

.dark body{background:var(--bg);color:var(--text);}

.dark .navbar{background:#111827;}

.dark .card{
  background:var(--card);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

.dark .stat-card{
  background:var(--card);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

.dark table{background:var(--card);}
.dark th{background:#1e3a2f;}
.dark tr:hover td{background:#1f2333;}
.dark td{border-bottom-color:var(--border);}

.dark .match-card{
  background:var(--card);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

.dark .login-card{
  background:var(--card);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}

.dark .form-group input,
.dark .form-group select,
.dark .form-group textarea,
.dark select,
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="password"]{
  background:#252836;
  color:var(--text);
  border-color:var(--border);
}

.dark .alert-error{background:#2d1515;color:#f1948a;border-left-color:var(--danger);}
.dark .alert-success{background:#1a2e1e;color:#82e0aa;border-left-color:var(--success);}
.dark .alert-info{background:#1a2233;color:#85c1e9;border-left-color:#2980b9;}

.dark .badge-open{background:#1a2e1e;color:#2ecc71;}
.dark .badge-finished{background:#1f2333;color:var(--muted);}
.dark .badge-pending,.badge-pending-payment{background:#2d2010;}
.dark .badge-won{background:#1a2e1e;color:#2ecc71;}
.dark .badge-lost{background:#2d1515;color:#e74c3c;}
.dark .badge-active{background:#1a2233;color:#85c1e9;}

.dark details summary{background:#1f2333;}
.dark details{border-color:var(--border)!important;}

.dark h1,.dark h2{color:var(--primary);}

.dark .qr-section{background:#1f2333;}

/* Inline styles con background blanco/claro → oscurecer en dark */
.dark div[style*="background:#fffbf0"],
.dark div[style*="background:#fff5f5"],
.dark div[style*="background:#fff8f0"],
.dark div[style*="background:#fffdf5"],
.dark div[style*="background:#f9fafb"]{
  background:#1f2333!important;
}
.dark div[style*="background:var(--primary)"]{
  background:#1e3a2f!important;
}