/* ============================================================
   OrtaLegal · Renovación de navegación v1.1.1
   Capa aislada para cabecera, menú lateral y navegación móvil.
   Cargar después de ortalegal-visual.css y topbar-shell.css.
   ============================================================ */

:root{
    --ol-app-header-height:72px;
    --ol-app-header-height-mobile:64px;
    --ol-app-sidebar-width:272px;
    --ol-app-sidebar-width-medium:232px;
    --ol-nav-active-bg:rgba(189,146,80,.13);
    --ol-nav-hover-bg:rgba(255,255,255,.62);
    --ol-nav-icon-bg:rgba(11,40,69,.065);
    --ol-nav-divider:rgba(214,190,157,.62);
}

body.dark{
    --ol-nav-active-bg:rgba(215,189,124,.12);
    --ol-nav-hover-bg:rgba(255,255,255,.055);
    --ol-nav-icon-bg:rgba(255,255,255,.075);
    --ol-nav-divider:rgba(215,189,124,.2);
}

/* ---------- Dimensiones y unión escritorio ---------- */

body.ol-app{
    padding-top:var(--ol-app-header-height);
}

body.ol-app .topbar{
    height:var(--ol-app-header-height);
    min-height:var(--ol-app-header-height);
}

body.ol-logged{
    --ol-fixed-sidebar-width:var(--ol-app-sidebar-width);
}

body.ol-logged .ol-global-topbar{
    grid-template-columns:var(--ol-fixed-sidebar-width) minmax(0,1fr) auto;
    min-height:var(--ol-app-header-height);
}

/*
 * La cabecera contiene cuatro hijos directos (marca, control de plegado,
 * navegación y acciones), pero solo tres columnas visuales. Se asigna cada
 * pieza a una celda explícita para impedir que el control de plegado genere
 * una fila implícita y desplace las acciones debajo del logotipo.
 */
body.ol-logged .ol-global-topbar > .brand{
    grid-column:1;
    grid-row:1;
}

body.ol-logged .ol-global-topbar > .ol-topbar-navigation{
    grid-column:2;
    grid-row:1;
}

body.ol-logged .ol-global-topbar > .ol-topbar-actions{
    grid-column:3;
    grid-row:1;
    min-width:max-content;
}

body.ol-logged .ol-global-topbar > .ol-sidebar-collapse-top{
    grid-column:1;
    grid-row:1;
}

body.ol-logged .ol-global-topbar .brand{
    height:var(--ol-app-header-height)!important;
    padding-inline:24px;
}

body.ol-logged .ol-global-topbar .brand-wording strong{
    font-size:.88rem;
}

body.ol-logged .ol-global-topbar .brand-wording small{
    font-size:.68rem;
}

body.ol-logged .layout{
    --ol-fixed-sidebar-width:var(--ol-app-sidebar-width);
    min-height:calc(100vh - var(--ol-app-header-height));
    padding-left:var(--ol-fixed-sidebar-width);
}

body.ol-logged .sidebar{
    top:var(--ol-app-header-height)!important;
    width:var(--ol-fixed-sidebar-width);
    padding:22px 14px 24px;
    border-right:1px solid var(--ol-nav-divider)!important;
    box-shadow:12px 0 32px -38px rgba(16,32,51,.42)!important;
}

body.ol-logged .sidebar .nav{
    gap:18px;
    padding:0 2px 122px 0;
}

body.ol-logged .sidebar::after{
    bottom:22px;
    width:min(108px,44%);
    opacity:.055;
}

body.dark.ol-logged .sidebar::after{
    opacity:.065;
}

/* Una única línea vertical y una línea horizontal desde el contenido. */
body.ol-logged .topbar::before{
    width:var(--ol-fixed-sidebar-width)!important;
    border:0!important;
    box-shadow:inset -1px 0 0 var(--ol-nav-divider)!important;
}

body.ol-logged .topbar::after{
    left:var(--ol-fixed-sidebar-width)!important;
    height:1px!important;
    background:var(--ol-line-2)!important;
}

/* ---------- Navegación lateral ---------- */

body.ol-logged .sidebar .nav-section{
    gap:5px;
}

