/* ============================================================================
 * Design System — Base
 * Reset suave, tipografía, focus ring, scrollbars.
 * ============================================================================ */

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--ds-font-sans);
    font-size: var(--ds-fs-base);
    line-height: var(--ds-lh-base);
    color: var(--ds-text);
    background-color: var(--ds-bg-page);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-tight);
    color: var(--ds-text);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--ds-fs-3xl); }
h2 { font-size: var(--ds-fs-2xl); }
h3 { font-size: var(--ds-fs-xl); }
h4 { font-size: var(--ds-fs-lg); }
h5 { font-size: var(--ds-fs-md); }
h6 { font-size: var(--ds-fs-base); }

a {
    color: var(--ds-brand-500);
    text-decoration: none;
    transition: color var(--ds-dur-fast) var(--ds-ease);
}

a:hover {
    color: var(--ds-brand-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Accessible focus ring everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--ds-shadow-focus);
    border-radius: var(--ds-radius-sm);
}

/* Sutil custom scrollbar (WebKit) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: var(--ds-border-strong);
    border-radius: var(--ds-radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ds-neutral-400); }

/* Text helpers */
.ds-text-muted { color: var(--ds-text-muted) !important; }
.ds-text-brand { color: var(--ds-brand-700) !important; }
[data-bs-theme="dark"] .ds-text-brand { color: var(--ds-brand-400) !important; }

/* Theme transition (avoid jank on toggle) */
.ds-themed,
body, .ds-sidebar, .ds-topbar, .card, .table, .btn, .form-control, .form-select {
    transition: background-color var(--ds-dur-base) var(--ds-ease),
                border-color var(--ds-dur-base) var(--ds-ease),
                color var(--ds-dur-base) var(--ds-ease);
}

/* Scan input "ready" pulse — applied to the DNI input by JS while it's
   focused AND empty. Subtle outline ring that breathes to telegraph
   "the system is waiting for a scan". */
.ds-input-ready {
    animation: ds-pulse-input 1.8s var(--ds-ease) infinite;
}

@keyframes ds-pulse-input {
    0%, 100% { box-shadow: 0 0 0 0 rgba(44, 90, 160, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(44, 90, 160, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .ds-input-ready { animation: none; }
}