/* ============================================================================
   Remate v2 — Sistema de diseño DUAL-THEME — "MT Bold" (Modern Tool, paleta legacy)
   Light "legacy Morales Colombo" + Dark "verde casi negro + dorado" + toggle.
   Un único set de tokens semánticos; :root=light, [data-theme="dark"] los pisa.
   Sidebar verde oscuro + dorado · contenido claro · sans + mono · densidad de datos.
   ============================================================================ */

/* ── Fuentes self-hosteadas (antes Google Fonts CDN) ──────────────────────────
   Hanken Grotesk (UI) y Geist Mono (números) son fuentes VARIABLES: un solo woff2
   por familia cubre todo el rango de peso. Subset latin (cubre español). Se sirven
   desde el mismo origen (pasa el CSP 'self') con caché de 1 año (.htaccess).
   font-display: swap → el texto se ve con la fallback y cambia al cargar la fuente. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/geist-mono.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* ── MARCA verde — escala legacy Morales Colombo ──────────────── */
  --green-900:   #08120a;
  --green-850:   #0c1a0c;
  --green-800:   #111e11;   /* sidebar legacy */
  --green-700:   #11440d;   /* green-dark legacy */
  --green-600:   #236e43;   /* green-primary legacy (PRIMARIO) */
  --green-500:   #1e8048;
  --green-400:   #27ae60;   /* success legacy (verde vivo) */
  --green-300:   #5fcf8c;
  --green-glow:  rgba(39,174,96,.18);

  /* ── DORADO legacy — el acento característico ──────────────────── */
  --gold:        #c4993a;   /* accent legacy */
  --gold-2:      #a87d2a;   /* accent-hover legacy */
  --gold-soft:   #fff8e1;
  --gold-glow:   rgba(196,153,58,.35);

  /* ── SUPERFICIES (LIGHT = paleta legacy) ──────────────────────── */
  --bg:          #f2f5f2;   /* body-bg legacy (verde-grisáceo claro) */
  --surface:     #ffffff;   /* cards/panels */
  --surface-2:   #f6faf6;   /* surface elevada / thead / footers */
  --line:        #dde8dd;   /* borde suave legacy */
  --line-strong: #cbddcb;   /* borde definido (inputs, chips) */

  /* ── TINTA (LIGHT) ────────────────────────────────────────────── */
  --ink:         #1a1f1a;   /* texto principal legacy */
  --ink-2:       #3a463f;   /* secundario */
  --ink-3:       #5d6c5d;   /* muted (AA 5.07:1 sobre el bg claro) */
  --ink-4:       #69716b;   /* faint / placeholders / iconos (AA 4.58:1) */

  /* ── SIDEBAR (verde oscuro) ───────────────────────────────────── */
  --sidebar-bg:  linear-gradient(178deg, var(--green-800), var(--green-900));
  --sidebar-accent: var(--green-glow);       /* radial dorado tenue del mockup */
  --side-ink:    #bcd0c6;   /* texto nav inactivo */
  --side-ink-2:  #d9e6df;   /* texto general sidebar */
  --side-ink-3:  #7c9a8b;   /* iconos/sublabels */
  --side-ink-4:  #5d7a6c;   /* nav-label, separadores */
  --side-hover:  rgba(255,255,255,.08);
  --side-line:   rgba(255,255,255,.06);

  /* ── HOVER AFFORDANCE (tinte verde perceptible para superficies interactivas) ── */
  --row-hover:   color-mix(in srgb, var(--green-400) 9%, var(--surface));   /* hover de fila de tabla */
  --ctrl-hover:  color-mix(in srgb, var(--green-600) 9%, var(--surface));   /* hover de controles ghost/secundarios */

  /* ── ESTADOS (5 del remate + delta) ───────────────────────────── */
  /* color-base que el badge mezcla; light = legible sobre fondo claro */
  --st-preparando: #a07010;   /* ámbar/dorado tostado */
  --st-listo:      #1e8048;   /* verde medio */
  --st-programado: #2563c9;   /* azul */
  --st-activo:     #0f6c47;   /* verde fuerte (con dot que late) */
  --st-cerrado:    #5b6b78;   /* slate */
  --st-delta-dn:   #c0533f;   /* delta negativo */

  /* fondos de estado pre-mezclados (mockup) */
  --amber-bg:    #fff8e1;
  --blue-bg:     #e4ecfb;
  --slate-bg:    #eceff1;
  --activo-bg:   #e6f7ee;
  --listo-bg:    #e8f6ef;

  /* ── RADIOS ───────────────────────────────────────────────────── */
  --radius:      12px;   /* cards, panels, modal */
  --radius-sm:   8px;    /* chips, badges, botones de fila */
  --radius-pill: 999px;

  /* ── SOMBRAS ──────────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(17,30,17,.06), 0 1px 0 rgba(17,30,17,.03);
  --shadow-pop:  0 12px 32px -12px rgba(17,30,17,.28);
  --shadow-lg:   0 24px 60px -24px rgba(17,30,17,.4);

  /* ── FOCUS RING (verde de marca, preservar accesibilidad) ─────── */
  --ring:        0 0 0 3px var(--green-glow);

  /* ── EASINGS (preservar: la app los usa en transiciones) ──────── */
  --spring:      cubic-bezier(.34,1.56,.64,1);
  --smooth:      cubic-bezier(.22,.61,.36,1);
  --ease:        cubic-bezier(.22,.68,0,1);
  --transition:  all .16s var(--smooth);

  /* ── FUENTES ──────────────────────────────────────────────────── */
  --sans:        'Hanken Grotesk', system-ui, sans-serif;
  --mono:        'Geist Mono', ui-monospace, monospace;

  --sidebar-w:   248px;

  /* ════════════════════════════════════════════════════════════════
     ALIAS de compatibilidad — nombres VIEJOS → nuevos.
     OBLIGATORIO: el CSS/JS sin migrar los usa. NO borrar.
     ════════════════════════════════════════════════════════════════ */
  --bone:        var(--bg);
  --bg-canvas:   var(--bg);
  --bg-canvas-2: var(--surface-2);
  --paper:       var(--surface);
  --paper-2:     var(--surface-2);
  --text:        var(--ink);
  --text-soft:   var(--ink-2);
  --text-faint:  var(--ink-3);
  --muted:       var(--ink-3);
  --border:      var(--line);          /* OJO: antes era ink fuerte; ahora suave (mejor) */
  --border-soft: var(--line);
  --hairline:    rgba(17,30,17,.10);
  --green:       var(--green-600);     /* primario ahora = legacy 236e43 */
  --green-deep:  var(--green-700);
  --green-bright:var(--green-400);
  --green-ink:   var(--green-600);     /* verde para texto/links/borde */
  --green-light: #e8f6ef;
  --on-green:    #ffffff;              /* texto sobre verde = blanco (no crema) */
  --brass:       var(--gold);          /* brass legacy → dorado */
  --bronze:      var(--gold);
  --bronze-lt:   var(--gold);
  --bronze-lite: var(--gold);
  --brass-soft:  var(--gold-soft);
  --emerald-glow:var(--green-400);
  --input-border:var(--line-strong);
  --input-bg:    var(--surface);
  --search-bg:   var(--surface);
  --r-sm:        var(--radius-sm);
  --r-md:        var(--radius);
  --r-lg:        var(--radius);
  --r-pill:      var(--radius-pill);
  --pill:        var(--radius-pill);
  --radius-hard: var(--radius);
  --radius-lg:   var(--radius);
  --shadow-sm:   var(--shadow-card);
  --shadow:      var(--shadow-card);
  --shadow-md:   var(--shadow-card);
  --shadow-lift: var(--shadow-pop);
  --elev-card:   var(--shadow-card);
  --danger:      #c0392b;
  --danger-soft: #fbeae7;
  --success:     var(--green-400);
  --serif:       var(--sans);          /* mata cualquier serif residual sin romper var() */
  /* alias de estados viejos del editorial (por si quedan referencias) */
  --st-delta-up: var(--green-400);
  --marker-fg:   #ffffff;
}

/* Spring nativo cuando el browser soporta linear() */
@supports (animation-timing-function: linear(0,1)) {
  :root { --spring: linear(0,0.55,1.04,0.98,1.008,0.997,1); }
}

[data-theme="dark"] {
  color-scheme: dark;

  /* DARK refinado — superficies neutras (croma bajo, un solo hue ~152°); el verde
     de marca vive en los ACENTOS. Toda la familia verde alineada al esmeralda 152°. */
  --green-900:   #08110d;
  --green-850:   #0c1511;
  --green-800:   #121a16;
  --green-700:   #0f5236;   /* esmeralda profundo (era el oliva turbio #11440d) */
  --green-600:   #2e9e63;   /* primario esmeralda, limpio (era #2f8a55, verde semáforo) */
  --green-500:   #268a57;
  --green-400:   #3ad07f;   /* verde vivo, acento */
  --green-300:   #62d894;
  --green-glow:  rgba(58,208,127,.20);

  --gold:        #d8b878;   /* dorado más claro para legibilidad en dark */
  --gold-2:      #c4993a;
  --gold-glow:   rgba(216,184,120,.32);   /* halo más contenido sobre superficies limpias */

  --bg:          #0b110e;   /* neutro oscuro, subtono verde mínimo */
  --surface:     #121a16;   /* cards: neutro verdoso, croma bajo (era #111e11 verde puro) */
  --surface-2:   #1a241f;   /* elevada — salto de luz limpio sobre surface */
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(180,210,195,.14);

  --ink:         #eaf3ee;   /* crema verdosa */
  --ink-2:       #c2d2c8;
  --ink-3:       #93a89b;   /* muted dark (AA) */
  --ink-4:       #789184;   /* faint dark (AA 4.62:1 sobre surface-2) */

  --sidebar-bg:  linear-gradient(178deg, #0d1512, #070d0b);
  --sidebar-accent: rgba(216,184,120,.10);
  --side-ink:    #aec4ba;
  --side-ink-2:  #d9e6df;
  --side-ink-3:  #7c9a8b;
  --side-ink-4:  #5d7a6c;
  --side-hover:  rgba(255,255,255,.09);
  --side-line:   rgba(255,255,255,.07);

  /* HOVER AFFORDANCE dark — el verde vivo (#34c476) al % más alto para perciba sobre #111e11 */
  --row-hover:   color-mix(in srgb, var(--green-400) 12%, var(--surface));
  --ctrl-hover:  color-mix(in srgb, var(--green-400) 14%, var(--surface));

  --st-preparando: #cda255;
  --st-listo:      #3ad07f;
  --st-programado: #5b95ef;
  --st-activo:     #45e08c;
  --st-cerrado:    #8a958c;
  --st-delta-dn:   #d98b6a;

  --amber-bg:    rgba(199,154,75,.12);
  --blue-bg:     rgba(91,149,239,.12);
  --slate-bg:    rgba(255,255,255,.05);
  --activo-bg:   rgba(61,220,132,.10);
  --listo-bg:    rgba(52,196,118,.10);

  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.3);
  --shadow-pop:  0 18px 40px -20px rgba(0,0,0,.8);
  --shadow-lg:   0 30px 60px -28px rgba(0,0,0,.9);

  --ring:        0 0 0 3px var(--green-glow);

  /* re-mapear aliases que dependen del valor (los var()-of-var() ya se actualizan
     solos; solo redefinir los de color literal) */
  --green-light: rgba(47,138,85,.18);
  --on-green:    #06100a;          /* texto sobre verde claro dark = oscuro */
  --green-ink:   #4fb37a;          /* verde legible para links/borde en dark */
  --emerald-glow:#34c476;
  --danger:      #e0796a;
  --danger-soft: rgba(224,121,106,.16);
  --hairline:    rgba(255,255,255,.08);
  --input-bg:    rgba(255,255,255,.04);
  --marker-fg:   #ffffff;
}

/* ── Base / body — plano, sin aurora ni grano ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Reserva siempre la barra de scroll: evita el flicker/salto al pasar de una
   vista o tab alta (con scroll) a una corta (sin scroll) — p. ej. las tabs de la
   cuenta corriente del cliente. overflow-y:scroll fija el track siempre (fiable
   en todos los navegadores); scrollbar-gutter cubre los de scrollbar overlay. */
html { font-size: 16px; overflow-y: scroll; scrollbar-gutter: stable; }
body {
  font-family: var(--sans);
  background: var(--bg);                 /* plano — sin radiales editoriales */
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -.02em; }
.tnum { font-variant-numeric: tabular-nums; }

a { color: var(--green-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.btn:focus-visible, .nav-item a:focus-visible, .search:focus-visible { box-shadow: var(--ring); }

/* ── App shell ──────────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; position: relative; }
/* min-width: 0 NO es decorativo: un item de flex arranca en `min-width: auto`, o
   sea que NO puede achicarse más que su hijo más ancho. Con una tira de filtros
   o una tabla adentro, el layout entero se estiraba a ~700px en un celular de
   390 y la página se iba de lado (todo el trabajo responsive de abajo quedaba
   fuera de pantalla). Con 0, el contenido se banca achicarse y cada bloque
   resuelve su propio scroll. */
.main-content { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }

/* ── Sidebar — verde oscuro + acento DORADO ─────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background:
    radial-gradient(120% 60% at 0% 0%, var(--sidebar-accent), transparent 55%),
    var(--sidebar-bg);
  color: var(--side-ink-2);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 100;
  padding: 18px 14px 14px;
  border-right: 1px solid var(--side-line);
  transition: transform .22s ease;
}
.sidebar-backdrop { display: none; }

/* Brand: mark dorado + nombre (ver layout.js §4) */
.sidebar-logo { display: flex; align-items: center; gap: 11px; padding: 8px 8px 18px; text-decoration: none; }
/* .sidebar-logo ES un link real (navega a "/"): afford honesto y sutil al hover sin subrayar el wordmark */
.sidebar-logo:hover { text-decoration: none; }
.sidebar-logo:hover .sidebar-logo-text { color: #fff; }
.sidebar-logo:hover .mark { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(196,153,58,.45), 0 6px 18px -6px var(--gold-glow); }
.sidebar-logo .mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, var(--gold), var(--gold-2));
  display: grid; place-items: center;
  color: #11240f; font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 1px rgba(196,153,58,.3), 0 6px 16px -6px rgba(196,153,58,.55);
  transition: filter .14s ease, box-shadow .14s ease;
}
.sidebar-logo .mark svg { width: 21px; height: 21px; display: block; }
.sidebar-logo-text { color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-family: var(--sans); transition: color .14s ease; }
.sidebar-logo-sub { color: var(--side-ink-3); font-size: 11px; font-weight: 500; letter-spacing: .02em; margin-top: 2px; text-transform: none; }

.sidebar-nav { flex: 1; padding: 6px 0; overflow-y: auto; position: relative; }
.sidebar-nav ul { list-style: none; }
.nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--side-ink-4); padding: 16px 10px 7px;
}

/* Nav-item: reusar markup <li class="nav-item"><a> */
.nav-item a {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 10px; border-radius: 9px;
  color: var(--side-ink); font-size: 13.5px; font-weight: 500;
  transition: background .14s ease, color .14s ease;
}
.nav-item a i { width: 16px; text-align: center; font-size: 13.5px; color: var(--side-ink-3); transition: color .14s ease; }
.nav-item a:hover { background: var(--side-hover); color: #eaf4ef; text-decoration: none; }
.nav-item a:hover i { color: var(--side-ink); }

/* ACTIVO: realce dorado del mockup. El nav-marker es solo el filete dorado lateral. */
.nav-item a.active {
  color: #fff; font-weight: 600;
  background: linear-gradient(90deg, rgba(196,153,58,.20), rgba(196,153,58,.05));
  box-shadow: inset 0 0 0 1px rgba(196,153,58,.2);
}
.nav-item a.active i { color: var(--gold); }

/* contador opcional (.count) si se usa */
.nav-item .count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.08); color: #cfe0d7;
  padding: 1px 7px; border-radius: 20px;
}
.nav-item a.active .count { background: var(--gold); color: #11240f; }

/* Nav-marker: filete dorado deslizante (preserva el JS de layout.js). El relleno
   lo da .nav-item a.active / :hover; el marker mueve solo el ::before lateral. */
.nav-marker {
  position: absolute; top: 0; left: 14px; right: 14px; height: 40px;
  border-radius: 9px; background: transparent;   /* el fondo lo da .active ahora */
  box-shadow: none; z-index: 0; pointer-events: none; opacity: 0;
  transition: transform .45s var(--spring), height .25s var(--smooth), opacity .2s;
}
.nav-marker::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--gold); box-shadow: 0 0 12px 1px var(--gold-glow);
}

/* Footer / user / toggles */
.sidebar-footer { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--side-line); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 7px 4px; margin-bottom: 10px; }
.sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, #2a5546, #143a2c);
  color: #bfe8d4; display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
  font-family: var(--sans);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.sidebar-user-name { color: #eaf3ee; font-size: 12.5px; font-weight: 600; }
.sidebar-user-role { color: var(--side-ink-3); font-size: 11px; text-transform: capitalize; }

.btn-theme, .btn-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 8px 12px; margin-bottom: 8px;
  background: transparent; border: 1px solid var(--side-line);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: var(--sans);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.btn-theme { color: var(--side-ink); }
.btn-theme:hover { border-color: var(--gold); color: #fff; background: var(--side-hover); }
.btn-theme i { transition: transform .4s var(--spring); }
.btn-theme:hover i { transform: rotate(-20deg) scale(1.1); color: var(--gold); }
.btn-logout { color: #d99; }
.btn-logout:hover { background: rgba(192,57,43,.14); border-color: rgba(192,57,43,.5); color: #f0b8b0; }

/* ── Topbar — limpia ────────────────────────────────────────────────────────── */
.topbar {
  height: 64px; flex: none;
  display: flex;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
/* El fondo/borde de la barra ocupa todo el ancho, pero su CONTENIDO se alinea
   a la misma columna centrada que .content-area (así en pantallas anchas la
   fecha no queda colgada del borde). */
.topbar-inner {
  width: 100%; max-width: 1340px; margin-inline: auto;
  height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 28px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-title { font-family: var(--sans); font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.topbar-date { font-size: 13px; color: var(--ink-4); font-weight: 500; }
.topbar-date::before { content: none; }   /* SACAR el filete bronce editorial */
.topbar-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); color: var(--green-ink); font-size: 1.05rem; cursor: pointer;
  transition: var(--transition);
}
.topbar-hamburger:hover { background: var(--ctrl-hover); border-color: var(--green-ink); color: var(--green-ink); }
.content-area { flex: 1; padding: 28px; max-width: 1340px; width: 100%; margin-inline: auto; }

/* ── Página / card ──────────────────────────────────────────────────────────── */
.page { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 22px 24px; }
[data-theme="dark"] .page { backdrop-filter: none; }   /* SACAR blur editorial */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 14px; flex-wrap: wrap; }
.page-header h1 { font-family: var(--sans); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.page-sub, .page-nav a { font-size: 13px; color: var(--ink-4); }
.page-nav a { color: var(--green-ink); font-weight: 600; transition: color .14s ease; }
/* breadcrumb "← Inicio"/"← Remates": hover crisp (verde más vivo + subrayado intencional) */
.page-nav a:hover { color: var(--green-500); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
[data-theme="dark"] .page-nav a:hover { color: color-mix(in srgb, var(--green-ink) 82%, #fff); }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
/* Toolbar con campos etiquetados (label arriba): alinear los controles ABAJO para
   que el buscador (sin label) quede parejo con los selects (con label encima). */
.toolbar--fields { align-items: flex-end; }
.toolbar-spacer { flex: 1; }
/* Search FOLIO: lupa embebida (SVG en background; no puede leer var(), por eso color fijo neutro
   ≈ --ink-4 que funciona en ambos temas) + halo dorado al focus. Markup intacto: <input class="search">. */
/* Sitio Web mete el buscador junto a los chips, fuera de una .toolbar. */
.toolbar .search,
.web-filtros .search {
  flex: 1 1 240px; max-width: 420px; height: 40px; padding: 0 14px 0 38px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px; background: var(--surface-2); color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23789184' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px 50%; background-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.toolbar .search::placeholder,
.web-filtros .search::placeholder { color: var(--ink-4); }
.toolbar .search:focus,
.web-filtros .search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
/* Loader inicial del SPA (app.html, antes de que arranque). ANTES estaba en un <style>
   inline en app.html, pero el CSP (style-src 'self', sin unsafe-inline) BLOQUEA los
   <style>/style="" inline → se veía "Cargando…" pelado en el hard reload. Al estar acá
   (app.css es 'self' y render-blocking) queda estilizado desde el primer paint. */
.app-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; background: var(--bg); }
.app-loading__spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ink-4) 40%, transparent);
  border-top-color: var(--green-600); animation: app-spin .7s linear infinite;
}
.app-loading__txt { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--ink-3); }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* Estado "subiendo…" de botones/labels de upload (fotos, archivos): spinner
   chico heredando el color del texto + bloqueo de más clicks mientras procesa. */
.upload-spin {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: app-spin .7s linear infinite;
}
label.subiendo { pointer-events: none; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .app-loading__spin { animation-duration: 2.4s; } }

/* Loader de vistas (mientras la vista trae sus datos). Antes era texto pelado feo;
   ahora un spinner centrado + el texto. Lo usan clientes/ventas/remates/home/etc. */
.loading {
  color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; min-height: 160px; padding: 2rem 0; text-align: center;
}
.loading::before {
  content: ""; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ink-4) 40%, transparent);
  border-top-color: var(--green-600); animation: loading-spin .7s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading::before { animation-duration: 2.4s; } }

/* ── Skeleton loaders (shimmer) — placeholders con la estructura mientras carga ──── */
:root { --sk-base: #e4ebe4; --sk-hi: #f3f7f3; }
[data-theme="dark"] { --sk-base: #202d27; --sk-hi: #2c3d34; }
/* IMPORTANTE: el CSP bloquea los `style` inline puestos por innerHTML, así que TODO el
   tamaño/estructura del skeleton va por CLASES (nunca style="..."). */
.skel { display: block; position: relative; overflow: hidden; background: var(--sk-base); border-radius: 6px; }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sk-hi) 92%, transparent), transparent);
  animation: sk-shimmer 1.35s ease-in-out infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation-duration: 2.6s; } }
.sk-line { height: 11px; border-radius: 5px; width: 100%; }
.sk-circle { border-radius: 50%; width: 30px; height: 30px; flex: none; }
.sk-btn { height: 30px; width: 74px; border-radius: var(--radius-sm); flex: none; }
/* TABLA (encabezado + filas). */
.skel-table { padding: 2px 2px 4px; }
.skel-thead, .skel-tr { display: flex; align-items: center; gap: 16px; }
.skel-thead { padding: 12px 18px; border-bottom: 1px solid var(--line-strong); }
.skel-tr { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.skel-tr:last-child { border-bottom: 0; }
.skel-thead > .skel, .skel-tr > .skel { flex: 1; height: 11px; border-radius: 5px; min-width: 0; }
.skel-main { flex: 1.7; display: flex; align-items: center; gap: 11px; min-width: 0; }
.skel-main .sk-circle { flex: none; }
.skel-main .sk-line { flex: 1; }
.skel-tr > .sk-btn { flex: 0 0 74px; height: 30px; }
/* CARDS (objetos). Nombre propio para no chocar con el .skel-card legacy (height:120px). */
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.skel-cardbox { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.skel-cardbox > .skel { flex: none; height: 11px; }
.skel-cardbox > .sk-thumb { height: 78px; border-radius: 6px; }
.skel-cardbox > .sk-w70 { width: 70%; }
.skel-cardbox > .sk-w45 { width: 45%; }
/* DASHBOARD stat-cards (card propia sobre --surface para que el shimmer contraste). */
.skel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 20px; }
.skel-stat { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 11px; }
.skel-stat > .skel { flex: none; border-radius: 5px; }
.skel-stat > .skel:nth-child(1) { height: 11px; width: 50%; }
.skel-stat > .skel:nth-child(2) { height: 26px; width: 60%; border-radius: 6px; }
.skel-stat > .skel:nth-child(3) { height: 11px; width: 40%; }
.skel-panel-title { display: block; height: 15px; width: 190px; border-radius: 5px; margin: 4px 0 14px; }
.skel-seg { display: block; height: 42px; width: 340px; max-width: 100%; border-radius: 10px; margin-bottom: 18px; }

/* ═══ Dashboard rework: KPIs accionables + actividad por mes (tabs + barras) ═══ */
/* Selector de moneda: escopea todo el panel a una moneda (pesos/dólares no se suman). */
.dash-moneda { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dash-moneda-lbl { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.dash-moneda-btn {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); transition: border-color .16s, color .16s, background .16s;
}
.dash-moneda-btn:hover { border-color: var(--green-600); color: var(--ink); }
.dash-moneda-btn.on { background: var(--green-600); border-color: var(--green-600); color: #fff; }

.stats.dash-kpis { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .stats.dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats.dash-kpis { grid-template-columns: 1fr; } }
/* Skeleton del dashboard (matchea el rework: 4 KPIs + tabs + barras + tabla). */
.skel-stats.skel-kpis4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .skel-stats.skel-kpis4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .skel-stats.skel-kpis4 { grid-template-columns: 1fr; } }
.skel-dash { padding: 16px 18px 18px; }
.skel-dash-tabs { display: flex; gap: 18px; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.skel-dtab { height: 14px; width: 90px; border-radius: 5px; }
.skel-dash-chart { display: flex; align-items: flex-end; gap: 10px; height: 172px; border-top: 1px dashed var(--line); padding-top: 8px; }
.skel-dcol { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.skel-dbar { width: 100%; max-width: 48px; border-radius: 6px 6px 3px 3px; }
.skel-dcol:nth-child(1) .skel-dbar { height: 20%; }
.skel-dcol:nth-child(2) .skel-dbar { height: 34%; }
.skel-dcol:nth-child(3) .skel-dbar { height: 26%; }
.skel-dcol:nth-child(4) .skel-dbar { height: 58%; }
.skel-dcol:nth-child(5) .skel-dbar { height: 82%; }
.skel-dcol:nth-child(6) .skel-dbar { height: 48%; }
.stat.gold { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); position: relative; overflow: hidden; }
.stat.gold::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gold); }
.stat.gold .ico { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.stat.green { border-color: color-mix(in srgb, var(--green-600) 40%, var(--line)); position: relative; overflow: hidden; }
.stat.green::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--green-600); }
.stat.green .ico { background: color-mix(in srgb, var(--green-600) 16%, transparent); color: var(--green-ink); }
.dash-trend { font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.dash-trend.up { color: var(--green-ink); }
.dash-trend.down { color: #d98a8a; }
.dash-trend.flat { color: var(--ink-4); }
.dash-tabs { display: flex; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dash-tab { appearance: none; background: none; border: 0; color: var(--ink-3); font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 13px 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; transition: color .18s; }
.dash-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc, var(--ink-4)); opacity: .5; transition: opacity .18s; }
.dash-tab:hover { color: var(--ink-2); }
.dash-tab.on { color: var(--ink); border-bottom-color: var(--dc, var(--green-600)); }
.dash-tab.on .dot { opacity: 1; }
.dash-tab:focus-visible { outline: 2px solid var(--green-600); outline-offset: -2px; border-radius: 4px; }
.dash-body { padding: 18px 18px 20px; }
.dash-summary { display: flex; align-items: flex-end; gap: 26px; margin-bottom: 24px; flex-wrap: wrap; }
.dash-summary .big { font-family: var(--mono); font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.dash-summary .big small { font-size: 18px; color: var(--ink-3); }
.dash-summary .big { line-height: 1.05; }
.dash-summary .cap { font-size: 12px; color: var(--ink-3); margin-top: 9px; }
.dash-summary .aside { text-align: right; }
.dash-summary .aside.first { margin-left: auto; }
.dash-summary .aside .n { font-family: var(--mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-summary .aside .l { font-size: 11px; color: var(--ink-4); }
/* Gráfico de barras: la ALTURA y el COLOR (--barc) se setean por JS (element.style),
   NO por style="" inline → compatible con el CSP (style-src 'self'). */
.dash-chart { display: flex; align-items: flex-end; gap: 10px; height: 172px; padding-top: 8px; border-top: 1px dashed var(--line); }
.dash-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 0; }
.dash-barwrap { width: 100%; max-width: 48px; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.dash-bar { width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--barc, var(--green-600)), color-mix(in srgb, var(--barc, var(--green-600)) 45%, transparent)); min-height: 3px; transition: height .5s cubic-bezier(.4, 0, .2, 1); }
.dash-bar.cur { outline: 2px solid color-mix(in srgb, var(--barc, var(--green-600)) 55%, transparent); outline-offset: 2px; }
.dash-col .ml { font-size: 11px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.dash-col .mv { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dash-col:hover .mv { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dash-bar { transition: none; } }
@media (max-width: 720px) { .dash-summary { gap: 16px; } .dash-chart { gap: 5px; } .dash-col .mv { display: none; } }

/* HISTORIAL (ficha + tabs de rol + saldo + subtabs + tabla). */
.skel-hist-title { height: 22px; width: 280px; border-radius: 6px; margin-bottom: 16px; }
.skel-hist-card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 16px; }
.skel-hist-card .sk-circle { width: 56px; height: 56px; }
.skel-hist-lines { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.skel-hist-lines > .skel { flex: none; height: 11px; border-radius: 5px; }
.skel-hist-lines > .skel:nth-child(1) { width: 40%; height: 15px; }
.skel-hist-lines > .skel:nth-child(2) { width: 55%; }
.skel-hist-lines > .skel:nth-child(3) { width: 30%; }
.skel-hist-row { display: flex; gap: 10px; margin-bottom: 14px; }
.skel-hist-row > .skel { flex: none; height: 38px; width: 130px; border-radius: 8px; }
.skel-hist-band { height: 74px; border-radius: 12px; margin-bottom: 16px; }
.skel-hist-subrow { display: flex; gap: 10px; margin-bottom: 12px; }
.skel-hist-subrow > .skel { flex: none; height: 30px; width: 150px; border-radius: 8px; }
.skel-hist-tablewrap { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
/* MODAL (campos de formulario/detalle que cargan async). */
.skel-modal-body { display: flex; flex-direction: column; gap: 16px; }
.skel-modal-field { display: flex; flex-direction: column; gap: 8px; }
.skel-modal-field > .skel { flex: none; border-radius: 5px; }
.skel-modal-field > .skel:nth-child(1) { height: 11px; width: 35%; }
.skel-modal-field > .skel:nth-child(2) { height: 40px; width: 100%; border-radius: 8px; }

.muted { color: var(--ink-3); font-size: .88rem; }
/* Deuda del cliente en la lista: roja cuando debe (al día va con .muted "—"). */
.cliente-deuda { color: var(--danger); font-weight: 600; font-variant-numeric: tabular-nums; }
.section-title { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); margin: 6px 0 4px; display: flex; align-items: center; gap: 12px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── Botones ────────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; font-family: var(--sans); letter-spacing: -.01em; transition: var(--transition); white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }

.btn-primary {
  color: #fff; border: none;
  background: linear-gradient(180deg, var(--green-500), var(--green-600));
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px rgba(35,110,67,.7);
  transition: transform .12s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 22px -8px rgba(35,110,67,.75); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
[data-theme="dark"] .btn-primary { background: linear-gradient(180deg, var(--green-500), var(--green-600)); box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 6px 16px -8px rgba(0,0,0,.6); }

.btn-secondary { color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface); }
.btn-secondary:hover:not(:disabled) { background: var(--ctrl-hover); border-color: var(--green-ink); color: var(--green-ink); }

.btn-danger { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: transparent; }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-warning { background: var(--gold); color: #11240f; border: none; }
.btn-warning:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 12px -6px var(--gold-glow); }

/* ── Data table — look FOLIO (variante A del mockup modales-listas) ──────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/* Header: mono mayúscula + hairline DORADA con glow tenue por debajo */
.data-table thead th {
  position: relative;
  text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 18px; background: var(--surface-2);
  border-bottom: 1px solid var(--gold); white-space: nowrap;
}
.data-table thead th::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
}
.data-table thead th.col-actions { text-align: right; }

/* Filas: tinte verde plano y continuo al hover + acento dorado a la izquierda.
   OJO: el acento NO va con ::before sobre el <tr> — eso genera una celda-tabla
   anónima y corre todas las columnas. Va como box-shadow inset en la 1ra celda. */
.data-table tbody td { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td {
  background: var(--row-hover);
  color: var(--ink);
}
.data-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* números/dinero/documento/teléfono en mono */
.data-table .num, .data-table .money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; }
.data-table .money.muted { color: var(--ink-4); font-weight: 500; }

/* Acciones de fila: mini-botones GHOST con ícono (hairline al reposo, dorado al hover) */
.data-table .col-actions { text-align: right; white-space: nowrap; }
.data-table .col-actions .btn,
.data-table .col-actions .btn-secondary,
.data-table .col-actions .btn-danger {
  height: 30px; padding: 0 11px; margin-left: 6px; gap: 6px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-2);
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.data-table .col-actions .btn i { font-size: 11px; opacity: .85; }
.data-table .col-actions .btn-secondary:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent);
}
.data-table .col-actions .btn-danger { color: var(--ink-2); }
.data-table .col-actions .btn-danger:hover {
  color: color-mix(in srgb, var(--danger) 35%, var(--ink));
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  box-shadow: none;
}
.data-table .col-actions .btn:active:not(:disabled) { transform: translateY(1px); }
.data-table .empty { text-align: center; color: var(--ink-3); padding: 8px; }

/* Footer: contador con N en dorado + pager prolijo con chevrons */
.table-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.table-info { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.table-info b, .table-info strong { color: var(--gold); font-weight: 500; }
.table-pager, .pager { display: flex; gap: 8px; }
.table-pager .btn, .pager .btn {
  height: 32px; padding: 0 13px; gap: 6px; font-size: 12px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-strong);
}
.table-pager .btn i, .pager .btn i { font-size: 9px; }
.table-pager .btn:hover:not(:disabled), .pager .btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}

/* ── Badges + 5 estados (reusa badge--prep/listo/prog/activo/cerrado de util.js) ── */
.badge {
  --c: var(--st-listo);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 9px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 82%, var(--ink));
  background: color-mix(in srgb, var(--c) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  border: none;
}
[data-theme="dark"] .badge { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.badge i { font-size: .82em; }

.badge--prep    { --c: var(--st-preparando); }
.badge--listo   { --c: var(--st-listo); }
.badge--prog    { --c: var(--st-programado); }
.badge--activo  { --c: var(--st-activo); }
.badge--cerrado { --c: var(--st-cerrado); }

/* Chip slate — Retiro en Boletas de Salida. Neutral sobre ambos temas via tokens. */
/* Utilidad de centrado (evita style="text-align:center" inline, que el CSP bloquea). */
.text-center { text-align: center; }
/* Salidas: estilos que antes iban inline (los bloqueaba el CSP style-src 'self'). */
.sl-kpi-meta { margin-top: 8px; }
.sl-kpi-chip { font-size: 11px; padding: 3px 9px; }
.sl-mot-cell { display: inline-flex; align-items: flex-start; gap: 8px; }
.sl-mot-badge { flex-shrink: 0; font-size: 11px; padding: 3px 9px; }
.sl-mot-txt { font-size: 12px; color: var(--ink-3); padding-top: 1px; }
.sl-chip--slate {
  --c: color-mix(in srgb, var(--ink-3) 80%, var(--surface));
  color: color-mix(in srgb, var(--ink-3) 90%, var(--ink));
  background: color-mix(in srgb, var(--ink-3) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-3) 28%, transparent);
}

/* ── Boletas de Salida · modal "Nueva salida" (multi-selección con cantidades) ── */
/* Datos de la salida (motivo + remitente): arriba, antes de elegir piezas. */
.sl-nueva .sl-datos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sl-nueva .sl-datos textarea { min-height: 60px; }
@media (max-width: 560px) { .sl-nueva .sl-datos { grid-template-columns: 1fr; } }

/* Buscador (matchea objeto o remitente en una sola lista). */
.sl-nueva .sl-buscar {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 13px; transition: var(--transition);
}
.sl-nueva .sl-buscar::placeholder { color: var(--ink-4); }
.sl-nueva .sl-buscar:focus { outline: none; border-color: var(--green-400); box-shadow: var(--ring); }

/* Lista de piezas — ALTO FIJO: la caja mide siempre lo mismo (no salta al buscar/paginar);
   scroll propio, encabezado pegajoso y gutter estable para que el scrollbar no corra el layout. */
.sl-nueva .sl-list {
  height: 336px; overflow-y: auto; scrollbar-gutter: stable;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sl-nueva .sl-hint { margin: 0; padding: 40px 16px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* Tabla de piezas seleccionables (encabezado pegajoso en el scroll de la lista). */
.sl-piezas-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.sl-piezas-tbl thead th {
  position: sticky; top: 0; z-index: 1; text-align: left; padding: 9px 12px;
  background: var(--surface-2); color: var(--ink-4);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
.sl-piezas-tbl tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.sl-piezas-tbl tbody tr:last-child td { border-bottom: none; }
.sl-piezas-tbl tbody tr:hover { background: var(--row-hover); }
.sl-piezas-tbl .sl-col-check { width: 34px; }
.sl-piezas-tbl .sl-col-num { width: 56px; text-align: right; font-family: var(--mono); color: var(--ink-3); }
.sl-piezas-tbl .sl-col-cant { width: 100px; }
.sl-piezas-tbl .sl-check { width: 17px; height: 17px; accent-color: var(--green-600); cursor: pointer; }
.sl-piezas-tbl .sl-obj-nom { font-weight: 600; color: var(--ink); }
.sl-piezas-tbl .sl-obj-id { font-size: 11.5px; }
.sl-piezas-tbl .sl-cant {
  width: 100%; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: var(--mono); text-align: center; font-size: 13px;
  transition: var(--transition);
}
.sl-piezas-tbl .sl-cant:disabled { opacity: .45; cursor: not-allowed; }
.sl-piezas-tbl .sl-cant:focus { outline: none; border-color: var(--green-400); box-shadow: var(--ring); }

/* Pie: paginador (izq) + contador de selección (der). Altura fija para no desplazar. */
.sl-nueva .sl-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px;
}
.sl-nueva .sl-pager { display: flex; align-items: center; gap: 10px; }
.sl-nueva .sl-pg {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer;
  background: var(--surface); color: var(--ink-2); transition: var(--transition);
}
.sl-nueva .sl-pg:hover:not(:disabled) { color: var(--ink); border-color: var(--green-400); }
.sl-nueva .sl-pg:disabled { opacity: .4; cursor: not-allowed; }
.sl-nueva .sl-pg-info { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sl-selc { font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* dot "en vivo" del estado Activo (badgeEstado lo inyecta para estado 3) */
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; animation: badgePulse 1.9s ease-out infinite; }
@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .badge-dot { animation: none; } }

/* ── Formularios / inputs / select (chevron propio) ─────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); }

/* Texto de ayuda bajo el label (opcional, minúsculas). */
.field-hint { font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.35; }

/* Checkbox con label a la derecha (toggle en una fila, no columna). */
.form-check .form-check-label { display: flex; flex-direction: row; align-items: center; gap: 9px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.form-check input[type="checkbox"] { width: 17px; height: 17px; flex: none; accent-color: var(--green-600); cursor: pointer; }
.form-group input, .form-group select, .form-group textarea {
  padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 13.5px; transition: var(--transition); width: 100%;
}
.form-group textarea { resize: vertical; min-height: 72px; }
.form-group select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7c6b' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
[data-theme="dark"] .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2393a89b' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}
.form-group input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--green-400); box-shadow: var(--ring); }
.form .req { color: var(--danger); }
.field-error { color: var(--danger); font-size: 11.5px; font-weight: 600; }
.confirm-body .confirm-msg { margin: 0; }
.confirm-body .confirm-detail { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.form-actions, .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.sena-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sena-modo { display: flex; gap: .25rem; }

/* ── Modal — look "DATA REFINADA" (variante B del mockup): sheet sobria
   Linear/Vercel, hairline dorada superior, cabecera con kicker mono, secciones
   por divisores sutiles, inputs con FOCO VERDE y footer claro ──────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(17,30,17,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.62); }
.modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px; max-height: min(90vh, 760px);
  display: flex; flex-direction: column; overflow: hidden;
}
/* Variante ancha: para modales con tablas o contenido que no entra en 480px. */
.modal.modal-wide { max-width: 720px; }
/* ════════════════════════════════════════════════════════════════════════════
   DARK · Modales "Variante C": panel MÁS CLARO (#222b26) y aireado. SOLO dark.
   Subir el panel obliga a re-derivar la ESCALA DE ELEVACIÓN local: las superficies
   internas usaban tokens pensados para un panel oscuro y, sobre #222b26, se invertían:
   - "elevadas" (footer, close, botón 2º, thead) iban con --surface-2 #1a241f →
     quedaban MÁS oscuras que el panel (se hundían) → suben a #2e3833.
   - "campos/pozos" (inputs, metric, selected, obs) iban con --bg #0b110e → agujeros
     negros sobre el panel claro → suben a #161e19 (pozo coherente, ~1 paso bajo el panel).
   En vez de ~20 selectores sueltos se re-mapean los TOKENS scopeados a .modal y las
   reglas existentes cascadean (incluye --ink-4: así la ✕ del close y el nº del step-dot
   pasan AA sobre lo elevado). Light mode intacto: TODO bajo [data-theme="dark"]. */
[data-theme="dark"] .modal {
  backdrop-filter: none;
  background: #222b26;                 /* panel elevado y aireado (variante C) */
  --bg: #161e19;                       /* pozo: inputs, metric, selected-item, obs-item (antes #0b110e = agujero negro) */
  --surface: #1c2521;                  /* nivel medio: foco de input, step-dot idle, lote-foto, inputs anidados */
  --surface-2: #2e3833;                /* elevado: footer, close, botón 2º, thead (antes #1a241f → se hundía bajo el panel) */
  --ctrl-hover: #36413b;               /* hover de controles, un paso sobre lo elevado */
  --row-hover: color-mix(in srgb, var(--green-400) 12%, #222b26);  /* hover de fila SOBRE el panel (antes oscurecía) */
  --line: rgba(255,255,255,.12);       /* divisores reforzados (el .08 se borraba sobre el panel claro) */
  --ink-4: #93a89b;                    /* tinta muted re-derivada → ✕ del close y nº del step-dot pasan AA */
}
/* Header: el velo verde 5% casi desaparece sobre el panel claro → 8%; divisor reforzado. */
[data-theme="dark"] .modal-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--green-400) 8%, transparent), transparent);
  border-bottom-color: rgba(180,210,195,.20);
}
/* Hairline dorada superior: el glow translúcido se diluye sobre fondo claro → más opacidad. */
[data-theme="dark"] .modal::before { opacity: .92; }
/* Campos con borde firme verdoso (gana al --line del modal). */
[data-theme="dark"] .modal .form-group input,
[data-theme="dark"] .modal .form-group select,
[data-theme="dark"] .modal .form-group textarea { border-color: var(--line-strong); }
/* Scrollbar del cuerpo: el thumb llevaba borde de --surface para fundirse; con el body
   en #222b26 el borde debe ser el panel, si no queda un halo oscuro alrededor del thumb. */
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb { border-color: #222b26; }
/* hairline dorada superior */
.modal::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-glow) 18%, var(--gold) 50%, var(--gold-glow) 82%, transparent);
  opacity: .8;
}

