/* ==========================================================================
   Conservación · Mutaciones de Terreno — sistema de diseño
   Capas: 1) tokens  2) base  3) shell (sidebar/topbar)  4) componentes
          5) formulario de trámite  6) vistas (mapa, ficha, campo)  7) responsive/print
   Convenciones (ver CLAUDE.md → "Sistema de diseño"):
   - Colores solo por token semántico (--primary, --fg-muted, --border…), nunca hex en vistas.
   - Botones: .btn (primario) · .btn.secondary · .btn.ghost · .btn.danger · .btn.small · .btn.icon · .btn.loading
   - Identificadores catastrales en --font-mono (.npn, .mono).
   - Movimiento 150–300 ms, solo transform/opacity; @media (prefers-reduced-motion) lo apaga.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca Alcaldía de Santiago de Cali */
  --brand-cyan: #1da5d7;
  --brand-navy: #023773;
  --brand-navy-deep: #022c5c;
  --brand-navy-light: #0b457f;
  --brand-yellow: #f9b631;

  /* Semánticos (estilo shadcn) */
  --bg: #f3f7fb;
  --surface: #ffffff;
  --surface-2: #eaf2fa;
  --surface-3: #dfe9f4;
  --fg: #12233a;
  --fg-muted: #5b6b80;
  --fg-subtle: #8393a8;
  --border: #d3deeb;
  --border-strong: #b7c7da;
  --primary: var(--brand-navy);
  --primary-hover: var(--brand-navy-light);
  --primary-fg: #ffffff;
  --accent: #0b6e9c;          /* cian legible sobre blanco (texto, enlaces) */
  --accent-bright: var(--brand-cyan);
  --accent-soft: #e3f3fb;
  --success: #1f7a4d;
  --success-soft: #e3f5ea;
  --warning: #9a5a0a;
  --warning-soft: #fff2d9;
  --destructive: #b91c1c;
  --destructive-soft: #fdecec;
  --tramite: #3730a3;         /* morado del vínculo con trámite (capa del mapa y chips M-55) */
  --tramite-soft: #ebe9fb;
  --ring: rgba(29, 165, 215, 0.45);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-1: 0 1px 2px rgba(18, 35, 58, 0.06), 0 1px 1px rgba(18, 35, 58, 0.04);
  --shadow-2: 0 4px 14px rgba(18, 35, 58, 0.08), 0 1px 3px rgba(18, 35, 58, 0.06);
  --shadow-3: 0 18px 44px rgba(2, 44, 92, 0.18), 0 4px 12px rgba(2, 44, 92, 0.08);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  --dur-1: 150ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Alias heredados (las vistas antiguas los usan) */
  --color-primary: var(--brand-cyan);
  --color-primary2: var(--surface-2);
  --color-secondary: var(--brand-navy);
  --color-secondary-dark: var(--brand-navy-deep);
  --color-tertiary: var(--accent-soft);
  --color-alc-yellow: var(--brand-yellow);
  --color-white: #fff;
  --color-text: var(--fg);
  --color-text-light: var(--fg-muted);
  --color-gray-light: #f1f4f8;
  --color-gray-medium: var(--fg-subtle);
  --color-title: var(--fg);
  --color-enlaces: var(--accent);
  --color-fondo-blue-dark: var(--brand-navy-light);
  --color-Marine-dark: #2952a3;
  --color-Shiraz-dark: #86041a;
  --color-theme-green-dark: var(--success);
  --color-theme-orange-dark: var(--warning);
  --color-theme-red-dark: var(--destructive);
  --color-primary-1: rgba(29, 165, 215, 0.1);
  --color-primary-2: rgba(29, 165, 215, 0.2);
  --color-primary-3: rgba(29, 165, 215, 0.3);
  --color-primary-5: rgba(29, 165, 215, 0.5);
  --color-secondary-3: rgba(2, 55, 115, 0.3);
  --color-secondary-5: rgba(2, 55, 115, 0.5);
  --boton-fondo-default: var(--primary);
  --boton-fondo-hover: var(--primary-hover);
  --boton-texto-default: var(--primary-fg);
  --boton-texto-hover: var(--primary-fg);
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);
  --transition-ease: all var(--dur-2) var(--ease-out);
  --ink: var(--fg);
  --ink-soft: var(--fg-muted);
  --paper: var(--bg);
  --paper-2: var(--surface-2);
  --panel: var(--surface);
  --line: var(--border);
  --accent-2: var(--brand-yellow);
  --warn: var(--warning);
  --danger: var(--destructive);
  --ok: var(--success);
  --shadow: var(--shadow-2);
  --radius: var(--radius-lg);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* M-71: el atributo hidden debe ganar a cualquier display de clase (sin esto, .cp-secs { display: grid }
   mostraba el "Complemento industria" en unidades residenciales). */
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* Cuadrícula catastral de fondo: 32 px, casi imperceptible */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(2, 55, 115, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 55, 115, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.hidden { display: none !important; }
.meta { font-size: 0.8rem; color: var(--fg-muted); }
.subtitle { color: var(--fg-muted); }
.hint { font-size: 0.78rem; color: var(--fg-subtle); }
h1, h2, h3, h4 { color: var(--fg); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: rgba(29, 165, 215, 0.25); }
button { touch-action: manipulation; }

/* ---------- 3. Shell ---------- */
.app { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 272px 1fr; }
.app > .main, #view-root, #view-root > .view-body, .panel, .section, .section-body, .collection { min-width: 0; }

.sidebar {
  background: linear-gradient(180deg, var(--brand-navy-light) 0%, var(--brand-navy) 48%, var(--brand-navy-deep) 100%);
  color: #fff;
  padding: 1.35rem 0.9rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden; /* M-71 (7): el menú desplaza por su cuenta y el pie queda siempre visible abajo */
}
.brand { padding: 0.25rem 0.55rem 0.7rem; position: relative; flex: 0 0 auto; }
.brand::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-yellow);
}
.brand-logo { display: block; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 0.8rem; border-radius: var(--radius-sm); }
.brand-logo--sidebar { max-height: 76px; }
.brand-logo--login { max-height: 96px; max-width: 240px; }
.brand-kicker { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.3rem; }
.brand h1 { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; margin: 0; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.brand p { margin: 0.5rem 0 0.2rem; font-size: 0.82rem; opacity: 0.72; line-height: 1.35; }

.nav {
  display: flex; flex-direction: column; gap: 0.15rem;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent;
  margin-right: -0.4rem; padding-right: 0.4rem;
}
/* Shell marca .has-more cuando el menú tiene más ítems por debajo: desvanecido como señal de que sigue */
.nav.has-more { mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.nav button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  text-align: left;
  padding: 0.62rem 0.8rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 42px;
  position: relative;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.nav button svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.8; }
.nav button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; transform: translateX(2px); }
.nav button:hover svg { opacity: 1; }
.nav button.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-yellow);
}
.nav button.active svg { opacity: 1; }
.nav button:focus-visible { outline-color: rgba(249, 182, 49, 0.7); }
.nav .nav-group {
  margin-top: 0.9rem;
  padding: 0 0.8rem 0.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

.sidebar-foot {
  margin-top: auto;
  flex: 0 0 auto;
  padding: 0.8rem 0.85rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  line-height: 1.4;
}
.sidebar-foot .btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.sidebar-foot .btn.secondary:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.user-chip { font-size: 0.82rem; line-height: 1.35; display: flex; gap: 0.6rem; align-items: center; }
.user-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: grid; place-items: center;
  background: var(--brand-yellow); color: var(--brand-navy-deep);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
}
.user-chip strong { display: block; font-size: 0.88rem; }
.user-chip .meta { opacity: 0.72; font-size: 0.74rem; color: inherit; }

