/* Urban Flora 2.0 · Pedido (área pedido). Carga después de secciones.css */

.pd [hidden], .pd-hoy [hidden] { display: none !important; }
body[data-page="pedido"] .toast { display: none !important; }

/* ---------- Retícula: formulario o confirmación a la izquierda, etiqueta a la derecha ---------- */
.pd > .ped-form, .pd > .confirma { grid-column: 1; min-width: 0; }
@media (min-width: 1000px) {
  .pd > .etiqueta { grid-column: 2; grid-row: 1 / span 2; }
}

/* Pasos (los hechos se pueden pulsar) */
.pasos li .pd-paso-b { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 6px; }
.pasos li .pd-paso-b:focus-visible { outline: 2.5px solid var(--aciano); outline-offset: 3px; }
.pasos li .pd-paso-b span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; background: var(--tinta); color: var(--papel); }
.pasos li .pd-paso-b:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Paso 1: grupos por tipo ---------- */
.pd-grupos { display: grid; gap: 18px; min-width: 0; }
.pd-grupo { display: grid; gap: 8px; min-width: 0; }
.pd-grupo-t { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-mono); font-size: var(--t-tag); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; font-stretch: 100%; }
.pd-cod { display: inline-flex; align-items: center; padding: .2em .6em .2em .9em; border-radius: 3px 999px 999px 3px; background: var(--blanco); box-shadow: 0 0 0 1.5px var(--tinta) inset, inset 4px 0 0 var(--c, var(--kraft)); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em; color: var(--tinta); }
.pd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.pd-it { grid-template-columns: auto minmax(0, 1fr) auto auto; background: var(--blanco); box-shadow: 0 0 0 1px var(--zinc-2) inset; }
.pd-it-talleres, .pd-it-fija, .pd-it-fuera { grid-template-columns: minmax(0, 1fr) auto auto; }
.pd-it .ped-item-t small { color: var(--tinta-2); }
.pd-it .precio { font-family: var(--f-mono); font-size: .85rem; white-space: nowrap; font-weight: 600; }
.pd-espera { color: var(--tinta-2); font-weight: 500 !important; }
.pd-th { width: 56px; height: 56px; margin: 0; border-radius: 8px; overflow: hidden; flex: none; }
.pd-it-fuera { background: var(--zinc); box-shadow: 0 0 0 1.5px dashed var(--tinta-3) inset; }
.pd-fuera-l, .pd-fija-l { display: block; margin-top: 6px; font-size: .85rem !important; line-height: 1.45; color: var(--tinta) !important; }
.pd-fuera-l .lnk { font-weight: 700; white-space: nowrap; }
.pd-plazas { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pd-plazas button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--zinc); box-shadow: 0 0 0 1.5px var(--tinta) inset; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--tinta); display: grid; place-items: center; }
.pd-plazas button:disabled { opacity: .35; cursor: not-allowed; }
.pd-plazas output { min-width: 5.5em; text-align: center; font-weight: 700; font-size: .92rem; }
.pd-plazas small { font-family: var(--f-mono); font-size: .68rem; color: var(--tinta-2); }

