/* Accio Design System — Command Center */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,600&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── SUPERFICIES (tema claro: pálido → blanco) ── */
  --bg-base:      #eef6f0;
  --bg-canvas:    #e8f3eb;
  --bg-card:      #ffffff;
  --bg-panel:     #ffffff;
  --bg-hover:     #f5faf7;
  --bg-selected:  #e2f0e6;
  --bg-elevated:  #f8fcf9;

  /* ── VERDE CORPORATIVO (#1a4a2e = texto y acento) ── */
  --green-900:    #0f2e18;
  --green-800:    #143d22;
  --green-700:    #1a4a2e;
  --green-600:    #1a4a2e;
  --green-500:    #255c3a;
  --green-400:    #2d6b44;
  --green-300:    #3a7e52;
  --green-light:  #1a4a2e;
  --green-tint:   #d4e9dc;

  /* ── TEXTO ── */
  --text-primary:   #1a4a2e;
  --text-secondary: #3d6648;
  --text-muted:     #6a9275;
  --text-disabled:  #9cb8a4;

  /* ── SEMÁNTICOS (colores UI + fondos tintados) ── */
  --accent:         #1a4a2e;
  --accent-bg:      #e8f5ec;
  --accent-border:  #b8dcc4;
  --warning:        #b45309;
  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;
  --danger:         #dc2626;
  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  --info:           #2563eb;
  --info-bg:        #eff6ff;
  --info-border:    #bfdbfe;
  --success:        #16a34a;
  --success-bg:     #f0fdf4;
  --success-border: #bbf7d0;

  /* ── BORDES ── */
  --border:         rgba(26, 74, 46, 0.1);
  --border-strong:  rgba(26, 74, 46, 0.18);
  --border-green:   #c5e0ce;

  /* ── TIPOGRAFÍA ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ── RADIOS ── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 20px;

  /* ── ESPACIADO ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 28px;

  /* Aliases legacy (--accio-*) */
  --accio-bg-base:        var(--bg-base);
  --accio-bg-surface:     var(--bg-card);
  --accio-bg-surface-2:   var(--bg-panel);
  --accio-bg-inset:       var(--bg-hover);
  --accio-border:         var(--border);
  --accio-border-strong:  var(--border-strong);
  --accio-text-primary:   var(--text-primary);
  --accio-text-secondary: var(--text-secondary);
  --accio-text-tertiary:  var(--text-muted);
  --accio-text-disabled:  var(--text-disabled);
  --accio-accent:         var(--green-600);
  --accio-accent-hover:   var(--green-400);
  --accio-accent-muted:   var(--accent-bg);
  --accio-accent-text:    var(--green-600);
  --accio-success:        var(--success);
  --accio-success-muted:  var(--success-bg);
  --accio-warning:        var(--warning);
  --accio-danger:         var(--danger);
  --accio-danger-muted:   var(--danger-bg);
  --accio-info:           var(--info);
  --accio-font-display:   var(--font-sans);
  --accio-font-body:      var(--font-sans);
  --accio-font-mono:      var(--font-mono);
  --accio-text-xs:   0.6875rem;
  --accio-text-sm:   0.8125rem;
  --accio-text-base: 0.9375rem;
  --accio-text-lg:   1.125rem;
  --accio-text-xl:   1.5rem;
  --accio-text-2xl:  1.75rem;
  --accio-weight-regular:  400;
  --accio-weight-medium:   500;
  --accio-weight-semibold: 600;
  --accio-weight-bold:     700;
  --accio-tracking-tight: -0.02em;
  --accio-tracking-wide:  0.06em;
  --accio-space-1: var(--space-xs);
  --accio-space-2: var(--space-sm);
  --accio-space-3: var(--space-md);
  --accio-space-4: var(--space-lg);
  --accio-space-5: var(--space-xl);
  --accio-space-6: 32px;
  --accio-radius-sm: var(--radius-sm);
  --accio-radius-md: var(--radius-md);
  --accio-radius-lg: var(--radius-lg);
  --accio-radius-full: var(--radius-pill);
  --accio-border-width: 1px;
  --accio-shadow-sm:  0 1px 2px rgba(26, 74, 46, 0.06);
  --accio-shadow-md:  0 4px 12px rgba(26, 74, 46, 0.08);
  --accio-shadow-lg:  0 12px 28px rgba(26, 74, 46, 0.1);

  /* Aliases semánticos (plan + boot progress) */
  --border-subtle:       var(--border);
  --font-display:        var(--font-sans);
  --accio-space-7:       40px;
  --accio-space-8:       48px;
  --accio-border-subtle: var(--border-subtle);
  --accio-bg-surface-1:  var(--bg-panel);
  --accio-bg-surface-3:  var(--bg-hover);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--accio-text-base);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── LAYOUT +Acción spec ── */
.topbar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--accio-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2xl);
  min-height: 58px;
  gap: var(--space-lg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1 1 auto;
  min-width: 0;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding-right: 4px;
}
.topbar-brand:hover { text-decoration: none; }
.topbar-mark {
  width: 34px;
  height: 34px;
  color: var(--green-600);
  flex-shrink: 0;
}
.topbar-mark .em-gear-ring {
  transform-origin: center;
  animation: em-spin 12s linear infinite;
}
.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--green-600);
  color: var(--green-light);
  font-weight: 700;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
}
.brand-em {
  font-style: normal;
  font-weight: 700;
  color: var(--green-600);
  letter-spacing: -0.06em;
}
.empresa-pill,
.tenant-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tenant-pill i { color: var(--green-400); }
.tenant-pill:hover {
  background: var(--bg-hover);
  border-color: var(--green-300);
}
/* Tenant — pill destacado */
.empresa-pill--claro,
.tenant-pill--claro {
  background: var(--accent-bg);
  border-color: var(--border-green);
  color: var(--green-600);
  box-shadow: none;
}
.tenant-pill--claro i { color: var(--green-400); }
.tenant-pill--claro:hover {
  background: var(--bg-selected);
  border-color: var(--green-300);
}
.tenant-pill--claro .tenant-select {
  color: var(--green-600);
  font-weight: 600;
}
.tenant-pill--claro .tenant-chevron { color: var(--green-400); opacity: 0.85; }
.tenant-pill--claro:hover {
  background: var(--bg-selected);
  border-color: var(--green-300);
}
.tenant-select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  max-width: 15rem;
}
.tenant-select:focus { outline: none; }
.empresa-pill-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.empresa-select,
.tenant-select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  max-width: 18rem;
}
.empresa-chevron,
.tenant-chevron { font-size: 14px; opacity: 0.6; pointer-events: none; }
.config-form-section {
  grid-column: 1 / -1;
  margin: var(--accio-space-3) 0 var(--accio-space-1);
  font-size: var(--accio-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.empresa-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.empresa-picker-item {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--border-green);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.empresa-picker-item:hover {
  background: var(--accent-bg);
  border-color: var(--green-400);
}
.empresa-picker-name { font-weight: 600; color: var(--text-primary); }
.empresa-picker-meta { font-size: 12px; color: var(--text-muted); }
.empresas-card { max-width: 440px; }
.empresa-picker-empty { color: var(--text-muted); padding: 12px 0; }

.resumen-empresa-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--accio-space-4);
  padding: 12px 16px;
  border: 1px solid var(--accio-border);
  border-radius: var(--accio-radius-md);
  background: var(--accio-bg-surface);
}

.accio-home-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--accio-space-4);
  padding: 14px 18px;
  border: 1px solid var(--accio-accent, #228b57);
  border-radius: var(--accio-radius-md);
  background: linear-gradient(135deg, rgba(34, 139, 87, 0.08), rgba(34, 139, 87, 0.02));
}

.accio-home-banner strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.accio-home-banner p {
  margin: 0;
  font-size: 13px;
  color: var(--accio-text-secondary);
  line-height: 1.45;
}
.resumen-empresa-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accio-text-tertiary);
}
.resumen-empresa-name {
  font-size: 16px;
  color: var(--accio-text-primary);
}
.resumen-empresa-sep {
  color: var(--accio-text-tertiary);
  margin: 0 4px;
}
.topbar-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
}
.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 6px 16px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon { padding: 6px 10px; }
.btn-primary {
  background: var(--green-600);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 6px 18px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--green-400); color: #ffffff; }

.navbar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  padding: 0 var(--space-2xl);
  overflow-x: auto;
  scrollbar-width: thin;
}
.navbar .nav-item {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
  margin: 0;
}
.navbar .nav-item:hover {
  color: var(--green-600);
  background: var(--bg-hover);
}
.navbar .nav-item.active {
  color: var(--green-600);
  border-bottom-color: var(--green-600);
  font-weight: 600;
  background: var(--accent-bg);
}

.content, .accio-main {
  background: var(--bg-canvas);
  padding: var(--space-xl) var(--space-2xl);
  max-width: none;
  margin: 0;
}

.metrics-grid, .accio-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.metric-card, .accio-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  border-top: 3px solid transparent;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: var(--accio-shadow-sm);
}
.metric-card:hover, .accio-kpi-card:hover {
  background: var(--bg-hover);
  box-shadow: var(--accio-shadow-md);
}
.metric-card.c-green,   .accio-kpi-card.c-green {
  border-top-color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}
.metric-card.c-amber,   .accio-kpi-card.c-amber {
  border-top-color: var(--warning);
  background: var(--warning-bg);
  border-color: var(--warning-border);
}
.metric-card.c-blue,    .accio-kpi-card.c-blue {
  border-top-color: var(--info);
  background: var(--info-bg);
  border-color: var(--info-border);
}
.metric-card.c-red,     .accio-kpi-card.c-red {
  border-top-color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}
.metric-card.c-neutral, .accio-kpi-card.c-neutral {
  border-top-color: var(--border-strong);
  background: var(--bg-card);
}
.metric-card.c-tenant-claro, .accio-kpi-card.c-tenant-claro {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  border-top-color: var(--green-600);
}
.metric-card.c-tenant-claro .metric-label,
.metric-card.c-tenant-claro .accio-kpi-label { color: var(--text-secondary); }
.metric-card.c-tenant-claro .metric-value,
.metric-card.c-tenant-claro .accio-kpi-value { color: var(--green-600); }
.metric-label, .accio-kpi-label {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.metric-value, .accio-kpi-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  font-family: var(--font-sans);
}
.metric-value .denom { color: var(--text-muted); font-weight: 400; }

