/* ==========================================================================
   OrvianGo - estilos de las cuatro vistas: Inicio (visitante), Inicio
   (sesión iniciada), Iniciar sesión y Registrarse.

   Aislamiento: este archivo solo lo enlazan _LayoutOrvian y
   _LayoutOrvianAuth (partial _OrvianHead). Las demás páginas siguen usando
   _Layout con site.css y no cargan nada de lo que está acá. Además, las
   reglas globales cuelgan de body.og-site / body.og-auth.
   ========================================================================== */

/* ---------- Tipografías (autoalojadas en wwwroot/fonts/orviango) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/orviango/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/orviango/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/orviango/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/orviango/poppins-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/orviango/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/orviango/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/orviango/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/orviango/inter-latin-700-normal.woff2') format('woff2'); }

/* ---------- Identidad visual ---------- */
:root {
  --og-primary: #0B5D45;
  --og-primary-hover: #084936;
  --og-secondary: #18A66A;
  --og-secondary-hover: #138756;
  --og-lime: #B9F227;
  --og-bg: #F5F8F6;
  --og-card-bg: #FFFFFF;
  --og-text-dark: #17211D;
  --og-text-muted: #53645D;
  --og-border: #E2EAE5;
  --og-primary-subtle: #E6F3EE;
  --og-secondary-subtle: #E2F7EE;
  --og-lime-subtle: #F3FDE4;
  --og-danger: #BA1A1A;

  /* Alias que usa el markup de la variante con sesión iniciada */
  --og-green-primary: var(--og-primary);
  --og-green-secondary: var(--og-secondary);
  --og-lime-accent: var(--og-lime);
}

/* ==========================================================================
   BASE COMÚN
   ========================================================================== */
body.og-site,
body.og-auth {
  background-color: var(--og-bg);
  color: var(--og-text-dark);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 0;
}

.og-site h1, .og-site h2, .og-site h3, .og-site h4, .og-site h5, .og-site h6,
.og-site .display-5, .og-site .display-6, .og-site .font-heading,
.og-auth h1, .og-auth h2, .og-auth .font-heading {
  font-family: 'Poppins', sans-serif;
  color: var(--og-text-dark);
}

.og-site a.btn { text-decoration: none; }

.navbar-brand-img { height: 36px; max-height: 38px; width: auto; object-fit: contain; }

/* ==========================================================================
   INICIO (visitante y sesión iniciada): navbar, botones, footer
   ========================================================================== */
body.og-site { padding-bottom: 72px; }
@media (min-width: 992px) { body.og-site { padding-bottom: 0; } }

