/* === ESTRUCTURA PRINCIPAL === */

/* Fondo general y tipografía */
body {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    background-color: #f2f2f2 !important;
}
#topic-header h1 {
    color: #00b189;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 800;
}

/* ==== CONTENEDORES LATERALES ==== */

/* Contenedor de tabla de contenidos (sidebar) */
#sidebar .sidebar-nav {
    box-sizing: border-box;
    padding: 15px 14px 15px 15px;
    overflow: scroll;
    background-color: #ffffff;
    border-radius: 28px;
    /* Sombra sutil gris */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-height: auto;
}

/* Scrollbar personalizado para sidebar */
#sidebar .sidebar-nav::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #5e4b79;
    border-radius: 16px;
    background-clip: content-box;
    border: 4px solid transparent;
}
#sidebar .sidebar-nav::-webkit-scrollbar-track,
#sidebar .sidebar-nav::-webkit-scrollbar-corner {
    background-color: transparent;
    border: none;
    border-radius: 16px;
}

/* Caja "well" genérica */
.well {
    box-sizing: border-box;
    padding: 15px 6px 15px 15px;
    background-color: #ffffff;
    border: 0px transparent;
    border-radius: 24px;
    overflow: auto;
    box-shadow: inset 0 0 16px #f7f7f7, inset 0 0 42px #dfdfdf;
}

}

/* Sidebar nav estilo mejorado */
.well.sidebar-nav {
    background-color: #ffffff; /* Fondo blanco */
    color: #333333 !important; /* Texto gris oscuro, legible */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    border-radius: 8px;
    padding: 20px;
}
#topic-body table,
#topic-body table th,
#topic-body table td {
    border: none !important;
}

/* === MENÚS Y NAVEGACIÓN === */

/* Menú lateral oculto en mobile */
.gn-icon-menu-inner.x-toggle-toc-menu {
    background-color: #ffffff;
    display: none !important;
    pointer-events: none;
    visibility: hidden;
}

/* Encabezados activos y hover en nav */
.navbar .brand, 
.navbar .brand:hover, 
.navbar .nav > li > a, 
.navbar .nav > li > a:hover {
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    text-shadow: none !important;
}

/* Bloquear click en el logo */
.navbar .brand {
    pointer-events: none;
    cursor: default;
}

.nav-header.nav-header-sub.active > a,
.nav-header-sub > ul > li.active > a {
    background-color: #ececec !important;
}
.nav-header.nav-header-sub > a:hover,
.nav-header-sub > ul > li > a:hover {
    background-color: #f5f5f5 !important;
}

/* === TABLAS DE CONTENIDOS (TOC) Y SEPARADORES === */
#manual-toc li.divider,
#manual-toc-phone li.divider {
    border-top: 1px solid #eeeeee;
    border-bottom: none;
}

/* TOC textos y flechas */
#manual-toc > li > a { color: #221e20; text-shadow: 0 1px 3px rgba(80, 80, 80, 0.09); }
#manual-toc-phone > li > ul a {
    color: #221e20;
    /* Glow suave de gris claro a blanco */
    text-shadow: 
        0 1px 1px #f2f2f2,
        0 2px 3px #ffffff;
}
#manual-toc-phone > li > a {
    color: #00b189;
    font-weight: bold;
    border-radius: 24px;
}

/* === NAVBAR Y DROPDOWN === */
.navbar-inner {
    background-color: #f2f2f2 !important;
    border: none !important;
    box-shadow: none !important;
}
.navbar-search { background: transparent !important; }
.navbar-search .search-query {
    background: linear-gradient(to top, #00b388 0%, #007f66 100%) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border: 0px transparent !important;
    box-shadow: 0 0 6px rgba(0,179,136,0.3) !important;
    border-radius: 24px;
}
.navbar-search .search-query:focus {
    background-color: #f2f2f2;
    color: #ffffff;
    border-color: #00B388;
    outline: none;
    text-shadow: none;
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: #00B388;
    background-image: linear-gradient(to bottom, #00b188, #006a3e);
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    background-clip: padding-box;
    padding: 4px 0;
    min-width: 160px;
    margin: 1px 0 0;
    list-style: none;
    z-index: 1000;
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    float: left;
}
.dropdown-menu a { color: #ffffff; }
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #008e60;
    background-image: linear-gradient(to bottom, #00b188, #005a33);
}

/* Navbar botón */
.navbar .btn-navbar {
    background-color: #00b388;
    background-image: linear-gradient(to bottom, #00b388 0%, #221e20 100%);
    border: none;
    border-radius: 24px;
    color: white;
    text-shadow: 0 0 2px rgba(255,255,255,0.25);
}
.navbar .btn-navbar:hover {
    background-color: #00a378;
    background-image: linear-gradient(to bottom, #00d69c 0%, #1f1f1f 100%);
    border-color: #00b388;
    color: white;
    text-shadow: 0 0 3px rgba(255,255,255,0.3);
}
.navbar .browse {
    text-shadow: none !important;
}
.btn-primary {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.13);
    background: linear-gradient(to bottom, #00b189 0%, #00705c 100%);
    border: none;
    border-radius: 24px;
    transition: background 0.2s, color 0.2s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: linear-gradient(to bottom, #009777 0%, #005844 100%);
    color: #fff;
}
.manual.home .form-search input, .manual.search .form-search input {
    width: 100%;
    font-size: 14px;
    padding: 8px;
    border-radius: 24px;
}
input:focus, textarea:focus {
    border-color: rgba(0, 177, 137, 0.8);   /* #00b189 con opacidad */
    outline: 0;
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 8px rgba(0, 177, 137, 0.6);   /* #00b189 con opacidad */
}
a {
    color: #00b189;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover, a:focus {
    color: #00896c;
    text-decoration: underline;
}
#topic-header .highlight, #topic-body .highlight {
    background-color: #00b18933;
    padding: 2px;
    color: #00b189;
}

/* ==== LIMPIEZA DE INTERFAZ: OCULTAR ELEMENTOS NO DESEADOS ==== */

/* 1. Ocultar la línea vertical (divider) junto al logo/menu */
.navbar .divider-vertical {
    display: none !important;
}

/* 2. Ocultar el ícono/botón de impresión (print) */
.print-page,
.print-page-icon,
button[title="Print"],
a[title="Print"],
a[href*="print"] {
    display: none !important;
}

/* 3. Ocultar "Powered by Manula" y su logo en el footer */
#footer a.powered-by,
#footer img[alt="Manula.com"],
#footer span.powered-by,
#footer .powered-by {
    display: none !important;
}
/* Opcional: también puedes borrar todo el texto "Powered by" en línea, según estructura HTML */
#footer {
    /* Si queda un guion o espacio, lo puedes ocultar así: */
    color: #00B388; /* Mantiene sólo el copyright en verde si lo deseas */
}

/* Si el texto "Powered by" está en un  o similar, puedes agregar:
#footer span:contains('Powered by') { display: none !important; }
Pero ten en cuenta que :contains() no es estándar CSS puro.
*/

#footer {
    /* Esto ocultaría todo el texto */
    text-indent: -9999px;
    position: relative;
}

#footer::before {
    /* Y aquí puedes volver a mostrar solo el copyright, por ejemplo: */
    content: "Copyright © 2025 Terragene®";
    text-indent: 0;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #00B388;
}
body, html {
  height: 100%;
  overscroll-behavior: none;
}

.main-content {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Importante para momentum scroll en iOS */
  overscroll-behavior: contain;
}