/* ═══════════════════════════════════════════════════════════════════
   escritorio.css — web de escritorio (17 oct 2026). Solo index.html.
   Va DESPUÉS de styles.css. Solo actúa a partir de 1100 px de ancho:
   en móvil, tablet y la app de Android no cambia nada.
   Paso 1: la guía abierta a la izquierda y el chat de la guía anclado a la
   derecha (antes era un popup flotante; mapa-itinerario.js pone la clase
   body.itin-dock al abrirlo en pantalla ancha).
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {
  /* La guía deja libre la columna del chat */
  body.itin-dock .itin-view { right: 400px; }
  /* Botones flotantes: arriba a la derecha del MAPA (60 % del ancho que queda a la guía) */
  body.itin-dock .itin-action-bar { right: calc(400px + 0.4 * (100vw - 400px) + 12px); }

  /* El chat de la guía: columna fija a la derecha, encima del menú de abajo */
  body.itin-dock .itin-query-overlay {
    inset: 0 0 calc(56px + env(safe-area-inset-bottom, 0px)) auto;
    width: 400px; padding: 0;
    background: var(--negro);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-left: 1px solid var(--linea);
    align-items: stretch; justify-content: stretch;
  }
  body.itin-dock .itin-query-modal {
    max-width: none; max-height: none; height: 100%;
    border: 0; box-shadow: none;
  }
  /* Es una columna fija: no se cierra */
  body.itin-dock .itin-query-close { display: none; }
}

/* Paso 2 (17 oct 2026): quien llega sin cuenta ve una guía de ejemplo y, a la derecha, la invitación a
   crear cuenta (la pone mapa-itinerario.js: _showVisitorDock). Mismo hueco y ancho que el chat. */
.itin-visitor-dock { display: none; }
@media (min-width: 1100px) {
  .itin-visitor-dock {
    position: fixed; top: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    width: 400px; z-index: 1300; box-sizing: border-box;
    display: flex; flex-direction: column;
    background: var(--negro); border-left: 1px solid var(--linea);
    color: var(--crema);
  }
  .ivd-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--linea); }
  .ivd-av {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--dorado); color: var(--negro); font-family: var(--font-display); font-weight: 800; font-size: 19px;
  }
  .ivd-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .03em; }
  .ivd-body { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
  .ivd-msg { background: var(--gris); border: 1px solid var(--linea); padding: 14px 16px; font-size: 14px; line-height: 1.5; margin: 0; }
  .ivd-h { font-family: var(--font-display); font-size: 16px; letter-spacing: .08em; color: rgba(236,235,232,.55); margin: 8px 0 0; }
  .ivd-chip {
    text-align: left; background: none; border: 1px solid var(--linea-fuerte); color: var(--crema);
    padding: 12px 14px; font-size: 14px; font-family: inherit; cursor: pointer;
  }
  .ivd-chip:hover { border-color: var(--dorado); color: var(--dorado2); }
  .ivd-foot { padding: 18px 22px 22px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
  .ivd-cta {
    background: var(--dorado); color: var(--negro); border: 0; padding: 14px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  }
  .ivd-cta:hover { background: var(--dorado2); }
  .ivd-note { margin: 0; text-align: center; font-size: 12px; color: rgba(236,235,232,.55); }
}

/* Barras de desplazamiento finas y a juego (17 oct 2026): sin flechas ni el blanco del sistema */
@media (min-width: 1100px) {
  .itin-cards-col, .itin-query-answer, .ivd-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(244,99,11,.55) transparent;
  }
  .itin-cards-col::-webkit-scrollbar, .itin-query-answer::-webkit-scrollbar, .ivd-body::-webkit-scrollbar { width: 8px; }
  .itin-cards-col::-webkit-scrollbar-track, .itin-query-answer::-webkit-scrollbar-track, .ivd-body::-webkit-scrollbar-track { background: transparent; }
  .itin-cards-col::-webkit-scrollbar-thumb, .itin-query-answer::-webkit-scrollbar-thumb, .ivd-body::-webkit-scrollbar-thumb {
    background: rgba(244,99,11,.45); border-radius: 0;
  }
  .itin-cards-col::-webkit-scrollbar-thumb:hover, .itin-query-answer::-webkit-scrollbar-thumb:hover, .ivd-body::-webkit-scrollbar-thumb:hover { background: var(--dorado); }
  .itin-cards-col::-webkit-scrollbar-button, .itin-query-answer::-webkit-scrollbar-button, .ivd-body::-webkit-scrollbar-button { display: none; }
}

