/* Daruma guía: globo de cómic flotante y ventana de pasos para pedir en línea. */
.dg { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; transition: bottom .25s ease; }
.dg > * { pointer-events: auto; }

.dg-boton { width: 64px; height: 64px; padding: 0; border: 0; background: transparent; cursor: pointer; transform-origin: 50% 90%; animation: dg-balanceo 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.dg-boton img { display: block; width: 64px; height: 64px; image-rendering: pixelated; }
.dg-boton:focus-visible { outline: 3px solid var(--brand-yellow, #F9E024); outline-offset: 4px; border-radius: 50%; }

/* Globo de cómic: borde grueso, sombra sólida y colita hacia el Daruma. */
.dg-globo { position: relative; max-width: min(260px, calc(100vw - 32px)); padding: 12px 34px 12px 16px; border: 3px solid #111; border-radius: 20px; background: #fff; color: #111; box-shadow: 4px 4px 0 #111; font-weight: 900; line-height: 1.25; }
.dg-globo[hidden] { display: none; }
.dg .dg-globo::after { content: ""; position: absolute; right: 22px; bottom: -17px; width: 22px; height: 18px; background: #fff; border-right: 3px solid #111; border-bottom: 3px solid #111; transform: skewX(-35deg); border-bottom-right-radius: 4px; }
.dg-texto { margin: 0; font-size: 1.02rem; }
.dg-cerrar { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; border: 0; background: transparent; color: #111; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dg-accion { display: inline-block; margin-top: 8px; padding: 7px 14px; border: 2px solid #111; border-radius: 999px; background: var(--brand-red, #E62026); color: #fff; font-weight: 900; font-size: .9rem; cursor: pointer; box-shadow: 2px 2px 0 #111; }
.dg-accion[hidden] { display: none; }
.dg-pop { animation: dg-pop .35s cubic-bezier(.2, 1.6, .4, 1); }

@keyframes dg-balanceo { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(6deg); } 55% { transform: rotate(0); } }
@keyframes dg-pop { from { transform: scale(.6) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Ventana de pasos */
.dg-dialogo { width: min(460px, calc(100% - 24px)); max-height: 88vh; margin: auto; padding: 0; border: 3px solid #111; border-radius: 22px; background: var(--paper-card, #FAF4EE); color: #1b1b1b; box-shadow: 6px 6px 0 #111; }
.dg-dialogo[open] { display: flex; flex-direction: column; }
.dg-dialogo::backdrop { background: rgba(0, 0, 0, .6); }
.dg-dialogo-cabeza { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 48px 10px 16px; }
.dg-dialogo-cabeza img { flex: none; width: 56px; height: 56px; image-rendering: pixelated; }
.dg-globo-fijo { margin: 0; padding: 10px 14px; max-width: none; flex: 1; font-size: 1.05rem; }
.dg-globo-fijo::before { content: ""; position: absolute; left: -14px; top: 50%; width: 16px; height: 16px; margin-top: -9px; background: #fff; border-left: 3px solid #111; border-bottom: 3px solid #111; transform: rotate(45deg) skew(10deg, 10deg); }
.dg-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #111; font-size: 1.6rem; cursor: pointer; }
.dg-paso { display: grid; gap: 12px; padding: 8px 16px 18px; overflow: auto; min-height: 0; }
.dg-paso[hidden] { display: none; }
.dg-buscar, .dg-campo input { width: 100%; min-height: 46px; padding: 10px 14px; border: 2px solid #111; border-radius: 14px; background: #fff; color: #111; font: inherit; }
.dg-sucursales { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 48vh; overflow: auto; }
.dg-sucursal { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border: 2px solid rgba(0, 0, 0, .15); border-radius: 14px; background: #fff; color: #111; text-align: left; font: inherit; cursor: pointer; }
.dg-sucursal:hover, .dg-sucursal:focus-visible { border-color: var(--brand-red, #E62026); }
.dg-sucursal small { color: #6b5f54; }
.dg-nota { margin: 0; color: #6b5f54; }
.dg-nota[hidden] { display: none; }
.dg-seguir, .dg-listo { min-height: 50px; padding: 12px 16px; border: 2px solid #111; border-radius: 999px; background: var(--brand-red, #E62026); color: #fff; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 #111; }
.dg-seguir[hidden] { display: none; }
.dg-entregas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-entrega { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border: 3px solid #111; border-radius: 18px; background: #fff; color: #111; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 #111; }
.dg-entrega span { font-size: 2rem; }
.dg-darumas { display: flex; gap: 2px; height: 2.4rem; align-items: center; }
.dg-darumas img { width: 34px; height: 34px; object-fit: contain; }
.dg-entrega:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.dg-entrega:not(:disabled):hover { background: var(--brand-yellow, #F9E024); }
.dg-campo { display: grid; gap: 6px; font-weight: 800; font-size: .92rem; }
.dg-atras { justify-self: start; padding: 6px 0; border: 0; background: transparent; color: #6b5f54; font: inherit; cursor: pointer; }

@media (max-width: 520px) {
  .dg-dialogo { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 24px 24px 0 0; border-width: 3px 0 0; box-shadow: none; }
  .dg-paso { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .dg-boton, .dg-pop { animation: none; }
}

/* Sucursal más cercana */
.dg-cerca { min-height: 46px; padding: 10px 14px; border: 2px dashed #111; border-radius: 14px; background: #fff; color: #111; font: inherit; font-weight: 900; cursor: pointer; }
.dg-cerca[hidden], .dg-recomendada[hidden] { display: none; }
.dg-cerca:disabled { opacity: .5; }
.dg-recomendada-boton { position: relative; display: grid; gap: 2px; width: 100%; padding: 16px 14px 12px; border: 3px solid #111; border-radius: 16px; background: var(--brand-yellow, #F9E024); color: #111; text-align: left; font: inherit; cursor: pointer; box-shadow: 3px 3px 0 #111; }
.dg-recomendada-boton strong { font-size: 1.05rem; font-weight: 900; }
.dg-recomendada-boton small { color: #4a3d00; font-weight: 700; }
.dg-recomendada-sello { position: absolute; top: -10px; right: 12px; padding: 2px 10px; border: 2px solid #111; border-radius: 999px; background: #E62026; color: #fff; font-size: .72rem; font-weight: 900; text-transform: uppercase; }