.og-site .text-dark { color: var(--og-text-dark) !important; }
.og-site .text-secondary { color: var(--og-text-muted) !important; }
.og-site .text-primary { color: var(--og-primary) !important; }
.og-site .bg-primary { background-color: var(--og-primary) !important; }
.og-site .bg-primary-subtle { background-color: var(--og-primary-subtle) !important; color: var(--og-primary) !important; }
.og-site .border-primary-subtle { border-color: #BDE2D4 !important; }
.og-site .border-secondary-subtle { border-color: var(--og-border) !important; }
.og-site .object-cover { object-fit: cover; }

.og-site .btn-primary {
  --bs-btn-bg: var(--og-primary);
  --bs-btn-border-color: var(--og-primary);
  --bs-btn-hover-bg: var(--og-primary-hover);
  --bs-btn-hover-border-color: var(--og-primary-hover);
  --bs-btn-active-bg: var(--og-primary-hover);
  --bs-btn-active-border-color: var(--og-primary-hover);
  --bs-btn-focus-shadow-rgb: 24, 166, 106;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.og-site .btn-outline-primary {
  --bs-btn-color: var(--og-primary);
  --bs-btn-border-color: var(--og-primary);
  --bs-btn-hover-bg: var(--og-primary);
  --bs-btn-hover-border-color: var(--og-primary);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: var(--og-primary);
  --bs-btn-active-border-color: var(--og-primary);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 24, 166, 106;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* Botones del dashboard (verde secundario / contorno verde principal) */
.og-site .btn-primary-custom {
  background-color: var(--og-primary);
  border-color: var(--og-primary);
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  padding-top: 12px;
  padding-bottom: 12px;
}
.og-site .btn-primary-custom:hover,
.og-site .btn-primary-custom:focus,
.og-site .btn-primary-custom:active {
  background-color: var(--og-primary-hover);
  border-color: var(--og-primary-hover);
  color: #FFFFFF;
}
.og-site .btn-outline-custom {
  color: var(--og-primary);
  border-color: var(--og-primary);
  background-color: transparent;
}
.og-site .btn-outline-custom:hover,
.og-site .btn-outline-custom:focus,
.og-site .btn-outline-custom:active {
  background-color: var(--og-primary);
  border-color: var(--og-primary);
  color: #FFFFFF;
}
.og-site .btn-white:hover { background-color: var(--og-bg) !important; }

/* Insignias */
.og-site .badge-lime,
.og-site .badge-lime-accent { background-color: var(--og-lime); color: var(--og-text-dark); font-weight: 600; }
.og-site .badge-brand-primary { background-color: rgba(11, 93, 69, 0.12); color: var(--og-primary); border: 1px solid rgba(11, 93, 69, 0.2); }
.og-site .badge-secondary-custom { background-color: rgba(24, 166, 106, 0.15); color: #0b6840; }

/* Navbar (logo principal a color, siempre) */
.og-navbar {
  background-color: #FFFFFF;
  box-shadow: 0 0.125rem 0.375rem rgba(11, 93, 69, 0.06);
  border-bottom: 1px solid var(--og-border);
}
.og-site .nav-link-item {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #425249;
  padding: 0.5rem 0.9rem !important;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
}
.og-site .nav-link-item:hover { color: var(--og-primary); background-color: #EBF5F0; }
.og-site .nav-link-item.active { color: var(--og-primary) !important; background-color: #E3F2EB !important; font-weight: 600; }

/* Botones de acceso del navbar para el visitante */
.og-nav-auth .btn { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem; border-radius: 0.5rem; padding: 0.45rem 1rem; }
.og-nav-auth .btn-og-login { color: var(--og-primary); border: 1.5px solid var(--og-primary); background: #FFFFFF; }
.og-nav-auth .btn-og-login:hover, .og-nav-auth .btn-og-login:focus { background: var(--og-primary); color: #FFFFFF; }
.og-nav-auth .btn-og-register { color: #FFFFFF; background: var(--og-primary); border: 1.5px solid var(--og-primary); }
.og-nav-auth .btn-og-register:hover, .og-nav-auth .btn-og-register:focus { background: var(--og-primary-hover); border-color: var(--og-primary-hover); color: #FFFFFF; }

/* Menú de perfil: el cierre de sesión es un POST dentro de un form */
.og-site .dropdown-menu form { margin: 0; }
.og-site .dropdown-menu .dropdown-item:active { background-color: var(--og-primary); color: #FFFFFF; }

/* Barra inferior móvil */
.mobile-bottom-bar {
  background-color: #FFFFFF;
  border-top: 1px solid var(--og-border);
  box-shadow: 0 -0.25rem 0.75rem rgba(11, 93, 69, 0.07);
  height: 68px;
  z-index: 1030;
}
.mobile-nav-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #516A60; text-decoration: none; font-size: 0.72rem; font-weight: 600; padding: 4px 0; width: 100%;
}
.mobile-nav-link i { font-size: 1.25rem; line-height: 1; margin-bottom: 2px; }
.mobile-nav-link.active { color: var(--og-primary); }
.mobile-pub-btn {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--og-primary), var(--og-secondary));
  color: #FFFFFF !important; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(11, 93, 69, 0.35);
  margin-top: -20px; border: 3px solid #FFFFFF;
}

/* Footer (fondo oscuro: logo secundario blanco) */
.og-footer { position: relative; z-index: 2; background-color: var(--og-primary); color: #D3E6DF; border-top: 3px solid var(--og-lime); }
.og-footer a { color: #EBF8F2; text-decoration: none; transition: color 0.15s ease; }
.og-footer a:hover { color: var(--og-lime); text-decoration: underline; }
.og-footer .footer-logo { height: 38px; width: auto; }

.og-site .card { border-color: var(--og-border); }
.og-site .form-control:focus,
.og-site .form-select:focus {
  border-color: var(--og-secondary) !important;
  box-shadow: 0 0 0 0.25rem rgba(24, 166, 106, 0.2) !important;
}
.og-site .btn:focus-visible { box-shadow: 0 0 0 0.25rem rgba(24, 166, 106, 0.3); }

/* ==========================================================================
   INICIAR SESIÓN / REGISTRARSE
   ========================================================================== */
body.og-auth { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; margin: 0; }

.og-auth-page { position: relative; overflow: hidden; width: 100%; padding: 1.5rem 1rem; }
@media (min-width: 768px) { .og-auth-page { padding-left: 2rem; padding-right: 2rem; } }

.og-auth-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.og-auth-blob--a { top: -10rem; left: -10rem; width: 24rem; height: 24rem; background: #A9F2D2; opacity: .4; filter: blur(64px); }
.og-auth-blob--b { bottom: -12rem; right: -8rem; width: 30rem; height: 30rem; background: var(--og-lime); opacity: .3; filter: blur(64px); }
.og-auth-blob--c { top: 50%; left: 75%; transform: translateY(-50%); width: 20rem; height: 20rem; background: #7EFAB6; opacity: .2; filter: blur(40px); }

/* Cabecera = navbar de las pantallas de acceso (logo principal a color) */
.og-auth-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin: 0 auto 2rem; padding: .5rem 0;
}
@media (min-width: 768px) { .og-auth-header { margin-bottom: 3rem; } }
.og-auth-header--login { max-width: 72rem; }
.og-auth-header--registro { max-width: 56rem; }
.og-auth-brand { display: inline-flex; align-items: center; transition: transform .2s; }
.og-auth-brand:hover { transform: scale(1.02); }
.og-auth-brand img { height: 36px; width: auto; display: block; }

.og-auth-nav { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 500; }
@media (min-width: 576px) { .og-auth-nav { gap: 1.5rem; } }
.og-auth-nav a { color: #3D4A41; text-decoration: none; display: inline-flex; align-items: center; gap: .375rem; transition: color .15s; }
.og-auth-nav a:hover { color: var(--og-primary); }
.og-auth-nav .og-auth-back { display: none; }
@media (min-width: 576px) { .og-auth-nav .og-auth-back { display: inline-flex; } }
.og-auth-nav .og-auth-help { background: #EBEFED; color: var(--og-text-dark); padding: .375rem .75rem; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.og-auth-nav .og-auth-help:hover { background: #E0E3E1; color: var(--og-text-dark); }
.og-auth-nav .og-auth-help i { color: var(--og-primary); font-size: 1.05rem; }

/* Tarjeta */
.og-auth-wrap { position: relative; z-index: 10; width: 100%; max-width: 32rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.og-auth-card {
  width: 100%; background: #FFFFFF; border-radius: .75rem; padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(224, 227, 225, .6), 0 8px 10px -6px rgba(224, 227, 225, .6);
}
@media (min-width: 576px) { .og-auth-card { padding: 2.25rem; } }

.og-auth-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 9999px;
  background: rgba(169, 242, 210, .5); color: var(--og-primary);
  font-size: .6875rem; font-weight: 600; letter-spacing: .025em; text-transform: uppercase;
}
@media (min-width: 576px) { .og-auth-badge { font-size: .75rem; } }
.og-auth-badge i { font-size: 1.1rem; color: var(--og-primary); line-height: 1; }

.og-auth-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 .5rem; color: var(--og-text-dark); }
@media (min-width: 576px) { .og-auth-title { font-size: 1.75rem; } }
.og-auth-sub { font-size: .875rem; line-height: 1.5; color: #3D4A41; margin: 0 auto; max-width: 24rem; }
.og-auth-sub strong, .og-auth-sub .og-accent { color: var(--og-primary); font-weight: 600; }

.og-auth-pitch { background: #F1F4F2; border-radius: .5rem; padding: .5rem .75rem; margin-bottom: 1.5rem; text-align: center; font-size: .875rem; font-weight: 500; color: #3D4A41; }
.og-auth-pitch a { color: var(--og-primary); font-weight: 700; text-decoration: none; }
.og-auth-pitch a:hover { text-decoration: underline; }

/* Formulario */
.og-form { display: flex; flex-direction: column; gap: 1rem; }
.og-field { display: flex; flex-direction: column; gap: .375rem; text-align: left; }
.og-label { font-size: .875rem; font-weight: 600; color: var(--og-text-dark); margin: 0; }
.og-input-wrap { position: relative; display: flex; align-items: center; }
.og-input-icon { position: absolute; left: .875rem; color: #6D7A70; font-size: 1.15rem; line-height: 1; pointer-events: none; }
.og-input {
  width: 100%; background: #F1F4F2; border: 0; border-radius: .5rem;
  padding: .75rem 1rem .75rem 2.75rem; font: inherit; font-size: .875rem; color: var(--og-text-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: background-color .15s, box-shadow .15s;
}
.og-input::placeholder { color: #6D7A70; opacity: 1; }
.og-input:focus { outline: 0; background: #EBEFED; box-shadow: 0 0 0 2px var(--og-primary); }
.og-input.input-validation-error { box-shadow: 0 0 0 1.5px var(--og-danger); }
.og-input--password { padding-right: 3rem; }
.og-eye { position: absolute; right: .75rem; display: inline-flex; padding: .25rem; border: 0; border-radius: .25rem; background: transparent; color: #3D4A41; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color .15s; }
.og-eye:hover { background: #E0E3E1; }

.og-field-error, .og-field-error.field-validation-error { display: block; font-size: .8125rem; color: var(--og-danger); }
.og-summary-error { font-size: .875rem; color: #93000A; background: #FFDAD6; border-radius: .5rem; padding: .625rem .875rem; }
.og-summary-error ul { margin: 0; padding-left: 1.1rem; }
.og-summary-error.validation-summary-valid { display: none; }

.og-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; font-size: .875rem; color: #3D4A41; margin: 0; }
.og-check input { width: 1rem; height: 1rem; accent-color: var(--og-primary); cursor: pointer; }

.og-btn-submit {
  width: 100%; margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.5rem; border: 0; border-radius: .5rem; cursor: pointer;
  background: var(--og-secondary); color: #FFFFFF; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); transition: background-color .15s, box-shadow .15s;
}
.og-btn-submit:hover { background: var(--og-primary); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .12), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.og-btn-submit:focus-visible { outline: 3px solid rgba(24, 166, 106, .4); outline-offset: 2px; }
.og-btn-submit i { transition: transform .2s; }
.og-btn-submit:hover i { transform: translateX(4px); }
.og-btn-submit--dark { background: var(--og-primary); box-shadow: 0 10px 15px -3px rgba(11, 93, 69, .25), 0 4px 6px -4px rgba(11, 93, 69, .25); }
.og-btn-submit--dark:hover { background: var(--og-primary-hover); }

.og-auth-link { color: var(--og-primary); font-size: .875rem; font-weight: 500; text-decoration: none; }
.og-auth-link:hover { text-decoration: underline; }

.og-divider { display: flex; align-items: center; padding: 1.25rem 0; }
.og-divider span { flex-grow: 1; height: 1px; background: #E0E3E1; }

.og-stamp { margin-top: 1.75rem; background: rgba(241, 244, 242, .7); border-radius: .5rem; padding: .875rem; display: flex; align-items: flex-start; gap: .625rem; text-align: left; }
.og-stamp i { color: var(--og-primary); font-size: 1.25rem; line-height: 1; flex-shrink: 0; margin-top: .1rem; }
.og-stamp p { margin: 0; font-size: .75rem; line-height: 1.6; color: #3D4A41; }
.og-stamp strong { color: var(--og-text-dark); font-weight: 600; }

/* Franja "Red UTN Haedo activa" */
.og-live { width: 100%; max-width: 32rem; margin-top: 1rem; background: #EBEFED; border-radius: .5rem; padding: .75rem; display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; font-weight: 500; color: #3D4A41; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.og-live-left { display: flex; align-items: center; gap: .5rem; }
.og-live-left strong { font-weight: 500; color: var(--og-text-dark); }
.og-live-extra { display: none; }
@media (min-width: 576px) { .og-live-extra { display: inline; } }
.og-live-eco { display: flex; align-items: center; gap: .25rem; color: var(--og-primary); font-weight: 600; font-size: .75rem; }
.og-ping { position: relative; display: inline-flex; width: .625rem; height: .625rem; }
.og-ping::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #A2D800; opacity: .75; animation: og-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.og-ping::after { content: ""; position: relative; width: 100%; height: 100%; border-radius: 50%; background: #769F00; }
@keyframes og-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .og-ping::before { animation: none; } }

.og-auth-footer { width: 100%; text-align: center; margin-top: 1.5rem; margin-bottom: 1rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.og-auth-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; font-size: .8125rem; font-weight: 500; color: #3D4A41; }
.og-auth-footer-links a { color: inherit; text-decoration: none; transition: color .15s; }
.og-auth-footer-links a:hover { color: var(--og-primary); }
.og-auth-footer-links .og-dot { color: #6D7A70; }
.og-auth-copy { margin: 0; font-size: .75rem; color: #6D7A70; }
.og-powered { margin-top: .5rem; display: inline-flex; align-items: center; gap: .75rem; padding: .5rem 1rem; border-radius: 9999px; background: #2D3130; color: #EEF1EF; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.og-powered span { font-size: .6875rem; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: #E6E9E7; }
.og-powered img { height: 1rem; width: auto; opacity: .9; transition: opacity .15s; }
.og-powered img:hover { opacity: 1; }

/* ----- Registro ----- */
.og-reg-main { position: relative; z-index: 10; width: 100%; max-width: 660px; margin: 0 auto; background: #FFFFFF; border-radius: .75rem; padding: 1.5rem; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(24, 28, 27, .05), 0 8px 10px -6px rgba(24, 28, 27, .05); }
@media (min-width: 576px) { .og-reg-main { padding: 2.5rem; } }
.og-reg-glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(48px); }
.og-reg-glow--a { top: -4rem; right: -4rem; width: 12rem; height: 12rem; background: rgba(169, 242, 210, .35); }
.og-reg-glow--b { bottom: -4rem; left: -4rem; width: 12rem; height: 12rem; background: rgba(185, 242, 39, .2); }
.og-reg-body { position: relative; display: flex; flex-direction: column; gap: 1.5rem; }
.og-reg-head { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.og-reg-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 9999px; background: rgba(188, 245, 43, .3); color: #141F00; font-size: .75rem; font-weight: 600; letter-spacing: .025em; }
.og-reg-badge i { font-size: 1rem; line-height: 1; }
.og-reg-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.025em; margin: 0; color: var(--og-text-dark); }
@media (min-width: 576px) { .og-reg-title { font-size: 1.875rem; } }
.og-reg-sub { margin: 0; font-size: .875rem; line-height: 1.625; color: #3D4A41; }
@media (min-width: 576px) { .og-reg-sub { font-size: 1rem; } }
.og-reg-note { background: #F1F4F2; border-radius: .5rem; padding: .875rem; display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; line-height: 1.5; color: #3D4A41; }
@media (min-width: 576px) { .og-reg-note { padding: 1rem; } }
.og-reg-note-icon { width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(11, 93, 69, .1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .125rem; }
.og-reg-note-icon i { color: var(--og-primary); font-size: 1.2rem; line-height: 1; }
.og-reg-note strong { color: var(--og-primary); font-weight: 500; }
.og-reg-note-title { display: block; font-weight: 600; color: var(--og-text-dark); }

.og-reg-form { display: flex; flex-direction: column; gap: 1.25rem; padding-top: .25rem; }
.og-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) { .og-grid-2 { grid-template-columns: 1fr 1fr; } }
.og-reg-form .og-label { font-size: .75rem; }
.og-reg-form .og-input { background: #EBEFED; padding: .625rem .75rem .625rem 2.25rem; box-shadow: none; }
.og-reg-form .og-input::placeholder { color: rgba(61, 74, 65, .5); }
.og-reg-form .og-input:focus { background: #EBEFED; box-shadow: 0 0 0 2px var(--og-primary); }
.og-reg-form .og-input.input-validation-error { box-shadow: 0 0 0 1.5px var(--og-danger); }
.og-reg-form .og-input--password { padding-right: 2.5rem; }
.og-reg-form .og-input-icon { left: .75rem; font-size: 1.1rem; color: rgba(61, 74, 65, .6); }
.og-reg-form .og-eye { right: .625rem; font-size: 1.05rem; color: rgba(61, 74, 65, .7); }
.og-reg-form .og-btn-submit { margin-top: 0; font-size: .875rem; }
@media (min-width: 576px) { .og-reg-form .og-btn-submit { font-size: 1rem; } }
.og-reg-form .og-btn-submit:active { transform: scale(.99); }
.og-reg-foot-note { display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; font-size: .75rem; color: rgba(61, 74, 65, .8); }
.og-reg-foot-note i { color: var(--og-primary); font-size: .95rem; flex-shrink: 0; }
.og-reg-footer { position: relative; z-index: 10; width: 100%; max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: .75rem; color: #3D4A41; }
@media (min-width: 576px) { .og-reg-footer { flex-direction: row; } }
.og-reg-footer a { color: inherit; text-decoration: none; transition: color .15s; }
.og-reg-footer a:hover { color: var(--og-primary); }
.og-reg-footer-left { display: flex; align-items: center; gap: .5rem; }
.og-reg-footer-left .og-dot-green { width: .5rem; height: .5rem; border-radius: 50%; background: var(--og-secondary); }
.og-reg-footer-right { display: flex; align-items: center; gap: 1.5rem; }

/* Tarjeta de solicitud pendiente: permite que el texto se ajuste en anchos intermedios (tablet) */
.og-site #driverRequestCard .card-body > .d-flex > .d-flex { min-width: 0; }
.og-site #driverRequestCard .card-body > .d-flex > .d-flex > div:last-child { min-width: 0; }
.og-site #driverRequestCard .badge-lime-accent { white-space: normal; }
.og-site #driverRequestCard .d-flex.align-items-center.gap-2.mb-1 { flex-wrap: wrap; }

/* Cabecera de las tarjetas de viajes disponibles: las insignias pasan a otra línea si no caben (tablet) */
.og-site .card > div > .d-flex.justify-content-between.align-items-center.mb-3 { flex-wrap: wrap; gap: .25rem .5rem; }

/* Móviles angostos: logo y botones de acceso caben en una sola fila */
@media (max-width: 420px) {
  .og-site .navbar > .container-xl { flex-wrap: nowrap; }
  .og-site .navbar-brand { margin-right: 0; }
  .og-site .navbar-brand-img { height: 28px; }
  .og-nav-auth { gap: .375rem !important; }
  .og-site .navbar > .container-xl > .d-flex.gap-3 { gap: .5rem !important; }
  .og-site .navbar .dropdown-toggle { padding-right: .5rem !important; }
  .og-nav-auth .btn { font-size: .78rem; padding: .3rem .6rem; }
}

/* Anchos muy reducidos: las insignias largas pueden envolver en vez de ensanchar la página */
@media (max-width: 400px) {
  .og-site .badge { white-space: normal; text-align: left; }
  .og-site .card-body .d-flex.align-items-center.gap-2.mb-3 { flex-wrap: wrap; }
}

/* ==========================================================================
   Interruptor de modo del navbar: Modo pasajero / Modo conductor

   - El estado base de cada modo YA es su pose final y estática:
       pasajero  -> persona corriendo (persona-movimiento.svg)
       conductor -> auto inclinado con líneas de velocidad
   - La transición de 1 s solo existe mientras site.js pone data-animando en el
     botón (se retira al terminar). Los keyframes no usan fill-mode: terminan
     exactamente en el estado base, así que nunca queda nada en movimiento.
   - Los iconos son máscaras CSS de los SVG de /img/orviango/modo. El auto detenido
     se deforma con una matriz que coincide con la silueta de auto-movimiento.svg,
     de modo que el relevo entre ambos es imperceptible.
   ========================================================================== */

.og-site .og-mode-toggle { flex: 0 1 auto; min-width: 0; }

.og-site .og-mode-toggle__button {
  --og-mode-bg: #FFFFFF;
  --og-mode-border: var(--og-border);
  --og-mode-text: var(--og-text-dark);
  --og-mode-caption: var(--og-text-muted);
  --og-mode-chip: var(--og-primary-subtle);
  --og-mode-track: #7F958A;
  --og-mode-thumb: #FFFFFF;
  --og-mode-swap: .17s;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: 100%;
  padding: .25rem .7rem .25rem .25rem;
  border: 1.5px solid var(--og-mode-border);
  border-radius: 999px;
  background: var(--og-mode-bg);
  color: var(--og-mode-text);
  font-family: 'Poppins', sans-serif;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(11, 93, 69, .08);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .2s ease;
}

.og-site .og-mode-toggle__button[data-modo-visual="conductor"] {
  --og-mode-bg: var(--og-primary);
  --og-mode-border: var(--og-primary-hover);
  --og-mode-text: #FFFFFF;
  --og-mode-caption: #CFE8DD;
  --og-mode-chip: rgba(255, 255, 255, .14);
  --og-mode-track: #FFFFFF;
  --og-mode-thumb: var(--og-primary);
  box-shadow: 0 2px 6px rgba(11, 93, 69, .25);
}

.og-site .og-mode-toggle__button:hover {
  --og-mode-border: #A9D6C4;
  box-shadow: 0 3px 10px rgba(11, 93, 69, .14);
}

.og-site .og-mode-toggle__button[data-modo-visual="conductor"]:hover {
  --og-mode-bg: var(--og-primary-hover);
  --og-mode-border: var(--og-primary-hover);
  box-shadow: 0 3px 10px rgba(11, 93, 69, .32);
}

.og-site .og-mode-toggle__button:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .16); }

.og-site .og-mode-toggle__button:focus-visible {
  outline: 3px solid var(--og-primary);
  outline-offset: 3px;
}

/* Sin transiciones en la primera pintura: evita el destello al cargar cada página */
.og-site .og-mode-toggle__button[data-listo="false"],
.og-site .og-mode-toggle__button[data-listo="false"] * { transition: none !important; }

/* ---- Icono ---------------------------------------------------------------- */
.og-site .og-mode-toggle__icon-stage {
  position: relative;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--og-mode-chip);
  transition: background-color .35s ease;
}

.og-site .og-mode-toggle__icon {
  position: absolute;
  inset: .27rem;
  opacity: 0;
  transform-origin: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: opacity .18s ease;
}

/* Color fijo por capa (no por modo) para que una capa que se desvanece no cambie de color */
.og-site .og-mode-toggle__icon--persona-parada     { background-color: var(--og-primary); -webkit-mask-image: url('../img/orviango/modo/persona.svg');            mask-image: url('../img/orviango/modo/persona.svg');            transform-origin: 50% 92%; }
.og-site .og-mode-toggle__icon--persona-corriendo  { background-color: var(--og-primary); -webkit-mask-image: url('../img/orviango/modo/persona-movimiento.svg');  mask-image: url('../img/orviango/modo/persona-movimiento.svg');  transform-origin: 50% 90%; }
.og-site .og-mode-toggle__icon--auto-detenido      { background-color: #FFFFFF;           -webkit-mask-image: url('../img/orviango/modo/auto.svg');               mask-image: url('../img/orviango/modo/auto.svg'); }
.og-site .og-mode-toggle__icon--auto-cuerpo        { background-color: #FFFFFF;           -webkit-mask-image: url('../img/orviango/modo/auto-movimiento-cuerpo.svg'); mask-image: url('../img/orviango/modo/auto-movimiento-cuerpo.svg'); }
.og-site .og-mode-toggle__icon--auto-lineas        { background-color: var(--og-lime);    -webkit-mask-image: url('../img/orviango/modo/auto-movimiento-lineas.svg'); mask-image: url('../img/orviango/modo/auto-movimiento-lineas.svg'); transform-origin: 70% 50%; }

/* Poses finales (estado de reposo de cada modo) */
.og-site .og-mode-toggle__button[data-modo-visual="pasajero"]  .og-mode-toggle__icon--persona-corriendo,
.og-site .og-mode-toggle__button[data-modo-visual="conductor"] .og-mode-toggle__icon--auto-cuerpo,
.og-site .og-mode-toggle__button[data-modo-visual="conductor"] .og-mode-toggle__icon--auto-lineas { opacity: 1; }

/* ---- Etiqueta ------------------------------------------------------------- */
.og-site .og-mode-toggle__copy {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.og-site .og-mode-toggle__caption {
  color: var(--og-mode-caption);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  transition: color 0s linear var(--og-mode-swap);
}

/* Las dos etiquetas posibles ocupan la misma celda: el botón conserva siempre el mismo ancho */
.og-site .og-mode-toggle__label { display: grid; }
.og-site .og-mode-toggle__label > * { grid-area: 1 / 1; }

.og-site .og-mode-toggle__state,
.og-site .og-mode-toggle__sizer {
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
}

.og-site .og-mode-toggle__state {
  color: var(--og-mode-text);
  transition: color 0s linear var(--og-mode-swap);
}

.og-site .og-mode-toggle__sizer { visibility: hidden; pointer-events: none; }

/* El texto cambia al instante y entra con un fundido corto (nunca queda invisible) */
.og-site .og-mode-toggle__state[data-cambio] { animation: og-modo-etiqueta .32s ease-out; }

/* ---- Interruptor ---------------------------------------------------------- */
.og-site .og-mode-toggle__track {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: 2.6rem;
  height: 1.45rem;
  padding: .17rem;
  border-radius: 999px;
  background: var(--og-mode-track);
  transition: background-color .35s ease;
}

.og-site .og-mode-toggle__thumb {
  width: 1.11rem;
  height: 1.11rem;
  border-radius: 50%;
  background: var(--og-mode-thumb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), background-color .35s ease;
}

.og-site .og-mode-toggle__button[data-modo-visual="conductor"] .og-mode-toggle__thumb { transform: translateX(1.15rem); }

/* ---- Transiciones de 1 s (una sola vez por cambio de modo) ---------------- */
.og-site .og-mode-toggle__button[data-animando="pasajero"] .og-mode-toggle__icon--persona-parada    { animation: og-modo-persona-parada 1s linear; }
.og-site .og-mode-toggle__button[data-animando="pasajero"] .og-mode-toggle__icon--persona-corriendo { animation: og-modo-persona-corriendo 1s linear; }
.og-site .og-mode-toggle__button[data-animando="conductor"] .og-mode-toggle__icon--auto-detenido    { animation: og-modo-auto-detenido 1s linear; }
.og-site .og-mode-toggle__button[data-animando="conductor"] .og-mode-toggle__icon--auto-cuerpo      { animation: og-modo-auto-cuerpo 1s linear; }
.og-site .og-mode-toggle__button[data-animando="conductor"] .og-mode-toggle__icon--auto-lineas      { animation: og-modo-auto-lineas 1s linear; }

@keyframes og-modo-persona-parada {
  0%   { opacity: 0; transform: scale(.9); animation-timing-function: ease-out; }
  12%  { opacity: 1; transform: scale(1);  }
  32%  { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.5, 0, .8, .4); }
  48%  { opacity: 1; transform: translateX(3%) rotate(9deg) scale(.97); animation-timing-function: linear; }
  58%  { opacity: 0; transform: translateX(5%) rotate(13deg) scale(.95); }
  100% { opacity: 0; transform: translateX(5%) rotate(13deg) scale(.95); }
}

@keyframes og-modo-persona-corriendo {
  0%, 44% { opacity: 0; transform: translateX(-9%) rotate(-6deg) scale(.9); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  60%     { opacity: 1; transform: translateX(2%) translateY(-5%) rotate(1deg) scale(1.04); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  100%    { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}

@keyframes og-modo-auto-detenido {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) matrix(1, 0, 0, 1, 0, 0); animation-timing-function: ease-out; }
  10%  { opacity: 1; transform: translate(0, 0) rotate(0deg) matrix(1, 0, 0, 1, 0, 0); }
  24%  { opacity: 1; transform: translate(0, 0) rotate(0deg) matrix(1, 0, 0, 1, 0, 0); animation-timing-function: ease-in-out; }
  38%  { opacity: 1; transform: translate(1.2%, 0) rotate(1.6deg) matrix(1, 0, 0, 1, 0, 0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  74%  { opacity: 1; transform: translate(-10.9%, 4.27%) rotate(0deg) matrix(.833, 0, .301, .828, 0, 0); }
  79%  { opacity: 1; transform: translate(-10.9%, 4.27%) rotate(0deg) matrix(.833, 0, .301, .828, 0, 0); }
  79.1%, 100% { opacity: 0; transform: translate(-10.9%, 4.27%) rotate(0deg) matrix(.833, 0, .301, .828, 0, 0); }
}

@keyframes og-modo-auto-cuerpo {
  0%, 70% { opacity: 0; transform: translateX(0); }
  76%     { opacity: 1; transform: translateX(0); }
  79%     { opacity: 1; transform: translateX(-1.5%); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100%    { opacity: 1; transform: translateX(0); }
}

@keyframes og-modo-auto-lineas {
  0%, 62% { opacity: 0; transform: scaleX(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  86%     { opacity: 1; transform: scaleX(1.2); animation-timing-function: ease-in-out; }
  100%    { opacity: 1; transform: scaleX(1); }
}

@keyframes og-modo-etiqueta {
  from { opacity: .35; transform: translateY(.18rem); }
  to   { opacity: 1;   transform: translateY(0); }
}

/* ---- Navbar con sesión: encaje responsive del control --------------------- */
/* Móvil: logo y menú arriba; modo y notificaciones en una segunda fila */
@media (max-width: 575.98px) {
  .og-site .navbar > .container-xl.og-navbar--modo { flex-wrap: wrap; row-gap: .5rem; }

  .og-site .og-navbar--modo .og-nav-actions {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    gap: .5rem !important;
  }

  .og-site .og-navbar--modo .navbar-collapse { order: 4; }
  .og-site .og-nav-actions .og-mode-toggle { flex: 1 1 auto; }
  .og-site .og-mode-toggle__button { gap: .55rem; padding-right: .6rem; }
  .og-site .og-mode-toggle__caption { display: none; }
  .og-site .og-mode-toggle__track { margin-left: auto; }
}

@media (max-width: 399.98px) {
  .og-site .og-mode-toggle__button { gap: .4rem; padding: .2rem .5rem .2rem .2rem; }
  .og-site .og-mode-toggle__icon-stage { width: 2rem; height: 2rem; }
  .og-site .og-mode-toggle__icon { inset: .25rem; }
  .og-site .og-mode-toggle__state,
  .og-site .og-mode-toggle__sizer { font-size: .78rem; }
  .og-site .og-mode-toggle__track { width: 2.1rem; height: 1.2rem; padding: .13rem; }
  .og-site .og-mode-toggle__thumb { width: .94rem; height: .94rem; }
  .og-site .og-mode-toggle__button[data-modo-visual="conductor"] .og-mode-toggle__thumb { transform: translateX(.9rem); }
}

@media (max-width: 339.98px) {
  .og-site .og-mode-toggle__track { width: 1.9rem; }
  .og-site .og-mode-toggle__button[data-modo-visual="conductor"] .og-mode-toggle__thumb { transform: translateX(.7rem); }
  .og-site .og-navbar--modo .og-nav-actions { gap: .25rem !important; }
  .og-site .og-mode-toggle__button { gap: .3rem; padding-right: .4rem; }
  .og-site .og-mode-toggle__state,
  .og-site .og-mode-toggle__sizer { font-size: .74rem; }
}

/* ---- Accesibilidad -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .og-site .og-mode-toggle__button,
  .og-site .og-mode-toggle__button * { animation: none !important; }
  .og-site .og-mode-toggle__icon { transition: opacity .2s linear; }
  .og-site .og-mode-toggle__thumb { transition: background-color .2s linear; }
}

@media (forced-colors: active) {
  .og-site .og-mode-toggle__button { border-color: ButtonText; forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
  .og-site .og-mode-toggle__icon { background-color: ButtonText; }
  .og-site .og-mode-toggle__track { background: GrayText; }
  .og-site .og-mode-toggle__button[data-modo-visual="conductor"] .og-mode-toggle__track { background: Highlight; }
  .og-site .og-mode-toggle__thumb { background: ButtonFace; border: 1px solid ButtonText; }
  .og-site .og-mode-toggle__state, .og-site .og-mode-toggle__caption { color: ButtonText; }
  .og-site .og-mode-toggle__button:focus-visible { outline-color: Highlight; }
}






/* Atmósfera verde de la pantalla Publicar viaje */
.og-site .og-publicar-page {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 68px);
  padding: 1rem 0 2rem;
  overflow: visible;
}

.og-site .og-publicar-page::before,
.og-site .og-publicar-page::after {
  position: fixed;
  z-index: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(92px);
}

.og-site .og-publicar-page::before {
  top: -15rem;
  right: -14rem;
  background: rgba(96, 221, 156, .48);
}

.og-site .og-publicar-page::after {
  bottom: -15rem;
  left: -14rem;
  background: rgba(185, 242, 39, .32);
}

.og-site .og-publicar-page > .row {
  position: relative;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .og-site .og-publicar-page::before,
  .og-site .og-publicar-page::after {
    width: 24rem;
    height: 24rem;
    filter: blur(72px);
  }

  .og-site .og-publicar-page::before {
    top: -11rem;
    right: -12rem;
  }

  .og-site .og-publicar-page::after {
    bottom: -11rem;
    left: -12rem;
  }
}

/* Plazas y preferencias del viaje */
.og-site .og-seat-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.25rem;
  padding: .75rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: #F1F4F2;
  color: var(--og-text-dark);
  cursor: pointer;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.og-site .og-seat-option:hover {
  background: #E6E9E7;
}

.og-site .og-seat-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.og-site .og-seat-option:has(.og-seat-option__input:checked) {
  border-color: var(--og-primary);
  background: var(--og-secondary);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px var(--og-primary);
}

.og-site .og-preference-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: #F1F4F2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.og-site .og-preference-card:hover {
  background: #E6E9E7;
}

.og-site .og-preference-card:has(.og-preference-card__input:checked) {
  border-color: #BDE2D4;
  background: var(--og-secondary-subtle);
}

.og-site .og-preference-card__input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .15rem;
  accent-color: var(--og-secondary);
}

.og-site .og-preference-card strong,
.og-site .og-preference-card small {
  display: block;
}

.og-site .og-preference-card strong {
  color: var(--og-text-dark);
  font-size: .9rem;
}

.og-site .og-preference-card small {
  margin-top: .15rem;
  color: var(--og-text-muted);
  font-size: .75rem;
}

/* Vista previa de Publicar viaje */
.og-site .og-vista-previa__header {
  padding: .9rem 1rem;
  background: var(--og-primary);
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.og-site .og-vista-previa__header .badge {
  background: var(--og-secondary);
  color: #FFFFFF;
  font-size: .65rem;
  text-transform: uppercase;
}

.og-site .og-vista-previa__foto,
.og-site .og-vista-previa__iniciales {
  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 auto;
}

.og-site .og-vista-previa__foto {
  object-fit: cover;
}

.og-site .og-vista-previa__iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--og-primary);
  color: #FFFFFF;
  font-weight: 700;
}

.og-site .og-vista-previa__vehiculo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .8rem;
  border-radius: .75rem;
  background: #EEF1EF;
  color: var(--og-text-dark);
  font-size: .85rem;
  font-weight: 600;
}

.og-site .og-vista-previa__recorrido {
  position: relative;
}

.og-site .og-vista-previa__punto {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.og-site .og-vista-previa__punto strong,
.og-site .og-vista-previa__punto small {
  display: block;
}

.og-site .og-vista-previa__punto strong {
  color: var(--og-text-dark);
  font-size: .9rem;
}

.og-site .og-vista-previa__punto small {
  margin-top: .15rem;
  color: var(--og-text-muted);
  font-size: .76rem;
}

.og-site .og-vista-previa__marcador {
  width: .75rem;
  height: .75rem;
  margin-top: .25rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.og-site .og-vista-previa__marcador--origen {
  background: var(--og-secondary);
}

.og-site .og-vista-previa__marcador--destino {
  background: var(--og-primary);
}

.og-site .og-vista-previa__linea {
  width: 2px;
  height: 1.5rem;
  margin: .2rem 0 .2rem .32rem;
  background: var(--og-secondary);
}

.og-site .og-vista-previa__observaciones {
  margin: 0 0 1.25rem;
  padding: .85rem;
  border-radius: .75rem;
  background: #EEF1EF;
  color: var(--og-text-dark);
  font-size: .84rem;
  font-style: italic;
  white-space: pre-wrap;
}

.og-site .og-vista-previa__footer {
  background: #F7FAF8;
}

.og-site .og-vista-previa__aporte {
  color: var(--og-primary);
  font-family: 'Poppins', sans-serif;
  font-size: 1.65rem;
  line-height: 1;
}

.og-site .og-vista-previa__footer .btn:disabled {
  border-color: #6D7A70;
  background: #6D7A70;
  color: #FFFFFF;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* Área de observaciones de Publicar viaje */
.og-site .og-observaciones-input {
  min-height: 8rem;
  padding: 1rem;
  border: 0;
  border-radius: .75rem;
  background: #EEF1EF;
  color: var(--og-text-dark);
  box-shadow: none;
  resize: vertical;
}

.og-site .og-observaciones-input::placeholder {
  color: #6D7A70;
  opacity: 1;
}

.og-site .og-observaciones-input:focus {
  border: 0;
  background: #E6E9E7;
  box-shadow: 0 0 0 2px var(--og-primary);
}

/* Publicación incompleta: botón visible, pero clickeable */
.og-site .og-vista-previa__submit.is-disabled,
.og-site .og-vista-previa__submit [aria-disabled="true"] {
    background: #9AA7A0;
    border-color: #9AA7A0;
    color: #FFFFFF;
    cursor: pointer;
    opacity: 1;
}

.og-site .og-vista-previa__submit.is-disabled:hover {
    background: #839189;
    border-color: #839189;
}

/* Campos obligatorios pendientes */
.og-site .form-control.is-invalid-client,
.og-site .form-select.is-invalid-client {
    border-color: #C62828;
    box-shadow: 0 0 0 .2rem rgba(198, 40, 40, .12);
}

.og-site .og-campo-incompleto .og-seat-option {
    border-color: #C62828;
    background: #FFF5F5;
}

/* Aviso superior con el resumen de campos pendientes */
.og-site .og-alerta-publicar {
    border: 1px solid #F1A6A6;
    border-radius: .85rem;
    background: #FFF2F2;
    color: #8B1E1E;
    box-shadow: 0 .35rem .9rem rgba(139, 30, 30, .08);
}

/* Breve respuesta visual al insistir en publicar */
.og-site .og-boton-sacudida {
    animation: og-sacudir-boton .34s ease-in-out;
}

@keyframes og-sacudir-boton {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .og-site .og-boton-sacudida {
        animation: none;
    }
}


/* Mensajes de error al publicar un viaje */
.og-site .og-summary-error,
.og-site .og-alerta-publicar {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 0;
    border-radius: .75rem;
    background: #FFD9D5;
    color: #A31313;
    font-size: .95rem;
    box-shadow: none;
}

.og-site .og-summary-error.validation-summary-valid {
    display: none;
}

.og-site .og-summary-error ul,
.og-site .og-alerta-publicar ul {
    margin: .5rem 0 0;
    padding-left: 1.15rem;
}

.og-site .og-summary-error li::marker,
.og-site .og-alerta-publicar li::marker {
    color: #C62828;
}

/* Separación entre los avisos de error y las tarjetas del formulario */
.og-site #formCrearViaje > .og-alerta-publicar,
.og-site #formCrearViaje > .og-summary-error {
    margin: 0 0 1.75rem !important;
}


/* Línea continua entre origen y destino en la vista previa */
.og-site .og-vista-previa__punto {
    align-items: stretch;
}

.og-site .og-vista-previa__trayecto {
    display: flex;
    flex: 0 0 .75rem;
    flex-direction: column;
    align-items: center;
    width: .75rem;
}

.og-site .og-vista-previa__trayecto .og-vista-previa__linea {
    display: block;
    flex: 1;
    width: 2px;
    min-height: 1.5rem;
    height: auto;
    margin: .22rem 0 0;
    background: var(--og-secondary);
}

/* Menú de perfil del navbar */
.og-site .og-menu-usuario__trigger {
    display: inline-flex;
    padding: .3rem .65rem .3rem .35rem;
    border: 1px solid #DCE6E0;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--og-text-dark);
    box-shadow: 0 1px 3px rgba(11, 93, 69, .08);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-decoration: none;
}

.og-site .og-menu-usuario__trigger:hover,
.og-site .og-menu-usuario__trigger:focus {
    border-color: #B9DCCD;
    background: #F7FAF8;
    color: var(--og-text-dark);
}

.og-site .og-menu-usuario__trigger::after {
    margin-left: .2rem;
}

.og-site .og-menu-usuario__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    object-fit: cover;
    background: #66716B;
    color: #FFFFFF;
    box-shadow: 0 0 0 1px #CFE1D8;
    font-size: .85rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.og-site .og-menu-usuario__nombre {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.og-site .og-menu-usuario__lista {
    min-width: 15rem;
    margin-top: .6rem;
    padding: .45rem;
    border: 1px solid #DCE6E0;
    border-radius: .9rem;
    background: #FFFFFF;
    box-shadow: 0 .75rem 1.75rem rgba(11, 93, 69, .14);
}

.og-site .og-menu-usuario__opcion {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    border-radius: .6rem;
    color: var(--og-text-dark);
    font-size: .92rem;
    font-weight: 500;
}

.og-site .og-menu-usuario__opcion i {
    width: 1.1rem;
    color: var(--og-primary);
    font-size: 1rem;
    text-align: center;
}

.og-site .og-menu-usuario__opcion:hover,
.og-site .og-menu-usuario__opcion:focus {
    background: #EAF5EF;
    color: var(--og-primary);
}

.og-site .og-menu-usuario__icono-calificacion {
    color: #E9A400 !important;
}

.og-site .og-menu-usuario__separador {
    margin: .4rem 0;
    border-color: #E3EAE6;
}

.og-site .og-menu-usuario__opcion--salir {
    color: #9B3030;
}

.og-site .og-menu-usuario__opcion--salir i {
    color: #B94A4A;
}

.og-site .og-menu-usuario__opcion--salir:hover,
.og-site .og-menu-usuario__opcion--salir:focus {
    background: #FFF3F2;
    color: #9B3030;
}

@media (max-width: 575.98px) {
    .og-site .og-menu-usuario__nombre {
        display: none;
    }

    .og-site .og-menu-usuario__trigger {
        padding-right: .45rem;
    }
}

/* Acceso a notificaciones */
.og-site .og-notificaciones {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid #DCE6E0;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--og-primary);
    box-shadow: 0 1px 3px rgba(11, 93, 69, .08);
    font-size: 1.25rem;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease,
                transform .2s ease;
}

.og-site .og-notificaciones:hover,
.og-site .og-notificaciones:focus {
    border-color: #B9DCCD;
    background: #EAF5EF;
    color: var(--og-primary);
    transform: translateY(-1px);
}

.og-site .og-notificaciones__contador {
    position: absolute;
    top: -.3rem;
    right: -.35rem;
    min-width: 1.2rem;
    padding: .1rem .3rem;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: #C23B3B;
    color: #FFFFFF;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

/* Tarjeta de seguridad dentro de Mi perfil */
.og-site .og-perfil-seguridad {
    border: 1px solid #E0EAE4;
    background: #FFFFFF;
}

/* Pantalla Mi perfil */
.og-site .og-perfil-introduccion {
    margin-bottom: 1.25rem;
}

.og-site .og-perfil-introduccion__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: .35rem;
    color: var(--og-primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.og-site .og-perfil-introduccion h1 {
    margin-bottom: .35rem;
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 700;
}

.og-site .og-perfil-introduccion p {
    margin-bottom: 0;
    color: var(--og-text-muted);
}

.og-site .og-perfil-editar {
    padding: .65rem 1rem;
    font-weight: 600;
}

.og-site .og-perfil-card {
    border: 1px solid #E0EAE4 !important;
    overflow: hidden;
}

.og-site .og-perfil-card .card-body {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.og-site .og-perfil-avatar {
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 2px #CDE5D9;
    object-fit: cover;
}

.og-site .og-perfil-datos {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #E5ECE8;
}

.og-site .og-perfil-datos dt,
.og-site .og-perfil-datos dd {
    padding-top: .6rem;
    padding-bottom: .6rem;
    margin-bottom: 0;
}

.og-site .og-perfil-datos dt {
    color: var(--og-text-muted);
    font-size: .84rem;
    font-weight: 600;
}

.og-site .og-perfil-datos dd {
    color: var(--og-text-dark);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .og-site .og-perfil-editar {
        width: 100%;
    }

    .og-site .og-perfil-datos dt {
        padding-bottom: .1rem;
    }

    .og-site .og-perfil-datos dd {
        padding-top: .1rem;
        padding-bottom: .85rem;
    }
}

/* Avatar predeterminado cuando no existe foto o la imagen falla */
.og-site .og-menu-usuario__foto,
.og-site .og-perfil-avatar-contenedor {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.og-site .og-avatar-predeterminado {
    background: #E2E6E4;
    color: #68746D;
}

.og-site .og-avatar-predeterminado i {
    font-size: 1.15rem;
}

.og-site .og-perfil-avatar-contenedor {
    width: 96px;
    height: 96px;
}

.og-site .og-perfil-avatar--predeterminado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: #E2E6E4;
    color: #68746D;
    font-size: 2.5rem;
}

/* Página de notificaciones */
.og-site .og-notificaciones-pagina {
    max-width: 56rem;
    margin: 0 auto;
}

.og-site .og-notificaciones-pagina__encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.og-site .og-notificaciones-pagina__eyebrow {
    color: var(--og-primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.og-site .og-notificaciones-pagina h1 {
    margin: .25rem 0;
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 700;
}

.og-site .og-notificaciones-pagina__encabezado p {
    margin: 0;
    color: var(--og-text-muted);
}

.og-site .og-notificaciones-pagina__contador {
    flex: 0 0 auto;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: #EAF5EF;
    color: var(--og-primary);
    font-size: .8rem;
    font-weight: 700;
}

.og-site .og-notificaciones-lista {
    display: grid;
    gap: .85rem;
}

.og-site .og-notificacion {
    display: flex;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid #E0EAE4;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: 0 .25rem .8rem rgba(11, 93, 69, .05);
}

.og-site .og-notificacion--nueva {
    border-color: #B9DCCD;
    background: linear-gradient(90deg, #F1FAF5 0%, #FFFFFF 35%);
}

.og-site .og-notificacion__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.og-site .og-notificacion__icono--solicitud,
.og-site .og-notificacion__icono--aceptada {
    background: #DDF4E8;
    color: #08754B;
}

.og-site .og-notificacion__icono--rechazada,
.og-site .og-notificacion__icono--cancelada {
    background: #FFF0EF;
    color: #B94A4A;
}

.og-site .og-notificacion__icono--calificacion {
    background: #FFF6D9;
    color: #C98A00;
}

.og-site .og-notificacion__icono--general {
    background: #EAF5EF;
    color: var(--og-primary);
}

.og-site .og-notificacion__contenido {
    min-width: 0;
    flex: 1;
}

.og-site .og-notificacion__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.og-site .og-notificacion h2 {
    margin: 0;
    color: var(--og-text-dark);
    font-size: 1rem;
    font-weight: 700;
}

.og-site .og-notificacion__estado {
    flex: 0 0 auto;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: var(--og-secondary);
    color: #073B2B;
    font-size: .68rem;
    font-weight: 700;
}

.og-site .og-notificacion__mensaje {
    margin: .35rem 0 .6rem;
    color: var(--og-text-muted);
    font-size: .9rem;
    white-space: pre-wrap;
}

.og-site .og-notificacion__fecha {
    display: block;
    color: #728078;
    font-size: .78rem;
}

.og-site .og-notificacion__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
}

.og-site .og-notificacion__marcar {
    color: #64726A;
    text-decoration: none;
}

.og-site .og-notificacion__marcar:hover,
.og-site .og-notificacion__marcar:focus {
    color: var(--og-primary);
    text-decoration: underline;
}

.og-site .og-notificaciones-vacias {
    padding: 3rem 1.5rem;
    border: 1px dashed #C9DCD1;
    border-radius: 1rem;
    background: #FFFFFF;
    text-align: center;
}

.og-site .og-notificaciones-vacias__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .85rem;
    border-radius: 50%;
    background: #EAF5EF;
    color: var(--og-primary);
    font-size: 1.45rem;
}

.og-site .og-notificaciones-vacias h2 {
    margin-bottom: .4rem;
    color: var(--og-text-dark);
    font-size: 1.1rem;
    font-weight: 700;
}

.og-site .og-notificaciones-vacias p {
    margin: 0;
    color: var(--og-text-muted);
}

@media (max-width: 575.98px) {
    .og-site .og-notificaciones-pagina__encabezado {
        align-items: flex-start;
        flex-direction: column;
    }

    .og-site .og-notificacion {
        gap: .75rem;
        padding: 1rem;
    }

    .og-site .og-notificacion__cabecera {
        flex-direction: column;
        gap: .4rem;
    }
}

/* Énfasis moderado para Crear viaje en la navegación móvil */
@media (max-width: 991.98px) {
    body.og-site {
        padding-bottom: 78px;
    }

    .mobile-bottom-bar {
        height: 72px;
    }

    .mobile-nav-link {
        min-height: 62px;
        font-size: .66rem;
    }
}

/* Accesos disponibles dentro de Mi perfil */
.og-site .og-perfil-accesos {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #E0EAE4;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: 0 .25rem .8rem rgba(11, 93, 69, .04);
}

.og-site .og-perfil-accesos__encabezado {
    margin-bottom: 1rem;
}

.og-site .og-perfil-accesos__encabezado h2 {
    margin: 0 0 .25rem;
    color: var(--og-text-dark);
    font-size: 1.05rem;
    font-weight: 700;
}

.og-site .og-perfil-accesos__encabezado p {
    margin: 0;
    color: var(--og-text-muted);
    font-size: .87rem;
}

.og-site .og-perfil-acceso {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 5rem;
    padding: .85rem;
    border: 1px solid #E0EAE4;
    border-radius: .85rem;
    background: #FFFFFF;
    color: var(--og-text-dark);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease,
                transform .2s ease;
}

.og-site .og-perfil-acceso:hover,
.og-site .og-perfil-acceso:focus {
    border-color: #B9DCCD;
    background: #F5FBF7;
    color: var(--og-text-dark);
    transform: translateY(-1px);
}

.og-site .og-perfil-acceso__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    background: #EAF5EF;
    color: var(--og-primary);
    flex: 0 0 auto;
}

.og-site .og-perfil-acceso__icono--calificacion {
    background: #FFF6D9;
    color: #C98A00;
}

.og-site .og-perfil-acceso strong,
.og-site .og-perfil-acceso small {
    display: block;
}

.og-site .og-perfil-acceso strong {
    font-size: .9rem;
    font-weight: 700;
}

.og-site .og-perfil-acceso small {
    margin-top: .15rem;
    color: var(--og-text-muted);
    font-size: .77rem;
}

.og-site .og-perfil-acceso__flecha {
    margin-left: auto;
    color: #849087;
}

.og-site .og-perfil-cerrar-sesion {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border: 0;
    background: transparent;
    color: #9B3030;
    font-size: .86rem;
    font-weight: 600;
}

.og-site .og-perfil-cerrar-sesion:hover,
.og-site .og-perfil-cerrar-sesion:focus {
    color: #7D1F1F;
    text-decoration: underline;
}

/* En móvil, Perfil y sus acciones se acceden desde la barra inferior */
@media (max-width: 991.98px) {
    .og-site .og-navbar .og-menu-usuario {
        display: none;
    }
}

/* Pantalla Cambiar contraseña */
.og-site .og-password-page {
    padding-top: 1rem;
}

.og-site .og-password-volver {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    color: var(--og-primary);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}

.og-site .og-password-volver:hover,
.og-site .og-password-volver:focus {
    color: var(--og-primary-hover);
    text-decoration: underline;
}

.og-site .og-password-card {
    padding: clamp(1.35rem, 4vw, 2rem);
    border: 1px solid #E0EAE4;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: 0 .6rem 1.6rem rgba(11, 93, 69, .09);
}

.og-site .og-password-card__encabezado {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.75rem;
}

.og-site .og-password-card__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .85rem;
    background: #EAF5EF;
    color: var(--og-primary);
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.og-site .og-password-card__eyebrow {
    color: var(--og-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.og-site .og-password-card h1 {
    margin: .15rem 0 .35rem;
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
}

.og-site .og-password-card p {
    margin: 0;
    color: var(--og-text-muted);
    font-size: .88rem;
}

.og-site .og-password-ver {
    border-color: var(--bs-border-color);
    color: #68746D;
}

.og-site .og-password-ver:hover,
.og-site .og-password-ver:focus {
    border-color: #B9DCCD;
    background: #EAF5EF;
    color: var(--og-primary);
}

.og-site .og-password-errores {
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    border-radius: .75rem;
    background: #FFD9D5;
    color: #A31313;
    font-size: .87rem;
}

.og-site .og-password-errores:empty {
    display: none;
}

.og-site .og-password-errores ul {
    margin: 0;
    padding-left: 1.1rem;
}

.og-site .og-password-guardar {
    font-weight: 600;
}

/* Avatar del saludo de Inicio */
.og-site .og-inicio-avatar {
    display: inline-flex;
    flex: 0 0 auto;
}

.og-site .og-inicio-avatar__vacio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.og-site .og-inicio-avatar__vacio i {
    font-size: 1.9rem;
}

/* Avatar pequeño con respaldo gris (tarjeta de próximo viaje y vista previa) */
.og-site .og-avatar-chico {
    display: inline-flex;
    flex: 0 0 auto;
}

.og-site .og-avatar-chico__vacio,
.og-site .og-vista-previa__vacio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.og-site .og-avatar-chico__vacio {
    width: 48px;
    height: 48px;
}

.og-site .og-vista-previa__vacio {
    width: 3.2rem;
    height: 3.2rem;
}

.og-site .og-avatar-chico__vacio i,
.og-site .og-vista-previa__vacio i {
    font-size: 1.5rem;
}


/* Switch de modo: etiqueta en mayúsculas solo cuando se muestra «Modo activo» */
@media (min-width: 576px) {
    .og-site .og-mode-toggle__state,
    .og-site .og-mode-toggle__sizer {
        text-transform: uppercase;
    }
}

/* Móvil y tablet: la campana se accede desde la barra inferior (Avisos) */
@media (max-width: 991.98px) {
    .og-site .og-nav-actions .og-notificaciones {
        display: none;
    }
}

/* Móvil: el switch ocupa el hueco entre el logo y el menú, en tamaño compacto */
@media (max-width: 575.98px) {
    .og-site .og-navbar--modo .navbar-brand { order: 0; }

    .og-site .og-navbar--modo .og-nav-actions {
        order: 1;
        flex: 0 1 auto;
        margin-left: .75rem;
        margin-right: 0;
    }

    .og-site .og-navbar--modo .navbar-toggler {
        order: 2;
        margin-left: auto;
    }
    .og-site .og-navbar--modo .navbar-collapse { order: 3; }

    .og-site .og-nav-actions .og-mode-toggle { flex: 0 1 auto; }

    .og-site .og-mode-toggle__button {
        gap: .35rem;
        padding: .15rem .5rem .15rem .15rem;
    }

    .og-site .og-mode-toggle__icon-stage { width: 1.6rem; height: 1.6rem; }
    .og-site .og-mode-toggle__icon { inset: .2rem; }

    .og-site .og-mode-toggle__state,
    .og-site .og-mode-toggle__sizer { font-size: .72rem; }

    .og-site .og-mode-toggle__track {
        width: 1.7rem;
        height: 1rem;
        padding: .13rem;
        margin-left: .1rem;
    }

    .og-site .og-mode-toggle__thumb { width: .74rem; height: .74rem; }

    .og-site .og-mode-toggle__button[data-modo-visual="conductor"] .og-mode-toggle__thumb {
        transform: translateX(.7rem);
    }
}

/* Contador de notificaciones en el acceso «Avisos» de la barra inferior */
.og-site .og-aviso-barra__icono {
    position: relative;
    display: inline-flex;
}

.og-site .og-aviso-barra__contador {
    top: -.45rem;
    right: -.75rem;
}

/* ==========================================================================
   PANTALLA MIS VIAJES Y RUTAS (CONDUCTOR)
   ========================================================================== */
.og-site .og-misviajes-page {
    padding: .5rem 0 1.5rem;
}

.og-site .og-misviajes-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
    .og-site .og-misviajes-header {
        flex-direction: row;
        align-items: flex-end;
    }
}

.og-site .og-misviajes-header__info {
    max-width: 46rem;
}

.og-site .og-misviajes-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--og-text-muted);
    font-size: .78rem;
}

.og-site .og-misviajes-breadcrumb__link {
    color: var(--og-text-muted);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.og-site .og-misviajes-breadcrumb__link:hover,
.og-site .og-misviajes-breadcrumb__link:focus {
    color: var(--og-primary);
    text-decoration: underline;
}

.og-site .og-misviajes-title {
    margin: 0 0 .45rem;
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.og-site .og-misviajes-subtitle {
    color: var(--og-text-muted);
    font-size: .95rem;
    line-height: 1.55;
}

.og-site .og-misviajes-btn-publicar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1.25rem;
    border-radius: .85rem;
    box-shadow: 0 .35rem .9rem rgba(11, 93, 69, .2);
    font-size: .88rem;
}

.og-site .og-misviajes-btn-secundario {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem 1.25rem;
    border-radius: .85rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--og-primary);
    background: #ffffff;
    border: 1.5px solid var(--og-primary);
    box-shadow: 0 .2rem .6rem rgba(11, 93, 69, .06);
    transition: all .18s ease;
}

.og-site .og-misviajes-btn-secundario:hover {
    background: var(--og-primary);
    color: #ffffff;
    border-color: var(--og-primary);
    box-shadow: 0 .35rem .9rem rgba(11, 93, 69, .22);
}

/* Tarjetas KPI */
/* Tarjetas KPI */
.og-site .og-kpi-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid #E2ECE6;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: 0 .2rem .6rem rgba(11, 93, 69, .04);
    overflow: hidden;
}

.og-site .og-kpi-card > div {
    min-width: 0;
    flex: 1;
}

.og-site .og-kpi-card__label {
    display: block;
    color: var(--og-text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.og-site .og-kpi-card__value {
    margin: .25rem 0;
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.15;
}

.og-site .og-kpi-card__value--date {
    font-size: 1.35rem;
}

.og-site .og-kpi-card__meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--og-text-muted);
    font-size: .76rem;
    font-weight: 500;
}

.og-site .og-kpi-card__meta > i {
    flex-shrink: 0;
}

.og-site .og-kpi-card__meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pestañas y barra de filtro */
.og-site .og-misviajes-toolbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid #DCE6E0;
}

@media (min-width: 768px) {
    .og-site .og-misviajes-toolbar {
        flex-direction: row;
        align-items: center;
    }
}

.og-site .og-misviajes-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.og-site .og-misviajes-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: .75rem;
    color: var(--og-text-muted);
    font-family: 'Poppins', sans-serif;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.og-site .og-misviajes-tab:hover,
.og-site .og-misviajes-tab:focus {
    background: #E8F0EC;
    color: var(--og-text-dark);
}

.og-site .og-misviajes-tab.active {
    background: var(--og-primary);
    color: #FFFFFF;
    box-shadow: 0 .2rem .5rem rgba(11, 93, 69, .18);
}

.og-site .og-misviajes-tab__badge {
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--og-secondary-subtle);
    color: var(--og-primary);
    font-size: .7rem;
    font-weight: 700;
}

.og-site .og-misviajes-tab.active .og-misviajes-tab__badge {
    background: rgba(185, 242, 39, .9);
    color: #083B2A;
}

.og-site .og-misviajes-tab__badge--warn {
    background: #FFF1CC;
    color: #966000;
}

.og-site .og-misviajes-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-end;
}

@media (min-width: 768px) {
    .og-site .og-misviajes-filter {
        align-self: auto;
    }
}

.og-site .og-misviajes-filter__label {
    color: var(--og-text-muted);
    font-size: .78rem;
    font-weight: 600;
}

.og-site .og-misviajes-filter__select {
    min-width: 12.5rem;
    border-color: #DCE6E0;
    border-radius: .65rem;
    font-size: .8rem;
    font-weight: 600;
}

/* Alerta de solicitud pendiente */
.og-site .og-solicitud-alerta {
    position: relative;
    overflow: hidden;
    padding: 1.35rem 1.35rem 1.35rem 1.6rem;
    border: 1px solid #DCE8DF;
    border-left: 6px solid var(--og-secondary);
    border-radius: 1rem;
    background: linear-gradient(90deg, #FFFBF0 0%, #FFFFFF 45%);
    box-shadow: 0 .25rem .75rem rgba(11, 93, 69, .06);
}

.og-site .og-solicitud-alerta__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 992px) {
    .og-site .og-solicitud-alerta__body {
        flex-direction: row;
        align-items: center;
    }
}

.og-site .og-solicitud-alerta__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
}

.og-site .og-solicitud-alerta__grad-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--og-secondary-subtle);
    color: var(--og-primary);
    font-size: .65rem;
}

.og-site .og-solicitud-alerta__pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: #FEEBC8;
    color: #8C5400;
    font-size: .7rem;
    font-weight: 700;
}

.og-site .og-solicitud-alerta__time {
    color: var(--og-text-muted);
    font-size: .76rem;
    font-weight: 500;
}

.og-site .og-solicitud-alerta__name {
    margin: .15rem 0;
    color: var(--og-text-dark);
    font-size: 1.05rem;
    font-weight: 700;
}

.og-site .og-solicitud-alerta__career {
    color: var(--og-text-muted);
    font-family: 'Inter', sans-serif;
    font-size: .8rem;
    font-weight: 400;
}

.og-site .og-solicitud-alerta__details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    color: var(--og-text-muted);
    font-size: .8rem;
}

.og-site .og-solicitud-alerta__rating {
    color: #B77900;
    font-weight: 700;
}

.og-site .og-solicitud-alerta__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-shrink: 0;
}

.og-site .og-solicitud-alerta__btn-rechazar {
    padding: .55rem 1rem;
    border: 1px solid #D8E2DC;
    border-radius: .75rem;
    background: #EEF3F0;
    color: var(--og-text-dark);
    font-size: .82rem;
    font-weight: 600;
}

.og-site .og-solicitud-alerta__btn-rechazar:hover {
    background: #E2EAE5;
}

.og-site .og-solicitud-alerta__btn-aceptar {
    padding: .55rem 1.15rem;
    border-radius: .75rem;
    font-size: .82rem;
}

/* Tarjetas de viajes */
.og-site .og-misviajes-section-title {
    display: inline-flex;
    align-items: center;
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.og-site .og-viaje-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.4rem;
    border: 1px solid #E0EAE4;
    border-radius: 1.1rem;
    background: #FFFFFF;
    box-shadow: 0 .25rem .8rem rgba(11, 93, 69, .05);
    transition: box-shadow .2s ease;
}

.og-site .og-viaje-card:hover {
    box-shadow: 0 .45rem 1.2rem rgba(11, 93, 69, .1);
}

.og-site .og-viaje-card__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.og-site .og-viaje-card__badge--activo {
    background: #E3F6EC;
    color: var(--og-primary);
}

.og-site .og-viaje-card__badge--pendiente {
    background: #FFF2D6;
    color: #945D00;
}

.og-site .og-viaje-card__badge--finalizado {
    background: #EAF0EC;
    color: #3E5248;
}

.og-site .og-viaje-card__badge--cancelado {
    background: #FDECEC;
    color: #A62B2B;
}

.og-site .og-viaje-card__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--og-secondary);
}

.og-site .og-viaje-card__price-label {
    display: block;
    color: var(--og-text-muted);
    font-size: .7rem;
}

.og-site .og-viaje-card__price {
    display: block;
    color: var(--og-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.og-site .og-viaje-card__price-sub {
    display: block;
    color: var(--og-text-muted);
    font-size: .66rem;
}

/* Ruta visual en la tarjeta */
.og-site .og-viaje-card__route {
    display: flex;
    align-items: stretch;
    gap: .85rem;
    padding: .95rem 1rem;
    border-radius: .85rem;
    background: #F3F7F5;
}

.og-site .og-viaje-card__route-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .2rem;
}

.og-site .og-viaje-card__route-origin {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--og-secondary);
}

.og-site .og-viaje-card__route-bar {
    flex: 1;
    width: 2px;
    min-height: 1.5rem;
    margin: .2rem 0;
    background: #C4D6CC;
}

.og-site .og-viaje-card__route-stops {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .55rem;
    min-width: 0;
    flex: 1;
}

.og-site .og-viaje-card__stop-label {
    display: block;
    color: var(--og-text-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.og-site .og-viaje-card__stop-value {
    display: block;
    color: var(--og-text-dark);
    font-size: .88rem;
    font-weight: 600;
}

/* Bloques de Vehículo y Ocupación */
.og-site .og-viaje-card__meta-box {
    display: flex;
    align-items: center;
    gap: .65rem;
    height: 100%;
    padding: .75rem .85rem;
    border-radius: .8rem;
    background: #F3F7F5;
}

.og-site .og-viaje-card__meta-title {
    display: block;
    color: var(--og-text-muted);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.og-site .og-viaje-card__meta-main {
    color: var(--og-text-dark);
    font-size: .82rem;
}

.og-site .og-viaje-card__meta-sub {
    display: block;
    color: var(--og-text-muted);
    font-size: .7rem;
}

/* Lista de pasajeros confirmados */
.og-site .og-viaje-card__passengers-title {
    color: var(--og-text-muted);
    font-size: .76rem;
    font-weight: 600;
}

.og-site .og-viaje-card__passengers-free {
    color: var(--og-primary);
    font-size: .75rem;
    font-weight: 600;
}

.og-site .og-viaje-card__passenger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .65rem;
    border: 1px solid #E6EFEA;
    border-radius: .65rem;
    background: #FAFCFB;
    font-size: .78rem;
}

.og-site .og-viaje-card__passenger-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: .8rem;
}

.og-site .og-viaje-card__passenger-empty {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .7rem;
    border: 1.5px dashed #CEDCD4;
    border-radius: .65rem;
    background: #F6F9F7;
    color: var(--og-text-muted);
    font-size: .76rem;
    font-style: italic;
}

/* Pie de acciones de la tarjeta */
.og-site .og-viaje-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #E5EEE9;
}

.og-site .og-viaje-card__edit-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--og-text-muted);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.og-site .og-viaje-card__edit-link:hover,
.og-site .og-viaje-card__edit-link:focus {
    color: var(--og-primary);
}

.og-site .og-viaje-card__manage-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: .75rem;
    font-size: .78rem;
}

/* Estado vacío */
.og-site .og-misviajes-empty {
    padding: 2.75rem 1.5rem;
    border: 1px dashed #C8DBD0;
    border-radius: 1rem;
    background: #FFFFFF;
    text-align: center;
}

.og-site .og-misviajes-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: var(--og-primary-subtle);
    color: var(--og-primary);
    font-size: 1.4rem;
}

.og-site .og-misviajes-empty h3 {
    margin-bottom: .35rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Historial reciente */
.og-site .og-historial-list {
    overflow: hidden;
    border: 1px solid #E0EAE4;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: 0 .2rem .6rem rgba(11, 93, 69, .04);
}

.og-site .og-historial-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #EBF1ED;
}

.og-site .og-historial-item:last-child {
    border-bottom: 0;
}

@media (min-width: 576px) {
    .og-site .og-historial-item {
        flex-direction: row;
        align-items: center;
    }
}

.og-site .og-historial-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
    background: #ECF3EF;
    color: var(--og-primary);
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.og-site .og-historial-item__date {
    color: var(--og-text-dark);
    font-size: .88rem;
}

.og-site .og-historial-item__role {
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--og-secondary-subtle);
    color: var(--og-primary);
    font-size: .66rem;
    font-weight: 700;
}

.og-site .og-historial-item__route {
    color: var(--og-text-muted);
    font-size: .78rem;
}

.og-site .og-historial-item__rating {
    color: #B77900;
    font-size: .8rem;
    font-weight: 700;
}

.og-site .og-historial-item__amount {
    color: var(--og-primary);
    font-family: 'Poppins', sans-serif;
    font-size: .85rem;
}

/* Banner de convivencia */
.og-site .og-convivencia-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border-radius: 1rem;
    background: #EAF2EE;
}

@media (min-width: 768px) {
    .og-site .og-convivencia-banner {
        align-items: center;
    }
}

.og-site .og-convivencia-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--og-secondary-subtle);
    color: var(--og-primary);
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.og-site .og-convivencia-banner__title {
    margin: 0 0 .2rem;
    color: var(--og-text-dark);
    font-size: .9rem;
    font-weight: 700;
}

.og-site .og-convivencia-banner__text {
    color: var(--og-text-muted);
    font-size: .78rem;
    line-height: 1.5;
}

/* ==========================================================================
   TAREA 1: HERO DE INICIO (IMAGEN DETRÁS DE LA CARD + DESTELLOS INFERIORES)
   ========================================================================== */
body.og-site {
    overflow-x: clip;
}

/* --- Escenario superior con imagen detrás de la card --- */
.og-site .og-hero-stage {
    isolation: isolate;
    padding: 2rem 0 4.75rem;
}

.og-site .og-hero-stage__backdrop {
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.og-site .og-hero-stage__img {
    position: absolute;
    inset: 0;
    background-image: url("/img/orviango/hero-conductor.jpg");
    background-size: cover;
    background-position: center 75%;
    background-repeat: no-repeat;
    filter: saturate(1.04) contrast(1.02);
}

/* Overlay sutil para integrar con la identidad verde sin tapar la foto */
.og-site .og-hero-stage__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 93, 69, 0.16) 0%,
        rgba(11, 93, 69, 0.08) 82%,
        rgba(245, 248, 246, 0.78) 95%,
        var(--og-bg) 100%
    );
}

/* --- Card del Hero (translúcida suave + destello interno) --- */
.og-site .og-hero-visitante {
    z-index: 1;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 22px 48px -12px rgba(11, 93, 69, 0.25),
        0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Destello suave DENTRO de la card del Hero */
.og-site .og-hero-visitante__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 86% 24%, rgba(96, 221, 156, 0.26) 0%, transparent 46%),
        radial-gradient(circle at 12% 90%, rgba(185, 242, 39, 0.16) 0%, transparent 38%);
    pointer-events: none;
}

/* ==========================================================================
   TAREA 2: ELEMENTO CIRCULAR AGRANDADO + ANIMACIÓN DE AUTOS Y HALO DE LUZ
   ========================================================================== */
.og-site .og-hero-visitante__compass {
    top: -3.5rem;
    right: -3.5rem;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(24, 166, 106, 0.16) 0%,
        rgba(24, 166, 106, 0.06) 58%,
        transparent 75%
    );
    opacity: 0.34;
    pointer-events: none;
}

.og-site .og-hero-visitante__compass i {
    font-size: 22.5rem;
    line-height: 1;
    color: var(--og-secondary);
}

/* Contenedor de la animación de autos en el Hero */
.og-site .og-hero-cars {
    min-height: 290px;
    isolation: isolate;
}

/* Halo de luz difuminado detrás de los autos */
.og-site .og-hero-cars__halo {
    position: absolute;
    inset: 6% 4%;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 52% 48%, rgba(24, 166, 106, 0.42) 0%, rgba(96, 221, 156, 0.22) 45%, transparent 74%),
        radial-gradient(circle at 72% 28%, rgba(185, 242, 39, 0.38) 0%, transparent 55%);
    filter: blur(36px);
    pointer-events: none;
}

.og-site .og-hero-cars__svg {
    width: 100%;
    max-width: 470px;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 12px 24px rgba(11, 93, 69, 0.12));
}

.og-site .og-car-flota {
    animation: og-hero-flotar 4s ease-in-out infinite;
}

.og-site .og-car-flota--d2 {
    animation-delay: -1.3s;
}

.og-site .og-car-flota--d3 {
    animation-delay: -2.6s;
}

@keyframes og-hero-flotar {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* --- Escenario inferior: Destellos desde "¿Cómo funciona Orvian Go?" hasta el final --- */
.og-site .og-visitante-lower-stage {
    isolation: isolate;
}

.og-site .og-visitante-lower-stage > section {
    position: relative;
    z-index: 1;
}

.og-site .og-visitante-destellos {
    position: absolute;
    inset: 2.5rem -2rem -1rem -2rem;
    z-index: 0;
    pointer-events: none;
}

.og-site .og-visitante-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(92px);
}

/* Destello 1: Debajo del título "¿Cómo funciona Orvian Go?" (derecha) */
.og-site .og-visitante-blob--1 {
    top: 2rem;
    right: -10rem;
    width: 32rem;
    height: 32rem;
    background: rgba(96, 221, 156, 0.46);
}

/* Destello 2: Zona media "Beneficios para la Comunidad" (izquierda) */
.og-site .og-visitante-blob--2 {
    top: 38%;
    left: -12rem;
    width: 34rem;
    height: 34rem;
    background: rgba(185, 242, 39, 0.32);
}

/* Destello 3: Zona inferior "Explorá recorridos" hasta el cierre (derecha/centro) */
.og-site .og-visitante-blob--3 {
    bottom: 2rem;
    right: -8rem;
    width: 30rem;
    height: 30rem;
    background: rgba(24, 166, 106, 0.36);
}

@media (max-width: 575.98px) {
    .og-site .og-visitante-blob--1,
    .og-site .og-visitante-blob--2,
    .og-site .og-visitante-blob--3 {
        width: 20rem;
        height: 20rem;
        filter: blur(72px);
    }
}

/* ==========================================================================
   TAREA 3: SISTEMA VISUAL DE FONDOS GLOBAL (MAPA INDEX2 + DESTELLOS)
   ========================================================================== */
.og-global-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(
        160deg,
        #f3f7f4 0%,
        #eef5f1 52%,
        #f4f8f5 100%
    );
}

.og-global-bg__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.og-global-bg__blob {
    position: absolute;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    filter: blur(92px);
    pointer-events: none;
}

.og-global-bg__blob--top {
    top: -14rem;
    right: -12rem;
    background: rgba(96, 221, 156, 0.42);
}

.og-global-bg__blob--bottom {
    bottom: -14rem;
    left: -12rem;
    background: rgba(185, 242, 39, 0.28);
}

/* Evita duplicar los blobs fijos en Publicar Viaje ya que ahora son globales */
.og-site .og-publicar-page::before,
.og-site .og-publicar-page::after {
    display: none;
}

/* Asegura que las cards y contenedores en Inicio, Mis Viajes, Buscar y Login
   resalten con profundidad sobre el mapa global */
.og-site #mainContentApp > .card,
.og-site .og-misviajes-page .og-mv-stat,
.og-site .og-misviajes-page .og-mv-trip,
.og-auth .og-auth-card {
    position: relative;
    z-index: 1;
}

@media (max-width: 575.98px) {
    .og-global-bg__blob {
        width: 22rem;
        height: 22rem;
        filter: blur(74px);
    }
}

/* ==========================================================================
   TAREA 4: MENÚ VISITANTE (ANCLA ACERCA DE + RESPONSIVE MÓVIL)
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

.og-site .og-scroll-target {
    scroll-margin-top: 5.5rem;
}

@media (max-width: 991.98px) {
    .og-site #navbarOrvianDesk .og-nav-auth {
        border-top: 1px solid var(--og-border);
    }
}

/* ==========================================================================
   TAREA 5: QA, RESPONSIVE, INTERACTIVIDAD Y ACCESIBILIDAD
   ========================================================================== */

/* 1. Cero scroll horizontal en toda la plataforma */
html,
body.og-site,
body.og-auth {
    max-width: 100%;
    overflow-x: clip;
}

/* 2. Blindaje de interactividad: ningún fondo ni destello captura clics */
.og-global-bg,
.og-global-bg *,
.og-hero-stage__backdrop,
.og-hero-stage__backdrop *,
.og-hero-visitante__glow,
.og-hero-visitante__compass,
.og-hero-cars__halo,
.og-visitante-destellos,
.og-visitante-blob,
.og-auth-blob {
    pointer-events: none;
    user-select: none;
}

/* Asegura que formularios, botones y cabecera de Login/Registro queden siempre arriba */
.og-auth .og-auth-header,
.og-auth .og-auth-wrap {
    position: relative;
    z-index: 2;
}

/* 3. Ajuste de encuadre de imagen y escala de autos en Tablets y Móviles */
@media (max-width: 991.98px) {
    .og-site .og-hero-stage {
        padding: 1.5rem 0 3.5rem;
    }

    /* Desplaza levemente el foco hacia el volante para que no se recorte en vertical */
    .og-site .og-hero-stage__img {
        background-position: 64% 88%;
    }

    .og-site .og-hero-cars {
        min-height: 230px;
    }

    .og-site .og-hero-cars__svg {
        max-width: 380px;
    }
}

@media (max-width: 575.98px) {
    .og-site .og-hero-stage {
        padding: 1rem 0 2.75rem;
    }

    .og-site .og-hero-stage__img {
        background-position: 68% 90%;
    }

    .og-site .og-hero-cars {
        min-height: 195px;
    }

    .og-site .og-hero-cars__svg {
        max-width: 310px;
    }
}

/* 4. Accesibilidad: preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .og-site .og-car-flota {
        animation: none;
    }
}

/* ==========================================================================
   SOLICITUDES RECIBIDAS (MODO CONDUCTOR - RICH CARDS OPCIÓN A)
   ========================================================================== */

/* Banner de Tip de Convivencia */
.og-site .og-sr-tip-banner {
    padding: .9rem 1.15rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--og-border);
    box-shadow: 0 4px 14px rgba(11, 93, 69, 0.04);
}

.og-site .og-sr-tip-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--og-secondary-subtle);
    color: var(--og-primary);
    font-size: 1.1rem;
    flex: 0 0 auto;
}

/* Tarjeta contenedora de buscador + Pills de estado */
.og-site .og-sr-filter-card {
    padding: 1.1rem 1.25rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid var(--og-border);
    box-shadow: 0 4px 16px rgba(11, 93, 69, 0.05);
}

.og-site .og-sr-search {
    position: relative;
}

.og-site .og-sr-search__icon {
    position: absolute;
    top: 50%;
    left: .95rem;
    transform: translateY(-50%);
    color: var(--og-text-muted);
    pointer-events: none;
}

.og-site .og-sr-search__input {
    padding-left: 2.45rem;
    border-radius: .75rem;
    border-color: var(--og-border);
    background-color: var(--og-bg);
    font-size: .88rem;
}

/* Pills de filtro por estado */
.og-site .og-sr-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: .65rem;
    border: 1px solid var(--og-border);
    background: #ffffff;
    color: var(--og-text-muted);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
}

.og-site .og-sr-pill:hover {
    color: var(--og-primary);
    border-color: #bde2d4;
    background: var(--og-primary-subtle);
}

.og-site .og-sr-pill.is-active {
    background: var(--og-primary);
    border-color: var(--og-primary);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(11, 93, 69, 0.22);
}

/* Circulitos contadores por estado: Todos, Pendientes (ámbar), Aceptadas (verde), Rechazadas (rojo), Canceladas (gris) */
.og-site .og-sr-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .42rem;
    border-radius: 999px;
    background: var(--og-primary-subtle);
    color: var(--og-primary);
    font-size: .7rem;
    font-weight: 700;
}

.og-site .og-sr-pill__count--amber {
    background: #fef3c7;
    color: #b45309;
}

.og-site .og-sr-pill__count--green {
    background: #dcfce7;
    color: #15803d;
}

.og-site .og-sr-pill__count--red {
    background: #fee2e2;
    color: #b91c1c;
}

.og-site .og-sr-pill__count--gray {
    background: #e2e8f0;
    color: #475569;
}

.og-site .og-sr-pill.is-active .og-sr-pill__count {
    background: #ffffff;
    color: var(--og-primary);
}

/* Rich Card de Solicitud */
/* Rich Card de Solicitud (estática al pasar el mouse) */
.og-site .og-sr-card {
    position: relative;
    border-radius: 1.1rem;
    background: #ffffff;
    border: 1px solid var(--og-border);
    box-shadow: 0 6px 20px rgba(11, 93, 69, 0.05);
    overflow: hidden;
}

/* Solicitud urgente / pendiente de confirmación */
.og-site .og-sr-card--urgente {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(180deg, #fffdf7 0%, #ffffff 42%);
    box-shadow: 0 10px 26px rgba(245, 158, 11, 0.10);
}

.og-site .og-sr-card__ribbon {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem 1.25rem;
    background: linear-gradient(90deg, #fef3c7 0%, #ecfdf5 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.25);
    color: #92400e;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.og-site .og-sr-card__pulse {
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: #d97706;
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.65);
    animation: og-sr-ping 1.8s infinite;
}

@keyframes og-sr-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.6);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(217, 119, 6, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
}

.og-site .og-sr-card__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: 1.2rem 1.25rem;
    align-items: center;
}

@media (min-width: 992px) {
    .og-site .og-sr-card__body {
        grid-template-columns: minmax(250px, 1.1fr) minmax(260px, 1.35fr) minmax(220px, .95fr);
        gap: 1.35rem;
    }
}

/* Bloque 1: Perfil del Pasajero (Avatar centrado en el círculo) */
.og-site .og-sr-card__passenger {
    display: flex;
    align-items: center;
    gap: .95rem;
    min-width: 0;
}

.og-site .og-sr-card__avatar-link {
    position: relative;
    flex: 0 0 3.35rem;
    width: 3.35rem;
    height: 3.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.og-site .og-sr-card__avatar-link:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px rgba(24, 166, 106, 0.28);
}

.og-site .og-sr-card__avatar-img {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 2px solid var(--og-primary-subtle);
    display: block;
}

.og-site .og-sr-card__avatar-fallback {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--og-primary-subtle);
    font-size: 1.5rem;
    line-height: 1;
}

.og-site .og-sr-card__avatar-fallback i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.og-site .og-sr-card__passenger-name {
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: .96rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .15s ease;
}

.og-site .og-sr-card__passenger-name:hover {
    color: var(--og-primary);
    text-decoration: underline;
}

.og-site .og-sr-card__rating {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .12rem .48rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-size: .73rem;
    font-weight: 700;
}

.og-site .og-sr-card__passenger-meta {
    color: var(--og-text-muted);
    font-size: .78rem;
    font-weight: 500;
    margin-bottom: .18rem;
}

.og-site .og-sr-card__sent-time {
    color: var(--og-text-muted);
    font-size: .72rem;
}

/* Bloque 2: Caja de Ruta del Viaje (Enlace clicable completo al detalle) */
.og-site .og-sr-card__trip {
    display: block;
    padding: .8rem 1rem;
    border-radius: .85rem;
    background: var(--og-bg);
    border: 1px solid var(--og-border);
    text-decoration: none;
    min-width: 0;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.og-site .og-sr-card__trip:hover {
    background: var(--og-primary-subtle);
    border-color: #bde2d4;
    box-shadow: 0 4px 12px rgba(11, 93, 69, 0.08);
}

.og-site .og-sr-card__route {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.og-site .og-sr-card__route-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .25rem;
    flex: 0 0 auto;
}

.og-site .og-sr-card__dot-origin {
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: var(--og-secondary);
}

.og-site .og-sr-card__dot-line {
    width: 2px;
    height: .8rem;
    background: #bde2d4;
    margin: 2px 0;
}

.og-site .og-sr-card__route-link {
    display: flex;
    align-items: center;
    color: var(--og-text-dark);
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    min-width: 0;
}

.og-site .og-sr-card__trip:hover .og-sr-card__route-link {
    color: var(--og-primary);
}

.og-site .og-sr-card__chip {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .2rem .58rem;
    border-radius: .5rem;
    background: #ffffff;
    border: 1px solid var(--og-border);
    color: var(--og-text-dark);
    font-size: .74rem;
    font-weight: 600;
}

.og-site .og-sr-card__chip--seats {
    background: var(--og-primary-subtle);
    border-color: #bde2d4;
    color: var(--og-primary);
}

/* Bloque 3: Badges de estado y botones de acción */
.og-site .og-sr-card__actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.og-site .og-sr-badge {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    padding: .28rem .72rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.og-site .og-sr-badge--pendiente {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.32);
}

.og-site .og-sr-badge--aceptada {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid rgba(22, 101, 52, 0.22);
}

.og-site .og-sr-badge--rechazada {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.2);
}

.og-site .og-sr-badge--cancelada {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid rgba(71, 85, 105, 0.18);
}

/* Badge del ÚNICO viaje más cercano (titila suavemente) */
.og-site .og-sr-badge--viaje-proximo {
    background: var(--og-secondary-subtle);
    color: var(--og-primary);
    border: 1px solid rgba(24, 166, 106, 0.45);
    animation: og-sr-proximo-glow 2s ease-in-out infinite;
}

.og-site .og-sr-badge__dot-ping {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--og-secondary);
    box-shadow: 0 0 0 0 rgba(24, 166, 106, 0.7);
    animation: og-sr-dot-pulse 1.6s infinite;
}

@keyframes og-sr-proximo-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(24, 166, 106, 0.15);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 10px 2px rgba(24, 166, 106, 0.32);
        opacity: 0.82;
    }
}

@keyframes og-sr-dot-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(24, 166, 106, 0.75);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(24, 166, 106, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(24, 166, 106, 0);
    }
}

/* Los demás viajes publicados futuros quedan estáticos sin titilar */
.og-site .og-sr-badge--viaje-activo {
    background: var(--og-primary-subtle);
    color: var(--og-primary);
}

.og-site .og-sr-badge__dot {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--og-primary);
}

