:root {
            --primary-color: #003b50;
            --secondary-color: #667eea;
            --accent-color: #764ba2;
            --cfe-color: #0066cc;
            --cfe-accent: #00a6ed;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: #f8f9fa;
            padding-top: 80px;
        }

        /* NAVEGACIÓN */
        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color) 0%, #005a7a 100%);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
            transition: all 0.3s ease;
        }

        .navbar-brand {
            font-size: 1.8rem;
            font-weight: 700;
            color: white !important;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover {
            transform: scale(1.05);
        }

        .logo-icon {
            width: 45px;
            height: 45px;
            background: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--primary-color);
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            margin: 0 10px;
            padding: 8px 16px !important;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: white;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-link:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white !important;
        }

        .nav-link:hover::after {
            width: 80%;
        }

        .dropdown-menu {
            background: white;
            border: none;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            border-radius: 12px;
            padding: 10px;
        }

        .dropdown-item {
            border-radius: 8px;
            padding: 10px 16px;
            transition: all 0.3s ease;
        }

        .dropdown-item:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: white;
            transform: translateX(5px);
        }

        /* SUB-NAVBAR */
        .sub-navbar {
            position: sticky;              /* Posición fija en la ventana */
            top: 4rem; /* 375 70px → puedes subirlo a 4.6875rem (75px) o 5rem (80px) si tu navbar es más alto */
            left: 0;                      /* Pegado al borde izquierdo */
            right: 0;                     /* Pegado al borde derecho (ancho completo) */
            background: linear-gradient(135deg, var(--cfe-color), var(--cfe-accent)); /* Gradiente azul CFE */
            box-shadow: 0 2px 15px rgba(0, 102, 204, 0.2); /* Sombra sutil con color CFE */
            z-index: 998;
            transition: transform 0.3s ease, opacity 0.3s ease; /* Transición suave al ocultar/mostrar */
            padding: 0.75rem 0; /* 12px */                  /* Sin padding adicional */
        }

        /* Clase para ocultar el sub-navbar al hacer scroll hacia abajo */
        .sub-navbar.hidden {
            transform: translateY(-100%); /* Desplaza hacia arriba fuera de vista */
            opacity: 0;                   /* Hace transparente el elemento */
        }

        /* Contenedor interno con flexbox para los enlaces */
        .sub-navbar-container {
            display: flex;                /* Flexbox para alinear enlaces horizontalmente */
            align-items: center;          /* Centra verticalmente los enlaces */
            padding: 0.75rem 0;          /* Espaciado vertical interno (arriba y abajo) */
            overflow-x: auto;             /* Permite scroll horizontal en pantallas pequeñas */
            scrollbar-width: thin;        /* Scrollbar delgada (Firefox) */
            scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Color del scrollbar (Firefox) */
        }

        /* Scrollbar para WebKit (Chrome / Edge / Safari) */
        .sub-navbar-container::-webkit-scrollbar {
            height: 4px;                  /* Altura del scrollbar horizontal */
        }

        /* Fondo del track del scrollbar */
        .sub-navbar-container::-webkit-scrollbar-track {
            background: transparent;      /* Fondo transparente */
        }

        /* Estilo del thumb (parte que se arrastra) del scrollbar */
        .sub-navbar-container::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3); /* Color semi-transparente blanco */
            border-radius: 2px;           /* Esquinas ligeramente redondeadas */
        }

        /* Estilo base de cada enlace */
         .sub-nav-link {
            color: white;                 /* Texto blanco */
            text-decoration: none;        /* Sin subrayado */
            padding: 0.5rem 1.25rem;     /* Espaciado interno (vertical y horizontal) */
            border-radius: 8px;           /* Esquinas redondeadas */
            font-size: 0.9rem;           /* Tamaño de fuente ligeramente menor */
            font-weight: 500;             /* Semi-negrita */
            white-space: nowrap;          /* Evita que el texto se divida en múltiples líneas */
            transition: all 0.3s ease;    /* Transición suave para todos los cambios */
            display: inline-flex;         /* Flexbox en línea para alinear icono y texto */
            align-items: center;          /* Centra verticalmente icono y texto */
            gap: 0.5rem;                 /* Espacio entre icono y texto */
            margin: 0 0.25rem;           /* Margen horizontal entre enlaces */
        }

        /* Hover: efecto al pasar el mouse */
        .sub-nav-link:hover {
            background: rgba(255, 255, 255, 0.2); /* Fondo blanco semi-transparente */
            color: white;                 /* Mantiene el texto blanco */
            transform: translateY(-2px);  /* Eleva ligeramente el enlace */
        }

        /* Estilo opcional para el enlace activo (por si lo quieres usar) */
       .sub-nav-link.active {
            background: rgba(255, 255, 255, 0.3); /* Fondo más opaco que el hover */
            font-weight: 600;             /* Negrita para destacar */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
            border-bottom: 0.1875rem solid white; /* 3px */
            padding-bottom: 0.25rem; /* 4px */
        }

       /* Estilo para los iconos dentro de los enlaces */
        .sub-nav-link i {
            font-size: 1rem;             /* Tamaño del icono */
        }


        /* CONTENEDORES */
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        .header-section {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: white;
            padding: 3rem 2rem;
            border-radius: 15px;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }

        .header-section h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .header-section p {
            font-size: 1.1rem;
            opacity: 0.95;
            line-height: 1.6;
        }

        /* TARJETAS */
        .normativa-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            border-left: 5px solid var(--secondary-color);
            transition: all 0.3s ease;
        }

        .normativa-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        .normativa-card h2 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .normativa-card h3 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-top: 1.5rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #e9ecef;
        }

        .normativa-card h4 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-top: 1.25rem;
            margin-bottom: 0.75rem;
        }

        .normativa-card p {
            color: #495057;
            line-height: 1.7;
            margin-bottom: 1rem;
        }

        .normativa-card ul {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }

        .normativa-card li {
            color: #495057;
            line-height: 1.7;
            margin-bottom: 0.5rem;
        }

        /* TABLAS */
        .tabla-cargas {
            width: 100%;
            margin: 1.5rem 0;
            border-collapse: collapse;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .tabla-cargas thead {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: white;
        }

        .tabla-cargas th {
            padding: 1rem;
            text-align: left;
            font-weight: 600;
        }

        .tabla-cargas td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e9ecef;
        }

        .tabla-cargas tbody tr:hover {
            background: #f8f9fa;
        }

        /* CAJAS DE INFORMACIÓN */
        .info-box {
            background: #e7f3ff;
            border-left: 4px solid #0066cc;
            padding: 1.25rem;
            margin: 1.5rem 0;
            border-radius: 8px;
        }

        .info-box h5 {
            color: #0066cc;
            font-weight: 600;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .warning-box {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 1.25rem;
            margin: 1.5rem 0;
            border-radius: 8px;
        }

        .warning-box h5 {
            color: #856404;
            font-weight: 600;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .success-box {
            background: #d4edda;
            border-left: 4px solid #28a745;
            padding: 1.25rem;
            margin: 1.5rem 0;
            border-radius: 8px;
        }

        .success-box h5 {
            color: #155724;
            font-weight: 600;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .formula-box {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            padding: 1.25rem;
            margin: 1.5rem 0;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
        }

        /* BOTONES */
        .btn-back {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            margin-bottom: 2rem;
        }

        .btn-back:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
            color: white;
        }

        /* EJERCICIOS INTERACTIVOS */
        .exercise-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            color: #155724;
        }

        .exercise-header h3 {
            margin: 0;
            padding: 0;
            font-weight: 600;
            color: #155724;
            border: none;
        }

        .exercise-header i {
            font-size: 1.5rem;
        }

        .input-group {
            margin-bottom: 1rem;
        }

        .input-group label {
            display: block;
            font-weight: 600;
            color: #155724;
            margin-bottom: 0.5rem;
        }

        .input-group input,
        .input-group select {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #28a745;
            border-radius: 8px;
            font-size: 1rem;
            background: #ffffff;
            transition: all 0.3s ease;
        }

        .input-group input:focus,
        .input-group select:focus {
            outline: none;
            border-color: #155724;
            box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
        }

        .btn-calculate {
            background: #28a745;
            color: white;
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-calculate:hover {
            background: #218838;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
        }

        .result-box {
            background: #ffffff;
            border: 2px solid #28a745;
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            display: none;
        }

        .result-box.show {
            display: block;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .result-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #28a745;
            margin: 1rem 0;
        }

        .result-box h4 {
            color: #155724;
            margin-bottom: 1rem;
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .header-section h1 {
                font-size: 1.8rem;
            }

            .normativa-card {
                padding: 1.5rem;
            }

            .tabla-cargas {
                font-size: 0.9rem;
            }

            .tabla-cargas th,
            .tabla-cargas td {
                padding: 0.5rem;
            }
        }

        .color-box{
            width: 150px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ddd ;
            border-radius: 5px;
        }
        .bg-green{
            background-color: #2ecc71;

        }
        .bg-blue{
            background-color: #3498db;
        }
        .bg-yellow{
            background-color: #f1c40f;
        }
        .bg-red{
            background-color: #e74c3c;
        }
        /* ESTILOS ADICIONALES PARA EJERCICIOS INTERACTIVOS */
        .exercise-container {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            padding: 2rem;
            margin: 2rem 0;
            border: 2px solid var(--secondary-color);
        }

        .exercise-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
        }

        .exercise-header i {
            font-size: 2rem;
            color: var(--secondary-color);
        }

        .exercise-header h3 {
            margin: 0;
            border: none;
            padding: 0;
        }

        .input-group {
            margin-bottom: 1rem;
        }

        .input-group label {
            display: block;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .input-group input,
        .input-group select {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .input-group input:focus,
        .input-group select:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .btn-calculate {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: white;
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-calculate:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .result-box {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: none;
        }

        .result-box.show {
            display: block;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .result-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--secondary-color);
            margin: 1rem 0;
        }