/* =========================================================================
   B-Desk — Focus Visible (sistema global de accesibilidad por teclado)
   -------------------------------------------------------------------------
   Anillo de foco premium, sutil y consistente con la identidad B-Desk
   (cyan/violet sobre dark). Técnica:
     - :focus-visible  -> solo teclado (no aparece al click de mouse).
     - outline + outline-offset -> SIN layout shift y SIN pisar los box-shadow
       de los componentes (gradiente, ghost, cards).
     - tokens reutilizables (--focus-ring-*) para una sola fuente de verdad.

   Se carga ÚLTIMO en el <head> para ganar el cascade a estilos de módulo.
   NO usa !important salvo donde un módulo lo necesita explícitamente.
   ========================================================================= */

:root {
  --focus-ring-color: rgba(51, 214, 255, .78);   /* cyan B-Desk */
  --focus-ring-color-2: rgba(139, 92, 255, .70); /* violet (acento sutil)   */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-halo: 0 0 0 4px rgba(51, 214, 255, .14);
}

/* ── Base: cualquier elemento enfocado por teclado ───────────────────────── */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* El foco por mouse/touch no muestra anillo (solo teclado). */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Botones, links, controles de formulario ─────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ── Componentes B-Desk (mismo anillo, consistente) ──────────────────────── */
.btn-pro:focus-visible,
.btn-pro-gradient:focus-visible,
.fp-pill:focus-visible,
.fp-dd-btn:focus-visible,
.fp-month-btn:focus-visible,
.fp-month-pill:focus-visible,
.btn-icon:focus-visible,
.bdesk-export-btn:focus-visible,
.bdesk-export-link:focus-visible,
.tab:focus-visible,
.toggle:focus-visible,
.bdesk-section-toggle:focus-visible,
.tr-sort-btn:focus-visible,
.cxc-sort-btn:focus-visible,
.cxp-sort-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Botón gradiente: el anillo cyan ya contrasta sobre el gradiente; le sumamos
   un offset levemente mayor para que respire fuera del glow del botón. */
.btn-pro-gradient:focus-visible {
  outline-offset: 3px;
}

/* ── Elementos dentro de contenedores con overflow: anillo INSET para que no
   lo recorte el clipping (menús dropdown, sidebar, acciones de tabla). ─────── */
.fp-dd-opt:focus-visible,
.bdesk-export-link:focus-visible,
.sidebar-link:focus-visible,
.sidebar-footer a:focus-visible,
.sb-footbar:focus-visible,
.pro-table .btn-icon:focus-visible,
.pro-table-wrap .btn-icon:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px; /* inset: se dibuja dentro, nunca recortado por overflow */
}

/* Opciones de dropdown: además resaltamos el fondo para lectura inmediata. */
.fp-dd-opt:focus-visible {
  background: rgba(51, 214, 255, .10);
}

/* Inputs/selects/textarea: muchos módulos ya pintan borde cyan al focus dentro
   de modales; el outline lo complementa sin romper ese estilo. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
}

/* ── Accesibilidad / motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :focus-visible { transition: none; }
}

/* Contraste reforzado en Windows High Contrast / forced-colors. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}