.og-site .og-sr-badge--viaje-fin {
    background: #e2e8f0;
    color: #334155;
}

.og-site .og-sr-badge--viaje-canc {
    background: #ffe4e6;
    color: #9f1239;
}

/* Botones de acción de la Rich Card */
.og-site .og-sr-btn-accept {
    background: var(--og-primary);
    border: 1px solid var(--og-primary);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 600;
    border-radius: .6rem;
    padding: .38rem .85rem;
    box-shadow: 0 3px 10px rgba(11, 93, 69, 0.22);
    transition: all .16s ease;
}

.og-site .og-sr-btn-accept:hover {
    background: var(--og-primary-hover);
    border-color: var(--og-primary-hover);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(11, 93, 69, 0.28);
}

.og-site .og-sr-btn-reject {
    background: #ffffff;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    font-size: .78rem;
    font-weight: 600;
    border-radius: .6rem;
    padding: .38rem .75rem;
    transition: all .16s ease;
}

.og-site .og-sr-btn-reject:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #991b1b;
}

.og-site .og-sr-status-note {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border-radius: .5rem;
    background: var(--og-bg);
    color: var(--og-text-muted);
    font-size: .75rem;
    font-weight: 600;
}

.og-site .og-sr-status-note--success {
    background: #dcfce7;
    color: #166534;
}

/* ==========================================================================
   MIS SOLICITUDES (MODO PASAJERO) — PASE DE ABORDAJE + RESUMEN COMPACTO
   ========================================================================== */

/* Pase de Abordaje con fondo blanco difuminado (Glassmorphism) */
.og-site .og-ms-boarding {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-left: 5px solid var(--og-primary);
    border-radius: 1.15rem;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 8px 24px rgba(11, 93, 69, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.og-site .og-ms-boarding--confirmed {
    border-left-color: #16a34a;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 253, 244, 0.78) 100%);
}

.og-site .og-ms-boarding--pending {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 251, 235, 0.78) 100%);
}

.og-site .og-ms-boarding--empty {
    border-left-color: var(--og-primary);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(244, 250, 247, 0.78) 100%);
}

.og-site .og-ms-boarding__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding-bottom: .85rem;
    border-bottom: 1px dashed var(--og-border-strong);
}

.og-site .og-ms-boarding__eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--og-primary);
    display: inline-flex;
    align-items: center;
    gap: .38rem;
}

.og-site .og-ms-boarding__datetime {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--og-text);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--og-border);
    padding: .3rem .75rem;
    border-radius: 999px;
}

.og-site .og-ms-boarding__datetime i {
    color: var(--og-primary);
}

.og-site .og-ms-boarding__body {
    display: flex;
    flex-direction: column;
    gap: .95rem;
}

