/* ============================================================
   Baitana — Utilidades UI globales (a11y, performance, motion)
   Incluir DESPUÉS del CSS principal:
   <link rel="stylesheet" href="/assets/baitana-ui.css">
   ============================================================ */

/* ── Variables centralizadas ─────────────────────────────── */
:root {
  --b-accent:        #1289D3;
  --b-accent-strong: #0d6aa3;
  --b-gold:          #FFB800;
  --b-orange:        #FF8C42;
  --b-bg:            #080B14;
  --b-bg-2:          #0D1117;
  --b-bg-3:          #161C2D;
  --b-text:          #FFFFFF;
  --b-text-soft:     #C8D0DC;
  --b-text-muted:    #8892A4;
  --b-border:        rgba(255,255,255,0.08);
  --b-focus:         #5fb4ed;
  --b-radius-sm:     6px;
  --b-radius-md:     10px;
  --b-radius-lg:     16px;
  --b-tap-target:    44px;
  --b-shadow-md:     0 4px 16px rgba(0,0,0,.25);
  --b-shadow-lg:     0 12px 32px rgba(0,0,0,.35);
}

/* ── Skip-link para teclado / screen readers ─────────────── */
.b-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--b-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--b-radius-md);
  transition: top .2s;
}
.b-skip-link:focus { top: 16px; outline: 3px solid #fff; outline-offset: 2px; }

/* ── Focus visible coherente y solo con teclado ──────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--b-focus);
  outline-offset: 3px;
  border-radius: var(--b-radius-sm);
}

/* ── Tap targets mínimos en móvil ────────────────────────── */
@media (pointer: coarse) {
  a, button, [role="button"], input[type="button"], input[type="submit"] {
    min-height: var(--b-tap-target);
  }
}

/* ── Inputs con foco visible ─────────────────────────────── */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--b-focus);
  outline-offset: 0;
  border-color: var(--b-focus) !important;
  box-shadow: 0 0 0 3px rgba(95,180,237,.25);
}

/* ── Errores accesibles ──────────────────────────────────── */
[aria-invalid="true"] {
  border-color: #FF4444 !important;
  box-shadow: 0 0 0 3px rgba(255,68,68,.18) !important;
}

/* ── Visually hidden (screen-reader only) ────────────────── */
.b-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Botón flotante WhatsApp ─────────────────────────────── */
.b-wa-float {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 9000;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, #25D366, #1ea854);
  color: #fff !important;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  transition: transform .25s, box-shadow .25s;
}
.b-wa-float:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37,211,102,.6); }
.b-wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 600px) {
  .b-wa-float { bottom: 16px; right: 16px; width: 56px; height: 56px; }
}

/* ── Toast notifications ─────────────────────────────────── */
.b-toast-host {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.b-toast {
  pointer-events: auto;
  background: var(--b-bg-3);
  color: var(--b-text);
  border: 1px solid var(--b-border);
  border-left: 4px solid var(--b-accent);
  padding: 14px 20px;
  border-radius: var(--b-radius-md);
  font-size: .92rem;
  box-shadow: var(--b-shadow-lg);
  min-width: 240px;
  max-width: 92vw;
  opacity: 0;
  transform: translateY(20px);
  animation: b-toast-in .3s ease-out forwards;
}
.b-toast.b-toast-success { border-left-color: #25D366; }
.b-toast.b-toast-error   { border-left-color: #FF4444; }
@keyframes b-toast-in { to { opacity: 1; transform: translateY(0); } }

/* ── Skeleton loader ─────────────────────────────────────── */
.b-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%);
  background-size: 1000px 100%;
  animation: b-shimmer 1.6s linear infinite;
  border-radius: var(--b-radius-sm);
}
@keyframes b-shimmer {
  0%   { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}

/* ── Respect prefers-reduced-motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print-friendly ──────────────────────────────────────── */
@media print {
  .b-wa-float, .b-toast-host, .nav, footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}