/* Biofuneral · App de acompañamiento — paleta Bosque nativo */

:root {
  --forest: #2F5233;
  --forest-dark: #223c26;
  --sage: #7A9B7E;
  --sage-light: #E4EBE2;
  --cream: #F7F3EC;
  --cream-dark: #EEE7D8;
  --earth: #A9744F;
  --earth-light: #F1E4D6;
  --ink: #2B2620;
  --ink-muted: #6B6455;
  --ink-faint: #9B9384;
  --white: #FFFFFF;
  --danger: #B3492F;
  --danger-light: #F6E3DD;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(43, 38, 32, 0.06), 0 4px 16px rgba(43, 38, 32, 0.06);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-voice: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
}

.screen {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--cream);
  padding-bottom: 84px;
  position: relative;
}

/* Header */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 8px;
}
.topbar .back {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar .brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--forest);
}
.topbar .brand-name {
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.page-header { padding: 4px 20px 4px; }
.eyebrow {
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}
h1.page-title {
  font-family: var(--font-voice);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 4px;
  color: var(--forest-dark);
}
.page-sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 18px;
}

.content { padding: 0 20px; }

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.card.flat {
  background: var(--sage-light);
  border: none;
}
.card.highlight {
  border: 2px solid var(--forest);
  background: var(--white);
}

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sage-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--forest-dark);
}
.banner.earth { background: var(--earth-light); color: #6b4a2f; }

/* Grid of module tiles */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 14px;
  transition: transform 0.15s ease;
}
.tile:active { transform: scale(0.98); }
.tile-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  font-size: 15px;
}
.tile-icon.forest { background: var(--sage-light); color: var(--forest); }
.tile-icon.earth { background: var(--earth-light); color: var(--earth); }
.tile-title { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.tile-sub { font-size: 11.5px; color: var(--ink-muted); margin: 0; }

/* List rows */
.row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--cream-dark);
}
.row:first-of-type { border-top: none; }
.row-title { font-size: 13.5px; font-weight: 600; margin: 0; }
.row-sub { font-size: 12px; color: var(--ink-muted); margin: 2px 0 0; }
.row-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sage-light); color: var(--forest);
  font-size: 14px; flex-shrink: 0;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sage-light); color: var(--forest-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cream-dark);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.btn.primary { background: var(--forest); color: var(--white); border-color: var(--forest); }
.btn.earth { background: var(--earth); color: var(--white); border-color: var(--earth); }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }

/* Form fields */
label.field-label {
  display: block; font-size: 12px; color: var(--ink-muted); margin: 0 0 5px;
}
input[type="text"], input[type="date"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cream-dark);
  background: var(--white);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 14px;
}
.pill-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.pill-toggle button {
  flex: 1; padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--cream-dark); background: var(--white);
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.pill-toggle button.active { background: var(--sage-light); border-color: var(--forest); color: var(--forest-dark); }

/* Tags / badges */
.tag {
  font-size: 10px; color: var(--ink-muted); background: var(--cream-dark);
  border-radius: 6px; padding: 2px 7px;
}
.badge { font-size: 10px; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.badge.success { background: var(--sage-light); color: var(--forest-dark); }
.badge.warning { background: var(--earth-light); color: #6b4a2f; }
.badge.muted { background: var(--cream-dark); color: var(--ink-muted); }

/* Progress bar */
.progress-track { height: 6px; background: var(--cream-dark); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.progress-fill { height: 100%; background: var(--forest); }

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  background: var(--white);
  border-top: 1px solid var(--cream-dark);
  display: flex;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex: 1; text-align: center; text-decoration: none; color: var(--ink-faint);
  font-size: 10px; padding: 6px 2px;
}
.bottom-nav a .nav-icon { font-size: 18px; display: block; margin-bottom: 2px; }
.bottom-nav a.active { color: var(--forest); font-weight: 600; }

.section-label { font-size: 13px; font-weight: 600; margin: 18px 0 10px; }

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.link { color: var(--forest); font-weight: 600; text-decoration: none; }