/* ===== OWNER_TYPO01 (ACTIVE) ===== */
/* =========================================================
   OWNER_TYPO01 — Base typography + labels + muted
   Motivo: dueño único en components.css (no en brand)
   ========================================================= */
body, input, select, textarea, button{
  font-family: var(--brand-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji");
}

label{
  color: var(--brand-text);
}

.small, .hint, .help, .muted{
  color: var(--brand-muted);
}

/* END OWNER_TYPO01 */

/* ===== OWNER_TYPO01_DARK01 (ACTIVE) ===== */
html[data-mode="dark"] label{
  color: var(--brand-text);
}
html[data-mode="dark"] .small,
html[data-mode="dark"] .hint,
html[data-mode="dark"] .help,
html[data-mode="dark"] .muted{
  color: var(--brand-muted);
}
/* END OWNER_TYPO01_DARK01 */

/* ===== OWNER_INPUTS_DARK01 (ACTIVE) ===== */
html[data-mode="dark"] input,
html[data-mode="dark"] select,
html[data-mode="dark"] textarea{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 44px;
  outline: none;
}

html[data-mode="dark"] input::placeholder,
html[data-mode="dark"] textarea::placeholder{
  color: var(--muted);
  opacity: 1;
}

html[data-mode="dark"] input:focus,
html[data-mode="dark"] select:focus,
html[data-mode="dark"] textarea:focus{
  border-color: rgba(var(--accent-rgb, 255,138,31), .55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb-soft, 200,106,58), .20);
}
/* END OWNER_INPUTS_DARK01 */

/* ===== OWNER_INPUTS_FOCUS01 (ACTIVE) ===== */
/* Focus consistente (light + dark). Brand NO debe definir :focus */
html[data-mode="light"] input:focus,
html[data-mode="light"] select:focus,
html[data-mode="light"] textarea:focus{
  border-color: rgba(var(--accent-rgb, 37,99,235), .55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb-soft, 37,99,235), .18);
}

.ma-input:focus{
  border-color: rgba(var(--accent-rgb, 37,99,235), .55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb-soft, 37,99,235), .18);
}
/* ===== END OWNER_INPUTS_FOCUS01 ===== */

/* ===== OWNER_INPUTS_INVALID01 (ACTIVE) ===== */
/* Estados invalid/error para inputs (migrado desde brand-2026.css) */
input:invalid,
textarea:invalid,
select:invalid{
  border-color: rgba(var(--danger-rgb, 220,38,38), .55);
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb, 220,38,38), .12);
}

/* Clases comunes por si JS marca error */
.is-error, .error, .invalid{
  border-color: rgba(var(--danger-rgb, 220,38,38), .55);
}

.error-text, .text-error, .msg-error{
  color: var(--danger);
}
/* ===== END OWNER_INPUTS_INVALID01 ===== */


/* ===== OWNER_ITEMACTIONS_DARK01 (ACTIVE) ===== */
html[data-mode="dark"] .item-actions .secondary,
html[data-mode="dark"] .item-actions button.secondary,
html[data-mode="dark"] .item-actions a.secondary{
  background: rgba(255,255,255,.10);
  color: var(--text);
  border-color: var(--border);
}

html[data-mode="dark"] .item-actions .danger,
html[data-mode="dark"] .item-actions button.danger,
html[data-mode="dark"] .item-actions a.danger{
  background: var(--ds-danger, #dc2626);
  color: var(--danger-contrast);
}
/* END OWNER_ITEMACTIONS_DARK01 */

/* ===== ACTIONS_DARK01 (ACTIVE) ===== */
/* Asegura legibilidad de acciones en dark fuera de .item-actions */
html[data-mode="dark"] .actions button,
html[data-mode="dark"] .actions a{
  color: var(--text) !important;
}
/* ===== END ACTIONS_DARK01 ===== */


/* DS ETAPA B — components.css (DS_20260116_01) */
/* Reglas seguras: no dependen de clases nuevas; apuntan a patrones existentes */

html, body{
  font-family: var(--brand-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji");
}

/* Superficies base (suave) */
/* AUD_OWNER_BODYOFF01_DISABLED: html[data-mode="light"] body{ */
/* AUD_OWNER_BODYOFF01_DISABLED:   background: var(--ds-bg); */
/* AUD_OWNER_BODYOFF01_DISABLED:   color: var(--ds-text); */
/* AUD_OWNER_BODYOFF01_DISABLED: } */

/* Cards / panel / box (compat sin tocar legacy) */
.__DISABLED__COMP_GLOBAL_SURFACES01 .card, .__DISABLED__COMP_GLOBAL_SURFACES01 .panel, .__DISABLED__COMP_GLOBAL_SURFACES01 .box{
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
}

/* Inputs */
.__DISABLED__COMP_GLOBAL_INPUTS01 input, .__DISABLED__COMP_GLOBAL_INPUTS01 select, .__DISABLED__COMP_GLOBAL_INPUTS01 textarea{
  min-height: var(--ds-tap);
  border-radius: 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
}
.__DISABLED__AUD_PLACEHOLDER_DUP_2026 input::placeholder, .__DISABLED__AUD_PLACEHOLDER_DUP_2026 textarea::placeholder{
  color: var(--ds-muted);
}

/* Botones: asegura contraste y tap target */
.__DISABLED__COMP_GLOBAL_BUTTONS01 button, .__DISABLED__COMP_GLOBAL_BUTTONS01 .btn, .__DISABLED__COMP_GLOBAL_BUTTONS01 a.btn{
  min-height: var(--ds-tap);
  border-radius: 12px;
}

/* Primary (compat: button.primary, .btn-primary, .primary) */
.__DISABLED__COMP_GLOBAL_PRIMARY01 button.primary, .__DISABLED__COMP_GLOBAL_PRIMARY01 .btn-primary, .__DISABLED__COMP_GLOBAL_PRIMARY01 .primary{
  background: var(--ds-primary) !important;
  color: var(--ds-primary-contrast) !important;
  border: 1px solid var(--ds-border) !important;
}

  /* Secondary (.btn-secondary) */
  .__DISABLED__COMP_GLOBAL_SECONDARY01 .btn-secondary{
    background: var(--ds-secondary) !important;
    color: var(--ds-secondary-contrast) !important;
    border: 1px solid var(--ds-border) !important;
  }


  /* Danger (compat) */
  .__DISABLED__COMP_GLOBAL_DANGER01 button.danger, .__DISABLED__COMP_GLOBAL_DANGER01 .btn-danger, .__DISABLED__COMP_GLOBAL_DANGER01 .danger{
    background: var(--ds-danger) !important;
    color: var(--ds-primary-contrast) !important;
    border: 1px solid var(--ds-border) !important;
  }


/* Guardas del mapa (altura + stacking) */
.map, #map, .map-wrap, .mapbox{
  min-height: 280px;
}
@media (min-width: 768px){
  .map, #map, .map-wrap, .mapbox{ min-height: 360px; }
}
/* Evita que el mapa quede tapado por barras/cajas */
.map, #map{ position: relative; z-index: 1; }

/* ===== P1_MAP_HEIGHT01 (owner: components.css) ===== */
/* Pasajero: mapa protagonista estilo inDrive */

  /* PATCH: LEGACY_EXTRACT02_PAXMAPDOCK
     Moved legacy pax mapdock blocks to:
       css/_legacy/components.disabled_20260303.css
     (legacy for reference; not loaded)
  */


@media (min-width: 768px){

}
/* ===== P1_MAP_HEIGHT01 END ===== */

/* ===== P1_MAP_FULLBLEED_X01 (owner: components.css) ===== */
/* Pasajero: mapa full-bleed horizontal (sin padding lateral de card) */
body.role-passenger:not(.ma-registro-pasajero) .container > .card > #map{
  width: calc(100% + (var(--space-5) * 2));
  margin-left: calc(var(--space-5) * -1);
  margin-right: calc(var(--space-5) * -1);
  border-radius: 0;
}
/* ===== P1_MAP_FULLBLEED_X01 END ===== */


.__DISABLED__COMP_GLOBAL_ZINDEX01 .topbar, .__DISABLED__COMP_GLOBAL_ZINDEX01 .card, .__DISABLED__COMP_GLOBAL_ZINDEX01 .panel, .__DISABLED__COMP_GLOBAL_ZINDEX01 .box{ position: relative; z-index: 2; }

/* MAP_INTERACT01: asegurar interacción del mapa dentro de cards */
.__DISABLED__COMP_CARD_MAP01 .card #map{
  z-index: 5;
}
.__DISABLED__COMP_CARD_MAP01 .card #map canvas{
  pointer-events: auto;
}


/* =========================================================
   ET4F-4A — item-actions base (owner=components.css)
   Objetivo: sacar layout de compat.css sin romper legacy.
   ========================================================= */
.__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}
.__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > a,
.__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  flex:0 0 auto;
  min-height:44px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
}
@media (max-width:520px){
  .__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > a,
  .__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > button{
    flex:1 1 calc(50% - 12px);
  }
}


/* =========================================================
   MIG_ITEMACTIONS01 — moved from compat.css (layout only)
   Owner: components.css
   ========================================================= */
.__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > a,
.__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* Mobile: 2 por fila */
@media (max-width: 520px){
  .__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > a,
  .__DISABLED__COMP_ITEMACTIONS_OWNER01 .item-actions > button{
    flex: 1 1 calc(50% - 12px);
  }
}

