/* ============================================================================
   jm-design.css — Sistema de diseño de radiografia-jm (JM Inmobiliaria)
   ----------------------------------------------------------------------------
   FUENTE ÚNICA DE VERDAD de los design tokens.
   Este archivo se carga DESPUÉS de jm-theme.css y jm-corporate.css a propósito:
   redefine en :root todos los custom properties que los archivos legacy
   declaran con valores contradictorios, de modo que gana por orden de cascada.
   NO definas hex crudos fuera de la sección de tokens — consumí variables.

   Índice:
     1. Tokens (color, espaciado, radios, sombras, tipografía, z, motion)
     2. Base / reset / accesibilidad
     3. App shell (sidebar, topbar, main)
     4. Botones
     5. Tarjetas y KPIs
     6. Tablas densas
     7. Píldoras de estado
     8. Toolbars
     9. Formularios
    10. Estados vacíos
    11. Stepper (conducto regular)
    12. Utilidades
    13. Interacción (tooltips, skeleton, spinner, animaciones de entrada)
   ========================================================================== */

/* == 1. TOKENS ============================================================ */
:root {
  /* --- Marca --- */
  --jm-red:        #E21623;   /* acción primaria */
  --jm-red-dark:   #B41019;   /* hover de acción */
  --jm-red-alt:    #B41019;   /* alias legacy */
  --jm-red-soft:   #FCE9EA;   /* fondo tenue de marca */
  --jm-navy:       #11183A;   /* estructura (sidebar, headings) */
  --jm-navy-800:   #1A2350;   /* navy elevado (hover en sidebar) */
  --jm-navy-900:   #0C1129;   /* navy profundo */

  /* --- Neutros cálidos --- */
  --jm-bg:         #F6F5F1;   /* fondo de aplicación */
  --jm-card:       #FFFFFF;   /* superficie */
  --jm-cream:      #F6F5F1;   /* alias legacy */
  --jm-soft:       #EFEDE7;   /* superficie hundida / thead */
  --jm-line:       #E3E1DA;   /* bordes */
  --jm-line-strong:#CFCCC3;   /* bordes de inputs */
  --jm-ink:        #1B1F2A;   /* texto principal (12.9:1 sobre blanco) */
  --jm-text:       #1B1F2A;   /* alias legacy */
  --jm-black:      #12151D;   /* alias legacy */
  --jm-muted:      #5A6070;   /* texto secundario (5.6:1 sobre blanco) */
  --jm-text-muted: #5A6070;   /* alias legacy */

  /* --- Semánticos de estado --- */
  --jm-success:      #0F7A43;
  --jm-success-bg:   #E4F2EA;
  --jm-warning:      #B8860B;  /* iconos y bordes; para texto pequeño usar -ink */
  --jm-warning-ink:  #7A5906;  /* alerta legible en tamaño pequeño (5.9:1) */
  --jm-warning-bg:   #FBF3DC;
  --jm-danger:       #C62828;
  --jm-danger-bg:    #FBEAEA;
  --jm-info:         #1A56C4;
  --jm-info-bg:      #E8EEFA;

  /* --- Espaciado (densidad 8/10) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* --- Radios --- */
  --jm-radius-sm:   6px;
  --jm-radius:      8px;
  --jm-radius-lg:   12px;
  --jm-radius-full: 999px;

  /* --- Sombras --- */
  --jm-shadow-sm: 0 1px 2px rgba(17, 24, 58, .05);
  --jm-shadow:    0 1px 2px rgba(17, 24, 58, .05), 0 2px 8px rgba(17, 24, 58, .06);
  --jm-shadow-lg: 0 4px 12px rgba(17, 24, 58, .08), 0 12px 32px rgba(17, 24, 58, .10);
  /* halo de marca para elementos primarios en hover */
  --jm-glow-red:  0 2px 6px rgba(226, 22, 35, .25), 0 6px 20px rgba(226, 22, 35, .18);

  /* --- Tipografía --- */
  --jm-font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* mono para datos duros: IDs, matrículas, cédulas, montos de sistema */
  --jm-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, ui-monospace, monospace;
  --fs-xs:   0.8125rem;  /* 13px — mínimo permitido */
  --fs-sm:   0.875rem;   /* 14px — tablas, controles densos */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.375rem;   /* 22px — h1 de página */
  --fs-2xl:  1.75rem;    /* 28px — valores de KPI */

  /* --- Z-index --- */
  --z-sticky:  20;
  --z-scrim:   35;
  --z-sidebar: 40;
  --z-modal:   60;
  --z-help:    100;   /* reservado para _help_widget */

  /* --- Movimiento --- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* --- Dimensiones del shell --- */
  --sidebar-w: 248px;
  --topbar-h:  56px;
}