.panels-grid, .accio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.panel-full { grid-column: 1 / -1; }
.panel, .accio-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--accio-shadow-sm);
}
.panel-header, .accio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}
.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}
.panel-title i { color: var(--text-muted); font-size: 16px; }
.panel-link {
  font-size: 12px;
  color: var(--green-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.panel-link:hover { text-decoration: underline; }
.panel-body, .accio-card-body { padding: 0; }

.tbl-head {
  display: grid;
  padding: 8px 20px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-disabled);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  gap: 14px;
}
.tbl-row {
  display: grid;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.1s;
}
.tbl-row:last-child { border-bottom: none; }
.tbl-row:hover { background: var(--bg-hover); }
.tbl-queue { grid-template-columns: 72px 1fr 100px 1fr; }
.tbl-leads { grid-template-columns: 1fr 1fr 110px 110px; }
.tbl-muted { color: var(--text-muted); font-size: 12px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green  { background: var(--accent-bg);   color: var(--accent);   border: 1px solid var(--accent-border); }
.badge-amber  { background: var(--warning-bg);  color: var(--warning);  border: 1px solid var(--warning-border); }
.badge-danger { background: var(--danger-bg);   color: var(--danger);   border: 1px solid var(--danger-border); }
.badge-blue   { background: var(--info-bg);     color: var(--info);     border: 1px solid var(--info-border); }
.badge-gray   { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-strong); }

@media (max-width: 1100px) {
  .metrics-grid, .accio-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .metrics-grid, .accio-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .panels-grid, .accio-grid { grid-template-columns: 1fr; }
  .topbar, .navbar { padding: 0 var(--space-lg); }
  .content, .accio-main { padding: var(--space-lg); }
  .tbl-queue, .tbl-leads { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .metrics-grid, .accio-kpi-grid { grid-template-columns: 1fr; }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
.accio-tab:focus-visible,
.navbar .nav-item:focus-visible {
  outline: 2px solid var(--accio-accent);
  outline-offset: 2px;
}

.hidden { display: none !important; }

/* Login — pantalla dedicada */
.login-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(26, 74, 46, 0.06), transparent),
    var(--bg-base);
}
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}
.login-card {
  width: min(440px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--accio-radius-lg);
  padding: var(--accio-space-6);
  box-shadow: var(--accio-shadow-lg);
}
.login-card-head {
  margin-bottom: var(--accio-space-5);
  padding-bottom: var(--accio-space-4);
  border-bottom: var(--accio-border-width) solid var(--accio-border);
}
.login-tenant {
  margin: var(--accio-space-3) 0 0;
  font-size: var(--accio-text-sm);
  color: var(--accio-accent-text);
  font-weight: var(--accio-weight-semibold);
}
.login-title {
  margin: 0 0 var(--accio-space-2);
  font-family: var(--accio-font-display);
  font-size: var(--accio-text-xl);
  font-weight: var(--accio-weight-semibold);
  color: var(--accio-text-primary);
}
.login-subtitle {
  margin: 0 0 var(--accio-space-5);
  font-size: var(--accio-text-sm);
  color: var(--accio-text-secondary);
  line-height: 1.5;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--accio-space-4);
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--accio-space-2);
  font-size: var(--accio-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accio-text-tertiary);
}
.login-field input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--accio-space-3) var(--accio-space-4);
  border-radius: var(--accio-radius-md);
  border: var(--accio-border-width) solid var(--accio-border-strong);
  background: #ffffff;
  color: var(--accio-text-primary);
  font-family: var(--accio-font-body);
  font-size: var(--accio-text-base);
  text-transform: none;
  letter-spacing: normal;
}
.login-field input:focus {
  outline: none;
  border-color: var(--accio-accent);
  box-shadow: 0 0 0 2px var(--accio-accent-muted);
}
.login-field input::placeholder { color: var(--accio-text-disabled); }
.login-submit {
  width: 100%;
  margin-top: var(--accio-space-2);
  padding: var(--accio-space-3) var(--accio-space-4);
  font-size: var(--accio-text-base);
}
.login-error {
  margin: 0;
  padding: var(--accio-space-3);
  border-radius: var(--accio-radius-sm);
  background: var(--accio-danger-muted);
  color: var(--accio-danger);
  font-size: var(--accio-text-sm);
}
.login-foot {
  margin-top: var(--accio-space-5);
  padding-top: var(--accio-space-4);
  border-top: var(--accio-border-width) solid var(--accio-border);
}
.login-foot p {
  margin: 0;
  text-align: center;
  font-size: var(--accio-text-xs);
  color: var(--accio-text-tertiary);
  line-height: 1.5;
}

/* Login overlay legacy (dashboard embebido) */
.login-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 18, 16, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.login-box {
  background: var(--accio-bg-surface);
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-lg);
  padding: var(--accio-space-6);
  width: min(420px, 92vw);
  box-shadow: var(--accio-shadow-lg);
}
.login-brand {
  display: flex; align-items: center; gap: var(--accio-space-3);
  margin-bottom: var(--accio-space-5);
}
.login-brand .wordmark {
  font-family: var(--accio-font-display);
  font-size: var(--accio-text-xl);
  font-weight: var(--accio-weight-semibold);
  letter-spacing: var(--accio-tracking-tight);
}
.login-box p {
  color: var(--accio-text-secondary);
  font-size: var(--accio-text-sm);
  margin-bottom: var(--accio-space-4);
}
#loginUser input {
  margin-bottom: var(--accio-space-3);
}
.login-hint {
  margin-top: var(--accio-space-4);
  text-align: center;
  font-size: var(--accio-text-xs);
  color: var(--accio-text-tertiary);
}
.login-box input {
  width: 100%;
  padding: var(--accio-space-3);
  border-radius: var(--accio-radius-md);
  border: var(--accio-border-width) solid var(--accio-border-strong);
  background: var(--accio-bg-inset);
  color: var(--accio-text-primary);
  font-family: var(--accio-font-mono);
  font-size: var(--accio-text-sm);
  margin-bottom: var(--accio-space-4);
}
.login-box input::placeholder { color: var(--accio-text-disabled); }

/* Header */
.accio-header {
  border-bottom: var(--accio-border-width) solid var(--accio-border);
  padding: var(--accio-space-4) var(--accio-space-5);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--accio-space-4);
  background: var(--accio-bg-surface);
  box-shadow: var(--accio-shadow-sm);
}
.accio-header-left {
  display: flex; align-items: center; gap: var(--accio-space-5);
  flex-wrap: wrap;
}
.accio-brand {
  display: flex; align-items: center; gap: var(--accio-space-3);
  text-decoration: none;
  color: inherit;
}
.accio-brand:hover { text-decoration: none; }

/* EMAccion logo — engranaje + wordmark */
.em-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.login-brand.em-logo {
  margin-bottom: 0;
}
.em-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.em-logo-icon {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.em-logo-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--green-600);
}
.em-gear-ring {
  transform-origin: center;
  animation: em-spin 6s linear infinite;
}
.em-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: var(--accio-weight-semibold);
  font-style: normal;
  color: var(--accio-accent);
  letter-spacing: -0.12em;
  line-height: 1;
  pointer-events: none;
}
.em-plus {
  font-family: Georgia, 'Fraunces', serif;
  font-style: italic;
  font-size: var(--accio-text-lg);
  font-weight: var(--accio-weight-semibold);
  color: var(--accio-text-primary);
  line-height: 1;
  margin-left: -3px;
}
.em-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--green-600);
  margin-left: 0;
}
.login-brand .em-logo-icon { width: 52px; height: 52px; }
.login-brand .em-wordmark { font-size: 1.85rem; }

@keyframes em-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .em-gear-ring { animation: none; }
}

.accio-logomark {
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.accio-wordmark {
  font-family: var(--accio-font-display);
  font-size: var(--accio-text-lg);
  font-weight: var(--accio-weight-semibold);
  letter-spacing: var(--accio-tracking-tight);
  color: var(--accio-text-primary);
}
.accio-client {
  display: flex; align-items: center; gap: var(--accio-space-2);
  padding: var(--accio-space-2) var(--accio-space-3);
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-md);
  background: var(--accio-bg-inset);
  color: var(--accio-text-secondary);
  font-size: var(--accio-text-sm);
}
.accio-client-name {
  font-family: var(--accio-font-display);
  color: var(--accio-text-primary);
}
.accio-clock {
  font-family: var(--accio-font-mono);
  font-size: var(--accio-text-xs);
  color: var(--accio-text-tertiary);
  margin-top: var(--accio-space-1);
}
.accio-header-right {
  display: flex; align-items: center; gap: var(--accio-space-3);
  flex-wrap: wrap;
}

