/* Remove @import for Google Fonts - Moved to HTML */
/* @import url('https://fonts.googleapis.com/css2?family=Borel&display=swap'); */

/* ============================= */
/*    Variables de Colores       */
/*    y Fuentes                  */
/* ============================= */
:root {
    /* Paleta principal */
    --color-naranja: #E68C03; /* Botones y acentos principales */
    --color-azul: #08576C;    /* Acentos alternativos / fill */
    --color-rojo: #D93120;    /* Acciones de eliminar o énfasis */
    --color-beige: #F6EBD9;   /* Color de texto principal sobre oscuro */
    
    /* Estilo Dark */
    --color-fondo: #000000;   /* Fondo general */
    --color-barra: #1C1C1E;   /* Barra superior y contenedores oscuros */
    --color-seccion: #2C2C2E; /* Secciones intermedias */
    --color-texto: var(--color-beige); /* Texto principal */
    --color-texto-secundario: #d4cbb9;  /* Texto secundario (un tono más tenue) */
    --color-borde: #38383A;   /* Bordes oscuros */
    --color-shadow: rgba(0, 0, 0, 0.3);

    /* Botones (naranja principal) */
    --color-boton: #E68C03;
    --color-boton-texto: #000000; /* Changed from white for better contrast */
    --color-boton-hover: #cc7a03;  /* Un tono más oscuro del naranja */
    --color-boton-activo: #a96802; /* Aún más oscuro para el click */

    --color-rojo: #D93120;
    --color-rojo-texto: #000000; /* Changed from white for better contrast */
    --color-rojo-hover: #b52b27; /* Darker red for hover */
    --color-rojo-activo: #a62416; /* Even darker red for active */

    --color-verde-excel: #155230; /* Darker green for better contrast */
    --color-verde-excel-texto: #FFFFFF;
    --color-verde-excel-hover: #114125;
    --color-verde-excel-activo: #0d311c;

    /* Acentos en texto o rellenos */
    --color-acento-texto: var(--color-rojo);
    --color-acento-fill: var(--color-azul);

    /* Fuentes principales para títulos y texto */
    --font-family-titulo: -apple-system, BlinkMacSystemFont, 
                          "SF Pro Display", "SF Pro Text", 
                          "SF Compact", "SF Mono", "New York", 
                          sans-serif;
    --font-family-texto: -apple-system, BlinkMacSystemFont, 
                         "SF Pro Display", "SF Pro Text", 
                         "SF Compact", "SF Mono", "New York",
                         sans-serif;
    --font-family-symbols: "SF Symbols", -apple-system, BlinkMacSystemFont, 
                           "SF Pro Display", "SF Pro Text",
                           "SF Compact", "SF Mono", "New York",
                           sans-serif;
}

/* ============================= */
/*      Reset básico             */
/* ============================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================= */
/*  Tipografía y colores base    */
/* ============================= */
body {
    font-family: var(--font-family-texto);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6, .titulo, .guia-title, .categoria-title {
    font-family: var(--font-family-titulo);
}

/* ============================= */
/*         Barra Superior        */
/* ============================= */
.top-bar {
    background-color: #1C1C1E;
    color: #F6EBD9;
    display: flex;
    align-items: center;
    padding: 5px 15px;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #38383A;
}

.top-bar-content {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-frame {
    background-color: #F6EBD9;
    border: 2px solid black;
    border-radius: 8px;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.balma-logo {
    width: 30px;
    display: block;
    height: auto;
    padding-bottom: 0px;
}

/* Ensure the inicio button within the top bar uses the correct text color */
.top-bar .inicio-button {
    color: var(--color-texto); /* Explicitly set color for specificity */
}

/* Explicitly style the button when it's enabled */
.inicio-button:not(:disabled) {
    color: var(--color-texto); /* Ensure cream color when enabled */
    cursor: pointer;
}

/* Style for when the Inicio section is active (optional but good practice) */
.inicio-button.active {
    /* background-color: var(--color-boton-hover); /* Example: subtle background */
    border-color: var(--color-texto); /* Example: highlight border */
    color: var(--color-texto); /* Ensure text color remains */
}

.inicio-button {
    background-color: transparent;
    /* color: var(--color-texto); /* Base color is now set more specifically above */
    border: 1px solid var(--color-borde);
    padding: 6px 12px;
    border-radius: 6px;
    /* cursor: pointer; /* Moved to :not(:disabled) */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    margin-left: 15px;
    /* cursor: pointer; /* Asegura el cursor correcto en estado normal */ /* Moved */
}

.inicio-button i {
    font-size: 1rem;
    /* Icon color inherits */
}

.inicio-button:hover:not(:disabled) { /* Apply hover only if not disabled */
    background-color: var(--color-boton-hover); /* Use button hover color */
    border-color: var(--color-boton);
    color: var(--color-texto);
    cursor: pointer; /* Asegura el cursor correcto en estado hover */
}

.inicio-button:active {
    background-color: var(--color-activo);
    transform: scale(0.98);
}

.experiment-label {
    display: inline-flex;
    align-items: center;
    margin-left: 1px;
    line-height: 1;
    font-size: 0.9rem;
    color: #E8E8E8;
    padding: 2px 2px;
    height: auto !important;
}

.cruce-capital {
    background-color: #e1f5fe;
    font-weight: bold;
}

/* Contenedor para centrar la barra de navegación */
.navbar-container {
    display: flex;
    justify-content: center;
    padding: 0 320px;
}

.navbar {
    display: flex;
    align-items: center;
}

.nav-tabs {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-texto-secundario);
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-family: var(--font-family-texto);
}

.nav-tab i {
    font-size: 20px;
    margin-bottom: 5px;
    margin-right: 0;
}

.nav-tab.active {
    color: var(--color-texto);
    border-bottom: 2px solid var(--color-texto);
}

/* ============================= */
/* Mensaje de bienvenida         */
/* ============================= */
.welcome-message {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 25px;
    color: #8A8A8D;
    line-height: 1.6;
    letter-spacing: 0.5px;
    font-family: var(--font-family-texto);
}

.highlight-letter {
    color: var(--color-boton);
    font-weight: bold;
    font-size: 1.4em;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================= */
/* Descripción de la app         */
/* ============================= */
.app-description {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 25px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
    font-family: var(--font-family-texto);
}

.nota-advertencia {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
    text-align: center;
    margin-top: 20px;
    line-height: 1.4;
    font-family: var(--font-family-texto);
}

/* Checkbox y enlace de Política de Privacidad */
.privacy-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    text-align: left;
}

.privacy-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.privacy-consent label {
    cursor: pointer;
}

.privacy-consent a {
    color: var(--color-boton);
    text-decoration: underline;
}

.privacy-consent a:hover {
    color: #ff9e1e;
}

/* ============================= */
/*   Barra de navegación sec.    */
/* ============================= */
#secondary-nav {
    background-color: #242427;
    display: flex;
    justify-content: center;
    padding: 5px 0;
    gap: 10px;
    position: fixed;
    width: 100%;
    top: calc(80px);
    z-index: 999;
    transition: all 0.3s ease;
}

#secondary-nav .nav-tab {
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    font-family: var(--font-family-texto);
}

