/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */

/* ── 640px — móvil estándar ── */
@media (max-width: 640px) {
  body { padding: 12px 10px 50px; }

  /* ════════════════════════════
     HEADER
  ════════════════════════════ */
  .hdr__top {
    grid-template-columns: 1fr;
  }
  .hdr__logo-box {
    border-right: none;
    border-bottom: 2px solid var(--plum-pale);
    height: 100px;
    padding: 14px 20px;
  }
  .hdr__logo-box img {
    transform: none;          /* quita el scale(1.3) del desktop */
    max-width: 160px;
    max-height: 72px;
    width: auto;
    height: auto;
    margin: 0 auto;
  }
  .hdr__info {
    padding: 14px 16px;
    gap: 5px;
  }
  .hdr__title    { font-size: 17px; }
  .hdr__subtitle { font-size: 10px; letter-spacing: 1.5px; }
  .hdr__meta {
    flex-direction: column;
    gap: 5px;
  }
  .hdr__meta span {
    white-space: normal;
    word-break: break-all;   /* emails largos nunca se cortan */
  }

  /* ════════════════════════════
     SECCIÓN DATOS DEL PACIENTE
     → 1 columna en móvil para
       que los labels no se pisen
  ════════════════════════════ */
  .hdr__patient { padding: 14px 14px 18px; }

  .patient-grid {
    grid-template-columns: 1fr;   /* ← UNA sola columna */
    gap: 12px 0;
  }

  /* Todos los campos ocupan el ancho completo */
  .pf--wide,
  .pf--full { grid-column: span 1; }

  /* Labels: nunca en 2 líneas por falta de espacio */
  .pf__lbl {
    white-space: normal;
    letter-spacing: 1px;    /* reducimos el tracking en móvil */
    line-height: 1.3;
  }

  /* Inputs táctiles cómodos */
  .pf__inp {
    font-size: 15px;
    padding: 11px 13px;
    min-height: 44px;
  }

  /* Doc-type row: wrap para que los badges no se aplasten */
  .doc-row { flex-wrap: wrap; gap: 6px; }
  .doc-type { font-size: 11px; padding: 6px 10px; }

  /* Divider de paciente ocupa 1 col */
  .patient-divider { grid-column: span 1; }

  /* ════════════════════════════
     RESTO DEL FORMULARIO
  ════════════════════════════ */
  .two-col  { grid-template-columns: 1fr; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .cb-block__body.grid-2 { grid-template-columns: 1fr; }

  /* ════════════════════════════
     DENTAL GRID — scroll horizontal
  ════════════════════════════ */
  .dental-wrap {
    overflow: visible;          /* quita el clip del overflow:hidden base */
    border-radius: var(--r2);   /* mantenemos el borde visual */
  }
  /* Wrapper de scroll independiente alrededor del grid */
  .dental-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--plum-pale) transparent;
    border-radius: 0 0 var(--r2) var(--r2);
  }
  .dental-grid::-webkit-scrollbar      { height: 5px; }
  .dental-grid::-webkit-scrollbar-track { background: var(--plum-ghost); }
  .dental-grid::-webkit-scrollbar-thumb {
    background: var(--plum-pale);
    border-radius: 4px;
  }
  /* Contenido interno del grid sin comprimir */
  .dental-grid > * {
    min-width: 520px;
  }

  /* Celdas ligeramente más pequeñas pero legibles */
  .d-cell { width: 26px; height: 26px; font-size: 10px; }
  .d-roman-half span { width: 26px; }

  .actions    { flex-direction: column; }
  .btn        { justify-content: center; }
  .footer-bar { flex-direction: column; text-align: center; gap: 4px; }
  .select-bar { flex-wrap: wrap; }

  .interp-bar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .interp-bar__label { flex: 1 1 100%; }
}

/* ── 400px — móvil muy pequeño ── */
@media (max-width: 400px) {
  /* patient-grid ya es 1 columna, nada que cambiar */
  .pkg-grid { grid-template-columns: 1fr 1fr; }

  .d-cell { width: 18px; height: 18px; font-size: 8px; border-radius: 4px; }
  .d-roman-half span { width: 18px; }
  .d-vdiv { width: 8px; }

  .hdr__logo-box { height: 84px; }
  .hdr__logo-box img { max-width: 130px; }
}