/* ═══ Paso 3 (17 oct 2026): con cuenta y sin guía activa — bienvenida a la izquierda, pantalla de Salma (el chat de
   siempre) en una columna a la derecha. app.js: _dkHomeOn() pone body.dk-home y #dk-welcome. ═══ */
.dk-welcome { display: none; }
@media (min-width: 1100px) {
  body.dk-home .app-content {
    position: fixed; top: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    width: 400px; max-width: 400px; margin: 0; z-index: 20;
    background: var(--negro); border-left: 1px solid var(--linea);
  }
  body.dk-home .app-input-bar {
    left: auto; right: 0; width: 400px; max-width: 400px; transform: none;
  }
  body.dk-home #salma-close { display: none; }
  body.dk-home .chat-bg-layer { display: none; }

  .dk-welcome {
    display: block; position: fixed; top: 0; left: 0; right: 400px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 10; overflow-y: auto; background: var(--negro);
    background-image: linear-gradient(rgba(13,15,16,.82), rgba(13,15,16,.95)), url('mapa.webp');
    background-size: cover; background-position: center;
  }
  .dkw-inner { max-width: 760px; padding: 64px 56px; }
  .dkw-kicker { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .14em; color: var(--dorado); }
  .dkw-h1 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: .95; text-transform: uppercase; color: var(--crema); }
  .dkw-lead { margin: 0 0 32px; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--crema); }
  .dkw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; }
  .dkw-step { border: 1px solid var(--linea); background: rgba(23,25,27,.7); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
  .dkw-step b { font-size: 15px; color: var(--crema); }
  .dkw-step span { font-size: 13px; color: rgba(236,235,232,.65); line-height: 1.45; }
  .dkw-h { margin: 0 0 10px; font-family: var(--font-display); font-size: 16px; letter-spacing: .08em; color: rgba(236,235,232,.55); }
  .dkw-ideas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
  .dkw-idea {
    background: none; border: 1px solid var(--linea-fuerte); color: var(--crema);
    padding: 12px 16px; font-size: 14px; font-family: inherit; cursor: pointer;
  }
  .dkw-idea:hover { border-color: var(--dorado); color: var(--dorado2); }
  .dkw-more { margin: 0; font-size: 14px; color: rgba(236,235,232,.65); }
  .dkw-more a { color: var(--dorado); text-decoration: none; margin-left: 6px; }
  .dkw-more a:hover { text-decoration: underline; }
  .dk-welcome { scrollbar-width: thin; scrollbar-color: rgba(244,99,11,.55) transparent; }
}

/* Visitante sin cuenta (17 oct 2026): la columna deja escribir a dónde quiere ir, con «Crea tu ruta gratis» y
   «Entrar» siempre a la vista; la ✕ de la guía de ejemplo no se enseña (no hay a dónde volver). */
@media (min-width: 1100px) {
  body.itin-anon .itin-mobile-back { display: none; }
  .ivd-login {
    margin-left: auto; background: none; border: 0; cursor: pointer; font-family: inherit;
    font-size: 12px; color: rgba(236,235,232,.65); text-decoration: underline;
  }
  .ivd-login:hover { color: var(--crema); }
  .ivd-row { display: flex; gap: 8px; align-items: stretch; }
  .ivd-input {
    flex: 1; resize: none; box-sizing: border-box; min-height: 52px;
    background: rgba(255,255,255,.05); border: 1px solid var(--linea-fuerte); color: var(--crema);
    padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.4; border-radius: 0;
  }
  .ivd-input:focus { outline: none; border-color: var(--dorado); }
  .ivd-send { width: 46px; border: 0; background: var(--dorado); color: var(--negro); font-size: 16px; cursor: pointer; }
  .ivd-send:hover { background: var(--dorado2); }
}

/* ═══ Cabecera de escritorio (17 oct 2026): barra fina de 56 px arriba. app.js: _dkHeaderSync() ═══
   Con ella puesta (body.dk-header), todo lo que arrancaba en el borde de arriba baja 56 px. */
