/* Tokens semánticos por defecto (oscuros) globales -> los componentes (.input/.btn) valen en todas las páginas; el dashboard los sobreescribe por tema (dashboard.css). Valores = los zinc del público. */
:root {
    --canvas-base: 9 9 11;       /* zinc-950 */
    --canvas-raised: 24 24 27;   /* zinc-900 */
    --canvas-sunken: 39 39 42;   /* zinc-800 */
    --canvas-overlay: 24 24 27;  /* zinc-900 */

    --ink-primary: 250 250 250;  /* zinc-50 */
    --ink-secondary: 161 161 170;/* zinc-400 */
    --ink-muted: 113 113 122;    /* zinc-500 */
    --ink-faint: 82 82 91;       /* zinc-600 */

    --outline-subtle: 39 39 42;  /* zinc-800 */
    --outline-default: 63 63 70; /* zinc-700 */
    --outline-strong: 82 82 91;  /* zinc-600 */
}

/* Fondo oscuro en la raíz: evita el flash blanco entre navegaciones (antes de pintar el body). */
html {
    background-color: #09090b;
}

/* Scrollbar global: fino y oscuro, coherente con el tema. Los carruseles ocultan
   el suyo aparte con [scrollbar-width:none] / [&::-webkit-scrollbar]:hidden. */
* {
    scrollbar-width: thin;
    scrollbar-color: #3f3f46 transparent; /* thumb zinc-700, track transparente */
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: #3f3f46; /* zinc-700 */
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: #52525b; /* zinc-600 */
}

/* Número de ranking "Top 10" estilo Netflix: relleno casi negro + contorno gris (hueco). */
.top-rank {
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: #0b0b0f;
    -webkit-text-stroke: 4px #52525b;
    text-stroke: 4px #52525b;
    user-select: none;
}

/* Geist — self-hosted (variable, pesos 100-900). Fuente del proyecto (branding.md). */
@font-face {
    font-family: 'Geist';
    src: url("../fonts/Geist-Variable.dfa48d5a8537.woff2") format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url("../fonts/GeistMono-Variable.308360d8a547.woff2") format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Carrusel: cursor "agarrando" mientras se arrastra. En CSS (no inline) para no
   chocar con la CSP. El selector compuesto gana en especificidad a .cursor-grab. */
[data-carousel-track].dragging {
    cursor: grabbing;
}

/* Mientras arrastras, las tarjetas no reaccionan al hover (sin animaciones de
   escala que provoquen tirones al barrerlas con el cursor). */
[data-carousel-track].dragging > * {
    pointer-events: none;
}

/* Header del dashboard oculto (scroll hacia abajo). La transición la pone Tailwind
   en la plantilla (transition-transform duration-300). En CSS porque la clase se
   alterna por JS y Tailwind la purgaría si no apareciera en plantilla. */
[data-dash-header].is-hidden {
    transform: translateY(-100%);
}

/* Preview de vídeo en hover (estilo YouTube): vídeo y barra de timeline ocultos
   hasta reproducir. La transición de opacidad la pone Tailwind en la plantilla;
   la clase la alterna carousel.js (por eso vive aquí, no en Tailwind). */
[data-card-video].is-playing,
[data-card-progress].is-playing {
    opacity: 1;
}

/* Tooltip flotante (JS: ui/js/tooltip.js). Posición por JS (style.left/top, CSSOM); estilo oscuro válido en claro/oscuro. */
.tooltip {
    position: fixed;
    z-index: 60;
    top: 0;
    left: 0;
    pointer-events: none;
    max-width: 16rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #3f3f46;          /* zinc-700 */
    background-color: #18181b;          /* zinc-900 */
    color: #fafafa;                     /* zinc-50 */
    font-size: 12px;
    line-height: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Sortable (JS: ui/js/sortable.js). Item en arrastre: atenuado para feedback. */
[data-drag-handle] {
    cursor: grab;
    touch-action: none;
}
[data-drag-handle]:active {
    cursor: grabbing;
}
.is-dragging {
    opacity: 0.4;
}
/* Durante el arrastre: evita seleccionar texto y muestra cursor de agarre. */
.is-sorting {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

/* Colapsar/expandir (JS: ui/js/collapse.js). Oculta el cuerpo y gira el chevron. */
[data-collapsible].is-collapsed [data-collapse-body] {
    display: none;
}
[data-collapse-toggle] svg {
    transition: transform 0.15s ease;
}
[data-collapsible].is-collapsed [data-collapse-toggle] svg {
    transform: rotate(-90deg);
}