/* ============================================================
   Portal Regalías — Alpha Editorial S.A.
   Paleta: papel crema, tinta, ámbar (lomo de libro), esmeralda
   Depth strategy: borders-only (herramienta interna, densidad sobre lift)
   Base unit: 4px / 8px grid
   ============================================================ */

:root {
  /* Superficies */
  --ae-canvas:       #F8FAFC;   /* slate-50 - fondo general */
  --ae-surface:      #FFFFFF;   /* cards, modales */
  --ae-surface-alt:  #F1F5F9;   /* slate-100 - filas alternas, hover */
  --ae-surface-inset:#F8FAFC;   /* inputs, code, etc. */

  /* Tinta (texto) */
  --ae-ink:          #0F172A;   /* slate-900 - texto primario */
  --ae-ink-2:        #475569;   /* slate-600 - texto secundario */
  --ae-ink-3:        #94A3B8;   /* slate-400 - metadata, timestamps */
  --ae-ink-muted:    #CBD5E1;   /* slate-300 - placeholder, disabled */

  /* Bordes */
  --ae-border:       #E2E8F0;
  --ae-border-subtle:#F1F5F9;
  --ae-border-strong:#CBD5E1;

  /* Acento — Primary (Royal Blue) */
  --ae-primary:        #2563EB;   /* blue-600 */
  --ae-primary-light:  #DBEAFE;   /* blue-100 */
  --ae-primary-dim:    #EFF6FF;   /* blue-50 */

  /* Semánticos */
  --ae-success:      #059669;   /* teal-600 */
  --ae-success-bg:   #ECFDF5;   /* teal-50 */
  --ae-warning:      #D97706;   /* amber-600 */
  --ae-warning-bg:   #FFFBEB;   /* amber-50 */
  --ae-error:        #DC2626;   /* red-600 */
  --ae-error-bg:     #FEF2F2;   /* red-50 */

  /* Sidebar */
  --ae-sidebar-width: 256px;
  --ae-sidebar-bg:    #0F172A;   /* slate-900 */
  --ae-sidebar-text:  #94A3B8;   /* slate-400 */
  --ae-sidebar-text-active: #F8FAFC;
  --ae-sidebar-border: #1E293B;  /* slate-800 */

  /* Tipografía */
  --ae-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ae-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Radios */
  --ae-radius-sm:  6px;
  --ae-radius:     8px;
  --ae-radius-lg: 12px;

  /* Sombras (fintech subtle shadows) */
  --ae-shadow-sm: 0 2px 5px -1px rgba(15, 23, 42, 0.05), 0 1px 3px -1px rgba(15, 23, 42, 0.03);
  --ae-shadow:    0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --ae-backdrop:  rgba(15, 23, 42, 0.4);
}

/* ============================================================
   Reset y base
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--ae-font);
  background-color: var(--ae-canvas);
  color: var(--ae-ink);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Layout — Sidebar + Main
   ============================================================ */

.ae-layout {
  display: flex;
  min-height: 100vh;
}

/* -- Sidebar -- */
.ae-sidebar {
  width: var(--ae-sidebar-width);
  background-color: var(--ae-sidebar-bg);
  border-right: 1px solid var(--ae-sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.22s ease-out;
}

.ae-sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--ae-sidebar-border);
}

.ae-sidebar-logo a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ae-logo-mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: var(--ae-radius-sm);
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.ae-logo-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ae-sidebar-text-active);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ae-logo-sub {
  font-size: 0.6875rem;
  color: var(--ae-sidebar-text);
  font-weight: 400;
  display: block;
}

/* -- Nav links -- */
.ae-sidebar-nav {
  flex: 1;
  padding: 12px 0;
}

.ae-sidebar-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ae-sidebar-text);
  opacity: 0.55;
  padding: 8px 20px 4px;
}

.ae-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  /* QW-6: padding aumentado para touch targets mínimos ~40px */
  padding: 10px 20px;
  color: var(--ae-sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 450;
  border-left: 3px solid transparent;
  transition: color 0.12s, background-color 0.12s, border-color 0.12s;
  line-height: 1.4;
}

.ae-nav-link:hover {
  color: var(--ae-sidebar-text-active);
  background-color: rgba(255, 255, 255, 0.06);
}

/* QW-7: Indicador activo con border-left visible + fondo más contrastado */
.ae-nav-link.active {
  color: var(--ae-sidebar-text-active);
  background-color: rgba(37, 99, 235, 0.20);
  border-left-color: var(--ae-primary-light);
  padding-left: 17px;
  font-weight: 600;
}

/* QW-4: Focus visible para navegación con teclado */
.ae-nav-link:focus-visible {
  outline: 2px solid var(--ae-primary-light);
  outline-offset: -2px;
}

.ae-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.ae-nav-link.active .ae-nav-icon {
  opacity: 1;
}

/* Badge "Nuevo" / "Actual" en links del sidebar */
.ae-nav-badge {
  margin-left: auto;
  background-color: var(--ae-primary);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* -- Sidebar divider -- */
.ae-sidebar-divider {
  height: 1px;
  background-color: var(--ae-sidebar-border);
  margin: 8px 0;
}


/* -- Sidebar info (rango de fechas disponibles) -- */
.ae-sidebar-info {
  margin: 0 12px 8px;
  padding: 8px 12px;
  background-color: var(--ae-success-bg);
  border: 1px solid color-mix(in srgb, var(--ae-success) 25%, transparent);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ae-sidebar-info-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ae-success);
  opacity: 0.85;
}

.ae-sidebar-info-range {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ae-success);
  font-variant-numeric: tabular-nums;
}


/* -- Sidebar footer (usuario + salir) -- */
.ae-sidebar-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--ae-sidebar-border);
}

