.ac-res-page {
    --ac-black: #161311;
    --ac-sand: #F3EBDD;
    --ac-sand-panel: #FFFFFF;
    --ac-terracotta: #B54A2C;
    --ac-terracotta-dark: #9A3D22;
    --ac-turquoise: #2E7268;
    --ac-gold: #C89B3C;
    --ac-line: #E4D9C4;

    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--ac-sand);
    color: var(--ac-black);
    min-height: 100vh;
    /* deja espacio para tu nav flotante inferior de la PWA */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ac-res-page * { box-sizing: border-box; }
.ac-res-page h1,
.ac-res-page .ac-title { font-family: 'Anton', 'Work Sans', sans-serif; }

/* ===== NAV ===== */
.ac-nav {
    background: var(--ac-black);
    color: var(--ac-sand);
    padding-top: env(safe-area-inset-top, 0);
}
.ac-nav-inner {
    max-width: 1280px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 40px;
}
.ac-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ac-sand); }
.ac-logo-img { height: 34px; width: auto; display: block; }
.ac-logo-text { font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 1px; }
.ac-logo-text strong { color: var(--ac-gold); }

.ac-nav-links { flex: 1; }
.ac-nav-links-list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.ac-nav-links-list li { display: contents; }
.ac-nav-links-list a { color: #C9C2B6; text-decoration: none; font-size: 14.5px; font-weight: 500; }
.ac-nav-links-list a:hover, .ac-nav-links-list li.current-menu-item > a { color: var(--ac-sand); }

.ac-nav-actions { display: flex; align-items: center; gap: 16px; }
.ac-nav-hello { font-size: 14px; color: #C9C2B6; }
.ac-btn-ghost { color: var(--ac-sand); text-decoration: underline; font-size: 14.5px; }
.ac-btn-primary-sm {
    background: var(--ac-sand); color: var(--ac-black); padding: 9px 20px;
    border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px;
}

/* ===== SUBBAR ===== */
.ac-subbar { border-bottom: 1px solid var(--ac-line); background: var(--ac-sand-panel); }
.ac-subbar-inner {
    max-width: 1280px; margin: 0 auto; padding: 20px 24px;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.ac-subbar-title { font-family: 'Anton', sans-serif; font-size: 22px; }
.ac-subbar-links-list { display: flex; gap: 24px; flex-wrap: wrap; overflow-x: auto; list-style: none; margin: 0; padding: 0; }
.ac-subbar-links-list li { display: contents; }
.ac-subbar-links-list a { color: #6B6155; text-decoration: none; font-size: 14px; white-space: nowrap; }
.ac-subbar-links-list li.current-menu-item > a { color: var(--ac-terracotta); font-weight: 600; border-bottom: 2px solid var(--ac-terracotta); padding-bottom: 4px; }

/* ===== MAIN ===== */
.ac-main-inner {
    max-width: 1280px; margin: 0 auto; padding: 28px 24px 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
}

.ac-main-inner--single {
    grid-template-columns: 1fr;
    max-width: 640px;
}

.ac-city { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.ac-city-change { color: var(--ac-terracotta); text-decoration: underline; margin-left: 4px; }

.ac-title { font-size: 38px; margin: 6px 0 22px; line-height: 1.05; }

.ac-field-group {
    background: var(--ac-sand-panel); border: 1px solid var(--ac-line); border-radius: 12px;
    overflow: hidden;
}
.ac-field {
    display: flex; align-items: center; gap: 12px; padding: 15px 16px;
    border-bottom: 1px solid var(--ac-line); position: relative;
}
.ac-field:last-child { border-bottom: none; }
.ac-field input {
    border: none; outline: none; flex: 1; font-size: 15px; background: transparent; color: var(--ac-black);
    font-family: inherit; min-height: 24px;
}
.ac-field input::placeholder { color: #9A8F7E; }
.ac-field-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--ac-turquoise); }
.ac-dot-destino { background: var(--ac-terracotta); border-radius: 3px; }
.ac-locate {
    border: none; background: none; cursor: pointer; padding: 8px;
    display: flex; align-items: center; justify-content: center;
}
.ac-locate.is-loading { opacity: 0.5; pointer-events: none; }

.ac-datetime { display: flex; gap: 12px; margin-top: 14px; }
.ac-dt-field { flex: 1; }
.ac-dt-label { display: block; font-size: 13px; color: #6B6155; margin-bottom: 6px; }
.ac-dt-box {
    display: flex; align-items: center; gap: 8px; background: var(--ac-sand-panel);
    border: 1px solid var(--ac-line); border-radius: 10px; padding: 11px 14px;
}
.ac-dt-box select {
    border: none; background: transparent; font-size: 14.5px; flex: 1; outline: none;
    font-family: inherit; color: var(--ac-black); -webkit-appearance: none; appearance: none;
}

.ac-suggestions { margin-top: 26px; }
.ac-suggestions-title { font-size: 14px; color: #6B6155; margin-bottom: 10px; }
.ac-suggestions ul { list-style: none; margin: 0; padding: 0; }
.ac-suggestion {
    display: flex; align-items: flex-start; gap: 12px; padding: 13px 4px;
    border-bottom: 1px solid var(--ac-line); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ac-suggestion:hover .ac-suggestion-text strong,
.ac-suggestion:active .ac-suggestion-text strong { color: var(--ac-terracotta); }
.ac-sun-mark { flex-shrink: 0; margin-top: 2px; }
.ac-suggestion-text { font-size: 14px; color: #6B6155; line-height: 1.5; }
.ac-suggestion-text strong { display: block; color: var(--ac-black); font-size: 15px; font-weight: 600; }

.ac-btn-primary {
    background: var(--ac-terracotta); color: #fff; border: none; padding: 15px 26px;
    border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s;
    min-height: 48px;
}
.ac-btn-primary:hover { background: var(--ac-terracotta-dark); }
.ac-btn-block { width: 100%; margin-top: 24px; }

/* ===== MAP ===== */
.ac-map-col { min-height: 460px; position: relative; }
.ac-map {
    position: relative; height: 100%; min-height: 460px; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--ac-line); background: #EDE3D0;
}
.ac-map-btn-ubicacion {
    position: absolute; top: 16px; left: 16px; z-index: 10;
    width: 42px; height: 42px; border-radius: 50%; border: none;
    background: #fff; color: var(--ac-turquoise); box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ac-map-btn-ubicacion:active { background: var(--ac-sand); }
.ac-map-btn-ubicacion.is-cargando { color: #C9BFA9; pointer-events: none; }

/* ===== CONFIRMACIÓN DE VIAJE (llega desde el botón Reservar del mapa) ===== */
.ac-confirm-card {
    background: var(--ac-sand-panel); border: 1px solid var(--ac-line); border-radius: 16px;
    padding: 20px; box-shadow: 0 10px 30px rgba(22,19,17,0.06); position: relative;
}
.ac-confirm-badge {
    display: inline-block; background: var(--ac-black); color: var(--ac-gold);
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.ac-confirm-map {
    width: 100%; height: auto; border-radius: 12px; margin-bottom: 18px; display: block;
    border: 1px solid var(--ac-line);
}

/* Puntos de ruta (A / paradas / B) */
.ac-confirm-trip { margin-bottom: 6px; }
.ac-confirm-point { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.ac-confirm-point-dot {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 12px;
    font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.ac-confirm-dot-a { background: var(--ac-turquoise); }
.ac-confirm-dot-b { background: var(--ac-terracotta); }
.ac-confirm-dot-stop { background: var(--ac-gold); }
.ac-confirm-point-text { display: flex; flex-direction: column; }
.ac-confirm-point-label { font-size: 12px; color: #6B6155; margin-bottom: 2px; }
.ac-confirm-point-text a { color: var(--ac-black); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.ac-confirm-point-text a:hover { text-decoration: underline; color: var(--ac-terracotta); }

.ac-stops-list { margin-left: 38px; }
.ac-stop-row {
    display: flex; align-items: center; gap: 8px; margin: 6px 0;
    background: var(--ac-sand); border: 1px solid var(--ac-line); border-radius: 8px; padding: 6px 10px;
}
.ac-stop-input {
    flex: 1; border: none; background: transparent; outline: none; font-size: 14px;
    font-family: inherit; color: var(--ac-black);
}
.ac-stop-remove { border: none; background: none; color: #9A8F7E; font-size: 16px; cursor: pointer; padding: 2px 4px; }
.ac-stop-remove:hover { color: #B3261E; }

.ac-add-stop {
    margin: 4px 0 12px 38px; background: none; border: none; color: var(--ac-turquoise);
    font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 4px 0;
}
.ac-add-stop:hover { text-decoration: underline; }

/* Stats: distancia / tiempo / precio */
.ac-confirm-stats {
    display: flex; gap: 10px; margin: 16px 0 4px; padding: 14px 0;
    border-top: 1px solid var(--ac-line); border-bottom: 1px solid var(--ac-line);
}
.ac-confirm-stat { flex: 1; text-align: center; }
.ac-confirm-stat span { display: block; font-size: 17px; font-weight: 700; color: var(--ac-black); }
.ac-confirm-stat small { font-size: 11.5px; color: #6B6155; }
.ac-confirm-stat-price span { color: var(--ac-terracotta); font-size: 20px; }

.ac-confirm-divider { display: none; }
.ac-confirm-section-title { font-size: 13px; font-weight: 700; color: var(--ac-black); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.ac-confirm-hint { font-size: 12.5px; color: #6B6155; margin: 6px 2px 0; }

/* Aviso de revisión */
.ac-confirm-notice {
    display: flex; align-items: flex-start; gap: 10px; background: #FBF3DE;
    border: 1px solid #EBD8A0; border-radius: 10px; padding: 12px 14px; margin: 16px 0;
    font-size: 13px; color: #6B5A2A; line-height: 1.5;
}
.ac-confirm-notice svg { flex-shrink: 0; margin-top: 1px; }

.ac-confirm-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.ac-confirm-status { margin-top: 12px; font-size: 14px; text-align: center; min-height: 1.2em; }
.ac-confirm-status.is-success { color: var(--ac-turquoise); font-weight: 600; }
.ac-confirm-status.is-error { color: #B3261E; font-weight: 600; }

/* ===== PROMO ===== */
.ac-promo {
    max-width: 1280px; margin: 0 auto 32px; padding: 16px 24px;
    display: flex; align-items: center; gap: 12px;
    background: #E8F0EC; border-radius: 10px; font-size: 14px;
}
.ac-promo p { margin: 0; flex: 1; }
.ac-promo-close { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--ac-black); padding: 4px 8px; }

/* ===== MODO PWA INSTALADA =====
   Si ya tienes un nav flotante inferior en la PWA, ocultamos los links
   del top-nav aquí para no duplicar navegación, y dejamos solo logo + sesión. */
@media (display-mode: standalone) {
    .ac-nav-links { display: none; }
    .ac-res-page { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .ac-nav-links { display: none; }
    .ac-main-inner { grid-template-columns: 1fr; }
    .ac-map-col { min-height: 260px; }
    .ac-map { min-height: 260px; }
    .ac-title { font-size: 30px; }
}

@media (max-width: 480px) {
    .ac-nav-inner, .ac-subbar-inner, .ac-main-inner { padding-left: 16px; padding-right: 16px; }
    .ac-datetime { flex-direction: column; }
}