/* == 2. BASE ============================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--jm-font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--jm-ink);
  background: var(--jm-bg);
  letter-spacing: 0;
  overflow-x: hidden; /* el body nunca scrollea horizontal; las tablas anchas
                         scrollean dentro de .table-wrap */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--jm-font);
  color: var(--jm-navy);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--fs-xl);  font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-lg);  font-weight: 600; }
h3 { font-size: var(--fs-base); font-weight: 600; }
h4 { font-size: var(--fs-sm);  font-weight: 600; }

a { color: var(--jm-info); }

img, svg { max-width: 100%; }
svg { flex-shrink: 0; }

::selection { background: rgba(226, 22, 35, .14); }

/* Scrollbars finos, acordes al lienzo */
* { scrollbar-width: thin; scrollbar-color: var(--jm-line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--jm-line-strong);
  border-radius: var(--jm-radius-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }
.jm-sidebar { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.jm-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); background-clip: content-box; }

/* Focus visible SIEMPRE — nunca quitar el outline */
:focus-visible {
  outline: 2px solid var(--jm-info);
  outline-offset: 2px;
  border-radius: 2px;
}
.jm-sidebar :focus-visible {
  outline-color: #fff;
}

/* Skip link para teclado */
.jm-skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: calc(var(--z-help) + 1);
  background: var(--jm-navy);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--jm-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.jm-skip:focus { left: var(--space-2); }

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

/* == 3. APP SHELL ========================================================= */
/* Estructura (hermanos directos de body, en este orden):
     input#jm-nav-toggle  → checkbox oculto (menú móvil, sin JS)
     label.jm-scrim       → telón que cierra el menú en móvil
     aside.jm-sidebar     → navegación lateral
     div.jm-app           → topbar + main                                    */

.jm-nav-toggle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.jm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 17, 41, .5);
  z-index: var(--z-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.jm-nav-toggle:checked ~ .jm-scrim {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.jm-sidebar {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--sidebar-w);
  /* capa 1: retícula de puntos sutil (textura técnica)
     capa 2: resplandor de marca desde la esquina superior
     capa 3: degradado estructural navy */
  background:
    radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(420px 260px at 0% 0%, rgba(226, 22, 35, .16), transparent 70%),
    linear-gradient(180deg, var(--jm-navy) 0%, var(--jm-navy-900) 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  color: #fff;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto;
}
.jm-nav-toggle:checked ~ .jm-sidebar { transform: translateX(0); }

.jm-sidebar-brand {
  display: flex;
  align-items: center;
  min-height: var(--topbar-h);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.jm-sidebar-brand a { display: inline-flex; align-items: center; gap: var(--space-2); }
.jm-sidebar-brand img { height: 30px; width: auto; display: block; }

.jm-sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-2) var(--space-4);
}

.jm-nav-group { margin-bottom: var(--space-4); }
.jm-nav-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .45);
  padding: var(--space-2) var(--space-3) var(--space-1);
}

.jm-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;                /* objetivo táctil */
  padding: var(--space-2) var(--space-3);
  border-radius: var(--jm-radius);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.jm-nav-item svg {
  width: 20px; height: 20px; stroke-width: 1.5;
  transition: transform var(--dur-base) var(--ease-spring), color var(--dur-fast) var(--ease);
}
.jm-nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.jm-nav-item:hover svg { transform: translateX(1px) scale(1.06); }
.jm-nav-item.is-active {
  background: linear-gradient(90deg, rgba(226, 22, 35, .16), rgba(255, 255, 255, .05) 65%);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--jm-red);
}
.jm-nav-item.is-active svg { color: #FF6B74; }

.jm-sidebar-user {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.jm-user-info { flex: 1; min-width: 0; }
.jm-user-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jm-user-rol {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--jm-radius-full);
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.jm-logout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-2);
  border-radius: var(--jm-radius);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.jm-logout:hover { background: var(--jm-navy-800); color: #fff; }
.jm-logout svg { width: 18px; height: 18px; stroke-width: 1.5; }

/* --- Columna de contenido --- */
.jm-app { min-height: 100vh; display: flex; flex-direction: column; }

.jm-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--topbar-h);
  padding: var(--space-2) var(--space-4);
  /* vidrio: el contenido se adivina al pasar por debajo */
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  border-bottom: 1px solid var(--jm-line);
  transition: box-shadow var(--dur-slow) var(--ease);
}
/* .is-scrolled la pone el shell cuando el main scrollea (JS mínimo en _layout) */
.jm-topbar.is-scrolled { box-shadow: 0 4px 16px rgba(17, 24, 58, .07); }
.jm-topbar-inner { flex: 1; min-width: 0; }

