/* Encargos: estado abierto/cerrado (home, tienda y página de Encargos), pasos de «Cómo funciona»
   y detalles del formulario de Elementor Pro que sus controles no cubren.
   Marcado de [mf_encargos_estado] (misifusart-core); la página la genera tools/elementor/pagina-encargos.py. */

/* ---------- Marca de texto provisional (misifusart-core, mientras Mary no confirme) ---------- */
.mf-provisional {
  display: inline-block; margin-right: .3em; padding: .15em .45em; vertical-align: .2em;
  font: 700 max(.7rem, .28em)/1.2 var(--e-global-typography-accent-font-family), sans-serif; letter-spacing: .04em;
  color: var(--tinta); background: var(--mostaza-claro); border-radius: 3px;
}

/* ---------- Estado ---------- */
.mf-estado {
  display: inline-flex; align-items: center; gap: .55em; margin: 0;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--tinta);
}
.mf-estado__punto {
  flex: none; width: .7em; height: .7em; border-radius: 50%;
  background: var(--verde-vivo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde-vivo) 25%, transparent);
}
.mf-estado--cerrado .mf-estado__punto {
  background: transparent; border: 2px solid var(--tinta-suave); box-shadow: none;
}

/* ---------- Cómo funciona ---------- */
.mf-paso__numero .elementor-heading-title { line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 1; }

/* ---------- Lo que no hago ---------- */
.mf-no-hago .elementor-icon-list-icon { align-self: center; }

/* ---------- Formulario ---------- */
/* Ayuda bajo «Referencias» (campo HTML): pegada al campo de archivo */
.mf-encargo-caja .elementor-field-type-html { margin-top: -10px; }
.mf-encargo-caja .mf-ayuda { margin: 0; font-size: .875rem; color: var(--tinta-suave); }
/* Campo de archivo: el botón nativo con el aspecto de un botón secundario */
.mf-encargo-caja input[type="file"] { padding: .55em; cursor: pointer; }
.mf-encargo-caja input[type="file"]::file-selector-button {
  margin-right: .9em; padding: .45em .9em; border: 2px solid var(--tinta); border-radius: 6px;
  background: transparent; color: var(--tinta); font: 600 .9rem/1.1 var(--e-global-typography-accent-font-family), sans-serif; cursor: pointer;
}
/* Con JS (encargos.js): botón y resumen propios en español; el input nativo queda encima, transparente,
   y recibe el clic y el foco. La caja copia el aspecto del campo de Elementor (borde 1,5 px tinta-suave, fondo papel; ver pagina-encargos.py). */
.mf-archivo {
  position: relative; display: flex; align-items: center; gap: .9em; width: 100%; min-height: 47px; padding: .55em;
  border: 1.5px solid var(--tinta-suave); border-radius: 6px; background: var(--papel); color: var(--tinta);
}
.mf-archivo input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.mf-archivo__boton {
  flex: none; padding: .45em .9em; border: 2px solid var(--tinta); border-radius: 6px;
  font: 600 .9rem/1.1 var(--e-global-typography-accent-font-family), sans-serif;
}
.mf-archivo__nombres { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; color: var(--tinta-suave); }
.mf-archivo.tiene-archivos .mf-archivo__nombres { color: var(--tinta); }
.mf-archivo:hover .mf-archivo__boton { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.mf-archivo:has(input:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 2px; }
.elementor-error .mf-archivo { border-color: currentColor; }
/* Aviso de imagen demasiado grande (encargos.js): texto en tinta sobre papel con filete rojo, porque el
   rojo sobre el fondo menta de la caja no llega a AA */
.mf-archivo__aviso {
  margin: 8px 0 0; padding: 10px 12px; border-left: 4px solid var(--rojo); border-radius: 4px;
  background: var(--papel); color: var(--tinta); font-size: .9rem; line-height: 1.45;
}
/* Casilla de privacidad: enlace subrayado y casilla de buen tamaño para el dedo */
.mf-encargo-caja .elementor-field-type-acceptance input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); }
.mf-encargo-caja .elementor-field-type-acceptance label { font-weight: 400; }
.mf-encargo-caja .elementor-field-type-acceptance a { text-decoration: underline; text-underline-offset: .2em; }
/* Foco visible en los campos (Elementor solo cambia el borde) */
.mf-encargo-caja .elementor-field:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
/* Mensajes: confirmación en una caja que se ve, errores por campo legibles */
.mf-encargo-caja .elementor-message { margin-top: 18px; font-weight: 600; }
.mf-encargo-caja .elementor-message.elementor-message-success {
  padding: 14px 16px; border-left: 4px solid var(--verde); background: var(--papel); border-radius: 4px;
}
.mf-encargo-caja .elementor-message::before { content: none; }
.mf-encargo-caja .elementor-field-group .elementor-message.elementor-help-inline { margin-top: 6px; font-size: .9rem; }
/* Desplegables: Elementor mete el error dentro del envoltorio flex del select y lo pone al lado.
   Debajo, como en el resto de campos, y la flecha centrada en el select (no en select + error). */
.mf-encargo-caja .elementor-select-wrapper { flex-wrap: wrap; }
.mf-encargo-caja .elementor-select-wrapper .elementor-help-inline { flex-basis: 100%; }
.mf-encargo-caja .elementor-select-wrapper .select-caret-down-wrapper { top: var(--mf-select-mitad, 50%); }
.mf-encargo-caja .elementor-select-wrapper:has(.elementor-help-inline) { --mf-select-mitad: 23.5px; } /* select «md»: 47 px */