.main { padding: 0 1.75rem 3rem; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 -1.75rem 1.25rem;
  padding: 1.15rem 1.75rem 0.85rem;
  background: rgba(243, 247, 251, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.topbar .subtitle { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: 0.92rem; }
.topbar .toolbar { margin: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Entrada de vista: una sola coreografía */
#view-root.view-enter { animation: viewIn var(--dur-3) var(--ease-out); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 4. Componentes ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 1.15rem 1.25rem;
}
.panel + .panel { margin-top: 1rem; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 1.1rem; }
.stat {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  display: flex;
  gap: 0.9rem;
  align-items: center;
}
.stat .stat-icon {
  width: 42px; height: 42px; border-radius: var(--radius-md); flex: 0 0 42px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.stat .stat-icon svg { width: 20px; height: 20px; }
.stat .label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.stat .value { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; margin-top: 0.15rem; color: var(--primary); font-variant-numeric: tabular-nums; }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.toolbar input.grow { flex: 1 1 260px; min-width: 240px; }

/* Controles de formulario */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select, textarea {
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  min-height: 40px;
  line-height: 1.35;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover, textarea:hover { border-color: var(--accent); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--ring);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--fg-muted); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--fg-subtle); }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  cursor: pointer;
}
select[multiple] { background-image: none; padding-right: 0.75rem; }
input[type="date"] { font-variant-numeric: tabular-nums; }
input[type="number"] { font-variant-numeric: tabular-nums; }
textarea { min-height: 96px; resize: vertical; }
/* M-71 (26): las áreas de texto del formulario crecen con su contenido (FormularioView.bindAutoGrow) hasta un tope */
textarea.auto-grow { max-height: 480px; overflow-y: auto; }
.toolbar input, .toolbar select, .field input, .field select, .field textarea { width: 100%; }
.toolbar input, .toolbar select { width: auto; min-width: 180px; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--fg-muted);
}
.field .hint { margin-top: 0.3rem; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--destructive); }
.field .error { font-size: 0.78rem; color: var(--destructive); margin-top: 0.3rem; }

/* Botones */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.55rem 1rem;
  min-height: 40px;
  font: inherit;
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), border-color var(--dur-1);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn:hover { background: var(--primary-hover); color: var(--primary-fg); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); }
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.btn.secondary { background: var(--surface); color: var(--primary); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.btn.secondary:hover { background: var(--surface-2); color: var(--primary); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--accent); border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--accent-soft); color: var(--primary); box-shadow: none; }
/* M-80: variante para todo lo que entrega una hoja de cálculo. Verde de hoja de cálculo, en versión suave para
   que se reconozca al instante sin competir con el botón primario; al pasar por encima se llena de color, que es
   la única floritura que se permite. El anillo de foco también va en verde para que la señal sea coherente. */
.btn.excel { background: var(--success-soft); color: var(--success); border-color: #a9d8bd; box-shadow: var(--shadow-1); }
.btn.excel:hover { background: var(--success); color: #fff; border-color: var(--success); }
.btn.excel:hover svg { color: #fff; }
.btn.excel svg { color: var(--success); }
.btn.excel:focus-visible { outline-color: var(--success); }
.btn.icon.excel { background: transparent; border-color: transparent; box-shadow: none; }
.btn.icon.excel:hover { background: var(--success-soft); border-color: transparent; }
.btn.icon.excel:hover svg { color: var(--success); }

.btn.danger { background: var(--destructive); color: #fff; }
.btn.danger:hover { background: #991b1b; color: #fff; }
.btn.small { padding: 0.38rem 0.7rem; min-height: 32px; font-size: 0.84rem; border-radius: var(--radius-sm); }
.btn.small svg { width: 14px; height: 14px; flex-basis: 14px; }
.btn.lg { padding: 0.75rem 1.4rem; min-height: 48px; font-size: 1rem; }
.btn.icon { padding: 0; width: 36px; min-height: 36px; height: 36px; border-radius: var(--radius-sm); }
.btn.icon svg { width: 16px; height: 16px; }
.btn.icon.small { width: 32px; min-height: 32px; height: 32px; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); transform: none; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 700ms linear infinite;
}
.btn.secondary.loading::after, .btn.ghost.loading::after { border-color: rgba(2, 55, 115, 0.25); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }
label.btn { margin: 0; }
.btn-group { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.7rem 0.65rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  background: var(--surface);
  position: sticky;
  top: 0;
}
tbody tr { transition: background var(--dur-1) var(--ease-out); }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td .meta { margin-top: 0.15rem; }
.table-scroll { overflow-x: auto; max-width: 100%; border-radius: var(--radius-md); }
.table-scroll > table { min-width: 640px; }
td.row-actions { white-space: nowrap; text-align: right; }
td.row-actions .btn-group { justify-content: flex-end; flex-wrap: nowrap; }
/* M-71 (10) y (45): en el listado de trámites las acciones van en dos grupos (texto · iconos); en una línea si cabe y,
   si no, los cuatro iconos pasan juntos a la segunda línea (nunca tres arriba y uno abajo) */
.tr-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.3rem 0.4rem; }
.tr-acciones .btn-group { flex-wrap: nowrap; }
/* el grupo con texto sí puede partirse cuando la columna es estrecha (1280 px); los iconos siempre van juntos */
.tr-acciones > .btn-group:first-child { flex-wrap: wrap; justify-content: flex-end; }
/* en pantallas anchas sobra sitio: todo en una línea (la tabla ensancha la columna de acciones) */
@media (min-width: 1500px) { .tr-acciones { flex-wrap: nowrap; white-space: nowrap; } .tr-acciones > .btn-group:first-child { flex-wrap: nowrap; } }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* NPN segmentado (firma visual): dpto·mpio·zona·sector·comuna·barrio·mz·terreno·cond·edif·piso·unidad */
.npn {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  letter-spacing: 0.005em;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3em;
  color: var(--fg);
  white-space: nowrap;
  cursor: help;
}
.npn i { font-style: normal; }
.npn .seg-div { color: var(--accent); font-weight: 600; }
.npn .seg-terreno { font-weight: 600; }
.npn .seg-tail { color: var(--fg-subtle); }
.npn.lg { font-size: 1.15rem; gap: 0.36em; }
.npn.plain { cursor: default; }
table .npn { flex-wrap: nowrap; font-size: 0.74rem; gap: 0.22em; }
td.row-actions .btn-group { gap: 0.15rem; }
td.row-actions { padding-left: 0.4rem; padding-right: 0.4rem; }
.cp-predio .npn, .fd-npn-item .npn { font-size: 0.74rem; gap: 0.22em; flex-wrap: nowrap; }
a.btn { text-decoration: none; }
.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; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--primary);
  border: 1px solid transparent;
}
.badge.borrador, .badge.en_elaboracion, .badge.en_revision, .badge.finalizado { padding-left: 0.5rem; }
.badge.borrador::before, .badge.en_elaboracion::before, .badge.en_revision::before, .badge.finalizado::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85;
}
.badge.borrador { background: var(--surface-2); color: #2952a3; }
.badge.en_elaboracion { background: var(--accent-soft); color: var(--accent); }
.badge.en_revision { background: var(--warning-soft); color: var(--warning); }
.badge.finalizado { background: var(--success-soft); color: var(--success); }

/* Formulario en cuadrícula */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.85rem; }
.field.full { grid-column: span 12; }
.field.half { grid-column: span 6; }
.field.third { grid-column: span 4; }
.field.quarter { grid-column: span 3; }

/* Secciones (acordeón) */
.sections { display: flex; flex-direction: column; gap: 0.85rem; }
.section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.section.open { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-1);
}
.section-head:hover { background: var(--surface-2); }
.section-head h3 { margin: 0; font-size: 1.02rem; font-family: var(--font-display); font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 0.6rem; }
.section-head .sec-chev { width: 18px; height: 18px; color: var(--fg-subtle); transition: transform var(--dur-2) var(--ease-out); flex: 0 0 18px; }
.section.open .section-head .sec-chev { transform: rotate(180deg); color: var(--accent); }
.section-head .sec-right { display: flex; align-items: center; gap: 0.6rem; }
.section-body { padding: 1rem; display: none; border-top: 1px solid var(--border); }
.section.open .section-body { display: block; animation: rise var(--dur-2) var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Colecciones (filas repetibles) */
.collection {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  margin-top: 0.75rem;
  background: var(--bg);
}
.collection h4 { margin: 0 0 0.65rem; font-size: 0.95rem; }
.collection-head { display: grid; gap: 0.45rem; margin-bottom: 0.35rem; align-items: end; }
.collection-head span {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-muted); line-height: 1.2; padding: 0 0.15rem;
}
.collection-row { display: grid; grid-template-columns: repeat(6, 1fr) auto; gap: 0.45rem; margin-bottom: 0.45rem; align-items: center; }
/* M-71 (29): fila de relleno sin datos (se descarta al guardar) · (32) botón de quitar fila con icono */
[data-row].fila-vacia { opacity: 0.6; }
[data-row].fila-vacia:focus-within { opacity: 1; }
.btn.icon.small.fila-quitar { color: var(--fg-muted); }
.btn.icon.small.fila-quitar:hover { color: var(--destructive); background: var(--destructive-soft); }
/* M-71 (28): conteo calculado de 5.5 bajo los campos */
.hint.calc-55 { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.hint.calc-55 .btn.small { min-height: 26px; padding: 0.05rem 0.5rem; font-size: 0.74rem; }
/* M-71 (35): el chip del numeral del FORMATO 1 lleva la marca "F1" */
.sec-num-f1 { font-family: var(--font-body); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.06em; opacity: 0.7; margin-right: 0.35rem; }
/* M-71 (33): NPN segmentado del predio modificado en la cabecera del bloque · (31) versiones anteriores plegadas */
.npn-mini { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.78rem; }
.npn-mini .npn { font-size: 0.74rem; gap: 0.2em; flex-wrap: nowrap; }
.npn-mini:empty { display: none; }
.flujo-docs-ant { margin: 0.15rem 0 0.3rem 0; }
.flujo-docs-ant summary { cursor: pointer; font-size: 0.78rem; }
.flujo-docs-ant ul { margin: 0.2rem 0 0 0.8rem; padding: 0; }
.collection-row input, .collection-row select { width: 100%; }
.collection-subhead { margin: 0.75rem 0 0.25rem; font-size: 0.76rem; font-weight: 700; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }

.predio-afectado-block, .lindero-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-1);
}
.predio-afectado-block-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.predio-afectado-block-head strong { font-size: 0.9rem; }
.lindero-block-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.65rem; }
.lindero-block-head label { font-size: 0.78rem; font-weight: 700; color: var(--fg-muted); white-space: nowrap; }
.lindero-block-head input { width: 100%; }
.lindero-dirs { margin-bottom: 0.35rem; }

