/* ==========================================================================
   En Balance · Materia Clara — formularios (pago, cuenta, rastreo).
   Campos de cristal claro a 16 px, etiquetas pequeñas arriba, avisos en una
   línea de cristal y errores en un rojo tierra tranquilo. Se activa con la
   clase .mc-forma en el <main> de la página.
   ========================================================================== */

.mc-forma { --mc-error: #a8402d; }

/* ---- Avisos de WooCommerce: una línea de cristal, nunca una caja de color ---- */
.mc-forma .woocommerce-notices-wrapper:empty, .mc-forma .woocommerce-NoticeGroup:empty { display: none; }
.mc-mundo.mc-forma .woocommerce-error, .mc-mundo.mc-forma .woocommerce-message, .mc-mundo.mc-forma .woocommerce-info {
  margin: 0 0 var(--mc-e3) !important; padding: var(--mc-e3) var(--mc-e4) !important; list-style: none; border: 0 !important; border-radius: var(--mc-r-pieza);
  background: rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 1px rgba(22,21,20,.1); color: var(--mc-tinta) !important;
  font-size: 15px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e2) var(--mc-e3);
}
.mc-mundo.mc-forma .woocommerce-error { flex-direction: column; align-items: flex-start; box-shadow: inset 0 0 0 1px rgba(168,64,45,.45); }
.mc-mundo.mc-forma .woocommerce-error li { margin: 0; }
.mc-mundo.mc-forma .woocommerce-error::before, .mc-mundo.mc-forma .woocommerce-message::before, .mc-mundo.mc-forma .woocommerce-info::before { content: none !important; }
.mc-mundo.mc-forma .woocommerce-message a.wc-forward { display: none !important; }   /* "Ver carrito" estando ya en el carrito o pagando */
.mc-mundo.mc-forma .woocommerce-message a, .mc-mundo.mc-forma .woocommerce-info a, .mc-mundo.mc-forma .woocommerce-error a {
  order: 2; margin-left: auto; float: none !important; padding: 0 !important; background: none !important; border: 0 !important;
  color: var(--mc-acento) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
/* Mientras WooCommerce actualiza, una bruma suave (no un bloque blanco). */
.mc-forma .blockUI.blockOverlay { background: rgba(255,255,255,.35) !important; opacity: 1 !important; border-radius: inherit; }

/* Campos de texto del sistema: cristal claro, 16 px (el iPhone no hace zoom) */
.mc-mundo.mc-forma input.input-text, .mc-mundo.mc-forma .mc-cupon input, .mc-mundo.mc-forma .mc-calculadora input[type="text"],
.mc-mundo.mc-forma textarea, .mc-mundo.mc-forma select {
  box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 0 var(--mc-e3) !important; border: 0 !important; border-radius: var(--mc-r-campo) !important;
  background: rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 1px rgba(22,21,20,.14) !important; outline: none;
  font: 400 16px/1.3 var(--mc-fuente) !important; color: var(--mc-tinta) !important;
  transition: box-shadow .2s ease, background .2s ease;
}
.mc-mundo.mc-forma textarea { min-height: 96px; padding: var(--mc-e3) !important; line-height: 1.5 !important; }
.mc-mundo.mc-forma input.input-text:focus, .mc-mundo.mc-forma .mc-cupon input:focus, .mc-mundo.mc-forma .mc-calculadora input[type="text"]:focus,
.mc-mundo.mc-forma textarea:focus, .mc-mundo.mc-forma select:focus { background: #fff !important; box-shadow: inset 0 0 0 1px rgba(31, 116, 128, .22), 0 0 var(--mc-tecla) rgba(31, 116, 128, .3), 0 24px 30px -22px rgba(31, 116, 128, .62) !important; outline: none; }
.mc-mundo.mc-forma ::placeholder { color: rgba(22,21,20,.42); }
.mc-calculadora .mc-boton, .mc-cupon .mc-boton { flex: none; min-height: 48px; }

/* Rejilla de campos: dos columnas donde WooCommerce dice "first/last" */
/* Seis columnas: nombre y apellidos a medias; el código postal (5 dígitos) angosto y el estado ancho. */
:is(.mc-campos, .woocommerce-address-fields__field-wrapper) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mc-e3); }
.mc-mundo.mc-forma :is(.mc-campos, .woocommerce-address-fields__field-wrapper) .form-row { grid-column: 1 / -1; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: var(--mc-e1); }
.mc-mundo.mc-forma :is(.mc-campos, .woocommerce-address-fields__field-wrapper) .form-row-first { grid-column: 1 / span 3; }
.mc-mundo.mc-forma :is(.mc-campos, .woocommerce-address-fields__field-wrapper) .form-row-last { grid-column: 4 / span 3; }
.mc-mundo.mc-forma :is(.mc-campos, .woocommerce-address-fields__field-wrapper) :is(#billing_postcode_field, #shipping_postcode_field) { grid-column: 1 / span 2; }
.mc-mundo.mc-forma :is(.mc-campos, .woocommerce-address-fields__field-wrapper) :is(#billing_state_field, #shipping_state_field) { grid-column: 3 / span 4; }
.mc-mundo.mc-forma .form-row label:not(.checkbox) { margin: 0; font-size: 13px; font-weight: 600; color: var(--mc-texto-2); line-height: 1.4; }
.mc-mundo.mc-forma .form-row label .required { color: var(--mc-texto-3); text-decoration: none; border: 0; }
.mc-mundo.mc-forma .form-row label .optional { font-weight: 400; color: var(--mc-texto-3); }
.mc-mundo.mc-forma .form-row .description { display: block !important; margin: 2px 0 0 !important; padding: 0 !important; background: none !important; color: var(--mc-texto-3) !important; font-size: 12px; }
.mc-mundo.mc-forma .form-row .description::before { content: none !important; }
/* Lo que falta llenar se señala con luz, no con un borde grueso: un brillo rojo tenue alrededor y un
   contorno casi imperceptible (la etiqueta sigue en rojo). Si se intenta avanzar sin llenarlo, el
   brillo late una vez (--mc-aviso, eb-pago.js). Enfocado, levita con su luz en rojo tenue; al escribir
   algo válido deja de ser "inválido" y vuelve la luz turquesa. */
@property --mc-aviso { syntax: '<length>'; inherits: false; initial-value: 14px; }
.mc-mundo.mc-forma .form-row.woocommerce-invalid input.input-text:not(:focus), .mc-mundo.mc-forma .form-row.woocommerce-invalid .select2-selection {
  box-shadow: inset 0 0 0 1px rgba(168, 64, 45, .35), 0 0 var(--mc-aviso) rgba(168, 64, 45, .2) !important;
}
.mc-mundo.mc-forma .form-row.woocommerce-invalid input.input-text:focus {
  box-shadow: inset 0 0 0 1px rgba(168, 64, 45, .4), 0 0 var(--mc-tecla) rgba(168, 64, 45, .3), 0 24px 30px -22px rgba(168, 64, 45, .55) !important;
}
.mc-mundo.mc-forma .form-row.woocommerce-invalid label { color: var(--mc-error); }
.mc-mundo.mc-forma .checkout-inline-error-message { margin: 2px 0 0; font-size: 12px; color: var(--mc-error); }
/* Colonia (pago y Mi cuenta): lista de colonias y, debajo, el campo de «Otra». El contenedor de la lista mide lo mismo
   que el campo (48 px) y el campo de texto queda 8 px más abajo: los bordes ya no se tocan ni se superponen.
   Si el código postal no está en el catálogo, un aviso discreto invita a escribirla (eb-cp.js). */
.eb-colonia-lista .select2-container { display: block; height: 48px; }
.eb-colonia-lista + input.input-text { margin-top: var(--mc-e2, 8px); }
.mc-mundo.mc-forma .form-row .eb-cp-aviso { display: block; margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--mc-texto-3); }
#billing_country_field, #shipping_country_field { display: none !important; }   /* solo enviamos a México */

/* El selector de estado (selectWoo) con el mismo cristal */
.mc-mundo.mc-forma .select2-container .select2-selection--single {
  height: 48px !important; border: 0 !important; border-radius: var(--mc-r-campo) !important; background: rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 1px rgba(22,21,20,.14);
}
.mc-mundo.mc-forma .select2-container .select2-selection--single .select2-selection__rendered { line-height: 48px; padding: 0 var(--mc-e5) 0 var(--mc-e3); font-size: 16px; color: var(--mc-tinta); }
.mc-mundo.mc-forma .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; right: var(--mc-e2); }
.mc-mundo.mc-forma .select2-container--open .select2-selection--single { box-shadow: inset 0 0 0 1.5px var(--mc-acento); background: #fff; }

/* Casillas */
.mc-mundo.mc-forma .mc-casilla-fila, .mc-mundo.mc-forma .create-account { margin: 0; font-size: 15px; font-weight: 500; }
.mc-mundo.mc-forma label.checkbox, .mc-mundo.mc-forma label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: var(--mc-e2); margin: 0; font-size: 15px; font-weight: 500; color: var(--mc-tinta); cursor: pointer; line-height: 1.4; }
.mc-mundo.mc-forma label.checkbox small { color: var(--mc-texto-3); font-weight: 400; }
/* El tema dibuja sus propias casillas vacías: aquí, la casilla del sistema operativo, con el acento. */
.mc-mundo.mc-forma input[type="checkbox"] {
  -webkit-appearance: checkbox !important; appearance: auto !important; position: static !important; opacity: 1 !important;
  width: 18px !important; height: 18px !important; margin: 2px 0 0 !important; flex: none; accent-color: var(--mc-acento);
  background: none !important; border: 0 !important; box-shadow: none !important;
}
.mc-mundo.mc-forma input[type="checkbox"]::before, .mc-mundo.mc-forma input[type="checkbox"]::after { content: none !important; display: none !important; }
.mc-paso-extra { display: flex; flex-direction: column; gap: var(--mc-e4); margin-top: calc(-1 * var(--mc-e4)); }
.mc-paso-extra .shipping_address { padding-top: var(--mc-e2); }
.mc-notas :is(.mc-campos, .woocommerce-address-fields__field-wrapper) { margin-top: var(--mc-e3); }
.mc-cuenta-opcional { margin-top: calc(-1 * var(--mc-e4)); }


