/* === Estilo retro-máquina para index.html === */
body {
	margin: 0;
	font-family: 'Fira Code', 'Courier New', monospace;
	background: radial-gradient(circle, #1c120a 0%, #0e0804 100%);
	background-size: 75%;
	color: white;
}

/* Contenedor principal */
.container {
    padding-bottom: 190px;
}

/* Barra de navegación */
.href-wrap {
	padding-top:4px; 
	padding-bottom:4px;
}
#top-navbar {
    display: flex;
    justify-content: center;
    padding: 0;
}

#top-navbar a {
	color: #ffd580;
	font-weight: bold;
	font-family: 'Courier New', monospace;
	font-size: 1.1em;
}

#top-navbar a:has(img.logo) {
	transform: scale(1.05);
	font-size: 0;
	color: transparent;
}

.logo:hover {
  transform: scale(1.05);
  color: #0f0;
}

/* */
.main-container {
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}


/* */
.main-layout {
  display: flex;
  gap: 30px;
  padding: 20px;
  width: 90%;
  max-width: 1200px;
  justify-content: space-between;
}

.main-layout-home {
	align-items: flex-start;
}

.main-layout-consola-max {
	justify-content: center;
}

section {
	color: #d2b48c;/*marroncito*/
}

section h1,h2 {
	color: #ffd580;/*mostazita*/
}

section h1,h2,h3,h4,h5,p {
	font-weight: bold;
}
.main-layout-fast {
  max-width: 500px; /* ajusta según tus necesidades */
  word-wrap: break-word;
  flex: 1; /* permite que ambos elementos compartan espacio de forma proporcional */
}

.main-layout-scenarios{
	background-size: cover;         /* Hace que la imagen cubra toda la sección */
	background-repeat: no-repeat;   /* Evita que se repita */
	padding: 40px 20px;             /* Espaciado interior para que el texto no esté pegado al borde */
	color: #fff;                    /* Asegura legibilidad (ajustable según el fondo) */
	border-radius: 12px;            /* Opcional: suaviza los bordes */
}

.main-layout-img-top{
	background-position: top;    /* Centra la imagen */
}
.main-layout-img-center{
	background-position: center;    /* Centra la imagen */
}

.main-layout-img-bottom{
	background-position: bottom;    /* Centra la imagen */
}

.main-layout-scenarios-caja{
	background-image: url('/static/caja-en.png'); 
}

.main-layout-scenarios-caja-monitor{
	background-image: url('/static/caja-en-monitor.png'); 
}

.main-layout-scenarios-almacen{
	background-image: url('/static/almacen.png');
}

.main-layout-scenarios-datos{
	background-image: url('/static/datos.png');
}

.main-layout-scenarios-maquina-lejos {
	background-image: url('/static/maquina.png');
}

.main-layout-scenarios-maquina-cerca {
	background-image: url('/static/entrenar.png');
}

/* Encabezados */
.scenario-panel h2,
.model-panel h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #ffd580;
}

/* Panel de escenarios a elejir estilo botón TRAIN */
.scenario-panel {
  background: linear-gradient(to bottom, #3e2e20, #2c1f14);
  border: 2px solid #5c4735;
  border-radius: 8px;
  padding: 30px;
  width: 45%;
  box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.05),
        inset 0 -2px 3px rgba(0, 0, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.button-scenario {
  display: block;
  margin-top: 20px;
  background: linear-gradient(to bottom, #4a392c, #2c1f14);
  color: #fff6dd;
  font-weight: bold;
  font-size: 1.1em;
  border: 2px solid #604b38;
  border-radius: 6px;
  padding: 12px 20px;
  text-decoration: none;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.05),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    2px 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

.button-scenario:hover {
  transform: scale(1.05);
  background: linear-gradient(to bottom, #5b4333, #3b2a1f);
  color: #fff6cc;
}

/* Panel de modelos a elejir estilo pantalla LCD */
.model-panel {
  background: #111;
  border: 2px inset #222;
  border-radius: 10px;
  padding: 30px;
  width: 45%;
  box-shadow: 0 0 10px #0f0 inset;
  color: #0f0;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

.lcd-option {
  display: block;
  margin-top: 20px;
  color: #0f0;
  background-color: #111;
  border: 1px solid #333;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 1.1em;
  text-decoration: none;
  box-shadow: 0 0 10px #0f0 inset;
  transition: transform 0.2s ease;
}

.lcd-option:hover {
  transform: scale(1.05);
  color: #0f0;
  box-shadow: 0 0 10px #0f0 inset;
}


 /* Scenarios */
 .keyword {
    font-weight: bold;
    font-size: 1.25rem;
	color: #ffd580;/*mostazita*/
}


.layout-console {
  display: flex;
  gap: 8px;
}

.layout-console-max {
	flex-direction: column;
  display: flex;
  gap: 8px;
}

/*consola*/
.main-layout-consola {
	display: flex;
	align-items: end;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	width: 300px;
}
/* Botón consola */

.botonera-consola button {
	background: linear-gradient(to bottom, #3e2e20, #2c1f14);
	padding: 30px 30px;
	background-repeat: round;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1em;
    border: 1px solid black;
    border-radius: 6px;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.05),
        inset 0 -2px 3px rgba(0, 0, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
    letter-spacing: 0.5px;
	color: #ffd580;/*mostazita*/
}

.botonera-consola button:hover {
    background: linear-gradient(to bottom, #513a29, #3a2a1f);
    color: #fff6dd;
}

.botonera-consola button:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.7),
        1px 1px 2px rgba(0, 0, 0, 0.4);
}

.teclas-consola input {
	background: linear-gradient(to bottom, #3e2e20, #2c1f14);
	background-repeat: round;
	padding: 25px 25px;
    border: 1px solid black;
    box-shadow: inset 0 -2px 0 #000, 0 2px 3px rgba(0,0,0,0.5);
    text-align: center;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
	color: #ffd580;/*mostazita*/
}
/* Ajuste scroll botones número */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
  display: block;
}
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Fija tamaño de pantalla y evita expansión */
.pantalla-consola {
    background-color: #111;
    border-radius: 10px;
    padding: 10px 20px;
    color: #b6ff7d;
	color: #0f0;
    box-shadow: 0 0 10px #0f0 inset;
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-direction: column;
	width: 245px;
	text-shadow: 0 0 10px #0f0;
}

.pantalla-consola-max {
	width: 500px;
	height: 195px;
	font-size: 1.1em;
}

.pantalla-consola-max .max-comentarios {
	font-size: 1.1em;
}

/* Números arriba */
.linea-cifras {
    display: flex;
    justify-content: space-between;
    font-size: 1.5em;
}

/* Resultado medio */
.linea-resultado {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
}

/* Comentarios dentro del LCD */
.pantalla-consola .comentarios {
    font-size: 1.1em;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pantalla-consola .comentarios {
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-list li {
	display: block;
	font-weight: bold;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 480px) {
  .main-layout {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
  }

  .scenario-panel,
  .model-panel {
    width: 100%;
    padding: 20px;
  }

  .button-scenario,
  .lcd-option {
    width: 90%;
    font-size: 1.1em;
    padding: 12px;
  }

  .gherkin-container {
    padding: 0.5rem;
  }

  .gherkin-feature,
  .gherkin-scenario {
    font-size: 1.2em;
    text-align: center;
  }

  .gherkin-block {
    max-width: 100%;
    padding: 0 10px;
  }

  .inputs-consola {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .inputs-consola input {
    width: 90%;
    font-size: 1em;
  }

  .pantalla-consola {
    width: 90%;
    height: auto;
    padding: 12px;
  }

  .botonera-consola button {
    width: 90%;
    height: 60px;
    font-size: 1.1em;
  }

  .comentarios {
    width: 100%;
    text-align: center;
    padding-top: 10px;
  }

  #top-navbar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .scenario-panel,
  .model-panel {
    width: 90%;
  }

  .gherkin-feature {
    font-size: 1.5rem;
  }

  .gherkin-scenario {
    font-size: 1.3rem;
  }

  .inputs-consola {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }

  .inputs-consola input {
    width: 120px;
  }

  .pantalla-consola {
    width: 220px;
  }

  .botonera-consola button {
    width: 150px;
  }

  .comentarios {
    width: 100%;
    padding: 0 15px;
  }

  #top-navbar {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}