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

/* Fondo general y tipografía */
body {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    background-color: #18181B !important;
}
/* Bloquear la selección de texto */
body, * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
img {
    border-radius: 8px !important;
}
#topic-body blockquote {
    padding: 0px 0px 0px 15px;
    margin: 0px 0px 18px 0px;
    border-left: 4px solid #353538;
}
#topic-header h1 {
    color: #10b982;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 800;
}
.page-header {
padding-bottom: 10px;
    margin: 15px 0;
    border-bottom: 1px solid #353538;
}
h1 {
    color: #10b982;
}
.search-result h4, .search-result h5, .search-result h6 {
    /* opacity: .8; */
    color: #ffffff !important;
}
.search-result p {
    /* opacity: .8; */
    color: #ffffff !important;
}

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

/* Contenedor de tabla de contenidos (sidebar) */
#sidebar .sidebar-nav {
    box-sizing: border-box;
    padding: 15px 14px 15px 15px;
    overflow: scroll;
    background-color: #242426;
    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: #242426;
    border: 0px transparent;
    border-radius: 24px;
    overflow: auto;
    /* Sombra interna clara comentada, prueba sin ellas */
    /* box-shadow: inset 0 0 16px #f7f7f7, inset 0 0 42px #dfdfdf; */
    position: relative;
    z-index: 1;
}

.well::after {
    content: '';
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 28px;
    background: linear-gradient(135deg, #463860 0%, #242426 100%);
    opacity: 0;
    filter: blur(6px);   /* más sutil */
    pointer-events: none;
}
.well {
    /* Tu estilo actual aquí */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Internet Explorer y Edge Legacy */
}

.well::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
}

/* Sidebar nav estilo mejorado */
.well.sidebar-nav {
    background-color: #242426; /* Fondo blanco */
    color: #10b982 !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: #242426;
    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: none;
    font-family: 'Roboto', sans-serif;
    text-shadow: none !important;
}

/* Bloquear click en el logo */
.navbar .brand {
    pointer-events: none;
    cursor: default;
}
/* Activo */
.nav-header.nav-header-sub.active > a,
.nav-header-sub > ul > li.active > a {
    background-color: #19191a !important;
    color: #fff !important;
    transition: background 0.15s;
}

/* Hover */
.nav-header.nav-header-sub > a:hover,
.nav-header-sub > ul > li > a:hover {
    background-color: #353538 !important;
    color: #fff !important;
    transition: background 0.15s;
}
#content .topic-prev-next {
    border-top: 1px solid #353538;
    border-bottom: none;
    margin-top: 0px;
}
/* === TABLAS DE CONTENIDOS (TOC) Y SEPARADORES === */

#manual-toc li.divider, #manual-toc-phone li.divider {
    border-top: 1px solid #353538;
    border-bottom: none;
}

/* TOC textos y flechas */
#manual-toc > li > a { color: #ffffff; }
#manual-toc-phone > li > ul a {
    color: #ffffff;
}
#manual-toc-phone > li > a {
    color: #10b982;
    font-weight: bold;
    border-radius: 24px;
}
/* Eliminar interferencias previas */
#manual-toc li a i.icon-chevron-down,
#manual-toc li a i.icon-chevron-right,
#manual-toc-phone li a i.icon-chevron-down,
#manual-toc-phone li a i.icon-chevron-right {
    background: none !important;
    font-style: normal;
    display: inline-block;
    width: 1.2em;
    text-align: center;
    vertical-align: middle;
}
/* Flecha hacia abajo */
#manual-toc li a i.icon-chevron-down::before,
#manual-toc-phone li a i.icon-chevron-down::before {
    content: 'ᐯ';
    color: #10b982;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1;
    vertical-align: middle;
}

/* Flecha hacia la derecha */
#manual-toc li a i.icon-chevron-right::before,
#manual-toc-phone li a i.icon-chevron-right::before {
    content: 'ᐳ';
    color: #10b982;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1;
    vertical-align: middle;
}
#manual-toc li a i.x-show, #manual-toc-phone li a i.x-show {
    position: absolute;
    top: 7px;
    left: 0px;
    opacity: 1;
}

/* === NAVBAR Y DROPDOWN === */
.navbar-inner {
    background-color: #18181B !important;
    border: none !important;
    box-shadow: none !important;
}
.navbar-search { background: transparent !important; }
.navbar-search .search-query {
    background: linear-gradient(to top, #10b982 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: #18181B;
    color: #ffffff;
    border-color: #10b982;
    outline: none;
    text-shadow: none;
}
.navbar-search .search-query {
    background: linear-gradient(to top, #10b982 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;
}

/* Para Chrome, Safari y otros Webkit browsers */
.navbar-search .search-query:-webkit-autofill {
    background-image: linear-gradient(to top, #10b982 0%, #007f66 100%) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #242426 !important;
}
.navbar-search .search-query:-webkit-autofill:focus,
.navbar-search .search-query:-webkit-autofill:hover,
.navbar-search .search-query:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #10b982 inset !important;
    background: linear-gradient(to top, #10b982 0%, #007f66 100%) !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Para Firefox (menos necesario, pero puede ayudar): */
/*.navbar-search .search-query:-moz-autofill {
    box-shadow: 0 0 0 1000px #10b982 inset !important;
    color: #ffffff !important;
    background: linear-gradient(to top, #10b982 0%, #007f66 100%) !important;
}

/* Para Edge moderno (similar a Chrome): */
.navbar-search .search-query:-ms-input-placeholder {
    background: linear-gradient(to top, #10b982 0%, #007f66 100%) !important;
}

.navbar-search .search-query::placeholder {  /* Chrome, Firefox, Opera, Safari  */
  color: #ffffff !important;
  opacity: 1 !important;
}*/

.navbar-search .search-query::-webkit-input-placeholder { /* WebKit browsers */
  color: #ffffff !important;
}

.navbar-search .search-query:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ffffff !important;
}

.navbar-search .search-query::-ms-input-placeholder { /* Microsoft Edge */
  color: #ffffff !important;
}


/* Dropdown Menu */
.dropdown-menu {
    background-color: #10b982;
    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: ##6a5a8c;
    text-decoration: none;
    background-color: #008e60;
    background-image: linear-gradient(to bottom, #00b188, #005a33);
}

/* Navbar botón */
.navbar .btn-navbar {
    background-color: #10b982;
    background-image: linear-gradient(to bottom, #10b982 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: #10b982;
    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, #10b982 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);   /* #10b982 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);   /* #10b982 con opacidad */
}
a {
    color: #10b982;
    text-decoration: none;
    transition: color 0.2s;
}

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

/* ==== 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: #10b982; /* 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 */
    border-top: 1px solid #353538;
    text-indent: -9999px;
    position: relative;
}

#footer::before {
    /* Y aquí puedes volver a mostrar solo el copyright, por ejemplo: */
    content: "Copyright © 2025";
    text-indent: 0;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #10b982;
}
.fancybox-skin {
    position: relative;
    background: none !important;
    text-shadow: none;
    box-shadow: none !important;
}
.icon-chevron-right {
    background: none !important;  /* Elimina el ícono de sprite */
    position: relative;
}

.icon-chevron-right::after {
    content: 'ᐳ'; /* O prueba con '→', '►', '➔', etc. */
    color: #10b982;  /* Cambia el color a tu gusto */
    font-size: 1.4em; /* Cambia el tamaño a tu gusto */
    position: absolute;
    left: 0;  /* Ajusta la posición si lo necesitas */
    top: 0;
}
.icon-chevron-left {
    background: none !important;
    position: relative;
}

.icon-chevron-left::after {
    content: 'ᐸ'; /* O prueba con '←', '◄', '⟵', etc. */
    color: #10b982;  /* Cambia el color a tu gusto */
    font-size: 1.4em; /* Cambia el tamaño a tu gusto */
    position: absolute;
    left: 0;
    top: 0;
}
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;
}