/* ───────────────────────────────────────────────────────────────────────
   Finca+ · Tema cálido agro (Linear-style)
   Traducción fiel del handoff Claude Design (finca/system.jsx + data.jsx).
   Verde finca · café tierra · pergamino. Sobreescribe Bootstrap 5.3.
   ─────────────────────────────────────────────────────────────────────── */
:root {
  /* BRAND · verde finca */
  --f-brand:#2D4A2B; --f-brand-deep:#1F3320; --f-brand-dark:#0F1F11;
  --f-brand-soft:#DCE9D5; --f-brand-faint:#F0F5EB;
  /* ACCENT · café tierra */
  --f-accent:#6B3410; --f-accent-deep:#4A2208;
  --f-accent-soft:#F1DCC2; --f-accent-faint:#FAF1E4;
  /* NEUTRALS · warm/stone */
  --f-ink:#1C1A14; --f-ink2:#3F3A2C; --f-ink3:#6F6852; --f-ink4:#A09780;
  --f-hairline:#E5DCC8; --f-hairline2:#F1ECDB;
  --f-surface:#FFFEF9; --f-bg:#FAF6EC; --f-bg2:#F1ECDB;
  /* SEMANTIC */
  --f-success:#3B7A3F; --f-success-soft:#D9EAD3;
  --f-warning:#B6731B; --f-warning-soft:#FBE9C7;
  --f-danger:#A63232;  --f-danger-soft:#F6DAD4;
  --f-info:#3D6A8A;    --f-info-soft:#DCE9F0;

  /* Bootstrap overrides */
  --bs-primary:#2D4A2B;
  --bs-body-bg:#FAF6EC;
  --bs-body-color:#1C1A14;
  --bs-border-color:#E5DCC8;
  --bs-font-sans-serif:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --bs-link-color:#2D4A2B;
  --bs-link-hover-color:#1F3320;
}

html, body { height:100%; }
body {
  font-family: var(--bs-font-sans-serif);
  background: var(--f-bg);
  color: var(--f-ink);
  -webkit-font-smoothing: antialiased;
}
.font-mono, .mono { font-family:'JetBrains Mono', ui-monospace, monospace; }

/* ───────────────────────── SHELL ───────────────────────── */
.f-shell { display:grid; grid-template-columns:236px 1fr; min-height:100vh;
  background:var(--f-surface); overflow:hidden; }
.f-main { display:flex; flex-direction:column; min-width:0;
  border-left:1px solid var(--f-hairline); }
.f-content { flex:1; overflow:auto; background:var(--f-bg); padding:24px 28px; }

/* ───────────────────────── SIDEBAR ───────────────────────── */
.f-aside { background:var(--f-surface); display:flex; flex-direction:column;
  height:100vh; overflow:hidden; position:sticky; top:0; }

