/* ============================================================
 * MKT POS · DESIGN SYSTEM v2 (TDAH-friendly + visuales)
 * ============================================================
 * Cargar DESPUÉS de mktpos.css para permitir overrides.
 * Las clases nuevas usan prefijo .mkt-* (no rompen las .mktpos-* viejas).
 *
 * Componentes:
 *   .mkt-card, .mkt-card-glass, .mkt-panel
 *   .mkt-btn, .mkt-btn-primary, .mkt-btn-info, .mkt-btn-ghost
 *   .mkt-tag, .mkt-tag-success/warning/danger/info
 *   .mkt-ring                  (porcentaje circular)
 *   .mkt-summary-grid, .mkt-summary-card
 *   .mkt-bar-chart, .mkt-bar-row
 *   .mkt-next-action           (banner "tu siguiente paso")
 *   .mkt-stepper               (timeline humano)
 *   .mkt-hero-card             (gradient teal-naranja)
 *
 * Modo Simple — activa con <body class="mktpos-mode-simple">.
 * Override conservador del CSS viejo — body class "mktpos-design-v2".
 * ============================================================ */

/* ---- Tipografía neuroamigable ----
   La fuente Atkinson Hyperlegible se carga vía wp_head con preload (no-blocking)
   en mkt-cotizador-pos.php. NO se usa @import aquí porque @import BLOQUEA
   el render del CSS hasta que se descargue la fuente. */

/* ============================================================
 * TOKENS — variables CSS para toda la app
 * ============================================================ */
:root {
  /* Paleta cálida (paleta principal v2) */
  --mkt-bg: #f7efe2;
  --mkt-bg-soft: #fff8ef;
  --mkt-panel: rgba(255, 255, 255, 0.92);
  --mkt-panel-strong: #ffffff;
  --mkt-line: rgba(36, 44, 56, 0.10);

  /* Texto */
  --mkt-ink: #1f2937;
  --mkt-ink-soft: #5f6b7a;
  --mkt-ink-faint: #9aa3af;

  /* Brand (teal) — info, CTAs secundarios, links */
  --mkt-brand: #007f95;
  --mkt-brand-2: #21abc8;
  --mkt-brand-strong: #006b80;
  --mkt-brand-soft: rgba(0, 127, 149, 0.10);

  /* Accent (naranja) — CTAs primarios */
  --mkt-accent: #ea6a2a;
  --mkt-accent-2: #ffbf6e;
  --mkt-accent-soft: rgba(234, 106, 42, 0.10);

  /* Estados — solo 4 colores semánticos */
  --mkt-success: #16925c;
  --mkt-success-soft: rgba(22, 146, 92, 0.12);
  --mkt-warning: #be7a14;
  --mkt-warning-soft: rgba(190, 122, 20, 0.12);
  --mkt-danger: #cf4343;
  --mkt-danger-soft: rgba(207, 67, 67, 0.10);

  /* Sombras cálidas (tinte café) */
  --mkt-shadow: 0 18px 50px rgba(44, 28, 18, 0.12);
  --mkt-shadow-soft: 0 10px 28px rgba(44, 28, 18, 0.09);
  --mkt-shadow-sm: 0 4px 12px rgba(44, 28, 18, 0.06);

  /* Radios — 4 niveles */
  --mkt-radius-xl: 28px;
  --mkt-radius-lg: 22px;
  --mkt-radius-md: 16px;
  --mkt-radius-sm: 12px;

  /* Espacio (múltiplos de 4) */
  --mkt-space-1: 4px;
  --mkt-space-2: 8px;
  --mkt-space-3: 12px;
  --mkt-space-4: 16px;
  --mkt-space-5: 20px;
  --mkt-space-6: 24px;
  --mkt-space-7: 32px;
  --mkt-space-8: 40px;

  /* Tipografía */
  --mkt-font: "Atkinson Hyperlegible", "Inter", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
 * REDUCIR ANIMACIONES — respeto a usuarios sensibles
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [class^="mkt-"], [class*=" mkt-"], [class^="mkt-"] *, [class*=" mkt-"] * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
 * CARDS / PANELES
 * ============================================================ */
.mkt-card {
  background: var(--mkt-panel-strong);
  border: 1px solid var(--mkt-line);
  border-radius: var(--mkt-radius-lg);
  padding: var(--mkt-space-6);
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-card-glass {
  background: var(--mkt-panel);
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: var(--mkt-radius-xl);
  padding: var(--mkt-space-6);
  box-shadow: var(--mkt-shadow-soft);
  backdrop-filter: blur(14px);
}
.mkt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mkt-space-3);
  margin-bottom: var(--mkt-space-4);
}
.mkt-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mkt-ink);
  font-family: var(--mkt-font);
}
.mkt-card-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mkt-ink-soft);
  margin-bottom: var(--mkt-space-2);
}

