/* ═══════════════════════════════════════════════════════════════
   Lexora — Motion Layer (complemento de style.css)
   Micro-interacciones que style.css no define. Las animaciones de
   entrada, brillos y pulsos de base viven solo en style.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tokens de movimiento ──────────────────────────────────── */
:root {
  --motion-duration-fast: 140ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 380ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent);
  --spotlight-color: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--gold) 18%, transparent) 0%,
    transparent 70%);
}

/* ─── Foco de teclado ───────────────────────────────────────── */
.button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent);
}
.icon-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ─── Nav items: indicador deslizante ───────────────────────── */
.nav-item {
  position: relative;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; bottom: 50%;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold));
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 0.28s var(--motion-ease-spring);
}
.nav-item:hover::before,
.nav-item.active::before { transform: translateY(-50%) scaleY(1); }

/* ─── Sidebar: filo dorado en el borde ──────────────────────── */
.sidebar::after {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%, rgba(200,165,112,.08) 20%,
    rgba(200,165,112,.18) 50%, rgba(200,165,112,.08) 80%, transparent 100%);
  pointer-events: none;
}

/* ─── Tarjetas: elevación + brillo al pasar el ratón ────────── */
/* :where() keeps this at zero specificity so sticky panels (Copiloto, Conversaciones)
   keep their own position instead of shifting down by their `top`. */
:where(.card, .panel, .stat-card, .case-row, .deadline-item, .event-row, .billing-row, .client-row, .case-file-row) {
  position: relative;
}
.card,
.panel,
.stat-card,
.case-row,
.deadline-item,
.event-row,
.billing-row,
.client-row,
.case-file-row {
  transition:
    box-shadow var(--motion-duration-base) var(--motion-ease-out),
    transform var(--motion-duration-base) var(--motion-ease-out),
    border-color var(--motion-duration-fast) ease;
}
.card::before,
.panel::before,
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--spotlight-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.card:hover,
.panel:not(.panel-static):hover,
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.card:hover::before,
.panel:not(.panel-static):hover::before,
.stat-card:hover::before { opacity: 1; }
.auth-card { transition: transform 0.3s var(--motion-ease-out), box-shadow 0.3s ease; }
.auth-card:hover,
.conflict-hit:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16,32,30,.10); }
.conflict-hit { transition: transform 0.22s var(--motion-ease-out), box-shadow 0.22s ease; }

/* ─── Tablas: fila hover ───────────────────────────────────── */
table tbody tr {
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
table tbody tr:hover {
  background-color: color-mix(in srgb, var(--gold-pale) 35%, transparent);
  box-shadow: inset 3px 0 var(--gold);
}
/* Sin transformaciones en filas: un botón que se mueve al hover (Abrir expediente)
   ganaba y perdía el hover en bucle, el cursor parpadeaba y el clic no llegaba. */
.data-table tbody tr { transition: background-color 0.12s ease, box-shadow 0.2s ease; }
.data-table tbody tr,
.data-table tbody tr:hover { transform: none; }
.data-table tbody tr:hover { box-shadow: 0 4px 12px rgba(16,32,30,.05), inset 3px 0 var(--gold); }

/* Keep the hit target fixed through hover and press, including on touch screens. */
.data-table .case-open-button { white-space: nowrap; }
.data-table .case-open-button,
.data-table .case-open-button:hover,
.data-table .case-open-button:active { transform: none; }

/* ─── Inputs, selects, textareas: foco fluido ───────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  transition:
    border-color var(--motion-duration-fast) ease,
    box-shadow var(--motion-duration-fast) ease,
    background-color var(--motion-duration-fast) ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: var(--focus-ring);
}

/* ─── Enlaces de texto: subrayado dibujado ──────────────────── */
a.text-link,
.content a:not(.button):not(.nav-item):not(.icon-button) {
  position: relative;
  text-decoration: none;
}
a.text-link::after,
.content a:not(.button):not(.nav-item):not(.icon-button):not(.auth-brand):not(.brand)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-duration-base) var(--motion-ease-out);
}
a.text-link:hover::after,
.content a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─── Avisos críticos: pulso ────────────────────────────────── */
.badge.danger,
.badge.critical,
.priority-critical,
.deadline-item.is-critical .deadline-tag,
.stat-note.critical {
  animation: criticalPulse 2.4s ease-in-out infinite;
}
@keyframes criticalPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 35%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 0%, transparent); }
}

/* ─── Topbar: filo dorado ───────────────────────────────────── */
.topbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--gold) 25%, transparent) 25%,
    color-mix(in srgb, var(--gold) 45%, transparent) 50%,
    color-mix(in srgb, var(--gold) 25%, transparent) 75%,
    transparent
  );
  opacity: 0.6;
}

/* ─── Scrollbar personalizada ───────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gold) 35%, var(--line));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--gold) 55%, var(--line));
}
::-webkit-scrollbar-corner { background: transparent; }

/* ─── Selección de texto ────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--gold) 70%, var(--ivory));
  color: var(--ink);
}

/* ─── Autenticación: login page ─────────────────────────────── */
.auth-card {
  animation: authCardEnter var(--motion-duration-slow) var(--motion-ease-spring) backwards;
}
.auth-story-copy > * {
  animation: authCopyEnter var(--motion-duration-base) var(--motion-ease-out) backwards;
}
.auth-story-copy > *:nth-child(2) { animation-delay: 80ms; }
.auth-story-copy > *:nth-child(3) { animation-delay: 160ms; }
.auth-story-copy > *:nth-child(4) { animation-delay: 240ms; }
.auth-story-copy > *:nth-child(5) { animation-delay: 320ms; }
.auth-story-copy > *:nth-child(6) { animation-delay: 400ms; }

.auth-loading.visible {
  animation: authCopyEnter 0.3s ease-out forwards;
}

/* ─── Estadísticas: animación de número (conteo) ────────────── */
@keyframes countUp {
  from { transform: translateY(1.2em); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.stat-value.motion-count,
[data-count].motion-count {
  display: inline-block;
  animation: countUp 0.7s var(--motion-ease-out) forwards;
}

/* ─── Ripple en botones (JS añade span.ripple) ──────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 18%, transparent);
  transform: scale(0);
  animation: rippleExpand 0.55s var(--motion-ease-out) forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ─── Promociones: entrada desde arriba ─────────────────────── */
.promotion-banner {
  animation: promotionEnter var(--motion-duration-slow) var(--motion-ease-spring) backwards;
}

/* ─── Impresión: desactivar animaciones ─────────────────────── */
@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Reducir movimiento ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}