/* =========================================================
   TVT Ultra Modern UI (Bootstrap 5 Skin)
   Archivo: ui_modern_tvt.css
   Cárgalo DESPUÉS de Bootstrap y tus CSS para que sobrescriba
========================================================= */

/* -----------------------------
   0) Fonts (usa system + Inter si existe)
------------------------------ */
:root{
  --tvt-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* -----------------------------
   1) Design Tokens
------------------------------ */
:root{
  --tvt-bg: #f6f8fc;
  --tvt-surface: rgba(255,255,255,.72);
  --tvt-surface-2: rgba(255,255,255,.88);
  --tvt-border: rgba(2,6,23,.10);
  --tvt-border-2: rgba(2,6,23,.14);

  --tvt-text: #0f172a;
  --tvt-muted: rgba(15,23,42,.62);

  --tvt-primary: #1668e3;
  --tvt-primary-2: #0b5394;
  --tvt-ring: rgba(22,104,227,.20);

  --tvt-shadow-sm: 0 10px 24px rgba(2,6,23,.08);
  --tvt-shadow-md: 0 18px 60px rgba(2,6,23,.12);
  --tvt-shadow-lg: 0 30px 90px rgba(2,6,23,.16);

  --tvt-radius-sm: 12px;
  --tvt-radius: 16px;
  --tvt-radius-lg: 22px;

  --tvt-blur: 16px;
  --tvt-trans: .18s ease;

  --tvt-control-h: 46px;
}

/* -----------------------------
   2) Base / Reset ligero
------------------------------ */
html, body{
  font-family: var(--tvt-font);
  color: var(--tvt-text);
  background: radial-gradient(900px 520px at 15% 10%, rgba(22,104,227,.18), transparent 60%),
              radial-gradient(860px 520px at 90% 20%, rgba(0, 200, 255, .12), transparent 60%),
              radial-gradient(900px 520px at 50% 90%, rgba(255, 186, 0, .10), transparent 55%),
              var(--tvt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{ box-sizing: border-box; }

/* containers un poquito más “premium” en desktop */
@media (min-width: 1400px){
  .container{ max-width: 1280px; }
}

/* -----------------------------
   3) Glass Surface helper
------------------------------ */
.tvt-glass{
  background: var(--tvt-surface);
  border: 1px solid var(--tvt-border);
  box-shadow: var(--tvt-shadow-sm);
  backdrop-filter: blur(var(--tvt-blur));
  -webkit-backdrop-filter: blur(var(--tvt-blur));
  border-radius: var(--tvt-radius-lg);
}

/* -----------------------------
   4) Buttons (Bootstrap override suave)
------------------------------ */
.btn{
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform var(--tvt-trans), box-shadow var(--tvt-trans), filter var(--tvt-trans);
}

.btn:active{
  transform: translateY(0) scale(.99);
}

.btn-primary{
  background: linear-gradient(135deg, var(--tvt-primary) 0%, #0f5fe0 45%, #0b5394 100%) !important;
  border: 1px solid rgba(2,6,23,.10) !important;
  box-shadow: 0 14px 30px rgba(22,104,227,.24);
}

.btn-primary:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(22,104,227,.30);
}

.btn-outline-secondary{
  border-radius: 12px !important;
  border-color: rgba(2,6,23,.14) !important;
  color: rgba(15,23,42,.75) !important;
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(10px);
}

.btn-outline-secondary:hover{
  background: rgba(255,255,255,.85) !important;
  transform: translateY(-1px);
  box-shadow: var(--tvt-shadow-sm);
}

/* tus botones custom */
.view-more-btn,
.no-more-btn,
#filters-button{
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: .92rem !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(2,6,23,.10) !important;
  box-shadow: var(--tvt-shadow-sm) !important;
  color: rgba(15,23,42,.82) !important;
}

.view-more-btn:hover,
.no-more-btn:hover,
#filters-button:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--tvt-shadow-md) !important;
  color: var(--tvt-primary) !important;
}

/* -----------------------------
   5) Tabs (nav-tabs) ultra moderno
------------------------------ */
.nav-tabs{
  border-bottom: 0 !important;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-tabs .nav-link{
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 600;
  color: rgba(15,23,42,.70) !important;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(2,6,23,.08) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  backdrop-filter: blur(12px);
  transition: transform var(--tvt-trans), box-shadow var(--tvt-trans), background var(--tvt-trans);
}

.nav-tabs .nav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.82);
  box-shadow: var(--tvt-shadow-sm);
}

.nav-tabs .nav-link.active{
  color: var(--tvt-primary) !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(22,104,227,.22) !important;
  box-shadow: 0 18px 44px rgba(22,104,227,.18);
}