/* ============================================================
 * BOTONES — solo 4 variantes semánticas
 * ============================================================ */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mkt-space-2);
  padding: 10px 18px;
  border-radius: var(--mkt-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--mkt-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--mkt-ink);
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.mkt-btn:hover { transform: translateY(-1px); }
.mkt-btn:active { transform: translateY(0); }
.mkt-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Primary — naranja gradient (CTA principal) */
.mkt-btn-primary {
  background: linear-gradient(135deg, var(--mkt-accent), var(--mkt-accent-2));
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(234, 106, 42, 0.22);
  font-weight: 800;
}
.mkt-btn-primary:hover { box-shadow: 0 16px 30px rgba(234, 106, 42, 0.30); }

/* Info — teal (CTA secundario) */
.mkt-btn-info {
  background: linear-gradient(135deg, var(--mkt-brand), var(--mkt-brand-2));
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 127, 149, 0.18);
}

/* Success / Danger — solo para acciones específicas */
.mkt-btn-success { background: var(--mkt-success); color: #fff; }
.mkt-btn-danger { background: var(--mkt-danger); color: #fff; }

/* Secondary — fondo blanco */
.mkt-btn-secondary {
  background: var(--mkt-panel-strong);
  color: var(--mkt-ink);
  border-color: var(--mkt-line);
}
.mkt-btn-secondary:hover { background: var(--mkt-bg-soft); }

/* Ghost — sin fondo */
.mkt-btn-ghost {
  background: transparent;
  color: var(--mkt-ink-soft);
}
.mkt-btn-ghost:hover { background: rgba(36, 44, 56, 0.05); color: var(--mkt-ink); }

/* Tamaños */
.mkt-btn-sm { padding: 6px 12px; font-size: 12.5px; }
.mkt-btn-lg { padding: 14px 22px; font-size: 15px; }
.mkt-btn-block { width: 100%; }

/* Pill — píldora con altura fija para topbar */
.mkt-btn-pill {
  border-radius: 999px;
  height: 42px;
  padding: 0 18px;
}

/* ============================================================
 * TAGS / CHIPS de estado
 * ============================================================ */
.mkt-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mkt-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--mkt-brand-soft);
  color: var(--mkt-brand);
  border: 1px solid rgba(0, 127, 149, 0.16);
  line-height: 1.4;
  white-space: nowrap;
}
.mkt-tag-success {
  background: var(--mkt-success-soft);
  color: var(--mkt-success);
  border-color: rgba(22, 146, 92, 0.16);
}
.mkt-tag-warning {
  background: var(--mkt-warning-soft);
  color: var(--mkt-warning);
  border-color: rgba(190, 122, 20, 0.16);
}
.mkt-tag-danger {
  background: var(--mkt-danger-soft);
  color: var(--mkt-danger);
  border-color: rgba(207, 67, 67, 0.16);
}
.mkt-tag-neutral {
  background: rgba(36, 44, 56, 0.06);
  color: var(--mkt-ink-soft);
  border-color: var(--mkt-line);
}

/* ============================================================
 * RING DE PORCENTAJE (conic-gradient)
 * Uso: <div class="mkt-ring" data-pct="80" style="--mkt-ring-pct: 80;"></div>
 * O con color: style="--mkt-ring-pct: 80; --mkt-ring-color: var(--mkt-accent);"
 * ============================================================ */
