/* Identidad base Bezzure. Los colores personalizados D-288 conservan prioridad. */
@import url("./assets/bezzure/fonts.css");

:root {
  --brand-honey: #ebb02d;
  --brand-mint: #5fc9ab;
  --brand-pine: #1e2e2a;
  --brand-cream: #fff9e6;
  --brand-sand: #f3e7c8;
  --brand-mint-soft: #cfede2;
  --bg: #fff;
  --bg-2: var(--brand-sand);
  --surface: #fff;
  --surface-soft: #f7f7ef;
  --surface-strong: var(--brand-sand);
  --ink: var(--brand-pine);
  --muted: #4d625b;
  --muted-2: #60736b;
  --line: #dce2d7;
  --line-strong: #85998e;
  /* Los enlaces pequeños también usan primary: pino mantiene contraste sobre crema. */
  --primary: #3f5c56;
  --primary-soft: var(--brand-mint-soft);
  --teal: var(--brand-mint);
  --shadow: 0 16px 38px rgb(30 46 42 / 9%);
  --shadow-soft: 0 5px 18px rgb(30 46 42 / 6%);
  --radius: 12px;
  --font: "Quicksand", "Segoe UI", Arial, sans-serif;
  --font-heading: "Playfair Display", Georgia, serif;
}

/* Adaptación provisional: el manual no especifica un tema oscuro completo. */
:root[data-theme="dark"] {
  --bg: #202426;
  --bg-2: #25292b;
  --surface: #292e30;
  --surface-soft: #303638;
  --surface-strong: #394043;
  --ink: #e9eeeb;
  --muted: #bdc7c2;
  --muted-2: #a8b4ae;
  --line: #424a4c;
  --line-strong: #74827c;
  --primary: #9bd6c4;
  --primary-soft: #354741;
  --shadow: 0 16px 38px rgb(0 0 0 / 22%);
  --shadow-soft: 0 5px 18px rgb(0 0 0 / 15%);
}

