/* variables.css */

/* Importar Google Readex Pro desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500&display=swap');

/* Variables CSS para colores y configuración global */
:root {
    /* Colores Modo Claro (Por defecto) */
    --bg-color: #f1f4f8;
    --container-bg: #ffffff;
    --text-color: #14181b;
    --btn-bg-light: #8a2df8;
    --btn-text: #ffffff;
	
	/* Variables para el QR - cambian según el tema */
	--qr-fill: #000000;
    --qr-bg: #ffffff;
    
    /* Configuración de Fuente Global */
    --font-main: 'Readex Pro', sans-serif;
    --font-mono: 'Readex Pro', monospace; /* Nota: Readex es sans-serif, pero se usa como monospace en tu código original */
}

/* ============================================
   REGLAS PARA EVITAR AUTO-ZOOM EN MÓVILES
   ============================================ */

html {
    width: 100%;
    overflow-x: hidden; /* Evita scroll horizontal que fuerza el zoom */
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    width: 100%;
    /*overflow-x: hidden; /* Evita scroll horizontal que fuerza el zoom */
    box-sizing: border-box;
}

/* ============================================
   TÍTULOS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    font-family: var(--font-main);
    margin-top: 0;
}

h1 {
    font-size: 16px;
    font-weight: bold;
    max-width: 500px;
}

h2 {
    font-size: 16px;
    font-weight: bold;
    max-width: 500px;
    align-self: flex-start;    /* ¡La clave! Anula el 'align-items: center' del padre */    
    justify-content: flex-start; /* Opcional: Si el texto se ve centrado horizontalmente, añade esto también */
	margin-bottom: 0;
}


/* ============================================
   PÁRRAFOS
   ============================================ */
/* Texto y lista juntos en un bloque */
.bloque-texto {
    align-self: flex-start;
    text-align: left;  /* o justify dentro si quieres */
}

p {
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
}

.justificado {
    text-align: justify;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
	align-self: flex-start;    /* ¡La clave! Anula el 'align-items: center' del padre */ 
}

}

/* ============================================
   LISTAS
   ============================================ */
.bloque-texto ul {
    margin: 0;
    padding-left: 2em;  /* sangría del punto */
    padding-right: 2.5em; /* igual que la izquierda */
    list-style-position: outside;
}
   
.enlace-bold {
    font-weight: bold;
    color: var(--btn-bg-light);
    text-decoration: none; /* opcional: elimina el subrayado */
}

.enlace-bold:hover {
    text-decoration: underline; /* opcional: efecto al pasar el mouse */
}

/* ============================================
   BOTONES BASE (ESTILO GENÉRICO)
   ============================================ */

button {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}


/* ============================================
   MEDIA QUERY PARA MODO OSCURO
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1d2628;
        --container-bg: #2a3438;
        --text-color: #ffffff;
        --qr-fill: #ffffff;
        --qr-bg: #000000;
		--btn-bg-dark: #cfaef6;
    }	
}