/* CANG Juega: componentes sobre los tokens de marca (cang-tokens.css). Maqueta aprobada; claro y oscuro; 390 px en adelante. */
:root{--j-capi:#fbeaf1;--j-capi-b:#f0c9d8;--j-capi-t:#8f3d5d;--j-ok:#1a6e45;--j-ok-f:#e3f4ea;--j-err:#b3261e;--j-err-f:#fbe7e5;--j-racha:#e8772e;--j-xp:#e2a400;--j-liga:#747bdc;--j-vacio:#e8eff0;--j-bloq:#6b7673;--j-suave:#e3f1ef;--j-rosa:#a8456c;--j-plan:#0a6462}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--j-capi:#33202a;--j-capi-b:#5a3a4a;--j-capi-t:#f0b8d0;--j-ok:#7ad9a6;--j-ok-f:#16301f;--j-err:#ff8a80;--j-err-f:#3a1d1a;--j-vacio:#26302e;--j-bloq:#8f9b98;--j-suave:#1b2d2b;--j-rosa:#d97a9c;--j-plan:#7fd8d2}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cang-bg-2);color:var(--cang-ink);font:400 16px/1.5 var(--cang-font)}
h1,h2,h3,p{margin:0}a{color:var(--cang-accent)}img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--cang-accent);outline-offset:2px}
.s-oscuro{display:none}@media (prefers-color-scheme:dark){.s-claro{display:none}.s-oscuro{display:block}}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.j-cab{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:12px clamp(16px,3vw,40px);background:var(--cang-paper);border-bottom:1px solid var(--cang-line-2)}
.j-logo{display:flex}.j-cab nav{display:flex;gap:18px;flex-wrap:wrap}
.j-cab nav a{color:var(--cang-ink);text-decoration:none;font-weight:500;font-size:15px;padding:6px 2px;border-bottom:2px solid transparent}
.j-cab nav a[aria-current]{color:var(--cang-accent);font-weight:600;border-color:var(--cang-accent)}
.j-estado{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.j-dato{display:flex;align-items:center;gap:5px;font-weight:700;font-size:15px}
.j-campana{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--cang-line-2);display:flex;align-items:center;justify-content:center;color:var(--cang-ink)}
.j-campana b{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:#b3261e;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.j-plan{font-size:12px;font-weight:600;color:var(--j-plan);background:var(--j-suave);border-radius:99px;padding:4px 10px}
.j-pag{max-width:1240px;margin:0 auto;padding:28px clamp(16px,3vw,40px) 48px;display:flex;flex-direction:column;gap:22px}.j-pag.angosta{max-width:560px}
.j-inicio{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:24px}.j-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.j-tarjeta{background:var(--cang-paper);border:1px solid var(--cang-line-2);border-radius:20px;padding:22px}
.j-tarjeta h2{font-size:18px;font-weight:700}.j-tarjeta p{color:var(--cang-ink-2)}
.j-capi{display:flex;gap:20px;align-items:center;flex-wrap:wrap;border:1.5px solid var(--j-capi-b)}
.j-capi img{width:86px;height:150px;object-fit:cover;object-position:50% 20%;border-radius:14px}.j-capi>div{flex:1;min-width:230px;display:flex;flex-direction:column;gap:8px}
.j-capi h1{font-size:clamp(21px,3vw,26px);line-height:1.2;font-weight:700}
.j-rotulo{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--j-capi-t);background:var(--j-capi);border-radius:99px;padding:3px 10px}
.j-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.j-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:14px;border:0;background:var(--cang-accent);color:var(--cang-accent-ink);font:700 15px var(--cang-font);text-decoration:none;cursor:pointer}
.j-btn.sec{background:transparent;color:var(--cang-accent);border:1.5px solid var(--cang-accent)}.j-btn.rosa{background:var(--j-rosa);color:#fff}
@media (prefers-color-scheme:dark){.j-btn.rosa{color:#1b0f15}}
.j-btn[disabled]{opacity:.55;cursor:default}
.j-barra{height:10px;border-radius:99px;background:var(--j-vacio);overflow:hidden}.j-barra span{display:block;height:100%;background:var(--j-ok);transition:width .3s}
.j-unidad-c{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.j-niveles{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.j-nivel{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;border-radius:14px;padding:4px}
.j-bola{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-weight:800;font-size:18px;background:var(--j-bloq)}
.completado .j-bola{background:#1a6e45}.abierto .j-bola{background:#0f7d79;box-shadow:0 0 0 5px var(--j-suave)}
.j-nivel b{display:block;font-weight:600}.j-nivel small{color:var(--cang-ink-2);font-size:13px}
.j-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:12px;color:var(--cang-ink-2);margin-top:10px}
.j-dia{display:block;width:28px;height:28px;border-radius:50%;margin:4px auto 0;background:var(--j-vacio)}.j-dia.si{background:var(--j-racha)}
.j-mini{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.j-mini li{display:flex;gap:10px;padding:8px 10px;border-radius:12px;font-size:14px}.j-mini li.tu{background:var(--j-suave);font-weight:700}.j-mini span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.j-fila{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.j-cuenta{max-width:1100px;margin:0 auto;padding:40px clamp(16px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.j-lado{display:flex;flex-direction:column;gap:16px}.j-lado h1{font-size:clamp(30px,4vw,38px);line-height:1.1;font-weight:700}.j-lado p{font-size:17px;color:var(--cang-ink-2)}.j-lado img{width:min(420px,100%)}
.j-form{display:flex;flex-direction:column;gap:8px}.j-form h1,.j-form h2{font-size:24px;font-weight:700;margin-bottom:6px}.j-form label{font-weight:600;font-size:14px;margin-top:6px}
.j-form input:not([type=checkbox]){min-height:48px;border:1.5px solid var(--cang-line-2);border-radius:12px;padding:0 14px;font:400 16px var(--cang-font);color:var(--cang-ink);background:var(--cang-paper);width:100%}
.j-form small{font-size:12px;color:var(--cang-ink-2)}.j-form .j-btn{margin-top:10px;min-height:50px}.j-casilla{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;line-height:1.45}.j-casilla input{width:20px;height:20px;flex:none;margin-top:1px}
.j-nota{font-size:13px;color:var(--cang-ink-2)}.j-nota.c{text-align:center;margin-top:6px}.j-codigo{text-transform:uppercase;letter-spacing:.2em;text-align:center;font-weight:700!important;font-size:22px!important}
.j-alerta{background:var(--j-err-f);border:1.5px solid var(--j-err);color:var(--j-err);border-radius:12px;padding:10px 12px;font-size:14px}.j-ok{background:var(--j-ok-f);border:1.5px solid var(--j-ok);color:var(--j-ok);border-radius:12px;padding:10px 12px;font-size:14px}
.j-promo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--cang-paper);border:1.5px solid var(--j-capi-b);border-radius:24px;padding:clamp(20px,3vw,32px)}.j-promo>div{display:flex;flex-direction:column;gap:12px}.j-promo h1{font-size:clamp(26px,4vw,34px);line-height:1.15;font-weight:700}.j-promo p,.j-promo small{color:var(--cang-ink-2)}
.j-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.j-jcab{display:flex;align-items:center;gap:14px;padding:12px clamp(16px,3vw,40px);background:var(--cang-paper);border-bottom:1px solid var(--cang-line-2)}
.j-salir{width:44px;height:44px;border-radius:12px;border:1px solid var(--cang-line-2);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--cang-ink);font-size:18px;flex:none}
.j-jcab .j-barra{flex:1;height:14px}.j-vidas{font-weight:700;font-size:18px;color:var(--j-err);white-space:nowrap}.j-vidas i{font-style:normal;color:var(--j-vacio)}.j-reloj{font-weight:600;color:var(--cang-ink-2);font-variant-numeric:tabular-nums}
.j-juego{max-width:1240px;margin:0 auto;padding:20px clamp(16px,3vw,40px) 40px;display:flex;flex-direction:column;gap:14px}.j-juego h1{font-size:clamp(22px,4vw,28px);font-weight:700}.j-juego>p{color:var(--cang-ink-2)}
.j-tablero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.j-img{position:relative;background:#fff;border:1px solid var(--cang-line-2);border-radius:20px;overflow:hidden}.j-img img{display:block;width:100%;max-height:68vh;object-fit:contain}
.j-casilla-img{position:absolute;min-width:44px;min-height:44px;padding:3px 8px;border:2px dashed #5f7577;border-radius:8px;background:#ffffffe0;color:#16201e;font:600 13px var(--cang-font);cursor:pointer;white-space:nowrap;transform:translateY(-10%)}
.j-casillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.j-casilla-btn{min-height:46px;border:2px dashed var(--cang-line-2);border-radius:10px;background:var(--cang-paper);color:var(--cang-ink);font:600 14px var(--cang-font);cursor:pointer;padding:4px 8px;text-align:left}
.j-casilla-btn.lista,.j-casilla-img.lista{border-color:var(--cang-accent)}
.ok{border-style:solid!important;border-color:var(--j-ok)!important;background:var(--j-ok-f)!important;color:var(--j-ok)!important;cursor:default}
.j-panel{display:flex;flex-direction:column;gap:12px}.j-panel h2{font-size:16px;font-weight:700}
.j-fichas{display:flex;flex-wrap:wrap;gap:8px}.j-ficha{min-height:44px;padding:4px 14px;border-radius:12px;border:1.5px solid var(--cang-line-2);background:var(--cang-paper);color:var(--cang-ink);font:600 14px var(--cang-font);cursor:grab;touch-action:none;box-shadow:0 2px 0 var(--cang-line-2)}
.j-ficha[aria-pressed=true]{border-color:var(--cang-accent);background:var(--j-suave)}.j-ficha.fuera{display:none}
.j-fantasma{position:fixed;z-index:9;pointer-events:none;transform:translate(-50%,-50%)}
.j-retro{border-radius:14px;padding:12px 14px;border:1.5px solid;display:flex;flex-direction:column;gap:4px;font-size:14px}.j-retro b{font-size:15px}.j-retro.bien{background:var(--j-ok-f);border-color:var(--j-ok)}.j-retro.mal{background:var(--j-err-f);border-color:var(--j-err)}
.j-capi-mini{display:flex;gap:10px;align-items:center;background:var(--j-capi);border-radius:14px;padding:10px 12px;font-size:13px;font-weight:500}.j-capi-mini img{width:34px;height:56px;object-fit:cover;object-position:50% 15%;border-radius:8px}
.j-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px}.j-dos>div{display:flex;flex-direction:column;gap:8px}
.j-res{max-width:880px;margin:0 auto;padding:36px clamp(16px,3vw,40px);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.j-res>img{width:min(420px,100%);border-radius:20px;background:#fff;border:1px solid var(--cang-line-2)}.j-res h1{font-size:clamp(26px,5vw,34px);font-weight:700}.j-res>p{color:var(--cang-ink-2);font-size:17px}
.j-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.j-tres b{display:block;font-size:clamp(20px,5vw,26px);font-weight:700}.j-tres small{color:var(--cang-ink-2)}.j-tres .j-tarjeta{padding:16px 8px}
.j-res .j-capi{width:100%;text-align:left;padding:16px}.j-res .j-capi img{width:60px;height:104px}
.j-pestanas{display:flex;gap:6px;background:var(--cang-paper);border:1px solid var(--cang-line-2);border-radius:12px;padding:4px;flex-wrap:wrap}.j-pestanas button{min-height:44px;padding:0 14px;border-radius:9px;border:0;background:transparent;color:var(--cang-ink);font:600 14px var(--cang-font);cursor:pointer}.j-pestanas button[aria-pressed=true]{background:var(--cang-accent);color:var(--cang-accent-ink)}
.j-tabla{width:100%;border-collapse:collapse}.j-tabla th{text-align:left;font-size:12px;color:var(--cang-ink-2);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px}.j-tabla td{padding:11px 10px;border-top:1px solid var(--cang-line);overflow-wrap:anywhere}.j-tabla .n{text-align:right;white-space:nowrap}.j-tabla tr.tu{background:var(--j-suave);font-weight:700}
.j-avisos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}.j-lista{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.j-lista li{padding:11px;border-radius:12px}.j-lista li.nuevo{background:var(--j-suave)}.j-lista b{display:block;font-size:14px}.j-lista span{font-size:13px;color:var(--cang-ink-2)}.j-lista time{display:block;font-size:12px;color:var(--cang-ink-2)}
.j-pref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--cang-line)}.j-pref b{display:block;font-size:15px;font-weight:600}.j-pref small{color:var(--cang-ink-2);font-size:13px}.j-pref input[type=checkbox]{width:44px;height:26px;accent-color:#0f7d79;flex:none}.j-pref input[type=time]{min-height:44px;border:1.5px solid var(--cang-line-2);border-radius:10px;padding:0 10px;font:400 15px var(--cang-font);background:var(--cang-paper);color:var(--cang-ink)}
.j-linea{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.j-linea input{flex:1;min-width:140px;min-height:46px;border:1.5px solid var(--cang-line-2);border-radius:12px;padding:0 12px;font:400 16px var(--cang-font);background:var(--cang-paper);color:var(--cang-ink)}
@media (max-width:860px){.j-inicio,.j-cuenta,.j-tablero,.j-promo{grid-template-columns:minmax(0,1fr)}.j-lado img{display:none}.j-img img{max-height:52vh}.j-estado{margin-left:0;width:100%}}
@media (max-width:520px){.j-dos{grid-template-columns:minmax(0,1fr)}.j-casilla-img{font-size:12px;min-width:44px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}