/* /assets/logic.css — estilos compartidos Sudoku + KenKen (MultiIdeasWeb) */
:root{
  --bg-start:#0b0f1a; --bg-end:#0f172a;
  --card-bg:#111827; --card-border:#1f2937;
  --ok:#16a34a; --bad:#ef4444; --accent:#38bdf8;
  --cage:#60a5fa; /* borde de cage visible */
}
.miw-body{ min-height:100vh; background:linear-gradient(135deg,var(--bg-start),var(--bg-end)); color:#e5e7eb; }
.miw-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.miw-badge{ background:#0ea5e9; }
.form-check-input:checked{ background-color:#0ea5e9; border-color:#0ea5e9; }
.timer{ font-variant-numeric:tabular-nums; font-weight:700; color:#93c5fd !important; }
.card .form-label, .card .form-text, #status { color:#fff !important; }
.form-text{ opacity:.85; }

.print-area{ background:#0b1220; padding:1rem; border-radius:1rem; border:1px dashed #334155; }
.solution-hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#64748b; font-weight:600; pointer-events:none; }
.solution-hint.hidden{ display:none; }

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; color:#000; }
  .miw-card, .print-area{ border:0; box-shadow:none; }
}

/* ====== Sudoku ====== */
.sudoku{ display:grid; gap:0; border:2px solid #334155; width:100%; max-width:520px; aspect-ratio:1/1; background:#0b1220; user-select:none; border-radius:.5rem; }
.cell{ border:1px solid #334155; position:relative; overflow:hidden; background:#0f172a; }
.cell input{ width:100%; height:100%; text-align:center; font-weight:700; font-size:clamp(1rem, 2.6vw, 1.35rem); color:#e5e7eb; background:transparent; border:0; outline:none; caret-color:#93c5fd; }
.cell input:disabled{ color:#93c5fd; background:rgba(56,189,248,.07); cursor:default; }
.cell input.answer-ok{ background:rgba(22,163,74,.12); color:#bbf7d0; }
.cell input.answer-bad{ background:rgba(239,68,68,.12); color:#fecaca; }
.thick-top{ border-top-width:2px; } .thick-left{ border-left-width:2px; } .thick-right{ border-right-width:2px; } .thick-bottom{ border-bottom-width:2px; }
/* subcuadrantes alternados */
.sq-a{ background:#0f172a; } .sq-b{ background:#0e1526; }

/* ====== KenKen ====== */
.kenken{ display:grid; gap:0; border:2px solid #334155; width:100%; max-width:520px; aspect-ratio:1/1; background:#0b1220; user-select:none; border-radius:.5rem; position:relative; }
.cage-label{
  position:absolute; top:2px; left:4px; font-size:.78rem; color:#0b1220; z-index:2; pointer-events:none;
  background:#93c5fd; padding:0 .28rem; border-radius:.25rem; font-weight:700;
  box-shadow:0 0 0 1px #1f2937, 0 2px 6px rgba(147,197,253,.25);
}
.cage-top{ border-top:3px solid var(--cage) !important; }
.cage-left{ border-left:3px solid var(--cage) !important; }
.cage-right{ border-right:3px solid var(--cage) !important; }
.cage-bottom{ border-bottom:3px solid var(--cage) !important; }

/* Modal ayuda */
.miw-modal{ background:#0b1220; color:#e5e7eb; border:1px solid #1f2937; }
.help-grid{ display:grid; grid-template-columns:repeat(3,3rem); grid-auto-rows:3rem; gap:.25rem; margin:.5rem 0 1rem 0; }
.help-grid input{ width:3rem; height:3rem; text-align:center; font-weight:700; border-radius:.5rem; border:1px solid #334155; background:#0f172a; color:#e5e7eb; }
.help-grid input.bad{ background:rgba(239,68,68,.12); color:#fecaca; border-color:#ef4444; }
.help-grid input.ok{ background:rgba(22,163,74,.12); color:#bbf7d0; border-color:#16a34a; }