/* Doña Tota · armado de la app real (layout, overlays fijos y Leaflet).
   Los componentes están en components.css; acá no se definen colores ni medidas nuevas: solo tokens. */
html, body { margin: 0; background: var(--bg); }

/* Columna de 480 px centrada (DESIGN.md › Desktop). */
.app { position: relative; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }

/* En la app, la hoja, el velo y el aviso quedan fijos a la pantalla y no al contenedor. */
.app .dt-scrim, .app .dt-sheet, .app .dt-toast { position: fixed; }
.app .dt-sheet { left: 50%; right: auto; width: min(480px, 100%); transform: translateX(-50%); }
.app .dt-toast { left: 50%; right: auto; width: min(456px, calc(100% - 24px)); transform: translateX(-50%); bottom: 100px; }
@media (min-width: 720px) {
  /* En desktop el detalle es un diálogo centrado de 440 px. */
  .app .dt-sheet { top: 50%; bottom: auto; width: 440px; max-height: 90vh; transform: translate(-50%, -50%); border-radius: var(--radius-xl); }
  .app .dt-sheet__handle { display: none; }
}

.dt-cat { scroll-margin-top: 64px; }

/* Leaflet adentro de .dt-map, con el chip y los controles propios por encima de sus capas. */
.dt-map .leaflet-container { position: absolute; inset: 0; background: var(--surface-2); font: inherit; }
.dt-map .dt-mapchip, .dt-map .dt-mapctl, .dt-map .dt-locate { z-index: 1000; }
.dt-map .leaflet-control-attribution { font-size: 10px; background: var(--surface); color: var(--muted); }
.dt-map .leaflet-control-attribution a { color: var(--muted); }
.dt-pin-icon { background: none; border: 0; }
.dt-pin-icon svg { display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }

/* Botones que son links (WhatsApp): sin subrayado, como los demás botones. */
a.dt-btn { text-decoration: none; }

/* Subida de comprobante: el input real queda invisible dentro del label .dt-drop. */
label.dt-drop { position: relative; cursor: pointer; }
label.dt-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.dt-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Mientras carga la primera vez. */
.app-cargando { display: grid; place-items: center; min-height: 60vh; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }