@import '_content/BlazorStrap.V5/BlazorStrap.V5.soy3cwhzex.bundle.scp.css';
@import '_content/BlazorStrap/BlazorStrap.10v83wk5fb.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
/*
    Pantalla de ingreso de GTECH ERP, con la linea grafica de la Suite GTECH: fondo teal oscuro,
    tarjeta blanca con el formulario a la izquierda y la imagen de la suite a la derecha, con el
    lema sobre un degradado en vez de una caja negra. En celular la imagen se oculta y queda
    solo el formulario.

    Las pantallas del segundo factor usan las mismas reglas desde wwwroot/css/acceso.css, bajo
    la clase .acceso; si se cambia algo aqui, hay que cambiarlo alla.
*/

.page-container[b-jh3597d7pd] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(15, 163, 148, 0.55) 0%, rgba(15, 163, 148, 0) 45%),
        linear-gradient(135deg, #00756C 0%, #0A4A45 55%, #062E2B 100%);
}

.login-container[b-jh3597d7pd] {
    display: flex;
    width: 100%;
    max-width: 920px;
    min-height: 540px;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.login-box[b-jh3597d7pd] {
    flex: 0 0 46%;
    max-width: none;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: #FFFFFF;
    border-radius: 0;
    box-shadow: none;
}

.logo[b-jh3597d7pd] {
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 0 4px;
}

.login-box hr[b-jh3597d7pd] {
    border: 0;
    border-top: 1px solid #E3ECEA;
    opacity: 1;
    margin: 20px 0 28px;
}

.form-floating[b-jh3597d7pd] {
    margin-bottom: 16px;
}

.form-floating > .form-control[b-jh3597d7pd] {
    height: 58px;
    border: 1px solid #D5DDDB;
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 15px;
}

.form-floating > .form-control:focus[b-jh3597d7pd] {
    border-color: #00A99D;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.18);
}

.form-label[b-jh3597d7pd] {
    font-size: 14px;
    color: #6B7072;
}

.checkbox label[b-jh3597d7pd] {
    font-size: 14px;
    color: #4A4D50;
}

.form-check-input:checked[b-jh3597d7pd] {
    background-color: #00A99D;
    border-color: #00A99D;
}

.btn-primary[b-jh3597d7pd] {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: none;
    border-radius: 10px;
    background-color: #00A99D;
    border-color: #00A99D;
}

.btn-primary:hover[b-jh3597d7pd],
.btn-primary:focus[b-jh3597d7pd],
.btn-primary:active[b-jh3597d7pd] {
    background-color: #00857C;
    border-color: #00857C;
}

.message-box[b-jh3597d7pd] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    background-image: url('images/bg-login.jpg');
    background-size: cover;
    background-position: center;
}

.message-content[b-jh3597d7pd] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 72px 40px 40px;
    border-radius: 0;
    text-align: left;
    background: linear-gradient(to top, rgba(4, 40, 37, 0.88) 0%, rgba(4, 40, 37, 0) 100%);
}

.message-box p[b-jh3597d7pd] {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .message-box[b-jh3597d7pd] {
        display: none;
    }

    .login-box[b-jh3597d7pd] {
        flex: 1;
        padding: 40px 28px;
    }
}

/* El rotulo flotante de Bootstrap pinta una franja blanca detras del texto; sobre el campo
   claro se veia como un parche. Y el autocompletado de Chrome lo pintaba de lila. */
.form-floating > .form-control[b-jh3597d7pd] {
    background-color: #FFFFFF;
}

.form-floating > label[b-jh3597d7pd]::after {
    background-color: transparent !important;
}

.form-floating > .form-control:-webkit-autofill[b-jh3597d7pd] {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    -webkit-text-fill-color: #2F3133;
}

.position-relative[b-jh3597d7pd] {
    position: relative;
}

