/*
 * panel.css — panel rápido del vendedor. Móvil primero, de verdad.
 *
 * Objetivos concretos, no decorativos:
 *   - Objetivos táctiles de 44 px mínimo: se usa con una mano, de pie, en un local.
 *   - inputs de 16 px o más: por debajo de eso iOS hace zoom al enfocar y descoloca
 *     la pantalla.
 *   - Sin dependencias, sin fuentes remotas, sin iconos de terceros.
 *   - Contraste suficiente para una pantalla con brillo bajo bajo luz de local.
 */

/*
 * NADA DE @media (prefers-color-scheme) AQUI.
 *
 * La version 0.1.0 declaraba una paleta propia y la invertia con esa consulta.
 * Era un bug: el panel vive DENTRO del tema, y el tema no sigue la preferencia
 * del sistema. Con el sistema en oscuro y el tema en claro, el panel se ponia
 * oscuro sobre pagina blanca. La preferencia del sistema no dice nada sobre en
 * que paleta esta renderizando el tema; lo unico que lo sabe es el tema.
 *
 * Todo se deriva de la paleta del tema y de currentColor via color-mix.
 */
.sv-panel {
	--sv-tinta:  var(--wp--preset--color--contrast, #16181c);
	--sv-fondo:  var(--wp--preset--color--base, #ffffff);
	--sv-tinta-suave: var(--wp--preset--color--accent-4, color-mix(in srgb, currentColor 62%, transparent));

	--sv-linea:       color-mix(in srgb, currentColor 18%, transparent);
	--sv-fondo-suave: color-mix(in srgb, currentColor 5%, transparent);

	/* Semanticos mezclados HACIA el color de texto del tema: se oscurecen sobre
	   tema claro y se aclaran sobre tema oscuro, manteniendo contraste. */
	--sv-acento: color-mix(in srgb, #1a7a4f 68%, var(--wp--preset--color--contrast, #111111));
	--sv-alerta: color-mix(in srgb, #c0392b 68%, var(--wp--preset--color--contrast, #111111));
	--sv-aviso:  color-mix(in srgb, #a06a00 68%, var(--wp--preset--color--contrast, #111111));

	--sv-radio: 10px;

	max-width: 40rem;
	margin-inline: auto;
	padding: 1rem;
	color: var(--sv-tinta);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

.sv-panel *,
.sv-panel *::before,
.sv-panel *::after { box-sizing: border-box; }

/* --- Cabeza --------------------------------------------------------------- */
.sv-panel__cabeza { margin-bottom: .75rem; }
.sv-panel__titulo { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.sv-panel__meta { margin: .15rem 0 0; color: var(--sv-tinta-suave); font-size: .875rem; }

/* --- Pestañas ------------------------------------------------------------- */
.sv-tabs {
	display: flex;
	gap: .25rem;
	border-bottom: 1px solid var(--sv-linea);
	margin-bottom: .75rem;
	/* En pantallas muy estrechas se desliza en vez de romperse. */
	overflow-x: auto;
	scrollbar-width: none;
}
.sv-tabs::-webkit-scrollbar { display: none; }

.sv-tab {
	flex: 1 0 auto;
	min-height: 44px;
	padding: .6rem .9rem;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--sv-tinta-suave);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.sv-tab.is-activa { color: var(--sv-tinta); border-bottom-color: var(--sv-acento); }
.sv-tab:focus-visible { outline: 2px solid var(--sv-acento); outline-offset: -2px; }

/* --- Secciones ------------------------------------------------------------ */
.sv-seccion { display: none; }
.sv-seccion.is-activa { display: block; }

/* --- Campos --------------------------------------------------------------- */
.sv-campo { display: block; margin-bottom: .85rem; }
.sv-campo__etiqueta {
	display: block;
	margin-bottom: .3rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--sv-tinta-suave);
	text-transform: uppercase;
	letter-spacing: .02em;
}
.sv-campo input,
.sv-campo textarea,
.sv-campo select {
	width: 100%;
	min-height: 44px;
	padding: .6rem .7rem;
	border: 1px solid var(--sv-linea);
	border-radius: var(--sv-radio);
	background: var(--sv-fondo);
	color: var(--sv-tinta);
	/* 16px minimo: por debajo, iOS hace zoom al enfocar. */
	font-size: 1rem;
	font-family: inherit;
}
.sv-campo input:focus-visible,
.sv-campo textarea:focus-visible {
	outline: 2px solid var(--sv-acento);
	outline-offset: 1px;
}
.sv-campo--casilla { display: flex; align-items: center; gap: .6rem; }
.sv-campo--casilla input { width: 24px; min-height: 24px; height: 24px; flex: 0 0 auto; }
.sv-fila { display: flex; gap: .6rem; }
.sv-fila .sv-campo { flex: 1; }

/* --- Botones -------------------------------------------------------------- */
.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	width: 100%;
	padding: .6rem 1rem;
	border: 1px solid var(--sv-acento);
	border-radius: var(--sv-radio);
	background: var(--sv-acento);
	/* El texto del boton primario se calcula del fondo del tema, no se fija en
	   blanco: sobre una paleta oscura el acento se aclara y el blanco dejaria de
	   contrastar. */
	color: var(--sv-fondo);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.sv-btn[disabled] { opacity: .55; cursor: progress; }
.sv-btn--fantasma { background: none; color: var(--sv-acento); }
.sv-btn--peligro { background: none; border-color: var(--sv-alerta); color: var(--sv-alerta); }
.sv-btn--chico { width: auto; min-height: 40px; padding: .35rem .8rem; font-size: .875rem; }

/* --- Lista de referencias ------------------------------------------------- */
.sv-lista { list-style: none; margin: 0; padding: 0; }

.sv-item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: .75rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--sv-linea);
}
.sv-item__foto {
	width: 64px;
	height: 64px;
	border-radius: var(--sv-radio);
	object-fit: cover;
	background: var(--sv-fondo-suave);
}
.sv-item__nombre { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.sv-item__ref { color: var(--sv-tinta-suave); font-size: .8125rem; }
.sv-item__precio { font-variant-numeric: tabular-nums; font-weight: 700; }
.sv-item__acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }

.sv-etiqueta {
	display: inline-block;
	padding: .1rem .45rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
}
/* El fondo se calcula del propio color de la etiqueta, asi que funciona sobre
   cualquier paleta sin declarar variantes. */
.sv-etiqueta--disponible {
	color: var(--sv-acento);
	background: color-mix(in srgb, var(--sv-acento) 14%, transparent);
}
.sv-etiqueta--agotado {
	color: var(--sv-alerta);
	background: color-mix(in srgb, var(--sv-alerta) 14%, transparent);
}
.sv-etiqueta--bajo_pedido {
	color: var(--sv-aviso);
	background: color-mix(in srgb, var(--sv-aviso) 14%, transparent);
}
.sv-etiqueta--revision {
	color: var(--sv-tinta-suave);
	background: var(--sv-fondo-suave);
	border: 1px solid var(--sv-linea);
}

/* --- Avisos --------------------------------------------------------------- */
.sv-avisos:empty { display: none; }
.sv-aviso {
	margin-bottom: .6rem;
	padding: .6rem .75rem;
	border-left: 4px solid var(--sv-acento);
	border-radius: 4px;
	background: var(--sv-fondo-suave);
	font-size: .9375rem;
}
.sv-aviso--error { border-left-color: var(--sv-alerta); }
.sv-aviso--ojo   { border-left-color: var(--sv-aviso); }

.sv-nota { color: var(--sv-tinta-suave); font-size: .8125rem; }

/* --- Edición en línea ----------------------------------------------------- */
.sv-editor { margin-top: .6rem; padding: .7rem; border: 1px solid var(--sv-linea); border-radius: var(--sv-radio); background: var(--sv-fondo-suave); }
.sv-editor .sv-fila { margin-top: .5rem; }
.sv-editor .sv-btn { width: auto; flex: 1; }

.sv-panel__pie { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--sv-linea); font-size: .9375rem; }

.sv-panel--aviso { text-align: center; }

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.sv-panel * { transition: none !important; animation: none !important; }
}