/* =====================================================
REGLAMENTOS.CSS - PÁGINA DE REGLAMENTOS DEL JUEGO
Asociación de Dodgeball Jalisco
PROPÓSITO:
Estilos para la página que muestra el documento oficial
de reglamentos del juego de dodgeball embebido mediante
iframe. Incluye título, subtítulo y controles de navegación.
TABLA DE CONTENIDOS:
1. Contenido Principal
2. Contenedor de Reglamento
2.1. Estructura Base
2.2. Títulos y Headers
3. Iframe de Reglamento
3.1. Contenedor del Iframe
3.2. Iframe Principal
3.3. Dimensiones y Estilos
4. Contenedor de Botón
5. Responsive Design
===================================================== */
/* =====================================================
1. CONTENIDO PRINCIPAL
Ajuste del layout principal
===================================================== */
/* ----- Main Content ----- */
/*
* Ajuste del padding superior para evitar
* que el header sticky tape el contenido
* (Este valor se ajusta adicionalmente con fix-spacing.css)
*/
.main-content {
padding-top: 120px;
padding-bottom: 40px;
}
/* =====================================================
2. CONTENEDOR DE REGLAMENTO
Estructura principal de la página
===================================================== */
/* =====================================================
2.1. ESTRUCTURA BASE
Contenedor centrado con máximos
===================================================== */
/* ----- Contenedor Principal ----- */
/*
* Contenedor que envuelve todo el contenido
* Características:
* - Ancho completo con máximo de 1200px
* - Centrado horizontalmente con auto margins
* - Padding lateral de 20px
* - Alineación de texto al centro
*/
.reglamento-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
/* =====================================================
2.2. TÍTULOS Y HEADERS
Tipografía de encabezados
===================================================== */
/* ----- Título Principal (h1) ----- */
/*
* Título destacado de la página
* Ej: "REGLAMENTO OFICIAL"
*/
.reglamento-container h1 {
font-size: 2.2rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 10px;
text-align: center;
}
/* ----- Subtítulo (h3) ----- */
/*
* Subtítulo complementario
* Ej: "Reglas del Juego de Dodgeball"
*/
.reglamento-container h3 {
font-size: 1.5rem;
color: var(--dark);
margin-bottom: 25px;
font-weight: 600;
}
/* =====================================================
3. IFRAME DE REGLAMENTO
Documento embebido del reglamento
===================================================== */
/* =====================================================
3.1. CONTENEDOR DEL IFRAME
Wrapper con estilos visuales
===================================================== */
/* ----- Contenedor con Estilos ----- */
/*
* Contenedor que da estilo visual al iframe
* Incluye:
* - Ancho máximo de 800px (más estrecho que el contenedor)
* - Altura dinámica (70vh)
* - Borde y sombra para destacar
* - Esquinas redondeadas
* - Fondo blanco
*/
.reglamento-iframe-container {
width: 100%;
max-width: 800px;
height: 70vh;
min-height: 500px;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
margin: 20px auto;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* =====================================================
3.2. IFRAME PRINCIPAL
Elemento iframe embebido
===================================================== */
/* ----- Iframe del Documento ----- */
/*
* Iframe que muestra el documento PDF o HTML
* del reglamento oficial
*
* Características:
* - Ancho y alto completo del contenedor
* - Sin borde propio (heredado del contenedor)
* - Display block para evitar espacios inline
*/
.reglamento-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* =====================================================
3.3. DIMENSIONES Y ESTILOS
Configuración de tamaños
===================================================== */
/*
* ALTURA DINÁMICA:
* - Desktop: 70vh (70% del viewport)
* - Altura mínima: 500px
* - Tablet: 55vh (ajustado en media query)
* - Móvil: 55vh con mínimo de 350px
*
* ANCHO:
* - Siempre 100% del contenedor
* - Max-width: 800px (documento estilo papel)
* - En móvil: max-width: 100% (ancho completo)
*
* ESTILO VISUAL:
* - Borde gris claro (1px #ccc)
* - Esquinas redondeadas (8px)
* - Sombra suave (rgba(0,0,0,0.1))
* - Fondo blanco para contraste
*/
/* =====================================================
4. CONTENEDOR DE BOTÓN
Área de navegación y controles
===================================================== */
/* ----- Contenedor de Botón ----- */
/*
* Contenedor para botones de acción
* Ej: "Regresar", "Descargar PDF", etc.
*
* Características:
* - Ancho completo con máximo de 1200px
* - Margen superior de 30px
* - Padding lateral de 20px
* - Alineación centrada del texto
*
* Nota: En desktop podría estar alineado a la derecha,
* pero el CSS actual lo mantiene centrado para consistencia
*/
.button-container {
width: 100%;
max-width: 1200px;
margin: 30px auto 0;
padding: 0 20px;
text-align: center;
}
/*
* NOTA: Los estilos del botón (.btn) se heredan
* de styles.css - no se redefinen aquí
*
* Botones típicos usados:
* - .btn.btn-blue-primary: Botón azul principal
* - .btn.btn-secondary: Botón secundario (rojo)
* - .btn.btn-accent: Botón de acento (amarillo)
*/
/* =====================================================
5. RESPONSIVE DESIGN
Adaptaciones para diferentes tamaños de pantalla
===================================================== */
/* =====================================================
5.1. TABLETS Y MÓVILES (≤768px)
===================================================== */
@media (max-width: 768px) {
/* --- Contenedor de Reglamento --- */
/*
* Reducir padding lateral en tablets
* para aprovechar mejor el espacio horizontal
*/
.reglamento-container {
padding: 0 15px;
}
/* --- Contenedor del Iframe --- */
/*
* Ajustes para tablets:
* - Reducir altura a 55vh
* - Reducir altura mínima a 350px
* - Ancho completo (max-width: 100%)
*
* Estos cambios permiten:
* - Mejor uso del espacio vertical limitado
* - Aprovechamiento del ancho completo
* - Scroll más natural del documento
*/
.reglamento-iframe-container {
height: 55vh;
min-height: 350px;
max-width: 100%;
}
/* --- Contenedor de Botón --- */
/*
* Reducir padding lateral
* Mantener alineación centrada
*/
.button-container {
padding: 0 15px;
text-align: center;
}
/* --- Títulos --- */
/*
* Reducir tamaño de fuente en tablets
* para mejor legibilidad en pantallas pequeñas
*/
.reglamento-container h1 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.reglamento-container h3 {
font-size: 1.2rem;
}
}
/* =====================================================
NOTAS DE IMPLEMENTACIÓN
===================================================== */
/*
* ===== CARACTERÍSTICAS PRINCIPALES =====
*
* 1. DOCUMENTO EMBEBIDO
* - Soporte para PDF embebido
* - Soporte para Google Docs viewer
* - Soporte para contenido HTML
* - Scroll interno del documento
*
* 2. DISEÑO LIMPIO
* - Enfoque en el contenido (documento)
* - Estilo de "papel" con borde y sombra
* - Ancho optimizado para lectura (800px)
* - Fondo blanco para mejor legibilidad
*
* 3. RESPONSIVIDAD
* - Altura basada en viewport
* - Ancho completo en móviles
* - Alturas mínimas garantizadas
* - Ajustes de tipografía
*
* ===== ESTRUCTURA HTML ESPERADA =====
*
*
*
REGLAMENTO OFICIAL
*
Reglas del Juego de Dodgeball
*
*
*
*
*