/* =============================================================================
   Proyecto : AgendaWebCitas - FrontEnd
   Archivo  : css/32-page03-density.css
   Versión  : v4 (alineación total + ribbon centrado + horas más compactas)
   Alcance  : SOLO Página 03 (Elige día y hora)
   Objetivo :
     - Densidad ~90% vs original (sin tocar JS)
     - Stepper + Ribbon + Grid inferior con el MISMO eje visual (izq/der)
     - Ribbon con días completos, centrados y con aire interno
     - Horas más compactas: 38px desktop / 44px mobile
   Reglas   : Solo CSS | sin zoom | sin transform: scale | reversible
   Carga    : Después de css/31-page02-density.css
   ============================================================================= */

:root{
  --p03-flow-wide: 910px;    /* eje común: stepper + ribbon + grid inferior */
  --p03-card-radius: 15px;
  --p03-gap: 18px;
}

/* ===============================
   1) Eje único para P03
   - pisa el max-width 1040 del layout base SOLO por cascada en P03
   =============================== */
.paso2-wrapper{
  max-width: var(--p03-flow-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===============================
   2) Ritmo vertical (90% real)
   =============================== */
.paso2-stepper{
  margin-top: 14px !important;     /* 18 -> 14 */
  margin-bottom: 14px !important;  /* 18 -> 14 */
}

.cal-container{ margin-bottom: 18px !important; } /* 22 -> 18 */
.paso2-grid{ margin-bottom: 18px !important; }    /* 22 -> 18 */
.paso2-footer{ margin-top: 4px !important; margin-bottom: 12px !important; } /* 6/16 -> 4/12 */

/* ===============================
   3) Stepper = ancho del ribbon
   =============================== */
.paso2-stepper{
  width: 100% !important;
  max-width: var(--p03-flow-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

.paso2-stepper .paso2-step{
  font-size: 15px !important;
  line-height: 1.25 !important;
  gap: 10px !important;
}

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

/* ===============================
   4) Ribbon (calendario) = ancho del stepper
   - padding top/bottom para centrar días
   - días completos dentro del contenedor
   =============================== */
.cal-container{
  width: 100% !important;
  max-width: var(--p03-flow-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding: 14px 12px 12px !important; /* + aire inferior */
  border-radius: var(--p03-card-radius) !important;
  box-sizing: border-box !important;
}

/* Wrappers defensivos */
.cal-container .cal-strip,
.cal-container .dias-strip,
.cal-container .dias-row,
.cal-container .ribbon,
.cal-container .scroll-row,
.cal-container .calendar-row{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 80px !important; /* asegura alto para centrar días */
  box-sizing: border-box !important;
}

/* Flechas laterales */
.cal-container button,
.cal-container .cal-nav,
.cal-container .nav-btn,
.cal-container .cal-arrow,
.cal-container .btn-nav{
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  align-self: center !important;
  box-sizing: border-box !important;
}

/* Tarjetas de día: completas y centradas */
.dia-card,
.cal-container .dia-card,
.cal-container .day-card,
.cal-container .calendar-day{
  min-width: 84px !important;
  width: 84px !important;
  min-height: 74px !important;
  height: 74px !important;

  padding: 8px 8px !important;
  border-radius: 12px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Textos internos centrados */
.dia-card .mes,
.dia-card .dia,
.dia-card .numero,
.cal-container .month,
.cal-container .weekday,
.cal-container .day-number{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* Separación interna ligera */
.dia-card .mes{ margin-bottom: 4px !important; }
.dia-card .numero{ margin-bottom: 4px !important; }

/* ===============================
   5) GRID inferior = ancho del ribbon
   - aquí estaba el desalineo
   =============================== */
.paso2-grid{
  width: 100% !important;
  max-width: var(--p03-flow-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--p03-gap) !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px){
  .paso2-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Cards inferiores: compactas sin tocar fonts */
.paso2-card{
  padding: 18px 18px 16px !important;
  border-radius: var(--p03-card-radius) !important;
  box-sizing: border-box !important;
}

/* Header derecho (fecha) */
.horas-context{
  margin: 0 0 12px 0 !important;
  min-height: 20px !important;
}

.ctx-fecha{
  line-height: 1.22 !important;
}

/* ===============================
   6) Horas (compactación extra, clínica pro)
   - Desktop/tablet: 38px
   - Mobile: 44px
   =============================== */
#horasGrid,
.horas-grid,
.grid-horas{
  margin-top: 0 !important;
  gap: 8px !important;
}

@media (min-width: 521px){
  .hora-btn{
    height: 38px !important;
    min-width: 72px !important;
    padding: 0 9px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    box-sizing: border-box !important;
  }
}

@media (max-width: 520px){
  #horasGrid,
  .horas-grid,
  .grid-horas{
    gap: 10px !important;
  }

  .hora-btn{
    height: 44px !important;
    padding: 0 10px !important;
  }
}

/* ===============================
   7) CTA Reservar (coherente)
   =============================== */
.btn-reservar{
  width: 330px !important;
  height: 52px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
}

/* ===============================
   8) Volver panel izquierdo
   =============================== */
#profInfo .p21-volver{
  padding-bottom: 0 !important;
}

/* ===============================
   9) Responsive general
   =============================== */
@media (max-width: 980px){
  .paso2-wrapper{ max-width: 100% !important; }
  .paso2-stepper,
  .cal-container,
  .paso2-grid{
    max-width: 100% !important;
  }
}

@media (max-width: 520px){
  .btn-reservar{
    width: 100% !important;
    max-width: 420px !important;
    min-height: 44px !important;
  }

  .dia-card,
  .cal-container .dia-card,
  .cal-container .day-card,
  .cal-container .calendar-day{
    min-width: 78px !important;
    width: 78px !important;
    min-height: 70px !important;
    height: 70px !important;
  }
}

/* =============================================================================
   P03 — CTA Reservar: bajar escala (coherente con diseño clínico)
   ============================================================================= */

.btn-reservar{
  width: 300px !important;      /* antes 330/360 */
  height: 48px !important;      /* antes 52/58 */
  border-radius: 13px !important;

  font-size: 15px !important;   /* antes 16/18 */
  letter-spacing: 0.35px !important;

  /* evita “bloque gigante” visual */
  box-shadow: none !important;
}

/* Footer: menos aire alrededor del CTA */
.paso2-footer{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

/* Mobile: full width pero compacto */
@media (max-width: 520px){
  .btn-reservar{
    width: 100% !important;
    max-width: 360px !important;  /* antes 420 */
    min-height: 44px !important;  /* tocable */
    height: 48px !important;
  }
}