:root,
:root[data-theme="light"] {
  color-scheme: light;
  --brand-red: #E40520;
  --brand-red-dark: #b50318;
  --brand-blue: #1B7188;
  --brand-blue-dark: #135568;
  --brand-black: #252323;
  --brand-gray: #E6E7E8;
  --bg: #f5f6f7;
  --bg-elev: #ffffff;
  --panel: #ffffff;
  --panel-2: #f0f1f3;
  --ink: #252323;
  --ink-soft: #3a3838;
  --muted: #6d6b6b;
  --line: #E6E7E8;
  --line-soft: #f0f1f3;
  --accent: #E40520;
  --accent-2: #fde6e9;
  --accent-strong: #b50318;
  --green: #047857;
  --green-2: #e3f4ec;
  --blue: #1B7188;
  --blue-2: #e0eef2;
  --amber: #a85d00;
  --amber-2: #fff3d8;
  --red: #E40520;
  --red-2: #fde6e9;
  --teal: #1B7188;
  --sidebar-bg: #ffffff;
  --sidebar-ink: #252323;
  --sidebar-muted: #6d6b6b;
  --sidebar-border: #E6E7E8;
  --topbar-bg: #ffffff;
  --shadow-sm: 0 1px 2px rgba(37, 35, 35, 0.06);
  --shadow-md: 0 4px 16px rgba(37, 35, 35, 0.08);
  --shadow-lg: 0 18px 50px rgba(37, 35, 35, 0.14);
  --shadow: 0 18px 50px rgba(37, 35, 35, 0.14);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  font-family:
    "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-red: #E40520;
  --brand-red-dark: #b50318;
  --brand-blue: #1B7188;
  --brand-blue-dark: #135568;
  --brand-black: #252323;
  --brand-gray: #E6E7E8;
  --bg: #1a1818;
  --bg-elev: #252323;
  --panel: #2a2828;
  --panel-2: #322f2f;
  --ink: #f5f5f5;
  --ink-soft: #d8d5d5;
  --muted: #a8a5a5;
  --line: #3d3a3a;
  --line-soft: #322f2f;
  --accent: #ff3447;
  --accent-2: #3a1419;
  --accent-strong: #E40520;
  --green: #34d399;
  --green-2: #0f2a22;
  --blue: #4ba9bf;
  --blue-2: #14323a;
  --amber: #fbbf24;
  --amber-2: #2b220f;
  --red: #ff3447;
  --red-2: #3a1419;
  --teal: #4ba9bf;
  --sidebar-bg: #1a1818;
  --sidebar-ink: #ffffff;
  --sidebar-muted: #7a8aa3;
  --topbar-bg: #0e1729;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.login-screen {
  min-height: 100vh;
  padding: 28px;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.login-screen[hidden],
.app-shell[hidden] {
  display: none !important;
}

.login-panel {
  width: min(1180px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.login-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.login-logo {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
}

.login-header h1,
.login-copy h2 {
  margin: 0;
  line-height: 1.1;
}

.login-copy {
  margin: 22px 0 18px;
}

.login-copy p {
  margin: 8px 0 0;
  color: var(--muted);
}

.access-form {
  width: min(460px, 100%);
  display: grid;
  gap: 12px;
}

.access-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.access-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  background: #ffffff;
  outline: 0;
}

.access-form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(8, 122, 79, 0.14);
}

.login-error {
  margin: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

.login-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.login-step[hidden] {
  display: none !important;
}

.access-form .field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

.login-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: -4px;
}

.link-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.link-btn:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.link-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
}

.login-error:not([hidden]) {
  background: rgba(206, 42, 42, 0.08);
  border-left: 3px solid var(--red);
  padding: 8px 10px;
  border-radius: 4px;
}

.login-help[data-tone="success"] {
  color: var(--green);
  font-weight: 700;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid var(--sidebar-border, var(--line));
}

.sidebar .eyebrow {
  color: var(--sidebar-muted);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 4px 12px;
  margin-bottom: 0;
}

.brand-logo {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--brand-red);
  color: #ffffff;
  font-weight: 900;
}

.brand h1,
.topbar h2,
.dialog-header h2,
.drawer-header h2,
.empty-state h3 {
  margin: 0;
  line-height: 1.1;
}

.brand h1 {
  font-size: 18px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sidebar .eyebrow {
  color: var(--sidebar-muted);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
}

.nav-bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-border, var(--line));
}

.nav-item-licitaciones {
  margin: 2px 2px 8px;
}

.nav-label {
  margin: 14px 8px 4px;
  color: var(--sidebar-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-section {
  margin-top: 4px;
}

.nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 4px);
  margin: 6px 2px 2px;
  padding: 10px 12px;
  border: 1px solid var(--sidebar-border, var(--line));
  border-radius: 10px;
  background: rgba(230, 231, 232, 0.35);
  color: var(--sidebar-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.nav-section:not(.collapsed) .nav-section-toggle {
  background: rgba(27, 113, 136, 0.08);
  border-color: rgba(27, 113, 136, 0.22);
  color: var(--sidebar-ink, var(--ink));
}

.nav-section-toggle:hover {
  background: rgba(230, 231, 232, 0.65);
  color: var(--sidebar-ink, var(--ink));
}

.nav-section-chevron {
  font-size: 11px;
  line-height: 1;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.nav-section.collapsed .nav-section-chevron {
  transform: rotate(-90deg);
}

.nav-section-body {
  display: grid;
  gap: 3px;
  overflow: hidden;
  margin: 2px 0 4px;
  padding-left: 2px;
}

.nav-section.collapsed .nav-section-body {
  display: none;
}

:root[data-theme="dark"] .nav-section-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .nav-section-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .nav-section:not(.collapsed) .nav-section-toggle {
  background: rgba(27, 113, 136, 0.18);
  border-color: rgba(27, 113, 136, 0.35);
}

/* Sub-grupos dentro de una sección (Comercial: Pipeline / CRM / Inteligencia) */
.nav-subsection {
  display: grid;
  gap: 3px;
  margin: 4px 2px 10px;
  padding: 8px 4px 6px;
  border-radius: 12px;
  background: rgba(230, 231, 232, 0.55);
  border: 1px solid rgba(230, 231, 232, 0.95);
}
.nav-subsection-crm {
  background: rgba(27, 113, 136, 0.07);
  border-color: rgba(27, 113, 136, 0.14);
}
.nav-sublabel {
  margin: 0 8px 5px 10px;
  color: rgba(109, 107, 107, 0.95);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.nav-subsection-crm .nav-sublabel {
  color: var(--brand-blue);
}
.nav-subsection .nav-item {
  min-height: 38px;
  padding: 7px 10px;
  font-size: 13.5px;
}
.nav-subsection .nav-item span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
:root[data-theme="dark"] .nav-subsection {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .nav-subsection-crm {
  background: rgba(75, 169, 191, 0.1);
  border-color: rgba(75, 169, 191, 0.18);
}

.nav-item {
  border: 1px solid transparent;
  border-radius: var(--radius);
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: var(--sidebar-ink);
  text-align: left;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
  background: var(--brand-gray);
}

.nav-item.active {
  background: var(--brand-red);
  color: #ffffff;
  border-color: var(--brand-red);
}

.nav-item strong {
  min-width: 28px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(148, 163, 184, 0.18);
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

/* Tonos semánticos sutiles. Solo crítico y warn destacan; el resto convive. */
.nav-item[data-tone="info"] strong {
  background: rgba(148, 163, 184, 0.18);
  color: #64748b;
}
.nav-item[data-tone="good"] strong {
  /* "good" = saludable. No queremos verde fuerte compitiendo con todo. Casi neutro con micro-tinte. */
  background: rgba(148, 163, 184, 0.18);
  color: #64748b;
}
.nav-item[data-tone="warn"] strong {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}
.nav-item[data-tone="critical"] strong {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}

.nav-item.active strong,
.nav-item.active[data-tone] strong {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}

.nav-item:hover strong {
  background: rgba(37, 35, 35, 0.10);
}
.nav-item:hover[data-tone="good"] strong { background: rgba(16, 185, 129, 0.16); }
.nav-item:hover[data-tone="warn"] strong { background: rgba(245, 158, 11, 0.20); }
.nav-item:hover[data-tone="critical"] strong { background: rgba(220, 38, 38, 0.18); }

.sidebar-card {
  margin-top: auto;
  background: var(--brand-gray);
  border: 1px solid var(--sidebar-border, var(--line));
  border-radius: var(--radius);
  padding: 14px;
}

.user-card {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.user-card strong {
  color: var(--sidebar-ink);
  font-size: 15px;
}

.user-card span {
  color: var(--sidebar-muted);
  font-size: 13px;
}

.full-btn {
  width: 100%;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  padding: 4px;
  gap: 4px;
}

.segment {
  border: 0;
  border-radius: 6px;
  min-height: 36px;
  color: #dce7f2;
  background: transparent;
}

.segment.active {
  background: #ffffff;
  color: #17212b;
  font-weight: 800;
}

.main {
  min-width: 0;
  padding: 24px;
}

.topbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.topbar h2 {
  font-size: 28px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-wrap input,
.toolbar select,
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  background: #ffffff;
  outline: 0;
}

.search-wrap input {
  width: min(330px, 32vw);
}

.search-wrap input:focus,
.toolbar select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 88, 166, 0.15);
}

.primary-btn,
.secondary-btn,
.text-btn,
.mini-btn,
.danger-btn,
.icon-btn {
  border-radius: var(--radius);
  border: 1px solid transparent;
  min-height: 40px;
  padding: 9px 13px;
  font-weight: 800;
}

/* Botón primario ejecutivo: azul oscuro premium (no rojo agresivo).
   El rojo del brand se reserva para sidebar/branding/destructive. */
.primary-btn {
  color: #ffffff;
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.primary-btn:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #2563eb 100%);
  filter: brightness(1.04);
}

.primary-btn:active {
  filter: brightness(0.96);
}

.secondary-btn {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}

.secondary-btn:hover {
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--accent);
}

.text-btn {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
}

.text-btn:hover {
  background: var(--accent-2);
}

.mini-btn,
.danger-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.mini-btn {
  background: var(--accent-2);
  color: var(--accent);
  border-color: transparent;
}

.mini-btn:hover {
  background: var(--accent);
  color: #ffffff;
}

.danger-btn {
  background: var(--red-2);
  color: var(--red);
  border-color: transparent;
}

.danger-btn:hover {
  background: var(--red);
  color: #ffffff;
}

.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  padding: 14px 14px 13px;
  display: grid;
  gap: 8px;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.metric strong {
  font-size: 28px;
}

.metric small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Métricas de pagos SAP */
.metric-note {
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

/* Filtros de subtab para payment alerts (en sidebar de Compras) */
.payment-alert-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.payment-filter {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.payment-filter:hover { background: var(--panel-2); }
.payment-filter.is-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.payment-filter.is-overdue.is-active { background: var(--red); border-color: var(--red); }
.payment-filter.is-due-soon.is-active { background: var(--amber); border-color: var(--amber); }
.payment-filter.is-ok.is-active { background: var(--green); border-color: var(--green); }
.payment-alerts-table th { background: var(--panel-2); }
.sap-pill {
  display: inline-block;
  background: var(--blue);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  margin-right: 4px;
}

.metric.urgent {
  border-left-color: var(--green);
}

/* Plan de pago en la vista de Pagos */
.payment-plan-cell { min-width: 200px; max-width: 280px; }
.payment-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.plan-date { font-size: 13px; }
.plan-date strong { color: var(--text); }
.plan-badge {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.plan-badge.is-today { background: var(--blue); color: white; border-color: var(--blue); }
.plan-badge.is-late { background: var(--red); color: white; border-color: var(--red); }
.plan-badge.is-soon { background: var(--amber); color: white; border-color: var(--amber); }
.plan-note {
  font-style: italic;
  color: var(--muted);
  line-height: 1.3;
  padding: 4px 6px;
  background: var(--panel-2);
  border-radius: 4px;
  border-left: 2px solid var(--amber);
}
.plan-meta { color: var(--muted); font-size: 10px; }
.plan-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.plan-actions .mini-btn { padding: 3px 8px; font-size: 11px; }
.plan-actions .text-btn { font-size: 11px; color: var(--muted); background: transparent; border: none; cursor: pointer; padding: 3px 4px; text-decoration: underline; }
.plan-actions .text-btn:hover { color: var(--red); }

.metric.warning {
  border-left-color: var(--amber);
}

.metric.calm {
  border-left-color: var(--teal);
}

.metric.danger {
  border-left-color: var(--red);
}

.command-center {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.35fr;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(135deg, rgba(8, 122, 79, 0.08), rgba(36, 88, 166, 0.05)),
    var(--panel);
}

.command-copy {
  display: grid;
  align-content: center;
  gap: 8px;
}

.command-copy h3 {
  font-size: 24px;
}

.command-copy p:last-child {
  color: var(--muted);
  line-height: 1.5;
}

.command-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.command-kpi {
  display: grid;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  padding: 13px;
  background: #ffffff;
  color: var(--ink);
}

.command-kpi:hover {
  box-shadow: 0 10px 24px rgba(23, 33, 43, 0.08);
  transform: translateY(-1px);
}

.command-kpi span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.command-kpi strong {
  font-size: 24px;
}

.command-kpi small {
  color: var(--muted);
  line-height: 1.35;
}

.command-kpi.urgent {
  border-left-color: var(--green);
}

.command-kpi.warning {
  border-left-color: var(--amber);
}

.command-kpi.danger {
  border-left-color: var(--red);
}

.command-kpi.calm {
  border-left-color: var(--teal);
}

.readiness-list {
  display: grid;
  gap: 10px;
}

.readiness-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.readiness-item span {
  grid-row: span 2;
  min-width: 48px;
  border-radius: 999px;
  padding: 4px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}

.readiness-item.is-ok span {
  color: var(--green);
  background: var(--green-2);
}

.readiness-item.is-blocked span {
  color: var(--amber);
  background: var(--amber-2);
}

.readiness-item small {
  color: var(--muted);
  line-height: 1.35;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.module-content[hidden],
.purchase-content[hidden],
.topbar-actions[hidden] {
  display: none !important;
}

.module-content {
  display: grid;
  gap: 16px;
}

.crm-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* ───────────────────────────────────────────────────────────────
   KPI cards consistentes: eyebrow (label) → número grande → contexto.
   Aplica a Entregas, Pagos, Acuerdos, Visita, Licitaciones, Tareas,
   Calendarios, Backorders y cualquier .crm-metric del dashboard.
   ─────────────────────────────────────────────────────────────── */
.crm-metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  position: relative;
  overflow: hidden;
  border-left: 4px solid #cbd5e1;
}
.crm-metric > .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  line-height: 1.2;
  display: block;
  white-space: normal;
}
.crm-metric > strong {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
  margin: 2px 0 0;
  display: block;
  letter-spacing: -0.01em;
  word-break: break-word;
}
.crm-metric > .cell-sub,
.crm-metric > small,
.crm-metric > .metric-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 2px;
  display: block;
  font-weight: 500;
}

/* Tonos semánticos: el borde izquierdo comunica estado al instante. */
.crm-metric.calm { border-left-color: #94a3b8; }
.crm-metric.warning { border-left-color: #f59e0b; background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%); }
.crm-metric.urgent { border-left-color: #ef4444; background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%); }
.crm-metric.danger { border-left-color: #dc2626; background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%); }
.crm-metric.up,
.crm-metric.success { border-left-color: #10b981; background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%); }
.crm-metric.info { border-left-color: #3b82f6; background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%); }

/* Refinamiento sutil para `.metric` clásico: tipografía ejecutiva en label. */
.metric > span:first-child {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}
.metric strong {
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.module-card {
  min-height: 260px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
}

.module-card h3,
.work-panel h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.module-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.module-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  color: var(--ink);
  font-size: 13px;
}

.module-card li {
  padding-left: 12px;
  border-left: 3px solid var(--green);
}

.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
}

.work-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  overflow: hidden;
}

.payment-alerts {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.payment-alerts.payment-alerts-empty {
  border-left-color: var(--green);
}

.payment-alerts-head {
  margin-bottom: 12px;
}

.payment-alerts-head h3 {
  margin: 4px 0 2px;
  font-size: 16px;
}

.payment-alerts-head .muted {
  font-size: 12px;
  color: var(--text-muted);
}

.payment-alerts-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.payment-alert-group {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.payment-alert-group header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.payment-alert-group header strong {
  font-size: 13px;
}

.payment-alert-group header span {
  font-size: 12px;
  color: var(--text-muted);
}

.payment-alert-group.is-overdue {
  border-left: 4px solid var(--red);
}

.payment-alert-group.is-due-soon {
  border-left: 4px solid #d97706;
}

.payment-alert-group.is-upcoming {
  border-left: 4px solid var(--blue);
}

.payment-alert-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.payment-alert-group li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.35;
}

.payment-alert-group li .text-order {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}

.payment-alert-group li .text-order:hover {
  text-decoration: underline;
}

.payment-alert-group .pa-line {
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.payment-terms-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
}

.payment-terms-text {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  white-space: normal;
}

.payment-terms-badge {
  display: inline-flex;
}

.panel-heading {
  margin-bottom: 14px;
}

.alert-list {
  display: grid;
  gap: 10px;
}

.alert-item {
  display: grid;
  gap: 4px;
  border-left: 4px solid var(--blue);
  background: #f7f9fb;
  border-radius: var(--radius);
  padding: 12px;
}

.alert-item strong {
  font-size: 13px;
}

.alert-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.alert-item.urgent {
  border-left-color: var(--green);
}

.alert-item.warning {
  border-left-color: var(--amber);
}

.alert-item.danger {
  border-left-color: var(--red);
}

.alert-item.calm {
  border-left-color: var(--teal);
}

.mini-table,
.module-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.mini-table td,
.module-table td,
.module-table th {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.mini-table td:first-child,
.module-table td:first-child {
  font-weight: 850;
}

.module-table th {
  color: var(--muted);
  background: var(--panel-2);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}

.module-heading-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tender-table {
  min-width: 980px;
}

.tender-result {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-weight: 900;
  white-space: nowrap;
}

.module-row-actions {
  min-width: 260px;
}

.module-row-actions .secondary-btn,
.module-row-actions .danger-btn {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 12px;
}

.excel-workbook {
  display: grid;
  gap: 14px;
}

.excel-summary-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(120px, 0.55fr));
  gap: 10px;
}

.excel-summary-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: #f7f9fb;
}

.excel-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.excel-summary-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.excel-controls {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.5fr) minmax(130px, 0.45fr);
  gap: 10px;
  align-items: end;
}

.excel-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.excel-controls select,
.excel-controls input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
}

.excel-sheet-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
}

.excel-sheet-stats strong {
  color: var(--ink);
}

.excel-table-wrap {
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.excel-table {
  min-width: 1100px;
}

.work-panel .excel-table {
  min-width: 1100px;
}

.excel-table th,
.excel-table td {
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-control {
  display: grid;
  gap: 14px;
}

.inventory-import-panel {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f9fb;
  padding: 14px;
}

.inventory-import-panel strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
}

.inventory-import-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.inventory-source-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.inventory-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.inventory-upload-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.inventory-upload-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.inventory-import-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.inventory-signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.inventory-signal-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f9fb;
  padding: 12px;
}

.inventory-signal-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inventory-signal-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 20px;
}

.inventory-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 0.75rem 0;
}

.inventory-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inventory-controls input,
.inventory-controls select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
}

.inventory-table-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
}

.inventory-table-stats strong {
  color: var(--ink);
}

.inventory-table-wrap {
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.work-panel .inventory-table {
  min-width: 1620px;
}

.inventory-table td {
  white-space: nowrap;
}

.inventory-product-name {
  display: grid;
  gap: 3px;
  max-width: 360px;
  white-space: normal;
  line-height: 1.25;
}

.inventory-product-name span {
  color: var(--muted);
  font-size: 12px;
}

.inventory-decision {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.inventory-decision.buy-now {
  color: var(--red);
  background: var(--red-2);
}

.inventory-decision.transit {
  color: var(--blue);
  background: var(--blue-2);
}

.inventory-decision.review {
  color: var(--amber);
  background: var(--amber-2);
}

.inventory-decision.excess {
  color: #475461;
  background: #e8edf2;
}

.inventory-decision.strategy {
  color: #4d4386;
  background: #eeeaff;
}

.inventory-decision.ok {
  color: var(--green);
  background: var(--green-2);
}

.toolbar select {
  max-width: 230px;
}

.table-shell {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  min-height: 420px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1160px;
}

.work-panel table {
  min-width: 0;
}

th,
td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

tbody tr {
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

tbody tr:hover {
  background: var(--accent-2);
}

tbody tr.is-late {
  background: var(--red-2);
}

tbody tr.is-due {
  background: var(--amber-2);
}

.order-link {
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
}

.description-cell {
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-height: 28px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.pill.pending {
  color: var(--green);
  background: var(--green-2);
}

.pill.approved {
  color: var(--blue);
  background: var(--blue-2);
}

.pill.active {
  color: #355a00;
  background: #edf8d8;
}

.pill.closed {
  color: #475461;
  background: #e8edf2;
}

.pill.draft {
  color: #4d4386;
  background: #eeeaff;
}

.pill.rejected,
.pill.delayed {
  color: var(--red);
  background: var(--red-2);
}

.pill.payment {
  color: var(--amber);
  background: var(--amber-2);
}

.pill.alert {
  color: #fff;
  background: var(--red);
}

.pill.warning {
  color: #7a4400;
  background: #ffe6c2;
}

.pill.calm {
  color: var(--blue);
  background: var(--blue-2);
}

.pill.ok {
  color: var(--green);
  background: var(--green-2);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 170px;
}

.text-order {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 900;
  text-align: left;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.empty-state {
  position: absolute;
  inset: 70px 24px 24px;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.empty-state[hidden] {
  display: none !important;
}

.empty-state h3 {
  color: var(--ink);
  margin-bottom: 8px;
}

.order-dialog,
.action-dialog {
  border: 0;
  border-radius: 10px;
  padding: 0;
  width: min(920px, calc(100vw - 32px));
  box-shadow: var(--shadow);
}

.action-dialog {
  width: min(520px, calc(100vw - 32px));
}

.order-dialog::backdrop,
.action-dialog::backdrop {
  background: rgba(23, 33, 43, 0.48);
}

.dialog-card {
  background: #ffffff;
  padding: 0;
}

.dialog-header,
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.drawer-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #ffffff;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 22px 24px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.supplier-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 2px;
}

.supplier-shortcuts span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.supplier-shortcuts button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f9fb;
  color: var(--ink);
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.supplier-shortcuts button:hover {
  background: var(--blue-2);
  border-color: #b9c9e8;
  color: var(--blue);
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.form-grid textarea {
  resize: vertical;
  min-height: 94px;
}

.file-label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px 24px;
  border-top: 1px solid var(--line);
}

.action-body {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
}

.action-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.action-body label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.action-body input,
.action-body textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  background: #ffffff;
  outline: 0;
}

.action-body textarea {
  resize: vertical;
}

.drawer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(23, 33, 43, 0);
  transition: background 0.2s ease;
  z-index: 10;
}

.drawer.open {
  pointer-events: auto;
  background: rgba(23, 33, 43, 0.38);
}

.drawer-panel {
  margin-left: auto;
  width: min(860px, 100vw);
  height: 100vh;
  background: #ffffff;
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow: auto;
}

.drawer.open .drawer-panel {
  transform: translateX(0);
}

.drawer-body {
  padding: 20px 24px 28px;
  display: grid;
  gap: 18px;
}

.purchase-detail-hero {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f9fb;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.purchase-detail-heading {
  display: grid;
  gap: 7px;
}

.purchase-detail-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.purchase-detail-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.purchase-key-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.key-fact {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 76px;
  display: grid;
  align-content: space-between;
  gap: 8px;
}

.key-fact span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.key-fact strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.hero-actions {
  padding-top: 2px;
}

.detail-warning {
  display: flex;
  gap: 8px;
  align-items: baseline;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  background: #fff9eb;
  padding: 12px;
  color: var(--ink);
  font-size: 13px;
}

.detail-warning span {
  color: var(--muted);
}

.drawer-section {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.drawer-section-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px;
  display: grid;
  gap: 5px;
  background: #ffffff;
}

.detail-card.full {
  grid-column: 1 / -1;
}

.detail-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.detail-card strong,
.detail-card p {
  margin: 0;
}

.detail-card p {
  line-height: 1.45;
  white-space: pre-line;
}

/* Celda de nombre de entidad (suplidor / cliente): nombre grande + código pequeño */
.entity-name-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.2;
  min-width: 0;
}
.entity-name-cell.is-inline {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.entity-name-cell .entity-name,
.entity-name {
  font-weight: 700;
  color: inherit;
  font-size: inherit;
}
.entity-name-cell .entity-code {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.entity-name-cell.is-inline .entity-code {
  font-size: 0.85em;
}
/* Ajustes de contraste cuando el nombre está sobre fondo de color */
.portal-hero-card .entity-code,
.portal-today-tile .entity-code,
.pulse-panel .entity-code,
.inventory-supplier-card .entity-code,
.portal-top5-row .entity-code {
  color: rgba(255, 255, 255, 0.7);
}

.drawer-actions,
.status-editor {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.status-editor {
  align-items: end;
}

.status-editor label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.status-editor select,
.status-editor input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
  text-transform: none;
}

.attachment-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-2);
}

.attachment-preview img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #ffffff;
}

.attachment-preview div {
  padding: 14px;
}

.timeline {
  display: grid;
  gap: 9px;
}

.timeline-item {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
  margin-top: 5px;
  flex: 0 0 auto;
}

/* ── Botón hamburguesa (oculto por defecto, visible en móvil/iPad) ────── */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.hamburger-btn:hover,
.hamburger-btn:focus-visible {
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  border-color: var(--brand-blue, #1e3a8a);
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink, #0f172a);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.app-shell.sidebar-open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.app-shell.sidebar-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.app-shell.sidebar-open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Overlay oscuro detrás del sidebar abierto en móvil/iPad */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.app-shell.sidebar-open .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ── Tablet e iPad portrait: sidebar como drawer off-canvas ───────────── */
@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .topbar {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px;
  }

  .topbar-heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-heading h2 {
    font-size: 22px;
  }

  .topbar-right {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .topbar-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .search-wrap input {
    width: 100%;
  }

  /* Sidebar fijo, oculto fuera de pantalla por defecto */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(85vw, 320px);
    z-index: 100;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Cuando el sidebar está abierto en móvil, evita scroll del body */
  body.sidebar-locked {
    overflow: hidden;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }

  .nav-item {
    min-height: 44px;
  }

  .sidebar-card {
    margin-top: 0;
  }

  .metrics,
  .crm-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-key-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-import-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-import-actions {
    justify-content: flex-start;
  }

  .module-grid,
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .excel-summary-grid,
  .excel-controls,
  .inventory-signal-grid,
  .inventory-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .main {
    padding: 14px;
  }

  .topbar-heading h2 {
    font-size: 19px;
    line-height: 1.2;
  }

  .topbar-heading .eyebrow {
    font-size: 11px;
  }

  .topbar-actions .primary-btn,
  .topbar-actions .secondary-btn {
    min-height: 44px;
    font-size: 14px;
  }

  .metrics,
  .crm-metrics,
  .purchase-key-grid,
  .module-grid,
  .work-grid,
  .excel-summary-grid,
  .excel-controls,
  .inventory-signal-grid,
  .inventory-controls,
  .form-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar select {
    max-width: none;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERHAUL — v89 (28 jun 2026)
   Fixes para los problemas reportados: superposición, grids huérfanos,
   tabs que se ven mal cuando wrappean, menú hamburguesa poco visible,
   y heros con botones + texto inline. Aplica a TODOS los breakpoints
   por debajo de 980px (mobile + iPad portrait).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  /* 1) Hamburguesa: más prominente y reconocible como elemento interactivo */
  .hamburger-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(15, 23, 42, 0.22);
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
    border-radius: 12px;
  }
  .hamburger-btn:hover,
  .hamburger-btn:focus-visible {
    background: #fff;
    border-color: var(--accent-red, #c91f37);
    box-shadow: 0 0 0 3px rgba(201, 31, 55, 0.12);
  }
  .hamburger-line {
    width: 24px;
    height: 2.5px;
    background: var(--accent-red, #c91f37);
    border-radius: 2px;
  }

  /* 2) Topbar: espacio cómodo + alineación centrada vertical */
  .topbar {
    padding: 10px 0 6px;
    gap: 14px;
    align-items: center !important;
  }
  .topbar .theme-toggle { display: none; }

  /* 3) Métricas con N tiles → auto-fit para que nunca dejen huérfano.
     Min 128px permite encajar 5 tiles en iPad portrait (~820px content area). */
  .clientes-metrics-compact,
  .crm-metrics,
  .metrics,
  .purchase-key-grid,
  .module-grid,
  .work-grid,
  .excel-summary-grid,
  .inventory-signal-grid,
  .inventory-controls,
  .compras-snapshot-grid,
  .dormidos-resumen {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
    gap: 10px;
  }

  /* 4) Hero cards con botones + texto: stack vertical limpio */
  .hero-actions,
  .panel-hero,
  .work-panel-head,
  .panel-header-row,
  .va05-hero,
  .module-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero-actions .primary-btn,
  .hero-actions .secondary-btn,
  .panel-hero .primary-btn,
  .panel-hero .secondary-btn {
    width: 100%;
    justify-content: center;
  }

  /* 5) Tabs y sub-tabs: scroll horizontal con momentum en iOS, sin wrap feo */
  .clientes-tabs,
  .clientes-subtabs,
  .creditos-tabs,
  .dormidos-temp-tabs,
  .purchase-tabs,
  .module-tabs,
  .tab-strip,
  .work-panel-tabs,
  .sap-mini-tabs,
  .crm-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(15,23,42,0.18) transparent;
    padding-bottom: 4px;
    margin-bottom: 12px;
  }
  .clientes-tabs::-webkit-scrollbar,
  .clientes-subtabs::-webkit-scrollbar,
  .creditos-tabs::-webkit-scrollbar,
  .dormidos-temp-tabs::-webkit-scrollbar,
  .purchase-tabs::-webkit-scrollbar,
  .module-tabs::-webkit-scrollbar,
  .tab-strip::-webkit-scrollbar,
  .crm-tabs::-webkit-scrollbar {
    height: 4px;
  }
  .clientes-tabs > *,
  .clientes-subtabs > *,
  .creditos-tabs > *,
  .dormidos-temp-tabs > *,
  .purchase-tabs > *,
  .module-tabs > *,
  .tab-strip > *,
  .crm-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 6) Espaciado consistente entre paneles para evitar amontonamiento */
  .module-content > * + * { margin-top: 16px !important; }
  .work-panel { padding: 16px; }

  /* 7) Drawer ancho cómodo en tablet portrait */
  .sidebar {
    width: min(86vw, 340px);
  }

  /* 8) Cards de listado (portal/dormidos/etc) → auto-fill responsive */
  .portal-grid,
  .dormidos-cards,
  .dormidos-card-grid,
  .clients-card-grid,
  .ficha-card-grid,
  .city-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }

  /* 9) Tablas: scroll horizontal claro */
  .table-shell {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 10) Drawers / dialog en pantalla completa o casi en mobile */
  .drawer-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Phone (≤ 640px): ajustes finos para celular ──────────────────────── */
@media (max-width: 640px) {
  /* Stats inline tipo "VENTAS YTD ... NO COMPRAN +30D ..." → 1 columna */
  .crm-metrics.clientes-metrics,
  .stats-inline-grid {
    grid-template-columns: 1fr !important;
  }
  /* Métricas en celular: máximo 2 columnas */
  .clientes-metrics-compact,
  .crm-metrics,
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Cards 1 columna en celular */
  .portal-grid,
  .dormidos-cards,
  .dormidos-card-grid,
  .clients-card-grid {
    grid-template-columns: 1fr !important;
  }
  /* Listas con presencia: ocultar metadatos largos en celular */
  .presence-list .presence-meta { display: none; }
  /* Pills de presencia más compactos */
  .presence-pill { font-size: 11px; padding: 2px 8px; }
}

/* ── Phone muy estrecho (≤ 380px, iPhone SE/Mini) ─────────────────────── */
@media (max-width: 380px) {
  .main { padding: 12px; }
  .topbar-heading h2 { font-size: 17px; }
  .topbar-heading .eyebrow { font-size: 10px; }
  .clientes-metrics-compact .crm-metric strong { font-size: 16px; }
  .work-panel { padding: 12px; border-radius: 12px; }
}

@media print {
  body {
    background: #ffffff;
  }

  .sidebar,
  .topbar-actions,
  .toolbar,
  .drawer,
  .dialog-card {
    display: none !important;
  }

  .app-shell {
    display: block;
  }

  .main {
    padding: 0;
  }

  .metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  .table-shell {
    border: 0;
    overflow: visible;
  }

  table {
    min-width: 0;
    font-size: 10px;
  }

  th,
  td {
    padding: 6px;
  }
}

.sync-banner {
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.sync-banner.sync-ok {
  background: var(--green-2);
  border-color: #b9e6d1;
  color: var(--green);
}

.sync-banner.sync-error {
  background: var(--red-2);
  border-color: #f5c2be;
  color: var(--red);
}

.sync-banner.sync-pending {
  background: var(--amber-2);
  border-color: #f0d7a2;
  color: var(--amber);
}

.sync-piece {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.sync-divider {
  margin: 0 10px;
  color: rgba(0,0,0,0.25);
  font-weight: 400;
}

.presence-mount {
  position: relative;
  flex-shrink: 0;
}

.presence-pill {
  position: relative;
  width: auto;
  min-width: 148px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  z-index: 120;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  color: var(--ink);
  user-select: none;
}
.presence-pill:hover,
.presence-pill.expanded {
  border-color: rgba(27, 113, 136, 0.45);
  box-shadow: var(--shadow-md);
}
.presence-pill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.presence-pill.expanded {
  border-radius: 14px;
  background: #fff;
}
.presence-pill-body {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(92vw, 300px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px 12px 10px;
  max-height: min(60vh, 360px);
  overflow-y: auto;
  z-index: 130;
}
.presence-pill.expanded .presence-pill-body {
  display: block;
}
.presence-count { color: var(--ink); flex: 1; white-space: nowrap; }
.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.presence-chevron {
  font-size: 11px;
  color: #6b7280;
  transition: transform 0.2s;
}
.presence-pill.expanded .presence-chevron { transform: rotate(180deg); }
.presence-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.presence-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-weight: 500;
  border-bottom: 1px dashed #f3f4f6;
  border-radius: 8px;
  transition: background 0.12s ease;
}
.presence-list li.presence-on:hover {
  background: rgba(22, 163, 74, 0.07);
}
.presence-list li.presence-off:hover {
  background: rgba(148, 163, 184, 0.08);
}
.presence-list li:last-child { border-bottom: none; }
.presence-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.presence-status-dot.on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.presence-status-dot.off { background: #d1d5db; }
.presence-list li.presence-on .presence-name { color: #111827; }
.presence-list li.presence-off .presence-name { color: #6b7280; }
.presence-list li.presence-off .presence-meta { color: #9ca3af; }
.presence-name { color: #111827; font-size: 13px; flex: 1; }
.presence-meta { color: #6b7280; font-size: 11px; font-weight: 500; white-space: nowrap; }
.presence-empty { color: #9ca3af; font-style: italic; font-size: 12px; }

/* ── Mapa de clientes (modal) ── */
.clientes-mapa-dialog::backdrop {
  background: rgba(37, 35, 35, 0.55);
  backdrop-filter: blur(2px);
}
.clientes-mapa-dialog {
  width: min(1080px, 96vw);
  max-width: 96vw;
  border: none;
  border-radius: 14px;
  padding: 0;
  background: transparent;
}
.clientes-mapa-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(37, 35, 35, 0.28);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.clientes-mapa-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  flex-shrink: 0;
}
.clientes-mapa-header h3 {
  margin: 4px 0 2px;
  font-size: 20px;
  color: var(--ink);
}
.clientes-mapa-header .eyebrow {
  color: var(--brand-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.clientes-mapa-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.clientes-mapa-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mapa-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 20px 0;
  flex-shrink: 0;
}
.mapa-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.mapa-filters label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mapa-filters select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
}
.mapa-top-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 20px 0;
  scrollbar-width: thin;
  flex-shrink: 0;
}
.mapa-top-chips::-webkit-scrollbar { height: 6px; }
.mapa-top-chips::-webkit-scrollbar-thumb { background: var(--brand-gray); border-radius: 999px; }
.mapa-chip {
  background: var(--brand-gray);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  font-family: inherit;
}
.mapa-chip:hover {
  background: #fde6e9;
  border-color: var(--brand-red);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(228, 5, 32, 0.15);
}
.mapa-chip strong {
  color: var(--brand-red);
  margin-right: 6px;
}

.client-row-clickable { cursor: pointer; transition: background 0.12s ease; }
.client-row-clickable:hover { background: #fafafa; }

.ficha-temp.temp-up { color: #047857; }
.ficha-temp.temp-flat { color: #a85d00; }
.ficha-temp.temp-warning { color: #ca8a04; }
.ficha-temp.temp-down { color: var(--brand-red); }
.ficha-temp.temp-muted { color: var(--muted); }

/* ── Modal de clientes por ciudad ── */
.city-clients-dialog::backdrop {
  background: rgba(37, 35, 35, 0.55);
  backdrop-filter: blur(2px);
}
.city-clients-dialog {
  width: 95vw;
  max-width: 1180px;
  border: none;
  border-radius: 14px;
  padding: 0;
  background: transparent;
}
.city-clients-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(37, 35, 35, 0.28);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
.city-clients-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--brand-gray);
  background: #ffffff;
}
.city-clients-header h3 {
  margin: 4px 0 2px;
  font-size: 22px;
  color: var(--ink);
}
.city-clients-header .eyebrow {
  color: var(--brand-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.city-clients-header .cell-sub {
  font-size: 13px;
  color: var(--muted);
}
.city-clients-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.city-clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  table-layout: auto;
}
.city-clients-table thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  border-bottom: 1px solid var(--brand-gray);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  z-index: 2;
  white-space: nowrap;
}
.city-clients-table thead th.num {
  text-align: right;
}
.city-clients-table tbody tr {
  border-bottom: 1px solid #f0f1f3;
  cursor: pointer;
  transition: background 0.12s ease;
}
.city-clients-table tbody tr:hover {
  background: #fafafa;
}
.city-clients-table td {
  padding: 12px 14px;
  vertical-align: top;
  color: var(--ink);
  line-height: 1.4;
}
.city-clients-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.city-clients-table .col-name { min-width: 240px; }
.city-clients-table .col-vendedor { white-space: nowrap; }
.city-clients-table .col-zone { white-space: nowrap; }
.city-clients-table .col-ytd { min-width: 120px; }
.city-clients-table .col-debt { min-width: 110px; }
.city-clients-table .col-last { min-width: 130px; }
.city-clients-table .col-actions { text-align: right; white-space: nowrap; padding-right: 22px; }
.city-clients-table .col-actions .text-order {
  color: var(--brand-red);
  font-weight: 700;
  font-size: 13px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.city-clients-table .col-actions .text-order:hover {
  background: #fde6e9;
}

@media (max-width: 900px) {
  .city-clients-dialog { width: 96vw; max-width: 96vw; }
  .city-clients-table .col-zone,
  .city-clients-table .col-last { display: none; }
  .city-clients-header { padding: 14px 16px; }
  .city-clients-header h3 { font-size: 18px; }
  .city-clients-table td,
  .city-clients-table thead th { padding: 10px; font-size: 12.5px; }
}

/* ── Modal de ficha de cliente ── */
.client-ficha-dialog::backdrop {
  background: rgba(37, 35, 35, 0.55);
  backdrop-filter: blur(2px);
}
.client-ficha-dialog {
  width: 95vw;
  max-width: 920px;
  border: none;
  border-radius: 14px;
  padding: 0;
  background: transparent;
}
.client-ficha-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(37, 35, 35, 0.28);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.client-ficha-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--brand-gray);
  flex-wrap: wrap;
}
.client-ficha-header .eyebrow {
  color: var(--brand-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.client-ficha-header h3 {
  margin: 4px 0 4px;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.25;
}
.client-ficha-header .cell-sub {
  font-size: 13px;
  color: var(--muted);
}
.client-ficha-header .secondary-btn {
  text-decoration: none;
}
.client-ficha-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: grid;
  gap: 18px;
}
.client-ficha-body .ficha-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.client-ficha-body .ficha-stat {
  background: #fafafa;
  border: 1px solid #f0f1f3;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.client-ficha-body .ficha-stat .eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.client-ficha-body .ficha-stat strong {
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.client-ficha-body .ficha-stat.is-urgent {
  background: #fdeef0;
  border-color: #f6cdd3;
}
.client-ficha-body .ficha-stat.is-urgent strong {
  color: var(--brand-red);
}
.ficha-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  padding-top: 4px;
  border-top: 1px solid #f0f1f3;
  padding: 14px 0 0;
}
.ficha-info-grid .ficha-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: none;
}
.ficha-info-grid .ficha-row.ficha-row-wide {
  grid-column: 1 / -1;
}
.ficha-info-grid .ficha-row .eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ficha-info-grid .ficha-row strong {
  font-size: 14px;
  color: var(--ink);
}
.client-ficha-dialog .dialog-actions {
  padding: 14px 22px;
  border-top: 1px solid var(--brand-gray);
  background: #ffffff;
}

@media (max-width: 720px) {
  .client-ficha-body .ficha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-info-grid { grid-template-columns: 1fr; }
}
#clientesMapa {
  margin: 12px 20px 0;
  height: min(52vh, 480px);
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f1f3;
  flex-shrink: 0;
}
.clientes-mapa-hint {
  margin: 10px 20px 16px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
#clientesMapa .leaflet-container {
  font-family: inherit;
  border-radius: 12px;
}

@media (max-width: 720px) {
  .clientes-mapa-dialog { width: 98vw; max-width: 98vw; }
  .clientes-mapa-header { padding: 14px 16px 12px; }
  .clientes-mapa-header h3 { font-size: 17px; }
  .mapa-filters { margin: 12px 14px 0; grid-template-columns: 1fr; }
  .mapa-top-chips { padding: 10px 14px 0; }
  #clientesMapa {
    margin: 10px 14px 0;
    height: min(45vh, 360px);
    min-height: 240px;
  }
  .clientes-mapa-hint { margin: 8px 14px 14px; }
}

/* Ficha de cliente */
.ficha-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ficha-stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ficha-stat.is-urgent {
  background: #fde6e9;
  border-color: var(--brand-red);
}
.ficha-stat strong {
  font-size: 18px;
  color: var(--ink);
}
.ficha-stat .eyebrow {
  margin: 0;
  font-size: 10px;
  color: var(--muted);
}
.ficha-stat .cell-sub {
  font-size: 12px;
  color: var(--muted);
}
.ficha-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.ficha-row:last-child { border-bottom: none; }
.ficha-row .eyebrow {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}
.ficha-row strong {
  font-size: 14px;
  color: var(--ink);
}

/* ── Dormidos ── */
.dormidos-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.dormidos-resumen-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dormidos-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}
.dormidos-stat-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.dormidos-stat-label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: #9ca3af; }
.dormidos-stat-tibio { border-left: 4px solid #facc15; }
.dormidos-stat-frio { border-left: 4px solid #f97316; }
.dormidos-stat-frio-severo { border-left: 4px solid #dc2626; }
.dormidos-stat-perdido { border-left: 4px solid #6b7280; }
.dormidos-stat-total { border-left: 4px solid #2563eb; }
.dormidos-stat-total .dormidos-stat-num { font-size: 15px; }

.dormidos-priority {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dormidos-priority-tibio { background: #fef3c7; color: #92400e; }
.dormidos-priority-frio { background: #fed7aa; color: #9a3412; }
.dormidos-priority-frio-severo { background: #fee2e2; color: #991b1b; }
.dormidos-priority-perdido { background: #e5e7eb; color: #374151; }

.cobranza-status-llamado { background: #dbeafe; color: #1e40af; }
.cobranza-status-visitado { background: #ddd6fe; color: #5b21b6; }
.cobranza-status-recuperado { background: #d1fae5; color: #065f46; }
.cobranza-status-nointeresa { background: #f3f4f6; color: #4b5563; }

.dormidos-temp-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  padding: 0;
}
.dormidos-temp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dormidos-temp-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
}
.dormidos-temp-btn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.dormidos-temp-count {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  font-size: 11px;
  font-weight: 700;
}
.dormidos-temp-btn:not(.is-active) .dormidos-temp-count {
  background: #f3f4f6;
  color: #6b7280;
}

.dormidos-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.dormidos-more-btn {
  padding: 10px 22px;
  border: 1px solid #2563eb;
  background: #fff;
  color: #2563eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dormidos-more-btn:hover {
  background: #2563eb;
  color: #fff;
}
.dormidos-more-collapse {
  border-color: #9ca3af;
  color: #6b7280;
}
.dormidos-more-collapse:hover {
  background: #6b7280;
}

/* ── Vista por suplidor ── */
.inventory-view-toggle {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.inventory-view-btn {
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
}
.inventory-view-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
}
.inventory-view-btn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Vista Por suplidor — cards con color sólido según tone */
.inventory-supplier-summary {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
}
.inventory-supplier-summary strong { color: #ffffff; font-weight: 700; }
.inventory-supplier-summary .muted { color: rgba(255, 255, 255, 0.65); }
.inv-sup-summary-crit strong { color: #fecaca; }

.inventory-supplier-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inventory-supplier-card {
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: linear-gradient(135deg, #1B7188 0%, #12546A 100%);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.inventory-supplier-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.24);
}
.inventory-supplier-card.tone-critical {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.inventory-supplier-card.tone-warn {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
}
.inventory-supplier-card.tone-calm {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.inventory-supplier-card.is-unassigned {
  background: linear-gradient(135deg, #b45309 0%, #78350f 100%);
  border-color: rgba(251, 191, 36, 0.35);
}
.inventory-supplier-card.is-expanded {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
}
.inventory-supplier-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #ffffff;
}
.inventory-supplier-head:hover { background: rgba(255, 255, 255, 0.06); }
.inventory-supplier-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.inventory-supplier-title strong {
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.inventory-supplier-chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  letter-spacing: 0.02em;
}
.inventory-supplier-chip.tone-critical {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fecaca;
}
.inventory-supplier-chevron {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}
.inventory-supplier-stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.inv-sup-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.inv-sup-stat strong {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.inv-sup-stat small {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inv-sup-stat-stock strong { color: #a7f3d0; }
.inv-sup-stat-zero strong { color: #fca5a5; }
.inv-sup-stat-block strong { color: #fed7aa; }
.inv-sup-stat-pedir strong { color: #fecaca; }
.inv-sup-stat-transit strong { color: #bfdbfe; }

.inventory-supplier-products {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.inventory-supplier-products .module-table {
  font-size: 12px;
  background: transparent;
  color: #ffffff;
}
.inventory-supplier-products .module-table td,
.inventory-supplier-products .module-table th {
  color: #ffffff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
}
.inventory-supplier-products .module-table th {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
}
.inventory-supplier-products .module-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
}
.inventory-supplier-products .inventory-product-name span {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1100px) {
  .inventory-supplier-head { flex-direction: column; align-items: flex-start; }
  .inventory-supplier-stats { width: 100%; justify-content: space-between; gap: 8px; }
  .inv-sup-stat { min-width: 0; }
}

@media (prefers-color-scheme: dark) {
  .dormidos-temp-btn { background: #1f2937; color: #f3f4f6; }
  .dormidos-temp-btn:not(.is-active) .dormidos-temp-count { background: #374151; color: #d1d5db; }
  .dormidos-more-btn { background: #1f2937; }
}

@media (prefers-color-scheme: dark) {
  .dormidos-resumen-stat { background: #1f2937; }
  .dormidos-stat-num { color: #f3f4f6; }
  .dormidos-stat-label { color: #9ca3af; }
  .dormidos-stat-label small { color: #6b7280; }
}

@media (prefers-color-scheme: dark) {
  .presence-pill { background: #fafafa; border-color: #E6E7E8; color: #252323; }
  .presence-count, .presence-name { color: #252323; }
  .presence-chevron, .presence-meta { color: #6d6b6b; }
  .presence-pill.expanded .presence-pill-body { border-top-color: #E6E7E8; }
  .presence-list li { border-bottom-color: #E6E7E8; }
  .presence-list li.presence-on .presence-name { color: #252323; }
  .presence-list li.presence-off .presence-name { color: #6d6b6b; }
  .presence-list li.presence-off .presence-meta { color: #9a9696; }
}

/* ─── Calendarios (ST / Visita médica) ─── */
.calendar-panel {
  padding: 22px 24px 24px;
}
.calendar-panel .panel-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.cal-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}
.cal-summary-bar-wrap {
  margin: 0 0 14px;
}
.cal-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.cal-summary-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.cal-summary-pill strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cal-summary-pill span:last-child {
  color: var(--muted);
  font-weight: 500;
}
.cal-summary-pill.is-accent strong { color: #2563eb; }
.cal-summary-pill.is-good strong { color: #059669; }
.cal-summary-pill.is-warn strong { color: #c2410c; }
.cal-summary-pill.is-danger strong { color: #dc2626; }
.cal-summary-pill.is-muted strong { color: var(--muted); }
.cal-summary-sep {
  color: #cbd5e1;
  font-weight: 700;
  user-select: none;
}

.cal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 4px 0 20px;
}
.cal-stat {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 10px;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-left: 4px solid #cbd5e1;
}
.cal-stat strong {
  font-size: 24px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cal-stat small {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cal-nav-btn {
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}
.cal-nav-btn:hover { background: var(--panel-2); border-color: #cbd5e1; }
.cal-today-btn {
  font-weight: 700;
  color: #2563eb;
  border-color: #bfdbfe;
  background: #eff6ff;
}
.cal-today-btn:hover { background: #dbeafe; }
.cal-month-title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
  letter-spacing: -0.01em;
}
.cal-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.cal-view-btn {
  padding: 7px 12px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.cal-view-btn.is-active {
  background: #2563eb;
  color: #fff;
}
.cal-view-btn:not(.is-active):hover {
  background: var(--panel-2);
}
.cal-grid.is-week-view .cal-week-body .cal-cell.is-week {
  min-height: 240px;
  align-items: stretch;
}
.cal-grid.is-week-view .cal-week-body .cal-day-events {
  overflow-y: auto;
  max-height: 200px;
}
.cal-grid.is-week-view .cal-event-chip {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.25;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.cal-day-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cal-weekday {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.cal-day-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-cell.is-selected .cal-day-badge {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.cal-grid-wrap.is-week-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}
.cal-new-event-btn {
  padding: 8px 16px;
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
  color: #fff;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  letter-spacing: 0.01em;
}
.cal-new-event-btn:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #2563eb 100%);
  filter: brightness(1.04);
}
.cal-new-event-btn:active { filter: brightness(0.96); }

/* Lista compacta de próximos eventos en el panel lateral del calendario. */
.cal-upcoming-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-upcoming-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cal-upcoming-row:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.cal-upcoming-date {
  font-size: 11px;
  font-weight: 700;
  color: #1d4ed8;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}
.cal-upcoming-title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.cal-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .cal-grid-wrap { grid-template-columns: 1fr; }
}

.cal-grid {
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cal-day-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.cal-day-head > div {
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.cal-day-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
  min-height: 104px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 7px 6px 6px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: inherit;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.cal-cell:hover { background: #f8fafc; }
.cal-cell-empty { background: #f1f5f9; cursor: default; }
.cal-cell-empty:hover { background: #f1f5f9; }
.cal-cell.is-today {
  background: #f0f9ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35);
}
.cal-cell.is-today:hover { background: #e0f2fe; }
.cal-cell.is-selected {
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px #2563eb;
  z-index: 1;
  position: relative;
}
.cal-cell.is-selected.is-today {
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px #2563eb;
}

.cal-day-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.cal-cell.is-today .cal-day-num {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}
.cal-cell.is-selected .cal-day-num {
  color: #fff;
  background: #2563eb;
}
.cal-cell.is-selected .cal-weekday {
  color: #1d4ed8;
}
.cal-day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  flex: 1;
}
.cal-event-chip {
  --chip-color: #64748b;
  font-size: 11px;
  color: #fff;
  padding: 3px 7px 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  font-weight: 600;
  background: var(--chip-color);
  border: 1px solid color-mix(in srgb, var(--chip-color) 75%, #000 25%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
  position: relative;
}
.cal-event-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 5px 0 0 5px;
  background: rgba(255, 255, 255, 0.45);
}
.cal-event-chip strong {
  font-weight: 800;
  opacity: 0.95;
}
.cal-chip-assignee {
  font-weight: 800;
  opacity: 0.92;
}
.cal-chip-sep {
  opacity: 0.75;
  margin: 0 2px;
}
.cal-chip-title,
.cal-chip-brand {
  font-weight: 600;
}
.cal-event-chip-vencimiento,
.cal-event-chip.cal-event-chip-vencimiento {
  background: linear-gradient(135deg, #ea580c, #dc2626) !important;
  border-color: #c2410c;
}
.cal-event-chip-manual,
.cal-event-chip.cal-event-chip-manual {
  background: #64748b !important;
  border-color: #475569;
}
.cal-event-more {
  font-size: 11px;
  color: #2563eb;
  font-weight: 700;
  padding: 1px 4px;
  align-self: flex-start;
}
.cal-cell.is-selected .cal-event-more {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  border-radius: 4px;
}

/* Calendario de eventos — chips más legibles */
.calendar-panel[data-cal-kind="ev"] .cal-cell {
  min-height: 112px;
}
.calendar-panel[data-cal-kind="ev"] .cal-event-chip {
  font-size: 12px;
  padding: 4px 9px 4px 11px;
  line-height: 1.4;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.calendar-panel[data-cal-kind="ev"] .cal-chip-brand {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
}

/* Calendario visita médica — chips compactos pero legibles */
.calendar-panel[data-cal-kind="vm"] .cal-cell {
  min-height: 108px;
}
.calendar-panel[data-cal-kind="vm"] .cal-event-chip {
  font-size: 11px;
}

.cal-vm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 10px 16px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.cal-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cal-legend-swatch.is-vencimiento {
  background: linear-gradient(135deg, #ea580c, #dc2626);
}
.cal-auto-tag {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #ffedd5;
  color: #c2410c;
  vertical-align: middle;
}
.cal-sync-hint {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.cal-day-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.35);
}
.cal-day-panel-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 16px;
}
.cal-day-panel-empty .eyebrow { font-size: 11px; margin-bottom: 6px; }
.cal-day-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cal-day-panel-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cal-day-panel-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.cal-day-count {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  color: #4338ca;
}
.cal-add-day-btn {
  padding: 6px 12px;
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
  color: #fff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-add-day-btn:hover { filter: brightness(1.05); }
.cal-add-day-btn.is-ghost {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #2563eb;
  border-color: #bfdbfe;
  box-shadow: none;
}
.cal-add-day-btn.is-ghost:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.cal-event-form {
  background: var(--panel-2);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
}
.cal-event-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-event-form input,
.cal-event-form textarea {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--panel);
  color: var(--text);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.cal-event-form input:focus,
.cal-event-form textarea:focus { outline: 2px solid #2563eb; outline-offset: 0; border-color: transparent; }
.cal-notes-label textarea { resize: vertical; min-height: 40px; }
.cal-form-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.cal-btn-primary {
  flex: 1;
  padding: 7px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cal-btn-primary:hover { background: #1d4ed8; }
.cal-btn-secondary {
  padding: 7px 14px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cal-btn-secondary:hover { background: var(--panel-2); }

.cal-day-events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(62vh, 640px);
  overflow-y: auto;
  padding-right: 2px;
}
.cal-empty-day {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #fff;
  line-height: 1.5;
}
.cal-event-card {
  --cal-accent: #94a3b8;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cal-accent);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.28);
}
.cal-event-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.cal-event-card-main {
  min-width: 0;
  flex: 1;
}
.cal-event-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.cal-event-clinic {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.3;
}
.cal-event-time {
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.cal-event-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cal-icon-btn {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 13px;
  border-radius: 8px;
  line-height: 1;
}
.cal-icon-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.cal-icon-btn.cal-icon-danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
}
.cal-event-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-event-assignee-text {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.cal-event-notes {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}
.cal-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.cal-event-meta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

/* Lista de eventos abajo del calendario */
.cal-list-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cal-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cal-list-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.cal-list-filters {
  display: flex;
  gap: 4px;
  background: var(--panel-2);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.cal-list-filter {
  padding: 5px 12px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.cal-list-filter:hover { color: var(--text); }
.cal-list-filter.is-active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cal-list-empty {
  text-align: center;
  padding: 30px 16px;
  color: var(--muted);
  font-style: italic;
}
.cal-list-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cal-list-group {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.cal-list-group:last-child { border-bottom: none; }
.cal-list-group.is-past { opacity: 0.65; }
.cal-list-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
  background: var(--panel-2);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.cal-list-group.is-today .cal-list-date {
  background: #dbeafe;
  border-color: #2563eb;
}
.cal-list-day-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.cal-list-group.is-today .cal-list-day-num { color: #1d4ed8; }
.cal-list-date-info {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.cal-list-date-info strong {
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
  text-transform: capitalize;
}
.cal-list-date-info span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-list-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-list-event-wrap {
  position: relative;
}
.cal-list-event-wrap .cal-event-card {
  margin: 0;
}
.cal-list-event-wrap .cal-list-event-actions {
  position: absolute;
  top: 10px;
  right: 52px;
  display: flex;
  gap: 4px;
}

@media (max-width: 700px) {
  .cal-list-group { grid-template-columns: 70px minmax(0, 1fr); }
  .cal-list-day-num { font-size: 20px; }
  .cal-list-header { flex-direction: column; align-items: flex-start; }
}

.purchase-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.payment-calendar {
  display: grid;
  gap: 12px;
}

.payment-day {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel);
}

.payment-day header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.payment-day ul {
  margin: 0;
  padding-left: 18px;
}

.payment-day.is-muted {
  opacity: 0.85;
}

.team-plan-table .team-plan-input {
  width: 100%;
  min-width: 110px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  background: #fff;
}

.team-plan-table .team-plan-input:read-only {
  background: var(--panel-2);
}

/* ============================================================
   PORTAL (home launcher) — Bloomberg-style blue, light + dark
   ============================================================ */

.portal {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0 32px;
}

.portal-greeting {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.portal-greeting h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.portal-greeting .portal-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.portal-greeting .portal-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}

.portal-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portal-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.portal-section-head:hover h3 {
  color: var(--accent);
}

.portal-section-action {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.portal-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.portal-section-head .portal-divider {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.15s ease;
  min-height: 132px;
  font: inherit;
}

.portal-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.portal-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.portal-card[disabled],
.portal-card.is-soon {
  cursor: not-allowed;
  opacity: 0.62;
}

.portal-card[disabled]:hover,
.portal-card.is-soon:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.portal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-2);
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}

.portal-card.is-soon .portal-card-icon {
  background: var(--panel-2);
  color: var(--muted);
}

.portal-card-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
}

.portal-card-badge.is-urgent {
  background: var(--red-2);
  color: var(--red);
}

.portal-card-badge.is-accent {
  background: var(--accent-2);
  color: var(--accent);
}

.portal-card h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.portal-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.portal-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.portal-card-foot strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}

/* Sidebar account + presence (arriba, bajo logo) */
.sidebar-account-cluster {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sidebar-border, var(--line));
}

.sidebar-user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--sidebar-border, var(--line));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}

.sidebar-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.sidebar-user-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
  flex: 1;
}

.sidebar-user-text strong {
  font-size: 15px;
  color: var(--sidebar-ink, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-text span {
  font-size: 12.5px;
  color: var(--sidebar-muted, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-logout {
  border: none;
  background: transparent;
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.12s ease;
  flex-shrink: 0;
}

.sidebar-user-logout:hover {
  background: var(--blue-2);
}

.sidebar-account-cluster .presence-mount {
  width: 100%;
}

.sidebar-account-cluster .presence-pill {
  width: 100%;
  min-width: 0;
  font-size: 14px;
}

.sidebar-account-cluster .presence-pill-header {
  padding: 10px 14px;
}

.sidebar-account-cluster .presence-pill-body {
  left: 0;
  right: auto;
  width: 100%;
}

.sidebar-account-cluster .presence-name {
  font-size: 14px;
}

.sidebar-account-cluster .presence-meta {
  font-size: 12px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Topbar theme toggle */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.topbar {
  background: var(--topbar-bg);
}

/* Dark mode tweaks for existing surfaces */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

[data-theme="dark"] .login-panel,
[data-theme="dark"] .panel,
[data-theme="dark"] .work-panel,
[data-theme="dark"] .module-card,
[data-theme="dark"] .metric,
[data-theme="dark"] .table-shell,
[data-theme="dark"] .payment-day {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .access-form input,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line);
}

[data-theme="dark"] .team-plan-table .team-plan-input {
  background: var(--bg-elev);
  color: var(--ink);
}

[data-theme="dark"] table thead,
[data-theme="dark"] th {
  background: var(--panel-2);
  color: var(--muted);
}

[data-theme="dark"] tbody tr:hover {
  background: var(--accent-2);
}

[data-theme="dark"] .pill.pending {
  background: rgba(52, 211, 153, 0.12);
  color: var(--green);
}

[data-theme="dark"] .pill.approved {
  background: var(--accent-2);
  color: var(--accent);
}

[data-theme="dark"] .order-link {
  color: var(--ink);
}

[data-theme="dark"] .order-link:hover {
  color: var(--accent);
}

[data-theme="dark"] .sidebar-user-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-user-logout:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sidebar-card .secondary-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-ink);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-card .secondary-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Compras sub-tabs */
.subtabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.subtab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.subtab:hover {
  color: var(--ink);
  background: var(--panel-2);
}

.subtab.is-active {
  background: var(--accent);
  color: #fff;
}

.subtab.is-active .subtab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.subtab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  align-self: center;
}

/* ============================================================
   Ventas (módulo)
   ============================================================ */

.sales-yoy-chart {
  margin-bottom: 18px;
}

.sales-chart-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.sales-chart-mode-tabs,
.sales-chart-year-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sales-chart-mode-tab,
.sales-chart-year-tab {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sales-chart-mode-tab:hover,
.sales-chart-year-tab:hover {
  color: var(--ink);
  border-color: rgba(27, 113, 136, 0.35);
}

.sales-chart-mode-tab.is-active,
.sales-chart-year-tab.is-active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.sales-chart-year-tabs {
  padding-left: 2px;
}

.sales-chart-year-tab {
  min-width: 56px;
  text-align: center;
  padding-inline: 12px;
}

.sales-yoy-bars-single {
  justify-content: center;
}

.sales-yoy-bars-single .sales-yoy-bar-single {
  width: 62%;
}

.sales-yoy-bar-single {
  background: linear-gradient(180deg, var(--brand-blue), #135568);
}

.sales-yoy-month-value {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.sales-yoy-chart-grid-yearly {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  min-height: 260px;
  align-items: end;
}

.sales-yoy-year-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 0;
}

.sales-yoy-bars-year {
  width: 100%;
  height: 200px;
}

.sales-yoy-year-label {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.sales-yoy-year-meta {
  font-size: 11px;
  color: var(--muted);
}

.sales-yoy-year-pct {
  font-size: 12px;
  font-weight: 800;
}

.sales-yoy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sales-yoy-head-copy h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sales-yoy-totals {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sales-yoy-total {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.sales-yoy-total strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.sales-yoy-total small {
  color: var(--muted);
  font-size: 11px;
}

.sales-yoy-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sales-yoy-legend-2025::before,
.sales-yoy-legend-2026::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.sales-yoy-legend-2025::before {
  background: #94a3b8;
}

.sales-yoy-legend-2026::before {
  background: var(--brand-red);
}

.sales-yoy-chart-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 220px;
  padding: 8px 4px 0;
}

.sales-yoy-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sales-yoy-bars {
  width: 100%;
  height: 168px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.sales-yoy-bar {
  width: 42%;
  min-height: 0;
  border-radius: 6px 6px 0 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sales-yoy-bar:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.sales-yoy-bar-2025 {
  background: linear-gradient(180deg, #94a3b8, #64748b);
}

.sales-yoy-bar-2026 {
  background: linear-gradient(180deg, var(--brand-red), #b50318);
}

.sales-yoy-month-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.sales-yoy-month-clickable {
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sales-yoy-month-clickable:hover {
  background: rgba(37, 99, 235, 0.06);
}

.sales-yoy-month-clickable.is-drill-active {
  background: rgba(37, 99, 235, 0.12);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.sales-yoy-drill-hint {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}

.subtab.is-drill {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--ink);
}

.subtab-month-picker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.subtab-month-picker.is-active {
  border-color: var(--brand-blue);
  color: var(--ink);
}

.subtab-month-picker select {
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 5px 2px;
  cursor: pointer;
}

.sales-yoy-foot {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.sales-yoy-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -2px;
}

.sales-yoy-swatch-2025 {
  background: #64748b;
}

.sales-yoy-swatch-2026 {
  background: var(--brand-red);
}

@media (max-width: 980px) {
  .sales-yoy-chart-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 16px;
  }
}

@media (max-width: 640px) {
  .sales-yoy-chart-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sales-yoy-bars {
    height: 140px;
  }
}

.sales-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
}

.sales-hero-meta .eyebrow {
  margin: 0 0 4px;
}

.sales-hero-amount {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sales-hero-meta-sub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.sales-hero-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
  margin-bottom: 14px;
}

.sales-hero-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #4f8bff);
  border-radius: inherit;
}

.sales-hero-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.sales-hero-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sales-hero-row strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.sales-hero-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sales-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--panel-2);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}

.sales-kpi strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

.sales-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 13px;
}

.sales-trend.is-up {
  color: var(--green);
}

.sales-trend.is-down {
  color: var(--red);
}

.sales-trend.is-flat {
  color: var(--muted);
}

.sales-trend.is-muted {
  color: #94a3b8;
  font-weight: 700;
}

.sales-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.sales-panel {
  margin: 0;
}

.module-table.sales-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.module-table.sales-table th {
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 10px 12px;
}

.module-table.sales-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink);
  vertical-align: middle;
}

.module-table.sales-table .cell-sub {
  color: var(--muted);
  font-size: 11.5px;
}

.module-table.sales-table .cell-muted {
  color: var(--muted);
}

.sales-progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
}

.sales-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  min-width: 6px;
  max-width: 120px;
}

.sales-progress.is-on .sales-progress-bar {
  background: var(--green);
}

.sales-progress.is-warn .sales-progress-bar {
  background: var(--amber);
}

.sales-progress.is-off .sales-progress-bar {
  background: var(--red);
}

.sales-progress span {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.sales-share {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
}

.sales-share-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  min-width: 6px;
  max-width: 180px;
}

.sales-share span {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.sales-source {
  border-style: dashed;
}

.sales-source-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ============================================================
   Clientes (módulo)
   ============================================================ */

/* ── Hub de cartera (landing) ─────────────────────────────── */
.clientes-hub {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.clientes-hub-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.clientes-hub-hero-info { flex: 1; min-width: 0; }
.clientes-hub-hero h2 {
  margin: 4px 0 6px;
  font-size: 26px;
  line-height: 1.15;
  color: #0f172a;
}
.clientes-hub-hero .clientes-hub-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.clientes-hub-mapa {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(201, 31, 55, 0.15);
}

/* Búsqueda guiada en el hub */
.clientes-hub-search-wrap {
  position: relative;
}
.clientes-hub-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  pointer-events: none;
  opacity: 0.55;
}
.clientes-hub-search {
  width: 100%;
  padding: 14px 16px 14px 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.clientes-hub-search:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.clientes-hub-search::placeholder { color: #94a3b8; }

.clientes-hub-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.clientes-hub-suggestions.empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.clientes-hub-suggestion {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  font: inherit;
  transition: background 0.12s;
}
.clientes-hub-suggestion:hover,
.clientes-hub-suggestion:focus-visible {
  background: rgba(37, 99, 235, 0.06);
  outline: none;
}
.clientes-hub-suggestion .suggestion-cat {
  grid-column: 1; grid-row: 1 / span 2;
  align-self: center;
}
.clientes-hub-suggestion .suggestion-name {
  grid-column: 2; grid-row: 1;
  font-size: 14px;
}
.clientes-hub-suggestion .suggestion-meta {
  grid-column: 2; grid-row: 2;
  font-size: 12px;
  color: var(--muted);
}
.clientes-hub-suggestion .suggestion-ytd {
  grid-column: 3; grid-row: 1 / span 2;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-align: right;
  white-space: nowrap;
}

.clientes-hub-helper {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0;
}

/* Grid de tarjetas de categoría */
.clientes-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.clientes-hub-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 16px;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #0f172a;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.clientes-hub-card:hover,
.clientes-hub-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: rgba(37, 99, 235, 0.4);
  outline: none;
}
.clientes-hub-icon {
  grid-column: 1; grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #f1f5f9;
  font-size: 24px;
  align-self: start;
}
.clientes-hub-title {
  grid-column: 2; grid-row: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.clientes-hub-value {
  grid-column: 2; grid-row: 2;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;
}
.clientes-hub-sub {
  grid-column: 2 / span 2; grid-row: 3;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.clientes-hub-chevron {
  grid-column: 3; grid-row: 1 / span 2;
  font-size: 22px;
  color: #cbd5e1;
  align-self: center;
  transition: color 0.12s, transform 0.12s;
}
.clientes-hub-card:hover .clientes-hub-chevron {
  color: #2563eb;
  transform: translateX(2px);
}

/* Mini-gráfico dentro de cada tarjeta */
.clientes-hub-viz {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-mini-empty {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
}
.hub-mini-stacked {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
}
.hub-mini-seg {
  display: block;
  height: 100%;
  transition: filter 0.12s;
}
.hub-mini-seg:hover { filter: brightness(0.9); }
.hub-mini-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: #475569;
}
.hub-mini-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.hub-mini-legend-item strong {
  font-weight: 700;
  color: #0f172a;
}
.hub-mini-legend-label { color: var(--muted); }
.hub-mini-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hub-mini-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hub-mini-list-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.hub-mini-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}
.hub-mini-name {
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.hub-mini-bar {
  grid-column: 2;
  height: 5px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}
.hub-mini-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 3px;
}
.hub-mini-value {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-weight: 700;
  font-size: 11px;
  color: #0f172a;
  white-space: nowrap;
}

/* Variantes de color por categoría */
.clientes-hub-card.is-success .clientes-hub-icon { background: #dcfce7; }
.clientes-hub-card.is-success .clientes-hub-value { color: #065f46; }
.clientes-hub-card.is-success .hub-mini-bar > span { background: linear-gradient(90deg, #10b981, #6ee7b7); }
.clientes-hub-card.is-premium .clientes-hub-icon { background: #fef3c7; }
.clientes-hub-card.is-premium .clientes-hub-value { color: #92400e; }
.clientes-hub-card.is-premium .hub-mini-bar > span { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.clientes-hub-card.is-warning .clientes-hub-icon { background: #fef3c7; }
.clientes-hub-card.is-warning .clientes-hub-value { color: #b45309; }
.clientes-hub-card.is-urgent .clientes-hub-icon { background: #ede9fe; }
.clientes-hub-card.is-urgent .clientes-hub-value { color: #6d28d9; }
.clientes-hub-card.is-attention .clientes-hub-icon { background: #fee2e2; }
.clientes-hub-card.is-attention .clientes-hub-value { color: #b91c1c; }

/* ── Pulso ejecutivo (KPIs arriba) ───────────────────────── */
.clientes-hub-pulse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 4px 0 4px;
}
.hub-pulse-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-pulse-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hub-pulse-value {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.hub-pulse-bar {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}
.hub-pulse-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.hub-pulse-meta {
  font-size: 11px;
  color: var(--muted);
}

/* ── Resúmenes esquemáticos abajo ───────────────────────── */
.clientes-hub-summaries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.hub-summary-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hub-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.hub-summary-head h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}
.hub-summary-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.hub-summary-stacked {
  display: flex;
  width: 100%;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f5f9;
}
.hub-summary-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: filter 0.12s;
  min-width: 4px;
}
.hub-summary-seg:hover { filter: brightness(0.9); }
.hub-summary-seg > span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.hub-summary-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
}
.hub-summary-legend li {
  display: grid;
  grid-template-columns: 10px auto auto 1fr;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.hub-summary-lname {
  font-weight: 700;
  color: #0f172a;
  font-size: 12px;
}
.hub-summary-legend li strong {
  color: #0f172a;
  font-weight: 700;
}
.hub-summary-ldesc {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-summary-rank {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hub-summary-rank li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
}
.hub-summary-rk {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
  color: #475569;
  font-weight: 800;
  font-size: 11px;
}
.hub-summary-rank li:nth-child(1) .hub-summary-rk {
  background: linear-gradient(180deg, #fde047, #facc15);
  color: #78350f;
}
.hub-summary-rank li:nth-child(2) .hub-summary-rk {
  background: linear-gradient(180deg, #e5e7eb, #cbd5e1);
  color: #334155;
}
.hub-summary-rank li:nth-child(3) .hub-summary-rk {
  background: linear-gradient(180deg, #fed7aa, #fb923c);
  color: #7c2d12;
}
.hub-summary-rk-info {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hub-summary-rk-info strong {
  font-size: 13px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-summary-rk-sub {
  font-size: 11px;
  color: var(--muted);
}
.hub-summary-rk-bar {
  grid-column: 2;
  grid-row: 2;
  height: 6px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}
.hub-summary-rk-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 4px;
}
.hub-summary-rk-amount {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
}

/* ── Breadcrumb cuando el usuario entra a una categoría ───── */
.clientes-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
}
.clientes-breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #2563eb;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.clientes-breadcrumb-back:hover,
.clientes-breadcrumb-back:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.3);
  outline: none;
}
.clientes-breadcrumb-sep {
  color: #cbd5e1;
  font-weight: 500;
}
.clientes-breadcrumb-current {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.clientes-breadcrumb-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Paginación de compradores */
.compradores-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 4px 4px;
  flex-wrap: wrap;
}
.compradores-pagination-count {
  font-size: 13px;
  color: var(--muted);
}
.compradores-pagination-count strong {
  color: #0f172a;
  font-weight: 700;
}

/* Tablet: resúmenes esquemáticos en columna única */
@media (max-width: 980px) {
  .clientes-hub-summaries { grid-template-columns: 1fr; }
}

/* Mobile: hub más compacto y vertical */
@media (max-width: 640px) {
  .clientes-hub-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px;
  }
  .clientes-hub-hero h2 { font-size: 22px; }
  .clientes-hub-mapa { width: 100%; justify-content: center; }
  .clientes-hub-grid { grid-template-columns: 1fr; }
  .clientes-hub-card { padding: 14px 16px; }
  .clientes-hub-value { font-size: 20px; }
  .clientes-hub-pulse { grid-template-columns: 1fr; gap: 10px; }
  .hub-pulse-card { padding: 12px 14px; }
  .hub-pulse-value { font-size: 20px; }
  .clientes-hub-summaries { grid-template-columns: 1fr; gap: 12px; }
  .hub-summary-card { padding: 14px 16px; }
  .hub-summary-stacked { height: 28px; }
  .hub-summary-seg { font-size: 11px; }
  .hub-summary-legend { grid-template-columns: 1fr 1fr; }
  .hub-summary-rk-amount { font-size: 12px; }
  .hub-summary-rk-info strong { font-size: 12px; }
  .clientes-breadcrumb-actions {
    margin-left: 0;
    width: 100%;
  }
  .clientes-breadcrumb-actions .primary-btn,
  .clientes-breadcrumb-actions .secondary-btn {
    width: 100%;
  }
}

/* ── Visita médica hub ─────────────────────────────────────────────── */
.visita-hub {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.visita-hub-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.visita-hub-metrics {
  margin-bottom: 0;
}
.visita-hub-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #dbeafe;
  border-radius: 12px;
}
.visita-hub-bridge-copy p {
  margin: 0;
  font-size: 14px;
  color: #334155;
}
.visita-hub-bridge-copy .eyebrow {
  margin-bottom: 4px;
}
.visita-hub-grid .visita-hub-card {
  grid-template-rows: auto auto auto;
}
.visita-hub-grid .visita-hub-card .clientes-hub-chevron {
  grid-row: 1 / span 3;
}
.visita-hub-week-panel {
  margin-top: 0;
}
.visita-hub-week-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.visita-hub-week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.visita-hub-week-row:last-child {
  border-bottom: none;
}
.visita-hub-week-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.visita-hub-week-main strong {
  font-size: 14px;
  color: #0f172a;
}
.visita-hub-week-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.visita-hub-week-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.visita-hub-week-tag.is-acuerdo {
  background: #dcfce7;
  color: #065f46;
}
.visita-hub-week-tag.is-none {
  background: #fef3c7;
  color: #92400e;
}
.visita-hub-week-date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.visita-hub-week-empty {
  padding: 16px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
/* ── Hub unificado "Visita Médica" (Calendario / Doctores / Acuerdos) ─────── */
.visita-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.visita-shell-header {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(380px, 1.8fr);
  gap: 20px;
  padding: 22px 26px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0b1220 0%, #1e293b 55%, #334155 100%);
  color: #f8fafc;
  box-shadow:
    0 24px 48px -18px rgba(15, 23, 42, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.18);
  position: relative;
  overflow: hidden;
}
.visita-shell-header::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 55%;
  height: 180%;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.28), transparent 60%);
  pointer-events: none;
}
.visita-shell-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.visita-shell-hero .eyebrow {
  color: rgba(226, 232, 240, 0.82);
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
}
.visita-shell-hero h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
.visita-shell-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.5;
}
.visita-shell-kpis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.visita-shell-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow:
    0 8px 20px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.15s ease;
}
.visita-shell-kpi .eyebrow {
  color: rgba(226, 232, 240, 0.78);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.visita-shell-kpi strong {
  font-size: 24px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1;
  letter-spacing: -0.01em;
}
.visita-shell-kpi .cell-sub {
  font-size: 11px;
  color: rgba(203, 213, 225, 0.82);
  line-height: 1.35;
}
.visita-shell-kpi.is-info {
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.28), rgba(30, 64, 175, 0.22));
  border-color: rgba(96, 165, 250, 0.4);
}
.visita-shell-kpi.is-success {
  background: linear-gradient(140deg, rgba(16, 185, 129, 0.28), rgba(6, 95, 70, 0.22));
  border-color: rgba(52, 211, 153, 0.4);
}
.visita-shell-kpi.is-warning {
  background: linear-gradient(140deg, rgba(251, 146, 60, 0.3), rgba(180, 83, 9, 0.24));
  border-color: rgba(251, 191, 36, 0.42);
}
.visita-shell-kpi.is-urgent {
  background: linear-gradient(140deg, rgba(239, 68, 68, 0.34), rgba(153, 27, 27, 0.26));
  border-color: rgba(248, 113, 113, 0.45);
}
.visita-shell-kpi.is-calm {
  background: rgba(30, 41, 59, 0.55);
}

.visita-subtabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 0;
}
.visita-subtab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 2px 6px -3px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #0f172a;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.visita-subtab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.25);
  border-color: #cbd5e1;
}
.visita-subtab.is-active {
  border-color: #2563eb;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow:
    0 12px 28px -12px rgba(37, 99, 235, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.visita-subtab.is-active .cell-sub,
.visita-subtab.is-active .visita-subtab-main strong {
  color: #ffffff;
}
.visita-subtab.is-active .cell-sub {
  color: rgba(226, 232, 240, 0.9);
}
.visita-subtab-icon {
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
}
.visita-subtab.is-active .visita-subtab-icon {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.visita-subtab-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.visita-subtab-main strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.visita-subtab-main .cell-sub {
  font-size: 11px;
  color: var(--muted, #64748b);
  line-height: 1.35;
}
.visita-subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
}
.visita-subtab.is-active .visita-subtab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}
.visita-subtab.is-tone-warn .visita-subtab-count {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.visita-subtab.is-active.is-tone-warn .visita-subtab-count {
  background: rgba(254, 243, 199, 0.24);
  color: #fef3c7;
  border-color: rgba(254, 243, 199, 0.35);
}

.visita-shell-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Panel unificado Doctores / Acuerdos — toolbar + filtros + tabla */
.visita-module-panel {
  padding: 0;
  overflow: hidden;
}
.visita-module-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  flex-wrap: wrap;
}
.visita-module-toolbar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.visita-module-heading h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.visita-module-heading .cell-sub {
  margin: 0;
  font-size: 13px;
}
.visita-module-filters {
  margin: 0;
}
.visita-module-cta {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.45);
}
.visita-module-panel .table-scroll,
.visita-module-panel .acuerdos-table {
  margin: 0;
}
.visita-module-panel .module-table {
  border-radius: 0;
}
.visita-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}
.visita-empty-state p {
  margin: 0;
}
.text-btn-accent {
  color: #2563eb;
  font-weight: 600;
}
.text-btn-accent:hover {
  color: #1d4ed8;
}

/* Cartera médica · vendedor SAP + visitador */
.visita-sap-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.visita-sap-cell.is-empty {
  gap: 6px;
}
.visita-seller-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px -6px rgba(37, 99, 235, 0.55);
}
.visita-visitador-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7;
}
.visita-visitador-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.visita-visitador-stack.is-team .visita-visitador-chip {
  color: #3730a3;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #a5b4fc;
}
.visita-team-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.visita-visitador-pick {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visita-visitador-pick.is-compact {
  gap: 8px;
}
.visita-visitador-pick.is-compact legend {
  font-size: 13px;
}
.visita-visitador-hint.is-compact {
  margin: 0;
  font-size: 11px;
}
.visita-visitador-pick.is-compact .visita-visitador-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.visita-visitador-option.is-compact {
  flex-direction: column;
  justify-content: center;
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
  gap: 6px;
}
.visita-visitador-option.is-compact span {
  font-weight: 700;
}
.visita-visitador-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.visita-visitador-custom span {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.visita-visitador-custom input {
  padding: 8px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}
.visita-visitador-custom input:focus {
  outline: 2px solid #6366f1;
  outline-offset: 0;
  border-color: transparent;
}
.visita-visitador-pick.is-compact .visita-visitador-custom {
  grid-column: 1 / -1;
}
.cal-event-dialog-body {
  max-height: min(72vh, 640px);
  overflow-y: auto;
}
.cal-sync-hint.is-dialog {
  margin: 0;
  grid-column: 1 / -1;
}
.cal-empty-add {
  margin-top: 8px;
  font-weight: 700;
}
.cal-doctor-mode {
  display: inline-flex;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  margin-top: 6px;
}
.cal-doctor-mode-btn {
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
}
.cal-doctor-mode-btn.is-active {
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
  color: #fff;
}
.cal-doctor-mode-btn:not(.is-active):hover {
  background: #f8fafc;
}
.cal-new-doctor-fields {
  display: contents;
}
.visita-visitador-pick legend {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.visita-visitador-hint {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.visita-visitador-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.visita-visitador-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.visita-visitador-option:has(input:checked) {
  border-color: var(--visita-brand, var(--brand-blue, #1B7188));
  background: linear-gradient(180deg, var(--visita-brand-light, #e6f4f7) 0%, #d4eef3 100%);
  box-shadow: 0 8px 20px -14px rgba(27, 113, 136, 0.45);
}
.visita-visitador-option input {
  accent-color: var(--visita-brand-dark, var(--brand-blue-dark, #135568));
}
.visita-visitador-stack.is-team .visita-visitador-chip {
  color: #3730a3;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #a5b4fc;
}
.visita-team-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--visita-vm-equipo, #6366f1) 0%, #4f46e5 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.visita-visitador-custom input:focus {
  outline: 2px solid var(--visita-brand, var(--brand-blue, #1B7188));
  outline-offset: 0;
  border-color: transparent;
}
.cal-doctor-mode-btn.is-active {
  background: linear-gradient(180deg, var(--visita-navy, #1e3a8a) 0%, var(--visita-navy-mid, #1d4ed8) 100%);
  color: #fff;
}
.cal-sync-hint.is-dialog {
  margin: 0;
  grid-column: 1 / -1;
  background: var(--visita-brand-light, #e6f4f7);
  border-color: var(--visita-brand-line, #9fd4e0);
}
.visita-hoy-panel {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
  box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.35);
}
.visita-hoy-panel .panel-heading {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.visita-hoy-alert {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.cal-legend-swatch.is-equipo {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.visita-sap-tag {
  font-size: 11px;
  color: var(--muted, #64748b);
}
.visita-sap-tag.is-linked {
  color: #0369a1;
}
.visita-sap-tag.is-guess {
  color: #b45309;
}
.visita-cartera-table .col-seller { min-width: 160px; }
.visita-cartera-table .col-visitador { min-width: 120px; }
.visita-cartera-table .col-visitado,
.visita-cartera-table .col-visitado-h {
  min-width: 148px;
  width: 148px;
}
.visita-cartera-table .col-actions { width: 72px; }
.visita-cartera-visitado-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.visita-cartera-visitado-cell.is-done {
  gap: 6px;
}
.visita-visit-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.visita-visit-status.is-today {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
  color: #166534;
}
.visita-visit-status.is-past {
  background: #f8fafc;
  border: 1px solid var(--line, #e2e8f0);
  color: #64748b;
  font-weight: 700;
}
.visita-visit-status.is-none {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  font-weight: 700;
}
.visita-visit-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
}
.visita-cartera-row.is-visited-today {
  background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%);
}
.visita-cartera-row.is-visited-today:hover {
  background: linear-gradient(90deg, #ecfdf5 0%, #f8fafc 100%);
}
.visita-cartera-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.visita-cartera-search-input {
  flex: 1;
  min-width: 220px;
  max-width: 480px;
  padding: 10px 14px;
  border: 1px solid var(--visita-brand-line, #b8dde6);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.visita-cartera-search-input:focus {
  outline: none;
  border-color: var(--visita-brand, #1B7188);
  box-shadow: 0 0 0 3px rgba(27, 113, 136, 0.15);
}
.visita-cartera-search-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--visita-brand-dark, #0f4c5c);
}
.cal-doctor-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #f8fafc;
}
.cal-doctor-pick-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.cal-doctor-pick-row:hover {
  border-color: var(--visita-brand-line, #b8dde6);
  background: var(--visita-brand-light, #e8f4f7);
}
.cal-doctor-pick-row.is-selected {
  border-color: var(--visita-brand, #1B7188);
  background: linear-gradient(180deg, #e8f4f7 0%, #d4eef3 100%);
}
.cal-doctor-pick-row strong {
  font-size: 14px;
}
.cal-doctor-pick-empty {
  padding: 12px;
  margin: 0;
}
.visita-visitador-kpis {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--visita-brand-line, #b8dde6);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9fb 100%);
}
.visita-visitador-kpis-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.visita-visitador-kpis-head h3 {
  margin: 4px 0 0;
  font-size: 16px;
}
.visita-visitador-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.visita-visitador-kpi {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line, #e2e8f0);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.visita-visitador-kpi.is-done {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}
.visita-visitador-kpi.is-mid {
  border-color: #fcd34d;
}
.visita-visitador-kpi-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.visita-visitador-kpi-rank {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}
.visita-visitador-kpi-score {
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
  color: var(--visita-brand-dark, #0f4c5c);
}
.visita-visitador-kpi-score span {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
}
.visita-visitador-kpi-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: 10px;
}
.visita-visitador-kpi-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--visita-brand, #1B7188) 0%, #10b981 100%);
}
.visita-visitador-kpi.is-done .visita-visitador-kpi-fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}
.visita-visitador-kpi-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 11px;
  color: #64748b;
}
.visita-visitador-kpi-foot strong {
  color: #334155;
}
.visita-visitador-kpi-pct {
  margin-left: auto;
  font-weight: 800;
  color: var(--visita-brand-dark, #0f4c5c);
}
@media (max-width: 960px) {
  .visita-visitador-kpis-grid {
    grid-template-columns: 1fr;
  }
}
.visita-sap-dialog-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 60vh;
}
.visita-doctor-dialog-body {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.visita-doctor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.visita-doctor-field.is-full {
  grid-column: 1 / -1;
}
.visita-doctor-acuerdo-block {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(27, 113, 136, 0.18);
  background: linear-gradient(180deg, rgba(27, 113, 136, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visita-doctor-acuerdo-block .eyebrow {
  margin: 0;
}
.visita-doctor-acuerdo-block .cell-sub {
  margin: 0 0 4px;
}
.visita-doctor-field input,
.visita-doctor-field select,
.visita-doctor-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.visita-doctor-field textarea {
  resize: vertical;
  min-height: 72px;
}
.visita-doctor-field strong {
  font-weight: 600;
  color: #334155;
}

/* Visita médica · theme tokens (Dentalis brand + colores visitador) */
.visita-shell,
.visita-hoy-shell {
  --visita-brand: var(--brand-blue, #1B7188);
  --visita-brand-dark: var(--brand-blue-dark, #135568);
  --visita-brand-light: #e6f4f7;
  --visita-brand-line: #9fd4e0;
  --visita-navy: #1e3a8a;
  --visita-navy-mid: #1d4ed8;
  --visita-vm-pura: #7c3aed;
  --visita-vm-osvaldo: #0ea5e9;
  --visita-vm-leonel: #16a34a;
  --visita-vm-equipo: #6366f1;
}

/* Visita médica · Hoy — mismo theme que clientes-hub */
.visita-hoy-hub {
  gap: 20px;
}
.visita-hoy-pulse {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.visita-hoy-pulse .portal-today-tile {
  min-height: 118px;
}
.visita-hoy-pulse-bar,
.hub-pulse-tile-bar {
  background: rgba(255, 255, 255, 0.22);
}
.visita-hoy-pulse-bar > span,
.hub-pulse-tile-bar > span {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.portal-today-tile.status-good .visita-hoy-pulse-bar > span,
.portal-today-tile.status-good .hub-pulse-tile-bar > span {
  background: #ecfdf5;
}
.portal-today-tile.status-warn .visita-hoy-pulse-bar > span,
.portal-today-tile.status-warn .hub-pulse-tile-bar > span {
  background: #fef3c7;
}
.portal-today-tile.status-critical .visita-hoy-pulse-bar > span,
.portal-today-tile.status-critical .hub-pulse-tile-bar > span {
  background: #fee2e2;
}
.portal-today-tile.status-neutral .visita-hoy-pulse-bar > span,
.portal-today-tile.status-neutral .hub-pulse-tile-bar > span {
  background: rgba(255, 255, 255, 0.75);
}

/* Pulso Clientes — 3 tiles dinámicos (mismo theme que Inicio / Hoy) */
.clientes-hub-pulse-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.clientes-hub-pulse-tiles .portal-today-tile {
  min-height: 118px;
}
@media (max-width: 960px) {
  .clientes-hub-pulse-tiles {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) {
  .visita-hoy-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .visita-hoy-pulse {
    grid-template-columns: 1fr;
  }
}
.visita-hoy-agenda-card,
.visita-hoy-alerts-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.visita-hoy-agenda-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.visita-hoy-agenda-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}
.visita-hoy-alerts-card {
  border-left: 4px solid #f97316;
}
.visita-hoy-alerts-card .creditos-alerts-list {
  margin: 0;
}

/* Visita médica · Hoy — layout simplificado */
.visita-hoy-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visita-hoy-agenda-panel {
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px -20px rgba(15, 23, 42, 0.35);
}
.visita-hoy-agenda-panel .panel-heading {
  padding-bottom: 8px;
  margin-bottom: 0;
}
.visita-hoy-agenda-panel h3 {
  margin: 0;
  font-size: 1rem;
}
.visita-hoy-alerts-panel {
  border-left: 4px solid #f97316;
}
.visita-hoy-details {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.visita-hoy-details > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--text);
  background: #f8fafc;
  list-style: none;
}
.visita-hoy-details > summary::-webkit-details-marker { display: none; }
.visita-hoy-details > summary::after {
  content: "▾";
  float: right;
  color: var(--muted);
}
.visita-hoy-details[open] > summary::after { content: "▴"; }
.visita-hoy-details .visita-hoy-grid {
  padding: 12px;
  margin: 0;
}
.visita-hoy-subpanel {
  box-shadow: none;
  border: 1px solid var(--line);
}

.visita-equipo-report-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.visita-equipo-report .crm-report-tile {
  cursor: default;
}
.visita-equipo-report .crm-report-tile:hover {
  transform: none;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.visita-hoy-next-chips {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(31, 71, 136, 0.14);
}
.visita-hoy-next-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.visita-hoy-done-msg {
  margin: 12px 1rem 0;
  padding-bottom: 4px;
  font-weight: 600;
  color: #166534;
}
.visita-hoy-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.visita-hoy-agenda-table tbody tr.is-visited-today {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, transparent 100%);
}
.visita-hoy-agenda-table tbody tr.is-overdue-row {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}
.subtabs .subtab.subtab-action {
  margin-left: auto;
}
.visita-hoy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.visita-hoy-grid.is-tables {
  margin-top: 14px;
}
@media (max-width: 960px) {
  .visita-equipo-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .visita-hoy-grid {
    grid-template-columns: 1fr;
  }
  .subtabs .subtab.subtab-action {
    margin-left: 0;
  }
}

/* Legacy visita-hoy custom cards — deprecated, mantener mínimo por calendario/chips */
.visita-hoy-shell .visita-hoy-toolbar {
  margin-bottom: 16px;
}
.visita-hoy-agenda,
.visita-hoy-alerts {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visita-hoy-agenda-item,
.visita-hoy-alert {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.visita-hoy-alert {
  display: flex;
}
.visita-hoy-agenda-item.is-pending {
  border-left: 4px solid var(--visita-brand);
}
.visita-hoy-agenda-item.is-done {
  border-left: 4px solid #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #bbf7d0;
}
.visita-hoy-agenda-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.visita-hoy-agenda-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.visita-hoy-agenda-doctor {
  font-size: 15px;
  line-height: 1.3;
  color: var(--text, #0f172a);
}
.visita-hoy-agenda-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.visita-hoy-agenda-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.visita-hoy-agenda-body {
  min-width: 0;
}
.visita-hoy-agenda-clinic {
  display: block;
  margin-top: 2px;
}
.visita-hoy-agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.visita-hoy-status {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.visita-hoy-status.is-pending {
  background: linear-gradient(180deg, var(--visita-brand-light) 0%, #d4eef3 100%);
  border: 1px solid var(--visita-brand-line);
  color: var(--visita-brand-dark);
}
.visita-hoy-status.is-done {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
  color: #166534;
}
.visita-hoy-status.is-overdue {
  background: linear-gradient(180deg, #fef2f2 0%, #fecaca 100%);
  border: 1px solid #fca5a5;
  color: #991b1b;
}
.visita-hoy-agenda-item.is-overdue {
  border-left-color: #dc2626;
}
.visita-hoy-agenda-time {
  min-width: 52px;
  font-size: 13px;
  font-weight: 700;
  color: var(--visita-brand-dark);
}
.visita-hoy-agenda-actions {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}
.visita-hoy-btn-resched,
.visita-hoy-btn-link,
.visita-btn-visitado-soft {
  padding: 6px 11px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  white-space: nowrap;
  border-radius: 8px !important;
}
.visita-btn-visitado-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  line-height: 1.2;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 1px solid #86efac !important;
  color: #047857 !important;
  box-shadow: none !important;
}
.visita-btn-visitado-soft:hover {
  background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%) !important;
  border-color: #4ade80 !important;
  color: #065f46 !important;
}
.visita-btn-visitado-soft:active {
  transform: translateY(1px);
}
.visita-btn-visitado,
button.visita-btn-visitado.primary-btn {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid #047857 !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
}
.visita-btn-visitado:hover,
button.visita-btn-visitado.primary-btn:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
  border-color: #059669 !important;
}
.visita-btn-visitado.is-compact {
  padding: 6px 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}
.visita-visitador-metrics {
  margin-bottom: 16px;
}
.visita-visitador-metrics .crm-metric strong {
  font-size: 28px;
}
.visita-kpi-denom {
  font-size: 16px;
  font-weight: 700;
  color: #64748b;
}
.cal-event-title-row .visita-btn-visitado-soft {
  margin-left: 4px;
}
.visita-cartera-visitado-cell .visita-btn-visitado-soft {
  width: 100%;
  justify-content: center;
}
.visita-cartera-doctor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.visita-cartera-doctor-row strong {
  font-size: 14px;
}
.cal-event-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.cal-event-title-row .cal-event-title {
  margin: 0;
}
.cal-event-title-row .cal-event-visited-tag {
  margin-top: 0;
}
.visita-btn-visitado-inline {
  font-size: 12px !important;
  font-weight: 700;
  color: #059669 !important;
}
.visita-expediente-visitado-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-bottom: 1px solid #a7f3d0;
}
.visita-expediente-visitado-copy strong {
  display: block;
  font-size: 14px;
  color: #065f46;
  margin-bottom: 2px;
}
.visita-expediente-visitado-copy .cell-sub {
  color: #047857;
  margin: 0;
}
.cal-event-visitado-row {
  margin-top: 8px;
  width: 100%;
}
.cal-event-visited-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
  color: #166534;
}
.cal-event-rescheduled-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  color: #92400e;
}
.visita-hoy-agenda-body {
  flex: 1;
  min-width: 0;
}
.visita-hoy-alert-main {
  flex: 1;
  min-width: 0;
}
.visita-hoy-alert.is-overdue {
  border-left: 4px solid #dc2626;
}
.visita-hoy-alert.is-high {
  border-left: 4px solid #ea580c;
}
.visita-hoy-alert.is-expiring {
  border-left: 4px solid #d97706;
}
.visita-hoy-empty {
  padding: 20px 16px;
  color: var(--muted, #64748b);
  font-size: 14px;
}
.visita-hoy-table .num {
  text-align: right;
}
.visita-sap-search-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.visita-sap-search-label input {
  padding: 10px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  font-size: 14px;
}
.visita-sap-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 42vh;
}
.visita-sap-result-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.visita-sap-result-row:hover {
  border-color: #2563eb;
  box-shadow: 0 6px 16px -10px rgba(37, 99, 235, 0.35);
}
.visita-sap-result-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.visita-sap-result-main strong {
  font-size: 14px;
  color: #0f172a;
}
.visita-sap-result-ytd {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  white-space: nowrap;
}
.visita-sap-result-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted, #64748b);
  font-size: 13px;
}

/* Expediente médico · panel lateral */
.visita-expediente-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  justify-content: flex-end;
  animation: visitaExpFadeIn 0.2s ease;
}
@keyframes visitaExpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.visita-expediente-panel {
  width: min(520px, 100vw);
  height: 100vh;
  overflow-y: auto;
  background: #fff;
  box-shadow: -12px 0 40px -12px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  animation: visitaExpSlideIn 0.22s ease;
}
@keyframes visitaExpSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.visita-expediente-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #0b1220 0%, #1e293b 100%);
  color: #f8fafc;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.visita-expediente-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #f8fafc;
}
.visita-expediente-header .eyebrow,
.visita-expediente-header .cell-sub {
  color: rgba(226, 232, 240, 0.82);
}
.visita-expediente-header .icon-btn {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.2);
}
.visita-expediente-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.visita-exp-kpi {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.visita-exp-kpi strong {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.visita-exp-kpi.is-info { border-color: #93c5fd; background: linear-gradient(135deg, #eff6ff, #fff); }
.visita-exp-kpi.is-success { border-color: #6ee7b7; background: linear-gradient(135deg, #ecfdf5, #fff); }
.visita-exp-kpi.is-warning { border-color: #fcd34d; background: linear-gradient(135deg, #fffbeb, #fff); }
.visita-expediente-grid {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
}
.visita-expediente-block {
  padding: 14px 16px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  background: #fff;
}
.visita-expediente-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.visita-expediente-block-head h3 {
  margin: 4px 0 0;
  font-size: 16px;
}
.visita-expediente-team {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visita-expediente-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.visita-expediente-team-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
  min-width: 110px;
}
.visita-expediente-acuerdo.is-active {
  border-color: #6ee7b7;
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 100%);
}
.visita-expediente-acuerdo.is-none {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
}
.visita-expediente-timeline-wrap {
  margin: 0 20px 16px;
}
.visita-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid #e2e8f0;
  margin-left: 14px;
}
.visita-timeline-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 0 0 18px 0;
  position: relative;
}
.visita-timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #2563eb;
}
.visita-timeline-item.is-scheduled::before {
  background: #f59e0b;
  box-shadow: 0 0 0 2px #f59e0b;
}
.visita-timeline-seq {
  font-size: 12px;
  font-weight: 800;
  color: #2563eb;
  padding-top: 2px;
}
.visita-timeline-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.visita-timeline-visitador {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.visita-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.visita-timeline-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
}
.visita-timeline-tag.is-purpose {
  background: #dbeafe;
  color: #1d4ed8;
}
.visita-timeline-tag.is-scheduled-tag {
  background: #fef3c7;
  color: #92400e;
}
.visita-timeline-tag.is-up { background: #dcfce7; color: #065f46; }
.visita-timeline-tag.is-down { background: #fee2e2; color: #991b1b; }
.visita-timeline-tag.is-flat { background: #fef3c7; color: #92400e; }
.visita-timeline-notes {
  margin: 8px 0 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
}
.visita-timeline-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.visita-timeline-empty {
  padding: 16px 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  list-style: none;
}
.visita-expediente-actions {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--line, #e2e8f0);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.visita-cartera-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.visita-cartera-row:hover {
  background: #f8fafc;
}
.visita-cartera-row.is-selected {
  background: linear-gradient(90deg, #eff6ff 0%, #fff 100%);
  box-shadow: inset 3px 0 0 #2563eb;
}
.visita-count-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.visita-doctor-acu-inline {
  margin-top: 6px;
}
.visita-acu-badge {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.visita-acu-badge.is-none {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.visita-acu-badge .pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.visita-acuerdos-row {
  background: linear-gradient(180deg, #fafaf9 0%, #f8fafc 100%);
}
.visita-acuerdos-row:hover {
  background: linear-gradient(180deg, #fafaf9 0%, #f8fafc 100%);
}
.visita-acuerdos-row > td {
  padding: 0 !important;
  border-top: none;
  border-bottom: 1px solid #e5e7eb;
}
.visita-acuerdos-wrap {
  padding: 12px 16px 16px 40px;
  border-left: 3px solid #93c5fd;
  margin-left: 12px;
}
.visita-acuerdos-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.visita-acuerdos-head .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #475569;
}
.visita-acuerdos-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.visita-acuerdo-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.visita-acuerdo-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.visita-acuerdo-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.visita-acuerdo-item-head strong {
  font-size: 14px;
  color: #0f172a;
}
.visita-acuerdo-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: #334155;
}
.visita-acuerdo-item-body strong {
  color: #475569;
  font-weight: 600;
}
.visita-acuerdo-item-body .cell-sub {
  font-size: 11.5px;
  color: #64748b;
}
.visita-acuerdo-note {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fef3c7;
  color: #78350f;
  font-size: 11.5px;
  border: 1px solid #fde68a;
}
.visita-acuerdo-note strong {
  color: #78350f;
  font-weight: 700;
}
.visita-acuerdo-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.visita-acuerdos-row.is-empty .visita-acuerdos-wrap {
  padding: 8px 16px 12px 40px;
  border-left-color: #e5e7eb;
}
.visita-acuerdos-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
}
@media (max-width: 720px) {
  .visita-acuerdos-wrap {
    padding: 10px 12px 12px 16px;
    margin-left: 0;
  }
  .visita-acuerdo-item {
    flex-direction: column;
    align-items: stretch;
  }
  .visita-acuerdo-item-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .visita-module-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .visita-module-cta {
    width: 100%;
  }
  .visita-doctor-dialog-body {
    grid-template-columns: 1fr;
  }
  .visita-hoy-grid {
    grid-template-columns: 1fr;
  }
}

/* Cuando la tab de calendario está activa dentro del hub, el work-panel del
   calendario respira mejor sin padding extra propio. */
.visita-shell-body[data-visita-sub-body="calendar"] .calendar-panel {
  margin-top: 0;
}

@media (max-width: 900px) {
  .visita-shell-header {
    grid-template-columns: 1fr;
    padding: 18px 20px;
  }
  .visita-shell-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .visita-shell-hero h2 {
    font-size: 22px;
  }
  .visita-subtabs {
    grid-template-columns: 1fr;
  }
}

.visita-breadcrumb {
  margin-bottom: 14px;
}
.visita-detail-panel .subtabs {
  margin-bottom: 12px;
}
.visita-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.visita-table .col-doctor { min-width: 140px; }
.visita-table .col-clinic { min-width: 130px; }
.visita-table .col-step { min-width: 120px; }
.visita-table .col-date { min-width: 110px; }
.visita-table .col-priority { min-width: 80px; }
.visita-table .col-acuerdo { min-width: 130px; }
.visita-table .col-potential { min-width: 90px; }
.visita-link-acuerdo {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}
.visita-empty-row {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px !important;
}
@media (max-width: 768px) {
  .visita-hub-bridge {
    flex-direction: column;
    align-items: flex-start;
  }
  .visita-hub-week-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .visita-hub-week-meta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.clientes-metrics {
  margin-bottom: 16px;
}
.clientes-metrics-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.clientes-metrics-compact .crm-metric {
  padding: 12px 14px;
}
.clientes-metrics-compact .crm-metric .eyebrow { font-size: 10px; letter-spacing: 0.05em; }
.clientes-metrics-compact .crm-metric strong { font-size: 18px; }
.clientes-metrics-compact .crm-metric .cell-sub { font-size: 11px; }
@media (max-width: 720px) {
  .clientes-metrics-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.clientes-subtabs {
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 4px;
  background: rgba(148, 163, 184, 0.08);
  border-radius: 10px;
  display: flex;
  gap: 4px;
}
.clientes-subtabs .subtab {
  flex: 1;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 500;
  font-size: 13px;
}
.clientes-subtabs .subtab.is-active {
  background: var(--surface, #fff);
  border-color: var(--border, rgba(148, 163, 184, 0.25));
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  font-weight: 600;
}

.clientes-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.clientes-list-header .clientes-search { width: 280px; }

.clientes-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .clientes-analytics-grid { grid-template-columns: 1fr; }
}

.clientes-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.clientes-search {
  width: 320px;
  max-width: 100%;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
}

.clientes-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-2);
}

.client-cat {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.client-cat-aaa {
  background: var(--green-2);
  color: var(--green);
}

.client-cat-aa {
  background: var(--accent-2);
  color: var(--accent);
}

.client-cat-a {
  background: var(--amber-2);
  color: var(--amber);
}

.client-cat-b {
  background: var(--panel-2);
  color: var(--muted);
}

.client-cat-c {
  background: var(--panel-2);
  color: var(--muted);
  opacity: 0.7;
}

/* Inventory tabs */
.inventory-tabs {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* "Alimentado por" badge en topbar */
.view-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.view-source strong {
  font-weight: 850;
}

.view-source-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex: 0 0 auto;
}

/* Acuerdos comerciales */
.agreement-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 4px;
}

.agreement-brand {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
}

/* Entregas - lista semanal */
.entregas-week {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entregas-week li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-2);
  border-radius: 8px;
}

.entregas-week li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entregas-week-right {
  text-align: right;
}

.entregas-week strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

/* ============================================================
   Pagos (módulo)
   ============================================================ */

.pagos-calendar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 14px 4px 4px;
}

.pagos-week {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.pagos-week-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.pagos-week-bar {
  width: 100%;
  height: 96px;
  background: var(--panel-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}

.pagos-week-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), #4f8bff);
  border-radius: 0 0 8px 8px;
  min-height: 4px;
  transition: height 0.3s ease;
}

.pagos-week-amount {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.pagos-week-count {
  font-size: 10px;
  min-height: 14px;
}

.pagos-week.is-current .pagos-week-label {
  color: var(--accent, #2563eb);
}

.pagos-week.is-overdue-col .pagos-week-label {
  color: #ef4444;
}

.pagos-week-bar-fill.is-overdue {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
}

.pagos-week-bar-fill.is-due {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.pagos-calendar-panel {
  margin-bottom: 1rem;
}

.pagos-verify-note {
  margin-top: 6px;
  font-size: 13px;
}

@media (max-width: 900px) {
  .pagos-calendar {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   Modal de aprobación con contexto
   ============================================================ */

.approval-dialog {
  width: min(880px, calc(100vw - 32px)) !important;
  max-width: min(880px, calc(100vw - 32px)) !important;
  padding: 0;
  background: transparent;
}

.approval-dialog::backdrop {
  background: rgba(8, 16, 32, 0.55);
  backdrop-filter: blur(2px);
}

.approval-dialog .approval-card {
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}

.approval-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.approval-finance {
  background: linear-gradient(135deg, rgba(31, 71, 136, 0.06), rgba(31, 71, 136, 0.02));
  border: 1px solid rgba(31, 71, 136, 0.14);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.approval-finance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.approval-finance-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.approval-finance-item strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.approval-finance-highlight {
  color: var(--brand, #1f4788);
}

.approval-advance-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-primary, #1e293b);
  line-height: 1.45;
}

.approval-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
}

.approval-summary-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.approval-summary-block .eyebrow {
  margin: 0;
}

.approval-summary-block strong {
  font-size: 16px;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.approval-desc {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4;
}

.approval-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.approval-recos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.approval-reco {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border-left: 3px solid transparent;
}

.approval-reco-warn {
  background: var(--amber-2);
  color: var(--amber);
  border-color: var(--amber);
}

.approval-reco-ok {
  background: var(--green-2);
  color: var(--green);
  border-color: var(--green);
}

.approval-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.approval-section-full {
  grid-column: 1 / -1;
}

.approval-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approval-stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel-2);
  border-radius: 8px;
}

.approval-stats li span {
  color: var(--muted);
  font-size: 13px;
}

.approval-stats li strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.approval-actions {
  padding: 14px 20px;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .approval-summary,
  .approval-grid {
    grid-template-columns: 1fr 1fr;
  }

  .approval-finance-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .approval-summary,
  .approval-grid {
    grid-template-columns: 1fr;
  }

  .approval-finance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  .sales-hero,
  .sales-grid {
    grid-template-columns: 1fr;
  }
  .sales-hero-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

/* iPad landscape / small desktop adjustments (above the mobile-drawer breakpoint
   defined at @media (max-width: 980px) — below 981px the sidebar becomes a
   drawer and the shell collapses to a single column). */
@media (min-width: 981px) and (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .portal-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 820px) {
  /* Sidebar / app-shell responsive behavior is handled by the mobile drawer
     rules at @media (max-width: 980px). Keep only the portal-grid override. */
  .portal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* SAP Live Banner — estilos consolidados abajo, ver ~línea 7810 */

.sap-live-banner-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.sap-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  background: #1f4788;
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sap-live-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
  animation: sap-live-pulse 2.2s ease-in-out infinite;
}

@keyframes sap-live-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.0); }
}

@media (max-width: 760px) {
  .sap-live-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .sap-live-grid {
    grid-template-columns: 1fr;
  }
}

/* Inventory SAP source */
.inventory-sap-source {
  margin: 0.5rem 0 1rem;
  background: linear-gradient(135deg, rgba(31, 71, 136, 0.07) 0%, rgba(31, 71, 136, 0.02) 100%);
  border: 1px solid rgba(31, 71, 136, 0.18);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.inventory-sap-source-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.inventory-sap-source-head strong {
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
}

.inventory-sap-timestamp {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin-left: auto;
}

.inventory-sap-source-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
}

/* SAP VA05 / Cartera panels (Sales & Payments) */
.sap-va05-panel,
.sap-cartera-panel {
  margin-bottom: 1.25rem;
  border: 1px solid rgba(31, 71, 136, 0.18);
  background: linear-gradient(135deg, rgba(31, 71, 136, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.sap-va05-heading,
.sap-cartera-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sap-va05-heading h3,
.sap-cartera-heading h3 {
  margin: 0.25rem 0 0;
}

.sap-va05-kpis,
.sap-cartera-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 0.9rem 0 1rem;
}

.sap-va05-kpis > div,
.sap-cartera-kpis > div {
  background: rgba(31, 71, 136, 0.05);
  border: 1px solid rgba(31, 71, 136, 0.12);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sap-va05-kpis .eyebrow,
.sap-cartera-kpis .eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.sap-va05-kpis strong,
.sap-cartera-kpis strong {
  font-size: 1.05rem;
  color: var(--text-primary, #0f172a);
}

.sap-va05-grid,
.sap-cartera-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sap-va05-card {
  background: var(--surface-elevated, #ffffff);
  border: 1px solid rgba(31, 71, 136, 0.12);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
}

.sap-va05-card h4 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
}

.sap-mini-table {
  width: 100%;
  font-size: 0.82rem;
}

.sap-mini-table th {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sap-mini-table td,
.sap-mini-table th {
  padding: 0.35rem 0.5rem;
}

.sap-mini-table code {
  font-size: 0.78rem;
  background: rgba(31, 71, 136, 0.06);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

@media (max-width: 960px) {
  .sap-va05-grid,
  .sap-cartera-grid {
    grid-template-columns: 1fr;
  }
}

/* Créditos y cobros — CXC + cobros del día */
.creditos-stale-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #92400e;
  font-size: 0.88rem;
}

.creditos-cuadre {
  margin-bottom: 1rem;
  border-left: 4px solid var(--line, rgba(15, 23, 42, 0.12));
}

.creditos-cuadre.is-good {
  border-left-color: #16a34a;
}

.creditos-cuadre.is-warn {
  border-left-color: #ca8a04;
}

.creditos-cuadre.is-critical {
  border-left-color: #dc2626;
}

.creditos-cuadre-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  padding: 0 1rem 0.75rem;
}

.creditos-cuadre-metrics article {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
}

.creditos-cuadre-notes {
  margin: 0 1rem 0.75rem;
  padding-left: 1.1rem;
  color: var(--muted, #64748b);
  font-size: 0.85rem;
}

.creditos-cuadre-notes li + li {
  margin-top: 0.35rem;
}

.creditos-cuadre-drift {
  margin: 0 1rem 0.75rem;
  font-size: 0.85rem;
}

.creditos-cuadre-details {
  margin: 0 1rem 1rem;
}

.creditos-cuadre-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.creditos-cuadre-table .creditos-cuadre-up {
  color: #b45309;
}

.creditos-cuadre-table .creditos-cuadre-down {
  color: #0369a1;
}

.creditos-metrics {
  margin-bottom: 0.75rem;
}

.creditos-metrics-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.creditos-metrics-compact .metric {
  padding: 8px 12px;
  min-height: 0;
  border-radius: 10px;
}

.creditos-metrics-compact .metric strong,
.creditos-kpi-line {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, #0f172a);
}

.creditos-kpi-line strong {
  font-weight: 700;
}

.creditos-ideas {
  margin: 0 0 14px;
}

.creditos-ideas-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.creditos-ideas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creditos-idea {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(31, 71, 136, 0.14);
  background: var(--panel, #fff);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, #0f172a);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.creditos-idea:hover {
  border-color: rgba(31, 71, 136, 0.35);
  background: rgba(31, 71, 136, 0.04);
}

.creditos-idea-critical {
  border-left: 3px solid #dc2626;
}

.creditos-idea-warn {
  border-left: 3px solid #ea580c;
}

.creditos-idea-info {
  border-left: 3px solid #2563eb;
}

.creditos-idea-calm {
  border-left: 3px solid #64748b;
}

.creditos-filter-badge {
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

@media (max-width: 720px) {
  .creditos-metrics-simple {
    grid-template-columns: 1fr;
  }
}

.creditos-tabs {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--panel, #fff);
  box-shadow: 0 1px 0 var(--line, rgba(15, 23, 42, 0.08));
  margin-bottom: 0;
}

.creditos-tabs .subtab {
  cursor: pointer;
  min-height: 44px;
  position: relative;
  z-index: 1;
}

.creditos-tab-panel {
  min-height: 160px;
  padding-top: 14px;
}

.creditos-tab-panel > * + * {
  margin-top: 14px;
}

.creditos-alerts-banner .text-btn {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.creditos-aging {
  margin-bottom: 1.25rem;
}

.creditos-aging-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  padding: 0 1rem 1rem;
}

.creditos-aging-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(31, 71, 136, 0.12);
  background: var(--surface-elevated, #fff);
}

.creditos-aging-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

.creditos-aging-col strong {
  font-size: 1.05rem;
}

.creditos-aging-bar {
  margin-top: 0.35rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(31, 71, 136, 0.1);
  overflow: hidden;
}

.creditos-aging-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f4788, #3b82f6);
}

.creditos-cartera-panel {
  margin-bottom: 16px;
}

.creditos-cartera-clientes {
  width: 100%;
}

.creditos-cartera-toggle {
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.15rem 0.35rem;
}

.creditos-cartera-summary {
  cursor: pointer;
}

.creditos-cartera-summary:hover td {
  background: rgba(31, 71, 136, 0.04);
}

.creditos-cartera-summary.is-expanded td {
  background: rgba(31, 71, 136, 0.06);
}

.creditos-cartera-detail {
  padding: 8px 8px 12px 28px;
  background: rgba(31, 71, 136, 0.04);
  border-radius: 10px;
}

.creditos-cartera-detail-note {
  margin: 0 0 8px;
}

.creditos-cartera-detail-warn {
  color: #b45309;
}

.creditos-cartera-detail-table {
  font-size: 0.92rem;
}

.creditos-invoice-focused {
  background: rgba(31, 71, 136, 0.08);
}

.creditos-gestion-kpi-focus {
  border-color: rgba(31, 71, 136, 0.35);
  background: rgba(31, 71, 136, 0.06);
}

.creditos-kpi-secondary {
  font-size: 0.95rem;
  opacity: 0.85;
}

.creditos-invoice-note-help,
.creditos-client-note-help {
  margin: 0 0 8px;
}

.creditos-ar-credit-row {
  opacity: 0.92;
}

.creditos-amount-credit {
  color: #15803d;
}

.creditos-gestion-facturas-note {
  margin: 0 0 10px;
}

.creditos-metrics-simple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creditos-alerts-line {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--text, #1e293b);
  font-size: 0.92rem;
}

.creditos-extras {
  margin-top: 20px;
  border: 1px solid rgba(31, 71, 136, 0.12);
  border-radius: 12px;
  background: var(--panel, #fff);
}

.creditos-extras > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  list-style: none;
}

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

.creditos-extras-body {
  padding: 0 12px 12px;
}

.creditos-extras-body > * + * {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .creditos-metrics-simple {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .creditos-aging-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.creditos-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(31, 71, 136, 0.14);
  border-radius: 12px;
  background: var(--panel, #fff);
}

.creditos-search-field {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.creditos-search-icon {
  flex-shrink: 0;
  opacity: 0.55;
  font-size: 0.95rem;
}

.creditos-search-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(31, 71, 136, 0.18);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  background: #fff;
  color: var(--ink, #0f172a);
}

.creditos-search-field input:focus {
  outline: 0;
  border-color: var(--brand, #1f4788);
  box-shadow: 0 0 0 3px rgba(31, 71, 136, 0.12);
}

.creditos-search-meta {
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.creditos-search-hint {
  font-weight: 500;
}

.creditos-search-panel .panel-heading h3 {
  line-height: 1.25;
}

.creditos-search-section {
  margin: 0 1rem 1.1rem;
  padding-top: 0.25rem;
}

.creditos-search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.creditos-search-section-head h4 {
  margin: 0;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.creditos-search-table {
  margin: 0;
}

.creditos-search-alerts {
  padding: 0;
}

.creditos-search-empty {
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
}

.creditos-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  padding: 0 0 1rem;
  margin-bottom: 0.5rem;
}

.creditos-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.creditos-export-actions .secondary-btn {
  white-space: nowrap;
}

.creditos-export-hint {
  flex: 1 1 100%;
  margin: 0;
}

.creditos-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

.creditos-filters select {
  min-width: 160px;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(31, 71, 136, 0.2);
  font-size: 0.88rem;
}

.creditos-gestora-lock {
  align-self: center;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: rgba(31, 71, 136, 0.08);
  border: 1px solid rgba(31, 71, 136, 0.18);
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
}

.creditos-gestora-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(31, 71, 136, 0.08), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(31, 71, 136, 0.16);
}

.creditos-gestora-banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.88rem;
}

.creditos-gestora-banner-stats span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.creditos-gestora-pct.is-good { color: #15803d; }
.creditos-gestora-pct.is-warn { color: #b45309; }
.creditos-gestora-pct.is-bad { color: #b91c1c; }

.creditos-gestora-panel {
  margin-bottom: 1rem;
}

.creditos-vendor-pct.is-good { color: #15803d; }
.creditos-vendor-pct.is-warn { color: #b45309; }
.creditos-vendor-pct.is-bad { color: #b91c1c; }

.creditos-alerts-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
}

.creditos-alerts-banner.is-critical {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #991b1b;
}

.creditos-alerts-banner.is-warn {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #92400e;
}

.creditos-alerts-list {
  list-style: none;
  margin: 0;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.creditos-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(31, 71, 136, 0.12);
  background: var(--surface-elevated, #fff);
}

.creditos-alert-critical { border-left: 4px solid #ef4444; }
.creditos-alert-warn { border-left: 4px solid #f59e0b; }
.creditos-alert-info { border-left: 4px solid #3b82f6; }

.creditos-aged-warn { color: #b45309; font-weight: 600; }

.creditos-crm-panel .creditos-crm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}

.creditos-crm-stats .crm-metric {
  margin: 0;
}

.creditos-gestiones-table {
  margin: 0 1rem 1rem;
}

.creditos-promesa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 1rem 0.85rem;
}

.creditos-promesa-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.creditos-promesa-filter-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.creditos-promesa-filter-chip.is-active {
  border-color: #1d4ed8;
  background: #eff6ff;
  color: #1e40af;
}

.creditos-promesa-filter-chip .subtab-count {
  font-size: 0.72rem;
  font-weight: 800;
}

.creditos-gestiones-row.creditos-promesa-row-overdue {
  background: rgba(254, 226, 226, 0.35);
}
.creditos-gestiones-row.creditos-promesa-row-today {
  background: rgba(254, 243, 199, 0.45);
}
.creditos-gestiones-row.creditos-promesa-row-soon {
  background: rgba(219, 234, 254, 0.35);
}
.creditos-promesa-due {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.creditos-promesa-due-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.creditos-promesa-overdue .creditos-promesa-due-tag { color: #b91c1c; }
.creditos-promesa-today .creditos-promesa-due-tag { color: #b45309; }
.creditos-promesa-soon .creditos-promesa-due-tag { color: #1d4ed8; }
.creditos-promesa-future .creditos-promesa-due-tag { color: #64748b; }
.pill.creditos-tipo-rv { background: #fef3c7; color: #92400e; }
.pill.creditos-tipo-debit { background: #eff6ff; color: #1e40af; }
.pill.creditos-tipo-credit { background: #ecfdf5; color: #047857; }

.creditos-crm-activity {
  margin: 0 1rem 1rem;
}

.creditos-crm-empty {
  padding: 20px 1rem 24px;
  text-align: center;
}

.creditos-crm-stats article {
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(31, 71, 136, 0.1);
  background: rgba(31, 71, 136, 0.03);
}

.creditos-gestion-dialog {
  max-width: 680px;
  width: min(96vw, 680px);
  border: 0;
  border-radius: 12px;
  padding: 0;
}

.creditos-gestion-dialog::backdrop {
  background: rgba(23, 33, 43, 0.48);
}

.creditos-gestion-card {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 860px);
}

.creditos-gestion-card .dialog-header {
  align-items: flex-start;
  padding: 20px 22px;
}

.creditos-gestion-card .dialog-header h3 {
  margin: 4px 0 6px;
  line-height: 1.25;
}

.creditos-gestion-card .dialog-header .cell-sub {
  margin: 0;
  line-height: 1.4;
}

.creditos-gestion-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.creditos-gestion-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.creditos-gestion-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #eef0f3;
  background: #fafafa;
  min-height: 72px;
}

.creditos-gestion-kpi .eyebrow {
  display: block;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.creditos-kpi-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  word-break: break-word;
}

.creditos-gestion-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin: 0;
}

.creditos-gestion-act {
  justify-content: center;
  text-align: center;
  min-height: 40px;
}

.creditos-gestion-facturas {
  margin: 0;
  border: 2px solid rgba(27, 113, 136, 0.18);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.creditos-gestion-facturas-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: linear-gradient(180deg, rgba(27, 113, 136, 0.06) 0%, rgba(27, 113, 136, 0.02) 100%);
  border-bottom: 1px solid transparent;
}

.creditos-gestion-facturas-toggle::-webkit-details-marker {
  display: none;
}

.creditos-gestion-facturas[open] .creditos-gestion-facturas-toggle {
  border-bottom-color: rgba(27, 113, 136, 0.14);
}

.creditos-gestion-facturas[open] .creditos-gestion-facturas-chevron {
  transform: rotate(180deg);
}

.creditos-gestion-facturas-label {
  font-weight: 700;
  color: var(--ink, #0f172a);
}

.creditos-gestion-facturas-meta {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creditos-gestion-facturas-meta strong {
  font-size: 0.88rem;
}

.creditos-gestion-facturas-chevron {
  color: var(--brand-blue, #1B7188);
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.creditos-gestion-facturas-panel {
  padding: 0 12px 12px;
}

.creditos-gestion-facturas-warn {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.78rem;
}

.creditos-tipo-rv {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
}

.creditos-tipo-debit {
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
}

.creditos-tipo-credit {
  background: #dcfce7;
  color: #166534;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
}

.creditos-gestion-facturas-table {
  width: 100%;
  margin-top: 10px;
  font-size: 0.82rem;
}

.creditos-gestion-facturas-table thead th {
  background: rgba(27, 113, 136, 0.07);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.creditos-gestion-facturas-table tbody td,
.creditos-gestion-facturas-table tfoot td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.creditos-invoice-code {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-size: 0.78rem;
}

.creditos-gestion-facturas-empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  border-radius: 8px;
}

.creditos-client-note-form,
.creditos-promesa-form,
.creditos-contact-form {
  margin: 0;
  padding: 14px 16px 16px;
  border-radius: 10px;
  border: 1px solid rgba(31, 71, 136, 0.12);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creditos-section-title {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.creditos-field-grid {
  display: grid;
  gap: 12px;
  width: 100%;
}

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

.creditos-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.creditos-field-full {
  width: 100%;
}

.creditos-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink, #334155);
  line-height: 1.2;
}

.creditos-field input,
.creditos-field textarea,
.creditos-promesa-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(31, 71, 136, 0.22);
  font-size: 0.9rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  background: #fff;
}

.creditos-field input {
  min-height: 38px;
}

.creditos-field textarea,
.creditos-promesa-form textarea {
  min-height: 72px;
  resize: vertical;
  font-variant-numeric: normal;
}

.creditos-field input:focus,
.creditos-field textarea:focus {
  outline: 2px solid rgba(31, 71, 136, 0.25);
  outline-offset: 1px;
  border-color: rgba(31, 71, 136, 0.45);
}

.creditos-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.creditos-contact-actions {
  padding-top: 2px;
}

.creditos-link-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.creditos-gestion-history {
  margin: 0;
  padding: 0;
}

.creditos-empty-history {
  margin: 0;
  padding: 8px 2px 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.creditos-gestion-card .dialog-actions {
  padding: 14px 22px 20px;
  border-top: 1px solid var(--line, #e8eaed);
}

@media (max-width: 560px) {
  .creditos-field-grid-3,
  .creditos-gestion-actions {
    grid-template-columns: 1fr;
  }

  .creditos-gestion-kpis {
    grid-template-columns: 1fr;
  }
}

.primary-mini {
  background: #1f4788;
  color: #fff;
  border-color: #1f4788;
}

/* Inventory cross panel — MB52 ↔ VA05 */
.inventory-cross-panel {
  margin-bottom: 1.5rem;
  border: 1px solid rgba(31, 71, 136, 0.22);
  background: linear-gradient(135deg, rgba(31, 71, 136, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.inventory-cross-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.inventory-cross-heading h3 {
  margin: 0.25rem 0 0;
  font-size: 1.4rem;
}

.inventory-cross-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.25rem;
}

.inventory-cross-hero {
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid rgba(31, 71, 136, 0.15);
  background: var(--surface-elevated, #fff);
}

.inventory-cross-hero .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.inventory-cross-hero strong {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary, #0f172a);
}

.inventory-cross-hero p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

.inventory-cross-hero.critical {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.02) 100%);
  border-color: rgba(220, 38, 38, 0.3);
}

.inventory-cross-hero.critical strong { color: #b91c1c; }

.inventory-cross-hero.warn {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, rgba(217, 119, 6, 0.02) 100%);
  border-color: rgba(217, 119, 6, 0.3);
}

.inventory-cross-hero.warn strong { color: #b45309; }

.inventory-cross-hero.neutral {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.02) 100%);
  border-color: rgba(100, 116, 139, 0.25);
}

/* Tabs */
.inventory-cross-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.inventory-cross-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface-elevated, #fff);
  border: 1px solid rgba(31, 71, 136, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font: inherit;
  color: inherit;
}

.inventory-cross-tab .inv-tab-icon {
  grid-row: 1 / 3;
  font-size: 1.4rem;
  line-height: 1;
}

.inventory-cross-tab .inv-tab-body {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.inventory-cross-tab .inv-tab-body strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.15;
}

.inventory-cross-tab .inv-tab-sub {
  font-size: 0.7rem;
  color: var(--text-muted, #64748b);
  line-height: 1.25;
}

.inventory-cross-tab .inv-tab-count {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1;
}

.inventory-cross-tab .inv-tab-value {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  position: static;
  font-size: 0.65rem;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  margin: 0;
}

.inventory-cross-tab:hover {
  border-color: rgba(31, 71, 136, 0.4);
  transform: translateY(-1px);
}

.inventory-cross-tab.is-active {
  border-width: 2px;
  box-shadow: 0 4px 12px -4px rgba(31, 71, 136, 0.25);
}

.inventory-cross-tab.tone-critical.is-active { border-color: #dc2626; background: rgba(220, 38, 38, 0.06); }
.inventory-cross-tab.tone-warn.is-active     { border-color: #d97706; background: rgba(217, 119, 6, 0.06); }
.inventory-cross-tab.tone-ok.is-active       { border-color: #059669; background: rgba(5, 150, 105, 0.06); }
.inventory-cross-tab.tone-neutral.is-active  { border-color: #64748b; background: rgba(100, 116, 139, 0.06); }
.inventory-cross-tab.tone-muted.is-active    { border-color: #94a3b8; background: rgba(148, 163, 184, 0.06); }


.inventory-cross-bucket-note {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  border: 1px solid rgba(31, 71, 136, 0.15);
  background: var(--surface-elevated, #fff);
}

.inventory-cross-bucket-note.tone-critical { background: rgba(220, 38, 38, 0.05); border-color: rgba(220, 38, 38, 0.25); }
.inventory-cross-bucket-note.tone-warn     { background: rgba(217, 119, 6, 0.05); border-color: rgba(217, 119, 6, 0.25); }
.inventory-cross-bucket-note.tone-ok       { background: rgba(5, 150, 105, 0.05); border-color: rgba(5, 150, 105, 0.25); }
.inventory-cross-bucket-note.tone-neutral  { background: rgba(100, 116, 139, 0.05); }

.inv-bucket-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.inventory-cross-bucket-note strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
  margin-bottom: 0.15rem;
}

.inventory-cross-bucket-note p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
}

/* Cross table */
.inventory-cross-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(31, 71, 136, 0.1);
  background: var(--surface-elevated, #fff);
}

.inventory-cross-table {
  width: 100%;
  font-size: 0.85rem;
}

.inventory-cross-table th {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 0.6rem;
  white-space: nowrap;
}

.inventory-cross-table td {
  padding: 0.45rem 0.6rem;
  vertical-align: middle;
}

.inventory-cross-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inventory-cross-table .is-down { color: #b91c1c; font-weight: 600; }
.inventory-cross-table .is-up   { color: #b45309; font-weight: 600; }

.inventory-cross-table code {
  font-size: 0.8rem;
  background: rgba(31, 71, 136, 0.06);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

.cell-strong { font-weight: 500; color: var(--text-primary, #0f172a); }

.inventory-cross-more {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  text-align: center;
}

@media (max-width: 1100px) {
  .inventory-cross-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .inventory-cross-tabs {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Refinamiento general ─────────────────────────────────────────────────
   Hago el dashboard más limpio: oculto pills técnicos, mejoro tipografía
   y agrego respiro a las tarjetas */

/* Ocultar pill SAP y referencias técnicas */
.sap-live-pill { display: none !important; }

/* Refinar timestamps técnicos: que sean más sutiles */
.inventory-sap-timestamp {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Hero del resumen ejecutivo del portal */
.sap-live-banner {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--panel);
  border: 2px solid #cbd5e1;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.sap-live-banner-head {
  margin-bottom: 1rem;
}

.sap-live-caption {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.sap-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

/* Tiles coloreados por estado — default info (azul brand), crítico rojo, warn ámbar, ok verde */
.sap-live-tile {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  border: 2px solid var(--brand-blue-dark);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
  transition: all 0.18s ease;
  font: inherit;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.sap-live-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(27, 113, 136, 0.45);
}

.sap-live-tile.tone-critical {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border-color: #7f1d1d;
}
.sap-live-tile.tone-critical:hover {
  box-shadow: 0 8px 20px -6px rgba(220, 38, 38, 0.45);
}

.sap-live-tile.tone-warn {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  border-color: #78350f;
}
.sap-live-tile.tone-warn:hover {
  box-shadow: 0 8px 20px -6px rgba(217, 119, 6, 0.45);
}

.sap-live-tile.tone-ok {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #065f46;
}
.sap-live-tile.tone-ok:hover {
  box-shadow: 0 8px 20px -6px rgba(5, 150, 105, 0.45);
}

.sap-live-tile-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.sap-live-tile-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.sap-live-tile-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  margin-top: 0.15rem;
}

.sap-live-tile-caption {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sales-budget-bar { width: 100%; }
.sales-budget-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.sales-budget-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #059669);
  transition: width 0.3s ease;
}

/* Portal Simple — resumen del día limpio */
.portal-simple { display: flex; flex-direction: column; gap: 1.75rem; }

/* Grid de KPIs: dos tiers (primary jerárquico arriba, secondary debajo). */
.portal-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}
.portal-hero-primary {
  margin-bottom: 4px;
}
.portal-hero-secondary {
  margin-top: 4px;
}
.portal-hero-secondary .portal-hero-card {
  padding: 14px 16px;
  gap: 5px;
}
.portal-hero-secondary .portal-hero-card .portal-hero-value {
  font-size: clamp(1.1rem, 1.3vw + 0.35rem, 1.45rem);
}
.portal-hero-secondary .portal-hero-card .portal-hero-label {
  font-size: 0.7rem;
}
.portal-hero-secondary .portal-hero-card .portal-hero-stats li {
  font-size: 0.75rem;
}
@media (max-width: 1100px) {
  .portal-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .portal-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .portal-hero { grid-template-columns: 1fr; }
}
/* Cards del portal Inicio: cada tile con color sólido según su estado.
 * Default (info) = azul brand, warn = ámbar, critical = rojo, ok = verde, primary = azul hero.
 * Texto siempre blanco para máximo contraste. */
.portal-hero-card {
  background: linear-gradient(135deg, #1B7188 0%, #12546A 100%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 8px 20px -12px rgba(15, 23, 42, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.portal-hero-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}
/* Tier primario: ligeramente más prominente (valor mayor, padding extra, sombra suave) */
.portal-hero-primary .portal-hero-card {
  padding: 20px 22px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.14), 0 12px 28px -14px rgba(15, 23, 42, 0.28);
}
.portal-hero-primary .portal-hero-card .portal-hero-value {
  font-size: clamp(1.45rem, 1.9vw + 0.45rem, 1.95rem);
}
.portal-hero-primary .portal-hero-card.primary .portal-hero-value {
  font-size: clamp(1.75rem, 2.4vw + 0.5rem, 2.35rem);
}
.portal-hero-card.primary {
  background: linear-gradient(135deg, #1f4788 0%, #2563eb 100%);
}
.portal-hero-card.warn {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  border-color: rgba(255, 255, 255, 0.14);
}
.portal-hero-card.critical {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border-color: rgba(255, 255, 255, 0.14);
}
.portal-hero-card.ok {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: rgba(255, 255, 255, 0.14);
}
/* Todo el texto interno = blanco para contraste sobre color sólido */
.portal-hero-card .portal-hero-value,
.portal-hero-card .portal-hero-label,
.portal-hero-card .portal-hero-sub { color: #fff; }

.portal-hero-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
.portal-hero-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  vertical-align: middle;
}

/* Header de KPI (label + badge de snapshot apilados verticalmente) */
.portal-hero-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.portal-hero-head .portal-hero-label {
  flex: 0 0 auto;
}

/* Badge suave de "cartera congelada" / snapshot manual */
.portal-hero-stale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-hero-stale-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .portal-hero-stale {
    font-size: 0.62rem;
  }
}
.portal-hero-value {
  font-size: clamp(1.15rem, 1.35vw + 0.3rem, 1.55rem);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.01em;
  /* Mantener el número en una sola línea: las cifras tipo RD$7.66M no se deben partir. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.portal-hero-card.primary .portal-hero-value {
  /* Más compacto para que cifras tipo RD$45.85M / RD$7.66M no se rompan en iPad. */
  font-size: clamp(1.35rem, 1.6vw + 0.3rem, 1.85rem);
}
.portal-hero-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
}
/* Lista compacta de sub-métricas por tarjeta */
.portal-hero-stats {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.portal-hero-stats li {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 6px;
}
.portal-hero-stats li::before {
  content: "•";
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.portal-hero-stats li strong {
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.portal-hero-stats li em {
  font-style: normal;
  font-weight: 600;
  color: #ffffff;
}
.portal-hero-stats li strong.is-bad { color: #fecaca; }

/* Footer: responsable a la izquierda + link a la derecha */
.portal-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  gap: 8px;
  flex-wrap: wrap;
}
.portal-hero-owner {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}
.portal-hero-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.portal-hero-card:hover .portal-hero-link { text-decoration: underline; }
.portal-hero-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.portal-hero-bar-fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.portal-block-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}

.portal-alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.portal-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.portal-alert:hover { transform: translateY(-1px); border-color: rgba(37, 99, 235, 0.4); }
.portal-alert.tone-critical { border-left: 4px solid #dc2626; background: #fef2f2; }
.portal-alert.tone-warn { border-left: 4px solid #f59e0b; background: #fffbeb; }
.portal-alert-icon { font-size: 1.5rem; }
.portal-alert strong { display: block; font-size: 0.95rem; color: #0f172a; }
.portal-alert-sub { display: block; font-size: 0.8rem; color: #64748b; margin-top: 2px; }
.portal-empty {
  background: #f8fafc;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 14px 18px;
  color: #475569;
  font-size: 0.88rem;
}

.portal-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.portal-spark {
  display: block;
  margin: 4px 0 2px;
  opacity: 0.9;
}

.portal-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
}
.portal-trend.up { color: #d1fae5; background: rgba(255, 255, 255, 0.18); }
.portal-trend.down { color: #fecaca; background: rgba(0, 0, 0, 0.22); }

.portal-pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

/* Pulso del negocio — paneles con fondo sólido por función */
.pulse-panel {
  background: linear-gradient(135deg, #1B7188 0%, #12546A 100%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pulse-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.28);
}
/* Variantes por función (asignadas via clase adicional en JS) */
.pulse-panel.pulse-team {
  background: linear-gradient(135deg, #1f4788 0%, #1e3a8a 100%);
}
.pulse-panel.pulse-customers {
  background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
}
.pulse-panel.pulse-purchase {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.pulse-panel.pulse-product {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
}

.pulse-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.pulse-head h3 { margin: 2px 0 0; font-size: 1rem; color: #ffffff; }
.pulse-head .eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; font-weight: 700; }
.pulse-head .text-btn { font-size: 0.78rem; color: #ffffff; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; cursor: pointer; padding: 4px 10px; font-weight: 600; transition: background 0.15s ease; }
.pulse-head .text-btn:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; }

.pulse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pulse-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.pulse-row:last-child { border-bottom: 0; }
.pulse-rank {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.pulse-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pulse-info strong {
  font-size: 0.88rem;
  color: #ffffff;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pulse-info .muted { font-size: 0.72rem; color: rgba(255, 255, 255, 0.78); }
.pulse-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.pulse-value strong {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  white-space: nowrap;
}

.pulse-attention {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pulse-attention.warn { background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.42); }
.pulse-attention.danger { background: rgba(239, 68, 68, 0.22); border-color: rgba(239, 68, 68, 0.5); }
.pulse-attention strong { font-weight: 700; display: block; width: 100%; margin-bottom: 4px; color: #ffffff; }
.pulse-attention .muted { color: rgba(255, 255, 255, 0.75); }
.pulse-mini { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pulse-mini li { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.92); }
.pulse-mini li .muted { color: rgba(255, 255, 255, 0.7); }

.aging-panel {
  margin: 12px 0 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.aging-bar {
  display: flex;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.aging-seg { height: 100%; transition: opacity 0.15s; }
.aging-seg:hover { opacity: 0.85; }
.aging-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 16px;
  font-size: 0.78rem;
}
.aging-item { display: flex; align-items: center; gap: 8px; }
.aging-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.aging-item-label { color: #475569; font-weight: 500; min-width: 90px; }
.aging-item-value { color: #334155; font-variant-numeric: tabular-nums; }
.aging-item-value strong { color: #0f172a; }

/* ── Cobranza accionable ── */
.cobranza-actions-panel {
  margin: 14px 0 16px;
  padding: 16px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: 12px;
  border: 1px solid #fcd34d;
}
.cobranza-actions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.cobranza-actions-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #78350f;
}
.cobranza-actions-sub {
  font-size: 0.78rem;
  color: #92400e;
}
.cobranza-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.cobranza-action-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(252, 211, 77, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.2s, border-color 0.2s;
  min-height: 220px;
}
.cobranza-action-card.is-actioned {
  opacity: 0.7;
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.cobranza-action-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cobranza-action-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cobranza-priority {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cobranza-priority-urgent { background: #fee2e2; color: #991b1b; }
.cobranza-priority-high { background: #fef3c7; color: #92400e; }
.cobranza-priority-mid { background: #e0f2fe; color: #075985; }
.cobranza-priority-low { background: #f1f5f9; color: #475569; }
.cobranza-action-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}
.cobranza-action-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #b91c1c;
  font-variant-numeric: tabular-nums;
}
.cobranza-action-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #64748b;
  gap: 6px;
}
.cobranza-recovery { font-weight: 600; }
.cobranza-action-vendor {
  font-size: 0.74rem;
  color: #475569;
  padding: 4px 0;
  border-top: 1px dashed #e2e8f0;
  margin-top: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cobranza-action-status {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  width: fit-content;
}
.cobranza-status-contactado { background: #dcfce7; color: #166534; }
.cobranza-status-no_contactado { background: #f1f5f9; color: #475569; }
.cobranza-status-mensaje { background: #ccfbf1; color: #0f766e; }
.cobranza-status-promesa { background: #dbeafe; color: #1e40af; }
.cobranza-status-nota { background: #fef9c3; color: #854d0e; }
.cobranza-status-visita { background: #f3e8ff; color: #6b21a8; }
.cobranza-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.cobranza-btn {
  font-size: 0.7rem;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cobranza-btn:hover { border-color: #2563eb; color: #2563eb; }
.cobranza-btn.is-active.contactado { background: #16a34a; color: #fff; border-color: #16a34a; }
.cobranza-btn.is-active.no_contactado { background: #64748b; color: #fff; border-color: #64748b; }
.cobranza-btn.is-active.mensaje { background: #0d9488; color: #fff; border-color: #0d9488; }
.cobranza-btn.is-active.promesa { background: #2563eb; color: #fff; border-color: #2563eb; }
.cobranza-btn.is-active.visita { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* Menú compacto ejecutivo (1 click → opciones) */
.cobranza-card-menu {
  margin-top: 8px;
  position: relative;
}
.cobranza-card-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #64748b);
  padding: 6px 10px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 6px;
  text-align: center;
  user-select: none;
  transition: all 0.15s;
}
.cobranza-card-menu summary::-webkit-details-marker { display: none; }
.cobranza-card-menu summary:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: #2563eb;
  color: #2563eb;
}
.cobranza-card-menu[open] summary {
  background: rgba(37, 99, 235, 0.08);
  border-color: #2563eb;
  color: #2563eb;
}
.cobranza-card-menu-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.cobranza-menu-opt {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #0f172a);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s;
}
.cobranza-menu-opt:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
}
.cobranza-menu-opt.is-active {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font-weight: 600;
}
.cobranza-menu-opt.is-dismiss:hover {
  background: rgba(156, 163, 175, 0.18);
  color: #6b7280;
}
.cobranza-menu-opt.is-dismiss.is-active {
  background: #6b7280;
  border-color: #6b7280;
}

/* ── Nota inline (Cobranza / Dormidos) ──────────────────────────── */
.cobranza-action-note {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text, #0f172a);
  word-break: break-word;
}
.cobranza-action-note small {
  font-weight: 500;
  color: var(--muted, #64748b);
}
.cobranza-note-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  background: rgba(148, 163, 184, 0.06);
  border-radius: 8px;
  border: 1px dashed var(--border, rgba(148, 163, 184, 0.35));
}
.cobranza-note-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #64748b);
  display: flex;
  gap: 4px;
  align-items: center;
}
.cobranza-note-label small {
  font-weight: 400;
  opacity: 0.7;
}
.cobranza-note-input {
  width: 100%;
  resize: vertical;
  min-height: 50px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.4;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
}
.cobranza-note-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.cobranza-note-actions {
  display: flex;
  gap: 6px;
}
.cobranza-note-save {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.cobranza-note-save:hover { background: #1d4ed8; }
.cobranza-note-clear {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
  transition: all 0.15s;
}
.cobranza-note-clear:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}

/* Activity log con notas */
.cobranza-activity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cobranza-activity-note {
  margin-top: 4px;
  margin-left: 4px;
  padding: 4px 8px;
  background: rgba(251, 191, 36, 0.08);
  border-left: 2px solid rgba(251, 191, 36, 0.5);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text, #0f172a);
  font-style: italic;
}
.cobranza-activity-note small {
  font-style: normal;
  color: var(--muted, #64748b);
  font-weight: 500;
}
.cobranza-status-note {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #b45309 !important;
}

/* ── Backorders ──────────────────────────────────────────────────── */
.backorders-empty {
  text-align: center;
  padding: 60px 20px;
}
.backorders-empty-icon { font-size: 56px; margin-bottom: 12px; }
.backorders-empty h2 { margin: 8px 0; }
.backorders-empty p { color: var(--muted, #64748b); max-width: 400px; margin: 0 auto; }

.backorder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.backorder-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.backorder-card:hover {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}
.backorder-card.is-urgent {
  border-left: 4px solid #ef4444;
}
.backorder-rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border-radius: 8px;
}
.backorder-main {
  min-width: 0;
}
.backorder-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backorder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.backorder-meta strong { color: var(--text, #0f172a); }
.backorder-aged {
  color: #dc2626;
  font-weight: 600;
}
.backorder-rejected {
  color: #b45309;
  background: rgba(251, 191, 36, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.backorder-value {
  font-size: 15px;
  font-weight: 700;
  color: #dc2626;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .backorder-card { grid-template-columns: 32px 1fr; }
  .backorder-value { grid-column: 1/-1; text-align: right; }
}

/* Devoluciones · gráfico mensual + tasa */
.devol-monthly-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  padding: 16px;
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  min-height: 240px;
}
.devol-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  text-align: center;
}
.devol-month-bar-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.devol-month-bar {
  width: 80%;
  min-height: 6px;
  border-radius: 6px 6px 0 0;
  transition: opacity .15s ease;
}
.devol-month-bar:hover { opacity: .8; }
.devol-month-rate {
  font-weight: 700;
  font-size: 11px;
  color: var(--text, #0f172a);
}
.devol-month-label {
  color: var(--muted, #64748b);
  font-weight: 500;
}
.devol-month-value {
  font-size: 9px;
  color: var(--muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.devol-rate-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.devol-rate-calm { background: rgba(16, 185, 129, 0.12); color: #047857; }
.devol-rate-warning { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.devol-rate-urgent { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }

@media (max-width: 720px) {
  .devol-monthly-chart {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 200px;
  }
}

/* Cartera por vendedor */
.cobranza-vendor-panel {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.cobranza-vendor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cobranza-vendor-head h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}
.cobranza-vendor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cobranza-vendor-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 2fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 0.82rem;
}
.cobranza-vendor-info strong { display: block; color: #0f172a; line-height: 1.2; }
.cobranza-vendor-info .cell-sub { font-size: 0.72rem; }
.cobranza-vendor-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.cobranza-vendor-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #dc2626);
  border-radius: 999px;
}
.cobranza-vendor-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}
@media (max-width: 640px) {
  .cobranza-vendor-row { grid-template-columns: 1fr; }
  .cobranza-vendor-bar { display: none; }
}

/* Log de actividad reciente */
.cobranza-activity-log {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #eff6ff;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
}
.cobranza-activity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cobranza-activity-head h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e3a8a;
}
.cobranza-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cobranza-activity-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px;
  font-size: 0.82rem;
  border: 1px solid #dbeafe;
}
.cobranza-activity-list li strong { color: #0f172a; }
.cobranza-activity-list .cobranza-activity-status {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
.pulse-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pulse-mini li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}
.pulse-mini li .muted { color: #64748b; }

.pill.is-up { color: #047857; background: rgba(5, 150, 105, 0.12); }
.pill.is-down { color: #b91c1c; background: rgba(220, 38, 38, 0.12); }
.pulse-panel .pill.is-up { color: #d1fae5; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.28); }
.pulse-panel .pill.is-down { color: #fecaca; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.18); }
.pulse-panel .portal-trend.up { color: #d1fae5; background: rgba(255, 255, 255, 0.18); }
.pulse-panel .portal-trend.down { color: #fecaca; background: rgba(0, 0, 0, 0.22); }
.pill.is-flat { color: #92400e; background: rgba(245, 158, 11, 0.15); }

.portal-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.92rem;
  color: #0f172a;
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.portal-quick-btn span:first-child { font-size: 1.25rem; }
.portal-quick-btn:hover { border-color: rgba(37, 99, 235, 0.4); transform: translateY(-1px); }

/* Team Plan KPIs y tabla simple */
.team-plan-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 1.25rem;
}
.team-kpi {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-kpi .eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin: 0;
}
.team-kpi strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.team-kpi .cell-sub { font-size: 0.78rem; color: #64748b; }
.team-kpi.is-ok { border-left: 4px solid #059669; }
.team-kpi.is-down { border-left: 4px solid #dc2626; }

.team-plan-table input.team-plan-single {
  width: 100%;
  min-width: 240px;
  height: 36px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  color: #0f172a;
  background: #fff;
}
.team-plan-table input.team-plan-single:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ── Plan Semanal v2 ──────────────────────────────────────────────────── */
/* Wrapper que limita ancho para que no se estire en pantallas ultra anchas */
.plan-semanal-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  justify-self: stretch;
  display: block;
}

.plan-week-nav {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
  color: #f8fafc;
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}
.plan-week-nav .ghost-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f8fafc;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}
.plan-week-nav .ghost-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.plan-week-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.plan-week-label strong {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.plan-week-label .cell-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}
.plan-week-tag {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}
.plan-week-tag.is-current {
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.plan-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 1.5rem;
}
.plan-kpi {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.plan-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.plan-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}
.plan-kpi.is-ok::before { background: linear-gradient(90deg, #059669, #10b981); }
.plan-kpi.is-down::before { background: linear-gradient(90deg, #dc2626, #ef4444); }
.plan-kpi .eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.plan-kpi strong {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.plan-kpi .cell-sub {
  font-size: 0.8rem;
  color: #64748b;
}

.plan-focus-panel {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.05);
}
.plan-focus-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
}
.plan-focus-panel header h3 {
  margin: 4px 0 4px;
  font-size: 1.2rem;
  color: #0f172a;
  font-weight: 700;
}
.plan-focus-panel header .eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2563eb;
  margin: 0;
}
.plan-focus-panel header .cell-sub {
  color: #64748b;
  font-size: 0.8rem;
  margin: 0;
}
.plan-focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.plan-focus-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 120ms ease;
}
.plan-focus-field:hover {
  border-color: rgba(37, 99, 235, 0.3);
}
.plan-focus-field:nth-child(5) {
  grid-column: 1 / -1;
}
.plan-focus-field > span {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-focus-icon {
  font-size: 1.15rem;
}
.plan-focus-field textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  background: #fafbfc;
  color: #0f172a;
  resize: vertical;
  min-height: 56px;
}
.plan-focus-field textarea:focus {
  outline: none;
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.plan-focus-field textarea:read-only {
  background: #f1f5f9;
  color: #475569;
  cursor: default;
}
.plan-save-focus {
  white-space: nowrap;
}

.plan-sellers {
  margin-bottom: 1.5rem;
}
.plan-sellers .panel-heading {
  margin-bottom: 1rem;
  padding: 0 4px;
}
.plan-sellers .panel-heading h3 {
  margin: 4px 0;
  font-size: 1.2rem;
  color: #0f172a;
  font-weight: 700;
}
.plan-sellers .panel-heading .eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2563eb;
}
.plan-seller-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 150ms ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.plan-seller-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
}
.plan-seller-card[open] {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  border-color: rgba(37, 99, 235, 0.3);
}
.plan-seller-card.is-own {
  border-left: 4px solid #2563eb;
  background: linear-gradient(135deg, #eff6ff 0%, #fff 60%);
}
.plan-seller-card summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 48px minmax(170px, 1.2fr) minmax(440px, 2fr) auto 28px;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.plan-seller-card summary::-webkit-details-marker { display: none; }
.plan-seller-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  font-size: 0.95rem;
  font-weight: 800;
  color: #475569;
}
.plan-seller-card.is-own .plan-seller-rank {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
}
.plan-seller-id strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.plan-seller-id .cell-sub {
  font-size: 0.78rem;
  color: #64748b;
}
.plan-seller-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.plan-seller-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f8fafc;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.04);
}
.plan-seller-card.is-own .plan-seller-stat {
  background: rgba(255, 255, 255, 0.7);
}
.plan-seller-stat .eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 2px;
}
.plan-seller-stat strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.plan-pct.is-ok { color: #059669; }
.plan-pct.is-watch { color: #d97706; }
.plan-pct.is-down { color: #dc2626; }
.plan-pct.is-muted { color: #cbd5e1; }
.plan-seller-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  font-size: 0.85rem;
  color: #64748b;
  transition: all 150ms ease;
}
.plan-seller-card:hover .plan-seller-toggle {
  background: #dbeafe;
  color: #2563eb;
}
.plan-seller-card[open] .plan-seller-toggle {
  transform: rotate(180deg);
  background: #2563eb;
  color: #fff;
}
.plan-seller-body {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding: 20px 22px;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.plan-seller-card.is-own .plan-seller-body {
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.plan-seller-goals {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.plan-seller-goals label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-seller-goals .eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.plan-seller-goals input {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.plan-seller-goals input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.plan-seller-goals input:read-only {
  background: #f1f5f9;
  color: #475569;
  cursor: default;
}
.plan-seller-meta {
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: right;
}
.plan-days-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.plan-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 12px;
  transition: border-color 120ms ease;
}
.plan-day:hover {
  border-color: rgba(37, 99, 235, 0.3);
}
.plan-day-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plan-day-label::before {
  content: "📅";
  font-size: 0.95rem;
}
.plan-day textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fafbfc;
  color: #0f172a;
  resize: vertical;
  min-height: 72px;
  font-size: 0.85rem;
}
.plan-day textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.plan-day textarea:read-only {
  background: #f8fafc;
  color: #475569;
  cursor: default;
}
.plan-review-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-review-field .eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.plan-review-field textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  padding: 10px;
  font: inherit;
  background: #fff;
  color: #0f172a;
  resize: vertical;
  min-height: 72px;
}
.plan-review-field textarea:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.plan-review-field textarea:read-only {
  background: #f8fafc;
  color: #475569;
  cursor: default;
}
.plan-seller-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.plan-team-review {
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
  border: 1px solid #fbbf24;
  border-left: 4px solid #d97706;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 1.5rem;
}
.plan-team-review header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.plan-team-review header h3 {
  margin: 4px 0 2px;
  font-size: 1.1rem;
  color: #78350f;
}
.plan-team-review header .eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d97706;
  margin: 0;
}
.plan-team-review header .cell-sub {
  color: #92400e;
  font-size: 0.78rem;
  margin: 0;
}
.plan-team-review textarea {
  width: 100%;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  background: #fff;
  color: #0f172a;
  resize: vertical;
  min-height: 100px;
}
.plan-team-review textarea:focus {
  outline: none;
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}
.plan-team-review textarea:read-only {
  background: #fffbeb;
  color: #78350f;
  cursor: default;
}

/* Responsive: en pantallas medianas, KPIs y foco a 2 columnas */
@media (max-width: 1100px) {
  .plan-kpis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan-week-nav {
    grid-template-columns: auto 1fr auto;
  }
  .plan-week-nav [data-plan-week-today] {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .plan-seller-card summary {
    grid-template-columns: 40px minmax(160px, 1fr) 28px;
    grid-template-rows: auto auto;
  }
  .plan-seller-stats {
    grid-column: 1 / -1;
    gap: 8px;
    margin-top: 8px;
  }
  .plan-days-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan-days-grid .plan-day:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* Mobile: una sola columna */
@media (max-width: 680px) {
  .plan-kpis-grid {
    grid-template-columns: 1fr;
  }
  .plan-focus-grid {
    grid-template-columns: 1fr;
  }
  .plan-focus-field:nth-child(5) {
    grid-column: 1;
  }
  .plan-week-nav {
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }
  .plan-week-label {
    grid-column: 1 / -1;
    order: -1;
  }
  .plan-seller-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan-days-grid {
    grid-template-columns: 1fr;
  }
  .plan-seller-goals {
    grid-template-columns: 1fr;
  }
  .plan-seller-meta {
    text-align: left;
  }
}

/* Tema oscuro */
[data-theme="dark"] .plan-kpi {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .plan-kpi strong { color: #f8fafc; }
[data-theme="dark"] .plan-kpi .eyebrow,
[data-theme="dark"] .plan-kpi .cell-sub { color: #94a3b8; }

[data-theme="dark"] .plan-focus-panel {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
  border-color: #1e40af;
}
[data-theme="dark"] .plan-focus-panel header h3 { color: #f8fafc; }
[data-theme="dark"] .plan-focus-panel header .cell-sub { color: #cbd5e1; }
[data-theme="dark"] .plan-focus-field > span { color: #e2e8f0; }
[data-theme="dark"] .plan-focus-field textarea {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}
[data-theme="dark"] .plan-focus-field textarea:read-only {
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}

[data-theme="dark"] .plan-seller-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .plan-seller-card.is-own {
  background: rgba(37, 99, 235, 0.15);
}
[data-theme="dark"] .plan-seller-id strong { color: #f8fafc; }
[data-theme="dark"] .plan-seller-stat strong { color: #f8fafc; }
[data-theme="dark"] .plan-seller-body {
  background: #0f172a;
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .plan-seller-card.is-own .plan-seller-body {
  background: rgba(37, 99, 235, 0.08);
}
[data-theme="dark"] .plan-seller-goals input,
[data-theme="dark"] .plan-day textarea,
[data-theme="dark"] .plan-review-field textarea {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}
[data-theme="dark"] .plan-seller-goals input:read-only,
[data-theme="dark"] .plan-day textarea:read-only,
[data-theme="dark"] .plan-review-field textarea:read-only {
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
}

[data-theme="dark"] .plan-team-review {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.18) 0%, rgba(120, 53, 15, 0.18) 100%);
  border-color: rgba(217, 119, 6, 0.4);
}
[data-theme="dark"] .plan-team-review header h3 { color: #fcd34d; }
[data-theme="dark"] .plan-team-review header .cell-sub { color: #fde68a; }
[data-theme="dark"] .plan-team-review textarea {
  background: #1e293b;
  border-color: rgba(217, 119, 6, 0.4);
  color: #f8fafc;
}
[data-theme="dark"] .plan-team-review textarea:read-only {
  background: rgba(255, 255, 255, 0.04);
  color: #fde68a;
}

/* Acuerdos comerciales — explicación + tabla limpia */
.acuerdos-explainer {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #bfdbfe;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  color: #1e293b;
  line-height: 1.55;
}
.acuerdos-explainer p { margin: 0; }
.acuerdos-explainer strong { color: #1e3a8a; }

.acuerdo-type {
  display: inline-block;
  background: #eef2ff;
  color: #3730a3;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.acuerdo-row-incomplete td {
  background: rgba(254, 243, 199, 0.35);
}
.acuerdo-incomplete-badge {
  margin-top: 0.35rem;
  font-size: 0.72rem;
}
.cell-muted { color: #94a3b8; font-style: italic; }
.acuerdo-vence { display: block; line-height: 1.3; }
.acuerdo-vence.is-down { color: #b91c1c; }
.acuerdo-vence.is-flat { color: #b45309; }
.acuerdo-vence.is-up { color: #047857; }

.inventory-controls-search-first { margin-bottom: 0.75rem; }
.inventory-search-wide {
  flex: 1 1 100%;
  min-width: min(100%, 420px);
}
.inventory-search-wide input[type="search"] {
  width: 100%;
  max-width: 520px;
}

/* Panels VA05 / Cartera — más respiro y tipografía clara */
.sap-va05-panel,
.sap-cartera-panel {
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--surface-elevated, #ffffff);
}

.sap-va05-panel .panel-heading,
.sap-cartera-panel .panel-heading {
  margin-bottom: 1.1rem;
  border: none;
  padding: 0;
}

.sap-va05-panel .panel-heading h3,
.sap-cartera-panel .panel-heading h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.2rem 0 0;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.01em;
}

.sap-va05-panel .panel-heading .eyebrow,
.sap-cartera-panel .panel-heading .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 700;
  margin: 0;
}

.sap-va05-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.005em;
}

.sap-mini-table {
  border-spacing: 0;
}

.sap-mini-table thead th {
  background: rgba(15, 23, 42, 0.025);
  color: var(--text-muted, #64748b);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.sap-mini-table tbody tr:hover {
  background: rgba(31, 71, 136, 0.025);
}

.sap-mini-table tbody td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  font-size: 0.85rem;
}

.sap-mini-table tbody tr:last-child td {
  border-bottom: none;
}

.sap-mini-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sap-mini-table th.num {
  text-align: right;
}

.cell-rank {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  width: 1.5rem;
}

.sap-mini-table code {
  font-size: 0.78rem;
  background: rgba(31, 71, 136, 0.06);
  color: var(--text-primary, #1e293b);
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;
  font-weight: 500;
}

.sap-mini-table .tag-pill {
  font-size: 0.66rem;
  padding: 0.15rem 0.5rem;
  background: rgba(31, 71, 136, 0.08);
  color: var(--text-muted, #475569);
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* KPIs en panels — más prominentes */
.sap-va05-kpis,
.sap-cartera-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  padding: 0;
}

.sap-va05-kpis > div,
.sap-cartera-kpis > div {
  background: linear-gradient(135deg, rgba(31, 71, 136, 0.04) 0%, transparent 100%);
  border: 1px solid rgba(31, 71, 136, 0.1);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sap-va05-kpis .eyebrow,
.sap-cartera-kpis .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 700;
}

.sap-va05-kpis strong,
.sap-cartera-kpis strong {
  font-size: 1.2rem;
  color: var(--text-primary, #0f172a);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* Panel del cruce de inventario */
.inventory-cross-panel {
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--surface-elevated, #ffffff);
}

.inventory-cross-panel .panel-heading {
  margin-bottom: 1.25rem;
  border: none;
  padding: 0;
}

.inventory-cross-panel .panel-heading h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.2rem 0 0;
  letter-spacing: -0.01em;
}

.inventory-cross-panel .panel-heading .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 700;
}

.inventory-cross-hero {
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
}

.inventory-cross-hero strong {
  font-size: 2.4rem;
  letter-spacing: -0.02em;
}


.inventory-cross-bucket-note {
  padding: 1rem 1.15rem;
}

.inventory-cross-bucket-note strong {
  font-size: 1rem;
  font-weight: 700;
}

.inventory-cross-bucket-note p {
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Tabla del cruce — más legible */
.inventory-cross-table {
  font-size: 0.86rem;
}

.inventory-cross-table thead th {
  background: rgba(15, 23, 42, 0.025);
  color: var(--text-muted, #64748b);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.inventory-cross-table tbody td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.inventory-cross-table tbody tr:last-child td {
  border-bottom: none;
}

.inventory-cross-table tbody tr:hover {
  background: rgba(31, 71, 136, 0.03);
}

.inventory-cross-table .cell-strong {
  font-weight: 500;
  color: var(--text-primary, #1e293b);
}

/* Panel "Catálogo completo" — más limpio */
.inventory-control {
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}

.inventory-control .panel-heading {
  margin-bottom: 1.1rem;
  border: none;
  padding: 0;
}

.inventory-control .panel-heading h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.2rem 0 0;
  letter-spacing: -0.01em;
}

.inventory-control .panel-heading .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 700;
}

.inventory-filter-hint {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
  max-width: 52rem;
}

/* Signal grid (KPIs del inventario detallado) */
.inventory-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.3rem;
}

.inventory-signal-grid > div {
  background: linear-gradient(135deg, rgba(31, 71, 136, 0.04) 0%, transparent 100%);
  border: 1px solid rgba(31, 71, 136, 0.1);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.inventory-signal-grid span {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 700;
}

.inventory-signal-grid strong {
  font-size: 1.3rem;
  color: var(--text-primary, #0f172a);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ─── Tabla de Compras refinada ────────────────────────────────────────── */

.purchase-content .table-shell {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--surface-elevated, #fff);
}

.purchases-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.purchases-table--approval {
  min-width: 1180px;
}

.purchases-table--approval .description-cell {
  max-width: 220px;
}

.purchases-table--approval .advance-desc-sub {
  max-width: 180px;
  white-space: normal;
  text-align: right;
  line-height: 1.3;
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
}

.purchases-table thead th {
  background: rgba(15, 23, 42, 0.03);
  color: var(--text-muted, #64748b);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
}

.purchases-table thead th.col-num {
  text-align: right;
}

.purchases-table thead th.col-action {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.purchases-table tbody td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: middle;
  font-size: 0.88rem;
}

.purchases-table tbody tr:last-child td { border-bottom: none; }

.purchases-table tbody tr:hover {
  background: rgba(31, 71, 136, 0.025);
}

.purchases-table tbody tr.is-late {
  background: rgba(220, 38, 38, 0.04);
}

.purchases-table tbody tr.is-late:hover {
  background: rgba(220, 38, 38, 0.07);
}

.purchases-table .description-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary, #1e293b);
}

.purchases-table .text-order {
  background: transparent;
  border: none;
  color: var(--brand, #1f4788);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
}

.purchases-table .text-order:hover { text-decoration: underline; }

/* Celda de monto consolidada */
.amount-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.amount-cell > strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.15;
}

.amount-cell .amount-sub {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.2;
}

.amount-cell .pay-state.ok {
  color: #047857;
  font-weight: 600;
}

.amount-cell .pay-state.pending {
  color: #b45309;
  font-weight: 600;
}

.amount-cell .pay-terms {
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
}

.purchases-table .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.purchases-table .col-action {
  white-space: nowrap;
  width: 1%;
}

.purchases-table .row-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Pill de estatus más legible */
.purchases-table .pill {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.purchases-table .pill.sap-pill {
  background: #0d6e4f;
  color: #fff;
  margin-right: 0.25rem;
  font-size: 0.58rem;
  vertical-align: middle;
}

/* Métricas del módulo Compras: más espaciado y mejor tipografía */
.purchase-content .metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.purchase-content .metric {
  background: var(--surface-elevated, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 0.95rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
}

.purchase-content .metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand, #1f4788);
}

.purchase-content .metric.urgent::before { background: #dc2626; }
.purchase-content .metric.warning::before { background: #f59e0b; }
.purchase-content .metric.danger::before { background: #dc2626; }
.purchase-content .metric.calm::before { background: #059669; }

.purchase-content .metric span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  font-weight: 700;
}

.purchase-content .metric strong {
  font-size: 1.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
}

/* Tabs (subtabs) más limpios */
.purchase-content .subtabs,
.work-panel .subtabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

.purchase-content .subtab,
.work-panel .subtab {
  background: transparent;
  border: none;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.15s, border-color 0.15s;
}

.purchase-content .subtab:hover,
.work-panel .subtab:hover {
  color: var(--text-primary, #1e293b);
}

.purchase-content .subtab.is-active,
.purchase-content .subtab[aria-selected="true"],
.work-panel .subtab.is-active,
.work-panel .subtab[aria-selected="true"] {
  color: var(--brand, #1f4788);
  border-bottom-color: var(--brand, #1f4788);
}

.purchase-content .subtab-count,
.work-panel .subtab-count {
  background: rgba(15, 23, 42, 0.08);
  color: var(--text-primary, #475569);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  min-width: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.purchase-content .subtab.is-active .subtab-count,
.work-panel .subtab.is-active .subtab-count {
  background: var(--brand, #1f4788);
  color: #fff;
}

/* Calendario de pagos: barras con color según urgencia */
.pagos-week-bar-fill.is-overdue {
  background: linear-gradient(180deg, #dc2626, #ef4444);
}

.pagos-week-bar-fill.is-soon {
  background: linear-gradient(180deg, #f59e0b, #fbbf24);
}

.pagos-week-amount.is-overdue {
  color: #dc2626;
}

.pagos-week-amount.is-soon {
  color: #b45309;
}

.pagos-week-bar {
  background: rgba(31, 71, 136, 0.06);
  border: 1px solid rgba(31, 71, 136, 0.08);
}

/* Toolbar de filtros */
.purchase-content .toolbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.purchase-content .toolbar select {
  font-size: 0.85rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: var(--surface-elevated, #fff);
  color: var(--text-primary, #1e293b);
  font-weight: 500;
}

/* Mini buttons */
.purchases-table .mini-btn,
.purchases-table .danger-btn {
  background: var(--surface-elevated, #fff);
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: var(--text-primary, #1e293b);
  padding: 0.32rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.purchases-table .mini-btn:hover {
  background: rgba(31, 71, 136, 0.06);
  border-color: rgba(31, 71, 136, 0.3);
  color: var(--brand, #1f4788);
}

.purchases-table .danger-btn {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
}

.purchases-table .danger-btn:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.4);
}

/* Leaderboard: destacado sutil, sin fondo dorado agresivo */
.nav-item-featured {
  border-color: rgba(148, 163, 184, 0.25);
}
.nav-item-featured:hover {
  background: rgba(148, 163, 184, 0.08);
}
.nav-item-featured.active {
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.leaderboard {
  display: grid;
  gap: 24px;
  padding: 8px 0 32px;
}
.lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.lb-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lb-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.lb-period-pills {
  display: flex;
  gap: 6px;
  background: rgba(148, 163, 184, 0.12);
  padding: 4px;
  border-radius: 12px;
}
.lb-period {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text, #0f172a);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.lb-period:hover {
  background: rgba(148, 163, 184, 0.15);
}
.lb-period.is-active {
  background: var(--surface, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  color: #f59e0b;
}

.lb-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.lb-summary-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lb-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #64748b);
  font-weight: 600;
}
.lb-summary-card strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.lb-podium {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 20px;
  align-items: end;
}
.lb-podium-card {
  background: var(--surface, #fff);
  border: 2px solid;
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.lb-podium-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: currentColor;
  opacity: 0.6;
}
.lb-podium-card.gold {
  border-color: #fbbf24;
  color: #b45309;
  transform: translateY(-12px);
  box-shadow: 0 12px 24px -8px rgba(251, 191, 36, 0.4);
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.4), var(--surface, #fff) 60%);
}
.lb-podium-card.silver {
  border-color: #94a3b8;
  color: #475569;
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.4), var(--surface, #fff) 60%);
}
.lb-podium-card.bronze {
  border-color: #f97316;
  color: #9a3412;
  background: linear-gradient(180deg, rgba(254, 215, 170, 0.4), var(--surface, #fff) 60%);
}
.lb-podium-medal {
  font-size: 42px;
  line-height: 1;
}
.lb-podium-rank {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lb-podium-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #0f172a);
  line-height: 1.2;
}
.lb-podium-sales {
  font-size: 24px;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.lb-podium-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  color: var(--muted, #64748b);
}
.lb-podium-move {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: center;
}
.lb-podium-move.up,
.lb-row-move.up { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.lb-podium-move.down,
.lb-row-move.down { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.lb-podium-move.same,
.lb-row-move.same { background: rgba(148, 163, 184, 0.15); color: #64748b; }
.lb-podium-move.new,
.lb-row-move.new { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.lb-podium-growth {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.lb-podium-growth.up { color: #16a34a; }
.lb-podium-growth.down { color: #dc2626; }

.lb-list-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 16px;
  padding: 20px 8px;
}
.lb-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.18));
}
.lb-list-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.lb-list-header span {
  font-size: 11px;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 48px 90px 1fr 160px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.10));
}
.lb-row:last-child { border-bottom: none; }
.lb-row-rank {
  font-size: 16px;
  font-weight: 800;
  color: var(--muted, #64748b);
}
.lb-row-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  justify-content: center;
}
.lb-row-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
}
.lb-row-meta {
  font-size: 11px;
  color: var(--muted, #64748b);
}
.lb-row-bar {
  margin-top: 6px;
  height: 4px;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.lb-row-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ec4899);
  border-radius: 999px;
}
.lb-row-sales {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-row-sales strong {
  font-size: 15px;
  font-weight: 700;
}
.lb-row-growth {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.lb-row-growth.up { color: #16a34a; }
.lb-row-growth.down { color: #dc2626; }
.lb-row-growth.new { color: #2563eb; }

.lb-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 16px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px dashed var(--border, rgba(148, 163, 184, 0.3));
  border-radius: 12px;
  color: var(--text, #0f172a);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.lb-toggle:hover {
  background: rgba(148, 163, 184, 0.15);
}
.lb-footer {
  text-align: center;
  color: var(--muted, #64748b);
}
.lb-footer small {
  font-size: 12px;
  line-height: 1.5;
}
.leaderboard-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--surface, #fff);
  border-radius: 16px;
  border: 1px dashed var(--border, rgba(148, 163, 184, 0.3));
}

.sap-stale-alert {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.sap-stale-alert strong { color: #c2410c; }
.sap-stale-alert span { color: var(--text, #0f172a); font-size: 12px; line-height: 1.5; }
.sap-stale-alert em { font-style: normal; color: var(--muted, #64748b); font-size: 11px; }

/* ── Chat del equipo ───────────────────────────────────────── */
.nav-item-chat {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(124, 58, 237, 0.06));
  border-color: rgba(14, 165, 233, 0.2);
}
.nav-item-chat:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(124, 58, 237, 0.12));
}
.nav-item-chat strong.has-unread {
  background: #ef4444;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  animation: chat-pulse 2s ease-in-out infinite;
}
@keyframes chat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.chat-view {
  padding: 8px 0 0;
  height: calc(100vh - 180px);
  min-height: 500px;
}
.chat-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  height: 100%;
}
.chat-sidebar {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.chat-sidebar-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #64748b);
}
.chat-sidebar-header p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}
.chat-channel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: var(--text, #0f172a);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-channel:hover {
  background: rgba(148, 163, 184, 0.08);
}
.chat-channel.is-active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(124, 58, 237, 0.12));
  border-color: rgba(14, 165, 233, 0.3);
  font-weight: 600;
}
.chat-channel-emoji {
  font-size: 18px;
  flex-shrink: 0;
}
.chat-channel-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-channel-count {
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  background: transparent;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
}
.chat-channel-count.has-unread {
  background: #ef4444;
  color: #fff;
}
@media (max-width: 768px) {
  .chat-shell { grid-template-columns: 1fr; }
  .chat-sidebar { max-height: 160px; }
  .chat-channel-list { flex-direction: row; flex-wrap: wrap; }
  .chat-channel { flex: 1 1 calc(50% - 4px); min-width: 140px; }
}
.chat-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  flex-wrap: wrap;
  gap: 12px;
}
.chat-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.chat-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.chat-status {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.chat-status.is-ok { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.chat-status.is-off { background: rgba(251, 146, 60, 0.15); color: #c2410c; }

.chat-list {
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted, #64748b);
}
.chat-empty strong {
  display: block;
  font-size: 16px;
  color: var(--text, #0f172a);
  margin-bottom: 6px;
}
.chat-empty p { margin: 0; font-size: 13px; }

.chat-day-sep {
  text-align: center;
  margin: 8px 0;
  position: relative;
}
.chat-day-sep::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border, rgba(148, 163, 184, 0.2));
}
.chat-day-sep span {
  position: relative;
  background: var(--surface, #fff);
  padding: 2px 12px;
  font-size: 11px;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.chat-msg.is-mine {
  flex-direction: row-reverse;
}
.chat-msg.is-mine .chat-bubble {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.chat-msg.is-mine .chat-bubble header strong,
.chat-msg.is-mine .chat-bubble .chat-role,
.chat-msg.is-mine .chat-bubble .chat-time { color: rgba(255, 255, 255, 0.85); }
.chat-msg.is-unread .chat-bubble {
  border: 2px solid #2563eb;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.chat-bubble {
  background: rgba(148, 163, 184, 0.10);
  padding: 8px 12px 10px;
  border-radius: 4px 14px 14px 14px;
  max-width: 70%;
  position: relative;
}
.chat-bubble header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.chat-bubble header strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #0f172a);
}
.chat-role {
  font-size: 11px;
  color: var(--muted, #64748b);
  font-weight: 500;
}
.chat-time {
  font-size: 10px;
  color: var(--muted, #94a3b8);
  margin-left: auto;
}
.chat-text {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.chat-delete {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  font-weight: 700;
}
.chat-delete:hover { opacity: 1; color: #dc2626; }
.chat-msg.is-mine .chat-delete:hover { color: #fca5a5; }

.chat-composer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  background: rgba(248, 250, 252, 0.5);
}
.chat-composer textarea {
  flex: 1;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
}
.chat-composer textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.chat-composer button {
  align-self: flex-end;
}

@media (max-width: 720px) {
  .chat-bubble { max-width: 85%; }

  .chat-view {
    padding: 4px 0 0;
    height: calc(100dvh - 140px);
    min-height: 0;
  }
  .chat-shell {
    gap: 8px;
  }
  .chat-sidebar {
    max-height: none;
    padding: 8px 10px;
    gap: 6px;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .chat-sidebar-header { display: none; }
  .chat-channel-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .chat-channel {
    flex: 0 0 auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    white-space: nowrap;
  }
  .chat-channel.is-active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(124, 58, 237, 0.18));
    border-color: rgba(14, 165, 233, 0.35);
  }
  .chat-channel-label { max-width: 140px; }
  .chat-channel-count { min-width: 0; padding: 0 4px; }
  .chat-channel-count:not(.has-unread) { display: none; }

  .chat-card { border-radius: 12px; }
  .chat-header {
    padding: 10px 14px;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .chat-header > div { min-width: 0; flex: 1; }
  .chat-header h2 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chat-sub { display: none; }
  .chat-status {
    font-size: 10px;
    padding: 3px 8px;
    flex-shrink: 0;
  }

  .chat-list {
    padding: 12px 14px;
    gap: 10px;
  }
  .chat-msg { gap: 6px; }
  .chat-avatar { width: 30px; height: 30px; font-size: 11px; }
  .chat-bubble { padding: 6px 10px 8px; }
  .chat-bubble header { gap: 6px; margin-bottom: 2px; }
  .chat-bubble header strong { font-size: 12px; }
  .chat-role { display: none; }
  .chat-time { font-size: 10px; }
  .chat-text { font-size: 14px; }
  .chat-delete {
    font-size: 20px;
    padding: 4px 8px;
    min-width: 32px;
    min-height: 32px;
    line-height: 1;
    opacity: 0.7;
  }

  .chat-composer {
    padding: 10px 14px max(12px, env(safe-area-inset-bottom));
    gap: 8px;
    align-items: flex-end;
  }
  .chat-composer textarea {
    font-size: 16px;
    padding: 8px 10px;
    line-height: 1.35;
    min-height: 42px;
    max-height: 120px;
  }
  .chat-composer button {
    align-self: stretch;
    padding: 0 16px;
    min-height: 42px;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .lb-podium { grid-template-columns: 1fr; }
  .lb-podium-card.gold { transform: none; }
  .lb-row {
    grid-template-columns: 36px 72px 1fr;
  }
  .lb-row-sales {
    grid-column: 2 / -1;
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
}

/* ── Inicio ejecutivo (KPIs + ventas 12m) ─────────────────────────── */
.portal-exec-kpis {
  margin-bottom: 1.25rem;
}

.portal-exec-kpis-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.portal-exec-kpi .portal-exec-kpi-link {
  margin-top: auto;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  align-self: flex-start;
}

.portal-exec-aging-bars {
  display: flex;
  gap: 3px;
  align-items: stretch;
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.15);
}

.portal-exec-aging-seg {
  min-width: 4px;
  border-radius: 2px;
}

.portal-exec-aging-seg.tone-good { background: #10b981; }
.portal-exec-aging-seg.tone-calm { background: #94a3b8; }
.portal-exec-aging-seg.tone-warn { background: #f59e0b; }
.portal-exec-aging-seg.tone-urgent { background: #ef4444; }

/* ── Vista Finanzas ─────────────────────────────────────────────── */
.finanzas-kpis {
  margin-bottom: 1rem;
}

.finanzas-stale {
  margin-bottom: 1rem;
  padding: 12px 16px;
  border-left: 3px solid var(--warning, #f59e0b);
}

.finanzas-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.finanzas-panel .panel-heading {
  margin-bottom: 0.75rem;
}

.finanzas-aging-bars {
  height: 12px;
  margin-bottom: 0.75rem;
}

.finanzas-aging-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finanzas-aging-legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
}

.finanzas-aging-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.finanzas-aging-dot.tone-good { background: #10b981; }
.finanzas-aging-dot.tone-calm { background: #94a3b8; }
.finanzas-aging-dot.tone-warn { background: #f59e0b; }
.finanzas-aging-dot.tone-urgent { background: #ef4444; }

.finanzas-panel-foot {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.2));
}

.finanzas-meta {
  margin-bottom: 1rem;
}

.finanzas-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
}

.finanzas-meta-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finanzas-meta-grid strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}

.finanzas-meta-grid .is-bad {
  color: #dc2626;
}

.finanzas-rank-list .pulse-row {
  border-bottom-color: var(--line, rgba(148, 163, 184, 0.25));
}

.finanzas-rank-list .pulse-info strong,
.finanzas-rank-list .pulse-value strong {
  color: var(--ink);
}

.finanzas-rank-list .pulse-info .muted,
.finanzas-rank-list .pulse-value .muted {
  color: var(--muted);
}

.finanzas-rank-list .pulse-rank {
  color: var(--ink);
  background: var(--panel-2, #f1f5f9);
  border-color: var(--line, rgba(148, 163, 184, 0.35));
}

.finanzas-rank-list-compact .pulse-row {
  grid-template-columns: 1fr auto;
}

.finanzas-subpanel {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line, rgba(148, 163, 184, 0.35));
}

.sidebar-account-cluster .presence-meta {
  font-size: 10px;
}

.sidebar-account-cluster .sidebar-directorio-item,
.sidebar-account-cluster .sidebar-sugerencias-item {
  width: 100%;
  margin-top: 6px;
}

.sugerencias {
  display: grid;
  gap: 1rem;
}

.sugerencias-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.sugerencias-hero-copy {
  max-width: 52rem;
}

.sugerencias-hero-copy h3 {
  margin: 0.2rem 0 0.45rem;
  font-size: 1.45rem;
}

.sugerencias-new-btn {
  min-height: 48px;
  padding: 0.85rem 1.25rem;
  font-size: 0.98rem;
  white-space: nowrap;
}

.sugerencias-toolbar {
  display: grid;
  gap: 0.85rem;
}

.sugerencias-search input {
  width: 100%;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.45));
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  background: #fff;
  font: inherit;
}

.sugerencias-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.sugerencias-filters-grid label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--muted, #64748b);
}

.sugerencias-filters-grid select {
  width: 100%;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.45));
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  background: #fff;
  font: inherit;
  color: inherit;
}

.sugerencias-feed {
  display: grid;
  gap: 0.85rem;
}

.sugerencias-card {
  border: 1px solid var(--line, rgba(148, 163, 184, 0.35));
  border-radius: 16px;
  background: #fff;
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.55rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.sugerencias-card:hover,
.sugerencias-card:focus-visible {
  border-color: #b9c9e8;
  box-shadow: 0 10px 28px rgba(23, 33, 43, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.sugerencias-card-head,
.sugerencias-card-foot,
.sugerencias-card-author,
.sugerencias-card-tags {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.sugerencias-card-head,
.sugerencias-card-foot {
  justify-content: space-between;
}

.sugerencias-card-author strong {
  display: block;
  font-size: 0.92rem;
}

.sugerencias-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--sug-avatar, #64748b) 18%, #fff);
  color: var(--sug-avatar, #64748b);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.sugerencias-card-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.sugerencias-card-preview {
  margin: 0;
  color: var(--muted, #64748b);
  line-height: 1.45;
  font-size: 0.92rem;
}

.sugerencias-card-media {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}

.sugerencias-card-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.35));
  background: #f8fafc;
}

.sugerencias-card-thumb-more {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--muted, #64748b);
}

.sugerencias-card-cta {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--blue, #1d4ed8);
}

.sugerencias-empty-state {
  border: 1px dashed var(--line, rgba(148, 163, 184, 0.45));
  border-radius: 16px;
  padding: 2rem 1.25rem;
  text-align: center;
  background: #fff;
}

.sugerencias-empty-state h4 {
  margin: 0.25rem 0 0.4rem;
}

.sugerencias-dialog.sugerencias-compose-dialog,
.sugerencias-dialog.sugerencias-detail-dialog {
  width: min(760px, calc(100vw - 24px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: var(--shadow);
}

.sugerencias-dialog::backdrop {
  background: rgba(23, 33, 43, 0.48);
}

.sugerencias-dialog-card {
  background: #fff;
}

.sugerencias-compose-form {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.9rem;
  padding: 1.1rem 1.35rem 1.35rem;
}

.sugerencias-compose-full {
  grid-column: 1 / -1;
}

.sugerencias-compose-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--ink, #17212b);
}

.sugerencias-compose-form input,
.sugerencias-compose-form select,
.sugerencias-compose-form textarea,
.sugerencias-comment-form textarea,
.sugerencias-detail-status select {
  width: 100%;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.45));
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background: #fff;
  font: inherit;
  color: inherit;
}

.sugerencias-compose-form textarea,
.sugerencias-comment-form textarea {
  resize: vertical;
  min-height: 110px;
}

.sugerencias-drop-label {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 750;
}

.sugerencias-dropzone {
  border: 1.5px dashed #b9c9e8;
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  display: grid;
  gap: 0.25rem;
  background: #f7f9fb;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sugerencias-dropzone:hover,
.sugerencias-dropzone.is-dragover {
  background: var(--blue-2, #eef3fb);
  border-color: #7ea0d8;
}

.sugerencias-compose-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.sugerencias-compose-thumb {
  position: relative;
  margin: 0;
  width: 84px;
  height: 84px;
}

.sugerencias-compose-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.35));
}

.sugerencias-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #17212b;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.sugerencias-compose-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

.sugerencias-detail-body {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1.35rem 1.35rem;
}

.sugerencias-detail-head-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sugerencias-detail-head-main h3 {
  margin: 0.1rem 0 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

.sugerencias-detail-meta,
.sugerencias-detail-admin,
.sugerencias-comments-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.sugerencias-detail-admin {
  padding-bottom: 0.15rem;
}

.sugerencias-detail-status {
  display: inline-grid;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--muted, #64748b);
}

.sugerencias-detail-desc {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 0.95rem;
}

.sugerencias-detail-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.sugerencias-detail-image {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.35));
  background: #f8fafc;
}

.sugerencias-detail-image img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.sugerencias-comments {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.35));
}

.sugerencias-comments-head {
  justify-content: space-between;
}

.sugerencias-comments-head h4 {
  margin: 0;
}

.sugerencias-comments-list {
  display: grid;
  gap: 0.7rem;
}

.sugerencias-comment {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.65rem;
}

.sugerencias-comment p {
  margin: 0.2rem 0 0;
  white-space: pre-wrap;
  line-height: 1.45;
}

.sugerencias-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sugerencias-comment-form {
  display: grid;
  gap: 0.65rem;
}

.sugerencias-comment-form .primary-btn {
  justify-self: start;
}

.sugerencias .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sugerencias .ghost-btn,
.sugerencias-dialog .ghost-btn {
  border: 1px solid var(--line, rgba(148, 163, 184, 0.45));
  background: #fff;
  color: var(--ink, #17212b);
  border-radius: 10px;
  min-height: 38px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.sugerencias .ghost-btn:hover,
.sugerencias-dialog .ghost-btn:hover {
  background: #f7f9fb;
}

@media (max-width: 860px) {
  .sugerencias-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sugerencias-compose-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sugerencias-filters-grid {
    grid-template-columns: 1fr;
  }

  .sugerencias-hero {
    align-items: stretch;
  }

  .sugerencias-new-btn {
    width: 100%;
  }

  .sugerencias-card-head {
    align-items: flex-start;
  }
}

.portal-inicio-chart-panel {
  margin-bottom: 1.25rem;
}

.directorio-dental-panel .panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.directorio-dental-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.directorio-dental-meta {
  font-size: 0.82rem;
  white-space: nowrap;
}

.directorio-dental-search {
  flex: 1;
  min-width: min(220px, 100%);
}

.directorio-dental-search input {
  min-width: min(280px, 100%);
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.35));
  background: var(--panel, #fff);
}

.directorio-dental-tabs {
  margin: 0 0 1rem;
  flex-wrap: wrap;
}

.directorio-dental-section + .directorio-dental-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line, rgba(148, 163, 184, 0.35));
}

.directorio-dental-section-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 700;
}

.directorio-dental-section-empty {
  margin: 0.5rem 0 0;
}

.directorio-dental-table td,
.directorio-dental-table th {
  padding: 12px 14px;
  line-height: 1.5;
  vertical-align: middle;
}

.directorio-dental-table td a.directorio-dental-tel {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.directorio-dental-table td strong {
  color: var(--accent, #01b8e6);
}

.directorio-dental-empty.is-hidden {
  display: none;
}

.portal-inicio-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.portal-inicio-chart-head h3 {
  margin: 0.15rem 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.portal-inicio-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 180px;
  padding: 8px 4px 0;
}

.portal-inicio-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 4px 2px 0;
  transition: background 0.15s ease;
}

.portal-inicio-month:hover {
  background: rgba(37, 99, 235, 0.06);
}

.portal-inicio-month.is-drill-active {
  background: rgba(37, 99, 235, 0.1);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25);
}

.portal-inicio-bar-slot {
  width: 100%;
  max-width: 36px;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.portal-inicio-bar-wrap {
  width: 100%;
  min-height: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--brand-red), #b50318);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.portal-inicio-month:hover .portal-inicio-bar-wrap {
  opacity: 0.88;
  transform: translateY(-2px);
}

.portal-inicio-month-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.portal-cobros-ventas-panel {
  margin-bottom: 1.25rem;
}

.portal-cobros-ventas-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.portal-cobros-ventas-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend-swatch.sales {
  background: linear-gradient(180deg, var(--brand-red), #b50318);
}

.legend-swatch.cobros {
  background: linear-gradient(180deg, #10b981, #059669);
}

.portal-inicio-month-duo {
  cursor: default;
}

.portal-inicio-month-duo:hover {
  background: transparent;
}

.portal-inicio-month-duo.is-empty .portal-inicio-bar-slot-duo {
  height: 140px;
}

.portal-inicio-bar-slot-duo {
  width: 100%;
  max-width: 44px;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.portal-inicio-bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.portal-inicio-bar-wrap.sales {
  background: linear-gradient(180deg, var(--brand-red), #b50318);
}

.portal-inicio-bar-wrap.cobros {
  background: linear-gradient(180deg, #10b981, #059669);
}

.portal-inicio-bar-col .portal-inicio-bar-wrap {
  width: 100%;
}

@media (max-width: 980px) {
  .portal-inicio-chart {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 16px;
  }
}

@media (max-width: 640px) {
  .portal-inicio-chart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 140px;
  }
}

/* ── Hero empresarial premium (Inicio) ─────────────────────────────── */
.portal-premium-shell {
  gap: 1.5rem;
}

.portal-premium-hero {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: 1.65rem 1.85rem 1.85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.portal-premium-head {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.portal-premium-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.portal-premium-status.is-live {
  color: var(--green);
  background: var(--green-2);
  border: 1px solid rgba(4, 120, 87, 0.18);
}

.portal-premium-status.is-warn {
  color: #b45309;
  background: var(--amber-2);
  border: 1px solid rgba(168, 93, 0, 0.2);
}

.portal-premium-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.portal-premium-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.portal-premium-title {
  margin: 0.35rem 0 0;
  font-size: clamp(1.65rem, 2vw + 0.8rem, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
}

.portal-premium-sub {
  margin: 0.45rem 0 0;
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

.portal-premium-date {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  text-transform: capitalize;
}

.portal-premium-hero .portal-search-hero {
  margin: 0;
}

.portal-premium-hero .portal-search-hero-wrap {
  padding: 18px 22px;
  border-radius: 16px;
  border-color: #2563eb;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.16);
}

.portal-premium-panel {
  margin: 0;
  border-radius: 16px;
  padding: 1.25rem 1.45rem;
  background: linear-gradient(135deg, #0c1a3a 0%, #0f172a 52%, #111827 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22);
}

.portal-premium-panel .portal-forecast-grid.is-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.portal-premium-panel .portal-forecast-tile {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.portal-premium-panel .portal-forecast-tile:first-child {
  border-left: none;
}

.portal-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.portal-premium-grid .portal-hero {
  display: contents;
}

.portal-premium-grid .portal-hero-card {
  min-height: 100%;
}

.portal-premium-grid .portal-hero-card.primary {
  background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 52%, #1e3a8a 100%);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.28);
}

.portal-premium-grid .portal-hero-link {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.78rem;
}

@media (max-width: 1180px) {
  .portal-premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portal-premium-panel .portal-forecast-grid.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .portal-premium-hero {
    padding: 1.15rem 1.1rem 1.25rem;
  }
  .portal-premium-grid {
    grid-template-columns: 1fr;
  }
  .portal-premium-head-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── Forecast Panel (Inicio) ──────────────────────────────────────── */
.portal-forecast {
  position: relative;
  margin: 12px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fff;
  border: 2px solid #334155;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
/* Highlight tenue arriba para sensación premium sin pesar visualmente */
.portal-forecast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}
.portal-forecast > * {
  position: relative;
  z-index: 1;
}
/* Tonos suaves y ejecutivos (poco saturados) */
.portal-forecast-great { background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%); }
.portal-forecast-ok { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); }
.portal-forecast-warn { background: linear-gradient(135deg, #92400e 0%, #5c2c0a 100%); }
/* Crítico premium: granate oscuro con transición suave hacia neutro (menos agresivo, más ejecutivo). */
.portal-forecast-critical {
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(248, 113, 113, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, #6b1f1f 0%, #3a1818 55%, #221217 100%);
  border-color: rgba(248, 113, 113, 0.55);
}
/* Versión compacta */
.portal-forecast.is-compact {
  padding: 12px 16px;
}
.portal-forecast.is-compact .portal-forecast-head { margin-bottom: 8px; gap: 16px; }
.portal-forecast.is-compact .portal-forecast-title h3 { margin: 2px 0 0; font-size: 0.98rem; letter-spacing: -0.01em; }
.portal-forecast.is-compact .portal-forecast-tile strong { font-size: 1.1rem; }
.portal-forecast.is-compact .portal-forecast-tile { background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.16); }
.portal-forecast.is-compact .portal-forecast-tile.is-hero { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.35); }
.portal-forecast-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.75;
}
.portal-forecast-progress-block {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.portal-forecast-progress-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  opacity: 0.85;
}
.portal-forecast-progress-line strong {
  font-size: 1.2rem;
  font-weight: 700;
  opacity: 1;
}
.portal-forecast-gap {
  font-size: 11px;
  opacity: 0.85;
  font-weight: 500;
}
.portal-forecast-gap.is-success {
  color: #a7f3d0;
}
.portal-forecast.is-compact .portal-forecast-grid { gap: 8px; margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.portal-forecast.is-compact .portal-forecast-tile { padding: 10px 12px; }
.portal-forecast.is-compact .portal-forecast-tile strong { font-size: 1.18rem; }
.portal-forecast-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.portal-forecast-head h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.portal-forecast-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.portal-forecast-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  font-size: 11px;
  opacity: 0.85;
}
.portal-forecast-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
}
.portal-forecast-bar-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  transition: width .3s ease;
}
.portal-forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.portal-forecast-tile {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  transition: border-color 0.18s ease;
}
.portal-forecast-tile:hover {
  border-color: rgba(255, 255, 255, 0.35);
}
.portal-forecast-tile.is-hero {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}
.portal-forecast-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 4px;
  font-weight: 600;
}
.portal-forecast-tile strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.portal-forecast-sub {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.8;
}
.portal-forecast-sub.up { color: #6ee7b7; }
.portal-forecast-sub.down { color: #fca5a5; }
.portal-forecast-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.portal-forecast-need {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
}
.portal-forecast-need.is-success {
  border-left-color: #6ee7b7;
}
.portal-forecast-need-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 2px;
}
.portal-forecast-need strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
}
.portal-forecast-need-sub {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.75;
}

/* ── Trends Panel (Inicio) — columnas coloreadas por dirección ── */
.portal-trends {
  margin: 16px 0;
}
.portal-trends-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.portal-trends-head h3 { margin: 0; color: #0f172a; }
.portal-trends-wow {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.portal-trends-wow.up { background: rgba(5, 150, 105, 0.15); color: #047857; border-color: rgba(5, 150, 105, 0.3); }
.portal-trends-wow.down { background: rgba(220, 38, 38, 0.15); color: #b91c1c; border-color: rgba(220, 38, 38, 0.3); }
.portal-trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.portal-trends-col {
  padding: 16px 18px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  color: #fff;
}
.portal-trends-col.trends-up {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.portal-trends-col.trends-down {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.portal-trends-col-title {
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.portal-trends-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-trends-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.portal-trends-list strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}
.portal-trends-pct {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}
.portal-trends-vals {
  grid-column: 1 / -1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Global Search (Cmd+K) ──────────────────────────────────────── */
.portal-search-hero {
  margin: 0 0 16px;
  position: relative;
}
.portal-search-hero-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2.5px solid #2563eb;
  background: var(--surface, #fff);
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.14);
  transition: all 0.18s;
}
.portal-search-hero-wrap:focus-within {
  border-color: #1d4ed8;
  box-shadow: 0 6px 28px rgba(37, 99, 235, 0.28), 0 0 0 4px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}
.portal-search-hero-icon {
  font-size: 22px;
  flex-shrink: 0;
  opacity: 0.75;
}
.portal-search-hero-input {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text, #0f172a);
  font-family: inherit;
  min-width: 0;
}
.portal-search-hero-input::placeholder {
  color: var(--muted, #94a3b8);
  font-weight: 400;
}
.portal-search-hero-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg, #f1f5f9);
  color: var(--muted, #64748b);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
}
.portal-search-hero-clear:hover {
  background: #dc2626;
  color: #fff;
}
.portal-search-hero-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 4px 9px;
  background: var(--bg, #f1f5f9);
  border-radius: 6px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  color: var(--muted, #64748b);
  flex-shrink: 0;
  font-weight: 600;
}
.portal-search-hero-results {
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.20));
  background: var(--surface, #fff);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  max-height: 460px;
  overflow-y: auto;
  padding: 8px;
}
.portal-search-hero-results[hidden] { display: none; }
@media (max-width: 720px) {
  .portal-search-hero-wrap { padding: 12px 14px; gap: 10px; }
  .portal-search-hero-icon { font-size: 18px; }
  .portal-search-hero-input { font-size: 15px; }
  .portal-search-hero-kbd { display: none; }
}

.global-search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.global-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.global-search-panel {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.global-search-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.18));
}
.global-search-icon { font-size: 18px; opacity: 0.7; }
#globalSearchInput {
  flex: 1;
  font-size: 17px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text, #0f172a);
  font-family: inherit;
}
.global-search-close {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
  font-family: inherit;
}
.global-search-close:hover {
  background: var(--bg, #f1f5f9);
  color: var(--text, #0f172a);
}
.global-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.global-search-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  padding: 10px 12px 4px;
}
.global-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  font-family: inherit;
  color: var(--text, #0f172a);
}
.global-search-result.is-selected {
  background: rgba(37, 99, 235, 0.10);
}
.global-search-result-icon { font-size: 20px; flex-shrink: 0; }
.global-search-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.global-search-result-text strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-search-result-text span {
  font-size: 12px;
  color: var(--muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-search-hint {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted, #64748b);
}
.global-search-hint p { margin: 0 0 12px; font-size: 14px; }
.global-search-hint-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
}
.global-search-hint-list em {
  background: var(--bg, #f1f5f9);
  padding: 1px 6px;
  border-radius: 4px;
  font-style: normal;
  color: var(--text, #0f172a);
}
.global-search-foot {
  padding: 8px 16px;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  font-size: 11px;
  color: var(--muted, #64748b);
  display: flex;
  gap: 12px;
  justify-content: center;
}
.global-search-foot kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 1px 5px;
  background: var(--bg, #f1f5f9);
  border-radius: 4px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
}

/* ════════════════════════════════════════════════════════════════════════
   ── INICIO EJECUTIVO v93 — Centro de comando ejecutivo ──────────────
   ════════════════════════════════════════════════════════════════════ */

/* Bloque header común para secciones del portal */
.portal-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  flex-wrap: wrap;
}
.portal-block-head .portal-block-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
}
.portal-block-meta {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.portal-block-meta.is-ok {
  color: #047857;
  background: #d1fae5;
  padding: 4px 10px;
  border-radius: 999px;
}
.portal-block-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Chips de prioridad */
.portal-prio-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.portal-prio-chip.prio-critical { background: #fee2e2; color: #991b1b; }
.portal-prio-chip.prio-important { background: #fef3c7; color: #92400e; }
.portal-prio-chip.prio-followup { background: #dbeafe; color: #1e40af; }

/* Chips de área responsable */
.portal-area-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.portal-area-chip.area-red { background: #fee2e2; color: #991b1b; }
.portal-area-chip.area-blue { background: #dbeafe; color: #1e40af; }
.portal-area-chip.area-amber { background: #fef3c7; color: #92400e; }
.portal-area-chip.area-purple { background: #ede9fe; color: #6d28d9; }
.portal-area-chip.area-teal { background: #ccfbf1; color: #115e59; }
.portal-area-chip.area-gray { background: #e5e7eb; color: #334155; }

/* ── Centro de acciones de hoy (cards enriquecidos) ─────────────── */
.portal-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.portal-action {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  border-left-width: 4px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.portal-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.portal-action.prio-critical { border-left-color: #dc2626; }
.portal-action.prio-important { border-left-color: #f59e0b; }
.portal-action.prio-followup { border-left-color: #2563eb; }
.portal-action-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.portal-action-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.portal-action-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
.portal-action-impact {
  margin: 0;
  font-size: 12px;
  color: #475569;
}
.portal-action-suggested {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
  font-style: italic;
  line-height: 1.4;
}
.portal-action-suggested span {
  color: #2563eb;
  font-weight: 700;
  font-style: normal;
}
.portal-action-cta {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.portal-action-cta:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  transform: translateX(2px);
}

/* ── Top 5 problemas — colores sólidos por prioridad ─────────── */
.portal-top5 {
  margin: 22px 0;
}
.portal-top5-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.portal-top5-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1B7188 0%, #12546A 100%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.portal-top5-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.24);
}
.portal-top5-row.prio-critical {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.portal-top5-row.prio-important {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
}
.portal-top5-row.prio-followup {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.portal-top5-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.portal-top5-row:nth-child(1) .portal-top5-rank { background: linear-gradient(180deg, #fde047, #facc15); color: #78350f; border-color: rgba(0,0,0,0.15); }
.portal-top5-row:nth-child(2) .portal-top5-rank { background: linear-gradient(180deg, #e5e7eb, #cbd5e1); color: #334155; border-color: rgba(0,0,0,0.15); }
.portal-top5-row:nth-child(3) .portal-top5-rank { background: linear-gradient(180deg, #fed7aa, #fb923c); color: #7c2d12; border-color: rgba(0,0,0,0.15); }
.portal-top5-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.portal-top5-info strong {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.portal-top5-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.portal-top5-action {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-style: normal;
  line-height: 1.4;
}
.portal-top5-link {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.portal-top5-link:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateX(2px);
}
@media (max-width: 720px) {
  .portal-top5-row {
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    padding: 12px 14px;
  }
  .portal-top5-info strong { white-space: normal; }
}

/* ── Pulso del día (tiles premium) — colores sólidos por estado ── */
.portal-today {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.portal-today-tile {
  background: linear-gradient(135deg, #1B7188 0%, #12546A 100%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.portal-today-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.25);
}
.portal-today-tile.status-good {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.portal-today-tile.status-warn {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
}
.portal-today-tile.status-critical {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.portal-today-tile.status-neutral {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
}
.portal-today-tile.is-feature {
  background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
  color: #0f172a;
  border-color: #bfdbfe;
}
.portal-today-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.portal-today-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.portal-today-tile.is-feature .portal-today-label { color: #475569; }
.portal-today-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}
.portal-today-tile.is-feature .portal-today-status { background: #dbeafe; color: #1e40af; }
.portal-today-tile strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}
.portal-today-tile.is-feature strong { font-size: 1.05rem; color: #0f172a; }
.portal-today-delta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
}
.portal-today-tile.is-feature .portal-today-delta { color: #475569; }
.portal-today-delta.up { color: #d1fae5; }
.portal-today-delta.down { color: #fecaca; }
.portal-today-delta.neutral { color: rgba(255, 255, 255, 0.72); font-style: italic; }
.portal-today-tile.is-feature .portal-today-delta.up { color: #047857; }
.portal-today-tile.is-feature .portal-today-delta.down { color: #b91c1c; }
.portal-today-tile.is-feature .portal-today-delta.neutral { color: #64748b; }
.portal-today-tile.wide { grid-column: span 2; }
@media (max-width: 640px) {
  .portal-today-tile.wide { grid-column: auto; }
}

/* ── Actividad reciente (timeline) — panel dark navy elegante ─── */
.portal-activity {
  margin: 18px 0;
}
.portal-activity-list {
  list-style: none;
  padding: 14px 18px;
  margin: 0;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  color: #ffffff;
}
.portal-activity-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 8px 0;
  align-items: center;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.portal-activity-row:last-child { border-bottom: 0; }
.portal-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 14px;
}
.portal-activity-row.kind-sap .portal-activity-icon {
  background: rgba(37, 99, 235, 0.32);
  border-color: rgba(147, 197, 253, 0.55);
}
.portal-activity-row.kind-order .portal-activity-icon {
  background: rgba(217, 119, 6, 0.32);
  border-color: rgba(253, 186, 116, 0.55);
}
.portal-activity-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.portal-activity-info strong {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-activity-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}
.portal-activity-more {
  margin: 10px 0 0;
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.portal-activity-more:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.42);
}

/* ── Empty states elegantes para pulse panels ────────────────── */
.pulse-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  margin-top: 8px;
}
.pulse-empty-icon {
  font-size: 28px;
  opacity: 0.85;
}
.pulse-empty p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}
.pulse-empty .text-btn {
  font-size: 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  cursor: pointer;
  padding: 4px 10px;
  font-weight: 700;
}
.pulse-empty .text-btn:hover { background: rgba(255, 255, 255, 0.3); text-decoration: none; }

/* ── Top 5 problemas: versión enriquecida (Área / Impacto / Acción) ── */
.portal-top5.is-rich .portal-top5-list.is-rich {
  gap: 10px;
  padding: 0;
}
.portal-top5.is-rich .portal-top5-row {
  grid-template-columns: 34px 1fr 32px;
  padding: 16px 18px;
  gap: 16px;
}
.portal-top5.is-rich .portal-top5-info {
  gap: 10px;
}
.portal-top5-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.portal-top5-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.portal-top5-meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.portal-top5-meta > div {
  display: contents;
}
.portal-top5-meta dt {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  padding-top: 3px;
}
.portal-top5-meta dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
}
.portal-block-meta-row {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Actividad reciente compacta ──────────────────────────────── */
.portal-activity.is-compact .portal-activity-list {
  padding: 8px 12px;
}
.portal-activity.is-compact .portal-activity-row {
  padding: 6px 0;
  grid-template-columns: 24px 1fr;
  gap: 10px;
}
.portal-activity.is-compact .portal-activity-icon {
  width: 24px; height: 24px;
  font-size: 12px;
  border-radius: 6px;
}
.portal-activity.is-compact .portal-activity-info strong { font-size: 11.5px; }
.portal-activity.is-compact .portal-activity-sub { font-size: 10.5px; }

/* ── Pulso del negocio: alturas iguales + alineación derecha ──── */
.pulse-grid {
  align-items: stretch;
}
.pulse-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pulse-panel .pulse-list { flex: 1; }
.pulse-panel .pulse-value {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pulse-panel .pulse-value strong {
  font-variant-numeric: tabular-nums;
}

/* ── Mobile adjustments for new sections ─────────────────────── */
@media (max-width: 640px) {
  .portal-actions-grid { grid-template-columns: 1fr; }
  .portal-top5-row { grid-template-columns: 24px 1fr 24px; gap: 8px; padding: 8px 10px; }
  .portal-top5-info strong { white-space: normal; font-size: 12px; }
  .portal-top5.is-rich .portal-top5-row { grid-template-columns: 28px 1fr 24px; padding: 10px 12px; }
  .portal-top5-meta { grid-template-columns: 1fr; }
  .portal-top5-meta dt { padding-top: 0; }
  .portal-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-today-tile { padding: 12px 14px; }
  .portal-today-tile strong { font-size: 1.15rem; }
  .portal-block-head { margin: 14px 0 10px; }
  .portal-forecast.is-compact .portal-forecast-head { flex-direction: column; align-items: stretch; }
  .portal-forecast-progress-block { min-width: 0; }
}

/* ───────────────────────────────────────────────────────────────
   QA ejecutivo: acciones de fila compactas + variantes de text-btn
   ─────────────────────────────────────────────────────────────── */

/* Acciones secundarias en filas (Acuerdos, Licitaciones, etc.):
   discretas, sin botones grandes coloridos. */
.row-actions-cell {
  white-space: nowrap;
  text-align: right;
}
.row-actions-compact {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.row-actions-compact .text-btn {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.01em;
  /* Por defecto neutro (gris oscuro), las variantes -success/-warn/-danger lo sobrescriben */
  color: #334155;
}
.row-actions-compact .text-btn:hover {
  background: rgba(30, 41, 59, 0.08);
  color: #0f172a;
}
.row-actions-compact .text-btn + .text-btn::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(15, 23, 42, 0.12);
  margin-right: 4px;
  vertical-align: middle;
}
.row-actions-compact .text-btn.text-btn-success,
.text-btn-success { color: #047857; }
.row-actions-compact .text-btn.text-btn-success:hover,
.text-btn-success:hover { background: rgba(16, 185, 129, 0.12); color: #065f46; }
.row-actions-compact .text-btn.text-btn-warn,
.text-btn-warn { color: #b45309; }
.row-actions-compact .text-btn.text-btn-warn:hover,
.text-btn-warn:hover { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.row-actions-compact .text-btn.text-btn-danger,
.text-btn-danger { color: #b91c1c; }
.row-actions-compact .text-btn.text-btn-danger:hover,
.text-btn-danger:hover { background: rgba(220, 38, 38, 0.10); color: #991b1b; }

/* ───────────────────────────────────────────────────────────────
   Plan semanal: bridge ejecutivo + summary pre-listado + badges
   ─────────────────────────────────────────────────────────────── */

/* Transición clara desde "Foco de la semana" hacia "Ejecución por vendedor" */
.plan-bridge {
  margin: 28px 0 14px;
  padding: 20px 22px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.plan-bridge::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.35) 25%, rgba(37, 99, 235, 0.55) 50%, rgba(37, 99, 235, 0.35) 75%, transparent 100%);
}
.plan-bridge-head {
  margin-bottom: 14px;
}
.plan-bridge-head .eyebrow {
  margin: 0 0 4px;
}
.plan-bridge-head h3 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.plan-bridge-head .cell-sub {
  margin: 6px 0 0;
  color: #475569;
  font-size: 0.88rem;
}
.plan-bridge-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1180px) {
  .plan-bridge-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .plan-bridge-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .plan-bridge-summary { grid-template-columns: 1fr; }
}
.plan-bridge-tile {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.plan-bridge-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #cbd5e1;
}
.plan-bridge-tile.is-ok::before { background: #10b981; }
.plan-bridge-tile.is-warn::before { background: #f59e0b; }
.plan-bridge-tile.is-down::before { background: #dc2626; }
.plan-bridge-tile .eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 0;
}
.plan-bridge-tile strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.plan-bridge-tile strong.is-muted { color: #94a3b8; }
.plan-bridge-tile .cell-sub {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
}

/* Plan semanal: badge de estado por vendedor */
.plan-seller-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.plan-badge-ok { background: rgba(16, 185, 129, 0.10); color: #047857; border-color: rgba(16, 185, 129, 0.2); }
.plan-badge-watch { background: rgba(245, 158, 11, 0.10); color: #92400e; border-color: rgba(245, 158, 11, 0.25); }
.plan-badge-down { background: rgba(220, 38, 38, 0.08); color: #991b1b; border-color: rgba(220, 38, 38, 0.2); }
.plan-badge-muted { background: rgba(148, 163, 184, 0.10); color: #475569; border-color: rgba(148, 163, 184, 0.2); }

/* Borde lateral sutil por estado en cada fila de vendedor */
.plan-seller-card.status-ok { border-left: 3px solid rgba(16, 185, 129, 0.45); }
.plan-seller-card.status-watch { border-left: 3px solid rgba(245, 158, 11, 0.5); }
.plan-seller-card.status-down { border-left: 3px solid rgba(220, 38, 38, 0.45); }
.plan-seller-card.status-muted { border-left: 3px solid rgba(148, 163, 184, 0.4); }
/* "is-own" sobre-escribe el lateral azul */
.plan-seller-card.is-own.status-ok,
.plan-seller-card.is-own.status-watch,
.plan-seller-card.is-own.status-down,
.plan-seller-card.is-own.status-muted { border-left: 4px solid #2563eb; }

/* "Meta pendiente" y "Sin visitas planeadas" como alertas suaves */
.plan-seller-stat strong.is-muted {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
}
.plan-num-sub {
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.78rem;
}

/* Micro-CTA "Definir meta" / "Planear ruta" */
.plan-cta-link {
  border: none;
  background: transparent;
  padding: 2px 0 0;
  margin: 0;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.plan-cta-link:hover { text-decoration: underline; color: #1d4ed8; }
.plan-cta-link::after { content: " →"; opacity: 0.6; }

/* Responsive del badge + grid del summary */
@media (max-width: 1100px) {
  .plan-seller-card summary {
    grid-template-columns: 44px minmax(150px, 1fr) minmax(0, 2.2fr) auto 24px;
    gap: 12px;
    padding: 14px 16px;
  }
  .plan-seller-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .plan-seller-stat { padding: 6px 6px; }
  .plan-seller-stat strong { font-size: 0.85rem; }
}
@media (max-width: 820px) {
  .plan-seller-card summary {
    grid-template-columns: 38px 1fr auto;
    grid-template-areas: "rank id badge" "stats stats stats" "toggle toggle toggle";
    gap: 10px;
    padding: 12px 14px;
  }
  .plan-seller-rank { grid-area: rank; }
  .plan-seller-id { grid-area: id; }
  .plan-seller-badge { grid-area: badge; align-self: start; }
  .plan-seller-stats { grid-area: stats; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .plan-seller-toggle { grid-area: toggle; justify-self: end; }
}
@media (max-width: 520px) {
  .plan-seller-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mi ruta (vendedores) ─────────────────────────────────────────────── */
.mi-ruta-pulse-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 1.5rem;
}
.mi-ruta-day-nav .plan-week-label strong {
  text-transform: capitalize;
}
.mi-ruta-day-panel {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.plan-seller-card.is-own .mi-ruta-day-panel {
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.06);
}
.mi-ruta-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mi-ruta-day-head h4 {
  margin: 0;
  font-size: 1.05rem;
  text-transform: capitalize;
}
.mi-ruta-day-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mi-ruta-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mi-ruta-stop {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}
.mi-ruta-stop.is-done {
  background: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.25);
}
.mi-ruta-stop-order {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: #0f172a;
  color: #fff;
  font-size: 0.95rem;
}
.mi-ruta-stop.is-done .mi-ruta-stop-order {
  background: #059669;
}
.mi-ruta-stop-body strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}
.mi-ruta-stop-motivo {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 700;
}
.mi-ruta-stop-note {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: #64748b;
}
.mi-ruta-stop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 220px;
}
.mi-ruta-btn {
  min-height: 42px;
  padding: 8px 14px;
  font-weight: 700;
}
.mi-ruta-btn.is-done {
  background: #059669;
  color: #fff;
  border: none;
}
.mi-ruta-btn-icon {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.mi-ruta-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed rgba(15, 23, 42, 0.12);
}
.mi-ruta-weekly-fold {
  margin-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 10px;
}
.mi-ruta-weekly-fold > summary {
  cursor: pointer;
  font-weight: 700;
  color: #475569;
  padding: 8px 0;
}
.mi-ruta-add-card {
  width: min(560px, calc(100vw - 24px));
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
}
.mi-ruta-add-search-wrap {
  padding: 0 16px 12px;
}
.mi-ruta-add-search-wrap input {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 10px 12px;
}
.mi-ruta-add-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 12px;
  overflow: auto;
  flex: 1;
}
.mi-ruta-add-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.mi-ruta-add-item:hover {
  border-color: rgba(37, 99, 235, 0.25);
  background: #f8fbff;
}
.mis-rutas-wrap .mis-rutas-hero { margin-bottom: 0.75rem; }
.mis-rutas-wrap .mis-rutas-hero .eyebrow { margin: 0; letter-spacing: 0.04em; }
.mis-rutas-wrap .mis-rutas-hero h2 { margin: 0.2rem 0 0.35rem; font-size: 1.55rem; line-height: 1.15; }
.mis-rutas-wrap .mis-rutas-hero .cell-sub { margin: 0; max-width: 52rem; }
.mis-rutas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 1rem;
}
.mis-rutas-toolbar .mis-rutas-tabs { margin-bottom: 0; flex: 1 1 auto; }
.mis-rutas-seller-filter { margin-bottom: 0; flex: 0 0 auto; }
.mis-rutas-seller-filter label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.mis-rutas-resumen-kpis {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 1rem !important;
}
.mis-rutas-resumen-kpis .portal-today-tile,
.mis-rutas-gerencia-cards .portal-today-tile {
  min-height: 118px;
  justify-content: space-between;
}
.mis-rutas-resumen-kpis .portal-today-row,
.mis-rutas-gerencia-cards .portal-today-row {
  align-items: flex-start;
  min-height: 2.35rem;
}
.mis-rutas-resumen-kpis .portal-today-label,
.mis-rutas-gerencia-cards .portal-today-label {
  flex: 1;
  line-height: 1.25;
  padding-right: 6px;
  hyphens: auto;
}
.mis-rutas-resumen-kpis .portal-today-status,
.mis-rutas-gerencia-cards .portal-today-status {
  flex-shrink: 0;
  align-self: flex-start;
}
.mis-rutas-resumen-kpis .portal-today-tile strong,
.mis-rutas-gerencia-cards .portal-today-tile strong {
  margin: 2px 0;
}
.mis-rutas-resumen-kpis .hub-pulse-tile-bar,
.mis-rutas-gerencia-cards .hub-pulse-tile-bar {
  margin: 4px 0 2px;
}
.calle-gerencia-kpis .portal-today-delta,
.mis-rutas-resumen-kpis .portal-today-delta,
.mis-rutas-gerencia-cards .portal-today-delta {
  display: none;
}
.portal-today-tile.is-compact .portal-today-status {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.portal-today-tile.is-compact:not(.status-critical):not(.status-warn) .portal-today-row {
  justify-content: flex-start;
}
.mis-rutas-panel-head {
  align-items: flex-end;
  gap: 12px;
}
.mis-rutas-panel-head-main h3 { margin: 0 0 4px; line-height: 1.2; }
.mis-rutas-panel-head-main .cell-sub { margin: 0; }
.mis-rutas-resumen-bridge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 16px;
  margin-top: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #f8fafc;
}
.mis-rutas-resumen-bridge p { flex: 1 1 260px; margin: 0; line-height: 1.45; }
.mis-rutas-resumen-bridge .primary-btn { flex: 0 0 auto; white-space: nowrap; }
.mis-rutas-resumen-panel .work-panel,
.mis-rutas-resumen-panel.work-panel { padding-top: 0; }
.mis-rutas-wrap .panel-heading h3 { margin: 0 0 4px; }
.mis-rutas-wrap .panel-heading .cell-sub { margin: 0; }
.mis-rutas-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}
.mis-rutas-tab {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
.mis-rutas-tab.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.mi-ruta-priority { font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.mi-ruta-priority-alta { background: #fee2e2; color: #b91c1c; }
.mi-ruta-priority-media { background: #fef3c7; color: #b45309; }
.mi-ruta-priority-baja { background: #e2e8f0; color: #475569; }
.mi-ruta-stop-reason { display: block; margin-top: 6px; font-size: 0.82rem; color: #475569; line-height: 1.35; }
.mi-ruta-stop-action { display: block; margin-top: 4px; }
.mis-rutas-seller-filter select { min-height: 42px; min-width: 220px; }
.mis-rutas-report-card, .mis-rutas-customer-card { width: min(560px, calc(100vw - 24px)); }
.mis-rutas-report-form label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mis-rutas-report-form input, .mis-rutas-report-form select, .mis-rutas-report-form textarea {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 8px 12px;
}
.mis-rutas-report-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.mis-rutas-table-wrap { margin-top: 12px; overflow-x: auto; }
.mis-rutas-table th, .mis-rutas-table td { vertical-align: top; }
.mis-rutas-table .mis-rutas-col-reason, .mis-rutas-table .mis-rutas-col-action { max-width: 220px; }
.mis-rutas-trunc { cursor: help; border-bottom: 1px dotted rgba(15, 23, 42, 0.25); }
.mis-rutas-empty { padding: 24px 16px; text-align: center; }
.mis-rutas-empty .primary-btn { margin-top: 12px; }
.mis-rutas-gerencia-cards { margin-bottom: 1rem; }

/* Qué pasa en calle — gerencia */
.calle-gerencia-wrap .mis-rutas-hero { margin-bottom: 0.75rem; }
.calle-gerencia-kpis { margin-bottom: 1rem; }
.calle-motivos-panel { margin-top: 0.5rem; }
.calle-motivos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calle-motivo-item { display: flex; flex-direction: column; gap: 6px; }
.calle-motivo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.92rem;
}
.calle-motivo-count {
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-size: 0.85rem;
}
.calle-motivo-bar {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.calle-motivo-bar > span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}
.calle-motivos-empty { margin: 0; padding: 8px 0; }
.calle-riesgo-panel { margin-top: 0.75rem; }

.mis-rutas-agenda-stop { align-items: flex-start; }
.mis-rutas-agenda-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mis-rutas-agenda-metrics { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 0.78rem; color: #64748b; margin-top: 4px; }
.mis-rutas-agenda-zone { display: block; margin-top: 2px; }
.mis-rutas-agenda-list .mi-ruta-stop { padding: 12px 10px; }
.mis-rutas-suggest-card { width: min(640px, calc(100vw - 24px)); }
.mis-rutas-class-badge { font-size: 0.72rem; letter-spacing: 0.02em; }
.mis-rutas-class-dormant { background: #fee2e2; color: #991b1b; }
.mis-rutas-class-at_risk { background: #ffedd5; color: #9a3412; }
.mis-rutas-class-active { background: #dcfce7; color: #166534; }
.mis-rutas-class-never_bought { background: #e0f2fe; color: #075985; }
.mis-rutas-class-cannot_buy { background: #fecaca; color: #7f1d1d; }
.mis-rutas-class-lost { background: #e5e7eb; color: #374151; }

.mis-rutas-alerts-panel { margin-bottom: 1rem; }
.mis-rutas-alerts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mis-rutas-alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}
.mis-rutas-alert-critical { border-left: 4px solid #dc2626; }
.mis-rutas-alert-warn { border-left: 4px solid #f59e0b; }
.mis-rutas-alert-watch { border-left: 4px solid #2563eb; }
.mis-rutas-alert-info { border-left: 4px solid #64748b; }
.mis-rutas-alert-copy strong { display: block; margin-bottom: 2px; }

.mis-rutas-weekly-exam-panel { margin-bottom: 1rem; }
.mis-rutas-weekly-exam-card { width: min(720px, calc(100vw - 24px)); max-height: min(88vh, 900px); overflow: auto; }
.mis-rutas-weekly-exam-search { display: block; margin-bottom: 12px; }
.mis-rutas-weekly-exam-list { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; padding-right: 4px; }
.mis-rutas-weekly-exam-row {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}
.mis-rutas-weekly-exam-row.is-hidden { display: none; }
.mis-rutas-weekly-exam-row-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

.mis-rutas-suggest-inline {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  background: #f8fbff;
}
.mis-rutas-suggest-inline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mis-rutas-suggest-inline-head strong { display: block; font-size: 1rem; margin-top: 2px; }
.mis-rutas-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mis-rutas-suggest-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.mis-rutas-suggest-order {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  background: #0f172a;
  color: #fff;
}
.mis-rutas-suggest-item-body strong { display: block; line-height: 1.25; }
.mis-rutas-suggest-inline-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.mis-rutas-suggest-empty { margin: 8px 0; padding: 0; }
.plan-seller-id .plan-seller-suggest-btn {
  margin-top: 8px;
  min-height: 36px;
  width: 100%;
  max-width: 160px;
}
.plan-seller-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.mis-rutas-ruta-head {
  align-items: center;
}
.plan-team-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.buyer-agenda-table-wrap { margin-top: 12px; }
.agenda-state { font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.agenda-state-critical { background: #fee2e2; color: #b91c1c; }
.agenda-state-warn { background: #fef3c7; color: #b45309; }
.agenda-state-info { background: #dbeafe; color: #1d4ed8; }
.mis-rutas-col-actions { white-space: nowrap; }
.mis-rutas-col-actions .text-btn { margin-right: 6px; }
.panel-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }

/* Mobile-first vendor UX */
.mis-rutas-vendor-view { padding-bottom: 88px; }
.mis-rutas-greeting { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
.mis-rutas-midia-hero { margin-bottom: 1rem; }
.mis-rutas-kpi-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1rem;
}
.mis-rutas-kpi-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.mis-rutas-kpi-card strong { display: block; font-size: 1.05rem; margin-top: 4px; }
.mis-rutas-action-buttons { display: grid; gap: 10px; margin-bottom: 1rem; }
.mis-rutas-big-btn { min-height: 48px; width: 100%; font-size: 1rem; font-weight: 800; }
.mis-rutas-mobile-cards { display: grid; gap: 12px; }
.mis-rutas-mobile-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.mis-rutas-mobile-card.is-done { opacity: 0.72; }
.mis-rutas-mobile-card-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.mis-rutas-route-order {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #0f172a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
}
.mis-rutas-mobile-metrics { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 0.78rem; color: #64748b; margin-bottom: 8px; }
.mis-rutas-mobile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mis-rutas-mobile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mis-rutas-mobile-actions .primary-btn,
.mis-rutas-mobile-actions .secondary-btn,
.mis-rutas-mobile-actions .ghost-btn { min-height: 42px; flex: 1 1 calc(50% - 4px); }
.mis-rutas-zone-group { margin-bottom: 1rem; }
.mis-rutas-zone-title { margin: 0 0 8px; font-size: 0.95rem; }
.mis-rutas-route-planner { margin-bottom: 1rem; }
.mis-rutas-pilot-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 600;
}
.mis-rutas-route-kpis { margin-bottom: 12px; }
.mis-rutas-route-map-panel { margin-bottom: 12px; }
.mis-rutas-route-map-wrap { border-radius: 12px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.08); }
.mis-rutas-route-map { display: block; width: 100%; height: auto; }
.mis-rutas-route-map-bg { fill: #f8fafc; }
.mis-rutas-route-map-lane { stroke: rgba(100, 116, 139, 0.35); stroke-dasharray: 4 4; }
.mis-rutas-route-map-col { fill: rgba(37, 99, 235, 0.04); stroke: rgba(37, 99, 235, 0.12); stroke-width: 1; }
.mis-rutas-route-map-zone-label { fill: #475569; font-size: 9px; font-weight: 700; font-family: system-ui, sans-serif; }
.mis-rutas-route-map-path { fill: none; stroke: #2563eb; stroke-width: 2; stroke-linejoin: round; }
.mis-rutas-route-map-stop circle { fill: #fff; stroke: #2563eb; stroke-width: 2; }
.mis-rutas-route-map-stop.is-done circle { fill: #16a34a; stroke: #16a34a; }
.mis-rutas-route-map-stop text { fill: #0f172a; font-size: 9px; font-weight: 700; font-family: system-ui, sans-serif; }
.mis-rutas-route-map-stop.is-done text { fill: #fff; }
.mis-rutas-route-map-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.mis-rutas-route-map-legend-item { font-size: 0.75rem; color: #475569; }
.mis-rutas-route-map-note { margin: 6px 0 0; font-size: 0.72rem; }
.mis-rutas-route-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mis-rutas-route-phases-fold { margin: 0 0 12px; }
.mis-rutas-route-phases-fold > summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; }
.mis-rutas-route-phases { margin: 0; padding-left: 18px; }
.mis-rutas-route-phase { margin-bottom: 10px; }
.mis-rutas-route-phase strong { display: block; font-size: 0.82rem; }
.mis-rutas-route-list .mis-rutas-route-card { margin-bottom: 0; }
.mis-rutas-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.mis-rutas-bottom-nav-btn {
  border: 0; background: transparent; border-radius: 12px;
  min-height: 52px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 0.62rem; font-weight: 800; color: #64748b; cursor: pointer;
}
.mis-rutas-bottom-nav-btn span { font-size: 1rem; line-height: 1; }
.mis-rutas-bottom-nav-btn.is-active { background: #0f172a; color: #fff; }
.mis-rutas-report-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mis-rutas-no-purchase-wrap.is-hidden,
.mis-rutas-no-purchase-other.is-hidden { display: none; }
.mis-rutas-required { color: #b91c1c; }
.mis-rutas-drawer-section { margin-bottom: 14px; }
.mis-rutas-drawer-section h4 { margin: 0 0 6px; font-size: 0.88rem; }
.mis-rutas-drawer-list { margin: 0; padding-left: 18px; }
.mis-rutas-drawer-list li { margin-bottom: 8px; line-height: 1.35; }
.mis-rutas-vendor-link { text-align: left; padding: 0; }

.mis-rutas-validation-guide {
  margin: 0 0 1rem;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}
.mis-rutas-validation-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.mis-rutas-validation-steps {
  margin: 0 1rem 1rem;
  padding-left: 1.25rem;
  color: #334155;
  font-size: 0.88rem;
  line-height: 1.45;
  list-style: disc;
}
.mis-rutas-validation-steps li {
  margin-bottom: 0.45rem;
}

/* Vendedores tab — grid + workspace */
.mis-rutas-vendedores-grid-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
}
.mis-rutas-vendedores-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: min(240px, 100%);
}
.mis-rutas-vendedores-search {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  font-size: 0.88rem;
  background: #fff;
}
.mis-rutas-vendedores-team-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.mis-rutas-vendedores-team-stat {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.mis-rutas-vendedores-team-stat.is-warn { background: #fffbeb; border-color: #fde68a; }
.mis-rutas-vendedores-team-stat.is-watch { background: #eff6ff; border-color: #bfdbfe; }
.mis-rutas-vendedores-team-stat.is-ok { background: #f0fdf4; border-color: #bbf7d0; }
.mis-rutas-vendedores-team-stat strong { display: block; font-size: 1.05rem; margin-top: 2px; }
.mis-rutas-vendedores-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.mis-rutas-vendedores-grid-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 8px 10px;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 14px 40px 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  overflow: hidden;
}
.mis-rutas-vendedores-grid-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #94a3b8;
}
.mis-rutas-vendedores-grid-item.estado-muted::before { background: #94a3b8; }
.mis-rutas-vendedores-grid-item.estado-warn::before { background: #f59e0b; }
.mis-rutas-vendedores-grid-item.estado-watch::before { background: #3b82f6; }
.mis-rutas-vendedores-grid-item.estado-ok::before { background: #16a34a; }
.mis-rutas-vendedores-grid-item:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}
.mis-rutas-vendedores-grid-item.is-hidden { display: none; }
.mis-rutas-vendedores-grid-main {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mis-rutas-vendedores-grid-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mis-rutas-vendedores-grid-copy strong {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mis-rutas-vendedores-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.mis-rutas-vendedores-avatar.is-large {
  width: 48px; height: 48px;
  font-size: 0.85rem;
}
.mis-rutas-vendedores-grid-progress {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.mis-rutas-vendedores-grid-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
  transition: width 0.2s ease;
}
.mis-rutas-vendedores-grid-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mis-rutas-vendedores-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}
.mis-rutas-vendedores-chip.is-risk { background: #fef2f2; color: #b91c1c; }
.mis-rutas-vendedores-chip.is-sales { background: #ecfdf5; color: #047857; }
.mis-rutas-vendedores-grid-item .plan-seller-badge {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.mis-rutas-vendedores-grid-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: #94a3b8;
  font-weight: 300;
}
.mis-rutas-vendedores-search-empty { margin: 8px 0 0; text-align: center; }
.mis-rutas-vendedores-search-empty.is-hidden { display: none; }

.mis-rutas-vendedores-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px 24px;
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.mis-rutas-vendedores-workspace-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.mis-rutas-vendedores-workspace-title h3 {
  margin: 0;
  font-size: 1.2rem;
}
.mis-rutas-back-team {
  flex-shrink: 0;
  font-size: 0.82rem;
  padding: 6px 10px;
  align-self: flex-start;
}
.mis-rutas-vendedores-workspace-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mis-rutas-vendedores-route-progress {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.mis-rutas-vendedores-route-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.mis-rutas-vendedores-workspace-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.mis-rutas-vendedores-workspace-kpis > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.mis-rutas-vendedores-workspace-kpis strong {
  font-size: 0.95rem;
}
.mis-rutas-vendedores-metas {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
}

.mis-rutas-route-workspace-body.is-compact {
  display: grid;
  gap: 12px;
}
.mis-rutas-route-planner.is-compact {
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.mis-rutas-route-planner.is-compact .mis-rutas-route-toolbar {
  margin-bottom: 0;
}
.mis-rutas-route-toolbar-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
}
.mis-rutas-route-map-fold {
  margin-bottom: 10px;
}
.mis-rutas-route-map-fold > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.mis-rutas-stops-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mis-rutas-stops-head h4 {
  margin: 0;
  font-size: 0.95rem;
}
.mis-rutas-route-zone-block {
  margin-bottom: 14px;
}
.mis-rutas-route-zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.1);
}
.mis-rutas-route-zone-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #1e40af;
}
.mis-rutas-route-card.is-compact {
  padding: 12px;
  border-radius: 12px;
}
.mis-rutas-route-card.is-compact .mis-rutas-mobile-card-head {
  margin-bottom: 6px;
}
.mis-rutas-route-card.is-compact .mis-rutas-route-order {
  width: 24px; height: 24px;
  font-size: 0.72rem;
}
.mis-rutas-mobile-actions.is-compact {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: center;
}
.mis-rutas-mobile-actions.is-compact .primary-btn,
.mis-rutas-mobile-actions.is-compact .secondary-btn {
  min-height: 38px;
  flex: none;
}
.mis-rutas-route-reorder {
  display: flex;
  gap: 4px;
}
.mis-rutas-route-reorder .mi-ruta-btn-icon {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
}
.mis-rutas-empty-route {
  padding: 20px 16px;
  text-align: center;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed rgba(15, 23, 42, 0.12);
}
.mis-rutas-cumplimiento-route .panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 900px) {
  .mis-rutas-vendedores-team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mis-rutas-vendedores-workspace-head { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .mis-rutas-vendedores-grid-list { grid-template-columns: 1fr; }
  .mis-rutas-mobile-actions.is-compact {
    grid-template-columns: 1fr 1fr;
  }
  .mis-rutas-route-reorder {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.mis-rutas-customer-card { max-height: min(86vh, 760px); overflow: auto; }
.mis-rutas-report-backdrop .mis-rutas-report-card { max-height: min(92vh, 720px); overflow: auto; }

@media (max-width: 680px) {
  .mis-rutas-tabs-desktop { display: none; }
  .mis-rutas-bottom-nav { display: grid; }
  .mis-rutas-desktop-only { display: none !important; }
  .mis-rutas-kpi-cards { grid-template-columns: 1fr; }
}

@media (min-width: 681px) {
  .mis-rutas-mobile-only { display: none !important; }
  .mis-rutas-vendor-view { padding-bottom: 0; }
}

@media (max-width: 680px) {
  .mis-rutas-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .mis-rutas-tab { flex: 0 0 auto; }
}

@media (max-width: 900px) {
  .plan-team-review-grid { grid-template-columns: 1fr; }
  .mis-rutas-table .mis-rutas-col-reason, .mis-rutas-table .mis-rutas-col-action { max-width: 140px; }
}
@media (max-width: 680px) {
  .mi-ruta-pulse-tiles { grid-template-columns: 1fr; }
  .mi-ruta-stop {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .mi-ruta-stop-actions {
    grid-column: 1 / -1;
    max-width: none;
    justify-content: stretch;
  }
  .mi-ruta-stop-actions .mi-ruta-btn {
    flex: 1 1 calc(50% - 6px);
  }
  .mi-ruta-day-toolbar .secondary-btn,
  .mi-ruta-day-toolbar .ghost-btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }
}

/* ── Mis Rutas · vista ejecutiva ─────────────────────────────── */
.mis-rutas-executive {
  --mr-space: 1.25rem;
  --mr-card-gap: 14px;
}
.mis-rutas-executive .mis-rutas-hero {
  margin-bottom: var(--mr-space);
  padding-bottom: 0.25rem;
}
.mis-rutas-executive .mis-rutas-hero h2 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mis-rutas-executive-body {
  display: flex;
  flex-direction: column;
  gap: var(--mr-space);
}
.mis-rutas-executive-body > * {
  margin-bottom: 0 !important;
}
.mis-rutas-section-sub {
  display: block;
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.mis-rutas-executive-hero .mis-rutas-greeting {
  font-size: 1.35rem;
  margin-bottom: 4px;
}
.mis-rutas-hero-date {
  margin: 0;
}
.mis-rutas-kpi-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--mr-card-gap) !important;
}
.mis-rutas-kpi-row-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--mr-card-gap) !important;
}
.mis-rutas-kpi-row-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--mr-card-gap) !important;
}
.mis-rutas-executive .mis-rutas-resumen-kpis .portal-today-tile,
.mis-rutas-executive .mis-rutas-vendor-kpis .portal-today-tile {
  min-height: 108px;
  padding: 14px 16px;
  border-radius: 16px;
}
.mis-rutas-executive-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--mr-space);
}
.mis-rutas-executive-cta .mis-rutas-cta-primary {
  min-height: 54px;
  font-size: 1.05rem;
  border-radius: 14px;
}
.mis-rutas-executive-fold {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.mis-rutas-executive-fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.mis-rutas-executive-fold > summary::-webkit-details-marker { display: none; }
.mis-rutas-executive-fold > summary::after {
  content: "▾";
  color: #94a3b8;
  font-size: 0.9rem;
  margin-left: auto;
}
.mis-rutas-executive-fold[open] > summary::after { transform: rotate(180deg); }
.mis-rutas-executive-fold > :not(summary) {
  padding: 0 18px 16px;
}
.mis-rutas-alerts-fold > summary.mis-rutas-alerts-fold-summary {
  padding: 14px 18px;
}
.mis-rutas-alerts-count {
  font-size: 0.72rem;
  margin-left: 8px;
}
.mis-rutas-alerts-fold .mis-rutas-alerts-list {
  padding: 0 18px 16px;
}
.mis-rutas-route-tools-fold {
  margin-bottom: var(--mr-card-gap);
  border: 1px dashed rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 0 12px;
  background: #f8fafc;
}
.mis-rutas-route-tools-fold > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px 4px;
  color: #475569;
}
.mis-rutas-route-tools-fold > summary::-webkit-details-marker { display: none; }
.mis-rutas-executive-route .mis-rutas-route-list {
  gap: var(--mr-card-gap);
}
.mis-rutas-route-card.is-executive {
  padding: 16px 18px;
  border-radius: 16px;
  border-color: rgba(15, 23, 42, 0.06);
}
.mis-rutas-route-card.is-executive .mis-rutas-mobile-card-head {
  margin-bottom: 6px;
  align-items: center;
}
.mis-rutas-route-card-main {
  flex: 1;
  min-width: 0;
}
.mis-rutas-route-card-main strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.25;
}
.mis-rutas-route-card-hint {
  margin: 0 0 10px;
  font-size: 0.82rem;
}
.mis-rutas-mobile-actions.is-single-action {
  display: block;
  margin-top: 4px;
}
.mis-rutas-mobile-actions.is-single-action .mis-rutas-route-primary-action {
  width: 100%;
  min-height: 46px;
  font-weight: 800;
  border-radius: 12px;
}
.mis-rutas-see-all {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding: 10px;
}
.mis-rutas-table-compact th,
.mis-rutas-table-compact td {
  padding: 10px 12px;
  font-size: 0.88rem;
}
.mis-rutas-tabs-executive {
  gap: 6px;
}
.mis-rutas-tabs-executive .mis-rutas-tab {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 0.88rem;
}
.mis-rutas-bottom-nav-executive {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
}
.mis-rutas-bottom-nav-executive .mis-rutas-bottom-nav-btn {
  min-height: 56px;
  font-size: 0.68rem;
  border-radius: 14px;
  gap: 4px;
}
.mis-rutas-bottom-nav-executive .mis-rutas-bottom-nav-btn span {
  font-size: 1.15rem;
}
.mis-rutas-vendor-view.mis-rutas-executive {
  padding-bottom: 96px;
}
.mis-rutas-executive .work-panel {
  border-radius: 16px;
  padding: 18px 20px;
}
.mis-rutas-executive .mis-rutas-empty {
  padding: 32px 20px;
}

@media (max-width: 900px) {
  .mis-rutas-kpi-row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mis-rutas-kpi-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
  .mis-rutas-kpi-row-3,
  .mis-rutas-kpi-row-4,
  .mis-rutas-kpi-row-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mis-rutas-executive .mis-rutas-hero h2 { font-size: 1.4rem; }
}

/* ───────────────────────────────────────────────────────────────
   Hub ejecutivo de Inventario (Stock Crítico)
   - Header ejecutivo
   - KPIs con tonos semánticos
   - Acciones urgentes
   - Tabla con badges y columna de acción
   - Vista por suplidor con criticidad
   ─────────────────────────────────────────────────────────────── */

/* Header del hub */
.inventory-hub .inventory-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.inventory-hub-titles .eyebrow {
  margin: 0 0 4px;
}
.inventory-hub-titles h3 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.inventory-hub-sub {
  margin: 6px 0 0;
  color: #475569;
  font-size: 0.92rem;
  max-width: 56ch;
}
.inventory-hub-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: #475569;
}
.inventory-hub-source {
  font-weight: 600;
  color: #334155;
}
.inventory-hub-stamp {
  font-size: 11px;
  color: #64748b;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.20);
  color: #047857;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* KPIs ejecutivos */
.inventory-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
@media (max-width: 1100px) {
  .inventory-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .inventory-kpis { grid-template-columns: 1fr; }
}
.inventory-kpi {
  position: relative;
  background: linear-gradient(140deg, #64748b 0%, #475569 45%, #334155 100%);
  border: none;
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
  min-height: 128px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.inventory-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at 0% 120%, rgba(0, 0, 0, 0.16), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.inventory-kpi.tone-good { background: linear-gradient(140deg, #10b981 0%, #059669 45%, #047857 100%); }
.inventory-kpi.tone-warn { background: linear-gradient(140deg, #fbbf24 0%, #d97706 45%, #b45309 100%); }
.inventory-kpi.tone-alert { background: linear-gradient(140deg, #fb923c 0%, #ea580c 45%, #c2410c 100%); }
.inventory-kpi.tone-critical { background: linear-gradient(140deg, #ef4444 0%, #dc2626 45%, #991b1b 100%); }
.inventory-kpi.tone-info { background: linear-gradient(140deg, #3b82f6 0%, #2563eb 45%, #1d4ed8 100%); }
.inventory-kpi:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 14px 28px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.inventory-kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0;
}
.inventory-kpi-value {
  font-size: 2.35rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.inventory-kpi.tone-critical .inventory-kpi-value,
.inventory-kpi.tone-warn .inventory-kpi-value,
.inventory-kpi.tone-alert .inventory-kpi-value,
.inventory-kpi.tone-good .inventory-kpi-value { color: #ffffff; }
.inventory-kpi-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
  font-weight: 500;
}
.inventory-kpi-action {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  opacity: 0.95;
}
.inventory-kpi-action::after {
  content: "";
  display: inline-block;
  margin-left: 2px;
}

/* Acciones urgentes */
.inventory-urgent {
  margin: 0 0 18px;
}
.inventory-urgent-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.inventory-urgent-head strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
}
.inventory-urgent-hint {
  font-size: 11.5px;
  color: #64748b;
}
.inventory-urgent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) {
  .inventory-urgent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .inventory-urgent-grid { grid-template-columns: 1fr; }
}
.inventory-urgent-card {
  position: relative;
  background: linear-gradient(140deg, #64748b 0%, #475569 45%, #334155 100%);
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
  min-height: 110px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.inventory-urgent-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at 0% 120%, rgba(0, 0, 0, 0.16), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.inventory-urgent-card.tone-critical { background: linear-gradient(140deg, #ef4444 0%, #dc2626 45%, #991b1b 100%); }
.inventory-urgent-card.tone-alert { background: linear-gradient(140deg, #fb923c 0%, #ea580c 45%, #c2410c 100%); }
.inventory-urgent-card.tone-warn { background: linear-gradient(140deg, #fbbf24 0%, #d97706 45%, #b45309 100%); }
.inventory-urgent-card.tone-info { background: linear-gradient(140deg, #3b82f6 0%, #2563eb 45%, #1d4ed8 100%); }
.inventory-urgent-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 14px 28px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.inventory-urgent-card.is-empty {
  cursor: default;
}
.inventory-urgent-card.is-empty:hover {
  transform: none;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.inventory-urgent-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.inventory-urgent-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.92;
}
.inventory-urgent-count {
  font-size: 1.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.inventory-urgent-card.tone-critical .inventory-urgent-count,
.inventory-urgent-card.tone-alert .inventory-urgent-count,
.inventory-urgent-card.tone-warn .inventory-urgent-count,
.inventory-urgent-card.tone-info .inventory-urgent-count { color: #ffffff; }
.inventory-urgent-reason {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
  font-weight: 500;
}
.inventory-urgent-action {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

/* Badges de "Acción" en la tabla */
.inventory-action-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.inventory-action-pill.action-critical { background: #fee2e2; color: #991b1b; }
.inventory-action-pill.action-alert { background: #ffedd5; color: #9a3412; }
.inventory-action-pill.action-warn { background: #fef3c7; color: #92400e; }
.inventory-action-pill.action-info { background: #dbeafe; color: #1e40af; }
.inventory-action-pill.action-calm { background: rgba(16, 185, 129, 0.12); color: #047857; }

/* Tabla: refuerza la lectura con tonos sutiles por fila */
.inventory-table tbody tr.is-row-critical { background: rgba(220, 38, 38, 0.03); }
.inventory-table tbody tr.is-row-alert { background: rgba(251, 146, 60, 0.04); }
.inventory-table tbody tr.is-row-warn { background: rgba(245, 158, 11, 0.04); }
.inventory-table tbody tr.is-row-info { background: rgba(37, 99, 235, 0.03); }
.inventory-table tbody tr:hover { background: rgba(15, 23, 42, 0.025); }
.inventory-table tbody tr[data-inv-material] {
  cursor: pointer;
}
.inventory-table tbody tr.is-selected {
  background: rgba(37, 99, 235, 0.08);
  box-shadow: inset 3px 0 0 #2563eb;
}
.inventory-table tbody tr.is-selected:hover {
  background: rgba(37, 99, 235, 0.11);
}

.inventory-product-detail-wrap:not([hidden]) {
  margin: 0 0 16px;
}
.inventory-product-detail {
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(255, 255, 255, 0.98) 55%);
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.inventory-product-detail.from-master {
  border-color: rgba(100, 116, 139, 0.28);
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(255, 255, 255, 0.98) 55%);
}
.inventory-product-detail.is-empty {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.95);
}
.inventory-product-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.inventory-product-detail-head h4 {
  margin: 4px 0 0;
  font-size: 1rem;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.inventory-product-detail-meta {
  margin: 6px 0 0;
}
.inventory-product-detail-close {
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.inventory-product-detail-close:hover {
  background: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}
.inventory-product-detail-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.inventory-product-detail-supplier {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inventory-product-detail-supplier strong {
  font-size: 1.05rem;
  color: #0f172a;
}
.inventory-product-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

/* Chip de "críticos" en vista por suplidor — heredado del bloque de arriba */

/* Responsive iPad / móvil del hub */
@media (max-width: 820px) {
  .inventory-hub .inventory-hub-head {
    flex-direction: column;
    gap: 8px;
  }
  .inventory-hub-meta {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .inventory-hub-titles h3 { font-size: 1.25rem; }
  .inventory-kpi-value { font-size: 1.55rem; }
  .inventory-urgent-count { font-size: 1.2rem; }
  .inventory-table-wrap { overflow-x: auto; }
  .inventory-table { min-width: 760px; }
}

.marketing-embed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: calc(100vh - 180px);
}

.marketing-embed-toolbar {
  display: flex;
  justify-content: flex-end;
}

.marketing-embed-frame {
  flex: 1;
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.1));
  border-radius: var(--radius-lg, 12px);
  background: #fff;
}

/* Tablero editable de compras — alineado al design system del dashboard */
.purchase-content .compras-board-shell {
  margin-bottom: 0.5rem;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: var(--surface-elevated, #fff);
}

.compras-board-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft, rgba(15, 23, 42, 0.1));
}

.compras-board-panel-heading h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.compras-board-panel-heading .cell-sub {
  margin-top: 4px;
  font-size: 0.78rem;
}

.compras-board-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.02);
}

.compras-board-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compras-board-section {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: var(--surface-elevated, #fff);
  padding: 8px 10px 10px;
}

.compras-board-section + .compras-board-section {
  margin-top: 0;
  padding-top: 8px;
  border-top: none;
}

.compras-board-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.compras-board-section-heading h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

.compras-board-add-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
}

.purchase-content .compras-board-section .table-shell {
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: auto;
  max-width: 100%;
}

.compras-board-table {
  min-width: 860px;
  font-size: 0.875rem;
}

.compras-board-table thead th {
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.78rem;
  white-space: nowrap;
}

.compras-board-table tbody td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.compras-board-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.025);
}

.compras-board-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.06);
}

.compras-board-table thead .compras-board-sticky {
  z-index: 3;
  background: var(--panel, #f8fafc);
}

.compras-board-table tbody td.compras-board-sticky:nth-child(2),
.compras-board-table thead th.compras-board-sticky:nth-child(2) {
  left: 88px;
}

.compras-board-table tbody td {
  padding: 0.4rem 0.6rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.compras-board-table tbody tr:last-child td {
  border-bottom: none;
}

.compras-board-table tfoot.compras-board-foot td {
  background: rgba(15, 23, 42, 0.03);
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  padding: 0.55rem 0.75rem;
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
}

.compras-board-table tfoot.compras-board-foot strong {
  color: var(--ink, #0f172a);
  font-weight: 700;
}

.compras-board-input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: var(--panel, #fff);
  padding: 0.32rem 0.45rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink, #0f172a);
  border-radius: 6px;
}

.compras-board-input:hover {
  border-color: rgba(31, 71, 136, 0.28);
  background: var(--panel, #fff);
}

.compras-board-input:focus {
  outline: none;
  border-color: rgba(31, 71, 136, 0.45);
  background: var(--panel, #fff);
  box-shadow: 0 0 0 3px rgba(31, 71, 136, 0.1);
}

.compras-board-input.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.compras-board-delete-btn {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  line-height: 1;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.compras-board-reset-btn {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.08);
  color: #1e40af;
  border-radius: 6px;
  margin-right: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.compras-board-reset-btn:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: #1e40af;
}

.compras-board-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.24);
  color: #1e40af;
  font-weight: 500;
  margin-top: 6px;
}
.compras-board-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
  flex: 0 0 auto;
}

/* ============================================================================
   Gráfico de antigüedad en decisión (usado en Inicio y Resumen de Compras).
   Cada tile es un botón clickeable con color tipo semáforo según la edad.
   ============================================================================ */
.aging-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  margin-bottom: 16px;
}
.aging-chart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.aging-chart-head .eyebrow { margin: 0 0 2px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; font-weight: 600; }
.aging-chart-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.aging-chart-head .cell-sub { margin: 4px 0 0; color: #94a3b8; font-size: 0.78rem; }
.aging-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}
.aging-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid transparent;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  text-align: left;
  font-family: inherit;
  min-height: 96px;
}
.aging-tile:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); }
.aging-tile:disabled, .aging-tile.is-empty { cursor: default; opacity: 0.55; }
.aging-tile-label { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.92; }
.aging-tile-count { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.aging-tile-sub { font-size: 0.72rem; opacity: 0.82; margin-top: 2px; }

.aging-tile.aging-tone-good { background: linear-gradient(135deg, #059669 0%, #047857 100%); border-color: #047857; }
.aging-tile.aging-tone-warn { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); border-color: #b45309; }
.aging-tile.aging-tone-danger { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); border-color: #c2410c; }
.aging-tile.aging-tone-critical { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); border-color: #991b1b; }

@media (max-width: 720px) {
  .aging-chart-grid { grid-template-columns: repeat(2, 1fr); }
}

.aging-chart-empty {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}
.aging-chart-empty .aging-chart-head h3 { color: #065f46; }
.aging-chart-empty .eyebrow { color: #047857; }
.aging-chart-empty .cell-sub { color: #059669; }
.aging-empty-badge {
  background: #059669;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.32);
}

/* Modal desplegado al hacer click en un bucket. Se cierra con ESC, click fuera,
   o click en la X. Click en una fila abre el drawer de la orden. */
.aging-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
  animation: agingFade 0.15s ease-out;
}
@keyframes agingFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.aging-modal-open { overflow: hidden; }
.aging-modal {
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 12vh);
}
.aging-modal-head {
  padding: 18px 22px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.aging-modal-head.aging-tone-good { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.aging-modal-head.aging-tone-warn { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.aging-modal-head.aging-tone-danger { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
.aging-modal-head.aging-tone-critical { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.aging-modal-head .eyebrow { margin: 0 0 4px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.88; font-weight: 600; }
.aging-modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.aging-modal-close {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.aging-modal-close:hover { background: rgba(255, 255, 255, 0.28); }
.aging-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.aging-modal-row { border-bottom: 1px solid #f1f5f9; }
.aging-modal-row:last-child { border-bottom: none; }
.aging-modal-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease;
}
.aging-modal-item:hover { background: #f8fafc; }
.aging-modal-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.aging-modal-item-main strong { font-size: 0.95rem; color: #0f172a; }
.aging-modal-supplier { font-size: 0.85rem; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aging-modal-code { font-size: 0.72rem; color: #94a3b8; font-family: ui-monospace, "SF Mono", monospace; }
.aging-modal-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.aging-modal-days { font-size: 0.85rem; font-weight: 700; color: #dc2626; }
.aging-modal-total { font-size: 0.82rem; color: #475569; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Reporte de gestiones CRM (usado en Créditos y cobros).
   6 tarjetas con contadores clickeables + tabla opcional por vendedor.
   ============================================================================ */
.crm-report {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crm-report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.crm-report-head .eyebrow { margin: 0 0 2px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; font-weight: 600; }
.crm-report-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.crm-report-head .cell-sub { margin: 4px 0 0; color: #64748b; font-size: 0.82rem; }
.crm-report-periods { display: inline-flex; gap: 4px; background: #f1f5f9; padding: 3px; border-radius: 999px; }
.crm-report-period-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.crm-report-period-btn:hover:not(.is-active) { background: rgba(255, 255, 255, 0.6); }
.crm-report-period-btn.is-active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); }
.crm-report-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
}
.crm-report-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px 14px;
  border-radius: 14px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  text-align: left;
  font-family: inherit;
  min-height: 128px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  isolation: isolate;
}
.crm-report-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at 0% 120%, rgba(0, 0, 0, 0.16), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.crm-report-tile:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 14px 28px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.crm-report-tile:disabled, .crm-report-tile.is-empty { cursor: default; }
.crm-report-tile-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.3rem;
  opacity: 0.55;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}
.crm-report-tile-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
  padding-right: 28px;
  line-height: 1.15;
}
.crm-report-tile-count {
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.crm-report-tile-sub {
  font-size: 0.72rem;
  opacity: 0.85;
  font-weight: 500;
  line-height: 1.2;
}

.crm-report-tone-good {
  background:
    linear-gradient(140deg, #10b981 0%, #059669 45%, #047857 100%);
}
.crm-report-tone-danger {
  background:
    linear-gradient(140deg, #ef4444 0%, #dc2626 45%, #991b1b 100%);
}
.crm-report-tone-info {
  background:
    linear-gradient(140deg, #3b82f6 0%, #2563eb 45%, #1d4ed8 100%);
}
.crm-report-tone-warn {
  background:
    linear-gradient(140deg, #f59e0b 0%, #d97706 45%, #b45309 100%);
}
.crm-report-tone-purple {
  background:
    linear-gradient(140deg, #a855f7 0%, #7c3aed 45%, #5b21b6 100%);
}
.crm-report-tone-muted {
  background:
    linear-gradient(140deg, #64748b 0%, #475569 45%, #334155 100%);
}

.crm-report-vendor-details { border-top: 1px solid #f1f5f9; padding-top: 8px; }
.crm-report-vendor-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  padding: 6px 0;
  list-style: none;
  outline: none;
}
.crm-report-vendor-details summary::-webkit-details-marker { display: none; }
.crm-report-vendor-details summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
  color: #94a3b8;
}
.crm-report-vendor-details[open] summary::before { transform: rotate(90deg); }
.crm-report-vendor-details summary:hover { color: #0f172a; }
.crm-report-vendor-wrap { margin-top: 10px; overflow-x: auto; }
.crm-report-vendor-table { min-width: 600px; }
.crm-report-vendor-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.crm-report-vendor-table th.num, .crm-report-vendor-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.crm-report-vendor-table tbody tr:hover { background: #f8fafc; }

@media (max-width: 900px) {
  .crm-report-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .crm-report-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Modal del reporte CRM */
.crm-report-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
  animation: agingFade 0.15s ease-out;
}
body.crm-report-modal-open { overflow: hidden; }
.crm-report-modal {
  width: 100%;
  max-width: 720px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 12vh);
}
.crm-report-modal-head {
  padding: 20px 24px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.crm-report-modal-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% -20%, rgba(255, 255, 255, 0.24), transparent 55%),
    radial-gradient(circle at -5% 120%, rgba(0, 0, 0, 0.2), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.crm-report-modal-head .eyebrow { margin: 0 0 4px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.88; font-weight: 600; }
.crm-report-modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.crm-report-modal-close {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.crm-report-modal-close:hover { background: rgba(255, 255, 255, 0.28); }
.crm-report-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.crm-report-modal-row { border-bottom: 1px solid #f1f5f9; }
.crm-report-modal-row:last-child { border-bottom: none; }
.crm-report-modal-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease;
}
.crm-report-modal-item:hover { background: #f8fafc; }
.crm-report-modal-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.crm-report-modal-main strong { font-size: 0.95rem; color: #0f172a; }
.crm-report-modal-sub { font-size: 0.82rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-report-modal-promise { font-size: 0.8rem; color: #7c3aed; font-weight: 600; margin-top: 2px; }
.crm-report-modal-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.crm-report-modal-when { font-size: 0.75rem; color: #94a3b8; }

/* ============================================================================
   Buyer Agenda — Sugerencias automáticas de visitas dentro del Plan Semanal.
   Basado en historial de compra: predice cuándo cada cliente vuelve a comprar
   y agrupa por vendedor y urgencia.
   ============================================================================ */
.buyer-agenda {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.buyer-agenda-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.buyer-agenda-head .eyebrow { margin: 0 0 2px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; font-weight: 600; }
.buyer-agenda-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.buyer-agenda-head .cell-sub { margin: 4px 0 0; color: #64748b; font-size: 0.82rem; max-width: 620px; }
.buyer-agenda-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.buyer-agenda-filter {
  padding: 8px 32px 8px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #0f172a;
  background: #ffffff;
  font-family: inherit;
  cursor: pointer;
  min-width: 220px;
}
.buyer-agenda-filter:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* KPIs de resumen */
.buyer-agenda-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
}
.buyer-agenda-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.buyer-agenda-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at 0% 120%, rgba(0, 0, 0, 0.16), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.buyer-agenda-kpi .eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.buyer-agenda-kpi strong {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.buyer-agenda-kpi .cell-sub { font-size: 0.72rem; opacity: 0.85; color: rgba(255, 255, 255, 0.85); }
.buyer-agenda-kpi.tone-critical { background: linear-gradient(140deg, #ef4444 0%, #dc2626 45%, #991b1b 100%); }
.buyer-agenda-kpi.tone-warn { background: linear-gradient(140deg, #f59e0b 0%, #d97706 45%, #b45309 100%); }
.buyer-agenda-kpi.tone-info { background: linear-gradient(140deg, #10b981 0%, #059669 45%, #047857 100%); }
.buyer-agenda-kpi.tone-muted { background: linear-gradient(140deg, #64748b 0%, #475569 45%, #334155 100%); }

/* Cuerpo expandido: cards por vendedor */
.buyer-agenda-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}
.agenda-seller-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agenda-seller-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.agenda-seller-name {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.agenda-seller-head .cell-sub { font-size: 0.78rem; color: #64748b; }

.agenda-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.agenda-col {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid transparent;
}
.agenda-col-critical { border-top-color: #dc2626; }
.agenda-col-warn { border-top-color: #d97706; }
.agenda-col-info { border-top-color: #059669; }

.agenda-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e2e8f0;
}
.agenda-col-head strong { font-size: 0.82rem; font-weight: 700; color: #0f172a; text-transform: uppercase; letter-spacing: 0.05em; }
.agenda-col-count {
  background: #f1f5f9;
  color: #0f172a;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.agenda-col-critical .agenda-col-count { background: #fee2e2; color: #991b1b; }
.agenda-col-warn .agenda-col-count { background: #fef3c7; color: #92400e; }
.agenda-col-info .agenda-col-count { background: #d1fae5; color: #065f46; }
.agenda-col-empty { padding: 8px 0; text-align: center; }

.agenda-client-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agenda-client-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.agenda-client-row:hover { background: #f1f5f9; border-color: #cbd5e1; }
.agenda-client-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.agenda-client-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.agenda-client-name strong { font-size: 0.85rem; color: #0f172a; }
.agenda-client-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: #64748b;
}
.agenda-client-cadence {
  color: #2563eb;
  font-weight: 600;
}
.agenda-client-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
}
.agenda-days {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e40af;
  white-space: nowrap;
}
.agenda-days-overdue {
  background: #fee2e2;
  color: #991b1b;
}
.agenda-days-today {
  background: #fef3c7;
  color: #92400e;
}
.agenda-cat {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  color: #475569;
}
.agenda-cat-aaa { background: #fef3c7; color: #78350f; }
.agenda-cat-aa { background: #dbeafe; color: #1e3a8a; }
.agenda-cat-a { background: #d1fae5; color: #065f46; }
.agenda-cat-b { background: #e0e7ff; color: #3730a3; }
.agenda-cat-c { background: #f1f5f9; color: #475569; }

.agenda-more-btn {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 0.78rem;
  color: #2563eb;
}
.agenda-more-btn:hover { text-decoration: underline; }

/* Modal (reutiliza estilos de crm-report-modal-backdrop) */
.buyer-agenda-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
  animation: agingFade 0.15s ease-out;
}
.buyer-agenda-modal {
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 12vh);
}
.buyer-agenda-modal-head {
  padding: 20px 24px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-radius: 0;
  border-top: none;
}
.buyer-agenda-modal-head.agenda-col-critical { background: linear-gradient(140deg, #ef4444 0%, #dc2626 45%, #991b1b 100%); }
.buyer-agenda-modal-head.agenda-col-warn { background: linear-gradient(140deg, #f59e0b 0%, #d97706 45%, #b45309 100%); }
.buyer-agenda-modal-head.agenda-col-info { background: linear-gradient(140deg, #10b981 0%, #059669 45%, #047857 100%); }
.buyer-agenda-modal-head .eyebrow { margin: 0 0 4px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; font-weight: 600; }
.buyer-agenda-modal-head h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.buyer-agenda-modal-list { padding: 12px 20px 20px; overflow-y: auto; }

@media (max-width: 1000px) {
  .buyer-agenda-summary { grid-template-columns: repeat(2, 1fr); }
  .agenda-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .buyer-agenda-head { flex-direction: column; align-items: stretch; }
  .buyer-agenda-actions { justify-content: space-between; }
  .buyer-agenda-filter { flex: 1; min-width: 0; }
}

/* Celda con dato editado manualmente por Belkis (dirty tracking).
   El punto azul en la esquina indica "esto no se sobrescribe con SAP". */
.resumen-compras-view td.is-dirty,
.ordenes-view td.is-dirty {
  position: relative;
}
.resumen-compras-view td.is-dirty::before,
.ordenes-view td.is-dirty::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
  pointer-events: none;
  z-index: 2;
}
.resumen-compras-view td.is-dirty .resumen-cell-input,
.ordenes-view td.is-dirty .resumen-cell-input {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(37, 99, 235, 0.04);
}

[data-theme="dark"] .compras-board-section {
  background: var(--panel);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .compras-board-section-heading h3,
[data-theme="dark"] .compras-board-table tfoot.compras-board-foot strong {
  color: var(--ink);
}

[data-theme="dark"] .compras-board-input {
  color: var(--ink);
  background: var(--panel-2);
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .compras-board-input:focus {
  background: var(--panel-2);
}

[data-theme="dark"] .compras-board-table tfoot.compras-board-foot td {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .purchase-content .compras-board-section .table-shell {
  border-color: rgba(255, 255, 255, 0.12);
}

.compras-board-row-highlight {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
  background: rgba(37, 99, 235, 0.08);
}

.purchase-content .metrics .metric[data-metric-tab] {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.purchase-content .metrics .metric[data-metric-tab]:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.purchase-content .metrics .metric small {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--ink-muted, #64748b);
  font-weight: 600;
}

/* Mini-dashboard al entrar a Compras */
.compras-home-panel {
  margin-bottom: 0.75rem;
}

.compras-home-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.compras-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 960px) {
  .compras-home-grid {
    grid-template-columns: 1fr;
  }
}

.compras-home-block {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel, #f8fafc);
}

.compras-home-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.compras-home-block-head h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
}

.compras-home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compras-home-link {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  cursor: pointer;
}

.compras-home-link:hover {
  border-color: rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.04);
}

.compras-home-link strong {
  display: block;
  font-size: 0.82rem;
}

.compras-home-link span {
  display: block;
  font-size: 0.78rem;
}

.compras-home-empty {
  margin: 0;
  font-size: 0.78rem;
  padding: 4px 0;
}

.compras-home-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

body.print-resumen-compras .sidebar,
body.print-resumen-compras .topbar-actions,
body.print-resumen-compras #purchaseTabs,
body.print-resumen-compras .metrics,
body.print-resumen-compras .toolbar,
body.print-resumen-compras #ordersTableShell,
body.print-resumen-compras #comprasHomeShell,
body.print-resumen-compras #sapComprasBanner,
body.print-resumen-compras .compras-board-toolbar,
body.print-resumen-compras .resumen-compras-head .compras-board-toolbar {
  display: none !important;
}

body.print-resumen-compras .resumen-section,
body.print-resumen-compras .ordenes-section.resumen-section {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 8px;
}

body.print-resumen-compras .resumen-cell-input,
body.print-resumen-compras .compras-board-input {
  border: none;
  background: transparent;
  padding: 0;
}

/* Resumen de Compras — misma estética que Órdenes */
.resumen-compras-view {
  padding-bottom: 8px;
}

.resumen-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .resumen-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.resumen-compras-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.resumen-compras-head h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.resumen-table {
  min-width: 1100px;
}

.resumen-table .compras-board-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.06);
}

.resumen-table thead .compras-board-sticky {
  z-index: 3;
  background: var(--panel, #f8fafc);
}

.resumen-table tbody td.compras-board-sticky:nth-child(2),
.resumen-table thead th.compras-board-sticky:nth-child(2) {
  left: 96px;
}

.resumen-cell-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: inherit;
  font-family: inherit;
  background: transparent;
  color: inherit;
}

.resumen-cell-input:hover {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

.resumen-cell-input:focus {
  border-color: rgba(37, 99, 246, 0.45);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 246, 0.12);
}

.resumen-cell-input.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .resumen-cell-input:focus {
  background: var(--panel-2);
}

[data-theme="dark"] .resumen-compras-head {
  background: var(--panel);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Panel "Cerradas manualmente" (dismissedOrders) ─────────────────── */
.dismissed-orders-panel {
  margin-top: 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 12px;
  padding: 12px 16px;
}
.dismissed-orders-panel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #0f172a);
}
.dismissed-orders-panel > summary::-webkit-details-marker { display: none; }
.dismissed-orders-panel > summary::before {
  content: "▸";
  font-size: 12px;
  color: var(--muted, #64748b);
  transition: transform 0.15s ease;
}
.dismissed-orders-panel[open] > summary::before { transform: rotate(90deg); }
.dismissed-summary-count {
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted, #64748b);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.dismissed-orders-hint {
  margin: 10px 0 12px;
  color: var(--muted, #64748b);
  font-size: 12px;
  line-height: 1.5;
}
.dismissed-orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dismissed-order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(148, 163, 184, 0.06);
  border-radius: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.dismissed-order-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  flex-wrap: wrap;
}
.dismissed-order-info strong {
  font-weight: 700;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.dismissed-order-supplier {
  color: var(--text, #0f172a);
}
.dismissed-order-amount {
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
  font-weight: 600;
}
.dismissed-order-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
  min-width: 140px;
}
.dismissed-order-row .mini-btn { flex-shrink: 0; }
@media (max-width: 720px) {
  .dismissed-order-row { gap: 8px; padding: 8px 10px; }
  .dismissed-order-meta { min-width: 0; width: 100%; }
}

/* Créditos y Cobros — "En revisión" */
.creditos-metric-revision strong {
  color: #b45309;
}
.creditos-row-revision {
  opacity: 0.6;
  background: rgba(217, 119, 6, 0.04);
}
.creditos-row-revision td {
  border-left: 3px solid rgba(217, 119, 6, 0.35);
}
.creditos-rev-badge {
  margin-top: 4px;
  font-size: 10.5px;
}
.creditos-revision-panel {
  margin: 12px 0 4px;
  background: rgba(217, 119, 6, 0.05);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
}
.creditos-revision-panel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #92400e;
}
.creditos-revision-panel > summary::-webkit-details-marker { display: none; }
.creditos-revision-panel > summary::before {
  content: "▸";
  font-size: 12px;
  color: #b45309;
  transition: transform 0.15s ease;
}
.creditos-revision-panel[open] > summary::before { transform: rotate(90deg); }
.creditos-revision-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}
.creditos-revision-title {
  font-weight: 700;
  color: #92400e;
}
.creditos-revision-count {
  background: rgba(217, 119, 6, 0.15);
  color: #92400e;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.creditos-revision-hint {
  margin: 10px 0 12px;
  color: #78350f;
  font-size: 12px;
  line-height: 1.5;
}
.creditos-revision-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.creditos-rev-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.creditos-rev-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 220px;
}
.creditos-rev-item-info strong {
  font-weight: 700;
  color: var(--text, #0f172a);
}
.creditos-rev-item-note {
  color: #78350f;
  font-style: italic;
  font-size: 12px;
  margin-top: 2px;
}
.creditos-rev-item-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #b45309;
  min-width: 120px;
  text-align: right;
}
.creditos-rev-item-actions { flex-shrink: 0; }
@media (max-width: 720px) {
  .creditos-rev-item {
    gap: 6px;
    padding: 8px 10px;
  }
  .creditos-rev-item-amount {
    min-width: 0;
    text-align: left;
  }
}

/* Créditos y Cobros — "Por compensar" (notas de crédito sin aplicar) */
.compensar-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(148, 163, 184, 0.06);
  border-radius: 10px;
  margin-bottom: 16px;
}
.compensar-toolbar-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.compensar-toolbar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-right: 4px;
}
.compensar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text, #0f172a);
  cursor: pointer;
  user-select: none;
}
.compensar-toggle input {
  accent-color: #16a34a;
}
.compensar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compensar-cliente {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 10px;
  padding: 12px 14px;
}
.compensar-cliente > summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.compensar-cliente > summary::-webkit-details-marker { display: none; }
.compensar-cliente > summary::before {
  content: "▸";
  font-size: 12px;
  color: var(--muted, #64748b);
  margin-right: 8px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.compensar-cliente[open] > summary::before { transform: rotate(90deg); }
.compensar-cliente-head {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: calc(100% - 20px);
  justify-content: space-between;
}
.compensar-cliente-head strong {
  font-weight: 700;
  color: var(--text, #0f172a);
}
.compensar-cliente-head .cell-sub {
  display: block;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.compensar-cliente-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compensar-count {
  font-size: 12px;
  color: var(--muted, #64748b);
  font-weight: 600;
}
.compensar-cliente-meta strong {
  font-variant-numeric: tabular-nums;
  color: #b45309;
}
.compensar-detail-table {
  margin-top: 10px;
  font-size: 13px;
}
.compensar-detail-table th {
  background: rgba(148, 163, 184, 0.08);
  font-weight: 600;
  font-size: 12px;
}
.compensar-detail-table code {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 12px;
  background: rgba(148, 163, 184, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text, #0f172a);
}
@media (max-width: 720px) {
  .compensar-toolbar { flex-direction: column; align-items: stretch; padding: 10px; }
  .compensar-cliente-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .compensar-detail-table { font-size: 12px; }
}

/* Vista "Huérfanos" — cartera sin dueño real */
.creditos-huerfanos-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.creditos-huerfanos-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.creditos-huerfano-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.creditos-huerfano-group {
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.creditos-huerfano-group > summary {
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  list-style: none;
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.2));
}
.creditos-huerfano-group > summary::-webkit-details-marker { display: none; }
.creditos-huerfano-group > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--muted, #94a3b8);
  font-size: 10px;
}
.creditos-huerfano-group[open] > summary::before { transform: rotate(90deg); }
.creditos-huerfano-group-label {
  font-weight: 600;
  color: var(--text, #0f172a);
  flex: 1;
}
.creditos-huerfano-group-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted, #94a3b8);
}
.creditos-huerfano-group-meta strong {
  color: var(--danger, #ef4444);
  font-size: 14px;
}
.creditos-huerfano-table-wrap {
  overflow-x: auto;
}
.creditos-huerfano-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.creditos-huerfano-table th,
.creditos-huerfano-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft, rgba(148, 163, 184, 0.15));
}
.creditos-huerfano-table th {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  background: rgba(148, 163, 184, 0.04);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.creditos-huerfano-table td.num,
.creditos-huerfano-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.creditos-huerfano-cli {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.creditos-huerfano-cli strong {
  color: var(--text, #0f172a);
  font-weight: 600;
}
.creditos-huerfano-id {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-family: 'SF Mono', 'Menlo', monospace;
}
.creditos-huerfano-reassign {
  padding: 6px 12px;
  font-size: 12px;
}
.creditos-huerfano-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.creditos-huerfano-pending-row {
  background: rgba(59, 130, 246, 0.04);
}
@media (max-width: 720px) {
  .creditos-huerfanos-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creditos-huerfano-table { font-size: 12px; }
  .creditos-huerfano-table th,
  .creditos-huerfano-table td { padding: 8px 10px; }
  .creditos-huerfano-group > summary { padding: 12px; flex-wrap: wrap; }
  .creditos-huerfano-group-meta { font-size: 12px; }
}

/* ── Plan de Negocio (auto-generado) ────────────────────────────────── */
/* Sigue el theme del dashboard: reutiliza .inventory-kpi con gradientes  */
/* para los KPIs de salud; usa los mismos tones (critical/alert/warn/good */
/* /info) para prioridad y frentes. Cards inspiradas en .dialog-card.    */

.plan-negocio-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Header ---- */
.plan-header .eyebrow {
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 4px;
}
.plan-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.plan-header .muted {
  font-size: 13px;
  max-width: 780px;
  color: var(--muted, #94a3b8);
  margin: 0;
}
.plan-header-hint {
  margin-top: 8px;
}

.plan-home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.plan-home-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft, #475569);
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.plan-home-stat strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.plan-home-stat.is-critical {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #b91c1c;
}
.plan-home-stat.is-critical strong { color: #dc2626; }

.plan-section-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}

/* Reunión semanal — 3 focos accionables */
.plan-reunion-band {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(160deg, #ffffff 0%, rgba(37, 99, 235, 0.04) 100%);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.plan-reunion-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.plan-reunion-head .plan-section-label { margin: 0 0 4px; }
.plan-reunion-week {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft, #475569);
  font-weight: 600;
}
.plan-reunion-reset {
  flex-shrink: 0;
  font-size: 12px;
}
.plan-reunion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.plan-reunion-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  border-top: 3px solid #64748b;
  min-height: 100%;
}
.plan-reunion-card.is-tone-critical { border-top-color: #dc2626; }
.plan-reunion-card.is-tone-alert { border-top-color: #ea580c; }
.plan-reunion-card.is-tone-warn { border-top-color: #d97706; }
.plan-reunion-card-top {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: start;
}
.plan-reunion-slot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
}
.plan-reunion-card-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text, #0f172a);
}
.plan-reunion-card-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.plan-reunion-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
}
.plan-reunion-metric-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}
.plan-reunion-metric-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.plan-reunion-metric-values strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.plan-reunion-delta {
  font-size: 11px;
  font-weight: 700;
}
.plan-reunion-delta.is-good { color: #047857; }
.plan-reunion-delta.is-bad { color: #b91c1c; }
.plan-reunion-delta.is-neutral { color: var(--muted, #94a3b8); }
.plan-reunion-result-label,
.plan-reunion-notes-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}
.plan-reunion-result-input,
.plan-reunion-notes-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  font-size: 12px;
  font-family: inherit;
  color: var(--text, #0f172a);
  background: #ffffff;
  resize: vertical;
}
.plan-reunion-result-input:focus,
.plan-reunion-notes-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.plan-reunion-result-text,
.plan-reunion-notes-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text, #0f172a);
}
.plan-reunion-result-meta,
.plan-reunion-notes-meta {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted, #94a3b8);
}
.plan-reunion-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.plan-reunion-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft, #475569);
}
.plan-reunion-owner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  margin-left: auto;
}
.plan-reunion-owner.is-tone-critical { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.plan-reunion-owner.is-tone-alert { background: linear-gradient(140deg, #fb923c, #c2410c); }
.plan-reunion-owner.is-tone-warn { background: linear-gradient(140deg, #fbbf24, #b45309); }
.plan-reunion-owner.is-tone-good { background: linear-gradient(140deg, #10b981, #047857); }
.plan-reunion-owner.is-tone-info { background: linear-gradient(140deg, #3b82f6, #1d4ed8); }
.plan-reunion-open {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
}
.plan-reunion-open:hover { text-decoration: underline; }
.plan-reunion-notes {
  padding-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.plan-home-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}
.plan-home-primary {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.plan-home-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}
.plan-sidebar-widget {
  min-width: 0;
}
.plan-areas-section {
  min-width: 0;
}
.plan-analytics-band {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft, rgba(148, 163, 184, 0.15));
}

.plan-readonly-hint {
  padding: 10px 14px;
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
  border-left: 3px solid #3b82f6;
  border-radius: 8px;
  color: #1e40af;
  font-size: 12px;
  font-weight: 500;
}

/* ---- Salud del Negocio (KPIs con gradiente estilo inventario) ---- */
.plan-salud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.plan-salud .inventory-kpi {
  cursor: default;
  min-height: 110px;
}
.plan-salud .inventory-kpi:hover {
  transform: none;
}

/* ---- Controles (filtros + agrupar por) ---- */
.plan-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft, rgba(148, 163, 184, 0.15));
}
.plan-filters { margin: 0; padding: 0; border: none; }
.plan-groupby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(148, 163, 184, 0.08);
  padding: 4px;
  border-radius: 10px;
}
.plan-groupby-label {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0 8px 0 4px;
}
.plan-group-toggle {
  padding: 6px 12px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft, #475569);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.plan-group-toggle:hover { color: var(--text, #0f172a); }
.plan-group-toggle.is-active {
  background: #ffffff;
  color: var(--text, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ---- Home: grid de tiles por área (3 arriba + 2 centradas abajo) ---- */
.plan-areas-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.plan-area-tile:nth-child(-n+3) {
  grid-column: span 2;
}
.plan-area-tile:nth-child(4) {
  grid-column: 2 / span 2;
}
.plan-area-tile:nth-child(5) {
  grid-column: 4 / span 2;
}
.plan-area-tile {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  border-top: 4px solid #64748b;
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 8px 14px;
  min-height: 152px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.plan-area-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(15, 23, 42, 0.02) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.plan-area-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.plan-area-tile:hover .plan-area-tile-cta {
  transform: translateX(4px);
}
.plan-area-tile.is-tone-critical { border-top-color: #dc2626; background: linear-gradient(160deg, #ffffff 0%, rgba(239, 68, 68, 0.04) 100%); }
.plan-area-tile.is-tone-alert    { border-top-color: #ea580c; background: linear-gradient(160deg, #ffffff 0%, rgba(234, 88, 12, 0.04) 100%); }
.plan-area-tile.is-tone-warn     { border-top-color: #d97706; background: linear-gradient(160deg, #ffffff 0%, rgba(217, 119, 6, 0.03) 100%); }
.plan-area-tile.is-tone-good     { border-top-color: #059669; background: linear-gradient(160deg, #ffffff 0%, rgba(5, 150, 105, 0.03) 100%); }
.plan-area-tile.is-tone-info     { border-top-color: #2563eb; background: linear-gradient(160deg, #ffffff 0%, rgba(37, 99, 235, 0.03) 100%); }
.plan-area-tile.is-empty {
  opacity: 0.75;
  cursor: default;
  min-height: 140px;
}
.plan-area-tile.is-empty:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.plan-area-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.plan-area-tile-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}
.plan-area-tile-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plan-area-tile-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text, #0f172a);
  letter-spacing: -0.01em;
}
.plan-area-tile-sub {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}

.plan-area-tile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.plan-area-tile-count {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text, #0f172a);
}
.plan-area-tile.is-tone-critical .plan-area-tile-count { color: #dc2626; }
.plan-area-tile.is-tone-alert    .plan-area-tile-count { color: #ea580c; }
.plan-area-tile.is-tone-warn     .plan-area-tile-count { color: #d97706; }
.plan-area-tile.is-tone-good     .plan-area-tile-count { color: #059669; }
.plan-area-tile-count-label {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
  text-align: right;
  line-height: 1.2;
  max-width: 88px;
}

.plan-area-tile-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 1 / -1;
  grid-row: 2;
}
.plan-area-tile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plan-area-tile-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-soft, #475569);
}
.plan-area-tile-badge strong { font-weight: 800; }
.plan-area-tile-badge.is-critical { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.plan-area-tile-badge.is-alert    { background: rgba(234, 88, 12, 0.12); color: #c2410c; }
.plan-area-tile-badge.is-warn     { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.plan-area-tile-badge.is-info     { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.plan-area-tile-badge.is-good     { background: rgba(5, 150, 105, 0.12); color: #047857; }

.plan-area-tile-owners {
  display: inline-flex;
  gap: -4px;
}
.plan-area-owner-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.02em;
  border: 2px solid #ffffff;
  margin-left: -6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.plan-area-owner-badge:first-child { margin-left: 0; }
.plan-area-owner-badge.is-tone-critical { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.plan-area-owner-badge.is-tone-alert    { background: linear-gradient(140deg, #fb923c, #c2410c); }
.plan-area-owner-badge.is-tone-warn     { background: linear-gradient(140deg, #fbbf24, #b45309); }
.plan-area-owner-badge.is-tone-good     { background: linear-gradient(140deg, #10b981, #047857); }
.plan-area-owner-badge.is-tone-info     { background: linear-gradient(140deg, #3b82f6, #1d4ed8); }

.plan-area-tile-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #0f172a);
  letter-spacing: 0.02em;
  transition: transform 0.15s ease;
  align-self: flex-start;
  grid-column: 1 / -1;
  grid-row: 3;
}
.plan-area-tile.is-tone-critical .plan-area-tile-cta { color: #dc2626; }
.plan-area-tile.is-tone-alert    .plan-area-tile-cta { color: #ea580c; }
.plan-area-tile.is-tone-warn     .plan-area-tile-cta { color: #d97706; }
.plan-area-tile.is-tone-info     .plan-area-tile-cta { color: #2563eb; }

/* ---- Detalle por área ---- */
.plan-detail-header {
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  border-left: 5px solid #64748b;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.plan-detail-header.is-tone-critical { border-left-color: #dc2626; background: linear-gradient(90deg, rgba(239, 68, 68, 0.04), transparent 50%); }
.plan-detail-header.is-tone-alert    { border-left-color: #ea580c; background: linear-gradient(90deg, rgba(234, 88, 12, 0.04), transparent 50%); }
.plan-detail-header.is-tone-warn     { border-left-color: #d97706; background: linear-gradient(90deg, rgba(217, 119, 6, 0.04), transparent 50%); }
.plan-detail-header.is-tone-info     { border-left-color: #2563eb; background: linear-gradient(90deg, rgba(37, 99, 235, 0.04), transparent 50%); }
.plan-detail-header.is-tone-good     { border-left-color: #059669; background: linear-gradient(90deg, rgba(5, 150, 105, 0.04), transparent 50%); }

.plan-back-btn {
  align-self: flex-start;
  padding: 6px 12px 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft, #475569);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.plan-back-btn:hover {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text, #0f172a);
  transform: translateX(-2px);
}

.plan-detail-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.plan-detail-icon {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
}
.plan-detail-title h2 {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.plan-detail-title .muted {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #94a3b8);
}

.plan-detail-stats {
  display: flex;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft, rgba(148, 163, 184, 0.15));
}
.plan-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-detail-stat strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plan-detail-stat span {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ---- Widgets del home (analytics abajo del grid de áreas) ---- */
.plan-widgets {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-widgets-row {
  display: grid;
  gap: 14px;
}
.plan-widgets-row-1 { grid-template-columns: 1.6fr 1fr; }
.plan-widgets-row-analytics { grid-template-columns: repeat(3, 1fr); }
.plan-home-sidebar .plan-urgent-list {
  max-height: 320px;
  overflow-y: auto;
}
.plan-home-sidebar .plan-carga-list {
  max-height: 240px;
  overflow-y: auto;
}
.plan-widgets-row-3 { grid-template-columns: 1fr; }
.plan-widget {
  min-height: 0;
}
.plan-widget-inner {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  border-radius: 14px;
  padding: 16px 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.plan-widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.plan-widget-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #0f172a);
  letter-spacing: -0.01em;
}
.plan-widget-sub {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.plan-empty-mini {
  margin: 4px 0;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-style: italic;
}

/* Widget: Top urgentes */
.plan-urgent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 420px;
  overflow-y: auto;
}
.plan-urgent-row {
  display: grid;
  grid-template-columns: 24px 28px 1fr auto 26px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.plan-urgent-row:hover {
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--border, rgba(148, 163, 184, 0.2));
}
.plan-urgent-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.plan-urgent-icon {
  font-size: 18px;
  text-align: center;
}
.plan-urgent-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.plan-urgent-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #0f172a);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.plan-urgent-frente {
  font-size: 10.5px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.plan-urgent-owner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}
.plan-urgent-owner.is-tone-critical { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.plan-urgent-owner.is-tone-alert    { background: linear-gradient(140deg, #fb923c, #c2410c); }
.plan-urgent-owner.is-tone-warn     { background: linear-gradient(140deg, #fbbf24, #b45309); }
.plan-urgent-owner.is-tone-good     { background: linear-gradient(140deg, #10b981, #047857); }
.plan-urgent-owner.is-tone-info     { background: linear-gradient(140deg, #3b82f6, #1d4ed8); }

/* Widget: Carga por responsable */
.plan-carga-legend {
  display: flex;
  gap: 12px;
  font-size: 10.5px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.plan-carga-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.plan-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.plan-carga-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-carga-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 1.2fr) 26px;
  align-items: center;
  gap: 10px;
}
.plan-carga-dueno {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.plan-carga-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}
.plan-carga-avatar.is-tone-critical { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.plan-carga-avatar.is-tone-alert    { background: linear-gradient(140deg, #fb923c, #c2410c); }
.plan-carga-avatar.is-tone-warn     { background: linear-gradient(140deg, #fbbf24, #b45309); }
.plan-carga-avatar.is-tone-good     { background: linear-gradient(140deg, #10b981, #047857); }
.plan-carga-avatar.is-tone-info     { background: linear-gradient(140deg, #3b82f6, #1d4ed8); }
.plan-carga-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-carga-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  display: flex;
  overflow: hidden;
}
.plan-carga-seg {
  height: 100%;
}
.plan-carga-seg.is-critical { background: #dc2626; }
.plan-carga-seg.is-alert    { background: #ea580c; }
.plan-carga-seg.is-info     { background: #2563eb; }
.plan-carga-total {
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #0f172a);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Widget: Donut por prioridad */
.plan-donut-wrap {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
}
.plan-donut {
  width: 100%;
  max-width: 130px;
  height: auto;
}
.plan-donut-total {
  font-size: 20px;
  font-weight: 800;
  fill: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.plan-donut-label {
  font-size: 7px;
  fill: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.plan-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.plan-legend-label {
  color: var(--text-soft, #475569);
  font-weight: 500;
}
.plan-legend-val {
  font-weight: 800;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}

/* Widget: Sparklines por área */
.plan-sparkline-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-sparkline-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 90px 24px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.plan-sparkline-row:hover {
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--border, rgba(148, 163, 184, 0.2));
}
.plan-sparkline-icon {
  font-size: 16px;
  text-align: center;
}
.plan-sparkline-labels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.plan-sparkline-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.plan-sparkline-sub {
  font-size: 10px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.plan-sparkline-row.is-tone-critical .plan-sparkline-sub { color: #b91c1c; }
.plan-sparkline-row.is-tone-warn .plan-sparkline-sub { color: #b45309; }
.plan-sparkline-svg-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.plan-sparkline {
  width: 100%;
  height: 28px;
}
.plan-sparkline-idle {
  font-size: 10px;
  color: var(--muted, #94a3b8);
  font-style: italic;
}
.plan-sparkline-total {
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #0f172a);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.plan-sparkline-row.is-tone-critical .plan-sparkline-total { color: #dc2626; }
.plan-sparkline-row.is-tone-warn .plan-sparkline-total { color: #d97706; }
.plan-sparkline-row.is-tone-good .plan-sparkline-total { color: #059669; }

/* Widget: Progreso semanal */
.plan-progreso-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-progreso {
  width: 100%;
  height: auto;
}
.plan-progreso-hint {
  margin: 0;
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-style: italic;
  text-align: center;
}

@media (max-width: 720px) {
  .plan-areas-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .plan-area-tile:nth-child(-n+5) {
    grid-column: auto;
  }
  .plan-home-sidebar {
    grid-template-columns: 1fr;
  }
  .plan-home-stats {
    gap: 6px;
  }
  .plan-home-stat {
    font-size: 11px;
    padding: 5px 10px;
  }
  .plan-area-tile {
    min-height: unset;
    padding: 14px 16px;
    gap: 10px;
  }
  .plan-area-tile-icon { font-size: 26px; }
  .plan-area-tile-name { font-size: 16px; }
  .plan-area-tile-count { font-size: 34px; }
  .plan-detail-header { padding: 14px 16px; gap: 10px; }
  .plan-detail-title { gap: 12px; }
  .plan-detail-icon { font-size: 32px; }
  .plan-detail-title h2 { font-size: 20px; }
  .plan-detail-stats { gap: 16px; padding-top: 10px; }
  .plan-detail-stat strong { font-size: 18px; }

  .plan-widgets-row-1,
  .plan-widgets-row-2,
  .plan-widgets-row-analytics {
    grid-template-columns: 1fr;
  }
  .plan-widget-inner { padding: 14px; }
  .plan-donut-wrap {
    grid-template-columns: 110px 1fr;
  }
  .plan-urgent-list { max-height: 340px; }
  .plan-urgent-row {
    grid-template-columns: 20px 22px 1fr auto 24px;
    gap: 8px;
    padding: 6px 8px;
  }
  .plan-urgent-icon { font-size: 15px; }
  .plan-urgent-title { font-size: 12px; }
}

/* ---- Grupos ---- */
.plan-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.plan-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface, #ffffff);
  border-left: 4px solid #64748b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.plan-group-head.is-tone-critical { border-left-color: #dc2626; background: linear-gradient(90deg, rgba(220, 38, 38, 0.06), transparent 60%); }
.plan-group-head.is-tone-alert    { border-left-color: #ea580c; background: linear-gradient(90deg, rgba(234, 88, 12, 0.06), transparent 60%); }
.plan-group-head.is-tone-warn     { border-left-color: #d97706; background: linear-gradient(90deg, rgba(217, 119, 6, 0.06), transparent 60%); }
.plan-group-head.is-tone-good     { border-left-color: #059669; background: linear-gradient(90deg, rgba(5, 150, 105, 0.06), transparent 60%); }
.plan-group-head.is-tone-info     { border-left-color: #2563eb; background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), transparent 60%); }
.plan-group-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #0f172a);
}
.plan-group-sub {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.plan-group-icon {
  font-size: 22px;
  line-height: 1;
}
.plan-group-owner-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.plan-group-dueno.is-tone-critical .plan-group-owner-avatar { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.plan-group-dueno.is-tone-alert    .plan-group-owner-avatar { background: linear-gradient(140deg, #fb923c, #c2410c); }
.plan-group-dueno.is-tone-warn     .plan-group-owner-avatar { background: linear-gradient(140deg, #fbbf24, #b45309); }
.plan-group-dueno.is-tone-good     .plan-group-owner-avatar { background: linear-gradient(140deg, #10b981, #047857); }
.plan-group-dueno.is-tone-info     .plan-group-owner-avatar { background: linear-gradient(140deg, #3b82f6, #1d4ed8); }
.plan-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
}

/* ---- Card individual ---- */
.plan-card {
  background: var(--surface, #ffffff);
  border-radius: 12px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  border-top: 3px solid #64748b;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.plan-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.plan-card.is-tone-critical { border-top-color: #dc2626; }
.plan-card.is-tone-alert    { border-top-color: #ea580c; }
.plan-card.is-tone-warn     { border-top-color: #d97706; }
.plan-card.is-tone-good     { border-top-color: #059669; }
.plan-card.is-tone-info     { border-top-color: #2563eb; }
.plan-card.plan-status-hecho {
  opacity: 0.6;
  background: linear-gradient(140deg, rgba(5, 150, 105, 0.04), transparent 70%);
}
.plan-card.plan-status-hecho .plan-card-title { text-decoration: line-through; text-decoration-color: rgba(15, 23, 42, 0.3); }
.plan-card.plan-status-en_progreso {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
  border-top-width: 4px;
}
.plan-card.plan-status-oculto { opacity: 0.4; }

.plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.plan-card-heading {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}
.plan-card-icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.plan-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #0f172a);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.plan-card-frente {
  font-size: 10px;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-top: 2px;
  display: inline-block;
}
.plan-card-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
}

.plan-priority-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}
.plan-priority-chip.is-critical { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.plan-priority-chip.is-alert    { background: linear-gradient(140deg, #fb923c, #c2410c); }
.plan-priority-chip.is-warn     { background: linear-gradient(140deg, #f59e0b, #b45309); }
.plan-priority-chip.is-good     { background: linear-gradient(140deg, #10b981, #047857); }
.plan-priority-chip.is-info     { background: linear-gradient(140deg, #3b82f6, #1d4ed8); }

.plan-status-chip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-status-chip.is-idle   { background: rgba(148, 163, 184, 0.15); color: var(--muted, #64748b); }
.plan-status-chip.is-active { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
.plan-status-chip.is-done   { background: rgba(5, 150, 105, 0.15); color: #047857; }
.plan-status-chip.is-muted  { background: rgba(148, 163, 184, 0.08); color: var(--muted, #94a3b8); }

.plan-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.plan-card-line {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  align-items: baseline;
}
.plan-line-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #94a3b8);
}
.plan-card-line p {
  margin: 0;
  color: var(--text-soft, #475569);
}
.plan-line-problem p { color: var(--text, #0f172a); font-weight: 500; }
.plan-line-impact p { color: var(--text, #0f172a); }
.plan-line-action p { color: var(--text-soft, #475569); font-style: italic; }

.plan-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(148, 163, 184, 0.06);
  border-radius: 8px;
  margin-top: 2px;
}
.plan-metric-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #94a3b8);
}
.plan-metric-values {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.plan-metric-values strong { color: var(--text, #0f172a); font-weight: 700; }
.plan-metric-arrow { color: var(--muted, #94a3b8); font-size: 11px; }
.plan-metric-meta { color: var(--muted, #94a3b8); font-size: 12px; }

.plan-note {
  padding: 10px 12px;
  background: linear-gradient(140deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04));
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.plan-note-icon { font-size: 14px; }
.plan-note-body p { margin: 0 0 3px; color: var(--text, #0f172a); font-weight: 500; }
.plan-note-meta { font-size: 11px; color: var(--muted, #94a3b8); }

/* ---- Footer con dueño + acciones ---- */
.plan-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft, rgba(148, 163, 184, 0.12));
}

.plan-owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.18));
}
.plan-owner-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.plan-owner-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #0f172a);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-owner.is-tone-critical .plan-owner-avatar { background: linear-gradient(140deg, #ef4444, #b91c1c); }
.plan-owner.is-tone-alert    .plan-owner-avatar { background: linear-gradient(140deg, #fb923c, #c2410c); }
.plan-owner.is-tone-warn     .plan-owner-avatar { background: linear-gradient(140deg, #fbbf24, #b45309); }
.plan-owner.is-tone-good     .plan-owner-avatar { background: linear-gradient(140deg, #10b981, #047857); }
.plan-owner.is-tone-info     .plan-owner-avatar { background: linear-gradient(140deg, #3b82f6, #1d4ed8); }

.plan-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plan-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.plan-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1); }
.plan-btn-primary  { background: linear-gradient(140deg, #3b82f6, #1d4ed8); color: #ffffff; }
.plan-btn-success  { background: linear-gradient(140deg, #10b981, #047857); color: #ffffff; }
.plan-btn-ghost    { background: transparent; color: var(--muted, #64748b); border-color: var(--border, rgba(148, 163, 184, 0.3)); }
.plan-btn-ghost:hover { color: var(--text, #0f172a); border-color: var(--text, #0f172a); background: rgba(148, 163, 184, 0.05); }

.plan-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted, #94a3b8);
  background: var(--surface, #ffffff);
  border-radius: 12px;
  border: 1px dashed var(--border, rgba(148, 163, 184, 0.3));
}
.plan-empty p { margin: 4px 0; }
.plan-empty-sub { font-size: 12px; }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .plan-salud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-reunion-grid { grid-template-columns: 1fr; }
  .plan-home-body {
    grid-template-columns: 1fr;
  }
  .plan-home-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .plan-group-cards,
  .plan-atencion-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .plan-salud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-header h2 { font-size: 18px; }
  .plan-card { padding: 14px; }
  .plan-controls { flex-direction: column; align-items: stretch; }
  .plan-groupby { justify-content: center; }
  .plan-card-line { grid-template-columns: 62px 1fr; gap: 6px; }
  .plan-line-tag { font-size: 9px; }
  .plan-card-footer { flex-direction: column; align-items: stretch; }
  .plan-owner { justify-content: flex-start; }
  .plan-card-actions { justify-content: flex-start; }
  .plan-btn { flex: 1 1 auto; }
  .plan-atencion { padding: 14px; }
}

/* Vista Órdenes — reutiliza crm-metrics, work-panel, purchases-table */
.ordenes-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ordenes-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .ordenes-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ordenes-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ordenes-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ordenes-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.875rem;
  background: #fff;
}

.ordenes-toolbar select {
  min-width: 160px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.82rem;
  background: #fff;
}

.ordenes-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ordenes-section {
  padding: 14px 16px;
}

.ordenes-section-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.ordenes-table {
  font-size: 0.84rem;
}

.ordenes-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.025);
}

.ordenes-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.04);
}

.ordenes-sort-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

.ordenes-sort-btn:hover {
  color: var(--blue, #2563eb);
}

.ordenes-foot td {
  background: var(--panel-2, #f8fafc);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

.compras-home-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

[data-theme="dark"] .ordenes-search,
[data-theme="dark"] .ordenes-toolbar select {
  background: var(--panel-2);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .ordenes-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* ─── Resumen de Compras + Órdenes: rejilla con outline fuerte ───────── */
.resumen-compras-view,
.ordenes-view {
  gap: 18px;
}

.resumen-kpis,
.ordenes-kpis {
  padding: 14px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.resumen-compras-view .crm-metric,
.ordenes-view .crm-metric {
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.resumen-compras-view .resumen-section,
.ordenes-view .ordenes-section {
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(27, 113, 136, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.resumen-compras-view .ordenes-section-head,
.ordenes-view .ordenes-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--line);
  border-left: 4px solid var(--brand-blue, #1B7188);
  background: linear-gradient(180deg, rgba(27, 113, 136, 0.07) 0%, rgba(27, 113, 136, 0.02) 100%);
}

.resumen-compras-view .ordenes-section .table-shell,
.ordenes-view .ordenes-section .table-shell {
  margin: 12px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  min-height: 0;
  background: var(--surface-elevated, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  overflow: auto;
}

.resumen-compras-view .resumen-table,
.ordenes-view .ordenes-table {
  min-width: 980px;
}

.resumen-compras-view .resumen-table th,
.resumen-compras-view .resumen-table td,
.ordenes-view .ordenes-table th,
.ordenes-view .ordenes-table td {
  border-right: 1px solid rgba(15, 23, 42, 0.14);
  border-bottom: 1px solid rgba(15, 23, 42, 0.14);
}

.resumen-compras-view .resumen-table th:last-child,
.resumen-compras-view .resumen-table td:last-child,
.ordenes-view .ordenes-table th:last-child,
.ordenes-view .ordenes-table td:last-child {
  border-right: none;
}

.resumen-compras-view .resumen-table thead th,
.ordenes-view .ordenes-table thead th {
  background: rgba(27, 113, 136, 0.08);
  color: var(--text-muted, #475569);
  border-bottom: 2px solid rgba(27, 113, 136, 0.18);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 800;
}

.resumen-compras-view .resumen-table tbody tr:nth-child(even),
.ordenes-view .ordenes-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.028);
}

.resumen-compras-view .resumen-table tbody tr:hover,
.ordenes-view .ordenes-table tbody tr:hover {
  background: rgba(27, 113, 136, 0.06);
}

.resumen-compras-view .resumen-table tbody tr:last-child td,
.ordenes-view .ordenes-table tbody tr:last-child td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.14);
}

.resumen-compras-view .resumen-table tfoot td,
.ordenes-view .ordenes-table tfoot td {
  border-top: 2px solid rgba(27, 113, 136, 0.22);
  background: rgba(27, 113, 136, 0.06);
  font-weight: 700;
}

.resumen-compras-view .money-amount,
.ordenes-view .money-amount {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.resumen-compras-view .col-num .money-amount,
.ordenes-view .col-num .money-amount {
  font-weight: 650;
}

.resumen-compras-view .resumen-cell-input {
  border: 2px solid rgba(15, 23, 42, 0.14);
  background: #fff;
}

.resumen-compras-view .resumen-cell-input:focus {
  border-color: rgba(27, 113, 136, 0.45);
  box-shadow: 0 0 0 3px rgba(27, 113, 136, 0.12);
}

.resumen-compras-view .pill,
.ordenes-view .pill {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.resumen-compras-view .ordenes-sections,
.ordenes-view .ordenes-sections {
  gap: 16px;
}

.resumen-compras-head {
  border-width: 2px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.ordenes-toolbar {
  border-width: 2px;
}

[data-theme="dark"] .resumen-kpis,
[data-theme="dark"] .ordenes-kpis {
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .resumen-compras-view .resumen-section,
[data-theme="dark"] .ordenes-view .ordenes-section {
  border-color: rgba(27, 113, 136, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .resumen-compras-view .ordenes-section-head,
[data-theme="dark"] .ordenes-view .ordenes-section-head {
  background: linear-gradient(180deg, rgba(27, 113, 136, 0.14) 0%, rgba(27, 113, 136, 0.04) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .resumen-compras-view .ordenes-section .table-shell,
[data-theme="dark"] .ordenes-view .ordenes-section .table-shell {
  background: var(--panel);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

[data-theme="dark"] .resumen-compras-view .resumen-table th,
[data-theme="dark"] .resumen-compras-view .resumen-table td,
[data-theme="dark"] .ordenes-view .ordenes-table th,
[data-theme="dark"] .ordenes-view .ordenes-table td {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .resumen-compras-view .resumen-table thead th,
[data-theme="dark"] .ordenes-view .ordenes-table thead th {
  background: rgba(27, 113, 136, 0.16);
  border-bottom-color: rgba(27, 113, 136, 0.28);
}

[data-theme="dark"] .resumen-compras-view .resumen-table tfoot td,
[data-theme="dark"] .ordenes-view .ordenes-table tfoot td {
  background: rgba(27, 113, 136, 0.12);
  border-top-color: rgba(27, 113, 136, 0.28);
}

[data-theme="dark"] .resumen-compras-view .resumen-cell-input {
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--panel-2);
}

[data-theme="dark"] .compras-board-toolbar {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Calendario de eventos + portal ─────────────────────────── */
.cal-tbd-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(234, 88, 12, 0.14);
  color: #c2410c;
}

.cal-legend-swatch.is-tbd {
  background: repeating-linear-gradient(45deg, #fdba74, #fdba74 4px, #fff7ed 4px, #fff7ed 8px);
}

.cal-event-card-ev .cal-event-ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.cal-tbd-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}

.portal-eventos {
  margin: 0 0 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.portal-eventos-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(234, 88, 12, 0.1);
  border: 1px solid rgba(234, 88, 12, 0.22);
}

.portal-eventos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.portal-eventos-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(72px, auto) 1fr;
  gap: 8px 12px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.portal-eventos-row:hover {
  border-color: rgba(234, 88, 12, 0.35);
  transform: translateY(-1px);
}

.portal-eventos-date {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.portal-eventos-brand {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ev-color, #64748b);
}

.portal-eventos-row strong {
  grid-column: 1 / -1;
  font-size: 0.95rem;
}

.portal-eventos-row .cell-sub {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .portal-eventos-row {
    grid-template-columns: 120px 140px 1fr;
  }
  .portal-eventos-row strong,
  .portal-eventos-row .cell-sub {
    grid-column: auto;
  }
  .portal-eventos-row .cell-sub {
    grid-column: 3;
  }
}

[data-theme="dark"] .portal-eventos-alert {
  background: rgba(234, 88, 12, 0.14);
}

[data-theme="dark"] .cal-summary-bar {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .cal-cell:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .cal-cell-empty {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .cal-cell.is-today {
  background: rgba(37, 99, 235, 0.12);
}
[data-theme="dark"] .cal-cell.is-selected {
  background: rgba(37, 99, 235, 0.16);
  box-shadow: inset 0 0 0 2px #3b82f6;
}
[data-theme="dark"] .cal-vm-legend {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .cal-event-more {
  color: #93c5fd;
}
[data-theme="dark"] .cal-cell.is-selected .cal-event-more {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.2);
}

/* ── Móvil Demo (Precios / Pedidos) ─────────────────────────────── */
.movil-module { display: grid; gap: 14px; }
.movil-module-head h3 { margin: 0.15rem 0 0; }
.movil-search-wrap { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0; }
.movil-precio-value,
.movil-pedido-total { font-size: 1rem; color: var(--accent, #c41e3a); white-space: nowrap; }
.movil-pedido-card.is-open { border-color: rgba(196, 30, 58, 0.35); }
.movil-pedido-lines {
  list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px;
  border-top: 1px solid var(--border, #e5e7eb); padding-top: 10px;
}
.movil-pedido-lines li {
  padding: 8px 10px; border-radius: 10px; background: var(--bg-elev, #fff);
  border: 1px solid var(--border, #e5e7eb);
}
.movil-load-more-wrap { display: flex; justify-content: center; padding: 8px 0 16px; }
.mis-rutas-mb-visit {
  font-size: 0.68rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.mis-rutas-mobile-card-head .mis-rutas-mb-visit { margin-left: auto; }
[data-theme="dark"] .movil-pedido-lines li { background: var(--bg-elev); border-color: rgba(255,255,255,0.08); }

.vendedores-online-panel .vendedores-online-list {
  margin-top: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--bg-elev, #fff);
  padding: 4px 0;
}
.vendedores-online-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px !important;
}
.vendedores-online-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.vendedores-online-meta-line {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.3;
}
.vendedores-online-panel .panel-heading .eyebrow,
.vendedores-online-panel .crm-metric .cell-sub {
  display: none;
}
.vendedores-online-actions { display: flex; justify-content: flex-end; margin: 8px 0 4px; }
[data-theme="dark"] .vendedores-online-panel .vendedores-online-list { background: var(--bg-elev); border-color: rgba(255,255,255,0.08); }

/* ── Mis Rutas · pills semánticos y drawers con acento de color ──────── */
.pill.warn {
  background: var(--amber-2);
  color: var(--amber);
  border: 1px solid rgba(168, 93, 0, 0.25);
}
.pill.danger {
  background: var(--red-2);
  color: var(--brand-red);
  border: 1px solid rgba(228, 5, 32, 0.25);
}
.pill.info {
  background: var(--blue-2);
  color: var(--brand-blue);
  border: 1px solid rgba(27, 113, 136, 0.25);
}
.pill.good {
  background: var(--green-2);
  color: var(--green);
  border: 1px solid rgba(4, 120, 87, 0.25);
}
.pill.muted {
  background: var(--panel-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* Riesgo / Calle · chips en celdas */
.mis-rutas-col-reason .pill,
.mis-rutas-col-action .pill,
.calle-riesgo-table td .pill {
  font-size: 0.72rem;
  min-height: 22px;
  padding: 3px 8px;
  margin-right: 4px;
  margin-bottom: 2px;
}
.mis-rutas-col-reason,
.mis-rutas-col-action {
  line-height: 1.4;
  white-space: normal;
}

/* Drawer header + KPI strip */
.mis-rutas-drawer-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mis-rutas-drawer-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.mis-rutas-drawer-title h3 { margin: 0; }
.mis-rutas-drawer-title .eyebrow { color: var(--brand-blue); }
.mis-rutas-drawer-title .mi-ruta-priority { align-self: flex-start; }
.mis-rutas-drawer-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.mis-rutas-drawer-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mis-rutas-drawer-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}
.mis-rutas-drawer-kpi .eyebrow {
  font-size: 0.68rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.mis-rutas-drawer-kpi strong {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mis-rutas-drawer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 24px 4px;
}
.mis-rutas-drawer-context {
  margin: 0;
  padding: 4px 24px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.mis-rutas-drawer-products {
  padding: 0 24px 4px;
}

/* Secciones del drawer con acento por tono */
.mis-rutas-drawer-section[data-section-tone] h4 {
  padding-left: 8px;
  border-left: 3px solid var(--line);
  font-weight: 900;
}
.mis-rutas-drawer-section[data-section-tone="info"] h4 {
  color: var(--brand-blue);
  border-left-color: var(--brand-blue);
}
.mis-rutas-drawer-section[data-section-tone="warn"] h4 {
  color: var(--amber);
  border-left-color: var(--amber);
}
.mis-rutas-drawer-section[data-section-tone="good"] h4 {
  color: var(--green);
  border-left-color: var(--green);
}
.mis-rutas-drawer-section[data-section-tone="danger"] h4 {
  color: var(--brand-red);
  border-left-color: var(--brand-red);
}
.mis-rutas-drawer-risk-list { list-style: none; padding-left: 0; }
.mis-rutas-drawer-risk-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Ajuste al container del drawer para que las secciones sigan padded */
.mis-rutas-customer-card .mis-rutas-customer-body {
  padding: 14px 24px 22px;
}

/* KPIs de vendedor (Mi día / Mi semana) con espaciado propio */
.mis-rutas-vendor-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1rem;
}
@media (min-width: 681px) {
  .mis-rutas-vendor-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .mis-rutas-drawer-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 14px;
  }
  .mis-rutas-drawer-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mis-rutas-drawer-kpi strong { font-size: 0.95rem; }
  .mis-rutas-drawer-chips { padding: 8px 14px 4px; }
  .mis-rutas-drawer-context,
  .mis-rutas-drawer-products { padding-left: 14px; padding-right: 14px; }
  .mis-rutas-customer-card .mis-rutas-customer-body { padding: 10px 14px 16px; }
}

[data-theme="dark"] .pill.warn { background: var(--amber-2); color: var(--amber); border-color: rgba(251, 191, 36, 0.35); }
[data-theme="dark"] .pill.danger { background: var(--red-2); color: var(--red); border-color: rgba(255, 52, 71, 0.35); }
[data-theme="dark"] .pill.info { background: var(--blue-2); color: var(--blue); border-color: rgba(75, 169, 191, 0.35); }
[data-theme="dark"] .pill.good { background: var(--green-2); color: var(--green); border-color: rgba(52, 211, 153, 0.35); }

/* Vendedores hub — skeleton while Mis Rutas engine hydrates */
.vendedores-panel-skeleton {
  min-height: 320px;
}
.vendedores-skeleton-line {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 25%, rgba(15, 23, 42, 0.12) 50%, rgba(15, 23, 42, 0.06) 75%);
  background-size: 200% 100%;
  animation: vendedores-skeleton-shimmer 1.2s ease-in-out infinite;
}
.vendedores-skeleton-line-sm { width: 28%; height: 10px; margin-bottom: 10px; }
.vendedores-skeleton-line-md { width: 52%; margin-bottom: 12px; }
.vendedores-skeleton-line-lg { width: 42%; height: 22px; margin-bottom: 8px; }
.vendedores-skeleton-line-xl { width: 36%; height: 28px; }
.vendedores-skeleton-line-full { width: 100%; margin-bottom: 10px; }
.vendedores-skeleton-line-half { width: 62%; }
.vendedores-skeleton-hero { margin-bottom: 18px; }
.vendedores-skeleton-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.vendedores-skeleton-pill {
  width: 88px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.05) 25%, rgba(15, 23, 42, 0.1) 50%, rgba(15, 23, 42, 0.05) 75%);
  background-size: 200% 100%;
  animation: vendedores-skeleton-shimmer 1.2s ease-in-out infinite;
}
.vendedores-skeleton-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.vendedores-skeleton-tile {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 8px;
}
.vendedores-skeleton-panel {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
  display: grid;
  gap: 10px;
}
@keyframes vendedores-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (max-width: 720px) {
  .vendedores-skeleton-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .vendedores-skeleton-tiles { grid-template-columns: 1fr; }
}
[data-theme="dark"] .pill.muted { background: var(--panel-2); color: var(--ink-soft); border-color: var(--line); }


/* ── Ambiente de demostración ─────────────────────────────────────────────── */
.demo-flag {
  display: inline-block;
  align-self: center;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-red, #E40520);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.demo-flag-sidebar { margin: 0 0 8px 0; }
.demo-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}
.demo-codes-title {
  width: 100%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 2px;
}
.demo-codes code {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(27, 113, 136, 0.10);
  color: var(--brand-blue, #1B7188);
  font-size: 12px;
}