html {
font-size: 62.5%;
}
html, body {
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
margin: 0;
background-color: #efefef;
}
.display-flex{
display: flex;
}
.borde-redondeado-5px-color-bbbbbb {
border-radius: 5px;
border: solid 1px #bbbbbb;
}
.borde-redondeado-5px-color-cce6f4 {
border-radius: 5px;
border: solid 1px #cce6f4;
}
.borde-redondeado-5px {
border-radius: 5px;
border: solid 1px #4682B4;
}
.background-color-blanco {
background-color: white;
}
.background-color-celeste {
background-color: #b0deff;
}
.background-color-celeste-claro {
background-color: #e3f2fd;
}
.background-color-celeste-claro-2 {
background-color: #cce6f4;
}
.background-color-celeste-claro-3 {
background-color: #e4f1f9;
}
.background-color-verde-claro {
background-color: #b8e3af;
}
.background-color-sombra-clara-gris {
background-color: #efefef;
}
.background-color-azul-acero {
background-color: #4682B4;
}
.background-color-negro {
background-color: black;
}
.tamanio-fuente-2-5 {
font-size: 2.5em; /*2.5 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-8 {
font-size: 1.8em; /*1.8 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-7 {
font-size: 1.7em; /*1.7 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-6 {
font-size: 1.6em; /*1.6 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-5 {
font-size: 1.5em; /*1.5 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-4 {
font-size: 1.4em; /*1.4 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-3 {
font-size: 1.3em; /*1.3 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-2 {
font-size: 1.2em; /*1.2 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-1 {
font-size: 1.1em; /*1.1 con relación a font-size de elemento raíz o sea o actual*/
}
.tamanio-fuente-1-0 {
font-size: 1.0em; /*1.0 con relación a font-size de elemento raíz o sea o actual*/
}
.em-0-9 {
font-size: 0.9em;
}
.em-0-8 {
font-size: 0.8em;
}
.em-0-7 {
font-size: 0.7em;
}
.font-opciones-menu {
font-family: 'Roboto';
font-weight: bold;
}
@media (max-width: 915px) {
/*desde muy angostos hasta 915px*/
#factura-venta-completa {
width: 95%;
}
}
@media (min-width: 916px) {
/*desde 916px hacia arriba*/
#factura-venta-completa {
width: 55%;
}
}
@media (max-width: 767px) {
#contenedor_principal {
width: 95%; /*dispositivos más angostos*/
}
#error-custom-gvtex-parr {
width: 93%; /*dispositivos más angostos*/
}
#aviso-custom-gvtex-parr {
width: 93%; /*dispositivos más angostos*/
}
#form-en-area-trabajo {
width: 95%; /*dispositivos más angostos*/
}
#grilla-bastantes-columnas {
width: 95%; /*dispositivos más angostos*/
}
#form-revision-facturas-sin-xml {
width: 90%; /*dispositivos más angostos*/
}
}
@media all and (min-width: 768px) and (max-width: 1499px) {
#contenedor_principal {
width: 40%; /*tablet y un poco más*/
}
#error-custom-gvtex-parr {
width: 33%; /*tablet y un poco más*/
}
#aviso-custom-gvtex-parr {
width: 33%; /*tablet y un poco más*/
}
#form-en-area-trabajo {
width: 85%; /*tablet y un poco más*/
}
#grilla-bastantes-columnas {
width: 95%; /*tablet y un poco más*/
}
#form-revision-facturas-sin-xml {
width: 48%; /*tablet y un poco más*/
}
}
@media (min-width: 1500px) {
#contenedor_principal {
width: 26%; /*dispositivos más anchos*/
}
#error-custom-gvtex-parr {
width: 18% /*dispositivos más anchos*/;
}
#aviso-custom-gvtex-parr {
width: 18% /*dispositivos más anchos*/;
}
#form-en-area-trabajo {
width: 35%; /*dispositivos más anchos*/
}
#grilla-bastantes-columnas {
width: 70%; /*dispositivos más anchos*/
}
#form-revision-facturas-sin-xml {
width: 35%; /*dispositivos más anchos*/
}
}
/*
Para que las imágenes se reduzcan si es necesario, pero nunca se amplíen más allá de su tamaño original.
https://www.w3schools.com/css/css3_images.asp
*/
img {
max-width: 100%;
height: auto;
}
.color-azul-1 {
color: #4A79C0;
}
.color-azul-2 {
color: #4682B4;
}
.color-dark-scarlet {
color: #560319;
}
.color-celeste {
color: #b0deff;
}
.color-salmon {
color: salmon;
}
.color-rosybrown {
color: rosybrown;
}
.color-verde-petroleo {
color: #144051;
}
.color-negro {
color: black;
}
.color-blanco {
color: white;
}
.color-sombra-clara-gris {
color: #efefef;
}
.color-sombra-clara-gris-icono-responsivo {
color: #efefef;
fill: currentColor;
}
.color-cafe-claro-para-svg {
color: #c35f0d;
fill: currentColor;
}
.color-verde-success {
color: #198754;
}
.color-magenta-1 {
color: #664760;
}
.negrita {
font-weight: bold;
}
.sombra-imagen0 {
border-radius: 8px;
border: solid #C9C9C9;
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.padding-1px {
padding: 1px;
}
.padding-l-7 {
padding-left: 7px;
}
.margen-auto {
margin: auto;
}
.borde-login {
border: 1px;
border-style: solid;
padding: 28px;
border-color: cadetblue;
}
.borde-login-interior {
border: 1px;
border-style: solid;
padding: 18px;
border-color: cadetblue;
}
.borde-trabajo {
background-color: #e4f1f9;
border: 1px;
border-style: solid;
padding: 15px;
border-color: cadetblue;
border-radius: 5px;
text-align: start;
margin: auto;
margin-top: 9px;
}
.adicional-ancho-98-por-ciento {
width: 98% !important;
}
/*Para apariencia de distintos formularios (posterior a autenticación) adaptado a dispositivos pequeños y demás*/
@media (min-width: 576px) {
#form-en-area-trabajo > label {
font-size: 1.2em;
}
#form-en-area-trabajo > input[type=text], textarea {
font-size: 1.4em;
}
#form-en-area-trabajo > div > input[type=text] {
font-size: 1.4em;
}
#input-usuario-crear-modificar, #input-usuario {
font-size: 1.4em;
}
#form-en-area-trabajo > div > label {
font-size: 1.2em;
}
#form-en-area-trabajo > div > select {
font-size: 1.4em;
}
}
@media (max-width: 575px) {
#form-en-area-trabajo > label {
font-size: 1.4em;
}
#form-en-area-trabajo > input[type=text], textarea {
font-size: 1.6em;
}
#form-en-area-trabajo > div > input[type=text] {
font-size: 1.6em;
}
#input-usuario-crear-modificar, #input-usuario {
font-size: 1.6em;
}
#form-en-area-trabajo > div > label {
font-size: 1.4em;
}
#form-en-area-trabajo > div > select {
font-size: 1.6em;
}
}
.titulo-trabajo {
color: #560319;
font-weight: bold;
font-size: 1.5em;
text-align: center;
vertical-align: baseline !important;
}
#form-en-area-trabajo > label {
padding-left: 7px;
font-weight: bold;
margin-top: .5rem; /* mt-2 en Bootstrap */
margin-bottom: 0;
color: #560319;
}
#form-en-area-trabajo > input[type=text] {
display: block;
width: 100%;
padding: .375rem .75rem;
font-family: 'Arial';
font-weight: 500;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .375rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
text-transform: uppercase;
}
.obligar-minusculas {
text-transform: lowercase !important;
}
.obligar-primera-en-mayuscula {
text-transform: capitalize !important;
}
.obligar-mantener-tamanio-digitado {
text-transform: none !important;
}
.obligar-ancho-100-por-ciento {
width: 100% !important;
}
#input-usuario-crear-modificar, #input-usuario #input-folio-factura {
margin-left: 3px;
width: 98% !important;
padding: .375rem .75rem;
font-family: 'Arial';
font-weight: 500;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .375rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
vertical-align: bottom !important;
text-transform: lowercase !important;
}
select {
margin-left: 3px;
display: block;
width: auto;
padding: .375rem .75rem;
font-family: 'Arial';
font-weight: 500;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .375rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#form-en-area-trabajo > div > label {
display: block;
padding-left: 14px;
margin-top: .25rem;
font-weight: bold;
}
#form-en-area-trabajo > div > label > input[type=radio] {
margin-right: .5rem;
}
/*Fin formularios de trabajo post-autenticación*/
.borde-arriba-2-blanco {
border-top: 2px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
border-style: solid;
border-color: #ffffff;
}
.borde-abajo-2-blanco {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 2px;
border-style: solid;
border-color: #ffffff;
}
.borde-arriba-2-tono-negro {
border-top: 2px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
border-style: solid;
border-color: rgba(0,0,0,0.3);
}
.borde-abajo-2-tono-negro {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 2px;
border-style: solid;
border-color: rgba(0,0,0,0.3);
}
.borde-arriba-1 {
border-top: 1px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
border-style: solid;
border-color: cadetblue;
}
.borde-abajo-1 {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: cadetblue;
}
.hacia-el-lado {
display: inline;
}
.se-ve {
display: inherit;
}
.no-se-ve {
display: none;
}
a {
font-family: 'Oswald', sans-serif;
font-size: 0.9em;
}
.font-fam-montserrat {
font-family: 'Montserrat';
}
.font-fam-oswald {
font-family: 'Oswald';
}
.font-fam-anton {
font-family: 'Anton';
}
.font-fam-roboto {
font-family: 'Roboto';
}
.font-fam-poiretone {
font-family: 'Poiret One';
}
.font-fam-arial {
font-family: 'Arial';
}
/*En base a:
http://www.lancelarsen.com/blazor-future-net-web-dev-css-update-for-error-message/
*/
#error-custom-gvtex {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.75);
z-index: 2;
text-align: center;
}
#error-custom-gvtex-parr {
font-size: 1.6em;
padding: 15px;
border-radius: 10px;
color: white;
background-color: #560319;
border-color: white;
border-width: 2px;
border-style: solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#aviso-custom-gvtex {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.75);
z-index: 2;
text-align: center;
}
#aviso-custom-gvtex-parr {
font-size: 1.7em;
padding: 15px;
border-radius: 10px;
color: black;
background-color: #90b9e8;
border-color: white;
border-width: 2px;
border-style: solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#factura-venta-completa {
font-size: 1.0em;
padding: 15px;
border-radius: 10px;
color: #ffffff;
background-color: #226c89;
border-color: white;
border-width: 2px;
border-style: solid;
position: relative;
left: 50%;
transform: translate(-50%);
overflow: auto;
overflow-x: auto;
overflow-y: auto;
text-align: left;
}
.ancho-75-por-ciento {
width: 75%;
}
.efecto-manito-sobre-elemento {
cursor: pointer;
}
button:hover {
transform: scale(1.1);
transition: 0.2s;
}
#seccion-codigo-verificacion {
animation-name: mostrar_demorado;
animation-duration: 0.9s;
}
@keyframes mostrar_demorado {
0% {
opacity: 0.0
}
25% {
opacity: 0.25
}
50% {
opacity: 0.5
}
75% {
opacity: 0.75
}
100% {
opacity: 1.0
}
}
.autenticar {
font-family: 'Arial';
font-size: 1.2em;
}
.font-pie-pagina-login {
font-family: 'Arial';
font-size: 0.9em !important;
}
.font-comienzo-post-login {
font-family: 'Arial';
color: #144051;
font-size: 1.4em !important;
}
.tamanio-link-asignar-password {
font-size: 1.1em !important;
}
.grid-ventana-usuario-autenticado {
display: grid;
grid-template-columns: minmax(360px, 1fr); /*Su ancho mínimo es 360px y el máximo lo disponible pero solo una columna*/
grid-template-rows: auto 1fr;
height: 99vh;
}
.leer-como-salto-de-linea {
white-space: pre-line;
}
.obligar-display-flex {
display: flex !important;
}
.subrayado {
text-decoration: underline;
}
.padding-izq-der-2-1px{
padding-left: 2px;
padding-right: 1px;
}
.no_wrap {
white-space: nowrap;
}
.cuadricula-botones-periodo {
display: grid;
grid-template-columns: 20% 60% 20%;
}
.cuadricula-1-fila-2-cols-20-80 {
display: grid;
grid-template-columns: 20% 80%;
}
.cuadricula-1-fil-3-col {
display: grid;
grid-template-columns: 20% 60% 20%;
}
.svg-end {
display: flex;
justify-content: flex-end;
}
/* Contenedor principal: Ocupa toda la pantalla con desenfoque */
#components-reconnect-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.6); /* Fondo semi-transparente */
backdrop-filter: blur(8px); /* ¡El Brillo! Desenfoque de fondo */
z-index: 10000;
display: none; /* Se oculta por defecto */
align-items: center;
justify-content: center;
}
/* Solo se muestra cuando Blazor lo activa */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
display: flex;
}
/* La tarjeta: Estilo limpio y moderno */
.reconnect-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
text-align: center;
max-width: 450px;
width: 90%;
border: 1px solid rgba(255,255,255,0.3);
}
/* --- LOGICA DE VISIBILIDAD (Lo que faltaba) --- */
.reconnect-card > div {
display: none;
}
/* Oculta todo por defecto */
#components-reconnect-modal.components-reconnect-show .show {
display: block;
}
#components-reconnect-modal.components-reconnect-failed .failed {
display: block;
}
#components-reconnect-modal.components-reconnect-rejected .rejected {
display: block;
}
/* Tipografía y botones */
.reconnect-card h5 {
color: #1e293b;
font-weight: 700;
margin-bottom: 10px;
}
.reconnect-card p {
color: #64748b;
font-size: 0.95rem;
}
.btn-retry {
background: #0070f3; /* Azul eléctrico estilo Vercel/Next */
color: white;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
margin-top: 20px;
}
.btn-retry:hover {
transform: scale(1.05);
background: #0051bb;
}
/* Spinner moderno */
.spinner {
width: 50px;
height: 50px;
border: 3px solid #f3f3f3;
border-top: 3px solid #0070f3;
border-radius: 50%;
animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}