:root {
  --forest-950: #0f2614;
  --forest-900: #1a3d20;
  --forest-800: #1a3d20;
  --forest-700: #24522c;
  --forest-600: #2e6b3a;
  --forest-500: #27ae60;
  --amber-700: #aa6a0f;
  --amber-600: #c17f24;
  --amber-500: #c17f24;
  --paper: #fafaf8;
  --paper-2: #e8ede4;
  --ink: #1f2a1f;
  --muted: #455244;
  --card: rgba(255, 255, 255, 0.82);
  --card-strong: #ffffff;
  --card-shadow: 0 4px 18px rgba(15, 38, 20, 0.1);
  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --line: rgba(26, 61, 32, 0.14);
  --glow: rgba(39, 174, 96, 0.18);
  --focus: #7ecf9c;
  --primary: #1a3d20;
  --accent: #c17f24;
  --success: #27ae60;
  --warning: #e67e22;
  --error: #c0392b;
  --blue: #2e6db4;
  --surface-variant: #e8ede4;
  --on-surface-variant: #455244;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--forest-950);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.high-contrast {
  --card: rgba(255, 255, 255, 0.88);
  --card-strong: rgba(255, 255, 255, 0.98);
  --muted: #385145;
  --line: rgba(10, 20, 14, 0.18);
  color: #08130b;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.app-root {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

/* La barra dinámica de Safari ya no provoca saltos de alto al abrir/cerrar la
   PWA instalada. Los navegadores sin dvh conservan el 100vh anterior. */
@supports (min-height: 100dvh) {
  html, body, .app-root { min-height: 100dvh; }
}

.app-root::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08) 24%, rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.10) 100%),
    radial-gradient(circle at 20% 10%, rgba(236, 246, 234, 0.22), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(199, 149, 58, 0.16), transparent 20%),
    radial-gradient(circle at 50% 96%, rgba(19, 43, 26, 0.34), transparent 50%);
  mix-blend-mode: screen;
  opacity: 0.75;
  z-index: -2;
}

.app-shell {
  width: min(1240px, calc(100vw - 20px));
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) 0 calc(env(safe-area-inset-bottom) + 100px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.3);
  background: linear-gradient(180deg, rgba(15, 32, 19, 0.72), rgba(20, 53, 31, 0.56));
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(5, 18, 8, 0.22);
  color: white;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.24), transparent 36%),
    linear-gradient(180deg, rgba(60, 136, 74, 0.95), rgba(13, 43, 23, 0.95));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 10px 18px rgba(2, 14, 7, 0.18);
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 800;
}

.brand-copy {
  min-width: 0;
}

.brand-copy p,
.hero-copy p,
.section-kicker,
.meta {
  margin: 0;
  opacity: 0.82;
  letter-spacing: 0.02em;
  font-size: 0.84rem;
}

.brand-copy h1,
.hero-copy h2,
.section-title,
.card-title,
.modal-title {
  margin: 0;
  font-family: inherit;
  letter-spacing: -0.02em;
}

.brand-copy h1 {
  font-size: 1.18rem;
  line-height: 1.05;
}

.ghost-button,
.primary-button,
.chip,
.tab-button,
.icon-button,
.small-button,
.pill-button {
  border: 0;
  border-radius: 999px;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ghost-button,
.primary-button,
.icon-button,
.small-button,
.pill-button,
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ghost-button,
.icon-button,
.small-button {
  color: white;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 14px;
}

.ghost-button:hover,
.primary-button:hover,
.icon-button:hover,
.small-button:hover,
.tab-button:hover,
.chip:hover,
.pill-button:hover {
  transform: translateY(-1px);
}

.primary-button {
  color: white;
  background: linear-gradient(180deg, var(--amber-500), var(--amber-700));
  padding: 12px 16px;
  box-shadow: 0 16px 30px rgba(151, 92, 14, 0.26);
}

.ghost-button:focus-visible,
.primary-button:focus-visible,
.icon-button:focus-visible,
.small-button:focus-visible,
.tab-button:focus-visible,
.chip:focus-visible,
.pill-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.95fr);
  gap: 14px;
  margin-bottom: 14px;
}

.hero-card,
.glass-card,
.panel,
.modal-card,
.map-card,
.stat-card,
.install-banner {
  border: 1px solid rgba(255,255,255,0.25);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.64));
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
}

.hero-card {
  padding: 22px;
  color: white;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,0.18), transparent 30%),
    linear-gradient(145deg, rgba(12, 31, 20, 0.94), rgba(28, 72, 40, 0.82));
  overflow: hidden;
  position: relative;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: auto -8% -26% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 68%);
  pointer-events: none;
}

.hero-copy {
  display: grid;
  gap: 10px;
}

.hero-copy h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 0.96;
  max-width: 12ch;
}

.hero-copy p {
  max-width: 68ch;
  font-size: 0.97rem;
  opacity: 0.88;
}

.hero-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-meta {
  display: grid;
  gap: 12px;
}

.hero-meta .stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.65));
  padding: 16px;
}

.stat-label {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 4px;
}

.stat-value {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}

.stat-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 2px 10px;
}

.section-card,
.panel,
.map-card {
  padding: 18px;
}

