/* ============================================================
   tema.css — colores de AerobusHotel
   ============================================================
   Redefine los colores que usan todas las pantallas. Como el resto
   del sistema los llama por su nombre (var(--noche), var(--lago), etc.),
   cambiándolos acá se repinta la aplicación completa.

   Paleta sacada del diseño:
     Fondo         #F3F6F9      Azul marino   #003060
     Tarjetas      #FFFFFF      Celeste       #29A0E5
     Bordes        #D8E2F0      Naranja       #F07800
     Campos        #E8F0FE      Gris texto    #5B6E88

   Se incluye con:  <link rel="stylesheet" href="tema.css">
   (después del <style> de cada página y antes de movil.css)
   ============================================================ */

:root, body, body.tema-claro {
  --noche:  #F3F6F9;   /* fondo de la página */
  --panel:  #FFFFFF;   /* tarjetas y paneles */
  --linea:  #D8E2F0;   /* bordes y divisiones */
  --nieve:  #003060;   /* texto principal (azul marino) */
  --gris:   #5B6E88;   /* texto secundario */
  --lago:   #29A0E5;   /* acento celeste */
  --ambar:  #F07800;   /* naranja: precios y acciones */
  --rojo:   #D93025;
  --verde:  #1E8E3E;
  /* colores propios del tema */
  --campo:  #E8F0FE;   /* fondo de los campos */
  --marino: #003060;
  --naranja:#F07800;
  --borde-fuerte: #C3D3E8;
  --fondo-lista:  #EDF2F8;
}

body { background: var(--noche); color: var(--nieve); }

