/* BRACORE FOOD — opt-in visual primitives. No global reset or business logic.
   Mount .bracore-ui on a container (or body). See README.md for contracts. */
.bracore-ui {
  /* Brand palette; semantic aliases below allow future theme overrides. */
  --br-graphite: #080f16;
  --br-midnight: #091923;
  --br-petrol: #12303d;
  --br-turquoise: #29d5b2;
  --br-cyan: #19d4e6;
  --br-coral: #ff8276;
  --br-bg: var(--br-graphite);
  --br-surface: #10232e;
  --br-surface-raised: #173340;
  --br-surface-hover: #204353;
  --br-input-bg: #0b1c26;
  --br-text: #f0f6fa;
  --br-muted: #b1c3ce;
  --br-border: #476471;
  --br-divider: #29424f;
  --br-accent: var(--br-cyan);
  --br-on-accent: #052029;
  --br-focus: #78e9f5;
  --br-success: var(--br-turquoise);
  --br-success-bg: #103a32;
  --br-warning: #ffd27a;
  --br-warning-bg: #3b301c;
  --br-danger: var(--br-coral);
  --br-danger-bg: #41252a;
  --br-info: #8bdaff;
  --br-info-bg: #143346;
  --br-overlay: rgb(2 9 15 / 82%);
  --br-shadow: 0 12px 32px rgb(0 0 0 / 22%);
  --br-shadow-modal: 0 24px 72px rgb(0 0 0 / 48%);
  --br-radius-sm: 8px;
  --br-radius: 12px;
  --br-radius-lg: 18px;
  --br-space-1: 4px;
  --br-space-2: 8px;
  --br-space-3: 12px;
  --br-space-4: 16px;
  --br-space-5: 24px;
  --br-space-6: 32px;
  --br-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --br-duration: 140ms;
  --br-ease: cubic-bezier(.2, .7, .2, 1);
  /* Alias visuales para hojas heredadas; los identificadores técnicos siguen intactos. */
  --dino-surface: var(--br-surface);
  --dino-surface-2: var(--br-surface-raised);
  --dino-border: var(--br-divider);
  --dino-border-strong: var(--br-border);
  --dino-text: var(--br-text);
  --dino-muted: var(--br-muted);
  --dino-accent: var(--br-cyan);
  --dino-accent-soft: rgb(25 212 230 / 12%);
  color-scheme: dark;
  color: var(--br-text);
  background: var(--br-bg);
  font-family: var(--br-font);
  font-size: 16px;
  line-height: 1.5;
  accent-color: var(--br-accent);
}

/* Prepared semantic light palette. No selector or activation in this stage. */
.bracore-ui {
  --br-light-bg: #f3f7fa;
  --br-light-surface: #ffffff;
  --br-light-surface-raised: #eaf2f6;
  --br-light-surface-hover: #dcebf1;
  --br-light-input-bg: #ffffff;
  --br-light-text: #102632;
  --br-light-muted: #48616f;
  --br-light-border: #708995;
  --br-light-divider: #cddce3;
  --br-light-accent: #006d7b;
  --br-light-on-accent: #ffffff;
  --br-light-focus: #006d7b;
  --br-light-success: #00664f;
  --br-light-success-bg: #dcf4ec;
  --br-light-warning: #785000;
  --br-light-warning-bg: #fff0cc;
  --br-light-danger: #a52f2b;
  --br-light-danger-bg: #ffe8e5;
  --br-light-info: #125b7e;
  --br-light-info-bg: #e0f2fc;
  --br-light-overlay: rgb(9 25 35 / 60%);
  --br-light-shadow: 0 12px 32px rgb(16 38 50 / 10%);
  --br-light-shadow-modal: 0 24px 72px rgb(16 38 50 / 22%);
}