/* =========================================================
   MIG_DISABLED_BUSY01 — moved from compat.css (state only)
   Owner: components.css
   ========================================================= */
button.is-disabled,
button[disabled]{
  opacity: .65 !important;
  cursor: not-allowed;
}

button.is-busy{
  pointer-events: none;
  opacity: .8;
}

/* UI_TRIPCARD01 — estilo moderno para "Mis viajes" */
.trip-card{
  margin: 12px 0;
  padding: 14px;
}

.trip-card__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-weight: 800;
}

.trip-card__when{
  margin-top: 6px;
  font-size: 13px;
}

.trip-card__body{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.35;
}

.trip-card__actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width:520px){
  .trip-card{ padding: 12px; }
}


/* UI_DRIVERPIN01: driver marker + label */
.ma-driver-pin{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--action);
  border: 3px solid var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  position: relative;
}

.ma-driver-pin__label{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--card);
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
  border-radius: 10px;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* === ET2_SHEET_DRIVER01 (OWNER) - Bottom-sheet + overlay (driver) === */
    /* SHEET_OVERLAY_CLOSE01: backdrop overlay + tap outside to close */
      body.role-driver #sheetOverlay{ position:fixed; left:0; right:0; bottom:72px; top:72px; z-index: var(--z-overlay, 80); background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition: opacity .18s ease; }
      body.role-driver #sheet:not(.sheet--collapsed) ~ #sheetOverlay{ opacity:1; pointer-events:auto; }

    /* SHEET_INDRIVE03: hide address badge (keep JS element) */
    #driverAddress{ display:none !important; }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    /* SHEET_INDRIVE02: hide brand-row on driver */
    .role-driver .brand-row{ display:none !important; }
  #sheet.sheet{
  /* SHEET_CONTRACT_CANON01 (owner: components.css)
     - bottom/z-index/max-height via variables (roles pueden override sin pelear)
     - vh estable via --vh (evita bugs móviles con 100vh)
  */
  position: fixed;
  left: 0; right: 0;
  bottom: var(--ma-sheet-bottom, 72px);
  z-index: var(--ma-sheet-z, var(--z-sheet, 90));

  max-height: var(--ma-sheet-maxh, calc((var(--vh, 1vh) * 100) - 12px));
  overflow: var(--ma-sheet-overflow, auto);

  background: var(--card, #fff);
  border-top: 1px solid var(--border, #ddd);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -12px 30px rgba(0,0,0,.12);

  padding: 10px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));

  transition: transform .22s ease;
  -webkit-overflow-scrolling: touch;
}
  #sheet .sheet__bar{ position:sticky; top:0; background: inherit;
    display:flex; align-items:center; gap:10px; padding: 6px 0 10px;
  }
  #sheet .sheet__title{ font-weight:700; }
  /* FIX_SHEET_TITLE_HIDE01: avoid duplicate "Menú" label */

  /* SHEET_MENU01 polish */
body.has-sheet{ overflow-x:hidden; padding-bottom: 12px; }
  #sheet .sheet__bar{ flex-direction: column; align-items: center; }
  #sheet .sheet__title{ font-size: 14px; opacity: .85; }
  /* FIX_SHEET_TITLE_HIDE01: avoid duplicate "Menú" label */


  #sheet .sheet__bar{ gap: 6px; }

  /* SHEET_MENU01 grid actions (indrive-like) */
  #sheet .sheet__actions{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 12px;
  }

/* SHEET_ACTIONS_RESPONSIVE_GRID01 */
@media (max-width: 420px){
  #sheet .sheet__actions{ grid-template-columns: 1fr; }
  #sheet .sheet__actions #btnLogout{ grid-column: auto; }
}
  #sheet .sheet__actions button{
    width:100%;
    border-radius: 14px;
    padding: 12px 12px;
    line-height: 1.1;
    white-space: nowrap;
  }
  #sheet .sheet__actions #btnLogout{
    grid-column: 1 / -1;
  }
  #sheet .sheet__actions #supportWhatsApp{ }
  #sheet .sheet__actions a.secondary{ display:flex; align-items:center; justify-content:center; text-decoration:none; }
  #sheet .sheet__actions a.secondary:visited{ color: inherit; }


  /* SHEET_MENU01 indrive look: cards inside sheet become flat sections */
  #sheet .card{
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 10px 0;
    margin: 0;
  }
  #sheet .card + .card{
    border-top: 1px solid rgba(0,0,0,.08);
  }
  #sheet h3{
    margin: 6px 0 10px;
  }
  #sheet .hr{ display:none; }
  #sheet .actions{ margin: 0 0 8px; }
  #sheet .actions button{ width:100%; }

  /* SHEET_TITLE_HIDE01: avoid duplicate "Menú" label */
  #sheet .sheet__title{ display:none; }


    /* UX_LOCKCARD01: disponibles compacto cuando hay viaje activo */
    #sheet.has-active-trip #cardAvailable.is-locked .actions{ display:none; }
    #sheet.has-active-trip #cardAvailable.is-locked #available{ margin-top: 6px; }
    #sheet.has-active-trip #cardAvailable.is-locked #available .item{ display:none; }
    #sheet.has-active-trip #cardAvailable.is-locked #available .ma-note-active{ display:block; }

  /* TRIPFLOW01: acciones operativas fuera del menú (debajo del mapa) */
  #tripFlow{ display:none; }
  #tripFlow.is-active{ display:block; }
  #tripFlow .item-actions{ display:flex; flex-wrap:wrap; gap:10px; }
  #tripFlow .item-actions > *{ flex:1 1 140px; }
  #tripFlow .item-actions a.secondary{ display:flex; align-items:center; justify-content:center; text-decoration:none; }

/* === ET2_SHEET_DRIVER01 (OWNER) END === */


/* === MAP_MARKERS01 (OWNER) - MapLibre marker colors (driver/passenger) === */
.ma-marker{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 3px solid var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.ma-marker--driver{ background: var(--accent); }
.ma-marker--origin{ background: var(--ok); }
.ma-marker--dest{ background: var(--danger); }
.ma-marker--passenger{ background: var(--ds-info, #2d8cff); }
/* === MAP_MARKERS01 (OWNER) END === */

/* MAP_MARKERS_POINTER01: no robar drag del mapa (solo tap/click lo maneja el mapa) */
body.role-passenger .maplibregl-marker,
body.role-passenger .maplibregl-marker *{
  pointer-events: none !important;
}


/* === STATES_OWNER01 (OWNER) - UI states (buttons, semantic states) === */
button.ok{
  background:var(--ok);
  color: var(--ds-primary-contrast, #fff);
}
/* === STATES_OWNER01 (OWNER) END === */


/* === STATES_OWNER02 (OWNER) - Badges + status semantic colors === */
.badge--ok{ color:var(--ok); }
.badge--danger{ color:var(--danger); }
.status--ok{ color:var(--ok); }
.status--error{ color:var(--danger); }

/* ETAPA4_STATUS_CONTRACT01 — mensajes/estados consistentes (ok/error/info) */

/* ETAPA4_STATUS_PILL01 — pill/tostada para mensajes setStatus */
.ma-msg{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.03);
  font-weight: 600;
  line-height: 1.25;
}

.ma-msg:empty{ display:none; }

.ma-msg.status--ok{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}
.ma-msg.status--error{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}
.ma-msg.status--info{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}
.status{
  font-weight: 600;
  line-height: 1.25;
}
.status--info{ color: var(--info); }

#msgOut{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.03);
}
#msgOut:empty{ display:none; }

/* Si JS aplica clases status--* al msgOut, se verá mejor automáticamente */
#msgOut.status--ok{ border-color: rgba(0,0,0,.12); }
#msgOut.status--error{ border-color: rgba(0,0,0,.12); }
#msgOut.status--info{ border-color: rgba(0,0,0,.12); }
/* === STATES_OWNER02 (OWNER) END === */
  /* PATCH: PAX_SHEETVARS01
     Passenger: ajustar sheet SOLO vía variables (sin duplicar propiedades).
     - Mantiene intención: no tapar todo el mapa.
     - Respeta vh real (var(--vh)).
  */
  body.role-passenger{ --ma-sheet-maxh: min(70vh, calc((var(--vh, 1vh) * 100) - 12px)); }

/* ===== DRIVER_CONTAINER_FULLWIDTH01 (owner: components.css) ===== */
/* Conductor: permitir layout full-width (no limitar a 980px). */
.__DISABLED__COMPONENTS_CONTAINER_OWNER01 body.role-driver .container{ max-width:none; }

  /* ===== PASSENGER_CONTAINER_FULLWIDTH01 (owner: components.css) ===== */
  /* Pasajero: permitir layout full-width (no limitar a 980px). */
.__DISABLED__COMPONENTS_CONTAINER_OWNER01 body.role-passenger:not(.ma-registro-pasajero) .container{ max-width:none; }
  /* ===== PASSENGER_CONTAINER_FULLWIDTH01 END ===== */

/* ===== DRIVER_CONTAINER_FULLWIDTH01 END ===== */


/* ===== LAYOUT_STAGE01_DRIVER (owner: components.css) ===== */
/* Conductor móvil: layout pro (mapa ~80% alto, sponsors ~20%) + full-bleed real */
@media (max-width: 520px){
  body.role-driver{
    --ma-map-h: 72vh;
    --ma-sponsors-min-h: 12vh;
  }
  /* Quita padding del container SOLO en driver para que el mapa use todo el ancho */
.__DISABLED__COMPONENTS_CONTAINER_OWNER01 body.role-driver .container{ padding-left:0; padding-right:0; }
  /* Reponer padding a topbar y contenido legible */
.__DISABLED__COMPONENTS_TOPBAR_OWNER01 body.role-driver .topbar{ padding-left: var(--space-5); padding-right: var(--space-5); }
  body.role-driver .container > .card > .badge-row,
  body.role-driver .container > .card > #tripFlow,
  body.role-driver #map ~ #msg{ padding-left: var(--space-5); padding-right: var(--space-5); }
  /* Aplicar alturas por variable */
  body.role-driver .container > .card > #map{ height: var(--ma-map-h); min-height: 460px; }
  body.role-driver #sponsors.ma-sponsors--reserved{ min-height: var(--ma-sponsors-min-h); }
}
/* ===== LAYOUT_STAGE01_DRIVER END ===== */

/* ===== DRIVER_MAP_FULLBLEED_HEIGHT01 (owner: components.css) ===== */
/* Objetivo: mapa protagonista en conductor (full-bleed + altura) sin afectar sheet. */
/* 1) La card del mapa (primera card del layout) no debe encerrar el mapa con padding */
body.role-driver .container > .card{ padding-left:0; padding-right:0; }
/* 2) Mantener legible el resto del contenido dentro de la card */
body.role-driver .container > .card > .badge-row,
body.role-driver .container > .card > #tripFlow,
body.role-driver #map ~ #msg{ padding-left: var(--space-5); padding-right: var(--space-5); }
/* 3) Mapa full-bleed dentro de la card */
body.role-driver .container > .card > #map{ width:100%; margin-left:0; margin-right:0; border-radius: 18px; }
/* 4) Altura protagónica (móvil) */
@media (max-width: 520px){
  .__DISABLED__OLD_DRIVER_MAP_H01 body.role-driver .container > .card > #map{ height: 62vh; min-height: 420px; }
}
/* 5) Altura en tablet/desktop */
@media (min-width: 521px){
  body.role-driver .container > .card > #map{ height: 560px; }
}
/* ===== DRIVER_MAP_FULLBLEED_HEIGHT01 END ===== */

/* ===== DRIVER_SPONSORS_SLOT01 (owner: components.css) ===== */
/* Reserva espacio para sponsors sin construirlos todavía.
   Importante: NO debe tapar el flujo del viaje (#tripFlow). */
body.role-driver .ma-sponsors--reserved{
  min-height: 72px;
  margin-top: 10px;
}

/* P1_MENU_BTN_ALWAYS_VISIBLE01 (OWNER) - Passenger: botón menú siempre visible */
.__DISABLED__P1_MENU_BTN_ALWAYS_VISIBLE01 body.role-passenger #btnMenu{
  position: fixed;
  top: 84px;
  right: 12px;
  z-index: 48; /* P1_MENU_BTN_ZFIX01: under overlay(49) */
}
/* P1_MENU_BTN_ALWAYS_VISIBLE01 (OWNER) END */

/* ===== P1_ADDRESS_BADGE01 (owner: components.css) ===== */
#passengerAddress.ma-address-badge{
  position: absolute;
  left: 12px;
  right: 12px;
  top: 56px; /* debajo del topbar */
  z-index: calc(var(--z-mapbtn, 60) - 1);
  display: block;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.70);
  color: var(--card);
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none; /* no robar taps al mapa */
}