/* Chrome/Opera: al teclear, el cristal de al lado se repintaba mal (una franja de color parpadeando
   en su borde). Darle su propia capa no bastó: en los formularios, y solo en esos motores, el
   cristal no recalcula desenfoque; es translúcido y teñido con la luz de la página. Detrás hay un
   fondo suave, así que se ve casi igual. Safari (sin .mc-cromo) no se toca. */
.mc-cromo .mc-forma .mc-vidrio {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mc-cielo-2) 18%, rgba(255, 255, 255, .86)) 0%,
    color-mix(in srgb, var(--mc-cielo-2) 32%, rgba(255, 255, 255, .7)) 55%,
    color-mix(in srgb, var(--mc-cielo-2) 42%, rgba(255, 255, 255, .6)) 100%);
}

/* Foco fino: un solo borde de 1.5 px (el anillo doble se sentía grueso y tapaba el brillo al teclear,
   que ahora es el halo que aparece y se va con cada tecla; ver eb-inicio.js "Al teclear"). */
/* eb-tokens.css pone a todo foco un contorno de 3 px con !important: en los campos se anula igual. */
.mc-mundo.mc-forma :is(input, textarea, select):focus-visible { outline: none !important; }
/* El brillo al teclear vive en --mc-tecla (lo anima eb-inicio.js): una animación no le gana a un
   !important, pero sí puede mover una variable que la sombra usa. */
