.bus-front {
        background: #333;
        color: white;
        text-align: center;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px 5px 0 0;
    }
    
    .bus-seats {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        background: #f0f0f0;
        padding: 10px;
        border-radius: 0 0 0px 0px;
    }
    
    .seat {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
    }
    
    /* Asientos disponibles */
    .seat[data-status="available"] {
        background: #cccccc;
        color: #000000;
    }
    
    /* Asientos ocupados */
    .seat[data-status="occupied"] {
        background: #777;
        color: white;
        cursor: not-allowed;
    }
    
    /* Asiento seleccionado */
    .seat.selected {
        background: blueviolet;
        color: #fff;
        box-shadow: 0 0 5px rgba(33, 150, 243, 0.8);
    }
    
    /* Pasillo */
    .aisle {
        grid-column: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-weight: bold;
    }
    
    .row-label {
        grid-column: 1 / span 5;
        text-align: center;
        font-weight: bold;
        margin: 0px 0;
    }
    
    .seat-info {
        padding: 15px;
        background: #e3f2fd;
        border-radius: 5px;
    }
    
    .selected-seats-list {
        margin-top: 15px;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .btn-continuar {
        display: block;
        width: 100%;
        padding: 12px;
        margin-top: 15px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }
    
    .btn-continuar:disabled {
        background: #cccccc;
        cursor: not-allowed;
    }
    
    .badge {
        margin-right: 5px;
    }
    
    .total-price {
        font-weight: bold;
        font-size: 1.2em;
        margin-top: 10px;
    }
    
    /* Nuevos estilos para el formulario de pasajeros */
    .passenger-form {
        display: none;
        background: #f8f9fa;
        border-radius: 5px;
        border: 1px solid #ddd;
    }
    
    .passenger-form h4 {
        margin-bottom: 10px;
        color: #333;
    }
    
    .passenger-item {
        margin-bottom: 15px;
        padding: 5px;
        background: white;
        border-radius: 5px;
        border: 1px solid #dee2e6;
    }
    
    .passenger-item label {
        font-weight: bold;
        display: block;
        margin-bottom: 2px;
    }
    
    .passenger-item input {
        width: 100%;
        padding: 5px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }
    
    .form-actions {
        margin-top: 20px;
        text-align: right;
    }
    
    .btn-secondary {
        background: #6c757d;
        color: white;
    }
    
    .btn-primary {
        background: #0d6efd;
        color: white;
    }



    
    /* Estilos para las tarjetas de viaje */
    .trip-card {
        border-left: 4px solid #0d6efd;
        transition: transform 0.2s;
    }
    
    .trip-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .trip-time {
        font-size: 16px;
    }
    
    
    .trip-route {
        line-height: 1.4;
    }
    
    .trip-price .price {
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #0d6efd;
        margin-bottom: 5px;
    }
    
    .btn-select {
        width: 100%;
    }
    
    .trip-seats .available {
        font-size: 24px;
        font-weight: bold;
        color: #198754;
    }
    
    .search-card {
        border-top: 3px solid #0d6efd;
    }

    .passenger-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.passenger-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-remove-passenger {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    /* Estilos para la barra de progreso */
    .steps-progress {
        margin-bottom: 5px;
        
    }
    
    .steps {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        width: 100%;
    }
    
    .step {

        text-align: center;
        position: relative;
        z-index: 0;
        width: 25%;
        
    }
    

    
    .step-title {
        font-size: clamp(10px, 3vw, 15px);
        color: #000;
        padding-left: 10px;
        padding-right: 10px;
        background-color:#ccc;
        
    }
    
    .step.active .step-title {
        color: #fff;
        font-weight: bold;
        background-color: darkblue;
        
    }
    
/*
--- DE CARGA DE PAGINA ESTILOS 
*/
    
    /* Transición suave para el cambio de fondo */
  body {
      transition: background-image 2s ease-in-out !important;
       background-size: cover;
  ;
        background-attachment: fixed;
        background-position: center;
  }
  
  /* Overlay para mejorar legibilidad del contenido */
  .content-overlay {
      position: relative;
      z-index: 1;
  }
  
  .image-preloader {
      position: absolute;
      opacity: 0;
      z-index: -9999;
      width: 1px;
      height: 1px;
      overflow: hidden;
  }
  /* Contador de tiempo para el cambio de fondo */
  .bg-timer {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 14px;
      z-index: 999;
  }
  
      .custom-datalist {
          position: relative;
          display: inline-block;
          width: 100%;
      }
      
      .suggestions-container {
          position: absolute;
          border: 1px solid #d4d4d4;
          border-radius: 4px;
          z-index: 99;
          top: 100%;
          left: 0;
          right: 0;
          background: #f2f2ff;
          max-height: 200px;
          overflow-y: auto;
          display: none;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          color: #000; /* Asegura que el texto sea negro */
      }
      
      .suggestions-container div {
          padding: 10px 15px;
          cursor: pointer;
          border-bottom: 1px solid #eee;
          transition: all 0.2s;
          color: #000; /* Texto negro para los items */
      }
      
      .suggestions-container div:hover {
          background-color: #f5f5f5;
          color: #000; /* Texto negro al hacer hover */
      }
      
      .suggestions-container div.active {
          background-color: #007bff;
          color: white; /* Texto blanco para el item activo */
      }
      
      .suggestions-container div.highlighted {
          background-color: #e9f5ff;
          color: #000; /* Texto negro para las coincidencias resaltadas */
      }
      
      /* Estilo para el texto resaltado dentro de las sugerencias */
      .suggestions-container div span.highlighted {
          font-weight: bold;
          color: #0056b3;
          background-color: #fff3cd;
      }
  
      
  
  
          #splash-screen {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: #4A90E2;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              z-index: 9999;
              color: white;
              font-family: Arial, sans-serif;
          }
  
          #app-content {
              display: none;
              padding: 20px;
              text-align: center;
          }
  
          .slogan {
              margin-top: 20px;
              font-size: 1.5em;
              font-weight: bold;
          }
  
          .logo-spinner {
              margin-bottom: 30px;
              width: 100px;
          }
  
          /* Estilos para TU spinner personalizado */
          .spinner {
              margin: 20px auto;
              width: 50px;
              height: 40px;
              text-align: center;
              font-size: 10px;
          }
  
          .spinner > div {
              background-color: white; /* Cambiado a blanco para contrastar con el fondo azul */
              height: 100%;
              width: 6px;
              display: inline-block;
              animation: sk-stretchdelay 1.2s infinite ease-in-out;
          }
  
          .spinner .rect2 { animation-delay: -1.1s; }
          .spinner .rect3 { animation-delay: -1.0s; }
          .spinner .rect4 { animation-delay: -0.9s; }
          .spinner .rect5 { animation-delay: -0.8s; }
  
          @keyframes sk-stretchdelay {
              0%, 40%, 100% { 
                  transform: scaleY(0.4);
              }  20% { 
                  transform: scaleY(1.0);
              }
          }


