/* Mantiene el mismo viewport y escala tipográfica en navegador y PWA. */
html {
  width: 100%;
  min-width: 0;
  background: #020914;
}

body,
#app,
.app-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: #020914;
}

.content {
  min-width: 0;
  max-width: 100%;
}

/* Evita la selección accidental de textos al mantener pulsada la interfaz. */
body,
.app-shell,
.modal,
.mobile-nav,
.install-suggestion {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Ajustes: la referencia visual se aplica al final de la cascada. */


/* Resumen: proporciones compactas de la referencia móvil. */


/* Registro mobile: editorial, calmer surfaces matching the product references. */


input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Reference-driven Quantia visual system.  This deliberately scopes layout
   changes to the rendered product surfaces while preserving their behavior. */
:root {
  --q-ref-surface: rgba(8, 25, 45, .88);
  --q-ref-line: rgba(65, 163, 229, .31);
  --q-ref-muted: #9ba9bf;
  --q-ref-cyan: #10d8eb;
}

.content {
  background:
    radial-gradient(circle at 54% -8%, rgba(12, 126, 205, .18), transparent 31rem),
    radial-gradient(circle at 7% 90%, rgba(16, 107, 202, .1), transparent 29rem),
    #020a16;
}

.group,
.summary-calories-card,
.weekly-chart-card,
.settings-config-panel,
.account-card,
.progress-card,
.progress-panel,
.progress-chart,
.history-card,
.registration-fields,
.registration-food-panel {
  border-color: var(--q-ref-line);
}

.user-menu .avatar {
  position: relative;
  border: 1px solid rgba(118, 183, 241, .22);
  background: linear-gradient(145deg, #1b3458, #0b1b32);
}

.user-menu .avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border: 2px solid #071425;
  border-radius: 50%;
  background: var(--q-ref-cyan);
}

.history-item::before {
  width: 3px;
  border-radius: 4px;
}

.progress-selector,
.period-select,
.filter-button {
  border-color: rgba(52, 180, 239, .46);
  background: linear-gradient(135deg, rgba(11, 34, 59, .95), rgba(6, 19, 36, .95));
}

@media (min-width: 721px) {
  .content { padding: 56px clamp(48px, 7vw, 116px) 80px; }
  .topbar { margin-bottom: 30px; }
  .topbar h1 { letter-spacing: -.045em; }
  .settings-screen { align-items: start; }
  .settings-menu-row { min-height: 148px; border-radius: 20px; }
  .registration-stack { gap: 22px; }
  .progress-screen { max-width: 1320px; }
}