/* ==========================================================================
   Frasqmanager v2 — Base
   Reset ligero, tipografía y utilidades transversales.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--fq-font);
    font-size: var(--fq-text-base);
    line-height: 1.55;
    color: var(--fq-text);
    background-color: var(--fq-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ---- Escala tipográfica ---- */
h1, .h1 { font-size: var(--fq-text-2xl); }
h2, .h2 { font-size: var(--fq-text-xl); }
h3, .h3 { font-size: var(--fq-text-lg); }
h4, .h4 { font-size: var(--fq-text-md); }
h5, .h5 { font-size: var(--fq-text-base); }
h6, .h6 { font-size: var(--fq-text-sm); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.014em;
    color: var(--fq-text);
    margin-bottom: 0;
    line-height: 1.3;
}

a {
    color: var(--fq-link);
    text-decoration: none;
    transition: color var(--fq-transition);
}
a:hover { color: var(--fq-blue-800); }

/* Cifras alineadas en columnas: imprescindible en tablas de dinero */
.fq-num, .text-end, td.money, .table td.text-end, .table th.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ---- Foco visible y consistente ---- */
:focus-visible {
    outline: 2px solid var(--fq-blue-600);
    outline-offset: 2px;
    border-radius: var(--fq-radius-sm);
}

::selection {
    background: var(--fq-yellow-200);
    color: var(--fq-gray-900);
}

/* ---- Barras de desplazamiento discretas ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--fq-gray-300);
    border-radius: var(--fq-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fq-gray-400); background-clip: content-box; }

/* ==========================================================================
   Utilidades
   ========================================================================== */

.fq-muted   { color: var(--fq-text-muted) !important; }
.fq-subtle  { color: var(--fq-text-subtle) !important; }
.fq-mono    { font-family: var(--fq-font-mono); font-size: 0.9em; }

.fq-text-xs { font-size: var(--fq-text-xs) !important; }
.fq-text-sm { font-size: var(--fq-text-sm) !important; }
.fq-text-lg { font-size: var(--fq-text-lg) !important; }

/* Etiqueta de sección: versalita discreta sobre grupos de contenido */
.fq-eyebrow {
    font-size: var(--fq-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fq-text-subtle);
}

.fq-divider {
    height: 1px;
    background: var(--fq-border);
    border: 0;
    margin: var(--fq-space-5) 0;
}

/* Solo para lectores de pantalla */
.fq-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;
}

/* ---- Estado vacío ---- */
.fq-empty {
    text-align: center;
    padding: var(--fq-space-10) var(--fq-space-5);
    color: var(--fq-text-muted);
}
.fq-empty i {
    font-size: 2rem;
    color: var(--fq-gray-300);
    margin-bottom: var(--fq-space-3);
    display: block;
}
.fq-empty p { margin-bottom: var(--fq-space-4); }

/* ---- Skeleton loader ---- */
.skeleton-shimmer,
.skeleton-card {
    background: linear-gradient(90deg,
        var(--fq-gray-100) 25%,
        var(--fq-gray-50) 50%,
        var(--fq-gray-100) 75%);
    background-size: 200% 100%;
    animation: fq-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--fq-radius);
}
.skeleton-card { border-radius: var(--fq-radius-md); }
.skeleton-title { height: 28px; width: 240px; }
.skeleton-text  { height: 14px; }
.skeleton-btn   { height: 38px; width: 130px; }
.skeleton-row   { height: 44px; }
.skeleton-table-header { height: 40px; }

@keyframes fq-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}