@charset "UTF-8";
/* CSS Document */

/* ================================
   Sopa de Letras — Tema JDMG
================================ */



/* ===== Paleta y tokens ===== */
:root {
  --brand:#6b4d5e;
  --ink:#1f2937;
 
  --hair:#e5e7eb;

  --a1:#df8c00;
  --a2:#fab553;
  --a3:#e86a00;
  --a4:#faa972;
  --a5:#9d4a00;
  --a6:#df8c00;

  --card:#fff;
  --shadow:0 8px 24px rgba(0,0,0,.06);

--font-display: 'Outfit', system-ui, sans-serif;
--font-sans: 'Inter', system-ui, sans-serif;

  --max-game:700px;
  --ads-col:320px;
  --page-max:1100px;
  --radius-lg:16px;
  --radius-md:12px;

  --n:10;
  --panel-w:280px;
  --panel-w-hard:220px;
  --max-game-hard:820px;
  --page-max-hard:1180px;
}


.page-sopa .header-lines{
  z-index:10000;

}

.page-sopa{
  --sopa-board-w: 400px;
}

.page-sopa.sopa-facil{
  --sopa-board-w: 400px;
}

.page-sopa.sopa-medio{
  --sopa-board-w: 400px;
}

.page-sopa.sopa-dificil{
  --sopa-board-w: 400px;
}

.page-sopa .grid{
  width:var(--sopa-board-w);
  max-width:100%;
}

.sopa-es__status{
  max-width:var(--sopa-board-w);
}

.sopa-es__icons{
  max-width:var(--sopa-board-w);
}

.page-sopa .grid-col .panel{
  width:var(--sopa-board-w);
  max-width:100%;
}

.page-sopa .game-slot{
  width:var(--sopa-board-w);
  max-width:100%;
}


/* ===== Columna juego ===== */
.game-shell {
  display: grid;

}

/* ===== Ads ===== */
.ad-rail{
  width:300px;min-height:600px;margin:0 auto;
  position:sticky;top:16px;
}
@media(max-width:1024px){.ad-rail{position:static;width:100%;min-height:0;}}



.grid-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

