/* Café Indera · Tienda: cajón del pedido en 3 pasos (pedido.js) */
.pd { --pd-tinta: #151100; --pd-suave: #8A8177; --pd-linea: #EAE4D9; --pd-papel: #FAF6EC; --pd-verde: #123B1D; --pd-oro: #C29A45; --pd-error: #9A4E32;
  font-family: inherit; }
.pd [hidden] { display: none !important; }
.pd-cab { padding: 22px 24px 14px; display: flex; justify-content: space-between; align-items: flex-start; }
.pd-cab h3 { font-size: 1.6rem; margin: 2px 0 0; color: var(--pd-tinta); }
.pd-ante { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-suave); margin: 0; }
.pd-ante b { color: var(--pd-tinta); }
.pd-cerrar { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--pd-suave); cursor: pointer; padding: 4px 8px; border-radius: 10px; }
.pd-cerrar:hover { background: rgba(21,17,0,.06); color: var(--pd-tinta); }

.pd-pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0 24px 16px; border-bottom: 1px solid var(--pd-linea); }
.pd-pasos li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--pd-suave); padding-top: 10px; border-top: 2px solid var(--pd-linea); line-height: 1.2; }
.pd-pasos b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font: 600 11px var(--font-mono, monospace); }
.pd-pasos li.activo { color: var(--pd-tinta); border-top-color: var(--pd-tinta); font-weight: 600; }
.pd-pasos li.activo b { background: var(--pd-tinta); color: #F5F2EC; border-color: var(--pd-tinta); }
.pd-pasos li.hecho { color: var(--pd-verde); border-top-color: var(--pd-verde); }

.pd-vista { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pd-lista, .pd-cuerpo { flex: 1; overflow-y: auto; padding: 0 24px; overscroll-behavior: contain; }
.pd-cuerpo { padding-top: 18px; padding-bottom: 18px; display: grid; gap: 18px; align-content: start; }
.pd-pie { padding: 18px 24px 22px; border-top: 1px solid var(--pd-linea); background: var(--pd-papel); display: grid; gap: 6px; }
.pd-fila { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--pd-tinta); }
.pd-fila span:last-child { font-family: var(--font-mono, monospace); font-weight: 600; }
.pd-fila--suave { color: var(--pd-suave); font-size: .82rem; }
.pd-fila--suave span:last-child { font-weight: 400; }
.pd-fila--total { font-size: 1.1rem; font-weight: 700; padding-top: 8px; margin: 4px 0 10px; border-top: 1px solid rgba(21,17,0,.1); }

.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border-radius: 999px; border: 0; background: var(--pd-tinta); color: #F5F2EC;
  font-family: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.pd-btn:hover:not(:disabled) { background: #2A2410; transform: translateY(-1px); }
.pd-btn:disabled { opacity: .35; cursor: not-allowed; }
.pd-btn--wa { background: var(--pd-verde); }
.pd-btn--wa:hover:not(:disabled) { background: #0C2A14; }
.pd-btn--linea { background: transparent; color: var(--pd-tinta); box-shadow: inset 0 0 0 1.5px var(--pd-tinta); }
.pd-btn--linea:hover:not(:disabled) { background: rgba(21,17,0,.05); }
.pd-volver { background: none; border: 0; color: var(--pd-suave); font: inherit; font-size: .88rem; cursor: pointer; padding: 6px; }
.pd-volver:hover { color: var(--pd-tinta); }
.pd-nota { margin: 2px 0 0; text-align: center; font-size: 11.5px; color: var(--pd-suave); }

/* molienda dentro de cada producto de la bolsa */
.bolsa-molienda { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-suave, #8A8177); }
.bolsa-molienda select { flex: 1; min-width: 0; height: 30px; border-radius: 8px; border: 1px solid #E2DACB; background: #fff; color: #151100; font-family: inherit; font-weight: 500; font-size: 12.5px;
  text-transform: none; letter-spacing: 0; padding: 0 6px; cursor: pointer; }

/* formulario */
.pd-campo { display: grid; gap: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-suave); font-weight: 600; }
.pd-campo input, .pd-campo select, .pd-campo textarea { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--pd-linea); background: #fff;
  color: var(--pd-tinta); font-family: inherit; font-weight: 400; font-size: 16px; letter-spacing: 0; text-transform: none; }
.pd-campo textarea { height: auto; padding: 10px 14px; resize: vertical; line-height: 1.4; }
.pd-campo input:focus, .pd-campo select:focus, .pd-campo textarea:focus { outline: none; border-color: var(--pd-tinta); box-shadow: 0 0 0 3px rgba(21,17,0,.08); }
.pd-campo [aria-invalid="true"] { border-color: var(--pd-error); box-shadow: 0 0 0 3px rgba(154,78,50,.14); }
.pd-grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-grupo legend { padding: 0; margin-bottom: 8px; font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; color: var(--pd-tinta); }
.pd-op { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--pd-linea); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.pd-op:hover { border-color: #CFC4AF; }
.pd-op input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0; border-radius: 50%; border: 1.5px solid #B9AE99; background: #fff; display: grid; place-items: center; cursor: pointer; }
.pd-op input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pd-tinta); transform: scale(0); transition: transform .15s; }
.pd-op input:checked { border-color: var(--pd-tinta); }
.pd-op input:checked::after { transform: scale(1); }
.pd-op input:focus-visible { outline: 2px solid var(--pd-oro); outline-offset: 2px; }
.pd-op:has(input:checked) { border-color: var(--pd-tinta); background: var(--pd-papel); }
.pd-op span { display: grid; gap: 2px; }
.pd-op b { font-weight: 600; font-size: .95rem; color: var(--pd-tinta); }
.pd-op small { font-size: .8rem; color: var(--pd-suave); }
.pd-op--linea { padding: 10px 14px; }
.pd-sub { display: grid; gap: 10px; padding: 4px 0 0 14px; border-left: 2px solid var(--pd-linea); margin-left: 8px; }
.pd-aviso { margin: 0; padding: 10px 12px; border-radius: 10px; background: #F7E9DF; color: var(--pd-error); font-size: .85rem; }

/* paso 3 */
.pd-ok { text-align: center; padding: 8px 4px 18px; border-bottom: 1px dashed var(--pd-linea); }
.pd-ok-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--pd-verde); color: #F5F2EC; font-size: 22px; margin-bottom: 10px; }
.pd-ok h4, .pd-pago h4 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin: 6px 0; color: var(--pd-tinta); }
.pd-pago h4 small { font-family: inherit; font-size: .9rem; color: var(--pd-suave); }
.pd-ok p, .pd-pago p { margin: 0; font-size: .9rem; line-height: 1.5; color: #4A4436; }
.pd-ok a { color: var(--pd-verde); font-weight: 600; }
.pd-pago { display: grid; gap: 12px; }
.pd-cuenta { display: grid; gap: 0; border: 1px solid var(--pd-linea); border-radius: 14px; background: #fff; overflow: hidden; }
.pd-dato { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--pd-linea); }
.pd-dato:last-child { border-bottom: 0; }
.pd-dato span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-suave); }
.pd-dato b { font-family: var(--font-mono, monospace); font-size: .92rem; color: var(--pd-tinta); word-break: break-all; }
.pd-copiar { border: 1px solid var(--pd-linea); background: var(--pd-papel); border-radius: 999px; padding: 5px 10px; font-family: inherit; font-weight: 600; font-size: 11px; cursor: pointer; color: var(--pd-tinta); }
.pd-pendiente { padding: 10px 12px; border-radius: 10px; background: #FFF7E6; border: 1px dashed #D9B66A; font-size: .85rem !important; }
.pd-guia { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .88rem; line-height: 1.45; color: #4A4436; }

@media (max-width: 520px) {
  .pd-cab, .pd-pasos, .pd-lista, .pd-cuerpo, .pd-pie { padding-left: 18px; padding-right: 18px; }
  .pd-pasos li { font-size: 11px; }
}
.pd-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-campo i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: #A79F92; }
.pd-campo i[hidden] { display: none; }
.pd-ayuda { margin: -2px 0 0; font-size: .8rem; color: var(--pd-suave); }
@media (max-width: 380px) { .pd-dos { grid-template-columns: 1fr; } }
.pd-sub-tit { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-suave); font-weight: 600; }
#pd-medios { display: grid; gap: 8px; }
.pd-op--medio { align-items: center; }
.pd-op--medio span { flex: 1; }
.pd-op--medio em { font-style: normal; font-family: var(--font-mono, monospace); font-weight: 600; font-size: .95rem; color: var(--pd-tinta); }

/* ---------- celular: pie compacto y teclado abierto ---------- */
.pd-nota--cuerpo { text-align: left; margin-top: -6px; }
.cart-drawer.pd { height: 100vh; height: 100dvh; max-height: none; }
@media (max-width: 600px) {
  .pd-cab { padding-top: 16px; padding-bottom: 10px; }
  .pd-cab h3 { font-size: 1.35rem; }
  .pd-pasos { padding-bottom: 10px; }
  .pd-pie { padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); gap: 2px; box-shadow: 0 -10px 24px -18px rgba(21,17,0,.35); }
  .pd-pie .pd-fila--suave { font-size: .76rem; }
  .pd-pie .pd-fila--total { font-size: 1rem; padding-top: 4px; margin: 2px 0 8px; }
  .pd-btn { height: 48px; font-size: .95rem; }
  .pd-volver { padding: 4px; font-size: .82rem; }
  .pd-cuerpo { padding-bottom: 28px; }
}
/* con el teclado abierto se esconden el pie y los pasos: queda todo el espacio para escribir */
.pd.pd-teclado .pd-pie, .pd.pd-teclado .pd-pasos { display: none; }
.pd.pd-teclado .pd-cab { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--pd-linea); }
.pd.pd-teclado .pd-cab .pd-ante { display: none; }
.pd.pd-teclado .pd-cab h3 { font-size: 1.15rem; }

