/* =============================================================================
   Proyecto : AgendaWebCitas - FrontEnd
   Archivo  : css/34-page05-density.css
   Versión  : v4 (completa y corregida)
   Alcance  : SOLO Página 05 (Certificado / salida)
   Objetivo :
     - Densidad ~90% (menos vacío, más compacto tipo “documento clínico”)
     - Mantener tipografías del proyecto (familia + escala global)
     - Fixes solicitados:
       1) Columna derecha: evitar choque con “Fecha de nacimiento”
       2) Eliminar “Contacto clínica” y subir contenido
       3) Subir certificado (menos margen/padding superior)
   Reglas   : Solo CSS | sin zoom | sin transform: scale | reversible
   Carga    : Después de css/33-page04-density.css
   ============================================================================= */

:root{
  --p05-max: 900px;     /* eje más “documento”, menos gigante */
  --p05-gap: 12px;
  --p05-pad: 12px;
  --p05-radius: 14px;
}

/* =========================================
   1) Layout base P05 (container/wrapper/card)
   ========================================= */
.pagina05-container{
  /* Subir certificado: menos vacío arriba */
  padding: 14px 16px 38px !important; /* top reducido (antes ~22) */
  box-sizing: border-box !important;
}

.pagina05-wrapper{
  max-width: var(--p05-max) !important; /* 980 -> 900 */
  gap: var(--p05-gap) !important;       /* 16 -> 12 */
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

.pagina05-card{
  padding: 16px !important;             /* 18 -> 16 */
  border-radius: 13px !important;
  box-sizing: border-box !important;
}

/* =========================================
   2) Cabecera certificado (logo/título/meta)
   ========================================= */
.p05-cert-header-top{
  gap: 14px !important;
}

.p05-cert-logo{
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px !important;
}

.p05-cert-title{
  font-size: 18px !important;      /* 20 -> 18 */
  margin-bottom: 6px !important;
  letter-spacing: 0.15px !important;
}

.p05-cert-meta{
  gap: 12px !important;
  font-size: 12.5px !important;
}

.p05-cert-meta-sep{
  height: 14px !important;
}

.p05-cert-divider{
  margin-top: 12px !important;
}

/* =========================================
   3) Secciones (estructura general)
   ========================================= */
.p05-sections{
  gap: 12px !important;
  margin-top: 14px !important;
}

.p05-section{
  padding: var(--p05-pad) !important;
  border-radius: var(--p05-radius) !important;
}

.p05-section-title{
  font-size: 13.5px !important;
  margin-bottom: 8px !important;
}

/* =========================================
   4) Paciente (Zona 1) — filas compactas y alineadas
   ========================================= */
.p05-section--paciente{
  padding: var(--p05-pad) !important;
}

.p05-grid-2{
  gap: 10px !important; /* 12 -> 10 */
}

.p05-col{
  gap: 6px !important;  /* 8 -> 6 */
}

/* Fila: más baja + valor más cerca del label */
.p05-row{
  display: grid !important;
  grid-template-columns: 112px 1fr !important; /* base: evita apretar textos */
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;                  /* baja altura */
  border-bottom: 1px solid #edf1f6 !important;
  box-sizing: border-box !important;
}

.p05-row:first-child{ padding-top: 0 !important; }
.p05-row:last-child{ border-bottom: none !important; padding-bottom: 0 !important; }

.p05-row-label{
  font-size: 13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.p05-row-value{
  font-size: 13px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  word-break: break-word !important;
}

/* FIX 1: Columna derecha con label más ancho (Fecha de nacimiento) */
@media (min-width: 721px){
  .p05-grid-2 .p05-col:last-child .p05-row{
    grid-template-columns: 130px 1fr !important; /* clave: “Fecha de nacimiento” cabe */
    gap: 10px !important;
  }
}

/* =========================================
   5) Detalle de la cita (Zona 2) — defensivo
   (tu 23-pages-pagina05-cita.css llegó vacío)
   ========================================= */
.p05-section--cita,
.p05-section--detalle{
  padding: var(--p05-pad) !important;
  border-radius: var(--p05-radius) !important;
}

.p05-section--cita .p05-row,
.p05-section--detalle .p05-row{
  padding: 6px 0 !important;
}

/* =========================================
   6) Notas + Contacto (Zona 3)
   ========================================= */
.p05-section--notas{
  padding: 12px 14px !important;
}

.p05-bullets{
  gap: 7px !important;
  padding-left: 16px !important;
}

/* FIX 2: Eliminar “Contacto clínica” y subir contenido */
.p05-contact-title{
  display: none !important;
}

.p05-contact-wrap{
  margin-top: 12px !important;  /* sube el bloque */
  padding-top: 12px !important;
  border-top: 1px solid #e9eef5 !important;
}

.p05-contact-card{
  grid-template-columns: 120px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
}

.p05-contact-logo{
  width: 105px !important;
  padding: 7px !important;
  border-radius: 12px !important;
}

.p05-contact-row{
  display: grid !important;
  grid-template-columns: 104px 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;     /* baja altura de filas */
  border-bottom: 1px solid #edf1f6 !important;
}

.p05-contact-row:last-child{
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.p05-contact-label{
  font-size: 13px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.p05-contact-value{
  font-size: 13px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  word-break: break-word !important;
}

/* =========================================
   7) Acciones (Salir)
   ========================================= */
.p05-actions{
  margin-top: 12px !important;
}

.p05-btn-salida{
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}

/* =========================================
   8) Responsive / Mobile safety
   ========================================= */
@media (max-width: 768px){
  .pagina05-wrapper{
    max-width: 100% !important;
  }

  .p05-contact-card{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .p05-contact-logo{
    width: 110px !important;
  }

  /* En móvil, más tolerancia al label */
  .p05-row{
    grid-template-columns: 120px 1fr !important;
  }
}

@media (max-width: 520px){
  .p05-btn-salida{
    height: 44px !important;
    min-height: 44px !important;
  }

  .p05-row{
    grid-template-columns: 110px 1fr !important;
    gap: 8px !important;
  }

  .p05-contact-row{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: start !important;
  }

  .p05-contact-label{
    font-size: 12px !important;
  }
}