select,button{
  border:1px solid var(--hair);
  background:#fff;
  color:#111827;
  padding:10px 12px;

  font-weight:800;
  cursor:pointer;
    font-family: inherit;
  letter-spacing:.3px;
}
button.primary{
  background:var(--a1);
  color:#fff;
  border-color:transparent;
  transition:transform .06s ease;
}
button.primary:active{transform:translateY(1px);}
.grid-wrap{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;


  max-width:100%;

  padding:0 !important;
  margin:0 auto !important;

  box-sizing:border-box;
  display:block;
      overflow:hidden;
}
.grid-wrap.tight {
  padding: 0 !important;
}
.grid{
  display:grid;
  grid-template-columns:repeat(var(--n),1fr)!important;
  grid-template-rows:repeat(var(--n),1fr)!important;
  aspect-ratio:1/1;
  max-width:100%;
  border:5px solid #df8c00;
  margin:0;
  user-select:none;-webkit-user-select:none;touch-action:none;
  cursor:default;position:relative;
}
.cell{
  display:flex;align-items:center;justify-content:center;
  font-family: var(--font-sans);
  font-weight:400;
  color: #262626 !important;
  font-size:var(--cell-font,clamp(16px,3.2vw,22px));
  letter-spacing:0;line-height:1;
  border:none;margin:0;padding:0;
      position: relative; /* ← crea contexto para estar sobre la banda */
  z-index: 1;
}
.cell:hover,.cell:active{background:transparent!important;color:inherit!important;}
.cell.found{color:#111827;}
.hl-bar{
  position:absolute;left:0;top:0;
  height:clamp(16px,7.5vw,28px);
  border-radius:999px;transform-origin:left center;
  pointer-events:none;z-index:0;
}
.hl-preview{background:rgba(120,120,120,.28);z-index:0;}
.pastel-0{background:rgba(239,68,68,.40);}
.pastel-1{background:rgba(59,130,246,.40);}
.pastel-2{background:rgba(16,185,129,.40);}
.pastel-3{background:rgba(245,158,11,.40);}
.pastel-4{background:rgba(139,92,246,.40);}
.pastel-5{background:rgba(14,165,233,.40);}
.pastel-6{background:rgba(244,63,94,.40);}
.pastel-7{background:rgba(99,102,241,.40);}
.pastel-8{background:rgba(34,197,94,.40);}
.pastel-9{background:rgba(234,179,8,.40);}
.panel {
  background: #fff;
  
  box-shadow: none;
  padding-bottom: 8px;
     padding-top: 8px;
  align-self: start;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0px;
}


/* ===== Panel de palabras ===== */
.panel h2 {
  margin: 0 0 10px 0;
  font-family: var(--font-display);
  color: #8a6b7a;
  font-size: clamp(16px, 3.8vw, 20px);
  line-height: 1.1;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere; /* permite saltos si es necesario */
  hyphens: auto;           /* divide correctamente según idioma */
}

/* SOPA — word-chip estilo Sudoku key */
.word-chip{
  background:#865673;
  color:#fff;

  padding:0px 10px;
  border-radius:3px;

  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:14px;

  white-space:nowrap;
}

.word-chip.found{
  background:#e5e7eb;
  color:#6b7280;
  text-decoration:line-through;
}

.page-sopa.sopa-dificil .panel{
  padding-top:4px;
  padding-bottom:4px;
}

.page-sopa.sopa-dificil .panel .words{
  gap:4px 6px;          /* menos aire entre palabras */
}

.page-sopa.sopa-dificil .word-chip{
  font-size:12px;       /* antes 14px */
  padding:2px 8px;     /* antes 0 10px */
  border-radius:2px;
}



/* ===== Niveles ===== */
.grid[data-n="8"]{--cell-font:clamp(20px,3vw,26px);gap:10px;}
.grid[data-n="10"]{--cell-font:clamp(18px,2.6vw,22px);gap:8px;}
.grid[data-n="13"]{--cell-font:clamp(16px,2.2vw,20px);gap:6px;max-width:100%;}


p {
  font-weight: 400;
  line-height: 1.5;
}
button, select {
  font-weight: 700;
}
.meta {
font-family: var(--font-sans);
  justify-content: center;
  font-weight: 600;
  color: #6b7280;
}

/* ================================
   Efecto visual de pista (clic en palabra)
================================ */
.cell.hint {
  background: rgba(250, 181, 83, 0.45) !important; /* tono a2, semi opaco */
  transition: background 0.3s ease;
  animation: flashHint 1.5s ease;
}

@keyframes flashHint {
  0%   { background: rgba(250,181,83,0.7); }
  50%  { background: rgba(250,181,83,0.2); }
  100% { background: rgba(250,181,83,0.45); }
}

/* === Base tipográfica del juego === */

.grid,
.grid .cell {
  font-family: var(--font-sans);
}


.game-shell .panel h2 {
  font-size: 1rem;
  font-weight: 600;
}


/* =====================================================
   SOPA — BOTONES CLON SUDOKU 
===================================================== */

.page-sopa .sopa-es__btn{
  background:#fff;
  color:#4b5563; /* = --se-thick */
  border-radius:3px;
  border:1px solid #9ca3af; /* = --se-hairline */
  padding:10px 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:600;
  font-size:14px;
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease;
}

/* Hover general */
.page-sopa .sopa-es__btn:hover{
  background:#fff;
  border-color:#4b5563;
  color:#000;
}

/* Active */
.page-sopa .sopa-es__btn:active{
  background:#f3eee8;
}

/* === Nuevo juego = ÚLTIMO BOTÓN (igual Sudoku) === */
.page-sopa .sopa-es__btn:last-child{
  border-color:var(--brand);
  color:var(--brand);
  font-weight:700;
}

/* Hover Nuevo juego */
.page-sopa .sopa-es__btn:last-child:hover{
  background:#fbbd16;
  color:#333333;
}



.page-sopa .grid-col {
  position: relative;
}


.page-sopa .grid-wrap{
  width:100%;
  margin:0;

}

.page-sopa .panel{
  margin:0;
  align-self:stretch;
}

.page-sopa main > .inner{
  background:#fff;
}


/* === Layout ancho completo (igual a Memoria) === */

/* 1) El inner no mete padding lateral */
.page-sopa main > .inner{
  padding-left:0 !important;
  padding-right:0 !important;
  padding-top:var(--pad);
}

/* 2) page-layout pinta el fondo a todo el ancho */
.page-sopa .page-layout{
  margin-left:0px;
  margin-right:0px;
  margin-top:calc(-1 * var(--pad));
  padding-top:var(--pad);
}

/* 3) El contenido vuelve a alinearse */
.page-sopa .page-main{
  padding-left:16px;
  padding-right:16px;
}



/* 2) El grid interno ya no se centra solo */
.page-sopa .grid-col{
  align-items:flex-start;
}

/* 3) El panel (aside) queda alineado al gutter derecho */
.page-sopa .panel{
  justify-self:end;
}

/* 4) page-main define el gutter real (como Memoria) */
.page-sopa .page-main{
  padding-left:var(--pad);
  padding-right:var(--pad);
}




/* El panel debe medir lo mismo que el grid */
.page-sopa .grid-col .panel{
 
  max-width:100%;
  margin:4px 0 0px;

  background:#fff;
  
  box-shadow:none;
}

/* Título más compacto */
.page-sopa .grid-col .panel h2{
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-align:left;
}

/* Contenedor de palabras en modo compacto */
.page-sopa .grid-col .panel .words{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:flex-start;
}





.page-sopa .game-shell{
  background: transparent;
}

.page-sopa main,
.page-sudokus main{
  padding-top: calc(var(--header-h) + 12px);
}

/* =====================================================
   SOPA — STATUS BAR (igual a Sudoku)
===================================================== */
.sopa-es__status{
  display:grid;
  grid-template-columns:auto auto 1fr; /* nivel | tiempo | tema */
  align-items:center;
  gap:8px;

  width:var(--sopa-board-w);
  margin:0 0 4px 0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  color:#4b5563;
}

/* Nivel */
.sopa-es__status-level{
  text-align:left;
  font-weight:600;
  white-space:nowrap;
}

/* Tiempo con separador visual */
.sopa-es__status-time{
  text-align:left;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1;
  position:relative;
  padding-left:12px;
}

.sopa-es__status-time::before{
  content:"│";              /* separador elegante */
  position:absolute;
  left:0;
  color:#9ca3af;             /* hairline */
  font-weight:400;
}

/* Tema a la derecha */
.sopa-es__status-theme{
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* =====================================================
   SOPA — BOTONES (idénticos a Sudoku)
===================================================== */

.sopa-es__icons{
  display:flex;
  justify-content:space-between;
  gap:8px;

  width:var(--sopa-board-w);
  margin:6px 0 0 0;
    padding-bottom: 12px;
}

.sopa-es__btn{
  background:#fff;
  color:var(--brand);
  border:1px solid var(--hair);
  border-radius:3px;
  padding:10px 14px;

  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:600;
  font-size:14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    transform .08s ease;
}

/* === estilo LÁPIZ (Repetir juego) === */
.sopa-es__btn:hover{
  background:#fff;
  border-color:#4b5563;
  color:#000;
}



/* === estilo NUEVO JUEGO (idéntico Sudoku) === */
.sopa-es__btn--primary{
  border-color:var(--brand);
  color:var(--brand);
  font-weight:700;
}

.sopa-es__btn--primary:hover{
  background:#fbbd16;
  color:#333;
}



/* =====================================================
   SOPA — TARJETA DE FELICITACIÓN
===================================================== */

.sopa-win-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100000;
}

.sopa-win-overlay[hidden]{
  display:none !important;
}

.sopa-win-card{
  position:relative;
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border:2px solid var(--brand);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:28px 24px 24px;
  animation:sopaWinIn .25s ease-out;
}

@keyframes sopaWinIn{
  from{
    opacity:0;
    transform:scale(.96);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.sopa-win-close{
  position:absolute;
  top:10px;
  right:10px;

  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--hair);
  background:#fff;
  color:#333;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  line-height:1;
  cursor:pointer;
}


.sopa-win-close:hover{
  background:#f3f3f3;
}

.sopa-win-content{
  text-align:center;
}

.sopa-win-icon{
  width:64px;
  height:auto;
  margin:0 auto 16px;
}

.sopa-win-content h2{
  margin:0 0 8px;
  font-size:22px;
  font-family:var(--font-display);
  color:#111;
}

.sopa-win-text{
  margin:0 0 20px;
  color:#6b7280;
  font-size:15px;
  line-height:1.4;
}

.sopa-win-btn{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  border-radius:3px;
  padding:12px 18px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}

.sopa-win-btn:hover{
  background:#fbbd16;
  color:#333;
}


.imagen-contenedor img{
  float:left;
  margin:0 20px 12px 0;
  max-width:320px;
  height:auto;
}

/* =====================================================
   SOPA — MOBILE (limpio, estilo Sudoku)
===================================================== */
@media (max-width:640px){

  html, body{ overflow-x:hidden; }
  .page-sopa{ overflow-x:hidden; }

  /* el main NO puede quedar debajo del header + header-lines */
  .page-sopa main{
    padding-top: calc(var(--header-h) + 42px);
  }

  /* una columna */
  .page-sopa .page-layout,
  .page-sopa .page-main{
    display:block;
  }

  /* gutter consistente */
  .page-sopa .page-main{
    padding-left:var(--pad);
    padding-right:var(--pad);
    box-sizing:border-box;
  }

  /* en mobile el “ancho tablero” siempre es el viewport */
  .page-sopa{
    --sopa-board-w: 100%;
  }

  /* nada puede medir más que el viewport */
  .page-sopa .game-slot,
  .page-sopa .game-shell,
  .page-sopa .grid-col,
  .page-sopa .grid-wrap,
  .page-sopa .panel,
  .page-sopa .page-aside,
  .page-sopa .page-aside .aside-card{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  /* tablero centrado y sin overflow por anchos fijos previos */
  .page-sopa .grid{
    width:100% !important;
    max-width:520px;
    margin:0 auto;
    box-sizing:border-box;
  }

  /* status + botones: ancho real del tablero (sin padding extra que empuje) */
  .sopa-es__status,
  .sopa-es__icons{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:0;
  box-sizing:border-box;
  }

  .sopa-es__icons{
    gap:8px;
    padding-bottom:12px;
  }

  .sopa-es__btn{
    font-size:13px;
    padding:8px 10px;
  }

  /* panel palabras debajo */
  .page-sopa .panel{
     width:100%;
    margin:12px auto 0;
  }

  /* aside debajo del juego */
  .page-sopa .page-aside{
    margin-top:16px;
  }
    
    
     .page-sopa.sopa-facil,
  .page-sopa.sopa-medio,
  .page-sopa.sopa-dificil{
    --sopa-board-w: 100% !important;
  }

  /* evita que se “corte” el lateral derecho si quedó algún overflow hidden heredado */
  .page-sopa .game-slot{ overflow: visible; }
  .page-sopa .grid-wrap{ overflow: visible; }


    
    
     .page-sopa .page-layout{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
    
    
      .page-sopa.sopa-dificil .word-chip{
    font-size:11px;
    padding:2px 6px;
  }
    
}