.toggle-password[b-jh3597d7pd] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #6c757d;
    font-size: 18px;
    outline: none !important; /* Fuerza la eliminación del contorno */
    border: none;
}

    .toggle-password:hover[b-jh3597d7pd] {
        color: #495057;
        outline: none !important; /* Asegúrate de sobrescribir cualquier regla */
        box-shadow: none !important; /* Si aparece una sombra, también elimínala */
    }

    /*  EL FOCO DEL TECLADO VUELVE. Aqui habia `outline: none !important` tambien en
        `:focus-visible`, que es precisamente el selector que el navegador usa cuando se llega con
        el TABULADOR. Resultado: quien navega con teclado llegaba al ojo de la contrasena y no veia
        donde estaba. El arreglo de un contorno feo es pintarlo bien, no quitarlo.

        `:focus` sigue sin contorno a proposito: ese salta tambien al hacer clic con el raton, y
        ahi el contorno sobra porque ya sabes donde pinchaste. */
    .toggle-password:focus[b-jh3597d7pd] {
        outline: none;
        box-shadow: none;
    }

    .toggle-password:focus-visible[b-jh3597d7pd] {
        outline: 2px solid var(--gt-acento, #00857C);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* =============================================================================================
   EL MODO OSCURO DEL INGRESO

   SE VIO EN PRODUCCION, no en una revision: con el sistema en oscuro, la tarjeta del ingreso
   seguia BLANCA mientras sus campos salian negros. Blanco con agujeros negros dentro.

   POR QUE pasaba justo asi, que es lo que hay que entender para que no se repita: este archivo
   tiene los colores escritos a pelo -#FFFFFF, #E3ECEA, #D5DDDB- y cero `prefers-color-scheme`.
   Los CAMPOS si se oscurecian porque `gtech-tokens.css` carga despues y pisa `.form-control` de
   Bootstrap; la TARJETA no, porque `.login-container` es una clase de esta pantalla y ningun
   token la alcanza. O sea: el modo oscuro de la suite llegaba a media pantalla.

   SE ANADE COMO CAPA, NO SE REESCRIBE LO DE ARRIBA. El modo claro es la cara de la marca y no
   estaba roto; aqui solo se repintan las superficies cuando el sistema pide oscuro.

   Los `var(--gt-*)` funcionan aunque `gtech-tokens.css` se enlace DESPUES de este archivo: una
   propiedad personalizada se resuelve al calcular el valor, no al leer la hoja. Van con respaldo
   igualmente, por si algun dia esta pantalla se sirve sin los tokens.

   OJO: lo mismo esta en wwwroot/css/acceso.css para las pantallas del segundo factor, colgado de
   `.acceso`. Si se cambia aqui, se cambia alla. Lo dice la cabecera y sigue siendo verdad.
   ============================================================================================= */

@media (prefers-color-scheme: dark) {

    .login-container[b-jh3597d7pd],
    .login-box[b-jh3597d7pd] {
        background: var(--gt-superficie, #1d1f22);
    }

    .login-box hr[b-jh3597d7pd] {
        border-top-color: var(--gt-borde, #34383c);
    }

    .form-floating > .form-control[b-jh3597d7pd] {
        border-color: var(--gt-borde, #34383c);
        background-color: var(--gt-fondo, #16181a);
        color: var(--gt-texto, #eceded);
    }

    .form-floating > .form-control:focus[b-jh3597d7pd] {
        background-color: var(--gt-fondo, #16181a);
    }

    /*  El rotulo flotante de Bootstrap se queda en el gris oscuro que trae de serie y sobre un
        campo negro no se lee. Es el texto que dice «Usuario» y «Contrasena». */
    .form-floating > label[b-jh3597d7pd],
    .form-label[b-jh3597d7pd] {
        color: var(--gt-texto-suave, #a8adb2);
    }

    .checkbox label[b-jh3597d7pd] {
        color: var(--gt-texto, #eceded);
    }

    /*  El autocompletado de Chrome pinta su propio fondo con una sombra interior de 1000 px, que
        es la unica forma de taparlo. En claro era blanco; en oscuro, blanco era un fogonazo. */
    .form-floating > .form-control:-webkit-autofill[b-jh3597d7pd] {
        -webkit-box-shadow: 0 0 0 1000px var(--gt-fondo, #16181a) inset;
        -webkit-text-fill-color: var(--gt-texto, #eceded);
    }

    .toggle-password[b-jh3597d7pd] {
        color: var(--gt-texto-suave, #a8adb2);
    }

        .toggle-password:hover[b-jh3597d7pd] {
            color: var(--gt-texto, #eceded);
        }
}
/* /Components/Helpers/LanguageDropdown.razor.rz.scp.css */
.idioma-selector .bandera[b-2d2qmzh60r] {
    width: 22px;
    height: 15px;
    vertical-align: -2px;
}

.idioma-selector .dropdown-toggle[b-2d2qmzh60r]::after {
    display: none; /* la bandera ya dice de que se trata */
}

.idioma-selector .dropdown-menu[b-2d2qmzh60r] {
    min-width: 10rem;
}
/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
.page[b-69wk5ou4zm] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-69wk5ou4zm] {
    flex: 1;
}

.sidebar[b-69wk5ou4zm] {
    background: var(--gt-menu-fondo);
    transition: width 0.3s ease;
}

    .sidebar.collapsed[b-69wk5ou4zm] {
        width: 33px; /* Ancho colapsado */
        z-index: 2500;
    }

    .sidebar img[b-69wk5ou4zm] {
        transition: all 0.3s ease;
        display: block;
        margin: 0 auto;
    }

    .sidebar.collapsed img[b-69wk5ou4zm] {
        width: 25px; /* Ajusta segun el tamano deseado */
        height: auto;
    }


    .sidebar.collapsed .submenu[b-69wk5ou4zm] {
        position: absolute;
        left: 100%; /* Colocamas el submenu fuera del menú colapsado */
        top: 0;
        min-width: 200px; /* Ancho minimo del submenu */
        display: none;
        z-index: 1000;
    }

        .sidebar.collapsed .submenu-item:hover + .submenu[b-69wk5ou4zm],
        .sidebar.collapsed .submenu:hover[b-69wk5ou4zm] {
            display: block; /* mastrar el submenu cuando se pasa el cursor */
        }

.submenu[b-69wk5ou4zm] {
    display: none; /* Oculto por defecto */
    position: absolute;
    background-color: #ffffff; /* Fondo blanco */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    border: 1px solid #ddd; /* Bordes */
    z-index: 1000; /* En primer plano */
    min-width: 200px; /* Ancho minimo */
    padding: 10px 0; /* Espaciado interno */
}

    .submenu li[b-69wk5ou4zm] {
        padding: 5px 15px; /* Espaciado en los elementos */
        cursor: pointer;
    }

        .submenu li:hover[b-69wk5ou4zm] {
            background-color: #f0f0f0; /* Fondo al pasar el raton */
        }

.submenu-item[b-69wk5ou4zm] {
    padding: 10px 15px;
    display: block;
    color: #333;
    text-decoration: none;
}

    .submenu-item:hover[b-69wk5ou4zm] {
        background-color: #f5f5f5;
    }

.menu-toggle[b-69wk5ou4zm] {
    cursor: pointer;
    padding: 10px;
    font-size: 1.5rem;
    background: none;
    border: none;
}

.top-row[b-69wk5ou4zm] {
    background-color: var(--gt-fondo);
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.4rem;
    display: flex;
    align-items: center;
}

    .top-row[b-69wk5ou4zm]  a, .top-row[b-69wk5ou4zm]  .btn-link {
        white-space: nowrap;        
        text-decoration: none;
    }

        .top-row[b-69wk5ou4zm]  a:hover, .top-row[b-69wk5ou4zm]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-69wk5ou4zm]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row[b-69wk5ou4zm] {
        justify-content: space-between;
    }

        .top-row[b-69wk5ou4zm]  a, .top-row[b-69wk5ou4zm]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .page[b-69wk5ou4zm] {
        flex-direction: row;
    }

    .sidebar[b-69wk5ou4zm] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-69wk5ou4zm] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-69wk5ou4zm]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-69wk5ou4zm], article[b-69wk5ou4zm] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-69wk5ou4zm] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismass[b-69wk5ou4zm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/* Botones de texto minimalistas */
.minimal-button[b-69wk5ou4zm] {
    background: none;
    border: none;
    color: var(--gt-acento); /* el acento, no el papel del menu */
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    padding: 8px 12px;
    transition: color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    outline: none;
}

    /*  ERA #0056b3: EL AZUL DE CONTAWEB, superviviente de la limpieza del 2026-10-27. Se salvo
        porque el boton esta en verde en reposo -ya usa el token- y solo se volvia azul al pasar
        el raton, que es un estado que no se ve en una captura.

        Se usa `--gt-acento-vivo` y no un verde escogido aqui porque es lo que el contrato ya
        decidio para el hover de cualquier enlace: `--rz-link-hover-color` y `--bs-link-hover-color`
        apuntan los dos ahi. Un archivo suelto no estrena su propia excepcion. */
    .minimal-button:hover[b-69wk5ou4zm] {
        color: var(--gt-acento-vivo, #00bfae);
        text-decoration: none;
    }

    /*  Y EL FOCO DEL TECLADO VUELVE, por lo mismo que en el ingreso: `outline: none` a secas se
        lleva por delante el anillo que el navegador pinta al llegar con el TABULADOR. Se quita
        solo para el raton. */
    .minimal-button:focus[b-69wk5ou4zm] {
        outline: none;
    }

    .minimal-button:focus-visible[b-69wk5ou4zm] {
        outline: 2px solid var(--gt-acento, #00857C);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* Agregar mas estilos personalizados si se requiere */
.nv-it[b-69wk5ou4zm] {
    display: inline-block;
    margin: 1px !important;
    padding: 0px !important;
}

.navbar-light[b-69wk5ou4zm] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil */
}

.navbar-brand img[b-69wk5ou4zm] {
    max-height: 40px; /* Ajusta el tamano del logo segun sea necesario */
}

/* =============================================================================================
   EL MODO OSCURO DE ESTE ARMAZON

   Lo usan las tres pantallas de formularios tributarios (ICA, IVA, RTE). Tenia los colores a
   pelo y ninguna consulta de esquema, igual que el ingreso: el submenu salia blanco con texto
   #333 sobre una aplicacion en oscuro.

   SE ENCONTRO BUSCANDO EL PATRON, no de casualidad: despues de que el ingreso apareciera a
   medias en produccion, el barrido de los .razor.css con color claro escrito a mano y cero
   `prefers-color-scheme` devolvio exactamente dos archivos mas. Este es uno.

   EL OTRO, FormularioRTE.razor.css, NO SE TOCA Y CONVIENE DECIR POR QUE: sus azules y amarillos
   -#396395, #f0f3f8, yellow- replican el formulario 350 IMPRESO de la DIAN. Ahi el color no es
   decoracion nuestra, es el papel oficial. Oscurecerlo seria romper el parecido que justifica
   la pantalla.
   ============================================================================================= */

@media (prefers-color-scheme: dark) {

    .submenu[b-69wk5ou4zm] {
        background-color: var(--gt-superficie, #1d1f22);
        border-color: var(--gt-borde, #34383c);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.45);
    }

        .submenu li:hover[b-69wk5ou4zm] {
            background-color: var(--gt-fondo, #16181a);
        }

    .submenu-item[b-69wk5ou4zm] {
        color: var(--gt-texto, #eceded);
    }

        .submenu-item:hover[b-69wk5ou4zm] {
            background-color: var(--gt-fondo, #16181a);
        }

    .top-row[b-69wk5ou4zm] {
        border-bottom-color: var(--gt-borde, #34383c);
    }

    /*  El aviso de error de Blazor venia en `lightyellow`, que sobre un fondo negro es un
        fogonazo. Se queda amarillo -es un aviso y tiene que verse- pero del tono oscuro del
        contrato, con su texto encima. */
    #blazor-error-ui[b-69wk5ou4zm] {
        background: var(--gt-aviso-suave, #331f08);
        color: var(--gt-texto, #eceded);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =============================================================================================
   EL ARMAZON: barra lateral, barra superior y contenido.

   MOVIL PRIMERO. Lo que se escribe sin consulta de medios es lo del TELEFONO, y de 641 px para
   arriba se amplia con `min-width`. Antes estaba al reves -se escribia el escritorio y se
   recortaba-, y por eso en telefono el menu era una columna de 1052 px encima del contenido:
   medido el 2026-10-27 a 375 px, el contenido empezaba en el pixel 1107 de una pagina de 1765
   -el 63 % de la pagina era menu- y el boton de colapsar quedaba en el pixel 1051, es decir
   DEBAJO del menu entero. Para llegar al boton que esconde el menu habia que recorrer el menu.

   El corte es el --gt-corte-sm de los tokens (640 px). Las consultas de medios no admiten var(),
   asi que el numero se repite; el sitio donde se consulta es css/gtech-tokens.css.

   (Este archivo estaba guardado en cp1252 con un BOM de UTF-8 por delante: los acentos de los
   comentarios salian como «men?». Se reescribe entero en UTF-8.)
   ============================================================================================= */

/* =============================================================================================
   TELEFONO: la barra lateral es un CAJON
   ============================================================================================= */

.page[b-xsrw6f6ifh] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-xsrw6f6ifh] {
    flex: 1;
    /*  Sin esto, una tabla ancha estira el `main` y saca la pagina de cuadro: en flex, el minimo
        por defecto es el del contenido, no cero. */
    min-width: 0;
}

/*  EL CAJON. Fuera del flujo -asi el contenido empieza arriba, donde tiene que empezar- y
    escondido a la izquierda hasta que se pide. */
.sidebar[b-xsrw6f6ifh] {
    background: var(--gt-menu-fondo);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    /*  Ni toda la pantalla ni un hueco: se deja ver un borde de lo que hay detras, que es lo que
        dice «esto se cierra», y se topa a 320 px para que en una tablet no sea una pared. */
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

body.nav-cajon-abierto .sidebar[b-xsrw6f6ifh] {
    transform: translateX(0);
    box-shadow: var(--gt-sombra-3);
}

/*  EL VELO. Oscurece lo de atras -para que se entienda que esta inerte- y recoge el toque de
    quien cierra el cajon tocando fuera, que es como se cierra un cajon.

    Se oculta con `visibility`, no solo con opacidad: asi la transicion existe y, estando oculto,
    no se queda encima del contenido recogiendo toques. */
#nav-velo[b-xsrw6f6ifh] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1999;
    background: rgba(16, 24, 40, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.nav-cajon-abierto #nav-velo[b-xsrw6f6ifh] {
    opacity: 1;
    visibility: visible;
}

/*  LA HAMBURGUESA. En telefono abre el cajon; de 641 px para arriba colapsa la barra al riel. Es
    el mismo boton: lo que cambia es lo que significa, y eso lo decide navegacion.js.

    Area de toque completa: 48 px es el minimo con el que un dedo acierta (--gt-toque-min). */
.menu-toggle[b-xsrw6f6ifh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--gt-toque-min);
    min-height: var(--gt-toque-min);
    padding: 0;
    background: none;
    border: none;
    color: var(--gt-texto);
    cursor: pointer;
    flex: none;
}

    .menu-toggle .rzi[b-xsrw6f6ifh] {
        font-size: 1.6rem;
        line-height: 1;
    }

/* =============================================================================================
   LA BARRA SUPERIOR
   ============================================================================================= */

.top-row[b-xsrw6f6ifh] {
    background-color: var(--gt-fondo);
    border-bottom: 1px solid var(--gt-borde-suave);
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gt-esp-1);
}

    .top-row[b-xsrw6f6ifh]  a, .top-row[b-xsrw6f6ifh]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
    }

        .top-row[b-xsrw6f6ifh]  a:hover, .top-row[b-xsrw6f6ifh]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-xsrw6f6ifh]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

/*  En telefono el nombre de la empresa no puede empujar al resto fuera de la pantalla: se recorta
    con puntos suspensivos y lo demas conserva su sitio. */
.top-row .nv-it:first-of-type[b-xsrw6f6ifh] {
    min-width: 0;
    overflow: hidden;
}

    .top-row .nv-it:first-of-type .identidad[b-xsrw6f6ifh] {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* =============================================================================================
   IDENTIDAD Y ACCIONES DE LA BARRA

   VAN ANTES DE LAS CONSULTAS DE MEDIOS A PROPOSITO. Una consulta de medios NO suma especificidad:
   entre `.identidad-usuario` dentro de un @media y `.nv-it` fuera de el, los dos valen lo mismo y
   gana el que se declare DESPUES. Con estas reglas al final del archivo, la base le ganaba a la
   variante de telefono: el nombre del usuario seguia en la barra aunque hubiera una regla para
   esconderlo -pasado el 2026-10-27, y por segunda vez en dos dias: lo mismo le habia ocurrido a
   `.en-linea`, que hubo que subir a `.nv-it.en-linea`-.

   Asi que las bases van arriba y las variantes abajo, que es el orden que hace falta. No hay que
   acordarse de subir la especificidad caso por caso.
   ============================================================================================= */
/*  LA IDENTIDAD NO ES UNA ACCION. El nombre de la empresa y el del usuario llevaban
    `minimal-button`, la misma clase que los enlaces de la barra: salian del color del acento y
    con aspecto de enlace, asi que invitaban a pulsarlos sin llevar a ningun sitio. Y un verde
    oscuro en texto pequeno se lee como azul, que fue justo lo que se noto al mirarlo.

    Van en el color del texto normal. El acento se reserva para lo que SI se puede pulsar. */
.identidad[b-xsrw6f6ifh] {
    color: var(--gt-texto);
    font-size: 1rem;
    font-weight: var(--gt-peso-medio);
    padding: var(--gt-esp-2) var(--gt-esp-3);
    white-space: nowrap;
}

/*  Idioma y zona horaria, uno al lado del otro.

    VA CON `.nv-it` DELANTE a proposito: `.nv-it` declara `display: inline-block` MAS ABAJO en
    este mismo archivo, y entre dos selectores de una sola clase gana el ultimo. Sin subir la
    especificidad, el reloj seguia cayendo debajo de la bandera aunque la regla existiera. */
.nv-it.en-linea[b-xsrw6f6ifh] {
    display: inline-flex !important;
    align-items: center;
    gap: var(--gt-esp-2);
}

.minimal-button[b-xsrw6f6ifh] {
    background: none;
    border: none;
    color: var(--gt-acento); /* el acento, no el papel del menu */
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    /*  Area de toque: un enlace de 1 rem con 8 px de relleno mide 32 px de alto, y con el dedo se
        falla. El minimo es 48 (--gt-toque-min). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--gt-toque-min);
    min-height: var(--gt-toque-min);
    padding: var(--gt-esp-2) var(--gt-esp-3);
    transition: color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    outline: none;
}

    .minimal-button:hover[b-xsrw6f6ifh] {
        color: var(--gt-acento-vivo); /* el acento vivo, no un azul suelto */
        text-decoration: none;
    }

    .minimal-button:focus[b-xsrw6f6ifh] {
        outline: none; /* el contorno visible lo pone :focus-visible, en los tokens */
    }

.nv-it[b-xsrw6f6ifh] {
    display: inline-block;
    margin: 1px !important;
    padding: 0px !important;
}

.navbar-light[b-xsrw6f6ifh] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* una sombra sutil */
}

.navbar-brand img[b-xsrw6f6ifh] {
    max-height: 40px;
}

@media (max-width: 640.98px) {
    .top-row[b-xsrw6f6ifh] {
        justify-content: space-between;
        padding-left: var(--gt-esp-3) !important;
        padding-right: var(--gt-esp-3) !important;
    }

        .top-row[b-xsrw6f6ifh]  a, .top-row[b-xsrw6f6ifh]  .btn-link {
            margin-left: 0;
        }

    /*  LO QUE SE CAE DE LA BARRA EN TELEFONO. Medido a 375 px con todo puesto: siete elementos,
        y al nombre de la empresa le quedaban 49 px -salia «G...»-. Se quitan los tres que menos
        falta hacen, y la empresa recupera el ancho:

          · el nombre del USUARIO: ya esta el de la empresa, que es el dato que cambia de verdad,
            y quien eres esta a un toque, en Cerrar Sesion;
          · la ZONA HORARIA: se elige una vez y no se vuelve;
          · el enlace al SITIO de la suite: lleva fuera del producto, que es lo ultimo que hace
            falta desde el movil mientras se trabaja.

        Ninguno se borra: siguen ahi de 641 px para arriba. */
    .identidad-usuario[b-xsrw6f6ifh],
    .solo-ancho[b-xsrw6f6ifh] {
        display: none !important;
    }
}

/* =============================================================================================
   DE 641 px PARA ARRIBA: la barra lateral vuelve a ser una columna fija
   ============================================================================================= */

@media (min-width: 641px) {
    .page[b-xsrw6f6ifh] {
        flex-direction: row;
    }

    .sidebar[b-xsrw6f6ifh] {
        position: sticky;
        top: 0;
        bottom: auto;
        left: auto;
        z-index: auto;
        width: 250px;
        height: 100vh;
        transform: none;
        box-shadow: none;
        transition: width 0.3s ease;
    }

    /*  EL RIEL. Antes median 33 px, que no da para un icono de 20 px con su respiro: el icono
        salia pegado al borde. 56 px es el ancho con el que queda centrado y sigue siendo riel. */
    .sidebar.collapsed[b-xsrw6f6ifh] {
        width: 56px;
        z-index: 2500;
    }

    /*  El cajon no existe en escritorio: ni velo, ni cajon abierto si se llega aqui girando el
        aparato. El estado lo limpia navegacion.js; esto es el cinturon. */
    #nav-velo[b-xsrw6f6ifh] {
        display: none;
    }

    .top-row[b-xsrw6f6ifh] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-xsrw6f6ifh]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-xsrw6f6ifh], article[b-xsrw6f6ifh] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* =============================================================================================
   EL AVISO DE ERROR
   ============================================================================================= */

#blazor-error-ui[b-xsrw6f6ifh] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xsrw6f6ifh] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =============================================================================================
   EL MENU LATERAL.

   MOVIL PRIMERO: lo que no lleva consulta de medios es lo del telefono. El corte es el
   --gt-corte-sm de los tokens (640 px); las consultas de medios no admiten var(), asi que el
   numero se repite y el sitio donde se consulta es css/gtech-tokens.css.

   (Este archivo estaba guardado en cp1252 con un BOM de UTF-8 por delante: los acentos de los
   comentarios salian como «men?». Se reescribe entero en UTF-8.)
   ============================================================================================= */

/*  La cabecera del cajon: el logo. Se queda arriba mientras el resto del menu se desplaza, que
    con 20 grupos y 141 opciones -medido el 2026-10-27- es bastante desplazamiento. */
.top-row[b-2msk1ubxew] {
    height: 3.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex: none;
}

/*  EL LOGO. Las dos piezas estan siempre en el marcado y aqui se enseña una u otra: con la
    barra abierta, el logotipo; en el riel de 56 px, el isotipo.

    ESTAS REGLAS VAN EN ESTE ARCHIVO Y NO EN MainLayout.razor.css, que es donde vive `.sidebar`.
    El CSS aislado de Blazor le pone el atributo de ambito al ULTIMO selector de la regla, asi
    que `.sidebar.collapsed img` escrito alla se compila contra el ambito de MainLayout, y este
    <img> pertenece a NavMenu: no coincidia con nada. Escrito aqui, `.sidebar` es solo un
    antepasado -sin ambito- y el que lo lleva es el <img>, que si es de este componente.

    Es la misma trampa, por otra puerta, que la de las consultas de medios. */
/*  EL TAMANO VA EXPLICITO, Y NO ES UN ADORNO: SIN EL, EL LOGO NO SE VE.

    Lo noto Ivan el 2026-10-28 mirando produccion: la esquina superior izquierda estaba vacia.
    Y estaba vacia tambien en mis capturas del dia anterior, donde no lo cuestione.

    POR QUE DESAPARECE. Estos dos SVG tienen `viewBox` y NO tienen `width` ni `height`: eso les
    da proporcion pero NINGUN tamano intrinseco. El marcado pone `height="40"`, pero el
    `height: auto` que habia aqui **anula el atributo del HTML** -el CSS siempre le gana-, asi
    que la unica medida que quedaba era `max-width: 100%`. Dentro de un elemento flexible que
    puede encogerse, ese 100% se resuelve contra un contenedor cuyo ancho se deriva... de la
    imagen. Circular, y el resultado es cero.

    ES EXACTAMENTE EL MISMO FALLO que ya estaba diagnosticado doce lineas mas abajo para el riel
    -«el 100% de un contenedor de cero es cero»- y que alli se arreglo con un ancho explicito.
    La variante abierta nunca recibio el mismo trato, y nadie lo noto porque un logo que falta no
    se parece a un error: se parece a un hueco.

    LA PRUEBA DE QUE ES ESO: el logotipo del INGRESO, que si se ve, lleva `width: 220px` en
    Login.razor.css. El mismo archivo SVG, con medida, aparece.

    Con la altura fija y la proporcion del viewBox (250x64), el ancho sale solo: 156 px, que
    caben de sobra en los 250 de la barra. */
.logo-ancho[b-2msk1ubxew],
.logo-riel[b-2msk1ubxew] {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.logo-ancho[b-2msk1ubxew] {
    height: 40px;
    width: auto;
}

.logo-riel[b-2msk1ubxew] {
    display: none;
}

.sidebar.collapsed .logo-ancho[b-2msk1ubxew] {
    display: none;
}

.sidebar.collapsed .logo-riel[b-2msk1ubxew] {
    display: block;
    width: 34px;
    /*  La altura tambien explicita, por lo mismo que arriba: el isotipo es cuadrado (viewBox
        56x56) asi que el ancho ya la determinaba, pero dejarla escrita quita la duda y sobrevive
        a que alguien cambie el viewBox. */
    height: 34px;
    max-width: none;   /* ver abajo: el 100% de un contenedor de cero es cero */
}

/*  Y HAY QUE ABRIRLE SITIO. El logo vive dentro del `navbar` de Bootstrap, que en el riel se
    queda asi: la cabecera mide 56 px, `ps-3` le mete 16 de relleno por la izquierda y el
    `container-fluid` otros 12 por lado. Quedan 16 px de caja, el `navbar-brand` -que es un
    elemento flexible- se encoge a CERO, y entonces el `max-width: 100%` de la imagen se calcula
    sobre cero: la imagen se cargaba bien -150x150 medidos- y se pintaba de 0 x 0.

    En el riel no hay nada mas en esa fila, asi que el relleno no defiende de nada. El
    `!important` es porque `ps-3` es una utilidad de Bootstrap, y esas lo llevan. */
.sidebar.collapsed .top-row[b-2msk1ubxew] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sidebar.collapsed .container-fluid[b-2msk1ubxew] {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

.sidebar.collapsed .navbar-brand[b-2msk1ubxew] {
    width: 100%;
    margin-right: 0;
}

.nav-scrollable[b-2msk1ubxew] {
    display: block;
    background-color: var(--gt-menu-fondo);
    overflow-y: auto;
    overflow-x: hidden;
    /*  Ocupa lo que quede bajo el logo y desplaza su propio contenido: con el menu desplegado las
        ultimas opciones no se alcanzaban. */
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gt-menu-barra) var(--gt-menu-fondo);
    /*  En telefono el cajon se desplaza con el dedo: que la inercia no arrastre la pagina de
        atras cuando se llega al final de la lista. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /*  Hueco al final, para que la ultima opcion no quede pegada al borde inferior ni debajo de
        la barra del navegador en un telefono. */
    padding-bottom: var(--gt-esp-6);
}

    /* Barra discreta sobre el verde del menu (Chrome y Edge). */
    .nav-scrollable[b-2msk1ubxew]::-webkit-scrollbar {
        width: 8px;
    }

    .nav-scrollable[b-2msk1ubxew]::-webkit-scrollbar-thumb {
        background-color: var(--gt-menu-barra);
        border-radius: 4px;
    }

    .nav-scrollable[b-2msk1ubxew]::-webkit-scrollbar-track {
        background-color: var(--gt-menu-fondo);
    }

/*  Los iconos del menu son Material Symbols con la clase `rzi` de Radzen -ligadura, no clase por
    icono- y la fuente la sirve el propio paquete. La regla `.bi` de antes pintaba un fondo porque
    Bootstrap Icons son imagenes; aqui el icono es TEXTO, asi que lo que se fija es el tamano de
    la letra, no el del cuadro. */
.rzi[b-2msk1ubxew] {
    font-size: 1.25rem;
    line-height: 1;
    flex: none;
}

/*  EL EJE DE LA FUENTE, QUE ES LO QUE CAMBIA EL CARACTER SIN CAMBIAR UN SOLO NOMBRE DE ICONO.

    El `MaterialSymbolsOutlined.woff2` que sirve Radzen es una fuente VARIABLE -comprobado leyendo
    su directorio de tablas: trae `fvar`, `gvar` y `avar`-, asi que FILL, wght, GRAD y opsz se
    mueven desde el CSS y no cuestan ninguna descarga.

    Lo que NO se puede desde aqui es redondear las esquinas: «Rounded» y «Sharp» son OTRAS
    familias, no ejes, y pedirlas significa servir otro woff2 de ~1 MB. Queda dicho porque yo
    mismo lo prometi como «una regla de CSS» antes de medirlo.

    Asi que la diferencia se consigue con el salto perceptivo mas grande que si esta disponible:
    el contorno se RELLENA cuando el grupo esta abierto o apuntado. Un menu donde el icono cambia
    de forma al recorrerlo no se parece a uno de contornos planos e iguales, y ademas dice algo
    -donde estoy- en vez de solo decorar. */
.menu-item .rzi[b-2msk1ubxew] {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    transition: font-variation-settings .18s ease;
}

.menu-item:hover .rzi[b-2msk1ubxew],
.menu-item:focus-visible .rzi[b-2msk1ubxew],
.menu-item[aria-expanded="true"] .rzi[b-2msk1ubxew],
.menu-item[data-actual] .rzi[b-2msk1ubxew],
.menu-item[aria-current="page"] .rzi[b-2msk1ubxew] {
    font-variation-settings: "FILL" 1, "wght" 300, "GRAD" -25, "opsz" 24;
}

/*  La flecha se queda en contorno SIEMPRE: es el unico glifo del menu que no nombra una cosa sino
    que dice un estado, y ya lo dice girando. Rellenarla seria dos senales para lo mismo. */
.menu-item .rzi.chevron[b-2msk1ubxew] {
    font-variation-settings: "FILL" 0, "wght" 300 !important;
}

/* =============================================================================================
   LOS GRUPOS Y LAS OPCIONES
   ============================================================================================= */

.menu[b-2msk1ubxew] {
    padding: 0;
    margin: 0;
    background: var(--gt-menu-fondo);
    color: var(--gt-menu-texto);
    /*  Era `small !important` -13 px-. En un telefono eso es letra de pie de pagina para lo que
        es la navegacion principal. */
    font-size: var(--gt-texto-sm);
    display: flex;
    flex-direction: column;
}

.menu-list[b-2msk1ubxew], .menu-list li[b-2msk1ubxew] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .menu-list li[b-2msk1ubxew]::marker {
        display: none;
    }

/*  Un grupo del menu.

    EL ALTO ES EL DEL DEDO, no el del texto: 48 px (--gt-toque-min) es el minimo con el que se
    acierta sin mirar. Antes median 40, y con 20 grupos apretados uno detras de otro cada toque
    era una apuesta. */
.menu-item[b-2msk1ubxew] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gt-esp-3);
    min-height: var(--gt-toque-min);
    padding: var(--gt-esp-2) var(--gt-esp-4);
    cursor: pointer;
    color: var(--gt-menu-texto);
    background: var(--gt-menu-fondo);
    text-decoration: none;
    text-align: left;
    width: 100%;
    border: 0;
    font: inherit;
}

    .menu-item:hover[b-2msk1ubxew],
    .menu-item:focus-visible[b-2msk1ubxew] {
        background-color: var(--gt-menu-realce);
    }

    /*  El texto se encoge -y se recorta- antes que empujar la flecha fuera del cajon. */
    .menu-item .texto[b-2msk1ubxew] {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*  La flecha, a la derecha, y gira al abrir: el estado del grupo se ve sin leer. */
    .menu-item .rzi.chevron[b-2msk1ubxew] {
        margin-left: auto;
        transition: transform 0.2s ease;
    }

    .menu-item[aria-expanded="true"] .rzi.chevron[b-2msk1ubxew] {
        transform: rotate(180deg);
    }

/* =============================================================================================
   LOS DESPLEGABLES

   UN SOLO DUENO DEL ESTADO: la clase `open`, que pone y quita js/Main/navegacion.js. Hasta el
   2026-10-27 habia dos -esta clase y un `style.display` que escribia main.js sobre los mismos
   nodos-, y el estilo en linea le gana a la clase: el menu respondia distinto segun lo que se
   hubiera pulsado antes.
   ============================================================================================= */

.submenu[b-2msk1ubxew] {
    display: none;
    padding: 0;
    margin: 0;
}

    .submenu.open[b-2msk1ubxew] {
        display: block;
    }

.li-item[b-2msk1ubxew] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.submenu-item[b-2msk1ubxew] {
    /*  Tambien 48 px: una opcion de submenu se toca igual que un grupo. Y la sangria dice de quien
        cuelga sin necesidad de una linea ni un marco. */
    display: flex;
    align-items: center;
    min-height: var(--gt-toque-min);
    padding: var(--gt-esp-2) var(--gt-esp-4) var(--gt-esp-2) var(--gt-esp-6);
    color: var(--gt-menu-texto);
    background: var(--gt-menu-fondo);
    text-decoration: none;
    width: 100%;
    border: 0;
}

    .submenu-item:hover[b-2msk1ubxew],
    .submenu-item:focus-visible[b-2msk1ubxew] {
        background-color: var(--gt-menu-realce);
        color: var(--gt-menu-texto);
    }

/*  DONDE ESTOY. El menu lo sabia desde siempre -`currentUrl` se recalcula en cada navegacion- y no
    lo decia en ninguna parte. Con 142 opciones en 16 grupos es lo primero que se echa en falta.

    La barra va a la IZQUIERDA y no de fondo entero: el fondo ya lo usa el apuntado, y dos cosas
    distintas no pueden hablar con la misma voz. Lo que hace el fondo es responder al raton; lo que
    hace la barra es decir donde estas, que sigue ahi cuando el raton no. */
.submenu-item[aria-current="page"][b-2msk1ubxew] {
    color: var(--gt-menu-texto);
    background-color: var(--gt-menu-realce);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 currentColor;
}

    .submenu-item[aria-current="page"][b-2msk1ubxew]::before {
        opacity: 1;
    }

/*  Y el grupo que la contiene, para encontrarla con la barra plegada a riel: ahi no hay texto,
    solo iconos, y el icono relleno es lo unico que queda para decir «es este». */
.menu-item[data-actual][b-2msk1ubxew] {
    color: var(--gt-menu-texto);
    font-weight: 600;
}

/*  El punto de las opciones. Antes era `bi-dot` -un icono entero de una fuente de 97 KB para
    dibujar un circulo- y vivia en un <span> FUERA del enlace: un trozo de la fila que no navegaba
    y que se comia area de toque. Ahora es un circulo, y va dentro del enlace. */
.submenu-item[b-2msk1ubxew]::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    margin-right: var(--gt-esp-3);
    flex: none;
}

.submenu hr[b-2msk1ubxew],
.menu-list > li > hr[b-2msk1ubxew] {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: var(--gt-esp-2) 0;
}

/* =============================================================================================
   DE 641 px PARA ARRIBA: el riel

   En telefono no hay riel -no hay raton, asi que no hay «pasar por encima»: un menu de iconos sin
   texto y sin hover es un menu de adivinanzas-. Por eso todo esto va dentro del corte.
   ============================================================================================= */

@media (min-width: 641px) {
    /*  Con el menu colapsado los desplegables salen flotando a la derecha; un contenedor con
        scroll los recortaria, asi que ahi no se recorta nada. */
    .sidebar.collapsed .nav-scrollable[b-2msk1ubxew] {
        overflow: visible;
    }

    /*  En el riel solo queda el icono, centrado. El texto y la flecha estorban. */
    .sidebar.collapsed .menu-item[b-2msk1ubxew] {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

        .sidebar.collapsed .menu-item .texto[b-2msk1ubxew],
        .sidebar.collapsed .menu-item .chevron[b-2msk1ubxew] {
            display: none;
        }

    .sidebar.collapsed .menu-list > li > hr[b-2msk1ubxew] {
        display: none;
    }

    /*  EL DESPLEGABLE FLOTANTE, EN CSS Y NO EN JS. Antes lo colocaba main.js a mano, midiendo
        offsetTop y escribiendo estilos en linea; esos estilos sobrevivian al dejar de colapsar y
        eran el otro dueno del estado. Aqui es una regla: el `li` es el origen y el desplegable
        sale a su derecha. */
    .sidebar.collapsed .menu-list > li[b-2msk1ubxew] {
        position: relative;
    }

        .sidebar.collapsed .menu-list > li:hover > .submenu[b-2msk1ubxew],
        .sidebar.collapsed .menu-list > li:focus-within > .submenu[b-2msk1ubxew] {
            display: block;
            position: absolute;
            left: 100%;
            top: 0;
            min-width: 230px;
            background: var(--gt-menu-fondo);
            box-shadow: var(--gt-sombra-2);
            border-radius: 0 var(--gt-radio-md) var(--gt-radio-md) 0;
            padding: var(--gt-esp-1) 0;
            z-index: 2600;
        }

    .sidebar.collapsed .submenu-item[b-2msk1ubxew] {
        padding-left: var(--gt-esp-4);
    }
}
/* /Components/Pages/Formularios/FormularioICA.razor.rz.scp.css */
*[b-xsb7ditlqi] {
    font-family: Arial, Helvetica, sans-serif !important;
}

td[b-xsb7ditlqi], th[b-xsb7ditlqi] {
    padding: 0 !important;
    font-size: 12px;
    border: 1px solid;
}

.table.cont[b-xsb7ditlqi] {
    margin-top: 10px;
    width: 1024px !important;
    overflow: scroll !important;
    border: 1px solid black;
}

.square[b-xsb7ditlqi] {
    border: 2px solid black;
    height: 15px;
}

    .square.fill[b-xsb7ditlqi] {
        background-color: #002060;
    }

.period[b-xsb7ditlqi] {
    border-left: 1px solid;
}

    .period .number[b-xsb7ditlqi] {
        text-align: center;
    }

.marker-b[b-xsb7ditlqi] {
    background-color: #002060 !important;
    color: white;
    border: 1px solid black;
}

.marker-g[b-xsb7ditlqi] {
    background-color: #d8d8d8 !important;
}

.identification[b-xsb7ditlqi] {
    border-right: 1px solid black;
}

.col-1.esp[b-xsb7ditlqi] {
    width: 2.333333% !important;
    border-left: 1px solid black;
    border-right: 1px solid black;
    text-align: center;
}

.vertical-text[b-xsb7ditlqi] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    text-align: center;
    font-weight: 600;
}
/* /Components/Pages/Formularios/FormularioIVA.razor.rz.scp.css */
*[b-pjt4tnxv5u] {
    font-family: Arial, Helvetica, sans-serif !important;
}

.table[b-pjt4tnxv5u] {
    margin-top: 10px;
    width: 1024px !important;
    overflow: scroll !important;
    border: 2px solid darkgreen;
    text-align: center;
}

    .table thead[b-pjt4tnxv5u] {
        border: 2px solid darkgreen;
    }

th.logo[b-pjt4tnxv5u] {
    width: 20%;
}

.table thead tr th[b-pjt4tnxv5u] {
    vertical-align: middle;
    border: 2px solid darkgreen !important;
}

.T300[b-pjt4tnxv5u] {
    background-color: darkgreen !important;
    border: 2px solid darkgreen !important;
    width: 110px;
    color: white;
}

.private[b-pjt4tnxv5u] {
    color: darkgreen !important;
    background-color: lightgreen !important;
}

td[b-pjt4tnxv5u] {
    border: 2px solid darkgreen;
    padding: 0 !important;
    min-width: 30px;
    font-size: 12px;
}

.marker-g[b-pjt4tnxv5u] {
    background-color: lightgreen !important;
}

.marker-y[b-pjt4tnxv5u] {
    background-color: yellow !important;
}

.year .row .col[b-pjt4tnxv5u] {
    border: 1px solid darkgreen !important;
}

.vertical-text[b-pjt4tnxv5u] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding-right: 13px;
}

.col-1.esp[b-pjt4tnxv5u] {
    width: 4.333333% !important;
}

.declarant span[b-pjt4tnxv5u] {
    display: block;
    background-color: lightgreen;
    text-align: left;
    padding-left: 5px;
}

.declarant .vertical-text[b-pjt4tnxv5u] {
    border-left: 2px solid darkgreen;
    padding: 10px 0;
}

.income[b-pjt4tnxv5u] {
    border-left: 2px solid darkgreen;
    border-right: 2px solid darkgreen;
    text-align: left;
}

    .income.right[b-pjt4tnxv5u] {
        border-right: 0 !important;
    }

    .income .row[b-pjt4tnxv5u] {
        border-bottom: 1px solid darkgreen;
    }

    .income .esp[b-pjt4tnxv5u] {
        border-left: 2px solid darkgreen;
        border-right: 2px solid darkgreen;
    }

.income-2[b-pjt4tnxv5u] {
    text-align: left;
}

    .income-2 .col-9.left[b-pjt4tnxv5u] {
        width: 72.5%;
    }

    .income-2 .col-9.right[b-pjt4tnxv5u] {
        width: 77%;
    }

    .income-2 .vertical-text[b-pjt4tnxv5u] {
        border-left: 2px solid darkgreen;
        border-top: 2px solid darkgreen;
    }

    .income-2 .row[b-pjt4tnxv5u] {
        border-bottom: 1px solid darkgreen;
    }

    .income-2 .col-1.esp[b-pjt4tnxv5u] {
        border-left: 2px solid darkgreen;
        border-right: 2px solid darkgreen;
        width: 4.933333% !important;
    }

    .income-2.right[b-pjt4tnxv5u] {
        border-left: 2px solid darkgreen;
    }
/* /Components/Pages/Formularios/FormularioRTE.razor.rz.scp.css */
*[b-jyjo9orlqu] {
    font-family: Arial, Helvetica, sans-serif !important;
}

.table.cont[b-jyjo9orlqu] {
    margin-top: 10px;
    width: 1024px !important;
    overflow: scroll !important;
    border: 5px solid black;
}

.table thead[b-jyjo9orlqu] {
    text-align: center;
    border: 5px solid black;
}

    .table thead tr th[b-jyjo9orlqu] {
        vertical-align: middle;
        border: 5px solid black;
    }

        .table thead tr th h2[b-jyjo9orlqu],
        .table thead tr th h4[b-jyjo9orlqu] {
            font-weight: bold !important;
        }

.T350[b-jyjo9orlqu] {
    background-color: #396395 !important;
    padding: 0 !important;
    width: 10% !important;
}

    .T350 h1[b-jyjo9orlqu] {
        font-weight: bolder;
        color: white;
        border: 2px white solid;
        border-radius: 5px;
        padding: 8px;
        display: inline;
    }

th.logo[b-jyjo9orlqu] {
    width: 20% !important;
}

td[b-jyjo9orlqu] {
    border: 2px solid black !important;
    padding: 0 !important;
    text-align: center !important;
}

.declarant[b-jyjo9orlqu] {
    background-color: #fff;
}

.declarant-nit[b-jyjo9orlqu] {
    font-size: 8px;
    height: 15px;
    color: #fff;
}

    .declarant-nit .col[b-jyjo9orlqu] {
        /* border-left: 0.5px solid; */
        border-right: 0.5px solid #000;
    }

        .declarant-nit .col:last-child[b-jyjo9orlqu] {
            border: 0;
        }

tfoot[b-jyjo9orlqu] {
    border: 5px solid black;
    font-size: 10px;
}

.total[b-jyjo9orlqu] {
    font-size: 12px;
    text-align: left !important;
    padding-left: 10px !important;
    font-weight: bold;
}

    .total span[b-jyjo9orlqu] {
        margin-left: 20px;
    }

    .total input[b-jyjo9orlqu] {
        border: 2px solid;
        background-color: yellow;
        width: 200px;
        height: 30px;
    }
/* Unique styles */
td[b-jyjo9orlqu] {
    vertical-align: middle !important;
}

.blank[b-jyjo9orlqu] {
    color: transparent;
    background-color: white !important;
    font-size: 8px !important;
    width: 30px;
}

.sub-title[b-jyjo9orlqu] {
    font-size: 10px !important;
    text-align: left !important;
    padding-left: 5px !important;
    vertical-align: middle !important;
    background-color: #f0f3f8 !important;
}

.vertical-text[b-jyjo9orlqu] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.dian-space[b-jyjo9orlqu] {
    height: 150px;
    font-size: 8px;
    text-align: left !important;
    vertical-align: top !important;
}

.marker[b-jyjo9orlqu] {
    background-color: yellow !important;
}

.marker-w[b-jyjo9orlqu] {
    background-color: white !important;
}

.marker-p[b-jyjo9orlqu] {
    background-color: #f0f3f8 !important;
}

.titles[b-jyjo9orlqu] {
    font-size: 14px;
    font-weight: bold;
}

.sign[b-jyjo9orlqu] {
    height: 50px;
    text-align: left !important;
    vertical-align: top !important;
    border: 0 !important;
}