/*================================================================================== DATOS REPORTE */
.reporteBox {
    width:100%;
    height:34px;
    display: grid;
	grid-template-columns:  1fr  400px        1fr;
    grid-template-areas: "  .    reporteFila  .";
        margin-top:8px;
    margin-bottom:8px;
}
.reporteFila {
    grid-area: reporteFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  135px        10px  1fr;
    grid-template-areas: "  reporteItem  .     reporteInput";
}
.reporteItem { 
    grid-area: reporteItem;
    display: grid;
    font-size: 15px;
    color: #777;
    place-items: center end;
}
.reporteInput { 
    grid-area: reporteInput;
    display: grid;
    width: 100%;              /* Ancho del rectángulo */
    height: 100%;              /* Alto del rectángulo */
    background-color: #f0f0f0; /* Color de fondo del rectángulo */
    border-radius: 10px;       /* Esquinas redondeadas */
    justify-content: center;   /* Centrar horizontalmente el input */
    align-items: center;       /* Centrar verticalmente el input */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle relieve */
    border: 1px solid #ccc;    /* Borde del rectángulo */
    font-size:15px;
    padding-left:5px;
}
.submitBox {
    grid-area: reporteFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  100%;
    grid-template-areas: "  submitReporte";
    place-items:center;
}
.submitReporte {
    grid-area: submitReporte;
    display:grid; 
    width: 100px;
    place-items:center;
    font-size:15px;
    margin-top:8px;
    margin-bottom:8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle relieve */
    border: 1px solid #ccc;    /* Borde del rectángulo */
    background-color: #f0f0f0; /* Color de fondo del rectángulo */
    border-radius: 10px;       /* Esquinas redondeadas */
}
/*================================================================================ CABECERA PAGOS */
.cabeceraBox {
    width:100%;
    height:90px;
    display: grid;
	grid-template-columns:  1fr  500px          1fr;
    grid-template-areas: "  .    cabeceraAsesor  .";
    margin-top:15px;
    margin-bottom:15px;
}
.cabeceraAsesor {
    grid-area: cabeceraAsesor;
    display: grid;
    width:100%;
    height:90px;
    grid-template-rows:     30px  30px  30px;
    grid-template-columns:  120px   170px        210px;
    grid-template-areas: "  label1  asesorName   asesorName"
                         "  label2  fechaInicio  asesorIcon"
                         "  label3  fechaFin     asesorIcon";
    place-items:center start;
}
.label1 {  grid-area: label1;  }
.label2 {  grid-area: label2;  }
.label3 {  grid-area: label3;  }
.label1,.label2,.label3 {
    width:100%;
    height:100%;
    font-size:14px;
    color:#777;
    display:grid;
    place-items:center end;
}
.asesorName {
    grid-area: asesorName;
    font-size: 16px;
    font-weight:bold;
    padding-left:15px;
}
.fechaInicio {  grid-area: fechaInicio;  }
.fechaFin    {  grid-area: fechaFin;  }
.fechaInicio,.fechaFin {
    display:grid;
    width:100%;
    height:100%;
    padding-left:15px;
    place-items:center start;
    font-size:16px;
    color: #009;
}
.asesorIcon {
    grid-area: asesorIcon;
    display:grid;
    place-items:center start;
    width: 100%;
    height: 100%;
}
.asesorIcon img {
    width: 30px;
}
/*============================================================================== ASESOR PAGOS TOTALES*/
.asesorBoxTotal {
    width:100%;
    height:34px;
    display: grid;
    grid-template-rows:  34px;
	grid-template-columns:  1fr  1000px           1fr;
    grid-template-areas: "  .    asesorFilaTotal  .";
    padding-top:15px;
}
.asesorFilaTotal {
    grid-area: asesorFilaTotal;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  1fr    110px      40px         90px     30px;
    grid-template-areas: "  .      itemTotal  coinTotal  comTotal  vacio";
    place-items: center end;
}
.coinTotal {
    grid-area: coinTotal;
    display: grid;
    width:100%;
    height:100%;
    font-size: 15px;
    color:#888;
    border-bottom: 1px solid gray;
    place-items: center end;
}
.vacio {
    grid-area: vacio;
    display: grid;
    width:100%;
    height:100%;
    border-bottom: 1px solid gray;
}
.itemTotal { 
    grid-area: itemTotal;
    display: grid;
    width:100%;
    height:100%;
    font-size: 15px;
    place-items: center end;
    color:#06C;
    border-bottom: 1px solid gray;
}
.comTotal { 
    grid-area: comTotal;
    display: grid;
    width:100%;
    height:100%;
    font-size: 15px;
    place-items: center end;
    color:#036;
    border-bottom: 1px solid gray;
}
/*===================================================================================================== ASESOR PAGOS */
.asesorBox {
    width:100%;
    height:30px;
    display: grid;
	grid-template-columns:  1fr  1000px       1fr;
    grid-template-areas: "  .    asesorFondo  .";
}
.asesorFondo {
    grid-area: asesorFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  asesorFila";
}
.asesorFondoGris {
    grid-area: asesorFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  asesorFila";
    background:#E7E7E7;
}
.asesorFila {
    grid-area: asesorFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  25px       25px       80px           1fr            15px  85px         80px          85px       30px          45px         70px        65px        65px             65px       30px;              /*      30px;*/
    grid-template-areas: "  asesorDia  asesorMes  asesorAsegura  asesorCliente  .     asesorPlaca  asesorPoliza  asesorIni  asesorMoneda  asesorPrima  asesorNeta  asesorTasa  asesorComBroker  asesorCom  asesorNum";   /*    asesorNum    ";*/
    place-items: center start;
} 
.asesorDia {
    grid-area: asesorDia;
    display: grid;
    width:100%;
    font-size: 14px;
    place-items: center end;
}
.asesorMes { 
    grid-area: asesorMes;
    display: grid;
    width:100%;
    font-size: 14px;
}
.asesorAsegura { 
    grid-area: asesorAsegura;
    display: grid;
    font-size: 14px;
}
.asesorCliente { 
    grid-area: asesorCliente;
    display: grid;
    width:100%;
    font-size: 15px;
    color:#555;
}
.asesorPlaca { 
    grid-area: asesorPlaca;
    display: grid;
    width:100%;
    font-size: 14px;
    color:#066;
}
.asesorPoliza { 
    grid-area: asesorPoliza;
    display: grid;
    width:100%;
    font-size: 14px;
    place-items: center end;
    color:#55F;
}
.asesorIni { 
    grid-area: asesorIni;
    display: grid;
    width:100%;
    font-size: 14px;
    place-items: center end;
    color:#630;
}
.asesorFin { 
    grid-area: asesorFin;
    display: grid;
    width:100%;
    font-size: 13px;
    place-items: center end;
    color:#630;
}
.asesorUso { 
    grid-area: asesorUso;
    display: grid;
    width:100%;
    font-size: 16px;
}
.asesorMoneda { 
    grid-area: asesorMoneda;
    display: grid;
    width:100%;
    height:100%;
    font-size: 13px;
    color:#AAA;
    font-weight:bold;
    place-items: center end;
}
.asesorPrima { 
    grid-area: asesorPrima;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#06C;
}
.asesorCom { 
    grid-area: asesorCom;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#06C;
}
.asesorNeta { 
    grid-area: asesorNeta;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#39F;
}
.asesorTasa { 
    grid-area: asesorTasa;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#C30;
}
.asesorComBroker { 
    grid-area: asesorComBroker;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#066;
}
.asesorCom { 
    grid-area: asesorCom;
    display: grid;
    width:100%;
    font-size: 14px;
    place-items: center end;
    color:#036;
}
.asesorNum { 
    grid-area: asesorNum;
    display: grid;
    width:100%;
    font-size: 10px;
    place-items: center end;
    padding-right:5px;
    color:#AAA;
}
/*============================================================================== REPORET ASESOR TOTALES*/
.asesorTotalBox {
    width:100%;
    height:32px;
    display: grid;
    grid-template-rows:  32px;
	grid-template-columns:  1fr  1000px           1fr;
    grid-template-areas: "  .    asesorTotalFila  .";
    padding-top:15px;
}
.asesorTotalFila {
    grid-area: asesorTotalFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  1fr    100px      100px     90px        90px     30px;
    grid-template-areas: "  .      asesPrima  asesNeta  asesBroker  asesCom  vacio";
    place-items: center end;
    border:1px solid gray; 
}
.asesCom { 
    grid-area: asesCom;
    display: grid;
    width:100%;
    font-size: 14px;
    place-items: center end;
    color:#036;
}
.asesBroker { 
    grid-area: asesBroker;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#066;
}
.asesNeta { 
    grid-area: asesNeta;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#39F;
}
.asesPrima { 
    grid-area: asesPrima;
    display: grid;
    width:100%;
    height:100%;
    font-size: 14px;
    place-items: center end;
    color:#06C;
}
/*===================================================================================================== REPORTE LISTA */
.listaBox {
    width:100%;
    height:30px;
    display: grid;
	grid-template-columns:  1fr  1000px       1fr;
    grid-template-areas: "  .    listaFondo  .";
}
.listaFondo {
    grid-area: listaFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  listaFila";
}
.listaFondoGris {
    grid-area: listaFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  listaFila";
    background:#E7E7E7;
}
.listaFila {
    grid-area: listaFila;
    width:100%;
    height:100%;
    display: grid;
    grid-template-columns: 25px       28px       73px           1fr            85px         80px          85px       30px          45px         70px        40px        65px             65px       30px;
    grid-template-areas:  "asesorDia  asesorMes  asesorAsegura  asesorCliente  asesorPlaca  asesorPoliza  asesorIni  asesorMoneda  asesorCom  asesorNeta  asesorTasa  asesorComBroker  asesorCom  asesorNum";
    place-items: center start;
}

@media (max-width: 400px) {
}
.mensaje {
    font-size:13px;
    padding: 5px 0px 6px 6px;
}