@property --mc-tecla { syntax: '<length>'; inherits: false; initial-value: 0px; }
.mc-mundo .mc-pag-forma .wpforms-container .wpforms-form :is(input, textarea, select):focus {
  box-shadow: 0 0 0 1px var(--mc-acento), 0 0 var(--mc-tecla) rgba(31, 116, 128, .3) !important;
}

/* Medidor de la contraseña (WooCommerce): una etiqueta suave, no un bloque de color */
.mc-mundo.mc-forma .woocommerce-password-strength {
  display: inline-block; margin: var(--mc-e2) 0 0; padding: 5px 13px; border: 0 !important; border-radius: var(--mc-r-pildora);
  font-size: 13px; font-weight: 600; text-align: left; background: rgba(22, 21, 20, .06); color: var(--mc-texto-2);
}
.mc-mundo.mc-forma .woocommerce-password-strength.short, .mc-mundo.mc-forma .woocommerce-password-strength.bad { background: rgba(168, 64, 45, .1); color: #a8402d; }
.mc-mundo.mc-forma .woocommerce-password-strength.good { background: rgba(214, 160, 40, .16); color: #7a5a10; }
.mc-mundo.mc-forma .woocommerce-password-strength.strong { background: rgba(31, 116, 128, .12); color: var(--mc-acento); }
.mc-mundo.mc-forma .woocommerce-password-hint { display: block; margin-top: var(--mc-e2); font-size: 13px; line-height: 1.5; color: var(--mc-texto-3); }

/* Al tocar un formulario, su cristal se levanta apenas, como una hoja que tomas de la mesa: 3 px y la
   sombra difusa un poco más larga y suave, con la curva de layout. Al salir, se vuelve a posar.
   Mismas capas que .mc-vidrio (canto, filo, grosor, sombras en capas); solo cambia la distancia. */
@media (prefers-reduced-motion: no-preference) {
  .mc-mundo.mc-forma .mc-vidrio { transition: transform .5s var(--mc-curva-layout), box-shadow .5s var(--mc-curva-layout); }
  /* Solo cuando se escribe en él (no al hacer clic en un enlace o botón dentro del cristal). */
  .mc-mundo.mc-forma .mc-vidrio:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):focus) {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.65),
      0 1px 1px -.5px rgba(22,21,20,.05), 0 8px 10px -4px rgba(22,21,20,.05), 0 30px 34px -14px rgba(22,21,20,.06),
      0 46px 84px -44px rgba(22,21,20,.36);
  }
}