.accio-status-live {
  display: inline-flex; align-items: center; gap: var(--accio-space-2);
  padding: var(--accio-space-1) var(--accio-space-3);
  border-radius: var(--accio-radius-full);
  background: var(--accio-accent-muted);
  color: var(--accio-accent-text);
  font-size: var(--accio-text-xs);
  font-weight: var(--accio-weight-medium);
}
.accio-status-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accio-accent);
  animation: accio-pulse 2s ease-in-out infinite;
}
@keyframes accio-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accio-accent-muted); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .accio-status-live::before { animation: none; }
}

/* Buttons */
.accio-btn-primary {
  background: var(--green-600);
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: var(--accio-weight-semibold);
  font-size: var(--accio-text-sm);
  border-radius: var(--radius-md);
  padding: var(--accio-space-2) var(--accio-space-4);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.accio-btn-primary:hover { background: var(--green-400); color: #ffffff; }
.accio-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.accio-btn-secondary {
  background: transparent;
  color: var(--accio-text-secondary);
  font-family: var(--accio-font-body);
  font-size: var(--accio-text-sm);
  font-weight: var(--accio-weight-medium);
  border: 1px solid var(--accio-border-strong);
  border-radius: var(--accio-radius-md);
  padding: var(--accio-space-2) var(--accio-space-4);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.accio-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.accio-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.accio-btn-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--accio-border-strong);
  border-radius: var(--accio-radius-md);
  color: var(--accio-text-secondary);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.accio-btn-icon:hover {
  border-color: var(--accio-text-tertiary);
  color: var(--accio-text-primary);
}

.accio-menu {
  position: relative;
}
.accio-menu-panel {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + var(--accio-space-2));
  min-width: 200px;
  background: var(--accio-bg-surface-2);
  border: var(--accio-border-width) solid var(--accio-border-strong);
  border-radius: var(--accio-radius-md);
  box-shadow: var(--accio-shadow-md);
  z-index: 50;
  padding: var(--accio-space-2);
}
.accio-menu-panel.open { display: block; }
.accio-menu-item {
  display: block; width: 100%;
  text-align: left;
  padding: var(--accio-space-2) var(--accio-space-3);
  background: none; border: none;
  color: var(--accio-text-secondary);
  font-size: var(--accio-text-sm);
  border-radius: var(--accio-radius-sm);
  cursor: pointer;
}
.accio-menu-item:hover {
  background: var(--accio-bg-inset);
  color: var(--accio-text-primary);
}
.accio-menu-item.danger { color: var(--accio-danger); }

/* Tabs legacy (paneles internos, no navbar principal) */
.accio-tabs {
  display: flex; flex-wrap: wrap; gap: var(--accio-space-5);
  margin-bottom: var(--accio-space-5);
  border-bottom: var(--accio-border-width) solid var(--accio-border);
}
.accio-tabs .accio-tab {
  background: none; border: none;
  padding: var(--accio-space-3) 0;
  margin-bottom: -1px;
  font-family: var(--accio-font-body);
  font-size: var(--accio-text-sm);
  font-weight: var(--accio-weight-medium);
  color: var(--accio-text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.accio-tabs .accio-tab:hover { color: var(--accio-text-secondary); }
.accio-tabs .accio-tab.active {
  color: var(--accio-text-primary);
  border-bottom-color: var(--accio-accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* KPI grid */
.accio-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--accio-space-4);
  margin-bottom: var(--accio-space-5);
}
@media (max-width: 480px) {
  .accio-kpi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) and (min-width: 481px) {
  .accio-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.accio-kpi-card {
  background: var(--accio-bg-surface);
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-lg);
  padding: var(--accio-space-5);
  transition: border-color 0.15s ease;
}
.accio-kpi-card:hover { border-color: var(--accio-border-strong); }
.accio-kpi-label {
  font: var(--accio-weight-medium) var(--accio-text-xs)/1.2 var(--accio-font-body);
  letter-spacing: var(--accio-tracking-wide);
  text-transform: uppercase;
  color: var(--accio-text-tertiary);
  margin-bottom: var(--accio-space-2);
}
.accio-kpi-value {
  font: var(--accio-weight-semibold) var(--accio-text-2xl)/1 var(--accio-font-display);
  color: var(--accio-text-primary);
  letter-spacing: var(--accio-tracking-tight);
}
.accio-kpi-value.is-accent { color: var(--accio-text-primary); }

/* Cards */
.accio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--accio-space-5);
}
@media (max-width: 900px) { .accio-grid { grid-template-columns: 1fr; } }

.accio-card {
  background: var(--accio-bg-surface);
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-lg);
  overflow: hidden;
  box-shadow: var(--accio-shadow-sm);
}
.accio-card-head {
  padding: var(--accio-space-4);
  border-bottom: var(--accio-border-width) solid var(--accio-border);
  font-weight: var(--accio-weight-semibold);
  font-size: var(--accio-text-sm);
  color: var(--accio-text-primary);
  display: flex; justify-content: space-between; align-items: center;
}
.accio-card-head a {
  font-size: var(--accio-text-xs);
  font-weight: var(--accio-weight-medium);
}
.accio-card-body {
  max-height: 480px;
  overflow-y: auto;
}

