/* ============================
   TEMA MULTIVA - CSS DE IMAGEN
   (fuentes + paleta + overrides)
   ============================ */

/* ------------------------------------------------------
   1) TIPOGRAFÍA CORPORATIVA (WOFF2 primero, WOFF fallback)
   Rutas base: /App_Themes/Multiva/fonts/WOFF2/ y /WOFF/
   Pesos estándar: 100 Thin, 200 ExtraLight, 300 Light,
                   400 Regular, 500 Medium, 700 Bold, 900 Black
   ------------------------------------------------------ */

/* Thin 100 */
@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-Thin.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-ThinItalic.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-ThinItalic.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* ExtraLight 200 */
@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-ExtraLight.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-ExtraLightItalic.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-ExtraLightItalic.woff") format("woff");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Light 300 */
@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-Light.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-LightItalic.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular 400 */
/*@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-Regular.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}*/
@font-face {
    font-family: "Multiva Sans";
    src: url('../fonts/woff2/multivasans-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-Italic.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium 500 */
@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-Medium.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-MediumItalic.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Bold 700 */
@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-Bold.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-BoldItalic.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Black 900 */
@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-Black.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiva Sans";
    src: url("../fonts/WOFF2/MultivaSans-BlackItalic.woff2") format("woff2"), url("../fonts/WOFF/MultivaSans-BlackItalic.woff") format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Activación global del tema */
.theme-multiva, .theme-multiva * {
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-synthesis: none; /* evita falsos bold/italic */
}

/* ----------------------------
   2) PALETA MULTIVA OFICIAL
   ---------------------------- */
.theme-multiva {
    --color-naranja: #FF4813; /* Naranja Multiva */
    --color-azul: #0084D5; /* Azul Multiva */
    --color-gris: #56728B; /* Gris Multiva */
    --color-acero: #333E48; /* Acero Multiva */
    --color-negro: #1E1F1F; /* Negro */
    --color-blanco: #FFFFFF; /* Blanco */
    /* Mapeo UI */
    --color-primary: var(--color-azul);
    --color-primary-600: #0074BA;
    --color-primary-700: #00649E;
    --color-accent-1: var(--color-naranja);
    --color-accent-2: var(--color-gris);
    --color-bg: var(--color-blanco);
    --color-surface: #F7F8FA;
    --color-border: #D9DFE5;
    --color-text: var(--color-acero);
    --color-text-muted: var(--color-gris);
    --color-info: #BDE5F8;
    --color-success: #DFF2BF;
    --color-warning: #FEEFB3;
    --color-danger: #FFBABA;
}

    /* ----------------------------
   3) OVERRIDES DE UI
   ---------------------------- */

    /* Fondo general / contenedor */
    .theme-multiva,
    .theme-multiva body,
    .theme-multiva #DivContenedor {
        background: var(--color-bg) !important;
        color: var(--color-text);
    }

        /* Encabezado / Pie (sustituye azules legacy) */

        .theme-multiva .EncabezadoRepComun {
            background: var(--color-primary) !important;
            color: var(--color-blanco) !important;
        }

        /* Encabezado / Pie (sustituye azules legacy) */
        .theme-multiva #DivLogin,
        .theme-multiva #DivPie {
            background: var(--color-naranja) !important;
            color: var(--color-blanco) !important;
        }

        /* Botones (altura mínima, radios, foco accesible) */
        /* .theme-multiva .FormatoBotones,*/
        /*.theme-multiva .LinkUno-btn,
        .theme-multiva button,
        .theme-multiva input[type="button"],
        .theme-multiva input[type="submit"] {
            min-height: 36px;
            padding: 0 .9rem;
            border-radius: .5rem;*/
        /* background: var(--color-gris);*/
        /*  color: var(--color-blanco);
            border: 1px solid var(--color-gris-700);*/
        /*font-weight: 500;
            cursor: pointer;
            transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
        }*/

        /*.theme-multiva .FormatoBotones:hover,
            .theme-multiva button:hover {
                background: var(--color-acero-600);
            }

            .theme-multiva .FormatoBotones:disabled,
            .theme-multiva button:disabled {
                opacity: .6;
                cursor: not-allowed;
            }

            .theme-multiva .FormatoBotones:focus-visible,
            .theme-multiva button:focus-visible,
            .theme-multiva input[type="button"]:focus-visible,
            .theme-multiva input[type="submit"]:focus-visible {
                outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, white);
                outline-offset: 2px;
            }*/

        /* Links */
        .theme-multiva .LinkMenu,
        .theme-multiva A.LinkUno:link {
            color: var(--color-acero) !important;
            text-decoration: none;
            /*font-size:large*/
        }

        .theme-multiva A.LinkUno:hover {
            color: var(--color-naranja) !important;
            text-decoration: none;
        }
        /* Links */
        .theme-multiva a {
            /* color: var(--color-blanco) !important;
            */
            text-decoration: none;
        }

            .theme-multiva a:hover {
                text-decoration: underline;
            }

        /* Tarjetas / paneles “grises viejos” */
        .theme-multiva .DivLoginGris,
        .theme-multiva .FormatoBotonesPanel,
        .theme-multiva .Panel,
        .theme-multiva .Caja,
        .theme-multiva .Box {
            background-image: none !important;
            background-color: var(--color-surface) !important;
            border: 1px solid var(--color-border) !important;
            box-shadow: none !important;
        }

        /* Tablas / grids */
        /* .theme-multiva .Tabla,
        .theme-multiva .TablaGrid,
        .theme-multiva .TablaRepComun,
        .theme-multiva table {
            background: var(--color-blanco);
            border: 1px solid var(--color-border);
            border-collapse: collapse;
        }

            .theme-multiva .Tabla th,
            .theme-multiva .TablaGrid th,
            .theme-multiva .TablaRepComun th,
            .theme-multiva table thead th {
                background: color-mix(in srgb, var(--color-primary) 8%, white);
                color: var(--color-text);
                border-bottom: 1px solid var(--color-border);
                text-align: left;
                padding: .6rem .75rem;
                font-weight: 600;
            }

            .theme-multiva .Tabla td,
            .theme-multiva .TablaGrid td,
            .theme-multiva .TablaRepComun td,
            .theme-multiva table td {
                border-top: 1px solid var(--color-border);
                padding: .40rem .75rem;
            }*/

        .theme-multiva .odd,
        .theme-multiva .TBodyZebra tr:nth-child(odd) {
            background: var(--color-surface);
        }

        .theme-multiva .even,
        .theme-multiva .TBodyZebra tr:nth-child(even) {
            background: var(--color-blanco);
        }

        /* Formularios */
        .theme-multiva input,
        .theme-multiva select,
        .theme-multiva textarea {
            border: 1px solid var(--color-border);
            background: #fff;
            color: var(--color-text);
            border-radius: .35rem;
            /*padding: .45rem .6rem;*/
        }

            .theme-multiva input:focus,
            .theme-multiva select:focus,
            .theme-multiva textarea:focus {
                outline: 3px solid color-mix(in srgb, var(--color-primary) 25%, white);
                outline-offset: 1px;
            }

        /* Mensajes / alerts mapeados a variables */
        .theme-multiva .MsjInfo,
        .theme-multiva .MsjInfoSin {
            background-color: var(--color-info) !important;
            color: #0b5394;
        }

        .theme-multiva .MsjExito,
        .theme-multiva .MsjExitoSin {
            background-color: var(--color-success) !important;
            color: #2d6a4f;
        }

        .theme-multiva .MsjAlerta,
        .theme-multiva .MsjAlertaSin {
            background-color: var(--color-warning) !important;
            color: #7c5e10;
        }

        .theme-multiva .MsjError,
        .theme-multiva .MsjErrorSin,
        .theme-multiva .MsjAlertaRoja {
            background-color: var(--color-danger) !important;
            color: #7f1d1d;
        }

        /* Breadcrumbs / mapa de sitio */
        .theme-multiva .NodoMapaRaiz,
        .theme-multiva .NodoMapa,
        .theme-multiva .Separador {
            color: var(--color-primary);
        }

        .theme-multiva .NodoMapaActual {
            color: var(--color-primary-700);
        }

        /* Utilidades */
        .theme-multiva .text-muted {
            color: var(--color-text-muted) !important;
        }

        .theme-multiva .bordered {
            border: 1px solid var(--color-border);
        }

        .theme-multiva .surface {
            background: var(--color-surface);
        }