#secondary-nav .nav-tab.active {
    color: var(--color-texto);
    border-bottom: 2px solid var(--color-texto);
}

/* Clase para personalizar el pop-up de SweetAlert */
.swal-custom-smaller {
    background-color: var(--color-barra) !important;
    color: var(--color-texto) !important;
    font-family: var(--font-family-texto) !important;
    max-width: 600px !important;
    width: 90% !important;
    box-shadow: 0 4px 20px var(--color-shadow) !important;
    border: 1px solid var(--color-borde) !important;
    border-radius: 10px !important;
}
  
.swal-custom-smaller .swal2-html-container {
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
    color: var(--color-texto) !important;
}

.swal-custom-smaller .swal2-title {
    font-family: var(--font-family-titulo) !important;
    font-size: 1.3rem !important;
    margin-bottom: 1rem !important;
    color: var(--color-texto) !important;
}

.swal-custom-smaller .swal2-icon {
    border-color: var(--color-boton) !important;
    color: var(--color-boton) !important;
}

.swal2-confirm {
    font-family: var(--font-family-texto) !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
}

/* ============================= */
/*     Contenido principal       */
/* ============================= */
main {
    flex: 1;
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
    transition: padding-top 0.3s ease;
}

.section {
    display: none;
}
.section.active {
    display: block;
}

.subsection {
    display: none;
}
.subsection.active {
    display: block;
}

.section-container {
    background-color: var(--color-seccion);
    padding: 5px;
    margin-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px var(--color-shadow);
    animation: fadeInUp 0.5s ease-out;
}

.section-container h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-texto);
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 15px;
    font-family: var(--font-family-titulo);
}

.section-container h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--color-texto);
    font-family: var(--font-family-titulo);
}

/* ============================= */
/*         Formulario            */
/* ============================= */
form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(10px);
    animation: slideIn 0.5s forwards;
}

.form-group:nth-child(odd) {
    animation-delay: 0.2s;
}
.form-group:nth-child(even) {
    animation-delay: 0.4s;
}

.form-group label {
    font-size: 1.0rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-texto-secundario);
    font-family: var(--font-family-texto);
}

.form-group input,
.form-group select {
    padding: 12px 10px;
    border: 1px solid var(--color-borde);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-texto);
    appearance: none;
    font-family: var(--font-family-texto);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-boton);
    box-shadow: 0 0 0 3px rgba(230, 140, 3, 0.3);
}

.form-group select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFFFFF" d="M7 10L1 4h12z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px;
}

.mensaje {
    margin-top: 10px;
    font-size: 0.9rem;
    font-family: var(--font-family-texto);
}

.btn-recuperar {
    background-color: var(--color-boton);
    color: white;
    padding: 12px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s;
    font-family: var(--font-family-texto);
}

.btn-recuperar:hover {
    background-color: var(--color-boton-hover);
}

.olvido-contrasena {
    margin-top: 10px;
    text-align: center;
}

.olvido-contrasena a {
    color: var(--color-boton);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    font-family: var(--font-family-texto);
}

.olvido-contrasena a:hover {
    color: var(--color-boton-hover);
}

.auth-container {
    text-align: center;
    padding: 30px;
    background: linear-gradient(145deg, var(--color-seccion), var(--color-barra));
    border-radius: 15px;
    width: 350px;
    margin: 100px auto;
    box-shadow: 0 4px 12px var(--color-shadow);
    animation: fadeIn 0.8s ease-out;
    border: 1px solid var(--color-borde);
}

.auth-container h2 {
    font-size: 2rem;
    font-family: var(--font-family-titulo);
    color: var(--color-texto);
    margin-bottom: 25px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

input[type="range"] {
    width: 100%;
    margin-top: 5px;
}

/* Botón Google */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF; 
    border: none;
    border-radius: 25px;
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-family: var(--font-family-texto);
}

