/* =========================================================
   LATIN CHAOS — THEME GLOBAL (Modern Warcraft Skin)
   ========================================================= */

/* Fuente de títulos medieval legible */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&display=swap');

.hidden-resumen {
  display: none !important;
}

/* ===== Variables ===== */
:root{
  --bg:#0e1318;

  --surface: rgba(18,24,31,.72);
  --surface-2: rgba(18,24,31,.58);

  --text:#eaf2f7;
  --muted:#b8c3cc;

  --gold:#f6d978;
  --gold-2:#e0b84a;
  --emerald:#77ffd3;

  --border:rgba(246,217,120,.42);
  --border-soft:rgba(246,217,120,.22);

  --radius:18px;
  --shadow:0 12px 32px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(246,217,120,.05), transparent 55%),
    radial-gradient(800px 500px at 80% 85%, rgba(119,255,211,.05), transparent 60%),
    url('/img/group-background.jpg') center/cover fixed,
    #0a0e12; /* más oscuro que antes */
  color: #e5e5e5;
}

/* Halo global muy sutil para contraste */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 700px at 70% -120px, rgba(246,217,120,.06), transparent 60%);
}

/* ===== Contenedor principal ===== */
.main-wrap{max-width:1180px;margin:0 auto;padding:16px}

/* ===== Navbar ===== */
.lc-navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(6px) saturate(140%);
  background: linear-gradient(180deg, rgba(14,19,24,.92), rgba(14,19,24,.68));
  border-bottom: 1px solid var(--border-soft);
}
.lc-nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem;
}
.lc-brand{display:flex; align-items:center; gap:.6rem; font-family:'UnifrakturCook', serif}
.lc-brand img{height:40px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.lc-brand span{font-size:1.4rem; color:var(--gold); letter-spacing:.5px}
.lc-menu a{
  color:var(--muted); text-decoration:none; margin-left:1rem; font-weight:700;
  padding:.5rem .8rem; border-radius:12px;
  transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .15s ease;
}
.lc-menu a:hover{ color:var(--text); background:rgba(246,217,120,.08); transform:translateY(-1px); box-shadow:inset 0 0 0 1px var(--border-soft) }
.lc-menu a.active{ color:var(--gold); box-shadow:inset 0 0 0 1px var(--border) }

/* ===== Cards ===== */
.card{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1.2px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(135deg, rgba(246,217,120,.25), rgba(246,217,120,0) 35%,
                                       rgba(119,255,211,.18) 65%, rgba(119,255,211,0));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; border:1px solid transparent;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 8px;
  border-bottom:1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(22,28,35,.55), transparent);
}
.card-foot{ padding:12px 16px 16px; border-top:1px solid var(--border-soft); display:flex; gap:10px }
.card-foot.right{ justify-content:flex-end }
.section-title{
  margin:0; font-weight:800; letter-spacing:.2px; font-family:Montserrat, Inter, system-ui;
  filter: drop-shadow(0 0 10px rgba(246,217,120,.12));
}

/* ===== Botones ===== */
.btn{
  appearance:none; cursor:pointer; text-decoration:none;
  padding:10px 14px; border-radius:14px; font-weight:800; letter-spacing:.3px;
  background: linear-gradient(180deg, rgba(38,45,55,.95), rgba(28,34,42,.95));
  color: var(--gold); border: 1.5px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(1.07); transform:translateY(-1px) }
.btn.ghost{ background: rgba(246,217,120,.10); border-color: var(--border-soft); color: var(--gold) }

