/**
 * Panel lateral del carrito.
 *
 * Entra por la DERECHA, para no pelear con el panel de categorías que entra por
 * la izquierda. Overlay propio (no el compartido #dt-panel-overlay), porque ése
 * lo cierra el JS del menú y cerraría los dos a la vez.
 *
 * z-index: overlay 24950 y panel 25050 — arriba de la barra inferior (24000) y
 * del panel de categorías (25000), abajo del quickview (99999) y del toast
 * (100000), que son transitorios y tienen que poder taparlo.
 *
 * Paleta del theme (no hay custom properties en style.css, así que los colores
 * van literales, los mismos que usa el resto del sitio):
 *   #b8c5ad salvia · #f3a395 rosa CTA · #e08d7e su hover · #2b3033 tinta
 *   #887f6e tinta suave · #faf9f7 / #f6f5f2 fondos · #e5e2dc bordes
 */

/* =========================================================================
   Overlay
   ========================================================================= */
.dt-cp-overlay {
	position: fixed;
	inset: 0;
	z-index: 24950;
	background: rgba(43, 48, 51, .38);
	opacity: 0;
	transition: opacity .26s ease;
}
.dt-cp-overlay.is-abierto { opacity: 1; }

/* =========================================================================
   El panel
   ========================================================================= */
.dt-cp {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 25050;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: 92vw;
	background: #fff;
	box-shadow: -6px 0 26px rgba(43, 48, 51, .16);
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.4, 0, .2, 1);
	font-family: "Open Sans", sans-serif;
	color: #2b3033;
}
.dt-cp.is-abierto { transform: translateX(0); }

/* La barra de admin de WordPress es fixed y tapaba el encabezado del panel.
   Sólo la ve quien está logueado, pero el panel tiene que empezar debajo. */
.admin-bar .dt-cp { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .dt-cp { top: 46px; }
}

/* Con el panel abierto, el fondo no scrollea. */
.dt-cp-abierto body { overflow: hidden; }

/* La barra inferior del theme le reserva 80px al body; adentro del panel
   estorban, y encima el panel es fixed y no los necesita. */
.dt-cp * { box-sizing: border-box; }

/* =========================================================================
   Encabezado
   ========================================================================= */
.dt-cp-head {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding: 16px 16px 13px;
	border-bottom: 1px solid #e5e2dc;
	background: #faf9f7;
}
.dt-cp-tit {
	margin: 0;
	flex: 1 1 auto;
	font-family: "Special Elite", cursive;
	font-size: 19px;
	line-height: 1.2;
	color: #2b3033;
}
.dt-cp-n {
	flex: 0 0 auto;
	min-width: 23px;
	height: 23px;
	padding: 0 7px;
	border-radius: 999px;
	background: #b8c5ad;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 23px;
	text-align: center;
}
.dt-cp-x {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #887f6e;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.dt-cp-x:hover { background: #efece6; color: #2b3033; }

/* =========================================================================
   Cuerpo
   ========================================================================= */
.dt-cp-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 4px;
}
.dt-cp-body.is-cargando { opacity: .5; pointer-events: none; }

