/**
 * Design tokens — valores extraidos del CSS original (calificacion.css)
 * para conservar la identidad visual del kiosco.
 */
:root {
	/* Paleta heredada */
	--color-primario: #006699;
	--color-primario-claro: #09C;
	--color-acento: #00CC99;          /* #0C9: seleccion activa */
	--color-acento-texto: #99FF66;    /* #9F6 */
	--color-boton: #5F87B6;
	--color-boton-hover: #4A6F9A;

	--color-superficie: #FFFFFF;
	--color-superficie-tenue: #F4F7FA;
	--color-borde: #D4DEE8;
	--color-texto: #1F2933;
	--color-texto-tenue: #52616B;
	--color-texto-inverso: #FFFFFF;

	--color-error: #C0392B;
	--color-exito: #1E8449;

	/* Tipografia */
	--fuente-base: Verdana, Geneva, "DejaVu Sans", sans-serif;
	--tamano-xs: 0.75rem;
	--tamano-sm: 0.875rem;
	--tamano-md: 1rem;
	--tamano-lg: 1.25rem;
	--tamano-xl: 1.5rem;
	--tamano-xxl: 2rem;

	/* Espaciado (escala de 4px) */
	--esp-1: 0.25rem;
	--esp-2: 0.5rem;
	--esp-3: 0.75rem;
	--esp-4: 1rem;
	--esp-6: 1.5rem;
	--esp-8: 2rem;
	--esp-12: 3rem;

	--radio-sm: 6px;
	--radio-md: 10px;
	--radio-lg: 15px;

	--sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
	--sombra-md: 0 4px 12px rgba(0, 0, 0, 0.15);
	--sombra-lg: 0 8px 28px rgba(0, 0, 0, 0.20);

	--ancho-contenido: 1100px;
	--transicion: 160ms ease-in-out;

	/* Area tactil minima para kiosco (WCAG 2.5.5) */
	--tactil-min: 44px;
}