/* Mini-carrito: hoja inferior en móvil y panel flotante en escritorio.
   Autocontenido para poder cargarse en todas las páginas de la tienda. */
.mc { position: fixed; inset: 0; z-index: 10500; display: none; }
.mc.is-open { display: block; }
.mc-backdrop { position: absolute; inset: 0; background: #20282a; opacity: .55; animation: mc-fade .18s ease; }

.mc-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh;
    background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px #0000002e;
    display: flex; flex-direction: column; overflow: hidden;
    animation: mc-up .24s ease;
}

.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eef1ef; flex-shrink: 0; }
.mc-head h2 { display: flex; align-items: center; gap: 10px; font-size: .98rem; font-weight: 700; margin: 0; color: #17262F; }
.mc-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e8f6ef; color: #17794F; font-size: .75rem; }
.mc-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f1f4f2; color: #50564f; display: inline-flex; align-items: center; justify-content: center; }
.mc-close:hover { background: #e4e9e6; }

.mc-body { padding: 14px 16px 4px; overflow-y: auto; }
.mc-product { display: flex; align-items: center; gap: 12px; }
.mc-product img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #eef1ef; flex-shrink: 0; padding: 4px; }
.mc-product-info { flex: 1; min-width: 0; }
.mc-product-name { font-size: .85rem; font-weight: 600; line-height: 1.3; margin: 0; color: #17262F; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-product-qty { display: block; font-size: .76rem; color: #5B7280; margin-top: 3px; }
.mc-product-promo { color: #17794F; font-weight: 600; }
.mc-product-error { display: block; font-size: .72rem; color: #ef3e55; margin-top: 3px; font-weight: 500; }
.mc-product-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-product-price strong { font-size: .92rem; font-weight: 700; color: #17262F; }
.mc-product-price del { font-size: .74rem; color: #8a979f; }

.mc-lines { margin-top: 16px; border-radius: 12px; background: #f6f8f7; padding: 12px 14px; }
.mc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .84rem; padding: 4px 0; color: #17262F; font-variant-numeric: tabular-nums; }
.mc-line > span:first-child { min-width: 0; }
.mc-line > span:last-child { white-space: nowrap; }
.mc-line .tc-muted { color: #5B7280; }
.mc-line.mc-descuento { color: #17794F; }
.mc-line.mc-descuento i { font-size: .7rem; margin-right: 2px; }
.mc-line.mc-total { align-items: center; margin-top: 8px; border-top: 1px solid #e3e8e6; padding-top: 10px; font-weight: 700; }
.mc-line.mc-total strong { font-size: 1.2rem; color: #17262F; }

.mc-foot { padding: 14px 16px 22px; border-top: 1px solid #eef1ef; flex-shrink: 0; }
.mc-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 48px; border: 0; border-radius: 6px;
    background: #2095CE; color: #fff; font-weight: 600; font-size: .94rem;
    text-decoration: none; transition: background .2s;
}
.mc-primary:hover, .mc-primary:focus { background: #186489; color: #fff; text-decoration: none; }
.mc-secondary { width: 100%; height: 44px; border: 0; background: transparent; color: #186489; font-weight: 600; font-size: .87rem; margin-top: 2px; }
.mc-secondary:hover { color: #2095CE; }
.mc-note { margin: 4px 0 0; text-align: center; font-size: .72rem; color: #646464; }
.mc-empty { font-size: .85rem; color: #646464; text-align: center; padding: 20px 0; margin: 0; }

@media (min-width: 992px) {
    .mc-panel { left: auto; top: 24px; right: 24px; bottom: auto; width: 420px; max-height: calc(100vh - 48px); border-radius: 16px; box-shadow: 0 24px 70px #0000004d; animation: mc-in .22s ease; }
    .mc-head { padding: 16px 22px; }
    .mc-body { padding: 18px 22px 4px; }
    .mc-foot { padding: 14px 22px 20px; }
}

/* Salida: lo mismo que la entrada, al revés */
.mc.is-closing { pointer-events: none; }
.mc.is-closing .mc-backdrop { animation: mc-fade-out .22s ease forwards; }
.mc.is-closing .mc-panel { animation: mc-down .24s ease forwards; }

@media (min-width: 992px) {
    .mc.is-closing .mc-panel { animation: mc-out .2s ease forwards; }
}

@keyframes mc-fade { from { opacity: 0; } to { opacity: .55; } }
@keyframes mc-fade-out { from { opacity: .55; } to { opacity: 0; } }
@keyframes mc-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes mc-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(24px); opacity: 0; } }
@keyframes mc-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mc-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

body.mc-open { overflow: hidden; }

/* Cuenta regresiva del cierre automático; se oculta si la persona interactúa con el panel */
.mc-timer { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #2095CE; transform-origin: left center; transform: scaleX(0); pointer-events: none; z-index: 1; }
.mc.is-timing .mc-timer { animation: mc-timer 5s linear forwards; }
.mc.is-paused .mc-timer { opacity: 0; transition: opacity .2s; }
@keyframes mc-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .mc-timer { display: none; } }