/* Y el campo donde vas a escribir levita: sube 3 px y debajo queda una luz turquesa separada de él,
   centrada, más angosta que el campo y muy difuminada (en la regla de foco de arriba), como el
   resplandor bajo algo que flota. No toca sus bordes: por eso no parece que se despega, sino que levita. En la contraseña se mueve la envoltura entera,
   con su ojito, para que nada se desalinee. Al salir, se vuelve a posar. */
@media (prefers-reduced-motion: no-preference) {
  .mc-mundo.mc-forma :is(input.input-text, textarea, select, .password-input) {
    transition: transform .45s var(--mc-curva-layout), box-shadow .45s var(--mc-curva-layout), background .2s ease !important;
  }
  .mc-mundo.mc-forma :is(input.input-text, textarea, select):focus { transform: translateY(-3px); }
  .mc-mundo.mc-forma .password-input input.input-text:focus { transform: none; }
  .mc-mundo.mc-forma .password-input:has(input:focus) { transform: translateY(-3px); }
  .mc-mundo .mc-pag-forma .wpforms-container .wpforms-form :is(input, textarea, select):focus { transform: translateY(-3px); transition: transform .45s var(--mc-curva-layout), box-shadow .45s var(--mc-curva-layout); }
}
.mc-mundo .mc-pag-forma .wpforms-container .wpforms-form :is(input, textarea, select):focus {
  border-color: rgba(31, 116, 128, .22) !important;   /* WPForms pone su borde de acento sólido: aquí, el contorno casi imperceptible del sistema */
  box-shadow: 0 0 var(--mc-tecla) rgba(31, 116, 128, .3), 0 24px 30px -22px rgba(31, 116, 128, .62) !important;
}