/* Tables */
.accio-table-wrap { background: #ffffff; }
.accio-table {
  width: 100%;
  border-collapse: collapse;
}
.accio-table th {
  font: var(--accio-weight-medium) var(--accio-text-xs) var(--accio-font-body);
  text-transform: uppercase;
  letter-spacing: var(--accio-tracking-wide);
  color: var(--accio-text-tertiary);
  border-bottom: 1px solid var(--accio-border);
  padding: var(--accio-space-3) var(--accio-space-4);
  text-align: left;
  position: sticky; top: 0;
  background: var(--bg-hover);
}
.accio-table td {
  font-size: var(--accio-text-sm);
  color: var(--accio-text-primary);
  padding: var(--accio-space-3) var(--accio-space-4);
  border-bottom: 1px solid var(--accio-border);
  vertical-align: top;
}
.accio-table tr:last-child td { border-bottom: none; }
.accio-table td.is-mono,
.accio-table code {
  font-family: var(--accio-font-mono);
  font-size: var(--accio-text-xs);
  color: var(--accio-text-primary);
}

/* Badges */
.accio-badge {
  display: inline-flex; align-items: center;
  gap: var(--accio-space-1);
  padding: 2px var(--accio-space-2);
  border-radius: var(--accio-radius-sm);
  font: var(--accio-weight-medium) var(--accio-text-xs) var(--accio-font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.accio-badge--linkedin {
  color: var(--accio-platform-linkedin);
  background: color-mix(in srgb, var(--accio-platform-linkedin) 15%, transparent);
}
.accio-badge--meta {
  color: var(--accio-platform-meta);
  background: color-mix(in srgb, var(--accio-platform-meta) 15%, transparent);
}
.accio-badge--default {
  color: var(--accio-platform-default);
  background: color-mix(in srgb, var(--accio-platform-default) 15%, transparent);
}

/* Status text — muted, not traffic light */
.status-ok { color: var(--accio-success); }
.status-fail { color: var(--accio-danger); }
.status-pending { color: var(--accio-accent-text); }
.status-run { color: var(--accio-info); }
.conn-ok { color: var(--accio-success); }
.conn-warn { color: var(--accio-accent-text); }
.conn-plan { color: var(--accio-text-tertiary); }

/* Calendar */
.cal-week {
  padding: var(--accio-space-4);
  border-bottom: var(--accio-border-width) solid var(--accio-border);
}
.cal-week:last-child { border-bottom: none; }
.cal-week h4 {
  font-size: var(--accio-text-xs);
  font-weight: var(--accio-weight-medium);
  letter-spacing: var(--accio-tracking-wide);
  text-transform: uppercase;
  color: var(--accio-text-tertiary);
  margin-bottom: var(--accio-space-3);
}
.cal-items { display: flex; flex-direction: column; gap: var(--accio-space-2); }
.cal-item {
  display: flex; align-items: center; gap: var(--accio-space-3);
  padding: var(--accio-space-2) var(--accio-space-3);
  background: var(--accio-bg-inset);
  border-radius: var(--accio-radius-sm);
  font-size: var(--accio-text-sm);
  color: var(--accio-text-primary);
}
.cal-date {
  min-width: 5.5rem;
  font-family: var(--accio-font-mono);
  font-size: var(--accio-text-xs);
  color: var(--accio-text-primary);
}
.cal-dot {
  width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0;
}
.cal-dot.published { background: var(--accio-success); }
.cal-dot.pending { background: var(--accio-accent); }

/* Flyers */
.flyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--accio-space-4);
  padding: var(--accio-space-4);
}
.flyer-card {
  background: var(--accio-bg-inset);
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.flyer-card:hover { border-color: var(--accio-border-strong); }
.flyer-card img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; display: block;
  background: var(--accio-bg-base);
}
.flyer-card.missing .flyer-placeholder {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--accio-text-tertiary);
  font-size: var(--accio-text-xs);
  background: var(--accio-bg-base);
}
.flyer-meta {
  padding: var(--accio-space-3);
  font-size: var(--accio-text-xs);
}
.flyer-meta .num {
  font-family: var(--accio-font-mono);
  color: var(--accio-text-primary);
}
.flyer-meta .topic {
  margin-top: var(--accio-space-1);
  color: var(--accio-text-primary);
}
.flyer-tag {
  display: inline-block;
  margin-top: var(--accio-space-2);
  padding: 2px var(--accio-space-2);
  border-radius: var(--accio-radius-sm);
  font-size: var(--accio-text-xs);
  background: var(--accio-accent-muted);
  color: var(--accio-accent-text);
}
.flyer-tag.missing-tag {
  background: var(--accio-danger-muted);
  color: var(--accio-danger);
}

/* Metrics bars */
.bar-row {
  display: flex; align-items: center; gap: var(--accio-space-3);
  padding: var(--accio-space-3) var(--accio-space-4);
  font-size: var(--accio-text-sm);
}
.bar-label {
  min-width: 120px;
  color: var(--accio-text-tertiary);
  font-size: var(--accio-text-xs);
}
.bar-track {
  flex: 1; height: 6px;
  background: var(--accio-bg-base);
  border-radius: var(--accio-radius-sm);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--accio-accent);
  border-radius: var(--accio-radius-sm);
  opacity: 0.85;
}
.bar-val {
  min-width: 2rem;
  text-align: right;
  font-family: var(--accio-font-mono);
  font-size: var(--accio-text-xs);
  color: var(--accio-text-primary);
}

.metric-note {
  padding: var(--accio-space-3) var(--accio-space-4);
  font-size: var(--accio-text-xs);
  color: var(--accio-text-tertiary);
  border-top: var(--accio-border-width) solid var(--accio-border);
}

.empty {
  padding: var(--accio-space-8);
  text-align: center;
  color: var(--accio-text-tertiary);
  font-size: var(--accio-text-sm);
}

.accio-links {
  margin-top: var(--accio-space-5);
  display: flex; flex-wrap: wrap; gap: var(--accio-space-4);
  font-size: var(--accio-text-xs);
}

/* Barra de progreso del dashboard — ligada a procesos reales */
.boot-progress {
  padding: 0 var(--space-xl);
  background: var(--accio-bg-surface-1);
  border-bottom: var(--accio-border-width) solid var(--accio-border-subtle);
  transition: opacity 0.35s ease, max-height 0.35s ease;
  max-height: 48px;
  overflow: hidden;
}
.boot-progress.is-done {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.boot-progress[hidden] {
  display: none !important;
}
.boot-progress-track {
  height: 3px;
  background: var(--accio-bg-surface-3);
  border-radius: var(--accio-radius-full);
  overflow: hidden;
  margin-top: var(--accio-space-2);
}
.boot-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accio-accent), var(--accio-accent-strong, #3d7ea6));
  border-radius: inherit;
  transition: width 0.08s linear;
}
.boot-progress-comment {
  margin: var(--accio-space-2) 0 var(--accio-space-3);
  font-size: var(--accio-text-xs);
  color: var(--accio-text-secondary);
  line-height: 1.3;
}

