/* DS ETAPA B2 — responsive.css (DS_20260116_01)
   Ajustes de layout/espaciado responsivo, sin tocar legacy
   Dueño: responsive desktop/mobile layout (no colores)
*/

:root{
  --ds-max: 560px;
  --ds-pad: 14px;
}

/* Contenedor */
.__DISABLED__RESP_CONTAINER_PAD_01 .container{
  padding-left: var(--ds-pad);
  padding-right: var(--ds-pad);
}


/* Acciones */
.__DISABLED__RESP_ACTIONS_OWNER01 .actions, .__DISABLED__RESP_ACTIONS_OWNER01 .item-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Móvil */
@media (max-width: 480px){
    .__DISABLED__RESP_ACTIONS_DESC_OWNER01 .actions > button, .__DISABLED__RESP_ACTIONS_DESC_OWNER01 .actions > .btn, .__DISABLED__RESP_ACTIONS_DESC_OWNER01 .actions > a.btn,
    .__DISABLED__RESP_ACTIONS_DESC_OWNER01 .item-actions > button, .__DISABLED__RESP_ACTIONS_DESC_OWNER01 .item-actions > .btn, .__DISABLED__RESP_ACTIONS_DESC_OWNER01 .item-actions > a.btn{
    flex: 1 1 100%;
    width: 100%;
  }

    /* A8_TOPBAR_MOBILE01 — evitar wrap por min-width en topbar actions (solo móvil) */
    .__DISABLED__RESP_TOPBAR_ACTIONS_OWNER01 .topbar .actions{
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
    }

      .__DISABLED__RESP_TOPBAR_ACTIONS_DESC_OWNER01 .topbar .actions button,
      .__DISABLED__RESP_TOPBAR_ACTIONS_DESC_OWNER01 .topbar .actions a.button,
      .__DISABLED__RESP_TOPBAR_ACTIONS_DESC_OWNER01 .topbar .actions .btn{
      min-width: 0;
      flex: 0 0 auto;
        white-space: nowrap;
    }

.#__DISABLED__RESP_CARD_RADIUS_OWNER01 .card, .panel, .box{
    border-radius: 16px;
  }
}

/* Tipografía/lectura (solo tokens) */
/* AUD_RESP_COLOR_OWNERFIX01_DISABLED: label{ color: var(--ds-text); } */
/* AUD_RESP_COLOR_OWNERFIX01_DISABLED: small, .muted{ color: var(--ds-muted); } */


/* =========================================================
   ETAPA 3 — Desktop (>=992px)
   Objetivos:
   1) Más ancho real (evitar "modo celular")
   2) Neutralizar indrive-ui mobile-first:
      - indrive-ui.css fuerza .container button{width:100%}
      - aquí devolvemos topbar/actions a desktop
   ========================================================= */
@media (min-width: 992px){

  /* 3A01 — Desktop widening */
  :root{
    --ds-max: 1100px;
    --ds-pad: 18px;
  }
  .__DISABLED__RESP_CONTAINER_PAD_01 .container{
    padding-left: var(--ds-pad);
    padding-right: var(--ds-pad);
  }


  .__DISABLED__RESP_CONTAINER_GRID01 body.role-driver .container,
  .__DISABLED__RESP_CONTAINER_GRID02 body.role-passenger .container{
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: start;
      justify-content: stretch;
      justify-items: stretch;
      align-content: start;
  }

  /* Topbar ocupa todo el ancho (no entra a columnas) */
  .__DISABLED__RESP_APPGRID01 body.role-driver .container > .topbar,
  .__DISABLED__RESP_APPGRID01 body.role-passenger .container > .topbar{
    grid-column: 1 / -1;
  }

  /* Cards: no estirar raro */
  .__DISABLED__RESP_APPGRID01 body.role-driver .container > .card,
  .__DISABLED__RESP_APPGRID01 body.role-passenger .container > .card{
    margin: 0;
  }

  /* Conductor: Panel a la izquierda; listas a la derecha */
  .__DISABLED__RESP_APPGRID01 body.role-driver .container > .card:nth-child(2){
    grid-column: 1;
  }
  .__DISABLED__RESP_APPGRID01 body.role-driver .container > #cardMyTrips,
  .__DISABLED__RESP_APPGRID01 body.role-driver .container > #cardAvailable{
    grid-column: 2;
  }

  /* Pasajero: Panel grande izquierda; Mis viajes derecha */
  .__DISABLED__RESP_APPGRID01 body.role-passenger .container > .card:nth-child(2){
    grid-column: 1;
  }
  .__DISABLED__RESP_APPGRID01 body.role-passenger .container > .card:nth-child(3){
    grid-column: 2;
  }

  /* Fallback: si el ancho es “desktop chico”, vuelve a 1 columna */

  .__DISABLED__RESP_TOPBAR_OWNER01 .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-direction: row !important; /* por si CSS externo lo cambia */
  }

    .__DISABLED__RESP_TOPBAR_ACTIONS_OWNER01 .topbar .actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap: 10px;
  }

  /* Neutraliza width:100% de indrive-ui SOLO dentro del topbar */
      .__DISABLED__RESP_TOPBAR_ACTIONS_DESC_OWNER01 .topbar .actions button,
      .__DISABLED__RESP_TOPBAR_ACTIONS_DESC_OWNER01 .topbar .actions a.button,
      .__DISABLED__RESP_TOPBAR_ACTIONS_DESC_OWNER01 .topbar .actions .btn{
    width: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 140px;
  }