/* Ajuste: si el topbar es más alto en algún layout */
@media (min-width: 860px){
  #passengerAddress.ma-address-badge{
    left: 16px;
    right: auto;
    max-width: clamp(520px, 42vw, 780px);
  }
}

/* ===== P1_ADDRESS_BADGE01 END ===== */

/* ===== P1_ADDRESS_BADGE_MOVE_TO_MAP01 (owner: components.css) ===== */
/* P1_MY_LOCATION01A_MAPBTN_OWNER01 (OWNER) START */
.ma-mapbtn{
  position:absolute;
  right:12px;
  bottom:96px; /* deja espacio para sponsors/controles */
  z-index: var(--z-mapbtn, 60);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:var(--card);
  box-shadow:0 8px 22px rgba(0,0,0,.14);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}
.ma-mapbtn:active{ transform: translateY(1px); }
/* P1_MY_LOCATION01A_MAPBTN_OWNER01 (OWNER) END */

/* P1_AUTOCOMPLETE_DEST_CSS01 (OWNER) START */
#destino_direccion{
  position: relative;
  z-index: 1;
}
#destinoSuggest.ma-suggest{
  display:none;
  position:absolute;
  left:0;
  right:0;
  margin-top:6px;
  background:var(--card);
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  max-height:240px;
  overflow:auto;
  z-index: calc(var(--z-mapbtn, 60) - 20);
}
#destinoSuggest.ma-suggest.is-open{ display:block; }
#destinoSuggest.ma-suggest .item{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  cursor:pointer;
}
#destinoSuggest.ma-suggest .item:last-child{ border-bottom:none; }
#destinoSuggest.ma-suggest .title{ font-weight:600; }
#destinoSuggest.ma-suggest .sub{ font-size:12px; opacity:.75; margin-top:2px; }
/* P1_AUTOCOMPLETE_DEST_CSS01 (OWNER) END */

/* P1_AUTOCOMPLETE_DEST_WRAP_CSS01 (OWNER) START */
.ma-suggestwrap{ position: relative; }
.ma-suggestwrap .ma-suggest{
  top: 100%;
}
/* P1_AUTOCOMPLETE_DEST_WRAP_CSS01 (OWNER) END */

/* P1_HIDE_TOP_BADGE01 — owner: components.css (passenger) */
body.role-passenger #passengerAddress{
  display:none !important;
}
/* END P1_HIDE_TOP_BADGE01 */

/* =========================================
   PAX_REQUEST_OVERLAY_CSS01 (owner: components.css)
   Overlay de solicitud (fuera del menú)
========================================= */
body.role-passenger #requestOverlay.ma-request{
  position: fixed;
  left: 12px;
  right: 12px;
  top: 84px;          /* debajo topbar */
  z-index: var(--z-mapbtn, 60); /* sobre el mapa */
  max-height: 52vh;   /* no tapa sponsors (ajustable) */
  overflow: auto;
}

body.role-passenger #requestOverlay.ma-request--hidden{
  display:none;
}

/* =========================================
   PAX_FAB_CSS02 (owner: components.css)
   Botón flotante (FAB) para abrir solicitud
========================================= */


body.role-passenger #btnRequestOpen.ma-fab{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: calc(var(--z-mapbtn, 60) + 2);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
}


/* === PAX_DOCK_LAYOUT01 (OWNER) - Passenger: dock de flujo (visible) + sheet como menú ===
   - Dock: contiene SOLO el flujo para crear viaje / estado.
   - Sheet: menú secundario (GPS, WhatsApp, Salir, Mis viajes, etc).
   - No toca IDs usados por JS, solo layout.
*/
@media (max-width: 520px){
  body.role-passenger{ --pax-dock-h: clamp(260px, 34vh, 380px); }

  /* Dock fijo abajo */
    body.role-passenger #paxDock{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-dock, 55);
    height: var(--pax-dock-h);
    overflow: auto;
    background: var(--card, #fff);
    border-top: 1px solid rgba(0,0,0,.10);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -12px 30px rgba(0,0,0,.12);
    padding: 10px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* PAX_DOCK_POINTER01: el dock no debe bloquear drag del mapa en área vacía */
  body.role-passenger #paxDock{ pointer-events: none; }
  body.role-passenger #paxDock *{ pointer-events: auto; }

  /* Mapa deja espacio para el dock */
    body.role-passenger .ma-mapwrap{
    /*__DISABLED__PAX_DOCK_MAGIC140__ height: calc(100vh - var(--pax-dock-h) - 140px); __DISABLED__*/
    min-height: 0;
    padding-bottom: var(--pax-dock-h);
  }
  body.role-passenger .ma-mapwrap #map{ height: 100%; }

  /* Botón mi ubicación por encima del dock */
  body.role-passenger .ma-mapbtn{ bottom: calc(var(--pax-dock-h) + 12px) !important; }

  /* Sheet vuelve a ser menú: colapsado oculto, abierto modal */
  /* PATCH: COLLAPSE_ROLEFIX01 - passenger: usa collapsed global + REAL01 (dedup) */
}
/* === PAX_DOCK_LAYOUT01 (OWNER) END === */

/* === PAX_CSS_CONTRACT01 (owner: passenger) ===============================
   Contract: z-index coherente para sheet modal (NO define alturas; eso lo maneja PAX_DOCK_LAYOUT01)
   ===================================================================== */
body.role-passenger{}

/* Sheet modal contract */

/* PATCH: PAX_OVERLAY_CONSOLIDATE01B
   Objetivo: un solo contrato para #sheetOverlay (estructura + estilo + estado cerrado).
   Nota: deja los 2 bloques históricos comentados para rollback fácil.
*/
body.role-passenger #sheetOverlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);

  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
/* /PATCH: PAX_OVERLAY_CONSOLIDATE01B */
/* __DISABLED__PAX_OVERLAY_OLD01__START

body.role-passenger #sheetOverlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}
__DISABLED__PAX_OVERLAY_OLD01__END */

body.role-passenger #sheet{
  z-index: var(--z-sheet);
}