.mkt-ring {
  --mkt-ring-pct: 0;
  --mkt-ring-color: var(--mkt-success);
  --mkt-ring-soft: var(--mkt-success-soft);
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: conic-gradient(
    var(--mkt-ring-color) 0 calc(var(--mkt-ring-pct) * 3.6deg),
    var(--mkt-ring-soft) calc(var(--mkt-ring-pct) * 3.6deg) 360deg
  );
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.mkt-ring::before {
  content: attr(data-pct) "%";
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--mkt-panel-strong);
  color: var(--mkt-ink);
  font-family: var(--mkt-font);
  font-weight: 800;
  font-size: 15px;
}
.mkt-ring-sm { width: 56px; height: 56px; }
.mkt-ring-sm::before { width: 40px; height: 40px; font-size: 11.5px; }
.mkt-ring-lg { width: 120px; height: 120px; }
.mkt-ring-lg::before { width: 92px; height: 92px; font-size: 20px; }

/* Variantes de color (atajos) */
.mkt-ring-warning {
  --mkt-ring-color: var(--mkt-warning);
  --mkt-ring-soft: var(--mkt-warning-soft);
}
.mkt-ring-danger {
  --mkt-ring-color: var(--mkt-danger);
  --mkt-ring-soft: var(--mkt-danger-soft);
}
.mkt-ring-brand {
  --mkt-ring-color: var(--mkt-brand);
  --mkt-ring-soft: var(--mkt-brand-soft);
}
.mkt-ring-accent {
  --mkt-ring-color: var(--mkt-accent);
  --mkt-ring-soft: var(--mkt-accent-soft);
}

/* Ring + lista de métricas a la derecha */
.mkt-metric-ring {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
}
.mkt-metric-list { display: grid; gap: 8px; }
.mkt-metric-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--mkt-ink-soft);
  font-family: var(--mkt-font);
}
.mkt-metric-row strong {
  color: var(--mkt-ink);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * SUMMARY CARDS (KPIs con tendencia)
 * ============================================================ */
.mkt-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--mkt-space-3);
}
.mkt-summary-card {
  padding: var(--mkt-space-4);
  border-radius: var(--mkt-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 250, 245, 0.88));
  border: 1px solid var(--mkt-line);
  font-family: var(--mkt-font);
}
.mkt-summary-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkt-ink-soft);
  margin-bottom: 6px;
  font-weight: 700;
}
.mkt-summary-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--mkt-ink);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.mkt-summary-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mkt-success-soft);
  color: var(--mkt-success);
}
.mkt-summary-trend-down {
  background: var(--mkt-danger-soft);
  color: var(--mkt-danger);
}
.mkt-summary-trend-neutral {
  background: var(--mkt-brand-soft);
  color: var(--mkt-brand);
}

/* ============================================================
 * BAR CHART HORIZONTAL
 * ============================================================ */
