/**
 * LOHMIA TOOLTIPS SYSTEM v3.1 - MOBILE OPTIMIZED
 * Fix: No sobrescribir estilos de botones de toolbar
 * Fix: Tooltips de toolbar se muestran debajo
 * 2025-12-22
 */

/* === CONFIGURACION BASE === */
/* IMPORTANTE: Solo aplicar a elementos que NO son botones */
[data-tooltip]:not(button):not(.toolbar-btn):not(.dropdown-option) {
  position: relative;
  cursor: pointer;

  /* Aumentar area tactil en mobile */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Botones: solo asegurar position relative para el tooltip */
button[data-tooltip],
.toolbar-btn[data-tooltip],
.dropdown-option[data-tooltip] {
  position: relative;
}

/* === TOOLTIP BOX (::before) === */
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;

  /* Posicion inicial */
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);

  /* Estilos visuales Lohmia */
  background: rgba(13, 31, 60, 0.98);
  color: rgba(255, 255, 255, 0.95);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;

  /* Borde verde aqua */
  border: 1px solid rgba(0, 212, 170, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(0, 212, 170, 0.1);

  /* Estado inicial oculto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Transiciones suaves */
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.25s;

  z-index: 10000;
  max-width: 250px;
  white-space: normal;
  text-align: center;
}

/* === FLECHA === */
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);

  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: rgba(13, 31, 60, 0.98);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.25s;

  z-index: 10000;
}

/* === BOTONES DE TOOLBAR: Tooltip SIEMPRE debajo === */
.toolbar-btn[data-tooltip]::before,
.chat-toolbar [data-tooltip]::before {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(0);
}

.toolbar-btn[data-tooltip]::after,
.chat-toolbar [data-tooltip]::after {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: rgba(13, 31, 60, 0.98);
}

/* === MOSTRAR TOOLTIP === */

/* Desktop: Hover con delay */
@media (hover: hover) and (pointer: fine) {
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0.4s;
  }
}

/* Mobile y Tactil: Focus y Active */
@media (hover: none), (pointer: coarse) {
  [data-tooltip]:focus::before,
  [data-tooltip]:focus::after,
  [data-tooltip]:active::before,
  [data-tooltip]:active::after,
  [data-tooltip].tooltip-visible::before,
  [data-tooltip].tooltip-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
}

/* Teclado: Focus visible */
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Clase helper para mostrar via JS */
[data-tooltip].tooltip-visible::before,
[data-tooltip].tooltip-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* === POSICIONAMIENTO ALTERNATIVO === */

/* Bottom */
[data-tooltip][data-tooltip-position="bottom"]::before {
  bottom: auto;
  top: calc(100% + 12px);
  transform: translateX(-50%) translateY(4px);
}

[data-tooltip][data-tooltip-position="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
  border-top-color: transparent;
  border-bottom-color: rgba(13, 31, 60, 0.98);
}

[data-tooltip][data-tooltip-position="bottom"]:hover::before,
[data-tooltip][data-tooltip-position="bottom"]:focus::before,
[data-tooltip][data-tooltip-position="bottom"].tooltip-visible::before {
  transform: translateX(-50%) translateY(0);
}

/* Top-Left (alineado a izquierda) */
[data-tooltip][data-tooltip-position="top-left"]::before {
  left: 0;
  transform: translateX(0) translateY(-4px);
}

[data-tooltip][data-tooltip-position="top-left"]::after {
  left: 16px;
  transform: translateX(0);
}

[data-tooltip][data-tooltip-position="top-left"]:hover::before,
[data-tooltip][data-tooltip-position="top-left"]:focus::before,
[data-tooltip][data-tooltip-position="top-left"].tooltip-visible::before {
  transform: translateX(0) translateY(0);
}

/* Top-Right (alineado a derecha) */
[data-tooltip][data-tooltip-position="top-right"]::before {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-4px);
}