/* Common map buttons */
body.role-passenger .map-btn,
body.role-passenger .ma-mapbtn,
body.role-passenger #btnMiUbicacion,
body.role-passenger #btn-mi-ubicacion{
  z-index: var(--z-mapbtn);
}


/* === PAX_OVERLAY_MODAL01 (owner: passenger) ===============================
   Overlay solo cuando el sheet está abierto (controlado por .sheet--collapsed)
   Usa opacity + pointer-events (animación suave). No usar display.
   ===================================================================== */
/* __DISABLED__PAX_OVERLAY_OLD01__START
body.role-passenger #sheetOverlay{
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
__DISABLED__PAX_OVERLAY_OLD01__END */

body.role-passenger #sheet:not(.sheet--collapsed) ~ #sheetOverlay{
  opacity: 1;
  pointer-events: auto;
}

/* === PAX_SPONSORS_LAYOUT01 (OWNER) - Passenger: sponsor siempre visible + dock no lo tapa ===
   Evidencia: pasajero.html tiene <div id="sponsors" class="ma-sponsors ma-sponsors--reserved">
   Problema: CSS solo define min-height para driver, passenger queda colapsado (0px).
   Objetivo:
   - reservar altura visible para #sponsors en passenger
   - evitar que #paxDock tape el sponsor
   - dar al mapa altura “real” sin depender solo de la card
*/
  /* PATCH: LEGACY_EXTRACT01
     Legacy block moved to: css/_legacy/components.disabled_20260303.css
     (kept for reference; NOT loaded by pages)
  */
/* Dock por encima del sponsor (sin taparlo) */
/*__DISABLED__ body.role-passenger #paxDock{ __DISABLED__*/
/*__DISABLED__   bottom: calc(var(--ma-sponsors-min-h) + 10px); __DISABLED__*/
/*__DISABLED__ } __DISABLED__*/

/* Mapa “protagonista”: que el wrapper tenga altura real de viewport menos sponsor */


/* Si el mapa está al 100% del wrapper, esto lo aprovecha */

/* === PAX_HIDE_COORDS_UI01 (OWNER) - Passenger: ocultar Lat/Lng al usuario, mantener lógica interna ===
   Evidencia pasajero.html:
   - #origen_lat, #origen_lng, #destino_lat, #destino_lng
   Objetivo:
   - no mostrar coordenadas ni tips de “copia coordenadas”
   - mantener inputs en DOM (no display:none) para que JS siga funcionando
*/
body.role-passenger label[for="origen_lat"],
body.role-passenger label[for="destino_lat"]{ display:none !important; }

/* Ocultar inputs de coordenadas sin sacarlos del DOM */
body.role-passenger #origen_lat,
body.role-passenger #origen_lng,
body.role-passenger #destino_lat,
body.role-passenger #destino_lng{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ocultar el label “Lat / Lng (...)” (no tienen for="" en tu HTML, así que atacamos por estructura):
   El label está dentro del mismo .col que contiene los inputs lat/lng.
*/
body.role-passenger #origen_lat,
body.role-passenger #destino_lat{}

/* Label de origen: es el label que está en el mismo .col que contiene #origen_lat */
body.role-passenger #origen_lat
  {}

/* Solución robusta sin :has(): ocultamos el label inmediatamente anterior al bloque row de inputs,
   usando clases actuales: el label está antes de <div class="row"> dentro del mismo .col.
   Como no podemos “subir” con CSS clásico, ocultamos por texto no es posible.
   Entonces: ocultamos TODOS los labels dentro de columnas que contienen inputs de coords,
   aplicando una clase auxiliar vía selector de ids: ocultamos el label dentro del mismo contenedor
   usando un wrapper selector existente: .row .col label + .row (patrón exacto de tu HTML).
*/
body.role-passenger .row .col label + .row{
  /* este selector apunta al div.row (contenedor de inputs). lo dejamos visible (no hacemos nada) */
}

/* Ocultamos el label que precede a esa .row dentro del mismo .col: no es seleccionable directo en CSS2.
   Entonces hacemos lo más seguro: ocultamos TODOS los labels cuyo texto NO podemos filtrar?
   NO. Mejor: ocultar por proximidad a inputs usando JS? Tampoco, pediste no tocar lógica.
   Alternativa segura: ocultar el contenedor completo de coords con IDs (wrapping) sería ideal,
   pero tu HTML no tiene wrapper con id/clase.
   => En vez de ocultar el label, basta con ocultar los inputs (ya) y ocultar el tip de coords.
*/

/* Ocultar tip de copiar coordenadas (es el small inmediatamente después del bloque destino_lng) */
body.role-passenger #destino_lng ~ .muted{
  display:none !important;
}

/* === PAX_HIDE_COORD_LABELS_CSS01 (OWNER) - Ocultar labels de coords (marcados) === */
body.role-passenger label.ma-debug-coords{ display:none !important; }

/*__DISABLED__ PAX_MAP_MINHEIGHT_RELEASE01 (OWNER) - Móvil: liberar min-height para que mapa deje espacio al dock __DISABLED__*/
/*__DISABLED__ @media (max-width: 520px){ __DISABLED__*/
/*__DISABLED__   body.role-passenger .ma-mapwrap{ __DISABLED__*/
/*__DISABLED__     min-height: 0 !important; __DISABLED__*/
/*__DISABLED__     height: calc(100vh - var(--pax-dock-h) - 131px) !important; __DISABLED__*/
/*__DISABLED__   } __DISABLED__*/
/*__DISABLED__ } __DISABLED__*/
/* ===== PAX_SPONSOR_CONTRACT02 (owner: components.css) =====
   Motivo (evidencia):
   - #sponsors está DENTRO de #paxDock (pasajero.html:44/155).
   - Existe colisión: otro bloque vuelve a definir #paxDock con bottom: calc(--ma-sponsors-min-h + 10px).
   - Existe colisión: .ma-mapwrap con min-height: calc(100dvh - sponsors - 140px) reduce mapa.
   Objetivo:
   - Dock passenger SIEMPRE pegado abajo (bottom:0).
   - Mapa visible grande: alto = viewport - dock.
*/
@media (max-width: 520px){


}
/* ===== PAX_SPONSOR_CONTRACT02 END ===== */


  /* PATCH: LEGACY_EXTRACT03_BLOCKS01 :: MA_SPONSOR_FOOTER_OWNER01
     moved to css/_legacy/components.disabled_20260303.css
  */
/* ===== PAX_APP_FULLSCREEN02 (owner: components.css) ===== */
/* Objetivo: Pasajero full-screen app, sin “caja” de .container (brand-2026.css). */
html, body{ height: 100%; }

body.role-passenger{
  margin: 0;
  background: var(--bg);
}

/* Override directo contra brand-2026.css:422 (.container padding) */
body.role-passenger:not(.ma-registro-pasajero) .container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Evita look “tarjeta” alrededor del mapa */
body.role-passenger:not(.ma-registro-pasajero) .container > .card{
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Mapa full-bleed */


/* ===== PAX_APP_FULLSCREEN02 END ===== */


/* ===== PAX_APP_FULLSCREEN04_OVERFLOW_FIX (owner: components.css) ===== */
/* Fix: evitar overflow horizontal por width:100vw (100vw puede incluir scrollbar). */
body.role-passenger{
  overflow-x: hidden;
}

/* En fullscreen app, el mapa debe ser 100% del layout, no 100vw */

/* ===== PAX_APP_FULLSCREEN04_OVERFLOW_FIX END ===== */


/* ===== PAX_SPONSOR_SEPARATOR01 (owner: components.css) ===== */
/* Separador sutil arriba del sponsor (sin colorear el bloque completo). */
body.role-passenger #sponsors.ma-sponsors{
  border-top: 1px solid var(--border);
}
/* ===== PAX_SPONSOR_SEPARATOR01 END ===== */


/* ===== PAX_TOPBAR_STABILITY01 (owner: components.css) =====
   Goal: evitar saltos visuales del botón Menú/Cerrar (passenger)
   Safe: override al final (no toca reglas previas)
*/
body.role-passenger #btnMenu{
  white-space: nowrap;
  min-width: 96px;
  text-align: center;
}
/* ===== PAX_TOPBAR_STABILITY01 END ===== */

/* ===== PAX_BTNMENU_SAFEAREA01 (owner: components.css) =====
   Goal: evitar número mágico top:84px; alinear btnMenu debajo de brand+topbar
   Note: tokens medidos en auditoría (ej device 485×765): brand=58, topbar=35
*/
body.role-passenger{
  --pax-brand-h: 58px;
  --pax-topbar-h: 35px;
  --pax-btn-gap: 8px;
}

body.role-passenger #btnMenu{
  top: calc(env(safe-area-inset-top) + var(--pax-brand-h) + var(--pax-topbar-h) + var(--pax-btn-gap));
}
/* ===== PAX_BTNMENU_SAFEAREA01 END ===== */