.btn-google:hover {
    background-color: #f7f7f7;
    transform: scale(1.03);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.google-logo {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

/* Botón Continuar */
.btn-continuar {
    margin-top: 10px;
    background-color: var(--color-boton);
    color: #FFFFFF;
    border: 1px solid var(--color-boton);
    transition: all 0.3s ease;
}

.btn-continuar:hover {
    background-color: var(--color-boton-hover);
    transform: scale(1.03);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

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

/* ============================= */
/*        Inputs especiales      */
/* ============================= */
.input-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.input-group input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid var(--color-borde);
    font-size: 1rem;
    background-color: #2C2C2C;
    color: var(--color-texto);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    font-family: var(--font-family-texto);
}

.input-group input:focus {
    outline: none;
    border-color: #E0E0E0;
    box-shadow: 0 0 0 3px rgba(224, 224, 224, 0.2);
    transform: scale(1.02);
}

.input-group select {
    width: 60px;
    padding: 14px 20px;
    border: 1px solid var(--color-borde);
    background-color: #2C2C2C;
    color: var(--color-texto);
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path fill="%23E0E0E0" d="M4 6l4 4 4-4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    font-family: var(--font-family-texto);
}

.input-group select:focus {
    outline: none;
    border-color: #E0E0E0;
    box-shadow: 0 0 0 3px rgba(224, 224, 224, 0.2);
    transform: scale(1.02);
}

.calculated-value {
    font-size: 1rem;
    color: var(--color-texto-secundario);
    min-width: 80px;
    text-align: right;
    transition: color 0.3s ease;
    font-family: var(--font-family-texto);
}

.input-group:hover .calculated-value {
    color: var(--color-texto);
}

.input-error {
    border: 2px solid #e74c3c;
    background-color: #fce4e4;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================= */
/*    Sección de Totales, etc.   */
/* ============================= */
.input-with-calculation {
    display: flex;
    align-items: center;
    position: relative;
}

.input-with-calculation span {
    font-weight: bold;
    color: var(--color-texto);
}

.description {
    margin-top: 5px;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    font-family: var(--font-family-texto);
}

.total-inicial {
    margin-top: 35px;
    font-size: 1.5rem;
    text-align: right;
    color: var(--color-texto);
    padding-top: 25px;
    border-top: 1px solid var(--color-borde);
    transition: color 0.3s ease;
    font-family: var(--font-family-texto);
}

.total-inicial:hover {
    color: #FFFFFF;
}

/* ============================= */
/*   Resumen Financiero Cards    */
/* ============================= */
.resumen-content {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.resumen-card {
    background-color: var(--color-barra);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resumen-icon {
    font-size: 1.8rem;
    color: var(--color-boton);
    flex-shrink: 0;
}

.resumen-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.resumen-card p {
    font-size: 1.1rem;
    color: var(--color-texto);
    margin: 0;
    font-family: var(--font-family-texto);
}

.resumen-card strong {
    font-weight: bold;
    color: #FFFFFF;
    font-family: var(--font-family-texto);
}

/* ============================= */
/*   Botones y acciones comunes  */
/* ============================= */
.button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

button, .btn, .btn-login {
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: var(--color-boton-texto); /* Use variable for button text color */
    background-color: var(--color-boton); /* Use variable */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--font-family-texto);
}

button:hover, .btn:hover, .btn-login:hover {
    background-color: var(--color-boton-hover);
    transform: translateY(-2px);
}

button:active, .btn:active, .btn-login:active {
    background-color: var(--color-boton-activo);
    transform: translateY(0);
}

#user-button {
    position: absolute;
    top: 18px;
    right: 18px;
    background-color: transparent;
    color: var(--color-texto);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

#user-button:hover {
    color: var(--color-boton-hover);
}

#user-button i {
    font-size: 1.5rem;
}

.btn-exportar {
    background-color: var(--color-rojo-hover); /* Use darker red for base state */
    color: var(--color-rojo-texto); /* Use black text */
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--font-family-texto);
    justify-content: center;
}

.btn-exportar:hover {
    background-color: var(--color-rojo-activo); /* Use even darker red for hover */
    transform: translateY(-2px);
}
.btn-exportar:active {
    background-color: #8c1f1a; /* Slightly darker for active */
    transform: translateY(0);
}
.btn-exportar i {
    font-size: 1.1em;
    flex-shrink: 0;
}

.btn-exportar-excel {
    background-color: var(--color-verde-excel); /* Use updated green */
    color: var(--color-verde-excel-texto);
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--font-family-texto);
    justify-content: center;
}

.btn-exportar-excel:hover {
    background-color: var(--color-verde-excel-hover);
    transform: translateY(-2px);
}
.btn-exportar-excel:active {
    background-color: var(--color-verde-excel-activo);
    transform: translateY(0);
}
.btn-exportar-excel i {
    font-size: 1.1em;
    flex-shrink: 0;
}

#user-dropdown {
    position: absolute;
    top: 50px;
    right: 18px;
    background-color: var(--color-barra);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--color-shadow);
    display: none;
    flex-direction: column;
    min-width: 150px;
    z-index: 1000;
}

#user-dropdown.show {
    display: flex;
}

#user-dropdown a {
    padding: 12px 16px;
    color: var(--color-texto);
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    font-family: var(--font-family-texto);
}

#user-dropdown a:hover {
    background-color: var(--color-boton-hover);
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.button-group .btn,
.navigation-buttons .btn {
    flex: 1;
    max-width: 200px;
}

/* ============================= */
/*   Estilos para subsecciones   */
/*   dentro de secciones         */
/* ============================= */
.tabs-comparador,
.tabs-recursos {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0 30px 0;
}

