.body {
	font-family: Roboto;
}
/*============================================================================================================================ Menu  */
.m_menu {
	height:30px; 
	width:100%;
	display: grid;
	grid-template-columns:  10px  auto      1fr  auto     20px  40px   auto     40px  1fr  40px   40px   40px    10px;
    grid-template-areas: "  .     m_titulo  .    m_fecha  .     menos  periodo  mas   .    m_new  m_ple  m_home  .";
	background:#FFF8DC; 
}


.m_titulo {
	grid-area: m_titulo;
	display: grid;
}
a.m_titulo:link, a.m_titulo:visited {
    justify-items: start;
    align-items: center;
	font-size:22px;
	font-weight: bold;
	text-decoration: none;
	color:#512C10;
}
.m_fecha  { 
    grid-area: m_fecha;
    width: 100%;
    font-size:16px; 
    color:#d7e7bf;
    display: grid;
    justify-items: center;
    align-items: center;
}
.m_fecha input {
    border: 0;
    height: 27px;
    background:#FFF8DC; 
    font-weight: 300;
    font-size: 17px;
    text-align: right;
	font-weight: 400;
}
.periodo {
	grid-area: periodo;
    width: 100%;
	color:#800000;
	font-weight: 600;
	font-size:18px; 
	line-height:150%;
	text-decoration: none;
	display: grid;
    justify-items: center;
    align-items: center;
}
.menos {
	grid-area: menos;
	display: grid;
    justify-items: center;
    align-items: center;
}
.menos img { height: 18px; width: 15px; }
.mas {
	grid-area: mas;
	display: grid;
    justify-items: center;
    align-items: center;
}
.mas img { height: 18px; width: 15px;}
.m_new {
	grid-area: m_new;
	display: grid;
    justify-items: center;
    align-items: center;
}
.m_new img  { height: 22px; }
.m_ple {
	grid-area: m_ple;
	display: grid;
    justify-items: center;
    align-items: center;
}
.m_ple img  { height: 22px; }
.m_orden {
	grid-area: m_orden;
	display: grid;
    justify-items: center;
    align-items: center;
}
.m_orden img { height: 20px; }

.m_home {
	grid-area: m_home;
	display: grid;
    justify-items: center;
    align-items: center;
}
.m_home img { height: 20px; }
@media screen and (max-width: 790px) {
	/*---------------------------------------------------- MENU */
	.m_menu {
		height:60px; 
		width:100%;
		display: grid;
		grid-template-rows:  30px  30px;
		grid-template-columns:  8px  auto      1fr  40px   auto     40px;
		grid-template-areas: "  .    m_titulo  .    m_new  m_ple    m_home"
							 "  .    m_fecha   .    menos  periodo  mas";
	}
	.m_titulo {
		font-family: Roboto;
		font-size:20px;
		font-weight: bold;
		letter-spacing: 0px;
	}
}
/*===================================================================================================================== VER COMPRAS  */
.c_compra_box {
	height:28px; 
	width:100%;
	display: grid;
	grid-template-columns:  1fr auto 1fr;
	grid-template-rows:  	27px 1px;
    grid-template-areas: ". c_compra   ."
						 ". c_division .";
}
.c_compra {
	grid-area: c_compra;
	height:27px; 
	width:100%;
	display: grid;
	grid-template-columns:  35px     290px     130px     85px   25px  40px;
    grid-template-areas:   "c_fecha  c_provee  cnumero  c_total fact  id_compra";
}
.id_compra {
	grid-area: id_compra;
	height:27px; 
	display: grid;
    justify-items: center;
    align-items: center;
	font-size:10px;
	color: #F93;
	padding: 0px 7px;
}
.c_fecha {
	grid-area: c_fecha;
	display: grid;
    justify-items: center;
    align-items: center;
	font-size:14px;
	font-weight: 500;
	color: #F93;
}
.c_provee {
	grid-area: c_provee;
	display: grid;
    justify-items: start;
    align-items: center;
	font-size:17px;
	font-weight: 400;
	white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.cnumero {
	grid-area: cnumero;
	width: 100%;
	height:27px; 
	display: grid;
	grid-template-columns:  1fr 37px    87px  1fr;
    grid-template-areas:   ".   cserie  cnum  .";
	background:#EEE;
}
.cserie {
	grid-area: cserie;
	width: 100%;
	height:27px; 
	display: grid;
	justify-items: start;
    align-items: center;
	font-size:14px;
    color:rgb(87, 44, 1);
}
.cnum {
	grid-area: cnum;
	height:27px; 
	display: grid;
	justify-items: end;
    align-items: center;
	background:#EEE;
	font-size:14px;
	font-weight: 400;
	color:#555;
}
.c_total {
	grid-area: c_total;
	font-size:15px;
	font-weight: 500;
	display: grid;
    justify-items: end;
    align-items: center;
	padding: 0px 5px 0px 0px;
}
.fact {
	grid-area: fact;
    width: 100%;
	height: 27px;
	display: grid;
    justify-items: center;
    align-items: center;
	background:#EFC;
}
/*------------------------------------------------------------------------------------------------------ 790px */
@media screen and (max-width: 790px) {
	.c_compra_box {
		grid-template-columns:  100%;
		grid-template-rows:  	27px 1px;
		grid-template-areas: "c_compra"
							 "c_division";
	}
	.c_compra {
		grid-template-columns:  30px     1fr       75px     25px  35px;
		grid-template-areas:   "c_fecha  c_provee  c_total  fact  id_compra";
	}
	.cnumero {
		grid-area: cnumero;
		display: none;
	}
}
/*------------------------------*/
.c_division {
	grid-area: c_division;
    height: 1px;
    width: 100%;
	display: grid;
    justify-items: center;
    align-items: center;
    background:#AAA;
}
/*============================================================================================================= LEYENDA */
.leyenda_box {
	height:28px; 
	width:100%;
	display: grid;
    align-items: center;
	grid-template-columns: 1fr  40px   150px     1fr;
	grid-template-rows: 30px 30px 30px;
    grid-template-areas: "  .    icono1  leyenda1  ."
						 "	.    icono2  leyenda2  ."
						 "	.    icono3  leyenda3  .";
	padding: 20px 0px 0px 0px;
	font-family: Roboto;
	font-weight: 500;
	font-size:15px;
	color:#158AD0;
}
.icono1 {	grid-area: icono1;	}	.icono1 img {	height: 20px;	}
.icono2 {	grid-area: icono2;	}	.icono2 img {	height: 20px;	}
.icono3 {	grid-area: icono3;	}	.icono3 img {	height: 20px;	}
.leyenda1 {	grid-area: leyenda1;	}
.leyenda2 {	grid-area: leyenda2;	}
.leyenda3 {	grid-area: leyenda3;	}
.mensaje{
	text-align: center;
	font-size: 18px;
}
.respuesta {
	height:30px; 
	width:100%;
	display: grid;
	grid-template-columns:  1fr  120px    10px  120px     1fr;
	grid-template-rows: 30;
    grid-template-areas: "  .    resp_si  .     resp_no  .";
}
.resp_si {
	grid-area: resp_si;
}
.resp_no {
	grid-area: resp_no;
}
.icon_resp {
	display: grid;
	width:100px;
    justify-items: center; align-items: center;
    font-size:20px; letter-spacing: 1px; 
    background-color: #EEE;
    border: 2px solid #999;
	border-radius: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 5px;
    text-align: center;
}