/* ============================================================================
   Cistella de pressupost en forma de camió + barra superior fixa
   ----------------------------------------------------------------------------
   Aquest fitxer s'ha afegit per:
     1. Fixar la capçalera (logo, telèfons, idiomes i camió de pressupost) i el
        menú de navegació, perquè sempre siguin visibles en fer scroll.
     2. Convertir la icona de cistella en un camió 3D.
     3. Donar suport visual a l'animació de càrrega del paquet que s'executa
        des de js/camio_cistella.js.

   Els colors surten dels tokens que ja fa servir el web fosc d'Incafe 2000,
   de manera que l'efecte sembla part del disseny i no un afegit.
   ========================================================================== */

:root {
    --camio-header-h: 67px;
    --camio-widgets-h: 0px;
    --camio-z-header: 1500;
    --camio-ink: #23272e;
    --camio-ink-2: #191d22;
    --camio-steel: #c7d0da;
    --camio-accent: #f2a692;
    --camio-accent-strong: #d4775f;
    --camio-glow: rgba(242, 166, 146, .55);
}

/* ---------------------------------------------------------------------------
   1. Barra superior fixa
   ---------------------------------------------------------------------------
   #capa_logo va dins d'un <div class="capa_logo capa_logo_principal"> que
   genera logo.php. Com que un element sticky només pot recórrer l'alçada del
   seu pare, posem el sticky al wrapper i el fons al wrapper. Així la capçalera
   queda enganxada a dalt de tot mentre la pàgina fa scroll.
   ------------------------------------------------------------------------ */
.capa_logo_principal {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: var(--camio-z-header);
    background:
        linear-gradient(180deg, rgba(48, 53, 61, .985) 0%, rgba(34, 38, 44, .995) 100%);
    border-bottom: 1px solid rgba(242, 166, 146, .18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05),
        0 10px 28px rgba(0, 0, 0, .34);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.capa_logo_principal::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(242, 166, 146, .55) 18%,
            rgba(242, 166, 146, .18) 50%,
            rgba(242, 166, 146, .55) 82%,
            transparent 100%);
    opacity: .75;
}

#capa_logo {
    /* Alçada fixa: si es fes dependre de --camio-header-h, el ResizeObserver
       i el propi min-height entrarien en un bucle de creixement. */
    min-height: 67px;
    padding: 0 16px;
    box-sizing: border-box;
}

#capa_logo #img_tel > img {
    height: 42px !important;
    width: auto;
    flex: 0 0 auto;
}

#sup_dreta {
    gap: 2px;
    flex-wrap: nowrap;
}

/* El menú també queda enganxat, just a sota de la capçalera. El JS actualitza
   --camio-header-h i --camio-widgets-h amb les alçades reals. */
#contenidor_menu {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--camio-header-h) + var(--camio-widgets-h));
    z-index: calc(var(--camio-z-header) - 1);
    background:
        linear-gradient(180deg, rgba(40, 45, 52, .985) 0%, rgba(29, 33, 38, .995) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

/* Els desplegables han de quedar per damunt de la barra fixa. */
#navmenu-h li ul.nivell_2 {
    z-index: calc(var(--camio-z-header) + 5);
}

html {
    scroll-padding-top: calc(var(--camio-header-h) + var(--camio-widgets-h) + 48px);
}

/* ---------------------------------------------------------------------------
   2. La icona de cistella és un camió
   ------------------------------------------------------------------------ */
#cistella_pressupost {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 82px;
    height: 44px;
    padding: 0 !important;
    margin: 0 8px 0 4px;
    border: 1px solid rgba(242, 166, 146, .36);
    border-radius: 12px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .035) 52%, rgba(0, 0, 0, .08) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -1px 0 rgba(0, 0, 0, .28),
        0 4px 14px rgba(0, 0, 0, .24);
    opacity: 1 !important;
    overflow: visible;
    isolation: isolate;
    transition:
        transform .22s cubic-bezier(.22, 1, .36, 1),
        border-color .22s ease,
        box-shadow .22s ease;
}

