:root {
  --verde: #1F4D2B;
  --fundo: #F5F7F2;
  --tinta: #17301F;
  --suave: #5B6B5F;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

#bot { display: block; width: 100%; height: 100%; border: 0; background: var(--fundo); }

.splash { position: fixed; inset: 0; z-index: 30; background: var(--fundo);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: opacity .35s ease, visibility .35s ease; }
.splash img { width: min(70vw, 320px); height: auto; }
.splash p { margin: 0; font-size: .95rem; color: var(--suave); letter-spacing: .01em; }
.splash.hidden { opacity: 0; visibility: hidden; }

.offline { position: fixed; inset: 0; z-index: 20; background: var(--fundo);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.offline[hidden], .install[hidden], #install-btn[hidden] { display: none; }
.offline-box { max-width: 380px; text-align: left; }
.offline-box h1 { margin: 0 0 12px; font-size: 1.5rem; line-height: 1.2; color: var(--verde); }
.offline-box p { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.5; }
.status { min-height: 1.4em; margin: 12px 0 0; font-size: .95rem; color: var(--suave); }
.phone { margin-top: 28px; font-size: .98rem; color: var(--suave); }
.phone a { color: var(--verde); font-weight: 600; }

button { font: inherit; cursor: pointer; border-radius: 10px; border: 2px solid var(--verde);
  padding: 12px 20px; min-height: 48px; }
#retry, #install-btn { background: var(--verde); color: var(--fundo); font-weight: 600; }
#install-close { background: transparent; color: var(--verde); }
button:focus-visible, a:focus-visible { outline: 3px solid #8BC34A; outline-offset: 2px; }

.install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  background: var(--verde); color: var(--fundo); border-radius: 14px; padding: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.install p { margin: 0; flex: 1 1 100%; font-size: .98rem; line-height: 1.4; }
.install #install-btn { background: var(--fundo); color: var(--verde); border-color: var(--fundo); }
.install #install-close { color: var(--fundo); border-color: var(--fundo); }

@media (prefers-reduced-motion: reduce) { .splash { transition: none; } }