/* ═══════════════════════════════════════════════════════════════
   css-effects-misc.css
   Animaciones, confirm modal, info modal, color picker del modal, ajustes extra de tema claro, preset bar, hover preview, count pop, barras de stats, card badge, pills de incompletos.
   (Parte de styles.css — el orden de <link> respeta la cascada original)
   ═══════════════════════════════════════════════════════════════ */

    /* ── ANIMATIONS ── */
    @keyframes fadeInUp {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
    }

    .country-card, .group-card {
    animation: riseIn 0.6s cubic-bezier(0.16,1,0.3,1) backwards;
    animation-delay: calc(var(--si, 0) * 40ms);
    }

    /* Filas de tabla en cascada (solo opacidad: seguro para layout de tabla) */
    @keyframes rowIn { from { opacity:0; } }
    #table-body tr {
    animation: rowIn 0.38s ease backwards;
    animation-delay: calc(var(--si, 0) * 18ms);
    }

    /* Transición al cambiar de vista */
    @keyframes viewIn { from { opacity:0; transform:translateY(12px); } }
    #gallery-container, #masonry-layout, #table-container, #timeline-container, #stats-container {
    animation: viewIn 0.5s cubic-bezier(0.16,1,0.3,1);
    }

    /* ── CONFIRM MODAL ── */
    #confirm-modal .modal-content {
        max-width: 380px;
        padding: 1.4rem 1.5rem 1.2rem;
    }
    .confirm-icon {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 0.6rem;
        animation: iconPop 0.5s cubic-bezier(0.34,1.45,0.64,1) 0.1s both;
    }
    @keyframes iconPop {
        from { opacity: 0; transform: scale(0.4); }
        to   { opacity: 1; transform: scale(1); }
    }
    .confirm-title {
        font-size: 0.95rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: 0.3rem;
        letter-spacing: -0.02em;
    }
    .confirm-subtitle {
        font-size: 0.78rem;
        color: var(--text-secondary);
        text-align: center;
        margin-bottom: 1.1rem;
    }
    .confirm-model-name {
        color: var(--text-primary);
        font-weight: 600;
    }
    .confirm-actions {
        display: flex;
        gap: 0.6rem;
        justify-content: center;
    }
    .btn-danger {
        background: rgba(255,77,106,0.15);
        border: 1px solid rgba(255,77,106,0.4);
        color: var(--accent-red);
        font-weight: 600;
        padding: 0.42rem 1.1rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.82rem;
        transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .btn-danger:hover {
        background: rgba(255,77,106,0.28);
        border-color: rgba(255,77,106,0.7);
        box-shadow: 0 0 14px rgba(255,77,106,0.2);
        color: var(--accent-red);
    }

    /* ── INFO MODAL (atajos + operadores de búsqueda) ── */
    #info-modal .modal-content {
        max-width: 580px;
        max-height: 85vh;
        overflow-y: auto;
    }
    .info-section { margin-bottom: 1.35rem; }
    .info-section:last-child { margin-bottom: 0; }
    .info-section h3 {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-dim);
        margin: 0 0 0.7rem;
        font-weight: 700;
    }
    .info-section h3 i { font-size: 0.95rem; }
    .info-shortcuts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem 1.4rem;
    }
    .info-shortcut {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.7rem;
        font-size: 0.78rem;
        color: var(--text-secondary);
    }
    .info-shortcut .kbd-row { display: flex; gap: 0.22rem; align-items: center; flex-shrink: 0; }
    .kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.55rem;
        height: 1.55rem;
        padding: 0 0.32rem;
        font-family: 'Space Mono', monospace;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-primary);
        background: var(--bg-element);
        border: 1px solid var(--border-bright);
        border-radius: 5px;
        box-shadow: 0 1px 0 var(--border-color);
    }
    .kbd-plus { font-size: 0.68rem; color: var(--text-dim); }
    .info-ops { display: flex; flex-direction: column; gap: 0.55rem; }
    .info-op { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; }
    .info-op code {
        font-family: 'Space Mono', monospace;
        font-size: 0.72rem;
        color: var(--accent-car);
        background: var(--accent-car-dim);
        padding: 0.08rem 0.32rem;
        border-radius: 4px;
        margin: 0 0.05rem;
        white-space: nowrap;
    }
    .info-note { font-size: 0.75rem; color: var(--text-dim); line-height: 1.6; }
    .info-note + .info-note { margin-top: 0.4rem; }
    @media (max-width: 540px) {
        .info-shortcuts { grid-template-columns: 1fr; }
    }

    /* ── COLOR BARS in list items ── */
    .color-bars { display:flex; gap:0; flex-shrink:0; align-self:stretch; align-items:stretch; margin-right:6px; }
    .color-bars .cb { width:3.5px; border-radius:1.5px; flex-shrink:0; }

    /* ── COLOR PICKER in modal ── */
    .color-palette-grid { display:flex; flex-wrap:wrap; gap:3px; }
    .cp-swatch { width:17px; height:17px; border-radius:3px; cursor:pointer; border:2px solid transparent; padding:0; flex-shrink:0; transition:transform 0.1s, border-color 0.1s; outline:none; appearance:none; -webkit-appearance:none; }
    .cp-swatch:hover { transform:scale(1.2); position:relative; z-index:1; }
    .cp-swatch.active { border-color:#fff !important; box-shadow:0 0 0 1.5px rgba(0,0,0,0.7); }
    .cp-swatch-none { background:repeating-linear-gradient(45deg,var(--cp-none-c1) 0px,var(--cp-none-c1) 2.5px,var(--cp-none-c2) 2.5px,var(--cp-none-c2) 5px); }
    .cp-swatch-custom { position:relative; overflow:hidden; cursor:pointer; background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); }
    .cp-swatch-custom input[type="color"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:none; padding:0; }
    .cp-preview-bar { height:5px; border-radius:2px; margin-top:0.32rem; border:1px solid rgba(255,255,255,0.06); transition:background 0.15s; }

    /* ── TEMA CLARO: ajustes adicionales ── */
    html[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(77,159,255,0.05) 0%, transparent 60%),
        linear-gradient(180deg, rgba(77,159,255,0.01) 0%, transparent 300px);
    }
    html[data-theme="light"] .modal-content {
    box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.05);
    }
    html[data-theme="light"] .toast-msg {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
    }

    /* ── PRESET BAR ── */
    #shelfPresetBar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: -0.8rem;
    margin-bottom: 1rem;
    padding: 0 0.1rem;
    }
    .preset-chip-label {
    font-size: 0.72rem; color: var(--text-secondary); flex-shrink: 0;
    display: flex; align-items: center; gap: 0.3rem; font-weight: 500;
    }
    .preset-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.62rem; border-radius: 20px;
    font-size: 0.74rem; font-weight: 500;
    border: 1px solid var(--border-color); background: var(--bg-element);
    color: var(--text-secondary); cursor: pointer; user-select: none;
    white-space: nowrap; line-height: 1.4;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    }
    .preset-chip:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-bright); }
    .preset-chip.active { background: rgba(249,115,22,0.12); color: #f97316; border-color: rgba(249,115,22,0.32); }
    .preset-chip-count {
    font-size: 0.66rem; font-weight: 600; line-height: 1.4;
    padding: 0 0.36rem; border-radius: 999px;
    background: var(--bg-hover); color: var(--text-dim);
    }
    .preset-chip.active .preset-chip-count { background: rgba(249,115,22,0.18); color: #f97316; }
    .preset-chip-del { font-size: 0.82rem; opacity: 0; line-height: 1; transition: opacity var(--transition); }
    .preset-chip:hover .preset-chip-del { opacity: 0.5; }
    .preset-chip-del:hover { opacity: 1 !important; }
    html[data-theme="light"] .seg .seg-btn.active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    }
    html[data-theme="light"] .cp-preview-bar { border-color: rgba(0,0,0,0.08); }
    html[data-theme="light"] #themeToggleBtn { font-size: 1rem; }

    /* ── HOVER PREVIEW ── */
    #hover-preview {
        position: fixed;
        z-index: 800;
        pointer-events: none;
        width: 220px;
        background: var(--bg-surface);
        border: 1px solid var(--border-bright);
        border-radius: var(--radius-lg);
        box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
        overflow: hidden;
        opacity: 0;
        transform: translateY(6px) scale(0.97);
        transition: opacity 0.14s ease, transform 0.14s ease;
        will-change: opacity, transform;
    }
    #hover-preview.hp-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .hp-img {
        width: 100%;
        aspect-ratio: 4/3;
        background: var(--bg-element);
        position: relative;
        overflow: hidden;
    }
    .hp-img img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
    }
    .hp-ph {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        color: var(--text-dim);
        background: repeating-linear-gradient(
            45deg,
            var(--bg-element), var(--bg-element) 8px,
            var(--bg-surface) 8px, var(--bg-surface) 16px
        );
    }
    .hp-ph svg { width: 28px; height: 28px; opacity: 0.3; }
    .hp-body {
        padding: 0.55rem 0.65rem 0.6rem;
        border-top: 1px solid var(--border-color);
    }
    .hp-title {
        font-family: 'Outfit', sans-serif;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.2rem;
    }
    .hp-title b { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
    .hp-title .hp-model { font-weight: 400; color: var(--text-secondary); }
    .hp-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-top: 0.35rem;
        font-family: 'Space Mono', monospace;
        font-size: 0.62rem;
        color: var(--text-secondary);
    }

    .hp-year {
        flex-shrink: 0;
    }
    .hp-maker {
        color: var(--text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    html[data-theme="light"] #hover-preview {
        box-shadow: 0 12px 36px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.06);
    }

    /* ── COUNT POP (los contadores laten al cambiar) ── */
    .seg-count.pop { animation: countPop 0.45s cubic-bezier(0.34,1.45,0.64,1); }
    @keyframes countPop {
        50% { transform: scale(1.45); }
        100% { transform: scale(1); }
    }

    /* ── STATS: las barras crecen al entrar en la vista ── */
    #stats-container span[style*="height:4px"],
    #stats-container div[style*="height:3px"] > div {
        transform-origin: left center;
        animation: barGrow 1.4s ease-out 0.25s both;
    }
    @keyframes barGrow { from { transform: scaleX(0); } }

    /* ── MOVIMIENTO ──────────────────────────────────────────────
       App personal, de un solo usuario: las animaciones son
       intencionadas. NO se desactivan automáticamente por la
       preferencia del sistema (prefers-reduced-motion), porque en
       Windows con "Efectos de animación" desactivados eso anulaba
       TODAS las animaciones y transiciones de golpe.
       Para reducir el movimiento, añade data-motion="reduce" en <html>. */
    html[data-motion="reduce"] *,
    html[data-motion="reduce"] *::before,
    html[data-motion="reduce"] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html[data-motion="reduce"] body::before,
    html[data-motion="reduce"] header::after { animation: none !important; opacity: 0 !important; }

    /* ── CARD BADGE — contadores de tipo en cabeceras de grupo ── */
    .card-badge { display:flex; align-items:center; gap:0.25rem; }
    .badge-car, .badge-moto {
        display:inline-flex; align-items:center; gap:0.18rem;
        padding:0.09rem 0.32rem; border-radius:4px;
        font-family:'Space Mono',monospace; font-size:0.58rem; font-weight:700; line-height:1;
    }
    .badge-car  { background:var(--accent-car-dim);  border:1px solid var(--accent-car-glow);  color:var(--accent-car);  }
    .badge-moto { background:var(--accent-moto-dim); border:1px solid var(--accent-moto-glow); color:var(--accent-moto); }
    .badge-emoji { font-size:0.65rem; line-height:1; }

    /* ── PILLS DE CAMPOS INCOMPLETOS — vistas lista y galería ── */
    .pill-missing {
        font-family:'DM Mono',monospace; font-size:0.58rem; font-weight:700;
        padding:0.1rem 0.3rem; border-radius:3px; white-space:nowrap;
    }
    .pill-year    { background:rgba(240,180,41,0.13);  color:#f0b429; border:1px solid rgba(240,180,41,0.27);  }
    .pill-maker   { background:rgba(192,132,252,0.13); color:#c084fc; border:1px solid rgba(192,132,252,0.27); }
    .pill-price   { background:rgba(244,114,182,0.13); color:#f472b6; border:1px solid rgba(244,114,182,0.27); }
    .pill-ref     { background:rgba(56,189,248,0.13);  color:#38bdf8; border:1px solid rgba(56,189,248,0.27);  }
    .pill-img     { background:rgba(163,230,53,0.13);  color:#a3e635; border:1px solid rgba(163,230,53,0.27);  }
    .pill-estante { background:rgba(249,115,22,0.13);  color:#f97316; border:1px solid rgba(249,115,22,0.27);  }

    /* ── INDICADORES DE CAMPO VACÍO EN VISTA TABLA ── */
    .miss-year  { color:#f0b429; font-weight:700; font-size:0.72rem; }
    .miss-maker { color:#c084fc; font-weight:700; font-size:0.72rem; }
    .miss-price { color:#f472b6; font-weight:700; font-size:0.72rem; }