#cistella_pressupost::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg,
            transparent 18%,
            rgba(255, 255, 255, .24) 48%,
            transparent 76%);
    transform: translateX(-145%);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

#cistella_pressupost:hover {
    transform: translateY(-1px);
    border-color: rgba(242, 166, 146, .7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 7px 20px rgba(0, 0, 0, .32),
        0 0 18px rgba(242, 166, 146, .16);
}

#cistella_pressupost:hover::after {
    transform: translateX(145%);
}

#cistella_pressupost:focus-visible {
    outline: 2px solid var(--camio-accent);
    outline-offset: 3px;
}

#cistella_pressupost img {
    display: block;
    position: relative;
    z-index: 1;
    width: 68px;
    height: auto;
    margin: 0;
    float: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .32));
    transition: opacity .2s ease, transform .2s ease;
}

#cistella_pressupost.camio-dock-away img {
    opacity: .2;
    transform: scale(.92);
    filter: grayscale(.7) drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}

/* Comptador de línies del pressupost */
.camio-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background:
        linear-gradient(180deg, #f6b6a5 0%, #e78a70 55%, #c9634b 100%);
    box-shadow:
        0 2px 7px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #2a1410;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    pointer-events: none;
}

.camio-badge.is-visible {
    display: inline-flex;
}

/* Icones de cistella antigues que ara també mostren el camió. */
#btn_dcistella {
    background: linear-gradient(160deg, #343b44 0%, #20252b 100%);
    border: 1px solid rgba(242, 166, 146, .35);
    border-radius: 12px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

#btn_dcistella img {
    width: 40px;
    height: auto;
    float: none;
    margin: 4px auto;
    display: block;
}

#img_carro {
    width: 38px;
    height: auto;
    display: block;
}

/* Animació breu de confirmació a la icona fixa. */
@keyframes camio-dock-land {
    0% { transform: translateY(0) scale(1); }
    28% { transform: translateY(-3px) scale(1.09); }
    55% { transform: translateY(0) scale(.97); }
    78% { transform: translateY(-1px) scale(1.025); }
    100% { transform: translateY(0) scale(1); }
}

#cistella_pressupost.camio-just-landed {
    animation: camio-dock-land .52s cubic-bezier(.22, 1, .36, 1);
}

@keyframes camio-badge-pop {
    0% { transform: scale(.45); opacity: .4; }
    48% { transform: scale(1.24); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.camio-badge.camio-badge-pop {
    animation: camio-badge-pop .42s cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
   3. Escena de l'animació
   ------------------------------------------------------------------------ */
#camio-cistella-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000002; /* per damunt del modal de talls (9000), sota el popup */
    pointer-events: none;
    overflow: hidden;
    contain: layout style;
}

.camio-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 183px;
    pointer-events: none;
    transform-origin: 0 0;
    will-change: transform;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .34));
}

.camio-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Les rodes giren suaument mentre el camió viatja. */
.camio-wheel {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: camio-wheel-spin .62s linear infinite;
}

@keyframes camio-wheel-spin {
    to { transform: rotate(360deg); }
}

/* El paquet és un element HTML damunt de la caixa de càrrega. Així el podem
   fer viatjar des de la línia del producte fins al camió amb coordenades
   reals de pantalla. */
.camio-package {
    position: absolute;
    top: 0;
    left: 0;
    width: 22%;
    aspect-ratio: 64 / 58;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    filter: drop-shadow(0 9px 13px rgba(0, 0, 0, .35));
}

.camio-package svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* El lleuger halo que marca el punt de recollida. */
.camio-ring {
    position: fixed;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border: 2px solid rgba(242, 166, 146, .85);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .18),
        0 0 24px rgba(242, 166, 146, .55),
        inset 0 0 18px rgba(242, 166, 146, .22);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Pols i espurnes de la frenada. */
.camio-dust {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
            rgba(255, 255, 255, .22) 0%,
            rgba(198, 172, 158, .28) 45%,
            rgba(120, 130, 140, 0) 72%);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Línies d'aire per donar velocitat, sense estridències. */