.section-title {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.section-subtitle {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.93rem;
}

.section-stack {
  display: grid;
  gap: 14px;
}

.tabbar {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  z-index: 20;
  width: min(1240px, calc(100vw - 20px));
  margin: 12px auto 0;
  padding: 10px;
  border-radius: 24px;
  background: rgba(10, 25, 16, 0.8);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 14px 50px rgba(4, 14, 8, 0.26);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.tab-button {
  padding: 11px 10px 10px;
  background: transparent;
  color: rgba(255,255,255,0.84);
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}

.tab-button span {
  font-size: 0.78rem;
  line-height: 1;
}

.tab-button svg {
  width: 20px;
  height: 20px;
}

.icon {
  flex: none;
  display: inline-block;
}

.tab-button.is-active {
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.content-grid {
  display: grid;
  gap: 14px;
}

.card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rounded-card,
.tree-card,
.feature-card,
.photo-card,
.result-card,
.info-card,
.inventory-card,
.calculator-card,
.settings-card {
  border: 1px solid rgba(19, 43, 26, 0.09);
  background: var(--card-strong);
  box-shadow: 0 16px 40px rgba(11, 25, 15, 0.12);
  border-radius: 24px;
}

.rounded-card,
.tree-card,
.feature-card,
.photo-card,
.result-card,
.info-card,
.inventory-card,
.calculator-card,
.settings-card {
  padding: 16px;
}

.split-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  padding: 8px;
  background: rgba(15, 35, 19, 0.07);
  border: 1px solid rgba(15, 35, 19, 0.08);
  border-radius: 999px;
}

.chip {
  background: rgba(15, 35, 19, 0.06);
  color: var(--ink);
  border: 1px solid rgba(15, 35, 19, 0.08);
  padding: 10px 14px;
  font-weight: 700;
}

.chip.is-active {
  color: white;
  background: linear-gradient(180deg, var(--forest-500), var(--forest-800));
  box-shadow: 0 12px 20px rgba(15, 67, 36, 0.2);
}

.input-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.input-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.input-group {
  display: grid;
  gap: 6px;
}

.input-group label {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(14, 31, 18, 0.12);
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  padding: 13px 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

textarea {
  min-height: 94px;
  resize: vertical;
}

.helper {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-button {
  padding: 10px 14px;
  border: 1px solid rgba(15, 35, 19, 0.1);
  background: rgba(255,255,255,0.82);
  color: var(--ink);
  font-weight: 700;
}

.pill-button.is-active {
  background: linear-gradient(180deg, var(--forest-500), var(--forest-800));
  color: white;
  border-color: transparent;
}

.empty-state {
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(245, 248, 243, 0.84));
  border: 1px dashed rgba(15, 35, 19, 0.16);
  color: var(--muted);
  text-align: center;
}

.tree-list,
.feature-list,
.photo-list {
  display: grid;
  gap: 12px;
}

.tree-card h4,
.feature-card h4,
.photo-card h4,
.settings-card h4,
.result-card h4,
.inventory-card h4,
.calculator-card h4 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.tree-meta,
.feature-meta,
.photo-meta,
.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid rgba(15, 35, 19, 0.08);
  background: rgba(235, 242, 232, 0.9);
  color: var(--forest-900);
}

.badge.amber {
  background: rgba(255, 241, 215, 0.92);
  color: #8c5a15;
}

.badge.green {
  background: rgba(223, 245, 228, 0.92);
  color: #1b6e3c;
}

.badge.red {
  background: rgba(251, 232, 232, 0.95);
  color: #ab2f2f;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 8, 0.55);
  display: grid;
  place-items: center; /* centrada como el dialogo de Android; estable con el teclado */
  padding: 16px;
  z-index: 60;
}

.modal-card {
  width: min(760px, 100%);
  max-height: min(92vh, 980px);
  overflow: auto;
  padding: 18px;
  background: #F5F8F3; /* opaco: la ficha no debe transparentar el fondo */
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(6, 14, 8, 0.38);
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-copy {
  display: grid;
  gap: 6px;
}

.modal-title {
  font-size: 1.45rem;
}

.modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preview-image {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 35, 19, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(236, 243, 232, 0.74));
}

.preview-image img {
  width: 100%;
  height: auto;
}

.map-card {
  overflow: hidden;
}

.map-frame {
  width: 100%;
  height: min(56vh, 560px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(15, 35, 19, 0.1);
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.install-banner {
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.install-banner strong {
  display: block;
  font-size: 0.98rem;
}

.install-banner p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.boot-card {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(15, 35, 19, 0.9), rgba(27, 67, 36, 0.76));
  color: white;
  text-align: center;
  box-shadow: 0 24px 80px rgba(3, 13, 6, 0.32);
}

.boot-logo {
  width: 112px;
  height: 112px;
  margin: 0 auto 14px;
  border-radius: 28px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

.boot-card h1 {
  margin: 0;
  font-family: inherit;
  font-size: 2rem;
}

.boot-card p {
  margin: 8px 0 0;
  opacity: 0.88;
}

.toast-area {
  position: fixed;
  inset: auto 16px calc(env(safe-area-inset-bottom) + 110px) auto;
  display: grid;
  gap: 10px;
  z-index: 70;
}

.toast {
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 16px;
  color: white;
  background: rgba(15, 35, 19, 0.94);
  box-shadow: 0 18px 30px rgba(5, 12, 7, 0.26);
  border: 1px solid rgba(255,255,255,0.14);
}

.toast strong {
  display: block;
  margin-bottom: 2px;
}

.toast p {
  margin: 0;
  opacity: 0.92;
  font-size: 0.88rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .hero-grid,
  .split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100vw, calc(100vw - 14px));
    padding-top: calc(env(safe-area-inset-top) + 10px);
  }

  .topbar {
    border-radius: 24px;
    padding: 12px 14px;
  }

  .hero-card,
  .section-card,
  .panel,
  .map-card,
  .rounded-card,
  .tree-card,
  .feature-card,
  .photo-card,
  .result-card,
  .info-card,
  .inventory-card,
  .calculator-card,
  .settings-card {
    border-radius: 22px;
  }

  .input-grid,
  .input-grid.three {
    grid-template-columns: 1fr;
  }

  .tabbar {
    width: min(100vw, calc(100vw - 14px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modal-backdrop {
    align-items: center;
    padding: 10px;
  }

  .modal-card {
    max-height: 92vh;
    border-radius: 24px;
  }

  .map-frame {
    height: 52vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===== Componentes estilo Android (Material 3 / DasonField) ===== */
.df-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.df-topbar h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(10, 24, 14, 0.45);
}
.df-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.df-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.df-metric-card {
  background: linear-gradient(155deg, #ffffff 0%, #f6f9f5 100%);
  border: 1px solid rgba(26, 61, 32, 0.09);
  border-radius: 20px;
  padding: 14px 13px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 8px 22px rgba(17, 43, 24, 0.12);
}
.df-metric-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.df-metric-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.df-metric-title {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.df-metric-value {
  margin: 0;
  font-size: 25px;
  line-height: 29px;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.df-metric-sub {
  margin: 0;
  font-size: 12px;
  line-height: 15px;
  color: var(--on-surface-variant);
}
.df-home-project-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,241,.97)) !important;
  border-color: rgba(26, 61, 32, .12);
  box-shadow: 0 12px 30px rgba(12, 39, 19, .17);
}
.df-home-project-card::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  right: -42px;
  top: -55px;
  border-radius: 50%;
  background: rgba(46, 125, 67, .08);
  pointer-events: none;
}
.df-home-project-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.df-home-project-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2e7d43, #174f2a);
  color: #fff;
  box-shadow: 0 6px 14px rgba(23, 79, 42, .24);
}
.df-home-project-icon svg { color: #fff; }
.df-home-project-head .section-title { margin: 0; font-size: 1.18rem; }
.df-home-eyebrow {
  margin: 0 0 2px;
  color: #5b6b5d;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
}
.df-home-project-card .df-select {
  min-height: 50px;
  border-radius: 15px;
  border-color: rgba(26, 61, 32, .28);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.df-home-project-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 9px;
}
.df-home-project-actions .df-btn,
.df-home-project-card > .df-btn {
  min-height: 48px;
  border-radius: 15px;
}
.df-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.df-pill.ok { background: rgba(39, 174, 96, 0.12); color: var(--success); }
.df-pill.warn { background: rgba(230, 126, 34, 0.12); color: var(--warning); }
.df-gps-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* ===== v88: opciones de ecuación como tarjetas, nunca como botones ovalados ===== */
.df-equation-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.df-equation-choice {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid rgba(26, 61, 32, .35);
  border-radius: 16px;
  background: #fff;
  color: var(--primary);
  font: inherit;
  text-align: left;
  white-space: normal;
  overflow: visible;
}
.df-equation-choice.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.df-equation-choice strong,
.df-equation-choice span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.df-equation-choice strong {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.3;
}
.df-equation-choice span {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  white-space: pre-wrap;
}
.df-gps-lines { flex: 1; min-width: 0; }
.df-gps-lines .l1 { margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.df-gps-lines .l2 {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
.df-gps-lines .l3 { margin: 0; font-size: 14px; color: var(--on-surface-variant); }
.df-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-strong);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--card-shadow);
}
.df-activity-row .body { flex: 1; min-width: 0; }
.df-activity-row .body h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.df-activity-row .body p { margin: 0; font-size: 14px; color: var(--on-surface-variant); }
.df-activity-row .kind { font-size: 14px; color: var(--on-surface-variant); }
.df-empty {
  background: var(--surface-variant);
  border-radius: 18px;
  padding: 14px;
  text-align: center;
  color: var(--ink);
}
.df-empty h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.df-empty p { margin: 0; font-size: 14px; color: var(--on-surface-variant); }
.df-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  font-size: 15px;
  font-weight: 600;
}
.df-btn.primary { background: var(--primary); color: #ffffff; }
.df-btn.outlined {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(26, 61, 32, 0.5);
}
.df-btn.blue { background: var(--blue); color: #ffffff; width: 100%; }
.df-btn:disabled { opacity: 0.5; }
.df-proj-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-xs);
  background: #f0f2ee;
  padding: 12px;
}
.df-proj-item.active { background: rgba(46, 125, 67, 0.14); }
.df-proj-item .info { flex: 1; min-width: 0; cursor: pointer; }
.df-proj-item .info h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--primary); }
.df-proj-item .info p { margin: 0; font-size: 12px; color: #5a6b5a; }
.df-proj-item .trash {
  border: none;
  background: transparent;
  color: var(--error);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.df-select {
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(26, 61, 32, 0.4);
  background: var(--card-strong);
  color: var(--ink);
  padding: 0 12px;
  font-size: 15px;
}


/* ===== Inventario estilo Android ===== */
.df-inv-row2 { display: flex; gap: 8px; }
.df-btn.success { background: var(--success); color: #fff; flex: 1; }
.df-btn.blue2 { background: var(--blue); color: #fff; flex: 1; }
.df-btn.compact { min-height: 48px; border-radius: 12px; font-size: 13px; flex: 1; padding: 0 8px; }
.df-btn.green2 { background: #2e7d43; color: #fff; }
.df-btn.dark { background: var(--primary); color: #fff; }
.df-btn.amber { background: var(--accent); color: #fff; }
.df-table-wrap {
  background: var(--card-strong);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--card-shadow);
  overflow-x: auto;
}
.df-table { border-collapse: collapse; min-width: 560px; width: 100%; }
.df-table th {
  text-align: left; font-size: 13px; font-weight: 700;
  color: var(--primary); padding: 6px 4px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.df-table td {
  font-size: 14px; padding: 8px 4px;
  border-bottom: 1px solid var(--surface-variant); white-space: nowrap;
}
.df-table tbody tr { cursor: pointer; }

/* ===== Resultados POA: lectura clara en pantallas pequeñas ===== */
.poa-result-card,
.poa-table-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.poa-section-head,
.poa-table-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.poa-section-head h3,
.poa-table-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}
.poa-section-head p,
.poa-table-card header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.poa-table-card > header { display: block; }
.poa-method-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: #d9eadb;
  color: var(--forest-900);
  font-size: 11px;
  font-weight: 700;
}
.poa-method-badge.regional {
  background: #f6e3c5;
  color: #6d4309;
}
.poa-kpi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.poa-kpi {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface-variant);
}
.poa-kpi.primary { background: #d9eadb; }
.poa-kpi span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.poa-kpi strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(17px, 5vw, 22px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.poa-kpi small { color: var(--muted); font-size: 11px; }
.poa-per-ha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f4e7d1;
  font-size: 12px;
}
.poa-per-ha strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.poa-subtable h4 {
  margin: 0 0 8px;
  font-size: 14px;
}
.poa-table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.poa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.poa-class-table { min-width: 100%; table-layout: fixed; }
.poa-dap-table { min-width: 570px; }
.poa-stand-table { min-width: 780px; }
.poa-table th,
.poa-table td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.poa-table th {
  background: var(--surface-variant);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}
.poa-table th small { font-size: 10px; }
.poa-table th.number,
.poa-table td.number { text-align: right; }
.poa-table tbody tr:nth-child(even) { background: rgba(232, 237, 228, .52); }
.poa-table tbody tr:last-child td { border-bottom: 0; }
.poa-table .poa-total-row {
  background: #d9eadb;
  color: var(--forest-900);
  font-weight: 700;
}
.poa-equation {
  margin-top: 12px;
  border-radius: 12px;
  background: #e1effb;
  border: 1px solid #b8d3eb;
  box-shadow: 0 2px 7px rgba(36, 74, 114, .12);
  padding: 0 12px;
}
.poa-equation[open] { background: #edf6fd; }
.poa-equation summary {
  padding: 12px 0;
  color: #173f66;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.poa-copy-button {
  background: #315c8a;
  color: #ffffff;
  border: 1px solid #244a72;
  box-shadow: 0 4px 10px rgba(36, 74, 114, .25);
}
.poa-copy-button:hover,
.poa-copy-button:active { background: #244f7c; }
.poa-equation strong {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}
.poa-equation p {
  margin: 0;
  padding-bottom: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.df-progress { height: 8px; border-radius: 4px; background: var(--surface-variant); overflow: hidden; }
.df-progress > div { height: 100%; transition: width 0.3s; }
.df-inv-saved { background: #f0f5f0; border-radius: 12px; padding: 12px; }
.df-link-danger {
  color: #e5564e; background: none; border: none; font-weight: 600;
  display: flex; align-items: center; gap: 6px; justify-content: center;
  width: 100%; min-height: 44px; font-size: 14px;
}
.input-group span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.input-group input {
  width: 100%; min-height: 48px; border-radius: var(--radius-xs);
  border: 1px solid rgba(26, 61, 32, 0.4); background: var(--card-strong);
  color: var(--ink); padding: 0 12px; font-size: 15px;
}


/* ===== Editor de arbol (bottom sheet Android) ===== */
.df-sheet { max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.df-numfield {
  flex: 1; min-height: 86px; border-radius: var(--radius-sm);
  border: none; background: var(--surface-variant);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 4px; padding: 10px 14px; cursor: pointer;
}
.df-numfield span { font-size: 13px; color: var(--on-surface-variant); }
.df-numfield strong { font-size: 24px; color: var(--ink); }
.df-pad-display {
  margin: 8px 0; text-align: center; font-size: 30px; font-weight: 700;
  color: var(--ink); background: var(--surface-variant);
  border-radius: 12px; padding: 12px; min-height: 58px;
}
.df-pad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.df-pad-key {
  min-height: 58px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card-strong); font-size: 22px; font-weight: 600; color: var(--ink);
}
.df-pad-key:active { background: var(--surface-variant); }


/* ===== CalcHome estilo Android ===== */
.df-calc-card { text-align: left; border: none; cursor: pointer; width: 100%; }
.df-calc-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
.df-calc-card p { margin: 0; font-size: 13px; color: var(--on-surface-variant); }


/* ===== Tarjeta Parcelas de muestreo (verde oscuro Android) ===== */
.df-premuestreo-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(26, 61, 32, 0.92); border: none; cursor: pointer;
  width: 100%; text-align: left; padding: 18px;
}
.df-premuestreo-card .pm-icon { font-size: 34px; }
.df-premuestreo-card .pm-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.df-premuestreo-card .pm-body strong { color: #fff; font-size: 17px; }
.df-premuestreo-card .pm-body span { color: #b8d8c2; font-size: 12.5px; line-height: 1.35; }
.df-premuestreo-card .pm-arrow { color: #9fe1cb; font-size: 26px; }


/* ===== Premuestreo (Parcelas de muestreo) ===== */
.df-pre-topbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--primary); border-radius: var(--radius-md);
  padding: 12px 14px;
}
.df-pre-parcela {
  display: flex; align-items: center; gap: 10px;
  background: rgba(46, 125, 67, 0.06); border-radius: 12px; padding: 12px; cursor: pointer;
}
.df-pre-parcela .num {
  width: 34px; height: 34px; border-radius: 8px; background: var(--primary);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.df-pre-parcela .body { flex: 1; min-width: 0; }
.df-pre-parcela .body h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--primary); }
.df-pre-parcela .body p { margin: 0; font-size: 11px; color: var(--on-surface-variant); }
.df-pre-del { border: none; background: transparent; color: var(--error); width: 40px; height: 40px; border-radius: 50%; }
.df-tipo-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--surface-variant); }
.df-conteo-block { background: rgba(193, 127, 36, 0.08); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }









.df-cv-banner {
  background: var(--primary); border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.df-cv-banner .lbl { color: #9fe1cb; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.df-cv-banner .val { color: #fff; font-size: 40px; font-weight: 700; line-height: 1.1; }
.df-cv-banner .sub { color: #b8d8c2; font-size: 12px; }
.df-subcard { background: rgba(255,255,255,0.92); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.df-chip3 {
  flex: 1; border-radius: 14px; padding: 14px 6px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.df-chip3 strong { font-size: 26px; font-weight: 700; }
.df-chip3 span { font-size: 10.5px; line-height: 1.2; }


/* ===== Clases diametricas (diseño Android exacto) ===== */
.df-clase-controls {
  display: flex; align-items: center; gap: 10px;
}
.df-clase-pm {
  width: 44px; height: 44px; border-radius: 12px; border: none;
  font-size: 24px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.df-clase-pm.minus { background: rgba(192, 57, 43, 0.85); }
.df-clase-pm.plus { background: var(--success); }
.df-clase-pm:disabled { opacity: 0.4; }
.df-clase-center { flex: 1; display: flex; flex-direction: column; align-items: center; }
.df-clase-center .c1 { font-size: 13px; font-weight: 600; color: var(--primary); }
.df-clase-center .c2 { font-size: 11px; color: #7a8a7a; }
.df-clases-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: 56px;
  gap: 8px; overflow-x: auto; padding-bottom: 6px;
}
.df-clase-cell {
  width: 56px; height: 60px; border-radius: 12px;
  border: 1px solid #bfc9bd; background: rgba(255,255,255,0.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; cursor: pointer;
}
.df-clase-cell.hasval { background: rgba(193, 127, 36, 0.18); }
.df-clase-cell.sel { background: var(--success); border-color: var(--success); }
.df-clase-cell .cl { font-size: 11px; font-weight: 700; color: var(--primary); }
.df-clase-cell.sel .cl { color: #fff; }
.df-clase-cell .vv { font-size: 20px; font-weight: 700; color: #b0b8ae; }
.df-clase-cell.hasval .vv { color: var(--accent); }
.df-clase-cell.sel .vv { color: #fff; }
.df-clase-hint { margin: 0; font-size: 10px; color: #9aa89a; line-height: 1.4; }


/* ===== Mapa estilo Android ===== */
.df-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 2px; }
.df-chip {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(26, 61, 32, 0.4); background: var(--card-strong);
  color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.df-chip.on { background: var(--surface-variant); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.df-map-holder { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.df-map-frame { height: 560px; width: 100%; background: #dfe6dd; }
.df-map-pills {
  position: absolute; top: 12px; left: 56px; z-index: 500;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.df-map-locate {
  position: absolute; bottom: 14px; right: 12px; z-index: 500;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.9); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(15, 38, 20, 0.25);
}


/* ===== Camara estilo Android ===== */
.df-cam-preview {
  position: relative; height: 330px; border-radius: var(--radius-md); overflow: hidden;
  background: linear-gradient(180deg, #22372a, #0d1f12);
  display: flex; align-items: center; justify-content: center;
}
.df-cam-preview.confoto { background: #000; }
.df-cam-preview img { width: 100%; height: 100%; object-fit: contain; }
.df-cam-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9fe1cb; }
.df-cam-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(27, 122, 61, 0.8); color: #fff;
  border-radius: 12px; padding: 8px 12px; font-size: 12px; font-weight: 700;
  max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.df-cam-viewer {
  position: fixed; inset: 0; z-index: 100; background: #000;
}
.df-cam-viewer video { width: 100%; height: 100%; object-fit: cover; }
.df-cam-rail {
  position: absolute; left: 14px; top: 30%; display: flex; flex-direction: column; gap: 13px;
  max-width: 46%;
}
.df-cam-rail .item { display: flex; flex-direction: column; gap: 1px; }
.df-cam-rail .lbl {
  color: #65E09B; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.df-cam-rail .val {
  color: #fff; font-size: 15px; font-family: ui-monospace, monospace; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85); line-height: 1.15;
}
.df-cam-rail .item { display: flex; flex-direction: column; gap: 2px; }
.df-cam-rail .lbl { color: #9fe1cb; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.df-cam-rail .val { color: #fff; font-family: monospace; font-size: 15px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.df-cam-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 20px;
  z-index: 104;
}
.df-cam-count {
  position: absolute; top: calc(68px + env(safe-area-inset-top)); left: 14px;
  color: #9fe1cb; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.df-cam-shutter {
  position: absolute; bottom: calc(30px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 76px; border-radius: 50%;
  background: #fff; border: 5px solid rgba(255,255,255,0.4);
  background-clip: padding-box;
}
.df-cam-shutter:active { background-color: #d0d0d0; }


/* ===== Fondo en capa fija GPU (arregla el lag de scroll en iOS) ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top, rgba(190, 227, 197, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(10, 24, 14, 0.22), rgba(10, 24, 14, 0.08)),
    url("./assets/forest_bg.png") center/cover no-repeat,
    linear-gradient(180deg, var(--forest-900), var(--forest-950));
  transform: translateZ(0);
}
html, body { overflow-x: hidden; }


/* ===== Navegacion inferior por tarjetas (Android/iOS) ===== */
nav.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 6px 4px calc(7px + env(safe-area-inset-bottom));
  border-radius: 0;
  border: none;
  background: rgba(246, 248, 244, 0.98);
  box-shadow: 0 -3px 18px rgba(20, 43, 25, 0.15);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  z-index: 40;
}
nav.tabbar .tab-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 5px 1px 6px;
  background: #ffffff;
  color: #35443a;
  border: 1px solid rgba(26, 61, 32, 0.08);
  border-radius: 18px;
  box-shadow: 0 3px 9px rgba(23, 48, 29, 0.12);
  min-width: 0;
}
nav.tabbar .tab-button svg { position: relative; z-index: 1; }
nav.tabbar .tab-button span {
  font-size: 11px;
  font-weight: 600;
  color: #35443a;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}
nav.tabbar .tab-button .nav-label {
  width: 100%;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: normal;
  line-height: 1.02;
  text-align: center;
  font-size: 10px;
  letter-spacing: -0.08px;
}
nav.tabbar .tab-button[data-tab="calculators"] .nav-label {
  font-size: 9.5px;
  letter-spacing: -0.2px;
}
nav.tabbar .tab-button .nav-pill {
  width: 48px;
  height: 34px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
nav.tabbar .tab-button.is-active .nav-pill { background: #eadffc; }
nav.tabbar .tab-button.is-active { color: #6f35b5; }
nav.tabbar .tab-button.is-active span { font-weight: 750; color: #6f35b5; }
.app-shell { padding-bottom: calc(env(safe-area-inset-bottom) + 104px) !important; }





/* ===== Mapa pantalla completa — geometria exacta del Android ===== */
.df-fullmap { position: fixed; inset: 0; z-index: 90; background: #dce4dc; }
#fullmap-canvas {
  position: absolute;
  inset: 0;
  /* Fondo local cuando no hay una tesela guardada. No sustituye un mapa base. */
  background-color: #dce4dc;
  background-image:
    linear-gradient(rgba(26, 61, 32, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 61, 32, .08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.df-fm-attribution {
  position: absolute;
  left: 86px;
  right: 96px;
  /* El zoom ocupa de 32 a 80 px desde el borde inferior. */
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 530;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
.df-fm-offline {
  position: absolute;
  top: calc(174px + env(safe-area-inset-top));
  left: 14px;
  right: 86px;
  z-index: 509;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 9px;
  background: rgba(16, 36, 15, .9);
  color: #fff;
  font-size: 10px;
  line-height: 1.25;
  pointer-events: none;
}
.df-fm-offline[hidden] { display: none; }
.df-fm-zoom {
  position: absolute;
  left: 50%;
  bottom: calc(32px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 525;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.df-fm-zoom button {
  width: 50px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  color: #132a19;
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
  font-size: 32px;
  line-height: 1;
  font-weight: 500;
}
.df-fm-zoom button:active {
  transform: scale(.96);
  background: #e5eee5;
}

/* Panel superior verde translucido a todo el ancho */
.df-fm-toppanel {
  position: absolute; top: 0; left: 0; right: 0; z-index: 510;
  background: rgba(26, 61, 32, 0.8);
  padding: calc(11px + env(safe-area-inset-top)) 8px 5px 8px;
}
.df-fm-toppanel .modo { margin: 0; color: #9FE1CB; font-size: 16px; font-weight: 400; }
.df-fm-toppanel .hint { margin: 0; color: #fff; font-size: 13px; }

/* Tabs de modo: fila con padding 12dp, arranca a 64dp */
.df-fm-modes {
  position: absolute; top: calc(64px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 510;
  display: flex; gap: 8px; padding: 0 12px;
}
.df-fm-mode {
  flex: 1; border: none; border-radius: 12px;
  background: rgba(21, 36, 74, 0.8); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; font-size: 12px; font-weight: 400;
}
.df-fm-mode.on { background: #5B8DD6; }

/* Pildora GPS: top 134dp, left 14dp, fondo #10240F 80% */
.df-fm-gpspill {
  position: absolute; top: calc(134px + env(safe-area-inset-top)); left: 14px; z-index: 510;
  background: rgba(16, 36, 15, 0.8); color: #F4C24B;
  border-radius: 12px; padding: 7px 12px; font-size: 14px; font-weight: 600;
}

/* Chip Mapa base: top 132dp, right 14dp */
.df-fm-base {
  position: absolute; top: calc(132px + env(safe-area-inset-top)); right: 14px; z-index: 510;
  border: none; border-radius: 12px;
  background: rgba(21, 36, 74, 0.85); color: #fff;
  padding: 8px 12px; font-size: 13px; font-weight: 500;
}
.df-fm-basemenu {
  position: absolute; top: calc(172px + env(safe-area-inset-top)); right: 14px; z-index: 520;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(21, 36, 74, 0.95); border-radius: 12px; padding: 6px;
}
.df-fm-basemenu button { border: none; background: transparent; color: #fff; font-size: 13px; padding: 8px 12px; text-align: left; border-radius: 8px; }
.df-fm-basemenu button.on { background: #5B8DD6; }

/* Boton de herramienta: bg #1B2D5A 85%, borde blanco 20%, r14, icono 17 + texto 8 #EAF6EF */
.df-fm-tool {
  width: 100%; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(27, 45, 90, 0.85); color: #EAF6EF;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px; margin: 3px 0; gap: 1px;
}
.df-fm-tool span { font-size: 8px; color: #EAF6EF; white-space: nowrap; }

/* Columna derecha: 64dp de ancho, top 184dp, right 14dp, con scroll hasta bottom 110dp */
.df-fm-col {
  position: absolute; right: 14px; top: calc(184px + env(safe-area-inset-top));
  bottom: calc(110px + env(safe-area-inset-bottom));
  width: 64px; z-index: 510;
  display: flex; flex-direction: column; overflow-y: auto;
  scrollbar-width: none;
}
.df-fm-col::-webkit-scrollbar { display: none; }

/* Herramientas izquierdas: 64dp, bottom 18dp, left 14dp */
.df-fm-bl {
  position: absolute; left: 14px; bottom: calc(18px + env(safe-area-inset-bottom));
  width: 64px; z-index: 510;
  display: flex; flex-direction: column;
}

/* Reticulo central */
.df-fm-reticle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 500; pointer-events: none;
}

/* Brujula: 76dp, bottom 24dp, right 12dp */
.df-fm-compass {
  position: absolute; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 510;
  width: 76px; height: 76px;
}
.df-fm-compass .deg {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.df-fm-arealbl {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(152px + env(safe-area-inset-bottom)); z-index: 510;
  background: rgba(16, 36, 15, 0.8); color: #9FE1CB;
  border-radius: 12px; padding: 8px 14px; font-size: 15px; font-weight: 600;
}
.df-fm-layers {
  position: absolute; right: 86px; top: calc(184px + env(safe-area-inset-top)); z-index: 515;
  background: rgba(16, 36, 15, 0.92); border-radius: 12px; padding: 10px;
  max-width: 250px; max-height: 50vh; overflow-y: auto;
}
.df-fm-layers .row { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; padding: 6px 4px; }
.df-fm-layers .row .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.df-fm-layers .row em { margin-left: auto; color: #9FE1CB; font-style: normal; font-size: 12px; }


/* ===== FIX desborde movil: los hijos no pueden estirar las tarjetas ===== */
.section-card > *,
.content-grid > * {
  min-width: 0;
}
.df-chip-row { max-width: 100%; }
.df-btn { min-width: 0; }


/* ===== Ajustes: bottom sheet clon Android (v18) ===== */
.df-settings-scrim { align-items: flex-end; padding: 0; background: rgba(6, 14, 8, 0.6); place-items: end center; }
.df-settings-sheet {
  overflow: hidden;
  background: #f4f7f2;
  box-shadow: 0 -8px 30px rgba(6, 14, 8, 0.35);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 22px 22px 0 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 10px 0 0;
  animation: dfSheetUp 0.22s ease-out;
}
@keyframes dfSheetUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
.df-sheet-grip {
  width: 36px; height: 4px; border-radius: 999px;
  background: rgba(60, 70, 60, 0.35);
  margin: 0 auto 6px;
  flex: 0 0 auto;
}
/* df-scroll-lock eliminado en v67 (bloqueaba todo el scroll si la clase se quedaba pegada). */
.df-settings-scroll {
  overflow-y: auto;
  overscroll-behavior: contain; /* el scroll no se encadena al fondo al llegar al final */
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Sin esto, flexbox comprime los hijos (min-size 0 en contenedores con overflow)
   y las secciones se cortan/superponen en vez de hacer scroll. */
.df-settings-scroll > * { flex: 0 0 auto; }
/* Al llegar al tope/fondo del scroll de la hoja, NO encadenar el scroll al fondo
   (evita que el Inicio de atras se desplace tambien). */
.df-settings-sheet, .df-settings-scroll, .modal-card, .fm-dialog-card {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.df-slider { width: 100%; accent-color: var(--primary, #1A3D20); }
.df-divider { border: 0; border-top: 1px solid rgba(26, 61, 32, 0.18); margin: 2px 0; width: 100%; }
.df-switch-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.df-switch { position: relative; display: inline-block; flex: 0 0 auto; }
.df-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; z-index: 2; }
.df-switch-track {
  display: block; width: 52px; height: 32px; border-radius: 999px;
  background: #dcdfda; border: 2px solid #8a938a;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}
.df-switch-thumb {
  position: absolute; top: 6px; left: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: #8a938a;
  transition: transform 0.15s ease, background 0.15s ease, width 0.15s ease, height 0.15s ease, top 0.15s ease;
}
.df-switch input:checked + .df-switch-track { background: var(--primary, #1A3D20); border-color: var(--primary, #1A3D20); }
.df-switch input:checked + .df-switch-track .df-switch-thumb {
  background: #fff; transform: translateX(20px); width: 24px; height: 24px; top: 4px;
}
.df-about-card {
  background: #F0F5F0; border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.df-about-title { margin: 0; font-size: 16px; font-weight: 700; color: #1A3D20; }
.df-about-h { margin: 0; font-size: 13.5px; font-weight: 700; color: #1A3D20; }
.df-about-name { margin: 0; font-size: 14px; font-weight: 600; color: #1A3D20; }
.df-about-p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #2b332b; }
.df-about-dim { margin: 0; font-size: 12px; color: #6a736a; }


/* ===== Launcher de mapa (clon MapLauncherScreen) + dialogo fullscreen (v19) ===== */
.df-launcher-card { width:100%; min-height:180px; border:none; border-radius:18px; background:rgba(26,61,32,.86); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; box-shadow:0 10px 24px rgba(6,14,8,.25); font-family:inherit; }
.df-launcher-card svg { color:#9FE1CB; }
.df-launcher-title { font-size:17px; font-weight:700; }
.df-launcher-sub { font-size:12.5px; color:#9FE1CB; }
.df-feature-row { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid rgba(26,61,32,.12); cursor:pointer; }
.df-feature-row:last-child { border-bottom:none; }
.df-feature-row .dot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; border:2px solid rgba(0,0,0,.15); }
.df-feature-info { display:flex; flex-direction:column; flex:1; min-width:0; }
.df-feature-name { font-size:14.5px; font-weight:600; color:#16301a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-feature-sub { font-size:12px; color:#6a736a; text-transform:capitalize; }
.df-feature-row .df-icon-btn { border:none; background:transparent; color:#8a4a3a; padding:8px; border-radius:10px; font-size:15px; }
.df-empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 8px; color:#6a736a; text-align:center; }
.df-empty-t { margin:0; font-weight:700; color:#1A3D20; }
.df-empty-m { margin:0; font-size:12.5px; }
.fm-dialog-scrim { position:fixed; inset:0; z-index:5000; background:rgba(6,14,8,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.fm-dialog-card { background:#fff; border-radius:16px; padding:18px 16px 14px; width:100%; max-width:340px; max-height:min(88vh,900px); overflow-y:auto; box-shadow:0 16px 40px rgba(6,14,8,.4); display:flex; flex-direction:column; gap:10px; }
.fm-dialog-title { margin:0; font-size:16px; font-weight:700; color:#1A3D20; }
.fm-dialog-msg { margin:0; font-size:14px; line-height:1.6; color:#2b332b; white-space:pre-line; }


/* ===== Gestor de capas (v20) ===== */
.fm-mgr-list { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid rgba(26,61,32,.15); border-radius: 12px; }
.fm-list-row { display:flex; align-items:center; gap:10px; padding:13px 12px; border-bottom:1px solid rgba(26,61,32,.1); font-size:15px; color:#212121; cursor:pointer; user-select:none; -webkit-user-select:none; }
.fm-list-row:last-child { border-bottom:none; }
.fm-list-row.sel { background:#C8E6C9; }
.fm-cb { font-size:17px; color:#1A3D20; }
.fm-list-txt { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-opt-btn { width:100%; text-align:left; padding:12px 12px; border:none; border-radius:10px; background:#f0f5f0; color:#1A3D20; font-size:15px; }
.fm-opt-btn.on { background:#1A3D20; color:#fff; }
.fm-opt-btn.peligro { color:#b3402f; }
.fm-swatch-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.fm-swatch { aspect-ratio:1; border-radius:10px; border:2px solid rgba(0,0,0,.18); }
.fm-swatch.on { outline:3px solid #1A3D20; outline-offset:2px; }

/* ===== Track bar + toasts fullscreen (v23) ===== */
.df-fm-trackbar { position:absolute; left:12px; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:900;
  background:rgba(16,36,15,.92); border-radius:14px; padding:10px 12px; display:flex; align-items:center; gap:10px; }
.df-fm-trackbar .tk-info { color:#CFEFE2; font-size:13px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-fm-trackbar .tk-btns { display:flex; gap:8px; }
.df-fm-trackbar .tk-btns button { border:none; border-radius:10px; padding:9px 12px; font-size:13.5px; font-weight:700;
  background:#27AE60; color:#fff; display:inline-flex; align-items:center; gap:4px; }
.df-fm-trackbar .tk-btns button#fm-tk-stop { background:#b3402f; }
#fullmap-root.con-trackbar .df-fm-bl { bottom: calc(90px + env(safe-area-inset-bottom)); }
#fullmap-root.con-trackbar .df-fm-compass { bottom: calc(90px + env(safe-area-inset-bottom)); }
#fm-toasts { position:fixed; top:12px; left:0; right:0; z-index:6000; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
#fm-toasts > * { pointer-events:auto; }

.df-fm-style { position:absolute; right:12px; top:120px; z-index:900; background:rgba(16,36,15,.95); border-radius:14px;
  padding:12px; width:230px; display:flex; flex-direction:column; gap:8px; color:#fff; }
.df-fm-style strong { font-size:14px; }
.df-fm-style input { padding:8px; border-radius:8px; border:none; font-size:14px; }
.df-fm-style .cols { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.df-fm-style .col { aspect-ratio:1; border-radius:8px; border:2px solid rgba(255,255,255,.35); }
.df-fm-style .col.on { outline:2.5px solid #F4C24B; }
.df-fm-style .fila { display:flex; gap:8px; }
.df-fm-style .fila button { flex:1; border:none; border-radius:8px; padding:8px; font-size:13.5px; background:rgba(255,255,255,.15); color:#fff; }
.df-fm-style .fila button.ok { background:#27AE60; }

/* ===== v24: dialogos arriba (teclado), iconos de punto ===== */
.fm-dialog-scrim.arriba { align-items: flex-start; padding-top: 7vh; overflow-y: auto; }
.fm-icon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.fm-icon-cell { aspect-ratio:1; border-radius:10px; border:2px solid rgba(26,61,32,.2); background:#f0f5f0; display:flex; align-items:center; justify-content:center; }
.fm-icon-cell.on { outline:3px solid #1A3D20; outline-offset:1px; background:#dcebdc; }
.fm-pt { background:transparent; border:none; }
.fm-pt svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

/* ===== v25: ubicacion (flecha roja) + reticulo Android ===== */
.fm-ubic { width:34px; height:34px; transform-origin:50% 50%; transition:transform .18s linear; }
.fm-ubic svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.df-fm-reticle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:650; pointer-events:none; }
.df-fm-reticle svg { filter: none; }


/* ===== v33: Inventario clon Android (tabla PIM2000, anchos exactos dp) ===== */
.df-pim-card { background:#fff; border-radius:16px; box-shadow:var(--card-shadow); padding:8px; min-height:200px; max-height:420px; display:flex; flex-direction:column; }
.df-pim-scroll { overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:404px; }
.df-pim { border-collapse:collapse; width:max-content; min-width:100%; font-size:12.5px; }
.df-pim thead th { position:sticky; top:0; background:#fff; z-index:2; text-align:left; font-weight:700; color:#1A3D20;
  font-size:11.5px; letter-spacing:.2px; padding:6px 4px; border-bottom:1px solid rgba(26,61,32,.25); white-space:nowrap; }
.df-pim td { padding:8px 4px; border-bottom:1px solid #E7EBE6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#212121; }
.df-pim tbody tr:active { background:#F0F5F0; }
.df-pim .c-num { width:44px; font-weight:700; }
.df-pim .c-esp { width:110px; }
.df-pim .c-dap { width:64px; }
.df-pim .c-alt { width:64px; }
.df-pim .c-cla { width:56px; }
.df-pim .c-def { width:56px; }
.df-pim .c-obs { width:140px; }
.df-pim-vacio { padding:22px 8px; text-align:center; color:#6a736a; font-size:13px; }


/* ===== v35: Editor de arbol clon Android (ModalBottomSheet opaco) ===== */
.df-tree-sheet {
  background: #F7FAF6 !important;
  box-shadow: 0 -10px 34px rgba(6, 14, 8, .38);
  border-radius: 22px 22px 0 0;
  max-height: 92vh;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  animation: dfSheetUp .22s ease-out;
}

.df-tree-sheet .modal-title { font-size: 22px; font-weight: 800; color: #1A3D20; }
.df-tree-sheet .helper { color: #6a736a; }
/* Campos numericos grandes (NumericFieldCard del Android) */
.df-numcard {
  background: #E8F0E5; border: none; border-radius: 16px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
}
.df-numcard .lbl { font-size: 13.5px; color: #46564a; }
.df-numcard .val { font-size: 26px; font-weight: 800; color: #1A3D20; line-height: 1.15; }
.df-numcard .val.vacio { color: #9aa89c; font-weight: 700; }
/* Tarjeta GPS y foto */
.df-gpscard { background: #E8F0E5; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.df-gpscard strong { font-size: 15px; color: #1A3D20; }
/* Botones inferiores */
.df-tree-actions { display: flex; gap: 10px; }
.df-tree-actions .df-btn { flex: 1; min-height: 52px; border-radius: 26px; font-size: 15.5px; font-weight: 700; }
.df-warn { color: #C17F24; font-size: 13px; margin: 0; }


/* ===== v37: editor de arbol OPACO y anclado abajo (clon ModalBottomSheet) ===== */
.df-tree-backdrop {
  align-items: flex-end !important;
  padding: 0 !important;
  background: rgba(6, 14, 8, .62) !important;
  backdrop-filter: none !important;
}
.df-tree-backdrop .df-tree-sheet {
  background: #F5F8F3 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  border: none !important;
  box-shadow: 0 -12px 40px rgba(6, 14, 8, .45) !important;
  border-radius: 24px 24px 0 0 !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
}
/* Campos del editor: fondo blanco solido, como Android */
.df-tree-sheet input,
.df-tree-sheet select,
.df-tree-sheet textarea {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 61, 32, .28) !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  color: #16301a !important;
}
.df-tree-sheet .input-group > span,
.df-tree-sheet label { color: #46564a !important; font-size: 13.5px; }


/* ===== v38: fondo visible + inventario con scroll propio (clon Android) ===== */
#app { position: relative; z-index: 1; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
nav.tabbar { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 40; }

/* Las tarjetas dejan ver el bosque detras (como Android) */
.section-card, .rounded-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.1);
}

/* El filtro de fondo repintaba cada tarjeta en iPhone durante el scroll de un
   inventario largo. La transparencia se conserva, sin el coste de composición. */
@media (max-width: 720px) {
  .section-card, .rounded-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Inventario: la tabla scrollea DENTRO de su tarjeta, el resto de la pantalla no se mueve */
.df-pim-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 8px;
  min-height: 200px;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.df-pim-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
}
.df-pim thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  box-shadow: 0 1px 0 rgba(26,61,32,.25);
}


/* ================================================================
   v41: CAPTURADOR DE ARBOLES — clon exacto del TreeEditorSheet
   ================================================================ */
.df-tree-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.df-tree-head { display: flex; flex-direction: column; gap: 2px; }
.df-tree-title { margin: 0; font-size: 21px; font-weight: 800; color: #1A3D20; }
.df-tree-sub { margin: 0; font-size: 13px; color: #6a736a; }

/* Campos: etiqueta arriba, input blanco solido */
.df-field { display: flex; flex-direction: column; gap: 5px; }
.df-field-lbl { font-size: 13px; color: #46564a; font-weight: 600; }
.df-input {
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1.5px solid rgba(26, 61, 32, 0.28);
  border-radius: 12px;
  padding: 13px 12px;
  font: inherit;
  font-size: 16px;
  color: #16301a;
  -webkit-appearance: none;
  appearance: none;
}
.df-input:focus { outline: none; border-color: #1A3D20; box-shadow: 0 0 0 3px rgba(26,61,32,.12); }
textarea.df-input { resize: vertical; min-height: 76px; }
.df-select-arrow {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3D20' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.df-x-btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1.5px solid rgba(26,61,32,.28); border-radius: 12px;
  background: #fff; color: #46564a; font-size: 15px;
}

/* Tarjetas numericas grandes (NumericFieldCard) */
.df-num-row { display: flex; gap: 12px; }
.df-numcard {
  flex: 1;
  background: #E4EEE0;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 13px 12px;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  min-height: 78px;
  justify-content: center;
}
.df-numcard.lleno { border-color: rgba(26,61,32,.35); background: #DCEBD6; }
.df-numcard:active { background: #CFE3C8; }
.df-numcard .lbl { font-size: 13px; color: #46564a; }
.df-numcard .val { font-size: 27px; font-weight: 800; color: #1A3D20; line-height: 1.1; }
.df-numcard .val.vacio { color: #9aa89c; font-size: 24px; font-weight: 700; }

/* Tarjeta GPS y foto */
.df-gpscard { background: #E4EEE0; border-radius: 16px; padding: 13px; display: flex; flex-direction: column; gap: 7px; }
.df-gpscard > strong { font-size: 15px; color: #1A3D20; }
.df-gps-cap { margin: 0; font-size: 14px; font-weight: 700; color: #1A3D20; }
.df-gps-sub { margin: 0; font-size: 13.5px; color: #46564a; }
.df-gps-vivo { margin: 0; font-size: 13.5px; color: #2e7d43; }
.df-gps-acc { margin: 0; font-size: 14px; font-weight: 700; }
.df-gps-btns { display: flex; gap: 8px; margin-top: 2px; }
.df-out-btn {
  flex: 1; min-height: 46px;
  border: 1.5px solid rgba(26,61,32,.35); border-radius: 22px;
  background: transparent; color: #1A3D20;
  font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.df-out-btn:active { background: rgba(26,61,32,.08); }
.df-foto-ok { margin: 0; font-size: 13.5px; color: #27AE60; font-weight: 600; }
.df-foto-pend { margin: 0; font-size: 13.5px; color: #C17F24; font-weight: 600; }
.df-foto-prev { width: 100%; height: 180px; object-fit: cover; border-radius: 16px; }

.df-warns { display: flex; flex-direction: column; gap: 3px; }
.df-warn { margin: 0; font-size: 13px; color: #C17F24; font-weight: 600; }
.df-del-btn {
  width: 100%; min-height: 48px;
  border: 1.5px solid #E5564E; border-radius: 24px;
  background: transparent; color: #E5564E;
  font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.df-tree-actions { display: flex; gap: 10px; }
.df-tree-actions .df-btn { flex: 1; min-height: 54px; border-radius: 27px; font-size: 15.5px; font-weight: 700; }
.df-close-txt {
  align-self: center; background: none; border: none;
  color: #46564a; font-size: 14.5px; font-weight: 600;
  padding: 8px 20px; text-decoration: underline;
}

/* ===== Teclado numerico (NumberPadDialog: teclas de 56dp) ===== */
.df-pad-backdrop {
  z-index: 70 !important;
  align-items: center !important;
  padding: 20px !important;
  background: rgba(6, 14, 8, .68) !important;
}
.df-pad-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 18px 16px 16px;
  width: 100%;
  max-width: 360px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 50px rgba(6,14,8,.5);
}
.df-pad-title { margin: 0; font-size: 17px; font-weight: 700; color: #1A3D20; }
.df-pad-display {
  margin: 0; text-align: center;
  font-size: 34px; font-weight: 800; color: #1A3D20;
  background: #F0F5EE; border-radius: 14px; padding: 12px;
  font-variant-numeric: tabular-nums;
}
.df-pad-display.fuera { color: #C0392B; background: #FDEDEC; }
.df-pad-warn { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: #C0392B; font-weight: 600; }
.df-pad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.df-pad-key {
  height: 58px;
  border: none; border-radius: 14px;
  background: #1A3D20; color: #fff;
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.df-pad-key:active { background: #2E7D43; transform: scale(0.96); }
.df-pad-key.del { background: #46564a; font-size: 20px; }
.df-pad-clear {
  height: 50px; width: 100%;
  border: 1.5px solid rgba(26,61,32,.35); border-radius: 14px;
  background: #fff; color: #1A3D20;
  font-size: 15px; font-weight: 600;
}
.df-pad-actions { display: flex; gap: 8px; }
.df-pad-actions .df-btn { flex: 1; min-height: 48px; border-radius: 24px; font-weight: 700; }


/* ===== v42: el teclado no debe mover ni tocar la ficha de atras ===== */
body.pad-abierto .df-tree-sheet {
  pointer-events: none;      /* los toques NO atraviesan al sheet */
  overflow: hidden !important;
  touch-action: none;
}
body.pad-abierto .df-tree-backdrop { pointer-events: none; }
.df-pad-backdrop { pointer-events: auto !important; }
.df-pad-card, .df-pad-card * { pointer-events: auto; }
/* Las teclas no seleccionan texto ni hacen zoom al doble toque */
.df-pad-key, .df-pad-clear, .df-numcard {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.df-pad-display { user-select: none; min-height: 34px; }
.df-pad-warn { min-height: 0; }


/* ===== v43: Calculadora SIB — tarjeta de premuestreo (clon del ElevatedCard Android) ===== */
.df-sib-card {
  width: 100%;
  background: rgba(26, 61, 32, 0.9);
  border: none;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(6, 14, 8, 0.25);
}
.df-sib-card svg { color: #9FE1CB; flex: 0 0 auto; }
.df-sib-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.df-sib-t { color: #fff; font-weight: 700; font-size: 17px; }
.df-sib-d { color: #B8D8C2; font-size: 12.5px; line-height: 1.32; }
.df-sib-arrow { color: #9FE1CB; font-size: 26px; flex: 0 0 auto; }
.df-sib-tabla {
  background: var(--card-strong);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.df-sib-pre {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #212121;
  overflow-x: auto;
  white-space: pre;
}


/* ===== v44: dialogo "Capturar coordenada UTM" (clon exacto del Android) ===== */
.pre-gps-box {
  background: #EFE6D5;
  border-radius: 14px;
  padding: 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.pre-gps-box.ok { background: #E3F1E3; }
.pre-gps-lbl {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .6px;
  color: #C17F24; text-transform: uppercase;
}
.pre-gps-box.ok .pre-gps-lbl { color: #27AE60; }
.pre-gps-val {
  margin: 2px 0; font-size: 40px; font-weight: 800; color: #C17F24;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pre-gps-hint { margin: 0; font-size: 13.5px; color: #5c5445; line-height: 1.35; }
.pre-gps-box.ok .pre-gps-hint { color: #2c5030; }
.pre-gps-utm {
  margin: 4px 0 0; font-size: 16px; font-weight: 600; color: #1A3D20;
  font-variant-numeric: tabular-nums;
}
.pre-gps-ll { margin: 0; font-size: 13.5px; color: #8a938a; font-variant-numeric: tabular-nums; }


/* ===== Visor de camara: herramientas con paridad Android ===== */
.df-cam-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: none; z-index: 101;
}
.df-cam-grid.on { display: block; }

/* Barra inferior: Galeria - Notas - Flash - [Obturador] - Cuadricula */
.df-cam-bar {
  position: absolute; left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 103;
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 10px; gap: 4px;
}
.df-cam-bar .df-cam-shutter {
  position: static; transform: none; flex: 0 0 auto;
  width: 74px; height: 74px;
}
.df-cam-bar .tool {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: #fff;
  font-size: 11px; padding: 6px 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.df-cam-bar .tool svg { width: 24px; height: 24px; }
.df-cam-bar .tool.on { color: #F4C24B; }
.df-cam-bar .tool.on svg { color: #F4C24B; }

/* Selector de mapa base (arriba de la barra) */
.df-cam-basebar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(112px + env(safe-area-inset-bottom));
  z-index: 103;
  display: flex; gap: 3px; padding: 6px 8px;
  background: rgba(0,0,0,0.6); border-radius: 40px;
}
.df-cam-basebar button {
  border: none; color: #fff; font-size: 11px;
  padding: 8px 16px; border-radius: 22px;
  background: rgba(0,0,0,0.33);
}
.df-cam-basebar button.sel { background: #27AE60; }

/* Zoom vertical (abajo-derecha) */
.df-cam-zoom {
  position: absolute; right: 16px; top: 40%;
  z-index: 103;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(16,36,15,0.8); border-radius: 42px;
  width: 52px; padding: 8px 0;
}
.df-cam-zoom button {
  background: none; border: none; color: #fff;
  font-size: 26px; line-height: 1; width: 100%; padding: 4px 0;
}
.df-cam-zoom span {
  color: #fff; font-size: 14px; font-weight: 600; padding: 4px 0;
}

/* Tipo de registro (abajo-izquierda; las opciones se abren HACIA ARRIBA para no tapar el rail ni el selector de mapa base) */
.df-cam-tipo {
  position: absolute; left: 14px;
  bottom: calc(200px + env(safe-area-inset-bottom));
  z-index: 104;
  display: flex; flex-direction: column-reverse; align-items: flex-start;
}
.df-cam-tipo .hdr {
  background: rgba(16,36,15,0.78); border: 1px solid rgba(101,224,155,0.5);
  color: #65E09B; font-size: 12px; font-weight: 700;
  padding: 8px 16px; border-radius: 22px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.df-cam-tipo .opts { display: none; flex-direction: column-reverse; gap: 6px; margin-bottom: 8px; }
.df-cam-tipo.open .opts { display: flex; }
.df-cam-tipo .pill {
  border: none; color: #fff; font-size: 12px;
  padding: 11px 22px; border-radius: 26px;
  background: rgba(16,36,15,0.85); width: 150px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.df-cam-tipo .pill.sel { background: #27AE60; }


/* ===== Brujula y mini-mapa del visor (arriba-derecha) ===== */
.df-cam-compass {
  position: absolute; right: 14px;
  top: calc(6px + env(safe-area-inset-top));
  z-index: 103; pointer-events: none;
  display: flex; justify-content: center;
}
.df-cam-compass svg { display: block; }
.df-cam-minimap {
  position: absolute; right: 14px;
  top: calc(124px + env(safe-area-inset-top));
  width: 88px; height: 88px;
  z-index: 102;
  border-radius: 14px; border: 2px solid #65E09B;
  background: #10240F;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}


/* ===== Boton ampliar sobre el preview ===== */
.df-cam-preview { position: relative; }
.df-cam-expand {
  position: absolute; right: 10px; bottom: 10px;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 20px;
  display: grid; place-items: center; z-index: 2;
}

/* ===== Visor de foto a pantalla completa (zoom/pellizco) ===== */
.df-foto-full {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.94);
  display: grid; place-items: center;
  overflow: hidden; touch-action: none;
}
.df-foto-full img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  will-change: transform; touch-action: none;
  user-select: none; -webkit-user-drag: none;
}
.df-foto-full-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 22px; z-index: 2;
}
.df-foto-full-hint {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85); font-size: 13px; text-align: center;
  background: rgba(0,0,0,0.45); padding: 8px 16px; border-radius: 20px;
  pointer-events: none;
}


/* ===== Galeria de fotos (paridad PhotoGalleryActivity) ===== */
.df-galeria {
  position: fixed; inset: 0; z-index: 190;
  background: #F5F5F0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.df-galeria-top {
  display: flex; align-items: center; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) 18px 14px;
  background: #fff; border-bottom: 1px solid #e3e3dc;
}
.df-galeria-top h3 { margin: 0; flex: 1; color: #1A3D20; font-size: 19px; }
.df-galeria-back {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: #ecece6; color: #1A3D20; font-size: 20px;
}
.df-galeria-count {
  background: #1A3D20; color: #fff; font-size: 13px; font-weight: 700;
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px;
  display: grid; place-items: center;
}
.df-galeria-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; align-content: start;
}
.df-galeria-item {
  border: none; padding: 0; background: #ddd;
  aspect-ratio: 1; overflow: hidden; border-radius: 6px;
}
.df-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-galeria-vacia {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #8a9a8d; gap: 12px;
}
.df-galeria-vacia p { margin: 0; }

/* Vista grande con zoom */
.df-galeria-full {
  position: fixed; inset: 0; z-index: 195;
  background: rgba(0,0,0,0.95);
  display: grid; place-items: center;
  overflow: hidden; touch-action: none;
}
.df-galeria-full img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center; will-change: transform;
  touch-action: none; user-select: none; -webkit-user-drag: none;
}
.df-galeria-full-bar {
  position: absolute; left: 0; right: 0;
  bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}
.df-galeria-del {
  border: none; background: #C62828; color: #fff;
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 24px;
  display: flex; align-items: center; gap: 6px;
}
.df-galeria-fname { flex: 1; color: rgba(255,255,255,0.85); font-size: 12px; font-family: ui-monospace, monospace; }
.df-galeria-full-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 22px;
}


/* ===== Gestor de archivos a pantalla completa (paridad FileManagerActivity) ===== */
.df-archivos {
  position: fixed; inset: 0; z-index: 190;
  background: #F5F5F0;
  display: flex; flex-direction: column; overflow: hidden;
}
.df-archivos-top {
  display: flex; align-items: center; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) 18px 14px;
  background: #fff; border-bottom: 1px solid #e3e3dc;
}
.df-archivos-top h3 { margin: 0; color: #1A3D20; font-size: 19px; }
.df-archivos-sub { font-size: 12px; color: #7a857d; }
.df-archivos-back {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: #ecece6; color: #1A3D20; font-size: 20px; flex: 0 0 auto;
}
.df-archivos-list {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.df-archivos-item {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.df-archivos-item.sel { background: #D6EFE0; }
.df-archivos-head { display: flex; align-items: center; gap: 12px; }
.df-archivos-check {
  width: 44px; min-height: 44px; padding: 0; border: none; border-radius: 10px;
  background: #E8F0E8; color: #1A3D20; font-size: 22px; flex: 0 0 auto;
}
.df-archivos-legacy {
  margin: 10px 14px 0; padding: 10px 12px; border-radius: 10px;
  background: #FFF3CD; color: #6d5310; font-size: 12px; line-height: 1.35;
}
.df-archivos-legacy button {
  display: block; margin-top: 8px; border: none; border-radius: 8px;
  padding: 8px 10px; background: #6d5310; color: #fff; font-weight: 700;
}
.df-archivos-pendientes {
  margin: 10px 14px 0; padding: 12px; border-radius: 10px;
  background: #fff; border: 1px solid #e2d6ae; color: #4e431d;
  display: flex; flex-direction: column; gap: 8px; font-size: 12px;
}
.df-archivos-pendientes > span { color: #746a48; }
.df-archivos-pendiente {
  display: flex; align-items: center; gap: 8px; padding-top: 8px;
  border-top: 1px solid #eee5c8;
}
.df-archivos-pendiente span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.df-archivos-pendiente button {
  border: none; border-radius: 8px; padding: 8px 10px; background: #1A3D20;
  color: #fff; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.df-archivos-btnrow { display: flex; gap: 6px; }
.df-archivos-btnrow button {
  flex: 1 1 0; min-width: 0; border: none;
  background: #E8F0E8; color: #1A3D20;
  font-size: 11.5px; font-weight: 600;
  padding: 9px 4px; border-radius: 9px;
}
.df-archivos-selvarios {
  margin: 10px 14px 0; align-self: flex-start;
  border: none; background: #E8F0E8; color: #1A3D20;
  font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px;
}
.df-archivos-selbar {
  display: flex; align-items: center; gap: 8px;
  background: #1A3D20; padding: 10px 16px; margin-top: 10px;
}
.df-archivos-selbar .lbl { flex: 1; color: #9FE1CB; font-size: 14px; }
.df-archivos-selbar button {
  border: none; background: #9FE1CB; color: #1A3D20;
  font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 9px;
}
.df-archivos-badge {
  flex: 0 0 auto; min-width: 46px; text-align: center;
  background: #1A3D20; color: #fff; font-size: 11px; font-weight: 700;
  padding: 6px 8px; border-radius: 8px;
}
.df-archivos-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.df-archivos-info strong {
  font-size: 13.5px; color: #1A3D20; word-break: break-all; line-height: 1.2;
}
.df-archivos-info span { font-size: 11.5px; color: #7a857d; }
.df-archivos-act {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none;
  display: grid; place-items: center;
}
.df-archivos-act.share { background: #E8F0E8; color: #1A3D20; }
.df-archivos-act.del { background: #FBE9E7; color: #C62828; }
.df-archivos-vacia {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #8a9a8d; gap: 8px; text-align: center; padding: 0 30px;
}
.df-archivos-vacia p { margin: 0; font-weight: 600; }
.df-archivos-vacia span { font-size: 13px; }


/* ===== Campo selector de CRS (paridad CrsPickerField) ===== */
.df-crs-field {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #cfd8cf; border-radius: 12px;
  padding: 10px 14px; text-align: left;
}
.df-crs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.df-crs-lbl { font-size: 11px; color: var(--primary); font-weight: 600; }
.df-crs-code { font-size: 16px; font-weight: 700; color: #1A3D20; }
.df-crs-name { font-size: 11px; color: #7a857d; }
.df-crs-arrow { color: #7a857d; font-size: 16px; }
.crs-row.sel { background: #E8F0E8; border-radius: 10px; }


/* ===== v70: REVERTIDO el bloque "sensacion nativa" de v64 (user-select:none +
   touch-callout en contenedores/tarjetas y overscroll-behavior en html,body).
   El usuario ubico que el arrastre de las fichas fallo EXACTAMENTE desde ese cambio:
   en algunos Chrome/WebView de Android, user-select:none sobre los contenedores
   bloquea el touch-drag (el gesto no inicia el scroll). Se conserva SOLO lo que no
   puede afectar el scroll: */
* { -webkit-tap-highlight-color: transparent; }


/* v69: badge de version (3 toques abren el diagnostico) */
.df-ver { font-size: 11px; font-weight: 700; opacity: .5; letter-spacing: .4px; vertical-align: super; margin-left: 3px; padding: 4px 6px; }


/* ===== v71: teclado DAP/ALT mas fluido (entrada suave, cierre suave, tecla con respuesta) ===== */
#df-pad-host .df-pad-backdrop { animation: dfPadFade .13s ease-out; }
#df-pad-host .df-pad-card { animation: dfPadIn .17s cubic-bezier(.22,.9,.3,1.1); will-change: transform, opacity; }
#df-pad-host.df-pad-saliendo .df-pad-backdrop { animation: dfPadFade .12s ease-in reverse both; }
#df-pad-host.df-pad-saliendo .df-pad-card { animation: dfPadOut .12s ease-in both; }
@keyframes dfPadFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dfPadIn { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dfPadOut { from { transform: none; opacity: 1; } to { transform: translateY(8px) scale(.985); opacity: 0; } }
.df-pad-key { transition: transform .07s ease, filter .07s ease; }
.df-pad-key:active { transform: scale(.94); filter: brightness(1.18); }
.df-pad-clear:active, .df-pad-actions .df-btn:active { transform: scale(.97); }
.df-pad-display { transition: color .12s ease, background-color .12s ease; }
.df-numcard { transition: background-color .14s ease, border-color .14s ease, transform .1s ease; }
.df-numcard:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  #df-pad-host .df-pad-card, #df-pad-host .df-pad-backdrop,
  #df-pad-host.df-pad-saliendo .df-pad-card, #df-pad-host.df-pad-saliendo .df-pad-backdrop { animation: none; }
  .df-pad-key, .df-numcard { transition: none; }
}


/* ===== v75: botones con respuesta inmediata (sin el retardo de ~300 ms del navegador) ===== */
/* touch-action:manipulation desactiva la espera por doble-toque: el click sale al instante.
   Se aplica SOLO a controles (no a contenedores) para no tocar el scroll de las fichas. */
button, a, [data-action], .tabbar button, .df-btn, .df-icon-btn, .df-numcard,
input[type="button"], input[type="submit"], label.switch, .chip, .crs-row, .fm-list-row {
  touch-action: manipulation;
}
/* Respuesta visual al apoyar el dedo (no espera al click) */
button, [data-action], .df-btn, .df-icon-btn, .chip, .crs-row, .fm-list-row {
  transition: transform .06s ease, filter .06s ease, background-color .06s ease;
}
button:active, [data-action]:active, .df-btn:active, .df-icon-btn:active,
.chip:active, .crs-row:active, .fm-list-row:active,
button.df-pressed, [data-action].df-pressed, .df-btn.df-pressed, .df-icon-btn.df-pressed,
.chip.df-pressed, .crs-row.df-pressed, .fm-list-row.df-pressed {
  transform: scale(.97);
  filter: brightness(1.08);
}
/* La barra inferior de modulos: hundido leve, sin escalar el icono */
.tabbar button:active, .tabbar button.df-pressed {
  transform: scale(.94);
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  button, [data-action], .df-btn, .df-icon-btn, .chip, .crs-row, .fm-list-row { transition: none; }
  button:active, [data-action]:active, .df-btn:active, .df-icon-btn:active,
  button.df-pressed, [data-action].df-pressed, .df-btn.df-pressed, .tabbar button:active,
  .tabbar button.df-pressed { transform: none; }
}

/* ===== v90: cubicacion por trozas ===== */
.df-log-total {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
  background: #edf4ea;
  color: #18381f;
}
.df-log-total small, .df-log-card small { color: #59675a; line-height: 1.35; }
.df-log-card { display: flex; flex-direction: column; gap: 5px; }
.df-log-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.df-log-head > div:first-child {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.df-log-head > div:first-child span { color: var(--on-surface-variant); font-size: 12px; }
.df-log-actions { display: flex; gap: 3px; }
.df-log-actions button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  place-items: center;
}
.df-log-actions button:last-child { color: var(--error); }