/* ===== PAX_BTNMENU_FLEX01 (owner: components.css) =====
   Evidence: btnMenu computed display=block -> causes odd wrap/centering when text toggles
   Fix: force stable inline-flex layout for icon+text.
*/
body.role-passenger #btnMenu{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* ===== PAX_BTNMENU_FLEX01 END ===== */
/* ===== PATCH: PAX_BADGE_ZFIX02 (2026-02-06) ===========================
   Evidence:
   - badge moved into map via P1_ADDRESS_BADGE_MOVE_TO_MAP01 (z-index:20 @ line ~506)
   - requestOverlay uses z-index:60 (line ~586) and can cover the badge
   Fix:
   - raise badge z-index within .ma-mapwrap
   - keep pointer-events:none
   - optional: center HUD for stability (no afecta el punto, solo UI)
======================================================================= */
body.role-passenger .ma-mapwrap #passengerAddress.ma-address-badge{
  position: absolute;
  display: block !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: 12px !important;
  max-width: calc(100% - 24px) !important;
  pointer-events: none !important;
}
/* ===== PATCH: PAX_BADGE_ZFIX02 END ===== */

/* =========================================================
   HOME_HOME_GRID01 (owner: components.css)
   Scope: html[data-page="home"]
   Objetivo: Home escalable (grid responsive), sin landing/latin
   Nota: NO afecta passenger/driver porque está scopiado
========================================================= */
html[data-page="home"]{
  --home-max: 1100px;
  --home-pad: 18px;
  --home-gap: 14px;
}

html[data-page="home"] .container{
  max-width: var(--home-max);
  margin: 0 auto;
  padding: var(--home-pad);
  display: grid;
  gap: var(--home-gap);
}

@media (min-width: 768px){
  html[data-page="home"] .container{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Header card full width */
  html[data-page="home"] .container > .card:first-child{
    grid-column: 1 / -1;
  }
  /* Footer card full width */
  html[data-page="home"] .container > .card:last-child{
    grid-column: 1 / -1;
  }
}
/* ===== HOME_HOME_GRID01 END ===== */

/* =========================================================
   HOME_HOME_CTA01 (owner: components.css)
   Scope: html[data-page="home"]
   Objetivo: mejorar look en móvil (sin romper grid desktop)
========================================================= */
html[data-page="home"] .card h1{ margin: 0 0 6px 0; }
html[data-page="home"] .card h2{ margin: 0 0 6px 0; }
html[data-page="home"] .card p{ margin: 8px 0; }

/* Botones full-width y más compactos en HOME */
html[data-page="home"] .card a.btn{
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* En desktop, el header card muestra CTAs en fila */
@media (min-width: 768px){
  html[data-page="home"] .container > .card:first-child p{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  html[data-page="home"] .container > .card:first-child p a.btn{
    width: auto;
  }
}
/* ===== HOME_HOME_CTA01 END ===== */

/* =========================================================
   HOME_HOME_POLISH02 (owner: components.css)
   Scope: html[data-page="home"]
   Objetivo: Home se vea pro (móvil + desktop) sin tocar HTML
========================================================= */
html[data-page="home"] .container{
  padding: 14px;
  gap: 12px;
}
html[data-page="home"] .card{
  border-radius: 18px;
}
html[data-page="home"] .container > .card:first-child{
  padding-bottom: 10px;
}
html[data-page="home"] .container > .card:first-child h1{
  font-size: 24px;
  line-height: 1.15;
}
html[data-page="home"] .container > .card:first-child p{
  color: var(--muted);
}
/* Botones HOME: menos altos, más pro */
html[data-page="home"] a.btn{
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 14px;
}
/* Agrupa botones del primer card y reduce espacios */
html[data-page="home"] .container > .card:first-child p{
  margin: 10px 0;
}
/* Cards gemelas (Pasajero/Conductor) más consistentes */
html[data-page="home"] .container > .card:nth-child(2) h2,
html[data-page="home"] .container > .card:nth-child(3) h2{
  font-size: 18px;
  margin-bottom: 6px;
}
/* Desktop: cards alineadas y botones al final */
@media (min-width: 768px){
  html[data-page="home"] .container > .card:nth-child(2),
  html[data-page="home"] .container > .card:nth-child(3){
    display: flex;
    flex-direction: column;
  }
  html[data-page="home"] .container > .card:nth-child(2) p:last-of-type,
  html[data-page="home"] .container > .card:nth-child(3) p:last-of-type{
    margin-top: auto;
  }
}
/* ===== HOME_HOME_POLISH02 END ===== */

/* ===========================
   HOME_MA_FIX01 (scoped)
   - WhatsApp flotante
   - Footer ligero
   =========================== */
html[data-page="home"] .homeFooter{
  margin-top: 10px;
  padding: 10px 6px;
  text-align: center;
  opacity: .75;
}

html[data-page="home"] .homeLead{
  margin-top: 6px;
  margin-bottom: 10px;
}

html[data-page="home"] .homeNote{
  margin-top: 6px;
  margin-bottom: 10px;
  opacity: .9;
}
}

/* ===========================
   HOME_MA_POLISH02 (scoped)
   - Centrar títulos en HOME
   =========================== */
html[data-page="home"] .container > .card:first-child{
  text-align: center;
}

html[data-page="home"] .container > .card.homeCard h2{
  text-align: center;
}

html[data-page="home"] .container > .card.homeCard .homeLead,
html[data-page="home"] .container > .card.homeCard .homeNote{
  text-align: center;
}

/* ===========================
   HOME_MA_POLISH03 (scoped)
   - Centrar botones + spacing pro
   =========================== */
html[data-page="home"] .container > .card.homeCard p{
  text-align: center;
}

/* Reduce separación entre los botones */
html[data-page="home"] .container > .card.homeCard p{
  margin: 10px 0;
}

/* Botones más “premium”: ancho controlado */
html[data-page="home"] .container > .card.homeCard .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(420px, 100%);
}


/* === STAGE: REGISTROS (mensaje único) === */
/* __DISABLED__ETAPA4_BANNER_OLD01 (replaced by ETAPA4_BANNER_POLISH01 at EOF) */
.ma-stage-banner{
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,122,0,0.22);
  background: rgba(255,122,0,0.10);
  color: var(--text);
  font-weight: 600;
  line-height: 1.25;
  /* === V1_2026-02-10_STAGE_BANNER_UNIFORM01 === */
  width: calc(100% - 24px);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

  /* ===== __DISABLED__ETAPA1_GLOBAL_OVERFLOW_X_LOCK01 (owner: components.css) ===== */
  /* html, body{ overflow-x: hidden; } */
  /* ===== __DISABLED__ETAPA1_GLOBAL_OVERFLOW_X_LOCK01 END ===== */

  /* ===== ETAPA1_SCOPED_OVERFLOW_X_LOCK01 (owner: components.css) ===== */
  body.ma-registro-pasajero,
  body.ma-registro-conductor{
    overflow-x: hidden;
  }
@media (max-width: 520px){
  .ma-stage-banner.__DISABLED__ETAPA4_BANNER_OLD01{ width: calc(100% - 16px); }
}

/* ===== ETAPA5_PRIMARY_ALIAS01 (2026-02-10)
   Objetivo: CTA primario SIEMPRE naranja teja (var(--action)),
   cubre: .btn.primary (landing), .primary (anchors/buttons), .btn-primary (forms), button.primary
   Nota: no depende de body.ma-landing, para que no falle en home si falta clase.
===== */
html[data-mode="light"] .btn.primary,
html[data-mode="light"] a.primary,
html[data-mode="light"] .primary,
html[data-mode="light"] .btn-primary,
html[data-mode="light"] button.primary{
  background: var(--action) !important;
  color: var(--card) !important;
  border-color: rgba(0,0,0,.08) !important;
}

html[data-mode="light"] .btn.primary:hover,
html[data-mode="light"] a.primary:hover,
html[data-mode="light"] .primary:hover,
html[data-mode="light"] .btn-primary:hover,
html[data-mode="light"] button.primary:hover{
  filter: brightness(.95);
}

/* ===== END ETAPA5_PRIMARY_ALIAS01 ===== */

/* ===== ETAPA5B_BTN_TOKENS01 (2026-02-10)
   Objetivo: clases oficiales mantenibles:
   .btn--primary y .btn--secondary.
===== */
html[data-mode="light"] .btn.btn--primary,
html[data-mode="light"] a.btn--primary,
html[data-mode="light"] .btn--primary{
  background: var(--action);
  color: var(--card);
  border-color: rgba(0,0,0,.08);
}
html[data-mode="light"] .btn.btn--primary:hover,
html[data-mode="light"] a.btn--primary:hover,
html[data-mode="light"] .btn--primary:hover{
  filter: brightness(.95);
}

html[data-mode="light"] .btn.btn--secondary,
html[data-mode="light"] a.btn--secondary,
html[data-mode="light"] .btn--secondary{
  background: var(--card);
  color: var(--text);
  border-color: rgba(0,0,0,.10);
}
html[data-mode="light"] .btn.btn--secondary:hover,
html[data-mode="light"] a.btn--secondary:hover,
html[data-mode="light"] .btn--secondary:hover{
  filter: brightness(.98);
}

  /* ===== BTN_SECONDARY_ALIAS01 (compat) ===== */
  html[data-mode="light"] .btn-secondary,
  html[data-mode="light"] button.secondary,
  html[data-mode="light"] a.secondary,
  html[data-mode="light"] .secondary{
    background: var(--card);
    color: var(--text);
    border-color: rgba(0,0,0,.10);
  }
  html[data-mode="light"] .btn-secondary:hover,
  html[data-mode="light"] button.secondary:hover,
  html[data-mode="light"] a.secondary:hover,
  html[data-mode="light"] .secondary:hover{
    filter: brightness(.98);
  }

  /* ÚNICO owner de WhatsApp FAB (HOME). Evita duplicados.
   - Base: fixed + sombra + centrado.
   - Móvil: círculo 56px, solo ícono.
   - Desktop: pill con texto.
===== */
html[data-page="home"] .waFloat{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--z-fab, 240);

  background: var(--whatsapp);
  color: var(--card);
  border: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  will-change: transform;
  line-height: 1;
}
html[data-page="home"] .waFloat:hover{
  transform: translateY(-2px);
  filter: brightness(.95);
}
html[data-page="home"] .waFloat:active{ transform: scale(.97); }

  /* Móvil: pill con texto (igual que desktop) */
  @media (max-width: 767px){
    html[data-page="home"] .waFloat{
      width: auto;
      height: auto;
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 14px;
      gap: 8px;
      white-space: nowrap;
    }
  }

