/* ==========================================================================
   HotelDataHub — Docs styles
   Integrado con Bootstrap SB Admin 2 (Bootstrap 4)

   Color primario de docs: #25476a
   Hover/oscuro:           #1d3851
   Gradiente sidebar:      #25476a → #1a3349
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout general de la página de docs
   -------------------------------------------------------------------------- */

.docs-page {
    min-height: calc(100vh - 180px);
}

.docs-layout {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Sidebar de docs
   -------------------------------------------------------------------------- */

/*
 * El scroll en SB Admin 2 ocurre en el body, por lo que sticky no funciona
 * en el sidebar. La solución es convertir #wrapper en el contenedor de
 * viewport y dejar que #content-wrapper haga el scroll internamente.
 * Usamos :has(.docs-sidebar) para afectar solo las páginas de docs.
 */
#wrapper:has(.docs-sidebar) {
    height: 100vh;
    overflow: hidden;
}

#wrapper:has(.docs-sidebar) #content-wrapper {
    height: 100vh;
    overflow-y: auto;
    background-color: #ffffff;
}

.docs-sidebar {
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .docs-sidebar {
        width: 18rem !important;
    }

    .docs-sidebar .nav-item .nav-link {
        width: 18rem;
    }
}

.docs-sidebar-byfideltour {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.1rem;
}


.docs-sidebar .sidebar-heading {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 1rem 0.25rem;
    margin-top: 0.5rem;
}

.docs-nav-link-nested {
    font-size: 0.85rem;
    padding-left: 2.25rem !important;
}