/* ===== Pills / Badges ===== */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:6px 10px; border-radius:999px;
  background: rgba(33,40,49,.75);
  border:1px solid var(--border-soft);
  color:#dfe8ef; font-weight:800; font-size:.86rem;
}
.pill-gold{ background: rgba(246,217,120,.12); border-color:var(--border); color:var(--gold) }
.pill-ghost{ opacity:.9 }
.pill-live{ background: rgba(119,255,211,.13); border-color: rgba(119,255,211,.45); color:#dffdf6 }
.pill-success{ background: rgba(119,255,211,.10); border-color: rgba(119,255,211,.35); color:var(--emerald) }

/* ===== Controles ===== */
.controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.controls label{ display:flex; align-items:center; gap:6px; white-space:nowrap }
.controls select, .controls input{ min-height:32px }
.controls input, .controls select{
  background:#1c2128; border:1px solid #3c4450; color:#e8eef5; border-radius:8px; padding:.4rem .6rem;
}

/* ===== Grid Home ===== */
.home-grid{
  display:grid; gap:18px;
  grid-template-columns: 1.2fr .8fr; /* izq: duelos | der: grupos (o viceversa) */
  align-items:start;
}
.home-grid [data-section="resumen"]{ grid-column:1/-1 }
@media (max-width:1060px){ .home-grid{ grid-template-columns:1fr } }

/* ===== Resumen ===== */
.summary-card{ padding: 12px 16px }
.summary-grid{
  display:grid; gap:12px 18px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1000px){ .summary-grid{ grid-template-columns:1fr } }
.summary-list{ list-style:none; margin:0; padding:0 }
.summary-list li{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.summary-list li:last-child{ border-bottom:0 }
.summary-list li span{ opacity:.85; flex:0 0 130px }
.summary-list li strong{ text-align:right }
.summary-actions{ display:flex; gap:8px; flex-wrap:wrap; padding-top:4px }

/* ===== Duelos (cards mini) ===== */
.duelos-grid{ display:grid; gap:12px; grid-template-columns:1fr }
.duelo-mini{
  background: rgba(15,20,26,.55);
  border: 1px solid var(--border);
  border-radius: 16px; padding:12px;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.duelo-mini:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  background: rgba(15,20,26,.65);
}
.duelo-mini-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.duelo-mini-top .left{ display:flex; gap:6px; align-items:center }
.mini-time{ color: var(--muted); font-weight:700; white-space:nowrap }
.duelo-mini-body{ margin: 8px 0 6px }
.duelo-mini-body .players{ display:flex; flex-wrap:wrap; gap:6px 8px }
.duelo-mini-footer{ display:flex; gap:8px; align-items:center }

/* ===== Grupos (scoreboard moderno) ===== */
.group-grid{ display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width: 900px){ .group-grid{ grid-template-columns:1fr } }

.scoreboard{
  background: rgba(15,20,26,.55);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.scoreboard:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.35) }
.group-header{
  padding:10px 12px;
  font: 800 14px/1 'UnifrakturCook', serif;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(32,38,45,.75), rgba(24,30,36,.75));
  border-bottom:1px solid var(--border-soft);
  text-align:center; letter-spacing:.4px;
}
.group-table-alt{ display:block }
.group-row-alt{
  display:grid; grid-template-columns: 1fr auto;
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08);
}
.group-row-alt:last-child{ border-bottom:0 }
.group-row-header{ background: linear-gradient(180deg, rgba(24,30,36,.65), rgba(18,23,29,.65)); font-weight:800; color:#f1f5f8 }

/* ===== Resultados (compat) ===== */
.results-head-grid{
  display:grid; grid-template-columns: 150px 90px 1fr 230px;
  padding:.75rem 1rem; font-weight:700; background:rgba(0,0,0,.35);
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.results-head-grid > div{ color:#f5e9c7 }
.result-row{
  display:grid; grid-template-columns: 150px 90px 1fr 230px;
  align-items:center; gap:.75rem; padding:.9rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.result-row:nth-child(even){ background:rgba(255,255,255,.03) }
.col-jugadores{ display:flex; flex-wrap:wrap; gap:.35rem .45rem }
.pill-ghost{ background: rgba(255,255,255,.06); border:1px solid var(--border); color:#e8e0c8 }
.pill-success{ border-color:#2a5e35; color:#8cff98 }
.col-ganador .pill{ font-weight:800 }

/* ===== Indicaciones box (si la usas en laterales) ===== */
.indicaciones-box{
  position: sticky; top:120px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius:16px; padding:1rem; color:#fffadc; box-shadow:var(--shadow);
}
.indicaciones-box h3{ color:var(--gold); text-align:center; margin:.2rem 0 1rem }

/* ===== Utilidades menores ===== */
.muted{ color:var(--muted) }
.see-all{ color:var(--gold); text-decoration:none; font-weight:800 }
.see-all:hover{ text-decoration:underline }

/* ===== Grupos - Layout y estilo ===== */

/* Layout: info a la izquierda, grupos a la derecha */
.groups-page{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items:start;
  margin: 12px 0 24px;
}
@media (max-width: 1100px){
  .groups-page{ grid-template-columns: 1fr; }
}

/* Panel de información (izquierda) */
.info-card{
  position: sticky; top: 88px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.info-card h3{
  margin: 0 0 10px;
  font: 800 18px/1 'Cinzel', serif;
  color: var(--gold);
  letter-spacing:.2px;
}
.info-card .info-block + .info-block{ margin-top: 12px; }
.info-card .label{ color: var(--muted); display:block; margin-bottom:4px; font-weight:700 }
.info-card .value{ font-weight:700 }

/* Contenedor de tarjetas de grupo (derecha) */
.groups-right .group-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 900px){
  .groups-right .group-grid{ grid-template-columns: 1fr; }
}

/* Tarjeta de grupo (reusa card moderna) */
.scoreboard{
  background: rgba(15,20,26,.58);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.scoreboard:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.35) }

/* Título legible con Cinzel */
.group-header{
  padding: 10px 12px;
  font: 800 16px/1 'Cinzel', serif;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(32,38,45,.78), rgba(24,30,36,.78));
  border-bottom:1px solid var(--border-soft);
  text-align:center; letter-spacing:.4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* Tabla compacta: SOLO Jugador y Puntos */
.group-table-alt{ display:block; }
.group-row-alt{
  display:grid; grid-template-columns: 1fr auto;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.group-row-alt:last-child{ border-bottom:0; }
.group-row-header{
  background: linear-gradient(180deg, rgba(24,30,36,.65), rgba(18,23,29,.65));
  font-weight:800; color:#f1f5f8;
}

/* Si en tu HTML viejo aún existe la columna de "Victorias/Derrotas",
   la escondemos de forma defensiva */
.table-wdl th:nth-child(2),
.table-wdl td:nth-child(2){ display:none !important; }

/* Título principal de la página */
.groups-title{
  margin: 8px 0 16px;
  font-weight: 800; letter-spacing:.3px;
  filter: drop-shadow(0 0 10px rgba(246,217,120,.12));
}

/* Separación suave entre secciones dentro de la derecha */
.groups-right .section-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}

.pick-card .pick-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(246,217,120,.16)}
.pick-card .pick-body{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px}
.pick-grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px}
.pick-opt{display:flex;align-items:center;gap:8px;background:rgba(33,40,49,.55);border:1px solid rgba(246,217,120,.28);border-radius:12px;padding:6px 10px}
.pick-opt input{accent-color:#f6d978}
@media (max-width:700px){
  .pick-card .pick-body{grid-template-columns:1fr}
  .pick-grid{grid-template-columns:1fr 1fr}
}


/* ===== Modal generico (popup) ===== */
/* (El JS inyecta también estilos mínimos por si esto no está) */
.lc-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:1000;display:flex;align-items:center;justify-content:center}
.lc-modal{min-width:320px;max-width:520px;background:linear-gradient(180deg,rgba(18,24,31,.94),rgba(14,19,24,.88));border:1.5px solid rgba(246,217,120,.35);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.6);padding:16px}
.lc-modal h3{margin:0 0 8px;color:#f6d978}
.lc-modal p{margin:0 0 12px}
.lc-modal .row{display:flex;gap:10px;justify-content:flex-end}
.lc-btn{background:#1e2530;border:1px solid rgba(246,217,120,.35);border-radius:10px;padding:8px 14px;color:#e8eef5;cursor:pointer}
.lc-btn.primary{background:#3a3220;border-color:#f6d978;color:#f6d978;font-weight:800}

/* ===== Panel Top Pick'em en HOME ===== */
.home-top-card{ grid-column: 1 / -1; }
.home-top-card .panel{ 
  background: linear-gradient(180deg, rgba(18,24,31,.84), rgba(14,19,24,.72));
  border: 1.5px solid rgba(246,217,120,.28);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.home-top-card .panel-head{ display:flex; align-items:center; gap:12px; padding: 12px 16px; border-bottom: 1px solid rgba(246,217,120,.18) }
.home-top-card .panel-head h2{ margin:0; }
.home-top-card .panel-body{ padding: 12px 16px; }
.home-top-table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.home-top-table th{ text-align:left; color:var(--muted); font-weight:800; }
.home-top-table td, .home-top-table th{ padding:6px 8px; }
.home-top-table tbody tr{ background: rgba(15,20,26,.58); border:1px solid rgba(246,217,120,.25); }
.home-top-table tbody tr td:first-child{ border-top-left-radius:10px; border-bottom-left-radius:10px }
.home-top-table tbody tr td:last-child{ border-top-right-radius:10px; border-bottom-right-radius:10px }

.table-scroll{ max-height: 70vh; overflow:auto }
.tops-table thead th{ position: sticky; top: 0; background: rgba(18,24,31,.95); }
.tops-table tbody tr.me-row td{ background: rgba(246,217,120,.12); box-shadow: inset 0 0 0 1px rgba(246,217,120,.35); }

.home-top-card .panel-body { padding: 12px 16px; min-height: 48px; }
#pick-toolbar{ display:flex; align-items:center; gap:12px; margin:8px 0 10px; }
#pick-toolbar select{
  height:36px; border-radius:10px; background:#1c2128; border:1px solid #3c4450;
  color:#e8eef5; padding:0 .65rem;
}