/* Desktop: pill con texto */
@media (min-width: 768px){
  html[data-page="home"] .waFloat{
    width: auto;
    height: auto;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    gap: 8px;
  }
}
/* ===== END ETAPA5C_WA_FAB_SINGLE01 ===== */

/* ETAPA4_BANNER_POLISH01 — banner modo registros (más pro, sin romper layout) */
.ma-stage-banner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.03);
  color: var(--text);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.ma-stage-banner::before{
  content: "🟠";
  font-size: 12px;
  line-height: 1;
}

/* ================================
   ETAPA5_LOGIN_BTN01 (2026-02-10)
   Objetivo: CTA para #btnLogin SOLO en páginas de login
   Scope: estructura login (.topbar ~ .card .actions) + id único
   ================================ */
  /* PATCH: LEGACY_EXTRACT03_BLOCKS01 :: LOGINBTN_MULTILINE01
     moved to css/_legacy/components.disabled_20260303.css
  */


/* __DISABLED__ETAPA5_LOGIN_BTN01_DEDUP01 (old multiline duplicate) */
/* body .topbar ~ .card .actions #btnLogin:active{ */
/*   transform: translateY(1px); */
/* } */


/* ================================
   ETAPA5_LOGIN_BTN01 (PRINTF)
   CTA para #btnLogin SOLO en login (structure + id)
   ================================ */
body .topbar ~ .card .actions #btnLogin{ background: var(--action); border: 1px solid var(--action); color:var(--card); font-weight:700; }
body .topbar ~ .card .actions #btnLogin:hover{ filter: brightness(0.98); }
body .topbar ~ .card .actions #btnLogin:active{ transform: translateY(1px); }

/* ===== SHEET_COLLAPSED_REAL01 (2026-02-12)
   Objetivo: cuando el sheet está colapsado, que sea "menú minimizado" real
   (evita overlay/scroll raro y zonas tapadas).
===== */
body.role-passenger #sheet.sheet--collapsed{
  transform: translateY(calc(100% - 72px));
  max-height: 72px;
  overflow: hidden;
}
/* PATCH: SHEET_COLLAPSE_CONTRACT02 - passenger: barra-only en colapsado (scope por rol) */
body.role-passenger #sheet.sheet--collapsed > *:not(.sheet__bar){ display:none !important; }
body.role-passenger #sheet.sheet--collapsed .sheet__bar,
body.role-driver #sheet.sheet--collapsed .sheet__bar{
  pointer-events: auto;     /* asegura clic/tap en la barra */
}

/* ===== FORCE_HIDE_TRIPSTATUSCARD01 (2026-02-12)
   MODO REGISTROS: no mostrar estado del viaje en la pantalla principal.
   JS puede quitar .hidden, así que lo forzamos por ID.
===== */
body.role-passenger #tripStatusCard{
  display:none !important;
}

/* ===== DRIVER_SHEET_BOTTOM_LOCK01 (2026-02-11)
   FIX: reglas globales estaban forzando bottom: var(--ma-sponsor-h) también en DRIVER,
   y además el sheet terminaba con transform raro (translateY negativo).
   Objetivo: contrato estable en DRIVER:
   - abierto: bottom 72px, transform none
    - colapsado: sin transform (solo barra visible por max-height/overflow)
   Nota: SOLO DRIVER, NO toca PASSENGER.
===== */
  /* PATCH: COLLAPSE_ROLEFIX01 - driver bottom via variable (sin !important) */
  body.role-driver{ --ma-sheet-bottom: 12px; }
/* DRIVER_CLOSEBTN_VIS01 */
body.role-driver #sheet.sheet--collapsed .sheet__close{ display:none !important; }
body.role-driver #sheet:not(.sheet--collapsed) .sheet__close{ display:inline-flex; }
/* /DRIVER_CLOSEBTN_VIS01 */

/* DRIVER_SHEET_COLLAPSE_RESTORE01 */
/* cuando está colapsado, lo escondemos fuera de pantalla */
  /* PATCH: COLLAPSE_ROLEFIX01 - driver collapsed: sin transform, solo barra visible */
  body.role-driver #sheet.sheet--collapsed{
  transform: none;
  max-height: 72px;
  overflow: hidden;
}
/* PATCH: SHEET_COLLAPSE_CONTRACT02 - driver: barra-only en colapsado (scope por rol) */
body.role-driver #sheet.sheet--collapsed > *:not(.sheet__bar){ display:none !important; }
/* /DRIVER_SHEET_COLLAPSE_RESTORE01 */


/* ==========================================================
   REG_OWNER01_2026-02-16
   Scope: SOLO páginas de registro (pasajero / conductor registro).
   Objetivo: Un solo dueño para Card / Inputs / Primary CTA
   Nota: brand-2026.css debe dejar de estilizar .card/.form (solo variables).
   ========================================================== */

/* Card / panel en registros: superficie real + radio + sombra + padding */
body.ma-registro-pasajero .card,
body.ma-registro-conductor .card{
  background: var(--theme-card, var(--ds-surface, #fff));
  color: var(--ds-text, #0b1220);
  border: 1px solid var(--ds-border, rgba(0,0,0,.08));
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 20px;
}

/* =========================
   REG_INPUTS01
   Registro: .ma-input base + :focus (owner único REG)
   ========================= */

/* Inputs reales del registro (clase que ya existe) */
body.ma-registro-pasajero .ma-input,
body.ma-registro-conductor .ma-input{
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--ds-border, rgba(0,0,0,.12));
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0b1220);
  outline: none;
}

/* Focus: anillo suave, sin inventar colores fuera de tokens */
body.ma-registro-pasajero .ma-input:focus,
body.ma-registro-conductor .ma-input:focus{
  border-color: color-mix(in srgb, var(--ds-primary, #ea580c) 55%, rgba(0,0,0,0));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary, #ea580c) 22%, rgba(0,0,0,0));
}

/* =========================
   REG_BUTTONS_CTA01
   Registro: .btn-primary (CTA) — owner único REG
   ========================= */

/* Botón CTA (arregla “outset” y sombra azul) */
body.ma-registro-pasajero .btn-primary,
body.ma-registro-conductor .btn-primary{
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
}


/* REG_OWNER_OVERRIDE02_2026-02-16
   Gana contra PAX_APP_FULLSCREEN02 (role-passenger) en la pantalla de registro.
*/
body.role-passenger.ma-registro-pasajero .container > .card{
  padding: 20px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}


/* REGPAX_CARD_FORCE03_2026-02-16 — selector exacto de registro-pasajero */
body.ma-registro-pasajero main.container > section.card{
  background: #fff !important;
  padding: 20px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}


/* ===== OWNER_INPUTS01 (ACTIVE) ===== */
.ma-input{
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 12px;
  border-radius: var(--brand-radius);
  border: 1px solid var(--brand-border);
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0b1220);
  outline: none;
}

/* Focus accesible (usa acento del theme) */
.__DISABLED__AUD_MA_INPUT_FOCUS_DUP_COMPONENTS_2026 .ma-input:focus{
  border-color: rgba(29,78,216,.55);
  box-shadow: 0 0 0 4px rgba(29,78,216,.14);
}

/* ===== OWNER_INPUTS01 END ===== */


/* ===== OWNER_BUTTONS_MA01 (ACTIVE) ===== */
.ma-btn{
  min-height: var(--tap-min);
  border-radius: var(--brand-radius);
  border: 1px solid var(--brand-border);
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0b1220);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--brand-shadow-1);
  transition: transform .08s ease, filter .12s ease;
}
.ma-btn:active{ transform: translateY(1px); }

.ma-btn--primary{
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--danger-contrast);
}
.ma-btn--primary:hover{ filter: brightness(.95); }

.ma-btn--ghost{
  background: transparent;
  border-color: var(--brand-border);
  box-shadow: none;
}

/* ===== OWNER_BUTTONS_MA01 END ===== */

/* ===== OWNER_ITEMACTIONS_DARK_VIS01 (ACTIVE) =====
   Moved from brand-2026.css (was ~629-640)
   Purpose: avoid "ghost buttons" in dark mode inside .item-actions
*/
html[data-mode="dark"] .item-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
html[data-mode="dark"] .item-actions a,
html[data-mode="dark"] .item-actions button{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
/* ===== OWNER_ITEMACTIONS_DARK_VIS01 END ===== */


/* ===== OWNER_ACTIONS_TOPBAR_DARK01 (ACTIVE) =====
   Moved from brand-2026.css (was ~660-664)
   Purpose: secondary buttons visible in dark inside .actions (topbar)
*/
html[data-mode="dark"] .actions button.secondary{
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.25) !important;
}
/* ===== OWNER_ACTIONS_TOPBAR_DARK01 END ===== */


