/* ═══════════════════════════════════════════════════════════════
   css-tiles-timeline.css
   Efectos de los tiles de galeria (glow tipado, barrido de luz, search-links, drag handle) y vista CRONOLOGIA completa.
   (Parte de styles.css — el orden de <link> respeta la cascada original)
   ═══════════════════════════════════════════════════════════════ */

    /* Glow tintado según el tipo del vehículo */
    .gallery-tile[data-type="car"]:hover {
    border-color: var(--accent-car);
    box-shadow: var(--shadow-lift), 0 0 0 1px var(--accent-car-glow), 0 6px 28px var(--accent-car-dim);
    }
    .gallery-tile[data-type="moto"]:hover {
    border-color: var(--accent-moto);
    box-shadow: var(--shadow-lift), 0 0 0 1px var(--accent-moto-glow), 0 6px 28px var(--accent-moto-dim);
    }
    .gallery-tile.incomplete-row { border-color:rgba(239,68,68,0.28); }
    .gtile-img {
    position:relative;
    width:100%; aspect-ratio:4/3;
    background:var(--bg-element);
    overflow:hidden;
    }
    .gtile-img img {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .gallery-tile:hover .gtile-img img { transform:scale(1.05); }
    /* Barrido de luz sobre la imagen al pasar el cursor */
    .gtile-img::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, var(--sheen) 50%, transparent 62%);
    transform:translateX(-130%);
    }
    .gallery-tile:hover .gtile-img::after {
    transform:translateX(130%);
    transition:transform 0.65s var(--ease-out);
    }
    .gtile-ph {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem;
    color:var(--text-dim);
    background:repeating-linear-gradient(45deg, var(--bg-element), var(--bg-element) 10px, var(--bg-surface) 10px, var(--bg-surface) 20px);
    }
    .gtile-ph svg { width:32px; height:32px; opacity:0.45; }
    .gtile-ph span { font-family:'Space Mono', monospace; font-size:0.55rem; letter-spacing:0.08em; opacity:0.6; }

    .gtile-actions {
    position:absolute; bottom:0.5rem; right:0.5rem;
    display:flex; align-items:center; gap:0.3rem;
    opacity:0; transition:opacity var(--transition);
    z-index:3;
    }
    .gallery-tile:hover .gtile-actions { opacity:1; }
    .gtile-pills {
    position:absolute; left:0; right:0; bottom:0;
    display:flex; flex-wrap:wrap; gap:0.25rem;
    padding:0.4rem 0.5rem 0.35rem;
    background:linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.32) 65%, transparent 100%);
    z-index:2; pointer-events:none;
    }
    html[data-theme="light"] .gtile-pills {
    background:linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 65%, transparent 100%);
    }
    .gtile-actions span {
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    border-radius:6px; font-size:0.85rem; cursor:pointer;
    background:var(--gtile-action-bg); backdrop-filter:blur(6px); border:1px solid var(--border-bright);
    }
    .gtile-actions .gt-edit { color:var(--accent-car); }
    .gtile-actions .gt-edit:hover { background:var(--accent-car-dim); }
    .gtile-actions .gt-del  { color:var(--accent-red); }
    .gtile-actions .gt-del:hover  { background:rgba(255,77,106,0.15); }
    /* Search links dentro de gtile-actions: mismo tamaño que edit/del */
    .gtile-actions .wish-search-link {
        display:inline-flex; align-items:center; justify-content:center;
        width:24px; height:24px; border-radius:6px;
        background:var(--gtile-action-bg); backdrop-filter:blur(6px);
        border:1px solid var(--border-bright);
        padding:0.22rem; flex-shrink:0;
        text-decoration:none; line-height:1;
    }
    .gtile-actions .wish-search-link img { width:13px; height:13px; display:block; border-radius:2px; flex-shrink:0; }
    .gtile-actions .wish-search-link:hover {
        border-color:var(--accent-car);
        transform:translateY(-1px);
    }
    /* Búsqueda anclada a la izquierda del tile */
    .gtile-search-actions {
        position:absolute; bottom:0.5rem; left:0.5rem;
        display:flex; align-items:center; gap:0.3rem;
        opacity:0; transition:opacity var(--transition);
        z-index:3;
    }
    .gallery-tile:hover .gtile-search-actions { opacity:1; }
    /* Botón de búsqueda del tile — clase dedicada, bulletproof */
    .gtile-wslink {
        /* Tamaño fijo: idéntico a .gtile-actions span */
        width:24px; height:24px;
        min-width:24px; max-width:24px;
        /* overflow:hidden es CRÍTICO: impide que el favicon expanda el botón */
        overflow:hidden;
        /* Layout interno */
        display:flex; align-items:center; justify-content:center;
        border-radius:6px;
        background:var(--gtile-action-bg);
        backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
        border:1px solid var(--border-bright);
        text-decoration:none; cursor:pointer;
        flex-shrink:0;
        transition:border-color 0.15s, transform 0.15s;
    }
    /* La imagen del favicon: anula .gtile-img img (que la sacaba de flujo con position:absolute) */
    .gtile-search-actions .gtile-wslink img {
        position:static; inset:auto;
        width:16px; height:16px;
        min-width:16px; max-width:16px;
        min-height:16px; max-height:16px;
        display:block; flex-shrink:0;
        object-fit:contain; pointer-events:none;
        border-radius:2px;
        transition:none; transform:none;
    }
    .gtile-wslink:hover {
        border-color:var(--accent-car);
        transform:translateY(-1px);
    }
    .gtile-nota {
    margin-left:auto;
    align-self:center;
    flex-shrink:0;
    width:5px; height:5px;
    background:var(--accent-gold);
    border-radius:50%;
    box-shadow:0 0 5px rgba(240,180,41,0.5);
    pointer-events:none;
    }
    /* Handle de arrastre — esquina superior izquierda, visible en hover */
    .gtile-drag-handle {
    position:absolute; top:0.5rem; left:0.5rem;
    width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    border-radius:6px;
    background:var(--gtile-action-bg); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid var(--border-bright);
    color:var(--text-secondary);
    cursor:grab;
    opacity:0; transition:opacity var(--transition), color var(--transition), border-color var(--transition);
    z-index:3; pointer-events:none;
    }
    .gtile-drag-handle i { font-size:0.85rem; line-height:1; }
    .gallery-tile:hover .gtile-drag-handle { opacity:1; }
    .gallery-tile.shelf-dragging .gtile-drag-handle { opacity:0; }
    .gtile-cap { padding:0.55rem 0.65rem 0.6rem; }
    .gtile-title {
    font-family:'Outfit', sans-serif; font-size:0.82rem; font-weight:600;
    color:var(--text-primary); line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0.2rem;
    }
    .gtile-title b { font-weight:700; color:var(--text-primary); white-space:nowrap; }
    .gt-flag { font-family:'Twemoji Country Flags', sans-serif; font-size:0.85rem; line-height:1; flex-shrink:0; }
    .gt-model { font-weight:400; color:var(--text-secondary); }
    .gtile-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);
    }
    .gtile-meta .gt-price { color:var(--accent-gold); font-weight:700; margin-left:auto; }
    .gtile-meta .gt-price-ref { color:var(--accent-gold); font-weight:600; opacity:0.68; margin-left:auto; }
    .gallery-tile:hover .gtile-meta .gt-price-ref { opacity:1; }
    body.prices-hidden .gtile-meta .gt-price { display:none; }
    body.prices-hidden .gtile-meta .gt-price-ref { display:none; }
    .gtile-meta .gt-dim { color:var(--text-dim); }
    .gallery-empty { padding:3rem 1rem; text-align:center; color:var(--text-dim); font-family:'Space Mono', monospace; font-size:0.85rem; }
    @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

    /* ── TIMELINE VIEW ── */
    #timeline-container {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        padding-bottom: 0.5rem;
    }
    #timeline-container::-webkit-scrollbar { height: 8px; }
    .tl-track {
        position: relative;
        height: 560px;
        min-width: 100%;
    }
    .tl-rail {
        position: absolute;
        left: 0; right: 0; top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(90deg,
            transparent 0,
            var(--border-bright) 2%,
            var(--border-bright) 98%,
            transparent 100%);
    }
    /* Big faded decade watermark behind its cluster */
    .tl-decade-bg {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Outfit', sans-serif;
        font-size: 6rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        color: var(--text-primary);
        opacity: 0.035;
        pointer-events: none;
        white-space: nowrap;
        user-select: none;
        z-index: 0;
    }
    /* Decade tick + label sitting on the rail */
    .tl-decade-mark {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        pointer-events: none;
        z-index: 1;
    }
    .tl-decade-mark .tl-dtick {
        width: 1px; height: 18px;
        background: var(--border-glow);
    }
    .tl-decade-mark .tl-dlabel {
        font-family: 'Space Mono', monospace;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-secondary);
        background: var(--bg-base);
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        letter-spacing: 0.03em;
    }
    /* Zona invisible que cubre el recorrido completo de una década,
       usada por el scrubber horizontal para mantener el resaltado activo */
    .tl-decade-zone {
        position: absolute;
        top: 0; bottom: 0;
        pointer-events: none;
        z-index: 0;
    }
    /* Card anchor: zero-width, positioned by its center x */
    .tl-card {
        position: absolute;
        top: 0; bottom: 0;
        width: 0;
        z-index: 2;
        animation: fadeUp 0.45s cubic-bezier(0.16,1,0.3,1) both;
        animation-delay: calc(var(--si, 0) * 36ms);
    }
    .tl-tile {
        position: absolute;
        width: 190px;
        left: -95px;
    }
    .tl-card.top    .tl-tile { bottom: calc(50% + 48px); }
    .tl-card.bottom .tl-tile { top:    calc(50% + 48px); }
    .tl-connector {
        position: absolute;
        left: -0.5px;
        width: 1px;
        height: 48px;
        background: var(--border-bright);
    }
    .tl-card.top    .tl-connector { bottom: 50%; }
    .tl-card.bottom .tl-connector { top:    50%; }
    .tl-dot {
        position: absolute;
        left: 0; top: 50%;
        width: 10px; height: 10px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid var(--bg-base);
        z-index: 3;
        transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
    }
    .tl-card:hover .tl-dot { transform: translate(-50%, -50%) scale(1.4); }
    .tl-card:hover .tl-dot.car  { box-shadow: 0 0 14px var(--accent-car-glow); }
    .tl-card:hover .tl-dot.moto { box-shadow: 0 0 14px var(--accent-moto-glow); }
    .tl-dot.car  { background: var(--accent-car);  box-shadow: 0 0 8px var(--accent-car-glow); }
    .tl-dot.moto { background: var(--accent-moto); box-shadow: 0 0 8px var(--accent-moto-glow); }
    .tl-year {
        position: absolute;
        left: 11px; top: 50%;
        transform: translateY(-50%);
        font-family: 'Space Mono', monospace;
        font-size: 0.74rem;
        font-weight: 700;
        white-space: nowrap;
        z-index: 3;
    }
    .tl-year.car  { color: var(--accent-car); }
    .tl-year.moto { color: var(--accent-moto); }
    /* Reuse gallery tile look; tighten the caption since year is gone */
    .tl-tile .gallery-tile { width: 100%; }