/* ═══════════════════════════════════════════════════════════════════════════════
   1.8.25 — SISTEMA ÚNICO DE CONTROLES (páginas públicas: portada, tienda, producto,
   carrito, checkout y su editor en línea, /app/, mi cuenta). Se carga el último.
   Usa SIEMPRE estas clases en botones/campos nuevos y saldrán con los colores de la
   marca en claro y oscuro, por encima del tema (Electro pone button blanco, :hover gris…):
     .zfl-btn-primary    amarillo de la marca, letra oscura
     .zfl-btn-secondary  transparente con borde sutil (acción secundaria: Quitar, Cancelar…)
     .zfl-btn-link       enlace discreto
     .zfl-input          campo de texto
     .zfl-choice         opción/chip; elegida con .is-selected, .active, [aria-pressed=true]
                         o con un input:checked dentro
   Abajo, la lista de piezas ya existentes que se pasan a este sistema.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --zfl-y: #ffcc00; --zfl-y-hover: #f0bf00; --zfl-y-border: #e0b400; --zfl-on-y: #111827;
    --zfl-ink: #111827; --zfl-muted: #5b6472; --zfl-line: #d9dde3; --zfl-card: #ffffff;
    --zfl-input-bg: #ffffff; --zfl-input-line: #cfd4db; --zfl-input-ink: #111827; --zfl-placeholder: #8a93a0;
    --zfl-soft: rgba(255, 204, 0, .10); --zfl-ring: rgba(255, 204, 0, .35);
    --zfl-ctl-h: 48px; --zfl-ctl-r: 12px;
}
html.dark-mode {
    --zfl-ink: #f3f4f6; --zfl-muted: #a7afbb; --zfl-line: #3a4150; --zfl-card: #232730;
    --zfl-input-bg: #252830; --zfl-input-line: #4b5563; --zfl-input-ink: #e5e7eb; --zfl-placeholder: #8b93a1;
    --zfl-soft: rgba(255, 204, 0, .10); --zfl-ring: rgba(255, 204, 0, .30);
}

/* ── Botón primario ── */
html body .zfl-btn-primary,
html body .zfl-btn-primary:visited,
html body .zfl-btn-primary:hover,
html body .zfl-btn-primary:focus,
html body .zfl-btn-primary:active,
html body .zfl-aff-box .zfl-aff-apply,
html body .zfl-aff-box .zfl-aff-apply:hover,
html body .zfl-aff-box .zfl-aff-apply:focus,
html body .zfl-aff-box .zfl-aff-apply:active {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px;
    min-height: var(--zfl-ctl-h) !important; padding: 0 20px !important; border: 1.5px solid var(--zfl-y-border) !important;
    border-radius: var(--zfl-ctl-r) !important; background: var(--zfl-y) !important; background-image: none !important;
    color: var(--zfl-on-y) !important; font-family: inherit !important; font-size: 16px !important; font-weight: 800 !important;
    line-height: 1.1 !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important;
    text-shadow: none !important; box-shadow: none !important; cursor: pointer; opacity: 1;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
html body .zfl-btn-primary:hover, html body .zfl-aff-box .zfl-aff-apply:hover { background: var(--zfl-y-hover) !important; }
html body .zfl-btn-primary:focus-visible, html body .zfl-aff-box .zfl-aff-apply:focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px var(--zfl-ring) !important; }
html body .zfl-btn-primary:active, html body .zfl-aff-box .zfl-aff-apply:active { transform: scale(.98); }
html body .zfl-btn-primary:disabled, html body .zfl-btn-primary[aria-disabled="true"] { opacity: .5 !important; cursor: default; }

/* ── Botón secundario ── */
html body .zfl-btn-secondary,
html body .zfl-btn-secondary:visited,
html body .zfl-btn-secondary:hover,
html body .zfl-btn-secondary:focus,
html body .zfl-btn-secondary:active,
html body .zfl-aff-box .zfl-aff-remove,
html body .zfl-aff-box .zfl-aff-remove:hover,
html body .zfl-aff-box .zfl-aff-remove:focus,
html body .zfl-aff-box .zfl-aff-remove:active {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px;
    min-height: var(--zfl-ctl-h) !important; padding: 0 16px !important; border: 1.5px solid var(--zfl-line) !important;
    border-radius: var(--zfl-ctl-r) !important; background: transparent !important; background-image: none !important;
    color: var(--zfl-muted) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
    line-height: 1.1 !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important;
    text-shadow: none !important; box-shadow: none !important; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
html body .zfl-btn-secondary:hover, html body .zfl-aff-box .zfl-aff-remove:hover { border-color: var(--zfl-y-border) !important; color: var(--zfl-ink) !important; background: var(--zfl-soft) !important; }
html body .zfl-btn-secondary:focus-visible, html body .zfl-aff-box .zfl-aff-remove:focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px var(--zfl-ring) !important; }

