/* Taza 3D — estilos del visor. Hereda tipografía y color de texto del tema. */
.t3d {
	--t3d-accent-c: var(--t3d-accent, var(--wp--preset--color--contrast, currentColor));
	--t3d-line: color-mix(in srgb, currentColor 14%, transparent);
	--t3d-soft: color-mix(in srgb, currentColor 5%, transparent);
	--t3d-muted: color-mix(in srgb, currentColor 62%, transparent);
	--t3d-radius: 14px;
	container-type: inline-size;
	margin: 1.5em 0;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: inherit;
	-webkit-font-smoothing: antialiased;
}
.t3d *, .t3d *::before, .t3d *::after { box-sizing: border-box; }
.t3d button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.t3d button:focus-visible, .t3d input:focus-visible + span, .t3d__canvas:focus-visible {
	outline: 2px solid var(--t3d-accent-c);
	outline-offset: 2px;
}
.t3d [hidden] { display: none !important; }

.t3d__inner { display: grid; gap: 16px; }
@container (min-width: 720px) {
	.t3d:not(.t3d--solo) .t3d__inner { grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); align-items: start; gap: 24px; }
}

/* Escenario */
.t3d__stage {
	position: relative;
	aspect-ratio: var(--t3d-ratio, 4 / 3);
	border-radius: var(--t3d-radius);
	overflow: hidden;
	background: #eee;
	transition: background .4s ease;
	isolation: isolate;
}
.t3d__canvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block;
	cursor: grab;
	touch-action: pan-y;
	border-radius: inherit;
}
.t3d__canvas.is-grabbing { cursor: grabbing; }

.t3d__tools {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	display: flex; gap: 4px; padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .05);
	color: #1d1d1f;
}
.t3d .t3d__tool {
	display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	transition: background .15s ease;
}
.t3d .t3d__tool:hover { background: rgba(0, 0, 0, .06); }
.t3d .t3d__tool[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
.t3d__stage.is-dark .t3d__tools { background: rgba(30, 32, 36, .6); color: #f2f2f2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.t3d__stage.is-dark .t3d__tool:hover { background: rgba(255, 255, 255, .1); }
.t3d__stage.is-dark .t3d__tool[aria-pressed="true"] { background: #f2f2f2; color: #1d1d1f; }

.t3d__hint {
	position: absolute; left: 50%; bottom: 14px; z-index: 2;
	transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px 6px 10px; border-radius: 999px;
	font-size: 12.5px; color: #1d1d1f;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	pointer-events: none; white-space: nowrap;
	transition: opacity .4s ease, transform .4s ease;
}
.t3d__hint.is-hidden { opacity: 0; transform: translate(-50%, 6px); }
.t3d__stage.is-dark .t3d__hint { background: rgba(30, 32, 36, .6); color: #f2f2f2; }

.t3d__status {
	position: absolute; left: 12px; top: 12px; z-index: 2;
	padding: 6px 12px; border-radius: 999px;
	font-size: 12.5px; color: #1d1d1f; background: rgba(255, 255, 255, .8);
	opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.t3d__status.is-on { opacity: 1; }
.t3d__status.is-error { color: #b42318; }
.t3d--nogl .t3d__status { position: static; display: block; margin: 12px; }
.t3d__fallback { position: absolute; inset: 15% 10%; width: 80%; height: 70%; object-fit: contain; }

/* Panel */
.t3d__panel { display: grid; gap: 22px; align-content: start; min-width: 0; }
.t3d__title { margin: 0; font-size: 1.05em; font-weight: 600; }
.t3d__group { display: grid; gap: 10px; min-width: 0; }
.t3d__label {
	display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--t3d-muted);
}
.t3d__value { font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; font-size: 13px; }

/* Pestañas */
.t3d__seg {
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	padding: 4px; gap: 4px;
	border-radius: 12px; background: var(--t3d-soft);
	box-shadow: inset 0 0 0 1px var(--t3d-line);
}
.t3d .t3d__segbtn {
	text-align: center; padding: 8px 10px; border-radius: 9px;
	font-size: 14px; color: var(--t3d-muted);
	transition: background .15s ease, color .15s ease;
}
.t3d .t3d__segbtn[aria-selected="true"] {
	color: inherit; font-weight: 600;
	background: color-mix(in srgb, currentColor 9%, transparent);
	box-shadow: 0 0 0 1px var(--t3d-line);
}

/* Colores */
.t3d__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.t3d .t3d__swatch {
	position: relative;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--sw, #fff);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
	transition: transform .15s ease;
	cursor: pointer;
}
.t3d .t3d__swatch:hover { transform: scale(1.06); }
.t3d .t3d__swatch[aria-pressed="true"] { outline: 2px solid var(--t3d-accent-c); outline-offset: 3px; }
.t3d__swatch--picker { display: inline-block; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e) !important; }
.t3d__swatch--picker.is-set { background: var(--sw) !important; }
.t3d__swatch--picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* Escenas */
.t3d__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t3d .t3d__chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 12px 5px 5px; border-radius: 999px;
	font-size: 13.5px;
	box-shadow: inset 0 0 0 1px var(--t3d-line);
	transition: box-shadow .15s ease, background .15s ease;
}
.t3d .t3d__chip:hover { background: var(--t3d-soft); }
.t3d .t3d__chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--t3d-accent-c); font-weight: 600; }
.t3d__chipdot { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }

/* Foto */
.t3d__file { display: none; }
.t3d .t3d__drop {
	display: grid; justify-items: center; gap: 4px;
	width: 100%; padding: 22px 16px; text-align: center;
	border-radius: 12px;
	border: 1.5px dashed var(--t3d-line);
	background: var(--t3d-soft);
	transition: border-color .15s ease, background .15s ease;
}
.t3d .t3d__drop:hover, .t3d .t3d__drop.is-over { border-color: var(--t3d-accent-c); }
.t3d__drop svg { width: 22px; height: 22px; margin-bottom: 4px; }
.t3d__droptitle { font-weight: 600; font-size: 14.5px; }
.t3d__drophelp { font-size: 12.5px; color: var(--t3d-muted); }

.t3d__photo { display: grid; gap: 14px; }
.t3d__photohead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.t3d__thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--t3d-soft) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--t3d-line); }
.t3d__photoname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.t3d .t3d__link { font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.t3d .t3d__iconbtn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--t3d-muted); }
.t3d .t3d__iconbtn:hover { background: var(--t3d-soft); color: inherit; }