body.ol-logged .sidebar .nav-heading{
    margin:0 10px 7px;
    font-size:.62rem;
    letter-spacing:.12em;
    color:var(--ol-muted);
}

body.ol-logged .sidebar .nav a{
    min-height:43px;
    gap:10px;
    padding:7px 10px;
    border:1px solid transparent;
    border-radius:12px;
    font-size:.82rem;
    font-weight:760;
    box-shadow:none;
    transform:none!important;
    transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}

body.ol-logged .sidebar .nav a:hover{
    background:var(--ol-nav-hover-bg);
    border-color:rgba(11,40,69,.075);
    box-shadow:none;
    transform:none!important;
}

body.dark.ol-logged .sidebar .nav a:hover{
    border-color:rgba(255,255,255,.07);
}

body.ol-logged .sidebar .nav a.active{
    background:var(--ol-nav-active-bg);
    border-color:rgba(189,146,80,.18);
    box-shadow:inset 3px 0 0 var(--ol-gold);
    color:var(--ol-navy)!important;
}

body.dark.ol-logged .sidebar .nav a.active{
    color:#f6f1e8!important;
    border-color:rgba(215,189,124,.12);
}

.nav-icon{
    width:31px;
    height:31px;
    flex:0 0 31px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:var(--ol-nav-icon-bg);
    color:#53687d;
    transition:background-color .16s ease,color .16s ease;
}

.nav-icon svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

body.ol-logged .sidebar .nav a:hover .nav-icon{
    color:var(--ol-navy);
    background:rgba(11,40,69,.09);
}

body.ol-logged .sidebar .nav a.active .nav-icon{
    color:#956116;
    background:rgba(189,146,80,.18);
}

body.dark .nav-icon{
    color:#b6c3cf;
}

body.dark.ol-logged .sidebar .nav a:hover .nav-icon{
    color:#f1f5f8;
    background:rgba(255,255,255,.1);
}

body.dark.ol-logged .sidebar .nav a.active .nav-icon{
    color:#ebc27e;
    background:rgba(215,189,124,.14);
}

/* Desactiva cualquier animación heredada del marcador anterior. */
body.ol-logged .sidebar .nav a.active .nav-icon::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

/* ---------- Cabecera ---------- */

.ol-topbar-navigation{
    gap:10px;
    padding-inline:18px;
}

.ol-home-link,
.ol-topbar-icon-button,
.ol-sidebar-toggle{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:11px;
    box-shadow:none;
}

.ol-home-link:hover,
.ol-topbar-icon-button:hover,
.ol-topbar-icon-button[aria-expanded="true"],
.ol-sidebar-toggle:hover,
.ol-sidebar-toggle[aria-expanded="true"]{
    box-shadow:none;
    transform:none;
}

.ol-topbar-actions{
    padding-left:8px;
}

.ol-user-trigger{
    min-height:44px;
    border-radius:13px;
}

.ol-user-trigger:hover,
.ol-user-trigger[aria-expanded="true"]{
    box-shadow:none;
}

.ol-user-avatar{
    width:36px;
    height:36px;
}

.ol-sidebar-toggle{
    display:none;
    padding:0;
    border:1px solid rgba(11,40,69,.11);
    background:rgba(255,255,255,.74);
    color:#536273;
    place-items:center;
    cursor:pointer;
}

.ol-sidebar-toggle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
}

body.dark .ol-sidebar-toggle{
    background:rgba(13,36,56,.86);
    border-color:rgba(255,255,255,.1);
    color:#e4ebf2;
}

.ol-sidebar-backdrop{
    display:none;
}

/* ---------- Anchura intermedia ---------- */

@media (min-width:861px) and (max-width:1180px){
    body.ol-logged,
    body.ol-logged .layout{
        --ol-fixed-sidebar-width:var(--ol-app-sidebar-width-medium);
    }

    body.ol-logged .ol-global-topbar{
        grid-template-columns:var(--ol-fixed-sidebar-width) minmax(0,1fr) auto;
    }

    body.ol-logged .ol-global-topbar .brand{
        padding-inline:19px;
    }

    body.ol-logged .sidebar{
        padding-inline:11px;
    }
}

