:root{
    /* Marca Itineo — manual de marca del usuario: azul #41B6FF / naranja
       #FF8A00. El azul de marca es bastante claro para texto blanco encima
       (falla contraste AA) — --accent es una versión más oscura de la
       misma familia para botones/links, --brand-blue queda para el ícono
       del logo y acentos puntuales donde no hace falta ese contraste. */
    --bg:#f3f7fb; --surface:#ffffff; --surface-2:#eaf2fa; --ink:#1a2233; --muted:#64748b;
    --brand-blue:#41b6ff; --brand-orange:#ff8a00; --brand-orange-light:#fff2e2;
    --accent:#1976d2; --accent-dark:#0d47a1; --accent-light:#e3f2fd; --accent-ink:#ffffff;
    --coral:#cf5730; --coral-dark:#8f3c1e; --coral-light:#fbeae2;
    --border:#dbe6f0; --border-strong:#c3d4e3;
    --danger:#b23b3b; --danger-bg:#fbeaea; --ok:#1f7a45; --ok-bg:#e8f6ee;
    --radius-sm:8px; --radius:14px; --radius-lg:20px;
    --shadow-sm:0 1px 2px rgba(20,30,45,.06);
    --shadow-md:0 6px 20px rgba(20,30,45,.08), 0 1px 3px rgba(20,30,45,.05);
    /* Nunito es la tipografía de marca (manual de marca del usuario) — para
       esta app puntual gana sobre el default de "fuente del sistema" del
       resto de mis apps de viaje, es un pedido explícito con manual propio. */
    --font-sans:'Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-title:700 22px/1.25 var(--font-sans);
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:20}
  header h1{font-size:19px;margin:0;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:7px;color:var(--brand-blue)}
  header .who{font-size:13px;color:var(--muted)}
  main{max-width:960px;margin:0 auto;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  main.with-bottom-nav{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* Bloque I: el dashboard de vendedor/agencia es DESKTOP-FIRST, necesita
     más ancho que el resto de la app (que se piensa para mobile) — se
     amplía el <main> solo mientras esa vista está activa. */
  /* Mobile: el margen lateral de 20px + el padding propio de cada tarjeta
     anidada se comía demasiado ancho de pantalla (pedido explícito del
     usuario) — en mobile baja al mínimo razonable, en desktop no cambia
     porque ahí sobra espacio. */
  @media (max-width:600px){
    main{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
    main.with-bottom-nav{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
    /* La tarjeta genérica .card que envuelve Itinerario/Alojamiento/
       Actividades seguía con su padding de 18px 20px de siempre — bajar
       el margen de main no alcanzaba, esta tarjeta interior era el
       verdadero cuello de botella para el ancho de las tarjetas de
       destino/evento de adentro (pedido explícito). */
    #tdTabItinerario > .card, #tdTabAlojamiento > .card, #tdTabActividades > .card{padding:12px 8px}
  }
  .page-title{font:var(--font-title);margin:2px 0 18px;letter-spacing:-.3px}
  .card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
  .card h2{font-size:15px;margin:0 0 12px;font-weight:600;letter-spacing:-.1px}
  label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px;font-weight:500}
  input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
  input::placeholder,textarea::placeholder{color:#a8a295}
  button{cursor:pointer;border:none;border-radius:var(--radius-sm);padding:0 18px;min-height:46px;font-size:14px;font-weight:600;font-family:inherit;background:var(--accent);color:var(--accent-ink);margin-top:12px;transition:background .15s,transform .1s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
  button:hover{background:var(--accent-dark)}
  button:active{transform:scale(.98)}
  button.ghost{background:transparent;color:var(--accent);border:1px solid var(--border-strong);padding:0 14px;min-height:40px;margin:0}
  button.ghost:hover{background:var(--surface-2);border-color:var(--accent)}
  button.coral{background:var(--coral)}
  button.coral:hover{background:var(--coral-dark)}
  button.small{padding:0 12px;min-height:36px;font-size:12px;margin:0}
  .avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
  .avatar-picker{position:relative;cursor:pointer;flex-shrink:0}
  .avatar-picker .avatar svg{width:55%;height:55%}
  .avatar-badge{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
  .avatar-badge svg{width:12px;height:12px}
  .header-menu{position:relative}
  .header-menu-btn{background:transparent;color:var(--ink);border:1px solid var(--border-strong);width:38px;height:38px;min-height:0;padding:0;border-radius:50%;font-size:18px;font-weight:700;margin:0;line-height:1}
  .header-menu-btn:hover{background:var(--surface-2)}
  /* Bloque K: ancho FIJO (no min-width) — positionDropdown() necesita
     saber el ancho real del menú para alinear su borde derecho contra
     el botón que lo abre, y medirlo en vivo (offsetWidth) justo en el
     instante en que pasa de oculto a visible es frágil (puede devolver
     un valor viejo/a medio reflow según el navegador). Con un ancho
     fijo, el cálculo en JS usa la misma constante sin medir nada. */
  .header-menu-dropdown{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);width:230px;padding:6px;z-index:40}
  .header-menu-dropdown button{display:flex;align-items:center;gap:8px;width:100%;background:transparent;color:var(--ink);border:none;text-align:left;padding:10px 12px;margin:0;border-radius:var(--radius-sm);font-weight:500;font-size:14px;min-height:0}
  .header-menu-dropdown button:hover{background:var(--surface-2)}
  .cat-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  .cat-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;min-height:0;margin:0;justify-content:flex-start;text-align:left;transition:border-color .15s,background .15s}
  .cat-chip:hover{border-color:var(--cat-color,var(--border-strong))}
  .cat-chip .cat-chip-icon{font-size:18px;flex-shrink:0}
  .cat-chip.selected{border-color:var(--cat-color);background:var(--cat-color);background:color-mix(in srgb, var(--cat-color) 16%, var(--surface))}
  .priorityFilterBtn.active{border-color:var(--accent);background:var(--accent-light);color:var(--accent-dark)}

  /* Pantalla de login — collage de fotos reales de destinos (Wikimedia
     Commons, licencia libre) detrás, con un velo de marca encima para que
     el texto blanco y la tarjeta se lean bien. Se sale del max-width de
     <main> a propósito (truco de "romper" el contenedor) para ocupar todo
     el ancho de la ventana. */
  .auth-screen{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;min-height:calc(100vh - 61px)}
  .auth-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);z-index:0}
  .auth-collage div{background-size:cover;background-position:center}
  .auth-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(13,71,161,.88) 0%,rgba(255,138,0,.55) 100%);z-index:1}
  .auth-content{position:relative;z-index:2;min-height:calc(100vh - 61px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;gap:22px}
  .auth-welcome{text-align:center;color:#fff;max-width:420px}
  .auth-logo{display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .auth-eyebrow{font-size:14px;font-weight:800;letter-spacing:3px;color:#fff;opacity:.85;margin-bottom:2px}
  .auth-slogan{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:8px}
  .auth-welcome p{font-size:14.5px;line-height:1.55;margin:0;opacity:.96;font-weight:600}
  .auth-card{width:100%;max-width:380px;background:rgba(255,255,255,.98)}
  .auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
  .linklike{background:none;border:none;padding:0;margin:0;min-height:0;color:var(--accent);font-weight:600;font-size:12.5px;cursor:pointer}
  .linklike:hover{text-decoration:underline}
  @media (max-width:600px){.auth-collage{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}}

  /* Botón flotante "+" del itinerario — agrupa Agregar desde catálogo /
     Agregar personalizado en un solo lugar (versión provisoria). */
  .fab-wrap{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:35}
  .fab{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;font-size:30px;font-weight:400;box-shadow:var(--shadow-md);min-height:0;padding:0;margin:0;line-height:1}
  .fab:hover{background:var(--accent-dark)}
  .fab-menu{position:absolute;right:0;bottom:calc(100% + 10px);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
  .fab-menu button{background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:999px;padding:0 16px;min-height:42px;font-size:13px;font-weight:600;white-space:nowrap;margin:0}
  .fab-menu button:hover{background:var(--surface-2)}
  /* En mobile esta pantalla tiene el bottom-nav fijo abajo (ver más abajo)
     — el FAB standalone tiene que flotar por ENCIMA de esa barra, no
     superponerse. En desktop el bottom-nav deja de ser fijo (se reordena
     arriba como pestañas), así que ahí vuelve a la esquina normal. */
  .fab-standalone{position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:35}
  .choice-card summary{cursor:pointer;list-style:none}
  .choice-card summary::-webkit-details-marker{display:none}
  .boarding-card{background:var(--accent-light);border-radius:var(--radius);padding:14px 16px;margin-top:10px}
  .boarding-header{display:flex;justify-content:space-between;font-weight:700;color:var(--accent-dark);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
  .boarding-route{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px}
  .boarding-airport{display:flex;flex-direction:column;min-width:0}
  .boarding-airport strong{font-size:21px;letter-spacing:.5px}
  .boarding-plane{color:var(--accent);font-size:20px;flex-shrink:0}
  .boarding-footer{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border-strong);font-size:12px}
  .icon{width:16px;height:16px;flex-shrink:0;vertical-align:-3px}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
  th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
  /* con 6 pestañas (Itinerario/Pendientes/Mapa/Alojamiento/Actividades/
     Gastos) esta barra ya no entra en una pantalla angosta — antes eso
     hacía que TODA la página se corriera de costado; ahora el scroll
     queda contenido acá adentro, la página nunca escrollea horizontal. */
  /* Pedido explícito: que el menú de pestañas (Itinerario/Pendientes/
     Mapa/...) quede pegado al hacer scroll hacia abajo, en vez de irse
     con el resto del contenido. Se pega justo debajo del header (que ya
     era sticky) — su altura real varía un poco según el rol/ancho de
     pantalla, así que se mide con JS (updateHeaderHeightVar) en vez de
     un número fijo que se desincroniza. */
  .tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;flex-wrap:nowrap;position:sticky;top:var(--header-h,61px);z-index:15;background:var(--surface)}
  .tabs button{background:transparent;color:var(--muted);border:none;border-bottom:2px solid transparent;border-radius:0;padding:8px 14px;margin:0;font-weight:500;min-height:38px;flex-shrink:0;white-space:nowrap}
  .tabs button:hover{background:transparent;color:var(--ink)}
  .tabs button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
  .banner{padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:13px;font-weight:500}
  .banner.err{background:var(--danger-bg);color:var(--danger)}
  .banner.ok{background:var(--ok-bg);color:var(--ok)}
  .muted{color:var(--muted);font-size:13px}
  .pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11px;font-weight:600;background:var(--accent-light);color:var(--accent-dark);border:none}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .hidden{display:none !important}
  .guessed{background:#fff8e1;border-color:#e0c46c !important}
  summary{cursor:pointer;list-style:none;min-height:40px;display:flex;align-items:center;color:var(--ink)}
  summary::-webkit-details-marker{display:none}
  summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:8px;flex-shrink:0;transition:transform .15s}
  details[open]>summary::after{transform:rotate(-135deg)}
  .pill.gray{background:var(--surface-2);color:var(--muted)}
  .pill.coral{background:var(--coral-light);color:var(--coral-dark)}
  .pill.ok{background:var(--ok-bg);color:var(--ok)}
  .trip-card{transition:box-shadow .15s,border-color .15s}
  .trip-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}


  /* franja de portada sobre la tarjeta de un viaje (lista del dashboard
     y cabecera del detalle) — Bloque L. Mismo criterio que .trip-hero-band
     (foto real + degradé oscuro para legibilidad), pero sin el contenido
     de accesos rápidos de esa clase, que es propia de la vista cliente. */
  .trip-cover-band{height:64px;margin:-1px -1px 12px -1px;border-radius:var(--radius) var(--radius) 0 0;background-size:cover;background-position:center}

  /* Bloque L — asistente de alta de viaje (modal centrado, 2 pasos).
     Mismo criterio visual sobrio que el resto del dashboard de
     vendedor/agencia (Bloque I): tarjeta simple, sin adornos. */
  .tw-backdrop{position:fixed;inset:0;background:rgba(10,16,26,.42);opacity:0;pointer-events:none;transition:opacity .15s;z-index:60}
  .tw-backdrop.open{opacity:1;pointer-events:auto}
  .tw-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);width:min(560px,92vw);max-height:88vh;overflow-y:auto;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:61;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;padding:22px}
  .tw-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .tw-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
  .tw-modal-head h2{margin:0;font-size:17px}
  .tw-step-label{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:14px}
  .tw-cover-picker{display:flex;align-items:center;gap:12px;margin-top:10px}
  .tw-cover-preview{width:88px;height:60px;flex-shrink:0;border-radius:var(--radius-sm);background-size:cover;background-position:center;border:1px solid var(--border)}
  .tw-cover-actions{display:flex;flex-direction:column;gap:6px}
  @media (prefers-reduced-motion:reduce){.tw-backdrop,.tw-modal{transition:none}}

  /* Bloque N — el mismo modal de "Agregar opción" se angosta a un panel
     fijo a la izquierda mientras la ventana de navegación externa (real,
     window.open, no un iframe) ocupa el resto de la pantalla — prioriza
     espacio de navegación, no es un 50/50. Solo tiene sentido en
     desktop (ver gate de ancho en options-pendientes.js). */
  .cf-modal.nav-mode{top:0;left:0;transform:none;width:380px;max-width:380px;height:100vh;max-height:100vh;border-radius:0;box-shadow:var(--shadow-md)}
  .cf-modal.nav-mode.open{transform:none}
  #cfCropCanvas{display:block}

  /* Itinerario en 3 niveles (Destino > Día > Actividad) — el único inset
     horizontal real lo pone el destino (.dest-card-body); día es solo un
     separador con su propio summary, sin padding lateral propio, para que
     las tarjetas de actividad no se vayan angostando en cada nivel (antes
     cada uno sumaba su propio padding y terminaban "encogidas" adentro). */
  .dest-card-body{padding:8px;background:var(--surface)}
  /* Tarjeta de día — 2 líneas (pedido explícito), con un tono de fondo
     clarito ligado al color del destino (o al color que el usuario le
     haya puesto a mano desde el menú ⋮). El fondo va por style inline
     (depende de datos), acá solo la tipografía/spacing. */
  .day-card{border:none;box-shadow:none;border-radius:var(--radius-sm);margin-bottom:8px;padding:0;position:relative;overflow:hidden}
  .day-card summary{padding:10px 40px 10px 12px;border-bottom:1px solid transparent}
  .day-card[open]>summary{border-bottom-color:rgba(20,30,45,.08)}
  .day-card-lines{display:flex;flex-direction:column;gap:2px;min-width:0}
  .day-line1{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .day-line2{font-size:11.5px;color:var(--muted);font-weight:600}
  .day-card-body{padding:8px 12px 10px}
  .day-card-editrow{display:flex;gap:8px;align-items:center;padding:0 12px 10px;flex-wrap:wrap}

  /* Barra horizontal de días (pedido explícito) — debajo del menú de
     pestañas, toca un día para saltar a esa sección del itinerario;
     se autoresalta solo con el día visible en pantalla (scrollspy, ver
     wireDayScrollspy). */
  /* Sticky debajo de las pestañas (pedido explícito) — mismo mecanismo
     que .tabs, con --tabs-h sumado a --header-h. touch-action:pan-x +
     overscroll-behavior-x:contain son el fix real del bug de scroll
     "rebotando" sin bajar: sin esto, un scroll vertical que arranca
     arriba de este riel horizontal puede quedar atrapado tratando de
     scrollearlo a ÉL en vez de la página — es el bug clásico de un
     carrusel horizontal adentro de una página que scrollea vertical. */
  .day-scrollbar{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;padding:2px 2px 10px;margin-bottom:4px;position:sticky;top:calc(var(--header-h,61px) + var(--tabs-h,45px));z-index:14;background:var(--bg)}
  .day-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:44px;min-height:44px;padding:4px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-family:inherit;cursor:pointer}
  .day-chip-num{font-size:15px;font-weight:800;line-height:1}
  .day-chip-mon{font-size:10px;text-transform:uppercase;letter-spacing:.3px}
  .day-chip.active{border-color:var(--accent);background:var(--accent-light);color:var(--accent-dark)}
  .cat-icon{font-size:14px}
  .trip-card.clickable-card{cursor:pointer}

  /* Evento — fila compacta de 2 líneas (Fase H: reemplaza la tarjeta con
     acordeón por una fila + popup con el detalle completo). Hora + punto
     sobre una línea vertical continua a la izquierda; el ::before de cada
     fila se apoya contra la siguiente porque no hay gap entre ellas. Ver
     nota de left negativo más abajo — mismo truco que ya usábamos. */
  .ev-row{position:relative;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:7px;padding:14px 6px 14px 60px;margin:0;border-bottom:1px solid var(--border-strong);cursor:pointer;background:none;text-align:left;font-family:inherit;color:inherit}
  .ev-row:last-child{border-bottom:none}
  .ev-row:active,.ev-row:hover{background:var(--surface-2)}
  /* Corregido: "left" en un hijo position:absolute NO se mueve por el
     padding del ancestro posicionado (el padding-box coincide con el
     border-box cuando no hay borde propio) — son valores POSITIVOS
     normales, contados desde el borde izquierdo real de .ev-row. La
     versión anterior con valores negativos (creyendo que había que
     "descontar" el padding) estaba mal — por eso la hora no se veía,
     quedaba ~60px afuera de la pantalla. Verificado en vivo con
     getBoundingClientRect antes de este fix. */
  .ev-row::before{content:'';position:absolute;left:45px;top:0;bottom:0;width:2px;background:var(--accent-light)}
  .ev-time{position:absolute;left:0;top:15px;width:38px;text-align:right;font-weight:800;color:var(--accent-dark);font-size:12.5px;line-height:1}
  .ev-dot{position:absolute;left:41px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);z-index:1}
  .ev-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .ev-line1{display:flex;align-items:center;gap:7px}
  .ev-name{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ev-line2{font-size:11.5px;color:var(--muted);font-weight:600;display:flex;gap:6px;align-items:center;justify-content:space-between;min-width:0}
  .ev-line2 .pill{flex-shrink:0}
  .ev-line2>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

  /* Arrastre para reordenar dentro de un día (Bloque C, punto 3) — el
     agarradero es su propio elemento (no toda la fila) para no pelearle
     al tap normal que abre el popup; touch-action:none es lo que le
     permite arrastrarse sin que el navegador intente scrollear la
     página con el mismo gesto (mismo truco que .ev-sheet-grab). Un
     evento con horario fijo no tiene agarradero — un candado en su
     lugar, para que quede claro por qué no se puede mover. */
  .ev-row.draggable{padding-right:38px}
  .ev-row-draghandle{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--muted);touch-action:none;cursor:grab;font-size:18px}
  .ev-row-fixedlock{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.55}
  /* Mientras se arrastra, la fila sale del flujo normal (position:fixed,
     medido a partir de su propio getBoundingClientRect antes de
     cambiarlo) y un placeholder ocupa su lugar — evita el "doble
     espacio" de dejarla en flujo normal y solo desplazarla con
     transform. */
  .ev-row-dragging{background:var(--surface);box-shadow:var(--shadow-md);border-radius:var(--radius-sm);opacity:.95}
  .ev-row-placeholder{background:var(--surface-2);border:2px dashed var(--border);border-radius:var(--radius-sm);margin:2px 6px;box-sizing:border-box}

  /* Popup de detalle del evento — un solo elemento reusado para todos los
     eventos (se rellena al abrir), en vez de uno por fila. */
  .ev-sheet-backdrop{position:fixed;inset:0;background:rgba(10,16,26,.42);opacity:0;pointer-events:none;transition:opacity .18s;z-index:50}
  .ev-sheet-backdrop.open{opacity:1;pointer-events:auto}
  .ev-sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--shadow-md);transform:translateY(100%);transition:transform .22s cubic-bezier(.32,.72,0,1);z-index:51;max-height:88vh;display:flex;flex-direction:column}
  .ev-sheet.open{transform:translateY(0)}
  /* La barrita visual mide 4px, pero el área táctil real es todo este
     bloque (padding vertical) — 4px solo sería imposible de agarrar con
     el dedo. touch-action:none: este elemento SOLO sirve para arrastrar
     hacia abajo, no tiene que pelearle al scroll de la página. */
  .ev-sheet-grab{width:100%;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
  .ev-sheet-grab::before{content:'';width:36px;height:4px;border-radius:2px;background:var(--border-strong)}
  .ev-sheet-body{overflow-y:auto;padding:6px 18px 22px}
  .ev-sheet-row{display:flex;gap:9px;padding:10px 0;border-top:1px solid var(--border);font-size:13.5px}
  .ev-sheet-row .k{width:20px;flex-shrink:0;text-align:center}
  .ev-sheet-row .v{color:var(--ink);line-height:1.45}
  .ev-sheet-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
  .ev-sheet-actions button,.ev-sheet-actions a{font-family:inherit;font-weight:700;font-size:13.5px;padding:11px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:8px;text-decoration:none;min-height:0}
  .ev-sheet-actions button:hover,.ev-sheet-actions a:hover{background:var(--surface-2)}
  .ev-sheet-actions button.danger{color:var(--coral-dark);border-color:var(--coral-light)}

  /* barra de navegación inferior — fija, estilo app nativa (iOS/Android
     tab bar), pensada para el wrapping futuro con Capacitor. Solo se usa
     por ahora en la vista de cliente (ver #clBottomNav) */
  .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border);display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .bottom-nav button{position:relative;flex:1;background:transparent;color:var(--muted);border:none;border-radius:var(--radius-sm);margin:0;min-height:56px;padding:4px;font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
  .bottom-nav button:hover{background:var(--surface-2)}
  .bottom-nav button:active{transform:none}
  .bottom-nav button.active{color:var(--accent)}
  .bottom-nav button .icon{width:22px;height:22px}
  .bottom-nav button .navDot{position:absolute;top:4px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--coral)}

  /* Escritorio (Fase F): la barra de navegación inferior de mobile se
     reusa entera como pestañas arriba del contenido — mismo HTML, mismos
     handlers de JS, solo cambia la posición/forma vía CSS. La tarjeta de
     viaje gana una franja de color + accesos rápidos que en mobile no se
     ven (ahí ya funciona bien tal como quedó en la Fase D). */
  @media (min-width:768px){
    main.with-bottom-nav{padding-bottom:20px}
    #clientView{display:flex;flex-direction:column}
    #clientView .bottom-nav{order:-1;position:static;justify-content:center;gap:6px;border-top:none;border-bottom:1px solid var(--border);padding:0 0 14px;margin-bottom:22px;background:transparent}
    #clientView .bottom-nav button{flex:0 0 auto;flex-direction:row;gap:8px;min-height:0;padding:10px 22px;font-size:14px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
    #clientView .bottom-nav button.active{background:var(--accent-light);color:var(--accent-dark)}
    .trip-hero-band{display:flex !important}
    .cat-picker{grid-template-columns:repeat(3,1fr)}
    .fab-standalone{bottom:calc(20px + env(safe-area-inset-bottom))}
  }
  .trip-hero-band{display:none;margin:-1px -1px 12px -1px;padding:16px 18px;border-radius:var(--radius) var(--radius) 0 0;color:#fff}
  .trip-hero-band .trip-hero-quick{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  .trip-hero-band .trip-hero-quick button{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.4);min-height:34px;padding:0 14px;font-size:12px;margin:0;backdrop-filter:blur(2px)}
  .trip-hero-band .trip-hero-quick button:hover{background:rgba(255,255,255,.3)}