body { font-family: var(--font); background: var(--bg); }
.main, .workspace { background: var(--bg); }
:root:not([data-theme="dark"]):not([data-analytics-design-active="true"]) .main {
  background: linear-gradient(rgb(255 255 255 / 88%), rgb(255 255 255 / 88%)), #fff url("./assets/bezzure/panal.svg") repeat;
  background-size: auto, 100px auto;
}
:root:not([data-theme="dark"]):not([data-analytics-design-active="true"]) .workspace { background: transparent; }
button, input, select, textarea { font-family: inherit; }
h1, h2, .panel-title { font-family: var(--font-heading); font-weight: 500; }
table, .metric-card, .dashboard-widget { font-variant-numeric: tabular-nums; }
.sidebar { background: var(--surface); border-color: var(--line); }
.brand { min-height: 76px; gap: 10px; }
.brand-mark { object-fit: contain; }
.app-shell:not(.sidebar-collapsed) .brand,
.app-shell.sidebar-collapsed.sidebar-hover-expanded .brand { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; min-height: 76px; }
.app-shell:not(.sidebar-collapsed) .brand-mark,
.app-shell.sidebar-hover-expanded .brand-mark { display: none; }
.brand-text { gap: 5px; }
.brand-wordmark { display: block; width: 120px; height: 30px; object-fit: contain; }
.brand-wordmark-dark { display: none; }
:root[data-theme="dark"] .brand-wordmark-light { display: none; }
:root[data-theme="dark"] .brand-wordmark-dark { display: block; }
.brand-text span { letter-spacing: .08em; font-size: 11px; font-weight: 600; }
.topbar { background: var(--surface); border-bottom-color: var(--line); }
@supports (backdrop-filter: blur(12px)) {
  .topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }
}
.topbar h1 { font-size: 28px; line-height: 1.2; }
.module-button, .module-subnav-button { border-radius: 10px; }
.module-button, .module-subnav-button { color: var(--ink); }
.module-icon-image { background: var(--primary-soft); }
.module-icon-image img { filter: brightness(0) saturate(100%) invert(29%) sepia(16%) saturate(746%) hue-rotate(112deg) brightness(95%) contrast(87%); }
:root[data-theme="dark"] .module-icon-image img { filter: brightness(0) saturate(100%) invert(78%) sepia(19%) saturate(905%) hue-rotate(105deg) brightness(91%) contrast(89%); }
.module-button.active, .module-subnav-button.active { color: var(--ink); background: var(--primary-soft); }
:root[data-theme="dark"] .module-button.active,
:root[data-theme="dark"] .module-subnav-button.active { color: var(--ink); background: var(--primary-soft); }
.module-button:hover:not(.active), .module-subnav-button:hover:not(.active) { background: var(--surface-soft); color: var(--ink); }
.panel, .metric-card, .dashboard-widget, .auth-card { border-radius: var(--radius); }
.control-button, .primary-button, .secondary-button, .icon-button { border-radius: 10px; }
.control-button:hover { background: var(--surface-soft); }
.primary-button { box-shadow: none; }
/* Acciones de apoyo en menta; se reserva el dorado para el envío del formulario. */
:root:not([data-analytics-design-active="true"]) .primary-button {
  background: var(--brand-mint); color: var(--brand-pine); border-color: #3f5c56;
}
:root:not([data-analytics-design-active="true"]) .primary-button:hover:not(:disabled) {
  background: var(--brand-mint-soft); color: var(--brand-pine); border-color: #3f5c56;
}
:root:not([data-analytics-design-active="true"]) .auth-submit {
  background: var(--brand-honey); border-color: #876310; color: var(--brand-pine);
}
:root:not([data-analytics-design-active="true"]) .auth-submit:hover:not(:disabled) { background: #f1c45b; }
button, a, input, select, textarea { transition: background-color .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.input-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input, select, textarea { accent-color: var(--primary); }
.input-wrap input::placeholder { color: var(--muted); opacity: 1; }
.password-toggle { color: var(--primary); }
.password-toggle:hover { background: var(--primary-soft); border-color: var(--line); }
.auth-page { background: var(--bg); }
.auth-brand-panel { background: var(--bg); padding: clamp(28px, 4vw, 64px); gap: 32px; }
:root:not([data-theme="dark"]) .auth-brand-panel {
  background-image: linear-gradient(rgb(255 255 255 / 88%), rgb(255 255 255 / 88%)), url("./assets/bezzure/panal.svg");
  background-size: auto, 100px auto;
}
.auth-brand-icon { width: 200px; height: 50px; object-fit: contain; }
.auth-brand-copy h1 { font-size: clamp(36px, 4.3vw, 56px); line-height: 1.15; font-weight: 500; }
.auth-brand-copy p:last-child { color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; letter-spacing: .08em; }
.eyebrow::before { content: ""; width: 24px; height: 3px; flex: 0 0 24px; background: var(--brand-honey); }
.auth-login-panel { background: var(--surface-soft); padding: clamp(24px, 4vw, 54px); }
.auth-card { background: var(--surface); padding: 32px; border-color: var(--line); }
.auth-icon { width: 44px; height: 64px; object-fit: contain; border-radius: 0; }
.auth-feature { background: var(--surface); border-color: var(--line); border-radius: 12px; }
.feature-icon { background: var(--brand-mint-soft); color: var(--brand-pine); border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); width: 28px; height: 32px; }
.auth-language-toggle { background: var(--surface); }
.input-wrap input { background: var(--surface); border-radius: 10px; }
/* Auditoría Analytics: lectura cómoda y paleta consistente en sus paneles. */
:root:not([data-analytics-design-active="true"]) [data-brand-overview="true"] :is(th, td) { color: var(--ink); }
:root:not([data-analytics-design-active="true"]) [data-brand-overview="true"] thead th,
:root:not([data-analytics-design-active="true"]) [data-brand-overview="true"] tfoot td { background: var(--surface-soft); }
:root:not([data-analytics-design-active="true"]) [data-brand-overview="true"] tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 40%, var(--surface)); }
:root:not([data-analytics-design-active="true"]) .workspace:has([data-brand-overview="true"]) .drawer-guardrail.compact { background: var(--primary-soft); color: var(--ink); border-color: var(--line); }
[data-brand-overview="true"] .dashboard-widget-title strong { font-family: var(--font-heading); font-size: 20px; font-weight: 500; }
/* Una celda vacía debe conservar el colspan, no convertirse en un grid de 180px. */
[data-brand-overview="true"] td.table-empty-state {
  display: table-cell; width: auto; height: 110px; white-space: normal;
  text-align: center; vertical-align: middle; overflow-wrap: anywhere;
}
/* Dar espacio a jerarquías profundas sin sustituir anchos inline guardados. */
[data-brand-overview="true"] .dashboard-hierarchy-table:has(thead th:nth-child(10)) { min-width: 2000px; }
[data-brand-overview="true"] .dashboard-hierarchy-table:has(thead th:nth-child(10)) th:first-child { width: 320px; }
[data-brand-overview="true"] :is(.dashboard-hierarchy-toggle > b, .dashboard-hierarchy-leaf) { white-space: normal; overflow-wrap: anywhere; }
:root:not([data-analytics-design-active="true"]) [data-brand-overview="true"] :is(th, td, td button:not(.badge), td a) {
  /* Neutraliza exclusivamente el !important azul/gris del tema legacy. */
  color: var(--ink) !important;
}
:root:not([data-analytics-design-active="true"]) .workspace:has([data-brand-overview="true"]) .dashboard-editor {
  border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.workspace:has([data-brand-overview="true"]) .dashboard-editor-form > label { display: grid; gap: 6px; }
:root:not([data-analytics-design-active="true"]) .workspace:has([data-brand-overview="true"]) .dashboard-editor :is(input:not([type="radio"]):not([type="checkbox"]), select) {
  min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
}
:root:not([data-analytics-design-active="true"]) .workspace:has([data-brand-overview="true"]) :is(.dashboard-choice-card, .dashboard-choice-card > span, .dashboard-hierarchy-options label, .dashboard-column-options label, .dashboard-filter-slicer, .dashboard-slicer-options, .dashboard-metric-picker, .dashboard-choice-group, .dashboard-hierarchy-picker, .dashboard-filter-picker) {
  background: var(--surface-soft); color: var(--ink); border-color: var(--line);
}
:root:not([data-analytics-design-active="true"]) .workspace:has([data-brand-overview="true"]) :is(.dashboard-choice-card input:checked + span, .dashboard-hierarchy-options label:has(input:checked), .dashboard-column-options label:has(input:checked)) {
  background: var(--primary-soft); color: var(--ink); border-color: var(--primary);
}
.topbar p { font-size: 13px; line-height: 1.5; }
/* Transfer: mismos colores de lectura, sin sustituir estados de negocio. */
:root:not([data-analytics-design-active="true"]) [data-brand-section="transfer"] :is(th, td, td button:not(.badge), td a) { color: var(--ink) !important; }
:root:not([data-analytics-design-active="true"]) [data-brand-section="transfer"] :is(thead th, tfoot td) { background: var(--surface-soft); }
:root:not([data-analytics-design-active="true"]) [data-brand-section="transfer"] :is(.badge.info, .filter-chip) { background: var(--primary-soft); color: var(--ink); border-color: var(--line); }
[data-brand-section="transfer"] .rq-page-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
[data-brand-section="transfer"] .transfer-receivers-panel :is(th, td) { white-space: normal; overflow-wrap: anywhere; }
:root:not([data-analytics-design-active="true"]) [data-brand-section="transfer"] :is(.rail-link-button, .page-button, .page-size-control select) { color: var(--ink); background: var(--surface); border-color: var(--line); }
:root:not([data-analytics-design-active="true"]) [data-brand-section="transfer"] .page-button.active { background: var(--primary-soft); color: var(--ink); border-color: var(--primary); }
:root:not([data-analytics-design-active="true"]) [data-brand-section="transfer"] tbody tr:not(.active):nth-child(even) td { background: color-mix(in srgb, var(--surface-soft) 45%, var(--surface)); }
:root:not([data-analytics-design-active="true"]):has([data-brand-section="transfer"]) .filter-drawer .drawer-guardrail { background: var(--primary-soft); color: var(--ink); border-color: var(--line); }
:root:not([data-analytics-design-active="true"]) [data-brand-section="transfer"] .drawer-guardrail { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
.dashboard-board-empty { font-size: 14px; line-height: 1.6; padding: 24px; }
.dashboard-board-empty strong { font-size: 20px; }
.source-info-table { font-size: 13px; }
.source-info-table th, .source-info-table td { color: var(--ink); line-height: 1.5; }
.source-info-table thead th,
.source-info-table tbody th[scope="rowgroup"] { background: var(--surface-soft); color: var(--ink); }
.source-info-table td > code, .source-info-table td > small,
.source-info-mode + small { font-size: 11px; line-height: 1.5; color: var(--muted); }
.source-info-mode.is-date, .source-info-mode.is-realtime {
  background: var(--primary-soft); color: var(--ink); border-color: var(--line-strong);
}
.source-info-mode.is-manual { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
.source-info-mode.is-inactive { background: var(--brand-sand); color: var(--brand-pine); border-color: var(--brand-honey); }
:root[data-theme="dark"] .auth-brand-panel { background: var(--bg); }
:root[data-theme="dark"] .auth-login-panel { background: var(--surface-soft); }
:root[data-theme="dark"] .auth-card, :root[data-theme="dark"] .auth-feature { background: var(--surface); }
:root[data-theme="dark"]:not([data-analytics-design-active="true"]) :is(.module-button, .module-subnav-button):not(.active) { background: transparent; }
:root[data-theme="dark"]:not([data-analytics-design-active="true"]) :is(.module-button, .module-subnav-button):not(.active):hover { background: var(--surface-soft); }
:root[data-theme="dark"]:not([data-analytics-design-active="true"]) :is(.control-button, .secondary-button, .icon-button) { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
:root[data-theme="dark"]:not([data-analytics-design-active="true"]) .primary-button { background: #9bd6c4; border-color: #9bd6c4; color: var(--brand-pine); }

@media (max-width: 980px) {
  :root:has([data-brand-section="transfer"]) .sidebar:has(.module-subnav:not([hidden])) { padding-bottom: 54px; }
  :root:has([data-brand-section="transfer"]) .module-nav,
  :root:has([data-brand-section="transfer"]) .module-nav-group { position: static; }
  :root:has([data-brand-section="transfer"]) .app-shell .module-subnav:not([hidden]) {
    display: flex; position: absolute; left: 10px; right: 10px; bottom: 8px;
    width: auto; margin: 0; padding: 0; gap: 4px; overflow-x: auto;
    border: 0; background: var(--surface);
  }
  :root:has([data-brand-section="transfer"]) .module-subnav::before { display: none; }
  :root:has([data-brand-section="transfer"]) .module-subnav-button { flex: 0 0 auto; width: auto; min-height: 36px; padding: 7px 10px; }
  [data-brand-overview="true"] td.table-empty-state { text-align: left; }
  .app-shell { grid-template-rows: auto minmax(0, 1fr); }
  .sidebar { grid-template-rows: auto; }
  .sidebar-control { display: none; }
  .app-shell .brand,
  .app-shell:not(.sidebar-collapsed) .brand,
  .app-shell.sidebar-collapsed.sidebar-hover-expanded .brand { min-height: 40px; padding: 0; }
  .app-shell .brand-mark,
  .app-shell:not(.sidebar-collapsed) .brand-mark,
  .app-shell.sidebar-hover-expanded .brand-mark { display: block; }
}
@media (max-width: 760px) {
  .workspace:has([data-brand-overview="true"]) .dashboard-board-actions button { white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 34px; }
  .topbar h1 { font-size: 24px; }
  .auth-brand-panel { padding: 28px 24px; gap: 24px; }
  .auth-brand-icon { width: 160px; height: 40px; }
  .auth-brand-copy h1 { font-size: 36px; }
  .auth-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}