/* ===== OWNER_SURFACES_DARK01 (ACTIVE) =====
   Moved from brand-2026.css (was ~670-678)
   Purpose: ensure .card/.panel/.box use tokens in dark mode
*/
html[data-mode="dark"] .card,
html[data-mode="dark"] .panel,
html[data-mode="dark"] .box{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: calc(var(--brand-radius) + 4px) !important;
  box-shadow: var(--theme-shadow, var(--shadow)) !important;
}
/* ===== OWNER_SURFACES_DARK01 END ===== */


/* =========================

/* =========================
   OWNER_BUTTONS_FOCUS01
   Focus visible accesible (light/dark) — único dueño
   ========================= */

.ma-btn:focus,
.btn:focus,
.btn-primary:focus,
button.primary:focus,
a.ma-btn:focus,
a.btn:focus,
a.btn-primary:focus{
  outline: none;
}

.ma-btn:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
button.primary:focus-visible,
a.ma-btn:focus-visible,
a.btn:focus-visible,
a.btn-primary:focus-visible{
  outline: 2px solid var(--ds-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-primary) 25%, transparent);
}

/* No mostrar ring en disabled */
.ma-btn:disabled,
.btn:disabled,
.btn-primary:disabled,
button.primary:disabled{
  outline: none;
  box-shadow: none;
}


/* ==========================================================
   OWNER_INPUTS_LIGHT_BASE01_2026-02-16
   Migrado desde brand-2026.css (BRAND_TOKEN_INPUTS01)
   Motivo: Inputs son componente, owner único = components.css.
   ========================================================== */

html[data-mode="light"] input,
html[data-mode="light"] select,
html[data-mode="light"] textarea{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 44px;
  outline: none;
}

html[data-mode="light"] input::placeholder,
html[data-mode="light"] textarea::placeholder{
  color: var(--muted);
  opacity: 1;
}

html[data-mode="light"] input:disabled,
html[data-mode="light"] select:disabled,
html[data-mode="light"] textarea:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* /OWNER_INPUTS_LIGHT_BASE01 */


  /* PATCH: LEGACY_EXTRACT03_BLOCKS01 :: AUD_PAX_MAP_LAYOUT_FIX02
     moved to css/_legacy/components.disabled_20260303.css
  */
.maplibregl-control-container{
  z-index: 80;
}
  /* __DISABLED__AUD_PAX_LAYOUT01_DUP_2026 (marker-only; header comment only, NOT a disabled block) */
  /*__DISABLED__AUD_PAX_LAYOUT01_DUP_2026__END*/
/* __DISABLED__ ================================
   OWNER_PAX_LAYOUT01 (FINAL)
   Passenger layout: map + dock
   Single source of truth
   ================================ */
/* Dock (bottom sheet / controls) */


/* Asegura que el mapa no quede “tapado” visualmente */


/* ===== PAX_MAP_MOBILE_HEIGHT02 (OWNER) =====
   Fix: en móvil, .ma-mapwrap estaba con min-height:0 y #map con height:100% => colapsa a 0px.
   Objetivo: dar altura REAL al wrapper y asegurar min-height al #map.
   Scope: passenger app (móvil).
*/
@media (max-width: 520px){
  .__DISABLED__PAX_MAP_MOBILE_HEIGHT02 body.role-passenger .ma-mapwrap{
    height: calc(100dvh - var(--pax-dock-h));
    min-height: 360px;
  }
  .__DISABLED__PAX_MAP_MOBILE_HEIGHT02 body.role-passenger .ma-mapwrap #map{
    height: 100%;
    min-height: 360px;
  }
}
/* END PAX_MAP_MOBILE_HEIGHT02 */
/* PATCH: CONSOLIDATE_ROOT02 NOTE: tokens Notone migrados a brand-2026.css :root (owner). */
/* Cards/panels: respiración + sombra suave */
.card, .panel{
  border-radius: var(--ma-radius-card);
}

html[data-mode="light"] .card,
html[data-mode="light"] .panel{
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
}

html[data-mode="dark"] .card,
html[data-mode="dark"] .panel{
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Botones unificados */
.btn{
  border-radius: var(--ma-radius-btn);
  padding: 12px 14px;
  line-height: 1.1;
  letter-spacing: .2px;
}

/* Primary/Secondary: hover más “notone” */
html[data-mode="light"] .btn.btn--primary:hover,
html[data-mode="light"] .btn--primary:hover,
html[data-mode="light"] .btn.btn--secondary:hover,
html[data-mode="light"] .btn--secondary:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
}

html[data-mode="dark"] .btn.btn--primary:hover,
html[data-mode="dark"] .btn--primary:hover,
html[data-mode="dark"] .btn.btn--secondary:hover,
html[data-mode="dark"] .btn--secondary:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

/* Subespacios home: separar CTAs y que no se peguen */
html[data-page="home"] .card p{
  margin: 10px 0;
}
html[data-page="home"] .card p + p{
  margin-top: var(--ma-gap-cta);
}
html[data-page="home"] .card a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Registro/login: botones full width + consistencia */
body.ma-registro-pasajero .btn,
body.ma-registro-conductor .btn,
body .topbar ~ .card .actions .btn{
  width: 100%;
}

/* Chips: airecito (si existen) */
.chips, .poi-chips{
  gap: 10px;
}

/* === MA: Landing polish (data-page="landing") === */
html[data-page="landing"] .cards{
  display: grid;
  gap: 12px;
}

html[data-page="landing"] .card{
  padding: 16px;
}

html[data-page="landing"] .sub{
  line-height: 1.5;
  opacity: .84;
}

html[data-page="landing"] .btnrow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

html[data-page="landing"] .btnrow .btn{
  flex: 1 1 220px;
}

/* ================================
   ETAPA5_LOGIN_LAYOUT01 (2026-02-20)
   Objetivo: centrar y dar ancho pro al card de login (NO registros, NO passenger app)
   Scope: estructura login (.topbar ~ .card)
   ================================ */
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) .topbar ~ .card{
  max-width: 560px;
  margin: 18px auto;
}

@media (min-width: 900px){
  body:not(.ma-registro-pasajero):not(.ma-registro-conductor) .topbar ~ .card{
    max-width: 620px;
  }
}

/* Subespacios dentro del card */
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) .topbar ~ .card > * + *{
  margin-top: 10px;
}

/* ================================
   ETAPA5_LOGIN_TOPBAR01 (2026-02-20)
   Objetivo: topbar de login más discreto (“notone”) + alineado
   Scope: login (topbar ~ card), excluye registros
   ================================ */
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) .topbar{
  padding: 10px 14px;
  background: transparent;
  border-bottom: 0;
}

body:not(.ma-registro-pasajero):not(.ma-registro-conductor) .topbar a{
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  opacity: .9;
}

body:not(.ma-registro-pasajero):not(.ma-registro-conductor) .topbar a:hover{
  opacity: 1;
  filter: brightness(.98);
}

/* ================================
   ETAPA5_LOGIN_SUPPORT01 (2026-02-20)
   Objetivo: botón Soporte WhatsApp del header más discreto SOLO en login
   Scope: excluye registros
   ================================ */
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) a#supportWhatsApp.brand-support:not(.waFloat){
  min-height: 0;            /* baja el “bloque” 42px */
  padding: 6px 10px;        /* compacto */
  border-radius: 999px;     /* pill suave */
  font-weight: 600;         /* menos gritado */
  font-size: 13px;
  line-height: 1;

  background: transparent;  /* quita card/cta */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
}

/* Aunque tenga href real (wa.me/whatsapp), en login NO lo queremos como CTA principal */
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) a#supportWhatsApp.brand-support:not(.waFloat)[href*="wa.me"],
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) a#supportWhatsApp.brand-support:not(.waFloat)[href*="whatsapp"]{
  background: transparent;
  color: inherit;
  border-color: rgba(255,255,255,.18);
}

/* En pantallas chicas: NO ocupar 100% en login */
@media (max-width: 360px){
  body:not(.ma-registro-pasajero):not(.ma-registro-conductor) a#supportWhatsApp.brand-support:not(.waFloat){
    width: auto;
    justify-content: flex-start;
  }
}

/* ETAPA5_LOGIN_SUPPORT01B (2026-02-20) - aún más liviano (tipo link) */
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) a#supportWhatsApp.brand-support:not(.waFloat){
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.02);
}
body:not(.ma-registro-pasajero):not(.ma-registro-conductor) a#supportWhatsApp.brand-support:not(.waFloat):hover{
  background: rgba(255,255,255,.05);
}

/* MA_FIX_SHEET_WA_WIDTH: WhatsApp en sheet no debe ser CTA full-width */
body.role-passenger #sheet .sheet__actions #supportWhatsApp,
body.role-driver    #sheet .sheet__actions #supportWhatsApp{
  grid-column: auto !important;
  width: auto !important;
}

/* PATCH: COLLAPSE_ROLEFIX01 (applied) */
/* PATCH: PAX_SHEETVARS01 (applied) */

