/* styles.css */

/* Definición de variables para Light y Dark Mode */
:root {
  --bg-color-head: #131f33; /* Fondo Head / barra de navegacion */
  --bg-color: #2c2c38; /* Fondo Principal */
  --text-color: #ffffff; /* Textos en General */
  --timer-color: #95D2B3; /* Color inicial del temporizador */
  --bg-input-guess: #312222; /* Fondo input Numeros .digit(n) */
  --border-input-guess: #44ee3e; /* Bordes input Numeros .digit(n) */
  --table-header-background: #272731; /* Fondo Head Tabla */
  --bordes-color-table: #30c42b; /* Bordes Tabla */
  --button-background: #30c42b; /* Fondo Boton "Intentar" */
  --button-text: #ffffff; /* Texto Boton "Intentar" */
  --correct-position-color: #4caf50; /* Verde */
  --wrong-position-color: #ff9800;   /* Naranja */
  --error-color: #ff5722;            /* Rojo */
  --modal-content-background: #222831; /* Fondo Modal */
  --modal-background: #000000cc; /* Fondo detras del Modal */
  --bordes-color-modal: #46db4b; /* Bordes Modal */
}

body.light-mode {
  --bg-color-head: #8ab0ee; /* Fondo Head / barra de navegacion */
  --bg-color: #f2f2f2; /* Fondo Principal */
  --text-color: #000; /* Textos en General */
  --timer-color: #95D2B3; /* Color inicial del temporizador en modo claro */
  --bg-input-guess: #ffffff; /* Fondo input Numeros .digit(n) */
  --border-input-guess: #636363; /* Bordes input Numeros .digit(n) */
  --table-header-background: #2c2c2c;/* Fondo Head Tabla */
  --bordes-color-table: #c0c0c0; /* Bordes tabla */
  --button-background: #30c42b; /* Fondo Boton "Intentar" */
  --button-text: #ffffff; /* Texto Boton "Intentar" */
  --correct-position-color: #4caf50; /* Verde */
  --wrong-position-color: #ff9800;   /* Naranja */
  --error-color: #ff5722;            /* Rojo */
  --modal-content-background: #ffffff; /* Fondo Modal */
  --modal-background: rgba(255, 255, 255, 0.85); /* Fondo detras del Modal */
  --bordes-color-modal: #585858; /* Bordes Modal */
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);

  font-family: 'Courier New', Courier, monospace;
  transition: background-color 0.3s, color 0.3s;
}

header {
  height: 3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px;
}

header a {
  color: var(--text-color);
  display: flex;
  align-items: center;
  font-size: .6em;
  font-family: 'DS-Wonder', sans-serif;
  text-decoration: none;
}

header a:hover {
  color: var(--border-input-guess);
}

header a img {
  width: 25px;
  margin: 6px;
  background-color: gray;
  border-radius: 15px;
  padding: 2px;
}

header a:hover img {
  background-color: var(--border-input-guess);
}

#themeToggle {
  height: 100%;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0;
}
#themeToggle:hover {
  scale: 1.05;
}

h1 {
  color: var(--text-color);
  text-align: center;
  margin: 2rem auto 4rem;
  font-size: 2rem;
  letter-spacing: 2px;
  font-family: 'DS-Wonder', sans-serif;
}
@font-face {
  font-family: 'DS-Wonder';
  src: url('./fonts/8bit_wonder/8-BIT\ WONDER.TTF') format('truetype');
}

.container {
  display: flex;
  height: 5rem;
  justify-content: center;
  align-items: center;
}

#timer {
  background-color: var(--timer-color);
  color: black;
  max-width: 260px;
  padding: 10px 15px 10px 15px;
  margin: 10px 10px;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  transition: background-color .5s linear;
  border: 2px solid rgb(51, 51, 51);
  border-radius: 15px;
  -webkit-box-shadow: inset 2px 3px 2px 1px rgba(0,0,0,0.15);
  -moz-box-shadow: inset 2px 3px 2px 1px rgba(0,0,0,0.15);
  box-shadow: inset 2px 3px 2px 1px rgba(0,0,0,0.15);
  border-radius: 15px 0px 0px 15px;
}

.resetButton {
  background-color: #e22929de;
  color: #580606;
  font-weight: 600;
  width: 100px;
  height: 3.2rem;
  padding: 5px 5px;
  font-size: .9rem;
  border: 2px solid black;
  -webkit-box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.09);
  -moz-box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.09);
  box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.09);
  border-radius: 0px 15px 15px 0px;
}

.resetButton:hover {
  background-color: #e22929bd;
  color: #2b0404;
  scale: 1.03;
  
}

.info {
  width: 100%;
  text-align: center;
  margin: 1.5rem auto 5px;
  color: var(--text-color);
}

.input-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 1.3rem;
}

.input-container input {
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 2rem;
  border: 2px solid var(--border-input-guess);
  border-radius: 8px;
  background-color: var(--bg-input-guess);
  color: var(--text-color);
  transition: background-color 0.3s, border-color 0.3s;  
  font-family: 'DS-Wonder', sans-serif;
}

.button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2.5rem;
  align-items: center;
}

button {
  background-color: var(--button-background);
  width: 250px;
  padding: 15px 20px;
  margin: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 2px solid #12740f;
}

.guessButton {
  font-size: 1.5rem;
  font-weight: 600;
  color: #042403;
  -webkit-box-shadow: 0px 0px 13px 6px rgba(0,0,0,0.09);
  -moz-box-shadow: 0px 0px 13px 6px rgba(0,0,0,0.09);
  box-shadow: 0px 0px 13px 6px rgba(0,0,0,0.09);
}

.guessButton:hover {
  background-color: #4ed849;
  border: 2px solid black;
  scale: 1.01;
}

#tablaResultados {
  max-width: 700px;
  margin: 0 auto 30px auto;
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#tablaResultados th, #tablaResultados td {
  padding: 8px 10px;
  border: 1px solid var(--bordes-color-table);
  text-align: center;
}

#tablaResultados td {
  color: var(--text-color);
  font-weight: 600;
}

#tablaResultados tr td:nth-last-child(2) {
  background-color: hsla(125, 100%, 67%, 0.3);
}
#tablaResultados tr td:nth-last-child(1) {
  background-color: hsla(54, 100%, 50%, 0.3);
}

#tablaResultados thead {
  background-color: var(--table-header-background);
  color: #f2f2f2;
}

#tablaResultados tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.09);
}

.digit-cell.correct-position {
  background-color: var(--correct-position-color);
  color: var(--text-color);
  border-radius: 4px;
}

.digit-cell.wrong-position {
  background-color: var(--wrong-position-color);
  color: var(--text-color);
  border-radius: 4px;
}

.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--modal-background);
  transition: background-color 0.3s;
}

.modal-content {
  background-color: var(--modal-content-background);
  margin: 15% auto;
  padding: 20px;
  border: 2px solid var(--bordes-color-modal);
  width: 80%;
  max-width: 400px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

#modalTitle {
  margin-bottom: 1rem;
}

#modalOkButton {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: var(--button-background);
  color: var(--button-text);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#modalOkButton:hover {
  opacity: 0.8;
}

/* Tema Oscuro - Victoria */
body:not(.light-mode) .modal-win .modal-content {
  background-color: #2e7d32; /* Verde oscuro */
  border-color: #1b5e20;
  color: #ffffff;
}

body:not(.light-mode) .modal-win #modalOkButton {
  background-color: #66bb6a;
  color: #ffffff;
}

/* Tema Oscuro - Derrota */
body:not(.light-mode) .modal-lose .modal-content {
  background-color: #c62828; /* Rojo oscuro */
  border-color: #b71c1c;
  color: #ffffff;
}

body:not(.light-mode) .modal-lose #modalOkButton {
  background-color: #ef5350;
  color: #ffffff;
}

/* Tema Claro - Victoria */
body.light-mode .modal-win .modal-content {
  background-color: #a5d6a7; /* Verde claro */
  border-color: #66bb6a;
  color: #000000;
}

body.light-mode .modal-win #modalOkButton {
  background-color: #81c784;
  color: #000000;
}

/* Tema Claro - Derrota */
body.light-mode .modal-lose .modal-content {
  background-color: #ef9a9a; /* Rojo claro */
  border-color: #e57373;
  color: #000000;
}

body.light-mode .modal-lose #modalOkButton {
  background-color: #e57373;
  color: #000000;
}



.visually-hidden { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border: 0; 
}

/* Responsive Design */
@media (max-width: 600px) {
  .input-container {
      flex-direction: column;
      align-items: center;
  }

  .input-container input {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
  }

  #tablaResultados {
      width: 100%;
  }
}