/* ============================================================
   OrtaLegal · Portal cliente · shell, novedades y personalización
   ============================================================ */

/* El fondo institucional declara .ol-support-modal como relativo.
   En el portal debe comportarse como un modal real de viewport. */
.ol-support-modal{
    position:fixed!important;
    inset:0!important;
    z-index:100000!important;
    width:100vw!important;
    min-height:100dvh!important;
    margin:0!important;
}

.ol-support-backdrop{
    position:absolute!important;
    inset:0!important;
}

.ol-support-dialog{
    max-height:calc(100dvh - 32px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
}

/* ---------- Centro de novedades ---------- */
.portal-notification-wrap{
    position:relative;
    display:flex;
    align-items:center;
}

.portal-notification-trigger{
    position:relative;
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    flex:0 0 42px;
    box-sizing:border-box;
    padding:0!important;
    display:grid!important;
    place-items:center;
    border-radius:999px!important;
}

.portal-notification-trigger svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.portal-notification-badge{
    position:absolute;
    right:-5px;
    top:-6px;
    display:grid;
    place-items:center;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border:2px solid #fffdf8;
    border-radius:999px;
    background:#bd9250;
    color:#0b2845;
    font-size:10px;
    font-weight:950;
    line-height:1;
    box-shadow:0 4px 10px rgba(11,40,69,.16);
}

body.dark .portal-notification-badge{
    border-color:#0e2237;
    background:#d7bd7c;
}

.portal-notification-popover{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:9000;
    width:min(410px,calc(100vw - 24px));
    max-height:min(620px,calc(100dvh - 96px));
    overflow:hidden;
    border:1px solid rgba(215,189,124,.38);
    border-radius:24px;
    background:rgba(255,253,248,.98);
    box-shadow:0 26px 70px rgba(11,40,69,.18);
    color:var(--ol-ink);
    backdrop-filter:blur(16px);
}

.portal-notification-popover[hidden]{
    display:none;
}

body.dark .portal-notification-popover{
    background:rgba(14,34,55,.98);
    border-color:rgba(215,189,124,.22);
}

.portal-notification-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:18px 19px 15px;
    border-bottom:1px solid var(--ol-line);
}

.portal-notification-eyebrow{
    display:block;
    margin-bottom:3px;
    color:#9a650f;
    font-size:10px;
    font-weight:950;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.portal-notification-header h2{
    margin:0;
    font-size:18px;
    color:var(--ol-navy);
    letter-spacing:-.025em;
}

body.dark .portal-notification-header h2{
    color:#fff;
}

.portal-notification-total{
    display:grid;
    place-items:center;
    min-width:34px;
    height:34px;
    padding:0 9px;
    border-radius:999px;
    background:rgba(189,146,80,.14);
    color:#8b5d17;
    font-weight:900;
    font-size:12px;
}

.portal-notification-scroll{
    max-height:min(510px,calc(100dvh - 190px));
    overflow:auto;
    padding:12px;
    scrollbar-width:thin;
}

.portal-notification-group{
    padding:12px;
    border:1px solid var(--ol-line);
    border-radius:18px;
    background:rgba(255,255,255,.48);
}

.portal-notification-group + .portal-notification-group{
    margin-top:10px;
}

body.dark .portal-notification-group{
    background:rgba(255,255,255,.035);
}

.portal-notification-group-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.portal-notification-group-head strong{
    font-size:13px;
}

.portal-notification-group-head span{
    display:grid;
    place-items:center;
    min-width:25px;
    height:25px;
    padding:0 7px;
    border-radius:999px;
    background:rgba(189,146,80,.12);
    color:#8b5d17;
    font-size:11px;
    font-weight:900;
}

.portal-notification-item{
    display:grid;
    grid-template-columns:9px minmax(0,1fr) 16px;
    gap:10px;
    align-items:start;
    padding:10px 8px;
    border-radius:13px;
    transition:background .16s ease, transform .16s ease;
}

.portal-notification-item:hover{
    background:rgba(189,146,80,.09);
    transform:translateX(2px);
}

.portal-notification-dot{
    width:8px;
    height:8px;
    margin-top:5px;
    border-radius:999px;
    background:#bd9250;
}

.portal-notification-group.is-danger .portal-notification-dot{
    background:#a43a34;
}

.portal-notification-item strong,
.portal-notification-item small{
    display:block;
}

.portal-notification-item strong{
    color:var(--ol-ink);
    font-size:12.5px;
    line-height:1.35;
}

.portal-notification-item small{
    margin-top:3px;
    color:var(--ol-muted);
    font-size:11.5px;
    line-height:1.45;
}

.portal-notification-arrow{
    color:#9a650f;
    font-weight:900;
}

.portal-notification-empty{
    padding:28px 22px;
    text-align:center;
}

.portal-notification-empty-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin:0 auto 12px;
    border-radius:15px;
    background:rgba(47,118,87,.10);
    color:#2f7657;
    font-size:20px;
    font-weight:900;
}

