:root {
    --primary-color: #1877f2;
    --background-color-page: #f0f2f5;
    --background-color-container: #ffffff;
    --text-color-primary: #1c1e21;
    --text-color-secondary: #4b4f56;
    --text-color-tertiary: #606770;
    --border-color-light: #dddfe2;
    --border-color-input: #ccd0d5;
    --input-background-color: #f5f6f7;
    --hover-background-color: #e9ebee;

    --notification-success-bg: #e7f3ff;
    --notification-success-text: #1877f2;
    --notification-success-border: #b8d7f7;
    --notification-error-bg: #ffebe8;
    --notification-error-text: #c92a2a;
    --notification-error-border: #f5c6cb;
    --notification-warning-bg: #fff9db;
    --notification-warning-text: #e67700;
    --notification-warning-border: #ffe066;

    --move-category-physical-color: #d9534f;
    --move-category-special-color: #5bc0de;
    --move-category-status-color: #6c757d;

    --text-color-h2: #333;
    --border-color-divider: #eee;
    --primary-color-hover: #166fe5;
    --button-disabled-bg: #bec3c9;
    --danger-color: #fa3e3e;
    --danger-color-hover: #e03030;
    --text-color-separator: #888;
    --disabled-text-color: #a0a0a0;
    --disabled-bg-color: #f9f9f9;

    --spacing-unit: 8px;
    --spacing-xs: calc(var(--spacing-unit) * 0.5);  /* 4px */
    --spacing-sm: var(--spacing-unit);             /* 8px */
    --spacing-md: calc(var(--spacing-unit) * 1.5); /* 12px */
    --spacing-lg: calc(var(--spacing-unit) * 2);   /* 16px */
    --spacing-xl: calc(var(--spacing-unit) * 2.5); /* 20px */
    --spacing-xxl: calc(var(--spacing-unit) * 3);  /* 24px */

    --font-size-root: 16px;
    --font-size-base: 1rem; 
    --font-size-sm: 0.875rem; 
    --font-size-xs: 0.75rem;  
    --font-size-lg: 1.125rem; 
    --font-size-xl: 1.25rem;  
    --font-size-h1: 2rem;     
    --font-size-h2: 1.3rem; 
}

/* Clases de Utilidad */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.flex-grow-1 { flex-grow: 1; }
.text-center { text-align: center; }
.d-block { display: block; }
.font-bold { font-weight: bold; }
.font-semibold { font-weight: 600; }
/* Fin de Clases de Utilidad */

html {
    font-size: var(--font-size-root);
}

/* Aplicar box-sizing globalmente para un mejor control del layout */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    /* Añadir padding horizontal al body para evitar que el contenido toque los bordes en móviles */
    padding: 0 var(--spacing-md); /* 12px de padding a los lados */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.6;
    background-color: var(--background-color-page);
    color: var(--text-color-primary);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Estilos para el contenedor de estadísticas (Visitas y Usuarios Online) */
.stats-container {
    display: flex;
    justify-content: center; /* Centra los contadores en el pie de página */
    gap: var(--spacing-md); /* Espacio entre los contadores */
    padding: var(--spacing-sm) var(--spacing-lg); /* Padding superior/inferior y lateral */
    background-color: var(--background-color-container); /* Fondo blanco */
    border-top: 1px solid var(--border-color-light); /* Separador sutil en la parte superior */
    font-size: var(--font-size-sm); /* Tamaño de fuente más pequeño */
    color: var(--text-color-secondary); /* Color de texto secundario */
    margin-top: var(--spacing-md); /* Margen superior para separarlo del contenido del footer */
    margin-bottom: var(--spacing-md); /* Margen inferior para separarlo del texto de copyright */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil hacia arriba */
    max-width: fit-content; /* Ajustar el ancho al contenido */
    margin: var(--spacing-md) auto; /* Centrar el contenedor horizontalmente y ajustar márgenes */
}

.stats-container span {
    font-weight: 600; /* Texto seminegrita */
    padding: var(--spacing-xs) var(--spacing-sm); /* Padding dentro de cada contador */
    border-radius: 4px; /* Bordes redondeados para cada contador */
    background-color: var(--input-background-color); /* Fondo ligero para cada contador */
    color: var(--text-color-primary); /* Color de texto principal */
}
/* Eliminado: .stats-container span:first-child { margin-right: auto; } para que los contadores estén juntos a la derecha */