/*
 * Estilos del configurador U-Flow.
 * Prefijo "uflow-" en todas las clases para evitar colisiones con el resto
 * del tema. Variables propias (--uflow-*) en vez de usar :root global.
 */

.uflow-open-btn,
.uflow-overlay {
	--uflow-panel: #ffffff;
	--uflow-border: #e0e0dc;
	--uflow-text: #1f1f1f;
	--uflow-muted: #7a7a76;
	--uflow-cta: #c4aa83;
	--uflow-dark-grey: #999999;
	--dark-bg: #242424;
}

/* --- Trigger alternativo (icono colorwheel), ver single-product.php ---
   Solo reset básico; el icono es un placeholder para ajustar a gusto. */
.uflow-colorwheel-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	line-height: 0;
	text-align: center;
	font-size:10px;
	font-weight:300;
	opacity:0.8;
	position:absolute;
	right:-20px;
	top:88px;
	flex-direction: column;
	gap: 6px;
	z-index:10;
	width:70px;
	line-height:1.05;
}
.uflow-colorwheel-trigger svg { display: block; }
.uflow-colorwheel-trigger img {
  display: block;
  width: 42px;
  height: 42px;
}

/* --- Botón que abre el popup --- */
.uflow-open-btn {
	padding: 0 16px;
	border: none;
	background: var(--uflow-text);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	line-height: 42px;
	margin-right:4px;
	transition:background 0.2s ease;
	/* background: var(--uflow-cta); */
}
.uflow-open-btn:hover { 
	background: var(--uflow-cta);
	/* background: var(--uflow-text);*/
}
.chromatic-cricle {
	display:inline-block;
	vertical-align:middle;
	margin:0 4px 0 0;
}

/* --- Overlay del popup --- */
.uflow-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  overflow-y: auto;
}
.uflow-overlay.uflow-open { display: flex; }

.uflow-wrap {
	position: relative;
	width: 100%;
	max-width: 800px;
	max-height: 90vh;
	overflow-y: auto;
	margin: 0 auto;
	background: var(--uflow-panel);
	border-radius: 12px;
	padding: 32px;
	padding-bottom:64px;
	box-sizing: border-box;
}
.uflow-wrap * { 
	box-sizing: border-box; 
	font-size:13px;
}

.uflow-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--uflow-muted);
}
.uflow-close-btn:hover { color: var(--uflow-text); }

.uflow-wrap h2 { font-size: 20px; margin: 0 0 4px; }
.uflow-sub { color: var(--uflow-muted); font-size: 16px; margin: 0 0 28px;max-width:340px; }

/* --- Layout: preview + controles --- */
.uflow-layout {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}
.uflow-preview-frame {
  position: relative;
  flex: 1 1 260px;
}
.uflow-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  padding: 24px;
  /* border: 1px solid var(--uflow-border); */
  border-radius: 10px;
  min-height: 320px;
  height: 100%;
  transition: opacity .09s ease;
}
.uflow-preview svg { width: 100%; max-width: 260px; height: auto; }
/* .uflow-preview ya lleva display:flex, que por especificidad de CSS
   ganaría a la regla [hidden] del navegador; se fuerza explícitamente. */
.uflow-preview[hidden] { display: none; }

/* --- Botón de cambio de vista frontal/lateral (abajo a la derecha, a la
   misma altura y distancia del borde que el de descarga de la izquierda) --- */
.uflow-view-toggle-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--uflow-border);
  background: #fff;
  color: var(--uflow-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  transition: background .15s ease, color .15s ease;
}
.uflow-view-toggle-btn:hover {
  background: var(--uflow-text);
  color: #fff;
}
.uflow-view-toggle-btn svg { display: block; }
/* Etiqueta a la izquierda del botón de cambio de vista (indica la vista a la
   que se pasa), centrada verticalmente con él: misma altura (36px) y bottom
   que el botón; right = 12px de margen + 36px de botón + 8px de separación. */
.uflow-view-toggle-label {
  position: absolute;
  bottom: 12px;
  right: 52px;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--uflow-muted);
  pointer-events: none;
  user-select: none;
}

