/* Primitivas opt-in: solo afectan elementos con clase ui-*. */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: .625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  touch-action: manipulation;
}
.ui-button:hover:not(:disabled) { background: var(--color-primary-hover); }
.ui-button:active:not(:disabled) { transform: translateY(1px); }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .52; cursor: not-allowed; }
.ui-button--secondary { border-color: var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text-primary); }
.ui-button--secondary:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-surface-hover); }
.ui-button--ghost { border-color: transparent; background: transparent; color: var(--color-text-secondary); }
.ui-button--ghost:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text-primary); }
.ui-button--danger { background: var(--color-danger); }
.ui-button--danger:hover:not(:disabled) { background: #ef4444; }
.ui-button--success { background: var(--color-success); color: #08251b; }
.ui-button--success:hover:not(:disabled) { filter: brightness(1.08); }
.ui-button--warning { background: var(--color-warning); color: #2c2110; }
.ui-button--warning:hover:not(:disabled) { filter: brightness(1.06); }
.ui-button--outline { border-color: var(--color-primary); background: transparent; color: var(--color-primary-hover); }
.ui-button--outline:hover:not(:disabled) { background: rgb(223 91 71 / .12); }
.ui-button--loading { position: relative; color: transparent; pointer-events: none; }
.ui-button--loading::after { content: ""; position: absolute; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
.ui-button--loading::after { color: #fff; }
.ui-button--md { min-height: 2.5rem; padding: .625rem 1rem; font-size: var(--font-size-sm); }
.ui-button--sm { min-height: 2rem; padding: .4rem .7rem; border-radius: var(--radius-sm); font-size: var(--font-size-xs); }
.ui-button--lg { min-height: 3rem; padding: .8rem 1.25rem; font-size: var(--font-size-md); }
.ui-button--icon { width: 2.5rem; padding: .5rem; }
.ui-icon-button--touch { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; flex: 0 0 2.75rem; padding: 0; }

/* Compatibilidad con botones legacy del POS: gana a redesign.css por especificidad,
   y conserva el gradiente y la jerarquía visual existentes. */
body.app-redesign .btn-primary,
body.app-redesign .btn-secondary {
  min-height: 2.625rem;
  border-radius: var(--radius-md);
  font-weight: 850;
  box-shadow: none;
}
body.app-redesign .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary-gradient);
  color: #fff;
}
body.app-redesign .btn-primary:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}
body.app-redesign .btn-secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}
body.app-redesign .btn-secondary:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-surface-hover);
}
body.app-redesign :where(.btn-primary, .btn-secondary):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
body.app-redesign .btn-primary.ui-button { border-color: var(--color-primary); background: var(--color-primary-gradient); color: #fff; }
body.app-redesign .btn-primary.ui-button:hover:not(:disabled) { border-color: var(--color-primary-hover); background: var(--color-primary-hover); }
body.app-redesign .btn-secondary.ui-button { border-color: var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text-primary); }
body.app-redesign .btn-secondary.ui-button:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-surface-hover); color: var(--color-text-primary); }
body.app-redesign .ui-button.ui-button--secondary { border-color: var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text-primary); }
body.app-redesign .ui-button.ui-button--secondary:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-surface-hover); }
body.app-redesign .ui-button.ui-button--ghost { border-color: transparent; background: transparent; color: var(--color-text-secondary); }
body.app-redesign .ui-button.ui-button--ghost:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text-primary); }
body.app-redesign .ui-button.ui-button--danger { border-color: var(--color-danger); background: var(--color-danger); color: #fff; }
body.app-redesign .ui-button.ui-button--success { border-color: var(--color-success); background: var(--color-success); color: #08251b; }
body.app-redesign .ui-button.ui-button--warning { border-color: var(--color-warning); background: var(--color-warning); color: #2c2110; }
body.app-redesign .ui-button.ui-button--outline { border-color: var(--color-primary); background: transparent; color: var(--color-primary-hover); }

.ui-field { display: grid; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 650; }
.ui-input, .ui-select, .ui-textarea {
  width: 100%; min-height: 2.5rem; padding: .625rem .75rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-input); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm);
}
.ui-textarea { min-height: 6rem; resize: vertical; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--color-text-muted); opacity: .85; }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { opacity: .56; cursor: not-allowed; }
.ui-help { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 400; }
.ui-card { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.ui-card--raised { background: var(--color-surface-raised); box-shadow: var(--shadow-md); }
.ui-card__title { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: 800; }

.ui-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-table { width: 100%; border-collapse: collapse; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.ui-table th, .ui-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.ui-table th { background: var(--color-surface-raised); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: .04em; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover { background: rgb(255 255 255 / .025); }
.ui-badge { display: inline-flex; align-items: center; gap: .3em; padding: .25rem .55rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-raised); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 750; line-height: 1.2; }
.ui-badge--success { border-color: rgb(67 201 149 / .35); background: rgb(67 201 149 / .12); color: #76e2b7; }
.ui-badge--warning { border-color: rgb(243 182 93 / .35); background: rgb(243 182 93 / .12); color: #f8ce8a; }
.ui-badge--danger { border-color: rgb(248 113 113 / .35); background: rgb(248 113 113 / .12); color: #fca5a5; }
.ui-badge--info { border-color: rgb(96 165 250 / .35); background: rgb(96 165 250 / .12); color: #93c5fd; }
body:not(.dark-mode).app-redesign .ui-badge--success { color: #12633f; }
body:not(.dark-mode).app-redesign .ui-badge--warning { color: #774600; }
body:not(.dark-mode).app-redesign .ui-badge--danger { color: #9f2424; }
body:not(.dark-mode).app-redesign .ui-badge--info { color: #1e40af; }
.ui-state { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); }
.ui-state--empty { border-style: dashed; text-align: center; }
.ui-state--error { border-color: rgb(248 113 113 / .4); color: #fca5a5; }
.ui-state--success { border-color: rgb(67 201 149 / .4); color: #76e2b7; }
.ui-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgb(0 0 0 / .68); }
.ui-modal-backdrop:not(.active):not(.is-open) { display: none; }
.ui-modal { width: min(100%, 34rem); max-height: min(90vh, 48rem); overflow: auto; padding: var(--space-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-surface-raised); color: var(--color-text-primary); box-shadow: var(--shadow-lg); }
.ui-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.ui-modal__title { margin: 0; font-size: var(--font-size-xl); font-weight: 850; }
.ui-modal__body { color: var(--color-text-secondary); }
.ui-modal__footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.ui-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.ui-page-header h1 { margin: 0; color: var(--color-text-primary); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.12; }
.ui-page-header p { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.ui-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.ui-section-header h2, .ui-section-header h3 { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-lg); }
.ui-skeleton { min-height: 1rem; overflow: hidden; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-surface-raised) 25%, var(--color-surface-hover) 50%, var(--color-surface-raised) 75%); background-size: 200% 100%; animation: ui-shimmer 1.35s ease-in-out infinite; }
.ui-skeleton--text { width: 100%; height: .8em; min-height: .8em; }
.ui-skeleton--title { width: min(65%, 18rem); height: 1.5rem; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
:where(.ui-button, .ui-input, .ui-select, .ui-textarea, .ui-modal-backdrop [tabindex="0"]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: var(--focus-ring); }

@media (max-width: 640px) {
  .ui-card { padding: var(--space-3); }
  .ui-button--mobile-full { width: 100%; }
  .ui-table { min-width: 34rem; }
  .ui-modal-backdrop { align-items: end; padding: 0; }
  .ui-modal { width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .ui-button { transition: none; } .ui-button--loading::after, .ui-skeleton { animation: none; } }