.PaginaGrid {
    background: color-mix(in srgb, var(--color-primary) 8%, white) text-align: center;
    color: var(--color-acero);
    font-size: large;
    /*background-color: #f1efe2;
   
    font-weight: normal;
    border-collapse: separate;*/
}

    .PaginaGrid a {
        color: var(--color-naranja);
        /*background-color: #f1efe2;
   
    font-weight: normal;
    border-collapse: separate;*/
    }

.VacioGrid {
    background: var(--color-surface);
    color: black
}
/* =========================
   BLOQUE LOGIN - MULTIVA
   ========================= */
.theme-multiva body {
    background: var(--color-bg) !important;
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--color-text);
}

.theme-multiva #LoginContainer {
    margin: 3rem auto;
    padding: 2rem 2.5rem;
    max-width: 460px;
    background: var(--color-blanco);
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    text-align: center;
}

/* Logo centrado */
.theme-multiva #DivLogoFidu {
    width: auto;
    margin: 1.5rem auto;
    text-align: center;
}

/* Contenedor del formulario */
.theme-multiva .container,
.theme-multiva .containerM,
.theme-multiva .containerL,
.theme-multiva .containerXL {
    background: var(--color-blanco);
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    padding: 1rem;
}

/* Header del formulario */
.theme-multiva .containerContent {
    border-top: 4px solid var(--color-naranja);
    background: var(--color-surface);
    padding: 1.25rem;
}

/* Inputs (usuario/contraseña) */
.theme-multiva .Pass,
.theme-multiva input[type="text"],
.theme-multiva input[type="password"] {
    width: 93%;
    padding: .1rem .1rem;
    border: 1px solid var(--color-border);
    border-radius: .35rem;
    font-size: .7rem;
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--color-text);
    background: #fff;
}

    .theme-multiva .Pass:focus,
    .theme-multiva input[type="text"]:focus,
    .theme-multiva input[type="password"]:focus {
        outline: 3px solid color-mix(in srgb, var(--color-primary) 25%, white);
        outline-offset: 2px;
    }

