/* --------------------------------
    Barra de utilidades de Taopix en escritorio y tablet (Kitoli)

    Convierte la barra original de Taopix (Acceder · Mis proyectos ·
    Carrito) en una franja discreta de 36 px, con la paleta editorial de la
    portada (crema, tinta, beige) y el rojo Kitoli solo como acento.

    Solo CSS, acotado a #tpx-basket-bar: el script de Taopix reescribe el
    texto de los botones y el HTML del botón del carrito, así que los iconos
    van en ::before y no se toca su HTML, sus IDs ni sus eventos. Se carga
    después de tpxMultilineBasketAPI.css y antes de tpxMobileBar.css, que se
    encarga del móvil (por debajo de 768 px).

    Para volver a la barra original basta con no cargar este archivo
    (TaopixBasketBar.tsx).
-------------------------------- */

#tpx-basket-bar,
#tpx-basket-bar .tpx
{
    font-family: var(--font-nunito-sans), Arial, Helvetica, sans-serif;
}

@media only screen and (min-width: 768px) {

    #tpx-basket-bar
    {
        padding: 0;
        background: none;
        border: 0;
        font-size: 13px;
        line-height: 1;
    }

    #tpx-basket-bar .tpx-bar-container
    {
        width: auto;
        margin: 0;
    }

    #tpx-basket-bar ul.tpx-accountLinks
    {
        float: none;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 36px;
    }

    #tpx-basket-bar ul.tpx-accountLinks > li
    {
        display: flex;
        align-items: center;
        margin: 0;
        font-size: 13px;
    }

    /* Separadores finos entre Acceder | Mis proyectos | Carrito */
    #tpx-basket-bar li#tpx-projectslinkli,
    #tpx-basket-bar ul.tpx-accountLinks > li:has(#tpx-basketButtonWrapper)
    {
        border-left: 1px solid #ddd3c4;
    }

    #tpx-basket-bar a#tpx-register,
    #tpx-basket-bar a#tpx-projectslist,
    #tpx-basket-bar a#tpx-basketlink
    {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 16px;
        color: #2a2621;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: none;
        white-space: nowrap;
        background: none;
        border-radius: 0;
        box-shadow: none;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 5px;
        transition: color 0.2s ease, text-decoration-color 0.2s ease;
    }

    #tpx-basket-bar ul.tpx-accountLinks > li:last-child a#tpx-basketlink
    {
        padding-right: 0;
    }

    #tpx-basket-bar a#tpx-register:hover,
    #tpx-basket-bar a#tpx-projectslist:hover,
    #tpx-basket-bar a#tpx-basketlink:hover,
    #tpx-basket-bar a#tpx-register:focus-visible,
    #tpx-basket-bar a#tpx-projectslist:focus-visible,
    #tpx-basket-bar a#tpx-basketlink:focus-visible
    {
        color: #c2171c;
        background: none;
        text-decoration: underline;
        text-decoration-color: #d5b27e;
    }

    #tpx-basket-bar a#tpx-register:focus-visible,
    #tpx-basket-bar a#tpx-projectslist:focus-visible,
    #tpx-basket-bar a#tpx-basketlink:focus-visible
    {
        outline: 2px solid #c2171c;
        outline-offset: -2px;
    }

    /* Iconos de línea, del mismo trazo que los de la botonera del móvil */
    #tpx-basket-bar a#tpx-register::before,
    #tpx-basket-bar a#tpx-projectslist::before,
    #tpx-basket-bar a#tpx-basketlink::before
    {
        content: "";
        flex: none;
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: var(--tpx-icon) center / contain no-repeat;
        mask: var(--tpx-icon) center / contain no-repeat;
    }

    #tpx-basket-bar a#tpx-register
    {
        --tpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
    }

    #tpx-basket-bar a#tpx-projectslist
    {
        --tpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11a1 1 0 0 1 1 1v14l-3.5-2-3.5 2V6'/%3E%3Cpath d='M4 5v13a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M16 7h3a1 1 0 0 1 1 1v12'/%3E%3C/svg%3E");
    }

    #tpx-basket-bar a#tpx-basketlink
    {
        --tpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 10V8.5a4.5 4.5 0 0 1 9 0V10'/%3E%3Cpath d='M3 10h18a9 9 0 0 1-18 0z'/%3E%3C/svg%3E");
    }

    /* Carrito: icono, texto y contador como pastilla oscura discreta (el
       rojo queda para el hover), en vez del botón rojo de Taopix. */
    #tpx-basket-bar #tpx-basketButtonWrapper
    {
        display: flex;
    }

    #tpx-basket-bar .tpx-basketLabel
    {
        display: inline;
        float: none;
        order: 1;
        padding: 0;
    }

    #tpx-basket-bar .tpx-basketCount
    {
        order: 2;
        float: none;
        display: inline-block;
        width: auto;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: #181612;
        color: #fbfaf7;
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        transition: background-color 0.2s ease;
    }

    #tpx-basket-bar a#tpx-basketlink:hover .tpx-basketCount
    {
        background: #c2171c;
    }

    /* Desplegables (Carrito y Mis proyectos): bajo la franja de 36 px, con
       bordes y sombras suaves como las tarjetas de la portada. */
    #tpx-basket-bar .tpx-shopping-cart,
    #tpx-basket-bar .tpx-projectlist
    {
        top: 44px;
        width: 340px;
        padding: 22px;
        background: #fff;
        border: 1px solid #e6dfd3;
        border-radius: 4px;
        box-shadow: 0 18px 44px rgba(24, 22, 18, 0.14);
        z-index: 60;
    }

    #tpx-basket-bar .tpx-shopping-cart:after,
    #tpx-basket-bar .tpx-projectlist:after
    {
        border-bottom-color: #e6dfd3;
    }

    #tpx-basket-bar .tpx-shopping-cart-header
    {
        border-bottom-color: #eee8de;
    }

    #tpx-basket-bar ul.tpx-shopping-cart-items li
    {
        border-bottom-color: #eee8de;
    }

    #tpx-basket-bar .tpx-item-projectname
    {
        color: #181612;
        font-size: 15px;
        font-weight: 600;
    }

    #tpx-basket-bar .tpx-item-layoutname,
    #tpx-basket-bar #tpx-empty-cart,
    #tpx-basket-bar #tpx-empty-state
    {
        color: #8a8279;
    }

    #tpx-basket-bar a.tpx-projectaction
    {
        color: #6e1f2a;
        font-weight: 600;
    }

    #tpx-basket-bar a.tpx-projectaction:hover
    {
        color: #c2171c;
    }

    /* Botones del carrito con el estilo de los de la portada */
    #tpx-basket-bar a.tpx-checkout-button
    {
        padding: 14px;
        border-radius: 2px;
        background: #c2171c;
        box-shadow: none;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.02em;
        transition: background-color 0.2s ease;
    }

    #tpx-basket-bar a.tpx-emptycartbutton
    {
        padding: 6px 12px;
        border: 1px solid #d8d0c4;
        border-radius: 2px;
        background: none;
        box-shadow: none;
        color: #2a2621;
        font-size: 12px;
        font-weight: 600;
    }

    #tpx-basket-bar a.tpx-checkout-button:hover
    {
        background: #a71600;
    }

    #tpx-basket-bar a.tpx-emptycartbutton:hover
    {
        background: #f0ebe2;
        color: #181612;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tpx-basket-bar a,
    #tpx-basket-bar .tpx-basketCount
    {
        transition: none;
    }
}