/*
 * Estilos comunes a todas las pantallas del kiosko.
 * Los colores viven en variables: cuando lleguen los colores oficiales de Corbus,
 * se cambian aqui y se actualizan todas las pantallas.
 */
@font-face {
  font-family: "AvenirLight";
  src: url("../fonts/AvenirLight.978153ba4ed9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-fondo: #ffffff;
  --color-texto: #3b3c43;        /* textos principales */
  --color-texto-suave: #bdbcbc;  /* textos secundarios */
  --color-linea: #000000;        /* lineas destacadas */
  --color-icono: #000000;        /* iconos del menu y boton de inicio */
  --color-icono-suave: #bdbcbc;  /* boton de idioma */
  --color-borde: #e2e2e2;        /* contorno de los circulos */
  --color-acento: #8c8c8c;       /* barrita sobre "Bienvenido" (antes dorada) */
  --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sombra-fuerte: 0 0 12px rgba(0, 0, 0, 0.25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: "AvenirLight", Arial, sans-serif;
  overflow: hidden;
  /* Pantalla tactil: sin seleccion de texto, sin resaltado azul al tocar, sin zoom con doble toque */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

.icono {
  display: block;
  width: 100%;
  height: 100%;
}

/* Boton circular blanco con sombra (idioma, inicio) */
.boton-redondo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-fondo);
  box-shadow: var(--sombra-suave);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
}

.boton-redondo:hover,
.boton-redondo:active {
  transform: scale(1.05);
  box-shadow: var(--sombra-fuerte);
}