/* =============================================================================
   Proyecto : AgendaWebCitas - FrontEnd
   Archivo  : css/33-page04-density.css
   Versión  : v2 (completa y corregida)
   Alcance  : SOLO Página 04 (Confirmar Reserva)
   Objetivo :
     - Densidad ~90% vs original (menos vacío, más compacto)
     - Stepper con el MISMO ancho visual que las tarjetas (resumen + formulario)
     - Mantener tipografías del proyecto (no achicar de más)
   Reglas   : Solo CSS | sin zoom | sin transform: scale | reversible
   Carga    : Después de css/32-page03-density.css
   ============================================================================= */


/* =========================================
   1) Contenedor general: menos vacío vertical
   ========================================= */
.pagina04-container{
  padding: 60px 18px 34px !important;          /* 70/20/40 -> ~90% */
  min-height: calc(100vh - 76px) !important;   /* acompaña header reducido (density global) */
  box-sizing: border-box !important;
}

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


/* =========================================
   2) Stepper alineado al ancho de las tarjetas
   - En P04 el eje real es .pagina04-wrapper (max-width 1040)
   ========================================= */
.pagina04-wrapper{
  max-width: 1040px !important;   /* mantiene la grilla 2 columnas cómoda */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Si el stepper vive dentro del wrapper */
.pagina04-wrapper .paso2-stepper,
.pagina04-wrapper .stepper{
  width: 100% !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Variante robusta: si el stepper está fuera del wrapper pero en la misma pantalla */
.app-content:has(.pagina04-container) .paso2-stepper,
.app-content:has(.pagina04-container) .stepper{
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================
   3) Grid principal: gap más compacto
   ========================================= */
.pagina04-wrapper .pagina04-grid{
  gap: 20px !important;         /* 22 -> 20 */
  margin-top: 16px !important;  /* 18 -> 16 */
}


/* =========================================
   4) Cards: padding más compacto (sin alterar estilo)
   ========================================= */
.pagina04-wrapper .pagina04-card{
  padding: 20px !important;      /* 22 -> 20 */
  border-radius: 15px !important;/* 16 -> 15 (mínimo, consistente) */
  box-sizing: border-box !important;
}

@media (max-width: 520px){
  .pagina04-wrapper .pagina04-card{
    padding: 18px 16px !important;
  }
}

/* Título de card: asegurar consistencia tipográfica con el proyecto */
.pagina04-wrapper .pagina04-card-title{
  font-size: 15px !important;     /* base era 16px; con densidad se ve más consistente */
  margin-bottom: 12px !important; /* 14 -> 12 */
}


/* =========================================
   5) Panel resumen: compactar ritmo
   ========================================= */
.pagina04-wrapper .pagina04-resumen{
  gap: 12px !important; /* 14 -> 12 */
}


/* =========================================
   6) Formulario: grid interno más compacto
   ========================================= */
.pagina04-wrapper .p04-grid{
  gap: 12px 14px !important; /* 14/16 -> 12/14 */
}

.pagina04-wrapper .p04-field{
  gap: 5px !important; /* 6 -> 5 */
}


/* =========================================
   7) Inputs/select: compactar en desktop, mantener tocable en mobile
   ========================================= */
@media (min-width: 521px){
  .pagina04-wrapper .p04-input,
  .pagina04-wrapper .p04-select{
    height: 40px !important;      /* 44 -> 40 (desktop) */
    padding: 0 11px !important;   /* 12 -> 11 */
    border-radius: 11px !important;
    font-size: 15px !important;   /* no bajar más */
    box-sizing: border-box !important;
  }

  /* Separador del RUT acompaña la altura */
  .pagina04-wrapper .p4-rut-sep{
    height: 40px !important;
  }

  /* DV (último campo del RUT) centrado, sin padding lateral */
  .pagina04-wrapper .p4-input--rut-dv{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 520px){
  .pagina04-wrapper .p04-input,
  .pagina04-wrapper .p04-select{
    height: 44px !important; /* tocable */
  }
}


/* =========================================
   8) Meta / checkbox / separator / pills: menos aire
   ========================================= */
.pagina04-wrapper .p04-meta{
  margin-top: 12px !important; /* 14 -> 12 */
  gap: 9px !important;         /* 10 -> 9 */
}

.pagina04-wrapper .p04-check{
  padding: 9px 11px !important; /* 10/12 -> 9/11 */
  border-radius: 11px !important;
  gap: 9px !important;          /* 10 -> 9 */
  font-size: 14px !important;   /* mantener */
}

.pagina04-wrapper .p04-check input{
  width: 15px !important; /* 16 -> 15 */
  height: 15px !important;
}

.pagina04-wrapper .p04-separator{
  margin: 14px 0 !important; /* 16 -> 14 */
}

/* Tipo reserva */
.pagina04-wrapper .p4-tipo-reserva{
  gap: 12px !important;      /* 14 -> 12 */
  margin-top: 4px !important;/* 6 -> 4 */
}

.pagina04-wrapper .p4-pill{
  padding: 9px 12px !important; /* 10/14 -> 9/12 */
  border-radius: 11px !important;
  font-size: 14px !important;   /* mantener */
}

.pagina04-wrapper .p4-pill input{
  width: 13px !important; /* 14 -> 13 */
  height: 13px !important;
}


/* =========================================
   9) Resumen (unidad 17): compactar paddings sin tocar fonts clave
   ========================================= */
.p04-resumen-card{
  padding: 16px 18px !important;  /* 18/22 -> 16/18 */
  border-radius: 16px !important; /* 18 -> 16 */
  box-sizing: border-box !important;
}

.p04-resumen-card__header{
  margin-bottom: 10px !important; /* 12 -> 10 */
  padding-bottom: 10px !important;/* 12 -> 10 */
}

.p04-resumen-item{
  padding: 12px 0 10px 0 !important; /* 14/12 -> 12/10 */
}


/* =========================================
   10) Volver (unidad 18): solo compactar un toque el “aire”
   ========================================= */
.p04-volver-btn{
  padding: 5px 4px !important; /* 6px -> 5px */
}


/* =========================================
   11) Reservar (unidad 19): coherencia densidad
   - Mantener tocable, pero más integrado
   ========================================= */
.p04-reservar-wrap{
  margin-top: 12px !important; /* 14 -> 12 */
  gap: 9px !important;         /* 10 -> 9 */
}

.p04-btn-reservar{
  min-width: 164px !important; /* 172 -> 164 */
  height: 44px !important;     /* mantener tocable */
  padding: 0 20px !important;  /* 22 -> 20 */
  font-size: 15px !important;  /* 16 -> 15 (coherente con densidad) */
  border-radius: 12px !important;
}

@media (max-width: 520px){
  .p04-reservar-wrap{
    align-items: stretch !important;
  }
  .p04-btn-reservar{
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}