/* =============================================================================
   Proyecto : AgendaWebCitas - FrontEnd
   Archivo  : css/36-page02-especialidad-density.css
   Versión  : v3 (COMPLETA y corregida)
   Alcance  : SOLO Página 02 — Resultados por especialidad (Mejores horas) (.p02mh)
   Objetivo :
     1) Stepper del MISMO ancho que las tarjetas
     2) Pasos (círculos) TODOS azules en relleno
     3) Headbar: "Mejores horas disponibles" y "Especialidad: Urología"
        centrados al ancho de las tarjetas (bloque centrado)
        y alineados verticalmente entre sí (centrados)
     4) Subir todo el diseño (menos vacío superior)
   Reglas   : Solo CSS | sin zoom | sin transform: scale | reversible
   Carga    : Después de css/31-page02-density.css
   ============================================================================= */

:root{
  --p02mh-max: 1040px;     /* eje común: stepper + headbar + cards */
}

/* =============================================================================
   0) Subir el layout (menos vacío entre header y contenido)
   ============================================================================= */
.app-content:has(.p02mh){
  padding-top: 22px !important;
  padding-bottom: 30px !important;
}

/* =============================================================================
   1) Stepper (mismo ancho que tarjetas) + círculos azules rellenos
   ============================================================================= */