/* --- Botón de descarga de imagen (fuera de .uflow-preview a propósito:
   así no lo borra el innerHTML con el que se inyecta/repinta el SVG) --- */
.uflow-download-btn {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--uflow-border);
  background: #fff;
  color: var(--uflow-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  transition: background .15s ease, color .15s ease;
}
.uflow-download-btn:hover {
  background: var(--uflow-text);
  color: #fff;
}
.uflow-download-btn svg { display: block; }

.uflow-controls {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uflow-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  margin-bottom: 8px;
}
.uflow-field-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.uflow-field-row input[type="color"] {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: none;
    overflow: hidden;
    cursor: pointer;
}
/* Chrome / Edge / Safari */
.uflow-field-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.uflow-field-row input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

/* Firefox */
.uflow-field-row input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}
.uflow-field-row input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--uflow-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.uflow-field-row input[type="text"].uflow-invalid { border-color: #c0554d; }

.uflow-ral-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--uflow-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  margin-bottom: 8px;
}
.uflow-visually-hidden {
  display: none;
}

/* --- Desplegable de RAL con bolita de color por opción ---
   El <select> nativo (.uflow-ral-select, arriba) se deja oculto como
   modelo de datos; esto es lo que ve y usa el usuario. Ver
   enhanceRalSelect() en uflow-configurator.js. */
.uflow-swatch-select {
  position: relative;
  margin-bottom: 0;
}
.uflow-swatch-select-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--uflow-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.uflow-swatch-select-open .uflow-swatch-select-toggle {
  border-color: var(--uflow-cta);
}
.uflow-swatch-select-swatch {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--uflow-border);
}
.uflow-swatch-select-swatch-empty {
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--uflow-border) 3px, var(--uflow-border) 4px);
}
.uflow-swatch-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--uflow-text);
}
.uflow-swatch-select-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--uflow-muted);
  border-bottom: 2px solid var(--uflow-muted);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform .15s ease;
}
.uflow-swatch-select-open .uflow-swatch-select-chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.uflow-swatch-select-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--uflow-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.uflow-swatch-select-panel[hidden] { display: none; }
.uflow-swatch-option-swatch,
.uflow-swatch-option-label {
  pointer-events: none;
}
li[role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
li[role="option"]:hover,
li[role="option"]:focus {
  background: #f5f3ee;
  outline: none;
}
li[role="option"].uflow-swatch-option-selected {
  background: var(--uflow-cta);
  color: #fff;
}
.uflow-swatch-option-swatch {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--uflow-border);
}
.uflow-swatch-option-swatch-empty {
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--uflow-border) 3px, var(--uflow-border) 4px);
}
.uflow-swatch-option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colores obligatorios (ver "Colores obligatorios para enviar" en el JS) */
.uflow-field .uflow-field-error {
  color: #c0554d;
  font-size: 12px;
  line-height: 1.2;
  margin: 6px 0 0;
}
.uflow-field.uflow-invalid-field .uflow-swatch-select-toggle { border-color: #c0554d; }
.uflow-form-panel .uflow-colors-notice {
  color: #c0554d;
  font-size: 13px;
  line-height: 1.3;
  margin: 0 0 16px;
}

.uflow-hint {
  font-size: 12px;
  color: var(--uflow-muted);
  margin-top: 6px;
  line-height: 1.2;
}

.uflow-url-field {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--uflow-border);
}
.uflow-url-field label {
  font-size: 13px;
}
.uflow-url-field textarea {
  width: 100%;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--uflow-border);
  border-radius: 8px;
  font-size: 12px;
  font-family: monospace;
  color: var(--uflow-muted);
  background: #fafafa;
  margin-top: 8px;
}