.#__DISABLED__RESP_TOPBAR_CHILD01 .topbar > a{ flex: 0 0 auto; }

}

/* 3A02F — Desktop chico (992..1100): 1 columna (no nesting) */
@media (min-width: 992px) and (max-width: 1100px){
  .__DISABLED__RESP_CONTAINER_GRID01 body.role-driver .container,
  .__DISABLED__RESP_CONTAINER_GRID02 body.role-passenger .container{
    grid-template-columns: 1fr;
  }
  .__DISABLED__RESP_APPGRID01 body.role-driver .container > #cardMyTrips,
  .__DISABLED__RESP_APPGRID01 body.role-driver .container > #cardAvailable,
  .__DISABLED__RESP_APPGRID01 body.role-passenger .container > .card:nth-child(3){
    grid-column: 1;
  }
}

/* ET2: Driver layout 2 cols (desktop), 1 col (mobile) */
.driver-cols{ display:block; }
@media (min-width: 860px){
  .driver-cols{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items:start;
  }
}

/* ===== ETAPA C — PAX_DESKTOP_APPGRID01 (owner: responsive.css) =====
   Objetivo: en tablet/desktop (>=768px) el pasajero se ve como app pro:
   mapa grande + panel lateral (paxDock) sin tocar IDs ni JS.
*/
@media (min-width: 768px){

  body.role-passenger .container > .card{
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
    gap: 16px;
    align-items: start;
    padding: 16px !important; /* vuelve padding pro en desktop */
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
    max-width: 1200px;
    margin: 16px auto;
  }

  /* mapa: altura estable y grande */
  body.role-passenger .ma-mapwrap{
    height: clamp(520px, 70vh, 760px) !important;
    min-height: 520px !important;
    border-radius: 18px;
    overflow: hidden;
  }

  body.role-passenger .ma-mapwrap #map{
    height: 100% !important;
  }

  /* panel: paxDock se vuelve sidebar */
  body.role-passenger #paxDock{
    position: sticky !important;
    top: calc(env(safe-area-inset-top) + 12px);
    height: auto !important;
    max-height: calc(100vh - 24px);
    overflow: auto;
    border-radius: 18px;
    padding: 0 !important; /* dentro ya hay .card */
    background: transparent;
    box-shadow: none;
  }

  /* devuelve posición del botón de ubicación (ya no depende del dock) */
  body.role-passenger .ma-mapbtn{
    bottom: 12px !important;
  }
}

@media (min-width: 1100px){
  body.role-passenger .container > .card{
    grid-template-columns: minmax(0, 1.8fr) minmax(360px, 0.8fr);
  }
}
/* ===== ETAPA C — END ===== */


/* ===== ETAPA C1 — PAX_TABLET_BRIDGE01 (owner: responsive.css) =====
   Bridge: 521–767px (tablet pequeña / landscape móvil)
*/
@media (min-width: 521px) and (max-width: 767px){

  /* Mantener mapa protagonista con altura razonable */
  body.role-passenger .ma-mapwrap{
    height: clamp(420px, 62vh, 640px) !important;
    min-height: 420px !important;
    border-radius: 18px;
    overflow: hidden;
  }
/*__DISABLED__PAX_MAP_MOBILE_100P01   body.role-passenger .ma-mapwrap #map{ height: 100% !important; } */

  /* Botón ubicación más pegado (sin dock) */
  body.role-passenger .ma-mapbtn{
    bottom: 12px !important;
  }

  /* Card vuelve a verse pro (evita “flat” en tablet) */
  body.role-passenger .container > .card{
    padding: 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
    margin: 12px auto;
  }
}
/* ===== ETAPA C1 — END ===== */


/* ==========================================================
   RESP_TOPBAR_ACTIONS_OWNER02_2026-02-16
   Migrado desde brand-2026.css (TOPBAR_OWNER01 + ACTIONS_OWNER01)
   Motivo: esto es layout/responsive, NO branding.
   ========================================================== */

@media (max-width: 480px){
  .topbar .actions{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .topbar .actions button,
  .topbar .actions a.button,
  .topbar .actions .btn{
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .actions > button, .actions > .btn, .actions > a.btn,
  .item-actions > button, .item-actions > .btn, .item-actions > a.btn{
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (min-width: 992px){
  .topbar .actions button,
  .topbar .actions a.button,
  .topbar .actions .btn{
    width: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 140px;
  }
}

.actions, .item-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* /RESP_TOPBAR_ACTIONS_OWNER02 */

/* PAX_MAP_MOBILE_VH01: mapa alto en móvil (evita quedar en min-height 360) */
@media (max-width: 640px){
  body.role-passenger .ma-mapwrap{
    height: 62vh;
    min-height: 360px;
  }
  body.role-passenger .ma-mapwrap #map{
    height: 100% !important;
  }
}

/* PAX_MAP_MOBILE_FORCE_FILL01: si alguna regla fija height:360px, esto la pisa en móvil */
@media (max-width: 640px){
  body.role-passenger #map{
    height: 100% !important;
    min-height: 360px;
  }
}