.dk-header { display: none; }
@media (min-width: 1100px) {
  .dk-header {
    display: flex; align-items: center; gap: 36px;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1400; box-sizing: border-box;
    padding: 0 24px; background: var(--negro); border-bottom: 1px solid var(--linea);
  }
  .dkh-brand {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--crema);
    font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .04em;
  }
  .dkh-brand span { color: var(--dorado); font-weight: 600; margin: 0 .22em; }
  .dkh-nav { display: flex; align-items: stretch; gap: 28px; flex: 1; height: 100%; }
  .dkh-link {
    display: flex; align-items: center; background: none; border: 0; border-bottom: 2px solid transparent;
    color: rgba(236,235,232,.65); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    padding: 0; text-decoration: none; margin-top: 2px;
  }
  .dkh-link:hover { color: var(--crema); }
  .dkh-link.dkh-on { color: var(--crema); border-bottom-color: var(--dorado); }
  .dkh-right { display: flex; align-items: center; gap: 14px; }
  .dkh-new {
    background: var(--dorado); color: var(--negro); border: 0; padding: 10px 18px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .03em;
  }
  .dkh-new:hover { background: var(--dorado2); }
  .dkh-login { background: none; border: 0; color: var(--crema); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .dkh-login:hover { color: var(--dorado2); }
  .dkh-avatar {
    width: 34px; height: 34px; background: var(--gris); border: 1px solid var(--linea-fuerte); color: var(--crema);
    font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  }
  .dkh-avatar:hover { border-color: var(--dorado); }

  /* Todo lo que arrancaba arriba, 56 px más abajo */
  body.dk-header .itin-view { top: 56px; }
  body.dk-header.itin-dock .itin-query-overlay { top: 56px; }
  body.dk-header .itin-visitor-dock { top: 56px; }
  body.dk-header .dk-welcome { top: 56px; }
  body.dk-header.dk-home .app-content { top: 56px; }
  body.dk-header:not(.dk-home) .app-content { padding-top: 56px; }
  body.dk-header .itin-action-bar { top: 68px; }
  body.dk-header .itin-action-bar .itin-btn-save { top: 68px; }
  body.dk-header #mejora-btn, body.dk-header #chat-fresh { top: 66px; }
  body.dk-header .salma-screen-close { top: 66px; }
}

