/* ============================================
   NOTITAGS — css/notitags.css
   Añadir: <link rel="stylesheet" href="css/notitags.css"> en index.html
   ============================================ */

/* ── Marquee animation ── */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 0.75rem));
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(calc(-50% - 0.75rem));
    }

    100% {
        transform: translateX(0);
    }
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    padding: 0.8rem 0;
    /* Aumentado por el scale */
    transform: scale(1.6);
    transform-origin: left center;
    margin-bottom: 24px;
    /* Espacio extra para compensar el scale */
}

.marquee-content {
    display: flex;
    width: max-content;
    gap: 0.75rem;
    animation: scrollLeft 25s linear infinite;
}

.marquee-content-reverse {
    display: flex;
    width: max-content;
    gap: 0.75rem;
    animation: scrollRight 30s linear infinite;
}

.marquee-content:hover,
.marquee-content-reverse:hover {
    animation-play-state: paused;
}

/* ── List Mode (Static Version) ── */
#notitagsPanel.nt-list-mode {
    overflow-y: auto !important;
}

.nt-list-mode .marquee-container {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    transform: none !important;
    padding: 0 12px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

.nt-list-mode .marquee-content,
.nt-list-mode .marquee-content-reverse {
    animation: none !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: center;
}

.nt-list-mode .task-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Card exit animation ── */
@keyframes slideOutUp {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-40px) scale(0.95);
    }
}

.card-exit {
    animation: slideOutUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

/* ── Accordion ── */
.accordion-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-wrapper.open {
    grid-template-rows: 1fr;
}

.accordion-inner {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    transition-delay: 0s;
}

.accordion-wrapper.open .accordion-inner {
    opacity: 1;
    transition-delay: 0.1s;
}

.task-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: normal;
}

/* ── Live dot pulse ── */
@keyframes ntLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

.nt-live-dot {
    animation: ntLivePulse 1.8s ease-in-out infinite;
}

/* ── Collapsed sidebar: ocultar las filas ── */
.sidebar-collapsed #notitagsPanel {
    display: none;
}