/*
 * Listas de compra (inc/listas.php): botón + diálogo de la ficha de
 * producto, y el panel de Mi cuenta > Listas de compra. Reusa tokens y el
 * patrón de botón/tarjeta del resto del tema — nada de color hardcodeado.
 */

/* ============ Botón «Guardar en lista» (ficha de producto) ============ */

.cohasa-lista-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	color: var(--color-ink);
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.cohasa-lista-btn:hover { background: var(--color-field); }

/* ============ Diálogo «Guardar en una lista» ============ */
/* Tarjeta centrada (a diferencia de .cohasa-lightbox, que es pantalla
   completa) — mismo <dialog> nativo, mismo criterio de ::backdrop. */
.cohasa-lista-dialog {
	width: min(360px, calc(100vw - 32px));
	padding: 20px;
	border: none;
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-ink);
	box-shadow: var(--shadow-float);
}
.cohasa-lista-dialog:not([open]) { display: none; }
.cohasa-lista-dialog::backdrop {
	background: color-mix(in srgb, var(--color-ink) 45%, transparent);
}
.cohasa-lista-dialog h2 {
	margin: 0 0 16px;
	font-size: 16px;
}
/* Un solo gap para todo el formulario en vez de margin-bottom repetido por
   campo (antes cada regla traía su propio 12px, desalineado entre sí y
   pegado al título) — cada campo/acción es un hijo directo del form. */
.cohasa-lista-dialog form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cohasa-lista-dialog__campo .cohasa-select { width: 100%; }
.cohasa-lista-dialog input[type="text"],
.cohasa-lista-dialog input[type="number"] {
	width: 100%;
	min-height: var(--input-h);
	padding: var(--input-py) var(--input-px);
	background: var(--input-bg);
	color: var(--color-ink);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	font: inherit;
	font-size: var(--input-fs);
}
.cohasa-lista-dialog input[type="text"]:hover,
.cohasa-lista-dialog input[type="number"]:hover {
	border-color: var(--input-border-hover);
}
.cohasa-lista-dialog input[type="text"]:focus-visible,
.cohasa-lista-dialog input[type="number"]:focus-visible {
	outline: none;
	border-color: var(--input-border-hover);
	box-shadow: 0 0 0 3px var(--input-ring);
}
/* El spinner nativo del navegador (flechitas arriba/abajo) queda con su
   apariencia por defecto pese al resto del input ya re-estilado — los dos
   únicos <input type="number"> del sitio sin el stepper [-]/[+] custom
   (.cohasa-qty, ver woocommerce.css) por delante: este diálogo y
   .lista-item__qty (fila de la lista guardada, más abajo). Se suprime, no
   se reemplaza por stepper: flechas de teclado y scroll con foco lo siguen
   incrementando igual. */
.cohasa-lista-dialog input[type="number"],
.lista-item__qty {
	appearance: textfield;
	-moz-appearance: textfield;
}
.cohasa-lista-dialog input[type="number"]::-webkit-outer-spin-button,
.cohasa-lista-dialog input[type="number"]::-webkit-inner-spin-button,
.lista-item__qty::-webkit-outer-spin-button,
.lista-item__qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.cohasa-lista-dialog__cantidad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.cohasa-lista-dialog__cantidad input { width: 80px; }
.cohasa-lista-dialog__acciones {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.cohasa-lista-dialog p { margin: 0 0 16px; color: var(--color-ink-soft); font-size: 14px; }
/* Confirmar "Eliminar lista" — única acción destructiva del tema con su
   propio botón de color; el resto usa .btn--primary/.btn--secondary. */
.btn--peligro { background: var(--color-error); color: var(--color-on-status); border-color: var(--color-error); }
.btn--peligro:hover { opacity: .9; }

/* ============ Panel «Listas de compra» (Mi cuenta) ============ */

.listas-panel__nueva {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}
.listas-panel__nueva input {
	flex: 1;
	min-height: var(--input-h);
	padding: var(--input-py) var(--input-px);
	background: var(--input-bg);
	color: var(--color-ink);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	font: inherit;
	font-size: var(--input-fs);
}
.listas-panel__nueva input:hover { border-color: var(--input-border-hover); }
.listas-panel__nueva input:focus-visible {
	outline: none;
	border-color: var(--input-border-hover);
	box-shadow: 0 0 0 3px var(--input-ring);
}
.listas-panel__vacio { color: var(--color-ink-soft); }

.lista-card {
	padding: 16px 0;
	border-bottom: 1px solid var(--color-line);
}
.lista-card:last-child { border-bottom: none; }
.lista-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.lista-card__nombre { margin: 0; font-size: 16px; }
.lista-card__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.lista-card__vacia { color: var(--color-ink-soft); font-size: 14px; }

.lista-card__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.lista-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--color-line);
}
.lista-card__items li:first-child.lista-item { border-top: none; }
.lista-item--no-disponible { opacity: .7; }
.lista-item__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius);
	background: var(--color-field);
	overflow: hidden;
}
.lista-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.lista-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-item__name { font-weight: 600; font-size: 14px; color: var(--color-ink); }
.lista-item__name:hover { text-decoration: underline; }
.lista-item__price { font-family: var(--font-mono); font-size: 13px; }
.lista-item__motivo {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 12px;
	color: var(--color-error);
}
.lista-item__qty {
	width: 64px;
	min-height: 36px;
	padding: 4px 8px;
	background: var(--color-field);
	color: var(--color-ink);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius);
	font: inherit;
}
.lista-item__quitar {
	flex-shrink: 0;
	background: none;
	border: none;
	color: var(--color-ink-soft);
	cursor: pointer;
	padding: 8px;
}
.lista-item__quitar:hover { color: var(--color-error); }