.toast {
  position: fixed;
  bottom: var(--accio-space-5);
  right: var(--accio-space-5);
  background: var(--accio-bg-surface-2);
  border: var(--accio-border-width) solid var(--accio-border-strong);
  padding: var(--accio-space-4);
  border-radius: var(--accio-radius-lg);
  max-width: 360px;
  box-shadow: var(--accio-shadow-lg);
  z-index: 50;
  font-size: var(--accio-text-sm);
  color: var(--accio-text-primary);
  animation: slideUp 0.2s ease;
}
.toast.is-error {
  border-color: var(--accio-danger);
  background: var(--accio-danger-muted);
}
@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
}

/* Knowledge Engine — Fase E */
.accio-form {
  display: grid;
  gap: var(--accio-space-3);
  padding: var(--accio-space-4);
}
.accio-form label {
  display: flex;
  flex-direction: column;
  gap: var(--accio-space-1);
  font-size: var(--accio-text-xs);
  color: var(--accio-text-secondary);
}
.accio-form input,
.accio-form textarea,
.accio-form select {
  padding: var(--accio-space-2) var(--accio-space-3);
  border-radius: var(--accio-radius-md);
  border: var(--accio-border-width) solid var(--border-green);
  background: #ffffff;
  color: var(--accio-text-primary);
  font-family: inherit;
  font-size: var(--accio-text-sm);
}
.accio-form input:focus,
.accio-form textarea:focus,
.accio-form select:focus {
  outline: none;
  border-color: var(--green-400);
  background: #ffffff;
}
.accio-form-inline {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  align-items: end;
  margin-bottom: var(--accio-space-4);
}
.accio-btn-sm {
  padding: var(--accio-space-1) var(--accio-space-3);
  font-size: var(--accio-text-xs);
}
.topic-preview {
  margin-top: var(--accio-space-3);
  padding: var(--accio-space-4);
  background: var(--accio-bg-inset);
  border-radius: var(--accio-radius-md);
  border: var(--accio-border-width) solid var(--accio-border);
}
.topic-meta {
  display: flex;
  gap: var(--accio-space-3);
  align-items: center;
  margin-bottom: var(--accio-space-3);
}
.topic-framework {
  font-size: var(--accio-text-sm);
  color: var(--accio-text-secondary);
  margin-bottom: var(--accio-space-3);
  line-height: 1.5;
}
.topic-text {
  white-space: pre-wrap;
  font-size: var(--accio-text-sm);
  color: var(--accio-text-primary);
  max-height: 320px;
  overflow: auto;
  margin: 0;
  font-family: var(--accio-font-mono);
}

.accio-tenant-select {
  font-size: var(--accio-text-sm);
  font-weight: 600;
  color: var(--accio-copper);
  background: transparent;
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-sm);
  padding: 0.2rem 0.5rem;
  max-width: 12rem;
}

.accio-card-foot {
  padding: var(--accio-space-3) var(--accio-space-4);
  border-top: var(--accio-border-width) solid var(--accio-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--accio-space-2);
}

.accio-form h4 {
  margin: var(--accio-space-3) 0 var(--accio-space-2);
  font-size: var(--accio-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accio-text-tertiary);
}

.field-status {
  font-size: var(--accio-text-xs);
  margin-left: var(--accio-space-2);
}
.field-status.status-active { color: var(--accio-success); }
.field-status.status-pending { color: var(--accio-warning, #c9a227); }
.field-status.status-unset { color: var(--accio-text-tertiary); }
.field-status.status-error { color: var(--accio-danger); }

/* Configuration Center — sub-navegación */
.config-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: var(--accio-space-5);
  margin-top: var(--accio-space-4);
  align-items: start;
}
.config-content {
  min-width: 0;
  width: 100%;
}
.config-content .accio-card-body {
  max-height: none;
  overflow: visible;
}
.config-content .accio-form {
  grid-template-columns: minmax(0, 1fr);
}
.config-content .accio-form.config-form-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.config-content .accio-form label input,
.config-content .accio-form label textarea,
.config-content .accio-form label select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.config-content .accio-card-head {
  flex-wrap: wrap;
  gap: var(--accio-space-3);
}
.config-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--accio-space-2);
  margin-left: auto;
}
.knowledge-editor-head {
  margin: calc(-1 * var(--accio-space-4)) calc(-1 * var(--accio-space-4)) var(--accio-space-4);
  border-radius: var(--accio-radius-lg) var(--accio-radius-lg) 0 0;
}
.knowledge-editor-body {
  padding-top: 0;
}
.accio-card-foot.config-crud-bar {
  padding: var(--accio-space-3) var(--accio-space-4);
  border-top: var(--accio-border-width) solid var(--accio-border);
  margin-top: 0;
}
.config-table-wrap {
  overflow-x: auto;
  margin: var(--accio-space-2) 0;
  -webkit-overflow-scrolling: touch;
}
.config-table-wrap .accio-table {
  min-width: 520px;
}
.config-table-wrap .accio-table input,
.config-table-wrap .accio-table select {
  width: 100%;
  min-width: 72px;
  box-sizing: border-box;
}
.config-table-wrap .accio-table th.col-actions,
.config-table-wrap .accio-table td.col-actions {
  width: 48px;
  text-align: center;
  white-space: nowrap;
}
.config-content .accio-form label.config-check {
  flex-direction: row;
  align-items: center;
  gap: var(--accio-space-2);
}
.config-card-title {
  flex: 1;
  min-width: 0;
  word-break: normal;
}
.cfg-btn-del {
  color: var(--danger, #b42318);
  border-color: var(--danger-border, #fecdca);
  padding: var(--accio-space-1) var(--accio-space-2);
  line-height: 1;
}
.cfg-btn-del:hover {
  background: var(--danger-bg, #fef3f2);
}
.config-table-wrap .accio-table tr.is-selected td {
  background: var(--accent-bg);
}
.config-form-empresa {
  margin-top: var(--accio-space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--accio-space-3);
}
.config-form-empresa label {
  display: flex;
  flex-direction: column;
  gap: var(--accio-space-1);
}
@media (max-width: 900px) {
  .config-form-empresa {
    grid-template-columns: 1fr;
  }
}
.config-crud-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--accio-space-2);
  align-items: center;
  margin-top: var(--accio-space-3);
}
.config-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--accio-space-4);
  min-width: 0;
}
.config-nav {
  text-align: left;
  width: 100%;
  white-space: nowrap;
  padding: var(--accio-space-2) var(--accio-space-3);
  border: none;
  border-radius: var(--accio-radius-sm);
  background: transparent;
  color: var(--accio-text-secondary);
  font-size: var(--accio-text-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.config-nav:hover {
  background: var(--accio-bg-surface-2);
  color: var(--accio-text-primary);
}
.config-nav.active {
  background: var(--accent-bg);
  color: var(--green-600);
  border: 1px solid var(--border-green);
  font-weight: var(--accio-weight-semibold);
}
.easyai-provider-row {
  display: flex;
  justify-content: space-between;
  gap: var(--accio-space-3);
  align-items: flex-start;
  padding: var(--accio-space-3) 0;
  border-bottom: 1px solid var(--border);
}
.easyai-provider-row-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--accio-space-2);
}
.config-section.active .accio-card {
  background: var(--bg-card);
  border-color: var(--border);
}
.config-section--claro.active .accio-card {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  box-shadow: var(--accio-shadow-sm);
}
.config-section--claro.active .accio-card-head {
  background: var(--bg-card);
  border-bottom-color: var(--border-green);
  color: var(--green-600);
}
.config-section--claro.active .accio-form label {
  color: var(--text-secondary);
}
.config-section--claro.active .accio-form input,
.config-section--claro.active .accio-form textarea,
.config-section--claro.active .accio-form select {
  background: #ffffff;
  border-color: var(--border-green);
  color: var(--text-primary);
}
.config-section--claro.active .accio-form input:focus,
.config-section--claro.active .accio-form textarea:focus,
.config-section--claro.active .accio-form select:focus {
  background: #ffffff;
  border-color: var(--green-400);
}
.config-section--claro.active .metric-note {
  color: var(--text-muted);
}
.config-nav[data-config="tenant"].active {
  background: var(--accent-bg);
  color: var(--green-600);
  border-color: var(--border-green);
}
.config-section {
  display: none;
}
.config-section.active {
  display: block;
}
.config-card {
  margin-bottom: var(--accio-space-4);
}
.config-log-view {
  margin-top: var(--accio-space-3);
  padding: var(--accio-space-3);
  background: var(--bg-panel);
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-sm);
  font-family: var(--accio-font-mono);
  font-size: var(--accio-text-xs);
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--accio-text-secondary);
}
@media (max-width: 900px) {
  .config-layout {
    grid-template-columns: 1fr;
  }
  .config-subnav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  .config-content .accio-form.config-form-2col {
    grid-template-columns: 1fr;
  }
}