.bracore-ui :where(.br-button, .br-input, .br-select, .br-textarea, .br-card,
  .br-tabs, .br-tab, .br-badge, .br-modal, .br-modal-backdrop, .br-notice, .br-table-wrap) {
  box-sizing: border-box;
}
.bracore-ui :where(.br-button, .br-tab, .br-input, .br-select, .br-textarea):focus-visible {
  outline: 3px solid var(--br-focus);
  outline-offset: 3px;
}
.bracore-ui .br-muted { color: var(--br-muted); }
.bracore-ui .br-title { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.25; letter-spacing: -.025em; }
.bracore-ui .br-money { font-variant-numeric: tabular-nums; }
.bracore-ui .br-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; max-width: 100%; padding: 10px 16px;
  border: 1px solid var(--br-border); border-radius: var(--br-radius-sm);
  background: var(--br-surface-raised); color: var(--br-text);
  font: 650 .9375rem/1.3 var(--br-font); text-align: center; text-decoration: none;
  overflow-wrap: anywhere; cursor: pointer;
  transition: background-color var(--br-duration) var(--br-ease), border-color var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
}
.bracore-ui :where(.btn, .br-button, button.action) {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.3;
}
.bracore-ui .br-button--primary { background: var(--br-accent); color: var(--br-on-accent); border-color: var(--br-accent); }
.bracore-ui .br-button--danger { background: var(--br-danger-bg); color: var(--br-danger); border-color: var(--br-danger); }
.bracore-ui .br-button--ghost { background: transparent; }
.bracore-ui .br-button--icon { padding: 10px; }
.bracore-ui :where(.br-button, .br-tab):where(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; transform: none; }
@media (hover: hover) {
  .bracore-ui .br-button:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--br-focus); transform: translateY(-1px); }
  .bracore-ui .br-button--ghost:not(:disabled):not([aria-disabled="true"]):hover { background: var(--br-surface-hover); }
}
.bracore-ui .br-button:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(0); }
.bracore-ui .br-field { display: grid; gap: 6px; min-width: 0; }
.bracore-ui .br-label { color: var(--br-text); font-size: .875rem; font-weight: 600; }
.bracore-ui .br-help { color: var(--br-muted); font-size: .8125rem; margin: 0; }
.bracore-ui :where(.br-input, .br-select, .br-textarea) {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--br-border); border-radius: var(--br-radius-sm);
  background: var(--br-input-bg); color: var(--br-text); font: inherit;
}
.bracore-ui :where(.br-input, .br-textarea)::placeholder { color: var(--br-muted); opacity: 1; }
.bracore-ui .br-textarea { min-height: 104px; resize: vertical; }
.bracore-ui :where(.br-input, .br-select, .br-textarea)[aria-invalid="true"] { border-color: var(--br-danger); }
.bracore-ui :where(.br-input, .br-select, .br-textarea):disabled { opacity: .6; cursor: not-allowed; }
.bracore-ui .br-card { min-width: 0; padding: var(--br-space-5); background: var(--br-surface); border: 1px solid var(--br-divider); border-radius: var(--br-radius-lg); box-shadow: var(--br-shadow); }
.bracore-ui .br-card__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.bracore-ui .br-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.bracore-ui .br-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bracore-ui .br-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--br-divider); border-radius: var(--br-radius); }
.bracore-ui .br-table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.bracore-ui .br-table :where(th, td) { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--br-divider); vertical-align: middle; }
.bracore-ui .br-table th { background: var(--br-surface-raised); color: var(--br-muted); font-size: .8125rem; font-weight: 650; }
.bracore-ui .br-table tbody tr:last-child td { border-bottom: 0; }
.bracore-ui .br-table tbody tr:hover { background: var(--br-surface); }
.bracore-ui .br-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 6px; scrollbar-width: thin; }
.bracore-ui .br-tab { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border: 1px solid var(--br-border); border-radius: var(--br-radius-sm); background: var(--br-surface); color: var(--br-text); font: 600 .9375rem/1.3 var(--br-font); cursor: pointer; }
.bracore-ui .br-tab[aria-selected="true"] { background: var(--br-accent); color: var(--br-on-accent); border-color: var(--br-accent); }
.bracore-ui .br-badge { display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px; border: 1px solid var(--br-border); border-radius: 999px; background: var(--br-surface-raised); color: var(--br-text); font-size: .8125rem; font-weight: 650; }
.bracore-ui :where(.br-badge, .br-notice)[data-tone="success"] { color: var(--br-success); background: var(--br-success-bg); border-color: var(--br-success); }
.bracore-ui :where(.br-badge, .br-notice)[data-tone="warning"] { color: var(--br-warning); background: var(--br-warning-bg); border-color: var(--br-warning); }
.bracore-ui :where(.br-badge, .br-notice)[data-tone="danger"] { color: var(--br-danger); background: var(--br-danger-bg); border-color: var(--br-danger); }
.bracore-ui :where(.br-badge, .br-notice)[data-tone="info"] { color: var(--br-info); background: var(--br-info-bg); border-color: var(--br-info); }
.bracore-ui .br-notice { padding: 12px 16px; border: 1px solid var(--br-border); border-radius: var(--br-radius); background: var(--br-surface-raised); color: var(--br-text); overflow-wrap: anywhere; }
.bracore-ui .br-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: var(--br-overlay); }
.bracore-ui .br-modal { width: min(640px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px; border: 1px solid var(--br-border); border-radius: var(--br-radius-lg); background: var(--br-surface); color: var(--br-text); box-shadow: var(--br-shadow-modal); }
.bracore-ui dialog.br-modal::backdrop { background: var(--br-overlay); }
/* DinoDialog conserva su API; solo se sustituye su presentación dentro de Bracore. */
body.bracore-ui #dino-system-dialog { background: var(--br-overlay) !important; }
body.bracore-ui #dino-system-dialog [role="dialog"] {
  max-height: calc(100dvh - 32px); overflow-y: auto;
  border-color: var(--br-border) !important;
  background: linear-gradient(145deg, var(--br-surface-raised), var(--br-surface)) !important;
  color: var(--br-text) !important;
  box-shadow: var(--br-shadow-modal) !important;
  font-family: var(--br-font) !important;
}
body.bracore-ui #dino-system-dialog [role="dialog"] > div:not(:last-child) { color: var(--br-muted) !important; }
body.bracore-ui #dino-system-dialog [data-dialog-input] {
  min-height: 104px; background: var(--br-input-bg) !important;
  color: var(--br-text) !important; border-color: var(--br-border) !important;
}
body.bracore-ui #dino-system-dialog [data-dialog-cancel] {
  min-height: 44px; background: var(--br-surface-raised) !important;
  color: var(--br-text) !important; border-color: var(--br-border) !important;
}
body.bracore-ui #dino-system-dialog [data-dialog-confirm] {
  min-height: 44px; background: var(--br-cyan) !important;
  color: var(--br-on-accent) !important; border-color: var(--br-cyan) !important;
}
body.bracore-ui #dino-system-dialog [data-dialog-confirm][style*="#321713"] {
  background: var(--br-danger-bg) !important;
  color: var(--br-coral) !important; border-color: var(--br-coral) !important;
}
body.bracore-ui #dino-system-dialog :is([data-dialog-cancel], [data-dialog-confirm]) {
  box-sizing: border-box; max-width: 100%; padding: 10px 16px;
  overflow-wrap: anywhere; white-space: normal; line-height: 1.3; text-align: center;
}
body.bracore-ui #dino-system-dialog :is(button,textarea):focus-visible {
  outline: 3px solid var(--br-focus) !important; outline-offset: 3px;
}
.bracore-ui :where(.br-modal, .br-modal-backdrop, .br-notice, .br-card, .br-tab, .br-button)[hidden] { display: none; }
@media (max-width: 640px) {
  .bracore-ui .br-card { padding: 16px; }
  .bracore-ui .br-modal-backdrop { padding: 12px; }
  .bracore-ui .br-modal { padding: 16px; max-height: calc(100dvh - 24px); }
  .bracore-ui .br-table :where(th, td) { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bracore-ui { --br-duration: 0ms; }
  .bracore-ui :where(.br-button, .br-tab) { transition: none; transform: none !important; }
}
@media (forced-colors: active) {
  .bracore-ui :where(.br-button, .br-tab, .br-badge, .br-notice, .br-card, .br-modal) { border-color: CanvasText; }
  .bracore-ui .br-tab[aria-selected="true"] { outline: 2px solid Highlight; }
}