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

html, body{
  font-family: var(--ds-font);
}

/* 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);
}
input::placeholder, 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 */
body.role-passenger #map{
  height: 65vh;
  min-height: 360px;
}

@media (min-width: 768px){
  body.role-passenger #map{
    height: 60vh;
  }
}
/* ===== P1_MAP_HEIGHT01 END ===== */

/* ===== P1_MAP_FULLBLEED_X01 (owner: components.css) ===== */
/* Pasajero: mapa full-bleed horizontal (sin padding lateral de card) */
body.role-passenger .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: #ff7a18;
  border: 3px solid #fff;
  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: #111;
  color: #fff;
  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:49; 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{ position:fixed; left:0; right:0; bottom:72px; z-index:50;
    max-height:calc(100vh - 12px); 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;
    transition: transform .22s ease;
    -webkit-overflow-scrolling: touch;
  }
  #sheet.sheet--collapsed{ transform: translateY(calc(100% - 72px)); }
  /* HIDE_SHEET_ACTIONS_WHEN_COLLAPSED01: acciones secundarias solo dentro del menú abierto */
  /* HIDE_SHEET_CONTENT_WHEN_COLLAPSED01: colapsado = solo barra visible (no "Mis viajes") */
  #sheet.sheet--collapsed > *:not(.sheet__bar){ display:none !important; }
  #sheet.sheet--collapsed{ padding-bottom: 0 !important; }
  #sheet.sheet--collapsed .sheet__actions{ display:none !important; }
  #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{ padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #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 .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{ grid-column: 1 / -1; }
  #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 #fff;
  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 === */


/* === 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 === */


/* P1_SHEET_MAXH01 (passenger): no tapar todo el mapa */
body.role-passenger #sheet.sheet{
  max-height: 70vh;
  overflow-y: auto;
}


/* ===== 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 .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 .container > .card > #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 .container > .card > #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: 30;
  display: block;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.70);
  color: #fff;
  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: 520px;
  }
}

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

/* ===== P1_ADDRESS_BADGE_MOVE_TO_MAP01 (owner: components.css) ===== */
body.role-passenger .ma-mapwrap{
  position: relative;
}
/* badge: overlay dentro del mapa (no en el header) */
body.role-passenger .ma-mapwrap #passengerAddress.ma-address-badge{
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 20;
}
/* ===== P1_ADDRESS_BADGE_MOVE_TO_MAP01 END ===== */



/* P1_MY_LOCATION01A_MAPBTN_OWNER01 (OWNER) START */
.ma-mapbtn{
  position:absolute;
  right:12px;
  bottom:96px; /* deja espacio para sponsors/controles */
  z-index:30;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  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:#fff;
  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: 40;
}
#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: 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 .ma-mapwrap{ position: relative; }

body.role-passenger #btnRequestOpen.ma-fab{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 62;
  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: 34vh; }

  /* Dock fijo abajo */
  body.role-passenger #paxDock{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    height: var(--pax-dock-h);
    max-height: 40vh;
    min-height: 30vh;
    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));
  }

  /* 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: 360px;
  }
  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 */
  body.role-passenger #sheet.sheet--collapsed{ transform: translateY(calc(100% - 72px)); }
}
/* === 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{
  --z-map: 1;
  --z-mapbtn: 30;
  --z-dock: 55;
  --z-overlay: 60;
  --z-sheet: 70;
}

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

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.
   ===================================================================== */
body.role-passenger #sheetOverlay{
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

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
*/
/*__DISABLED__PAX_SPONSORS_LAYOUT01__ START */
/*__DISABLED__BLOCK__START

:root{
  --ma-sponsors-min-h: 12vh; /* si ya existe en otro lado, esto no rompe; se puede ajustar */
}

body.role-passenger #sponsors.ma-sponsors--reserved{
  display:block;
  min-height: var(--ma-sponsors-min-h);
  height: var(--ma-sponsors-min-h);
  position: sticky;
  bottom: 0;
  z-index: 40;           /* debajo del dock (55) y del sheet (70), encima del mapa */
  background: var(--surface, #fff);
}

__DISABLED__BLOCK__END*/
/*__DISABLED__PAX_SPONSORS_LAYOUT01__ END */