/* Recorrido con separación amplia entre dibujitos y texto */
.og-site .og-ms-boarding__route {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: .85rem;
    padding: .85rem 1.15rem;
}

.og-site .og-ms-boarding__timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .3rem 0 .15rem;
    flex: 0 0 1rem;
}

.og-site .og-ms-boarding__timeline-line {
    width: 2px;
    flex: 1;
    min-height: 1.15rem;
    background: #a7dfc9;
    margin: 4px 0;
}

.og-site .og-ms-boarding__stops {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    flex: 1;
}

.og-site .og-ms-boarding__stop {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.og-site .og-ms-boarding__stop-label {
    font-size: .67rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--og-text-muted);
    line-height: 1.2;
    margin-bottom: .1rem;
}

/* Tipografía Medium (500) liviana y elegante para direcciones */
.og-site .og-ms-boarding__city {
    font-family: inherit;
    font-size: .94rem;
    font-weight: 500;
    color: var(--og-text);
    line-height: 1.35;
    word-break: break-word;
}

.og-site .og-ms-boarding__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.og-site .og-ms-boarding__chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--og-text-muted);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--og-border);
    padding: .3rem .7rem;
    border-radius: .6rem;
}

.og-site .og-ms-boarding__chip i {
    color: var(--og-primary);
}

