html,body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f5f7fa;color:#18212f}.app-shell{min-height:100vh;}.sidebar{background:#172033;color:#fff;min-height:100vh}.brand{font-weight:800;font-size:1.4rem;padding:22px 20px;border-bottom:1px solid #33405a}.navmenu{}.navmenu a{color:#dbe3f0;text-decoration:none;padding:9px 20px}.navmenu a.active,.navmenu a:hover{background:#26344f;color:#fff}.nav-title{padding:18px 20px 5px;font-size:.72rem;text-transform:uppercase;color:#91a0b7;font-weight:700}.main-area{min-width:0}.topbar{height:64px;background:white;border-bottom:1px solid #e3e8ef;padding:0 28px}.badge{font-size:.72rem;background:#edf2f8;border-radius:99px;padding:4px 8px;margin-left:10px}.topbar-user{}.content{padding:28px}.login-page{min-height:100vh;background:linear-gradient(135deg,#eef2f8,#dfe7f2)}.login-card{width:min(420px,calc(100vw - 40px));background:#fff;border-radius:16px;padding:34px;box-shadow:0 18px 60px rgba(20,30,50,.16)}.login-logo{font-weight:900;letter-spacing:.16em}.login-card h1{margin-bottom:4px}.muted{color:#6c7788}.field{margin:17px 0}.field label{font-weight:600}.login-button{width:100%;margin-top:8px}.login-error{padding:10px 12px;background:#fff0f0;border:1px solid #efb4b4;border-radius:8px;margin:12px 0}.testing-note,.warning{margin-top:18px;padding:12px 14px;background:#fff7df;border:1px solid #efd58a;border-radius:9px}.dashboard-grid{margin:22px 0}.tile{background:#fff;border:1px solid #e2e7ee;border-radius:12px;padding:20px;text-decoration:none;color:inherit}.tile span{font-size:1.05rem;font-weight:700}.tile strong{font-size:.85rem;color:#6c7788}.context-card,.module-shell{background:white;border:1px solid #e2e7ee;border-radius:12px;padding:20px;margin-top:20px}.period-row{max-width:420px}.page-header{margin-bottom:18px}.page-header h1{margin:0}.page-header p{color:#6c7788}.empty-state{padding:30px;background:#fff;border:1px dashed #c8d0dc;border-radius:10px;text-align:center}.auth-redirect{padding:30px}@media(max-width:850px){.app-shell{}.sidebar{min-height:auto}.content{padding:16px}}

