/* premium.css — capa común de acabado visual para las páginas Aquoric. */
:root {
  --premium-panel: #f5f7f4;
  --premium-panel-strong: #fbfcfb;
  --premium-line: rgba(124, 143, 132, 0.28);
  --premium-shadow: 0 18px 46px rgba(17, 31, 39, 0.10);
  --premium-shadow-soft: 0 10px 28px rgba(17, 31, 39, 0.07);
}

[data-theme="dark"] {
  --premium-panel: #1b242d;
  --premium-panel-strong: #151d25;
  --premium-line: rgba(255,255,255,0.10);
  --premium-shadow: 0 22px 58px rgba(0,0,0,0.38);
  --premium-shadow-soft: 0 12px 34px rgba(0,0,0,0.28);
}

body {
  text-rendering: optimizeLegibility;
  background:
    linear-gradient(180deg, rgba(141, 185, 160, 0.14), transparent 360px),
    var(--bg-primary, var(--bg, #f7f8f6));
}

.aqn {
  height: 64px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.38) inset, 0 10px 32px rgba(10, 22, 28, 0.08);
}

.aqn-links a,
.aqn-lang,
.aqn-theme,
.lang-switch,
.theme-toggle,
.btn-primary,
.btn-secondary,
button.primary,
button.ghost,
.tab,
.clear-btn,
.ti-btn,
.gb-btn,
.elev-close {
  border-radius: 8px !important;
}

.hero,
.section,
.container {
  isolation: isolate;
}

.hero h1,
.section-title,
h1 {
  letter-spacing: 0;
}

.tool-card,
.feature-card,
.beta-card,
.legal-card,
.card,
.hub-card,
.dropzone,
.tool-option,
.tool-stat,
.track-item,
.detail,
.summary,
.db-note,
.db-file,
.db-loadall {
  border-color: var(--premium-line) !important;
  box-shadow: var(--premium-shadow-soft);
}

.tool-card,
.feature-card,
.beta-card,
.legal-card,
.card,
.hub-card,
.detail,
.summary,
.db-note {
  background: var(--premium-panel) !important;
  border-radius: 8px !important;
}

.hub-card:hover,
.tool-card:hover,
.feature-card:hover,
.track-item:hover {
  box-shadow: var(--premium-shadow);
}

.btn-primary,
button.primary,
.detail-guide,
.aqn-links a.active,
.aqn-lang button.active,
.lang-switch button.active {
  box-shadow: 0 10px 24px rgba(30, 107, 122, 0.22);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(43, 138, 153, 0.72);
  outline-offset: 3px;
}

.app-shell {
  background:
    linear-gradient(180deg, rgba(141, 185, 160, 0.16), transparent 420px),
    var(--bg-primary, #f7f8f6);
}

.sidebar {
  box-shadow: 14px 0 42px rgba(10, 22, 28, 0.08);
}

.map-wrap {
  background: var(--premium-panel-strong);
}

.leaflet-container,
.map-ctrl,
.guide-banner,
.elev-panel {
  box-shadow: var(--premium-shadow-soft);
}

.db-file.loaded {
  border-color: rgba(30, 107, 122, 0.56) !important;
}

@media (max-width: 760px) {
  .aqn { height: 58px; padding: 0 14px; }
  .container { padding-left: 18px; padding-right: 18px; }
  .app-shell { min-height: calc(100dvh - 58px); }
  .app-foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}