/* Aviso «¿Necesitas cancelar?» / «Tu pedido ya va en camino…» (eb_cancelacion_pedido; Mi cuenta, rastreo, pedido y gracias): nota suave, sin caja ni color de alarma */
.eb-cancelacion { margin: 0; font-family: var(--mc-fuente); font-size: 14px; line-height: 1.5; color: var(--mc-texto-2); }
.mc-mundo .eb-cancelacion a { color: var(--mc-acento) !important; font-weight: 600; text-decoration: none; }
.mc-mundo .eb-cancelacion a::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .2s var(--mc-curva-layout); }
.mc-mundo .eb-cancelacion a:hover, .mc-mundo .eb-cancelacion a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mc-mundo .eb-cancelacion a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .mc-mundo .eb-cancelacion a::after { transition: none; } .mc-mundo .eb-cancelacion a:hover::after { transform: none; } }

/* WooCommerce enfoca el aviso al cargar (lectores de pantalla); sin el recuadro azul del navegador. */
.mc-forma :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper, .woocommerce-NoticeGroup):focus { outline: none; }

/* Avisos v2 (3-oct): cristal con brillo, sin recuadro de foco, «Deshacer» como píldora. */
.mc-mundo.mc-forma :is(.woocommerce-message, .woocommerce-info) {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.64)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 12px 32px -20px rgba(22,21,20,.45) !important;
  border-radius: var(--mc-r-pildora); padding: 10px 10px 10px 22px !important; min-height: 58px;
  transition: opacity .5s ease, transform .5s ease;
}
.mc-mundo.mc-forma :is(.woocommerce-message, .woocommerce-info):is(:focus, :focus-visible) {
  outline: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 12px 32px -20px rgba(22,21,20,.45) !important;
}
.mc-mundo.mc-forma .woocommerce-error:is(:focus, :focus-visible) { outline: none !important; }
.mc-mundo.mc-forma .woocommerce-message a.restore-item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px !important; border-radius: var(--mc-r-pildora);
  background: var(--mc-acento) !important; color: #fff !important; text-decoration: none; font-size: 14px; white-space: nowrap;
  transition: background .16s ease, transform .16s ease;
}
.mc-mundo.mc-forma .woocommerce-message a.restore-item:hover { background: var(--mc-acento-hover) !important; }
.mc-mundo.mc-forma .woocommerce-message a.restore-item:active { transform: scale(.96); }
.mc-mundo.mc-forma .woocommerce-message a.restore-item::before { content: "↺"; font-size: 16px; line-height: 1; }
.mc-mundo.mc-forma .eb-aviso-sale { opacity: 0; transform: translateY(-6px); }
.mc-mundo.mc-forma .eb-aviso-cerrar {
  order: 3; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 2px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--mc-texto-3); font: 400 20px/1 var(--mc-fuente); cursor: pointer; transition: background .16s ease, color .16s ease;
}
.mc-mundo.mc-forma .eb-aviso-cerrar:hover { background: rgba(22,21,20,.06); color: var(--mc-tinta); }
.mc-mundo.mc-forma :is(.woocommerce-message, .woocommerce-info):not(:has(a)) .eb-aviso-cerrar { margin-left: auto; }
@media (max-width: 767px) {
  .mc-mundo.mc-forma :is(.woocommerce-message, .woocommerce-info) { border-radius: var(--mc-r-pieza); padding: 14px 10px 10px 18px !important; }
}