.editor-card { background: var(--bs-body-bg, #fff); border: 1px solid rgba(128,128,128,.25); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.form-grid {     }
.form-grid-wide {  }
.button-row {    margin-top:1rem; }
.status-message { padding:.7rem 1rem; margin:.75rem 0; border:1px solid rgba(128,128,128,.3); border-radius:6px; }
@media (max-width:900px){ .form-grid,.form-grid-wide {  } }

/* ============================================================
   Navegación vertical de Informes
   Se mantiene aquí (CSS global) para evitar diferencias de
   alcance de CSS isolation dentro del menú lateral.
   ============================================================ */
.sidebar .reports-section-title {
    padding-bottom: 7px;
}

.sidebar .report-navigation {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 8px;
    overflow: hidden;
}

.sidebar .report-nav-group {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sidebar .report-nav-group-title {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 20px 9px 34px;
    color: #dbe3f0;
    background: transparent;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    list-style: none;
    user-select: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sidebar .report-nav-group-title::-webkit-details-marker {
    display: none;
}

.sidebar .report-nav-group-title::marker {
    content: "";
}

.sidebar .report-nav-group-title::before {
    content: "›";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #91a0b7;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.sidebar .report-nav-group[open] > .report-nav-group-title::before {
    transform: translateY(-50%) rotate(90deg);
}

.sidebar .report-nav-group-title:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.045);
}

.sidebar .report-nav-children {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 1px 0 5px;
}

.sidebar .navmenu .report-nav-item {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 16px 8px 52px;
    color: #cfd8e7;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
}

.sidebar .navmenu .report-nav-item:hover {
    color: #ffffff;
    background: #26344f;
    border-left-color: #8ba8d6;
}

.sidebar .navmenu .report-nav-catalog {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 5px 0 0;
    padding: 9px 16px 9px 34px;
    color: #dbe3f0;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.sidebar .navmenu .report-nav-catalog:hover {
    color: #ffffff;
    background: #26344f;
}


/* CRUD refactor - Etapa 17 */
.crud-popup-content {
    padding: 4px 2px;
    min-width: 0;
}

.crud-popup-content .form-grid,
.crud-popup-content .catalog-form {
    
    
    
    
}

.popup-operation-actions {
    
    
    
    margin-top: 18px;
}

.page-header > .dxbl-btn + .dxbl-btn,
.catalog-header > .dxbl-btn + .dxbl-btn {
    margin-left: 8px;
}

.access-popup-sections {
    
    
    
    margin-top: 18px;
}

@media (max-width: 800px) {
    .crud-popup-content .form-grid,
    .crud-popup-content .catalog-form,
    .access-popup-sections {
        
    }
}

.grid-context-toolbar {
    
    
    
    margin: 10px 0 14px;
}

.grid-context-toolbar > span {
    color: #64748b;
    font-size: .9rem;
}


/* Botones localizados de formularios popup CRUD */
.crud-edit-buttons {
    
    
    
    
    width: 100%;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}


/* Etapa 18: footer uniforme de todos los popups CRUD */
.popup-footer-actions {
    
    
    
    
    width: 100%;
}


/* Etapa 20: acciones por fila y encabezado alineado */
.row-action-button {
    min-width: 34px !important;
    width: 34px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* ============================================================
   DevExpress Layout refactor
   All control alignment is handled by DxGridLayout,
   DxStackLayout and DxFormLayout. CSS below is visual only.
   ============================================================ */
.dx-form-layout-full,
.dx-page-header,
.dx-header-actions,
.dx-page-actions,
.dx-button-row,
.dx-actions,
.dx-popup-footer-actions,
.dx-popup-footer,
.dx-preview-summary,
.dashboard-layout,
.import-context-layout,
.split-layout-devexpress,
.report-summary-layout,
.report-main-layout,
.cierre-toolbar-layout,
.meses-layout {
    width: 100%;
    min-width: 0;
}

.dx-page-header {
    margin-bottom: 18px;
}

.dx-page-header h1 {
    margin: 0;
}

.dx-page-header p {
    color: #6c7788;
}

.dx-header-actions {
    width: auto;
}

.crud-popup-content {
    padding: 4px 0;
}

.tile {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.tile span {
    font-size: 1.05rem;
    font-weight: 700;
}

.tile strong {
    display: block;
    margin-top: 8px;
    font-size: .85rem;
    color: #6c7788;
}

.login-page {
    min-height: 100vh;
    padding: 5vh 20px;
    background: linear-gradient(135deg,#eef2f8,#dfe7f2);
}

.login-card {
    width: min(420px, calc(100vw - 40px));
    margin: 0 auto;
}

.login-form-layout {
    width: 100%;
}

.file-name {
    display: block;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .content {
        padding: 16px;
    }
}

.import-project-actions,
.mes-card-layout {
    width: 100%;
    min-width: 0;
}

.mes-estado {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

/* Navegación principal vertical unificada */
.sidebar .navmenu {
    width: 100%;
    min-width: 310px;
}

.sidebar .navmenu > a,
.sidebar .navmenu .menu-nav-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.sidebar .navmenu .menu-nav-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .navmenu .menu-nav-group-title {
    white-space: nowrap;
}


/* === ETAPA 50: LOGIN TRATOS WEB - DISEÑO FINAL === */
html:has(.tratos-login-final-page),
body:has(.tratos-login-final-page) {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}

.tratos-login-final-page {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: grid;
    grid-template-columns: minmax(390px, 28%) minmax(0, 72%);
    grid-template-rows: 100%;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    margin: 0;
    padding: 0;

    overflow: hidden;
    background: #ffffff;
}

.tratos-login-final-form {
    position: relative;

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

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

    box-sizing: border-box;
    padding: 58px 64px 92px;

    background: #ffffff;
    overflow: auto;
}

.tratos-login-final-form-content {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.tratos-login-final-product {
    margin: 0 0 12px;

    color: #17324a;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
}

.tratos-login-final-product span {
    color: #e51b23;
}

.tratos-login-final-redline {
    width: 54px;
    height: 5px;
    margin: 0 0 34px;

    background: #e51b23;
}

.tratos-login-final-form-content h1 {
    margin: 0 0 14px;

    color: #172f46;
    font-size: 33px;
    font-weight: 700;
    line-height: 1.14;
}

.tratos-login-final-subtitle {
    margin: 0 0 34px;

    color: #6f7f8f;
    font-size: 15px;
    line-height: 1.45;
}

.tratos-login-final-layout {
    width: 100%;
}

.tratos-login-final-layout .dxbl-fl,
.tratos-login-final-layout .dxbl-fl-group,
.tratos-login-final-layout .dxbl-text-edit {
    width: 100% !important;
}

.tratos-login-final-layout .dxbl-fl-item {
    margin-bottom: 12px;
}

.tratos-login-final-layout .dxbl-fl-cpt {
    margin-bottom: 6px;

    color: #18324a;
    font-size: 14px;
    font-weight: 600;
}

.tratos-login-final-layout .dxbl-text-edit {
    min-height: 48px;
    border-radius: 6px;
}

.tratos-login-final-button {
    width: 100% !important;
    min-height: 48px;

    margin-top: 18px;

    border-radius: 6px;

    font-size: 15px;
    font-weight: 600;
}

.tratos-login-final-error {
    margin-top: 14px;
    padding: 11px 13px;

    border: 1px solid #efc3c3;
    border-radius: 7px;

    background: #fff2f2;
    color: #b42318;

    font-size: 13px;
}

.tratos-login-final-footer {
    position: absolute;
    left: 64px;
    bottom: 34px;

    color: #738398;
    font-size: 13px;
    line-height: 1.5;
}

.tratos-login-final-hero {
    position: relative;

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

    overflow: hidden;
    background: #eaf2f8;
}

.tratos-login-final-hero-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center center;

    border: 0;
}

@media (max-width: 1100px) {
    .tratos-login-final-page {
        grid-template-columns: minmax(380px, 36%) minmax(0, 64%);
    }

    .tratos-login-final-form {
        padding-left: 40px;
        padding-right: 40px;
    }

    .tratos-login-final-footer {
        left: 40px;
    }
}

@media (max-width: 760px) {
    html:has(.tratos-login-final-page),
    body:has(.tratos-login-final-page) {
        overflow: auto;
    }

    .tratos-login-final-page {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .tratos-login-final-hero {
        display: none;
    }

    .tratos-login-final-form {
        width: 100%;
        min-height: 100vh;
        padding: 38px 24px 92px;
    }

    .tratos-login-final-footer {
        left: 24px;
        bottom: 24px;
    }
}

@media (max-height: 700px) and (min-width: 761px) {
    .tratos-login-final-form {
        padding-top: 26px;
        padding-bottom: 74px;
    }

    .tratos-login-final-product {
        font-size: 23px;
    }

    .tratos-login-final-redline {
        margin-bottom: 22px;
    }

    .tratos-login-final-form-content h1 {
        font-size: 28px;
    }

    .tratos-login-final-subtitle {
        margin-bottom: 20px;
    }

    .tratos-login-final-footer {
        bottom: 16px;
    }
}