.og-site .og-ms-boarding__chip--link {
    text-decoration: none;
    color: var(--og-text);
    transition: border-color .15s ease, color .15s ease;
}

.og-site .og-ms-boarding__chip--link:hover {
    border-color: var(--og-primary-2);
    color: var(--og-primary);
}

.og-site .og-ms-boarding__empty-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    background: var(--og-primary-subtle);
    color: var(--og-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* Tarjeta Derecha: Resumen Compacto (Sin el espacio enorme) */
/* Tarjeta Derecha: Resumen Compacto con 3 Micro-Cards blancas proporcionales */
.og-site .og-ms-summary {
    background: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 1.15rem;
    padding: 1.05rem 1.15rem;
    box-shadow: 0 8px 24px rgba(11, 93, 69, 0.05);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.og-site .og-ms-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .15rem .45rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.65);
}

.og-site .og-ms-summary__title {
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--og-text-muted);
}

.og-site .og-ms-summary__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .55rem;
}

/* Cada fila es una micro-card blanca independiente que se reparte el alto (flex: 1) */
.og-site .og-ms-summary__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: .8rem;
    padding: .6rem .9rem;
    box-shadow: 0 2px 6px rgba(11, 93, 69, 0.03);
}

.og-site .og-ms-summary__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .68rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.02rem;
    flex-shrink: 0;
}

