/* Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@import "tailwindcss";
@config "../../tailwind.config.js";
@source "../../templates/**/*.html.twig";
@source "../**/*.js";

@layer base {
  html {
    @apply max-w-full font-sans;
    overflow-x: clip;
  }

  body {
    @apply min-w-0 max-w-full bg-neutral-50 text-neutral-900;
    overflow-x: clip;
  }

  [x-cloak] {
    display: none !important;
  }

  [hidden] {
    display: none !important;
  }

  @media (max-width: 1023px) {
    body.mobile-sidebar-open,
    body.context-selector-open {
      overflow: hidden;
      overscroll-behavior: none;
    }
  }

  :focus-visible {
    outline: 2px solid theme(colors.primary.500);
    outline-offset: 2px;
  }

  ::selection {
    @apply bg-primary-100 text-primary-950;
  }
}

/* Custom Component Classes */
@layer components {

  /* Typography */
  .type-page-title,
  .page-title {
    @apply text-page-title text-neutral-950;
  }

  .type-section-title {
    @apply text-section-title text-neutral-950;
  }

  .type-card-title {
    @apply text-card-title text-neutral-900;
  }

  .type-body {
    @apply text-body text-neutral-700;
  }

  .type-helper {
    @apply text-helper text-neutral-500;
  }

  .type-metadata {
    @apply text-metadata text-neutral-500;
  }

  .type-numeric-metric {
    @apply text-numeric-metric tabular-nums text-neutral-950;
  }

  .type-table-header {
    @apply text-table-header uppercase tracking-normal text-neutral-500;
  }

  /* Buttons */
  .btn {
    @apply inline-flex min-h-10 items-center justify-center gap-ui-2 rounded-control border border-transparent px-ui-4 py-ui-2 text-sm font-semibold leading-5 shadow-soft transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
  }

  .btn-secondary {
    @apply bg-neutral-700 text-white hover:bg-neutral-800 active:bg-neutral-900;
  }

  .btn-danger {
    @apply bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800 focus-visible:ring-danger-500/30;
  }

  .btn-success {
    @apply bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500/30;
  }

  .btn-outline,
  .btn-outline-secondary {
    @apply border-ui-border-hover bg-white text-neutral-700 shadow-none hover:border-neutral-400 hover:bg-neutral-50 hover:text-neutral-900;
  }

  .btn-outline-primary {
    @apply border-primary-200 bg-white text-primary-700 shadow-none hover:border-primary-300 hover:bg-primary-50;
  }

  .btn-soft-primary {
    @apply border-primary-100 bg-primary-50 text-primary-700 shadow-none hover:border-primary-200 hover:bg-primary-100;
  }

  .btn-outline-danger {
    @apply border-danger-200 bg-white text-danger-700 shadow-none hover:border-danger-300 hover:bg-danger-50 focus-visible:ring-danger-500/30;
  }

  .btn-ghost {
    @apply border-transparent bg-transparent text-neutral-700 shadow-none hover:bg-neutral-100 hover:text-neutral-950;
  }

  .btn-icon,
  .btn-icon-only {
    @apply h-10 w-10 flex-none rounded-control p-0;
  }

  .btn-sm,
  .btn-group-sm .btn {
    @apply min-h-9 px-ui-3 py-ui-1 text-xs;
  }

  .btn-sm.btn-icon,
  .btn-sm.btn-icon-only {
    @apply h-9 w-9 p-0;
  }

  .btn-group {
    @apply inline-flex rounded-control shadow-soft;
  }

  .btn-group .btn {
    @apply rounded-none first:rounded-l-control last:rounded-r-control;
  }

  .btn-loading,
  .btn[aria-busy="true"] {
    @apply cursor-wait;
    pointer-events: none;
  }

  .btn-loading::before,
  .btn[aria-busy="true"]::before {
    content: '';
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 9999px;
    animation: cxp-spin 0.7s linear infinite;
  }

  /* Cards and panels */
  .card,
  .card-normal {
    @apply overflow-hidden rounded-card border border-ui-border bg-white shadow-card;
  }

  .card-interactive {
    @apply transition-colors duration-150 hover:border-ui-border-hover hover:bg-neutral-50/40 focus-within:border-primary-300;
  }

  .card-error {
    @apply border-danger-200 bg-danger-50/30;
  }

  .card-compact .card-header,
  .card-compact .card-footer {
    @apply px-ui-4 py-ui-3;
  }

  .card-compact .card-body {
    @apply p-ui-4;
  }

  .card-header {
    @apply border-b border-ui-border bg-white px-ui-5 py-ui-4;
  }

  .card-body {
    @apply p-ui-5;
  }

  .card-footer {
    @apply border-t border-ui-border bg-neutral-50 px-ui-5 py-ui-4;
  }

  .page-header {
    @apply flex flex-col gap-ui-4 rounded-panel border border-ui-border bg-white px-ui-5 py-ui-4 shadow-soft lg:flex-row lg:items-start lg:justify-between;
  }

  .page-subtitle {
    @apply mt-ui-1 max-w-4xl text-helper text-neutral-500;
    overflow-wrap: anywhere;
  }

  .page-actions {
    @apply flex flex-wrap items-center gap-ui-2 lg:justify-end;
  }

  .page-actions form {
    @apply inline-flex;
  }

  .section-card {
    @apply overflow-hidden rounded-card border border-ui-border bg-white shadow-card;
  }

  .report-filter-card {
    @apply relative z-20 overflow-visible;
  }

  .section-card-header {
    @apply border-b border-ui-border bg-white px-ui-5 py-ui-4;
  }

  .section-card-title {
    @apply text-card-title text-neutral-900;
  }

  .section-card-subtitle {
    @apply mt-ui-1 text-helper text-neutral-500;
  }

  .section-card-body {
    @apply px-ui-5 py-ui-5;
  }

  /* Metric Cards - Modern Stats */
  .metric-card,
  .card-metric {
    @apply rounded-card border border-ui-border bg-white p-ui-5 shadow-card transition-colors duration-150 hover:border-ui-border-hover;
  }

  .metric-label {
    @apply mb-ui-2 text-helper font-medium text-neutral-600;
  }

  .metric-value {
    @apply mb-ui-1 text-numeric-metric tabular-nums text-neutral-950;
  }

  .dashboard-metric-card {
    @apply relative;
  }

  /* Form Elements - Clean & Modern */
  .form-label {
    @apply mb-ui-2 block text-helper font-medium text-neutral-700;
  }

  .form-control,
  .form-select,
  .form-input {
    @apply h-10 w-full rounded-control border border-ui-border-hover bg-white px-ui-3 py-ui-2 text-body text-neutral-900 shadow-none transition-colors duration-150 placeholder:text-neutral-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/20;
  }

  .form-control:disabled {
    @apply cursor-not-allowed bg-neutral-100 text-neutral-500;
  }

  .form-error {
    @apply mt-ui-1 text-metadata font-medium text-danger-600;
  }

  .form-control[aria-invalid="true"],
  .form-select[aria-invalid="true"],
  .form-input[aria-invalid="true"],
  .form-control.is-invalid,
  .form-select.is-invalid,
  .form-input.is-invalid {
    @apply border-ui-border-error focus:border-danger-500 focus:ring-danger-500/20;
  }

  .invalid-feedback {
    @apply mt-ui-1 block w-full text-metadata font-medium text-danger-600;
  }

  .input-group {
    @apply flex w-full flex-wrap items-stretch;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    @apply min-w-0 flex-1;
  }

  .input-group > .form-control:not(:first-child),
  .input-group > .form-select:not(:first-child) {
    @apply rounded-l-none;
  }

  .input-group > .form-control:not(:last-child),
  .input-group > .form-select:not(:last-child) {
    @apply rounded-r-none;
  }

  .input-group-text {
    @apply inline-flex h-10 items-center border border-ui-border-hover bg-neutral-50 px-ui-3 text-sm font-medium text-neutral-600;
  }

  .input-group > .input-group-text:first-child {
    @apply rounded-l-control border-r-0;
  }

  .input-group > .input-group-text:last-child {
    @apply rounded-r-control border-l-0;
  }

  .form-error-summary {
    @apply rounded-control border border-danger-200 bg-danger-50 px-ui-4 py-ui-3 text-sm text-danger-800;
  }

  .form-action-bar {
    @apply sticky bottom-0 z-30 mt-ui-6 flex flex-col-reverse gap-ui-3 rounded-card border border-ui-border bg-white/95 px-ui-4 pt-ui-4 shadow-overlay backdrop-blur sm:flex-row sm:items-center sm:justify-between;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .form-action-bar .form-action-primary {
    @apply flex flex-col gap-ui-3 sm:ml-auto sm:flex-row sm:items-center;
  }

  @media (max-width: 639px) {
    .form-action-bar .btn,
    .form-action-bar .form-action-primary {
      width: 100%;
    }
  }

  /* Tables - Beautiful & Functional */
  .table-card {
    @apply relative overflow-hidden rounded-card border border-ui-border bg-white shadow-card;
  }

  .table-card table {
    @apply w-full text-sm;
  }

  .table-card thead th {
    @apply sticky top-0 z-10 bg-neutral-50 text-table-header uppercase tracking-normal text-neutral-500;
  }

  .table-card tbody tr {
    @apply transition-colors duration-150 hover:bg-neutral-50;
  }

  .table-card tbody td {
    @apply align-top;
  }

  .table-toolbar {
    @apply flex flex-col gap-ui-3 border-b border-ui-border bg-white px-ui-5 py-ui-4 sm:flex-row sm:items-center sm:justify-between;
  }

  .table-responsive {
    @apply max-w-full overflow-x-auto rounded-card;
    scrollbar-gutter: stable;
    overscroll-behavior-inline: contain;
    transition: box-shadow 160ms ease;
  }

  .table-responsive.has-local-overflow {
    @apply focus-visible:ring-2 focus-visible:ring-primary-500/30;
  }

  .table-responsive.can-scroll-left.can-scroll-right {
    box-shadow: inset 12px 0 10px -12px rgb(15 23 42 / 0.22), inset -12px 0 10px -12px rgb(15 23 42 / 0.22);
  }

  .table-responsive.can-scroll-left:not(.can-scroll-right) {
    box-shadow: inset 12px 0 10px -12px rgb(15 23 42 / 0.22);
  }

  .table-responsive.can-scroll-right:not(.can-scroll-left) {
    box-shadow: inset -12px 0 10px -12px rgb(15 23 42 / 0.22);
  }

  .ui-icon {
    @apply h-5 w-5 flex-none align-middle;
  }

  .ui-icon-sm {
    @apply h-4 w-4 flex-none align-middle;
  }

  .card .table-responsive,
  .table-card .table-responsive {
    @apply rounded-none;
  }

  .table,
  .table-modern {
    @apply w-full min-w-full table-auto text-left text-sm;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table thead,
  .table-modern thead {
    @apply border-b border-ui-border bg-neutral-50;
  }

  .table th,
  .table-modern th {
    @apply sticky top-0 z-10 whitespace-nowrap bg-neutral-50 px-ui-4 py-ui-3 text-left text-table-header uppercase tracking-normal text-neutral-500;
  }

  .table td,
  .table-modern td {
    @apply border-b border-neutral-100 px-ui-4 py-ui-3 align-top text-body text-neutral-900;
    max-width: 28rem;
    overflow-wrap: anywhere;
  }

  .table tbody tr,
  .table-modern tbody tr {
    @apply transition-colors duration-150 hover:bg-neutral-50;
  }

  .table-modern tfoot td {
    @apply border-b-0 border-t border-ui-border bg-neutral-50;
  }

  .table-hover tbody tr:hover {
    @apply bg-primary-50/30;
  }

  .table-actions {
    @apply flex flex-col items-stretch justify-end gap-ui-2 whitespace-nowrap sm:flex-row sm:items-center;
  }

  .table-actions form {
    @apply inline-flex;
  }

  .table-actions .btn,
  .table-actions a,
  .table-actions button {
    @apply w-full sm:w-auto;
  }

  .btn:disabled,
  .table-actions button:disabled {
    @apply cursor-not-allowed opacity-60;
  }

  .table-cell-nowrap {
    @apply whitespace-nowrap;
  }

  .table-cell-muted {
    @apply text-neutral-500;
  }

  .table-cell-compact {
    @apply w-px whitespace-nowrap;
  }

  .table-cell-nowrap,
  .table-cell-compact,
  .table-actions {
    overflow-wrap: normal;
  }

  .table-card-state {
    @apply px-ui-6 py-ui-8;
  }

  @media (max-width: 639px) {
    .table-to-card {
      min-width: 0;
    }

    .table-to-card thead {
      @apply sr-only;
    }

    .table-to-card tbody {
      display: grid;
      gap: 0.75rem;
      padding: 0.75rem;
    }

    .table-to-card tbody tr {
      display: block;
      overflow: hidden;
      border: 1px solid theme(colors.ui-border.DEFAULT);
      border-radius: theme(borderRadius.card);
      background: white;
      box-shadow: theme(boxShadow.soft);
    }

    .table-to-card tbody td {
      display: grid;
      grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
      gap: 0.75rem;
      align-items: start;
      max-width: none;
      padding: 0.625rem 0.75rem;
      border-bottom: 1px solid theme(colors.neutral.100);
      text-align: right;
    }

    .table-to-card tbody td::before {
      content: attr(data-label);
      color: theme(colors.neutral.500);
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1rem;
      text-align: left;
      text-transform: uppercase;
    }

    .table-to-card tbody td[data-label=""]::before,
    .table-to-card tbody td:not([data-label])::before {
      display: none;
    }

    .table-to-card tbody td[data-label=""]:not(.table-actions),
    .table-to-card tbody td:not([data-label]):not(.table-actions) {
      display: block;
      text-align: left;
    }

    .table-to-card tbody td:last-child {
      border-bottom: 0;
    }

    .table-to-card tbody td.table-actions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      border-top: 1px solid theme(colors.neutral.100);
      text-align: left;
    }

    .table-to-card tbody td.table-actions::before {
      display: none;
    }
  }

  /* Badges - Colorful & Clear */
  .badge {
    @apply inline-flex items-center gap-ui-1 rounded-badge border px-ui-2 py-ui-1 text-metadata font-semibold leading-none;
  }

  .badge-primary {
    @apply border-primary-200 bg-primary-50 text-primary-800;
  }

  .badge-secondary {
    @apply border-neutral-200 bg-neutral-100 text-neutral-800;
  }

  .badge-success {
    @apply border-success-200 bg-success-50 text-success-800;
  }

  .badge-warning {
    @apply border-warning-200 bg-warning-50 text-warning-800;
  }

  .badge-danger {
    @apply border-danger-200 bg-danger-50 text-danger-800;
  }

  .badge-info {
    @apply border-info-200 bg-info-50 text-info-800;
  }

  .badge-neutral {
    @apply border-neutral-200 bg-white text-neutral-700;
  }

  .badge-tenant,
  .badge-database {
    @apply border-primary-200 bg-primary-50 font-mono text-primary-800;
  }

  .badge-legacy,
  .badge-tenant-legacy {
    @apply border-tenant-legacy-200 bg-tenant-legacy-50 text-tenant-legacy-800;
  }

  .badge-tenant-active {
    @apply border-tenant-active-200 bg-tenant-active-50 text-tenant-active-800;
  }

  .badge-tenant-error {
    @apply border-tenant-error-200 bg-tenant-error-50 text-tenant-error-800;
  }

  .badge-processing {
    @apply border-info-200 bg-info-50 text-info-800;
  }

  .badge-processing::before {
    content: '';
    @apply h-1.5 w-1.5 rounded-badge bg-info-500;
    animation: cxp-pulse 1.2s ease-in-out infinite;
  }

  .badge-soft-warning {
    @apply border border-warning-200 bg-warning-50 text-warning-700;
  }

  .badge-soft-success {
    @apply border border-success-200 bg-success-50 text-success-700;
  }

  .tenant-migration-dot-muted {
    @apply bg-secondary-300;
  }

  .tenant-migration-dot-success {
    @apply bg-success-500;
  }

  .tenant-migration-dot-error {
    @apply bg-danger-500;
  }

  .tenant-migration-dot-progress {
    @apply bg-info-500;
  }

  .tenant-migration-dot-warning {
    @apply bg-warning-500;
  }

  .tenant-admin-banner {
    @apply flex items-start gap-ui-3 rounded-card border border-info-200 bg-info-50 px-ui-4 py-ui-3 text-body text-info-900 shadow-soft;
  }

  .tenant-admin-banner-icon {
    @apply mt-0.5 flex h-7 w-7 flex-none items-center justify-center rounded-badge bg-info-100 text-sm font-bold text-info-700;
  }

  .tenant-summary-card {
    @apply rounded-card border border-ui-border bg-white p-ui-4 shadow-card transition-colors duration-150 hover:border-ui-border-hover;
  }

  .tenant-summary-card span {
    @apply text-helper font-medium text-neutral-500;
  }

  .tenant-summary-card strong {
    @apply mt-ui-2 block text-numeric-metric tabular-nums text-neutral-950;
  }

  .tenant-filter-card {
    @apply grid grid-cols-1 gap-ui-3 rounded-card border border-ui-border bg-white p-ui-4 shadow-card md:grid-cols-2;
  }

  @media (min-width: 1440px) {
    .tenant-filter-card {
      grid-template-columns: minmax(240px, 1fr) 160px 180px 180px 120px;
    }
  }

  .tenant-admin-table {
    @apply min-w-[1220px];
  }

  .tenant-board {
    @apply rounded-panel border border-ui-border bg-white shadow-card;
    container-name: tenant-board;
    container-type: inline-size;
  }

  .tenant-board-header {
    @apply flex flex-col gap-2 border-b border-secondary-200 px-5 py-4 sm:flex-row sm:items-center sm:justify-between;
  }

  .tenant-board-header h3 {
    @apply text-base font-semibold text-secondary-900;
  }

  .tenant-board-header p {
    @apply mt-1 text-sm text-secondary-500;
  }

  .tenant-card-grid {
    @apply grid grid-cols-1 gap-4 p-4;
  }

  @media (min-width: 1024px) {
    @container tenant-board (min-width: 700px) {
      .tenant-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }

  @media (min-width: 1440px) {
    @container tenant-board (min-width: 1050px) {
      .tenant-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
  }

  .tenant-card {
    @apply flex min-w-0 flex-col rounded-card border border-ui-border bg-white shadow-card transition-colors duration-150 hover:border-primary-200;
  }

  .tenant-card-header {
    @apply flex min-w-0 flex-col gap-3 border-b border-secondary-100 px-4 py-4 sm:flex-row sm:items-start sm:justify-between;
  }

  .tenant-card-title {
    @apply min-w-0;
  }

  .tenant-card-title strong {
    @apply block truncate text-base font-semibold text-secondary-950;
  }

  .tenant-card-title span {
    @apply mt-1 block text-xs font-medium text-secondary-500;
  }

  .tenant-card-badges {
    @apply flex flex-wrap gap-1.5 sm:justify-end;
  }

  .tenant-card-body {
    @apply flex flex-1 flex-col gap-4 px-4 py-4;
  }

  .tenant-stepper {
    @apply flex flex-wrap items-center gap-ui-2;
  }

  .tenant-stepper-step {
    @apply flex items-center gap-ui-1;
  }

  .tenant-stepper-step:not(:last-child)::after {
    content: '';
    @apply mx-ui-1 h-px w-4 flex-none bg-neutral-200;
  }

  .tenant-stepper-index {
    @apply flex h-7 w-7 flex-none items-center justify-center rounded-badge text-xs font-bold;
  }

  .tenant-stepper-step-done .tenant-stepper-index {
    @apply bg-success-600 text-white;
  }

  .tenant-stepper-step-current .tenant-stepper-index {
    @apply bg-primary-600 text-white;
  }

  .tenant-stepper-step-locked .tenant-stepper-index {
    @apply bg-neutral-100 text-neutral-400;
  }

  .tenant-stepper-step-error .tenant-stepper-index {
    @apply bg-danger-600 text-white;
  }

  .tenant-stepper-label {
    @apply text-helper font-semibold text-neutral-600;
  }

  .tenant-stepper-step-current .tenant-stepper-label {
    @apply text-primary-700;
  }

  .tenant-stepper-step-error .tenant-stepper-label {
    @apply text-danger-700;
  }

  .tenant-stepper-step-locked .tenant-stepper-label {
    @apply text-neutral-400;
  }

  .tenant-stepper-hint {
    @apply line-clamp-2 text-helper leading-5 text-neutral-600;
  }

  .tenant-operational-grid {
    @apply grid grid-cols-1 gap-ui-2 sm:grid-cols-3;
  }

  .tenant-operational-grid > div {
    @apply min-w-0 rounded-control border border-neutral-100 bg-neutral-50 px-ui-2 py-ui-2;
  }

  .tenant-operational-grid dt {
    @apply text-table-header font-semibold uppercase text-neutral-500;
  }

  .tenant-operational-grid dd {
    @apply mt-ui-1 min-w-0;
  }

  .tenant-operational-grid .badge {
    @apply max-w-full truncate;
  }

  .tenant-card-meta {
    @apply grid grid-cols-1 gap-3 sm:grid-cols-2;
  }

  .tenant-card-meta dt {
    @apply text-xs font-semibold uppercase text-secondary-400;
  }

  .tenant-card-meta dd {
    @apply mt-ui-1 min-w-0 truncate rounded-control bg-neutral-50 px-ui-2 py-ui-1 font-mono text-metadata text-neutral-800;
  }

  .tenant-card-meta dd:has(.tenant-db-value) {
    @apply bg-transparent p-0;
  }

  .tenant-db-value {
    @apply flex min-w-0 items-center gap-ui-2 rounded-control bg-neutral-50 px-ui-2 py-ui-1;
  }

  .tenant-db-value code {
    @apply min-w-0 flex-1 truncate font-mono text-xs text-secondary-800;
  }

  .copy-button {
    @apply inline-flex h-8 w-8 flex-none items-center justify-center rounded-control border border-ui-border bg-white text-neutral-500 transition-colors duration-150 hover:border-primary-200 hover:bg-primary-50 hover:text-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30;
  }

  .copy-button.copied {
    @apply border-success-200 bg-success-50 text-success-700;
  }

  .tenant-card-meta dd .badge {
    @apply font-sans;
  }

  .tenant-card-job {
    @apply min-h-16 rounded-control border border-neutral-100 bg-neutral-50 px-ui-3 py-ui-3;
  }

  .tenant-card-job-title {
    @apply flex min-w-0 items-center justify-between gap-2 text-sm font-semibold text-secondary-900;
  }

  .tenant-card-job-title span {
    @apply min-w-0 truncate;
  }

  .tenant-card-job-title small {
    @apply flex-none text-xs font-medium text-secondary-500;
  }

  .tenant-card-job p {
    @apply mt-1 max-w-full truncate text-xs text-secondary-500;
  }

  .tenant-card-empty {
    @apply text-sm text-secondary-400;
  }

  .tenant-details {
    @apply rounded-control border border-neutral-200 bg-white;
  }

  .tenant-details > summary {
    @apply cursor-pointer list-none rounded-control px-ui-3 py-ui-3 text-helper font-semibold text-neutral-700 transition-colors duration-150 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30;
  }

  .tenant-details > summary::-webkit-details-marker {
    display: none;
  }

  .tenant-details > summary::after {
    content: '+';
    @apply float-right text-base font-semibold text-neutral-400;
  }

  .tenant-details[open] > summary::after {
    content: '-';
  }

  .tenant-details-content {
    @apply space-y-ui-3 border-t border-neutral-100 px-ui-3 py-ui-3;
  }

  .tenant-status-hint {
    @apply rounded-control border border-warning-200 bg-warning-50 px-ui-3 py-ui-2 text-helper leading-5 text-warning-800;
  }

  .tenant-audit-box {
    @apply rounded-control border border-ui-border bg-white px-ui-3 py-ui-3;
  }

  .tenant-audit-box-header {
    @apply flex items-center justify-between gap-2;
  }

  .tenant-audit-box-header strong {
    @apply text-sm font-semibold text-secondary-900;
  }

  .tenant-audit-box-header span {
    @apply rounded-full bg-secondary-100 px-2 py-0.5 text-[11px] font-semibold text-secondary-700;
  }

  .tenant-audit-box dl {
    @apply mt-3 grid grid-cols-2 gap-2;
  }

  .tenant-audit-box dt {
    @apply text-[11px] font-semibold uppercase text-secondary-400;
  }

  .tenant-audit-box dd {
    @apply mt-0.5 truncate text-xs font-semibold text-secondary-800;
  }

  .tenant-audit-box p {
    @apply mt-3 text-xs leading-5 text-secondary-600;
  }

  .tenant-card-footer {
    @apply flex flex-col gap-3 border-t border-secondary-100 px-4 py-4 sm:flex-row sm:items-center sm:justify-end;
  }

  .tenant-card-actions {
    @apply flex flex-wrap items-center gap-2 sm:justify-end;
  }

  .tenant-card-actions .btn,
  .tenant-card-actions form {
    @apply w-full sm:w-auto;
  }

  .tenant-card-actions form .btn {
    @apply w-full sm:w-auto;
  }

  .tenant-empty-state {
    @apply rounded-card border border-dashed border-neutral-300 bg-neutral-50 p-ui-8 text-center text-body text-neutral-500;
  }

  .tenant-client-cell {
    @apply min-w-48;
  }

  .tenant-client-cell strong {
    @apply block text-sm font-semibold leading-5 text-secondary-950;
  }

  .tenant-client-cell span,
  .tenant-muted-line {
    @apply mt-0.5 block max-w-56 truncate text-xs text-secondary-500;
  }

  .tenant-db-cell {
    @apply max-w-56 space-y-1;
  }

  .tenant-db-cell span {
    @apply block text-xs font-medium uppercase text-secondary-400;
  }

  .tenant-db-cell code {
    @apply block truncate rounded-control bg-neutral-50 px-ui-2 py-ui-1 font-mono text-metadata text-neutral-800;
  }

  .tenant-state-grid {
    @apply mt-1 grid max-w-56 grid-cols-1 gap-1 text-xs text-secondary-500;
  }

  .tenant-state-grid strong {
    @apply ml-1 inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold;
  }

  .tenant-error-line {
    @apply mt-ui-1 max-w-full truncate rounded-control border border-danger-200 bg-danger-50 px-ui-2 py-ui-1 text-metadata text-danger-700;
  }

  .tenant-job-cell {
    @apply flex min-w-44 items-start gap-2;
  }

  .tenant-job-dot {
    @apply mt-1.5 h-2.5 w-2.5 flex-none rounded-full bg-secondary-300;
  }

  .tenant-job-dot-pendiente {
    @apply bg-warning-500;
  }

  .tenant-job-dot-procesando {
    @apply animate-pulse bg-info-500;
  }

  .tenant-job-dot-exitoso {
    @apply bg-success-500;
  }

  .tenant-job-dot-error,
  .tenant-job-dot-cancelado,
  .tenant-job-dot-posiblemente_colgado {
    @apply bg-danger-500;
  }

  .tenant-worker-hint {
    @apply mt-ui-1 max-w-64 rounded-control border border-warning-200 bg-warning-50 px-ui-2 py-ui-1 text-metadata text-warning-800;
  }

  .tenant-worker-hint code {
    @apply font-mono text-[11px];
  }

  .tenant-progress {
    @apply mt-2 h-1.5 w-full overflow-hidden rounded-full bg-secondary-100;
  }

  .tenant-progress span {
    @apply block h-full rounded-badge bg-primary-500 transition-[width] duration-200;
  }

  .tenant-inline-link {
    @apply mt-1 inline-flex text-xs font-semibold text-primary-700 hover:underline;
  }

  .tenant-history-badge {
    @apply mt-ui-2 inline-flex rounded-badge border border-warning-200 bg-warning-50 px-ui-2 py-ui-1 text-table-header font-semibold text-warning-700;
  }

  .tenant-job-history {
    @apply rounded-control border border-neutral-100 bg-white px-ui-3 py-ui-2;
  }

  .tenant-job-history summary {
    @apply cursor-pointer text-xs font-semibold uppercase text-secondary-500;
  }

  .tenant-job-history-list {
    @apply mt-2 space-y-1;
  }

  .tenant-job-history-row {
    @apply grid grid-cols-[auto_auto_minmax(0,1fr)_auto] items-center gap-ui-2 rounded-control px-ui-2 py-ui-2 text-metadata text-neutral-700 hover:bg-neutral-50;
  }

  .tenant-job-history-row span:not(.tenant-job-dot) {
    @apply truncate;
  }

  .tenant-job-history-row em {
    @apply not-italic text-secondary-500;
  }

  .tenant-job-history-row small {
    @apply col-span-4 ml-ui-4 rounded-badge bg-warning-50 px-ui-2 py-ui-1 text-table-header font-semibold text-warning-700;
  }

  .tenant-next-step {
    @apply max-w-52;
  }

  .tenant-next-step span {
    @apply block text-sm font-semibold text-secondary-900;
  }

  .tenant-next-step small {
    @apply mt-1 block text-xs leading-5 text-secondary-500;
  }

  .tenant-action-stack {
    @apply flex min-w-36 items-center justify-end gap-2;
  }

  .tenant-action-menu {
    @apply absolute right-0 z-20 mt-ui-2 w-48 overflow-hidden rounded-control border border-ui-border bg-white py-ui-1 text-body shadow-overlay;
  }

  .tenant-action-menu a,
  .tenant-action-menu button {
    @apply block w-full px-3 py-2 text-left text-secondary-700 hover:bg-secondary-50;
  }

  .tenant-action-menu form {
    @apply block w-full;
  }

  .tenant-action-menu button:disabled {
    @apply cursor-not-allowed text-secondary-400 hover:bg-white;
  }

  .tenant-confirm-modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
  }

  .tenant-confirm-backdrop {
    @apply absolute inset-0 bg-secondary-950/45;
  }

  .tenant-confirm-panel {
    @apply relative w-full max-w-xl rounded-panel bg-white p-ui-5 shadow-overlay;
  }

  .tenant-confirm-header {
    @apply mb-4 flex items-start justify-between gap-3 border-b border-secondary-200 pb-3;
  }

  .tenant-confirm-header h3 {
    @apply text-lg font-semibold text-secondary-900;
  }

  .tenant-confirm-header p {
    @apply mt-1 text-sm text-secondary-500;
  }

  .tenant-confirm-header button {
    @apply min-h-10 min-w-10 rounded-control px-ui-2 py-ui-1 text-xl leading-none text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30;
  }

  .tenant-confirm-grid {
    @apply mb-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2;
  }

  .tenant-confirm-grid dt {
    @apply text-xs font-semibold uppercase text-secondary-500;
  }

  .tenant-confirm-grid dd {
    @apply mt-1 break-words text-secondary-900;
  }

  .tenant-confirm-actions {
    @apply mt-5 flex justify-end gap-2;
  }

  /* Alerts - Eye-catching */
  .alert {
    @apply flex items-start gap-ui-3 rounded-card border px-ui-4 py-ui-3 text-body;
  }

  .alert-success {
    @apply border-success-200 bg-success-50 text-success-800;
  }

  .alert-error {
    @apply border-danger-200 bg-danger-50 text-danger-800;
  }

  .alert-warning {
    @apply border-warning-200 bg-warning-50 text-warning-800;
  }

  .alert-info {
    @apply border-info-200 bg-info-50 text-info-800;
  }

  /* Sidebar Navigation */
  .sidebar {
    @apply fixed inset-y-0 left-0 z-50 w-72 -translate-x-full transform bg-neutral-950 text-white shadow-overlay transition-[width,transform] duration-200 ease-in-out lg:w-64 lg:translate-x-0;
  }

  .sidebar-nav {
    @apply min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain px-ui-2 py-ui-3;
    scrollbar-width: thin;
    scrollbar-color: rgb(71 85 105 / 0.75) transparent;
  }

  .sidebar-link {
    @apply relative flex min-h-11 w-full items-center gap-ui-3 rounded-control px-ui-3 py-ui-2 text-body font-medium text-neutral-300 transition-colors duration-150 hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
  }

  .sidebar-link svg {
    @apply flex-none;
  }

  .sidebar-link.active {
    @apply bg-primary-600 text-white shadow-soft;
    box-shadow: inset 3px 0 0 rgb(255 255 255 / 0.92), 0 1px 3px rgb(15 23 42 / 0.2);
  }

  .sidebar-section-title {
    @apply px-ui-3 pb-ui-1 pt-ui-4 text-table-header font-bold uppercase tracking-normal text-neutral-500;
  }

  .sidebar-submenu {
    @apply ml-6 mt-ui-1 space-y-1 border-l border-white/10 pl-ui-3;
  }

  .sidebar-submenu-link {
    @apply block min-h-10 rounded-control px-ui-3 py-ui-2 text-body font-medium text-neutral-300 transition-colors duration-150 hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
  }

  .sidebar-submenu-link.active {
    @apply bg-white/10 text-white;
  }

  .sidebar.is-collapsed .sidebar-link {
    @apply justify-center px-2;
  }

  .sidebar.is-collapsed .sidebar-link svg {
    @apply mr-0;
  }

  .sidebar.is-collapsed .sidebar-section-title {
    @apply sr-only;
  }

  .sidebar-group-trigger {
    @apply justify-start;
  }

  .sidebar.is-collapsed .sidebar-link[aria-label]:hover::after,
  .sidebar.is-collapsed .sidebar-link[aria-label]:focus-visible::after {
    content: attr(aria-label);
    @apply pointer-events-none absolute left-full top-1/2 z-50 ml-ui-3 -translate-y-1/2 whitespace-nowrap rounded-control border border-neutral-700 bg-neutral-950 px-ui-3 py-ui-2 text-metadata font-semibold text-white shadow-overlay;
  }

  .sidebar.is-collapsed .sidebar-link[aria-label]:hover::before,
  .sidebar.is-collapsed .sidebar-link[aria-label]:focus-visible::before {
    content: '';
    @apply absolute left-full top-1/2 z-50 ml-1.5 h-2 w-2 -translate-y-1/2 rotate-45 bg-secondary-950;
  }

  .sidebar-flyout {
    @apply fixed z-[70] w-64 overflow-hidden rounded-card border border-neutral-700 bg-neutral-950 p-ui-2 text-white shadow-overlay;
  }

  .sidebar-flyout-title {
    @apply px-ui-3 pb-ui-2 pt-ui-1 text-metadata font-semibold uppercase text-neutral-400;
  }

  .sidebar-flyout-link {
    @apply flex min-h-10 items-center rounded-control px-ui-3 py-ui-2 text-body font-medium text-neutral-300 transition-colors duration-150 hover:bg-white/10 hover:text-white focus-visible:bg-white/10 focus-visible:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
  }

  .sidebar-flyout-link.active {
    @apply bg-primary-600 text-white;
  }

  .sidebar-profile {
    @apply relative flex-none border-t border-white/10 p-ui-2;
  }

  .sidebar-profile-button {
    @apply flex min-h-14 w-full items-center gap-ui-3 rounded-control border border-transparent px-ui-2 py-ui-2 text-left transition-colors duration-150 hover:border-white/10 hover:bg-white/[0.06] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
  }

  .sidebar.is-collapsed .sidebar-profile-button {
    @apply justify-center px-0;
  }

  .sidebar-avatar {
    @apply flex h-10 w-10 flex-none items-center justify-center rounded-control bg-primary-600 text-sm font-semibold text-white shadow-soft;
  }

  .sidebar-profile-menu {
    @apply absolute z-[70] w-56 overflow-hidden rounded-card border border-neutral-700 bg-neutral-950 p-ui-1 shadow-overlay;
  }

  .sidebar-profile-menu a {
    @apply flex min-h-10 items-center rounded-control px-ui-3 py-ui-2 text-body font-medium text-neutral-200 transition-colors duration-150 hover:bg-white/10 hover:text-white focus-visible:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
  }

  .context-switcher {
    @apply flex flex-none items-center border-b border-white/10 bg-neutral-950 px-ui-2 py-ui-3;
  }

  .context-switcher-button {
    @apply flex min-h-12 min-w-0 flex-1 items-center rounded-control border border-white/10 bg-white/[0.03] px-ui-2 py-ui-2 text-white transition-colors duration-150 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
  }

  .context-switcher-current {
    @apply flex min-h-12 min-w-0 flex-1 items-center rounded-control border border-white/10 bg-white/[0.03] px-ui-2 py-ui-2;
  }

  .context-sidebar-toggle {
    @apply inline-flex h-10 w-10 flex-none items-center justify-center rounded-control text-neutral-400 transition-colors duration-150 hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
  }

  .context-switcher-avatar {
    @apply mr-ui-3 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-control bg-primary-600 text-sm font-bold text-white shadow-soft;
  }

  .context-switcher-kicker {
    @apply text-table-header font-semibold uppercase tracking-normal text-neutral-400;
  }

  .context-switcher-client {
    @apply block truncate text-metadata text-neutral-300;
  }

  .context-switcher-site {
    @apply block truncate text-sm font-semibold text-white;
  }

  .sidebar.is-collapsed .context-switcher > div {
    @apply flex-col;
  }

  .sidebar.is-collapsed .context-switcher-button,
  .sidebar.is-collapsed .context-switcher-current {
    @apply h-10 w-10 min-h-10 flex-none justify-center p-0;
  }

  .sidebar.is-collapsed .context-switcher-avatar {
    @apply mr-0 h-8 w-8;
  }

  .context-switcher-overlay {
    @apply fixed inset-0 z-[70] flex items-end bg-neutral-950/55 backdrop-blur-[2px] lg:block lg:bg-transparent lg:backdrop-blur-none;
  }

  .context-switcher-panel {
    @apply flex max-h-[88dvh] w-full flex-col overflow-hidden rounded-t-panel border border-ui-border bg-white shadow-overlay lg:fixed lg:max-h-[min(70vh,32rem)] lg:rounded-panel;
    pointer-events: auto;
  }

  .context-switcher-panel-header {
    @apply flex min-w-0 items-start justify-between gap-ui-3 border-b border-neutral-100 px-ui-4 py-ui-3;
  }

  .context-switcher-panel-header h2 {
    @apply text-card-title text-neutral-950;
  }

  .context-switcher-panel-header p {
    @apply mt-ui-1 text-helper text-neutral-500;
  }

  .context-switcher-search {
    @apply sticky top-0 z-20 flex items-center border-b border-neutral-100 bg-neutral-50 p-ui-3;
  }

  .context-switcher-search > svg {
    @apply pointer-events-none absolute left-6 text-neutral-400;
  }

  .context-switcher-search input {
    @apply h-11 w-full rounded-control border border-ui-border-hover bg-white py-ui-2 pl-10 pr-ui-3 text-body focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus-visible:border-primary-500 focus-visible:ring-primary-500/20;
  }

  .context-switcher-list {
    @apply min-h-0 flex-1 overflow-y-auto overscroll-contain p-ui-2;
  }

  .context-switcher-group {
    @apply mb-2;
  }

  .context-switcher-group h3 {
    @apply sticky top-0 z-10 flex min-w-0 items-center justify-between gap-ui-2 bg-white/95 px-ui-2 py-ui-2 text-table-header font-bold uppercase tracking-normal text-neutral-500 backdrop-blur;
  }

  .context-switcher-group h3 > span {
    @apply min-w-0 truncate;
  }

  .context-switcher-group h3 > em {
    @apply flex-none rounded-badge bg-primary-50 px-ui-2 py-ui-1 text-[10px] font-semibold not-italic text-primary-700;
  }

  .context-switcher-option {
    @apply flex min-h-12 w-full items-center justify-between gap-ui-3 rounded-control border border-transparent px-ui-3 py-ui-2 text-left text-body text-neutral-800 transition-colors duration-150 hover:border-primary-100 hover:bg-primary-50/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 disabled:cursor-wait disabled:opacity-70;
  }

  .context-switcher-option.active {
    @apply border-primary-200 bg-primary-50;
  }

  .context-switcher-option strong {
    @apply block truncate font-semibold;
  }

  .context-switcher-option small {
    @apply mt-ui-1 block truncate text-xs text-neutral-500;
  }

  .context-switcher-badges {
    @apply flex flex-none flex-wrap justify-end gap-1;
  }

  .context-switcher-badges em {
    @apply inline-flex items-center gap-ui-1 rounded-badge px-ui-2 py-ui-1 text-table-header font-semibold not-italic;
  }

  .context-switcher-empty,
  .context-switcher-loading {
    @apply px-ui-3 py-ui-3 text-body text-neutral-500;
  }

  .context-switcher-empty strong,
  .context-switcher-empty span {
    @apply block;
  }

  .context-switcher-empty strong {
    @apply text-neutral-800;
  }

  .context-switcher-loading {
    @apply flex items-center gap-ui-2 border-t border-neutral-100 bg-primary-50 font-medium text-primary-700;
  }

  .context-switcher-spinner {
    @apply h-4 w-4 rounded-full border-2 border-primary-200 border-r-primary-700;
    animation: cxp-spin 0.7s linear infinite;
  }

  .app-main-shell {
    @apply flex min-h-screen min-w-0 max-w-full flex-col overflow-x-clip transition-[margin] duration-200;
  }

  .app-topbar {
    @apply sticky top-0 z-30 flex-none border-b border-ui-border bg-white/95 shadow-soft backdrop-blur;
  }

  .app-topbar-inner {
    @apply flex h-16 min-w-0 items-center justify-between gap-ui-2 px-ui-3 sm:gap-ui-3 sm:px-ui-5 lg:px-ui-6;
  }

  .app-topbar-actions {
    @apply flex min-w-0 flex-none items-center gap-ui-1 sm:gap-ui-2;
  }

  .topbar-context,
  .topbar-profile-trigger,
  .topbar-language-trigger {
    @apply inline-flex h-10 min-w-10 items-center justify-center rounded-control border border-ui-border bg-white text-neutral-700 transition-colors duration-150 hover:border-ui-border-hover hover:bg-neutral-50 hover:text-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30;
  }

  .topbar-context {
    @apply min-w-10 gap-ui-2 px-ui-2 sm:max-w-44 md:max-w-52 xl:max-w-64;
  }

  .topbar-context-dot {
    @apply h-2.5 w-2.5 flex-none rounded-badge bg-success-500 ring-4 ring-success-50;
  }

  .topbar-profile-trigger {
    @apply gap-ui-2 px-0 sm:px-ui-1 2xl:px-ui-2;
  }

  .topbar-avatar {
    @apply flex h-9 w-9 flex-none items-center justify-center rounded-control bg-primary-600 text-xs font-semibold text-white;
  }

  .topbar-language-trigger {
    @apply gap-ui-2 px-ui-2 text-sm font-semibold uppercase sm:px-ui-3;
  }

  .topbar-menu {
    @apply absolute z-[70] mt-ui-2 w-56 overflow-hidden rounded-card border border-ui-border bg-white p-ui-1 shadow-overlay;
  }

  .topbar-menu a {
    @apply flex min-h-10 items-center gap-ui-3 rounded-control px-ui-3 py-ui-2 text-body font-medium text-neutral-700 transition-colors duration-150 hover:bg-neutral-100 hover:text-neutral-950 focus-visible:bg-primary-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30;
  }

  .topbar-menu a[aria-current="true"] {
    @apply bg-primary-50 text-primary-800;
  }

  .toast-region {
    @apply pointer-events-none fixed inset-x-ui-3 top-20 z-[80] flex flex-col items-end gap-ui-2 sm:left-auto sm:right-ui-5 sm:w-[min(26rem,calc(100vw-2.5rem))];
  }

  .toast-region .toast {
    @apply pointer-events-auto w-full;
  }

  .app-content {
    @apply min-w-0 max-w-full flex-1 overflow-x-clip px-ui-3 py-ui-5 sm:px-ui-5 lg:px-ui-6 lg:py-ui-6;
  }

  .app-footer {
    @apply flex-none border-t border-ui-border bg-white px-ui-4 py-ui-4 text-center text-helper text-neutral-500;
  }

  /* Page Heading */
  .page-heading {
    @apply flex items-center justify-between mb-6 pb-4 border-b border-secondary-200;
  }

  /* Breadcrumb */
  .breadcrumb {
    @apply flex flex-wrap items-center space-x-2 text-sm text-secondary-600;
  }

  .breadcrumb-item {
    @apply flex items-center;
  }

  .breadcrumb-item:not(:last-child)::after {
    content: '/';
    @apply mx-2 text-secondary-400;
  }

  .breadcrumb-item.active {
    @apply text-secondary-900 font-medium;
  }

  .breadcrumb a {
    @apply text-primary-600 hover:text-primary-800 hover:underline;
  }

  /* Pagination */
  .pagination {
    @apply flex items-center gap-1;
  }

  .page-item {
    @apply inline-block;
  }

  .page-link {
    @apply rounded-control border border-ui-border-hover px-ui-3 py-ui-2 text-body transition-colors duration-150 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30;
  }

  .page-item.active .page-link {
    @apply bg-primary-600 text-white border-primary-600;
  }


  .table-pager-toolbar {
    @apply flex flex-col gap-3 border-b border-secondary-200 bg-white px-5 py-3 text-sm sm:flex-row sm:items-center sm:justify-between;
  }

  .table-card-header {
    @apply flex flex-col gap-4 border-b border-secondary-200 bg-white px-5 py-4 lg:flex-row lg:items-center lg:justify-between;
  }

  .table-card-title {
    @apply min-w-0;
  }

  .table-card-title h3 {
    @apply text-lg font-semibold text-secondary-900;
  }

  .table-card-title p {
    @apply mt-1 text-sm text-secondary-500;
  }

  .table-card-controls {
    @apply flex flex-wrap items-center gap-2 text-sm text-secondary-600;
  }

  .server-table-pager {
    @apply flex flex-col gap-3 border-t border-secondary-200 bg-white px-5 py-4 text-sm text-secondary-600 sm:flex-row sm:items-center sm:justify-between;
  }

  .server-table-pager-actions {
    @apply flex flex-wrap items-center gap-2;
  }

  .server-table-pager-link {
    @apply inline-flex h-9 items-center justify-center rounded-control border border-ui-border-hover bg-white px-ui-3 text-body font-medium text-neutral-700 transition-colors duration-150 hover:bg-neutral-100;
  }

  .server-table-pager-disabled {
    @apply inline-flex h-9 cursor-not-allowed items-center justify-center rounded-control border border-ui-border bg-neutral-50 px-ui-3 text-body font-medium text-neutral-400;
  }

  .table-pager-group {
    @apply flex min-w-0 flex-wrap items-center gap-2 text-secondary-700;
  }

  .table-pager-label {
    @apply text-sm font-medium text-secondary-700;
  }

  .table-pager-suffix {
    @apply text-sm text-secondary-500;
  }

  .table-pager-select {
    @apply h-9 w-auto min-w-20 rounded-control border border-ui-border-hover bg-white px-ui-2 py-ui-1 text-body font-medium text-neutral-900 shadow-none focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus-visible:ring-primary-500/20;
  }

  .table-pager-info {
    @apply min-w-0 flex-1 text-sm text-secondary-500 sm:text-center;
  }

  .table-pager-actions {
    @apply flex flex-wrap items-center gap-2;
  }

  .table-pager-button {
    @apply inline-flex h-9 items-center justify-center rounded-control border border-ui-border-hover bg-white px-ui-3 text-body font-medium text-neutral-700 transition-colors duration-150 hover:bg-neutral-100 disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:text-neutral-400;
  }

  .table-pager-page {
    @apply min-w-28 text-center text-sm font-semibold text-secondary-700;
  }

  .document-status-strip {
    @apply mb-ui-5 flex flex-col gap-ui-3 rounded-card border border-ui-border bg-white px-ui-5 py-ui-4 shadow-soft sm:flex-row sm:items-center sm:justify-between;
  }

  .document-status-meta {
    @apply flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-secondary-500;
  }

  .status-pill {
    @apply inline-flex items-center gap-ui-1 rounded-badge border px-ui-2 py-ui-1 text-metadata font-semibold;
  }

  .status-pill-success {
    @apply border-success-200 bg-success-50 text-success-800;
  }

  .status-pill-warning {
    @apply border-warning-200 bg-warning-50 text-warning-800;
  }

  .status-pill-muted {
    @apply border-secondary-200 bg-secondary-50 text-secondary-700;
  }

  .document-operations {
    @apply mb-6;
  }

  .operations-grid {
    @apply grid grid-cols-1 gap-4 lg:grid-cols-2 2xl:grid-cols-3;
  }

  .operation-panel {
    @apply min-w-0 rounded-card border border-ui-border bg-neutral-50/60 p-ui-4;
  }

  .operation-panel-header {
    @apply flex min-w-0 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between;
  }

  .operation-panel-title {
    @apply text-sm font-semibold text-secondary-900;
  }

  .operation-panel-copy {
    @apply mt-1 text-sm leading-5 text-secondary-500;
    overflow-wrap: anywhere;
  }

  .operation-panel-note {
    @apply mt-2 text-xs leading-5 text-secondary-500;
  }

  .action-row {
    @apply flex flex-wrap items-center gap-3;
  }

  .history-list {
    @apply mt-4 space-y-2;
  }

  .history-title {
    @apply text-sm font-semibold text-secondary-900;
  }

  .history-item {
    @apply rounded-control border border-ui-border bg-white px-ui-3 py-ui-2 text-body;
  }

  .history-item-compact {
    @apply text-xs;
  }

  .history-meta {
    @apply flex flex-wrap items-center justify-between gap-2 text-xs text-secondary-500;
  }

  .history-text {
    @apply mt-1 whitespace-pre-wrap text-secondary-800;
  }

  .history-empty,
  .empty-state-inline {
    @apply text-sm italic text-secondary-500;
  }

  .related-result {
    @apply mt-ui-4 rounded-control border border-ui-border bg-white p-ui-3 text-body text-neutral-700;
  }

  .payments-filter-grid {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2;
  }

  @media (min-width: 1280px) {
    .payments-filter-grid {
      grid-template-columns: minmax(160px, 1.1fr) minmax(150px, 1fr) minmax(130px, 0.9fr) minmax(145px, 0.9fr) minmax(180px, 1.1fr) minmax(120px, 0.7fr);
    }
  }

  .payments-filter-grid > div {
    @apply min-w-0;
  }

  .payments-filter-grid input,
  .payments-filter-grid select,
  .payments-filter-grid button {
    @apply min-w-0;
  }

  .document-filter-grid {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4;
  }

  .document-filter-grid > div,
  .document-filter-grid input,
  .document-filter-grid select,
  .document-filter-grid button {
    @apply min-w-0;
  }

  .document-filter-actions {
    @apply flex min-w-0 items-end gap-2 md:col-span-2 xl:col-span-1;
  }

  .provider-filter-grid {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2;
  }

  @media (min-width: 1280px) {
    .provider-filter-grid {
      grid-template-columns: minmax(280px, 1.35fr) minmax(220px, 1fr) minmax(180px, 0.8fr) minmax(150px, 0.65fr);
    }
  }

  .provider-filter-grid > div,
  .provider-filter-grid input,
  .provider-filter-grid select,
  .provider-filter-grid button {
    @apply min-w-0;
  }

  .fiscal-summary-card {
    @apply rounded-card border border-ui-border bg-white p-ui-4 shadow-card;
  }

  .fiscal-summary-grid {
    @apply grid grid-cols-1 gap-3 md:grid-cols-2;
  }

  .fiscal-summary-panel {
    @apply min-w-0 rounded-control border border-ui-border bg-neutral-50 px-ui-3 py-ui-3;
  }

  .fiscal-summary-kicker {
    @apply mb-2 text-xs font-medium text-secondary-500;
  }

  .fiscal-summary-row {
    @apply flex min-w-0 items-center justify-between gap-3 text-sm text-secondary-700;
  }

  .fiscal-summary-row + .fiscal-summary-row {
    @apply mt-1.5;
  }

  .fiscal-summary-row strong,
  .fiscal-summary-value {
    @apply min-w-0 truncate font-semibold text-secondary-900;
  }

  .ui-state,
  .empty-state,
  .no-results-state,
  .error-state,
  .success-state,
  .loading-state {
    @apply rounded-card border px-ui-6 py-ui-8 text-center text-body shadow-soft;
  }

  .ui-state-empty,
  .ui-state-no-results,
  .empty-state,
  .no-results-state {
    @apply border-dashed border-neutral-300 bg-neutral-50 text-neutral-600;
  }

  .ui-state-error,
  .error-state {
    @apply border-danger-200 bg-danger-50 text-danger-800;
  }

  .ui-state-success,
  .success-state {
    @apply border-success-200 bg-success-50 text-success-800;
  }

  .ui-state-info {
    @apply border-info-200 bg-info-50 text-info-800;
  }

  .ui-state-loading,
  .loading-state {
    @apply border-ui-border bg-white text-neutral-600;
  }

  .ui-state-icon,
  .empty-state-icon {
    @apply mx-auto mb-ui-3 flex h-10 w-10 items-center justify-center rounded-badge bg-white text-current shadow-soft;
  }

  .empty-state-icon svg {
    @apply h-6 w-6;
  }

  .ui-state-title,
  .empty-state-title {
    @apply text-card-title text-current;
  }

  .ui-state-copy,
  .empty-state-copy {
    @apply mx-auto mt-ui-1 max-w-xl text-helper text-current opacity-80;
  }

  .ui-state-actions {
    @apply mt-ui-4 flex flex-wrap items-center justify-center gap-ui-2;
  }

  .skeleton-line {
    @apply relative overflow-hidden rounded-badge bg-neutral-200;
  }

  .skeleton-line::after,
  .skeleton-card::after,
  .skeleton-circle::after {
    content: '';
    @apply absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/70 to-transparent;
    animation: cxp-shimmer 1.35s infinite;
  }

  .skeleton-card {
    @apply relative min-h-28 overflow-hidden rounded-card border border-ui-border bg-neutral-100;
  }

  .skeleton-circle {
    @apply relative overflow-hidden rounded-badge bg-neutral-200;
  }

  .skeleton-table-row {
    @apply grid min-h-12 grid-cols-4 items-center gap-ui-4 border-b border-neutral-100 px-ui-4;
  }

  .skeleton-group {
    @apply space-y-ui-3;
  }

  .dropdown-panel {
    @apply absolute z-50 mt-ui-2 min-w-56 overflow-hidden rounded-card border border-ui-border bg-white p-ui-1 shadow-overlay;
  }

  .dropdown-panel [role="menuitem"] {
    @apply flex min-h-10 w-full items-center gap-ui-2 rounded-control px-ui-3 py-ui-2 text-left text-body font-medium text-neutral-700 transition-colors duration-150 hover:bg-neutral-100 hover:text-neutral-950 focus-visible:bg-primary-50;
  }

  .toast {
    @apply flex min-w-0 items-start gap-ui-3 rounded-card border px-ui-4 py-ui-3 text-body shadow-overlay;
  }

  .toast-success {
    @apply border-success-200 bg-success-50 text-success-900;
  }

  .toast-warning {
    @apply border-warning-200 bg-warning-50 text-warning-900;
  }

  .toast-error,
  .toast-danger {
    @apply border-danger-200 bg-danger-50 text-danger-900;
  }

  .toast-info {
    @apply border-info-200 bg-info-50 text-info-900;
  }

  .toast-dismiss {
    @apply inline-flex h-10 w-10 flex-none items-center justify-center rounded-control text-current opacity-70 transition-colors duration-150 hover:bg-white/70 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30;
  }

  .tooltip-anchor {
    @apply relative inline-flex min-w-0;
  }

  .tooltip-content {
    @apply pointer-events-none absolute bottom-full left-1/2 z-50 mb-ui-2 max-w-64 -translate-x-1/2 whitespace-normal rounded-control bg-neutral-950 px-ui-3 py-ui-2 text-center text-metadata font-medium text-white shadow-overlay;
  }

  /* Lightweight Bootstrap compatibility for legacy Twig templates rendered inside the Tailwind shell. */
  .row {
    @apply grid grid-cols-1 gap-4;
  }

  .g-2 {
    @apply gap-2;
  }

  .g-3 {
    @apply gap-3;
  }

  .g-4 {
    @apply gap-4;
  }

  /* Sin span explicito ocupa toda la fila; los col-sm/md/lg lo reducen desde su breakpoint. */
  :where(.row) > :where([class^="col-"], [class*=" col-"]) {
    @apply min-w-0;
    grid-column: 1 / -1;
  }

  @media (min-width: 640px) {
    .row {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .col-sm-1 { grid-column: span 1 / span 1; }
    .col-sm-2 { grid-column: span 2 / span 2; }
    .col-sm-3 { grid-column: span 3 / span 3; }
    .col-sm-4 { grid-column: span 4 / span 4; }
    .col-sm-5 { grid-column: span 5 / span 5; }
    .col-sm-6 { grid-column: span 6 / span 6; }
    .col-sm-7 { grid-column: span 7 / span 7; }
    .col-sm-8 { grid-column: span 8 / span 8; }
    .col-sm-9 { grid-column: span 9 / span 9; }
    .col-sm-10 { grid-column: span 10 / span 10; }
    .col-sm-11 { grid-column: span 11 / span 11; }
    .col-sm-12 { grid-column: span 12 / span 12; }
  }

  @media (min-width: 768px) {
    .col-md-1 { grid-column: span 1 / span 1; }
    .col-md-2 { grid-column: span 2 / span 2; }
    .col-md-3 { grid-column: span 3 / span 3; }
    .col-md-4 { grid-column: span 4 / span 4; }
    .col-md-5 { grid-column: span 5 / span 5; }
    .col-md-6 { grid-column: span 6 / span 6; }
    .col-md-7 { grid-column: span 7 / span 7; }
    .col-md-8 { grid-column: span 8 / span 8; }
    .col-md-9 { grid-column: span 9 / span 9; }
    .col-md-10 { grid-column: span 10 / span 10; }
    .col-md-11 { grid-column: span 11 / span 11; }
    .col-md-12 { grid-column: span 12 / span 12; }
  }

  @media (min-width: 1024px) {
    .col-lg-1 { grid-column: span 1 / span 1; }
    .col-lg-2 { grid-column: span 2 / span 2; }
    .col-lg-3 { grid-column: span 3 / span 3; }
    .col-lg-4 { grid-column: span 4 / span 4; }
    .col-lg-5 { grid-column: span 5 / span 5; }
    .col-lg-6 { grid-column: span 6 / span 6; }
    .col-lg-7 { grid-column: span 7 / span 7; }
    .col-lg-8 { grid-column: span 8 / span 8; }
    .col-lg-9 { grid-column: span 9 / span 9; }
    .col-lg-10 { grid-column: span 10 / span 10; }
    .col-lg-11 { grid-column: span 11 / span 11; }
    .col-lg-12 { grid-column: span 12 / span 12; }
  }

  .d-flex {
    @apply flex;
  }

  .align-items-center {
    @apply items-center;
  }

  .align-items-start {
    @apply items-start;
  }

  .justify-content-between {
    @apply justify-between;
  }

  .justify-content-end {
    @apply justify-end;
  }

  .mb-0 {
    @apply mb-0;
  }

  .mb-1 {
    @apply mb-1;
  }

  .mb-2 {
    @apply mb-2;
  }

  .mb-3 {
    @apply mb-3;
  }

  .mt-3 {
    @apply mt-3;
  }

  .me-1 {
    @apply mr-1;
  }

  .me-2 {
    @apply mr-2;
  }

  .me-3 {
    @apply mr-3;
  }

  .ms-auto {
    @apply ml-auto;
  }

  .h3 {
    @apply text-2xl font-bold text-secondary-900;
  }

  .h4,
  h4 {
    @apply text-xl font-semibold text-secondary-900;
  }

  .h5,
  h5 {
    @apply text-base font-semibold text-secondary-900;
  }

  .rounded-circle {
    @apply rounded-full;
  }

  .bg-light {
    @apply bg-secondary-100;
  }

  .text-primary {
    @apply text-primary-600;
  }

  .text-muted-80 {
    @apply text-secondary-300;
  }

  .fs-4 {
    @apply text-2xl;
  }

  .border-end {
    @apply border-secondary-200 max-lg:border-b max-lg:pb-4 lg:border-r lg:pr-6;
  }

  .text-end {
    @apply text-right;
  }

  .w-100 {
    @apply w-full;
  }

  .mb-4 {
    @apply mb-4;
  }

  .form-text {
    @apply mt-1 text-xs text-secondary-500;
  }

  .form-check {
    @apply flex items-center gap-2;
  }

  .form-check-input {
    @apply h-4 w-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500/30;
  }

  .form-check-label {
    @apply text-sm font-medium text-secondary-700;
  }

  .form-switch .form-check-input {
    @apply h-5 w-10 rounded-full;
  }

  .h-100 {
    @apply h-full;
  }

  /* Utilities */
  .text-muted {
    @apply text-secondary-500;
  }

  .fw-semibold {
    @apply font-semibold;
  }

  .small {
    @apply text-xs;
  }
}

@layer utilities {
  /* Tailwind define .col-12 como grid-column: 12 (ultima columna); en la rejilla Bootstrap significa ancho completo. */
  .row > .col-12 {
    grid-column: 1 / -1;
  }

  .transition-smooth {
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes cxp-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes cxp-pulse {
    0%, 100% {
      opacity: 0.45;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes cxp-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

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

@layer components {

  /* ===================================================================
     Disenador de formatos de pago (cheque voucher)
     =================================================================== */

  .voucher-panel {
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
    overflow: hidden;
  }

  .voucher-panel__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-neutral-200, #e2e8f0);
    background: var(--color-neutral-50, #f8fafc);
  }

  .voucher-panel__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
  }

  .voucher-panel__subtitle {
    margin-top: 0.15rem;
    max-width: 70ch;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-neutral-500, #64748b);
  }

  .voucher-panel__body {
    padding: 1.25rem;
  }

  .voucher-step {
    display: inline-flex;
    height: 1.6rem;
    width: 1.6rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .voucher-switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    background: var(--color-neutral-50, #f8fafc);
    padding: 0.6rem 0.85rem;
    font-size: 0.82rem;
    color: var(--color-neutral-700, #334155);
  }

  /* --- medidas con unidad visible ----------------------------------- */

  .voucher-input {
    display: block;
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid var(--color-neutral-300, #cbd5e1);
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    color: var(--color-neutral-900, #0f172a);
  }

  .voucher-input:focus {
    outline: none;
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 18%);
  }

  .voucher-measure {
    position: relative;
    display: block;
  }

  .voucher-measure > .voucher-input {
    padding-right: 2.4rem;
  }

  .voucher-measure__unit {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--color-neutral-500, #64748b);
  }

  /* --- espacio de trabajo -------------------------------------------- */

  .voucher-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
  }

  @media (min-width: 1280px) {
    .voucher-workspace {
      grid-template-columns: minmax(0, 1fr) 24rem;
    }
  }

  .voucher-workspace__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }

  .voucher-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-bottom: 0;
    border-radius: 0.6rem 0.6rem 0 0;
    background: var(--color-neutral-50, #f8fafc);
    padding: 0.5rem 0.75rem;
  }

  .voucher-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
  }

  .voucher-chip {
    display: inline-flex;
    min-height: 1.85rem;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid var(--color-neutral-300, #cbd5e1);
    border-radius: 0.45rem;
    background: #fff;
    padding: 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-700, #334155);
  }

  .voucher-chip:hover {
    background: var(--color-neutral-100, #f1f5f9);
  }

  .voucher-chip--static {
    min-width: 3.25rem;
    border-style: dashed;
    background: transparent;
    cursor: default;
    font-variant-numeric: tabular-nums;
  }

  .voucher-chip--danger {
    border-color: var(--color-danger-300, #fca5a5);
    color: var(--color-danger-700, #b91c1c);
    cursor: pointer;
  }

  .voucher-chip--danger:hover {
    background: var(--color-danger-50, #fef2f2);
  }

  .voucher-range {
    width: 5.5rem;
    accent-color: var(--color-primary-500, #3b82f6);
  }

  .voucher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-neutral-600, #475569);
    cursor: pointer;
  }

  .voucher-selection {
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-bottom: 0;
    background: #fff;
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-neutral-600, #475569);
  }

  .voucher-viewport {
    max-height: 72vh;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 0 0 0.6rem 0.6rem;
    background:
      repeating-conic-gradient(#eef2f7 0% 25%, #e6ebf2 0% 50%) 0 0 / 16px 16px;
    padding: 1rem;
  }

  .voucher-stage {
    margin-inline: auto;
  }

  .voucher-paper {
    position: relative;
    box-sizing: content-box;
    flex: none;
    background: #fff;
    box-shadow: 0 8px 24px rgb(15 23 42 / 14%);
  }

  .voucher-paper--grid {
    background-image:
      linear-gradient(to right, rgb(37 99 235 / 9%) 0 0.2mm, transparent 0.2mm 10mm),
      linear-gradient(to bottom, rgb(37 99 235 / 9%) 0 0.2mm, transparent 0.2mm 10mm);
    background-size: 10mm 10mm;
  }

  .voucher-paper.is-dragging {
    cursor: grabbing;
  }

  /* Se pinta como primer hijo de .voucher-paper, asi que los campos (que
     vienen despues en el DOM) quedan encima sin necesidad de z-index. */
  .voucher-reference-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
  }

  .voucher-reference-image[hidden] {
    display: none;
  }

  /* --- guias de alineacion al arrastrar -------------------------------- */

  .voucher-align-guide {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    background: var(--color-primary-500, #3b82f6);
  }

  .voucher-align-guide--v {
    top: 0;
    bottom: 0;
    width: 1px;
    box-shadow: 0 0 0 0.5px rgb(59 130 246 / 60%);
  }

  .voucher-align-guide--h {
    left: 0;
    right: 0;
    height: 1px;
    box-shadow: 0 0 0 0.5px rgb(59 130 246 / 60%);
  }

  /* --- campos sobre la hoja ------------------------------------------ */

  .voucher-field {
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid rgb(37 99 235 / 45%);
    border-radius: 2px;
    background: rgb(59 130 246 / 7%);
    color: #0f172a;
    line-height: 1.2;
    white-space: pre-wrap;
    cursor: move;
    touch-action: none;
  }

  /* Las tablas (facturas, centros de costo) fluyen desde arriba como
     cualquier documento; solo el texto suelto se centra verticalmente. */
  .voucher-field[data-field-type="detalle_facturas_tabla"],
  .voucher-field[data-field-type="centro_costo_tabla"] {
    display: block;
  }

  .voucher-field:hover {
    border-color: var(--color-primary-500, #3b82f6);
    background: rgb(59 130 246 / 12%);
  }

  .voucher-field:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 1px;
  }

  .voucher-field.is-selected {
    border-color: var(--color-primary-600, #2563eb);
    background: rgb(59 130 246 / 16%);
    box-shadow: 0 0 0 2px rgb(37 99 235 / 45%);
    z-index: 5;
  }

  .voucher-field.is-hidden-field {
    opacity: 0.35;
    border-style: dashed;
  }

  .voucher-field.is-dimmed {
    opacity: 0.22;
    filter: grayscale(1);
  }

  .voucher-field__content {
    display: block;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  /* Etiqueta flotante con lo que se esta editando; visible al pasar el mouse
     o al seleccionar el campo, para no depender solo del panel lateral. */
  .voucher-field__badge {
    position: absolute;
    top: -1.3rem;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
  }

  .voucher-field:hover .voucher-field__badge,
  .voucher-field.is-selected .voucher-field__badge,
  .voucher-field:focus-visible .voucher-field__badge {
    opacity: 1;
  }

  .voucher-field__handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    height: 11px;
    width: 11px;
    border: 1px solid #fff;
    border-radius: 2px;
    background: var(--color-primary-600, #2563eb);
    opacity: 0;
    cursor: nwse-resize;
    touch-action: none;
  }

  .voucher-field:hover .voucher-field__handle,
  .voucher-field.is-selected .voucher-field__handle,
  .voucher-field:focus-within .voucher-field__handle {
    opacity: 1;
  }

  /* tabla de facturas dentro de la vista previa */
  .voucher-field__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: inherit;
  }

  .voucher-field__table caption {
    padding-bottom: 1mm;
    border-bottom: 1px solid #334155;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
  }

  .voucher-field__table th,
  .voucher-field__table td {
    border: 1px solid #64748b;
    padding: 0.8mm 1mm;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .voucher-field__table th {
    background: #f8fafc;
    font-size: 0.85em;
    text-transform: uppercase;
  }

  .voucher-field__table .is-amount {
    text-align: right;
    white-space: nowrap;
  }

  .voucher-field__table tfoot td {
    font-weight: 700;
  }

  .voucher-help {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--color-neutral-500, #64748b);
  }

  .voucher-help kbd {
    border: 1px solid var(--color-neutral-300, #cbd5e1);
    border-radius: 0.25rem;
    background: var(--color-neutral-100, #f1f5f9);
    padding: 0 0.25rem;
    font-family: inherit;
    font-size: 0.7rem;
  }

  /* --- panel lateral -------------------------------------------------- */

  .voucher-side-block {
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 0.6rem;
    background: #fff;
    padding: 0.85rem;
  }

  .voucher-side-block--grow {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.6rem;
  }

  .voucher-side-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
  }

  .voucher-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .voucher-side-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .voucher-side-hint {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--color-neutral-500, #64748b);
  }

  .voucher-undo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    background: #eff6ff;
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
    color: #1e40af;
  }

  .voucher-undo__actions {
    display: flex;
    flex: none;
    gap: 0.6rem;
  }

  .voucher-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: underline;
  }

  .voucher-filters {
    display: flex;
    gap: 0.3rem;
  }

  .voucher-filter {
    flex: 1 1 0;
    border: 1px solid var(--color-neutral-300, #cbd5e1);
    border-radius: 0.45rem;
    background: #fff;
    padding: 0.3rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-neutral-600, #475569);
  }

  .voucher-filter.is-active {
    border-color: var(--color-primary-600, #2563eb);
    background: var(--color-primary-600, #2563eb);
    color: #fff;
  }

  .voucher-status {
    min-height: 0;
    font-size: 0.74rem;
    color: var(--color-primary-700, #1d4ed8);
  }

  .voucher-status:not(.is-visible) {
    display: none;
  }

  .voucher-empty {
    border: 1px dashed var(--color-neutral-300, #cbd5e1);
    border-radius: 0.5rem;
    padding: 1.25rem 0.75rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-neutral-500, #64748b);
  }

  .voucher-field-list {
    display: flex;
    min-height: 0;
    max-height: 60vh;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  /* --- tarjeta de campo ----------------------------------------------- */

  .voucher-field-card {
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 0.55rem;
    background: #fff;
  }

  .voucher-field-card.is-selected {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 2px rgb(59 130 246 / 22%);
  }

  .voucher-field-card__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    list-style: none;
  }

  .voucher-field-card__summary::-webkit-details-marker {
    display: none;
  }

  .voucher-field-card__marker {
    flex: none;
    font-size: 0.7rem;
    color: var(--color-neutral-400, #94a3b8);
    transition: transform 0.15s ease;
  }

  .voucher-field-card[open] .voucher-field-card__marker {
    transform: rotate(90deg);
  }

  .voucher-field-card__titles {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .voucher-field-card__type {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-neutral-500, #64748b);
  }

  .voucher-field-card__name {
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-neutral-900, #0f172a);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .voucher-field-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-top: 1px solid var(--color-neutral-100, #f1f5f9);
    padding: 0.7rem;
  }

  .voucher-field-card__row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
  }

  .voucher-field-card__grow {
    min-width: 0;
    flex: 1 1 auto;
  }

  .voucher-field-card__check {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: 0.45rem;
    font-size: 0.74rem;
    color: var(--color-neutral-600, #475569);
  }

  .voucher-field-card__label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-neutral-600, #475569);
  }

  .voucher-field-card__hint {
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--color-neutral-500, #64748b);
  }

  .voucher-field-card__hint code {
    border-radius: 0.2rem;
    background: var(--color-neutral-100, #f1f5f9);
    padding: 0 0.2rem;
    font-size: 0.7rem;
  }

  .voucher-field-card__fieldset {
    border: 1px solid var(--color-neutral-100, #f1f5f9);
    border-radius: 0.45rem;
    padding: 0.5rem 0.6rem 0.6rem;
  }

  .voucher-field-card__legend {
    padding-inline: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-neutral-500, #64748b);
  }

  .voucher-field-card__unit-note {
    font-weight: 500;
    text-transform: none;
    color: var(--color-neutral-400, #94a3b8);
  }

  .voucher-field-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .voucher-field-card__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .voucher-field-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .voucher-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .voucher-unsaved-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-amber-700, #b45309);
  }

  .voucher-undo[hidden],
  .voucher-empty[hidden],
  .voucher-field-card[hidden],
  .voucher-status[hidden],
  .voucher-unsaved-badge[hidden] {
    display: none;
  }
}