[data-tooltip][data-tooltip-position="top-right"]::after {
  left: auto;
  right: 16px;
  transform: translateX(0);
}

[data-tooltip][data-tooltip-position="top-right"]:hover::before,
[data-tooltip][data-tooltip-position="top-right"]:focus::before,
[data-tooltip][data-tooltip-position="top-right"].tooltip-visible::before {
  transform: translateX(0) translateY(0);
}

/* Left */
[data-tooltip][data-tooltip-position="left"]::before {
  bottom: auto;
  left: auto;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(-4px, -50%);
}

[data-tooltip][data-tooltip-position="left"]::after {
  bottom: auto;
  left: auto;
  right: calc(100% + 6px);
  top: 50%;
  border-top-color: transparent;
  border-left-color: rgba(13, 31, 60, 0.98);
}

[data-tooltip][data-tooltip-position="left"]:hover::before,
[data-tooltip][data-tooltip-position="left"]:focus::before,
[data-tooltip][data-tooltip-position="left"].tooltip-visible::before {
  transform: translate(0, -50%);
}

/* Right */
[data-tooltip][data-tooltip-position="right"]::before {
  bottom: auto;
  left: calc(100% + 12px);
  right: auto;
  top: 50%;
  transform: translate(4px, -50%);
}

[data-tooltip][data-tooltip-position="right"]::after {
  bottom: auto;
  left: calc(100% + 6px);
  right: auto;
  top: 50%;
  border-top-color: transparent;
  border-right-color: rgba(13, 31, 60, 0.98);
}

[data-tooltip][data-tooltip-position="right"]:hover::before,
[data-tooltip][data-tooltip-position="right"]:focus::before,
[data-tooltip][data-tooltip-position="right"].tooltip-visible::before {
  transform: translate(0, -50%);
}

/* === OPTIMIZACIONES MOBILE === */

@media (max-width: 480px) {
  /* Tooltips mas grandes y legibles en mobile */
  [data-tooltip]::before {
    font-size: 14px;
    padding: 10px 16px;
    max-width: calc(100vw - 32px);
    border-radius: 10px;
    line-height: 1.6;

    /* Sombra mas pronunciada en mobile */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(0, 212, 170, 0.15);
  }

  /* Flecha mas grande */
  [data-tooltip]::after {
    border-width: 8px;
    bottom: calc(100% + 4px);
  }

  [data-tooltip][data-tooltip-position="bottom"]::after {
    top: calc(100% + 4px);
  }

  /* Aumentar area tactil - pero NO para botones existentes */
  [data-tooltip]:not(button):not(.toolbar-btn) {
    min-width: 48px;
    min-height: 48px;
  }
}

/* Mobile landscape */
@media (max-width: 896px) and (max-height: 480px) and (orientation: landscape) {
  [data-tooltip]::before {
    font-size: 12px;
    padding: 8px 12px;
    max-width: 200px;
  }
}

/* Pantallas muy pequenas */
@media (max-width: 360px) {
  [data-tooltip]::before {
    font-size: 13px;
    padding: 8px 14px;
    max-width: calc(100vw - 24px);
  }
}

/* === ACCESIBILIDAD === */

/* Focus visible con teclado - pero no modificar botones */
[data-tooltip]:not(button):focus-visible {
  outline: 2px solid rgba(0, 212, 170, 0.5);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::before,
  [data-tooltip]::after {
    transition: opacity 0.1s, visibility 0.1s;
  }
}

/* === FEEDBACK TACTIL === */
/* Highlight al tap - pero NO para botones que ya tienen su propio hover */
[data-tooltip]:not(button):not(.toolbar-btn).tooltip-visible {
  background: rgba(0, 212, 170, 0.1);
  border-radius: 6px;
}

/* === OCULTAR TOOLTIPS CUANDO HAY PANEL ABIERTO === */
body.panel-open [data-tooltip]::before,
body.panel-open [data-tooltip]::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}