html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #e7f0fa;
  /* quité padding aquí para no empujar al fondo */
  /* si lo necesitas, aplícalo a un .wrapper interno */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* flex-direction: column; */
}

#particles-js {
  position: fixed;   /* ↔ pega al viewport */
  inset: 0;          /* equivale a top:0; right:0; bottom:0; left:0; */
  z-index: -1;
  background-color: #e7f0fa;
}


form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.wide-form {
    display: flex;
    flex-direction: row;          /* Elementos alineados horizontalmente */
    flex-wrap: wrap;              /* Permite salto de línea si es necesario */
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;                  /* Ocupa todo el ancho del contenedor */
    padding: 10px 20px;           /* Opcional: espaciado interior */
    box-sizing: border-box;       /* Incluye padding en el ancho */
    gap: 15px;                    /* Espacio entre campos */
}

.wide-form .form-group {
    flex: 1;               /* Ocupa espacio equitativo */
    min-width: 200px;      /* Evita que se achiquen demasiado */
    display: flex;
    flex-direction: column;
}


.horizontal-form {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos */
    gap: 15px; /* Espacio entre los elementos del formulario */
    justify-content: center; /* Centra el contenido horizontalmente */
}

.form-group {
    display: flex;
    flex-direction: column; /* Etiqueta y select verticales */
    align-items: flex-start; /* Alinea a la izquierda */
}

.form-group select {
    margin-top: 5px; /* Espacio entre el label y el select */
}

button {
    margin-left: 10px; /* Espacio extra si es necesario */
}


.options-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre el desplegable y el botón */
    margin-bottom: 20px;
}

