[hidden] { display: none !important; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(45, 104, 69, 0.18), transparent 36%),
    linear-gradient(145deg, #f5f1e7 0%, #edf5ef 100%);
}

.auth-card {
  width: min(680px, 100%);
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid rgba(45, 104, 69, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 26px 70px rgba(31, 54, 40, 0.14);
  text-align: center;
}

.auth-logo {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #2d6845;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.auth-card h1 {
  margin: 4px 0 8px;
  color: #1f4d33;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
}

.auth-subtitle {
  max-width: 520px;
  margin: 0 auto 24px;
  color: #5f6d65;
  font-size: 1.03rem;
}

.auth-access-note {
  margin: 18px auto;
  padding: 13px 16px;
  border: 1px solid #d5e5d9;
  border-radius: 14px;
  background: #f2f8f3;
  color: #2b5d40;
  font-weight: 700;
}

.google-button-wrap {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin: 22px auto 14px;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.auth-message {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #d1d9d3;
  border-radius: 12px;
  background: #f7f8f7;
  color: #25302a;
}

.auth-message-error {
  border-color: #e4b7b7;
  background: #fff0f0;
  color: #8d2e2e;
}

.auth-message-success {
  border-color: #bad7c4;
  background: #e9f4ec;
  color: #225b39;
}

.user-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.user-chip {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  max-width: 290px;
  padding: 7px 10px;
  border: 1px solid #d9e2dc;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.user-chip img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8f2eb;
}

.user-chip-copy {
  min-width: 0;
  text-align: left;
}

.user-chip strong,
.user-chip span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip strong {
  color: #1f4d33;
  font-size: 0.87rem;
}

.user-chip span {
  color: #6a756e;
  font-size: 0.75rem;
}

.header-auth-buttons {
  display: flex;
  gap: 7px;
}

.header-auth-buttons .button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .app-header {
    grid-template-columns: auto 1fr;
  }

  .header-status,
  .user-controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .auth-screen { padding: 12px; }
  .auth-card { border-radius: 20px; padding: 28px 18px; }
  .auth-actions .button,
  .header-auth-buttons .button { width: 100%; }
  .user-controls,
  .header-auth-buttons { width: 100%; }
  .user-chip { max-width: none; width: 100%; }
}

@media print {
  .user-controls,
  .auth-screen {
    display: none !important;
  }

  /* La tabla se conserva completa y se desplaza a la página siguiente
     cuando no cabe en el espacio restante de la página actual. */
  .tabla-formula {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  .tabla-formula thead,
  .tabla-formula tbody,
  .tabla-formula tfoot {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  /* Compactación automática para priorizar una sola página. */
  .tabla-formula:has(tbody tr:nth-child(11)) {
    font-size: 7.6pt !important;
    line-height: 1.28 !important;
  }

  .tabla-formula:has(tbody tr:nth-child(11)) th,
  .tabla-formula:has(tbody tr:nth-child(11)) td {
    padding: 4px 5px !important;
  }

  .tabla-formula:has(tbody tr:nth-child(11)) th {
    font-size: 7pt !important;
  }

  .tabla-formula:has(tbody tr:nth-child(18)) {
    font-size: 6.8pt !important;
    line-height: 1.16 !important;
  }

  .tabla-formula:has(tbody tr:nth-child(18)) th,
  .tabla-formula:has(tbody tr:nth-child(18)) td {
    padding: 2.5px 4px !important;
  }

  .tabla-formula:has(tbody tr:nth-child(18)) th {
    font-size: 6.3pt !important;
    letter-spacing: 0.02em !important;
  }

  /* El título de composición no debe quedar separado de la tabla. */
  .formula-document h2:has(+ .tabla-formula),
  .formula-document h2:has(+ * .tabla-formula) {
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }
}