/* ==========================================================
   PORTAL DE CLIENTES
   Usa exclusivamente el Design System global.
========================================================== */

.client-portal-page{
    position:relative;
    z-index:var(--z-normal);

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:100%;
    height:100%;

    padding:
        var(--space-3)
        var(--space-4);

    overflow:hidden;
}

.client-portal-shell{
    position:relative;
    z-index:var(--z-normal);

    width:min(1080px, 100%);
    max-height:100%;
    margin:0 auto;

    padding:
        var(--space-5)
        var(--space-6);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-2xl);

    background:
        var(--glass-background);

    box-shadow:
        var(--shadow-xl);

    backdrop-filter:
        blur(var(--glass-blur));

    -webkit-backdrop-filter:
        blur(var(--glass-blur));

    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:
        var(--color-primary-border)
        transparent;
}

[data-theme="dark"] .client-portal-shell{
    background:
        var(--glass-background);

    border-color:
        rgba(148,163,184,.18);

    box-shadow:
        var(--shadow-xl);
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.client-portal-header{
    display:grid;
    gap:var(--space-4);

    margin-bottom:var(--space-4);
}

.portal-back-link{
    width:max-content;

    display:inline-flex;
    align-items:center;

    gap:var(--space-2);

    padding:
        var(--space-2)
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-surface);

    color:
        var(--color-text);

    text-decoration:none;

    transition:
        var(--transition-standard);
}

.portal-back-link:hover{
    color:
        var(--color-primary);

    border-color:
        var(--color-primary-border);

    transform:
        translateX(-2px);
}

.portal-brand{
    display:flex;
    align-items:center;

    gap:var(--space-4);
}

.portal-logo{
    width:88px;
    height:88px;

    flex:0 0 auto;

    object-fit:contain;
}

.portal-eyebrow,
.portal-section-label{
    display:block;

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        var(--letter-spacing-wide);

    text-transform:uppercase;
}

.portal-brand h1{
    margin:
        .1rem 0
        var(--space-1);

    color:
        var(--color-heading);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.65rem
        );

    font-weight:
        var(--font-weight-black);

    line-height:
        var(--line-height-tight);
}

.portal-brand p{
    margin:0;

    max-width:760px;

    color:
        var(--color-text-muted);

    line-height:
        var(--line-height-normal);
}

/* ----------------------------------------------------------
   ACCESS CARD
---------------------------------------------------------- */

.portal-access-card{
    padding:
        var(--space-4);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-surface);
}

[data-theme="dark"] .portal-access-card{
    background:
        rgba(255,255,255,.025);
}

.portal-intro{
    display:flex;
    align-items:flex-start;

    gap:var(--space-3);

    margin-bottom:
        var(--space-4);
}

.portal-intro-icon{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:
        var(--radius-md);

    background:
        var(--color-primary-soft);

    color:
        var(--color-primary);

    font-size:
        var(--icon-size-lg);
}

.portal-intro h2{
    margin:
        .1rem 0
        var(--space-1);

    color:
        var(--color-heading);

    font-size:
        var(--font-size-xl);

    font-weight:
        var(--font-weight-bold);
}

.portal-intro p{
    margin:0;

    max-width:850px;

    color:
        var(--color-text-muted);

    line-height:
        var(--line-height-normal);
}

/* ----------------------------------------------------------
   TYPE SELECTION
---------------------------------------------------------- */

.portal-type-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:var(--space-3);
}

.portal-type-card{
    display:grid;

    grid-template-columns:auto 1fr;

    align-items:center;

    gap:
        var(--space-1)
        var(--space-3);

    min-height:74px;

    padding:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-lg);

    background:
        var(--bg-card);

    color:
        var(--color-text);

    text-align:left;

    cursor:pointer;

    transition:
        var(--transition-standard);
}

.portal-type-card small{
    grid-column:2;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}

.portal-type-card:hover,
.portal-type-card.selected{
    border-color:
        var(--color-primary-border);

    background:
        var(--color-primary-soft);

    transform:
        translateY(-1px);
}

.portal-type-icon{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    grid-row:1 / span 2;

    border-radius:
        var(--radius-md);

    background:
        var(--color-secondary-soft);

    color:
        var(--color-info);

    font-size:
        var(--icon-size-md);
}

/* ----------------------------------------------------------
   FIELDS
---------------------------------------------------------- */

.portal-fields{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:var(--space-3);

    margin-top:
        var(--space-4);
}

.portal-field label{
    display:block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-heading);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);
}

.portal-input-wrap{
    position:relative;
}

.portal-input-wrap > i{
    position:absolute;

    left:
        var(--space-3);

    top:50%;

    transform:
        translateY(-50%);

    color:
        var(--color-primary);

    pointer-events:none;

    z-index:2;
}

.portal-input-wrap input{
    width:100%;

    min-height:
        var(--input-height);

    padding:
        var(--space-2)
        var(--space-3)
        var(--space-2)
        2.75rem;

    border:
        var(--border-width-thin)
        solid
        var(--input-border);

    border-radius:
        var(--input-radius);

    background:
        var(--input-bg);

    color:
        var(--color-text);

    outline:none;

    transition:
        var(--transition-fast-standard);
}

.portal-input-wrap input::placeholder{
    color:
        var(--color-placeholder);
}

.portal-input-wrap input:focus{
    border-color:
        var(--color-primary);

    box-shadow:
        var(--focus-ring);
}

.portal-help{
    display:block;

    margin-top:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-2xs);

    line-height:
        var(--line-height-normal);
}

/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

.portal-primary-btn,
.portal-secondary-btn{
    min-height:
        var(--button-height);

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:var(--space-2);

    padding:
        var(--space-2)
        var(--button-padding-x);

    border-radius:
        var(--button-radius);

    font-weight:
        var(--button-font-weight);

    text-decoration:none;

    cursor:pointer;

    transition:
        var(--transition-standard);
}

