* {padding:0; margin:0;}  

/*-------------------CUERPO--------------------------------*/

body {min-width: 850px; min-height: 530px; background: #e2e5eb; color: #000000; font-size: 0.9em; font-family: Arial, Helvetica, sans-serif;}

/*-------------------PANEL DE CONTROL----------------------*/

.dash_b {display: grid;	width: 100%; height: 100%; grid-template-columns: 20% 80%; grid-template-rows: 25px auto 25px; 
	grid-template-areas: 
	    'nav_bar  nav_bar'
		'menu     menu_display'
		'nav_inf  nav_inf';}

/*-------------------BARRA DE NAVEGACIÓN SUPERIOR----------*/

.nav_bar {position:relative; display: flex; grid-area: nav_bar; padding: 0px 8px; align-items: center; background: #0076a1; color: #ffffff; font-size: 0.8em; z-index: 5;}
.nav_bar p {padding: 0px 5px;}
.nav_bar span {text-transform: uppercase;}
.nav__bar-1 {cursor: pointer;}
.nav__bar-1-menu {width: 20px; height: 2px; margin: 2px 2px; background: #ffffff;}
.nav__bar-2 {display: flex; width: 100%;}
.nav__bar-2-edit {flex-grow: 1;}

/*-------------------MENÚ: MÓDULOS Y SUB-MODULOS-----------*/

.menu, .panel  {display: flex; grid-area: menu; flex-direction: column;}
.menu__1 {display: flex; position: relative; width: 100%; height: 27px; background: #ffffff; align-items: center; box-shadow: 0px 1px 5px #cacaca;}
.menu__1 p {padding: 0px 35px; font-size: 0.8em; font-weight: bold;}
.menu__2 {width: 100%; height: 410px; background: #ffffff; flex-grow: 1; overflow: auto;}
.menu__2::-webkit-scrollbar {width: 7px; background-color: transparent;}
.menu__2::-webkit-scrollbar-thumb {background-color: transparent;}
.menu__2:hover::-webkit-scrollbar-thumb {background-color: #cacaca;}
.menu__2 dt {display: flex; width: 70%; font-weight: bold; margin: auto; box-shadow: 0px 1px 0px #e2e5eb;}
.menu__2 p {flex-grow: 1; padding: 8px; color: #0076a1;}
.menu__2 img {object-fit: none; width: 26px; height: 26px; padding: 3px 0px;}
.menu__2 dd {width: 70%; padding: 7px 10px; font-size: 0.9em; color: #333333; border-radius: 4px; cursor: pointer; margin: auto;}
.menu__2 dd:hover {background: #e2e5eb; box-shadow: inset 1px 1px 2px 1px rgb(0 0 0 / 30%), inset -2px -2px 3px rgb(0 0 0 / 10%), 2px 2px 10px rgb(0 0 0 / 10%);}

/*-------------------VISUALIZACIÓN DEL MENÚ----------------*/

.menu_display {grid-area: menu_display; padding: 10px 10px; overflow: auto;}
.menu_display::-webkit-scrollbar {width: 7px; background-color: transparent;}
.menu_display::-webkit-scrollbar-thumb {background-color: transparent;}
.menu_display:hover::-webkit-scrollbar-thumb {background-color: #cacaca;}

/*-------------------MODO DE VISUALIZACIÓN-----------------*/

.display_mode {display: grid; width: 100%; height: 100%; grid-template-columns: 100%; grid-template-rows: max-content minmax(10%, 1fr); 
	grid-template-areas: 
	    'display_a'
		'display_b';}

/*-------------------BARRA DE NAVEGACIÓN INFERIOR----------*/

.nav_inf {position:relative; display: flex; grid-area: nav_inf; padding: 0px 8px; align-items: center; background: #e2e5eb; font-size: 0.8em; z-index: 5; box-shadow: 0px -1px 2px #929292;}
.nav_inf p {padding: 0px 5px;}
.nav_inf span {text-transform: uppercase;}
.nav__inf-1 {display: flex; width: 100%; align-items: center;}
.nav__inf-1-edit {flex-grow: 1;}
.nav__inf-1 a {color: #ffffff; font-weight: initial;}

/*-------------------TABLA DE DATOS-----------------------*/

/*Tabla principal*/
.data_table {width: 100%; height: 100%; overflow-y: scroll; box-shadow: 0px 2px 0px 0px #0076a1;}
.data_table::-webkit-scrollbar {width: 7px; background-color: transparent;}
.data_table::-webkit-scrollbar-thumb {background-color: transparent;}
.data_table:hover::-webkit-scrollbar-thumb {background-color: #cacaca;}
.data_table table thead tr {position: sticky; top: 0; box-shadow: 0px 1px 5px #cacaca; z-index: 5;}
.data_table table tfoot tr {position: sticky; bottom: -1; z-index: 2; box-shadow: 0px -1px 2px 0px #cacaca;}
.data_t {width:100%; font-size:0.8em; border-collapse: collapse;}
.data_t thead th {background: #0076a1; color: #ffffff; text-align: left; font-weight: initial;}
.data_t tfoot th {color: #000000; text-align: left; border-bottom: 1px solid #333333; border-bottom-style: dashed;}
.data_t th, .data_t td {padding: 3px; height: 25px;}
.data_t button {font-size: 1em;}
.data_t tbody tr {background: #ffffff; border-bottom: 1px solid #cacaca;}
.data_t tbody tr:hover {background: #cde5fd;}
.data_t tbody td input, .data_t tbody td select {background: transparent; font-size: 1em; box-shadow: -1px 0px 0px 0px #cacaca;}

/*Tabla reportes - imprimir datos*/
.data_reports {width: 100%; height: 100%;}
.data_reports::-webkit-scrollbar {width: 7px; background-color: transparent;}
.data_reports::-webkit-scrollbar-thumb {background-color: transparent;}
.data_reports:hover::-webkit-scrollbar-thumb {background-color: #cacaca;}
.dt_reports {width:100%; font-size:0.8em; border-collapse: collapse;}
.dt_reports th, .dt_reports td {padding: 3px; border: 1px solid #333333;}
.dt_reports tbody tr {background: #ffffff; border-bottom: 1px solid #333333;}

/*Tabla reportes - imprimir datos POS*/
.dt_reports_pos {width:100%; font-size:1em; border-collapse: collapse;}
.dt_reports_pos th, .dt_reports_pos td {padding: 3px;}
.dt_reports_pos tbody tr {background: #ffffff;}


/*-------------------BLOQUES DE INFORMACIÓN----------------*/

/*Principal*/
.block {display: flex; flex-wrap: wrap; padding: 7px; box-sizing: border-box; align-items: stretch; margin-bottom: 10px;}
.block::-webkit-scrollbar {width: 7px; background-color: transparent;}
.block::-webkit-scrollbar-thumb {background-color: transparent;}
.block:hover::-webkit-scrollbar-thumb {background-color: #cacaca;}

/*Modificaciones*/
.bk--a {background: #ffffff; align-items: center; border-radius: 4px; box-shadow: -2px 2px 5px #cacaca;}
.bk--a2 {background: #ffffff; align-items: flex-end; border-radius: 4px; box-shadow: -2px 2px 5px #cacaca;} /*Elementos con y sin titulos, los alinea juntos abajo*/
.bk--a3 {background: #ffffff; align-items: flex-start; border-radius: 4px; box-shadow: -2px 2px 5px #cacaca;} /*Elementos con y sin titulos, los alinea juntos arriba*/
.bk--b {padding: 0px; align-items: center;}
.bk--b2 {padding: 0px; align-items: flex-end;} /*Elementos con y sin titulos, los alinea juntos abajo*/
.bk--b3 {padding: 0px; align-items: flex-start;} /*Elementos con y sin titulos, los alinea juntos arriba*/
.bk--c {align-items: center; box-shadow: 0px 1px 0px 0px #333333;}
.bk--d {padding: 0px; align-items: center; margin-bottom: 0px;}
.bk--x {display: flex; align-items: stretch;}  /*Bloques y grupos de elmentos, los alinea juntos*/
.bk--tt {position: relative; flex-wrap: nowrap; padding: 5px 0px; margin-top: 5px; margin-bottom: 5px; z-index: 5; box-shadow: 0px 1px 0px 0px #e2e5eb;}

/*-------------------ELEMENTOS DE INFORMACIÓN-------------*/

/*Principal*/
.elemt__g {display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; border-radius: 4px;}

/*Modificaciones*/
.elemts--a {padding: 10px; box-shadow: inset 1px 1px 2px 1px rgb(0 0 0 / 30%), inset -2px -2px 3px rgb(0 0 0 / 10%), 2px 2px 10px rgb(0 0 0 / 10%);}
.elemts--b {padding: 10px; background: #ffffff; box-shadow: 0px 0px 0px 1px #333333;}
.elemts--c {padding: 0px 10px; box-shadow: inset 1px 1px 2px 1px rgb(0 0 0 / 30%), inset -2px -2px 3px rgb(0 0 0 / 10%), 2px 2px 10px rgb(0 0 0 / 10%);}

/*-------------------TAMAÑOS Y ALTURAS--------------------*/

/*Tamaños en porcientos %*/
.t--1 {width: 1%;}   .t--2 {width: 2%;}   .t--3 {width: 3%;}   .t--4 {width: 4%;}   .t--5 {width: 5%;}   .t--6 {width: 6%;}
.t--7 {width: 7%;}   .t--8 {width: 8%;}   .t--9 {width: 9%;}   .t--10 {width: 10%;} .t--11 {width: 11%;} .t--12 {width: 12%;}
.t--13 {width: 13%;} .t--14 {width: 14%;} .t--15 {width: 15%;} .t--16 {width: 16%;} .t--17 {width: 17%;} .t--18 {width: 18%;}
.t--19 {width: 19%;} .t--20 {width: 20%;} .t--21 {width: 21%;} .t--22 {width: 22%;} .t--23 {width: 23%;} .t--24 {width: 24%;}
.t--25 {width: 25%;} .t--26 {width: 26%;} .t--27 {width: 27%;} .t--28 {width: 28%;} .t--29 {width: 29%;} .t--30 {width: 30%;}
.t--31 {width: 31%;} .t--32 {width: 32%;} .t--33 {width: 33%;} .t--34 {width: 34%;} .t--35 {width: 35%;} .t--36 {width: 36%;}
.t--37 {width: 37%;} .t--38 {width: 38%;} .t--39 {width: 39%;} .t--40 {width: 40%;} .t--41 {width: 41%;} .t--42 {width: 42%;} 
.t--43 {width: 43%;} .t--44 {width: 44%;} .t--45 {width: 45%;} .t--46 {width: 46%;} .t--47 {width: 47%;} .t--48 {width: 48%;} 
.t--49 {width: 49%;} .t--50 {width: 50%;} .t--51 {width: 51%;} .t--52 {width: 52%;} .t--53 {width: 53%;} .t--54 {width: 54%;} 
.t--55 {width: 55%;} .t--56 {width: 56%;} .t--57 {width: 57%;} .t--58 {width: 58%;} .t--59 {width: 59%;} .t--60 {width: 60%;} 
.t--61 {width: 61%;} .t--62 {width: 62%;} .t--63 {width: 63%;} .t--64 {width: 64%;} .t--65 {width: 65%;} .t--66 {width: 66%;} 
.t--67 {width: 67%;} .t--68 {width: 68%;} .t--69 {width: 69%;} .t--70 {width: 70%;} .t--71 {width: 71%;} .t--72 {width: 72%;} 
.t--73 {width: 73%;} .t--74 {width: 74%;} .t--75 {width: 75%;} .t--76 {width: 76%;} .t--77 {width: 77%;} .t--78 {width: 78%;} 
.t--79 {width: 79%;} .t--80 {width: 80%;} .t--81 {width: 81%;} .t--82 {width: 82%;} .t--83 {width: 83%;} .t--84 {width: 84%;} 
.t--85 {width: 85%;} .t--86 {width: 86%;} .t--87 {width: 87%;} .t--88 {width: 88%;} .t--89 {width: 89%;} .t--90 {width: 90%;} 
.t--91 {width: 91%;} .t--92 {width: 92%;} .t--93 {width: 93%;} .t--94 {width: 94%;} .t--95 {width: 95%;} .t--96 {width: 96%;} 
.t--97 {width: 97%;} .t--98 {width: 98%;} .t--99 {width: 99%;} .t--100 {width: 100%;}

/*Tamaños en pixeles px*/
.t--50p {width: 50px;}
.t--95p {width: 95px;}
.t--200p {width: 200px;}
.t--330p {width: 330px;}
.t--400p {width: 400px;}
.t--500p {width: 500px;}
.t--650p {width: 650px;}
.t--850p {width: 850px;}

/*Altura en porcientos %*/
.a--25 {height: 25%;}
.a--35 {height: 35%;}
.a--50 {height: 50%;}
.a--70 {height: 70%;}
.a--75 {height: 75%;}
.a--90 {height: 90%;}
.a--98 {height: 98%;}
.a--100 {height: 100%;}

/*Altura en pixeles*/
.a--25p {height: 25px;}
.a--35p {height: 35px;}
.a--40p {height: 40px;}
.a--60p {height: 60px;}
.a--75p {height: 75px;}
.a--85p {height: 85px;}
.a--100p {height: 100px;}
.a--140p {height: 140px;}
.a--145p {height: 145px;}
.a--150p {height: 150px;}
.a--200p {height: 200px;}
.a--240p {height: 240px;}
.a--250p {height: 250px;}
.a--280p {height: 280px;}
.a--300p {height: 300px;}
.a--315p {height: 315px;}
.a--330p {height: 330px;}
.a--345p {height: 345px;}
.a--350p {height: 350px;}
.a--355p {height: 355px;}
.a--400p {height: 400px;}
.a--425p {height: 425px;}
.a--450p {height: 450px;}
.a--595p {height: 595px;}

/*-------------------ENTRADA DE DATOS (DATA ENTRY)---------*/

/*Titulo*/
.data_e_tt {display: flex; height: 25px; align-items: center;}
.data_e_tt img {width: 10px; height: 10px; padding: 2px 3px; border-radius: 2px; margin-right: 5px;}
    
/*Cuerpo*/
.data_e {width: 100%; height: 25px; line-height: 25px; background: #fffddd; text-indent: 5px; border-width: 0; outline: none; box-shadow: inset 2px 2px 2px rgba(0,0,0,.2),  inset -2px -2px 3px rgba(0,0,0,.1),  2px 2px 10px rgba(0,0,0,.1), 0px 0px 0px 1px #333333;}

/*Modificaciones*/
.data_e--static {align-items: center; display: flex; background: #e2e5eb; font-size: 0.8em;}
.data_e--static p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

/*-------------------TIPOS DE BOTONES----------------------*/

/*Genericos*/
.btn {height: 25px; padding: 0px 5px; font-weight: bold; cursor: pointer; border-width: 0; outline: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 3px rgba(0, 0, 0, .2), 0px 0px 0px 1px #333333;}
.btn:hover {position:relative; border-radius: 2px; box-shadow: 0px 0px 0px 2px #0076a1;}

/*Acciones*/
.btn-2 {height: 25px; cursor: pointer; box-shadow: 1px 0px 0px 0px #cacaca;}
.btn-2 p {padding: 7px 7px; font-size: 0.8em;}
.btn-2 img {float: right; position: relative; padding: 0px 5px; top: -2px;}
.btn-2:hover {position:relative; border-radius: 2px; box-shadow: 0px 0px 0px 2px #0076a1;}

/*Border - colores*/
.active_border_azul{box-shadow: 0px 0px 0px 2px #0076a1;}

/*Modificaciones - colores (cl)*/ 
.cl--bl {background: #ffffff;} /*Blanco*/
.cl--blaz {background: #ffffff; color: #0076a1;} /*Blanco y azul*/
.cl--az {background: #0076a1; color: #ffffff;} /*Azul */
.cl--az:hover {box-shadow: 0px 0px 0px 2px #025f81;}
.cl--azc {background: #c5e5f1; color: #000000;} /*Azul claro*/
.cl--nj {background: #fd8a0e; color: #ffffff;} /*Naranja*/
.cl--gr {background: #e2e5eb;} /*Gris*/

/*Modificaciones - bordes radios (br)*/
.br--izq {border-radius: 2px 0px 0px 2px;} /*Border izquierdo*/
.br--cpt {border-radius: 2px;} /*Border completo*/
.br--der {border-radius: 0px 2px 2px 0px;} /*Border derecho*/

/*-------------------CUADROS DESPLEGABLES------------------*/

/*Principal*/
.modal_inf {position:fixed; display: flex; justify-content: center; align-items: center; background: rgba(226, 229, 235, 0.8); top:0; right:0; bottom:0; left:0; z-index:1000; opacity:0; pointer-events: none;}

/*Reportes*/
.modal_reports {position:fixed; background: #ffffff; overflow: auto; top:0; right:0; bottom:0; left:0; z-index:1000; opacity:0; pointer-events: none;}

/*Panel de control*/
.modal_menu {position:absolute; width: 300px; min-height: 530px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.1); top:0; right:0; bottom:0; left:0; z-index:1000; opacity:0; pointer-events: none;}

/*-------------------CORTINA (PESTAÑA) DE DATOS----------------------*/

/*Principal*/
label.active{background: #ffffff !important;color: #000000 !important;font-weight: bold !important;}
.data_curtain {position: relative; width: 100%; height: 80%;}
.data__ctn input[type="radio"] {display: none;}
.data__ctn input:checked ~ .curtain_content {display: block;}

/*Botones cortinas*/
.btn_curtain {display:flex;}
.btn_curtain label:hover {background: #ffffff; color: #000000; font-weight: bold;}

/*Boton cortina vista*/
.btn_curtain label {display:inline-block; position: relative; padding: 7px 10px; background: #c5e5f1; color: #000000; text-align: center; top: 1px; border-radius: 5px 5px 0px 0px; border-left: 1px solid #d3d3d3; border-right: 2px solid #d3d3d3; z-index: 1000; cursor: pointer;}

/*Contenido de cortina*/
.curtain_content {display: none; background: #ffffff; border: 1px solid #d3d3d3; box-shadow: -2px 2px 5px #cacaca;}

/*-------------------PROPIEDADES PARTICULARES--------------*/ 

.sp {text-indent: 4px;} /*Separador de texto*/
.tt_ita {font-style: italic;} /*Texto italiano*/
.fzise_8 {font-size: 0.8em;} /*Fuente 0.8*/
.fzise_9 {font-size: 0.9em;} /*Fuente 0.9*/
.fzise_1 {font-size: 1em;} /*Fuente 1*/
.fzise_1_1 {font-size: 1.1em;} /*Fuente 1.1*/
.fzise_1_2 {font-size: 1.2em;} /*Fuente 1.2*/
.fzise_1_3 {font-size: 1.3em;} /*Fuente 1.3*/
.fzise_2 {font-size: 2em;} /*Fuente 2*/
.fizq {text-align: left;} /*Fuente a la izquierda*/
.fcentro {text-align: center;} /*Fuente al centro*/
.fder {text-align: right;} /*Fuente a la derecha*/
.clgro {color: #929292;} /*Color gris oscuro*/
.clvdn {color: #02CFDE;} /*Color verde neon*/
.mayus {text-transform: uppercase;} /*Texto mayuscula*/
.ngt {color: #000000; font-weight: bold;} /*Texto negrito*/
.valor {color: #008000; font-weight: bold;} /*Valores numericos*/
.valor_neg {color: #ff0000; font-weight: bold;} /*Valores numericos negativos*/
.valor_nlo {color: #fd8a0e; font-weight: bold;} /*Valores numericos nulos*/
.ID {color: #0076a1; font-weight: bold;} /*Identificador*/
.abrv {line-height: 26px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} /*Texto abreviado*/
.spt {padding: 0px 5px;} /*Espaciador tamaño anchura*/
.spt2 {padding: 0px 10px;} /*Espaciador tamaño anchura 2*/
.spte {margin: 0px 5px;} /*Espaciador tamaño entorno*/
.spta {margin-bottom: 5px;} /*Espaciador tamaño altura*/
.spta2 {margin-bottom: 10px;} /*Espaciador tamaño altura 2*/
.spta3 {padding: 5px 0px;} /*Espaciador tamaño altura 3*/
.spta4 {margin-top: 5px;} /*Espaciador tamaño altura 4*/
.l_br {box-shadow: 0px 0px 0px 1px #333333;} /*Linea border completo*/
.l_br_abg {box-shadow: 0px 1px 0px 0px #cacaca;} /*Linea border abajo gris*/
.l_br_ab_p {border-bottom: 1px solid #333333; border-bottom-style: dashed;} /*Linea border abajo puntos*/
.img_cpt {max-width: 100%; max-height: 90%; margin: auto;} /*Tamaño para imagen*/
.slc {cursor: pointer;} /*Marcar cursor*/
.bgazc {background: #c5e5f1;} /*Fondo azul claro*/
.bgazc_2 {background: #f2fbff;} /*Fondo azul mas claro*/
.bgvdc {background: #f2fbf2;} /*Fondo verde claro*/
.bgvdo {background: #008000; color: #ffffff;} /*Fondo verde oscuro*/
.bgblc {background: #ffffff;} /*Fondo blanco*/
.bggrc {background: #e2e5eb;} /*Fondo gris claro*/
.bgroj {background: #ff0000; color: #ffffff;} /*Fondo rojo*/
.p--centro {display: flex; justify-content: center;} /*Posicionar al centro*/
.p--right {display: flex; justify-content: flex-end;} /*Posicionar a la derecha*/
.dt--cpt {overflow: auto;} /*Scroll automatico*/
.tcheck {width: 15px; height: 15px; cursor: pointer;} /*Formato checkbox*/
.ipt_date input[type="date"] {height: 15px; background: #c5e5f1; color: #000000; font-size: 0.8em; font-weight: bold; cursor: pointer; box-shadow: 0px 0px 0px 0px #e2e5eb;} /*Input particular*/
.t_impr {max-width: 1000px; margin: auto;} /*Ancho vizual de impresion*/
.t_impr_pos {max-width: 285px; font-size:0.9em; margin: auto; font-family: "Times New Roman", Times, serif;} /*Ancho vizual de impresion POS*/

/*-------------------PROPIEDADES GENERICAS-----------------*/  

a {text-decoration: none; color: #000000;}  
ul, ol, li {list-style: none;}  
span, label, button, select {font-size: 0.8em;}
input, select, textarea {font-family: Arial, Helvetica, sans-serif;}
input:disabled, textarea:disabled, select:disabled, button:disabled {background: #e2e5eb; pointer-events: none; box-shadow: inset 2px 2px 2px rgb(0 0 0 / 20%), inset -2px -2px 3px rgb(0 0 0 / 10%), 2px 2px 10px rgb(0 0 0 / 10%), 0px 0px 0px 1px #333333;}
textarea {padding: 5px 0px; resize: none;}
.disabled {pointer-events: none;}

/*-------------------RESPONSIVO----------------------------*/

@media (min-width:1024px) {
    .nav__bar-1 {display: none; width: 0px;}
}

@media (max-width:1024px) {
    .dash_b {grid-template-columns: 100%;}
    .menu {display: none; width: 0px;}
    .menu_display {grid-column: 1 / 3;}
}

/*-------------------REGLAS DE IMPRESION-------------------*/

@media print {
    @page {margin: 2.5mm;} /*Margenes de hoja*/
    .modal_reports {position:absolute; overflow: initial;}
    .bk--a, .data_table {box-shadow: 0px 0px 0px #ffffff;}
    .t_impr {max-width: none;}
    .nav_bar, .menu, .nav_inf, .btn, .data_e, .data_e--static {display:none;}
}