/* ---------- Campos de formulario ---------- */
input[type=text], input[type=password], input[type=date], input[type=number],
select, textarea,
#buscador input, .campo input, .campo select {
  background: var(--campo) !important;
  color: var(--marino) !important;
  border: 1px solid var(--campo) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--lago) !important;
  outline: 2px solid rgba(41,160,229,.25);
  outline-offset: 1px;
}
::placeholder { color: #93A5BD; }
label { color: #17263B; }

/* ---------- Botones de acción: naranja ---------- */
#buscador button[type=submit], #buscador #btn,
.btn-enviar, .btn-aceptar, .btn-guardar, .btn-reservar, .btn-grupo, .btn-combi,
.btn-subir, .caja button[type=submit] {
  background: var(--naranja) !important;
  color: #FFFFFF !important;
  border: none !important;
}
#buscador button[type=submit]:hover, .btn-enviar:hover, .btn-aceptar:hover,
.btn-guardar:hover, .btn-reservar:hover, .btn-subir:hover { filter: brightness(1.07); }
.btn-reservar:disabled, .btn-enviar:disabled {
  background: var(--linea) !important; color: var(--gris) !important;
}

/* la flechita de invertir queda celeste */
#buscador #btn-invertir { background: var(--lago) !important; color: #FFFFFF !important; }

/* El contador de arriba es solo para el celular (menú plegado).
   En escritorio se ve al lado de "Panel de reservas". */
.sb-contador-top { display: none !important; }

/* ---------- Logo en el menú lateral ---------- */
/* El logo original mide 1004px de ancho: hay que limitarlo con firmeza
   o se desborda de la barra. */
.sidebar-menu .sb-logo, .sb-logo {
  padding: 0 16px 14px !important;
  max-width: 100%; overflow: hidden;
}
.sidebar-menu .sb-logo picture, .sb-logo picture { display: block; max-width: 100%; }
.sidebar-menu .sb-logo img, .sb-logo img {
  width: 100% !important;
  max-width: 170px !important;
  height: auto !important;
  display: block;
}
.sb-cab .sb-logo { padding: 0 !important; }
.sb-cab .sb-logo img { max-width: 140px !important; }

/* ---------- Encabezado con el logo ---------- */
.marca-logo { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; }
.marca-logo img { height: 52px; width: auto; display: block; }
.marca-logo .bajada { font-size: 13px; color: var(--gris); }

/* ---------- Ajustes de contraste ---------- */
.sidebar-menu { background: var(--panel); border-right: 1px solid var(--linea); }
.sidebar-menu .sb-link { color: #17263B; }
.sidebar-menu .sb-link:hover { background: var(--campo); color: var(--marino); }
.sidebar-menu .sb-link.activo { background: var(--marino); color: #FFFFFF; }
.sidebar-menu .sb-logo, .sb-logo { color: var(--marino); }
.sb-toggle { color: var(--marino) !important; }

.hora, .precio, .combi-horas, .cal-precio, .tramo-precio, .combi-precio { color: var(--marino); }
.precio, .cal-precio, .tramo-precio, .combi-precio, .desde-lbl + * { color: var(--naranja); }
.fila, .card, .caja, .tramo, .calidad { background: var(--panel); }
#filas.agrupado { background: var(--fondo-lista); }
.calidad { background: #FFFFFF; border-color: var(--linea); }
.calidad.elegida { border-color: var(--lago); background: var(--campo); }
.asiento.libre { background: var(--campo); color: var(--marino); border-color: var(--lago); }
.asiento.ocupada { background: #E4E9F0; color: #93A5BD; }
.asiento.sel { background: var(--lago) !important; color: #FFFFFF !important; }
.hueco { background: transparent; }
.micro { background: var(--fondo-lista); border-color: var(--linea); }
.pill-calidades, .combi-escala, .nro-tramo { background: var(--campo); color: var(--marino); border-color: var(--lago); }
.pop-caja, .modal-caja { background: var(--panel); }
#pop-pax { background: rgba(0,48,96,.45); }
.badge.pendiente { background: rgba(240,120,0,.14); color: #A65200; }
.badge.en_proceso { background: rgba(41,160,229,.16); color: #0E6FA8; }
.badge.gestionada { background: rgba(30,142,62,.14); color: #16702F; }
.badge.cancelada  { background: rgba(217,48,37,.12); color: #A5241B; }
.badge.agotado    { background: rgba(240,120,0,.14); color: #A65200; }
.butaca-badge { background: var(--lago); color: #FFFFFF; }
.sb-contador, .sb-contador-top { background: var(--naranja) !important; }

/* El diseño es claro: el botón de tema oscuro ya no aplica */
.sb-tema, #btn-tema { display: none !important; }

/* ============================================================
   LOGO — el original mide 1004x298, así que SIEMPRE hay que
   limitarlo. Estas reglas van al final para tener la última palabra.
   ============================================================ */
.sb-logo, .sidebar-menu .sb-logo, .sb-cab .sb-logo {
  max-width: 100%; overflow: hidden; box-sizing: border-box;
}
.sb-logo picture, .sb-logo source { display: block; max-width: 100%; }
.sb-logo img,
.sidebar-menu .sb-logo img,
.sb-cab .sb-logo img,
picture img[alt="AerobusHotel.com"] {
  display: block !important;
  width: auto !important;
  max-width: 170px !important;
  height: 34px !important;
  object-fit: contain !important;
}

/* ============================================================
   TAMAÑOS: saludo y selector de días
   ============================================================ */

/* Saludo y pregunta más grandes */
h1.saludo { font-size: 46px !important; line-height: 1.08; }
.pregunta { font-size: 26px !important; }

/* Selector de días: pastillas más grandes y legibles */
#selector-dias { margin: 22px auto 0 !important; }
.dias-track { gap: 9px !important; padding-bottom: 8px !important; }
.dia-chip {
  min-width: 96px !important;
  padding: 12px 10px !important;
  border-radius: 12px !important;
  gap: 4px !important;
}
.dia-sem { font-size: 13px !important; letter-spacing: .07em !important; }
.dia-num { font-size: 19px !important; }
.dia-chip.activo { background: var(--marino) !important; border-color: var(--marino) !important; }
.dia-chip.activo .dia-sem, .dia-chip.activo .dia-num { color: #FFFFFF !important; }

/* ============================================================
   CABECERA DE CADA VIAJE — salida y llegada bien claras
   ============================================================ */
.grupo-cab { display: block !important; padding: 13px 16px !important; }
.viaje-empresa { font-size: 17px; font-weight: 600; color: var(--marino); margin-bottom: 10px; }
.viaje-empresa .viaje-clase { font-size: 14px; font-weight: 400; color: var(--gris); }
.viaje-empresa .logo-emp { height: 30px; vertical-align: middle; }

.viaje-cab { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.viaje-punta { min-width: 0; }
.viaje-punta.der { text-align: right; }
.viaje-lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.viaje-hora { font-size: 26px; font-weight: 600; color: var(--marino); line-height: 1.1; }
.viaje-fecha { font-size: 13px; color: var(--gris); }
.viaje-medio { flex: 1; min-width: 70px; text-align: center; padding-top: 16px; }
.viaje-dur { font-size: 12px; color: var(--gris); }
.viaje-linea { height: 2px; background: var(--linea); margin: 5px 0; position: relative; }
.viaje-linea::after {
  content: ''; position: absolute; right: -1px; top: -4px;
  border-left: 7px solid var(--linea);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* pie de las filas de una sola calidad */
.viaje-pie { display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex-wrap: wrap; }
.viaje-precio { font-size: 20px; font-weight: 600; color: var(--naranja); }
.viaje-pie .btn-reservar { width: auto !important; padding: 10px 24px !important; }
.viaje-pie .sin-lugar { color: var(--gris); font-size: 14px; }