/**
 * ccmts-producto-vivo.css
 *
 * El hueco de precio y existencias dentro de un artículo.
 *
 * Nota de diseño: el hueco nace `hidden` y solo se enseña cuando el JS lo
 * rellena. No hay esqueleto pulsante ni «cargando…»: si la llamada no vuelve,
 * el lector no tiene por qué enterarse de que faltaba algo — ve el enlace al
 * producto y ya. Un placeholder que se queda para siempre parece una página
 * rota; un enlace no.
 */

.ccmts-pv {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .5rem;
	line-height: 1.45;
}

.ccmts-pv__enlace {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.ccmts-pv__vivo {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: .95;
}

.ccmts-pv__vivo[hidden] {
	display: none;
}

.ccmts-pv[data-ccmts-pv-estado="agotado"] .ccmts-pv__vivo {
	/* El agotado se ve. Esta tienda ya vendió cosas sin existencias. */
	font-weight: 600;
}

.ccmts-pv__aviso {
	font-style: italic;
	opacity: .8;
}

.ccmts-pv--sin-producto .ccmts-pv__aviso::before {
	content: "— ";
}

/* ── Vistas de bloque: `gama` y `columna` (diseño aprobado, 23-sep) ──────
 *
 * El marcado y el JS están en CCMTS_Producto_Vivo_Renderer y en
 * ccmts-producto-vivo.js. Los colores salen de los tokens de
 * ccmts-articulos.css, con respaldo por si esta hoja se usa sola.
 *
 * El barrido gris solo existe mientras hay una petición en vuelo
 * (`data-ccmts-pv-estado="cargando"`, lo pone el JS). Sin JS no aparece, y si
 * la petición falla pasa a «sin-datos» y se va: no hay esqueleto eterno.
 */

.ccmts-pv--gama,
.ccmts-pv--columna {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	line-height: 1.2;
	width: 100%;
}

.ccmts-pv--columna {
	align-items: flex-start;
	gap: 12px;
}

.ccmts-pv--gama .ccmts-pv__vivo,
.ccmts-pv--columna .ccmts-pv__vivo {
	display: grid;
	gap: 4px;
	white-space: normal;
	opacity: 1;
}

.ccmts-pv--gama .ccmts-pv__vivo[hidden],
.ccmts-pv--columna .ccmts-pv__vivo[hidden] {
	display: none;
}

.ccmts-pv--gama .ccmts-pv__precio {
	font: 700 20px/1 var( --ccmts-display, inherit );
	letter-spacing: -.02em;
	color: var( --ccmts-tinta, #191818 );
}

.ccmts-pv--columna .ccmts-pv__precio {
	font: 500 16px/1.2 var( --ccmts-texto, inherit );
	color: var( --ccmts-grafito, #646464 );
}

.ccmts-pv--columna .ccmts-pv__precio strong {
	color: var( --ccmts-tinta, #191818 );
	font-weight: 700;
}

.ccmts-pv__antes {
	font: 400 13px/1.2 var( --ccmts-mono, ui-monospace, monospace );
	color: var( --ccmts-grafito, #646464 );
}

.ccmts-pv__estado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 12px/1 var( --ccmts-mono, ui-monospace, monospace );
	color: var( --ccmts-senal, #1F7A4D );
}

.ccmts-pv__estado::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.ccmts-pv__estado--agotado {
	color: var( --ccmts-rojo, #E60000 );
	font-weight: 700;
}

/* El barrido de la maqueta, mientras se pregunta. */
.ccmts-pv--gama[data-ccmts-pv-estado="cargando"]::before,
.ccmts-pv--columna[data-ccmts-pv-estado="cargando"]::before {
	content: "";
	display: block;
	height: 38px;
	width: 70%;
	border-radius: var( --ccmts-radio, 4px );
	background: linear-gradient( 90deg, #eee, #f7f7f7, #eee );
	background-size: 200% 100%;
	animation: ccmts-pv-barrido 1.2s linear infinite;
}

@keyframes ccmts-pv-barrido {
	to { background-position: -200% 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ccmts-pv--gama[data-ccmts-pv-estado="cargando"]::before,
	.ccmts-pv--columna[data-ccmts-pv-estado="cargando"]::before {
		animation: none;
	}
}

.ccmts-pv__acciones {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}

.ccmts-pv--columna .ccmts-pv__acciones {
	align-items: flex-start;
}

/* Botón de la gama: recuadro con filete, como «Ver en la tienda» de la maqueta. */
.ccmts-pv--gama .ccmts-pv__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px;
	border: 1px solid var( --ccmts-tinta, #191818 );
	border-radius: var( --ccmts-radio, 4px );
	color: var( --ccmts-tinta, #191818 );
	font: 500 14px/1 var( --ccmts-texto, inherit );
	text-decoration: none;
	background: transparent;
	transition: background .15s, color .15s;
}

.ccmts-pv--gama .ccmts-pv__boton:hover,
.ccmts-pv--gama .ccmts-pv__boton:focus-visible {
	background: var( --ccmts-tinta, #191818 );
	color: #fff;
}

/* Píldora de la columna de la comparación. */
.ccmts-pv--columna .ccmts-pv__boton {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	background: var( --ccmts-tinta, #191818 );
	color: #fff;
	font: 500 14px/1 var( --ccmts-texto, inherit );
	text-decoration: none;
	transition: background .15s;
}

.ccmts-pv--columna .ccmts-pv__boton:hover,
.ccmts-pv--columna .ccmts-pv__boton:focus-visible {
	background: var( --ccmts-rojo, #E60000 );
	color: #fff;
}

.ccmts-pv__ficha {
	font: 500 14px/1 var( --ccmts-texto, inherit );
	color: var( --ccmts-tinta, #191818 );
	text-decoration: none;
}

.ccmts-pv__ficha:hover {
	color: var( --ccmts-rojo, #E60000 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ccmts-pv__boton { transition: none; }
}