/* 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 */
body.role-passenger .ma-mapwrap{
  /*__DISABLED__MAGIC140__ min-height: calc(100dvh - var(--ma-sponsors-min-h) - 140px); __DISABLED__*/
}

/* Si el mapa está al 100% del wrapper, esto lo aprovecha */
body.role-passenger .ma-mapwrap #map{
  height: 100%;
}

/* === 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){

  body.role-passenger #paxDock{
    bottom: 0 !important;
  }

  body.role-passenger .ma-mapwrap{
    min-height: 0 !important;
    height: calc(100dvh - var(--pax-dock-h) - var(--ma-sponsor-h)) !important;
  }

  body.role-passenger .ma-mapwrap #map{
    height: 100% !important;
  }
}
/* ===== PAX_SPONSOR_CONTRACT02 END ===== */

/* ============================================================
   MA_SPONSOR_FOOTER_OWNER01 (OWNER)
   Sponsor: footer fijo abajo, siempre visible (driver + passenger)
   Altura híbrida: porcentaje + mínimo + máximo
   ============================================================ */
:root{
  --ma-sponsor-h: clamp(56px, 10vh, 120px);
}

/* Sponsors footer fijo */
#sponsors.ma-sponsors{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  height: var(--ma-sponsor-h);
  min-height: var(--ma-sponsor-h);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Dock del pasajero queda encima del sponsor */
body.role-passenger #paxDock{
  bottom: var(--ma-sponsor-h) !important;
}

/* Sheet (menú) también por encima del sponsor */
  body.role-passenger #sheet.sheet{
    bottom: var(--ma-sponsor-h) !important;
  }

/* ===== 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: #fff;
}

/* Override directo contra brand-2026.css:422 (.container padding) */
body.role-passenger .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 .container > .card{
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Mapa full-bleed */
body.role-passenger .ma-mapwrap{
  margin: 0 !important;
  padding: 0 !important;
}

body.role-passenger #map{
    /* __DISABLED__ETAPA1_OVERFLOW_100VW__ width: 100vw !important; */
    /* __DISABLED__ETAPA1_OVERFLOW_100VW__ max-width: 100vw !important; */
    /* __DISABLED__ETAPA1_OVERFLOW_100VW__ border-radius: 0 !important; */
}
/* ===== 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 */
body.role-passenger #map{
  width: 100% !important;
  max-width: 100% !important;
}
/* ===== 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 rgba(0,0,0,.08);
}
/* ===== 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 ===== */

/* ===== PAX_BADGE_SHOW_IN_MAP01 (owner: components.css) =====
   Evidence: P1_HIDE_TOP_BADGE01 sets #passengerAddress display:none !important,
             causing rect=0 and badge invisible.
   Fix: when badge is inside .ma-mapwrap (overlay), force it visible.
*/
body.role-passenger .ma-mapwrap #passengerAddress.ma-address-badge{
  display: block !important;
}
/* ===== PAX_BADGE_SHOW_IN_MAP01 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{
  z-index: 59 !important;          /* under requestOverlay(60), over map/buttons */
  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;
}

/* __END_DISABLED__WA_FLOAT_DUP__HOME_MA_FIX01 */
}

/* ===========================
   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: #2b2b2b;
  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;
/* __END_DISABLED__ETAPA4_BANNER_OLD01 */
}

  /* ===== __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: #fff !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: #fff;
  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: #fff;
  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);
}
  /* Ú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: 9999;

  background: #25D366;
  color: #fff;
  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
   ================================ */
body .topbar ~ .card .actions #btnLogin{
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  font-weight: 700;
}
body .topbar ~ .card .actions #btnLogin:hover{
  filter: brightness(0.98);
}
/* __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:#fff; 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,
  max-height: 72px;         /* solo barra visible */
  overflow: hidden;         /* no scroll interno */
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.
===== */
body.role-driver #sheet.sheet{
  bottom: 72px !important;

}

/* 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 */
body.role-driver #sheet.sheet--collapsed{
  transform: translateY(70vh) !important;
}
/* /DRIVER_SHEET_COLLAPSE_RESTORE01 */