/* contenedor del tab content como “card” */
.tab-content{
  margin-top: 10px;
}

.bg-white.shadow{
  background: var(--tvt-surface-2) !important;
  border: 1px solid var(--tvt-border) !important;
  box-shadow: var(--tvt-shadow-md) !important;
  border-radius: 0 0 var(--tvt-radius-lg) var(--tvt-radius-lg) !important;
  backdrop-filter: blur(var(--tvt-blur));
  -webkit-backdrop-filter: blur(var(--tvt-blur));
}

/* -----------------------------
   6) Form Controls (Bootstrap + select2)
------------------------------ */
.form-control,
select.form-control,
input.form-control{
  height: var(--tvt-control-h);
  border-radius: 14px !important;
  border: 1px solid rgba(2,6,23,.14) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  padding: 10px 12px !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: rgba(15,23,42,.86) !important;
  transition: box-shadow var(--tvt-trans), border-color var(--tvt-trans), transform var(--tvt-trans);
}

.form-control:focus{
  border-color: rgba(22,104,227,.38) !important;
  box-shadow: 0 0 0 6px var(--tvt-ring), 0 18px 40px rgba(22,104,227,.12) !important;
  transform: translateY(-1px);
}

::placeholder{
  color: rgba(15,23,42,.45) !important;
  font-weight: 500;
}

/* input-group */
.input-group{
  border-radius: 16px;
}

.input-group .dropdown-button{
  border-radius: 14px !important;
}

/* Date icon */
.calendar-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(15,23,42,.55);
  pointer-events: none;
}

/* -----------------------------
   6.1) Select2 Skin (Bootstrap-like + glass)
------------------------------ */
.select2-container{
  width: 100% !important;
}

.select2-container .select2-selection--single{
  height: var(--tvt-control-h) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(2,6,23,.14) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  display:flex !important;
  align-items:center !important;
  padding: 0 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: rgba(15,23,42,.86) !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: var(--tvt-control-h) !important;
  right: 10px !important;
}

.select2-dropdown{
  border-radius: 16px !important;
  border: 1px solid rgba(2,6,23,.12) !important;
  box-shadow: var(--tvt-shadow-lg) !important;
  overflow: hidden;
}

.select2-results__option{
  padding: 10px 12px !important;
  font-size: .92rem !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(22,104,227,.10) !important;
  color: var(--tvt-text) !important;
}

/* disabled select2 */
.select2-container--default.select2-container--disabled .select2-selection--single{
  background: rgba(2,6,23,.04) !important;
  color: rgba(15,23,42,.35) !important;
}

/* -----------------------------
   7) Layout "home" (sidebar + results)
------------------------------ */
.home{
  margin-top: 10px;
}

.home-weapper{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}

/* sidebar */
.home-left{
  position: sticky;
  top: 86px; /* debajo del navbar */
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: var(--tvt-shadow-md);
  border-radius: var(--tvt-radius-lg);
  backdrop-filter: blur(var(--tvt-blur));
  -webkit-backdrop-filter: blur(var(--tvt-blur));
  overflow: hidden;
}

.home-left .profile{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(2,6,23,.08);
}

.home-left .mini-headign{
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(15,23,42,.85);
}

.pages{
  padding: 12px 14px 6px;
}

#filters-button{
  width: calc(100% - 28px);
  margin: 10px 14px 14px;
  padding: 10px 14px;
}

/* results */
.home-center-wrapper{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: var(--tvt-radius-lg);
  box-shadow: var(--tvt-shadow-md);
  backdrop-filter: blur(var(--tvt-blur));
  -webkit-backdrop-filter: blur(var(--tvt-blur));
  padding: 14px;
}

/* responsive layout */
@media (max-width: 992px){
  .home-weapper{
    grid-template-columns: 1fr;
  }
  .home-left{
    position: relative;
    top: auto;
  }
}

/* -----------------------------
   8) Member bar (tu barra de miembros)
------------------------------ */
.bv-memberbar-wrap{
  margin-top: 10px;
}

.bv-memberbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: var(--tvt-radius-lg);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: var(--tvt-shadow-md);
  backdrop-filter: blur(var(--tvt-blur));
  -webkit-backdrop-filter: blur(var(--tvt-blur));
}

.bv-memberbar__left{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width: 0;
}

.bv-memberbar__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: var(--tvt-primary);
  background: rgba(22,104,227,.08);
  border: 1px solid rgba(22,104,227,.16);
}

.bv-memberbar__headline{
  font-weight: 650;
  font-size: .95rem;
  color: rgba(15,23,42,.82);
}