.t3d__controls { display: grid; gap: 12px; }
.t3d__range { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--t3d-muted); margin: 0; }
.t3d__range input[type="range"] { width: 100%; margin: 0; accent-color: var(--t3d-accent-c); background: transparent; }
.t3d__range input:disabled { opacity: .35; }
.t3d__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; margin: 0; }
.t3d__toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--t3d-accent-c); }

@media (prefers-reduced-motion: reduce) {
	.t3d *, .t3d__stage { transition: none !important; }
}

/* ---------- v2 ---------- */
.t3d__slot { display: contents; }
.t3d__slot[hidden] { display: none !important; }

/* Modelos */
.t3d__models { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.t3d .t3d__modelbtn {
	display: grid; justify-items: center; gap: 6px;
	padding: 12px 8px 10px; border-radius: 12px; text-align: center;
	font-size: 12.5px; line-height: 1.25;
	box-shadow: inset 0 0 0 1px var(--t3d-line);
	transition: box-shadow .15s ease, background .15s ease;
}
.t3d .t3d__modelbtn:hover { background: var(--t3d-soft); }
.t3d .t3d__modelbtn svg { color: var(--t3d-muted); }
.t3d .t3d__modelbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--t3d-accent-c); font-weight: 600; }
.t3d .t3d__modelbtn[aria-pressed="true"] svg { color: inherit; }

/* Partes de la taza */
.t3d__parts { display: flex; flex-wrap: wrap; gap: 6px; }
.t3d .t3d__part {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 11px 5px 6px; border-radius: 999px; font-size: 13px;
	box-shadow: inset 0 0 0 1px var(--t3d-line);
	transition: box-shadow .15s ease, background .15s ease;
}
.t3d .t3d__part:hover { background: var(--t3d-soft); }
.t3d .t3d__part[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--t3d-accent-c); font-weight: 600; }
.t3d__partdot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }

/* Muestras especiales */
.t3d .t3d__swatch--metal {
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .85) 8%, rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, .28) 56%, rgba(255, 255, 255, .5) 72%, rgba(0, 0, 0, .18) 92%),
		var(--sw);
}
.t3d .t3d__swatch--tint { background: linear-gradient(to top, var(--sw) 0%, var(--sw) 28%, #eef1f4 78%); }
.t3d .t3d__swatch--none { background: radial-gradient(circle at 35% 30%, #fff, #e3e7eb 70%); }

/* Ubicación */
.t3d .t3d__chip--text { padding: 6px 12px; font-size: 13px; }

/* Consejos */
.t3d__tip { display: grid; gap: 6px; }
.t3d__tip p {
	display: flex; gap: 8px; align-items: flex-start; margin: 0;
	padding: 9px 11px; border-radius: 10px;
	font-size: 12.5px; line-height: 1.45;
	background: color-mix(in srgb, #f59e0b 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 30%, transparent);
}
.t3d__tip svg { flex: none; margin-top: 1px; color: #b45309; }
.t3d__controls[hidden] { display: none !important; }

/* Medidas recomendadas */
.t3d__recos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 6px 0 2px; }
.t3d__recotitle { flex-basis: 100%; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t3d-muted); }
.t3d__reco {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px 4px 8px; border-radius: 999px;
	font-size: 12.5px; white-space: nowrap;
	background: color-mix(in srgb, currentColor 6%, transparent);
	box-shadow: inset 0 0 0 1px var(--t3d-line);
}
.t3d__reco b { font-weight: 600; }
.t3d__reco i { display: inline-block; height: 10px; border-radius: 2px; border: 1.5px solid currentColor; opacity: .7; }
.t3d__reco--long i { width: 22px; }
.t3d__reco--square i { width: 10px; }

/* v2.2: medida recomendada */
.t3d__reco.is-best { background: color-mix(in srgb, var(--t3d-accent-c) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t3d-accent-c) 55%, transparent); }
.t3d__reco em {
	font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	padding: 0 6px; border-radius: 999px;
	color: var(--t3d-accent-c); box-shadow: inset 0 0 0 1px currentColor;
}

/* v2.4: zoom */
.t3d__zoom {
	position: absolute; right: 12px; bottom: 12px; z-index: 2;
	display: flex; gap: 4px; padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .05);
	color: #1d1d1f;
}
.t3d__stage.is-dark .t3d__zoom { background: rgba(30, 32, 36, .6); color: #f2f2f2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.t3d .t3d__tool:disabled { opacity: .3; cursor: default; background: transparent; }
@media (max-width: 480px) {
	.t3d .t3d__tool { width: 32px; height: 32px; }
	.t3d__hint { left: 12px; bottom: 14px; transform: none; }
	.t3d__hint.is-hidden { transform: translateY(6px); }
}

/* v2.7: exhibición (carrusel de diseños) */
.t3d--gallery .t3d__hint { display: none; }
.t3d__gal {
	position: absolute; left: 12px; bottom: 12px; z-index: 2;
	display: flex; align-items: center; gap: 2px; padding: 4px;
	max-width: calc(100% - 118px);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .05);
	color: #1d1d1f;
	transition: opacity .25s ease;
}
.t3d--galoff .t3d__gal { opacity: 0; pointer-events: none; }
.t3d__stage.is-dark .t3d__gal { background: rgba(30, 32, 36, .6); color: #f2f2f2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.t3d__gal .t3d__tool[hidden] { display: none; }
.t3d__galtxt { display: grid; min-width: 0; padding: 0 6px; line-height: 1.25; }
.t3d__galname { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.t3d__galmeta { font-size: 11px; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.t3d__galbar { position: absolute; left: 20px; right: 20px; bottom: 2px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, .06); }
.t3d__galbar[hidden] { display: none; }
.t3d__galbar i { display: block; height: 100%; background: currentColor; opacity: .55; transform-origin: left; transform: scaleX(0); }
.t3d__galbar.is-run i { animation: t3d-gal var(--t3d-gal, 5000ms) linear forwards; }
.t3d--galpaused .t3d__galbar i { transform: scaleX(0); }
@keyframes t3d-gal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 480px) {
	.t3d__gal { left: 8px; bottom: 8px; max-width: calc(100% - 100px); }
	.t3d__galname { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .t3d__galbar.is-run i { animation: none; } }

/* v2.10: nivel de zoom y visor angosto (celulares) */
.t3d__zoom { align-items: center; }
.t3d__zoomval { min-width: 34px; text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; user-select: none; }
.t3d--zoomed .t3d__canvas { cursor: move; }
.t3d--narrow .t3d__stage { aspect-ratio: var(--t3d-ratio-m, 4 / 5); }
.t3d--narrow .t3d__tools { flex-direction: column; top: 10px; right: 10px; padding: 3px; gap: 2px; }
.t3d--narrow .t3d__zoom { flex-direction: column-reverse; right: 10px; bottom: 10px; padding: 3px; gap: 0; }
.t3d--narrow .t3d__zoomval { min-width: 0; padding: 2px 0; font-size: 11px; }
.t3d.t3d--narrow .t3d__tool { width: 32px; height: 32px; }
.t3d--narrow .t3d__gal { left: 10px; bottom: 10px; max-width: calc(100% - 66px); }
.t3d--narrow .t3d__galname { max-width: 140px; }
.t3d--narrow .t3d__hint { left: 10px; bottom: 12px; transform: none; }
.t3d--narrow .t3d__hint.is-hidden { transform: translateY(6px); }