/* =========================================
   VARIABLES CORPORATIVAS Y CONFIGURACIÓN GLOBAL
   ========================================= */
:root {
    --primary: #2C3E50;
    --secondary: #34495E;
    --accent: #F3C623;
    --accent-light: #FFB22C;
    --accent-dark: #FA812F;
    --background-light: #FEF3E2;
    --text-dark: #333333;
    --text-light: #f1faee;
    --gray: #7f8c8d;

}

body { 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
    position: relative;
    background-color: var(--background-light);
    color: var(--text-dark);
}   
    
/* Añadimos html aquí para evitar que se mueva en móviles */
html, body { 
    font-family: 'Inter', sans-serif; 
    overflow-x: clip; /* <-- CAMBIO CLAVE: usamos clip en lugar de hidden */
    width: 100%;
    position: relative;
    background-color: var(--background-light);
    color: var(--text-dark);
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; 
    background-image: url('../img/fondo_inter.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    opacity: 0.10; /* Reducido un poco para que el background-light resalte */
    z-index: -1;
    will-change: transform; 
}




/* =========================================
   UTILIDADES DE COLOR
   ========================================= */
.text-primary { color: var(--primary); }
.text-dark { color: var(--text-dark); }
.text-light { color: var(--text-light); }
.text-gray { color: var(--gray); }
.text-accent { color: var(--accent); }




/* =========================================
   TAMAÑOS DE LOGO
   ========================================= */
.sidebar-logo {
    width: 250px; /* Aumentado (antes era equivalente a 128px). Cambia este número a tu gusto */
    height: auto;
    max-width: 100%; /* Evita que se desborde del menú */
    display: block;
    margin: 0 auto; /* Centra el logo si es más pequeño que el contenedor */
}

.navbar-logo {
    width: 130px; /* Aumentado para la versión móvil (antes era 96px) */
    height: auto;
}





/* =========================================
   SIDEBAR Y NAVEGACIÓN
   ========================================= */
.sidebar-dark { 
    background-color: var(--primary); 
    color: var(--text-light);
    border-right: 3px solid var(--accent-dark); /* <--- Esta es la línea divisora amarilla */
}

.nav-item-active { 
    background-color: rgba(243, 198, 35, 0.10); /* Accent con opacidad */
    color: var(--accent-dark); 
    border-left: 4px solid var(--accent-dark);
    font-weight: 700;
}

.nav-item-hover {
    color: var(--text-light);
    opacity: 0.8;
}

.nav-item-hover:hover {
    background-color: var(--secondary);
    color: var(--accent-dark);
    opacity: 1;
    transform: translateX(4px);
}

#overlay.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(44, 62, 80, 0.6); /* Color primario con transparencia */
    z-index: 90;
    backdrop-filter: blur(2px);
}
#overlay.active { display: block; }




/* =========================================
   COMPONENTES UI Y TARJETAS
   ========================================= */
.hero-gradient { 
    background: linear-gradient(90deg, var(--primary) 30%, rgba(44, 62, 80, 0.1) 100%), 
                url('../img/fondo_1.png');
    background-size: cover;
    background-position: center 20px; 
    background-repeat: no-repeat;
    position: relative;
    margin-top: -20px; 
}

.section-title {
    color: var(--primary);
    border-left: 4px solid var(--accent);
}

/* Botones */
.btn-accent {
    background-color: var(--accent);
    color: var(--primary); /* Texto oscuro para legibilidad sobre amarillo/naranja */
    font-weight: 700;
}
.btn-accent:hover {
    background-color: var(--accent-light);
}

.btn-primary {
    background-color: var(--primary); /* El azul oscuro de tu empresa */
    color: var(--text-light); /* Texto blanco/claro */
}
.btn-primary:hover {
    background-color: var(--secondary); /* Cambia al azul un poco más claro al pasar el mouse */
    transform: translateY(-2px);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    font-weight: 700;
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--accent);
}

/* Tarjetas de Calculadoras */
.card-item {
    background-color: #ffffff;
    border: 1px solid rgba(127, 140, 141, 0.2); /* Borde gris suave */
}
.card-item:hover {
    border-color: var(--accent-light);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}
.card-item:hover h3 { color: var(--accent-dark); }
.icon-accent { color: var(--accent-dark); }

/* Tarjetas de Multimedia & Docs */
.media-card { border: 1px solid rgba(127, 140, 141, 0.2); }
.media-card:hover { 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
    transform: translateY(-8px); 
}

.doc-card { border: 1px solid rgba(127, 140, 141, 0.2); }
.doc-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
}

/* Resolución Especial */
.resolution-card { border: 1px solid rgba(127, 140, 141, 0.2); }
.resolution-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.08);
}
.resolution-card .icon-wrapper { background-color: var(--background-light); }
.resolution-card:hover .icon-wrapper { background-color: rgba(243, 198, 35, 0.15); }
.resolution-card:hover .icon-wrapper span { color: var(--accent-dark); }
.resolution-card:hover h4 { color: var(--accent-dark); }
.resolution-card:hover .arrow-icon { color: var(--accent); transform: translateX(8px); }

/* Footer Stats */
.stats-container { background-color: var(--primary); }




/* =========================================
   SISTEMA RESPONSIVO (MÓVIL)
   ========================================= */
@media (max-width: 1024px) {
    aside {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out;
        position: fixed !important;
        top: 0; left: 0; z-index: 200 !important;
        display: flex !important; 
        width: 280px; overflow-y: auto; height: 100vh;
    }
    
    /* Esta es la línea clave que hace funcionar el menú */
    aside.active { 
        transform: translateX(0) !important; 
    }
    
    main { 
        margin-left: 0 !important; 
        width: 100vw !important; 
        overflow-x: hidden; 
    }
    .mobile-menu-btn { display: flex !important; }
}







/* ===============================
   ELEMENTOS DE capacidad_eslingas
   =============================== */
/* =========================================
   ELEMENTOS DE FORMULARIO Y CALCULADORAS
   ========================================= */
.input-field {
    background-color: var(--background-light);
    border: 1px solid rgba(127, 140, 141, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.95rem;
    width: 100%;
    transition: all 0.2s;
    color: var(--primary);
}

.input-field:focus {
    background-color: #ffffff;
    border-color: var(--accent-dark);
    outline: none;
    box-shadow: 0 0 0 3px rgba(250, 129, 47, 0.1);
}

.select-unit {
    background-color: rgba(127, 140, 141, 0.1);
    border: 1px solid rgba(127, 140, 141, 0.3);
    border-radius: 8px;
    padding: 0 8px;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--primary);
    cursor: pointer;
    outline: none;
}

/* =========================================
   SIMULADOR 3D (CANVAS)
   ========================================= */
.sim-box {
    background-color: gray ; 
    border-radius: 24px;
    
    border: 4px solid var(--accent-dark) !important;
    
    min-height: 480px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
}

.sim-box canvas { 
    width: 100% !important; 
    height: auto !important; 
    max-width: 500px; 
}
/* =========================================
   CABECERA DE LAS CALCULADORAS (TÍTULOS)
   ========================================= */
main header {
    /* Fondo accent-dark (#FA812F) con 10% de opacidad */
    background-color: rgba(250, 129, 47, 0.1) !important; 
    
    /* Borde sutil usando el mismo color al 25% */
    border-color: rgba(250, 129, 47, 0.50) !important; 
}