/* ============================================================
   ALMAS EN RUTA — Portal del Viajero y Panel Admin
   Mismo lenguaje visual que la portada por destinos (destinos.css):
   crema, tarjetas blancas sin bordes, píldoras, Inter / Inter Tight.
   Capa encima de components.css y command-center.css: no los modifica.
   Todas las reglas van dentro de :is(#view-login, #view-traveler,
   #view-admin-login, #view-admin, #view-trip-detail): la prioridad de id
   gana a las reglas viejas sin usar !important.
   ============================================================ */

/* ── 1. Variables: tipografía, radios y sombras (alcanza también a los
        estilos escritos en línea que usan var(--font-display), etc.) ── */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) {
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --shadow-sm: 0 1px 2px #0F1E3C0D;
  --shadow-md: 0 10px 30px #13233F14;
  --shadow-lg: 0 18px 40px #13233F1F;
  --line-height: 1.55;
  --letter-spacing: normal;
  --pa-ink: #0F1E3C;
  --pa-navy: #1A3A5C;
  --pa-gold: #C9974A;
  --pa-gold-light: #E4C07A;
  --pa-gold-text: #8A6424;
  --pa-gold-deep: #A0732B;
  --pa-muted: #5F6672;
  --pa-line: #E5DDD0;
  --pa-cream: #FAF8F4;
  --pa-tint: #0F1E3C14;
  --pa-lattice: none;
  background: var(--pa-cream);
  color: var(--pa-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) h1, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) h2, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) h3, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) h4 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.1; color: var(--pa-ink) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) p { color: var(--pa-muted) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) :focus-visible { outline: 3px solid var(--pa-gold); outline-offset: 3px; border-radius: 10px }

