/* ConMami Juegos — estilos comunes de la plataforma
   Misma paleta y tipografía que los juegos. */
:root{
  --bg:#E7EDF1; --surface:#FFFFFF; --surface-2:#F3F7F9;
  --ink:#16212B; --muted:#5D7181; --line:#D2DCE3; --line-strong:#B9C7D1;
  --accent:#DD4C36; --accent-ink:#FFFFFF; --accent-soft:#FBE3DD;
  --teal:#0E9089; --teal-soft:#DCF0EE; --amber:#E39412; --amber-soft:#FCEFCF;
  --shadow:0 1px 0 rgba(22,33,43,.04), 0 10px 26px -14px rgba(22,33,43,.34);
  --tile-black:#121212; --tile-paper:#FDFDFB;
  --r-md:14px; --r-lg:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1720; --surface:#18242F; --surface-2:#131E27;
    --ink:#E7EFF4; --muted:#93A7B4; --line:#2A3743; --line-strong:#3A4B59;
    --accent:#FF6C53; --accent-ink:#1A0B07; --accent-soft:#3B241F;
    --teal:#2FC3B6; --teal-soft:#123230; --amber:#FFC055; --amber-soft:#3A2F12;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 30px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1720; --surface:#18242F; --surface-2:#131E27;
  --ink:#E7EFF4; --muted:#93A7B4; --line:#2A3743; --line-strong:#3A4B59;
  --accent:#FF6C53; --accent-ink:#1A0B07; --accent-soft:#3B241F;
  --teal:#2FC3B6; --teal-soft:#123230; --amber:#FFC055; --amber-soft:#3A2F12;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 30px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{min-height:100%}
body{margin:0; background:var(--bg); color:var(--ink);
     font-family:"Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
     font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%}
button,input{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
h1,h2,h3{font-family:"Baloo 2", ui-rounded, system-ui, sans-serif; line-height:1.1; margin:0}

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

/* cabecera */
.top{background:var(--surface); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:12px; min-height:64px; flex-wrap:wrap; padding-block:8px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand b{font-family:"Baloo 2",sans-serif; font-size:22px; font-weight:700; letter-spacing:-.01em}
.brand small{display:block; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-top:-3px}
.mark{width:34px; height:34px; flex:none; border-radius:8px; overflow:hidden; display:grid;
      grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
      background:var(--tile-paper); border:2.5px solid var(--tile-black)}
.mark i{display:block; background:var(--tile-black)}
.mark i.d1{clip-path:polygon(0 0,100% 0,100% 100%)}
.mark i.d2{clip-path:polygon(0 0,0 100%,100% 100%)}
.mark i.b{background:transparent}
.top .spacer{flex:1}
.who{color:var(--muted); font-weight:700; font-size:14px}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px;
     padding:0 18px; border-radius:var(--r-md); border:2px solid var(--line-strong);
     background:var(--surface-2); font-weight:800; font-size:15px; cursor:pointer; text-decoration:none; color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.small{min-height:36px; padding:0 12px; font-size:13.5px; border-radius:11px}
.btn[disabled]{opacity:.45; cursor:default; border-color:var(--line)}
.btn[disabled]:hover{border-color:var(--line)}

/* tarjetas */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
      padding:22px; box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

main{padding:28px 0 48px}
.hero{padding:36px 0 20px}
.hero h1{font-size:clamp(30px,5vw,44px)}
.hero p{font-size:18px; color:var(--muted); margin:10px 0 0; max-width:58ch}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:22px}
.two .card h2{font-size:24px; margin:6px 0 8px}
.two .card p{margin:0 0 18px; color:var(--muted)}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
      padding:3px 10px; border-radius:99px; background:var(--surface-2); color:var(--muted);
      border:1px solid var(--line)}
.pill.on{background:var(--teal-soft); color:var(--teal); border-color:transparent}
.pill.soon{background:var(--amber-soft); color:var(--ink); border-color:transparent}

/* juegos */
.games{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:18px}
.game{display:flex; flex-direction:column; gap:12px}
.game h3{font-size:24px}
.game .pills{display:flex; gap:6px; flex-wrap:wrap}
.game .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
.game .thumb{height:120px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line);
             display:grid; place-items:center}

/* avisos */
.note{padding:14px 16px; border-radius:14px; border:2px solid var(--amber); background:var(--surface); font-weight:700}
.note.err{border-color:var(--accent)}
.center{min-height:70vh; display:grid; place-items:center; text-align:center; padding:24px}
.center .card{max-width:460px}
.spin{width:38px; height:38px; border-radius:50%; border:4px solid var(--line); border-top-color:var(--accent);
      margin:0 auto 14px; animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:3s} }

/* tabla admin */
.stats{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 16px; min-width:150px}
.stat b{display:block; font-family:"Baloo 2",sans-serif; font-size:28px; line-height:1}
.stat span{color:var(--muted); font-size:13px; font-weight:700}
.tblwrap{overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
tr:last-child td{border-bottom:0}

footer{color:var(--muted); font-size:12.5px; text-align:center; padding:20px 0 30px}