select {
    width: 200px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
/* Esto entrega los resultados de los dois*/
.result {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    width: 600px; /* Fijamos el ancho de todos los recuadros */
    text-align: left;
}

.result pre {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto; /* Habilita la barra de desplazamiento horizontal */
    white-space: pre; /* Mantiene el formato original con líneas largas */
    font-family: monospace; /* Fuente de ancho fijo */
    font-size: 14px;
}


.language-switcher {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.language-switcher button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.language-switcher img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.language-switcher img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Contenedor principal de la barra */
.donation-section {
    position: fixed;
    top: 50%;
    right: -170px; /* Oculta la barra fuera del borde derecho */
    transform: translateY(-50%);
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px 0 0 8px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 180px;
    z-index: 1000;
    text-align: center;
    transition: right 0.3s ease; /* Animación de desplazamiento */
}

/* Pestaña visible */
.donation-tab {
    position: absolute;
    top: 50%;
    left: -40px; /* La pestaña sobresale del borde derecho */
    transform: translateY(-50%);
    background-color: #007bff;
    color: white;
    font-size: 12px;
    padding: 10px 5px;
    writing-mode: vertical-rl; /* Texto vertical */
    text-align: center;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

.donation-tab:hover {
    background-color: #0056b3;
}

/* Mostrar la barra cuando pasas el cursor */
.donation-section:hover {
    right: 0; /* Desliza la barra hacia la pantalla */
}

/* Opciones de donación */
.donation-options {
    display: flex;
    flex-direction: column; /* Vertical */
    align-items: center;
    gap: 15px;
}

.donation-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}

.donation-item img:hover {
    transform: scale(1.1);
}

.donation-item button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.donation-item button:hover {
    background-color: #0056b3;
}

footer {
    margin-top: 20px;
    font-size: 14px;
}





/* Estilo general del formulario */
.filter-form {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Leyenda del formulario */
.filter-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.filter-form legend {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
}

/* Grupo de formulario */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.form-group .form-control {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
    outline: none;
}

/* Contenedor horizontal para los filtros */
.form-row {
    display: flex;
    justify-content: space-between; /* Espacio uniforme entre los elementos */
    gap: 20px; /* Espacio entre las columnas */
    flex-wrap: wrap; /* Asegura que los elementos se ajusten en pantallas pequeñas */
}

/* Formulario individual (Categoría y Cuartil) */
.form-group {
    flex: 1; /* Asegura que ambos campos tengan el mismo ancho */
    min-width: 150px; /* Evita que los campos sean demasiado pequeños */
    display: flex;
    flex-direction: column; /* Mantiene etiqueta y campo en vertical */
    gap: 5px; /* Espacio entre etiqueta y campo */
}

/* Botón centrado */
.filter-form button {
    margin: 20px auto 0 auto;
    display: block;
    width: fit-content;
}

/* Ajuste para dispositivos pequeños */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column; /* Pasa a diseño vertical en pantallas pequeñas */
    }
}
/* Extensiones para el formulario de filtros */
.filter-form {
    max-width: 600px;
    background-color: #ffffff; /* Fondo blanco para destacar */
    border: 2px solid #ddd; /* Borde claro */
    border-radius: 10px; /* Bordes más suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-form legend {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #007bff; /* Azul profesional */
    margin-bottom: 15px;
}

/* Contenedor horizontal para los campos */
.filter-form .form-row {
    display: flex;
    justify-content: space-between; /* Espacio uniforme entre los campos */
    gap: 20px; /* Espacio entre "Categoría" y "Cuartil" */
    flex-wrap: wrap; /* Ajuste para pantallas pequeñas */
}

/* Campos individuales dentro del formulario */
.filter-form .form-group {
    flex: 1; /* Ambos campos comparten el mismo tamaño */
    min-width: 150px; /* Evita que los campos sean demasiado pequeños */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espacio entre etiqueta y campo */
}

.filter-form .form-group label {
    font-size: 14px;
    font-weight: bold;
    color: #333; /* Gris oscuro */
}

.filter-form .form-control {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc; /* Gris claro */
    border-radius: 5px;
    background-color: #f9f9f9; /* Fondo suave */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.filter-form .form-control:focus {
    border-color: #007bff; /* Azul al enfocar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

/* Botón de acción del formulario */
.filter-form .btn {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff; /* Azul principal */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: center; /* Centra el botón */
    transition: background-color 0.3s, transform 0.2s;
}

.filter-form .btn:hover {
    background-color: #0056b3; /* Azul más oscuro */
    transform: scale(1.05); /* Efecto de zoom suave */
}

.filter-form .btn:active {
    transform: scale(0.95);
}

.filter-form .btn:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Ajuste responsivo */
@media (max-width: 768px) {
    .filter-form .form-row {
        flex-direction: column; /* Cambia a diseño vertical */
        gap: 15px;
    }
}

/* Asegura alineación perfecta en la fila */
.filter-form .form-row {
    display: flex;
    align-items: center; /* Asegura que todos los elementos estén perfectamente centrados verticalmente */
    justify-content: space-between; /* Espacio horizontal uniforme */
    gap: 20px; /* Espacio entre elementos */
}

/* Ajusta el estilo de los selects para que coincidan con el botón */
.filter-form .form-row select {
    height: 40px; /* Altura consistente */
    line-height: 40px; /* Centra el texto verticalmente */
    padding: 0 10px; /* Espaciado interno */
    box-sizing: border-box; /* Incluye padding en el cálculo de altura */
}

/* Ajusta el botón */
.filter-form .form-row .btn {
    height: 40px; /* Altura consistente con los selects */
    line-height: 40px; /* Centra el texto verticalmente */
    padding: 0 20px; /* Ajusta el padding horizontal */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Asegura que padding y border no cambien el tamaño */
}

/* Contenedor de resultados */
#resultnew {
    margin: 20px auto;
    width: 100%;
    font-family: 'Roboto', Arial, sans-serif;
}

/* Estilo para listas */
#resultnew ul {
    list-style-type: disc; /* Viñetas estándar */
    margin-left: 20px; /* Espaciado hacia la izquierda */
    line-height: 1.8; /* Espaciado entre líneas */
}

/* Estilo para los elementos de lista */
#resultnew li {
    margin-bottom: 10px; /* Espaciado entre elementos */
    font-size: 16px; /* Tamaño de texto legible */
    color: #333; /* Color de texto profesional */
}

/* Estilo para títulos */
#resultnew h3 {
    font-size: 18px;
    font-weight: bold;
    color: #007bff; /* Azul profesional */
    margin-top: 20px;
    margin-bottom: 15px;
}

/* Estilo para párrafos */
#resultnew p {
    font-size: 16px; /* Tamaño de texto */
    color: #555; /* Gris intermedio */
    line-height: 1.6; /* Espaciado entre líneas */
}

/* Ajuste responsivo */
@media (max-width: 768px) {
    #resultnew {
        padding: 15px; /* Menos padding en pantallas pequeñas */
        font-size: 14px; /* Texto ligeramente más pequeño */
    }

    #resultnew h3 {
        font-size: 16px;
    }

    #resultnew ul {
        margin-left: 15px;
    }
}


/* Encabezado principal */
.custom-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 2px solid #ddd;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    position: sticky;
    top: 0;
    z-index: 1000;
    
    width: 100vw; /* ⬅️ Esta línea es la clave */
    box-sizing: border-box; /* Asegura que el padding no lo empuje */
}

