/* === uCharter — Responsive CSS: Breakpoints 768px y 1024px === */

/* ============================================================
   TABLET — 768px+
   ============================================================ */
@media (min-width: 768px) {

  /* Header */
  .app-header__inner {
    padding: var(--space-md) var(--space-xl);
  }

  .app-header__title {
    font-size: var(--font-size-2xl);
  }

  .app-header__subtitle {
    font-size: var(--font-size-sm);
  }

  /* Form container */
  .form-main {
    padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  }

  /* Section cards */
  .form-section {
    padding: var(--space-xl);
  }

  /* Header ops fields: 2 columnas */
  .form-header-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Canvas de firma más alto */
  .sig-canvas {
    height: var(--sig-height-desktop);
  }

  /* Grid de 2 firmas */
  .signatures-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Landing cards en fila */
  .landing-cards {
    flex-direction: row;
    max-width: 700px;
  }

  .landing-card {
    flex: 1;
  }
}

/* ============================================================
   DESKTOP — 1024px+
   ============================================================ */
@media (min-width: 1024px) {

  /* Form container */
  .form-main {
    max-width: 1000px;
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }

  /* Grid de 3 firmas (check-in) */
  .signatures-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Botón de enviar menos ancho en desktop */
  .btn-submit {
    max-width: 400px;
    align-self: flex-end;
  }

  .form-actions {
    align-items: flex-end;
  }

  /* Header ops: 3 columnas */
  .form-header-fields {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ============================================================
   AJUSTES EXTRA PARA PANTALLAS MUY PEQUEÑAS — < 380px
   ============================================================ */
@media (max-width: 380px) {

  .app-header__logo { display: none; }

  .app-header__title { font-size: var(--font-size-lg); }

  .form-section { padding: var(--space-md); }

  .check-label { padding: var(--space-xs); }

  .sig-canvas {
    height: 110px;
  }

  .input-time,
  .input-number {
    min-width: 100px;
  }

  .form-group--time-pair {
    flex-direction: column;
  }
}

/* ============================================================
   PRINT — Para impresión / PDF en papel
   ============================================================ */
@media print {

  * { box-shadow: none !important; }

  .app-header__back,
  .sig-clear-btn,
  .btn-submit,
  .form-actions { display: none !important; }

  .app-header {
    background: var(--color-navy) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body { background: white; }

  .form-main { padding: 0; max-width: 100%; }

  .form-section {
    break-inside: avoid;
    border: 1px solid var(--color-gray-400);
    margin-bottom: var(--space-md);
    page-break-inside: avoid;
  }

  .sig-canvas {
    border: 1px solid var(--color-gray-400);
    height: 100px;
  }

  .signatures-grid--three { grid-template-columns: repeat(3, 1fr); }
  .signatures-grid--two   { grid-template-columns: repeat(2, 1fr); }
}