.modal-header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--green-400) 5%, transparent), transparent);
}
.modal-header-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* kicker mono opcional ("MORALES COLOMBO · REMATE") */
.modal-kicker {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-title { font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-close {
  margin-left: auto; flex: 0 0 auto;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-4); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: var(--transition);
}
.modal-close:hover { color: var(--ink); border-color: var(--line-strong); background: var(--ctrl-hover); }
.modal-body { flex: 1 1 auto; min-height: 0; padding: 24px; overflow-y: auto; }
/* scrollbar fino y discreto del cuerpo */
.modal-body { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--surface); background-clip: padding-box; }
/* Footer del form dentro del modal: pegado abajo, claro, con divisor; siempre
   visible mientras el cuerpo scrollea */
.modal .form-actions { position: sticky; bottom: -24px; margin: 18px -24px -24px; padding: 14px 24px; background: var(--surface-2); border-top: 1px solid var(--line); }

/* ── Forms DENTRO del modal: labels más sobrias (peso medio, sin grito) ─────── */
.modal .form-group label { font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: 11.5px; color: var(--ink-3); }
/* Más aire entre campos y secciones dentro del modal (look respirado). */
.modal-body .form { gap: 18px; }
.modal .form-group { gap: 7px; }
.modal-body .section-title { margin: 18px 0 12px; }
.modal-body > .form > .section-title:first-child,
.modal-body > .section-title:first-child { margin-top: 0; }
.modal .form-group input, .modal .form-group select, .modal .form-group textarea { background: var(--bg); border-color: var(--line); }
.modal .form-group input:hover, .modal .form-group select:hover, .modal .form-group textarea:hover { border-color: var(--line-strong); }
/* FOCO VERDE (anillo var(--green-glow)) — superficie levantada al enfocar */
.modal .form-group input:focus, .modal .form-group select:focus, .modal .form-group textarea:focus { border-color: var(--green-600); background: var(--surface); box-shadow: var(--ring); }

/* ── Botones DENTRO del modal (NO el .btn global de toda la app) ────────────── */
.modal .btn-secondary { background: var(--surface-2); }
.modal .btn-secondary:hover:not(:disabled) { background: var(--ctrl-hover); border-color: var(--line-strong); color: var(--ink); }

/* ── Modal de Saldo (cobro por cliente en un remate) ────────────────────────── */
.saldo-modal .saldo-info { font-size: 13px; margin: 0 0 14px; color: var(--ink-2); }
.saldo-modal .saldo-boletas td { vertical-align: middle; }
/* Con la columna Comisión son 7 columnas: no entran en los 720px del modal
   wide y aparecía scroll horizontal que tapaba los botones S/T. Se ensancha
   el modal y se compacta el padding para que la tabla entre completa. */
.modal:has(.saldo-modal) { max-width: 860px; }
.saldo-modal .saldo-boletas th,
.saldo-modal .saldo-boletas td { padding-left: 11px; padding-right: 11px; }
.saldo-modal .cobro-input { width: 110px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 13px; text-align: right; }
.saldo-modal .saldo-total { text-align: right; font-size: 14px; margin: 14px 0; color: var(--ink-2); }
.saldo-modal .saldo-total strong { color: var(--green-ink); font-size: 16px; }
[data-theme="dark"] .saldo-modal .saldo-total strong { color: var(--gold); }

/* ── Stepper (modal de estado del remate) ───────────────────────────────────── */
.estado-modal { display: flex; flex-direction: column; gap: 22px; }
.stepper { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 70px; text-align: center; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--surface); color: var(--ink-4); border: 1px solid var(--line-strong); transition: var(--transition); }
.step-label { font-size: 11.5px; letter-spacing: .02em; color: var(--ink-4); line-height: 1.2; }
.step-line { flex: 1 1 auto; min-width: 12px; height: 2px; background: var(--line); border-radius: 2px; margin-top: 15px; }
.step-line--done { background: var(--green-500); }
.step--done .step-dot { background: var(--listo-bg); color: var(--green-600); border-color: transparent; }
.step--current .step-dot { background: var(--green-600); color: #fff; border-color: var(--green-600); box-shadow: 0 0 0 4px var(--green-glow); }
.step--current .step-label { color: var(--ink); font-weight: 700; }
.estado-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.estado-actions .btn { width: 100%; }
/* Stepper vertical en móvil (no se corta) */
@media (max-width: 480px) {
  .stepper { flex-direction: column; align-items: stretch; overflow-x: visible; gap: 4px; }
  .step { flex-direction: row; gap: 12px; flex: none; text-align: left; }
  .step-label { font-size: .8rem; }
  .step-line { display: none; }
}

/* ── Toast ──────────────────────────────────────────────────────────────────── */
.toast-container { position: fixed; top: 22px; right: 22px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border-left: 3px solid var(--green-400); min-width: 240px; max-width: 360px; font-size: 13px; font-weight: 500; color: var(--ink); opacity: 0; transform: translateX(18px); transition: opacity .25s, transform .25s; }
.toast-show { opacity: 1; transform: translateX(0); }
.toast-ok { border-left-color: var(--green-400); } .toast-ok i { color: var(--green-400); }
.toast-error { border-left-color: var(--danger); } .toast-error i { color: var(--danger); }
.toast-info i { color: var(--green-ink); }

/* ── Welcome / dashboard fallback ───────────────────────────────────────────── */
.welcome { text-align: center; padding: 64px 20px; }
.welcome-icon { font-size: 3rem; color: var(--gold); margin-bottom: 18px; }
.welcome h2 { font-family: var(--sans); font-size: 1.7rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -.02em; }
.welcome p { color: var(--ink-3); font-size: .95rem; }

/* ── Dashboard — stat-cards + panel (markup nuevo en home.js) ───────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); cursor: default; transition: border-color .16s ease, box-shadow .16s ease; }
/* PROBLEMA 3: la KPI card NO es clickeable — hover honesto sin lift (border + sombra suave), cursor default */
.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-pop); }
.stat.accent { border-color: color-mix(in srgb, var(--green-400) 45%, var(--line)); }
.stat.accent::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--green-400), var(--green-600)); }
.stat .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stat .label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.stat .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: var(--green-600); background: var(--listo-bg); border: 1px solid color-mix(in srgb, var(--green-500) 22%, transparent); }
.stat .value { font-family: var(--mono); font-size: 34px; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .value small { font-size: 18px; font-weight: 600; color: var(--ink-3); }
.stat .trend { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 12px; font-weight: 600; }
.stat .trend.up { color: var(--green-500); }
.stat .trend .sub { color: var(--ink-4); font-weight: 500; }
@media (max-width: 980px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* Panel que envuelve la tabla del dashboard (estilo mockup .panel) */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.panel-head .sub { font-size: 12.5px; color: var(--ink-4); font-weight: 500; }
.panel-head .actions { margin-left: auto; display: flex; gap: 8px; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.panel-foot .info { font-size: 12.5px; color: var(--ink-4); font-weight: 500; }
.panel-foot a { font-size: 13px; font-weight: 600; color: var(--green-600); display: inline-flex; align-items: center; gap: 6px; transition: color .14s ease; }
.panel-foot a i { transition: transform .14s var(--smooth); }
[data-theme="dark"] .panel-foot a { color: var(--green-ink); }
/* CTA de pie de panel ("Ver todos los remates"): hover crisp — shift de color + flecha que avanza */
.panel-foot a:hover { color: var(--green-500); text-decoration: none; }
.panel-foot a:hover i { transform: translateX(3px); }
[data-theme="dark"] .panel-foot a:hover { color: color-mix(in srgb, var(--green-ink) 82%, #fff); }

/* ── Atajos (dashboard) — grilla de accesos directos a acciones frecuentes ──── */
.shortcuts-panel { margin-bottom: 24px; }
.shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px 20px; }
.shortcut { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; }
.shortcut:hover { border-color: color-mix(in srgb, var(--green-500) 45%, var(--line)); box-shadow: var(--shadow-pop); transform: translateY(-2px); text-decoration: none; background: var(--surface); }
.shortcut .sc-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: var(--green-600); background: var(--listo-bg); border: 1px solid color-mix(in srgb, var(--green-500) 22%, transparent); transition: background .16s ease, color .16s ease; }
.shortcut:hover .sc-ico { background: linear-gradient(150deg, var(--green-500), var(--green-600)); color: #fff; border-color: transparent; }
.shortcut .sc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shortcut .sc-text b { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.shortcut .sc-text small { font-size: 11.5px; color: var(--ink-4); font-weight: 500; }
.shortcut .sc-arrow { margin-left: auto; font-size: 12px; color: var(--ink-4); transition: transform .16s var(--smooth), color .16s ease; }
.shortcut:hover .sc-arrow { color: var(--green-600); transform: translateX(3px); }
[data-theme="dark"] .shortcut .sc-ico { color: var(--green-ink); }
/* En dark el dorado (#d8b878) sí es limpio → se mantiene el pop dorado en hover;
   en light queda verde (el ocre #c4993a se veía muddy). */
[data-theme="dark"] .shortcut:hover .sc-ico { background: linear-gradient(150deg, var(--gold), var(--gold-2)); color: #11240f; }
[data-theme="dark"] .shortcut:hover .sc-arrow { color: var(--gold); }
@media (max-width: 980px) { .shortcuts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shortcuts { grid-template-columns: 1fr; } }

/* ── Auth (login) — dos paneles: paño verde + formulario ────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 64px 56px; color: #f3efe3;
  background: radial-gradient(900px 520px at 18% 0%, var(--gold-glow), transparent 60%), linear-gradient(155deg, #0c1a0c, #111e11 55%, #0a120a); }
.auth-brand::before { content: ''; position: absolute; inset: 22px; border: 1px solid rgba(196,153,58,.26); border-radius: 6px; pointer-events: none; }
.auth-brand-inner { position: relative; z-index: 2; animation: fadeUp .7s var(--ease) both; }
.auth-mark { width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; font-size: 1.5rem; color: #11240f; background: linear-gradient(150deg, var(--gold), var(--gold-2)); box-shadow: 0 10px 26px rgba(0,0,0,.32); margin-bottom: 30px; }
.auth-logo-card { display: inline-flex; padding: 20px 26px; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(196,153,58,.25); margin-bottom: 26px; }
.auth-logo { display: block; width: 210px; max-width: 58vw; height: auto; }
.auth-wordmark { font-family: var(--sans); font-weight: 800; font-size: 3rem; line-height: .98; letter-spacing: -.03em; }
.auth-tag { font-family: var(--sans); font-size: 1.1rem; color: #d8c39a; margin-top: 16px; font-weight: 500; }
.auth-estab { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(196,153,58,.85); margin-top: 22px; }
.auth-flourish { position: absolute; right: -34px; bottom: -36px; font-size: 16rem; color: rgba(196,153,58,.07); transform: rotate(-14deg); z-index: 1; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 28px; background: var(--surface); }
.auth-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; animation: fadeUp .6s var(--ease) .08s both;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow-pop); }
[data-theme="dark"] .auth-form { background: var(--surface-2); box-shadow: var(--shadow-lg); }
.auth-form-head h2 { font-family: var(--sans); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.auth-form-head p { color: var(--ink-3); font-size: .9rem; margin: 4px 0 8px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); }
.auth-field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: .95rem; background: var(--surface); color: var(--ink); transition: var(--transition); }
.auth-field input:focus { outline: none; border-color: var(--green-400); background: var(--surface); box-shadow: var(--ring); }
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: none; border-radius: 8px; color: var(--ink-4); cursor: pointer; transition: var(--transition); }
.pw-toggle:hover { color: var(--green-ink); background: var(--ctrl-hover); }
.auth-submit { width: 100%; padding: 13px; font-size: .95rem; margin-top: 6px; height: auto; }
.auth-error { background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); padding: 10px 14px; border-radius: var(--radius-sm); font-size: .85rem; }

@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 36px 30px; min-height: 210px; justify-content: flex-end; }
  .auth-brand::before { inset: 14px; }
  .auth-mark { width: 50px; height: 50px; font-size: 1.25rem; margin-bottom: 18px; }
  .auth-wordmark { font-size: 2.2rem; }
  .auth-tag { font-size: 1rem; }
  .auth-flourish { font-size: 9rem; right: -16px; bottom: -8px; }
}

/* ── Stock: galería de objetos ──────────────────────────────────────────────── */
.obj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
/* Encabezado de sección (Disponibles / Agotados) en "Todos": ocupa todo el ancho de la grilla. */
.obj-group-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 10px 2px 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.obj-group-h:first-child { margin-top: 0; }
.obj-group-h .obj-group-n { flex: none; font-weight: 600; color: var(--ink-4); }
.obj-group-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.obj-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: var(--transition); }
.obj-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); border-color: var(--line-strong); }
.obj-photo-btn { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; }
.obj-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.obj-photo--empty { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-4); }
.obj-photo--empty i { font-size: 2.4rem; color: var(--line-strong); }
.obj-photo-cta { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(17,30,17,.78)); opacity: 0; transform: translateY(6px); transition: var(--transition); }
.obj-photo-btn:hover .obj-photo-cta, .obj-photo-btn:focus-visible .obj-photo-cta { opacity: 1; transform: translateY(0); }
.obj-photo--empty + .obj-photo-cta { opacity: 1; transform: none; background: none; color: var(--green-ink); }
/* Miniatura del objeto en el detalle de la boleta de entrada (por clase: el CSP
   bloquea el style inline). */
.be-obj-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; border: 1px solid var(--line); }
/* Valor estimado como rango (Desde / Hasta) en el alta/edición de objeto. */
.objeto-valor-rango { display: flex; gap: 8px; }
.objeto-valor-rango input { flex: 1; min-width: 0; }
/* Barra de acciones del detalle de la boleta de entrada (botón Imprimir/PDF). */
.be-detalle-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.obj-remove { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border: none; border-radius: 50%; background: color-mix(in srgb, var(--surface) 92%, var(--bg)); backdrop-filter: blur(4px); color: var(--danger); cursor: pointer; box-shadow: var(--shadow-card); opacity: 0; transition: var(--transition); }
.obj-card:hover .obj-remove, .obj-remove:focus-visible { opacity: 1; }
.obj-remove:hover { background: var(--danger); color: #fff; }
.obj-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.obj-name { font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.obj-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.obj-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.obj-val { font-family: var(--mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--green-ink); }
[data-theme="dark"] .obj-val { color: var(--gold); }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; background: var(--listo-bg); color: var(--green-600); border: 1px solid color-mix(in srgb, var(--green-500) 25%, transparent); }
[data-theme="dark"] .chip { color: var(--st-listo); }
.chip--out { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* Venta anulada: badge propio + fila atenuada con el monto tachado, para que se
   lea de un vistazo que esa fila NO cuenta (sigue visible: la exige el municipal). */
.badge--anulada { --c: var(--danger); }
.vt-fila-anulada td { opacity: .5; }
.vt-fila-anulada .vt-money { text-decoration: line-through; }
.vt-fila-anulada .badge--anulada { opacity: 1; }

/* Traza del objeto: en qué remate/lote están sus unidades comprometidas. */
.obj-trazas { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.obj-traza { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.obj-traza i { font-size: 10px; margin-right: 4px; color: var(--green-600); }
[data-theme="dark"] .obj-traza i { color: var(--gold); }
.obj-traza b { color: var(--ink-2); font-weight: 600; }

/* Chips de filtro (clickeables, con estado activo) — p. ej. estado en Remates */
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); cursor: pointer; transition: background-color .14s ease, color .14s ease, border-color .14s ease; }
.filter-chip:hover { border-color: var(--green-ink); color: var(--green-ink); }
.filter-chip.is-active { background: var(--green-600); color: #fff; border-color: var(--green-600); }
[data-theme="dark"] .filter-chip.is-active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }

/* ── Empty state + paginador ────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--ink-3); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); animation: popIn .4s var(--ease) both; }
.data-table .empty-state { border: none; background: none; padding: 40px 16px; }
.empty-state i { font-size: 2.4rem; color: var(--ink-4); }
.empty-state h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.empty-state p { font-size: 12.5px; margin-bottom: 16px; }
.pager { align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.pager-info { font-size: 12.5px; color: var(--ink-4); }

/* ── Ventas: layout main+aside, saldos, progress, captions ──────────────────── */
.toolbar-field { margin: 0; min-width: 200px; }
/* Filtro compacto (selects de pocas opciones, p.ej. perfil/estado en Usuarios) */
.toolbar-field--sm { min-width: 140px; flex: 0 0 auto; }
.toolbar-field > label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
/* ════════ Ventas / Boleta de Pista — KPIs + pestañas (rediseño) ════════ */
/* Tira de KPIs (siempre visible) */
.vt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 20px; }
.vt-kpi { background: var(--surface); padding: 16px 18px; }
.vt-kpi--accent { background: var(--surface-2); }
.vt-kpi .k-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vt-kpi .k-ico { width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--green-ink); font-size: 13px; }
.vt-kpi--amber .k-ico { color: var(--gold); }
.vt-kpi .k-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.vt-kpi .k-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.vt-kpi .k-val small { font-size: 14px; color: var(--ink-4); font-weight: 500; }
.vt-kpi--amber .k-val { color: var(--gold); }
.vt-kpi .k-meta { margin-top: 8px; font-size: 12px; color: var(--ink-4); }
.vt-kpi .k-meta b { font-family: var(--mono); color: var(--ink-2); font-weight: 500; }

/* Barra de control: segmented + filtro */
.vt-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.vt-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; padding: 4px; gap: 2px; box-shadow: var(--shadow-card); position: relative; }
.vt-seg button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; background: transparent; border-radius: 8px; padding: 8px 15px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: color .18s; position: relative; z-index: 1; }
.vt-seg button i { font-size: 13px; opacity: .85; }
.vt-seg button .seg-count { font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-4); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.vt-seg button:hover { color: var(--ink-2); }
.vt-seg button.on { color: var(--on-green); }
.vt-seg button.on .seg-count { background: rgba(255,255,255,.2); color: var(--on-green); border-color: rgba(255,255,255,.25); }
.vt-seg .vt-glider { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 8px; background: var(--green-600); box-shadow: 0 1px 3px rgba(17,68,13,.3); transition: transform .3s var(--smooth), width .3s var(--smooth); z-index: 0; }

/* Paneles (una pestaña a la vez) */
.vt-tabpanel { display: none; }
.vt-tabpanel.on { display: block; animation: vt-rise .35s var(--smooth) both; }
@keyframes vt-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Sub-tabs anidadas (dentro de un .vt-tabpanel) — mismo swap que las tabs principales. */
.vt-subpanel { display: none; }
.vt-subpanel.on { display: block; animation: vt-rise .3s var(--smooth) both; }
/* Barra del sub-seg: alineado a la IZQUIERDA (convención del proyecto). */
.vt-subseg-bar { display: flex; justify-content: flex-start; padding: 0 20px; border-bottom: 1px solid var(--line); }
.vt-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
/* Identidad por rol (Comprador/Vendedor): borde superior de color + tinte ambiental
   + marca de agua GRANDE, para saber en qué vista estás SIN leer. Dorado = Comprador
   (paga) · verde = Vendedor (cobra). Colores por tema (--rc) para que se vea bien en
   claro Y oscuro. Todo detrás del contenido (border + capas de background). */
.vt-panel.role-comprador { --rc: #a87d2a; }
.vt-panel.role-vendedor  { --rc: #1e8048; }
[data-theme="dark"] .vt-panel.role-comprador { --rc: #d8b878; }
[data-theme="dark"] .vt-panel.role-vendedor  { --rc: #56c98a; }

.vt-panel.role-comprador, .vt-panel.role-vendedor {
  border-top: 4px solid var(--rc);
  background: var(--surface);
}
.vt-panel .table-wrap { border: none; border-radius: 0; box-shadow: none; }
/* Diferenciador FUERTE por rol: el recuadro del SALDO (banda grande y prominente) se
   tiñe entero del color del rol → inconfundible de un vistazo. Usa --rc (por tema). */
.vt-panel.role-comprador .hist-saldo-head, .vt-panel.role-vendedor .hist-saldo-head {
  background: color-mix(in srgb, var(--rc) 16%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--rc) 44%, var(--line));
}
.vt-panel.role-comprador .hist-saldo-ico, .vt-panel.role-vendedor .hist-saldo-ico {
  background: color-mix(in srgb, var(--rc) 24%, var(--surface));
  border-color: color-mix(in srgb, var(--rc) 50%, transparent);
  color: var(--rc);
}
.vt-panel.role-comprador .hist-saldo-val, .vt-panel.role-vendedor .hist-saldo-val { color: var(--rc); }
.vt-panel.role-comprador .hist-saldo-label, .vt-panel.role-vendedor .hist-saldo-label {
  color: color-mix(in srgb, var(--rc) 66%, var(--ink-2));
}
/* Sub-tabs (Cuenta corriente / Cierre): el SUBRAYADO del activo toma el color del rol
   (dorado Comprador / verde Vendedor). Van dentro del panel → heredan --rc. */
.vt-panel.role-comprador .vt-subseg button.on, .vt-panel.role-vendedor .vt-subseg button.on {
  color: var(--rc);
}
.vt-panel.role-comprador .vt-subseg button.on .seg-count,
.vt-panel.role-vendedor .vt-subseg button.on .seg-count { color: var(--rc); }
/* Tab principal activa: cuando Comprador está activo, el glider (píldora) se vuelve
   DORADO con texto oscuro. Vendedor queda verde (default). El seg vive fuera del panel,
   así que uso :has() para saber qué tab está seleccionada. */
#hist-seg:has(button[data-tab="comprador"].on) .vt-glider {
  background: var(--gold); box-shadow: 0 1px 3px rgba(140,100,20,.35);
}
#hist-seg:has(button[data-tab="comprador"].on) button.on { color: #1a140a; }
#hist-seg:has(button[data-tab="comprador"].on) button.on .seg-count {
  background: rgba(0,0,0,.14); color: #1a140a; border-color: rgba(0,0,0,.18);
}
/* El glider principal ya desliza (transform/width); sumo background para que el cambio
   de color dorado↔verde al cambiar de rol también anime. */
#hist-seg .vt-glider { transition: transform .3s var(--smooth), width .3s var(--smooth), background .3s var(--smooth); }
.vt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.vt-panel-head h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.vt-panel-head .ph-sub { font-size: 12.5px; color: var(--ink-4); font-weight: 400; }
.vt-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--ink-3); }
.vt-panel-foot b { font-family: var(--mono); color: var(--ink); font-weight: 600; }

/* Celdas del rediseño */
.vt-buyer { display: flex; align-items: center; gap: 10px; }
.vt-av { width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(150deg, var(--green-500), var(--green-700)); }
.vt-buyer b { font-weight: 600; color: var(--ink); font-size: 14px; }
.vt-buyer small { display: block; color: var(--ink-4); font-size: 11.5px; }
.vt-lote { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.vt-lote .hash { font-family: var(--mono); font-size: 12px; color: var(--green-ink); background: var(--green-light); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 7px; }
.vt-money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--ink); }
.vt-num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.vt-num.saldo { color: var(--gold); font-weight: 600; }
.vt-cobrar { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; padding: 7px 14px; border: 1px solid var(--gold-2); background: var(--gold); color: #11240f; transition: var(--transition); }
.vt-cobrar:hover { background: var(--gold-2); }
.vt-atday { font-size: 12.5px; color: var(--green-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.vt-cobrar i { font-size: 12px; }
.vt-acciones { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.vt-liquidar { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; padding: 7px 14px; border: 1px solid var(--border); background: transparent; color: var(--ink); transition: var(--transition); }
.vt-liquidar:hover { border-color: var(--gold-2); color: var(--gold-2); }
.vt-liquidar i { font-size: 12px; }
.vt-liquidado { font-size: 12.5px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* Combobox de cliente (Boleta de Pista): dropdown propio, estilado e integrado al
   tema (reemplaza el datalist nativo, que flotaba aparte y sin estilo). */
.vt-combo { position: relative; }
.vt-combo-list {
  list-style: none; margin: 0; padding: 5px;
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 50;
  max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.vt-combo-list[hidden] { display: none; }
.vt-combo-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: background-color .12s ease, color .12s ease;
}
.vt-combo-list li:hover,
.vt-combo-list li.active { background: var(--surface-2); color: var(--ink); }
.vt-combo-list .vt-av { width: 26px; height: 26px; min-width: 26px; font-size: 10.5px; }
.vt-combo-list .combo-empty {
  cursor: default; color: var(--ink-4); justify-content: center;
  font-style: italic; font-weight: 400;
}
.vt-combo-list .combo-empty:hover { background: transparent; color: var(--ink-4); }

/* Alta de cliente inline en el form de venta (Boleta de Pista): fila selector +
   botón "Nuevo", y panel plegable con los campos mínimos del cliente. */
.vta-comprador-row { display: flex; gap: 8px; align-items: flex-end; }
.vta-comprador-row .form-group { flex: 1; min-width: 0; }
.vta-facturar-row { display: flex; gap: 8px; align-items: center; }
.vta-facturar-row select { flex: 1; min-width: 0; }
.vta-facturar-row .btn { flex: none; }
.vta-facturar-row select[hidden] { display: none; }
.vta-ne-panel { margin-top: 10px; }
.vta-nc-panel {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-2);
}
.vta-nc-panel[hidden] { display: none; }
.vta-nc-titulo { margin: 0; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.vta-nc-acciones { display: flex; justify-content: flex-end; gap: 8px; }

/* Panel "Saldos por lote" — SIEMPRE visible (no es pestaña): el inventario de avance
   del remate. Tabla con estado + barra de avance contenida + footer con el resumen. */
.vt-kpis--3 { grid-template-columns: repeat(3, 1fr); }
/* KPIs de Boleta de Pista compactos (eran innecesariamente altos). */
.vt-kpis--3 .vt-kpi { padding: 10px 16px; }
.vt-kpis--3 .vt-kpi .k-top { margin-bottom: 5px; }
.vt-kpis--3 .vt-kpi .k-ico { width: 25px; height: 25px; }
.vt-kpis--3 .vt-kpi .k-val { font-size: 20px; }
.vt-kpis--3 .vt-kpi .k-val small { font-size: 12px; }
.vt-kpis--3 .vt-kpi .k-meta { margin-top: 3px; font-size: 11.5px; }
/* La tabla de Saldos ahora va al pie (debajo de Ventas): sin margen inferior extra. */
.vt-saldos { margin-top: 18px; margin-bottom: 0; }
.vt-saldos .vt-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vt-saldos .vt-panel-head h2 { display: flex; align-items: center; gap: 9px; }
.vt-saldos .vt-panel-head h2 i { color: var(--gold); font-size: 14px; }
.vt-saldos .th-r, .vt-saldos .td-r { text-align: right; }
.vt-saldos .th-c, .vt-saldos .td-c { text-align: center; }
.sl-head-tot { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.sl-head-tot > div { text-align: right; }
.sl-tot-lab { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.sl-tot-val { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.sl-tot-val--gold { color: var(--gold); }
.sl-tot-sep { width: 1px; height: 32px; background: var(--line-strong); }
.sl-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; color: var(--ink-2); letter-spacing: -.02em; }
.sl-num--ok { color: var(--green-ink); }
.sl-saldo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: var(--gold); letter-spacing: -.02em; }
.sl-saldo--zero { color: var(--ink-4); font-weight: 500; font-size: 13.5px; }
.sl-prog { display: flex; align-items: center; gap: 9px; }
.sl-bar-wrap { width: 120px; flex: none; }
.sl-bar-wrap .progress { height: 6px; background: var(--line-strong); border-radius: 99px; overflow: hidden; }
.sl-bar-wrap .progress-bar { height: 100%; border-radius: 99px; transition: width .5s var(--smooth); }
.sl-bar--parcial { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 75%, var(--green-700)), var(--gold)); }
.sl-bar--casi { background: linear-gradient(90deg, var(--green-600), var(--green-400)); }
.sl-pct { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink-3); flex: none; min-width: 30px; }
.sl-foot { display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap; }
.sl-foot span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-4); }
.sl-foot span i { font-size: 11px; }
.sl-foot b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sl-foot-ok i, .sl-foot-ok b { color: var(--green-ink); }
.sl-foot-alert i, .sl-foot-alert b { color: var(--gold); }

/* Avatares con variación de color por comprador */
.vt-av--1 { background: linear-gradient(150deg, var(--green-400), var(--green-700)); }
.vt-av--2 { background: linear-gradient(150deg, #4a7fb0, #2f5a86); }
.vt-av--3 { background: linear-gradient(150deg, #c39a4a, #9a6b16); }
.vt-av--4 { background: linear-gradient(150deg, #9b6fb0, #6e3a86); }
/* Alineación derecha en celdas numéricas del rediseño */
.vt-panel td.vt-r, .vt-panel th.vt-r { text-align: right; }
/* Donut del KPI % vendido */
.vt-kpi { position: relative; overflow: hidden; }
.vt-donut { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green-500) calc(var(--p, 0) * 1%), var(--line-strong) 0); }
.vt-donut::after { content: ""; position: absolute; width: 37px; height: 37px; border-radius: 50%; background: var(--surface); }
.vt-donut span { position: relative; z-index: 1; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--green-ink); }

/* KPI Saldo clickeable (Historial · Cuenta corriente): toggle que filtra la tabla
   a remates con deuda. Pista de que es clickeable + realce dorado cuando está activo.
   El realce usa box-shadow inset (no exterior) porque .vt-kpi tiene overflow:hidden. */
.vt-kpi--clickable { cursor: pointer; transition: background-color .16s ease, box-shadow .16s ease; }
.vt-kpi--clickable:hover { background: var(--surface-2); }
.vt-kpi--clickable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.vt-kpi--clickable .k-meta i { margin-right: 4px; color: var(--gold); font-size: 10px; }
.vt-kpi--clickable.is-on { background: var(--gold-glow); box-shadow: inset 0 0 0 2px var(--gold); }
.vt-kpi--clickable.is-on .k-meta { color: var(--gold); font-weight: 600; }
.section-title { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; }
.table-caption { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.table-caption strong, .table-caption b { color: var(--green-ink); font-weight: 700; }
.table-caption--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.empty-state--compact { padding: 28px 18px; }

/* Historial de cliente: separación entre secciones (consignaciones/compras/retiros) */
.hist-sec { margin-top: 26px; }
.hist-sec .section-title .muted { font-weight: 400; }
.empty-state--compact i { font-size: 1.8rem; }
.empty-state--compact h3 { font-size: 13.5px; margin: 10px 0 4px; }
.empty-state--compact p { font-size: 12px; margin-bottom: 0; }
.progress { height: 7px; border-radius: var(--radius-pill); background: var(--line-strong); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--green-600), var(--green-400)); transition: width .3s var(--smooth); }
.progress-label { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); font-family: var(--mono); }
@media (max-width: 920px) { .vt-kpis { grid-template-columns: repeat(2, 1fr); } }
/* La tira de pestañas (Todos / Preparando / Listo / …) no entra en un celular y
   es lo que estiraba la página entera: acá scrollea DENTRO de su propio ancho.
   El glider es absolute y viaja con el scroll, así que sigue marcando bien. */
@media (max-width: 768px) {
  .vt-controls { flex-wrap: wrap; }
  .vt-controls > * { min-width: 0; max-width: 100%; }
  .vt-seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .vt-seg::-webkit-scrollbar { display: none; }
  .vt-seg button { flex: none; }
}

/* Preview de cierre de remate: resumen en mini-cards (look refinado) */
.cierre-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 10px; margin-bottom: 14px; }
.metric { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.metric::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--green-400), var(--green-700)); opacity: .55; }
.metric-label { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.metric-value { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cierre-aviso { margin: 0 0 14px; }

/* ── Liquidación en el modal de cierre ──────────────────────────────────────── */
.cierre-liq { margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.cierre-liq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cierre-liq-head h3 { margin: 0; font-size: 15px; }
.cierre-liq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cierre-liq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cierre-liq-col h4 { margin: 0 0 6px; font-size: 13px; }
.cierre-liq-col table { width: 100%; }
@media (max-width: 640px) { .cierre-liq-cols { grid-template-columns: 1fr; } }

/* ── Cierre compacto: tira de resumen + boletas colapsables ────────────────── */
/* Ancho amplio: la pestaña Compradores completa (con comisiones editables) entra
   cómoda. Se acota al viewport para no desbordar en pantallas chicas. */
.modal:has(.cierre-preview) { max-width: min(96vw, 1000px); }
/* Tira de resumen: reemplaza las 5 tarjetas KPI por una línea escaneable. */
.cierre-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-size: 12.5px; color: var(--ink-3); }
.cierre-strip b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cierre-strip-x { color: var(--line-strong); }
/* Boletas colapsables: el detalle no compite con la liquidación. */
.cierre-acc { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.cierre-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cierre-acc > summary::-webkit-details-marker { display: none; }
.cierre-acc > summary:focus-visible { box-shadow: var(--ring); border-radius: var(--radius-sm); }
.cierre-acc-chev { font-size: 11px; color: var(--ink-3); transition: transform .2s var(--smooth); }
.cierre-acc[open] .cierre-acc-chev { transform: rotate(90deg); }
.cierre-acc #cierre-boletas { padding: 0 14px 12px; }
/* La liquidación ahora lidera: sin margen superior extra. */
.cierre-liq { margin: 0; }
/* Comisiones por comprador: dos inputs editables (compr/vend) + impuesto solo-lectura. */
.comis { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.comis-pair { display: flex; align-items: center; gap: 10px; }
.comis-row { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.comis-input { width: 58px; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* Ajuste del lado vendedor: tabla compacta dentro del modal (6 columnas con
   inputs). Sin esto entra en scroll horizontal aunque el modal sea wide. */
.aj-tabla { table-layout: auto; font-size: 13px; }
/* Especificidad extra: .data-table thead th define su propio padding y gana por
   orden; acá se necesita más compacto para que las 6 columnas entren sin scroll. */
.data-table.aj-tabla thead th,
.data-table.aj-tabla tbody td { padding: 8px 6px; white-space: nowrap; }
.aj-tabla .aj-monto { width: 92px; }
.aj-tabla .aj-pct { width: 62px; }
.aj-tabla small.muted { display: block; font-size: 10.5px; line-height: 1.2; }
.aj-nota { margin: 0 0 14px; }
.comis-input:focus { border-color: var(--green-600); background: var(--surface); box-shadow: var(--ring); outline: none; }
.comis-ro { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.comis-ro b { font-variant-numeric: tabular-nums; }
.comis-imp { font-size: 10.5px; }

/* ── Modal de cierre: filas más compactas y prolijas ─────────────────────────── */
/* Todo centrado verticalmente para que las celdas cortas (plata) no floten arriba. */
.modal:has(.cierre-preview) .cierre-liq td,
.modal:has(.cierre-preview) .cierre-liq th { vertical-align: middle; }
.modal:has(.cierre-preview) .cierre-liq tbody td { padding-top: 9px; padding-bottom: 9px; }
/* Comisiones: más finas y juntas para no estirar la fila. */
.cierre-liq .comis { gap: 3px; }
.cierre-liq .comis-row { font-size: 10.5px; gap: 4px; }
.cierre-liq .comis-input { width: 50px; padding: 2px 5px; font-size: 11.5px; }
.cierre-liq .comis-imp { font-size: 10px; }
/* Acciones en UNA línea: botones chicos + "Liquidado" como check compacto (el
   texto se oculta, queda el ícono con su tooltip). Evita el salto a 2 filas. */
.cierre-liq .vt-acciones { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 5px; white-space: nowrap; }
.cierre-liq .vt-cobrar, .cierre-liq .vt-liquidar { font-size: 11px; padding: 5px 9px; }
.cierre-liq .vt-cobrar i, .cierre-liq .vt-liquidar i { font-size: 10px; }
.cierre-liq .vt-liquidado { font-size: 0; padding: 5px 7px; gap: 0; }
.cierre-liq .vt-liquidado i { font-size: 13px; }
.cierre-liq .comis-pair { gap: 8px; }
/* Imprimir solo-ícono (botón cuadrado). */
.cierre-liq .vt-liquidar.vt-icono { padding: 5px 8px; }
.cierre-liq .vt-liquidar.vt-icono i { font-size: 12px; }
/* Sin avatar del comprador en el cierre: solo el nombre. */
.cierre-liq .vt-buyer .vt-av { display: none; }
.cierre-liq .vt-buyer { gap: 0; }
.print-boleta .pb-bloque { font-size: 13pt; margin: 18px 0 6px; }

/* ── Sección / filas de objetos / lotes ─────────────────────────────────────── */
.objeto-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.objeto-row input[name="nombre"] { flex: 1 1 100%; }
.objeto-row input[name="cantidad"] { flex: 1 1 70px; min-width: 0; }
.objeto-row input[name="valor_esperado"] { flex: 1 1 90px; min-width: 0; }
.objeto-row > button { flex: 0 0 auto; }
.objeto-row input { padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--ink); }
.objeto-row input:focus { outline: none; border-color: var(--green-400); box-shadow: var(--ring); }
.objeto-foto { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-3); cursor: pointer; overflow: hidden; transition: var(--transition); }
.objeto-foto:hover { border-color: var(--green-ink); color: var(--green-ink); background: var(--ctrl-hover); }
.objeto-foto.has-img { border-style: solid; }
.objeto-foto.has-img > i { display: none; }
.objeto-foto-preview { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .objeto-row > input { flex: 1 1 100%; } }

.lotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px 40px; align-items: start; justify-items: center; }
/* Modo arrastre: apaga transiciones/hover de las otras cards (evita el jank de fotos
   que hacen zoom y barras que aparecen al pasar el cursor durante el reflow).
   is-busy bloquea interacción mientras se persiste el nuevo orden. */
.lotes-grid.is-dragging .lote-card:not(.dragging) * { transition: none !important; pointer-events: none; }
.lotes-grid.is-busy { pointer-events: none; opacity: .6; }

/* ── Reordenar lotes (enfoque B): lista vertical 1D, drag estable ───────────── */
.demo-badge { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); border-radius: var(--radius-pill);
  padding: 3px 9px; vertical-align: middle; margin-left: 10px; }
.reorder-panel { max-width: 560px; margin-top: 18px; }
.lote-reorder { padding: 12px; display: flex; flex-direction: column; gap: 8px; user-select: none; }
.lote-reorder-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: grab; transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.lote-reorder-row:hover { border-color: var(--line-strong); }
.lote-reorder-row.dragging { cursor: grabbing; border-style: dashed; border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface-2)); box-shadow: 0 0 0 3px var(--gold-glow); }
.lote-reorder-row.dragging > * { opacity: .35; } /* placeholder = slot limpio (sin doble texto con el ghost) */
.lr-grip { flex: none; color: var(--ink-4); font-size: 17px; line-height: 1; letter-spacing: -3px; cursor: grab; }
.lote-reorder-row:hover .lr-grip { color: var(--gold); }
.lr-folio { flex: none; width: 34px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--gold); }
.lr-ttl { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-ttl small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-4); }
.lote-reorder-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--line); }
.lote-reorder-foot .muted { font-size: 12px; }
/* Dentro de un modal la lista usa el padding del cuerpo (no doble). */
.modal-body .lote-reorder { padding: 2px 0 0; }
.reorder-hint { margin: -2px 0 14px; }
/* Demo a escala (muchos lotes): buscador, lista scrolleable, "mover a #", flash. */
.reorder-tools { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.reorder-search { flex: 1; position: relative; display: flex; align-items: center; }
.reorder-search > i { position: absolute; left: 12px; color: var(--ink-4); font-size: 12px; pointer-events: none; }
.reorder-search input { width: 100%; padding: 9px 12px 9px 32px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); font: inherit; font-size: 13px; }
.reorder-search input:focus { outline: none; border-color: var(--green-600); box-shadow: var(--ring); }
.reorder-count { flex: none; font-size: 12px; white-space: nowrap; }
.lote-reorder--scroll { max-height: 52vh; overflow-y: auto; }
.lr-jump { cursor: pointer; border: 1px solid transparent; background: none; padding: 2px 6px; border-radius: 6px; transition: background .14s ease, border-color .14s ease; }
.lr-jump:hover { background: var(--bg); border-color: var(--line-strong); }
.lr-folio-input { width: 54px; text-align: center; padding: 3px 4px; border: 1px solid var(--green-600); border-radius: 6px; background: var(--bg); color: var(--gold); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.lr-folio-input:focus { outline: none; box-shadow: var(--ring); }
.lote-reorder-row.is-hidden { display: none; }
/* Filtro client-side genérico: oculta filas que no matchean el buscador */
.data-table tbody tr.is-hidden { display: none; }
.lote-reorder-row.lr-flash { border-color: var(--green-400); box-shadow: 0 0 0 3px var(--green-glow); }
.lote-reorder.is-filtering .lr-grip { opacity: .3; cursor: default; }
/* En el modal: el buscador usa el padding del cuerpo (no doble) y la lista se acota
   para que el buscador quede fijo arriba mientras la lista scrollea sola. */
.modal-body .reorder-tools { padding: 0 0 12px; }
.modal-body .lote-reorder--scroll { max-height: 42vh; }

/* ── Tarjeta de lote — "Folio de Remate" (etiqueta de subasta) · ALTO FIJO ── */
/* Alto SIEMPRE constante (tenga 0 o muchos objetos/fotos): hilo y pie fijos,
   el cuerpo rellena y scrollea internamente si el contenido excede. */
.lote-card { --t-perf: var(--line-strong); position: relative; width: 100%; max-width: 340px; height: 520px; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; font-family: var(--sans); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: radial-gradient(120% 80% at 88% -10%, var(--green-glow), transparent 55%), linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -22px rgba(0,0,0,.55), 0 2px 8px -4px rgba(0,0,0,.4); }
.lote-card[draggable="true"] { cursor: grab; -webkit-user-select: none; user-select: none; }
/* Las <img> son draggable por defecto y secuestran el gesto (se arrastra la foto en
   vez de la card) → neutralizadas. */
.lote-card img { -webkit-user-drag: none; user-drag: none; }
/* Drag tipo Trello: la card arrastrada se COLAPSA a un placeholder fino. Clave anti-
   parpadeo: así insertarla ya no reflowea el grid de 520px bajo el cursor (era el
   lazo layout→reinserción→layout que hacía oscilar). El cálculo la ignora (:not). */
.lote-card.dragging { cursor: grabbing; height: 90px; min-height: 0; overflow: hidden; background: var(--surface-2); outline: 2px dashed var(--gold); outline-offset: -2px; box-shadow: 0 0 0 4px var(--gold-glow); }
.lote-card.dragging > * { opacity: 0; }
.lote-card.dragging * { pointer-events: none; } /* opacity no quita hit-testing → esto sí */

/* hilo + ojal de la etiqueta colgante */
.folio-thread { position: relative; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; }
.folio-thread::before { content: ""; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 108px; height: 30px; border: 1.5px solid var(--gold); border-bottom: none; border-radius: 60px 60px 0 0; opacity: .55; filter: drop-shadow(0 0 4px var(--gold-glow)); }
.folio-eyelet { position: relative; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 45%, var(--gold-2) 100%); box-shadow: 0 0 0 3px var(--green-900), 0 0 10px var(--gold-glow); }
.folio-eyelet::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--green-900); }

/* cuerpo — rellena el alto fijo y scrollea si el contenido excede */
.folio-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 18px 6px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.folio-body::-webkit-scrollbar { width: 6px; }
.folio-body::-webkit-scrollbar-track { background: transparent; }
.folio-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* encabezado: folio + estado */
.folio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.folio-folio { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.folio-folio b { font-size: 24px; letter-spacing: .01em; line-height: 1; color: var(--gold); font-weight: 600; }
.folio-gav { color: var(--green-400); font-size: 13px; align-self: center; }
.folio-serie { font-size: 10px; opacity: .8; letter-spacing: .04em; }
.folio-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-300); padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--green-400) 35%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--green-400) 10%, transparent); white-space: nowrap; flex: none; }
.folio-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 8px var(--green-400); }
/* moneda del lote: chip junto al número (gold). --propia = el lote pisa la del remate. */
.folio-moneda { align-self: center; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--gold) 9%, transparent); white-space: nowrap; }
.folio-moneda--propia::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold); }
/* Renglones de plata por moneda (remate mixto): una línea por moneda apiladas. */
.vt-cur { white-space: nowrap; }
.vt-cur + .vt-cur { margin-top: 3px; }
/* Resumen contable por moneda: columnas de importes alineadas a la derecha. */
.rc-num { text-align: right; white-space: nowrap; }
/* KPI con más de una moneda: en vez del número grande, líneas apiladas por moneda. */
.k-val--multi { font-size: 1.15rem; line-height: 1.3; }
.k-val--multi .vt-cur { font-weight: 700; }
.folio-title { margin: 11px 0 0; font-size: 17px; line-height: 1.22; font-weight: 600; color: var(--ink); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.folio-title--empty { opacity: .6; font-style: italic; font-weight: 500; }
.folio-desc { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* etiqueta de sección (Fotos) + botones claros Asignar / Agregar foto */
.folio-sec-h { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.folio-mini-row { display: flex; gap: 8px; margin-top: 12px; }
.folio-mini { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-2); background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 9px 10px; cursor: pointer; transition: var(--transition); }
.folio-mini i { font-size: 11px; color: var(--ink-4); transition: color .18s; }
.folio-mini:hover { border-color: var(--green-400); border-style: solid; color: var(--green-400); background: var(--green-glow); }
.folio-mini:hover i { color: var(--green-400); }

/* fotos — grilla de 3 con acciones al hover */
.folio-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Grilla: solo la foto principal + contador "+N". La galería completa está en el modal. */
.folio-photos--mini { grid-template-columns: 1fr; max-width: 168px; }
.folio-photo-more { position: absolute; right: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; }
.folio-empty-fotos { margin: 0; }
.folio-empty-fotos[data-ver-fotos] { cursor: pointer; transition: border-color .16s var(--smooth), color .16s var(--smooth); }
.folio-empty-fotos[data-ver-fotos]:hover { border-color: var(--green-600); color: var(--ink-2); }
.folio-empty-add { color: var(--green-ink); font-weight: 600; }
.folio-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--green-900); }
.folio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) brightness(.94); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.folio-photo:hover img { transform: scale(1.06); }
.folio-photo.is-principal { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.folio-photo-actions { position: absolute; inset: auto 0 0 0; display: flex; justify-content: flex-end; gap: 3px; padding: 4px; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); opacity: 0; transition: opacity .14s; }
.folio-photo:hover .folio-photo-actions, .folio-photo:focus-within .folio-photo-actions { opacity: 1; }
.folio-photo-act { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; background: rgba(255,255,255,.18); border: 0; border-radius: 5px; cursor: pointer; transition: background .14s; }
.folio-photo-act:hover { background: rgba(255,255,255,.34); }
.folio-photo-act:disabled { color: var(--gold); background: rgba(255,255,255,.12); cursor: default; }
.folio-photo-act--danger:hover { background: var(--danger); }
/* La foto de la card es clickeable: abre el modal en la galería (ver todas + ordenar). */
.folio-photo[data-ver-fotos] { cursor: pointer; }
.folio-photo-view { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff; font-size: 10px; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); opacity: 0; transform: scale(.9); transition: opacity .16s var(--smooth), transform .16s var(--smooth); pointer-events: none; }
.folio-photo:hover .folio-photo-view, .folio-photo:focus-within .folio-photo-view { opacity: 1; transform: scale(1); }

/* contenido / objetos */
.folio-objs { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(0,0,0,.1); overflow: hidden; }
.folio-objs-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.folio-assign { display: inline-flex; align-items: center; gap: 5px; color: var(--green-400); cursor: pointer; border: none; background: none; font: inherit; letter-spacing: .08em; }
.folio-assign:hover { color: var(--green-300); }
.folio-obj { display: flex; align-items: center; gap: 9px; padding: 8px 11px; font-size: 12.5px; color: var(--ink-2); border-top: 1px dotted var(--line); }
.folio-obj:first-child { border-top: none; }
.folio-obj-box { color: var(--gold-2); font-size: 11px; width: 14px; text-align: center; flex: none; }
.folio-obj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio-qty { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); padding: 2px 7px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line-strong); flex: none; }
/* Acciones por objeto SIEMPRE visibles (editar cantidad / quitar), no en hover */
.folio-obj-actions { flex: none; display: flex; gap: 3px; opacity: .85; transition: opacity .14s; }
.folio-obj:hover .folio-obj-actions, .folio-obj:focus-within .folio-obj-actions { opacity: 1; }
.folio-obj-act { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ink-4); background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: var(--transition); }
.folio-obj-act:hover { color: var(--green-400); border-color: var(--green-400); background: var(--green-glow); }
.folio-obj-act--danger:hover { color: var(--gold); border-color: var(--gold-2); background: rgba(216,184,120,.08); }
.folio-objs .lote-empty { margin: 8px; background: transparent; border: none; padding: 4px; }

/* línea perforada del stub */
.folio-tear { position: relative; height: 16px; flex: none; }
.folio-tear::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px dashed var(--t-perf); }
.folio-tear::after { content: ""; position: absolute; top: 50%; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); transform: translateY(-50%); box-shadow: calc(100% + 18px) 0 0 var(--bg); border: 1px solid var(--line-strong); }

/* stub: acciones tipo recibo */
.folio-stub { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 14px 16px; }
.folio-edit { flex: 1 1 auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px; border: none; cursor: pointer; border-radius: var(--radius-sm); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--green-900); background: linear-gradient(180deg, var(--green-400), var(--green-600)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green-400) 40%, transparent) inset, 0 6px 16px -8px var(--green-400); transition: transform .15s, box-shadow .25s, filter .2s; }
/* El candado "Vendido — no editable" baja a su propia línea: no compite con los botones. */
.folio-locked { flex-basis: 100%; }
.folio-edit:hover { filter: brightness(1.06); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green-400) 60%, transparent) inset, 0 8px 20px -8px var(--green-400); }
.folio-edit:active { transform: translateY(1px); }
.folio-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }

/* Variante secundaria del botón del talón (Web): presente pero sin competir
   con el primario Editar lote. */
.folio-edit--sec { background: var(--surface-2); color: var(--ink-2); box-shadow: none; border: 1px solid var(--line-strong); flex: 0 1 auto; }
.folio-edit--sec:hover { color: var(--green-ink); border-color: var(--green-ink); background: var(--ctrl-hover); transform: none; }

/* Pastilla de estado web en la cabecera de la card: el dato que antes no se
   veía sin abrir el modal. Clickeable → abre Publicación web del lote. */
.web-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: none; cursor: pointer; font-family: var(--sans); letter-spacing: .01em; transition: filter .2s, border-color .2s; }
.web-pill--on { color: var(--st-activo); background: var(--green-glow); }
.web-pill--on:hover { filter: brightness(1.15); }
.web-pill--off { color: var(--ink-4); background: var(--surface-2); border: 1px solid var(--line); }
.web-pill--off:hover { color: var(--ink-2); border-color: var(--line-strong); }
.web-pill i { font-size: .9em; }
.folio-icon:hover { color: var(--gold); border-color: var(--gold); background: rgba(216,184,120,.06); }

/* menú ⋮ — el JS togglea .lote-menu-pop por click (atributo hidden) */
.lote-menu { position: relative; flex: none; }
.lote-menu-pop { position: absolute; right: 0; bottom: 48px; top: auto; min-width: 158px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); padding: 5px; display: flex; flex-direction: column; z-index: 50; animation: popIn .16s var(--ease) both; }
.lote-menu-pop[hidden] { display: none; }
.lote-menu-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: none; background: none; cursor: pointer; border-radius: 6px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); text-align: left; transition: background .12s, color .12s; }
.lote-menu-item i { width: 14px; text-align: center; color: var(--ink-4); font-size: 11px; }
.lote-menu-item:hover:not(:disabled) { background: var(--ctrl-hover); color: var(--ink); }
.lote-menu-item:disabled { opacity: .4; cursor: not-allowed; }
.folio-menu-danger { color: var(--gold); }
.folio-menu-danger:hover:not(:disabled) { background: rgba(216,184,120,.08); color: var(--gold); }
.folio-menu-danger i { color: var(--gold-2); }
.lote-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.lote-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.lote-empty i { font-size: 1rem; color: var(--ink-4); flex-shrink: 0; }

/* 4) Galería de fotos del lote (modal "Editar lote"): reorden por arrastre.
      El orden = prioridad; la primera es la portada. Los tiles se arrastran con
      pointer events (la foto se "levanta" y sigue al cursor) — ver lotes.js. */
.lote-galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.lg-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; font-size: 12.5px; color: var(--ink-3); }
.lg-hint i { color: var(--gold); font-size: 12px; }
.lg-hint b { color: var(--ink-2); font-weight: 600; }
.lg-vacia { margin: 12px 0 0; font-size: 12.5px; }

.lg-tile {
  position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--surface);
  cursor: grab; user-select: none; touch-action: none;
  transition: border-color .15s var(--smooth), box-shadow .15s var(--smooth);
}
.lg-tile:hover { border-color: var(--gold); box-shadow: 0 10px 24px -14px rgba(0,0,0,.7); }
.lg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* La foto AGARRADA: levantada, sigue al cursor (position:fixed la pone el JS). El
   z-index la deja por encima del modal-overlay (1000) y del toast (1100). */
.lg-tile.lg-lifting {
  cursor: grabbing; z-index: 1200; border-color: var(--gold);
  box-shadow: 0 26px 54px -14px rgba(0,0,0,.78), 0 0 0 2px var(--gold);
  filter: brightness(1.06) saturate(1.04);
}
/* El hueco donde va a caer */
.lg-tile.lg-placeholder { background: var(--gold-glow); border: 1.6px dashed var(--gold); box-shadow: none; cursor: default; }

.lg-grip {
  position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; color: #fff; font-size: 11px; pointer-events: none;
  background: rgba(8,14,10,.5); backdrop-filter: blur(4px); opacity: .82;
}
.lg-num, .lg-portada { position: absolute; bottom: 7px; border-radius: 7px; backdrop-filter: blur(4px); font-size: 10px; font-weight: 600; padding: 2px 7px; pointer-events: none; }
.lg-num { right: 7px; font-family: var(--mono); background: rgba(8,14,10,.6); color: var(--ink-2); }
.lg-portada { left: 7px; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1a1206; background: var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.lg-portada i { font-size: 9px; }

.lg-del {
  position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 7px; border: none;
  display: grid; place-items: center; color: #fff; font-size: 12px; cursor: pointer;
  background: rgba(8,14,10,.55); backdrop-filter: blur(4px); opacity: 0;
  transition: opacity .15s var(--smooth), background .15s var(--smooth);
}
.lg-tile:hover .lg-del, .lg-tile:focus-within .lg-del { opacity: 1; }
.lg-del:hover { background: var(--danger); }

.lg-add {
  display: grid; place-items: center; gap: 5px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line-strong); color: var(--ink-3); cursor: pointer;
  background: color-mix(in srgb, var(--ink) 1.5%, transparent); transition: var(--transition);
}
.lg-add:hover { border-color: var(--green-600); color: var(--green-400); background: var(--green-glow); }
.lg-add i { font-size: 1.2rem; }
.lg-add span { font-size: 11px; }

/* Buscador + multi-selección de objetos al asignar (dentro del modal) */
.search-results { list-style: none; margin: 0 0 12px; padding: 0; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.search-results li { margin: 0; }
.search-results .btn { width: 100%; justify-content: flex-start; }
.selected-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.selected-item { display: flex; align-items: center; gap: 8px; padding: 8px 9px 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .16s var(--smooth); }
.selected-item:focus-within { border-color: var(--green-600); }
.selected-item > span { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); }
.selected-item input[type="number"] { width: 72px; flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--mono); text-align: center; transition: var(--transition); }
.selected-item input[type="number"]:focus { outline: none; border-color: var(--green-600); box-shadow: var(--ring); }

/* Modal de edición de lote: imágenes + observaciones por objeto.
   Secciones separadas por divisor sutil + label de sección mono mayúscula. */
.modal:has(.lote-edit) { max-width: 560px; }

/* Modal dedicado de fotos del lote (ver + ordenar). Más ancho que el de edición
   para que la galería respire (4–5 columnas). */
.modal:has(.lote-galeria-modal) { max-width: 620px; }
.lote-galeria-modal { display: flex; flex-direction: column; gap: 4px; }
.lote-galeria-modal .lote-galeria { margin: 2px 0 0; }
.lote-galeria-modal .form-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.lote-edit { display: flex; flex-direction: column; }
.lote-edit-sec { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; }
.lote-edit-sec:first-child { padding-top: 2px; }
.lote-edit-sec + .lote-edit-sec { border-top: 1px solid var(--line); }
.lote-edit-titulo {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.lote-edit-titulo i {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; font-size: 11px;
  color: var(--green-400); background: var(--green-glow); border: 1px solid var(--line-strong);
}
/* Filas DENSAS de objeto + observación (look ledger sobrio) */
.obs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.obs-item { padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); display: flex; flex-direction: column; gap: 8px; transition: border-color .16s var(--smooth); }
.obs-item:focus-within { border-color: var(--green-600); }
.obs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.obs-nombre { font-size: 13px; font-weight: 600; color: var(--ink); }
.obs-edit { display: flex; align-items: flex-start; gap: 8px; }
.obs-input { flex: 1 1 auto; min-width: 0; resize: vertical; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.4; transition: var(--transition); }
.obs-input:focus { outline: none; border-color: var(--green-600); box-shadow: var(--ring); }
.obs-edit .btn { flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════════════════════
   MOTION — sobrio, sin ornamentos editoriales
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shimmer  { from { background-position: -180% 0; } to { background-position: 180% 0; } }

/* Reveal escalonado al entrar a cada vista */
/* Las secciones entran INSTANTÁNEAS (sin fade ni desplazamiento): toda animación
   de entrada deja un instante en blanco al reemplazar el contenido, que se percibe
   como salto (con movimiento) o pestañeo (con fade). Las animaciones quedan a nivel
   de interacción: pestañas (glider), modales, hover, estados vacíos. */

/* Skeletons con shimmer (estados de carga) */
.skeleton, .skel-line {
  background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--ink) 6%, var(--surface-2)) 50%, var(--surface-2) 70%);
  background-size: 220% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--radius-sm);
}
.skel-line { height: 12px; margin: 9px 0; }
.skel-card { height: 120px; border-radius: var(--radius); }
.skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* Modal / overlay: entrada con resorte suave */
.modal-overlay { animation: fadeIn .2s var(--ease) both; }
.modal { animation: popIn .26s var(--ease) both; }

/* ── Móvil / tablet: sidebar como drawer con hamburguesa + backdrop ─────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .main-content { margin-left: 0; }

  .topbar-hamburger { display: inline-flex; }
  .topbar-inner { padding: 0 20px; }
  .topbar-title { font-size: 1.1rem; }
  .content-area { padding: 20px; }

  /* Backdrop: solo visible con el drawer abierto */
  .app-shell.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(17,30,17,.42); backdrop-filter: blur(1px); }
}

/* ── Tablas → TARJETAS en móvil (responsive real en cada listado) ──────────── */
@media (max-width: 768px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .data-table, .data-table tbody, .data-table tbody tr, .data-table tbody td { display: block; width: 100%; }
  .data-table tbody tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
  .data-table tbody tr:hover td { background: transparent; }
  .data-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 15px; border-bottom: 1px dashed var(--line); text-align: right; }
  .data-table tbody tr td:last-child { border-bottom: none; }
  .data-table tbody td::before { content: attr(data-label); font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; text-align: left; flex-shrink: 0; }
  .data-table td.col-actions { flex-wrap: wrap; justify-content: flex-end; }
  .data-table td.col-actions .btn { margin: 3px 0 3px 6px; }
  .data-table td.empty { justify-content: center; }
  .data-table td.empty::before { content: none; }
  .table-footer { flex-direction: column; gap: 12px; }
  /* La tabla anidada dentro de un lote se mantiene compacta, no como tarjeta global */
  .lote-card .data-table tbody td { border-bottom: 1px dashed var(--line); }

  /* La tabla del CIERRE NO se vuelve tarjetas: el card-mode global la rompe (filas-detalle
     anidadas + celda del caret). Se mantiene TABLA y scrollea horizontal dentro del wrap. */
  .hist-cierre { padding: 12px 10px; }
  .hist-cierre > .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hist-cierre-table { min-width: 660px; }
  .hist-cierre-table, .hist-cierre-table tbody, .hist-cierre-table tbody tr, .hist-cierre-table tbody td { display: revert; }
  .hist-cierre-table thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; border: 0; }
  .hist-cierre-table tbody tr { border: 0; border-radius: 0; margin: 0; background: none; box-shadow: none; }
  .hist-cierre-table tbody td::before { content: none; }
  .hist-cierre-detwrap { padding: 8px 8px 12px 12px; }
  .hist-cierre-detwrap .table-wrap { overflow-x: auto; }
  .hist-cierre-detwrap .hist-table { min-width: 320px; }
}

/* ── Historial: anchos de columna FIJOS en desktop ──────────────────────────────
   table-layout:fixed → el ancho de las columnas NO depende de las filas visibles,
   así al filtrar (KPI Saldo) o paginar las columnas no saltan. SOLO en desktop:
   en ≤768px las .data-table pasan a modo tarjeta (display:block) y fixed no aplica.
   Scopeado a .hist-table → no afecta Clientes ni otras vistas. */
.hist-subhead { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-2, var(--ink)); }
.hist-subhead .muted { font-weight: 400; }

@media (min-width: 769px) {
  .hist-table { table-layout: fixed; }
  /* Columnas de texto variable: truncar con ellipsis en vez de expandir la columna. */
  .hist-table td, .hist-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Las celdas de monto/acciones no deben truncar su contenido (entra completo). */
  .hist-table td.vt-r, .hist-table th.vt-r,
  .hist-table td.col-actions, .hist-table th.col-actions { overflow: visible; }

  /* Cuenta corriente: Remate(flex) · Estado(140) · Comprado/Vendido/Pagado/Saldo(120 c/u) */
  .hist-table--cc th:nth-child(2), .hist-table--cc td:nth-child(2) { width: 140px; }
  .hist-table--cc th:nth-child(n+3), .hist-table--cc td:nth-child(n+3) { width: 120px; }

  /* Ventas: Fecha(110) · Remate(flex) · Lote(22%) · Objeto(s)(flex) · Monto(130) */
  .hist-table--ventas th:nth-child(1), .hist-table--ventas td:nth-child(1) { width: 110px; }
  .hist-table--ventas th:nth-child(3), .hist-table--ventas td:nth-child(3) { width: 22%; }
  .hist-table--ventas th:nth-child(5), .hist-table--ventas td:nth-child(5) { width: 130px; }

  /* Compras: Fecha(110) · Remate(flex) · Lote(flex) · Cant.(90) · Monto(130) */
  .hist-table--compras th:nth-child(1), .hist-table--compras td:nth-child(1) { width: 110px; }
  .hist-table--compras th:nth-child(4), .hist-table--compras td:nth-child(4) { width: 90px; }
  .hist-table--compras th:nth-child(5), .hist-table--compras td:nth-child(5) { width: 130px; }

  /* Recibos: N.º(100) · Fecha(120) · Remate(flex) · Monto(130) · acciones(140) */
  .hist-table--recibos th:nth-child(1), .hist-table--recibos td:nth-child(1) { width: 100px; }
  .hist-table--recibos th:nth-child(2), .hist-table--recibos td:nth-child(2) { width: 120px; }
  .hist-table--recibos th:nth-child(4), .hist-table--recibos td:nth-child(4) { width: 130px; }
  .hist-table--recibos th:nth-child(5), .hist-table--recibos td:nth-child(5) { width: 140px; }
}

@media (max-width: 560px) {
  .obj-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .page { padding: 18px 16px; }
  .topbar-date { display: none; }
}

/* ── Cross-fade entre vistas (View Transitions API) ─────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--smooth); }
/* Durante el fade, la vista nueva aparece en su estado final (no re-anima la entrada) */
html.vt #view > *,
html.vt .obj-card, html.vt .lote-card, html.vt .estado-modal {
  animation: none !important; opacity: 1 !important; transform: none !important;
}

/* ── Transición suave de tema (solo durante el toggle) ──────────────────────── */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .3s var(--smooth), color .3s var(--smooth),
              border-color .3s var(--smooth), fill .3s var(--smooth) !important;
}

/* ── Respeto total a quien prefiere menos movimiento ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Boleta de salida imprimible (Morales Colombo) ──────────────────────────── */
/* En pantalla nunca se ve: solo existe para el diálogo de impresión. */
@media screen {
  .print-boleta { display: none; }
}

