/*----------------------------------------------------------------------------------- MENU */
.menuCartas {
    cursor: pointer;
    width: 100%;
    height: 44px;
    background-color: #DEEEFF;
    grid-template-rows: 44px;
    grid-template-columns: 15px auto         1fr  115px    115px    123px    115px    111px    10px;
    grid-template-areas: " .    cartasTitle  .    cartas5  cartas4  cartas3  cartas2  cartas1  .";
    display: grid;
    place-items: center;
}
.cartasTitle { grid-area: cartasTitle; font-size:18px; letter-spacing:1px; font-weight:bold; }
.cartas1 {  grid-area: cartas1;  }
.cartas2 {  grid-area: cartas2;  }
.cartas3 {  grid-area: cartas3;  }
.cartas4 {  grid-area: cartas4;  }
.cartas5 {  grid-area: cartas5;  }

.cartas1, .cartas2, .cartas3, .cartas4, .cartas5,
.cartas1:hover, .cartas2:hover, .cartas3:hover, .cartas4:hover, .cartas5:hover {
    display: grid;
    font-size: 17px;
    text-decoration: none;
    color: inherit;
}
.cartas1:hover, .cartas2:hover, .cartas3:hover, .cartas4:hover, .cartas5:hover {
    font-weight:bold;
}

/*======================================================================================================= CARTAS */
.cartaBox {
    width:100%;
    display: grid;
	grid-template-columns:  1fr  700px     1fr;
    grid-template-areas: "  .    cartaFondo  .";
    min-height:30px;
}
.cartaFondo {
    grid-area: cartaFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  cartaFila";
}
.cartaFondoGris {
    grid-area: cartaFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  700px;
    grid-template-areas: "  cartaFila";
    background:#E7E7E7;
}
.cartaCabecera {
    grid-area: cartaFondo;
    display: grid;
    width:100%;
    height:50%;
    grid-template-columns:  700px;
    grid-template-areas: "  cartaFila";
    background:#08F;
    font-size:11px;
    color:#FFF;
    margin-top:13px;
}
.cartaFilaA {
    grid-area: cartaFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  25px      30px      25px      1fr           50px         50px         50px         50px             30px       30px;
    grid-template-areas: "  cartaNum  cartaDia  cartaMes  cartaCliente  cartaFirma1  cartaFirma2  cartaFirma3  cartaMembretado  cartaEdit  cartaMail";
    place-items: center start;
}
.cartaFilaB {
    grid-area: cartaFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  25px      30px      25px      1fr           10px  100px        50px         50px         50px         50px             30px       30px;
    grid-template-areas: "  cartaNum  cartaDia  cartaMes  cartaCliente  .     cartaPoliza  cartaFirma1  cartaFirma2  cartaFirma3  cartaMembretado  cartaEdit  cartaMail";
    place-items: center start;
}
/*----------------------------------------------- NUMERO */
.cartaNum, .cartaNumCab { 
    grid-area: cartaNum;
    display: grid;
    width:100%;
    place-items: center end;
}
.cartaNum { font-size: 13px; color:#AAA;    }
/*-------------------------------------------------- DIA */
.cartaDia, .cartaDiaCab { 
    grid-area: cartaDia;
    display: grid;
    width:100%;
    place-items: center end;
}
.cartaDia { font-size: 15px; color: #066;}
/*------------------------------------------------- MES */
.cartaMes, .cartaMesCab { 
    grid-area: cartaMes;
    display: grid;
    width:100%;
}
.cartaMes { font-size: 15px; }
/*--------------------------------------------- CLIENTE */
.cartaCliente, .cartaClienteCab { 
    grid-area: cartaCliente;
    display: grid;
    width:100%;
}
.cartaCliente, .cartaCliente:hover { font-size: 16px; color:#004; cursor: pointer;  }
.cartaCliente:hover { text-decoration:none; color:#000;  }
/*--------------------------------------------- POLIZA */
.cartaPoliza, .cartaPolizaCab { 
    grid-area: cartaPoliza;
    display: grid;
    width:100%;
}
.cartaPoliza { font-size: 15px; color:#004; place-items:center end;  }
/*--------------------------------------------- FIRMAS - MEMBRETADO*/
.cartaFirma1, .cartaFirma1Cab {  grid-area: cartaFirma1; }
.cartaFirma2, .cartaFirma2Cab {  grid-area: cartaFirma2; }
.cartaFirma3, .cartaFirma3Cab {  grid-area: cartaFirma3; }
.cartaMembretado, .cartaMembretadoCab {  grid-area: cartaMembretado; }

.cartaPoliza, .cartaPolizaCab,
.cartaFirma1, .cartaFirma1Cab,
.cartaFirma2, .cartaFirma2Cab,
.cartaFirma3, .cartaFirma3Cab,
.cartaMembretado, .cartaMembretadoCab {
    display: grid;
    width:100%;
    place-items:center;
}
.cartaFirma1, .cartaFirma2, .cartaFirma3, .cartaMembretado {    
    font-size: 16px; color:#066;  
}
.cartaFirma1 img, .cartaFirma2 img, .cartaFirma3 img, .cartaMembretado img  { 
    width:16px;
}
.cartaEdit,.cartaEditCab {
    grid-area: cartaEdit;
    display:grid;
    width:100%; height:100%;
    place-items: center;
}
.cartaMail,.cartaMailCab {
    grid-area: cartaMail;
    display:grid;
    width:100%; height:100%;
    place-items: center;
}
.cartaEdit.cartaMail {cursor: pointer;}
.cartaEdit img, .cartaMail img {  width:16px; }
/*---------------------------------------------------------------- Cabecera */
.cartaNumCab, .cartaDiaCab, .cartaMesCab, .cartaClienteCab, .cartaFirma1Cab, 
.cartaFirma2Cab, .cartaFirma3Cab, .cartaMembretadoCab, .cartaEditCab, .cartaPolizaCab, .cartaMailCab { 
    font-size: 11px; color:#9CF;  
}
.cartaClienteCab { place-items:center; }
@media (max-width: 400px) {
}
/*========================================================================================================== BOTON */
.box {
    display: grid;
    place-items:center;
}
.boton {
    display:grid;
    place-items:center;
    background-color: #888;
    width:100px;
    height:35px;
    color: white;
    border: none; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.1s;
  }
  
.boton:hover {
    background-color: #066; /* Cambio de color al pasar el ratón */
  }
  
.boton:active {
    background-color: #066; /* Cambio de color al hacer clic */
    transform: scale(0.98); /* Reduce ligeramente el tamaño para simular presión */
  }
// En lugar de Marquee
.clienteScroll {
    width: 100%;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    animation: scrollText 10s linear infinite;
}

@keyframes scrollText {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* --------------------------------------------------------------------- Modal CartaInM.php */