/* Ferramentas externas (MCP) — Config → Integrações. Folha própria, celular
   primeiro (alvos de 44px, campos de 16px); no manifesto do static.ts. */
.mcpx-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.mcpx-block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mcpx-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.mcpx-tab { min-height: 44px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; }
.mcpx-tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent-text); font-weight: 600; }
.mcpx-tab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; border-radius: 6px; }
.mcpx-empty + [data-mcp-new] { margin-top: 12px; }
.mcpx-block h3 { margin: 0 0 4px; font-size: 15px; }
.mcpx-desc { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.mcpx-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
.mcpx-error { color: var(--danger-text); }

.mcpx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mcpx-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.mcpx-card-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcpx-card-desc { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.mcpx-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.mcpx-link { font-size: 13px; color: var(--accent-text); min-height: 44px; display: inline-flex; align-items: center; }

.mcpx-list { display: flex; flex-direction: column; gap: 8px; }
.mcpx-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.mcpx-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcpx-name { font-weight: 600; }
.mcpx-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
.mcpx-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.mcpx-badge.on { color: var(--success-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); }
.mcpx-badge.off { color: var(--text-muted); border-color: var(--border); }
.mcpx-badge.warn { color: var(--warning-text); border-color: color-mix(in srgb, var(--warning-fill) 35%, transparent); background: color-mix(in srgb, var(--warning-fill) 8%, transparent); }

.mcpx-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; cursor: pointer; margin-top: 4px; }
.mcpx-toggle input { width: 18px; height: 18px; }
.mcpx-hint { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.mcpx-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mcpx-btn { min-height: 44px; }
.mcpx-small { min-height: 36px; font-size: 12.5px; margin-top: 6px; }
.mcpx-danger { color: var(--danger-text); }
.mcpx-btn.armed { outline: 2px solid var(--warning-fill); }
.mcpx-armbtn { display: block; margin: 0 0 6px; }

.mcpx-test { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.mcpx-test.mcpx-ok { color: var(--success-text); }
.mcpx-tools code { font-size: 12px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border); margin: 0 2px 4px 0; display: inline-block; color: var(--text); }

.mcpx-add { margin-top: 14px; }
.mcpx-form { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); }
.mcpx-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: 13px; }
.mcpx-field > span { color: var(--text-muted); }
.mcpx-field input, .mcpx-field select, .mcpx-hrow input { font-size: 16px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.mcpx-field input[readonly] { opacity: .75; }
.mcpx-hrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px; gap: 6px; margin-bottom: 10px; align-items: center; }
.mcpx-hrow .mcpx-hformat { grid-column: 1 / -1; }
.mcpx-hrm { min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; }
.mcpx-hrm:hover { color: var(--danger-text); }

.mcpx-managed { margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.mcpx-managed summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.mcpx-managed ul { margin: 6px 0 0; padding-left: 18px; }
.mcpx-managed li { display: flex; gap: 8px; align-items: center; margin: 4px 0; }

@media (max-width: 560px) {
  .mcpx-hrow { grid-template-columns: 1fr 44px; }
  .mcpx-hrow .mcpx-hval { grid-column: 1 / -1; }
}