.dt-cp-aviso {
	margin: 12px 14px 0;
	padding: 9px 11px;
	border-radius: 5px;
	background: #eef3e9;
	color: #4a5a3d;
	font-size: 12.5px;
	line-height: 1.45;
}
.dt-cp-aviso.is-malo { background: #f7e2df; color: #8a2b20; }

/* --- vacío --- */
.dt-cp-vacio { padding: 40px 22px; text-align: center; }
.dt-cp-vacio-tit {
	margin: 0 0 7px;
	font-family: "Special Elite", cursive;
	font-size: 17px;
	color: #2b3033;
}
.dt-cp-vacio-sub {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.5;
	color: #887f6e;
}

/* --- los items --- */
.dt-cp-items { margin: 0; padding: 0; list-style: none; }
.dt-cp-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px;
	border-bottom: 1px solid #f0efec;
}
.dt-cp-item-img { flex: 0 0 58px; }
.dt-cp-item-img img {
	display: block;
	width: 58px;
	height: 58px;
	object-fit: cover;
	border-radius: 4px;
	background: #f6f5f2;
}
.dt-cp-item-txt { flex: 1 1 auto; min-width: 0; }
.dt-cp-item-nom {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.32;
	color: #2b3033;
}
.dt-cp-item-pre { margin: 0 0 7px; font-size: 12.5px; color: #887f6e; }
.dt-cp-tachado { text-decoration: line-through; opacity: .65; margin-right: 5px; }
.dt-cp-promo { color: #6f8159; font-weight: 700; }
.dt-cp-cu { opacity: .7; margin-left: 3px; }
.dt-cp-item-tot {
	flex: 0 0 auto;
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	color: #2b3033;
}

/* --- cantidad --- */
.dt-cp-qty { display: flex; align-items: center; gap: 4px; }
.dt-cp-qty button {
	padding: 0;
	border: 1px solid #e5e2dc;
	border-radius: 4px;
	background: #fff;
	color: #6b6355;
	cursor: pointer;
	transition: border-color .12s, color .12s, background .12s;
}
.dt-cp-mas, .dt-cp-menos {
	width: 25px;
	height: 25px;
	font-size: 15px;
	line-height: 1;
}
.dt-cp-qty button:hover { border-color: #b8c5ad; color: #2b3033; background: #f7f9f5; }
.dt-cp-qty-n {
	min-width: 27px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
}
.dt-cp-quitar {
	margin-left: 5px;
	padding: 3px 8px !important;
	font-size: 11px;
	border-color: transparent !important;
	color: #a89f92 !important;
}
.dt-cp-quitar:hover { color: #8a2b20 !important; border-color: #e6c9c4 !important; background: #fdf4f2 !important; }

/* =========================================================================
   El progreso hacia el descuento — lo que hace útil al panel
   ========================================================================= */
.dt-cp-prog { padding: 4px 14px 0; }
.dt-cp-prog-item {
	margin: 10px 0 0;
	padding: 11px 12px;
	border-radius: 6px;
	background: #f7f9f5;
	border: 1px solid #e6ece1;
}
.dt-cp-prog-item.is-listo { background: #eef3e9; border-color: #cfdcc2; }
.dt-cp-prog-nom {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	color: #5c6b4d;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dt-cp-barra {
	height: 6px;
	border-radius: 999px;
	background: #e2e8da;
	overflow: hidden;
	margin: 0 0 6px;
}
.dt-cp-barra span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #b8c5ad;
	transition: width .35s ease;
}
.dt-cp-prog-item.is-listo .dt-cp-barra span { background: #8ea87a; }
.dt-cp-prog-txt {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b6355;
}
.dt-cp-prog-txt strong { color: #4a5a3d; }
.dt-cp-prog-sola {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: 11px;
	opacity: .75;
}

/* =========================================================================
   Totales
   ========================================================================= */
.dt-cp-totales {
	margin: 14px 14px 0;
	padding: 13px 0 0;
	border-top: 1px solid #e5e2dc;
}
.dt-cp-linea {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 13px;
	color: #6b6355;
}
.dt-cp-linea.is-total { font-size: 15px; color: #2b3033; }
.dt-cp-linea.is-total strong { font-size: 17px; }

/* El comparador: mismo criterio que el de la ficha — nunca se anuncia un
   ahorro sin decir que es pagando por transferencia, porque con otro medio
   entra un cargo que lo cancela exacto. */
.dt-cp-comparador {
	border-radius: 6px;
	background: #f7f9f5;
	border: 1px solid #e6ece1;
	padding: 11px 12px;
}
.dt-cp-comp-fila {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 12.5px;
	color: #887f6e;
	padding: 3px 0;
}
.dt-cp-comp-fila.is-mejor { color: #2b3033; font-size: 14px; }
.dt-cp-comp-fila.is-mejor .dt-cp-comp-val { font-weight: 700; font-size: 16px; }
.dt-cp-comp-lb { min-width: 0; }
.dt-cp-comp-val { white-space: nowrap; }
.dt-cp-comp-fila:not(.is-mejor) .dt-cp-comp-val { text-decoration: line-through; opacity: .75; }
.dt-cp-comp-ahorro {
	margin: 7px 0 0;
	padding-top: 7px;
	border-top: 1px dashed #d6e0cb;
	font-size: 12px;
	line-height: 1.4;
	color: #5c6b4d;
}
.dt-cp-envio {
	margin: 9px 0 0;
	font-size: 11.5px;
	color: #a89f92;
}

/* =========================================================================
   Botones
   ========================================================================= */
.dt-cp-acciones {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border-top: 1px solid #e5e2dc;
	background: #faf9f7;
}
.dt-cp-btn {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border-radius: 2em;
	text-align: center;
	text-decoration: none !important;
	font-family: "Special Elite", cursive;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.dt-cp-btn.is-primario {
	background: #f3a395;
	border: 2px solid #f3a395;
	color: #fff !important;
}
.dt-cp-btn.is-primario:hover { background: #e08d7e; border-color: #e08d7e; }
.dt-cp-btn.is-ghost {
	background: #fff;
	border: 2px solid #b8c5ad;
	color: #7d8d70 !important;
}
.dt-cp-btn.is-ghost:hover { background: #f4f7f1; }

/* =========================================================================
   Mobile
   ========================================================================= */
@media (max-width: 480px) {
	.dt-cp { width: 100%; max-width: 100%; }
	.dt-cp-item { padding: 12px 13px; }
	.dt-cp-item-img, .dt-cp-item-img img { flex-basis: 50px; width: 50px; height: 50px; }
	/* La barra inferior del theme vive abajo: los botones no deben quedar
	   debajo de ella. */
	.dt-cp-acciones { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	.dt-cp, .dt-cp-overlay, .dt-cp-barra span { transition: none; }
}