/* ═══════════════════════════════════════════════════════════════════════
   WILEP · ESCRITORIO DE LA PORTADA (2026-10-29, PR 2 de "Descargar la app")
   Mockup aprobado por Ariel: claude.ai/artifact/MRVWYNqhnym45WA4BPNDuF (pantallas «Escritorio · Videos» y «Escritorio · Cerca»).
   Solo con 1024 px o más y NUNCA dentro de la app (html.en-app, lo pone piel.js); por debajo de 1024 px la portada
   queda exactamente como antes. Solo la carga index.html y todo cuelga de body.waze-mapa. Prefijo de clases: wd-.
     · barra lateral izquierda de 248 px (reemplaza la barra inferior #tabbar, que aquí se esconde);
     · arriba a la derecha: «Descargar la app» + «Iniciar sesión» (o el avatar);
     · Videos: el video en un marco vertical 9:16 centrado, las acciones AL LADO del marco y flechas a la derecha;
     · Cerca: el mapa al centro y la hoja convertida en panel derecho, con la tarjeta de descarga abajo.
   Los huecos que antes eran fijos (62 px de la barra inferior, left: 0) son --barra-abajo y --lado en las hojas de cada panel
   (videos.css, pintar.css, tablero.css, waze.css, monumentos.css); aquí solo se les da otro valor.
   Se carga la ÚLTIMA entre las hojas de la portada para ganar a las demás con la misma especificidad.
   Nada por debajo de 12 px; la paleta sigue a la piel (--bg, --surf, --ink, --acc).
   ═══════════════════════════════════════════════════════════════════════ */

/* Fuera de escritorio nada de esto existe. */
.wd-lado, .wd-arriba, .wd-flechas, .wd-tarjeta { display: none; }
.wd-lado [hidden], .wd-arriba [hidden] { display: none !important; }

.wd-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