.docs-nav-icon-nested {
    font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Folder collapse toggles
   -------------------------------------------------------------------------- */

.docs-sidebar .docs-folder-toggle {
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Wrap de títulos largos en el sidebar
   SB Admin 2 deja el <span> como display:inline sin reglas de wrap y el
   .nav-link mide 14rem con padding 1rem, dejando ~9.5rem útiles. Títulos
   como "Documentación de la API de HotelDataHub" se desbordan. Permitimos
   que partan a varias líneas y reducimos el padding derecho para ganar
   espacio horizontal.
   -------------------------------------------------------------------------- */

/*
 * SB Admin 2 fija width: 14rem en cada .nav-link (sb-admin-2.css:10538-10540)
 * y aplica margin: 0 1rem en los .collapse (sb-admin-2.css:10530-10533), por
 * lo que los nav-links anidados se desbordan ~2rem por la derecha. Forzamos
 * que el nav-link respete el ancho de su contenedor.
 */
.docs-sidebar .nav-item .nav-link {
    width: 100%;
    max-width: 100%;
    padding-right: 0.5rem;
    white-space: normal;
    box-sizing: border-box;
}

/* Reduce el margen lateral del panel de carpeta anidada para ganar más
   espacio horizontal a los nodos hijos. */
.docs-sidebar .nav-item .collapse,
.docs-sidebar .nav-item .collapsing {
    margin: 0 0.25rem;
}

.docs-sidebar .nav-item .nav-link span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

/* En folders (flex), el span debe poder ocupar el espacio restante y partir
   en varias líneas sin empujar a la chevron fuera del recuadro. */
.docs-sidebar .docs-folder-toggle .docs-node-title {
    flex: 1 1 auto;
    min-width: 0;
}

.docs-sidebar .docs-folder-chevron {
    margin-left: 0.35rem;
}

/* Oculta la chevron automática heredada de SB Admin 2 — usamos la nuestra
   (.docs-folder-chevron) que sí rota con .collapsed. */
.docs-sidebar .docs-folder-toggle::after {
    display: none;
}

.docs-sidebar .docs-folder-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Chevron points right when folder is collapsed */
.docs-sidebar .docs-folder-toggle.collapsed .docs-folder-chevron {
    transform: rotate(-90deg);
}

/* --------------------------------------------------------------------------
   Buscador del sidebar
   -------------------------------------------------------------------------- */

.docs-search-input {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding-right: 1.8rem;
}

.docs-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.docs-search-input:focus {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.docs-search-icon {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    pointer-events: none;
}

.docs-search-empty {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    padding: 0.5rem 0.25rem 0;
    text-align: center;
}

/* Filtro: ocultar nodos no coincidentes y resaltar matches */
.docs-node.docs-node-hidden {
    display: none !important;
}

.docs-node mark.docs-search-hit {
    background: #ffe066;
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
}

.docs-sidebar .docs-folder-children {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

/* Keep dark sidebar theme inside collapse panels */
.docs-sidebar .collapse,
.docs-sidebar .collapsing {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.docs-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Cabecera de página
   -------------------------------------------------------------------------- */

.docs-page-header {
    border-bottom: 1px solid #e3e6f0;
    padding-bottom: 1rem;
}

.docs-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2e3a4e;
    margin-bottom: 0.25rem;
}

.docs-page-description {
    font-size: 1rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cuerpo del contenido markdown (.docs-body)
   -------------------------------------------------------------------------- */

.docs-body {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #3d4457;
    max-width: 820px;
}

.docs-body h1,
.docs-body h2,
.docs-body h3,
.docs-body h4,
.docs-body h5,
.docs-body h6 {
    color: #2e3a4e;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.docs-body h1 { font-size: 1.6rem; border-bottom: 2px solid #e3e6f0; padding-bottom: 0.4rem; }
.docs-body h2 { font-size: 1.3rem; border-bottom: 1px solid #e3e6f0; padding-bottom: 0.3rem; }
.docs-body h3 { font-size: 1.1rem; }
.docs-body h4 { font-size: 1rem; }

/* Permalinks de los headings (generados por toc) */
.docs-body .headerlink {
    margin-left: 0.4rem;
    color: #b7bdc8;
    text-decoration: none;
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 0.15s;
}
.docs-body h1:hover .headerlink,
.docs-body h2:hover .headerlink,
.docs-body h3:hover .headerlink,
.docs-body h4:hover .headerlink { opacity: 1; }

/* --------------------------------------------------------------------------
   Párrafos y énfasis
   -------------------------------------------------------------------------- */

.docs-body p {
    margin-bottom: 1rem;
}

.docs-body strong {
    font-weight: 600;
    color: #2e3a4e;
}

.docs-body mark {
    background-color: #fff3cd;
    padding: 0 0.15em;
    border-radius: 2px;
}

.docs-body del {
    color: #888;
}

/* --------------------------------------------------------------------------
   Listas
   -------------------------------------------------------------------------- */

.docs-body ul,
.docs-body ol {
    padding-left: 1.6rem;
    margin-bottom: 1rem;
}

.docs-body li {
    margin-bottom: 0.25rem;
}

.docs-body li > ul,
.docs-body li > ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Task lists (pymdownx.tasklist) */
.docs-body .task-list-item {
    list-style: none;
    margin-left: -1.4rem;
}

.docs-body .task-list-item input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: #25476a;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.docs-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    overflow-x: auto;
    display: block;
}

.docs-body thead {
    background-color: #f0f2f8;
}

.docs-body th {
    font-weight: 600;
    text-align: left;
    padding: 0.55rem 0.8rem;
    border: 1px solid #d1d5e0;
    color: #2e3a4e;
    white-space: nowrap;
}

.docs-body td {
    padding: 0.5rem 0.8rem;
    border: 1px solid #d1d5e0;
    vertical-align: top;
}

.docs-body tbody tr:nth-child(even) {
    background-color: #f8f9fc;
}

.docs-body tbody tr:hover {
    background-color: #eef0f9;
}

/* --------------------------------------------------------------------------
   Blockquotes
   -------------------------------------------------------------------------- */

.docs-body blockquote {
    border-left: 4px solid #25476a;
    background-color: #f0f4f8;
    margin: 1.25rem 0;
    padding: 0.75rem 1.25rem;
    border-radius: 0 4px 4px 0;
    color: #4a5568;
}

.docs-body blockquote p {
    margin-bottom: 0;
}

.docs-body blockquote blockquote {
    border-left-color: #a0aec0;
    background-color: #edf0f8;
    margin: 0.5rem 0 0 0;
}

/* --------------------------------------------------------------------------
   Código
   -------------------------------------------------------------------------- */

/* Código en línea */
.docs-body code {
    background-color: #f0f2f8;
    color: #c7254e;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.875em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Bloques de código (envueltos por codehilite) */
.docs-body .codehilite {
    border-radius: 6px;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}

.docs-body .codehilite pre {
    margin: 0;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
}

/* Bloques de código sin lenguaje */
.docs-body pre {
    background-color: #f0f2f8;
    border: 1px solid #d1d5e0;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.docs-body pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* --------------------------------------------------------------------------
   Admonitions (extension admonition + pymdownx)
   -------------------------------------------------------------------------- */

.docs-body .admonition {
    border-radius: 4px;
    border-left: 4px solid #6c757d;
    margin: 1.25rem 0;
    padding: 0;
    overflow: hidden;
}

.docs-body .admonition-title {
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.docs-body .admonition > *:not(.admonition-title) {
    padding: 0.5rem 1rem 0.75rem;
    margin: 0;
}

/* note */
.docs-body .admonition.note {
    border-left-color: #25476a;
    background-color: #eef3f8;
}
.docs-body .admonition.note .admonition-title {
    background-color: #d0dde9;
    color: #1d3851;
}
.docs-body .admonition.note .admonition-title::before {
    content: "ℹ ";
}

/* tip */
.docs-body .admonition.tip {
    border-left-color: #1cc88a;
    background-color: #f0fbf6;
}
.docs-body .admonition.tip .admonition-title {
    background-color: #c7f0e0;
    color: #0d6e4e;
}
.docs-body .admonition.tip .admonition-title::before {
    content: "💡 ";
}

/* warning */
.docs-body .admonition.warning {
    border-left-color: #f6c23e;
    background-color: #fffbf0;
}
.docs-body .admonition.warning .admonition-title {
    background-color: #fdefc3;
    color: #856404;
}
.docs-body .admonition.warning .admonition-title::before {
    content: "⚠ ";
}

/* danger */
.docs-body .admonition.danger {
    border-left-color: #e74a3b;
    background-color: #fff5f5;
}
.docs-body .admonition.danger .admonition-title {
    background-color: #f8d0cd;
    color: #8b1e17;
}
.docs-body .admonition.danger .admonition-title::before {
    content: "🔴 ";
}

/* --------------------------------------------------------------------------
   Tabs (pymdownx.tabbed con alternate_style=True)
   -------------------------------------------------------------------------- */

.docs-body .tabbed-set {
    margin-bottom: 1.25rem;
    border: 1px solid #d1d5e0;
    border-radius: 4px;
    overflow: hidden;
}

.docs-body .tabbed-labels {
    display: flex;
    flex-wrap: wrap;
    background-color: #f0f2f8;
    border-bottom: 1px solid #d1d5e0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.docs-body .tabbed-labels > label {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: #6c757d;
    border-right: 1px solid #d1d5e0;
    transition: background 0.15s, color 0.15s;
    margin: 0;
}

.docs-body .tabbed-labels > label:hover {
    background-color: #e3e6f0;
    color: #3d4457;
}

.docs-body .tabbed-set > input { display: none; }

.docs-body .tabbed-set > input:checked + label {
    background-color: #ffffff;
    color: #25476a;
    font-weight: 600;
    border-bottom: 2px solid #25476a;
    margin-bottom: -1px;
}

.docs-body .tabbed-content {
    padding: 1rem 1.25rem;
    background: #ffffff;
}

.docs-body .tabbed-content .tabbed-block {
    display: none;
}

.docs-body .tabbed-set > input:nth-child(1):checked ~ .tabbed-content .tabbed-block:nth-child(1),
.docs-body .tabbed-set > input:nth-child(2):checked ~ .tabbed-content .tabbed-block:nth-child(2),
.docs-body .tabbed-set > input:nth-child(3):checked ~ .tabbed-content .tabbed-block:nth-child(3),
.docs-body .tabbed-set > input:nth-child(4):checked ~ .tabbed-content .tabbed-block:nth-child(4),
.docs-body .tabbed-set > input:nth-child(5):checked ~ .tabbed-content .tabbed-block:nth-child(5) {
    display: block;
}

/* --------------------------------------------------------------------------
   Footnotes
   -------------------------------------------------------------------------- */

.docs-body .footnote {
    font-size: 0.85rem;
    color: #6c757d;
    border-top: 1px solid #e3e6f0;
    margin-top: 2rem;
    padding-top: 1rem;
}

.docs-body .footnote ol {
    padding-left: 1.2rem;
}

.docs-body a.footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    text-decoration: none;
    font-weight: 600;
}

.docs-body a.footnote-backref {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Definition lists
   -------------------------------------------------------------------------- */

.docs-body dl {
    margin-bottom: 1.25rem;
}

.docs-body dt {
    font-weight: 600;
    color: #2e3a4e;
    margin-top: 0.75rem;
}

.docs-body dd {
    padding-left: 1.5rem;
    color: #4a5568;
    margin-bottom: 0.25rem;
    border-left: 2px solid #e3e6f0;
    margin-left: 0;
    padding-left: 1rem;
}

/* --------------------------------------------------------------------------
   Línea horizontal
   -------------------------------------------------------------------------- */

.docs-body hr {
    border: none;
    border-top: 1px solid #e3e6f0;
    margin: 2rem 0;
}

/* --------------------------------------------------------------------------
   Enlaces
   -------------------------------------------------------------------------- */

.docs-body a {
    color: #25476a;
    text-decoration: none;
}

.docs-body a:hover {
    color: #1d3851;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Imágenes
   -------------------------------------------------------------------------- */

.docs-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #e3e6f0;
    margin: 0.5rem 0 1rem;
}

/* --------------------------------------------------------------------------
   TOC lateral
   -------------------------------------------------------------------------- */

.docs-toc {
    position: sticky;
    top: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid #e3e6f0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.docs-toc-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #a0aec0;
    margin-bottom: 0.5rem;
}

/* TOC generada por python-markdown (lista <div class="toc"><ul>...) */
.docs-toc .toc ul,
.docs-toc > div > ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.82rem;
}

.docs-toc .toc ul ul,
.docs-toc > div > ul ul {
    padding-left: 0.85rem;
}

.docs-toc .toc a,
.docs-toc > div > ul a {
    display: block;
    color: #6c757d;
    text-decoration: none;
    padding: 0.15rem 0;
    line-height: 1.4;
    transition: color 0.15s;
}

.docs-toc .toc a:hover,
.docs-toc > div > ul a:hover {
    color: #25476a;
}

/* --------------------------------------------------------------------------
   Color primario: overrides del vendor SB Admin 2 para el contexto de docs
   Anula el gradient-primary azul por el azul marino #25476a de HotelDataHub.
   -------------------------------------------------------------------------- */

/* Sidebar gradient */
.docs-sidebar.bg-gradient-primary,
.docs-sidebar {
    background-color: #25476a !important;
    background-image: linear-gradient(180deg, #25476a 10%, #1a3349 100%) !important;
}

/* text-primary dentro de docs (cards, breadcrumb, iconos) */
#wrapper:has(.docs-sidebar) .text-primary {
    color: #25476a !important;
}

/* border-primary / border-left accent */
#wrapper:has(.docs-sidebar) .border-left-primary {
    border-left-color: #25476a !important;
}

/* Scroll-to-top button */
#wrapper:has(.docs-sidebar) .scroll-to-top {
    background-color: #25476a;
}

#wrapper:has(.docs-sidebar) .scroll-to-top:hover {
    background-color: #1d3851;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .docs-body {
        max-width: 100%;
    }
}