/* Atajos (menú desplegable) y SOS en la cabecera de escritorio (17 oct 2026) */
@media (min-width: 1100px) {
  .dkh-menu-wrap { position: relative; display: flex; align-items: center; }
  .dkh-menu-wrap .dkh-link { margin-top: 0; height: 56px; }
  .dkh-menu {
    position: absolute; top: 56px; right: 0; min-width: 220px; z-index: 860;
    background: var(--gris); border: 1px solid var(--linea-fuerte); box-shadow: 0 10px 30px rgba(0,0,0,.5);
    display: flex; flex-direction: column; padding: 6px 0;
  }
  .dkh-menu[hidden] { display: none; }
  .dkh-menu button {
    text-align: left; background: none; border: 0; color: var(--crema); cursor: pointer;
    font-family: inherit; font-size: 14px; padding: 11px 18px;
  }
  .dkh-menu button:hover { background: rgba(244,99,11,.14); color: var(--dorado2); }
  .dkh-sos {
    background: none; border: 1px solid #ff6b5a; color: #ff6b5a; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 9px 14px;
  }
  .dkh-sos:hover { background: #ff6b5a; color: #1c1210; }
}

/* La portada de siempre, más alta que la ventana, quedaba centrada y se cortaba por arriba (el eslogan bajo la
   cabecera). Con la cabecera puesta, arranca arriba y se baja con la rueda (scroll propio de la columna). */
@media (min-width: 1100px) {
  body.dk-header:not(.dk-home) .app-content { align-self: flex-start; height: 100dvh; }
}

/* ═══ Explorar y Mis viajes en escritorio (17 oct 2026): la columna de 700 px se abre a 1180 px, con los países y
   las rutas en rejilla amplia y fotos más grandes. Solo con la cabecera de escritorio puesta (≥1100 px). ═══ */
@media (min-width: 1100px) {
  body.dk-header .app-content:has(#expl-body),
  body.dk-header .app-content:has(#viajes-grid) { width: 100%; max-width: 1180px; }

  body.dk-header .app-content:has(#expl-body) .viajes-header,
  body.dk-header .app-content:has(#viajes-grid) .viajes-header { padding: 28px 16px 18px; }
  body.dk-header .viajes-title { font-size: 46px; line-height: 1; text-transform: uppercase; }
  body.dk-header .viajes-sub { font-size: 16px; margin-top: 8px; }
  body.dk-header .rutas-tabs { max-width: 460px; padding-bottom: 22px; }

  /* Países: tarjetas grandes en rejilla */
  body.dk-header .expl-countries { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
  body.dk-header .expl-country { aspect-ratio: 4 / 3; padding: 18px; }
  body.dk-header .expl-country-flag { font-size: 40px; top: 14px; left: 18px; }
  body.dk-header .expl-country-name { font-size: 28px; }
  body.dk-header .expl-country-count { font-size: 13px; }
  body.dk-header .expl-country:hover { border-color: var(--dorado); }

  /* Rutas (Mis viajes y dentro de un país): más columnas y fotos más altas */
  body.dk-header .viajes-grid,
  body.dk-header .viaje-group-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
  body.dk-header #expl-body.viajes-grid { display: block; }
  body.dk-header .viaje-card-img { height: 170px; }
  body.dk-header .viaje-card:hover { border-color: var(--dorado); }
  body.dk-header .expl-country-title { font-size: 34px; }
}

/* Mis viajes: los países ocupan una fila entera (antes cada país era una columna) y «Nueva guía» es una franja */
@media (min-width: 1100px) {
  body.dk-header .viajes-grid .viaje-group { grid-column: 1 / -1; }
  body.dk-header .viajes-grid .viaje-group-header { margin-top: 12px; }
  body.dk-header .viajes-grid .viaje-card-new { grid-column: 1 / -1; flex-direction: row; min-height: 64px; gap: 12px; }
  body.dk-header .viaje-card-new-icon { font-size: 22px; }
  body.dk-header .viaje-card-new-txt { font-size: 12px; opacity: .8; }
}

/* ═══ Tu mundo en escritorio (17 oct 2026): aprovecha el ancho. Cifras en una fila, el mapa grande a la izquierda y
   países y récords a su derecha; compartir y viajes, a todo el ancho. ═══ */
@media (min-width: 1100px) {
  body.dk-header .app-content:has(#tm-screen) { width: 100%; max-width: 1280px; }
  body.dk-header .tm-screen { max-width: none; padding: 12px 28px 32px; }
  body.dk-header .tm-title { font-size: clamp(64px, 6vw, 96px); }
  body.dk-header .tm-lede { font-size: 17px; }

  body.dk-header #tm-body {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px 36px; align-items: start;
  }
  body.dk-header #tm-body > * { grid-column: 1 / -1; }
  body.dk-header #tm-body > .tm-mapw { grid-column: 1; grid-row: 2 / span 2; }
  body.dk-header #tm-body > section:has(#tm-flags) { grid-column: 2; grid-row: 2; }
  body.dk-header #tm-body > section:has(#tm-recs) { grid-column: 2; grid-row: 3; }
  body.dk-header .tm-recs { grid-template-columns: 1fr 1fr; }
  body.dk-header .tm-trips { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ═══ Resto de pantallas del index en escritorio (17 oct 2026): cada una tenía un ancho distinto, de 270 a 700 px,
   según su contenido. Ahora todas se abren (hasta 1180 px) y cada tipo de pantalla usa el ancho a su manera:
   listas centradas y legibles, perfil y ayuda en dos columnas, historias y fotos en rejilla. ═══ */
@media (min-width: 1100px) {
  body.dk-header:not(.dk-home) .app-content:not(.app-content--chat) { width: 100%; max-width: 1180px; margin: 0 auto; }

  /* Listas: notas, documentos, vuelos, consultas */
  body.dk-header .docs-area, body.dk-header .notas-area, body.dk-header .vuelos-area, body.dk-header .cons-area {
    width: 100%; max-width: 820px; margin: 0 auto; box-sizing: border-box;
  }

  /* Perfil: a la izquierda quién eres y tu plan (fijos), a la derecha tus ajustes por grupos */
  body.dk-header .profile-area { display: flow-root; width: 100%; max-width: 1080px; margin: 0 auto; box-sizing: border-box; padding-top: 32px; }
  body.dk-header .profile-area .prof-hero,
  body.dk-header .profile-area .prof-plan-card { float: left; clear: left; width: 340px; box-sizing: border-box; }
  body.dk-header .profile-area .prof-group { margin-left: 392px; max-width: 640px; }
  body.dk-header .profile-area .prof-legal { clear: both; }
  /* Ayuda: una columna centrada y legible */
  body.dk-header .salma-can-area { width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; }

  /* Historias y fotos sin viaje: rejilla ancha */
  body.dk-header .hist-container { width: 100%; max-width: 1180px; box-sizing: border-box; }
  body.dk-header .hist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.dk-header .fv-stray { width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box; }
  body.dk-header .fv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
}

/* El desplegable de Atajos salía DEBAJO de la guía y del chat (z-index 900 y 1300): la cabecera va por encima de
   ellos. El mapa en vivo, que ocupa toda la pantalla, sigue tapándola. */
@media (min-width: 1100px) {
  body.live-map-open .dk-header { z-index: 850; }
}