.portal-notification-empty strong,
.portal-notification-empty span{
    display:block;
}

.portal-notification-empty span{
    margin-top:4px;
    color:var(--ol-muted);
    font-size:12px;
}

/* ---------- Área configurable ---------- */
.portal-dashboard.dashboard-shell{
    display:grid;
    gap:18px;
}

.portal-dashboard .hero--portal.dashboard-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    min-height:118px;
    padding:26px 30px;
    overflow:hidden;
}

.portal-dashboard .hero--portal.dashboard-hero::after{
    display:none!important;
}

.portal-dashboard .dashboard-hero-copy{
    position:relative;
    z-index:2;
    flex:1 1 520px;
    max-width:650px;
}

.portal-dashboard .dashboard-hero-copy h1{
    margin:0 0 8px;
}

.portal-dashboard .dashboard-hero-copy p{
    max-width:620px;
    color:#e1eaf2;
}

.portal-dashboard .dashboard-hero-actions-stage{
    position:relative;
    z-index:3;
    flex:0 1 470px;
}

.portal-dashboard .hero-watermark{
    position:absolute;
    right:18%;
    top:50%;
    z-index:0;
    width:min(270px,25%);
    height:auto;
    transform:translateY(-50%);
    opacity:.11;
    pointer-events:none;
    filter:grayscale(.08) saturate(.9) brightness(1.35);
}

.portal-widget-grid{
    gap:18px;
    margin-top:0!important;
}

.portal-dashboard .dashboard-widget > .dashboard-panel{
    width:100%;
}

.portal-dashboard .dashboard-widget[style*="--dashboard-height"] > .dashboard-panel{
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
}

.portal-dashboard .dashboard-shell.is-editing,
.portal-dashboard.is-editing{
    user-select:none;
}

.portal-dashboard.is-editing .dashboard-panel form,
.portal-dashboard.is-editing .dashboard-panel input,
.portal-dashboard.is-editing .dashboard-panel select,
.portal-dashboard.is-editing .dashboard-panel textarea,
.portal-dashboard.is-editing .dashboard-panel button:not([data-dashboard-hide]):not([data-dashboard-resize]):not([data-dashboard-handle]),
.portal-dashboard.is-editing .dashboard-panel a{
    pointer-events:none!important;
}

.portal-dashboard .dashboard-all-hidden{
    margin-top:0;
}

/* Los controles se integran en la cabecera sin tapar la marca de agua. */
.portal-dashboard .dashboard-hero-view-actions .dashboard-edit-toggle{
    min-width:154px;
}

@media(max-width:1040px){
    .portal-dashboard .hero--portal.dashboard-hero{
        align-items:flex-start;
        flex-direction:column;
        padding-bottom:30px;
    }

    .portal-dashboard .dashboard-hero-actions-stage{
        width:100%;
        flex-basis:auto;
        justify-items:start;
    }

    .portal-dashboard .hero-watermark{
        right:28px;
        top:32px;
        transform:none;
        width:210px;
    }
}

@media(max-width:720px){
    .portal-notification-popover{
        position:fixed;
        top:72px;
        right:12px;
        left:12px;
        width:auto;
    }

    .portal-dashboard .hero-watermark{
        width:165px;
        right:18px;
        top:20px;
        opacity:.08;
    }
}

/* ============================================================
   OrtaLegal · Portal cliente v4 · corrección de layout y campana
   ============================================================ */

