/* Componentes reutilizables - Siguiendo principio de responsabilidad única */

/* ========================================
   BOTONES DE NAVEGACIÓN MÓVIL
   ======================================== */

/* Contenedor base para botones de navegación móvil */
.mobile-nav-button-container {
    position: absolute;
    top: var(--SPACE-MD);
    left: var(--SPACE-MD);
    z-index: 1000;
    display: none; /* Oculto por defecto, se muestra en móvil */
}

/* Botón base de navegación móvil */
.mobile-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--BORDER-RADIUS-MD);
    text-decoration: none;
    transition: var(--TRANSITION-NORMAL);
    box-shadow: var(--SHADOW-MD);
    backdrop-filter: blur(10px);
}

.mobile-nav-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
    box-shadow: var(--SHADOW-LG);
}

.mobile-nav-button svg {
    transition: var(--TRANSITION-NORMAL);
}

.mobile-nav-button:hover svg {
    transform: scale(1.1);
}

/* Media queries para mostrar solo en móvil */
@media (max-width: 768px) {
    .mobile-nav-button-container {
        display: block;
    }
}

/* ========================================
   CONTENEDORES DE PÁGINA BASE
   ======================================== */

/* Página base común */
.page-base {
    min-height: 100vh;
    background: var(--COLOR-1);
    display: flex;
    flex-direction: column;
    font-family: var(--FONT-FAMILY);
    padding: 0;
    margin: 0;
}

/* Contenedor principal centrado */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--SPACE-MD);
    margin: 0 auto;
    padding: var(--SPACE-XL) var(--SPACE-MD);
}

/* ========================================
   COMPONENTES DE FORMULARIO
   ======================================== */

/* Wrapper base para formularios */
.form-wrapper-base {
    background: #FFFFFF;
    border-radius: var(--BORDER-RADIUS-LG);
    box-shadow: var(--SHADOW-LG);
    padding: var(--SPACE-LG);
    width: 100%;
    max-width: 400px;
}

/* ========================================
   UTILIDADES DE TEXTO
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Títulos estandarizados */
.page-title {
    color: var(--COLOR-3);
    font-weight: 700;
    margin-bottom: calc(var(--SPACE-MD) * 2);
    text-align: center;
}

.section-title {
    color: var(--COLOR-2);
    font-weight: 600;
    margin-bottom: var(--SPACE-MD);
}

/* ========================================
   BOTÓN SVG DE VUELTA A INFORMACIÓN (GLOBAL)
   ======================================== */

/* Contenedor del botón SVG posicionado absolutamente */
.back-to-info-svg-container {
    position: absolute;
    left: 414px;
    top: 331px;
    width: 50px;
    height: 52px;
    aspect-ratio: 25/26;
    z-index: 10;
}

/* Enlace del botón SVG */
.back-to-info-link {
    display: block;
    width: 100%;
    height: 100%;
    transition: var(--TRANSITION-NORMAL);
}

.back-to-info-link:hover {
    transform: scale(1.05);
}

/* SVG del botón */
.back-to-info-svg {
    width: 50px;
    height: 52px;
    display: block;
    transition: var(--TRANSITION-NORMAL);
}

.back-to-info-link:hover .back-to-info-svg {
    filter: brightness(1.1);
}

/* Responsive - Ocultar en dispositivos móviles */
@media (max-width: 1024px) {
    .back-to-info-svg-container {
        display: none;
    }
}

/* ========================================
   UTILIDADES DE ESPACIADO
   ======================================== */

.mb-xs { margin-bottom: var(--SPACE-XS); }
.mb-sm { margin-bottom: var(--SPACE-SM); }
.mb-md { margin-bottom: var(--SPACE-MD); }
.mb-lg { margin-bottom: var(--SPACE-LG); }
.mb-xl { margin-bottom: var(--SPACE-XL); }

.mt-xs { margin-top: var(--SPACE-XS); }
.mt-sm { margin-top: var(--SPACE-SM); }
.mt-md { margin-top: var(--SPACE-MD); }
.mt-lg { margin-top: var(--SPACE-LG); }
.mt-xl { margin-top: var(--SPACE-XL); }

.p-xs { padding: var(--SPACE-XS); }
.p-sm { padding: var(--SPACE-SM); }
.p-md { padding: var(--SPACE-MD); }
.p-lg { padding: var(--SPACE-LG); }
.p-xl { padding: var(--SPACE-XL); }