/* ---------- Menú móvil tipo drawer ---------- */

@media (max-width:860px){
    body.ol-app{
        padding-top:var(--ol-app-header-height-mobile);
    }

    body.ol-app .topbar,
    body.ol-logged .ol-global-topbar{
        height:var(--ol-app-header-height-mobile)!important;
        min-height:var(--ol-app-header-height-mobile);
    }

    body.ol-logged .ol-global-topbar{
        grid-template-columns:auto minmax(0,1fr) auto;
        padding:0 9px!important;
    }

    body.ol-logged .ol-global-topbar .brand{
        height:var(--ol-app-header-height-mobile)!important;
        padding:0 3px;
    }

    body.ol-logged .ol-global-topbar .brand-logo-header{
        width:36px;
        height:36px;
    }

    .ol-topbar-navigation{
        gap:7px;
        padding:0 7px;
    }

    .ol-sidebar-toggle{
        display:grid;
    }

    .ol-breadcrumbs{
        min-width:0;
    }

    .ol-breadcrumbs strong{
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.ol-logged .layout{
        display:block;
        min-height:calc(100vh - var(--ol-app-header-height-mobile));
        padding-left:0;
    }

    body.ol-logged .sidebar{
        position:fixed!important;
        top:var(--ol-app-header-height-mobile)!important;
        left:0;
        bottom:0;
        z-index:86;
        width:min(84vw,310px);
        height:auto;
        display:flex;
        flex-direction:column;
        padding:19px 13px 24px;
        overflow:hidden!important;
        border:0!important;
        border-right:1px solid var(--ol-nav-divider)!important;
        border-bottom:0!important;
        box-shadow:18px 0 48px rgba(7,26,45,.2)!important;
        transform:translateX(calc(-100% - 8px));
        visibility:hidden;
        transition:transform .22s ease,visibility 0s linear .22s;
    }

    body.ol-sidebar-open .sidebar{
        transform:translateX(0);
        visibility:visible;
        transition:transform .22s ease,visibility 0s linear 0s;
    }

    body.ol-logged .sidebar .nav{
        display:grid;
        flex:1 1 auto;
        gap:18px;
        width:100%;
        min-height:0;
        padding:0 2px 92px 0;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    body.ol-logged .sidebar .nav-section{
        display:grid;
    }

    body.ol-logged .sidebar .nav-heading{
        display:block;
    }

    body.ol-logged .sidebar .nav a{
        width:100%;
        white-space:normal;
    }

    body.ol-logged .sidebar::after{
        bottom:18px;
        width:86px;
    }

    .ol-sidebar-backdrop{
        position:fixed;
        inset:var(--ol-app-header-height-mobile) 0 0;
        z-index:84;
        width:auto;
        height:auto;
        padding:0;
        border:0;
        background:rgba(7,26,45,.38);
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
        cursor:default;
    }

    .ol-sidebar-backdrop:not([hidden]){
        display:block;
    }

    body.ol-sidebar-open{
        overflow:hidden;
    }

    .ol-topbar-popover{
        top:calc(var(--ol-app-header-height-mobile) + 6px);
    }

    .content{
        padding:22px 16px 44px;
    }
}

@media (max-width:620px){
    .ol-topbar-navigation{
        padding-inline:4px;
    }

    .ol-sidebar-toggle,
    .ol-topbar-icon-button{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .ol-user-avatar{
        width:36px;
        height:36px;
    }

    .ol-breadcrumbs strong{
        max-width:28vw;
    }
}

@media (prefers-reduced-motion:reduce){
    body.ol-logged .sidebar{
        transition:none!important;
    }
}

/* ============================================================
   OrtaLegal · Navegación v1.1.1
   Cabecera de marca integrada, lateral contraíble y pie fijo.
   ============================================================ */

:root{
    --ol-app-sidebar-collapsed-width:78px;
    --ol-sidebar-surface:
        linear-gradient(180deg,#fffdf8 0%,#fbf7f0 100%),
        radial-gradient(circle at 0 0,rgba(189,146,80,.13),transparent 21rem);
    --ol-sidebar-footer-line:rgba(214,190,157,.52);
}

body.dark{
    --ol-sidebar-surface:linear-gradient(180deg,#0b2035 0%,#081a2d 100%);
    --ol-sidebar-footer-line:rgba(215,189,124,.16);
}

.ol-sidebar-collapse,
.ol-sidebar-footer-toggle{
    font:inherit;
}

.ol-sidebar-collapse-top{
    display:none;
}

@media (min-width:861px){
    body.ol-logged .topbar::before,
    body.ol-logged .sidebar{
        background:var(--ol-sidebar-surface)!important;
    }

    body.ol-logged .ol-global-topbar .brand{
        padding-inline:20px 28px;
    }

    body.ol-logged .ol-global-topbar .brand-logo-header{
        width:44px;
        height:44px;
        flex-basis:44px;
    }

    body.ol-logged .sidebar{
        position:fixed!important;
        top:var(--ol-app-header-height)!important;
        bottom:0!important;
        left:0!important;
        height:calc(100dvh - var(--ol-app-header-height))!important;
        min-height:0!important;
        box-sizing:border-box;
        padding:20px 14px 14px;
        overflow:hidden!important;
    }

    body.ol-logged .sidebar .nav{
        flex:1 1 auto;
        min-height:0;
        padding:0 2px 14px 0;
        overflow-y:auto;
        overflow-x:hidden;
    }

    body.ol-logged .sidebar::after{
        display:none!important;
        content:none!important;
    }

    .ol-sidebar-collapse-top{
        position:relative;
        top:auto;
        left:auto;
        z-index:5;
        width:28px;
        height:28px;
        display:grid;
        place-items:center;
        align-self:center;
        justify-self:end;
        margin-right:-14px;
        padding:0;
        border:1px solid var(--ol-nav-divider);
        border-radius:999px;
        background:#fffdf8;
        color:#647486;
        box-shadow:0 5px 16px rgba(11,40,69,.09);
        cursor:pointer;
        transform:none;
        transition:transform .2s ease,border-color .16s ease,color .16s ease,background-color .16s ease,box-shadow .16s ease;
    }

    .ol-sidebar-collapse-top:hover,
    .ol-sidebar-collapse-top:focus-visible{
        border-color:rgba(189,146,80,.62);
        color:#956116;
        box-shadow:0 6px 18px rgba(11,40,69,.13);
        outline:none;
    }

    body.dark .ol-sidebar-collapse-top{
        background:#102a43;
        color:#d6e0ea;
        border-color:rgba(215,189,124,.24);
    }

    .ol-sidebar-collapse-top svg,
    .ol-sidebar-footer-icon svg{
        width:16px;
        height:16px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
        transition:transform .2s ease;
    }

    .ol-sidebar-footer{
        position:relative;
        z-index:3;
        flex:0 0 auto;
        display:grid;
        gap:10px;
        padding:13px 3px 2px;
        border-top:1px solid var(--ol-sidebar-footer-line);
    }

    .ol-sidebar-footer-toggle{
        width:100%;
        min-height:39px;
        display:flex;
        align-items:center;
        gap:10px;
        padding:7px 9px;
        border:1px solid transparent;
        border-radius:10px;
        background:transparent;
        color:#56697c;
        cursor:pointer;
        text-align:left;
        font-size:.75rem;
        font-weight:780;
        transition:background-color .16s ease,border-color .16s ease,color .16s ease;
    }

    .ol-sidebar-footer-toggle:hover,
    .ol-sidebar-footer-toggle:focus-visible{
        background:rgba(255,255,255,.58);
        border-color:rgba(11,40,69,.07);
        color:var(--ol-navy);
        outline:none;
    }

    body.dark .ol-sidebar-footer-toggle{
        color:#bcc9d4;
    }

    body.dark .ol-sidebar-footer-toggle:hover,
    body.dark .ol-sidebar-footer-toggle:focus-visible{
        background:rgba(255,255,255,.055);
        border-color:rgba(255,255,255,.07);
        color:#fff;
    }

    .ol-sidebar-footer-icon{
        width:29px;
        height:29px;
        flex:0 0 29px;
        display:grid;
        place-items:center;
        border-radius:8px;
        background:var(--ol-nav-icon-bg);
    }

    .ol-sidebar-version{
        display:flex;
        align-items:baseline;
        justify-content:space-between;
        gap:8px;
        padding:0 10px 2px;
        color:var(--ol-muted);
        font-size:.63rem;
        line-height:1.25;
        white-space:nowrap;
    }

    .ol-sidebar-version strong{
        color:#485d71;
        font-size:.67rem;
        font-weight:850;
        letter-spacing:.01em;
    }

    body.dark .ol-sidebar-version strong{
        color:#dce5ed;
    }

    /* Estado contraído. La preferencia se conserva en el navegador. */
    body.ol-sidebar-collapsed{
        --ol-fixed-sidebar-width:var(--ol-app-sidebar-collapsed-width);
    }

    body.ol-sidebar-collapsed .ol-global-topbar{
        grid-template-columns:var(--ol-app-sidebar-collapsed-width) minmax(0,1fr) auto;
    }

    body.ol-sidebar-collapsed .layout{
        --ol-fixed-sidebar-width:var(--ol-app-sidebar-collapsed-width);
        padding-left:var(--ol-app-sidebar-collapsed-width);
    }

    body.ol-sidebar-collapsed .sidebar{
        width:var(--ol-app-sidebar-collapsed-width);
        padding-inline:10px;
    }

    body.ol-sidebar-collapsed .ol-global-topbar .brand{
        justify-content:center;
        padding:0 15px 0 8px!important;
    }

    body.ol-sidebar-collapsed .ol-global-topbar .brand-logo-header{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    body.ol-sidebar-collapsed .brand-wording,
    body.ol-sidebar-collapsed .sidebar .nav-heading,
    body.ol-sidebar-collapsed .sidebar .nav a > span:last-child,
    body.ol-sidebar-collapsed .ol-sidebar-footer-copy,
    body.ol-sidebar-collapsed .ol-sidebar-version{
        display:none!important;
    }

    body.ol-sidebar-collapsed .sidebar .nav{
        padding-right:0;
    }

    body.ol-sidebar-collapsed .sidebar .nav-section{
        gap:7px;
    }

    body.ol-sidebar-collapsed .sidebar .nav-section + .nav-section{
        padding-top:14px;
        border-top:1px solid var(--ol-sidebar-footer-line);
    }

    body.ol-sidebar-collapsed .sidebar .nav a{
        width:48px;
        min-height:46px;
        justify-content:center;
        gap:0;
        margin-inline:auto;
        padding:7px;
    }

    body.ol-sidebar-collapsed .sidebar .nav a.active{
        box-shadow:inset 3px 0 0 var(--ol-gold);
    }

    body.ol-sidebar-collapsed .ol-sidebar-footer{
        padding-inline:0;
    }

    body.ol-sidebar-collapsed .ol-sidebar-footer-toggle{
        width:48px;
        justify-content:center;
        margin-inline:auto;
        padding:7px;
    }

    body.ol-sidebar-collapsed .ol-sidebar-collapse-top{
        transform:rotate(180deg);
    }

    body.ol-sidebar-collapsed .ol-sidebar-footer-icon svg{
        transform:rotate(180deg);
    }
}

@media (max-width:860px){
    .ol-sidebar-collapse-top{
        display:none!important;
    }

    body.ol-logged .sidebar{
        background:var(--ol-sidebar-surface)!important;
    }

    body.ol-logged .sidebar .nav{
        padding-bottom:14px;
    }

    body.ol-logged .sidebar::after{
        display:none!important;
        content:none!important;
    }

    .ol-sidebar-footer{
        flex:0 0 auto;
        padding:12px 8px 2px;
        border-top:1px solid var(--ol-sidebar-footer-line);
    }

    .ol-sidebar-footer-toggle{
        display:none;
    }

    .ol-sidebar-version{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        color:var(--ol-muted);
        font-size:.68rem;
    }

    .ol-sidebar-version strong{
        color:var(--ol-navy);
    }

    body.dark .ol-sidebar-version strong{
        color:#fff;
    }
}