.portal-primary-btn{
    grid-column:1 / -1;

    border:
        var(--border-width-thin)
        solid
        var(--color-primary);

    color:
        var(--button-primary-text);

    background:
        var(--button-primary-gradient);

    box-shadow:
        var(--button-primary-shadow);
}

.portal-primary-btn:hover{
    background:
        var(--button-primary-hover);

    transform:
        translateY(-1px);
}

.portal-secondary-btn{
    border:
        var(--border-width-thin)
        solid
        var(--button-secondary-border);

    background:
        var(--button-secondary-bg);

    color:
        var(--button-secondary-text);
}

.portal-secondary-btn:hover{
    color:
        var(--color-primary);

    border-color:
        var(--color-primary-border);
}

/* ----------------------------------------------------------
   TRUST / INFO
---------------------------------------------------------- */

.portal-trust-grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-3);

    margin-top:
        var(--space-3);
}

.portal-trust-item{
    display:flex;
    align-items:flex-start;

    gap:var(--space-2);

    padding:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-surface);
}

[data-theme="dark"] .portal-trust-item{
    background:
        rgba(255,255,255,.025);
}

.portal-trust-item > i{
    color:
        var(--color-primary);

    margin-top:
        .1rem;
}

.portal-trust-item strong{
    display:block;

    color:
        var(--color-heading);

    font-size:
        var(--font-size-sm);
}

.portal-trust-item span{
    display:block;

    margin-top:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-2xs);

    line-height:
        var(--line-height-normal);
}

/* ----------------------------------------------------------
   AUTHENTICATED LIST
---------------------------------------------------------- */

.portal-session-bar{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:var(--space-3);

    margin-bottom:
        var(--space-4);

    padding:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-success);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-success-soft);
}

.portal-session-bar strong{
    display:block;

    margin-top:
        var(--space-1);

    color:
        var(--color-heading);

    font-size:
        var(--font-size-sm);
}

.portal-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:var(--space-3);

    margin-bottom:
        var(--space-3);
}

.portal-section-heading h2{
    margin:
        .15rem 0
        var(--space-1);

    color:
        var(--color-heading);

    font-size:
        var(--font-size-2xl);

    font-weight:
        var(--font-weight-bold);
}

.portal-section-heading p{
    margin:0;

    color:
        var(--color-text-muted);
}

.portal-count{
    display:grid;
    place-items:center;

    min-width:64px;
    min-height:64px;

    border-radius:
        var(--radius-lg);

    background:
        var(--color-secondary-soft);

    color:
        var(--color-heading);

    font-size:
        var(--font-size-xl);

    font-weight:
        var(--font-weight-bold);
}

.portal-count small{
    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-2xs);

    font-weight:
        var(--font-weight-medium);
}

.portal-report-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:var(--space-3);
}

.portal-report-card{
    padding:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-lg);

    background:
        var(--bg-surface);

    box-shadow:
        var(--shadow-sm);
}

.portal-report-top{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:var(--space-2);
}

.portal-report-number{
    color:
        var(--color-heading);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);
}

.portal-status{
    display:inline-flex;

    align-items:center;

    padding:
        var(--badge-padding-y)
        var(--badge-padding-x);

    border-radius:
        var(--badge-radius);

    background:
        var(--color-primary-soft);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-2xs);

    font-weight:
        var(--font-weight-semibold);
}

.portal-report-main{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:var(--space-3);

    margin:
        var(--space-3) 0;
}

.portal-report-field span,
.portal-info-card span,
.portal-inline-detail span{
    display:block;

    margin-bottom:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-2xs);
}

.portal-report-field strong,
.portal-info-card strong,
.portal-inline-detail strong{
    color:
        var(--color-heading);

    font-size:
        var(--font-size-sm);
}

.portal-report-action{
    display:flex;

    align-items:center;
    justify-content:space-between;

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);

    text-decoration:none;
}

.portal-report-action:hover{
    color:
        var(--color-primary-hover);

    transform:
        translateX(2px);
}

.portal-empty-state{
    display:grid;
    place-items:center;

    text-align:center;

    padding:
        var(--space-12)
        var(--space-5);

    border:
        var(--border-width-thin)
        dashed
        var(--border-light);

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-surface);
}

.portal-empty-icon{
    width:62px;
    height:62px;

    display:grid;
    place-items:center;

    margin-bottom:
        var(--space-3);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-secondary-soft);

    color:
        var(--color-info);

    font-size:
        var(--icon-size-lg);
}

.portal-empty-state h2{
    margin-bottom:
        var(--space-1);

    color:
        var(--color-heading);

    font-size:
        var(--font-size-xl);
}

.portal-empty-state p{
    margin:0;

    max-width:560px;

    color:
        var(--color-text-muted);
}

/* ----------------------------------------------------------
   DETAIL
---------------------------------------------------------- */

.detail-page{
    align-items:flex-start;

    padding-top:
        var(--space-4);

    overflow-y:auto;
}

.detail-page .client-portal-shell{
    width:min(
        980px,
        100%
    );

    max-height:none;
}

.detail-header{
    margin-bottom:
        var(--space-3);
}

.portal-detail-title h1{
    margin:
        .15rem 0
        var(--space-1);

    color:
        var(--color-heading);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.45rem
        );

    font-weight:
        var(--font-weight-black);
}

.portal-detail-title p{
    margin:0;

    color:
        var(--color-text-muted);
}

.portal-status-banner{
    display:flex;

    align-items:center;

    gap:var(--space-3);

    padding:
        var(--space-3);

    margin-bottom:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--color-primary-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-primary-soft);
}

.portal-status-icon{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:
        var(--radius-md);

    background:
        var(--color-primary-soft);

    color:
        var(--color-primary);

    font-size:
        var(--icon-size-md);
}