.app-content:has(.p02mh) .paso2-stepper{
  width: 100% !important;
  max-width: var(--p02mh-max) !important;
  margin: 0 auto 10px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

.app-content:has(.p02mh) .paso2-stepper .paso2-step{
  font-size: 15px !important;
  line-height: 1.25 !important;
  gap: 10px !important;
  color: #1b75bb !important;
}

/* círculos: TODOS azules rellenos */
.app-content:has(.p02mh) .paso2-stepper .paso2-circle{
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
  border: 1px solid var(--primary-color) !important;
  background: var(--primary-color) !important;
  color: #ffffff !important;
}

/* =============================================================================
   2) Contenedor P02MH
   ============================================================================= */
.p02mh{
  padding: 18px 18px 30px !important;
  min-height: calc(100vh - 76px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px){
  .p02mh{
    padding: 14px 16px 28px !important;
  }
}

.p02mh__shell{
  width: 100% !important;
  max-width: var(--p02mh-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* =============================================================================
   3) Headbar (FIX pendiente): título + subtítulo centrados al ancho de tarjetas
   - El “Volver” NO debe empujar el centrado (se pone absoluto a la derecha)
   ============================================================================= */
.p02mh__headbar{
  width: 100% !important;
  max-width: var(--p02mh-max) !important;
  margin: 4px auto 8px !important;

  position: relative !important;
  display: flex !important;
  justify-content: center !important;   /* centra el bloque de títulos */
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

/* bloque central: centrado como caja y centrado internamente */
.p02mh__headleft{
  width: fit-content !important;
  max-width: calc(100% - 160px) !important; /* deja espacio para “Volver” */
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;          /* ? centra subtítulo también */
  text-align: center !important;            /* ? no queda pegado a la izquierda */
}

/* título y subtítulo, sin indent */
.p02mh__title{
  margin: 0 0 3px 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.p02mh__subtitle{
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

/* “Volver” fuera del flujo, para no desplazar el centrado */
.p02mh__headright{
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  margin-top: 0 !important;
}

.p02mh .btn-volver{
  margin: 0 !important;
}

/* fallback si algún navegador no soporta fit-content */
@supports not (width: fit-content){
  .p02mh__headleft{ display: inline-block !important; }
}

/* =============================================================================
   4) Lista y tarjetas
   ============================================================================= */
.p02mh-list{
  display: grid !important;
  gap: 16px !important;
  margin-top: 10px !important;
}

.p02mh-card{
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
}

/* =============================================================================
   5) Lado izquierdo: profesional / convenios
   ============================================================================= */
.p02mh-prof{
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

.p02mh-prof__photo{
  width: 110px !important;
  height: 110px !important;
  border-radius: 13px !important;
}

.p02mh-prof__meta{
  display: grid !important;
  gap: 5px !important;
}

.p02mh-prof__name{ font-size: 15px !important; }
.p02mh-prof__spec{ font-size: 12.5px !important; }

.p02mh-linkperfil{
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
}

.p02mh-conv{
  margin-top: 10px !important;
  padding-top: 10px !important;
}

.p02mh-conv__title{ margin-bottom: 5px !important; }
.p02mh-conv__text{ font-size: 12px !important; line-height: 1.32 !important; }

/* =============================================================================
   6) Lado derecho: día + horas + acciones
   ============================================================================= */
.p02mh-day{
  font-size: 13.5px !important;
  margin-bottom: 8px !important;
}

.p02mh-horas-grid{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.p02mh-hora{
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
}

.p02mh-hora:hover{
  background: rgba(27,117,187,0.07) !important;
}

.p02mh-actions{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 6px !important;
}

.p02mh-btn{
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  letter-spacing: 0.30px !important;
}

.p02mh-btn--more{
  box-shadow: 0 5px 12px rgba(58, 77, 98, 0.06) !important;
}

.p02mh-btn--reserve{
  box-shadow: 0 6px 14px rgba(27,117,187,0.14) !important;
}

/* =============================================================================
   7) Responsive
   ============================================================================= */
@media (max-width: 980px){
  .p02mh-card{
    grid-template-columns: 1fr !important;
  }

  .p02mh-horas-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px){
  .app-content:has(.p02mh){
    padding-top: 18px !important;
    padding-bottom: 26px !important;
  }

  .p02mh-card{
    padding: 14px !important;
  }

  .p02mh-prof{
    grid-template-columns: 96px 1fr !important;
  }

  .p02mh-prof__photo{
    width: 96px !important;
    height: 96px !important;
  }

  .p02mh-horas-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .p02mh-hora{
    height: 34px !important; /* tocable */
  }

  .p02mh-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .p02mh-btn{
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  /* headbar en móvil: títulos centrados, volver abajo si hace falta */
  .p02mh__headbar{
    justify-content: center !important;
    margin-bottom: 10px !important;
  }

  .p02mh__headleft{
    max-width: 100% !important;
  }

  .p02mh__headright{
    position: static !important;   /* en móvil lo volvemos normal para no tapar */
    margin-top: 6px !important;
    justify-content: center !important;
  }
}

/* =============================================================================
   P02MH — Ver más tarjetas: compactar botones (sin romper diseño clínico)
   ============================================================================= */

/* Desktop/Tablet: bajar alturas (más tarjetas visibles) */
@media (min-width: 521px){
  /* Botones de horas */
  .p02mh-hora{
    height: 30px !important;        /* antes 32 */
    font-size: 12.5px !important;   /* mantiene legible */
    border-radius: 10px !important;
  }

  /* Botón Perfil (pequeño) */
  .p02mh-linkperfil{
    height: 30px !important;        /* antes 32 */
    padding: 0 12px !important;     /* antes 14 */
    font-size: 12.5px !important;
    border-radius: 11px !important;
  }

  /* Acciones: Más horas / Reservar */
  .p02mh-btn{
    height: 38px !important;        /* antes 40 */
    padding: 0 14px !important;     /* antes 16 */
    font-size: 14px !important;
    border-radius: 13px !important;
  }

  /* Grid horas un pelín más apretado */
  .p02mh-horas-grid{
    gap: 7px !important;            /* antes 8 */
    margin-bottom: 8px !important;  /* antes 10 */
  }

  /* Card: un poquito menos de aire vertical */
  .p02mh-card{
    padding-top: 14px !important;   /* antes 16 */
    padding-bottom: 14px !important;
  }
}

/* Mobile: no tocar tocabilidad (mantener 44px en CTAs) */
@media (max-width: 520px){
  .p02mh-hora{
    height: 34px !important;        /* tocable */
  }

  .p02mh-btn{
    height: 44px !important;        /* tocable */
    min-height: 44px !important;
  }
}