/* Añadir flores */
.pd-add { border-radius: 12px; }
.pd-add > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0 12px; }
.pd-add > summary::-webkit-details-marker { display: none; }
.pd-add > summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--papel); font-size: .9rem; transition: transform .3s var(--ease); }
.pd-add[open] > summary::before { transform: rotate(45deg); }
.pd-add > summary:focus-visible { outline: 2.5px solid var(--aciano); outline-offset: 3px; }
.pd .ped-add-b { background: var(--blanco); box-shadow: 0 0 0 1.5px var(--tinta) inset; }
.pd-autor { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; width: 100%; align-items: center; }
.pd-mini-fig { width: 76px; height: 76px; margin: 0; border-radius: 10px; overflow: hidden; }
.pd-autor .campo-col { gap: 8px; }
.pd-autor .sel { width: 100%; background-color: var(--blanco); text-overflow: ellipsis; }
.pd-escalera { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.pd-esc { appearance: none; border: 0; cursor: pointer; text-align: left; display: grid; gap: 2px; padding: 12px 10px 10px; border-radius: 4px 12px 12px 4px; background: var(--zinc); box-shadow: 0 0 0 1.5px var(--tinta) inset; color: var(--tinta); min-width: 0; transition: background .2s, color .2s; }
.pd-esc b { font-family: var(--f-disp); font-size: 1.6rem; font-stretch: 72%; font-weight: 800; line-height: 1; }
.pd-esc small { font-family: var(--f-mono); font-size: .68rem; line-height: 1.35; }
.pd-esc:hover { background: var(--zinc-2); }
.pd-esc.is-on, .pd-esc[aria-checked="true"] { background: var(--tinta); color: var(--claro); }
.ped-mini { font-size: .72rem; color: var(--tinta-2); font-family: var(--f-mono); line-height: 1.5; }

.pd-bloque { display: grid; gap: 12px; min-width: 0; }
.pd-sub { font-size: .95rem; color: var(--tinta-2); margin: 0; }

/* Complementos */
.pd-comp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-cp { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--blanco); box-shadow: 0 0 0 1px var(--zinc-2) inset; min-width: 0; }
.pd-cp-t { display: grid; gap: 2px; min-width: 0; }
.pd-cp-t small { color: var(--tinta-2); font-size: .85rem; }
.pd-cp-chips { justify-content: flex-end; }
.pd-cp .chip { font-size: .85rem; white-space: nowrap; }
.pd-cp .chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.pd-sug { width: 7px !important; height: 7px !important; background: var(--mimosa) !important; box-shadow: 0 0 0 1px var(--tinta) !important; }
.pd-cp-ico { width: 44px; height: 44px; border-radius: 8px; background: var(--zinc); position: relative; }
.pd-cp-jarron::before { content: ""; position: absolute; left: 14px; right: 14px; top: 9px; bottom: 7px; border: 2px solid var(--tinta); border-radius: 3px 3px 9px 9px; background: linear-gradient(transparent 45%, rgba(47,75,255,.18) 45%); }
.pd-cp-vela::before { content: ""; position: absolute; left: 13px; right: 13px; top: 18px; bottom: 7px; border: 2px solid var(--tinta); border-radius: 3px; background: var(--blanco); }
.pd-cp-vela::after { content: ""; position: absolute; left: 50%; top: 7px; width: 7px; height: 10px; margin-left: -3.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--mimosa); box-shadow: 0 0 0 1.5px var(--tinta); }
.pd-cp-tarj::before { content: ""; position: absolute; left: 9px; right: 9px; top: 11px; bottom: 11px; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 2px; transform: rotate(-6deg); }
@media (max-width: 699px) {
  .pd-cp { grid-template-columns: 44px minmax(0, 1fr); }
  .pd-cp > .chip, .pd-cp > .chips { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
  .pd-it { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pd-it .ped-quitar { grid-column: 2 / -1; justify-self: start; padding: 0; }
  .pd-it-talleres, .pd-it-fija, .pd-it-fuera { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-it-talleres .ped-quitar, .pd-it-fija .ped-quitar, .pd-it-fuera .ped-quitar { grid-column: 1 / -1; }
  .pd-esc b { font-size: 1.35rem; }
}
.ped-quitar { color: var(--tinta-2); padding: 6px 2px; }
.ped-vacio { background: var(--blanco); }
.pd-salir { font-size: .75rem; color: var(--tinta-2); line-height: 1.6; margin: 0; }
.pd-salir .lnk { color: var(--tinta); font-weight: 600; }

/* Tarjeta grande */
.tarj-vista.is-grande { aspect-ratio: 4 / 3; }
.tarj-vista.is-grande .tarj-msg { font-size: 1.05rem; }

/* ---------- Entrega ---------- */
.pd-recoge { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--blanco); box-shadow: 0 0 0 1px var(--zinc-2) inset; line-height: 1.5; }
.pd-fija { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 10px; background: var(--blanco); box-shadow: inset 4px 0 0 var(--mimosa), 0 0 0 1px var(--zinc-2) inset; --c: var(--mimosa); }
.pd-fija p { margin: 0; line-height: 1.5; }
.cp-res { font-size: .75rem; }

/* ---------- Pago ---------- */
.pd-pago { display: grid; gap: 14px; padding: 18px; border-radius: 12px; background: var(--blanco); box-shadow: 0 0 0 1.5px var(--tinta) inset; min-width: 0; }
.pd-pago-opc { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pd-po { appearance: none; border: 0; cursor: pointer; text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 4px 12px 12px 4px; background: var(--zinc); color: var(--tinta); box-shadow: 0 0 0 1.5px transparent inset; }
.pd-po b { font-weight: 700; }
.pd-po small { font-family: var(--f-mono); font-size: .68rem; }
.pd-po:hover { box-shadow: 0 0 0 1.5px var(--tinta) inset; }
.pd-po.is-on { background: var(--tinta); color: var(--claro); }
.pd-pago-in { display: grid; gap: 14px; min-width: 0; }
.pd-pago .inp { background: var(--zinc); }
.mono-in { font-family: var(--f-mono); letter-spacing: .04em; }
.pd-fija-cobro { margin: 0; font-size: .9rem; line-height: 1.5; padding: 10px 12px; border-radius: 8px; background: #FFF6D6; box-shadow: inset 3px 0 0 var(--mimosa); }
.pd-legal { display: grid; gap: 6px; font-size: .85rem; color: var(--tinta-2); line-height: 1.5; max-width: 60ch; justify-self: end; text-align: right; }
.pd-legal p { margin: 0; }
.pd-maqueta { font-size: .68rem; color: var(--tinta-2); }
@media (max-width: 699px) { .pd-legal { justify-self: start; text-align: left; } }
.ped-nav { flex-wrap: wrap; }

/* ---------- Errores ---------- */
.pd .err:not([hidden]) { display: block; padding: 10px 12px; border-radius: 8px; background: #FFF0EE; box-shadow: inset 3px 0 0 var(--ko); color: #8E1426; font-weight: 600; font-size: .9rem; }

/* ---------- Exprés «Para hoy» ---------- */
.pd-hoy { gap: 24px; }
.pd-reloj { display: grid; gap: 6px; padding: 18px 20px; border-radius: 12px; background: var(--dalia); color: var(--claro); }
.pd-reloj .tag { color: var(--mimosa); }
.pd-cuenta { font-family: var(--f-mono); font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pd-cuenta i { font-style: normal; opacity: .55; }
.pd-reloj-t { font-family: var(--f-disp); font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-stretch: 72%; font-weight: 800; line-height: 1; }
.pd-reloj > span:last-child { font-size: .95rem; line-height: 1.5; color: var(--claro); }
.pd-opc { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pd-op { appearance: none; border: 0; cursor: pointer; text-align: left; display: grid; gap: 4px; padding: 16px 18px; border-radius: 4px 14px 14px 4px; background: var(--blanco); color: var(--tinta); box-shadow: 0 0 0 1.5px var(--tinta) inset; }
.pd-op b { font-family: var(--f-disp); font-size: 1.35rem; font-stretch: 75%; font-weight: 800; line-height: 1.05; }
.pd-op small { font-size: .85rem; }
.pd-op.is-on { background: var(--tinta); color: var(--claro); box-shadow: inset 6px 0 0 var(--mimosa); }

/* Foco visible en todo lo pulsable propio */
.pd-esc:focus-visible, .pd-op:focus-visible, .pd-po:focus-visible, .pd-plazas button:focus-visible, .ped-quitar:focus-visible, .ped-tel:focus-visible { outline: 2.5px solid var(--aciano); outline-offset: 3px; }

/* ---------- Etiqueta-resumen ---------- */
.pd-etq { gap: 14px; }
.pd-etq-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; }
.pd-etq-cab .tag { min-width: 0; overflow-wrap: anywhere; }
.pd-sello { flex: none; width: 58px; height: 58px; margin-top: -8px; border-radius: 50%; border: 2px solid rgba(140,24,36,.6); color: rgba(120,20,32,.85); font-family: var(--f-mono); font-size: .5rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; display: grid; place-items: center; text-align: center; transform: rotate(-12deg); }
.pd-etq-grupos { display: grid; gap: 12px; min-width: 0; }
.pd-eg { display: grid; gap: 6px; min-width: 0; }
.pd-eg-t { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #3A2816; }
.pd-eg-t span { padding: 1px 6px; border-radius: 3px; background: rgba(251,252,250,.55); color: var(--tinta); }
.pd-eg.is-fuera li { font-weight: 500; opacity: .8; }
.pd-etq .etq-items li { font-size: .92rem; }
.pd-etq .etq-pie { padding-right: 0; }
.pd-tot { display: grid; gap: 4px; border-top: 2px solid var(--tinta); padding-top: 12px; }
.pd-tot-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pd-tot-l .tag { color: #3A2816; }
.pd-tot-n { font-family: var(--f-disp); font-size: 2.6rem; font-weight: 800; font-stretch: 75%; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.pd-tot-l.is-sec .pd-tot-n { font-size: 1.6rem; }
.pd-tot-s { margin: 0; font-size: .68rem; color: #3A2816; text-align: right; }
.pd-etq.is-final .etiqueta-ojal { background: var(--mimosa); }

/* ---------- Confirmación ---------- */
.pd-conf { background: var(--blanco); box-shadow: 0 0 0 1.5px var(--tinta) inset; }
.pd-conf .h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.pd-conf .lead { max-width: 56ch; }
.pd-conf-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-aviso { display: grid; gap: 14px; width: 100%; padding: 18px; border-radius: 12px; background: var(--zinc); min-width: 0; }
.pd-aviso-t { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.pd-aviso-g { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pd-aviso .sel, .pd-aviso .inp { width: 100%; background-color: var(--blanco); }
.pd-aviso .btn { justify-self: start; }
.pd-aviso-ok { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--tinta); }
.pd-aviso-ok:empty { display: none; }
.confirma-nota { color: var(--tinta-2); font-size: .68rem; }

/* ---------- Contacto pulsable ---------- */
.ped-contacto a.ped-tel { display: inline-block; color: var(--tinta); text-decoration: none; border-bottom: 2px solid var(--tinta); line-height: 1.1; margin-top: 4px; }
.ped-contacto a.ped-tel:hover { border-bottom-color: var(--coral); }

/* ---------- Barra fija del total en móvil: deja libre la esquina inferior derecha (84 px) ---------- */
@media (max-width: 999px) {
  .pd-barra { right: calc(84px + env(safe-area-inset-right, 0px)); max-width: calc(100vw - 84px - 12px); box-sizing: border-box; min-width: 0; }
  .pd-barra b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pd-barra span:last-child { white-space: nowrap; }
  .pd-barra .mono { white-space: nowrap; }
}
@media (max-width: 420px) {
  .pd-barra { gap: 8px; padding: 10px 12px; }
  .pd-barra .mono { display: none; }
  .pd-escalera { gap: 6px; }
  .pd-esc { padding: 10px 8px 8px; }
}

/* mínimo 11 px */
.pd-sello { font-size: 11px !important; width: 70px !important; height: 70px !important; }
.ped small, main small { font-size: max(11px, .8em); }