:root {
            /* Colores principales de MathCivil */
            --primary-color: #003b50;      /* Azul oscuro para elementos principales */
            --secondary-color: #667eea;    /* Azul morado para acentos */
            --accent-color: #764ba2;       /* Morado para degradados */
            --cfe-color: #0066cc;          /* Azul CFE institucional */
            --cfe-accent: #00a6ed;         /* Azul claro CFE para degradados */
        }

        /* Reseteo de estilos por defecto del navegador */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;  /* Facilita el cálculo de dimensiones */
        }

        /* Configuración general del body de la página */
        body {
            font-family: 'Poppins', sans-serif;  /* Fuente principal */
            background: #f8f9fa;                  /* Fondo gris claro */
            padding-top: 6.25rem; /* 100px */
        }

        /* ========================================
           ESTILOS DE NAVEGACIÓN
           Barra superior fija con menú de navegación
        ======================================== */
        .navbar-custom {
            /* Gradiente de fondo atractivo de azul oscuro a medio */
            background: linear-gradient(135deg, var(--primary-color) 0%, #005a7a 100%);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  /* Sombra para profundidad */
            padding: 1rem 0;                             /* Espaciado interno vertical */
            transition: all 0.3s ease;                   /* Transición suave para cambios */
        }

        /* Logo y nombre de la marca en la navbar */
        .navbar-brand {
            font-size: 1.8rem;              /* Tamaño grande para destacar */
            font-weight: 700;               /* Negrita */
            color: white !important;        /* Color blanco forzado */
            display: flex;                  /* Flexbox para alinear logo e icono */
            align-items: center;            /* Centrado vertical */
            gap: 12px;                      /* Espacio entre icono y texto */
            transition: transform 0.3s ease; /* Transición para efecto hover */
        }

        /* Efecto de escala al pasar el mouse sobre el logo */
        .navbar-brand:hover {
            transform: scale(1.05);  /* Aumenta ligeramente el tamaño */
        }

        /* Contenedor del icono del logo con fondo blanco */
        .logo-icon {
            width: 45px;                 /* Ancho fijo */
            height: 45px;                /* Alto fijo (cuadrado) */
            background: white;           /* Fondo blanco para contraste */
            border-radius: 12px;         /* Esquinas redondeadas */
            display: flex;               /* Flexbox para centrar contenido */
            align-items: center;         /* Centrado vertical */
            justify-content: center;     /* Centrado horizontal */
            font-size: 24px;            /* Tamaño del icono interno */
            color: var(--primary-color); /* Color del icono */
        }

        /* Enlaces de navegación en la barra superior */
        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;  /* Blanco semi-transparente */
            font-weight: 500;                             /* Semi-negrita */
            margin: 0 10px;                               /* Margen horizontal entre enlaces */
            padding: 8px 16px !important;                 /* Espaciado interno */
            border-radius: 8px;                           /* Esquinas redondeadas */
            transition: all 0.3s ease;                    /* Transición suave */
            position: relative;                           /* Para posicionar el pseudo-elemento */
        }

        /* Línea animada debajo de los enlaces (pseudo-elemento) */
        .nav-link::after {
            content: '';                    /* Necesario para mostrar el pseudo-elemento */
            position: absolute;             /* Posicionamiento absoluto relativo al enlace */
            bottom: 0;                      /* Pegado al borde inferior */
            left: 50%;                      /* Centrado horizontalmente */
            width: 0;                       /* Ancho inicial cero (invisible) */
            height: 2px;                    /* Grosor de la línea */
            background: white;              /* Color blanco */
            transition: all 0.3s ease;      /* Transición suave para la animación */
            transform: translateX(-50%);    /* Centrado perfecto */
        }

        /* Efecto hover en enlaces de navegación */
        .nav-link:hover {
            background: rgba(255, 255, 255, 0.1);  /* Fondo semi-transparente */
            color: white !important;                /* Color blanco sólido */
        }

        /* Animación de la línea inferior al hacer hover */
        .nav-link:hover::after {
            width: 80%;  /* La línea crece hasta 80% del ancho del enlace */
        }

        /* Menú desplegable (dropdown) */
        .dropdown-menu {
            background: white;                              /* Fondo blanco */
            border: none;                                   /* Sin borde */
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);  /* Sombra pronunciada */
            border-radius: 12px;                           /* Esquinas redondeadas */
            padding: 10px;                                 /* Espaciado interno */
        }

        /* Items individuales del menú desplegable */
        .dropdown-item {
            border-radius: 8px;         /* Esquinas redondeadas */
            padding: 10px 16px;         /* Espaciado interno */
            transition: all 0.3s ease;  /* Transición suave */
        }

        /* Efecto hover en items del dropdown */
        .dropdown-item:hover {
            /* Gradiente atractivo al pasar el mouse */
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: white;               /* Texto blanco */
            transform: translateX(5px); /* Desplazamiento sutil a la derecha */
        }

        /* ========================================
           CONTENEDORES Y SECCIONES
           Estructura principal del contenido
        ======================================== */
        
        /* Contenedor principal que limita el ancho del contenido */
        .main-container {
            max-width: 1200px;      /* Ancho máximo para buena legibilidad */
            margin: 0 auto;         /* Centrado horizontal */
            padding: 2rem 1rem;     /* Espaciado interno */
        }

        /* Encabezado principal de la página con gradiente CFE */
        .header-section {
            /* Gradiente específico para CFE */
            background: linear-gradient(135deg, var(--cfe-color), var(--cfe-accent));
            color: white;                                      /* Texto blanco */
            padding: 3rem 2rem;                               /* Espaciado interno generoso */
            border-radius: 15px;                              /* Esquinas redondeadas */
            margin-bottom: 2rem;                              /* Separación inferior */
            box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);  /* Sombra con color CFE */
        }

        /* Título principal del header */
        .header-section h1 {
            font-size: 2.5rem;       /* Tamaño grande */
            font-weight: 700;        /* Negrita */
            margin-bottom: 1rem;     /* Separación inferior */
            display: flex;           /* Flexbox para alinear icono */
            align-items: center;     /* Centrado vertical */
            gap: 1rem;              /* Espacio entre icono y texto */
        }

        /* Párrafo descriptivo del header */
        .header-section p {
            font-size: 1.1rem;   /* Tamaño ligeramente mayor */
            opacity: 0.95;       /* Ligeramente transparente */
            line-height: 1.6;    /* Espaciado entre líneas para legibilidad */
        }

        /* ========================================
           TARJETAS DE CONTENIDO
           Contenedores para cada sección de normativa
        ======================================== */
        
        /* Tarjeta de normativa con efecto hover */
        .normativa-card {
            background: white;                            /* Fondo blanco */
            border-radius: 12px;                         /* Esquinas redondeadas */
            padding: 2rem;                               /* Espaciado interno */
            margin-bottom: 2rem;                         /* Separación entre tarjetas */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Sombra suave */
            border-left: 5px solid var(--cfe-color);    /* Barra lateral color CFE */
            transition: all 0.3s ease;                   /* Transición para hover */
        }

        /* Efecto de elevación al pasar el mouse sobre la tarjeta */
        .normativa-card:hover {
            transform: translateY(-5px);                  /* Mueve hacia arriba */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); /* Sombra más pronunciada */
        }

        /* Título principal (h2) dentro de las tarjetas */
        .normativa-card h2 {
            font-size: 1.8rem;              /* Tamaño grande */
            font-weight: 600;               /* Semi-negrita */
            color: var(--primary-color);    /* Color azul oscuro */
            margin-bottom: 1rem;            /* Separación inferior */
            display: flex;                  /* Flexbox para icono */
            align-items: center;            /* Centrado vertical */
            gap: 0.75rem;                  /* Espacio entre icono y texto */
        }

        /* Subtítulo (h3) dentro de las tarjetas */
        .normativa-card h3 {
            font-size: 1.3rem;                      /* Tamaño medio */
            font-weight: 600;                       /* Semi-negrita */
            color: var(--cfe-color);                /* Color CFE */
            margin-top: 1.5rem;                     /* Separación superior */
            margin-bottom: 1rem;                    /* Separación inferior */
            padding-bottom: 0.5rem;                 /* Espaciado interno inferior */
            border-bottom: 2px solid #e9ecef;       /* Línea inferior decorativa */
        }

        /* Subtítulo menor (h4) dentro de las tarjetas */
        .normativa-card h4 {
            font-size: 1.1rem;              /* Tamaño pequeño */
            font-weight: 600;               /* Semi-negrita */
            color: var(--primary-color);    /* Color azul oscuro */
            margin-top: 1.25rem;            /* Separación superior */
            margin-bottom: 0.75rem;         /* Separación inferior */
        }

        /* Párrafos dentro de las tarjetas */
        .normativa-card p {
            color: #495057;       /* Gris oscuro para buen contraste */
            line-height: 1.7;     /* Espaciado entre líneas */
            margin-bottom: 1rem;  /* Separación entre párrafos */
        }

        /* Listas no ordenadas dentro de las tarjetas */
        .normativa-card ul {
            margin-left: 1.5rem;  /* Indentación */
            margin-bottom: 1rem;  /* Separación inferior */
        }

        /* Items de lista dentro de las tarjetas */
        .normativa-card li {
            color: #495057;       /* Mismo color que párrafos */
            line-height: 1.7;     /* Espaciado entre líneas */
            margin-bottom: 0.5rem; /* Separación entre items */
        }

        /* ========================================
           TABLAS
           Tablas para mostrar datos técnicos
        ======================================== */
        
        /* Tabla de cargas y datos técnicos */
        .tabla-cargas {
            width: 100%;                                /* Ancho completo del contenedor */
            margin: 1.5rem 0;                          /* Margen vertical */
            border-collapse: collapse;                  /* Elimina espacio entre celdas */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
        }

        /* Encabezado de la tabla con gradiente CFE */
        .tabla-cargas thead {
            background: linear-gradient(135deg, var(--cfe-color), var(--cfe-accent));
            color: white;  /* Texto blanco */
        }

        /* Celdas de encabezado (th) */
        .tabla-cargas th {
            padding: 1rem;      /* Espaciado interno */
            text-align: left;   /* Alineación izquierda */
            font-weight: 600;   /* Semi-negrita */
        }

        /* Celdas de datos (td) */
        .tabla-cargas td {
            padding: 0.75rem 1rem;              /* Espaciado interno */
            border-bottom: 1px solid #e9ecef;   /* Línea separadora inferior */
        }

        /* Efecto hover en filas de la tabla */
        .tabla-cargas tbody tr:hover {
            background: #f8f9fa;  /* Fondo gris claro al pasar el mouse */
        }

        /* ========================================
           CAJAS DE INFORMACIÓN
           Cajas de colores para destacar información
        ======================================== */
        
        /* Caja de información general (azul) */
        .info-box {
            background: #e7f3ff;            /* Fondo azul muy claro */
            border-left: 4px solid #0066cc; /* Barra lateral azul */
            padding: 1.25rem;               /* Espaciado interno */
            margin: 1.5rem 0;              /* Margen vertical */
            border-radius: 8px;             /* Esquinas redondeadas */
        }

        /* Título de la caja de información */
        .info-box h5 {
            color: #0066cc;         /* Azul */
            font-weight: 600;       /* Semi-negrita */
            margin-bottom: 0.75rem; /* Separación inferior */
            display: flex;          /* Flexbox para icono */
            align-items: center;    /* Centrado vertical */
            gap: 0.5rem;           /* Espacio entre icono y texto */
        }

        /* Caja de advertencia (amarillo) */
        .warning-box {
            background: #fff3cd;             /* Fondo amarillo claro */
            border-left: 4px solid #ffc107;  /* Barra lateral amarilla */
            padding: 1.25rem;                /* Espaciado interno */
            margin: 1.5rem 0;               /* Margen vertical */
            border-radius: 8px;              /* Esquinas redondeadas */
        }

        /* Título de la caja de advertencia */
        .warning-box h5 {
            color: #856404;         /* Marrón amarillento */
            font-weight: 600;       /* Semi-negrita */
            margin-bottom: 0.75rem; /* Separación inferior */
            display: flex;          /* Flexbox para icono */
            align-items: center;    /* Centrado vertical */
            gap: 0.5rem;           /* Espacio entre icono y texto */
        }

        /* Caja de éxito (verde) */
        .success-box {
            background: #d4edda;             /* Fondo verde claro */
            border-left: 4px solid #28a745;  /* Barra lateral verde */
            padding: 1.25rem;                /* Espaciado interno */
            margin: 1.5rem 0;               /* Margen vertical */
            border-radius: 8px;              /* Esquinas redondeadas */
        }

        /* Título de la caja de éxito */
        .success-box h5 {
            color: #155724;         /* Verde oscuro */
            font-weight: 600;       /* Semi-negrita */
            margin-bottom: 0.75rem; /* Separación inferior */
            display: flex;          /* Flexbox para icono */
            align-items: center;    /* Centrado vertical */
            gap: 0.5rem;           /* Espacio entre icono y texto */
        }

        /* Caja para fórmulas matemáticas (gris) */
        .formula-box {
            background: #f8f9fa;                  /* Fondo gris claro */
            border: 2px solid #dee2e6;            /* Borde gris */
            padding: 1.25rem;                     /* Espaciado interno */
            margin: 1.5rem 0;                    /* Margen vertical */
            border-radius: 8px;                   /* Esquinas redondeadas */
            font-family: 'Courier New', monospace; /* Fuente monoespaciada para código */
        }

        /* Caja de peligro/error (rojo) */
        .danger-box {
            background: #f8d7da;             /* Fondo rojo claro */
            border-left: 4px solid #dc3545;  /* Barra lateral roja */
            padding: 1.25rem;                /* Espaciado interno */
            margin: 1.5rem 0;               /* Margen vertical */
            border-radius: 8px;              /* Esquinas redondeadas */
        }

        /* Título de la caja de peligro */
        .danger-box h5 {
            color: #721c24;         /* Rojo oscuro */
            font-weight: 600;       /* Semi-negrita */
            margin-bottom: 0.75rem; /* Separación inferior */
            display: flex;          /* Flexbox para icono */
            align-items: center;    /* Centrado vertical */
            gap: 0.5rem;           /* Espacio entre icono y texto */
        }

        /* ========================================
           BOTONES
           Estilos para botones de acción
        ======================================== */
        
        /* Botón de regreso con gradiente CFE */
        .btn-back {
            /* Gradiente CFE */
            background: linear-gradient(135deg, var(--cfe-color), var(--cfe-accent));
            color: white;               /* Texto blanco */
            border: none;               /* Sin borde */
            padding: 0.75rem 1.5rem;    /* Espaciado interno */
            border-radius: 8px;         /* Esquinas redondeadas */
            font-weight: 500;           /* Semi-negrita */
            text-decoration: none;      /* Sin subrayado */
            display: inline-flex;       /* Flexbox en línea */
            align-items: center;        /* Centrado vertical */
            gap: 0.5rem;               /* Espacio entre icono y texto */
            transition: all 0.3s ease;  /* Transición suave */
            margin-bottom: 2rem;        /* Separación inferior */
        }

        /* Efecto hover del botón de regreso */
        .btn-back:hover {
            transform: translateY(-2px);                 /* Mueve hacia arriba */
            box-shadow: 0 5px 15px rgba(0, 102, 204, 0.4); /* Sombra CFE */
            color: white;                                 /* Mantiene texto blanco */
        }

        /* ========================================
           SUB-NAVBAR (NAVEGACIÓN SECUNDARIA)
           Barra de navegación fija debajo del navbar principal
           Se oculta/muestra dinámicamente con el scroll
        ======================================== */

        /* Contenedor principal del sub-navbar */
        .sub-navbar {
            position: sticky;              /* Posición fija en la ventana */
            top: 4.375rem; /* 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) */
        }

        /* Estilo del scrollbar para navegadores Webkit (Chrome, Safari, Edge) */
        .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 para cada enlace de navegación dentro del sub-navbar */
        .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 */
        }

        /* Efecto hover al pasar el mouse sobre un enlace */
        .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 para el enlace activo (sección actual visible) */
        .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 */
        }

        /* ========================================
           AJUSTES RESPONSIVE PARA MÓVILES
        ======================================== */

        @media (max-width: 768px) {
            /* Ajusta el padding superior del body en pantallas pequeñas */
            body {
                padding-top: 130px;       /* Espacio para navbar + sub-navbar en móvil */
            }

            /* Reposiciona el sub-navbar más arriba (navbar principal es más pequeño) */
            .sub-navbar {
                top: 70px;                /* Ajustado para navbar móvil más compacto */
            }

            /* Reduce el tamaño de los enlaces en móviles */
            .sub-nav-link {
                font-size: 0.85rem;      /* Fuente más pequeña */
                padding: 0.4rem 1rem;    /* Padding reducido */
            }

            /* Ajusta el scroll-margin de las tarjetas para móviles */
            .normativa-card {
                scroll-margin-top: 140px; /* Espacio para ambos navbars en móvil */
            }
        }

        /* ========================================
           RESPONSIVE DESIGN
           Ajustes para dispositivos móviles
        ======================================== */
        
        /* Media query para pantallas menores a 768px (tablets y móviles) */
        @media (max-width: 768px) {
            /* Reduce tamaño del título principal en móviles */
            .header-section h1 {
                font-size: 1.8rem;
            }

            /* Reduce padding de tarjetas en móviles */
            .normativa-card {
                padding: 1.5rem;
            }

            /* Reduce tamaño de fuente en tablas para móviles */
            .tabla-cargas {
                font-size: 0.9rem;
            }

            /* Reduce padding de celdas de tabla en móviles */
            .tabla-cargas th,
            .tabla-cargas td {
                padding: 0.5rem;
            }
        }
        .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;
            }
        }

        .main-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .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);
        }

        .normativa-card h2 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            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;
        }

        .success-box {
            background: #d4edda;
            border-left: 4px solid var(--success-color);
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: 8px;
        }

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

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

        .exercise-header h3 {
            margin: 0;
            padding: 0;
            font-weight: 600;
            color: var(--success-dark);
            border: none;
            font-size: 1.3rem;
        }

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

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

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

        .input-group input,
        .input-group select {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid var(--success-color);
            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: var(--success-dark);
            box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
        }

        .input-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .btn-calculate {
            background: var(--success-color);
            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;
            font-size: 1rem;
        }

        .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 var(--success-color);
            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-box h4 {
            color: var(--success-dark);
            margin-bottom: 1rem;
            font-size: 1.2rem;
            border-bottom: 2px solid var(--success-color);
            padding-bottom: 0.5rem;
        }

        .result-item {
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            background: #f8f9fa;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .result-item strong {
            color: #333;
        }

        .result-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--success-color);
            margin: 1rem 0;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
            text-align: center;
        }

        .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;
        }

        .info-box ul {
            margin-left: 1.5rem;
            margin-bottom: 0;
        }

        .info-box li {
            color: #495057;
            line-height: 1.7;
            margin-bottom: 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;
        }

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

        .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;
        }

        @media (max-width: 768px) {
            body {
                padding: 1rem 0.5rem;
            }

            .normativa-card {
                padding: 1.5rem;
            }

            .normativa-card h2 {
                font-size: 1.5rem;
            }

            .input-grid {
                grid-template-columns: 1fr;
            }

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

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