/* --- Pestañas --- */
.uflow-tabs {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.uflow-tab-btn {
  flex: 1;
  padding: 12px 16px 10px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  border: 1px solid var(--uflow-cta);
  background: var(--uflow-cta);
  border-color: var(--uflow-cta);
  color: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.uflow-tab-btn:hover {
    background: var(--uflow-dark-grey);
    border-color: var(--uflow-dark-grey);
}
.uflow-tab-btn.uflow-active {
  background: var(--dark-bg);
  border-color: var(--dark-bg);
  color: #fff;
}
button.uflow-tab-btn img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

/* --- Paneles de formulario (contienen el shortcode CF7) --- */
.uflow-form-panel {
  display: none;
  margin-top: 24px;
  /* padding-top: 24px;
  border-top: 1px solid var(--uflow-border); */
}
.uflow-form-panel.uflow-active { display: block; }
/* Tras un envío correcto (clase puesta por el JS en wpcf7mailsent) solo se ve
   el mensaje de agradecimiento de CF7: se oculta todo hijo directo del
   formulario salvo el .wpcf7-response-output (campos, checkboxes, envío). */
.uflow-form-panel.uflow-sent form.wpcf7-form > *:not(.wpcf7-response-output) { display: none; }
.uflow-form-missing {
  color: #c0554d;
  font-size: 13px;
}
.uflow-form-panel * {
	outline:none;
}  

.uflow-form-panel input::placeholder,
.uflow-form-panel textarea::placeholder {
	color: var(--uflow-muted) !important;
	opacity: 1 !important;
}

/* Campo file oculto que recibe la imagen generada automáticamente
   (ver uflow-configurator.js: attachConfiguratorImageToForms) */
.uflow-hidden-preview-image,
.uflow-hidden-preview-image-lateral {
  display: none;
}

/* RESPONSE OUTPUT */

.uflow-form-panel .wpcf7 form.sent .wpcf7-response-output {
    border-color: initial;
    background: initial;
    padding: 0;
    border-radius: 0;
    margin: 0;
    line-height: 1.4;
	font-size: 16px;
    color: #333;
    border: none !important;
    font-weight: 400;
	max-width:90%;
}
.uflow-form-panel .wpcf7 form.sent .wpcf7-response-output span {
	line-height: 1.4;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}
.uflow-form-panel .wpcf7 form.invalid .wpcf7-response-output, 
.uflow-form-panel .wpcf7 form.payment-required .wpcf7-response-output, 
.uflow-form-panel .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #c0554d;
    background: #c0554d;
    padding: 16px;
    border-radius: 0;
    margin: 0;
    font-size: 16px;
    color: white;
}

/* Estilos por defecto para el markup que genera CF7 dentro de los paneles.
   Si necesitas la rejilla de 2 columnas exacta del prototipo, usa el
   shortcode [group] de CF7 o añade tus propias clases a los form-tags. */
.uflow-form-panel form.wpcf7-form p { margin: 0;line-height:1.1; }
.uflow-form-panel form.wpcf7-form label { 
	/* display: block; */
	display:none;
	font-size: 13px; 
	font-weight: 600; 
	margin-bottom: 6px; 
	
}
.uflow-form-panel form.wpcf7-form input[type="text"],
.uflow-form-panel form.wpcf7-form input[type="email"],
.uflow-form-panel form.wpcf7-form input[type="tel"],
.uflow-form-panel form.wpcf7-form textarea {
	width: 100%;
	padding: 10px 12px 10px 0;
	border:none;
	border-bottom: 1px solid var(--uflow-dark-grey);
	border-radius: 0;
	font-size: 14px;
	font-family: inherit;
}

/* Rejilla de 2 columnas: envolver los campos manualmente en el editor de CF7
   con este markup (ver ejemplo en la conversación) para reproducir el
   layout exacto del prototipo, en vez de depender del <p> por línea de CF7. */
.uflow-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 16px;
}
.uflow-form-field.uflow-full { grid-column: 1 / -1; }
.uflow-form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.uflow-form-field label .uflow-optional {
  font-weight: 400;
  color: var(--uflow-muted);
  font-size: 12px;
}
.uflow-form-field input[type="text"],
.uflow-form-field input[type="email"],
.uflow-form-field input[type="tel"],
.uflow-form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--uflow-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.uflow-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--uflow-muted);
  margin-top: 4px;
}
.uflow-checkbox-row .wpcf7-list-item { margin: 0; }
.uflow-checkbox-row .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: 400;
}
.uflow-checkbox-row input[type="checkbox"] { margin-top: 2px; width: 12px; flex-shrink: 0; }
.uflow-form-panel form.wpcf7-form textarea { resize: vertical; min-height: 70px; }

