/*==============================================================================  */
.titleBox{
    display:grid;
    place-items: center;
    font-size:19px;
    padding-top:10px;
    padding-bottom:10px;
    letter-spacing: 1px;
    word-spacing: 2px;
}
/*------------------------------------------------------------------------ BOX 500 */
.box500 {
    width:100%;
    height:30px;
    display: grid;
    grid-template-columns:  1fr  500px     1fr;
    grid-template-areas: "  .    fondo500  .";
}
.fondo500 {
    grid-area: fondo500;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  500px;
    grid-template-areas: "  fila500";
}
.fondoGris500 {
    grid-area: fondo500;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  500px;
    grid-template-areas: "  fila500";
    background:#E7E7E7;
}
/*------------------------------------------------------------------------ BOX 600 */
.box600 {
    width:100%;
    height:30px;
    display: grid;
    grid-template-columns:  1fr  600px     1fr;
    grid-template-areas: "  .    fondo600  .";
}
.fondo600 {
    grid-area: fondo600;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  600px;
    grid-template-areas: "  fila600";
}
.fondoGris600 {
    grid-area: fondo600;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  600px;
    grid-template-areas: "  fila600";
    background:#E7E7E7;
}
/*--------------------------------------------------------------------------------- SIN PLANILLA */
.sinPlanFila {
    grid-area: fila600;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  40px       25px     30px     90px       1fr          60px;
    grid-template-areas: "  aPlanilla  planDia  planMes  planPlaca  planCliente  planPrima";
    place-items: center start;
}
/*--------------------------------------------------------------------------------- CON PLANILLA */
.conPlanFila {
    grid-area: fila600;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  40px           25px     30px     90px       1fr          60px;
    grid-template-areas: "  desdePlanilla  planDia  planMes  planPlaca  planCliente  planPrima";
    place-items: center start;
}
.planDia { 
    grid-area: planDia;
    display: grid;
    width:100%;
    font-size: 15px;
    place-items: center end;
}
.planMes { 
    grid-area: planMes;
    display: grid;
    width:100%;
    font-size: 15px;
}
.planPlaca { 
    grid-area: planPlaca;
    display: grid;
    width:100%;
    font-size: 15px;
}
.planCliente { 
    grid-area: planCliente;
    display: grid;
    width:100%;
    font-size: 16px;
}
.planPrima { 
    grid-area: planPrima;
    display: grid;
    width:100%;
    font-size: 16px;
    place-items:center end;
    padding-right:10px;
}
.aPlanilla {
    grid-area: aPlanilla;
    display: grid;
    width:100%;
    place-items: center;
}
.aPlanilla:hover {
    cursor: pointer;
}
.desdePlanilla {
    grid-area: desdePlanilla;
    display: grid;
    width:100%;
    place-items: center;
}
.desdePlanilla:hover {
    cursor: pointer;
}

@media (max-width: 400px) {
}
.mensaje {
    font-size:13px;
    padding: 5px 0px 6px 6px;
}
/*----------------------------------------------------------------------------------- MENU */
.menuPlanilla {
    cursor: pointer;
    width: 100%;
    height: 44px;
    background-color: #DEEEFF;
    grid-template-rows: 44px;
    grid-template-columns: 15px auto       1fr  40px   40px   30px  40px   40px   10px;
    grid-template-areas: " .    titlePlan  .    plan4  plan3  .     plan2  plan1  .";
    display: grid;
    place-items: center;
}
.titlePlan { grid-area: titlePlan; font-size:18px; letter-spacing:1px; font-weight:bold; }
.plan1 {  
    grid-area: plan1;
    display:grid;
    place-items:center;
}
.plan1 img { height: 30px; }

.plan2 {  
    grid-area: plan2;
    display:grid;
    place-items:center;
}
.plan2 img { height: 30px; }

.plan3 {  
    grid-area: plan3;
    display:grid;
    place-items:center;
}
.plan3 img { height: 30px; }
.plan4 {  
    grid-area: plan4;
    display:grid;
    place-items:center;
}
.plan4 img { height: 30px; }

/*-------------------------------------------------------------------------- Nueva Planilla */
.planTitle{
    display:grid;
    place-items: center;
    font-size:19px;
    padding-top:15px;
    letter-spacing: 1px;
    word-spacing: 2px;
}
hr {
    color:#$AAA;
    width:600px;
}
/*------------------------------------------------------------------- Planillas por Pagar PP */
.planillaXpagar {
    grid-area: fila600;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  30px     30px     110px     50px           1fr           60px      30px;
    grid-template-areas: "  planDia  planMes  planilla  planillaColor  planDetalle  planPrima  planFechas";
    place-items: center start;
}
.planillaColor {
    grid-area: planillaColor;
    display: grid;
    width:100%;
    place-items: center center;
    cursor: pointer;
}
.planillaColorIcon {
    display: grid;
    width:16px;
    height:16px;
    place-items: center center;
    color:#EEE;
}
.planilla { 
    grid-area: planilla;
    display: grid;
    width:100%;
    font-size: 17px;
    letter-spacing:1px;
    color:#603;
}
.planilla:hover { 
    cursor: pointer;
    text-decoration:none;
    font-size: 17px;
    color:#603;
}
.planDetalle { 
    grid-area: planDetalle;
    display: grid;
    width:100%;
    font-size: 17px;
}
.planVence {
    grid-area: planVence;
    display: grid;
    width:100%;
    place-items:center;
}
.planVence:hover {
    cursor: pointer;
}
.planFechas {
    grid-area: planFechas;
    display: grid;
    width:100%;
    place-items:center;
}
.planFechas:hover {
    cursor: pointer;
}
.pagoMix {
    grid-area: planFechas;
    display: grid;
    width:100%;
    place-items:center;
}
.pagoMix:hover {
    cursor: pointer;
}
/*------------------------------------------------------------------------------------ TITULO */
.planTitle {
    width:100%;
    display: grid;
	grid-template-columns:  1fr  117px     100px    100px  100px      50px     1fr;
    grid-template-areas: "  .    planText  planVar  .      primaText  primaVar .";
}
.planText {
    grid-area: planText;
    width:100%;
    color:#999;
    font-size: 18px;
}
.planVar {
    grid-area: planVar;
    width:100%;
    font-size: 18px;
}
.primaText {
    grid-area: primaText;
    width:100%;
    color:#999;
    font-size: 17px;   
}
.primaVar {
    grid-area: primaVar;
    display:grid;
    width:100%;
    font-size: 18px;
    place-items:center end;
}
/*------------------------------------------------------------------------------------------- LEYENDA */
.leyenda {
    width:100%;
    display: grid;
	grid-template-columns:  1fr  Auto        100px  Auto         1fr;
    grid-template-areas: "  .    leyEdicion  .      leyEliminar  .";
}
.leyEdicion {
    grid-area: leyEdicion;
    font-size: 15px;
    color:#999;
}
.leyEdicion:hover{
    text-decoration:none;
    font-size: 15px;
    color:#999;
}
.leyEliminar {
    grid-area: leyEliminar;
    font-size: 15px;
    color:#999;
}
.leyEliminar:hover{
    text-decoration:none;
    font-size: 15px;
    color:#999;
}