/* ============================================================================
   JOUSY DESIGN SYSTEM — jousy.css
   ----------------------------------------------------------------------------
   La única fuente de verdad visual. Antes de este archivo, 44 vistas EJS
   duplicaban sus propios :root, botones, cards y badges — con al menos un
   morado distinto por página y botones primarios AZUL Bootstrap en flujos
   críticos. Todo token o componente nuevo se define AQUÍ, nunca en un <style>
   de página.

   Convive con Bootstrap 5: las clases del sistema llevan prefijo `j-` para no
   colisionar, y los tokens re-mapean las variables de Bootstrap donde importa
   (botón primario, enlaces) para que el código existente herede la marca.
   ========================================================================== */

:root {
  /* ── Color: semántico, no decorativo ────────────────────────────────── */
  --j-primary: #5f2eff;
  --j-primary-hover: #4a1fcc;
  --j-primary-soft: #f1edff;      /* fondos de chips/iconos */
  --j-accent: #90e54b;            /* verde marca — úsese con moderación */

  --j-success: #1a9e55;
  --j-success-soft: #e6f6ee;
  --j-warning: #b58a00;
  --j-warning-soft: #fff8e1;
  --j-danger: #d63541;
  --j-danger-soft: #fdecee;
  --j-info: #0b7285;
  --j-info-soft: #e7f5f8;

  --j-bg: #f6f4ff;                /* fondo de página */
  --j-surface: #ffffff;           /* cards, paneles */
  --j-surface-muted: #f2f1f8;     /* filas fijas, zonas secundarias */
  --j-border: #e6e2f7;

  --j-text: #1a1a2e;
  --j-text-secondary: #4b4b63;
  --j-text-muted: #75758c;        /* AA sobre blanco — no usar gris más claro */
  --j-text-on-primary: #ffffff;

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --j-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
  --j-fs-display: clamp(1.75rem, 4vw, 2.5rem);
  --j-fs-h1: clamp(1.5rem, 3vw, 2rem);
  --j-fs-h2: 1.375rem;
  --j-fs-h3: 1.125rem;
  --j-fs-body: 1rem;
  --j-fs-small: .875rem;
  --j-fs-caption: .75rem;
  --j-fw-bold: 700;
  --j-fw-semibold: 600;

  /* ── Espaciado (escala de 4) ────────────────────────────────────────── */
  --j-sp-1: .25rem;
  --j-sp-2: .5rem;
  --j-sp-3: .75rem;
  --j-sp-4: 1rem;
  --j-sp-5: 1.5rem;
  --j-sp-6: 2rem;
  --j-sp-7: 3rem;

  /* ── Radios ─────────────────────────────────────────────────────────── */
  --j-radius-sm: 8px;
  --j-radius-md: 12px;
  --j-radius-lg: 16px;
  --j-radius-xl: 20px;
  --j-radius-pill: 999px;

  /* ── Elevación (solo 3 niveles) ─────────────────────────────────────── */
  --j-shadow-sm: 0 1px 3px rgba(20, 10, 60, .08);
  --j-shadow-md: 0 6px 20px rgba(20, 10, 60, .10);
  --j-shadow-lg: 0 16px 48px rgba(20, 10, 60, .18);

  /* ── Re-mapeo de Bootstrap: el azul #0d6efd deja de existir ─────────── */
  --bs-primary: #5f2eff;
  --bs-primary-rgb: 95, 46, 255;
  --bs-link-color: #5f2eff;
  --bs-link-hover-color: #4a1fcc;
}

/* El botón primario de Bootstrap hereda la marca sin tocar cada vista. */
.btn-primary {
  --bs-btn-bg: var(--j-primary);
  --bs-btn-border-color: var(--j-primary);
  --bs-btn-hover-bg: var(--j-primary-hover);
  --bs-btn-hover-border-color: var(--j-primary-hover);
  --bs-btn-active-bg: var(--j-primary-hover);
  --bs-btn-active-border-color: var(--j-primary-hover);
  --bs-btn-disabled-bg: var(--j-primary);
  --bs-btn-disabled-border-color: var(--j-primary);
  --bs-btn-focus-shadow-rgb: 95, 46, 255;
}
.btn-outline-primary {
  --bs-btn-color: var(--j-primary);
  --bs-btn-border-color: var(--j-primary);
  --bs-btn-hover-bg: var(--j-primary);
  --bs-btn-hover-border-color: var(--j-primary);
  --bs-btn-active-bg: var(--j-primary-hover);
  --bs-btn-active-border-color: var(--j-primary-hover);
  --bs-btn-focus-shadow-rgb: 95, 46, 255;
}

/* ── Botones del sistema ──────────────────────────────────────────────── */
.j-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; border: 1px solid transparent; cursor: pointer;
  font-family: var(--j-font); font-weight: var(--j-fw-semibold);
  font-size: var(--j-fs-small); line-height: 1.2;
  padding: .6rem 1.15rem; border-radius: var(--j-radius-md);
  min-height: 44px; /* target táctil mínimo */
  text-decoration: none; transition: background .15s, transform .1s, box-shadow .15s;
}
.j-btn:focus-visible { outline: 3px solid rgba(95,46,255,.4); outline-offset: 2px; }
.j-btn:active { transform: translateY(1px); }
.j-btn-primary { background: var(--j-primary); color: var(--j-text-on-primary); }
.j-btn-primary:hover { background: var(--j-primary-hover); color: #fff; }
.j-btn-secondary { background: var(--j-primary-soft); color: var(--j-primary); }
.j-btn-secondary:hover { background: #e4dcff; color: var(--j-primary-hover); }
.j-btn-ghost { background: transparent; color: var(--j-text-secondary); border-color: var(--j-border); }
.j-btn-ghost:hover { background: var(--j-surface-muted); color: var(--j-text); }
.j-btn-danger { background: var(--j-danger-soft); color: var(--j-danger); }
.j-btn-danger:hover { background: var(--j-danger); color: #fff; }
.j-btn[disabled], .j-btn.disabled { opacity: .55; pointer-events: none; }
.j-btn .j-spinner { width: 1em; height: 1em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: j-spin .7s linear infinite; }
@keyframes j-spin { to { transform: rotate(360deg); } }

/* ── Card ─────────────────────────────────────────────────────────────── */
.j-card {
  background: var(--j-surface); border: 1px solid var(--j-border);
  border-radius: var(--j-radius-lg); box-shadow: var(--j-shadow-sm);
}
.j-card-hover { transition: transform .15s, box-shadow .15s; }
.j-card-hover:hover { transform: translateY(-3px); box-shadow: var(--j-shadow-md); }
.j-card-body { padding: var(--j-sp-4); }

/* ── Sistema de estados: badge + icono + color (nunca solo color) ─────── */
.j-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--j-fs-caption); font-weight: var(--j-fw-bold);
  padding: .28rem .7rem; border-radius: var(--j-radius-pill);
  line-height: 1; white-space: nowrap;
}
.j-status::before { font-weight: 900; }
.j-status-pending   { background: var(--j-warning-soft); color: var(--j-warning); }
.j-status-pending::before   { content: "●"; }
.j-status-review    { background: var(--j-info-soft); color: var(--j-info); }
.j-status-review::before    { content: "◐"; }
.j-status-approved,
.j-status-done      { background: var(--j-success-soft); color: var(--j-success); }
.j-status-approved::before,
.j-status-done::before      { content: "✓"; }
.j-status-action    { background: var(--j-primary-soft); color: var(--j-primary); }
.j-status-action::before    { content: "!"; }
.j-status-rejected,
.j-status-cancelled { background: var(--j-danger-soft); color: var(--j-danger); }
.j-status-rejected::before,
.j-status-cancelled::before { content: "×"; }
.j-status-scheduled { background: var(--j-primary-soft); color: var(--j-primary); }
.j-status-scheduled::before { content: "◷"; }
.j-status-expired   { background: var(--j-surface-muted); color: var(--j-text-muted); }
.j-status-expired::before   { content: "◌"; }

/* ── Stepper del proceso de arriendo ──────────────────────────────────── */
.j-stepper { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.j-stepper li {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--j-fs-caption); font-weight: var(--j-fw-semibold);
  color: var(--j-text-muted);
}
.j-stepper li::before {
  content: "○"; font-weight: 900; font-size: .9rem;
}
.j-stepper li:not(:last-child)::after {
  content: ""; width: 22px; height: 2px; background: var(--j-border);
  margin: 0 .55rem; border-radius: 2px;
}
.j-stepper li.done  { color: var(--j-success); }
.j-stepper li.done::before  { content: "✓"; }
.j-stepper li.done:not(:last-child)::after { background: var(--j-success); }
.j-stepper li.current { color: var(--j-primary); }
.j-stepper li.current::before { content: "●"; }
@media (max-width: 576px) {
  .j-stepper { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .j-stepper li:not(:last-child)::after { display: none; }
}

/* ── "Tu siguiente paso" vs "Esperando a la otra parte" ───────────────── */
.j-next-step {
  display: flex; gap: var(--j-sp-3); align-items: flex-start;
  background: var(--j-primary-soft); border: 1px solid #ddd2ff;
  border-radius: var(--j-radius-md); padding: var(--j-sp-4);
}
.j-next-step .j-next-title { font-weight: var(--j-fw-bold); color: var(--j-primary); font-size: var(--j-fs-small); }
.j-waiting {
  display: flex; gap: var(--j-sp-3); align-items: flex-start;
  background: var(--j-surface-muted); border: 1px dashed var(--j-border);
  border-radius: var(--j-radius-md); padding: var(--j-sp-4);
  color: var(--j-text-secondary); font-size: var(--j-fs-small);
}

/* ── Estado vacío ─────────────────────────────────────────────────────── */
.j-empty { text-align: center; padding: var(--j-sp-7) var(--j-sp-4); color: var(--j-text-muted); }
.j-empty .j-empty-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--j-sp-4);
  background: var(--j-primary-soft); color: var(--j-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.j-empty h5 { color: var(--j-text); font-weight: var(--j-fw-bold); }
.j-empty p { max-width: 420px; margin: 0 auto var(--j-sp-4); font-size: var(--j-fs-small); }

/* ── Skeletons ────────────────────────────────────────────────────────── */
.j-skeleton {
  background: linear-gradient(90deg, #ece9f7 25%, #f6f4ff 50%, #ece9f7 75%);
  background-size: 200% 100%; animation: j-shimmer 1.4s infinite;
  border-radius: var(--j-radius-sm); min-height: 1em;
}
@keyframes j-shimmer { to { background-position: -200% 0; } }

/* ── Formularios ──────────────────────────────────────────────────────── */
.j-label { font-size: var(--j-fs-small); font-weight: var(--j-fw-semibold); color: var(--j-text); margin-bottom: .3rem; display: block; }
.j-label .req { color: var(--j-danger); }
.j-help { font-size: var(--j-fs-caption); color: var(--j-text-muted); margin-top: .25rem; }
.j-field-error { font-size: var(--j-fs-caption); color: var(--j-danger); margin-top: .25rem; font-weight: var(--j-fw-semibold); }
.form-control:focus, .form-select:focus {
  border-color: var(--j-primary);
  box-shadow: 0 0 0 .2rem rgba(95, 46, 255, .18);
}

/* ── Utilidades ───────────────────────────────────────────────────────── */
.j-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.j-text-muted { color: var(--j-text-muted) !important; }
.j-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}