/* public/css/style.css
   -----------------------------------------------------------------------
   Estilos generales de AppGrillo.
   Paleta inspirada en la terminal de quiniela real: fondo turquesa,
   botones celestes con relieve y acentos color hueso/salmon.
   ----------------------------------------------------------------------- */

:root {
  --agrillo-fondo: #0e6e7a;       /* turquesa oscuro de fondo */
  --agrillo-fondo-claro: #14939f; /* turquesa mas claro (paneles) */
  --agrillo-boton: #cfe6e8;       /* celeste claro de los botones */
  --agrillo-acento: #f2c9a1;      /* salmon/hueso de los botones de loteria */
  --agrillo-texto-oscuro: #0b2e33;
}

body {
  background-color: var(--agrillo-fondo);
  min-height: 100vh;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--agrillo-texto-oscuro);
}

/* Panel principal tipo "pantalla de terminal" */
.panel-appgrillo {
  background-color: var(--agrillo-fondo-claro);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
}

/* Botones grandes estilo terminal (loterias, turnos, teclado numerico) */
.boton-terminal {
  background-color: var(--agrillo-boton);
  border: none;
  border-radius: 0.6rem;
  font-weight: bold;
  color: var(--agrillo-texto-oscuro);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.05s ease-in-out;
}

.boton-terminal:active {
  transform: translateY(2px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.boton-terminal.acento {
  background-color: var(--agrillo-acento);
}

/* Rango seleccionado: se usa una clase propia (en vez de depender de las
   clases de Bootstrap) para asegurarnos que el color se vea siempre,
   sin importar el orden en que se carguen las hojas de estilo. */
.rango-seleccionado {
  background-color: #ffb703 !important;
  color: #3a2400 !important;
  box-shadow: 0 0 0 3px #e08e00 inset, inset 0 -3px 0 rgba(0, 0, 0, 0.25) !important;
  font-weight: 800;
}

.titulo-appgrillo {
  font-weight: 800;
  letter-spacing: 1px;
}