/* Opcional: estiliza los botones */
.lang-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.lang-btn img {
    height: 20px;
    display: block;
}


/* About Us */
.about-us-container {
    text-align: justify; /* Justifica el texto */
    font-family: Arial, sans-serif;
    line-height: 1.8; /* Espaciado entre líneas */
    margin: 20px auto;
    max-width: 800px; /* Ancho máximo para pantallas grandes */
    padding: 20px;
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.about-us-container h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin-top: 20px;
    margin-bottom: 10px;
}

.about-us-container p {
    font-size: 16px;
    color: #555555;
    margin-bottom: 20px;
}

.about-us-container ul.features-list {
    list-style-type: none; /* Sin viñetas predeterminadas */
    padding: 0;
    margin: 20px 0;
}

.about-us-container ul.features-list li {
    display: flex;
    align-items: center; /* Centra ícono y texto */
    gap: 10px; /* Espacio entre ícono y texto */
    font-size: 16px;
    color: #555555;
    margin-bottom: 15px;
}

.about-us-container a {
    font-weight: bold;
    color: #007bff;
    text-decoration: none; /* Sin subrayado */
}

.about-us-container a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
    color: #0056b3;
}


/*Invitación a donar*/
.donation-invitation {
    background-color: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.donation-invitation h2 {
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 10px;
}

.donation-invitation p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.donation-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.donation-button {
    display: inline-block;
    text-decoration: none;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
}

.donation-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.donation-button i {
    margin-right: 5px;
}


/*Link footer*/
.footer-link {
    text-decoration: none; /* Elimina el subrayado por defecto */
    color: #007bff; /* Azul profesional */
    font-weight: bold; /* Resalta el enlace */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Efectos de transición */
}

.footer-link:hover {
    color: #0056b3; /* Azul más oscuro al pasar el ratón */
    text-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Efecto de resplandor */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

.footer-link:focus {
    outline: none; /* Elimina el borde de enfoque predeterminado */
    color: #0056b3; /* Mismo color que el hover */
    text-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Resplandor */
}

.footer-link:active {
    color: #003d80; /* Azul aún más oscuro cuando se hace clic */
    text-shadow: none; /* Elimina el resplandor */
}

/* Ajustes responsivos para pantallas pequeñas */
@media (max-width: 768px) {
    .footer-link {
        font-size: 13px; /* Reduce el tamaño del texto */
        margin: 10px 5px; /* Agrega espacio entre los enlaces */
    }

    footer {
        text-align: center; /* Centra los enlaces */
        font-size: 12px; /* Tamaño de texto reducido */
        padding: 10px 15px; /* Espaciado adecuado */
    }
}

/* Estilos de la tabla de las revistas WOS */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: .88rem;
    font-family: 'Roboto', Arial, sans-serif;
}


/*Estilos para div ayuda*/
.result_ayuda {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 20px auto;
}

.result_ayuda h2 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

.result_ayuda h3 {
    font-size: 20px;
    color: #3498db;
    margin-top: 25px;
    margin-bottom: 10px;
}

.result_ayuda p {
    font-size: 16px;
    margin-bottom: 15px;
}

.result_ayuda ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.result_ayuda ul li {
    margin-bottom: 20px;
    padding: 15px;
    background: #ffffff;
    border-left: 4px solid #3498db;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.result_ayuda ul li strong {
    font-weight: bold;
    color: #2c3e50;
    font-size: 17px;
}

.result_ayuda ul li em {
    color: #7f8c8d;
    font-style: italic;
}

.result_ayuda ul li i {
    font-style: italic;
    color: #34495e;
}

.result_ayuda ul li span.highlight {
    color: #e74c3c;
    font-weight: bold;
}

.result_ayuda a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.2s;
}

.result_ayuda a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

.result_ayuda .highlight {
    background-color: #ffebcc;
    color: #e67e22;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
}

.result_ayuda li br {
    margin-bottom: 10px;
}

.result_ayuda p:last-child {
    margin-top: 30px;
    font-style: italic;
    color: #7f8c8d;
    font-size: 15px;
}

.code-box {
    overflow-x: auto; /* Habilita el scroll horizontal */
    white-space: pre; /* Mantiene el formato original del código */
    background-color: #f9f9f9; /* Fondo claro */
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid #ddd; /* Opcional: agrega un borde suave */
}
/*termino div ayuda*/


