:root{
  --azul-cielo:#64B5F6;--blanco:#FFF;--verde-menta:#A8E6CF;--arena:#F5E6CA;
  --azul-electrico:#027BFF;--naranja:#FFB74D;--azul-marino:#0D47A1;--gris-claro:#CFDBDC;--texto:#102A43;
  --leftcol-w: clamp(280px, 26vw, 550px);
  --map-h: 100px;--map-min-h: 100px; 
  --card-max: 560px; --card-min: 420px;
  --field-h: 48px;
  --card-bg: rgba(255,255,255,0.92);
  --topbar-bg: rgba(255,255,255,0.55);
}
/* Dark theme */
body.dark{--texto:#e5e7eb;--gris-claro:#374151;--card-bg:rgba(30,41,59,0.92);--topbar-bg:rgba(30,41,59,0.85);--azul-marino:#60a5fa}
body.dark .mountains{background:url('../images/fondo-dark.jpg') no-repeat center 65%;background-size:100% auto}
body.dark .mountains::after{background:rgba(0,0,0,0.3)}
body.dark .card,body.dark #panelIntro,body.dark .leftcol>div,body.dark .rightgrid>div{background:var(--card-bg)!important;color:var(--texto)}
body.dark .topbar{background:var(--topbar-bg);border-bottom-color:rgba(255,255,255,0.1)}
body.dark input,body.dark select,body.dark textarea{background:#1e293b;border-color:#475569;color:#e5e7eb}
body.dark input::placeholder,body.dark textarea::placeholder{color:#9ca3af}
body.dark label,body.dark .section-title{color:#93c5fd}
body.dark h1{color:#93c5fd}
body.dark .lead{color:#d1d5db}
body.dark .badge{background:rgba(96,165,250,0.2);color:#93c5fd}
body.dark .pill{background:#1e40af}
body.dark .foot{color:#fff!important}
body.dark .user-dropdown{background:#1e293b;border-color:#475569}
body.dark .user-dropdown-header{border-color:#475569}
body.dark .user-dropdown-name{color:#93c5fd}
body.dark .user-dropdown-email{color:#9ca3af}
body.dark .user-dropdown-item{color:#e5e7eb}
body.dark .user-dropdown-item:hover{background:#334155}
body.dark .user-dropdown-item.logout{color:#f87171}
body.dark .user-dropdown-item.logout:hover{background:#450a0a}
body.dark .details-card{background:#1e293b;border-color:#475569}
body.dark .as-panel{background:#1e293b;border-color:#475569;color:#e5e7eb}
body.dark .as-item{color:#fff!important}
body.dark .as-item *{color:#fff!important}
body.dark .as-item:hover{background:#334155}
body.dark .popover{background:#1e293b;border-color:#475569;color:#e5e7eb}
body.dark .popover .row{color:#e5e7eb}
body.dark .popover label{color:#e5e7eb}
body.dark .popover .num{background:#334155;border-color:#475569;color:#e5e7eb}
/* Validation styles */
.field-error{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,0.2)!important}
.field-error::placeholder{color:#fca5a5!important}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
.shake{animation:shake 0.4s ease-in-out}
.error-label{color:#ef4444!important;font-weight:600}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--texto);background:transparent;line-height:1.45;overflow-x:hidden;
  display:flex;flex-direction:column
}
main{flex:1 0 auto}
footer{flex-shrink:0}
.mountains{position:fixed;inset:0;z-index:-1;background:url('../images/fondo.jpg') no-repeat center center;background-size:cover}
.mountains::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,0.1)}
.mountains svg{display:none!important}
.topbar{
  position:fixed;inset:0 0 auto 0;height:80px;z-index:9999;
  display:flex;align-items:center;gap:12px;padding:0 20px;
  background:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(13,71,161,.08);
  backdrop-filter:saturate(160%) blur(10px);
  width:100%;
}
.topbar-spacer{flex:1}
.topbar-controls{display:flex;align-items:center;gap:8px;margin-right:12px}
.control-btn{
  width:40px;height:40px;border-radius:10px;border:1px solid rgba(13,71,161,0.15);
  background:rgba(255,255,255,0.8);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:18px;transition:all 0.2s;
}
.control-btn:hover{background:rgba(255,255,255,1);transform:scale(1.05)}
body.dark .control-btn{background:rgba(30,41,59,0.8);border-color:rgba(255,255,255,0.15);color:#e5e7eb}
body.dark .control-btn:hover{background:rgba(51,65,85,1)}
.user-menu{position:relative;display:flex;align-items:center;gap:8px}
.login-btn{
  display:block;padding:8px 16px;border-radius:12px;border:none;cursor:pointer;
  background:var(--azul-marino);color:#fff;font-weight:600;font-size:14px;
  transition:background .2s;white-space:nowrap;
}
.login-btn:hover{background:#1565C0}
.user-avatar{
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:2px solid var(--azul-marino);object-fit:cover;
  background:#e0e7ff;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--azul-marino);font-size:16px;
}
.user-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;min-width:200px;
  background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.15);
  border:1px solid rgba(13,71,161,.1);opacity:0;visibility:hidden;
  transform:translateY(-10px);transition:all .2s;z-index:10000;
}
.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.user-dropdown-header{padding:12px 16px;border-bottom:1px solid #e5e7eb}
.user-dropdown-name{font-weight:700;color:var(--azul-marino);font-size:14px}
.user-dropdown-email{font-size:12px;color:#6b7280;margin-top:2px}
.user-dropdown-item{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  color:var(--texto);font-size:14px;cursor:pointer;transition:background .15s;
  text-decoration:none;
}
.user-dropdown-item:hover{background:#f3f4f6}
.user-dropdown-item svg{width:18px;height:18px;color:#6b7280}
.user-dropdown-item.logout{color:#dc2626}
.user-dropdown-item.logout:hover{background:#fef2f2}
.logo{display:flex;align-items:center;background:none}
.logo img{display:block;height:69px;object-fit:contain}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;background:var(--azul-marino);color:#fff}
.wrap{max-width:1840px;margin:calc(80px + clamp(16px,4vw,28px)) auto clamp(20px,5vw,44px);padding:0 16px;overflow:visible}
.hero{display:grid;grid-template-columns:var(--leftcol-w) 1fr;gap:clamp(14px,2.6vw,22px);align-items:stretch;overflow:visible}
.leftcol{display:flex;flex-direction:column;gap:clamp(14px,2.6vw,22px)}
.rightgrid{display:flex;flex-direction:column;gap:clamp(14px,2.6vw,22px)}
.rightgrid>.card{flex:1;display:flex;flex-direction:column}
.rightgrid>.card>form{flex:1;display:flex;flex-direction:column;gap:10px}
#map,#mapReturn{flex:1}
#cardPrimary,#cardReturn{width:100%}
.hero.round{grid-template-columns:var(--leftcol-w) 1fr 1fr}
.hero.round .rightgrid{display:contents}
.hero.round #cardPrimary,.hero.round #cardReturn{display:flex;flex-direction:column}
.hero.round #cardPrimary>form,.hero.round #cardReturn>form{flex:1;display:flex;flex-direction:column;gap:10px}
@media(max-width:1400px){.hero.round{grid-template-columns:var(--leftcol-w) 1fr}.hero.round .rightgrid{display:flex;flex-direction:column}}
.card{
  background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(4px);
  border:1px solid rgba(13,71,161,.08);border-radius:22px;
  box-shadow:0 10px 30px rgba(16,42,67,.08);padding:clamp(14px,2.6vw,22px);
  position:relative;overflow:visible
}
h1{margin:.2em 0 .4em;font-size:clamp(22px,3.6vw,32px);color:var(--azul-marino);text-align:center}
p.lead{font-size:clamp(14px,2.1vw,18px);margin:0 0 6px;color:#1F3B57;max-width:58ch;text-align:justify}
form{display:grid;gap:10px;overflow:visible}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid2>*,.grid3>*{min-width:0}
@media (max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
label{font-size:13px;font-weight:700;color:#0D47A1}
input,select,textarea{
  width:100%;min-height:var(--field-h);
  padding:12px 13px;border-radius:14px;border:1px solid var(--gris-claro);
  background:#fff;font:inherit;transition:box-shadow .2s,border-color .2s;
  text-align:left;min-width:0;max-width:100%;color:var(--texto)
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul-electrico);box-shadow:0 0 0 4px rgba(2,123,255,.12)}
textarea{min-height:160px;resize:vertical}
input[type="date"],input[type="time"]{
  height:var(--field-h);
  -webkit-appearance:none;appearance:none;
  line-height:calc(var(--field-h) - 24px);
  padding-top:10px;padding-bottom:10px;
  font-size:16px;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{padding:0 2px;line-height:1.2}
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper{display:flex;align-items:center;height:100%}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{opacity:1;transform:scale(1.1)}
::placeholder{color:#6b7280;opacity:1}
.hint{font-size:12px;color:#476582}
.btn{padding:11px 14px;border-radius:14px;border:none;cursor:pointer;color:#fff;background:linear-gradient(90deg,var(--azul-electrico),#1263d6);font-weight:800;letter-spacing:.3px}
.btn.sec{background:linear-gradient(90deg,var(--naranja),#FF9800);color:#0f172a}
.btn.toggle{background:#e5f5eb;color:#0a3d2e;border:1px solid #bfe6cf}
.btn.toggle.active{background:#0a7a48;color:#fff;border-color:#0a7a48}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;justify-content:center}
.badge{padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(13,71,161,.1);color:#0D47A1;font-weight:700}
.section-title{font-size:20px;font-weight:900;color:#0D47A1;margin:4px 0 8px;text-align:center}
#map,#mapReturn{
  width:100%;min-height:365px;border-radius:18px;border:1px solid var(--gris-claro);
  background:#eef3f8;display:flex;align-items:center;justify-content:center;color:#5b6b7a
}
.foot{text-align:center;font-size:13px;margin:10px 0 20px;padding:0;color:#fff!important;font-weight:bold!important;text-shadow:0 2px 4px rgba(0,0,0,0.9)}
.readonly{background:#f9fafb}
.popover{
  position:fixed;z-index:999999;background:#fff;border:1px solid #e5e7eb;border-radius:14px;
  box-shadow:0 14px 34px rgba(16,42,67,.18);padding:12px;display:none;width:320px;max-width:min(92vw,420px)
}
.row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;gap:10px}
.counter{display:flex;align-items:center;gap:10px}
.btn-icon{width:36px;height:36px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;font-weight:900;cursor:pointer}
.btn-icon:active{transform:scale(.98)}
.apply{width:100%;margin-top:8px}
.num{width:72px;text-align:center}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.passenger-control .selector{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border:1px solid var(--gris-claro);border-radius:14px;background:#fff;cursor:pointer}
.passenger-control .summary{font-weight:700;color:#0f2a43}
.passenger-control .summary strong{font-weight:900}
.waypoints label{display:block;margin-bottom:4px}
#wpContainer,#wpContainerR{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:700px){#wpContainer,#wpContainerR{grid-template-columns:1fr}}
.waypoints .item{display:flex;align-items:center;gap:8px}
.waypoints .item input{flex:1;min-width:0}
.waypoints .remove{background:#fff;border:1px solid #e5e7eb;border-radius:10px;width:36px;height:42px;cursor:pointer}
.addwp{margin-top:6px;background:linear-gradient(90deg,#10b981,#059669)}
.map-pick-btn{display:inline-block;margin-top:4px;padding:4px 10px;font-size:12px;font-weight:600;color:#0D47A1;background:rgba(13,71,161,.08);border:1px solid rgba(13,71,161,.2);border-radius:8px;cursor:pointer;transition:all .2s}
.map-pick-btn:hover{background:rgba(13,71,161,.15)}
.map-pick-btn.active{background:#0D47A1;color:#fff;border-color:#0D47A1;animation:pulse-pick 1.5s infinite}
@keyframes pulse-pick{0%,100%{box-shadow:0 0 0 0 rgba(13,71,161,.4)}50%{box-shadow:0 0 0 6px rgba(13,71,161,0)}}
body.dark .map-pick-btn{color:#93c5fd;background:rgba(147,197,253,.1);border-color:rgba(147,197,253,.25)}
body.dark .map-pick-btn:hover{background:rgba(147,197,253,.2)}
body.dark .map-pick-btn.active{background:#2563eb;color:#fff;border-color:#2563eb}
.svc-block{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px}
.svc-item{display:flex;flex-direction:column;gap:6px}
.svc-title{font-weight:800;color:#0D47A1;text-align:center}
.svc-pill{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 10px;border:1px solid #e2e8f0;background:#fff;font-weight:800;box-shadow:0 6px 14px rgba(16,42,67,.06);border-radius:10px}
.details-card{border:1px solid var(--gris-claro);border-radius:14px;padding:14px;background:#fff;box-shadow:0 6px 14px rgba(16,42,67,.06)}
.wordcount{font-size:12px;color:#476582;margin-top:6px}
#svcIntro,#simula{text-align:center!important}
#extraDetails{resize:none;height:180px;min-height:180px;max-height:180px}
.share-frame .share{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.share-frame .hint{text-align:center}
.as-panel{
  position:absolute;z-index:2147483647;display:none;min-width:280px;max-width:520px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 14px 34px rgba(16,42,67,.18);overflow:auto;max-height:320px;contain:paint
}
.as-item{padding:10px 12px;cursor:pointer;display:flex;gap:8px;align-items:flex-start}
.as-item:hover{background:#f3f7fb}
.as-title{font-weight:700;color:#0f2a43;line-height:1.25}
.as-saved{border-bottom:1px solid #e5e7eb}
.as-saved:last-of-type{border-bottom:none}
.map-click-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(13,71,161,.9);color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;z-index:10;pointer-events:none;white-space:nowrap}
#map,#mapReturn{position:relative}
.map-pin-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:5;pointer-events:none;transition:transform .15s;font-size:36px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.map-pin-overlay.dragging{transform:translate(-50%,-115%) scale(1.15)}
.map-pin-dot{position:absolute;top:50%;left:50%;width:6px;height:6px;background:rgba(13,71,161,.5);border-radius:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none}
.map-confirm-bar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:8px;align-items:center}
.map-confirm-bar .map-addr-preview{background:rgba(255,255,255,.95);backdrop-filter:blur(6px);padding:6px 12px;border-radius:10px;font-size:12px;font-weight:600;color:#0f2a43;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.map-confirm-bar .map-confirm-btn{background:#0D47A1;color:#fff;border:none;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(13,71,161,.4);transition:background .2s}
.map-confirm-bar .map-confirm-btn:hover{background:#1565C0}
.map-confirm-bar .map-cancel-btn{background:rgba(239,68,68,.9);color:#fff;border:none;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer}
body.dark .map-confirm-bar .map-addr-preview{background:rgba(30,41,59,.95);color:#e5e7eb}
body.dark .map-pin-dot{background:rgba(147,197,253,.5)}
body.scrolling .card{backdrop-filter:none!important;box-shadow:0 8px 20px rgba(16,42,67,.06)!important}
body.scrolling .mountains svg{animation-play-state:paused}
.card,#panelDetails,#panelShare,#cardReturn{content-visibility:auto;contain-intrinsic-size:800px 600px;contain:layout paint}
@media (prefers-reduced-motion:reduce){.mountains svg{animation:none!important}}
@media(max-width:960px){
  .hero,.hero.round{display:flex;flex-direction:column;gap:16px;grid-template-columns:1fr}
  .leftcol,.rightgrid,.hero.round .rightgrid{display:contents}
  #panelIntro{order:1}#cardPrimary{order:2}#cardReturn{order:3}#panelDetails{order:4}#panelShare{order:5}
  #cardPrimary,#cardReturn,#panelIntro,#panelDetails,#panelShare{width:100%!important;max-width:100%!important;margin:0!important}
  .topbar{padding:0 12px;height:60px}
  .logo img{height:40px!important}
  .pill{display:none}
  .topbar-controls{gap:4px;margin-right:4px}
  .control-btn{width:36px;height:36px;font-size:15px}
  .user-dropdown{position:fixed!important;top:64px!important;right:12px!important;left:auto!important;min-width:220px;max-width:calc(100vw - 24px)}
  body.dark .mountains{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath d='M0,500 L0,280 C100,180 220,240 380,160 C540,80 660,180 820,120 C980,60 1100,160 1260,120 C1360,100 1440,150 1440,170 L1440,500Z' fill='%23162640' opacity='.45'/%3E%3Cpath d='M0,500 L0,340 C140,260 300,310 460,240 C620,170 780,260 940,220 C1100,180 1260,240 1440,260 L1440,500Z' fill='%23111d30' opacity='.7'/%3E%3Cpath d='M0,500 L0,390 C160,350 340,370 520,340 C700,310 880,350 1060,330 C1180,320 1340,360 1440,370 L1440,500Z' fill='%230a101c'/%3E%3C/svg%3E") no-repeat bottom center/100% 55%,radial-gradient(ellipse at 50% 100%,rgba(25,50,80,0.5) 0%,transparent 65%),linear-gradient(180deg,#060a12 0%,#0b1120 35%,#101b2e 65%,#0e1525 100%)!important}
  body.dark .mountains::after{background:none!important}
}

@media (max-width: 600px) {
    .topbar { padding: 0 8px; height: 56px; }
    .logo img { height: 36px !important; }
    .wrap { margin-top: 70px; padding: 0 8px; }
    .card { padding: 16px; border-radius: 12px; }
    h1 { font-size: 24px !important; line-height: 1.2; }
    .lead { font-size: 15px !important; }
    .grid2, .grid3, .svc-block { grid-template-columns: 1fr !important; gap: 12px; }
    input, select, textarea, .btn { min-height: 50px; font-size: 16px; }
    #map, #mapReturn { height: 250px !important; min-height: 250px; }
    .share { flex-direction: column; width: 100%; }
    .share .btn { width: 100%; text-align: center; }
    .passenger-control .selector, .grid2 > div > div { width: 100%; justify-content: center; }
    .btn.toggle { flex: 1; text-align: center; padding: 10px 4px; font-size: 13px; }
    /* User dropdown mobile */
    .user-dropdown { position: fixed !important; top: 60px !important; right: 8px !important; left: auto !important; width: auto !important; min-width: 220px; max-width: calc(100vw - 16px); }
    .control-btn { width: 36px; height: 36px; }
    /* Popover mobile - center on screen */
    .popover { left: 50% !important; transform: translateX(-50%); max-width: 90vw; }
    /* Touch-friendly buttons */
    .btn-icon { width: 44px; height: 44px; }
    .remove { min-width: 44px; min-height: 44px; }
    /* Badges scroll horizontal */
    .badges { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .badge { flex-shrink: 0; }
}

.card, .topbar, .wrap, .hero, .rightgrid, .leftcol{ max-width:100%; }
input, select, textarea, .btn, .svc-pill{ min-width:0; }
.lead, label, .section-title, .hint, .badge, .pill{ overflow-wrap:anywhere; word-break:break-word; }
.logo img{ max-width:none; height:46px !important; width: auto; max-height: 46px;}

.card,#panelIntro,.leftcol>div,.rightgrid>div{background:rgba(255,255,255,0.80)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
main{flex:0 0 auto!important}
.wrap{margin-bottom:0!important;padding-bottom:0!important}