.f-brand { padding:14px 14px 12px; display:flex; align-items:center; gap:10px; }
.f-mark { width:30px; height:30px; border-radius:8px; background:var(--f-brand);
  position:relative; display:grid; place-items:center; flex-shrink:0; color:#fff; }
.f-mark svg { width:18px; height:18px; }
.f-mark .plus { position:absolute; bottom:-3px; right:-3px; width:13px; height:13px;
  background:var(--f-accent); border-radius:50%; color:#fff; font-size:9px; font-weight:800;
  display:grid; place-items:center; line-height:1; border:2px solid #fff; }
.f-brand-name { font-size:14px; font-weight:800; letter-spacing:-0.015em; line-height:1.1; }
.f-brand-name .plus { color:var(--f-brand); }
.f-brand-sub { font-size:10px; color:var(--f-ink3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }

.f-search { margin:4px 12px 12px; background:var(--f-bg);
  border:1px solid var(--f-hairline); border-radius:8px; height:32px; padding:0 10px;
  display:flex; align-items:center; gap:8px; }
.f-search span.ph { flex:1; font-size:12px; color:var(--f-ink4); }
.f-search-input { flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:12px; color:var(--f-ink); padding:0; }
.f-search-input::placeholder { color:var(--f-ink4); }
.f-search:focus-within { border-color:var(--f-brand); box-shadow:0 0 0 .12rem rgba(45,74,43,.12); }

.f-nav { flex:1; overflow:auto; padding:0 8px 8px; }
.f-navgroup { margin-top:14px; }
.f-navgroup-label { font-size:10px; color:var(--f-ink3); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; padding:0 8px 6px; }

.f-navitem { display:flex; align-items:center; gap:8px; padding:6px 8px; margin:1px 0;
  border-radius:6px; background:transparent; color:var(--f-ink2);
  font-size:13px; font-weight:500; cursor:pointer; position:relative;
  text-decoration:none; }
.f-navitem:hover { background:var(--f-bg); color:var(--f-ink); }
.f-navitem .ic { color:var(--f-ink3); display:inline-grid; place-items:center; }
.f-navitem.active { background:var(--f-brand-faint); color:var(--f-brand-deep); font-weight:600; }
.f-navitem.active .ic { color:var(--f-brand); }
.f-navitem.active::before { content:''; position:absolute; left:-8px; top:6px; bottom:6px;
  width:2px; background:var(--f-brand); border-radius:1px; }
.f-navitem .label { flex:1; }
.f-navbadge { color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px;
  background:var(--f-accent); }
.f-navbadge.hoy { background:var(--f-success); }

.f-user { padding:10px; border-top:1px solid var(--f-hairline); }
.f-user-row { display:flex; align-items:center; gap:10px; padding:8px;
  border-radius:8px; cursor:pointer; text-decoration:none; }
.f-user-row:hover { background:var(--f-bg); }
.f-avatar { width:30px; height:30px; border-radius:8px; background:var(--f-brand);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; flex-shrink:0; }
.f-user-name { font-size:12px; font-weight:600; line-height:1.2; color:var(--f-ink); }
.f-user-sub { font-size:10px; color:var(--f-ink3); line-height:1.2; }

/* ───────────────────────── TOPBAR ───────────────────────── */
.f-topbar { height:54px; padding:0 20px; display:flex; align-items:center;
  justify-content:space-between; background:var(--f-surface);
  border-bottom:1px solid var(--f-hairline); flex-shrink:0; gap:12px; }
.f-topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.f-topbar-right { display:flex; gap:8px; align-items:center; }

.f-finca-switch { background:var(--f-brand-faint); border:1px solid var(--f-brand-soft);
  height:34px; padding:0 10px 0 8px; border-radius:8px; display:inline-flex;
  align-items:center; gap:8px; cursor:pointer; font-family:inherit; }
.f-finca-switch select { border:none; background:transparent; font-weight:700;
  color:var(--f-brand-deep); font-size:12px; outline:none; cursor:pointer;
  font-family:inherit; padding:0; }
.f-finca-badge { width:22px; height:22px; border-radius:5px; background:var(--f-brand);
  color:#fff; display:grid; place-items:center; font-size:10px; font-weight:800; flex-shrink:0; }

.f-divider { width:1px; height:22px; background:var(--f-hairline); }
.f-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; min-width:0; }
.f-breadcrumb .crumb { color:var(--f-ink3); font-weight:500; white-space:nowrap; }
.f-breadcrumb .crumb.last { color:var(--f-ink); font-weight:600; }
.f-breadcrumb .sep { color:var(--f-ink4); }

.f-icon-btn { width:30px; height:30px; background:transparent; border:none;
  border-radius:6px; display:inline-grid; place-items:center; cursor:pointer; color:var(--f-ink2); }
.f-icon-btn:hover { background:var(--f-bg); }

.f-kbd { display:inline-flex; align-items:center; justify-content:center; min-width:18px;
  height:18px; padding:0 5px; background:var(--f-bg2); color:var(--f-ink3);
  border:1px solid var(--f-hairline); border-radius:4px;
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600; }

/* ───────────────────────── PAGE HEAD ───────────────────────── */
.f-pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.f-kicker { font-size:11px; color:var(--f-ink3); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; }
.f-title { font-size:24px; font-weight:800; letter-spacing:-0.022em; margin:0; color:var(--f-ink); }
.f-count { font-size:13px; color:var(--f-ink3); font-family:'JetBrains Mono',monospace; font-weight:600; }

.f-section-label { font-size:10px; color:var(--f-ink3); letter-spacing:0.12em;
  text-transform:uppercase; font-weight:700; margin-bottom:10px; }

/* ───────────────────────── KPI ───────────────────────── */
.f-kpi { background:var(--f-surface); border:1px solid var(--f-hairline);
  border-radius:10px; padding:14px; position:relative; overflow:hidden; }
.f-kpi-label { font-size:11px; color:var(--f-ink3); font-weight:600; }
.f-kpi-icon { width:22px; height:22px; border-radius:6px; background:var(--f-brand-faint);
  display:grid; place-items:center; color:var(--f-brand); }
.f-kpi-val { font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-top:4px;
  font-family:'JetBrains Mono',monospace; color:var(--f-ink); }
.f-kpi-val.accent { color:var(--f-accent); }
.f-kpi-delta { font-size:11px; font-weight:600; margin-top:2px; color:var(--f-success);
  display:flex; align-items:center; gap:4px; }
.f-kpi-delta.warn { color:var(--f-warning); }
.f-kpi-delta.neutral { color:var(--f-ink3); }
.f-kpi-hint { font-size:10px; color:var(--f-ink4); margin-top:6px; }

/* ───────────────────────── CARDS ───────────────────────── */
.card-finca, .f-card { background:var(--f-surface); border:1px solid var(--f-hairline);
  border-radius:12px; }
.f-card-pad { padding:16px; }

/* ───────────────────────── TABLA ───────────────────────── */
.f-table { width:100%; border-collapse:collapse; }
.f-table thead th, .f-thead { padding:10px 14px; background:var(--f-bg); font-size:10px;
  color:var(--f-ink3); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  border-bottom:1px solid var(--f-hairline); text-align:left; }
.f-table tbody td { padding:12px 14px; border-bottom:1px solid var(--f-hairline2);
  font-size:13px; color:var(--f-ink); vertical-align:middle; }
.f-table tbody tr:hover { background:var(--f-bg); }

/* ───────────────────────── PILLS / STATUS ───────────────────────── */
.f-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px; letter-spacing:0.01em; }
.f-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.f-pill.abierto   { background:var(--f-accent-soft);  color:var(--f-accent); }
.f-pill.enCurso   { background:var(--f-info-soft);    color:var(--f-info); }
.f-pill.liquidado,
.f-pill.pagado    { background:var(--f-success-soft); color:var(--f-success); }
.f-pill.pendiente { background:var(--f-warning-soft); color:var(--f-warning); }
.f-pill.anulado   { background:var(--f-danger-soft);  color:var(--f-danger); }
.f-pill.borrador  { background:var(--f-hairline2);    color:var(--f-ink3); }

/* ───────────────────────── BOTONES ───────────────────────── */
.btn-finca { background:var(--f-brand); color:#fff; border:1px solid var(--f-brand);
  font-weight:600; border-radius:7px; display:inline-flex; align-items:center; gap:6px; }
.btn-finca:hover { background:var(--f-brand-deep); color:#fff; }
.btn-finca-accent { background:var(--f-accent); color:#fff; border:1px solid var(--f-accent);
  font-weight:600; border-radius:7px; display:inline-flex; align-items:center; gap:6px; }
.btn-finca-accent:hover { background:var(--f-accent-deep); color:#fff; }
.btn-finca-ghost { background:var(--f-surface); color:var(--f-ink); border:1px solid var(--f-hairline);
  font-weight:600; border-radius:7px; display:inline-flex; align-items:center; gap:6px; }
.btn-finca-ghost:hover { background:var(--f-bg); color:var(--f-ink); }

.f-chip { background:var(--f-bg); border:1px solid var(--f-hairline); color:var(--f-ink2);
  height:28px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:500;
  display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-family:inherit; }
.f-chip.active { background:var(--f-brand-faint); border-color:var(--f-brand-soft); color:var(--f-brand-deep); }

/* período segmented (topbar) */
.f-seg { background:var(--f-bg); border:1px solid var(--f-hairline); height:30px;
  padding:0 4px; border-radius:8px; display:inline-flex; align-items:center; gap:2px; }
.f-seg button { background:transparent; color:var(--f-ink3); border:none; height:24px;
  padding:0 10px; border-radius:6px; font-size:11px; font-weight:600; font-family:inherit; cursor:pointer; }
.f-seg button.active { background:var(--f-surface); color:var(--f-ink);
  border:1px solid var(--f-hairline); box-shadow:0 1px 2px rgba(0,0,0,.04); }

/* avatar circular con iniciales */
.f-avatar-circle { border-radius:50%; background:var(--f-brand); color:#fff;
  display:grid; place-items:center; font-weight:700; flex-shrink:0; }

/* barra mini (productividad) */
.f-bar-track { height:6px; background:var(--f-hairline2); border-radius:3px; overflow:hidden; }
.f-bar-fill { height:100%; background:var(--f-brand); border-radius:3px; }

/* marca tipográfica / hero */
.finca-mark { font-weight:800; letter-spacing:-0.01em; color:var(--f-ink); }
.finca-mark .plus { color:var(--f-brand); }
.finca-hero { background:linear-gradient(135deg, var(--f-brand) 0%, var(--f-brand-deep) 100%); color:#fff; }

a { color:var(--f-brand); }
a:hover { color:var(--f-brand-deep); }

/* inputs y form-select dentro del tema */
.form-select, .form-control { border-color:var(--f-hairline); }
.form-select:focus, .form-control:focus {
  border-color:var(--f-brand); box-shadow:0 0 0 .15rem rgba(45,74,43,.12); }

/* ═══════════════════════════════════════════════════════════════════════
   Responsive — sidebar como DRAWER en móvil (antes solo se ocultaba)
   ═══════════════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* Hamburguesa: oculta en escritorio, visible en móvil. */
.f-burger { display:none; width:36px; height:36px; border:none; background:transparent;
  border-radius:8px; color:var(--f-ink); align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; }
.f-burger:hover { background:var(--f-bg); }

/* Backdrop del drawer (solo móvil). */
.f-aside-backdrop { display:none; position:fixed; inset:0; background:rgba(28,26,20,.45);
  z-index:1030; }

@media (max-width: 860px) {
  /* El shell pasa a una sola columna; el contenido ocupa todo el ancho. */
  .f-shell { grid-template-columns:1fr; }

  /* El sidebar se vuelve un drawer fijo fuera de pantalla a la izquierda. */
  .f-aside {
    position:fixed; top:0; left:0; bottom:0; width:264px; max-width:84vw;
    z-index:1040; transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 30px rgba(28,26,20,.18); display:flex;
  }
  /* Abierto: se desliza a la vista + aparece el backdrop. */
  .f-shell.nav-abierto .f-aside { transform:translateX(0); }
  .f-shell.nav-abierto .f-aside-backdrop { display:block; }

  .f-burger { display:flex; }

  /* Topbar y contenido más compactos en móvil. */
  .f-topbar { padding:0 12px; gap:8px; }
  .f-content { padding:16px 14px; }
  /* El finca-switch y breadcrumb no deben empujar fuera el topbar. */
  .f-breadcrumb { overflow:hidden; }
  .f-finca-switch select { max-width:38vw; }
}

/* Pantallas muy chicas: aún más compacto. */
@media (max-width: 420px) {
  .f-content { padding:12px 10px; }
  .f-title { font-size:20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive — TABLAS: scroll horizontal en móvil en vez de desbordar
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Toda card que contenga una tabla permite scroll-x suave (touch). */
  .card-finca:has(> table),
  .card-finca:has(> .table),
  .card-finca:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Wrapper explícito de Bootstrap, por si se usa. */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* PageHead apila título y acciones en columna. */
  .f-pagehead { flex-direction: column; align-items: flex-start; gap: 8px; }
  .f-pagehead .f-count { font-size: 12px; }

  /* topActions (date pickers, botones) envuelven sin romper. */
  .f-topbar-right { gap: 4px; }
}

/* Fallback para navegadores sin :has() — el contenido no se recorta. */
@supports not (selector(:has(*))) {
  @media (max-width: 860px) {
    .card-finca { overflow-x: auto; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive — correcciones de auditoría (topbar, inputs iOS, KPIs, touch)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* El topbar deja de tener altura fija: los topActions (date pickers + botones)
     ya no se recortan ni desbordan; envuelven en varias líneas si hace falta. */
  .f-topbar { height: auto; min-height: 54px; flex-wrap: wrap;
    padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
  .f-topbar-right { flex-wrap: wrap; }
  .f-topbar-right input[type=date],
  .f-topbar-right input[type=month] { max-width: 140px; }

  /* KPI cards en fila (historico, gastos): que envuelvan en vez de comprimirse. */
  .f-content .d-flex.gap-3 > .card-finca,
  .f-content .d-flex.gap-4 > .card-finca { flex: 1 1 140px; }
  .f-content .d-flex.gap-3, .f-content .d-flex.gap-4 { flex-wrap: wrap; }
}

/* iOS hace zoom al enfocar inputs <16px. Forzamos 16px en campos editables en
   móvil (las labels chicas no causan zoom, se dejan igual). */
@media (max-width: 575.98px) {
  .form-control, .form-select,
  .form-control-sm, .form-select-sm { font-size: 16px; }

  /* Touch targets cómodos en acciones de fila y botones de footer de modal. */
  .f-table .btn-sm, table .btn-sm,
  .modal-footer .btn-sm { min-height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Finca+ · Micro-interacciones (Linear-style, cálido agro)
   Capa de efectos SUTILES — solo transform/opacity/shadow/bg/color/border.
   No redefine reglas existentes; no altera el layout. Respeta
   prefers-reduced-motion. Sombras con tinte tierra (rgba de --f-ink).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --f-ease: cubic-bezier(.4, 0, .2, 1);
  --f-dur:  150ms;
  --f-shadow-lift: 0 4px 14px -4px rgba(28,26,20,.14), 0 2px 6px -2px rgba(28,26,20,.08);
}

/* 1 · Hover lift en tarjetas (translateY, no mueve layout) */
.f-kpi, .card-finca, .f-card, .m-card {
  transition: transform var(--f-dur) var(--f-ease),
              box-shadow var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease);
}
.f-kpi:hover, .card-finca:hover, .f-card:hover, .m-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--f-shadow-lift);
  border-color: var(--f-brand-soft);
}

/* 2 · Press state — feedback táctil */
.btn-finca, .btn-finca-accent, .btn-finca-ghost,
.f-chip, .f-icon-btn, .f-seg button, .m-big-btn, .m-numpad button {
  transition: transform 120ms var(--f-ease),
              background-color var(--f-dur) var(--f-ease),
              color var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease),
              box-shadow var(--f-dur) var(--f-ease);
}
.btn-finca:active, .btn-finca-accent:active, .btn-finca-ghost:active,
.f-chip:active, .f-icon-btn:active, .f-seg button:active { transform: scale(.97); }
.m-big-btn:active, .m-numpad button:active { transform: translateY(1px) scale(.98); }

/* 3 · Nav items — fondo/color suaves; barra activa que entra */
.f-navitem { transition: background-color var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease); }
.f-navitem .ic { transition: color var(--f-dur) var(--f-ease); }
.f-navitem.active::before { animation: f-bar-grow 200ms var(--f-ease); transform-origin: center; }
@keyframes f-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.f-user-row, .f-finca-switch, .f-breadcrumb .crumb {
  transition: background-color var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease); }

/* 4 · Filas de tabla — fundido de fondo */
.f-table tbody tr { transition: background-color var(--f-dur) var(--f-ease); }

/* 5 · Focus suave en inputs */
.form-control, .form-select {
  transition: border-color var(--f-dur) var(--f-ease), box-shadow 180ms var(--f-ease); }

/* 6 · Pills / badges interactivos — leve scale al hover del contenedor */
.f-pill, .f-navbadge { transition: transform var(--f-dur) var(--f-ease); }
a:hover > .f-pill, button:hover > .f-pill, .f-navitem:hover .f-navbadge { transform: scale(1.05); }

/* 7 · Ripple en botones (JS inyecta los spans; ver finca-fx.js) */
/* Auditoría: el botón debe ser contexto de posicionamiento DESDE el inicio
   (no esperar al JS) para que .f-ripple-clip ancle bien el primer ripple. */
.btn-finca, .btn-finca-accent, .btn-finca-ghost, .m-big-btn {
  position: relative; overflow: hidden; isolation: isolate; }
.f-ripple-clip { position:absolute; inset:0; overflow:hidden; border-radius:inherit;
  pointer-events:none; z-index:0; }
.f-ripple { position:absolute; border-radius:50%; background:currentColor; opacity:.30;
  transform:scale(0); pointer-events:none; animation: f-ripple-anim 600ms ease-out forwards; }
@keyframes f-ripple-anim { to { transform:scale(2.4); opacity:0; } }

/* 8 · Entrada escalonada (JS añade .f-anim-in + --i; ver finca-fx.js) */
.f-anim-in { animation: f-anim-in-kf .45s var(--f-ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes f-anim-in-kf { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* 9 · Modales Bootstrap — entrada con scale + fade suave (no rompe Bootstrap) */
.modal.fade .modal-dialog { transform: translateY(8px) scale(.985);
  transition: transform 200ms var(--f-ease), opacity 200ms var(--f-ease); }
.modal.show .modal-dialog { transform: none; }

/* ── Accesibilidad: desactivar movimiento si se solicita ── */
@media (prefers-reduced-motion: reduce) {
  .f-kpi, .card-finca, .f-card, .m-card,
  .btn-finca, .btn-finca-accent, .btn-finca-ghost,
  .f-chip, .f-icon-btn, .f-seg button, .f-seg button:active, .m-big-btn, .m-numpad button,
  .f-navitem, .f-navitem .ic, .f-table tbody tr, .form-control, .form-select,
  .f-user-row, .f-finca-switch, .f-breadcrumb .crumb,
  .f-pill, .f-navbadge, .modal.fade .modal-dialog {
    transition: none !important; animation: none !important; }
  .f-kpi:hover, .card-finca:hover, .f-card:hover, .m-card:hover,
  .btn-finca:active, .btn-finca-accent:active, .btn-finca-ghost:active,
  .f-chip:active, .f-icon-btn:active, .f-seg button:active,
  .m-big-btn:active, .m-numpad button:active,
  a:hover > .f-pill, button:hover > .f-pill, .f-navitem:hover .f-navbadge { transform: none !important; }
  .f-ripple, .f-anim-in { animation: none !important; }
  .f-anim-in { opacity: 1 !important; }
  .f-navitem.active::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   quickCreate · toast de confirmación (creación inline de entidades)
   ═══════════════════════════════════════════════════════════════════════ */
.qc-toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-16px);
  background: var(--f-brand); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: .86rem; font-weight: 600; box-shadow: 0 8px 24px -6px rgba(28,26,20,.32);
  z-index: 1090; opacity: 0; transition: opacity .25s var(--f-ease, ease), transform .25s var(--f-ease, ease);
  max-width: 90vw; pointer-events: none;
}
.qc-toast.err { background: var(--f-danger); }
.qc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .qc-toast { transition: opacity .15s ease; transform: translateX(-50%); }
  .qc-toast.show { transform: translateX(-50%); }
}
/* El botón "+ Nuevo" junto al select no debe romper el layout en línea. */
.qc-trigger { white-space: nowrap; }

/* Spinner de "preparando…" en descargas de export (finca-fx Feature 6). */
.f-spin { animation: f-spin-kf .6s linear infinite; }
@keyframes f-spin-kf { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .f-spin { animation: none; }
}

/* ───────────────────────── CROQUIS de lotes ─────────────────────────
   Lienzo esquemático interactivo (interact.js). Bloques = <div> reales con
   el tema Finca+; el zoom es transform:scale del .croquis-canvas. */
.croquis-wrap { display:flex; flex-direction:column; gap:12px; }

.croquis-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; background:var(--f-surface);
  border:1px solid var(--f-hairline); border-radius:12px;
}
.croquis-tb-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.croquis-toggle {
  display:inline-flex; align-items:center; gap:6px; font-size:.8rem;
  color:var(--f-ink2); cursor:pointer; user-select:none; white-space:nowrap;
}
.croquis-zoom { display:inline-flex; align-items:center; gap:4px; }
.croquis-zoom-val { min-width:42px; text-align:center; font-size:.8rem; color:var(--f-ink2); }
.croquis-guardar { position:relative; }
.croquis-badge-cambios { color:var(--f-warning); font-size:1.2rem; line-height:0; margin-left:2px; }

.croquis-leyenda {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.78rem; color:var(--f-ink3);
}
.croquis-leyenda .f-pill { display:inline-flex; align-items:center; gap:4px; }
.croquis-hint { margin-left:auto; font-size:.72rem; color:var(--f-ink4); }

/* Viewport: ventana con scroll; el plano va dentro y se escala. */
.croquis-viewport {
  position:relative; overflow:auto; background:var(--f-bg);
  border:1px solid var(--f-hairline); border-radius:12px;
  height:min(70vh, 640px); touch-action:none;
}
.croquis-canvas {
  position:relative; transform-origin:0 0;
  width:1600px; height:1000px;
  /* Grilla de fondo sutil para guiar la disposición. */
  background-image:
    repeating-linear-gradient(0deg, var(--f-hairline2) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--f-hairline2) 0 1px, transparent 1px 40px);
}

/* Bloque de lote */
.croquis-lote {
  position:absolute; display:flex; overflow:hidden;
  background:var(--f-surface); border:1px solid var(--f-hairline);
  border-radius:10px; box-shadow:0 1px 3px rgba(28,26,20,.08);
  touch-action:none; transition:box-shadow .15s ease;
}
.croquis-lote.is-edit { cursor:grab; }
.croquis-lote.is-edit:active { cursor:grabbing; }
.croquis-lote.seleccionado { box-shadow:0 6px 18px rgba(28,26,20,.18); border-color:var(--f-brand); }
.croquis-lote.inactivo { opacity:.55; background-image:repeating-linear-gradient(45deg, transparent 0 6px, rgba(160,151,128,.12) 6px 12px); }

.croquis-lote-barra { width:8px; flex:0 0 8px; }
.croquis-lote-barra.success { background:var(--f-success); }
.croquis-lote-barra.info    { background:var(--f-info); }
.croquis-lote-barra.accent  { background:var(--f-accent); }
.croquis-lote-barra.warning { background:var(--f-warning); }
.croquis-lote-barra.ink2    { background:var(--f-ink2); }

.croquis-lote-cuerpo { flex:1; min-width:0; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.croquis-lote-cab { display:flex; align-items:center; gap:6px; }
.croquis-codigo { background:var(--f-brand); color:#fff; font-size:.62rem; }
.croquis-lote-nombre { font-weight:700; font-size:.86rem; color:var(--f-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.croquis-lote-meta { font-size:.72rem; color:var(--f-ink3); display:flex; flex-wrap:wrap; gap:4px; }

/* Handle de redimensionado (solo visible en modo edición). */
.croquis-resize {
  position:absolute; right:2px; bottom:2px; width:14px; height:14px;
  border-right:2px solid var(--f-ink4); border-bottom:2px solid var(--f-ink4);
  border-bottom-right-radius:6px; opacity:0; cursor:nwse-resize; touch-action:none;
}
.croquis-wrap.editando .croquis-resize { opacity:.6; }
.croquis-wrap.editando .croquis-lote { cursor:grab; }

/* En móvil el toggle "Editar" se muestra; en escritorio se oculta (siempre editable). */
.croquis-solo-movil { display:none; }
@media (max-width: 820px) {
  .croquis-solo-movil { display:inline-flex; }
  .croquis-hint { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .croquis-lote { transition:none; }
}

/* ── Croquis: capas de color, leyenda interactiva, filtro y detalle ── */
.croquis-select-capa{ border:none;background:transparent;font:inherit;font-size:.8rem;color:var(--f-ink2);cursor:pointer;padding:0 2px; }
.croquis-ley-pill{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--f-hairline);
  background:var(--f-surface);border-radius:999px;padding:3px 10px;font-size:.76rem;
  color:var(--f-ink2);cursor:pointer;transition:background .12s ease,border-color .12s ease;
}
.croquis-ley-pill:hover{ border-color:var(--f-ink4); }
.croquis-ley-pill.activo{ border-color:var(--f-brand);background:var(--f-brand-faint);color:var(--f-brand);font-weight:700; }
.croquis-ley-dot{ width:11px;height:11px;border-radius:50%;flex:0 0 11px; }

/* Resaltado/atenuado por filtro (leyenda interactiva). */
.croquis-lote.atenuado{ opacity:.28;filter:grayscale(.5); }
.croquis-lote.resaltado{ box-shadow:0 0 0 2px var(--f-brand), 0 6px 18px rgba(28,26,20,.18); }

/* Micro-interacción: entrada y selección. */
.croquis-lote{ transition:box-shadow .15s ease, opacity .2s ease, filter .2s ease, border-color .15s ease; }

/* Panel de detalle (drawer lateral derecho). */
.croquis-detalle{ position:fixed;inset:0;z-index:1045;background:rgba(28,26,20,.35);display:flex;justify-content:flex-end; }
.croquis-detalle-card{ width:min(360px,90vw);height:100%;background:var(--f-surface);box-shadow:-6px 0 24px rgba(28,26,20,.2);padding:18px;overflow:auto; }
.croquis-detalle-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.croquis-detalle-grid > div{ background:var(--f-bg);border:1px solid var(--f-hairline2);border-radius:10px;padding:8px 10px; }
.croquis-detalle-grid span{ display:block;font-size:.68rem;color:var(--f-ink3);text-transform:uppercase;letter-spacing:.03em; }
.croquis-detalle-grid strong{ font-size:.92rem;color:var(--f-ink); }
@media (prefers-reduced-motion: reduce){ .croquis-lote{ transition:none; } }
[x-cloak] { display:none !important; }