/* Labels */
.theme-multiva .Lab {
    display: block;
    margin: .5rem 0 .25rem;
    font-size: .95rem;
    color: var(--color-text-muted);
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.theme-multiva .LabS {
    font-size: .8rem;
    color: var(--color-text-muted);
}

/* Botones */
/*.theme-multiva .FormatoBotones {
    display: inline-block;
    width: 100%;
    margin-top: 1rem;
    padding: .65rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: .5rem;
    border: 1px solid var(--color-primary-700);
    background: var(--color-primary);
    color: var(--color-blanco);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .theme-multiva .FormatoBotones:hover {
        background: var(--color-primary-600);
    }

    .theme-multiva .FormatoBotones:disabled {
        opacity: .6;
        cursor: not-allowed;
    }*/

/* Links de ayuda / registro */
.theme-multiva .LinkUno {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

    .theme-multiva .LinkUno:hover {
        color: var(--color-accent-1);
        text-decoration: underline;
    }

/* Encabezado tabla de login (si existiera) */
.theme-multiva .EncabezadosGrid,
.theme-multiva .LabelTable {
    background: var(--color-gris);
    color: var(--color-blanco);
    font-weight: 600;
}

.theme-multiva .accordionHeaderMenu {
    /*background: var(--color-gris);
    color: var(--color-blanco)*/
    /* background: var(--color-blanco); */
    /* font-weight: 600; */
    font-size: 1rem !important;
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    /*font-size: 1rem;*/ /* tamaño intermedio */
    /* color: var(--color-acero); */ /* texto principal */
    background: var(--color-blanco);
    /* padding: 0.75rem 1rem; */
    border-bottom: 1.5px solid var(--color-accent-1); /* línea naranja */
    /* margin-bottom: 1.5rem; */
    text-align: left;
    /* border-radius: .35rem .35rem 0 0; */
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.theme-multiva .accordionContentMenu {
    font-size: medium;
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--color-blanco);
}

    .theme-multiva .accordionContentMenu a.LinkUno {
        font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
        font-weight: 400;
        /*color: var(--color-azul) !important;*/
        color: var(--color-naranja) !important;
    }

        .theme-multiva .accordionContentMenu a.LinkUno:hover {
            font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
            font-weight: 400;
            color: var(--color-acero) !important;
        }


/*color-mix(in srgb, var(--color-gris) 8%, white);*/
.theme-multiva li.menu {
    border-bottom: 1.5px solid var(--color-accent-1);
    box-shadow: 0px 0px 1px 1px var(--color-blanco);
    width: 100% !important;
}

.theme-multiva #DivMenu {
    padding: 0px 0px 0px 0px;
    float: left;
    width: 100%;
    text-align: center;
}

.theme-multiva menu {
}
/*************************/
/*HEADER*/
/*************************/

/* Encabezado */
.theme-multiva #EncabezadoPrincipal {
    background: var(--color-primary);
    color: var(--color-blanco);
    /*  padding: .5rem 1rem;*/
    /*display: flex;*/
    flex-direction: column;
    gap: .5rem;
}
/* Topbar */
.theme-multiva .topbar {
    background: var(--color-naranja);
    color: var(--color-blanco);
    /*padding: .5rem 1rem .35rem 1rem;*/ /* quitamos espacio inferior */
    padding: .5rem 1rem;
    /*  line-height: 1.4;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    border-bottom: 3px solid var(--color-gris); /* borde inferior anaranjado */
}

.theme-multiva .bienvenida {
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.theme-multiva .topbar-nav {
    display: flex;
    gap: 1rem;
}

    .theme-multiva .topbar-nav a {
        color: var(--color-blanco);
        text-decoration: none;
        font-weight: 500;
        transition: color .2s;
    }

        .theme-multiva .topbar-nav a:hover {
            color: var(--color-acero) !important; /* Naranja Multiva */
        }

    .theme-multiva .topbar-nav .logout {
        font-weight: 600;
    }

/* Logos */
.theme-multiva .logos {
    background: var(--color-blanco);
    padding: .5rem 1rem;
    display: flex;
    justify-content: space-between; /* uno a la izquierda y otro a la derecha */
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.theme-multiva .logo-fidu,
.theme-multiva .logo-solutrust {
    max-height: 50px;
    object-fit: contain;
}


/****************/
/*Footer*/
/* Footer principal */
.theme-multiva #DivPie {
    background: var(--color-primary); /* Azul Multiva */
    color: var(--color-blanco);
    padding: .75rem 1rem;
    font-size: .85rem;
    text-align: center;
    border-top: 4px solid var(--color-naranja); /* Línea superior naranja */
    width: 100%;
    margin-top: 0px
}

    /* Links dentro del footer */
    .theme-multiva #DivPie a,
    .theme-multiva #DivPie .LinkBlanco {
        color: var(--color-blanco);
        text-decoration: none;
        font-weight: 500;
        margin: 0 .25rem;
    }

        .theme-multiva #DivPie a:hover {
            color: var(--color-acero);
            text-decoration: underline;
        }

    /* Texto adicional */
    .theme-multiva #DivPie label,
    .theme-multiva #DivPie span {
        color: var(--color-blanco);
    }

/* Powered by (franja inferior) */
.theme-multiva #DivPowered {
    background: var(--color-blanco);
    padding: .5rem;
    text-align: center;
    border-top: 1px solid var(--color-border);
}

    .theme-multiva #DivPowered img {
        max-height: 30px;
        object-fit: contain;
    }
/**********/
/*Contenido*/
/* Contenedor general */
.theme-multiva #AppContainer {
    display: grid;
    grid-template-columns: 240px 1fr; /* 240px para el menú, el resto para el contenido */
    min-height: calc(100vh - 120px); /* ajusta restando header/footer */
    background: var(--color-bg);
}

/* Sidebar */
.theme-multiva #Sidebar {
    background: var(--color-blanco);
    border-right: 1px solid var(--color-border);
    padding: 1rem;
}

.theme-multiva .menu-lateral {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

    .theme-multiva .menu-lateral a {
        color: var(--color-acero);
        font-weight: 500;
        text-decoration: none;
        padding: .5rem .75rem;
        border-radius: .35rem;
        transition: background .2s, color .2s;
    }

        .theme-multiva .menu-lateral a:hover {
            background: var(--color-primary);
            color: var(--color-blanco);
        }

        .theme-multiva .menu-lateral a.active {
            border-left: 4px solid var(--color-naranja);
            background: color-mix(in srgb, var(--color-primary) 10%, white);
            color: var(--color-primary);
        }

/* Contenido */
.theme-multiva #MainContent {
    padding: 1.5rem;
    background: var(--color-surface);
}
/*******/
/*breadcrumbs*/
/* ===== Breadcrumbs en tabla (compat con ASPX) ===== */
.theme-multiva table.breadcrumbs {
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: .85rem;
    color: var(--color-text-muted);
    border-collapse: separate; /* permite spacing limpio */
    border-spacing: 0; /* sin huecos por defecto */
    margin: 0rem 0 1rem;
    background: transparent;
    height: auto !important; /* anula style="height:0px" */
    padding: .40rem .75rem;
}

    /* Una sola fila, items en línea */
    .theme-multiva table.breadcrumbs tr {
        display: table-row;
    }

    /* Celdas: espacio y separador "›" automático */
    .theme-multiva table.breadcrumbs td {
        position: relative;
        padding-right: .75rem;
        white-space: nowrap;
    }

        .theme-multiva table.breadcrumbs td:not(:last-child)::after {
            /*content: "\203A";*/ /* › */
            color: var(--color-text-muted);
            margin-left: .75rem;
        }