.pa-eyebrow { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pa-muted) }
.pa-eyebrow--on { color: #FFFFFFC7 }

/* ── 2. Barra superior: translúcida, pestañas en píldora ── */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-bar { position: sticky; top: 0; z-index: 40; background: #FAF8F4E6; -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 #0F1E3C0F; padding: 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-bar-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px max(16px, env(safe-area-inset-left, 0px)) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-bar-title { font: 800 1rem var(--font-display); letter-spacing: -.02em; color: var(--pa-ink); display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; white-space: nowrap }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-bar-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pa-gold) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; margin: 0; background: none; border: 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs::-webkit-scrollbar { display: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; color: #0F1E3CB8; font: 600 .9rem var(--font-body); cursor: pointer; transition: color .25s ease; margin: 0; box-shadow: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button svg { width: 16px; height: 16px; opacity: .8 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pa-tint); opacity: 0; transform: scale(.82); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); z-index: -1 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button:hover { color: var(--pa-ink); background: transparent }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button:hover::before { opacity: 1; transform: scale(1) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button.active { color: var(--pa-gold-text); background: transparent; border: 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button.active::before { opacity: 1; transform: scale(1); background: #C9974A24 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button.active::after { display: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; background: transparent; border: 0; border-radius: 999px; padding: 9px 14px; color: var(--pa-ink); font: 600 .9rem var(--font-body); cursor: pointer; transition: background-color .25s ease; box-shadow: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2, .8, .2, 1) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet:hover { background: var(--pa-tint); color: var(--pa-ink) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet:hover svg { transform: translateX(2px) }

/* ── 3. Contenido ── */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-body { max-width: 780px; margin: 0 auto; padding: 26px max(16px, env(safe-area-inset-left, 0px)) 72px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-body { max-width: 1040px; margin: 0 auto; padding: 26px max(16px, env(safe-area-inset-left, 0px)) 72px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-hello { display: flex; align-items: center; gap: 18px; margin: 6px 0 24px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-hello h1 { font-size: clamp(2rem, 5.4vw, 3rem); font-weight: 800; letter-spacing: -.03em; margin: 4px 0 10px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-hello h1 em { font-style: normal; color: var(--pa-gold-deep) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-points { display: inline-flex; align-items: center; gap: 7px; background: #C9974A1F; color: var(--pa-gold-text); border: 0; border-radius: 999px; padding: 6px 12px; font: 700 .82rem var(--font-body) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-points svg { width: 15px; height: 15px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar { position: relative; flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: linear-gradient(150deg, #0E1E36, #1A3A5C 60%, #2A5378); color: #fff; font: 800 1.5rem var(--font-display); display: grid; place-items: center; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar > span { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar img { width: 100%; height: 100%; object-fit: cover }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar i { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--pa-gold); color: var(--pa-ink); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--pa-cream); font-style: normal }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar i svg { width: 14px; height: 14px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar:hover { transform: scale(1.04); box-shadow: 0 12px 26px -14px #0F1E3CB3 }

/* Tarjetas: blancas, redondeadas, sin bordes, sombra suave */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .login-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-traveler-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-comprobante-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .meeting-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-upload-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-log-card {
  background: #FFFFFF; border: 0; border-radius: 26px; box-shadow: 0 10px 30px #13233F14; padding: 26px; margin-bottom: 14px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card h3, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-body h3 { font: 800 1.3rem var(--font-display); letter-spacing: -.02em; color: var(--pa-ink) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--gold { background: linear-gradient(160deg, #FFFFFF 0%, #FDF6E9 100%) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank { background: linear-gradient(150deg, #0E1E36, #1A3A5C 60%, #2A5378); color: #fff }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank h3, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .bank-info-value { color: #fff }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .bank-info-label, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank p { color: #FFFFFFB8 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .gold-divider { background: var(--pa-gold-light) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .bank-info-row { border-color: #FFFFFF1F }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .gold-divider { height: 2px; width: 36px; border-radius: 2px; background: var(--pa-gold); margin: 8px 0 16px }

/* Botones en píldora */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn { border-radius: 999px; font: 700 .95rem var(--font-body); letter-spacing: 0; transition: background-color .25s ease, box-shadow .3s ease, transform .2s ease, filter .25s ease; box-shadow: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn svg { transition: transform .3s cubic-bezier(.2, .8, .2, 1) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn:active { transform: scale(.97) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-primary { background: linear-gradient(135deg, #C08D38, #956A20); color: #fff; border: 0; text-shadow: 0 1px 1px #00000026 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-primary:hover { background: linear-gradient(135deg, #C08D38, #956A20); filter: brightness(1.06); box-shadow: 0 10px 22px -12px #956A20; transform: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-primary:hover svg { transform: translateX(3px) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-outline { background: transparent; color: var(--pa-ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--pa-line) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-outline:hover { background: var(--pa-tint); box-shadow: inset 0 0 0 1.5px transparent; color: var(--pa-ink) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-whatsapp-full { border-radius: 999px; font-family: var(--font-body); font-weight: 700; box-shadow: none; transition: filter .25s ease, box-shadow .3s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-whatsapp-full:hover { filter: brightness(1.05); box-shadow: 0 10px 22px -12px #25D366 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .doc-btn { border-radius: 999px; font-family: var(--font-body); font-weight: 700; transition: filter .25s ease, background-color .25s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .doc-btn:hover { filter: brightness(1.06) }

/* Campos */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .form-label, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-label { display: block; font: 700 .76rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pa-muted); margin: 14px 0 6px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .form-input, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) select.form-input, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) textarea.form-input, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-price-input { width: 100%; font: 500 1rem var(--font-body); padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--pa-line); background: var(--pa-cream); color: var(--pa-ink); box-shadow: none; transition: border-color .2s ease, background-color .2s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .form-input:focus, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-price-input:focus { outline: none; border-color: var(--pa-gold); background: #FFFFFF; box-shadow: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-check { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: .92rem; color: var(--pa-muted); cursor: pointer; user-select: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-check input { width: 18px; height: 18px; accent-color: var(--pa-gold); cursor: pointer; flex-shrink: 0 }

/* Etiquetas de estado, barras de avance y avisos */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .status-badge { border-radius: 999px; font: 700 .74rem var(--font-body); letter-spacing: .02em; padding: 5px 11px; border: 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .progress-bar { height: 8px; border-radius: 999px; background: #EFE9DE; border: 0; overflow: hidden }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .progress-bar-fill { border-radius: 999px; background: linear-gradient(90deg, #D4A24C, #B88530) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .alert-error, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .alert-success, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .alert-warning, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .alert-info { border-radius: 14px; border: 0; font-size: .92rem }

/* Resumen de pago y estadísticas: bloques crema sin bordes */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-stat, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-item { background: var(--pa-cream); border: 0; border-radius: 18px; box-shadow: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .payment-summary-item { background: transparent; border: 0; box-shadow: none; padding: 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .payment-summary-item .amount, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-stat-value, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-item strong, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .points-value { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .payment-summary-item .label, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-stat-label, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-label { font: 700 .72rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pa-muted) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-stat-emoji, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .points-icon, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .boleto-icon, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card-icon, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-item-icon, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-icon { border-radius: 14px; background: #C9974A1F; color: var(--pa-gold-text); border: 0 }

/* Cuenta regresiva del viaje */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .countdown-card { border-radius: 26px; overflow: hidden; box-shadow: 0 10px 30px #13233F14 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .countdown-mini-item { background: #0F1E3C66; border-radius: 16px; border: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .countdown-mini-value { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums }

/* Listas: extras, documentos, boletos, comprobantes */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card { background: #FFFFFF; border: 0; border-radius: 22px; box-shadow: 0 10px 30px #13233F14; transition: transform .25s ease, box-shadow .25s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px #13233F1F }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card.selected { box-shadow: 0 0 0 2px var(--pa-gold), 0 10px 30px #13233F14 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card-name, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .doc-name, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .boleto-type, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-traveler-name, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .meeting-title { font-family: var(--font-body); font-weight: 700; color: var(--pa-ink) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-category-title { font: 800 1.15rem var(--font-display); letter-spacing: -.02em; border: 0; padding-left: 0; color: var(--pa-ink) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .doc-row, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .boleto-item, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-item, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-meeting-row, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-row { border-color: #0F1E3C12 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-preview, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-upload-zone { border-radius: 18px }

/* Itinerario del viajero */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-itin-day-badge { border-radius: 999px; background: var(--pa-ink); font-family: var(--font-body); font-weight: 800 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-itin-day-city { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-itin-emoji { border-radius: 14px; background: #C9974A1F; border: 0 }

/* Panel admin: chips de filtro, menú de configuración y centro de mando */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav button, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) [data-trip-filter], :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-log-chip, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) [data-config-section] { border-radius: 999px; font-family: var(--font-body); font-weight: 700; border: 0; transition: background-color .25s ease, color .25s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-addon-tag, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .highlight-badge, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-tag { border-radius: 999px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-table-wrap { border-radius: 20px; border: 0; box-shadow: 0 10px 30px #13233F14; background: #FFFFFF }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-chat-layout { border-radius: 26px; border: 0; box-shadow: 0 10px 30px #13233F14; overflow: hidden; background: #FFFFFF }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-postura, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-hue-card { border-radius: 20px; border: 0; background: var(--pa-cream) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-errbox { border-radius: 26px; box-shadow: 0 10px 30px #13233F14; border: 0; background: #FFFFFF }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-code { border-radius: 14px }

/* ── 4. Pantallas de entrada (viajero y admin) ── */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 28px clamp(24px, 5vw, 64px) 56px; color: #FFFFFF; background: var(--pa-lattice), linear-gradient(150deg, #0E1E36 0%, #1A3A5C 60%, #2A5378 100%) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-copy h1 { color: #FFFFFF; font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 10px 0 16px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-copy h1 span { color: var(--pa-gold-light) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-copy p { color: #FFFFFFC7; font-size: 1.1rem; max-width: 34ch; margin: 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 14px; background: #FFFFFF1A; color: #FFFFFF; font: 600 .9rem var(--font-body); cursor: pointer; transition: background-color .25s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-back svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2, .8, .2, 1) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-back:hover { background: #FFFFFF2E }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-back:hover svg { transform: translateX(-3px) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-main { display: flex; align-items: center; justify-content: center; padding: 40px max(16px, env(safe-area-inset-left, 0px)) }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-card { width: 100%; max-width: 420px; background: #FFFFFF; border-radius: 28px; box-shadow: 0 18px 50px -20px #13233F40; padding: 34px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-card h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 10px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-card .alert-error { margin: 12px 0 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 18px; padding: 14px 20px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-submit svg { width: 18px; height: 18px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-help { margin: 18px 0 0; font-size: .9rem; color: var(--pa-muted); text-align: center }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-help a { color: var(--pa-gold-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #8A642466 }

/* ── 6. Ajustes finos ── */
/* La barra del portal se alinea con su columna de contenido */
#view-traveler .pa-bar-in { max-width: 1180px }
#view-traveler .pa-tabs { justify-content: center; justify-content: safe center }
#view-admin .pa-bar-in { max-width: 1180px }
/* Admin: once pestañas; en escritorio solo texto para que quepan, y
   degradado en los bordes cuando hay más para deslizar */
#view-admin .pa-tabs > button { padding: 8px 11px; font-size: .86rem }
@media (min-width: 961px) { #view-admin .pa-tabs > button svg { display: none } }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); padding-inline: 10px }
/* Datos para depósito: tarjeta oscura legible */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank { --text-muted: #FFFFFFB8; --text-secondary: #FFFFFFC7 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .bank-info-grid { background: #FFFFFF12; border: 0; border-radius: 18px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .bank-info-row:not(:last-child) { border-bottom: 1px solid #FFFFFF1A }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .bank-info-label { color: #FFFFFFB8 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .bank-info-value { color: #FFFFFF }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--bank .btn-whatsapp-full { margin-top: 6px }
/* Configuración: menú en píldoras horizontales */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; background: none; border: 0 }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav-btn { display: inline-flex; align-items: center; gap: 7px; width: auto; flex: 0 0 auto; background: #FFFFFF; color: var(--pa-ink); border: 0; border-radius: 999px; padding: 9px 16px; font: 700 .9rem var(--font-body); box-shadow: inset 0 0 0 1px var(--pa-line); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav-btn svg { width: 16px; height: 16px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav-btn:hover { background: var(--pa-tint); box-shadow: inset 0 0 0 1px transparent; transform: none }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav-btn.active { background: var(--pa-ink); color: #FFFFFF; box-shadow: none }

:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-pagehead { margin: 6px 0 20px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-pagehead h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; margin: 4px 0 6px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-pagehead p { margin: 0; font-size: 1.02rem }

/* Montos (total, abonado, pendiente): nunca se salen de la tarjeta */
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-item { min-width: 0; padding: 14px 8px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-value { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.05rem, 4.4vw, 1.45rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .payment-summary { gap: 10px }
:is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .payment-summary-item { min-width: 0 }
/* En pantallas táctiles no hay mouse: sin resaltado "pegado" tras tocar */
@media (hover: none) {
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button:not(.active)::before { opacity: 0 }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button:not(.active):hover { color: #0F1E3CB8 }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet:hover, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav-btn:not(.active):hover, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-outline:hover { background: transparent }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card:hover { transform: none }
}
@media (max-width: 600px) {
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stats-grid { gap: 6px }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-item { padding: 12px 4px }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-label { font-size: .62rem; letter-spacing: .06em }
}

/* ── 5. Celular ── */
@media (max-width: 820px) {
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth { grid-template-columns: 1fr; min-height: 0 }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-side { padding: 20px 22px 34px; gap: 26px }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-copy h1 { font-size: 2.5rem }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-copy p { font-size: 1rem }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-main { padding: 0 16px 48px; margin-top: -18px }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-card { padding: 26px 22px; border-radius: 24px }
}
@media (max-width: 600px) {
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-bar-in { padding: 8px 10px; gap: 4px }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button { padding: 9px 12px; font-size: .88rem }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet span, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-bar-title { display: none }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-hello { gap: 14px; margin-bottom: 18px }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar { width: 62px; height: 62px; font-size: 1.25rem }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-traveler-card, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-comprobante-card { padding: 20px; border-radius: 22px }
}
@media (prefers-reduced-motion: reduce) {
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button::before, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet svg, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn svg, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-back svg, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card { transition: none }
  :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card:hover, :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar:hover { transform: none }
}