/* 
 * Estilos para tooltips de precios de vuelo
 * Archivo: css/tooltip.css
 */

/* ===== TOOLTIPS ===== */

/* Contenedor principal */
.precio-vuelo-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #FF5E3A !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    overflow: visible !important;
    z-index: 20 !important;
}

.precio-vuelo-link:hover {
    color: #e04d2f !important;
}

/* Tooltip - Versión corregida */
.vuelo-tooltip {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #333 !important;
    color: white !important;
    padding: 6px 10px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    z-index: 100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-out !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important;
    text-align: center !important;
}

/* Estados visibles */
.precio-vuelo-link:hover .vuelo-tooltip,
.precio-vuelo-link.mostrar-tooltip .vuelo-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Logo aerolínea */
.logo-aerolinea-tooltip {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}

/* OCULTAR ICONO PARA VUELOS IDA Y VUELTA */
.precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .logo-aerolinea-tooltip {
    display: none !important;
}

/* AJUSTAR ESPACIADO CUANDO NO HAY ICONO */
.precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .vuelo-tooltip {
    gap: 0 !important;
    padding: 6px 12px !important;
}

/* ===== TOOLTIP MÓVIL ===== */

@media (max-width: 768px) {
  .vuelo-tooltip {
    display: flex !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #333 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    z-index: 100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    max-width: 90vw !important;
    width: auto !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: auto !important;
  }

  /* Contenedor del contenido del tooltip */
  .contenido-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
  }

  /* Estilos para el icono del avión */
  .vuelo-tooltip img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Estilo para el texto de fecha */
  .vuelo-tooltip .texto-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* Estado visible */
  .precio-vuelo-link:hover .vuelo-tooltip,
  .precio-vuelo-link.mostrar-tooltip .vuelo-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* CORRECCIÓN PARA IDA Y VUELTA EN MÓVIL */
  .precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .vuelo-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    gap: 0 !important;
  }

  .precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .texto-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* CORRECCIÓN PARA SOLO IDA EN MÓVIL */
  .precio-vuelo-link[data-tipo-vuelo="solo_ida"] .vuelo-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
  }

  .precio-vuelo-link[data-tipo-vuelo="solo_ida"] .contenido-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Para pantallas muy pequeñas */
  @media (max-width: 360px) {
    .vuelo-tooltip {
      padding: 6px 10px !important;
      font-size: 11px !important;
      max-width: 85vw !important;
    }
    
    .vuelo-tooltip img {
      width: 14px !important;
      height: 14px !important;
    }
    
    .precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .vuelo-tooltip {
      padding: 6px 12px !important;
    }
  }
}

/* ===== MEJORAS DE ACCESIBILIDAD ===== */

.precio-vuelo-link:focus .vuelo-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== TRANSICIONES SUAVES ===== */

.precio-vuelo-link,
.vuelo-tooltip {
    transition: all 0.2s ease-in-out;
}

/* ===== ESTADOS ESPECIALES ===== */

.precio-vuelo-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.precio-vuelo-link.error {
    color: #e74c3c !important;
}

.precio-vuelo-link.error .vuelo-tooltip {
    background: #e74c3c !important;
}