.bv-memberbar__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
  background: linear-gradient(135deg, var(--tvt-primary) 0%, var(--tvt-primary-2) 100%);
  color: #fff;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 12px 26px rgba(22,104,227,.22);
  transition: transform var(--tvt-trans), box-shadow var(--tvt-trans);
}

.bv-memberbar__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(22,104,227,.28);
}

.bv-memberbar__btn--ghost{
  background: rgba(255,255,255,.75);
  color: var(--tvt-primary);
  border: 1px solid rgba(22,104,227,.18);
  box-shadow: 0 12px 24px rgba(2,6,23,.08);
}

@media (max-width: 576px){
  .bv-memberbar{
    flex-direction: column;
    align-items: stretch;
  }
  .bv-memberbar__btn{
    width: 100%;
  }
}

/* -----------------------------
   9) Promo fixed image + promo card modern
------------------------------ */
.promo-fixed-image{
  border-radius: 16px;
  box-shadow: var(--tvt-shadow-lg);
  border: 1px solid rgba(2,6,23,.10);
}
/* =========================================================
   PROMOTION CARD — Light glass + mejor contraste
========================================================= */

/* Card completa */
.promotion-card{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(2,6,23,.10) !important;
  color: rgba(15,23,42,.90) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 24px 80px rgba(2,6,23,.18) !important;
  border-radius: 18px !important;
}

/* Título y textos dentro */
.promotion-card .promotion-title{
  color: rgba(15,23,42,.92) !important;
}

.promotion-card .promotion-date,
.promotion-card .promotion-price{
  color: rgba(15,23,42,.78) !important;
}

/* Imagen con borde suave */
.promotion-card .promotion-image{
  border-radius: 14px !important;
  border: 1px solid rgba(2,6,23,.08) !important;
}

/* Botón principal (promotion-button) con contraste fuerte */
.promotion-card #promotion-button{
  background: linear-gradient(135deg, var(--tvt-primary) 0%, var(--tvt-primary-2) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(22,104,227,.28) !important;
  font-weight: 850 !important;
  letter-spacing: .01em;
  text-decoration: none !important;
}

/* Hover/active correctos (sin scale raro) */
.promotion-card #promotion-button:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.02);
}

.promotion-card #promotion-button:active{
  transform: translateY(0) scale(.99) !important;
}

/* Botón cerrar: oscuro para contrastar sobre card claro */
.promotion-card .close-btn{
  color: rgba(15,23,42,.65) !important;
  opacity: 1 !important;
}
.promotion-card .close-btn:hover{
  color: var(--tvt-primary) !important;
}



/* Estilo de la tarjeta */
.promotion-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(100%); 
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    z-index: 2; 
}

.promotion-card.show {
    transform: translateX(0); 
    opacity: 1; 
}

.promotion-card-content {
    text-align: center;
}

.promotion-title {
    font-size: 1.5rem;
    font-weight: bold;
    
}

.promotion-date {
    font-size: 16px;
    margin-bottom: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* close */
.close-btn{
  color: rgba(255,255,255,.9) !important;
  opacity: .9;
}

/* -----------------------------
   10) Overlay (processing)
------------------------------ */
#processing-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999999 !important;
}

#processing-overlay .overlay-content{
  width: min(520px, calc(100% - 32px));
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  box-shadow: var(--tvt-shadow-lg);
  padding: 18px 18px 14px;
  text-align: center;
}

#overlay-message{
  margin-top: 8px;
  color: rgba(15,23,42,.75);
  font-weight: 600;
}

/* spinner más moderno */
#processing-overlay .spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(22,104,227,.25);
  border-top-color: var(--tvt-primary);
  margin: 12px auto 6px;
  animation: tvtSpin .85s linear infinite;
}
@keyframes tvtSpin{
  to{ transform: rotate(360deg); }
}

/* -----------------------------
   11) Sliders controls (flechas)


/* -----------------------------
   12) “Edit Search” & “Sort & Filter” buttons (mobile top buttons)
------------------------------ */
.open-filter-modal-search,
#toggle-filter-button{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 750 !important;
  box-shadow: var(--tvt-shadow-md) !important;
  border: 1px solid rgba(2,6,23,.10) !important;
}

.open-filter-modal-search{
  background: rgba(255,255,255,.80);
  color: rgba(15,23,42,.86);
}

#toggle-filter-button{
  background: linear-gradient(135deg, var(--tvt-primary), var(--tvt-primary-2)) !important;
  border: 0 !important;
}