.og-site .og-ms-summary__icon--green {
    background: #dcfce7;
    color: #15803d;
}

.og-site .og-ms-summary__icon--amber {
    background: #fef3c7;
    color: #b45309;
}

.og-site .og-ms-summary__icon--teal {
    background: var(--og-primary-subtle);
    color: var(--og-primary);
}

.og-site .og-ms-summary__text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.og-site .og-ms-summary__label {
    font-size: .86rem;
    font-weight: 600;
    color: var(--og-text);
    line-height: 1.25;
}

.og-site .og-ms-summary__sub {
    font-size: .75rem;
    font-weight: 400;
    color: var(--og-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.og-site .og-ms-summary__value {
    font-family: inherit;
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--og-text);
    padding-left: .25rem;
}

/* Pill de vehículo en la columna del conductor */
.og-site .og-ms-vehicle-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 500;
    color: var(--og-primary);
    background: var(--og-primary-subtle);
    padding: .14rem .54rem;
    border-radius: 999px;
    width: fit-content;
    margin-top: .1rem;
}

/* Ajustes de grosor tipográfico en las Rich Cards (.og-sr-card) */
.og-site .og-sr-card__passenger-name {
    font-weight: 600;
    font-size: .95rem;
}

.og-site .og-sr-card__body > * {
    min-width: 0;
}