.split { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }
.list-select { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.list-select button {
  width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; padding: 0.8rem 0.9rem; cursor: pointer; font: inherit; color: inherit;
  transition: background var(--dur-1);
}
.list-select button:hover { background: var(--surface-2); }
.list-select button.active { background: var(--accent-soft); color: var(--primary); box-shadow: inset 3px 0 0 var(--accent-bright); }
.list-select .meta { display: block; font-size: 0.75rem; margin-top: 0.2rem; }

/* Toast */
.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  /* M-77: con 100vw se contaba también el ancho de la barra de desplazamiento, así que en las pantallas con
     scroll vertical (Inicio, sobre todo) el aviso sobresalía 17 px y la página entera se desplazaba en horizontal.
     El porcentaje de un elemento fijo se mide contra el área visible, ya sin la barra. */
  max-width: min(420px, calc(100% - 2.5rem));
  background: var(--surface);
  color: var(--fg);
  padding: 0.8rem 1rem 0.8rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-bright);
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  z-index: 60;
  font-size: 0.92rem;
  line-height: 1.4;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.toast svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 0.1rem; color: var(--accent); }
.toast.success { border-left-color: var(--success); } .toast.success svg { color: var(--success); }
.toast.error { border-left-color: var(--destructive); } .toast.error svg { color: var(--destructive); }
.toast.warning { border-left-color: var(--brand-yellow); } .toast.warning svg { color: var(--warning); }

/* Vacíos y carga */
.empty { padding: 2.25rem 1rem; text-align: center; color: var(--fg-muted); }
.empty svg { width: 36px; height: 36px; color: var(--fg-subtle); margin-bottom: 0.5rem; }
.empty strong { display: block; color: var(--fg); font-weight: 600; margin-bottom: 0.2rem; }
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s var(--ease-out) infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skeleton-block { display: flex; flex-direction: column; gap: 0.7rem; }
.skeleton-block .skeleton { height: 14px; }
.skeleton-block .skeleton.title { height: 22px; width: 38%; }
.skeleton-block .skeleton.w60 { width: 60%; }
.skeleton-block .skeleton.w80 { width: 80%; }
.skeleton-block .skeleton.tall { height: 120px; }