/* ---------- Percha de la tienda en celular: dos columnas, tarjetas compactas ---------- */
@media (max-width: 560px) {
  #seccion-percha .section-inner { padding: 0 14px !important; }
  .percha-unified-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .coffee-product-card { padding: 10px !important; border-radius: 18px !important; }
  .coffee-product-card > div:first-child > div:first-child { font-size: 8.5px !important; letter-spacing: .06em !important; margin-bottom: 8px !important; gap: 4px; }
  .coffee-product-card > div:first-child > div:first-child span:first-child { padding: 1px 7px !important; flex: none; white-space: nowrap; }
  .coffee-product-card > div:first-child > div:first-child span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .coffee-card-empaque { margin: 0 0 10px; border-radius: 12px; padding: 6px; }
  .coffee-product-card h3 { font-size: 1.05rem !important; margin-bottom: 4px !important; line-height: 1.15 !important; }
  .coffee-product-card h3 + p { font-size: 10px !important; line-height: 1.35 !important; margin-bottom: 8px !important; white-space: normal !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .coffee-product-card > div:last-child { flex-direction: column; align-items: stretch !important; gap: 8px; padding-top: 8px !important; }
  .coffee-product-card > div:last-child > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .coffee-product-card > div:last-child > div span:first-child { font-size: 9px !important; }
  .coffee-product-card > div:last-child > div span:last-child { font-size: 1.15rem !important; }
  .coffee-product-card .btn-coffee-add { width: 100%; min-height: 36px !important; padding: 0 8px !important; font-size: 10px !important; }
}