/* CSS Document */
/*
@font-face {
  font-family: 'Roboto';
  src: url('../fuentes/Roboto/Roboto-Black.ttf') format('woff2');
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fuentes/Roboto/Roboto-Bold.ttf') format('woff2');
  font-weight: bold;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fuentes/Roboto/Roboto-Italic.ttf') format('woff2');
  font-style: italic;
}
*/

body{
	background-color: rgb(32 32 32);
	background: #202020;/*rgb(32 32 32)*/
	color: rgb(150 150 150);
	font-family: arial;
	margin: auto;
}

/*
button, input[type="button"], select, .btn{
	cursor: pointer;
	font-size: 24px;
	border: none;
	outline: none;
	text-decoration: none;
}
button:active, input[type="button"]:active, .btn:active{
	transform: scale(0.98,0.98);
}*/
a{
	text-decoration: none;
}

#con_msj{
	color: rgb(73 159 76);/*rgb(207 53 53)*/
	text-align: center;
	margin: 8px auto;
	font-size: 24px;
}
#con_msj .msj_error{
	color: rgb(207 53 53);
}


.caja_productos{
	
	max-width: 1366px;
	position: relative;
	padding: 8px;
	box-shadow: 0px 0px 1px 1px rgb(24 24 24);
	margin: auto;
	margin-bottom: 32px;
	border-radius: 4px;
}



.caja_central{
	min-height: 640px;
}

.prod_con_inf_pr{
	box-sizing: border-box;
	display: block;
	position: relative;
	height: 44px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgb(50 50 50);
	border-top: 1px solid rgb(50 50 50);
}
.info_pr_der, .info_pr_izq{
	font-size: 24px;
	position: absolute;
	top: 0px;
	font-weight: bold;
	height: 100%;
	display: table;
}
.info_pr_der>div, .info_pr_izq>div{
	display: table-cell;
	padding: 0 2px;
	vertical-align: middle;
	box-sizing: border-box;
}
.info_pr_der{
	left: 4px;
}
.info_pr_izq{
	right: 4px;
}


.con_tit_info{
	box-sizing: border-box;
	padding: 6px;
}
.con_tit_info h1{
	margin: auto;
	font-size: 28px;
}
.con_subtit_info{
	position: relative;
	box-sizing: border-box;
	padding: 8px;
	width: auto;
}
.con_subtit_info h2{
	margin: auto;
	font-size: 22px;
}
.txt_dia{
	text-transform: uppercase;
}


.con_subtit_info span{
	position: relative;
	display: inline-flex;
	background: #000000;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 0 0 8px 8px;
	color: #ff9800;
}
.con_subtit_info span>strong{
	position: absolute;
	display: block;
	top: -8px;
	left: 0px;
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #ffc107;
	background: #000000;
	border-radius: 8px 8px 0 0;
}


.prod_nop{
	background: rgb(96 76 76);
}
.prod_sip{
	background: rgb(74 90 74);
}


.caja_mod1{
	box-sizing: border-box;
	box-shadow: 0px 0px 1px 1px rgb(54 54 54);
	padding: 8px 36px;
	margin-bottom: 4px;
	border-radius: 8px;
	position: relative;
	display: block;	
}


.producto{
	box-sizing: border-box;
	box-shadow: 0px 0px 1px 1px rgb(54 54 54);
	padding: 8px 36px;
	margin-bottom: 4px;
	border-radius: 8px;
	position: relative;
	display: block;
}
.prod_selec, .prod_precio, .prod_pagado{
	background: rgb(120 120 120);
	font-size: 16px;
	border-radius: 8px;
	color: white;
}


.con_prod_entradas{
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	width: auto;
	margin: auto 8px;
	text-align: left;
}
.con_prod_entradas>span{
	font-size: 10pt;
	color: rgb(98 98 98);
}

.con_prod_entradas>span, .con_prod_entradas>input{
	box-sizing: border-box;
	display: block;
}

.entradas{
	font-size: 16px;
	background: rgb(120 120 120);
}

.caja_enlaces_pr li{
	padding: 8px;
	list-style: none;
	border-bottom: 1px solid rgb(54 54 54);
}
.caja_enlaces_pr a{
	color:  rgb(189 113 0);
	font-size: 20px;
}
.caja_enlaces_pr a:hover, .caja_enlaces_pr a:active{
	color: rgb(255 152 0);
}