/* (Opcional) Barra suave bajo los breadcrumbs */
.theme-multiva .breadcrumbs-bar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}

/* Enlaces */
.theme-multiva table.breadcrumbs a {
    color: var(--color-accent-1) !important; /* Azul Multiva */
    text-decoration: none;
    font-weight: 600;
    float: none;
    background: transparent !important; /* elimina gradiente heredado */
}

    .theme-multiva table.breadcrumbs a:hover {
        color: var(--color-acero) !important; /* Naranja Multiva */
        text-decoration: underline;
    }

    /* Item actual */
    .theme-multiva table.breadcrumbs a.current,
    .theme-multiva table.breadcrumbs .aspNetDisabled {
        color: var(--color-acero) !important; /* Gris oscuro Multiva */
        font-weight: 600;
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        border-style: none
    }

/**********/
/*Tablas*/
/* =========================
   TABLAS (estructura legacy)
   ========================= */

/* Tabla contenedora */
.theme-multiva table.Tabla {
    /*width: 95% !important;*/ /* respeta tu HTML */
    /*background: var(--color-surface);*/ /* Gris claro Multiva */
    border: 1px solid var(--color-border) !important;
    border-radius: .5rem;
    border-collapse: separate; /* para permitir border-radius */
    border-spacing: 0;
    overflow: hidden; /* redondeo limpio */
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    /*margin: .5rem auto;*/
}

    /* Celda genérica */
    .theme-multiva table.Tabla td {
        padding: .3rem .3rem;
        border-top: 1px solid var(--color-border);
        color: var(--color-text);
        font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
        background: var(--color-blanco);
    }


/* Primera fila: encabezado visual (tu td.EncabezadosGrid) */
.theme-multiva table.Tabla .EncabezadosGrid {
    border-bottom: 2px solid var(--color-naranja) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
    color: var(--color-blanco) !important;
}

.theme-multiva table.Tabla .EncabezadosGrid A.LinkUno:link,
.theme-multiva table.Tabla .EncabezadosGrid A.LinkUno:visited {
    text-decoration: none;
    color: var(--color-blanco) !important;
}

.theme-multiva table.Tabla .EncabezadosGrid A.LinkUno:hover {
    text-decoration: underline;
    color: var(--color-naranja) !important;
}


/* Cuando está en el td */
.theme-multiva td.EncabezadosGrid {
    background: var(--color-gris) !important;
    color: var(--color-blanco, #333E48) !important;
    padding: .4rem .75rem !important;
}

/* Cuando está en el tr (afecta a todas sus celdas) */
.theme-multiva tr.EncabezadosGrid td,
.theme-multiva tr.EncabezadosGrid th {
    background: var(--color-gris) !important;
    color: var(--color-blanco, #333E48) !important;
    padding: .4rem .75rem !important;
    border-bottom: 2px solid var(--color-naranja) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
}

/* Título dentro del encabezado */
.theme-multiva #ctl00_Contenido_LblTitConsulta {
    /* font-size: 1.05rem;*/
    letter-spacing: .2px;
}

/* Zebra para filas de contenido (si las hay después del encabezado) */
.theme-multiva table.Tabla tr:nth-child(odd) td {
    font-size: 1rem;
    background: var(--color-surface);
}

.theme-multiva table.Tabla tr:nth-child(even) td {
    font-size: 1rem;
    background: var(--color-blanco);
}

/* Estados/acentos (opcional) */
.theme-multiva table.Tabla .is-primary {
    color: var(--color-primary);
}

.theme-multiva table.Tabla .is-accent {
    color: var(--color-naranja);
}

.theme-multiva table.Tabla .is-muted {
    color: var(--color-text-muted);
}

/* Inputs y selects dentro de la tabla */
.theme-multiva table.Tabla input,
.theme-multiva table.Tabla select,
.theme-multiva table.Tabla textarea {
    /*width: 100%;*/
    /*padding: .45rem .6rem;*/
    border: 1px solid var(--color-border);
    border-radius: .35rem;
    background: #fff;
    color: var(--color-text);
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

    .theme-multiva table.Tabla input:focus,
    .theme-multiva table.Tabla select:focus,
    .theme-multiva table.Tabla textarea:focus {
        outline: 3px solid color-mix(in srgb, var(--color-primary) 25%, white);
        outline-offset: 1px;
    }


/*********/
/*Botónes*/
/* =========================
   BOTONES MULTIVA
   ========================= */
.theme-multiva .FormatoBotones,
.theme-multiva .Tabla .FormatoBotones {
    min-height: 33px;
    background: var(--color-naranja);
    border-color: var(--color-accent-2);
    color: var(--color-blanco);
    border-radius: .5rem;
    /*  padding: .5rem 1rem;*/
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .05s;
    min-width: 190px;
    font-size: 1rem;
}

    /* Efecto click */
    .theme-multiva .FormatoBotones:active {
        transform: scale(.97);
    }

    /* --- Variantes de color --- */

    .theme-multiva .FormatoBotones:hover {
        background: #FF5C33;
    }

    /* Variante Naranja (acción destacada) */
    .theme-multiva .FormatoBotones.accent {
        background: var(--color-naranja) !important;
        border-color: #e64000;
        color: var(--color-blanco);
    }

        .theme-multiva .FormatoBotones.accent:hover {
            background: #ff5c33;
        }

    /* Variante Secundaria (gris neutro) */
    .theme-multiva .FormatoBotones.secondary {
        background: var(--color-gris);
        border-color: var(--color-border);
        color: var(--color-blanco);
    }

        .theme-multiva .FormatoBotones.secondary:hover {
            background: var(--color-acero);
        }

    /* Botón bloque (100% ancho) */
    .theme-multiva .FormatoBotones.block {
        display: block;
        width: 100%;
    }
/*******************/
/* Mensajes */
.theme-multiva .notification-box {
    font-size: medium;
    padding: 5px;
}
/****************/
/*Footer*/
.theme-multiva select {
    font-size: 1rem;
}

.theme-multiva input[type="text"] {
    font-size: 1rem;
}

.theme-multiva .EncabezadosGrid A.LinkUno {
    color: var(--color-blanco) !important;
    font-size: large;
}

    .theme-multiva .EncabezadosGrid A.LinkUno:hover {
        color: var(--color-naranja) !important;
    }

.theme-multiva label {
    font-size: medium;
    color: var(--color-text);
}

.theme-multiva .Errores {
    font-size: large;
    padding: 5px;
}

.theme-multiva .validation-summary-errors {
    font-size: large;
    padding: 5px;
}

.CatCtaMayor {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000 !important;
    background-color: #ffcc66 !important;
}

.CatCtaAuxiliar {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: black !important;
    background-color: #ccccff !important;
}



.MsjErrorTablas {
    border-color: #D8000C !important;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: black !important;
    background-color: #ffbaba !important;
}

.MsjExitoTablas {
    border-color: #D8000C !important;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: black !important;
    background-color: #CCFFCC !important;
}
/* =========================
   PAGINA DE ERROR
   ========================= */
.theme-multiva .ErrorPage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--color-surface);
    padding: 1rem;
}

