/* ================================================================
   LETTERA — UI Layer v1  (2026-09-28)
   Capa de estandarización visual: tokens centralizados + primitivas.
   · Cargar SIEMPRE después de site.min.css / admin.min.css / sa.min.css.
   · Es ADITIVA: no reemplaza componentes existentes; solo corrige
     tokens incoherentes, agrega foco accesible y touch targets.
   ================================================================ */

:root {
    /* — Marca — */
    --ltr-brand:        #067283;              /* acento teal corporativo */
    --ltr-brand-dark:   #055f6e;
    --ltr-brand-rgb:    6, 114, 131;
    --ltr-purple:       #7c3aed;
    --ltr-gradient:     linear-gradient(135deg, #067283 0%, #0d9488 60%, #7c3aed 130%);

    /* — Semánticos — */
    --ltr-success:      #16a34a;
    --ltr-warning:      #d97706;
    --ltr-danger:       #dc2626;
    --ltr-info:         #0891b2;

    /* — Neutros — */
    --ltr-ink:          #0f172a;
    --ltr-text:         #1e293b;
    --ltr-muted:        #64748b;
    --ltr-line:         #e2e8f0;
    --ltr-bg:           #f8fafc;
    --ltr-surface:      #ffffff;

    /* — Tipografía — */
    --ltr-font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ltr-font-display: 'Playfair Display', Georgia, serif;
    --ltr-fs-xs: .75rem;  --ltr-fs-sm: .875rem; --ltr-fs-md: 1rem;
    --ltr-fs-lg: 1.25rem; --ltr-fs-xl: 1.5rem;  --ltr-fs-2xl: 2rem;
    --ltr-lh: 1.6;

    /* — Radios — */
    --ltr-r-sm: 8px; --ltr-r-md: 12px; --ltr-r-lg: 16px; --ltr-r-xl: 20px; --ltr-r-pill: 999px;

    /* — Espaciado (escala 4px) — */
    --ltr-sp-1: .25rem; --ltr-sp-2: .5rem;  --ltr-sp-3: .75rem; --ltr-sp-4: 1rem;
    --ltr-sp-5: 1.5rem; --ltr-sp-6: 2rem;   --ltr-sp-7: 3rem;

    /* — Sombras — */
    --ltr-sh-sm: 0 1px 3px rgba(15,23,42,.08);
    --ltr-sh-md: 0 8px 24px -12px rgba(15,23,42,.25);
    --ltr-sh-lg: 0 24px 60px -30px rgba(15,23,42,.45);

    /* — Corrección de token histórico: definido como azul (37,99,235) y sin uso;
         se fija al teal de marca para que cualquier uso futuro sea coherente. — */
    --accent-rgb: 6, 114, 131;
}

/* — Base — */
::selection { background: rgba(6, 114, 131, .18); }
h1, h2, h3 { overflow-wrap: break-word; }

/* — Foco visible unificado (navegación por teclado) — */
:where(a, button, [role="button"], .btn, .nav-link, .form-control, .form-select, .btn-close):focus-visible {
    outline: 2px solid var(--ltr-brand);
    outline-offset: 2px;
    box-shadow: none;
}

/* — Touch targets ≥ 44px en dispositivos táctiles — */
@media (pointer: coarse) {
    .btn, .btn-sm { min-height: 44px; }
    .form-control, .form-select { min-height: 44px; }
    .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
    /* «×» de modales: ampliar el área de golpe sin cambiar el tamaño visual */
    .btn-close { position: relative; }
    .btn-close::after { content: ""; position: absolute; inset: -12px; }
}

/* — Utilidades de desbordamiento seguro — */
.ltr-safe-wrap { overflow-wrap: anywhere; word-break: break-word; }
.ltr-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* — FIX (2026-09-28): navbar pública desbordaba entre 992 y ~1199 px
     (navbar-expand-lg activa el menú horizontal antes de que el contenido
     quepa; a 1024px los botones de la derecha quedaban cortados por
     overflow-x: clip sin posibilidad de scroll). Se permite el salto de
     línea dentro del collapse solo en ese rango. — */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .py-navbar .navbar-collapse { flex-wrap: wrap; row-gap: .35rem; }
    .py-navbar .navbar-nav      { flex-wrap: wrap; }
    .py-navbar .nav-actions     { flex-wrap: wrap; row-gap: .35rem; }
}