/* ESTILOS ZONA DE MESES --------------------*/
.con_mes{
	box-sizing: border-box;
	padding: 16px;
	border-radius: 8px;
	border: 1px solid rgb(50 50 50);
	margin: 16px auto;
	background: rgb(38 38 38);
	position: relative;
	overflow: hidden;
	padding-bottom: 32px;
}


.con_mes .info_pr_izq::after{
	content: 'S/';
	position: absolute;
	color: rgb(100 100 100)/*rgb(150 150 150)*/;
	right:100%;
	top: 14px;
	text-align: center;
	font-family: verdana;
	font-size: 12px;
}

.con_mes .con_mes_sup{
	margin-bottom: 20px;
	padding: 0px;
}
.con_mes .info_pr_der h2{
	margin: auto;
	font-size: 1em;
	padding: 7px 4px;
	/*color: rgb(139 195 74);*/
	color:rgb(98 132 149);
}
.con_mes .info_pr_der h3{
	margin: auto 8px;
	font-size: 14px;
	padding: 13px 4px;
	/*color: rgb(139 195 74);*/
	color: rgb(98 132 149);
}
.con_mes .info_pr_der a{
	color: rgb(98 132 149);
}
.con_mes .info_pr_der a:hover{
	color: rgb(150 150 150);
}
.con_mes_sup, .con_sem_sup{
	height: 44px;
	position: relative;
	display: block;
}
.con_mes .info_pr_izq{
	background:  rgb(32 32 32);
	border-radius: 16px;
}
.con_mes .info_pr_izq>div{
	margin: auto;
	padding: 0px;
}

.con_mes .num_deuda, .con_mes .num_pagado, .con_mes .num_total{
	border-radius: 0px;
	margin: auto;
	padding: 8px;
	display: inline-flex;
	text-shadow: none;
	background:  none;
	font-size: 18px;
}

.con_mes .con_btn_mos_ocu{
	position: absolute;
	bottom: 26px;
	width: 100%;
	text-align: center;
	opacity: 0;
	height: 0px;
}
.con_mes:hover .con_btn_mos_ocu{
	opacity: 1;
}
.con_btn_mos_ocu .btn_mos_ocu{
	background: rgb(32 32 32);
	color: rgb(150,150,150);
	font-size: 16px;
	padding: 4px 16px;
	border-radius: 8px 8px 0px 0px;
}
.con_btn_mos_ocu .btn_mos_ocu:hover{
	background: rgb(54 54 54);
}





/* ESTILOS ZONA DE SEMANAS --------------------*/
.con_semana{
	margin-bottom: 8px;
	background: rgb(45 45 45);
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	padding-bottom: 16px;
}
.con_semana .con_sem_sup{
	height: 64px;
}
.con_semana .con_btn_mos_ocu{
	top: 0px;
	opacity: 0 !important;
}
.con_semana:hover .con_btn_mos_ocu{
	opacity: 1 !important;
}
.con_semana .con_btn_mos_ocu:hover{
	
}
.con_semana .con_btn_mos_ocu .btn_mos_ocu{
	border-radius: 0px 0px 16px 16px;
	font-size: 14px;
}
.con_semana .num_deuda, .con_mes .num_deuda{
	color: rgb(255 160 160);
}
.num_deuda{
	position: relative;
}
.con_semana .num_pagado, .con_mes .num_pagado{
	color: rgb(96 209 100);
}
.con_semana .num_total, .con_mes .num_total{
	color: rgb(116 193 255);
}
.con_semana .num_deuda, .con_semana .num_pagado, .con_semana .num_total{
	background: none;
	text-shadow: none;
	font-size: 16px;
}
.con_semana .info_pr_izq{
	background: none;
	border-radius: 0px;
	right: 0px;
}
.con_semana .info_pr_izq::after{
	content: 'S/';
	position: absolute;
	color: rgb(100 100 100)/*rgb(150 150 150)*/;
	right:100%;
	top: 18px;
	text-align: center;
	font-family: verdana;
	font-size: 12px;
}