.jm-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--jm-radius);
  color: var(--jm-navy);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.jm-burger:hover { background: var(--jm-soft); }
.jm-burger svg { width: 22px; height: 22px; stroke-width: 1.5; }

.jm-main {
  flex: 1;
  width: 100%;
  max-width: 1360px;
  padding: var(--space-4);
}

/* Cabecera de página (dentro de la topbar via block page_head,
   o dentro del contenido en páginas legacy) */
.jm-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.jm-page-head h1 { margin: 0; font-size: var(--fs-xl); }
.jm-page-sub { color: var(--jm-muted); margin: 2px 0 0; font-size: var(--fs-xs); }
.jm-page-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* páginas legacy que ponen .jm-page-head dentro del contenido */
.jm-main .jm-page-head { margin-bottom: var(--space-4); }

@media (min-width: 768px) {
  .jm-main { padding: var(--space-5) var(--space-6); }
}

@media (min-width: 1024px) {
  .jm-sidebar { transform: none; }             /* sidebar siempre visible */
  .jm-burger, .jm-scrim { display: none; }
  .jm-app { margin-left: var(--sidebar-w); }
  .jm-main { padding: var(--space-6) var(--space-8); }
}

/* == 4. BOTONES =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--jm-radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--jm-font);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; stroke-width: 1.5; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: linear-gradient(180deg, #F0303C, var(--jm-red) 60%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 3px rgba(180, 16, 25, .3);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #DC1A27, var(--jm-red-dark) 70%);
  filter: none;
  box-shadow: var(--jm-glow-red);
}

/* !important: jm-theme.css deja .btn-secondary con texto blanco sobre blanco */
.btn-secondary {
  background: var(--jm-card) !important;
  color: var(--jm-ink) !important;
  border-color: var(--jm-line-strong);
}
.btn-secondary:hover { background: var(--jm-soft) !important; }

.btn-ghost { background: transparent; color: var(--jm-muted); }
.btn-ghost:hover { background: var(--jm-soft); color: var(--jm-ink); }

.btn-danger { background: var(--jm-danger); color: #fff; }
.btn-danger:hover { background: #A82121; }
.btn-danger-ghost { background: transparent; color: var(--jm-danger); }
.btn-danger-ghost:hover { background: var(--jm-danger-bg); }

.btn-sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }

@media (pointer: coarse) {
  .btn { min-height: 44px; }        /* objetivo táctil en pantallas touch */
}

/* == 5. TARJETAS Y KPIs =================================================== */
.jm-card {
  background: var(--jm-card);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--jm-shadow-sm);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.jm-card:hover { border-color: var(--jm-line-strong); box-shadow: var(--jm-shadow); }
/* confirmaciones destructivas */
.jm-card--danger { border-color: rgba(198, 40, 40, .35); background: #FFF9F9; }
.jm-card--danger:hover { border-color: rgba(198, 40, 40, .5); }
.jm-card-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--jm-muted);
  margin: 0 0 var(--space-2);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.kpi {
  position: relative;
  background: var(--jm-card);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--jm-shadow-sm);
  min-width: 0;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
/* hairline de marca que se enciende al pasar por encima */
.kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--jm-red), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.kpi:hover {
  transform: translateY(-2px);
  border-color: var(--jm-line-strong);
  box-shadow: var(--jm-shadow);
}
.kpi:hover::after { opacity: 1; }
.kpi-label {
  color: var(--jm-muted);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.kpi-label svg { width: 14px; height: 14px; stroke-width: 1.5; }
.kpi-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--jm-navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { color: var(--jm-muted); font-size: var(--fs-xs); margin-top: var(--space-1); }
.kpi-sub a { color: var(--jm-muted); }
.kpi-sub a:hover { color: var(--jm-ink); }

/* variantes de estado */
.kpi--danger  { border-color: var(--jm-danger);  border-left: 3px solid var(--jm-danger); }
.kpi--danger  .kpi-value { color: var(--jm-danger); }
.kpi--warning { border-color: var(--jm-warning); border-left: 3px solid var(--jm-warning); }
.kpi--warning .kpi-value { color: var(--jm-warning-ink); }
.kpi--success .kpi-value { color: var(--jm-success); }

.delta-up   { color: var(--jm-success); font-weight: 600; }
.delta-down { color: var(--jm-danger);  font-weight: 600; }

/* --- Tarjetas de elección de vía (choosers de alta) ----------------------- */
.via-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.via-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  background: var(--jm-card);
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-radius-lg);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.via-card:hover {
  border-color: var(--jm-red);
  box-shadow: var(--jm-shadow-lg);
  transform: translateY(-2px);
}
.via-card:focus-visible { outline: 3px solid var(--jm-red); outline-offset: 2px; }
.via-card-destacada { border-color: var(--jm-red); border-width: 1.5px; }
.via-icon { display: inline-flex; color: var(--jm-red); margin-bottom: var(--space-3); }
.via-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }
.via-badge {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--jm-red);
  background: var(--jm-red-soft);
  padding: 3px 9px;
  border-radius: var(--jm-radius-full);
}
.via-card h2 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.via-card p {
  margin: 0 0 var(--space-4);
  color: var(--jm-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  flex: 1;
}
.via-cta { font-weight: 600; font-size: var(--fs-sm); color: var(--jm-red); }

/* --- Lista de datos (páginas de detalle): dl.jm-dl > div > dt + dd -------- */
dl.jm-dl {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}
@media (min-width: 768px) {
  dl.jm-dl { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  dl.jm-dl > .span-2 { grid-column: 1 / -1; }
}
dl.jm-dl > div { padding: var(--space-2) 0; border-bottom: 1px dashed var(--jm-line); }
dl.jm-dl dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--jm-muted);
}
dl.jm-dl dd { margin: 2px 0 0; color: var(--jm-ink); font-size: var(--fs-sm); }
dl.jm-dl dd.pre { white-space: pre-wrap; }

/* == 6. TABLAS DENSAS ===================================================== */
.table-wrap {
  overflow-x: auto;                  /* las tablas anchas scrollean acá */
  border: 1px solid var(--jm-line);
  border-radius: var(--jm-radius-lg);
  background: var(--jm-card);
  box-shadow: var(--jm-shadow-sm);
}
.table-wrap > table.jm-table {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

table.jm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--jm-card);
  border-radius: var(--jm-radius-lg);
  overflow: hidden;
  box-shadow: var(--jm-shadow-sm);
}
table.jm-table thead th {
  background: var(--jm-soft);
  color: var(--jm-muted);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--jm-line);
  white-space: nowrap;
}
table.jm-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--jm-soft);
  vertical-align: middle;
}
table.jm-table tbody tr { transition: background var(--dur-fast) var(--ease); }
table.jm-table tbody tr:hover { background: var(--jm-bg); }
/* barra de acento a la izquierda de la fila activa */
table.jm-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--jm-red); }
table.jm-table td.mono, .mono {
  font-family: var(--jm-mono);
  font-size: .93em;
  letter-spacing: -.01em;
}
table.jm-table tbody tr:last-child td { border-bottom: none; }
table.jm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.jm-table td.actions { text-align: right; white-space: nowrap; }

/* == 7. PÍLDORAS DE ESTADO ================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--jm-radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  background: var(--jm-soft);
  color: var(--jm-muted);
  white-space: nowrap;
}
.pill svg { width: 12px; height: 12px; stroke-width: 2; }
/* dot de estado dentro de una píldora; .dot--live late (procesos en curso) */
.dot {
  width: 7px; height: 7px;
  border-radius: var(--jm-radius-full);
  background: currentColor;
  flex-shrink: 0;
}
.dot--live { animation: jm-blink 1.6s var(--ease) infinite; }
@keyframes jm-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: .55; box-shadow: 0 0 6px 0 currentColor; }
}
.pill-green { background: var(--jm-success-bg); color: var(--jm-success); }
.pill-red   { background: var(--jm-danger-bg);  color: var(--jm-danger); }
.pill-blue  { background: var(--jm-info-bg);    color: var(--jm-info); }
.pill-amber { background: var(--jm-warning-bg); color: var(--jm-warning-ink); }
.pill-navy  { background: var(--jm-navy); color: #fff; }

/* == 8. TOOLBARS ========================================================== */
.jm-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.jm-toolbar input[type=search],
.jm-toolbar input[type=text],
.jm-toolbar select {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--jm-line-strong);
  border-radius: var(--jm-radius);
  font-family: var(--jm-font);
  font-size: var(--fs-sm);
  background: var(--jm-card);
  color: var(--jm-ink);
}
.jm-toolbar input[type=search] { min-width: 240px; flex: 1; max-width: 380px; }
.jm-toolbar-spacer { flex: 1; }

/* == 9. FORMULARIOS ======================================================= */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field > label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--jm-ink);
}
.field .req { color: var(--jm-danger); }

.field input[type=text], .field input[type=search], .field input[type=email],
.field input[type=password], .field input[type=number], .field input[type=tel],
.field input[type=date], .field input[type=url], .field input[type=file],
.field select, .field textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--jm-line-strong);
  border-radius: var(--jm-radius);
  font-family: var(--jm-font);
  font-size: var(--fs-sm);
  color: var(--jm-ink);
  background: var(--jm-card);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--jm-info);
  box-shadow: 0 0 0 3px var(--jm-info-bg);
  outline: none;                      /* reemplazado por ring visible */
}

.field-help { font-size: var(--fs-xs); color: var(--jm-muted); }
.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--jm-danger);
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--jm-danger);
}
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus {
  box-shadow: 0 0 0 3px var(--jm-danger-bg);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: span 2; }
}

.form-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--jm-line);
}

/* == 10. ESTADOS VACÍOS =================================================== */
.empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--jm-muted);
}
.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--jm-radius-full);
  background: var(--jm-soft);
  color: var(--jm-muted);
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
}
.empty-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.empty-title { font-size: var(--fs-base); font-weight: 600; color: var(--jm-ink); margin-bottom: var(--space-1); }
.empty-text { font-size: var(--fs-sm); max-width: 44ch; margin: 0 auto var(--space-4); }

/* == 11. STEPPER — CONDUCTO REGULAR ======================================= */
/* Vertical en móvil, horizontal desde 768px. Estados:
   cumplido (verde, check) · actual (rojo marca) · pendiente (gris)
   bloqueado (gris + candado + motivo visible)                               */
.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.step {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}
.step:last-child { padding-bottom: 0; }
/* conector vertical */
.step::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  width: 2px;
  background: var(--jm-line);
}
.step:last-child::before { display: none; }
.step--cumplido::before { background: var(--jm-success); }

.step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--jm-radius-full);
  border: 2px solid var(--jm-line-strong);
  background: var(--jm-card);
  color: var(--jm-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.step-marker svg { width: 14px; height: 14px; stroke-width: 2.5; }

.step--cumplido .step-marker { background: var(--jm-success); border-color: var(--jm-success); color: #fff; }
.step--actual .step-marker {
  background: var(--jm-red);
  border-color: var(--jm-red);
  color: #fff;
  box-shadow: 0 0 0 4px var(--jm-red-soft);
  animation: jm-pulse-ring 2.4s var(--ease) infinite;
}
@keyframes jm-pulse-ring {
  0%   { box-shadow: 0 0 0 4px var(--jm-red-soft), 0 0 0 4px rgba(226, 22, 35, .25); }
  70%  { box-shadow: 0 0 0 4px var(--jm-red-soft), 0 0 0 12px rgba(226, 22, 35, 0); }
  100% { box-shadow: 0 0 0 4px var(--jm-red-soft), 0 0 0 12px rgba(226, 22, 35, 0); }
}
.step--bloqueado .step-marker {
  background: var(--jm-soft);
  border-color: var(--jm-line);
  border-style: dashed;
  color: var(--jm-muted);
}

.step-body { min-width: 0; padding-top: var(--space-1); }
.step-title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--jm-ink);
  text-decoration: none;
}
a.step-title:hover { color: var(--jm-red); text-decoration: underline; }
.step--actual .step-title { color: var(--jm-red-dark); }
.step--pendiente .step-title, .step--bloqueado .step-title { color: var(--jm-muted); font-weight: 500; }
.step-detail { display: block; font-size: var(--fs-xs); color: var(--jm-muted); margin-top: 2px; }
.step-reason {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--jm-radius-sm);
  background: var(--jm-warning-bg);
  color: var(--jm-warning-ink);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.step-reason svg { width: 13px; height: 13px; stroke-width: 2; margin-top: 2px; }