/* —— Dashboard split: contenido + Asistente IA —— */
.dashboard-workspace {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: calc(100vh - 120px);
}
.dashboard-workspace > .content {
  flex: 1;
  min-width: 0;
}
.assistant-panel {
  width: 340px;
  flex-shrink: 0;
  border-left: var(--accio-border-width) solid var(--accio-border);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  position: sticky;
  top: 0;
}
.assistant-panel-head {
  padding: var(--accio-space-3) var(--accio-space-4);
  border-bottom: var(--accio-border-width) solid var(--accio-border);
  font-weight: 500;
  font-size: var(--accio-text-sm);
  display: flex;
  align-items: center;
  gap: var(--accio-space-2);
}
.assistant-badge-click { cursor: pointer; }
.assistant-badge-click:hover { filter: brightness(0.92); }
.assistant-setup-hint {
  margin: var(--accio-space-2) var(--accio-space-3) 0;
  padding: var(--accio-space-2) var(--accio-space-3);
  font-size: 12px;
  line-height: 1.45;
  border-radius: var(--accio-radius-sm);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--text-secondary);
}
.assistant-setup-hint.hidden { display: none; }
.assistant-setup-hint .btn-sm {
  margin-top: 6px;
  font-size: 11px;
  padding: 4px 8px;
}
.assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--accio-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--accio-space-3);
}
.assistant-msg {
  font-size: var(--accio-text-sm);
  line-height: 1.45;
  padding: var(--accio-space-2) var(--accio-space-3);
  border-radius: var(--accio-radius-sm);
  max-width: 100%;
  white-space: pre-wrap;
}
.assistant-msg.user {
  align-self: flex-end;
  background: var(--accent-bg);
  color: var(--text-primary);
}
.assistant-msg.bot {
  align-self: flex-start;
  background: var(--bg-elevated);
  border: var(--accio-border-width) solid var(--accio-border);
}
.assistant-orders {
  border-top: var(--accio-border-width) solid var(--accio-border);
  padding: var(--accio-space-3);
  max-height: 280px;
  overflow-y: auto;
  background: var(--accent-bg);
  flex-shrink: 0;
}
.assistant-orders.has-pending {
  box-shadow: inset 0 0 0 2px var(--green-600);
  animation: assistant-pulse 1.5s ease-in-out 2;
}
@keyframes assistant-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px transparent; }
  50% { box-shadow: inset 0 0 0 2px var(--green-600); }
}
.assistant-orders-title {
  font-size: var(--accio-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--accio-space-2);
  color: var(--accio-text-secondary);
}
.assistant-order-card {
  border: var(--accio-border-width) solid var(--accio-border);
  border-radius: var(--accio-radius-sm);
  padding: var(--accio-space-2);
  margin-bottom: var(--accio-space-2);
  font-size: var(--accio-text-xs);
}
.assistant-order-actions {
  display: flex;
  gap: var(--accio-space-2);
  margin-top: var(--accio-space-2);
  flex-wrap: wrap;
}
.assistant-input-row {
  display: flex;
  gap: var(--accio-space-2);
  padding: var(--accio-space-3);
  border-top: var(--accio-border-width) solid var(--accio-border);
}
.assistant-input-row textarea {
  flex: 1;
  min-height: 56px;
  resize: vertical;
  font-family: inherit;
  font-size: var(--accio-text-sm);
  padding: var(--accio-space-2);
  border-radius: var(--accio-radius-sm);
  border: var(--accio-border-width) solid var(--accio-border);
}
.publications-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--accio-space-2);
  margin-bottom: var(--accio-space-4);
  align-items: center;
}
.publications-toolbar select,
.publications-toolbar input {
  font-size: var(--accio-text-sm);
  padding: var(--accio-space-1) var(--accio-space-2);
  border-radius: var(--accio-radius-sm);
  border: var(--accio-border-width) solid var(--accio-border);
}
.publications-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--accio-space-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .dashboard-workspace { flex-direction: column; }
  .assistant-panel {
    width: 100%;
    max-height: 420px;
    position: relative;
    border-left: none;
    border-top: var(--accio-border-width) solid var(--accio-border);
  }
  .publications-split { grid-template-columns: 1fr; }
}
.pub-row { cursor: pointer; transition: background 0.12s; }
.pub-row:hover,
.pub-row.selected { background: var(--accent-bg); }
.pub-detail pre {
  white-space: pre-wrap;
  font-size: var(--accio-text-sm);
  max-height: 280px;
  overflow: auto;
  background: var(--bg-panel);
  padding: var(--accio-space-3);
  border-radius: var(--accio-radius-sm);
}
.pub-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--accio-space-2);
  margin-top: var(--accio-space-3);
}