.mkt-bar-chart { display: grid; gap: var(--mkt-space-3); }
.mkt-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 64px;
  gap: var(--mkt-space-3);
  align-items: center;
  font-family: var(--mkt-font);
  font-size: 12.5px;
}
.mkt-bar-name {
  color: var(--mkt-ink-soft);
  font-weight: 600;
}
.mkt-bar-track {
  height: 10px;
  background: rgba(36, 44, 56, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.mkt-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mkt-brand), var(--mkt-brand-2));
  transition: width 0.4s ease;
}
.mkt-bar-fill-accent {
  background: linear-gradient(90deg, var(--mkt-accent), var(--mkt-accent-2));
}
.mkt-bar-fill-success {
  background: linear-gradient(90deg, var(--mkt-success), #4cc28a);
}
.mkt-bar-val {
  font-weight: 700;
  text-align: right;
  color: var(--mkt-ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * NEXT-ACTION BANNER — "Tu siguiente paso"
 * ============================================================ */
.mkt-next-action {
  position: relative;
  overflow: hidden;
  padding: 22px 26px;
  border-radius: var(--mkt-radius-xl);
  background:
    radial-gradient(circle at right top, rgba(255, 191, 110, 0.30), transparent 40%),
    linear-gradient(135deg, #006b80, #1597b3 70%);
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: var(--mkt-space-4);
  box-shadow: var(--mkt-shadow-soft);
  font-family: var(--mkt-font);
}
.mkt-next-action::after {
  content: "";
  position: absolute;
  right: -50px; top: 0; bottom: 0;
  width: 200px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
}
.mkt-next-action-icon {
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.mkt-next-action-text { flex: 1; position: relative; z-index: 1; }
.mkt-next-action-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 4px;
}
.mkt-next-action-msg {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}
.mkt-next-action-cta {
  position: relative; z-index: 1;
  background: #ffffff;
  color: var(--mkt-brand);
  border: none;
  padding: 14px 24px;
  border-radius: 14px;
  font-family: var(--mkt-font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  white-space: nowrap;
}
.mkt-next-action-cta:hover { transform: translateY(-1px); }

/* ============================================================
 * HERO CARD (estilo "tu progreso" con gradient)
 * ============================================================ */
.mkt-hero-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  min-height: 220px;
  border-radius: var(--mkt-radius-xl);
  background:
    radial-gradient(circle at right top, rgba(255, 191, 110, 0.30), transparent 26%),
    radial-gradient(circle at left bottom, rgba(33, 171, 200, 0.16), transparent 34%),
    linear-gradient(135deg, #006b80, #1597b3 58%, #0c7288 100%);
  color: #ffffff;
  box-shadow: var(--mkt-shadow-soft);
  font-family: var(--mkt-font);
}
.mkt-hero-card::after {
  content: "";
  position: absolute;
  right: -80px; top: 24px;
  width: 220px; height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
  pointer-events: none;
}
.mkt-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--mkt-space-2);
  font-weight: 700;
}
.mkt-hero-card h2 {
  margin: 0 0 var(--mkt-space-3);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 460px;
  position: relative; z-index: 1;
}
.mkt-hero-card p {
  margin: 0 0 var(--mkt-space-5);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.80);
  max-width: 440px;
  position: relative; z-index: 1;
}
.mkt-hero-stats {
  display: flex;
  gap: var(--mkt-space-3);
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.mkt-hero-stat {
  min-width: 110px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.mkt-hero-stat strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.mkt-hero-stat span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
}

/* ============================================================
 * STEPPER HUMANO (timeline de pasos)
 * ============================================================ */
.mkt-stepper {
  display: flex;
  gap: var(--mkt-space-4);
  background: var(--mkt-panel);
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: var(--mkt-radius-xl);
  padding: 24px 28px;
  box-shadow: var(--mkt-shadow-soft);
  overflow-x: auto;
  font-family: var(--mkt-font);
}
.mkt-step {
  flex: 1;
  min-width: 110px;
}
.mkt-step-circle {
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(36, 44, 56, 0.06);
  color: var(--mkt-ink-faint);
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  border: 3px solid var(--mkt-panel-strong);
  box-shadow: 0 0 0 1px var(--mkt-line);
}
.mkt-step.done .mkt-step-circle {
  background: linear-gradient(135deg, var(--mkt-success), #4cc28a);
  color: #ffffff;
  box-shadow: 0 0 0 1px var(--mkt-success), 0 6px 14px rgba(22, 146, 92, 0.25);
}
.mkt-step.current .mkt-step-circle {
  background: linear-gradient(135deg, var(--mkt-brand), var(--mkt-brand-2));
  color: #ffffff;
  box-shadow: 0 0 0 1px var(--mkt-brand), 0 6px 14px rgba(0, 127, 149, 0.30);
}
.mkt-step-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mkt-ink);
  margin-bottom: 2px;
  line-height: 1.3;
}
.mkt-step.pending .mkt-step-label { color: var(--mkt-ink-faint); }
.mkt-step-when {
  font-size: 11.5px;
  color: var(--mkt-ink-soft);
}

/* ============================================================
 * TASK (Mi día)
 * ============================================================ */
.mkt-task {
  background: var(--mkt-panel-strong);
  border: 1px solid var(--mkt-line);
  border-radius: var(--mkt-radius-lg);
  padding: 16px 22px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--mkt-shadow-sm);
  font-family: var(--mkt-font);
}
.mkt-task-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--mkt-warning-soft);
}
.mkt-task-icon.info { background: var(--mkt-brand-soft); }
.mkt-task-icon.ok { background: var(--mkt-success-soft); }
.mkt-task-icon.danger { background: var(--mkt-danger-soft); }
.mkt-task-info { flex: 1; min-width: 0; }
.mkt-task-folio {
  font-size: 11px;
  color: var(--mkt-ink-faint);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.mkt-task-msg {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 3px;
  color: var(--mkt-ink);
}
.mkt-task-meta {
  font-size: 12.5px;
  color: var(--mkt-ink-soft);
}

/* ============================================================
 * SECCIÓN COLAPSABLE (Mi día / Dashboard)
 * ============================================================ */
.mkt-collapse {
  background: var(--mkt-panel);
  border: 1px solid var(--mkt-line);
  border-radius: var(--mkt-radius-lg);
  margin-bottom: var(--mkt-space-4);
  overflow: hidden;
}
.mkt-collapse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  cursor: pointer;
  user-select: none;
}
.mkt-collapse-head:hover { background: rgba(36, 44, 56, 0.03); }
.mkt-collapse-title {
  font-family: var(--mkt-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mkt-ink);
}
.mkt-collapse-caret {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(36, 44, 56, 0.05);
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--mkt-ink-soft);
  transition: transform 0.2s ease;
}
.mkt-collapse[data-open="true"] .mkt-collapse-caret { transform: rotate(180deg); }
.mkt-collapse-body {
  padding: 14px 22px 22px;
  border-top: 1px solid var(--mkt-line);
  display: none;
}
.mkt-collapse[data-open="true"] .mkt-collapse-body { display: block; }