@media print {
  /* Ocultar TODA la app: los hermanos del contenedor de impresión salen de FLUJO
     (display:none), no solo visibility:hidden. Si solo se ocultan con visibility,
     siguen ocupando alto y generan páginas en blanco antes/después del recibo. */
  body > *:not(.print-boleta) { display: none !important; }
  .print-boleta,
  .print-boleta * { visibility: visible; }

  .print-boleta {
    display: block;
    position: static;
    margin: 0;
    padding: 24mm 20mm;
    width: 100%;
    background: #fff;
    color: #000;
    /* Sans-serif de sistema: más legible en recibos que la serif. Números
       tabulares + lining → misma altura y ancho (antes Georgia usaba figuras
       "oldstyle" con alturas distintas). */
    font-family: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 12pt;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Los importes tabulares (columnas y totales) heredan lining-nums del contenedor. */
  .print-boleta .pb-num,
  .print-boleta .pb-total,
  .print-boleta .pb-total-sub,
  .print-boleta .pb-saldo { font-variant-numeric: tabular-nums lining-nums; }

  /* Línea de retención (impuesto municipal) sobre el total del vendedor. */
  .print-boleta .pb-total-sub { margin: 0 0 2px; font-size: 11px; color: #555; text-align: right; }

  /* Modo multi-recibo (cierre): un recibo por página. El padding de página lo
     pone cada .print-page (el contenedor no agrega el suyo). */
  .print-boleta--multi { padding: 0; }
  .print-boleta--multi .print-page {
    padding: 24mm 20mm;
    break-after: page;
    break-inside: avoid;
  }
  .print-boleta--multi .print-page:last-child { break-after: auto; }

  .print-boleta .pb-head {
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 18px;
  }
  .print-boleta .pb-casa {
    margin: 0;
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .print-boleta .pb-sub {
    margin: 4px 0 0;
    font-size: 11pt;
    font-style: italic;
    letter-spacing: 1px;
  }

  .print-boleta .pb-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    font-size: 11pt;
  }
  .print-boleta .pb-nro { font-weight: 700; }

  .print-boleta .pb-campos {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 36px;
  }
  .print-boleta .pb-campos th,
  .print-boleta .pb-campos td {
    text-align: left;
    vertical-align: top;
    padding: 9px 10px;
    border: 1px solid #000;
  }
  .print-boleta .pb-campos th {
    width: 28%;
    font-weight: 700;
    background: #f0f0f0;
    text-transform: uppercase;
    font-size: 10pt;
    letter-spacing: .5px;
  }

  /* Tabla de ítems del recibo por cliente (varias líneas de compra). */
  .print-boleta .pb-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
  }
  .print-boleta .pb-items th,
  .print-boleta .pb-items td {
    padding: 7px 9px;
    border: 1px solid #000;
    font-size: 11pt;
    vertical-align: top;
  }
  .print-boleta .pb-items thead th {
    background: #f0f0f0;
    text-transform: uppercase;
    font-size: 9pt;
    letter-spacing: .5px;
  }
  .print-boleta .pb-items tfoot th,
  .print-boleta .pb-items tfoot td {
    font-weight: 700;
    background: #f0f0f0;
  }
  .print-boleta .pb-num { text-align: right; white-space: nowrap; }
  .print-boleta .pb-totales {
    margin: 0 0 36px;
    text-align: right;
  }
  .print-boleta .pb-total,
  .print-boleta .pb-sena {
    margin: 0 0 4px;
    font-size: 12pt;
    font-weight: 400;
  }
  .print-boleta .pb-saldo {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid #000;
    font-size: 13pt;
    font-weight: 700;
  }

  /* Dos firmas lado a lado (remitente + casa) en la boleta de entrada. */
  .print-boleta .pb-firmas {
    display: flex;
    gap: 48px;
    margin-top: 56px;
  }
  .print-boleta .pb-firmas .pb-firma { flex: 1; margin-top: 0; }
  .print-boleta .pb-firma {
    margin-top: 48px;
    text-align: center;
  }
  .print-boleta .pb-firma-line {
    display: block;
    width: 60%;
    margin: 0 auto 6px;
    border-top: 1px solid #000;
  }
  .print-boleta .pb-firma-label {
    font-size: 10pt;
    letter-spacing: .5px;
  }

  .print-boleta .pb-foot {
    margin-top: 30px;
    padding-top: 8px;
    border-top: 1px solid #999;
    text-align: center;
    font-size: 9pt;
    color: #333;
  }

  /* ── Resumen contable (impreso) ────────────────────────────────────────── */
  .print-boleta .rc-items .rc-fuerte th,
  .print-boleta .rc-items .rc-fuerte td { font-weight: 700; font-size: 12pt; }
  .print-boleta .rc-pend { font-style: italic; color: #333; font-weight: 400; }
  .print-boleta .pb-nota {
    margin: 4px 0 24px;
    font-size: 9.5pt;
    font-style: italic;
    color: #333;
  }

  /* ── Reporte de piezas (impreso) — layout editorial propio (clases .pzp-*) ── */
  .print-piezas { color: #1a1a1a; font-family: Georgia, 'Times New Roman', serif; }
  .print-piezas .pzp-head { text-align: center; margin-bottom: 22px; }
  .print-piezas .pzp-casa { margin: 0; font-size: 22pt; font-weight: 800; letter-spacing: 3px; }
  .print-piezas .pzp-sub { margin: 3px 0 0; font-size: 10pt; font-style: italic; color: #555; letter-spacing: .5px; }

  .print-piezas .pzp-meta {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-top: 2px solid #1a1a1a; border-bottom: 1px solid #ccc;
    padding: 11px 2px; margin-bottom: 20px;
  }
  .print-piezas .pzp-title { margin: 0; font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #666; }
  .print-piezas .pzp-consig { margin: 5px 0 0; font-size: 15pt; font-weight: 700; }
  .print-piezas .pzp-meta-r { text-align: right; }
  .print-piezas .pzp-date { margin: 0; font-size: 10.5pt; font-weight: 600; }
  .print-piezas .pzp-count { margin: 3px 0 0; font-size: 9.5pt; color: #666; }

  /* Banda "Mi inversión": tira de celdas con la plata del consignante. */
  .print-piezas .pzp-inv { display: flex; border: 1px solid #ccc; margin-bottom: 22px; }
  .print-piezas .pzp-inv-cell {
    flex: 1; padding: 9px 13px; border-right: 1px solid #e2e2e2;
    display: flex; flex-direction: column; gap: 2px;
  }
  .print-piezas .pzp-inv-cell:last-child { border-right: none; }
  .print-piezas .pzp-inv-lbl { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .6px; color: #777; }
  .print-piezas .pzp-inv-val { font-size: 13pt; font-weight: 800; line-height: 1.1; }
  .print-piezas .pzp-inv-sub { font-size: 7.5pt; color: #888; font-style: italic; }
  .print-piezas .pzp-val { font-weight: 600; }
  .print-piezas .pzp-vend { font-weight: 700; }

  .print-piezas .pzp-table { width: 100%; border-collapse: collapse; }
  .print-piezas .pzp-table thead th {
    font-size: 8pt; text-transform: uppercase; letter-spacing: .8px; color: #666;
    font-weight: 700; padding: 0 8px 7px; border-bottom: 1.5px solid #1a1a1a; text-align: right;
  }
  .print-piezas .pzp-table .pzp-th-name { text-align: left; }
  .print-piezas .pzp-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

  .print-piezas .pzp-row td { padding: 9px 8px 3px; font-size: 11pt; border-bottom: none; }
  .print-piezas .pzp-row .pzp-name { font-weight: 700; }
  .print-piezas .pzp-row .pzp-cant { font-weight: 700; }
  .print-piezas .pzp-zero { color: #bbb; }

  .print-piezas .pzp-detail td { padding: 0 8px 9px; border-bottom: 1px solid #e2e2e2; }
  .print-piezas .pzp-row--solo td { border-bottom: 1px solid #e2e2e2; padding-bottom: 9px; }
  .print-piezas .pzp-loc { list-style: none; margin: 0; padding: 0; }
  .print-piezas .pzp-loc li { font-size: 9.5pt; color: #444; padding: 1px 0; break-inside: avoid; }
  .print-piezas .pzp-loc-n { font-weight: 600; color: #1a1a1a; }
  .print-piezas .pzp-loc-sep { color: #aaa; margin: 0 6px; }
  .print-piezas .pzp-loc em { font-style: italic; color: #777; }

  .print-piezas .pzp-table tfoot td {
    padding: 11px 8px 4px; border-top: 1.5px solid #1a1a1a; font-weight: 800; font-size: 11pt;
  }
  .print-piezas .pzp-table tfoot .pzp-name { text-transform: uppercase; letter-spacing: 1px; font-size: 9.5pt; }
  .print-piezas .pzp-row, .print-piezas .pzp-detail { break-inside: avoid; }

  .print-piezas .pzp-empty { text-align: center; padding: 24px; color: #666; font-style: italic; }
  .print-piezas .pzp-note { margin: 15px 0 0; font-size: 8.5pt; font-style: italic; color: #777; }
  .print-piezas .pzp-foot {
    margin-top: 26px; padding-top: 8px; border-top: 1px solid #ccc;
    text-align: center; font-size: 8.5pt; color: #888; letter-spacing: .5px;
  }

  /* ── Reporte municipal (impreso) ─────────────────────────────────────────── */
  .print-boleta .rm-items tfoot th,
  .print-boleta .rm-items tfoot td { font-weight: 700; background: #f0f0f0; }
  .print-boleta .rm-anulada td { color: #666; text-decoration: line-through; }

  /* ── Etiquetas de lote (impresora de tickets) ──────────────────────────────
     Una etiqueta por ticket. Papel angosto (~80 mm) vía página nombrada; si el
     equipo no la respeta, la etiqueta igual imprime (centrada y acotada) en la
     hoja que haya. El número de lote es lo más grande y legible. */
  @page etiqueta { size: 80mm auto; margin: 4mm; }

  .print-boleta--etiquetas { padding: 0; }
  .print-boleta--etiquetas .print-page {
    page: etiqueta;
    box-sizing: border-box;
    width: 100%;
    max-width: 72mm;
    margin: 0 auto;
    padding: 4mm 3mm 6mm;
    text-align: center;
    break-after: page;
    break-inside: avoid;
  }
  .print-boleta--etiquetas .print-page:last-child { break-after: auto; }

  .print-boleta--etiquetas .etq-casa {
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .print-boleta--etiquetas .etq-remate {
    margin-top: 2px;
    font-size: 9.5pt;
    line-height: 1.25;
    color: #000;
  }
  .print-boleta--etiquetas .etq-lote-label {
    margin-top: 8px;
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
  }
  .print-boleta--etiquetas .etq-num {
    font-size: 40pt;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 1px;
  }
  .print-boleta--etiquetas .etq-serie {
    font-size: 20pt;
    font-weight: 700;
    vertical-align: super;
  }
  .print-boleta--etiquetas .etq-titulo {
    margin-top: 6px;
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
  }
}

/* ── Historial del cliente — ficha + KPIs 5 columnas ────────────────────────
   Clases NUEVAS (mockup C). Reutiliza todo el sistema .vt-* de Ventas.
   Usar SOLO tokens semánticos — NUNCA hex directo (rompe dark theme).
   ─────────────────────────────────────────────────────────────────────────── */

/* Variante 5 columnas para la tira de KPIs */
.vt-kpis--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .vt-kpis--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .vt-kpis--5 { grid-template-columns: repeat(2, 1fr); } }

/* Ficha del cliente */
.hist-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  margin-bottom: 20px;
}

/* Avatar circular con iniciales — verde semántico */
.hist-av {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-light);
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--green-700);
  font-family: var(--sans);
}
[data-theme="dark"] .hist-av {
  color: var(--green-400);
}

.hist-identity { min-width: 0; }

.hist-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 6px;
}

/* Fila de badges + id mono */
.hist-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Fila de datos de contacto (documento · teléfono · dirección) */
.hist-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-4);
}
.hist-contact i {
  font-size: 11px;
  margin-right: 3px;
  opacity: .75;
}

/* Badge de rol derivado */
.hist-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line-strong);
}

.hist-tag--green {
  background: var(--green-light);
  color: var(--green-ink);
  border-color: color-mix(in srgb, var(--green-500) 35%, transparent);
}
[data-theme="dark"] .hist-tag--green {
  background: color-mix(in srgb, var(--green-600) 18%, transparent);
  color: var(--green-400);
  border-color: color-mix(in srgb, var(--green-400) 30%, transparent);
}

/* Empresas de facturación del cliente (ficha). Reusa .hist-card pero sin su padding
   ni su flex: el header lleva su divisor a sangre y la lista su padding interno. */
.emp-card { display: block; padding: 0; overflow: hidden; }

.emp-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.emp-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--green-light); color: var(--green-700); font-size: 14px; }
[data-theme="dark"] .emp-ic { color: var(--green-400); }
.emp-htext { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.emp-htext .emp-t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.emp-htext .emp-s { font-size: 11.5px; color: var(--ink-4); }
.emp-add { margin-left: auto; flex: none; }

.emp-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.emp-list.emp-scroll { max-height: 232px; overflow-y: auto; }
.emp-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-2); transition: border-color .15s, background .15s; }
.emp-item:hover { border-color: color-mix(in srgb, var(--green-ink) 40%, transparent); }
.emp-tile { flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--green-light); color: var(--green-700); border: 1px solid color-mix(in srgb, var(--green-ink) 22%, transparent); font-size: 15px; }
[data-theme="dark"] .emp-tile { color: var(--green-400); }
.emp-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.emp-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.emp-detail { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-detail .emp-rut { color: var(--ink-2); }
.emp-actions { display: flex; gap: 6px; flex: none; }
.btn-emp-act { width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-3); border-radius: 8px; font-size: 12.5px; transition: color .15s, border-color .15s, background .15s; }
.btn-emp-act:hover { color: var(--green-ink); border-color: var(--green-ink); background: var(--green-light); }
.btn-emp-act.emp-del:hover { color: #e8896f; border-color: #c0492f; background: color-mix(in srgb, #c0492f 16%, transparent); }

.emp-empty-wrap { padding: 24px 18px 28px; text-align: center; }
.emp-empty-glyph { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--green-light); color: var(--green-700); font-size: 20px; opacity: .9; }
[data-theme="dark"] .emp-empty-glyph { color: var(--green-400); }
.emp-empty-title { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.emp-empty-sub { font-size: 12.5px; color: var(--ink-3); }

/* ── Publicación web (modal "Web" de remates/lotes): interruptor con explicación ── */
/* ── Menú desplegable de acciones de fila (components/menu.js) ──────────── */
.row-menu {
  position: fixed; z-index: 240; min-width: 190px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.3); padding: 5px;
}
.row-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: 0; background: none; color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 500; border-radius: 7px;
  cursor: pointer; text-align: left; white-space: nowrap;
}
.row-menu button:hover, .row-menu button:focus-visible { background: var(--ctrl-hover); color: var(--ink); outline: none; }
.row-menu button i { width: 16px; text-align: center; font-size: 12px; color: var(--ink-4); }
.row-menu button:hover i, .row-menu button:focus-visible i { color: inherit; }
.row-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.row-menu button.peligro { color: var(--danger); }
.row-menu button.peligro i { color: inherit; }
.row-menu button.peligro:hover, .row-menu button.peligro:focus-visible { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.menu-caret { font-size: 9px !important; margin-left: 2px; }

/* ── Publicación web: checklist "camino a la web" del modal ─────────────── */
/* El modal de publicación es más ancho que el de formulario (480px): checklist
   + pestañas respiran mejor. Mismo patrón :has() que saldo/cierre/lote-edit. */
.modal:has(.pubweb-status) { max-width: 640px; }
.pubweb-tabs { display: flex; margin-bottom: 16px; }
.pubweb-tabs button { flex: 1; }
.pubweb-status { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 12px 13px; margin-bottom: 14px; }
.pubweb-head { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.pubweb-head--on  { color: var(--st-activo); }
.pubweb-head--mid { color: var(--st-preparando); }
.pubweb-head--off { color: var(--ink-3); }
.pubweb-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pubweb-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.pubweb-item b { color: var(--ink); }
.pubweb-dot { flex: none; width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; margin-top: 1px; }
.pubweb-item--ok    .pubweb-dot { background: var(--green-glow); color: var(--st-activo); }
.pubweb-item--falta .pubweb-dot { background: var(--amber-bg); color: var(--st-preparando); }
.pubweb-item--info  .pubweb-dot { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-4); }
.pubweb-item--info  { color: var(--ink-3); }

/* ── Vista previa de la card de cartelera (modal de publicación) ──────────
   Réplica visual del sitio público, que es SIEMPRE claro: colores fijos de su
   paleta (humo/marino/oro/fuego), independientes del tema del admin. */
.pubweb-pv-stage { display: flex; flex-direction: column; align-items: center; padding: 24px 18px; background: #f7f8fa; border: 1px solid var(--line); border-radius: 10px; }
.pubweb-pv-nota { margin: 10px 2px 0; font-size: 12px; color: var(--ink-3); }
/* Renglón de posición bajo la card: ¿sale primera en la cartelera o no? */
.pubweb-pv-pos { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: #5a6673; }
.pubweb-pv-pos--primera { color: #8f6b1f; }
.pubweb-pv-pos i { font-size: .9em; }
.pv-off { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: #8f6b1f; background: #fff8e1; border: 1px solid #e8d9a8; border-radius: 8px; padding: 8px 11px; }
.pv-card { width: 100%; max-width: 300px; background: #fff; border: 1px solid #e2e6eb; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,35,.07); color: #101823; font-family: 'Segoe UI', 'Avenir Next', system-ui, sans-serif; }
.pv-card--oro { border: 2px solid #c79a3b; }
.pv-card--apagada { filter: grayscale(.55); opacity: .75; }
.pv-foto-wrap { position: relative; }
.pv-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.pv-estado { position: absolute; left: 10px; top: 10px; background: #c79a3b; color: #0b1626; font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 4px; }
.pv-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 15px; }
.pv-meta { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5a6673; }
.pv-meta--fuego { color: #b23a12; }
.pv-tit { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #101823; }
.pv-sub { margin: 0; font-size: 12.5px; color: #5a6673; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.pv-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.pv-chip--marino { background: #101e33; color: #fff; }
.pv-chip--borde { border: 1px solid #cbd2da; color: #101e33; }
.pv-chip--tenue { color: #5a6673; }
.pv-chip--fuego { background: #e04e1f; color: #fff; }
.pubweb-quitar { margin-top: 8px; align-self: flex-start; }
/* Card de CATÁLOGO (lote) en la vista previa: mismos colores del sitio. */
.pvl-foto { aspect-ratio: auto; height: 144px; }
/* Placeholder de portada (mismo alto que la foto): monograma de la casa. */
.pv-ph { width: 100%; height: 144px; display: flex; align-items: center; justify-content: center; background: #eff1f4; color: #9aa5b1; font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; }
.pvl-fotos-badge { position: absolute; right: 8px; bottom: 8px; background: rgba(16,24,35,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.pv-meta--oro { color: #8f6b1f; }
/* Cards de PROPIEDAD y de FOTO DEL SITIO en la vista previa: mismos altos que
   el sitio (h-32 y h-40 de la grilla real) para que la proporción no mienta. */
.pvi-foto { aspect-ratio: auto; height: 128px; }
.pvp-foto { aspect-ratio: auto; height: 160px; }
/* Sin foto la propiedad sale con el cartel oscuro del sitio; una foto del
   sitio sin imagen propia cae a una genérica de la casa. */
.pv-ph--prop { height: 128px; background: linear-gradient(135deg, #16283f, #0b1626); color: rgba(255,255,255,.6); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.pv-ph--generica { height: 160px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 0 12px; }
.pv-sub--num { font-family: var(--mono); font-size: 11.5px; }
.pv-apagada-nota { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; }
/* Miniatura en el listado de galerías de la portada: sin ver la foto, la fila
   es un título suelto y hay que abrir cada una para saber qué es. */
.web-foto-mini { width: 46px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.web-foto-mini--vacia { display: grid; place-items: center; background: var(--surface-2); color: var(--ink-4); font-size: 12px; }
.pvl-est { margin: 0; padding-top: 6px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #101e33; }
.pvl-ultima { margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: #e04e1f; }
.pvl-ofertar { flex: 1; text-align: center; }

.web-switch { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; margin-bottom: 12px; }
.web-switch input { margin-top: 3px; accent-color: var(--green-600); width: 16px; height: 16px; flex: none; cursor: pointer; }
.web-switch span { display: flex; flex-direction: column; gap: 1px; }
.web-switch b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.web-switch small { font-size: 12px; color: var(--ink-3); }
.web-intro { margin: -6px 0 14px; font-size: 13px; }
.web-intro b { color: var(--ink-2); }

/* ── Historial: sección Piezas (estado de cada pieza consignada, por unidad) ──
   Reusa la fórmula visual de .badge (color-mix sobre un token --c) para el chip
   de conteo por estado. Cada estado tiene su color semántico. */
.pz-badge {
  --c: var(--st-listo);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 82%, var(--ink));
  background: color-mix(in srgb, var(--c) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
}
[data-theme="dark"] .pz-badge { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.pz-badge i { font-size: .82em; opacity: .9; }
.pz-badge--stock { --c: var(--st-listo); }       /* verde: disponible en depósito */
.pz-badge--lote  { --c: var(--st-programado); }   /* azul: comprometida a un lote */
.pz-badge--vend  { --c: var(--st-preparando); }   /* ámbar: vendida, sin liquidar */
.pz-badge--liq   { --c: var(--green-600); }       /* verde fuerte: vendida y liquidada */
.pz-badge--dev   { --c: var(--ink-3); }           /* muted: devuelta (ya vuelta a "en stock") */
.pz-badge--ret   { --c: var(--st-cerrado); }      /* slate: retirada por el cliente */
/* "devuelta" no es un bucket propio (vive dentro de en stock): se aclara en la traza. */
.pz-nota { font-size: 11px; font-style: italic; color: var(--ink-4); }

/* Fila compacta: una línea por pieza, alineada al medio. */
.hist-pz-table td { vertical-align: middle; }
.pz-pieza { min-width: 160px; }
.pz-nom { font-weight: 600; color: var(--ink); }
.pz-qty { color: var(--ink-3); font-size: 12px; margin-left: 2px; }
/* Resumen de estados en UNA línea: texto chico con un punto de color por estado. */
.pz-estado-min { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.pz-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pz-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.pz-st--stock { --c: var(--st-listo); }
.pz-st--lote  { --c: var(--st-programado); }
.pz-st--vend  { --c: var(--st-preparando); }
.pz-st--liq   { --c: var(--green-600); }
.pz-st--ret   { --c: var(--st-cerrado); }
/* Imprimir por fila: la celda de acciones es clickeable y muestra el ícono como
   PSEUDO-elemento (::after con un SVG de fondo). Cualquier ELEMENTO real (<button>
   o <i>) dentro de una fila de esta tabla promovía una capa GPU que rompía el
   repintado del hover (dejaba un agujero oscuro sobre la columna "Estado"); un
   pseudo no es un elemento del DOM y lo evita. La celda entera es el target del clic. */
.pz-print-cell { cursor: pointer; text-align: right; }
.pz-print-cell::after {
  content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23789184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .5; transition: opacity .15s ease;
}
.hist-pz-table tbody tr:hover .pz-print-cell::after { opacity: 1; }

/* ── Historial: toolbar de filtros (buscador de texto + combobox de remate) ── */
/* Toolbar de ancho completo DEBAJO del título, alineada a la IZQUIERDA — igual que
   el .toolbar del resto de la app (no encajada a la derecha del head). */
.hist-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--line); }
/* Search local del head — replica el look de .toolbar .search (lupa + halo dorado al focus). */
.hist-filtros > .search {
  flex: 1 1 180px; max-width: 240px; height: 36px; padding: 0 12px 0 36px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; background: var(--surface-2); color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23789184' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 50%; background-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.hist-filtros > .search::placeholder { color: var(--ink-4); }
.hist-filtros > .search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
/* Combobox buscable de remate — reusa .vt-combo / .vt-combo-list (ya en app.css).
   El input es un combobox (sin lupa); look alineado al search de texto. */
.hist-combo { flex: 1 1 180px; max-width: 240px; }
.hist-combo[hidden] { display: none; }
.hist-combo .search {
  width: 100%; height: 36px; padding: 0 12px; font: inherit; font-size: 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hist-combo .search::placeholder { color: var(--ink-4); }
.hist-combo .search:focus { outline: none; border-color: var(--green-400); box-shadow: var(--ring); }
.hist-combo .vt-combo-list .combo-todos { color: var(--ink-3); font-style: italic; }

/* ── Historial: footer de paginación (reusa .vt-panel-foot) ── */
.hist-pager { flex-wrap: wrap; gap: 10px; }
.hist-pager-info { font-size: 12.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.hist-pager-btns { display: flex; align-items: center; gap: 8px; }
.hist-pager-btns .btn i { font-size: 11px; opacity: .85; }
.hist-pager-btns .btn:disabled { opacity: .45; cursor: default; }

/* ── Historial: banner de 2 saldos (Comprador · Vendedor) ── */
.vt-kpis--2 { grid-template-columns: repeat(2, 1fr); }
.hist-banner { margin-bottom: 16px; }
@media (max-width: 560px) { .vt-kpis--2 { grid-template-columns: 1fr; } }

/* Subhead "Recibos" dentro de un sub-panel (alineado al padding de las tablas). */
.hist-subhead--pad { padding: 0 20px; }

/* Utilidades (clases en vez de style inline — la CSP bloquea estilos inline). */
.vt-money--gold { color: var(--gold); }
.hist-cid { font-size: 11px; color: var(--ink-4); }

/* Botón alineado a la derecha dentro de una barra .hist-filtros (ej. "Ver recibos"). */
.hist-filtros-right { margin-left: auto; }

/* Modal "Ver recibos": contenido a sangre completa (como un panel) — barra de
   filtros arriba, tabla al medio y pie de paginación abajo. La tabla tiene ALTO
   FIJO para 6 filas (thead 38px + 6×61px ≈ 404, +buffer) → el modal no crece ni
   salta entre páginas; las páginas incompletas dejan espacio, no achican. */
.hist-recibos-modal { margin: -24px; }
.hist-recibos-modal .table-wrap { border: none; border-radius: 0; box-shadow: none; height: 408px; overflow-y: auto; }

/* ── Saldo por sección: cabecera de cada panel de rol (Comprador/Vendedor) ──
   El valem es el número protagonista del rol. El de comprador es clickeable
   (toggle de deuda) cuando hay saldo pendiente. */
.hist-saldo-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.hist-saldo-ico {
  width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--green-ink); font-size: 14px;
}
.hist-saldo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-saldo-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.hist-saldo-meta { font-size: 12px; color: var(--ink-4); }
.hist-saldo-meta i { margin-right: 4px; color: var(--gold); font-size: 10px; }
.hist-saldo-val {
  margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1;
}
.hist-saldo-val small { font-size: 14px; color: var(--ink-4); font-weight: 500; }
.hist-saldo-head--amber .hist-saldo-ico { color: var(--gold); }
.hist-saldo-head--amber .hist-saldo-val { color: var(--gold); }
.hist-saldo-head--clickable { cursor: pointer; transition: background-color .16s ease, box-shadow .16s ease; }
.hist-saldo-head--clickable:hover { background: var(--surface); }
.hist-saldo-head--clickable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.hist-saldo-head--clickable.is-on { background: var(--gold-glow); box-shadow: inset 0 0 0 2px var(--gold); }
.hist-saldo-head--clickable.is-on .hist-saldo-meta { color: var(--gold); font-weight: 600; }

/* ── Jerarquía de navegación ──
   PRIMARIO: toggle de rol (#hist-seg) = pastilla verde rellena, algo más grande.
   SECUNDARIO: sub-tabs (.vt-subseg) = tabs SUBRAYADAS, más livianas y subordinadas.
   Dos niveles con tratamientos distintos → el ojo distingue rol vs. vista. */
#hist-seg button { padding: 10px 20px; font-size: 14px; }
#hist-seg button i { font-size: 14px; }

.vt-seg.vt-subseg {
  background: transparent; border: none; box-shadow: none;
  border-radius: 0; padding: 0; gap: 2px;
}
/* Glider del sub-seg = subrayado DESLIZANTE (misma animación de change que el tab
   principal). Lo posiciona el mismo wireSubSegmented (offsetLeft-4 alinea igual). */
.vt-seg.vt-subseg .vt-glider {
  display: block; top: auto; bottom: -1px; height: 2px; border-radius: 999px;
  background: var(--rc, var(--green-600)); box-shadow: none;
}
.vt-seg.vt-subseg button {
  border-radius: 0; padding: 13px 16px; font-size: 13px; font-weight: 600;
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .16s ease, border-color .16s ease;
}
.vt-seg.vt-subseg button:hover { color: var(--ink-2); }
.vt-seg.vt-subseg button.on {
  color: var(--green-ink); background: transparent; border-bottom-color: transparent;
}
.vt-seg.vt-subseg button.on .seg-count {
  background: var(--surface-2); color: var(--green-ink); border-color: var(--line);
}

/* ── Historial: "Cierre" agrupado por remate, como TABLA ──
   Cada remate es un <tbody.hist-cierre-remate>: una fila-remate con los totales de
   su liquidación + una fila-detalle desplegable con la tabla de sus lotes. */
.hist-cierre { padding: 16px 20px; }
.hist-cierre-table { width: 100%; }
.hist-cierre-remate.is-hidden { display: none; }
/* Fila-remate: clickeable. HOVER PROLIJO: solo la fila-remate resalta (con un filo de
   acento por rol); la fila-detalle y la sub-tabla NO reaccionan → evita el hover
   repetido/anidado que heredaba de .data-table. Especificidad > la base para ganarle. */
.hist-cierre-row { cursor: pointer; }
.hist-cierre-table tbody tr.hist-cierre-row:hover > td { background: var(--surface-2); color: var(--ink); }
.hist-cierre-table tbody tr.hist-cierre-row:hover > td:first-child { box-shadow: inset 3px 0 0 var(--rc, var(--gold)); }
/* Hover de la fila-detalle: NO cascadear a las celdas anidadas. La sub-tabla de lotes
   son <td> descendientes del <tr> detalle, así que al hoverear el detalle el hover base
   pegaba a TODAS (por eso "a veces siguen apareciendo" los filos dorados). Reset a TODO
   <td> dentro del detalle en hover (no sólo los directos). */
.hist-cierre-table tbody tr.hist-cierre-detrow:hover td { background: transparent; color: inherit; box-shadow: none; }
.hist-cierre-caret-cell { width: 30px; }
.hist-cierre-caret { color: var(--ink-4); display: inline-flex; transition: transform var(--transition); }
.hist-cierre-remate:not(.is-collapsed) .hist-cierre-caret { transform: rotate(90deg); }
.hist-cierre-nom { font-weight: 700; color: var(--ink); }
.hist-cierre-fecha { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.hist-cierre-num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.hist-cierre-com { color: var(--ink-3); }
.hist-cierre-pay { color: var(--green-ink); font-weight: 700; }
.hist-cierre-actions-cell { width: 132px; }
.hist-cierre-pend { color: var(--ink-4); font-style: italic; }
/* Fila-detalle: sub-tabla de lotes con ANIMACIÓN de abrir/cerrar (grid 0fr↔1fr). El td
   queda transparente; el fondo/borde/padding viven en la parte que colapsa (.hcd-inner). */
.hist-cierre-table .hist-cierre-detrow > td { padding: 0; background: transparent; border: 0; }
.hcd-anim { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s var(--smooth, ease); }
.hist-cierre-remate.is-collapsed .hcd-anim { grid-template-rows: 0fr; }
.hcd-inner { overflow: hidden; }
.hist-cierre-detwrap { padding: 8px 16px 14px 40px; background: var(--surface-2); border-top: 1px solid var(--line-strong); }
.hist-cierre-detwrap .table-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; }
@media (min-width: 769px) {
  .hist-cierre-detwrap .hist-table th:last-child,
  .hist-cierre-detwrap .hist-table td:last-child { width: 130px; }
}
@media (prefers-reduced-motion: reduce) { .hcd-anim { transition: none; } }

/* ── Configuración (permisos del operador) ─────────────────────────────────── */
.cfg-panel { padding: 0 0 4px; }
.cfg-hint { padding: 0 16px; margin: 4px 0 10px; }
/* Dos columnas: checkboxes | preview del sidebar. Colapsa a 1 en pantallas chicas. */
.cfg-grid { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 18px; padding: 4px 16px 16px; align-items: start; }
@media (max-width: 720px) { .cfg-grid { grid-template-columns: 1fr; } }
.cfg-col { min-width: 0; }

.cfg-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.cfg-item { margin: 0; }
.cfg-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .15s, background .15s;
}
.cfg-toggle:hover { border-color: var(--green-600); }
.cfg-toggle input { width: 17px; height: 17px; accent-color: var(--green-600); cursor: pointer; flex: none; }
.cfg-item-ico { color: var(--ink-3); width: 18px; text-align: center; }
.cfg-item-label { font-weight: 600; color: var(--ink); }
.cfg-panel .form-actions { padding: 0; margin: 0; }

/* Preview: mini-sidebar que espeja el menú del operador (verde oscuro como el real). */
.cfg-preview { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.cfg-preview-head { padding: 9px 12px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface-2, var(--surface)); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; }
.cfg-preview-sidebar { background: var(--green-800); padding: 10px 8px; min-height: 90px; }
.cfg-preview-group { color: var(--gold); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px 4px; opacity: .85; }
.cfg-preview-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 500; }
.cfg-preview-item i { width: 16px; text-align: center; color: var(--gold); opacity: .9; }
.cfg-preview-empty { color: var(--ink-3); font-size: 12.5px; padding: 14px 10px; margin: 0; display: flex; align-items: center; gap: 8px; }
.cfg-preview-foot { color: var(--ink-3); font-size: 11.5px; padding: 8px 12px 10px; margin: 0; border-top: 1px solid var(--line); }

/* ── Resumen contable por remate (modal) ───────────────────────────────────── */
.rc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 4px;
}
.rc-table th,
.rc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.rc-table th { font-weight: 500; color: var(--text-soft); }
.rc-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-table tr:last-child th,
.rc-table tr:last-child td { border-bottom: 0; }
.rc-table .rc-fuerte th,
.rc-table .rc-fuerte td { font-weight: 700; color: var(--text); font-size: 1.05em; }
.rc-pend { color: var(--muted); font-style: italic; font-size: .9em; }
.rc-nota { margin-top: 8px; }

/* ── Reporte municipal (modal) ─────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rm-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 4px;
  font-size: .95em;
}
.rm-table th,
.rm-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.rm-table thead th { color: var(--text-soft); font-weight: 600; }
.rm-num { text-align: right; font-variant-numeric: tabular-nums; }
.rm-table td.rm-num { text-align: right; }
.rm-table tfoot th,
.rm-table tfoot td { border-top: 2px solid var(--line-strong, var(--line)); border-bottom: 0; font-weight: 700; padding-top: 10px; }
.rm-table .rm-anulada td { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.rm-table .rm-anulada td .badge { text-decoration: none; }

/* ============================================================================
   CONSOLA DE SALA (views/sala.js) - el remate en vivo.
   Pensada para operar de pie y sin mouse: numeros grandes, contraste alto y
   el boton del martillo imposible de errar.
   ============================================================================ */
/* La consola ocupa la pantalla: un solo scroll por panel, nunca la pagina
   entera. Asi el monto, los pasos y el boton VENDIDO estan SIEMPRE a la vista
   mientras la lista de 183 lotes scrollea sola. */
.sala-page { padding: 0; border: 0; background: transparent; box-shadow: none; }
.consola {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  overflow: hidden; display: flex; flex-direction: column;
  height: calc(100dvh - 120px);
}

.cs-top { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.cs-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: color-mix(in srgb, var(--st-activo) 18%, transparent); color: var(--st-activo); }
.cs-vivo .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: cs-latido 1.4s infinite; }
.cs-vivo--off { background: var(--surface); color: var(--ink-4); border: 1px solid var(--line-strong); }
.cs-vivo--off .dot { animation: none; }
@keyframes cs-latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.cs-top h3 { margin: 0; font-size: 14.5px; }
.cs-pos { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.cs-metricas { margin-left: auto; display: flex; gap: 20px; }
.cs-met b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.cs-met span { font-size: 11px; color: var(--ink-4); }
.cs-met--ok b { color: var(--st-activo); }

.cs-cuerpo { display: grid; grid-template-columns: 340px 1fr; flex: 1; min-height: 0; }
.cs-lista { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.cs-buscar { padding: 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; flex: none; }
.cs-buscar-campo { position: relative; }
.cs-buscar-campo i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-4); pointer-events: none; }
.cs-buscar-campo input {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px 0 32px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px;
}
.cs-buscar-campo input::placeholder { color: var(--ink-4); }
.cs-buscar-campo input:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 3px var(--green-glow); }
.cs-filtros { display: flex; flex-wrap: wrap; gap: 5px; }
.cs-chip {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-3);
  border-radius: 99px; padding: 4px 10px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: var(--sans); display: inline-flex; align-items: center; gap: 5px;
}
.cs-chip b { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.cs-chip:hover { border-color: var(--green-400); color: var(--ink-2); }
.cs-chip.on { border-color: var(--green-400); background: var(--green-glow); color: var(--st-activo); }
.cs-chip.on b { color: var(--st-activo); }
.cs-vacio { padding: 20px 14px; font-size: 12.5px; color: var(--ink-4); text-align: center; }
.cs-sinbase { color: var(--st-preparando); }
/* "en pantalla" es lo que el público está viendo en ese instante: va con el
   mismo verde del cartel EN VIVO, para que se lea como estado al aire y no
   como un subtítulo más. */
.cs-enpantalla { color: var(--st-activo); font-weight: 700; }
/* padding-right: donde la barra de scroll se dibuja ENCIMA del contenido (mac,
   táctil, Windows con barras finas) tapaba el monto de cada lote, que es
   justo lo que se mira de reojo mientras se canta. */
/* ── Ficha de propiedad (modal) ──────────────────────────────────────────────
   Todo a la vista y sin pestanas: los datos a la izquierda y, a la derecha, las
   fotos y como queda la card en el sitio.

   El ALTO lo fija el modal, no el contenido: `height` en vez del `max-height`
   elastico de .modal, el cuerpo con overflow hidden y el scroll adentro de cada
   columna. Asi nada de lo que se cargue (una descripcion larga, nueve fotos,
   prender "Destacada") lo hace saltar.

   Este bloque tiene que quedar DESPUES de `.modal:has(.pubweb-status)`: misma
   especificidad, gana el ultimo. */
.modal:has(.propm) { max-width: min(96vw, 1040px); height: min(88vh, 700px); max-height: none; }
.modal:has(.propm) .modal-body { padding: 18px 20px; overflow: hidden; }
.propm { height: 100%; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.propm-estado { margin-bottom: 14px; }
.propm-cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; }
/* Cada columna scrollea por su cuenta; la caja del modal nunca. */
.propm-form, .propm-lado { overflow-y: auto; min-height: 0; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.propm-form::-webkit-scrollbar, .propm-lado::-webkit-scrollbar { width: 8px; }
.propm-form::-webkit-scrollbar-thumb, .propm-lado::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.propm-bloque { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 15px 17px; margin-bottom: 14px; }
.propm-bloque:last-child { margin-bottom: 0; }
.propm-bloque legend, .propm-h { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); padding: 0 4px; }
.propm-h { margin: 0 0 4px; }
.propm-ayuda { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.propm-nota { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
.propm-fila { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.propm-fila--3 { grid-template-columns: repeat(3, 1fr); }
/* El pie del modal es sticky con margenes negativos calibrados contra el
   padding 24px de .modal-body; aca el padding es otro, asi que se recalibra. */
.modal .propm .form-actions { position: static; margin: 14px -20px -18px; padding: 13px 20px; }
/* En pantalla angosta las dos columnas se apilan y scrollea la caja de las dos.
   `display: block` y no un grid de una columna: con el alto ya fijado por
   arriba, las filas `auto` del grid se reparten el espacio en partes iguales y
   recortan el formulario a la mitad. */
@media (max-width: 900px) {
  .propm-cols { display: block; overflow-y: auto; }
  .propm-form, .propm-lado { overflow: visible; padding-right: 0; }
  .propm-lado { margin-top: 14px; }
  .propm-fila, .propm-fila--3 { grid-template-columns: 1fr; }
}
/* Arrastre de fotos (mismo grid que el lote). */
.lg-tile[draggable="true"] { cursor: grab; }
.lg-arrastrando { opacity: .45; }
.lg-destino { outline: 2px dashed var(--green-400); outline-offset: 2px; }

/* ── Ordenar una tabla arrastrando las filas ─────────────────────────────────
   Mismo gesto que la galería de fotos. La lista está en el orden real del
   sitio, así que moverla ES cambiar el sitio.

   El feedback tiene que decir DÓNDE va a caer, no solo que algo se mueve: una
   línea gruesa en el hueco, arriba o abajo de la fila según de qué lado del
   medio esté el mouse. Con un borde tenue no se veía nada y parecía roto. */
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"]:active { cursor: grabbing; }
.fila-asa { color: var(--ink-4); font-size: 13px; }
tr[draggable="true"]:hover .fila-asa { color: var(--gold); }
tr[draggable="true"]:hover td { background: var(--ctrl-hover); }
.fila-arrastrando td { opacity: .35; background: var(--gold-glow); }
.fila-destino--arriba td { box-shadow: inset 0 3px 0 var(--gold); }
.fila-destino--abajo td { box-shadow: inset 0 -3px 0 var(--gold); }
/* Dónde quedó lo que acabás de soltar, hasta que la tabla se vuelve a pintar. */
.fila-movida td { animation: fila-aterriza 1.1s ease-out; }
@keyframes fila-aterriza {
  0%   { background: var(--gold-glow); }
  100% { background: transparent; }
}
.prop-estrella { color: var(--gold); font-size: 11px; }

/* Interruptor de la TRANSMISION en la barra de la consola: apagado es un boton
   neutro; encendido late en rojo, porque significa que hay publico mirando. */
.cs-transmision { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); }
.cs-transmision:hover { border-color: var(--danger); color: var(--danger); }
.cs-transmision.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.cs-transmision i { font-size: 8px; vertical-align: middle; }
.cs-transmision.on i { animation: latir-tv 1.6s ease-in-out infinite; }
@keyframes latir-tv { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cs-rows { overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; padding-right: 8px; }
.cs-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; }
.cs-row:hover { background: var(--row-hover); }
.cs-row .n { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.cs-row .t b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.3; }
.cs-row .t small { font-size: 11px; color: var(--ink-4); }
.cs-row .m { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--st-activo); }
.cs-row .m--sin { color: var(--ink-4); font-weight: 400; }
.cs-row .pre { font-family: var(--mono); font-size: 11px; color: var(--gold); }
.cs-row--vendido .n::before { content: '\2713'; color: var(--st-activo); margin-right: 4px; font-weight: 700; }
.cs-row--sinvender { opacity: .6; }
.cs-row--sinvender .m { color: var(--ink-4); font-weight: 400; }
.cs-row--curso { background: color-mix(in srgb, var(--green-400) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--green-400); }

/* overflow-y: auto, NO hidden. En pantallas bajas la ficha no entra: el panel
   de pujas se lleva 324px, el historial se achicaba a 11px y el martillo
   quedaba directamente CORTADO, sin ninguna forma de llegar a él. Ahora la
   ficha scrollea entera y no se pierde nada. */
.cs-ficha {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto;
}
.cs-lote-head { display: flex; align-items: flex-start; gap: 14px; }
.cs-nav { display: flex; flex-direction: column; gap: 6px; flex: none; }
.cs-nav .btn-ico { width: 34px; height: 30px; padding: 0; }
.cs-lote-head img { width: 66px; height: 66px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-strong); }
.cs-sinfoto { width: 66px; height: 66px; border-radius: 10px; border: 1px dashed var(--line-strong); display: grid; place-items: center; color: var(--ink-4); font-size: 18px; flex: none; }
.cs-lote-head h2 { margin: 0 0 2px; font-size: 17.5px; letter-spacing: -.02em; }
.cs-lote-head .meta { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.cs-lote-head .num { font-family: var(--mono); font-size: 13px; color: var(--gold); font-weight: 600; }

.cs-puja { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); padding: 11px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cs-puja .lbl, .cs-pujar .lbl, .cs-hist .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.cs-puja .monto { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: var(--st-activo); line-height: 1.05; }
.cs-puja .lbl { display: block; margin-bottom: 1px; }
.cs-puja .cs-nada { font-size: 22px; color: var(--ink-4); font-weight: 400; }
.cs-puja--vendido { border-color: color-mix(in srgb, var(--st-activo) 45%, transparent); }
.cs-puja .quien { margin-left: auto; text-align: right; }
.cs-puja .quien { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.cs-puja .quien b { font-size: 13px; }
.cs-puja .quien small { color: var(--ink-3); font-size: 11.5px; font-family: var(--mono); }
.paleta-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 8px; background: var(--green-glow); color: var(--st-activo); }
.origen { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.origen--web { background: color-mix(in srgb, var(--st-programado) 18%, transparent); color: var(--st-programado); }
.origen--sala { background: color-mix(in srgb, var(--st-activo) 18%, transparent); color: var(--st-activo); }
.origen--telefono { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }

.cs-pujar { border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.cs-pujar .lbl { display: block; margin-bottom: 8px; }
.cs-pasos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.cs-paso { font-family: var(--mono); font-size: 13.5px; font-weight: 600; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cs-paso:hover { border-color: var(--green-400); color: var(--green-ink); background: var(--ctrl-hover); }
.cs-paso small { font-size: 10.5px; color: var(--ink-4); font-family: var(--sans); }
.cs-paso--on { border-color: var(--green-400); background: var(--green-glow); color: var(--st-activo); }
.cs-fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.cs-campo { display: flex; flex-direction: column; gap: 5px; }
.cs-campo label { font-size: 11.5px; color: var(--ink-3); }
.cs-campo input { height: 38px; width: 110px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: 15px; font-weight: 600; text-align: center; }
.cs-campo input.ancho { width: 160px; }
.cs-campo input.izq { text-align: left; font-family: var(--sans); font-size: 13.5px; font-weight: 500; padding: 0 11px; }
.cs-tel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cs-tel[hidden] { display: none; }
.cs-req { color: var(--ink-4); font-size: 10.5px; }
.cs-campo input:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 3px var(--green-glow); }
.cs-origenes { display: flex; gap: 6px; }
.cs-origen-btn { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); }
.cs-origen-btn.on { border-color: var(--green-400); background: var(--green-glow); color: var(--st-activo); }
.btn-pujar { height: 38px; padding: 0 18px; }
.cs-hint { font-size: 11px; color: var(--ink-4); margin: 8px 0 0; }
.cs-hint kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--ink-2); }
.cs-quien-hint { font-size: 12px; color: var(--ink-4); margin: 7px 0 0; min-height: 15px; }
.cs-quien-hint--ok { color: var(--st-activo); }

/* Los tres botones del martillo no entran en un solo renglón cuando la ficha
   es angosta: la fila terminaba scrolleando horizontal y "Poner en pantalla"
   quedaba cortado contra el borde. Ahora VENDIDO se lleva su renglón entero
   —es la acción grande— y los otros dos se reparten el de abajo en partes
   iguales. Sin scroll y sin botones a medias. */
.cs-martillo {
  display: flex; flex-wrap: wrap; gap: 10px;
  position: sticky; bottom: 0; z-index: 2; flex: none;
  background: var(--surface); padding-block: 8px;
}
.btn-vendido { flex: 1 1 100%; min-width: 0; min-height: 48px; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.btn-sinvender, .cs-en-pantalla { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 18px; }
.cs-vendido-aviso { margin: 0; font-size: 13px; font-weight: 600; color: var(--st-activo); background: var(--green-glow); border-radius: 10px; padding: 12px 14px; }

.cs-hist { border-top: 1px solid var(--line); padding-top: 10px; flex: 1 0 auto; min-height: 0; overscroll-behavior: contain; }
.cs-hist-h { position: sticky; top: 0; background: var(--surface); padding-bottom: 4px; display: flex; align-items: baseline; gap: 8px; z-index: 1; }
.cs-hist-h .cuenta { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.cs-hist ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cs-hist li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-2); padding: 5px 2px; border-bottom: 1px solid var(--line); }
.cs-hist li:last-child { border-bottom: 0; }
.cs-hist li:first-child { background: color-mix(in srgb, var(--green-400) 8%, transparent); border-radius: 6px; padding: 6px 6px; }
.cs-hist li .m { font-family: var(--mono); font-weight: 600; min-width: 82px; }
.cs-hist li .t { margin-left: auto; font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); white-space: nowrap; }
.cs-hist li .paleta-chip { font-size: 11px; padding: 2px 8px; }
/* Rechazar una puja: se lee la palabra, no una cruz suelta. Queda tenue hasta
   que se pasa por encima, para no gritar en un historial de 50 renglones. */
.cs-rechazar {
  flex: none; height: 22px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line); background: none; color: var(--ink-4); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  transition: color .2s, border-color .2s, background .2s;
}
.cs-rechazar i { font-size: 9px; }
.cs-hist li:hover .cs-rechazar { border-color: var(--line-strong); color: var(--ink-3); }
.cs-rechazar:hover, .cs-rechazar:focus-visible {
  color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent); outline: none;
}
.cs-hist li .origen { font-size: 10px; padding: 2px 7px; }
.cs-hist-vacio { font-size: 12.5px; margin: 8px 0 0; }

@media (max-width: 900px) {
  .consola { height: auto; }
  .cs-cuerpo { grid-template-columns: 1fr; }
  /* En el celular lo primero tiene que ser el lote que está en el martillo, no
     la lista: el operador entra a registrar la puja, no a mirar el catálogo. */
  .cs-ficha { order: -1; }
  .cs-lista { border-right: 0; border-top: 1px solid var(--line); }
  .cs-rows { max-height: 280px; }
  .cs-ficha { overflow: visible; }
  .cs-hist { overflow: visible; }
  .cs-puja .monto { font-size: 32px; }
}
/* Pantallas bajas (notebooks): el monto gigante y los pasos se achican para que
   el boton del martillo no quede nunca abajo del pliegue. */
@media (max-height: 780px) {
  .cs-puja { padding: 9px 14px; }
  .cs-puja .monto { font-size: 29px; }
  .cs-lote-head img, .cs-sinfoto { width: 54px; height: 54px; }
  .cs-lote-head h2 { font-size: 16px; }
  .btn-vendido, .btn-sinvender { height: 44px; }
  .cs-hint { display: none; }
}

/* ============================================================================
   AVISOS de ofertas (components/avisos.js) - la campanita de la barra.
   Prende en rojo cuando entra una oferta nueva; al abrirla se ve quien oferto,
   cuanto y en que lote.
   ============================================================================ */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.avisos { position: relative; }
.avisos-btn {
  position: relative; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-3); cursor: pointer; display: grid; place-items: center;
  transition: color .2s, border-color .2s, background .2s;
}
.avisos-btn:hover { color: var(--green-ink); border-color: var(--green-ink); background: var(--ctrl-hover); }
.avisos-btn--hay { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.avisos-btn--hay i { animation: avisos-toc 1.6s ease-in-out infinite; }
@keyframes avisos-toc {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(12deg); }
  95% { transform: rotate(-10deg); }
}
.avisos-contador[hidden] { display: none; }
.avisos-contador {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
}
.avisos-pop[hidden] { display: none; }
.avisos-pop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.32); z-index: 220; overflow: hidden;
}
.avisos-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.avisos-h b { font-size: 13px; }
.avisos-marcar { border: 0; background: none; color: var(--green-ink); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.avisos-marcar:hover { text-decoration: underline; }
.avisos-vacio { padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--ink-4); margin: 0; }
.avisos-lista { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow: auto; overscroll-behavior: contain; }
.avisos-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 13px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.avisos-item:last-child { border-bottom: 0; }
.avisos-item:hover, .avisos-item:focus-visible { background: var(--row-hover); outline: none; }
.avisos-item.es-nueva { background: color-mix(in srgb, var(--green-400) 8%, transparent); }
.avisos-item.es-nueva:hover { background: var(--row-hover); }
.avisos-monto { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--st-activo); min-width: 78px; }
.avisos-txt { min-width: 0; }
.avisos-txt b { font-size: 12.5px; }
.avisos-txt small { display: block; font-size: 11px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avisos-txt .paleta-chip { font-size: 10.5px; padding: 1px 7px; }
.avisos-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.avisos-cuando { font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); white-space: nowrap; }

@media (max-width: 620px) {
  .avisos-pop { position: fixed; left: 10px; right: 10px; width: auto; top: 70px; }
}

/* Filtros de Sitio Web: chips y buscador en la MISMA fila. Apilados en tres
   renglones (resumen, buscador, chips) se comían media pantalla antes de la
   primera fila de la tabla. */
.web-filtros { gap: 12px; }
.web-filtros .search { flex: 0 1 300px; }
@media (max-width: 720px) {
  .web-filtros { flex-direction: column; align-items: stretch; }
  .web-filtros .search { flex: 1 1 auto; max-width: none; }
  .web-filtros .vt-seg { overflow-x: auto; }
}

/* Las opciones de la accion masiva de lotes: eran un desplegable que parecia un
   dato y era una accion. Ahora se ve que hay que elegir UNA cosa para hacer. */
.pubweb-lotes { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 4px; }
.pubweb-lotes legend { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 0 4px; }
.pubweb-lotes-hoy { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.pubweb-lotes-nota { font-size: 11.5px; color: var(--ink-4); margin: 8px 0 0; }
.pubweb-op { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.pubweb-op:hover { background: var(--ctrl-hover); }
.pubweb-op input { margin-top: 3px; flex: none; }
.pubweb-op span { display: flex; flex-direction: column; gap: 1px; }
.pubweb-op b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pubweb-op small { font-size: 12px; color: var(--ink-3); }
.pubweb-op:has(input:checked) { background: var(--green-glow); }
.pubweb-op:has(input:checked) b { color: var(--st-activo); }

/* ── Tablas: el título y la fecha en un solo renglón ────────────────────────
   Con muchas columnas el título caía en tres renglones y la fecha se partía
   al medio ("2026- / 09-12"), dejando filas de alturas distintas. El ancho no
   se lo llevaban los datos: se lo llevaban los ENCABEZADOS, que son nowrap
   por diseño (mono, mayúscula, letter-spacing .15em), más 18px de padding por
   lado en cada columna. Acá el encabezado puede ir en dos renglones (arriba
   no molesta) y el ancho que se libera se lo lleva el título, que es lo único
   que se lee de corrido. Si alguno no entra se corta con puntos suspensivos y
   el texto completo queda en el title, pero la fila no cambia de alto.
   Solo arriba de 768px: abajo la tabla ya se dibuja como tarjetas. */
@media (min-width: 769px) {
  .data-table thead th { white-space: normal; vertical-align: bottom; }
  .data-table thead th, .data-table tbody td { padding-inline: 12px; }
  .data-table tbody td[data-label="Fecha"] { white-space: nowrap; }
  /* El título NO se fuerza a una línea: con el ancho que gana acá entra solo,
     y si la ventana es chica preferimos que envuelva antes que empujar los
     botones de acción fuera de la pantalla. */
  .data-table tbody td[data-label="Título"] { min-width: 22ch; }
}

/* Ritmo vertical propio: Sitio Web es una lista larga y cada margen de más se
   paga en filas que no entran en la pantalla. */
.page-web { padding: 16px 20px; }
.page-web .page-header { margin-bottom: 10px; }
.page-web .page-nav { display: flex; align-items: center; gap: 14px; }
.page-web .web-intro { margin-bottom: 12px; }
.page-web .vt-controls { margin-bottom: 12px; }
.page-web .toolbar { margin-bottom: 12px; }

/* Nota del panel de saldos: por qué no están todos los lotes listados. */
.sl-nota { margin: 14px 2px 2px; font-size: 13px; line-height: 1.5; }
.sl-nota b { color: var(--gold); font-weight: 600; }

/* Alta de pieza desde el stock: la foto y el nombre del objeto elegido. */
.desde-stock-pv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.desde-stock-pv img { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 8px; background: var(--surface); }
.desde-stock-pv small { display: block; margin-top: 2px; }

/* ── Banda VENDIDO en la esquina de la card ─────────────────────────────────
   Antes el estado era un chip más del encabezado, del mismo tamaño y color que
   la píldora de publicación web: había que buscarlo para saber si el lote
   estaba vendido. Ahora es una cinta cruzada en la esquina, que se reconoce de
   lejos y sin leer.

   Va en la esquina y no encima del contenido a propósito: el lote vendido se
   sigue consultando (qué tenía, cuántas fotos, en qué moneda), así que la
   marca no puede taparlo. La card ya es overflow:hidden, así que la cinta se
   recorta sola contra el borde; pointer-events:none para no comerse ningún
   click de lo que quede debajo. */
.folio-status:empty { display: none; }

.folio-sello {
  position: absolute; z-index: 3; top: 26px; right: -52px; width: 200px;
  transform: rotate(38deg);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  padding: 7px 0; text-align: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1.2;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff; background: var(--green-600);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: no-preference) {
  .folio-sello { animation: sello-entra .22s ease-out both; }
  @keyframes sello-entra {
    from { opacity: 0; transform: rotate(38deg) translateY(-14px); }
    to   { opacity: 1; transform: rotate(38deg) translateY(0); }
  }
}

/* ── Campo de plata con la moneda a la vista ────────────────────────────────
   Un "25" pelado no dice si son pesos o dólares, y el lote puede ir en una
   moneda distinta a la del remate. El símbolo va pegado al campo, no solo en
   la etiqueta, para que se lea junto con el número. */
.campo-moneda { display: flex; align-items: stretch; }
.campo-moneda-sim {
  display: inline-flex; align-items: center; flex: none;
  padding: 0 12px; min-width: 46px; justify-content: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--gold); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.campo-moneda input { flex: 1; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.campo-moneda-lbl { color: var(--gold); font-family: var(--mono); font-size: 12px; }

/* El caret de los menus de accion. FontAwesome del proyecto es un subset de
   78 iconos y NO trae fa-chevron-down: salia un cuadrito vacio en todas las
   tablas. Se usa el chevron que si esta, girado. */
.menu-caret { transform: rotate(90deg); }