.og-site .og-sr-card__route {
    display: flex;
    align-items: stretch;
    gap: .85rem;
    min-width: 0;
}

.og-site .og-sr-card__route-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: .36rem 0 .2rem;
    flex: 0 0 .95rem;
}

.og-site .og-sr-card__route-dots .bi-geo-alt-fill {
    font-size: .88rem;
    line-height: 1;
    display: block;
}

.og-site .og-sr-card__dot-line {
    width: 2px;
    flex: 1;
    min-height: .35rem;
    background: #a7dfc9;
    margin: 2px 0;
}

.og-site .og-sr-card__route-stops {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .6rem;
    min-width: 0;
    flex: 1;
}

.og-site .og-sr-card__stop-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    line-height: 1.3;
}

.og-site .og-sr-card__stop-tag {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--og-text-muted);
    flex-shrink: 0;
}

/* Tipografía de direcciones: Medium 500, limpia y suave al ojo */
.og-site .og-sr-card__stop-text {
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    color: var(--og-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.og-site .og-sr-card__trip:hover .og-sr-card__stop-text {
    color: var(--og-primary);
}

/* Centro de ayuda rápida para pasajeros al pie */
.og-site .og-ms-help {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(24, 166, 106, 0.22);
    border-radius: 1.15rem;
    padding: 1.25rem;
}

.og-site .og-ms-help__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--og-text);
}

.og-site .og-ms-help__subtitle {
    font-size: .8rem;
    font-weight: 400;
    color: var(--og-text-muted);
}

.og-site .og-ms-help__card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--og-border);
    border-radius: .85rem;
    padding: .9rem 1rem;
    height: 100%;
    font-size: .8rem;
    font-weight: 400;
    color: var(--og-text-muted);
    line-height: 1.45;
}

.og-site .og-ms-help__card-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--og-text);
    margin-bottom: .35rem;
}

/* =========================================================
   PANTALLA MIS VEHÍCULOS — CARDS DE GARAJE Y CHAPA PATENTE
   ========================================================= */

.og-site .og-vehiculo-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.35rem 1.4rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 10px 26px rgba(15, 38, 28, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.og-site .og-vehiculo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 38, 28, .1);
    border-color: rgba(11, 107, 67, .24);
}

.og-site .og-vehiculo-card--inactivo {
    background: rgba(246, 248, 247, .78);
    border-color: rgba(203, 213, 225, .75);
}

.og-site .og-vehiculo-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.og-site .og-vehiculo-card__title-wrap {
    min-width: 0;
    flex: 1;
}

.og-site .og-vehiculo-card__year {
    font-size: .78rem;
    font-weight: 600;
    color: #5c6b62;
}

.og-site .og-vehiculo-card__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #16241c;
    line-height: 1.25;
    word-break: break-word;
}

/* Badges de estado del vehículo */
.og-site .og-vehiculo-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.og-site .og-vehiculo-status__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
}

.og-site .og-vehiculo-status--activo {
    background: #dcfce7;
    color: #065f46;
}

.og-site .og-vehiculo-status--activo .og-vehiculo-status__dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .22);
}

.og-site .og-vehiculo-status--inactivo {
    background: #e2e8f0;
    color: #475569;
}

.og-site .og-vehiculo-status--inactivo .og-vehiculo-status__dot {
    background: #64748b;
}

.og-site .og-vehiculo-status--en-ruta {
    background: #fef3c7;
    color: #92400e;
}

/* Chapa Patente Argentina (Mercosur / Clásica) */
.og-site .og-patente-badge {
    flex-shrink: 0;
    min-width: 116px;
    border-radius: .6rem;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .07);
    text-align: center;
}

.og-site .og-patente-badge__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .16rem .5rem;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffffff;
}

.og-site .og-patente-badge--mercosur .og-patente-badge__top {
    background: #003882;
}

.og-site .og-patente-badge--clasica .og-patente-badge__top {
    background: #1e293b;
}

.og-site .og-patente-badge__number {
    padding: .28rem .6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #0f172a;
    background: #ffffff;
}

/* 3 Micro-cards blancas de especificaciones */
.og-site .og-vehiculo-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    padding: .65rem;
    border-radius: 1rem;
    background: rgba(235, 242, 238, .65);
    margin-bottom: 1.1rem;
}

.og-site .og-vehiculo-spec-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: .65rem .75rem;
    border-radius: .75rem;
    background: #ffffff;
    border: 1px solid rgba(220, 232, 225, .85);
    box-shadow: 0 2px 6px rgba(15, 38, 28, .03);
}

.og-site .og-vehiculo-spec-item__label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #64748b;
    margin-bottom: .22rem;
}

.og-site .og-vehiculo-spec-item__value {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #1e293b;
}

.og-site .og-vehiculo-color-dot {
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(15, 23, 42, .18);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6);
}

/* Pie de card y botones de acción */
.og-site .og-vehiculo-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .95rem;
    border-top: 1px solid rgba(216, 228, 221, .8);
}

.og-site .og-vehiculo-card__hint {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 500;
    color: #526358;
    flex: 1 1 200px;
}

.og-site .og-vehiculo-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.og-site .og-vehiculo-btn {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .42rem .8rem;
    border-radius: .65rem;
    font-size: .82rem;
    font-weight: 600;
    transition: all .18s ease;
}

.og-site .og-vehiculo-btn--secondary {
    background: #f1f5f3;
    color: #1e293b;
    border: 1px solid #d8e3dd;
}

.og-site .og-vehiculo-btn--secondary:hover {
    background: #e2ebe6;
    color: #0f172a;
}

.og-site .og-vehiculo-btn--danger {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.og-site .og-vehiculo-btn--danger:hover {
    background: #ffe4e6;
    color: #9f1239;
}

.og-site .og-vehiculo-btn--primary {
    box-shadow: 0 4px 10px rgba(0, 109, 67, .18);
}

/* Estado vacío */
.og-site .og-vehiculos-empty {
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 24px rgba(15, 38, 28, .05);
}

.og-site .og-vehiculos-empty__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: #dcfce7;
    color: #006d43;
}

@media (max-width: 575.98px) {
    .og-site .og-vehiculo-specs {
        grid-template-columns: 1fr;
    }

    .og-site .og-vehiculo-card__header {
        flex-direction: column;
    }
}