/* ============================================================
 * TOPBAR (estilo glassmorphism)
 * ============================================================ */
.mkt-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mkt-space-4);
  padding: 16px 20px;
  border-radius: var(--mkt-radius-lg);
  background: var(--mkt-panel);
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow: var(--mkt-shadow-soft);
  flex-wrap: wrap;
  font-family: var(--mkt-font);
}
.mkt-topbar h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--mkt-ink);
}
.mkt-topbar p {
  margin: 3px 0 0;
  color: var(--mkt-ink-soft);
  font-size: 13px;
}
.mkt-topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
 * UTILIDADES
 * ============================================================ */
.mkt-stack { display: flex; flex-direction: column; gap: var(--mkt-space-4); }
.mkt-row { display: flex; gap: var(--mkt-space-4); }
.mkt-row-tight { display: flex; gap: var(--mkt-space-2); }
.mkt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mkt-space-4); }
.mkt-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mkt-space-4); }
.mkt-muted { color: var(--mkt-ink-soft); font-size: 13px; }
.mkt-faint { color: var(--mkt-ink-faint); font-size: 12px; }

/* ============================================================
 * MODO SIMPLE — clase en <body class="mktpos-mode-simple">
 * Activa el fondo cálido, tipografía global y paleta de la app
 * SOLO si el user eligió este modo. No afecta al modo Clásico.
 *
 * Notas: aplicamos overrides AGRESIVOS porque queremos transformar
 * el look-and-feel sin refactorear todos los shortcodes todavía.
 * ============================================================ */
