/* Estilos para el resumen del viaje y cards de vehículos */

.tp-resumen-viaje {
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 4px 24px rgba(30, 41, 59, 0.08);
   padding: 28px 36px 18px 36px;
   margin-bottom: 36px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   border: 1.5px solid #e5e7eb;
   font-size: 1.08em;
   transition: box-shadow 0.2s;
}
.tp-resumen-flex {
   display: flex;
   flex-wrap: wrap;
   gap: 18px 36px;
   align-items: flex-start;
   justify-content: flex-start;
   width: 100%;
   margin-bottom: 8px;
}
.tp-resumen-label {
   font-weight: 500;
   color: #64748b;
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 1em;
   min-width: 120px;
}
.tp-resumen-value {
   font-weight: 600;
   color: #222e50;
   margin-right: 24px;
   font-size: 1.05em;
}
.tp-resumen-row1, .tp-resumen-row2 {
   border-bottom: 1px solid #e5e7eb;
   padding-bottom: 10px;
   margin-bottom: 10px;
}
@media (max-width: 900px) {
   .tp-resumen-viaje {
       padding: 18px 10px 10px 10px;
   }
   .tp-resumen-flex {
       gap: 10px 10px;
   }
}
@media (max-width: 600px) {
   .tp-resumen-viaje {
       padding: 10px 4px 8px 4px;
       font-size: 0.98em;
   }
   .tp-resumen-label, .tp-resumen-value {
       font-size: 0.98em;
   }
}

.tp-card-4cols {
   display: grid;
   grid-template-columns: 1.2fr 1.5fr 1.1fr 0.8fr;
   align-items: flex-start;
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
   margin-bottom: 32px;
   overflow: hidden;
   gap: 0;
}
.tp-card-col {
   padding: 24px 18px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.tp-card-col4 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.tp-card-col:last-child {
   border-right: none;
}
.tp-card-img {
   width: 200px;
   object-fit: cover;
   border-radius: 10px;
   display: block;
   padding: 0px 30px;
   margin-bottom: -24px;
   margin-top: -15px;
}
.tp-card-col-title {
   font-weight: bold;
   font-size: 1.1em;
   margin-bottom: 10px;
}
.tp-card-list {
   margin: 0;
   padding-left: 18px;
}
.tp-card-list li {
   margin-bottom: 4px;
   font-size: 0.98em;
}
.tp-card-tiempo {
   margin-bottom: 10px;
   color: #222;
}
.tp-card-precio {
   font-size: 1.1em;
   margin: 10px 0;
   font-weight: 300;
}
.tp-btn-vehiculo {
   background:#222e50;
   border-radius: 10px;
   width: 100%;
   min-width: 120px;
   max-width: 200px;
   margin: 0 auto;
   white-space: nowrap;
}
.tp-btn-vehiculo:hover {
   background: #222;
}
@media (max-width: 900px) {
   .tp-card-4cols {
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto auto;
   }
   .tp-card-col1, .tp-card-col2 { border-bottom: 1px solid #f0f0f0; }
   .tp-card-col3, .tp-card-col4 { border-bottom: none; }
}
@media (max-width: 600px) {
   .tp-card-4cols {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto auto auto;
   }
   .tp-card-col {
       border-right: none;
       border-bottom: 1px solid #f0f0f0;
   }
   .tp-card-col:last-child {
       border-bottom: none;
   }
   .tp-btn-vehiculo {
       max-width: 100%;
   }
}

.tp-resumen-grid3 {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr;
    gap: 0 36px;
    align-items: flex-start;
    width: 100%;
}
.tp-resumen-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.tp-resumen-col > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.tp-resumen-label {
    font-weight: 500;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1em;
    min-width: 120px;
    margin-bottom: 0;
}
.tp-resumen-value {
    font-weight: 600;
    color: #222e50;
    margin-right: 0;
    font-size: 1.05em;
    margin-left: 4px;
}
@media (max-width: 900px) {
    .tp-resumen-grid3 {
        grid-template-columns: 1fr;
        gap: 18px 0;
    }
}

.tp-resumen-rowflex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 10px;
    width: 100%;
}
.tp-resumen-rowflex .tp-resumen-label,
.tp-resumen-rowflex .tp-resumen-value {
    margin-bottom: 0;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .tp-resumen-rowflex {
        gap: 8px 6px;
    }
}

.tp-banda-sugerido {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: -8px;
    margin-top: 0;
    position: relative;
    z-index: 2;
}
.tp-banda-sugerido .tp-label-sugerido {
    font-size: 16px;
    padding: 4px 14px;
    border-radius: 12px 12px 12px 0;
    box-shadow: 0 2px 8px rgba(0,115,170,0.08);
    margin-left: 0;
    margin-top: 0;
}
.tp-card-pasajeros {
    color: #535353;
    font-weight: 500;
    margin-bottom: 6px;
    margin-top: 2px;
}
.tp-card-col1 .tp-card-pasajeros {
   padding: 0px 35px;
}

.tp-banda-siguiente {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: -8px;
    margin-top: 0;
    position: relative;
    z-index: 2;
}
.tp-banda-siguiente .tp-label-siguiente {
    font-size: 13px;
    padding: 4px 14px;
    border-radius: 12px 12px 12px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-left: 0;
    margin-top: 0;
    background: #e0e0e0;
    color: #333;
}