@media (min-width: 768px) {
  .stepper { flex-direction: row; align-items: flex-start; }
  .step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
    padding-right: var(--space-2);
    padding-left: var(--space-2);
  }
  /* conector horizontal: desde el marcador hacia el paso siguiente */
  .step::before {
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    top: 13px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .step-body { padding-top: var(--space-2); }
  .step-reason { text-align: left; }
}

/* == 12. UTILIDADES ======================================================= */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; gap: var(--space-2); }
.grid { display: grid; gap: var(--space-3); }
.grid-2 { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.text-muted  { color: var(--jm-muted); }
.text-danger { color: var(--jm-danger); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }

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

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-3);
}
.section-head h2 { margin: 0; }

/* == 13. INTERACCIÓN ====================================================== */

/* --- Panel de fuentes LAFT (detalle de propietario y de cliente) ---------- */
.fuentes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
}
@media (max-width: 560px) { .fuentes-grid { grid-template-columns: 1fr; } }
.ftog {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  padding: var(--space-1);
  color: var(--jm-ink);
  border-radius: var(--jm-radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.ftog:hover { background: var(--jm-soft); }
.ftog input { width: auto; flex-shrink: 0; accent-color: var(--jm-red); }
.ftog.locked { color: var(--jm-muted); }
.ftog .lk { margin-left: auto; display: inline-flex; }
.ftog .lk svg { width: 13px; height: 13px; stroke-width: 2; }

/* --- Alertas de resultado (ok / error / aviso) ---------------------------- */
.jm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--jm-radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.jm-alert svg { width: 18px; height: 18px; stroke-width: 2; margin-top: 1px; }
.jm-alert--success { background: var(--jm-success-bg); border-color: rgba(15, 122, 67, .3);  color: var(--jm-success); }
.jm-alert--danger  { background: var(--jm-danger-bg);  border-color: rgba(198, 40, 40, .3);  color: var(--jm-danger); }
.jm-alert--warning { background: var(--jm-warning-bg); border-color: rgba(184, 134, 11, .35); color: var(--jm-warning-ink); }
.jm-alert--info    { background: var(--jm-info-bg);    border-color: rgba(26, 86, 196, .3);  color: var(--jm-info); }

/* --- Tooltip CSS puro: <button data-tip="Texto corto"> ------------------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--jm-radius-sm);
  background: var(--jm-navy-900);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--jm-shadow-lg);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 250ms;   /* no aparece en pasadas accidentales */
}

/* --- Skeleton shimmer para cargas HTMX ----------------------------------- */
.skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--jm-radius-sm);
  background: linear-gradient(90deg, var(--jm-soft) 25%, #fff 40%, var(--jm-soft) 60%);
  background-size: 300% 100%;
  animation: jm-shimmer 1.3s linear infinite;
  color: transparent;
  user-select: none;
}
@keyframes jm-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -60% 0; }
}

/* --- Spinner e indicador de petición en curso ----------------------------- */
.jm-spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--jm-line-strong);
  border-top-color: var(--jm-red);
  border-radius: var(--jm-radius-full);
  animation: jm-rotate .7s linear infinite;
}
@keyframes jm-rotate { to { transform: rotate(360deg); } }

.htmx-indicator { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .btn { pointer-events: none; opacity: .7; }

/* --- Animaciones de entrada: KPIs y tarjetas suben en cascada ------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes jm-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .kpi-grid > * { animation: jm-rise .45s var(--ease) backwards; }
  .kpi-grid > *:nth-child(1) { animation-delay: .02s; }
  .kpi-grid > *:nth-child(2) { animation-delay: .07s; }
  .kpi-grid > *:nth-child(3) { animation-delay: .12s; }
  .kpi-grid > *:nth-child(4) { animation-delay: .17s; }
  .kpi-grid > *:nth-child(5) { animation-delay: .22s; }
  .kpi-grid > *:nth-child(6) { animation-delay: .27s; }
  .jm-main > .jm-card,
  .jm-main > .table-wrap { animation: jm-rise .5s var(--ease) .15s backwards; }
}