body.mktpos-mode-simple {
  background:
    radial-gradient(circle at top left, rgba(234, 106, 42, 0.15), transparent 26%),
    radial-gradient(circle at top right, rgba(33, 171, 200, 0.15), transparent 30%),
    linear-gradient(180deg, #fbf2e6 0%, #f5ecdf 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--mkt-font) !important;
  color: var(--mkt-ink);
}
body.mktpos-mode-simple .mktpos-wrap,
body.mktpos-mode-simple .mktpos-app-shell,
body.mktpos-mode-simple .mktpos-container {
  background: transparent !important;
  font-family: var(--mkt-font) !important;
}
/* Texto general en modo Simple */
body.mktpos-mode-simple .mktpos-wrap,
body.mktpos-mode-simple .mktpos-wrap *,
body.mktpos-mode-simple .mktpos-main,
body.mktpos-mode-simple .mktpos-main * {
  font-family: var(--mkt-font);
}
/* Cards principales toman radios + sombras nuevas */
body.mktpos-mode-simple .mktpos-card,
body.mktpos-mode-simple .mktpos-panel,
body.mktpos-mode-simple .mktpos-card-action {
  background: var(--mkt-panel-strong) !important;
  border: 1px solid var(--mkt-line) !important;
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: var(--mkt-shadow-sm) !important;
}
/* Botón primario → naranja gradient */
body.mktpos-mode-simple button.mktpos-btn-primary,
body.mktpos-mode-simple .mktpos-btn.mktpos-btn-primary,
body.mktpos-mode-simple a.mktpos-btn-primary {
  background: linear-gradient(135deg, var(--mkt-accent), var(--mkt-accent-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: var(--mkt-radius-sm) !important;
  box-shadow: 0 12px 24px rgba(234, 106, 42, 0.22) !important;
  font-weight: 700 !important;
}
/* Botón success → verde */
body.mktpos-mode-simple button.mktpos-btn-success,
body.mktpos-mode-simple .mktpos-btn.mktpos-btn-success,
body.mktpos-mode-simple a.mktpos-btn-success {
  background: linear-gradient(135deg, var(--mkt-success), #4cc28a) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: var(--mkt-radius-sm) !important;
  font-weight: 700 !important;
}
/* Botón danger → rojo */
body.mktpos-mode-simple button.mktpos-btn-danger,
body.mktpos-mode-simple .mktpos-btn.mktpos-btn-danger,
body.mktpos-mode-simple a.mktpos-btn-danger {
  background: var(--mkt-danger) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: var(--mkt-radius-sm) !important;
  font-weight: 700 !important;
}
/* Inputs toman radio nuevo */
body.mktpos-mode-simple input.mktpos-input,
body.mktpos-mode-simple select.mktpos-input,
body.mktpos-mode-simple textarea.mktpos-input,
body.mktpos-mode-simple .mktpos-input {
  border-radius: var(--mkt-radius-sm) !important;
  border-color: var(--mkt-line) !important;
  font-family: var(--mkt-font) !important;
}
/* Tabla con sombra y radio nuevo */
body.mktpos-mode-simple .mktpos-table-wrap,
body.mktpos-mode-simple .mktpos-dashboard-table {
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: var(--mkt-shadow-sm) !important;
  overflow: hidden;
}
/* Headers de cards más prominentes */
body.mktpos-mode-simple .mktpos-card-header h3 {
  font-family: var(--mkt-font);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ============================================================
 * MODO SIMPLE — UNIFICACIÓN AGRESIVA por pantalla
 * Estos overrides se aplican a TODAS las pantallas viejas para
 * que adopten la paleta sin refactor del HTML.
 * ============================================================ */

/* ──── HEADINGS ──── */
body.mktpos-mode-simple h1,
body.mktpos-mode-simple h2,
body.mktpos-mode-simple h3,
body.mktpos-mode-simple h4 {
  font-family: var(--mkt-font);
  letter-spacing: -0.02em;
  color: var(--mkt-ink);
}
body.mktpos-mode-simple h1 { font-weight: 800; }
body.mktpos-mode-simple h2 { font-weight: 800; }
body.mktpos-mode-simple h3 { font-weight: 700; }

/* ──── TOPBAR / PAGE HEADER ──── */
body.mktpos-mode-simple .mktpos-page-header,
body.mktpos-mode-simple .mktpos-toolbar,
body.mktpos-mode-simple .mktpos-topbar {
  background: var(--mkt-panel) !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: var(--mkt-shadow-soft) !important;
  backdrop-filter: blur(12px);
}

/* ──── BOTONES SECUNDARIOS ──── */
body.mktpos-mode-simple button.mktpos-btn-ghost,
body.mktpos-mode-simple .mktpos-btn.mktpos-btn-ghost,
body.mktpos-mode-simple a.mktpos-btn-ghost {
  background: transparent !important;
  color: var(--mkt-ink-soft) !important;
  border: 1px solid var(--mkt-line) !important;
  border-radius: var(--mkt-radius-sm) !important;
  font-weight: 600 !important;
}
body.mktpos-mode-simple button.mktpos-btn-ghost:hover {
  background: rgba(36, 44, 56, 0.04) !important;
}
body.mktpos-mode-simple button.mktpos-btn-sm,
body.mktpos-mode-simple .mktpos-btn.mktpos-btn-sm {
  border-radius: var(--mkt-radius-sm) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
}

/* ──── TABLA del Dashboard ──── */
body.mktpos-mode-simple table.mktpos-dashboard-table,
body.mktpos-mode-simple .mktpos-dashboard-wrap table {
  background: var(--mkt-panel-strong) !important;
  border-radius: var(--mkt-radius-lg) !important;
  border-collapse: separate;
  border-spacing: 0;
}
body.mktpos-mode-simple .mktpos-dashboard-wrap thead th,
body.mktpos-mode-simple table.mktpos-dashboard-table thead th {
  background: linear-gradient(180deg, #fff6eb, #f7efe3) !important;
  color: var(--mkt-ink-soft) !important;
  font-family: var(--mkt-font) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  border-bottom: 1px solid var(--mkt-line) !important;
}
body.mktpos-mode-simple .mktpos-dashboard-wrap tbody tr {
  transition: background 0.15s;
}
body.mktpos-mode-simple .mktpos-dashboard-wrap tbody tr:hover {
  background: rgba(255, 246, 235, 0.5);
}
body.mktpos-mode-simple .mktpos-dashboard-wrap tbody td {
  font-family: var(--mkt-font) !important;
  border-bottom: 1px solid var(--mkt-line) !important;
  font-variant-numeric: tabular-nums;
}

/* ──── KPIs del Dashboard ──── */
body.mktpos-mode-simple .mktpos-kpi-card,
body.mktpos-mode-simple .mktpos-kpi {
  background: linear-gradient(180deg, #ffffff, #fffaf3) !important;
  border: 1px solid var(--mkt-line) !important;
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: var(--mkt-shadow-sm) !important;
  font-family: var(--mkt-font);
}
body.mktpos-mode-simple .mktpos-kpi-value,
body.mktpos-mode-simple .mktpos-kpi-card strong {
  font-family: var(--mkt-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
body.mktpos-mode-simple .mktpos-kpi-label {
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mkt-ink-soft) !important;
  font-weight: 700 !important;
}

/* ──── FILTROS y TABS ──── */
body.mktpos-mode-simple .mktpos-filter-bar,
body.mktpos-mode-simple .mktpos-tabs {
  background: var(--mkt-panel) !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: var(--mkt-shadow-sm) !important;
}
body.mktpos-mode-simple .mktpos-tab-btn,
body.mktpos-mode-simple .mktpos-tab {
  font-family: var(--mkt-font) !important;
  font-weight: 600 !important;
  border-radius: var(--mkt-radius-sm) !important;
}
body.mktpos-mode-simple .mktpos-tab-btn.active,
body.mktpos-mode-simple .mktpos-tab.active {
  background: linear-gradient(135deg, var(--mkt-brand), var(--mkt-brand-2)) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0, 127, 149, 0.20);
}

/* ──── VISTA DE COTIZACIÓN ──── */
body.mktpos-mode-simple .mktpos-quote-header,
body.mktpos-mode-simple .mktpos-quote-meta-card {
  background: var(--mkt-panel-strong) !important;
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: var(--mkt-shadow-sm) !important;
  border: 1px solid var(--mkt-line) !important;
}
body.mktpos-mode-simple .mktpos-quote-folio,
body.mktpos-mode-simple .mktpos-quote-id {
  font-family: var(--mkt-font);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Stepper de tracking */
body.mktpos-mode-simple .mktpos-tracking-stepper,
body.mktpos-mode-simple .mktpos-tracking-step {
  font-family: var(--mkt-font);
}
body.mktpos-mode-simple .mktpos-tracking-step.done .mktpos-tracking-step-circle,
body.mktpos-mode-simple .mktpos-tracking-circle.is-done {
  background: linear-gradient(135deg, var(--mkt-success), #4cc28a) !important;
  box-shadow: 0 6px 14px rgba(22, 146, 92, 0.25);
}
body.mktpos-mode-simple .mktpos-tracking-step.current .mktpos-tracking-step-circle,
body.mktpos-mode-simple .mktpos-tracking-circle.is-current {
  background: linear-gradient(135deg, var(--mkt-brand), var(--mkt-brand-2)) !important;
  box-shadow: 0 6px 14px rgba(0, 127, 149, 0.30);
}

/* ──── REPORTE DE CORTES ──── */
body.mktpos-mode-simple .mktpos-reports-wrap .mktpos-card,
body.mktpos-mode-simple .mktpos-reports-card {
  background: var(--mkt-panel-strong) !important;
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: var(--mkt-shadow-sm) !important;
  border: 1px solid var(--mkt-line) !important;
}
/* Métricas clave del reporte → look summary-card */
body.mktpos-mode-simple .mktpos-reports-key-metric,
body.mktpos-mode-simple .mktpos-key-kpi {
  background: linear-gradient(180deg, #ffffff, #fffaf3) !important;
  border-radius: var(--mkt-radius-lg) !important;
  border: 1px solid var(--mkt-line) !important;
}

/* ──── BADGES y CHIPS de estado en cualquier pantalla ──── */
body.mktpos-mode-simple .mktpos-badge,
body.mktpos-mode-simple .mktpos-chip,
body.mktpos-mode-simple .mktpos-tag {
  font-family: var(--mkt-font);
  font-weight: 700;
  border-radius: 999px !important;
  letter-spacing: 0.01em;
}

/* ──── MODALES en general ──── */
body.mktpos-mode-simple .mktpos-modal,
body.mktpos-mode-simple [class*="mktpos-modal"] {
  font-family: var(--mkt-font);
  border-radius: var(--mkt-radius-lg) !important;
}

/* ──── SIDEBAR — toques de cálido ──── */
body.mktpos-mode-simple .mktpos-sidebar {
  font-family: var(--mkt-font);
}
body.mktpos-mode-simple .mktpos-sb-nav-item.active,
body.mktpos-mode-simple a.mktpos-sb-nav-item.active {
  background: linear-gradient(135deg, rgba(234, 106, 42, 0.28), rgba(33, 171, 200, 0.22)) !important;
  color: #fff !important;
}

/* ──── LINKS dentro del wrap ──── */
body.mktpos-mode-simple .mktpos-wrap a:not(.mktpos-btn):not(.mktpos-sb-nav-item):not([class*="mkt-btn"]) {
  color: var(--mkt-brand);
}

/* ──── INPUT focus con anillo brand ──── */
body.mktpos-mode-simple input.mktpos-input:focus,
body.mktpos-mode-simple select.mktpos-input:focus,
body.mktpos-mode-simple textarea.mktpos-input:focus {
  border-color: var(--mkt-brand) !important;
  box-shadow: 0 0 0 3px var(--mkt-brand-soft) !important;
  outline: none !important;
}

/* ──── EMPTY STATE más amable ──── */
body.mktpos-mode-simple .mktpos-empty-state {
  background: var(--mkt-panel) !important;
  border: 1px dashed var(--mkt-line) !important;
  border-radius: var(--mkt-radius-lg) !important;
  color: var(--mkt-ink-soft);
}

/* ──── BANNER "Tu siguiente paso" en sc_quote_view (modo simple)  ──── */
body.mktpos-mode-simple .mktpos-next-step-banner {
  display: flex !important;
}
body:not(.mktpos-mode-simple) .mktpos-next-step-banner {
  display: none !important;
}

/* ============================================================
 * OVERRIDE CONSERVADOR del CSS viejo (.mktpos-*)
 * Se activa con <body class="mktpos-design-v2">.
 * Esto le da paleta nueva a pantallas viejas sin refactor.
 * Si NO tiene la clase del body, este bloque no afecta nada.
 * ============================================================ */
body.mktpos-design-v2 .mktpos-wrap {
  font-family: var(--mkt-font);
}
body.mktpos-design-v2 button.mktpos-btn-primary,
body.mktpos-design-v2 .mktpos-btn.mktpos-btn-primary,
body.mktpos-design-v2 a.mktpos-btn-primary {
  background: linear-gradient(135deg, var(--mkt-accent), var(--mkt-accent-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(234, 106, 42, 0.22);
  font-weight: 700;
}
body.mktpos-design-v2 .mktpos-card {
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow-sm);
}

/* ============================================================
 * FIN del Design System v2
 * ============================================================ */