/* latin-ext */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PT_Sans_Narrow_latin_ext_normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PT_Sans_Narrow_latin_normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: bold;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PT_Sans_Narrow_latin_ext_bold.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */ 
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: bold;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PT_Sans_Narrow_latin_bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(../fonts/material-symbols-outlined.woff2) format('woff2');
}

/* -------------------------------------------------------------------------- */
/* general
/* -------------------------------------------------------------------------- */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /*line-height: 1;*/
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

ul.se-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.se-fila {
    display: block;
}

/* -------------------------------------------------------------------------- */
/* reloj
/* -------------------------------------------------------------------------- */

.se-tiempo {
    display: table;
    text-align: center;
    margin: 10px auto;
    font-size: 130%;
    border-radius: 10px;
    border: 2px solid;
    padding: 0 10px;
    user-select: none;
}

/* -------------------------------------------------------------------------- */
/* sudoku
/* -------------------------------------------------------------------------- */

.se-sudoku {
    display: table;
}
.se-sudoku .se-tablero {
    transition: all .2s ease-in-out;
    border-radius: 10px;
    overflow: hidden;    
}
.se-sudoku.cargando .se-tablero {
    filter: blur(3px);
}
.se-sudoku > ul {
    font-size: 0;
    border: 2px solid;
}
.se-sudoku .se-fila > li {
    display: inline-block;
    vertical-align: top;
}
.se-sudoku .se-casilla {
    font-size: 23px;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    transition: all .2s ease-in-out;
    user-select: none;
}
.se-sudoku .se-fija {
    background-color: #c3bdfc;
    color: #000;
    font-weight: 600;
}
.se-sudoku .se-oscura {
    background-color: #f2f2f6;
}
.se-sudoku .se-fila > li:not(:last-child) {
    border-right: 1px solid #c7c7c7;
}
.se-sudoku li:not(:last-child) > .se-fila > li {
    border-bottom: 1px solid #c7c7c7;
}
.se-sudoku .se-fila > li:nth-child(3n):not(:last-child) {
    border-right: 1px solid #000;
}
.se-sudoku li:nth-child(3n):not(:last-child) > .se-fila > li {
    border-bottom: 1px solid #000;
}
.se-sudoku .se-casilla:not(.se-fija):not(.activa):hover {
    border: 2px solid #c7c7c7;
    cursor: pointer;
}
.se-sudoku .se-tablero > li:first-child .se-fila > li:first-child .se-casilla:not(.se-fija):hover {
    border-radius: 8px 0 0 0;
}
.se-sudoku .se-tablero > li:last-child .se-fila > li:first-child .se-casilla:not(.se-fija):hover {
    border-radius: 0 0 0 8px;
}
.se-sudoku .se-tablero > li:first-child .se-fila > li:last-child .se-casilla:not(.se-fija):hover {
    border-radius: 0 8px 0 0;
}
.se-sudoku .se-tablero > li:last-child .se-fila > li:last-child .se-casilla:not(.se-fija):hover {
    border-radius: 0 0 8px 0;
}
.se-sudoku .se-tablero .se-casilla.activa {
    border: 2px solid;
}
.se-sudoku .se-tablero > li:first-child .se-fila > li:first-child .se-casilla.activa {
    border-radius: 8px 0 0 0;
}
.se-sudoku .se-tablero > li:last-child .se-fila > li:first-child .se-casilla.activa {
    border-radius: 0 0 0 8px;
}
.se-sudoku .se-tablero > li:first-child .se-fila > li:last-child .se-casilla.activa {
    border-radius: 0 8px 0 0;
}
.se-sudoku .se-tablero > li:last-child .se-fila > li:last-child .se-casilla.activa {
    border-radius: 0 0 8px 0;
}

.se-sudoku .se-numeros {
    margin-top: 20px;
    font-size: 0;
}
.se-sudoku .se-numeros > li {
    display: inline-block;
    font-size: 23px;
    vertical-align: top;
}
.se-sudoku .se-numeros > li:not(:last-child) {
    border-right: 1px solid #c7c7c7;
}
.se-sudoku .se-numeros .completo {
    background-color: #cacaca;
    color: #000;
    font-weight: 600;    
}

.se-sudoku .se-herramientas {
    margin-top: 20px !important;
    margin: auto;
    font-size: 0;
    display: table;
}
.se-sudoku .se-herramientas > li {
    display: inline-block;
    font-size: 23px;
    vertical-align: top;
}
.se-sudoku .se-herramientas > li:not(:last-child) {
    border-right: 1px solid #c7c7c7;
}

.se-sudoku .se-tablero.se-correcto {
    box-shadow: 0px 0px 17px 1px blue;
}
.se-sudoku .se-tablero.se-incorrecto {
    box-shadow: 0px 0px 17px 1px red;
}

/* -------------------------------------------------------------------------- */
/* links niveles dificultad
/* -------------------------------------------------------------------------- */

.se-links-niveles > li {
    display: inline-block;
}
.se-links-niveles > li:not(:last-child):after {
    content: ', ';
}