:root{
  --bg:#0f172a;
  --card:#111827;
  --stroke:#1f2937;
  --muted:#9aa6bd;
  --accent:#22c55e;
  --danger:#f87171;
  --ink:#e5e7eb;
  --ink2:#cbd5e1;
  --seg:#0b1220;
  --seg-on:#222a38;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

.wrap{
  max-width:1080px;
  margin:24px auto;
  padding:0 16px;
}

.card{
  background:var(--card);
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  border:1px solid var(--stroke);
  overflow:hidden;
}

/* HEADER */

header.site-header{
  padding:12px 16px;
  border-bottom:1px solid var(--stroke);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  width:250px;
  height:auto;
  object-fit:contain;
}

.brand-title{
  margin:0;
  font-size:20px;
  line-height:1;
}

.brand-sub{
  font-size:13px;
  color:var(--ink2);
  margin-top:4px;
}

.version{
  color:var(--muted);
  font-size:13px;
}

/* LAYOUT */

.content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:18px;
}

@media(max-width:980px){
  .content{grid-template-columns:1fr}
}

label{
  display:block;
  margin-top:8px;
  font-size:14px;
}

select,input{
  padding:10px;
  width:100%;
  margin-top:4px;
  border-radius:10px;
  border:1px solid #334155;
  background:#0b1220;
  color:var(--ink);
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.inline-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.inline-check input{
  width:18px;
  height:18px;
}

/* BOTONES PRINCIPALES */

.btns{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button{
  padding:10px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:700;
}

button.primary{
  background:var(--accent);
  color:#051b0f;
}

button.ghost{
  background:transparent;
  border:1px solid #475569;
  color:var(--ink);
}

/* SEGMENTOS */

.seg-field{
  margin-top:10px;
}

.seg-title{
  font-size:14px;
  margin-bottom:6px;
  color:var(--ink2);
}

.seg-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.seg-btn{
  background:var(--seg);
  color:var(--ink);
  border:1px solid #334155;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:600;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.seg-btn:hover{
  border-color:#475569;
}

.seg-btn.active{
  background:var(--seg-on);
  border-color:#475569;
}

.seg-group.positions{
  margin-left:0;
}

.seg-group.positions .seg-btn{
  padding:6px 8px;
  font-size:12px;
  line-height:1.2;
}

/* RESULTADO */

.result{
  margin-top:10px;
  padding:14px;
  background:#0b1220;
  border:1px dashed #334155;
  border-radius:10px;
  font-size:14px;
  line-height:1.55;
}

.good{
  color:#4ade80;
  font-weight:800;
}

.bad{
  color:var(--danger);
  font-weight:800;
}

.muted{
  color:var(--muted);
}

.status{
  font-size:12px;
  color:#bcd7ff;
  margin-top:6px;
}

footer{
  padding:12px 16px;
  border-top:1px solid var(--stroke);
  text-align:center;
  font-size:12px;
  color:#9ca3af;
}

/* MESA */

.table-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.poker-table{
  position:relative;
  margin:2px auto 0;
  max-width:560px;
  width:100%;
  aspect-ratio:1.6/1;
  background:radial-gradient(ellipse at center,#0a3d2c 0%,#08261d 65%,#061b14 100%);
  border:2px solid #0b4331;
  border-radius:120px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
}

.felt-label{
  position:absolute;
  inset:auto 0 8px 0;
  text-align:center;
  font-size:12px;
  color:#bfe9d2;
  opacity:.8;
}

.seat{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transform:translate(-50%,-50%);
  cursor:pointer;
}

.seat.disabled{
  opacity:.25;
  cursor:not-allowed;
}

.seat .chip{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#0b1220;
  border:2px solid #2a3f36;
  display:grid;
  place-items:center;
  font-weight:800;
}

.seat .pos{
  font-size:12px;
  color:#c7d2fe;
  letter-spacing:.04em;
}

.seat.active .chip{
  border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

.seat.active .pos{
  color:#86efac;
}

.seat.hero .chip{
  border-color:#60a5fa;
}

/* LEYENDA */

.legend{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  font-size:12px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

.dot.act{background:#22c55e}
.dot.hero{background:#60a5fa}
.dot.norm{background:#2a3f36}

/* GLOSARIO */

.glossary{
  margin-top:18px;
  padding:12px;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:10px;
  font-size:13px;
}

.glossary h4{
  margin:0 0 8px;
  font-size:14px;
  color:#4ade80;
  cursor:pointer;
}

.glossary ul{
  margin:0;
  padding-left:18px;
  display:none;
}

.glossary.open ul{
  display:block;
}