/* ── Enlace discreto ── */
html body .zfl-btn-link, html body .zfl-btn-link:hover, html body .zfl-btn-link:focus {
    padding: 4px 2px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--zfl-muted) !important; font: inherit; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 3px; cursor: pointer;
}
html body .zfl-btn-link:hover { color: var(--zfl-ink) !important; }

/* ── Campos de texto ── */
html body .zfl-input,
html body .zfl-aff-box .zfl-aff-row input[type="text"] {
    min-height: var(--zfl-ctl-h) !important; padding: 0 14px !important; border: 1.5px solid var(--zfl-input-line) !important;
    border-radius: var(--zfl-ctl-r) !important; background: var(--zfl-input-bg) !important; background-image: none !important;
    color: var(--zfl-input-ink) !important; font-family: inherit !important; font-size: 16px !important; box-shadow: none !important; outline: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body textarea.zfl-input { min-height: 96px !important; padding: 12px 14px !important; }
html body .zfl-input::placeholder, html body .zfl-aff-box .zfl-aff-row input::placeholder { color: var(--zfl-placeholder) !important; opacity: 1; }
html body .zfl-input:focus, html body .zfl-aff-box .zfl-aff-row input[type="text"]:focus { border-color: var(--zfl-y-border) !important; box-shadow: 0 0 0 3px var(--zfl-ring) !important; }

/* ── Opciones / chips ── */
html body .zfl-choice {
    border: 1.5px solid var(--zfl-line) !important; border-radius: var(--zfl-ctl-r) !important; background: var(--zfl-card) !important;
    color: var(--zfl-ink) !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer;
}
html body .zfl-choice:hover { border-color: var(--zfl-y-border) !important; }
html body .zfl-choice.is-selected, html body .zfl-choice.active, html body .zfl-choice[aria-pressed="true"], html body .zfl-choice:has(input:checked) {
    border-color: var(--zfl-y-border) !important; background: var(--zfl-soft) !important; box-shadow: 0 0 0 3px var(--zfl-ring) !important; color: var(--zfl-ink) !important;
}

/* ═══ Piezas existentes corregidas en la auditoría 1.8.25 ═══ */
/* Cupón del carrito: misma altura y radio para campo y botones */
html body .zfl-aff-box .zfl-aff-row { align-items: stretch; }
html body .zfl-aff-box .zfl-aff-row > * { min-height: 50px !important; }
/* Una sola fila también en móvil: input flexible + botones compactos. */
html body .zfl-aff-box .zfl-aff-row { flex-wrap: nowrap !important; }
html body .zfl-aff-box .zfl-aff-row input[type="text"] { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
html body .zfl-aff-box .zfl-aff-row button { flex: 0 0 auto !important; white-space: nowrap !important; }
@media (max-width: 420px) { html body .zfl-aff-box .zfl-aff-apply { padding: 0 16px !important; } html body .zfl-aff-box .zfl-aff-remove { padding: 0 12px !important; } }
html.dark-mode body .zfl-aff-box { border-color: rgba(255, 255, 255, .16); background: rgba(255, 204, 0, .05); }
/* Checkout: botón «Copiar» de los datos de pago (salía blanco en oscuro) */
html.dark-mode body .er-checkout .er-copy-btn,
html.dark-mode body .er-checkout .er-copy-btn:focus,
html.dark-mode body .er-checkout .er-copy-btn:active { border-color: #4b5563 !important; background: transparent !important; color: #e5e7eb !important; }
html.dark-mode body .er-checkout .er-copy-btn:hover { border-color: #ffcc00 !important; background: rgba(255, 204, 0, .1) !important; color: #ffcc00 !important; }
html.dark-mode body .er-checkout .er-copy-btn.copied { border-color: #22c55e !important; background: rgba(34, 197, 94, .12) !important; color: #4ade80 !important; }
/* Checkout: «Siguiente / Realizar pedido» siempre en el amarillo de la marca (no amarillo pálido) */
html body .er-checkout.zst .zst-big.er-submit:not(:disabled),
html body .er-checkout.zst .zst-big.er-submit:not(:disabled):hover,
html body .er-checkout.zst .zst-big.er-submit:not(:disabled):focus { background: #ffcc00 !important; background-image: none !important; color: #111827 !important; border-color: #e0b400 !important; }
html body .er-checkout.zst .zst-big.er-submit:not(:disabled):hover { background: #f0bf00 !important; }
/* Carrito: «Compartir» con buen contraste (verde más oscuro), botón − legible en oscuro, × visible en claro */
html body.zfl-store-active .zfl-cart-share, html body.zfl-store-active .zfl-cart-share:hover, html body.zfl-store-active .zfl-cart-share:focus { background: #15803d !important; color: #fff !important; border-color: #15803d !important; }
html body.zfl-store-active .zfl-cart-share:hover { background: #166534 !important; }
html.dark-mode body .zfl-qty-minus, html.dark-mode body .zfl-qty-plus { color: #e5e7eb !important; }
html.dark-mode body .zfl-qty-minus:disabled, html.dark-mode body .zfl-qty-plus:disabled { color: #6b7280 !important; }
html:not(.dark-mode) body.zfl-store-active .zfl-cart-item-remove { color: #6b7280 !important; }
html:not(.dark-mode) body.zfl-store-active .zfl-cart-item-remove:hover { color: #dc2626 !important; }

/* ═══ 1.8.27 — Venta por peso o medida: selector de cantidad ═══════════════════════
   Ficha del producto y tarjetas de la tienda. La unidad y las cantidades rápidas salen del
   producto (ZFL_Meat::picker_html). Lo ELEGIDO en amarillo de marca con texto oscuro, lo no
   elegido discreto, el campo según el tema. Botones de 48 px (mínimo 44 px para el dedo). */
html body .zfl-measure,
html body .zfh-meat-picker.zfl-measure {
    display: grid !important; gap: 12px !important; width: 100%; box-sizing: border-box;
    margin: 2px 0 0 !important; padding: 14px !important;
    border: 1.5px solid var(--zfl-line) !important; border-radius: 14px !important;
    background: var(--zfl-card) !important; color: var(--zfl-ink) !important;
    font-family: inherit; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3;
}
html body .zfl-measure[hidden] { display: none !important; }
html body .zfl-measure .zfl-measure-q { color: var(--zfl-ink) !important; font-size: 15px !important; font-weight: 800 !important; }
html body .zfl-measure .zfl-measure-presets {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important; gap: 8px !important;
}
html body .zfl-measure .zfl-choice.zfl-measure-opt,
html body .zfl-measure .zfl-choice.zfl-measure-opt:focus {
    display: flex !important; align-items: center; justify-content: center;
    min-height: var(--zfl-ctl-h) !important; height: auto !important; margin: 0 !important; padding: 0 10px !important;
    border: 1.5px solid var(--zfl-line) !important; border-radius: 12px !important;
    background: transparent !important; background-image: none !important; color: var(--zfl-muted) !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important;
    letter-spacing: normal !important; text-transform: none !important; white-space: nowrap; box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html body .zfl-measure .zfl-choice.zfl-measure-opt:hover { border-color: var(--zfl-y-border) !important; color: var(--zfl-ink) !important; }
html body .zfl-measure .zfl-choice.zfl-measure-opt:focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px var(--zfl-ring) !important; }
html body .zfl-measure .zfl-choice.zfl-measure-opt.is-selected,
html body .zfl-measure .zfl-choice.zfl-measure-opt[aria-pressed="true"] {
    border-color: var(--zfl-y-border) !important; background: var(--zfl-y) !important; color: var(--zfl-on-y) !important; box-shadow: none !important;
}
html body .zfl-measure .zfl-measure-other {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important;
    color: var(--zfl-muted) !important; font-size: 14px !important; font-weight: 700 !important;
}
html body .zfl-measure .zfl-measure-field { position: relative; display: flex; align-items: center; flex: 0 1 170px; min-width: 0; }
html body .zfl-measure .zfl-measure-field input.zfl-input {
    width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 38px 0 14px !important;
    text-align: right !important; font-weight: 700 !important; -moz-appearance: textfield; appearance: textfield;
}
html body .zfl-measure .zfl-measure-field input.zfl-input::-webkit-outer-spin-button,
html body .zfl-measure .zfl-measure-field input.zfl-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html body .zfl-measure .zfl-measure-unit {
    position: absolute; right: 14px; color: var(--zfl-muted); font-size: 15px; font-weight: 800; pointer-events: none;
}
/* Tarjetas de la tienda (estrechas): campo debajo de su etiqueta y algo menos de relleno. */
html body .zfh-card .zfl-measure { gap: 8px !important; padding: 8px !important; border-radius: 12px !important; }
html body .zfh-card .zfl-measure .zfl-measure-q { font-size: 13px !important; }
html body .zfh-card .zfl-measure .zfl-measure-presets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
html body .zfh-card .zfl-measure .zfl-measure-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
html body .zfh-card .zfl-measure .zfl-choice.zfl-measure-opt { min-height: 44px !important; padding: 0 6px !important; font-size: 14px !important; }
html body .zfh-card .zfl-measure .zfl-measure-other { flex-direction: column; align-items: stretch; gap: 6px; font-size: 12px !important; }
html body .zfh-card .zfl-measure .zfl-measure-field { flex: 1 1 auto; }
html body .zfh-card .zfl-measure .zfl-measure-field input.zfl-input { min-height: 44px !important; }
/* Precio por unidad de medida ("3.50 USD / L"). */
html body .zfl-per-unit { font-size: .8em; font-weight: 700; opacity: .8; white-space: nowrap; }
html body .zfl-sp-price-item .zfl-per-unit { margin-left: .3em; }
/* «Añadir … al carrito» de la ficha: el mismo amarillo de marca en claro y oscuro. */
html body.zfl-store-active .zfl-sp-add .zfl-sp-add-btn:not(:disabled) { background: var(--zfl-y) !important; color: var(--zfl-on-y) !important; }
html body.zfl-store-active .zfl-sp-add .zfl-sp-add-btn:not(:disabled):hover { background: var(--zfl-y-hover) !important; }

/* Ficha del producto en modo CLARO: tarjeta clara y texto legible (antes, gris oscuro translúcido). */
html:not(.dark-mode) body.zfl-store-active .zfl-sp-info {
    border-color: var(--zfl-line) !important; background: var(--zfl-card) !important; box-shadow: 0 18px 42px rgba(17, 24, 39, .08) !important;
}
html:not(.dark-mode) body.zfl-store-active .zfl-sp-name { color: var(--zfl-ink) !important; }
html:not(.dark-mode) body.zfl-store-active .zfl-sp-price-item { border-color: var(--zfl-line) !important; background: #f6f7f9 !important; color: #374151 !important; }
html:not(.dark-mode) body.zfl-store-active .zfl-sp-price-item:first-child { border-color: rgba(224, 180, 0, .6) !important; background: rgba(255, 204, 0, .16) !important; color: var(--zfl-ink) !important; }
html:not(.dark-mode) body.zfl-store-active .zfl-sp-desc,
html:not(.dark-mode) body.zfl-store-active .zfl-sp-desc * { color: #4b5563 !important; }

/* Carrito: la cantidad lleva su unidad ("10 L") y los − / + son cómodos de tocar. */
html body.zfl-store-active .zfl-cart-item-qty button { min-width: 44px !important; min-height: 44px !important; }
html body.zfl-store-active .zfl-cart-item-measure .zfl-cart-item-qty span { width: auto !important; min-width: 56px; padding: 0 8px; line-height: 44px !important; text-align: center; white-space: nowrap; }
html body.zfl-store-active .zfl-cart-item-qty span { line-height: 44px !important; }
/* Checkout (resumen): «×10 L» sin cortar el nombre en móvil. */
html body .er-checkout .er-product-measure .er-quantity { white-space: nowrap; }
@media (max-width: 480px) {
    html body .er-checkout .er-product .er-product-content { flex-direction: column; align-items: flex-start; gap: 4px; }
    html body .er-checkout .er-product .er-quantity { order: 2; }
}