/*------------------------------------------------------------------------- Ofrendas */
.ofrendaBox {
    width:100%;
    height:50px;
    display: grid;
	grid-template-columns:  70%       30%;
    grid-template-areas: "  columna1  columna2";
}
.columna1 {
    grid-area: columna1;
    display: grid;
    width:100%;
    font-size: 20px;
    place-items: center start;
}

.columna2 {
    grid-area: columna2;
    display:grid;
    width:100%;
    place-items: center end;
    font-size: 16px;
}
.ofrenda-importe {
    width:100%;
    height:40px;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    text-align: right;
    padding-right:5px;
    font-size: 21px;
}
.ofrenda-total {
    width:100%;
    height:40px;
    display:grid;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    text-align: right;
    padding-right:18px;
    font-size: 21px;
    place-items: center end;
}
/*------------------------------------------------------------------- Ofrendas: Otro */
.otroBox {
    width:100%;
    height:50px;
    display: grid;
	grid-template-columns:  1fr    1fr   30%;
    grid-template-areas: "  label  otro  columna3";
}
.label {
    grid-area: label;
    display: grid;
    width:100%;
    font-size: 20px;
    place-items: center start;
}
.otro {
    grid-area: otro;
    display: grid;
    width:100%;
    place-items: center start;
    padding-right:5px;
}
.ofrenda-otro {
    width:100%;
    height:40px;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    padding-left:8px;
    font-size: 20px;
}
.columna3 {
    grid-area: columna3;
    display:grid;
    width:100%;
    place-items: center end;
}
.importe-otro {
    width:100%;
    height:40px;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    text-align: right;
    padding-right:5px;
    font-size: 21px;
}
/*================================================================================================= MIEMBROS */
/*---------------------------------------------------------------- APORTES MIEMBROS -->  A */
.memberBoxA {
    width:100%;
    height:34px;
    display: grid;
	grid-template-columns:  1fr  700px        1fr;
    grid-template-areas: "  .    memberFondoA  .";
}
.memberFondoA {
    grid-area: memberFondoA;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  memberFilaA";
}
.memberFondoGrisA {
    grid-area: memberFondoA;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  memberFilaA";
    background:#EDEDED;
}
.memberFilaA {
    grid-area: memberFilaA;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  90px    75px     75px       75px          75px         75px    75px   80px    40px    40px;
    grid-template-areas: "  fechaA  diezmoA  primiciaA  evangelismoA  asociacionA  pactoA  otroA  totalA  formaA  editA";
    place-items: center end;
}
.fechaA { 
    grid-area: fechaA;
    display: grid;
    width:100%;
    font-size: 17px;
    padding-left:5px;
    place-items:center start;
}
.diezmoA {      grid-area: diezmoA;     }
.primiciaA {    grid-area: primiciaA;   }
.evangelismoA { grid-area: evangelismoA;}
.asociacionA {  grid-area: asociacionA; }
.pactoA {       grid-area: pactoA;      }
.otroA {        grid-area: otroA;       }
.diezmoA,.primiciaA,.evangelismoA,.asociacionA,.pactoA,.otroA { font-size: 18px; color:#0059AA}
.totalA {  grid-area: totalA; font-size: 18px;    }
.formaA {  grid-area: formaA; width:100%; padding-left:25px  }
.formaA:hover {  cursor: pointer;   }
.formaA img { width:18px }
.editA {  grid-area: editA; width:100%; padding-left:15px  }
.editA img { width:16px }
.editA:hover {  cursor: pointer;   }
.ceroA {  font-size:18px; color:#CDCDCD; }

@media (max-width: 400px) {
    .memberBoxA {
        height:36px;
        grid-template-columns:  100%;
        grid-template-areas: "  memberFondoA";
    }
    .memberFondoA {
        grid-template-columns:  100%;
        background:#EDEDED;
    }
    .memberFondoGrisA {
        grid-template-columns:  100%;
    }
    .memberFilaA {
        grid-template-columns:  110px   1fr     60px    60px;
        grid-template-areas: "  fechaA  totalA  formaA  editA";
    }
    .fechaA { 
        font-size: 18px;
        padding-left:18px;
    }
    .diezmoA {      display: none;  }
    .primiciaA {    display: none;  }
    .evangelismoA { display: none;  }
    .asociacionA {  display: none;  }
    .pactoA {       display: none;  }
    .otroA {        display: none;  }
    .totalA {  font-size: 19px;    }
    .formaA {  padding-left:33px  }
    .formaA img { width:23px; }
    .editA {  padding-left:21px  }
    .editA img { width:21px; }
}
/*---------------------------------------------------------------------------- LEYENDA MIEMBROS --> B */
.memberTitB {
    width:100%;
    height:20px;
    display: grid;
	grid-template-columns:  1fr  700px        1fr;
    grid-template-areas: "  .    memberFilaB   .";
}
.memberFilaB {
    grid-area: memberFilaB;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:90px  75px    75px      92px         78px        55px    75px   80px    40px    40px;
    grid-template-areas:"fechaB diezmoB primiciaB evangelismoB asociacionB pactoB  otroB  totalB  formaB  editB";
    place-items: center end;
    font-weight: bold;
    background:#222;
    color:#DDD;
}
.fechaB { 
    grid-area: fechaB;
    display: grid;
    width:100%;
    font-size: 12px;
    padding-left:6px;
    place-items:center start;
}
.diezmoB {      grid-area: diezmoB;     font-size: 12px;    }
.primiciaB {    grid-area: primiciaB;   font-size: 12px;    }
.evangelismoB { grid-area: evangelismoB; font-size: 12px;   }
.asociacionB {  grid-area: asociacionB; font-size: 12px;    }
.pactoB {       grid-area: pactoB;      font-size: 12px;    }
.otroB {        grid-area: otroB;       font-size: 12px;    }
.totalB {       grid-area: totalB;      font-size: 12px;    }
@media (max-width: 400px) {
    .memberTitB {
        grid-template-columns:  100%;
        grid-template-areas: "  memberFilaB";
    }
    .memberFilaB {
        grid-template-columns: 100px   1fr     60px    60px;
        grid-template-areas:"  fechaB  totalB  formaB  editB";
    }
    .fechaB { 
        padding-left:20px;
    }
    .diezmoB {      display: none;  }
    .primiciaB {    display: none;  }
    .evangelismoB { display: none;  }
    .asociacionB {  display: none;  }
    .pactoB {       display: none;  }
    .otroB {        display: none;  }
    .ceroA {         display: none;  }
}
/*================================================================================================= IGLESIA */
/*----------------------------------------------------------------------- APORTES IGLESIA -->  C */
.churchBoxC {
    width:100%;
    height:34px;
    display: grid;
	grid-template-columns:  1fr  700px        1fr;
    grid-template-areas: "  .    churchFondoC  .";
}
.churchFondoC {
    grid-area: churchFondoC;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  churchFilaC";
}
.churchFondoGrisC {
    grid-area: churchFondoC;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  churchFilaC";
    background:#EDEDED;
}
.churchFilaC {
    grid-area: churchFilaC;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  90px    80px  80px  80px  80px  80px      80px       90px    40px;
    grid-template-areas: "  fechaC  dtsC  psC   esC   jmvC  ofrendaC  colaboraC  totalC  editC";
    place-items: center end;
}
.dtsC,.psC,.esC,.jmvC,.ofrendaC,.colaboraC { font-size: 18px; color:#0059AA}
.totalC {  grid-area: totalC; font-size: 18px;    }
.fechaC { 
    grid-area: fechaC;
    display: grid;
    width:100%;
    font-size: 17px;
    padding-left:5px;
    place-items:center start;
}
.editC {  grid-area: editC; width:100%; padding-left:15px  }
.editC img { width:16px }
.editC:hover {  cursor: pointer;   }
.ceroC {  font-size:18px; color:#CDCDCD; }

@media (max-width: 400px) {
    .churchBoxC {
        height:36px;
        grid-template-columns:  100%;
        grid-template-areas: "  churchFondoC";
    }
    .churchFondoC {
        grid-template-columns:  100%;
        background:#EDEDED;
    }
    .churchFondoGrisC {
        grid-template-columns:  100%;
    }
    .churchFilaC {
        grid-template-columns:  110px   1fr     60px;
        grid-template-areas: "  fechaC  totalC  editC";
    }
    .fechaC { 
        font-size: 18px;
        padding-left:18px;
    }
    .dtsC { display: none;  }
    .psC {  display: none;  }
    .esC {  display: none;  }
    .jmvC { display: none;  }
    .ofrendaC {  display: none;  }
    .colaboraC { display: none;  }
    .totalC {  font-size: 19px;  }
    .ceroC {  display: none;  }
    .editC {  padding-left:21px  }
    .editC img { width:21px; }
}
/*----------------------------------------------------------------------- LEYENDA CHURCH --> D */
.churchTitD {
    width:100%;
    height:20px;
    display: grid;
	grid-template-columns:  1fr  700px        1fr;
    grid-template-areas: "  .    churchFilaD   .";
}
.churchFilaD {
    grid-area: churchFilaD;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns: 90px    100px  65px  85px  65px  85px      105px       60px    55px;
    grid-template-areas:"  fechaD  dtsD   psD   esD   jmvD  ofrendaD  colaboraD  totalD  editD";
    place-items: center end;
    font-weight: bold;
    background:#222;
    color:#DDD;
}
.fechaD { 
    grid-area: fechaD;
    display: grid;
    width:100%;
    font-size: 12px;
    padding-left:6px;
    place-items:center start;
}
.dtsD { grid-area: dtsD; font-size: 12px;    }
.psD {  grid-area: psD;  font-size: 12px;    }
.esD {  grid-area: esD;  font-size: 12px;   }
.jmvD { grid-area: jmvD; font-size: 12px;    }
.ofrendaD {  grid-area: ofrendaD;  font-size: 12px;    }
.colaboraD { grid-area: colaboraD; font-size: 12px;    }
.totalD {    grid-area: totalD;    font-size: 12px;    }
@media (max-width: 400px) {
    .churchTitD {
        grid-template-columns:  100%;
        grid-template-areas: "  churchFilaD";
    }
    .churchFilaD {
        grid-template-columns: 100px   1fr     60px;
        grid-template-areas:"  fechaD  totalD  editD";
    }
    .fechaD { 
        padding-left:20px;
    }
    .dtsD { display: none;  }
    .psD {  display: none;  }
    .esD {  display: none;  }
    .jmvD { display: none;  }
    .ofrendaD {  display: none;  }
    .colaboraD { display: none;  }
    .ceroD {     display: none;  }
}
/*========================================================================================  CHECK MIEMBROS */
/*---------------------------------------------------------------------------- LEYENDA */
.checkMemberTitE {
    width:100%;
    height:20px;
    display: grid;
	grid-template-columns:  1fr  700px        1fr;
    grid-template-areas: "  .    checkMemberFilaE   .";
}
.checkMemberFilaE {
    grid-area: checkMemberFilaE;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns: 70px    130px    60px    60px      60px         60px        60px    60px   60px    40px    40px;
    grid-template-areas: " fechaE  nombreE  diezmoE primiciaE evangelismoE asociacionE pactoE  otroE  totalE  formaE  editE";
    place-items: center end;
    font-weight: bold;
    background:#222;
    color:#DDD;
}
.fechaE { 
    grid-area: fechaE;
    display: grid;
    width:100%;
    font-size: 12px;
    padding-left:6px;
    place-items:center start;
}
.nombreE { 
    grid-area: nombreE;
    display: grid;
    width:100%;
    font-size: 12px;
    place-items:center start;
}
.diezmoE {      grid-area: diezmoE;     font-size: 12px;    }
.primiciaE {    grid-area: primiciaE;   font-size: 12px;    }
.evangelismoE { grid-area: evangelismoE; font-size:12px;   }
.asociacionE {  grid-area: asociacionE; font-size: 12px;    }
.pactoE {       grid-area: pactoE;      font-size: 12px;    }
.otroE {        grid-area: otroE;       font-size: 12px;    }
.totalE {       grid-area: totalE;      font-size: 12px;    }
@media (max-width: 400px) {
    .checkMemberTitE {
        grid-template-columns:  100%;
        grid-template-areas: "  checkMemberFilaE";
    }
    .checkMemberFilaE {
        grid-template-columns: 60px    1fr      80px     50px    50px;
        grid-template-areas:"  fechaE  nombreE  totalE  formaE  editE";
    }
    .fechaE { 
        padding-left:10px;
    }
    .diezmoE {      display: none;  }
    .primiciaE {    display: none;  }
    .evangelismoE { display: none;  }
    .asociacionE {  display: none;  }
    .pactoE {       display: none;  }
    .otroE {        display: none;  }
    .ceroE {        display: none;  }
}
/*---------------------------------------------------------------- CHECK APORTES MIEMBROS -->  F */
.checkMemberBoxF {
    width:100%;
    height:34px;
    display: grid;
	grid-template-columns:  1fr  700px              1fr;
    grid-template-areas: "  .    checkMemberFondoF  .";
}
.checkMemberFondoF {
    grid-area: checkMemberFondoF;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  checkMemberFilaF";
}
.checkMemberFondoGrisF {
    grid-area: checkMemberFondoF;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  checkMemberFilaF";
    background:#EDEDED;
}
.checkMemberFilaF {
    grid-area: checkMemberFilaF;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  70px    130px      60px     60px       60px          60px         60px    60px   80px    30px    30px;
    grid-template-areas: "  fechaF  nombreF  diezmoF  primiciaF  evangelismoF  asociacionF  pactoF  otroF  totalF  formaF  editF";
    place-items: center end;
}
.fechaF { 
    grid-area: fechaF;
    display: grid;
    width:100%;
    font-size: 15px;
    padding-left:5px;
    place-items:center start;
}
.nombreF { 
    grid-area: nombreF;
    display: grid;
    width:100%;
    font-size: 16px;
    place-items:center start;
    overflow: hidden;       
    text-overflow: ellipsis;
    white-space: nowrap;
}
.diezmoF {      grid-area: diezmoF;     }
.primiciaF {    grid-area: primiciaF;   }
.evangelismoF { grid-area: evangelismoF;}
.asociacionF {  grid-area: asociacionF; }
.pactoF {       grid-area: pactoF;      }
.otroF {        grid-area: otroF;       }
.diezmoF,.primiciaF,.evangelismoF,.asociacionF,.pactoF,.otroF { font-size: 15px; color:#0059AA}
.totalF {  grid-area: totalF; font-size: 16px;    }
.formaF {  grid-area: formaF; width:100%; padding-left:10px  }
.formaF:hover {  cursor: pointer;   }
.formaF img { width:18px }
.editF {  grid-area: editF; width:100%; padding-left:10px  }
.editF img { width:16px }
.editF:hover {  cursor: pointer;   }
.ceroF {  font-size:18px; color:#CDCDCD; }

@media (max-width: 400px) {
    .checkMemberBoxF {
        height:36px;
        grid-template-columns:  100%;
        grid-template-areas: "  checkMemberFondoF";
    }
    .checkMemberFondoF {
        grid-template-columns:  100%;
        background:#EDEDED;
    }
    .checkMemberFondoGrisF {
        grid-template-columns:  100%;
    }
    .checkMemberFilaF{
        grid-template-columns:  60px    1fr      80px    50px    50px;
        grid-template-areas: "  fechaF  nombreF  totalF  formaF  editF";
    }
    .fechaF { 
        font-size: 16px;
        padding-left:8px;
    }
    .diezmoF {      display: none;  }
    .primiciaF {    display: none;  }
    .evangelismoF { display: none;  }
    .asociacionF {  display: none;  }
    .pactoF {       display: none;  }
    .otroF {        display: none;  }
    .ceroF {        display: none;  }
    .totalF {  font-size: 19px;  }
    .formaF {  padding-left:20px  }
    .formaF img { width:23px; }
    .editF {  padding-left:10px  }
    .editF img { width:21px; }
}
/*=========================================================================================================*/
/*---------------------------------------------------------------------------------- MENSAJES */
.mensaje {
    display:grid;
    place-items:center;
    font-size: 20px;
    color:#AAA;
}
/*--------------------------------------------------------------------------- FORMA PAGO */
.radio-option {
    display: flex;
    align-items: center; /* Alinea verticalmente el input y el texto */
    margin-bottom: 10px; /* Espacio entre cada opción */
}
.radio-option input[type="radio"] {
    margin-right: 8px; /* Espacio entre el radio button y el texto */
}
.radio-option label {
    font-size: 18px;
}
/*----------------------------------------------------------------------- NOMBRE MIEMBRO */
.show-miembro, .show-miembro:hover {
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size:24px;
    color:#9CF;
    text-decoration:none;
    padding-bottom:7px;
}
.show-nombres, .show-nombres:hover {
    cursor: pointer;
    display: none;
    place-items: center;
    font-size:24px;
    color:#9CF;
    text-decoration:none;
    padding-bottom:7px;
}
.show-apellidos, .show-apellidos:hover {
    cursor: pointer;
    display: none;
    place-items: center;
    font-size:24px;
    color:#9CF;
    text-decoration:none;
}
@media (max-width: 400px) {
    .show-miembro, .show-miembro:hover {
        display: none;
    }
    .show-nombres, .show-nombres:hover {
        display: grid;
    }
    .show-apellidos, .show-apellidos:hover {
        display: grid;
    }
}