/* Pedido al por mayor, vista pública del cliente (mayorista-pedido.html).

Mismo motivo que css/tienda.css: estaba embebido en el HTML. */

/* Mismos tokens y tarjeta de producto que el escaparate público
       (tienda.html, clases .sf-tile*) — self-contenido igual que allí, no
       depende de css/panel.css (pensado para el panel, no para esto) ni de
       css/theme.css (otro juego de nombres). Solo se añade el paso de
       cantidad debajo del precio, que tienda.html no necesita porque ahí se
       compra desde el modal de producto. */
    :root {
      --tx: #1a1a1a;
      --tx2: #555452;
      --tx3: #928f8a;
      --brd: #e8e7e5;
      --brd-md: #dcdbd8;
      --surf: #ffffff;
      --bg: #f7f6f4;
      --red: #e8364e;
      --red-lt: #fde8e4;
      --red-mid: #fadcd6;
      --r-lg: 14px;
      --r-xl: 18px;
      --r-pill: 999px;
      --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
      --sh-md: 0 6px 20px rgba(0, 0, 0, 0.08);
      --disp: "DM Serif Display", Georgia, serif;
    }
    body { background: var(--bg); color: var(--tx); margin: 0; }
    .wp-shell { max-width: 900px; }
    .wp-header { font-family: var(--disp); }
    main.wp-shell { margin: 0 auto; float: none; }

    /* — Cabecera: mismas clases que el escaparate público (tienda.html) —
       banner + barra de info + buscador + categorías, idénticos a propósito
       para que un proveedor y sus clientes reconozcan el mismo diseño. Sin
       "Reservar cita" (no hay servicios aquí) ni el botón de carrito propio
       del escaparate (el carrito de un pedido al por mayor ya es la barra
       de abajo del catálogo). */
    .sf-banner {
      height: 240px;
      position: relative;
      background: linear-gradient(rgba(247, 246, 244, 0.62), rgba(247, 246, 244, 0.62)), url("../img/fondo-tienda.png");
      background-size: auto, 260px;
      background-repeat: repeat;
      border-bottom: 1px solid var(--brd);
    }
    .sf-banner.has-cover { border-bottom: 0; background-image: none; }
    .sf-banner.has-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42));
    }
    @media (max-width: 575px) { .sf-banner { height: 150px; } }

    .sf-infobar { background: var(--surf); border-bottom: 1px solid var(--brd); }
    .sf-infobar-inner { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; flex-wrap: wrap; }
    .sf-avatar {
      width: 78px; height: 78px; border-radius: var(--r-lg);
      border: 3px solid var(--surf); box-shadow: var(--sh-md);
      object-fit: cover; background: #f5efe3;
      margin-top: -56px; position: relative; z-index: 2; flex-shrink: 0;
    }
    @media (max-width: 575px) { .sf-avatar { width: 58px; height: 58px; margin-top: -42px; } }
    .sf-info-main { flex: 1 1 260px; min-width: 0; }
    .sf-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
    .sf-name { font-family: var(--disp); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 400; color: var(--tx); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
    .sf-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
    .sf-meta-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 500; color: var(--tx3); }
    .sf-meta-pill a { color: inherit; text-decoration: none; }
    .sf-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); }
    .sf-badge.open { background: #e6f9f0; color: #157347; border: 1px solid #c2e8d5; }
    .sf-badge.closed { background: var(--red-lt); color: #b02a37; border: 1px solid var(--red-mid); }

    .sf-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; position: relative; }
    @media (max-width: 575px) {
      .sf-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
      .sf-actions::-webkit-scrollbar { display: none; }
      .sf-btn-action { flex-shrink: 0; }
    }
    .sf-btn-action {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--surf); border: 1.5px solid var(--brd-md); border-radius: var(--r-pill);
      padding: 7px 15px; font-size: 0.78rem; font-weight: 600; color: var(--tx2);
      cursor: pointer; white-space: nowrap; transition: border-color 0.16s, color 0.16s, box-shadow 0.16s;
    }
    .sf-btn-action:hover { border-color: var(--red); color: var(--red); box-shadow: var(--sh-xs); }
    .wp-action-panel {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
      background: var(--surf); border: 1px solid var(--brd); border-radius: var(--r-lg);
      box-shadow: var(--sh-md); padding: 14px; width: 260px; font-size: 0.82rem;
    }
    .wp-hora-row { display: flex; justify-content: space-between; padding: 3px 0; }
    .wp-hora-row.hoy { font-weight: 700; color: var(--red); }

    .sf-searchbar { background: var(--surf); border-bottom: 1px solid var(--brd); padding: 12px 0; }
    .sf-search-wrap { position: relative; max-width: 640px; margin: 0 auto; }
    .sf-search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; color: var(--tx3); pointer-events: none; }
    .sf-search-input {
      width: 100%; border: 1.5px solid var(--brd-md); border-radius: var(--r-pill);
      padding: 10px 18px 10px 42px; font-size: 0.9rem; color: var(--tx); background: var(--bg); outline: none;
      transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
    }
    .sf-search-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232, 54, 78, 0.1); background: var(--surf); }

    .sf-catbar { background: var(--surf); border-bottom: 1px solid var(--brd); padding: 12px 0; }
    .sf-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .sf-cats::-webkit-scrollbar { display: none; }
    .sf-chip {
      display: inline-flex; align-items: center; gap: 5px; background: var(--surf);
      border: 1.5px solid var(--brd); border-radius: var(--r-pill); padding: 6px 14px;
      font-size: 0.76rem; font-weight: 600; color: var(--tx2); cursor: pointer; white-space: nowrap; transition: all 0.14s;
    }
    .sf-chip:hover { border-color: var(--tx3); }
    .sf-chip.active { background: var(--tx); border-color: var(--tx); color: #fff; font-weight: 700; }
    .sf-subcats { margin-top: 8px; }
    .sf-subcats .sf-chip { padding: 4px 12px; font-size: 0.7rem; font-weight: 500; }

    .sf-cart-badge { background: var(--red); color: #fff; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; padding: 1px 6px; line-height: 1.4; }

    /* — Modal carrito/historial: mismas clases que #modalCarrito de
       tienda.html (crt-line*, sf-qty-*, sf-btn-maps) — reutilizado tal
       cual, solo cambia qué datos rellenan las líneas. */
    .crt-step { display: none; }
    .crt-step.on { display: block; }
    .crt-line { padding: 10px 0; }
    .crt-line:not(:last-child) { border-bottom: 1px solid var(--brd); }
    .crt-line-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--bg); border: 1px solid var(--brd); flex-shrink: 0; }
    .crt-line-name { font-weight: 600; font-size: 0.85rem; color: var(--tx); }
    .crt-line-price { font-size: 0.78rem; color: var(--tx3); margin-top: 2px; }
    .sf-qty-stepper { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--brd-md); border-radius: var(--r-pill); padding: 3px 6px; flex-shrink: 0; }
    .sf-qty-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--bg); color: var(--tx); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
    .sf-qty-btn:hover { background: var(--red-lt); color: var(--red); }
    .sf-btn-maps {
      display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1;
      background: var(--tx); color: #fff; border: none; border-radius: var(--r-pill);
      padding: 13px 20px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.18s;
    }
    .sf-btn-maps:hover { background: var(--red); color: #fff; }
    .sf-btn-maps:disabled { opacity: 0.5; cursor: default; }
    .wp-history-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--brd); }
    .wp-history-line:last-child { border-bottom: 0; }

    .sf-tile {
      background: var(--surf);
      border: 1px solid var(--brd);
      border-radius: var(--r-xl);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .sf-tile-img {
      position: relative;
      aspect-ratio: 1;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .sf-tile-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
    .sf-tile-body { padding: 11px 13px 13px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
    .sf-tile-name {
      font-size: 0.83rem;
      font-weight: 600;
      color: var(--tx);
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex: 1;
    }
    .sf-tile-price { font-family: var(--disp); font-size: 1.05rem; color: var(--tx); letter-spacing: -0.02em; }
    .sf-tile-price.muted { font-family: inherit; font-size: 0.78rem; color: var(--tx3); }

    /* Paso de cantidad — [-] [n] [+], mismo lenguaje visual que el resto
       de la tarjeta (bordes suaves, píldora). El número del medio es un
       <input type="number"> editable (no un <span>): en mayorista se piden
       cantidades grandes (cajas, packs) y tener que tocar "+" una a una es
       poco práctico — se puede teclear directamente. */
    .wp-qty-stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid var(--brd);
      border-radius: var(--r-pill);
      overflow: hidden;
      margin-top: 4px;
    }
    .wp-qty-stepper button {
      width: 30px;
      height: 30px;
      border: 0;
      background: var(--bg);
      color: var(--tx);
      font-weight: 700;
      line-height: 1;
    }
    .wp-qty-stepper button:active { background: var(--brd); }
    .wp-qty-stepper button { flex-shrink: 0; }
    .wp-qty-stepper .wp-qty-value {
      flex: 1;
      /* min-width:0 es necesario porque un <input> tiene un ancho mínimo de
         contenido propio (el de su UA stylesheet) que flexbox respeta por
         defecto salvo que se le diga lo contrario - sin esto, el input no
         encoge lo suficiente y empuja el botón "+" fuera de la píldora
         (se veía recortado por el overflow:hidden del contenedor). */
      min-width: 0;
      width: 0;
      text-align: center;
      font-size: 0.85rem;
      font-weight: 600;
    }
    .wp-qty-stepper.has-qty { border-color: var(--red); }

    input.wp-qty-value,
    input.sf-qty-value {
      border: none;
      background: transparent;
      padding: 0;
      color: inherit;
      font: inherit;
      -moz-appearance: textfield;
    }
    input.wp-qty-value::-webkit-outer-spin-button,
    input.wp-qty-value::-webkit-inner-spin-button,
    input.sf-qty-value::-webkit-outer-spin-button,
    input.sf-qty-value::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input.wp-qty-value:focus,
    input.sf-qty-value:focus { outline: none; }
    input.sf-qty-value { width: 34px; min-width: 18px; text-align: center; font-weight: 600; font-size: 0.85rem; }

    /* Selector de tiendas del comercial: meta (último pedido) + aviso de
       carrito pendiente sin enviar (ver localStorage en mayorista-pedido.js). */
    .wp-pick-client-meta { font-size: 0.76rem; color: var(--tx3); margin-top: 2px; }
    .wp-pending-badge {
      display: inline-block;
      background: var(--red-lt);
      color: var(--red);
      border: 1px solid var(--red-mid);
      border-radius: var(--r-pill);
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 9px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .wp-chip {
      border: 1px solid var(--brd);
      border-radius: var(--r-pill);
      background: var(--surf);
      font-size: 0.78rem;
      padding: 5px 12px;
      color: var(--tx3);
    }
    .wp-chip.active { border-color: var(--red); color: var(--red); background: #fde8e4; }

    .sf-btn-more {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--surf); border: 1.5px solid var(--brd-md); border-radius: var(--r-pill);
      padding: 11px 26px; font-size: 0.88rem; font-weight: 600; color: var(--tx2);
      cursor: pointer; transition: border-color 0.16s, color 0.16s, box-shadow 0.16s;
    }
    .sf-btn-more:hover { border-color: var(--tx); color: var(--tx); box-shadow: var(--sh-md); }
    .sf-btn-more:disabled { opacity: 0.6; cursor: default; }

    /* Paginación del selector de tiendas del comercial — misma lógica que
       js/pagination.js (compartida con el resto del panel), pero con las
       clases .pag-* reestilizadas aquí con los tokens propios de esta
       página en vez de las custom properties de css/panel.css (que esta
       página deliberadamente no carga). */
    .pag-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 2px; }
    .pag-info { font-size: 0.76rem; color: var(--tx3); }
    .pag-controls { display: flex; align-items: center; gap: 4px; }
    .pag-btn {
      height: 30px; min-width: 30px; padding: 0 10px;
      border-radius: var(--r-pill); border: 1.5px solid var(--brd-md);
      background: var(--surf); color: var(--tx2); font-size: 0.8rem; font-weight: 600;
      cursor: pointer; transition: border-color 0.16s, color 0.16s;
    }
    .pag-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
    .pag-btn.active { background: var(--tx); border-color: var(--tx); color: #fff; }
    .pag-btn:disabled { opacity: 0.35; cursor: default; }
    .pag-dots { padding: 0 4px; color: var(--tx3); font-size: 0.76rem; }