.portal-status-banner span{
    display:block;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-2xs);
}

.portal-status-banner strong{
    display:block;

    margin-top:
        var(--space-1);

    color:
        var(--color-heading);

    font-size:
        var(--font-size-lg);
}

.portal-info-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:var(--space-3);

    margin-bottom:
        var(--space-3);
}

.portal-info-card{
    display:flex;
    align-items:flex-start;

    gap:var(--space-2);

    padding:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-lg);

    background:
        var(--bg-surface);
}

.portal-card-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:
        var(--radius-md);

    background:
        var(--color-secondary-soft);

    color:
        var(--color-info);
}

.portal-detail-section{
    margin-top:
        var(--space-3);
}

.portal-section-heading.compact{
    margin-bottom:
        var(--space-2);
}

.portal-reading-card{
    padding:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-lg);

    background:
        var(--bg-surface);

    color:
        var(--color-text);

    line-height:
        var(--line-height-relaxed);

    white-space:pre-line;
}

.portal-reading-card.is-muted{
    color:
        var(--color-text-muted);
}

.portal-inline-detail{
    display:flex;
    align-items:center;

    gap:var(--space-2);

    padding:
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--border-light);

    border-radius:
        var(--radius-lg);

    background:
        var(--bg-surface);
}

.portal-inline-detail > i{
    color:
        var(--color-primary);

    font-size:
        var(--icon-size-md);
}

.portal-detail-footer{
    display:flex;
    justify-content:flex-end;

    margin-top:
        var(--space-4);
}

/* ----------------------------------------------------------
   VIEWPORT / RESPONSIVE
---------------------------------------------------------- */

/*
   La pantalla de acceso es tratada como Home/Login:
   ocupa el viewport disponible y no genera el scroll de la página.
*/
body:has(.client-portal-page:not(.detail-page)) .app{
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

body:has(.client-portal-page:not(.detail-page)) .app-main{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}

body:has(.client-portal-page:not(.detail-page)) .app-footer{
    flex:0 0 auto;
}

@media (min-width:769px) and (max-height:850px){

    .client-portal-page{
        padding:
            var(--space-2)
            var(--space-4);
    }

    .client-portal-shell{
        padding:
            var(--space-4)
            var(--space-5);
    }

    .client-portal-header{
        gap:var(--space-3);
        margin-bottom:var(--space-3);
    }

    .portal-logo{
        width:72px;
        height:72px;
    }

    .portal-access-card{
        padding:var(--space-3);
    }

    .portal-intro{
        margin-bottom:var(--space-3);
    }

    .portal-trust-grid{
        margin-top:var(--space-2);
    }

    .portal-trust-item{
        padding:
            var(--space-2)
            var(--space-3);
    }
}

@media (min-width:769px) and (max-height:760px){

    .client-portal-shell{
        padding:
            var(--space-3)
            var(--space-4);
    }

    .portal-brand h1{
        font-size:var(--font-size-2xl);
    }

    .portal-brand p,
    .portal-intro p{
        font-size:var(--font-size-sm);
    }

    .portal-type-card{
        min-height:64px;
        padding:var(--space-2);
    }

    .portal-fields{
        margin-top:var(--space-3);
    }
}

@media (max-width:820px){

    .portal-fields,
    .portal-report-grid,
    .portal-info-grid,
    .portal-trust-grid{
        grid-template-columns:1fr;
    }

    .portal-primary-btn{
        grid-column:1;
    }

    .portal-session-bar{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:768px){

    body:has(.client-portal-page:not(.detail-page)) .app{
        height:auto;
        min-height:100dvh;
        overflow:visible;
    }

    body:has(.client-portal-page:not(.detail-page)) .app-main{
        overflow-y:auto;
        overflow-x:hidden;
    }

    .client-portal-page{
        height:auto;
        min-height:100%;
        padding:var(--space-3) var(--space-2);
        overflow:visible;
    }

    .client-portal-shell{
        max-height:none;
        width:100%;
        padding:var(--space-4);
        border-radius:var(--radius-xl);
    }

    .portal-brand{
        align-items:flex-start;
    }

    .portal-logo{
        width:70px;
        height:70px;
    }

    .portal-type-grid{
        grid-template-columns:1fr;
    }

    .portal-report-main{
        grid-template-columns:1fr;
    }
}

@media (max-width:576px){

    .client-portal-page{
        padding:var(--space-2) var(--space-1);
    }

    .client-portal-shell{
        padding:var(--space-3);
        border-radius:var(--radius-lg);
    }

    .portal-brand{
        gap:var(--space-3);
    }

    .portal-logo{
        width:60px;
        height:60px;
    }

    .portal-section-heading{
        align-items:flex-start;
    }
}


/* ==========================================================
   PORTAL — CABECERA CENTRADA COMO HOME
========================================================== */

.client-portal-header{
    display:grid;
    gap:var(--space-4);
    margin-bottom:var(--space-4);
}

.portal-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:var(--space-2);
}

.portal-brand-copy{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.portal-logo{
    width:112px;
    height:112px;
    flex:0 0 auto;
    object-fit:contain;
    display:block;
}

.portal-eyebrow{
    margin-top:var(--space-1);
}

.portal-brand h1{
    margin:
        var(--space-1) 0 0;

    color:
        var(--color-heading);

    font-size:
        clamp(
            2.15rem,
            4vw,
            3.15rem
        );

    line-height:
        var(--line-height-tight);

    font-weight:
        var(--font-weight-black);
}

.portal-brand h2{
    margin:
        var(--space-1) 0;

    color:
        var(--color-heading);

    font-size:
        clamp(
            1.45rem,
            2.7vw,
            2rem
        );

    line-height:
        var(--line-height-tight);

    font-weight:
        var(--font-weight-bold);
}

.portal-brand p{
    max-width:780px;
    margin:0;
    color:var(--color-text-muted);
    line-height:var(--line-height-normal);
}

/* Intro: less "security" tone, more direct for the client. */
.portal-intro{
    align-items:flex-start;
}

.portal-intro h2{
    font-size:var(--font-size-2xl);
}

.portal-intro-icon{
    width:52px;
    height:52px;
}

/* The access card uses the Home visual language: translucent rather than
   an opaque white rectangle. */
.portal-access-card{
    background:rgba(255,255,255,.34);
    box-shadow:none;
}

[data-theme="dark"] .portal-access-card{
    background:rgba(255,255,255,.035);
}

@media (max-height:820px) and (min-width:769px){

    .client-portal-shell{
        padding:
            var(--space-4)
            var(--space-5);
    }

    .portal-logo{
        width:92px;
        height:92px;
    }

    .portal-brand h1{
        font-size:
            clamp(
                2rem,
                3.4vw,
                2.7rem
            );
    }

    .portal-brand h2{
        font-size:
            clamp(
                1.35rem,
                2.3vw,
                1.75rem
            );
    }
}

@media (max-width:768px){

    .portal-logo{
        width:84px;
        height:84px;
    }

    .portal-brand h1{
        font-size:2rem;
    }

    .portal-brand h2{
        font-size:1.35rem;
    }
}


/* ==========================================================
   V26 — PORTAL CLIENTES / AJUSTE VISUAL
========================================================== */

/* El nombre "Portal de clientes" queda como etiqueta naranja,
   con el mismo tamaño visual que el título principal de Home. */
.portal-brand-title{
    display:block;
    margin:var(--space-1) 0 var(--space-1);
    color:var(--color-primary);
    font-family:var(--font-family-heading, inherit);
    font-size:clamp(1.75rem, 3.2vw, 2.55rem);
    font-weight:var(--font-weight-black);
    line-height:var(--line-height-tight);
    letter-spacing:normal;
    text-transform:none;
}

/* El h1 pasa a ser el único título grande de la página. */
.portal-brand h1{
    margin:0 0 var(--space-1);
    color:var(--color-heading);
    font-size:clamp(2rem, 3.8vw, 3rem);
    font-weight:var(--font-weight-black);
    line-height:var(--line-height-tight);
}

/* La tarjeta de acceso usa exactamente el lenguaje de vidrio del Home:
   transparente, con el fondo visible detrás y sin bloque blanco. */
.portal-access-card{
    background:var(--glass-background) !important;
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
}

[data-theme="dark"] .portal-access-card{
    background:var(--glass-background) !important;
}

/* Elimina cualquier tratamiento heredado que pueda convertirla
   nuevamente en una tarjeta opaca. */
.portal-access-card,
.portal-access-card::before,
.portal-access-card::after{
    background-color:transparent;
}

/* Mantiene solo el fondo de vidrio definido por el sistema. */
.portal-access-card{
    background:var(--glass-background) !important;
}

@media (max-width:768px){
    .portal-brand-title{
        font-size:1.65rem;
    }

    .portal-brand h1{
        font-size:2rem;
    }
}


/* ==========================================================
   V27 — MISMA TARJETA DE VIDRIO QUE HOME
   El portal no debe usar --glass-background porque esa variable
   es deliberadamente más opaca en el tema oscuro. Home utiliza
   --home-hero-background.
========================================================== */

.client-portal-shell{
    background:
        var(--home-hero-background) !important;

    border:
        1px solid
        var(--home-hero-border) !important;

    box-shadow:
        var(--home-hero-shadow) !important;

    backdrop-filter:
        blur(var(--home-hero-blur));

    -webkit-backdrop-filter:
        blur(var(--home-hero-blur));

    overflow:visible;
}

/* La tarjeta de acceso interior también conserva el mismo efecto
   translúcido, en lugar de convertirse en otra caja opaca. */
.portal-access-card{
    background:
        var(--home-hero-background) !important;

    border:
        1px solid
        var(--home-hero-border) !important;

    box-shadow:
        var(--home-hero-shadow) !important;

    backdrop-filter:
        blur(var(--home-hero-blur));

    -webkit-backdrop-filter:
        blur(var(--home-hero-blur));
}

.client-portal-shell::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        var(--home-hero-highlight);
    opacity:
        var(--home-hero-highlight-opacity);
}

.client-portal-shell > *{
    position:relative;
    z-index:1;
}

[data-theme="light"] .client-portal-shell,
[data-theme="light"] .portal-access-card{
    background:
        var(--home-hero-background) !important;
}

[data-theme="dark"] .client-portal-shell,
[data-theme="dark"] .portal-access-card{
    background:
        var(--home-hero-background) !important;
}

@media (max-width:768px){
    .client-portal-shell{
        overflow:visible;
    }
}


/* ==========================================================
   V28 — JERARQUÍA DEL PORTAL
========================================================== */

.portal-brand-title{
    font-size:
        clamp(
            2rem,
            3.45vw,
            2.75rem
        ) !important;

    line-height:
        var(--line-height-tight);

    margin:
        var(--space-1) 0
        var(--space-1);
}

.portal-brand h1{
    font-size:
        clamp(
            1.55rem,
            2.65vw,
            2.05rem
        ) !important;

    line-height:
        var(--line-height-tight);

    margin:
        0 0
        var(--space-1);
}


/* ==========================================================
   V33 — PORTAL: SCROLL DINÁMICO SIN RECARGAR
========================================================== */

body.portal-access-active .app{
    height:auto;
    min-height:100dvh;
    overflow:visible;
}

body.portal-access-active .app-main{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
}

body.portal-access-active .app-footer{
    flex:0 0 auto;
}

body.portal-access-active .client-portal-page:not(.detail-page){
    height:auto;
    min-height:100%;
    align-items:flex-start;
    overflow:visible;
    padding-top:var(--space-4);
    padding-bottom:var(--space-6);
}

body.portal-access-active
.client-portal-page:not(.detail-page)
.client-portal-shell{
    max-height:none;
    overflow:visible;
}

@media (min-width:769px) and (min-height:900px){

    body.portal-access-active
    .client-portal-page:not(.detail-page){
        align-items:center;
    }
}

@media (max-width:768px){

    body.portal-access-active .app{
        height:auto;
        min-height:100dvh;
        overflow:visible;
    }

    body.portal-access-active .app-main{
        overflow-y:auto;
        overflow-x:hidden;
    }

    body.portal-access-active
    .client-portal-page:not(.detail-page){
        height:auto;
        min-height:100%;
        align-items:flex-start;
    }
}

/* Nuevo formato de credencial del Portal:
   ASEP-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX */
#codigo{
    letter-spacing:.04em;
    text-transform:uppercase;
}


/* ==========================================================
   V34 — PORTAL AUTENTICADO / DETALLE: SCROLL INMEDIATO
========================================================== */

/*
 * La vista autenticada ya nace con reportes. No debe heredar el
 * overflow:hidden usado por la portada de acceso.
 */
body.portal-content-scroll .app{
    height:auto;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:visible;
}

body.portal-content-scroll .app-main{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden;
}

body.portal-content-scroll .app-footer{
    flex:0 0 auto;
}

body.portal-content-scroll
.client-portal-page:not(.detail-page){
    height:auto;
    min-height:100%;
    align-items:flex-start;
    overflow:visible;
    padding-top:var(--space-4);
    padding-bottom:var(--space-6);
}

body.portal-content-scroll
.client-portal-page:not(.detail-page)
.client-portal-shell{
    max-height:none;
    height:auto;
    overflow:visible;
}

body.portal-content-scroll
.detail-page{
    min-height:100%;
    height:auto;
    overflow:visible;
}

body.portal-content-scroll
.detail-page
.client-portal-shell{
    max-height:none;
    height:auto;
    overflow:visible;
}

@media (max-width:768px){

    body.portal-content-scroll .app{
        height:auto;
        min-height:100dvh;
        overflow:visible;
    }

    body.portal-content-scroll .app-main{
        overflow-y:auto !important;
        overflow-x:hidden;
    }

    body.portal-content-scroll
    .client-portal-page:not(.detail-page),
    body.portal-content-scroll
    .detail-page{
        height:auto;
        min-height:100%;
        align-items:flex-start;
    }
}


/* ==========================================================
   V41 — ACCESO DEL PORTAL SOLO CON CÓDIGO PERSONAL
========================================================== */

.portal-fields-single{
    grid-template-columns:1fr;
}

.portal-fields-single .portal-primary-btn{
    grid-column:1;
}

.portal-fields-single .portal-field{
    width:100%;
}

#codigo{
    letter-spacing:.05em;
}

@media (min-width:769px){
    .portal-fields-single{
        max-width:760px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* Ya no existen selectores de cliente en el acceso. */
.portal-type-grid{
    display:none !important;
}

/* ==========================================================
   V41 — SCROLL INMEDIATO EN VISTA AUTENTICADA
========================================================== */

body.portal-content-scroll .app{
    height:auto;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:visible;
}

body.portal-content-scroll .app-main{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden;
}

body.portal-content-scroll .app-footer{
    flex:0 0 auto;
}

body.portal-content-scroll
.client-portal-page{
    height:auto;
    min-height:100%;
    align-items:flex-start;
    overflow:visible;
    padding-top:var(--space-4);
    padding-bottom:var(--space-6);
}

body.portal-content-scroll
.client-portal-shell{
    height:auto;
    max-height:none;
    overflow:visible;
}

@media (max-width:768px){
    body.portal-content-scroll .app{
        height:auto;
        overflow:visible;
    }

    body.portal-content-scroll .app-main{
        overflow-y:auto !important;
    }

    body.portal-content-scroll
    .client-portal-page,
    body.portal-content-scroll
    .detail-page{
        height:auto;
        min-height:100%;
        align-items:flex-start;
    }
}


/* ==========================================================
   V42 — PORTAL: ICONOS LOCALES + ACCESO A REPORTES
========================================================== */

.portal-svg-icon{
    width:1.1em;
    height:1.1em;
    display:inline-block;
    flex:0 0 auto;
    vertical-align:-0.15em;
}

.portal-back-link .portal-svg-icon,
.portal-secondary-btn .portal-svg-icon{
    width:1.05em;
    height:1.05em;
}

.portal-intro-icon .portal-svg-icon{
    width:1.45rem;
    height:1.45rem;
}

.portal-primary-btn .portal-svg-icon{
    width:1.15rem;
    height:1.15rem;
}

.portal-report-action{
    min-height:46px;
    padding:0 var(--space-3);
    border:var(--border-width-thin) solid var(--color-primary-border);
    border-radius:var(--button-radius);
    background:var(--color-primary-soft);
    color:var(--color-primary);
    box-shadow:var(--shadow-xs);
    transform:none;
}

.portal-report-action-label{
    line-height:1;
}

.portal-report-action-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--color-primary);
    color:var(--button-primary-text);
    box-shadow:0 6px 14px rgba(0,0,0,.10);
}

.portal-report-action-icon .portal-svg-icon{
    width:16px;
    height:16px;
}

.portal-report-action:hover{
    color:var(--button-primary-text);
    background:var(--button-primary-gradient);
    border-color:var(--color-primary);
    box-shadow:var(--button-primary-shadow);
    transform:translateY(-1px);
}

.portal-report-action:hover .portal-report-action-icon{
    background:rgba(255,255,255,.18);
    color:var(--button-primary-text);
    box-shadow:none;
}

.portal-card-icon{
    color:var(--color-info);
}

.portal-card-icon .portal-svg-icon{
    width:21px;
    height:21px;
}

.portal-status-icon .portal-svg-icon{
    width:25px;
    height:25px;
}

.portal-inline-detail > .portal-svg-icon{
    width:21px;
    height:21px;
}

.portal-empty-icon .portal-svg-icon{
    width:26px;
    height:26px;
}

/* Keep the report action obvious on touch devices as well. */
@media (max-width:576px){
    .portal-report-action{
        min-height:48px;
        padding:0 var(--space-3);
    }

    .portal-report-action-icon{
        width:36px;
        height:36px;
    }
}



/* ==========================================================
   V45 — BOOTSTRAP ICONS PARA EL PORTAL
========================================================== */

/*
 * Bootstrap Icons ya se carga en templates/base.html, por lo que el Portal
 * utiliza exactamente la misma familia de iconos que el resto de AsEp.
 */
.portal-access-card .bi,
.portal-intro-icon .bi,
.portal-primary-btn .bi,
.portal-report-action .bi,
.portal-report-action-icon .bi,
.portal-card-icon .bi,
.portal-status-icon .bi,
.portal-secondary-btn .bi{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    flex:0 0 auto;
    vertical-align:middle;
}

/* Bloques de iconos de las tarjetas del detalle. */
.portal-card-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    line-height:1;
    border:1px solid var(--color-secondary-border);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            var(--color-secondary-soft),
            var(--bg-surface)
        );
    color:var(--color-info);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 4px 12px rgba(13,27,76,.07);
}

.portal-card-icon .bi{
    font-size:1.35rem;
}

/* Estado principal. */
.portal-status-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    line-height:1;
    border:1px solid var(--color-primary-border);
    border-radius:15px;
    background:
        linear-gradient(
            145deg,
            var(--color-primary-soft),
            var(--bg-surface)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 5px 14px rgba(255,91,44,.10);
    color:var(--color-primary);
}

.portal-status-icon .bi{
    font-size:1.5rem;
}

/* Icono del acceso. */
.portal-intro-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    line-height:1;
    border:1px solid var(--color-primary-border);
    border-radius:15px;
    background:
        linear-gradient(
            145deg,
            var(--color-primary-soft),
            var(--bg-surface)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 5px 14px rgba(255,91,44,.09);
    color:var(--color-primary);
}

.portal-intro-icon .bi{
    font-size:1.45rem;
}

/* Botón de reporte: icono de flecha dentro del círculo. */
.portal-report-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    min-height:46px;
    padding:0 var(--space-3);
    border:var(--border-width-thin) solid var(--color-primary-border);
    border-radius:var(--button-radius);
    background:var(--color-primary-soft);
    color:var(--color-primary);
    box-shadow:var(--shadow-xs);
    transform:none;
}

.portal-report-action .bi{
    font-size:1rem;
}

.portal-report-action-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--color-primary);
    color:var(--button-primary-text);
    box-shadow:0 6px 14px rgba(0,0,0,.10);
}

.portal-report-action-icon .bi{
    font-size:1rem;
}

.portal-report-action:hover{
    color:var(--button-primary-text);
    background:var(--button-primary-gradient);
    border-color:var(--color-primary);
    box-shadow:var(--button-primary-shadow);
    transform:translateY(-1px);
}

.portal-report-action:hover .portal-report-action-icon{
    background:rgba(255,255,255,.18);
    color:var(--button-primary-text);
    box-shadow:none;
}

/* Flechas y acciones secundarias. */
.portal-back-link .bi,
.portal-secondary-btn .bi{
    font-size:1.05em;
}

/* Dark mode. */
[data-theme="dark"] .portal-card-icon{
    background:
        linear-gradient(
            145deg,
            rgba(79,134,255,.16),
            rgba(255,255,255,.025)
        );
    border-color:rgba(95,145,255,.24);
    color:#78a6ff;
}

[data-theme="dark"] .portal-status-icon,
[data-theme="dark"] .portal-intro-icon{
    background:
        linear-gradient(
            145deg,
            rgba(255,91,44,.17),
            rgba(255,255,255,.025)
        );
    border-color:rgba(255,111,71,.30);
}

/* Conserva el centrado incluso si alguna regla global de .bi cambia el line-height. */
.portal-card-icon::before,
.portal-card-icon::after,
.portal-status-icon::before,
.portal-status-icon::after,
.portal-intro-icon::before,
.portal-intro-icon::after{
    margin:0 !important;
    vertical-align:0 !important;
}

@media (max-width:576px){
    .portal-report-action{
        min-height:48px;
        padding:0 var(--space-3);
    }

    .portal-report-action-icon{
        width:36px;
        height:36px;
    }
}


/* V47 — iconos Bootstrap en detalle: centrado y tamaño consistente */
.portal-info-card .portal-card-icon .bi,
.portal-status-icon .bi,
.portal-inline-detail > .bi{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    margin:0;
    flex:0 0 auto;
}

.portal-info-card .portal-card-icon .bi{
    font-size:1.35rem;
}

.portal-status-icon .bi{
    font-size:1.5rem;
}

.portal-inline-detail > .bi{
    font-size:1.25rem;
}


/* ==========================================================
   V48 — DETALLE DEL PORTAL: COMPOSICIÓN CENTRADA Y LIMPIA
========================================================== */

/*
 * La vista anterior tenía los bloques demasiado altos y el contenido
 * pegado a un extremo. Esta capa corrige únicamente la composición.
 */

/* Estado */
.portal-status-banner{
    align-items:center;
    min-height:88px;
}

.portal-status-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    width:52px;
    height:52px;
    padding:0;
    line-height:1;
}

.portal-status-icon .bi{
    display:block;
    margin:0;
    font-size:1.55rem;
    line-height:1;
}

/* Datos del reporte: icono y texto quedan centrados verticalmente. */
.portal-info-card{
    align-items:center;
    min-height:88px;
    padding:var(--space-3) var(--space-4);
}

.portal-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    width:52px;
    height:52px;
    padding:0;
    margin:0;
    line-height:1;
}

.portal-card-icon .bi{
    display:block;
    margin:0;
    font-size:1.42rem;
    line-height:1;
}

.portal-info-card > div:last-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:52px;
}

/* Etiqueta y valor alineados entre sí, sin que parezcan independientes. */
.portal-info-card > div:last-child > span{
    margin:0 0 4px;
    line-height:1.2;
}

.portal-info-card > div:last-child > strong{
    line-height:1.25;
}

/* Secciones de lectura: texto centrado verticalmente dentro de la tarjeta,
   pero mantiene alineación izquierda, más natural para una descripción. */
.portal-reading-card{
    display:flex;
    align-items:center;
    min-height:92px;
    padding:var(--space-4);
}

/* Las secciones no deben parecer grandes imágenes vacías cuando hay poco texto. */
.portal-detail-section{
    margin-top:var(--space-3);
}

.portal-section-heading.compact{
    display:flex;
    align-items:flex-end;
    min-height:auto;
}

.portal-section-heading.compact h2{
    margin-top:4px;
    line-height:1.15;
}

/* Garantía: icono y contenido igualmente centrados. */
.portal-inline-detail{
    min-height:78px;
    align-items:center;
}

.portal-inline-detail > .bi{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    margin:0;
    font-size:1.3rem;
    line-height:1;
}

/* Botones y enlaces usan también Bootstrap Icons de forma consistente. */
.portal-back-link,
.portal-secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
}

.portal-back-link .bi,
.portal-secondary-btn .bi{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.05em;
    height:1.05em;
    margin:0;
    line-height:1;
}

/* El shell del detalle respeta la misma composición y no estira
   artificialmente las tarjetas. */
.detail-page .client-portal-shell{
    padding-bottom:var(--space-5);
}

@media (max-width:768px){

    .portal-info-card{
        min-height:82px;
        padding:var(--space-3);
    }

    .portal-card-icon{
        flex-basis:46px;
        width:46px;
        height:46px;
    }

    .portal-info-card > div:last-child{
        min-height:46px;
    }

    .portal-reading-card{
        min-height:82px;
        padding:var(--space-3);
    }
}


/* ==========================================================
   V49 — DETALLE: ICONOS Y CONTENIDO REALMENTE CENTRADOS
========================================================== */

/*
 * En la versión anterior los iconos sí tenían una caja centrada,
 * pero el conjunto de cada dato continuaba pegado al lado izquierdo.
 * Aquí el diseño es deliberadamente centrado: icono arriba y
 * contenido debajo.
 */

.portal-info-grid{
    align-items:stretch;
}

.portal-info-card{
    min-height:148px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    padding:var(--space-4);
    text-align:center;
}

.portal-info-card .portal-card-icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.portal-info-card .portal-card-icon .bi{
    display:block;
    margin:0;
    font-size:1.5rem;
    line-height:1;
}

.portal-info-card > div:last-child{
    min-height:0;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.portal-info-card > div:last-child > span{
    display:block;
    margin:0 0 .35rem;
    text-align:center;
    line-height:1.15;
}

.portal-info-card > div:last-child > strong{
    display:block;
    width:100%;
    text-align:center;
    line-height:1.3;
}

/*
 * El bloque grande de descripción deja de parecer una imagen:
 * el contenido se encuentra centrado vertical y horizontalmente.
 */
.portal-reading-card{
    min-height:126px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-5);
    text-align:center;
    line-height:1.65;
    white-space:pre-line;
}

.portal-reading-card.is-muted{
    justify-content:center;
    align-items:center;
    text-align:center;
}

/*
 * Las cabeceras siguen alineadas a la izquierda porque son títulos
 * de sección, pero el contenido de las tarjetas debajo queda centrado.
 */
.portal-section-heading.compact{
    width:100%;
}

.portal-section-heading.compact > div{
    width:100%;
}

.portal-section-heading.compact h2{
    text-align:left;
}

/* Estado: icono y texto también forman una composición centrada. */
.portal-status-banner{
    justify-content:center;
    text-align:center;
    gap:var(--space-3);
}

.portal-status-banner > div:last-child{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.portal-status-banner > div:last-child > span,
.portal-status-banner > div:last-child > strong{
    text-align:center;
}

.portal-status-icon{
    flex:0 0 54px;
    width:54px;
    height:54px;
}

.portal-status-icon .bi{
    font-size:1.6rem;
}

/* Garantía: también centrada como una tarjeta informativa. */
.portal-inline-detail{
    justify-content:center;
    text-align:center;
}

.portal-inline-detail > .bi{
    flex:0 0 44px;
    width:44px;
    height:44px;
}

.portal-inline-detail > div{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.portal-inline-detail > div > span,
.portal-inline-detail > div > strong{
    text-align:center;
}

@media (max-width:768px){

    .portal-info-card{
        min-height:132px;
        padding:var(--space-4) var(--space-3);
    }

    .portal-reading-card{
        min-height:112px;
        padding:var(--space-4);
    }
}


/* ==========================================================
   V50 — DETALLE: TEXTO NATURAL + FOOTER GLOBAL VISIBLE
========================================================== */

/* Las áreas de lectura vuelven a un comportamiento documental normal:
   texto alineado a la izquierda y centrado solamente en vertical. */
.detail-page .portal-reading-card{
    display:block;
    min-height:0;
    padding:var(--space-4);
    text-align:left;
    line-height:var(--line-height-relaxed);
}

.detail-page .portal-reading-card.is-muted{
    display:block;
    min-height:0;
    text-align:left;
}

/* El detalle comparte el mismo modelo de viewport que Home:
   app principal flexible + footer global fuera del área desplazable. */
body:has(.detail-page) .app{
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

body:has(.detail-page) .app-main{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
}

body:has(.detail-page) .app-footer{
    position:relative;
    z-index:20;
    flex:0 0 auto;
}

/* El contenido puede crecer; el footer no queda atrapado dentro del scroll. */
body:has(.detail-page) .detail-page{
    min-height:100%;
    height:auto;
    overflow:visible;
    align-items:flex-start;
    padding-bottom:var(--space-5);
}

body:has(.detail-page) .detail-page .client-portal-shell{
    height:auto;
    max-height:none;
    overflow:visible;
}

/* En resoluciones pequeñas mantenemos el footer fuera del contenido desplazable. */
@media (max-width:768px){
    body:has(.detail-page) .app{
        height:auto;
        min-height:100dvh;
        overflow:visible;
    }

    body:has(.detail-page) .app-main{
        overflow-y:auto;
        overflow-x:hidden;
    }

    body:has(.detail-page) .detail-page{
        min-height:auto;
        height:auto;
    }
}


/* ==========================================================
   V52 — TEXTO DOCUMENTAL, ARRIBA A LA IZQUIERDA
========================================================== */

.detail-page .portal-reading-card{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    box-sizing:border-box !important;

    padding:20px 24px !important;
    margin:0 !important;

    text-align:left !important;

    align-items:initial !important;
    justify-content:initial !important;
    place-items:initial !important;

    overflow:visible !important;
}

.detail-page .portal-reading-card .portal-reading-text{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;

    margin:0 !important;
    padding:0 !important;

    text-align:left !important;
    line-height:var(--line-height-relaxed);
    white-space:pre-line;

    align-self:auto !important;
    justify-self:auto !important;
}

.detail-page .portal-reading-card.is-muted .portal-reading-text{
    color:var(--color-text-muted);
}

.detail-page .portal-reading-card .portal-reading-text p{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
}


/* ==========================================================
   V53 — CONTENIDO DOCUMENTAL REALMENTE ARRIBA A LA IZQUIERDA
========================================================== */

/*
 * Se usan clases nuevas para aislar estas tarjetas de las reglas
 * históricas que convirtieron .portal-reading-card en un contenedor flex.
 * La descripción, materiales y solución son documentos, no componentes
 * centrados.
 */
.detail-page .portal-document-card{
    display:block !important;
    position:static !important;
    float:none !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    box-sizing:border-box !important;

    margin:0 !important;
    padding:20px 24px !important;

    text-align:left !important;

    background:var(--bg-surface);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-lg);

    line-height:var(--line-height-relaxed);

    overflow:visible !important;
}

.detail-page .portal-document-content{
    display:block !important;
    position:static !important;
    float:none !important;

    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;

    box-sizing:border-box !important;

    margin:0 !important;
    padding:0 !important;

    text-align:left !important;
    text-indent:0 !important;

    line-height:var(--line-height-relaxed);
    white-space:pre-line;
}

.detail-page .portal-document-content p{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
}

.detail-page .portal-document-card.is-muted .portal-document-content{
    color:var(--color-text-muted);
}


/* ==========================================================
   V54 — ELIMINAR ESPACIO INVISIBLE ANTES DEL TEXTO
========================================================== */

/*
 * El espacio que se veía al seleccionar el texto no era padding:
 * era el salto de línea/indentación de Jinja conservado por
 * white-space: pre-line.
 */
.detail-page .portal-document-content{
    white-space:pre-wrap !important;
    overflow-wrap:anywhere;
    word-break:normal;
    text-indent:0 !important;
    line-break:auto;
}

.detail-page .portal-document-card{
    line-height:var(--line-height-relaxed);
}


/* ==========================================================
   V55 — SIN ESPACIO DE PLANTILLA ANTES DEL PRIMER CARÁCTER
========================================================== */

/*
 * La causa real era el whitespace HTML/Jinja fuera de {{ ... }}.
 * V55 lo elimina con {{- ... -}}. Este CSS mantiene el documento como
 * bloque normal y evita cualquier indentación o alineación heredada.
 */
.detail-page .portal-document-content{
    text-align:left !important;
    text-indent:0 !important;
    margin:0 !important;
    padding:0 !important;
    white-space:pre-wrap !important;
    display:block !important;
    width:100% !important;
}


/* ==========================================================
   FOTOGRAFÍAS DE REPORTES
========================================================== */

.portal-attachments-block{
    margin-top:var(--space-3);
    padding:var(--space-4);
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-xl);
    background:var(--bg-surface);
}

.portal-attachments-heading{
    margin-bottom:var(--space-3);
}

.portal-attachments-heading h3{
    margin:.15rem 0 var(--space-1);
    color:var(--color-heading);
    font-size:var(--font-size-xl);
    font-weight:var(--font-weight-bold);
}

.portal-attachments-heading p{
    margin:0;
    color:var(--color-text-muted);
    font-size:var(--font-size-xs);
}

.portal-attachments-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:var(--space-3);
}

.portal-attachment-card{
    display:block;
    overflow:hidden;
    border:var(--border-width-thin) solid var(--border-light);
    border-radius:var(--radius-lg);
    background:var(--bg-card);
    color:var(--color-text);
    text-decoration:none;
    box-shadow:var(--shadow-sm);
    transition:var(--transition-standard);
}

.portal-attachment-card:hover{
    color:var(--color-text);
    border-color:var(--color-primary-border);
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}

.portal-attachment-card img{
    width:100%;
    height:150px;
    display:block;
    object-fit:cover;
    background:var(--color-secondary-soft);
}

.portal-attachment-card span{
    display:block;
    padding:var(--space-2) var(--space-3);
    color:var(--color-text-muted);
    font-size:var(--font-size-2xs);
    overflow-wrap:anywhere;
}