.tab-btn {
    background-color: var(--color-barra);
    color: var(--color-texto-secundario);
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family-texto);
}

.tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.tab-btn.active {
    background-color: var(--color-boton);
    color: #FFFFFF;
}

.subsection-comparador,
.subsection-recursos {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.subsection-comparador.active,
.subsection-recursos.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s ease-out;
}

#recursos .categoria-title {
    font-family: var(--font-family-titulo);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--color-texto);
    background-color: #08576C;
    padding: 15px 25px;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px var(--color-shadow);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.recursos-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Lista de recursos */
.recursos-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Estilo de los recursos */
.recurso-item {
    background-color: var(--color-barra);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    margin-bottom: 30px;
}

.recurso-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--color-shadow);
}

.recurso-title {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 25px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-texto);
    margin: 0;
    font-family: var(--font-family-titulo);
    position: relative;
}

.recurso-title::after {
    content: '+';
    font-size: 1.8rem;
    color: var(--color-texto-secundario);
    margin-left: auto;
    transition: transform 0.3s ease;
}

.recurso-item.active .recurso-title::after {
    content: '-';
}

.recurso-content {
    background-color: var(--color-seccion);
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding: 0 25px;
    font-family: var(--font-family-texto);
}

.recurso-item.active .recurso-content {
    max-height: 20000px;
    padding: 25px;
}

.recurso-content p,
.recurso-content ul,
.recurso-content li {
    line-height: 1.8;
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    margin-bottom: 20px;
}

.recurso-content ul {
    padding-left: 30px;
    margin-bottom: 20px;
}

.recurso-content li {
    margin-bottom: 10px;
}

.recurso-content a {
    color: #FFA500;
    text-decoration: underline;
}

.recurso-content a:hover {
    color: var(--color-boton-hover);
}


#recursos .guia-content {
    margin-top: 20px;
}

#comparador h3 {
    margin-bottom: 20px;
}

/* ============================= */
/*   Estilos para simulaciones   */
/* ============================= */
#lista-simulaciones {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.simulacion-item {
    background-color: var(--color-seccion);
    border-left: 4px solid var(--color-boton);
    padding: 20px 25px;
    box-shadow: 0 2px 10px var(--color-shadow);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    margin-bottom: 20px;
}

.simulacion-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.simulacion-item h3 {
    margin-bottom: 12px;
    color: var(--color-texto);
    font-weight: 600;
    font-family: var(--font-family-titulo);
}

.simulacion-details p {
    margin-bottom: 8px;
    color: var(--color-texto-secundario);
    font-family: var(--font-family-texto);
}

.simulacion-actions {
    position: absolute;
    top: 20px;
    right: 25px;
    display: flex;
    gap: 12px;
}

.simulacion-actions button {
    padding: 10px 14px;
    border: none;
    cursor: pointer;
    font-size: 1.0rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 30px;
    color: var(--color-boton-texto); /* Ensure contrast */
    background-color: var(--color-boton);
    font-family: var(--font-family-texto);
}

.simulacion-actions button:hover {
    background-color: var(--color-boton-hover);
    transform: translateY(-2px);
}
.simulacion-actions button:active {
    background-color: var(--color-boton-activo);
    transform: translateY(0);
}

.simulacion-actions .eliminar-btn {
    background-color: var(--color-rojo);
    color: var(--color-rojo-texto); /* Ensure contrast */
}
.simulacion-actions .eliminar-btn:hover {
    background-color: var(--color-rojo-hover);
}
.simulacion-actions .eliminar-btn:active {
    background-color: var(--color-rojo-activo);
}

/* ============================= */
/*       Modal y su contenido    */
/* ============================= */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}
.modal.show {
    display: block;
    animation: fadeIn 0.3s ease;
}
.modal-content {
    background-color: var(--color-barra);
    margin: 10% auto;
    padding: 20px 30px;
    border-radius: 10px;
    max-width: 500px;
    position: relative;
    color: var(--color-texto);
    animation: slideIn 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
}

.modal-content p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes slideIn {
    0% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--color-texto);
}

/* ============================= */
/*     Tarjetas de “Guía”        */
/* ============================= */
.categoria-title {
    font-family: var(--font-family-titulo);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--color-texto);
    background-color: var(--color-boton);
    padding: 15px 25px;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px var(--color-shadow);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#guia .guia-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.guia-card {
    background-color: var(--color-barra);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.guia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--color-shadow);
}

.guia-card-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 20px;
}

.step-number {
    background-color: #000000;
    color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: bold;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.guia-title {
    flex-grow: 1;
    font-family: var(--font-family-titulo);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-texto);
    margin: 0;
}

.guia-toggle-icon {
    font-size: 1.5rem;
    color: var(--color-texto-secundario);
    transition: transform 0.3s ease;
}

.guia-card.active .guia-toggle-icon {
    transform: rotate(45deg);
}

.guia-details {
    background-color: var(--color-seccion);
    font-size: 1rem;
    color: var(--color-texto-secundario);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    font-family: var(--font-family-texto);
    padding: 0 20px;
}

.guia-card.active .guia-details {
    max-height: 5000px;
    padding: 20px;
}

