/**
 * CARRITO — botón de la cabecera y carrito lateral (FarmaciaCien).
 *
 * BLOQUE     des-cartbtn (__amount, __n), des-side (__head, __title, __close,
 *            __ok, __msg, __body, __foot, __ctl, __total, __btns, __checkout,
 *            __empty), des-side-host, des-side-scrim, des-line, des-stepper,
 *            des-del, des-sumrow
 * TPL        themes/farmaciacien/modules/dessidecart/views/templates/{hook/nav2,
 *            front/cart-head, front/cart-items, front/cart-footer}.tpl
 * JS         modules/dessidecart/views/js/front.js (≥ 1.2.0), sin copia en el tema
 * ACOPLADO   estados que pone el JS del módulo: .des-sidecart--open,
 *            .des-sidecart--empty, .des-sidecart--busy, .des-sidecart-overlay--open,
 *            .des-sidecart__body--loading, body.des-body-lock.
 *            des-button (--sq, --ghost) y des-ico vienen de theme.css (_fc-base.scss).
 *
 * SUSTITUYE ENTERA a modules/dessidecart/views/css/front.css (el gestor de
 * assets sirve esta en su lugar): aquí está todo lo que pinta el módulo.
 * Medidas copiadas de private/diseño/assets/css/fc.css (.fc-cartbtn, .fc-side,
 * .fc-line, .fc-stepper, .fc-del, .fc-row, .fc-total y bloques 1024/767).
 *
 * Capas, como en la maqueta: en escritorio la capa oscura cubre también la
 * cabecera; hasta 1024 (cabecera compacta y fija) queda por debajo de ella y
 * la cabecera se sigue viendo. El panel va siempre por encima de todo.
 */

/* ── Botón de la cabecera ─────────────────────────────────────────────── */
.des-cartbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 26px;
    background: var(--color-dark);
    color: var(--color-accent-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.des-cartbtn:hover,
.des-cartbtn:focus-visible {
    background: var(--color-dark-hover);
    color: var(--color-accent-text);
}

.des-cartbtn__n {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 11px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
}

/* ── Capa oscura ──────────────────────────────────────────────────────── */
.des-side-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgb(23 33 43 / 42%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
}

.des-side-scrim.des-sidecart-overlay--open {
    opacity: 1;
    visibility: visible;
}

body.des-body-lock {
    overflow: hidden;
}

/* ── Contenedor que recorta el panel mientras sigue en la cabecera ────── */
.des-side-host {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    overflow: hidden;
    pointer-events: none;
}

.des-side-host:not(:has(.des-side)) {
    display: none;
}

.des-side-host .des-side {
    pointer-events: auto;
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.des-side {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    width: min(460px, 100vw);
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: -16px 0 48px rgb(11 30 27 / 22%);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s .25s;
}

.des-side.des-sidecart--open {
    transform: none;
    visibility: visible;
    transition: transform .25s ease;
}

.des-side__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 12px;
}

.des-side__title h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.des-side__title span {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-soft);
}

.des-side__close {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-field);
    color: var(--color-text);
    cursor: pointer;
}

.des-side__ok,
.des-side__msg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 24px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgb(14 107 92 / 8%);
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 700;
}

.des-side__ok[hidden],
.des-side__msg[hidden] {
    display: none;
}

.des-side__ok i {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-style: normal;
}

.des-side__msg {
    margin-top: 8px;
    background: rgb(180 35 63 / 8%);
    color: #b4233f;
}

.des-side__body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 24px 0;
    transition: opacity .15s;
}

.des-side.des-sidecart--busy .des-side__body,
.des-side__body.des-sidecart__body--loading {
    opacity: .6;
}

.des-side__empty {
    margin: 0;
    padding: 24px 0;
    color: var(--color-text-soft);
    font-size: 15px;
}

/* ── Línea ────────────────────────────────────────────────────────────── */
.des-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px 0;
}

.des-line + .des-line {
    border-top: 1px solid #dce6e3;
}

.des-line__img {
    display: block;
    width: 72px;
    height: 72px;
    padding: 6px;
    border-radius: 12px;
    background: var(--color-bg);
    box-shadow: 0 0 0 1px #dce6e3 inset;
}

.des-line__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.des-line__brand {
    font-size: 13px;
    font-weight: 700;
}

.des-line h3 {
    margin: 2px 0 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
}

.des-line h3 a {
    color: var(--color-text);
    text-decoration: none;
}

.des-line__attr {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--color-text-soft);
}

.des-side__ctl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.des-side__ctl b {
    display: block;
    font-size: 16px;
    text-align: right;
}

.des-side__ctl .des-old {
    display: block;
    font-size: 12px;
    color: var(--color-price-old);
    text-align: right;
    text-decoration: line-through;
}

/* ── Selector de cantidad ─────────────────────────────────────────────── */
.des-stepper {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border-radius: 12px;
    background: #f2f6f5;
}

.des-stepper button {
    width: 38px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.des-stepper button:disabled {
    cursor: default;
}

.des-stepper input {
    width: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.des-stepper input::-webkit-inner-spin-button,
.des-stepper input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* ── Eliminar ─────────────────────────────────────────────────────────── */
.des-del {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--color-text-soft);
    cursor: pointer;
}

.des-del:hover {
    background: rgb(180 35 63 / 8%);
    color: #b4233f;
}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.des-side__foot {
    padding: 16px 24px 24px;
    box-shadow: 0 -8px 20px rgb(23 33 43 / 6%);
}

.des-side.des-sidecart--empty .des-side__foot {
    display: none;
}

.des-sumrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 15px;
    color: var(--color-text-soft);
}

.des-sumrow b {
    color: var(--color-text);
}

.des-side__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgb(14 107 92 / 8%);
}

.des-side__total span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.des-side__total b {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-accent);
}

.des-side__btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.des-side__btns .des-button {
    width: 100%;
}

.des-side__btns .des-side__checkout {
    min-height: 54px;
    font-size: 16px;
}

/* ── Hasta 1024: cabecera compacta ────────────────────────────────────── */
@media (max-width: 1024px) {
    .des-side-scrim {
        z-index: calc(var(--z-header) - 1);
    }

    .des-cartbtn {
        height: 44px;
        padding: 0 14px;
        font-size: 13px;
    }

    .des-cartbtn__amount {
        display: none;
    }

    .des-cartbtn__n {
        min-width: 0;
        padding: 0;
        background: none;
        color: var(--color-accent-text);
        font-size: 13px;
    }
}

/* ── Móvil: panel desde abajo, bajo la cabecera ───────────────────────── */
@media (max-width: 767px) {
    .des-side {
        top: 96px;
        width: 100vw;
        border-radius: 24px 24px 0 0;
        transform: translateY(105%);
    }

    .des-side.des-sidecart--open {
        transform: none;
    }

    .des-side__head {
        padding: 16px 16px 12px;
    }

    .des-side__ok,
    .des-side__msg {
        margin-inline: 16px;
    }

    .des-side__body {
        padding: 6px 16px 0;
    }

    .des-side__foot {
        padding: 16px 16px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .des-side,
    .des-side-scrim {
        transition: none;
    }
}