/* Checkboxes / acceptance (política de privacidad, comunicaciones comerciales) */
.uflow-form-panel form.wpcf7-form .wpcf7-list-item {
  margin: 10px 0 0;
  display: block;
}
.uflow-form-panel form.wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--uflow-muted);
  margin-bottom: 0;
}
.uflow-form-panel form.wpcf7-form .wpcf7-list-item label a {
	color:inherit;
}
.uflow-form-panel form.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
	margin-top: 2px;
	width: 12px;
	flex-shrink: 0;
	border-color: grey;
	border-radius: 3px;
}
.uflow-form-panel form.wpcf7-form label .uflow-optional {
  font-weight: 400;
  color: var(--uflow-muted);
  font-size: 12px;
}
.uflow-form-panel form.wpcf7-form input[type="submit"] {
	margin-top:24px;
	padding: 12px 24px;
	text-transform:uppercase;
	float:right;
	border: none;
	background: var(--uflow-cta);
	color: #fff;
	font-size: 13px;
	font-weight: 300;
	cursor: pointer;
	width:100%;
	transition:all 0.3 ease;
}
.uflow-form-panel form.wpcf7-form input[type="submit"]:hover {
	background: var(--dark-bg);
}
.uflow-checkbox-row {
	width:70%;
}
.uflow-form-panel .wpcf7-response-output {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.uflow-form-panel .wpcf7-not-valid-tip {
  color: #c0554d;
  font-size: 12px;
  margin-top: 4px;
}

/* --- Responsive --- */
@media (max-width: 767px) {
	.uflow-open-btn {
		width: 100%;
		padding: 0;
		margin-bottom: 4px;
	}
	.single-product-variations-and-thumbs.uflow-configurator-variations {
		padding: 42px 0 96px;
	}
}
@media (max-width: 640px) {
  .uflow-wrap { padding: 24px 16px; max-height: 95vh; }
  .uflow-layout { gap: 24px; }
  .uflow-tabs { flex-direction: column; }
  .uflow-form-grid { grid-template-columns: 1fr; }
}
/* Por debajo de ~400px el SVG de ancho fijo (260px) + el padding de
   .uflow-preview ya no cabían con holgura: la imagen llegaba a tocar los
   botones de descarga/cambio de vista, y el popup quedaba pegado a los
   bordes de la pantalla en móvil. Se reduce el padding en cascada
   (overlay -> wrap -> preview) para dejar más aire sin tocar el layout de
   escritorio. */
@media (max-width: 400px) {
  /* align-items:center + contenido más alto que la pantalla = la parte de
     arriba queda inalcanzable al hacer scroll en muchos navegadores (el
     centrado "empuja" igual por ambos lados, pero el overflow por arriba no
     es recuperable). Con flex-start, el padding de arriba siempre es un
     margen real y el resto se desplaza con el scroll normal de .uflow-wrap. */
  .uflow-overlay { padding: 24px 16px; align-items: flex-start; }
  .uflow-wrap { padding: 16px 12px; max-height: 98vh; }
  .uflow-preview { padding: 16px; }
}
@media (min-width: 640px) {
	.uflow-form-panel form.wpcf7-form input[type="submit"] {
		margin-top:-40px;
		width: auto;
	}
}


 /* PATHS */
 /* Los fill estáticos de base-face/diposit-face/tovera-face se han quitado
    a propósito: esas clases conviven en el mismo <path> con
    uflow-trasera-face/uflow-deposito-face, y una regla CSS por clase
    siempre gana al fill="" que pone el JS (los atributos de presentación
    SVG tienen la especificidad más baja posible). rec-face y el path del
    rectángulo del sensor no tienen selector de color asociado, se quedan igual;
    el círculo del sensor lleva uflow-interior-face y lo pinta el JS (por eso el
    :not, para que esta regla no gane al fill). */
  path.rec-face {
      fill: #444;
  }
  path.sensor-face:not(.uflow-interior-face) {
      fill: #00000036;
  }