/* =============================================================================
   Proyecto : AgendaWebCitas - FrontEnd
   Archivo  : css/31-page02-density.css
   Versión  : v8 (alineación stepper/card + compactación real 90%)
   Alcance  : Pantalla “Seleccionar especialista” (Página 02 visual)
   Objetivo :
     - Stepper y Card con el MISMO ancho visual (para reutilizar en P03)
     - Reducir padding/espacios internos (densidad ~90%)
     - Mantener tipografías (NO bajar más fonts)
   Carga    : Debe ir DESPUÉS de css/30-global-density.css
   ============================================================================= */


/* =========================================
   1) Control del ancho “estándar” (P02 y P03)
   ========================================= */
:root{
  --flow-max: 704px; /* ancho estándar del flujo (stepper + cards) */
}


/* =========================================
   2) Reducir vacío vertical en esta pantalla
   ========================================= */
.app-content:has(.paso2-stepper){
  padding-top: 26px !important;
  padding-bottom: 34px !important;
}


/* =========================================
   3) Stepper (ancho estándar)
   ========================================= */
.paso2-stepper{
  width: 100% !important;
  max-width: var(--flow-max) !important;
  margin: 0 auto 12px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

/* Items del stepper: compactos (sin bajar tipografía) */
.paso2-stepper .paso2-step{
  font-size: 15px !important;
  line-height: 1.25 !important;
  gap: 10px !important;
}

/* Círculos */
.paso2-stepper .paso2-circle{
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
}


/* =========================================
   4) Contenedor Página 02 y Card (mismo ancho que stepper)
   ========================================= */
.pagina02-container{
  padding: 40px 18px 26px !important;
  min-height: calc(100vh - 76px) !important;
  box-sizing: border-box !important;
}

/* Si existe wrapper, lo alineamos al mismo ancho */
.pagina02-wrapper{
  width: 100% !important;
  max-width: var(--flow-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Card principal: mismo ancho visual */
.pagina02-card{
  width: 100% !important;
  max-width: var(--flow-max) !important;
  margin: 0 auto !important;

  /* compactación real */
  padding: 14px 18px 12px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
}

/* Form interno: menos gap */
.pagina02-form{
  gap: 10px !important;
}


/* =========================================
   5) Select / input dentro de la card (centrado y compacto)
   ========================================= */
.pagina02-card select,
.pagina02-card input[type="text"],
.pagina02-card input[type="search"],
.pagina02-card .autocomplete-input{
  height: 44px !important;        /* 48 -> 44 (~90%) */
  font-size: 15px !important;     /* no bajar más */
  border-radius: 11px !important;
  box-sizing: border-box !important;
}

/* Si el control tiene wrapper con margen extra, lo bajamos */
.pagina02-autocomplete,
.pagina02-inputwrap{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================
   6) Botón “BUSCAR HORA” (subirlo y compactar)
   ========================================= */
#btnBuscarHora.btn-buscar,
#btnBuscarHora{
  width: 310px !important;
  height: 52px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;

  /* clave: menos separación */
  margin-top: 4px !important;
}


/* =========================================
   7) Volver (levemente más pegado)
   ========================================= */
.volver-container{
  margin-top: 10px !important;
}

.btn-volver{
  font-size: 14px !important;
  padding: 6px 9px 6px 0 !important;
  gap: 9px !important;
}

.btn-volver img{
  width: 17px !important;
  height: 17px !important;
}


/* =========================================
   8) Responsive
   ========================================= */
@media (max-width: 900px){
  .paso2-stepper,
  .pagina02-wrapper,
  .pagina02-card{
    max-width: 100% !important;
  }
}

@media (max-width: 520px){
  .pagina02-container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #btnBuscarHora.btn-buscar,
  #btnBuscarHora{
    width: 100% !important;
    max-width: 420px !important;
    min-height: 44px !important;
  }
}