/* contenedor de esos botones */
.container-movile{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 10px;
}
@media (max-width: 576px){
  .container-movile{
    flex-direction: column;
    align-items: stretch;
  }
  .open-filter-modal-search, #toggle-filter-button{
    width: 100%;
  }
}

/* -----------------------------
   13) Cards / headings polish
------------------------------ */
.encabezado-promotion{
  font-weight: 850;
  letter-spacing: .01em;
  color: rgba(15,23,42,.88);
  margin: 10px 0 8px;
}

/* los “guide-pack-title” tipo sección */
.guide-pack-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  color: rgba(15,23,42,.88);
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
}

/* -----------------------------
   14) Paginator modern
------------------------------ */
.paginator{
  gap: 8px;
}
.paginator button{
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: var(--tvt-shadow-sm);
  font-weight: 650;
}
.paginator button:hover{
  box-shadow: var(--tvt-shadow-md);
  transform: translateY(-1px);
}

/* -----------------------------
   15) Fixes móviles / spacing
------------------------------ */
#formulario-busqueda{
  padding-top: 56px !important;
}

@media (max-width: 576px){
  .bg-white.shadow{
    padding: 16px !important;
    border-radius: 0 0 18px 18px !important;
  }

  .nav-tabs{
    gap: 8px;
  }

  .nav-tabs .nav-link{
    padding: 10px 12px !important;
    font-size: .92rem;
  }
}

/* -----------------------------
   16) Your Groups & Meetings card: mantener look premium
------------------------------ */
.tvt-gm-card{
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(var(--tvt-blur));
  -webkit-backdrop-filter: blur(var(--tvt-blur));
  border-radius: var(--tvt-radius-lg) !important;
  box-shadow: var(--tvt-shadow-lg) !important;
}

.tvt-gm-title__text{
  color: var(--tvt-primary-2) !important;
}

.tvt-gm-title__line{
  background: linear-gradient(90deg, transparent, var(--tvt-primary-2), transparent);
}

/* -----------------------------
   17) Reduce “font-size demasiado grande” en varios lugares
------------------------------ */
p, li, a, span{
  font-size: 0.95rem;
}

small, .small{
  font-size: .86rem !important;
  color: var(--tvt-muted);
}

h1,h2,h3,h4,h5{
  letter-spacing: -.01em;
}

h5{
  font-weight: 800;
}

/* -----------------------------
   18) Accesibilidad: focus visible
------------------------------ */
:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 6px var(--tvt-ring);
  border-radius: 12px;
}

/* -----------------------------
   19) Scrollbars (suave)
------------------------------ */
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.35);
}
*::-webkit-scrollbar-track{
  background: rgba(255,255,255,.35);
}



/* =========================================================
   TVT — Ocultar filtros/resultados hasta que exista búsqueda
   Objetivo:
   - No mostrar .home-weapper, sidebar ni panel resultados
   - Se activa cuando #search-results-cruceros tenga contenido
========================================================= */

/* Estado inicial: todo oculto */
.home-weapper{
  display: none !important;
}

/* Oculta también el botón "Close Filters" si lo tienes */
.home-left,
.home-center-wrapper,
#filters-button{
  display: none !important;
}

/* Opcional: oculta el bloque de paginación vacío */
#paginator{
  display: none;
}

/* =========================================================
   Activación automática cuando existan resultados
   (Chrome/Edge/Safari recientes soportan :has)
========================================================= */
@supports selector(body:has(#search-results-cruceros *)) {

  /* Si el contenedor tiene cualquier nodo dentro => ya hay resultados */
  body:has(#search-results-cruceros *:not(script)):has(#search-results-cruceros :not(:empty)) .home-weapper{
    display: grid !important; /* tu layout moderno usa grid */
  }

  body:has(#search-results-cruceros *:not(script)):has(#search-results-cruceros :not(:empty)) .home-left,
  body:has(#search-results-cruceros *:not(script)):has(#search-results-cruceros :not(:empty)) .home-center-wrapper,
  body:has(#search-results-cruceros *:not(script)):has(#search-results-cruceros :not(:empty)) #filters-button{
    display: block;
  }

  /* Paginación solo si hay resultados */
  body:has(#search-results-cruceros *:not(script)):has(#search-results-cruceros :not(:empty)) #paginator{
    display: flex;
  }
}

/* =========================================================
   Fallback (si :has no existe):
   - Tu JS puede añadir class="has-results" al body cuando pinte resultados
========================================================= */
body.has-results .home-weapper{
  display: grid !important;
}
body.has-results .home-left,
body.has-results .home-center-wrapper,
body.has-results #filters-button{
  display: block !important;
}
body.has-results #paginator{
  display: flex;
}