/* responsive.css */
@media (max-width: 768px) {

  body { padding: 0 0 60px; }

  .form-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* ── BANNER ── */
  .form-banner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .logo-box {
    padding: 12px 16px;
    justify-content: flex-start;
  }
  .logo-box img { height: 54px; }
  .banner-title-area { padding: 12px 16px 16px; }
  .banner-title { font-size: 14px; }
  .banner-sub { font-size: 9px; }

  /* ── INTERPRETACIÓN ── */
  .interp-bar { padding: 8px 14px; gap: 8px; }
  .interp-label { font-size: 9px; }

  /* ── DATOS PACIENTE ── */
  .prow-1,
  .prow-2,
  .prow-3,
  .prow-4 { grid-template-columns: 1fr; }
  .fg {
    border-right: none;
    border-bottom: 1px solid var(--c-line);
    padding: 8px 14px;
  }
  .fg:last-child { border-bottom: none; }

  /* ── SECCIONES ── */
  .sections-area { padding: 10px; gap: 8px; }
  .section__inner { padding: 12px 12px 16px; }
  .sec-num { width: 44px; font-size: 11px; }
  .sec-title { font-size: 10.5px; }

  /* ── TABLA DIENTES — scroll horizontal ── */
  .dental-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  .dental-grid {
    
    min-width: max-content;
    width: max-content;
  }
  .dental-cell { width: 26px; height: 28px; font-size: 9px; }
  .dental-roman { width: 26px; font-size: 6.5px; }
  .dental-roman-spacer { width: 6px; }
  .dental-divider { margin: 0 2px; }

  /* ── DOS COLUMNAS ── */
  .two-col { grid-template-columns: 1fr; }

  /* ── CHECKBOXES — todos en columna en móvil ── */
  .cb-block__body,
  .cb-block__body.grid-2,
  .cb-block__body:not(.col):not(.grid-2) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .cb-block__body .cb-item {
    margin: 3px 8px !important;
    white-space: normal !important;
  }

  /* ── PAQUETES ── */
  .pkg-info ul {
    grid-template-columns: 1fr 1fr;
  }
  .pkg-item-otro { grid-column: 1 / -1; }

  /* ── ENVÍO ── */
  .yn-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .yn-question { font-size: 12px; }

  /* ── HORARIO Y ACTIONS ── */
  .horario-bar { padding: 8px 14px; gap: 8px; }
  .horario-bar span { font-size: 10px; }
  .form-actions { padding: 10px 14px; }
  .btn { font-size: 10px; padding: 8px 16px; }
}

/* Hover solo en dispositivos con mouse real */
@media (hover: hover) and (pointer: fine) {
  .cb-item:hover { background: var(--c-blue-lt); color: var(--c-blue-dk); }
  .interp-btn:hover { border-color: #fff; color: #fff; }
  .yn-btn:hover { background: var(--c-blue-lt); color: var(--c-blue); border-color: var(--c-blue-md); }
}
@media (hover: none) {
  .cb-item:active { background: var(--c-green); color: #fff; }
  .yn-btn:active { background: var(--c-blue-lt); }
}