.ae-sidebar-user {
  font-size: 0.8125rem;
  color: var(--ae-sidebar-text);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ae-sidebar-user strong {
  color: var(--ae-sidebar-text-active);
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

.ae-logout-link {
  font-size: 0.8125rem;
  color: var(--ae-sidebar-text);
  text-decoration: none;
  transition: color 0.12s;
}

.ae-logout-link:hover {
  color: var(--ae-error);
}

/* -- Main content -- */
.ae-main {
  margin-left: var(--ae-sidebar-width);
  flex: 1;
  padding: 32px 36px;
  min-width: 0;
}

/* ============================================================
   Página header
   ============================================================ */

/* QW-10: Separador visual entre identidad de página y contenido */
.ae-page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  padding-left: 14px;
  border-bottom: 1px solid var(--ae-border);
  border-left: 3px solid var(--ae-primary);
}

.ae-page-title {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--ae-ink);
  letter-spacing: -0.03em;
  margin: 0 0 5px;
  line-height: 1.25;
}

.ae-page-subtitle {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ae-ink-2);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── Aviso de cobro compacto (inline en page-header) ── */
.ae-aviso-inline {
  flex-shrink: 0;
  max-width: 340px;
  background-color: var(--ae-primary-dim);
  border: 1.5px solid var(--ae-primary-light);
  border-left: 3px solid var(--ae-primary);
  border-radius: var(--ae-radius);
  padding: 10px 14px;
  font-size: 0.8125rem;
}

.ae-aviso-inline--persona {
  background-color: var(--ae-warning-bg);
  border-color: #fde68a;
  border-left-color: var(--ae-warning);
}

.ae-aviso-inline-title {
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ae-primary);
  margin-bottom: 6px;
}

.ae-aviso-inline--persona .ae-aviso-inline-title {
  color: var(--ae-warning);
}

.ae-aviso-inline-body {
  color: var(--ae-ink);
  line-height: 1.5;
}

.ae-aviso-inline-body dl {
  margin: 0 0 6px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 1px;
}

.ae-aviso-inline-body dt {
  font-weight: 600;
  color: var(--ae-ink-2);
  white-space: nowrap;
}

.ae-aviso-inline-body dd {
  margin: 0;
}

.ae-aviso-inline-nota {
  margin: 6px 0 0;
  font-weight: 600;
  color: var(--ae-ink);
  background-color: var(--ae-primary-light);
  padding: 4px 8px;
  border-radius: var(--ae-radius-sm);
  font-size: 0.75rem;
}

.ae-aviso-inline-lista {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ae-aviso-inline-lista li {
  line-height: 1.5;
}

/* En mobile el aviso baja debajo del título */
@media (max-width: 640px) {
  .ae-page-header {
    flex-direction: column;
  }
  .ae-aviso-inline {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================================
   KPI Cards
   ============================================================ */

.ae-kpi-card {
  background-color: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-top: 3px solid var(--ae-primary);
  border-radius: var(--ae-radius);
  padding: 14px 16px 12px;
  height: 100%;
  box-shadow: var(--ae-shadow-sm);
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
  text-align: center;
}

.ae-kpi-card:hover {
  box-shadow: var(--ae-shadow);
  background-color: var(--ae-primary-dim);
}

.ae-kpi-card.ae-kpi-card--success:hover {
  background-color: var(--ae-success-bg);
}

.ae-kpi-card--success .ae-kpi-value {
  color: var(--ae-success);
}

/* Badge de moneda dentro de KPI card — resalta la referencia de moneda */
.ae-kpi-moneda-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.5;
}

.ae-kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ae-ink-2);
  margin-bottom: 6px;
}

.ae-kpi-value {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ae-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.2;
  font-family: var(--ae-font);
}

.ae-kpi-sub {
  font-size: 0.75rem;
  color: var(--ae-ink-2);
  margin-top: 3px;
}

/* Desglose por moneda dentro de la KPI card */
.ae-moneda-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ae-border-subtle);
}

.ae-moneda-row:last-child {
  border-bottom: none;
}

.ae-moneda-valor {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ae-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-family: var(--ae-font);
}

.ae-moneda-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ae-primary);
  background-color: var(--ae-primary-dim);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ae-empty-moneda {
  font-size: 0.875rem;
  color: var(--ae-ink-3);
  font-style: italic;
}

/* ============================================================
   Resumen informativo de liquidación (regalias.html)
   ============================================================ */

/* ME-1: Hero card — número más importante antes de los metadatos */
/* ── Hero split: aviso izquierda + total derecha ── */
.ae-hero-split {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 16px;
  border-radius: var(--ae-radius-lg);
  overflow: hidden;
  box-shadow: var(--ae-shadow-sm);
  border: 2px solid var(--ae-primary);
}

/* Variante distribución — borde y acentos en verde */
.ae-hero-split--distribucion {
  border-color: var(--ae-success);
}

.ae-hero-aviso {
  flex: 1 1 0;
  background-color: var(--ae-primary-dim);
  border-right: 2px solid var(--ae-primary-light);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.ae-hero-aviso--distribucion {
  background-color: var(--ae-success-bg);
  border-right-color: #a7f3d0;        /* teal-200 */
}

.ae-hero-aviso--persona {
  /* Sin override — hereda el color de la vista (azul o verde) */
}

.ae-hero-aviso-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ae-primary);
}

.ae-hero-aviso--distribucion .ae-hero-aviso-title { color: var(--ae-success); }
/* persona hereda — el color lo define la vista, no la entidad */

.ae-hero-aviso-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  margin: 0;
  font-size: 0.8125rem;
}

.ae-hero-aviso-dl dt {
  font-weight: 600;
  color: var(--ae-ink-2);
  white-space: nowrap;
}

.ae-hero-aviso-dl dd {
  margin: 0;
  color: var(--ae-ink);
}

.ae-hero-aviso-nota {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ae-ink);
  background-color: var(--ae-primary-light);
  padding: 5px 10px;
  border-radius: var(--ae-radius-sm);
  line-height: 1.4;
}

.ae-hero-aviso--distribucion .ae-hero-aviso-nota { background-color: #a7f3d0; }

.ae-hero-aviso-lista {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--ae-ink);
}

.ae-hero-aviso-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 14px;
  background-color: var(--ae-primary-light);
  color: var(--ae-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--ae-radius-sm);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  align-self: flex-start;
}

.ae-hero-aviso-download:hover {
  background-color: var(--ae-primary);
  color: #ffffff;
}

/* En vista distribución el botón hereda el verde */
.ae-hero-aviso--distribucion .ae-hero-aviso-download {
  background-color: #a7f3d0;
  color: var(--ae-success);
}

.ae-hero-aviso--distribucion .ae-hero-aviso-download:hover {
  background-color: var(--ae-success);
  color: #ffffff;
}

/* Placeholder admin — tono apagado, solo informativo */
.ae-hero-aviso--admin {
  justify-content: center;
  opacity: 0.65;
}

.ae-hero-aviso-admin-desc {
  font-size: 0.875rem;
  color: var(--ae-ink-2);
  margin: 0;
  line-height: 1.55;
}

.ae-hero-aviso-admin-meta {
  font-size: 0.75rem;
  color: var(--ae-ink-3);
  margin: 0;
  letter-spacing: 0.01em;
}

.ae-hero-aviso-download svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ae-hero-total {
  flex: 0 0 auto;
  min-width: 300px;
  background: var(--ae-primary-dim);
  padding: 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.ae-hero-total--distribucion {
  background-color: var(--ae-success-bg);
}

/* Label y valor del total heredan el color del contexto */
.ae-hero-split--distribucion .ae-resumen-hero-label {
  color: var(--ae-success);
}

.ae-hero-split--distribucion .ae-resumen-hero-value {
  color: var(--ae-success);
}

/* Mobile: apila aviso arriba, total abajo */
@media (max-width: 640px) {
  .ae-hero-split {
    flex-direction: column;
  }
  .ae-hero-aviso {
    border-right: none;
    border-bottom: 2px solid var(--ae-primary-light);
  }
  .ae-hero-aviso--distribucion { border-bottom-color: #a7f3d0; }
  .ae-hero-total {
    min-width: unset;
    padding: 24px 28px;
  }
}

/* Mantener clases originales para compatibilidad (usadas en contextos sin split) */
.ae-resumen-hero {
  background: var(--ae-primary-dim);
  border: 2px solid var(--ae-primary);
  border-radius: var(--ae-radius-lg);
  padding: 24px 32px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  box-shadow: var(--ae-shadow-sm);
}

.ae-resumen-hero-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ae-primary);
}

.ae-resumen-hero-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--ae-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-family: var(--ae-font);
}

.ae-resumen-hero-sub {
  font-size: 0.8125rem;
  color: var(--ae-ink-2);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.ae-resumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 220px));
  gap: 10px;
  margin-bottom: 24px;
}

.ae-resumen-card {
  background-color: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-left: 3px solid var(--ae-border-strong);
  border-radius: var(--ae-radius);
  padding: 10px 14px;
  text-align: left;
}

/* Moneda — borde ámbar sólido + fondo tintado */
.ae-resumen-card--accent {
  border-color: var(--ae-primary-light);
  border-left-color: var(--ae-primary);
  background-color: var(--ae-primary-dim);
}

/* Total a cobrar — borde grueso ámbar + fondo tintado + sombra suave */
.ae-resumen-card--highlight {
  border: 2px solid var(--ae-primary);
  background-color: var(--ae-primary-dim);
  box-shadow: var(--ae-shadow-sm);
}

.ae-resumen-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ae-ink-3);
  margin-bottom: 3px;
}

.ae-resumen-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ae-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-family: var(--ae-font);
  word-break: break-word;
}

/* Valor héroe — fuente grande para el total a cobrar */
.ae-resumen-value--hero {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ae-primary);
  letter-spacing: -0.03em;
}

.ae-resumen-value--date {
  font-family: var(--ae-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}

.ae-resumen-sub {
  font-size: 0.6875rem;
  color: var(--ae-ink-3);
  margin-top: 2px;
}

/* Badge de moneda grande */
.td-moneda-badge--lg {
  font-size: 1rem;
  padding: 4px 10px;
  letter-spacing: 0.04em;
}

/* Badge en el hero — moneda resaltada con peso y color propio */
.td-moneda-badge--hero {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ae-primary);
  background-color: var(--ae-primary-light);
  border: 1.5px solid var(--ae-primary);
  border-radius: 5px;
  padding: 2px 10px;
  display: inline-block;
  line-height: 1.6;
}

.td-moneda-badge--hero.td-moneda-badge--distribucion {
  color: var(--ae-success);
  background-color: var(--ae-success-bg);
  border-color: var(--ae-success);
}

/* ============================================================
   Sección con título
   ============================================================ */

.ae-section {
  margin-bottom: 32px;
}

.ae-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ae-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ae-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============================================================
   Cards de navegación (guía del dashboard)
   ============================================================ */

.ae-nav-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 24px 22px 20px;
  background-color: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-top: 3px solid var(--ae-primary);
  border-radius: var(--ae-radius);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ae-shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease,
              border-top-color 0.18s ease, background-color 0.18s ease;
  align-items: center;
  text-align: center;
}

.ae-nav-card:hover {
  background-color: var(--ae-primary-dim);
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.15), var(--ae-shadow);
  color: inherit;
  text-decoration: none;
  border-top-color: var(--ae-primary);
  transform: translateY(-2px);
}

.ae-nav-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ae-primary-dim);
  border: 1px solid var(--ae-primary-light);
  border-radius: var(--ae-radius);
  color: var(--ae-primary);
  flex-shrink: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ae-nav-card:hover .ae-nav-card-icon {
  background-color: var(--ae-primary-light);
  border-color: var(--ae-primary);
}

.ae-nav-card-icon svg {
  width: 20px;
  height: 20px;
}

.ae-nav-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ae-ink);
  letter-spacing: -0.02em;
}

.ae-nav-card-desc {
  font-size: 0.8125rem;
  color: var(--ae-ink-2);
  line-height: 1.6;
}

/* Cards destacadas — liquidación actual regalías / distribución */
.ae-nav-card--featured {
  background-color: var(--ae-primary-dim);
  border-color: var(--ae-primary-light);
  border-top-color: var(--ae-primary);
  position: relative;
}

.ae-nav-card--featured .ae-nav-card-icon {
  background-color: var(--ae-primary-light);
  border-color: #BFDBFE;           /* blue-200 */
  color: var(--ae-primary);
}

.ae-nav-card--featured:hover {
  background-color: var(--ae-primary-light);
  border-top-color: var(--ae-primary);
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.18), var(--ae-shadow);
}

.ae-nav-card--featured:hover .ae-nav-card-icon {
  background-color: #BFDBFE;       /* blue-200 */
  border-color: var(--ae-primary);
}

/* Badge "Destacado" encima de la card */
.ae-nav-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ae-primary);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================
   Tablas
   ============================================================ */

.ae-table-wrapper {
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius);
  box-shadow: var(--ae-shadow-sm);
  overflow: hidden;
}

/* QW-8: position:relative necesario para el pseudo-elemento ::after */
.ae-table-wrapper--scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 360px);
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Barra de herramientas sobre la tabla */
.ae-table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* Input de búsqueda sobre la tabla */
.ae-search-wrapper {
  position: relative;
  flex: 1;
}

.ae-search-wrapper::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: background-image 0.15s;
}

.ae-search-wrapper:focus-within::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* Dropdown filtro cliente / multi-fecha */
.ae-fecha-dropdown {
  position: relative;
  flex-shrink: 0;
}

.ae-fecha-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 0.8125rem;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-sm);
  background: transparent;
  color: var(--ae-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ae-fecha-btn:hover {
  border-color: var(--ae-border-strong);
  color: var(--ae-ink);
  background: var(--ae-surface-alt);
}

.ae-fecha-btn[aria-expanded="true"] {
  border-color: var(--ae-primary);
  color: var(--ae-primary);
  background: var(--ae-primary-dim);
}

.ae-fecha-chevron {
  flex-shrink: 0;
  transition: transform 0.15s;
  color: var(--ae-ink-3);
}

.ae-fecha-btn:hover .ae-fecha-chevron,
.ae-fecha-btn[aria-expanded="true"] .ae-fecha-chevron {
  color: currentColor;
}

.ae-fecha-btn[aria-expanded="true"] .ae-fecha-chevron {
  transform: rotate(180deg);
}

.ae-fecha-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 230px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--ae-surface);
  border: 1px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-sm);
  box-shadow: 0 4px 16px rgba(15,23,42,0.10), 0 1px 4px rgba(15,23,42,0.06);
  padding: 0;
  overflow: hidden;
}

/* Buscador dentro del panel de clientes */
.ae-panel-search-wrap {
  padding: 8px 8px 7px;
  border-bottom: 1px solid var(--ae-border);
  flex-shrink: 0;
}

.ae-panel-search {
  width: 100%;
  font-size: 0.8rem;
  font-family: var(--ae-font);
  padding: 5px 8px;
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-sm);
  background: var(--ae-surface-inset);
  color: var(--ae-ink);
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.ae-panel-search::placeholder {
  color: var(--ae-ink-muted);
}

.ae-panel-search:focus {
  outline: none;
  border-color: var(--ae-primary);
  background: var(--ae-surface);
}

/* Fila fija "Todos" */
.ae-panel-all-wrap {
  padding: 3px 0;
  border-bottom: 1px solid var(--ae-border);
  flex-shrink: 0;
}

/* Lista scrollable */
.ae-panel-list {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 3px 0;
}

.ae-fecha-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 0.8125rem;
  color: var(--ae-ink-2);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}

.ae-fecha-option:hover {
  background: var(--ae-surface-alt);
  color: var(--ae-ink);
}

/* Opción activa (cliente seleccionado) */
.ae-fecha-option--active {
  background: var(--ae-primary-dim);
  color: var(--ae-primary);
  font-weight: 500;
}

.ae-fecha-option--active:hover {
  background: var(--ae-primary-light);
  color: var(--ae-primary);
}

.ae-fecha-option--all {
  font-weight: 500;
  color: var(--ae-ink);
}


.ae-fecha-divider {
  height: 1px;
  background: var(--ae-border);
  margin: 4px 0;
}

.ae-panel-footer {
  padding: 6px 8px;
  border-top: 1px solid var(--ae-border);
  flex-shrink: 0;
}

.ae-fecha-apply-btn {
  width: 100%;
  padding: 5px 10px;
  font-size: 0.8125rem;
  font-family: var(--ae-font);
  font-weight: 500;
  background: var(--ae-primary);
  color: #fff;
  border: none;
  border-radius: var(--ae-radius-sm);
  cursor: pointer;
  text-align: center;
}

.ae-fecha-apply-btn:hover {
  opacity: 0.88;
}

/* Chips de filtros activos */
.ae-filtros-activos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
}

.ae-chips-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ae-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}

.ae-filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  font-size: 0.8125rem;
  background: var(--ae-primary-dim);
  color: var(--ae-primary);
  border: 1px solid var(--ae-primary-light);
  border-radius: 999px;
  white-space: nowrap;
}

.ae-filtro-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ae-primary);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
}

.ae-filtro-chip-x:hover {
  background: var(--ae-primary);
  color: #fff;
}

/* Checkbox dentro del panel del dropdown — estilos cross-browser mínimos */
.ae-fecha-option input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ae-primary);
  cursor: pointer;
}

/* Botones de filtro por grupo (liquidaciones) */
.ae-grupo-filter {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ae-grupo-btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-sm);
  background: transparent;
  color: var(--ae-ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

/* "Todos" — neutro gris */
.ae-grupo-btn:hover {
  border-color: var(--ae-border-strong);
  color: var(--ae-ink);
  background: var(--ae-surface-alt);
}

.ae-grupo-btn.active {
  background: var(--ae-surface-alt);
  border-color: var(--ae-border-strong);
  color: var(--ae-ink);
  font-weight: 600;
}

/* Regalías — azul (identidad primaria del concepto) */
.ae-grupo-btn--regalias:hover {
  border-color: var(--ae-primary);
  color: var(--ae-primary);
  background: var(--ae-primary-dim);
}

.ae-grupo-btn--regalias.active {
  background: var(--ae-primary);
  border-color: var(--ae-primary);
  color: #fff;
  font-weight: 600;
}

/* Distribución — verde (identidad del concepto) */
.ae-grupo-btn--distribucion:hover {
  border-color: var(--ae-success);
  color: var(--ae-success);
  background: var(--ae-success-bg);
}

.ae-grupo-btn--distribucion.active {
  background: var(--ae-success);
  border-color: var(--ae-success);
  color: #fff;
  font-weight: 600;
}

.ae-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid #16a34a;
  border-radius: var(--ae-radius-sm);
  background: #fff;
  color: #16a34a;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.ae-export-btn:hover {
  background: #16a34a;
  color: #fff;
}

.ae-export-btn:active {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

#ae-table-search {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-sm);
  font-size: 0.875rem;
  font-family: var(--ae-font);
  color: var(--ae-ink);
  background-color: var(--ae-surface-inset);
  outline: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

#ae-table-search:focus {
  border-color: var(--ae-primary);
  background-color: var(--ae-surface);
  box-shadow: 0 0 0 3px var(--ae-primary-dim);
}

#ae-table-search::placeholder {
  color: var(--ae-ink-muted);
}

/* Botón para limpiar el filtro */
.ae-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--ae-ink-muted);
  color: var(--ae-surface);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.ae-search-clear:hover {
  background-color: var(--ae-ink-2);
}

/* Padding extra cuando el botón de limpiar está visible (clase aplicada por JS) */
#ae-table-search.ae-has-clear {
  padding-right: 34px;
}

/* Columnas ordenables */
.ae-th-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 24px !important;
  transition: background-color 0.1s;
}

.ae-th-sortable:hover {
  background-color: #1E293B;
}

/* Indicador de sort neutro — visible pero discreto */
.ae-th-sortable::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  /* Doble triángulo superpuesto: up-dim + down-dim */
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.28);
  opacity: 1;
}

/* Hover sobre th: indicador más brillante */
.ae-th-sortable:hover::after {
  border-bottom-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.55);
}

/* Estado activo asc — triángulo arriba en ámbar */
.ae-th-sort-asc {
  background-color: #1E3A8A !important;
  color: var(--ae-primary) !important;
  font-weight: 600 !important;
}

.ae-th-sort-asc::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--ae-primary);
  border-top: none;
  box-shadow: none;
}

/* Estado activo desc — triángulo abajo en ámbar */
.ae-th-sort-desc {
  background-color: #1E3A8A !important;
  color: var(--ae-primary) !important;
  font-weight: 600 !important;
}

.ae-th-sort-desc::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--ae-primary);
  border-bottom: none;
  box-shadow: none;
}

/* Fila de totales en tfoot — balance final del ledger */
.ae-tfoot-total {
  border-top: 2px solid var(--ae-border-strong);
  background-color: var(--ae-surface-alt);  /* ámbar-dim sólido: equivalente de rgba(193,122,46,0.12) sobre #FFF */
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.ae-tfoot-total td {
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ae-ink);
  vertical-align: middle;
}

.ae-tfoot-total .td-currency {
  font-family: var(--ae-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ae-success);
  font-size: 0.875rem;
}

.ae-tfoot-total .td-mono {
  font-family: var(--ae-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

.ae-tfoot-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ae-primary);
}

.ae-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.ae-table thead th {
  background-color: var(--ae-ink);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 14px;
  text-align: center;
  border: none;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ae-table thead th:first-child {
  border-radius: 0;
}

.ae-table tbody tr {
  border-bottom: 1px solid var(--ae-border-subtle);
  transition: background-color 0.15s;
}

.ae-table tbody tr:last-child {
  border-bottom: none;
}

/* QW-1: Zebra striping — mejora escaneabilidad en tablas financieras densas */
.ae-table tbody tr:nth-child(even) {
  background-color: var(--ae-surface-alt);
}

.ae-table tbody tr:hover {
  background-color: var(--ae-primary-dim);
}

.ae-table tbody td {
  /* QW-3: +2px vertical — más aire en datos financieros */
  padding: 9px 14px;
  color: var(--ae-ink);
  vertical-align: middle;
}

.ae-table .td-mono {
  font-family: var(--ae-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  text-align: right;
}

.ae-table .td-secondary {
  color: var(--ae-ink-2);
  font-size: 0.75rem;
}

.ae-table .td-currency {
  font-family: var(--ae-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ae-success);
  font-weight: 500;
  font-size: 0.75rem;
  /* QW-2: Números financieros siempre alineados a la derecha */
  text-align: right;
}

.ae-table .td-moneda-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ae-primary);
  background-color: var(--ae-primary-dim);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.ae-table .td-moneda-badge--distribucion {
  color: var(--ae-success);
  background-color: var(--ae-success-bg);
}

/* ── Detail view: cabecera de sección dentro de tabla ── */
.ae-table .ae-th-label {
  background-color: var(--ae-surface-inset);
  color: var(--ae-text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-top: 1px solid var(--ae-border);
}
.ae-table .ae-detail-key {
  color: var(--ae-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  width: 18%;
  white-space: nowrap;
  padding-right: 8px;
}

/* QW-9: Empty state dentro de tabla (sabana {% empty %}) */
.ae-empty-state-td {
  text-align: center;
  padding: 40px 24px;
  background-color: var(--ae-surface-inset);
}

/* ============================================================
   Estado vacío
   ============================================================ */

.ae-empty-state {
  background-color: var(--ae-surface-inset);
  border: 1px dashed var(--ae-border-strong);
  border-radius: var(--ae-radius);
  padding: 40px 24px;
  text-align: center;
}

.ae-empty-state-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ae-ink-2);
  margin: 0 0 6px;
}

.ae-empty-state-desc {
  font-size: 0.875rem;
  color: var(--ae-ink-3);
  margin: 0;
}

/* ============================================================
   Badge de rol (admin indicator)
   ============================================================ */

/* ============================================================
   Aviso de cobro (home — usuarios no-admin)
   EMPRESA: azul institucional / PERSONA: ámbar
   ============================================================ */

.ae-aviso-cobro {
  background-color: var(--ae-primary-dim);
  border: 1.5px solid var(--ae-primary-light);
  border-left: 4px solid var(--ae-primary);
  border-radius: var(--ae-radius);
  padding: 20px 24px;
  margin-bottom: 28px;
}

.ae-aviso-cobro--persona {
  background-color: var(--ae-warning-bg);
  border-color: #fde68a;          /* amber-200 */
  border-left-color: var(--ae-warning);
}

.ae-aviso-cobro-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ae-primary);
  margin-bottom: 14px;
}

.ae-aviso-cobro--persona .ae-aviso-cobro-header {
  color: var(--ae-warning);
}

.ae-aviso-cobro-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Empresa: tabla de datos de facturación */
.ae-factura-datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 24px;
  margin: 0 0 14px;
}

.ae-factura-fila {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.ae-factura-fila dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ae-ink-2);
  white-space: nowrap;
}

.ae-factura-fila dd {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ae-ink);
  margin: 0;
}

.ae-aviso-cobro-nota {
  font-size: 0.875rem;
  color: var(--ae-ink);
  margin: 0;
  padding: 10px 14px;
  background-color: var(--ae-primary-light);
  border-radius: var(--ae-radius-sm);
}

/* Persona: descripción y lista */
.ae-aviso-cobro-descarga {
  font-size: 0.875rem;
  color: var(--ae-ink);
  margin: 0 0 10px;
  font-weight: 500;
}

.ae-aviso-cobro-lista {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ae-aviso-cobro-lista li {
  font-size: 0.875rem;
  color: var(--ae-ink);
  line-height: 1.5;
}

.ae-role-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  background-color: var(--ae-primary-dim);
  color: var(--ae-primary);
  margin-left: 8px;
  vertical-align: middle;
}

/* ============================================================
   Login page
   ============================================================ */

.ae-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ae-canvas);
  padding: 24px;
}

.ae-login-card {
  background-color: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  padding: 40px 44px;
  width: 100%;
  max-width: 400px;
}

.ae-login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.ae-login-logo-mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: var(--ae-primary);
  border-radius: var(--ae-radius);
  flex-shrink: 0;
}

.ae-login-logo-text {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ae-ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ae-login-logo-sub {
  font-size: 0.75rem;
  color: var(--ae-ink-2);
  font-weight: 400;
  display: block;
}

.ae-login-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ae-ink);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}

.ae-login-subtitle {
  font-size: 0.875rem;
  color: var(--ae-ink-2);
  margin: 0 0 24px;
}

/* Split-screen layout */
.ae-login-split {
  display: flex;
  width: 100%;
  max-width: 900px;
  min-height: 480px;
  background-color: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10);
}

/* Panel izquierdo — Branding */
.ae-login-brand-panel {
  flex: 0 0 40%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 32px;
  background-color: var(--ae-surface-alt);
  border-right: 1px solid var(--ae-border);
  text-align: center;
}

.ae-login-brand-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 8px;
}

.ae-login-brand-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ae-ink);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.3;
}

.ae-login-brand-sub {
  font-size: 0.875rem;
  color: var(--ae-ink-2);
  margin: 0;
}

/* Panel derecho — Formulario */
.ae-login-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 44px;
}

/* Header móvil (logo visible solo en pantallas pequeñas) */
.ae-login-mobile-header {
  text-align: center;
  margin-bottom: 24px;
}

.ae-login-mobile-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .ae-login-split {
    flex-direction: column;
    max-width: 420px;
    min-height: unset;
  }

  .ae-login-form-panel {
    padding: 32px 28px;
  }
}

/* Form fields */
.ae-field {
  margin-bottom: 16px;
}

.ae-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ae-ink);
  margin-bottom: 6px;
}

.ae-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 0.9375rem;
  font-family: var(--ae-font);
  color: var(--ae-ink);
  background-color: var(--ae-surface-alt);
  border: 1px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-sm);
  outline: none;
  transition: border-color 0.12s, background-color 0.12s;
  line-height: 1.5;
}

.ae-input:focus {
  border-color: var(--ae-primary);
  background-color: var(--ae-surface);
  box-shadow: 0 0 0 3px var(--ae-primary-dim);
}

.ae-input::placeholder {
  color: var(--ae-ink-muted);
}

/* Submit button */
.ae-btn-primary {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-family: var(--ae-font);
  font-weight: 600;
  color: #FFFFFF;
  background-color: var(--ae-primary);
  border: none;
  border-radius: var(--ae-radius-sm);
  cursor: pointer;
  transition: background-color 0.12s, transform 0.08s;
  margin-top: 8px;
  letter-spacing: -0.01em;
}

.ae-btn-primary:hover {
  background-color: #1D4ED8;
}

.ae-btn-primary:active {
  transform: scale(0.99);
}

/* Error messages */
.ae-error-list {
  background-color: var(--ae-error-bg);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--ae-radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  list-style: none;
  margin-top: 0;
}

.ae-error-list li {
  font-size: 0.875rem;
  color: var(--ae-error);
}

/* ============================================================
   Responsive — sidebar collapse < 768px
   ============================================================ */

.ae-sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  background-color: var(--ae-ink);
  border: none;
  border-radius: var(--ae-radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  color: white;
  font-size: 1.125rem;
  line-height: 1;
}

@media (max-width: 767px) {
  .ae-sidebar {
    transform: translateX(-100%);
  }

  .ae-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--ae-shadow);
  }

  .ae-main {
    margin-left: 0;
    padding: 60px 16px 24px;
  }

  .ae-sidebar-toggle {
    display: block;
  }

  .ae-kpi-value {
    font-size: 1.25rem;
  }

  .ae-login-card {
    padding: 28px 24px;
  }

  /* ── Toolbar de tablas en mobile ──
     Los dropdowns de filtros van en la primera fila (flex-wrap ya los maneja).
     El search ocupa todo el ancho disponible y el export queda al lado. */
  .ae-search-wrapper {
    flex: 1 1 100%;   /* ocupa toda la fila — rompe a nueva línea */
    min-width: 0;
  }

/* ME-6: Limpiar todos los filtros — enlace discreto en error color */


.ae-export-btn {
    flex-shrink: 0;
    margin-left: auto; /* empuja el export a la derecha en su fila */
  }

  /* Grupo filter: scroll horizontal en vez de cortar */
  .ae-grupo-filter {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    max-width: 100%;
    padding-bottom: 2px; /* evita que el scrollbar tape los botones */
  }

  /* Tabla: en mobile no fijamos max-height — dejamos scroll natural del body.
     Esto evita el doble scroll (vertical dentro de tabla + horizontal) en touch. */
  .ae-table-wrapper--scroll {
    max-height: none;
    overflow-y: visible;
  }

  /* Resumen grid: una columna en pantallas muy chicas */
  .ae-resumen-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Gráficas toolbar: buscador ocupa todo el ancho en mobile */
  .ae-graficas-search {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    order: 10; /* va al final, debajo de pills y selector de moneda */
  }

  /* Pills y selector de moneda van juntos en la primera fila */
  .ae-graficas-pills {
    flex: 0 0 auto;
    order: 1;
  }

  .ae-graficas-moneda {
    flex: 0 0 auto;
    order: 2;
    margin-left: auto; /* empuja el selector a la derecha */
  }
}

@media (max-width: 479px) {
  /* En pantallas < 480px (iPhone SE, etc.) el resumen va en una sola columna */
  .ae-resumen-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .ae-main {
    padding: 28px 24px;
  }

  /* Tablet: reducimos el max-height porque el viewport es más chico que desktop
     pero mayor que mobile — acá sí tiene sentido el scroll interno de tabla. */
  .ae-table-wrapper--scroll {
    max-height: calc(100vh - 300px);
  }
}

/* ============================================================
   Mobile Backdrop Overlay
   ============================================================ */
.ae-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--ae-backdrop);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ae-sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* ============================================================
   Gráficas — Layout
   ============================================================ */

/* Toolbar filtro de cliente (admin) en vista gráficas */
.ae-cliente-toolbar {
  margin-bottom: 16px;
}

/* Toolbar: pills + buscador en una fila */
.ae-graficas-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Pills de grupo */
.ae-graficas-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.ae-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--ae-border-strong);
  background: var(--ae-surface);
  color: var(--ae-ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--ae-font);
  cursor: pointer;
  transition: all 0.15s;
}

/* "Ambos" — hover neutro */
.ae-pill:hover {
  border-color: var(--ae-border-strong);
  color: var(--ae-ink);
  background: var(--ae-surface-alt);
}

/* "Ambos" activo — neutro gris */
.ae-pill--active {
  background: var(--ae-surface-alt);
  border-color: var(--ae-border-strong);
  color: var(--ae-ink);
  font-weight: 600;
}

/* Regalías — hover azul */
.ae-pill[data-grupo="REGALIAS"]:hover {
  border-color: var(--ae-primary);
  color: var(--ae-primary);
  background: var(--ae-primary-dim);
}

/* Regalías — activo azul sólido */
.ae-pill[data-grupo="REGALIAS"].ae-pill--active {
  background: var(--ae-primary);
  border-color: var(--ae-primary);
  color: #fff;
  font-weight: 600;
}

/* Distribución — hover verde */
.ae-pill[data-grupo="DISTRIBUCION"]:hover {
  border-color: var(--ae-success);
  color: var(--ae-success);
  background: var(--ae-success-bg);
}

/* Distribución — activo verde sólido */
.ae-pill[data-grupo="DISTRIBUCION"].ae-pill--active {
  background: var(--ae-success);
  border-color: var(--ae-success);
  color: #fff;
  font-weight: 600;
}

.ae-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ae-pill-dot--regalias     { background: var(--ae-primary); }
.ae-pill-dot--distribucion { background: var(--ae-success); }

/* Dot se vuelve blanco cuando el pill está activo con fondo de color */
.ae-pill[data-grupo="REGALIAS"].ae-pill--active .ae-pill-dot--regalias,
.ae-pill[data-grupo="DISTRIBUCION"].ae-pill--active .ae-pill-dot--distribucion {
  background: rgba(255,255,255,0.85);
}

/* Buscador de gráficas */
.ae-graficas-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
  max-width: 380px;
}

.ae-graficas-search-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--ae-ink-3);
  pointer-events: none;
  flex-shrink: 0;
}

.ae-graficas-search-input {
  width: 100%;
  padding: 7px 32px 7px 32px;
  border: 1px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-sm);
  background: var(--ae-surface);
  color: var(--ae-ink);
  font-size: 0.875rem;
  font-family: var(--ae-font);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ae-graficas-search-input:focus {
  outline: none;
  border-color: var(--ae-primary);
  box-shadow: 0 0 0 3px var(--ae-primary-dim);
}

.ae-graficas-search-input::placeholder { color: var(--ae-ink-muted); }

.ae-graficas-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--ae-ink-3);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
}

.ae-graficas-search-clear:hover {
  color: var(--ae-error);
  background: var(--ae-error-bg);
}

/* Etiqueta de búsqueda activa */
.ae-graficas-search-active {
  margin: -12px 0 16px;
  font-size: 0.8125rem;
  color: var(--ae-ink-2);
  padding: 6px 12px;
  background: var(--ae-primary-dim);
  border-left: 3px solid var(--ae-primary);
  border-radius: 0 var(--ae-radius-sm) var(--ae-radius-sm) 0;
}

.ae-graficas-search-active strong { color: var(--ae-primary); }

.ae-alert {
  margin: 0 0 16px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  border-radius: var(--ae-radius-sm);
  border-left: 3px solid transparent;
}

.ae-alert--warning {
  background: #FEF9C3;
  border-left-color: #CA8A04;
  color: #713F12;
}

.ae-alert--warning strong { color: #92400E; }

/* KPI strip (deprecated - now uses bootstrap and .ae-kpi-card) */

/* Filas de gráficas (deprecated - now uses bootstrap) */

.ae-graficas-card {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ae-shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ae-graficas-card:hover {
  box-shadow: var(--ae-shadow);
}

.ae-graficas-card-header {
  margin-bottom: 16px;
  text-align: center;
}

.ae-graficas-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ae-ink);
  margin: 0 0 2px;
}

.ae-graficas-card-sub {
  font-size: 0.75rem;
  color: var(--ae-ink-3);
}

.ae-monedas-nota {
  font-weight: 600;
  color: var(--ae-primary);
  letter-spacing: 0.02em;
}

/* Selector de moneda en toolbar */
.ae-graficas-moneda {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ae-moneda-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ae-ink-2);
  white-space: nowrap;
}

.ae-moneda-select {
  font-size: 0.8125rem;
  font-family: var(--ae-font);
  padding: 5px 10px;
  border: 1.5px solid var(--ae-border-strong);
  border-radius: 6px;
  background: var(--ae-surface);
  color: var(--ae-ink-1);
  cursor: pointer;
  transition: border-color 0.15s;
}

.ae-moneda-select:focus {
  outline: none;
  border-color: var(--ae-primary);
}

.ae-graficas-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 240px;
}

.ae-graficas-canvas-wrap--bar   { min-height: 280px; }
.ae-graficas-canvas-wrap--donut { min-height: 260px; }

/* Responsive */
/* (Grid uses Bootstrap now, specific chart tweaks can go here if needed) */

/* ============================================================
   Paginación server-side (liquidaciones)
   ============================================================ */

.ae-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--ae-border);
  margin-top: 8px;
}

.ae-pagination-info {
  font-size: 0.8125rem;
  color: var(--ae-ink-2);
}

.ae-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ae-pagination-btn {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-sm);
  background: var(--ae-surface);
  color: var(--ae-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.ae-pagination-btn:hover {
  background: var(--ae-primary-dim);
  border-color: var(--ae-primary);
}

.ae-pagination-btn--disabled {
  color: var(--ae-ink-muted);
  border-color: var(--ae-border-subtle);
  background: transparent;
  cursor: default;
  pointer-events: none;
}

.ae-pagination-current {
  font-size: 0.8125rem;
  color: var(--ae-ink-2);
  white-space: nowrap;
}

/* ============================================================
   FA-1: Loading state en tabla al cambiar filtros
   ============================================================ */
.ae-table-wrapper.ae-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ae-table-wrapper.ae-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ae-surface);
  opacity: 0.4;
  z-index: 10;
  border-radius: var(--ae-radius);
}

/* ============================================================
   QW-4: Focus visible global — accesibilidad teclado
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--ae-primary);
  outline-offset: 2px;
}

/* QW-8: Gradiente fade en tablas con scroll horizontal (mobile) */
@media (max-width: 1199px) {
  .ae-table-wrapper--scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--ae-canvas));
    pointer-events: none;
    z-index: 3;
  }
}

/* QW-6: Touch targets mobile mínimos 44px */
@media (max-width: 767px) {
  .ae-nav-link {
    padding: 12px 20px;
  }
  .ae-nav-link.active {
    padding-left: 17px;
  }
}