.mostrar_producs{
	position: absolute;
	background-color: rgb(195 195 195);
	height: auto;
	width: 100%;
	box-sizing: border-box;
	top: 100%;
	margin: auto;
	left: 0px;
	z-index: 1;
	padding: inherit;
	border-radius: 8px;
}
.mostrar_producs li{

	list-style: none;
	text-align: left;
	background-color: rgb(153 162 169);
	box-sizing: border-box;
	padding: 8px;
	cursor: pointer;
	height: auto;
	width: auto;
	margin-bottom: 2px;
	border-radius: 8px;
	color: white;
	position: relative;
}
.mostrar_producs li:hover{
	background-color: rgb(166 177 185);
}
.sug_precio{
	top: 8px;
	display: block;
	position: absolute;
	right: 8px;
}

.prod_selec{
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
}
.prod_precio{
	max-width: 60px;
}
.con_prod{
	box-sizing: border-box;
	box-shadow: 0px 0px 1px 1px rgb(54 54 54);
	padding: 8px 36px;
	margin-bottom: 4px;
	border-radius: 8px;
	position: relative;
	display: table;
	text-align: left;
	width: 100%;
	/*transition: all ease-out 1s;*/
	color: rgb(179 179 179);
}
.dts_prod{
	box-sizing: border-box;
	width: 50%;
	display: table-cell;
	border-right: 1px solid rgb(54 54 54);
	margin: auto;
	overflow: hidden;
	position: relative;
}
.dts_prod>div{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	position: relative;
}
.dts_prod span{
	box-sizing: border-box;
	position: relative;
	padding: 0 8px;
	display: block;
}

.con_prod:hover{
	background-color: rgb(38 38 38);
}
.con_prod:hover .op_prod{
	opacity: 1;
}





.dts_num_prec{
	min-width: 64px;
}
.dts_dia{
	min-width: 86px;
}
.dts_fecha{
	min-width: 96px;
}
.num_deuda1{
	color: rgb(207 53 53);
}
.num_pagado1{
	color: rgb(76 175 80);
}
.num_total1{
	color: rgb(54 130 191);
}

.num_deuda, .num_pagado, .num_total{
	color: rgb(240 240 240);
	box-sizing: border-box;
	display: inline-block;
	padding: 6px;
	font-family: Roboto; /*Consolas, arial*/
	font-weight: bold;
	border-radius: 8px;
	font-size: 16px;
	text-shadow: 0px 0px 6px rgb(45,45,45);
}
.num_deuda{
	background: rgb(207 53 53);
}
.num_pagado{
	background: rgb(73 159 76); /*rgb(76 175 80)*/
} 
.num_total{
	background: rgb(54 130 191);
}
.num_contador{
	background: rgb(60 60 60);
	color: rgb(200 200 200);
	height: 100%;
	width: 40px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
}




.con_sup_prod{
	text-align: center;
}
.op_prod{
	box-sizing: border-box;
	position: absolute;
	right: 4px;
	bottom: 4px;
	display: table;
	opacity: 0.2;
	transition: opacity linear 0.1s;
}

.btn{
	display: inline-flex;
	margin: 8px;
	padding: 8px 32px;
	color: white;
	text-decoration: none;
	border: none;
	outline: none;
	box-sizing: border-box;
	font-size: 16px;
	cursor: pointer;
}
.btn_cancelar, .btn_guardar{
	display: inline-flex;
	margin: 8px;
	padding: 8px 32px;
	color: white;
	text-decoration: none;
	border: none;
	outline: none;
	box-sizing: border-box;
	font-size: 16px;
	cursor: pointer;
}
.btn_cancelar{
	background-color: rgb(207 53 53);
}
.btn_guardar{
	background-color: rgb(54 130 191);
}
.btn_modificar{
	color: rgb(255 152 0);
}
.btn_prod{
    height: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    border-radius: initial;
    font-size: 24px;
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
	margin: auto 6px;
}




.btn_el{
	color: rgb(207 53 53);
}
.btn_ver{
	color: rgb(205 220 57);/*rgb(76 175 80)*/
}
.btn_pagar{
	color: rgb(205 220 57);
	background: none;
}
.btn_grabar{
	background: orange;
	padding: 8px 32px;
	box-sizing: border-box;
	font-size: 16px;
	color: rgb(75 48 0);
	font-weight: bold;
}
.btn_atras{
	font-size: 18px;
	color: white;
}
.btn_nuevo{
	background-color: rgb(54 130 191);
}
.btn_mas, .btn_menos{
	display: block;
	position: absolute;
	bottom: 4px;
	right: 4px;
	height: 32px;
	width: 32px;
	color: white;
	border-radius: 8px;
}
.btn_mas{
	background-color: green;
}
.btn_menos{
	background-color: red;
}


