/**
 * editor.css — Personalizador de grabado, con el diseño "liquid glass" de la
 * tienda. Usa las variables del tema (--ink, --paper, --g-fill, --g-blur,
 * --display, --body, --lemon) con valores de respaldo por si se usa en otro sitio.
 */

.gb-editor {
	--gb-ink:    var(--ink, #1a1a1d);
	--gb-soft:   var(--ink-soft, #6e6e73);
	--gb-paper:  var(--paper, #f4f4f2);
	--gb-fill:   var(--g-fill, rgba(255,255,255,.6));
	--gb-stroke: var(--g-stroke, rgba(0,0,0,.10));
	--gb-lemon:  var(--lemon, #cfcfc9);
	--gb-disp:   var(--display, "Space Grotesk", system-ui, sans-serif);
	--gb-body:   var(--body, "DM Sans", system-ui, sans-serif);

	margin: 18px 0;
	font-family: var(--gb-body);
	color: var(--gb-ink);
}

/* ── Cabecera desplegable (acordeón) ───────────────────────────────── */
.gb-toggle {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	box-sizing: border-box;
	padding: 15px 20px;
	background: var(--gb-ink);
	color: var(--gb-paper);
	border: 1px solid var(--gb-ink);
	border-radius: 16px;
	font-family: var(--gb-disp);
	font-weight: 600; font-size: 15px; letter-spacing: .5px; text-transform: uppercase;
	cursor: pointer;
	box-shadow: var(--g-shadow, 0 8px 24px rgba(0,0,0,.10));
	transition: border-radius .25s ease, transform .15s ease;
}
.gb-toggle:hover { transform: translateY(-1px); }
.gb-toggle-l { display: inline-flex; align-items: center; gap: 9px; }
.gb-toggle-ico-pen { color: var(--gb-lemon); font-size: 16px; }
.gb-toggle-chev { font-size: 22px; line-height: 1; transition: transform .3s ease; font-weight: 400; }
.gb-toggle[aria-expanded="true"] { border-radius: 16px 16px 0 0; }
.gb-toggle[aria-expanded="true"] .gb-toggle-chev { transform: rotate(45deg); } /* ＋ → × */

/* ── Panel glass ───────────────────────────────────────────────────── */
.gb-panel {
	background: var(--gb-fill);
	-webkit-backdrop-filter: var(--g-blur, saturate(165%) blur(22px));
	backdrop-filter: var(--g-blur, saturate(165%) blur(22px));
	border: 1px solid var(--gb-stroke);
	border-top: 0;
	border-radius: 0 0 18px 18px;
	box-shadow: var(--g-shadow, 0 8px 24px rgba(0,0,0,.08));
	padding: 20px;
	display: grid;
	gap: 16px;
}
.gb-panel[hidden] { display: none; }

.gb-canvas-wrap {
	position: relative; border-radius: 14px; overflow: hidden;
	background: rgba(0,0,0,.04); line-height: 0;
	box-shadow: inset 0 0 0 1px var(--gb-stroke);
}
.gb-canvas-wrap canvas { max-width: 100%; height: auto !important; }
/* Fabric.js fija un height:800px inline (pensado para escritorio) en
   .canvas-container; en móvil el canvas escala pero el contenedor seguía en
   800px → dejaba un largo hueco blanco debajo. Con aspect-ratio 3/4 (el ratio
   real del lienzo 600×800 / 1200×1600) + height:auto el alto se deriva del
   ancho en cualquier pantalla y desaparece el hueco, sin tocar los <canvas>. */
.gb-canvas-wrap .canvas-container { max-width: 100%; height: auto !important; aspect-ratio: 3 / 4; margin: 0 auto; }

/* ── Controles ─────────────────────────────────────────────────────── */
.gb-controles { display: grid; gap: 14px; }
.gb-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.gb-campo { display: flex; flex-direction: column; gap: 7px; }
.gb-campo > span {
	font-family: var(--gb-disp); font-size: 12px; font-weight: 600;
	letter-spacing: .4px; text-transform: uppercase; color: var(--gb-soft);
}

.gb-campo textarea,
.gb-campo input[type="text"],
.gb-campo select {
	width: 100%; box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--gb-stroke); border-radius: 12px;
	background: rgba(255,255,255,.65);
	font-family: var(--gb-body); font-size: 15px; line-height: 1.3; color: var(--gb-ink);
	transition: border-color .2s ease;
}
.gb-campo textarea { resize: vertical; min-height: 52px; line-height: 1.4; }
.gb-campo textarea:focus,
.gb-campo input[type="text"]:focus,
.gb-campo select:focus { outline: none; border-color: var(--gb-ink); }
.gb-campo input[type="range"] { width: 100%; accent-color: var(--gb-ink); }

/* El <select> nativo (Blocksy/WooCommerce) recortaba el texto: forzaba un
   line-box alto que empujaba la letra hacia abajo. Reseteamos su apariencia y
   controlamos altura/línea + flecha propia para que el texto quede centrado. */
.gb-campo select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	height: auto !important; min-height: 46px; line-height: 1.3 !important;
	padding-right: 38px; text-overflow: ellipsis; white-space: nowrap;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231a1a1d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}

/* ── Símbolos grabables ────────────────────────────────────────────── */
.gb-simbolos { display: flex; flex-wrap: wrap; gap: 8px; }
.gb-sim {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 19px; line-height: 1; color: var(--gb-ink);
	background: rgba(255,255,255,.7);
	border: 1px solid var(--gb-stroke); border-radius: 12px;
	cursor: pointer; transition: all .15s ease;
}
.gb-sim:hover { background: var(--gb-ink); color: var(--gb-paper); transform: translateY(-2px); }

.gb-ayuda { margin: 2px 0 0; font-size: 12px; color: var(--gb-soft); font-family: var(--gb-body); line-height: 1.5; }
.gb-ver { opacity: .5; font-size: 11px; margin-left: 4px; }

@media (max-width: 480px) {
	.gb-fila2 { grid-template-columns: 1fr; }
}