/**
 * 💬 CHAT ACCESSIBILITY & UX ENHANCEMENTS
 * Mejoras de accesibilidad, fluidez y usabilidad para el sistema de chat
 *
 * Features:
 * - ARIA labels y roles semánticos
 * - Navegación completa por teclado
 * - Focus indicators visibles
 * - Tooltips informativos
 * - Transiciones fluidas
 * - Feedback visual claro
 * - Alto contraste para legibilidad
 *
 * @version 1.0.0
 * @date 2025-11-22
 */

/* ============================================================================
   VARIABLES DE ACCESIBILIDAD
   ============================================================================ */
:root {
  --a11y-focus-color: #0d6efd;
  --a11y-focus-width: 3px;
  --a11y-focus-offset: 2px;
  --a11y-transition-duration: 200ms;
  --a11y-tooltip-bg: rgba(0, 0, 0, 0.9);
  --a11y-tooltip-text: #ffffff;
  --a11y-success: #198754;
  --a11y-warning: #ffc107;
  --a11y-error: #dc3545;
  --a11y-info: #0dcaf0;
}

/* ============================================================================
   FOCUS INDICATORS - Navegación por teclado visible y clara
   ============================================================================ */
.chat-flotante-pro *:focus,
.chat-unified-pwa *:focus,
[class*="chat-"] button:focus,
[class*="chat-"] a:focus,
[class*="chat-"] input:focus,
[class*="chat-"] textarea:focus {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  transition: outline var(--a11y-transition-duration) ease;
}

/* Focus visible solo cuando se navega por teclado (no con mouse) */
.chat-flotante-pro *:focus:not(:focus-visible),
.chat-unified-pwa *:focus:not(:focus-visible) {
  outline: none;
}

.chat-flotante-pro *:focus-visible,
.chat-unified-pwa *:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* ============================================================================
   SKIP LINKS - Salto rápido a contenido principal
   ============================================================================ */
.chat-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--a11y-focus-color);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 10000;
  transition: top var(--a11y-transition-duration) ease;
}

.chat-skip-link:focus {
  top: 0;
  outline: var(--a11y-focus-width) solid white;
  outline-offset: -3px;
}

/* ============================================================================
   TOOLTIPS INFORMATIVOS - Ayuda contextual
   ============================================================================ */
[data-chat-tooltip] {
  position: relative;
  cursor: help;
}

[data-chat-tooltip]::before,
[data-chat-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--a11y-transition-duration) ease,
    transform var(--a11y-transition-duration) ease;
  z-index: 10001;
}

[data-chat-tooltip]::before {
  content: attr(data-chat-tooltip);
  background: var(--a11y-tooltip-bg);
  color: var(--a11y-tooltip-text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 250px;
  text-align: center;
  line-height: 1.4;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-chat-tooltip]::after {
  content: '';
  border: 6px solid transparent;
  border-top-color: var(--a11y-tooltip-bg);
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

[data-chat-tooltip]:hover::before,
[data-chat-tooltip]:hover::after,
[data-chat-tooltip]:focus::before,
[data-chat-tooltip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltips en posición lateral para elementos en bordes */
[data-chat-tooltip][data-tooltip-position="right"]::before {
  left: calc(100% + 8px);
  bottom: 50%;
  transform: translateY(50%) translateX(-4px);
}

[data-chat-tooltip][data-tooltip-position="right"]::after {
  left: calc(100% + 2px);
  bottom: 50%;
  border: 6px solid transparent;
  border-right-color: var(--a11y-tooltip-bg);
  border-top-color: transparent;
  transform: translateY(50%) translateX(-4px);
}

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

[data-chat-tooltip][data-tooltip-position="right"]:hover::after,
[data-chat-tooltip][data-tooltip-position="right"]:focus::after {
  transform: translateY(50%) translateX(0);
}

/* ============================================================================
   ESTADOS VISUALES - Feedback claro de interacción
   ============================================================================ */
.chat-state-success,
.chat-message-sent {
  animation: chatStateSuccess 0.4s ease;
}

.chat-state-error,
.chat-message-failed {
  animation: chatStateError 0.4s ease;
}

.chat-state-loading,
.chat-typing-indicator {
  animation: chatStateLoading 1.2s infinite ease-in-out;
}

@keyframes chatStateSuccess {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.2);
  }
}

@keyframes chatStateError {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

@keyframes chatStateLoading {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* ============================================================================
   TRANSICIONES FLUIDAS - Mejora de experiencia visual
   ============================================================================ */
.chat-panel,
.chat-modal,
.chat-dropdown,
.chat-message,
.chat-notification {
  transition: all var(--a11y-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-panel-enter {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.chat-panel-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chat-panel-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chat-panel-exit-active {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

/* ============================================================================
   NAVEGACIÓN POR TECLADO - Shortcuts y atajos
   ============================================================================ */
.chat-keyboard-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 8px;
}

.chat-key {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  font-family: monospace;
  font-size: 10px;
  font-weight: 600;
}

/* ============================================================================
   ALTO CONTRASTE - Mejora de legibilidad
   ============================================================================ */
@media (prefers-contrast: more) {
  :root {
    --a11y-focus-width: 4px;
    --a11y-focus-color: #000000;
  }

  .chat-flotante-pro,
  .chat-unified-pwa {
    border: 2px solid #000000;
  }

  .chat-message {
    border: 1px solid #000000;
  }

  .chat-btn,
  .chat-toggle-btn {
    border: 2px solid #000000;
    font-weight: 700;
  }
}

/* ============================================================================
   REDUCCIÓN DE MOVIMIENTO - Respeto a preferencias del usuario
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .chat-typing-indicator,
  .chat-pulse,
  .chat-spinner {
    animation: none !important;
  }
}

/* ============================================================================
   NOTIFICACIONES ARIA LIVE - Anuncios para lectores de pantalla
   ============================================================================ */
.chat-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat-live-region[aria-live="polite"],
.chat-live-region[aria-live="assertive"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================================
   ESTADOS DE CARGA Y ERROR - Feedback visual mejorado
   ============================================================================ */
.chat-loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--a11y-focus-color);
  border-radius: 50%;
  animation: chatSpinner 0.8s linear infinite;
}

@keyframes chatSpinner {
  to {
    transform: rotate(360deg);
  }
}

.chat-error-banner {
  padding: 12px 16px;
  background: var(--a11y-error);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.chat-success-banner {
  padding: 12px 16px;
  background: var(--a11y-success);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

/* ============================================================================
   MEJORAS DE USABILIDAD MÓVIL
   ============================================================================ */
@media (max-width: 768px) {

  /* Área táctil mínima 44x44px (Apple HIG / Material Design) */
  .chat-btn,
  .chat-message-btn,
  .chat-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Mayor espaciado para facilitar touch */
  .chat-message {
    padding: 12px 16px;
    margin-bottom: 12px;
  }

  /* Input más grande en móvil */
  .chat-input {
    font-size: 16px;
    /* Evita zoom en iOS */
    padding: 12px 16px;
    min-height: 48px;
  }
}

/* ============================================================================
   MODO OSCURO - Respeto a preferencia del sistema
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --a11y-focus-color: #66b3ff;
    --a11y-tooltip-bg: rgba(255, 255, 255, 0.95);
    --a11y-tooltip-text: #000000;
  }

  .chat-key {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }
}