.muted {
  color: var(--text-muted);
  font-size: var(--accio-text-sm);
}

/* ── Plan de Marketing · Vertical Slice 1 ── */

.plan-workspace-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--accio-space-4);
  margin-bottom: var(--accio-space-5);
  padding-bottom: var(--accio-space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.plan-workspace-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 var(--accio-space-1);
  color: var(--text-primary);
}
.plan-workspace-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--accio-text-sm);
}
.plan-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--accio-space-2);
}
.plan-subnav-item {
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: var(--accio-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.plan-subnav-item.active {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}
.plan-view[hidden] { display: none !important; }
.plan-status-banner {
  display: flex;
  align-items: center;
  gap: var(--accio-space-3);
  padding: var(--accio-space-3) var(--accio-space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--accio-radius-md);
  margin-bottom: var(--accio-space-4);
  font-weight: 500;
}
.plan-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-disabled);
  flex-shrink: 0;
}
.plan-status-dot.is-active {
  background: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.plan-empty-state {
  text-align: center;
  padding: var(--accio-space-8) var(--accio-space-4);
  color: var(--text-muted);
}
.plan-empty-state i { font-size: 2rem; opacity: 0.5; display: block; margin-bottom: var(--accio-space-2); }
.plan-active-card { padding: var(--accio-space-2) 0; }
.plan-active-head {
  display: flex;
  align-items: center;
  gap: var(--accio-space-3);
  margin-bottom: var(--accio-space-3);
}
.plan-active-head h3 { margin: 0; font-size: 1.25rem; }
.plan-active-objective { color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--accio-space-4); }
.plan-active-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--accio-space-3);
}
.plan-active-meta div { display: flex; flex-direction: column; gap: 0.15rem; }
.accio-badge--green { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-border); }
.plan-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--accio-space-4);
}
.plan-form-span2 { grid-column: 1 / -1; }
.plan-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--accio-space-3);
  margin-top: var(--accio-space-5);
  padding-top: var(--accio-space-4);
  border-top: 1px solid var(--border-subtle);
}
.plan-create-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--accio-text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.plan-create-form input,
.plan-create-form textarea,
.plan-create-form select {
  font-weight: 400;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--accio-radius-sm);
  background: var(--bg-card);
}
.plan-context-intro { color: var(--text-muted); margin-bottom: var(--accio-space-4); }
.plan-context-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--accio-space-4);
  margin-top: var(--accio-space-4);
}
.plan-context-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--accio-radius-md);
  padding: var(--accio-space-4);
}
.plan-context-card--highlight {
  border-color: var(--accent-border);
  background: var(--accent-bg);
}
.plan-context-card h4 {
  margin: 0 0 var(--accio-space-3);
  font-size: var(--accio-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.plan-context-lead { font-size: 1.1rem; font-weight: 600; margin: 0 0 var(--accio-space-3); color: var(--text-primary); }
.plan-context-list { list-style: none; margin: 0; padding: 0; }
.plan-context-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--accio-space-2);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--accio-text-sm);
}
.plan-context-list li span { color: var(--text-muted); }
.plan-context-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.plan-context-tags li {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: var(--accio-text-xs);
}
.plan-exec-summary {
  background: linear-gradient(135deg, var(--accent-bg), var(--bg-elevated));
  border: 1px solid var(--accent-border);
  border-radius: var(--accio-radius-md);
  padding: var(--accio-space-5);
  margin: var(--accio-space-4) 0;
}
.plan-exec-summary h4 {
  margin: 0 0 var(--accio-space-2);
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.plan-exec-summary p { margin: 0; line-height: 1.6; color: var(--text-secondary); }
.plan-proposals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--accio-space-4);
}
.plan-proposal-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--accio-radius-md);
  padding: var(--accio-space-4);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--accio-space-2);
}
.plan-proposal-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-proposal-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--accio-text-sm);
}
.plan-priority {
  font-size: var(--accio-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.plan-priority--alta { background: #fef2f2; color: #b91c1c; }
.plan-priority--media { background: #fffbeb; color: #b45309; }
.plan-priority--baja { background: var(--accent-bg); color: var(--accent); }
.plan-proposal-card h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.plan-proposal-channel { font-size: var(--accio-text-sm); color: var(--text-muted); }
.plan-proposal-actions ul { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: var(--accio-text-sm); }
.plan-proposal-actions strong { font-size: var(--accio-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.plan-r2-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-r2-modal[hidden] { display: none !important; }
.plan-r2-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 46, 24, 0.45);
}
.plan-r2-dialog {
  position: relative;
  max-width: 480px;
  width: calc(100% - 2rem);
  z-index: 1;
  box-shadow: var(--accio-shadow-lg);
}
.plan-r2-options { margin: var(--accio-space-3) 0; padding-left: 1.2rem; color: var(--text-secondary); }
@media (max-width: 1100px) {
  .plan-proposals-grid { grid-template-columns: 1fr; }
  .plan-context-grid { grid-template-columns: 1fr; }
  .plan-form-grid { grid-template-columns: 1fr; }
  .plan-form-span2 { grid-column: 1; }
}

/* Workspace shell — dashboard embebido en iframe */
.accio-embedded .topbar,
.accio-embedded .navbar,
.accio-embedded .assistant-panel,
.accio-embedded .boot-progress {
  display: none !important;
}

.accio-embedded .dashboard-workspace {
  margin-top: 0;
  padding-top: 0;
}

.accio-embedded .content {
  margin-left: 0;
  max-width: none;
  padding: var(--accio-space-4);
}

.accio-embedded #app {
  min-height: auto;
}