/* 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;
  }
}