/* Shell, rail, drawer and first dashboard navigation blocks.
 * Rediseño v0.9.140-nina — Rail lateral integrado y drawer lateral completo.
 */
:root {
    --imecapi-blue: #0083ff;
    --imecapi-navy: #003366;
    --imecapi-bg: #f8fafc;
    --imecapi-text: #1f2937;
    --imecapi-muted: #64748b;
    --imecapi-border: #e5e7eb;
    --imecapi-white: #ffffff;
}

/* v0.9.88a · Navegacion lateral premium del dashboard de cliente */
body.imecapi-dashboard-overlay-open{
    overflow:hidden!important;
}
.imecapi-dashboard-host{
    margin-top:0!important;
    padding-top:0!important;
    border-top:0!important;
    box-shadow:none!important;
    background:transparent!important;
}
.imecapi-dashboard-host::before,
.imecapi-dashboard-host::after{
    display:none!important;
}
@media(min-width: 769px) {
    .imecapi-client-app-clean{
        position:relative!important;
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        padding: 0 0 0 116px!important;
        overflow:visible!important;
    }
}
.imecapi-client-main-clean{
    min-width:0!important;
    width:100%!important;
    padding-top:0!important;
    padding-left:10px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    overflow:visible!important;
}
/* ── RAIL: píldora premium fija ───────────────────────────── */
.imecapi-client-rail{
    position:relative!important;
    display:block!important;
    width:84px!important;
    height:100%!important;
    min-height:100vh!important;
    z-index:30!important;
}
.imecapi-client-rail-inner{
    position:fixed!important;
    top:0!important;
    left:0!important;
    z-index:40!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:6px!important;
    width:84px!important;
    height:100vh!important;
    padding:14px 10px 12px!important;
    box-sizing:border-box!important;
    border:0!important;
    border-right:1px solid rgba(220,230,245,.92)!important;
    border-radius:0!important;
    background:#ffffff!important;
    box-shadow:
        12px 0 34px rgba(15,23,42,.05),
        inset -1px 0 0 rgba(255,255,255,.92)!important;
}
/* Rail: logo block ──────────────────────────────────────── */
.imecapi-client-rail-top{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    width:100%!important;
    padding:6px 0 10px!important;
    border-bottom:1px solid rgba(226,232,240,.7)!important;
    margin-bottom:4px!important;
}
.imecapi-client-rail-logo{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:24px!important;
    height:24px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-decoration:none!important;
    cursor:pointer!important;
    color:#64748b!important;
    transition:color .18s ease,transform .18s ease,opacity .18s ease!important;
}
.imecapi-client-rail-logo:hover{
    color:#0f172a!important;
    transform:translateX(1px)!important;
}
.imecapi-client-rail-logo svg{
    width:18px!important;
    height:18px!important;
    display:block!important;
}
.imecapi-client-rail-logo-label{
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.14em!important;
    color:#1e40af!important;
    text-transform:uppercase!important;
    line-height:1!important;
}
/* Rail: toggle (drawer) ─────────────────────────────────── */
.imecapi-client-rail-toggle{
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    border-radius:13px!important;
    border:0!important;
    background:linear-gradient(145deg,#f8fafc,#eef4fc)!important;
    box-shadow:
        4px 4px 8px rgba(190,210,235,.35),
        -4px -4px 8px rgba(255,255,255,.85),
        inset 0 1px 0 rgba(255,255,255,.9)!important;
    color:#4c617d!important;
    cursor:pointer!important;
    transition:box-shadow .18s ease,color .18s ease!important;
}
.imecapi-client-rail-toggle:hover{
    color:#0f172a!important;
    box-shadow:
        6px 6px 12px rgba(190,210,235,.4),
        -6px -6px 12px rgba(255,255,255,.9),
        inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.imecapi-client-rail-toggle svg{
    width:18px!important;
    height:18px!important;
}
/* Rail: nav icons ───────────────────────────────────────── */
.imecapi-client-rail-nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    flex:1 1 auto!important;
}
.imecapi-client-rail-nav button{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    border-radius:14px!important;
    border:0!important;
    background:linear-gradient(145deg,#f8fafc,#eef4fc)!important;
    box-shadow:
        4px 4px 8px rgba(190,210,235,.3),
        -4px -4px 8px rgba(255,255,255,.8),
        inset 0 1px 0 rgba(255,255,255,.85)!important;
    color:#6b7e99!important;
    cursor:pointer!important;
    transition:box-shadow .18s ease,color .18s ease,background .18s ease!important;
}
.imecapi-client-rail-nav button svg{
    width:19px!important;
    height:19px!important;
}
.imecapi-client-rail-nav button:hover:not(.is-active){
    color:#0f172a!important;
    box-shadow:
        5px 5px 10px rgba(190,210,235,.38),
        -5px -5px 10px rgba(255,255,255,.88)!important;
}
.imecapi-client-rail-nav button.is-active{
    background:linear-gradient(145deg,#3b82f6,#2563eb)!important;
    color:#ffffff!important;
    box-shadow:
        0 6px 18px rgba(37,99,235,.35),
        inset 0 1px 0 rgba(255,255,255,.2)!important;
}
.imecapi-client-rail-dot{
    position:absolute!important;
    top:9px!important;
    right:9px!important;
    width:7px!important;
    height:7px!important;
    border-radius:999px!important;
    background:#ef4444!important;
    box-shadow:0 0 0 2px #fff!important;
}
/* Rail: help button (bottom) ────────────────────────────── */
.imecapi-client-rail-help{
    margin-top:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:4px!important;
    padding-top:14px!important;
    border-top:1px solid rgba(226,232,240,.7)!important;
    width:100%!important;
}
.imecapi-client-rail-help-btn{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:4px!important;
    border:0!important;
    background:transparent!important;
    cursor:pointer!important;
    color:#94a3b8!important;
    transition:color .18s ease!important;
    padding:4px!important;
}
.imecapi-client-rail-help-btn:hover{ color:#0f172a!important; }
.imecapi-client-rail-help-btn svg{ width:20px!important; height:20px!important; }
.imecapi-client-rail-help-label{
    font-size:9px!important;
    font-weight:600!important;
    letter-spacing:.08em!important;
    color:inherit!important;
}
/* Legacy: user bubble (no longer used in rail, kept for compat) */
.imecapi-client-rail-user{
    display:none!important;
}
.imecapi-client-drawer-backdrop{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:84px!important;
    z-index:70!important;
    border:0!important;
    background:rgba(15,23,42,.24)!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
}
.imecapi-client-drawer{
    position:fixed!important;
    top:0!important;
    left:84px!important;
    bottom:0!important;
    z-index:80!important;
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    width:min(396px,31vw)!important;
    max-width:calc(100vw - 84px)!important;
    padding:24px 20px 20px!important;
    border:1px solid rgba(203,213,225,.82)!important;
    border-left:0!important;
    border-radius:0!important;
    background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(247,250,255,.90) 100%)!important;
    box-shadow:18px 0 48px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateX(-12px)!important;
    transition:opacity .22s ease,transform .22s ease!important;
    overflow:hidden!important;
}
.imecapi-client-app-clean.is-drawer-open .imecapi-client-drawer{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateX(0)!important;
}
.imecapi-client-drawer-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding-bottom:16px!important;
    border-bottom:1px solid rgba(226,232,240,.92)!important;
}
.imecapi-client-drawer-brand{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    min-width:0!important;
}
.imecapi-client-drawer-brand-mark{
    display:grid!important;
    place-items:center!important;
    width:52px!important;
    height:52px!important;
    border-radius:18px!important;
    background:linear-gradient(180deg,#ffffff 0%,#eef4ff 100%)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.08)!important;
}
.imecapi-client-drawer-brand-mark img{
    width:34px!important;
    height:34px!important;
    object-fit:contain!important;
}
.imecapi-client-drawer-brand-mark span{
    color:#0083ff!important;
    font-size:18px!important;
    font-weight:600!important;
}
.imecapi-client-drawer-brand strong{
    display:block!important;
    font-size:18px!important;
    font-weight:600!important;
    color:#0f172a!important;
}
.imecapi-client-drawer-brand span{
    display:block!important;
    font-size:11px!important;
    color:#5f7391!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
}
.imecapi-client-drawer-close{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    border:0!important;
    border-radius:14px!important;
    background:rgba(248,250,252,.9)!important;
    color:#475569!important;
    box-shadow:inset 0 0 0 1px rgba(203,213,225,.68)!important;
    cursor:pointer!important;
}
.imecapi-client-drawer-close svg{
    width:18px!important;
    height:18px!important;
}
.imecapi-client-drawer-nav{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    overflow:auto!important;
    padding-right:2px!important;
}
.imecapi-client-drawer-nav button,
.imecapi-client-drawer-group-toggle,
.imecapi-client-drawer-subnav button,
.imecapi-client-drawer-user{
    font-family:inherit!important;
}
.imecapi-client-drawer-nav > button,
.imecapi-client-drawer-group-toggle{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-height:54px!important;
    padding:0 16px!important;
    border:1px solid transparent!important;
    border-radius:18px!important;
    background:transparent!important;
    color:#36475f!important;
    text-align:left!important;
    cursor:pointer!important;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.imecapi-client-drawer-nav > button i,
.imecapi-client-drawer-group-title i,
.imecapi-client-drawer-subnav button i{
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    border-radius:12px!important;
    color:#60748f!important;
    background:rgba(248,250,252,.9)!important;
    box-shadow:inset 0 0 0 1px rgba(226,232,240,.9)!important;
    flex:0 0 auto!important;
}
.imecapi-client-drawer-nav > button i svg,
.imecapi-client-drawer-group-title i svg,
.imecapi-client-drawer-subnav button i svg{
    width:18px!important;
    height:18px!important;
}
.imecapi-client-drawer-nav > button span,
.imecapi-client-drawer-group-title span:last-child,
.imecapi-client-drawer-subnav button span{
    font-size:14px!important;
    font-weight:500!important;
    color:inherit!important;
}
.imecapi-client-drawer-nav > button:hover,
.imecapi-client-drawer-group-toggle:hover{
    background:rgba(248,250,252,.9)!important;
    color:#0f172a!important;
}
.imecapi-client-drawer-nav > button.is-active{
    background:linear-gradient(180deg,#f3f8ff 0%,#ebf3ff 100%)!important;
    border-color:rgba(191,219,254,.95)!important;
    color:#0083ff!important;
    box-shadow:0 12px 24px rgba(0,131,255,.10)!important;
}
.imecapi-client-drawer-nav > button.is-active i{
    color:#0083ff!important;
    background:#ffffff!important;
}
.imecapi-client-drawer-group{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
}
.imecapi-client-drawer-group-toggle{
    justify-content:space-between!important;
}
.imecapi-client-drawer-group-title{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-width:0!important;
}
.imecapi-client-drawer-group-chevron{
    width:18px!important;
    height:18px!important;
    color:#7b8ca5!important;
    transition:transform .18s ease!important;
    flex:0 0 auto!important;
}
.imecapi-client-drawer-group.is-open .imecapi-client-drawer-group-chevron{
    transform:rotate(180deg)!important;
}
.imecapi-client-drawer-subnav{
    display:none!important;
    padding:2px 0 2px 10px!important;
    margin-left:16px!important;
    border-left:1px solid rgba(226,232,240,.92)!important;
}
.imecapi-client-drawer-group.is-open .imecapi-client-drawer-subnav{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
}
.imecapi-client-drawer-subnav button{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-height:48px!important;
    padding:0 12px!important;
    border:1px solid transparent!important;
    border-radius:16px!important;
    background:transparent!important;
    color:#526479!important;
    text-align:left!important;
    cursor:pointer!important;
}
.imecapi-client-drawer-subnav button span{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.imecapi-client-drawer-subnav button.is-active{
    background:#ffffff!important;
    border-color:rgba(191,219,254,.95)!important;
    color:#0f172a!important;
    box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
}
.imecapi-client-drawer-subnav button.is-active i{
    color:#0083ff!important;
    background:#edf5ff!important;
}
.imecapi-client-drawer-badge{
    margin-left:auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:52px!important;
    min-height:24px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:#eef4ff!important;
    color:#0083ff!important;
    font-size:10px!important;
    font-weight:600!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
}
.imecapi-client-drawer-calendar{
    margin-top:auto!important;
    padding:16px!important;
    border:1px solid rgba(226,232,240,.96)!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(247,250,255,.88) 100%)!important;
    box-shadow:0 16px 30px rgba(15,23,42,.06)!important;
}
.imecapi-client-drawer-calendar-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:14px!important;
}
.imecapi-client-drawer-calendar-head strong{
    font-size:14px!important;
    font-weight:600!important;
    color:#0f172a!important;
}
.imecapi-client-drawer-calendar-head span{
    font-size:10px!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    color:#6b7c92!important;
}
.imecapi-client-drawer-calendar-grid{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:8px!important;
}
.imecapi-client-drawer-calendar-grid.is-labels{
    margin-bottom:10px!important;
}
.imecapi-client-drawer-calendar-grid.is-labels span{
    font-size:9px!important;
    font-weight:600!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    color:#7b8ca5!important;
    text-align:center!important;
}
.imecapi-client-drawer-calendar-grid:not(.is-labels) span{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    aspect-ratio:1/1!important;
    border-radius:12px!important;
    font-size:12px!important;
    color:#334155!important;
    background:rgba(248,250,252,.78)!important;
}
.imecapi-client-drawer-calendar-grid span.is-empty{
    background:transparent!important;
}
.imecapi-client-drawer-calendar-grid span.is-today{
    background:linear-gradient(180deg,#0083ff 0%,#2563eb 100%)!important;
    color:#ffffff!important;
    box-shadow:0 12px 22px rgba(0,131,255,.18)!important;
}
.imecapi-client-drawer-user{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    width:100%!important;
    margin-top:16px!important;
    padding:12px 14px!important;
    border:1px solid rgba(226,232,240,.96)!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(246,249,254,.9) 100%)!important;
    box-shadow:0 14px 28px rgba(15,23,42,.06)!important;
    cursor:pointer!important;
}
.imecapi-client-drawer-user-avatar{
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#eef4ff 0%,#e3edff 100%)!important;
    color:#2563eb!important;
    font-size:16px!important;
    font-weight:600!important;
    flex:0 0 auto!important;
}
.imecapi-client-drawer-user-avatar img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}
.imecapi-client-drawer-user-copy{
    min-width:0!important;
    text-align:left!important;
}
.imecapi-client-drawer-user-copy strong{
    display:block!important;
    font-size:14px!important;
    font-weight:600!important;
    color:#0f172a!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.imecapi-client-drawer-user-copy span{
    display:block!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    color:#6b7c92!important;
}
.imecapi-client-drawer-user-chevron{
    width:18px!important;
    height:18px!important;
    margin-left:auto!important;
    color:#7b8ca5!important;
    flex:0 0 auto!important;
}
.imecapi-services-dashboard-clean{
    margin-top:10px!important;
}
.imecapi-service-tabs-clean{
    display:block!important;
}
.imecapi-service-panels-clean{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.imecapi-service-panel-clean{
    display:none!important;
}
.imecapi-service-panel-clean.is-active{
    display:block!important;
}
.imecapi-subtabs-clean{
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 18px!important;
    padding:0!important;
    border:1px solid rgba(214,223,234,.9)!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
    box-shadow:0 14px 28px rgba(15,23,42,.05)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
}
.imecapi-subtabs-clean::-webkit-scrollbar{
    display:none!important;
}
.imecapi-subtabs-clean button{
    position:relative!important;
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:12px!important;
    min-height:62px!important;
    max-width:min(320px,calc(100vw - 180px))!important;
    margin:0!important;
    padding:0 22px!important;
    border:0!important;
    border-right:1px solid rgba(226,232,240,.92)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#5c6e85!important;
    box-shadow:none!important;
}
.imecapi-subtabs-clean button:last-child{
    border-right:0!important;
}
.imecapi-subtabs-clean button strong{
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.25!important;
    color:inherit!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:240px!important;
}
.imecapi-subtabs-clean button.is-summary strong{
    max-width:none!important;
}
.imecapi-process-tab-icon{
    width:34px!important;
    height:34px!important;
    border-radius:12px!important;
    background:#f6f9fc!important;
    color:#708198!important;
    box-shadow:inset 0 0 0 1px rgba(226,232,240,.92)!important;
}
.imecapi-process-tab-icon svg{
    width:18px!important;
    height:18px!important;
}
.imecapi-subtabs-clean button.is-active{
    background:linear-gradient(180deg,#0083ff 0%,#2563eb 100%)!important;
    color:#ffffff!important;
    box-shadow:0 16px 30px rgba(0,131,255,.18)!important;
}
.imecapi-subtabs-clean button.is-active .imecapi-process-tab-icon{
    background:rgba(255,255,255,.15)!important;
    color:#ffffff!important;
    box-shadow:none!important;
}
.imecapi-subtabs-clean button:hover:not(.is-active){
    background:rgba(248,250,252,.9)!important;
    color:#334155!important;
}
@media(max-width:1180px){
    .imecapi-client-app-clean{
        grid-template-columns:72px minmax(0,1fr)!important;
    }
    .imecapi-client-drawer{
        left:84px!important;
        width:min(400px,38vw)!important;
    }
    .imecapi-client-drawer-backdrop{
        left:84px!important;
    }
}
@media(max-width:768px){
    .imecapi-client-app-clean{
        grid-template-columns:1fr!important;
        padding:0!important;
    }
    .imecapi-client-rail{
        display:none!important;
    }
    .imecapi-client-drawer{
        left:10px!important;
        right:10px!important;
        bottom:12px!important;
        top:12px!important;
        width:auto!important;
        max-width:none!important;
    }
    .imecapi-subtabs-clean button{
        max-width:min(280px,calc(100vw - 90px))!important;
        min-height:58px!important;
        padding:0 18px!important;
    }
    .imecapi-subtabs-clean button strong{
        font-size:13px!important;
        max-width:210px!important;
    }
}
/* Main content offset for fixed rail */
@media(min-width:769px){
    .imecapi-client-main-clean{
        padding-left:0!important;
        margin-left:0!important;
    }
    .imecapi-client-app-clean{
        padding-left:82px!important;
        padding-right:20px!important;
        padding-block:12px 24px!important;
    }
}