/* La campana abre un popover real, no un overlay ni un panel de página completa. */
body .portal-notification-popover[data-portal-notification-panel]{
    position:fixed!important;
    top:64px!important;
    right:18px!important;
    bottom:auto!important;
    left:auto!important;
    z-index:10050!important;
    width:min(390px,calc(100vw - 28px))!important;
    min-width:0!important;
    max-width:390px!important;
    min-height:0!important;
    max-height:min(560px,calc(100dvh - 82px))!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(215,189,124,.38)!important;
    border-radius:22px!important;
    background:rgba(255,253,248,.985)!important;
    box-shadow:0 22px 62px rgba(11,40,69,.22)!important;
    color:var(--ol-ink)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    transform:none!important;
    isolation:isolate;
}

body .portal-notification-popover[data-portal-notification-panel][hidden]{
    display:none!important;
}

body.dark .portal-notification-popover[data-portal-notification-panel]{
    background:rgba(14,34,55,.99)!important;
    border-color:rgba(215,189,124,.24)!important;
}

.portal-notification-header{
    align-items:center!important;
    padding:16px 17px 13px!important;
}

.portal-notification-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.portal-notification-close{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    padding:0;
    border:1px solid rgba(189,146,80,.34);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:var(--ol-navy);
    font:800 19px/1 system-ui,sans-serif;
    cursor:pointer;
}

.portal-notification-close:hover{
    border-color:rgba(189,146,80,.70);
    background:#fff;
}

body.dark .portal-notification-close{
    background:rgba(255,255,255,.07);
    color:#fff;
    border-color:rgba(215,189,124,.28);
}

.portal-notification-scroll{
    max-height:min(465px,calc(100dvh - 150px))!important;
    padding:10px!important;
}

.portal-notification-empty{
    padding:22px 18px 24px!important;
}

.portal-notification-empty-icon{
    width:38px!important;
    height:38px!important;
    margin-bottom:10px!important;
}

/* El modal de ayuda nunca debe depender del flujo de la página. */
body .ol-support-modal[data-support-modal]{
    position:fixed!important;
    inset:0!important;
    z-index:11000!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:24px!important;
}

body .ol-support-modal[data-support-modal][hidden]{
    display:none!important;
}

body .ol-support-modal[data-support-modal].is-open{
    display:flex!important;
}

/* El área por defecto debe ser equilibrada incluso antes de personalizarla. */
.portal-dashboard .dashboard-widget-grid{
    grid-auto-flow:row dense!important;
}

.portal-dashboard .dashboard-widget[data-dashboard-widget="cases"],
.portal-dashboard .dashboard-widget[data-dashboard-widget="profile"],
.portal-dashboard .dashboard-widget[data-dashboard-widget="messages"],
.portal-dashboard .dashboard-widget[data-dashboard-widget="privacy"],
.portal-dashboard .dashboard-widget[data-dashboard-widget="documents"],
.portal-dashboard .dashboard-widget[data-dashboard-widget="contracts"]{
    min-width:0;
}

@media(max-width:720px){
    body .portal-notification-popover[data-portal-notification-panel]{
        top:62px!important;
        right:10px!important;
        left:10px!important;
        width:auto!important;
        max-width:none!important;
    }
}


/* ============================================================
   Ajuste óptico de iconos circulares · cierre y estado correcto
   ============================================================ */
.portal-notification-close{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    padding:0!important;
    line-height:0!important;
    font-size:0!important;
    text-align:center!important;
    vertical-align:middle!important;
}

.portal-notification-close svg{
    display:block!important;
    width:14px!important;
    height:14px!important;
    flex:0 0 14px!important;
    margin:0!important;
    overflow:visible!important;
}

.portal-notification-close svg path{
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2.25!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    vector-effect:non-scaling-stroke;
}

.portal-notification-empty-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    padding:0!important;
    line-height:0!important;
    font-size:0!important;
    text-align:center!important;
}

.portal-notification-empty-icon svg{
    display:block!important;
    width:17px!important;
    height:17px!important;
    flex:0 0 17px!important;
    margin:0!important;
    overflow:visible!important;
}

.portal-notification-empty-icon svg path{
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2.15!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    vector-effect:non-scaling-stroke;
}