/*============================================================================== SOAT PROCESO */
.soatBox {
    width:100%;
    height:30px;
    display: grid;
	grid-template-columns:  1fr  1000px     1fr;
    grid-template-areas: "  .    soatFondo  .";
}
.soatFondo {
    grid-area: soatFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  soatFila";
}
.soatFondoGris {
    grid-area: soatFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  soatFila";
    background:#E7E7E7;
}
.soatFila {
    grid-area: soatFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  25px     30px     105px        30px        20px  85px        20px  90px       1fr          110px    20px  78px        30px          20px;
    grid-template-areas: "  soatDia  soatMes  soatAsegura  soatPPrima  .     soatPoliza  .     soatPlaca  soatCliente  soatFin  .     soatAsesor  soatPlanilla  soatNum";
    place-items: center start;
}
.soatDia { 
    grid-area: soatDia;
    display: grid;
    width:100%;
    font-size: 15px;
    place-items: center end;
}
.soatMes { 
    grid-area: soatMes;
    display: grid;
    width:100%;
    font-size: 15px;
}
.soatAsegura { 
    grid-area: soatAsegura;
    display: grid;
    font-size: 16px;
}
.soatAseguraVer { 
    grid-area: soatAsegura;
    display: grid;
    width:100%;
    font-size: 16px;
}
.soatAseguraAnulado { 
    grid-area: soatAsegura;
    display: grid;
    font-size: 16px;
    color:#CCC;
}
.soatAseguraIcon {
    grid-area: soatAsegura;
    display: grid;
    width:100%;
    padding-left: 10px;
}
.soatAsegura,.soatAseguraIcon:hover {
    cursor: pointer;
}
.soatPPrima { 
    grid-area: soatPPrima;
    display: grid;
    width:100%;
    font-size: 15px;
    place-items: center end;
}
.soatPoliza { 
    grid-area: soatPoliza;
    display: grid;
    width:100%;
    font-size: 15px;
    place-items: center end;
}
.soatPolizaAnulado { 
    grid-area: soatPoliza;
    display: grid;
    width:100%;
    font-size: 15px;
    color:#CCC;
}
.soatPlaca { 
    grid-area: soatPlaca;
    display: grid;
    width:100%;
    font-size: 15px;
}
.soatPlacaAnulado { 
    grid-area: soatPlaca;
    display: grid;
    width:100%;
    font-size: 15px;
    color:#BBB;
}
.soatPlaca,.soatPlacaIcon:hover,.soatPoliza {
    cursor: pointer;
}
.soatCliente { 
    grid-area: soatCliente;
    display: grid;
    width:100%;
    font-size: 16px;
    color:#444;
}
.soatCliente {
    cursor: pointer;
}
.soatClienteAnulado { 
    grid-area: soatCliente;
    display: grid;
    width:100%;
    font-size: 16px;
    color:#CCC;
}
.soatFin { 
    grid-area: soatFin;
    display: grid;
    width:100%;
    font-size: 15px;
    place-items: center end;
    color:#630;
}
.soatAsesor { 
    grid-area: soatAsesor;
    display: grid;
    width:100%;
    font-size: 15px;
    color: #444;
}
.soatAsesorVer { 
    grid-area: soatAsesor;
    display: grid;
    width:100%;
    font-size: 16px;
    color: #444;
}
.soatAsesorIcon {
    grid-area: soatAsesor;
    display: grid;
    width:100%;
    padding-left: 10px;
}
.soatAsesor,.soatAsesorIcon:hover {
    cursor: pointer;
}
.soatPlanilla {
    grid-area: soatPlanilla;
    display: grid;
    width:100%;
    place-items: center start;
    cursor: pointer;
}
.soatPlanillaIcon {
    display: grid;
    width:16px;
    height:16px;
    place-items: center;
    color:#EEE;
}
.soatFechas { 
    grid-area: soatFechas;
    display: grid;
    width:100%;
    font-size: 16px;
}
.soatFechasIcon {
    grid-area: soatFechas;
    display: grid;
    width:100%;
}
.soatFechas,.soatFechasIcon:hover {
    cursor: pointer;
}
.soatNum { 
    grid-area: soatNum;
    display: grid;
    width:100%;
    font-size: 10px;
    place-items: center;
    color:#AAA;
}
@media (max-width: 400px) {
}
.mensaje {
    font-size:13px;
    padding: 5px 0px 6px 6px;
}
/*============================================================================= REGISTRAR FUTUROS SOATS*/
.soatRegistroBox {
    width:100%;
    height:30px;
    display: grid;
    grid-template-columns:  1fr  600px     1fr;
    grid-template-areas: "  .    soatRegistroFondo  .";
}
.soatRegistroFondo {
    grid-area: soatRegistroFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  600px;
    grid-template-areas: "  soatRegistroFila";
}
.soatRegistroFondoGris {
    grid-area: soatRegistroFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  600px;
    grid-template-areas: "  soatRegistroFila";
    background:#E7E7E7;
}
.soatRegistroFila {
    grid-area: soatRegistroFila;
    width:100%;
    height:100%;
    display: grid;
    grid-template-columns:  27px         20px         35px          1fr              120px         80px           20px              20px;
    grid-template-areas: "  registroDia  registroMes  registroAnio  registroCliente  registroFono  registroPlaca  registroIconEdit  registroNum";
    place-items: center start;
}
.registroDia { 
    grid-area: registroDia;
    display: grid;
    width:100%;
    font-size: 15px;
    place-items: center end;
    color: #777;
}
.registroMes { 
    grid-area: registroMes;
    display: grid;
    width:100%;
    font-size: 15px;
    font-weight: bold;
    place-items: center;
}
.registroAnio { 
    grid-area: registroAnio;
    display: grid;
    width:100%;
    font-size: 15px;
    place-items: center start;
    color: #AAA;
}
.registroCliente { 
    grid-area: registroCliente;
    display: grid;
    width:100%;
    font-size: 16px;
    color:#444;
}
.registroFono { 
    grid-area: registroFono;
    display: grid;
    width:100%;
    font-size: 16px;
}
.registroPlaca { 
    grid-area: registroPlaca;
    display: grid;
    width:100%;
    font-size: 15px;
}
.registroIconEdit {
    grid-area: registroIconEdit;
    display: grid;
    width:100%;
}
.registroIconEdit:hover {
    cursor: pointer;
}
.registroNum { 
    grid-area: registroNum;
    display: grid;
    width:100%;
    font-size: 10px;
    place-items: center;
    color:#AAA;
}
/*============================================================================= SOAT RENOVAR*/
.soatRenovarBox {
    width:100%;
    height:30px;
    display: grid;
	grid-template-columns:  1fr  1000px     1fr;
    grid-template-areas: "  .    soatRenovarFondo  .";
}
.soatRenovarFondo {
    grid-area: soatRenovarFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  soatRenovarFila";
}
.soatRenovarFondoGris {
    grid-area: soatRenovarFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  1000px;
    grid-template-areas: "  soatRenovarFila";
    background:#E7E7E7;
}
.soatRenovarFila {
    grid-area: soatRenovarFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  140px    120px        95px       110px     1fr          105px       55px       30px           30px;
    grid-template-areas: "  soatFin  soatAsegura  soatPlaca  soatFono  soatCliente  soatAsesor  soatPrima  soatNotasIcon  soatEliminarIcon";
    place-items: center start;
}
.soatRenovarFin { 
    grid-area: soatFin;
    display: grid;
    width:100%;
    font-size: 16px;
    place-items: center start;
    padding-left: 12px;
}
.soatPrima { 
    grid-area: soatPrima;
    display: grid;
    width:100%;
    font-size: 16px;
    place-items: center start;
}
.soatNotasEmpty {
    grid-area: soatNotasIcon;
    display: grid;
    width:100%;
}
.soatNotasFull {
    grid-area: soatNotasIcon;
    display: grid;
    width:100%;
}
.soatNotasEmpty:hover, .soatNotasFull:hover {
    cursor: pointer;
}
.soatEliminarIcon {
    grid-area: soatEliminarIcon;
    display: grid;
    width:100%;
}
.soatEliminarIcon:hover {
    cursor: pointer;
}
.soatRenovarFono { 
    grid-area: soatFono;
    display: grid;
    width:100%;
    font-size: 15px;
}
/*-------------------------------------------------------------------------------MENU SOAT */
.menuSoat {
    cursor: pointer;
    width: 100%;
    height: 44px;
    background-color: #DEEEFF;
    grid-template-rows: 44px;
    grid-template-columns: 15px auto    1fr  48px    48px    48px    48px    48px    48px    48px    48px    48px   10px;
    grid-template-areas: " .    title1  .    icono9  icono8  icono7  icono6  icono5  icono4  icono3  icono2  icono1 .";
    display: grid;
    place-items: center;
}
.title1 { grid-area: title1; font-size:18px; letter-spacing:1px; font-weight:bold; }
.icono1 {  grid-area: icono1; }
.icono1 img { height: 30px; }
.icono2 {  grid-area: icono2; }
.icono2 img { height:30px; }
.icono3 {  grid-area: icono3; }
.icono3 img { height:30px; }
.icono4 {  grid-area: icono4; }
.icono4 img { height:30px; }
.icono5 {  grid-area: icono5; }
.icono5 img { height:28px; }
.icono6 {  grid-area: icono6; }
.icono6 img { height:28px; }
.icono7 {  grid-area: icono7; }
.icono7 img { height:28px; }
.icono8 {  grid-area: icono8; }
.icono8 img { height:28px; }
.icono9 {  grid-area: icono9; }
.icono9 img { height:28px; }
/*------------------------------------------------------------------------------------------------*/
.tooltip {
    position: relative;
    display: inline-block;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 100%; /* Ubica el tooltip justo encima del div */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
/*----------------------------------------------------------------------------------------- POLIZAS POR CLIENTE */
.soatClienteBox {
    width:100%;
    height:30px;
    display: grid;
	grid-template-columns:  1fr  400px     1fr;
    grid-template-areas: "  .    soatClienteFondo  .";
}
.soatClienteFondo {
    grid-area: soatClienteFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  400px;
    grid-template-areas: "  soatClienteFila";
}
.soatClienteFondoGris {
    grid-area: soatClienteFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  400px;
    grid-template-areas: "  soatClienteFila";
    background:#E7E7E7;
}
.soatClienteFila {
    grid-area: soatClienteFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  150px        170px       80px;
    grid-template-areas: "  polizaPlaca  polizaFin  polizaPrima";
    place-items: center start;
}
.polizaPlaca { 
    grid-area: polizaPlaca;
    display: grid;
    width:100%;
    font-size: 16px;
    place-items: center start;
    padding-left: 30px;
    cursor: pointer;
}
.polizaFin { 
    grid-area: polizaFin;
    display: grid;
    width:100%;
    font-size: 16px;
    place-items: center start;
    padding-left: 12px;
}
.polizaPrima { 
    grid-area: polizaPrima;
    display: grid;
    width:100%;
    font-size: 16px;
    place-items: center end;
    padding-right: 30px;
}

/*------------------------------------------------------------------------------------ cambio nombre Choosen File */
.custom-file {
    display: flex;
    align-items: center;
}
#fileInput {
    display: none;
}
#file-chosen {
    margin-left: 10px;
    font-size: 15px;
    color:#06C;
}
/*-------------------------------------------------------------------------------------------------- NOTAS */
.soatNotas {
    font-size: 18px;
    width: 100%;
    height: 100%;
    text-align:left;
}
/*--------------------------------------------------------------------------------------------- UPDATE */
.boxSeccion {
    width:100%;
    height:100%;
    padding:7px;
}
.boxUpdate {
    border: 2px solid #a8f0a5; /* línea verde claro */
    background-color: white; /* fondo verde claro */
    color: black; /* letras negras */
    padding: 15px;
    width: 100%;
    height: auto;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .boxUpdate:hover {
    background-color:rgb(224, 241, 224);
  }
.updateBoton {
    padding-top:50px;
    padding-left:50px;
}
.subirFileBoton {
    background-color: #a8f0a5; /* verde claro */
    border: 2px solid #2e7d32; /* verde oscuro */
    color: black; /* letras negras */
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
.subirFileBoton:hover {
    background-color: #8de58a; /* un poco más oscuro al pasar el mouse */
}
.regresarBoton {
    margin-top:20px;
    margin-left:20px;
    background-color: #a8f0a5; /* verde claro */
    border: 2px solid #2e7d32; /* verde oscuro */
    color: black; /* letras negras */
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
.regresarBoton:hover {
    background-color: #8de58a; /* un poco más oscuro al pasar el mouse */
}
.fileSubido {
    padding-top:20px;
    padding-left:20px;
    font-size:20px;
}