.theme-multiva .ErrorCard {
    background: var(--color-blanco);
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 2rem 2.5rem;
    max-width: 500px;
    text-align: center;
}

.theme-multiva .ErrorCode {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.theme-multiva .ErrorTitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-acero);
    margin: .5rem 0 1rem;
}

.theme-multiva .ErrorMessage {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.theme-multiva .ErrorActions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.LabelBalanza {
    font-size: medium !important;
}

/* =========================
   SECCION DE BIENVENIDA
   ========================= */
.theme-multiva #Bienvenida {
    background: var(--color-surface);
    /*padding: 1rem 1rem;*/
    display: flex;
    justify-content: center;
}

.theme-multiva .BienvenidaCard {
    background: var(--color-blanco);
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    padding: 2rem;
    /*max-width: 700px;*/
    /* text-align: left !important;*/
}

.theme-multiva .BienvenidaTitulo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.theme-multiva .BienvenidaMensaje {
    font-size: 1rem;
    color: var(--color-text);
    /* margin-bottom: 1.5rem;*/
    line-height: 1.6;
}

.theme-multiva .BienvenidaAcciones {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}


.theme-multiva A.LinkUno:link,
.theme-multiva A.LinkUno:visited {
    text-decoration: none;
    color: var(--color-accent-1) !important;
}

.theme-multiva A.LinkUno:hover {
    text-decoration: none;
    color: var(--color-acero) !important;
}
/*
.theme-multiva li.submenu {
    text-decoration: none;
    color: var(--color-acero) !important;
}


*/
/********************************/
/** Sección Documentos *********/
.theme-multiva .DocumentosContainer {
    border: 1px solid var(--color-border) !important;
    border-radius: .5rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
/* Encabezado */
.theme-multiva .DocumentosHeader {
    /* flex-direction: column;*/
    gap: .5rem;
    background: var(--color-gris) !important;
    color: var(--color-blanco) !important;
    text-align: center;
    font-size: 1rem;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    border-bottom: 2px solid #FF4813;
}

.theme-multiva .DocumentosBody {
    display: flex;
    justify-content: space-around;
}

.theme-multiva .DocumentosFolders {
    width: 30%;
    padding: .5rem;
    border: 1px solid var(--color-border) !important;
}

.theme-multiva .DocumentosFiles {
    width: 70%;
    padding: .5rem;
    border: 1px solid var(--color-border) !important;
}
/* Topbar */
/*.theme-multiva .topbar {
    background: var(--color-naranja);
    color: var(--color-blanco);*/
/*padding: .5rem 1rem .35rem 1rem;*/ /* quitamos espacio inferior */
/*padding: .5rem 1rem;*/
/*  line-height: 1.4;*/
/*display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    border-bottom: 3px solid var(--color-gris);*/ /* borde inferior anaranjado */
/*}*/

/********************************/
/** TABS *********/
/* =========================================
   jQuery UI Tabs — Tema Multiva
   (requiere que un contenedor padre tenga .theme-multiva)
   ========================================= */
.theme-multiva .ui-tabs {
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--color-text);
}

    /* Barra de pestañas */
    .theme-multiva .ui-tabs .ui-tabs-nav {
        margin: 0;
        padding: 0 .5rem;
        border: 0;
        border-bottom: 3px solid var(--color-border);
        background: var(--color-blanco);
    }

        /* Cada pestaña */
        .theme-multiva .ui-tabs .ui-tabs-nav li {
            list-style: none;
            margin: 0 .25rem 0 0;
            border: 1px solid transparent;
            border-radius: .5rem .5rem 0 0;
            background: var(--color-surface);
        }

            /* Link de la pestaña */
            .theme-multiva .ui-tabs .ui-tabs-nav li a {
                display: inline-block;
                padding: .55rem .9rem;
                color: var(--color-acero);
                text-decoration: none;
                font-weight: 500;
            }

            /* Hover */
            .theme-multiva .ui-tabs .ui-tabs-nav li:hover {
                background: #e6eaed; /* un poco más oscuro que surface */
            }

                .theme-multiva .ui-tabs .ui-tabs-nav li:hover a {
                    color: var(--color-naranja);
                }

            /* Pestaña activa */
            .theme-multiva .ui-tabs .ui-tabs-nav li.ui-tabs-active,
            .theme-multiva .ui-tabs .ui-tabs-nav li.ui-state-active {
                background: var(--color-blanco);
                border-color: var(--color-border);
                border-bottom-color: var(--color-blanco); /* “fundida” con el panel */
                position: relative;
            }

                .theme-multiva .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
                .theme-multiva .ui-tabs .ui-tabs-nav li.ui-state-active a {
                    color: var(--color-naranja);
                }

                /* Línea de acento naranja bajo la pestaña activa */
                .theme-multiva .ui-tabs .ui-tabs-nav li.ui-tabs-active::after,
                .theme-multiva .ui-tabs .ui-tabs-nav li.ui-state-active::after {
                    content: "";
                    position: absolute;
                    left: 8px;
                    right: 8px;
                    bottom: -3px;
                    height: 3px;
                    background: var(--color-naranja);
                    border-radius: 2px;
                }

            /* Pestañas deshabilitadas */
            .theme-multiva .ui-tabs .ui-tabs-nav li.ui-state-disabled,
            .theme-multiva .ui-tabs .ui-tabs-nav li.ui-tabs-disabled {
                opacity: .5;
                pointer-events: none;
            }

    /* Panel de contenido */
    .theme-multiva .ui-tabs .ui-tabs-panel {
        background: var(--color-blanco);
        border: 1px solid var(--color-border);
        border-radius: 0 .5rem .5rem .5rem; /* redondeo, excepto arriba-izq */
        padding: 1rem;
        box-shadow: 0 2px 6px rgba(0,0,0,.04);
    }

    /* Enfoque accesible al navegar con teclado */
    .theme-multiva .ui-tabs .ui-tabs-nav li a:focus {
        outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, white);
        outline-offset: 2px;
        border-radius: .4rem;
    }

/* =========================================
   jQuery UI Datepicker — Tema Multiva
   ========================================= */
.theme-multiva .ui-datepicker {
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--color-blanco);
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    padding: .5rem;
    color: var(--color-text);
    z-index: 1000 !important; /* aseguramos visibilidad sobre modales */
}

    /* Header (mes/año + controles) */
    .theme-multiva .ui-datepicker .ui-datepicker-header {
        background: var(--color-gris);
        color: var(--color-blanco);
        border: none;
        border-radius: .35rem .35rem 0 0;
        padding: .5rem;
    }

    .theme-multiva .ui-datepicker .ui-datepicker-title {
        font-weight: 600;
        font-size: 1rem;
    }

    /* Flechas de navegación */
    .theme-multiva .ui-datepicker .ui-datepicker-prev,
    .theme-multiva .ui-datepicker .ui-datepicker-next {
        cursor: pointer;
        top: .5rem;
    }

        .theme-multiva .ui-datepicker .ui-datepicker-prev span,
        .theme-multiva .ui-datepicker .ui-datepicker-next span {
            filter: invert(100%); /* iconos en blanco */
        }

    /* Tabla de días */
    .theme-multiva .ui-datepicker table {
        width: 100%;
        border-collapse: collapse;
        margin: .25rem 0;
    }

    .theme-multiva .ui-datepicker th {
        text-align: center;
        padding: .35rem;
        color: var(--color-text-muted);
        font-weight: 500;
        font-size: .85rem;
    }

    .theme-multiva .ui-datepicker td {
        text-align: center;
        padding: .25rem;
    }

        /* Links de días */
        .theme-multiva .ui-datepicker td a,
        .theme-multiva .ui-datepicker td span {
            display: inline-block;
            /*            width: 2rem;
            line-height: 2rem;*/
            border-radius: .35rem;
            text-decoration: none;
            color: var(--color-text);
            transition: background .15s, color .15s;
        }

            /* Hover */
            .theme-multiva .ui-datepicker td a:hover {
                background: var(--color-gris);
                color: var(--color-blanco);
            }

        /* Día seleccionado */
        .theme-multiva .ui-datepicker td .ui-state-active {
            background: var(--color-naranja);
            color: var(--color-blanco);
            font-weight: 600;
        }

        /* Día actual */
        .theme-multiva .ui-datepicker td .ui-state-highlight {
            background: color-mix(in srgb, var(--color-primary) 15%, white);
            border: 1px solid var(--color-primary);
            color: var(--color-primary);
            font-weight: 600;
        }

/* Meses múltiples (si usas datepicker con showOtherMonths) */
.theme-multiva .ui-datepicker-multi .ui-datepicker-group {
    margin: .25rem;
}
/*******/


/* ========== WIDE GRID ========== */
/* Contenedor raíz: no crece más que su propio bloque y no afecta ancestros */
.wide-grid {
    max-width: 100%;
    box-sizing: border-box;
    /* font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;*/
    color: #333E48; /* acero */
    isolation: isolate; /* aísla efectos internos */
    contain: layout paint; /* encapsula layout/pintado */
}

/* Encabezado de la sección */
.wide-grid__header {
    background: #FFFFFF;
    border: 1px solid #D0D7DE; /* gris borde */
    border-bottom: 3px solid #FF4813; /* naranja */
    border-radius: .5rem .5rem 0 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    padding: .3rem 1rem;
}

.wide-grid__title {
    font-weight: 600;
    font-size: 1rem;
}

/* Marco scrolleable (el ÚNICO que hace scroll) */
.wide-grid__scroll {
    width: 100%;
    max-width: 100%;
    height: 450px; /* ajusta según tu necesidad */
    overflow-x: auto; /* ← scroll horizontal aquí */
    overflow-y: auto;
    border: 1px solid #D0D7DE;
    border-top: none;
    border-radius: 0 0 .5rem .5rem;
    background: #FFFFFF;
    box-sizing: border-box;
    /* Aísla el ancho interno para que la tabla gigante NO empuje el layout */
    contain: inline-size;
}

/* Envoltura interna que mide según el contenido ancho (tabla) */
.wide-grid__inner {
    width: max-content;
}

@supports not (width: max-content) {
    .wide-grid__inner {
        display: inline-block;
        width: auto;
    }
    /* fallback */
}

/* Tabla muy ancha (no estira al contenedor, solo al inner) */
.wide-grid__table {
    width: max-content; /* mide por contenido */
    min-width: 100%; /* si fuera chica, ocuparía todo el ancho */
    border-collapse: collapse;
    /* white-space: nowrap; no cortar celdas largas; que aparezca scroll-x */
    table-layout: auto; /* puedes cambiar a fixed si defines anchos */
}

/* Encabezado de columnas (gris/acero) */
.wide-grid__headrow > th {
    position: sticky;
    top: 0;
    z-index: 1; /* header pegajoso dentro del scroll */
    background: #F4F6F8; /* gris superficie */
    color: #333E48; /* acero */
    font-weight: 600;
    padding: 6px 8px; /* compacto */
    border-bottom: 1px solid #D0D7DE;
    border-right: 1px solid #E5E7EB;
}

/* Celdas */
.wide-grid__table td {
    padding: 6px 8px; /* compacto para reducir empuje */
    border-bottom: 1px solid #E5E7EB;
    border-right: 1px solid #F0F2F4;
    font-size: .9rem;
    max-width: 260px; /* limita columnas verbosas */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rayado alterno */
/* Zebra default */
.wide-grid__table tbody tr:nth-child(odd) {
  background: #FAFBFC;
}
.wide-grid__table tbody tr:nth-child(even) {
  background: #FFFFFF;
}

/* Fila especial CatCtaMayor */
.theme-multiva .wide-grid__table tbody tr.CatCtaMayor,
.theme-multiva tbody tr.CatCtaMayor {
    background-color: #ffcc66 !important; /* sobreescribe el zebra */
    font-size: 12px;
    font-weight: bold;
    color: #000000 !important;
}


/* Accesibilidad: texto solo para lectores de pantalla */
.wide-grid__sr {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/**************/
/*Estilos tablas div 1*/
/* Contenedor tipo fila de totales */
.theme-multiva .fila-balanza {
    display: flex; /* en lugar de floats */
    align-items: center;
    justify-content: flex-start;
    height: 22px;
    border-top: 1px solid var(--color-border);
    border-bottom: 2px solid var(--color-naranja); /* acento Multiva */
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: .9rem;
    background: var(--color-surface);
}

    /* Columna de título (Total) */
    .theme-multiva .fila-balanza .LabelBalanza {
        flex: 0 0 390px; /* ancho fijo */
        text-align: right;
        font-weight: 600;
        color: var(--color-acero);
        padding-right: .5rem;
    }

    /* Celdas numéricas */
    .theme-multiva .fila-balanza .TextboxBalanza {
        flex: 0 0 112px; /* ancho fijo */
        text-align: right;
        color: var(--color-text);
        padding: 0 .25rem;
        background: #fff; /* contraste sobre gris */
        border-left: 1px solid var(--color-border);
    }

        .theme-multiva .fila-balanza .TextboxBalanza:last-child {
            border-right: 1px solid var(--color-border);
        }

/* =========================
   TABLA FAKE (divs) – Estilo Multiva
   ========================= */

/* Tarjeta contenedora */
.theme-multiva .table-container {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--color-border, #D0D7DE);
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    overflow: hidden; /* redondeo limpio */
    font-family: "Multiva Sans", Corbel, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--color-acero, #333E48);
    isolation: isolate; /* encapsula efectos internos */
}

    /* ===== Encabezados ===== */

    /* Fila de título (la primera .table-header de tu HTML) */
    .theme-multiva .table-container .table-header:first-child .header-cell {
        background: var(--color-gris);
        color: var(--color-blanco, #333E48);
        font-weight: 600;
        font-size: 1rem;
        padding: .4rem .75rem;
        border-bottom: 3px solid var(--color-naranja, #FF4813); /* acento */
    }

    /* Fila de cabecera de columnas (la segunda .table-header) */
    .theme-multiva .table-container .table-header:nth-child(2) {
        background: #F4F6F8; /* gris superficie */
        border-bottom: 1px solid var(--color-border, #D0D7DE);
    }

        .theme-multiva .table-container .table-header:nth-child(2) .header-cell {
            color: var(--color-acero, #333E48);
            font-weight: 600;
            font-size: .9rem;
            padding: 6px 8px; /* compacto */
            border-right: 1px solid #E5E7EB;
        }

            .theme-multiva .table-container .table-header:nth-child(2) .header-cell:last-child {
                border-right: none;
            }

    /* Alineaciones utilitarias que ya usas */
    /*.theme-multiva .table-container .header-cell,
    .theme-multiva .table-container .body-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }*/

    .theme-multiva .table-container .left {
        justify-content: flex-start;
        text-align: left;
    }

    .theme-multiva .table-container .right {
        justify-content: flex-end;
        text-align: right;
    }

    .theme-multiva .table-container .center {
        justify-content: center;
        text-align: center;
    }

    /* ===== Cuerpo con scroll ===== */
    .theme-multiva .table-container .table-body.scroll {
        max-height: 450px; /* ajusta según necesidad */
        overflow-y: auto;
        overflow-x: auto; /* por si alguna columna se pasa */
        border-top: 1px solid var(--color-border, #D0D7DE);
        background: #fff;
    }

    /* Filas */
    .theme-multiva .table-container .table-row {
        display: flex;
        border-bottom: 1px solid #E5E7EB;
    }

        .theme-multiva .table-container .table-row:nth-child(odd) {
            background: #FAFBFC;
        }

        .theme-multiva .table-container .table-row:nth-child(even) {
            background: #FFFFFF;
        }
    /* Celdas del cuerpo */
    .theme-multiva .table-container .body-cell {
        padding: 6px 8px; /* compacto para no “empujar” */
        font-size: .9rem;
        color: var(--color-acero, #333E48);
        border-right: 1px solid #F0F2F4;
        min-height: 28px;
    }

        .theme-multiva .table-container .body-cell:last-child {
            border-right: none;
        }

    /* Estados (sin azul) */
    .theme-multiva .table-container .is-accent {
        color: var(--color-naranja, #FF4813);
    }

    .theme-multiva .table-container .is-steel {
        color: var(--color-acero, #333E48);
    }

    .theme-multiva .table-container .is-muted {
        color: var(--color-text-muted, #6B7280);
    }

    .theme-multiva .table-container .is-error {
        color: #D8000C;
    }

    /* Links internos (ej. Ver Detalle) */
    .theme-multiva .table-container a {
        color: var(--color-acero, #333E48);
        text-decoration: none;
        font-weight: 600;
    }

        .theme-multiva .table-container a:hover {
            color: var(--color-naranja, #FF4813);
            text-decoration: underline;
        }

    /* Variante de etiqueta/valor si las usas */
    .theme-multiva .table-container .body-cell-label {
      /*  background: #F4F6F8;*/
        color: var(--color-acero, #333E48);
        border-bottom: 1px solid #E5E7EB;
        padding: 6px 8px;
        font-weight:600;
    }

    .theme-multiva .table-container .body-cell-text {
        background: #FFFFFF;
        color: var(--color-acero, #333E48);
        border-bottom: 1px solid #E5E7EB;
        padding: 6px 8px;
    }

    /* Evita que títulos largos rompan el layout */
    .theme-multiva .table-container .body-cell,
    .theme-multiva .table-container .header-cell {
        overflow: hidden;
        text-overflow: ellipsis;
        /*white-space: nowrap;*/ /* tu HTML ya define widths en inline styles */
    }

/*
.TablaInstrucciones {
    font-size: 11px !important;
    font-family: 'Arial Narrow' !important;
}*/
/**************/
/****Árbol Saldos **********/
/**************/
.TrvSaldos_NodeStyle {
    width: 100% !important;
}

    .TrvSaldos_NodeStyle .table-container:hover {
        background: #f0f0f0 !important; /* gris claro al pasar el mouse */
        cursor: pointer; /* cambia el cursor */
        border: 2px solid var(--color-naranja);
    }

/********* */
/* Tabla Scroll*/
/* Contenedor principal: no dejar que nada se salga */
.table-container {
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: .5rem;
    background: #fff;
    overflow: hidden; /* redondeo y no fugas visuales */
    box-sizing: border-box;
}

/*  Área scrolleable: AQUI vive el scroll H y V */
.table-body.scroll {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 450px; /* ajusta a tu gusto */
    overflow-x: auto; /* ← scroll horizontal */
    overflow-y: auto; /* ← scroll vertical */
    box-sizing: border-box;
    contain: inline-size; /* aísla el ancho interno: evita empujar layout */
}

/* Título (primer .table-header) */
.table-title .header-cell {
    font-weight: 600;
    font-size: 1rem;
    padding: .6rem .75rem;
    border-bottom: 3px solid #FF4813; /* acento naranja Multiva */
    background: #fff;
    color: #333E48; /* acero */
}

/* Encabezados de columnas (dentro del scroll) */
.table-columns {
    position: sticky; /* fijo dentro del scroll */
    top: 0;
    z-index: 2;
    display: flex;
    background: #F4F6F8; /* gris superficie */
    border-bottom: 1px solid #d0d7de;
}

    .table-columns .header-cell {
        font-weight: 600;
        font-size: .9rem;
        color: #333E48;
        padding: 6px 8px;
        border-right: 1px solid #E5E7EB;
    }

        .table-columns .header-cell:last-child {
            border-right: none;
        }

/* Filas y celdas */
.table-row {
    display: flex;
    border-bottom: 1px solid #eee;
    /* Evita que wrapee por espacios y “empuje” ancho inesperado */
    /*   white-space: nowrap;*/
    width: 100%;
    
}
.table-row-scroll {
    width: max-content; /* mide según las celdas (permite scroll-x) */
}
.body-cell, .header-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px; /* compacto para no empujar demasiado */
    box-sizing: border-box;
    flex: 0 0 auto; /* respeta los widths inline: NO crecer/encoger */
    overflow: hidden;
    text-overflow: ellipsis; /* colas si el texto es largo */
}

    /* Alineaciones utilitarias */
    .header-cell.left, .body-cell.left {
        justify-content: flex-start;
        text-align: left;
    }

    .header-cell.right, .body-cell.right {
        justify-content: flex-end;
        text-align: right;
    }

    .header-cell.center, .body-cell.center {
        justify-content: center;
        text-align: center;
    }

/* Zebra del cuerpo (no afecta al header sticky) */
.table-body .table-row:nth-child(odd) {
    background: #FAFBFC;
    color: #333;
}

.table-body .table-row:nth-child(even) {
    background: #FFFFFF;
    color: #284775;
}

/* Estados / links */
.table-body a {
    color: #333E48;
    font-weight: 600;
    text-decoration: none;
}

    .table-body a:hover {
        color: #FF4813;
        text-decoration: underline;
    }

/* Fila especial (si la usas) */
.table-body .table-row.CatCtaMayor {
    background: #ffcc66 !important;
    color: #000 !important;
    font-weight: bold;
}

/* (Opcional) si alguna clase tuya hace inline-block o nowrap global, neutraliza aquí */
.table-body.scroll .table-row,
.table-body.scroll .header-cell,
.table-body.scroll .body-cell {
    /* aseguras que solo se respeten los widths que tú pones */
    /* white-space ya está en .table-row */
}
/***************/
/** pop ****/


.dimPop > div:first-child {
    border-spacing: 0;
    border-radius: .5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/***********/
/***Validadores error*/
.input-validation-error {
    border: 1px solid #CCCCCC !important;
    background-color: #ffeeee !important;
}