@charset "UTF-8";

    /* =====================================================
       SUDOKU — TOKENS
       ===================================================== */

    :root{
      --se-brand: var(--brand);
        --se-bg:#fff;
      --se-text:#000;
      --se-muted:#6b7280;

      --se-hairline:#9ca3af;
      --se-thick:#4b5563;

      --se-focus-cell: color-mix(in srgb, var(--se-brand) 28%, white);
      --se-hl:          color-mix(in srgb, var(--se-brand) 12%, white);
      --se-hl-same:     color-mix(in srgb, var(--se-brand) 20%, white);

      --se-wrong:#ff3b30;
      --se-wrong-bg:#ffe8e6;

      --se-shadow-sm:0 1px 2px rgba(0,0,0,.06);
      --se-shadow-md:0 6px 18px rgba(0,0,0,.08);

      --se-note: color-mix(in srgb, var(--se-brand) 85%, white);
        --sudoku-frame: 6px;
    }


    .sudoku-es__cell.flash{
      animation:sudokuFlash .9s ease;
    }

    @keyframes sudokuFlash{
      0%   { transform:scale(1); }
      25%  { transform:scale(1.03); filter:brightness(1.08); }
      100% { transform:scale(1); }
    }


    /* =====================================================
       SUDOKU — COMPONENTE BASE
       ===================================================== */

    .sudoku-es{
      width:100%;
      max-width:var(--game-w);
      font-family:var(--font-display);
      color:var(--se-text);
      font-size:18px;
    }
    .sudoku-es *{ box-sizing:border-box; }

    /* nunca pintar correctos en verde */
    .sudoku-es__cell.correct{
      background:transparent !important;
      color:inherit !important;
    }


    /* Sudoku — números legibles (no display) */
    .sudoku-es__cell,
    .sudoku-es__note,
    .sudoku-es__key{
      font-family: system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, Arial, sans-serif;
      font-weight:600;
    }

    /* =====================================================
       SUDOKU — LAYOUT
       ===================================================== */

    /* STATUS BAR — layout fijo (nivel / tiempo / pausa) */
    .sudoku-es__status{
      display:grid;
      grid-template-columns: 1fr auto auto auto;
      align-items:center;
      width:100%;
      margin-bottom:4px;
      color:var(--se-thick);
    }

    /* nivel a la izquierda */
    .sudoku-es__status-level{
      flex:0 0 auto;
    }

    /* (2) timer con ancho fijo para que no empuje nada */
    .sudoku-es__status-time{
      flex:0 0 64px;            /* ancho fijo (ajustable) */
      display:inline-block;
      text-align:center;
      font-variant-numeric: tabular-nums; /* dígitos monoespaciados */
      font-feature-settings: "tnum" 1;    /* fallback */
    }

    /* (3) botón sin “recuadro negro” */
    .sudoku-es__status-pause{
      flex:0 0 auto;
      border:0;
      background:transparent;
      padding:0 6px;
      line-height:1;
      box-shadow:none;
      outline:none;
      appearance:none;
      -webkit-appearance:none;
    }
    .sudoku-es__status-pause{
     appearance: none;
      -webkit-appearance: none;

      border: none;
      background: none;

      color: var(--se-thick);   /* ← forzado explícito */
      cursor: pointer;

      font-size: 18px;
      line-height: 1;
      padding: 6px 10px;
    }
    /* por si el navegador dibuja focus ring feo */
    .sudoku-es__status-pause:focus{
      outline:none;
    }
    .sudoku-es__status-pause:focus-visible{
      outline:none;             /* si querés focus accesible, lo hacemos luego con tu color */
    }
    .sudoku-es__status-pause:hover{
      color: var(--se-text);
    }



    .sudoku-es__wrap{
      display:grid;
      grid-template-columns:1fr;
      grid-template-rows:auto auto;
      width:100%;
      max-width:var(--game-w);
      margin:0;
      overflow:visible;
      container-type:inline-size;
      row-gap:0px;
    }

    .sudoku-es__topbar{ display:none !important; }

    /* =====================================================
       SUDOKU — TABLERO
       ===================================================== */

    .sudoku-es__board{
      position:relative;
      width:100%;
      max-width:var(--game-w);
      aspect-ratio:1 / 1;
      box-shadow:var(--se-shadow-md);
      overflow:hidden;
      container-type:size;
      min-width:0;
          border:2px solid var(--se-thick);

        margin-bottom: 6px;
        background:#fff;
    }




    .sudoku-es__grid{
      position:absolute;
      inset:0;
      display:grid;
      grid-template-columns:repeat(9,1fr);
      grid-template-rows:repeat(9,1fr);
      gap:min(1px, 0.2cqi);
      background:var(--se-hairline);
    }

    .sudoku-es__grid::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:2;
      background:
        linear-gradient(to right, transparent 33.333%, var(--se-thick) 0 calc(33.333% + 2px), transparent 0),
        linear-gradient(to right, transparent 66.666%, var(--se-thick) 0 calc(66.666% + 2px), transparent 0),
        linear-gradient(to bottom, transparent 33.333%, var(--se-thick) 0 calc(33.333% + 2px), transparent 0),
        linear-gradient(to bottom, transparent 66.666%, var(--se-thick) 0 calc(66.666% + 2px), transparent 0);
    }

    /* =====================================================
       SUDOKU — CELDAS
       ===================================================== */

    .sudoku-es__cell{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--se-bg);
      user-select:none;
      cursor:pointer;
      font-weight:700;
      font-size:clamp(1rem, 6.2cqi, 2.2rem);
        color:#000;
      aspect-ratio:1 / 1;
      border:0 !important;
      outline:none !important;
    }

    .sudoku-es__cell.given{
      background:#e5e5e5;
    }

    .sudoku-es__cell.highlight-row,
    .sudoku-es__cell.highlight-col,
    .sudoku-es__cell.highlight-box{   background:#f8e2b7;}

    .sudoku-es__cell.given.highlight-row,
    .sudoku-es__cell.given.highlight-col,
    .sudoku-es__cell.given.highlight-box{
     background:color-mix(in srgb, #f8e2b7 50%, #e5e5e5);
    }

    .sudoku-es__cell.same-number{ background:#fbbd16; }
    .sudoku-es__cell.same-number.given{
      background:color-mix(in srgb, #fbbd16 60%, #cccccc);
    }
    .sudoku-es__cell.wrong{
      background:var(--se-wrong-bg) !important;
      color:var(--se-wrong) !important;
    }

    .sudoku-es__cell.selected{
      background:#fbbd16 !important;
    }

    .sudoku-es__cell.given.selected{
      background:color-mix(in srgb, #fbbd16 85%, #cccccc) !important;
    }
    /* =====================================================
       SUDOKU — NOTAS
       ===================================================== */

    .sudoku-es__cell.has-notes{ color:transparent; }

    .sudoku-es__notes{
      position:absolute;
      inset:6%;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-template-rows:repeat(3,1fr);
      gap:1px;
      pointer-events:none;
    }

    .sudoku-es__note{
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:clamp(10px, 1.8cqi, 14px);
      line-height:1;
      color:var(--se-note);
    }

    /* =====================================================
       SUDOKU — CONTROLES
       ===================================================== */

    .sudoku-es__controls{
      width:100%;
      max-width:var(--game-w);
      display:grid;
      gap:12px;
    }

    .sudoku-es__kbd{
      display:grid;
      grid-template-columns:repeat(5, minmax(0,1fr)); 
      gap:6px;
    width:100%;
      max-width:100%;  
      box-sizing:border-box;
          position:relative;
      z-index:1;
    }

    .sudoku-es__key{
      aspect-ratio:auto;
      height:38px;
        width:100%;
      background:#865673;
      color:#fff;
      border-radius:3px;
      font-weight:700;
      font-size:1.2rem;     /* achicamos para que entren */
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }

    .sudoku-es__key{
      transition:
        background-color .12s ease,
        box-shadow .12s ease,
        transform .08s ease;
    }

    .sudoku-es__key:hover{
      background:#c0a5b5;
         color:#000;
        border:1px solid #865673;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
    }

    .sudoku-es__key:active{
      transform: translateY(1px);
        background:#fff;
    }

    .sudoku-es__icons{
      display:flex;
      align-items:center;
      justify-content:space-between; /* ← clave */
      gap:8px;
      z-index:2;
    }

    .sudoku-es__icons .sudoku-es__btn{
      width:auto;
    }

    .sudoku-es__icons .sudoku-es__btn:last-child{
      margin-left:auto;
    }


    /* =====================================================
       SUDOKU — BOTONES
       ===================================================== */

    .sudoku-es__btn{
      background:#fff;
       color: var(--se-thick);
         border-radius:3px;
      border:1px solid var(--se-hairline);
      padding:10px 14px;
      font-family:var(--font-display);
      font-weight:600;
      font-size:14px;
      min-height:30px;
      width:100%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }


    .sudoku-es__btn--primary,
    .sudoku-es__btn--primary:hover{
      background:var(--se-brand);
      color:#fff;
      border-color:var(--se-brand);
    }
    .sudoku-es__btn--primary{
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }
    .sudoku-es__btn{
      transition:
        background-color .14s ease,
        border-color .14s ease,
        color .14s ease;
    }

    .sudoku-es__btn:hover:not(.sudoku-es__btn--primary){
      background:#fff;
      border-color:var(--se-thick);
      color:var(--se-text);
    }

    .sudoku-es__btn:active{
      background:#f3eee8;
    }

        /* SOLO el botón Nuevo Juego */
    .sudoku-es__btn:last-child{
      border-color:var(--se-brand);
      color:var(--se-brand);
      font-weight:700;
    }

    .sudoku-es__btn:last-child:hover{
      background:#fbbd16 ;
        color:#333333;
    }

    .sudoku-es__status{
      font-family: system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, Arial, sans-serif;
          font-size:16px;
    }

    .sudoku-es__btn{
      font-family: system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, Arial, sans-serif;
          font-size:14px;
    }

    /* =====================================================
       SUDOKU — ESTILOS DE PÁGINA
       ===================================================== */

    .page-sudokus .page-main{
      --game-w:360px;
    }

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

    .page-sudokus main{
      background:var(--brand);
    }

    .page-sudokus main > .inner{
      max-width:var(--content-w);
      margin:0 auto;
      background:#fff;
      padding:24px 0;
    }





    /* =========================
       MODAL — NUEVO JUEGO
    ========================= */
    .sudoku-es__modal-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.55);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:99999;
    }

    .sudoku-es__modal{
      width:min(420px, calc(100vw - 32px));
      background:#fff;
      border:2px solid var(--se-thick);
      padding:16px;
      box-shadow:var(--se-shadow-md);
    }

    .sudoku-es__modal-title{
      margin:0 0 10px;
      text-align:center;
      color:var(--se-text);
    }

    .sudoku-es__modal-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }


    .win-banner{
      position:fixed;
      top:20%;
      left:50%;
      transform:translateX(-50%) scale(.9);
      background:var(--se-brand);   /* violeta brand */
      color:#fff;                   /* texto blanco */
      border:2px solid var(--se-brand);
      padding:18px 26px;
      font-family:var(--font-display);
      font-size:20px;
      font-weight:700;
      z-index:100000;
      opacity:0;
      transition:opacity .25s ease, transform .25s ease;
    }

    .win-banner.show{
      opacity:1;
      transform:translateX(-50%) scale(1);
    }
    .sudoku-es__board.win-flash{
      animation:winFlash .9s ease;
    }

    @keyframes winFlash{
      0%   { filter:brightness(1); }
      40%  { filter:brightness(1.15); }
      100% { filter:brightness(1); }
    }
    .confetti{
      position:fixed;
      top:0;
      border-radius:2px;
      pointer-events:none;
      z-index:99999;
      animation:confettiFall linear forwards;
    }

    @keyframes confettiFall{
      from{ transform:translateY(0) rotate(0deg); }
      to  { transform:translateY(110vh) rotate(360deg); }
    }



    /* =====================================================
       SUDOKU — FESTEJO GRUPO COMPLETO
       ===================================================== */
    /* =====================================================
       SUDOKU — FESTEJO GRUPO COMPLETO
       ===================================================== */

    .sudoku-es__cell.group-complete{
      position:relative;
    }

    .sudoku-es__cell.group-complete::after{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(251,189,22,.28);
      box-shadow: inset 0 0 0 2px rgba(251,189,22,.55);
      animation: groupSweep .6s ease-out;
      pointer-events:none;
    }

    @keyframes groupSweep{
      0%{
        opacity:0;
      }
      25%{
        opacity:.9;
      }
      55%{
        opacity:.45;
      }
      100%{
        opacity:0;
      }
    }



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



    .sudoku-win-card{
      position:relative;
      width:min(420px, calc(100vw - 32px));
      background:#fff;
      border:2px solid var(--se-thick);
      box-shadow:var(--se-shadow-md);
      padding:28px 24px 24px;
      animation: winCardIn .25s ease-out;
    }



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


    .sudoku-win-close{
      position:absolute;
      top:10px;
      right:10px;
      width:28px;
      height:28px;
      border-radius:50%;
      border:1px solid var(--se-hairline);
      background:#fff;
      color:var(--se-thick);
      font-size:18px;
      line-height:1;
      cursor:pointer;
    }

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



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

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

    .sudoku-win-content h2{
      margin:0 0 8px;
      font-size:22px;
      color:var(--se-text);
    }

    .sudoku-win-text{
      margin:0 0 20px;
      color:var(--se-muted);
      font-size:15px;
      line-height:1.4;
    }


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

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

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


    /* =====================================================
       MEDIA QUERIES
       ===================================================== */

    /* =====================================================
       SUDOKU — MOBILE 
       ===================================================== */
    @media (max-width:640px){

      /* ===== BASE ===== */
      html, body, .page-sudokus{
        overflow-x:hidden;
      }
        
          .page-sudokus .page-layout,
  .page-sudokus .page-main{
    display:block;
  }
        
 
    .sudoku-es{
    margin-left:auto;
    margin-right:auto;
  }


      .page-sudokus .game-slot{
        width:100%;
        margin:0;
      }

      /* ===== ASIDE ABAJO (NO TOCAR ESTO) ===== */
      .page-sudokus .page-aside,
      .page-sudokus .page-aside .aside-card{
        position:static !important;
        width:100% !important;
        max-width:100% !important;
        margin:24px 0 0;
        box-sizing:border-box;
      }

      /* ===== SUDOKU APILADO ===== */
      .sudoku-es__wrap{
        display:block;
      }

      .sudoku-es,
      .sudoku-es__board,
      .sudoku-es__controls{
        width:100%;
        max-width:100%;
      }

      /* ===== TABLERO ===== */
      .sudoku-es__board{
        margin-bottom:8px;
      }

      /* ===== TECLADO NUMÉRICO (2 FILAS) ===== */
      .sudoku-es__kbd{
        display:grid;
        grid-template-columns:repeat(5, minmax(0,1fr));
        gap:6px;
        width:100%;
        margin:0 0 8px;
      }

      .sudoku-es__key{
        height:44px;
        font-size:1.3rem;
        min-width:0;
      }

      /* ===== BOTONES (LÁPIZ / DESHACER / NUEVO) ===== */
      .sudoku-es__icons{
        display:flex;
        gap:6px;
        width:100%;
      }

      .sudoku-es__btn{
        flex:1 1 0;
        min-width:0;
        padding:8px 6px;
        font-size:13px;
      }
        
        
          .page-sudokus main{
    padding-top: calc(var(--header-h) + 4px);
  }

  .page-sudokus main > .inner{
    padding:8px 0;
  }
        

    }