/* journalTable column layout */
table#journalTable th:nth-child(1),
table#journalTable td:nth-child(1) { min-width: 200px; }

table#journalTable th:nth-child(2),
table#journalTable td:nth-child(2) { min-width: 280px; }

table#journalTable th:nth-child(3),
table#journalTable td:nth-child(3),
table#journalTable th:nth-child(4),
table#journalTable td:nth-child(4) { min-width: 80px; text-align: center; }

table#journalTable th:nth-child(5),
table#journalTable td:nth-child(5),
table#journalTable th:nth-child(6),
table#journalTable td:nth-child(6),
table#journalTable th:nth-child(7),
table#journalTable td:nth-child(7) { min-width: 70px; text-align: center; }

/* anidJournalTable column layout */
table#anidJournalTable th:nth-child(3),
table#anidJournalTable td:nth-child(3) { min-width: 240px; }

table#anidJournalTable th:nth-child(7),
table#anidJournalTable td:nth-child(7) { min-width: 160px; }

table#anidJournalTable th:nth-child(2),
table#anidJournalTable td:nth-child(2),
table#anidJournalTable th:nth-child(4),
table#anidJournalTable td:nth-child(4),
table#anidJournalTable th:nth-child(5),
table#anidJournalTable td:nth-child(5),
table#anidJournalTable th:nth-child(6),
table#anidJournalTable td:nth-child(6),
table#anidJournalTable th:nth-child(8),
table#anidJournalTable td:nth-child(8),
table#anidJournalTable th:nth-child(9),
table#anidJournalTable td:nth-child(9) { text-align: center; min-width: 70px; }


.language-switcher-form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lang-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.lang-btn img {
    height: 20px;
    transition: transform 0.2s ease;
}

.lang-btn img:hover {
    transform: scale(1.1);
}

/* en tu styles.css */
.btn-refninja {
  background-color: #007bff;
  border-color:    #007bff;
  color:           #fff;
}
.btn-refninja:hover,
.btn-refninja:focus {
  background-color: #0056b3;
  border-color:    #0056b3;
}


/* Sidebar general */
.refninja-sidebar {
  position: fixed;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 60px;
  border-radius: 10px;
  background-color: #f8f9fa;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  z-index: 1030;
}

/* Botones de icono */
.refninja-sidebar .sidebar-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  background-color: transparent;
  border: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

/* Hover */
.refninja-sidebar .sidebar-icon:hover {
  background-color: #e9ecef;
  color: #0d6efd;
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

/* Activo */
.refninja-sidebar .sidebar-icon.active {
  background-color: #0d6efd;
  color: #fff;
  box-shadow: 0 0.25rem 0.5rem rgba(13, 110, 253, 0.35);
}

/* Botones “Pronto” / disabled */
.refninja-sidebar .sidebar-icon.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.refninja-sidebar .sidebar-icon.disabled:hover {
  background-color: transparent;
  color: #6c757d;
  box-shadow: none;
  transform: none;
}

/* Separador */
.sidebar-separator {
  width: 60%;
  height: 1px;
  background-color: #ced4da;
  margin: 0.5rem auto;
  opacity: 0.8;
}

/* Content area next to the fixed .refninja-sidebar. The sidebar is
   position:fixed (out of flow), so this margin exists purely to keep
   content from sitting under it -- and must disappear below the sm
   breakpoint, where .refninja-sidebar itself is display:none, or the
   page wastes 60px of width for a sidebar that isn't there. */
.rn-authed-content {
  margin-left: 60px;
  width: calc(100% - 60px);
}
@media (max-width: 575.98px) {
  .rn-authed-content {
    margin-left: 0;
    width: 100%;
    /* Leaves room for the fixed .rn-bottom-nav so it doesn't cover content. */
    padding-bottom: 72px;
  }
}

/* Mobile bottom tab bar -- shown only below the sm breakpoint, where
   .refninja-sidebar (fixed, floating, left:10px) is hidden entirely and
   would otherwise leave Inicio/Recomendador unreachable. */
.rn-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  padding: 0.35rem 0.25rem;
  padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
  align-items: stretch;
}

.rn-bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.3rem 0.2rem;
  border-radius: 10px;
  color: #6c757d;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rn-bottom-nav-item i {
  font-size: 1.15rem;
  line-height: 1;
}

.rn-bottom-nav-item:hover {
  color: #0d6efd;
  text-decoration: none;
}

.rn-bottom-nav-item.active {
  color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.1);
}

.rn-bottom-nav-latexmark {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}