/* =============================================================================
   css/100-mobile-paso2-agenda.css
   Ajuste móvil Paso 2 — márgenes simétricos
============================================================================= */

@media (max-width: 600px) {

  :root {
    --p2-mobile-max: 380px;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  #appContent {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .paso2-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 14px 36px !important;
    margin: 0 auto !important;
    display: block !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .paso2-wrapper {
    width: 100% !important;
    max-width: var(--p2-mobile-max) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .paso2-stepper,
  .cal-container,
  .paso2-card,
  .btn-reservar {
    width: 100% !important;
    max-width: var(--p2-mobile-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .paso2-stepper {
    padding: 14px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .paso2-step {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    gap: 10px !important;
  }

  .paso2-circle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 13px !important;
  }

  .cal-container {
    padding: 10px 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .cal-nav {
    width: 34px !important;
    height: 42px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 12px !important;
    padding: 0 !important;
  }

  .cal-nav img {
    width: 16px !important;
    height: 16px !important;
  }

  .cal-ribbon {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .cal-ribbon::-webkit-scrollbar {
    display: none !important;
  }

  .calendario-dias {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: max-content !important;
    padding: 2px 2px 8px 2px !important;
  }

  .dia-card {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    flex: 0 0 64px !important;
    padding: 8px 4px !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
  }

  .dia-card .mes,
  .dia-card .dia {
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dia-card .numero {
    font-size: 21px !important;
    line-height: 1 !important;
    margin: 4px 0 !important;
  }

  .paso2-grid {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 20px auto 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .paso2-card {
    padding: 16px !important;
    min-height: auto !important;
    overflow: hidden !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .prof-info,
  .p21-card,
  .p21-main,
  .p21-conv,
  .p21-conv-text {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .p21-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .p21-photo {
    width: 100% !important;
    aspect-ratio: 1 / 0.72 !important;
    height: auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .p21-photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .p21-btn-perfil {
    width: 100% !important;
    max-width: 220px !important;
    height: 42px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .p21-name,
  .p21-especialidad,
  .p21-conv-text {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .horas-grid {
    width: 100% !important;
    gap: 10px !important;
    padding: 14px 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .hora-btn {
    min-width: 82px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .horas-legend {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 0 0 0 !important;
    font-size: 13px !important;
    color: #5f6f82 !important;
    box-sizing: border-box !important;
  }

  .legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .legend-dot {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    flex: 0 0 11px !important;
  }

  .paso2-footer {
    width: 100% !important;
    margin: 20px auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .btn-reservar {
    height: 50px !important;
    font-size: 16px !important;
  }
}