/*
*--------------Estilos de Pie de Pagina
*/



.w3-bar .w3-button {
    padding: 16px;
  }
  .ret-hack{
    color: red;
  }
  .footer{
    color: white;
    background-color: #222;
  }
  
  .logo {
              font-size: 45px;
              font-weight: bold;
              text-transform: uppercase;
              letter-spacing: 2px;
              
          }
          
  
          /* Theme btn*/
  
          .btn2 {
          color: white;
          border: none;
          padding: 15px 30px;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
          border-radius: 0;
          text-transform: uppercase;
          letter-spacing: 1px;
          transition: all 0.3s;
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
          }
          .btn-red{
              background-color: #860a05;
          }
  
          .btn2:hover {
              background-color: #555;
              box-shadow: 0 6px 8px rgba(0,0,0,0.15);
              transform: translateY(-2px);
          }
  
          footer {
              background-color: var(--nation-dark);
              color: #000;
          }
          
          .footer-links a {
              color: #fff;
              text-decoration: none;
              transition: color 0.3s;
          }
          
          .footer-links a:hover {
              color: #ccc;
          }
          
          
          :root {
              --nation-primary: #1a5fb4;
              --nation-secondary: #e95420;
              --nation-dark: #0d1b2a;
              --nation-light: #f8f9fa;
          }