/* Modales */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 20, 45, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 40;
  padding: 1rem;
  animation: fadeIn var(--dur-2) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(920px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.35rem;
  box-shadow: var(--shadow-3);
  animation: modalIn var(--dur-2) var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal h3 { margin-top: 0; font-family: var(--font-display); font-weight: 600; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

.preview-backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(2, 20, 45, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: stretch; padding: 1rem; overflow: auto;
  animation: fadeIn var(--dur-2) var(--ease-out);
}
.preview-shell {
  width: min(980px, 100%); margin: 0 auto; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); display: flex; flex-direction: column;
  max-height: calc(100vh - 2rem); overflow: hidden;
  animation: modalIn var(--dur-2) var(--ease-out);
}
.preview-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0;
}
.preview-doc { padding: 1.4rem 1.6rem 2rem; overflow: auto; color: #111; background: #fff; }
.preview-doc .pv-header { display: flex; gap: 1rem; align-items: flex-start; border-bottom: 2px solid var(--primary); padding-bottom: 0.9rem; margin-bottom: 1.2rem; }
.preview-doc .pv-header img { height: 52px; width: auto; }
.preview-doc .pv-header h1 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 0.2rem; color: var(--primary); line-height: 1.2; }
.preview-doc .pv-kicker { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); margin: 0; }
.preview-doc .pv-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; margin: 0.85rem 0 1.2rem; font-size: 0.92rem; }
.preview-doc .pv-meta strong { color: var(--primary); }
.preview-doc .pv-section { margin: 1.15rem 0 0.4rem; break-inside: avoid; }
.preview-doc .pv-section h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.55rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); color: var(--primary); }
.preview-doc .pv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; }
.preview-doc .pv-field { break-inside: avoid; }
.preview-doc .pv-field.full { grid-column: 1 / -1; }
.preview-doc .pv-field .lbl { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-muted); margin-bottom: 0.12rem; }
.preview-doc .pv-field .val { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.35; }
.preview-doc .pv-field .val.empty { color: #999; font-style: italic; padding: 0; text-align: left; }
.preview-doc table.pv-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.4rem 0 0.8rem; }
.preview-doc table.pv-table th, .preview-doc table.pv-table td { border: 1px solid #d5dbe6; padding: 0.35rem 0.45rem; text-align: left; vertical-align: top; position: static; }
.preview-doc table.pv-table th { background: #eef3fa; color: var(--primary); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
.preview-doc .pv-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.preview-doc .pv-foto { border: 1px solid #d5dbe6; border-radius: 0.4rem; overflow: hidden; break-inside: avoid; }
.preview-doc .pv-foto img { display: block; width: 100%; height: 140px; object-fit: cover; background: #f3f5f8; }
.preview-doc .pv-foto .cap { padding: 0.4rem 0.5rem; font-size: 0.78rem; line-height: 1.3; }
.preview-doc .pv-foot { margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--fg-muted); }

/* Validador de áreas */
.validador {
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0.55rem; align-items: end;
  margin-top: 0.75rem; padding: 0.85rem; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #fff8e8, var(--surface));
  border: 1px solid rgba(249, 182, 49, 0.55);
}
.validador .result { font-weight: 700; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); white-space: nowrap; min-height: 40px; display: flex; align-items: center; }
.validador .result.ok { color: var(--success); border-color: #9bd8b3; background: var(--success-soft); }
.validador .result.no { color: var(--destructive); border-color: #f3b4b4; background: var(--destructive-soft); }
/* M-71 (27): la franja del validador ya no repite campos: lectura, resultado y acción en columna */
.validador#validador-areas { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; text-align: left; }
.validador#validador-areas .result { white-space: normal; font-weight: 500; line-height: 1.4; }
.validador#validador-areas .result strong { font-weight: 700; }
.validador-lectura { display: flex; flex-direction: column; gap: 0.15rem; }
.validador-acciones { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-height: 0; }
.validador-acciones:empty { display: none; }

/* Permisos */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.55rem; }
.perm-mod { margin: 1rem 0 0.45rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.perm-item {
  display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.65rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.perm-item:hover { border-color: var(--accent); background: var(--surface-2); }
.perm-item input { margin-top: 0.2rem; accent-color: var(--primary); }
.perm-item .pname { font-weight: 600; font-size: 0.88rem; }
.perm-item .pdesc { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.15rem; }
.perm-item.denied { opacity: 0.55; background: var(--color-gray-light); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  position: relative;
  z-index: 1;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(29, 165, 215, 0.14) 0%, transparent 60%),
    var(--bg);
}
.login-card {
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: modalIn var(--dur-3) var(--ease-out);
}
.login-brand {
  padding: 2.2rem 2rem 2rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(165deg, var(--brand-navy-light) 0%, var(--brand-navy) 55%, var(--brand-navy-deep) 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.login-brand::after {
  content: ""; position: absolute; left: 2rem; bottom: 1.6rem; width: 56px; height: 4px; border-radius: 2px; background: var(--brand-yellow);
}
.login-brand .brand-kicker { opacity: 0.75; }
.login-brand h1 { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; margin: 0; font-weight: 600; color: #fff; letter-spacing: -0.015em; }
.login-brand p { margin: 0.7rem 0 0; opacity: 0.78; font-size: 0.95rem; }
.login-form { padding: 2.2rem 2rem 2rem; display: flex; flex-direction: column; gap: 0.95rem; justify-content: center; }
.login-form .field label { color: var(--fg); }
.login-form .btn { min-height: 46px; margin-top: 0.3rem; }
.login-error {
  margin: 0; color: var(--destructive); background: var(--destructive-soft);
  border: 1px solid #f3b4b4; border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; font-size: 0.88rem;
}
.login-hint { font-size: 0.78rem; color: var(--fg-muted); line-height: 1.45; }
.login-hint code { font-size: 0.76rem; background: var(--surface-2); padding: 0.05rem 0.3rem; border-radius: 6px; }

/* ---------- 6. Vistas ---------- */
/* Mapa */
.map-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; min-height: calc(100vh - 140px); }
.map-side { align-self: start; }
.map-layers { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 1rem; }
.map-info { margin-top: 1rem; line-height: 1.4; }
.map-info .map-ok { color: var(--success); font-weight: 600; }
.map-info .map-warn { color: var(--warning); font-weight: 600; }
.map-list { margin-top: 0.65rem; max-height: min(42vh, 420px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.map-list-item {
  display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; padding: 0.7rem 0.75rem; cursor: pointer; font: inherit; color: inherit;
  transition: background var(--dur-1) var(--ease-out);
}
.map-list-item:last-child { border-bottom: 0; }
.map-list-item:hover { background: var(--surface-2); }
.map-list-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-bright); }
.map-list-item.no-geo { opacity: 0.72; }
.map-list-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.map-list-item .meta { font-size: 0.75rem; line-height: 1.3; }
.map-list-geo { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.map-list-geo.ok { color: var(--primary); }
.map-list-geo.bad { color: var(--warning); }
.map-detail { margin-top: 0.65rem; padding: 0.7rem 0.75rem; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--accent-bright); }
.map-detail .map-list-top { margin-bottom: 0.2rem; }
.map-detail .meta { font-size: 0.75rem; line-height: 1.3; }
.map-detail strong { font-size: inherit; font-weight: 700; }
.map-panel { padding: 0; overflow: hidden; }
#map-canvas { height: calc(100vh - 150px); min-height: 520px; width: 100%; border-radius: var(--radius-lg); }
.map-meta { font-size: 0.85rem; color: var(--fg-muted); margin-right: 0.5rem; }
.map-popup .meta { font-size: 0.8rem; margin: 0.2rem 0; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: var(--shadow-3); }

/* Fotos del trámite */
.collection-row.foto-row { grid-template-columns: 140px 1.4fr 1.2fr auto; align-items: center; }
.foto-upload-cell { display: flex; flex-direction: column; gap: 0.35rem; align-items: stretch; }
.foto-preview { width: 100%; height: 88px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.foto-preview--empty { display: grid; place-items: center; font-size: 0.72rem; color: var(--fg-muted); }
.foto-file-link {
  display: grid; place-items: center; height: 88px; border-radius: var(--radius-sm);
  border: 1px dashed var(--accent); color: var(--accent); text-decoration: none; font-size: 0.8rem; font-weight: 600; background: var(--accent-soft);
}
.foto-upload-btn { width: 100%; text-align: center; }

/* Ficha digital predial */
.fd-toolbar { margin-bottom: 0.85rem; }
.fd-section-tabs { display: flex; gap: 0.35rem; margin: 0 0 0.85rem; flex-wrap: wrap; padding: 0.25rem; background: var(--surface-2); border-radius: var(--radius-md); width: fit-content; max-width: 100%; }
.fd-section-tab {
  border: 1px solid transparent; background: transparent; color: var(--fg-muted);
  border-radius: var(--radius-sm); padding: 0.45rem 0.95rem; min-height: 36px; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
}
.fd-section-tab:hover { color: var(--primary); }
.fd-section-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); }
.fd-section-panel { min-width: 0; }
.fd-files-panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.fd-files-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.fd-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.65rem; padding: 0.75rem; max-height: min(70vh, 720px); overflow: auto; }
.fd-file-card {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem 0.85rem; background: var(--surface);
  display: flex; flex-direction: column; gap: 0.2rem; transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.fd-file-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.fd-file-card.active { border-color: var(--accent-bright); background: var(--accent-soft); }
.fd-file-card.is-missing { opacity: 0.72; }
.fd-file-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; }
.fd-file-card__head strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-file-badge {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 0.12rem 0.5rem; font-size: 0.7rem; font-weight: 700;
  background: var(--surface-2); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.fd-file-badge.ok { background: var(--success-soft); color: var(--success); }
.fd-file-badge.warn { background: var(--warning-soft); color: var(--warning); }
.fd-file-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; font-size: 0.8rem; color: var(--fg-muted); margin: 0.25rem 0 0.45rem; }
.fd-file-card__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.fd-npn-panel { margin-top: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.fd-npn-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.fd-npn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.35rem; max-height: 260px; overflow: auto; padding: 0.55rem; }
.fd-npn-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; background: var(--surface); cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.fd-npn-item:hover { border-color: var(--accent); background: var(--surface-2); }
.fd-npn-item.active { border-color: var(--accent-bright); background: var(--accent-soft); }
.fd-npn-item code { font-size: 0.82rem; }
.fd-tabs { display: flex; gap: 0.35rem; margin: 0.2rem 0 0.75rem; flex-wrap: wrap; }
.fd-tab {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); border-radius: 999px;
  padding: 0.4rem 0.95rem; min-height: 36px; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.fd-tab:hover { border-color: var(--accent); color: var(--primary); }
.fd-tab.active { background: var(--primary); color: #fff; border-color: transparent; }
.fd-body { min-height: 320px; }
.fd-body.view-enter { animation: viewIn var(--dur-2) var(--ease-out); }
.fd-version-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.7rem 1rem; margin: 0 0 0.85rem; }
.fd-version-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fd-croquis-prev { margin: 0.5rem 0 1rem; display: inline-flex; flex-direction: column; gap: 0.35rem; max-width: 420px; }
.fd-croquis-prev img { display: block; max-width: 100%; max-height: 300px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-1); }
.fd-version-bar select.small { min-height: 32px; padding: 0.25rem 1.9rem 0.25rem 0.6rem; font-size: 0.84rem; border-radius: var(--radius-sm); }
.fd-cara .fd-title { font-family: var(--font-display); margin: 0 0 0.25rem; font-size: 1.35rem; font-weight: 600; }
.fd-kicker { letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; }
.fd-sheet-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
.fd-npn-grid { display: grid; grid-template-columns: repeat(6, minmax(52px, 1fr)); gap: 0.3rem; }
.fd-npn-cell { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.25rem 0.3rem; text-align: center; background: var(--surface-2); }
.fd-npn-cell span { display: block; font-size: 0.62rem; color: var(--fg-muted); }
.fd-npn-cell strong { font-size: 0.85rem; letter-spacing: 0.02em; font-family: var(--font-mono); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fd-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.85rem; background: var(--surface); }
.fd-uc-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem; margin-top: 0.75rem; background: var(--surface); }
.fd-list { margin: 0; padding-left: 1.1rem; }
.fd-list li { margin: 0.25rem 0; }
.fd-calif-scroll, .fd-just-scroll { overflow-x: auto; margin: 0.5rem 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0.4rem; }
.fd-edit-calif { font-size: 0.75rem; }
.fd-edit-calif .fd-score-btn { min-width: 1.6rem; padding: 0.1rem 0.25rem; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); cursor: pointer; font-size: 0.7rem; transition: background var(--dur-1), color var(--dur-1); }
.fd-edit-calif .fd-score-btn:hover { background: var(--surface-2); }
.fd-edit-calif .fd-score-btn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.fd-just-edit { min-width: 1100px; border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.fd-just-edit th, .fd-just-edit td { border: 1px solid var(--border); padding: 2px; position: static; }
.fd-just-edit input { width: 100%; min-width: 3.2rem; font-size: 0.78rem; min-height: 30px; padding: 0.2rem 0.35rem; }
.fd-calif-scroll input, .fd-calif-scroll select { min-height: 30px; padding: 0.15rem 0.35rem; font-size: 0.78rem; }

/* Predios de campo */
.cp-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; }
.cp-side { position: sticky; top: 5.4rem; max-height: calc(100vh - 6.5rem); display: flex; flex-direction: column; }
.cp-list { overflow: auto; flex: 1; min-height: 200px; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; scrollbar-width: thin; }
.cp-predio {
  text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-md);
  padding: 0.5rem 0.65rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.12rem; color: inherit; font: inherit;
  transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
}
.cp-predio:hover { border-color: var(--accent); background: var(--surface-2); }
.cp-predio.active { border-color: var(--accent-bright); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-bright); }
.cp-npn { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.cp-npn-big { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.cp-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.cp-head-stats { display: flex; gap: 1.1rem; font-size: 0.85rem; color: var(--fg-muted); }
.cp-head-stats b { font-size: 1.1rem; color: var(--primary); margin-right: 0.2rem; font-family: var(--font-display); }
.cp-unidad { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.85rem 1rem; margin-bottom: 0.9rem; background: var(--surface); box-shadow: var(--shadow-1); }
.cp-unidad-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cp-unidad-head .meta { display: block; }
.cp-total { text-align: right; }
.cp-total b { font-size: 1.7rem; line-height: 1; font-family: var(--font-display); color: var(--primary); }
.cp-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.cp-secs-1 { margin-top: 0.6rem; grid-template-columns: 1fr; }
.cp-sec { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.7rem; background: var(--surface); }
.cp-sec-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; gap: 0.5rem; color: var(--fg); }
.cp-pts { font-weight: 700; color: var(--accent); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-item { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.4rem; font-size: 0.8rem; }
.cp-item-label { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.66rem; font-weight: 600; }
.cp-item select, .cp-item input { width: 100%; font-size: 0.82rem; min-width: 0; min-height: 34px; padding: 0.3rem 0.55rem; }
.cp-item select { padding-right: 1.9rem; }
.cp-secs-1 .cp-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.6rem; }
.cp-secs-1 .cp-sec-title { grid-column: 1 / -1; }
.cp-grid-2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 0.6rem 1rem; }
.cp-grid-2 > div { min-width: 0; overflow-x: auto; }
.cp-grid-2 table { table-layout: auto; width: 100%; }
.cp-grid-2 td { overflow-wrap: anywhere; }
.cp-grid-2 th { white-space: nowrap; }
.cp-kv td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.cp-kv th { white-space: normal; width: 38%; text-align: left; font-weight: 600; color: var(--fg-muted); font-size: 0.72rem; position: static; }
.cp-grid-2 td.cp-npn { font-size: 0.78rem; letter-spacing: 0; overflow-wrap: anywhere; }
.cp-main { min-width: 0; }
.cp-unidad-foot { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
/* M-71 (14)-(17): sección sin calificar, cambios sin guardar por unidad y barra de la pestaña */
.cp-sec--vacia { background: var(--surface-2); border-style: dashed; }
.cp-sec--vacia .cp-pts { color: var(--fg-muted); font-weight: 500; font-style: italic; }
.cp-unidad.dirty { border-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.cp-dirty { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--warning); background: var(--warning-soft); border-radius: 999px; padding: 0.1rem 0.55rem; }
.cp-dirty svg { width: 12px; height: 12px; }
.cp-dirty-texto { color: var(--warning); }
.cp-calif-barra { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.cp-warn { color: var(--warning); }
.cp-foto-group { margin-bottom: 1.2rem; }
.cp-foto-group h4 { margin: 0.2rem 0 0.5rem; display: flex; gap: 0.6rem; align-items: baseline; }
.cp-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; }
.cp-foto {
  margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column; box-shadow: var(--shadow-1); transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.cp-foto:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.cp-foto-img { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; cursor: zoom-in; }
.cp-foto-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-3) var(--ease-out); }
.cp-foto:hover .cp-foto-img img { transform: scale(1.03); }
.cp-foto-img img.cp-foto-missing { object-fit: contain; padding: 1rem; opacity: 0.5; }
.cp-foto--croquis .cp-foto-img img { object-fit: contain; background: #fff; }
.cp-visor { position: fixed; inset: 0; background: rgba(6, 16, 30, 0.9); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(4px); }
.cp-visor.open { display: flex; animation: fadeIn var(--dur-2) var(--ease-out); }
.cp-visor figure { margin: 0; max-width: min(1400px, 96vw); max-height: 94vh; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.cp-visor img { max-width: 96vw; max-height: 80vh; object-fit: contain; background: #000; border-radius: var(--radius-sm); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.cp-visor img.is-loading { opacity: 0.4; }
.cp-visor figcaption { color: #fff; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.95rem; }
.cp-visor figcaption b { font-size: 1.05rem; }
.cp-visor-pts { color: #8ed6f2; font-size: 0.85rem; }
.cp-visor figcaption small { color: rgba(255, 255, 255, 0.65); }
.cp-visor-close, .cp-visor-nav {
  position: absolute; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; border-radius: 50%;
  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background var(--dur-1);
}
.cp-visor-close:hover, .cp-visor-nav:hover { background: rgba(255, 255, 255, 0.28); }
.cp-visor-close { top: 1rem; right: 1rem; }
.cp-visor-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.cp-visor-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.cp-foto figcaption { padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; }
.cp-foto figcaption .meta { overflow-wrap: anywhere; word-break: break-word; }
.cp-foto-row { display: flex; gap: 0.3rem; }
.cp-foto-row select { flex: 1; font-size: 0.78rem; min-width: 0; min-height: 32px; padding: 0.2rem 1.7rem 0.2rem 0.45rem; }
.cp-foto figcaption input { font-size: 0.8rem; min-height: 32px; padding: 0.25rem 0.5rem; }
.cp-foto-pts { color: var(--accent); }
.cp-sugeridas { border-top: 1px dashed var(--border-strong); padding-top: 0.8rem; }

/* M-54: la ficha predial como pestaña del predio de campo */
.fd-tabs-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; margin: 0.2rem 0 0.75rem; }
.fd-tabs-row .fd-tabs { margin: 0; }
.fd-tabs-actions { display: flex; gap: 0.4rem; margin-left: auto; align-items: center; }
.fd-tab i[data-lucide], .fd-tab svg { width: 15px; height: 15px; margin-right: 0.35rem; vertical-align: -2px; }
.cp-tab-ficha { padding: 0; }
.cp-tab-ficha #fd-body { min-height: 320px; }
.cp-predio-top { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; width: 100%; min-width: 0; }
.cp-predio-top > .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-predio-top .badge { flex: none; font-size: 0.66rem; line-height: 1.2; padding: 0.05rem 0.4rem 0.05rem 0.5rem; }
.fd-modo-aviso { color: var(--fg-muted); }

/* M-55: vínculo predio de campo <-> trámite (un solo lenguaje de color) */
.chip-vinculo {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600;
  background: var(--surface-2); color: var(--fg-muted); border: 1px solid transparent; white-space: nowrap; vertical-align: middle; line-height: 1.4;
}
.chip-vinculo.small { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
.chip-vinculo svg { width: 12px; height: 12px; flex: none; }
.chip-vinculo.vinculado, .chip-vinculo.en_campo { background: var(--success-soft); color: var(--success); }
.chip-vinculo.sin_campo { background: var(--warning-soft); color: var(--warning); }
.chip-vinculo.sin_npn, .chip-vinculo.neutro { background: var(--surface-2); color: var(--fg-muted); }
/* M-71 (18): código de uso/anexo guardado con una lista distinta de la que corresponde al NPN */
select.otra-lista { border-color: var(--warning); box-shadow: inset 3px 0 0 var(--warning); }
.chip-vinculo.con_tramite { background: var(--tramite-soft); color: var(--tramite); }
.chip-vinculo .btn.small { min-height: 24px; padding: 0.05rem 0.5rem; font-size: 0.72rem; margin-left: 0.2rem; border-radius: 999px; }
.chip-vinculo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.db-alerta.db-alerta-link { cursor: pointer; font: inherit; font-size: 0.84rem; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.db-alerta.db-alerta-link:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.db-alerta.db-alerta-link:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.npn-vinculo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.3rem; }
.predio-afectado-block-head .chip-vinculo { margin-left: auto; }

/* M-50: avisos (contador en el menú y panel del tablero) */
.nav button { position: relative; }
.nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 0.4rem; border-radius: 999px; background: var(--brand-yellow); color: var(--brand-navy-deep);
  font-size: 0.72rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; flex: none;
}
.db-avisos .db-sec-head { margin-bottom: 0.4rem; }
.db-aviso-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.db-aviso { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.db-aviso > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--fg-muted); }
.db-aviso.devuelto { border-color: #f1d49a; background: var(--warning-soft); }
.db-aviso.devuelto > svg { color: var(--warning); }
.db-aviso.pendiente > svg { color: var(--accent); }
.db-aviso-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.db-aviso-body strong { font-size: 0.9rem; line-height: 1.3; }
.db-aviso-body .meta { overflow-wrap: anywhere; }
.db-aviso-acciones { display: flex; gap: 0.3rem; margin-top: 0.25rem; }

/* M-51: producción (tablas con barra dentro de la celda) */
/* M-77: minmax(0, 1fr) y min-width en los hijos. Con `1fr` a secas, un elemento de rejilla no baja de su
   ancho mínimo de contenido, y la tabla de producción por persona (976 px) estiraba la página 17 px. La tabla ya
   vive dentro de .table-scroll: lo que faltaba era dejar que su contenedor se encogiera. Misma causa que C-12. */
.db-prod-bloques { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.db-prod-bloques > * { min-width: 0; }
/* M-78: los tres bloques van a todo el ancho. La rejilla de dos columnas dejaba la tabla de etapas en media
   columna, con barra de desplazamiento propia y la otra mitad vacía, porque las otras dos tablas ya ocupaban las
   dos columnas y no quedaba nada que poner al lado. */
.db-prod-sel { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; color: var(--fg-muted); white-space: nowrap; }
.db-prod-sel select { min-height: 34px; padding: 0.2rem 1.8rem 0.2rem 0.55rem; width: auto; font-size: 0.86rem; }
.db-prod-tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.db-prod-tabla th, .db-prod-tabla td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.db-prod-tabla thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); white-space: nowrap; position: static; }
.db-prod-tabla tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 0.86rem; }
.db-prod-tabla tbody th .mono { font-size: 0.82rem; }
.db-prod-tabla tbody th .meta { display: block; font-weight: 400; }
.db-prod-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-prod-tabla tfoot th, .db-prod-tabla tfoot td { border-bottom: 0; border-top: 2px solid var(--border-strong); font-weight: 700; }
.db-prod-tabla tr.db-prod-actual th, .db-prod-tabla tr.db-prod-actual td { background: var(--accent-soft); }
/* M-71 (3): fila resumen de semanas sin actividad */
.db-prod-tabla tr.db-prod-vacias th, .db-prod-tabla tr.db-prod-vacias td { color: var(--fg-muted); font-weight: 400; background: var(--surface-2); font-style: italic; }
.db-prod-tabla tr.db-prod-vacias th .mono { font-style: normal; margin-left: 0.35rem; }
.db-prod-nota { margin: 0.5rem 0 0; }
.db-cell-bar { display: inline-block; width: 64px; height: 8px; margin-right: 0.45rem; background: var(--surface-2); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.db-cell-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 0; }

/* M-56: estado del sistema (administrador) */
.db-salud.con-problemas { border-color: #f1d49a; }
.db-salud-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.db-salud-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.84rem; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-variant-numeric: tabular-nums; }
.db-salud-chip svg { width: 15px; height: 15px; flex: none; }
.db-salud-chip.ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.db-salud-chip.mal { background: var(--warning-soft); color: var(--warning); border-color: #f1d49a; }
.db-salud-chip.nd { color: var(--fg-muted); }

/* M-57: borrador automático del trámite */
.form-borrador { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.form-borrador svg { width: 14px; height: 14px; }
.borrador-aviso { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; border-color: #f1d49a; background: var(--warning-soft); }
.borrador-aviso > svg { width: 22px; height: 22px; flex: none; color: var(--warning); }
.borrador-aviso > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.borrador-aviso .btn-group { flex: none; }

/* Numeración FORMATO 1 (M-36) y avance por sección (M-37) */
.sec-num {
  display: inline-flex; align-items: center; margin-right: 0.55rem; padding: 0.1rem 0.5rem; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sec-avance { font-size: 0.76rem; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sec-avance.completa { color: var(--success); }
.sec-avance.falta { color: var(--warning); font-weight: 600; }
.form-avance {
  appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  display: inline-flex; align-items: center; gap: 0.55rem; font: inherit; font-size: 0.8rem; color: var(--fg-muted); cursor: pointer; min-height: 36px;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.form-avance:hover { border-color: var(--accent); background: var(--surface-2); }
.form-avance:empty { display: none; }
.form-avance-bar { width: 90px; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; display: inline-block; }
.form-avance-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width var(--dur-3) var(--ease-out); }
.form-avance.completa { color: var(--success); }
.form-avance.completa .form-avance-bar span { background: var(--success); }
.form-avance.falta { color: var(--warning); }
.form-avance.falta .form-avance-bar span { background: var(--brand-yellow); }

/* Listado de gestión (M-34) y validaciones (M-35) */
/* M-71 (8): buscador arriba, filtros en cuadrícula con etiqueta y el rango de fechas como una sola unidad */
.tr-filtros { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.tr-filtros-buscar { display: flex; gap: 0.6rem; align-items: center; }
.tr-filtros-buscar input.grow { flex: 1 1 240px; min-width: 0; }
.tr-filtros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem 0.8rem; align-items: end; }
.tr-filtro { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tr-filtro > span { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }
.tr-filtro select, .tr-filtro input { width: 100%; min-width: 0; }
.tr-rango { grid-column: span 2; }
.tr-rango-campos { display: flex; gap: 0.5rem; }
.tr-fecha { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--fg-muted); flex: 1 1 0; min-width: 0; }
.tr-fecha input { width: 100%; min-width: 0; }
@media (max-width: 720px) { .tr-rango { grid-column: span 1; } .tr-rango-campos { flex-direction: column; } }
/* M-71 (10): acción de cuidado (reabrir): ámbar, no roja; es reversible y pide observación */
.btn.cuidado { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.btn.cuidado:hover { background: var(--warning-soft); filter: brightness(0.97); color: var(--warning); }
.tr-sort {
  appearance: none; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem; text-transform: inherit; letter-spacing: inherit; font-size: inherit; font-weight: inherit;
}
.tr-sort svg { width: 13px; height: 13px; opacity: 0.45; }
.tr-sort.on { color: var(--primary); }
.tr-sort.on svg { opacity: 1; }
.tr-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600;
  background: var(--surface-2); color: var(--primary); margin: 0.1rem 0.2rem 0.1rem 0; font-variant-numeric: tabular-nums;
}
.tr-chip svg { width: 12px; height: 12px; }
.tr-chip.ok { background: var(--success-soft); color: var(--success); }
/* M-71 (49): "sin ficha" ámbar mientras el trámite está en curso, gris después (misma regla que el vínculo con campo) */
.tr-chip.warn { background: var(--warning-soft); color: var(--warning); }
.tr-tabla td { vertical-align: top; }
.tr-tabla .npn { flex-wrap: wrap; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.3rem; }
.tr-paginacion { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.85rem; }
.tr-paginacion select.small { min-height: 32px; padding: 0.25rem 1.9rem 0.25rem 0.6rem; font-size: 0.84rem; border-radius: var(--radius-sm); width: auto; min-width: 0; }
.field .ok-hint { font-size: 0.78rem; color: var(--success); margin-top: 0.3rem; }
.field .ok-hint:empty { display: none; }
.field .warn-hint { font-size: 0.78rem; color: var(--warning); margin-top: 0.3rem; }
.field .warn-hint:empty { display: none; }
.field.invalid label { color: var(--destructive); }

/* Tablero de Inicio (M-44) */
.stat.warn .stat-icon { background: var(--warning-soft); color: var(--warning); }
.db-alertas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.35rem 0 1.1rem; }
.db-alerta {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 0.84rem; color: var(--fg-muted);
}
.db-alerta svg { width: 15px; height: 15px; color: var(--fg-subtle); }
.db-alerta strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.db-alerta.warn { background: var(--warning-soft); border-color: #f1d49a; color: var(--warning); }
.db-alerta.warn svg, .db-alerta.warn strong { color: var(--warning); }
/* M-78: la columna lateral (avisos, reparto, accesos) es más corta que la principal cuando hay poco trabajo en
   la bandeja, así que quedaba medio metro de vacío bajo las tarjetas de carga. «Actividad reciente» pasa a la
   columna principal, bajo la carga, y el lateral ocupa las dos filas. En una sola columna queda al final, que es
   donde debe estar: primero la bandeja y los avisos. */
.db-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr); grid-template-areas: "principal lateral" "actividad lateral"; gap: 1rem; align-items: start; }
.db-main { grid-area: principal; }
.db-grid > .db-lateral { grid-area: lateral; }
.db-grid > .db-act { grid-area: actividad; }
.db-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
/* M-71 (38): la regla .panel + .panel desplazaba 1 rem la segunda tarjeta de la fila */
.db-grid-2 > .panel + .panel { margin-top: 0; }
.db-lateral { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
/* M-71 (41): columna principal (bandeja + carga) · (44) chip de registro como botón y modal de líneas · (40) chips de filtro */
.db-main { min-width: 0; }
.db-salud-chip-btn { cursor: pointer; font: inherit; }
.db-salud-chip-btn:hover { filter: brightness(0.96); }
.db-salud-chip-btn svg:last-child { opacity: 0.6; }
.modal.modal-lg { max-width: 960px; width: min(96vw, 960px); }
.reg-filtro { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; margin: 0.4rem 0 0.6rem; }
.reg-lista { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: 0.3rem; }
.reg-linea { display: grid; grid-template-columns: 150px 64px 78px minmax(0, 1fr); gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.84rem; }
.reg-linea.error { background: var(--destructive-soft); }
.reg-linea.otro { opacity: 0.75; }
.reg-msg { overflow-wrap: anywhere; }
.tr-filtros-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tr-filtros-chips:empty { display: none; }
.tr-filtros-chips .chip-vinculo .btn.icon.small { min-height: 22px; width: 22px; padding: 0; margin-left: 0.2rem; }
.db-lateral .panel + .panel { margin-top: 0; }
.db-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; }
/* M-77: sin min-width:0 el bloque de texto no se encoge (los elementos flexibles no bajan de su contenido), y la
   línea larga de resumen del panel de Producción estiraba la página 17 px. Es la misma causa que C-12. */
.db-sec-head > * { min-width: 0; }
.db-sec-head h3 { margin: 0.15rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.db-card {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 0.85rem 0.9rem; margin-bottom: 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.db-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.db-card.atascado { border-left: 4px solid var(--brand-yellow); }
.db-card-main { min-width: 0; flex: 1; }
.db-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.db-card-top .meta { display: inline-flex; align-items: center; gap: 0.25rem; }
.db-card-top .meta svg { width: 13px; height: 13px; }
.db-rad { font-weight: 600; }
.db-warn { color: var(--warning) !important; font-weight: 600; }
/* M-72: reparto de trámites (panel de radicados por asignar en Inicio y responsable en el listado) */
.db-lista { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.db-lista li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.tr-asig { display: inline-flex; align-items: center; gap: .3rem; }
.rp-etapa { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .5rem .8rem .2rem; margin: 0 0 .6rem; min-width: 0; }
.rp-etapa legend { font-family: var(--font-display); font-weight: 600; padding: 0 .35rem; }
.rp-etapa.rp-etapa-actual { border-color: var(--accent); background: var(--surface-2); }
.tr-asig i, .db-card-top .meta i { width: 14px; height: 14px; }
.db-card-body { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.92rem; }
.db-quote {
  margin: 0.3rem 0; padding: 0.4rem 0.6rem; border-left: 3px solid var(--warning); background: var(--warning-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.85rem; color: var(--warning); display: flex; gap: 0.4rem; align-items: flex-start;
}
.db-quote svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }
.db-card-actions { display: flex; flex-direction: column; gap: 0.35rem; align-items: stretch; flex: 0 0 auto; }
.db-quick { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
/* M-79: la lista tiene alto máximo y desplaza dentro de sí misma. Antes crecía con el volumen del equipo y
   el panel se estiraba sin límite; ahora ocupa siempre lo mismo, se vea uno o doce movimientos. */
.db-actividad { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.86rem; max-height: 22rem; overflow-y: auto; scrollbar-width: thin; }
.db-actividad::-webkit-scrollbar { width: 8px; }
.db-actividad::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.db-actividad li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.db-act-when { color: var(--fg-subtle); font-size: 0.76rem; white-space: nowrap; }
.db-actividad a { color: var(--accent); text-decoration: none; }
.db-actividad a:hover { text-decoration: underline; }
.db-bars { display: flex; flex-direction: column; gap: 0.4rem; }
/* M-71 (39) y (42): etiqueta en hasta dos líneas y valor con porcentaje del total */
.db-bar { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) auto; gap: 0.6rem; align-items: center; font-size: 0.86rem; }
.db-bar-label { color: var(--fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.db-bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-bar-value .meta { margin-left: 0.3rem; }
.db-bar-track { height: 10px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.db-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; transition: width var(--dur-3) var(--ease-out); }
.db-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
@media (max-width: 1100px) { .db-grid, .db-grid-2 { grid-template-columns: 1fr; } .db-grid { grid-template-areas: "principal" "lateral" "actividad"; } .db-card { flex-direction: column; } .db-card-actions { flex-direction: row; flex-wrap: wrap; } }

/* Flujo del trámite (fase 4 parte 2) */
.badge.aprobado { background: #dcefff; color: #0b4a7a; }
.badge.aprobado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.flujo-estado { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-height: 40px; }
.flujo-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.flujo-estado-actual { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.25rem; }
.flujo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.flujo-etapa { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; background: var(--bg); min-width: 0; }
.flujo-etapa .collection-subhead { margin-top: 0; }
.flujo-firma { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--border); }
.flujo-firma:last-child { border-bottom: 0; }
.flujo-firma > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--fg-subtle); }
.flujo-firma.firmada > svg { color: var(--success); }
.flujo-firma-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.3; }
.flujo-firma-txt span { overflow-wrap: anywhere; }
.flujo-docs { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.flujo-docs li { margin: 0.2rem 0; }
.flujo-historial { margin-top: 0.9rem; }
.flujo-historial summary { cursor: pointer; font-weight: 600; color: var(--primary); font-size: 0.9rem; }
.flujo-historial ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.45; }
@media (max-width: 1100px) { .flujo-grid { grid-template-columns: 1fr; } }
/* M-65 (ajuste): Excel y selector de semanas juntos a la derecha del encabezado de Producción */
.db-prod-acciones { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
/* M-66: casilla de sesión por pestaña en el login */
.login-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--fg-muted); cursor: pointer; margin-top: -0.3rem; }
.login-check input { width: 16px; height: 16px; min-height: 0; accent-color: var(--primary); }
/* M-64: versiones del trámite y comparación */
.flujo-versiones { margin-top: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; background: var(--bg); min-width: 0; }
.flujo-versiones .collection-subhead { margin-top: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.flujo-ver-lista { list-style: none; padding-left: 0; }
.flujo-ver-lista li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); }
.flujo-ver-lista li:last-child { border-bottom: 0; }
.flujo-ver-lista li > .meta { flex: 1; min-width: 14ch; }
.ver-cuerpo { margin-top: 0.8rem; max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 0.8rem; }
.ver-tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ver-tabla th, .ver-tabla td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.ver-tabla th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
.ver-antes { background: var(--destructive-soft); }
.ver-despues { background: var(--success-soft); }
.ver-col summary { cursor: pointer; }
/* M-63: duplicados entre paquetes */
.modal.modal-wide { width: min(1100px, 96vw); max-width: none; }
.cp-dup-grupos { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.9rem; max-height: 70vh; overflow: auto; }
.cp-dup-grupo { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; background: var(--bg); }
.cp-dup-grupo.resuelto { border-color: var(--success); }
.cp-dup-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.cp-dup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.6rem; }
.cp-dup-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; background: var(--surface); min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.86rem; }
.cp-dup-card.manda { border-color: var(--success); box-shadow: 0 0 0 1px var(--success-soft) inset; }
.cp-dup-card-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.cp-dup-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* M-61: resumen propio de producción y reconocedor sin usuario */
.db-prod-mio { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.8rem; margin: 0 0 0.7rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--surface-2); font-size: 0.9rem; line-height: 1.5; }
.db-prod-mio > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent); margin-top: 0.2rem; }
.db-prod-mio .btn { margin-left: 0.4rem; vertical-align: middle; }
.db-rec-sin { color: var(--warning); }
/* M-60: adjuntos del expediente */
.flujo-adjuntos { margin-top: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; background: var(--bg); min-width: 0; }
.flujo-adjuntos .collection-subhead { margin-top: 0; }
.flujo-adj-lista { list-style: none; padding-left: 0; }
.flujo-adj-lista li { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); }
.flujo-adj-lista li:last-child { border-bottom: 0; }
.flujo-adj-lista li > svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--fg-subtle); }
.flujo-adj-lista li > a { font-weight: 600; overflow-wrap: anywhere; }
.flujo-adj-lista li > .meta { flex: 1; min-width: 12ch; }
.flujo-adj-form { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.flujo-adj-form select { width: auto; min-width: 200px; }
.flujo-adj-form input[type="text"] { flex: 1; min-width: 180px; }
.flujo-adj-form input[type="file"] { width: auto; max-width: 260px; height: auto; padding: 0.35rem 0.5rem; font-size: 0.85rem; }

/* Puente trámite ↔ predio de campo */
.predio-campo-row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.predio-campo-row input { flex: 1; min-width: 260px; }
.predio-campo-res { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; }
.predio-campo-item {
  text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.85rem; color: inherit; font-family: inherit; transition: border-color var(--dur-1), background var(--dur-1);
}
.predio-campo-item:hover { border-color: var(--accent); background: var(--surface-2); }

/* ---------- 7. Responsive, movimiento reducido e impresión ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 30; height: auto; padding: 0.8rem 0.9rem; gap: 0.5rem; overflow: visible; }
  .brand { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; flex: none; overflow: visible; margin-right: 0; padding-right: 0; }
  .nav .nav-group { display: none; }
  .nav button { min-height: 38px; padding: 0.4rem 0.65rem; font-size: 0.86rem; }
  .sidebar-foot { margin-top: 0; padding: 0.5rem 0.7rem; display: flex; align-items: center; gap: 0.6rem; }
  .sidebar-foot > div:last-child { display: none; }
  .sidebar-foot .btn { width: auto !important; margin: 0 !important; }
  .main { padding: 0 1rem 2rem; }
  .topbar { margin: 0 -1rem 1rem; padding: 0.9rem 1rem 0.7rem; top: 0; position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .field.half, .field.third, .field.quarter { grid-column: span 12; }
  .collection-row { grid-template-columns: 1fr 1fr; }
  .collection-row.foto-row { grid-template-columns: 1fr; }
  .validador { grid-template-columns: 1fr 1fr; }
  .map-layout { grid-template-columns: 1fr; }
  #map-canvas { min-height: 420px; height: 60vh; }
  .login-card { grid-template-columns: 1fr; }
  .login-brand { padding: 1.6rem 1.5rem 1.8rem; }
  .cp-layout { grid-template-columns: 1fr; }
  .cp-side { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .cp-secs { grid-template-columns: 1fr; }
  .cp-grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .btn:hover, .nav button:hover, .cp-foto:hover { transform: none; }
}

@media print {
  @page { margin: 12mm; }
  body::before { display: none; }
  /* M-77: antes esta regla ocultaba TODO salvo las dos previsualizaciones, así que pulsar Ctrl+P en cualquier
     pantalla del aplicativo sacaba una hoja en blanco. Ahora solo manda cuando hay una previsualización abierta
     (los dos contenedores se crean al abrirla y se retiran al cerrarla). */
  body:has(#tramite-preview-backdrop, #fd-preview-root) > *:not(#tramite-preview-backdrop):not(#fd-preview-root) { display: none !important; }

  /* Sin previsualización se imprime la pantalla: se quitan navegación, acciones y avisos, que en papel no sirven. */
  body:not(:has(#tramite-preview-backdrop, #fd-preview-root)) .sidebar,
  body:not(:has(#tramite-preview-backdrop, #fd-preview-root)) #top-actions,
  body:not(:has(#tramite-preview-backdrop, #fd-preview-root)) #toast,
  body:not(:has(#tramite-preview-backdrop, #fd-preview-root)) .modal-backdrop { display: none !important; }
  body:not(:has(#tramite-preview-backdrop, #fd-preview-root)) .app { display: block !important; }
  body:not(:has(#tramite-preview-backdrop, #fd-preview-root)) .main,
  body:not(:has(#tramite-preview-backdrop, #fd-preview-root)) #view-root { overflow: visible !important; width: 100% !important; }
  .panel, .db-card, tr { break-inside: avoid; }
  #tramite-preview-backdrop, #fd-preview-root {
    position: static !important; inset: auto !important; background: none !important; padding: 0 !important;
    overflow: visible !important; display: block !important; backdrop-filter: none !important;
  }
  .preview-shell { box-shadow: none !important; border-radius: 0 !important; max-height: none !important; overflow: visible !important; width: 100% !important; animation: none !important; }
  .preview-toolbar, .no-print { display: none !important; }
  .preview-doc { padding: 0 !important; overflow: visible !important; }
  .preview-doc .pv-fotos { grid-template-columns: repeat(2, 1fr); }
  .preview-doc .pv-foto img { height: 160px; }
}

/* M-33: ciclo de vida del paquete de campo */
.cp-ciclo { list-style: none; margin: 0.45rem 0 0.35rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.6rem; }
.cp-ciclo li { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.78rem; color: var(--fg-muted); min-width: 0; }
.cp-ciclo li > span { display: flex; flex-direction: column; min-width: 0; }
.cp-ciclo li strong { font-weight: 600; color: var(--fg-muted); }
.cp-ciclo li .meta { font-size: 0.72rem; overflow-wrap: anywhere; line-height: 1.3; }   /* el detalle se parte en dos líneas en vez de cortarse con puntos suspensivos */
.cp-ciclo li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--border-strong, var(--border)); }
.cp-ciclo li.ok strong { color: var(--fg); }
.cp-ciclo li.ok svg { color: var(--success); }
.cp-ciclo-bar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 0.15rem 0 0.45rem; }
.cp-ciclo-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: inherit; transition: width 0.3s ease-out; }
.fd-sesion-row { display: flex; gap: 0.45rem; align-items: stretch; flex-wrap: wrap; }
.fd-sesion-row select { flex: 1 1 200px; min-width: 0; }
/* M-38: leyenda de la capa de predios de campo */
.map-leyenda { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; padding: 0.35rem 0.6rem 0.2rem; font-size: 0.72rem; color: var(--fg-muted); }
.map-leyenda__item { display: inline-flex; align-items: center; gap: 0.3rem; }
.map-leyenda__item i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; opacity: 0.85; }
/* M-39: área propuesta en la tarjeta de unidad */
.cp-area-row { display: flex; gap: 0.4rem; align-items: center; }
.cp-area-row input { flex: 1 1 120px; min-width: 0; }
.cp-area-row .btn { white-space: nowrap; }
/* M-48: acciones por lote en la tarjeta del paquete */
.cp-lote { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }
.cp-lote__label { flex-basis: 100%; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.spin, svg.spin { animation: spin 1s linear infinite; }
/* M-49: control de calidad del paquete */
.cp-cal-grupos { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; }
.cp-cal-grupo { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 0.4rem 0.7rem; }
.cp-cal-grupo summary { cursor: pointer; display: flex; gap: 0.5rem; align-items: center; padding: 0.2rem 0; }
.cp-cal-lista { list-style: none; margin: 0.4rem 0 0.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.25rem 1rem; max-height: 40vh; overflow: auto; }
.cp-cal-lista li { display: flex; gap: 0.4rem; align-items: baseline; min-width: 0; font-size: 0.85rem; }
.cp-cal-lista button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
.cp-cal-lista button.link:hover { text-decoration: underline; }
.cp-cal-lista button.link:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 3px; }

/* M-46: aviso de contraseña inicial en la barra lateral */
.pw-aviso { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: left; display: flex; gap: 0.4rem; align-items: center; margin-top: 0.6rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 0.78rem; font-weight: 600; }
.pw-aviso svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* M-47: auditoría */
.aud-table td { vertical-align: top; font-size: 0.85rem; }
.aud-cambios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.aud-cambios li { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.aud-cambios svg { width: 14px; height: 14px; color: var(--fg-muted); }

/* M-77: subir archivo con el teclado. El input iba con display:none, que lo saca del orden de tabulación,
   y la etiqueta no es focalizable: no había forma de cargar un paquete sin ratón. */
.archivo-btn { cursor: pointer; margin: 0; position: relative; }
/* M-77: el control de archivo se deja oculto del todo, porque incluso recortado aporta su tamaño interno al
   desplazamiento de la página. Quien recibe el foco es la etiqueta, que actúa como botón (ver core/modal.js). */
.archivo-oculto { display: none; }
.archivo-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }