/* ==========================================================================
   ui-components.css — componentes compartidos del rebuild gráfico
   (pagina, empty-state, page-header, KPI, tabla).

   Participa del orden de capas declarado por custom.css (cargar DESPUÉS):
   sus reglas viven en @layer components y usan los tokens semánticos
   --ui-* de theme-tokens.css, por lo que heredan ambos temas
   (claro y tricorder) sin reglas específicas por tema.
   Templates: dashboard/templates/components/*.html
   ========================================================================== */

@layer components {
  /* ---------------- Paginación ---------------- */
  .ui-pagination {
    display: flex;
    justify-content: center;
    padding: var(--space-sm) 0;
  }

  .ui-pagination .page-link {
    min-width: 44px; /* target táctil */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    border-color: var(--ui-border);
    color: var(--ui-text);
    background: var(--ui-surface);
    transition: background var(--duration-fast) var(--ease-out-quart, ease);
  }

  .ui-pagination .page-item.active .page-link {
    background: var(--ui-fill-primary);
    border-color: var(--ui-fill-primary-solid);
    color: var(--ui-text-on-fill-primary);
    font-weight: 600;
  }

  .ui-pagination .page-item.disabled .page-link {
    color: var(--ui-text-muted);
    background: transparent;
    border-color: var(--ui-border-soft);
  }

  .ui-pagination .page-link:hover:not(.active):not([aria-disabled="true"]) {
    background: var(--ui-tint-primary-2);
    color: var(--ui-primary);
  }

  .ui-pagination .page-link:focus-visible {
    outline: 2px solid var(--ui-focus-ring);
    outline-offset: 2px;
  }

  /* ---------------- Estado vacío ---------------- */
  .ui-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    margin: var(--space-sm) 0;
    background: var(--ui-surface);
    border: 1px dashed var(--ui-border);
    border-radius: var(--radius-lg, 16px);
  }

  .ui-empty-state__icon {
    font-size: 3rem;
    color: var(--ui-text-muted);
    opacity: 0.55;
  }

  .ui-empty-state__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
  }

  .ui-empty-state__text {
    color: var(--ui-text-muted);
    max-width: 42ch;
    margin: 0;
  }

  .ui-empty-state .btn {
    min-height: 44px;
    margin-top: var(--space-xs);
  }

  /* ---------------- Cabecera de página ---------------- */
  .ui-page-header {
    margin-bottom: var(--space-md);
  }

  .ui-page-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .ui-page-header__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight, -0.01em);
    color: var(--ui-text);
    margin: 0;
    line-height: var(--lh-tight, 1.15);
  }

  .ui-page-header__subtitle {
    color: var(--ui-text-muted);
    margin: var(--space-2xs) 0 0;
    font-size: var(--fs-sm);
  }

  .ui-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* Ruta de navegación (breadcrumb) */
  .ui-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-xs);
    color: var(--ui-text-muted);
  }

  .ui-breadcrumb__item + .ui-breadcrumb__item::before {
    content: "/";
    margin-right: var(--space-2xs);
    color: var(--ui-border);
  }

  .ui-breadcrumb__item a {
    color: var(--ui-secondary);
    text-decoration: none;
  }

  .ui-breadcrumb__item a:hover,
  .ui-breadcrumb__item a:focus-visible {
    text-decoration: underline;
    color: var(--ui-primary);
  }

  /* ---------------- KPI ---------------- */
  .ui-kpi {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--ui-elev-1);
    min-height: 96px;
  }

  .ui-kpi__icon {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md, 8px);
    font-size: 1.25rem;
    background: var(--ui-tint-primary-2);
    color: var(--ui-primary);
  }

  .ui-kpi--success .ui-kpi__icon { background: var(--ui-tint-success); color: var(--ui-success); }
  .ui-kpi--warning .ui-kpi__icon { background: var(--ui-tint-warn); color: var(--ui-warn); }
  .ui-kpi--danger .ui-kpi__icon { background: var(--ui-tint-danger); color: var(--ui-danger); }
  .ui-kpi--info .ui-kpi__icon { background: var(--ui-tint-info); color: var(--ui-info); }

  .ui-kpi__value {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1;
    margin: 0;
  }

  .ui-kpi__label {
    color: var(--ui-text-muted);
    font-size: var(--fs-xs);
    margin: var(--space-2xs) 0 0;
  }

  .ui-kpi__detail {
    color: var(--ui-text-muted);
    font-size: var(--fs-2xs);
    margin: 0;
  }

  @media (max-width: 575.98px) {
    .ui-page-header__row {
      flex-direction: column;
      align-items: stretch;
    }

    .ui-kpi {
      min-height: 0;
    }
  }
}