.fecha_sup{
	font-size: 20px;
}

.con_btn_sup, .con_btn_inf{
	padding: 8px;
	margin: auto;
	margin-bottom: 8px;
}

.con_btn_inf{
	text-align: center;
}
.con_btn_sup{
	position: relative;
	text-align: left;
}
.con_btn_inf>a, .con_btn_sup>a{
	margin: 8px;
	display: inline-block;
}


.num{
	top: 0px;
	position: absolute;
	left: 0px;
	height: 100%;
	width: 32px;
	text-align: center;
	box-sizing: border-box;
	vertical-align: bottom;
	display: table;
}
.num>span{
	height: 100%;
	margin: auto;
	background: rgb(74 131 177);
	display: table-cell;
	vertical-align: middle;
	color: white;
}
.prod_con_btn_ac{
	display: flex;
	margin: auto;
	text-align: center;
}
.prod_con_btn_ac>div{
	margin: auto;
	display: flex;
	width: auto;
	
}








/* SECCION CABECERA */
.con_sec_cab{
	position: sticky;
	top: 0px;
	left: 0px;
	width: 100%;
	background: #202020;
	z-index: 100010 !important;
}
.con_nav{
	position: fixed;
	background: rgba(0,0,0,0.5);
	height: calc(100vh - 48px);
	left: 0%;
	top: 48px;
	width: 100%;
	text-align: right;
	z-index: 10010;
	overflow: hidden;
	opacity: 0;
	overflow-y: auto;
	transition: all ease-in-out .2s;
}
.con_ul{
	min-height: 100%;
	background: #202020;
	display: inline-block;
}
.con_nav ul{
	padding: 16px 8px;
	margin: auto;
	background: #202020;
	position: relative;
	left: 100%;
	transition: all ease-in-out .2s;
}


.con_nav ul>li{
	list-style: none;
	padding: 4px;
}

.con_nav ul>li>a{
	margin: 8px auto;
	display: block;
	border-bottom: 1px solid black;
	padding: 4px;
}
.con_sec_cab a{
	font-size: 16px;
	margin: 4px auto;
	display: inline-block;
	
}
.sec_cab_der{
	position: absolute;
	left: 10px;
	top: 8px;
}
.con_cab{
	min-height: 48px;
	width: 100%;;
}

.sec_cab_izq{
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translate(-0%, -50%);
}
.sec_cab_izq>a{
	margin: auto 8px;
	font-size: 24px;
}
.nav_mostrar{
	opacity: 1;
}
.nav_ocultar{
	opacity: 0;
}
.ul_mostrar{
	left: 0% !important;
}
.ul_ocultar{
	left: 100% !important;
}

.no_scroll{
	overflow: hidden;
}

.max_1280{
	max-width: 1280px;
}

.conMensaje{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	left: 0px;
	top: -100%;
	transition: top ease-in-out 0.1s;
}
.conMensaje>div{
	display: table;
	width: 100%;
	height: 100%;
	position: relative;
}
.conMensaje>div>div{
	position: relative;
	display: table-cell;
	text-align:center;
	height: 100%;
	width: 100%;
	vertical-align: middle;
}
.conMensaje>div>div>div{
	display: inline-block;
	margin: auto;
	padding: 16px;
	background-color: rgb(0,0,0);
	box-sizing: border-box;
	border-radius: 6px;
}

.conMensaje .msjConBtns button{
	display: inline-block;
	margin: 4px;
	padding: 8px 32px;
	color: white;
}
.conMensaje .msjConMsj{
	padding: 8px;
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: bold;
}
.msjBtnAceptar{
	background-color: rgb(73,159,76);
}
.msjBtnNegar{
	background: rgb(207,53,53);
}





@media only screen and (max-width: 768px)  {
	.producto>span, .producto>input, .producto>select{
		display: block;
		margin-bottom: 8px;
	}
}