.subcards {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subcard {
    background-color: #333333;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.subcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.subcard h4 {
    margin-top: 0;
    color: var(--color-texto);
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-family: var(--font-family-titulo);
}

.subcard p,
.subcard ul,
.subcard li {
    color: var(--color-texto-secundario);
    line-height: 1.6;
    font-size: 1rem;
    font-family: var(--font-family-texto);
}

.subcard ul {
    padding-left: 20px;
    margin-bottom: 10px;
}

.subcard li {
    margin-bottom: 8px;
}

.subcard a {
    color: var(--color-boton);
    text-decoration: underline;
}

.subcard a:hover {
    color: var(--color-boton-hover);
}

.guia-card.coming-soon {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.guia-card.coming-soon .guia-title::after {
    content: " (Próximamente)";
    font-size: 0.9em;
    color: gray;
    font-style: italic;
}

.guia-card.coming-soon:hover {
    transform: none;
    box-shadow: none;
}

.guia-details a {
    color: var(--color-boton);
    text-decoration: underline;
}

.guia-details a:hover {
    color: var(--color-boton-hover);
}

@media (max-width: 768px) {
    .guia-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 10px;
        text-align: left;
    }

    .guia-title {
        font-size: 1rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin: 0;
        width: 100%;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .guia-details {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
    }

    .guia-toggle-icon {
        font-size: 1.2rem;
        margin-left: auto;
    }
}

/* ============================= */
/*  Tablas y leyendas           */
/* ============================= */
.tabla-amortizacion {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 25px;
    background-color: var(--color-seccion);
    overflow: hidden;
}

.tabla-amortizacion th,
.tabla-amortizacion td {
    padding: 12px;
    text-align: left;
    color: var(--color-texto);
    border-bottom: 1px solid var(--color-borde);
    font-family: var(--font-family-texto);
}

.tabla-amortizacion th {
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.tabla-amortizacion tr:nth-child(even) {
    background-color: #1B1B1B;
}
.tabla-amortizacion tr:nth-child(odd) {
    background-color: var(--color-barra);
}

.tabla-amortizacion tr.capital-supera-interes {
    background-color: rgba(10, 132, 255, 0.1);
    font-weight: 600;
}

.tabla-leyenda {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.leyenda-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.leyenda-color {
    width: 20px;
    height: 20px;
    background-color: #0066cc;
    border: 1px solid var(--color-borde);
    margin-right: 10px;
}

.leyenda-texto {
    color: var(--color-texto);
    font-size: 1rem;
    font-family: var(--font-family-texto);
}

.tabla-itp {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.tabla-itp th, .tabla-itp td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-texto);
}
.tabla-itp th {
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}
.tabla-itp tr:nth-child(even) {
    background-color: var(--color-barra);
}
.tabla-itp tr:nth-child(odd) {
    background-color: var(--color-seccion);
}

/* Enlace de descarga del informe */
a {
    color: #FFA500;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.2s ease;
}

a:hover {
    color: #FF8C00;
    transform: translateY(-2px);
}

a:active {
    color: #FF4500;
    transform: translateY(0);
}

/* ============================= */
/*  Formulario de inicio y registro */
/* ============================= */
.auth-form-container {
    background-color: var(--color-barra);
    padding: 40px;
    max-width: 450px;
    margin: 50px auto;
    box-shadow: 0 4px 12px var(--color-shadow);
    animation: fadeInDown 1s ease-out;
}

.auth-form-container h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--color-texto);
    text-align: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.auth-form .form-group {
    margin-bottom: 20px;
    opacity: 1;
    transform: translateX(0);
    animation: none;
}

.auth-form .form-group label {
    margin-bottom: 5px;
}

.auth-form .button-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.auth-form .button-group button {
    width: 100%;
}

@media all and (display-mode: standalone) {
    .navbar {
        padding-bottom: 20px;
    }
}

@media (min-width: 1024px) {
    .top-bar {
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 7px 15px;
        background-color: var(--color-barra);
    }

    .top-bar-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .top-bar .app-name {
        font-size: 1em;
    }

    .experiment-label {
        font-size: 0.6rem;
        padding: 1px 6px;
        margin-left: 0px;
    }

    #user-button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 35%; 
        transform: translateY(-30%);
        right: 20px;
    }

    #user-button i {
        font-size: 1rem;
    }

    .navbar-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px; /* Increased fixed height for desktop */
        z-index: 999;
        padding: 10px;
        background-color: var(--color-barra);
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        padding: 0;
        margin: 0;
    }

    .nav-tab {
        flex: 1;
        padding: 10px 10px; /* Slightly increased vertical padding */
        font-size: 1rem;
        text-align: center;
        min-width: 120px;
    }

    .nav-tab i {
        font-size: 18px;
        margin-bottom: 2px;
    }

    #secondary-nav {
        position: fixed;
        top: 50px;
        height: calc(5dvh);
        z-index: 998;
        padding: 0;
        margin: 0;
        gap: 5px;
        display: flex;
        justify-content: center;
        background-color: var(--color-barra);
        flex-wrap: nowrap;
    }

    #secondary-nav .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        padding: 0;
        margin: 0;
    }

    #secondary-nav .nav-tab {
        flex: none;
        padding: 8px 10px;
        font-size: 1rem;
        text-align: center;
        min-width: 120px;
    }

    main {
        margin-top: calc(5dvh + 70px);
        margin-bottom: calc(8dvh);
        padding: 20px;
        overflow-y: auto;
    }

    .form-group input,
    .form-group select {
        font-size: 1rem;
        padding: 10px;
        width: 100%;
    }

    .input-group {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .input-group input {
        flex: 1;
        padding: 8px;
        font-size: 1rem;
    }

    .input-group select {
        flex: none;
        width: 60px;
        padding: 8px;
        font-size: 0.9rem;
    }

    .button-group button,
    .navigation-buttons button {
        font-size: 1rem;
        padding: 10px;
        width: auto;
        margin-bottom: 10px;
    }

    .section-container h2,
    .section-container h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
}