@media (min-width: 1024px) {

  /* ── Variables: sin barra inferior, 248 px de barra lateral y, en Cerca, un panel derecho de ~380 px ── */
  html:not(.en-app) body.waze-mapa {
    --barra-abajo: 0px;
    --lado: 248px;
    --wd-panel-w: clamp(320px, 30vw, 380px);
    --wd-panel: var(--wd-panel-w);
  }
  /* Videos, Recorrer, Amigos y el buscador usan todo el ancho: sin panel derecho. */
  html:not(.en-app) body.waze-mapa.videos-abierto,
  html:not(.en-app) body.waze-mapa.pintando,
  html:not(.en-app) body.waze-mapa.am-abierto,
  html:not(.en-app) body.waze-mapa.wd-buscando { --wd-panel: 0px; }

  html:not(.en-app) body.waze-mapa #tabbar { display: none; }
  html:not(.en-app) body.waze-mapa .dg-franja { display: none; }
  html.dg-franja body.waze-mapa { --dg-franja: 0px; }

  /* ── Barra lateral ── */
  html:not(.en-app) body.waze-mapa .wd-lado {
    position: fixed; left: 0; top: 0; bottom: 0; width: 248px; z-index: 1260; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 18px; padding: 24px 18px;
    background: var(--bg); color: var(--ink); border-right: 1px solid var(--line);
    font-family: Outfit, system-ui, sans-serif; overflow-y: auto; scrollbar-width: thin;
  }
  .wd-marca { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
  .wd-logo { width: 36px; height: 36px; border-radius: 12px; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; }
  .wd-logo .wd-ico { width: 20px; height: 20px; stroke-width: 2; }

  .wd-busca { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surf); color: var(--muted); box-shadow: var(--csh); cursor: text; }
  .wd-busca .wd-ico { width: 18px; height: 18px; }
  .wd-busca input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
  .wd-busca input::placeholder { color: var(--muted); }
  .wd-busca input:focus, .wd-busca input:focus-visible { outline: 0; box-shadow: none; border: 0; background: transparent; }
  .wd-busca:focus-within { box-shadow: 0 0 0 2px var(--acc); }

  .wd-menu { display: flex; flex-direction: column; gap: 2px; }
  .wd-menu button {
    display: flex; align-items: center; gap: 14px; width: 100%; height: 48px; padding: 0 12px; border: 0; border-radius: 14px;
    background: transparent; color: var(--ink); font: inherit; font-size: 17px; text-align: left; cursor: pointer;
  }
  .wd-menu button:hover { background: color-mix(in srgb, var(--surf) 65%, transparent); }
  /* Como la barra inferior del celular (piel.css): rótulo en tinta, el acento va en el ícono. */
  .wd-menu button.on { background: var(--surf); font-weight: 600; }
  .wd-menu button.on .wd-ico { stroke: var(--acc); }
  .wd-menu button:focus-visible, .wd-pie a:focus-visible, .wd-marca:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

  .wd-sesion { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
  .wd-sesion p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
  .wd-sesion .wd-btn { height: 46px; }
  .wd-sesion[hidden] { display: none; }

  .wd-pie { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
  .wd-pie a { padding: 5px 0; color: var(--muted); text-decoration: none; }
  .wd-pie a:hover { color: var(--ink); }

  /* Botones de la página (sidebar, arriba a la derecha, tarjeta) */
  .wd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
    font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box;
  }
  .wd-btn .wd-ico { width: 18px; height: 18px; }
  .wd-btn-acc { background: var(--acc); color: var(--acc-ink); }
  .wd-btn-tinta { background: var(--ink); color: var(--bg); }
  .wd-sombra-acc { box-shadow: 0 10px 30px color-mix(in srgb, var(--acc) 30%, transparent); }
  .wd-btn:focus-visible, .wd-avatar:focus-visible, .wd-flechas button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* ── Arriba a la derecha: Descargar la app + Iniciar sesión (o el avatar) ──
     En Pintar no se muestra: ahí arriba a la derecha está el botón del tablero. */
  html:not(.en-app) body.waze-mapa .wd-arriba { position: fixed; top: 20px; right: calc(var(--wd-panel) + 20px); z-index: 1260; display: flex; gap: 10px; }
  html:not(.en-app) body.waze-mapa.pintando .wd-arriba { display: none; }
  .wd-avatar {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--bg);
    display: grid; place-items: center; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: var(--csh);
  }
  .wd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ── El lienzo del mapa es lo que queda entre la barra lateral y el panel derecho ── */
  html:not(.en-app) body.waze-mapa .w-lienzo { left: var(--lado); right: var(--wd-panel); }
  /* Debajo de los botones de arriba: la cita del domingo, la fila de botones redondos y los controles del mapa bajan 64 px. */
  html:not(.en-app) body.waze-mapa .w-cita { top: 76px; left: 20px; right: 20px; }
  html:not(.en-app) body.waze-mapa .w-flota-top { top: 120px; left: 20px; right: 20px; }
  html:not(.en-app) body.waze-mapa #btn-buscar { display: none; }   /* la búsqueda vive en la barra lateral */
  html:not(.en-app) body.waze-mapa .maplibregl-ctrl-top-right,
  html:not(.en-app) body.waze-mapa .leaflet-top.leaflet-right { top: 180px; }
  html:not(.en-app) body.waze-mapa .w-redondo.w-mi-ubic { right: 20px; bottom: 44px; }
  html:not(.en-app) body.waze-mapa .w-crear { left: 20px; bottom: 24px; }
  html:not(.en-app) body.waze-mapa #notif-panel { top: 176px; right: calc(var(--wd-panel) + 20px); }
  html:not(.en-app) body.waze-mapa .toast-container { bottom: 28px; }
  html:not(.en-app) body.waze-mapa .w-guia { left: calc(var(--lado) + 14px); right: calc(var(--wd-panel) + 14px); bottom: 24px; max-width: 520px; margin: 0 auto; }
  /* Las variantes de arriba (Pintar, Videos) van pegadas al borde de arriba: sin `bottom`, o la tarjeta se estira de arriba a abajo. */
  html:not(.en-app) body.waze-mapa .w-guia.arriba, html:not(.en-app) body.waze-mapa .w-guia.w-guia-pintar { bottom: auto; }
  html:not(.en-app) body.waze-mapa .w-guia.arriba:not(.w-guia-pintar) { top: 126px; }   /* debajo de los botones de arriba y de las pestañas de Videos */
  html:not(.en-app) body.waze-mapa #ua-franja { left: calc(var(--lado) + 12px); }
  /* Las píldoras «Estás en…» (monumento y lugar, a ≤ 60 m): centradas en el mapa y debajo de los controles de arriba. */
  html:not(.en-app) .mn-aqui, html:not(.en-app) .lg-aqui { left: calc(var(--lado) + (100% - var(--lado) - var(--wd-panel)) / 2); top: 180px; }
  html:not(.en-app) .lg-aqui.debajo { top: 238px; }
  html:not(.en-app) .mn-aqui.en-pintar { top: auto; }

  /* ── Cerca: la hoja inferior pasa a panel derecho fijo ──
     Se anulan los tres estados de la hoja (abierto, plegado, minimizado): en escritorio siempre está abierta. */
  html:not(.en-app) body.waze-mapa .w-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: var(--wd-panel-w); max-height: none; box-sizing: border-box;
    padding: 22px 20px 20px; border-radius: 0; border-left: 1px solid var(--line); box-shadow: none; background: var(--bg); transform: none;
  }
  html:not(.en-app) body.waze-mapa .w-sheet .asa,
  html:not(.en-app) body.waze-mapa .w-sheet .sheet-mostrar { display: none; }
  html:not(.en-app) body.waze-mapa .w-sheet.minimizado .cerca-chips,
  html:not(.en-app) body.waze-mapa .w-sheet.plegado #filtros-rapidos { display: flex; }
  html:not(.en-app) body.waze-mapa .w-sheet.minimizado .w-filtros { display: flex; }
  html:not(.en-app) body.waze-mapa .w-sheet .lista,
  html:not(.en-app) body.waze-mapa .w-sheet.minimizado .lista,
  html:not(.en-app) body.waze-mapa .w-sheet.plegado .lista { display: block; flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  html:not(.en-app) body.waze-mapa .w-sheet.plegado #cerca-productos,
  html:not(.en-app) body.waze-mapa .w-sheet.plegado #cerca-videos,
  html:not(.en-app) body.waze-mapa .w-sheet.plegado #cerca-live { max-height: none; overflow: visible; }
  html:not(.en-app) body.waze-mapa .w-sheet .cerca-chips { padding: 0 0 10px; flex-wrap: wrap; }
  /* La tarjeta de abajo del panel */
  html:not(.en-app) body.waze-mapa .w-sheet .wd-tarjeta {
    display: flex; flex-direction: column; gap: 10px; flex: none; margin-top: 14px; padding: 18px; border-radius: 22px;
    background: var(--ink); color: var(--bg);
  }
  .wd-tarjeta b { font-size: 16px; font-weight: 500; }
  .wd-tarjeta p { margin: 0; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--bg) 78%, transparent); }
  .wd-tarjeta .wd-btn { align-self: flex-start; height: 40px; padding: 0 16px; font-size: 14px; }

  /* ── Buscador (el panel de siempre, ahora entre la barra lateral y el borde) ── */
  html:not(.en-app) body.waze-mapa .w-buscar-panel { padding: 84px max(24px, calc((100% - 760px) / 2)) 24px; }

  /* ── Videos: marco 9:16, acciones al lado, flechas a la derecha ──
     Alto del marco = alto de la lista = ventana − 142 px (arriba: 20 de margen + 44 de los botones + 44 de las pestañas + espacios; abajo: 24). */
  html:not(.en-app) body.waze-mapa .vd-panel {
    --vd-h: max(300px, calc(100vh - 142px));
    --vd-marco-w: calc(var(--vd-h) * 9 / 16);
    --vd-marco-h: var(--vd-h);
    background: var(--bg); color: var(--ink);
  }
  html:not(.en-app) body.waze-mapa .vd-top { top: 70px; left: 0; right: 0; padding: 0 24px; background: none; justify-content: center; }
  html:not(.en-app) body.waze-mapa .vd-tabs { flex: none; gap: 6px; padding: 4px; border-radius: 999px; background: var(--surf); box-shadow: var(--csh); }
  html:not(.en-app) body.waze-mapa .vd-tabs button { height: 36px; padding: 0 16px; border-radius: 999px; color: var(--muted); text-shadow: none; text-decoration: none; }
  html:not(.en-app) body.waze-mapa .vd-tabs button.on { background: var(--ink); color: var(--bg); font-weight: 500; }
  html:not(.en-app) body.waze-mapa .vd-redondo { background: var(--surf); color: var(--ink); box-shadow: var(--csh); }
  html:not(.en-app) body.waze-mapa .vd-redondo.on { background: var(--ink); color: var(--bg); }
  /* El botón de Tu cuenta de la cabecera (main, 30-oct) ya lo hace el avatar de arriba a la derecha. */
  html:not(.en-app) body.waze-mapa .vd-cuenta { display: none; }
  html:not(.en-app) body.waze-mapa .vd-busca { top: 124px; left: 50%; right: auto; width: min(420px, 90%); transform: translateX(-50%); }
  html:not(.en-app) body.waze-mapa .vd-lista { inset: 118px 0 24px 0; }
  html:not(.en-app) body.waze-mapa .vd-item { background: transparent; }

  /* Un video horizontal va en un marco 16:9 del mismo alto máximo que quepa (menos, a cada lado, la columna de acciones y las flechas). */
  html:not(.en-app) body.waze-mapa .vd-item.ancho {
    --vd-marco-w: min(calc(var(--vd-h) * 16 / 9), calc(100vw - var(--lado) - 320px));
    --vd-marco-h: calc(var(--vd-marco-w) * 9 / 16);
  }
  html:not(.en-app) body.waze-mapa .vd-item .vd-marco {
    display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--vd-marco-w); height: var(--vd-marco-h);
    overflow: hidden; border-radius: 22px; background: radial-gradient(120% 80% at 50% 36%, #4A3A30 0%, #1F1D1A 60%, #14130F 100%); color: #fff;
  }
  html:not(.en-app) body.waze-mapa .vd-item.negocio .vd-marco { background: radial-gradient(120% 80% at 50% 36%, #2D4A3A 0%, #1F1D1A 60%, #14130F 100%); }
  html:not(.en-app) body.waze-mapa .vd-item.live .vd-marco { background: radial-gradient(120% 80% at 50% 36%, #3A3550 0%, #1F1D1A 60%, #14130F 100%); }
  html:not(.en-app) body.waze-mapa .vd-sonido { top: 16px; left: 16px; }
  html:not(.en-app) body.waze-mapa .vd-pendiente { top: 20px; right: 16px; }
  html:not(.en-app) body.waze-mapa .vd-pie { left: 0; right: 0; bottom: 0; padding: 80px 18px 22px; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events: none; }
  html:not(.en-app) body.waze-mapa .vd-pie a, html:not(.en-app) body.waze-mapa .vd-pie button { pointer-events: auto; }

  /* La columna de acciones, al lado del marco y con su pie alineado al del marco. */
  html:not(.en-app) body.waze-mapa .vd-col {
    left: calc(50% + var(--vd-marco-w) / 2 + 16px); right: auto; bottom: calc((100% - var(--vd-marco-h)) / 2 + 8px); gap: 18px;
  }
  /* Un video horizontal es más bajo que la columna: la columna se alinea con el pie de la lista, no con el del marco. */
  html:not(.en-app) body.waze-mapa .vd-item.ancho .vd-col { bottom: 8px; }
  html:not(.en-app) body.waze-mapa .vd-col > button, html:not(.en-app) body.waze-mapa .vd-col > a { color: var(--ink); text-shadow: none; font-size: 13px; font-weight: 500; gap: 4px; }
  html:not(.en-app) body.waze-mapa .vd-col .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--surf); box-shadow: var(--csh); }
  html:not(.en-app) body.waze-mapa .vd-col .ico .trazo { width: 24px; height: 24px; stroke: var(--ink); }
  html:not(.en-app) body.waze-mapa .vd-col .on .ico .trazo { fill: var(--acc); stroke: var(--acc); }
  html:not(.en-app) body.waze-mapa .vd-col .on.guardado .ico .trazo { fill: var(--ink); stroke: var(--ink); }
  html:not(.en-app) body.waze-mapa .vd-col > button:hover .ico { background: var(--surf2); }
  html:not(.en-app) body.waze-mapa .vd-ava { width: 52px; height: 52px; margin-bottom: 14px; border-color: var(--bg); background: #8A5A3C; color: #fff; }
  html:not(.en-app) body.waze-mapa .vd-ava .sg-btn.icono { border-color: var(--bg); }
  html:not(.en-app) body.waze-mapa .vd-ava.vivo::after { border-color: var(--bg); }
  /* Vacíos y carga: el panel ya no es oscuro. */
  html:not(.en-app) body.waze-mapa .vd-vacio h3 { color: var(--ink); }
  html:not(.en-app) body.waze-mapa .vd-vacio p, html:not(.en-app) body.waze-mapa .vd-cargando { color: var(--muted); }

  /* Ventanas bajitas: la columna se compacta para no salirse del alto de la lista. */
  @media (max-height: 760px) {
    html:not(.en-app) body.waze-mapa .vd-col { gap: 8px; }
    html:not(.en-app) body.waze-mapa .vd-col .ico { width: 44px; height: 44px; }
    html:not(.en-app) body.waze-mapa .vd-ava { width: 44px; height: 44px; margin-bottom: 12px; }
  }

  html:not(.en-app) body.waze-mapa.videos-abierto .wd-flechas {
    position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 1260; display: flex; flex-direction: column; gap: 12px;
  }
  .wd-flechas button { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--surf); color: var(--ink); display: grid; place-items: center; box-shadow: var(--csh); cursor: pointer; }
  .wd-flechas button:hover { background: var(--surf2); }
}