:root {
  --color-sector-odd:   #f0f4ff;
  --color-sector-even:  #ffffff;
  --color-cell-active:  #fff3bf;
  --color-cell-related: #dce8ff;
  --color-num-fixed:    #1c2b4a;
  --color-num-manual:   #1864ab;
  --color-num-hint:     #0b7285;
  --color-num-auto:     #e67700;
  --color-num-error:    #c92a2a;
  --color-border-thick: #3d5a99;
  --color-border-thin:  #c5cae9;
}

/* ── Dark mode ───────────────────────────────────────── */
body.dark {
  --color-sector-odd:   #252840;
  --color-sector-even:  #1e2130;
  --color-cell-active:  #4a3a00;
  --color-cell-related: #1a2a48;
  --color-num-fixed:    #c5d4f0;
  --color-num-manual:   #6da8ff;
  --color-num-hint:     #3ec9dc;
  --color-num-auto:     #ffaa44;
  --color-num-error:    #ff6868;
  --color-border-thick: #4a6aaa;
  --color-border-thin:  #303a5a;
  background: linear-gradient(135deg, #1a1040 0%, #2c1854 100%);
}

body.dark #tablero {
  background: #1e2130;
  box-shadow: 0 8px 36px rgba(0, 0, 10, 0.6);
}

body.dark .nota { color: #7080a0; }

body.dark #menu { background: rgba(0, 0, 0, 0.35); }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-attachment: fixed;
}

div { box-sizing: border-box; }

.manual {
  font-family: 'Pacifico', cursive;
  font-weight: bolder;
  color: var(--color-num-manual);
}

#app {
  min-height: 100vh;
}

/* ── Menu ─────────────────────────────────────────── */
#menu {
  width: 100%;
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 12px;
}

.menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.menu-titulo {
  font-family: 'Zen Dots', cursive;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.menu-timer {
  font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  letter-spacing: 1px;
  flex: 1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s;
}

.menu-timer.menu-timer-pausado { opacity: 0.4; }

#btn-nivel {
  display: flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#btn-nivel::after {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Panel lateral (offcanvas) ───────────────────── */
#menu-panel {
  background: linear-gradient(160deg, #3d2a72 0%, #251a55 100%);
  color: #fff;
  width: 280px;
}

#menu-panel .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#menu-panel .offcanvas-title {
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 6px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#menu-panel .btn-lg {
  text-align: left;
  padding-left: 20px;
  font-size: 1rem;
}

#menu-panel .btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

#menu-panel hr {
  border-color: rgba(255, 255, 255, 0.15);
  margin: 4px 0;
}

#btn-nueva     { --bs-btn-bg:#2f9e44; --bs-btn-border-color:#2f9e44; --bs-btn-hover-bg:#276836; --bs-btn-hover-border-color:#276836; }
#btn-reiniciar { --bs-btn-bg:#e67700; --bs-btn-border-color:#e67700; --bs-btn-hover-bg:#d16100; --bs-btn-hover-border-color:#d16100; }
#btn-comprobar { --bs-btn-bg:#0c8599; --bs-btn-border-color:#0c8599; --bs-btn-hover-bg:#0a6e80; --bs-btn-hover-border-color:#0a6e80; }
#btn-sugerencia{ --bs-btn-bg:#6741d9; --bs-btn-border-color:#6741d9; --bs-btn-hover-bg:#5b33c1; --bs-btn-hover-border-color:#5b33c1; }
#btn-resolver  { --bs-btn-bg:#c2255c; --bs-btn-border-color:#c2255c; --bs-btn-hover-bg:#a61e4d; --bs-btn-hover-border-color:#a61e4d; }
#btn-ayuda     { --bs-btn-bg:#868e96; --bs-btn-border-color:#868e96; --bs-btn-hover-bg:#6c757d; --bs-btn-hover-border-color:#6c757d; }
#btn-instalar  { --bs-btn-bg:#0d9488; --bs-btn-border-color:#0d9488; --bs-btn-hover-bg:#0b7b71; --bs-btn-hover-border-color:#0b7b71; }
#btn-undo      { --bs-btn-bg:#5c7cfa; --bs-btn-border-color:#5c7cfa; --bs-btn-hover-bg:#4c6ef5; --bs-btn-hover-border-color:#4c6ef5; }
#btn-stats     { --bs-btn-bg:#495057; --bs-btn-border-color:#495057; --bs-btn-hover-bg:#343a40; --bs-btn-hover-border-color:#343a40; }

/* ── Board ──────────────────────────────────────────── */
#tablero {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(20, 20, 80, 0.35);
  background: white;
  padding: 3px;
  width: fit-content;
}

.sector-non { background-color: var(--color-sector-odd); }
.sector-par { background-color: var(--color-sector-even); }

.activa {
  background-color: var(--color-cell-active) !important;
  box-shadow: inset 0 0 0 2px #f59f00 !important;
}

.sector-rel { background-color: var(--color-cell-related) !important; }

.num-fijo  { color: var(--color-num-fixed);  font-weight: 700; }
.num-pista { color: var(--color-num-hint);   font-weight: 700; }
.num-auto  { color: var(--color-num-auto);   font-weight: 700; }
.num-error { color: var(--color-num-error);  font-weight: 700; }

.nota {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a8aa0;
  font-family: sans-serif;
  font-weight: normal;
}

/* ── Loader ─────────────────────────────────────────── */
#cargador {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

#cargador.visible { display: flex; }

.spinner-sudoku {
  width: 56px; height: 56px;
  border: 6px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── No-select ──────────────────────────────────────── */
#tablero, #teclado {
  user-select: none;
  -webkit-user-select: none;
}

/* ── Keyboard ───────────────────────────────────────── */
#teclado {
  width: 100%;
  border-top: solid 1px rgba(255,255,255,0.25);
  padding-top: 6px;
}

.teclado-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
}

.teclado-nums {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px;
}

.teclado-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#teclado .btn {
  width: var(--btn-size, 44px);
  height: var(--btn-size, 44px);
  padding: 0 !important;
  font-size: var(--btn-font, 18px);
  border: 3px solid !important;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

#teclado .btn:not(:disabled):active {
  transform: scale(0.88);
}

#teclado .btn.activo {
  border: 3px solid #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.4);
}

/* ── Tool buttons (boli, lápiz, goma) ───────────────── */
#btn-boli {
  --bs-btn-bg: #1971c2;
  --bs-btn-border-color: #1971c2;
  --bs-btn-hover-bg: #1864ab;
  --bs-btn-hover-border-color: #1864ab;
}

#btn-lapiz {
  --bs-btn-bg: #e67700;
  --bs-btn-border-color: #e67700;
  --bs-btn-hover-bg: #d16100;
  --bs-btn-hover-border-color: #d16100;
}

#btn-del {
  --bs-btn-bg: #c92a2a;
  --bs-btn-border-color: #c92a2a;
  --bs-btn-hover-bg: #b02525;
  --bs-btn-hover-border-color: #b02525;
}

#btn-lapiz:not(.activo),
#btn-boli:not(.activo) {
  opacity: 0.38;
  filter: saturate(0.5);
}

#teclado #btn-lapiz.activo,
#teclado #btn-boli.activo {
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* ── Help modal ─────────────────────────────────────── */
#ayuda-content {
  max-height: 60vh;
  overflow-y: auto;
}

/* ── jQuery Confirm modal ───────────────────────────── */
.jconfirm-content-pane {
  overflow: hidden !important;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    overflow: hidden;
}
.zen-dots {
  font-family: 'Zen Dots', cursive;
  font-weight: 400;
  letter-spacing: 4px;
}

/* ── Animations ─────────────────────────────────────── */
@keyframes numEntrada {
    0%   { box-shadow: inset 0 0 0 0   rgba(25, 113, 194, 0.8); }
    40%  { box-shadow: inset 0 0 0 8px rgba(25, 113, 194, 0.35); }
    100% { box-shadow: inset 0 0 0 0   rgba(25, 113, 194, 0); }
}
.num-entrada { animation: numEntrada 0.3s ease-out; }

@keyframes notaEntrada {
    0%   { box-shadow: inset 0 0 0 0   rgba(230, 119, 0, 0.8); }
    40%  { box-shadow: inset 0 0 0 8px rgba(230, 119, 0, 0.3); }
    100% { box-shadow: inset 0 0 0 0   rgba(230, 119, 0, 0); }
}
.nota-entrada { animation: notaEntrada 0.3s ease-out; }

@keyframes celdaGanadora {
    0%   { background-color: inherit; }
    50%  { background-color: #51cf66 !important; }
    100% { background-color: inherit; }
}
.celda-resuelta { animation: celdaGanadora 0.45s ease; }

@keyframes celdaEntrada {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.celda-entrada { animation: celdaEntrada 0.4s ease-out; }

/* ── Layout ─────────────────────────────────────────── */
#layout-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 8px;
  gap: 8px;
}

#layout-game.landscape {
  flex-direction: row;
  align-items: stretch;
  padding: 8px;
}

#layout-game.landscape #tablero {
  flex-shrink: 0;
  align-self: flex-start;
}

#layout-game.landscape #teclado {
  flex: 1;
  min-width: 0;
  width: auto;
  border-top: none;
  margin-left: 14px;
  border-left: solid 1px rgba(255,255,255,0.25);
  padding-top: 0;
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}