@media (min-width: 768px) {
    .section-container {
        width: 90%;
        max-width: 1400px;
        margin: 30px auto;
        padding: 40px 30px;
    }

    .parent-container, body {
        width: 100%;
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .top-bar {
        position: fixed;
        top: 0;
        width: 100%;
        height: 55px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 15px;
        background-color: var(--color-barra);
    }

    .top-bar-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .top-bar .app-name {
        font-size: 1.8em;
    }

    .experiment-label {
        font-size: 0.6rem;
        padding: 2px 6px;
        margin-left: 8px;
    }

    #user-button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 35%; 
        transform: translateY(-30%);
        right: 20px;
    }

    #user-button i {
        font-size: 1rem;
    }

    .navbar-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        /* Se incrementa la altura mínima para incluir el área segura si aplica */
        min-height: calc(9dvh + env(safe-area-inset-bottom, 20px)); /* Increased base dvh */
        /* Se usa un padding inferior para añadir el espacio extra */
        padding-bottom: env(safe-area-inset-bottom, 20px);
        z-index: 999;
        padding: 8px 15px;
        background-color: var(--color-barra);
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }

    .nav-tab {
        flex: none;
        padding: 8px 8px; /* Increased vertical padding */
        font-size: 0.85rem;
        text-align: center;
        min-width: 100px;
        /* Se asegura que la estructura vertical permita visualizar el ícono y el texto */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .nav-tab i {
        font-size: 16px;
        margin-bottom: 2px;
    }

    #secondary-nav {
        position: fixed;
        top: 55px;
        width: 100%;
        height: calc(4dvh);
        z-index: 998;
        display: flex;
        align-items: center;
        padding: 0;
        justify-content: center;
        background-color: var(--color-barra);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #secondary-nav .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px;
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }

    #secondary-nav .nav-tab {
        flex: none;
        padding: 6px 4px;
        font-size: 0.85rem;
        text-align: center;
        min-width: 100px;
    }

    main {
        margin-top: calc(4dvh + 55px);
        margin-bottom: calc(7dvh);
        padding: 20px;
        overflow-y: auto;
    }

    .form-group input,
    .form-group select {
        font-size: 1rem;
        padding: 10px;
        width: 100%;
    }

    .input-group {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .input-group input {
        flex: 1;
        padding: 8px;
        font-size: 1rem;
    }

    .input-group select {
        flex: none;
        width: 60px;
        padding: 8px;
        font-size: 0.9rem;
    }

    .button-group button,
    .navigation-buttons button {
        font-size: 1rem;
        padding: 10px;
        width: auto;
        margin-bottom: 10px;
    }

    .section-container h2,
    .section-container h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
}

@media (min-width: 744px) and (max-width: 768px) {
    .top-bar {
        position: fixed;
        top: 0;
        width: 100%;
        height: 60px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 10px;
        background-color: var(--color-barra);
    }

    .top-bar-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 8px;
    }

    .top-bar .app-name {
        font-size: 1.7em;
        margin-left: 20px;
    }

    #user-button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 35%; 
        transform: translateY(-30%);
        right: 20px;
    }
    
    #user-button i {
        font-size: 1rem;
    }

    .navbar-container {
        position: fixed;
        flex: 1;
        display: flex;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: calc(10dvh); /* Increased dvh */
        z-index: 999;
        padding: 10px;
        margin: 0;
        background-color: var(--color-barra);
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .nav-tab {
        flex: none;
        padding: 8px 8px; /* Increased vertical padding */
        font-size: 0.9rem;
        text-align: center;
        min-width: 100px;
    }

    #secondary-nav {
        position: fixed;
        top: 60px;
        width: 100%;
        height: calc(5dvh);
        z-index: 998;
        padding-left: 10px;
        display: flex;
        justify-content: center;
        background-color: var(--color-barra);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #secondary-nav .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 10px;
        gap: 5px;
    }

    #secondary-nav .nav-tab {
        flex: none;
        padding: 6px 8px;
        font-size: 0.8rem;
        text-align: center;
        min-width: 100px;
    }

    main {
        margin-top: calc(5dvh + 60px);
        margin-bottom: calc(8dvh);
        padding: 20px;
        overflow-y: auto;
    }

    .form-group input,
    .form-group select {
        font-size: 1rem;
        padding: 10px;
        width: 100%;
    }

    .button-group button,
    .navigation-buttons button {
        font-size: 0.9rem;
        padding: 10px;
        width: 100%;
        margin-bottom: 10px;
    }

    .section-container h2,
    .section-container h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
}