/* PATCH: SHEET_COLLAPSE_CONTRACT02 (applied) */

/* PATCH: SHEET_COLLAPSE_CONTRACT03 (applied) */

/* PATCH: SHEET_CONTRACT_CLEAN01 (applied) */

/* PATCH: LEGACY_EXTRACT01 (applied) */

/* PATCH: LEGACY_EXTRACT02_PAXMAPDOCK (applied) */

/* PATCH: LEGACY_MARKER_CLEAN01 (applied) */

/* PATCH: LEGACY_EXTRACT03_BLOCKS01 (applied) */

/* PATCH: LEGACY_EXTRACT03B_LOGINBTN_CLEAN01 (applied) */

/* PATCH: AUDLAYOUT01_MARKERFIX01B (applied) */

/* PATCH: DISABLED_TAILCLEAN01 (applied) */

/* PATCH: PAX_DEDUP_MAPHEIGHT01 (applied) */

/* PATCH: PAX_DEDUP_MAPHEIGHT02 (applied) */

/* PATCH: BADGE_DEDUP01 (applied) */

/* PATCH: PAX_DOCK_CLAMP_CLEAN01 (applied) */




/* PATCH: MENU_FULLSCREEN_BAR_STICKY01 (OWNER)
   Evidencia: #sheet es el scroller (overflow:auto) y #btnMenu NO está dentro de #sheet.
   Solución: hacer sticky el header real dentro del scroller: #sheet .sheet__bar
*/
body.ma-menu-open #sheet.sheet .sheet__bar{
  position: sticky;
  top: 0;
  z-index: calc(var(--z-menu, 400) + 3);
  background: var(--card);
  padding-top: env(safe-area-inset-top);
}
/* /PATCH: MENU_FULLSCREEN_BAR_STICKY01 */


/* PATCH: PAX_MENU_BTN_ABOVE_BAR01_DISABLE01 (applied)
   Motivo: En PASAJERO, el hit-test seguía cayendo en .sheet__bar aunque z-index subía.
   Se reemplaza por PAX_MENU_BTN_PIN_TOPRIGHT02.
*/

  /* __DISABLED__ PAX_MENU_BTN_ABOVE_BAR01 (HISTORICAL)
     Motivo: antes se intentó elevar #btnMenu con position:relative + z-index (400+10).
     Se elimina porque estaba escrito con comentarios anidados (CSS inválido) y terminaba activo.
     PATCH: MENU_DISABLED_NESTFIX02_CLEAN01
  */

/* PATCH: FIX_DISABLED_PIN_TOPRIGHT02_NESTED_COMMENT01
   Objetivo: evitar comentarios anidados (CSS inválido).
   Se convierte el bloque histórico a líneas comentadas seguras.
*/
/*__DISABLED__ / * __DISABLED__PAX_MENU_BTN_PIN_TOPRIGHT02__START */
/*__DISABLED__ / * PATCH: PAX_MENU_BTN_PIN_TOPRIGHT02 (OWNER) */
/*__DISABLED__    Evidencia (PASAJERO, menuOpen:true): */
/*__DISABLED__    - #btnMenu no quedaba arriba (btnRect.top alto) por overrides (ej. PAX_BTNMENU_SAFEAREA01 top: brand+topbar). */
/*__DISABLED__    Solución: anclar el botón en top-right en fullscreen (fixed) con selector de PASAJERO + !important solo en props críticas. */
/*__DISABLED__    PATCH-UPDATE: PAX_MENU_BTN_PIN_TOPRIGHT02_UPGRADE01 */
/*__DISABLED__ * / */
/*__DISABLED__ body.role-passenger.ma-menu-open #btnMenu, */
/*__DISABLED__ body.role-passenger.ma-menu-open #sheet #btnMenu{ */
/*__DISABLED__   position: fixed !important; */
/*__DISABLED__   top: calc(8px + env(safe-area-inset-top)) !important; */
/*__DISABLED__   right: 12px !important; */
/*__DISABLED__   left: auto !important; */
/*__DISABLED__   z-index: calc(var(--z-menu, 400) + 50) !important; */
/*__DISABLED__ } */
/*__DISABLED__ / * Evitar que el contenido de la barra “pise” el área del botón * / */
/*__DISABLED__ body.role-passenger.ma-menu-open #sheet.sheet .sheet__bar{ */
/*__DISABLED__   padding-right: 120px !important; */
/*__DISABLED__ } */
/*__DISABLED__    */
/*__DISABLED__ __DISABLED__PAX_MENU_BTN_PIN_TOPRIGHT02__END * / */
/*__DISABLED__  */
/* /PATCH: FIX_DISABLED_PIN_TOPRIGHT02_NESTED_COMMENT01 */
/* PATCH: PAX_MENU_BTN_CANONICAL01
   Objetivo: un solo contrato final para #btnMenu en PASAJERO cuando ma-menu-open.
   Source of truth: z-layers en compat.css (--z-menu-btn, --sat, etc).
*/


body.role-passenger.ma-menu-open #btnMenu{
  position: fixed;
  top: calc(8px + var(--sat, env(safe-area-inset-top)));
  right: 12px;
  left: auto;
  z-index: var(--z-menu-btn);
  pointer-events: auto;
}

/* Dejar espacio en la barra del sheet para que no “pise” el área del botón */
body.role-passenger.ma-menu-open #sheet.sheet .sheet__bar{
  padding-right: 120px;
}

/* PATCH: RESTORE_PAX_MENU_BTN_CANONICAL01_AFTER_DEDUP01 (applied) */
  /* PATCH: PAX_MENU_TOPBAR_LAYERFIX01_DEDUP01
     Nota: #btnMenu se gobierna SOLO por PAX_MENU_BTN_CANONICAL01.
     TOPBAR_LAYERFIX01 se queda únicamente elevando .topbar para romper stacking-context.
  */
  /* /PATCH: PAX_MENU_TOPBAR_LAYERFIX01_DEDUP01 */

  /* /PATCH: PAX_MENU_TOPBAR_LAYERFIX01 */



/* PATCH: RESTORE_PAX_MENU_TOPBAR_LAYERFIX01_RULE01
   Evidencia previa: elementFromPoint() sobre #btnMenu devolvía #trips.list.
   Objetivo: romper stacking-context heredado y elevar la topbar por encima del sheet/overlay.
*/
body.role-passenger.ma-menu-open .topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-menu-btn);
  transform: none !important;
}
/* /PATCH: RESTORE_PAX_MENU_TOPBAR_LAYERFIX01_RULE01 */
/* PATCH: PAX_MENU_SHEET_TOPCUT01
   Objetivo: si el sheet sigue cubriendo el área del btnMenu, recortar top del sheet/overlay
   cuando el menú fullscreen está abierto (deja libre la franja de la topbar).
*/
body.role-passenger.ma-menu-open #sheet.sheet{
  top: var(--ma-topbar-h) !important;
}
body.role-passenger.ma-menu-open #sheetOverlay{
  top: var(--ma-topbar-h) !important;
}
/* /PATCH: PAX_MENU_SHEET_TOPCUT01 */

/* PATCH: ZLAYERS_UNIFY01 - removidos duplicados de vars; source of truth en compat.css */

/* PATCH: CONSOLIDATE_TOKENS01
   - Removed duplicate --brand-font from components.css (source of truth: brand-2026.css)
*/


/* PATCH: CONSOLIDATE_ROOT02 APPLIED */


/* PATCH: REQUESTOVERLAY_ZFIX03
   - requestOverlay: z-index 60 -> var(--z-mapbtn, 60)
*/


/* PATCH: REQUESTOVERLAY_COMMENTSPACE01
   - Cosmetic: add space before comment after requestOverlay z-index.
*/


/* PATCH: ZINDEX_TO_VARS01C_FINAL
   - Normaliza z-index passenger a vars (z-layers) definidas en compat.css.
*/


/* PATCH: ZINDEX_TO_VARS01C_FORMATFIX01
   - Cosmetic: fix newline formatting after ZINDEX_TO_VARS01C_FINAL substitutions.
*/


/* PATCH: ZINDEX_TO_VARS01C_INDENTFIX01
   - Cosmetic: normalize indentation after z-index var migration.
*/


/* PATCH: BADGE_ZINDEX_OVERRIDE_TO_VARS01
   - Badge override: 59 !important -> calc(var(--z-mapbtn, 60) - 1) !important.
*/


/* PATCH: BADGE_OVERRIDE_COMMENTSPACE01
   - Cosmetic: add space before comment after badge override z-index.
*/


/* PATCH: BADGE_CONTRACT_UNIFY01
   - Unify badge z-index contract: base -> calc(var(--z-mapbtn, 60) - 1)
   - Remove duplicate z-index from override block (keep other overrides)
*/


/* PATCH: DISABLED_BANNER_CLOSE01
   - Close single-line __DISABLED__ banner comments to avoid runaway comment blocks.
*/


/* PATCH: DISABLED_HEADER_WRAP01
   - Wrap stray OWNER_PAX_LAYOUT01 banner text into a valid comment block.
*/


/* PATCH: DISABLED_HEADER_BEAUTIFY01
   - Normalize OWNER_PAX_LAYOUT01 __DISABLED__ header comment formatting.
*/


/* PATCH: DISABLED_HEADER_ALIGN01
   - Cosmetic: normalize indentation of __DISABLED__ OWNER_PAX_LAYOUT01 header.
*/