.camio-speed {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
            rgba(242, 166, 146, 0) 0%,
            rgba(242, 166, 146, .8) 42%,
            rgba(255, 255, 255, .65) 58%,
            rgba(242, 166, 146, 0) 100%);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Ressaltat breu de la línia d'origen mentre el camió la visita. */
@keyframes camio-source-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(242, 166, 146, 0); }
    35% { box-shadow: inset 0 0 0 1px rgba(242, 166, 146, .65); }
}

tr.camio-source-line > td {
    background-image: linear-gradient(rgba(242, 166, 146, .13), rgba(242, 166, 146, .13)) !important;
    animation: camio-source-pulse 1.35s ease-in-out;
}

/* Missatge per a lectors de pantalla. */
.camio-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Mentre el camió viatja, el popup de confirmació es col·loca just sota la
   barra fixa, sense tapar ni el menú ni la línia on treballa el camió. */
body.camio-animating #popup {
    top: calc(var(--camio-header-h) + var(--camio-widgets-h) + 72px);
}

@media (max-width: 890px) {
    body.camio-animating #popup {
        top: calc(var(--camio-header-h) + var(--camio-widgets-h) + 60px);
    }
}

/* ---------------------------------------------------------------------------
   4. Adaptació a mòbil
   ------------------------------------------------------------------------ */
@media (max-width: 890px) {
    #capa_logo {
        min-height: 0;
        padding: 8px 10px;
    }

    #capa_logo #img_tel > img {
        height: 38px !important;
    }

    /* A mòbil, la barra d'eines (menú, cistella i login) també queda fixa. */
    #widgets {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--camio-header-h);
        left: auto !important;
        right: auto !important;
        z-index: calc(var(--camio-z-header) - 1);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 12px !important;
        box-sizing: border-box;
        background:
            linear-gradient(180deg, rgba(42, 47, 54, .99) 0%, rgba(31, 35, 41, .995) 100%);
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .26);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    #menu_btn {
        float: none !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
    }

    #menu_btn img {
        width: 30px !important;
        cursor: pointer;
    }

    #i_login {
        float: none !important;
    }

    #i_cistella {
        float: none !important;
        width: auto !important;
    }

    #i_cistella_pressupost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #cistella_pressupost_mobile {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 38px;
        padding: 0;
        border: 1px solid rgba(242, 166, 146, .36);
        border-radius: 10px;
        background:
            linear-gradient(155deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 60%, rgba(0, 0, 0, .08) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .14),
            0 4px 12px rgba(0, 0, 0, .24);
        opacity: 1;
    }

    #cistella_pressupost_mobile img {
        display: block;
        width: 58px;
        height: auto;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
        transition: opacity .2s ease, transform .2s ease;
    }

    #cistella_pressupost_mobile.camio-dock-away img {
        opacity: .2;
        transform: scale(.92);
        filter: grayscale(.7) drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
    }

    #cistella_pressupost_mobile.camio-just-landed {
        animation: camio-dock-land .52s cubic-bezier(.22, 1, .36, 1);
    }

    #cistella_pressupost_mobile:focus-visible {
        outline: 2px solid var(--camio-accent);
        outline-offset: 3px;
    }

    #contenidor_menu {
        top: calc(var(--camio-header-h) + var(--camio-widgets-h));
        max-height: calc(100vh - var(--camio-header-h) - var(--camio-widgets-h));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #cistella_pressupost {
        width: 70px;
        height: 40px;
        margin-right: 4px;
    }

    #cistella_pressupost img {
        width: 58px;
    }

    .camio-stage {
        filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .32));
    }
}

@media (prefers-reduced-motion: reduce) {
    #camio-cistella-overlay {
        display: none !important;
    }

    #cistella_pressupost,
    #cistella_pressupost::after,
    #cistella_pressupost img {
        transition: none !important;
        animation: none !important;
    }

    .camio-wheel {
        animation: none !important;
    }
}

@media print {
    #camio-cistella-overlay,
    .camio-badge {
        display: none !important;
    }
}