@media (max-width: 744px) {
    .top-bar {
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 10px;
        background-color: var(--color-barra);
    }

    .top-bar-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 8px;
    }

    .top-bar .app-name {
        font-size: 1.2em;
        margin-left: 10px;
    }

    .experiment-label {
        font-size: 0.5rem;
        padding: 1px 4px;
        margin-left: 5px;
    }

    #user-button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 35%;
        transform: translateY(-30%);
        right: 20px;
    }
    
    #user-button i {
        font-size: 0.8rem;
    }

    .navbar-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        /* Se aumenta la altura mínima para sumar la zona segura (env(safe-area-inset-bottom)) */
        min-height: calc(7dvh + env(safe-area-inset-bottom, 20px));
        /* Se agrega padding inferior para que no se tapen los iconos */
        padding: 0 10px env(safe-area-inset-bottom, 20px) 10px;
        z-index: 1000;
        background-color: var(--color-barra);
        overflow-x: auto;
    }
    
    .navbar {
        display: flex;
        padding-bottom: env(safe-area-inset-bottom, 20px);
        padding-left: 10px;
        width: 100%;
    }

    .nav-tabs {
        display: flex;
        gap: 10px;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .nav-tab {
        flex: none;
        min-width: 80px;
        /* Aumentamos un poco el padding vertical para que los íconos tengan espacio */
        padding: 8px;
        font-size: 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .nav-tab i {
        font-size: 20px;
        margin-bottom: 4px;
    }

    #secondary-nav {
        position: fixed;
        top: 50px;
        width: 100%;
        height: calc(5dvh);
        z-index: 999;
        padding-left: 10px;
        display: flex;
        overflow-x: auto;
        background-color: var(--color-barra);
    }

    #secondary-nav .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 10px;
        gap: 3px;
        padding: 0;
        margin: 0;
    }

    #secondary-nav .nav-tab {
        flex: none;
        flex-shrink: 0;
        padding: 5px 4px;
        font-size: 0.8rem;
        text-align: center;
    }

    #secondary-nav .nav-tab span {
        white-space: nowrap;
    }

    #secondary-nav .nav-tab {
        min-width: 80px;
    }

    .secondary-nav-common .nav-tab {
        padding: 10px 20px;
        font-size: 0.8rem;
        border-bottom: 2px solid transparent;
        font-family: var(--font-family-texto);
        cursor: pointer;
    }
    
    .secondary-nav-common .nav-tab.active {
        color: var(--color-texto);
        border-bottom: 2px solid var(--color-texto);
    }

    #comparador-nav {
        position: fixed;
        top: 50px;
        width: 100%;
        height: calc(5dvh);
        z-index: 999;
        padding-left: 10px;
        display: flex;
        overflow-x: auto;
        background-color: var(--color-barra);
    }

    #comparador-nav .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 10px;
        gap: 3px;
        padding: 0;
        margin: 0;
    }

    #comparador-nav .nav-tab {
        flex: none;
        flex-shrink: 0;
        padding: 5px 4px;
        font-size: 0.8rem;
        text-align: center;
    }

    #comparador-nav .nav-tab span {
        white-space: nowrap;
    }

    #comparador-nav .nav-tab {
        min-width: 80px;
    }

    #recursos-nav {
        position: fixed;
        top: 50px;
        width: 100%;
        height: calc(5dvh);
        z-index: 999;
        padding-left: 10px;
        display: flex;
        overflow-x: auto;
        background-color: var(--color-barra);
    }

    #recursos-nav .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 10px;
        gap: 3px;
        padding: 0;
        margin: 0;
    }

    #recursos-nav .nav-tab {
        flex: none;
        flex-shrink: 0;
        padding: 5px 4px;
        font-size: 0.8rem;
        text-align: center;
    }

    #recursos-nav .nav-tab span {
        white-space: nowrap;
    }

    #recursos-nav .nav-tab {
        min-width: 80px;
    }


    main {
        margin-top: calc(5dvh + 50px);
        margin-bottom: calc(8dvh + 50px);
        height: calc(100dvh - 60px - 40px - 8dvh - 50px);
        overflow-y: auto;
        padding: 10px 20px;
    }

    main {
        height: calc(var(--dvh, 1vh) * 100 - 60px - 40px - 50px);
    }

    .section-container {
        width: 100%;
        margin: 10px auto;
        padding: 15px;
    }

    .form-group input,
    .form-group select {
        font-size: 1rem;
        padding: 10px;
        width: 100%;
    }

    .input-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .input-group input {
        flex: 1;
        padding: 8px;
        font-size: 0.9rem;
    }

    .input-group select {
        flex: none;
        width: 50px;
        padding: 8px;
        font-size: 0.9rem;
    }

    .button-group button,
    .navigation-buttons button {
        font-size: 0.9rem;
        padding: 10px;
        width: 100%;
        margin-bottom: 10px;
    }

    .section-container h2,
    .section-container h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
      
    .button-group #guardar-simulacion {
        flex: 0 0 100%;
    }
      
    .button-group #exportar-pdf,
    .button-group #exportar-excel {
        flex: 1 1 calc(50% - 10px);
    }
      
    .button-group #anterior {
        flex: 0 0 100%;
    }
}

/* ============================= */
/*   Estilos para el análisis comparativo */
/* ============================= */
.seleccion-simulaciones {
  margin-bottom: 30px;
}

.instruccion-comparador {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: var(--color-texto);
}

.simulaciones-seleccionables {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  background-color: var(--color-barra);
  border-radius: 8px;
}

.simulacion-seleccionable {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 15px;
  background-color: var(--color-seccion);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.simulacion-seleccionable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--color-shadow);
}

.checkbox-simulacion {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-boton);
}

.simulacion-seleccionable label {
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--color-texto);
  flex-grow: 1;
}

.btn-comparar {
  background-color: var(--color-acento-fill);
  color: white;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 4px var(--color-shadow);
  min-width: 200px;
}

.btn-comparar:hover:not(:disabled) {
  background-color: #064559;
  transform: translateY(-2px);
}

.btn-comparar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #6c757d;
}

.cargando {
  text-align: center;
  margin: 20px 0;
  color: var(--color-texto);
  font-style: italic;
}

.mensaje-error {
  color: var(--color-rojo);
  text-align: center;
  margin: 20px 0;
}

.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  background-color: var(--color-seccion);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px var(--color-shadow);
}

.tabla-comparativa th, 
.tabla-comparativa td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-comparativa th {
  background-color: var(--color-acento-fill);
  color: white;
  font-weight: 600;
}

.tabla-comparativa tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

.tabla-comparativa td:first-child {
  font-weight: 600;
  color: var(--color-texto);
}

.resultados-comparacion {
  margin-top: 40px;
  padding: 20px;
  background-color: var(--color-barra);
  border-radius: 10px;
}

.resultados-comparacion .btn-exportar {
  margin: 30px auto 10px;
  display: block;
}

/* Ajustes responsivos para el comparador */
@media (max-width: 768px) {
  .tabla-comparativa {
    overflow-x: auto;
    display: block;
  }
  
  .tabla-comparativa th,
  .tabla-comparativa td {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  
  .simulaciones-seleccionables {
    max-height: 200px;
  }
}

/* Animaciones */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================= */
/*   Estilos para barras secundarias comunes */
/* ============================= */
.secondary-nav-common {
    background-color: #242427;
    display: flex;
    justify-content: center;
    padding: 5px 0;
    gap: 10px;
    position: fixed;
    width: 100%;
    top: calc(80px);
    z-index: 999;
    transition: all 0.3s ease;
}

.secondary-nav-common .nav-tab {
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    font-family: var(--font-family-texto);
    cursor: pointer;
}

.secondary-nav-common .nav-tab.active {
    color: var(--color-texto);
    border-bottom: 2px solid var(--color-texto);
}

/* ============================= */
/* Estilos específicos para navbar en el comparador */
/* ============================= */
#comparador-nav {
  padding: 0;
  background-color: var(--color-barra);
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
  left: 0;               /* Para que inicie en el borde izquierdo */
  right: 0;              /* Para que abarque hasta el borde derecho */
  margin: 0 auto;           /* Se elimina el margen negativo */
  position: fixed;       /* Fija la barra */
  top: 50px;       /* Mismo top que el simulador */
  width: 100%;
  z-index: 998;
}

#comparador-nav .nav-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 0;
  margin: 0;
}

#comparador-nav .nav-tab {
    flex: none;
    padding: 8px 10px;
    font-size: 1rem;
    text-align: center;
    min-width: 120px;
}

#comparador-nav .nav-tab.active {
    color: var(--color-texto);
    border-bottom: 2px solid var(--color-texto);
}

#comparador-nav .nav-tab:hover:not(.active) {
  color: var(--color-texto);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Ajuste del contenedor comparador para compensar el nuevo nav */
#comparador .section-container h2 {
  margin-top: 0;
}

/* Contenedor ajustado para la sección principal */
.comparador-content-wrapper {
  padding-top: 15px;
}

#recursos-nav {
    padding: 0;
    background-color: var(--color-barra);
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    left: 0;               /* Para que inicie en el borde izquierdo */
    right: 0;              /* Para que abarque hasta el borde derecho */
    margin: 0 auto;           /* Se elimina el margen negativo */
    position: fixed;       /* Fija la barra */
    top: 50px;       /* Mismo top que el simulador */
    width: 100%;
    z-index: 998;
  }
  
  #recursos-nav .nav-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 0;
    margin: 0;
  }
  
  #recursos-nav .nav-tab {
      flex: none;
      padding: 8px 10px;
      font-size: 1rem;
      text-align: center;
      min-width: 120px;
  }
  
  #recursos-nav .nav-tab.active {
      color: var(--color-texto);
      border-bottom: 2px solid var(--color-texto);
  }
  
  #recursos-nav .nav-tab:hover:not(.active) {
    color: var(--color-texto);
    background-color: rgba(255, 255, 255, 0.05);
  }

/* ============================= */
/*      Sección Inicio           */
/* ============================= */
#inicio .section-container {
    background-color: var(--color-seccion);
    padding: 30px; /* Más padding para la sección de inicio */
    margin-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px var(--color-shadow);
    animation: fadeInUp 0.5s ease-out;
}

#inicio h2 {
    text-align: center;
    font-size: 2rem; /* Título más grande */
    margin-bottom: 15px;
}

#inicio .app-description {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    margin-bottom: 30px; /* Más espacio antes de las tarjetas */
}

.inicio-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Diseño de cuadrícula responsivo */
    gap: 25px; /* Espacio entre tarjetas */
    margin-top: 20px;
}

.inicio-card {
    background-color: var(--color-barra); /* Fondo oscuro para las tarjetas */
    padding: 25px;
    border-radius: 12px; /* Bordes más redondeados */
    border: 1px solid var(--color-borde);
    box-shadow: 0 3px 10px var(--color-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar contenido */
    text-align: center;
}

.inicio-card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.inicio-card .card-icon {
    font-size: 2.5rem; /* Icono más grande */
    color: var(--color-boton); /* Color naranja para el icono */
    margin-bottom: 15px;
}

.inicio-card .card-title {
    font-family: var(--font-family-titulo);
    font-size: 1.4rem; /* Título de la tarjeta */
    color: var(--color-texto);
    margin-top: 0;
    margin-bottom: 10px;
}

.inicio-card .card-description {
    font-family: var(--font-family-texto);
    font-size: 0.95rem; /* Descripción más pequeña */
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

/* Ajustes responsivos para las tarjetas de inicio */
@media (max-width: 768px) {
    .inicio-cards-container {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }

    .inicio-card {
        padding: 20px;
    }

    .inicio-card .card-icon {
        font-size: 2rem;
    }

    .inicio-card .card-title {
        font-size: 1.2rem;
    }

    .inicio-card .card-description {
        font-size: 0.9rem;
    }
}